/*
Theme Name: hello-elementor-child
Author: Thai Tai Tran
Description: Child Theme of Hello Elementor
Version: 1.0
Template: hello-elementor

This is the child theme for Hello Elementor theme, generated with Generate Child Theme plugin by catchthemes.

(optional values you can add: Theme URI, Author URI, License, License URI, Tags, Text Domain)
*/


/*Global Elements*/
    /*Highlight clevervital text in list element*/
    .yellow-highlight{
        color: #FFE962;
    }

    /*Glassmorphism*/
        /*General Glass Morph Class
        * Solution Section Box
        * Tokennomics Section Progressbar
        */
        .glassMorph,
        .solution-box .pt_plus_info_box:hover,
        .progress-glass .elementor-progress-wrapper{
            background: rgba(255, 255, 255, 0.3);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
        }

        /*Specific Glass morph for header button
        * menu background
        */
        #btn-glass,
        .elementor-sticky--effects{
            background: rgba(255, 255, 255, 0.4);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
        }

    /*vanilla Preloader*/
        /*Preloader layout*/
        .vanilla-preloader {
            position: fixed;
            left: 0px;
            top: 0px;
            width: 100%;
            height: 100%;
            z-index: 20000;
            opacity: 1;
            transition: 1s all;
            pointer-events:none;
            cursor: pointer;
            background: 50% 50% no-repeat #FFF;
            background-size: 40%;
        }

        .elementor-editor-active .vanilla-preloader {
            display: none;
        }

        .vanilla-preloader {
            display:flex;
            justify-content:center;
            align-items:center;
        }

        .vanilla-preloader lottie-player{
            opacity:1;
            transition: .5s all;
        }

        /*prevent scrolling and hide scrollbar while preloading*/
        .home .elementor-page {
            overflow: hidden;
            height: 100vh;
        }

    /*custom scrollbar Desktop*/
        /*hide old scrollbar*/
        @media(min-width:1025px){

            body {
                overflow-x:hidden;
            }

            /* Firefox */
            *{
                scrollbar-width: auto;
                scrollbar-color: #0F3B4C;
            }

            /* Chrome, Edge, and Safari */
            *::-webkit-scrollbar {
                width: 10px;
            }

            *::-webkit-scrollbar-track {
                background: #0F3B4C;
            }

            *::-webkit-scrollbar-thumb {
                background-color: #78E396;
                border-radius: 10px;
                border: 5px solid var( --e-global-color-6a90ea );
            }
        }

    /*Waitlist Forms*/
        /*cap width on mobile*/
        @media (max-width: 767px){
            :is(#waitlist-form-top,#waitlist-form-btm).waitlist-form {
                max-width: clamp(450px,70%,70%);
                margin-inline: auto;
            }
        }

    /*Waitlist buttons*/

        /*Set Up Hover Effect*/
            /*Before and After Elements representing the highlights*/
            .waitlist-form button:before, #btn-glass:before{
                content: '';
                display: block;
                position: absolute;
                background: rgba(255,255,255,1);
                width: 60px;
                height: 100%;
                left: 0;
                top: 0;
                opacity: .5;
                filter: blur(30px);
                transform: translateX(-100px)  skewX(-15deg);
            }

            .waitlist-form button:after,
            #btn-glass:after{
                content: '';
                display: block;
                position: absolute;
                background: rgba(255,255,255,1);
                width: 30px;
                height: 100%;
                left: 30px;
                top: 0;
                opacity: 0;
                filter: blur(5px);
                transform: translateX(-100px) skewX(-15deg);
            }

            /*Actual Hover Effect*/
            .waitlist-form button:hover:before, #btn-glass:hover:before{
                transform: translateX(300px) skewX(-15deg);
                opacity: .7;
                transition: 1.0s;
            }

            .waitlist-form button:hover:after, #btn-glass:hover:after{
                transform: translateX(300px) skewX(-15deg);
                opacity: 1;
                transition: 1.0s;
            }

            @media(max-width:767.5px){
                .waitlist-form button:hover:before, #btn-glass:hover:before{
                    transform: translateX(clamp(450px,70vw,70vw)) skewX(-15deg);
                    opacity: .7;
                    transition: 1.2s;
                }

                .waitlist-form button:hover:after, #btn-glass:hover:after{
                    transform: translateX(clamp(450px,70vw,70vw)) skewX(-15deg);
                    opacity: 1;
                    transition: 1.2s;
                }
            }

            /*Prevent Hover Effect overflow*/
            .elementor-field-type-submit, .elementor-field-type-submit button,#btn-glass {
                overflow:hidden;
            }

        /*Active Effect*/
        .waitlist-form button:active, #btn-glass:active{
            outline:none;
            transform: scale(0.9);
            background-color: var(--e-global-color-9108072);
        }

/*Sections*/
    /*Header*/
        /*change background on scroll*/
        .elementor-sticky--effects, .sticky-menu-items ul li a {
            transition: .5s all ease-in-out;
        }

        .elementor-sticky--effects #btn-glass{
            background: #FFE962;
        }

        /*Mozilla Fallback Background*/
        @-moz-document url-prefix() {
            #header-bar{
                background-color: #aeeec0;
            }
        }

        /*scroll Header*/
        #header-bar{
            transition : transform 0.34s ease;
        }

        .headerup{
            transform: translateY(-99.23px);
        }

        @media(max-width:1024.5px){
            .headerup{
                transform: translateY(-92px);
            }
        }

        @media(max-width:767.5px){
            .headerup{
                transform: translateY(-65.4px);
            }
        }

        /*remove default hover effect on Waitlist btn*/
        #btn-glass-container .elementor-widget-container:hover {
            transform: translateY(0);
        }

    /*Problem Section*/
        /*adjust circle shape on widget box*/
        #problem-section .circle-box{
            margin-inline:auto;
            max-width:350px;
        }

    /*Solution Section*/
        /*adjust circle shape on widget box*/
        .circle-box>*{
            display:flex;
            align-items: center;
            justify-content: center;
        }

        @media(min-width:1025px){
            .circle-box>*{
                aspect-ratio: 1/1;
            }
        }

        .circle-box .elementor-icon-box-wrapper{
            width:80%;
        }


        /*Box Icons*/
        .solution-box .pt_plus_info_box.info-box-style_3 .info-icon-content{
            display:block;
        }


        /*Solution Popup*/
            /*change fill color of checkmark icon*/
            .solution-popup .elementor-icon-list-icon circle{
                fill: #D0F6D966;
            }


            /*add border radius to close button*/
            .dialog-widget .dialog-close-button {
                border-radius: 40px;
                padding: 6px;
            }

    /*Our Values Section*/
        /*flip Box*/
            /*border-radius*/
            @media(min-width:768px){
                #flip-box-values-1 :is(.elementor-flip-box__front,.elementor-flip-box__back){
                    border-radius: 40px 40px 0 40px;
                }

                #flip-box-values-1 .elementor-flip-box__back{
                    right:20px;
                    bottom:20px
                }

                #flip-box-values-2 :is(.elementor-flip-box__front,.elementor-flip-box__back){
                    border-radius: 40px 40px 40px 0px;
                }

                #flip-box-values-2 .elementor-flip-box__back{
                    left:20px;
                    bottom:20px
                }

                #flip-box-values-3 :is(.elementor-flip-box__front,.elementor-flip-box__back){
                    border-radius: 40px 0px 40px 40px;
                }

                #flip-box-values-3 .elementor-flip-box__back{
                    right:20px;
                    top:20px
                }

                #flip-box-values-4 :is(.elementor-flip-box__front,.elementor-flip-box__back){
                    border-radius: 0 40px 40px 40px;
                }

                #flip-box-values-4 .elementor-flip-box__back{
                    left:20px;
                    top:20px
                }
            }

            /*responsive box-height*/
            @media(max-width:767px){

                .values-section .flip-box-values .elementor-widget-container .elementor-flip-box{
                    height: clamp(350px,calc(900px - 100vw),600px);
                }

                :is(#flip-box-values-1, #flip-box-values-2, #flip-box-values-3, #flip-box-values-4) :is(.elementor-flip-box__front,.elementor-flip-box__back){
                    border-radius: 40px;
                }

                :is(#flip-box-values-1, #flip-box-values-2, #flip-box-values-3, #flip-box-values-4) .elementor-flip-box__back{
                    left:20px;
                    bottom:20px;
                }

            }


    /*Token Utility Section*/
        /*Adjust Layout on Desktop*/
        @media(min-width:1025px){
            #token-utility .elementor-container {
                display: grid;
                grid-template-columns: auto auto auto;
            }
			
			#token-utility .elementor-row {
    			display: grid;
    			grid-template-columns: inherit;
			}



            #token-utility .faux-column {
                width: 100%;
            }
        }

    /*Tokenomics Section*/
        /*Progressbar*/
            /*Progressbar background*/
            .progress-glass .elementor-progress-wrapper{
                border: 1px solid;
                border-image-source: linear-gradient(105.82deg, rgba(255, 255, 255, 0.56) 18.54%, rgba(255, 255, 255, 0.21) 84.85%);
            }

            /*Move progress bars to fit with the allocation depiction*/
            #progress-2 .elementor-progress-bar{
                margin-left:9%;
            }
            #progress-3 .elementor-progress-bar{
                margin-left:14.40%;
            }
            #progress-4 .elementor-progress-bar{
                margin-left:18%;
            }
            #progress-5 .elementor-progress-bar{
                margin-left:33%;
            }
            #progress-6 .elementor-progress-bar{
                margin-left:38%;
            }
            #progress-7 .elementor-progress-bar{
                margin-left:48.5%;
            }
            #progress-8 .elementor-progress-bar{
                margin-left:59%;
            }
            #progress-9 .elementor-progress-bar{
                margin-left:69.5%;
            }
            #progress-10 .elementor-progress-bar{
                margin-left:80%;
            }
            #progress-11 .elementor-progress-bar{
                margin-left:88%;
            }


    /*Team members and advisors*/

        /*General layout*/
        #team-section>*>*{
            width:100%;
        }

        .tp-row{
            justify-content: center;
        }

        /*adjust team member/advisor widget to faciliate custom load more code*/
            .single-team-member .grid-item {
                display: none;
            }

            .single-team-member .grid-item {
                position:static !important;
            }

            .single-team-member .post-inner-loop {
                height:100% !important;
            }

            .scrollable:nth-child(2),
            .scrollable:nth-child(3){
                display:none;
            }

            /*hide notice when there are no more team members/advisors to load*/
            .hideloader {
                display:none !important ;
            }

        /*Hover Cards*/
            /*Hover Card Anchor for position absolute*/
            .theplus_team_member {
                position:relative;
            }


            /*Hover Card Bg*/
            .theplus_team_member .tmhc{
                width:100%;
                height:calc(100% + 10px);
                display:block;
                position:absolute;
                top:0%;
                opacity: 0;
                z-index:10;
                padding: 30px 30px 30px 30px;
                color: var(--e-global-color-text);
                background:var(--e-global-color-primary);
                border-radius:25px;
                box-shadow: 5px 5px 25px rgba(0, 0, 0, 0.2);
                transition:.7s ease all;
            }

            /*Hover Card Description*/
            .tmhc-desc {
                font-size:20px;
                line-height:150%;
                text-align:left;
                position:absolute;
                inset:0;
                padding:30px 30px 0 30px;
                height:100%;
                width:100%;
                z-index:30;
                opacity:0;
                transition:.7s ease all;
                overflow:auto;
            }

            @media(max-width:1360.5px){
                .tmhc-desc {
                    font-size:clamp(13px,calc(100vw / 72 ),20px);
                }
            }

            @media(max-width:1024.5px){
                .tmhc-desc {
                    padding:15px 15px 0 15px;
                }
            }

            @media(max-width:767.5px)
            {
                .team-member-list .grid-item{
                    max-width:450px;
                }

                .tmhc-desc {
                    font-size: 23px;
                }
            }

            @media(max-width:479.5px){
                .tmhc-desc {
                    font-size: clamp(13px,calc(100vw / 23.5),23px);
                    padding:15px 15px 0 15px;
                }
            }

            /*Hover Card SVG Divider*/
            .theplus_team_member svg{
                width:90%;
                opacity:0;
                transition:.7s ease all;
            }

            /*Make Hover Card appear on hover*/
            .theplus_team_member:hover .tmhc,
            .theplus_team_member:hover .tmhc-desc,
            .theplus_team_member:hover.theplus_team_member svg{
                opacity:1;
            }

            /*Make Name,Title and Socials lay above Hover Card BG*/
            .theplus_team_member .post-content-bottom {
                z-index:15;
            }

            /*Adjustments for Hover Cards in Advisor Section*/
                /*layout*/
                @media(max-width:767.7px){
                    #advisor-section .grid-item {
                        left: 50% !important;
                        transform: translateX(-50%);
                    }
                }

                /*color*/
                #advisor-section .tmhc{
                    background-color:var(--e-global-color-9108072)
                }

                #advisor-section .theplus_team_member:hover .linkedin-link a{
                    background-color:var(--e-global-color-primary);
                    border-color:var(--e-global-color-primary);
                }

                #advisor-section .theplus_team_member:hover .linkedin-link a:hover{
                    color:var(--e-global-color-9108072);
                }

    /*Footer*/
        /*Footer Layout*/
        @media only screen and (min-width: 768px) and (max-width: 1024px) {
            .elementor.elementor-2846.elementor-location-footer {
                width: 80%;
                margin: 0 auto;
            }
        }

        /*Waitlist Form btm */
        #waitlist .elementor-widget-wrap{
            justify-content: center;
        }

        #waitlist .waitlist-form :is(input:-webkit-autofill,
        input:-webkit-autofill:hover,
        input:-webkit-autofill:focus){
            -webkit-text-fill-color: #fff;
            transition: background-color 5000s ease-in-out 0s;

        }

        #waitlist-container-btm{
            max-width:1100.5px;
            justify-self:center;
        }

        #waitlist-container-btm, #waitlist-form-btm>*, #waitlist-form-btm button{
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
        }

        #waitlist-form-btm .elementor-message-success{
            color:#fff;
            font-weight:700;
        }

        #waitlist-form-btm .elementor-message-danger{
            font-weight:700;
        }



    /*Alternative Footer on tablet and mobile/*
        /*change close icon on trigger button*/
        .offcanvas-toggle-btn.humberger-style-1.plus-is-active:after {
            content: '\f00d';
            font-family: 'FontAwesome';
            font-size: 25px;
            color: #000000;
            font-weight: 100;
            margin-top: 10px;
        }

        /*off-canvas menu popup height decrease*/
        /*@media(max-width:1025px){
            .plus-canvas-content-wrap {
                height: 35.4rem
            }
        }*/

       /* @media(max-width:360px){
            .plus-canvas-content-wrap {
                height: 36rem
            }
        }*/