html{
            width:100%;
            height:100%;
        }
        body{
            width:100%;
            height:auto;
            overflow-x: hidden;
            background-image: url("https://edsofta.com/tutor/assets/img/firstbackground.png");
            background-repeat: no-repeat;
            background-size: contain;
            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;
        }
        .notutor{
            font-family: Rubik;
            font-style: normal;
            font-weight: normal;
            font-size: 25px;
            line-height: 30px;
            color: #000000;
        }


        @media  screen and (min-width: 769px){
            .profile{
                margin-left: 68%;
            }
            .firstcolumn{
                margin-right: -20px;
            }

            .secondcolumn{
                margin-left: -10px;
            }
            .card-header{
                font-size: 20px;
                font-weight: normal;
                background-color: white !important;
                height:90px;
                padding:30px 30px;
                width:200% !important;
                border: 1px solid #E5EBED;
            }
            .card{
                border:none;
                width:100%;
            }
        
            .secondcard{
                margin-top : 90px;
                border-top:none;
                border-radius: 0px 0px 0px 0px;
                border-left:none;
            }

            .secondsection{
                min-height:420px;
                height: auto;
                width:100%;
                padding:20px 20px;
                border-bottom: 1px solid #E5EBED;
                border-right: 1px solid #E5EBED;
                border-left: 1px solid #E5EBED;
            }

            .basis{
                flex-basis:50%;
            }
        }

        @media screen and (max-width: 768px) and (min-width: 640px){
            .navbar-toggler{
                margin-right: -70%;
               
            }
            .card-header{
                font-size: 20px;
                font-weight: normal;
                background-color: white !important;
                height:90px;
                padding:30px 30px;
                width:100% !important;
                border: 1px solid #E5EBED;
            }
            .card{
                border:none;
            }

            .basis{
                flex-basis:100%;
            }

            .secondsection{
                min-height:420px;
                height: auto;
                width:100%;
                padding:20px 20px;
                border-bottom: 1px solid #E5EBED;
                border-right: 1px solid #E5EBED;
                border-left: 1px solid #E5EBED;
            }
        }

        @media screen and (max-width: 639px) and (min-width: 430px){
            .navbar-toggler{
                margin-right: -60%;
                margin-left: -3%;
            }
            .card-header{
                font-size: 20px;
                font-weight: normal;
                background-color: white !important;
                height:90px;
                padding:30px 30px;
                width:100% !important;
                border: 1px solid #E5EBED;
            }
            .card{
                border:none;
            }

            .basis{
                flex-basis:100%;
            }

            .secondsection{
                min-height:420px;
                height: auto;
                width:100%;
                padding:20px 20px;
                border-bottom: 1px solid #E5EBED;
                border-right: 1px solid #E5EBED;
                border-left: 1px solid #E5EBED;
            }
        }

        @media screen and (max-width: 425px) and (min-width: 375px) {
            .navbar-toggler{
                margin-right: -45%;
                margin-left: -3%;
            }
            .card-header{
                font-size: 20px;
                font-weight: normal;
                background-color: white !important;
                height:90px;
                padding:30px 30px;
                width:100% !important;
                border: 1px solid #E5EBED;
            }
            .card{
                border:none;
            }
            .basis{
                flex-basis:100%;
            }

            .secondsection{
                min-height:420px;
                height: auto;
                width:100%;
                padding:20px 20px;
                border-bottom: 1px solid #E5EBED;
                border-right: 1px solid #E5EBED;
                border-left: 1px solid #E5EBED;
            }

        }

        @media screen and (max-width: 374px){
            .navbar-toggler{
                margin-right: -40%;
                margin-left: -3%;
            }
            .card-header{
                font-size: 20px;
                font-weight: normal;
                background-color: white !important;
                height:90px;
                padding:30px 30px;
                width:100% !important;
                border: 1px solid #E5EBED;
            }
            .card{
                border:none;
            }
            .basis{
                flex-basis:100%;
            }

            .secondsection{
                min-height:420px;
                height: auto;
                width:100%;
                padding:20px 20px;
                border-bottom: 1px solid #E5EBED;
                border-right: 1px solid #E5EBED;
                border-left: 1px solid #E5EBED;
            }
        }

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

        .container{
            margin-top: 30px;
            overflow-x: hidden;
        }
        
        
        .cards{
            margin-top: -10px !important;
            overflow-x: hidden;
        }

        .firstheader{
            font-weight: bold; 
            font-size: 25px;
        }

        .section{
            height:140px;
            padding:20px 20px;
            border-bottom: 1px solid #E5EBED;
            border-right: 1px solid #E5EBED;
            border-left: 1px solid #E5EBED;
        }

        

        #slider {
            -webkit-appearance: none;
            -moz-apperance: none;
            border-radius: 3px;
            height: 3px;
            width:100%;
            background-image: -webkit-gradient(linear,
                left top, 
                right top, 
                color-stop(5%, #03071E),
                color-stop(5%, #E5EBED));

            /*noinspection CssInvalidFunction*/
            background-image: -moz-linear-gradient(left center,
                #03071E 0%, #03071E 5%,
                #E5EBED 5%, #E5EBED 100%);
        }

        #slider::-moz-range-track {
            border: none;
            background:none;
            outline: none;
        }

        #slider:focus {
            outline: none;
            border: none;
        }

        #slider::-webkit-slider-thumb {
            -webkit-appearance: none !important;
            background-color: #03071E;
            height: 20px;
            width: 20px;
            border-radius: 50%;
        }

        #slider::-moz-range-thumb {
            -moz-appearance: none !important;
            background-color: #03071E;
            border: none;
            height: 20px;
            width: 20px;
            border-radius: 50%;
        }

        select{
            width:90%;
            background: #F7F9FA;
            border-radius: 5px 0px 5px 0px;
            height: 40px;
            border: none;
            padding: 5px 5px;
            float:left;
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
        }

        select::-ms-expand {
            display: none;
        }

        select + i.fa{
            width:10%;
            background: #F7F9FA;
            border-radius: 0px 5px 0px 5px;
            height: 40px;
            padding: 5px 5px;
            padding-top: 12px;
            pointer-events: none;
        }

        option:active{
            border:none;
        }

        .checkboxinput {
            width: 98%;
            border-radius: 5px;
            height: 40px;
            padding: 8px 8px;
            padding-left : 20px;
            background: #F7F9FA;
            font-size: 15px;
        }

        .checkbox{
            height:15px;
            width:15px;
        }