html {
    height: 100vh;
    width: 100%;
}

/* This is for the header section. */
header {
    position: sticky;
    top: 0;
    z-index: 10000;
    display: flex;
    justify-content: space-between;
    background-color: rgb(249, 123, 111);
    padding-left: 30px;
    padding-right: 30px;
    padding-top: 10px;
    padding-bottom: 8px;
    align-items: center;
    margin: auto;
}

.logo {
    padding-top: 7px;
}

.navright {
    display: flex;
    align-items: center;
    gap: 30px;
    padding-top: 1px;
}

.label {
    display: flex;
    align-items: center;
    gap: 3px;
}

.labelimg {
    padding-bottom: 3px;
}

.submenu {
    display: none;
    position: absolute;
    min-width: 130px;
    z-index: 1;
}

.submenu a {
    display: block;
    text-align: left;
}

.drop:hover .submenu {
    display: block;
}

.hover {
    background-color: #fae3e1;
    padding: 15px;
}

.hover:hover {
    background-color: #ffaca4;
}


/* This is for header phone-view version.*/
.menu-toggle {
    display: none;
    font-size: 30px;
    color: #6d1f34;
    cursor: pointer;
}

.close-btn {
    position: fixed;
    top: 6px;
    right: 28px;
    display: none;
    font-size: 50px;
    color: #6d1f34;
    cursor: pointer;
}

.phoneclr {
    color: #6d1f34;
}


/* This is for general CSS-styles. */
@font-face {
    font-family: tangerine;
    src: url(tangerine.ttf)
}

h1 {
    text-align: center;
    font-family: "tangerine";
    margin-bottom: 1%;
    color: #6d1f34;
    font-size: 300%;
}

h2 {
    font-family: "tangerine";
    margin-bottom: 1%;
    font-size: 150%;
    color: #6d1f34;
}

h3 {
    font-family: "tangerine";
    margin-bottom: 5%;
    font-size: 100%;
    color: #6d1f34;
}

h4 {
    font-family: "tangerine";
    text-align: center;
    margin-bottom: 1%;
    color: #6d1f34;
    font-size: large;
    font-size: 100%;
}

p {
    font-family: "Comfortaa", sans-serif;
    margin: 5px;
    margin-left: 0%;
    margin-bottom: 3%;
    font-size: 90%;
    color: #6d1f34;
}


body {
    font-family: "tangerine";
    background-color: #ffefd4;
    margin: auto;
    max-width: 1280px;
}


a {
    color: #6d1f34;
    text-decoration: none;
}

button.general {
    font-family: "tangerine";
    font-size: medium;
    color: #754b0b;
    background-color: #ffe186;
    box-shadow: 3px 4px #754b0b;
    border: #ffe186 1px solid;
    border-radius: 20px;
    padding-left: 28px;
    padding-right: 28px;
    padding-top: 8px;
    padding-bottom: 5px;
    cursor: pointer;
}

button.general:hover {
    color: #ffe186;
    background-color: #754b0b;
    border: #754b0b 1px solid;
    box-shadow: 3px 4px #ffe186;
}

.bigbody {
    margin-left: 4%;
    margin-right: 4%;
}


/* This is for the title-directions.*/
.direction {
    z-index: 1;
    display: flex;
    padding: 32px;
}

.arrow {
    padding-left: 10px;
    padding-right: 10px;
}

.sec:hover a {
    text-decoration: underline 1.5px solid;
    text-underline-offset: 3px;
}

.mainsec a {
    text-decoration: underline 1.5px solid;
    text-underline-offset: 3px;
}

/* This is the Check-Out-More section. */
.checkouttop {
    margin-bottom: -20px;
}

.checkoutmore {
    color: #ffefd4;
    background-color: #6D1F34;
    width: 100%;
    text-align: center;
    padding-top: 20px;
    padding-bottom: 50px;
}

.checkheadtxt {
    position: relative;
    margin-bottom: 130px;
}

.sections {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-right: 15%;
    padding-left: 15%;
    padding-bottom: 150px;
}

.cat {
    text-align: center;
    color: #ffefd4;
}

.checkheadtxt h1 {
    color: #ffefd4;
}

.checkoutmore h2 {
    color: #ffefd4;
}

.checkoutmore p {
    color: #ffefd4;
}


/* This is for the footer section. */
footer {
    align-items: center;
}

.roundborderfooter {
    position: relative;
    background: url(../img/roundshape.png);
    background-size: contain;
    height: 60px;
}

.container {
    display: flex;
    padding: 20px;
    padding-left: 5%;
    padding-right: 5%;
    padding-bottom: 3%;
    background-color: #f97b6f;
    justify-content: space-between;
    align-items: center;
}

.content {
    max-width: 600px;
    color: #6d1f34;
}

.emailform {
    display: flex;
}

.emailbox {
    color: #6D1F34;
    background-color: #ffefd4;
    padding: 8px;
    padding-left: 20px;
    border: 1px solid #ffefd4;
    border-radius: 25px;
    display: flex;
    flex: 2;
    font-family: "Comfortaa", sans-serif;
    font-size: small;
    align-items: center;
    justify-content: space-between;
}

.subscribe {
    font-family: "tangerine";
    font-size: medium;
    color: #ffe186;
    background-color: #6d1f34;
    border-radius: 30px;
    padding: 10px;
    padding-left: 35px;
    padding-right: 35px;
    align-items: center;
}

.sub1 {
    display: flex;
}

.sub2 {
    display: none;
}

.subscribe:hover {
    color: #6d1f34;
    background-color: #ffe186;
}

.newsletter {
    display: flex;
    gap: 30px;
}

.promote {
    text-align: center;
    z-index: 100;
}

.socmed {
    padding-top: 8px;
}


/* This is the Back-To-Top Button */
.backtotop {
    position: fixed;
    bottom: 80px;
    right: 40px;
    z-index: 10000;
}

/* This is read next slider */
.slick-prev:before,
.slick-next:before {
    color: #6d1f34 !important;
    font-size: 40px !important;
    opacity: 100% !important;
}

button.slick-prev.slick-arrow {
    z-index: 100;
    left: -20px;
}

button.slick-next.slick-arrow {
    right: -7px;
}

.slick-current {
    scale: 1.1;
}


/* This is the media-responsive section.*/
@media screen and (min-width:320px) and (max-width: 1023px) {

    /*Mobile Header*/
    .navright {
        flex-direction: column;
        display: none;
        position: fixed;
        top: 0;
        right: 0;
        width: 60%;
        height: 70%;
        background-color: #F97B6F;
        justify-content: center;
        align-items: center;
        z-index: 1000;
        gap: 3%;
        padding-top: 8%;
    }

    .label {
        display: flex;
        align-items: center;
        margin-top: 10px;
        margin-bottom: 10px;
    }

    .labelimg {
        display: none;
    }

    .phoneclr {
        font-size: 120%;
        color: #ffffff;
    }

    .drop {
        display: flex;
        align-items: center;
        flex-direction: column;
    }

    .drop>a {
        display: block;
    }

    .menu-toggle {
        display: block;
    }

    #menu-checkbox:checked+.menu-toggle+.navright {
        display: flex;
    }

    #menu-checkbox:checked+.menu-toggle+.navright .close-btn {
        display: block;
    }

    .submenu {
        display: flex;
        flex-direction: column;
        align-items: center;
        position: static;
    }

    .drop:hover .submenu {
        display: flex;
    }

    .hover {
        background-color: rgba(250, 227, 225, 0);
    }

    .hover:hover {
        background-color: rgba(250, 227, 225, 0);
    }

    .direction {
        padding-left: 4%;
        padding-right: 4%;
    }

    /* For the bottom section of the page. */
    .checkheadtxt {
        margin-top: 50px;
        margin-bottom: 80px;
    }

    .checkout {
        font-size: 180%;
        margin-left: 10%;
        margin-right: 10%;
    }

    .sections {
        flex-direction: column;
    }

    .container {
        display: block;
    }

    .content {
        align-items: center;
    }

    .cat {
        margin-bottom: 28%;
    }

    .newslettercat {
        display: none
    }

    .newsletter {
        text-align: center;
        margin-bottom: 10%;
        flex-direction: column;
        align-items: center;
    }

    .container {
        flex-direction: column;
        align-items: center;
        padding-top: 5%;
        padding-left: 10%;
        padding-right: 10%;
    }

    .promote {
        margin-bottom: 10%;
    }

    .sub1 {
        display: none;
    }

    .sub2 {
        display: flex;
        justify-content: center;
        margin-top: 8px;
    }

}


/* This is for Ipad View! */
@media screen and (min-width:758px) and (max-width: 1023px) {
    .sub1 {
        display: flex;
    }

    .sub2 {
        display: none;
    }


}