:root {
    --clr-accent-600: hsl(0, 7%, 92%);
    --clr-accent-500: hsl(12, 60%, 45%);
    --clr-accent-400: hsl(12, 88%, 59%);
    --clr-accent-300: hsl(12, 88%, 75%);
    --clr-accent-100: hsl(13, 100%, 96%);

    --clr-primary-400: hsl(228, 39%, 23%);

    --clr-neutral-900: hsl(232, 12%, 13%);
    --clr-neutral-100: hsl(0, 0%, 100%);

    --ff-primary: 'Be Vietnam Pro', sans-serif;

    --ff-body: var(--ff-primary);
    --ff-heading: var(--ff-primary);

    --fw-regular: 400; 
    --fw-semi-bold: 500;
    --fw-bold: 700; 

    --fs-300: 1rem;
    --fs-400: 1.25rem;
    --fs-500: 1.5rem;
    --fs-600: 2rem;
    --fs-700: 2.25rem;
    --fs-800: 2.5rem;
    --fs-900: 3.5rem;

    --fs-body: var(--fs-400);
    --fs-primary-heading: var(--fs-800);
    --fs-secondary-heading: var(--fs-700);
    --fs-nav: var(--fs-500);
    --fs-button: var(--fs-300);

    --size-100: 0.25rem;
    --size-200: 0.5rem;
    --size-300: 0.75rem;
    --size-400: 1rem;
    --size-500: 1.5rem;
    --size-600: 2rem;
    --size-700: 3rem;
    --size-800: 4rem;
    --size-900: 5rem;

}







.coming-soon{
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.coming-soon h1{
    color: var(--clr-accent-400);
    font-size: 6rem;
}

@media (min-width: 50em){
    .coming-soon img{
        width: 200px;
    }
}



    









/*collective styling*/


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

p{
    font-size: var(--fs-400);
}

p:not([class]) {
    color: rgb(92,92,92);
    max-width: 32ch;
}

a,
a:link,
a:visited,
a:hover,
a:active{
    text-decoration: none;
    all: unset;
    cursor: pointer;
}



html, body{
    height: 100%;
}

html, body{
    max-width: 100%;
    overflow-x: hidden;
}

li{
    list-style: none;
}



@media (min-width: 50em){
    :root {       
        --fs-body: var(--fs-600);
        --fs-primary-heading: var(--fs-900);
        --fs-secondary-heading: var(--fs-800);

        --fs-nav: var(--fs-300);

    }
}
















/* navigation*/


.primary-header {
    margin-top: var(--size-100);
}

.nav-wrapper {
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-bottom: 70px;
}

.nav-wrapper img{
    position: relative;
    left: -50px;
}


.nav-list a {
    text-decoration: none;
    color: var(--clr-primary-400);
    font-size: var(--fs-400);
    font-weight: 100;
}

.nav-list a:hover {
    text-decoration: none;
    color: var(--clr-accent-400);
    z-index: 10;
}

.nav-item {
    display: inline;
    margin: 10px;
    font-size: 1rem;
    font-weight: var(--fw-bold);
}

.mobile-nav-toggle {
    visibility: hidden;
}

@media (max-width:50rem){
    .nav-wrapper img{
        height: 4rem;
        left: 0px;
    }
}
@media (max-width:70rem){
    .nav-wrapper img{
        height: 4rem;
        left: 0px;
    }
}















/* hamburger */


.hamburger{
    display: none;
    cursor: pointer;
}

.hamburger span{
    display: block;
    width: 30px;
    height: 3px;
    margin: 5px 0;
    margin-right: 10px;
    transition: all 0.3s ease;
    background-color: #3e3e3e;
}


@media(max-width: 50em) {
    .primary-navigation a{
        padding: 14px 16px;
        display: block;

    }


    .hamburger{
        display: block;
    }

    .hamburger.active span:nth-child(2){
        opacity: 0;
    }    
    
    .hamburger.active span:nth-child(1){
        transform: translateY(8px) rotate(45deg);
    }    
    
    .hamburger.active span:nth-child(3){
        transform: translateY(-8px) rotate(-45deg);
    }

    .nav-list{
        position: absolute;
        cursor: pointer;
        width: 85%;
        max-width: 35rem;
        top: -100%;
        left: 50%;
        right: auto;
        transform: translate(-50%, 0); 
        transition: top ease 0.4s;
        gap: 0;
        flex-direction: column;
        align-items: center;
        text-align: center;
        background-color: white;
        box-shadow: 0 0 100vmax 0 rgba(0,0,0, 0.9);
        border-radius: 10px; 
    }
    
    .nav-list a {
        color: var(--clr-primary-400);        
    }

    .nav-item{
        margin: 20px 0;
        text-decoration: none;
        padding: 20px;
    }

    .nav-list.active,
    .nav-list a:focus{
        top: 120px;
        z-index: 10;
    } 

    .nav-list a:hover {
        color: var(--clr-accent-400);
    }
    

}














/* cardbox */

.card-box{
    height: 50px;
    width: 100%;
    margin: 20px;
    padding: 10px;
    text-align: center;
    color: var(--clr-primary-400);
    background-color: white;
    box-shadow: 0px 1px 10px 2px rgba(0,0,0,0.13);

}
.card-box-acc{
    text-align: center;
    height: 60px;
    width: 100%;
    margin: 20px;
    padding: 10px;
    color: var(--clr-neutral-100);
    background-color: var(--clr-accent-400);
}

.card-margin{
    margin-right: 50px;
    margin-left: 20px;
}

.card-box-acc h3{
    font-size: var(--fs-600);
}

.card-wrapper a{
    text-decoration: none;
    color: var(--clr-primary-400);
}

.card-wrapper a:hover {
    text-decoration: none;
    color: var(--clr-accent-400);
}

.row{
    width: 100%;
    margin-top: 200px;
    margin-bottom: 600px;
}

h4{
    font-weight: var(--fw-regular);
}











/* main */



.content{
    margin-bottom: 100px;
    min-height: calc( 65vh - 350px )
}

.flow img{
    position: relative;
    left: 40px;
    margin-top: 10rem;
    width: 700px;
    height: auto;
}

.centered{
    position: relative;
    left: 40px;
    bottom: 40px;
    text-align: center;
}

@media (max-width:50rem){
    .flow img{
        position: static;
    }
}

@media (max-width:50rem){
    .centered{
        position: static;
    }
}


.login-signup-questions{
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 300px;
}

.login-signup-questions a{
    font-size: var(--fs-300);
    text-decoration: none;
    color: var(--clr-primary-400);
}

.login-signup-questions a:hover{
    text-decoration: none;
    color: var(--clr-accent-400);
}

@media (max-width: 50em){
    .text-align-center-sm{
        text-align: center;
    }

    .text-align-center-sm p{
        margin-left: auto;
        margin-right: auto;
    }

    .text-align-center-sm img{
        margin-left: auto;
        margin-right: auto;   
    }

    .v-card-img{
        margin-bottom: 50px;
    }
}

.container-product{
    margin-top:20px;
    display: flex;
    justify-content: flex-end;
}
.frame-wrap{
    width: 20rem;
    position: relative;
    height:70rem;
}

.frame-wrap iframe{
        width: 30rem;
        height: 74rem;
        transform: scale(0.80);
        border: 0px;
        -ms-transform-origin: 0 0;
        -moz-transform-origin: 0 0;
        -o-transform-origin: 0 0;
        -webkit-transform-origin: 0 0;
        transform-origin: 0 0;
    }

    .price{
        margin-bottom: 40px;
    }

    .pricing{
        margin-bottom: 5rem;
        background-color: white;
        border-radius: 15px;
        height: 700px;
        width: 400px;
        padding-top: 30px;
        box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
    }

    .pricing h3{
        margin-top: 40px;
        color: #3e3e3e;
        font-weight: 300;
        font-size: 30px;
    }


    .table {
        display: flex;
        justify-content: space-around;
        margin-top: 100px;
        flex-wrap: wrap;
    }


    .table h1{
        margin-top: 20px;
        font-size: 40px;
    }

    .table img{
        max-width: 300px;
    }

    .img-one img{
        max-height: 140px;
        margin-top: 30px;
    }





















/* footer nav*/

.footer-nav {
    columns: 2;
}


.footer-nav a:hover{
    color: var(--clr-accent-400);
    text-decoration: none;
}

 .primary-footer-wrapper{
    height: 1rem;
    display: flex;
    justify-content: center;
 }

 .footer-item{
    height: 3rem;
 }

 .footer-item img{
    margin-top: -2.5rem;
 }

 .copyright{
    margin-left: 15rem;
    margin-top: -2.5rem;
    width: 400px;
 }
 .copyright a p{
    text-decoration: underline;
 }


 .go {
    display: inline-flex;
    cursor: pointer;
    text-decoration: none;
    border: 0;
    border-radius: 100vmax;
    padding: .75em 1.75em;
    font-weight: var(--fw-bold);
    font-size: var(--fs-button);
    line-height: 1;
    color: var(--clr-neutral-100);
    background-color: var(--clr-accent-400);
 }
 @media (max-width:70rem){
    .footer-item img{
        position: relative;
        height: 5rem;
     }

     .copyright{
        margin-left: 20px;
        width: 100%;
     }
    .copyright p{
        width: 100%;
        margin-left: -15px;
    }
}
 @media (max-width:50rem){
    .footer-item img{
        position: relative;
        height: 3.5rem;
        top: -2.5rem;
     }

     .copyright{
        margin-left: 20px;
        margin-top: -6rem;
        width: 100%;
     }
    .copyright p{
        width: 100%;
        margin-left: -15px;
    }
}

















/* cta */


.cta {
    position: relative;
    isolation: isolate;
    text-align: center;
}

@media (min-width: 50em){
    .cta{
        text-align: left;
    }
}

.cta::before {
    content: '';
    position: absolute;
    z-index: -1;
    inset: 0;
    background-image: url('./img/blob.svg'),
                    url(./img/blob2.svg);
    background-position: 10px 10px, 1100px -200px;
    background-size: 500px; 
    background-repeat: no-repeat;
    overflow: hidden;
    opacity: 0.5;
}

























/* general styling*/


body{
    font-size: var(--fs-body);
    font-family: var(--ff-body);
    color: var(--clr-primary-400);
    background-color: white;
    position: relative;
}

.tracker{
    visibility: hidden;
}


.banner{
    margin-top: -6rem;
}

@media(max-width:70em){
    .banner img{
        margin-top: 400px;
        width: 300px;
    }
}

@media(max-width:50em){
    .banner img{
        width: 100%;
    }
}

.identity{
    position: absolute;
    float: right;
    margin-right: 4rem;
    margin-top: -5rem;
    color: rgb(92,92,92);
}

@media(max-width:50em){
    .identity{
        position: absolute;
        right:50%;
        margin-right: -70px;
        margin-top: -60px;
    }
    .fs-small{
        font-size: 15px;
    }
}

.img-container{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.v-card-img {
    width: 500px;
    height: auto;
    margin-top: -100px;
    margin-left: -3rem;
    border-radius: 10px;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
}

.v-card-img2 {
    width: 500px;
    height: auto;
    margin-top: 20px;
    margin-left: -3rem;
    border-radius: 10px;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
}

.list{
    margin-left: 30px;
}


@media(max-width:70em){
    .img-container{
        margin-top: -400px;
        margin-left: 40px;
    }
    .v-card-img , .v-card-img2{
        width: 350px;
        height: auto;
        margin-top: 0;
        margin-left: 0;
    }

    .list{
        margin-left: 0px;
    }
}
@media(max-width:50em){
    .img-container{
        margin-top: 40px;
        margin-left: 0px;
    }
    .v-card-img , .v-card-img2{
        width: 300px;
        height: auto;
        margin-top: 0;
        margin-left: 0;
    }

    .list{
        margin-left: 0px;
    }
}

/* button */

.hidden{
    margin-bottom: -200px;
}

@media(min-width:50em){
    .hidden-div{
        display: none;
    }

}

.button {
    display: inline-flex;
    cursor: pointer;
    text-decoration: none;
    border: 0;
    border-radius: 100vmax;
    padding: 1.25em 2.5em;
    font-weight: var(--fw-bold);
    font-size: var(--fs-button);
    line-height: 1;
    color: var(--clr-neutral-100);
    background-color: var(--clr-accent-400);
    box-shadow: 0 1.125em 1em -1em var(--clr-accent-500);
}

.button[data-type="inverted"] {
    background-color: var(--clr-neutral-100);
    color: var(--clr-accent-400);
}


.button:hover,
.button:focus-visible {
    background-color: var(--clr-accent-300);
}

.button[data-type="inverted"]:hover,
.button[data-type="inverted"]:focus-visible {
    background-color: var(--clr-neutral-100);
    color: var(--clr-accent-300);
}


.blob-one::before {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    width: 1000px;
    aspect-ratio: 1;
    background-image: url("./img/blob1.svg");
    background-position: 20rem -10rem;
    background-repeat: no-repeat;
    opacity: 0.1;
    z-index: -1;
}

@media(max-width:50em){
    .blob-one::before{
        top: 15rem;
        right: -10rem;
    }
}

.blob-two::before {
    content: '';
    position: absolute;
    left: 0;
    bottom: -50rem;
    height: 100%;
    width: 1000px;
    aspect-ratio: 1;
    background-image: url("./img/blob.svg");
    background-position: -10rem 5rem;
    background-repeat: no-repeat;
    opacity: 0.1;
    z-index: -1;

}

@media(max-width:50em){
    .blob-two::before{    
        bottom: -100rem;
        left: -5rem;
    }
}

@media(max-width:50em){
    .no-blob-small{
        display: none;
    }
}















/* cookies & terms */
.cookies{
    font-size: var(--fs-300);
    max-width: 600px;
    margin: 0 auto;
}

.cookies-p{
    font-size: var(--fs-400);
    max-width: 900px;
    margin: 0 auto;
}

.cookies ul li{ 
    list-style-type: disc; 
    list-style-position: inside; 
 }
 .cookies ul li{ 
    list-style-type: disc; 
    list-style-position: inside; 
 }
.cookies ol li{ 
    list-style-type: decimal; 
    list-style-position: inside; 
    margin-left: 30px;
 }
 .cookies ul ul, ol ul { 
    list-style-type: circle; 
    list-style-position: inside; 
    margin-left: 40px; 
 }
 .cookies ol ol, ul ol { 
    list-style-type: lower-latin; 
    list-style-position: inside; 
    margin-left: 30px; 
 }

.cookies h5{
    font-size: var(--fs-400);
    margin-bottom: 30px;
    margin-top: 60px;
}

.cookies li{
    margin: 10px 0px;
}



.terms{
    font-size: var(--fs-300);
    max-width: 800px;
    margin: 0 auto;
    color: hsl(228, 39%, 23%);
}


.terms ul li{ 
    list-style-type: disc; 
    list-style-position: inside; 
    color: hsl(228, 39%, 23%);
 }
 .terms ul li{ 
    list-style-type: disc; 
    list-style-position: inside; 
    color: hsl(228, 39%, 23%);
 }
.terms ol li{ 
    list-style-type: decimal; 
    list-style-position: inside; 
    margin-left: 30px;
    color: hsl(228, 39%, 23%);
 }
 .terms ul ul, ol ul { 
    list-style-type: circle; 
    list-style-position: inside; 
    margin-left: 40px; 
    color: hsl(228, 39%, 23%);
 }
 .terms ol ol, ul ol { 
    list-style-type: lower-latin; 
    list-style-position: inside; 
    margin-left: 30px; 
    color: hsl(228, 39%, 23%);
 }

.terms h5{
    font-size: var(--fs-400);
    margin-bottom: 30px;
    margin-top: 60px;
    color: hsl(228, 39%, 23%);
}

.terms li{
    margin: 20px 0px;
    color: hsl(228, 39%, 23%);
}

.terms h1 , h2{
    text-transform: uppercase;
    color: hsl(228, 39%, 23%);
}

.terms ol {
    counter-reset: item; 
    color: hsl(228, 39%, 23%);
  }

.terms li {
    display: block;
    color: #666666;
    color: hsl(228, 39%, 23%);
  }

.terms li:before {
    content: counters(item, ".") " ";
    counter-increment: item;
    color: hsl(228, 39%, 23%);
  }

.terms-2{
    margin-top: 200px;
    color: hsl(228, 39%, 23%);
}

.terms ol ul li{
    color: hsl(228, 39%, 23%);
}

  




@media(max-width:50em){
    .cookies{
        margin: 0 30px;
    }
    .cookies-p{
        margin: 0 30px;
    }
    .cookies ol li{ 
        margin-left: 15px;
     }
     .cookies ul ul, ol ul { 
        margin-left: 20px; 
     }
     .cookies ol ol, ul ol { 
        margin-left: 15px; 
     }
}
























/* utility classes*/


.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.container {
    --max-width: 1600px;
    --padding: 1rem;

    width: min(var(--max-width), 100% - (var(--padding) * 2));
    margin-inline: auto;
}


.even-columns {
    padding: 30px;
    display: grid;
    gap: 1rem;
}

@media (min-width: 50em) {
    .even-columns {
        grid-auto-flow: column;
        grid-auto-columns: 2fr;
    }
}

.vertical-align-center {
    align-items: center;
}

.justify-self-end {
    justify-self: end;
}

@media (min-width: 50em){
    .justify-self-end-md {
        justify-self: end;
    }    
}

.flow *+* {
    margin-top: var(--flow-spacer, 4em);
}

.flow-md *+* {
    margin-top: var(--flow-spacer, 2.5em);
}

.display-sm-none{
    display: none;
}

@media (min-width: 50em) {
    .display-md-inline-flex {
    display: inline-flex;
    }
} 

.text-primary-400 {
    color: var(--clr-primary-400);
}

.text-accent-400 {
    color: var(--clr-accent-400);
}

.text-accent-100 {
    color: var(--clr-accent-100);
}

.text-neutral-100 {
    color: var(--clr-neutral-100);
}

.text-neutral-900 {
    color: var(--clr-neutral-900);
}


.bg-primary-400 {
    background-color: var(--clr-primary-400);
}

.bg-accent-400 {
    background-color: var(--clr-accent-400);
}

.bg-accent-100 {
    background-color: var(--clr-accent-100);
}

.bg-neutral-100 {
    background-color: var(--clr-neutral-100);
}

.bg-neutral-900 {
    background-color: var(--clr-neutral-900);
}

.fw-bold { font-weight: var(--fw-bold); }
.fw-semi-bold { font-weight: var(--fw-semi-bold); }
.fw-regular { font-weight: var(--fw-regular); }

.fs-primary-heading {
    font-size: var(--fs-primary-heading);
    line-height: 1.1;
}
.fs-secondary-heading {
    font-size: var(--fs-secondary-heading);
    line-height: 1.1;
}

.fs-300 { font-size: var(--fs-300); }
.fs-400 { font-size: var(--fs-400); }
.fs-500 { font-size: var(--fs-500); }
.fs-600 { font-size: var(--fs-600); }

.padding-block-900 {
    padding-block: var(--size-400);
}

.padding-block-700 {
    padding-block: var(--size-700);
}