/* Extra small devices (phones, 600px and down) */
/* @media only screen and (max-width: 600px) {...} */

/* Small devices (portrait tablets and large phones, 600px and up) */
/* @media only screen and (min-width: 600px) {...} */

/* Medium devices (landscape tablets, 768px and up) */
/* @media only screen and (min-width: 768px) {...} */

/* Large devices (laptops/desktops, 992px and up) */
/* @media only screen and (min-width: 992px) {...} */

/* Extra large devices (large laptops and desktops, 1200px and up) */
/* @media only screen and (min-width: 1200px) {...} */


@media only screen and (max-width: 1400px){
    .scanix-intro .col-md-7{
        padding-right: 10px;
    }
}
@media only screen and (max-width: 1200px){
    .scanix-intro .col-md-7{
        padding-right: 50px;
    }
    .scanix-intro .col-md-7 h2{
        font-size: 42px;
    }
    .scanix-intro .col-md-5 img{
        height: 400px;
    }
}
@media only screen and (max-width: 991px){
    .navbar-toggler-icon {
        background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,255,255,1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E") !important;
    }
    .navbar{
        backdrop-filter: none;
        position: relative;
        background-color: #1F2937;
    }
    .hero .col-md-12 h1{
        font-size: 42px;
    }
    .hero .col-md-12 p{
        padding: 0;
    }
    .hero{
        height: 550px;
    }
    .offcanvas{
        background-color: #1F2937 !important;
        padding: 20px;
    }
    .offcanvas-header{
        color: #fff;
    }
    .offcanvas ul .nav-link{
        color: #fff;
        padding: 0 !important;
        font-size: 18px;
        font-weight: 300;
    }
    .navbar .nav-link.active{
        font-weight: 400;
    }
    .navbar .nav-item{
        padding-bottom: 15px;
    }
    .navbar .nav-profile i{
        color: #fff;
        border: 1px solid #fff;
    }
    .profile h2{
        font-size: 38px;
    }
    .profile h2 span{
        font-size: 20px;
    }
    .std-cards, .profile, .ses-single, .blog-box, .conn-sec{
        padding-top: 0;
    }
    .quiz, .session, .leader{
        padding: 50px 0 100px;
    }
    .quiz-result{
        padding: 40px 20px;
    }
    .quiz-single{
        padding: 40px 20px;
    }
    .std-cards .search-box input{
        width: 100%;
    }
    .scanix-intro .col-md-7 h2{
        font-size: 32px;
    }
    .scanix-intro p{
        font-size: 14px;
        margin-bottom: 20px;
    }
    .scanix-intro .btn {
        padding: 12px 30px;
        font-size: 14px;
    }
    .scanix-intro .col-md-5 img{
        height: 350px;
    }
    .scanix-intro{
        padding: 50px 0;
    }
}
@media only screen and (max-width: 769px){
    .navbar{
        padding: 4px 10px !important;
    }
    .hero{
        height: 450px;
    }
    .hero .mt-5 a{
        margin-bottom: 0 !important;
    }
    .hero span h6 {
        font-size: 12px;
        padding-left: 5px;
    }
    .hero span img {
        width: 14px;
    }
    .hero .col-md-12 h1 {
        font-size: 28px;
        margin-bottom: 20px;
    }
    .hero .col-md-12 p {
        font-size: 14px;
        padding: 0;
    }
    .hero .mt-5 a{
        display: block;
        margin-bottom: 20px;
    }

    .view-std h2 {
        font-size: 32px;
        line-height: 38px;
    }
    .view-std p{
        padding: 0 !important;
    }
    .quiz h2 {
        font-size: 20px;
        margin-bottom: 10px;
    }
    .quiz .quiz-box{
        padding: 20px;
    }
    .quiz .quiz-box .col-md-2{
        width: 50%;
        justify-content: start;
        margin-top: 15px;
    }
    .quiz .quiz-box .btn {
        background-color: #10B981;
        border: 1px solid #10B981;
        padding: 6px 18px;
        border-radius: 3px;
        font-size: 14px;
    }
    .quiz .quiz-box .col-md-2 h6{
        font-size: 20px;
    }
    .session h2 {
        font-size: 20px;
        margin-bottom: 10px;
    }
    .session .session-box{
        margin-bottom: 20px;
    }
    .leader h2{
        font-size: 20px;
        margin-bottom: 10px;
    }
    .leader .leader-box{
        padding: 15px 25px;
    }
    .leader .leader-box .col-md-1{
        width: 10%;
        padding: 0;
    }
    .leader .leader-box .col-md-1 h5{
        font-size: 20px;
    }
    .leader .leader-box .col-md-3{
        width: 45%;
        padding: 0;
    }
    .leader .leader-box .col-md-3 h3{
        font-size: 12px;
    }
    .leader .leader-box .col-md-4{
        width: 45%;
        padding: 0;
    }
    .leader .leader-box .col-md-4 h3{
        font-size: 12px;
    }
    .leader .leader-box .col-md-2{
        display: none;
    }
    .leader .leader-box .rank{
        padding-left: 10px !important;
    }
    .leader .leader-box .col-md-2 h5{
        font-size: 18px;
    }
    .leader .leader-box .col-md-2 h6{
        font-size: 14px;
    }
    .cta .cta-box{
        padding: 40px 20px;
        margin: 50px 0 0;
    }
    .cta h2{
        font-size: 20px;
        margin-bottom: 10px;
    }
    .cta p {
        font-size: 12px;
        font-weight: 300;
    }
    .cta .btn {
        padding: 8px 20px;
        font-size: 14px;
    }
    footer .col-md-4{
        margin-bottom: 40px;
    }
    footer{
        padding: 100px 0 50px;
    }
    .footer-last ul{
        float: left;
        margin-top: 12px;
    }
    .std-cards h1 {
        font-size: 28px;
        margin: 50px 0 40px;
    }
    .std-cards .std-filter .d-flex select{
        width: 100%;
    }
    .select2-container{
        margin: 0;
        width: 100% !important;
    }
    .std-cards #filterSection{
        margin-bottom: 20px;
    }
    .std-cards h1 {
        font-size: 28px;
        margin: 50px 0 40px;
    }
    .quiz h1, .session h1, .leader h1{
        font-size: 28px;  
    }
    .profile-wrapper{
        padding: 40px 20px;
        margin-top: 20px;
    }
    .profile-wrapper img{
        width: 90px;
        margin-bottom: 20px;
    }
    .profile-wrapper h1{
        font-size: 22px;
    }
    .profile-wrapper h6{
        font-size: 14px;
    }
    .profile h2{
        font-size: 32px;
        margin-top: 15px;
    }
    .profile-wrapper .mt-3 h5{
        font-size: 16px;
    }
    .profile-wrapper .mt-3 p{
        font-size: 14px;
    }
    .profile-wrapper .d-flex{
        display: block !important;
    }
    .profile-wrapper .rounded-pill{
        margin-bottom: 5px;
    }
    .ses-single{
        margin: 0 10px;
    }
    .session-single {
        margin-top: 20px;
        border-radius: 5px;
        padding: 20px;
    }
    .session-single h1{
        font-size: 20px;
        margin-bottom: 30px;
    }
    .session-single img{
        width: 100%;
        margin-bottom: 30px;
    }
    .session-single h6,
    .session-single h5,
    .session-single h4{
        font-size: 16px;
    }
    .quiz-single, .quiz-result{
        padding: 40px 0;
    }
    .quiz-result h1,
    .quiz-single h1{
        font-size: 20px;
    }
    .quiz-single p{
        font-size: 14px;
    }
    .quiz-result h1{
        margin-bottom: 20px;
    }
    .quiz-result p{
        font-size: 14px;
    }
    .quiz-result h3 {
        font-size: 18px;
        margin: 25px 0;
    }
    .quiz-result .card h5{
        font-size: 15px;
    }
    .quiz-result .card .list-group-item{
        font-size: 14px;
    }
    .quiz-result .btn{
        margin-top: 20px;
    }
    .offcanvas-body p{
        color: #fff;
    }
    .profile-wrapper h1 i{
        font-size: 18px;
    }
    .email-req .email-box span{
        display: block;
        font-size: 14px;
        margin-bottom: 10px;
    }
    .profile-btns .btn{
        margin-bottom: 5px;
    }
    .conn-sec h1{
        font-size: 30px;
    }
    .spark-feed{
        padding: 50px 10px;
    }
    .scanix-intro .btn{
        margin-bottom: 50px;
    }
    .scanix-intro .col-md-5 img {
        height: 550px;
        width: 100%;
    }


}
@media only screen and (max-width: 383px){
    .cta h2{
        font-size: 18px;
    }
}
@media only screen and (min-width: 768px){
    .profile .select2-container{
        margin: 0;
        width: 100% !important;
    }
}

@media only screen and (max-width: 1200px){
    .profile-box-container .profile-box img{
        width: 100%;
        height: 300px;
        object-fit: cover;
        margin-bottom: 10px;
    }
}
@media only screen and (max-width: 768px){
    .profile-box-container{
        display: block !important;
    }
    .profile-box-container .profile-box{
        margin-bottom: 20px;
    }
    .profile-box-container .profile-box img{
        width: 100%;
        height: 400px !important;
        object-fit: cover;
        margin-bottom: 10px;
    }
    .about h1{
        font-size: 40px;
    }
    .about ul{
        margin: 20px;
    }
}
@media only screen and (max-width: 575px){
    .scanix-intro .col-md-5 img {
        height: 450px;
    }
}

@media only screen and (max-width: 426px){
    .hero .col-md-12 h1 span{
        font-size: 30px;
        line-height: 60px;
    }
    .hero{
        height: 450px;
    }
    .hero .col-md-12 h1{
        font-size: 22px;
    }
    .view-std h2 {
        font-size: 24px;
        line-height: 30px;
    }
    .details-box{
        padding: 30px;
    }
    .details-box p{
        font-size: 12px;
    }
    .details-box .btn {
        margin-top: 5px;
        font-size: 13px;
        padding: 10px 20px;
    }
    .details-box h2{
        font-size: 22px;
        line-height: 34px;
        margin-bottom: 15px;
    }
    .blog-single{
        padding: 30px 20px;
    }
    .blog-single img{
        width: 100%;
    }
    .blog-single h1{
        font-size: 22px;
    }
    .blog-single div h1{
        font-size: 22px;
    }
    .blog-single div h2{
        font-size: 20px;
    }
    .blog-single div h3{
        font-size: 18px;
    }
    .blog-single div h4{
        font-size: 17px;
    }
    .blog-single div h5{
        font-size: 16px;
    }
    .blog-single div h6{
        font-size: 15px;
    }
    .about h1{
        font-size: 34px;
    }
    .about .banner h2{
        font-size: 24px;
    }
    .about .banner{
        height: 200px;
    }
    .view-conn-box .col-md-3{
        padding-top: 20px;
    }
    .conn-sec h1{
        font-size: 22px;
    }
    .std-cards .search-box input {
        padding: 13px 20px;
        font-size: 12px;
    }
    .spark-feed .spark-box{
        padding: 30px 30px;
    }
    .scanix-intro .col-md-5 img {
        height: 400px;
    }

}

@media only screen and (max-width: 376px){
    .hero .col-md-12 h1{
        font-size: 19px;
    }
    .hero .col-md-12 p{
        font-size: 13px;
    }
    .login-container{
        width: 300px !important;
    }
    .hero .mt-5{
        margin-top: 30px !important;
    }
    .hero .col-md-12 .btn {
        padding: 10px 24px;
        font-size: 14px;
    }
}
@media only screen and (max-width: 1025px){
    .view-std p{
        padding: 0 100px;
    }
    .details-box .dp-2{
        display: none !important;
    }
    .quiz p, .session .pd-2, .leader p{
        padding-right: 0px;
        font-size: 12px;
    }
}
@media only screen and (max-width: 768px){
    .details .col-md-4{
        justify-content: center;
        padding: 30px 0 ;
    }
    .details img{
        width: 60%;
    }
}