/*@import "compass/css3";*/
 body {
            font-family: system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif,'Apple Color Emoji','Segoe UI Emoji';
            justify-content: center;
            text-align: justify;
            font-size: 1rem;
            line-height: 1.4;
            overflow-x: hidden;
            color: #383535;
        }    


        @font-face {
    font-family: "Edwardian Script ITC";
    src: url("https://db.onlinewebfonts.com/t/84ae358e627d67d90bd613fcedc20c10.eot");
    src: url("https://db.onlinewebfonts.com/t/84ae358e627d67d90bd613fcedc20c10.eot?#iefix")format("embedded-opentype"),
    url("https://db.onlinewebfonts.com/t/84ae358e627d67d90bd613fcedc20c10.woff2")format("woff2"),
    url("https://db.onlinewebfonts.com/t/84ae358e627d67d90bd613fcedc20c10.woff")format("woff"),
    url("https://db.onlinewebfonts.com/t/84ae358e627d67d90bd613fcedc20c10.ttf")format("truetype"),
    url("https://db.onlinewebfonts.com/t/84ae358e627d67d90bd613fcedc20c10.svg#Edwardian Script ITC")format("svg");
}  


#title-sub{
  font-family: Edwardian Script ITC;
  font-size: 6.5rem;
  line-height: 0.6;
  margin-left: -18%;
  font-weight: 100;
}
*, *:before, *:after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html, body { 
  height: 100%;

  }
button, input {
  outline: none;
  border: none;
}
a.active {
    color: #ffa64b !important;
}
a{
  text-decoration: none;
  color: white;
}

h4 {
/*    font-family: "Calistoga", serif;*/
    font-weight: 500;
    font-size: 18px;
}
input[type=radio] {
  position: absolute;
  top: -5000px;
  left: -5000px;
  opacity: 0;
  z-index: -1000;
}

.image-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr))!important;
      gap: 54px!important;
      padding: 0 10px;
    }
.slider {
  position: relative;
  height: 100%;
  z-index: 0;
}
.slider--control {
  display: none;
  z-index: 50;
  position: absolute;
  top: calc(50% - 2rem);
  width: 4rem;
  height: 4rem;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 50%;
}
.slider--control.left {
  left: 4rem;
}
.slider--control.right {
  right: 4rem;
}
.slider--control label {
  z-index: 2000;
 position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
  transform: scale(0);
  transition: transform 0s 0s;
}
.slider--el {
  z-index: 1;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: transform 2.8s, z-index 0.1s;
  overflow: hidden;
  background: rgb(62 56 56 / 5%);
    z-index: 999;
}
.slider--el.anim-5parts .part {
  position: absolute;
  top: 0;
  width: 20.1%;
  height: 100%;
  overflow: hidden;
  will-change: transform;
}
.slider--el.anim-5parts .part:before {
  content: "";
  display: block;
  position: absolute;
  background-size: cover;
  top: 0;
  width: 500%;
  height: 100%;
  background-image: url('img/pool2.jpg');
}
.slider--el.anim-5parts .part.part-1 {
  transition: transform 1.1s 0.3s;
  left: 0%;
}
.slider--el.anim-5parts .part.part-1:before {
  left: 0%;
}
.slider--el.anim-5parts .part.part-2 {
  transition: transform 1.1s 0.5s;
  left: 20%;
}
.slider--el.anim-5parts .part.part-2:before {
  left: -100%;
}
.slider--el.anim-5parts .part.part-3 {
  transition: transform 1.1s 0.7s;
  left: 40%;
}
.slider--el.anim-5parts .part.part-3:before {
  left: -200%;
}
.slider--el.anim-5parts .part.part-4 {
  transition: transform 1.1s 0.5s;
  left: 60%;
}
.slider--el.anim-5parts .part.part-4:before {
  left: -300%;
}
.slider--el.anim-5parts .part.part-5 {
  transition: transform 1.1s 0.3s;
  left: 80%;
}
.slider--el.anim-5parts .part.part-5:before {
  left: -400%;
}
.slider--el.anim-5parts .part {
  transform: translateY(100%);
}
.slider--el.anim-9parts .slider--el-bg {
  perspective: 2000;
}
.slider--el.anim-9parts .part {
  position: absolute;
  width: 33.5%;
  height: 33.5%;
  overflow: hidden;
  will-change: transform;
  transform-origin: 0% 100%;
}
.slider--el.anim-9parts .part:before {
  content: "";
  display: block;
  position: absolute;
  background-size: cover;
  width: 300%;
  height: 300%;
  background-image: url('img/h3.jpg');
}
.slider--el.anim-9parts .part.left-top {
  top: 0%;
  left: 0%;
  transition: transform 0.9s 0.5s cubic-bezier(0.58, -0.7, 0.59, 0.95), opacity 0.6s 0.9s;
}
.slider--el.anim-9parts .part.left-top:before {
  top: 0%;
  left: 0%;
}
.slider--el.anim-9parts .part.mid-top {
  top: 0%;
  left: 33.3333333333%;
  transition: transform 0.9s 0.4s cubic-bezier(0.58, -0.7, 0.59, 0.95), opacity 0.6s 0.8s;
}
.slider--el.anim-9parts .part.mid-top:before {
  top: 0%;
  left: -100%;
}
.slider--el.anim-9parts .part.right-top {
  top: 0%;
  left: 66.6666666667%;
  transition: transform 0.9s 0.5s cubic-bezier(0.58, -0.7, 0.59, 0.95), opacity 0.6s 0.9s;
}
.slider--el.anim-9parts .part.right-top:before {
  top: 0%;
  left: -200%;
}
.slider--el.anim-9parts .part.left-mid {
  top: 33.3333333333%;
  left: 0%;
  transition: transform 0.9s 0.6s cubic-bezier(0.58, -0.7, 0.59, 0.95), opacity 0.6s 1s;
}
.slider--el.anim-9parts .part.left-mid:before {
  top: -100%;
  left: 0%;
}
.slider--el.anim-9parts .part.mid-mid {
  top: 33.3333333333%;
  left: 33.3333333333%;
  transition: transform 0.9s 0.3s cubic-bezier(0.58, -0.7, 0.59, 0.95), opacity 0.6s 0.7s;
}
.slider--el.anim-9parts .part.mid-mid:before {
  top: -100%;
  left: -100%;
}
.slider--el.anim-9parts .part.right-mid {
  top: 33.3333333333%;
  left: 66.6666666667%;
  transition: transform 0.9s 0.6s cubic-bezier(0.58, -0.7, 0.59, 0.95), opacity 0.6s 1s;
}
.slider--el.anim-9parts .part.right-mid:before {
  top: -100%;
  left: -200%;
}
.slider--el.anim-9parts .part.left-bot {
  top: 66.6666666667%;
  left: 0%;
  transition: transform 0.9s 0.7s cubic-bezier(0.58, -0.7, 0.59, 0.95), opacity 0.6s 1.1s;
}
.slider--el.anim-9parts .part.left-bot:before {
  top: -200%;
  left: 0%;
}
.slider--el.anim-9parts .part.mid-bot {
  top: 66.6666666667%;
  left: 33.3333333333%;
  transition: transform 0.9s 0.8s cubic-bezier(0.58, -0.7, 0.59, 0.95), opacity 0.6s 1.2s;
}
.slider--el.anim-9parts .part.mid-bot:before {
  top: -200%;
  left: -100%;
}
.slider--el.anim-9parts .part.right-bot {
  top: 66.6666666667%;
  left: 66.6666666667%;
  transition: transform 0.9s 0.7s cubic-bezier(0.58, -0.7, 0.59, 0.95), opacity 0.6s 1.1s;
}
.slider--el.anim-9parts .part.right-bot:before {
  top: -200%;
  left: -200%;
}
.slider--el.anim-9parts .part {
  transform: rotateX(90deg);
  opacity: 0;
}
.slider--el.anim-3parts .part {
  position: absolute;
  top: 0;
  width: 33.5%;
  height: 100%;
  overflow: hidden;
  transition: transform 1.5s 0.3s;
  will-change: transform;
}
.slider--el.anim-3parts .part:before {
  content: "";
  display: block;
  position: absolute;
  background-size: cover;
  width: 300%;
  height: 100%;
  background-image: url('img/b2.jpg');
}
.slider--el.anim-3parts .part.left {
  left: 0;
}
.slider--el.anim-3parts .part.left:before {
  left: 0;
}
.slider--el.anim-3parts .part.mid {
  left: 33.3333333333%;
}
.slider--el.anim-3parts .part.mid:before {
  left: -100%;
}
.slider--el.anim-3parts .part.right {
  left: 66.6666666667%;
}
.slider--el.anim-3parts .part.right:before {
  left: -200%;
}
.slider--el.anim-3parts .left {
  transform: translate3D(-100%, -33.333%, 0);
}
.slider--el.anim-3parts .mid {
  transform: translate3D(0, 100%, 0);
}
.slider--el.anim-3parts .right {
  transform: translate3D(100%, -33.333%, 0);
}
.slider--el.anim-4parts .part {
  position: absolute;
  width: 50.2%;
  height: 50.2%;
  overflow: hidden;
  will-change: transform;
}
.slider--el.anim-4parts .part:before {
  content: "";
  display: block;
  position: absolute;
  background-size: cover;
  width: 200%;
  height: 200%;
  background-image: url('img/b1.jpg');
}
.slider--el.anim-4parts .part.top {
  top: 0;
  transition: transform 1.3s 0.3s;
}
.slider--el.anim-4parts .part.top:before {
  top: 0;
}
.slider--el.anim-4parts .part.bot {
  top: 50%;
  transition: transform 1.3s 0.5s;
}
.slider--el.anim-4parts .part.bot:before {
  top: -100%;
}
.slider--el.anim-4parts .part.left {
  left: 0;
}
.slider--el.anim-4parts .part.left:before {
  left: 0;
}
.slider--el.anim-4parts .part.right {
  left: 50%;
}
.slider--el.anim-4parts .part.right:before {
  left: -100%;
}
.slider--el.anim-4parts .left {
  transform: translateX(-100%);
}
.slider--el.anim-4parts .right {
  transform: translateX(100%);
}
.slider--el-bg {
  position: absolute;
  top: -10%;
  left: -10%;
  width: 120%;
  height: 120%;
  background-size: cover;
  transition: transform 1s 1.5s;
  will-change: transform;
}
.slider--el-bg .part:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.15);
}
.slider--el-content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 20rem;
  transition: opacity 0.3s;
  opacity: 0;
}
.slider--el-heading {
  font-size: 9rem;
  font-family: Tesla;
  text-transform: uppercase;
  color: #fff;
}
/* CONTROL */
#page1:checked ~ .slider--el-1 {
  z-index: 10;
}
#page1:checked ~ .slider--el-1 .slider--el-bg {
  transform: scale(0.834);
}
#page1:checked ~ .slider--el-1 .slider--el-content {
  opacity: 1;
  transition: opacity 0.3s 1.8s;
}
#page1:checked ~ .slider--el-1 .part {
  transform: translateZ(0);
  opacity: 1;
}
#page2:checked ~ .slider--el-2 {
  z-index: 10;
}
#page2:checked ~ .slider--el-2 .slider--el-bg {
  transform: scale(0.834);
}
#page2:checked ~ .slider--el-2 .slider--el-content {
  opacity: 1;
  transition: opacity 0.3s 1.8s;
}
#page2:checked ~ .slider--el-2 .part {
  transform: translateZ(0);
  opacity: 1;
}
#page3:checked ~ .slider--el-3 {
  z-index: 10;
}
#page3:checked ~ .slider--el-3 .slider--el-bg {
  transform: scale(0.834);
}
#page3:checked ~ .slider--el-3 .slider--el-content {
  opacity: 1;
  transition: opacity 0.3s 1.8s;
}
#page3:checked ~ .slider--el-3 .part {
  transform: translateZ(0);
  opacity: 1;
}
#page4:checked ~ .slider--el-4 {
  z-index: 10;
}
#page4:checked ~ .slider--el-4 .slider--el-bg {
  transform: scale(0.834);
}
#page4:checked ~ .slider--el-4 .slider--el-content {
  opacity: 1;
  transition: opacity 0.3s 1.8s;
}
#page4:checked ~ .slider--el-4 .part {
  transform: translateZ(0);
  opacity: 1;
}
#page1:checked ~ .slider--control.left .page4-left {
  z-index: 5000;
  transform: scale(1);
  transition: transform 0s 2.1s;
}
#page1:checked ~ .slider--control.right .page2-right {
  z-index: 5000;
  transform: scale(1);
  transition: transform 0s 2.1s;
}
#page2:checked ~ .slider--control.left .page1-left {
  z-index: 5000;
  transform: scale(1);
  transition: transform 0s 2.1s;
}
#page2:checked ~ .slider--control.right .page3-right {
  z-index: 5000;
  transform: scale(1);
  transition: transform 0s 2.1s;
}
#page3:checked ~ .slider--control.left .page2-left {
  z-index: 5000;
  transform: scale(1);
  transition: transform 0s 2.1s;
}
#page3:checked ~ .slider--control.right .page4-right {
  z-index: 5000;
  transform: scale(1);
  transition: transform 0s 2.1s;
}
#page4:checked ~ .slider--control.left .page3-left {
  z-index: 5000;
  transform: scale(1);
  transition: transform 0s 2.1s;
}
#page4:checked ~ .slider--control.right .page1-right {
  z-index: 5000;
  transform: scale(1);
  transition: transform 0s 2.1s;
}
 * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        h2{
            text-align: center;
            margin-bottom: 2%;
            font-weight: 700;
        }
        h3{
            font-weight: 700;
            font-size: 24px;
        }
         .banner {
            width: 100%;
            position: absolute;
            top: 0;
            left: 0;
            z-index: 10;
            display: flex;
            flex-direction: column;
            align-items: center;
            background: transparent;
        }
        .logo-container {
            text-align: center;
            margin-top: 10px;
        }
        .logo-container img {
            max-width: 150px;
            height: auto;
        }
        #logo img{
                margin-bottom: 3%;
        }
        .menu {
            width: 100%;
            text-align: center;
            margin-top: 10px;
        }
        .menu ul {
            list-style: none;
            display: flex;
            justify-content: center;
            background: transparent;
            padding: 10px 0;
            border-radius: 5px;
            background: #ffffffd1;
        }
        .menu ul li {
            margin: 0 15px;
        }
        .menu ul li a {
           color: #57c53b;
            text-decoration: none;
            font-size: 15px;
            transition: 0.3s;
        }
        .menu ul li a:hover {
            color: green;
        }
        .toggle {
            display: none;
            font-size: 24px;
            color: white;
            cursor: pointer;
            position: absolute;
            top: 20px;
            right: 20px;
            background: rgba(0, 0, 0, 0.5);
            padding: 10px;
            border-radius: 5px;
        }
        .carousel {
            position: relative;
            width: 100%;
            height: 100vh;
            overflow: hidden;
        }
        .slides {
            display: flex;
            width: 100%;
            transition: transform 0.5s ease-in-out;
        }
        .slide {
            width: 100vw;
            height: 100vh;
            position: relative;
            background-size: cover;
            background-position: center;
        }
        .title-overlay {         
            position: absolute;
            bottom: 10%;
            left: 5%;
 /*          background: rgba(0, 0, 0, 0.5);*/
            color: white;
            padding: 10px 20px;
            font-size: 28px;
            border-radius: 5px;
            text-align: left;
        }
        .nav-buttons {
            position: absolute;
            top: 50%;
            width: 100%;
            display: flex;
            justify-content: space-between;
            transform: translateY(50%);
        }
        .nav-buttons button {
            background: rgba(0, 0, 0, 0.5);
            color: white;
            border: none;
            padding: 10px;
            cursor: pointer;
        }
         .title-overlay {
            position: absolute;
/*            background: rgb(0 0 0 / 38%);*/
            color: white;
            padding: 10px 20px;
            font-size: 24px;
            border-radius: 5px;
            text-align: center;
            position: absolute;
            top: 55%;
            left: 50%;
            transform: translate(-50%, -50%);
            text-align: center;
        }
                 
        .hanging-images {
            display: flex;
            justify-content: center;
            gap: 20px;
            position: relative;
            top: -50px;
            flex-wrap: wrap;
        }
        .hanging-images img {
            width: 300px;
            height: 200px;
            object-fit: cover;
            border: 2px solid white;
            box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
            transition: transform 0.3s ease-in-out;
        }
        .hanging-images img:hover {
            transform: translateY(-5px);
        }
        button#slider-button{
            border: 1px solid white;
    background: #00ffff00;
    border-radius: 20px;
        padding: 6px;
    margin-top: 12px;
    font-size: 15px;
    color: white;
        }

        @media (max-width: 768px) {

            .menu ul {
                display: none;
                flex-direction: column;
                position: absolute;
                background: rgba(0, 0, 0, 0.7);
                width: 100%;
                top: 60px;
                left: 0;
                padding: 10px 0;
            }
            .menu ul.show {
                display: flex;
            }
            .toggle {
                display: block;
            }
             
        }

      /*  =========================about=================================*/
.section-content {
      margin-top: 15%!important;
      margin: 5%;
      animation: slideUp 1s ease-out forwards;
      opacity: 0;
      transform: translateY(50px);

    }

    @keyframes slideUp {
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    .content-container {
      position: relative;
      overflow: hidden;
      border-radius: 12px;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    }

    .content-container img {
      width: 100%;
      height: auto;
      display: block;
      border-radius: 12px;
    }

    .overlay-txt {
      position: absolute;
      width: 90%;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      color: white;
      background-color: rgba(0, 0, 0, 0.6);
      padding: 1rem 1.5rem;
      border-radius: 8px;
      text-align: justify;
      font-size: 1.2rem;
    }

    /* Responsive layout for small screens */
    @media (max-width: 768px) {
      .overlay-txt {
        position: relative;
        top: auto;
        left: auto;
        transform: none;
        background-color: transparent;
        color: #333;
        padding: 1rem 0 0 0;
        font-size: 1rem;
        width: 100%;
        text-align: justify;
      }
.section-content {
    margin-top: 25% !important;
    margin: 5%;
  }
      .content-container {
        box-shadow: none;
      }
    }
      .abt-container {
            display: flex;
            justify-content: space-evenly;
            gap: 20px;
            padding: 20px;
        }
        .abt-column {
            position: relative;
            flex: 1;
            overflow: hidden;
            text-align: center;
        }
        .abt-column img {
            width: 100%;
            display: block;
            transition: transform 0.3s;
        }
        .abt-content {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: rgba(0, 0, 0, 0.7);
            color: white;
            padding: 15px;
            opacity: 0;
           transition: opacity 0.3s;
        }
        .abt-column:hover .abt-content {
            opacity: 1;
        }
        @media (max-width: 768px) {
            .abt-container {
                flex-direction: column;
            }
            .abt-column {
                display: flex;
                flex-direction: column;
                align-items: center;
                position: relative;
            }
            .abt-content {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                opacity: 1;
                background: rgba(0, 0, 0, 0.7);
                color: white;
                padding: 15px;
            }
        }
      .title2{
        font-size: 30px;
      }
        .details-section {
            display: flex;
            align-items: center;
            justify-content: center;
            padding-top: 50px;
            gap: 20px;
            padding-right: 50px;
            padding-left: 50px;
            margin-bottom: 8%;
            
        }

        .details-image {
            flex: 1;
            max-width: 500px;
            text-align: right;
        }

        .details-image img {
            width: 80%;
            height: auto;
            border-radius: 10px;
        }

        .details-content {
            flex: 1;
            max-width: 500px;
        }

        .details-content h2 {
            font-size: 28px;
            margin-bottom: 15px;
            color: #333;
            text-align: center;
        }

        .details-content p {
            font-size: 1rem;
            line-height: 1.4;
            color: #383535;
            text-align: justify;
        }

        .sec-container {
            width: 90%;
            max-width: 1200px;
            margin: auto;
            padding: 20px 0;
        }
        .sec {
            display: flex;
            align-items: center;
            margin-bottom: 30px;
            background: #ffe5b8;
            overflow: hidden;
            border-radius: 8px;
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
            transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
             transform: translateY(50px);
            opacity: 0;
            transition: transform 0.6s ease-in-out, opacity 0.6s ease-in-out;
        }
        .sec.visible {
            transform: translateY(0);
            opacity: 1;
        }
        
        .sec:hover {
            transform: scale(1.02);
            box-shadow: 0 6px 10px rgba(0,0,0,0.15);
            background: #ffe5b8;
        }
        .sec img {
            width: 50%;
            object-fit: cover;
            transition: transform 0.3s ease-in-out;
        }
        .sec:hover img {
            transform: scale(1.05);
        }
        .txt-box {
            width: 100%;
            padding: 30px;
            background: #ffe5b8;
            transition: background 0.3s ease-in-out;
        }

        .txt-box li{   
        display: block;     
          text-align: center;                    
          word-wrap: break-word;
          font-size: 16px;
        }
        /*.txt-box:hover {
            background: #e0e0e0;
        }*/
        .txt-box h2 {
            margin-bottom: 10px;
            color: #333;
        }
        .txt-box p {
            font-size: 16px;
            color: #383535;
            line-height:1.5; 
            text-align:center;           
           /* display: block;
            word-break: break-word;  */          
        }

      
       
       @media (max-width: 768px) {
            .sec{
                flex-direction: column;
            }
            .sec img {
                order: -1;
                width: 100%;
            }
            .text-box {
                width: 100%!important;
                text-align: center;
            }
        }
          /*=========================about=================================*/
        @media (max-width: 768px) {
            .menu ul {
                flex-direction: column;
                display: none;
                background: rgba(0, 0, 0, 0.7);
                width: 100%;
                text-align: center;
                padding: 10px 0;
            }
            .menu ul.active {
                display: flex;
                text-align: left;
                padding-left: 5%;
            }
            .menu ul li {
                margin: 10px 0;
            }
            .toggle {
                display: block;
            }
            
        }




.container#type {
            width: 90%;
            max-width: 1036px;
            background: #bf978e;
            border-radius: 50px;
            text-align: center;
            padding: 20px 50px;
        }
        .title {
            font-size: 24px;
            font-weight: bold;
            margin-bottom: 20px;
            padding-left: 80px;
            color: white;
        }
        .content {
            display: flex;
            flex-wrap: wrap;
        }
        .left-column {
            flex: 1;
            padding: 25px;
            position: relative;
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
        }
        .right-column {
            flex: 1;
            position: relative;
            overflow: hidden;
        }
        .buttons {
            flex-direction: column;
            align-items: flex-start;
            position: relative;
            z-index: 2;
        }
        .buttons button {
            padding: 10px 20px;
            margin: 5px 0;
            border: none;
            border-radius: 20px;
            cursor: pointer;
            background: white; 
        }
        h2#title{
            margin-top: 0px;
            margin-bottom: 0px;
        }
        
        .image-container img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        .text-content {
            margin-top: 220px;
        }
        .right-column img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
         .image-small {
            display: none;
        }

        @media (max-width: 600px) {
            /* Hide small image and show large image for screens above 600px */
            .image-small {
                display: block;
                width: 80%;
            }
            
        }
        @media (max-width: 768px) {
  .gallery-container {/*
    flex-direction: column;*/
        align-items: center;
  }
}
        @media (max-width: 768px) {
            .content {
                flex-direction: column;
            }
            .image-container {
                position: relative;
                left: auto;
                top: auto;
                margin: 10px auto;
            }
            .text-content {
                margin-top: 20px;
            }
        }

           .room-btn {
        background-color: #edc877!important;
        border: none;
        padding: 10px 20px;
        cursor: pointer;
    }
    
    .room-btn.active {
        background-color: #d4a056!important; /* Active button color */
    }
        .buttons {
            justify-content: center;
            gap: 10px;
            margin-bottom: 20px;
        }
        .buttons button {
            padding: 10px 20px;
            border: none;
            cursor: pointer;
            font-size: 16px;
            font-weight: bold;
            border-radius: 10px;
        }
        .content {            
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 20px;
            position: relative;
        }
        .image-container {
            display: flex;
            justify-content: center;
            gap: 10px;
        }
        .image-container img {
            width: 50%;
            border-radius: 10px;
        }
        .sliderimg {
            position: relative;
            width: 100%;
            max-width: 600px;
            overflow: hidden;
            display: none;
        }
        .slides {
            display: flex;
            transition: transform 0.5s ease-in-out;
        }
        .slides img {
            width: 100%;
            border-radius: 10px;
            height: 350px;
/*            width: 500px;*/
        }
        .prev, .next {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            background-color: rgba(0, 0, 0, 0.7);
            color: white;
            border: none;
            padding: 15px;
            cursor: pointer;
            border-radius: 5px;
            font-size: 20px;
            display: block;
        }
        .prev { left: 10px; }
        .next { right: 10px; }
        .text-content {
            text-align: center;
            font-size: 1rem;
            margin-top: 15px;
            max-width: 600px;
            color: white;
        }




        @media (max-width: 767px) {
            .image-container 
              { 
                display: none; 
              }
            .sliderimg 
              { 
                display: block; 
              }
          .slides img{
              height: 250px!important;
              }
            }

            @media (min-width: 768px) {
          /*  
          .prev, .next{
              display: none;
              }*/
              .slides{
                gap:20px;
              }
            }
            /* @media (min-width: 540px) {
                  .slides img {
                    width: 350px !important;
                    height: 250px!important;
                   }
                }*/
     /*   ==================accordian==================*/

        .accordion-container {
            display: flex;
            width: 90%;
            max-width: 1036px;
            margin: 5vh auto;
            background: white;
            border-radius: 50px;
            overflow: hidden;
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
        }

        /* Left Side - Full Width Image */
        .left-panel {
            flex: 70%;
            position: relative;
            border-radius: 50px 0 0 50px;
            overflow: hidden;
        }

        .left-panel img {
            width: 99.6%;
            height: 100%;
            object-fit: cover;
        }

        /* Right Side - Accordion Buttons */
        .right-panel {
            flex: 30%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 20px;
            gap: 10px;
            background: #14604b;
            border-radius: 0 50px 50px 0;
        }

        .accordion-button {
            width: 100%;
            max-width: 200px;
            padding: 12px 20px;
            border: none;
            border-radius: 50px;
            background: #1c7e63;
            cursor: pointer;
            color: white;
            font-size: 16px;
            text-align: center;
            transition: 0.3s;
            position: relative;
        }

        .accordion-button.active {
            background: #14604b;
            color: white;
            font-weight: bold;
        }

        /* Hidden content below buttons */
        .accordion-content {
            display: none;
            text-align: center;
            margin-top: 5px;
            font-size: 1rem;
            color: white;
        }

        .accordion-button.active + .accordion-content {
            display: block;
            text-align: justify;
            word-break: break-all;
        }

        /* Responsive Design */
        @media (max-width: 768px) {
            .accordion-container {
                flex-direction: column;
                height: auto;
                width: 95%;
            }

            #logo img{
              margin-bottom: 18%;
            }

            .left-panel {
                flex: 1;
                height: 50vh;
                border-radius: 50px 50px 0 0;
            }

            .right-panel {
                flex: 1;
                width: 100%;
                border-radius: 0 0 50px 50px;
                padding: 30px;
            }

            .accordion-button {
                max-width: 100%;
            }
        }
          .our_services {
              margin-top: 8%;
          }
          img#img_size {
              height: 300px !important;
          }
          h2#heading{
            text-decoration: underline;
            margin: 5%;
          }
       .container {
/*            display: flex;*/
            background: #b39380e3;
            color: white;
            border-radius: 50px 0 0 50px;
            max-width: 1036px;
            margin: auto;
            overflow: hidden;
                padding: 50px;
                margin-bottom: 8%;
        }

        /* Columns */
        .column {
            flex: 1;
            text-align: center;
            padding: 20px;
            
        }

        /* First Column - Content */
        .first-column {
            text-align: left;
            flex: 1.2;
            padding-right: 40px;
        }

        .first-column h2 {
            font-size: 28px;
            margin-bottom: 10px;
        }

        .first-column p {
            font-size: 16px;
            line-height: 1.6;
            text-align: justify;
            word-spacing: -2px;
        }
        .column.second-column {
            background: white;
            padding-left: 0px;
            padding-right: 0px;
            margin: 10px;
            border-radius: 0px 50px 50px;
        }
         .column.third-column {
            background: white;
            padding-left: 0px;
            padding-right: 0px;
            margin: 10px;
            border-radius: 0px 50px 50px;
        }
        /* Second & Third Column */
        .icon {
            width: 80px;
            height: 80px;
            border-radius: 50%;
            margin-bottom: 15px;
        }

        .image-area {
            width: 100%;
            height: 200px;
            background: white;
            overflow: hidden;
            margin-bottom: 15px;
        }

        .image-area img {
            width: 100%;
            height: 100%;
            object-fit: cover; /* Ensures image covers the area fully */
        }

        .title {
            font-size: 20px;
            font-weight: bold;
            margin-bottom: 5px;
            color: black;
        }

        .content {
            font-size: 1rem;
            line-height: 1.4;
            color: black;
            word-break: break-word;
            text-align: justify;
        }

        /* Read More Button */
        .read-more {
            display: inline-block;
            padding: 8px 16px;
            color: black;
            text-decoration: none;
            border-radius: 20px;
            font-size: 14px;
            transition: 0.3s;
        }

        .read-more:hover {
            background: #e68900;
        }

        /* Responsive Design */
        @media (max-width: 900px) {
            .container {
                flex-direction: column;
                border-radius: 50px;
                padding: 20px;
            }
            .container#type{
              padding: 20px!important;
            }
            .first-column {
                text-align: center;
                padding: 20px 0;
            }

            .image-area {
                height: 180px;
            }
        }
        /*===========================icon area===================*/
        /* Main Container */
        .image-row {
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            gap: 50px;
            padding: 20px;
        }

        /* Image Container */
        .image-box {
            position: relative;
           overflow: hidden;
            border-radius: 10px;
        }

        .image-box img {
            object-fit: cover;
            transition: transform 0.3s ease-in-out;
            border-radius: 10px;
        }

        /* Hover Effect */
        .image-box:hover img {
            transform: scale(1.05);
        }

        /* Caption */
        .caption {
            width: 100%;
            color: black;
            text-align: center;
            padding: 10px;
            font-size: 1rem;
        }

       @media (min-width: 768px) {
        .image-row {
          margin-top:-30px;
          margin-bottom:-50px;
        }
      }

      .image-icon {
            display: none;
        }

        @media (max-width: 600px) {
           
             .image-box {
                display: none;
            }
            
            .image-icon {
                display: block;
            }
        }
  
         .gallery-title {
            font-size: 24px;
            font-weight: bold;
            margin-bottom: 20px;
            text-align: center;
            margin-top: 8%;
        }

        .gallery-container {
            display: flex;
            justify-content: center;
            align-items: center;
           flex-wrap: wrap;
           position: relative;
        }

        .gallery-item {
            width: 23%;
            border-radius: 20px;
            overflow: hidden;
            border: 5px solid white;
            position: relative;
            margin-right: -30px;
            margin-left: -30px;
        }

        .gallery-item img {
            width: 100%;
            height: 185px;
            display: block;
            border-radius: 20px;
        }

        /* Overlapping Effect */
        .gallery-item:nth-child(2),
        .gallery-item:nth-child(4) {
            margin-top: 70px; /* Moves 2nd and 4th images downward */
            z-index: 1;
        }

        .testimonial-section {
            margin-top: 8%;
            width: 100%;
            text-align: center;
            position: relative;
            margin-bottom: 50px;
        }

        .testimonial-title {
            font-size: 28px;
            font-weight: bold;
            margin-bottom: 20px;
            text-transform: uppercase;
        }

        .testimonial-bg {
            width: 100%;
            height: 550px;
            background: url('img/b5.jpg') no-repeat center center/cover;
            position: relative;
            border-radius: 10px;
        }

        .testimonial-box {
            width: 70%;
            max-width: 800px;
            background: rgba(0, 51, 43, 0.85);
            color: white;
            padding: 30px;
            border-radius: 20px;
            position: absolute;
            margin-top: 14%;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            align-items: center;
            text-align: left;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
        }

        .profile-img {
            width: 80px;
            height: 80px;
            border-radius: 50%;
            border: 3px solid white;
            object-fit: cover;
            margin-right: 20px;
        }

        .testimonial-content {
            flex: 1;
        }

        .testimonial-content h3 {
            font-size: 18px;
            margin-bottom: 5px;
        }

        .testimonial-content p {
            font-size: 18px;
            line-height: 1.6;
        }

        .testimonial-section {
      background: url('your-hotel-image.jpg') no-repeat center center/cover;
      padding: 4rem 1rem;
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .testimonial-title h2 {
      font-size: 2.5rem;
      margin-bottom: 2rem;
      color: #333;
    }

    .testimonial-bg {
      position: relative;
      border-radius: 1rem;
      overflow: hidden;
      color: #fff;
      padding: 2rem;
    }

    .testimonial-box {
      display: none;
      align-items: center;
      gap: 1rem;
      transition: opacity 0.5s ease;
    }

    .testimonial-box.active {
      display: flex;
    }

    .profile-img {
      width: 60px;
      height: 60px;
      border-radius: 50%;
      object-fit: cover;
      margin-right: 1rem;
    }

    .testimonial-content h3 {
      margin: 0 0 0.5rem;
    }

    .testimonial-content p {
      margin: 0;
      line-height: 1.5;
    }

    .testimonial-nav {
      text-align: center;
      margin-top: 20rem;
    }

    .testimonial-nav span {
      display: inline-block;
      width: 12px;
      height: 12px;
      margin: 0 5px;
      background: #fff;
      border-radius: 50%;
      opacity: 0.5;
      cursor: pointer;
      transition: 0.3s;
    }

    .testimonial-nav span.active {
      opacity: 1;
    }

        .lg-container {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 20px; /* Space between logos */
            margin-bottom: 3%;
            margin-top: 3%;
           }

        .lg-container img {
            width: 100px; /* Adjust size as needed */
            height: auto;
        }

        @media (max-width: 600px) {
            .lg-container {
                justify-content: center;
                margin-top: 10%;
                margin-bottom: 15%;
            }
       @media (min-width: 768px) {
            .lg-container {
                justify-content: center;
                margin-top: 20%;
                margin-bottom: 15%;
            }  
            .lg-container img {
                width: 80px; /* Smaller size on smaller screens */
            }
        }

      .container-footer {
      position: relative;
      padding-top: 30px;
      padding-bottom: 20px;
/*      background: #043d35;*/
    }

    .content-section {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      padding: 30px;
      background-color: #f4a900;
      max-width: 1100px;
      margin: auto;
      border-radius: 8px;
      position: relative;
      z-index: 2;
      margin-top: -100px;
    }

    .content-column {
      flex: 1;
      padding: 20px;
      min-width: 300px;
    }

     

    .contact-details p {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 1rem;
      font-weight: bold;
      color: white;
    }

    .location-section {
      text-align: center;
      margin-top: 18px;
    }

    .location-section iframe {
      width: 100%;
      height: 315px;
      border-radius: 5px;
      margin-top: 10px;
    }

    .social-links {
      display: flex;
      gap: 15px;
      font-size: 24px;
      margin-bottom: 10px;
    }

    .image-gallery {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 10px;
    }

    .image-gallery img {
      width: 100%;
      height: 100px;
      object-fit: cover;
      border-radius: 5px;
    }

    .footer-section {
      color: white;
      text-align: center;
      font-size: 14px;
      position: relative;
      z-index: 1;
      margin-top: -10px;
      margin-bottom: 10%;
    }
    #type{
      margin-top: 6%;
    }

    @media (max-width: 768px) {
      .content-section {
        flex-direction: column;
        text-align: center;
      }
    }

        /* Responsive Adjustments */
        @media (max-width: 768px) {
            .testimonial-box {
                flex-direction: column;
                text-align: center;
                padding: 20px;
                width: 80%; 
            }
 
            .profile-img {
                margin-bottom: 10px;
                margin-right: 0;
            }
        }

        @media (max-width: 500px) {
            .testimonial-box {
                width: 90%;
                bottom: 78px;
            }
 
            .testimonial-content p {
                font-size: 12px;
            }
        }

        /* Responsive Design */
       /* @media (max-width: 900px) {
            .image-box {
                width: 30%; /* 3 images per row */
            }
        }*/

        @media (max-width: 600px) {
            .image-box {
                width: 48%; /* 2 images per row */
            }
        }

        @media (max-width: 400px) {
            .image-box {
                width: 100%; /* 1 image per row */
            }
        }
        @media (max-width: 768px) {
    .hanging-images {
        display: none;
        flex-direction: row; /* Keep row layout */
        top: -30px;
    }
    .hanging-images img {
        width: 45%; /* Make images smaller */
        max-width: 200px;
    }
}

/* Hide images for very small screens (Mobile phones, < 600px) */
@media (max-width: 600px) {
    .hanging-images {
        display: none;
    }   
    .tagline{
      display:block;
      width: auto;
    }
      #title-sub{   
      padding-left: 25px;     
        display: flow;
       font-size: 45px !important;
    }
   
    .title-overlay {
    width: inherit;           
           font-size: 10px;
           
    }    

}

@media (max-width: 768px) {
            .details-section {
                flex-direction: column;
                text-align: center;
                padding: 30px;
            }

            .details-content {
                max-width: 100%;
            }
        }



         /* Responsive Design */
        @media (max-width: 900px) {
            /*.gallery-container {
                max-width: 700px;
            }*/

            .gallery-item {
                width: 45%;
            }

            .gallery-item:nth-child(2),
            .gallery-item:nth-child(4) {
                margin-top: 20px; /* Reduce gap on smaller screens */
            }
        }

        @media (max-width: 600px) {
            .gallery-item {
               /* flex-direction: column;
                align-items: center;*/
                display: none;
            }

            .gallery-item {
                width: 90%;
                margin-top: 10px;
            }
        }
 

.contact_us_6 .text-blk {
  margin-top: 0px;
  margin-right: 0px;
  margin-bottom: 0px;
  margin-left: 0px;
  line-height: 25px;
}

.contact_us_6 .responsive-cell-block {
  min-height: 75px;
}

.contact_us_6 input:focus,
.contact_us_6 textarea:focus {
  outline-color: initial;
  outline-style: none;
  outline-width: initial;
}

.contact_us_6 .container-block {
  min-height: 75px;
  width: 100%;
  padding-top: 10px;
  padding-right: 10px;
  padding-bottom: 10px;
  padding-left: 10px;
  display: block;
}

.contact_us_6 .responsive-container-block {
  min-height: 75px;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  margin-top: 0px;
  margin-right: auto;
  margin-bottom: 50px;
  margin-left: auto;
  padding-top: 0px;
  padding-right: 0px;
  padding-bottom: 0px;
  padding-left: 0px;
}

.contact_us_6 .responsive-container-block.big-container {
  padding-top: 10px;
  padding-right: 30px;
  width: 35%;
  padding-bottom: 10px;
  padding-left: 30px;
  background-color: #03a9f4;
  position: absolute;
  height: 950px;
  right: 0px;
}

.contact_us_6 .responsive-container-block.container {
  position: relative;
  min-height: 75px;
  flex-direction: row;
  z-index: 2;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  padding-top: 0px;
  padding-right: 30px;
  padding-bottom: 0px;
  padding-left: 30px;
  max-width: 1320px;
  margin-top: 0px;
  margin-right: auto;
  margin-bottom: 0px;
  margin-left: auto;
}

.contact_us_6 .container-block.form-wrapper {
  background-color: white;
  max-width: 450px;
  text-align: center;
  padding-top: 50px;
  padding-right: 40px;
  padding-bottom: 50px;
  padding-left: 40px;
  box-shadow: rgba(0, 0, 0, 0.05) 0px 4px 20px 7px;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
  border-bottom-right-radius: 6px;
  border-bottom-left-radius: 6px;
  margin-top: 90px;
  margin-right: 0px;
  margin-bottom: 60px;
  margin-left: 0px;
}

.contact_us_6 .text-blk.contactus-head {
  font-size: 36px;
  line-height: 52px;
  font-weight: 900;
}

.contact_us_6 .text-blk.contactus-subhead {
  color: #9c9c9c;
  width: 300px;
  margin-top: 0px;
  margin-right: auto;
  margin-bottom: 50px;
  margin-left: auto;
  display: none;
}

.contact_us_6 .responsive-cell-block.wk-desk-6.wk-ipadp-6.wk-tab-12.wk-mobile-12 {
  margin-top: 0px;
  margin-right: 0px;
  margin-bottom: 26px;
  margin-left: 0px;
  min-height: 50px;
}

.contact_us_6 .input {
  width: 100%;
  height: 50px;
  padding-top: 1px;
  padding-right: 15px;
  padding-bottom: 1px;
  padding-left: 15px;
  border-top-width: 2px;
  border-right-width: 2px;
  border-bottom-width: 2px;
  border-left-width: 2px;
  border-top-style: solid;
  border-right-style: solid;
  border-bottom-style: solid;
  border-left-style: solid;
  border-top-color: #eeeeee;
  border-right-color: #eeeeee;
  border-bottom-color: #eeeeee;
  border-left-color: #eeeeee;
  border-image-source: initial;
  border-image-slice: initial;
  border-image-width: initial;
  border-image-outset: initial;
  border-image-repeat: initial;
  font-size: 16px;
  color: black;
}

.contact_us_6 .textinput {
  width: 98%;
  min-height: 150px;
  padding-top: 20px;
  padding-right: 15px;
  padding-bottom: 20px;
  padding-left: 15px;
  border-top-width: 2px;
  border-right-width: 2px;
  border-bottom-width: 2px;
  border-left-width: 2px;
  border-top-style: solid;
  border-right-style: solid;
  border-bottom-style: solid;
  border-left-style: solid;
  border-top-color: #eeeeee;
  border-right-color: #eeeeee;
  border-bottom-color: #eeeeee;
  border-left-color: #eeeeee;
  border-image-source: initial;
  border-image-slice: initial;
  border-image-width: initial;
  border-image-outset: initial;
  border-image-repeat: initial;
  font-size: 16px;
}

.contact_us_6 .submit-btn {
  width: 98%;
  background-color: #03a9f4;
  height: 60px;
  font-size: 20px;
  font-weight: 700;
  color: white;
  border-top-width: 0px;
  border-right-width: 0px;
  border-bottom-width: 0px;
  border-left-width: 0px;
  border-top-style: outset;
  border-right-style: outset;
  border-bottom-style: outset;
  border-left-style: outset;
  border-top-color: #767676;
  border-right-color: #767676;
  border-bottom-color: #767676;
  border-left-color: #767676;
  border-image-source: initial;
  border-image-slice: initial;
  border-image-width: initial;
  border-image-outset: initial;
  border-image-repeat: initial;
  border-top-left-radius: 40px;
  border-top-right-radius: 40px;
  border-bottom-right-radius: 40px;
  border-bottom-left-radius: 40px;
}

.contact_us_6 .form-box {
  z-index: 2;
  margin-top: 0px;
  margin-right: 48px;
  margin-bottom: 0px;
  margin-left: 0px;
}

.contact_us_6 .text-blk.input-title {
  text-align: left;
  padding-top: 0px;
  padding-right: 0px;
  padding-bottom: 0px;
  padding-left: 10px;
  font-size: 14px;
  margin-top: 0px;
  margin-right: 0px;
  margin-bottom: 5px;
  margin-left: 0px;
  color: #9c9c9c;
}

.contact_us_6 ::placeholder {
  color: #dadada;
}

.contact_us_6 .mob-text {
  display: block;
  text-align: left;
  margin-top: 0px;
  margin-right: 0px;
  margin-bottom: 25px;
  margin-left: 0px;
}

.contact_us_6 .responsive-cell-block.wk-tab-12.wk-mobile-12.wk-desk-12.wk-ipadp-12 {
  margin-top: 0px;
  margin-right: 0px;
  margin-bottom: 20px;
  margin-left: 0px;
}

.contact_us_6 .text-blk.contactus-subhead.color {
  color: white;
}

.contact_us_6 .map-box {
  max-width: 800px;
  max-height: 520px;
  width: 100%;
  height: 520px;
  background-color: #d9d9d9;
  background-image: url("https://workik-widget-assets.s3.amazonaws.com/widget-assets/images/sc23.png");
  background-size: cover;
  background-position-x: 50%;
  background-position-y: 50%;
}

.contact_us_6 .map-part {
  width: 100%;
  height: 100%;
}

.contact_us_6 .text-blk.map-contactus-head {
  font-weight: 900;
  font-size: 22px;
  line-height: 32px;
  margin-top: 0px;
  margin-right: 0px;
  margin-bottom: 10px;
  margin-left: 0px;
  color: #03a9f4;
}

.contact_us_6 .text-blk.map-contactus-subhead {
  max-width: 300px;
  margin-top: 0px;
  margin-right: 0px;
  margin-bottom: 20px;
  margin-left: 0px;
}

.contact_us_6 .social-media-links.mob {
  margin-top: 0px;
  margin-right: 0px;
  margin-bottom: 30px;
  margin-left: 0px;
  width: 230px;
  display: flex;
  justify-content: flex-start;
}

.contact_us_6 .link-img {
  width: 30px;
  height: 30px;
  margin-top: 0px;
  margin-right: 25px;
  margin-bottom: 0px;
  margin-left: 0px;
}

.contact_us_6 .link-img.image-block {
  margin-top: 0px;
  margin-right: 0px;
  margin-bottom: 0px;
  margin-left: 0px;
}

.contact_us_6 .social-icon-link {
  margin: 0 25px 0 0;
  padding: 0 0 0 0;
}

@media (max-width: 1024px) {
  .contact_us_6 .responsive-container-block.container {
    justify-content: center;
  }

  .contact_us_6 .map-box {
    position: absolute;
    top: 0px;
    max-height: 320px;
  }

  .contact_us_6 .map-box {
    max-width: 100%;
    width: 100%;
  }

  .contact_us_6 .responsive-container-block.container {
    padding-top: 0px;
    padding-right: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
  }

  .contact_us_6 .map-part {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .contact_us_6 .container-block.form-wrapper {
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
  }

  .contact_us_6 .mob-text {
    display: block;
  }

  .contact_us_6 .form-box {
    margin-top: 200px;
    margin-right: 60px;
    margin-bottom: 40px;
    margin-left: 0px;
  }

  .contact_us_6 .link-img {
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
    display: flex;
    justify-content: space-evenly;
  }

  .contact_us_6 .social-media-links.mob {
    justify-content: space-evenly;
  }

  .contact_us_6 .responsive-cell-block.wk-desk-7.wk-ipadp-12.wk-tab-12.wk-mobile-12 {
    text-align: center;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex-direction: row;
  }

  .contact_us_6 .text-blk.contactus-subhead {
    display: block;
  }

  .contact_us_6 .mob-text {
    text-align: center;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
  }

  .contact_us_6 .responsive-container-block.container {
    flex-wrap: wrap;
  }

  .contact_us_6 .form-box {
    margin-top: 200px;
    margin-right: 0px;
    margin-bottom: 40px;
    margin-left: 0px;
  }
}

@media (max-width: 768px) {
  .contact_us_6 .submit-btn {
    width: 100%;
  }

  .contact_us_6 .input {
    width: 100%;
  }

  .contact_us_6 .textinput {
    width: 100%;
  }

  .contact_us_6 .container-block.form-wrapper {
    margin-top: 80px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
  }

  .contact_us_6 .text-blk.input-title {
    padding-top: 0px;
    padding-right: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
  }

  .contact_us_6 .form-box {
    padding-top: 0px;
    padding-right: 20px;
    padding-bottom: 0px;
    padding-left: 20px;
  }

  .contact_us_6 .container-block.form-wrapper {
    padding-top: 50px;
    padding-right: 15px;
    padding-bottom: 50px;
    padding-left: 15px;
  }

  .contact_us_6 .mob-text {
    display: block;
  }

  .contact_us_6 .responsive-container-block.container {
    padding-top: 0px;
    padding-right: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
  }

  .contact_us_6 .form-box {
    margin-top: 200px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
  }

  .contact_us_6 .container-block.form-wrapper {
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
  }

  .contact_us_6 .form-box {
    margin-top: 220px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
  }

  .contact_us_6 .form-box {
    margin-top: 220px;
    margin-right: 0px;
    margin-bottom: 50px;
    margin-left: 0px;
  }

  .contact_us_6 .text-blk.contactus-head {
    font-size: 32px;
    line-height: 40px;
  }
}

@media (max-width: 500px) {
  .contact_us_6 .container-block.form-wrapper {
    padding-top: 50px;
    padding-right: 15px;
    padding-bottom: 50px;
    padding-left: 15px;
  }

  .contact_us_6 .container-block.form-wrapper {
    margin-top: 60px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
  }

  .contact_us_6 .responsive-cell-block.wk-ipadp-6.wk-tab-12.wk-mobile-12.wk-desk-6 {
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 15px;
    margin-left: 0px;
  }

  .contact_us_6 .responsive-container-block {
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 35px;
    margin-left: 0px;
  }

  .contact_us_6 .text-blk.input-title {
    font-size: 12px;
  }

  .contact_us_6 .text-blk.contactus-head {
    font-size: 26px;
    line-height: 35px;
  }

  .contact_us_6 .input {
    height: 45px;
  }
}
.contact_us_2 * {
  font-family: "Poppins", serif;
}

.contact_us_2 .text-blk {
  margin-top: 0px;
  margin-right: 0px;
  margin-bottom: 0px;
  margin-left: 0px;
  line-height: 25px;
}

.contact_us_2 .responsive-cell-block {
  min-height: 75px;
}

.contact_us_2 input:focus {
  outline-color: initial;
  outline-style: none;
  outline-width: initial;
}

.contact_us_2 .container-block {
  min-height: 75px;
  width: 100%;
  padding-top: 10px;
  padding-right: 10px;
  padding-bottom: 10px;
  padding-left: 10px;
  display: block;
}

.contact_us_2 .submit-btn:hover {
  background-image: initial;
  background-position-x: initial;
  background-position-y: initial;
  background-size: initial;
  background-repeat-x: initial;
  background-repeat-y: initial;
  background-attachment: initial;
  background-origin: initial;
  background-clip: initial;
  background-color: #0381fe;
}

.contact_us_2 .responsive-container-block {
  min-height: 75px;
  height: fit-content;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  margin-top: 0px;
  margin-right: auto;
  margin-left: auto;
  padding-top: 0px;
  padding-right: 0px;
  padding-bottom: 0px;
  padding-left: 0px;
}

.contact_us_2 .responsive-container-block.big-container {
  padding-top: 10px;
  padding-bottom: 10px;
  position: relative;
  height: auto;
}

.contact_us_2 .responsive-container-block.container {
  position: static;
  min-height: 75px;
  flex-direction: column;
  z-index: 2;
  max-width: 800px;
  margin-right: auto;
  margin-bottom: 50px;
  margin-left: auto;
}

.contact_us_2 .container-block.form-wrapper {
  background-color: white;
  max-width: 799px;
  text-align: center;
  padding-top: 50px;
  padding-right: 20px;
  padding-bottom: 50px;
  padding-left: 20px;
  box-shadow: rgba(0, 0, 0, 0.05) 0px 4px 20px 7px;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
  border-bottom-right-radius: 6px;
  border-bottom-left-radius: 6px;
  margin-top: 0px;
  margin-right: auto;
  margin-bottom: 0px;
  margin-left: auto;
}

.contact_us_2 .text-blk.contactus-head {
  font-size: 36px;
  line-height: 50px;
  font-weight: 900;
}

.contact_us_2 .text-blk.contactus-subhead {
  color: #9c9c9c;
  margin-top: 0px;
  margin-right: 0px;
  margin-bottom: 50px;
  margin-left: 0px;
}

.contact_us_2 .responsive-cell-block.wk-desk-6.wk-ipadp-6.wk-tab-12.wk-mobile-12 {
  margin-top: 0px;
  margin-right: 0px;
  margin-bottom: 26px;
  margin-left: 0px;
  min-height: 50px;
}

.contact_us_2 .input {
  width: 96%;
  height: 50px;
  padding-top: 1px;
  padding-right: 15px;
  padding-bottom: 1px;
  padding-left: 15px;
  border-top-width: 2px;
  border-right-width: 2px;
  border-bottom-width: 2px;
  border-left-width: 2px;
  border-top-style: solid;
  border-right-style: solid;
  border-bottom-style: solid;
  border-left-style: solid;
  border-top-color: #eeeeee;
  border-right-color: #eeeeee;
  border-bottom-color: #eeeeee;
  border-left-color: #eeeeee;
  border-image-source: initial;
  border-image-slice: initial;
  border-image-width: initial;
  border-image-outset: initial;
  border-image-repeat: initial;
  font-size: 16px;
  color: black;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
  border-bottom-left-radius: 4px;
}

.contact_us_2 .textinput {
  width: 98%;
  padding-top: 20px;
  padding-right: 15px;
  padding-bottom: 20px;
  padding-left: 15px;
  border-top-width: 2px;
  border-right-width: 2px;
  border-bottom-width: 2px;
  border-left-width: 2px;
  border-top-style: solid;
  border-right-style: solid;
  border-bottom-style: solid;
  border-left-style: solid;
  border-top-color: #eeeeee;
  border-right-color: #eeeeee;
  border-bottom-color: #eeeeee;
  border-left-color: #eeeeee;
  border-image-source: initial;
  border-image-slice: initial;
  border-image-width: initial;
  border-image-outset: initial;
  border-image-repeat: initial;
  font-size: 16px;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
  border-bottom-left-radius: 4px;
}

.contact_us_2 .submit-btn {
  width: 98%;
  background-color: #043d35;
  height: 60px;
  font-family: 'Redressed';
  font-size: 1.5rem;
  font-weight: 700;
  color: white;
  border-top-width: 0px;
  border-right-width: 0px;
  border-bottom-width: 0px;
  border-left-width: 0px;
  border-top-style: outset;
  border-right-style: outset;
  border-bottom-style: outset;
  border-left-style: outset;
  border-top-color: #767676;
  border-right-color: #767676;
  border-bottom-color: #767676;
  border-left-color: #767676;
  border-image-source: initial;
  border-image-slice: initial;
  border-image-width: initial;
  border-image-outset: initial;
  border-image-repeat: initial;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
  border-bottom-left-radius: 4px;
  cursor: pointer;
}

.contact_us_2 .form-box {
  margin-top: 0px;
  margin-right: auto;
  margin-bottom: 0px;
  margin-left: auto;
}

.contact_us_2 .social-media-links {
  width: 250px;
  display: flex;
  justify-content: space-evenly;
  margin-top: 50px;
  margin-right: auto;
  margin-bottom: 0px;
  margin-left: auto;
}

.contact_us_2 .link-img {
  width: 30px;
  height: 30px;
}

.contact_us_2 .text-blk.input-title {
  text-align: left;
  padding-top: 0px;
  padding-right: 0px;
  padding-bottom: 0px;
  padding-left: 10px;
  font-size: 14px;
  margin-top: 0px;
  margin-right: 0px;
  margin-bottom: 5px;
  margin-left: 0px;
  color: #9c9c9c;
  font-family: 'Redressed';
}

.contact_us_2 ::placeholder {
  color: #dadada;
}

.contact_us_2 .blueBG {
  position: absolute;
  width: 100%;
  left: 0px;
  top: 0px;
  height: 300px;
  background-color: #03a9f4;
}

@media (max-width: 768px) {
  .contact_us_2 .submit-btn {
    width: 100%;
  }

  .contact_us_2 .input {
    width: 100%;
  }

  .contact_us_2 .textinput {
    width: 100%;
  }

  .contact_us_2 .container-block.form-wrapper {
    margin-top: 80px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
  }

  .contact_us_2 .text-blk.input-title {
    padding-top: 0px;
    padding-right: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
  }

  .contact_us_2 .responsive-container-block.container {
    margin-top: 80px;
    margin-right: 0px;
    margin-bottom: 50px;
    margin-left: 0px;
  }

  .contact_us_2 .container-block.form-wrapper {
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
  }

  .contact_us_2 .text-blk.contactus-head {
    font-size: 30px;
    line-height: 40px;
  }
}

@media (max-width: 500px) {
  .contact_us_2 .container-block.form-wrapper {
    padding-top: 50px;
    padding-right: 15px;
    padding-bottom: 50px;
    padding-left: 15px;
  }

  .contact_us_2 .container-block.form-wrapper {
    margin-top: 60px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
  }

  .contact_us_2 .responsive-cell-block.wk-ipadp-6.wk-tab-12.wk-mobile-12.wk-desk-6 {
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 15px;
    margin-left: 0px;
  }

  .contact_us_2 .responsive-container-block {
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 35px;
    margin-left: 0px;
  }

  .contact_us_2 .text-blk.input-title {
    font-size: 12px;
  }

  .contact_us_2 .responsive-container-block.container {
    margin-top: 50px;
    margin-right: 0px;
    margin-bottom: 50px;
    margin-left: 0px;
  }

  .contact_us_2 .container-block.form-wrapper {
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
  }

  .contact_us_2 .responsive-container-block.big-container {
    padding-top: 10px;
    padding-right: 20px;
    padding-bottom: 10px;
    padding-left: 20px;
  }

  .contact_us_2 .text-blk.contactus-head {
    font-size: 26px;
    line-height: 34px;
  }

  .contact_us_2 .input {
    height: 45px;
  }
}
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@200;300;400;600;700;800&amp;display=swap');

*,
*:before,
*:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

body {
      margin: 0;
      background: url(img/bg.jpg);
      background-size: cover;
}

.wk-desk-1 {
  width: 8.333333%;
}

.wk-desk-2 {
  width: 16.666667%;
}

.wk-desk-3 {
  width: 25%;
}

.wk-desk-4 {
  width: 33.333333%;
}

.wk-desk-5 {
  width: 41.666667%;
}

.wk-desk-6 {
  width: 50%;
}

.wk-desk-7 {
  width: 58.333333%;
}

.wk-desk-8 {
  width: 66.666667%;
}

.wk-desk-9 {
  width: 75%;
}

.wk-desk-10 {
  width: 83.333333%;
}

.wk-desk-11 {
  width: 91.666667%;
}

.wk-desk-12 {
  width: 100%;
}

@media (max-width: 1024px) {
  .wk-ipadp-1 {
    width: 8.333333%;
  }

  .wk-ipadp-2 {
    width: 16.666667%;
  }

  .wk-ipadp-3 {
    width: 25%;
  }

  .wk-ipadp-4 {
    width: 33.333333%;
  }

  .wk-ipadp-5 {
    width: 41.666667%;
  }

  .wk-ipadp-6 {
    width: 50%;
  }

  .wk-ipadp-7 {
    width: 58.333333%;
  }

  .wk-ipadp-8 {
    width: 66.666667%;
  }

  .wk-ipadp-9 {
    width: 75%;
  }

  .wk-ipadp-10 {
    width: 83.333333%;
  }

  .wk-ipadp-11 {
    width: 91.666667%;
  }

  .wk-ipadp-12 {
    width: 100%;
  }
}

@media (max-width: 768px) {
  .wk-tab-1 {
    width: 8.333333%;
  }

  .wk-tab-2 {
    width: 16.666667%;
  }

  .wk-tab-3 {
    width: 25%;
  }

  .wk-tab-4 {
    width: 33.333333%;
  }

  .wk-tab-5 {
    width: 41.666667%;
  }

  .wk-tab-6 {
    width: 50%;
  }

  .wk-tab-7 {
    width: 58.333333%;
  }

  .wk-tab-8 {
    width: 66.666667%;
  }

  .wk-tab-9 {
    width: 75%;
  }

  .wk-tab-10 {
    width: 83.333333%;
  }

  .wk-tab-11 {
    width: 91.666667%;
  }

  .wk-tab-12 {
    width: 100%;
  }
}

@media (max-width: 500px) {
  .wk-mobile-1 {
    width: 8.333333%;
  }

  .wk-mobile-2 {
    width: 16.666667%;
  }

  .wk-mobile-3 {
    width: 25%;
  }

  .wk-mobile-4 {
    width: 33.333333%;
  }

  .wk-mobile-5 {
    width: 41.666667%;
  }

  .wk-mobile-6 {
    width: 50%;
  }

  .wk-mobile-7 {
    width: 58.333333%;
  }

  .wk-mobile-8 {
    width: 66.666667%;
  }

  .wk-mobile-9 {
    width: 75%;
  }

  .wk-mobile-10 {
    width: 83.333333%;
  }

  .wk-mobile-11 {
    width: 91.666667%;
  }

  .wk-mobile-12 {
    width: 100%;
  }
}

 

        .about_container {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            position: relative;
            margin-top: 15%;
            margin-bottom: 10%;
        }
        .about{
          margin-top: 15%;

                  }

        /* Image Column */
        .image-column {
            width: 50%;
            position: relative;
            z-index: 1; /* Ensures the image stays behind content */
        }

        .image-column img {
            width: 100%;
            height: auto;
        }

        /* Content Column */
        .about-column {
            position: absolute;
            width: 49%;
            top: 15%; /* Adjust this to control the overlap distance */
            left: 50%; /* Adjust this to control how much the content column overlaps */
            padding: 20px;
            background-color: rgba(255, 255, 255, 0.8); /* Semi-transparent background for visibility */
            z-index: 2; /* Ensures content stays on top */
        }

        .about-column h2 {
            font-size: 2rem;
            margin-bottom: 20px;
        }

        .about-column p {
            font-size: 1rem;
            line-height: 1.6;
                text-align: justify;
        }
h4#mobile-tagline{
  display: none;
}
        /* Responsive Styles */
        @media (max-width: 768px) {
            .about_container {
                flex-direction: column;
                text-align: center;
            }

            .about-column {
                position: relative;
                top: 0;
                left: 0;
                width: 100%;
                background-color: rgba(255, 255, 255, 0.9); /* Solid background for mobile */
            }

            .image-column {
                width: 100%;
            }
        }

 /* Responsive Styles */
        @media (max-width: 1024px) {
            .about_container {
                flex-direction: column;
                text-align: center;
            }
            .flex-about-mission{
    opacity: 1!important;
  }

            .about-column {
                position: relative;
                top: 0;
                left: 0;
                width: 100%;
                background-color: rgba(255, 255, 255, 0.9); /* Solid background for mobile */
            }

            .image-column {
                width: 100%;
            }
                .flex-container-mission {
        flex-direction: column!important;
         
    }
        }








 .gallery_container {
            max-width: 1200px;
            width: 100%;
            margin: auto;
        }

        .gallery {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
            gap: 15px;
            margin-bottom: 15%;
            margin-top: 20%;
        }

        .gallery-img {
            width: 100%;
            height: auto;
            height: 200px;
            cursor: pointer;
            transition: transform 0.3s ease, opacity 0.3s ease;
            border-radius: 0px 50px 0px 50px;
        }

        .gallery-img:hover {
            transform: scale(1.05);
            opacity: 0.8;
        }

        .lightbox {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.8);
            display: none;
            align-items: center;
            justify-content: center;
            z-index: 1000;
        }

        .lightbox-content {
            max-width: 90%;
            max-height: 90%;
            object-fit: contain;
        }

        .close {
            position: absolute;
            top: 20px;
            right: 20px;
            color: white;
            font-size: 30px;
            cursor: pointer;
            font-weight: bold;
        }

        .arrow {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            background-color: rgba(0, 0, 0, 0.5);
            color: white;
            font-size: 30px;
            padding: 10px;
            cursor: pointer;
            z-index: 10;
        }

        .arrow-left {
            left: 10px;
        }

        .arrow-right {
            right: 10px;
        }

        @media (max-width: 600px) {
            .gallery {
                grid-template-columns: 1fr;
            }
        }



.amenities-section {
            text-align: center; 
            }
        .amenities-section h2 {
            font-weight: bold;
            margin-bottom: 10px;
        }
        .amenities-section p {
            margin-bottom: 30px;
        }
        .amenities-grid {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 20px;
        }
        .amenity {
            display: flex;
            align-items: center;
            gap: 10px;
            background: #f3c97f;
            padding: 10px 15px;
            border-radius: 8px;
        }
        .amenity i {
            font-size: 18px;
            color: #333;
        }
        @media (max-width: 600px) {
            .amenities-grid {
                flex-direction: column;
                align-items: center;
            }
        }



        /* Section styles */
    .services {
      text-align: center;
      padding-bottom: 10%;
      margin: 40px auto;
      max-width: 1200px;
    }

    .services h2 {
      font-size: 2.5rem;
      margin-bottom: 30px;
      color: #333;
    }

    .service-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr); /* 4 columns in a row */
      gap: 20px;
    }

    .service-item {
      padding: 30px;
      border-radius: 20px 0px; 
      text-align: center;
      transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

    .service-item:hover {
      transform: translateY(-10px);
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
      background: #dfd4ce69;
    }

    .service-icon {
      font-size: 2rem;
      color: #ff6347;
      margin-bottom: 15px;
    }

    .service-item h3 {
      font-size: 1.5rem;
      color: #333;
      margin-bottom: 10px;
      margin-top: 15px;
    }

    .service-item p {
      font-size: 1rem;
      color: #383535;
      text-align: center;
      word-break: break-word;
    }

      .card-container {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 10px;
            max-width: 1000px;
        }

        .card {
            background: white;
            width: 300px;
            border-radius: 0px 50px;
            box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
            overflow: hidden;
            text-align: center;
            padding-bottom: 20px;
        }

        .card img {
            width: 100%;
            height: 200px;
            object-fit: cover;
        }

        .card-content {
            padding: 15px;
        }

        .card h3 {
            font-size: 18px;
            margin-bottom: 10px;
            color: black;
            text-align: center;
        }

        .card p {
            font-size: 1rem;
            color: #383535;
            text-align: left;
        }

        /* "READ MORE" button outside cards */
        .read-more-container {
            text-align: center;
            margin-top: 20px;
        }

        .read-more-btn {
            display: inline-block;
            padding: 10px 20px;
            font-size: 16px;
            font-weight: bold;
            color: white;
            background: #14604b;
            text-decoration: none;
            border-radius: 8px;
            transition: 0.3s ease;
        }

        .read-more-btn:hover {
            background: #555;
        }

        /* Responsive Design */
        @media (max-width: 768px) {
            .card {
                width: 90%;
            }
        }

    /* Media Queries */
    @media (max-width: 1024px) {
      .service-grid {
        grid-template-columns: repeat(2, 1fr)!important; /* 2 columns in a row for medium screens */
      }
      .service-item{
        width: 300px!important;
      }
      
    }

    @media (max-width: 768px) {
      .service-grid {
        grid-template-columns: 1fr; /* 1 column in a row for smaller screens */
      }

      
    }

/*    =========footer================*/

footer {
            background: linear-gradient(to right, #306949, #376c48, #eeab2e);
            color: white;
            padding: 40px 10%;
            border-radius: 00px 50px 0px 0px;
        }

        .footer-container {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            background-color: #043d353b;
            padding: 20px;
           }

        .footer-section {
            flex: 1;
            min-width: 200px;
            text-align: center;
             }

        .footer-section h3 {
           margin-bottom: 15px;
        }

        .footer-section p, .footer-section a {
            font-size: 1rem;
            color: #ccc;
            text-decoration: none;
            line-height: 1.6;
        }

        .footer-section a:hover {
            color: white;
        }

        .newsletter {
            display: flex;
            align-items: center;
            gap: 10px;
            border-bottom: 2px solid #ccc;
            padding-bottom: 5px;
        }

        .newsletter input {
            flex: 1;
            background: none;
            border: none;
            outline: none;
            color: white;
            font-size: 14px;
        }

        .newsletter button {
            background: none;
            border: none;
            color: white;
            cursor: pointer;
        }

        .social-icons {
            margin-top: 15px;
        }

        .social-icons a {
            display: inline-block;
            width: 30px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            background: rgba(255, 255, 255, 0.2);
            border-radius: 50%;
            margin-right: 10px;
            color: white;
            transition: 0.3s;
        }

        .social-icons a:hover {
            background: white;
            color: black;
        }

        .footer-bottom {
            text-align: center;
            padding-top: 30px;
            font-size: 14px;
            border-top: 1px solid #444;
        }

        /* Responsive Design */
        @media (max-width: 768px) {
            .footer-container {
                flex-direction: column;
                align-items: center;
                text-align: center;
            }

            .newsletter {
                justify-content: center;
            }
        }




         section, .container, .accordion-container, .our_services, .gallery-container, .testimonial-section {
/*            opacity: 0;*/
            transform: translateY(50px);
            transition: opacity 0.8s ease-out, transform 0.8s ease-out;
        }

        /* When in viewport, apply animation */
        .show {
            opacity: 1 !important;
            transform: translateY(0) !important;
        }


        .flex-container-mission {
            display: flex;
            flex-direction: row;
            height: 65vh;
            overflow: hidden;
        }

        @media screen and (max-width: 768px) {
            .flex-container-mission {
                flex-direction: column;
                height: auto;
            }
        }

        .flex-slide-mission {
            flex: 1;
            display: flex;
            align-items: center;
/*            justify-content: center;*/
            flex-direction: column;
            text-align: center;
            cursor: pointer;
            position: relative;
            transition: flex 0.5s ease-in-out;
        }

        .flex-slide-mission:hover {
            flex: 3;
        }

        .flex-title-mission {
            font-size: 2rem;
            transition: all 0.5s ease;
            color: white;
            background: linear-gradient(45deg, #00000087, #000000b8);
            padding: 0px 20px;
        }

        .flex-about-mission {
              color: white;
            opacity: 0;
            width: 90%;
            font-size: 1.2vw;
            padding: 5%;
            border: 2px solid #fff;
            border-radius: 10px;
            transition: opacity 0.5s ease-in-out;
            position: absolute;
            bottom: 10%;
            background: rgba(0, 0, 0, 0.6);
            text-align: left;
        }
        img.service_img {
            width: 300px;
            border-radius: 10px 50px;
        }

        @media screen and (max-width: 768px) {
            .flex-about-mission {
                width: 90%;
                font-size: 2vw;
                position: static;
                opacity: 1;
                margin: 10px;
                border: none;
                background: #292525ab;
            }
        }

        /* Show paragraph on hover */
        .flex-slide-mission:hover .flex-about-mission {
            opacity: 1;
        }

        /* Background Images */
        .home-mission {
            background: linear-gradient(rgb(0 0 0 / 15%), rgb(0 0 0 / 20%)), url('img/vision.jpg');
            background-size: cover;
            background-position: center;
        }

        .about-mission {
            background: linear-gradient(rgb(0 0 0 / 15%), rgb(0 0 0 / 20%)), url('img/banner.jpg');
            background-size: cover;
            background-position: center;
        }

        .work-mission {
            background: linear-gradient(rgb(0 0 0 / 15%), rgb(0 0 0 / 20%)), url('img/coc.jpg');
            background-size: cover;
            background-position: center;
        }
/*

         @media (max-width: 600px) {
            #btns {
                display: grid;
            }
            
        }*/

        .fa-circle:before {
    content: "\f111" !important;
    font-size: 10px !important;
    margin-right: 10px !important;
}

.container#pkg {
            width: 90%;
            max-width: 1200px;
            background: none;
            border-radius: 15px;
            padding: 20px;
            display: flex;
            flex-direction: column;
            gap: 40px;
            box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.2);
            margin-top: 12%;
                margin-bottom: 15%;
        }
        .section {
            display: flex;
            align-items: center;
            justify-content: space-between;
            position: relative;
        }
        .section:nth-child(odd) {
            flex-direction: row-reverse;
        }
        .text-box {
            width: 45%;
            text-align: left;
        }
        .text-box h3 {
            font-size: 18px;
            color: #444;
            margin-bottom: 5px;
        }
        .text-box h2 {
            font-size: 28px;
            margin-bottom: 10px;
            color: #332d2d;
        }
        .text-box p {
            font-size: 1rem;
            color: #555;
            padding: 10px;
            margin-bottom: 15px;
            text-align: justify;
        }
        img#icon_img {
            width: 8%;
            margin-right: 20px;
            margin-bottom: 8%;
        }
        .btn {
            background-color: #306949;
            color: white;
            padding: 10px 10px;
            text-decoration: none;
            border-radius: 5px;
            display: inline-block;
            box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.3);
            font-family: 'Redressed';
            font-size: 1rem;
            line-height: 1.2;
        }
        .img-box {
            width: 50%;
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .main-img {
            width: 100%;
            border-radius: 50px 0px 50px 0px;
            box-shadow: 10px 10px 30px rgba(0, 0, 0, 0.3);
        }
        .overlay-image {
            position: absolute;
            bottom: -20px;
            left: -20px;
            width: 55%;
            border-radius: 0px 50px 0px 50px;
            border: 5px solid white;
            box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.4);
        }
        @media (max-width: 768px) {
            .section {
                flex-direction: column;
                align-items: center;
                text-align: center;
            }
            .section:nth-child(odd) {
                flex-direction: column;
            }
            .text-box, .image-box {
                width: 100%;
            }
            .overlay-image {
                width: 60%;
                left: 0;
                bottom: -15px;
            }
        }

  .popup {
            display: none;
            z-index: 1;
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: white;
            padding: 40px;
            border-radius: 10px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
            width: 90%;
            
        }
        .close-btn {
            background: red;
            color: white;
            border: none;
            padding: 5px 10px;
            cursor: pointer;
            float: right;
        }
        .form-group {
            text-align: left;
        }
        .form-group label {
            display: block;
            color: black;
        }
        .form-group input, .form-group textarea {
            width: 100%;
            padding: 8px;
            border: 1px solid #ccc;
            border-radius: 5px;
            font-size: 1rem;
            font-family: 'Redressed';
        }
        .flatpickr-input {
            background-color: #f9f9f9;
            cursor: pointer;
        }
        .submit-btn {
            background: #043d35;
            color: white;
            border: none;
            padding: 10px;
            width: 100%;
            cursor: pointer;
            border-radius: 5px;
            font-family: 'Redressed';
            font-size: 1.5rem;
        }
        .overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
        }
        .success-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5); /* Dark semi-transparent background */
        z-index: 999;
    }

    /* Success popup styling */
    .success-popup {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background: white;
        padding: 20px;
        box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
        border-radius: 8px;
        text-align: center;
        z-index: 1000;
    }
    .popup-content h2 {
        margin-bottom: 10px;
    }
    .popup-content button {
        background: #043d35;
        color: white;
        border: none;
        padding: 8px 16px;
        cursor: pointer;
        border-radius: 5px;
        margin-top: 10px;
    }

select#roomType {
    width: 100%;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-family: 'Redressed';
    font-size: 1rem;
    color: #787368;
}

.contact-container {
            display: flex;
            justify-content: center;
            align-items: flex-start;
            flex-wrap: wrap;
            max-width: 1100px;
            margin: 50px auto;
            padding: 20px;
             border-radius: 8px;
            box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
            margin-top: 15% !important;
        }

        /* Contact Form Styling */
        .contact-form {
            flex: 1;
            max-width: 50%;
            padding: 20px;
        }

        .contact-form h2 {
            color: #333;
        }

        .contact-form label {
            display: block;
            font-weight: bold;
            margin-top: 10px;
        }

        .contact-form input,
        .contact-form select,
        .contact-form textarea {
            width: 100%;
            padding: 10px;
            margin-top: 5px;
            border: 1px solid #ccc;
            border-radius: 5px;
            font-family: 'Redressed';
            font-size: 1rem;
        }

        .contact-form button {
            width: 100%;
            padding: 10px;
            margin-top: 15px;
            background-color: #306949;
            border: none;
            color: white;
            font-size: 1rem;
    border-radius: 5px;
    cursor: pointer;
    font-family: 'Redressed';
        }

        .contact-form button:hover {
            background-color: #e67636;
        }

        /* Contact Details Styling */
        .contact-details {
            flex: 1;
            max-width: 40%;
            padding: 20px;
            background-color: #f5b02e;
            color: white;
            border-radius: 8px;
            margin-top: 8%;
        }

        .contact-details h2 {
            margin-top: 0;
        }

        .contact-details p {
            margin: 10px 0;
        }

        /* Responsive Design */
        @media (max-width: 768px) {
            .contact-container {
                flex-direction: column;
                align-items: center;
            }
            
            .contact-form, .contact-details {
                max-width: 100%;
            }
        }
        #number{
          font-size: 1rem;
        }

        table {
            width: 100%;
            border-collapse: collapse;
            overflow: hidden; 
            display: block;
            overflow-x: auto;
            white-space: nowrap
        }
        td#full_form{
          text-align: left;
        }

        th, td {
            padding: 15px;
            text-align: center;
        }

        th {
            background: #4a2c2a;
            color: white;
            font-size: 1rem;
        }

        td {
            background: rgba(255, 255, 255, 0.9);
            font-weight: 500;
            color: #333;
            font-size: 14px;
            transition: 0.3s ease-in-out;
        }

        /* Hover Effects */
        tr:hover td {
            background: rgb(237 216 135);
            transform: scale(1.02);
        }

        /* Footnotes Styling */
        .footnotes {
            text-align: left;
            font-size: 1rem;
            margin-top: 20px;
            padding: 15px;
            background: rgb(248 245 243);
            border-radius: 8px;
            line-height: 1.6;
            color: #333;
        }

        .footnotes strong {
            color: #4a2c2a;
        }

        /* Responsive Design */
        
        @media (max-width: 768px) {
            table {
                font-size: 12px;
                display: block;
                overflow-x: auto;
                white-space: nowrap
            }
            th, td {
                padding: 10px;
            }
            h2 {
                font-size: 20px;
            }
            .about {
                margin-top: 35%;
            }

        }

        /* Fade-in Animation */
        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(-10px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        td#head {
    font-size: 1rem;
    text-align: left;
}

.sldr {
            position: relative;
            width: 50%;
            margin: auto;
            overflow: hidden;
            border-radius: 15px;
        }
        .slds {
            display: flex;
            transition: transform 0.5s ease-in-out;
        }
        .slds img {
            width: 100%;
            border-radius: 15px;
        }
        .prev, .next {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            background-color: rgba(0, 0, 0, 0.5);
            color: white;
            border: none;
            padding: 5px;
            cursor: pointer;
            border-radius: 5px;
        }
        .prev { left: 5px; }
        .next { right: 5px; }

 .description h2, .description h3 {
            color: #2e2a29;
        }
        .description p {
            margin: 10px 0;
        }
        .pricing-table {
            width: 100%;
            border-collapse: collapse;
            background: #f3cbc2;
            margin-top: 20px;
        }
        .pricing-table th, .pricing-table td {
            padding: 15px;
            border: 1px solid #fff;
            text-align: center;
            font-size: 1rem;
        }
        .pricing-table th {
            background: #2e2a29;
            color: white;
        }
        .pricing-table td {
            background: #f8e6e1;
        }
        .pricing-table tr:nth-child(even) td {
            background: #eedabe;
        }
        .pricing-table td:first-child {
            font-size: 1rem;
        }
        .pricing-table-container {
            display: flex;
            justify-content: center;
            gap: 20px;
            flex-wrap: wrap;
        }
        .pricing-column {
            flex: 1;
            min-width: 300px;
        }
        .wellness-packages {
            display: flex;
            justify-content: space-between;
            gap: 20px;
            flex-wrap: wrap;
            margin-top: 20px;
        }
        .package-box {
            flex: 1;
            min-width: 300px;
            background: #f3cbc2;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            text-align: center;
        }
        .package-box h4 {
            color: #2e2a29;
        }
         
        @media (max-width: 768px) {
            .wellness-packages {
                flex-direction: column;
                align-items: center;
            }
        }
         
        @media (max-width: 768px) {
            .pricing-table-container {
                flex-direction: column;
                align-items: center;
            }
        }
        .description h2, .description h3 {
            color: #2e2a29;
        }
        .description p {
            margin: 10px 0;
        }
        .treatment-boxes {
            display: flex;
            justify-content: space-between;
            gap: 20px;
            flex-wrap: wrap;
            margin-top: 20px;
        }
        .treatment-box {
            flex: 1;
            min-width: 300px;
            background: #eedabe;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            text-align: center;
        }
        .treatment-box h4 {
            color: #2e2a29;
        }
        .pricing-table-container {
            display: flex;
            justify-content: center;
            gap: 20px;
            flex-wrap: wrap;
        }
        .pricing-column {
            flex: 1;
            min-width: 300px;
        }
        .wellness-packages {
            display: flex;
            justify-content: space-between;
            gap: 20px;
            flex-wrap: wrap;
            margin-top: 20px;
        }
        .package-box {
            flex: 1;
            min-width: 300px;
            background: #eedabe;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            text-align: center;
        }
        .package-box h4 {
            color: #2e2a29;
        }
         
        @media (max-width: 768px) {
            .treatment-boxes, .wellness-packages {
                flex-direction: column;
                align-items: center;
            }
        }
        .accrdn-details h2, .accrdn-details h3 {
            color: #2e2a29;
        }
        .accrdn-details p {
            margin: 10px 0;
        }
        .accrdn {
            width: 100%;
        }
        .accrdn-item {
            background: #f3cbc2;
            margin-bottom: 10px;
            border-radius: 5px;
            overflow: hidden;
        }
        .accrdn-header {
            padding: 15px;
            background: #306949;
            color: white;
            cursor: pointer;
            font-weight: bold;
        }
        .accrdn-content {
            padding: 15px;
            display: none;
            background: #f8e6e1;
        }
        .accrdn-header:hover {
            background: #1c7e63;
        }
        .highlight-box {
            background: #eedabe;
            padding: 20px;
            border-radius: 10px;
            text-align: center;
            margin-top: 20px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }
        .highlight-box h3 {
            color: #2e2a29;
        }
        .container-section 
          {
            max-width: 1200px;
            margin: 20px auto;
            background: #ffeee445;
            padding: 20px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }





        .service-grid {
/*    display: flex;*/
    flex-wrap: wrap;
     gap: 20px;
}

.service-item {
    width: 350px;
    padding: 15px;
    border-radius: 10px;
    text-align: center; 
}
 
.swiper {
    width: 100%;
    height: 200px;
    position: relative;
}

.swiper-slide img {
    width: 100%;
    height: 200px;
    object-fit: cover;
     
}
.swiper-button-next,
.swiper-button-prev {
    color: #fff;
    background: rgba(0, 0, 0, 0.7); /* Darker for better visibility */
    padding: 8px; /* Smaller size */
    border-radius: 50%;
    font-size: 14px; /* Reduce icon size */
    transition: background 0.3s ease-in-out, transform 0.2s ease;
}

.swiper-button-next:hover,
.swiper-button-prev:hover {
    background: rgba(255, 165, 0, 0.9); /* Highlight on hover (orange tone) */
    transform: scale(1.1); /* Slight zoom effect */
}

.swiper-button-next:after, .swiper-button-prev:after {
    font-family: swiper-icons;
    font-size: 10px !important;
  }
  .swiper-button-next, .swiper-button-prev{
    color: white !important;
  }
  .swiper-button-next:hover, .swiper-button-prev:hover {
    background: #000000 !important;
  }






  .overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1000;
}

.popup {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: white;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
    z-index: 1001;
    text-align: center;
}

.price-table {
    width: 100%;
    border-collapse: collapse;
}

.price-table th, .price-table td {
    border: 1px solid #ddd;
    padding: 10px;
    text-align: center;
}

.close-btn {
    background: none;
    border: none;
    font-size: 20px;
    cursor: pointer;
    float: right;
}

#pricePopup{
  top:30%!important;
}

 @keyframes slideInLeft {
            from {
                transform: translateX(-100%);
                opacity: 0;
            }
            to {
                transform: translateX(0);
                opacity: 1;
            }
        }

        /* Animation for right slide-in (Content) */
        @keyframes slideInRight {
            from {
                transform: translateX(100%);
                opacity: 0;
            }
            to {
                transform: translateX(0);
                opacity: 1;
            }
        }
 
         .image-column img {
           animation: slideInLeft 1s ease-in-out;
        }
        .about-column {
            animation: slideInRight 1s ease-in-out;
        }
         .sldr {
           animation: slideInLeft 1s ease-in-out;
        }
        .text-box {
            animation: slideInRight 1s ease-in-out;
        }
         .service-item {
        opacity: 0;
        transform: translateY(50px);
        transition: opacity 0.8s ease-out, transform 0.8s ease-out;
    }
    .gallery {
        opacity: 0;
        transform: translateY(50px);
        transition: opacity 0.8s ease-out, transform 0.8s ease-out;
    }
.contact-form{
        opacity: 0;
        transform: translateY(50px);
        transition: opacity 0.8s ease-out, transform 0.8s ease-out;
    }
    .description{
        opacity: 0;
        transform: translateY(50px);
        transition: opacity 0.8s ease-out, transform 0.8s ease-out;
    }
    .service-item.show {
        opacity: 1;
        transform: translateY(0);
    }
     .gallery.show {
        opacity: 1;
        transform: translateY(0);
    }
     .contact-form.show{
        opacity: 1;
        transform: translateY(0);
    }
     .description.show{
        opacity: 1;
        transform: translateY(0);
    }
/* Popup (Initially Hidden) */
.popup1 {
    display: none; /* Hide initially */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

/* Popup Content Box */
.popup1-content {
    background: white;
    padding: 20px;
    
    max-height: 80vh;
    overflow-y: auto;
    border-radius: 10px;
    position: relative;
    text-align: center;
    box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.3);
}

/* Close Button - Fixed Position */
.close-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    cursor: pointer;
    color: #333;
    background: white;
    border-radius: 50%;
    width: 35px;
    z-index: 1;
    line-height: 35px;
    text-align: center;
    box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.2);
}

/* Close Button Hover Effect */
.close-btn:hover {
    background: #f44336;
    color: white;
}

/* Ensure it looks good on small screens */
@media (max-width: 600px) {
    .popup1-content {
        width: 95%;
        padding: 15px;
    }

    .close-btn {
        top: 5px;
        right: 5px;
        width: 30px;
        height: 30px;
        line-height: 30px;
        font-size: 20px;
    }
}
#open-spa{
  cursor: pointer;
}

.container-img {
            display: flex;
            width: 90%;
            max-width: 1200px;
            background: white;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
            border-radius: 10px;
            overflow: hidden;
        }
 
        .sidebar ul {
            list-style: none;
        }

        .sidebar ul li {
            padding: 15px;
            background: #f4f4f4;
            margin-bottom: 5px;
            cursor: pointer;
            transition: 0.3s;
            text-align: center;
        }

        .sidebar ul li.active,
        .sidebar ul li:hover {
            background: #d9a31b;
            color: white;
        }

        .content {
            flex: 1;
        }

        .content h2 {
            color: white;
            border-bottom: 2px solid white;
            padding-bottom: 5px;
        }

        .content p {
            margin: 15px 0;
            line-height: 1.6;
        }

        .imgs {
            display: flex;
            gap: 10px;
            margin-top: 20px;
        }

        .imgs img {
            width: 100%;
            max-width: 200px;
            border-radius: 10px;
            transition: transform 0.3s ease-in-out;
        }

        .imgs img:hover {
            transform: scale(1.1);s
        }

        @media (max-width: 768px) {
            .container-img {
                flex-direction: column;
            }

            .sidebar {
                width: 100%;
                text-align: center;
            }
        }
       .container-img {
            display: flex;
            background: white;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
            border-radius: 10px;
            overflow: hidden;
            margin: 10%;
            margin-top: 15%;
        }

        .sidebar {
            width: 250px;
            background: #14604b;
            padding: 20px;
        }

        .sidebar ul {
            list-style: none;
        }

        .sidebar ul li {
          border-radius: 10px;
            padding: 15px;
            background: linear-gradient(356deg, #fff4f4, #d1de87);
            margin-bottom: 5px;
            cursor: pointer;
            transition: 0.3s;
            text-align: center;
        }

        .sidebar ul li.active,
        .sidebar ul li:hover {
            background: linear-gradient(42deg, #eacb82, #79e662);
            color: black;
        }

        .content {
            flex: 1;
        }

        .content h2 {
            color: white;
            border-bottom: 2px solid white;
            padding-bottom: 5px;
        }
        .contents h2 {
            border-bottom: 2px solid #d9a31b;
            padding-bottom: 5px;
        }

        .content p {
            margin: 15px 0;
            line-height: 1.6;
            text-align: center;
        }

        .imgs {
            display: flex;
            gap: 10px;
            margin-top: 20px;
        }

        .imgs img {
            width: 300px;
            height: 200px;
            max-width: 300px;
            border-radius: 10px;
            transition: transform 0.3s ease-in-out;
        }

        .imgs img:hover {
            transform: scale(1.1);s
        }

        @media (max-width: 768px) {
            .container-img {
                flex-direction: column;
                margin-top: 25% !important;
                margin: 5%;
            }

            .sidebar {
                width: 100%;
                text-align: center;
            }
        }
        div#contentArea {
            margin: 2%;
        }
        img.gallery-image {
            width: 300px;
            height: 200px;
            border-radius: 0px 20px;
        }
         img#activities {
            width: 300px;
             height: 100%;
        }
        .tabs 
          { 
            display: flex;
           border-bottom: 2px solid #ccc; 
           margin-bottom: 20px; 
           margin-top: 20%!important;
           margin: 10%;
           gap: 20px;
           margin-bottom: 0% ! Important;
         }
        .tab 
        { 

          padding: 10px 20px; 
          cursor: pointer; 
          border: 1px solid #ccc; 
          
        }
        .tab.active 
        { 
          background-color: #f0f0f0;
           font-weight: bold; 
         }
        .tab-content
         { 
          display: none;
          margin: 5%;
          margin-top: 0%!important;
           }
        .tab-content.active { 
          display: block; 
        }
        .gallery { 
          opacity: 0; 
          transition: opacity 0.5s ease-in-out;
           }
        .gallery.show { 
          opacity: 1;
           }
        #lightbox { 
          display: none; 
          position: fixed;
         z-index: 200;
           top: 0;
           left: 0; 
           width: 100%; 
           height: 100%; 
           background: rgba(0, 0, 0, 0.8); 
           align-items: center;
            justify-content: center; 
          }
        #lightbox img { 
          max-width: 80%;
           max-height: 80%;
            }
        .controls { 
          position: absolute;
           top: 50%; 
           transform: translateY(-50%); 
           color: white;
            font-size: 2rem;
             cursor: pointer; 
           }
        #prev-btn { 
          left: 20px; 
        }
        #next-btn {
         right: 20px;
          }
        #close-btn { 
          top: 20px; 
          right: 20px;
          position: absolute;
          font-size: 2rem;
          cursor: pointer;
          color: white;
           }
            @media (max-width: 600px) {
            .tabs { 
              flex-direction: column; 
              margin-top: 30% ! Important;
            }
            .tb-container {
/*            width: 100%!important;*/
            margin-top: 30% ! Important;
          }
.service-grid {
        grid-template-columns: repeat(1, 1fr)!important; /* 2 columns in a row for medium screens */
      }
      .service-item{
        width: 300px!important;
      }

            .tab { 
              flex: 1 1 100%; 
            }
            .tab-content img { 
              width: 100%; max-width: 300px;
               }
        }

        .tb-container {
            width: auto;
            margin: auto;
            margin-top: 15%;
/*            background: white;*/
            padding: 20px;
            border-radius: 8px;
/*            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);*/
        }
        .tb-wrapper {
            display: flex;
            border-bottom: 2px solid #ddd;
        }
        .tb {
            display: inline-block;
            cursor: pointer;
            padding: 10px 20px;
            background: #ddd;
            margin-right: 5px;
            border-radius: 5px 5px 0 0;
            flex: 1;
            text-align: center;
        }
        .tb.active {
            background: #ffa64b;
            color: white;
        }
        .tb-content {
            display: none;
/*            padding: 20px;*/
/*            background: white;*/
            border-radius: 0 0 5px 5px;
        }
        .tb-content.active {
            display: block;
        }





.slider {
  width: 100vw;
  height: 100vh;
  display: flex;
  perspective: 1000px;
  transform-style: preserve-3d;
}
.slider::before, .slider::after {
  content: '';
  left: -1vw;
  top: -1vh;
  display: block;
  position: absolute;
  width: 102vw;
/*  height: 102vh;*/
  background-position: center;
  background-size: cover;
  will-change: opacity;
  z-index: -1;
  box-shadow: 0 0 0 50vmax rgba(0, 0, 0, 0.7) inset;
}
.slider::before {
  background-image: var(--img-prev);
}
.slider::after {
  transition: opacity 0.7s;
  opacity: 0;
  background-image: var(--img-next);
}
.slider--bg-next::after {
  opacity: 1;
}
.slider__content {
  margin: auto;
  width: 65vw;
  height: 32.5vw;
  max-height: 60vh;
  will-change: transform;
  transform-style: preserve-3d;
  pointer-events: none;
  transform: translateZ(var(--z-distance));
}
.slider__images {
  overflow: hidden;
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 0;
  box-shadow: 0 0 5em #000;
}
.slider__images-item {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  will-change: transform;
  transition-timing-function: ease-in;
  visibility: hidden;
}
.slider__images-item img {
  display: block;
  position: relative;
  left: -1em;
  top: -1em;
  width: calc(100% + 1em * 2);
  height: calc(100% + 1em * 2);
  object-fit: cover;
  will-change: transform;
}
.slider__images-item--active {
  z-index: 20;
  visibility: visible;
}
.slider__images-item--subactive {
  z-index: 15;
  visibility: visible;
}
.slider__images-item--next {
  transform: translateX(100%);
}
.slider__images-item--prev {
  transform: translateX(-100%);
}
.slider__images-item--transit {
  transition: transform 0.7s, opacity 0.7s;
}
.slider__text {
  position: relative;
  height: 100%;
}
.slider__text-item {
  position: absolute;
  width: 100%;
  height: 100%;
  padding: 0.5em;
  perspective: 1000px;
  transform-style: preserve-3d;
}
.slider__text-item > * {
  overflow: hidden;
  position: absolute;
}
.slider__text-item h3, .slider__text-item p {
  transition: transform 0.35s ease-out;
  line-height: 1.5;
  overflow: hidden;
}
.slider__text-item h3 {
  background-color: rgba(255, 255, 255, 0.5);
}
.slider__text-item p {
  font-family: 'Open Sans', sans-serif;
  padding: 1em;
  color: white;
  text-align: center;
  background-color: rgba(0, 0, 0, 0.5);
}
.slider__text-item h3::before, .slider__text-item p::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 105%;
  height: 100%;
  transform: translateX(0);
  transition: transform 0.35s ease-out 0.28s;
}
.slider__text-item h3::before {
  background-color: #000;
}
.slider__text-item p::before {
  background-color: #fff;
}
.slider__text-item h3 {
  margin: 0;
  font-size: 3.5em;
  padding: 0 .3em;
  position: relative;
  font-weight: 700;
  transform: translateX(-100%);
}
.slider__text-item p {
  margin: 0;
  transform: translateX(100%);
}
.slider__text-item-head {
  top: -0.5em;
  transform: translateZ(3em);
}
.slider__text-item-info {
  bottom: 0;
  right: 0;
  max-width: 75%;
  min-width: min-content;
  transform: translateZ(2em);
}
.slider__text-item--active h3, .slider__text-item--active p {
  transform: translateX(0);
}
.slider__text-item--active h3::before {
  transform: translateX(102%);
}
.slider__text-item--active p::before {
  transform: translateX(-102%);
}
.slider__text-item--backwards h3::before, .slider__text-item--backwards p::before {
  transition: transform 0.35s ease-in;
}
.slider__text-item--backwards h3, .slider__text-item--backwards p {
  transition: transform 0.35s ease-in 0.35s;
}
.slider__nav {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  text-align: center;
}
.slider__nav-arrows {
  display: flex;
  justify-content: space-between;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
.slider__nav-arrow {
  height: 100vh;
  width: 50vw;
  text-indent: -9999px;
  white-space: nowrap;
}
.slider__nav-arrow--left {
  --arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 4 4'%3E %3Cpolyline points='3 1 1 2 3 3' stroke='white' stroke-width='.3' stroke-opacity='.5' fill='none'%3E%3C/polyline%3E %3C/svg%3E");
  cursor: var(--arrow) 40 40, auto;
}
.slider__nav-arrow--right {
  --arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 4 4'%3E %3Cpolyline points='1 1 3 2 1 3' stroke='white' stroke-width='.3' stroke-opacity='.5' fill='none'%3E%3C/polyline%3E %3C/svg%3E");
  cursor: var(--arrow) 40 40, auto;
}
.slider__nav-dots {
  margin-top: 88vh;
  display: inline-flex;
  position: relative;
  padding: 1em;
  pointer-events: none;
}
.slider__nav-dots::before {
  content: '';
  position: absolute;
  left: calc(1em + 1em + 2px);
  top: calc(1em + 2px);
  width: calc(1em - 2px * 2);
  height: calc(1em / 2 - 2px * 2);
  background-color: rgba(255, 255, 255, 0.9);
  transition: transform 0.7s ease-out;
  transform: translateX(calc((1em + 1em * 2) * (var(--from-left) - 1)));
}
.slider__nav-dot {
  margin: 0 1em;
  width: 1em;
  height: 0.5em;
  border: 2px solid rgba(255, 255, 255, 0.5);
  cursor: crosshair;
  pointer-events: all;
  display: inline-block;
}
.slider__nav-dot:hover {
  border-color: rgba(255, 255, 255, 0.7);
}
.slider__nav-dot:active {
  border-color: rgba(255, 255, 255, 0.5);
}

@media only screen and (max-width: 650px) {
  .slider::before,
  .slider::after {
    display: none;
  }

  .slider__content {
    width: 100vw;
    height: 100vh;
    max-height: 100vh;
  }

  .slider__text-item-info {
    bottom: 50%;
    left: 50%;
    transform: translate(-50%, 50%);
  }
  .slider__text-item-info p {
    padding: 1em .8em;
  }

  .slider__text-item-head {
    top: 5vh;
    left: 10vw;
    transform: translateZ(0);
  }
  .slider__text-item-head h3 {
    font-size: 2.5em;
  }

  .slider__nav-dots {
    background-color: rgba(0, 0, 0, 0.3);
  }

  .slider__nav-arrow {
    width: 10vw;
    position: relative;
    cursor: auto;
  }
  .slider__nav-arrow:active {
    filter: brightness(0.5);
  }
  .slider__nav-arrow::before {
    content: '';
    background-image: var(--arrow);
    background-size: cover;
    width: 8vw;
    height: 8vw;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .slider__nav-arrow--left {
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0.7) 0, transparent 100%);
  }
  .slider__nav-arrow--left:active {
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0.9) 0, transparent 100%);
  }
  .slider__nav-arrow--right {
    background-image: linear-gradient(to left, rgba(0, 0, 0, 0.7) 0, transparent 100%);
  }
  .slider__nav-arrow--right:active {
    background-image: linear-gradient(to left, rgba(0, 0, 0, 0.9) 0, transparent 100%);
  }
}


 .about-section {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    max-width: auto;
    margin: 0 auto;
    gap: 2rem;
    margin-bottom: 10%; 
    overflow: hidden;   
    }

    .about-image, .about-content {
      padding-left: 35px;
      padding-right: 35px;
      flex: 1 1 45%;
      opacity: 0;
      animation-duration: 1s;
      animation-fill-mode: forwards;           
     }

    .about-image {
      animation-name: slideInLeft;
    }

    .about-content {
      animation-name: slideInRight;
    }

    .about-image img {
      width: 98%;
      height: auto;
      border-radius: 16px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }

    .about-content h2 {
      font-size: 2rem;
      margin-bottom: 1rem;
      color: #333;
    }

    .about-content p {
      font-size: 16px;
    text-align: justify;
    line-height: 1.4;
    padding: 0%;
    color: #383535;
    }

    @keyframes slideInLeft {
      0% {
        transform: translateX(-50%);
        opacity: 0;
      }
      100% {
        transform: translateX(0);
        opacity: 1;
      }
    }

    @keyframes slideInRight {
      0% {
        transform: translateX(50%);
        opacity: 0;
      }
      100% {
        transform: translateX(0);
        opacity: 1;
      }
    }

    @media (max-width: 768px) {
      .about-image, .about-content {
        flex: 1 1 100%;
        text-align: center;
      }

      .about-content h2 {
        font-size: 1.5rem;
      }
    }

     .tabs {
      display: flex;
      justify-content: center;
      background: #ffeed0;
      flex-wrap: wrap;
    }

    .tab {
      padding: 10px 20px;
      cursor: pointer;
      border-radius: 15px 0px 15px 0px;
    }

    .tab.active {
      border-bottom: 2px solid #ffa64b;
      font-weight: bold;
    }

    .tab-content {
      display: none;
      padding: 20px;
    }

    .tab-content.active {
      display: block;
    }

    .image-group {
      margin-bottom: 40px;
    }

    .image-group h2 {
      text-align: center;
      font-size: 24px;
      margin-bottom: 20px;
      color: #333;
    }

    .image-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr))!important;
      gap: 54px!important;
      padding: 0 10px;
    }

    .gallery-image {
      width: 100%;
      height: auto;
      border-radius: 8px;
      transition: transform 0.3s;
    }

    .gallery-image:hover {
      transform: scale(1.05);
    }

    #lightbox {
      display: none;
      position: fixed;
      z-index: 999;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.8);
      justify-content: center;
      align-items: center;
      flex-direction: column;
    }

    #lightbox img {
      max-width: 80%;
      max-height: 80%;
    }

    .controls,
    #close-btn {
      font-size: 30px;
      color: white;
      position: absolute;
      cursor: pointer;
      user-select: none;
    }

    #close-btn {
      top: 20px;
      right: 40px;
    }

    #prev-btn {
      left: 30px;
      top: 50%;
      transform: translateY(-50%);
    }

    #next-btn {
      right: 30px;
      top: 50%;
      transform: translateY(-50%);
    }

    .testimonial-box {
    display: none;
    text-align: center;
    padding: 20px;
  }

  .testimonial-box.active {
    display: block;
  }

  .arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 10px;
    color: #333;
    background-color: rgba(255, 255, 255, 0.7);
    padding: 10px;
    border-radius: 50%;
    cursor: pointer;
    user-select: none;
    z-index: 10;
    transition: background-color 0.3s ease;
  }

  .arrow:hover {
    background-color: rgba(255, 255, 255, 1);
  }

  .arrow.left {
    left: 10px;
  }

  .arrow.right {
    right: 10px;
  }

    @media screen and (max-width: 768px) {
      
      .tabs {
        flex-direction: column;
        align-items: center;
      }
    }


    .navbar {
        margin-top: 15%;
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      background: #ffeed0;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }
    .nav-button {
      padding: 15px 20px;
      cursor: pointer;
      border: none;
      background: none;
      font-weight: bold;
      color: #666;
    }
    .nav-button.active {
      border-bottom: 3px solid orange;
      color: black;
    }
    .content-wrapper {
      display: flex;
      flex-wrap: wrap;
      max-width: 1200px;
      margin: auto;
      padding: 20px;
    }
    .main-image {
      flex: 1 1 400px;
      max-width: 100%;
      cursor: pointer;
    }
    .main-image img {
      width: 100%;
      height: 450px;
      border-radius: 5px;
    }
    .info-section {
      flex: 1 1 400px;
      padding: 20px;
    }
    .info-section ul {
      padding-left: 20px;
      margin-top: 5px;
      text-align: left;
    }
    .circles {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-top: 20px;
    }
    .circle-img {
      width: 80px;
      height: 80px;
      border-radius: 50%;
      object-fit: cover;
      cursor: pointer;
      transition: transform 0.2s;
    }
    .circle-img:hover {
      transform: scale(1.05);
    }
    .more-btn {
     display: none;
    }
    .lightbox {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.8);
      display: flex;
      justify-content: center;
      align-items: center;
      z-index: 1000;
    }
    .lightbox img {
      max-width: 90%;
      max-height: 90%;
      border-radius: 10px;
    }
    @media (max-width: 768px) {
      .content-wrapper {
        flex-direction: column;
      }
      .info-section {
        order: 1;
      }
      .main-image {
        order: 2;
      }
      .circles {
        justify-content: center;
      }
    }