@media (min-width: 1920px) {
    #all-inclusive .form_col:after {
        left: 650px;
    }
}

@media (min-width: 1400px) {
    
}

@media (min-width: 1200px) {
    
}

@media (min-width: 992px) {
    
}

@media (min-width: 768px) {
    
}

@media (max-width: 1399.98px) {
    #benefits .cards {
        padding: 2rem 1.6rem;
    }
    
        #benefits .cards > div {        
            min-height: calc(365px - 4rem);
        }

    #benefits .cards.Wellness_Marketplace {
        padding: 1.2rem 1.6rem;
    }

        #benefits .cards.Wellness_Marketplace > div {        
            min-height: calc(365px - 2.4rem);
        } 

    #experience .phone {
        width: 40vw;
    }

    #all-inclusive .icon_col .wrapper {
        width: unset;
    }

    #all-inclusive .form_col .wrapper {
        width: 30vw;
    }
}

@media (max-width: 1199.98px) {
        
    header .navbar-brand img,
    footer .navbar-brand img {
        width: 225px;
    }

    header .navbar-expand-xl .navbar-nav {
        padding: 0 2rem;
    }
    
        header .navbar-expand-xl .navbar-nav .nav-link {
            text-align: left;
        }
        
        header .nav-item > .dropdown-menu {
            display: block;
            box-shadow: none;
            width: auto;
        }
        
        header .nav-item > .dropdown-menu a {
            white-space: nowrap;
        }

    #experience:before {
        height: calc(50% + 120px);
    }

    #experience .icons p {
        padding: 0;
    }

    #experience .phone {
        background-size: 120%;
    }
}

@media (max-width: 991.98px) {
    html {
        font-size: 14px;
    }

    #banner {
        text-align: center;
        background: url("/assets/landing/CXA-Portal/img/banner-iphone.png") no-repeat calc(50% + 30vw) 20px;
        background-size: 50vw;
    }
        
        #banner .container-lg {
            background: url("/assets/landing/CXA-Portal/img/banner-01.png") no-repeat calc(50% - 10vw) 0;
            background-size: 50vw;
        }
            
            #banner .container-lg h1 {
                margin-top: 60vw;
            }

    #benefits {
        margin-top: 60px;
    }
    

        #benefits .cards {
            padding: 3rem 2.4rem;
        }
        
            #benefits .cards > div {        
                min-height: calc(300px - 6rem);
            }

        #benefits .cards.Benefits_Selection > div {     
            min-height: calc(380px - 6rem);
        }

        #benefits .cards.Wellness_Marketplace > div {        
            min-height: calc(380px - 2.4rem);
        }

            #benefits .cards.Wellness_Marketplace .text-col {
                padding: 1.7rem 3rem 0;
            }
        
            #benefits .cards.Wellness_Marketplace .text-col:before {
                height: 150%;
            }

        #benefits .cards.Wellness_Marketplace .text-col:before {
            top: -25%;
        }
        #benefits .cards.Wellness_Marketplace .text-col:after {
            position: absolute;
            top: -90%;
            left: 0;
            content: "";
            width: 100%;
            height: 100%;
            background-color: #F9F9F9;
            z-index: 0;
            border-radius: 30px;
        }
    
    #experience:before {
        height: calc(50% + 90px);
    }

    #experience .phone {
        width: 50vw;
    }

    #realtime-data .background {
        background: url("/assets/landing/CXA-Portal/img/images_iphone_03_3.jpg") no-repeat center;  
        background-size: cover;
        aspect-ratio: 1/1;
        width: calc(100% + 3rem);
    }

    #realtime-data {
        margin-top: 50px;
    }    

    #all-inclusive .form_col .wrapper {
        width: 50vw;
    }

    #all-inclusive .form_col:after {
        left: 60vw;
    }
}

@media (max-width: 767.98px) {
    #banner {
        background-size: 60vw;
    }
}

@media (max-width: 575.98px) {
    #banner {
        background-size: 70vw;
    }

    #benefits:before {
        top: 500px;
    }

    #benefits .cards.Wellness_Marketplace {
        padding-top: 3rem;
    }
        
        #benefits .cards.Wellness_Marketplace .text-col {
            padding: 2rem 1rem 1rem;
        }

        #benefits .cards.Wellness_Marketplace .text-col:after {
            top: -95%;
        }
        
        #benefits .cards.Benefits_Selection > div {     
            min-height: calc(300px - 3rem);
        }

    #experience .phone {
        background-size: 100%;
        width: 100%;
        aspect-ratio: 597 / 849;
    }

    #experience:before {
        height: calc(50% + 90px + (597/849*100vw));
    }

    #experience h1 {
        margin-bottom: 30px;
    }

    #experience .icons {
        min-height: 155px;
        margin-bottom: 30px;
        margin-top: 20px;
    }

    #realtime-data {
        margin-top: 0;
    }

        #realtime-data .background {
            background: url("/assets/landing/CXA-Portal/img/images_iphone_03_2.jpg") no-repeat center;  
            background-size: cover;
            width: 100vw;     
            aspect-ratio: 600 / 354;
        }

    #all-inclusive .form_col .wrapper {
        width: 100%;
        max-width: 100%;
        padding-top: 400px;
    }

    #all-inclusive .form_col:after {
        content: "";
        display: block;
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 400px;
        background: url("/assets/landing/CXA-Portal/img/images_iphone_04_mobile.png") no-repeat center, linear-gradient(0deg, rgba(255,255,255,1) 200px, rgba(8,49,88,1) 200px);
        z-index: -1;
    }
}