/*--------------------------------------------------------------
# Hero Section
--------------------------------------------------------------*/
#edetail-hero {
    width: 100%;
    height: 842px;
    background: url("../img/packages images/Escape-in-Sri-Lanka-banner.jpg") bottom center no-repeat ;
    background-size:cover;
    object-fit: cover;
    position: relative;
    display: flex;
    align-items: center;
  
    
  }
  
  #edetail-hero:before {
    content: "";
    background:linear-gradient(180deg, #4378ffb1 10.4%, rgba(68, 106, 203, 0.26) 66.17%, rgba(69, 114, 229, 0.00) 84.09%);
    position: absolute;
    bottom: 0;
    top: 0;
    left: 0;
    right: 0;
  }
  
  
  
  #edetail-hero .col-xs-12  {
    position: absolute;
    bottom: 0;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    flex-direction: column;
    padding: 0 15px;
    margin-top: 400px;
  }
  #edetail-hero  .typography {
  
    margin-left: 100px;
    text-align: justify;
  }
    
  #edetail-hero .breadcrumb {
  background-color: transparent;
  padding: 8px 15px;
  margin: 0;
  list-style: none;
  border-radius: 0;
  color: #FFF;
font-family: Poppins;
font-size: 12px;
font-style: normal;
font-weight: 400;
line-height: normal;
}

#edetail-hero .breadcrumb-item {
  display: inline-block;
  margin-right: 5px;
  cursor: pointer;
}

#edetail-hero .breadcrumb-item + .breadcrumb-item::before {
  content: '>';
  margin-left: 5px;
  color: #fff;
}

#edetail-hero .breadcrumb-item a {
  color: #ffffff;
  text-decoration: none;
}

#edetail-hero .breadcrumb-item.active {
  color: #FFF;
  font-weight: 700px;
}


  #edetail-hero h1 {
    color: #FFF;
    font-family: Poppins;
    font-size: 64px;
    font-style: normal;
    font-weight: 400;
    line-height: 81%; /* 51.84px */
  }

  #edetail-hero h2  {
    color: #FBFBFB;
    font-family: Poppins;
    font-size: 64px;
    font-style: normal;
    font-weight: 600;
    line-height: 81%; /* 51.84px */
    padding-left: 50px;
  }
  
  #edetail-hero h3 {
    color: #FFF;
  font-family: Poppins;
  font-size: 86px;
  font-style: normal;
  font-weight: 700;
  line-height: 81%; /* 69.66px */
  padding-bottom: 30px;
    
  }
  
  #edetail-hero p {
    color: #FFF;
    font-family: Poppins;
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: 182.5%; /* 25.55px */
  }
  #edetail-hero .heading-container .tour-line{
    background: conic-gradient(from 180deg at 50% 50%, #17A680 0deg, #F9B233 352.5000071525574deg);
     width: 345px;
      height: 4px;
      margin-top: 10px;
  }
  
  
  #edetail-hero .icon-container img{
   margin: 10px;
  }
  
    
  #edetail-hero .hero-line{
    width: 100px;
    height:100%;
    position: absolute;
    right:100px;
   
  }
  #edetail-hero .hero-line .menu-search{
  margin-top: 25px;
  gap: 10px;
  align-items: center;
  padding: 5px;
  }
  #edetail-hero .hero-line .slash{
    width: 1px;
  height: 27px;
  background: #FFF;
  }
  #edetail-hero .hero-line .line-v svg{
  margin-left: 48px;
  }
  #edetail-hero .hero-line .social-icon svg{
    margin: 13px 0 13px 0;
  }
  
  
  @media (max-width: 768px) {
    #edetail-hero{
      height: 80vh;
    }
    #edetail-hero .typography {
      margin-left: 20px;
    }
   
    #edetail-hero .justify-content-end {
      display: none;
    }
  
    #edetail-hero p{
      font-size: 8px !important;
    }
    #edetail-hero h1{
      font-size: 50px;
    }
    
  
    #edetail-hero h3{
      font-size: 50px;
      width: 100%;
    }
      
  #edetail-hero .icon-container img{
   width: 30px;
   }
   
   #edetail-hero .hero-line{
    right: 5px;
   }
   #edetail-hero .heading-container .tour-line{
    width: 200px;
    height: 2px;
   }
  }























/*----------------------------------------------------------------
#details about section
----------------------------------------------------------------*/
#details-about{
    width: 100%;
    background: #fff;
  }
  
  #details-about .col-lg-6{
    flex-shrink: 0;
    background: #E7FFF1;
    padding: 100px;
    height: 458px;
  }
  
  #details-about .descr p{
    color: #000;
  font-family: Poppins;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 182.5%; /* 32.85px */
  
    
  }

  @media (max-width: 998px){
    #details-about .col-lg-6 {width: 100%;}
  }

  /*----------------------------------------------------------------
  #esl sections
  ----------------------------------------------------------------*/
  
  #esl{
    padding-left: 50px;
  }
  
  #esl .col-lg-12{
    width: 100%;
    height: 71px;
    background: #2E8C87;
   
    
  }
  #esl .col-lg-12 h2{
    color: #FFF;
  font-family: Poppins;
  font-size: 34px;
  font-style: normal;
  font-weight: 700;
  line-height: 182%; /* 61.88px */
  padding-left: 64px;
  }
  
  
  .highlight  .duration {
    width: 485px;
    height: 150px;
    background: #00A19A;
   margin: 0;  
   padding: 20px ;
  }
  
  
  .highlight .duration p{
    color: #FFF;
    font-family: Poppins;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 182.5%; /* 25.55px */
    margin: 0;
  }
  .highlight .duration h2{
    color: #FFF;
  font-family: Poppins;
  font-size: 34px;
  font-style: normal;
  font-weight: 700;
  line-height: 182.5%; /* 62.05px */
  }
  .highlight .duration .route{
    width: 485px;
  height: 43px;
  background: #F97A33;;
  margin: 0;
  text-align: right;
  padding: 10px;
  }
  .highlight .duration .route p{
    color: #000;
font-family: Poppins;
font-size: 15px;
font-style: normal;
font-weight: 700;
line-height: 182.5%; /* 27.375px */
  }
  
  .highlight .duration-box{
    height: 150px;
    background: #BAFF74;
    padding: 0;
    margin: 0;
    padding-right: 0;
    overflow: hidden;



  }
  .duration-box .wrapper {
    position: relative;
    width: 100%;
    height: auto !important;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow-x: hidden;
  }
  
  .duration-box .wrapper .tabs-box {
    display: flex;
    gap: 20px;
    list-style: none;
    overflow-x: hidden;
    scroll-behavior: smooth;
    white-space: nowrap; /* Prevent tabs from wrapping to the next line */
    animation: scrollTabs 15s linear infinite; /* Adjust the duration as needed */
  }
  
  .duration-box .tabs-box.dragging {
    scroll-behavior: auto;
    cursor: grab;
  }
  
  .duration-box  .tabs-box .tab {
    cursor: pointer;
    font-size: 1.18rem;
    white-space: nowrap;
    width: 150px;
    height: 150px;
    flex-shrink: 0;
    text-align: center;
    padding-top: 60px;
  }
  
  .duration-box .tabs-box .tab:hover {
    background: #8FDB8F;
  }
  
  .duration-box .tabs-box.dragging .tab {
    user-select: none;
    pointer-events: none;
  }
  
  .duration-box .tabs-box .tab.active {
    color: #000;
    background: #8FDB8F;
  }
  

  
/* Add these styles to your existing CSS */
.highlight .row {
  display: flex;
  align-items: flex-start;
}

.duration-box {
  flex: 1;
  margin-left: 20px; /* Adjust the margin as needed */
}

/* Additional styles for better appearance (optional) */


.tabs-box li {
  margin-right: 10px;
  cursor: pointer;
}


/* End of additional styles */








  .highlight{
    padding-left: 50px;
  }
  .highlight .row .col-4{
    background: #FDFF9E;
    width: 485px;
    height: 394px;
    flex-shrink: 0;
    padding: 40px;
  }
  
  .highlight .row .col-4 h2{
    color: #000;
    font-family: Poppins;
    font-size: 22px;
    font-style: normal;
    font-weight: 700;
    line-height: 140%; /* 30.8px */
  }
  
  .highlight .row .col-4 h4{
    color: #000;
  font-family: Poppins;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 182%; /* 32.76px */
  padding-top: 80px;
  }
  .highlight .row .col-8{
    background: #F0F8FF;
    height: 394px;
    padding: 100px;
  }
  
  .highlight .row .col-12{
    text-align: center;
    background: #2FAC66;
    color: #fff;
    height: 71px;
    padding: 15px;
    font-weight: 700;
  }
  
  @media (max-width: 1500px){
    .highlight{

        padding-left: 0;
    }
    .highlight.col-8{
        width: 250px;
    }
    .highlight .wrapper {
    max-width: 500px;
  }
  .highlight .row .col-4{
    background: #FDFF9E;
    width: 100%;
    height:auto;
    flex-shrink: 0;
    padding: 20px;
  }
  .highlight .row .col-8{
    background: #F0F8FF;
    height: auto;
    padding: 20px;
    width: 100%;
  }}



.day {
  padding-left: 50px;
  background: linear-gradient(
    180deg,
    #feffff -23.89%,
    #f0fef6 -14.96%,
    #f7fdf9 0.34%,
    rgba(255, 255, 255, 0.54) 17.02%,
    #d6f6e4 46.06%,
    #cee9ff 92.83%
  );
}

.day .col-4 {
  padding: 0;
  width: 485px;
}

.day .col-4 button {
  width: 485px;
  height: 71px;
  background: #00a19a;
  color: #fff;
  text-align: right;
  margin-bottom: 2px;
  border-radius: 0;
}

.day .col-4 button.active {
  background: #f9b233;
}

.day .col-8 {
  background: #f1f1f1;
  width: 100%;
  padding: 20px 50px;
}

.day .tab-content {
  padding: 20px 50px 0;
  color: #fff;
}
.day .tab-content .tab-pane li{
  color: #000;
}

.day .tab-content h4 {
  color: #000;
  font-family: Poppins;
  font-size: 18px;
  font-style: normal;
  font-weight: 700;
  line-height: 182%;
}

.day .tab-content h2 {
  color: #000;
  font-family: Poppins;
  font-size: 28px;
  font-style: normal;
  font-weight: 700;
  line-height: 181.5%;
}

.day .tab-content h5 {
  color: #000;
  font-family: Poppins;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 182%;
}

.day .tab-content p {
  color: #000;
  text-align: justify;
  font-family: Poppins;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 182%;
}

@media (max-width: 1200px) {
  .day .col-4 button {
    width: 250px;
  }
  .day .col-8 {
    padding: 20px 50px;
  }
}

@media (max-width: 992px) {
  .day .col-8 {
    padding: 20px;
    width: 100%;
  }
}

@media (max-width: 998px) {
  .day {
    padding-left: 0;
    display: flex;
  }
  .day .col-4 {
    width: auto
  }
  .day .col-4 button {
    width: 100%;
  }
  .day .col-7{
    padding: 0px;
  }
  
.day .tab-content {
  padding: 0px;
  
}
.tab-pane{
  width: 100%;
  padding: 0;
}
}
#map {
  height: 400px;
  width: 100%;
  background: #000;
}




  
  /* Responsive adjustments for mobile and tablet screens */
  @media (max-width: 998px) {
    #details-about .col-lg-6 {
      width: 100%; /* Make the description content width 100% for smaller screens */
      height: 1000px; /* Reduce the padding for smaller screens */
    }
  
    #details-about .descr p {
      font-size: 16px; /* Adjust the font size for smaller screens */
    }
  
    #details-about .label {
      margin-left: 0; /* Remove the left margin for smaller screens */
    }
  
    #details-about .label h2 {
      font-size: 24px; /* Adjust the font size for smaller screens */
      padding-left: 20px; /* Reduce the left padding for smaller screens */
    }
    #esl .col-4 .route{
      width: auto;
    }
  }
  
  
  #inspired {
    background: linear-gradient(182deg, #53A1FE 1.61%, rgba(14, 113, 228, 0.86) 29.36%, rgba(66, 139, 225, 0.60) 71.45%, rgba(144, 170, 201, 0.00) 97.46%);
    height:764px;
}

#inspired .col-12 {
    padding-top: 100px;
}

#inspired .col-12 svg {
    margin-top: 20px;
}

#inspired .card {
  max-width: 265px;
    background: none;
    border: none !important;
    margin-top: 20px; /* Adjusted margin for better spacing on smaller screens */
}

#inspired  .col-md-3 {
  flex: 0 0 auto;
  width: 22%;
}
#inspired  .col{
margin-top: 15%;
}
@media (max-width: 998px) {
  #inspired .col-12 {
    padding-top: 50px; /* Adjusted padding for smaller screens */
  }

  #inspired .card {
    margin-top: 10px; /* Adjusted margin for better spacing on smaller screens */
  }

  #inspired .card  .card-title{
    width: auto;
    font-size: 1px;
  }

  #inspired .card  .card-text{
    width: auto;
    font-size: 5px;
  }
}


.wrapper {
  max-width: 1100px;
  width: 100%;
  position: relative;

}
.wrapper i:first-child{
  left: -22px;
}
.wrapper i:last-child{
  right: -22px;
}
.wrapper .carousel{
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% / 3.9) - 10px);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  gap: 16px;
  border-radius: 8px;
  scroll-behavior: smooth;
  scrollbar-width: none;
  height: 800px;
}
.carousel::-webkit-scrollbar {
  display: none;
}
.carousel.no-transition {
  scroll-behavior: auto;
}
.carousel.dragging {
  scroll-snap-type: none;
  scroll-behavior: auto;
}
.carousel.dragging .card {
  cursor: grab;
  user-select: none;
}
.carousel :where(.card, .img) {
  display: flex;
  justify-content: center;
  align-items: center;
}
.carousel .card {
  scroll-snap-align: start;
  
  list-style: none;
  background: #fff;
  cursor: pointer;
  padding-bottom: 15px;
  flex-direction: column;
  border-radius: 8px;
  height: 510px;
  width:246px;
}
.carousel .card .img {
  height: 410px;
  width:246px;
  border-radius: 30px;
 

}

.carousel .card h2 {
  color: #000;
  text-align: center;
  font-family: Poppins;
  font-size: 14px;
  font-style: normal;
  font-weight: 700;
  line-height: 128%; /* 17.92px */
}
.carousel .card span {
  color: #000;
text-align: center;
font-family: Poppins;
font-size: 12px;
font-style: normal;
font-weight: 400;
line-height: normal;
}
@media screen and (max-width: 900px) {
  .wrapper .carousel {
    grid-auto-columns: calc((100% / 2) - 9px);
  }
}
@media screen and (max-width: 600px) {
  .wrapper .carousel {
    grid-auto-columns: 100%;
  }
}







  @media (max-width: 998px) {
    #edetail-hero{
      height: 80vh;
    }
  
    #edetail-hero .typography {
      margin-left: 20px;
    }
  
    #edetail-hero h1{
      font-size: 50px;
    }
  
    #edetail-hero h3{
      font-size: 50px;
      width: 100%;
    }
  }
  
  #details-about {
    width: 100%;
    background: #fff;
  }
  
  #details-about .col-lg-6 {
    flex-shrink: 0;
    background: #E7FFF1;
    padding: 50px;
    height: auto;
  }
  
  #details-about .descr p {
    color: #000;
    font-family: Poppins;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 182.5%; /* 32.85px */
  }
   

  
/*****************************
#contacts  
********************************/




 #contact{
    height: 791px;
    background: #2B3990;
    position: relative;
  }
  #contact .circle-1{
    max-width: 730px;
    bottom :-124px;
  }

  #contact .circle-2{
    max-width: 780px;
  
    bottom: 0;
    right:36px;
  }
  #contact .col-lg-6{
    padding-top: 100px;
  }
  #contact .col-lg-6 h2{
    color: #FFF;
    font-family: Poppins;
    font-size: 48px;
    font-style: normal;
    font-weight: 700;
    line-height: 130.5%;
    z-index: 1;
    position: absolute;
    width: 518px;
  }
  
  #contact .col-lg-6 h5{
    color: #FFF;
  font-family: Poppins;
  font-size: 28px;
  font-style: normal;
  font-weight: 400;
  line-height: 127%;
  z-index: 1;
  position: absolute;
  margin-top: 150px;

  }
  #contact img{
    position: absolute;
    max-width:419px;
    margin-top: 395px;
    margin-left: 290px;
  
  }
  #contact .call-us{
    margin-top:350px;
    position: absolute;
  }

  #contact .call-us h6{

color: #FFF;
font-family: Poppins;
font-size: 22px;
font-style: normal;
font-weight: 600;
line-height: 25px; 
  }

  #contact .call-us h6 span{
    color: #FFF;
    font-family: Poppins;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 25px; 
  }
  
  

  #contact h3{
    color: #FFF;
font-family: Poppins;
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 127%; 
margin-left:30px;
margin-top: 50px;
  }







  form {
    max-width: 600px;
    margin: 20px auto;
    color: #fff;
    margin-top: 100px;
    position: relative;
  }
  

  .form-row {
    margin-bottom: 20px;
    gap: 33px;
  }

  .input-data {
    position: relative;
    margin-bottom: 15px;
    max-width: 287px;
  }
  

  .input-data input,
  .input-data textarea {
    width: 100%;
    padding: 10px;
    border: none;
    background: none;
    outline: none;
  }

  .underline {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: #ffffff; 
  }
  

  .input-data label {
    position: absolute;
    top: 0;
    left: 0;
    padding: 10px;
    pointer-events: none;
    transition: 0.3s;
  }
  .input-data input::placeholder,
.input-data textarea::placeholder {
    color: #ffffff; 
    font-size: 14px;
  }
  

  .input input:focus + .underline,
  .input textarea:focus + .underline,
  .input input:valid + .underline,
  .input textarea:valid + .underline {
    background-color: #ffffff; 
  }
  
  .input-data input:focus + label,
  .input-data textarea:focus + label,
  .input-data input:valid + label,
  .input-data textarea:valid + label {
    transform: translateY(-20px);
    font-size: 12px;
    color: #000; 
  }
  

  .form-check {
    margin-bottom: 20px;
  }
  
  .submit-btn {
    text-align:left;
  }
  
  .input-data input[type="submit"] {
    cursor: pointer;
    background-color: #17A680; 
    color: #fff;
    border: none;
    padding: 10px 20px;
    transition: background-color 0.3s;
    border-radius: 40px;
    width: 184px;
  }
  
  .input-data input[type="submit"]:hover {
    background-color: #555;
  }







  @media (max-width: 998px) {
    #contact {
      padding: 20px;
      height: auto;
    }
    #contact .circle-2{
      right: 10px;
    } #contact .circle-1{
      width: 300px;
      right:  10px;
    }
    #contact .col-lg-6{
      padding-top: 100px;
    }
    #contact .col-lg-6 h2{
      color: #FFF;
      font-family: Poppins;
      font-size: 28px;
      font-style: normal;
      font-weight: 700;
      line-height: 130.5%;
      z-index: 1;
      position: absolute;
      width: auto
    }
    
    #contact .col-lg-6 h5{
      color: #FFF;
    font-family: Poppins;
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 127%;
    z-index: 1;
    position: absolute;
    margin-top:80px;
  
    }
    #contact img{
      position: absolute;
      max-width:219px;
     bottom: 0;
     right: 5px;
     opacity: 10%;
    
    }
    #contact .call-us{
      margin-top:350px;
      position: absolute;

      display: none;
    }
  
    #contact .call-us h6{
  
  color: #FFF;
  font-family: Poppins;
  font-size: 22px;
  font-style: normal;
  font-weight: 600;
  line-height: 25px; 
    }
  
    #contact .call-us h6 span{
      color: #FFF;
      font-family: Poppins;
      font-size: 14px;
      font-style: normal;
      font-weight: 400;
      line-height: 25px; 
    }
    
  form {
    max-width:600px;
    margin-left: 0px;
   
  }
  #contact h3{
    margin-left: 0;
  }
  
}



  /* Adjust styles for the accordion */
.accordion {
  margin-bottom: 20px;
 }

/* Style accordion buttons */
.accordion-button {
  background: rgba(94, 104, 91, 0.53);
  color: #fff;

 
}

/* Style active accordion button */
.accordion-button:not(.collapsed) {
  background: #5E685B;
  color: #fff;
  
}

/* Style accordion body content */
.accordion-body {
  background: #5E685B;
  padding: 10px;
  color: #fff;
}

/* Style list items inside accordion body */


.accordion-body li {
  margin-bottom: 8px;
  color: #fff;
}

/* Style tab content */
.tab-pane {
  padding: 20px;
  border: 0px solid rgb(255, 255, 255);
  border-radius: 0.25rem;
  margin-top: 20px;
  border-radius: 0;
  color: #fff;
}

/* Optional: Style active tab */
.tab-pane.active {
  background-color: #f8f9fa;
}

/* Optional: Style tab navigation pills */
.nav-pills .nav-link {
  background-color: #000000;
  color: #fff;
}

/* Optional: Style active tab navigation pill */
.nav-pills .nav-link.active {
  background-color: #000000;
}

/* Optional: Style disabled tab navigation pill */
.nav-pills .nav-link.disabled {
  color: #6c757d;
  background-color: #f8f9fa;
}
@media (max-width: 768px) {
  .highlight .duration .route {
    width: auto; /* Allow the width to be flexible */
    height: auto; /* Allow the height to be flexible */
    text-align: left; /* Align text to the left for better readability on smaller screens */
    padding: 5px; /* Adjust padding for smaller screens */
  }
  #esl{
    padding-left: 0px;
  }
  #inspired button{
    display: none !important;
  }
}