* {
       margin: 0;
       padding: 0;
       box-sizing: border-box;
     }

     body {
       background-color: #faf9f5;
       font-family: "Ubuntu", sans-serif;
     }

     /* =============================NAVBAR=============================== */
     nav {
       display: flex;
       justify-content: space-between;
       align-items: center;
       background: white;
       /* fully transparent at start */
       box-shadow: none;
       /* no shadow initially */
       border-bottom: none;
       /* prevent any thin line */
       position: sticky;
       top: 0;
       z-index: 1000;
       transition: background 0.4s ease, box-shadow 0.4s ease;
     }

     /* When scrolled */
     nav.scrolled {
       background: white;
       /* white background */
       box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
       /* soft shadow only after scroll */
     }



     /* Left section = logo + links */
     .nav-left {
       display: flex;
       align-items: center;
       gap: 30px;
       padding: 0px 5px;
     }

     .mainlogo img {
       height: 62px;
     }

     .nav-links {
       list-style: none;
       display: flex;
       gap: 20px;
     }

     .nav-links li a {
       text-decoration: none;
       color: #333;
       font-size: 16px;
       font-weight: 500;
       transition: all 0.3s ease;
       padding: 6px 12px;
       border-radius: 8px;
     }

     .nav-links li a:hover {
       color: #ff8300
     }

     /* Right section = CTA button + phone */
     .nav-right {
       position: relative;
       /* make it the container */
       padding: 7px;
       text-align: center;
       border-radius: 100% 0% 71% 29% / 0% 100% 0% 100%;
       background: rgba(255, 255, 255, 0);
       /* base white */
       color: #333;

       display: flex;
       align-items: center;
       gap: 10px;

       overflow: hidden;
       /* ⬅️ keeps animation INSIDE shape */
       transition: color 0.5s ease;
     }

     /* gradient overlay */
     .nav-right::before {
       content: "";
       position: absolute;
       top: 0;
       right: 0;
       /* start at right edge */
       width: 0%;
       /* hidden initially */
       height: 100%;
       background: #ff8300;
       border-radius: inherit;
       /* match nav-right shape */
       z-index: 0;
       transition: width 1s ease-in-out;
     }

     .nav-right:hover::before {
       width: 100%;
       /* expands fully from right → left */
     }

     .nav-right * {
       position: relative;
       /* keep text/icon above gradient */
       z-index: 1;
     }

     .nav-right .phone {
       color: #000000;
       transition: color 1.5s ease;
     }

     .nav-right:hover .phone {
       color: white;
     }

     .agent-icon img {
       display: block;
       height: 45px;
       margin-left: 35px;
       transition: filter 3s ease;
     }

     .nav-right:hover .agent-icon img {
       filter: brightness(0) invert(1);
       /* turns white */
     }




     /* Mobile toggle */
     .menu-toggle {
       display: none;
       font-size: 28px;
       color: #333;
       cursor: pointer;
     }

     @media (max-width: 900px) {
       .nav-left {
         flex: 1;
         justify-content: space-between;
       }

       .mainlogo img {
         height: 50px;
       }

       /* Mobile Nav - Slide in from right */
       .nav-links {
         display: flex;
         flex-direction: column;
         justify-content: center;
         gap: 20px;

         position: fixed;
         top: 0;
         right: -100%;
         /* hidden off-screen */
         height: 100vh;
         width: 70%;
         background: #fff;
         box-shadow: -4px 0 20px rgba(0, 0, 0, 0.1);
         padding: 60px 30px;

         transition: right 0.4s ease-in-out, opacity 0.4s ease-in-out;
         opacity: 0;
         z-index: 1001;
         /* higher than overlay */
       }

       .nav-links.active {
         right: 0;
         opacity: 1;
       }

       /* Each nav item animation */
       .nav-links li {
         border: none;
         transform: translateX(30px);
         opacity: 0;
         transition: all 0.4s ease;
       }

       .nav-links.active li {
         transform: translateX(0);
         opacity: 1;
       }

       .nav-links.active li:nth-child(1) {
         transition-delay: 0.1s;
       }

       .nav-links.active li:nth-child(2) {
         transition-delay: 0.2s;
       }

       .nav-links.active li:nth-child(3) {
         transition-delay: 0.3s;
       }

       .nav-links li a {
         display: block;
         font-size: 20px;
         font-weight: 600;
         color: #333;
         padding: 12px 0;
         transition: color 0.3s ease;
       }

       .nav-links li a:hover {
         color: #ff8300;
       }

       /* Hamburger stays */
       .menu-toggle {
         display: block;
         font-size: 30px;
         cursor: pointer;
         color: #ff8300;
         z-index: 1002;
         /* above overlay */
       }

       /* Overlay behind menu */
       .nav-overlay {
         content: "";
         position: fixed;
         top: 0;
         left: 0;
         width: 100%;
         height: 100%;
         background: rgba(0, 0, 0, 0.5);
         opacity: 0;
         pointer-events: none;
         transition: opacity 0.4s ease;
         z-index: 1000;
       }

       .nav-links.active~.nav-overlay {
         opacity: 1;
         pointer-events: auto;
         /* clickable */
       }

       /* Hide CTA on mobile */
       .nav-right {
         display: none;
       }
     }


     /* ==================================END NAVBAR=============================== */





     /* ================ About Heading ==================== */

     .section-aboutheading {
       position: relative;
       display: flex;
       align-items: center;
       justify-content: space-between;
       /* text on left, image on right */
       padding: 200px 10%;
       background: linear-gradient(-45deg, #f69153, #f9fafc, #fff4eb, #e99b4d);
       background-size: 150% 150%;
       animation: gradientMove 5s ease-in-out infinite;
       gap: 40px;
       /* spacing between text and image */
       flex-wrap: wrap;
       /* allows natural wrapping if space is tight */
     }

     /* Gradient animation */
     @keyframes gradientMove {
       0% {
         background-position: 0% 100%;
       }

       50% {
         background-position: 50% 50%;
       }

       100% {
         background-position: 0% 100%;
       }
     }

     .text-content-aboutheading {
       max-width: 800px;
       flex: 1;
       text-align: left;
     }

     .text-content-aboutheading h1 {
       font-size: clamp(1.6rem, 2.5vw, 2.1rem);
       /* fluid scaling */
       color: #0a1f44;
       margin-bottom: 10px;
     }

     .text-content-aboutheading h1 span {
       color: #ff7b00;
       position: relative;
     }

     .text-content-aboutheading p {
       font-size: clamp(0.95rem, 1.2vw, 1.2rem);
       /* fluid scaling */
       color: #0d2b3e;
       margin-bottom: 30px;
       line-height: 1.6;
     }

     /* Button */
     .btn {
       display: inline-block;
       border: none;
       padding: 12px 26px;
       border-radius: 30px;
       color: #fff;
       cursor: pointer;
       font-weight: 600;
       font-size: clamp(0.9rem, 1vw, 1rem);
       /* fluid scaling */
       background: linear-gradient(135deg, #ff7b00, #ff9f40);
       position: relative;
       overflow: hidden;
       text-decoration: none;
       transition: transform 0.35s ease, box-shadow 0.35s ease;
     }

     .btn::after {
       content: "";
       position: absolute;
       top: 0;
       left: -100%;
       width: 100%;
       height: 100%;
       background: rgba(255, 255, 255, 0.3);
       transform: skewX(-25deg);
       transition: left 0.6s ease;
     }

     .btn:hover::after {
       left: 200%;
     }

     .btn:hover {
       transform: scale(1.07) translateY(-3px);
       box-shadow: 0 10px 22px rgba(255, 123, 0, 0.35);
     }

     /* Image wrapper with fluid scaling */
     .image-wrapper-aboutheading {
       flex-shrink: 0;
     }

     .image-wrapper-aboutheading img {
       width: clamp(250px, 40vw, 600px);
       /* scales between 250px and 600px */
       height: auto;
       display: block;
       max-width: 100%;
       transition: width 0.3s ease;
     }

     /* ================= Responsive ================= */

     /* Tablets */
     @media (max-width: 1024px) {
       .section-aboutheading {
         flex-direction: column;
         align-items: center;
         justify-content: center;
         padding: 120px 8%;
         text-align: center;
       }

       .text-content-aboutheading {
         max-width: 100%;
         text-align: center;
       }

       .image-wrapper-aboutheading img {
         width: clamp(180px, 60vw, 400px);
         margin-top: 30px;
       }
     }

     /* Mobile */
     @media (max-width: 600px) {
       .section-aboutheading {
         padding: 100px 6%;
       }

       .image-wrapper-aboutheading {
         display: none;
         /* hide image only on small screens */
       }

       .text-content-aboutheading h1 {
         font-size: clamp(1.3rem, 5vw, 1.6rem);
       }

       .text-content-aboutheading p {
         font-size: clamp(0.85rem, 4vw, 0.95rem);
       }

       .btn {
         padding: 10px 22px;
         font-size: clamp(0.85rem, 4vw, 0.95rem);
       }
     }


     /* ============== About Heading /END ================= */



     /* ================== Header ====================== */
     .header {
       text-align: center;
       padding: 3rem 1rem;
     }

     .header h2 {
       margin-bottom: 2rem;
       font-weight: 500;
       font-size: clamp(1.5rem, 2.5vw, 2rem);
       line-height: 1.4;
     }

     .icons {
       display: flex;
       justify-content: center;
       gap: 3rem;
       flex-wrap: wrap;
       max-width: 1200px;
       margin: 0 auto;
     }

     .icon {
       text-align: center;
       font-size: 16px;
       color: #333;
       flex: 1 1 120px;
       max-width: 180px;
     }

     .icon i {
       font-size: 2rem;
       color: #ff7b00;
       margin-bottom: 0.5rem;
     }

     .icon i,
     .icon svg {
       width: 1.9rem;
       height: 1.9rem;
       stroke: #ff7b00;
       margin-bottom: 0.5rem;
     }

     .header-btn {
       display: inline-block;
       margin-top: 1.5rem;
       border-radius: 30px;
       font-weight: 600;
       text-decoration: none;
       padding: 12px 26px;
       font-size: clamp(0.9rem, 1vw, 1rem);
       color: #fff;
       background: linear-gradient(135deg, #ff7b00, #ff9f40);
       transition: transform 0.35s ease, box-shadow 0.35s ease;
       position: relative;
       overflow: hidden;
     }

     .header-btn:hover {
       transform: scale(1.07) translateY(-3px);
       box-shadow: 0 10px 22px rgba(255, 123, 0, 0.35);
     }


     .header-btn::after {
       content: "";
       position: absolute;
       top: 0;
       left: -100%;
       width: 100%;
       height: 100%;
       background: rgba(255, 255, 255, 0.3);
       transform: skewX(-25deg);
       transition: left 0.6s ease;
     }

     .header-btn:hover::after {
       left: 200%;
     }

     .header-btn:hover {
       transform: scale(1.07) translateY(-3px);
       box-shadow: 0 10px 22px rgba(255, 123, 0, 0.35);
     }

     /* Shared container for centered sections */
     .section-container {
       max-width: 1200px;
       margin: 0 auto;
       border-radius: 12px;
       overflow: hidden;
     }

     /* =============== WHO WE ARE Section =============== */
     .whoweare {
       display: flex;
       flex-wrap: wrap;
       align-items: stretch;
       justify-content: space-between;
       margin-top: 2rem;
       background: #0a1f44;
       border-radius: 12px;
       overflow: hidden;
       color: #fff;
     }

     .whoweare .image {
       flex: 1;
       min-width: 300px;
     }

     .whoweare .image img {
       width: 100%;
       height: 100%;
       object-fit: cover;
     }

     .whoweare .text {
       flex: 1;
       min-width: 300px;
       padding: 2rem;
       display: flex;
       flex-direction: column;
       justify-content: center;
       font-size: clamp(1rem, 1.1vw, 1.1rem);
       line-height: 1.8rem;
     }

     .whoweare .text h2 {
       margin-bottom: 30px;
       font-size: clamp(1.5rem, 2vw, 1.7rem);
     }

     /* =============== MISSION Section =============== */
     .mission {
       display: flex;
       flex-wrap: wrap;
       align-items: stretch;
       justify-content: space-between;
       margin-top: 2rem;
       background: #ff9524;
       border-radius: 12px;
       overflow: hidden;
       color: #0a1f44;
     }

     .mission .image {
       flex: 1;
       min-width: 300px;
     }

     .mission .image img {
       width: 100%;
       height: 100%;
       object-fit: cover;
     }

     .mission .text {
       flex: 1;
       min-width: 300px;
       padding: 2rem;
       display: flex;
       flex-direction: column;
       justify-content: center;
       font-size: clamp(1rem, 1.1vw, 1.1rem);
       line-height: 1.8rem;
     }

     .mission .text h2 {
       margin-bottom: 30px;
       font-size: clamp(1.5rem, 2vw, 1.7rem);
     }

     /* =============== WHY US Section =============== */
     .whyus {
       display: flex;
       flex-wrap: wrap;
       align-items: stretch;
       justify-content: space-between;
       margin-top: 2rem;
       background: #1e3c72;
       border-radius: 12px;
       overflow: hidden;
       color: #fff;
     }

     .whyus .image {
       flex: 1;
       min-width: 300px;
     }

     .whyus .image img {
       width: 100%;
       height: 100%;
       object-fit: cover;
     }

     .whyus .text {
       flex: 1;
       min-width: 300px;
       padding: 2rem;
       display: flex;
       flex-direction: column;
       justify-content: center;
       font-size: clamp(1rem, 1.1vw, 1.1rem);
       line-height: 1.8rem;
     }

     .whyus .text h2 {
       margin-bottom: 30px;
       font-size: clamp(1.5rem, 2vw, 1.7rem);
     }

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

     /* Tablets */
     @media (max-width: 1024px) {

       .whoweare,
       .mission,
       .whyus {
         flex-direction: column;
       }

       .whoweare .text,
       .mission .text,
       .whyus .text {
         text-align: center;
         padding: 1.5rem;
       }
     }

     /* Mobile */
     @media (max-width: 600px) {
       .icons {
         gap: 1.5rem;
       }

       .whoweare .text,
       .mission .text,
       .whyus .text {
         font-size: 0.95rem;
         line-height: 1.6rem;
       }

       .whoweare .text h2,
       .mission .text h2,
       .whyus .text h2 {
         font-size: 1.4rem;
       }
     }



     /* ======================STAT SEC============================ */
     .stats-section {
       display: flex;
       justify-content: center;
       gap: 120px;
       padding: 100px 20px;
       font-family: "Inter", sans-serif;
       text-align: center;
       flex-wrap: wrap;
       /* allow wrapping on smaller screens */
     }

     .stat-box {
       display: flex;
       flex-direction: column;
       align-items: center;
       opacity: 0;
       transform: translateX(-50px);
       transition: all 0.8s ease-out;
       padding: 0 40px;
     }

     .stat-box.show {
       opacity: 1;
       transform: translateX(0);
     }

     /* Number + symbol side by side */
     .stat-box .stat-number {
       display: flex;
       align-items: baseline;
       justify-content: center;
     }

     .stat-box .counter {
       font-size: 4rem;
       font-weight: 600;
       color: #ff7b00;
       line-height: 1;
     }

     .stat-box .symbol {
       font-size: 2rem;
       font-weight: 500;
       margin-left: 4px;
       color: #1e3c72;
     }

     /* Labels */
     .stat-box p {
       margin-top: 12px;
       font-size: 1.3rem;
       font-weight: 400;
       color: #ff7b00;
       letter-spacing: 0.5px;
     }

     /* Add borders only to the center box (desktop only) */
     .stat-box:nth-child(2) {
       border-left: 3px solid #1e3c72;
       border-right: 3px solid #1e3c72;
     }

     /* 📱 Responsive tweaks */
     @media (max-width: 900px) {
       .stats-section {
         gap: 60px;
       }

       .stat-box .counter {
         font-size: 3rem;
       }
     }

     @media (max-width: 600px) {
       .stats-section {
         flex-direction: column;
         gap: 40px;
         padding: 60px 20px;
       }

       .stat-box {
         padding: 0;
       }

       .stat-box:nth-child(2) {
         border: none;
         /* remove borders on mobile */
       }

       .stat-box .counter {
         font-size: 2.5rem;
       }

       .stat-box .symbol {
         font-size: 1.5rem;
       }

       .stat-box p {
         font-size: 0.9rem;
       }
     }

     /*===================================STAT SEC END================================  */




     /* ===================== TEAM SECTION ======================= */
     .team-section {
       text-align: center;
       padding: 60px 20px;
     }

     .team-section h2 {
       font-size: 2.5rem;
       margin-bottom: 10px;
       color: #ff7b00;
     }

     .team-section p {
       max-width: 700px;
       margin: 0 auto 50px;
       color: #0a1f44;
       font-size: 1.1rem;
       line-height: 1.8rem;
     }

     .team-tree {
       display: flex;
       flex-direction: column;
       align-items: center;
       gap: 50px;
     }

     /* Root Node (CEO/Founder) */
     .team-root {
       display: flex;
       justify-content: center;
     }


     /* Sub-level (Other team members) */
     .team-row {
       display: grid;
       grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
       gap: 30px;
       width: 100%;
       max-width: 1200px;
     }

     .team-card {
       background: #fff;
       border-radius: 20px;
       padding: 30px 20px;
       box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1);
       transition: transform 0.3s ease;
       position: relative;
       overflow: hidden;
     }

     .team-card:hover {
       transform: translateY(-8px);
     }

     .team-image {
       width: 120px;
       height: 120px;
       margin: 0 auto;
       border-radius: 50%;
       overflow: hidden;
       transition: transform 0.3s ease;
     }

     .team-card:hover .team-image {
       filter: grayscale(0%);
       transform: translateY(-12px);
     }

     .team-image img {
       width: 100%;
       height: 100%;
       object-fit: cover;
       filter: grayscale(100%);
       transition: filter 0.4s ease, transform 0.3s ease;
     }

     .team-card:hover .team-image img {
       filter: grayscale(0%);
     }


     .designation {
       margin-top: 12px;
       font-size: 0.95rem;
       color: #0a1f44;
     }

     .name {
       font-weight: bold;
       font-size: 1.05rem;
       color: #ff7b00;
       opacity: 0;
       transform: translateY(15px);
       transition: all 0.3s ease;
       margin: 8px 0 0;
     }

     .team-card:hover .name {
       opacity: 1;
       transform: translateY(0);
     }


     /* ===================== TEAM SECTION /END ======================= */



     /* ==========================Footer Base================================== */
     .footer-section {
       background: #000;
       color: #fff;
       padding: 120px 8% 40px;
       position: relative;
       font-family: Arial, sans-serif;
       overflow: visible;
       text-align: left;
       margin-top: 60px;
     }


     /* Floating Logo */
     .footer-logo-container {
       position: absolute;
       top: -70px;
       /* Push half outside */
       left: 50%;
       transform: translateX(-50%);
       z-index: 10;
     }

     .footer-logo-bg {
       background: #fff;
       /* White background */
       border-radius: 20px;
       padding: 15px;
       box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
       display: flex;
       justify-content: center;
       align-items: center;
       width: 300px;
       height: 140px;
     }

     .footer-logo {
       max-width: 290px;
       height: auto;
     }


     /* Grid Layout */
     .footer-container {
       display: grid;
       grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
       gap: 40px;
       margin-top: 40px;
       margin-bottom: 40px;
     }

     /* Titles */
     .footer-column h3 {
       font-size: 1.2rem;
       margin-bottom: 20px;
       color: #ff8300;
     }

     /* Lists */
     .footer-column ul {
       list-style: none;
       padding: 0;
     }

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

     .footer-column a {
       text-decoration: none;
       color: #ddd;
       transition: color 0.3s;
     }

     .footer-column a:hover {
       color: #ff8300;
     }

     /* Form */
     .footer-form input,
     .footer-form textarea {
       width: 100%;
       padding: 10px;
       margin-bottom: 12px;
       border-radius: 8px;
       border: none;
       outline: none;
     }

     .footer-form .form-row {
       display: flex;
       gap: 10px;
     }

     .footer-form button {
       background: #ff8300;
       border: none;
       padding: 12px;
       width: 100%;
       border-radius: 8px;
       font-weight: bold;
       cursor: pointer;
       color: white;
       transition: background 0.3s;
     }

     .footer-form button:hover {
       background: #ff7b00;
     }

     /* Socials */
     .footer-socials {
       margin-top: 15px;
     }

     .footer-socials a img {
       width: 35px;
       margin-right: 10px;

       transition: transform 0.3s;
     }

     .footer-socials a img:hover {
       transform: scale(1.1);
     }

     /* Bottom */
     .footer-bottom {
       text-align: center;
       border-top: 1px solid #333;
       padding-top: 20px;
       font-size: 0.85rem;
       margin-bottom: 50px;
       color: #aaa;
     }

     /* Scroll animation */
     .animate-rtl {
       opacity: 0;
       transform: translateX(-80px);
       transition: all 0.8s ease;
     }

     .animate-rtl.show {
       opacity: 1;
       transform: translateX(0);
     }

     /* Responsive */
     @media (max-width: 768px) {
       .footer-container {
         grid-template-columns: 1fr;
         text-align: center;
       }

       .footer-form .form-row {
         flex-direction: column;
       }

       .footer-logo {
         max-width: 200px;
       }
     }