:root {
     --navy: #101a31;
     --navy2: #192846;
     --gold: #d9aa45;
     --gold2: #f2cc75;
     --cream: #f8f5ee;
     --text: #243047;
     --muted: #697386;
     --white: #fff;
     --line: #e7e4dc;
     --shadow: 0 18px 50px rgba(16, 26, 49, .12)
 }

 * {
     box-sizing: border-box
 }

 html {
     scroll-behavior: smooth
 }

 body {
     margin: 0;
     font-family: "DM Sans", sans-serif;
     color: var(--text);
     line-height: 1.7
 }

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

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

 .container {
     width: min(1160px, calc(100% - 44px));
     margin: auto
 }

 .topbar {
     background: var(--navy);
     color: #e9edf5;
     font-size: 12px
 }

 .topbar-inner {
     min-height: 42px;
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 15px
 }

 .top-contact {
     display: flex;
     gap: 24px;
     flex-wrap: wrap
 }

 .top-contact a {
     opacity: .92
 }

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

 .socials {
     display: flex;
     align-items: center;
     gap: 8px
 }

 .socials a {
     display: grid;
     place-items: center;
     width: 28px;
     height: 28px;
     border: 1px solid rgba(255, 255, 255, .18);
     border-radius: 50%;
     transition: .25s
 }

 .socials a:hover {
     background: var(--gold);
     color: var(--navy);
     border-color: var(--gold)
 }

 .site-header {
     background: #fff;
     position: sticky;
     top: 0;
     z-index: 20;
     box-shadow: 0 5px 24px rgba(16, 26, 49, .07)
 }

 .nav-wrap {
     min-height: 88px;
     display: grid;
     grid-template-columns: 1fr auto auto;
     align-items: center;
     gap: 35px
 }

 .brand {
     display: inline-flex;
     align-items: center;
     gap: 12px;
     width: max-content
 }

 .brand-mark {
     width: 48px;
     height: 48px;
     border: 2px solid var(--gold);
     border-radius: 14px 14px 18px 18px;
     display: grid;
     place-items: center;
     background: var(--navy);
     color: var(--gold2);
     font-size: 23px
 }

 .brand-text {
     display: flex;
     flex-direction: column;
     line-height: 1.2
 }

 .brand-text strong {
     font: 800 20px Montserrat, sans-serif;
     letter-spacing: 1.2px;
     color: var(--navy)
 }

 .brand-text small {
     font-size: 9px;
     letter-spacing: 1.25px;
     font-weight: 700;
     color: #8b6a28;
     margin-top: 5px
 }

 .main-nav {
     display: flex;
     align-items: center;
     gap: 26px
 }

 .main-nav a {
     font-size: 13px;
     font-weight: 700;
     color: #39445a;
     position: relative;
     padding: 10px 0
 }

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

 .main-nav a:hover:after,
 .main-nav a.active:after {
     width: 100%
 }

 .main-nav a.active {
     color: var(--navy)
 }

 .btn {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     gap: 10px;
     padding: 14px 21px;
     font-size: 12px;
     font-weight: 800;
     letter-spacing: .2px;
     border: 1px solid transparent;
     transition: .25s;
     cursor: pointer
 }

 .btn-gold {
     background: var(--gold);
     color: var(--navy)
 }

 .btn-gold:hover {
     background: var(--gold2);
     transform: translateY(-2px)
 }

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

 .btn-dark:hover {
     background: #263858;
     transform: translateY(-2px)
 }

 .btn-outline {
     border-color: rgba(255, 255, 255, .65);
     color: #fff;
     background: rgba(255, 255, 255, .05)
 }

 .btn-outline:hover {
     background: #fff;
     color: var(--navy)
 }

 .menu-toggle {
     display: none;
     background: var(--navy);
     border: 0;
     color: #fff;
     width: 43px;
     height: 43px;
     font-size: 20px
 }

 .hero-slider {
     height: min(690px, calc(100vh - 130px));
     min-height: 550px;
     position: relative;
     overflow: hidden;
     background: var(--navy)
 }

 .hero-slide {
     position: absolute;
     inset: 0;
     background-image: var(--hero-image);
     background-size: cover;
     background-position: center;
     opacity: 0;
     visibility: hidden;
     transition: opacity .8s ease
 }

 .hero-slide.active {
     opacity: 1;
     visibility: visible
 }

 .hero-shade,
 .banner-overlay {
     position: absolute;
     inset: 0;
     background: linear-gradient(90deg, rgba(9, 17, 33, .92) 0%, rgba(9, 17, 33, .75) 48%, rgba(9, 17, 33, .18) 100%)
 }

 .hero-content {
     position: relative;
     z-index: 1;
     height: 100%;
     display: flex;
     flex-direction: column;
     align-items: flex-start;
     justify-content: center;
     color: #fff;
     padding-bottom: 25px
 }

 .eyebrow {
     display: inline-block;
     color: #9b762c;
     font-size: 10px;
     letter-spacing: 2.2px;
     font-weight: 800;
     margin-bottom: 14px
 }

 .eyebrow.light {
     color: var(--gold2)
 }

 h1,
 h2,
 h3,
 p {
     margin-top: 0
 }

 h1,
 h2,
 h3 {
     font-family: Montserrat, sans-serif
 }

 h1 {
     font-size: clamp(38px, 5.4vw, 68px);
     line-height: 1.13;
     letter-spacing: -1.8px;
     max-width: 800px;
     margin-bottom: 22px
 }

 h1 em,
 h2 em {
     font-style: normal;
     color: var(--gold2)
 }

 .hero-content p {
     max-width: 560px;
     color: #e1e5ed;
     font-size: 16px;
     margin-bottom: 30px
 }

 .hero-actions {
     display: flex;
     gap: 12px;
     flex-wrap: wrap
 }

 .hero-controls {
     position: absolute;
     bottom: 36px;
     left: max(22px, calc((100% - 1160px)/2));
     display: flex;
     align-items: center;
     gap: 14px;
     color: #fff;
     z-index: 3
 }

 .hero-controls button {
     height: 42px;
     width: 42px;
     border: 1px solid rgba(255, 255, 255, .4);
     background: transparent;
     color: white;
     cursor: pointer
 }

 .hero-controls button:hover {
     background: var(--gold);
     color: var(--navy)
 }

 .hero-count {
     font-size: 11px;
     letter-spacing: 2px
 }

 .hero-badge {
     position: absolute;
     right: max(22px, calc((100% - 1160px)/2));
     bottom: 34px;
     z-index: 2;
     display: flex;
     align-items: center;
     gap: 13px;
     padding: 17px 21px;
     background: #fff;
     color: var(--navy);
     box-shadow: var(--shadow)
 }

 .hero-badge>i {
     font-size: 27px;
     color: #a77a21
 }

 .hero-badge span {
     display: flex;
     flex-direction: column;
     line-height: 1.4
 }

 .hero-badge strong {
     font: 700 13px Montserrat
 }

 .hero-badge small {
     font-size: 10px;
     color: var(--muted)
 }

 .section {
     padding: 100px 0
 }

 .section-soft {
     background: var(--cream)
 }

 .about-grid {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 85px;
     align-items: center
 }

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

 .about-visual>img {
     width: 100%;
     height: 475px;
     object-fit: cover;
     position: relative;
     z-index: 1
 }

 .visual-outline {
     position: absolute;
     right: 0;
     bottom: 0;
     width: 65%;
     height: 65%;
     border: 2px solid var(--gold);
     z-index: 0
 }

 .experience-card {
     position: absolute;
     left: -24px;
     bottom: 54px;
     background: var(--navy);
     color: #fff;
     padding: 20px 24px;
     z-index: 2;
     display: flex;
     flex-direction: column;
     min-width: 145px;
     border-bottom: 3px solid var(--gold)
 }

 .experience-card strong {
     font-size: 10px;
     color: var(--gold2);
     letter-spacing: 2px
 }

 .experience-card b {
     font: 800 36px Montserrat;
     line-height: 1.35
 }

 .experience-card span {
     font-size: 10px;
     color: #d2d9e5
 }

 .section-copy h2,
 .section-heading h2,
 .contact-info h2,
 .contact-form-wrap h2,
 .map-heading h2 {
     font-size: clamp(29px, 3.5vw, 43px);
     line-height: 1.2;
     letter-spacing: -1px;
     margin-bottom: 20px;
     color: var(--navy)
 }

 .section-copy h2 em,
 .section-heading h2 em,
 .contact-info h2 em,
 .contact-form-wrap h2 em,
 .map-heading h2 em {
     color: #b78b34
 }

 .section-copy p {
     color: var(--muted);
     font-size: 14px;
     margin-bottom: 18px
 }

 .text-link {
     font-size: 12px;
     font-weight: 800;
     color: var(--navy);
     display: inline-flex;
     align-items: center;
     gap: 12px;
     border-bottom: 1px solid var(--gold);
     padding-bottom: 7px;
     margin-top: 7px
 }

 .text-link i {
     color: #ad812a;
     transition: .2s
 }

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

 .mini-points {
     display: flex;
     flex-wrap: wrap;
     gap: 18px;
     margin-top: 26px;
     font-size: 11px;
     font-weight: 700
 }

 .mini-points i,
 .about-checks i {
     color: #ad812a;
     margin-right: 6px
 }

 .section-heading {
     text-align: center;
     max-width: 670px;
     margin: 0 auto 45px
 }

 .section-heading p {
     color: var(--muted);
     font-size: 14px;
     margin-bottom: 0
 }

 .section-heading h2 {
     margin-bottom: 15px
 }

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

 .service-card {
     background: #fff;
     position: relative;
     box-shadow: 0 8px 35px rgba(16, 26, 49, .07);
     transition: transform .3s, box-shadow .3s;
     min-width: 0
 }

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

 .service-card>img {
     width: 100%;
     height: 230px;
     object-fit: cover
 }

 .service-icon {
     position: absolute;
     top: 197px;
     right: 22px;
     width: 62px;
     height: 62px;
     background: var(--gold);
     color: var(--navy);
     display: grid;
     place-items: center;
     font-size: 23px;
     border: 5px solid white
 }

 .service-body {
     padding: 35px 25px 27px
 }

 .service-body h3 {
     font-size: 18px;
     color: var(--navy);
     margin-bottom: 11px
 }

 .service-body p {
     font-size: 13px;
     color: var(--muted);
     min-height: 44px;
     margin-bottom: 18px
 }

 .service-body a {
     font-size: 11px;
     font-weight: 800;
     color: #9a7225
 }

 .service-body a i {
     margin-left: 5px
 }

 .center-action {
     text-align: center;
     margin-top: 38px
 }

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

 .why-section:before {
     content: "";
     position: absolute;
     width: 400px;
     height: 400px;
     border: 1px solid rgba(217, 170, 69, .15);
     border-radius: 50%;
     top: -210px;
     right: -100px
 }

 .why-section .section-heading h2 {
     color: #fff
 }

 .why-section .section-heading p {
     color: #b8c1d1
 }

 .why-grid {
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     gap: 16px
 }

 .why-card {
     position: relative;
     padding: 29px 23px 26px;
     border: 1px solid rgba(255, 255, 255, .13);
     background: rgba(255, 255, 255, .035);
     min-height: 225px
 }

 .why-card>span {
     position: absolute;
     right: 18px;
     top: 12px;
     font: 700 12px Montserrat;
     color: rgba(255, 255, 255, .32)
 }

 .why-card>i {
     color: var(--gold2);
     font-size: 27px;
     margin: 10px 0 20px
 }

 .why-card h3 {
     font-size: 15px;
     margin-bottom: 11px
 }

 .why-card p {
     font-size: 12px;
     color: #b8c1d1;
     margin: 0
 }

 .heading-row {
     display: flex;
     justify-content: space-between;
     align-items: end;
     max-width: none;
     text-align: left;
     gap: 20px
 }

 .heading-row .text-link {
     margin-bottom: 8px;
     flex-shrink: 0
 }

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

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

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

 .gallery-item:after {
     content: "";
     position: absolute;
     inset: 35% 0 0;
     background: linear-gradient(transparent, rgba(8, 16, 31, .9))
 }

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

 .gallery-item span {
     position: absolute;
     left: 18px;
     right: 14px;
     bottom: 17px;
     color: white;
     z-index: 1;
     font: 700 13px Montserrat
 }

 .gallery-item span small {
     display: block;
     color: var(--gold2);
     font: 700 9px "DM Sans";
     letter-spacing: 1.5px;
     margin-bottom: 5px
 }

 .cta-band {
     background: linear-gradient(110deg, #182642, #0e172b);
     color: #fff;
     padding: 58px 0
 }

 .cta-inner {
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 30px
 }

 .cta-inner h2 {
     font-size: clamp(26px, 3vw, 37px);
     margin: 0 0 8px
 }

 .cta-inner p {
     font-size: 13px;
     color: #c5ccda;
     margin: 0
 }

 .cta-inner .eyebrow {
     margin-bottom: 8px
 }

 .page-banner {
     min-height: 350px;
     position: relative;
     background-image: var(--banner-image);
     background-position: center 42%;
     background-size: cover;
     display: flex;
     align-items: center;
     color: #fff
 }

 .page-banner .banner-overlay {
     background: linear-gradient(90deg, rgba(9, 17, 33, .92), rgba(9, 17, 33, .56))
 }

 .banner-content {
     position: relative;
     z-index: 1;
     padding-top: 40px;
     padding-bottom: 40px
 }

 .banner-content h1 {
     font-size: clamp(40px, 5vw, 58px);
     margin-bottom: 13px
 }

 .banner-content p {
     color: #e0e5ed;
     margin-bottom: 20px
 }

 .breadcrumbs {
     display: flex;
     gap: 12px;
     align-items: center;
     font-size: 11px;
     color: #d9deea
 }

 .breadcrumbs i {
     font-size: 9px;
     color: var(--gold2)
 }

 .breadcrumbs a {
     color: var(--gold2)
 }

 .about-page-grid {
     gap: 75px
 }

 .about-checks {
     display: grid;
     gap: 11px;
     margin-top: 25px;
     font-size: 12px;
     font-weight: 700
 }

 .values-grid {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     gap: 24px;
     max-width: 900px;
     margin: auto
 }

 .value-card {
     background: #fff;
     padding: 38px 35px;
     border-bottom: 3px solid var(--gold);
     box-shadow: 0 10px 30px rgba(16, 26, 49, .05)
 }

 .value-icon {
     width: 55px;
     height: 55px;
     display: grid;
     place-items: center;
     background: #f7edd7;
     color: #987020;
     font-size: 22px;
     margin-bottom: 22px
 }

 .value-card h3 {
     color: var(--navy);
     font-size: 21px
 }

 .value-card p {
     color: var(--muted);
     font-size: 13px;
     margin: 0
 }

 .services-page-grid {
     row-gap: 30px
 }

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

 .gallery-page-grid .gallery-item img {
     height: 290px
 }

 .gallery-note {
     margin: 22px 0 0;
     color: var(--muted);
     font-size: 11px;
     text-align: center
 }

 .contact-layout {
     display: grid;
     grid-template-columns: .85fr 1.15fr;
     gap: 70px;
     align-items: start
 }

 .contact-info>p {
     color: var(--muted);
     font-size: 14px;
     margin-bottom: 30px
 }

 .contact-detail {
     display: flex;
     gap: 15px;
     margin: 24px 0;
     align-items: flex-start
 }

 .detail-icon {
     width: 44px;
     height: 44px;
     flex-shrink: 0;
     display: grid;
     place-items: center;
     background: #f6edd9;
     color: #9b7428;
     font-size: 17px
 }

 .contact-detail h3 {
     font-size: 13px;
     margin: 0 0 4px;
     color: var(--navy)
 }

 .contact-detail p,
 .contact-detail a {
     font-size: 12px;
     color: var(--muted);
     margin: 0;
     overflow-wrap: anywhere
 }

 .contact-detail a:hover {
     color: #9b7428
 }

 .contact-form-wrap {
     padding: 35px;
     background: #fff;
     box-shadow: var(--shadow);
     border-top: 3px solid var(--gold)
 }

 .contact-form-wrap h2 {
     font-size: 30px
 }

 .contact-form {
     display: grid;
     gap: 17px
 }

 .contact-form label {
     display: grid;
     gap: 7px;
     font-size: 11px;
     font-weight: 800;
     color: var(--navy)
 }

 .form-row {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 15px
 }

 .contact-form input,
 .contact-form select,
 .contact-form textarea {
     width: 100%;
     font: 400 12px "DM Sans";
     color: var(--text);
     padding: 13px 14px;
     border: 1px solid #e0e4ea;
     background: #fbfcfd;
     outline: none;
     border-radius: 0
 }

 .contact-form input:focus,
 .contact-form select:focus,
 .contact-form textarea:focus {
     border-color: var(--gold)
 }

 .contact-form textarea {
     resize: vertical
 }

 .contact-form .btn {
     justify-self: start
 }

 .form-small {
     font-size: 10px;
     color: var(--muted);
     margin: -5px 0 0
 }

 .form-success {
     padding: 12px 14px;
     background: #edf8ef;
     color: #276338;
     font-size: 12px;
     margin-bottom: 18px
 }

 .form-success i {
     margin-right: 6px
 }

 .map-section {
     padding: 0 0 90px;
     background: #fff
 }

 .map-heading {
     display: flex;
     justify-content: space-between;
     align-items: end;
     margin-bottom: 25px
 }

 .map-heading h2 {
     margin: 0
 }

 .map-frame {
     display: block;
     width: 100%;
     height: 360px;
     border: 0;
     filter: grayscale(.25)
 }

 .site-footer {
     background: #0b1323;
     color: #c2cada;
     padding-top: 70px
 }

 .footer-grid {
     display: grid;
     grid-template-columns: 1.35fr .8fr 1fr 1.35fr;
     gap: 42px;
     padding-bottom: 55px
 }

 .footer-brand .brand-text strong {
     color: #fff
 }

 .footer-brand .brand-text small {
     color: var(--gold2)
 }

 .footer-about>p {
     font-size: 12px;
     line-height: 1.9;
     color: #aab4c6;
     margin: 24px 0
 }

 .footer-socials {
     justify-content: flex-start
 }

 .footer-grid h3 {
     font-size: 14px;
     color: #fff;
     margin: 8px 0 24px;
     position: relative
 }

 .footer-grid h3:after {
     content: "";
     display: block;
     width: 32px;
     height: 2px;
     background: var(--gold);
     margin-top: 11px
 }

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

 .footer-links li {
     margin: 11px 0;
     font-size: 12px
 }

 .footer-links a {
     color: #b8c1d0;
     transition: .2s
 }

 .footer-links a:hover {
     color: var(--gold2);
     padding-left: 4px
 }

 .contact-list li {
     display: flex;
     align-items: flex-start;
     gap: 10px;
     font-size: 11px;
     line-height: 1.7;
     margin: 0 0 16px;
     overflow-wrap: anywhere
 }

 .contact-list i {
     color: var(--gold2);
     margin-top: 4px
 }

 .footer-bottom {
     border-top: 1px solid rgba(255, 255, 255, .1);
     font-size: 10px;
     color: #8f9bb0
 }

 .bottom-inner {
     min-height: 58px;
     display: flex;
     justify-content: space-between;
     align-items: center;
     gap: 15px
 }

 .floating-call,
 .floating-wa {
     position: fixed;
     right: 20px;
     z-index: 15;
     width: 49px;
     height: 49px;
     border-radius: 50%;
     display: grid;
     place-items: center;
     color: #fff;
     font-size: 21px;
     box-shadow: 0 7px 22px rgba(0, 0, 0, .2)
 }

 .floating-call {
     bottom: 84px;
     background: #1d3154
 }

 .floating-wa {
     bottom: 23px;
     background: #20b866
 }

 @media(max-width:1050px) {
     .nav-wrap {
         gap: 20px
     }

     .main-nav {
         gap: 16px
     }

     .nav-cta {
         padding: 12px 14px
     }

     .about-grid {
         gap: 45px
     }

     .footer-grid {
         grid-template-columns: 1.2fr 1fr;
         gap: 35px
     }

     .why-grid {
         grid-template-columns: repeat(2, 1fr)
     }
 }

 @media(max-width:800px) {
     .container {
         width: min(100% - 34px, 600px)
     }

     .topbar-inner {
         padding: 8px 0
     }

     .top-contact {
         gap: 8px 16px
     }

     .top-contact a:nth-child(2) {
         display: none
     }

     .nav-wrap {
         min-height: 76px;
         grid-template-columns: 1fr auto auto;
         gap: 12px
     }

     .brand-mark {
         width: 43px;
         height: 43px
     }

     .brand-text strong {
         font-size: 18px
     }

     .brand-text small {
         font-size: 8px
     }

     .menu-toggle {
         display: block;
         grid-column: 3;
         grid-row: 1
     }

     .nav-cta {
         display: none
     }

     .main-nav {
         display: none;
         position: absolute;
         top: 100%;
         left: 0;
         right: 0;
         padding: 14px 22px 22px;
         background: white;
         box-shadow: 0 14px 20px rgba(16, 26, 49, .1);
         flex-direction: column;
         align-items: stretch;
         gap: 0
     }

     .main-nav.is-open {
         display: flex
     }

     .main-nav a {
         padding: 12px 0;
         border-bottom: 1px solid #f0eee8
     }

     .main-nav a:after {
         display: none
     }

     .hero-slider {
         height: 650px;
         min-height: 550px
     }

     .hero-shade {
         background: linear-gradient(90deg, rgba(9, 17, 33, .9), rgba(9, 17, 33, .5))
     }

     .hero-content {
         padding-bottom: 70px
     }

     .hero-content p {
         font-size: 14px
     }

     .hero-badge {
         display: none
     }

     .hero-controls {
         bottom: 22px
     }

     .section {
         padding: 72px 0
     }

     .about-grid {
         grid-template-columns: 1fr;
         gap: 45px
     }

     .about-visual {
         max-width: 540px;
         margin: 0 auto;
         width: 100%
     }

     .about-visual>img {
         height: 400px
     }

     .experience-card {
         left: -8px
     }

     .service-grid {
         grid-template-columns: repeat(2, 1fr);
         gap: 18px
     }

     .service-card>img {
         height: 200px
     }

     .service-icon {
         top: 167px;
         width: 55px;
         height: 55px
     }

     .service-body {
         padding: 30px 19px 23px
     }

     .service-body h3 {
         font-size: 16px
     }

     .service-body p {
         font-size: 12px
     }

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

     .gallery-item,
     .gallery-item img {
         height: 230px;
         min-height: 230px
     }

     .contact-layout {
         grid-template-columns: 1fr;
         gap: 40px
     }

     .page-banner {
         min-height: 300px
     }

     .cta-inner {
         align-items: flex-start;
         flex-direction: column
     }

     .footer-grid {
         gap: 30px
     }

     .map-heading {
         align-items: flex-start;
         gap: 20px;
         flex-direction: column
     }
 }

 @media(max-width:520px) {
     .container {
         width: calc(100% - 30px)
     }

     .topbar {
         font-size: 11px
     }

     .top-contact {
         gap: 0
     }

     .socials {
         gap: 5px
     }

     .socials a {
         width: 25px;
         height: 25px
     }

     .brand {
         gap: 8px
     }

     .brand-mark {
         width: 39px;
         height: 39px;
         font-size: 19px
     }

     .brand-text strong {
         font-size: 16px;
         letter-spacing: .6px
     }

     .brand-text small {
         font-size: 7px;
         letter-spacing: .7px
     }

     .nav-wrap {
         gap: 8px
     }

     .hero-slider {
         height: 610px;
         min-height: 520px
     }

     .hero-content {
         padding-bottom: 45px
     }

     .hero-content h1 {
         font-size: 39px;
         letter-spacing: -1.1px
     }

     .hero-content p {
         font-size: 13px
     }

     .hero-actions {
         align-items: flex-start;
         flex-direction: column
     }

     .hero-actions .btn {
         min-width: 185px
     }

     .hero-controls {
         left: 15px;
         bottom: 15px
     }

     .section {
         padding: 60px 0
     }

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

     .about-visual>img {
         height: 330px
     }

     .experience-card {
         padding: 14px 17px;
         bottom: 35px
     }

     .experience-card b {
         font-size: 29px
     }

     .section-copy h2,
     .section-heading h2,
     .contact-info h2 {
         font-size: 31px
     }

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

     .service-grid {
         grid-template-columns: 1fr
     }

     .service-card>img {
         height: 235px
     }

     .service-icon {
         top: 202px
     }

     .service-body {
         padding: 32px 22px 24px
     }

     .service-body p {
         min-height: 0
     }

     .why-grid {
         grid-template-columns: 1fr
     }

     .why-card {
         min-height: 0
     }

     .heading-row {
         align-items: flex-start;
         flex-direction: column
     }

     .gallery-grid,
     .gallery-page-grid {
         gap: 10px
     }

     .gallery-item,
     .gallery-item img,
     .gallery-page-grid .gallery-item img {
         height: 190px;
         min-height: 190px
     }

     .gallery-item span {
         left: 11px;
         bottom: 12px;
         font-size: 11px
     }

     .gallery-item span small {
         font-size: 8px
     }

     .values-grid {
         grid-template-columns: 1fr
     }

     .value-card {
         padding: 27px 23px
     }

     .page-banner {
         min-height: 280px
     }

     .banner-content h1 {
         font-size: 40px
     }

     .contact-form-wrap {
         padding: 24px 18px
     }

     .form-row {
         grid-template-columns: 1fr
     }

     .map-frame {
         height: 280px
     }

     .footer-grid {
         grid-template-columns: 1fr;
         gap: 26px;
         padding-bottom: 35px
     }

     .footer-grid h3 {
         margin-bottom: 15px
     }

     .bottom-inner {
         padding: 15px 0;
         align-items: flex-start;
         flex-direction: column;
         gap: 4px
     }

     .cta-band {
         padding: 45px 0
     }

     .cta-inner h2 {
         font-size: 28px
     }

     .floating-call,
     .floating-wa {
         right: 13px;
         width: 44px;
         height: 44px
     }

     .floating-call {
         bottom: 75px
     }

     .floating-wa {
         bottom: 20px
     }
 }

 .gallery-page-grid .gallery-item::after {
    display: none;
}

.gallery-page-grid .gallery-item span {
    display: none;
}


/* Certificate Section */
.certificate-section {
    padding: 60px 20px 80px;
    background: #fff;
}

.certificate-image {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.certificate-image img {
    display: block;
    width: 100%;
    max-width: 650px;
    height: auto;
    object-fit: contain;
    border: 1px solid #e5e5e5;
    box-shadow: 0 10px 35px rgba(0, 0, 0, 0.10);
}

/* Mobile Responsive */
@media (max-width: 576px) {
    .certificate-section {
        padding: 35px 15px 50px;
    }

    .certificate-image img {
        max-width: 100%;
    }
}