/*
=====================================================
POWER PROGRESS
Premium Corporate Website CSS
Version 1.2 FINAL
=====================================================
*/


/* ==========================
   Root Variables
========================== */


:root{

    --primary-color:#136CAD;
    --secondary-color:#F49221;

    --dark-color:#0B1220;
    --dark-bg:#111827;

    --text-color:#333333;
    --light-text:#666666;

    --white:#ffffff;
    --light-bg:#f5f9fc;


    --border-radius:16px;


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


    --transition:
    all .35s ease;

}






/* ==========================
   Reset
========================== */


*{

margin:0;
padding:0;

box-sizing:border-box;

font-family:
'Inter',
Arial,
sans-serif;

}



html{

scroll-behavior:smooth;

}



body{

background:
var(--white);

color:
var(--text-color);

line-height:1.7;

overflow-x:hidden;

}



img{

max-width:100%;

height:auto;

display:block;

}



a{

text-decoration:none;

color:inherit;

}



ul{

list-style:none;

}



button,
input,
textarea,
select{

font-family:inherit;

}








/* ==========================
   Container
========================== */


.container{

width:90%;

max-width:1200px;

margin:auto;

}



.section{

padding:90px 0;

}








/* ==========================
   Loader
========================== */


.loader{

position:fixed;

inset:0;

background:white;

display:flex;

align-items:center;

justify-content:center;

z-index:99999;

}



.loader-content{

text-align:center;

}



.loader-content img{

width:120px;

margin:auto;

}



.loader-line{

width:150px;

height:4px;

margin:25px auto 0;

background:

linear-gradient(
90deg,
var(--primary-color),
var(--secondary-color)
);

}








/* ==========================
   Scroll Progress
========================== */


.scroll-progress{

position:fixed;

top:0;

left:0;

height:4px;

width:0;

background:

linear-gradient(
90deg,
var(--primary-color),
var(--secondary-color)
);

z-index:9999;

}








/* ==========================
   Header Navbar
========================== */


.header{

position:sticky;

top:0;

z-index:1000;

background:

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

backdrop-filter:blur(15px);

box-shadow:

0 5px 20px rgba(0,0,0,.05);

}



.navbar{

height:80px;

display:flex;

align-items:center;

justify-content:space-between;

}



.logo img{

width:260px;

}



.nav-menu{

display:flex;

align-items:center;

gap:30px;

}



.nav-menu a{

font-weight:600;

position:relative;

}



.nav-menu a::after{

content:"";

position:absolute;

bottom:-8px;

left:0;

height:3px;

width:0;

background:

var(--secondary-color);

transition:.3s;

}



.nav-menu a:hover::after,
.nav-menu .active::after{

width:100%;

}



.nav-actions{

display:flex;

gap:10px;

}



.nav-actions button{

width:42px;

height:42px;

border:none;

border-radius:50%;

background:
var(--light-bg);

cursor:pointer;

}








/* ==========================
   Hero
========================== */


.hero{

padding:100px 0;

background:

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

}



.hero-wrapper{

display:grid;

grid-template-columns:

1fr 1fr;

gap:50px;

align-items:center;

}



.hero-content h1{

font-size:55px;

line-height:1.15;

font-weight:800;

color:

var(--dark-color);

}



.hero-content p{

font-size:18px;

margin:25px 0;

color:

var(--light-text);

}



.hero-image img{

border-radius:25px;

box-shadow:

var(--shadow);

}








/* ==========================
   Buttons
========================== */


.btn{

position:relative;

overflow:hidden;

display:inline-flex;

align-items:center;

justify-content:center;

padding:

14px 32px;

border-radius:50px;

font-weight:700;

transition:

var(--transition);

cursor:pointer;

}



.primary-btn{

background:

var(--primary-color);

color:white;

}



.primary-btn:hover{

background:

var(--secondary-color);

transform:

translateY(-5px);

}



.secondary-btn{

border:

2px solid var(--primary-color);

color:

var(--primary-color);

}








/* ==========================
   Page Banner
========================== */


.page-banner{

padding:90px 0;

text-align:center;

background:

linear-gradient(
135deg,
var(--primary-color),
#0b4d80
);

color:white;

}



.page-banner h1{

font-size:45px;

font-weight:800;

}



.page-banner p{

margin-top:10px;

}








/* ==========================
   Section Title
========================== */


.section-title{

text-align:center;

margin-bottom:50px;

}



.section-title h2{

font-size:38px;

font-weight:800;

color:var(--dark-color);

}



.section-title p{

color:#666;

font-size:18px;

}








/* ==========================
   Services Cards
========================== */


.service-grid{

display:grid;

grid-template-columns:

repeat(3,1fr);

gap:30px;

}



.service-card{

padding:35px;

background:white;

border-radius:

var(--border-radius);

box-shadow:

var(--shadow);

transition:

var(--transition);

}



.service-card:hover{

transform:

translateY(-12px);

}



.service-card i{

font-size:40px;

color:

var(--primary-color);

margin-bottom:20px;

}








/* ==========================
   Products
========================== */


.product-grid{

display:grid;

grid-template-columns:

repeat(3,1fr);

gap:30px;

}



.product-card{

padding:25px;

background:white;

border-radius:20px;

box-shadow:

var(--shadow);

transition:.3s;

}



.product-card:hover{

transform:

translateY(-10px);

}



.product-card img{

height:220px;

width:100%;

object-fit:contain;

}








/* ==========================
   Filters
========================== */


.product-filter,
.project-filter{

display:flex;

justify-content:center;

flex-wrap:wrap;

gap:15px;

margin-bottom:40px;

}



.filter-btn{

padding:10px 25px;

border-radius:50px;

border:none;

background:

var(--light-bg);

cursor:pointer;

font-weight:600;

}



.filter-btn.active,
.filter-btn:hover{

background:

var(--primary-color);

color:white;

}








/* ==========================
   Projects
========================== */


.project-grid{

display:grid;

grid-template-columns:

repeat(3,1fr);

gap:25px;

}



.project-item{

    background:#fff;

    border-radius:20px;

    overflow:hidden;

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

    transition:.35s;

}

.project-item:hover{

    transform:translateY(-8px);

    box-shadow:0 20px 45px rgba(0,0,0,.12);

}

.project-item img{

    width:100%;

    height:260px;

    object-fit:cover;

    transition:.4s;

}

.project-item:hover img{

    transform:scale(1.05);

}

.project-content{

    padding:20px;

}

.project-content h3{

    font-size:22px;

    color:var(--dark-color);

    margin-bottom:8px;

    font-weight:700;

}

.project-content p{

    font-size:15px;

    color:var(--light-text);

    line-height:1.7;

}








/* ==========================
   Contact
========================== */


.contact-wrapper{

display:grid;

grid-template-columns:

1fr 1fr;

gap:50px;

}



.contact-box{

display:flex;

gap:20px;

margin-bottom:25px;

}



.contact-box i{

font-size:30px;

color:

var(--primary-color);

}



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

width:100%;

padding:15px;

margin-bottom:15px;

border:

1px solid #ddd;

border-radius:10px;

}



.contact-form button{

border:none;

}



.map iframe{

width:100%;

height:450px;

border:0;

border-radius:20px;

}








/* ==========================
   Contact CTA
========================== */


.contact-cta{

padding:80px 0;

text-align:center;

background:

var(--primary-color);

color:white;

}



.contact-cta h2{

font-size:38px;

margin-bottom:20px;

}








/* ==========================
   Footer
========================== */


.footer{

padding:50px 0;

background:

var(--dark-color);

color:white;

text-align:center;

}



.footer h3{

font-size:28px;

margin-bottom:10px;

}








/* ==========================
   WhatsApp
========================== */


.whatsapp-btn{

position:fixed;

right:25px;

bottom:95px;

width:60px;

height:60px;

border-radius:50%;

background:#25D366;

color:white;

display:flex;

align-items:center;

justify-content:center;

font-size:30px;

z-index:999;

}








/* ==========================
   Scroll Top
========================== */

.scroll-top {
    position: fixed;
    right: 25px;
    bottom: 25px;
    width: 55px;
    height: 55px;
    border: none;
    border-radius: 50%;
    background: var(--primary-color);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 999;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .2);
    transition: .3s;
}

.scroll-top i {
    font-size: 22px;
    color: #fff;
}

.scroll-top:hover {
    transform: translateY(-5px);
    background: var(--secondary-color);
}








/* ==========================
   Dark Mode
========================== */


body.dark{

background:

#0B1220;

color:white;

}



body.dark .header{

background:

rgba(11,18,32,.9);

}



body.dark .service-card,
body.dark .product-card{

background:

#111827;

color:white;

}



body.dark .page-banner{

background:

#111827;

}



body.dark input,
body.dark textarea,
body.dark select{

background:#1f2937;

color:white;

border-color:#374151;

}



body.dark h1,
body.dark h2,
body.dark h3{

color:white;

}

.testimonial-card{

background:white;

padding:35px;

border-radius:20px;

box-shadow:var(--shadow);

text-align:center;

max-width:700px;

margin:auto;

}



.testimonial-card img{

width:90px;

height:90px;

border-radius:50%;

object-fit:cover;

margin:0 auto 20px;

}



.testimonial-card span{

color:var(--primary-color);

font-weight:600;

}



.slider-buttons{

display:flex;

justify-content:center;

gap:15px;

margin-top:30px;

}



.slider-buttons button{

width:45px;

height:45px;

border:none;

border-radius:50%;

background:var(--primary-color);

color:white;

cursor:pointer;

}

.counter-grid{

display:grid;

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

gap:25px;

}



.counter-box{

background:white;

padding:35px 20px;

border-radius:20px;

box-shadow:var(--shadow);

text-align:center;

}



.counter-box h2{

font-size:45px;

color:var(--primary-color);

font-weight:800;

}



.counter-box p{

color:var(--light-text);

font-weight:600;

}

/*
=====================================================
POWER PROGRESS
About Page CSS
Part 21.1
=====================================================
*/

/* ==========================
   About Hero
========================== */

.page-hero{

    padding:120px 0 90px;

    background: linear-gradient(135deg, var(--primary-color), #0b4d80);
    text-align:center;

}

.page-hero h1{

    font-size:52px;

    font-weight:800;

    color:var(--dark-color);

    margin-bottom:20px;

}

.page-hero p{

    max-width:760px;

    margin:0 auto 35px;

    font-size:18px;

    color:#666;

    line-height:1.8;

}

.page-hero .hero-buttons{

    display:flex;

    justify-content:center;

    gap:20px;

    flex-wrap:wrap;

}





/* ==========================
   About Grid
========================== */

.about-grid{

    display:grid;

    grid-template-columns:2fr 1fr;

    gap:45px;

    align-items:start;

}





/* ==========================
   About Text
========================== */

.about-text{

    background:#ffffff;

    padding:40px;

    border-radius:20px;

    box-shadow:var(--shadow);

}

.about-text h3{

    font-size:30px;

    color:var(--primary-color);

    margin-bottom:20px;

}

.about-text p{

    margin-bottom:18px;

    color:#555;

    font-size:16px;

    line-height:1.9;

}

.about-text p:last-child{

    margin-bottom:0;

}





/* ==========================
   Company Content
========================== */

.company-story{

    background:linear-gradient(
        180deg,
        #ffffff,
        #f7fbff
    );

}

.company-content{

    max-width:900px;

    margin:0 auto;

}

.company-text{

    position:relative;

    background:#fff;

    padding:50px 50px 50px 65px;

    border-radius:20px;

    box-shadow:var(--shadow);

}

.company-text::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:6px;

    height:100%;

    background:linear-gradient(
        var(--primary-color),
        var(--secondary-color)
    );

    border-radius:10px;

}

.about-facts{

    display:grid;

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

    gap:25px;

    margin-top:35px;

}

.fact-card{

    background:#fff;

    border-radius:20px;

    padding:35px 25px;

    text-align:center;

    border-top:5px solid var(--primary-color);

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

    transition:.35s;

}

.fact-card i{

    width:70px;

    height:70px;

    display:flex;

    align-items:center;

    justify-content:center;

    margin:0 auto 20px;

    border-radius:50%;

    background:rgba(19,108,173,.10);

    color:var(--primary-color);

    font-size:28px;

}

.fact-card:hover{

    background:linear-gradient(
        135deg,
        var(--primary-color),
        #1c7bc0
    );

    color:#fff;

    transform:translateY(-10px);

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

}

.fact-card:hover h3,
.fact-card:hover p{

    color:#fff;

}

.fact-card:hover i{

    background:#fff;

    color:var(--primary-color);

}

body.dark .fact-card,
body.dark .company-text{

    background:#1e293b;

}

body.dark .company-text h2,
body.dark .fact-card h3{

    color:#fff;

}

body.dark .company-text p,
body.dark .fact-card p{

    color:#cbd5e1;

}





/* ==========================
   Light Background Section
========================== */

.light-bg{

    background:var(--light-bg);

}





/* ==========================
   Dark Mode
========================== */

body.dark .page-hero{

    background:#0f172a;

}

body.dark .page-hero h1{

    color:#ffffff;

}

body.dark .page-hero p{

    color:#cbd5e1;

}

body.dark .about-text,

body.dark .fact-card{

    background:#1e293b;

    color:#ffffff;

}

body.dark .about-text p,

body.dark .fact-card p{

    color:#cbd5e1;

}

body.dark .fact-card h3{

    color:#ffffff;

}





/* ==========================
   Responsive
========================== */

@media(max-width:992px){

    .about-grid{

        grid-template-columns:1fr;

    }

    .about-facts{

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

    }

}

@media(max-width:768px){

    .page-hero{

        padding:90px 0 70px;

    }

    .page-hero h1{

        font-size:38px;

    }

    .page-hero p{

        font-size:16px;

    }

    .about-text{

        padding:30px;

    }

}

@media(max-width:576px){

    .page-hero h1{

        font-size:30px;

    }

    .page-hero .hero-buttons{

        flex-direction:column;

    }

    .about-facts{

        grid-template-columns:1fr;

    }

    .company-text{

        padding:30px;

    }

    .fact-card{

        padding:24px;

    }

}

/* =====================================================
   Mission & Vision
===================================================== */

.mission-grid{

    display:grid;

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

    gap:30px;

}

.mission-card{

    background:#ffffff;

    padding:40px;

    border-radius:20px;

    box-shadow:var(--shadow);

    text-align:center;

    transition:var(--transition);

    border-top:5px solid var(--primary-color);

}

.mission-card:hover{

    transform:translateY(-10px);

}

.mission-card i{

    width:80px;

    height:80px;

    display:flex;

    align-items:center;

    justify-content:center;

    margin:0 auto 25px;

    border-radius:50%;

    background:rgba(19,108,173,.08);

    color:var(--primary-color);

    font-size:34px;

}

.mission-card h3{

    font-size:28px;

    margin-bottom:18px;

    color:var(--dark-color);

}

.mission-card p{

    color:#666;

    line-height:1.9;

}





/* =====================================================
   Core Values
===================================================== */

.value-grid{

    display:grid;

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

    gap:30px;

}

.value-card{

    background:#ffffff;

    padding:35px;

    border-radius:20px;

    box-shadow:var(--shadow);

    text-align:center;

    transition:var(--transition);

}

.value-card:hover{

    transform:translateY(-10px);

}

.value-card i{

    width:70px;

    height:70px;

    margin:0 auto 20px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:rgba(244,146,33,.12);

    color:var(--secondary-color);

    font-size:30px;

}

.value-card h3{

    margin-bottom:15px;

    color:var(--dark-color);

    font-size:22px;

}

.value-card p{

    color:#666;

    line-height:1.8;

}





/* =====================================================
   Statistics
===================================================== */

.counter-section{

    background:linear-gradient(
        135deg,
        var(--primary-color),
        #0b5f9d
    );

    color:#ffffff;

}

.counter-section .section-title h2,

.counter-section .section-title p{

    color:#ffffff;

}

.counter-grid{

    display:grid;

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

    gap:25px;

}

.counter-box{

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

    backdrop-filter:blur(12px);

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

    border-radius:20px;

    padding:35px 20px;

    text-align:center;

    transition:var(--transition);

}

.counter-box:hover{

    transform:translateY(-8px);

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

}

.counter-box h2{

    font-size:48px;

    font-weight:800;

    margin-bottom:10px;

    color:#ffffff;

}

.counter-box p{

    font-size:17px;

    color:rgba(255,255,255,.9);

}





/* =====================================================
   Dark Mode
===================================================== */

body.dark .mission-card,

body.dark .value-card{

    background:#1e293b;

}

body.dark .mission-card h3,

body.dark .value-card h3{

    color:#ffffff;

}

body.dark .mission-card p,

body.dark .value-card p{

    color:#cbd5e1;

}

body.dark .mission-card i{

    background:rgba(19,108,173,.18);

}

body.dark .value-card i{

    background:rgba(244,146,33,.18);

}





/* =====================================================
   Responsive
===================================================== */

@media(max-width:992px){

    .mission-grid{

        grid-template-columns:1fr;

    }

    .value-grid{

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

    }

    .counter-grid{

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

    }

}

@media(max-width:768px){

    .mission-card{

        padding:30px;

    }

    .mission-card h3{

        font-size:24px;

    }

    .counter-box h2{

        font-size:40px;

    }

}

@media(max-width:576px){

    .value-grid{

        grid-template-columns:1fr;

    }

    .counter-grid{

        grid-template-columns:1fr;

    }

    .counter-box{

        padding:30px 15px;

    }

    .counter-box h2{

        font-size:34px;

    }

}
/* =====================================================
   Why Choose Us
===================================================== */

.choose-grid{

    display:grid;

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

    gap:30px;

}

.choose-card{

    background:#ffffff;

    border-radius:20px;

    padding:35px;

    box-shadow:var(--shadow);

    transition:var(--transition);

    display:flex;

    gap:20px;

    align-items:flex-start;

}

.choose-card:hover{

    transform:translateY(-10px);

}

.choose-card i{

    width:70px;

    height:70px;

    flex-shrink:0;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:rgba(19,108,173,.10);

    color:var(--primary-color);

    font-size:30px;

}

.choose-card h3{

    margin-bottom:12px;

    font-size:24px;

    color:var(--dark-color);

}

.choose-card p{

    color:#666;

    line-height:1.8;

}





/* =====================================================
   Contact CTA
===================================================== */

.contact-cta{

    background:linear-gradient(
        135deg,
        var(--primary-color),
        #0b5f9d
    );

    color:#ffffff;

    padding:90px 0;

    text-align:center;

}

.cta-content{

    max-width:760px;

    margin:auto;

}

.contact-cta h2{

    font-size:42px;

    margin-bottom:20px;

    color:#ffffff;

}

.contact-cta p{

    font-size:18px;

    line-height:1.8;

    margin-bottom:35px;

    color:rgba(255,255,255,.90);

}





/* =====================================================
   Google Map
===================================================== */

.map{

    overflow:hidden;

    border-radius:20px;

    box-shadow:var(--shadow);

}

.map iframe{

    display:block;

    width:100%;

    height:450px;

}





/* ==========================================
   Premium Apple Footer
========================================== */

.footer{

    background:#0B1220;

    border-top:4px solid var(--primary-color);

    padding:70px 0 35px;

    text-align:center;

}

.footer-logo img{

    width:210px;

    margin:auto;

}

.footer-logo p{

    color:#94A3B8;

    margin-top:18px;

    font-size:18px;

}

.footer-contact{

    display:flex;

    justify-content:center;

    flex-wrap:wrap;

    gap:35px;

    margin:45px 0;

}

.contact-item{

    display:flex;

    align-items:center;

    gap:10px;

    color:#E5E7EB;

}

.contact-item i{

    color:var(--secondary-color);

    font-size:18px;

}

.footer-nav{

    display:flex;

    justify-content:center;

    flex-wrap:wrap;

    gap:35px;

    margin-bottom:40px;

}

.footer-nav a{

    color:#E5E7EB;

    font-weight:600;

    transition:.3s;

}

.footer-nav a:hover{

    color:var(--secondary-color);

}

.footer-social{

    display:flex;

    justify-content:center;

    gap:20px;

    margin-bottom:45px;

}

.footer-social a{

    width:55px;

    height:55px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#182230;

    color:white;

    font-size:20px;

    transition:.35s;

}

.footer-social a:hover{

    background:linear-gradient(135deg,#136CAD,#0E4E87);

    transform:translateY(-8px);

}

.footer-bottom{

    border-top:1px solid rgba(255,255,255,.08);

    padding-top:25px;

}

.footer-bottom p{

    color:#94A3B8;

    font-size:15px;

}



/* ==========================
   Responsive
========================== */

@media(max-width:992px){

    .footer-nav{

        gap:20px;

    }

}

@media(max-width:768px){

    .footer{

        padding:55px 0 25px;

    }

    .footer-logo img{

        width:170px;

    }

    .footer-contact{

        flex-direction:column;

        gap:18px;

    }

    .footer-nav{

        gap:18px;

    }

    .footer-social a{

        width:48px;

        height:48px;

        font-size:18px;

    }

}





/* =====================================================
   Dark Mode
===================================================== */

body.dark .choose-card{

    background:#1e293b;

}

body.dark .choose-card h3{

    color:#ffffff;

}

body.dark .choose-card p{

    color:#cbd5e1;

}

body.dark .choose-card i{

    background:rgba(19,108,173,.20);

}





/* =====================================================
   Responsive
===================================================== */

@media(max-width:1100px){

    .footer-grid{

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

    }

}

@media(max-width:992px){

    .choose-grid{

        grid-template-columns:1fr;

    }

}

@media(max-width:768px){

    .contact-cta{

        padding:70px 0;

    }

    .contact-cta h2{

        font-size:34px;

    }

    .contact-cta p{

        font-size:16px;

    }

    .map iframe{

        height:350px;

    }

}

@media(max-width:576px){

    .footer-grid{

        grid-template-columns:1fr;

        text-align:center;

    }

    .choose-card{

        flex-direction:column;

        text-align:center;

        align-items:center;

    }

    .contact-cta h2{

        font-size:28px;

    }

    .contact-cta p{

        font-size:15px;

    }

    .map iframe{

        height:280px;

    }

}
/* ==========================
   Trusted Brands
========================== */

.brands{

    background:var(--light-bg);

}

.brands-grid{

    display:grid;

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

    gap:30px;

    margin-top:50px;

}

.brand-card{

    background:#ffffff;

    border-radius:18px;

    padding:30px;

    display:flex;

    align-items:center;

    justify-content:center;

    height:140px;

    box-shadow:var(--shadow);

    transition:var(--transition);

}

.brand-card:hover{

    transform:translateY(-8px);

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

}

.brand-card img{

    max-width:150px;

    max-height:70px;

    object-fit:contain;

    opacity:.80;

    transition:.35s;

}

.brand-card:hover img{

    filter:none;

    opacity:1;

    transform:scale(1.08);

}

/* Dark Mode */

body.dark .brand-card{

    background:#1e293b;

}

/* Responsive */

@media(max-width:992px){

    .brands-grid{

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

    }

}

@media(max-width:576px){

    .brands-grid{

        grid-template-columns:1fr;

    }

    .brand-card{

        height:120px;

    }

}