/*==================================================
        GIRNAR PIPES - PREMIUM PRODUCT PAGE CSS
        PART 1 - GLOBAL DESIGN
==================================================*/

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

:root{
    --primary:#2957A4;
    --secondary:#EE8102;
    --dark:#1d2434;
    --light:#ffffff;
    --text:#555;
    --border:#e8edf5;
    --bg:#f7f9fc;
    --shadow:0 12px 35px rgba(0,0,0,.08);
    --radius:16px;
    --transition:.35s ease;
}

html{
    scroll-behavior:smooth;
}

body{
    font-family:'Inter',sans-serif;
    background:#fff;
    color:var(--text);
    font-size:16px;
    line-height:1.9;
    overflow-x:hidden;
}

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

.about{
    background:#f7f9fc;
    padding:80px 0;
}

.about .container{
    max-width:1320px;
}

/*==============================
    CONTENT BOX
==============================*/

.section-title{
    background:#fff;
    border-radius:18px;
    padding:45px;
    box-shadow:var(--shadow);
    border:1px solid #edf1f8;
}

/*==============================
    HEADINGS
==============================*/

.section-title h1{
    font-size:44px;
    font-weight:800;
    color:var(--primary);
    line-height:1.3;
    margin-bottom:30px;
    position:relative;
}

.section-title h1:after{
    content:'';
    width:90px;
    height:5px;
    background:var(--secondary);
    display:block;
    margin-top:18px;
    border-radius:20px;
}

.section-title h2{
    font-size:32px;
    color:var(--primary);
    margin:55px 0 25px;
    font-weight:700;
    line-height:1.4;
    position:relative;
    padding-left:18px;
}

.section-title h2:before{
    content:'';
    position:absolute;
    left:0;
    top:6px;
    width:6px;
    height:35px;
    background:var(--secondary);
    border-radius:10px;
}

.section-title h3{
    font-size:24px;
    color:#222;
    font-weight:700;
    margin-top:35px;
    margin-bottom:15px;
}

.section-title h4{
    font-size:20px;
    color:var(--primary);
    font-weight:700;
    margin-bottom:12px;
}

/*==============================
    PARAGRAPH
==============================*/

.section-title p{
    font-size:17px;
    color:#666;
    margin-bottom:22px;
    text-align:justify;
}

/*==============================
    SMALL TEXT
==============================*/

.small{
    color:#888;
    font-size:14px;
    margin-bottom:18px;
}

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

.section-title img{
    width:100%;
    border-radius:18px;
    overflow:hidden;
    margin:30px 0;
    transition:.5s;
    box-shadow:0 18px 45px rgba(0,0,0,.12);
}

.section-title img:hover{
    transform:scale(1.02);
}


/*==============================
    LINKS
==============================*/

a{
    transition:.35s;
    text-decoration:none;
}

a:hover{
    text-decoration:none;
}

/*==============================
    BUTTON
==============================*/

.btn-theme{
    display:inline-block;
    background:#2957A4;
    color:#fff;
    padding:15px 35px;
    border-radius:50px;
    font-weight:600;
    transition:.35s;
}

.btn-theme:hover{
    background:#EE8102;
    color:#fff;
    transform:translateY(-3px);
}

/*==============================
    CUSTOM SCROLLBAR
==============================*/

::-webkit-scrollbar{
    width:8px;
    height:8px;
}

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

::-webkit-scrollbar-thumb{
    background:#2957A4;
    border-radius:20px;
}

::-webkit-scrollbar-thumb:hover{
    background:#EE8102;
}

/*==============================
    FADE ANIMATION
==============================*/

.section-title,
.tables{
    animation:fadeUp .8s ease;
}

@keyframes fadeUp{

0%{
opacity:0;
transform:translateY(40px);
}

100%{
opacity:1;
transform:translateY(0);
}

}
/*==================================================
        PART 2 - FAQ | EXPORT | SIDEBAR | USES
====================================================*/


/*=========================================
        USES OF PIPES & TUBES
=========================================*/

.industrial-fittings-uses{
    margin:70px 0;
    padding:45px;
    background:#fff;
    border-radius:18px;
    box-shadow:0 15px 40px rgba(0,0,0,.08);
    border:1px solid #edf1f5;
}

.industrial-fittings-uses h2{
    color:#2957A4;
    font-size:34px;
    font-weight:800;
    margin-bottom:30px;
    position:relative;
    padding-bottom:15px;
}

.industrial-fittings-uses h2:after{
    content:'';
    position:absolute;
    left:0;
    bottom:0;
    width:90px;
    height:4px;
    background:#EE8102;
    border-radius:20px;
}

.industrial-fittings-uses h3{
    background:#f8fbff;
    border-left:5px solid #2957A4;
    padding:18px 22px;
    border-radius:10px;
    font-size:22px;
    color:#222;
    margin-top:35px;
    margin-bottom:15px;
    transition:.35s;
}

.industrial-fittings-uses h3:hover{
    background:#2957A4;
    color:#fff;
    transform:translateX(8px);
}

.industrial-fittings-uses p{
    color:#666;
    line-height:1.9;
    text-align:justify;
    margin-bottom:18px;
}


/*=========================================
            FAQ
=========================================*/

.faq-section{
    margin-top:60px;
}

.faq-section h4{
    background:#fff;
    border-left:5px solid #EE8102;
    border-radius:12px 12px 0 0;
    padding:18px 22px;
    margin-bottom:0;
    font-size:19px;
    font-weight:700;
    color:#2957A4;
    box-shadow:0 8px 20px rgba(0,0,0,.05);
}

.faq-section p{
    background:#f9fbfd;
    padding:20px 24px;
    border-radius:0 0 12px 12px;
    margin-bottom:25px;
    border:1px solid #edf2f7;
    border-top:none;
    color:#666;
    line-height:1.8;
}


/*=========================================
            EXPORT AREA
=========================================*/

.export-area{
    margin-top:70px;
}

.export-header{
    text-align:center;
    margin-bottom:40px;
}

.export-header h2{
    color:#2957A4;
    font-size:36px;
    font-weight:800;
}

.export-header p{
    color:#666;
    max-width:750px;
    margin:auto;
}

.export-box{
    background:#fff;
    padding:35px;
    border-radius:18px;
    margin-bottom:35px;
    box-shadow:0 15px 35px rgba(0,0,0,.08);
    border:1px solid #edf2f8;
}

.export-box h3{
    color:#2957A4;
    margin-bottom:30px;
    font-size:24px;
    font-weight:700;
}

.export-list{
    display:flex;
    flex-wrap:wrap;
    gap:14px;
}

.export-list span{
    background:#edf4ff;
    color:#2957A4;
    padding:12px 22px;
    border-radius:50px;
    font-size:15px;
    font-weight:600;
    transition:.35s;
    cursor:pointer;
    border:1px solid transparent;
}

.export-list span:hover{
    background:#2957A4;
    color:#fff;
    border-color:#2957A4;
    transform:translateY(-4px);
    box-shadow:0 12px 25px rgba(41,87,164,.25);
}


/*=========================================
            PRODUCT SIDEBAR
=========================================*/

.product-sidebar{
    position:sticky;
    top:120px;
    background:#fff;
    border-radius:18px;
    overflow:hidden;
    box-shadow:0 15px 40px rgba(0,0,0,.08);
    border:1px solid #edf2f8;
}

.sidebar-heading{
    background:linear-gradient(135deg,#2957A4,#18386f);
    color:#fff;
    padding:22px;
    font-size:22px;
    text-align:center;
    margin:0;
    font-weight:700;
}

.sidebar-link{
    display:flex;
    align-items:center;
    gap:12px;
    padding:18px 22px;
    border-bottom:1px solid #edf2f8;
    color:#444;
    font-weight:600;
    transition:.35s;
}

.sidebar-link:last-child{
    border-bottom:none;
}

.sidebar-link span{
    width:34px;
    height:34px;
    background:#edf4ff;
    color:#2957A4;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:.35s;
    font-size:18px;
}

.sidebar-link:hover{
    background:#2957A4;
    color:#fff;
    padding-left:30px;
}

.sidebar-link:hover span{
    background:#fff;
    color:#2957A4;
}


/*=========================================
            IMAGE EFFECT
=========================================*/

.section-title img{
    transition:.45s;
}

.section-title img:hover{
    transform:scale(1.02);
    box-shadow:0 20px 50px rgba(0,0,0,.15);
}


/*=========================================
        CARD HOVER EFFECT
=========================================*/

.tables,
.export-box,
.product-sidebar,
.industrial-fittings-uses{
    transition:.35s;
}

.tables:hover,
.export-box:hover,
.product-sidebar:hover,
.industrial-fittings-uses:hover{
    transform:translateY(-5px);
    box-shadow:0 20px 50px rgba(0,0,0,.12);
}
/*==================================================
        PART 3 - RESPONSIVE & FINISHING
====================================================*/




/*=========================================
            TEXT SELECTION
=========================================*/

::selection{
    background:#2957A4;
    color:#fff;
}

::-moz-selection{
    background:#2957A4;
    color:#fff;
}


/*=========================================
        GLOBAL TRANSITION
=========================================*/

*{
    transition:
    background .3s,
    color .3s,
    border-color .3s,
    box-shadow .3s,
    transform .3s;
}


/*=========================================
        IMAGE STYLING
=========================================*/

img{
    max-width:100%;
    height:auto;
    display:block;
}


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


/*=========================================
        SECTION SPACING
=========================================*/

.section-title>*:last-child,
.industrial-fittings-uses>*:last-child,
.export-box>*:last-child,
.faq-section>*:last-child{
    margin-bottom:0;
}


/*=========================================
        UTILITY CLASSES
=========================================*/

.radius{
    border-radius:16px;
}

.shadow{
    box-shadow:0 12px 35px rgba(0,0,0,.08);
}

.bg-white{
    background:#fff;
}

.text-primary{
    color:#2957A4;
}

.text-orange{
    color:#EE8102;
}

.mb-40{
    margin-bottom:40px;
}

.mt-40{
    margin-top:40px;
}


/*=========================================
        HOVER ANIMATION
=========================================*/

@keyframes floatCard{

0%{
transform:translateY(0px);
}

50%{
transform:translateY(-8px);
}

100%{
transform:translateY(0px);
}

}

.export-box:hover{
    animation:floatCard 1.5s ease infinite;
}


/*=========================================
        FADE ANIMATION
=========================================*/

@keyframes fadeInUp{

0%{
opacity:0;
transform:translateY(40px);
}

100%{
opacity:1;
transform:translateY(0);
}

}

.section-title,
.tables,
.export-box,
.product-sidebar,
.industrial-fittings-uses,
.faq-section{
    animation:fadeInUp .8s ease both;
}


/*=========================================
            LAPTOP
=========================================*/

@media (max-width:1200px){

.section-title{
    padding:35px;
}

.section-title h1{
    font-size:38px;
}

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

.product-sidebar{
    top:90px;
}

}


/*=========================================
            TABLET
=========================================*/

@media (max-width:991px){

.product-sidebar{
    position:relative;
    top:0;
    margin-top:40px;
}

.section-title{
    padding:30px;
}

.section-title h1{
    font-size:34px;
}

.section-title h2{
    font-size:27px;
}

.export-header h2{
    font-size:30px;
}

.industrial-fittings-uses{
    padding:35px;
}

}


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

@media (max-width:768px){

.about{
    padding:60px 0;
}

.section-title{
    padding:25px;
}

.section-title h1{
    font-size:30px;
}

.section-title h2{
    font-size:24px;
}

.section-title h3{
    font-size:20px;
}

.section-title p{
    font-size:15px;
    text-align:left;
}

.industrial-fittings-uses{
    padding:25px;
}

.industrial-fittings-uses h2{
    font-size:28px;
}

.industrial-fittings-uses h3{
    font-size:18px;
}

.export-box{
    padding:25px;
}

.export-box h3{
    font-size:22px;
}

.export-list{
    gap:10px;
}

.export-list span{
    font-size:14px;
    padding:10px 16px;
}

.sidebar-heading{
    font-size:20px;
}

.sidebar-link{
    padding:16px 18px;
}



}


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

@media (max-width:576px){

.section-title{
    padding:20px;
}

.section-title h1{
    font-size:26px;
}

.section-title h2{
    font-size:22px;
}

.export-header h2{
    font-size:26px;
}

.export-header p{
    font-size:15px;
}

.tables table{
    min-width:650px;
}



}


/*=========================================
        EXTRA SMALL DEVICES
=========================================*/

@media (max-width:400px){

.section-title h1{
    font-size:23px;
}

.section-title h2{
    font-size:20px;
}

.sidebar-link{
    font-size:14px;
}

.export-list span{
    width:100%;
    text-align:center;
}

}


/*=========================================
        END OF FILE
=========================================*/
=========================================*/
=========================================*/
/*==================================================
 MARUTI METAL INDUSTRIES
 SEO PRODUCT PAGE ADDITIONAL CSS
==================================================*/


/*=========================================
 TECHNICAL DATA SECTION
=========================================*/

.technical-data,
.export-section,
.ai-seo-section,
.cta-section{
    background:#fff;
    padding:50px;
    margin:60px 0;
    border-radius:18px;
    box-shadow:0 15px 40px rgba(0,0,0,.08);
    border:1px solid #edf2f8;
}


.technical-data h2,
.export-section h2,
.ai-seo-section h2,
.cta-section h2{

    font-size:34px;
    font-weight:800;
    color:#2957A4;
    margin-bottom:30px;
    position:relative;
    padding-left:18px;

}


.technical-data h2:before,
.export-section h2:before,
.ai-seo-section h2:before,
.cta-section h2:before{

content:'';
position:absolute;
left:0;
top:8px;
height:35px;
width:6px;
background:#EE8102;
border-radius:20px;

}



.technical-data p,
.export-section p,
.ai-seo-section p,
.cta-section p{

font-size:17px;
color:#666;
line-height:1.9;
text-align:justify;
margin-bottom:25px;

}




/*=========================================
 PRODUCT GRADE TABLE
=========================================*/


.product-table,
.composition-table,
.mechanical-table,
.specification-table{

width:100%;
border-collapse:collapse;
margin:35px 0;
overflow:hidden;
border-radius:15px;
background:#fff;
box-shadow:0 10px 30px rgba(0,0,0,.06);

}


.product-table th,
.composition-table th,
.mechanical-table th,
.specification-table th{

background:linear-gradient(135deg,#2957A4,#18386f);
color:#fff;
padding:18px;
font-size:16px;
font-weight:700;
text-align:left;

}



.product-table td,
.composition-table td,
.mechanical-table td,
.specification-table td{

padding:16px 18px;
border-bottom:1px solid #edf1f8;
color:#555;
font-size:15px;

}



.product-table tr:nth-child(even),
.composition-table tr:nth-child(even),
.mechanical-table tr:nth-child(even),
.specification-table tr:nth-child(even){

background:#f8fbff;

}


.product-table tr:hover,
.composition-table tr:hover,
.mechanical-table tr:hover,
.specification-table tr:hover{

background:#edf4ff;

}


.product-table td:first-child,
.composition-table td:first-child,
.mechanical-table td:first-child,
.specification-table td:first-child{

font-weight:700;
color:#2957A4;

}





/*=========================================
 EXPORT SECTION
=========================================*/


.export-section ul{

display:flex;
flex-wrap:wrap;
gap:15px;
padding:0;
margin-top:25px;

}


.export-section li{

list-style:none;
background:#edf4ff;
border:1px solid #dbe8ff;
padding:12px 25px;
border-radius:50px;
color:#2957A4;
font-weight:600;
transition:.35s;

}


.export-section li:hover{

background:#2957A4;
color:#fff;
transform:translateY(-5px);

}





/*=========================================
 AI SEO FAQ SECTION
=========================================*/


.faq{

margin-top:30px;

}



.faq h3{

background:#f8fbff;
border-left:5px solid #2957A4;
padding:18px 22px;
border-radius:12px 12px 0 0;
margin:25px 0 0;
font-size:21px;
color:#2957A4;
font-weight:700;

}



.faq p{

background:#fff;
border:1px solid #edf2f8;
border-top:none;
padding:20px 25px;
border-radius:0 0 12px 12px;
margin:0;

}




/*=========================================
 CTA SECTION
=========================================*/


.cta-section{

text-align:center;
background:
linear-gradient(
135deg,
#f7faff,
#ffffff
);

}



.cta-section h2{

justify-content:center;

}


.btn-primary,
.btn-secondary{

display:inline-block;
padding:15px 35px;
border-radius:50px;
margin:15px 8px;
font-weight:700;
transition:.35s;

}



.btn-primary{

background:#2957A4;
color:#fff;

}


.btn-primary:hover{

background:#EE8102;
color:#fff;
transform:translateY(-4px);

}



.btn-secondary{

background:#EE8102;
color:#fff;

}


.btn-secondary:hover{

background:#2957A4;
color:#fff;
transform:translateY(-4px);

}




/*=========================================
 FOOTER SEO AREA
=========================================*/


footer{

background:#1d2434;
padding:45px;
text-align:center;
color:#fff;
margin-top:60px;

}


footer h3{

font-size:28px;
color:#fff;

}


footer p{

color:#ddd;
font-size:16px;

}



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


@media(max-width:991px){


.technical-data,
.export-section,
.ai-seo-section,
.cta-section{

padding:35px;

}


.technical-data h2,
.export-section h2,
.ai-seo-section h2,
.cta-section h2{

font-size:28px;

}



.product-table,
.composition-table,
.mechanical-table,
.specification-table{

display:block;
overflow-x:auto;
white-space:nowrap;

}



}



@media(max-width:576px){


.technical-data,
.export-section,
.ai-seo-section,
.cta-section{

padding:22px;

}


.technical-data h2,
.export-section h2,
.ai-seo-section h2,
.cta-section h2{

font-size:23px;

}



.technical-data p,
.export-section p,
.ai-seo-section p{

font-size:15px;

}



.export-section li{

width:100%;
text-align:center;

}



.btn-primary,
.btn-secondary{

width:100%;
margin:8px 0;

}


}



/*=========================================
 PREMIUM HOVER EFFECT
=========================================*/


.technical-data:hover,
.export-section:hover,
.ai-seo-section:hover,
.cta-section:hover{

transform:translateY(-5px);
box-shadow:0 25px 55px rgba(0,0,0,.12);

}
.grade-list{

display:flex;
flex-wrap:wrap;
gap:10px;
margin:15px 0 25px;

}


.grade-list span{

background:#edf4ff;
color:#2957A4;
padding:8px 16px;
border-radius:30px;
font-size:14px;
font-weight:700;
border:1px solid #dbe7ff;
transition:.3s;

}


.grade-list span:hover{

background:#2957A4;
color:#fff;
transform:translateY(-3px);

}


.product-card h4{

font-size:18px;
font-weight:700;
color:#EE8102;
margin:20px 0 10px;

}
.product-gallery{

padding:80px 0;
background:#f7f9fc;

}


.gallery-container{

max-width:1320px;
margin:auto;
padding:0 15px;

}



.product-gallery h2{

text-align:center;
font-size:38px;
font-weight:800;
color:#2957A4;
margin-bottom:15px;

}


.gallery-desc{

text-align:center;
font-size:17px;
color:#666;
margin-bottom:45px;

}



/* 3 COLUMN GRID */

.gallery-grid{

display:grid;
grid-template-columns:repeat(3,1fr);
gap:30px;

}



.gallery-item{

background:#fff;
border-radius:18px;
overflow:hidden;
box-shadow:0 15px 35px rgba(0,0,0,.08);
border:1px solid #edf2f8;
transition:.35s;
text-align:center;

}



.gallery-item img{

width:100%;
height:260px;
object-fit:cover;
transition:.5s;

}



.gallery-item h3{

font-size:20px;
font-weight:700;
color:#2957A4;
padding:20px 15px;
margin:0;

}



.gallery-item:hover{

transform:translateY(-8px);
box-shadow:0 25px 55px rgba(0,0,0,.15);

}



.gallery-item:hover img{

transform:scale(1.08);

}



.gallery-item:hover h3{

color:#EE8102;

}




/* TABLET */

@media(max-width:991px){

.gallery-grid{

grid-template-columns:repeat(2,1fr);

}

}



/* MOBILE */

@media(max-width:576px){

.gallery-grid{

grid-template-columns:1fr;

}


.product-gallery h2{

font-size:28px;

}


.gallery-item img{

height:230px;

}

}
.ss-information{

padding:80px 0;
background:#f7f9fc;

}


.info-box{

background:#fff;
padding:45px;
border-radius:20px;
margin-bottom:35px;
box-shadow:0 15px 40px rgba(0,0,0,.08);
border:1px solid #edf2f8;

}



.info-box h2{

font-size:32px;
font-weight:800;
color:#2957A4;
margin-bottom:25px;
position:relative;
padding-left:18px;

}


.info-box h2:before{

content:"";
position:absolute;
left:0;
top:7px;
height:35px;
width:6px;
background:#EE8102;
border-radius:20px;

}



.info-box p{

font-size:16px;
line-height:1.9;
color:#666;
text-align:justify;

}



/* PROCESS */


.process-list{

display:grid;
grid-template-columns:repeat(3,1fr);
gap:25px;
margin-top:35px;

}


.process-list div{

background:#f8fbff;
padding:25px;
border-radius:15px;
border-left:5px solid #2957A4;
transition:.35s;

}


.process-list strong{

font-size:35px;
color:#EE8102;

}


.process-list h3{

font-size:20px;
color:#2957A4;
margin:10px 0;

}



.process-list div:hover{

transform:translateY(-8px);
background:#2957A4;
color:#fff;

}


.process-list div:hover h3,
.process-list div:hover p,
.process-list div:hover strong{

color:#fff;

}



/* QUALITY */


.quality-list{

display:grid;
grid-template-columns:repeat(2,1fr);
gap:15px;
padding:0;

}


.quality-list li{

list-style:none;
background:#edf4ff;
padding:15px 20px;
border-radius:10px;
font-weight:600;
color:#2957A4;

}


.quality-list li:before{

content:"✓";
color:#EE8102;
font-weight:bold;
margin-right:10px;

}




@media(max-width:991px){

.process-list{

grid-template-columns:repeat(2,1fr);

}

}



@media(max-width:576px){

.info-box{

padding:25px;

}


.info-box h2{

font-size:24px;

}


.process-list,
.quality-list{

grid-template-columns:1fr;

}

}