:root{
    /* external image */
    --background-banner-desktop: url("https://cors-web.aver.com/Contents/LandingPages/partner-program/assets/images/promote-banner.jpg");
    --background-banner-tablet: url("https://cors-web.aver.com/Contents/LandingPages/partner-program/assets/images/mobile-promote-banner.jpg");
    --background-banner-mobile: url("https://cors-web.aver.com/Contents/LandingPages/partner-program/assets/images/promote-banner.jpg");

    --background-promote-desktop: url("https://cors-web.aver.com/Contents/LandingPages/partner-program/assets/images/promote-banner-block.svg");
    
    /* set color  */
    --pink: #E6B9DE;

    /* section background */
    --backgroung-header: #050c9c;
    --backgroung-introduce: linear-gradient(to bottom,
        #FFFFFF, 
        #F0FAFE,
        #E1F5FD);
    --background-tier: linear-gradient(to bottom, 
        #BAC2C7 , 
        #8F9699 20%,
        #434647 50%, 
        #000000 80%);
    --background-conferencing: linear-gradient(to bottom,
        #323232,
        #414141);

    /* awards */
    --level-background: linear-gradient(to bottom,
        #000000,
        #191919);
    --level-bronze: linear-gradient(135deg, 
        #DE9D70, 
        #fafafa 30%, 
        #DE9D70 50%);
    --level-silver: linear-gradient(135deg, 
        #C8D2DE, 
        #fafafa 30%, 
        #C8D2DE 50%);
    --level-gold: linear-gradient(135deg, 
        #F4DA85, 
        #fafafa 30%, 
        #F4DA85 50%);

    /* commitment */
    --background-commitment: linear-gradient(to bottom,
        #FAE7F3,
        #F0D1E9 20%,
        #E6B9DE 40%,
        #000000 80%);

    /* partner information */
    --background-info: linear-gradient(to bottom,
        #F0F0F0,
        #FAE7F3 50%,
        #FFFFFF);
}
html{
    overflow-x: hidden;
}
a{
    font-weight: 700;
    &:hover{
        outline: none;
    }
}
img{
    width: 100%;
}
ul,li{
    list-style: none;
    margin-bottom: 0;
}
article{
    p{
        color: #eaeaea;
    }
}

.skip-link{
    a{
        z-index: -1;
    }
}
.grecaptcha-badge{
    z-index: 1;
}
.choices__inner{
    border-radius: 1rem;
}

body{
    div:where(.swal2-container) h2:where(.swal2-title){
        font-size: 2.5rem;
    }
    div:where(.swal2-container) .swal2-html-container{
        font-size: 2rem;
    }
    .swal2-html-container{
        iframe{
            max-width: 475px;
            width: 100%;
            min-height: 475px;
            margin-top: 2rem;
        }
    }
}

.main{
    min-height: calc(100vh - 6.4rem - 532px);
    .choices[data-type*=select-multiple] .choices__inner,
    .choices[data-type*=text] .choices__inner{
        padding-block: 0;
        input{
            margin-block: 0 !important;
        }
    }
    .banner{
        display: flex;
        flex-direction: column;
        height: calc(100vh - 6.4rem);
        background: var(--background-banner-desktop);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center center;
        opacity: 0;
        &.loaded{
            opacity: 1;
            transition: opacity .15s linear;
            .title{
                &:after{
                    left: -15%;
                    opacity: 1;
                    @media screen and (max-width: 768px) {
                        transition: none;
                        left: 0;
                    }
                }
                .details{
                    opacity: 1;

                    @media screen and (max-width: 768px) {
                        width: 80%;
                    }
                }
            }
        }
        @media screen and (max-width:1200px) {
            background: var(--background-banner-tablet);
            background-position: center center;
        }
        @media screen and (max-width:768px) {
            background: var(--background-banner-mobile);
            background-position: 70% center;
        }
        .title{
            position: relative;
            display: flex;
            flex-direction: column;
            height: 100%;
            color: #FFFFFF;
            overflow: hidden;
            z-index: 1;
            &:after{
                content: "";
                position: absolute;
                top: 0;
                left: -30%;
                width: 100%;
                height: 100%;
                background: var(--background-promote-desktop);
                background-repeat: no-repeat;
                opacity: 0;
                z-index: -1;
                @media screen and (max-width:1200px) {
                    left: 0;
                    background: url("");
                };
                @media screen and (max-width:768px) {
                    top: 50%;
                    background: rgba(5, 13, 158, .8);
                    height: 50vh;
                };
                transition: all .5s ease-out;
                transition-delay: .25s;
            }
            .details{
                position: absolute;
                top: 50%;
                left: 15%;
                transform: translate(-15%, -50%);
                width: 30%;
                opacity: 0;
                @media screen and (max-width:1200px) {
                    width: 50%;
                };
                @media screen and (max-width:768px) {
                    top: 70%;
                };
                transition: opacity .5s ease-out;
                transition-delay: .75s;
            }
        }
        .bar{
            position: relative;
            display: flex;
            justify-content: center;
            background: var(--backgroung-header);
            /* background: linear-gradient(to right, #656cfc, #050C9C 40%, #050C9C 60%, #656cfc ); */
            padding: 1.5rem;
            margin-bottom: 0;
            box-shadow: 0 -6px 6px rgba(5, 13, 52, .4);
            @media screen and (max-width: 768px) {
                flex-wrap: wrap;
            }
            li{
                list-style: none;
                display: flex;
                &::after{
                    content: "";
                    border-right: 1px solid #fff;
                    margin: .5rem 2rem;
                }
                &:first-child{
                    &::before{
                        content: "";
                        border-left: 1px solid #fff;
                        margin: .5rem 2rem;
                    }
                }
                a{
                    min-width: 12rem;
                    width: 100%;
                    text-align: center;
                    color: #fff;
                    padding: .5rem 1.5rem;
                }
            }
        }
    }
    .introduces{
        background: var(--backgroung-introduce);
        padding-block: 6rem;
        .zone{
            width: 80%;
            margin: auto;
            @media screen and (max-width:768px) {
                width: 95%;
            }
            .missions{
                display: flex;
                flex-direction: row;
                justify-content: center;
                margin-block: 5rem;
                @media screen and (max-width:1024px) {
                    flex-wrap: wrap;
                }
                .mission{
                    padding: .5rem;
                    .content{
                        text-align: center;
                    }
                    @media screen and (max-width: 768px) {
                        display: flex;
                        width: 100%;
                        .picture{
                            display: flex;
                            justify-content: center;
                            width: 50%;
                            margin: auto;
                            img{
                                width: 75%;
                            }
                        }
                        .content{
                            margin: auto;

                        }
                        &:nth-child(even){
                            .picture{
                                order: 2;
                            }
                        }
                    }
                }
            }
            .growth{
                width: 60%;
                margin: auto;
                padding: 2.5rem;
                margin-block: 2rem;
                background: linear-gradient(#F3FDFE, #F7FCFF, #F4FCFF);
                box-shadow:  0 0 8px 8px rgba(203, 219, 235, .6);
                border-radius: 3rem;
                @media screen and (max-width:1440px) {
                    width: 100%;
                }
                .picture{
                    max-width: 100px;
                    width: 100%;
                    aspect-ratio:  1 / 1;
                    margin: auto;
                }
                p{
                    width: 85%;
                    padding: .5rem 0;
                    margin: 0 auto;
                    text-align: center;
                    font-weight: 700;
                }
            }
        }
    }
    .tier{
        /* background: var(--background-conferencing); */
        background: #000000;
        color: #ffffff;
        .zone{
            /* background: var(--background-tier); */
            /* clip-path: polygon(0 0, 100% 0, 100% 90%, 50% 100%, 0 90%); */
            .tier-structure{
                position: relative;
                article{
                    position: absolute;
                    top: 50%;
                    left: 70%;
                    transform: translate(-50%, -70%);
                    width: 40rem;
                    padding: 1rem;
                    @media screen and (max-width: 768px) {
                        left: 50%;
                        transform: translate(-50%, -50%);
                    }
                    @media screen and (max-width: 575px) {
                        position: relative;
                        width: 80%;
                        transform: translate(-50%, -20%);
                    }
                }
            }
            .missions{
                padding-top: 2rem;
                h2{
                    text-align: center;
                    margin: 2rem;
                }
                .product-line-up{
                    display: grid;
                    grid-template-columns: 1fr 1fr;
                    gap: 1rem;
                    width: 60%;
                    margin: auto;
                    padding: 3rem 0 8rem;
                    @media screen and (max-width: 768px) {
                        grid-template-columns: 1fr;
                    }
                    li{
                        img{
                            width: 100%;
                        }
                        .content{
                            text-align: center;
                        }
                    }
                }
            }
        }
        .video-conferencing{
            display: flex;
            flex-direction: column;
            align-items: center;
            margin-top: -12rem;
            padding-block: 12rem;
            article{
                margin-block: 2rem;
                text-align: center;
                @media screen and (max-width: 1024px) {
                    width: 80%;
                    margin: auto;
                }
            }
            .awards{
                display: grid;
                grid-template-columns: 1fr 1fr;
                gap: 1rem;
                width: 60%;
                margin: auto;
                padding: 0;
                @media screen and (max-width: 1024px) {
                    grid-template-columns: 1fr;
                    width: 80%;
                }
                .award{
                    padding: 3.5rem 1.5rem 5rem;
                    border-radius: 2rem;
                    background: var(--level-background);
                    color: #eaeaea;
                    box-shadow: 0 0 10px rgba(25, 25, 25, .8);;
                    transition: box-shadow .35s linear;
                    @media screen and (max-width: 1024px) {
                        display: flex;
                        padding: 3.5rem 1.5rem;
                    }
                    &:hover{
                        box-shadow: 0 0 10px rgba(170, 170, 170, .8);
                    }
                    &.award-1{
                        .award-list{
                            li{
                                &:before{
                                    background: var(--level-bronze);
                                }
                            }
                        }
                    }
                    &.award-2{
                        .award-list{
                            li{
                                &:before{
                                    background: var(--level-silver);
                                }
                            }
                        }
                    }
                    &.award-3{
                        .award-list{
                            li{
                                &:before{
                                    background: var(--level-gold);
                                }
                            }
                        }
                    }
                    img{
                        padding: 4rem;
                        @media screen and (max-width: 1024px) {
                            width: 25%;
                            padding: 2rem;
                        }
                        @media screen and (max-width: 575px) {
                            width: 33%;
                            padding: 1rem;
                        }
                    }
                    .award-list{
                        position: relative;
                        li{
                            position: relative;
                            margin-bottom: 1.5rem;
                            &:before{
                                content: "";
                                position: absolute;
                                top: .8rem;
                                left: -1.2rem;
                                width: .8rem;
                                aspect-ratio: 1 / 1;
                                border-radius: 50%;
                            }
                        }
                    }
                }
            }
        }
    }
    .benefits{
        display: grid;
        grid-template-columns: 1fr 3fr;
        gap: clamp(5rem, 10vw, 8rem);
        width: 75%;
        margin: auto;
        padding: 10rem 2rem;
        @media screen and (max-width:1440px) {
            grid-template-columns: minmax(1fr, 250) 3fr;
        }
        @media screen and (max-width:1024px) {
            text-align: center;
            grid-template-columns: 1fr;
            width: 80%;
        }
        artitle{

        }
        .gallerys{
            display: grid;
            grid-template-columns: repeat(2, minmax(200px, 1fr));
            gap: 5rem 6rem;
            .gallery{
                display: flex;
                flex-direction: column;
                img{
                    width: 20%;
                    @media screen and (max-width:1024px) {
                        margin: auto;
                    }
                }
            }
            @media screen and (max-width:1440px) {
                grid-template-columns: repeat(2, minmax(200px, 1fr));
            }
            @media screen and (max-width:768px) {
                grid-template-columns: 1fr;
            }
            
        }
    }
    .commitment{
        background: var(--background-commitment);
        .container{
            padding-top: 3rem;
            article{
                text-align: center;
                margin-bottom: 5rem;
                p{
                    color: #2d2e2b;
                }
            }
            .gallerys{
                display: flex;
                gap: 10px;
                @media screen and (max-width: 991px) {
                    flex-wrap: wrap;
                    justify-content: center;
                }
                .gallery{
                    display: flex;
                    flex-direction: column;
                    gap: 10px;
                    .gallery-text{
                        display: flex;
                        flex-direction: column;
                        justify-content: center;
                        max-height: 450px;
                        width: 100%;
                        aspect-ratio: 2 / 3;
                        color: #ffffff;
                        padding: 2rem;
                        border-radius: 3rem;
                    }
                    .gallerys-picture{
                        &.length-format{
                            width: 100%;
                            height: 100%;
                            img{
                                height: 100%;
                            }
                        }
                    }
                }

                .gallery-1{
                    height: fit-content;
                    .gallery-text{
                        background: url("https://cors-web.aver.com/Contents/LandingPages/partner-program/assets/images/commitment-05.png");
                        background-repeat: no-repeat;
                        background-size: cover;
                    }

                }
                .gallery-2{
                    height: fit-content;
                    .gallery-text{
                        background: url("https://cors-web.aver.com/Contents/LandingPages/partner-program/assets/images/commitment-06.png");
                        background-repeat: no-repeat;
                        background-size: cover;
                    }

                }
                .gallery-3{
                    height: fit-content;
                    .gallery-text{
                        background: url("https://cors-web.aver.com/Contents/LandingPages/partner-program/assets/images/commitment-07.png");
                        background-repeat: no-repeat;
                        background-size: cover;
                    }
                }
                .gallery-4{
                }
            }

        }
        .sign-me{
            .container{
                padding-top: 4rem;
                text-align: center;
                color: #eaeaea;
                h3{
                    margin-bottom: 2.5rem;
                }
            }
            .steps{
                position: relative;
                margin-top: 10rem;
                border: 3px solid #E6B9DE;
                @media screen and (max-width: 768px) {
                    margin-top: 0;
                    border: none;
                }
                .container{
                    position: relative;
                    padding: 0;
                    @media screen and (max-width: 768px) {
                        padding: 1.5rem;
                    }
                    .step{
                        @media screen and (max-width: 768px) {
                            display: flex;
                            margin-bottom: 1rem;
                        }
                        img{
                            position: absolute;
                            top: 0;
                            transform: translate(0, -50%);
                            width: 10%;
                            @media screen and (max-width: 768px) {
                                position: relative;
                                left: 0;
                                transform: none;
                                margin-right: 1rem;
                                width: 20%;
                            }
                        }
                        artitle{
                            position: absolute;
                            transform: translate(0, 40%);
                            max-width: 15rem;
                            width: 100%;
                            height: 15rem;
                            color: #000000;
                            @media screen and (max-width: 768px) {
                                position: relative;
                                left: 0;
                                transform: none;
                                max-width: none;
                                height: fit-content;
                                color: #ffffff;
                                text-align: left;
                            }
                            p{
                                font-size: 1.2rem;
                                color: #2d2e2b;
                                @media screen and (max-width: 768px) {
                                    color: #eaeaea;
                                }
                            }
                        }
                        &.step-1{
                            img{
                                left: 15%;
                                @media screen and (max-width: 1200px) {
                                    left: 5%;
                                }
                                @media screen and (max-width: 768px) {
                                    left: 0;
                                }
                            }
                            artitle{
                                left: calc(15% - 1.65rem);
                                @media screen and (max-width: 1200px) {
                                    left: calc(5% - 2.65rem);
                                }
                                @media screen and (max-width: 991px) {
                                    left: calc(5% - 3.75rem);
                                }
                                @media screen and (max-width: 768px) {
                                    left: 0;
                                }
                            }
                        }
                        &.step-2{
                            img{
                                left: 45%;
                                @media screen and (max-width: 1200px) {
                                    left: 31.3%;
                                }
                                @media screen and (max-width: 768px) {
                                    left: 0;
                                }
                            }
                            artitle{
                                left: calc(45% - 1.65rem);
                                @media screen and (max-width: 1200px) {
                                    left: calc(31.3% - 2.65rem);
                                }
                                @media screen and (max-width: 991px) {
                                    left: calc(31.3% - 3.75rem);
                                }
                                @media screen and (max-width: 768px) {
                                    left: 0;
                                }
                            }
                        }
                        &.step-3{
                            img{
                                left: 75%;
                                @media screen and (max-width: 1200px) {
                                    left: 57.6% ;
                                }
                                @media screen and (max-width: 768px) {
                                    left: 0;
                                }
                            }
                            artitle{
                                left: calc(75% - 1.65rem);
                                @media screen and (max-width: 1200px) {
                                    left: calc(57.6% - 2.65rem);
                                }
                                @media screen and (max-width: 991px) {
                                    left: calc(57.6% - 3.75rem);
                                }
                                @media screen and (max-width: 768px) {
                                    left: 0;
                                }
                            }
                        }
                        &.step-4{
                            img{
                                left: 75%;
                                @media screen and (max-width: 1200px) {
                                    left: 85%;
                                }
                                @media screen and (max-width: 768px) {
                                    left: 0;
                                }
                            }
                            artitle{
                                left: calc(75% - 1.65rem);
                                @media screen and (max-width: 1200px) {
                                    left: calc(85% - 2.65rem);
                                }
                                @media screen and (max-width: 991px) {
                                    left: calc(85% - 3.65rem);
                                }
                                @media screen and (max-width: 768px) {
                                    left: 0;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
    .info{
        background: url("https://cors-web.aver.com/Contents/LandingPages/partner-program/assets/images/sign-in-background.svg");
        min-height: 100vh;
        .container{
            width: 60%;
            background: rgba(0, 0, 0, .7);
            margin: 20rem auto;
            padding: 5rem 0;
            border-radius: 2rem;
            @media screen and (max-width:768px) {
                width: 95%;
            }
            article{
                text-align: center;
                @media screen and (max-width:768px) {
                    padding-inline: .5rem;
                }
                h3{
                    color: #ffffff;
                    margin-top: 0;
                }
            }
            .tab_form{
                display: flex;
                flex-direction: column;
                width: 80%;
                margin: auto;
                label{
                    margin-bottom: 1rem;
                    &[for="email"]{
                        .warn{
                            color: #ec3341;
                            a{
                                color: #1976D2;
                            }
                        }
                        .pass{
                            color: #4CAF50;
                        }
                    }
                    &[for="portalOpt"]{
                        padding-top: .5rem;
                    }
                    span{
                        width: fit-content;
                        color: #ffffff;
                    }
                    input,select{
                        min-height: 45px;
                        width: 100%;
                        border-radius: 1rem;
                        margin-block: .5rem;
                        padding-inline: .5rem;
                        color: #000000;
                    }
                    .just-validate-error-label{
                        color: crimson;
                    }
                }
                button[type="submit"]{
                    width: fit-content;
                    margin: 2rem auto 0;
                    padding: 1rem 5rem;
                    border: 2px solid #ffffff;
                    border-radius: 5px;
                    background: none;
                    color: #ffffff;
                    &:hover{
                        background: #ffffff;
                        color: #303030;
                    }
                    &:disabled{
                        &:hover{
                            background: none;
                            color: #ffffff;
                            cursor: not-allowed;
                        }
                    }
                }
            }
        }
    }
}