@import url('https://fonts.googleapis.com/css2?family=Saira+Condensed:wght@500&display=swap');
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
.sup{
    background-color: black;
    height: 6.5vh;
    display: flex;
    justify-content: center;
    font-family: 'Saira Condensed', sans-serif;
    z-index: 9999;
    
}
.supf{
    width: 80%;
    /*border: solid green;*/
    display: flex;
    height: 100%;
    font-size: 1vw;
}
.iz,.der{
    width: 50%;
    display: flex;
    align-items: center;
    
}
.iz{
    justify-content: start;
    /*border: solid red;*/
    color: white;
    
}
.iz div{
    /*border: solid red; */
    height: 100%;
    justify-content: center;
    display: flex;
    margin-right: .5vw;
    align-items: center;

}
.iz div i{
    margin-right: .2vw;
    font-size: 1.1vw;
    /*border: solid red;*/
    
}
.iz .quesion{
    width: 32%;
}
.iz .phone{
    justify-content: center;
    width: 20%;

}
.iz .email{
    justify-content: center;
    width: 31%;
}
.der{
    justify-content: end;
    /*border: solid blue;*/
}
.der div{
    display: flex;
    justify-content: center;
    /*border: solid green;*/
    height: 100%;
    align-items: center;
    color: white;
}
.der .session{
    width: 15%;
}
.der .session2{
    width: 25%;
}   
.der .session a, .der .session2 a{
    color: white;
    text-decoration: none;
    
}
.der .session a:hover, .der .session2 a:hover, .der .presentation a:hover{
    text-decoration: underline;
    color: orange;
}
.der .presentation{
    width: fit-content;
    background-color: orange;
    padding: 0 1vw;
}
.der .presentation a{
    color: white;
    text-decoration: none;
}
.der .presentation a:hover{
    color: black;
}
.der .presentation i{
    margin-right: .2vw;
    font-size: 1.1vw;
}
.der .logo2{
    display: none;
}
.der .der2{
    display: none;
}

@media(max-width:1024px)
{
    .supf{
        width: 100%;
        background-color: white;
        box-shadow: 0 5px 3px rgba(0, 0, 0, .2);
        
    }
    .der .logo2{
        display: flex;
/*        border: solid red;*/
        width: 80%;
    }
    .der .logo2 .ima{
        width: 25%;
    }
    .der .logo2 .tx{
        width: 50%;
    }

    .sup{
        height: 10vh;
        position: fixed;
    }
    .supf{
        font-size: 6vw;
    }
    .iz{
        display: none;
    }
    .der{
        width: 100%;
        justify-content: center;
        /*border: solid green;*/
        
    }
    .der .session2{
        display: flex;
        position: absolute;
        width: 100%;
        top: 85vh;
        height: 15vh;
        background: orange;
        transition: ease-in .2s;
        right: -100%;
    }
    .der .presentation{
        display: flex;
        position: absolute;
        width: 100%;
        top: 85vh;
        height: 10vh;
        background: orange;
        transition: ease-in .2s;
        right: -100%;
    }
    .der .presentation i{
        font-size: 6vw;
        margin-right: 2vw;
    }
    .der .session{
        display: flex;
        position: absolute;
        width: 100%;
        top: 95vh;
        height: 5vh;
        background: orange;
        transition: ease-in .2s;
        right: -100%;
        background: black;
    }
    .der .login-responsive{
        right: 0;
        transition: ease-in .2s;
    }
    .der .session2 a{
        color: black;
        font-size: 5vw;
    }
    .der .der2{
        display: flex;
        /*border: solid yellow;*/
        align-items: center;
        width: 20%;
        
    }
    .der2 i{
        color: black;
        font-size: 8vw;
    }
    

    



    
}