/* Fonts */
@import url("https://use.typekit.net/wti2qki.css");



/* Variables  */
:root {
    --main-color: #903aa2;
    --text-color: #333;
}


/* START - Global Styles */

body {
    margin: 0; /* Overwrite Default */
    font-family: sofia-pro, sans-serif;
    color: var(--text-color);
}

h1,h2, h3, h4 {
    text-transform: uppercase;
    color: var(--main-color);
    margin: 0;
}

h1 {
    margin: 0;
    font-size: 45px;
    line-height: 1em;
    font-weight: 400;
    letter-spacing: -.04em;
}

h2,
h3 {
    color: #000;
    font-weight: 400;
    font-size: clamp(23px, 2vw, 40px);
    letter-spacing: -.03em;
    line-height: 1.2em;
}

h3 {
    font-size: clamp(20px, 4vw , 30px);
    text-transform: capitalize;
}

span {
    font-size: 27px;
    font-weight: 200;
    line-height: 1.3em;
}

/* END - Global Styles */





/* START - Parallax Base Styles */
.parallax {
    overflow-x: hidden;
    overflow-y: auto;
    height: 100vh;
    perspective: 1px;
    transform-style: preserve-3d;
}

.parallax-wrapper,
.parallax-wrapper-bg2  {
    width: 100vw;
    min-height: 80vh;
    transform-style: preserve-3d;
    margin-top: -2px;
}

.parallax-wrapper::before {
    content: "";
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
    background: url("../img/hero.jpg");
    background: linear-gradient(0deg, 
    rgba(255,255,255,1) 5%, 
    rgba(255,255,255,0.7) 40%, 
    rgba(255,255,255,0) 56%),
    url("../img/hero.jpg");
    background-position: center;
    position: absolute;
    z-index: -1;
    transform: translateZ(-1px) scale(2);
}

.parallax-wrapper-bg2::before {
    content: "";
    width: 100vw;
    height: 100vh;
    top: 150px;
    left: 0;
    background: url("../img/bg2.jpg");
    background-size: cover;
    background-position: center;
    position: absolute;
    z-index: -1;
    transform: translateZ(-1px) scale(2);
}

.regular-wrapper {
    width: 100vw;
    min-height: 75vh;
    padding: clamp(20px, 10%, 100px);
    padding-top: 0;
    padding-bottom: 0;
    background: linear-gradient(0deg, rgba(244,228,247,1) 0%, rgba(255,255,255,1) 100%);
    box-sizing: border-box;
    position: relative;
    box-shadow: 0 -10px 10px #fff;
    z-index: 1;
}

.content {
    margin: 0 auto;
    text-align: center;
    padding: 25vh 25vw;
    width: 100vw;
    height: 100vh;
    box-sizing: border-box;
    background: url("../img/header.png") center top no-repeat;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    text-shadow: 0px 0px 15px #fff;
    flex-direction: column;
}

.parallax-wrapper .content-bottom {
    height: 100vh;
    background: url("../img/body1.png") center bottom no-repeat;
}

.parallax-wrapper-bg2 .content-bottom {
    height: 150px;
    margin-top: -60px;
    background: url("../img/footer.png") center bottom no-repeat;
}

.parallax-wrapper .content,
.parallax-wrapper-bg2 .content {
    position: absolute;
    transform: translateZ(-0.5px) scale(1.5);
}

/* END - Parallax Base Styles */





/* START - Nav Styles */

nav {
    position: absolute;
    top: 150px;
    right: 50px;
    display: flex;
}

nav i {
    color: #fff !important;
    background: var(--main-color);
    font-size: clamp(9px, 3vw, 20px) !important;
    padding: 10px;
    margin: 10px;
    border: 3px solid #fff;
    border-radius: 30px;
    box-shadow: 0 0 10px #666; 
    transition: 0.25s ease all;
}

nav i:hover {
    background: #722982;
    box-shadow: 0 0 15px #000;
}

/* END - Nav Styles */




/* START - Features Section */
.features {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-gap: 40px 10px;
    text-align: center;
    max-width: 1400px;
    margin: -2px auto;
    padding-top: 20px;
}

.features .highlight {grid-column-start: span 4;}

.features img {    
    width: 100%;
    max-width: 500px;
    padding-right: clamp(5px, 1vw, 30px);
    justify-self: right;
    border-radius: 10px;
    grid-column-start: span 6;
    grid-row-start: span 2;
}

.features .img1,
.features .img2,
.features .img3 {
    border-radius: 150px;
    box-shadow: inset 0 0 10px #333;
    padding-bottom: clamp(1px, 70%, 300px);
    max-width: 300px;
    max-height: 300px;
    margin: 0 15% 30px;
    background: url("../img/features1.jpg");
    background-size: contain;
}

.features .img2 {
    background: url("../img/features2.jpg");
    background-size: contain;
}

.features .img3 {
    background: url("../img/features3.jpg");
    background-size: contain;
}

.features span {
    font-size: 17px;
    padding: 10px 20px 60px;
    display: block;

}

.features .info {
    text-align: left;
    padding: 4% 7% 0;
    grid-column-start: span 6;
}

.features .info span {
    padding: 10px 0;
    font-size: clamp(17px, 2vw, 24px);
}

.features .icon {
    float: left;
    text-align: center;
    padding: 20px 0;
    width: 33%;
}

.features .icon span {
    padding: clamp(1px, 5%, 30px);
    padding-top: 10px;
    font-size: clamp(12px, 1vw, 18px);
    text-transform: uppercase;
    font-weight: 400;
}

.fas {
    color:var(--main-color);
    font-size: clamp(25px, 4vw, 50px);
}
/* END - Features Section */





/* START - Contact Section */

.contact {
    background: url("../img/body2.png") center top no-repeat;
    padding: 200px 55vw 180px 15vw;
}

.contact h4 {
    font-size: clamp(18px, 4vw, 30px);
    font-weight: 400;
    padding: 25px 0 5px;
    text-shadow: 0 0 10px #fff;
}

.contact span {
    font-size: clamp(14px, 2vw, 24px);
    font-weight: 200;
    text-shadow: 0 0 10px #fff;
}

/* END - Contact Section */






/* START - Footer section */

.footer {
    min-height: 75vh;
    padding: 30px 0;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.footer .info {
    max-width: 600px;
}

.footer span {
    margin: 20px 0;
    display: inline-block;
}

.footer button {
    border: 0;
    display: block;
    margin: 30px auto;
    min-height: 60px;
    background: no-repeat;
}

.footer button a {
    padding: clamp(10px, 20vw, 90px);
    padding-top: 10px;
    padding-bottom: 10px;
    background: var(--main-color);
    background: linear-gradient(0deg, rgba(144,58,162,1) 0%, rgba(118,41,135,1) 100%);
    border: solid 5px #833294;
    border-radius: 40px;
    color: #fff;
    font-size: clamp(18px, 4vw, 30px);
    text-decoration: none;
    font-weight: 500;
    transition: 0.25s ease all;
}

.footer button a:hover {
    background: #762987;
    background: linear-gradient(0deg, rgba(118,41,135,1) 0%, rgba(144,58,162,1) 100%);
    box-shadow: 0 0 15px #333;
    cursor: pointer;
    transition: 0.25s ease all;
}

.footer em {
    font-size: 12px;
    font-style: normal;
    position: absolute;
    bottom: 10px;
}

.footer em h4 {
    color: #000;
}

.footer em span {
    font-size: 12px;
    color: var(--main-color);
}

/* END - Footer section */






/* START - Mobile Styles */

@media (max-width: 750px) {

    .parallax-wrapper::before {
        background: url("../img/hero-m.jpg");
        background-position: center;
        background-size: 180%;
        background-position-y: 15vw;
        background-repeat: no-repeat;
    }

    .parallax-wrapper-bg2::before {
        background: url("../img/bg3.jpg") center;
        min-height: 500px;
    }

    .parallax-wrapper-bg2,
    .parallax-wrapper-bg2 .contact {
        min-height: 400px;
    }

    .parallax-wrapper .content-bottom,
    .parallax-wrapper-bg2 .content-bottom {
        background-size: 290%;
    }

    nav {
        flex-direction: column;
        top: 25vw;
        right: 30px;
    }

    .content {
        transform: translateZ(-1px) scale(2);
        background-size: 290%;
        padding: 115vw 30px 0;
        width: 100%;
        min-height: 15px;
        justify-content: normal;
    }

    .contact {
        background: url("../img/body2.png") center top no-repeat, linear-gradient(0deg, 
        rgba(255,255,255,0) 0%,  
        rgba(255,255,255,0.7) 30%);
        background-size: 290%;
        padding: 20%;
        min-height: 80vh;
    }


    h1 {font-size: 20px;}
    h2 {text-align: center;}
    span {font-size: 18px;}
    .features {grid-template-columns: repeat(1, 1fr);}
    .features span {padding: 10px 20px 20px;}
    .features .info {padding: 0;}
}
/* END - Mobile Styles  




/* START - Mobile Landscape Styles */

@media (max-width: 850px) and (orientation: landscape) {
    .parallax {
        height: auto;
        perspective: initial;
        transform-style: initial;
    }

    .parallax-wrapper {
        min-height: auto;
        transform-style: initial;
    }

    .parallax-wrapper::before {
        transform: initial;
        top: auto;
        background: linear-gradient(0deg, 
            rgba(255,255,255,1) 5%, 
            rgba(255,255,255,0.7) 40%, 
            rgba(255,255,255,0) 100%),
            url("../img/hero.jpg");
        background-position: center 23%;
    }

    .parallax-wrapper .content-bottom {height: 145vh;}

    .content {
        padding: 30vw 115px 0;
        background-size: 200%;
    }

    .parallax-wrapper .content, .parallax-wrapper-bg2 .content {
        transform: initial;
    }

    .footer .info {
        padding-bottom: 70px;
    }
}

/* END - Mobile Landscape Styles */