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

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    font-family:'Poppins',sans-serif;
    background:#f6f4ef;
    color:#222;
    overflow-x:hidden;
}

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

.hero{

    position:relative;

    min-height:100vh;

    display:flex;

    align-items:center;

    overflow:hidden;

    isolation:isolate;

    background:

    linear-gradient(

        90deg,

        rgba(247,244,239,.96) 0%,

        rgba(247,244,239,.82) 35%,

        rgba(247,244,239,.35) 55%,

        rgba(247,244,239,.05) 72%,

        rgba(247,244,239,0) 100%

    ),

    url("https://oitek.com.au/wp-content/uploads/2026/08/orange-1.webp");

    background-size:cover;

    background-position:center;

    background-repeat:no-repeat;

}

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

.overlay{

    position:absolute;

    inset:0;

    background:

    radial-gradient(

        circle at 80% 50%,

        rgba(255,150,0,.22),

        transparent 45%

    );

    z-index:1;

}

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

.container{

    position:relative;

    z-index:5;

    width:min(92%,1400px);

    margin:auto;

    display:grid;

    grid-template-columns:1.05fr .95fr;

    align-items:center;

    gap:60px;

    padding:100px 0;

}

/*=====================================================
                LEFT SIDE
=====================================================*/

.hero-left{

    max-width:680px;

    animation:fadeLeft .9s ease forwards;

}

.sub-title{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:10px 22px;

    border-radius:100px;

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

    backdrop-filter:blur(18px);

    color:#ff7b00;

    font-size:13px;

    letter-spacing:3px;

    font-weight:700;

    text-transform:uppercase;

    margin-bottom:28px;

}

/*=====================================================
                HEADING
=====================================================*/

.hero h1{

    font-size:78px;

    line-height:1.02;

    font-weight:800;

    letter-spacing:-3px;

    color:#1f1f1f;

    margin-bottom:28px;

}

.hero h1 span{

    display:block;

    background:linear-gradient(

        90deg,

        #ff6f00,

        #ffb347

    );

    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;

}

/*=====================================================
                DESCRIPTION
=====================================================*/

.hero p{

    font-size:20px;

    line-height:1.9;

    color:#5d5d5d;

    max-width:620px;

    margin-bottom:45px;

}

/*=====================================================
                RIGHT SIDE
=====================================================*/

.hero-right{

    position:relative;

    display:flex;

    justify-content:center;

    align-items:center;

    animation:fadeRight 1s ease forwards;

}
/*=====================================================
                CAR IMAGE
=====================================================*/

.car{

    width:100%;

    max-width:760px;

    height:auto;

    display:block;

    position:relative;

    z-index:5;

    filter:
        drop-shadow(0 40px 80px rgba(0,0,0,.28));

    animation:carFloat 6s ease-in-out infinite;

    transition:
        transform .45s ease,
        filter .45s ease;

}

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

.hero-right:hover .car{

    transform:
        scale(1.04)
        rotate(-1deg);

    filter:
        drop-shadow(0 55px 100px rgba(0,0,0,.35));

}

/*=====================================================
            ORANGE GLOW
=====================================================*/

.hero-right::before{

    content:"";

    position:absolute;

    width:560px;

    height:560px;

    border-radius:50%;

    background:

        radial-gradient(

            circle,

            rgba(255,135,0,.42) 0%,

            rgba(255,135,0,.18) 40%,

            transparent 72%

        );

    filter:blur(70px);

    z-index:1;

    animation:glowPulse 7s ease-in-out infinite;

}

/*=====================================================
            GROUND SHADOW
=====================================================*/

.hero-right::after{

    content:"";

    position:absolute;

    bottom:15px;

    left:50%;

    transform:translateX(-50%);

    width:68%;

    height:45px;

    border-radius:50%;

    background:

        rgba(0,0,0,.22);

    filter:blur(26px);

    z-index:0;

    animation:shadowMove 6s ease-in-out infinite;

}

/*=====================================================
            CAR FLOAT
=====================================================*/

@keyframes carFloat{

    0%{

        transform:
            translateY(0px)
            rotate(0deg);

    }

    25%{

        transform:
            translateY(-8px)
            rotate(.5deg);

    }

    50%{

        transform:
            translateY(-18px)
            rotate(0deg);

    }

    75%{

        transform:
            translateY(-8px)
            rotate(-.5deg);

    }

    100%{

        transform:
            translateY(0px)
            rotate(0deg);

    }

}

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

@keyframes glowPulse{

    0%{

        transform:scale(.92);

        opacity:.75;

    }

    50%{

        transform:scale(1.1);

        opacity:1;

    }

    100%{

        transform:scale(.92);

        opacity:.75;

    }

}

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

@keyframes shadowMove{

    0%{

        transform:
            translateX(-50%)
            scale(1);

    }

    50%{

        transform:
            translateX(-50%)
            scale(.88);

        opacity:.45;

    }

    100%{

        transform:
            translateX(-50%)
            scale(1);

    }

}

/*=====================================================
            ENTRY ANIMATION
=====================================================*/

@keyframes fadeLeft{

    from{

        opacity:0;

        transform:
            translateX(-70px);

    }

    to{

        opacity:1;

        transform:
            translateX(0);

    }

}

@keyframes fadeRight{

    from{

        opacity:0;

        transform:
            translateX(70px);

    }

    to{

        opacity:1;

        transform:
            translateX(0);

    }

}

/*=====================================================
                FEATURE GRID
=====================================================*/

.features{

    display:grid;

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

    gap:20px;

    margin-bottom:45px;

}

/*=====================================================
                FEATURE CARD
=====================================================*/

.feature{

    position:relative;

    display:flex;

    align-items:center;

    gap:18px;

    padding:18px 22px;

    border-radius:22px;

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

    backdrop-filter:blur(18px);

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

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

    box-shadow:

        0 20px 40px rgba(0,0,0,.06);

    transition:

        transform .35s ease,

        box-shadow .35s ease,

        background .35s ease;

}

.feature:hover{

    transform:

        translateY(-8px)

        scale(1.03);

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

    box-shadow:

        0 30px 60px rgba(0,0,0,.12);

}

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

.icon{

    width:64px;

    height:64px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:28px;

    background:

        linear-gradient(

            135deg,

            #ffffff,

            #f2f2f2

        );

    box-shadow:

        0 12px 22px rgba(0,0,0,.08);

    transition:.35s;

}

.feature:hover .icon{

    transform:

        rotate(12deg)

        scale(1.12);

}

/*=====================================================
                FEATURE TEXT
=====================================================*/

.feature h4{

    font-size:18px;

    color:#222;

    font-weight:700;

    margin:0;

}

.feature p{

    margin-top:4px;

    margin-bottom:0;

    font-size:14px;

    line-height:1.5;

    color:#666;

}

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

.buttons{

    display:flex;

    gap:20px;

    flex-wrap:wrap;

    margin-bottom:35px;

}

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

.btn{

    position:relative;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    text-decoration:none;

    padding:18px 38px;

    border-radius:60px;

    font-size:16px;

    font-weight:700;

    overflow:hidden;

    transition:

        transform .35s ease,

        box-shadow .35s ease,

        background .35s ease,

        color .35s ease;

}

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

.primary{

    color:#fff;

    background:

        linear-gradient(

            135deg,

            #ff8c00,

            #ff5a00

        );

    box-shadow:

        0 20px 40px rgba(255,120,0,.35);

}

.primary:hover{

    transform:

        translateY(-6px)

        scale(1.03);

    box-shadow:

        0 30px 60px rgba(255,120,0,.45);

}

/*=====================================================
                SECONDARY
=====================================================*/

.secondary{

    color:#ff7200;

    border:2px solid #ff7200;

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

    backdrop-filter:blur(10px);

}

.secondary:hover{

    background:#ff7200;

    color:#fff;

    transform:

        translateY(-6px);

}

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

.btn::before{

    content:"";

    position:absolute;

    left:-130%;

    top:0;

    width:90px;

    height:100%;

    background:

        rgba(255,255,255,.35);

    transform:

        skewX(-25deg);

    transition:.8s;

}

.btn:hover::before{

    left:130%;

}

/*=====================================================
                LOCATION
=====================================================*/

.location{

    display:flex;

    align-items:center;

    gap:10px;

    font-size:16px;

    font-weight:600;

    color:#444;

    margin-top:10px;

}

/*=====================================================
                ORANGE LINE
=====================================================*/

.hero-left::after{

    content:"";

    display:block;

    width:120px;

    height:5px;

    border-radius:50px;

    margin-top:35px;

    background:

        linear-gradient(

            90deg,

            #ff7b00,

            transparent

        );

}
/*=====================================================
                PREMIUM PARTICLES
=====================================================*/

.hero::before{

    content:"";

    position:absolute;

    inset:0;

    pointer-events:none;

    opacity:.45;

    background-image:

        radial-gradient(circle at 12% 18%,rgba(255,255,255,.7) 2px,transparent 2px),

        radial-gradient(circle at 82% 30%,rgba(255,255,255,.5) 2px,transparent 2px),

        radial-gradient(circle at 65% 72%,rgba(255,255,255,.45) 3px,transparent 3px),

        radial-gradient(circle at 25% 82%,rgba(255,255,255,.55) 2px,transparent 2px);

    animation:particles 20s linear infinite;

    z-index:2;

}

@keyframes particles{

    from{

        transform:translateY(0);

    }

    to{

        transform:translateY(-120px);

    }

}

/*=====================================================
                HEADING POLISH
=====================================================*/

.hero h1{

    text-shadow:

        0 4px 12px rgba(0,0,0,.08);

}

.hero p{

    text-shadow:

        0 1px 1px rgba(255,255,255,.2);

}

/*=====================================================
                SCROLL INDICATOR
=====================================================*/

.scroll{

    position:absolute;

    bottom:35px;

    left:50%;

    transform:translateX(-50%);

    width:34px;

    height:58px;

    border-radius:30px;

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

    z-index:20;

}

.scroll span{

    position:absolute;

    left:50%;

    transform:translateX(-50%);

    width:7px;

    height:7px;

    border-radius:50%;

    background:#fff;

    animation:scrollDown 1.8s infinite;

}

@keyframes scrollDown{

    0%{

        top:8px;

        opacity:0;

    }

    50%{

        opacity:1;

    }

    100%{

        top:30px;

        opacity:0;

    }

}

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

.sub-title{

    animation:pulse 4s infinite;

}

@keyframes pulse{

    0%{

        transform:scale(1);

    }

    50%{

        transform:scale(1.04);

    }

    100%{

        transform:scale(1);

    }

}

/*=====================================================
                RESPONSIVE
=====================================================*/

@media(max-width:1200px){

.hero h1{

font-size:62px;

}

.container{

gap:40px;

}

.car{

max-width:620px;

}

}

@media(max-width:992px){

.container{

grid-template-columns:1fr;

text-align:center;

padding:80px 0;

}

.hero-left{

margin:auto;

}

.hero-right{

margin-top:50px;

}

.buttons{

justify-content:center;

}

.features{

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

}

.location{

justify-content:center;

}

.hero h1{

font-size:54px;

}

}

@media(max-width:768px){

.hero{

min-height:auto;

}

.hero h1{

font-size:42px;

}

.hero p{

font-size:17px;

}

.features{

grid-template-columns:1fr;

}

.buttons{

flex-direction:column;

}

.btn{

width:100%;

}

.car{

max-width:100%;

}

.scroll{

display:none;

}

}

@media(max-width:480px){

.container{

width:92%;

}

.hero h1{

font-size:34px;

line-height:1.15;

}

.hero p{

font-size:16px;

}

.sub-title{

font-size:11px;

letter-spacing:2px;

}

.icon{

width:54px;

height:54px;

font-size:22px;

}

.feature{

padding:16px;

}

}