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

.hero{

    min-height:100vh;

    display:flex;

    align-items:center;

    padding-top:140px;

    background:#0B0B0B;

    position:relative;

    overflow:hidden;

}

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

.hero-grid{

    display:grid;

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

    align-items:center;

    gap:100px;

}

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

.hero-content{

    position:relative;

    z-index:2;

}

/*=========================================
            TAG
=========================================*/

.hero-tag{

    display:inline-flex;

    align-items:center;

    gap:14px;

    margin-bottom:35px;

    color:var(--red);

    font-size:.82rem;

    font-weight:700;

    letter-spacing:3px;

    text-transform:uppercase;

}

.hero-tag::before{

    content:"";

    width:70px;

    height:2px;

    background:var(--red);

}

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

.hero h1{

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

    font-size:clamp(5rem,12vw,10rem);

    line-height:.88;

    letter-spacing:2px;

    text-transform:uppercase;

    margin-bottom:30px;

}

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

.hero p{

    max-width:560px;

    font-size:1.15rem;

    line-height:1.9;

    color:#af7d2d;

    margin-bottom:50px;

}

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

.hero-buttons{

    display:flex;

    align-items:center;

    gap:20px;

}

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

.hero-image{

    display:flex;

    justify-content:flex-end;

    position:relative;

}

/*=========================================
        RED BACKGROUND BLOCK
=========================================*/

.hero-image::before{

    content:"";

    position:absolute;

    right:-60px;

    top:70px;

    width:340px;

    height:460px;

    background:var(--red);

    z-index:0;

}

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

.image-card{

    position:relative;

    width:520px;

    overflow:hidden;

    background:#00000000 ;

    z-index:2;

}

.image-card img{

    width:100%;

    height:680px;

    object-fit:cover;

    display:block;

    transition:.6s ease;

}

.image-card:hover img{

    transform:scale(1.04);

}

/*=========================================
        AVAILABLE BADGE
=========================================*/

.available{

    position:absolute;

    bottom:20px;

    left:-60px;

    width:140px;

    height:140px;

    border-radius:50%;

    background:#f5f2ed;

    border:2px solid #f5f2ed;

    display:flex;

    align-items:center;

    justify-content:center;

    text-align:center;

    font-size:.75rem;

    font-weight:700;

    line-height:1.5;

    z-index:5;

    animation:rotateBadge 12s linear infinite;

}

@keyframes rotateBadge{

    from{

        transform:rotate(0deg);

    }

    to{

        transform:rotate(360deg);

    }

}

/*=========================================
            VERTICAL LABEL
=========================================*/

.hero-side-text{

    position:absolute;

    right:-70px;

    top:50%;

    transform:rotate(90deg);

    font-size:.75rem;

    font-weight:700;

    letter-spacing:4px;

    color:#f5f2ed;

    text-transform:uppercase;

}

/*=========================================
            DECORATIVE LINE
=========================================*/

.hero::after{

    content:"";

    position:absolute;

    left:80px;

    bottom:80px;

    width:120px;

    height:4px;

    background:var(--red);

}

/*=========================================
            BACKGROUND SHAPE
=========================================*/

.hero::before{

    content:"";

    position:absolute;

    right:-220px;

    top:-220px;

    width:600px;

    height:600px;

    border-radius:50%;

    background:#d91717;

}

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

.primary-btn,
.secondary-btn{

    transition:.35s;

}

.primary-btn:hover{

    transform:translateY(-5px);

}

.secondary-btn:hover{

    transform:translateY(-5px);

}

/*=========================================
            TABLET
=========================================*/

@media(max-width:1100px){

    .hero-grid{

        grid-template-columns:1fr;

        gap:80px;

    }

    .hero-image{

        justify-content:center;

    }

    .hero-image::before{

        right:auto;

    }

    .hero h1{

        font-size:6rem;

    }

}

/*=========================================
            MOBILE
=========================================*/

@media(max-width:768px){

    .hero{

        padding-top:120px;

        min-height:auto;

    }

    .hero-grid{

        gap:60px;

    }

    .hero h1{

        font-size:4rem;

    }

    .hero p{

        font-size:1rem;

    }

    .hero-buttons{

        flex-direction:column;

        align-items:flex-start;

    }

    .image-card{

        width:100%;

    }

    .image-card img{

        height:520px;

    }

    .hero-image::before{

        width:220px;

        height:320px;

        top:50px;

        right:-20px;

    }

    .available{

        display:none;

    }

    .hero-side-text{

        display:none;

    }

}

/*=========================================
            SMALL MOBILE
=========================================*/

@media(max-width:480px){

    .hero h1{

        font-size:3.2rem;

    }

    .hero-tag{

        font-size:.7rem;

        letter-spacing:2px;

    }

    .hero::after{

        left:30px;

        width:80px;

    }

}