/* =========================================================
   UMER JAN & COMPANY
   FINAL RESPONSIVE CSS
   Load AFTER: assets/css/style.css
   ========================================================= */


/* =========================================================
   LARGE DESKTOP — 1400px
   ========================================================= */

@media (max-width: 1399.98px) {

    .hero-title {
        font-size: clamp(50px, 5vw, 62px);
    }

    .hero-heading {
        font-size: 27px;
    }

}


/* =========================================================
   DESKTOP — 1200px
   ========================================================= */

@media (max-width: 1199.98px) {

    .container {
        --bs-gutter-x: 2rem;
    }

    .hero-title {
        font-size: 54px;
        line-height: 1.18;
    }

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

    .hero-text {
        max-width: 620px;
        font-size: 16px;
        line-height: 1.8;
    }

    .section-title {
        font-size: 40px;
    }

    .service-card {
        padding: 32px 24px;
    }

    .project-card img {
        height: 280px;
    }

    .team-card img {
        height: 290px;
    }


    /* ---------- Company Marquee ---------- */

    .company-marquee {
        min-height: 48px;
    }

    .company-marquee-content {
        gap: 18px;
    }

    .company-marquee-content > span {
        font-size: 12px;
        letter-spacing: .8px;
    }

    .marquee-company {
        font-size: 14px !important;
    }

    .marquee-since {
        font-size: 10px !important;
    }


    /* ---------- Floating Buttons ---------- */

    .whatsapp-float {
        right: 25px;
        bottom: 90px;
    }

    .back-top {
        right: 25px;
        bottom: 25px;
    }

}


/* =========================================================
   TABLET / SMALL LAPTOP — 992px
   ========================================================= */

@media (max-width: 991.98px) {

    /* ---------- Top Bar ---------- */

    .top-bar {
        text-align: center;
        padding: 8px 0;
    }

    .top-bar .text-lg-end {
        text-align: center !important;
    }

    .top-bar span {
        display: inline-block;
        margin: 3px 8px;
    }


    /* ---------- Navbar ---------- */

    .navbar {
        padding: 10px 0;
    }

    .navbar-brand {
        min-width: 0;
        margin-right: 10px;
    }

    .navbar-toggler {
        padding: 7px 10px;
    }

    .navbar-collapse {
        margin-top: 12px;
        padding: 12px 16px 16px;
        background: #fff;
        border-radius: 12px;
        box-shadow: 0 14px 35px rgba(0, 0, 0, .09);
    }

    .navbar-nav {
        width: 100%;
    }

    .nav-item {
        width: 100%;
    }

    .nav-link {
        display: block;
        margin-left: 0 !important;
        padding: 11px 6px !important;
        border-bottom: 1px solid rgba(0, 0, 0, .07);
    }

    .nav-item:last-child .nav-link {
        border-bottom: 0;
    }

    .navbar-collapse > .btn {
        display: flex;
        width: 100%;
        margin: 12px 0 0 !important;
    }


    /* ---------- Company Marquee ---------- */

    .company-marquee {
        min-height: 48px;
    }

    .company-marquee-content {
        gap: 14px;
        animation-duration: 26s;
    }

    .company-marquee-content > span {
        font-size: 11px;
        letter-spacing: .7px;
    }

    .marquee-company {
        font-size: 13px !important;
    }

    .marquee-since {
        font-size: 10px !important;
        padding: 3px 10px;
    }

    .marquee-arrow {
        font-size: 18px !important;
    }

    .marquee-dot {
        font-size: 14px !important;
    }


    /* ---------- Hero ---------- */

    .hero {
        min-height: auto;
        padding: 95px 0 85px;
        background-attachment: scroll;
    }

    .hero-title {
        font-size: 48px;
        line-height: 1.2;
    }

    .hero-heading {
        font-size: 23px;
        line-height: 1.45;
    }

    .hero-text {
        margin-left: auto;
        margin-right: auto;
    }

    .hero-buttons {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        gap: 14px;
    }

    .hero-buttons .btn {
        margin: 0 !important;
    }

    .hero-founder-img {
        display: block;
        width: 100%;
        max-width: 430px;
        max-height: 470px;
        margin: 45px auto 0;
        object-fit: cover;
    }


    /* ---------- About ---------- */

    .about img {
        display: block;
        width: 100%;
        max-width: 650px;
        margin-left: auto;
        margin-right: auto;
    }


    /* ---------- Counter ---------- */

    .counter .col-lg-3 {
        margin-bottom: 25px;
    }


    /* ---------- Services ---------- */

    .service-card {
        height: auto;
        margin-bottom: 25px;
    }


    /* ---------- Projects ---------- */

    .project-card {
        margin-bottom: 25px;
        overflow: hidden;
    }

    .project-card img {
        width: 100%;
        height: 300px;
        object-fit: cover;
    }


    /* ---------- Team ---------- */

    .team-card {
        margin-bottom: 25px;
        overflow: hidden;
    }

    .team-card img {
        width: 100%;
        height: 310px;
        object-fit: cover;
    }


    /* ---------- Testimonials ---------- */

    .testimonial-card {
        height: auto;
        margin-bottom: 25px;
    }


    /* ---------- Leadership ---------- */

    .ceo-section img,
    .md-section img,
    .MANAGING-DIRECTOR-section img {
        max-width: 100%;
    }


    /* ---------- Contact ---------- */

    .contact-info {
        margin-bottom: 40px;
    }

    #contactForm .btn {
        min-height: 50px;
    }


    /* ---------- Map ---------- */

    .map iframe {
        display: block;
        width: 100%;
        min-height: 340px;
    }


    /* ---------- Floating Buttons ---------- */

    .whatsapp-float {
        right: 22px;
        bottom: 88px;
    }

    .back-top {
        right: 22px;
        bottom: 22px;
    }

}


/* =========================================================
   TABLET — 768px
   ========================================================= */

@media (max-width: 767.98px) {

    .container {
        --bs-gutter-x: 1.5rem;
    }

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

    .section-title {
        font-size: clamp(28px, 7vw, 36px);
        line-height: 1.25;
    }

    .section-subtitle {
        font-size: 13px;
        letter-spacing: 2px;
    }

    .section-description {
        font-size: 15px;
        line-height: 1.75;
    }


    /* ---------- Top Bar ---------- */

    .top-bar {
        font-size: 12px;
    }

    .top-bar span {
        display: block;
        margin: 4px 0;
    }


    /* ---------- Navbar ---------- */

    .logo {
        width: 48px;
        height: 48px;
    }

    .company-name {
        font-size: 18px;
    }

    .navbar-brand small {
        font-size: 10px;
    }


    /* ---------- Company Marquee ---------- */

    .company-marquee {
        min-height: 46px;
        height: 46px;
    }

    .company-marquee-content {
        gap: 13px;
        animation-duration: 22s;
    }

    .company-marquee-content > span {
        font-size: 10px;
        letter-spacing: .55px;
    }

    .marquee-company {
        font-size: 12px !important;
        letter-spacing: 1px !important;
    }

    .marquee-since {
        font-size: 9px !important;
        padding: 3px 9px;
    }

    .marquee-separator,
    .marquee-dot {
        font-size: 13px !important;
        margin: 0 1px;
    }

    .marquee-arrow {
        font-size: 16px !important;
    }


    /* ---------- Hero ---------- */

    .hero {
        padding: 85px 0 70px;
        text-align: center;
    }

    .hero-title {
        font-size: clamp(36px, 8vw, 46px);
        line-height: 1.22;
    }

    .hero-heading {
        font-size: 21px;
    }

    .hero-subtitle {
        font-size: 13px;
        letter-spacing: 2px;
    }

    .hero-text {
        max-width: 650px;
        margin-left: auto;
        margin-right: auto;
        font-size: 15px;
        line-height: 1.8;
    }

    .hero-buttons {
        flex-direction: column;
        width: 100%;
    }

    .hero-buttons .btn {
        width: min(280px, 100%);
    }

    .hero-founder-img {
        max-height: 420px;
        margin-top: 38px;
    }


    /* ---------- Leadership ---------- */

    .ceo-section,
    .md-section,
    .MANAGING-DIRECTOR-section {
        text-align: center;
    }

    .ceo-section img,
    .md-section img,
    .MANAGING-DIRECTOR-section img {
        display: block;
        width: 100%;
        max-width: 500px;
        margin: 0 auto 30px;
    }


    /* ---------- About ---------- */

    .about {
        text-align: center;
    }

    .about .row.mt-4 {
        text-align: left;
    }

    .about h5 {
        font-size: 15px;
        line-height: 1.5;
    }


    /* ---------- Counter ---------- */

    .counter {
        padding: 60px 0 35px;
    }

    .counter h2 {
        font-size: 40px;
    }

    .counter p {
        font-size: 15px;
    }


    /* ---------- Services ---------- */

    .service-card {
        padding: 30px 22px;
    }

    .service-icon,
    .services .service-icon {
        width: 78px;
        height: 78px;
    }


    /* ---------- Projects ---------- */

    .project-card img {
        height: 270px;
    }

    .project-overlay {
        padding: 22px;
    }


    /* ---------- Team ---------- */

    .team-card img {
        height: 290px;
    }

    .team-content {
        padding: 22px;
    }


    /* ---------- Testimonials ---------- */

    .testimonial-card {
        padding: 26px 22px;
    }


    /* ---------- Client Logos ---------- */

    .client-box {
        min-height: 115px;
    }

    .client-box img {
        max-width: 140px;
        max-height: 65px;
        object-fit: contain;
    }


    /* ---------- Contact ---------- */

    .contact-info {
        text-align: left;
    }

    #contactForm {
        padding: 26px 22px;
    }

    #contactForm .form-control {
        min-height: 50px;
    }

    #contactForm textarea.form-control {
        min-height: 130px;
    }


    /* ---------- Footer ---------- */

    .footer {
        text-align: center;
    }

    .footer .text-lg-end {
        text-align: center !important;
    }

    .footer-social {
        justify-content: center;
    }


    /* ---------- Floating Buttons ---------- */

    .whatsapp-float {
        width: 45px;
        height: 45px;
        right: 18px;
        bottom: 78px;
        font-size: 20px;
    }

    .back-top {
        width: 45px;
        height: 45px;
        right: 18px;
        bottom: 18px;
        font-size: 18px;
    }

}


/* =========================================================
   MOBILE — 576px
   ========================================================= */

@media (max-width: 575.98px) {

    html {
        scroll-padding-top: 76px;
    }

    .container {
        --bs-gutter-x: 1.25rem;
    }

    .section-padding {
        padding-top: 60px;
        padding-bottom: 60px;
    }

    .section-title {
        font-size: clamp(26px, 7vw, 32px);
    }


    /* ---------- Navbar ---------- */

    .navbar {
        padding: 8px 0;
    }

    .logo {
        width: 44px;
        height: 44px;
    }

    .company-name {
        font-size: 16px;
    }

    .navbar-brand small {
        font-size: 9px;
    }

    .navbar-toggler {
        padding: 6px 8px;
    }

    .navbar-collapse {
        padding: 10px 14px 14px;
    }


    /* ---------- Company Marquee ---------- */

    .company-marquee {
        min-height: 42px;
        height: 42px;
    }

    .company-marquee-content {
        gap: 10px;
        animation-duration: 18s;
    }

    .company-marquee-content > span {
        font-size: 9px;
        letter-spacing: .4px;
    }

    .marquee-company {
        font-size: 11px !important;
        letter-spacing: .8px !important;
    }

    .marquee-since {
        font-size: 8px !important;
        padding: 2px 7px;
    }

    .marquee-separator,
    .marquee-dot {
        font-size: 11px !important;
        margin: 0 1px;
    }

    .marquee-arrow {
        font-size: 14px !important;
    }


    /* ---------- Hero ---------- */

    .hero {
        padding: 75px 0 60px;
    }

    .hero-title {
        font-size: clamp(32px, 9vw, 40px);
    }

    .hero-heading {
        font-size: 19px;
        line-height: 1.45;
    }

    .hero-subtitle {
        font-size: 11px;
        letter-spacing: 1.7px;
    }

    .hero-text {
        font-size: 14px;
        line-height: 1.75;
    }

    .hero-buttons {
        margin-top: 30px !important;
    }

    .hero-buttons .btn {
        width: 100%;
        max-width: 285px;
    }

    .hero-founder-img {
        max-height: 340px;
        margin-top: 32px;
    }


    /* ---------- About ---------- */

    .about h5 {
        font-size: 14px;
    }


    /* ---------- Counter ---------- */

    .counter {
        padding-top: 50px;
        padding-bottom: 25px;
    }

    .counter h2 {
        font-size: 34px;
    }

    .counter p {
        font-size: 14px;
    }


    /* ---------- Services ---------- */

    .service-card {
        padding: 26px 18px;
    }

    .service-card h4 {
        font-size: 20px;
    }

    .service-icon,
    .services .service-icon {
        width: 70px;
        height: 70px;
        font-size: 30px;
    }


    /* ---------- Projects ---------- */

    .project-card img {
        height: 220px;
    }

    .project-overlay {
        padding: 18px;
    }

    .project-overlay h4 {
        font-size: 19px;
    }

    .project-overlay p {
        font-size: 14px;
    }


    /* ---------- Team ---------- */

    .team-card img {
        height: 250px;
    }

    .team-content {
        padding: 19px;
    }

    .team-social a {
        width: 38px;
        height: 38px;
    }


    /* ---------- Testimonials ---------- */

    .testimonial-card {
        padding: 22px 18px;
    }

    .client-info {
        gap: 12px;
    }

    .client-info img {
        width: 56px;
        height: 56px;
    }


    /* ---------- Client Logos ---------- */

    .client-box {
        min-height: 105px;
    }

    .client-box img {
        max-width: 115px;
        max-height: 58px;
    }


    /* ---------- Contact ---------- */

    #contactForm {
        padding: 20px 16px;
    }

    #contactForm .form-control {
        font-size: 15px;
        padding: 12px 13px;
    }

    #contactForm textarea.form-control {
        min-height: 120px;
    }

    #contactForm .btn {
        width: 100%;
    }


    /* ---------- Map ---------- */

    .map iframe {
        min-height: 270px;
        height: 270px;
    }


    /* ---------- Footer ---------- */

    .footer {
        padding-top: 50px;
        padding-bottom: 20px;
    }


    /* ---------- Floating Buttons ---------- */

    .whatsapp-float {
        width: 44px;
        height: 44px;
        right: 16px;
        bottom: 72px;
        font-size: 19px;
    }

    .back-top {
        width: 44px;
        height: 44px;
        right: 16px;
        bottom: 16px;
        font-size: 17px;
    }

}


/* =========================================================
   SMALL MOBILE — 400px
   ========================================================= */

@media (max-width: 400px) {

    .container {
        --bs-gutter-x: 1rem;
    }

    .company-name {
        font-size: 14px;
    }

    .navbar-brand small {
        display: none;
    }

    .navbar-toggler {
        padding: 5px 7px;
    }


    /* ---------- Company Marquee ---------- */

    .company-marquee {
        min-height: 38px;
        height: 38px;
    }

    .company-marquee-content {
        gap: 8px;
        animation-duration: 15s;
    }

    .company-marquee-content > span {
        font-size: 8px;
        letter-spacing: .25px;
    }

    .marquee-company {
        font-size: 9px !important;
        letter-spacing: .6px !important;
    }

    .marquee-since {
        font-size: 7px !important;
        padding: 2px 5px;
    }

    .marquee-separator,
    .marquee-dot {
        font-size: 10px !important;
    }

    .marquee-arrow {
        font-size: 12px !important;
    }


    /* ---------- Hero ---------- */

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

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

    .hero-heading {
        font-size: 17px;
    }

    .hero-text {
        font-size: 13px;
    }

    .hero-founder-img {
        max-height: 290px;
    }

    .section-title {
        font-size: 25px;
    }

    .section-subtitle {
        font-size: 11px;
        letter-spacing: 1.5px;
    }

    .counter h2 {
        font-size: 30px;
    }

    .project-card img {
        height: 195px;
    }

    .team-card img {
        height: 215px;
    }

    .map iframe {
        min-height: 240px;
        height: 240px;
    }


    /* ---------- Floating Buttons ---------- */

    .whatsapp-float {
        width: 42px;
        height: 42px;
        right: 14px;
        bottom: 68px;
        font-size: 18px;
    }

    .back-top {
        width: 42px;
        height: 42px;
        right: 14px;
        bottom: 14px;
        font-size: 16px;
    }

}


/* =========================================================
   TOUCH DEVICES
   ========================================================= */

@media (hover: none) and (pointer: coarse) {

    .hero {
        background-attachment: scroll;
    }

    .service-card:hover,
    .project-card:hover,
    .team-card:hover,
    .testimonial-card:hover {
        transform: none;
    }

    .project-card img:hover,
    .team-card img:hover,
    .about img:hover {
        transform: none;
    }

    .project-overlay {
        opacity: 1;

        background:
            linear-gradient(
                to top,
                rgba(11, 61, 145, .94),
                rgba(11, 61, 145, .12)
            );
    }

    /* Keep company marquee moving on touch devices */
    .company-marquee-content {
        animation-play-state: running;
    }

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }

    .hero {
        background-attachment: scroll;
    }

    .company-marquee-content {
        animation: none !important;
        transform: translateX(0) !important;
    }

}


/* =========================================================
   PRINT
   ========================================================= */

@media print {

    .top-bar,
    .navbar,
    .company-marquee,
    .hero-buttons,
    .back-top,
    .whatsapp-float,
    .loader-wrapper,
    .footer-social {
        display: none !important;
    }

    body {
        overflow: visible;
        color: #000;
        background: #fff;
    }

    .hero {
        min-height: auto !important;
        padding: 30px 0 !important;
        background: none !important;
    }

    .hero-title,
    .hero-heading,
    .hero-text {
        color: #000 !important;
    }

}


/* =========================================================
   END OF RESPONSIVE CSS
   ========================================================= */