:root {
     --navy: #101d32;
     --navy2: #172a45;
     --red: #e63946;
     --red-dark: #c92534;
     --ink: #252b35;
     --muted: #667085;
     --light: #f4f6f8;
     --white: #fff;
     --line: #e5e9ef;
     --shadow: 0 18px 45px rgba(16, 29, 50, .10)
 }

 * {
     box-sizing: border-box
 }

 html {
     scroll-behavior: smooth
 }

 body {
     font-family: Inter, Arial, sans-serif;
     color: var(--ink);
     line-height: 1.7;
     margin: 0
 }

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

 a {
     text-decoration: none
 }

 .topbar {
     background: var(--navy);
     color: #dbe3ef;
     font-size: .86rem;
     padding: 9px 0
 }

 .top-contact {
     display: flex;
     align-items: center;
     gap: 12px
 }

 .top-contact a {
     color: #fff;
     font-weight: 600
 }

 .top-contact a:hover {
     color: #ff8b92
 }

 .top-contact i {
     color: var(--red);
     margin-right: 6px
 }

 .top-divider {
     opacity: .35
 }

 .top-social {
     display: flex;
     gap: 8px
 }

 .top-social a,
 .footer-social a {
     width: 30px;
     height: 30px;
     border: 1px solid rgba(255, 255, 255, .2);
     border-radius: 50%;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     color: #fff;
     font-size: .78rem;
     transition: .25s
 }

 .top-social a:hover,
 .footer-social a:hover {
     background: var(--red);
     border-color: var(--red)
 }

 .main-nav {
     background: #fff;
     box-shadow: 0 5px 24px rgba(16, 29, 50, .07);
     padding: 13px 0;
     position: sticky;
     top: 0;
     z-index: 1000
 }

 .brand {
     display: flex;
     align-items: center;
     gap: 10px;
     color: var(--navy);
     font-family: 'Barlow Condensed', sans-serif;
     font-size: 1.45rem;
     line-height: 1;
     font-weight: 800;
     letter-spacing: .5px
 }

 .brand:hover {
     color: var(--navy)
 }

 .brand b {
     color: var(--red)
 }

 .brand small {
     display: block;
     font: 600 .55rem Inter, sans-serif;
     letter-spacing: 2.1px;
     color: #7b8491;
     margin-top: 6px
 }

 .brand-mark {
     width: 44px;
     height: 44px;
     background: var(--red);
     color: #fff;
     display: flex;
     align-items: center;
     justify-content: center;
     border-radius: 11px;
     font-size: 1.4rem;
     transform: skew(-4deg)
 }

 .navbar-nav {
     gap: 7px
 }

 .main-nav .nav-link {
     font-size: .9rem;
     font-weight: 700;
     color: #344054;
     padding: 10px 12px !important;
     position: relative
 }

 .main-nav .nav-link:after {
     content: "";
     height: 2px;
     width: 0;
     position: absolute;
     bottom: 3px;
     left: 12px;
     background: var(--red);
     transition: .25s
 }

 .main-nav .nav-link:hover,
 .main-nav .nav-link.active {
     color: var(--red)
 }

 .main-nav .nav-link:hover:after,
 .main-nav .nav-link.active:after {
     width: calc(100% - 24px)
 }

 .btn {
     border-radius: 5px;
     font-weight: 700;
     letter-spacing: .1px;
     padding: 12px 20px;
     transition: transform .2s, background .2s, box-shadow .2s
 }

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

 .btn-accent {
     background: var(--red);
     color: #fff;
     border: 1px solid var(--red);
     box-shadow: 0 8px 20px rgba(230, 57, 70, .2)
 }

 .btn-accent:hover,
 .btn-accent:focus {
     background: var(--red-dark);
     border-color: var(--red-dark);
     color: #fff
 }

 .btn-dark-custom {
     background: var(--navy);
     color: #fff
 }

 .btn-dark-custom:hover {
     background: var(--red);
     color: #fff
 }

 .nav-cta {
     white-space: nowrap;
     padding: 11px 15px;
     font-size: .86rem
 }

 .hero-slide {
     height: min(690px, 78vh);
     min-height: 550px;
     background-size: cover;
     background-position: center;
     display: flex;
     align-items: center;
     color: #fff
 }

 .hero-content {
     padding-top: 35px;
     padding-bottom: 50px
 }

 .eyebrow,
 .section-kicker {
     display: inline-block;
     color: var(--red);
     font-size: .76rem;
     letter-spacing: 2px;
     font-weight: 800;
     margin-bottom: 13px
 }

 .eyebrow {
     color: #ff858d
 }

 .hero-content h1,
 .page-banner h1 {
     font-family: 'Barlow Condensed', sans-serif;
     font-weight: 800;
     font-size: clamp(3.6rem, 7vw, 6.5rem);
     line-height: .96;
     letter-spacing: .2px;
     margin: 0 0 22px;
     text-transform: uppercase
 }

 .hero-content h1 em,
 .page-banner h1 em,
 .section-title em {
     font-style: normal;
     color: var(--red)
 }

 .hero-content p {
     max-width: 570px;
     font-size: 1.12rem;
     color: #e3e8ef;
     margin-bottom: 28px
 }

 .hero-slider .carousel-indicators {
     justify-content: flex-start;
     margin-left: max(calc((100% - 1320px)/2), 7%);
     margin-bottom: 30px
 }

 .hero-slider .carousel-indicators [data-bs-target] {
     width: 28px;
     height: 4px;
     border: 0;
     margin-right: 7px
 }

 .hero-bottom-line {
     height: 5px;
     background: linear-gradient(90deg, var(--red) 0 27%, var(--navy) 27% 100%)
 }

 .trust-strip {
     background: #fff;
     border-bottom: 1px solid var(--line);
     padding: 20px 0
 }

 .trust-item {
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 12px;
     color: var(--navy);
     font-size: .9rem;
     font-weight: 800
 }

 .trust-item i {
     font-size: 1.3rem;
     color: var(--red)
 }

 .section-padding {
     padding: 94px 0
 }

 .section-light {
     background: var(--light)
 }

 .section-title {
     font-family: 'Barlow Condensed', sans-serif;
     font-size: clamp(2.5rem, 4vw, 3.65rem);
     line-height: 1.04;
     font-weight: 800;
     color: var(--navy);
     margin: 0 0 18px
 }

 .section-heading {
     max-width: 700px;
     margin: 0 auto 45px
 }

 .section-heading>p {
     color: var(--muted);
     margin-bottom: 0
 }

 .lead-copy {
     font-size: 1.12rem;
     font-weight: 600;
     color: #344054
 }

 .about-visual {
     position: relative;
     padding: 0 28px 28px 0
 }

 /* .about-visual:before {
     content: "";
     position: absolute;
     left: 25px;
     right: 0;
     bottom: 0;
     top: 35px;
     border: 5px solid var(--red);
     border-radius: 8px
 } */

 .about-visual img {
     position: relative;
     width: 100%;
     height: 490px;
     object-fit: cover;
     border-radius: 8px;
     box-shadow: var(--shadow)
 }

 .experience-badge {
     position: absolute;
     right: 0;
     bottom: 55px;
     background: var(--navy);
     color: #fff;
     padding: 19px 23px;
     display: flex;
     gap: 12px;
     align-items: center;
     border-left: 4px solid var(--red);
     box-shadow: var(--shadow)
 }

 .experience-badge strong {
     font-family: 'Barlow Condensed';
     font-size: 2rem;
     color: var(--red)
 }

 .experience-badge span {
     font-size: .72rem;
     font-weight: 800;
     line-height: 1.4;
     letter-spacing: 1px
 }

 .check-list {
     list-style: none;
     padding: 0;
     margin: 20px 0
 }

 .check-list li {
     margin: 10px 0;
     font-weight: 600;
     color: #3c4655
 }

 .check-list i {
     color: var(--red);
     margin-right: 8px
 }

 .service-card {
     background: #fff;
     border: 1px solid #edf0f4;
     border-radius: 8px;
     overflow: hidden;
     height: 100%;
     transition: transform .28s, box-shadow .28s
 }

 .service-card:hover {
     transform: translateY(-7px);
     box-shadow: var(--shadow)
 }

 .service-image {
     height: 190px;
     position: relative;
     overflow: hidden
 }

 .service-image img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     transition: transform .5s
 }

 .service-card:hover .service-image img {
     transform: scale(1.06)
 }

 .service-icon {
     position: absolute;
     left: 18px;
     bottom: -1px;
     width: 48px;
     height: 48px;
     display: flex;
     align-items: center;
     justify-content: center;
     background: var(--red);
     color: #fff;
     border-radius: 8px 8px 0 0;
     font-size: 1.25rem
 }

 .service-card-body {
     padding: 25px 20px 22px
 }

 .service-card h3 {
     font-family: 'Barlow Condensed';
     font-weight: 700;
     color: var(--navy);
     font-size: 1.55rem;
     margin: 0 0 8px
 }

 .service-card p {
     font-size: .9rem;
     color: var(--muted);
     min-height: 68px;
     margin-bottom: 16px
 }

 .text-link {
     color: var(--red);
     font-weight: 800;
     font-size: .88rem;
     display: inline-flex;
     gap: 9px;
     align-items: center
 }

 .text-link i {
     transition: transform .2s
 }

 .text-link:hover {
     color: var(--red-dark)
 }

 .text-link:hover i {
     transform: translateX(4px)
 }

 .why-section {
     background: var(--navy);
     color: #fff
 }

 .why-section .section-title {
     color: #fff
 }

 .why-section .section-heading>p {
     color: #bac5d4
 }

 .why-section .section-kicker {
     color: #ff858d
 }

 .reason-card {
     height: 100%;
     display: flex;
     gap: 18px;
     padding: 26px 22px;
     border: 1px solid rgba(255, 255, 255, .13);
     border-radius: 7px;
     background: rgba(255, 255, 255, .035);
     transition: .25s
 }

 .reason-card:hover {
     background: rgba(255, 255, 255, .08);
     transform: translateY(-4px)
 }

 .reason-icon {
     flex: 0 0 48px;
     width: 48px;
     height: 48px;
     border-radius: 8px;
     display: flex;
     align-items: center;
     justify-content: center;
     background: var(--red);
     font-size: 1.2rem
 }

 .reason-card h3 {
     font-family: 'Barlow Condensed';
     font-size: 1.4rem;
     margin: 0 0 5px
 }

 .reason-card p {
     font-size: .88rem;
     color: #c3ccda;
     margin: 0
 }

 .gallery-grid {
     display: grid;
     grid-template-columns: repeat(4, minmax(0, 1fr));
     gap: 18px
 }

 .gallery-item {
     position: relative;
     overflow: hidden;
     border-radius: 7px;
     min-height: 200px;
     background: var(--navy);
     display: block
 }

 .gallery-item img {
     width: 100%;
     height: 235px;
     object-fit: cover;
     transition: transform .5s, opacity .3s
 }

 .gallery-item:hover img {
     transform: scale(1.07);
     opacity: .78
 }

 .gallery-item span {
     position: absolute;
     inset: auto 0 0;
     padding: 28px 15px 14px;
     color: #fff;
     display: flex;
     align-items: center;
     justify-content: space-between;
     background: linear-gradient(transparent, rgba(10, 22, 39, .86));
     opacity: 0;
     transition: .25s
 }

 .gallery-item:hover span {
     opacity: 1
 }

 .gallery-large .gallery-item img {
     height: 270px
 }

 .cta-section {
     background: linear-gradient(110deg, var(--red), #c92334);
     color: #fff;
     padding: 58px 0;
     position: relative;
     overflow: hidden
 }

 .cta-section:after {
     content: "";
     position: absolute;
     right: -60px;
     top: -120px;
     width: 330px;
     height: 330px;
     border: 50px solid rgba(255, 255, 255, .08);
     border-radius: 50%;
     pointer-events: none
 }

 .cta-section .container {
     position: relative;
     z-index: 1
 }

 .cta-section h2 {
     font-family: 'Barlow Condensed';
     font-size: clamp(2.3rem, 4vw, 3.5rem);
     font-weight: 800;
     margin: 0 0 8px
 }

 .cta-section p {
     color: #ffe7e9;
     margin: 0
 }

 .light-kicker {
     color: #ff9299
 }

 .page-banner {
     min-height: 310px;
     background-position: center;
     background-size: cover;
     display: flex;
     align-items: center;
     color: #fff;
     padding: 65px 0
 }

 .page-banner h1 {
     font-size: clamp(3.4rem, 6vw, 5.2rem);
     margin-bottom: 14px
 }

 .page-banner p {
     margin: 0;
     color: #dbe3ef;
     font-size: .9rem
 }

 .page-banner p a {
     color: #fff
 }

 .page-banner p i {
     font-size: .65rem;
     color: var(--red);
     margin: 0 9px
 }

 .about-page-image {
     position: relative;
     padding: 0 0 22px 22px
 }

 /* .about-page-image:before {
     content: "";
     position: absolute;
     inset: 22px 22px 0 0;
     border: 5px solid var(--red);
     border-radius: 8px
 } */

 .about-page-image img {
     position: relative;
     width: 100%;
     height: 470px;
     object-fit: cover;
     border-radius: 8px
 }

 .vision-card {
     height: 100%;
     background: #fff;
     border-radius: 8px;
     padding: 38px;
     box-shadow: var(--shadow);
     border-top: 4px solid var(--navy)
 }

 .vision-card-red {
     border-top-color: var(--red)
 }

 .vision-icon {
     width: 58px;
     height: 58px;
     display: flex;
     align-items: center;
     justify-content: center;
     background: #fce7e9;
     color: var(--red);
     font-size: 1.5rem;
     border-radius: 10px;
     margin-bottom: 20px
 }

 .vision-card h2 {
     font-family: 'Barlow Condensed';
     font-weight: 800;
     color: var(--navy);
     font-size: 2rem
 }

 .vision-card p {
     color: var(--muted);
     margin-bottom: 0
 }

 .simple-feature {
     text-align: center;
     padding: 30px 24px;
     height: 100%;
     border: 1px solid var(--line);
     border-radius: 8px
 }

 .simple-feature>i {
     font-size: 2rem;
     color: var(--red);
     margin-bottom: 16px
 }

 .simple-feature h3 {
     font-family: 'Barlow Condensed';
     font-size: 1.55rem;
     color: var(--navy)
 }

 .simple-feature p {
     color: var(--muted);
     margin-bottom: 0
 }

 .contact-panel {
     height: 100%;
     background: var(--navy);
     color: #fff;
     border-radius: 8px;
     padding: 36px;
     position: relative;
     overflow: hidden
 }

 .contact-panel:after {
     content: "";
     position: absolute;
     width: 210px;
     height: 210px;
     border: 32px solid rgba(255, 255, 255, .045);
     border-radius: 50%;
     right: -90px;
     bottom: -90px
 }

 .contact-panel h2 {
     font-family: 'Barlow Condensed';
     font-size: 2.5rem;
     font-weight: 800
 }

 .contact-panel>p {
     color: #c4cede;
     margin-bottom: 28px
 }

 .contact-detail {
     display: flex;
     gap: 15px;
     margin: 24px 0;
     position: relative;
     z-index: 1
 }

 .contact-detail>span {
     flex: 0 0 43px;
     width: 43px;
     height: 43px;
     display: flex;
     align-items: center;
     justify-content: center;
     background: var(--red);
     border-radius: 7px
 }

 .contact-detail small {
     display: block;
     text-transform: uppercase;
     letter-spacing: 1.3px;
     font-size: .68rem;
     font-weight: 800;
     color: #aebbd0;
     margin-bottom: 3px
 }

 .contact-detail a {
     display: block;
     color: #fff;
     font-weight: 700
 }

 .contact-detail a:hover {
     color: #ff9299
 }

 .contact-detail p {
     margin: 0;
     color: #f1f4f8;
     font-size: .92rem
 }

 .contact-form-card {
     height: 100%;
     background: #fff;
     padding: 36px;
     border-radius: 8px;
     box-shadow: var(--shadow)
 }

 .contact-form-card h2 {
     font-family: 'Barlow Condensed';
     font-size: 2.35rem;
     font-weight: 800;
     color: var(--navy)
 }

 .contact-form-card>p {
     color: var(--muted);
     margin-bottom: 25px
 }

 .form-label {
     font-weight: 700;
     font-size: .85rem;
     color: #344054
 }

 .form-control,
 .form-select {
     border: 1px solid #d9dee7;
     border-radius: 5px;
     padding: 12px 13px;
     font-size: .92rem
 }

 .form-control:focus,
 .form-select:focus {
     border-color: var(--red);
     box-shadow: 0 0 0 .2rem rgba(230, 57, 70, .12)
 }

 .map-section {
     padding: 75px 0
 }

 .map-frame {
     height: 380px;
     border-radius: 8px;
     overflow: hidden;
     box-shadow: var(--shadow)
 }

 .map-frame iframe {
     width: 100%;
     height: 100%;
     border: 0
 }

 .site-footer {
     background: #0b1525;
     color: #b6c1d0;
     padding: 65px 0 0
 }

 .footer-main {
     padding-bottom: 42px
 }

 .footer-brand {
     color: #fff;
     margin-bottom: 20px;
     display: inline-flex
 }

 .footer-brand:hover {
     color: #fff
 }

 .footer-about {
     font-size: .9rem;
     max-width: 330px;
     color: #aab5c4
 }

 .site-footer h5 {
     color: #fff;
     font-size: 1rem;
     font-weight: 800;
     margin-bottom: 22px;
     position: relative;
     padding-bottom: 12px
 }

 .site-footer h5:after {
     content: "";
     position: absolute;
     left: 0;
     bottom: 0;
     width: 38px;
     height: 3px;
     background: var(--red)
 }

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

 .footer-links,
 .footer-contact {
     list-style: none;
     padding: 0;
     margin: 0
 }

 .footer-links li {
     margin: 10px 0
 }

 .footer-links a {
     color: #b6c1d0;
     font-size: .9rem;
     transition: .2s
 }

 .footer-links a:before {
     content: "›";
     color: var(--red);
     font-size: 1.1rem;
     margin-right: 9px
 }

 .footer-links a:hover {
     color: #fff;
     padding-left: 3px
 }

 .footer-contact li {
     display: flex;
     align-items: flex-start;
     gap: 12px;
     margin-bottom: 18px;
     font-size: .88rem
 }

 .footer-contact i {
     color: var(--red);
     margin-top: 5px
 }

 .footer-contact a {
     color: #dce3ec
 }

 .footer-contact a:hover {
     color: #fff
 }

 .footer-bottom {
     border-top: 1px solid rgba(255, 255, 255, .1);
     padding: 19px 0;
     font-size: .8rem;
     color: #8e9bad
 }

 .floating-call,
 .floating-whatsapp {
     position: fixed;
     right: 18px;
     z-index: 900;
     width: 48px;
     height: 48px;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     color: #fff;
     box-shadow: 0 7px 20px rgba(0, 0, 0, .2);
     font-size: 1.2rem
 }

 .floating-call {
     bottom: 80px;
     background: var(--red)
 }

 .floating-whatsapp {
     bottom: 22px;
     background: #25d366
 }

 .floating-call:hover,
 .floating-whatsapp:hover {
     color: #fff;
     transform: translateY(-3px)
 }

 @media(max-width:991px) {
     .main-nav .navbar-collapse {
         padding-top: 15px
     }

     .main-nav .nav-link {
         padding: 9px 0 !important
     }

     .main-nav .nav-link:after {
         left: 0
     }

     .main-nav .nav-link:hover:after,
     .main-nav .nav-link.active:after {
         width: 45px
     }

     .nav-cta {
         display: inline-block;
         margin: 10px 0
     }

     .hero-slide {
         height: 650px;
         min-height: 520px
     }

     .about-visual img {
         height: 420px
     }

     .gallery-grid {
         grid-template-columns: repeat(2, minmax(0, 1fr))
     }

     .trust-item {
         justify-content: flex-start
     }

     .section-padding {
         padding: 75px 0
     }
 }

 @media(max-width:575px) {
     .topbar {
         font-size: .76rem
     }

     .top-social {
         gap: 5px
     }

     .top-social a {
         width: 27px;
         height: 27px
     }

     .brand {
         font-size: 1.2rem
     }

     .brand-mark {
         width: 38px;
         height: 38px;
         font-size: 1.2rem
     }

     .hero-slide {
         height: 620px;
         min-height: 570px;
         background-position: 60% center
     }

     .hero-content h1 {
         font-size: 3.5rem
     }

     .hero-content p {
         font-size: 1rem
     }

     .hero-content .btn {
         width: 100%
     }

     .hero-slider .carousel-indicators {
         margin-left: 24px
     }

     .trust-item {
         font-size: .78rem;
         gap: 8px
     }

     .trust-item i {
         font-size: 1rem
     }

     .section-padding {
         padding: 60px 0
     }

     .section-heading {
         margin-bottom: 30px
     }

     .about-visual {
         padding: 0 14px 16px 0
     }

     .about-visual img {
         height: 330px
     }

     .experience-badge {
         bottom: 32px;
         padding: 13px
     }

     .gallery-grid {
         gap: 10px
     }

     .gallery-item {
         min-height: 145px
     }

     .gallery-item img,
     .gallery-large .gallery-item img {
         height: 155px
     }

     .gallery-item span {
         opacity: 1;
         padding: 22px 9px 9px;
         font-size: .72rem
     }

     .page-banner {
         min-height: 250px;
         padding: 48px 0
     }

     .page-banner h1 {
         font-size: 3.3rem
     }

     .about-page-image img {
         height: 330px
     }

     .vision-card,
     .contact-panel,
     .contact-form-card {
         padding: 25px
     }

     .map-frame {
         height: 300px
     }

     .footer-main {
         padding-bottom: 25px
     }

     .footer-bottom {
         font-size: .75rem
     }

     .cta-section {
         padding: 45px 0
     }

     .floating-call,
     .floating-whatsapp {
         right: 12px;
         width: 44px;
         height: 44px
     }
 }