@font-face {
    font-family: gilroy;
    src: url(./Fonts/Gilroy-Medium.otf);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    cursor: default;
}

*::selection {
    display: none;
}

html,
body {
    width: 100%;
    height: 100%;
}

nav {
    height: 15vh;
    width: 100vw;
    position: fixed;
    z-index: 10;
    display: flex;
    margin: 0 2vw;
    align-items: center;
    justify-content: space-between;
}

.nav-left {
    height: 100%;
    width: 32%;
    padding: 1vw 3vw;
    display: flex;
    align-items: center;
    justify-content: space-around;
}

.nav-left a,
.nav-left img {
    text-decoration: none;
    cursor: pointer;
}

.nav-left a:nth-last-child(1) {
    padding: 1vw;
    font-family: gilroy;
    text-transform: uppercase;
    font-size: 1.5vw;
    margin-left: 2vw;
    color: black;
}

.nav-right {
    height: 100%;
    width: 32%;
    padding: 1vw 3vw;
    display: flex;
    align-items: center;
    justify-content: space-around;
}

.nav-right a {
    text-decoration: none;
    cursor: pointer;
    font-size: 1.5vw;
    font-family: gilroy;
    text-transform: uppercase;
    color: black;
}

.nav-right i {
    font-size: 1.5vw;
    cursor: pointer;
}

.page1 {
    height: 100vh;
    width: 100%;
    background: linear-gradient(150deg, #aace8e, #aace8e, #479e04);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.page1cont {
    display: flex;
    align-items: center;
    justify-content: space-around;
}

.page1cont h1 {
    font-size: 18vw;
    font-family: gilroy;
}

.page1cont h1:nth-child(3) {
    margin-left: 8vw;
}

.page1 #star {
    height: 12%;
    width: 16%;
    position: absolute;
    left: 28%;
    top: 24%;
    z-index: 1;
}

.page1 #leaf {
    position: absolute;
    width: 17%;
    z-index: 3;
    top: 0%;
    left: 36%;
}

.page1 #can {
    width: 15%;
    position: absolute;
    z-index: 2;
}

.page1 #lime {
    position: absolute;
    top: 74%;
    right: 35%;
    z-index: 4;
}

.page1 #leaf2 {
    position: absolute;
    width: 10%;
    left: 4%;
    top: 19%;
    transform: rotate(15deg);
}

.page1 #leaf3 {
    width: 25%;
    position: absolute;
    right: 7%;
    bottom: 5%;
}

.page1 #ice1 {
    position: absolute;
    width: 12%;
    top: 2%;
    left: 50%;
}

.page1 #ice2 {
    position: absolute;
    width: 12%;
    top: 51%;
    left: 35%;
}

.page2 {
    height: 100vh;
    width: 100%;
    display: flex;
    padding: 2vw 2vw;
    background-color: #fdf5e2;
}

.page2-left {
    height: 100%;
    width: 47%;
}

.page2-right {
    height: 100%;
    width: 63%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
}

.page2-right h1 {
    font-size: 3.5vw;
    width: 80%;
    text-align: center;
    font-family: gilroy;
    text-transform: uppercase;
}

.right-container {
    height: 70%;
    width: 80%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.container-elem {
    height: 33%;
    width: 100%;
    display: flex;
    justify-content: space-around;
    padding: 0 1.5vw;
}

.container-elem .elem1,
.container-elem .elem2,
.middle-elem {
    height: 100%;
    width: 24%;
    background-color: #d3d3d3;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: .7vw;
    cursor: pointer;
}

.container-elem .elem1 h3,
.container-elem .elem2 h3,
.middle-elem h3 {
    text-align: center;
    font-family: gilroy;
    font-size: 1.5vw;
    font-weight: 600;
    cursor: pointer;
}

.container-elem:nth-child(2) {
    display: flex;
    align-items: center;
    justify-content: center;
}

.page3 {
    height: 100vh;
    width: 100%;
    background-color: #fdf5e2;
    display: flex;
    position: relative;
}

.page3-left,
.page3-right {
    height: 100%;
    width: 50%;
    padding: 3vw 3vw;
    display: flex;
    align-items: center;
    justify-content: center;

}

.card {
    height: 100%;
    width: 60%;
    border: 1px solid black;
    border-radius: 30px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: linear-gradient(to bottom right, #ffffff, #ffffff, #b8a2b8);
    overflow: hidden;
    position: relative;
}

.page3-right .card {
    background: linear-gradient(150deg, #aace8e, #aace8e, #479e04);
}

.card .cardcircle {
    height: 21%;
    width: 32%;
    background-color: #c771a7;
    border-radius: 50%;
    position: absolute;
    z-index: 5;
    cursor: pointer;
    display: none;
    transform: scale(0);
    display: flex;
    align-items: center;
    justify-content: center;
}

.cardcircle-text {
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.cardcircle h3 {
    width: 90%;
    text-align: center;
    font-family: gilroy;
    cursor: pointer;
}

.page3-right .card .cardcircle {
    background-color: #448c0d;
}

.card .cardImage {
    width: 55%;
    cursor: pointer;
    transition: all ease .3s;
}

.card .cardImage2 {
    display: none;
}

.card .peach {
    opacity: 0;
    z-index: 2;
    transition: all ease .3s;
    cursor: pointer;
    position: absolute;
}

.card #peach1 {
    width: 20%;
    top: 8%;
    left: 15%;
}

.card #peach2 {
    width: 20%;
    top: 20%;
    right: 15%;
}

.card #peach3 {
    width: 20%;
    top: 50%;
    left: 5%;
}

.card #peach4 {
    width: 20%;
    top: 75%;
    right: 10%;
}

.card button {
    height: 8%;
    width: 40%;
    background-color: #d44188;
    position: absolute;
    bottom: 5%;
    z-index: 6;
    cursor: pointer;
    border: none;
    border-radius: 50px;
    text-transform: uppercase;
}

.card button a {
    text-transform: uppercase;
    text-decoration: none;
    color: black;
    cursor: pointer;
}

.page3-right .card button {
    background-color: #237308;
}

.page4 {
    height: 100vh;
    width: 100%;
    background-color: #fdf5e2;
    display: flex;
    position: relative;
}

.page4-left,
.page4-right {
    height: 100%;
    width: 50%;
    padding: 3vw 3vw;
    display: flex;
    align-items: center;
    justify-content: center;
}

.page4-left .card {
    background: linear-gradient(to bottom right, #e8cdb4, #ffffff, #E6C6A8);
}

.page4-left .card .cardcircle {
    background-color: #e29d5d;
}

.page4-left .card button {
    background-color: #d9ac83;
}

.page4-right .card {
    background: linear-gradient(to bottom right, #b4d7e1, #ffffff, #b4d7e1);
}

.page4-right .card .cardcircle {
    background-color: #6fc6df;
}

.page4-right .card button {
    background-color: #69a0af;
}

.page5 {
    height: 70vh;
    width: 100%;
    background-color: #fdf5e2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
}

.page5 h1 {
    font-size: 4vw;
    font-family: gilroy;
    text-transform: uppercase;
}

.page5 .links {
    height: 40%;
    width: 85%;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
}

.page5 .links .page5-links1,
.page5-links2 {
    height: 100%;
    width: 50%;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
}

.page5 .links .page5-links1 a,
.page5-links2 a {
    cursor: pointer;
    height: 100%;
    width: 100%;
}

.page5 .links .page5-links1 a img,
.page5-links2 a img {
    height: 100%;
    width: 100%;
    cursor: pointer;
    object-fit: contain;
    transition: all ease 0.2s;
}

.page5 .links a img:hover {
    transform: scale(0.9);
}

.page6 {
    height: 100vh;
    width: 100%;
    background-color: #fdf5e2;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
}

.page6-left {
    height: 85%;
    width: 40%;
    border-radius: 40px;
    overflow: hidden;
}

.page6-left img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

.page6-right {
    height: 85%;
    width: 45%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
}

.page6-right h1 {
    font-size: 4.5vw;
    text-transform: capitalize;
    font-family: gilroy;
    text-align: center;
    font-style: italic;
}

.page6-right button {
    padding: 1.5vw 3vw;
    border-radius: 30px;
    background-color: transparent;
    border: 1px solid black;
    cursor: pointer;
    font-size: 1.2vw;
    transition: all ease .2s;
}

.page6-right button:hover {
    background-color: rgb(34, 34, 34);
    color: #fdf5e2;
}

.footer {
    height: 80vh;
    width: 100%;
    background-color: #fdf5e2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 2vw;
}

.footer-top {
    height: 30%;
    width: 95%;
}

.footer-top img {
    height: 100%;
    width: 100%;
}

.footer-bottom {
    height: 63%;
    width: 95%;
    display: flex;
    justify-content: space-between;
}

.footer-bottom1 {
    height: 100%;
    width: 40%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.footer-bottom1 .footer-bottom1-top {
    height: 40%;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.footer-bottom1-top p {
    font-size: 1vw;
    font-family: gilroy;
}

.footer-bottom1 .footer-bottom1-bottom {
    height: 35%;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.footer-bottom1 .footer-bottom1-bottom h3 {
    width: 80%;
    font-family: gilroy;
    font-size: 1.2vw;
    letter-spacing: 2px;
}

.footer-bottom1-bottom h3 a {
    text-decoration: none;
    color: black;
    cursor: pointer;
}

.footer-bottom1-bottom h3 a:hover {
    text-decoration: underline;
}

.footer-bottom2 {
    height: 100%;
    width: 58%;
}

.footer-bottom2-top {
    height: 60%;
    width: 100%;
    display: flex;
}

.footer-bottom2-top .links1,
.links2 {
    height: 100%;
    width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
}

.footer-bottom2-top .links1 a,
.links2 a {
    font-size: 1.8vw;
    text-transform: capitalize;
    text-decoration: none;
    color: black;
    cursor: pointer;
    font-family: gilroy;
}

.footer-bottom2-top .links1 a:hover,
.links2 a:hover {
    text-decoration: underline;
}

.footer-bottom2-bottom {
    height: 40%;
    width: 100%;
    display: flex;
    justify-content: space-between;
}

.footer2-left {
    height: 100%;
    width: 40%;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: start;
}

.footer2-left h2 {
    font-size: 2.2vw;
    font-family: gilroy;
}

.footer2-left button {
    padding: 1vw 3vw;
    border-radius: 20px;
    border: 1px solid black;
    background-color: transparent;
    text-transform: capitalize;
    cursor: pointer;
    transition: all ease .2s;
    font-size: 1.5vw;
}

.footer2-left button:hover {
    background-color: rgb(34, 34, 34);
    color: #fdf5e2;
}

.footer2-right {
    height: 100%;
    width: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
}

.footer2-right h3 {
    font-size: 2vw;
    font-family: gilroy;
}

.footer2-right .follow-links {
    height: 40%;
    width: 80%;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
}

.follow-links i {
    font-size: 2vw;
    cursor: pointer;
}












@media (max-width: 799px) {
    nav {
        height: 8vh;
        margin: 0 0vw;
    }

    .nav-left a:nth-last-child(1) {
        display: none;
    }

    .nav-right {
        justify-content: flex-end;
    }

    .nav-right a {
        display: none;
    }

    .nav-right i {
        font-size: 6vw;
        margin-right: 3vw;
    }

    .page1cont h1 {
        display: none;
    }

    .page1 #can {
        width: 50%;
    }

    .page1 #star {
        display: none;
    }

    .page1 #leaf {
        width: 50%;
        top: 10%;
        left: 5%;
    }

    .page1 #lime {
        top: 70%;
        right: 5%;
    }

    .page1 #leaf2 {
        display: none;
    }

    .page1 #leaf3 {
        display: none;
    }

    .page1 #ice1 {
        width: 35%;
        top: 12%;
    }

    .page1 #ice2 {
        width: 35%;
        left: 7%;
    }

    .page2 {
        border-bottom: 2px solid black;
        padding: 0vw 0vw;
        overflow: hidden;
    }

    .page2-left {
        display: none;
    }

    .page2-right {
        width: 100%;
        justify-content: start;
        margin-top: 15vw;
    }

    .page2-right h1 {
        font-size: 8.5vw;
        width: 95%;
    }

    .right-container {
        height: 80%;
        width: 95%;
    }

    .container-elem {
        height: 40%;
        flex-direction: column;
        align-items: flex-end;
        padding: 0 0vw;
    }

    .container-elem:nth-child(2) {
        height: 23%;
        display: flex;
        align-items: end;
    }


    .middle-elem {
        height: 80%;
        width: 30%;
    }

    .container-elem .elem1,
    .container-elem .elem2 {
        height: 45%;
        width: 30%;
    }

    .container-elem .elem1 h3,
    .container-elem .elem2 h3,
    .middle-elem h3 {
        font-size: 4vw;
        font-weight: 800;
    }

    .page3 {
        flex-direction: column-reverse;
        align-items: center;
        justify-content: center;
    }

    .page3-left,
    .page3-right {
        height: 50%;
        width: 100%;
        padding: 3vw 0vw;
    }

    .card {
        height: 100%;
        width: 70%;
        border: 1px solid black;
        border-radius: 20px;
    }

    .card .cardcircle {
        height: 30%;
        width: 42%;
        background-color: #c771a7;
        border-radius: 50%;
        /* position: absolute; */
        z-index: 5;
        cursor: pointer;
        display: block;
        transform: scale(.9);
        opacity: 1;
    }

    .card .cardImage {
        width: 50%;
    }

    .card .peach {
        opacity: 1;
    }

    .card button {
        height: 10%;
        width: 50%;
        background-color: #d44188;
        position: absolute;
        bottom: 5%;
        z-index: 6;
        cursor: pointer;
        border: none;
        border-radius: 50px;
        text-transform: uppercase;
    }

    .card button a {
        text-transform: uppercase;
        text-decoration: none;
        color: black;
        cursor: pointer;
    }

    .page4 {
        flex-direction: column-reverse;
        align-items: center;
        justify-content: center;
    }

    .page4-left,
    .page4-right {
        height: 50%;
        width: 100%;
        padding: 3vw 0vw;
    }

    .page5 {
        height: 60vh;
    }

    .page5 h1 {
        font-size: 8vw;
    }

    .page5 .links {
        height: 60%;
        width: 85%;
        flex-direction: column;
    }

    .page5 .links .page5-links1,
    .page5-links2 {
        height: 50%;
        width: 100%;
    }

    .page5 .links a img:hover {
        transform: scale(1);
    }

    .page6 {
        height: 80vh;
        flex-direction: column-reverse;
        justify-content: space-evenly;
    }

    .page6-left {
        height: 50%;
        width: 90%;
        border-radius: 30px;
    }

    .page6-right {
        height: 40%;
        width: 90%;
    }

    .page6-right h1 {
        font-size: 10vw;
        line-height: 16vw;
    }

    .page6-right button {
        padding: 4vw 10vw;
        border-radius: 25px;
        font-size: 4vw;
        font-weight: 700;
    }

    .footer {
        height: 60vh;
        padding-bottom: 5vw;
    }

    .footer-top {
        height: 25%;
    }

    .footer-bottom {
        height: 72%;
        width: 95%;
        flex-direction: column-reverse;
    }

    .footer-bottom1 {
        height: 30%;
        width: 100%;
        flex-direction: row;
        align-items: flex-end;
    }

    .footer-bottom1 .footer-bottom1-top {
        height: 100%;
        width: 53%;
    }

    .footer-bottom1-top p {
        font-size: 2.1vw;
    }

    .footer-bottom1 .footer-bottom1-bottom {
        height: 100%;
        width: 45%;
    }

    .footer-bottom1 .footer-bottom1-bottom h3 {
        width: 100%;
        font-size: 2.2vw;
        letter-spacing: 1px;
        line-height: 3vw;
    }

    .footer-bottom1-bottom h3 a {
        text-decoration: underline;
    }

    .footer-bottom2 {
        height: 68%;
        width: 100%;
    }

    .footer-bottom2-top .links1 a,
    .links2 a {
        font-size: 4.5vw;
        text-decoration: underline;
    }

    .footer2-left h2 {
        font-size: 4.5vw;
    }

    .footer2-left button {
        padding: 2vw 5vw;
        border-radius: 15px;
        font-size: 3.5vw;
    }

    .footer2-right {
        width: 58%;
    }

    .footer2-right h3 {
        font-size: 5vw;
    }

    .footer2-right .follow-links {
        height: 40%;
        width: 100%;
    }

    .follow-links i {
        font-size: 6vw;
        cursor: pointer;
    }
}