/* 01. Mobile screen media */
/* 02. Tab screen media */
/* 03. iPad mini and air screen media */
/* 04. iPad pro screen media */
/* 05. Laptop and desktop screen media */
/* 06. Below tab screen media */
/* 07. Below laptop/desktop screen */
/* 08. Above mobile screen */
/* 09. Above tab screen */

/* 01. Mobile screen media */
@media only screen and (max-width: 767.09px) {
    button.navbar-toggler {
        margin-left: 10px;
    }

    #main-nav > div > div.act-btn > div > a {
        font-size: 14px;
        padding-left: 15px;
        padding-right: 15px;
    }

    #nav-ribon > div {
        flex-direction: column;
    }

    #nav-ribon > div > .quick-contact {
        justify-content: space-between;
        padding: 4px 10px;
        background-color: #0f2467;
        border-radius: 2px;
    }

    #nav-ribon .quick-contact a, #nav-ribon .quick-contact {
        gap: 5px;
    }

    #nav-ribon > div div a span, #nav-ribon > div div span {
        font-size: 14px;
    }

    #nav-ribon > div > div.nav-social-icons > span {
        display: none;
    }

    #nav-ribon .nav-social-icons {
        /* width: 100%; */
        justify-content: space-between;
        padding: 4px 0;
    }

    #nav-ribon a.social-icon {
        width: -webkit-fill-available;
        height: 30px;
        background-color: var(--helper-color);
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 5px;
    }

    #navbarNav .navbar-nav .nav-link.active {
        border-bottom: none;
    }

    #main-nav > div > a > img {
        width: 200px;
    }

    #main-nav .nav-contact-us {
        width: 100%;
    }

    .act-btn {
        width: max-content;
        display: flex;
    }

    #navbarNav > ul {
        width: 100%;
        justify-content: space-around;
    }

    #main-nav > div > div.d-flex.nav-contact-us {
        display: none !important;
    }

    #hero-section h1 {
        font-size: 45px;
        line-height: 25px;
        height: 75px;
        /* text-align: center; */
    }

    #hero-section > div > div {
        width: 100%;
    }

    .hero-section {
        height: max-content;
        padding-bottom: 180px;
        background-size: cover;
        background-position-x: left;
    }

    .dual-heading .heading-two {
        /* text-wrap: balance; */
        font-size: 34px;
    }

    .icon-lists {
        gap: 8px;
    }

    #fact-section > div {
        margin-top: -125px;
    }

    #fact-section > div > div {
        height: max-content;
        position: relative;
        flex-direction: column;
        gap: 50px !important;
        padding: 50px 0;
    }

    #fact-section > div > div::before {
        content: "";
        background: #071952;
        width: 50%;
        height: 100%;
        position: absolute;
        top: 50%;
        left: -30%;
        transform: translate(0, -50%);
        border-right: 10px solid #37b7c3;
        border-radius: 50%;
        box-shadow: 10px 0 75px 0px black;
    }

    .about-us-imgs img:nth-child(1) {
        width: 55%;
    }
    
    .about-us-imgs {
        margin: -40px 0 0 0;
    }

    .main-section {
        height: max-content;
        padding: 0 0 50px 0;
    }

    #main-section > div {
        flex-direction: column;
    }

    section#why-us {
        background: var(--dark-blue-color);
        height: max-content;
        padding: 24% 0;
    }

    .why-us-cards {
        flex-direction: column;
        padding-bottom: 120px;
    }

    #company-facts > div > div > div.col-lg-6 {
        border-right: none;
    }

    #company-facts > div > div {
        flex-direction: column;
    }

    .company-img > img {
        width: 100%;
    }

    #company-facts > div > div > div {
        width: 100%;
        gap: 50px;
    }

    section#services {
        padding-top: 50px;
        padding-bottom: 50px;
    }

    .service-cards {
        grid-template-columns: repeat(1, 1fr);
    }

    section#testimonial-contact {
        padding: 50px 0;
    }

    #testimonial-contact > div {
        flex-direction: column;
        gap: 50px;
    }

    .form-container {
        width: 100%;
        padding: 50px 6% !important;
    }

    .form-container::before {
        width: 0;
    }

    #faq > div {
        flex-direction: column-reverse;
    }

    div#faqAccordion {
        margin-bottom: 0;
    }

    .subscribe-form {
        width: 100%;
    }

    .footer .row:last-child {
        padding: 2%;
    }
}

/* 02. Tab screen media */
@media (min-width: 768px) and (max-width: 1279.90px) {

}

/* 03. iPad mini and air screen media */
@media (min-width: 768px) and (max-width: 1023.90px) {
    #nav-ribon div.nav-social-icons > span {
        display: none;
    }

    a.navbar-brand {
        width: 48%;
    }

    .act-btn {
        width: 48%;
        display: flex;
        justify-content: end;
        align-items: center;
    }

    #main-nav > div > div.d-flex.nav-contact-us {
        display: none !important;
    }

    #main-nav .nav-contact-us {
        width: 100%;
    }

    #navbarNav > ul {
        width: 100%;
    }

    .hero-section {
        height: 40vh;
        background-size: cover;
        background-position-x: left;
    }

    .hero-info {
        width: 100%;
    }

    .main-section {
        height: max-content;
    }

    #main-section > div {
        flex-direction: column;
    }

    section#why-us {
        height: max-content;
        padding-top: 120px;
        padding-bottom: 220px;
    }

    .why-us-cards {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr);
    }

    #why-us > div > div.why-us-cards > div:nth-child(3) {
        grid-column-start: 1;
        grid-column-end: 3;
        /* margin-bottom: -196px; */
    }

    #company-facts > div > div > div {
        width: 46%;
        padding-right: 15px;
        margin-right: 15px;
    }

    .company-img > img {
        width: 100%;
    }

    .service-cards {
        grid-template-columns: repeat(2, 1fr);
    }

    #testimonial-contact > div {
        flex-direction: column;
        gap: 25px;
    }

    .form-container::before {
        width: 0;
    }

    .form-container {
        width: 100%;
    }

    .footer-social-icons {
        margin-bottom: 50px;
    }
}

/* 04. iPad pro screen media */
@media (min-width: 1024.00px) and (max-width: 1279.90px) {
    .act-btn {
        display: none;
    }

    .footer-brand img,
    #main-nav > div > a > img {
        width: 250px;
    }

    #hero-section {
        height: 50vh;
        background-size: 100%;
    }

    .main-section {
        height: 45vh;
        background-image: url("../images/Dots.svg");
        background-repeat: no-repeat;
        background-size: 400px;
        background-position: left top;
    }

    section#why-us {
        height: 65vh;
    }
}

/* 05. Laptop and desktop screen media */
@media (min-width: 1280px) and (max-width: 1439.09px) {}

/* 06. Below tab screen media */
@media only screen and (max-width: 1279.90px) {}

/* 07. Below laptop/desktop screen */
@media only screen and (max-width: 1439.09px) {}

/* 08. Above mobile screen */
@media (min-width: 768px) {}

/* 09. Above tab screen */
@media (min-width: 1280px) {
    .act-btn {
        display: none;
    }
}

/* 10.  */
@media only screen and (max-width: 360px) {
    #main-nav > div > div.act-btn > div {
        display: none !important;
    }

    #nav-ribon > div > div.quick-contact > a {
        margin-left: 0 !important;
    }
    #company-facts > div > div {
        padding: 50px 6% !important;
    }
}

/* 11. */
@media (min-width: 1024px) and (max-width: 1279.90px) {
    #hero-section h1 {
        font-size: 50px;
        line-height: 35px;
        height: 90px;
    }
}