@media(max-width:1400px) {
    .container {
        padding-left: 42px;
        padding-right: 42px;
    }

    .about-section .funfact {
        grid-template-columns: repeat(4, 1fr);
        gap: 24px;
    }

}



@media(max-width:1024px) {
    .container {
        padding-left: 42px;
        padding-right: 42px;
    }

    .section-soft-bg {
        padding: 40px 40px;
    }

    .navbar-nav li {
        margin: 15px 0;
    }

    .navbar-toggler i {
        font-size: 30px;
    }

    .hero {
        /* padding-top: 100px; */
        height: 90vh;
        width: 100%;
        display: flex;
        justify-content: center;
        position: relative;
    }

    .hero-content {
        text-align: center;
        width: 100%;
        height: 100%;
    }

    .hero h1 {
        font-size: 50px;
    }

    .about-section .funfact {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }

    nav ul li a {
        padding-left: 0;
    }

    .navbar .brand {
        padding: 0 15px;
    }

    .navbar-nav {
        text-align: center;
    }

    .navbar-collapse a, .navbar-collapse span {
        display: block;
    }

    .navbar .container {
        width: 100%;
        padding: 0;
    }

    .navbar-toggler i {
        font-size: 35px;
    }

    nav {
        height: inherit;
    }

    .navbar {
        padding: 10x 0 !important;
    }
}




@media (max-width: 768px) {
    .container {
        padding-left: 20px;
        padding-right: 20px;
    }

    .section-soft-bg {
        padding: 40px 20px;
    }

    .section,
    .section-bt {
        padding: 50px 0;
    }

    .section-sm {
        padding-top: 0;
    }

    .section-heading h3 {
        font-size: 26px;
    }

    .navbar .brand {
        padding: 0 15px;
    }

    .navbar-nav {
        text-align: center;
    }

    .navbar-collapse a, .navbar-collapse span {
        display: block;
    }

    .navbar .container {
        width: 100%;
        padding: 0;
    }

    .navbar-nav li {
        margin: 15px 0;
    }

    nav ul li a {
        padding-left: 0;
    }

    .navbar-toggler i {
        font-size: 35px;
    }

    header {
        backdrop-filter: inherit;
        box-shadow: inherit;
    }

    .navbar-collapse.collapse {
        background: rgba(119, 119, 119, 0.05);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);

        padding: 20px;
        padding-bottom: 60px;
        margin-top: 10px;
        opacity: 0;
        visibility: hidden;
        transition: all .2s ease-out;
        border-radius: 8px;
    }

    .navbar-collapse.collapsing {
        padding: 20px;
        padding-bottom: 60px;
        margin-top: 10px;
        opacity: 0;
        visibility: hidden;
        border-radius: 8px;
    }

    .navbar-collapse.collapse.show {
        opacity: 1;
        visibility: visible;
    }


    .hero {
        /* padding-top: 100px; */
        height: 90vh;
        width: 100%;
        display: flex;
        justify-content: center;
        position: relative;
    }

    .hero-content {
        text-align: center;
        width: 100%;
        height: 100%;
    }

    .hero-content .caption {
        max-width: 100%;
    }

    .hero-content .caption p {
        padding: 20px 0;
    }

    .hero-content .profile img {
        object-fit: cover;
    }

    .hero h1 {
        font-size: 30px;
        padding: 0;
    }

    .company {
        padding: 0;
    }

    .about-section h2 {
        padding-bottom: 15px;
    }

    .about-section p {
        font-size: 22px;
    }

    .about-section .funfact {
        grid-template-columns: repeat(1, 1fr);
    }

    .funfact>:nth-child(odd) {
        margin-top: 0 !important;
    }


    .hide-this {
        display: none;
    }

    .our-solutions {
        flex-direction: column-reverse;
        gap: 50px;
        padding: 20px;
    }

    .our-solutions.right {
        flex-direction: column-reverse;
    }

    .our-solutions .media {
        width: 100%;
        height: 100%;
    }

    nav {
        height: inherit;
    }

    .navbar {
        padding: 10x 0 !important;
    }

    .funfact .funfact-box .overlay {
        opacity: 1 !important;
    }

    .funfact .funfact-box .overlay::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
    }

    .mission-content {
        text-align: center;
    }


}