/*--Initial Screen-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
#initial-screen{
    background-color: var(--background-main);
    display:          block;
}
.top-wave{    
    display: block;
    height:  7rem;
    width:   100%;
}
.bottom-wave{
    display: block;
    height:  7rem;
    width:   100%;
}
.waves-svg-bottom{
    position: absolute;

    height: 9.5rem; 
    width:  100%;
    bottom: 0px;
}
.waves-svg-top{
    position: absolute;

    height: 9.5rem; 
    width:  100%;
    top:    0px;

    transform: scaleY(-1);
    display:   block;
}

/*--Initial Hero Section-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
.initial-hero-container{
    background-image:    linear-gradient(-45deg, var(--accent-blue-2-old), var(--accent-blue-1-old), var(--accent-blue-4-old), var(--accent-blue-9-old));
    border:              1px transparent !important;
    background-position: 50% 50%;
    background-size:     200% 200%;

    position:   relative;
    min-height: 35rem;
    
    justify-content: center;
    align-items:     center;
    overflow:        hidden;
    display:         flex;
}
.initial-hero-content{
    max-width: calc(100vw - 4rem);
    color:     var(--background-main);

    padding-bottom: 10rem;
    padding-top:    5rem;

    text-align: center;
    width:      80rem;
    z-index:    10;
}
.initial-hero-content h1{
    color:         var(--background-main);
    margin-bottom: 3rem;
    font-size:     2.5rem;
}
.initial-hero-content p{
    transform:   translate(-50%);
    width:       calc(100% - 2rem);
    color:       var(--white);
    margin-left: 50%;
    font-size:   1.1rem;
}
#initial-hero-button{
    background-color: var(--background-main);
    border:           none !important;

    transform:   translate(-50%);
    margin-left: 50%;
    margin-top:  3rem;
    height:      4rem;
    width:       16rem;
}
#initial-hero-button:hover{
    background-color: rgb(245, 245, 245);
}
#initial-hero-button:active{
    background-color: rgb(235, 235, 235);
}
.initial-hero-cancel{
    margin-top: 3rem;
    color:      var(--white) !important;
    font-size:  1.75rem;
}

/*--Initial Pain Section-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
.initial-pain-container{
    max-width: calc(100% - 4rem);
    transform: translate(-50%);
    padding-bottom: 6rem;
    padding-top:    3rem;
    margin-left:    50%;
    width:          70rem;
    gap:            3rem;
    
    flex-wrap:      wrap-reverse; 
    flex-direction: row;
    align-items:    center;
    display:        flex;
}
.initial-pain-copy-column{
    width: 30rem;
}
.initial-pain-sub-heading{
    color:         var(--text-gray-light);
    margin-bottom: 0.5rem;
    font-size:     0.85rem;
    font-weight:   700;
    opacity:       0.5;
    
    text-transform: uppercase;
    display:        block;
}
.initial-pain-title{
    color:       var(--dark-blue);
    margin:      0 0 1rem 0;
    line-height: 1.1;
    font-size:   3rem;
}
.initial-pain-highlight{
    color:    var(--accent-blue-3-old);
    position: relative;
    display:  inline-block;
}
.initial-pain-list{
    list-style: none;
    padding:    0;
    margin:     2rem 0;
}
.initial-pain-list li{
    color:         var(--text-gray);
    margin-bottom: 1rem;
    font-size:     1.2rem;
    
    align-items: center;
    display:     flex;
}
.initial-pain-icon{
    background-color: var(--accent-blue-7-old);
    border-radius:    var(--border-radius-1);
    color:            var(--accent-blue-2-old);
    margin-right:     1rem;
    font-weight:      bold;
    font-size:        1.2rem;
    height:           2rem;
    width:            2rem;

    justify-content: center;
    align-items:     center;
    display:         flex;
}
.initial-pain-summary{
    border-left:  0.33rem solid var(--accent-blue-1-old);
    color:        var(--text-gray-light);
    font-size:    1.35rem;
    padding-left: 1rem;
    line-height:  1.5;
    margin-top:   2rem;
}
.initial-pain-summary strong{
    color:   var(--text-gray);
    display: block;
}
.initial-pain-mascot-column{
    justify-content: center;
    align-items:     center;
    display:         flex;

    width: 100%;
    flex:  1;
}
.initial-pain-mascot-img{
    background-image:    url("../assets/initial/cover.png");
    background-position: center center;
    background-repeat:   no-repeat;
    background-size:     100%;
    display:             block;

    aspect-ratio: 1.5;
    width:        100%;
}

/*--Initial Product Positioning----------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
.initial-product-positioning-container{
    border-top:     1px solid var(--border-light);
    transform:      translate(-50%);
    margin-bottom:  10rem;
    margin-left:    50%;
    padding-top:    4rem;
    width:          70rem;
    max-width:      calc(100% - 4rem);
}
.initial-product-positioning-content{
    width:       calc(100% - 2rem);
    text-align:  center;
    margin-left: 1rem;
}
.initial-product-positioning-content h2{
    color:       var(--text-blue-dark);
    font-size:   2.5rem;
    text-align:  center;
    margin-bottom: 2rem;
}
.initial-product-positioning-content p{
    font-size:     1.1rem;
    margin-bottom: 4rem;
}
.initial-product-positioning-list{
    justify-content: space-evenly;
    align-items:     flex-start;
    flex-wrap:       wrap;
    display:         flex;
}
.initial-product-positioning-list-card{
    box-shadow:    0px 0px 1rem rgba(0, 0, 0, 0.1);
    padding:       1rem;
    height:        11rem;
    width:         20rem;
    border-radius: var(--border-radius-3);
    transition:    ease-in-out 0.1s;
    margin-bottom: 1rem;
}
.initial-product-positioning-list-card:hover{
    transform: translateY(-0.25rem);
}
.initial-product-positioning-list-card-title{
    color:         var(--accent-blue-3);
    font-weight:   600;
    font-size:     1.25rem;
    margin-bottom: 0.5rem;
}

/*--Initial Solution Section-------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
.initial-solution-section{
    background-color: var(--accent-blue-7-old);
    position:         relative;
}
.initial-solution-container{
    max-width: 70rem;
    padding:   0 2rem;
    margin:    0 auto;
}
.initial-solution-header{
    margin-bottom: 5rem;
    text-align:    center;
}
.initial-solution-title{
    color:     var(--dark-blue);
    font-size: 2.5rem;
}
.initial-solution-blue-text{
    color: var(--accent-blue-3-old);
}
.initial-solution-features-grid{
    flex-direction: column;
    display:        flex;
    gap:            1rem;
}
.initial-solution-feature-card{
    border:        1px solid var(--accent-blue-8-old);
    border-radius: var(--border-radius-3);
    background:    var(--background-main);
    padding:       1.5rem;
    gap:           1rem;

    transition:  ease-in-out 0.1s;
    align-items: flex-start;
    display:     flex;
}
.initial-solution-feature-card:hover{
    transform: translateY(-0.25rem);
}
.initial-solution-feature-icon{
    border-radius: var(--border-radius-3);
    background:    var(--accent-blue-7-old);
    font-size:     2rem;
    height:        4rem;
    width:         4rem;
    flex-shrink:   0;
    position:      relative;

    justify-content: center;
    align-items:     center;
    display:         flex;
}
.initial-solution-feature-text{
    justify-content: flex-start;
    align-items:     flex-start;
    display:         flex;
    flex-direction:  column;
}
.initial-solution-feature-text h3{
    color:       var(--text-gray);
    margin:      0 0 0.25rem 0;
    font-size:   1.3rem;
    font-weight: 600;
}
.initial-solution-feature-text p{
    color:         var(--text-main-light);
    margin-bottom: 0.5rem;
    font-size:     0.9rem;
    height:        100%;
}
.initial-solution-outcome{
    color:       var(--accent-blue-3-old);
    display:     inline-block;
    font-size:   1.05rem;
    font-weight: 600;
}
.initial-solution-footer{
    text-align: center;
    margin-top: 5rem;
}
.initial-solution-savings-badge{
    color:         var(--dark-blue);
    margin-bottom: 1rem;
    font-size:     1.4rem;
}
#initial-solution-button{
    transform:     translate(-50%);
    margin-bottom: 5rem;
    margin-left:   50%;
    font-size:     1.1rem;
    width:         16rem;
    height:        4rem;
}
.initial-solution-calendar-svg{
    color:  var(--accent-blue-3);
    height: 3rem;
    width:  3rem;

    --sw:             0.5rem;
    --calendar-head:  var(--accent-blue-3);
    --selected-day:   var(--accent-blue-3);
    --day-off:        rgba(052, 144, 253, 0.2);
}
.initial-solution-pen-paper-svg{
    color:  var(--accent-blue-3);
    height: 3rem;
    width:  3rem;

    --sw-1: 1rem;
    --sw-2: 0.5rem;
}
.initial-solution-star-svg{
    transform: translate(15%);
    color:     var(--accent-blue-3);
    height:    2.5rem;
    width:     2.5rem;

    --sw: 1.5rem;
}
.initial-solution-star-svg-2{
    transform: scale(0.5);
    position:  absolute;
    left:      0rem;
    top:       0rem;

    --sw: 3rem;
}
.initial-solution-star-svg-3{
    transform: scale(0.33);
    position:  absolute;
    left:      0rem;
    bottom:    0rem;

    --sw: 4rem;
}
.initial-solution-chart-svg{
    color:  var(--accent-blue-3);
    height: 2.5rem;
    width:  2.5rem;

    --chart-red:   var(--accent-blue-3);
    --chart-blue:  var(--accent-blue-3);
    --chart-green: var(--accent-blue-3);
    --sw-1:        1rem;
    --sw-2:        0.5rem;
}
.initial-solution-cloud-svg{
    color:  var(--accent-blue-3);
    height: 3rem;
    width:  3rem;

    --sw: 1.5rem;
}

/*--Initial Steps Section----------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
.initial-steps-section{
    border-bottom:    1px solid var(--background-gray-1);
    background-color: var(--white);
    margin-left:      1rem;
    max-width:        calc(100% - 2rem);
    padding:          5rem 2rem;
}
.initial-steps-section-title{
    font-size:     1.25rem;
    text-align:    center;
    width:         100%;
    font-weight:   bold;
    margin-bottom: 5rem;
    opacity:       0.5;
}
.initial-steps-section-head-title{
    color:         var(--dark-blue);
    text-align:    center;
    font-size:     2.5rem;
    width:         100%;
    font-weight:   bold;
    margin-bottom: 0.5rem;
}
.initial-steps-section-head-subtitle{
    text-align:    center;
    font-size:     1.25rem;
    width:         100%;
    margin-bottom: 6rem;
    opacity:       0.5;
}
.initial-steps-holder{
    display:         flex;
    flex-wrap:       wrap;
    justify-content: center;
    gap:             3rem;

    max-width:     calc(100vw - 2rem);
    width:         100%;
    margin-bottom: 7rem;
    margin-top:    5rem;
}
.initial-step{
    box-shadow:    0px 0px 1rem rgba(0, 0, 0, 0.1);
    border-radius: var(--border-radius-3);
    padding:       1rem;
    padding-right: 2rem;
    padding-left:  2rem;
    min-height:    16rem;
    width:         100%;
    position:      relative;
    transition:    ease-in-out 0.1s;
    flex:          0 1 360px;
    min-width:     300px;
}
.initial-step:hover{
    transform: translateY(-0.25rem);
}
.initial-step-number{
    background-color: var(--accent-blue-3-old);
    border-radius:    100%;
    color:            var(--white);
    position:         absolute;
    font-weight:      bold;
    font-size:        1.5rem;

    aspect-ratio: 1;
    height:       2.5rem;

    justify-content: center;
    align-items:     center;
    display:         flex;

    left: -1rem;
    top:  -1rem;
}
.initial-step-title{
    font-size:     1.2rem;
    font-weight:   bold;
    width:         100%;
    margin-bottom: 1rem;
    margin-top:    1rem;
    height:        3rem;

    justify-content: flex-start;
    align-items:     center;
    display:         flex;
}
.initial-steps-section-text{
    transform:   translate(-50%);
    font-size:   1.1rem;
    margin-left: 50%;
    margin-top:  2rem;
    width:       50rem;
    max-width:   calc(100% - 4rem);
}
.initial-steps-section-text ul{
    transform:  translate(-1rem);
    margin-top: 0.5rem;
}

/*--Initial Promo Video Section----------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
.initial-promo-video-section{
    transform:       translate(-50%);
    padding-bottom:  5rem;
    margin-left:     50%;
    width:           100%;
    max-width:       calc(100vw - 2rem);
}
.initial-promo-video-title{
    justify-content: center;
    align-items:     center;
    text-align:      center;
    font-weight:     bold;
    display:         flex;
    
    color:      var(--dark-blue);
    margin-top: 7rem;
    font-size:  2rem;
    width:      100%;
}
.initial-promo-video-text{
    justify-content: center;
    align-items:     center;
    text-align:      center;
    font-style:      italic;
    font-weight:     bold;
    display:         flex;

    margin-bottom: 3rem !important;
    transform:     translate(-50%);
    margin-top:    0.5rem;
    font-size:     1.25rem;
    margin-left:   50%;
    width:         100%;
    opacity:       0.5;
}
.initial-promo-video-holder{
    transform:    translate(-50%);
    aspect-ratio: 1.76;
    margin-left:  50%;
    width:        50rem;
    max-width:    100%;

    justify-content: center;
    align-items:     flex-start;
    position:        relative;
    display:         flex;
}
.initial-promo-video{
    border:        1px solid var(--border);
    border-radius: var(--border-radius-2);
    max-width:     calc(100vw - 4rem);
    height:        100%;
    width:         100%;
}
.initial-promo-blue-accent{
    color:       var(--accent-blue-3-old);
    margin-left: 0.3rem;
}
.play-button{
    transform:     translate(-50%, -50%);
    border-radius: 100%;
    position:      absolute;
    height:        5rem;
    width:         5rem;
    left:          50%;
    top:           50%;
}
.play-button-icon{
    transform: translate(5%);
    color:     var(--white);
    height:    3rem;
    width:     3rem;
}

/*--Initial Testimonials Section---------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
.initial-testimonials-section{
    border-top:       1px solid var(--background-gray-1);
    background-color: var(--background-main);
    margin-left:      1rem;
    max-width:        calc(100% - 2rem);
    padding:          5rem 2rem;
}
.initial-testimonials-container{
    text-align: center;
    max-width:  70rem;
    margin:     0 auto;
}
.initial-testimonials-heading{
    color:         var(--dark-blue);
    margin-bottom: 3rem;
    font-weight:   700;
    font-size:     2rem;
}
.initial-testimonials-grid{
    display:         flex;
    flex-wrap:       wrap;
    justify-content: center;
    gap:             1rem;
}
.initial-testimonial-card{
    border:           1px solid var(--background-gray-1);
    transition:       transform 0.1s ease-in-out;
    background-color: var(--accent-blue-7-old);
    border-radius:    var(--border-radius-3);
    position:         relative;
    text-align:       left;

    justify-content: space-between;
    flex-direction:  column;
    overflow:        hidden;
    display:         flex;
    
    padding-right: 1rem;
    padding-left:  1rem;
    padding-top:   1rem;

    flex:      0 1 360px;
    min-width: 300px;
}
.initial-testimonial-card:hover{
    transform: translateY(-0.25rem);
}
.initial-testimonial-quote-icon{
    color:       var(--accent-blue-2-old);
    position:    absolute;
    font-family: serif;
    font-size:   4rem;
    line-height: 1;
    opacity:     0.3;
    right:       1rem;
    top:         0.25rem;
}
.initial-testimonial-main{
    justify-content: flex-start;
    align-items:     flex-start;
    display:         flex;
}
.initial-testimonial-text{
    height:        9rem !important;
    color:         var(--text-main);
    margin-bottom: 2rem;
    font-size:     0.85rem;
    margin-top:    1rem;
    z-index:       1;
    position:      relative;
}
.initial-testimonial-author{
    border-bottom:  1px solid rgba(67, 140, 191, 0.1);
    padding-bottom: 1rem;
}
.initial-testimonial-author-icon{
    background-position: center center;
    background-position: top center;
    background-size:     cover;

    border-radius: var(--border-radius-2);
    margin-right:  0.5rem;
    margin-top:    1.25rem;
    flex-shrink:   0;
    height:        9.75rem;
    width:         7rem;
}
.initial-testimonial-author-name{
    color:       var(--dark-blue);
    font-size:   1.1rem;
    font-weight: 700;
    display:     block;
}
.initial-testimonial-author-role{
    color:     var(--text-gray-light);
    font-size: 0.9rem;
    display:   block;
}
#initial-testimonial-author-icon-1{
    background-image: url("../assets/initial/testimonial 1.jpeg");
}
#initial-testimonial-author-icon-2{
    background-image: url("../assets/initial/testimonial 2.jpeg");
}
#initial-testimonial-author-icon-3{
    background-image: url("../assets/initial/testimonial 3.jpeg");
}

/*--Initial Trust Section----------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
.initial-trust-section{
    background-color: var(--accent-blue-7-old);
}
.initial-trust-container{
    text-align:  center;
    padding-top: 3rem;
    max-width:   60rem;
    margin:      0 auto;
}
.initial-security-badge{
    background-color: var(--background-main);
    border:           1px solid var(--accent-blue-3-old);
    border-radius:    var(--border-radius-3);
    display:          inline-flex;
    align-items:      center;

    color:         var(--text-main);
    padding:       0.5rem 1rem;
    margin-bottom: 2rem;
    font-size:     0.9rem;
    font-weight:   700;
    margin-top:    1rem;
    gap:           0.5rem;
}
.initial-security-badge svg{
    color: var(--accent-blue-3-old);
    width: 1.5rem;
}
.initial-trust-grid{
    justify-content: center;
    flex-wrap:       wrap;
    display:         flex;

    gap:           1rem 2rem;
    margin-bottom: 2rem;
}
.initial-trust-item{
    color:     var(--text-main);
    position:  relative;
    font-size: 1.1rem;
}
.initial-trust-item::before{
    color:        var(--accent-blue-3-old);
    margin-right: 0.5rem;
    font-weight:  bold;
    content:      "✓";
}
.initial-trust-footer{
    color:          var(--text-gray-light);
    padding-bottom: 5rem;
    font-weight:    600;
}

/*--Initial CTA Section------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
.initial-final-cta-section{
    padding-bottom: 10rem;
    padding-top:    3rem;

    text-align: center;
    position:   relative;
}
.initial-cta-container{
    margin-top: 3rem;
}
.initial-cta-title{
    color:         var(--dark-blue);
    margin-bottom: 3rem;
    font-size:     2.5rem;
}
#initial-cta-button{
    transform:     translate(-50%);
    border-radius: 1.5rem;
    font-size:     1.5rem;
    margin-left:   50%;
    height:        4rem;
    width:         20rem;
}

/*--Mobile Dispaly-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media (max-width:768px){
    .initial-trust-grid{
        flex-direction: column;
        gap:            1rem;
    }
    .initial-testimonials-heading{
        font-size: 1.75rem;
    }
    .feature-card{
        flex-direction: column;
        align-items:    center;
        text-align:     center;
    }
    .initial-step{
        font-size:1rem;
    }
}
@media (max-width:900px){
    .initial-promo-video-title{
        flex-direction: column;
    }
    .pain-container{ 
        text-align: left; 
        gap:        40px;
    }
    .pain-title{
        font-size: 2.4rem;
    }
    .mascot-column{
        order: 1;
    } 
    .copy-column{
        order: 2;
    }
}