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


html {
  overflow-y: scroll;
}



.hero{

    min-height:700px;

    display:flex;

    align-items:center;

    background:var(--white);

    padding:32px 0;

}

.hero .container{

    width:min(1240px,92%);

    margin:0 auto;

    padding-top:85px;

}

body {
  font-family: 'Inter', 'Open Sans', sans-serif;
  font-optical-sizing: auto;
}

/*=========================================================
LAYOUT
=========================================================*/

.hero-content{

    display:grid;

    grid-template-columns:52% 48%;

    align-items:center;

    gap:90px;

}


/*=========================================================
LEFT COLUMN
=========================================================*/

.hero-text{

    max-width:600px;

}


/* Hero badge inherits .section-badge */

.hero-tag{

    margin-bottom:35px;

}


/* Global hero typography */

.hero-title{

    margin-bottom:28px;

}

.hero-subtitle{

    margin-bottom:45px;
}


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

.hero-buttons{

    display:flex;

    align-items:center;

    gap:18px;

    flex-wrap:wrap;

    margin-bottom:28px;

}

.hero-buttons .btn{

    min-width:220px;

}

.btn-secondary{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:12px;

    padding:16px 32px;

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

    border-radius:var(--radius-sm);

    background:var(--white);

    color:var(--dark);

    transition:var(--transition);

}

.btn-secondary:hover{

    border-color:var(--secondary);

}


/*=========================================================
FREE BONUS
=========================================================*/

.hero-bonus{

    display:flex;

    align-items:center;

    gap:12px;

}

.hero-bonus i{

    color:var(--secondary);

    font-size:20px;

}

.hero-bonus strong{

    color:var(--dark);

}


/*=========================================================
RIGHT COLUMN
=========================================================*/

.hero-image{

    display:flex;

    justify-content:flex-end;

    align-items:center;

}

.hero-image img{

    width:auto;

    object-fit:contain;

    filter:drop-shadow(var(--shadow-lg));

    max-height:700px;

    height:min(72vh,700px);

}


/*=========================================================
LAPTOP
=========================================================*/

@media (max-width:1200px){

.hero-content{

    gap:60px;

}

.hero-image img{

    height:64vh;

}

}


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

@media (max-width:991px){

.hero{

    min-height:calc(100svh - 74px);

    padding:40px 0;

}

.hero-content{

    grid-template-columns:1fr;

    gap:60px;

}

.hero-text{

    max-width:100%;

    text-align:center;

}

.hero-buttons{

    justify-content:center;

}

.hero-bonus{

    justify-content:center;

}

.hero-image{

    justify-content:center;

}

.hero-image img{

    width:75%;

    max-width:500px;

    height:auto;

}

}


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

@media (max-width:768px){

.hero{

    min-height:calc(100svh - 68px);

    padding:30px 0 60px;

}

.hero-buttons{

    flex-direction:column;

    width:100%;

}

.hero-buttons .btn{

    width:100%;

    max-width:360px;

}

.hero-image img{

    width:90%;

    max-width:360px;

}

}