/* =========================================================
   INNER PAGE COMMON CSS
   FILE: inner-page.css
========================================================= */

/* =========================================================
   PAGE LAYOUT
========================================================= */

.inner-page{
    background:#f5f7fb;
    overflow:hidden;
}

.section-padding{
    padding:100px 0;
}

.container{
    width:92%;
    max-width:1400px;
    margin:auto;
}

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

.page-hero{

    position:relative;

    min-height:520px;

    display:flex;
    align-items:center;

    overflow:hidden;

    background-size:cover;
    background-position:center;

}

.page-hero::before{

    content:'';

    position:absolute;

    inset:0;

    background:
    linear-gradient(
        90deg,
        rgba(0,0,0,.88) 0%,
        rgba(0,0,0,.72) 35%,
        rgba(0,0,0,.28) 100%
    );

}

.page-hero-content{

    position:relative;

    z-index:2;

    max-width:760px;

}

.page-hero-subtitle{

    display:inline-block;

    color:#15B012;

    font-size:15px;

    font-weight:700;

    letter-spacing:1px;

    text-transform:uppercase;

    margin-bottom:24px;

}

.page-hero-title{

    font-size:78px;

    line-height:1.02;

    font-weight:700;

    color:#fff;

    margin-bottom:28px;

}

.page-hero-description{

    max-width:720px;

    color:#e5e7eb;

    font-size:20px;

    line-height:1.9;

}

.page-breadcrumb{

    position:absolute;

    left:0;

    bottom:34px;

    width:100%;

    z-index:2;

}

.page-breadcrumb .container{

    color:#fff;

    font-size:14px;

}

.page-breadcrumb a{

    color:#fff;

    text-decoration:none;

}

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

.section-title{

    margin-bottom:60px;

}

.section-title.center{

    text-align:center;

}

.section-subtitle{

    display:inline-block;

    color:#15B012;

    font-size:15px;

    font-weight:700;

    letter-spacing:1px;

    text-transform:uppercase;

    margin-bottom:16px;

}

.section-title h2{

    font-size:52px;

    line-height:1.15;

    color:#111827;

    margin-bottom:18px;

}

.section-title p{

    max-width:760px;

    color:#64748b;

    line-height:1.9;

    font-size:17px;

}

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

.primary-btn{

    height:56px;

    padding:0 34px;

    border-radius:14px;

    background:#15B012;

    color:#fff;

    display:inline-flex;

    align-items:center;
    justify-content:center;

    text-decoration:none;

    font-size:15px;

    font-weight:600;

    transition:.3s ease;

}

.primary-btn:hover{

    background:#11940F;

}

.secondary-btn{

    height:56px;

    padding:0 34px;

    border-radius:14px;

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

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

    color:#fff;

    display:inline-flex;

    align-items:center;
    justify-content:center;

    text-decoration:none;

    font-size:15px;

    font-weight:600;

    backdrop-filter:blur(10px);

    transition:.3s ease;

}

.secondary-btn:hover{

    background:#fff;

    color:#111827;

}

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

.white-box{

    background:#fff;

    border-radius:28px;

    padding:40px;

    box-shadow:
    0 10px 30px rgba(0,0,0,.05);

}

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

.about-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:70px;

    align-items:center;

}

.about-image img{

    width:100%;

    display:block;

}

.about-content h2{

    font-size:52px;

    line-height:1.15;

    color:#111827;

    margin-bottom:24px;

}

.about-content p{

    color:#64748b;

    line-height:1.9;

    margin-bottom:18px;

}

.about-feature-grid{

    display:grid;

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

    gap:20px;

    margin-top:35px;

}

.feature-item{

    display:flex;

    align-items:center;

    gap:14px;

    background:#fff;

    border-radius:18px;

    padding:18px 20px;

    box-shadow:
    0 8px 25px rgba(0,0,0,.04);

}

.feature-item i{

    width:48px;

    height:48px;

    border-radius:50%;

    background:#15B012;

    color:#fff;

    display:flex;

    align-items:center;
    justify-content:center;

    font-size:18px;

}

.feature-item span{

    font-weight:600;

    color:#111827;

}

.why-section{

    background:#fff;

}

.why-grid{

    display:grid;

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

    gap:28px;

}

.why-card{

    background:#f8fafc;

    border-radius:24px;

    padding:35px;

    transition:.3s ease;

}

.why-card:hover{

    transform:translateY(-6px);

}

.why-icon{

    width:72px;

    height:72px;

    border-radius:20px;

    background:#15B012;

    color:#fff;

    display:flex;

    align-items:center;
    justify-content:center;

    font-size:28px;

    margin-bottom:24px;

}

.why-card h3{

    font-size:24px;

    color:#111827;

    margin-bottom:16px;

}

.why-card p{

    color:#64748b;

    line-height:1.9;

}

.mission-grid{

    display:grid;

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

    gap:28px;

}

.mission-card{

    background:#fff;

    border-radius:24px;

    padding:40px;

    text-align:center;

    box-shadow:
    0 10px 30px rgba(0,0,0,.05);

}

.mission-icon{

    width:82px;

    height:82px;

    border-radius:50%;

    background:#15B012;

    color:#fff;

    display:flex;

    align-items:center;
    justify-content:center;

    font-size:30px;

    margin:auto auto 24px;

}

.mission-card h3{

    font-size:28px;

    margin-bottom:18px;

    color:#111827;

}

.mission-card p{

    color:#64748b;

    line-height:1.9;

}

.stats-section{

    padding:90px 0;

    background:#111827;

}

.stats-grid{

    display:grid;

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

    gap:30px;

}

.stat-box{

    text-align:center;

}

.stat-box h2{

    font-size:68px;

    color:#15B012;

    margin-bottom:10px;

}

.stat-box p{

    color:#fff;

    font-size:18px;

}

.about-cta{

    padding:100px 0;

}

.cta-box{

    background:#111827;

    border-radius:34px;

    padding:80px;

    text-align:center;

}

.cta-box h2{

    font-size:52px;

    color:#fff;

    margin-bottom:24px;

}

.cta-box p{

    max-width:760px;

    margin:auto auto 35px;

    color:#cbd5e1;

    line-height:1.9;

}

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

.contact-section{

    padding:100px 0;

}

.contact-wrapper{

    display:grid;

    grid-template-columns:1.1fr .9fr;

    gap:35px;

    align-items:start;

}

.contact-form,
.contact-info{

    background:#fff;

    border-radius:28px;

    padding:40px;

    box-shadow:
    0 10px 30px rgba(0,0,0,.05);

}

.form-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:18px;

    margin-bottom:18px;

}

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

    width:100%;

    border:1px solid #d1d5db;

    border-radius:14px;

    padding:16px 18px;

    outline:none;

    font-size:15px;

    background:#fff;

}

.contact-form textarea{

    height:180px;

    resize:none;

    margin-bottom:24px;

}

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

    border-color:#15B012;

}

.contact-info h3{

    font-size:34px;

    margin-bottom:35px;

    color:#111827;

}

.info-box{

    display:flex;

    gap:18px;

    margin-bottom:28px;

}

.info-icon{

    width:58px;

    height:58px;

    border-radius:16px;

    background:#15B012;

    color:#fff;

    display:flex;

    align-items:center;
    justify-content:center;

    font-size:22px;

    flex-shrink:0;

}

.info-box h4{

    font-size:20px;

    margin-bottom:6px;

    color:#111827;

}

.info-box p,
.info-box a{

    color:#64748b;

    line-height:1.8;

    text-decoration:none;

}

.map-section{

    margin-top:50px;

}

.map-section iframe{

    width:100%;

    height:480px;

    border:0;

    border-radius:28px;

}

/* =========================================================
   CUSTOMER SUPPORT
========================================================= */

.support-main{

    padding:100px 0;

}

.support-box{

    background:#fff;

    border-radius:28px;

    padding:40px;

    box-shadow:
    0 10px 30px rgba(0,0,0,.05);

    margin-bottom:60px;

}

.support-title{

    text-align:center;

    margin-bottom:40px;

}

.support-title h2{

    font-size:46px;

    color:#111827;

    margin-bottom:16px;

}

.support-title p{

    color:#64748b;

    line-height:1.9;

}

.support-form-grid{

    display:grid;

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

    gap:20px;

    margin-bottom:20px;

}

.support-form-group{

    display:flex;

    flex-direction:column;

}

.support-form-group label{

    font-size:14px;

    font-weight:600;

    color:#111827;

    margin-bottom:10px;

}

.support-form-group input,
.support-form-group textarea,
.support-form-group select{

    width:100%;

    height:54px;

    border:1px solid #d1d5db;

    border-radius:14px;

    padding:0 16px;

    font-size:15px;

    outline:none;

    background:#fff;

}

.support-form-group textarea{

    height:140px;

    resize:none;

    padding:16px;

}

.full-width{

    grid-column:1/-1;

}

.issue-grid{

    display:grid;

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

    gap:14px;

    margin-top:24px;

}

.issue-item{

    display:flex;

    align-items:center;

    gap:10px;

    padding:14px;

    background:#f8fafc;

    border:1px solid #e5e7eb;

    border-radius:14px;

}

.state-tabs{

    display:flex;

    gap:12px;

    flex-wrap:wrap;

    margin-bottom:30px;

}

.state-tab{

    padding:12px 24px;

    border-radius:50px;

    background:#fff;

    border:1px solid #e5e7eb;

    font-size:14px;

    font-weight:600;

    cursor:pointer;

    transition:.3s ease;

}

.state-tab.active,
.state-tab:hover{

    background:#111827;

    border-color:#111827;

    color:#fff;

}

.service-table{

    background:#fff;

    border-radius:28px;

    overflow:hidden;

    box-shadow:
    0 10px 30px rgba(0,0,0,.05);

}

.service-row{

    display:grid;

    grid-template-columns:1.3fr 1fr 1.2fr 180px;

    gap:20px;

    align-items:center;

    padding:28px 30px;

    border-bottom:1px solid #e5e7eb;

}

.service-row:last-child{

    border-bottom:none;

}

.service-city h4{

    font-size:24px;

    margin-bottom:8px;

    color:#111827;

}

.service-city p,
.service-phone,
.service-email{

    color:#64748b;

    line-height:1.8;

}

.direction-btn{

    height:50px;

    border-radius:14px;

    background:#111827;

    color:#fff;

    display:flex;

    align-items:center;
    justify-content:center;

    text-decoration:none;

    font-weight:600;

    transition:.3s ease;

}

.direction-btn:hover{

    background:#15B012;

}

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

@media(max-width:1200px){

    .why-grid{

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

    }

    .mission-grid{

        grid-template-columns:1fr;

    }

}

@media(max-width:992px){

    .about-grid,
    .contact-wrapper,
    .support-form-grid,
    .issue-grid{

        grid-template-columns:1fr;

    }

    .stats-grid{

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

    }

    .service-row{

        grid-template-columns:1fr;

    }

    .page-hero-title{

        font-size:58px;

    }

}

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

@media(max-width:768px){

    .section-padding,
    .contact-section,
    .support-main,
    .about-cta{

        padding:70px 0;

    }

    .page-hero{

        min-height:auto;

        padding:100px 0;

    }

    .page-hero-title{

        font-size:42px;

    }

    .page-hero-description{

        font-size:16px;

    }

    .page-breadcrumb{

        position:relative;

        bottom:auto;

        margin-top:30px;

    }

    .section-title h2,
    .about-content h2,
    .cta-box h2{

        font-size:34px;

    }

    .about-feature-grid,
    .why-grid,
    .stats-grid{

        grid-template-columns:1fr;

    }

    .white-box,
    .contact-form,
    .contact-info,
    .support-box,
    .cta-box{

        padding:28px;

    }

    .form-grid{

        grid-template-columns:1fr;

    }

    .map-section iframe{

        height:320px;

    }

    .stat-box h2{

        font-size:48px;

    }

}