@font-face {
    font-family: 'PP Agrandir Grand';
    src: url('/Fonts/PPAgrandir-GrandHeavy.otf') format('truetype');
 }

 @font-face {
    font-family: 'PP Agrandir Wide';
    src: url('/Fonts/PPAgrandir-WideLight.otf') format('truetype');
 }

 @font-face {
    font-family: 'PP Agrandir';
    src: url('/Fonts/PPAgrandir-Regular.otf') format('truetype');
 }

::-webkit-scrollbar {
    width: 0.6rem;
    border-radius: 0.5rem;
    background-color: hsl(0, 0%, 54%);
    display: none;
}

::-webkit-scrollbar-thumb {
    background-color: hsl(0, 0%, 44%);
    border-radius: 0.5rem;
}

::-webkit-scrollbar-thumb:hover {
    background-color: hsl(0, 0%, 66%);
}

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

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'PP Agrandir Grand', sans-serif;
    margin: auto;
    background: #000;
    color: #F8FFF9;
    overflow-x: hidden;
}

header {
    height: 6rem;
    width: 100%;
    /* position: fixed; */
    background: #000;
    z-index: 1;
}

section {
    margin-bottom: 200px;
}

.slideshow,
.slideshow_two,
.slideshow_three {
    margin-bottom: 80px;
}

a {
    color: #F8FFF9;
    text-decoration: underline 2px;
}

.sensorium-logo {
    height: 80px;
    width: 330px;
}

.header-logo {
    margin: 0.25rem 5rem;
}

.hero {
    z-index: -1;
}

.video-container {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    min-height: 90vh;
    position: relative;
    display: grid;
    place-items: center;
}

.video {
    height: 80vh;
}

.gallery-video {
    width: 80vw;
    margin-left: 4rem;
}

h2 {
    font-style: normal;
    font-weight: 800;
    font-size: 60px;
}

.intro-title {
    text-align: center;
    padding-top: 200px;
}

.one,
.two,
.three,
.four {
    padding: 40px 0;
}

/* .one {
    width: 620px;
} */

.two {
    /* width: 740px; */
    float: right;
    /* margin-bottom: 12.5rem; */
}

.three {
    padding-top: 120px;
}

.three,
.four {
    /* width: 1320px; */
    clear: both;
}

.four {
    padding-bottom: 160px;
}

.gradient {
    background: radial-gradient(103.11% 5218.38% at 103.11% 100%, #D3BA35 0%, #5B9B2D 32.81%, #2BA487 62.5%, #2A41B8 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.intro-desktop {
    display: block;
    margin: auto;
    width: 80%;
}

.intro-mobile {
    display: none;
}

p {
    font-family: 'PP Agrandir', sans-serif;
    font-size: 20px;
}


.gradient-red {
    background: radial-gradient(103.11% 5218.38% at 103.11% 100%, #F38181 0%, #F0511F 32.81%, #F0511F 62.5%, #AE1212 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.generations {
    height: 100vh;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.75)), url('https://res.cloudinary.com/dtraarxtz/image/upload/v1668616711/DenizUral/Sensoriumx/Files/2-Sensorium_X_3_rbno7c.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    display: flex;
}

.wide-span {
    font-family: 'PP Agrandir Wide', sans-serif;
}

.underlined {
    text-decoration: underline;
}

.awards_link {
    color: #E5E5E5;
}

.generations-text,
.how_it_works-text,
.technical_process-text,
.magic-text,
.discovery-text,
.what_is_wrong-text,
.future_of_values-text,
.experience-text,
.mindfulness-text, 
.sentient_beings-text,
.healing_our_world-text,
.a_giant_hug-text,
.distancing-text {
    /* width: 60%; */
    width: 745px;
    margin: auto;
}

h3 {
    font-size: 30px;
    margin-bottom: 2rem;
}

h4 {
    font-size: 1.5rem;
    font-weight: 700;
}

.gradient-green {
    background: radial-gradient(103.11% 5218.38% at 103.11% 100%, #1A78E7 0%, #48DE45 50%, #96EE94 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.subtitle,
.numbertext {
    font-family: 'PP Agrandir Wide';
    color: #757575;
}

.generation-title {
    display: flex;
    justify-content: center;
    margin-bottom: 40px;
}

.gen_title {
    text-align: center;
}

.details,
.future {
    display: inline;
    justify-content: center;
}

.details_section {
    /* width: 60vw; */
    width: 745px;
    margin: auto;
    font-family: 'PP Agrandir', sans-serif;
    font-size: 20px;
    margin-bottom: 12.5rem;
}

h5 {
    font-family: 'PP Agrandir Grand', sans-serif;
    font-size: 20px;
}

.details_table {
    display: flex;
}

.details_table-title {
    width: 15rem;
    margin: 0 2rem 0 0;
}

.details_table-content {
    width: 40rem;
    /* margin: 0 0 0 2.5rem; */
}

ul {
    list-style: outside;
}

hr {
    margin: 1rem 0;
    background: #B9B9B9;
}

.generation-one_review {
    height: 100vh;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.75)), url('https://res.cloudinary.com/dtraarxtz/image/upload/v1668616711/DenizUral/Sensoriumx/Files/26-Sensorium_X_18_euqmtl.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    display: flex;
}

.generation-two_review {
    height: 100vh;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.75)), url('https://res.cloudinary.com/dtraarxtz/image/upload/v1668616705/DenizUral/Sensoriumx/Files/49-Sensorium_X_40_d0hffi.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    display: flex;
}

.generation-three_review {
    height: 100vh;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.75)), url('https://res.cloudinary.com/dtraarxtz/image/upload/v1668616729/DenizUral/Sensoriumx/Files/50-Sensorium_X_32_clqxsy.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    display: flex;
}

.generations_review-text {
    /* width: 80%; */
    width: 1090px;
    margin: auto;
    padding: 5rem 10rem;
    border: 2px solid #96EE94;
    font-family: 'PP Agrandir', sans-serif;
    font-size: 1rem;
}

.hrv_img {
    width: 100%;
    margin: 2rem 0;
}

.colour-spectrum_container {
    margin: 40px 0 30px 0;
    display: flex;
    justify-content: center;
}

.colour-spectrum {
    transform: rotate(-360deg);
}

.spectrum_text {
    display: flex;
    justify-content: space-between;
    width: 750px;
    margin: auto;
    /* margin-bottom: 12.5rem; */
}

.technical_process-imgs {
    display: flex;
    justify-content: space-between;
    margin-bottom: 2rem;
}

.technical_process-img {
    margin: auto;
    width: 195px;
    height: 180px;
}

.technical_process-arrow {
    margin-top: 70px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 40px;
}

.img-paragraph {
    font-size: 16px;
}

.community {
    height: 100vh;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)), url('https://res.cloudinary.com/dtraarxtz/image/upload/v1668616711/DenizUral/Sensoriumx/Files/2-Sensorium_X_3_rbno7c.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    display: flex;
}

.community-text {
    margin: auto;
}

.community-imgs {
    display: grid;
    grid-template-columns: 12.5rem 12.5rem 12.5rem 12.5rem;
    gap: 45px;
    justify-content: space-evenly;
}

.community_img-container {
    margin-bottom: 2rem;
}

.community_name {
    margin-top: 15px;
    font-size: 20px;
    font-family: 'PP Agrandir', sans-serif;
    color: #96EE94;
}

.community_jobtitle {
    font-size: 14px;
    font-family: 'PP Agrandir', sans-serif;
}

.now {
    text-align: center;
}

.all-we-have {
    margin-bottom: 12.5rem;
}

.we_are_all_one {
    display: flex;
    font-size: 50px;
    border: #F8FFF9 5px solid;
    border-radius: 50%;
    height: 735px;
    width: 735px;
    margin: auto;
    align-items: center;
}

.one-text {
    margin: auto;
    font-size: 50px;
}

.magic {
    height: 100vh;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.75)), url('https://res.cloudinary.com/dtraarxtz/image/upload/v1668616705/DenizUral/Sensoriumx/Files/Sensorium_Main_Picture_copy_uresc7.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    display: flex;
}

.gradient-orange {
    background: radial-gradient(103.11% 5218.38% at 103.11% 100%, #A7478B 50%, #B1BD47 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.what_is_wrong {
    height: 100vh;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)), url('https://res.cloudinary.com/dtraarxtz/image/upload/v1668616709/DenizUral/Sensoriumx/Files/15-Sensorium_X_1_algchi.jpg');
    background-size: 125%;
    background-repeat: no-repeat;
    background-position: right;
    display: flex;
}

.red {
    background: radial-gradient(50% 50% at 50% 50%, #E75151 0%, #BC4918 50.52%, #BF236E 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.bigger-h3 {
    font-size: 40px;
}

.gradient-purple {
    background: radial-gradient(130.25% 4630% at -9.34% 50.63%, #453C93 0%, #7E3C93 15%, #BC3266 30%, #D22A3D 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.experience_img-container {
    margin-top: 60px;
}

.experience_img {
    display: flex;
    margin: auto;
    align-items: center;
}

.mindfulness {
    height: 100vh;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.75)), url('https://res.cloudinary.com/dtraarxtz/image/upload/v1668616719/DenizUral/Sensoriumx/Files/Mindfulness_keeced.jpg');
    background-size: 130%;
    background-repeat: no-repeat;
    background-position: left;
    display: flex;
}

.research_questions {
    margin-bottom: 100px;
    /* margin: 60px; */
}

.research_questions-text {
    /* margin: 120px; */
}

.research_header {
    /* margin-bottom: 60px; */
}

.research_questions-details {
    display: grid;
    grid-template-columns: 630px 630px;
    gap: 60px;
    /* height: 415px; */
    justify-content: space-evenly;
}

.research_questions-details-table {
    width: 630px;
    margin: auto;
    font-family: 'PP Agrandir', sans-serif;
    font-size: 20px;
    margin-bottom: 100px;
}

.research_questions_details_table-title {
    width: 20rem;
    margin: 0 1rem 0 0;
}

.top-details {
    height: 145px;
}

.bottom-details {
    height: 225px;
    /* margin-left: 40px; */
}

.image-and-text {
    display: flex;
    justify-content: center;
    align-items: center;
}

.left-img {
    width: 615px;
}

.right-text {
    margin-left: 75px;
    margin-top: 25px;
    width: 685px;
}

.sentient_beings {
    height: 100vh;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.75)), url('https://res.cloudinary.com/dtraarxtz/image/upload/v1668616728/DenizUral/Sensoriumx/Files/21-Sensorium_X_26_copy_yqouwk.jpg');
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
    display: flex;
}

.spaces_you-text {
    margin: 40px auto;
    width: 975px;
    text-align: center;
}

.spaces_you-img {
    display: flex;
    justify-content: center;
}

.spaces_you-paragraph {
    font-family: 'PP Agrandir Grand';
    font-size: 20px;
}

.healing_our_world {
    height: 100vh;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)), url('https://res.cloudinary.com/dtraarxtz/image/upload/v1668616732/DenizUral/Sensoriumx/Files/Healing_our_world_qqy9tc.jpg');
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
    display: flex;
    margin: 0;
}

.a_giant_hug {
    height: 100vh;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.75)), url('https://res.cloudinary.com/dtraarxtz/image/upload/v1668616711/DenizUral/Sensoriumx/Files/41-Sensorium_X_49_a8kz7f.jpg');
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
    display: flex;
    margin: 0;
}

.distancing {
    height: 100vh;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)), url('https://res.cloudinary.com/dtraarxtz/image/upload/v1668616715/DenizUral/Sensoriumx/Files/Distancing_y4ssdr.jpg');
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
    display: flex;
    margin: 0;
}

.exemplary_experience {
    margin: 130px;
    display: flex;
    justify-content: center;
}

.exemplary_experience-text {
    margin-bottom: 40px;
}

footer {
    margin: 0 65px;
    height: 250px;
}

.footer_line-img {
    margin-bottom: 40px;
    width: 100%;
}

.footer-logo, .header-logo {
    margin-bottom: 40px;
}

.footer_flex {
    display: flex;
    justify-content: space-between;
}

.footer-text {
    line-height: 40px;
}

.footer_copy {
    margin-top: 80px;
}

.contact-me_link {
    color: #fff;
    text-decoration: none;
    padding: 20px;
    transition: ease-in-out .5s;
    border: solid 1px #fff;
    border-radius: 15px;
}

.contact-me_link:hover {
    background: radial-gradient(130.25% 4630% at -9.34% 50.63%, #453C93 0%, #7E3C93 15%, #BC3266 30%, #D22A3D 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}




/* breakpoints */

@media (max-width: 800px) {
    
    body {
        margin: 0;
    }
    
    section {
        margin: auto;
        width: 100vw;
        padding: 60px 0;
    }

    .header-logo {
        margin: 20px 0;
    }

    .hero {
        margin: 0 auto;
        padding: 0;
    }

    .video-container {
        width: 90vw;
        height: 90vh;
        min-height: 90vh;
    }
    
    .video {
        width: 750px;
        height: auto;
    }
    
    .intro {
        top: -160px;
        margin: 0 auto;
        width: 100%;
    }
    
    .intro-title {
        text-align: center;
    }    
    
    .intro-title, .intro-one, .intro-two {
        font-size: 30px;
    }

    .intro-three,
    .intro-four {
        clear: both;
        font-size: 20px;
    }

    .one, .two, .three, .four {
        margin: 20px 100px;
    }

    .three, .four {
        padding: 40px 0;
    }

    .generations {
        height: 60vh;
    }

    .generations_review-text {
        width: 80%;
    }

    .gallery-video {
        margin-left: 1rem;
        /* height: 100%; */
    }

    .generations-text,
    .magic-text,
    .what_is_wrong-text,
    .mindfulness-text, 
    .sentient_beings-text,
    .healing_our_world-text,
    .a_giant_hug-text,
    .distancing-text {
    /* width: 60%; */
    width: 90vw;
    margin: auto 60px;
    }

    .technical_process-text, .discovery-text, .future_of_values-text,
    .experience-text {
        width: 90vw;
        margin: 20px auto;
    }

    .details_section {
        /* width: 60vw; */
        width: 725px;
        margin: 20px;
        font-family: 'PP Agrandir', sans-serif;
        font-size: 1.25rem;
        margin-bottom: 12.5rem;
    }

    .exemplary_experience {
        margin: auto 60px;
        width: 90vw;
    }

    .now-img,.experience_img, .space-img, .exemplary_experience-map, .hrv_img, .colour-spectrum {
        width: 90vw;
        margin: 20 px0;
        padding: 0;
    }

    .community {
        height: 100%;
    }
    
    .community-imgs {
        grid-template-columns: 12.5rem 12.5rem;
        gap: 45px;
    }

    .research_questions-details {
        display: block;
        margin: auto;
    }

    .research_header {
        margin: 65px;
    }

    .top-details {
        height: 100%;
    }
    
    .bottom-details {
        height: 100%;
    }

    .image-and-text {
        display: block;
    }
    
    .left-img {
        width: 100vw;
    }
    
    .right-text {
        width: 685px;
        margin: 60px;
    }

    .how_it_works-text {
        width: 90vw;
    }

    .spectrum_text {
        width: 90vw;
    }

    .technical_process-content {
        display: flex;
        flex-direction: column-reverse;
        width: 335px;
        margin: auto;
    }
    
    .technical_process-imgs {
        display: block;
        width: 745px;
    }
    
    .technical_process-img {
        width: 335px;
        height: 310px;
    }
    
    .technical_process-arrow {
        visibility: hidden;
        height: 0px;
        margin: 0;
    }

    .img-paragraph {
        margin-bottom: 20px;
        margin: 20px 0 10px 0;
    }

    .spaces_you-text {
        margin: 10px auto;
        width: 90vw;
    }

    .healing_our_world {
        height: 100%;
    }
    
    .a_giant_hug {
        height: 100%;
    }
    
    .distancing {
        height: 100%;
    }

    .book-img_container {
        display: flex;
        justify-content: center;
    }

    .book-img {
        width: 90vw;
        height: 40rem;
        object-fit: cover;
    }

}

@media (max-width: 420px) {

    body {
        margin: auto;
    }
    
    section {
        margin: 0;
        margin-bottom: 60px;
        width: 100%;
        height: 100%;
        padding: 20px 0;
    }

    .sensorium-logo {
        width: 200px;
    }

    .hero {
        margin: 0 auto;
        padding: 0;
    }

    .video-container {
        top: 0px;
        left: 0;
        width: 80vw;
        height: 25vh;
        min-height: 25vh;
    }
    
    .video {
        width: 380px;
        height: auto;
    }

    .intro-desktop {
        display: none;
    }
    
    .intro-mobile {
        display: block;
        top: 0px;
        margin: 20px;
        width: 100%;
    }
    
    .intro-title {
        padding-top: 0;
        text-align: center;
    }
    
    h2 {
        font-size: 30px;
    }

    h3,
    .bigger-h3 {
        font-size: 20px;
    }

    h4 {
        font-size: 18px;
    }

    h5 {
        font-size: 16px;
    }

    p {
        font-size: 16px;
    }

    .mobile-intro-title {
        margin: 30px;
    }
    
    .mobile-intro-title, .mobile-intro-one, .mobile-intro-two {
        font-size: 30px;
    }

    .mobile-intro-three,
    .mobile-intro-four {
        clear: both;
        font-size: 20px;
    }

    .mobile-one, .mobile-two, .mobile-three, .mobile-four {
        margin: 0 30px;
    }

    .mobile-three, .mobile-four {
        padding: 20px 0;
    }

    .generation-title {
        margin-bottom: 0;
    }

    .generations {
        height: 500px;
    }

    .generations_review-text {
        width: 90%;
        font-size: 16px;
        padding: 20px;
        /* margin: 50px; */
    }

    .generation-one_review, 
    .generation-two_review, 
    .generation-three_review {
        height: 100%;
        background-size: cover;
        margin-bottom: 0;
    }

    .generations-text,
    .magic-text,
    .what_is_wrong-text,
    .mindfulness-text, 
    .sentient_beings-text,
    .healing_our_world-text,
    .a_giant_hug-text,
    .distancing-text {
        /* width: 60%; */
        width: 90vw;
        margin: auto 30px;
    }

    .what_is_wrong {
    height: 100%;
    }

    .technical_process-text, .discovery-text, .future_of_values-text,
    .experience-text {
        width: 90vw;
        margin: 10px auto;
    }

    .details_section {
        /* width: 60vw; */
        width: 375px;
        margin: 10px;
        font-family: 'PP Agrandir', sans-serif;
        font-size: 16px;
        margin-bottom: 60px;
    }

    .sentient_beings-text,
    .healing_our_world-text,
    .a_giant_hug-text,
    .distancing-text {
        padding: 60px 0;
    }

    .exemplary_experience {
        margin: auto 30px;
        width: 90vw;
    }

    .community {
        height: 100%;
    }
    
    .community-imgs {
        grid-template-columns: 10rem 10rem;
        gap: 20px;
    }
    
    .community_img {
        width: 150px;
    }

    .we_are_all_one {
        width: 350px;
        height: 350px;
    }

    .one-text {
        font-size: 20px;
    }

    .research_questions-details {
        display: block;
        margin: auto;
    }

    .research_questions-subtitle {
        font-size: 16px;
    }

    .research_questions-details-table {
        width: 355px;
        font-size: 16px;
    }

    .research_header {
        margin: 40px 20px;
        font-size: 20px;
    }

    .top-details {
        height: 100%;
    }
    
    .bottom-details {
        height: 100%;
    }

    .image-and-text {
        display: block;
    }
    
    .left-img {
        width: 100vw;
    }
    
    .right-text {
        width: 350px;
        margin: 30px;
    }
    
    .sentient-paragraph {
        font-size: 16px;
        font-family: 'PP Agrandir', sans-serif;
    }

    .sentient_beings, .magic, .mindfulness, .healing_our_world, .a_giant_hug, .distancing {
        height: 100%;
        background-size: cover;
    }

    .how_it_works-text {
        width: 90vw;
    }

    .spectrum_text {
        width: 90vw;
    }

    .technical_process-content {
        display: flex;
        flex-direction: column-reverse;
        /* width: 155px; */
        margin: auto;
    }
    
    .technical_process-imgs {
        display: block;
        width: 310px;
    }
    
    .technical_process-img {
        width: 355px;
        height: 355px;
    }
    
    .technical_process-arrow {
        visibility: hidden;
        height: 0px;
        margin: 0;
    }

    .img-paragraph {
        margin-bottom: 20px;
        margin: 20px 0 10px 0;
    }

    .lower-header {
        font-size: 20px;
    }

    .spaces_you-text {
        margin: 10px auto;
        width: 90vw;
    }

    .book-img_container {
        display: flex;
        justify-content: center;
    }

    .book-img {
        width: 90vw;
        height: 20rem;
        object-fit: cover;
    } 
    
    .book-paragraph {
        font-size: 16px;
    }

    .footer_flex {
        display: block;
    }

    footer, header {
        margin: 20px;
    }
    
}