:root {
     --orange: #f58220;
     --orange-dark: #d9670c;
     --black: #171717;
     --white: #fff;
     --muted: #666;
     --light: #f6f6f6;
     --border: #e7e7e7;
     --shadow: 0 16px 40px rgba(0, 0, 0, .10)
 }

 * {
     box-sizing: border-box
 }

 html {
     scroll-behavior: smooth
 }

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

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

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

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

 .topbar {
     background: var(--black);
     color: #eee;
     font-size: 13px
 }

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

 .topbar a:hover {
     color: var(--orange)
 }

 .topbar i {
     color: var(--orange);
     margin-right: 6px
 }

 .top-separator {
     color: #777;
     margin: 0 10px
 }

 .socials {
     display: flex;
     gap: 9px
 }

 .socials a {
     width: 27px;
     height: 27px;
     border: 1px solid #444;
     border-radius: 50%;
     display: grid;
     place-items: center;
     font-size: 12px
 }

 .socials a:hover {
     background: var(--orange);
     border-color: var(--orange);
     color: #fff
 }

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

 .nav-wrap {
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 24px;
     min-height: 86px
 }

 .brand {
     display: flex;
     align-items: center;
     gap: 11px;
     flex-shrink: 0
 }

 .brand-mark {
     width: 48px;
     height: 48px;
     background: var(--orange);
     color: #fff;
     border-radius: 10px;
     display: grid;
     place-items: center;
     font-size: 24px;
     transform: skew(-4deg)
 }

 .brand strong {
     display: block;
     font-size: 19px;
     letter-spacing: .4px;
     line-height: 1.2
 }

 .brand strong b {
     color: var(--orange)
 }

 .brand small {
     display: block;
     font-size: 9px;
     font-weight: 700;
     letter-spacing: 2.5px;
     color: #666;
     margin-top: 3px
 }

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

 .main-nav a {
     font-size: 13px;
     font-weight: 700;
     position: relative;
     padding: 30px 0
 }

 .main-nav a:hover,
 .main-nav a:focus {
     color: var(--orange)
 }

 .btn {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     gap: 10px;
     padding: 13px 20px;
     border: 0;
     border-radius: 3px;
     font-size: 12px;
     font-weight: 800;
     letter-spacing: .3px;
     text-transform: uppercase;
     cursor: pointer;
     transition: .2s
 }

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

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

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

 .btn-dark:hover {
     background: var(--orange)
 }

 .btn-outline {
     border: 1px solid rgba(255, 255, 255, .7);
     color: #fff
 }

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

 .menu-toggle {
     display: none;
     border: 0;
     background: var(--orange);
     color: white;
     width: 42px;
     height: 42px;
     border-radius: 3px;
     font-size: 19px
 }

 .hero {
     min-height: 610px;
     position: relative;
     display: flex;
     align-items: center;
     color: #fff;
     background: #252525 url('https://images.unsplash.com/photo-1580901368919-7738efb0f87e?auto=format&fit=crop&w=2000&q=90') center/cover no-repeat
 }

 .hero-overlay {
     position: absolute;
     inset: 0;
     background: linear-gradient(90deg, rgba(13, 13, 13, .92) 0%, rgba(13, 13, 13, .76) 48%, rgba(13, 13, 13, .18) 100%)
 }

 .hero-content {
     position: relative;
     padding-block: 80px
 }

 .eyebrow {
     display: inline-flex;
     align-items: center;
     gap: 8px;
     color: var(--orange);
     font-size: 11px;
     font-weight: 800;
     letter-spacing: 1.7px;
     text-transform: uppercase
 }

 .eyebrow.dark {
     color: var(--orange-dark)
 }

 .hero h1 {
     font-size: clamp(38px, 5vw, 66px);
     line-height: 1.1;
     letter-spacing: -2px;
     max-width: 760px;
     margin: 19px 0
 }

 .hero h1 span {
     color: var(--orange)
 }

 .hero p {
     max-width: 600px;
     color: #e0e0e0;
     font-size: 16px;
     margin-bottom: 27px
 }

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

 .hero-points {
     display: flex;
     flex-wrap: wrap;
     gap: 24px;
     margin-top: 34px;
     font-size: 12px;
     font-weight: 600
 }

 .hero-points i {
     color: var(--orange);
     margin-right: 6px
 }

 .stats-strip {
     background: var(--orange);
     color: #fff
 }

 .stats-grid {
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     padding: 23px 0
 }

 .stats-grid>div {
     padding: 0 20px;
     border-right: 1px solid rgba(255, 255, 255, .35);
     display: flex;
     flex-direction: column;
     align-items: center;
     text-align: center
 }

 .stats-grid>div:last-child {
     border: 0
 }

 .stats-grid strong {
     font-size: 18px
 }

 .stats-grid span {
     font-size: 11px;
     opacity: .9
 }

 .section {
     padding: 88px 0
 }

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

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

 .image-stack {
     position: relative;
     padding: 0 24px 24px 0
 }

 .main-photo {
     height: 420px;
     width: 100%;
     object-fit: cover;
     border-radius: 4px
 }

 .image-stack:after {
     content: "";
     position: absolute;
     z-index: -1;
     right: 0;
     bottom: 0;
     width: 75%;
     height: 75%;
     background: var(--orange)
 }

 .experience-card {
     position: absolute;
     bottom: 48px;
     left: -18px;
     background: #fff;
     box-shadow: var(--shadow);
     padding: 18px 22px;
     display: grid;
     grid-template-columns: 40px auto;
     column-gap: 10px;
     align-items: center
 }

 .experience-card i {
     grid-row: span 2;
     color: var(--orange);
     font-size: 27px
 }

 .experience-card strong {
     font-size: 14px
 }

 .experience-card span {
     font-size: 11px;
     color: var(--muted)
 }

 .section-copy h2,
 .section-heading h2,
 .contact-details h2 {
     font-size: clamp(29px, 3vw, 42px);
     line-height: 1.2;
     letter-spacing: -1px;
     margin: 12px 0 20px
 }

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

 .text-link {
     display: inline-flex;
     align-items: center;
     gap: 10px;
     color: var(--orange-dark);
     font-weight: 800;
     font-size: 13px;
     margin-top: 10px
 }

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

 .section-heading h2 {
     margin: 10px 0
 }

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

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

 .service-card {
     background: #fff;
     box-shadow: 0 8px 28px rgba(0, 0, 0, .06);
     border: 1px solid #eee;
     overflow: hidden;
     transition: transform .25s, box-shadow .25s
 }

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

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

 .service-body {
     padding: 25px;
     position: relative
 }

 .service-icon {
     width: 48px;
     height: 48px;
     border-radius: 4px;
     background: var(--orange);
     color: #fff;
     display: grid;
     place-items: center;
     font-size: 21px;
     margin-top: -49px;
     position: relative;
     border: 4px solid white
 }

 .service-body h3 {
     font-size: 18px;
     margin: 15px 0 8px
 }

 .service-body p {
     font-size: 13px;
     color: var(--muted);
     margin: 0 0 17px
 }

 .card-link {
     font-size: 11px;
     font-weight: 800;
     text-transform: uppercase;
     color: var(--orange-dark);
     letter-spacing: .5px
 }

 .card-link i {
     margin-left: 5px
 }

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

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

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

 .why-card {
     border: 1px solid #393939;
     padding: 27px 22px;
     transition: .2s
 }

 .why-card:hover {
     border-color: var(--orange);
     background: #202020
 }

 .why-card>i {
     font-size: 28px;
     color: var(--orange)
 }

 .why-card h3 {
     font-size: 16px;
     margin: 17px 0 8px
 }

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

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

 .gallery-grid a {
     overflow: hidden;
     display: block;
     background: #ddd
 }

 .gallery-grid img {
     width: 100%;
     height: 210px;
     object-fit: cover;
     transition: transform .35s
 }

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

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

 .cta-band {
     background: #262626;
     color: #fff;
     padding: 50px 0;
     position: relative;
     overflow: hidden
 }

 .cta-band:after {
     content: "";
     position: absolute;
     right: -40px;
     top: -80px;
     width: 270px;
     height: 270px;
     border: 35px solid rgba(245, 130, 32, .14);
     border-radius: 50%
 }

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

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

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

 .page-banner {
     min-height: 300px;
     display: flex;
     align-items: center;
     color: #fff;
     background-image: linear-gradient(90deg, rgba(15, 15, 15, .88), rgba(15, 15, 15, .42)), var(--banner-image);
     background-position: center;
     background-size: cover
 }

 .page-banner .container {
     padding-block: 65px
 }

 .page-banner h1 {
     font-size: clamp(38px, 5vw, 56px);
     margin: 8px 0;
     line-height: 1.1
 }

 .page-banner p {
     color: #e3e3e3;
     margin: 0;
     font-size: 14px
 }

 .about-page-grid {
     display: grid;
     grid-template-columns: 1.1fr .9fr;
     gap: 65px;
     align-items: center
 }

 .about-large-image {
     height: 490px;
     width: 100%;
     object-fit: cover;
     border-radius: 4px
 }

 .mission-grid {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 25px
 }

 .mission-card {
     background: #fff;
     padding: 38px;
     border-bottom: 4px solid var(--orange);
     box-shadow: 0 8px 25px rgba(0, 0, 0, .05)
 }

 .mission-icon {
     width: 55px;
     height: 55px;
     display: grid;
     place-items: center;
     background: #fff0e4;
     color: var(--orange);
     font-size: 24px;
     border-radius: 50%
 }

 .mission-card h2 {
     font-size: 24px;
     margin: 17px 0 10px
 }

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

 .services-page-grid .service-card>img {
     height: 215px
 }

 .gallery-page-grid {
     gap: 14px
 }

 .gallery-page-grid .gallery-item {
     position: relative
 }

 .gallery-page-grid .gallery-item:after {
     content: "+";
     position: absolute;
     inset: 0;
     display: grid;
     place-items: center;
     background: rgba(245, 130, 32, .0);
     color: #fff;
     font-size: 38px;
     opacity: 0;
     transition: .2s
 }

 .gallery-page-grid .gallery-item:hover:after {
     opacity: 1;
     background: rgba(245, 130, 32, .55)
 }

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

 .contact-details>p,
 .contact-form-wrap>p {
     font-size: 14px;
     color: var(--muted)
 }

 .contact-detail {
     display: flex;
     gap: 16px;
     margin-top: 26px;
     align-items: flex-start
 }

 .contact-detail>span {
     width: 48px;
     height: 48px;
     background: #fff0e4;
     color: var(--orange-dark);
     display: grid;
     place-items: center;
     font-size: 18px;
     flex-shrink: 0
 }

 .contact-detail h3 {
     font-size: 14px;
     margin: 0 0 3px
 }

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

 .contact-detail a:hover {
     color: var(--orange-dark)
 }

 .contact-note {
     margin-top: 28px;
     background: #fff7f0;
     border-left: 3px solid var(--orange);
     padding: 14px;
     font-size: 12px;
     color: #70543d
 }

 .contact-note i {
     color: var(--orange-dark);
     margin-right: 5px
 }

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

 .contact-form-wrap h2 {
     font-size: 25px;
     margin: 0
 }

 .contact-form {
     display: grid;
     gap: 9px;
     margin-top: 22px
 }

 .contact-form label {
     font-size: 12px;
     font-weight: 700;
     margin-top: 5px
 }

 .contact-form input,
 .contact-form select,
 .contact-form textarea {
     width: 100%;
     padding: 13px 14px;
     border: 1px solid #ddd;
     border-radius: 2px;
     font: inherit;
     font-size: 13px;
     background: #fff;
     outline: none
 }

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

 .contact-form textarea {
     resize: vertical
 }

 .contact-form button {
     margin-top: 10px;
     justify-self: start
 }

 .form-alert {
     background: #eff9ed;
     border: 1px solid #b9ddb2;
     padding: 12px;
     font-size: 12px;
     color: #285d22;
     margin-top: 15px
 }

 .map-section {
     padding: 0 0 85px
 }

 .map-frame {
     height: 360px;
     border: 1px solid #ddd
 }

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

 .site-footer {
     background: #141414;
     color: #eee;
     padding-top: 65px
 }

 .footer-grid {
     display: grid;
     grid-template-columns: 1.45fr .75fr .95fr 1fr;
     gap: 40px;
     padding-bottom: 50px
 }

 .footer-brand {
     margin-bottom: 18px
 }

 .footer-brand strong {
     color: #fff
 }

 .footer-brand small {
     color: #aaa
 }

 .footer-about p {
     color: #aaa;
     font-size: 12px;
     max-width: 310px
 }

 .footer-socials {
     margin-top: 18px
 }

 .footer-grid h3 {
     font-size: 15px;
     margin: 5px 0 20px;
     color: #fff
 }

 .footer-grid ul {
     list-style: none;
     margin: 0;
     padding: 0
 }

 .footer-grid li {
     font-size: 12px;
     color: #aaa;
     margin: 0 0 12px
 }

 .footer-grid li a:hover {
     color: var(--orange)
 }

 .contact-list li {
     display: flex;
     gap: 9px;
     align-items: flex-start
 }

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

 .footer-bottom {
     border-top: 1px solid #333;
     padding: 17px 0;
     color: #999;
     font-size: 11px
 }

 .footer-bottom .container {
     display: flex;
     justify-content: space-between;
     gap: 20px
 }

 @media(max-width:1000px) {
     .nav-wrap {
         gap: 15px
     }

     .main-nav {
         gap: 16px
     }

     .main-nav a {
         font-size: 12px
     }

     .nav-cta {
         padding: 12px
     }

     .about-preview {
         gap: 40px
     }

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

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

 @media(max-width:760px) {
     .container {
         width: min(100% - 30px, 560px)
     }

     .topbar-inner {
         min-height: 38px;
         font-size: 11px
     }

     .topbar-inner>div:first-child {
         display: flex;
         flex-wrap: wrap;
         align-items: center;
         gap: 4px
     }

     .top-separator {
         margin: 0 4px
     }

     .socials {
         gap: 5px
     }

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

     .nav-wrap {
         min-height: 72px;
         flex-wrap: wrap;
         position: relative
     }

     .brand-mark {
         width: 42px;
         height: 42px;
         font-size: 21px
     }

     .brand strong {
         font-size: 17px
     }

     .menu-toggle {
         display: block;
         margin-left: auto
     }

     .main-nav {
         display: none;
         order: 4;
         width: 100%;
         flex-direction: column;
         align-items: stretch;
         gap: 0;
         padding: 4px 0 15px
     }

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

     .main-nav a {
         padding: 12px 8px;
         border-top: 1px solid #eee;
         font-size: 13px
     }

     .nav-cta {
         display: none
     }

     .hero {
         min-height: 570px;
         background-position: 58% center
     }

     .hero-overlay {
         background: linear-gradient(90deg, rgba(13, 13, 13, .9), rgba(13, 13, 13, .64))
     }

     .hero-content {
         padding-block: 65px
     }

     .hero h1 {
         font-size: clamp(36px, 10vw, 52px);
         letter-spacing: -1.2px
     }

     .hero p {
         font-size: 14px
     }

     .hero-points {
         gap: 12px;
         flex-direction: column
     }

     .stats-grid {
         grid-template-columns: repeat(2, 1fr);
         gap: 18px;
         padding: 22px 0
     }

     .stats-grid>div {
         border: 0;
         padding: 0 8px
     }

     .stats-grid strong {
         font-size: 16px
     }

     .section {
         padding: 62px 0
     }

     .about-preview,
     .about-page-grid,
     .contact-grid {
         grid-template-columns: 1fr;
         gap: 38px
     }

     .main-photo {
         height: 320px
     }

     .image-stack {
         margin-left: 10px
     }

     .experience-card {
         left: -10px;
         bottom: 38px
     }

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

     .service-grid {
         grid-template-columns: 1fr;
         gap: 18px
     }

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

     .why-grid {
         grid-template-columns: 1fr 1fr;
         gap: 10px
     }

     .why-card {
         padding: 20px 15px
     }

     .why-card h3 {
         font-size: 14px
     }

     .why-card p {
         font-size: 11px
     }

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

     .gallery-grid img {
         height: 155px
     }

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

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

     .page-banner .container {
         padding-block: 48px
     }

     .page-banner h1 {
         font-size: 42px
     }

     .about-large-image {
         height: 320px;
         order: -1
     }

     .mission-grid {
         grid-template-columns: 1fr;
         gap: 15px
     }

     .mission-card {
         padding: 28px
     }

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

     .map-frame {
         height: 300px
     }

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

     .footer-about {
         grid-column: 1/-1
     }

     .footer-bottom .container {
         flex-direction: column;
         gap: 4px
     }

     .site-footer {
         padding-top: 45px
     }
 }

 @media(max-width:390px) {
     .topbar-inner {
         align-items: flex-start;
         padding: 6px 0
     }

     .topbar-inner>div:first-child {
         max-width: 240px
     }

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

     .brand {
         gap: 7px
     }

     .brand-mark {
         width: 36px;
         height: 36px;
         font-size: 18px
     }

     .brand strong {
         font-size: 15px
     }

     .brand small {
         font-size: 8px;
         letter-spacing: 1.8px
     }

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

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

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

     .footer-about {
         grid-column: auto
     }
 }


/* Gallery Images */
.gallery-page-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 15px;
}

.gallery-page-grid .gallery-item {
    display: block;
    overflow: hidden;
    border-radius: 6px;
    background: #f2f2f2;
}

.gallery-page-grid .gallery-item img {
    width: 100%;
    height: 210px;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.gallery-page-grid .gallery-item:hover img {
    transform: scale(1.06);
}

/* Video Gallery */
.video-heading {
    margin-top: 65px;
}

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

.video-item {
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 5px 18px rgba(0, 0, 0, 0.06);
}

.video-item video {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: contain;
    background: #111;
}

.video-item h3 {
    margin: 0;
    padding: 14px;
    font-size: 15px;
    color: #171717;
    border-top: 3px solid #f58220;
}

/* Tablet */
@media (max-width: 900px) {
    .gallery-page-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

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

/* Mobile */
@media (max-width: 600px) {
    .gallery-page-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

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

    .video-gallery {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .video-heading {
        margin-top: 45px;
    }
}

/* Hero Carousel */
.hero-carousel {
    position: relative;
    width: 100%;
    min-height: 620px;
    overflow: hidden;
    background: #171717;
}

.hero-slide {
    position: absolute;
    inset: 0;
    min-height: 620px;
    display: flex;
    align-items: center;
    background-size: cover;
    background-position: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.8s ease, visibility 0.8s ease;
}

.hero-slide.active {
    position: relative;
    opacity: 1;
    visibility: visible;
    z-index: 1;
}

.hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        rgba(0, 0, 0, 0.88) 0%,
        rgba(0, 0, 0, 0.68) 55%,
        rgba(0, 0, 0, 0.25) 100%
    );
}

.hero-content {
    position: relative;
    z-index: 2;
    width: 100%;
    padding-top: 90px;
    padding-bottom: 100px;
    color: #fff;
}

.hero-content .eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: #ff8a00;
    font-weight: 700;
    margin-bottom: 20px;
}

.hero-content h1 {
    max-width: 850px;
    font-size: clamp(36px, 5vw, 66px);
    line-height: 1.12;
    font-weight: 800;
    margin: 0 0 22px;
}

.hero-content h1 span {
    color: #ff8a00;
}

.hero-content p {
    max-width: 650px;
    color: #f1f1f1;
    font-size: 17px;
    line-height: 1.8;
    margin-bottom: 28px;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 28px;
}

.hero-points {
    display: flex;
    flex-wrap: wrap;
    gap: 22px;
    color: #fff;
    font-size: 14px;
}

.hero-points i {
    color: #ff8a00;
    margin-right: 5px;
}

/* Slider Arrows */
.hero-arrow {
    position: absolute;
    z-index: 5;
    top: 50%;
    transform: translateY(-50%);
    width: 46px;
    height: 46px;
    border: 1px solid rgba(255,255,255,0.65);
    border-radius: 50%;
    background: rgba(0,0,0,0.4);
    color: #fff;
    cursor: pointer;
    transition: 0.3s ease;
}

.hero-arrow:hover {
    background: #ff8a00;
    border-color: #ff8a00;
}

.hero-prev {
    left: 22px;
}

.hero-next {
    right: 22px;
}

/* Slider Dots */
.hero-dots {
    position: absolute;
    z-index: 5;
    bottom: 25px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 10px;
}

.hero-dot {
    width: 11px;
    height: 11px;
    padding: 0;
    border: none;
    border-radius: 20px;
    background: rgba(255,255,255,0.6);
    cursor: pointer;
    transition: 0.3s ease;
}

.hero-dot.active {
    width: 30px;
    background: #ff8a00;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .hero-carousel,
    .hero-slide {
        min-height: 600px;
    }

    .hero-content {
        padding: 70px 25px 90px;
    }

    .hero-content h1 {
        font-size: clamp(32px, 8vw, 46px);
    }

    .hero-content p {
        font-size: 15px;
        line-height: 1.7;
    }

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

    .hero-points {
        flex-direction: column;
        gap: 10px;
    }

    .hero-arrow {
        top: auto;
        bottom: 18px;
        transform: none;
        width: 38px;
        height: 38px;
    }

    .hero-prev {
        left: 18px;
    }

    .hero-next {
        right: 18px;
    }

    .hero-dots {
        bottom: 31px;
    }
}

@media (max-width: 380px) {
    .hero-carousel,
    .hero-slide {
        min-height: 650px;
    }

    .hero-content {
        padding-left: 20px;
        padding-right: 20px;
    }
}


/* Fix Hero Slider Overflow */
.hero-carousel {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    position: relative;
    box-sizing: border-box;
}

.hero-slide {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}

.hero-slide .container.hero-content {
    width: 100%;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 60px;
    padding-right: 60px;
    box-sizing: border-box;
}

.hero-content h1,
.hero-content p {
    max-width: 100%;
    overflow-wrap: break-word;
}

.hero-arrow {
    z-index: 10;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .hero-slide .container.hero-content {
        padding-left: 45px;
        padding-right: 45px;
    }

    .hero-content h1 {
        font-size: clamp(30px, 7vw, 44px);
    }
}

@media (max-width: 480px) {
    .hero-slide .container.hero-content {
        padding-left: 25px;
        padding-right: 25px;
    }

    .hero-content h1 {
        font-size: 32px;
        line-height: 1.2;
    }

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