@import "/css/giaza.css";
@import "/css/montserrat.css";
@import "/css/mplus.css";

            :root {
                --light: rgba(255, 255, 255, 0.5);
                --dark: rgba(0,0,0,0.6);
                --white: #fff;
                --black: #000;
                --hover: #fff;
                --bg: url(../assets/bg2.webp);
                --textcolor: #fff;
                --bgsize: 1920px;
            }
            html, body {
                font-family: 'Montserrat', sans-serif;
                overflow: hidden;
            }
            * {
                cursor: url(../assets/cursor.svg) 10 10, auto;
                color: var(--light);
                
            }
            *,
            :before,
            :after {
                -webkit-box-sizing: border-box;
                -moz-box-sizing: border-box;
                        box-sizing: border-box;
                        background-repeat: no-repeat;
                        background-size: cover;
                
                        
            }
            a {
                    color: var(--light);
                    text-decoration: none;
            }
            /* Clip text element */
            .clip-text {
                font-family: 'giaza';
                letter-spacing: -35px;
                font-size: 16em;
                line-height: 1;
                display: inline-block;
                padding-top: 33vh;
                padding-right: 30px;
                width: 48%;
                height: 100%;
                text-align: right;
                text-transform: uppercase;
                /* Color fallback */
                color: #fff;
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
            }

            @keyframes opacity {
                from {opacity: 0};
                to {opacity: 1};
            }

            .clip-text:before,
            .clip-text:after {
                position: absolute;
                content: '';
                
                
            }

            /* Background */
            .clip-text:before {
                z-index: -2;
                top: 0;
                right: 0;
                bottom: 0;
                left: 0;
                background-image: var(--bg);
                
                
                
                
            }

            /* Text Background (transparent zone) */
            .clip-text:after {
                position: absolute;
                z-index: -1;
                top: 0;
                right: 50%;
                bottom: 0;
                left: 0;
                /* change to --light for lighter version */
                background-color: var(--dark);
                -webkit-backdrop-filter: blur(10px);
                animation: faderight 2s ease;
                
                
            }

            @keyframes faderight {
                from {transform: translatex(-110%)};
                to {transform: translatex(0%)};
            }

            /* Background image  */
            .clip-text_one {
                background-image: var(--bg);
                background-size: var(--bgsize);
                
                
            }


/* Start of clear div */
            .clear {
                position: absolute;
                top: 0;
                right: 0;
                font-size: 6em;
                letter-spacing: 10px;
                font-weight: bold;
                line-height: 1;
                display: inline-block;
                padding-top: 45vh;
                padding-left: 30px;
                width: 50%;
                height: 100%;
                text-align: left;
                text-transform: uppercase;
                /* Color fallback */
                color: #fff;
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
                background-image: var(--bg);
                background-size: fill;
                animation: opacity 3.5s ease;
                filter: brightness(2);
            }

            @keyframes opacity {
                from {opacity: 0};
                to {opacity: 1};
                
            }
/* start of header */

            .header {   
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 7%;  
                animation: fade 1.5s ease;       
            }

            @keyframes fade {
                from {transform: translatey(-100px)};
                to {transform: translatey(0px)};
            }

/* start of socials */

            .socials {
                position: absolute;
                top: 25px;
                left: 80px;
                font-size: 1.5em;
                color: var(--light);
            }

            i {
                margin: 0 4px;
                transition: all .5s ease;
            }

            i:hover {
                color: var(--hover);
                transform: translatey(-5px);
            }

            .socials > a > i {
                animation: none;
            }

/* start of appearance */
            
            .appearance {
                position: absolute;
                top: 28px;
                left: 25px;
                font-size: 1.5em;
                color: var(--light);
                border-right: 1px solid var(--light);

            }

            #light {
                display: none;
            }
            #dark {
                display: block;
            }
/* start of menu */

            .menu {
                position: absolute;
                top: 25px;
                right: 25px;
            }

            .menu > button {
                font-family: 'M PLUS Rounded 1c';
                font-size: 1.25em;
                font-weight: 500;
                color: var(--dark);
                text-transform: uppercase;
                background: none;
                border: none;
                margin-left: 12px;
                padding: 0;
                transition: all .5s ease;
            }

            .menu > button:hover {
                border-bottom: 3px solid var(--dark);
                transform: translateY(-5px);
            }
            .menu > .active {
                border-bottom: 3px solid var(--dark);
            }

/* start of footer */

            .footer {
                position: absolute;
                bottom: 0;
                left: 0;
                height: 7%;
                width: 50%;
                color: var(--light);
                animation: fadeup 1.5s ease;
               
                
            }

            @keyframes fadeup {
                from {bottom: -100px};
                to {bottom: 0px};
            }

            .credits {
                position: absolute;
                bottom: 25px;
                left: 35px;
                font-size: .75em;
            }
            
            .nav {
                position: absolute;
                bottom: 25px;
                left: 90%;
                font-size: 1.25em;

            }

/* start of cards */

            .cards {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(25%, -50%);
                border-radius: 10px;
                padding: 30px;
                height: 75%;
                width: 35%;
                background-color: var(--dark);
                -webkit-backdrop-filter: blur(10px);
                color: var(--light);
                display: none;
                animation: fadecard .5s ease;
            }
            @keyframes fadecard {
                from {opacity: 0;};
                to {opacity: 1};                
            }

            .title {
                /* border: 1px solid orange; */
                font-family: 'Montserrat';
                font-weight: bold;
                font-size: 1.75em;
                display: flex;
                justify-content: center;
                margin: 0 auto;
                padding: 20px;
                border-bottom: 1px solid var(--light);
                width: 80%;
                

            }


            .smallMenu {
                display: flex;
                position: absolute;
                top: 10px;
                left: 7px;
            }
            
            
            .smallMenu  i:hover {
                color: var(--hover);
                transform: none;
            }

            .expand > i {
                transform: rotate(-45deg);
            }
            .expand > i:hover {
                transform: rotate(-45deg);
                color: var(--hover);
            }
            

/* start of content */
            .content{
                display:flex;
                justify-content: space-around;
                /* border: 1px solid orange; */
                padding: 20px;
                font-family: 'Montserrat';
                font-size: 1.25em;
                overflow: scroll;
                height: 88%;
                
            }
            .grid {
                width: 160px;
                height: 100px;
                /* border: 1px solid orange; */
                border-radius: 7px;
                text-align: center;
                float: left;
                padding: 0 5px;
                overflow: hidden;
                
            }

            .activeBg {
                background-color: var(--dark);
                animation: fadecard 1.5s ease;
            }

            .tab {
                margin: 0px;
            }

            .tab i{
                margin-top: 15px;
                font-size: 2em;
            }


            .titleS {
                font-size: 0.9rem;
                
            }

            .info {
                padding: 20px;
                position: absolute;
                top: 50%;
                left: 50%;
                width: 90%;
                height: 60%;
                /* background-color: var(--dark); */
                /* change for ipad */
                transform: translate(-50%,-30%); 
                border-radius: 7px;
                font-size: 0.9em;
                overflow: scroll;

                
            }
            .info:not(:first-child) {
                display: none;
            }

/* icon */
            .fa-address-card {
                animation: waveOne 1s ease 2s;
            }

                    .fa-instagram {
                        animation: waveOne 1s ease 2s;
                    }


            .fa-regular.fa-envelope {
                animation: waveTwo 1s ease 2.15s;
            }

            .fa-searchengin {
                animation: waveThird 1s ease 2.3s;
            }

                    .fa-whatsapp {
                        animation: waveThird 1s ease 2.3s;
                    }
            
            .fa-safari {
                animation: waveFourth 1s ease 2.45s;
            }
            
            .fa-print {
                animation: waveFith 1s ease 2.6s;
            }
            
            .fa-camera {
                animation: waveSixth 1s ease 2.75s;
            }

            @keyframes waveOne {
                0% {transform: translateY(0px); color: var(--light)}
                50% {transform: translateY(-10px); color: var(--hover)}
                100% {transform: translateY(0px); color: var(--light)}
            }
            
            @keyframes waveTwo {
                0% {transform: translateY(0px); color: var(--light)}
                50% {transform: translateY(-10px); color: var(--hover)}
                100% {transform: translateY(0px); color: var(--light)}
            }
             
            @keyframes waveThird {
                0% {transform: translateY(0px); color: var(--light)}
                50% {transform: translateY(-10px); color: var(--hover)}
                100% {transform: translateY(0px); color: var(--light)}
            }
             
            @keyframes waveFourth {
                0% {transform: translateY(0px); color: var(--light)}
                50% {transform: translateY(-10px); color: var(--hover)}
                100% {transform: translateY(0px); color: var(--light)}
            }
             
            @keyframes waveFith {
                0% {transform: translateY(0px); color: var(--light)}
                50% {transform: translateY(-10px); color: var(--hover)}
                100% {transform: translateY(0px); color: var(--light)}
            }
             
            @keyframes waveSixth {
                0% {transform: translateY(0px); color: var(--light)}
                50% {transform: translateY(-10px); color: var(--hover)}
                100% {transform: translateY(0px); color: var(--light)}
            }
            
/* start of col */

            .wrapper {
                /* border:1px solid red; */
                width: 100%;
                display: flex;
                justify-content:space-evenly;
                height: 10%;
                
            }
            
            .col12 {
                height: auto;
                /* border: 1px solid orange; */
                margin: 15px 0px;
                width: auto;
                transition: all .5s ease;
                border-radius: 5px;
                padding: 3px 5px 5px 3px;
            }

            .col12:hover {
                transform: translateX(10px);
                background-color: var(--dark);
                /* border: 1px solid orange; */

                
            }
            .col4 {
                /* width: 33.33%; */
                display: inline;
                /* border: 1px solid orange; */

            }
            .col8 {
                /* width: 66.66%; */
                display: inline;
                /* border: 1px solid orange; */

            }
            

           .col4 > i {
            animation: none;
           }

           .col4 > i:hover {
            transform: none;
            color: var(--light);
           }

           .burger {
            display: none;
        }
        .burger > i {
            display: none;
        }
            

           @media only screen and (max-width: 1588px) {

                .info {
                    padding: 20px;
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    width: 90%;
                    height: 60%;
                    /* background-color: var(--dark); */
                    transform: translate(-50%,-15%); 
                    border-radius: 7px;
                    font-size: 0.9em;
                    overflow: scroll;
                }

                .titleS {
                    font-size: 0.75rem;
                }

                .tab i{
                    margin-top: 15px;
                    font-size: 1.5em;
                }

                .grid {
                    width: 160px;
                    height: 85px;
                    /* border: 1px solid orange; */
                    border-radius: 7px;
                    text-align: center;
                    float: left;
                    padding: 0 5px;
                    overflow: hidden;
                    
                }

                .text {
                    font-size: 0.9em;
                }

                .wrapper {
                    /* border:1px solid red; */
                    width: 100%;
                    display: flex;
                    justify-content:space-evenly;
                    height: 10%;
                    font-size: 0.7em;
                }

                .title {
                    /* border: 1px solid orange; */
                    font-family: 'Montserrat';
                    font-weight: bold;
                    font-size: 1.25em;
                    display: flex;
                    justify-content: center;
                    margin: 0 auto;
                    padding: 20px;
                    border-bottom: 1px solid var(--light);
                    width: 80%;
                }

                .menu > button {
                    font-family: 'M PLUS Rounded 1c';
                    font-size: 1em;
                    font-weight: 500;
                    color: var(--dark);
                    text-transform: uppercase;
                    background: none;
                    border: none;
                    margin-left: 12px;
                    padding: 0;
                    transition: all .5s ease;
                }
                
                .menu > button:hover {
                    border-bottom: 2px solid var(--dark);
                    transform: translateY(-5px);
                }
                .menu > .active {
                    border-bottom: 2px solid var(--dark);
                }

                .appearance {
                    position: absolute;
                    top: 28px;
                    left: 25px;
                    font-size: 1.25em;
                    color: var(--light);
                    border-right: 1px solid var(--light);
                }

                .socials {
                    position: absolute;
                    top: 25px;
                    left: 80px;
                    font-size: 1.25em;
                    color: var(--light);
                }

                .clip-text {
                    font-family: 'giaza';
                    letter-spacing: -30.5px;
                    font-size: 14em;
                    line-height: 1;
                    display: inline-block;
                    padding-top: 33vh;
                    padding-right: 30px;
                    width: 48%;
                    height: 100%;
                    text-align: right;
                    text-transform: uppercase;
                    /* Color fallback */
                    color: #fff;
                    -webkit-background-clip: text;
                    -webkit-text-fill-color: transparent;
                }
                .burger {
                    display: none;
                }
                .burger > i {
                    display: none;
                }
    
    
             }

             @media only screen and (max-width: 1220px) {
             
                /* Clip text element */
            .clip-text {
                font-family: 'giaza';
                letter-spacing: -21.5px;
                font-size: 10em;
                line-height: 1;
                display: inline-block;
                padding-top: 25vh;
                padding-left: 10px;
                width: 48%;
                height: 100%;
                text-align: left;
                text-transform: uppercase;
                /* Color fallback */
                color: #fff;
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
            }

            @keyframes opacity {
                from {opacity: 0};
                to {opacity: 1};
            }

            .clip-text:before,
            .clip-text:after {
                position: absolute;
                content: '';
                
                
            }

            /* Background */
            .clip-text:before {
                z-index: -2;
                top: 0;
                right: 0;
                bottom: 0;
                left: 0;
                background-image: var(--bg);
                
                
                
                
            }

            /* Text Background (transparent zone) */
            .clip-text:after {
                position: absolute;
                z-index: -1;
                top: 0;
                right: 0;
                bottom: 50%;
                left: 0;
                /* change to --light for lighter version */
                background-color: var(--dark);
                -webkit-backdrop-filter: blur(10px);
                animation: faderight 2s ease;
                
                
            }

            .menu {
                position: absolute;
                top: 25px;
                right: 25px;
            }

            .menu > button {
                font-family: 'M PLUS Rounded 1c';
                font-size: 1em;
                font-weight: 500;
                color: var(--light);
                text-transform: uppercase;
                background: none;
                border: none;
                margin-left: 12px;
                padding: 0;
                transition: all .5s ease;
            }

            .menu > button:hover {
                border-bottom: 2px solid var(--light);
                transform: translateY(-5px);
            }
            .menu > .active {
                border-bottom: 2px solid var(--light);
            }

            .clear {
                /* border: 1px solid orange; */
                position: absolute;
                top: 50%;
                left: 0;
                font-size: 3em;
                letter-spacing: 10px;
                font-weight: bold;
                line-height: 1;
                display: inline-block;
                padding-top: 1.25vh;
                padding-left: 65%;
                width: 100%;
                height: 50%;
                text-align: left;
                text-transform: uppercase;
                /* Color fallback */
                color: #fff;
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
                background-image: var(--bg);
                background-size: auto;
                animation: opacity 3.5s ease;
                filter: brightness(1);
                text-shadow: 0px 0px var(--light);
            }

            .footer {
                position: absolute;
                bottom: 0;
                left: 0;
                height: 7%;
                width: 80%;
                color: var(--light);
                animation: fadeup 1.5s ease;
                display: none;
               
                
            }
            .cards {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-25%, -50%);
                border-radius: 10px;
                padding: 30px;
                height: 75%;
                width: 55%;
                background-color: var(--dark);
                -webkit-backdrop-filter: blur(10px);
                color: var(--light);
                display: none;
                animation: fadecard .5s ease;
            }
            .burger {
                display: none;
            }

            .burger > i {
                display: none;
            }


            }

            @media only screen and (max-width: 600px) {
            
                .menu {
                    display: none;
                    position: absolute;
                    top: 25px;
                    right:45px;
                    z-index: 999;
                    background-color: var(--dark);
                    -webkit-backdrop-filter: blur(10px);
                    padding: 10px 10px 8px 5px;
                    border-radius: 7px;
                }

                .menu > button {
                    display:flex;
                }

                .menu > button:hover {
                    transform: translateX(5px);
                    border: none;
                }
            
            .burger {
                display: block;
                position: absolute;
                top: 25px;
                right: 25px;
                font-size: 1.25em;
                z-index: 999;
            }

            .burger > i {
                display: block;
            }

            .burger > i:hover {
                transform: none;
            }

            #burgerActive {
                display: none;
            }

            .cards {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                border-radius: 10px;
                padding: 18px;
                height: 75%;
                width: 85%;
                background-color: var(--dark);
                -webkit-backdrop-filter: blur(10px);
                color: var(--light);
                display: none;
                animation: fadecard .5s ease;
            }


/* Clip text element */
            .clip-text {
                /* border: 1px solid red; */
                font-family: 'giaza';
                letter-spacing: -8.5px;
                font-size: 4em;
                line-height: .5;
                display: inline-block;
                /* padding-top: 19vh; */
                padding-left: 10px;
                width: 100%;
                height: 33%;
                text-align: left;
                text-transform: uppercase;
                /* Color fallback */
                color: #fff;
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
            }

            @keyframes opacity {
                from {opacity: 0};
                to {opacity: 1};
            }

            .clip-text:before,
            .clip-text:after {
                position: absolute;
                content: '';
                
                
            }

            /* Background */
            .clip-text:before {
                z-index: -2;
                top: 0;
                right: 0;
                bottom: 0;
                left: 0;
                background-image: url(../assets/bg2.webp);
                
                
                
                
            }

            /* Text Background (transparent zone) */
            .clip-text:after {
                position: absolute;
                z-index: -1;
                top: 0;
                right: 0;
                bottom: 67%;
                left: 0;
                /* change to --light for lighter version */
                background-color: var(--dark);
                -webkit-backdrop-filter: blur(10px);
                animation: faderight 2s ease;
                
                
            }

            /* Background image  */
            .clip-text_one {
                background-image:  url(../assets/bg2.webp);
                background-size: 200%;
                /* filter: brightness(1); */
                
                
            }


            .clear {
                position: absolute;
                top: 33%;
                left: 0;
                font-size: 3em;
                letter-spacing: 10px;
                font-weight: bold;
                /* line-height: 1; */
                display: inline-block;
                /* padding-top: 45vh; */
                padding-left: 15px;
                width: 100%;
                height: 67%;
                text-align: left;
                text-transform: uppercase;
                /* Color fallback */
                color: #fff;
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
                background-image: url(../assets/bg2.webp);
                background-size: auto;
                animation: opacity 3.5s ease;
                filter: brightness(0);
                opacity: .5;
                /* display: none; */
                /* border: 3px solid green; */
            }

            /* 2.content */

            .content{
                display:flex;
                /* justify-content: space-around; */
                /* border: 1px solid orange; */
                padding: 0px;
                font-family: 'Montserrat';
                /* font-size: 1.25em; */
                overflow: scroll;
                height: 88%;
                
            }
            .grid {
                width: 70px;
                height: 80px;
                /* border: 1px solid blue; */
                border-radius: 7px;
                text-align: center;
                /* float: left; */
                padding-bottom: 7px;
                overflow: hidden;
                margin: 20px auto;
                
            }

            .activeBg {
                background-color: var(--dark);
                animation: fadecard 1.5s ease;
            }

            .tab {
                margin-bottom: 0px;
            }

            .tab i{
                /* margin-bottom: -15px; */
                font-size: 1.1em;
            }


            .titleS {
                font-size: 0.9rem;
                
            }

            .info {
                padding: 0px;
                position: absolute;
                top: 59%;
                left: 50%;
                width: 90%;
                height: 55%;
                /* background-color: var(--dark); */
                /* change for ipad */
                transform: translate(-50%,-30%); 
                border-radius: 7px;
                font-size: 0.9em;
                overflow: scroll;
                /* border: 2px solid salmon; */
                text-align: justify;

                
            }
            .info:not(:first-child) {
                display: none;
            }

            .text {
                margin-top: 20px;
                font-size: 0.9em;
            }


            .wrapper {
                /* border:1px solid red; */
                width: 100%;
                height: 10%;
                position:absolute;
                margin-top: 20px;
                /* float: left; */
                
                
            }
            
            .col12 {
                height: auto;
                /* border: 1px solid orange; */
                    /* margin: 15px 0px; */
                    /* padding: 3px 5px 5px 3px; */
                width: 100%;
                transition: all .5s ease;
                border-radius: 5px;
                float: left;
                /* position: absolute; */
                
            }

            
            .col4 {
                width: 20%;
                /* border: 1px solid salmon; */
                /* float: left; */
                /* position: absolute; */
            }

            .col8 {
                width: 80%;
                /* border: 1px solid salmon; */
                /* float: left; */
                /* position: absolute; */
            }


            }

            p {
                text-decoration: none;
            }

            .function {
                font-size: 12px;
                margin: -20px 0px 40px 0px;
            }

            .CardSocial {
                position: absolute;
                bottom: 10px;
                right: 10px;
            }

            .CardSocial > a > button {
                background: none;
                border: none;
                font-size: 16px;
            }