/*=============================================================
HARLEY-DAVIDSON ANTALYA
PREMIUM WEBSITE

Author  : OpenAI + User
Version : 1.0

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


/*=============================================================
FONTS
=============================================================*/

@font-face {
    font-family: "Oswald";
    src: url("../fonts/Anton-Regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "1903 Regular";
    src: local("Arial"), local("Helvetica"), sans-serif;
}

@font-face {
    font-family: "1903 Bold";
    src: local("Arial Bold"), local("Helvetica Bold"), sans-serif;
}


/*=============================================================
ROOT
=============================================================*/

:root{

    --orange:#ff6a00;
    --orange-light:#ff8d2b;
    --orange-dark:#d04d00;

    --black:#040404;
    --black-soft:#111111;
    --black-card:#171717;

    --white:#ffffff;

    --glass:rgba(8,8,8,.55);

    --border:rgba(255,255,255,.08);

    --transition:.35s;

    --radius:18px;

}


/*=============================================================
RESET
=============================================================*/

*{

    margin:0;
    padding:0;
    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

}

body{

    background:#050505;

    color:#fff;

    font-family: "1903 Regular", Arial, Helvetica, sans-serif;

    overflow-x:hidden;

}


/*=============================================================
IMAGES
=============================================================*/

img{

    width:100%;
    display:block;

}


/*=============================================================
LINK
=============================================================*/

a{

    text-decoration:none;

    color:#fff;

}


/*=============================================================
LIST
=============================================================*/

ul{

    list-style:none;

    margin:0;
    padding:0;

}


/*=============================================================
HEADINGS
=============================================================*/

h1,
h2,
h3,
h4,
h5,
h6{

    margin:0;

    font-family:"Oswald";

    letter-spacing:1px;

}


/*=============================================================
CONTAINER
=============================================================*/

.container{

    max-width:1450px;

}


/*=============================================================
SCROLLBAR
=============================================================*/

::-webkit-scrollbar{

    width:11px;

}

::-webkit-scrollbar-track{

    background:#090909;

}

::-webkit-scrollbar-thumb{

    background:linear-gradient(
        to bottom,
        #ff8c1a,
        #ff5b00
    );

    border-radius:30px;

}

::-webkit-scrollbar-thumb:hover{

    background:#ff7a00;

}


/*=============================================================
SELECTION
=============================================================*/

::selection{

    background:#ff6a00;

    color:#fff;

}

/*=============================================================
HEADER
=============================================================*/

#header{

    position:fixed;

    top:0;
    left:0;

    width:100%;

    z-index:99999;

    transition:.45s;

}


/*=============================================================
TOPBAR
=============================================================*/

.topbar{

    position:relative;

    height:60px;

    display:flex;
    align-items:center;

    background:rgba(0,0,0,.45);

    backdrop-filter:blur(24px);
    -webkit-backdrop-filter:blur(24px);

    border-bottom:1px solid rgba(255,255,255,.04);

}

.topbar::before{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(
        90deg,
        rgba(255,110,0,.04),
        transparent 35%,
        transparent 65%,
        rgba(255,110,0,.04)
    );

    pointer-events:none;

}

.topbar-left{

    display:flex;

    align-items:center;

    gap:45px;

}

.topbar-left a{

    display:flex;

    align-items:center;

    gap:12px;

    color:#d6d6d6;

    font-size:14px;

    transition:.35s;

}

.topbar-left a:hover{

    color:white;

}

.topbar-left i{

    color:var(--orange);

    font-size:15px;

}

.topbar-right{

    display:flex;

    justify-content:flex-end;

    align-items:center;

    gap:16px;

}

.topbar-right a{

    color:white;

    font-size:14px;

    letter-spacing:1px;

    transition:.35s;

}

.topbar-right a.active{

    color:var(--orange);

}

.topbar-right a:hover{

    color:var(--orange);

}

.topbar-right span{

    color:#555;

}


/*=============================================================
GLOW LINE
=============================================================*/

.header-glow{

    position:relative;

    height:2px;

    overflow:hidden;

    background:
    linear-gradient(
    90deg,
    transparent,
    rgba(255,115,0,.25),
    rgba(255,140,30,.95),
    rgba(255,115,0,.25),
    transparent);

    box-shadow:

    0 0 8px rgba(255,115,0,.65),

    0 0 18px rgba(255,115,0,.45),

    0 0 40px rgba(255,115,0,.25);

}

.header-glow::before{

    content:"";

    position:absolute;

    left:-30%;

    top:-12px;

    width:30%;

    height:24px;

    background:
    radial-gradient(circle,
    rgba(255,170,70,.95),
    rgba(255,120,0,.25),
    transparent);

    filter:blur(10px);

    animation:headerGlow 7s linear infinite;

}

@keyframes headerGlow{

    from{

        left:-30%;

    }

    to{

        left:130%;

    }

}


/*=============================================================
NAVBAR
=============================================================*/

.navbar{

    position:relative;

    height:95px;

    background:rgba(0,0,0,.52);

    backdrop-filter:blur(24px);

    -webkit-backdrop-filter:blur(24px);

    transition:.40s;

}

.navbar::before{

    content:"";

    position:absolute;

    inset:0;

    background:
    linear-gradient(
    to bottom,

    rgba(255,255,255,.03),

    transparent);

}

.navbar-brand{

    width:240px;

}

.navbar-brand img{

    width:100%;

}

.navbar-nav{

    gap:18px;

    margin-right:35px;

}

.nav-link{

    position:relative;

    font-family:"Oswald";

    font-size:17px;

    letter-spacing:1px;

    color:white;

    text-transform:uppercase;

    transition:.35s;

    padding:10px 16px !important;

}

.nav-link:hover{

    color:var(--orange);

}

.nav-link::after{

    content:"";

    position:absolute;

    left:50%;

    bottom:0;

    width:0;

    height:2px;

    background:var(--orange);

    transition:.35s;

    transform:translateX(-50%);

    box-shadow:

    0 0 12px rgba(255,115,0,.85);

}

.nav-link:hover::after{

    width:70%;

}


/*=============================================================
SERVICE BUTTON
=============================================================*/

.service-button{

    position:relative;

    overflow:hidden;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    width:185px;

    height:52px;

    border-radius:50px;

    border:1px solid var(--orange);

    color:white;

    font-family:"Oswald";

    letter-spacing:1px;

    transition:.40s;

}

.service-button::before{

    content:"";

    position:absolute;

    width:0;

    height:100%;

    left:0;

    top:0;

    background:var(--orange);

    transition:.40s;

    z-index:-1;

}

.service-button:hover{

    color:white;

    box-shadow:

    0 0 18px rgba(255,115,0,.65),

    0 0 40px rgba(255,115,0,.35);

}

.service-button:hover::before{

    width:100%;

}


/*=============================================================
MENU GLOW
=============================================================*/

.menu-glow{

    height:2px;

    background:
    linear-gradient(
    90deg,

    transparent,

    rgba(255,120,0,.35),

    rgba(255,145,50,1),

    rgba(255,120,0,.35),

    transparent);

    box-shadow:

    0 0 12px rgba(255,120,0,.65),

    0 0 28px rgba(255,120,0,.45);

}

/*=============================================================
HERO
=============================================================*/

#hero{

    position:relative;

    width:100%;

    height:100vh;

    overflow:hidden;

    background:#050505;

}


/*=============================================================
SWIPER
=============================================================*/

.heroSlider{

    width:100%;

    height:100%;

}

.heroSlider .swiper-slide{

    position:relative;

    overflow:hidden;

}


/*=============================================================
BACKGROUND IMAGE
=============================================================*/

.hero-bg{

    position:absolute;

    inset:0;

    z-index:1;

}

.hero-bg img{

    width:100%;

    height:100%;

    object-fit:cover;

    object-position:center center;

}


/*=============================================================
OVERLAY
=============================================================*/

.hero-overlay{

    position:absolute;

    inset:0;

    z-index:2;

    background:

    linear-gradient(

    90deg,

    rgba(0,0,0,.92) 0%,

    rgba(0,0,0,.82) 25%,

    rgba(0,0,0,.55) 45%,

    rgba(0,0,0,.18) 70%,

    rgba(0,0,0,.05) 100%

    );

}


/*=============================================================
TOP LIGHT
=============================================================*/

.hero-overlay::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:220px;

    background:

    linear-gradient(

    to bottom,

    rgba(255,110,0,.10),

    transparent

    );

}


/*=============================================================
BOTTOM LIGHT
=============================================================*/

.hero-overlay::after{

    content:"";

    position:absolute;

    bottom:0;

    left:0;

    width:100%;

    height:260px;

    background:

    linear-gradient(

    to top,

    rgba(0,0,0,.98),

    transparent

    );

}


/*=============================================================
CONTENT
=============================================================*/

.hero-content{

    position:relative;

    z-index:5;

    max-width:720px;

    padding-top:250px;

}

.hero-subtitle{

    display:inline-block;

    margin-bottom:20px;

    color:var(--orange);

    letter-spacing:5px;

    text-transform:uppercase;

    font-size:15px;

}

.hero-content h1{

    font-size:78px;

    line-height:1;

    text-transform:uppercase;

    margin-bottom:28px;

    text-shadow:

    0 0 20px rgba(0,0,0,.60);

}

.hero-content p{

    width:620px;

    max-width:100%;

    color:#d5d5d5;

    font-size:19px;

    line-height:1.9;

    margin-bottom:45px;

}


/*=============================================================
BUTTONS
=============================================================*/

.hero-buttons{

    display:flex;

    gap:18px;

}

.btn-outline-orange{

    width:180px;

    height:56px;

    border:1px solid var(--orange);

    border-radius:50px;

    display:flex;

    align-items:center;

    justify-content:center;

    font-family:"Oswald";

    letter-spacing:1px;

    transition:.35s;

}

.btn-outline-orange:hover{

    background:var(--orange);

    box-shadow:

    0 0 20px rgba(255,110,0,.65);

}

.btn-orange{

    width:180px;

    height:56px;

    border-radius:50px;

    background:var(--orange);

    display:flex;

    justify-content:center;

    align-items:center;

    font-family:"Oswald";

    letter-spacing:1px;

    transition:.35s;

}

.btn-orange:hover{

    transform:translateY(-3px);

    box-shadow:

    0 0 25px rgba(255,110,0,.65);

}

/*=============================================================
MODEL NAVIGATION
=============================================================*/

#model-navigation{

    position:relative;

    margin-top:-85px;

    z-index:50;

}

.model-navigation-wrapper{

    display:grid;

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

    gap:25px;

}


/*=============================================================
MODEL ITEM
=============================================================*/

.model-item{

    position:relative;

    overflow:hidden;

    min-height:180px;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    text-align:center;

    padding:40px 20px;

    border-radius:22px;

    background:rgba(15,15,15,.68);

    backdrop-filter:blur(24px);
    -webkit-backdrop-filter:blur(24px);

    border:1px solid rgba(255,255,255,.05);

    transition:.45s;

}


/*=============================================================
TOP GLOW
=============================================================*/

.model-item::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:1px;

    background:linear-gradient(

    90deg,

    transparent,

    rgba(255,120,0,.85),

    transparent

    );

    box-shadow:

    0 0 10px rgba(255,120,0,.80),

    0 0 25px rgba(255,120,0,.40);

}


/*=============================================================
BOTTOM GLOW
=============================================================*/

.model-item::after{

    content:"";

    position:absolute;

    bottom:0;

    left:50%;

    transform:translateX(-50%);

    width:65%;

    height:2px;

    background:var(--orange);

    filter:blur(.5px);

    opacity:.35;

}


/*=============================================================
ICON
=============================================================*/

.model-icon{

    width:74px;

    height:74px;

    display:flex;

    align-items:center;

    justify-content:center;

    margin-bottom:22px;

    border-radius:50%;

    background:rgba(255,255,255,.03);

    border:1px solid rgba(255,255,255,.06);

}

.model-icon i{

    font-size:32px;

    color:white;

    transition:.35s;

}


/*=============================================================
TITLE
=============================================================*/

.model-item span{

    font-family:"Oswald";

    font-size:17px;

    line-height:1.4;

    letter-spacing:1px;

    text-transform:uppercase;

    color:white;

}


/*=============================================================
HOVER
=============================================================*/

.model-item:hover{

    transform:translateY(-10px);

    border-color:rgba(255,120,0,.55);

    box-shadow:

    0 18px 45px rgba(0,0,0,.55),

    0 0 20px rgba(255,120,0,.22),

    inset 0 0 0 1px rgba(255,120,0,.12);

}

.model-item:hover .model-icon{

    background:rgba(255,120,0,.08);

    border-color:rgba(255,120,0,.35);

}

.model-item:hover .model-icon i{

    color:var(--orange);

}

.model-item:hover::after{

    opacity:1;

}


/*=============================================================
ACTIVE
=============================================================*/

.model-item.active{

    border-color:rgba(255,120,0,.70);

    box-shadow:

    0 0 22px rgba(255,120,0,.22),

    inset 0 0 0 1px rgba(255,120,0,.18);

}

.model-item.active .model-icon{

    background:rgba(255,120,0,.10);

}

.model-item.active .model-icon i{

    color:var(--orange);

}

/*=============================================================
MOTORCYCLE SECTION
=============================================================*/

.motorcycle-section{

    position:relative;

    padding:140px 0;

    background:#050505;

}

.motorcycle-section:nth-child(even){

    background:#080808;

}


/*=============================================================
SECTION TITLE
=============================================================*/

.section-title{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:25px;

    margin-bottom:70px;

}

.section-title h2{

    font-size:48px;

    color:#ffffff;

    text-transform:uppercase;

    letter-spacing:2px;

}

.title-line{

    width:120px;

    height:2px;

    border-radius:50px;

    background:linear-gradient(
        90deg,
        transparent,
        rgba(255,106,0,.95),
        transparent
    );

    box-shadow:
        0 0 10px rgba(255,106,0,.70),
        0 0 25px rgba(255,106,0,.30);

}


/*=============================================================
MOTORCYCLE CARD
=============================================================*/

.motorcycle-card{

    position:relative;

    overflow:hidden;

    background:rgba(18,18,18,.92);

    border:1px solid rgba(255,255,255,.05);

    border-radius:22px;

    padding:28px;

    transition:.45s;

    backdrop-filter:blur(18px);

    -webkit-backdrop-filter:blur(18px);

}


/*=============================================================
TOP GLOW
=============================================================*/

.motorcycle-card::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:2px;

    background:linear-gradient(
        90deg,
        transparent,
        rgba(255,120,0,.95),
        transparent
    );

    box-shadow:
        0 0 12px rgba(255,120,0,.75),
        0 0 28px rgba(255,120,0,.35);

}


/*=============================================================
BOTTOM GLOW
=============================================================*/

.motorcycle-card::after{

    content:"";

    position:absolute;

    left:50%;

    bottom:0;

    transform:translateX(-50%);

    width:70%;

    height:2px;

    background:var(--orange);

    opacity:.25;

}


/*=============================================================
IMAGE
=============================================================*/

.motorcycle-image{

    height:240px;

    display:flex;

    align-items:center;

    justify-content:center;

    margin-bottom:30px;

}

.motorcycle-image img{

    max-height:220px;

    width:auto;

    transition:.45s;

}


/*=============================================================
COLORS
=============================================================*/

.color-options{

    display:flex;

    justify-content:center;

    gap:12px;

    margin-bottom:24px;

}

.color{

    width:18px;

    height:18px;

    border-radius:50%;

    cursor:pointer;

    border:2px solid rgba(255,255,255,.18);

    transition:.30s;

}

.color.active{

    transform:scale(1.18);

    border-color:white;

    box-shadow:
        0 0 12px rgba(255,255,255,.30);

}


/*=============================================================
TITLE
=============================================================*/

.motorcycle-card h3{

    text-align:center;

    font-size:24px;

    margin-bottom:14px;

    color:#ffffff;

}


/*=============================================================
PRICE
=============================================================*/

.price{

    text-align:center;

    color:var(--orange);

    font-size:26px;

    font-family:"1903 Bold";

    margin-bottom:28px;

}

.price small{

    display:block;

    margin-top:6px;

    font-size:13px;

    color:#9d9d9d;

    font-family: "1903 Regular", Arial, Helvetica, sans-serif;

}


/*=============================================================
BUTTON
=============================================================*/

.btn-card{

    width:100%;

    height:52px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50px;

    border:1px solid var(--orange);

    font-family:"Oswald";

    letter-spacing:1px;

    transition:.35s;

}

.btn-card:hover{

    background:var(--orange);

    box-shadow:
        0 0 18px rgba(255,120,0,.65),
        0 0 35px rgba(255,120,0,.25);

}


/*=============================================================
CARD HOVER
=============================================================*/

.motorcycle-card:hover{

    transform:translateY(-12px);

    border-color:rgba(255,120,0,.55);

    box-shadow:
        0 18px 45px rgba(0,0,0,.55),
        0 0 30px rgba(255,120,0,.18);

}

.motorcycle-card:hover .motorcycle-image img{

    transform:scale(1.06);

}

/*=============================================================
GLOBAL BACKGROUND
=============================================================*/

body{

    position:relative;

    background:
    radial-gradient(circle at top center,
    rgba(255,95,0,.06),
    transparent 30%),

    radial-gradient(circle at bottom center,
    rgba(255,95,0,.03),
    transparent 40%),

    #050505;

}

/*=============================================================
NOISE LAYER
=============================================================*/

body::before{

    content:"";

    position:fixed;

    inset:0;

    pointer-events:none;

    background:none; /* noise placeholder removed */

    opacity:.035;

    z-index:1;

}

/*=============================================================
AMBIENT LIGHT
=============================================================*/

body::after{

    content:"";

    position:fixed;

    width:900px;

    height:900px;

    left:50%;

    top:-450px;

    transform:translateX(-50%);

    background:

    radial-gradient(circle,

    rgba(255,110,0,.09),

    transparent 72%);

    filter:blur(100px);

    pointer-events:none;

}

/*=============================================================
SECTION SPACING
=============================================================*/

section{

    position:relative;

    z-index:5;

}

/*=============================================================
CONTAINER
=============================================================*/

.container{

    position:relative;

    z-index:20;

}

/*=============================================================
GLASS EFFECT
=============================================================*/

.glass{

    background:

    linear-gradient(

    180deg,

    rgba(255,255,255,.04),

    rgba(255,255,255,.01));

    backdrop-filter:blur(28px);

    -webkit-backdrop-filter:blur(28px);

    border:

    1px solid rgba(255,255,255,.05);

}

/*=============================================================
ORANGE SHADOW
=============================================================*/

.orange-shadow{

    box-shadow:

    0 0 18px rgba(255,115,0,.25),

    0 0 60px rgba(255,115,0,.12);

}

/*=============================================================
TEXT GLOW
=============================================================*/

.orange-text{

    color:var(--orange);

    text-shadow:

    0 0 12px rgba(255,115,0,.45);

}

/*=============================================================
LIGHT REFLECTION
=============================================================*/

.light-reflection{

    position:absolute;

    top:0;

    left:-120%;

    width:50%;

    height:100%;

    transform:skewX(-25deg);

    background:

    linear-gradient(

    90deg,

    transparent,

    rgba(255,255,255,.05),

    rgba(255,255,255,.12),

    transparent);

    pointer-events:none;

}

/*=============================================================
CARD REFLECTION
=============================================================*/

.motorcycle-card:hover .light-reflection{

    animation:

    reflectionMove

    1.2s linear;

}

@keyframes reflectionMove{

    from{

        left:-120%;

    }

    to{

        left:150%;

    }

}

/*=============================================================
IMAGE SHADOW
=============================================================*/

.motorcycle-image{

    position:relative;

}

.motorcycle-image::after{

    content:"";

    position:absolute;

    bottom:12px;

    left:50%;

    transform:translateX(-50%);

    width:65%;

    height:26px;

    border-radius:50%;

    background:

    radial-gradient(

    ellipse,

    rgba(255,110,0,.28),

    transparent);

    filter:blur(18px);

}

/*=============================================================
HERO SLIDER PREMIUM
=============================================================*/

.heroSlider .swiper-slide{

    opacity:0 !important;

    transition:opacity 1.2s ease;

}

.heroSlider .swiper-slide-active{

    opacity:1 !important;

}


/*=============================================================
KEN BURNS EFFECT
=============================================================*/

.hero-bg{

    overflow:hidden;

}

.hero-bg img{

    transform:scale(1);

    transition:transform 8s linear;

}

.heroSlider .swiper-slide-active .hero-bg img{

    transform:scale(1.08);

}


/*=============================================================
CONTENT ANIMATION
=============================================================*/

.hero-content>*{

    opacity:0;

    transform:translateY(35px);

}

.heroSlider .swiper-slide-active .hero-subtitle{

    animation:fadeUp .8s .2s forwards;

}

.heroSlider .swiper-slide-active h1{

    animation:fadeUp .8s .45s forwards;

}

.heroSlider .swiper-slide-active p{

    animation:fadeUp .8s .65s forwards;

}

.heroSlider .swiper-slide-active .hero-buttons{

    animation:fadeUp .8s .85s forwards;

}

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(35px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}


/*=============================================================
HERO TITLE
=============================================================*/

.hero-content h1{

    max-width:780px;

    font-size:92px;

    font-weight:400;

    line-height:.92;

    text-transform:uppercase;

    color:#fff;

    text-shadow:
        0 0 15px rgba(0,0,0,.55),
        0 0 40px rgba(0,0,0,.30);

}


/*=============================================================
HERO PARAGRAPH
=============================================================*/

.hero-content p{

    max-width:620px;

    font-size:20px;

    line-height:1.9;

    color:#d9d9d9;

}


/*=============================================================
SUBTITLE
=============================================================*/

.hero-subtitle{

    position:relative;

    padding-left:65px;

    font-size:14px;

    letter-spacing:4px;

}

.hero-subtitle::before{

    content:"";

    position:absolute;

    left:0;

    top:50%;

    transform:translateY(-50%);

    width:45px;

    height:2px;

    background:var(--orange);

    box-shadow:

        0 0 8px rgba(255,110,0,.7);

}


/*=============================================================
BUTTONS
=============================================================*/

.hero-buttons{

    display:flex;

    gap:20px;

}

.hero-buttons a{

    position:relative;

    overflow:hidden;

}

.hero-buttons a::before{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:100%;

    height:100%;

    background:linear-gradient(

        120deg,

        transparent,

        rgba(255,255,255,.18),

        transparent

    );

}

.hero-buttons a:hover::before{

    left:140%;

    transition:.8s;

}


/*=============================================================
PAGINATION
=============================================================*/

.heroSlider .swiper-pagination{

    bottom:55px !important;

}

.heroSlider .swiper-pagination-bullet{

    width:13px;

    height:13px;

    background:#ffffff;

    opacity:.25;

    transition:.35s;

}

.heroSlider .swiper-pagination-bullet-active{

    opacity:1;

    background:var(--orange);

    box-shadow:

        0 0 15px rgba(255,110,0,.7);

}

/*=============================================================
MEGA MENU
=============================================================*/

.has-mega{

    position:static;

}

.mega-menu{

    position:absolute;

    left:0;

    top:100%;

    width:100%;

    padding:55px 0;

    background:rgba(8,8,8,.96);

    backdrop-filter:blur(30px);

    -webkit-backdrop-filter:blur(30px);

    border-top:1px solid rgba(255,106,0,.25);

    border-bottom:1px solid rgba(255,106,0,.18);

    opacity:0;

    visibility:hidden;

    transform:translateY(20px);

    transition:.45s ease;

    z-index:999;

}

/* Hover ile aç */
.has-mega:hover .mega-menu{

    opacity:1;

    visibility:visible;

    transform:translateY(0);

}

/*=============================================================
MEGA WRAPPER
=============================================================*/

.mega-wrapper{

    display:grid;

    grid-template-columns:300px 1fr;

    gap:60px;

    align-items:flex-start;

}

/*=============================================================
LEFT MENU
=============================================================*/

.mega-categories{

    display:flex;

    flex-direction:column;

    gap:12px;

}

.mega-categories a{

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:18px 22px;

    border-radius:14px;

    color:#d6d6d6;

    font-family:"1903 Bold";

    transition:.35s;

}

.mega-categories a:hover{

    background:rgba(255,106,0,.08);

    color:#ffffff;

    padding-left:30px;

}

.mega-categories a::after{

    content:"→";

    color:var(--orange);

    opacity:0;

    transition:.35s;

}

.mega-categories a:hover::after{

    opacity:1;

}

/*=============================================================
RIGHT AREA
=============================================================*/

.mega-content{

    display:grid;

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

    gap:28px;

}

/*=============================================================
MODEL CARD
=============================================================*/

.mega-bike{

    position:relative;

    overflow:hidden;

    border-radius:18px;

    background:rgba(255,255,255,.02);

    border:1px solid rgba(255,255,255,.05);

    transition:.35s;

}

.mega-bike img{

    width:100%;

    height:180px;

    object-fit:contain;

    padding:20px;

    transition:.45s;

}

.mega-bike h5{

    padding:0 22px;

    margin-bottom:6px;

    font-size:22px;

    color:#fff;

}

.mega-bike span{

    display:block;

    padding:0 22px 22px;

    color:#9c9c9c;

    font-size:14px;

}

.mega-bike:hover{

    transform:translateY(-8px);

    border-color:rgba(255,106,0,.45);

    box-shadow:
        0 18px 45px rgba(0,0,0,.45),
        0 0 30px rgba(255,106,0,.18);

}

.mega-bike:hover img{

    transform:scale(1.05);

}

/*=============================================================
TOP GLOW
=============================================================*/

.mega-bike::before{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:100%;

    height:2px;

    background:linear-gradient(
        90deg,
        transparent,
        var(--orange),
        transparent
    );

    box-shadow:
        0 0 12px rgba(255,106,0,.75);

}


/*=============================================================
HEADER SCROLL
=============================================================*/

.header-scrolled .topbar{

    height:45px;

    background:rgba(0,0,0,.92);

}

.header-scrolled .navbar{

    height:72px;

    background:rgba(5,5,5,.96);

    box-shadow:

    0 20px 60px rgba(0,0,0,.45);

}

.header-scrolled .navbar-brand{

    transform:scale(.88);

}

.navbar-brand{

    transition:.35s;

}

#backToTop{

position:fixed;

right:35px;

bottom:35px;

width:55px;

height:55px;

border:none;

border-radius:50%;

background:#ff6a00;

color:#fff;

cursor:pointer;

opacity:0;

visibility:hidden;

transform:translateY(30px);

transition:.4s;

box-shadow:

0 0 20px rgba(255,106,0,.45);

z-index:99999;

}

#backToTop.active{

opacity:1;

visibility:visible;

transform:translateY(0);

}

#backToTop:hover{

transform:translateY(-6px);

box-shadow:

0 0 35px rgba(255,106,0,.7);

}


/*=============================================================
WHATSAPP FLOAT BUTTON
=============================================================*/

#whatsapp {
    position: fixed;
    bottom: 28px;
    right: 28px;
    width: 58px;
    height: 58px;
    background: #25d366;
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.7rem;
    z-index: 9990;
    box-shadow: 0 6px 20px rgba(37, 211, 102, 0.45);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    text-decoration: none;
}

#whatsapp:hover {
    transform: scale(1.1);
    color: #fff;
    box-shadow: 0 8px 28px rgba(37, 211, 102, 0.6);
}

/* Fix body font to use Inter as primary available font */
body {
    font-family: "Inter", "1903 Regular", Arial, Helvetica, sans-serif !important;
}

h1, h2, h3, .hero-subtitle, .section-title h2, .navbar-brand {
    font-family: "Oswald", Impact, sans-serif;
}