/* =====================================================
   PF & ESIC INSPECTION PAGE CSS
   PREMIUM BLUE CONSULTANCY THEME
===================================================== */


:root{

--primary-blue:#063970;
--dark-blue:#021b3a;
--blue:#0d63c7;
--light-blue:#eaf4ff;

--accent-blue:#1468d5;

--gold:#d4af37;

--white:#ffffff;
--black:#111827;

--text:#475569;

--shadow:
0 20px 50px rgba(6,57,112,.15);

--radius:20px;

}



/* =====================
COMMON
===================== */


*{

margin:0;
padding:0;
box-sizing:border-box;

}



body{

font-family:'Poppins',sans-serif;

color:var(--text);

background:#ffffff;

}



.container{

width:90%;

max-width:1200px;

margin:auto;

}



.section{

padding:90px 0;

}



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


.inspection-hero{


height:650px;


background:

linear-gradient(

90deg,

rgba(2,27,58,.95),

rgba(6,57,112,.85)

),

url('../assets/pf-inspection-bg.jpg');


background-size:cover;

background-position:center;


display:flex;

align-items:center;


position:relative;

overflow:hidden;

}




.inspection-hero:after{

content:"";

position:absolute;

bottom:-1px;

left:0;

width:100%;

height:100px;

background:white;

clip-path:polygon(
0 70%,
100% 0,
100% 100%,
0 100%
);

}




.hero-content{


position:relative;

z-index:2;

color:white;

max-width:750px;


}



.hero-tag{


display:inline-block;


color:#d4af37;


letter-spacing:2px;


font-size:14px;


font-weight:600;


margin-bottom:20px;


}



.hero-content h1{


font-family:'Playfair Display',serif;


font-size:55px;


line-height:1.2;


margin-bottom:25px;


}



.hero-content p{


font-size:18px;


line-height:1.8;


color:#e2e8f0;


margin-bottom:35px;


}



/* Buttons */


.hero-buttons{


display:flex;

gap:20px;


}




.btn-primary{


background:

linear-gradient(

135deg,

#063970,

#1468d5

);


color:white;


padding:15px 35px;


border-radius:50px;


text-decoration:none;


font-weight:600;


display:inline-block;


transition:.35s;


box-shadow:

0 12px 30px rgba(6,57,112,.35);


}



.btn-primary:hover{


transform:translateY(-5px);


}



.btn-outline{


border:2px solid white;


color:white;


padding:13px 32px;


border-radius:50px;


text-decoration:none;


transition:.3s;


}



.btn-outline:hover{


background:white;


color:#063970;


}




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


.heading-center{


text-align:center;


margin-bottom:55px;


}




.heading-center span,
.section-label{


color:#1468d5;


font-weight:600;


letter-spacing:2px;


font-size:14px;


}




.heading-center h2,
.section h2{


font-family:'Playfair Display',serif;


font-size:40px;


color:var(--primary-blue);


margin:15px 0;


}



.heading-center p{


max-width:700px;


margin:auto;


line-height:1.8;


}





/* =====================
TWO COLUMN
===================== */



.two-column{


display:grid;


grid-template-columns:1fr 1fr;


gap:60px;


align-items:center;


}





.two-column p{


line-height:1.8;


margin-bottom:20px;


}





.info-card{


background:white;


padding:35px;


border-radius:22px;


box-shadow:var(--shadow);


border-top:4px solid var(--blue);


}





.icon-box{


width:65px;

height:65px;


background:#eaf4ff;


color:#1468d5;


display:flex;


align-items:center;


justify-content:center;


font-size:28px;


border-radius:18px;


margin-bottom:18px;


}




.info-card h3{


color:var(--primary-blue);


margin-bottom:10px;


}




.line{


height:1px;


background:#dbeafe;


margin:25px 0;


}
/* =====================
BLUE SERVICE SECTION
===================== */


.blue-section{


background:

linear-gradient(
135deg,
#eaf4ff,
#f8fbff
);


padding:90px 0;


}




.service-grid{


display:grid;


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


gap:30px;


}




.service-card{


background:white;


padding:35px;


border-radius:22px;


text-align:center;


box-shadow:var(--shadow);


transition:.35s;


border:1px solid #e2e8f0;


}



.service-card:hover{


transform:translateY(-12px);


box-shadow:

0 25px 60px rgba(6,57,112,.22);


}




.service-card i{


font-size:42px;


color:#1468d5;


margin-bottom:20px;


}



.service-card h3{


color:var(--primary-blue);


margin-bottom:15px;


font-size:20px;


}



.service-card p{


line-height:1.7;


font-size:15px;


}






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


.process-grid{


display:grid;


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


gap:25px;


}





.process-card{


background:white;


padding:30px;


border-radius:20px;


box-shadow:var(--shadow);


border-bottom:4px solid #1468d5;


transition:.3s;


}




.process-card:hover{


transform:translateY(-8px);


}




.step{


width:55px;


height:55px;


background:

linear-gradient(
135deg,
#063970,
#1468d5
);


color:white;


display:flex;


align-items:center;


justify-content:center;


border-radius:50%;


font-weight:700;


font-size:20px;


margin-bottom:20px;


}




.process-card h3{


color:var(--primary-blue);


margin-bottom:12px;


}




.process-card p{


line-height:1.7;


}





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



.blue-light-section{


background:#f5f9ff;


padding:90px 0;


}





.document-grid{


display:grid;


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


gap:25px;


}




.document-card{


background:white;


padding:30px;


border-radius:20px;


box-shadow:var(--shadow);


transition:.3s;


border:1px solid #dbeafe;


}



.document-card:hover{


transform:translateY(-8px);


}




.document-card i{


font-size:38px;


color:#1468d5;


margin-bottom:20px;


}




.document-card h3{


color:var(--primary-blue);


margin-bottom:15px;


}




.document-card ul{


padding:0;


}




.document-card li{


list-style:none;


margin:12px 0;


position:relative;


padding-left:20px;


}




.document-card li:before{


content:"✓";


position:absolute;


left:0;


color:#1468d5;


font-weight:bold;


}






/* =====================
INSPECTION ISSUES
===================== */



.issue-list{


margin-top:25px;


}




.issue-item{


display:flex;


gap:15px;


align-items:center;


margin:18px 0;


font-size:16px;


}




.issue-item i{


color:#dc2626;


font-size:20px;


}





.highlight-box{


background:


linear-gradient(
135deg,
#063970,
#1468d5
);


color:white;


padding:55px;


border-radius:28px;


text-align:center;


box-shadow:

0 20px 50px rgba(6,57,112,.35);


}





.highlight-box h3{


font-size:30px;


}



.highlight-number{


font-size:60px;


font-weight:800;


color:#d4af37;


margin:20px;


}







/* =====================
WHY CHOOSE US
===================== */



.dark-blue-section{


background:

linear-gradient(
135deg,
#021b3a,
#063970
);


padding:90px 0;


}





.white h2,
.white span{


color:white;


}





.choose-grid{


display:grid;


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


gap:30px;


}




.choose-card{


background:

rgba(255,255,255,.08);


padding:35px;


color:white;


border-radius:22px;


text-align:center;


border:1px solid rgba(255,255,255,.15);


backdrop-filter:blur(10px);


transition:.3s;


}





.choose-card:hover{


transform:translateY(-10px);


background:

rgba(255,255,255,.15);


}





.choose-card i{


font-size:42px;


color:#d4af37;


margin-bottom:20px;


}





.choose-card h3{


margin-bottom:15px;


}





.choose-card p{


color:#dbeafe;


line-height:1.7;


}






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



.stats-section{


padding:80px 0;


background:white;


}





.stats-grid{


display:grid;


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


gap:30px;


}





.stat-box{


text-align:center;


padding:25px;


border-radius:18px;


background:#f8fbff;


}





.stat-box h2{


font-size:48px;


color:#063970;


margin-bottom:10px;


}





.stat-box p{


font-weight:600;


color:#475569;


}
/* =====================
WHY CHOOSE SECTION
===================== */


.dark-blue-section{

background:

linear-gradient(
135deg,
#061b41,
#0a3d91
);

padding:90px 0;

}



.white h2,
.white span{

color:white;

}




.choose-grid{


display:grid;

grid-template-columns:

repeat(3,1fr);

gap:30px;


}



.choose-card{


background:

rgba(255,255,255,.08);


padding:40px 30px;

border-radius:25px;

color:white;

text-align:center;

border:

1px solid rgba(255,255,255,.1);


transition:.3s;


}



.choose-card:hover{


transform:translateY(-10px);

background:

rgba(255,255,255,.15);


}




.choose-card i{


font-size:42px;

color:#ffd700;

margin-bottom:20px;


}




.choose-card h3{


margin-bottom:15px;

}




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


.stats-section{


padding:80px 0;

background:#f8fbff;


}




.stats-grid{


display:grid;

grid-template-columns:

repeat(4,1fr);


gap:25px;


}



.stat-box{


background:white;

padding:35px 20px;

text-align:center;


border-radius:20px;


box-shadow:

0 10px 35px rgba(0,0,0,.08);


}



.stat-box h2{


font-size:45px;

color:var(--primary-blue);


}



.stat-box p{


font-weight:600;

color:#555;

}



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


.faq-wrapper{


max-width:900px;

margin:auto;


}



.faq-item{


border-bottom:

1px solid #ddd;


}



.faq-question{


width:100%;


padding:22px;


border:none;


background:white;


display:flex;


justify-content:space-between;


cursor:pointer;


font-size:17px;


font-weight:600;


color:var(--primary-blue);


}




.faq-answer{


display:none;


padding:

0 22px 25px;


line-height:1.8;


}



.faq-item.active .faq-answer{


display:block;


}





/* =====================
FINAL CTA
===================== */


.final-cta{


background:

linear-gradient(
135deg,
#061b41,
#1565c0
);


padding:100px 0;


text-align:center;


color:white;


}




.cta-content h2{


font-family:'Playfair Display',serif;


font-size:48px;


margin-bottom:20px;


}



.cta-content p{


max-width:750px;

margin:auto;


line-height:1.8;


color:#e5e7eb;


}



.cta-buttons{


display:flex;


justify-content:center;


gap:20px;


margin-top:35px;


}



.btn-white{


background:white;


color:var(--primary-blue);


padding:15px 35px;


border-radius:50px;


font-weight:600;


text-decoration:none;


transition:.3s;


}



.btn-white:hover{


transform:translateY(-4px);


}




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


.contact-section{


padding:90px 0;


background:#f8fafc;


}



.contact-grid{


display:grid;


grid-template-columns:

1fr 1fr;


gap:50px;


}




.contact-box{


display:flex;


gap:20px;


margin:25px 0;


align-items:center;


}



.contact-box i{


font-size:28px;


color:var(--secondary-blue);


}



.contact-form{


background:white;


padding:40px;


border-radius:25px;


box-shadow:var(--shadow);


}



.form-row{


display:grid;


grid-template-columns:

1fr 1fr;


gap:20px;


}



.contact-form input,
.contact-form select,
.contact-form textarea{


width:100%;


padding:15px;


border-radius:12px;


border:1px solid #ddd;


margin-bottom:20px;


font-family:inherit;


outline:none;


}



.contact-form input:focus,
.contact-form textarea:focus{


border-color:var(--secondary-blue);


box-shadow:

0 0 0 3px rgba(21,101,192,.15);


}



.submit-btn{


width:100%;


border:none;


cursor:pointer;


}





/* =====================
FLOATING WHATSAPP
===================== */


.floating-whatsapp{


position:fixed;


right:25px;


bottom:90px;


z-index:999;


}



.floating-whatsapp a{


width:60px;


height:60px;


background:#25D366;


border-radius:50%;


display:flex;


align-items:center;


justify-content:center;


color:white;


font-size:30px;


box-shadow:

0 10px 25px rgba(0,0,0,.25);


}





/* BACK TO TOP */


.back-top{


position:fixed;


right:25px;


bottom:20px;


width:45px;


height:45px;


border:none;


background:var(--primary-blue);


color:white;


border-radius:50%;


cursor:pointer;


z-index:999;


}




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


@media(max-width:992px){


.hero-content h1{

font-size:42px;

}


.two-column,
.contact-grid{


grid-template-columns:1fr;


}



.service-grid,
.choose-grid{


grid-template-columns:1fr 1fr;


}



.document-grid{


grid-template-columns:1fr 1fr;


}



.process-grid{


grid-template-columns:1fr 1fr;


}



.stats-grid{


grid-template-columns:1fr 1fr;


}


}




@media(max-width:600px){



.inspection-hero{


height:600px;


}



.hero-content h1{


font-size:32px;


}



.hero-content p{


font-size:16px;


}



.hero-buttons{


flex-direction:column;


}



.service-grid,
.choose-grid,
.document-grid,
.process-grid,
.stats-grid{


grid-template-columns:1fr;


}



.form-row{


grid-template-columns:1fr;


}



.heading-center h2,
.section h2{


font-size:30px;


}



.cta-content h2{


font-size:32px;


}



.cta-buttons{


flex-direction:column;


}



}