@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    list-style: none;
    text-decoration: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Bebas Neue', cursive !important;
}

a {
    text-decoration: none;
}

a:hover {
    text-decoration: none !important;
}

::-webkit-scrollbar {
    width: 7px;
}

::-webkit-scrollbar-thumb {
    background: #888;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
}

body {
    overflow-x: hidden;
    font-family: 'Roboto', sans-serif !important;
}

.row {
    margin: 0 !important;
}

.logo {
    width: 200px;
}

nav {
     font-family: 'Montserrat', cursive !important;
    background: rgba(255, 255, 255, 0.8); /* white transparent */
    backdrop-filter: blur(10px);         /* glass effect */
    -webkit-backdrop-filter: blur(10px);
    height: 85px;
    border-radius: 20px;                 /* round edges */
    margin: 15px 40px;                   /* screen se gap */
    padding: 0 20px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.08);
}

.navbar-toggler-icon {
    background-color: #fff;
}

.nav-link {
    color: #000 !important;     /* BLACK */
    font-size: 20px;
    font-weight: bold;
    transition: all 0.3s ease;  /* animation smooth banane ke liye */
}

.nav-link:hover {
    color: #fcd600 !important;  /* Yellow on hover */
    transform: translateY(-3px); /* Thoda upar move */
}

.navbar-nav .nav-item {
    margin-left: 30px;   /* gap between menu items */
}

.btn {
    margin: 0 20px;
    width: 180px;
    height: 33px;
    border: none;
    outline: none;
    border-radius: 8px;
    padding: 4px 25px;
    background-color: #fcd600 !important;
    color: #fff !important;
    cursor: pointer;
    font-size: 19px;
    text-transform: uppercase;
    font-family: 'Bebas Neue', cursive !important;
}

.home {
    height: 100vh;
    margin-top: 80px;
    padding-top: 80px;
}

.header-img {
    margin-top: 15px;
    height: 75vh;
    width: 100%;
    min-width: 100%;
}


.head-title {
    align-self: center;
    line-height: 1;
    text-align: left;          /* text left align */
    padding-left: 0px;        /* yaha se left/right adjust hoga */
}

.head-title h1 {
    position: relative;
    font-weight: 900;
    font-size: 2em;
    color: #fcd600;
    padding-top: 100px;
    margin-top: 70px;
}

.head-title h5 {
    color: #fcd600;          /* yaha color change hoga */
    font-size: 23px;      /* size control */
    margin-top: 10px;
    font-family: 'Poppins', sans-serif;
    letter-spacing: 1px;
}

.head-title .static-text {
    color: #fcd600;
    font-size: 60px;
    font-weight: 400;
}

.head-title .dynamic-text {
    height: 60px;
    overflow: hidden;
    margin-bottom: 0;
}

.head-title .drop {
    padding-top: 50px;
}

.drop-img {
    float: right;
}

.drop1 {
    top: 0;
    width: 4rem;
    margin-right: 10px;
    animation-duration: 2s;
    animation-name: fadeInUp;
    animation: bouncedown 2s;
}

@keyframes bouncedown {
    0% {
        opacity: 0;
        transform: translateY(-1000px);
    }
    60% {
        opacity: 1;
        transform: translateY(30px);
    }
    80% {
        transform: translateY(-10px);
    }
    100% {
        transform: translateY(0);
    }
}

.drop2 {
    padding-top: 30px;
    width: 5rem;
    animation-duration: 6s;
    animation-name: fadeInUp;
    animation: bouncedown 6s;
}

.drop3 {
    padding-top: 90px;
    width: 5rem;
    animation-duration: 4s;
    animation-name: fadeInUp;
    animation: bouncedown 4s;
}

.about-section {
    background: url(images/14.png);
    background-repeat: no-repeat;
    background-size: cover;
    color: #000000;
    text-align: center;
}

.drops-img {
    float: left;
}

.drops1 {
    width: 25%;
    margin-left: 100px;
    animation-duration: 2s;
    animation-name: fadeInUp;
    animation: bouncedown 2.7s;
}

.drops2 {
    width: 50%;
    margin-left: 10px;
    animation-duration: 6s;
    animation-name: fadeInUp;
    animation: bouncedown 6s;
}

.drops3 {
    margin-left: 60px;
    width: 40%;
    animation-duration: 4s;
    animation-name: fadeInUp;
    animation: bouncedown 4s;
}

.about-section h1 {
    padding-top: 100px;
    text-align: center;
    justify-content: center;
    padding-bottom: 20px;
}

.about-section p {
    font-size: 18px;
}

.sub-content .para-content:hover {
    text-decoration: none !important;
}

.contact-section {
    background: url(images/12.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    padding-top: 6.5rem;
    color: #000000;
    font-family: 'Roboto', sans-serif !important;
    font-size: 18px;
    max-width: 100%;
}

.product-section {
    margin-top: 180px;
}

.product-section h1 {
    color: #fcd600;
    text-align: center;
    font-size: 35px;
}

.product-row {
    text-align: center;
}

.about {
    margin-top: 120px;
}

.about h1 {
    color: #fcd600;
    text-align: center;
    font-size: 35px;
}

.about p {
    font-size: 17px;
    font-family: 'Roboto', sans-serif !important;
}


@media only screen and (max-width: 600px) {
    .navbar {
        height: auto;
        background: #fff;
    }
}

@media only screen and (max-width: 768px) {
    .navbar {
        height: auto;
        background: #fff;
    }
}

.slider {
    position: relative;
    height: 75vh;
    width: 100%;
    overflow: hidden;
    
}


.slideImg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    opacity: 0;
    z-index: 0;                 /* 🔥 IMPORTANT */
    transition: opacity 2s ease-in-out; /* smooth fade */
    
}

/* visible image */
.slideImg.show {
    opacity: 1;
    z-index: 1;                 /* 🔥 ONLY FIRST IMAGE VISIBLE */
}


/* FORCE DESKTOP LAYOUT ON MOBILE */
@media (max-width: 768px) {

    .home {
        height: 100vh;
        padding-top: 80px;
    }

    .slider {
        height: 75vh;
    }

    .slideImg {
        height: 100%;
        object-fit: contain;
    }

    .head-title {
        text-align: left;
        padding-left: 40px;
    }

    .dynamic-text li {
        font-size: 28px;
        line-height: 36px;
    }

    .head-title h5 {
        font-size: 16px;
    }
}

/* MOBILE NAVBAR FIX */
@media (max-width: 768px) {

    nav {
        height: 60px;              /* mota nahi lagega */
        margin: 10px 15px;         /* side se kam gap */
        border-radius: 12px;       /* thoda round */
        padding: 0 15px;
    }

    .logo {
        width: 90px;               /* logo thoda chhota */
    }
}

@media (max-width: 768px) {

    .navbar-nav {
        flex-direction: row;   /* vertical nahi, horizontal */
        margin-right: 0;
    }

    .navbar-nav .nav-item {
        margin-left: 15px;     /* gap kam */
    }

    .nav-link {
        font-size: 16px;       /* text chhota */
    }
}

/* ===== MOBILE HERO + NAVBAR EXACT FIX ===== */
@media (max-width: 768px) {

    /* Navbar ko slim & image ke paas lao */
    nav {
        height: 55px;
        margin: 6px 10px;
        padding: 0 12px;
        border-radius: 12px;
    }

    .logo {
        width: 140px;
    }

    /* HOME section ka extra gap hatao */
    .home {
        margin-top: 10px !important;
        padding-top: 10px !important;
        height: auto;
    }

    /* Slider ko bilkul upar lao */
    .slider {
        height: 70vh;
        margin-top: 25px;   /* 🔥 KEY LINE */
    }

    /* Hero image ka size bada karo */
    .slideImg {
        width: 50%;
        height: 90%;
        object-fit: contain;
    }

    /* Text ko image ke paas lao */
    .head-title {
        padding-left: 20px;
        margin-top: -85px;  /* 🔥 text upar */
    }

    /* Main hero lines */
    .dynamic-text {
        height: 70px;
        margin-bottom: 5px;
    }

    .dynamic-text li {
        font-size: 24px;
        line-height: 32px;
    }

    /* Since / experience line */
    .head-title h5 {
        margin-top: 4px;
        font-size: 15px;
    }
}

/* ===== FORCE GLASS NAVBAR ON MOBILE ===== */
@media (max-width: 768px) {

    nav {
        background: rgba(255, 255, 255, 0.75) !important; /* white transparent */
        backdrop-filter: blur(12px) !important;
        -webkit-backdrop-filter: blur(12px) !important;

        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
        border-radius: 14px;

        height: 55px;
        margin: 6px 10px;
        padding: 0 12px;
    }
}


/* ===== MOBILE: MOVE EVERYTHING AFTER HERO UP (CSS ONLY) ===== */
@media (max-width: 768px) {

    /* Hero untouched */

    .about-section {
        margin-top: -90px;   /* 🔥 FLOW SHIFT */
    }

}

/* ===== MOBILE: FIX 03_drop_3 IMAGE OVERLAP ===== */
@media (max-width: 768px) {

    .drops1 {
        margin-top: 50px;   /* 🔥 niche lao */
    }

}

/* ===== NEW PRODUCT SECTION ===== */

.new-products {
    padding: 80px 0;
    background: #ffffff;
}

.section-title {
    text-align: center;
    font-size: 36px;
    color: #fcd600;
    margin-bottom: 50px;
    font-family: 'Montserrat', sans-serif;
}

/* GRID */
.product-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
}

/* CARD */
.product-card {
    background: #ffffff;
    border-radius: 18px;
    padding: 20px;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    transition: transform 0.3s ease;
}

.product-card:hover {
    transform: translateY(-6px);
}

.product-card img {
    width: 100%;
    border-radius: 14px;
    margin-bottom: 20px;
}

.product-card h3 {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 18px;
    color: #222;
    font-family: 'Montserrat', sans-serif !important; /* 🔥 SAME AS SCREENSHOT */
    letter-spacing: 0.3px;
    line-height: 1.3;
}

/* BUTTON */
.product-btn {
    display: inline-block;
    padding: 12px 28px;
    background: #fcd600;
    color: #fff;
    border-radius: 10px;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.3s ease;
}

.product-btn:hover {
    background: #000000;
}

.product-btn,
.product-btn:hover,
.product-btn:focus,
.product-btn:active,
.product-btn:visited {
    color: #ffffff !important;
    text-decoration: none !important;
}

/* ===== MOBILE VIEW ===== */
@media (max-width: 768px) {

    .product-grid {
        grid-template-columns: 1fr; /* 🔥 one card per row */
    }

    .product-card {
        padding: 24px;
    }

    .product-card h3 {
        font-size: 22px;
    }

    .product-btn {
        width: 100%;
    }
}

/* ===== HERO TEXT SAME AS NAVBAR ===== */

.hero-text {
    margin-top: 0;   /* koi gap force nahi */
}

/* EXACT navbar font + size */
.nav-like {
    font-family: 'Montserrat', sans-serif;
    font-size: 20px;        /* navbar jaisa */
    font-weight: bold;
    letter-spacing: normal;
}

.nav-like.yellow {
    color: #fcd600;
}

.nav-like.black {
    color: #000;
}

/* responsive line control */
.mobile-only {
    display: none;
}

@media (max-width: 768px) {
    .desktop-only {
        display: none;
    }
    .mobile-only {
        display: inline;
    }
}

/* ===== DESKTOP: MAKE TEXT VISUALLY BOLDER (SAME SIZE) ===== */
@media (min-width: 769px) {
    .hero-text .nav-like {
        /* 🔧 TEXT HEIGHT */
        line-height: 1.7;        /* 1.2 tight | 1.4 loose */

        /* 🔧 TEXT WEIGHT */
        font-weight: 700;        /* 600 / 700 */

        /* 🔧 LETTER SPACING */
        letter-spacing: 0.5px;  /* 0 normal | 0.5 wide */
        text-shadow: 0.7px 0 0 currentColor;
    }
}

/* ===== DESKTOP: MOVE HERO TEXT DOWN ===== */
@media (min-width: 769px) {
    .hero-text {
        margin-top: 210px;   /* 🔧 yaha value badha/ghata ke adjust kar */
    }
}

/* ===== DESKTOP: MOVE DROP IMAGES DOWN ===== */
@media (min-width: 769px) {
    .head-title .drop {
        margin-top: 30px;   /* 🔧 adjust freely */
    }
}

/* ===== MOBILE: HERO TEXT MANUAL CONTROL ===== */
@media (max-width: 768px) {
    .hero-text .nav-like {

        /* 🔧 LINE HEIGHT (lines ke beech gap) */
        line-height: 1.4;     /* try: 1.2 / 1.3 / 1.4 */

        /* 🔧 FONT WEIGHT */
        font-weight: 650;     /* try: 500 / 600 / 700 */

        /* 🔧 LETTER SPACING */
        letter-spacing: 0.3px;  /* try: 0 / 0.3px / 0.5px */

        /* 🔧 TEXT SHADOW (depth / bold feel) */
        text-shadow: 0.3px 0 0 currentColor;;    
        /*
        try examples:
        0.3px 0 0 currentColor;
        0.5px 0 0 currentColor;
        */
    }
}

/* ===== ABOUT HEADING COLOR FIX ===== */

.about-section h1 {
    color: #fcd600;   /* ABOUT black */
}

.about-section h1 span {
    color: #000000;   /* TIRANIYA INDUSTRIES yellow */
}

/* ===== MOBILE: DIFFERENT ABOUT BACKGROUND ===== */
@media (max-width: 768px) {
    .about-section {
        background: url(images/about-mobile.png);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center center;
    }
}

/* ================= CONTACT SECTION ================= */

.custom-contact {
    background: url(images/12.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    padding: 70px 0;
}


/* CONTACT TITLE */

/* ROW */
.contact-row {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

/* LEFT */
.contact-left {
    width: 50%;
}

/* LOGO */
/* ===== CONTACT LOGO SIZE CONTROL ===== */

.contact-logo {
    width: 240px;   /* 🔧 Desktop size control */
    margin-bottom: 50px;
     margin-top: -19px;   /* 🔧 Desktop vertical control */
}

/* Mobile size same rahe */
@media (max-width: 768px) {
    .contact-logo {
        width: 200px;
        margin-top: 0;
    }
}


/* BLOCK */
.contact-block {
    display: flex;
    align-items: flex-start;

    /* 🔧 BLOCK GAP (icon ke upar/niche gap) */
    margin-bottom: 30px;
}

/* ICON */
.contact-icon {
    font-size: 24px;    /* 🔧 icon size increase */

    /* 🔧 ICON & TEXT GAP */
    margin-right: 20px;
}

/* INFO TEXT */
.contact-info {
    font-size: 18px;     /* 🔧 increase here */
    line-height: 1.8;   /* 🔧 MULTI LINE HEIGHT CONTROL */
}

/* RIGHT */
.contact-right {
    width: 30%;
}

/* OUR PRODUCTS */
.products-heading {
    font-family: 'Montserrat', sans-serif;
    font-size: 36px;     /* same as products section */
    
    margin-bottom: 15px;
}


/* LINE UNDER HEADING */
.heading-line {
    width: 60px;
    height: 3px;
    background: #fcd600;

    /* 🔧 LINE GAP CONTROL */
    margin-bottom: 60px;
}

/* PRODUCT LIST */
.product-list {
    list-style: none;
    padding: 0;
}

.product-list li {
    font-size: 18px;     /* 🔧 increase here */
    margin-bottom: 20px;  /* 🔧 PRODUCT ITEM GAP */
}

.product-list i {
    font-size: 20px;   /* 🔧 arrow size */
    margin-right: 12px;
}

/* ===== PRODUCT HOVER SLIDE ===== */

.product-list li {
    transition: transform 0.3s ease;
    cursor: pointer;
}

.product-list li:hover {
    transform: translateX(8px);
}

/* ===== MOBILE CONTACT STACK FIX ===== */
@media (max-width: 768px) {

    .contact-row {
        flex-direction: column;
    }

    .contact-left,
    .contact-right {
        width: 100%;
    }

    .contact-right {
        margin-top: 40px;   /* 🔧 gap control */
    }

    .contact-heading {
        text-align: center;
    }
}

/* ===== CONTACT TITLE IMAGE STYLE ===== */

.contact-title {
    font-family: 'Bebas Neue', cursive !important;
    font-size: 40px;          /* 🔥 large like image */
    font-weight: 570;
    text-align: center;
            /* 🔧 manual vertical control */
    margin-bottom: 80px;
}

.contact-title .contact-black {
    color: #000;
}

.contact-title .contact-yellow {
    color: #fcd600;
}


/* ===== DESKTOP: MANUAL RIGHT SHIFT FOR CONTACT LEFT BLOCK ===== */
@media (min-width: 769px) {

    .contact-left {
        margin-left: 100px;  /* 🔧 yaha value change karke control kar */
    }

}

/* ===== CONTACT PAGE NAVBAR SPACING FIX (RESPONSIVE) ===== */

/* Desktop */
@media (min-width: 769px) {
    .contact-page {
        margin-top: 120px;   /* 🔧 desktop control */
    }
}

/* Mobile */
@media (max-width: 768px) {
    .contact-page {
        margin-top: 85px;   /* 🔧 mobile control */
    }
}

/* ===== FOOTER PRODUCT LINKS COLOR FIX ===== */

.product-list li a {
    color: #000000;        /* black text */
    text-decoration: none;
}

.product-list li a:hover {
    color: #000000;        /* hover pe bhi black */
    text-decoration: none;
}

/* ================= HYDRAULIC PAGE ================= */

.product-detail-page {
    margin-top: 150px; /* 🔧 Desktop navbar gap control */
}

/* ===== TOP MAIN HEADING ===== */

.product-main-title {
    text-align: center;
    margin-bottom: 40px; /* 🔧 gap control */
}

/* ===== SUB HEADING ===== */

.product-sub-title {
    text-align: center;
    color: #000;
}

.center-line {
    width: 60px;
    height: 3px;
    background: #fcd600;
    margin: 3px auto 20px auto; 
    /* 🔧 First value = heading se distance
       🔧 Second value = niche gap */
    
}


/* ===== SPECIFICATIONS ===== */

.spec-heading {
    font-family: 'Montserrat', sans-serif;
    font-size: 27px; /* 🔧 manual control */
    color: #333; /* grey-black */
    margin-top: 20px;
    margin-bottom: 25px;
}

.spec-list {
    list-style: none;
    padding-left: 0;
}

.spec-list li {
    font-size: 18px; /* 🔧 manual control */
    margin-bottom: 3px;
    color: #000;
    font-family: 'Roboto', sans-serif;
}

.spec-list li i {
    font-size: 20px; /* 🔧 icon size control */
    margin-right: 10px;
}

/* ===== TAGLINE ===== */

.product-tagline {
    margin-top: 30px;
    font-size: 18px;
    font-family: 'Montserrat', sans-serif;
    color: #000;
    font-weight: 600;
}

/* ===== IMAGE GALLERY ===== */

.product-gallery {
    display: flex;
    gap: 40px;
    margin-top: 40px;

}

.product-gallery img {
    width: 100%;
    max-width: 23%;
    border-radius: 18px;
    box-shadow: 0 12px 30px rgba(0,0,0,0.12); /* 🔥 SAME AS PRODUCT CARDS */
    transition: transform 0.3s ease;
}

.product-gallery img:hover {
    transform: translateY(-6px);
}

/* ===== MOBILE VIEW ===== */

@media (max-width: 768px) {

    .product-detail-page {
        margin-top: 130px; /* 🔧 mobile navbar gap control */
    }

    .product-gallery {
        flex-direction: column;
    }

    .product-gallery img {
        max-width: 100%;
    }

}

/* ===== HYDRAULIC TITLE SAME AS PRODUCT CARD ===== */

.product-card-title {
    font-size: 25px;
    font-weight: 700;
    margin-bottom: 18px;
    color: #222;
    font-family: 'Montserrat', sans-serif !important; /* 🔥 SAME AS SCREENSHOT */
    letter-spacing: 0.3px;
    line-height: 1.3;
    text-align: center;
    margin-top: -10px; /* 🔧 manual upar niche control */
}

/* ================= PRODUCT CUSTOM FOOTER ================= */

.product-custom-footer {
    background: #ffdf2a;
    padding: 14px 0;
    margin-top: 70px;
}

.product-footer-content {
    font-family: 'Roboto', sans-serif;
}

.product-footer-address {
    font-size: 16px; /* 🔧 manual control */
    color: #000;
    margin-bottom: 12px;
    letter-spacing: 1px;
}

.product-footer-phone {
    font-size: 16px; /* 🔧 manual control */
    color: #000;
    letter-spacing: 1px;
}

/* ===== MOBILE CONTROL ===== */

@media (max-width: 768px) {

    .product-footer-address {
        font-size: 16px;
    }

    .product-footer-phone {
        font-size: 16px;
    }

}


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

.about-page {
    margin-top: 150px; /* Navbar gap */
}

/* Main Heading */
.about-main-heading {
    text-align: center;
    font-size: 36px;
    color: #fcd600;
    font-family: 'Montserrat', sans-serif;
    padding-bottom: 10px;
}

/* Sub Headings */
.about-sub-heading {
    margin-top: 70px;
    text-align: center;
    font-size: 36px;
    color: #fcd600;
    font-family: 'Montserrat', sans-serif;
    margin-bottom: 10px;
}

/* Paragraph Styling SAME AS HOME ABOUT */
.about-text-block p {
    font-size: 18px;
    text-align: center;
    font-family: 'Roboto', sans-serif !important;
    color: #000;
    line-height: 1.8;
    margin-bottom: 15px;
}

/* ================= WHATSAPP FLOAT ================= */

.whatsapp-float {
    position: fixed;
    width: 60px;
    height: 60px;
    bottom: 25px;
    right: 25px;
    background-color: #25D366;
    color: #fff;
    border-radius: 50%;
    text-align: center;
    font-size: 30px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.25);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.3s ease;
}

.whatsapp-float:hover {
    background-color: #1ebe5d;
    transform: scale(1.1);
}

.whatsapp-float i {
    margin-top: 2px;
}

/* ===== FOOTER COPYRIGHT FIX ===== */

.copyright {
    width: 100%;
    text-align: center !important;
}

/* ===== PU 3 NAME HORIZONTAL LAYOUT ===== */

.pu-name-wrapper {
    display: flex;
    justify-content: center;
    gap: 80px; /* space between names */
    margin-bottom: 20px; /* SAME spacing before specs */
}

.pu-name-block {
    text-align: center;
}

/* ===== PU 8 IMAGE 2 ROW FIX ===== */

.pu-gallery {
    flex-wrap: wrap;
    justify-content: center;
}

.pu-gallery img {
    max-width: 22%;
}

/* ===== MOBILE ===== */

@media (max-width: 768px) {

    .pu-name-wrapper {
        flex-direction: column;
        gap: 30px;
    }
    
    .pu-gallery img {
        max-width: 100%;
        width: 100%;
    }

}