/* =========================================================

   GLOBAL

========================================================= */



* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}



html {

    scroll-behavior: smooth;

    scroll-padding-top: 90px;

}



body {

    font-family: 'Montserrat', sans-serif;

    background: #f5fbff;

    color: #17212b;

    line-height: 1.7;

}



img {

    max-width: 100%;

    height: auto;

}



a {

    text-decoration: none;

    color: inherit;

}



button {

    font-family: inherit;

}



.container {

    width: min(1180px, 92%);

    margin: auto;

}



.eyebrow {

    font-size: 13px;

    font-weight: 800;

    letter-spacing: 3px;

    text-transform: uppercase;

    color: #1677b8;

    margin-bottom: 12px;

}





/* =========================================================

   ACCESSIBILITY

========================================================= */



.skip-link {

    position: absolute;

    left: -9999px;

    top: 10px;

    background: #1686c7;

    color: white;

    padding: 10px 15px;

    z-index: 9999;

}



.skip-link:focus {

    left: 10px;

}





/* =========================================================

   HEADER

========================================================= */



header {

    position: absolute;

    width: 100%;

    top: 0;

    left: 0;

    z-index: 1000;

    background: rgba(255,255,255,0.90);

    backdrop-filter: blur(12px);

    border-bottom: 1px solid rgba(0,0,0,0.06);

}



.navbar {

    width: min(1250px, 94%);

    margin: auto;

    min-height: 82px;



    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 25px;

}



.logo {

    font-size: 21px;

    font-weight: 800;

    letter-spacing: 1px;

    color: #101820;

    white-space: nowrap;

}



.logo span {

    color: #1686c7;

    margin-left: 5px;

}



nav {

    display: flex;

    align-items: center;

    gap: 27px;

}



nav a {

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 1px;

    color: #27333c;

    transition: 0.3s;

}



nav a:hover,

nav a.active {

    color: #1686c7;

}



.nav-btn {

    padding: 12px 21px;

    background: #1686c7;

    color: white;

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 1px;

    border-radius: 30px;

    transition: 0.3s;

}



.nav-btn:hover {

    background: #0d5f91;

    transform: translateY(-2px);

}





/* =========================================================

   HERO SLIDER

========================================================= */



.hero-slider {

    position: relative;

    width: 100%;

    height: 780px;

    overflow: hidden;

    background: #dceefa;

}



.slide {

    position: absolute;

    inset: 0;



    opacity: 0;

    visibility: hidden;



    display: flex;

    align-items: center;



    background-size: cover;

    background-position: center;



    transition:

        opacity 1s ease,

        visibility 1s ease;

}



.slide.active {

    opacity: 1;

    visibility: visible;

}



.slide::before {

    content: "";

    position: absolute;

    inset: 0;



    background:

        linear-gradient(

            90deg,

            rgba(5,22,35,0.84) 0%,

            rgba(5,22,35,0.58) 38%,

            rgba(5,22,35,0.10) 72%,

            rgba(5,22,35,0.02) 100%

        );

}



.slide-content {

    position: relative;

    z-index: 2;

    width: min(1180px, 92%);

    margin: auto;



    color: white;



    transform: translateY(30px);

    opacity: 0;



    transition:

        transform 1s ease 0.3s,

        opacity 1s ease 0.3s;

}



.slide.active .slide-content {

    transform: translateY(0);

    opacity: 1;

}



.slide-content .eyebrow {

    color: #72c9f7;

}



.slide-content h1 {

    max-width: 760px;



    font-family: 'Playfair Display', serif;



    font-size: clamp(42px, 5vw, 76px);

    line-height: 1.08;



    margin-bottom: 24px;

}



.slide-content h1 span {

    color: #7bd1ff;

}



.slide-content p {

    max-width: 650px;

    font-size: 17px;

    line-height: 1.8;

    color: rgba(255,255,255,0.92);



    margin-bottom: 32px;

}





/* =========================================================

   BUTTONS

========================================================= */



.buttons {

    display: flex;

    align-items: center;

    gap: 14px;

    flex-wrap: wrap;

}



.btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;



    min-height: 50px;

    padding: 0 25px;



    border-radius: 30px;



    font-size: 12px;

    font-weight: 800;

    letter-spacing: 1px;



    transition: 0.3s;

}



.btn.primary {

    background: #1686c7;

    color: white;

}



.btn.primary:hover {

    background: #0d6091;

    transform: translateY(-3px);

}



.btn.outline {

    border: 1px solid rgba(255,255,255,0.8);

    color: white;

}



.btn.outline:hover {

    background: white;

    color: #14222d;

}



.btn.whatsapp {

    background: #25d366;

    color: white;

}





/* =========================================================

   SLIDER CONTROLS

========================================================= */



.slider-arrow {

    position: absolute;

    top: 50%;

    transform: translateY(-50%);



    width: 52px;

    height: 52px;



    border: 1px solid rgba(255,255,255,0.45);

    background: rgba(0,0,0,0.20);



    color: white;



    border-radius: 50%;



    cursor: pointer;



    z-index: 10;



    transition: 0.3s;

}



.slider-arrow:hover {

    background: #1686c7;

    border-color: #1686c7;

}



.slider-prev {

    left: 30px;

}



.slider-next {

    right: 30px;

}





/* =========================================================

   SLIDER DOTS

========================================================= */



.slider-dots {

    position: absolute;



    bottom: 35px;

    left: 50%;



    transform: translateX(-50%);



    display: flex;

    gap: 9px;



    z-index: 10;

}



.slider-dot {

    width: 10px;

    height: 10px;



    border-radius: 50%;



    border: 1px solid white;

    background: transparent;



    cursor: pointer;



    transition: 0.3s;

}



.slider-dot.active {

    width: 30px;

    border-radius: 10px;

    background: #71c9f6;

    border-color: #71c9f6;

}





/* =========================================================

   SLIDES

========================================================= */



.slide-one {

    background-image:

        url("https://images.unsplash.com/photo-1553440569-bcc63803a83d?auto=format&fit=crop&w=2000&q=90");

}



.slide-two {

    background-image:

        url("https://images.unsplash.com/photo-1542282088-72c9c27ed0cd?auto=format&fit=crop&w=2000&q=90");

}



.slide-three {

    background-image:

        url("https://images.unsplash.com/photo-1492144534655-ae79c964c9d7?auto=format&fit=crop&w=2000&q=90");

}





/* =========================================================

   INTRO

========================================================= */



.intro {

    padding: 100px 0;

    background: white;

}



.intro-grid {

    display: grid;

    grid-template-columns: 1.2fr 0.8fr;

    gap: 70px;

    align-items: center;

}



.intro h2,

.section-title h2 {

    font-family: 'Playfair Display', serif;

    font-size: clamp(34px, 4vw, 52px);

    line-height: 1.15;

    color: #152532;

    margin-bottom: 22px;

}



.intro p {

    color: #596873;

}



.intro-image {

    min-height: 480px;

    border-radius: 20px;



    background:

        linear-gradient(

            rgba(0,0,0,0.08),

            rgba(0,0,0,0.08)

        ),

        url("https://images.unsplash.com/photo-1503736334956-4c8f8e92946d?auto=format&fit=crop&w=1200&q=85");



    background-size: cover;

    background-position: center;



    box-shadow: 0 25px 60px rgba(20,50,70,0.16);

}



.ticks {

    margin-top: 25px;



    display: grid;

    gap: 12px;

}



.ticks div {

    font-weight: 700;

    color: #263b48;

}



.ticks i {

    color: #1686c7;

    margin-right: 8px;

}





/* =========================================================

   SECTION TITLE

========================================================= */



.section-title {

    text-align: center;

    max-width: 800px;

    margin: 0 auto 55px;

}



.section-title p:last-child {

    color: #687782;

}





/* =========================================================

   SERVICES

========================================================= */



.services {

    padding: 100px 0;

    background: #eef8fd;

}



.service-grid {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 25px;

}



.card {

    position: relative;



    background: white;

    border-radius: 18px;



    padding: 35px;



    border: 1px solid #e2edf3;



    box-shadow: 0 15px 40px rgba(30,80,110,0.07);



    transition: 0.35s;

}



.card:hover {

    transform: translateY(-8px);

    box-shadow: 0 25px 50px rgba(30,80,110,0.13);

}



.card .number {

    position: absolute;

    right: 25px;

    top: 20px;



    font-size: 13px;

    font-weight: 800;



    color: #b8d8e9;

}



.icon {

    width: 55px;

    height: 55px;



    display: grid;

    place-items: center;



    background: #e7f6ff;

    color: #1686c7;



    border-radius: 15px;



    font-size: 22px;



    margin-bottom: 25px;

}



.card h3 {

    margin-bottom: 12px;

    font-size: 20px;

}



.card p {

    color: #687782;

    font-size: 14px;

    margin-bottom: 20px;

}



.card a {

    color: #1686c7;

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 1px;

}





/* =========================================================

   INSURANCE

========================================================= */



.insurance {

    padding: 100px 0;

    background: white;

}



.insurance-grid {

    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 30px;

}



.insurance-card {

    padding: 45px;



    border-radius: 20px;



    background: #f3faff;



    border: 1px solid #dcecf5;

}



.big-icon {

    font-size: 40px;

    color: #1686c7;

    margin-bottom: 20px;

}



.insurance-card h3 {

    font-size: 25px;

    margin-bottom: 12px;

}



.insurance-card p {

    color: #667680;

}



.insurance-card ul {

    margin-top: 25px;

    list-style: none;

}



.insurance-card li {

    margin: 10px 0;

    font-size: 14px;

    font-weight: 600;

}



.insurance-card li i {

    color: #1686c7;

    margin-right: 10px;

}





/* =========================================================

   PROCESS

========================================================= */



.process {

    padding: 100px 0;

    background: #eef8fd;

}



.process-grid {

    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 25px;

    text-align: center;

}



.process-grid > div {

    background: white;

    padding: 35px 20px;

    border-radius: 18px;

}



.process-icon {

    width: 60px;

    height: 60px;



    margin: auto auto 20px;



    display: grid;

    place-items: center;



    border-radius: 50%;



    background: #e7f6ff;

    color: #1686c7;



    font-size: 22px;

}



.process-grid h3 {

    margin-bottom: 8px;

}



.process-grid p {

    color: #6c7c86;

    font-size: 13px;

}





/* =========================================================

   CTA

========================================================= */



.cta {

    padding: 100px 20px;



    text-align: center;



    color: white;



    background:

        linear-gradient(

            rgba(9,45,68,0.90),

            rgba(9,45,68,0.90)

        ),

        url("https://images.unsplash.com/photo-1502877338535-766e1452684a?auto=format&fit=crop&w=2000&q=85");



    background-size: cover;

    background-position: center;

}



.cta .eyebrow {

    color: #71caf7;

}



.cta h1,
.cta h2 {

    font-family: 'Playfair Display', serif;

    font-size: clamp(35px, 5vw, 55px);

    margin-bottom: 15px;

}



.cta p {

    max-width: 650px;

    margin: auto auto 30px;

    color: rgba(255,255,255,0.85);

}



.center {

    justify-content: center;

}





/* =========================================================

   FOOTER

========================================================= */



footer {

    background: #0b1b26;

    color: white;

    padding: 70px 0 20px;

}



.footer-grid {

    display: grid;

    grid-template-columns: 1.5fr 1fr 1fr 1fr;

    gap: 40px;

}



.footer-grid h3 {

    margin-bottom: 18px;

    font-size: 14px;

    letter-spacing: 1px;

}



.footer-grid p,

.footer-grid a {

    display: block;

    color: #9db0bc;

    font-size: 13px;

    margin-bottom: 8px;

}



.footer-grid a:hover {

    color: #70c9f5;

}



.social-links {

    margin-top: 20px;

    display: flex;

    gap: 10px;

}



.social-links a {

    width: 38px;

    height: 38px;



    display: grid;

    place-items: center;



    border: 1px solid rgba(255,255,255,0.15);

    border-radius: 50%;



    transition: 0.3s;

}



.social-links a:hover {

    background: #1686c7;

    color: white;

}



.copyright {

    border-top: 1px solid rgba(255,255,255,0.08);

    margin-top: 50px;

    padding-top: 20px;



    color: #7f949f;

    font-size: 12px;

    text-align: center;

}





/* =========================================================

   MOBILE

========================================================= */



@media(max-width: 900px) {



    .navbar {

        min-height: 72px;

    }



    nav {

        display: none;

    }



    .hero-slider {

        height: 700px;

    }



    .slide-content {

        padding-top: 70px;

    }



    .slide-content h1 {

        font-size: 48px;

    }



    .service-grid {

        grid-template-columns: repeat(2, 1fr);

    }



    .intro-grid {

        grid-template-columns: 1fr;

    }



    .insurance-grid {

        grid-template-columns: 1fr;

    }



    .process-grid {

        grid-template-columns: repeat(2, 1fr);

    }



    .footer-grid {

        grid-template-columns: repeat(2, 1fr);

    }

}





@media(max-width: 600px) {



    .logo {

        font-size: 16px;

    }



    .nav-btn {

        padding: 10px 14px;

        font-size: 9px;

    }



    .hero-slider {

        height: 680px;

    }



    .slide::before {

        background:

            linear-gradient(

                90deg,

                rgba(5,22,35,0.88),

                rgba(5,22,35,0.50)

            );

    }



    .slide-content {

        width: 88%;

    }



    .slide-content h1 {

        font-size: 40px;

    }



    .slide-content p {

        font-size: 14px;

    }



    .slider-arrow {

        width: 42px;

        height: 42px;

    }



    .slider-prev {

        left: 12px;

    }



    .slider-next {

        right: 12px;

    }



    .service-grid {

        grid-template-columns: 1fr;

    }



    .process-grid {

        grid-template-columns: 1fr;

    }



    .footer-grid {

        grid-template-columns: 1fr;

    }



    .intro,

    .services,

    .insurance,

    .process {

        padding: 70px 0;

    }

}





/* =========================================================

   REDUCED MOTION

========================================================= */



@media (prefers-reduced-motion: reduce) {



    html {

        scroll-behavior: auto;

    }



    *,

    *::before,

    *::after {

        animation-duration: 0.01ms !important;

        animation-iteration-count: 1 !important;

        transition-duration: 0.01ms !important;

    }

}


/* =========================================================
   HOMEPAGE SERVICE SHOWCASE
========================================================= */
.home-services{padding:100px 0;background:#f1f8fc}
.home-service-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.home-service-card{background:#fff;border:1px solid #dfebf2;border-radius:18px;padding:30px;box-shadow:0 12px 32px rgba(30,80,110,.06);transition:transform .25s ease,box-shadow .25s ease}
.home-service-card:hover{transform:translateY(-5px);box-shadow:0 18px 38px rgba(30,80,110,.12)}
.home-service-icon{width:54px;height:54px;display:grid;place-items:center;border-radius:15px;background:#e5f4fc;color:#1686c7;font-size:22px;margin-bottom:22px}
.home-service-kicker{font-size:10px!important;font-weight:800;letter-spacing:1.5px;color:#b18424!important;margin-bottom:8px!important}
.home-service-card h3{font-size:20px;color:#152b40;margin-bottom:10px}
.home-service-card>p:not(.home-service-kicker){font-size:13px;color:#617382;line-height:1.75;margin-bottom:20px}
.home-service-card>a{font-size:11px;font-weight:800;letter-spacing:.5px;color:#1677b8}
.home-service-card>a i{margin-left:5px}
.home-bright-card{background:linear-gradient(145deg,#102b50,#174d78);border-color:#c9a44b;color:#fff}
.home-bright-card .home-service-icon{background:rgba(255,255,255,.13);color:#f0c75e}
.home-bright-card .home-service-kicker{color:#f0c75e!important}
.home-bright-card h3{color:#fff}
.home-bright-card>p:not(.home-service-kicker){color:#e0eaf3}
.home-bright-card>a{color:#f3d477}
.home-services-cta{margin-top:30px;padding:30px 34px;background:#fff;border:1px solid #dfebf2;border-radius:18px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.home-services-cta .eyebrow{margin-bottom:5px}
.home-services-cta h3{font-size:23px;color:#152b40;margin-bottom:5px}
.home-services-cta p:not(.eyebrow){font-size:13px;color:#617382}
@media(max-width:900px){.home-service-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.home-services{padding:75px 0}}
@media(max-width:600px){.home-service-grid{grid-template-columns:1fr}.home-service-card{padding:25px}.home-services-cta{align-items:flex-start;flex-direction:column;padding:25px}.home-services-cta h3{font-size:20px}}

/* BRIGHT MOTO BRAND ARTWORK ON HOME AND SERVICES */
.home-bright-art{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:12px;margin:0 0 22px}
.home-bright-card .home-service-icon{display:none}
.bright-moto-service-card{overflow:hidden}
.bright-moto-service-art{margin:-35px -35px 24px;overflow:hidden;background:#102b50}
.bright-moto-service-art img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover}
.bright-moto-service-card .number{z-index:1;background:#fff;border-radius:20px;padding:3px 8px}
@media(max-width:600px){.bright-moto-service-art{margin:-25px -25px 20px}}