*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
:root{
    --primary-color:#000000;
    --secondary-color:#F2F0F1;
    --text-color:#ffff;
    --padding: 0 6vw;
}
.top{
    background-color: var(--primary-color);
    color: var(--text-color);
    padding-block: 0.4rem;
    position: relative;
    text-align: center;
}
.top a{
    color: var(--text-color);
}
.top i{
    position: absolute;
    right: 6%;
}



/* -------------------------------------------------header start---------------------------------- */


header{
    padding: var(--padding);
    display: flex;
    padding-block: 1rem;
}
.header-left{
    display: flex;
    width: 50%;
    display: flex;
    align-items: center;
    gap: 2.2rem;
}
.header-logo{
    font-size: 2rem;
    font-weight: 900;
    font-family: sans-serif;
}
.header-left a{
    text-decoration: none;
    color: var(--primary-color);
}


.header-right{
    width:50%;
    display: flex;
    align-items: center;
    gap: 4rem;
}
 .header-right .search-bar input{
    width: 32vw;
    padding: 0.7rem 3rem;
    border-radius: 1.2rem;
    border: none;
    background-color: #F0F0F0;
 }
 .header-right .profile{
    display: flex;
    gap: 1rem;
 }
 .search-bar{
    position: relative;
 }
 .search-bar #search-btn{
    position: absolute;
    top: 30%;
   left: 5%;
 }


 /* ------------------------------------------main start------------------------------------ */
 main{
    background-color: var(--secondary-color);
    padding: var(--padding);
 }
 .main-left{
    width: 43%;

 }
 .main-left #first-para{
    font-size: 4rem;
    font-weight: 700;
    padding-top: 5rem;
 }
 .main-left #second-para{
    margin-block: 1.5rem;
    color: #615b5b;
 }
 .main-left button{
    color: var(--text-color);
    background-color: var(--primary-color);
    padding: 1.2rem 4rem;
    border: none;
    border-radius: 2rem;
 }