/*==================================================
 Metal Craft Website
 Master Responsive Stylesheet
==================================================*/

/* Global Overflow & Element Safety */
html {
    width: 100%;
    overflow-x: hidden;
}

body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

section {
    position: relative;
}

.row {
    margin-left: -0.75rem;
    margin-right: -0.75rem;
}

img, iframe, svg, video {
    max-width: 100%;
    height: auto;
}

/* ==================================================
   1. Large Devices & Laptops (≤1200px)
   ================================================== */
@media (max-width: 1200px) {
    .container {
        max-width: 960px;
    }

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

    .nav-link {
        margin: 0 6px;
        font-size: 14px;
    }
}

/* ==================================================
   2. Tablets & Small Laptops (≤991px)
   ================================================== */
@media (max-width: 991px) {
    .container {
        max-width: 720px;
        padding-left: 20px;
        padding-right: 20px;
    }

    .service-detail-box {
        padding: 0 !important;
    }

    .service-help-widget {
        display: none !important;
    }

    /* Footer Mobile Alignment (Centered for mobile & tablet screens) */
    .footer {
        text-align: center !important;
    }

    .footer p,
    .footer-logo p,
    .footer div p {
        text-align: center !important;
        text-align-last: center !important;
    }

    .footer h5,
    .footer li,
    .footer li a {
        text-align: center !important;
    }

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

    .footer-logo img {
        display: block !important;
        margin: 0 auto 20px auto !important;
    }

    .footer-social {
        display: flex !important;
        justify-content: center !important;
        margin-top: 25px !important;
    }

    .copyright {
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 8px !important;
        text-align: center !important;
    }

    .credit {
        text-align: center !important;
    }

    section {
        padding: 60px 0;
    }

    /* Topbar Responsive */
    .top-bar {
        padding: 5px 0;
        font-size: 12px;
    }

    .top-bar-badge {
        padding: 0px 10px;
        font-size: 11px;
    }

    /* Navbar Responsive */
    .navbar {
        background: #ffffff;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
        padding: 10px 0;
    }

    .navbar-brand img {
        height: 54px;
    }

    .navbar-collapse {
        background: #ffffff;
        margin-top: 10px;
        border-radius: 12px;
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
        padding: 15px;
        max-height: 80vh;
        overflow-y: auto;
    }

    .navbar-nav {
        display: flex;
        flex-direction: column;
        gap: 4px;
    }

    .nav-link {
        color: #12344D;
        margin: 4px 0;
        padding: 10px 15px !important;
        display: block;
        border-radius: 6px;
    }

    .nav-link:hover, .nav-link.active {
        background: rgba(25, 168, 232, 0.08);
        color: #014171 !important;
    }

    .dropdown-menu {
        border: none;
        box-shadow: none;
        padding-left: 15px;
        background: transparent;
        position: static;
        display: none;
    }

    .dropdown-menu.show {
        display: block !important;
    }

    /* Hero Slider Section */
    .hero-slider-section {
        text-align: center;
    }

    .hero-slide {
        min-height: auto;
    }

    .hero-slide .container {
        padding-top: 145px;
        padding-bottom: 50px;
    }

    .hero-slide-content {
        max-width: 100%;
        margin: 0 auto;
    }

    .hero-slide-content h1 {
        font-size: 34px;
        line-height: 1.25;
    }

    .hero-slide-content p {
        text-align: center;
        margin: 0 auto 25px auto;
        font-size: 15px;
    }

    .hero-btns {
        justify-content: center;
        flex-wrap: wrap;
        gap: 12px;
    }

    .main-hero-nav {
        width: 44px;
        height: 44px;
        font-size: 18px;
    }

    .main-hero-prev {
        left: 10px;
    }

    .main-hero-next {
        right: 10px;
    }

    .hero-slide-card {
        width: 260px;
        height: 260px;
        margin: 25px auto 0 auto;
    }

    /* About Section */
    .section-heading {
        font-size: 34px;
    }

    .abt-img {
        margin-bottom: 30px;
        border-left: none;
        border-bottom: none;
    }

    .experience-box {
        position: relative;
        bottom: 0;
        right: 0;
        margin: -36px -7px 0 auto;
        width: 100%;
        max-width: 114px;
    }
   



    /* Grid Items */
    .choose-card, .service-card, .product-card, .process-card, .industry-card {
        margin-bottom: 25px;
    }

    .counter-section p {
        text-align: center;
    }

    .footer-logo {
        text-align: center;
    }

    .footer-logo img {
        display: block;
        margin: 0 auto 20px auto;
    }

    /* CTA Section Tablet */
    .cta-box {
        flex-direction: column;
        text-align: center;
        padding: 35px 25px;
        gap: 20px;
    }

    .cta-box h2 {
        font-size: 30px;
        line-height: 1.3;
        margin-bottom: 10px;
    }

    .cta-box p {
        font-size: 15px;
        text-align: center !important;
    }

    .cta-btns {
        width: 100%;
        justify-content: center;
        margin-top: 5px !important;
    }

    .cta-btns .btn {
        padding: 12px 28px !important;
    }
}

/* ==================================================
   3. Small Tablets & Phablets (≤768px)
   ================================================== */
@media (max-width: 768px) {
    .container {
        max-width: 540px;
    }

    section {
        padding: 50px 0;
    }

    h1 {
        font-size: 36px;
    }

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

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

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

    .hero-slide-card {
        width: 230px;
        height: 230px;
    }

    .btn {
        padding: 11px 22px;
        font-size: 14px;
    }

    /* Statistics / Counter */
    .counter-box {
        margin-bottom: 25px;
    }

    .counter-box h2 {
        font-size: 36px;
    }

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

    /* CTA Section Mobile */
    .cta-box {
        padding: 28px 20px;
        border-radius: 18px;
    }

    .cta-box h2 {
        font-size: 24px;
    }

    .cta-box p {
        font-size: 14px;
    }

    .cta-btns {
        width: 100%;
    }

    .cta-btns .btn {
        width: 100%;
        text-align: center;
        justify-content: center;
    }
}

/* ==================================================
   4. Mobile Portrait (≤576px)
   ================================================== */
@media (max-width: 576px) {
    .container {
        padding-left: 15px;
        padding-right: 15px;
    }

    .navbar-brand img {
        height: 44px;
    }

    .hero-slide .container {
        padding-top: 95px;
        padding-bottom: 45px;
    }

    .hero-slide-content .hero-tag {
        font-size: 13px;
        padding: 6px 14px;
        margin-bottom: 15px;
    }

    .hero-slide-content h1 {
        font-size: 24px;
        margin-bottom: 14px;
    }

    .hero-slide-content p {
        font-size: 13.5px;
        line-height: 1.55;
        margin-bottom: 20px;
    }

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

    .hero-btns .btn {
        width: 100%;
        text-align: center;
    }

    .hero-slide-card {
        width: 200px;
        height: 200px;
        margin-top: 20px;
    }

    .main-hero-nav {
        width: 36px;
        height: 36px;
        font-size: 16px;
    }

    .main-hero-prev {
        left: 5px;
    }

    .main-hero-next {
        right: 5px;
    }

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

    .section-text {
        font-size: 14px;
        
    }

    .gallery-filter {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 6px;
    }

    .gallery-filter button {
        padding: 6px 12px;
        font-size: 12px;
    }

    .certificate-card {
        padding: 22px 16px;
    }

    .certificate-card h4 {
        font-size: 15px;
    }

    .certificate-card p {
        font-size: 13px;
    }

    /* CTA Small Mobile */
    .cta-box {
        padding: 24px 18px;
        border-radius: 16px;
    }

    .cta-box h2 {
        font-size: 21px;
    }

    .cta-box p {
        font-size: 13.5px;
        line-height: 1.55;
    }

@media (max-width: 576px) {
    .top-bar-left, .top-bar-right {
        justify-content: center;
        width: 100%;
    }
    .top-bar-divider {
        display: none;
    }
    .top-bar-left {
        gap: 12px !important;
    }

      .experience-box{
        display: none;
      }
      

}

/* ==================================================
   5. Extra Small Mobile Devices (≤400px)
   ================================================== */
@media (max-width: 400px) {
    .hero-slide-content h1 {
        font-size: 21px;
    }

    .hero-slide-card {
        width: 170px;
        height: 170px;
    }

    .btn {
        font-size: 13px;
        padding: 10px 18px;
    }

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

    .cta-box {
        padding: 20px 14px;
        border-radius: 14px;
    }

    .cta-box h2 {
        font-size: 18px;
    }

    .cta-box p {
        font-size: 12.5px;
    }
}