/* ==============================
   ROOFING PERLMAN
   Main Stylesheet
   ============================== */


:root {

    --green:#8fcf9b;

    --green-dark:#4f9f63;

    --green-light:#dff5e3;

    --white:#ffffff;

    --black:#101510;

    --gray:#6c756d;

    --glass:
    rgba(255,255,255,0.55);

    --border:
    rgba(255,255,255,0.7);

}



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


* {

    margin:0;

    padding:0;

    box-sizing:border-box;

}



html {

    scroll-behavior:smooth;

}



body {

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

    background:#f7fbf8;

    color:var(--black);

    line-height:1.6;

}



img {

    max-width:100%;

    display:block;

}



a {

    text-decoration:none;

    color:inherit;

}



.container {

    width:90%;

    max-width:1200px;

    margin:auto;

}



/* ==============================
   HEADER
   ============================== */


.header {

    position:fixed;

    top:0;

    width:100%;

    z-index:999;

    background:

    rgba(247,251,248,.85);

    backdrop-filter:blur(15px);

    border-bottom:

    1px solid rgba(0,0,0,.05);

}



.nav-container {

    height:90px;

    display:flex;

    align-items:center;

    justify-content:space-between;

}



.logo {

    font-size:28px;

    font-weight:800;

}



.logo span {

    color:var(--green-dark);

}



.nav {

    display:flex;

    gap:30px;

}



.nav a {

    font-weight:600;

    transition:.3s;

}



.nav a:hover {

    color:var(--green-dark);

}



.nav-call {

    background:var(--green-dark);

    color:white;

    padding:14px 25px;

    border-radius:50px;

    font-weight:700;

}





/* ==============================
   BUTTONS
   ============================== */


.btn-primary {

    background:var(--green-dark);

    color:white;

    padding:16px 32px;

    border-radius:50px;

    font-weight:700;

    display:inline-block;

    transition:.3s;

}



.btn-primary:hover {

    transform:translateY(-3px);

}



.btn-secondary {

    border:2px solid var(--green-dark);

    padding:14px 30px;

    border-radius:50px;

    font-weight:700;

    display:inline-block;

}





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


.hero {

    padding-top:150px;

    padding-bottom:90px;

}



.hero-grid {

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:60px;

    align-items:center;

}



.hero-label {

    display:inline-block;

    background:var(--green-light);

    color:var(--green-dark);

    padding:8px 18px;

    border-radius:50px;

    font-weight:700;

    margin-bottom:25px;

}



.hero h1 {

    font-size:60px;

    line-height:1.1;

    margin-bottom:25px;

}



.hero p {

    color:var(--gray);

    font-size:18px;

    max-width:550px;

    margin-bottom:35px;

}



.hero-buttons {

    display:flex;

    gap:20px;

    margin-bottom:45px;

}



.hero-info {

    display:flex;

    gap:40px;

}



.hero-info strong {

    display:block;

    font-size:32px;

    color:var(--green-dark);

}



.hero-info span {

    color:var(--gray);

}





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


.hero-image {

    position:relative;

}



.glass-image-card {

    padding:20px;

    background:

    var(--glass);

    border:

    1px solid var(--border);

    backdrop-filter:blur(20px);

    border-radius:35px;

}



.glass-image-card img {

    height:620px;

    width:100%;

    object-fit:cover;

    border-radius:25px;

}



.floating-card {

    position:absolute;

    bottom:35px;

    left:-30px;

    display:flex;

    align-items:center;

    gap:15px;

    background:

    rgba(255,255,255,.85);

    backdrop-filter:blur(15px);

    padding:20px;

    border-radius:20px;

    box-shadow:0 15px 40px rgba(0,0,0,.12);

}



.floating-card i {

    font-size:30px;

    color:var(--green-dark);

}





/* ==============================
   SECTIONS
   ============================== */


section {

    padding:90px 0;

}



.section-title {

    text-align:center;

    margin-bottom:60px;

}



.section-title span {

    color:var(--green-dark);

    font-weight:800;

}



.section-title h2 {

    font-size:42px;

    margin-top:10px;

}



/* ==============================
   INTRO
   ============================== */


.intro-grid {

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:40px;

}



.intro h2 {

    font-size:42px;

    margin-bottom:20px;

}



.intro p {

    color:var(--gray);

}



.glass-card {

    background:

    var(--glass);

    border:

    1px solid var(--border);

    backdrop-filter:blur(15px);

    border-radius:25px;

    padding:35px;

}
/* ==============================
   SERVICES
   ============================== */


.service-grid {

    display:grid;

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

    gap:30px;

}



.service-card {

    transition:.3s;

}



.service-card:hover {

    transform:translateY(-10px);

}



.service-card i {

    font-size:40px;

    color:var(--green-dark);

    margin-bottom:20px;

}



.service-card h3 {

    margin-bottom:12px;

    font-size:24px;

}



.service-card p {

    color:var(--gray);

}





/* ==============================
   TIMELINE PROCESS
   ============================== */


.timeline {

    max-width:850px;

    margin:auto;

    position:relative;

}



.timeline:before {

    content:"";

    position:absolute;

    left:30px;

    top:0;

    bottom:0;

    width:3px;

    background:var(--green);

}



.timeline-item {

    display:flex;

    gap:35px;

    margin-bottom:45px;

}



.timeline-number {

    min-width:65px;

    height:65px;

    border-radius:50%;

    background:var(--green-dark);

    color:white;

    display:flex;

    justify-content:center;

    align-items:center;

    font-weight:800;

    position:relative;

    z-index:2;

}



.timeline-content {

    flex:1;

    background:white;

    border-radius:25px;

    padding:30px;

    box-shadow:0 15px 40px rgba(0,0,0,.06);

}



.timeline-content h3 {

    margin-bottom:10px;

}





/* ==============================
   COUNTERS
   ============================== */


.stats {

    background:

    var(--green-light);

}



.stats-grid {

    display:grid;

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

    gap:25px;

}



.stat-box {

    text-align:center;

    background:white;

    padding:35px 20px;

    border-radius:25px;

}



.stat-box strong {

    display:block;

    color:var(--green-dark);

    font-size:45px;

}



.stat-box span {

    color:var(--gray);

}





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


.gallery-grid {

    display:grid;

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

    gap:25px;

}



.gallery-grid img {

    width:100%;

    height:320px;

    object-fit:cover;

    border-radius:25px;

    transition:.4s;

}



.gallery-grid img:hover {

    transform:scale(1.04);

}





/* ==============================
   TESTIMONIALS
   ============================== */


.reviews {

    background:#eff8f1;

}



.testimonial-slider {

    max-width:800px;

    margin:auto;

}



.testimonial {

    display:none;

    background:white;

    padding:45px;

    border-radius:30px;

    text-align:center;

}



.testimonial.active {

    display:block;

}



.testimonial p {

    font-size:20px;

    margin-bottom:25px;

}



.testimonial strong {

    color:var(--green-dark);

}





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


.faq-container {

    max-width:850px;

    margin:auto;

}



.faq-item {

    border-bottom:

    1px solid #ddd;

}



.faq-item button {

    width:100%;

    border:none;

    background:none;

    padding:25px 0;

    display:flex;

    justify-content:space-between;

    cursor:pointer;

    font-size:18px;

    font-weight:700;

}



.faq-answer {

    max-height:0;

    overflow:hidden;

    transition:.4s;

}



.faq-answer p {

    padding-bottom:20px;

    color:var(--gray);

}



.faq-item.active .faq-answer {

    max-height:200px;

}





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


.contact-box {

    text-align:center;

    background:

    linear-gradient(
    135deg,
    #dff5e3,
    #ffffff
    );

    padding:70px 30px;

    border-radius:35px;

}



.contact-box h2 {

    font-size:45px;

    margin-bottom:20px;

}



.contact-box p {

    color:var(--gray);

    margin-bottom:30px;

}



.contact-info {

    margin-top:35px;

}



.contact-info p {

    margin:10px;

}



.contact-info i {

    color:var(--green-dark);

    margin-right:10px;

}





/* ==============================
   FOOTER
   ============================== */


footer {

    background:#101510;

    color:white;

    padding:45px 0;

}



.footer-content {

    display:flex;

    justify-content:space-between;

    align-items:center;

}





/* ==============================
   FLOATING BUTTONS
   ============================== */


.floating-call {

    position:fixed;

    right:25px;

    bottom:90px;

    width:60px;

    height:60px;

    border-radius:50%;

    background:var(--green-dark);

    color:white;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:22px;

    z-index:1000;

}



.back-top {

    position:fixed;

    right:25px;

    bottom:25px;

    width:45px;

    height:45px;

    border:none;

    border-radius:50%;

    background:white;

    cursor:pointer;

    display:none;

}





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


@media(max-width:1000px){


.nav {

    display:none;

}



.hero-grid {

    grid-template-columns:1fr;

}



.hero h1 {

    font-size:45px;

}



.intro-grid {

    grid-template-columns:1fr;

}



.service-grid {

    grid-template-columns:1fr;

}



.stats-grid {

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

}



.gallery-grid {

    grid-template-columns:1fr;

}


}



@media(max-width:600px){


.hero-info {

    flex-direction:column;

    gap:15px;

}



.hero-buttons {

    flex-direction:column;

}



.stats-grid {

    grid-template-columns:1fr;

}



.timeline-item {

    gap:15px;

}



.section-title h2 {

    font-size:32px;

}



.contact-box h2 {

    font-size:32px;

}



.footer-content {

    flex-direction:column;

    gap:20px;

}



}