html{
    width:100%;
    height:100%;
}
body{
    width:100%;
    height:auto;
    overflow-x: hidden;
    background-color: white;
    font-family: 'Rubik', sans-serif;
}
.navbar-toggler{
    border:none !important;
    color:black !important;
}
.navbar-toggler-icon{
    background-image:url("https://edsofta.com/tutor/assets/img/toggler.svg") !important;
}

@media  screen and (min-width: 769px){
    .profile{
        margin-left: 68%;
    }
    .firstcontainer{
    background-image: url('https://edsofta.com/tutor/assets/img/firstbackground.png') !important;
    background-repeat: no-repeat;
    background-size: contain;
    width:100%;
    height:800px;
    padding-top:200px !important;
    padding-left:100px;
    overflow-x: hidden;

    }
    .firstheader{
        font-family: Rubik;
        font-style: normal;
        font-weight: bold;
        font-size: 60px;
    }

    .firstsmalltalk{
        font-family: Rubik;
        font-style: normal;
        font-weight: normal;
        font-size: 15px;
        line-height: 18px;
    }
    
    .firstbutton{
        width: 525px;
        height: 100px;
        background: #FFFFFF;
        box-shadow: 0px 0px 16px rgba(0, 0, 0, 0.1);
        border-radius: 10px;
    }
    .firstillustration{
        margin-right:-60px; 
        margin-top: -100px;
    }

    .secondcontainer{
        background-image: url('https://edsofta.com/tutor/assets/img/seconbackground.png') !important;
        background-repeat: no-repeat;
        background-size: cover;
        width:100%;
        height:800px;
        padding-top:200px !important;
        overflow-x: hidden;
    }

    .secondillustartion{
        margin-top: -100px;
    }

    .footer{
        display: flex; 
        flex-direction: column;
        height: 120px;  
        background: #F7F9FA;
    }
    .phone{
        display: none;
    }

}

@media screen and (max-width: 768px) and (min-width: 640px){
    .navbar-toggler{
        margin-right: -70%;
       
    }
    .firstcontainer{
    background-image: url('https://edsofta.com/tutor/assets/img/firstbackground.png') !important;
    background-repeat: no-repeat;
    background-size: contain;
    width:100%;
    height:500px;
    padding-top:100px !important;
    padding-left:100px;
    overflow-x: hidden;

    }
    .firstheader{
        font-family: Rubik;
        font-style: normal;
        font-weight: bold;
        font-size: 40px;
    }

    .firstsmalltalk{
        font-family: Rubik;
        font-style: normal;
        font-weight: normal;
        font-size: 15px;
        line-height: 18px;
    }
    
    .firstbutton{
        width: 350px;
        height: 80px;
        background: #FFFFFF;
        box-shadow: 0px 0px 16px rgba(0, 0, 0, 0.1);
        border-radius: 10px;
    }

    .firstillustration{
        margin-right:-20px; 
        margin-top: -50px;
    }

    .secondcontainer{
        background-image: url('https://edsofta.com/tutor/assets/img/seconbackground.png') !important;
        background-repeat: no-repeat;
        background-size: cover;
        width:100%;
        height:500px;
        padding-top:100px !important;
        padding-right: 60px;
        overflow-x: hidden;
    }
    .secondillustartion{
        margin-top: -50px;
    }

    .footer{
        display: flex; 
        flex-direction: column;
        height: 120px;  
        background: #F7F9FA;
    }
    .phone{
        display: none;
    }
}

@media screen and (max-width: 639px) and (min-width: 430px){
    .navbar-toggler{
        margin-right: -60%;
        margin-left: -5%;
    }
    .firstcontainer{
    background-image: url('https://edsofta.com/tutor/assets/img/firstbackgroundphone.png') !important;
    background-repeat: no-repeat;
    background-size: cover;
    width:100%;
    height:700px;
    padding-top:100px !important;
    padding-left:10px;
    overflow-x: hidden;

    }
    .firstheader{
        font-family: Rubik;
        font-style: normal;
        font-weight: bold;
        font-size: 45px;
    }

    .firstsmalltalk{
        font-family: Rubik;
        font-style: normal;
        font-weight: normal;
        font-size: 15px;
        line-height: 18px;
    }
    
    .firstbutton{
        width: 100%;
        height: 85px;
        background: #FFFFFF;
        box-shadow: 0px 0px 16px rgba(0, 0, 0, 0.1);
        border-radius: 10px;
    }
    .firstillustration{
        margin-right:-60px; 
        margin-top: -100px;
    }

    .secondcontainer{
        background-image: url('https://edsofta.com/tutor/assets/img/secondbackgroundphone.png') !important;
        background-repeat: no-repeat;
        background-size: cover;
        width:100%;
        height:700px;
        padding-top:100px !important;
        overflow-x: hidden;
    }

    .secondillustartion{
        margin-top: -100px;
    }

    .footer{
        display: flex; 
        flex-direction: column;
        height: 120px;  
        background: #F7F9FA;
    }
    .big{
        display:none;
        height: 0px;
        width:0px;
    }
}

@media screen and (max-width: 425px) and (min-width: 375px) {
    .navbar-toggler{
        margin-right: -45%;
        margin-left: -5%;
    }

    .firstcontainer{
    background-image: url('https://edsofta.com/tutor/assets/img/firstbackgroundphone.png') !important;
    background-repeat: no-repeat;
    background-size: cover;
    width:100%;
    height:700px;
    padding-top:100px !important;
    padding-left:10px;
    overflow-x: hidden;

    }
    .firstheader{
        font-family: Rubik;
        font-style: normal;
        font-weight: bold;
        font-size: 45px;
    }

    .firstsmalltalk{
        font-family: Rubik;
        font-style: normal;
        font-weight: normal;
        font-size: 15px;
        line-height: 18px;
    }
    
    .firstbutton{
        width: 100%;
        height: 85px;
        background: #FFFFFF;
        box-shadow: 0px 0px 16px rgba(0, 0, 0, 0.1);
        border-radius: 10px;
    }
    .firstillustration{
        margin-right:-60px; 
        margin-top: -100px;
    }

    .secondcontainer{
        background-image: url('https://edsofta.com/tutor/assets/img/secondbackgroundphone.png') !important;
        background-repeat: no-repeat;
        background-size: cover;
        width:100%;
        height:700px;
        padding-top:100px !important;
        overflow-x: hidden;
    }

    .secondillustartion{
        margin-top: -100px;
    }

    .footer{
        display: flex; 
        flex-direction: column;
        height: 120px;  
        background: #F7F9FA;
    }
    .big{
        display:none;
    }
}

@media screen and (max-width: 374px){
    .navbar-toggler{
        margin-right: -40%;
        margin-left: -5%;
    }

    .firstcontainer{
    background-image: url('https://edsofta.com/tutor/assets/img/firstbackgroundphone.png') !important;
    background-repeat: no-repeat;
    background-size: cover;
    width:100%;
    height:700px;
    padding-top:100px !important;
    padding-left:10px;
    overflow-x: hidden;

    }
    .firstheader{
        font-family: Rubik;
        font-style: normal;
        font-weight: bold;
        font-size: 45px;
    }

    .firstsmalltalk{
        font-family: Rubik;
        font-style: normal;
        font-weight: normal;
        font-size: 15px;
        line-height: 18px;
    }
    
    .firstbutton{
        width: 100%;
        height: 85px;
        background: #FFFFFF;
        box-shadow: 0px 0px 16px rgba(0, 0, 0, 0.1);
        border-radius: 10px;
    }
    .firstillustration{
        margin-right:-60px; 
        margin-top: -100px;
    }

    .secondcontainer{
        background-image: url('https://edsofta.com/tutor/assets/img/secondbackgroundphone.png') !important;
        background-repeat: no-repeat;
        background-size: cover;
        width:100%;
        height:700px;
        padding-top:100px !important;
        overflow-x: hidden;
    }

    .secondillustartion{
        margin-top: -100px;
    }

    .footer{
        display: flex; 
        flex-direction: column;
        height: 120px;  
        background: #F7F9FA;
    }
    .big{
        display:none;
    }
}