/*=====================================

The Practical Co.

Official Website

Version 1.0

======================================*/


:root{

    --primary:#2563eb;
    --secondary:#1d4ed8;

    --dark:#0f172a;

    --white:#ffffff;

    --gray:#f8fafc;

}


*{

    margin:0;

    padding:0;

    box-sizing:border-box;

}


html{

    scroll-behavior:smooth;

}


body{

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

    background:var(--white);

    color:var(--dark);

    overflow-x:hidden;

}


img{

    width:100%;

    display:block;

}


a{

    text-decoration:none;

}

ul{

    list-style:none;

}


.container{

    width:min(90%,1300px);

    margin:auto;

}



/*=====================================
            NAVBAR
======================================*/

.header{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 999;
    background: rgba(255,255,255,.75);
    backdrop-filter: blur(18px);
    border-bottom: 1px solid rgba(0,0,0,.05);
}

.navbar{
    height: 85px;
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.logo{
    display:flex;
    align-items:center;
    gap:12px;
    color:var(--dark);
    font-size:1.2rem;
    font-weight:700;
}

.logo img{
    width:45px;
}

.nav-links{
    display:flex;
    gap:35px;
}

.nav-links a{

    color:var(--dark);

    font-weight:500;

    transition:.3s;
}

.nav-links a:hover{

    color:var(--primary);

}

.order-btn{

    padding:14px 26px;

    background:var(--primary);

    color:white;

    border-radius:50px;

    font-weight:600;

    transition:.35s;

}

.order-btn:hover{

    background:var(--secondary);

    transform:translateY(-3px);

}


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

.hero{

    position: relative;
    overflow: hidden;

    min-height:100vh;

    display:flex;

    align-items:center;

    padding-top:120px;

    background:linear-gradient(to bottom,#ffffff,#f4f8ff);

}

.hero-wrapper{

    position: relative;
    z-index: 2;

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:80px;

    align-items:center;

}

.badge{

    display:inline-block;

    background:#dbeafe;

    color:#2563eb;

    padding:10px 18px;

    border-radius:50px;

    font-weight:600;

    margin-bottom:20px;

}

.hero h1{

    font-size:3.6rem;

    line-height:1.1;

    margin-bottom:20px;

}

.hero p{

    color:#475569;

    font-size:1.1rem;

    max-width:550px;

    margin-bottom:35px;

}

.hero-buttons{

    display:flex;

    gap:18px;

    margin-bottom:35px;

}

.primary-btn{

    padding:16px 34px;

    background:var(--primary);

    color:white;

    border-radius:50px;

    font-weight:600;

    transition:.3s;

}

.primary-btn:hover{

    transform:translateY(-4px);

}

.secondary-btn{

    padding:16px 34px;

    border:2px solid #2563eb;

    color:#2563eb;

    border-radius:50px;

    font-weight:600;

    transition:.3s;

}

.secondary-btn:hover{

    background:#2563eb;

    color:white;

}

.features{

    display:flex;

    gap:25px;

    flex-wrap:wrap;

    font-weight:500;

}

.hero-right{

    display:flex;

    justify-content:center;

}

.hero-right img{

    width:100%;

    max-width:560px;

    animation:float 5s ease-in-out infinite;

}


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

@keyframes float{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-20px);

}

100%{

transform:translateY(0);

}

}


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

@media(max-width:991px){

.hero-wrapper{

grid-template-columns:1fr;

text-align:center;

}

.hero-right{

order:-1;

}

.hero-buttons{

justify-content:center;

}

.features{

justify-content:center;

}

.nav-links{

display:none;

}

.order-btn{

display:none;

}

.hero h1{

font-size:2.7rem;

}

}



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

.about{

    padding:120px 0;

    background:#fff;

}

.about-wrapper{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:70px;

    align-items:center;

}

.about-image img{

    width:100%;

    border-radius:25px;

    box-shadow:0 25px 60px rgba(0,0,0,.08);

}

.section-tag{

    display:inline-block;

    padding:8px 18px;

    background:#dbeafe;

    color:#2563eb;

    border-radius:50px;

    font-weight:600;

    margin-bottom:18px;

}

.about-content h2{

    font-size:2.6rem;

    margin-bottom:20px;

}

.about-content>p{

    color:#64748b;

    line-height:1.8;

    margin-bottom:40px;

}

.about-grid{

    display:grid;

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

    gap:20px;

}

.about-card{

    padding:25px;

    border-radius:20px;

    background:#f8fafc;

    transition:.35s;

}

.about-card:hover{

    transform:translateY(-8px);

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

}

.about-card i{

    font-size:28px;

    color:#2563eb;

    margin-bottom:15px;

}

.about-card h4{

    margin-bottom:10px;

}

.about-card p{

    color:#64748b;

    font-size:.95rem;

}

@media(max-width:991px){

.about-wrapper{

grid-template-columns:1fr;

}

.about-content{

text-align:center;

}

.about-grid{

grid-template-columns:1fr;

}

}


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

.services{

    padding:120px 0;

    background:#f8fafc;

}

.section-title{

    text-align:center;

    max-width:700px;

    margin:0 auto 70px;

}

.section-title h2{

    font-size:2.8rem;

    margin:15px 0;

}

.section-title p{

    color:#64748b;

    line-height:1.8;

}

.service-grid{

    display:grid;

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

    gap:30px;

}

.service-card{

    background:#fff;

    border-radius:24px;

    padding:40px 30px;

    transition:.35s;

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

}

.service-card:hover{

    transform:translateY(-12px);

    box-shadow:0 25px 60px rgba(37,99,235,.12);

}

.service-card .icon{

    width:70px;

    height:70px;

    border-radius:18px;

    background:#2563eb;

    display:flex;

    align-items:center;

    justify-content:center;

    color:#fff;

    font-size:28px;

    margin-bottom:25px;

}

.service-card h3{

    margin-bottom:15px;

}

.service-card p{

    color:#64748b;

    line-height:1.8;

}

@media(max-width:991px){

.service-grid{

grid-template-columns:1fr;

}

.section-title h2{

font-size:2.2rem;

}

}


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

.why-us{

    padding:120px 0;

    background:#ffffff;

}

.why-grid{

    display:grid;

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

    gap:25px;

}

.why-card{

    padding:40px 30px;

    border-radius:22px;

    background:#f8fafc;

    text-align:center;

    transition:.35s;

}

.why-card:hover{

    transform:translateY(-10px);

    box-shadow:0 20px 50px rgba(37,99,235,.12);

}

.why-card i{

    width:80px;

    height:80px;

    display:flex;

    align-items:center;

    justify-content:center;

    margin:auto;

    border-radius:20px;

    background:#2563eb;

    color:#fff;

    font-size:32px;

    margin-bottom:25px;

}

.why-card h3{

    margin-bottom:15px;

}

.why-card p{

    color:#64748b;

    line-height:1.8;

}



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

.stats{

    padding:80px 0;

    background:#2563eb;

}

.stats-grid{

    display:grid;

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

    gap:30px;

}

.stat-box{

    text-align:center;

    color:#fff;

}

.stat-box h2{

    font-size:3rem;

    margin-bottom:10px;

}

.stat-box p{

    opacity:.9;

}



@media(max-width:991px){

.why-grid{

grid-template-columns:1fr;

}

.stats-grid{

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

}

}

@media(max-width:600px){

.stats-grid{

grid-template-columns:1fr;

}

}

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

.gallery{

    padding:120px 0;

    background:#f8fafc;

}

.gallery-grid{

    display:grid;

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

    gap:25px;

}

.gallery-item{

    overflow:hidden;

    border-radius:22px;

    cursor:pointer;

    position:relative;

}

.gallery-item img{

    width:100%;

    height:340px;

    object-fit:cover;

    transition:.45s;

}

.gallery-item:hover img{

    transform:scale(1.08);

}



/*==============================
        LIGHTBOX
==============================*/

.lightbox{

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.85);

    display:flex;

    justify-content:center;

    align-items:center;

    visibility:hidden;

    opacity:0;

    transition:.35s;

    z-index:99999;

}

.lightbox.show{

    visibility:visible;

    opacity:1;

}

.lightbox img{

    width:min(900px,90%);

    border-radius:20px;

}

.close-lightbox{

    position:absolute;

    top:40px;

    right:60px;

    color:white;

    font-size:45px;

    cursor:pointer;

}



@media(max-width:991px){

.gallery-grid{

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

}

}

@media(max-width:600px){

.gallery-grid{

grid-template-columns:1fr;

}

.gallery-item img{

height:280px;

}

}


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

.faq{

padding:120px 0;

background:#fff;

}

.faq-wrapper{

max-width:900px;

margin:auto;

}

.faq-item{

margin-bottom:20px;

border:1px solid rgba(0,0,0,.08);

border-radius:18px;

overflow:hidden;

}

.faq-question{

width:100%;

padding:22px;

background:#fff;

display:flex;

justify-content:space-between;

align-items:center;

font-size:18px;

font-weight:600;

border:none;

cursor:pointer;

}

.faq-answer{

max-height:0;

overflow:hidden;

transition:.35s;

}

.faq-answer p{

padding:0 22px 22px;

line-height:1.8;

color:#64748b;

}

.faq-item.active .faq-answer{

max-height:200px;

}



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

.contact{

padding:120px 0;

background:#f8fafc;

}

.contact-wrapper{

display:grid;

grid-template-columns:1fr 420px;

gap:60px;

align-items:center;

}

.contact-box{

display:flex;

gap:18px;

align-items:center;

margin-top:25px;

}

.contact-box i{

width:60px;

height:60px;

display:flex;

align-items:center;

justify-content:center;

background:#2563eb;

color:white;

border-radius:16px;

font-size:24px;

}

.contact-card{

padding:45px;

background:white;

border-radius:24px;

box-shadow:0 25px 60px rgba(0,0,0,.08);

}

.contact-card h3{

margin-bottom:15px;

}

.contact-card p{

margin-bottom:30px;

color:#64748b;

}



@media(max-width:991px){

.contact-wrapper{

grid-template-columns:1fr;

}

}


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

footer{

    background:#08101f;

    color:white;

    padding:90px 0 0;

}

.footer-grid{

    display:grid;

    grid-template-columns:2fr 1fr 1fr 1fr;

    gap:50px;

    padding-bottom:60px;

}

.footer-logo{

    width:70px;

    margin-bottom:20px;

}

.footer-grid h3{

    margin-bottom:20px;

}

.footer-grid p{

    color:#94a3b8;

    line-height:1.8;

}

.footer-grid ul{

    display:flex;

    flex-direction:column;

    gap:12px;

}

.footer-grid a{

    color:#cbd5e1;

    transition:.3s;

}

.footer-grid a:hover{

    color:white;

}

.copyright{

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

    text-align:center;

    padding:25px;

    color:#94a3b8;

}

@media(max-width:991px){

.footer-grid{

grid-template-columns:1fr;

text-align:center;

}

.footer-logo{

margin:auto auto 20px;

}

}



/*==============================
    FLOATING MESSENGER
==============================*/

.messenger{

    position:fixed;

    right:25px;

    bottom:25px;

    background:#0084ff;

    color:#fff;

    padding:14px 22px;

    border-radius:60px;

    display:flex;

    align-items:center;

    gap:12px;

    text-decoration:none;

    font-weight:600;

    box-shadow:0 18px 40px rgba(0,132,255,.30);

    z-index:9999;

    transition:.35s;

}

.messenger:hover{

    transform:translateY(-6px) scale(1.04);

}

.messenger i{

    font-size:28px;

}

@media(max-width:768px){

.messenger span{

display:none;

}

.messenger{

width:65px;

height:65px;

padding:0;

justify-content:center;

border-radius:50%;

}

}



/*==============================
        SCROLL TOP
==============================*/

#scrollTop{

position:fixed;

left:30px;

bottom:35px;

width:55px;

height:55px;

border:none;

border-radius:50%;

background:#2563eb;

color:white;

font-size:18px;

cursor:pointer;

display:none;

z-index:999;

box-shadow:0 15px 35px rgba(37,99,235,.25);

}

#scrollTop.show{

display:block;

}



@media(max-width:991px){

.footer{

grid-template-columns:1fr;

text-align:center;

}

.messenger{

right:18px;

bottom:18px;

}

#scrollTop{

left:18px;

bottom:18px;

}

}


/*==============================
        ACTIVE NAV
==============================*/

.nav-links a.active{

    color:#2563eb;

    font-weight:600;

}

.nav-links a::after{

    content:"";

    width:0;

    height:2px;

    display:block;

    background:#2563eb;

    transition:.35s;

}

.nav-links a:hover::after,

.nav-links a.active::after{

    width:100%;

}

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

.hero-blur{

    position:absolute;

    border-radius:50%;

    filter:blur(90px);

    z-index:1;

    pointer-events:none;

}

.blur-one{

    width:420px;

    height:420px;

    background:#60a5fa;

    top:-120px;

    left:-120px;

    opacity:.35;

}

.blur-two{

    width:350px;

    height:350px;

    background:#2563eb;

    right:-100px;

    bottom:-100px;

    opacity:.25;

}


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

.testimonials {
    padding: 120px 0;
    background: #ffffff;
}

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

.testimonial-card {
    background: #f8fafc;
    padding: 35px;
    border-radius: 20px;
    transition: 0.35s;
    border: 1px solid rgba(0, 0, 0, 0.06);
}

.testimonial-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.08);
}

.stars {
    font-size: 22px;
    margin-bottom: 20px;
}

.testimonial-card p {
    color: #64748b;
    line-height: 1.8;
    margin-bottom: 20px;
}

.testimonial-card h4 {
    font-size: 16px;
    color: #0f172a;
    font-weight: 600;
}

@media (max-width: 991px) {
    .testimonial-grid {
        grid-template-columns: 1fr;
    }
}

/*==============================
            LOADER
==============================*/

#loader{

position:fixed;

inset:0;

background:#ffffff;

display:flex;

justify-content:center;

align-items:center;

z-index:999999;

transition:.8s;

}

.loader-logo{

text-align:center;

animation:pulse 1.5s infinite;

}

.loader-logo img{

width:90px;

margin:auto;

margin-bottom:20px;

}

.loader-logo h2{

font-size:32px;

color:#2563eb;

font-weight:700;

}

#loader.hide{

opacity:0;

visibility:hidden;

}

@keyframes pulse{

0%{

transform:scale(1);

}

50%{

transform:scale(1.08);

}

100%{

transform:scale(1);

}

}

/*==============================
        DARK MODE BUTTON
==============================*/

#theme-toggle{

    width:50px;
    height:50px;

    border:none;

    border-radius:50%;

    background:#2563eb;

    color:#fff;

    cursor:pointer;

    margin-left:15px;

    font-size:18px;

    transition:.35s;

}

#theme-toggle:hover{

    transform:rotate(180deg);

}


/*==============================
        DARK MODE
==============================*/

body.dark{

    background:#0f172a;
    color:#fff;

}

body.dark .header{

    background:rgba(15,23,42,.85);

}

body.dark .hero,
body.dark .about,
body.dark .why-us,
body.dark .testimonials,
body.dark .faq{

    background:#0f172a;

}

body.dark .services,
body.dark .gallery,
body.dark .contact{

    background:#111827;

}

body.dark .service-card,
body.dark .about-card,
body.dark .testimonial-card,
body.dark .contact-card,
body.dark .faq-item{

    background:#1e293b;
    color:#fff;

}

body.dark .nav-links a,
body.dark h1,
body.dark h2,
body.dark h3,
body.dark h4{

    color:#fff;

}

body.dark p{

    color:#cbd5e1;

}

/*==============================
        SCROLL PROGRESS
==============================*/

#progress-bar{

    position:fixed;

    top:0;

    left:0;

    width:0%;

    height:4px;

    background:linear-gradient(
        90deg,
        #2563eb,
        #60a5fa
    );

    z-index:9999999;

    transition:width .1s linear;

}

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

.menu-toggle{

    display:none;

    font-size:28px;

    cursor:pointer;

    z-index:1002;

}

.overlay{

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.45);

    opacity:0;

    visibility:hidden;

    transition:.35s;

    z-index:998;

}

.overlay.active{

    opacity:1;

    visibility:visible;

}

@media(max-width:991px){

.menu-toggle{

display:block;

}

.nav-links{

position:fixed;

top:0;

right:-320px;

width:300px;

height:100vh;

background:#fff;

display:flex;

flex-direction:column;

justify-content:center;

align-items:center;

gap:30px;

transition:.35s;

z-index:999;

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

}

.nav-links.active{

right:0;

}

.order-btn{

display:none;

}

}

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

.gallery-filter{

display:flex;

justify-content:center;

gap:15px;

flex-wrap:wrap;

margin-bottom:50px;

}

.filter-btn{

padding:12px 24px;

border:none;

background:#e2e8f0;

border-radius:50px;

cursor:pointer;

font-weight:600;

transition:.3s;

}

.filter-btn.active{

background:#2563eb;

color:white;

}

.filter-btn:hover{

background:#2563eb;

color:white;

}

/*==============================
        ORDER PROCESS
==============================*/

.process{

    padding:120px 0;

    background:#ffffff;

}

.process-grid{

    display:grid;

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

    gap:30px;

}

.process-card{

    background:#f8fafc;

    padding:40px 30px;

    border-radius:22px;

    text-align:center;

    transition:.35s;

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

}

.process-card:hover{

    transform:translateY(-10px);

    box-shadow:0 20px 45px rgba(37,99,235,.10);

}

.process-number{

    width:70px;

    height:70px;

    margin:0 auto 20px;

    border-radius:50%;

    background:#2563eb;

    color:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:24px;

    font-weight:700;

}

.process-card h3{

    margin-bottom:15px;

}

.process-card p{

    color:#64748b;

    line-height:1.8;

}

@media(max-width:991px){

.process-grid{

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

}

}

@media(max-width:600px){

.process-grid{

grid-template-columns:1fr;

}

}

.email-box{

display:flex;

align-items:center;

gap:10px;

margin-top:15px;

}

#copyEmail{

border:none;

background:#2563eb;

color:#fff;

padding:8px 12px;

border-radius:8px;

cursor:pointer;

}