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

@media (max-width: 991px) {

    .top-bar {
        display: none;
    }

    .main-navbar {
        min-height: 72px;
    }

    .navbar-toggler {
        border: none;
        box-shadow: none !important;
    }

    .navbar-toggler-icon {
        width: 24px;
    }

    .navbar-nav {
        gap: 0;
        padding-top: 15px;
    }

    .nav-link {
        padding: 12px 5px !important;
    }

    .nav-btn {
        margin: 15px 0;
        width: fit-content;
    }

    .dropdown-menu {
        box-shadow: none;
        background: var(--light);
    }

    .hero-section {
        min-height: 700px;
    }

    .hero-scroll {
        display: none;
    }

    .about-images {
        margin-bottom: 20px;
    }

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

    .process-wrapper {
        flex-wrap: wrap;
        gap: 40px 10px;
    }

    .process-line {
        display: none;
    }

    .process-item {
        width: 45%;
    }

    .why-image {
        height: 500px;
    }

}


@media (max-width: 767px) {

    .section-padding {
        padding: 75px 0;
    }

    .hero-content {
        padding: 60px 0;
    }

    .hero-content h1 {
        font-size: 48px;
    }

    .hero-content p {
        font-size: 15px;
    }

    .hero-buttons {
        flex-direction: column;
        align-items: flex-start;
    }

    .stats-section .col-6:nth-child(2) .stat-box {
        border-right: 0;
    }

    .stat-box {
        border-bottom: 1px solid rgba(255,255,255,0.1);
    }

    .stat-box h2 {
        font-size: 32px;
    }

    .about-images {
        padding-right: 35px;
        padding-bottom: 50px;
    }

    .about-main-image {
        height: 400px;
    }

    .about-small-image {
        width: 190px;
        height: 150px;
        border-width: 7px;
    }

    .experience-card {
        padding: 15px;
        bottom: 15px;
    }

    .experience-card strong {
        font-size: 28px;
    }

    .about-features {
        grid-template-columns: 1fr;
    }

    .project-card,
    .project-large {
        height: 360px;
    }

    .why-image {
        height: 400px;
    }

    .why-badge {
        left: 15px;
        bottom: 20px;
    }

    .process-wrapper {
        gap: 35px 0;
    }

    .process-item {
        width: 50%;
    }

    .cta-section {
        padding: 80px 0;
    }

    .footer-bottom {
        flex-direction: column;
        gap: 15px;
        text-align: center;
    }

}


@media (max-width: 480px) {

    .navbar-brand {
        font-size: 17px;
    }

    .brand-icon {
        width: 37px;
        height: 37px;
        font-size: 18px;
    }

    .hero-section {
        min-height: 650px;
    }

    .hero-content h1 {
        font-size: 42px;
    }

    .hero-content p {
        font-size: 14px;
    }

    .section-heading h2 {
        font-size: 34px;
    }

    .service-card {
        padding: 30px;
        min-height: auto;
    }

    .project-card,
    .project-large {
        height: 300px;
    }

    .project-overlay {
        left: 20px;
        right: 20px;
        bottom: 20px;
    }

    .project-overlay h3 {
        font-size: 18px;
    }

    .project-arrow {
        width: 40px;
        height: 40px;
    }

    .process-item {
        width: 100%;
    }

    .why-item {
        gap: 12px;
    }

    .why-icon {
        flex: 0 0 45px;
        width: 45px;
        height: 45px;
        font-size: 19px;
    }

    .why-image {
        height: 330px;
    }

    .footer {
        padding-top: 60px;
    }

    .floating-buttons {
        right: 12px;
        bottom: 12px;
    }

}


/* =========================================================
   ABOUT RESPONSIVE
========================================================= */

@media (max-width: 991px) {

    .about-intro-image {
        margin-bottom: 20px;
    }

    .about-cta-box {
        padding: 50px 40px;
    }

}


@media (max-width: 767px) {

    .breadcrumb-section {
        min-height: 450px;
    }

    .breadcrumb-section-content {
        padding: 50px 0;
    }

    .breadcrumb-section-content h1 {
        font-size: 43px;
    }

    .about-intro-image {
        padding-right: 30px;
        padding-bottom: 40px;
    }

    .about-intro-image > img {
        height: 400px;
    }

    .about-year-card {
        padding: 18px;
    }

    .about-year-card strong {
        font-size: 32px;
    }

    .about-check-list {
        grid-template-columns: 1fr;
    }

    .vision-card {
        padding: 28px;
    }

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

    .about-stat {
        border-right: 0;
        border-bottom: 1px solid rgba(255,255,255,.15);
    }

    .about-stat h3 {
        font-size: 36px;
    }

    .about-cta-box {
        padding: 40px 25px;
        flex-direction: column;
        align-items: flex-start;
    }

}


@media (max-width: 480px) {

    .breadcrumb-section-content h1 {
        font-size: 37px;
    }

    .breadcrumb-section-content p {
        font-size: 14px;
    }

    .about-intro-image > img {
        height: 340px;
    }

    .vision-card {
        flex-direction: column;
    }

    .value-card {
        min-height: auto;
    }

}

/* =========================================================
   PROJECT RESPONSIVE
========================================================= */

@media (max-width: 991px) {

    .portfolio-large {
        height: 450px;
    }

    .project-cta-box {
        padding: 50px 40px;
    }

}


@media (max-width: 767px) {

    .projects-page-banner {
        min-height: 450px;
    }

    .projects-banner-content h1 {
        font-size: 43px;
    }

    .project-intro-title {
        font-size: 38px;
    }

    .project-intro-text {
        margin-top: 20px;
    }

    .portfolio-card,
    .portfolio-large,
    .portfolio-medium {
        height: 360px;
    }

    .portfolio-overlay {
        left: 20px;
        right: 20px;
        bottom: 20px;
    }

    .portfolio-info h3 {
        font-size: 18px;
    }

    .project-stat {
        border-right: 0;
        border-bottom: 1px solid rgba(255,255,255,.15);
    }

    .project-stat h3 {
        font-size: 36px;
    }

    .project-cta-box {
        padding: 40px 25px;
        flex-direction: column;
        align-items: flex-start;
    }

}


@media (max-width: 480px) {

    .projects-banner-content h1 {
        font-size: 37px;
    }

    .project-filters {
        justify-content: flex-start;
    }

    .project-filter {
        padding: 9px 14px;
        font-size: 10px;
    }

    .portfolio-card,
    .portfolio-large,
    .portfolio-medium {
        height: 300px;
    }

}


/* =========================================================
   PROCESS RESPONSIVE
========================================================= */

@media (max-width: 991px) {

    .process-timeline {
        margin-top: 50px;
    }

    .process-step {
        grid-template-columns:
            70px 1fr;

        min-height: auto;

        margin-bottom: 35px;
    }

    .process-timeline::before {
        left: 35px;

        transform: none;
    }

    .process-step-number {
        left: 35px;
        top: 35px;

        transform: translate(-50%, 0);
    }

    .process-step-icon {
        grid-column: 1;

        width: 60px;
        height: 60px;

        margin: 35px auto;

        font-size: 22px;
    }

    .process-step-content,
    .process-step:not(.reverse-step) .process-step-content,
    .process-step.reverse-step .process-step-content {

        grid-column: 2;
        grid-row: auto;

    }

    .process-cta-box {
        padding: 50px 40px;
    }

}


@media (max-width: 767px) {

    .process-page-banner {
        min-height: 450px;
    }

    .process-banner-content h1 {
        font-size: 43px;
    }

    .process-intro-title {
        font-size: 38px;
    }

    .process-step {
        grid-template-columns: 55px 1fr;
    }

    .process-timeline::before {
        left: 27px;
    }

    .process-step-number {
        left: 27px;

        width: 45px;
        height: 45px;

        font-size: 12px;
    }

    .process-step-icon {
        width: 52px;
        height: 52px;

        font-size: 19px;
    }

    .process-step-content {
        padding: 25px;
    }

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

    .process-cta-box {
        padding: 40px 25px;

        flex-direction: column;

        align-items: flex-start;
    }

}


@media (max-width: 480px) {

 

    .process-step-content h3 {
        font-size: 21px;
    }

    .process-step-content ul {
        flex-direction: column;

        gap: 8px;
    }

    .benefit-card {
        min-height: auto;
    }

}


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

@media (max-width: 991px) {

    .contact-form-image {
        min-height: 500px;
    }

    .contact-form-wrapper {
        padding: 45px;
    }

    .contact-cta-box {
        padding: 50px 40px;
    }

}


@media (max-width: 767px) {

    .contact-intro-title {
        font-size: 38px;
    }

    .contact-info-card {
        padding: 28px;
    }

    .contact-form-image {
        min-height: 400px;
    }

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

    .contact-image-content {
        left: 25px;
        right: 25px;
        bottom: 25px;
    }

    .contact-image-content h3 {
        font-size: 28px;
    }

    .contact-map-section {
        height: 350px;
    }

    .contact-cta-box {
        padding: 40px 25px;

        flex-direction: column;

        align-items: flex-start;
    }

}


@media (max-width: 480px) {

    .contact-banner-content h1 {
        font-size: 37px;
    }

    .contact-info-card {
        flex-direction: column;
    }

    .contact-form-wrapper > h2 {
        font-size: 32px;
    }

    .contact-map-section {
        height: 300px;
    }

}

/* =========================================================
 AD  RESPONSIVE
========================================================= */

@media (max-width: 991px) {

    .ad-intro-image {
        height: 500px;
    }


    .ad-cta-box {
        padding: 50px 40px;
    }

}


@media (max-width: 767px) {

    .ad-page-banner {
        min-height: 450px;
    }

    .ad-banner-content h1 {
        font-size: 43px;
    }

    .ad-intro-image {
        height: 400px;
    }

    .ad-intro-title {
        font-size: 38px;
    }

    .ad-service-card {
        min-height: auto;
    }

    .ad-cta-box {
        padding: 40px 25px;

        flex-direction: column;

        align-items: flex-start;
    }

}


@media (max-width: 480px) {

    .ad-banner-content h1 {
        font-size: 37px;
    }

    .ad-image-badge {
        right: 15px;
        bottom: 15px;

        padding: 15px 18px;
    }

    .ad-image-badge strong {
        font-size: 32px;
    }

    .ad-service-card {
        padding: 28px;
    }

    .ad-detail-card {
        min-height: auto;

        padding: 28px;
    }

}


/* =========================================================
 RENOVATION  RESPONSIVE
========================================================= */

@media (max-width: 991px) {

    .rr-intro-image {
        height: 500px;
    }

    .rr-cta-box {
        padding: 50px 40px;
    }

}


@media (max-width: 767px) {

    .rr-banner-content h1 {
        font-size: 43px;
    }

    .rr-intro-image {
        height: 400px;
    }

    .rr-intro-title {
        font-size: 38px;
    }

    .rr-service-card {
        min-height: auto;
    }

    .rr-cta-box {
        padding: 40px 25px;

        flex-direction: column;

        align-items: flex-start;
    }

}


@media (max-width: 480px) {

    .rr-banner-content h1 {
        font-size: 37px;
    }

    .rr-image-label {
        right: 15px;
        bottom: 15px;

        padding: 15px 18px;
    }

    .rr-image-label strong {
        font-size: 21px;
    }

    .rr-service-card {
        padding: 28px;
    }

}

/* =========================================================
  INDUSTRIAL RESPONSIVE
========================================================= */

@media (max-width: 991px) {

    .ic-intro-image {
        height: 500px;
    }

    .ic-cta-box {
        padding: 50px 40px;
    }

}


@media (max-width: 767px) {

    .ic-page-banner {
        min-height: 450px;
    }

    .ic-banner-content h1 {
        font-size: 43px;
    }

    .ic-intro-image {
        height: 400px;
    }

    .ic-intro-title {
        font-size: 38px;
    }

    .ic-service-card {
        min-height: auto;
    }

    .ic-cta-box {
        padding: 40px 25px;

        flex-direction: column;

        align-items: flex-start;
    }

}


@media (max-width: 480px) {

    .ic-banner-content h1 {
        font-size: 37px;
    }

    .ic-image-badge {
        right: 15px;
        bottom: 15px;

        padding: 15px 18px;
    }

    .ic-image-badge strong {
        font-size: 30px;
    }

    .ic-service-card {
        padding: 28px;
    }

}


/* =========================================================
 COMMERCIAL  RESPONSIVE
========================================================= */

@media (max-width: 991px) {

    .cc-intro-image {
        height: 500px;
    }

    .cc-cta-box {
        padding: 50px 40px;
    }

}


@media (max-width: 767px) {

    .cc-intro-image {
        height: 400px;
    }

    .cc-intro-title {
        font-size: 38px;
    }

    .cc-service-card {
        min-height: auto;
    }

    .cc-cta-box {
        padding: 40px 25px;

        flex-direction: column;

        align-items: flex-start;
    }

}


@media (max-width: 480px) {

    .cc-banner-content h1 {
        font-size: 37px;
    }

    .cc-image-badge {
        right: 15px;
        bottom: 15px;

        padding: 15px 18px;
    }

    .cc-image-badge strong {
        font-size: 30px;
    }

    .cc-service-card {
        padding: 28px;
    }

}

/* =========================================================
 RESIDENTAL  RESPONSIVE
========================================================= */

@media (max-width: 991px) {

    .rc-intro-image {
        height: 500px;
    }

    .rc-cta-box {
        padding: 50px 40px;
    }

}


@media (max-width: 767px) {

    .rc-intro-image {
        height: 400px;
    }

    .rc-intro-title {
        font-size: 38px;
    }

    .rc-service-card {
        min-height: auto;
    }

    .rc-cta-box {
        padding: 40px 25px;

        flex-direction: column;

        align-items: flex-start;
    }

}


@media (max-width: 480px) {

    .rc-banner-content h1 {
        font-size: 37px;
    }

    .rc-image-badge {
        right: 15px;
        bottom: 15px;

        padding: 15px 18px;
    }

    .rc-image-badge strong {
        font-size: 30px;
    }

    .rc-service-card {
        padding: 28px;
    }

}