/*  Style for page: pricing.php */

/*MARK: -Page General   */

:root {

    --color-violet: #9f37ee;

}

body {

    background-color: #fff;

}



.content-wrapper {

    min-height: 100vh;

    padding-top: 100px;

    color: var(--color-darkGray);

    background-color: #f6f6f6;

    /*  background-image: url("../../assets/img/pricing/bg.svg"); */

    background-image: url("../../assets/img/pricing/bk-pricing.svg");

    background-repeat: no-repeat;

}

.content-max-width {

    width: 80vw;

    max-width: 1440px;

    margin: 0 auto;

    margin-top: 0px;

}

/*MARK: -Intro */

.intro-headline2 {

    display: flex;

    flex-direction: row;

    justify-content: space-between;

}

.intro-headline2 .headline {

    width: 60%;

    height: fit-content;

    font-family: Geeks On The Beach Font Regular, Helvetica, Arial, Lucida, sans-serif;

    color: var(--color-black);

}

.intro-headline2 .headline h1 {

text-transform: uppercase;

    font-family: Geeks On The Beach Font Regular, Helvetica, Arial, Lucida, sans-serif;

    margin: 100px 0 15px 0;

    line-height: 1.1em;

        font-size: 52px;

    letter-spacing: 1px;

}

.intro-headline2 .headline h2 {

font-family: Geeks On The Beach Font regular, Helvetica, Arial, Lucida, sans-serif;

    letter-spacing: 2px;

    text-transform: uppercase;

    margin: 0px 0 20px 0;

    font-size: 1.5rem;

}

.intro-headline2 .headline .paragraf1 {

	width: 80%;

    font-size: 1.2rem;

    font-weight: 500;

    line-height: 1.5em;

    margin-top: 25px;

    font-family: Geeks On The Beach Font Regular, Helvetica, Arial, Lucida, sans-serif;

}

 .intro-headline2 .intro-img {

	align-self: flex-end;

	/* note to celia: a value greater than 40% causes left overflow for this image */

    width: 60%;

    max-width: 90%;

    margin-top: 0px;

} 



/*MARK: -timerange */

.timerange {

    /* hover plate length  */

    --dot-hover-plate1: 8vw;

    --dot-hover-plate2: 8vw;

    --dot-hover-plate3: 24vw;

    --dot-hover-plate4: 16vw;

    --dot-hover-plate5: 40vw;

    overflow: hidden;

  /*  padding: 70px 0 60px 0; */

}



/*MARK: ---timerange top */

.timerange .timerange-top {

    display: flex;

    flex-direction: row;

    font-size: 1.2rem;

    line-height: 1.6;

}



.timerange .headline .timerange h2 {

    text-transform: uppercase;

    font-size: 1.5rem;

    letter-spacing: 2px;

    line-height: 1.4em;

    margin-bottom: 15px;

    color: var(--color-darkGray);

}



.timerange .headline h2 {

    font-family: 'Geeks On The Beach Font Regular', Helvetica, Arial, Lucida, sans-serif;

    font-size: 28px;

    letter-spacing: 1px;

    color: var(--color-black);

    text-transform: uppercase;

}



.timerange .headline .timerange p:nth-of-type(1) {

    font-size: 1.2rem;

    line-height: 1.6;

    color: var(--color-darkGray);

}



/*MARK: ---arrow */

.timerange .arrow-container {

    position: relative;

    right: 0;

    top: 30px;

    display: flex;

    justify-content: flex-end;

    margin-left: 180px;

}



.timerange .arrow-container .arrow-text {

    font-size: 2.2rem;

    font-family: 'Caveat', cursive;

    line-height: 1.1;

    width: 180px;

    text-align: center;

}



.timerange .arrow-container .arrow {

    width: 70px;

    position: relative;

    left: -50px;

    top: -30px;

    transform: rotate(22deg);

}

ul.timeline-nodes,

ul.timeline-nodes li.timeline-node {

  list-style: none;

}



ul.timeline-nodes li.timeline-node::marker {

  content: none;

}









/* timeline */

.timerange .timeline-wrapper1 {

    margin-top: 80px;

}



.timerange .timeline-wrapper2 {

    display: flex;

    flex-direction: row;

    flex-wrap: wrap;

    justify-content: flex-start;

    align-content: flex-start;

    align-items: flex-start;

}



.timerange .timeline {

    position: relative;

    left: 1px;

    width: calc(100% - 2px);

    height: 20px;

    /* box-shadow: inset 3px 3px 10px 3px #dfdede; */

    margin-top: 50px;

    margin-bottom: 560px;

    perspective: 5000px;

    border: 1px solid #cdcdcd;

    background-color: #e4e4e4;

    border-radius: 15px;

    -webkit-border-radius: 15px;

}



.timerange .timeline-bg {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    border-radius: 15px;

    /*background-image: linear-gradient(147deg, var(--color-MediumBlue), var(--color-LightGreen));*/

    /* background: linear-gradient(90deg, rgba(239, 220, 246, 1) 0%, rgba(226, 154, 250, 1) 49%, rgba(138, 73, 254, 1) 100%); */

    background-repeat: no-repeat;

    background-color: #c5c5c5;

    clip-path: inset(0% 95% 0% 0%);

    abox-shadow: inset 2px 2px 8px 2px #f6f8fa;

}



.timerange .timeline-node-label {

    width: max-content;

    display: block;

    position: absolute;

    top: calc(100px /2 - (30px / 2) - 40px);

    left: 50%;

    transform: translateX(-50%);

    font-size: 0.9rem;

    transition: color 0.3s;

    text-transform: uppercase;

}



.timerange .timeline-node-dot.active~.timeline-node-label {

        color: var(--color-black);

        line-height:1.1em;

         font-family: 'Geeks On The Beach Font Medium';

}



/* line below the numbers */

.timerange .timeline-node-label::after {

    content: "";

    display: block;

    width: 1px;

    height: 20px;

    background-color: var(--color-black);

    position: absolute;

    z-index: -1;

    bottom: -25px;

    left: 50%;

    transform: translateX(-50%);

        font-family: 'Geeks On The Beach Font Regular', Helvetica, Arial, Lucida, sans-serif;

        color: var(--color-black);

        line-height:1.1em;

}



/* this parent element registers the hover*/

.timerange .timeline-node {

    height: 100px;

    position: absolute;

    left: 50%;

    top: 50%;

    transform: translate(-50%, -50%);

    z-index: 1;

    cursor: pointer;

    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);

}



/* 

left - determine where the Dot will appear on the timeline (and therefore the Info panel which is calculated in js based on the position of the Dots)

width - determines the size of the hover plate (turn on the outline to see) that serves to capture the hover



*/

.timerange .timeline-node:nth-of-type(1) {

    left: 5%;

    width: var(--dot-hover-plate1);

    font-family: 'Geeks On The Beach Font Regular', Helvetica, Arial, Lucida, sans-serif;

        color: var(--color-black);

        line-height:1.1em;

}



.timerange .timeline-node:nth-of-type(2) {

    left: 15%;

    width: var(--dot-hover-plate2);

    font-family: 'Geeks On The Beach Font Regular', Helvetica, Arial, Lucida, sans-serif;

        color: var(--color-black);

        line-height:1.1em;

}



.timerange .timeline-node:nth-of-type(3) {

    left: 35%;

    width: var(--dot-hover-plate3);

    font-family: 'Geeks On The Beach Font Regular', Helvetica, Arial, Lucida, sans-serif;

        color: var(--color-black);

        line-height:1.1em;

}



.timerange .timeline-node:nth-of-type(4) {

    left: 60%;

    width: var(--dot-hover-plate4);

    font-family: 'Geeks On The Beach Font Regular', Helvetica, Arial, Lucida, sans-serif;

        color: var(--color-black);

        line-height:1.1em;

}



.timerange .timeline-node:nth-of-type(5) {

    left: 95%;

    width: var(--dot-hover-plate5);

}











/* Dots */

/*MARK: ---dots */

.timerange .timeline-node-dot {

    position: absolute;

    z-index: 1;

    top: calc(100px /2 - (40px / 2));

    margin-left: calc(12vw / 2 - (40px /2));

    width: 25px;

    height: 40px;

    abackground-color: #fff;

    fill: #ddddf2;

    aborder: 5px solid rgb(228, 228, 228);

    aborder-radius: 50%;

    abox-shadow: 0px 0px 8px 3px rgba(255, 255, 255, 0.4), 0px 0px 0px 1px rgb(151, 151, 151);

    transition: transform 0.3s ease, fill 0.3s ease;

    will-change: transform;

}



/* determine the position of Dot points based on the width: --dot-hover-plate */

.timerange .timeline-node:nth-of-type(1) .timeline-node-dot {

    margin-left: calc(var(--dot-hover-plate1) / 2 - (23px /2));

      fill: #ffffff;

    stroke: #2d2e2f

}



.timerange .timeline-node:nth-of-type(2) .timeline-node-dot {

    margin-left: calc(var(--dot-hover-plate2) / 2 - (23px /2));

      fill: #ffffff;

    stroke: #2d2e2f

}



.timerange .timeline-node:nth-of-type(3) .timeline-node-dot {

    margin-left: calc(var(--dot-hover-plate3) / 2 - (23px /2));

      fill: #ffffff;

    stroke: #2d2e2f

}



.timerange .timeline-node:nth-of-type(4) .timeline-node-dot {

    margin-left: calc(var(--dot-hover-plate4) / 2 - (23px /2));

      fill: #ffffff;

    stroke: #2d2e2f

}



.timerange .timeline-node:nth-of-type(5) .timeline-node-dot {

    margin-left: calc(var(--dot-hover-plate5) / 2 - (23px /2));

    fill: #ffffff;

    stroke: #2d2e2f

}



.timerange .timeline-node-dot.active {

    transform: scale(1.3, 1.3);

}



.timerange .timeline-node:nth-of-type(1) .timeline-node-dot.active {

   /* fill: #3dba92;

    stroke: #ffffff;*/

    fill: #ffffff;

    stroke: #2d2e2f

}



.timerange .timeline-node:nth-of-type(2) .timeline-node-dot.active {

    fill: #ffffff;

    stroke: #2d2e2f

}



.timerange .timeline-node:nth-of-type(3) .timeline-node-dot.active {

    fill: #ffffff;

    stroke: #2d2e2f

}



.timerange .timeline-node:nth-of-type(4) .timeline-node-dot.active {

    fill: #ffffff;

    stroke: #2d2e2f

}



.timerange .timeline-node:nth-of-type(5) .timeline-node-dot.active {

   fill: #ffffff;

    stroke: #2d2e2f

}







/* Info Panels */

/*MARK: ---info panel*/

.timerange .info-panel {

    position: absolute;

    top: 70px;

    background-color: #fff;

    width: 540px;

    border-radius: 10px;

    box-shadow: 5px 14px 18px 0px rgb(0 0 0 / 11%);

    border: 1px solid #2d2e2f;

    font-size: 1.1rem;

    line-height: 1.4;

}



.timerange .text-panel {

    padding: 25px;

    display: none;

    opacity: 0;

    will-change: opacity;

}



.timerange .text-panel.active {

    opacity: 1;

    display: block;

}

.text-panel p {

  margin-top: 0;         /* remove top gap */

margin-bottom: 0em !important;

}



.timerange .text-panel h3 {

 margin-top: 0;         /* remove top gap */

  margin-bottom: 0.25em; /* tighten gap under heading */

  font-size: 1.4rem;     /* optional: shrink heading size */

  line-height: 1.2;      /* reduce vertical height */

}



.timerange .text-panel h3 a {

    color: var(--color-black);

}



.timerange .text-panel h3 a.line-link {

    --link-hover-color: var(--color-black);

    letter-spacing: 0.3px;

    text-transform: uppercase;

    font-family: 'Geeks On The Beach Font Medium', Helvetica, Arial, Lucida, sans-serif;

}



.info-panel .arrow {

    width: 38px;

    height: 19px;

    position: absolute;

    top: -18px;

    shape-rendering: geometricPrecision;

}





/*MARK: -Section1 */

.section1,

.section2 {

    padding: 100px 0;

    font-size: 1.1rem;

}



.section1 h3,

.section2 h3 {

    text-transform: uppercase;

    font-size: 1.5rem;

    letter-spacing: 2px;

    line-height: 1.4em;

    margin-bottom: 15px;

    color: var(--color-darkGray);

}











/*MARK: -Price2 - image fixed*/

.price-section {

    position: relative;

    height: 80vh;

    max-height: 600px;

    overflow: hidden;

    background-color: var(--color-black);

    background-image: linear-gradient(147deg, var(--color-LightPurple),var(--color-MediumBlue), var(--color-LightGreen));

    background-repeat: no-repeat;

    background-size: cover;

    background-position: 0% 30%;

    background-attachment: fixed;

}



/* for Mobile device */

@media (pointer: coarse) and (max-width:576px) {

    .price-section {

        background-attachment: scroll;

    }

}





.price-section .shadow {

    position: absolute;

    z-index: 2;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    /* box-shadow: inset 0 9px 10px -7px rgba(0, 0, 0, 0.6), inset 0 -9px 10px -7px rgba(0, 0, 0, 0.6); */

}



.price-section .glass {

    --glass-filter: 15px;

    position: absolute;

    z-index: 1;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    backdrop-filter: blur(var(--glass-filter));

    -webkit-backdrop-filter: blur(var(--glass-filter));



    will-change: backdrop-filter;

    -webkit-backface-visibility: hidden;

    -webkit-transform: translate3d(0, 0, 0);

}



/* text */

.price-section .price-inner {

    width: 100%;

    height: 100%;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    position: relative;

    z-index: 0;

    padding-top: 2vw;

}



.price-section h3,

.price-section .price {

    color: #ffffff;

    /* text-shadow: -2px 2px 2px rgba(124, 124, 124, 0.65); */

    line-height: 1;

}



.price-section h3 {

    font-size: 5rem;
    text-transform: capitalize;
    font-family: 'Caveat', cursive;

    font-weight: 400;

    color: #ffffff;

}



.price-section .price {

    font-size: 14rem;

    margin-top: 30px;

    text-shadow: 3px 1px 20px rgb(112 123 193 / 39%);

    letter-spacing:1px;

}



.price-section .price span {

    font-size: 8rem;

}















/* ========   Mq   ======== */

/*MARK: -MQ  PAGE */

/*MARK: ---0-576- */

@media only screen and (max-width: 576px) {





    /* .heading .paragraf-container p,

    .timerange p:nth-of-type(1) {

        font-size: .9rem !important;

    }



    .intro-heading .intro-heading-right {

        margin-top: 70px !important;

    }



    .intro-heading .intro-heading-right img {

        width: 100% !important;

    } */



    .intro-headline2 .headline h1 {

        font-size: 40px !important;

    }



    .intro-headline2 .headline h2 {

        font-size: 25px !important;

    }



    .intro-headline2 .intro-img {

        width: 80% !important;

        margin-top: 60px !important;

    }



    .timerange {

        padding-top: 60px !important;

    }

    



    .timerange {

        /* hover plate length  */

        --dot-hover-plate1: 15.5vw;

        --dot-hover-plate2: 15.5vw;

        --dot-hover-plate3: 15.5vw;

        --dot-hover-plate4: 15.5vw;

        --dot-hover-plate5: 15.5vw;

        overflow-x: unset;

        padding-top: 0px;

    }



    .timerange .timeline {

        width: 97%;

    }



    .timerange .timeline-bg {

        box-shadow: none;

    }



    .timerange .timeline-node:nth-of-type(1) {

        left: 10%;

    }



    .timerange .timeline-node:nth-of-type(2) {

        left: 30%;

    }



    .timerange .timeline-node:nth-of-type(3) {

        left: 50%;

    }



    .timerange .timeline-node:nth-of-type(4) {

        left: 70%;

    }



    .timerange .timeline-node:nth-of-type(5) {

        left: 90%;

    }



    .timerange .info-panel {

        width: 100% !important;

    }



    .timerange .timeline-node .timeline-node-label {

        left: 65%;

        font-size: .8rem;

        top: calc(100px /2 - (30px / 2) - 27px);

        transform-origin: 50% 100%;

        transform: translateX(-50%) rotate(-50deg);

    }



    .timerange .timeline-node:nth-child(3) .timeline-node-label {

        top: calc(100px /2 - (30px / 2) - 35px);

        left: 75%;

    }



    .timerange .timeline-node:nth-child(4) .timeline-node-label {

        top: calc(100px /2 - (30px / 2) - 38px);

        left: 75%;

    }



    .timerange .timeline-node:nth-child(5) .timeline-node-label {

        top: calc(100px /2 - (30px / 2) - 42px);

        left: 80%;

    }



    .timerange .timeline-node .timeline-node-label::after {

        display: none;

    }



    .price-section {

        max-height: 350px;

    }



    .price-section .price-inner {

        padding-top: 3vw;

    }





    .price-section h3 {

        font-size: 7vw !important;

        width: 80%;

        text-align: center;

    }



    .price-section .price {

        font-size: 25vw !important;

    }



    .price-section {

        max-height: 350px;

    }



    .price-section .price-inner {

        padding-top: 3vw;

    }



    .price-section .price {

        font-size: 25vw !important;

    }



}







/*MARK: ---0-980 */

@media only screen and (max-width: 979px) {





    /* .intro-heading {

        flex-wrap: wrap;

    }



    .intro-heading .intro-heading-left {

        flex: 0 1 100%;

    }



    .intro-heading .intro-heading-right {

        flex: 1 1 100%;

        margin-top: 100px;

    }



    .intro-heading .intro-heading-right img {

        width: 80%;

        margin: 0 auto;

        display: block;

    } */



    .timerange p:nth-of-type(1) {

        font-size: 1rem;

        line-height: 1.4;

    }



    .timerange {

        padding-top: 100px;

    }



    .timerange .arrow-container {

        display: none;

    }



    .timerange .info-panel {

        box-shadow: 3px 5px 5px 0px rgba(0, 0, 0, 0.3);

        width: 99%;

    }



    .timerange .text-panel {

        padding: 50px 25px;

    }



    .timeline-node-label .hours {

        display: none;

    }



    .price-section h3 {

        font-size: 5vw;

    }



    .price-section .price {

        font-size: 20vw;

    }



    .price-section .price span {

        font-size: 10vw;

    }



    .price-section h3 {

        font-size: 5vw;

    }



    .price-section .price {

        font-size: 20vw;

    }



    .price-section .price span {

        font-size: 10vw;

    }



}



/*MARK: ---1150 */

@media only screen and (max-width: 1150px) {



    /* intro */

    .content-wrapper {

        padding-top: 100px;

    }

    

    .content-max-width {

        margin-top: 0px;

    } 

    

    .intro-headline2  {

        flex-direction: column;

    }



    .intro-headline2 .headline {

        width: 100%;

    }



    .intro-headline2 .headline h1 {

        font-size: 60px;

    }



    .intro-headline2 .headline .paragraf1 {

        font-size: 1.4rem;

        font-weight: 500;

        line-height: 1.5em;

        margin-top: 30px;

        width: 100%;

    }



    .intro-headline2 .intro-img {

        align-self: center;

        width: 60%;

        margin-top: 100px;

    }

}





/* fixing bugs */

/*MARK: ---fixing bugs */

@media only screen and (max-width: 1350px) and (min-width:576px) {



    .timerange .timeline-node:nth-of-type(1) {

        left: 6%;

    }



    .timerange .timeline-node:nth-of-type(5) {

        left: 93%;

    }

}





@media only screen and (max-width: 1200px) and (min-width:980px) {

    .timerange {

        padding-top: 100px;

    }



    /* .intro-heading .intro-heading-right {

        flex: 0 1 40%;

    } */

}







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

    /* .intro-heading .intro-heading-left {

        flex: 0 1 30%;

    } */



    .intro-headline2 .intro-img {

        align-self: center;

    }



}



.text-panel a {

    transition: color .3s;

    color:#383939;

}

.text-panel a:hover {

    color: var(--color-orange);

}