/*Typography*/
::selection {
    background: var(--color-primary);
    color: white;
}


html {
    font-size: 62.5%;
    overflow-x: hidden
    
}

*,
*::after,
*::before {
    box-sizing: border-box;
}

:root {
    --color-primary: #565264;
    --color-secondary: #a6808c;
    --color-accent: #a16238;
    --color-headings: #1b0760;
    --color-body: #918ca4;
    --color-body-darker:  #5c5577;
    --color-border: #ccc;
    --color-background: #001219; 
    --color-new: #d0a684;
    --color-instagram: #E4405F;
}

body {

    font-family: inter, Arial, Helvetica, sans-serif;
    font-size: 2rem;
    line-height: 1.5;
    color: var(--color-body);
    position: relative;
    overflow: hidden;
    margin-bottom: 0;
}

h1, h2, h3 {
    color: var(--color-headings);
    margin-bottom: 1rem;
    line-height: 1.1;
}

h1 {
    font-size: 7rem;
}

h2 {
    font-size: 4rem;
}

h3 {
    font-size: 3rem;
    font-weight: 500;
    
}

p {
    margin-top: 0;
    padding: 1rem;
    font-size: 2rem;
}

a {
    cursor: pointer;
}

@media screen and (min-width:1024px) {
    body {
        font-size: 1.8rem;
    }

    h1 {
        font-size: 8rem;
    }

    h2 {
        font-size: 6rem;
    }

    h3 {
        font-size: 2.4rem;
    } 
}

/*Links*/

a {
    text-decoration: none;
}

.link-arrow {
    color: var(--color-accent);
    text-transform: uppercase;
    font-size: 2rem;
    font-weight: bold;
}

.link-arrow::after {
    content: '-->';
    margin-left: 5px;
    transition: margin 0.2s;
}

.link-arrow:hover::after {
    margin-left: 10px;
}

@media screen and (min-width: 1024px) {
    .link-arrow {
        font-size: 1.5rem;
    }
}

/*Badges*/

.badge {
    border-radius: 20px;
    font-size: 2rem;
    font-weight: 600;
    padding: 0.5rem 2rem;
    white-space: nowrap;
}

.badge--primary {
    background: var(--color-primary);
    color: #fff;
}

.badge--secondary {
    background: var(--color-secondary);
    color: #fff;
}

.badge--small {
    font-size: 1.6rem;
    padding: 0.5rem 1.5rem;
}

@media screen and (min-width: 1024px) {
    .badge {
        font-size: 1.5rem;
    }

    .badge--small {
        font-size: 1.2rem;
    }
}

/*Lists*/

.list {
    list-style: none;
    padding-left: 0;
    
}

.list--inline .list__item {
    display: inline-block;
    margin-right: 2rem;
}


.list__item {
    padding-left: 0.5rem;
    margin-bottom: 1rem;
}

@media screen and (min-width:1024px) {
    .list__item {
        padding-left: 0;
    }
}

/*Icons*/

.icon {
    width: 40px;
    height: 40px;
}

.icon-feature {
    width: 80px;
    height: 80px;
}

.icon--small {
    width: 30px;
    height: 30px;
}

.icon--primary {
    fill: var(--color-primary);
}

.icon--footer {
    fill: white;
}

.icon--white {
    fill: #fff;
}

.icon-container {
    background: var(--color-body);
    width: 64px;
    height: 64px;
    border-radius: 100%;
    display: inline-flex;
    justify-content: center;
    align-items: center;
}

.icon-container-feature {
    background: #d6cfcb;
    width: 90px;
    height: 90px;
    border-radius: 100%;
    display: inline-flex;
    justify-content: center;
    align-items: center;
}

.icon-container--accent {
    background: var(--color-accent);
}



/*Buttons*/

.btn {
    border-radius: 40px;
    border: 0;
    cursor: pointer;
    font-size: 1.8rem;
    font-weight: 600;
    margin: 1rem 0;
    padding: 2rem 3rem;
    text-transform: uppercase;
    white-space: nowrap;
    text-align: center;
}

.btn--primary {
    background: var(--color-primary);
    color: var(--color-border);
}

.btn--primary:hover {
    background: #706677;
    color: var(--color-headings);
    transition: color 1s;
}

.btn--secondary {
    background: var(--color-secondary);
    color: #fff;
}

.btn--secondary:hover {
    background: #ccb7ae;
}

.btn--accent {
    background: var(--color-accent);
    color: #fff;
}

.btn--accent:hover {
    background: #dda26e;
    color: var(--color-body-darker);
    transition: color 1s;
}

.btn--outline {
    background: #fff;
    color: var(--color-headings);
    border: 2px solid #705947;
}

.btn--outline:hover {
    background: #705947;
    color: #fff;
}

.btn--stretched {
    padding-left: 6rem;
    padding-right: 6rem;
}

.btn--block {
    width: 100%;
    display: inline-block;
}

@media screen and (min-width: 1024px) {
    .btn {
        font-size: 1.5rem;
    }
}

/*Cards*/

.card {
    background-image: url(../images/logos/logo16.svg);
    background-size: 150%;
    border-radius: 7px;
    box-shadow: 0 0 15px 15px darkgray;
}

.card__header, .card__body {
    padding: 2rem 3rem;
}

.card--primary {
    border: solid var(--color-border);
    color: var(--color-background);
}

.card--primary .card__header {
    background: var(--color-primary);
    opacity: 0.8;
    
}

.card--secondary {
    border: solid var(--color-border);
    color: var(--color-background);
}

.card--secondary .card__header {
    background: var(--color-accent);
    opacity: 0.8;
}


/*Media*/

.media {
    display: flex;
    margin-bottom: 4rem;
}

.media__title {
    margin-top: 0;
}

.media__body {
    margin: 0 2rem;
}

.media__image {
    margin-top: 1rem;
}

/*Quotes*/

.quote {
    position: relative;
    width: 300px;
    font-size: 2.5rem;
    text-align: center;
    margin: 0 auto;
    margin-top: 8rem;
    font-style: italic;
    color: var(--color-body-darker);
    line-height: 1.3;
}

.quote__text::before {
    content: open-quote;
}

.quote__text::after {
    content: close-quote;
}

.quote__author {
    font-size: 3rem;
    font-weight: 500;
    font-style: normal;
    margin-bottom: 0;
}

.quote__organisation {
    color: var(--color-headings);
    opacity: 0.4;
    font-size: 2rem;
    font-style: normal;
}

.quote__line {
    position: relative;
    bottom: -30px;
}

@media screen and (min-width: 1024px) {
    .quote {
        font-size: 2rem;
    }

    .quote__author {
        font-size: 2.4rem;
    }

    .quote__organisation {
        font-size: 1.6rem;
    }
    
}

/*Grids*/

.grid {
    display: grid;
}

@media screen and (min-width: 768px) {
    .grid--1x2 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media screen and (min-width: 1024px) {
    .grid--1x3 {
        grid-template-columns: repeat(3, 1fr);
    }

}


/*Callouts*/

.callout {
    padding: 4rem;
    border-radius: 5px;
}

.callout--primary {
    background: var(--color-primary);
    color: #fff;
}

.callout__heading {
    color: #fff;
    margin-top: 0;
    font-size: 3rem;
}

.callout .btn {
    justify-self: center;
    align-self: center;
}

.callout__content {
    text-align: center;
}

@media screen and (min-width: 768px) {
    .callout .grid--1x2 {
        grid-template-columns: 1fr auto;
    }


    .callout__content {
        text-align: left;
    }
    
    .callout .btn {
        justify-self: start;
        margin: 2rem;
    }
}

/*Collapsibles*/

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

.collapsible__heading {
    margin-top: 0;
    font-size: 3rem;
}

.collapsible__chevron {
    transform: rotate(90deg);
    transition: transform 0.3s;
}

.collapsible__content {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: all 0.3s;
}

.collapsible--expanded .collapsible__chevron {
    transform: rotate(180deg);
}

.collapsible--expanded .collapsible__content {
    max-height: 100vh;
    opacity: 1;
}


/*Blocks*/

.block { 
    /*--padding-vertical: 6rem 0;*/
    padding: var(--padding-vertical) 0.5rem;
    text-align: center;
}

.block__header {
    text-align: center;
    padding: 3rem 0;
}

.block__heading {
    margin-top: 0;
    color: var(--color-background);
}

.block--dark {
    background: var(--color-background);
    color: #7b858b;
}

.block--accent {
    background: var(--color-accent);
}

.block--new {
    background: var(--color-new);
    color: var(--color-background);
}

.block--light {
    background: #fff;
}

.block--dark h1,
.block--dark h2,
.block--dark h3  {
    color: #D6CFCB;
}

.block--skewed-right {
    padding-bottom: calc(var(--padding-vertical) + 4rem);
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 90%);
}

.block--skewed-left {
    padding-bottom: calc(var(--padding-vertical) + 4rem);
    clip-path: polygon(0% 0%, 100% 0%, 100% 90%, 0% 100%);
}

.container {
    max-width: 1140px;
    margin: 0px auto;
    padding: 2rem;
    position: relative;
    top: -3rem;
}



/*Navigation bar*/

.nav {
    background: transparent;
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    padding:  1rem;  
    
}

.nav__header {
    font-weight: 50;
    color: var(--color-body);
}

.nav__list {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    margin: 0;
}

.nav__item {
    padding: 0.5rem 2rem;
    /*border-bottom: 1px solid #222;*/
    border-top: 4rem;
    position: relative;
}

.nav__item>a {
    color: var(--color-primary);
    transition: color 2s;
}

.nav__item>a:hover {
    color: var(--color-border);
}

.nav__toggler {
    opacity: 0.6;
    transition: box-shadow .4s;
}

.nav.collapsible--expanded .nav__toggler {
    opacity: 1;
}

.nav__brand {
    transform: translateY(5px);
}



@media screen and (min-width: 768px) {
    .nav {
        display: flex;
        justify-content: space-evenly; 
    }

    .nav__toggler {
        display: none;
        justify-content: flex-start;
    }

    .nav__list {
        width: auto;
        display: flex;
        flex-direction: row;
        justify-items: flex-start;
        font-size: 1.5rem;
        max-height: 100%;
        opacity: 1;
    }

    .nav__item {
        border: 0;
        word-spacing: 4rem;
    }

} 







/*Hero*/


.hero__container {
    max-width: 1140px;
    margin: 0 auto;
}



.hero__logo {
    max-width: 250px;
    position: relative;
    top: -3rem;
    opacity: 0.8;
}

.name__logo {
    max-width: 200px;
    position: relative;
    top: -4rem;
    opacity: 0.7;
}

.hero__quote{
    position: relative;
    top: -4.5rem;
    opacity: 0.6;
}

.hero__quote-text {
    font-size: 1.5rem;
  
}

.hero__tagline {
    font-size: 3rem;
    font-weight: 700;
    color: var(--color-body-darker);
    margin: 5rem 0 0;
}

.hero__p {
    font-size: 2rem;
    font-weight: 600;
    color: var(--color-body-darker);
}

.hero__image {
    width: 100%;   
}

.hero__background {
    position: absolute;
    top: -13rem;
    left: -12rem;
    z-index: -1;
    opacity: 0.3;
}

.hero__content .btn {
    font-size: 1.2rem;
    position: relative;
    bottom: 4.5rem;
    
}

.booking-buttons_hero {
    display: flex;
    justify-self: center;
    justify-content: center;
    gap: 3.5rem;
}



@media screen and (min-width: 400px) {
    .hero__content {
        display: flex;
        align-items: center;
        flex-direction: column;
    }   
}


@media screen and (min-width: 768px) { 
    .hero-container{
        display: grid;
        grid-template-columns: repeat(1, 1fr);
    }

    .hero__nav{
        position: absolute;
        width: 100%;
        z-index: 999;
        height: 20rem;
    }

    .hero__logo {
        min-width: 300px;
    }

    .name__logo {
        min-width: 245px;
        position: relative;
        top: -2rem;
    }

    .hero__quote{
        position: relative;
        top: -4rem;
    }

    .hero__tagline {
        font-size: 5rem;
        font-weight: 600;
        position: relative;
        top: 4rem;
    }

    .hero__p {
        font-size: 2rem;
        color: var(--color-body-darker);
        font-weight: 700;
        position: relative;
        top: 3.5rem;
    }

    .hero__image {
        width: 100%;  
    }

    .hero__content {
        display: grid;
        justify-items: center;
        position: relative;
        top: 7rem;
    }

    .hero__content .btn {
        position: relative;
        top: -7rem;
        font-size: 1.5rem;
    }

    .booking-buttons_hero {
        display: flex;
        justify-self: center;
        gap: 6rem;
    }

    .hero__background {
        position: absolute;
        width: 1000px;
        top: -13rem;
        left: -12rem;
        z-index: -1;
        opacity: 0.3;
    }

    .hero__background-image {
        width: 730px;
    }
    
}

@media screen and (min-width: 1024px) {
    .hero-container {
        grid-template-columns: repeat(2, 1fr);
    }

    .hero__nav{
        width: 50%;
    }

    .hero__image {
        z-index: -2;
        height: 100%;
    }

    .hero__logo {
        min-width: 200px;
        position: relative;
        right: 13rem;
        top: 2rem;
    }

    .name__logo {
        min-width: 240px;
        top: -17rem;
        right: -12rem;
    }

    .hero__quote{
        position: relative;
        top: -19rem;
    }

    .hero__quote-text{
        font-size: 1.5rem;
    }

    .hero__tagline {
        font-size: 7rem;
    }

    .hero__p {
        font-size: 3rem;
    }

    .hero__content .btn {
        top: -9.5rem;
        font-size: 1.2rem;
    }

    .hero__background-image {
        position: relative;
        top: 6rem;
        left: 0rem;
        width: 82rem;
    }

    
}

   /*Showcase Block*/

.showcase__header {
    margin-top: 0;
    font-size: 2.5rem;
    color: var(--color-body-darker);
}

.block-showcase__image > img {
    width: 100%;  
}

.block-showcase__image {
    opacity: 0.9;
}

.block-showcase {
    color: var(--color-body-darker);
    position: relative;
    bottom: 35.5rem;
    z-index: -2;
    background: var(--color-border);
}

.showcase__background-image {
    position: absolute;
    width: 500px;
    top: 60rem;
    left: 1rem;
    z-index: -1;
    opacity: 0.04;
    overflow-x: hidden;
}

.showcase__paragraph4 {
    padding-bottom: 10rem;
}

@media screen and (min-width: 768px) {
    .block-showcase .grid {
        grid-template-columns: repeat(1, 1fr);
    }

    .block-showcase {
        position: relative;
        top: -42rem;
    }

    .showcase__header {
        padding-top: 6rem;
        font-size: 3rem;
    }

    .block-showcase__image > img {
       width: auto;
       max-width: 700px;
   }

   .list__item1 {
       margin-top: 2rem;
   }

   .showcase__background-image {
       position: absolute;
       width: 84rem;
       top: 48rem;
       left: -7rem;
       z-index: -1;
       opacity: 0.05;
   }  
}

@media screen and (min-width:1024px) {
    .block-showcase .grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .showcase__background-image {
        left: 41rem;
    }

    .block-showcase {
       position: relative;
       bottom: 1.5rem;
   }

   .block__header {
       padding: 9rem 0;
   }

   .showcase__header {
       font-size: 4rem;
   }

   .block-showcase .media {
       position: relative;
       top: -5rem;
   }
}

/*Features*/

.feature__header {
    margin-top: 0;
    color: var(--color-body);
    padding-top: 4rem;
}

.feature__heading {
    margin: 1rem 0;
}

.feature {
    gap: 4rem 2rem;
    margin: 12rem 0;
}

.feature__container {
    position: relative;
    top: -70rem;
}

.feature:first-of-type {
    margin-top: 0;
}

.feature__content {
    text-align: center;
    border: 1px solid;
    border-radius: 2px;
    padding: 1rem;
}

.feature__image {
    width: 90%;
    opacity: 0.9;
}


.feature__background {
    position: absolute;
    visibility: hidden;
}

@media screen and (min-width: 768px) {
    .feature__container .grid {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
    }

    .feature__header {
        margin-bottom: 4rem;
    }   
}


@media screen and (min-width: 1024px) {
    .feature:nth-of-type(even).feature__image {
        order: 2; /*not working?*/
    }
    .feature__content:nth-child(3n+1) {
        grid-column: 1; /* Forces the first column for items that are 1, 4, 7... */
    }

    .feature:first-of-type {
        margin-top: 2rem;
    }

    .feature__container {
        width: 85%;
    }

    .feature__container .grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }

    .feature__background {
        position: absolute;
        visibility: visible;
        top: 140rem;
        left: -11rem;
        width: 1276px;
        z-index: -1;
    }
    
    .feature__background-image {
        width: 100%;
        opacity: 0.1;
    }

    .feature__background_name__logo {
        opacity: 0.2;
        width: 90%;
        position: relative;
        left: 3rem;
        top: 14rem;
    }

    .feature__header {
        padding-top: 2rem;
        padding-bottom: 4rem;
        font-size: 6rem;
    }

    .feature__heading {
        font-size: 3rem;
    }

    .feature__content>p {
        font-size: 2.5rem;
    }

}

/*Plans*/

.plan {
    margin: 0rem 0rem;
    margin-bottom: -5rem;
    transition: transform .5s ease-out;
}

.plan_link a {
    color: var(--color-body);
    font-size: 2.1rem;
}

.plan__list {
    list-style-type: none;
    padding-left: 0;
}

.plan__name {
    color: var(--color-background);
    margin: 0;
    font-weight: 500;
    font-size: 6rem;
}

.plan__price {
    font-size: 3rem;
    
}

.price__cycle {
    font-size: 2rem;
    font-weight: 500;
    opacity: 0.8;
    margin-right: 1rem;
}

.plan__description {
    font-size: 1.5rem;
    font-weight: 500;
    letter-spacing: 1px;
    display: block;
}

.plan .list__item {
    margin-bottom: 2rem;
    color: var(--color-background);
    border-radius: 10px;
    opacity: 0.9;
}



@media screen and (min-width: 768px) {
    .plan{
        position: relative;
        left: -4rem;
    }
}



@media screen and (min-width: 1024px) {
    .plan {
        width: 45%;
        position: relative;
        left: -4rem;
    }

    .plan__name {
        font-size: 6rem;
    }

    .plan__price {
        font-size: 4rem;
    }

    .price__cycle {
        font-size: 1.6rem;
        font-weight: 500;
    }

    .plan__description {
        font-size: 1.7rem;
    }



    .plan:hover {
        transform: scale(1.05);
    }
    

    
}

/*Plans Block*/

.block-plans {
    position: relative;
    top: -100rem;
    background: var(--color-border);
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
}

.block-plans .hero__background {
    position: absolute;
    z-index: -1;
}

.block-plans .grid {
    gap: 8rem 4rem;
    padding: 1rem;
}

.block-plans .card {
    margin: 1rem;
    margin-top: 5rem;
    margin-bottom: 10rem;
    position: relative;
    top: -4rem;

}

.block-plans {
    padding: 0;
}

.block__plan__header {
    font-size: 3.5rem;
    color: var(--color-body-darker);
    font-weight: 600;
    text-align: center;
    margin: 0rem 1rem 1rem;
}

@media screen and (min-width: 768px) {
    .block-plans {
        position: relative;
        top: -100rem;
    }

    .block-plans .grid {
        grid-template-columns: repeat(1, 1fr);
    }


    .block-plans .card {
        min-width: 60rem;
        position: relative;
        left: 4rem;
        top: -5rem;
    }

    .block__plan__header {
        font-size: 4.5rem;
    }
}

@media screen and (min-width: 1024px) {
    .block-plans {
        height: 137rem;
        position: relative;
        top: -65rem;
    }
    
    .block-plans .card {
            min-width: 40rem;
            position: relative;
            right: 2rem;
            margin: 4rem;    
    }

    .block-plans .grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0;
        display: flex;
        justify-content: center;
        
    }

    .block-plans.container {
        width: 100%;
        height: 145rem;
        position: relative;
        top: -64rem;
    }

    .block__plan__header {
        padding: 0;
        font-size: 5rem;
    }

    .block-plans p {
        padding: 0;
        margin-top: 0;
        margin-bottom: 0;
    }

}

/*Testimonial*/

.testimonial {
    padding: 1rem;
    position: relative;
    margin-bottom: 8rem;
    height: 100%;
}

.testimonial__image {
    position: relative;
    width: 100%;
}

.testimonial__image > img {
    position: relative;
    width: 100%;
    border: 10px solid var(--color-body);
    border-radius: 10px;
}

.testimonial__image > .icon-container {
    position: absolute;
    top: 3rem;
    right: -32px;
}

.testimonial__block {
    position: relative;
    top: -102rem;
}

.testimonial_title {
    color: var(--color-body-darker);
    font-size: 5rem;
}

.testimonial__button {
    position: relative;
    

}



/*Testimonial Block*/

@media screen and (min-width:768px) { 
    .testimonial__block .grid {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
    }

    .testimonial .quote, .testimonial .quote__author {
        font-size: 2.4rem;
        width: 100%;
        padding: 2rem 4rem;
    }

    .testimonial__image {
        max-width: 55rem;
        position: relative;
        left: 8rem;
        top: 5rem;
        margin-bottom: 9rem;
    }

    .testimonial__button {
        position: relative;
        top: -1rem;
    }
}


@media screen and (min-width: 1024px) {
    .testimonial__block {
        top: -69rem;
    }

    .testimonial__block .grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }

    .testimonial_title {
        font-size: 6rem;
        margin-bottom: 6rem;
    }

    .testimonial__image {
        left: 2rem;
    }

    .testimonial .quote {
        left: 4rem;
    }

    .testimonial__button {
        position: relative;
        left: -2rem;
        top: -1rem;
        width: 33rem;
        z-index: 1;
    }

    .quote__text {
        margin: 1rem;
        margin-top: 5rem;
        width: 400px
    }
}
 

/*Footer*/

.footer {
    position: relative;
    top: -108rem;
    margin-bottom: 0;
}

.footer__heading a {
    transition: 0.5s;
}

.footer__heading {
    transition: 0.5s;
}

.footer__heading a:hover {
    color: var(--color-border);
}

.footer__heading:hover {
    color: var(--color-border);
    transition: 0.3s;
}

.footer__section {
    padding: 1rem;
    line-height: 2rem;
    font-size: 2rem;   
}

.footer__heading {
    color: black;
}

.footer__heading a {
    color: black;
}

.footer__section .list {
    margin: 0;
    text-align: left;
}

.footer__section .list__item a {
    font-size: 2rem;
    padding: 0.5rem;
    margin-left: 0.5rem;
    line-height: 3rem;
    color: var(--color-body);
}

.footer__section .list__item a:hover {
    color: var(--color-body-darker);
}

.footer__heading {
    text-transform: uppercase;
    font-weight: 600;
}

.footer__brand {
    margin-top: 5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
}



.footer-hero__logo {
    width: 20rem;
}

.footer-name__logo {
    width: 20rem;
}

.footer__copyright {
    font-size: 1rem;
    color: var(--color-body-darker);
}

.footer__section .icon-container {
    height: 60px;
    width: 60px;
    position: relative;
    right: 1rem;
}

.footer__icon {
    height: 60px;
    width: 60px;
}



@media screen and (min-width:768px) {
    .footer  {
        position: relative;
        bottom: 100rem;
    }

    .footer .collapsible__chevron {
        display: none;
    }

    .footer .collapsible__content {
        opacity: 1;
        max-height: 100%;
        font-size: 1.6rem;
        line-height: 5rem;
    }

    .footer__sections {
            display: flex;
            position: relative;
            top: 10rem;
            justify-items: center;
            grid-template-columns: repeat(3, 1fr, auto);
            justify-content: space-evenly;   
    }

    .collapsible__header {
        display: flex;
        justify-content: center;
    }

    .footer__heading {
        font-size: 2.5rem;
    }

    .footer__section, .list__item  {
        text-align: center;
    }

    .footer__section .list__item a {
        font-size: 1.5rem;
        line-height: 5rem;
    } 
    
    .footer__logo {
        width: 200px;
    }

    .footer__brand {
        position: absolute;
        bottom: -35rem;
        
    }

    .footer__copyright {
        font-size: 1rem;
        position: relative;
        bottom: 2rem;
    } 

    .footer__section .icon-container {
        height: 30px;
        width: 30px;
    }

    .footer__icon {
        height: 20px;
        width: 20px;
    }

    
}

@media screen and (min-width:1024px) {
    .footer__sections {
        display: grid;
        position: relative;
        top: 35rem;
        justify-items: center;
        grid-template-columns: repeat(3, 1fr); /* Example: 3 equal columns */
        grid-template-rows: auto; /* Rows will adjust based on content */
    }

    .home {
        grid-column: 1; /* Place in the first column */
        grid-row: 1; /* Place in the first row */
    }

    .contact_ {
        grid-column: 2; /* Place in the first column */
        grid-row: 1; /* Place in the first row */
    }

    .location {
        grid-column: 3; /* Place in the first column */
        grid-row: 1; /* Place in the first row */
    }

    .collapsible__header {
        display: flex;
        justify-content: center;
    }

    .footer__heading {
        font-size: 2.5rem;
    }

    .footer__section, .list__item  {
        text-align: center;
    }

    .footer__section .list__item a {
        font-size: 1.5rem;
        line-height: 5rem;
    } 
    
}

/*section dividers*/

.block-divider1 {
    height: 16rem;
    width: 100%;
    position: relative;
    top: -12rem;
    left: 0rem;
    z-index: 3;
    background: darkgrey;
    clip-path: polygon(0% 80%, 100% 50%, 380% 1%, 0% 100%);
    margin: 0;
    padding: 0 0;
}


@media screen and (min-width: 768px) {
    .block-divider1 {
        height: 16rem;
        top: -13rem;
    }   
}


@media screen and (min-width:1024px) {
    .block-divider1 {
        height: 16rem;
        top: -12rem;
    }

}


 

.block-divider2 {
    height: 18rem;
    width: 100%;
    position: relative;
    top: -30rem;
    background: #808080ff;
    clip-path: polygon(0% 60%, 100% 10%, 100% 60%, 0% 100%);
    margin-bottom: 0;
    padding: 0rem 0rem;
    z-index: -1;
}


@media screen and (min-width: 768px) {
    .block-divider2 {
        top: -32rem;
        height: 19rem;
    }
}

@media screen and (min-width: 1024px) {
    .block-divider2 {
        top: -30rem;
        height: 18rem;
    }
}


.block-divider3 {
    height: 23rem;
    width: 100%;
    position: relative;
    bottom: 56rem;
    background: #808080ff;
    clip-path: polygon(0 62%, 100% 78%, 100% 100%, 0% 100%);
}

@media screen and (min-width:768px) {
    .block-divider3 {
       height: 16rem;
       bottom: 57rem;
    }
}

@media screen and (min-width:1024px) {
    .block-divider3 {
       height: 16rem;
       bottom: 57rem;
    }
}


.block-divider4 {
    height: 10rem;
    width: 100%;
    position: relative;
    bottom: 65rem;
    background: darkgrey;
    z-index: 1;
    clip-path: polygon(0% 80%, 100% 10%, 400% 60%, 0% 100%);
    margin: 0;
    padding: 0 0;
}

@media screen and (min-width:768px) {
    .block-divider4 {
       height: 10rem;
       bottom: 65rem;
    } 
}

@media screen and (min-width:1024px) {
    .block-divider4 {
       height: 10rem;
       bottom: 65rem;
    } 
}

.block-divider5 {
    height: 10rem;
    width: 100%;
    position: relative;
    bottom: 77rem;
    background: darkgrey;
    z-index: 1;
    clip-path: polygon(0% 80%, 100% 10%, 400% 60%, 0% 100%);
    margin: 0;
    padding: 0 0;
}

@media screen and (min-width: 1024px) {
    .block-divider5 {
        height: 10rem;
        bottom: 42rem;
    }
    
}

.block-divider6 {
    height: 23rem;
    width: 100%;
    position: relative;
    bottom: 98rem;
    z-index: 1;
    background: var(--color-border);
    clip-path: polygon(0 62%, 100% 78%, 100% 100%, 0% 100%);
}

@media screen and (min-width: 1024px) {
    .block-divider6 {
        height: 23rem;
        bottom: 63rem;
    }    
}

/*Review page*/

.testimonial_ {
    padding: 1rem;
    position: relative;
    top: -8rem;
    margin-bottom: 8rem;
    height: 100%;
}

.testimonial__container_ {
    position: relative;
    top: 3rem;
}

.testimonial__image_ {
    position: relative;
    width: 100%;
}

.testimonial__image_ > img {
    position: relative;
    width: 100%;
    border: 1px solid var(--color-body);
    border-radius: 2px;
}

.testimonial__image_ > .icon-container {
    position: absolute;
    top: 3rem;
    right: -32px;
}

.testimonial__block_ {
    position: relative;
    top: -1rem;
}

.testimonial_title_ {
    color: var(--color-body-darker);
    font-size: 5rem;
    position: relative;
    top: -6rem;
}

.testimonial_footer {
    display: flex;
    justify-content: space-between;
    position: relative;
    bottom: 5rem;
}


@media screen and (min-width:768px) { 
    .testimonial__block_ .grid {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
    }

    .testimonial__block_ {
        position: relative;
        top: 4rem;
    }

    .testimonial__container_ {
        position: relative;
        top: 4rem;
    }

    .testimonial_title_ {
        position: relative;
        top: -5rem;
    }

    .testimonial_ {
        position: relative;
        top: -6rem;

    }

    .testimonial_ .quote, .testimonial_ .quote__author {
        font-size: 2.4rem;
        width: 100%;
        padding: 2rem 4rem;
    }

    .testimonial__image_ {
        max-width: 55rem;
        position: relative;
        left: 8rem;
        top: 5rem;
        margin-bottom: 9rem;
    }

    .testimonial__button_ {
        position: relative;
        top: -1rem;
    }
}


@media screen and (min-width: 1024px) {
    .testimonial__block_ {
        top: 0rem;
    }

    .testimonial__block_ .grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }

    .testimonial_title_ {
        margin-bottom: 8rem;
        position: relative;
        top: -3rem;
    }

    .testimonial__image_ {
        left: 2rem;
    }

    .testimonial_ .quote {
        left: 4rem;
    }

    .testimonial__button_ {
        position: relative;
        left: -2rem;
        top: 19rem;
        width: 33rem;
    }

    .quote__text_ {
        margin: 1rem;
        margin-top: 5rem;
        width: 400px
    }
}

/*Reviews Nav*/

.nav_ {
    background: transparent;
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    padding:  1rem;  
    
}

.nav__header_ {
    font-weight: 50;
    color: var(--color-body);
}

.nav__list_ {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    margin: 0;
}

.nav__item_ {
    padding: 0.5rem 2rem;
    /*border-bottom: 1px solid #222;*/
    border-top: 4rem;
    position: relative;
}

.nav__item_>a {
    color: var(--color-primary);
    transition: color 2s;
}

.nav__item_>a:hover {
    color: var(--color-border);
}

.nav__toggler_ {
    opacity: 0.6;
    transition: box-shadow .4s;
    margin-top: 0.5rem;
}

.nav_.collapsible--expanded .nav__toggler_ {
    opacity: 1;
}

.nav__brand_ {
    transform: translateY(5px);
}



@media screen and (min-width: 768px) {
    .nav_ {
        display: flex;
        justify-content: center; 
    }

    .nav__toggler_ {
        display: none;
        justify-content: flex-start;
    }

    .nav__list_ {
        width: auto;
        display: flex;
        flex-direction: row;
        justify-items: flex-start;
        font-size: 2rem;
        max-height: 100%;
        opacity: 1;
    }

    .nav__item_ {
        border: 0;
        word-spacing: 4rem;
        position: relative;
        font-size: 1.4rem;
    }

    .hero__nav_ {
        display: flex;
        flex-direction: row;
        justify-content: space-evenly;
        height: 12rem;
    }

    .submenu_ {   
        top: 3rem;
        left: 0rem;
        z-index: 9999;
    }

    .submenu_ .nav__item_ a {
        word-spacing: normal;
    }

}

@media screen and (min-width: 1024px) {
     .nav__item_ {
        font-size: 2rem;
     }
}

/*booking choice page*/

.booking-info {
    scroll-snap-type: none;
    position: relative;
    top: -4rem;
}


.booking-info>h3 {
    display: grid;
    justify-items: center;
    color: var(--color-body-darker);
}

.booking-info>p {
    display: grid;
    justify-items: center;
}


.booking-info p {
    margin-bottom: 0;
    font-weight: 500;
    
}

.book1_2 {
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: visible;
    
}
.image-link-1, .image-link-2 {
    position: relative;
    display: flex;
    justify-content: center;
    
}

a.image-link-1:hover, a.image-link-2:hover {
    filter: brightness(0.7);
    transition: filter 0.5s ease; 
}

.image-link-1 {
    margin-top: 2rem;
}


.book-1 /*image*/ {
    width: 85%;
    height: auto;
    display: flex;
    margin-bottom: 2.5rem; 
    position: relative;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.5);   
}


.book-2 /*image*/ {
    width: 85%;
    height: auto;
    display: flex;
    margin-bottom: 2.5rem; 
    position: relative;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.5);
}

.overlay-text-1 {
    position: absolute;
    height: 5rem;
    width: 15rem;
    inset: 0;
    margin: auto;
    color: var(--color-border); 
    background: rgba(0, 0, 0, 0.5); 
    padding: 1rem; 
    border-radius: 0.5rem; 
    text-align: center;
}

.overlay-text-2 {
    position: absolute;
    height: 5rem;
    width: 20rem;
    inset: 0;
    margin: auto;
    color: var(--color-border); 
    background: rgba(0, 0, 0, 0.5); 
    padding: 1rem; 
    border-radius: 0.5rem; 
    text-align: center;
}

@media screen and (min-width: 768px) {
    .image-link-1, .image-link-2 {
        margin-top: 3rem;
    }
    .book1_2 {
        flex-direction: row;
    }

    .book-1 {
        width: 65%;
    }

    .book-2 {
        width: 65%;    
    }
}

@media screen and (min-width: 1024px) {
    .image-link-1 {
        position: relative;
        right: -8rem;
    }

    .image-link-2 {
        position: relative;
        left: -8rem;
    }

    .book-1 {
        width: 55%;
    }

    .book-2 {
        width: 55%;    
    } 

    .supp__footer {
        visibility: hidden;
    }
}

.booking-block-footer {
    position: relative;
    top: 16rem;
}

@media screen and (min-width: 768px) {
    .booking-block-footer {
        grid-template-columns: repeat(3, 1fr, auto);
        top: 20rem;
    }
    
}

@media screen and (min-width: 1024px) {
    .booking-block-footer {
        top: -25rem;
    }
    
}



/*booking forms*/



.my-cal-inline {
    width: 100%;
    height: auto;
    overflow: hidden;
    position: relative;
    top: 2rem;
    display: flex;
    justify-content: center;
    margin: 0 auto;
    opacity: 0.8; 
    margin-bottom: 10rem;
    background: transparent;
}

.sumup-payment-widget {
    position: relative;
    right: 4rem;
}


@media screen and (min-width: 768px) {
    .booking-container {
        height: 145rem;
    }

    .booking .block-divider2 {
        position: relative;
        top: -29rem;
    }
    
}

@media screen and (min-width: 1024px) {
    .booking {
        overflow: visible;
    }

    .booking-container {
        height: 65rem;
    }

    .booking .block-divider2 {
        position: relative;
        top: -26rem;
    }


    .booking__logo {
        visibility: visible;
        position: absolute;
        top: 1rem;
        right: 1rem;
    }

    .nav_booking {
        height: 5rem;
    }
}




/* Equipment Slider*/

.equipment-slider-block {
    position: relative;
    top: -81rem;
    display: flex;
    justify-content: center;
}

.slider {
    height: max-content;
    width: 295px;
    border-radius: 2px;
    overflow: hidden;
    place-items: center;
  }
  
  
  
  .slide-track {
    display: flex;
    width: calc(250px * 42);
    animation: scroll 120s linear infinite;
  }
  
  .slide-track:hover {
    animation-play-state: paused;
  }
  
  @keyframes scroll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(calc(-250px * 21));
    }
  }
  
  .slide_ {
    height: 350px;
    width: 300px;
    display: flex;
    align-items: center;
    padding: 1rem;
    perspective: 100px;
  }
  
  .slider img {
    width: 100%;
    transition: transform 1s;
  }
  
  img:hover {
    transform: translateZ(20px);
  }
    

@media screen and (min-width: 768px) {
    
    .equipment-slider-block {
        top: -81rem;
    } 
    
    .slider {
        width: 660px;
    }

    .slide_ {
        height: 350px;
        width: 300px;
        display: flex;
        align-items: center;
        padding: .5rem;
        perspective: 100px;
    }
}

@media screen and (min-width: 1024px) {

    .slider {
        border: none;
    }
    
    .equipment-slider-block {
        top: -46rem; 
    } 
    
    .slider {
        height: 38.5rem;
        width: 114rem;
    }

    .slide_ {
        height: 400px;
        width: 310px;
        display: flex;
        align-items: center;
        padding: .5rem;
        perspective: 100px;
    }
}

/*Review Slider*/

.review-slider-block {
    position: relative;
    top: 5rem;
    display: flex;
    justify-content: center;
}

.review_slider {
    height: max-content;
    width: 295px;
    border-radius: 2px;
    overflow: hidden;
    place-items: center;
  }
  
  
  
  .review_slide-track {
    display: flex;
    width: calc(350px * 18);
    animation: scroll 120s linear infinite;
  }
  
  .review_slide-track:hover {
    animation-play-state: paused;
  }
  
  @keyframes scroll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(calc(-350px * 9));
    }
  }
  
  .review_slide_ {
    height: 350px;
    width: 300px;
    display: flex;
    align-items: center;
    padding: 1rem;
    perspective: 100px;
  }
  
  .review_slider img {
    width: 100%;
    transition: transform 1s;
  }
  
  img:hover {
    transform: translateZ(20px);
  }
    

@media screen and (min-width: 768px) {
    .review-slider-block {
        position: relative;
        top: 5rem;
        display: flex;
        justify-content: center;
    } 
    
    .review_slider {
        width: 660px;
    }

    .review_slide_ {
        height: 350px;
        width: 300px;
        display: flex;
        align-items: center;
        padding: .5rem;
        perspective: 100px;
    }
}

@media screen and (min-width: 1024px) {
    .review-slider-block {
        top: 2rem;   
    }

    .review-slider-block .review_slider {
        width: 50rem;
        height: max-content;
        border: none;
        position: relative;
        top: 10rem;
        left: 4rem;
    }

    .review_slider {
        border: none;
    }
    
    
    .review_slider {
        height: 38.5rem;
        width: 114rem;
    }

    .review_slide_ {
        height: 400px;
        width: 310px;
        display: flex;
        align-items: center;
        padding: .5rem;
        perspective: 100px;
    }
}

/*contact form*/

.contact {
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: auto;
    
}

.contact__block_ {
    position: relative;
    top: 1rem;
    height: 100vh;
}


.contact__content {
    list-style-type: none;
    height: 50%;
    font-size: 4rem;
    padding: 0;
}

.contact_list_item a {
    font-size: 2rem;
    color: var(--color-body);
}

@media screen and (min-width: 768px) {
    .contact__content {
        height: 75%;
    }  
}


/*Supplemenatary pages*/

.supp__background {
    display:flex;
    position: absolute;
    justify-content:center;
    z-index: -1;
    opacity: 0.8;
    
}

.supp__background-image {
    min-width: 50rem;
    height: auto;
}

.supp__header {
    color: var(--color-body-darker);
    font-size: 5rem; 
    display: flex;
    justify-content: center;
}

.supp__footer {
    display: flex;
    justify-content: space-between;
    position: relative;
    bottom: -6rem;
}

@media screen and (min-width: 768px) {
    .showcase__background-image {
        min-width: 75rem;
    }
}

@media screen and (min-width: 1024px) {
    .supp__background-image {
        min-width: 100rem;
    }
}



/*Playground*/


.socials-container {
    display: flex;
    gap: 2rem;
    position: fixed;
    z-index: 1;
    top: 56rem;
    left: 3rem;

}

.socials-container a {
    background-color: var(--color-new);
    padding: 1emem;
    border-radius: 50%;
    height: 64px;
    width: 64px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.5);
}

.socials-container a svg {
    height: 3rem;
}

.socials-container a::before {
    content: attr(data-social);
    position: absolute;
    background-color: var(--accent-color);
    color: black;
    text-decoration: none;
    padding: 0.5rem 1rem;
    border-radius: 100px;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.5);
    transform: translateY(0) rotate(25deg);
    opacity: 0;
    transition: 200ms cubic-bezier(.42,0,.44,1.68);
}

.socials-container a:hover {
    background-color: var(--accent-color);
    fill: black;
}

.socials-container a::after {
    content: '';
    position: absolute;
    height: 0;
    width: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 10px solid var(--accent-color);
    transform: translateY(0) rotate(25deg);
    opacity: 0;
    transition: 200ms cubic-bezier(.42,0,.44,1.68);
}

.socials-container a:hover::before {
    transform: translateY(-65px) rotate(0);
    opacity: 1;
}

.socials-container a:hover::after {
    transform: translateY(-42px) rotate(0);
    opacity: 1;
}

@media screen and (min-width: 1024px) {
    .socials-container {
        top: 50rem;
    }
}


.logo {
    width: 40px;
    opacity: 0.6;
    position: fixed;
    z-index: 999;
    left: 1rem;
    top: 1.5rem;
  }



@media screen and (min-width:1024px ) {
    .logo {
        left: 1rem;
        top: 1.5rem;
    }
}