@media only screen and (max-width:1366px){.ulockd-overlayer-l2{top:71%}}@media only screen and (max-width:1199px){.social-linked,.social-linked li{margin-bottom:10px}.ulockd-main-logo2>img,.ulockd-service-box,.ulockd-srvc-column-two{margin-top:0}nav.navbar.bootsnav.menu-style1 ul.nav>li>a{padding:30px 8px;font-size:12px}.ulockd-main-logo2>img{max-height:50px}.ulockd-quote-btn a{padding:10px 30px}nav.navbar.bootsnav .navbar-toggle{background-color:transparent;color:#fff}nav.navbar.bootsnav.menu-style2,nav.navbar.menu-style1{background-color:transparent}nav.navbar.bootsnav ul.nav li.dropdown ul.dropdown-menu>li>a{color:#fff}.ulockd-ohour-info.style2{margin-bottom:15px}.social-linked::before,.ulockd-frst-divider::after,.welcm-ht::before{display:none}.welcm-ht{text-align:center!important}.social-linked{float:none!important;text-align:center}.cd-slider-nav{width:100%}.ulockd-main-slider2 .caption{padding:8%}.ulockd-welcome-one{margin-top:50px}.ulockd-divider1:before{width:70%}.posted-date{bottom:0;left:inherit;right:5%!important;width:40%}.bp-details{padding:15px 40px}.ulockd-blog-slider .owl-stage-outer{padding-bottom:0}.about-box{padding:50px;margin-bottom:40px}.ulockd-pad395{padding-left:15px;padding-right:15px}.masonry-gallery.grid-four-item .isotope-item{width:33.33%}.ulockd-srvc-column .ulockd-srv-icon{float:none!important;display:inline}.ulockd-srvc-details{padding-left:0;margin-top:25px}.ulockd-srvc-details.style-right{padding-left:0;padding-right:0}.ulockd-tm-details{padding:15px 18px}.ulockd-overlayer{top:55%}.ulockd-overlayer-l2{top:60%}.ulockd-pricing-table{margin-bottom:80px}.ulockd-pricing-table:hover{transform:scale(1.05)}.ulockd-padd-md-30{padding-right:0}.ulockd-quote-btn{right:11%}.ulockd-shop-item{margin-bottom:50px}.compostable-product-grid .product-text h4,.resins-product-grid .product-text h4{font-size:16px}.ulockd-bp-details{padding:20px 15px}.cus-btn-div .btn-thm{padding:10px!important}}@media only screen and (max-width:991px){.ulockd-divider1:before{-webkit-transform:skewX(0);-moz-transform:skewX(0);-o-transform:skewX(0);left:0;width:100%;transform:skewX(0)}.posted-date{width:30%}.ulockd-srvcs-column{margin-bottom:50px!important}.ulockd-about2-details,.ulockd-service-box{margin-bottom:40px}.ulockd-ffact{margin-bottom:60px}.ulockd-testi-grid{margin-bottom:100px}.ulockd-tm-details{bottom:-21%}.ulockd-partner-thumb{margin-bottom:30px}.welcm-ht{margin-bottom:15px}.welcm-ht-two{text-align:center}.ulockd-login-form{margin-bottom:25px}.social-linked-two{float:none!important;margin-bottom:10px;text-align:center}.ulockd-about-box1,.ulockd-ffact-two,.ulockd-team-two-member{margin-bottom:50px}.ulockd-main-logo2>img,.ulockd-main-logo>img{margin-top:15px}.ulockd-main-slider2 .caption{padding:8%}.ulockd-main-slider2 .ulockd-slider-text2{font-size:36px;line-height:48px}.ulockd-main-slider2 .ulockd-slider-text3{margin-top:10px}.navbar-brand .logo{height:37px;margin-top:0}nav.navbar.bootsnav .navbar-header.ulockd-ltwo .navbar-toggle,nav.navbar.bootsnav.menu-style1 .navbar-toggle{background-color:transparent;color:#fff}nav.navbar.bootsnav ul.nav li.dropdown ul.dropdown-menu>li>a{color:#fff;font-family:Montserrat,sans-serif}.navbar.bootsnav .nav.navbar-nav .dropdown li{padding:10px 15px}.navbar.bootsnav .nav.navbar-nav .dropdown li:hover a{color:#fff;padding-left:15px}.ulockd-contact-info .ulockd-info{padding-right:36%}.masonry-gallery.grid-four-item .isotope-item{width:50%}.ulockd-flip-clock .clock{padding-left:0}.gallery-thumb.style2 .overlayer .ulockd-overlayer,.ulockd-overlayer{top:45%}.ulockd-ffact-two{border:1px solid #ddd}.ulockd-pricing-table:hover{transform:scale(1);-webkit-transform:scale(1);-moz-transform:scale(1);-o-transform:scale(1);-ms-transform:scale(1)}.ulockd-partner.one::before{background-color:transparent}.tob img{display:none}.mb50{margin:0}.ulockd-recent-project1 .overlay{padding-top:8%}.ulockd-booking-form{padding:30px}.ulockd-shopping-cart table.table td .form-control{margin-bottom:10px;width:auto}.ulockd-gallery-slider.owl-carousel.owl-theme button.owl-next,.ulockd-gallery-slider.owl-carousel.owl-theme button.owl-prev{top:-25px}.benifits-single h3,.carousel-text h3 span{font-size:40px}.carousel-text h3{font-size:30px}.icon-box{padding:25px 10px}.website-grid .wg-single h3{font-size:3em}.stylish-title .shaded-text{font-size:90px}.solution-grid-single,.ulockd-team-member{flex-direction:column}.ulockd-contact-details .contact-single p,.ulockd-product-details h4{font-size:12px}h2{font-size:26px}.ulockd-team.bg-2{background-image:none}.ulockd-contact-form.ulockd-style-two{margin-left:0;margin-right:0}.ulockd-contact-details .contact-single{padding:5px}.ulockd-contact-details .contact-single img{height:50px}.ulockd-srvc-column .srvc-details .title{font-size:16px}.application-single h6{font-size:14px}.ulockd-ffact-two .ulockd-icon-let,.ulockd-ffact-two i{font-size:40px;padding:15px}.ulockd-ffact-two .counter .stylish-font{font-size:40px;padding:0}.ulockd-ffact-two .timer,.ulockd-ffact-two>p{font-size:18px}}@media only screen and (max-width:767px){.side-bar-products,.ulockd-tm-details::before{display:none}.website-link span{border:none}.ulockd-footer-font-icon,.ulockd-srvc-column,.ulockd-srvc-column.text-end{text-align:center}.custom-preojects-advantage-single{padding:15px;margin-bottom:15px}.bg-3{background-image:none}.ulockd-footer-qlink ul{padding-left:10px!important}.scrollToTop{left:50%;transform:translateX(-50%);right:auto;bottom:10px}.ulockd-l2-copy-right{padding-bottom:60px}.carousel-text h3{font-size:30px;font-weight:900!important}.carousel-text h3 span{font-size:40px}.carousel-control-next,.carousel-control-prev{width:10%}.cd-slider-nav,.masonry-gallery.grid-four-item .isotope-item,.ulockd-footer::before{width:100%}.navbar.bootsnav .dropdown li{padding:10px 15px}.navbar.bootsnav .dropdown li:hover>a{padding-left:15px}.navbar.bootsnav .dropdown li>a{color:#fff;-webkit-transition:.3s;-moz-transition:.3s;-ms-transition:.3s;-o-transition:.3s;transition:.3s}.ulockd-contact-info,.ulockd-ohour-info{text-align:center!important}.ulockd-contact-info .ulockd-info{padding:0}.ulockd-contact-info .ulockd-icon{display:table;float:none;margin:0 auto}.ulockd-ohour-info .ulockd-icon{display:table;float:none!important;margin:0 auto}.ulockd-ohour-info.style2{padding-bottom:10px;padding-top:10px}.ulockd-welcm-hmddl{margin-bottom:30px;margin-top:20px;text-align:center}.ulockd-main-slider2 .ulockd-slider-text1{font-size:30px;line-height:30px}.ulockd-main-slider2 .ulockd-slider-text2{font-size:32px;line-height:32px}.ulockd-main-slider2 button.owl-next,.ulockd-main-slider2 button.owl-prev{display:none!important}.ulockd-main-slider2 .ulockd-slider-text3 p{font-size:14px;line-height:16px;margin-top:0}.ulockd-fservice-box{margin-bottom:55px}.ulockd-tm-details{bottom:0;padding:20px;width:100%}.ulockd-ap-srvc-column .ulockd-ap-srv-icon{left:25px}.ulockd-ap-srv-cntnt-details{padding-left:100px}.ulockd-error{font-size:48px}.ulockd-csoon{font-size:36px}.gallery-thumb.style2 .overlayer .ulockd-overlayer{top:40%}.ulockd-ffact-two{margin-bottom:30px}.ulockd-ffact-two::after,.ulockd-ffact-two::before{background-color:transparent}.home-form{padding:60px 0}.global-presence .side-bordered{border:none!important}.global-presence .country-single{margin-bottom:10px}.ulockd-contact-form.ulockd-style-two{padding:25px}.ulockd-srvc-column .srvc-details .title{font-size:14px}.ulockd-booking-form.bxshdw_style,.ulockd-faq-box.bxshdw_style{padding:25px 0}}@media only screen and (max-width:768px){.scrollToTop{left:50%;bottom:10px;transform:translateX(-50%)}.global-presence .country-single{flex-direction:column}.global-presence .country-single .txt-sec{text-align:center}}@media only screen and (max-width:630px){.ulockd-home-btn{display:none}.ulockd-main-slider2 .caption{padding:10% 6%}.gallery-thumb.style2 .overlayer .ulockd-overlayer{top:43%}.ulockd-booking-form{padding:50px 20px}.team-details{padding:10px 10px 15px}.team-icon a{display:flex}.certificate-single{padding:20px}.cus-font h3,.ulockd-recent-project1 .overlaya span{font-size:26px}.appointment_form{padding:15px}}@media only screen and (max-width:520px){.col-xxs-12{width:100%!important}.flip-container{margin-bottom:50px}.team-icon a{display:inline}.banner-style-one .banner-title{font-size:60px}.website-grid .wg-single h3{font-size:2em}.stylish-title .shaded-text{font-size:40px}.stylish-title h1 span,.stylish-title h2 span,.stylish-title h3 span{font-size:16px;line-height:30px}}@media only screen and (max-width:479px){.ulockd-home-btn{display:none}.ulockd-main-slider2 .ulockd-slider-text3{margin-top:0}.ulockd-main-slider2 .ulockd-slider-text2{font-size:23px;line-height:30px}.gallery-thumb.style2 .overlayer .ulockd-overlayer{top:45%}.posted-date{width:40%}.ulockd-recent-project1 .overlay{padding-top:20%}}@media only screen and (max-width:400px){.ulockd-main-slider2 .caption{padding:13% 5%}.ulockd-main-slider2 .ulockd-slider-text1{font-size:24px}.ulockd-main-slider2 .ulockd-slider-text2{font-size:20px}.ulockd-main-slider2 .ulockd-slider-text3 p{display:none}.gallery-thumb.style2 .overlayer .ulockd-overlayer{top:50%}.posted-date{width:50%}}@media only screen and (max-width:360px){.ulockd-dvidr-btn-l2 a{margin-top:30px}.hidden-xxs{display:none}.cd-hero-slider .cd-half-width{padding-top:50px}.cd-hero-slider h2{font-size:20px}}@media only screen and (max-width:320px){.ulockd-overlayer-l2{top:76%}.flip-container .flipper .back{padding:45px 13px}}

/* ==========================================================================
   MOBILE SPACING / RESPONSIVE FIXES  (added at the end so it wins)
   - section ka 60+60 padding mobile par ~120px ka khali gap bana raha tha
   - .stylish-title ek fixed 200px ka box tha, mobile par mostly khali
   ========================================================================== */
@media only screen and (max-width:767px) {
    section {
        padding: 30px 0
    }

    .stylish-title {
        height: auto;
        min-height: 0;
        padding: 4px 0 0;
        margin-bottom: 4px
    }

    .stylish-title .shaded-text {
        font-size: 42px;
        line-height: 1;
        top: 0;
        opacity: .35
    }

    .stylish-title h1 span,
    .stylish-title h2 span,
    .stylish-title h3 span {
        font-size: 18px;
        letter-spacing: 1px;
        white-space: normal;
        line-height: 1.35;
        margin-bottom: 10px;
        padding-bottom: 10px
    }

    .icon-box {
        margin-bottom: 15px;
        padding: 20px
    }

    .blog_post_grid,
    .solution-grid-single,
    .ulockd-srvc-column-two,
    .compostable-product-grid .product-grid-single,
    .resins-product-grid .product-grid-single {
        margin-bottom: 15px
    }

    .row>[class*=col-]:last-child .icon-box,
    .row>[class*=col-]:last-child .blog_post_grid,
    .row>[class*=col-]:last-child .solution-grid-single,
    .row>[class*=col-]:last-child .ulockd-srvc-column-two,
    .row>[class*=col-]:last-child .ulockd-ffact-two {
        margin-bottom: 0
    }

    .website-grid .wg-single {
        padding: 45px 20px
    }

    .website-grid .wg-single h3 {
        font-size: 2.2em
    }

    .ulockd-about-two {
        margin-top: 0
    }

    .about-thumb {
        margin-bottom: 12px
    }

    .ulockd-ffact-two {
        margin-top: 0;
        margin-bottom: 12px
    }

    .ulockd-faq-box.bxshdw_style {
        margin-bottom: 0
    }

    .solution-grid-details {
        padding: 10px 15px
    }

    .ulockd-bp-details {
        padding: 12px 8px
    }

    /* theme spacing utilities (custom-style.css) — desktop values are huge on phones.
       class specificity beats `section{}`, isliye inhe alag se override karna zaroori hai */
    .pt70,
    .pt60,
    .pt50,
    .pt40 {
        padding-top: 26px
    }

    .pb70,
    .pb60,
    .pb50,
    .pb40 {
        padding-bottom: 26px
    }

    .mt50,
    .mt40,
    .mt30,
    .mt20 {
        margin-top: 0
    }

    .mb70,
    .mb50 {
        margin-bottom: 20px !important
    }

    .mb30 {
        margin-bottom: 15px
    }

    .pl50,
    .pr50 {
        padding-left: 0;
        padding-right: 0
    }

    /* blog cards 2-up (theme sirf 768px+ par 2-up karta hai) */
    .ulockd-blog .row>.col-md-6 {
        flex: 0 0 auto;
        width: 50%
    }

    .ulockd-footer {
        padding-top: 30px
    }
}

/* phones: product / resin / blog cards 2 per row (theme khud 576px+ par 2-up karta hai,
   phone par 1-up hone se har card ~500px lamba ho jata tha) */
@media only screen and (max-width:575.98px) {

    .compostable-product-grid>[class*=col-],
    .resins-product-grid>[class*=col-],
    .ulockd-blog .row>.col-md-6 {
        flex: 0 0 auto;
        width: 50%
    }

    .compostable-product-grid .product-text h4,
    .resins-product-grid .product-text h4 {
        font-size: 13px;
        line-height: 1.3
    }

    .ulockd-bp-details .title a {
        font-size: 13px;
        line-height: 1.35
    }
}

@media only screen and (max-width:520px) {
    section {
        padding: 26px 0
    }

    .stylish-title .shaded-text {
        font-size: 34px
    }

    .stylish-title h1 span,
    .stylish-title h2 span,
    .stylish-title h3 span {
        font-size: 16px;
        line-height: 1.35
    }

    .website-grid .wg-single {
        padding: 38px 15px
    }

    .website-grid .wg-single h3 {
        font-size: 1.9em
    }

    .solution-grid-details {
        padding: 10px 12px
    }
}
/* ==========================================================================
   RESINS PAGES — "… Resins Grades" table (.table.align-justify)
   Phone par 4-column table cramped/clip ho rahi thi; ab har row ek
   labelled card ban jati hai. Hook `.align-justify` sirf inhi grades
   tables par use hua hai (film-blowing / extrusion-coating / injection-
   moulding / profile-extrusion-straw / thermoforming resins).
   ========================================================================== */
@media only screen and (max-width:767px) {
    .table-responsive>.table.align-justify {
        margin-bottom: 0;
        min-width: 0;
        border-collapse: separate;
        border-spacing: 0
    }

    /* header row (SR.No. | PARTICULARS | GRADE | DESCRIPTION) */
    .table.align-justify tr:first-child {
        display: none
    }

    .table.align-justify tr {
        display: block;
        margin-bottom: 12px;
        border: 1px solid #dbe8e0;
        border-radius: 10px;
        overflow: hidden;
        background: #fff
    }

    .table.align-justify tr:nth-child(even) {
        background: #f8fbf9
    }

    .table.align-justify td {
        display: flex;
        align-items: flex-start;
        gap: 10px;
        width: 100%;
        padding: 8px 12px;
        border: 0;
        border-top: 1px solid #eef4f0;
        text-align: left !important;
        font-size: 13px;
        line-height: 1.45;
        color: #2d3a33;
        white-space: normal;
        background-color: transparent !important;
        box-shadow: none !important
    }

    .table.align-justify td:first-child {
        border-top: 0
    }

    .table.align-justify td::before {
        flex: 0 0 86px;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: .4px;
        text-transform: uppercase;
        color: #6b8177;
        padding-top: 2px
    }

    .table.align-justify td:nth-child(1)::before {
        content: "Sr. No."
    }

    .table.align-justify td:nth-child(2)::before {
        content: "Particulars"
    }

    .table.align-justify td:nth-child(3)::before {
        content: "Grade"
    }

    .table.align-justify td:nth-child(4)::before {
        content: "Description"
    }

    .table.align-justify td:nth-child(3) {
        font-weight: 700;
        color: var(--green)
    }
}
/* Bootstrap gutter `g-5` (3rem) container ke 12px padding se bada hai ->
   phone par ~8px horizontal scroll bana raha tha. Mobile par gutter chhota. */
@media only screen and (max-width:767px) {

    .row.g-5,
    .row.gx-5 {
        --bs-gutter-x: 1.5rem
    }

    .row.g-5 {
        --bs-gutter-y: 1.5rem
    }
}