/**========================================================================
 *                                  Roots
 *========================================================================**/

:root {
    --blueDark: #001221;
    --gold: #bf9b30;
}

/**========================================================================
 *                           CONTAINER SIZE
 *========================================================================**/

@media (min-width: 1400px) {

    .bs-container,
    .xxl\:container-fluid {
        width: 70% !important;
    }
}

/**========================================================================
*                           RESPONSIVE QUERIES
*========================================================================**/

@media only screen and (max-width: 500px) {
    body {
        font-size: 14px;
    }

    /**========================================================================
    *                           MIX
    *========================================================================**/

    .preloader img {
        width: 85%;
        margin: auto;
    }

    /**========================================================================
    *                           MARGINS
    *========================================================================**/

    .section-my {
        margin-bottom: 70px !important;
        margin-top: 70px !important;
    }

    .section-mb {
        margin-bottom: 70px !important;
    }

    .section-mt {
        margin-top: 70px !important;
    }

    .section-py {
        padding-top: 70px !important;
        padding-bottom: 70px !important;
    }

    .section-pb {
        padding-bottom: 70px !important;
    }

    .section-pt {
        padding-top: 70px !important;
    }

    .section-padding {
        padding: 70px;
    }

    /**========================================================================
    *                                   HEADER
    *========================================================================**/

    header .navbar {
        display: none;
    }

    .nav-gap {
        display: none;
    }

    /**========================================================================
    *                               HOME BREADCRUMB
    *========================================================================**/

    .home-page .breadcrumb {
        height: auto;
        padding: 50px 0;
    }

    .home-page .breadcrumb .breadcrumb-heading {
        width: auto;
        line-height: 1.3;
    }

    .home-page .breadcrumb .breadcrumb-text {
        width: auto;
        line-height: 1.5;
    }

    .home-page .about-us-section,
    .home-page .services-section,
    .home-page .why-choose-us-section,
    .home-page .section-our-philosophy,
    .home-page .last-section {
        height: auto;
        padding: 60px 0;
    }

    .home-page .services-section .home-services-item {
        width: 100%;
    }

    .home-page .services-section .home-services-item img {
        height: 140px;
    }

    .home-gallery-grid {
        height: auto;
        gap: 20px;
    }

    /**========================================================================
    *                               HOME PAGE
    *========================================================================**/

    /*================== HERO SECTION  =================*/

    .home-page .hero-section {
        height: auto;
    }

    .home-page .hero-section .content .heading,
    .home-page .hero-section .content .text {
        text-align: center;
    }

    .home-page .hero-section .content {
        transform: translateY(-50%);
    }

    /*================== ITEMS =================*/

    .home-page .why-choose-us-section .home-why-us-item:hover {
        transform: translateY(-10px) !important;
    }

    .home-page .services-section .home-services-item,
    .home-page .why-choose-us-section .home-why-us-item {
        width: 100%;
    }

    .home-page .why-choose-us-section::after {
        display: none;
    }

    .home-page .section-our-philosophy .our-philosophy-cont {
        flex-direction: column;
        gap: 90px;
    }

    .home-page .section-our-philosophy .our-philosophy-cont .our-philosophy-item {
        align-items: center;
        flex-direction: column;
        text-align: center;
        gap: 60px;
        width: 100%;
    }

    .home-page .section-our-philosophy.with-bg {
        height: auto;
    }

    .home-page .section-our-philosophy .our-philosophy-img {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .clients-section .clients-row {
        justify-content: center;
    }

    .section-our-gallery .home-gallery-slider .slick-arrow {
        font-size: 40px;
    }

    .section-our-gallery .home-gallery-slider .slick-arrow.prevArrow {
        right: 4px;
    }

    .section-our-gallery .home-gallery-slider .slick-arrow.nextArrow {
        left: 4px;
    }

    .section-our-gallery .home-gallery-slider .home-gallery-slider-item {
        height: 240px;
    }

    /**========================================================================
    *                               ABOUT US PAGE
    *========================================================================**/

    .about-us-page .section-tesimonial {
        height: auto;
    }

    /**========================================================================
    *                               OUTSOURCING PAGE
    *========================================================================**/

    .outsourcing-page .breadcrumb {
        height: auto;
        background-position: center;
    }

    .outsourcing-page .breadcrumb .breadcrumb-text {
        bottom: 50%;
        right: 0;
        transform: translate(0%, 50%);
    }

    .why-partner-img {
        margin: 0 auto;
    }

    .why-partner-img.increase {
        width: 86px;
        height: 64px;
        margin: 0 auto;
    }

    .why-partner-img.ambiance {
        width: 122px;
        height: 60px;
    }

    .why-partner-img.solution {
        width: 60px;
        height: 86px;
    }

    .why-partner-img.marketing {
        width: 74px;
        height: 60px;
    }

    .packages-item {
        padding: 30px 25px;
    }

    .packages-item img {
        margin: 0 auto 20px;
        height: 70px;
    }

    .about-gallery-grid {
        height: auto;
        gap: 20px;
    }

    [class*="clients-slider"] .slick-slide .inner {
        height: 105px;
        width: 160px;
    }

    .clients-section .clients-row {
        margin-right: 0 !important;
        margin-left: 0 !important;
        justify-content: center;
        padding: 0 26px;
    }

    /**========================================================================
    *                               CATERING PAGE
    *========================================================================**/

    .catering-page .breadcrumb {
        padding: 60px 0;
        height: auto;
    }

    .catering-page .breadcrumb .breadcrumb-text {
        right: 0;
        top: 0;
        transform: translateY(0%);
        position: relative;
    }

    /**========================================================================
    *                               FRANCHISE PAGE
    *========================================================================**/

    .franchise-page .breadcrumb {
        height: auto;
        padding: 60px 15px;
    }

    .franchise-page .breadcrumb .breadcrumb-heading {
        font-size: 25px;
        line-height: 1.4;
    }

    .franchise-page .breadcrumb .form-control {
        flex-direction: column;
    }

    .franchise-page .breadcrumb .form-control .form-input {
        width: 100%;
    }

    /**========================================================================
    *                               OUTLETS PAGE
    *========================================================================**/

    .outlets-page .breadcrumb {
        height: auto;
    }

    .outlets-page .breadcrumb .breadcrumb-text {
        bottom: 50%;
        right: 0;
        transform: translate(0%, 50%);
    }

    .outlets-page .outlets-img-hover .images-row {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .outlets-img-hover .img-item .overlay-one,
    .outlets-img-hover .img-item:hover .overlay-one {
        height: 60px;
        top: auto;
        bottom: 0;
        opacity: 1;
        background-color: rgba(0, 18, 33, 0.65);
    }

    .outlets-img-hover .overlay-one h1 {
        text-shadow: 0 2px 2px rgba(0, 0, 0, 0.85);
        padding: 0 12px;
    }

    /**========================================================================
    *                               CONTACT US PAGE
    *========================================================================**/

    .contact-us-page .contact-img-cont .contact-img {
        padding: 20px;
        height: auto;
        background-image: linear-gradient(to right,
                rgb(0, 29, 54, 0.75),
                rgb(0, 29, 54, 0.75)),
            url(../img/contact-us/1.jpg);
    }

    .contact-us-page .contact-img-cont .contact-img .contact-us-heading {
        text-align: center;
        margin-bottom: 30px;
        letter-spacing: 1px;
    }

    .contact-social {
        align-items: start;
    }

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

    .footer .f-left-side .f-logo {
        margin: 0px auto 32px;
    }

    .footer .f-left-side .f-contact-info h4.f-email,
    .contact-us-info h4.contact-us-email {
        font-weight: 600;
    }

    .footer .f-left-side .f-contact-info .f-number p,
    .contact-us-info .contact-us-number p {
        line-height: 1.4;
    }

    .footer .f-left-side .f-contact-info .f-number,
    .contact-us-info .contact-us-number {
        align-items: center;
        justify-content: center;
        margin-bottom: 20px;
    }

    .footer .f-right-side .f-social .f-icons i,
    .contact-social .contact-icons i {
        font-size: 28px;
    }

    .footer .f-right-side {
        justify-content: center;
        margin-bottom: 30px;
    }

    .footer .f-left-side .f-contact-info,
    .contact-us-info {
        margin-bottom: 40px;
        text-align: center;
    }

    .footer .copyright {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }

    .section-heading {
        font-size: 24px;
    }
}