@media only screen and (max-width: 1640px) {

    .main-banner .carousel-item .carousel-caption .banner-heading {font-size: 48px;}
    .section-heading {font-size: 32px;}

}
@media only screen and (max-width: 1399px) {

    .about-home-bg {
        background-position: 5% 100%;
        background-size: 900px;
    }
    .main-banner .carousel-item .carousel-caption .banner-sub-heading {
        font-size: 35px;
    }
    .main-banner .carousel-item .carousel-caption .banner-heading {
        font-size: 45px;
    }
    .main-banner .carousel-item .banner-bg-img {
        /* height: 100vh; */
    }
    .section-heading {
        font-size: 40px;
    }
    .sub-heading {
        font-size: 35px;
    }
    footer .f-title {
        font-size: 28px;
    }
    footer::after {
        width: 270px;
    }
}
@media only screen and (min-width: 1200px) {    
    .main-footer .collapse:not(.show) {display: block !important;}
    .h-lg-100 { height: 100%; }
    .product-footer-listing {
        display: grid;
        grid-template-columns: auto auto;
        gap: 10px;
    }
    .product-footer-listing > li {
        margin-bottom: 0 !important;
    }
}
@media only screen and (max-width: 1199px) {


}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .main-footer .collapse:not(.show) {
        display: block !important;
    }
    header .navbar-brand img {
        width: 200px;
    }
    header .navbar-nav .nav-item {
        margin-left: 30px;
    }
    header .navbar-nav .nav-item .nav-link {
        font-size: 16px;
    }
    .main-footer .collapse:not(.show) {
        display: block !important;
    }
    .h-lg-100 { height: 100%; }
    .main-banner .carousel-item .carousel-caption .banner-heading {
        font-size: 30px;
    }
    .main-banner .carousel-item .banner-bg-img {
        height: auto;
        min-height: 640px;
    }
    .main-banner .carousel-item .carousel-caption >.row {
        align-items: end;
    }
    .main-banner .carousel-item .carousel-caption .banner-sub-heading {
        font-size: 25px;
    }
    .sub-heading {font-size: 20px;}
    .section-heading {font-size: 30px;}
    footer .f-title{ font-size: 20px; }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .main-footer .collapse:not(.show) {display: block !important;}
    .navbar-nav .dropdown .nav-link {position: relative;}
    .navbar-nav .dropdown .nav-link::after {
        position: absolute;
        content: "";
        height: 15px;
        width: 15px;
        right: 10px;
        background-image: url(../images/arrow-down-sign-yellow.png);
        background-repeat: no-repeat;
        background-size: contain;
        /* filter: invert(1); */
        top: 10px;
        transition: all 300ms ease-in-out;
    }
    .sticky .navbar-nav .dropdown .nav-link::after {
        filter: invert(0);
    }
    .navbar-nav .dropdown.open .nav-link::after {
        transform: rotate(-180deg);
    }
    .navbar-nav .dropdown.open .dropdown-menu {
        display: block;
    }
    .main-banner .carousel-item .carousel-caption {
        left: 5%;
        right: 5%;
    }
    .dark-mode .navbar-collapse .navbar-nav {
        background-color: #000;
        padding: 10px 15px;
    }
    
    .light-mode .navbar-collapse .navbar-nav {
        background-color: #fff;
        padding: 10px 15px;
    }
    .sticky .navbar-collapse .navbar-nav {
        background-color: #fff;
    }
    header {
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    }
    .light-mode header .navbar-toggler img {
        filter: unset;
    }
    .sticky .navbar-collapse .navbar-nav {
        background-color: #fff;
    }
    header .navbar-nav .nav-item.dropdown .dropdown-menu {
        opacity: 1;
        display: none;
        transform: none;
        box-shadow: none !important;
    }
    header .navbar-nav .nav-item.dropdown.open .dropdown-menu {
        display: block;
    }
    header .navbar-nav .nav-item {
        margin-left: 0;
    }
    .main-banner .carousel-item .carousel-caption .banner-sub-heading {
        font-size: 25px;
    }
    .main-banner .carousel-item .carousel-caption .banner-heading {
        font-size: 30px;
    }
    footer .f-title{ font-size: 18px; }
    footer .social-media li {
        margin-bottom: 10px; margin-right: 10px;
    }
    .sub-heading {font-size: 25px;}
    .main-banner .carousel-item .banner-bg-img {
        height: auto;
        min-height: 518px;
    }

}
@media only screen and (max-width: 767px) {
    .main-banner .carousel-item .banner-bg-img {
        height: 100vh;
    }
    header .navbar-brand img{
        width: 200px;
    }
    footer .f-title button {
        display: block; position: relative; color: #fff; text-shadow: none; 
        background: none;
        background-image: none;
        background-image: none;
        border: 0;
        box-shadow: none;
        font-size: 12px;
        position: absolute;
        top: 0;
        right: 0;
        padding: 0;
        width: 100%;
        cursor: pointer;
        height: 100%;
        outline: 0 !important;
    }
    footer::after {
        display: none;
    }
    footer .f-title button { display: block; position: relative; color: #fff; text-shadow: none; background: none; background-image: none; background-image: none; border: 0; box-shadow: none; font-size: 12px; position: absolute; top: 0; right: 0; padding: 0; width: 100%; cursor: pointer; height: 100%; outline: 0!important; }
    footer .f-title button:focus, footer .f-title button:hover, footer .f-title button:active { box-shadow: none!important; outline: 0!important; background-color: transparent; }
    .main-banner .carousel-item .carousel-caption {
        left: 5%;
        right: 5%;
    }
    .dark-mode .navbar-collapse .navbar-nav {
        background-color: #000;
        padding: 10px 15px;
    }
    .light-mode .navbar-collapse .navbar-nav {
        background-color: #fff;
        padding: 10px 15px;
    }
    .sticky .navbar-collapse .navbar-nav {
        background-color: #fff;
    }
    .dark-mode header.sticky, .dark-mode .sticky .navbar-collapse .navbar-nav {
        background-color: #000;
    }
    .dark-mode header .navbar-nav .nav-item .nav-link {
        color: #fff;
    }
    .dark-mode header .navbar-nav .nav-item .nav-link.active {
        color: #24b1e3;
    }
    .dark-mode header.sticky .navbar-nav .nav-item .search-btn img, .dark-mode  header.sticky .toggle-mode {
        filter: unset;
    }
    .dark-mode header .navbar-toggler img {filter: invert(1);}
    .dark-mode header.sticky .navbar-nav .nav-item.dropdown .dropdown-menu {
        background-color: #1D1C1C;
    }
    .dark-mode header .navbar-nav .nav-item.dropdown .dropdown-menu .dropdown-item { color: #A1A1A1;}
    header {
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    }
    .light-mode header .navbar-toggler img {
        filter: unset;
    }
    header .navbar-nav .nav-item.dropdown .dropdown-menu {
        opacity: 1;
        display: none;
        transform: none;
        box-shadow: none !important;
    }
    header .navbar-nav .nav-item.dropdown.open .dropdown-menu {
        display: block;
    }
    header .navbar-nav .nav-item {
        margin-left: 0;
    }
    .navbar-nav .dropdown .nav-link {position: relative;}
    .navbar-nav .dropdown .nav-link::after {
        position: absolute;
        content: "";
        height: 15px;
        width: 15px;
        right: 10px;
        background-image: url(../images/arrow-down-sign-yellow.png);
        background-repeat: no-repeat;
        background-size: contain;
        /* filter: invert(1); */
        top: 10px;
        transition: all 300ms ease-in-out;
    }
    .sticky .navbar-nav .dropdown .nav-link::after {
        filter: invert(0);
    }
    .navbar-nav .dropdown.open .nav-link::after {
        transform: rotate(-180deg);
    }
    .main-banner .carousel-item .carousel-caption .banner-sub-heading {
        font-size: 24px;
    }
    .main-banner .carousel-item .carousel-caption .banner-heading {
        font-size: 28px;
    }
    .timeline-tab-content .tm-year { font-size: 50px; }
    .timeline-tab-content .tm-sub-heading { font-size: 35px; }
    footer .f-title{ margin-top: 30px;}
    footer .f-title .accordion-button::after {
        position: absolute;
        content: "";
        height: 20px;
        width: 20px;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;
        background-image: url(../images/arrow-down-sign-yellow.png);
        background-repeat: no-repeat;
        background-position: right center;
        background-size: 20px;
        font-size: 22px;
    }
    .sub-heading {font-size: 22px;}
    .material-item:nth-child(even) .row {
        flex-flow: column;
    }
    .inner-banner-wrap .inner-banner-caption .page-title {
        font-size: 30px;
    }
    .main-banner .carousel-control-prev > span, .main-banner .carousel-control-next > span {
        background-size: 22px;
    }
    .main-banner .carousel-control-prev, .main-banner .carousel-control-next {
        height: 40px;
        width: 40px;
    }
}
@media only screen and (max-width: 575px) {
    header .navbar-brand img {
        width: 180px;
    }
}