:root {
    --black:#030303;
    --pink:#B94A95;
    --heading-one:75px;
    --mobile-heading-one:50px;
    --text:20px;
    --mobile-text:18px;
    --vertical-text:14px;
    --mobile-vertical-text:10px;
    --list-item:35px;
    --mobile-list-item:25px;
    --heading-two:50px;
    --mobile-heading-two:30px;
}
@font-face {
    font-family: customFont;
    src: url(Adieu-Regular.ttf);
}
*,
*::before,
*::after {
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family: 'Darker Grotesque', sans-serif;
    font-family:customFont;
    scroll-behavior: smooth;
}

.button-solid {
    background-color:white;
    border:2px solid white;
    color:black;
    display:flex;
    align-items: center;
    gap:1rem;
    padding:0.5rem 1rem;
    font-weight:700;
}
.button-hollow {
    background-color:transparent;
    border:none;
    color:white;
    display:flex;
    align-items: center;
    gap:1rem;
    padding:0.5rem 1rem;
    font-weight:700;
}
button span {
    display:flex;
    align-items: center;
    justify-content: center;
}
button {
    cursor:pointer;
    transition:500ms;
}
button:hover img {
    scale:1.25;
    transition:500ms;
}

ul {
    list-style:none;
}
a {
    text-decoration:none;
    color:white;
}
p,
button,
a,
li {
    font-family: 'Darker Grotesque', sans-serif;

}

header,
main,
section,
footer {
    width:100%;
    display:flex;
    align-items: center;
    justify-content: center;
}

.wrapper {
    width:100%;
    max-width:1440px;
    padding: 6rem 4rem;
}
body {
    background-color:var(--black);
    color:white;
}
h2 {
    line-height:1.2 !important;
}
h1 {
    line-height:1.1 !important;
}
/****** Dropdown ******/

.dropdown {
    position:relative !important;
    display:none;
    z-index:1000 !important;
}
.dropdown-menu {
    position:absolute;
    right:0;
    top:calc(100% + 0.5rem);
    padding:1.5rem;
    background-color:#262626;
    box-shadow:0 2px 5px 0 rgba(0, 0, 0, 0.1);
    display:grid;
    grid-template-columns:1fr 1fr;
    width:max-content;
    opacity:0;
    transform:translateY(-1rem);
    transition:opacity 0.5s, transform 0.5s;
    pointer-events:none;
    gap:2rem;
    border-radius:0.5rem;
   
}





.dropdown-heading > a {
    font-weight:700 !important;
}
.dropdown-links {
    display:flex;
    flex-direction: column;
    gap:0.5rem;
}
.dropdown-links a {
    font-weight:300 !important;
}
.div {
    display:flex;
    flex-direction: column;
    gap:0.5rem;
}
.menu {
    width:30px;
    display:none;
    cursor:pointer;
}
.dropdown.active > .link + .dropdown-menu {
    opacity:1;
    transform:translateY(0);
    pointer-events:all;
    transition:opacity 0.5s, transform 0.5s;

}
.menu + .dropdown-menu {
    padding-block:2rem;
    display:none;
}
.dropdown-heading > p {
    font-weight:700 !important;
}
.dropdown > a {
    font-weight:300 !important;
}
@media (max-width:1000px) {
    nav ul {
        display:none;
    }
    .dropdown {
        display:block;
    }
    .menu + .dropdown-menu {
        padding-block:2rem;
        display:grid;
    }
    .menu {
        display:block;
    }
    nav {
        display:flex;
        justify-content: flex-end;
    }
}
@media (max-width:500px) {
    .header-wrapper {
        padding-inline:1rem;
    }
    .dropdown-menu {
        grid-template-columns:1fr;
    }
}

/* Header */

header {
    background-color:#0E0A0B50;
    backdrop-filter:blur(5px);
    -webkit-backdrop-filter: blur(5px);
    z-index:10;
    position:relative;
}

.header-wrapper {
    width:100%;
    max-width:1440px;
    padding:2rem 4rem;
    display:flex;
    align-items: center;
    justify-content: space-between;
}
.menu {
    display:none;
    width:50px;
}
.header-logo img {
    width:250px;
}
.header-logo {
    display:flex;
    align-items: center;
    justify-content: flex-start;
}

nav {
    display:flex;
    align-items: center;
    justify-content: flex-end;
}
nav ul {
    display:flex;
    align-items: center;
    gap:2rem;
}
nav ul li {
    font-size:var(--text);
    font-weight:700;
}
button img {
    width:10px;
}
button {
    font-size:22px;
}
h1 {
    font-size:var(--heading-one);
    line-height:0.9;
    max-width:10ch;
    font-weight:500;
}
p {
    font-size:var(--text);
}
@media (max-width:1000px) {
    .menu {
        display:block;
    }
    nav {
        display:none;
    }
}
@media (max-width:700px) {
    .header-wrapper {
        padding-inline:2rem;
    }
}
@media (max-width:500px) {
    .header-wrapper {
        padding-inline:1rem;
    }
    .header-logo img {
        width:200px;
    }
    nav img {
        width:40px;
    }
}

/* Main */

.main-right-buttons {
    display:flex;
    align-items: center;
}
main .wrapper {
    display:flex;
    align-items: flex-end;
    gap:4rem;
    padding-top:16rem;
    padding-bottom:4rem;
}
.main-left {
    width:50%;
}
.main-right {
    width:50%;
    display:flex;
    flex-direction: column;
    align-items: flex-start;
    gap:2rem;
}
main {
    position:relative;
}
.noise {
    position:absolute;
    mix-blend-mode: overlay;
    mix-blend-mode:soft-light;
    -webkit-mix-blend-mode:;

    z-index:-1;
    width:100%;
    object-fit:cover;
    height:100%;
}
.noisetwo {
    mix-blend-mode:soft-light;
    opacity:0.7;
}
.noisethree {
    opacity:0.4;

}
.main-right-buttons button {
    padding-inline:0.6rem;
}

h1 span {
    color:var(--pink);
}
@media(max-width:1282px) {
    main .wrapper {
        flex-direction: column;
        align-items: flex-start;
        gap:2rem;
    }
    h1 {
        max-width:30ch !important;
        font-size:60px;
    }
    h1 span {
        width:max-content;
    }
  
    .main-left {
        width:100%;
    }
    .main-right p {
        max-width:50ch;
    }
    .main-right {
        width:100%;
    }
    .main-right-buttons {
        margin-top:1rem;
        gap:1rem;
    }
}
@media (max-width:717px) {
    .main-right-buttons button {
        width:100%;
        justify-content: space-between;
        line-height:1;
        text-align:left;
        padding-block:1rem;
    }
    .main-right-buttons a {
        width:85%;
    }
    .main-right-buttons {
        flex-direction: column;
        align-items: flex-start;
        width:100%;
    }
}
@media (max-width:700px) {
    main .wrapper {
        padding-inline:2rem;
        padding-top:8rem;
    }
   
}
@media (max-width:500px) {
    main .wrapper {
        padding-inline:1rem;
    }
    h1 {
        font-size:var(--mobile-heading-one);
    }
    .main-right p {
        font-size:var(--mobile-text);
    }
    
    
}
@media (max-width:450px) {
    .main-right-buttons button {
        width:100%;
        justify-content: space-between;
        line-height:1;
        text-align:left;
     
}
.main-right-buttons  a {
    width:100%;
}
}
@media (max-width:401px) {
    h1 {
        font-size:40px;
    }
}
@media (max-width:350px) {
   
    .main-right-buttons button {
        font-size:18px;
    }
}
@media (max-width:322px) {
    h1 {
        font-size:35px;
    }
}
@media (max-width:307px) {
    .header-logo img {
        width:150px;
    }
    .header-logo {
        display:flex;
        align-items: center;
        justify-content: center;
    }
}
/* Clicker */

/* Testimonials */


.contact-section {
    background-image: linear-gradient(to left, #030303, #03030300 ), linear-gradient(to bottom, #030303, #03030300 75% ), url(visual-png/old-film-camera-light.png);
    background-color:var(--black);
    /* background-blend-mode: overlay; */
    background-size:cover;
    position:relative;
    z-index:0;
}
.contact-section a {
    color:black;
}
.testimonials-section .wrapper {
    display:flex;
    flex-direction: column;
    align-items: flex-start;
    gap:2rem;
    position: relative;
    padding-block:6rem;
    padding-bottom:12rem;
}
.testimonials-titles {
    border-top:1px solid white;
    border-bottom:1px solid white;
    width:100%;
    padding-block:1rem;
}
.testimonials-titles h2 {
    font-size:var(--heading-two);
    line-height:1;
}
.testimonials-middle p {
    font-size:45px !important;
    font-family:customFont;
    line-height:1;
    width:100%;
}
.testimonials-middle {
    display:flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    width:50%;
    gap:4rem;
}
.contact-section .testimonials-middle {
    align-self:flex-end;
}
.testimonials-mixed {
    width:100%;
    display:flex;
    align-items: center;
    gap:4rem;
    margin-top:6rem;
}

.testimonials-mixed button {
    background-color:var(--pink);

}
.testimonials-mixed button img {
    width:25px;
}

.testimonials-bottom {
    background-color:#ffffff50;
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter: blur(10px);
    width:50%;
    color:white;
    display:flex;
    justify-content: flex-end;
    /* padding-bottom:2rem; */
    height:max-content;
    align-self:flex-end;
}

.testimonials-section .testimonials-bottom {
    z-index:100 !important;
    position:relative !important;
}
.testimonials-bottom-right {
    width:100%;
    padding:2rem;
    gap:2.3rem;
    overflow-y: hidden;
    position:relative;
    z-index:10000 !important;
}





.contact-list {
    display:flex;
    flex-direction: column;
    align-items: flex-start;
    gap:2rem;
    margin-top:2rem;
}
.contact-list-item:nth-child(3) img {
    width:16px;
}
.contact-section .testimonials-bottom-right {
    gap:4rem !important;
}
.contact-list-item {
    display:flex;
    align-items: center;
    gap:1rem;
}
.contact-list-item:nth-child(1) {
    margin-top:1rem;
}
.contact-list-item img {
    width:25px;
}
.contact-section .testimonials-bottom-left img {
    height:100%;
}
.contact-section .testimonials-bottom-right > p {
    font-size:30px;
    max-width:25ch;
    line-height:1;
}
.contact-section a {
    align-self:flex-start !important;
    color:white;
}
.testimonials-bottom-left {
    position: relative;
    width:50%;
}
.testimonials-bottom-left > img {
    position:absolute;
    width:100%;
    inset:0;
    object-fit:cover;
    height:100%;
}

.testimonials-middle {
    height:400px;
    overflow-y:hidden;
    align-items: flex-end;
}






@media (max-width:1282px) {
    .testimonials-bottom {
        flex-direction:column;
        width:100%;
    }
    .testimonials-section .wrapper {
        gap:2rem;
    }
    
    .testimonials-middle {
        align-self: flex-start;
        width:100%;
    }
    .testimonials-middle p {
        max-width:25ch;
    }
    .testimonials-bottom-left {
        width:100%;
        display:flex;
        align-items: flex-end;
        justify-content: center;
    }
    .testimonials-bottom-right {
        width:100%;
    }
    .testimonials-bottom-left img {
        z-index:1000;
        position:static;
        width:100%;
    }
    .testimonials-bottom-right p {
        font-size:var(--mobile-text);
    }
    .testimonials-bottom-right {
        padding-inline:1rem;
    }
    .nav-arrows {
        z-index:10000;
    }

    .testimonials-mixed {
        flex-direction: column;
        align-items: flex-start;
        margin-top:0rem;
    }
  
    
}
@media (max-width:700px) {
    .testimonials-section .wrapper {
        padding-inline:2rem;
    }
}
@media (max-width:500px) {
    .testimonials-section .wrapper {
        padding-inline:1rem;
    }
    .contact-section .testimonials-middle p {
        font-size:var(--mobile-heading-two) !important;
    }
    .testimonials-titles h2 {
        font-size:var(--mobile-heading-two);
    }
}
/* Gallery */

.gallery-section .wrapper {
    display:flex;
    flex-direction: column;
    align-items: flex-start;
    gap:4rem;
    position:relative;
}
.gallery-section .blob {
    top:20%;
    position:sticky;
    left:100% !important;
}

.gallery-titles {
    padding-block:1rem;
    border-top:1px solid white;
    border-bottom:1px solid white;
    width:100%;
    padding-inline:4rem;
}
.gallery-titles h2 {
    font-size:var(--heading-two);
    line-height:1;
}

.gallery-middle {
    width:100%;
    padding-inline:4rem;
    display:flex;
    flex-direction: column;
    align-items: flex-start;
    gap:4rem;
    
}
.middle-top p {
    font-size:25px;
    font-weight:600;
    max-width:30ch;
}
.middle-grid {
    display:grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap:2rem;
    padding-bottom:12rem;
}
.middle-grid-card {
    padding:2rem;
    background-color:#2b2b2c;
    display:flex;
    flex-direction: column;
    align-items: flex-start;
    gap:1rem;
}
.middle-grid-card p:nth-of-type(1) {
    font-weight:700;
    font-size:25px;
    line-height:1.2;
}

.gallery-grid {
    width:100%;
    padding:4rem;
    display:grid;
    grid-template-columns: 1fr;
    place-items:center;
    gap:32rem;
}
.gallery-grid-item p {
    font-size:35px;
    line-height:1.3;
    position:absolute;
    font-family:customFont;
    z-index:1;
    font-weight:5300;
    bottom:2rem;
    left:2rem;
    max-width:25ch;
}
.gallery-grid-item {
    position:relative;
}
.gallery-grid img {
    transform:translateY(12rem);
    opacity:0;
}

.gallery-grid-item img {
    width:97%;
    
}
.gallery-section {
    position:relative;

}
.gallery-section .wrapper {
    padding-inline:0;
}
.gallery-grid {
    place-items:center !important;
    place-content:center !important;

}



.absolute {
    position:sticky;
    top:0%;
    width:100%;
   
}
.filmed {
    width:100%;
    opacity:0.2;
}
.none {
    display:none;
}
@media (max-width:1246px) {
    .middle-grid {
        grid-template-columns: 1fr;
    }
}
@media (max-width:1025px) {
     
   
    .gallery-grid-item p {
        max-width:18ch;
    }
    .gallery-titles {
        padding-inline:4rem;
    }
    .gallery-middle {
        padding-inline:4rem !important;
    }
    .gallery-grid {
        padding-inline:2rem  !important;
    }
}
@media (max-width:751px) {
    .gallery-grid-item p {
        max-width:15ch;
    }
}
@media (max-width:700px) {
   
    .gallery-titles {
        padding-inline:2rem !important;
    }
    .gallery-middle {
        padding-inline:2rem !important;
    }
    .gallery-grid {
        padding-inline:1rem !important;
    }
 
    .gallery-grid p {
        font-size:35px;
    }
    .filmed {
        display:none;
    }
    .none {
        display:block !important;
        position:sticky;
        top:0%;
        width:100%;
    }
    
    
}
@media (max-width:665px) {
    .gallery-grid-item p {
        max-width:20ch;
        font-size:22px;
    }
}
@media (max-width:553px) {
    .gallery-grid p {
        font-size:20px;
        max-width:18ch;
    }
}
@media (max-width:500px) {
   
    .gallery-titles h2 {
        font-size:var(--mobile-heading-two);
    } 
    .middle-top p {
        font-size:25px !important;
    }
    .gallery-middle p {
        font-size:var(--mobile-text);
    }
    .gallery-titles {
        padding-inline:1rem !important;
    }
    .gallery-middle {
        padding-inline:1rem !important;
    }
}
@media (max-width:448px) {
    .gallery-grid p {
        font-size:20px;
    }
    .gallery-grid-item p {
        left:1rem;
        right:1rem;
    }
}
@media (max-width:395px) {
    .gallery-grid p {
        font-size:16px;
        max-width:85%;
    }
    .gallery-grid-item p {
        left:1rem;
    }
}

.pink {
    padding-left:0;
    margin-top:2rem;
    color:var(--pink);
}
.pink img {
    width:35px;
}


video {
    position:absolute;
    width:100%;
    z-index:-2;
    mix-blend-mode:screen;
    opacity:0.15;
    inset:0;
    object-fit:cover;
    height:100%;
}

/* Clicker */

.clicker-section {
    background-color:white;
    color:black;
}
.clicker-section .wrapper {
    position:relative;
    padding-top:6rem;
}
.clicker-right h2 {
    font-size:var(--heading-two);
    margin-top:8rem;
}
.clicker-left {
    width:50%;
    padding-block:6rem;
    display:flex;
    align-items: center;
    justify-content: center;
}
.clicker-right {
    width:50%;
    display:flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap:1rem;
}
.clicker-right button {
    margin-top:1rem;
}
.clicker-left img {
    width:100%;
}
.top-bar {
    position:absolute;
    background-color:#ffffff;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
    display:flex;
    align-items: center;
    justify-content: center;
    gap:3rem;
    left:50%;
    transform:translateX(-50%);
    padding:1rem 4rem;
    top:1rem;
    width:91.2%;
    z-index:9;
}

.clicker-right ul {
    display:grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap:0.5rem;
}
.clicker-right li {
    font-weight:700;
    font-size:var(--text);
}

.highlight {
    border-bottom:4px solid var(--pink) !important;
    transition:500ms;
}

.top-bar img {
    cursor:pointer;
    width:50px;
    transition:500ms;
    padding-block:0.5rem;
    transition:500ms;
}

.top-bar .icon-container:nth-of-type(9) img {
    width:30px !important;
}
.clicker-content {
    position:relative;
    min-height:520px;
    height:auto;
}
.clicker-absolute {
    width:100%;
    display:flex;
    align-items: flex-start;
    gap:2rem;
    position:absolute;
    inset:0;
    opacity:0;
    transition: opacity 800ms;
    pointer-events:none;
}
.current-click {
    opacity:1;
    pointer-events:all;
}

.clicker-price-card {
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
    display:flex;
    flex-direction: column;
    align-items: flex-start;
    gap:0.5rem;
    padding:1rem;
    width:50%;
}
.clicker-price-card p:nth-of-type(1) {
    font-size:var(--text) !important;
    line-height:1;
    margin-bottom:-1rem;
}
.clicker-price-card p:nth-of-type(2) {
    font-size:80px;
    font-weight:900;
    line-height:1;
}
.clicker-right button {
    font-size:18px;
    padding-left:0;
}
.clicker-left {
    display:flex;
    width:50%;
    align-items: center;
    justify-content: center;
}
.clicker-left img {
    width:100%;
}
.clicker-right h2 {
    line-height:1;
}
.clicker-right {
    justify-content: flex-end !important;
}

.clicker-absolute button {
    background-color:var(--pink);
    padding:0.5rem 2rem;
}

.arrow {
    position:absolute;
    top:37.5%;
    transform:translateY(-50%);
    z-index:10;
    display:none;
    width:60px;
    cursor:pointer;
}
.nextArrow {
    right:0;
}
.prevArrow {
    left:0;
}

.pagination {
    position:absolute;
    bottom:7%;
    width:max-content;
    display:flex;
    align-items: center;
    justify-content: center;
    gap:1rem;
    z-index:11;
    left:25%;
    transform:translateX(-45%);
}
.clicker-content {
    position:relative;
}
.pagination button {
    width:1rem;
    height:1rem;
    border-radius: 100%;
    border:none;
    background-color:rgba(0, 0, 0, 0.345); 
}
.pagination .highlighted {
    background-color:black !important;
}

@media (max-width:1246px) {
     .top-bar {
       display:none;
    } 
    .arrow {
    display:block;
    }
    .clicker-absolute {
        flex-direction: column;
        align-items: center;
    }
    .clicker-right {
        gap:1rem;
        align-items: flex-start !important;
        justify-content: flex-start !important;
        width:100%;
        gap:2rem;
        margin-top:0;
    }
    .clicker-left {
        padding-block:0;
        width:100%;
    }
    .clicker-right h2 {
        margin-top:2rem;
    }
   
    .clicker-absolute {
        gap:0;
    }

    .clicker-section .wrapper {
       min-height:1350px;
    }
    .newone {
        display:block;
    }
    .pagination {
        left:50%;
        transform:translateX(-50%);
        top:35%;
    }
}
@media (max-width:1155px) {
    .pagination {
        top:20%;
    }
}
@media (max-width:1063px) {
    .clicker-section .wrapper {
        min-height:1250px;
    }
}
@media (max-width:952px) {
    .pagination {
        top:10%;
    }
}
@media (max-width:868px) {
    .pagination {
        top:2%;
        
    }
}
@media (max-width:805px) {
    .clicker-section .wrapper {
        min-height:1150px;
    }
    .pagination {
        top:6%;
        
    }
}
@media (max-width:747px) {
    .pagination {
        top:45% !important;
        bottom:auto;  
    }
   
}

@media (max-width:700px) {
    .clicker-section .wrapper {
        padding-inline:2rem;
    }
    .clicker-right h2 {
        font-size:var(--mobile-heading-two);
    }
    .clicker-right p {
        font-size:var(--mobile-text);
    }
    .pagination {
        top:45% !important;
        bottom:auto;  
    }
   
}
@Media (max-width:610px) {
    .pagination {
        top:44% !important;
    }
}
@media (max-width:589px) {
    .clicker-section .wrapper {
        min-height:975px;
    }
}

@media (max-width:500px) {
    .clicker-section .wrapper {
        padding-inline:1rem;
    }
   
}
@media (max-width:454px) {
    .pagination {
        top:40%  !important;
        bottom:auto;
        gap:0.5rem; 
    }
    .nextArrow,
    .prevArrow {
        width:50px;
    }
    .pagination button {
        height:0.75rem;
        width:0.75rem;
    }
    .clicker-section .wrapper {
        min-height:1000px;
    }
}
@media (max-width:422px) {
    .pagination {
        top:36% !important;
        bottom:auto;
        gap:0.5rem; 
    }
    .arrow {
        top:25%;
    } 
}
@media (max-width:403px) {
    .clicker-section .wrapper {
        min-height:1050px;
    }
    .pagination {
        top:33% !important;
        bottom:auto;
        gap:0.5rem; 
    }
}
@media (max-width:374px) {
    .pagination {
        top:31% !important;
        bottom:auto;
        gap:0.5rem; 
    }
    .arrow {
        top:25%;
    } 
    .clicker-right {
        gap:1rem;
    }
}
@media (max-width:336px) {
    .pagination {
        top:30% !important;
        bottom:auto;
        gap:0.5rem; 
    }
    .arrow {
        top:25%;
    } 
}
@media (max-width:297px) {
    .pagination {
        top:24.5% !important;
        bottom:auto;
        gap:0.4rem;

    }
    .arrow {
        top:25%;
    } 
    .pagination button {
        height:0.5rem;
        width:0.5rem;
    }
    .clicker-section .wrapper {
        min-height:1100px;
    }
}
/* New Testimonials */

.reviews-section {
    background-color:var(--black);
    /* background-blend-mode: overlay; */
    background-image:linear-gradient(to left, #030303, #03030300 ),linear-gradient(to right, #030303, #03030300 ),url(visual-png/girlblend.png);
    background-size:cover;
    background-repeat:no-repeat;
    z-index:0;
    position:relative;
}

.reviews-section .wrapper {
    display:flex;
    flex-direction: column;
    align-items: flex-start;
    gap:4rem;
    padding-bottom:6rem;
}
.reviews-section .wrapper > p {
    max-width:60ch;
}
.review-cards {
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap:2rem;
}
.review-card {
    background-color:#FFFFFF45;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding:2rem 1rem;
    display:flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    gap:1rem;
}

   
.review-card button {
    padding:0 !important;
    margin:0 !important;
}
.review-card p:nth-of-type(1) {
    font-weight:700;
    font-size:30px;
    line-height:1;
}
.review-card p:nth-of-type(2) {
    font-weight:300;
    font-size:var(--text);
    line-height:1.5;

}
@media (max-width:1246px) {
    .review-cards {
        grid-template-columns: 1fr;
    }
}
@media (max-width:700px) {
    .reviews-section .wrapper {
        padding-inline:2rem;
    }
    .review-card p:nth-of-type(1) {
        font-size:25px;
    }
    .review-card p:nth-of-type(2) {
        font-size:var(--mobile-text);
    }
    .reviews-section .wrapper > p {
        font-size:var(--mobile-text);
    }
}
@media (max-width:500px) {
    .reviews-section .wrapper {
        padding-inline:1rem;
    }
}

/* Joe */

.joe-section {
    background-color:white;
    color:white;
    position: relative;
    z-index:0;
    overflow:hidden;

}

.joe-section .wrapper {
    display:flex;
    align-items: center;
    gap:4rem;
}
.joe-left img {
    width:100%;
}
.joe-right {
    width:70%;
}
.joe-left {
    width:30%;
}
.joe-right {
    display:flex;
    flex-direction: column;
    align-items: flex-start;
    gap:2rem;
}
.joe-right h2 {
    font-size:var(--heading-two);
    line-height:1;
    text-transform:none;
}
.joe-right p {
    max-width:90%;
}
.joe-right button {
    padding-top:0;
    margin-top:0;
    background-color:transparent;
    color:white;
    border:none;
}

.splat {
     position:absolute;
     top:50%;
     left:50%;
     transform:translate(-50%, -50%);
     width:110%;
     z-index:-1;
}

@media (max-width:1246px) {
    .joe-section .wrapper {
        flex-direction: column;
        align-items: center;
        /* color:black; */
    }
    .png-film {
        width:100%;
        right:-40%;
        top:0;
        bottom:0;
    }
    .joe-left {
        display:flex;
        align-items: center;
        justify-content: center;
    }
    .joe-left img {
        width:75%;
        align-self:center;
    }
    .joe-right,
    .joe-left {
        width:100%;
    }
   
    .splat {
        width:350%;
        top:82%;
    }
  
}



@media (max-width:700px) {
    .joe-section .wrapper {
        padding-inline:2rem;
        gap:2rem;
    }
    .splat {
        width:450%;
        top:82%;
    }
    .joe-right {
        gap:1rem;
    }
    .joe-right h2 {
        font-size:var(--mobile-heading-two);
    }
    .joe-right p {
        font-size:var(--mobile-text);
    }
}



@media (max-width:500px) {
    .joe-section .wrapper {
        padding-inline:1rem;
    }
    .splat {
        width:550%;
        top:82%;
    }
}

@media (max-width:425px) {
    .splat {
        width:750%;
       
    }
}
@media (max-width:350px) {
    .splat {
        width:1000%;
       
    }
}
@media (max-width:284px) {
    .splat {
        width:1200%;
       
    }
}


button,
a {
    cursor:pointer;
}

span {
    color:var(--pink)
}

.ul {
    display:flex !important;
    flex-direction: column !important;
    align-items: flex-start;
}

.ul li {
    font-weight:600;
}

/* Animations */

h1 span {
    transform:translateY(4rem);
    display:block;
    position:static;
    animation: pink-slide 1200ms forwards ease;
    opacity:0;
}
.notspan {
    color:white;
    animation:white-slide 1000ms forwards ease;
    transform:translateY(0rem) translateX(-4rem);
    opacity:0;

}

@keyframes pink-slide {
    100% {
        transform:translateY(0rem);
        opacity:1;
        
    }
}
@keyframes white-slide {
    100% {
        transform:translateX(0rem);
        opacity:1;
        
    }
}

/* h1 {
    transform:translateY(-4rem)
} */

.contact-list a:nth-child(1) {
    width:100%;
}

.contact-list a:nth-child(1) p {
    line-height:1;
    width:100%;
}
@media (max-width:316px) {
    .contact-list a p {
        word-wrap:wrap;
        font-size:16px;
    }
}

.with-love {
    width:100%;
}