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

.hero{
    padding:90px 0;
}

.hero-wrapper{
    display:grid;
    grid-template-columns:1.1fr 1fr;
    align-items:center;
    gap:70px;
}

.hero-tag{
    display:inline-block;
    padding:8px 18px;
    background:#f2f2f2;
    border-radius:30px;
    font-size:14px;
    margin-bottom:25px;
}

.hero h1{
    font-size:68px;
    line-height:1.05;
    font-weight:800;
    margin-bottom:30px;
}

.hero p{
    font-size:20px;
    color:#666;
    line-height:1.8;
    max-width:620px;
    margin-bottom:40px;
}

.hero-buttons{
    display:flex;
    gap:20px;
    flex-wrap:wrap;
}

.btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:18px 36px;
    border-radius:8px;
    font-weight:700;
    text-decoration:none;
    transition:.3s;
}

.btn-dark{
    background:#111;
    color:#fff;
}

.btn-dark:hover{
    background:#d32f2f;
}

.btn-light{
    border:2px solid #111;
    color:#111;
}

.btn-light:hover{
    background:#111;
    color:#fff;
}

.hero-image{
    display:flex;
    justify-content:center;
}

.hero-image img{
    width:100%;
    max-width:560px;
    border-radius:20px;
    display:block;
}

/*====================================
  1400px
====================================*/

@media (max-width:1400px){

.hero h1{
    font-size:58px;
}

.hero-wrapper{
    gap:50px;
}

}

/*====================================
  1200px
====================================*/

@media (max-width:1200px){

.hero{
    padding:70px 0;
}

.hero-wrapper{
    gap:40px;
}

.hero h1{
    font-size:50px;
}

.hero p{
    font-size:18px;
}

.hero-image img{
    max-width:500px;
}

}

/*====================================
  992px
====================================*/

@media (max-width:992px){

.hero{
    padding:60px 0;
}

.hero-wrapper{

    grid-template-columns:1fr;

    text-align:center;

    gap:45px;

}

.hero-content{

    order:2;

}

.hero-image{

    order:1;

}

.hero-tag{

    margin:0 auto 20px;

}

.hero h1{

    font-size:46px;

}

.hero p{

    max-width:700px;

    margin:0 auto 35px;

}

.hero-buttons{

    justify-content:center;

}

.hero-image img{

    max-width:420px;

}

}

/*====================================
  768px
====================================*/

@media (max-width:768px){

.hero{

    padding:50px 0;

}

.hero h1{

    font-size:38px;

}

.hero p{

    font-size:17px;

    line-height:1.7;

}

.hero-buttons{

    gap:15px;

}

.btn{

    padding:15px 28px;

    font-size:15px;

}

.hero-image img{

    max-width:360px;

}

}

/*====================================
  576px
====================================*/

@media (max-width:576px){

.hero{

    padding:40px 0;

}

.hero-tag{

    font-size:12px;

    padding:6px 14px;

}

.hero h1{

    font-size:32px;

    line-height:1.15;

}

.hero p{

    font-size:16px;

    margin-bottom:25px;

}

.hero-buttons{

    flex-direction:column;

    width:100%;

}

.btn{

    width:100%;

    padding:15px;

}

.hero-image img{

    max-width:280px;

}

}

/*====================================
  400px
====================================*/

@media (max-width:400px){

.hero h1{

    font-size:28px;

}

.hero p{

    font-size:15px;

}

.hero-image img{

    max-width:240px;

}

}