/* ________
 Home Page/index php  
       _______________ */
 /* HERO SECTION */
 body {
     background-color: #f9f9f9;
 }

 /* /////////////Home Page Hero section//////////////////////// */

 .Hero {
     width: 100%;
     min-height: 100vh;
     background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(71, 69, 69, 0.5)),
         url('../Images/Img/hero.avif') no-repeat center/cover;
     display: flex;
     align-items: center;
     justify-content: center;
     text-align: center;
     padding: 20px;
     background-color: rgb(192, 179, 179);
     background-blend-mode: multiply;
     object-fit: cover;
 }

 /* HERO CONTENT */
 #hero-content {
     color: white;
     max-width: 800px;
 }

 #hero-content h1 {
     font-size: 4rem;
     font-weight: 700;
     margin-bottom: 15px;
     font-family: serif;
     color: white;
 }

 #hero-content p {
     font-size: 1.2rem;
     margin-bottom: 25px;
     line-height: 1.6;
     font-family: serif;
 }

 #hero-content a #hero-btn {
     display: inline-block;
     padding: 14px 32px;
     color: #111;
     text-decoration: none;
     font-size: 1rem;
     width: 250px;
     margin: 10px;
     background: linear-gradient(135deg, #e1a820, #e0e0e0);
     border: 1px solid rgba(0, 0, 0, 0.1);
     box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
     font-weight: 500;
     letter-spacing: 0.5px;
     transition: all 0.3s ease;
 }

 #hero-content a #hero-btn:hover {
     background: transparent;
     color: #e1a820;
     border-color: #e1a820;
     transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
     transition: all 0.3s ease;
     transform: translateY(-2px);
 }

 #hero-content a #hero-btn2 {
     display: inline-block;
     padding: 14px 32px;
     width: 250px;
     margin: 10px;
     font-size: 1rem;
     letter-spacing: 1px;
     font-weight: 500;
     color: white;
     background: transparent;
     border: 2px solid #e1a820;
     position: relative;
     overflow: hidden;
     transition: all 0.3s ease;
 }

 #hero-content a #hero-btn2::before {
     content: "";
     position: absolute;
     top: 0;
     left: 0;
     width: 0%;
     height: 100%;
     background: linear-gradient(135deg, #e1a820);
     z-index: -1;
     border: none;
     transition: width 0.4s ease;
     overflow: hidden;
     border: 1px solid rgba(0, 0, 0, 0.1);
 }

 /* hover */
 #hero-content a #hero-btn2:hover::before {
     width: 100%;
 }

 #hero-content a #hero-btn2:hover {
     color: #fff;
     transform: translateY(-2px);
 }

 /* TABLET */
 @media (max-width: 992px) {
     #hero-content h1 {
         font-size: 2.5rem;
     }

     #hero-content p {
         font-size: 1.1rem;
     }
 }

 /* MOBILE */
 @media (max-width: 600px) {
     .Hero {
         min-height: 80vh;
         padding: 15px;
     }

     #hero-content h1 {
         font-size: 2rem;
     }

     #hero-content p {
         font-size: 1rem;
     }

     #hero-content a {
         padding: 10px 25px;
         font-size: 0.9rem;
     }
 }

 .hero-container .con {
     display: flex;
     justify-content: center;
     /* center align */
     align-items: center;
 }

 .hero-container .hero-Coloum {
     display: flex;
     justify-content: center;
     /* center align */
     align-items: center;
     flex-wrap: nowrap;
     /* IMPORTANT → keep in one line */
     gap: 2rem;
     padding: 2rem 0;
     margin-top: 2rem;
     width: 100%;
 }

 /* each item */
 .hero-container .hero-Coloum .row {
     display: flex;
     align-items: center;
     gap: 10px;
     flex: 0 0 auto;
     /* prevent shrinking */
 }

 .hero-container .hero-Coloum img {
     background-color: var(--secondary-color);
     border-radius: 50%;
     padding: 1rem;
     width: 100px;
     height: 100px;
 }

 .hero-container .hero-Coloum span {
     color: var(--text-white);
     font-size: clamp(1rem, 1.5vw, 1.2rem);
     white-space: nowrap;
     /* prevent text break */
 }

 .hero-container .hero-Coloum #line {
     height: 60px;
     width: 1px;
     background-color: var(--text-white);
 }

 @media (max-width: 768px) {

     .hero-container .hero-Coloum {
         flex-wrap: wrap;
         /* allow wrapping */
         justify-content: center;
     }

     .hero-container .hero-Coloum #line {
         display: none;
         /* hide divider in mobile */
     }

     .hero-container .hero-Coloum .row {
         flex: 1 1 45%;
         /* 2 items per row */
         justify-content: flex-start;
     }
 }

 @media (max-width: 480px) {

     .hero-container .hero-Coloum .row {
         flex: 1 1 100%;
         /* 1 per row */
     }
 }

 /* ............../////////// Hero About //////////////...... */
 /* MAIN SECTION */
 #home-about {
     display: flex;
     align-items: center;
     justify-content: space-between;
     padding: 50px 8%;
     gap: 40px;
     background: #fff;
 }

 /* LEFT SIDE */
 .about-left {
     width: 50%;
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     gap: 30px;
 }

 /* ITEM CARD */
 .about-item {
     text-align: center;
     padding: 20px;
     border-radius: 12px;
     background: #f9f9f9;
     transition: 0.3s ease;
     border: 1px solid #c9a227;
 }

 .about-item {
     animation: pulse 1s infinite;
 }

 @keyframes pulse {
     0% {
         transform: scale(1);
     }

     50% {
         transform: scale(1.08);
     }

     100% {
         transform: scale(1);
     }
 }

 /* HOVER EFFECT */
 .about-item:hover {
     transform: translateY(-8px);
     box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
 }

 /* SVG */
 .about-item svg {
     width: 120px;
     height: auto;
     margin-bottom: 10px;
 }

 /* TEXT */
 .about-item p {
     font-size: 25px;
     font-weight: 500;
     color: #1e384c;
 }

 /* RIGHT SIDE */
 .about-right {
     width: 50%;
 }

 .about-right img {
     width: 100%;
     height: 450px;
     object-fit: cover;
     border-radius: 15px;
 }

 #about-left-btn button {
     position: relative;
     padding: 14px 32px;
     font-size: 1rem;
     font-weight: 600;
     letter-spacing: 0.5px;
     color: #111;
     background: linear-gradient(135deg, #d4af37);
     border: none;
     border-radius: 8px;
     cursor: pointer;
     overflow: hidden;
     transition: all 0.4s ease;
     /* soft shadow */
     box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
 }

 /* shine effect layer */
 #about-left-btn button::before {
     content: "";
     position: absolute;
     top: 0;
     left: -100%;
     width: 100%;
     height: 100%;
     background: linear-gradient(120deg,
             transparent,
             rgba(255, 255, 255, 0.6),
             transparent);
     transition: all 0.6s ease;
 }

 /* hover effect */
 #about-left-btn button:hover {
     transform: translateY(-3px) scale(1.02);
     box-shadow: 0 8px 25px rgba(0, 0, 0, 0.25);
 }

 /* moving shine animation */
 #about-left-btn button:hover::before {
     left: 100%;
 }

 /* click effect */
 #about-left-btn button:active {
     transform: scale(0.96);
     box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
 }




 /* RESPONSIVE */
 @media (max-width: 992px) {
     #home-about {
         flex-direction: column;
     }

     .about-left,
     .about-right {
         width: 100%;
     }

     .about-right img {
         height: 300px;
     }
 }

 @media (max-width: 576px) {
     .about-left {
         grid-template-columns: 1fr;
     }
 }

 /* //////////////header h2///////////// */
 /* ===== SECTION ===== */
 .sec2 {
     display: flex;
     align-items: center;
     justify-content: center;
     background-color: #ffffff;
     text-align: center;
     padding: 40px 20px;
 }

 /* ===== HEADING ===== */
 .sec2 h2 {
     font-size: clamp(22px, 4vw, 36px);
     /* responsive font 🔥 */
     font-weight: 600;
     letter-spacing: 2px;
     text-transform: uppercase;
     color: #1e384c;
     position: relative;
     display: inline-block;
     padding-bottom: 10px;
     font-family: serif;
 }

 /* ===== UNDERLINE EFFECT ===== */
 .sec2 h2::after {
     content: "";
     position: absolute;
     width: 60%;
     height: 3px;
     background: linear-gradient(90deg, #c9a227, #e6d28f);
     left: 50%;
     bottom: 0;
     transform: translateX(-50%);
     border-radius: 2px;
     transition: 0.3s ease;
 }

 /* ===== HOVER EFFECT ===== */
 .sec2 h2:hover {
     color: #c9a227;
 }

 .sec2 h2:hover::after {
     width: 80%;
     /* underline grow effect */
 }

 /* ===== TABLET ===== */
 @media (max-width: 992px) {
     .sec2 {
         padding: 30px 15px;
     }

     .sec2 h2 {
         letter-spacing: 1.5px;
     }
 }

 /* ===== MOBILE ===== */
 @media (max-width: 576px) {
     .sec2 {
         padding: 25px 10px;
     }

     .sec2 h2 {
         font-size: 22px;
         letter-spacing: 1px;
     }

     .sec2 h2::after {
         height: 2px;
         width: 50%;
     }
 }

 /* //////////////hero-content/////////////// */
 #hero-about {
     display: flex;
     align-items: left;
     justify-content: left;
     background-color: #ffffff;
     padding: 40px 20px;
     text-align: left;
 }

 /* ===== CONTENT ===== */
 #hero-about-content {
     color: black;
     font-family: serif;
     /* modern font */
     font-size: 20px;
 }

 /* ===== SMALL TEXT (optional subtitle) ===== */
 #hero-about-content span {
     display: block;
     font-size: clamp(14px, 2vw, 18px);
     font-weight: 400;
     color: #666;
     margin-top: 10px;
 }

 /* ===== TABLET ===== */
 @media (max-width: 992px) {
     #hero-about {
         padding: 30px 15px;
     }
 }

 /* ===== MOBILE ===== */
 @media (max-width: 576px) {
     #hero-about {
         padding: 25px 10px;
     }

     #hero-about-content {
         font-size: 15px;
     }
 }

 /* ===== SECTION WRAPPER ===== */
 #home-about-btn {
     background-color: #ffffff;
     width: 100%;
     display: flex;
     align-items: center;
     justify-content: center;
     padding: 20px 0;
 }

 /* ===== BUTTON CONTAINER ===== */
 #hero-about-button {
     width: 80%;
     height: 60px;
     display: flex;
     align-items: center;
     gap: 15px;
 }

 /* ===== COMMON BUTTON STYLE ===== */
 #btn1,
 #btn2 {
     flex: 1;
     height: 100%;
     border-radius: 10px;
     font-size: 16px;
     font-weight: 600;
     position: relative;
     overflow: hidden;
     transition: all 0.3s ease;
     cursor: pointer;
 }

 /* ===============================
   🔹 BUTTON 1 (OUTLINE STYLE)
================================= */
 #btn1 {
     background: transparent;
     border: 2px solid #1e384c;
     color: #1e384c;
 }

 /* Hover */
 #btn1:hover {
     background: #1e384c;
     color: #ffffff;
     transform: translateY(-3px);
     box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
 }

 /* Click effect */
 #btn1:active {
     transform: scale(0.96);
 }

 /* ===============================
   🔹 BUTTON 2 (PRIMARY CTA)
================================= */
 #btn2 {
     background: linear-gradient(135deg, #1e384c, #2e5d78);
     border: none;
     color: #ffffff;
 }

 /* Hover */
 #btn2:hover {
     transform: translateY(-3px);
     box-shadow: 0 10px 25px rgba(30, 56, 76, 0.4);
     background-color: white;
     border: 2px solid black;
 }

 /* Click animation */
 #btn2:active {
     transform: scale(0.95);
 }

 /* ===============================
   ✨ SHINE EFFECT (BOTH BUTTONS)
================================= */
 #btn1::before,
 #btn2::before {
     content: "";
     position: absolute;
     top: 0;
     left: -100%;
     width: 100%;
     height: 100%;
     background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.5), transparent);
     transition: 0.6s;
 }

 #btn1:hover::before,
 #btn2:hover::before {
     left: 100%;
 }

 /* ===============================
   📱 RESPONSIVE (MOBILE)
================================= */
 @media (max-width: 768px) {
     #hero-about-button {
         flex-direction: column;
         height: auto;
     }

     #btn1,
     #btn2 {
         width: 100%;
         height: 50px;
     }
 }

 /* //////////////........hero-card.....///////////////////// */
 /* SECTION */
 .hero-card {
     padding: 50px 15px;
     background: white;
 }

 /* GRID */
 .row {
     row-gap: 20px;
 }

 .col {
     display: flex;
     justify-content: center;
 }

 /* CARD */
 .card {
     border: none;
     border-radius: 30px;
     overflow: hidden;
     background: #fff;
     transition: 0.3s;
     box-shadow: 0 8px 25px rgba(0, 0, 0, 0.06);
     max-width: 320px;
     width: 100%;
     position: relative;
 }

 /* IMAGE */
 .card img {
     width: 100%;
     height: 180px;
     object-fit: cover;
     transition: 0.4s;
 }

 /* BODY */
 .card-body {
     padding: 16px;
 }

 /* TITLE */
 .card-title {
     font-size: 18px;
     font-weight: 600;
     margin-bottom: 8px;
 }

 /* TEXT */
 .card-text {
     font-size: 13px;
     color: #666;
     line-height: 1.5;
 }

 /* BUTTON */
 .card-btn {
     display: inline-block;
     margin-top: 12px;
     padding: 10px 15px;
     font-size: 13px;
     color: #fff;
     background: linear-gradient(135deg, #1e384c, #333);
     border-radius: 25px;
     text-decoration: none;
     transition: 0.3s;
     width: 100%;
     text-align: center;
 }

 .card-btn:hover {
     background: linear-gradient(135deg, #111, #333);
 }

 /* HOVER */
 .card:hover {
     transform: translateY(-6px);
     box-shadow: 0 15px 35px rgba(0, 0, 0, 0.10);
 }

 .card:hover img {
     transform: scale(1.05);
 }

 /* TOP LINE */
 .card::before {
     content: "";
     position: absolute;
     width: 0%;
     height: 3px;
     top: 0;
     left: 0;
     background: linear-gradient(90deg, #e1a820, #ffcc33);
     transition: 0.4s;
 }

 .card:hover::before {
     width: 100%;
 }

 /* RESPONSIVE */
 @media (max-width: 992px) {
     .card img {
         height: 160px;
     }
 }

 @media (max-width: 768px) {
     .hero-card {
         padding: 35px 10px;
     }

     .card img {
         height: 150px;
     }

     .card-title {
         font-size: 16px;
     }

     .card-text {
         font-size: 12px;
     }
 }

 @media (max-width: 576px) {
     .card img {
         height: 140px;
     }

     .card-body {
         padding: 14px;
     }
 }

 /* ///////////////////////////////////////////
                About Page
///////////////////////////////////////// */
 .About-hero {
     min-height: 100vh;
     background:
         url('../Images/Img/About.hero.jpg');
     /* change image */
     background-size: cover;
     background-position: center;
     background-repeat: no-repeat;
     background-blend-mode: multiply;
     display: flex;
     align-items: center;
     justify-content: flex-start;
     padding: 80px 8%;
     position: relative;
     overflow: hidden;
 }

 /* DARK OVERLAY GLOW STRIP */
 .About-hero::before {
     content: "";
     position: absolute;
     width: 40%;
     height: 100%;
     left: 0;
     top: 0;
     background: linear-gradient(90deg, rgba(0, 0, 0, 0.75), transparent);
     z-index: 1;
 }

 /* CONTENT BOX (MODERN CARD STYLE) */
 #about-hero-content {
     position: relative;
     z-index: 2;
     max-width: 600px;
     color: white;

     padding: 40px;
     border-left: 4px solid #e1a820;
     background: rgba(0, 0, 0, 0.35);
     backdrop-filter: blur(6px);

     animation: slideIn 1s ease;
 }

 /* MAIN HEADING */
 #about-hero-content h1 {
     font-size: 54px;
     font-weight: 800;
     line-height: 1.1;
     margin-bottom: 15px;
     letter-spacing: 1px;
 }

 /* LINE (MINIMAL) */
 #about-hero-content hr {
     width: 70px;
     height: 3px;
     background: #e1a820;
     border: none;
     margin: 15px 0 25px 0;
 }

 /* PARAGRAPH */
 #about-hero-content p {
     font-size: 18px;
     line-height: 1.8;
     color: #d6d6d6;
     margin-bottom: 30px;
 }

 /* BUTTON */
 #about-hero-btn {
     background: #e1a820;
     color: #111;
     padding: 14px 28px;
     border: none;
     font-size: 16px;
     font-weight: 600;
     cursor: pointer;
     border-radius: 6px;
     transition: all 0.3s ease;
     position: relative;
     overflow: hidden;
 }

 /* BUTTON HOVER EFFECT */
 #about-hero-btn:hover {
     background: #ffcc33;
     transform: translateY(-3px);
 }

 /* BUTTON SHINE EFFECT */
 #about-hero-btn::after {
     content: "";
     position: absolute;
     top: 0;
     left: -100%;
     width: 50%;
     height: 100%;
     background: rgba(255, 255, 255, 0.3);
     transform: skewX(-25deg);
     transition: 0.5s;
 }

 #about-hero-btn:hover::after {
     left: 120%;
 }

 /* ANIMATION */
 @keyframes slideIn {
     from {
         opacity: 0;
         transform: translateX(-50px);
     }

     to {
         opacity: 1;
         transform: translateX(0);
     }
 }

 /* =========================
   RESPONSIVE DESIGN
========================= */

 /* TABLET */
 @media (max-width: 992px) {
     .About-hero {
         padding: 60px 5%;
     }

     #about-hero-content h1 {
         font-size: 40px;
     }
 }

 /* MOBILE */
 @media (max-width: 576px) {
     .About-hero {
         justify-content: center;
         text-align: center;
         padding: 40px 20px;
     }

     .About-hero::before {
         width: 100%;
         background: rgba(0, 0, 0, 0.6);
     }

     #about-hero-content {
         border-left: none;
         border-bottom: 3px solid #e1a820;
         text-align: center;
         padding: 25px;
     }

     #about-hero-content h1 {
         font-size: 30px;
     }

     #about-hero-content p {
         font-size: 14px;
     }
 }

 /* =========================
   ABOUT SECTION
========================= */
 .About {
     width: 100%;
     padding: 80px 10px;
     background: linear-gradient(180deg, #f7f9fc 0%, #ffffff 100%);
     display: flex;
     flex-direction: column;
     align-items: center;
     box-sizing: border-box;
 }

 /* =========================
   HEADING WRAPPER
========================= */
 /* HEADING WRAPPER */
 .about-h2 {
     width: 100%;
     max-width: 1200px;
     margin-bottom: 35px;
     text-align: center;
 }

 /* MAIN HEADING */
 .about-heading {
     font-size: 38px;
     font-weight: 800;
     color: #1e384c;
     position: relative;
     display: inline-block;
     padding-bottom: 12px;
     line-height: 1.3;
     letter-spacing: 0.5px;
     text-align: center;
 }

 /* UNDERLINE EFFECT */
 .about-heading::after {
     content: "";
     position: absolute;
     width: 65%;
     height: 4px;
     background: linear-gradient(90deg, #e1a820, #ffcc33);
     bottom: 0;
     left: 50%;
     transform: translateX(-50%);
     border-radius: 10px;
 }

 /* =========================
   CONTENT WRAPPER
========================= */
 #about-content {
     width: 100%;
     max-width: 1200px;
     display: flex;
     justify-content: center;
     align-items: center;
 }

 /* =========================
   ABOUT CONTENT CARD
========================= */
 #hero-about-content {
     width: 100%;
     background: #ffffff;
     padding: 40px 45px;
     border-radius: 18px;
     border-left: 5px solid #e1a820;
     box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08);
     transition: all 0.35s ease;
     box-sizing: border-box;
 }

 /* HOVER EFFECT */
 #hero-about-content:hover {
     transform: translateY(-6px);
     box-shadow: 0 20px 60px rgba(0, 0, 0, 0.12);
 }

 /* =========================
   PARAGRAPH STYLE
========================= */
 #hero-about-content p {
     font-size: 18px;
     line-height: 1.9;
     color: #444;
     text-align: center;
     margin: 0;
 }

 /* =========================
   TABLET RESPONSIVE
========================= */
 @media (max-width: 992px) {

     .About {
         padding: 70px 15px;
     }

     .about-h2 {
         margin-bottom: 30px;
     }

     .about-heading {
         font-size: 30px;
     }

     #hero-about-content {
         padding: 32px;
     }

     #hero-about-content p {
         font-size: 16px;
         line-height: 1.8;
     }
 }

 /* =========================
   MOBILE RESPONSIVE
========================= */
 @media (max-width: 576px) {

     .About {
         padding: 60px 12px;
     }

     .about-h2 {
         margin-bottom: 22px;
         text-align: center;
     }

     .about-heading {
         font-size: 24px;
         padding-bottom: 10px;
     }

     .about-heading::after {
         width: 55%;
         left: 22%;
         height: 3px;
     }

     #hero-about-content {
         padding: 25px 20px;
         border-radius: 14px;
         border-left: 4px solid #e1a820;
     }

     #hero-about-content p {
         font-size: 14px;
         line-height: 1.5;
         text-align: left;
     }
 }

 /* ===== SLIDER WRAPPER ===== */
 .about-slider {
     display: flex;
     gap: 22px;
     overflow-x: auto;
     scroll-behavior: smooth;
     scroll-snap-type: x mandatory;
     padding: 30px 15px;
     /* premium background feel */
     background: white;
 }

 /* hide scrollbar */
 .about-slider::-webkit-scrollbar {
     display: none;
 }

 /* ===== CARD DESIGN (PREMIUM LOOK) ===== */
 .about-card {
     flex: 0 0 calc(30% - 30px);
     max-width: calc(30% - 30px);

     background: #ffffff;
     border-radius: 18px;
     overflow: hidden;

     box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
     scroll-snap-align: start;

     transition: all 0.4s ease;
     position: relative;
 }

 /* hover premium lift */
 .about-card:hover {
     transform: translateY(-10px);
     box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
 }

 /* IMAGE */
 .about-card img {
     width: 100%;
     height: 190px;
     object-fit: cover;
     padding: 10px;
     transition: 0.4s ease;
 }

 /* image zoom on hover */
 .about-card:hover img {
     transform: scale(1.05);
 }

 /* TITLE */
 .about-card h2 {
     font-size: 16px;
     margin: 12px 12px 6px;
     color: black;
     font-weight: 600;
     font-family: serif;
 }

 /* DESCRIPTION */
 .about-card p {
     font-size: 13px;
     margin: 0 12px 12px;
     color: black;
     line-height: 1.4;
     font-family: serif;
 }

 /* BUTTON */
 .about-card button {
     width: calc(100% - 24px);
     margin: 0 12px 16px;

     padding: 10px;
     border: none;
     border-radius: 10px;

     background: linear-gradient(135deg, #274861, #1e384c);
     color: #fff;

     font-size: 12px;
     font-weight: 600;
     letter-spacing: 0.5px;

     cursor: pointer;
     transition: 0.3s ease;
 }

 /* button hover */
 .about-card button:hover {
     transform: scale(1.03);
     box-shadow: 0 10px 20px rgba(0, 114, 255, 0.3);
 }

 /* ===== RESPONSIVE DESIGN ===== */

 /* TABLET (2 CARDS) */
 @media (max-width: 992px) {
     .about-card {
         flex: 0 0 calc(50% - 22px);
         max-width: calc(50% - 22px);
     }

     .about-card img {
         height: 180px;
     }
 }

 /* MOBILE (1.2 CARD VIEW FOR SWIPE FEEL) */
 @media (max-width: 600px) {
     .about-card {
         flex: 0 0 85%;
         max-width: 85%;
     }

     .about-card img {
         height: 170px;
     }

     .about-card h2 {
         font-size: 15px;
     }

     .about-card p {
         font-size: 12px;
     }
 }

 /* SMALL MOBILE */
 @media (max-width: 400px) {
     .about-card {
         flex: 0 0 90%;
         max-width: 90%;
     }
 }

 /* ===== SECTION BACKGROUND ===== */
 #director_section {
     padding: 80px 20px;
     font-family: 'Poppins', sans-serif;
     background-color: white;
 }

 /* ===== DIRECTORS CONTAINER ===== */
 #Directors {
     display: flex;
     justify-content: center;
     gap: 40px;
     flex-wrap: wrap;
 }

 /* ===== CARD DESIGN ===== */
 #Directors>div {
     background: rgba(255, 255, 255, 0.05);
     backdrop-filter: blur(12px);
     border-radius: 20px;
     padding: 30px 25px;
     width: 280px;
     text-align: center;
     border: 1px solid rgba(255, 255, 255, 0.08);
     transition: all 0.4s ease;
     position: relative;
     overflow: hidden;
     background: linear-gradient(135deg, #0f172a, #020617);
 }

 /* Glow effect */
 #Directors>div::before {
     content: "";
     position: absolute;
     inset: 0;
     background: linear-gradient(120deg, transparent, rgba(212, 175, 55, 0.2), transparent);
     opacity: 0;
     transition: 0.5s;
 }

 /* Hover Effect */
 #Directors>div:hover {
     transform: translateY(-10px) scale(1.02);
     border-color: rgba(212, 175, 55, 0.4);
     box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6);
 }

 #Directors>div:hover::before {
     opacity: 1;
 }

 /* ===== IMAGE ===== */
 #Directors img {
     width: 150px;
     height: 150px;
     object-fit: cover;
     border-radius: 50%;
     margin-bottom: 20px;
     border: 3px solid #d4af37;
     padding: 3px;
     background: #020617;
 }

 /* ===== NAME ===== */
 #Directors h2 {
     color: #f1f5f9;
     font-size: 22px;
     margin-bottom: 10px;
     font-weight: 600;
 }

 /* ===== DESCRIPTION ===== */
 #Directors p {
     color: #cbd5f5;
     font-size: 14px;
     line-height: 1.6;
 }

 /* ===== RESPONSIVE ===== */
 @media (max-width: 768px) {
     .about-heading {
         font-size: 28px;
     }

     #Directors {
         flex-direction: column;
         align-items: center;
     }
 }

 /* =========================
   WRAPPER
========================= */
 #about-button {
     display: flex;
     justify-content: center;
     gap: 20px;
     flex-wrap: wrap;
     padding: 10px;
 }

 /* =========================
   PREMIUM BUTTON BASE
========================= */
 .premium-btn {
     position: relative;
     overflow: hidden;

     /* fluid sizing */
     padding: 14px 26px;
     font-size: clamp(14px, 2vw, 16px);

     font-weight: 600;
     border-radius: 12px;
     border: 2px solid black;
     cursor: pointer;
     transition: all 0.35s ease;

     /* flexible width */
     min-width: 220px;
     max-width: 320px;
     width: 100%;

     /* glassmorphism */
     background: rgba(255, 255, 255, 0.15);
     backdrop-filter: blur(12px);
     -webkit-backdrop-filter: blur(12px);

     color: #111;
     box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
 }

 /* =========================
   HOVER EFFECT (Desktop Only)
========================= */
 @media (hover: hover) {
     #about-btn1:hover {
         background: #2c5364;
         color: #fff;
         transform: translateY(-3px);
     }

     #about-btn2:hover {
         background: #d4af37;
         color: #fff;
         transform: translateY(-3px);
     }

     .premium-btn:hover::after {
         opacity: 1;
         margin-left: 10px;
     }
 }

 /* =========================
   ICON / TEXT SLIDE EFFECT
========================= */
 .premium-btn::after {
     content: " ➜";
     opacity: 0;
     margin-left: 5px;
     transition: all 0.3s ease;
 }

 /* =========================
   RIPPLE EFFECT
========================= */
 .premium-btn::before {
     content: "";
     position: absolute;
     top: 50%;
     left: 50%;
     width: 0;
     height: 0;
     border-radius: 50%;
     background: rgba(255, 255, 255, 0.4);
     transform: translate(-50%, -50%);
     transition: width 0.6s ease, height 0.6s ease;
 }

 .premium-btn:active::before {
     width: 250px;
     height: 250px;
 }

 /* =========================
   ACTIVE PRESS EFFECT
========================= */
 .premium-btn:active {
     transform: scale(0.96);
 }

 /* =========================
   TABLET
========================= */
 @media (max-width: 992px) {
     #about-button {
         gap: 15px;
     }

     .premium-btn {
         min-width: 200px;
     }
 }

 /* =========================
   MOBILE
========================= */
 @media (max-width: 600px) {
     #about-button {
         flex-direction: column;
         align-items: center;
     }

     .premium-btn {
         width: 100%;
         max-width: 100%;
         padding: 14px;
         font-size: 14px;
     }
 }

 /* =========================
   SMALL MOBILE
========================= */
 @media (max-width: 400px) {
     .premium-btn {
         font-size: 13px;
         padding: 12px;
     }
 }


 /* /////////////////Contact Page.//////////// */
 /* ================================
   HERO BASE (LUXURY INTERIOR STYLE)
================================ */
 .Contact-hero {
     position: relative;
     min-height: 100vh;
     padding: 100px 8%;
     font-family: 'Poppins', sans-serif;
     color: #fff;
     overflow: hidden;

     background:
         linear-gradient(rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0.65)),
         url('https://images.unsplash.com/photo-1600210492493-0946911123ea');

     background-size: cover;
     background-position: center;
     background-repeat: no-repeat;
 }

 /* GOLD LIGHT */
 .Contact-hero::before {
     content: "";
     position: absolute;
     inset: 0;
     background:
         radial-gradient(circle at 25% 30%, rgba(212, 175, 55, 0.12), transparent 55%),
         radial-gradient(circle at 80% 70%, rgba(255, 215, 0, 0.08), transparent 60%);
 }

 /* ================================
   GRID LAYOUT
================================ */
 .hero-grid {
     position: relative;
     z-index: 2;

     display: grid;
     grid-template-columns: 1.2fr 1fr;
     gap: 80px;
     align-items: center;
 }

 /* ================================
   LEFT CONTENT
================================ */
 .Contact-hero-content {
     animation: fadeUp 1.2s ease;
 }

 .Contact-hero-content h1 {
     font-size: 3.5rem;
     line-height: 1.1;
     margin-bottom: 10px;
 }

 .Contact-hero-content h2 {
     font-size: 1.3rem;
     color: #d4af37;
     margin-bottom: 20px;
 }

 .Contact-hero-content p {
     font-size: 1rem;
     color: #cfcfcf;
     line-height: 1.8;
     max-width: 500px;
     margin-bottom: 30px;
 }

 /* BUTTONS */
 .Contact-hero-buttons {
     display: flex;
     gap: 18px;
     flex-wrap: wrap;
 }

 .btn {
     padding: 14px 28px;
     border-radius: 40px;
     text-decoration: none;
     transition: 0.3s;
     display: inline-flex;
     align-items: center;
     justify-content: center;
 }

 .btn.primary {
     background: linear-gradient(135deg, #d4af37, #f3d77a);
     color: #111;
 }

 .btn.secondary {
     border: 1px solid #d4af37;
     color: #d4af37;
 }

 .btn:hover {
     transform: translateY(-4px);
 }

 /* ================================
   FORM CARD (RESPONSIVE IMPROVED)
================================ */

 .contact-form-card {
     width: 100%;
     max-width: 420px;

     padding: 40px 30px;
     border-radius: 20px;

     background: rgba(255, 255, 255, 0.12);
     backdrop-filter: blur(20px);

     border: 1px solid rgba(255, 255, 255, 0.25);

     box-shadow:
         0 30px 80px rgba(0, 0, 0, 0.5),
         inset 0 0 20px rgba(255, 255, 255, 0.1);

     position: relative;
 }

 /* GOLD GLOW */
 .contact-form-card::before {
     content: "";
     position: absolute;
     inset: -1px;
     border-radius: 20px;

     background: linear-gradient(135deg, #d4af37, transparent, #f3d77a);
     opacity: 0.3;
     z-index: -1;
 }

 /* TEXT */
 .contact-form-card h2 {
     color: #fff;
     font-size: 1.6rem;
 }

 .contact-form-card p {
     color: #eee;
     margin-bottom: 20px;
 }

 /* INPUTS */
 .contact-form-card input {
     width: 100%;
     padding: 14px 16px;
     margin-bottom: 16px;

     border-radius: 12px;
     border: 1px solid rgba(255, 255, 255, 0.3);

     background: rgba(255, 255, 255, 0.15);
     color: #fff;

     transition: 0.3s;
 }

 .contact-form-card input::placeholder {
     color: #eee;
 }

 .contact-form-card input:focus {
     border-color: #d4af37;
     background: rgba(255, 255, 255, 0.22);
 }

 /* MOBILE BOX */
 .mobile-box {
     display: flex;
     align-items: center;

     background: rgba(255, 255, 255, 0.15);
     border: 1px solid rgba(255, 255, 255, 0.3);
     border-radius: 12px;

     padding: 0 12px;
     margin-bottom: 16px;
 }

 .mobile-box span {
     color: #d4af37;
     font-weight: 600;
 }

 .mobile-box input {
     border: none;
     background: transparent;
     color: #fff;
     padding: 14px;
     flex: 1;
 }

 /* BUTTON */
 .form-button {
     width: 100%;
     padding: 15px;

     border: none;
     border-radius: 35px;

     background: linear-gradient(135deg, #d4af37, #f3d77a);
     color: #111;

     font-weight: 600;
     cursor: pointer;
 }

 /* ================================
   ANIMATIONS
================================ */
 @keyframes fadeUp {
     from {
         opacity: 0;
         transform: translateY(40px);
     }

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

 /* ================================
   RESPONSIVE DESIGN
================================ */

 /* LARGE TABLET */
 @media(max-width:1200px) {
     .hero-grid {
         gap: 50px;
     }

     .Contact-hero-content h1 {
         font-size: 3rem;
     }
 }

 /* TABLET */
 @media(max-width:900px) {

     .hero-grid {
         grid-template-columns: 1fr;
         text-align: center;
         gap: 50px;
     }

     .Contact-hero-content p {
         margin: 0 auto 30px;
     }

     .Contact-hero-buttons {
         justify-content: center;
     }

     .btn {
         width: 100%;
         max-width: 260px;
     }

     .contact-form-card {
         margin: auto;
     }
 }

 /* MOBILE */
 @media(max-width:600px) {

     .Contact-hero {
         padding: 70px 20px;
     }

     .Contact-hero-content h1 {
         font-size: 2.2rem;
     }

     .Contact-hero-content h2 {
         font-size: 1.1rem;
     }

     .contact-form-card {
         padding: 25px 20px;
     }

     .contact-form-card h2 {
         font-size: 1.4rem;
     }

     .contact-form-card input {
         padding: 12px;
     }

     .form-button {
         padding: 13px;
     }
 }

 /* =========================
   EXPERIENCE SECTION
========================= */
 .experience-section {
     padding: 80px 20px;
     background: linear-gradient(135deg, #0f172a, #1e384c);
     color: white;
     text-align: center;
     font-family: serif;
 }

 .container {
     max-width: 1100px;
     margin: auto;
 }

 /* TITLE */
 h2 {
     font-size: 38px;
     margin-bottom: 10px;
 }

 .sub-text {
     opacity: 0.8;
     margin-bottom: 50px;
 }

 /* GRID */
 .stats-grid {
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     gap: 20px;
 }

 /* CARD */
 .stat-card {
     background: rgba(255, 255, 255, 0.08);
     border: 1px solid rgba(255, 255, 255, 0.15);
     border-radius: 16px;
     padding: 30px 20px;
     transition: 0.4s ease;
     backdrop-filter: blur(10px);
     position: relative;
     overflow: hidden;
 }

 /* ICON */
 .stat-card .icon {
     font-size: 32px;
     margin-bottom: 15px;
     display: inline-block;
     background: rgba(225, 168, 32, 0.15);
     padding: 12px;
     border-radius: 50%;
 }

 /* HOVER EFFECT */
 .stat-card:hover {
     transform: translateY(-10px);
     border-color: #e1a820;
     background: rgba(225, 168, 32, 0.12);
 }

 /* NUMBER */
 .stat-card h3 {
     font-size: 24px;
     color: #e1a820;
     margin-bottom: 8px;
 }

 /* TEXT */
 .stat-card p {
     font-size: 14px;
     opacity: 0.9;
 }

 /* =========================
   RESPONSIVE
========================= */
 @media (max-width: 992px) {
     .stats-grid {
         grid-template-columns: repeat(2, 1fr);
     }
 }

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

 /* =========================
   ROOT COLORS
========================= */
 :root {
     --primary: #1e384c;
     --accent: #e1a820;
     --text: #111;
     --soft: #666;
 }

 /* =========================
   SECTION WRAPPER
========================= */
 #map-area {
     display: flex;
     min-height: 90vh;
     padding: 50px;
     gap: 40px;
     background: #fff;
 }

 /* =========================
   LEFT CONTACT
========================= */
 #left-contact {
     flex: 1;
     display: flex;
     flex-direction: column;
     justify-content: center;
 }

 #left-contact h2 {
     font-size: 36px;
     color: var(--primary);
     margin-bottom: 10px;
 }

 .sub-text {
     color: var(--soft);
     margin-bottom: 30px;
 }

 /* GRID BOXES */
 .info-grid {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 20px;
 }

 /* INFO BOX */
 .info-box {
     display: flex;
     gap: 15px;
     padding: 20px;
     border-radius: 16px;
     background: #f7f9fb;
     border: 1px solid #eee;
     transition: 0.3s;
 }

 .info-box i {
     width: 50px;
     height: 50px;
     border-radius: 12px;
     display: flex;
     align-items: center;
     justify-content: center;
     background: var(--primary);
     color: #fff;
     font-size: 18px;
     transition: 0.3s;
 }

 .info-box h4 {
     margin: 0;
     color: var(--primary);
     font-size: 16px;
 }

 .info-box p {
     margin: 3px 0 0;
     font-size: 14px;
     color: var(--soft);
 }

 /* hover */
 .info-box:hover {
     transform: translateY(-5px);
     border-color: var(--accent);
 }

 .info-box:hover i {
     background: var(--accent);
     color: #111;
 }

 /* =========================
   SOCIAL
========================= */
 .social {
     margin-top: 30px;
     display: flex;
     gap: 15px;
 }

 .social a {
     width: 45px;
     height: 45px;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     background: #f7f9fb;
     color: var(--primary);
     text-decoration: none;
     transition: 0.3s;
     border: 1px solid #eee;
 }

 .social a:hover {
     background: var(--accent);
     color: #111;
     transform: scale(1.1);
 }

 /* =========================
   RIGHT MAP
========================= */
 #right-map {
     flex: 1;
     border-radius: 25px;
     overflow: hidden;
     position: relative;
     box-shadow: 0 20px 60px rgba(0, 0, 0, 0.12);
 }

 /* FULL CLICKABLE LINK */
 .map-link {
     display: block;
     width: 100%;
     height: 100%;
     position: relative;
     text-decoration: none;
 }

 .map-link iframe {
     width: 100%;
     height: 100%;
     border: 0;
     filter: grayscale(20%) contrast(1.1);
 }

 /* overlay */
 .map-overlay {
     position: absolute;
     inset: 0;
     display: flex;
     align-items: center;
     justify-content: center;
     background: rgba(30, 56, 76, 0.25);
     color: #fff;
     font-size: 16px;
     font-weight: 500;
     opacity: 0;
     transition: 0.3s;
 }

 .map-link:hover .map-overlay {
     opacity: 1;
 }

 /* =========================
   RESPONSIVE
========================= */
 @media(max-width:900px) {
     #map-area {
         flex-direction: column;
         padding: 20px;
     }

     .info-grid {
         grid-template-columns: 1fr;
     }

     #right-map {
         height: 500px;
     }
 }

 /* ///////////// CONTACT WRITING SECTION ////////////// */

 .contact_writing {
     width: 100%;
     max-width: 1100px;

     margin: 80px auto;
     padding: 50px 40px;

     background: rgba(255, 255, 255, 0.6);
     backdrop-filter: blur(12px);
     -webkit-backdrop-filter: blur(12px);

     border-radius: 24px;

     box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08);

     text-align: center;

     font-family: 'Poppins', sans-serif;

     position: relative;
     overflow: hidden;

     z-index: 1;
 }

 /* subtle gradient glow */
 .contact_writing::before {
     content: "";
     position: absolute;

     width: 320px;
     height: 320px;

     background: radial-gradient(circle,
             rgba(255, 200, 150, 0.35),
             transparent 70%);

     top: -100px;
     left: -100px;

     z-index: 0;
 }

 /* second glow */
 .contact_writing::after {
     content: "";
     position: absolute;

     width: 250px;
     height: 250px;

     background: radial-gradient(circle,
             rgba(180, 220, 255, 0.25),
             transparent 70%);

     bottom: -100px;
     right: -100px;

     z-index: 0;
 }

 .contact_writing h2 {
     font-size: 42px;
     font-weight: 700;

     color: #111;

     margin-bottom: 25px;

     letter-spacing: -0.5px;
     line-height: 1.2;

     position: relative;
     z-index: 1;
 }

 .contact_writing h2::after {
     content: "";

     display: block;

     width: 70px;
     height: 4px;

     margin: 18px auto 0;

     background: linear-gradient(to right, #d4a373, #b08968);

     border-radius: 20px;
 }

 .contact_writing p {
     font-size: 17px;
     font-weight: 400;

     color: #222;

     line-height: 1.8;

     max-width: 900px;
     margin: 0 auto;

     position: relative;
     z-index: 1;
 }

 /* =========================
   LARGE TABLET
========================= */

 @media (max-width: 992px) {

     .contact_writing {
         margin: 70px 20px;
         padding: 45px 30px;
     }

     .contact_writing h2 {
         font-size: 36px;
     }

     .contact_writing p {
         font-size: 16px;
         line-height: 1.7;
     }
 }

 /* =========================
   TABLET
========================= */

 @media (max-width: 768px) {

     .contact_writing {
         margin: 60px 15px;
         padding: 40px 25px;

         border-radius: 20px;
     }

     .contact_writing h2 {
         font-size: 30px;
         margin-bottom: 20px;
     }

     .contact_writing p {
         font-size: 15.5px;
         line-height: 1.7;
     }

     .contact_writing::before {
         width: 220px;
         height: 220px;
     }

     .contact_writing::after {
         width: 180px;
         height: 180px;
     }
 }

 /* =========================
   MOBILE
========================= */

 @media (max-width: 576px) {

     .contact_writing {
         margin: 50px 12px;
         padding: 35px 20px;

         border-radius: 18px;
     }

     .contact_writing h2 {
         font-size: 25px;
         line-height: 1.3;
     }

     .contact_writing h2::after {
         width: 55px;
         height: 3px;
         margin-top: 14px;
     }

     .contact_writing p {
         font-size: 14.5px;
         line-height: 1.8;
     }

     .contact_writing::before {
         width: 180px;
         height: 180px;

         top: -70px;
         left: -70px;
     }

     .contact_writing::after {
         width: 150px;
         height: 150px;

         bottom: -70px;
         right: -70px;
     }
 }

 /* =========================
   SMALL MOBILE
========================= */

 @media (max-width: 400px) {

     .contact_writing {
         padding: 30px 16px;
     }

     .contact_writing h2 {
         font-size: 22px;
     }

     .contact_writing p {
         font-size: 14px;
     }
 }

 /* ================================
Service Page 
================================ */
 /* =========================
   SCROLL REVEAL BASE
========================= */

 .stat-card {
     opacity: 0;
     transform: translateY(40px);
     transition: all 0.8s cubic-bezier(0.25, 1, 0.5, 1);
 }

 /* ACTIVE STATE */
 .stat-card.show {
     opacity: 1;
     transform: translateY(0);
 }

 /* PREMIUM HOVER ENHANCEMENT */
 .stat-card {
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
 }

 .stat-card:hover {
     box-shadow: 0 20px 50px rgba(225, 168, 32, 0.25);
 }

 /* subtle floating glow */
 .stat-card::before {
     content: "";
     position: absolute;
     inset: 0;
     background: radial-gradient(circle at top left, rgba(225, 168, 32, 0.15), transparent 60%);
     opacity: 0;
     transition: 0.5s;
 }

 .stat-card:hover::before {
     opacity: 1;
 }

 /* =========================
   JOURNEY SECTION (WHITE LUXURY)
========================= */

 .journey-section {
     background: linear-gradient(90deg, #fff, #ffd700, #fff);
     padding: 90px 20px;
     font-family: serif;
     color: #1e384c;
 }

 .container {
     max-width: 1100px;
     margin: auto;
     text-align: center;
 }

 /* TITLE */
 .journey-section h2 {
     font-size: 42px;
     margin-bottom: 30px;
     font-weight: 700;
 }

 /* =========================
   TOP NUMBER FLOW
========================= */

 .number-flow {
     display: flex;
     align-items: center;
     justify-content: center;
     flex-wrap: wrap;
     gap: 10px;
     margin-bottom: 60px;
 }

 /* NUMBER CIRCLE */
 .number-flow span {
     width: 42px;
     height: 42px;
     border-radius: 50%;
     background: #1e384c;
     color: #fff;
     display: flex;
     align-items: center;
     justify-content: center;
     font-weight: 600;
     transition: 0.3s;
 }

 /* CONNECT LINE */
 .number-flow span:nth-child(even) {
     width: 40px;
     height: 2px;
     border-radius: 2px;
     background: linear-gradient(to right, #e1a820, #1e384c);
 }

 /* HOVER */
 .number-flow span:not(:nth-child(even)):hover {
     background: #e1a820;
     transform: translateY(-3px);
 }

 /* =========================
   STEP GRID
========================= */

 .steps-grid {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 25px;
 }

 /* CARD */
 .step-card {
     background: #fff;
     border: 1px solid #eee;
     border-radius: 14px;
     padding: 25px;
     text-align: left;
     box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
     transition: 0.4s;
     position: relative;
 }

 /* NUMBER */
 .step-card .num {
     font-size: 28px;
     font-weight: 700;
     color: #e1a820;
     display: block;
     margin-bottom: 10px;
 }

 /* TITLE */
 .step-card h3 {
     font-size: 18px;
     margin-bottom: 10px;
     color: #1e384c;
 }

 /* TEXT */
 .step-card p {
     font-size: 14px;
     color: #555;
     line-height: 1.6;
 }

 /* HOVER EFFECT */
 .step-card:hover {
     transform: translateY(-8px);
     border-color: #e1a820;
     box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
 }

 /* LEFT ACCENT LINE */
 .step-card::before {
     content: "";
     position: absolute;
     left: 0;
     top: 0;
     width: 4px;
     height: 100%;
     background: #e1a820;
     transform: scaleY(0);
     transform-origin: top;
     transition: 0.4s;
 }

 .step-card:hover::before {
     transform: scaleY(1);
 }

 /* =========================
   RESPONSIVE
========================= */

 @media (max-width: 992px) {
     .steps-grid {
         grid-template-columns: repeat(2, 1fr);
     }
 }

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

     .journey-section h2 {
         font-size: 32px;
     }
 }

 /* /////////////////////Service-Page////////////////////// */
 /* =========================
   HERO WRAPPER
========================= */
 #Service-hero {
     position: relative;
     height: 100vh;
     display: flex;
     align-items: center;
     justify-content: flex-start;
     padding: 0 8%;
     overflow: hidden;
     color: #fff;
 }

 /* =========================
   VIDEO BACKGROUND
========================= */
 .hero-video {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     object-fit: cover;
     z-index: -2;

     /* BRIGHT VIDEO */
     filter: brightness(1) contrast(1.05) saturate(1.1);
 }

 /* =========================
   LIGHT OVERLAY (VERY SOFT)
========================= */
 .hero-overlay {
     position: absolute;
     inset: 0;

     /* LIGHT overlay so video visible */
     background: linear-gradient(135deg,
             rgba(20, 40, 60, 0.35),
             rgba(0, 0, 0, 0.25));

     z-index: -1;
 }

 /* =========================
   GLASS CONTENT BOX
========================= */
 .hero-content {
     max-width: 520px;
     padding: 40px;

     border-radius: 20px;

     /* GLASS EFFECT */
     background: rgba(255, 255, 255, 0.08);
     backdrop-filter: blur(18px);
     -webkit-backdrop-filter: blur(18px);

     border: 1px solid rgba(255, 255, 255, 0.15);

     box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);

     animation: fadeUp 1s ease;
 }

 /* =========================
   TEXT
========================= */
 #Service-hero h1 {
     font-size: 52px;
     margin-bottom: 20px;
     line-height: 1.2;
 }

 #Service-hero p {
     font-size: 16px;
     line-height: 1.7;
     margin-bottom: 30px;
     color: rgba(255, 255, 255, 0.85);
 }

 /* =========================
   BUTTONS
========================= */
 .hero-buttons {
     display: flex;
     gap: 15px;
     flex-wrap: wrap;
 }

 .primary-btn {
     padding: 14px 28px;
     background: #e1a820;
     border: none;
     border-radius: 50px;
     font-weight: 600;
     cursor: pointer;
     transition: 0.3s;
 }

 .primary-btn:hover {
     transform: translateY(-2px);
     box-shadow: 0 10px 25px rgba(225, 168, 32, 0.4);
 }

 .secondary-btn {
     padding: 14px 28px;
     background: transparent;
     border: 2px solid #fff;
     color: #fff;
     border-radius: 50px;
     cursor: pointer;
     transition: 0.3s;
 }

 .secondary-btn:hover {
     background: #fff;
     color: #1e384c;
 }

 /* =========================
   SOUND BUTTON
========================= */
 .sound-btn {
     position: absolute;
     bottom: 20px;
     right: 20px;
     z-index: 10;
     padding: 10px 16px;
     border: none;
     border-radius: 30px;
     background: rgba(0, 0, 0, 0.6);
     backdrop-filter: blur(10px);
     color: #fff;
     cursor: pointer;
 }

 /* =========================
   ANIMATION
========================= */
 @keyframes fadeUp {
     from {
         opacity: 0;
         transform: translateY(25px);
     }

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

 /* =========================
   RESPONSIVE
========================= */

 /* TABLET */
 @media(max-width: 992px) {
     #Service-hero {
         padding: 0 6%;
     }

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

     #Service-hero h1 {
         font-size: 42px;
     }
 }

 /* MOBILE */
 @media(max-width: 768px) {
     #Service-hero {
         justify-content: center;
         text-align: center;
     }

     .hero-content {
         padding: 25px;
     }

     #Service-hero h1 {
         font-size: 32px;
     }

     .hero-buttons {
         justify-content: center;
     }
 }

 /* SMALL MOBILE */
 @media(max-width: 480px) {
     #Service-hero h1 {
         font-size: 26px;
     }

     #Service-hero p {
         font-size: 14px;
     }
 }

 /*/////////////////////////////////////////////// gallery page css /////////////////////////////////////////////////*/


 .gallery_hero {
     position: relative;
     height: 100vh;
     overflow: hidden;
     font-family: 'Poppins', sans-serif;
 }

 /* Slides */
 .gallery_slide {
     position: absolute;
     width: 100%;
     height: 100%;
     opacity: 0;
     transition: opacity 1s ease-in-out;
 }

 .gallery_slide.active {
     opacity: 1;
     z-index: 1;
 }

 /* Images */
 .gallery_slide img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     filter: brightness(0.75);
 }

 /* Content */
 .gallery_content {
     position: absolute;
     top: 50%;
     left: 8%;
     transform: translateY(-50%);
     color: #fff;
     max-width: 500px;
     animation: fadeUp 1s ease;
 }

 .gallery_content h1 {
     font-size: 48px;
     margin-bottom: 10px;
 }

 .gallery_content p {
     font-size: 18px;
     margin-bottom: 20px;
 }

 /* Button */
 .gallery_content button {

     padding: 14px 32px;
     border: none;
     background: linear-gradient(135deg, #c9a227, #e5c14a);
     color: #fff;
     border-radius: 8px;
     cursor: pointer;
     font-weight: 600;
     letter-spacing: 0.5px;
     transition: all 0.35s ease;
     /* premium shadow */
     box-shadow: 0 6px 18px rgba(201, 162, 39, 0.35);

     /* smooth feel */
     position: relative;
     overflow: hidden;
     margin: 10px;


 }

 /* hover effect */
 .gallery_content button:hover {
     transform: translateY(-3px) scale(1.03);
     box-shadow: 0 10px 28px rgba(201, 162, 39, 0.5);
 }

 /* shine animation on hover */
 .gallery_content button:hover::before {
     left: 100%;
 }


 /* Thumbnails */
 .gallery_thumbnails {
     position: absolute;
     bottom: 30px;
     right: 30px;
     display: flex;
     gap: 10px;
     z-index: 10;
 }

 .gallery_thumb {
     width: 100px;
     height: 50px;
     object-fit: cover;
     opacity: 0.8;
     cursor: pointer;
     border-radius: 6px;
     transition: 0.3s;
 }

 .gallery_thumb.active {
     opacity: 1;
     border: 2px solid #c9a227;
 }


 /* Tag */
 .gallery_tag {
     font-size: 12px;
     letter-spacing: 2px;
     color: #c9a227;
     margin-bottom: 10px;
 }

 /* Description */
 .gallery_desc {
     font-size: 15px;
     margin-bottom: 20px;
     opacity: 0.85;
 }


 /* Stats */
 .gallery_stats {
     display: flex;
     gap: 30px;
     margin-bottom: 20px;
 }

 .gallery_stats i {
     font-size: 20px;
     color: #c9a227;
     margin: 10px;
 }

 .gallery_stats p {
     font-size: 12px;
     opacity: 0.7;
 }


 /* responsive gallery hero////////////////// */



 /* ---------------- TABLET ---------------- */
 @media (min-width: 769px) and (max-width: 1024px) {

     .gallery_content {
         left: 6%;
         max-width: 420px;
     }

     .gallery_content h1 {
         font-size: 33px;
     }

     .gallery_content p {
         font-size: 16px;
     }

     .gallery_desc {
         font-size: 14px;
     }

     .gallery_content button {
         padding: 12px 26px;
         font-size: 14px;
     }

     .gallery_thumbnails {
         bottom: 20px;
         right: 20px;
         gap: 8px;
     }

     .gallery_thumb {
         width: 70px;
         height: 40px;
     }

     .gallery_stats {
         gap: 15px;
     }
 }


 /* ---------------- MOBILE ---------------- */
 @media (max-width: 768px) {

     .gallery_content {
         left: 5%;
         top: 65%;
         max-width: 100%;
     }

     .gallery_thumbnails {
         bottom: 10px;
         right: 10px;
         gap: 6px;
     }

     .gallery_thumb {
         width: 60px;
         height: 35px;
     }

     .gallery_stats {
         gap: 10px;
     }
 }

 /* ---------------- SMALL MOBILE ---------------- */
 @media (max-width: 480px) {

     .gallery_content {
         top: 60%;
     }

     .gallery_content button {
         width: 50%;
         text-align: center;
     }

     .gallery_categories span {
         font-size: 12px;
         padding: 4px 8px;
     }

     .gallery_thumb {
         width: 50px;
         height: 30px;
     }
 }




 /*//////////////////////// 2nd section css //////////////////*/


 .gallery-section {
     padding: 80px 5%;
     background: #ffffff;
 }

 /* Tabs */
 .gallery-tabs {
     text-align: center;
     margin-bottom: 40px;
 }

 .tab {
     padding: 10px 25px;
     border: none;
     background: transparent;
     cursor: pointer;
     font-weight: 500;
     color: #555;
     transition: 0.3s;
 }

 .tab.active,
 .tab:hover {
     color: #c9a227;
 }

 /* Grid */
 /* .grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
} */
 .grid-container {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     grid-auto-rows: 200px;
     /* this controls row height */
     gap: 15px;
 }

 /* Variations */
 .grid-item.large {
     grid-column: span 2;
     grid-row: span 2;
 }

 .grid-item.tall {
     grid-row: span 2;
 }

 .grid-item {
     position: relative;
     overflow: hidden;
     border-radius: 12px;
     cursor: pointer;
     box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
     transition: 0.3s ease;
 }

 .grid-item:hover {
     transform: translateY(-5px);
 }

 /* .grid-item img {
    width: 100%;
    height: 300px;
    object-fit: cover;
    transition: 0.5s;
} */

 .grid-item img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     display: block;
     transition: 0.5s;
 }

 .grid-item:hover img {
     transform: scale(1.1);
 }

 /* Overlay */
 .overlay {
     position: absolute;
     bottom: 0;
     left: 0;
     right: 0;
     padding: 15px;
     background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);
     color: #fff;
     opacity: 0;
     transition: 0.4s;
     pointer-events: none;
 }

 .grid-item:hover .overlay {
     opacity: 1;
 }

 /* Lightbox */
 .lightbox {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: rgba(0, 0, 0, 0.9);
     display: none;
     justify-content: center;
     align-items: center;
     z-index: 999;
 }

 .lightbox img {
     max-width: 90%;
     max-height: 80%;
     border-radius: 10px;
     animation: zoomIn 0.4s ease;
 }

 .close {
     position: absolute;
     top: 30px;
     right: 40px;
     font-size: 40px;
     color: #fff;
     cursor: pointer;
 }

 @keyframes zoomIn {
     from {
         transform: scale(0.8);
         opacity: 0;
     }

     to {
         transform: scale(1);
         opacity: 1;
     }
 }

 /* Responsive */
 @media(max-width: 992px) {
     .grid-container {
         grid-template-columns: repeat(2, 1fr);
     }
 }

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

 /* //////////////////////gellery writing css/////////////////// */

 .gellery_writing {
     max-width: 1100px;
     margin: 100px auto;
     padding: 40px;
     background: rgba(255, 255, 255, 0.6);
     text-align: left;

     backdrop-filter: blur(12px);

     border-radius: 20px;

     box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08);
     font-family: 'Poppins', sans-serif;
     position: relative;
     overflow: hidden;
 }

 /* subtle gradient glow */
 .gellery_writing::before {
     content: "";
     position: absolute;
     width: 300px;
     height: 300px;
     background: radial-gradient(circle, rgba(255, 200, 150, 0.3), transparent);
     top: -80px;
     left: -80px;
     z-index: 0;
 }

 .gellery_writing h2 {
     font-size: 42px;
     font-weight: 600;
     color: #1a1a1a;
     margin-bottom: 25px;

     letter-spacing: -0.5px;
     line-height: 1.2;

     position: relative;
     z-index: 1;
 }

 .gellery_writing p {
     font-size: 17px;
     color: black;
     line-height: 1.5;
     margin: 0 auto;
     text-align: left;
     position: relative;
     z-index: 1;
 }

 /* elegant underline */
 .gellery_writing h2::after {
     content: "";
     display: block;
     width: 60px;
     height: 3px;
     margin: 15px auto 0;
     background: linear-gradient(to right, #d4a373, #b08968);
     border-radius: 2px;
 }

 /* ===== RESPONSIVE ===== ////////////////////////////////////*/
 /* =========================
   LARGE SCREENS (1400px+)
========================= */
 @media (min-width: 1400px) {
     .gellery_writing {
         max-width: 1200px;
         padding: 80px 60px;
     }

     .gellery_writing h2 {
         font-size: 48px;
     }

     .gellery_writing p {
         font-size: 18px;
     }
 }

 /* =========================
   LAPTOP (1024px - 1399px)
========================= */
 @media (max-width: 1399px) {
     .gellery_writing {
         margin: 100px auto;
         padding: 50px 35px;
     }

     .gellery_writing h2 {
         font-size: 36px;
     }
 }

 /* =========================
   TABLET (768px - 1023px)
========================= */
 @media (max-width: 1023px) {
     .gellery_writing {
         margin: 80px 20px;
         padding: 40px 25px;
         border-radius: 16px;
     }

     .gellery_writing h2 {
         font-size: 30px;
         line-height: 1.3;
     }

     .gellery_writing p {
         font-size: 16px;
         line-height: 1.7;
     }

     .gellery_writing::before {
         width: 220px;
         height: 220px;
     }
 }

 /* =========================
   MOBILE (480px - 767px)
========================= */
 @media (max-width: 767px) {
     .gellery_writing {
         margin: 60px 15px;
         padding: 30px 20px;
         border-radius: 14px;

         /* reduce blur for performance */
         backdrop-filter: blur(8px);
     }

     .gellery_writing h2 {
         font-size: 24px;
     }

     .gellery_writing p {
         font-size: 15px;
     }

     .gellery_writing h2::after {
         width: 40px;
         height: 2px;
     }
 }

 /* =========================
   SMALL MOBILE (under 480px)
========================= */
 @media (max-width: 480px) {
     .gellery_writing {
         margin: 50px 10px;
         padding: 25px 15px;
     }

     .gellery_writing h2 {
         font-size: 20px;
     }

     .gellery_writing p {
         font-size: 14px;
         line-height: 1.6;
     }

     .gellery_writing::before {
         width: 180px;
         height: 180px;
         top: -60px;
         left: -60px;
     }
 }



 /* sec3 css start ///////////////////// */


 /* ===== SECTION BASE ===== */
 .lux-scroll {

     background: #0f1115;
     /* deep charcoal */
     padding: 80px 0;
     overflow: hidden;
     font-family: 'Poppins', sans-serif;
 }

 /* ===== HERO HEADING ===== */
 .lux-scroll h2 {
     font-size: 56px;
     font-weight: 600;
     text-align: center;
     margin-bottom: 50px;
     letter-spacing: 2px;
     line-height: 1.1;
     position: relative;
     z-index: 1;
     /* GOLD GRADIENT TEXT */
     background: linear-gradient(120deg, #d4af37, #f5d77a, #b8962e);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     transition: all 0.5s ease;
 }

 /* ✨ SUBTLE GLOW LINE */
 .lux-scroll h2::before {
     content: "";
     position: absolute;
     left: 50%;
     bottom: -15px;
     transform: translateX(-50%);

     width: 60px;
     height: 2px;

     background: linear-gradient(to right, transparent, #d4af37, transparent);
     opacity: 0.7;

     transition: all 0.5s ease;
 }

 /* ✨ BIG FADED BACK TEXT (premium layer) */
 .lux-scroll h2::after {
     content: "INTERIOR";
     position: absolute;

     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);

     font-size: 120px;
     font-weight: 700;

     color: rgba(255, 255, 255, 0.03);
     /* very subtle */
     letter-spacing: 10px;

     z-index: -1;
     white-space: nowrap;
 }

 /* 🔥 HOVER EFFECT */
 .lux-scroll h2:hover {
     letter-spacing: 4px;
     transform: translateY(-4px);

     text-shadow: 0 10px 40px rgba(212, 175, 55, 0.3);
 }

 .lux-scroll h2:hover::before {
     width: 120px;
     opacity: 1;
 }

 /* ===== WRAPPER (SCROLL AREA) ===== */
 .scroll-wrapper {
     display: flex;
     gap: 30px;
     padding: 0 60px;
     overflow-x: auto;
     scroll-behavior: smooth;
 }

 /* Hide scrollbar (clean look) */
 .scroll-wrapper::-webkit-scrollbar {
     display: none;
 }

 .scroll-wrapper {
     -ms-overflow-style: none;
     scrollbar-width: none;
 }

 /* ===== CARD ===== */
 .scroll-card {
     position: relative;
     min-width: 320px;
     height: 420px;
     border-radius: 20px;
     overflow: hidden;
     flex-shrink: 0;
     cursor: pointer;

     /* premium shadow */
     box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);

     transition: transform 0.5s ease, box-shadow 0.5s ease;
 }

 /* ===== IMAGE ===== */
 .scroll-card img {
     width: 100%;
     height: 100%;
     object-fit: cover;

     transition: transform 0.8s ease, filter 0.6s ease;
 }

 /* ===== DARK OVERLAY ===== */
 .overlay {
     position: absolute;
     bottom: 0;
     left: 0;
     width: 100%;

     padding: 25px;

     background: linear-gradient(to top,
             rgba(0, 0, 0, 0.85),
             rgba(0, 0, 0, 0.4),
             transparent);

     display: flex;
     align-items: flex-end;
 }

 /* ===== TEXT ===== */
 .overlay h3 {
     color: #fff;
     font-size: 22px;
     font-weight: 500;
     letter-spacing: 0.5px;

     transform: translateY(10px);
     opacity: 0.8;

     transition: all 0.4s ease;
 }

 /* ===== HOVER EFFECT (THIS IS THE MAGIC) ===== */
 .scroll-card:hover {
     transform: translateY(-12px) scale(1.03);
     box-shadow: 0 30px 70px rgba(0, 0, 0, 0.8);
 }

 .scroll-card:hover img {
     transform: scale(1.1);
     filter: brightness(1.05);
 }

 .scroll-card:hover .overlay h3 {
     transform: translateY(0);
     opacity: 1;
 }

 /* ===== OPTIONAL: CENTER FOCUS FEEL ===== */
 .scroll-wrapper:hover .scroll-card {
     opacity: 0.5;
     transform: scale(0.95);
 }

 .scroll-wrapper .scroll-card:hover {
     opacity: 1;
     transform: translateY(-12px) scale(1.05);
 }

 /* ===== RESPONSIVE ===== */

 /* =========================
   LARGE SCREENS (1400px+)
========================= */
 @media (min-width: 1400px) {
     .scroll-wrapper {
         padding: 0 100px;
         gap: 40px;
     }

     .scroll-card {
         min-width: 360px;
         height: 480px;
     }

     .overlay h3 {
         font-size: 24px;
     }
 }



 /* =========================
   LAPTOP (1024px - 1399px)
========================= */
 @media (max-width: 1399px) {
     .scroll-wrapper {
         padding: 0 60px;
     }

     .scroll-card {
         min-width: 300px;
         height: 400px;
     }
 }

 /* =========================
   TABLET (768px - 1023px)
========================= */
 @media (max-width: 1023px) {
     .scroll-wrapper {
         padding: 0 40px;
         gap: 20px;
     }

     .scroll-card {
         min-width: 260px;
         height: 340px;
         border-radius: 16px;
     }

     .overlay {
         padding: 20px;
     }

     .overlay h3 {
         font-size: 18px;
     }
 }

 /* =========================
   MOBILE (480px - 767px)
========================= */
 @media (max-width: 767px) {
     .lux-scroll {
         padding: 50px 0;
     }

     .scroll-wrapper {
         padding: 0 20px;
         gap: 16px;
     }

     .scroll-card {
         min-width: 220px;
         height: 300px;
         border-radius: 14px;
     }

     /* Reduce heavy effects for performance */
     .scroll-wrapper:hover .scroll-card {
         opacity: 1;
         transform: scale(1);
     }

     .scroll-card:hover {
         transform: scale(1.02);
     }

     .scroll-card:hover img {
         transform: scale(1.05);
     }

     .overlay h3 {
         font-size: 16px;
     }
 }

 /* =========================
   SMALL MOBILE (under 480px)
========================= */
 @media (max-width: 480px) {
     .scroll-wrapper {
         padding: 0 15px;
         gap: 12px;
     }

     .scroll-card {
         min-width: 180px;
         height: 250px;
     }

     .overlay {
         padding: 15px;
     }

     .overlay h3 {
         font-size: 14px;
     }
 }

 /* =========================
   EXTRA LARGE (1600px+)
========================= */
 @media (min-width: 1600px) {
     .lux-scroll h2 {
         font-size: 64px;
         letter-spacing: 3px;
     }

     .lux-scroll h2::after {
         font-size: 150px;
         letter-spacing: 12px;
     }
 }

 /* =========================
   LARGE DESKTOP (1200px - 1599px)
========================= */
 @media (max-width: 1599px) {
     .lux-scroll h2 {
         font-size: 52px;
     }

     .lux-scroll h2::after {
         font-size: 110px;
     }
 }

 /* =========================
   LAPTOP (992px - 1199px)
========================= */
 @media (max-width: 1199px) {
     .lux-scroll h2 {
         font-size: 44px;
         letter-spacing: 2px;
     }

     .lux-scroll h2::after {
         font-size: 90px;
         letter-spacing: 8px;
     }
 }

 /* =========================
   TABLET (768px - 991px)
========================= */
 @media (max-width: 991px) {
     .lux-scroll h2 {
         font-size: 34px;
         letter-spacing: 1.5px;
         margin-bottom: 40px;
     }

     .lux-scroll h2::after {
         font-size: 70px;
         letter-spacing: 6px;
     }

     .lux-scroll h2::before {
         bottom: -10px;
     }
 }

 /* =========================
   MOBILE (480px - 767px)
========================= */
 @media (max-width: 767px) {
     .lux-scroll h2 {
         font-size: 26px;
         letter-spacing: 1px;
         margin-bottom: 30px;
     }

     /* reduce heavy visual noise */
     .lux-scroll h2::after {
         font-size: 50px;
         letter-spacing: 4px;
         opacity: 0.02;
     }

     .lux-scroll h2::before {
         width: 40px;
         height: 2px;
     }

     /* disable hover effects on mobile */
     .lux-scroll h2:hover {
         transform: none;
         letter-spacing: 1px;
         text-shadow: none;
     }
 }

 /* =========================
   SMALL MOBILE (under 480px)
========================= */
 @media (max-width: 480px) {
     .lux-scroll h2 {
         font-size: 22px;
         line-height: 1.3;
     }

     .lux-scroll h2::after {
         font-size: 36px;
         letter-spacing: 2px;
     }
 }