@media only screen and (max-width: 1300px) {

    /* HOME */

    .home {
        justify-content: center;
        align-items: center;
        padding: 0 10.4vw;
        font-family: 'Poppins', sans-serif;
        flex-direction: column;
    }

    .home-text-container h1{
        font-size: 75px;
        font-style: normal;
        font-weight: 500;
        width: auto;
        text-align: center;
        justify-content: center;
        align-items: center;
    
        color: #41352A;
    }
    
    .home-text-container h1 span:nth-of-type(1) {
        font-weight: 500;
        color: #FFB649;
    }
    
    .home-text-container h1 span:nth-of-type(2) {
        font-style: normal;
        font-weight: 300;
        color: #41352A;
    }
    
    .home-text-container h1 span:nth-of-type(3) {
        color: #FFB649;
    }
    
    .home-text-container p {
        text-align: center;
        font-size: 22px;
        color: #A09E9A;
        justify-content: center;
        align-items: center;
    }

    .buttons {
        display: none;
    }
   
    .right-side img:nth-of-type(1) {
        display: flex;
        width: 350px;
        height: 300px;
        margin-top: 0;
        margin-right: 0;
        justify-content: center;
        align-items: center;
    }

    .nav {
        width: 100%;
        height: 100px;
    }
    .menu {
        display: none;
    }
    .ham {
        display: flex;
        width: 46px;
        height: 20px;
    }
    .logo-container img {
        width: 54px;
        height: 54px;
    }
    .logo-container a {
        font-size: 27px;
    }
    .logo-container a span{
        font-size: 27px;
    }

    /* OFFER */
    
    .offer {
        height: 100%;
    }

    .offer-text-container h1{
        font-size: 75px;
        font-style: normal;
        font-weight: 500;
        width: auto;
        text-align: center;
        justify-content: center;
        align-items: center;
    }

    .offer-text-container p{
        text-align: center;
        font-size: 22px;
        color: #A09E9A;
        justify-content: center;
        align-items: center;
        width: 500px;
    }

    .cards {
        display: grid;
        
        justify-content: center;
        align-items: center;

        justify-items: center;
        align-content: center;

        gap: 30px;
        grid-template-columns: 40vw 40vw;
        grid-template-rows: 1fr 1fr;

    }

    /* ABOUT US */

    .about {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 0 10.4vw;

        scroll-margin-top: 75px;
    }

    .left-side img {
        width: 450px;
        height: 262px;
    }

    .about-text-container {
        padding: 20px 0;
    }

    .about-text-container h1{
        font-size: 75px;
        font-style: normal;
        font-weight: 500;
        width: auto;
        text-align: center;
        justify-content: center;
        align-items: center;
    }

    .about-text-container p{
        text-align: center;
        font-size: 22px;
        color: #A09E9A;
        justify-content: center;
        align-items: center;
        width: 400px;
    }

    /* CONTACT */

    .contact {
        width: 100%;
        height: 100%;
    }

    .contact-text-container h1{
        font-size: 75px;
        font-style: normal;
        font-weight: 500;
        width: auto;
        text-align: center;
        justify-content: center;
        align-items: center;
    }

    .contact-main {
        display: flex;
        justify-content: center;
        align-items: center; 
        flex-direction: column;

        padding: 50px 0;
    }

    .contact-forms {
        display: flex;
        justify-content: center;
        align-items: center; 
        flex-direction: column;
    }
    
    .contact img {
        display: flex;
        width: 563px;
        height: 494px;
    }

    .name {
        height: 7vh;
    }
    
    .subject {
        height: 7vh;
    }
    
    .email {
        height: 7vh;
    }

    .contact-forms input {
        width: 40vw;
    }
    
    .forms textarea {
        height: 21vh;
        width: 40vw;
    }

    .contact-forms button {
        width: 25vw;
        height: 6vh;
        border-radius: 10px;
        background: #FFB649;
        font-style: normal;
        font-weight: 500;
        font-size: 25px;
        line-height: 128.5%;
        color: #FFFFFF;
        border: none;
        margin-top: 20px;
    
        transition: 0.3s;
    }


    /* FOOTER */

    .footer {
        width: 100%;
        height: 10vh;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }

}

@media only screen and (max-width: 480px) {

    /* NAV */

    .logo-container img {
        width: 38px;
        height: 38px;
    }
    
    .logo-container a {
        font-size: 20px;
    }

    .logo-container a span{
        font-size: 20px;
    }

    .ham {
        display: flex;
        width: 26px;
        height: 13px;
    }

    .home {
        justify-content: center;
        align-items: center;
        font-family: 'Poppins', sans-serif;
        flex-direction: column;
    }

    .home-text-container h1{
        font-size: 42px;
        font-style: normal;
        font-weight: 500;
        text-align: center;
        justify-content: center;
        align-items: center;
    
        color: #41352A;
    }
    
    .home-text-container h1 span:nth-of-type(1) {
        font-weight: 500;
        color: #FFB649;
    }
    
    .home-text-container h1 span:nth-of-type(2) {
        font-style: normal;
        font-weight: 300;
        color: #41352A;
    }
    
    .home-text-container h1 span:nth-of-type(3) {
        color: #FFB649;
    }
    
    .home-text-container p {
        text-align: center;
        font-size: 15px;
        color: #A09E9A;
        justify-content: center;
        align-items: center;
        width: auto;
    }

    .buttons {
        display: none;
    }

    .right-side img:nth-of-type(1) {
        display: flex;
        width: 230px;
        height: 170px;
        margin-top: 0;
        margin-right: 0;
        justify-content: center;
        align-items: center;
    }
    
    /* OFFER */

    .offer {
        height: 100%;
    }

    .offer-text-container h1{
        font-size: 42px;
        font-style: normal;
        font-weight: 500;
        width: auto;
        text-align: center;
        justify-content: center;
        align-items: center;
        margin-top: 0;
    }

    .offer-text-container p{
        text-align: center;
        font-size: 16px;
        color: #A09E9A;
        justify-content: center;
        align-items: center;
        width: 350px;
    }

    .cards {

        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;

        gap: 30px;

    }
    
    .tea {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-direction: column;
        width: 196px;
        height: 343px;
        border-radius: 30px;
        box-shadow: 0px 10px 18px 10px rgba(0,0,0,0.1);
        background: #FFFBF5;
        padding: 30px 0;
        filter: none;
    
        transition: 0.3s;
    }
    
    .tea h3 {
        font-style: normal;
        font-weight: 500;
        font-size: 18px;
        color: #41352A;
    }

    .tea p {
        font-size: 12px;
        color: #A09E9A;
        text-align: center;
    }

    .tea svg {
        width: 130px;
        height: 130px;
    }

    .coffee {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-direction: column;
        width: 196px;
        height: 343px;
        border-radius: 30px;
        box-shadow: 0px 10px 18px 10px rgba(0,0,0,0.1);
        background: #FFFBF5;
        padding: 30px 0;
        filter: none;
    
        transition: 0.3s;
    }
    
    .coffee h3 {
        font-style: normal;
        font-weight: 500;
        font-size: 18px;
        color: #41352A;
    }

    .coffee p {
        font-size: 12px;
        color: #A09E9A;
        text-align: center;
    }

    .coffee svg {
        width: 130px;
        height: 130px;
    }

    .cakes {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-direction: column;
        width: 196px;
        height: 343px;
        border-radius: 30px;
        box-shadow: 0px 10px 18px 10px rgba(0,0,0,0.1);
        background: #FFFBF5;
        padding: 30px 0;
        filter: none;
    
        transition: 0.3s;
    }
    
    .cakes h3 {
        font-style: normal;
        font-weight: 500;
        font-size: 18px;
        color: #41352A;
    }

    .cakes p {
        font-size: 12px;
        color: #A09E9A;
        text-align: center;
    }

    .cakes svg {
        width: 130px;
        height: 130px;
    }

    .cookies {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-direction: column;
        width: 196px;
        height: 343px;
        border-radius: 30px;
        box-shadow: 0px 10px 18px 10px rgba(0,0,0,0.1);
        background: #FFFBF5;
        padding: 30px 0;
        filter: none;
    
        transition: 0.3s;
    }
    
    .cookies h3 {
        font-style: normal;
        font-weight: 500;
        font-size: 18px;
        color: #41352A;
    }

    .cookies p {
        font-size: 12px;
        color: #A09E9A;
        text-align: center;
    }

    .cookies svg {
        width: 130px;
        height: 130px;
    }

    /* ABOUT */

    .about {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin-top: 70px;
        scroll-margin-top: 100px;
    }

    .left-side img {
        width: 350px;
        height: 200px;
    }

    .about-text-container h1{
        font-size: 42px;
        font-style: normal;
        font-weight: 500;
        width: auto;
        text-align: center;
        justify-content: center;
        align-items: center;
    }

    .about-text-container p{
        text-align: center;
        font-size: 16px;
        color: #A09E9A;
        justify-content: center;
        align-items: center;
        width: 400px;
        width: 300px;
    }

    .about-text-container button {
        display: none;
    }

    /* CONTACT */

    .contact {
        width: 100%;
        height: 100%;
    }

    .contact-text-container h1{
        font-size: 42px;
        font-style: normal;
        font-weight: 500;
        width: auto;
        text-align: center;
        justify-content: center;
        align-items: center;
    }

    .contact-main {
        display: flex;
        justify-content: center;
        align-items: center; 
        flex-direction: column;

        padding: 50px 0;
    }

    .contact-forms {
        display: flex;
        justify-content: center;
        align-items: center; 
        flex-direction: column;
    }
    
    .contact img {
        display: flex;
        width: 363px;
        height: 294px;
    }

    .name {
        height: 5vh;
    }
    
    .subject {
        height: 5vh;
    }
    
    .email {
        height: 5vh;
    }

    .contact-forms input {
        width: 57vw;
        font-size: 13px;
    }
    
    .forms textarea {
        height: 14vh;
        width: 57vw;
        font-size: 13px;
    }

    ::placeholder {
        font-size: 14px;
    }

    .contact-forms button {
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        font-size: 20px;
    }

    .forms h4 {
        font-size: 20px;
    }

    /* FOOTER */

    .footer {
        width: 100%;
        height: 10vh;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }

    .footer-text-container{
        font-size: 16px;
    }

    .footer-text-container a{
        font-size: 16px;
    }
    
    /* SIDEBAR */

    .sidebar {
        background: rgba(255, 255, 255, 0.925);
    
        width: 50vw;
        height: 100%;
    
        position: fixed;
        right: -100%;
    
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 100;
    
        transition: 0.6s;
    }
    
    .close {
    
        width: 20px;
        height: 20px;
    
        position: absolute;
        top: 45px;
        margin-right: 58px;
    
        transition: 0.4s;
    
    }
    
    .sidebar ul {
        display: flex;
        justify-content: space-between;
        height: 40%;
        width: auto;
        text-align: center;
        flex-direction: column;
        list-style-type: none;
        margin-right: 30px;
    
    }

    .sidebar a {
        font-family: 'Poppins', sans-serif;
        color: black;
        text-decoration: none;
        font-size: 22px;
        font-weight: 300;
    
        transition: 0.4s;
    }
    
    .line {
        position: absolute;
        width: 4px;
        height: 100%;
        background: #FFB649;
        right: 29px;
    }
    
    .offer-sidebar {
        background: #FFB649;
        border-radius: 30px;
        justify-content: space-between;
        align-items: center;
        width: 100px;
        height: 30px;
        display: flex;
        padding: 0 20px;
    
        transition: 0.3s;
    }
    
    .offer-sidebar img{
        width: 15px;
        height: 15px;
        background: #FFB649;
    }
    
    .offer-sidebar a{
        color: white;
        font-size: 15px;
        background: #FFB649; 
    }
    
    .explore-sidebar {
        border: 3px solid #FFB649;
        border-radius: 30px;
        justify-content: space-between;
        align-items: center;
        width: 100px;
        height: 30px;
        display: flex;
        padding: 0 12px;
    
        transition: 0.3s;
    }
    
    .explore-sidebar img{
        width: 6px;
        height: 11px;
    }
    
    .explore-sidebar a{
        color: black;
        font-size: 15px;
    }
}

@media only screen and (max-width: 375px) {


    .left-side img {
        width: 300px;
        height: 200px;
    }

    .sidebar {
        background: rgba(255, 255, 255, 0.925);
    
        width: 70vw;
        height: 100%;
    
        position: fixed;
        right: -100%;
    
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 100;
    
        transition: 0.6s;
    }

}

@media only screen and (max-height: 680px) {

    .home-text-container h1 {
        font-size: 38px;
        margin-top: 70px;
    }

}