::-webkit-scrollbar{
    width: 0;
}

/*---------------------Section 1--------------------*/
.section-1 {
    max-width: 100%;
    padding: 20px 0;
    background-image: url(../images/Size\ ya\ cover.png);
    background-size: cover;
    color: #fff;
    min-height: 70vh;
    z-index: 1;

}

.span{
    margin-left: 5px;
}
.span span{
    position:relative;
    font-family:"Lato", sans-serif;
    top: 20px;
    color: #2f98fb;
    display: inline-block;
    font-size: 5rem;
    text-shadow: 0 1px 0 #580128,
    6px 0 transparent, 0 7px 0 transparent, 0 8px 0 transparent, 0 9px 0 transparent, 0 10px 0 transparent, 0 10px 10px rgba(0, 0, 0.5);
}

.span span:nth-child(2){
    animation-delay: 0.1s;
}
.span span:nth-child(3){
    animation-delay: 0.2s;
}
.span span:nth-child(4){
    animation-delay: 0.3s;
}
.span span:nth-child(5){
    animation-delay: 0.4s;
}
.span span:nth-child(6){
    animation-delay: 0.5s;
}
.span span:nth-child(7){
    animation-delay: 0.6s;
}
.span span:nth-child(8){
    animation-delay: 0.7s;
}
.span span:nth-child(9){
    animation-delay: 0.8s;
}
.span span:nth-child(10){
    animation-delay: 0.9s;
}
.span span:nth-child(11){
    animation-delay: 1s;
}
.span span:nth-child(12){
    animation-delay: 1.1s;
}


@keyframes bounce{
    100%{
        top: -5px;
        text-shadow: 0 1px 0 #b7b7b7, 0 2px 0 #b7b7b7, 0 3px 0 #b7b7b7,
         0 4px 0 #b7b7b7, 0 5px 0 #b7b7b7, 0 6px 0 #b7b7b7, 0 7px 0 #b7b7b7,
          0 8px 0 #b7b7b7, 0 9px 0 #b7b7b7, 0 10px 0 #b7b7b7, 0 60px 30px rgba(0, 0, 0.3);
    }
}

.getStart{
  position: relative;
  bottom: 30px;
  left: 15px;
  background: rgb(177, 1, 1);
  color: #fff;
  font-weight: 100;
  border: none;
  cursor: pointer;
  margin-left: 85%;
  /* padding-right: 10%; */
}

.getStart:hover{
    background-color: aqua;
    color: #000;
    font-weight: bold;
    border: 2px solid green;
    border-radius: 30px;
}

/*---------------------Section 2--------------------*/
.section-2 {
    min-height: 80vh;
    width: 100%;
    padding: 20px 0;

}

/*---------------------Section 3--------------------*/
.section--3 {
    min-height: 70vh;
    width: 100vw;
    padding: 10px;
    text-align: center;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    position: relative;
}
.sect3-h1{
    font-family: cursive;
}

.best-3{
    padding: 15px;
   display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    align-items: center;
    height: 400px;
    gap: 30px;
    margin-top: 5px;
    overflow-x: scroll;
}

.best-sn{
    background: #fff;
    text-align: center;
    position: relative;
    margin: 10px;
    padding: 7px;
    width: 100%;
    height: 350px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, .3);
    border-radius: 50px;
    cursor: pointer;
    transition: .5s;
}
.best-sn:hover{
    transform: scale(.9);
}
.best-img{
     width: 100%;
    padding: 20px 0;
    border-radius: 50px;
    height: 180px;
    background-image: url(../images/Benefit.jfif);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
    color: #fff;
}
.best-p{
    font-size: 20px;
    font-weight: 100;
    margin: 5px;
    font-family: sans-serif;
}
.best-info{
    color: #5f5f5f;
    font-size: 12px;
    align-items: center;
    position: relative;
    word-wrap: break-word;
    margin-top: 11px;
    padding: 0 20px 0 20px;
}

/*---------------------Section 4--------------------*/
.section-4 {
    width: 100%;
    padding: 20px 0;
    background-image: url(../images/Benefits_of_seamoss.jpeg);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
    color: #fff;
    z-index: 1;

}
.container-goods{
    width: 100%;
    min-height: 100vh;
}
.container-goods h1{
    color: green;
    font-weight: 600;
    font-size: 30px;
    margin: 10px;
}
.content-goods{
    text-align: center;
    width: 31rem;
    justify-items: center;
}

.content-items{
    width: 29rem;
    height: 60px;
    display: flex;
    padding: 15px;
    background-color: bisque;
    align-items: center;
    border-radius: 30px;
    column-gap: 30px;
    color: #000;
    margin: 15px;
}
.content-items img{
    height: 50px;
    width: 50px;
    border-radius: 30px;
}
.items-details{
    text-align: left;
}



/*---------------------Section-five for videos--------------------*/
/*---------------------Section-five for videos--------------------*/
/*---------------------Section-five for videos--------------------*/

.section-five {
  min-height: 80vh;
  width: 100%;
  padding: 20px 0;
  text-align: center;
}

.section-five h1 {
  font-size: 30px;
  color: #333;
  margin: 50px 0 30px;
}

.video-slider-wrapper {
  position: relative;
  width: 95%;
  max-width: 1000px;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 12px;
  padding: 20px 0 60px; /* space for controls */
}

/* Slides container */
.video-slider {
  display: flex;
  transition: transform 0.5s ease-in-out;
  gap: 15px;
}

/* Each slide takes full width */
.video-slide {
  flex: 0 0 100%; /* full width */
  box-sizing: border-box;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Video or image */
.video-slide video,
.video-slide img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px 12px 0 0;
  object-fit: cover;
}

/* Text under video */
.video-slide a {
  display: block;
  padding: 10px;
  text-align: center;
  text-decoration: none;
  color: #333;
  font-weight: 500;
}

/* Controls container */
.video-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  margin-top: 10px;
}

/* Arrows */
.arrow {
  width: 35px;
  height: 35px;
  background: #333;
  color: #fff;
  border: none;
  border-radius: 18%;
  cursor: pointer;
  font-size: 18px;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: background-color 0.3s;
}

.arrow:hover { background: #555; }

/* Dots */
.dots {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex: 1;
}

.dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #bbb;
  cursor: pointer;
  transition: background-color 0.3s;
}

.dot.active { background: #333; }

/* Responsive adjustments */
@media (max-width: 768px) { .arrow { width: 28px; height: 28px; font-size: 16px; } }
@media (max-width: 480px) { .arrow { width: 25px; height: 25px; font-size: 14px; } }



/* ==============The old contents ====================== */
/* ==============The old contents ====================== */

/* .section-5 p {
    max-width: 70%;
    margin: 0 auto; 
    font-size: 16px;
    word-spacing: 6px;
    font-weight: 300;
    color: #5f5f5f;
    line-height: 1.8;
}
.container-3{
    display: flex;
    flex-wrap: nowrap;
    width: 100%;
    height: 450px;
    gap: 20px;
    margin-top: 100px;
    overflow-x: auto;
}
.container-3 .slider{
    border-radius: 10px;
    border: 1px solid #ffffff;
    box-shadow: 0 4px 6px  rgba(253, 5, 5, 0.1);
    background-color: hsl(0, 0%, 100%);
}
.container-3 .slider img{
    height: 200px;
    width: 280px;
    border-radius: 5px;
}
.container-3 .slider p{
    font-weight: 600;
    margin-left: 5px;
    font-size: 13px;
    color: rgb(0, 0, 0);
}
.slider .info{
    margin-top: 10px;
    color: #545252;
    display: flex;
    flex-wrap: wrap;
}
.slider .info #calender{
    width: 22px;
    height: 22px;
}
.slider .info #location, .slider .info #flag{
    width: 15px;
    height: 13px;
    margin-top: 2px;
}
.slider .info p{
    font-size: 12px;
    color: #020202;
}
.more-info{
    width: 100%;
    height: 45px;
    margin-top: 5px;
    align-items: center;
    display: flex;
    padding: 5px;
}
.info .more-info button{
    margin: 0 5px 10px 0px;
    padding: 10px 30px;
}
.info .more-info a button{
    background: linear-gradient(to-right, rgb(245, 104, 104),rgb(202, 105, 121));

}
.more-info p span{  
    font-size: 20px;
    color: #ffffff;
}

.info-bt{
    display: block;
}
.info-img{
    display: flex;
    gap: 5px;
}
.more-bt{
    display: flex;
    
}
 */

/*------------Section 6----------*/
.section-6{
    padding: 15px;
    justify-content: center;
}
.section-6 h1{
    text-align: center;
    margin-top: 70px;
    
}
.destinations-1, .destinations-2{
    display: flex;
    gap: 20px;
    margin-top: 40px;
}
.destination-1{
    background-image: url(../images/Skin\ care.jpg);
    background-position: center;
    background-size: cover;
    height: 310px;
    width: 380px;
    color: #030303;
    font-weight: 900;
    border-radius: 10px;
    position: relative;
}
.destination-2{
    background-image: url(../images/Brahma\ 3.jfif);
    background-position: center;
    background-size: cover;
    height: 310px;
    width: 380px;
    color: #fff;
    font-weight: 900;
    border-radius: 10px;
    position: relative;
}
.destination-3{
    background-image: url(../images/Guinea\ fowl.jfif);
    background-position: center;
    background-size: cover;
    height: 310px;
    width: 380px;
    color: #fff;
    font-weight: 900;
    border-radius: 10px;
    position: relative;
}
.destination-1 p, .destination-2 p, .destination-3 p{
    position: absolute;
    top: 180px;
    left: 10px;
    font-size: 20px;
}
.destination-1 button, .destination-2 button , .destination-3 button{
    position: absolute;
    top: 210px;
    left: 10px;
    font-size: 15px;  
    padding: 4px 14px;
    border-radius: 20px;
    border: 1px solid #fff;
    background-color:  rgba(109, 70, 70, 0.567);;
}
.destination-btn a{
    text-decoration: none;
    color: #fff;
}
.destination-btn:hover{
    background-color: rgb(2, 204, 204);
    border: 1px solid rgb(2, 204, 204);
}
.destination-4{
    background-image: url(../images/Milk.jpeg);
    background-position: center;
    background-size: cover;
    height: 310px;
    width: 380px;
    color: #fff;
    font-weight: 900;
    border-radius: 10px;
    position: relative;
}
.destination-5{
    background-image: url(../images/Mayai.jfif);
    background-position: center;
    background-size: cover;
    height: 310px;
    width: 380px;
    color: #fff;
    font-weight: 900;
    border-radius: 10px;
    position: relative;
}
.destination-6{
    background-image: url(../images/food\ 2.jpg);
    background-position: center;
    background-size: cover;
    height: 310px;
    width: 380px;
    color: #fff;
    font-weight: 900;
    border-radius: 10px;
    position: relative;
}
.destination-4 p, .destination-5 p, .destination-6 p{
    position: absolute;
    top: 130px;
    left: 10px;
    font-size: 20px;
}
.destination-4 button, .destination-5 button, .destination-6 button{
    position: absolute;
    top: 160px;
    left: 10px;
    color: #fff;
    font-size: 15px;  
    padding: 4px 14px;
    border-radius: 20px;
    border: 1px solid #fff;
    background-color:  rgba(109, 70, 70, 0.567);
}

/*-------------Section 7-----------*/
.section-7{
    display: flex;
    gap: 150px;
    margin-top: 50px;
}
.section-7 .text{
    flex-basis: 40%;
    margin-top: 40px;
    margin-left: 30px;
    flex-direction: column;
}
.text h1{
    margin-top: 40px;
    font-size: 2rem;
}
.text hr{
    color: #545252;
    margin-bottom: 20px;
}
.text p{
    padding: 10px 50px;
    color: #6f6d6d;
}
.text p span{
    background-color: #000;
    color: #fff;
    border-radius: 50%;
    padding: 3px 8px;
    margin-right: 10px;
}
div button{
    margin: 20px;
    padding: 15px 40px;
    border-radius: 5px;
    border: 1px solid rgb(254, 125, 125);
    background-color:  rgb(254, 125, 125);
    cursor: pointer;
}
div a button {
    text-decoration: none;
    color: #fff;
}
div a button:hover{
    color: black;
}
.section-7 .image{
    background-image: url(../images/Bujari\ Investment.jpg);
    flex-basis: 40%;
    background-position: center;
    background-size: cover;
    height: 500px;
    width: 60%;
    border-radius: 15px;
}

/*------------Section 8--------------*/
.section-8{
    background-image: url(../images/Dark\ blue.jpeg);
    background-position: center;
    background-size: cover;
    height: 180vh;
    width: 100%;
    margin-top: 30px;
    color: #fff;
}
.section-8 .part-1{
    display: flex;
    gap: 60%;
}
.section-8 .part-1 img{
    width: 100px;
    height: 100px;
    margin: 30px 40px;
}
.section-8 .part-1 .follow-us{
    display: block;
    margin-top: 40px;
}
.section-8 .part-1 .follow-us .text{
    margin-top: 20px;
    color: white;
    font-size: 13px;
}
.section-8 .social-icons{
    display: flex;
}
.section-8 .social-icons .fa{
    margin-right: 0;
    margin-top: 20px;
}
.section-8 .social-icons a {
    color: #fff;
    font-size: 20px;
    text-decoration: none;
    transition: color 0.3s ease;
}
.section-8 .social-icons a:hover {
    color: rgb(214, 141, 6); 
}
.section-8 hr{
    color: #2c2b2b;
    width: 100%;
    margin-top: 60px;
    height: 1px;
}
.part-2{
    display: flex;
    gap: 50px;
    margin-top: 80px;
}
.part-2 .quick-links, .part-2 .experience, .part-2 .support{
    margin-left: 40px;
    flex-basis: 15%;
}
.part-2 .quick-links li, .part-2 .experience li, .part-2 .support li{
    list-style: none;
    margin-top: 20px;
}
.part-2 .quick-links li a, .part-2 .experience li a, .part-2 .support li a{
    text-decoration: none;
    color: #d2d0d0;
}
.part-2 .quick-links li a:hover, .part-2 .experience li a:hover, .part-2 .support li a:hover{
    color: #fff;
}
.part-2 .newsletter {
    flex-basis: 35%;
    width: 70%;
    margin-right: 40px;
}
.part-2 .newsletter p{
    max-width: 90%;
    margin-top: 30px;
    line-height: 30px;
}
#email-us {
    display: flex;
    margin-top: 40px;
    margin-right: 10px;
}
.input-container {
    position: relative;
    width: 100%; 
    max-width: 400px; 
}
.input-container input {
    width: 100%;
    padding: 22px 70px;
    font-size: 18px;
    border: 1px solid #ccc;
    border-radius: 10px;
    outline: none;
    z-index: 1;
}
.input-container button {
    position: absolute;
    right: 5px; 
    top: 20%;
    transform: translateY(-50%);
    padding: 10px 25px;
    font-size: 14px; 
    border: none;
    background-color: rgb(247, 73, 73);
    color: #fff;
    border-radius: 10px;
    cursor: pointer;
    z-index: 2;
}
.input-container button:hover {
    background-color: rgb(200, 50, 50);
    color: #000;
}
.part-3 p{
    color: #c4c2c2;
    margin: 30px 30px 0 30px;
    font-size: 14px;
}
.part-3 img{
    width: 350px;
    height: 100px;
    margin: 20px 30px 10px 30px;
}
.part-3 .bank-payment{
    display: flex;
    gap: 10px;
}
.part-3 .bank-payment img{
    width: 80px;
    height: 50px; 
    margin: 0 40px; 
}
.part-3 .voda-payment{
    display: flex;
    gap: 10px;
}
.part-3 .voda-payment img{
    width: 70px;
    height: 70px;
    margin: 15px 40px;    
}
.part-3 .bank-payment p{
    margin-top: 5px;
}
.part-3 .bank-payment p, .part-3 .voda-payment p{
    position: relative;
    top: 0;
}
.part-3 .bank-payment p span, .part-3 .voda-payment span{
    position: relative;
    top: 19px;  
    left: -170px;
}
.part-3 .copyright{
    margin-left: 50%;
}
.part-3 .copyright p{
    color: #6f6d6d;
}


/* =========First Sliding Images Added============ 
=========First Sliding Images Added============  */

.section-title {
  text-align: center;
  font-size: 2rem;
  margin-top: 40px;
  color: #00215a;
  font-weight: 700;
} 

.slider-container1 {
  position: relative;
  width: 100%;
  max-width: 100%;
  margin: 40px auto;
  overflow: hidden;
  border-radius: 20px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  background: linear-gradient(135deg, 
      #ffffff 0%, 
      #ffd1e0 40%, 
      #ff69a5 70%, 
      #ff4d8b 100%
  );
}

.slider1 {
  display: flex; /* slides in a row */
  width: 100%;
  transition: transform 0.5s ease-in-out;
}

.slide1 {
  flex: 0 0 100%; /* each slide full width */
  display: flex;
  align-items: center;
  padding: 10px 20px;
  margin-bottom: 50px;
  background: linear-gradient(135deg, 
      #ffffff 0%, 
      #ffd1e0 40%, 
      #ff69a5 70%, 
      #ff4d8b 100%
  );
  gap: 20px;
  flex-wrap: wrap; /* allow text & image to wrap on small screens */
}

.slide1 img {
  width: 500px;
  height: 600px;
  object-fit: contain;
  border-radius: 50%;
  cursor: pointer;
  flex-shrink: 0;
}

.slide-text {
  width: 45%;
  text-align: left;
  color: #00215a;
}

.slide-text:hover {
  background-color: rgb(241, 204, 238);
  border-radius: 10px;
  color: #e70a9c;
  overflow: hidden;
  transition: transform 0.5s ease-in-out;
}

.slide-text h3 {
  font-size: 2.2rem;
  margin-bottom: 10px;
  font-weight: 700;
}

.slide-text h3:hover {
  background-color: #00215a;
  border-radius: 10px;
  overflow: hidden;
  transition: transform 0.5s ease-in-out;
  font-family: Georgia, 'Times New Roman', Times, serif;
}

.slide-text p {
  font-size: 1.2rem;
  margin-bottom: 25px;
  line-height: 1.6;
}

.slide-text p:hover {
  background-color: #00215a;
  border-radius: 10px;
  overflow: hidden;
  font-family: Georgia, 'Times New Roman', Times, serif;
  transition: transform 0.5s ease-in-out;
}

.shop-btn {
  background: #00215a;
  color: #fff;
  border: none;
  padding: 12px 28px;
  border-radius: 30px;
  cursor: pointer;
  font-size: 1rem;
  transition: 0.3s;
}

.shop-btn:hover {
  background: #0040b0;
}

.dots1 {
  text-align: center;
  margin-top: 20px;
  position: relative;
  z-index: 10;
  background: linear-gradient(135deg, 
      #ffffff 0%, 
      #ffd1e0 40%, 
      #ff69a5 70%, 
      #ff4d8b 100%
  );
}

.dot {
  display: inline-block;
  height: 12px;
  width: 12px;
  margin: 0 5px;
  background-color: #bbb;
  border-radius: 50%;
  cursor: pointer;
}

.dot.active {
  background-color: #00215a;
}

/* ================= Responsive Styles ================= */

@media (max-width: 1024px) {
  .slide1 img {
    width: 350px;
    height: 420px;
  }
  .slide-text {
    width: 50%;
  }
}

@media (max-width: 768px) {
  .slide1 {
    flex-direction: column;
    align-items: center;
    padding: 10px;
  }

  .slide1 img {
    width: 250px;
    height: 300px;
  }

  .slide-text {
    width: 90%;
    text-align: center;
    margin-top: 20px;
  }

  .slide-text h3 {
    font-size: 1.8rem;
  }

  .slide-text p {
    font-size: 1rem;
  }
}

@media (max-width: 480px) {
  .slide1 img {
    width: 180px;
    height: 200px;
  }

  .slide-text h3 {
    font-size: 1.5rem;
  }

  .slide-text p {
    font-size: 0.9rem;
  }

  .shop-btn {
    padding: 10px 20px;
    font-size: 0.9rem;
  }
}



/*=========First Sliding Part2============ 
=========First Sliding Part2============ */

.section-title {
  text-align: center;
  font-size: 2rem;
  margin-top: 40px;
  color: #00215a;
  font-weight: 700;
  background: linear-gradient(0deg, 
    #ffffff 0%, 
    #ffd1e0 40%, 
    #ff69a5 70%, 
    #ff4d8b 100%
  );
} 

.slider-container3 {
  position: relative;
  width: 100%;
  max-width: 100%;
  margin: 40px auto;
  overflow: hidden;
  border-radius: 20px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  background: linear-gradient(135deg, 
      #ffffff 0%, 
      #ffd1e0 40%, 
      #ff69a5 70%, 
      #ff4d8b 100%
  );
}

.slider3 {
  display: flex;
  width: 100%;
  transition: transform 0.5s ease-in-out;
}

.slide3 {
  flex: 0 0 100%;
  display: flex;
  align-items: center;
  padding: 10px 20px;
  margin-bottom: 50px;
  background: linear-gradient(135deg, 
      #ffffff 0%, 
      #ffd1e0 40%, 
      #ff69a5 70%, 
      #ff4d8b 100%
  );
  gap: 20px;
  flex-wrap: wrap;
}

.slide3 img {
  width: 500px;
  height: 600px;
  object-fit: contain;
  border-radius: 50%;
  cursor: pointer;
  flex-shrink: 0;
}

.slide-text3 {
  width: 45%;
  text-align: left;
  color: #00215a;
}

.slide-text3:hover {
  background-color: rgb(241, 204, 238);
  border-radius: 10px;
  color: #e70a9c;
  overflow: hidden;
  transition: transform 0.5s ease-in-out;
}

.slide-text3 h3 {
  font-size: 2.2rem;
  margin-bottom: 10px;
  font-weight: 700;
}

.slide-text3 h3:hover {
  background-color: #00215a;
  border-radius: 10px;
  font-family: Georgia, 'Times New Roman', Times, serif;
  overflow: hidden;
  transition: transform 0.5s ease-in-out;
}

.slide-text3 p {
  font-size: 1.2rem;
  margin-bottom: 25px;
  line-height: 1.6;
}

.slide-text3 p:hover {
  background-color: #00215a;
  border-radius: 10px;
  font-family: Georgia, 'Times New Roman', Times, serif;
  overflow: hidden;
  transition: transform 0.5s ease-in-out;
}


.shop-btn3 {
  background: #00215a;
  color: #fff;
  border: none;
  padding: 12px 28px;
  border-radius: 30px;
  cursor: pointer;
  font-size: 1rem;
  transition: 0.3s;
}

.shop-btn3:hover {
  background: #0040b0;
}

.dots3 {
  text-align: center;
  margin-top: 20px;
  position: relative;
  z-index: 10;
  background: linear-gradient(135deg, 
      #ffffff 0%, 
      #ffd1e0 40%, 
      #ff69a5 70%, 
      #ff4d8b 100%
  );
}

/* ================= Responsive Styles ================= */
@media (max-width: 1024px) {
  .slide3 img {
    width: 350px;
    height: 420px;
  }
  .slide-text3 {
    width: 50%;
  }
}

@media (max-width: 768px) {
  .slide3 {
    flex-direction: column;
    align-items: center;
    padding: 10px;
  }

  .slide3 img {
    width: 250px;
    height: 300px;
  }

  .slide-text3 {
    width: 90%;
    text-align: center;
    margin-top: 20px;
  }

  .slide-text3 h3 {
    font-size: 1.8rem;
  }

  .slide-text3 p {
    font-size: 1rem;
  }
}

@media (max-width: 480px) {
  .slide3 img {
    width: 180px;
    height: 200px;
  }

  .slide-text3 h3 {
    font-size: 1.5rem;
  }

  .slide-text3 p {
    font-size: 0.9rem;
  }

  .shop-btn3 {
    padding: 10px 20px;
    font-size: 0.9rem;
  }
}


/* ==============================Second Sliding Images Added=============================== */
/* ==============================Sliding Images Added=============================== */

/* SLIDER CONTAINER */
.slider2 {
  width: 300px;               /* The slider takes the full page width */
  max-width: 1200px;         /* It will not be wider than 1200px */
  height: 400px;            /* Fixed height so all slides match */
  margin: 40px auto;         /* Center horizontally on the page */
  position: relative;        /* Allows absolute positioning inside (buttons, dots) */
  overflow: hidden;          /* Hides anything outside the slider box */
  border-radius: 12px;       /* Smooth rounded corners */
  background: #000;          /* Black background while images load */
}

/* TRACK = moving strip that holds all slides side by side */
.track2 {
  display: flex;             /* Puts slides next to each other horizontally */
  height: 100%;              /* Each slide takes full slider height */
  transition: transform 0.6s ease; /* Smooth sliding motion when moving images */
}

/* EACH SLIDE */
.slide2 {
  min-width: 100%;           /* Each slide covers 100% width of the slider */
  height: 100%;              /* Full height as the slider */
  display: flex;             /* Centers the image */
  justify-content: center;
  align-items: center;
  overflow: hidden;          /* Ensures oversized images are clipped neatly */
}

/* SLIDE IMAGES */
.slide2 img {
  width: 100%;
  height: 100%;
  object-fit: cover;         /* Keeps the image’s aspect ratio while filling area */
  border-radius: 0;
  display: block;
}

/* NEXT AND PREVIOUS BUTTON CONTAINER */
.controls2 {
  position: absolute;        /* Positioned on top of slider */
  top: 50%;                  /* Vertically center */
  left: 0;
  right: 0;
  transform: translateY(-50%);
  display: flex;             /* Places buttons at both ends */
  justify-content: space-between;
  padding: 0 10px;
  pointer-events: none;      /* Prevents blocking slides except buttons themselves */
}

/* NEXT/PREVIOUS BUTTON STYLE */
.btn2 {
  pointer-events: auto;      /* Make buttons clickable */
  background: rgba(0, 0, 0, 0.4); /* Semi-transparent background */
  border: none;
  color: #fff;               /* White arrow color */
  font-size: 28px;
  padding: 10px 14px;
  border-radius: 50%;        /* Circular shape */
  cursor: pointer;
  transition: background-color 0.3s ease; /* Smooth hover color change */
}

/* Button hover effect */
.btn2:hover {
  background: rgba(0, 0, 0, 0.7);
}

/* NAVIGATION DOTS (small circles below the slider) */
.dots2 {
  position: absolute;
  bottom: 16px;              /* Positioned near the bottom */
  left: 50%;
  transform: translateX(-50%); /* Center horizontally */
  display: flex;
  gap: 8px;                  /* Space between dots */
}

/* DOT STYLE */
.dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;        /* Make them round */
  background: rgba(255, 255, 255, 0.4); /* Light transparent white */
  cursor: pointer;
  transition: background-color 0.3s ease; /* Smooth color change */
}

/* ACTIVE DOT (for current image) */
.dot.active {
  background: rgba(255, 255, 255, 0.9); /* Bright white for the active one */
}

/* RESPONSIVE HEIGHT ADJUSTMENTS */
@media (max-width: 768px) {
  .slider2 {
    height: 320px; /* Make slider shorter on tablets */
  }
}

@media (max-width: 480px) {
  .slider2 {
    height: 220px; /* Even shorter on phones */
  }
}

/* === LAYOUT FOR 3 SLIDERS IN ONE LINE === */
.slider-row {
  display: flex;
  justify-content: center;  /* center the entire row */
  align-items: flex-start;
  gap: 40px;                /* space between sliders */
  flex-wrap: wrap;          /* allow stacking on smaller screens */
}

/* Adjust slider width for side-by-side layout */
.slider2 {
  width: 350px;  /* each slider’s width */
  height: 300px; /* a bit shorter for compact layout */
}


/* ==================Others===================== */
.h {
    margin-left: 30%;
    font-size: 2rem;
}

.ull {
    margin-left: 30%;
    font-size: 1rem;
}


.pp {
    background-color: #e70a9c;
    text-align: center;
    border-radius: 10px;
    font-size: 1rem;
}

.pp:hover {
    color: #e70a9c;
}