@media only screen and (max-width: 1440px) {
  .container-fluid{padding-inline:60px !important;}
  
}
@media only screen and (max-width: 1366px) {
  
}
@media only screen and (max-width: 1280px) {
  .container-fluid{padding-inline:40px !important;}
}
@media only screen and (max-width: 1199px) {

}
@media only screen and (max-width: 991px)  {
  .section-heading {
    & .main-title {
      white-space: wrap;
    }
  }

  .siteHeader {
    & .navbar-nav {
      gap:10px;
    }
    .navbar {
      .dropdown-menu.show {
        background-color:#FFFFFF1C;
        border: 1px solid var(--n-500);
      }
      & .dropdown-menu .dropdown-item{
        color: var(--white);
        
      }
    }
    .navbar-collapse{background: linear-gradient(90deg,rgba(0, 0, 0,1) 0%,rgb(0, 68, 118, 1) 100%);padding:20px;border-radius:20px;}
  }
  
  .mainHero-banner {
    & .hero-banner {
      height:55vh;
    }
   
    & .hero-content{
      width: 100%;padding:0 20px;
    
      & .subtitle {font-size: 14px;}
    }
  }

  .comman-banner {
    & .comman-banner {
      height:55vh;
    }
   
    & .comman-content{
      width: 100%;padding:0 20px;
    
      & .subtitle {font-size: 14px;}
    }
  }

  .about-us {
    & .about-content {
      & h2 {margin-bottom: 0;}
      & .about-stats{padding-block:20px;justify-content:center;gap:80px;}
      & p {margin-bottom: 10px;}
      & .about-footer {
        padding-top:20px;padding-bottom: 20px;
      }
    }
  }

  .gallery-section{
    .gallery-grid{grid-template-columns:1fr 1fr;grid-auto-rows:auto;}
    .gallery-large{grid-row:span 1;}
    .gallery-wide{grid-column:span 1;}
  }

  .pricing-section{
    .section-heading{
      margin-bottom:50px;
    }
    .pricing-card.featured{transform:none;}
  }

  .testimonial-section{
    .t-grid { grid-template-columns:repeat(2, 1fr)}
  }
  
  .about-trips-section{
    padding:70px 0;
    
    .image-wrapper {
      img{height:500px;}

      .rating-card{
        left:15px;bottom:15px;
      }
    }
  }

  .comman-pricing{
    .pricing-card{padding:30px;}
  }

  .contact-section{
    .contact-card{padding:30px;}
    .contact-image{min-height:450px;}
  }

  .contact-info-section{
    padding:70px 0;
    .info-card{
      gap:18px;

      .info-icon{width:55px;height:55px;}

      .info-content{ 
        h4{font-size:24px;}
        p{font-size:16px;}
      }
    }
  }

  .location-section{
    padding-bottom:70px;

    .map-wrapper{
      iframe{height:420px;}
    }

  }

  .chapter{
    .content-gallery{
      .gallery-stack{
        height:420px;
        margin:0 0 40px;
      }
    }
  }

  .guide-page{
    .condition-content{
      border-right:none;
      border-bottom:1px solid var(--n-150);
    }
  }

  .marine-life-section{
    padding:70px 0;
    .marine-image{
      img{
        height:500px;
      }
    }
  }

  .island-section{
   .outer-island-content{
      border-right:none;border-bottom:1px solid var(--n-150);
    }
  }

  .diving-course-section{
    .course-wrapper{
      margin-top:50px;
    }
  }

  .equipment-rental-section{
    .equipment-card{
      padding:30px;
    }

    .equipment-list{
      margin-bottom:30px;
    }
  }

  .dive-season-section{
    .season-image img{
      height:350px;
    }
  }

  .whale-shark-section{
    .whale-image img{
      min-height:350px;
    }

    .whale-content{
      padding:45px 35px;
    }
  }

  .hotel-partners-section{
    .hotel-card{
      .hotel-image{
        height:220px;
      }

      .hotel-content{
        h3{
          font-size:24px;
        }
      }
    }
  }

  .marine-species-section {
    .species-card{
      .species-details{padding-top:30px;}
    }
  }
}

@media only screen and (max-width: 767px)  {
  .container-fluid{padding-inline:20px !important;}

  .siteHeader {
    .navbar {
      .navbar-brand {
        height: auto;
        img {
          width:180px;height: auto;
        }
      }
    }
  }

  .mainHero-banner {
    & .hero-banner {
      height:100vh;
    }
    
    & .hero-content{
      width: 100%;padding:0 20px;

      h1{font-size: 38px;}

      & .subtitle {font-size: 14px;}
    }
  }

  .comman-banner {
    & .comman-banner {
      height:100vh;
    }
    
    & .comman-content{
      width: 100%;padding:0 20px;

      h1{font-size: 38px;}

      & .subtitle {font-size: 14px;}
    }
  }

  .pricing-section{
    .section-heading {
      .section-tag{font-size:.8rem;padding:8px 18px;}
    }

    .pricing-card{
      padding:32px 25px;
      border-radius:22px;
  
      .price{font-size:2.5rem;}
      h3{font-size:1.6rem;}
    }
  }

  .gallery-lightbox { 
    padding: 16px; 
    .lightbox-stage { gap: 8px; }
    .lightbox-content { max-width: 82vw; }
    .lightbox-close { top: 14px; right: 16px; font-size: 22px; }
    .lightbox-nav { font-size: 20px; padding: 6px; }
  }

  .contact-info-section{
    .info-card{
      padding-bottom:25px;border-bottom:1px solid var(--n-150);
    }

    .col-md-6:last-child .info-card{
      border-bottom:none;padding-bottom:0;
    }
  }

  .location-section{
    .map-wrapper{
      iframe{height:350px;}
    }
  }

  .educational-page {
    .chapter{
      .gallery-stack{
        height:340px;
  
        img{
          border-width:4px;
        }
      }
      .species-list {
        .species {
          flex:1 1 100%;
        }
      }
    }
  }

  .guide-page{
    .condition-content,
    .condition-stats{
      padding:30px;
    }

    .condition-content{
      p{
        font-size:16px;
      }
    }

    .condition-stats{
      gap:24px;
    }
  }

  .marine-life-section{
    .marine-image{
      img{
        height:400px;
      }
      .image-content{
        padding:25px;

        h3{
          font-size:28px;
        }
      }
    }

    .species-item{
      flex-direction:column;align-items:flex-start !important;gap:12px;
    }
  }

  .island-section{
    .outer-island-content,
    .outer-island-stats{
      padding:30px;
    }

    .outer-island-stats{
      gap:22px;

      .stat-item{
        gap:15px;

        .stat-icon{
          width:46px;height:46px;
        }
        .stat-content{
          strong{font-size:20px;}
        }
      }
    }
  }

  .diving-course-section{
    .course-card{
      padding:30px;
      h3{
        font-size:26px;
      }
    }
  }
  
  .course-price-section{
    .course-card{
      padding:30px;

      h3{
          font-size:26px;
      }
    }
  }

  .partners-section{
    .partner-card{
      height: auto;
    }
  }

  .equipment-rental-section{
    .equipment-card{
      padding:20px;
    }

    .equipment-list{
      span{
        width:100%;
        justify-content:flex-start;
      }
    }
  }

  .dive-season-section{
    .highlight-box{
      padding:22px;

      h4{
        font-size:24px;
      }
    }

    .season-image img{
      height:280px;
    }
  }

  .whale-shark-section{
    .fish-tags span{
      padding:10px 18px;font-size:14px;
    }

    .whale-content{
      padding:35px 25px;

      h2{
        font-size:34px;
      }

      .btn-group-custom{
        flex-direction:column;
      }
    }
  }

  .blue-sentinel-section {
    .sentinel-footer {
      flex-direction: column;
    }
  }

  .hotel-partners-section{
    .hotel-card{
      .hotel-image{
        height:220px;
      }

      .hotel-content{
        padding:22px;
      }
    }
  }

  .marine-species-section{
    .species-tabs{
      gap:10px;

      .nav-link{
        width:100%;
        text-align:center;
      }
    }
  }
}

@media(max-width:575px){
  .gallery-stack{
    height:300px;

    .g-1{width:68%;height:62%;}
    .g-2{width:48%;height:38%;}
    .g-3{width:44%;height:36%;}
    .g-4{width:42%;height:38%;}
  }
}

@media only screen and (max-width: 479px)  {
  .btn-primary{font-size: 14px;}

  .section-heading {
    .sub-title {font-size: 14px;}
    .main-title{font-size: 38px;line-height: 1;white-space: wrap;}
  }

  .sections-content {
    p {font-size: 16px;}
  }
  
  .mainHero-banner {
    & .hero-banner {
      height:66vh;
    }
  }
  
  .comman-banner {
    & .comman-banner {
      height:66vh;
    }
  }
  
  .about-us {
    & .about-content {
      & h2 {
        font-size: 38px;
      }
      & .about-stats{
        flex-wrap: wrap;gap:20px;justify-content:space-between;
        & .stat-box {
          gap:6px;
          & h3 {
            font-size:38px;
          }
          p{font-size:16px;}
        }
      }
      p{font-size:16px;}
      & .about-footer {
        gap:20px;
         & .contact-info {
          gap:10px;
          & .phone-icon{
            width:50px;
            height:50px;

            i{font-size:18px;}
          }
        }
      }
    }
  }

  .gallery-section{
    .gallery-grid{grid-template-columns:1fr;}
    .gallery-item{height:250px;}
  }

  .pricing-section {
    & .section-heading {
      & h2 {
        font-size: 38px;
      }
    }
  }

  .our-service {
    padding: 20px 0 60px 0px;

    & .activity-grid {
      grid-template-columns:1fr;
    }
  }

  .cta {
    .sections-content {
      p {
        margin: 20px 0;
      }
      .icon-box-wrapper {
        flex-direction: column;gap:10px;justify-content: flex-start;align-items: flex-start;
      }
    }

  }

  .testimonial-section { 
    & .t-header {
      & .t-title{
        font-size:38px;line-height:1;
      }
    }

    .t-grid{
      grid-template-columns:1fr;
      .t-card { padding: 30px 24px 26px; }
    }
  }

  .about-trips-section{
    .trip-card{
      padding:18px;
    }

    .image-wrapper {
      img{height:420px;}
      .rating-card{
        padding:15px 18px;gap:12px;
        h5{font-size:22px;}
      }
    }
  }

  .comman-pricing {
    .section-heading {
      h2 {font-size: 38px;line-height: 1;white-space: wrap;}
      .section-tag {font-size: 14px;}
    }
  }

  .comman-banner {
    & .comman-content {left:0;}
  }
  .contact-section{
    .contact-card{padding:20px;}
  }

  .comman-activity {
    .activity-card {
      flex-direction: column;justify-content:flex-start;align-items:flex-start;gap:20px;padding:20px;
      
      .activity-image{
        flex:1 0 100%;height: auto;width: 100%;
        img{
          height: auto;width: 100%;
        }
      }

      .activity-content {
        flex:1 0 100%;
        .activity-name{font-size:28px;}
        p{font-size: 16px;}
      }
    }
  }
}
@media screen and (max-width: 320px) {

}