/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 320px) {
    /* Add your CSS rules here */
    .footer-social{
        padding: 20px;
    }
    .ml-25{
        margin-left: 0;
    }
}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (max-width: 768px) {
    .sub-heading{
        font-size: 2.5em;
    }
    .main-heading{
        font-size: 2.5em;
    }
    h3.designation{
        padding: 0;
    }
    .main-heading br {
        display: none;
    }
    .testimonial-item .message{
        font-size: 13px;
    }
    .pr-100{
        padding-right: 0;
    }
    .background-color{
        display: none;
    }
    .nav-list{
        flex-wrap: wrap;
        justify-content: center;
    }
    .navigation figure.figure-logo {
        justify-content: center;
        display: flex;
    }
    .mt-50{
        margin-top: 20px!important;
    }
    .testimonial{
        padding: 30px 0;
    }
    .background-color-3{
        display: none;
    }
    .background-color-4{
        display: none;
    }
    .slick-dots{
        left: 0;
    }
    .offcanvas-body .nav-list {
        flex-direction: column;
        gap: 15px;
      }
    /* Add your CSS rules here */
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (max-width: 992px) {
    /* Add your CSS rules here */
}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (max-width: 1200px) {
    .hero-banner-pic{
        display: none;
    }
    /* .profile-bg .row {
        flex-direction: column-reverse;
    } */
    .profile-bg{
        padding: 20px;
    }
    img.profile-image {
        max-height: 500px;
    }
    .profile-wrapper{
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .profile-social{
        display: block;
        bottom: 0;
        left: 0;
        padding: 20px;
    }
    .profile-social-wrapper, .footer-social-wrapper{
        justify-content: center;
    }
    /* .profile-wrapper{
        display: none;
    } */
    /* Add your CSS rules here */
}
@media (min-width: 992px) {
    .navbar-expand-lg .offcanvas .offcanvas-body {
        justify-content: end;
    }
}
/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
    .hero-banner-pic img{
        min-width: 300px;
    }
    .sub-heading{
        font-size: 4em;
    }
    .main-heading{
        font-size: 4em;
    }
    /* Add your CSS rules here */
}

@media only screen and (min-width: 1440px) {
    .hero-banner-pic img{
        min-width: 400px;
    }
}