/* =========================================
   Large
========================================= */

@media (max-width: 1199.98px) {

    .navbar-nav {
        gap: 2px;
    }

    .navbar-nav .nav-link {
        padding-left: 9px !important;
        padding-right: 9px !important;
    }

    .header-actions {
        gap: 16px;
    }

    .hero-title {
        font-size: 60px;
    }

}


/* =========================================
   Tablet / Mobile
========================================= */

@media (max-width: 991.98px) {

    :root {
        --header-height: 78px;
    }

    .site-header .navbar {
        height: var(--header-height);
    }

    .site-logo {
        width: 105px;
    }

    .hero-section,
    .hero-container,
    .hero-container > .row {
        min-height: 850px;
    }

    .hero-content {
        padding-top: 70px;
        padding-bottom: 180px;
    }

    .hero-title {
        max-width: 650px;

        font-size: 55px;
    }

    .hero-description {
        max-width: 580px;
    }

    .hero-bottom-inner {
        padding: 24px 0;

        flex-direction: column;

        align-items: flex-start;

        gap: 25px;
    }

    .hero-bottom {
        position: absolute;
    }

}


/* =========================================
   Mobile
========================================= */

@media (max-width: 767.98px) {

    .sinad-container {
        padding-left: 22px;
        padding-right: 22px;
    }

    .hero-section,
    .hero-container,
    .hero-container > .row {
        min-height: 780px;
    }

    .hero-background {
        background-position: 65% center;
    }

    .hero-overlay,
    html[dir="rtl"] .hero-overlay {
        background:
            linear-gradient(
                180deg,
                rgba(5,9,11,.72) 0%,
                rgba(5,9,11,.90) 50%,
                rgba(5,9,11,.98) 100%
            );
    }

    .hero-content {
        padding-top: 65px;
        padding-bottom: 190px;
    }

    .hero-eyebrow {
        margin-bottom: 20px;
    }

    .hero-title {
        margin-bottom: 20px;

        font-size: 42px;
        line-height: 1.25;

        letter-spacing: -1px;
    }

    .hero-description {
        margin-bottom: 28px;

        font-size: 14px;
        line-height: 1.9;
    }

    .hero-buttons {
        align-items: stretch;

        flex-direction: column;
    }

    .btn-sinad {
        width: 100%;
    }

    .hero-stats {
        width: 100%;

        justify-content: space-between;

        gap: 10px;
    }

    .hero-stat {
        align-items: flex-start;

        flex-direction: column;

        gap: 4px;
    }

    .hero-stat strong {
        font-size: 22px;
    }

    .hero-stat span {
        font-size: 9px;
    }

    .stat-divider {
        height: 48px;
    }

    .scroll-down {
        display: none;
    }

    .hero-bottom-inner {
        min-height: auto;

        padding: 20px 0;
    }

}


/* =========================================
   Small Mobile
========================================= */

@media (max-width: 420px) {

    .hero-title {
        font-size: 36px;
    }

    .hero-stat strong {
        font-size: 19px;
    }

}

/* =========================================
   Projects Responsive
========================================= */

@media (max-width: 1199.98px) {

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

    .project-card {
        height: 360px;
    }

}


@media (max-width: 991.98px) {

    .projects-section {
        padding: 70px 0;
    }

    .projects-header {
        align-items: flex-start;
        flex-direction: column;
        gap: 25px;
    }

    .projects-header-side {
        width: 100%;
        align-items: flex-start;
        justify-content: space-between;
    }

    .projects-title {
        font-size: 36px;
    }

}


@media (max-width: 767.98px) {

    .projects-section {
        padding: 55px 0;
    }

    .projects-title {
        font-size: 30px;
    }

    .projects-header-side {
        flex-direction: column;
    }

    .projects-header-side p {
        width: 100%;
    }

    .projects-grid {
        grid-template-columns: 1fr;
    }

    .project-card {
        height: 360px;
    }

}
/* =========================================
   Why SINAD Responsive
========================================= */

@media (max-width: 1199.98px) {

    .why-content {
        padding: 65px 45px;
    }

    .why-values {
        grid-template-columns: repeat(3, 1fr);
    }

    .why-value:nth-child(3)::after {
        display: none;
    }

}


@media (max-width: 991.98px) {

    .why-content {
        min-height: auto;
        padding: 65px 45px;
    }

    .why-image {
        min-height: 520px;
    }

    .why-title {
        font-size: 38px;
    }

}


@media (max-width: 767.98px) {

    .why-content {
        padding: 55px 25px;
    }

    .why-title {
        font-size: 31px;
    }

    .why-description {
        margin-bottom: 35px;

        font-size: 13px;
    }

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

    .why-value:nth-child(3)::after {
        display: block;
    }

    .why-value:nth-child(even)::after {
        display: none;
    }

    .why-image {
        min-height: 430px;
    }

}


@media (max-width: 420px) {

    .why-image {
        min-height: 380px;
    }

}
/* ==================================================
   CERTIFICATIONS RESPONSIVE
================================================== */

@media (max-width: 1399.98px) {

    .certifications-main {
        grid-template-columns:
            minmax(0, 1fr) 220px;
    }

    .certificate-image {
        height: 280px;
    }

}


@media (max-width: 1199.98px) {

    .certifications-layout {
        grid-template-columns: 28% 72%;
    }

    .certifications-main {
        grid-template-columns: 1fr;
    }

    .certificates-documents {
        min-height: 180px;

        flex-direction: row;

        gap: 25px;
    }

    .documents-icon {
        margin: 0;

        font-size: 48px;
    }

    .documents-line {
        display: none;
    }

    .certificates-documents h3 {
        margin-inline-end: 20px;
    }

}


@media (max-width: 991.98px) {

    .certifications-section {
        padding: 70px 0 50px;
    }

    .certifications-title {
        font-size: 34px;
    }

    .certifications-layout {
        display: block;
    }

    .certifications-visual {
        min-height: 360px;
    }

    .certificates-track {
        grid-template-columns:
            repeat(3, 1fr);
    }

    .certificate-image {
        height: 300px;
    }

}


@media (max-width: 767.98px) {

    .certifications-section {
        padding: 55px 0 40px;
    }

    .certifications-header {
        margin-bottom: 28px;
    }

    .certifications-title {
        font-size: 28px;
    }

    .certifications-description {
        font-size: 12px;
    }

    .certifications-visual {
        min-height: 300px;
    }


    /* Horizontal certificates on mobile */

    .certificates-track {
        display: flex;

        overflow-x: auto;

        scroll-snap-type: x mandatory;

        -webkit-overflow-scrolling: touch;
    }

    .certificate-card {
        flex: 0 0 78%;

        min-width: 78%;

        scroll-snap-align: start;
    }

    .certificate-image {
        height: 340px;
    }


    .certificates-documents {
        min-height: 230px;

        flex-direction: column;

        gap: 10px;

        padding: 35px 20px;
    }

    .documents-icon {
        margin-bottom: 10px;
    }

    .certificates-documents h3 {
        margin: 0 0 10px;
    }

    .documents-line {
        display: block;
    }


    .certifications-brand span {
        width: 50px;
    }

    .certifications-brand p {
        font-size: 8px;

        letter-spacing: 3px;
    }

}


@media (max-width: 480px) {

    .certificate-card {
        flex-basis: 88%;

        min-width: 88%;
    }

    .certificate-image {
        height: 310px;
    }

}
/* ==================================================
   CLIENTS RESPONSIVE
================================================== */

@media (max-width: 1199.98px) {

    .client-logo {
        flex-basis: 25%;
        min-width: 25%;
    }

}


@media (max-width: 991.98px) {

    .clients-section {
        padding: 65px 0 70px;
    }

    .clients-title {
        font-size: 32px;
    }

    .client-logo {
        flex-basis: 33.333%;
        min-width: 33.333%;
    }

}


@media (max-width: 767.98px) {

    .clients-section {
        padding: 55px 0 60px;
    }


    .clients-title {
        font-size: 27px;
    }


    .clients-description {
        padding: 0 15px;

        font-size: 11px;
    }


    /* Tabs */

    .clients-tabs {
        width: 100%;

        overflow-x: auto;

        justify-content: flex-start;

        scrollbar-width: none;
    }

    .clients-tabs::-webkit-scrollbar {
        display: none;
    }


    .clients-tab {
        flex: 0 0 auto;

        min-width: 105px;

        padding: 10px 16px;
    }


    /* Slider */

    .clients-slider-wrapper {
        padding: 0 45px;
    }


    .client-logo {
        flex-basis: 50%;
        min-width: 50%;

        height: 120px;

        padding: 20px;
    }


    .client-logo img {
        max-height: 55px;
    }


    .clients-slider {
        min-height: 120px;
    }


    .clients-arrow {
        width: 34px;
        height: 34px;

        font-size: 12px;
    }


    .clients-prev {
        inset-inline-start: 2px;
    }


    .clients-next {
        inset-inline-end: 2px;
    }

}


@media (max-width: 480px) {

    .clients-slider-wrapper {
        padding: 0 38px;
    }


    .client-logo {
        flex-basis: 100%;
        min-width: 100%;
    }

}

/* ==================================================
   CTA RESPONSIVE
================================================== */

@media (max-width: 991.98px) {

    .cta-section,
    .cta-wrapper {
        min-height: 320px;
    }


    .cta-wrapper {
        gap: 40px;
    }


    .cta-content h2 {
        font-size: 36px;
    }


    .cta-brand {
        min-width: 140px;
    }

}


@media (max-width: 767.98px) {

    .cta-section {
        min-height: 420px;
    }


    .cta-wrapper {
        min-height: 420px;

        display: block;

        padding: 55px 5px;
    }


    .cta-brand {
        margin-bottom: 35px;
    }


    .cta-content {
        max-width: 100%;
    }


    .cta-content h2 {
        font-size: 31px;
    }


    .cta-content p {
        font-size: 13px;
    }


    .cta-actions {
        align-items: stretch;
        flex-direction: column;

        max-width: 250px;
    }


    .cta-btn {
        width: 100%;
    }


    .cta-section::after {
        inset-inline-start: 75%;
    }

}

/* ==================================================
   FOOTER RESPONSIVE
================================================== */

@media (max-width: 991.98px) {

    .footer-main {
        grid-template-columns:
            1fr 1fr;

        gap: 50px;

        padding: 65px 0 50px;
    }


    .footer-company {
        grid-column: 1 / -1;
    }


    .footer-company p {
        max-width: 550px;
    }


    .footer-main > div::after {
        display: none;
    }

}


@media (max-width: 767.98px) {

    .footer-main {
        grid-template-columns: 1fr;

        gap: 45px;

        padding: 55px 0 45px;
    }


    .footer-company {
        grid-column: auto;
    }


    .footer-logo img {
        max-width: 160px;
    }


    .footer-bottom {
        grid-template-columns:
            1fr auto;

        gap: 25px;

        padding: 30px 0;
    }


    .footer-vision {
        order: 1;
    }


    .footer-top {
        order: 2;
    }


    .footer-copyright {
        grid-column: 1 / -1;

        order: 3;

        text-align: start;
    }

}


@media (max-width: 480px) {

    .footer-main {
        padding-top: 45px;
    }


    .footer-company p {
        font-size: 12px;
    }


    .footer-contact-item {
        gap: 11px;
    }


    .footer-contact-item strong {
        font-size: 11px;
    }

}

/* ==================================================
   CONTACT PAGE RESPONSIVE
================================================== */

@media (max-width: 1199.98px) {

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

    .contact-info-card:nth-child(2) {
        border-inline-end: 0;
    }

    .contact-info-card:nth-child(-n+2) {
        border-bottom:
            1px solid #ececea;
    }

}


@media (max-width: 991.98px) {

    .contact-hero h1 {
        font-size: 43px;
    }

    .contact-section {
        padding: 70px 0 80px;
    }

    .contact-main-grid {
        grid-template-columns: 1fr;
    }

    .contact-side {
        min-height: 400px;
    }

}


@media (max-width: 767.98px) {

    .contact-hero {
        min-height: 350px;
    }

    .contact-hero-content {
        padding: 80px 0 55px;
    }

    .contact-breadcrumb {
        margin-bottom: 25px;
    }

    .contact-hero h1 {
        font-size: 35px;
    }

    .contact-hero p {
        font-size: 12px;
    }

    .contact-section {
        padding: 55px 0 65px;
    }

    .contact-section-header h2 {
        font-size: 29px;
    }

    .contact-info-grid {
        grid-template-columns: 1fr;
    }

    .contact-info-card {
        border-inline-end: 0;
        border-bottom:
            1px solid #ececea;
    }

    .contact-info-card:last-child {
        border-bottom: 0;
    }

    .contact-form-wrapper {
        padding: 40px 25px;
    }

    .contact-form-row {
        grid-template-columns: 1fr;

        gap: 0;
    }

    .contact-form-header h3 {
        font-size: 24px;
    }

    .contact-submit {
        width: 100%;
    }

    .contact-side {
        padding: 45px 25px;
    }

    .contact-map-section {
        padding: 55px 0;
    }

    .contact-map-header {
        display: block;
    }

    .contact-map-location {
        margin-top: 15px;
    }

    .contact-map {
        height: 330px;
    }

}

/* ==================================================
   QUOTE MODAL RESPONSIVE
================================================== */

@media (max-width: 767.98px) {

    .quote-modal .modal-dialog {
        margin: 15px;
    }

    .quote-modal-layout {
        display: block;

        min-height: auto;
    }

    .quote-modal-side {
        padding: 40px 25px 35px;
    }

    .quote-modal-side h3 {
        max-width: 300px;

        font-size: 23px;
    }

    .quote-side-line {
        margin: 20px 0;
    }

    .quote-modal-form {
        padding: 40px 25px 30px;
    }

    .quote-form-heading h2 {
        font-size: 24px;
    }

    .quote-form-row {
        grid-template-columns: 1fr;

        gap: 0;
    }

    .quote-modal-close {
        top: 12px;
        inset-inline-end: 12px;
    }

}


@media (max-width: 480px) {

    .quote-modal .modal-dialog {
        margin: 8px;
    }

    .quote-modal-side {
        padding:
            45px 20px 28px;
    }

    .quote-modal-form {
        padding:
            32px 20px 25px;
    }

}