@font-face {
  font-family: 'WorkSans';
  src: url('../fonts/WorkSans-Regular.ttf') format('truetype');
  font-style: normal;
}

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family: 'WorkSans';
}

.offer-strip {
    width: 100%;
    background: #a7f5a6;
    padding: 0.5rem 0;
    text-align: center;
    font-size: 1.2rem;
    font-weight: bold;
    color: #000; /* black text */
}

/* LOGO SECTION */
.logo-bar{
    width:100%;
    padding:1vh 0;
    display:flex;
    justify-content:center;
    align-items:center;
}
.logo-bar img{
    width: 23vw;
    max-width: 250px;
}

/* MAIN SECTION */
.main-section{
    height: 90vh;
    display:flex;
    flex-direction:row;
    justify-content:space-between;
    align-items:center;
    padding: 0vh 0vw;
    gap:0vw;
}

/* TEXT SECTION */
.text-box{
    width:50%;
    background: #39693b;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.text-box h1{
    width: 85%;
    font-size:2.4rem;
    line-height:1.2;
    margin-bottom:1rem;
    color: #f4f1df;
    text-align: left;
}
.praw {
    color: #d8a929;
}
.prass {
    width: 85%;
}
.sejal {
    width: 85%;
}
.sakshi {
    width: 85%;
}
.text-box p{
    font-size:1.2rem;
    margin:0.5rem 0;
    color: #f4f1df;
}

/* BEST SELLERS BUTTON */
.best-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    background:#f4eddc;
    color:#1a1a1a;
   padding: 1rem 1.5rem;
    border-radius: 3rem;
    font-size: 1.7rem;
    font-weight:600;
    margin-top:2rem;
    cursor:pointer;
    text-decoration:none;
    gap:0.6rem;
    transition:0.3s ease;
}
.best-btn:hover{
    background:#efe4c9;
}

.best-btn span{
    font-size:1.3rem;
}

/* IMAGE SECTION */
.image-box{
    width:50%;
    height: 100%;
}
.image-box img{
    width:100%;
    height: 100%;
    border-radius:0rem;
}

/* --------------------
   MOBILE RESPONSIVE
--------------------- */
@media(max-width:768px){

    .logo-bar img {
        width: 70vw;
        max-width: 250px;
    }

    .main-section{
        flex-direction:column;
        text-align:center;
        height: 125vh;
    }

    .text-box{
        width: 100%;
        padding: 20px;
        height: 75vh;
    }

    .image-box {
        width: 100%;
        height: 50vh;
    }

    .text-box h1{
        font-size: 1.7rem;
        width: 100%;
    }

    .prass{
    width: 100%;
    text-align: left;
}

    .sejal {
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
    }

    .text-box p{
        font-size:1rem;
    }
}

/* NEW MEDIA QUERY: 375px to 768px */
@media (min-width:376px) and (max-width:768px) {

    .main-section{
        height: 104vh;
    }
    .text-box {
        width: 100%;
        padding: 20px;
        height: 54vh;
    }

}

/* Footer */
footer {
    background-color: #000;
    padding: 15px 10px;
    text-align: center;
}

footer a, footer a:hover {
    text-decoration: none;
    color: #ffffff;
    margin-bottom: 0px;
    font-size: 20px;
}