/* Base Styles */
   * {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
     font-family: "Montserrat", sans-serif;
   }

   body,
   html {
     height: 100%;
     overflow-x: hidden;
   }

   body {
     -ms-overflow-style: none;
     /* IE & Edge */
     scrollbar-width: none;
     /* Firefox */
     overflow-y: scroll;
     /* Keep vertical scrolling */
   }

   body::-webkit-scrollbar {
     display: none;
     /* Chrome, Safari */
   }

   html {
     scroll-behavior: smooth;
   }

   /* --- NAVIGATION UPDATES --- */
   nav {
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding: 20px 5%;
     position: absolute;
     width: 100%;
     z-index: 1000;
     background: rgba(0, 0, 0, 0.6);
     /* dark transparent */
     backdrop-filter: blur(10px);
     -webkit-backdrop-filter: blur(10px);

     padding: 12px 40px;
     box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
   }

   /* nav { display: flex;  justify-content: space-between; align-items: center;padding: 20px 5%;position: absolute; width: 100%; z-index: 1000;    background: #0f365eeb;  } */
   .logo {
     font-size: 20px;
     font-weight: bold;
     letter-spacing: 2px;
     line-height: 1.2;
     color: white;
     z-index: 1001;
     display: flex;
    align-items: center;
    margin-bottom: 10px;
   }

   .nav-links {
    background: transparent !important;   /* remove black */
    backdrop-filter: none !important;     /* remove blur */
    -webkit-backdrop-filter: none !important;

    padding: 12px 30px;
    border-radius: 50px;

    /*border: 1px solid rgba(255,255,255,0.6); */

    display: flex;
    transition: 0.4s ease-in-out;
}

   .dec {
     display: block;
   }

   .mob {
     display: none;
   }

   /* Hover Effect for Desktop */
   .nav-links a {
     color: #fff;
     text-decoration: none;
     margin: 0 15px;
     font-size: 13px;
     text-transform: uppercase;
     letter-spacing: 0px;
     position: relative;
     padding-bottom: 0px;
     font-weight: 600;
   }

   .nav-links a::after {
     content: '';
     position: absolute;
     width: 0;
     height: 2px;
     bottom: 0;
     left: 0;
     background-color: #b89a6b;
     transition: width 0.3s ease;
   }

   .nav-links a:hover::after {
     width: 100%;
   }

   .nav-right {
     display: flex;
     align-items: center;
     gap: 20px;
     z-index: 1001;
     color: #fff;
   }

   .enquire-btn {
     background: none;
     color: white;
     padding: 10px 20px;
     border-radius: 4px;
     text-decoration: none;
     text-transform: uppercase;
     font-size: 12px;
     font-weight: bold;
   }

   .mobile-toggle {
     display: none;
     cursor: pointer;
     font-size: 28px;
     color: black;
   }

   /* --- MOBILE NAVIGATION FIX --- */
   @media (max-width: 992px) {
     .mobile-toggle {
       display: block;
     }

     .nav-links {
       position: fixed;
       top: 0;
       right: -100%;
       /* Hide side mein */
       width: 100%;
       height: 100vh;
       background: rgba(0, 0, 0, 0.95);
       flex-direction: column;
       justify-content: center;
       align-items: center;
       border-radius: 0;
       border: none;
       padding: 0;
       backdrop-filter: blur(20px);
     }

     .nav-links.active {
       right: 0;
       /* Slide in effect */
     }

     .nav-links a {
       margin: 20px 0;
       font-size: 20px;
       /* Mobile par bada font */
     }

     .nav-right span {
       display: none;
       /* Mobile par 'Chat' text chota dikhne ke liye */
     }
   }

   /* --- EXISTING SECTIONS (No changes) --- */
   .hero {
     position: relative;
     /* height: 100vh;*/
     width: 100%;
     background-size: cover;
     background-position: center;
     display: flex;
     flex-direction: column;
     color: white;
   }

   .hero-content {
     margin: auto auto 60px auto;
     text-align: center;
     width: 90%;
     position: absolute;
   }

   .hero-content h1 {
     font-size: clamp(40px, 8vw, 90px);
     text-transform: uppercase;
     letter-spacing: clamp(5px, 2vw, 20px);
     font-weight: 300;
     margin-bottom: 15px;
     color: #f9edcb;
   }

   .hero-content p {
     font-size: clamp(12px, 1.5vw, 18px);
     letter-spacing: 1px;
     text-transform: uppercase;
     opacity: 0.9;
   }

   .about-section {
     padding: 80px 10%;
     display: flex;
     align-items: center;
     gap: 50px;
     background-color: #fffbec;
     color: #333;
   }

   .about-text {
     flex: 1;
   }
   
   .split-content h5{
       text-transform: capitalize !important;
   }

   .about-text h2 {
     font-family: "Montserrat", sans-serif;
     /*font-size: clamp(30px, 4vw, 36px);*/
     font-size: 18px;
     color: #b89a6b;
     text-transform: capitalize;
     letter-spacing: 0px;
     line-height: 1.2;
     margin-bottom: 15px;
     font-weight: 400;
   }

   .about-text p {
     font-size: 14px;
     line-height: 1.8;
     color: #555;
     margin-bottom: 25px;
     letter-spacing: 0px;
     font-weight: 500;
     color: #434343;
   }

   .know-more-btn {
     display: inline-block;
     padding: 12px 30px;
     border: 1px solid #b89a6b;
     color: #b89a6b;
     text-decoration: none;
     font-size: 12px;
     text-transform: uppercase;
     letter-spacing: 1px;
     transition: 0.3s;
     margin-top: 20px;
     font-weight: 700;
   }

   .about-image {
     flex: 1;
     text-align: right;
   }

   .about-image img {
     max-width: 100%;
     height: auto;
     display: block;
     box-shadow: 20px 20px 0px #f9f6f1;
   }


   .curated-experiences-section {
     padding: 100px 10%;
     background: url(../images/banner-midd.jpg);
     text-align: center;
     float: left;
     width: 100%;
   }

   .curated-experiences-section h2 {
     font-family: "Montserrat", sans-serif;
     font-size: clamp(28px, 4vw, 45px);
     color: #ffffff;
     text-transform: uppercase;
     letter-spacing: 0px;
     margin-bottom: 60px;
     font-weight: 400;
   }

   .capabilities-section {
     padding: 100px 10%;
     background-color: #ffffff;
     text-align: center;
     /* float: left; */
     width: 100%;
   }

   .capabilities-section h2 {
     font-family: "Montserrat", sans-serif;
     font-size: clamp(28px, 4vw, 45px);
     color: #b89a6b;
     text-transform: uppercase;
     letter-spacing: 0px;
     margin-bottom: 60px;
     font-weight: 400;
   }

   .capabilities-grid {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     gap: 20px;
   }

   .capability-card {
     background: #fbfcff;
     padding: 40px 40px;
     text-align: left;
     box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02);
     display: flex;
     flex-direction: column;
     gap: 20px;
   }

   .icon-circle {
     width: auto;
     height: auto;
     /* background-color: #fffbec; */
     /* border-radius: 50%; */
     display: flex;
     /* align-items: center; */
     justify-content: left;
     color: #b89a6b;
     font-size: 24px;
   }

   .capability-card h3 {
     font-family: "Montserrat", sans-serif;
     font-size: 18px;
     color: #333;
     text-transform: uppercase;
     letter-spacing: 0px;
     font-weight: 500;
   }

   .capability-card p {
     font-size: 13px;
     color: #777;
     /*text-transform: uppercase; letter-spacing: 1px; */
     line-height: 1.6;
   }

   .opportunity-section {
     height: 100vh;
     width: 100%;
     position: relative;
     background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('../images/banner-footer.jpg');
     background-size: cover;
     background-position: center;
     display: flex;
     align-items: center;
     justify-content: center;
     text-align: center;
     color: white;
     padding: 0 10%;
   }

   .opportunity-content {
     max-width: 800px;
   }

   .opportunity-content h2 {
     font-family: "Montserrat", sans-serif;
     font-size: clamp(35px, 6vw, 54px);
     text-transform: capitalize;
     letter-spacing: 10px;
     font-weight: 300;
     line-height: 1.2;
     margin-bottom: 30px;
   }

   .opportunity-content p {
     font-size: clamp(12px, 1.5vw, 16px);
     letter-spacing: 0px;
     line-height: 2;
     margin-bottom: 40px;
     opacity: 0.9;
   }

   .opportunity-btn {
     display: inline-block;
     padding: 15px 40px;
     border: 1px solid #b89a6b;
     color: #b89a6b;
     text-decoration: none;
     text-transform: uppercase;
     font-size: 13px;
     letter-spacing: 2px;
     transition: 0.4s;
     background: rgba(0, 0, 0, 0.3);
   }

   footer {
     background-color: #ffffff;
     padding: 80px 5% 40px;
     color: #ffffff;
   }

   .footer-grid {
     display: grid;
     grid-template-columns: 4fr 1fr 1fr 0.5fr;
     gap: 115px;
     margin-bottom: 60px;
   }

   /* .footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.5fr; gap: 40px; margin-bottom: 60px; } */
   .footer-col h4 {
     font-size: 14px;
     text-transform: uppercase;
     letter-spacing: 2px;
     margin-bottom: 25px;
     font-weight: bold;
   }

 .footer-col p {
    font-size: 13px;
    line-height: 1.8;
    color: #ffffff;
    letter-spacing: 0px;
    margin: 20px 0;
    font-weight: 600;
}

   .social-links {
     display: flex;
     gap: 20px;
     margin-top: 20px;
   }

   .social-links a {
     color: #b89a6b;
     text-decoration: none;
     font-size: 18px;
   }

   .footer-col ul {
     list-style: none;
   }

   .footer-col ul li {
     margin-bottom: 12px;
   }

   .footer-col ul li a {
     text-decoration: none;
     color: #ffffff;
     font-weight: 600;
     font-size: 12px;
     letter-spacing: 0px;
     transition: 0.3s;
   }

   .contact-info {
     display: flex;
     flex-direction: column;
     gap: 15px;
   }

   .contact-item {
     display: flex;
     align-items: center;
     gap: 10px;
     font-size: 12px;
     color: #ffffff;
     letter-spacing: 0px;
     font-weight: 600;
   }

   .contact-item span {
     color: #b89a6b;
   }

   .footer-bottom {
     border-top: 1px solid #eee;
     padding-top: 30px;
     display: flex;
     justify-content: space-between;
     align-items: center;
     flex-wrap: wrap;
     gap: 20px;
   }

 .footer-bottom p {
    font-size: 12px;
    color: #ffffff;
}

   .footer-legal {
     display: flex;
     gap: 30px;
   }

   .footer-legal a {
     text-decoration: none;
     color: #ffffff;
     font-size: 12px;
   }

   .bigb-four {
     width: 100%;
     float: left;
     margin: 0 auto;
   }

   .imghover h5 {
     position: absolute;
     z-index: 9;
     bottom: 0;
     margin: 0;
     color: #fff;
     padding: 10px;
   }

   .owl-controls {
     position: absolute;
     margin-top: 300px;
   }

   .owl-nav button.owl-next {
     padding: 0 13px !important;
     background: url(../images/a-2.png) !important;
     border: 1px solid #ffffff;
     pointer-events: visible;
     width: 58px;
     height: 60px;
   }

   .owl-nav button.owl-prev {
     padding: 0 13px !important;
     background: url(../images/a-1.png) !important;
     border: 1px solid #ffffff;
     pointer-events: visible;
     width: 58px;
     height: 60px;
   }

   .owl-carousel .owl-nav button.disabled {
     display: none;
   }

   .owl-nav {
     width: 95%;
     position: absolute;
     pointer-events: none;
     top: 45%;
     left: 50%;
     transform: translate(-50%, -50%);
   }

   .owl-nav .owl-next {
     float: right;
   }

   .owl-nav .owl-prev {
     float: left;
   }

   .owl-nav span {
     color: #fff;
     font-size: 24px;
     display: none;
   }

   .modal-title {
     margin-bottom: 0;
     line-height: 1.5;
     font-size: 12px;
   }

   .modal-dialog {
     max-width: 90%;
   }

   @media (max-width: 992px) {
     .about-section {
       flex-direction: column;
       padding: 60px 5%;
       text-align: center;
     }

     .about-image {
       order: 1;
       text-align: center;
     }

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

     .footer-grid {
       grid-template-columns: 1fr 1fr;
       display: block;
     }

     .social-links {
       margin-bottom: 20px;
     }

     .opportunity-content h2 {
       font-family: "Montserrat", sans-serif;
       font-size: clamp(22px, 6vw, 48px);
     }

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

     .owl-nav button.owl-next {
       width: 38px;
       height: 38px;
       background-size: cover !important;
     }

     .owl-nav button.owl-prev {
       width: 38px;
       height: 38px;
       background-size: cover !important;
     }

     nav {
       position: relative;
     }

     .dec {
       display: none;
     }

     .mob {
       display: block;
     }

   }

   /* Ajay */
   footer {
         background-color: #000000;
   }

   .bgbox {
     background-color: #fffbec;
     padding-top: 12%;
   }

   .headingtitle {
     color: #9f7805 !important;

   }

   .about-section2 {
     display: flex;
     align-items: center;
     gap: 50px;
     background-color: #fff;
     color: #333;
   }

   /* The Overlay (background) */
   .overlaymenu {
     /* Height & width depends on how you want to reveal the overlay (see JS below) */
     height: 100%;
     width: 0;
     position: fixed;
     /* Stay in place */
     z-index: 1;
     /* Sit on top */
     left: 0;
     top: 0;
     background: rgba(0, 0, 0, 0.6);
     /* dark transparent */
     backdrop-filter: blur(10px);
     -webkit-backdrop-filter: blur(10px);


     box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
     /* Black w/opacity */
     overflow-x: hidden;
     /* Disable horizontal scroll */
     transition: 0.5s;
     /* 0.5 second transition effect to slide in or slide down the overlay (height or width, depending on reveal) */
     z-index: 999;
   }

   /* Position the content inside the overlay */
   .overlay-content {
     position: relative;
     top: 25%;
     /* 25% from the top */
     width: 100%;
     /* 100% width */
     text-align: center;
     /* Centered text/links */
     margin-top: 30px;
     /* 30px top margin to avoid conflict with the close button on smaller screens */
   }

   /* The navigation links inside the overlay */
   .overlaymenu a {
     padding: 8px;
     text-decoration: none;
     font-size: 17px;
     color: #818181;
     display: block;
     line-height: 1;
     /* Display block instead of inline */
     transition: 0.3s;
     /* Transition effects on hover (color) */
   }

   /* When you mouse over the navigation links, change their color */
   .overlaymenu a:hover,
   .overlaymenu a:focus {
     color: #f1f1f1;
   }

   /* Position the close button (top right corner) */
   .overlaymenu .closebtn {
     position: absolute;
     top: 20%;
     right: 45px;
     font-size: 60px;
   }

   /* When the height of the screen is less than 450 pixels, change the font-size of the links and position the close button again, so they don't overlap */
   @media screen and (max-height: 450px) {
     .overlaymenu a {
       font-size: 15px
     }

     .overlaymenu .closebtn {
       font-size: 40px;
       top: 15%;
       right: 35px;
     }
   }

   .btn-outline-theme {
     color: #926228;
     background-color: #fff;
     border: 1px solid #926228;
     font-size: 11px;
     padding: 10px 20px;
     font-weight: bold;
     transition: all 0.3s ease;
   }

   .btn-outline-theme:hover {
     color: #fff;
     background-color: #926228;
     border-color: #926228;
     box-shadow: 0 5px 15px rgba(146, 98, 40, 0.3);
     transform: translateY(-2px);
   }


   /* ===== IMPACT CARD SECTION ===== */
   .impact-card-section {
     padding: 180px 10%;
     /* background: #f9f6f1; */
   }

   .impact-header h2 {
     font-size: 40px;
     color: #cfa424;
     text-transform: uppercase;
     font-weight: 400;
   }

   .impact-header p {
     color: #777;
     margin-bottom: 50px;
   }

   /* HEAD ROW */
   .impact-head-row {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     font-weight: 700;
     color: #0f365e;
     margin-bottom: 20px;
     text-transform: uppercase;
   }

   /* ROW */
   .impact-card-row {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 20px;
     margin-bottom: 20px;
   }

   /* BOX */
   .impact-box {
     background: #fff;
     padding: 20px;
     border-radius: 6px;
     box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
     font-size: 14px;
     color: #555;
     transition: 0.3s;
     border: 3px solid #efe8e8;
   }

   /* LEFT COLUMN STYLE */
   .impact-card-row .impact-box:first-child {
     font-weight: 600;
     color: #0f365e;
   }

   /* SOLUTION COLUMN */
   .impact-box.highlight {
     /* border-left: 3px solid #b89a6b; */
     font-weight: 600;
     color: #fff;
     background-color: #b89a6b;
   }

   /* HOVER */
   .impact-box:hover {
     transform: translateY(-5px);
   }

   .icon-circle img {
     width: 60%;
     height: fit-content;
   }

   /* ===== RESPONSIVE ===== */
   @media (max-width: 992px) {
     .impact-card-row {
       grid-template-columns: 1fr;
     }

     .impact-head-row {
       display: none;
     }
   }

   .clear {
     text-decoration: none;
     color: #ffffff;
   }

   .clear:hover {
     color: #b89a6b;
     text-decoration: none;
   }

   /*mainNav*/
   #mainNav {
     transition: all 0.4s ease;
   }

   #mainNav.scrolled {
     padding: 10px 0;
     box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
   }

   .modal.fade .modal-dialog {
     transform: translateY(-20px);
     transition: all 0.3s ease;
   }

   .modal.show .modal-dialog {
     transform: translateY(0);
   }

   .modal-sm {
     max-width: 50% !important;
   }

   @media screen and (max-width: 750px) {
     .modal-sm {
       max-width: 100% !important;
     }
   }

   .logo img {
     height: 65px;
     /* adjust this */
     width: auto;
   }

   @media only screen and (min-width: 0px) and (max-width: 1000px) {

     .logo img {
       height: 40px;
       width: auto;
     }

     .nav-links a {
       color: #ffffff;
     }

   }

   .whatsapp-chat {
     display: flex;
     align-items: center;
     /* 🔥 this fixes alignment */
     gap: 6px;
     /* space between icon & text */
     cursor: pointer;
     font-size: 12px;
   }

   .head-wht-icon {
     font-size: 28px;
     /* control icon size */
   }


   /*our story css start*/

   /* --- Reuse tokens that match your existing theme --- */
   :root {
     --cream: #f5f0e8;
     --gold: #b8966a;
     --dark: #1a1a1a;
     --mid: #555;
     --section-pad: clamp(48px, 8vw, 96px);
   }

   /* ── Pillar Banner ── */
   .pillar-banner {
     background-color: #ffffff;
     text-align: center;
     padding: clamp(40px, 6vw, 80px) clamp(20px, 5vw, 80px);
     padding-top: 12%;
   }

   .pillar-banner h2 {
     font-family: "Montserrat", sans-serif;
     font-size: 34px;
     font-weight: 400;
     letter-spacing: 0px;
     text-transform: uppercase;
     color: #906227;
     line-height: 1.2;
     margin: 0 auto;
   }

   .pillar-banner h2 span {
     color: var(--gold);
   }

   /* ── Shared alternating section styles ── */
   .value-section {
     display: flex;
     align-items: center;
     gap: clamp(24px, 5vw, 72px);
     padding: var(--section-pad) clamp(20px, 7vw, 100px);
     background: #fff;
   }

   .value-section.bg-cream {
     background: #fefbea;
   }

   .value-section .vs-image,
   .value-section .vs-text {
     flex: 1 1 45%;
   }

   .value-section .vs-image img {
     width: 100%;
     height: clamp(220px, 35vw, 460px);
     object-fit: cover;
     display: block;
   }

   .value-section .vs-text h2 {
     font-family: "Montserrat", sans-serif;
     font-size: clamp(30px, 4vw, 36px);
     font-weight: 400;
     letter-spacing: 0px;
     line-height: 1.2;
     text-transform: uppercase;
     color: #9f7805;
     margin-bottom: 20px;
   }

   .value-section .vs-text ul {
     list-style: none;
     padding: 0;
     margin: 0 0 16px;
   }

   .value-section .vs-text ul li {
     position: relative;
     padding-left: 18px;
     margin-bottom: 8px;
     font-size: clamp(0.88rem, 1.5vw, 1rem);
     color: var(--mid);
     line-height: 1.6;
   }

   .value-section .vs-text ul li::before {
     content: '–';
     position: absolute;
     left: 0;
     color: var(--gold);
   }

   .value-section .vs-text .tagline {
     font-style: italic;
     font-size: clamp(0.85rem, 1.4vw, 0.98rem);
     color: var(--mid);
     margin-top: 12px;
   }

   /* ── Feature Cards Row ── */
   .feature-cards {
     background: #fefbea;
     padding: var(--section-pad) clamp(20px, 7vw, 100px);
   }

   .feature-cards-grid {
     display: flex;
     gap: clamp(20px, 3vw, 40px);
     justify-content: center;
     flex-wrap: wrap;
     margin-top: 3%;
   }

   .feature-card {
     flex: 1 1 260px;
     max-width: 340px;
     text-align: center;
     padding: clamp(28px, 3vw, 44px) clamp(20px, 2.5vw, 32px);
     background: #fff;
     border-top: 3px solid var(--gold);
   }

   .feature-card .fc-icon {
     width: 44px;
     height: 44px;
     margin: 0 auto 18px;
     display: flex;
     align-items: center;
     justify-content: center;
   }

   .feature-card .fc-icon svg {
     width: 36px;
     height: 36px;
     stroke: var(--gold);
     fill: none;
     stroke-width: 1.5;
   }

   .feature-card h3 {
     font-family: 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
     font-size: clamp(1rem, 1.8vw, 1.25rem);
     letter-spacing: 0.08em;
     text-transform: uppercase;
     color: var(--dark);
     margin-bottom: 14px;
   }

   .feature-card p {
     font-size: clamp(0.82rem, 1.3vw, 0.93rem);
     color: var(--mid);
     line-height: 1.7;
     margin: 0;
   }

   /* ── Responsive ── */
   @media (max-width: 768px) {
     .value-section {
       flex-direction: column;
     }

     /* reverse image/text order on mobile for "image-right" rows */
     .value-section.reverse-mobile {
       flex-direction: column-reverse;
     }

     .value-section .vs-image,
     .value-section .vs-text {
       flex: 1 1 100%;
       width: 100%;
     }

     .feature-card {
       max-width: 100%;
     }
   }

   .feature-cards h2 {
     font-size: 28px;
     margin: 0 auto;
     text-align: center;
     color: #865d2a;
   }

   @media only screen and (min-width: 0px) and (max-width: 1000px) {
       
       .pillar-banner {
    padding-top: 35%;
}

     .bgbox {
       background-color: #fffbec;
       padding-top: 40%;
     }

     .about-text h2 {
       font-size: clamp(24px, 4vw, 36px);
     }

     .pillar-banner h2 {
       font-size: 18px;
     }

     .value-section .vs-text h2 {
       font-size: clamp(18px, 4vw, 36px);
     }

     .value-section .vs-text ul li {
       padding-left: 18px;
       margin-bottom: 5px;
       font-size: clamp(14px, 1.5vw, 1rem);
     }

     .feature-cards h2 {
       font-size: 18px;
     }

     .feature-cards-grid {
       margin-top: 10%;
     }

   }


   /*end*/


   /*carrers page css*/

   /* ===== Careers Section ===== */
   .careers {
     padding: 10% 20px;
     text-align: center;
     background-color: #faf9f7;
     color: #2c2c2c;
   }

   .careers h2 {
     font-family: "Montserrat", sans-serif;
     font-size: 2.2rem;
     margin-bottom: 10px;
     color: #b89a5c;
   }

   .job-card h3 {
     font-family: "Montserrat", sans-serif;
   }

   .careers .intro {
     max-width: 700px;
     margin: 0 auto 40px;
     line-height: 1.6;
   }

   .job-listings {
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
     gap: 30px;
   }

   .job-card {
     background: #fff;
     border-radius: 10px;
     box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
     width: 320px;
     padding: 25px 20px;
     text-align: left;
     transition: all 0.3s ease;
   }

   .job-card:hover {
     transform: translateY(-5px);
   }

   .job-card h3 {
     color: #333;
   }

   .job-card p {
     font-size: 0.95rem;
     color: #555;
     margin: 15px 0;
   }

   .apply-btn {
     background-color: #b89a5c;
     color: #fff;
     border: none;
     padding: 10px 18px;
     border-radius: 5px;
     cursor: pointer;
     transition: background 0.3s ease;
   }

   .apply-btn:hover {
     background-color: #a2854f;
   }

   /* ===== Popup Form ===== */
   .popup-overlay {
     position: absolute;
     top: 85px;
     left: 0;
     width: 100%;
     height: 102%;
     display: none;
     justify-content: center;
     align-items: center;
     background: rgba(0, 0, 0, 0.6);
     z-index: 1000;
   }

   .popup {
     background: #fff;
     padding: 30px;
     border-radius: 12px;
     width: 90%;
     max-width: 400px;
     position: relative;
     box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
   }

   .close-btn {
     position: absolute;
     top: 10px;
     right: 15px;
     font-size: 24px;
     color: #555;
     cursor: pointer;
   }

   .apply-form {
     text-align: left;
   }

   .apply-form label {
     display: block;
     margin-top: 15px;
     font-size: 0.9rem;
     color: #444;
   }

   .apply-form input {
     width: 100%;
     padding: 8px;
     margin-top: 6px;
     border-radius: 5px;
     border: 1px solid #ccc;
   }

   .submit-btn {
     margin-top: 20px;
     width: 100%;
     padding: 10px;
     background-color: #b89a5c;
     border: none;
     color: #fff;
     border-radius: 5px;
     font-size: 1rem;
     cursor: pointer;
   }

   .submit-btn:hover {
     background-color: #a2854f;
   }


   .close-desc {
     position: absolute;
     top: 10px;
     right: 15px;
     font-size: 24px;
     color: #555;
     cursor: pointer;
   }

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

     .job-card {
       width: 90%;
     }
   }

   /* One card per row */
   .job-listings {
     flex-direction: column;
     align-items: center;
   }

   .job-card {
     width: 100%;
     max-width: 800px;
   }

   /* Buttons layout */
   .job-actions {
     display: flex;
     /* justify-content: space-between; */
     gap: 10px;
     margin-top: 15px;
   }

   .desc-btn {
     background: transparent;
     border: 1px solid #b89a5c;
     color: #b89a5c;
     padding: 10px 18px;
     border-radius: 5px;
     cursor: pointer;
   }

   .desc-btn:hover {
     background: #b89a5c;
     color: #fff;
   }

   #descContent {
     text-align: left;
     margin-top: 15px;
     line-height: 1.6;
   }

   #descContent ul {
     padding-left: 18px;
     margin: 8px 0;
   }

   #descContent li {
     margin-bottom: 5px;
   }

   #descContent strong {
     display: block;
     margin-top: 10px;
     color: #333;
   }


   @media only screen and (min-width: 0px) and (max-width: 1000px) {
     .careers {
       margin-top: 30%;
       padding: 10% 20px;
     }

     .container {
       padding-right: 0px;
       padding-left: 0px;
     }

     .careers .intro {
       font-size: 14px;
       margin: 0 auto 25px;
     }

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

     .job-card h3 {
       font-size: 21px;
     }

     .desc-btn {
       background: transparent;
       border: 1px solid #b89a5c;
       color: #b89a5c;
       padding: 7px 12px;
       border-radius: 5px;
       cursor: pointer;
       font-size: 12px;
     }

     .apply-btn {
       background-color: #b89a5c;
       color: #fff;
       border: none;
       padding: 10px 18px;
       border-radius: 5px;
       cursor: pointer;
       transition: background 0.3s ease;
       font-size: 12px;
     }

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

     .submit-btn {
       margin-top: 20px;
       width: 60%;
       padding: 10px;
       background-color: #b89a5c;
       border: none;
       color: #fff;
       border-radius: 5px;
       font-size: 12px;
       cursor: pointer;
     }

   }

   /*head css*/

  .quick_contact a {
    position: fixed;
    width: 55px;
    height: 55px;
    right: 14px;
    bottom: 12%;
    color: #fff;
    border-radius: 50px;
    text-align: center;
    font-size: 32px;
    box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.2);
    z-index: 100;
    transition: transform 0.5s ease;
}

   .qwhtsapp {
     bottom: 70px;
     background-color: #25d366;
   }

   .qcall {
     bottom: 120px;
     background-color: #2196f3;
   }

   .quick_contact_icon {
     margin-top: 10px;
   }

   .quick_contact a:hover {
     transform: scale(1.1);
   }

   .qcall {
     bottom: 120px;
     background-color: #b89a6b;
   }


   @media only screen and (min-width: 0px) and (max-width: 1000px) {

     /* Mobile menu */
     #navLinks {
       position: fixed;
       z-index: 1000;
     }

     /* Overlay menu (Projects) */
     #myNav {
       position: fixed;
       z-index: 2000;
       /* higher than navLinks */
       top: 0;
       left: 0;
       height: 100%;
       width: 0;
       background: #000;
       /* or your bg */
       overflow-x: hidden;
       transition: 0.3s;
     }

     .overlaymenu .closebtn {
       position: absolute;
       top: 0%;
       right: 25px;
       font-size: 60px;
     }

     .nav-links {
        position: fixed;
        top: 0;
        right: -100%;
        width: 100%;
        height: 100vh;
        background: rgba(0, 0, 0, 0.95) !important;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        border-radius: 0;
        border: none;
        padding: 0;
        backdrop-filter: blur(20px);
    }
    
    .quick_contact a {
    position: fixed;
    width: 40px;
    height: 40px;
    right: 14px;
    bottom: 15%;
    color: #fff;
    border-radius: 50px;
    text-align: center;
    font-size: 20px;
    box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.2);
    z-index: 100;
    transition: transform 0.5s ease;
}

    


   }

   .mobile-toggle {
    cursor: pointer;
    font-size: 28px;
    color: #ffffff;
}

.menulink span{
    font-size: 12px;
}


.social-links a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: 12px;
}

.social-icon {
    width: 28px;       /* same like SVG */
    height: 28px;
    object-fit: contain;
    transition: 0.3s ease;
}

.social-links a:hover .social-icon {
    transform: scale(1.15);
}

.contact-item {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.contact-icon {
    width: 20px;     /* fixed like SVG */
    height: 20px;
    object-fit: contain;
    flex-shrink: 0;
}

.contact-item span {
    display: flex;
    align-items: center;
    justify-content: center;
}