* {
     box-sizing: border-box;
 }

 html {
     scroll-behavior: smooth;
 }

 html,
 body {
     margin: 0;
     padding-top: 0px;
     padding-bottom: 0px;
     padding-left: 0px;
     padding-right: 0px;
 }

 body {
     font-family: 'Roboto', sans-serif;
     color: #192135;
     background: #f6f8fa;
     line-height: 1.6;
 }

 a {
     color: inherit;
     text-decoration: none;
 }

 img {
     max-width: 100%;
     display: block;
 }

 :root {
     --primary: #003366;
     --accent: #FFA500;
     --neutral: #f4f4f4;
     --deep: #0a0c1a;
     --green: #37be8a;
     --blue: #1677ff;
 }

 /* ----------- Header / Nav ----------- */
 header {
     background: #fff;
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
     position: sticky;
     top: 0;
     z-index: 100;
 }

 nav {
     display: flex;
     align-items: center;
     justify-content: space-between;
     max-width: 1200px;
     margin: 0 auto;
     padding: 1.1em 1.2em;
     flex-wrap: nowrap;
     position: relative;
 }

 .logo {
     display: flex;
     align-items: center;
     min-width: 0;
     flex-shrink: 0;
     flex-grow: 0;
     white-space: nowrap;
 }

 .logo img {
     width: 54px;
     margin-right: 0.6em;
 }

 .logo-text {
     font-size: 1.5em;
     font-weight: 700;
     color: var(--primary);
     letter-spacing: 0.03em;
     white-space: nowrap;
     min-width: 0;
     flex-shrink: 0;
 }

 .nav-links {
     display: flex;
     align-items: center;
     gap: 1.4em;
     list-style: none;
     margin: 0;
     padding: 0;
     transition: opacity 0.2s;
 }

 .nav-links .cta-btn {
     background: var(--accent);
     color: #fff;
     border-radius: 4px;
     padding: 0.5em 1.2em;
     font-weight: 500;
     transition: background 0.3s;
 }

 .nav-links .cta-btn:hover {
     background: #f79204;
 }

 .hamburger {
     display: none;
     position: relative;
     width: 44px;
     height: 44px;
     background: none;
     border: none;
     cursor: pointer;
     z-index: 300;
     /* Make sure it's above overlay/menu */
     justify-content: center;
     align-items: center;
     transition: background 0.2s;
 }

 .bar {
     position: absolute;
     left: 8px;
     /* horizontally center the bars */
     width: 28px;
     height: 3.5px;
     background: #003366;
     border-radius: 2px;
     transition: all 0.3s cubic-bezier(.8, .5, .2, 1.4);
 }

 .bar1 {
     top: 14px;
 }

 .bar2 {
     top: 21px;
 }

 .bar3 {
     top: 28px;
 }

 .hamburger.active .bar1 {
     transform: rotate(45deg) translate(5px, 5px);
 }

 .hamburger.active .bar2 {
     opacity: 0;
 }

 .hamburger.active .bar3 {
     transform: rotate(-45deg) translate(5px, -5px);
 }



 /* --- Mobile Menu --- */
 .mobile-menu {
     position: fixed;
     top: 0;
     right: -320px;
     width: 80vw;
     max-width: 320px;
     height: 100vh;
     background: #fff;
     box-shadow: -2px 0 18px rgba(0, 0, 0, 0.16);
     z-index: 201;
     display: flex;
     flex-direction: column;
     justify-content: flex-start;
     align-items: stretch;
     padding: 1.3em 1.2em 1.5em 1.2em;
     transition: right 0.34s cubic-bezier(.68, -0.55, .27, 1.55);
 }

 .mobile-menu.open {
     right: 0;
 }

 .mobile-menu ul {
     list-style: none;
     padding: 0;
     margin: 0;
     display: flex;
     flex-direction: column;
     gap: 1.15em;
 }

 .mobile-menu ul li a {
     font-size: 1.1em;
     color: var(--primary);
     font-weight: 500;
     letter-spacing: 0.01em;
 }

 .mobile-menu .cta-btn {
     margin-top: 1.3em;
     margin-bottom: 0.5em;
     padding: 0.7em 1.5em;
     border-radius: 6px;
     font-size: 1.1em;
     font-weight: 700;
     background: var(--accent);
     color: #fff;
     text-align: center;
     border: none;
     display: block;
     align-self: flex-start;
 }

 .mobile-menu .cta-btn:hover {
     background: #f79204;
 }

 .menu-overlay {
     display: none;
     position: fixed;
     top: 0;
     left: 0;
     width: 100vw;
     height: 100vh;
     background: rgba(0, 0, 0, 0.22);
     z-index: 200;
     transition: opacity 0.3s;
 }

 .menu-overlay.show {
     display: block;
 }

 @media (max-width: 900px) {
     nav {
         flex-wrap: nowrap;
     }

     .logo {
         min-width: 0;
     }

     .nav-links {
         display: none;
     }

     .hamburger {
         display: flex;
     }
 }

 @media (min-width: 901px) {

     .mobile-menu,
     .menu-overlay {
         display: none !important;
     }
 }



 /* ---------- Offers ---------- */
 .offers-section {
     background: #fff;
     padding: 3.5em 0 3.7em 0;
 }

 .offers-title {
     text-align: center;
     color: var(--primary);
     font-size: 2em;
     font-weight: 700;
     margin-bottom: 0.7em;
 }

 .offers-sub {
     text-align: center;
     color: #4b5e7e;
     font-size: 1.2em;
     margin-bottom: 2.2em;
 }

 .offers-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
     gap: 2em;
     max-width: 1100px;
     margin: 0 auto;
     align-items: stretch;
 }

 .offer-card {
     background: #f7fafd;
     border: 1px solid #e5ebf3;
     border-radius: 14px;
     padding: 2em 1.5em 1.7em 1.5em;
     box-shadow: 0 4px 18px rgba(0, 0, 0, 0.05);
     display: flex;
     flex-direction: column;
     align-items: flex-start;
     min-height: 300px;
     position: relative;
     transition: transform 0.16s, box-shadow 0.16s;
 }

 .offer-card:hover {
     transform: translateY(-7px) scale(1.01);
     box-shadow: 0 12px 40px rgba(0, 35, 92, 0.10);
     background: #f1f6fa;
 }

 .offer-icon {
     font-size: 2.5em;
     margin-bottom: 0.7em;
     color: var(--blue);
 }

 .offer-title {
     font-size: 1.25em;
     font-weight: 600;
     margin-bottom: 0.5em;
     color: var(--primary);
     letter-spacing: 0.01em;
 }

 .offer-benefit {
     color: var(--green);
     font-size: 1.05em;
     font-weight: 500;
     margin-bottom: 0.7em;
     margin-top: 0.2em;
     letter-spacing: 0.01em;
 }

 .offer-desc {
     font-size: 1em;
     color: #4a5c7d;
     margin-bottom: 1.1em;
 }

 .offer-tags {
     margin-top: auto;
     display: flex;
     flex-wrap: wrap;
     gap: 0.35em;
 }

 .offer-tag {
     background: #e8f0fe;
     color: #2b497a;
     font-size: 0.93em;
     padding: 0.25em 0.95em;
     border-radius: 15px;
     margin-bottom: 0.22em;
     font-weight: 400;
     letter-spacing: 0.01em;
 }

 /* ---------- Testimonials ---------- */
 .testimonials {
     background: #f4f4f4;
     padding: 3.5em 0 3.7em 0;
 }

 .testimonials h2 {
     text-align: center;
     color: var(--primary);
     font-size: 1.65em;
     font-weight: 700;
     margin-bottom: 2.2em;
 }

 .testimonial-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
     gap: 2.5em;
     max-width: 1100px;
     margin: 0 auto;
 }

 .testimonial-item {
     background: #fff;
     border-radius: 13px;
     box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
     padding: 2em 1.4em 1.6em 1.4em;
     font-style: italic;
     font-size: 1.07em;
     color: #31425d;
     border: 1px solid #e1e6ed;
 }

 .testimonial-client {
     margin-top: 1em;
     color: #7888a3;
     font-size: 1em;
     font-style: normal;
     font-weight: 500;
     letter-spacing: 0.01em;
 }

 /* ---------- Chatbot ---------- */
 .chatbot {
     position: fixed;
     bottom: 1.2em;
     right: 1.2em;
     background: var(--accent);
     color: #fff;
     font-size: 1.1em;
     font-weight: 600;
     padding: 1em;
     border-radius: 50%;
     cursor: pointer;
     box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
     z-index: 120;
     display: flex;
     align-items: center;
     justify-content: center;
     transition: background 0.2s;
 }

 .chatbot:hover {
     background: #e68400;
 }

 /* ---------- About/Team ---------- */
 .about {
     padding: 3.5em 0 3.7em 0;
     /*background: #fff;*/
     background: #f4f4f4;
 }

 .about h2 {
     text-align: center;
     color: var(--primary);
     font-size: 1.5em;
     margin-bottom: 2em;
     font-weight: 700;
 }

 .about p {
     text-align: center;
     max-width: 800px;
     margin: 0 auto 2.2em auto;
     color: #3a4565;
     font-size: 1.09em;
 }

 .team-grid {
     display: flex;
     gap: 2.6em;
     justify-content: center;
     flex-wrap: wrap;
     margin-top: 2.5em;
     margin-bottom: 2.5em;
 }

 .team-member {
     background: linear-gradient(135deg, #e3f1ff 70%, #fef4e5 130%);
     border-radius: 26px;
     box-shadow: 0 3px 26px rgba(50, 70, 120, 0.08);
     padding: 2.2em 2em 2em 2em;
     width: 300px;
     text-align: center;
     transition: box-shadow 0.15s;
     position: relative;
     min-height: 340px;
     display: flex;
     flex-direction: column;
     align-items: center;
 }

 .team-member:hover {
     box-shadow: 0 6px 36px rgba(50, 70, 120, 0.17);
 }

 .profile-pic-bg {
     width: 120px;
     height: 120px;
     border-radius: 50%;
     margin: 0 auto 1.2em auto;
     background: linear-gradient(140deg, #b8dafc 0%, #ffe7be 100%);
     display: flex;
     align-items: center;
     justify-content: center;
     box-shadow: 0 1px 9px rgba(30, 40, 66, 0.09);
 }

 .profile-pic-bg img {
     width: 102px;
     height: 102px;
     border-radius: 50%;
     object-fit: cover;
     background: #fff;
     /* fallback for images with transparent background */
     display: block;
     border: 3px solid #fff;
     /* clean visual buffer */
 }

 .team-member h3 {
     margin: 0 0 0.6em 0;
     font-size: 1.28em;
     color: #194067;
     font-weight: 700;
     letter-spacing: 0.01em;
 }

 .team-member p {
     margin: 0;
     color: #174264;
     font-size: 1.05em;
     font-weight: 400;
 }

 .team-member p span {
     display: block;
     font-size: 0.97em;
     font-style: italic;
     color: #286bb6;
     margin-top: 0.5em;
 }



 /* ---------- Footer ---------- */
 footer {
     background: var(--primary);
     color: #fff;
     padding: 1em 1em;
     font-size: 1em;
 }

 .footer-content {
     max-width: 600px;
     margin: 0 auto;
     text-align: center;
 }

 footer h3 {
     font-size: 1.07em;
     margin-bottom: 0.8em;
 }

 .footer-section a {
     color: #fff;
 }

 .social-icons {
     display: flex;
     gap: 1em;
     margin-top: 0.6em;
 }

 .social-icons img {
     background: #fff;
     border-radius: 6px;
 }

 @media (max-width: 700px) {
     nav {
         flex-direction: row;
         gap: 0.9em;
     }

     .offers-grid,
     .testimonial-grid,
     .team-grid,
     .footer-content {
         grid-template-columns: 1fr;
     }

     .hero-media {
         height: 160px;
     }
 }