/*==================================================
 Srivaishnavi Enterprises
 Creative Interior Furniture & Renovation
 style.css Part-1
===================================================*/

/* Google Font */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');

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

*{
margin:0;
padding:0;
box-sizing:border-box;
scroll-behavior:smooth;
}

html{
scroll-behavior:smooth;
}

body{

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

background:#ffffff;

color:#333;

line-height:1.7;

overflow-x:hidden;

}

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

:root{

--primary:#d62828;

--secondary:#222222;

--gold:#f4b400;

--white:#ffffff;

--black:#000000;

--gray:#777777;

--light:#f7f7f7;

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

--transition:.4s;

}

/*==============================
 Common
===============================*/

.container{

width:90%;

max-width:1200px;

margin:auto;

}

section{

padding:90px 0;

}

img{

width:100%;

display:block;

}

a{

text-decoration:none;

transition:.4s;

}

ul{

list-style:none;

}

h1,h2,h3,h4{

font-weight:700;

color:var(--secondary);

}

p{

color:#666;

font-size:16px;

}

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

.btn{

display:inline-block;

padding:15px 35px;

background:var(--primary);

color:#fff;

border-radius:40px;

font-weight:600;

transition:.4s;

}

.btn:hover{

background:#000;

transform:translateY(-3px);

}

.btn2{

display:inline-block;

padding:15px 35px;

background:var(--gold);

color:#222;

border-radius:40px;

font-weight:600;

margin-left:15px;

transition:.4s;

}

.btn2:hover{

background:#111;

color:#fff;

}

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

header{

position:fixed;

top:0;

left:0;

width:100%;

background:#fff;

z-index:999;

box-shadow:var(--shadow);

}

header .container{

display:flex;

align-items:center;

justify-content:space-between;

padding:18px 0;

}

.logo h2{

font-size:30px;

color:var(--primary);

}

.logo p{

font-size:13px;

color:#777;

font-weight:500;

}

/*==============================
 Navigation
===============================*/

nav ul{

display:flex;

gap:35px;

}

nav ul li a{

font-size:16px;

font-weight:600;

color:#222;

transition:.4s;

}

nav ul li a:hover{

color:var(--primary);

}

.call-btn{

background:var(--primary);

color:#fff;

padding:12px 22px;

border-radius:50px;

font-weight:600;

}

.call-btn i{

margin-right:8px;

}

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

.hero{

position:relative;

height:100vh;

display:flex;

align-items:center;

background:url('../images/hero.jpg') center center/cover no-repeat;

margin-top:90px;

}

.overlay{

position:absolute;

top:0;

left:0;

width:100%;

height:100%;

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

}

.hero-content{

position:relative;

display:grid;

grid-template-columns:1fr 1fr;

align-items:center;

gap:50px;

z-index:2;

}

.hero-left{

color:#fff;

}

.hero-left h4{

font-size:22px;

color:var(--gold);

margin-bottom:15px;

}

.hero-left h1{

font-size:60px;

line-height:1.2;

color:#fff;

margin-bottom:25px;

}

.hero-left h1 span{

display:block;

color:var(--gold);

}

.hero-left p{

font-size:18px;

color:#f1f1f1;

margin-bottom:35px;

max-width:650px;

}

.hero-buttons{

display:flex;

align-items:center;

flex-wrap:wrap;

gap:20px;

}

.hero-right img{

border-radius:15px;

box-shadow:0 20px 50px rgba(0,0,0,.25);

}

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

.section-title{

text-align:center;

margin-bottom:60px;

}

.section-title span{

color:var(--primary);

font-size:18px;

font-weight:600;

display:block;

margin-bottom:10px;

}

.section-title h2{

font-size:42px;

margin-bottom:15px;

}

.section-title p{

max-width:700px;

margin:auto;

}

/*==============================
 Utility
===============================*/

.text-center{

text-align:center;

}

.bg-light{

background:#f7f7f7;

}

.shadow{

box-shadow:var(--shadow);

}

.rounded{

border-radius:15px;

}



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

.about{
    background:#fff;
}

.about .container{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:60px;
    align-items:center;
}

.about-image{
    position:relative;
}

.about-image img{
    width:100%;
    border-radius:18px;
    box-shadow:var(--shadow);
    transition:var(--transition);
}

.about-image:hover img{
    transform:scale(1.03);
}

.about-content .sub-title{
    color:var(--primary);
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:1px;
}

.about-content h2{
    font-size:42px;
    margin:15px 0 20px;
}

.about-content h2 span{
    color:var(--primary);
}

.about-content p{
    margin-bottom:18px;
    color:#666;
}

.about-list{
    margin-top:30px;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:15px;
}

.list-item{
    display:flex;
    align-items:center;
    gap:12px;
    font-weight:500;
}

.list-item i{
    color:var(--primary);
    font-size:20px;
}

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

.services{
    background:var(--light);
}

.service-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
    gap:30px;
}

.service-box{
    background:#fff;
    border-radius:18px;
    padding:40px 30px;
    text-align:center;
    transition:.4s;
    box-shadow:var(--shadow);
    position:relative;
    overflow:hidden;
}

.service-box::before{
    content:"";
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:5px;
    background:var(--primary);
    transform:scaleX(0);
    transition:.4s;
}

.service-box:hover::before{
    transform:scaleX(1);
}

.service-box:hover{
    transform:translateY(-12px);
}

.service-box i{
    width:85px;
    height:85px;
    line-height:85px;
    border-radius:50%;
    background:var(--primary);
    color:#fff;
    font-size:34px;
    margin-bottom:25px;
}

.service-box h3{
    margin-bottom:15px;
    font-size:24px;
}

.service-box p{
    color:#666;
}

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

.why-us{
    background:#fff;
}

.why-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
    gap:30px;
}

.why-box{
    text-align:center;
    padding:40px 25px;
    border-radius:18px;
    box-shadow:var(--shadow);
    transition:.4s;
    background:#fff;
}

.why-box:hover{
    background:var(--primary);
    color:#fff;
    transform:translateY(-10px);
}

.why-box:hover h3,
.why-box:hover p,
.why-box:hover i{
    color:#fff;
}

.why-box i{
    font-size:42px;
    color:var(--primary);
    margin-bottom:20px;
}

.why-box h3{
    margin-bottom:15px;
    font-size:24px;
}

/*==================================================
    COMMON CARD HOVER
==================================================*/

.card-hover{
    transition:.4s;
}

.card-hover:hover{
    transform:translateY(-8px);
    box-shadow:0 18px 45px rgba(0,0,0,.15);
}

/*==================================================
    IMAGE EFFECTS
==================================================*/

.image-hover{
    overflow:hidden;
    border-radius:15px;
}

.image-hover img{
    transition:.6s;
}

.image-hover:hover img{
    transform:scale(1.1);
}

/*==================================================
    FADE-UP ANIMATION
==================================================*/

.fade-up{
    opacity:0;
    transform:translateY(40px);
    transition:1s;
}

.fade-up.active{
    opacity:1;
    transform:translateY(0);
}

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

.zoom{
    opacity:0;
    transform:scale(.9);
    transition:1s;
}

.zoom.active{
    opacity:1;
    transform:scale(1);
}

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

.left{
    opacity:0;
    transform:translateX(-60px);
    transition:1s;
}

.left.active{
    opacity:1;
    transform:translateX(0);
}

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

.right{
    opacity:0;
    transform:translateX(60px);
    transition:1s;
}

.right.active{
    opacity:1;
    transform:translateX(0);
}

/*==================================================
    PROFESSIONAL SPACING
==================================================*/

.mt-30{margin-top:30px;}
.mt-50{margin-top:50px;}
.mb-30{margin-bottom:30px;}
.mb-50{margin-bottom:50px;}
.pt-80{padding-top:80px;}
.pb-80{padding-bottom:80px;}

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

.gallery{
    background:#f9f9f9;
    padding:100px 0;
}

.gallery-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
    gap:30px;
    margin-top:50px;
}

.gallery-item{
    position:relative;
    overflow:hidden;
    border-radius:18px;
    box-shadow:0 10px 25px rgba(0,0,0,.12);
    cursor:pointer;
    background:#fff;
}

.gallery-item img{
    width:100%;
    height:280px;
    object-fit:cover;
    transition:.5s ease;
}

.gallery-item:hover img{
    transform:scale(1.12);
}

.gallery-item::before{
    content:"";
    position:absolute;
    inset:0;
    background:rgba(0,0,0,.55);
    opacity:0;
    transition:.4s;
    z-index:1;
}

.gallery-item:hover::before{
    opacity:1;
}

.gallery-item::after{
    content:"View Project";
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    color:#fff;
    font-size:20px;
    font-weight:600;
    letter-spacing:1px;
    opacity:0;
    transition:.4s;
    z-index:2;
}

.gallery-item:hover::after{
    opacity:1;
}

/*==================================================
    PROJECTS
==================================================*/

.projects{
    background:#fff;
    padding:100px 0;
}

.project-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
    gap:35px;
    margin-top:60px;
}

.project-box{
    position:relative;
    overflow:hidden;
    border-radius:18px;
    background:#fff;
    box-shadow:0 12px 30px rgba(0,0,0,.12);
    transition:.4s;
}

.project-box:hover{
    transform:translateY(-10px);
}

.project-box img{
    width:100%;
    height:280px;
    object-fit:cover;
    transition:.5s;
}

.project-box:hover img{
    transform:scale(1.08);
}

.project-info{
    position:absolute;
    left:0;
    bottom:-120px;
    width:100%;
    background:linear-gradient(to top,#d62828,#ff5b5b);
    color:#fff;
    padding:25px;
    transition:.4s;
}

.project-box:hover .project-info{
    bottom:0;
}

.project-info h3{
    color:#fff;
    font-size:26px;
    margin-bottom:10px;
}

.project-info p{
    color:#f5f5f5;
    font-size:15px;
}

.project-info a{
    display:inline-block;
    margin-top:15px;
    color:#fff;
    font-weight:600;
    border-bottom:2px solid #fff;
    padding-bottom:3px;
}

.project-info a:hover{
    color:#ffd54f;
    border-color:#ffd54f;
}

/*==================================================
    IMAGE BORDER EFFECT
==================================================*/

.gallery-item,
.project-box{
    border:4px solid transparent;
}

.gallery-item:hover,
.project-box:hover{
    border-color:#d62828;
}

/*==================================================
    SECTION DECORATION
==================================================*/

.gallery .section-title span,
.projects .section-title span{
    color:#d62828;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:1px;
}

.gallery .section-title h2,
.projects .section-title h2{
    font-size:42px;
    margin-top:10px;
    margin-bottom:15px;
}

.gallery .section-title p,
.projects .section-title p{
    max-width:700px;
    margin:auto;
    color:#666;
    line-height:1.8;
}

/*==================================================
    HOVER SHADOW
==================================================*/

.gallery-item:hover,
.project-box:hover{
    box-shadow:0 25px 45px rgba(0,0,0,.18);
}


/*==================================================
                TESTIMONIAL SECTION
==================================================*/

.testimonials{
    padding:100px 0;
    background:#f8f9fa;
}

.testimonials .section-title{
    text-align:center;
    margin-bottom:60px;
}

.testimonial-wrapper{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
    gap:35px;
}

.testimonial-card{

    background:#fff;

    border-radius:18px;

    padding:35px;

    position:relative;

    transition:.4s;

    box-shadow:0 12px 30px rgba(0,0,0,.08);

    overflow:hidden;

}

.testimonial-card:hover{

    transform:translateY(-10px);

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

}

.testimonial-card::before{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:6px;

    height:100%;

    background:#d62828;

}

.quote-icon{

    width:70px;

    height:70px;

    background:#d62828;

    color:#fff;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:28px;

    margin-bottom:25px;

}

.testimonial-text{

    font-size:16px;

    line-height:30px;

    color:#666;

    margin-bottom:30px;

}

.client{

    display:flex;

    align-items:center;

}

.client img{

    width:70px;

    height:70px;

    border-radius:50%;

    object-fit:cover;

    margin-right:18px;

    border:4px solid #fff;

    box-shadow:0 5px 20px rgba(0,0,0,.15);

}

.client-info h3{

    font-size:22px;

    color:#222;

    margin-bottom:5px;

}

.client-info span{

    color:#777;

    font-size:15px;

}

.rating{

    margin-top:15px;

}

.rating i{

    color:#ffb400;

    margin-right:3px;

    font-size:18px;

}

/* Hover Effect */

.testimonial-card:hover .quote-icon{

    background:#111;

    transform:rotate(360deg);

    transition:1s;

}

/* Decorative Background */

.testimonial-card::after{

    content:"❝";

    position:absolute;

    right:25px;

    top:10px;

    font-size:90px;

    color:rgba(214,40,40,.08);

    font-weight:bold;

}

/*==========================
 Testimonial Slider Controls
===========================*/

.testimonial-controls{

    display:flex;

    justify-content:center;

    margin-top:45px;

    gap:15px;

}

.testimonial-controls button{

    width:50px;

    height:50px;

    border:none;

    border-radius:50%;

    background:#d62828;

    color:#fff;

    cursor:pointer;

    transition:.3s;

    font-size:18px;

}

.testimonial-controls button:hover{

    background:#111;

}

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

@media(max-width:992px){

.testimonial-wrapper{

grid-template-columns:1fr 1fr;

}

}

@media(max-width:768px){

.testimonial-wrapper{

grid-template-columns:1fr;

}

.testimonial-card{

padding:30px;

}

.client{

flex-direction:column;

text-align:center;

}

.client img{

margin:0 0 15px;

}

}

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

.contact{
    padding:100px 0;
    background:#ffffff;
    position:relative;
}

.contact::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:8px;
    background:linear-gradient(90deg,#d62828,#f4b400);
}

.contact .container{
    display:grid;
    grid-template-columns:420px 1fr;
    gap:50px;
    align-items:flex-start;
}

.contact-info{
    background:#222;
    color:#fff;
    padding:45px;
    border-radius:20px;
    box-shadow:0 20px 45px rgba(0,0,0,.15);
}

.contact-info h2{
    color:#fff;
    margin-bottom:20px;
    font-size:34px;
}

.contact-info p{
    color:#ddd;
    margin-bottom:30px;
    line-height:1.8;
}

.info-item{
    display:flex;
    align-items:flex-start;
    gap:18px;
    margin-bottom:28px;
}

.info-icon{
    width:60px;
    height:60px;
    border-radius:50%;
    background:#d62828;
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:24px;
    flex-shrink:0;
    transition:.4s;
}

.info-item:hover .info-icon{
    background:#f4b400;
    color:#222;
    transform:rotate(360deg);
}

.info-content h4{
    color:#fff;
    margin-bottom:8px;
    font-size:22px;
}

.info-content p,
.info-content a{
    color:#ddd;
    text-decoration:none;
    line-height:1.7;
    transition:.3s;
}

.info-content a:hover{
    color:#f4b400;
}

.business-hours{
    margin-top:40px;
    padding-top:25px;
    border-top:1px solid rgba(255,255,255,.15);
}

.business-hours h3{
    color:#fff;
    margin-bottom:15px;
    font-size:24px;
}

.business-hours ul{
    list-style:none;
    padding:0;
}

.business-hours li{
    display:flex;
    justify-content:space-between;
    margin-bottom:10px;
    color:#ddd;
    font-size:15px;
}

.social-links{
    display:flex;
    gap:15px;
    margin-top:35px;
}

.social-links a{
    width:48px;
    height:48px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:#fff;
    color:#d62828;
    font-size:20px;
    transition:.4s;
}

.social-links a:hover{
    background:#d62828;
    color:#fff;
    transform:translateY(-5px);
}

/*==============================
 Contact Right Wrapper
==============================*/

.contact-right{
    display:flex;
    flex-direction:column;
    gap:35px;
}

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

.contact-heading{
    margin-bottom:10px;
}

.contact-heading span{
    color:#d62828;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:1px;
}

.contact-heading h2{
    font-size:42px;
    margin:12px 0;
}

.contact-heading p{
    color:#666;
    line-height:1.8;
}

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

@media(max-width:1100px){

.contact .container{
    grid-template-columns:1fr;
}

.contact-info{
    order:2;
}

.contact-right{
    order:1;
}

}

@media(max-width:768px){

.contact{
    padding:70px 0;
}

.contact-info{
    padding:30px;
}

.contact-heading h2{
    font-size:32px;
}

.info-item{
    gap:15px;
}

.info-icon{
    width:55px;
    height:55px;
    font-size:20px;
}

.social-links{
    justify-content:center;
}

}

@media(max-width:480px){

.contact-info{
    padding:25px;
}

.info-content h4{
    font-size:18px;
}

.business-hours li{
    font-size:14px;
}

}

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

.contact-form{

    background:#ffffff;

    padding:45px;

    border-radius:20px;

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

}

.contact-form h3{

    font-size:32px;

    margin-bottom:15px;

    color:#222;

}

.contact-form p{

    margin-bottom:35px;

    color:#666;

}

.form-row{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:20px;

    margin-bottom:20px;

}

.form-group{

    margin-bottom:20px;

}

.form-group label{

    display:block;

    margin-bottom:8px;

    font-weight:600;

    color:#333;

}

.form-control{

    width:100%;

    padding:16px 18px;

    border:1px solid #ddd;

    border-radius:10px;

    font-size:15px;

    transition:.35s;

    outline:none;

    background:#fff;

}

.form-control:focus{

    border-color:#d62828;

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

}

textarea.form-control{

    min-height:180px;

    resize:vertical;

}

.submit-btn{

    display:inline-flex;

    align-items:center;

    gap:10px;

    background:#d62828;

    color:#fff;

    border:none;

    padding:16px 40px;

    border-radius:50px;

    cursor:pointer;

    font-size:16px;

    font-weight:600;

    transition:.35s;

}

.submit-btn:hover{

    background:#111;

    transform:translateY(-3px);

}

/*==================================================
            CONTACT INFO STRIP
==================================================*/

.contact-strip{

    display:grid;

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

    gap:20px;

    margin-top:40px;

}

.strip-box{

    background:#fff;

    border-radius:15px;

    text-align:center;

    padding:30px;

    box-shadow:0 8px 20px rgba(0,0,0,.08);

    transition:.35s;

}

.strip-box:hover{

    transform:translateY(-6px);

}

.strip-box i{

    font-size:34px;

    color:#d62828;

    margin-bottom:15px;

}

.strip-box h4{

    margin-bottom:10px;

    color:#222;

}

.strip-box p{

    color:#666;

}

/*==================================================
                GOOGLE MAP
==================================================*/

.map-section{

    margin-top:60px;

}

.map-section h3{

    font-size:30px;

    margin-bottom:20px;

    color:#222;

}

.map-wrapper{

    overflow:hidden;

    border-radius:20px;

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

}

.map-wrapper iframe{

    width:100%;

    height:450px;

    border:0;

    display:block;

}

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

@media(max-width:991px){

.form-row{

grid-template-columns:1fr;

}

.contact-strip{

grid-template-columns:1fr;

}

}

@media(max-width:768px){

.contact-form{

padding:30px;

}

.contact-form h3{

font-size:26px;

}

.map-wrapper iframe{

height:350px;

}

}

@media(max-width:480px){

.contact-form{

padding:22px;

}

.submit-btn{

width:100%;

justify-content:center;

}

}


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

.footer{
    background:#111;
    color:#fff;
    padding:90px 0 30px;
    position:relative;
    overflow:hidden;
}

.footer::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:5px;
    background:linear-gradient(90deg,#d62828,#f4b400,#d62828);
}

.footer .container{
    display:grid;
    grid-template-columns:2fr 1fr 1fr 1.5fr;
    gap:45px;
}

/*==============================
 Company Info
==============================*/

.footer-logo h2{
    color:#fff;
    font-size:34px;
    margin-bottom:15px;
}

.footer-logo span{
    color:#f4b400;
}

.footer-logo p{
    color:#cccccc;
    line-height:1.9;
    margin-bottom:25px;
}

/*==============================
 Footer Social Icons
==============================*/

.footer-social{
    display:flex;
    gap:15px;
}

.footer-social a{
    width:46px;
    height:46px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#222;
    color:#fff;
    font-size:18px;
    transition:.35s;
}

.footer-social a:hover{
    background:#d62828;
    transform:translateY(-5px);
}

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

.footer-title{
    color:#fff;
    font-size:24px;
    margin-bottom:28px;
    position:relative;
}

.footer-title::after{
    content:"";
    position:absolute;
    left:0;
    bottom:-10px;
    width:60px;
    height:3px;
    background:#d62828;
}

/*==============================
 Quick Links
==============================*/

.footer-links{
    list-style:none;
    padding:0;
    margin:0;
}

.footer-links li{
    margin-bottom:14px;
}

.footer-links li a{
    color:#cccccc;
    transition:.3s;
    text-decoration:none;
    display:inline-flex;
    align-items:center;
    gap:10px;
}

.footer-links li a i{
    color:#d62828;
    font-size:14px;
}

.footer-links li a:hover{
    color:#fff;
    padding-left:8px;
}

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

.footer-contact{
    list-style:none;
    padding:0;
    margin:0;
}

.footer-contact li{
    display:flex;
    gap:15px;
    margin-bottom:20px;
    color:#ddd;
    line-height:1.8;
}

.footer-contact i{
    color:#d62828;
    font-size:18px;
    margin-top:5px;
    min-width:20px;
}

/*==============================
 Newsletter
==============================*/

.newsletter{
    margin-top:20px;
}

.newsletter input{
    width:100%;
    padding:15px 18px;
    border:none;
    border-radius:50px;
    margin-bottom:15px;
    outline:none;
}

.newsletter button{
    width:100%;
    padding:15px;
    border:none;
    border-radius:50px;
    background:#d62828;
    color:#fff;
    cursor:pointer;
    font-size:16px;
    font-weight:600;
    transition:.35s;
}

.newsletter button:hover{
    background:#f4b400;
    color:#222;
}

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

.footer-bottom{
    margin-top:70px;
    padding-top:25px;
    border-top:1px solid rgba(255,255,255,.08);
    display:flex;
    justify-content:space-between;
    align-items:center;
    flex-wrap:wrap;
    gap:20px;
}

.footer-bottom p{
    color:#bbb;
    margin:0;
}

.footer-bottom a{
    color:#f4b400;
    text-decoration:none;
}

.footer-bottom a:hover{
    color:#fff;
}

/*==============================
 Payment Icons
==============================*/

.payment-icons{
    display:flex;
    gap:12px;
}

.payment-icons i{
    font-size:28px;
    color:#ccc;
    transition:.3s;
}

.payment-icons i:hover{
    color:#f4b400;
}

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

@media(max-width:1100px){

.footer .container{
    grid-template-columns:1fr 1fr;
}

}

@media(max-width:768px){

.footer{
    padding:70px 0 25px;
}

.footer .container{
    grid-template-columns:1fr;
}

.footer-bottom{
    flex-direction:column;
    text-align:center;
}

.footer-logo h2{
    font-size:30px;
}

}

@media(max-width:480px){

.footer-title{
    font-size:22px;
}

.footer-logo h2{
    font-size:26px;
}

.footer-social{
    justify-content:center;
}

.payment-icons{
    justify-content:center;
}

}



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

.whatsapp-float{

    position:fixed;

    right:25px;

    bottom:95px;

    width:65px;

    height:65px;

    border-radius:50%;

    background:#25D366;

    color:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:32px;

    text-decoration:none;

    z-index:9999;

    box-shadow:0 10px 30px rgba(37,211,102,.35);

    transition:.35s ease;

    animation:whatsappPulse 2s infinite;

}

.whatsapp-float:hover{

    transform:translateY(-8px) scale(1.08);

    background:#1ebc57;

    color:#fff;

    box-shadow:0 18px 45px rgba(37,211,102,.45);

}

.whatsapp-float::before{

    content:"";

    position:absolute;

    inset:-8px;

    border-radius:50%;

    border:2px solid rgba(37,211,102,.4);

    animation:ripple 2s infinite;

}

.whatsapp-float::after{

    content:"WhatsApp";

    position:absolute;

    right:80px;

    white-space:nowrap;

    background:#222;

    color:#fff;

    padding:8px 14px;

    border-radius:30px;

    font-size:14px;

    font-weight:600;

    opacity:0;

    visibility:hidden;

    transition:.35s;

}

.whatsapp-float:hover::after{

    opacity:1;

    visibility:visible;

}

/*==================================================
        FLOATING CALL BUTTON
==================================================*/

.call-float{

    position:fixed;

    right:25px;

    bottom:175px;

    width:65px;

    height:65px;

    border-radius:50%;

    background:#d62828;

    color:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:28px;

    text-decoration:none;

    z-index:9998;

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

    transition:.35s;

}

.call-float:hover{

    background:#111;

    transform:translateY(-8px);

}

/*==================================================
        BACK TO TOP BUTTON
==================================================*/

.back-to-top{

    position:fixed;

    right:25px;

    bottom:15px;

    width:55px;

    height:55px;

    border:none;

    border-radius:50%;

    background:#d62828;

    color:#fff;

    font-size:22px;

    cursor:pointer;

    display:flex;

    align-items:center;

    justify-content:center;

    opacity:0;

    visibility:hidden;

    transition:.35s;

    z-index:9999;

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

}

.back-to-top.active{

    opacity:1;

    visibility:visible;

}

.back-to-top:hover{

    background:#111;

    transform:translateY(-6px);

}

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

.scroll-progress{

    position:fixed;

    right:22px;

    bottom:12px;

    width:62px;

    height:62px;

    border-radius:50%;

    pointer-events:none;

    z-index:9997;

    background:conic-gradient(#d62828 0deg,#d62828 var(--progress,0deg),#ddd var(--progress,0deg));

    opacity:.18;

}

/*==================================================
        FLOATING LABEL
==================================================*/

.float-label{

    position:absolute;

    right:82px;

    background:#111;

    color:#fff;

    padding:8px 14px;

    border-radius:25px;

    font-size:13px;

    font-weight:500;

    white-space:nowrap;

    opacity:0;

    visibility:hidden;

    transition:.35s;

}

.call-float:hover .float-label{

    opacity:1;

    visibility:visible;

}

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

@keyframes whatsappPulse{

0%{

transform:scale(1);

box-shadow:0 0 0 0 rgba(37,211,102,.45);

}

70%{

transform:scale(1.05);

box-shadow:0 0 0 18px rgba(37,211,102,0);

}

100%{

transform:scale(1);

box-shadow:0 0 0 0 rgba(37,211,102,0);

}

}

/* Ripple */

@keyframes ripple{

0%{

transform:scale(.9);

opacity:1;

}

100%{

transform:scale(1.5);

opacity:0;

}

}

/* Floating Animation */

@keyframes floating{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-8px);

}

100%{

transform:translateY(0);

}

}

.whatsapp-float,
.call-float{

animation:floating 3s ease-in-out infinite;

}

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

@media(max-width:768px){

.whatsapp-float{

width:58px;

height:58px;

font-size:28px;

right:18px;

bottom:88px;

}

.call-float{

width:58px;

height:58px;

font-size:24px;

right:18px;

bottom:158px;

}

.back-to-top{

width:50px;

height:50px;

right:18px;

bottom:15px;

}

.whatsapp-float::after{

display:none;

}

.float-label{

display:none;

}

}

@media(max-width:480px){

.whatsapp-float{

width:55px;

height:55px;

}

.call-float{

width:55px;

height:55px;

}

.back-to-top{

width:48px;

height:48px;

}

}


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

.page-loader{
    position:fixed;
    inset:0;
    width:100%;
    height:100%;
    background:#ffffff;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-direction:column;
    z-index:99999;
    transition:all .6s ease;
}

.page-loader.hide{
    opacity:0;
    visibility:hidden;
    pointer-events:none;
}

.loader-wrapper{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
}

.loader-logo{
    font-size:34px;
    font-weight:700;
    color:#d62828;
    margin-bottom:30px;
    letter-spacing:1px;
    text-align:center;
}

.loader-logo span{
    color:#f4b400;
}

.loader-ring{
    position:relative;
    width:90px;
    height:90px;
}

.loader-ring::before,
.loader-ring::after{
    content:"";
    position:absolute;
    inset:0;
    border-radius:50%;
    border:6px solid transparent;
}

.loader-ring::before{
    border-top-color:#d62828;
    animation:loaderRotate 1s linear infinite;
}

.loader-ring::after{
    inset:10px;
    border-bottom-color:#f4b400;
    animation:loaderRotateReverse 1.2s linear infinite;
}

.loader-text{
    margin-top:25px;
    font-size:16px;
    color:#666;
    letter-spacing:2px;
    font-weight:600;
    text-transform:uppercase;
}

.loader-progress{
    width:220px;
    height:8px;
    background:#ececec;
    border-radius:30px;
    overflow:hidden;
    margin-top:25px;
}

.loader-progress span{
    display:block;
    width:0%;
    height:100%;
    background:linear-gradient(90deg,#d62828,#f4b400);
    animation:loadingBar 2.5s ease-in-out infinite;
}

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

.loader-dots{
    display:flex;
    gap:8px;
    margin-top:20px;
}

.loader-dots span{
    width:12px;
    height:12px;
    border-radius:50%;
    background:#d62828;
    animation:dotBounce 1.4s infinite ease-in-out;
}

.loader-dots span:nth-child(2){
    animation-delay:.2s;
}

.loader-dots span:nth-child(3){
    animation-delay:.4s;
}

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

@keyframes loaderRotate{

    from{
        transform:rotate(0deg);
    }

    to{
        transform:rotate(360deg);
    }

}

@keyframes loaderRotateReverse{

    from{
        transform:rotate(360deg);
    }

    to{
        transform:rotate(0deg);
    }

}

@keyframes loadingBar{

    0%{
        width:0%;
    }

    50%{
        width:75%;
    }

    100%{
        width:100%;
    }

}

@keyframes dotBounce{

    0%,80%,100%{
        transform:scale(.5);
        opacity:.5;
    }

    40%{
        transform:scale(1.2);
        opacity:1;
    }

}

/*==============================
    FADE OUT WHEN PAGE READY
==============================*/

body.loaded .page-loader{
    opacity:0;
    visibility:hidden;
    pointer-events:none;
}

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

@media(max-width:768px){

    .loader-logo{
        font-size:28px;
    }

    .loader-ring{
        width:75px;
        height:75px;
    }

    .loader-progress{
        width:180px;
    }

    .loader-text{
        font-size:14px;
        letter-spacing:1px;
    }

}

@media(max-width:480px){

    .loader-logo{
        font-size:24px;
    }

    .loader-ring{
        width:65px;
        height:65px;
    }

    .loader-progress{
        width:150px;
        height:6px;
    }

    .loader-dots span{
        width:10px;
        height:10px;
    }

}
/*==================================================
    UTILITY CLASSES
    Part 3B-2C-3B-1
    Margin • Padding • Display • Position
==================================================*/

/*==============================
    DISPLAY
==============================*/

.d-none{display:none!important;}
.d-block{display:block!important;}
.d-inline{display:inline!important;}
.d-inline-block{display:inline-block!important;}
.d-flex{display:flex!important;}
.d-grid{display:grid!important;}

/*==============================
    POSITION
==============================*/

.position-static{position:static!important;}
.position-relative{position:relative!important;}
.position-absolute{position:absolute!important;}
.position-fixed{position:fixed!important;}
.position-sticky{
    position:sticky!important;
    top:0;
}

.top-0{top:0!important;}
.right-0{right:0!important;}
.bottom-0{bottom:0!important;}
.left-0{left:0!important;}

.z-1{z-index:1;}
.z-10{z-index:10;}
.z-100{z-index:100;}
.z-1000{z-index:1000;}
.z-max{z-index:9999;}

/*==============================
    MARGIN
==============================*/

.m-0{margin:0!important;}
.m-5{margin:5px!important;}
.m-10{margin:10px!important;}
.m-15{margin:15px!important;}
.m-20{margin:20px!important;}
.m-25{margin:25px!important;}
.m-30{margin:30px!important;}
.m-40{margin:40px!important;}
.m-50{margin:50px!important;}
.m-auto{margin:auto!important;}

/* Top */

.mt-0{margin-top:0!important;}
.mt-5{margin-top:5px!important;}
.mt-10{margin-top:10px!important;}
.mt-15{margin-top:15px!important;}
.mt-20{margin-top:20px!important;}
.mt-25{margin-top:25px!important;}
.mt-30{margin-top:30px!important;}
.mt-40{margin-top:40px!important;}
.mt-50{margin-top:50px!important;}
.mt-60{margin-top:60px!important;}
.mt-80{margin-top:80px!important;}

/* Bottom */

.mb-0{margin-bottom:0!important;}
.mb-5{margin-bottom:5px!important;}
.mb-10{margin-bottom:10px!important;}
.mb-15{margin-bottom:15px!important;}
.mb-20{margin-bottom:20px!important;}
.mb-25{margin-bottom:25px!important;}
.mb-30{margin-bottom:30px!important;}
.mb-40{margin-bottom:40px!important;}
.mb-50{margin-bottom:50px!important;}
.mb-60{margin-bottom:60px!important;}
.mb-80{margin-bottom:80px!important;}

/* Left */

.ml-0{margin-left:0!important;}
.ml-5{margin-left:5px!important;}
.ml-10{margin-left:10px!important;}
.ml-15{margin-left:15px!important;}
.ml-20{margin-left:20px!important;}
.ml-30{margin-left:30px!important;}
.ml-auto{margin-left:auto!important;}

/* Right */

.mr-0{margin-right:0!important;}
.mr-5{margin-right:5px!important;}
.mr-10{margin-right:10px!important;}
.mr-15{margin-right:15px!important;}
.mr-20{margin-right:20px!important;}
.mr-30{margin-right:30px!important;}
.mr-auto{margin-right:auto!important;}

/* Horizontal */

.mx-auto{
    margin-left:auto!important;
    margin-right:auto!important;
}

.mx-10{
    margin-left:10px!important;
    margin-right:10px!important;
}

.mx-20{
    margin-left:20px!important;
    margin-right:20px!important;
}

.mx-30{
    margin-left:30px!important;
    margin-right:30px!important;
}

/* Vertical */

.my-10{
    margin-top:10px!important;
    margin-bottom:10px!important;
}

.my-20{
    margin-top:20px!important;
    margin-bottom:20px!important;
}

.my-30{
    margin-top:30px!important;
    margin-bottom:30px!important;
}

.my-50{
    margin-top:50px!important;
    margin-bottom:50px!important;
}

/*==============================
    PADDING
==============================*/

.p-0{padding:0!important;}
.p-5{padding:5px!important;}
.p-10{padding:10px!important;}
.p-15{padding:15px!important;}
.p-20{padding:20px!important;}
.p-25{padding:25px!important;}
.p-30{padding:30px!important;}
.p-40{padding:40px!important;}
.p-50{padding:50px!important;}

/* Top */

.pt-0{padding-top:0!important;}
.pt-10{padding-top:10px!important;}
.pt-20{padding-top:20px!important;}
.pt-30{padding-top:30px!important;}
.pt-40{padding-top:40px!important;}
.pt-50{padding-top:50px!important;}
.pt-60{padding-top:60px!important;}
.pt-80{padding-top:80px!important;}
.pt-100{padding-top:100px!important;}

/* Bottom */

.pb-0{padding-bottom:0!important;}
.pb-10{padding-bottom:10px!important;}
.pb-20{padding-bottom:20px!important;}
.pb-30{padding-bottom:30px!important;}
.pb-40{padding-bottom:40px!important;}
.pb-50{padding-bottom:50px!important;}
.pb-60{padding-bottom:60px!important;}
.pb-80{padding-bottom:80px!important;}
.pb-100{padding-bottom:100px!important;}

/* Left */

.pl-0{padding-left:0!important;}
.pl-10{padding-left:10px!important;}
.pl-20{padding-left:20px!important;}
.pl-30{padding-left:30px!important;}
.pl-40{padding-left:40px!important;}

/* Right */

.pr-0{padding-right:0!important;}
.pr-10{padding-right:10px!important;}
.pr-20{padding-right:20px!important;}
.pr-30{padding-right:30px!important;}
.pr-40{padding-right:40px!important;}

/* Horizontal */

.px-10{
    padding-left:10px!important;
    padding-right:10px!important;
}

.px-20{
    padding-left:20px!important;
    padding-right:20px!important;
}

.px-30{
    padding-left:30px!important;
    padding-right:30px!important;
}

.px-50{
    padding-left:50px!important;
    padding-right:50px!important;
}

/* Vertical */

.py-10{
    padding-top:10px!important;
    padding-bottom:10px!important;
}

.py-20{
    padding-top:20px!important;
    padding-bottom:20px!important;
}

.py-30{
    padding-top:30px!important;
    padding-bottom:30px!important;
}

.py-50{
    padding-top:50px!important;
    padding-bottom:50px!important;
}
/* =========================================
   3B-2C-3B-2
   UTILITY CLASSES
   Width / Height / Overflow / Z-index
   ========================================= */


/* =========================================
   WIDTH UTILITIES
   ========================================= */

.w-auto {
    width: auto;
}

.w-25 {
    width: 25%;
}

.w-50 {
    width: 50%;
}

.w-75 {
    width: 75%;
}

.w-100 {
    width: 100%;
}

.w-fit {
    width: fit-content;
}

.w-screen {
    width: 100vw;
}


/* =========================================
   HEIGHT UTILITIES
   ========================================= */

.h-auto {
    height: auto;
}

.h-25 {
    height: 25%;
}

.h-50 {
    height: 50%;
}

.h-75 {
    height: 75%;
}

.h-100 {
    height: 100%;
}

.h-screen {
    height: 100vh;
}

.min-h-screen {
    min-height: 100vh;
}



/* =========================================
   MAX WIDTH
   ========================================= */

.max-w-300 {
    max-width:300px;
}

.max-w-500 {
    max-width:500px;
}

.max-w-700 {
    max-width:700px;
}

.max-w-1000 {
    max-width:1000px;
}

.max-w-full {
    max-width:100%;
}



/* =========================================
   OVERFLOW UTILITIES
   ========================================= */

.overflow-hidden {
    overflow:hidden;
}

.overflow-auto {
    overflow:auto;
}

.overflow-scroll {
    overflow:scroll;
}

.overflow-visible {
    overflow:visible;
}

.overflow-x-hidden {
    overflow-x:hidden;
}

.overflow-y-hidden {
    overflow-y:hidden;
}



/* =========================================
   Z-INDEX UTILITIES
   ========================================= */

.z-0 {
    z-index:0;
}

.z-10 {
    z-index:10;
}

.z-20 {
    z-index:20;
}

.z-30 {
    z-index:30;
}

.z-50 {
    z-index:50;
}

.z-100 {
    z-index:100;
}



/* =========================================
   OPACITY UTILITIES
   ========================================= */

.opacity-0 {
    opacity:0;
}

.opacity-25 {
    opacity:.25;
}

.opacity-50 {
    opacity:.5;
}

.opacity-75 {
    opacity:.75;
}

.opacity-100 {
    opacity:1;
}



/* =========================================
   CURSOR UTILITIES
   ========================================= */

.cursor-pointer {
    cursor:pointer;
}

.cursor-default {
    cursor:default;
}

.cursor-not-allowed {
    cursor:not-allowed;
}

.cursor-move {
    cursor:move;
}



/* =========================================
   BORDER UTILITIES
   ========================================= */

.border-none {
    border:none;
}

.border {
    border:1px solid #ddd;
}

.border-top {
    border-top:1px solid #ddd;
}

.border-bottom {
    border-bottom:1px solid #ddd;
}

.border-left {
    border-left:1px solid #ddd;
}

.border-right {
    border-right:1px solid #ddd;
}



/* =========================================
   BORDER WIDTH
   ========================================= */

.border-2 {
    border-width:2px;
}

.border-3 {
    border-width:3px;
}

.border-5 {
    border-width:5px;
}



/* =========================================
   BORDER STYLE
   ========================================= */

.border-solid {
    border-style:solid;
}

.border-dashed {
    border-style:dashed;
}

.border-dotted {
    border-style:dotted;
}



/* =========================================
   BORDER RADIUS
   ========================================= */

.round-none {
    border-radius:0;
}

.round-sm {
    border-radius:5px;
}

.round {
    border-radius:10px;
}

.round-md {
    border-radius:15px;
}

.round-lg {
    border-radius:25px;
}

.round-xl {
    border-radius:40px;
}

.round-full {
    border-radius:50%;
}



/* =========================================
   BOX SHADOW
   ========================================= */

.shadow-none {
    box-shadow:none;
}

.shadow-sm {
    box-shadow:0 2px 8px rgba(0,0,0,.08);
}

.shadow {
    box-shadow:0 5px 20px rgba(0,0,0,.12);
}

.shadow-lg {
    box-shadow:0 10px 40px rgba(0,0,0,.18);
}



/* =========================================
   BACKGROUND UTILITIES
   ========================================= */

.bg-transparent {
    background:transparent;
}

.bg-white {
    background:#ffffff;
}

.bg-black {
    background:#000000;
}

.bg-light {
    background:#f8f9fa;
}

.bg-dark {
    background:#222;
}



/* =========================================
   TEXT ALIGNMENT
   ========================================= */

.text-left {
    text-align:left;
}

.text-center {
    text-align:center;
}

.text-right {
    text-align:right;
}

.text-justify {
    text-align:justify;
}



/* =========================================
   TEXT TRANSFORM
   ========================================= */

.uppercase {
    text-transform:uppercase;
}

.lowercase {
    text-transform:lowercase;
}

.capitalize {
    text-transform:capitalize;
}



/* =========================================
   FONT WEIGHT
   ========================================= */

.fw-light {
    font-weight:300;
}

.fw-normal {
    font-weight:400;
}

.fw-medium {
    font-weight:500;
}

.fw-bold {
    font-weight:700;
}

.fw-black {
    font-weight:900;
}



/* =========================================
   VISIBILITY
   ========================================= */

.visible {
    visibility:visible;
}

.invisible {
    visibility:hidden;
}



/* =========================================
   POINTER EVENTS
   ========================================= */

.pointer-none {
    pointer-events:none;
}

.pointer-auto {
    pointer-events:auto;
}



/* =========================================
   IMAGE UTILITIES
   ========================================= */

.img-fluid {
    max-width:100%;
    height:auto;
}

.object-cover {
    object-fit:cover;
}

.object-contain {
    object-fit:contain;
}



/* =========================================
   TRANSITION UTILITIES
   ========================================= */

.transition {
    transition:all .3s ease;
}

.transition-fast {
    transition:all .15s ease;
}

.transition-slow {
    transition:all .6s ease;
}



/* =========================================
   HOVER EFFECT
   ========================================= */

.hover-scale:hover {
    transform:scale(1.05);
}

.hover-shadow:hover {
    box-shadow:0 10px 30px rgba(0,0,0,.15);
}



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

@media(max-width:768px){

    .mobile-hidden {
        display:none;
    }

    .mobile-w-100 {
        width:100%;
    }

    .mobile-text-center {
        text-align:center;
    }

}


@media(min-width:769px){

    .desktop-hidden {
        display:none;
    }

}
/* =========================================
   3B-2C-3C
   FLEXBOX + GRID + RESPONSIVE SYSTEM
   ========================================= */


/* =========================================
   CONTAINER SYSTEM
   ========================================= */

.container {
    width:100%;
    max-width:1200px;
    margin:0 auto;
    padding-left:15px;
    padding-right:15px;
}

.container-fluid {
    width:100%;
    padding-left:15px;
    padding-right:15px;
}


.container-sm {
    max-width:540px;
    margin:auto;
}

.container-md {
    max-width:720px;
    margin:auto;
}

.container-lg {
    max-width:960px;
    margin:auto;
}

.container-xl {
    max-width:1200px;
    margin:auto;
}

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



/* =========================================
   DISPLAY FLEX
   ========================================= */

.d-flex {
    display:flex;
}

.d-inline-flex {
    display:inline-flex;
}

.flex-row {
    flex-direction:row;
}

.flex-row-reverse {
    flex-direction:row-reverse;
}

.flex-column {
    flex-direction:column;
}

.flex-column-reverse {
    flex-direction:column-reverse;
}



/* =========================================
   FLEX WRAP
   ========================================= */

.flex-wrap {
    flex-wrap:wrap;
}

.flex-nowrap {
    flex-wrap:nowrap;
}

.flex-wrap-reverse {
    flex-wrap:wrap-reverse;
}



/* =========================================
   JUSTIFY CONTENT
   ========================================= */

.justify-start {
    justify-content:flex-start;
}

.justify-center {
    justify-content:center;
}

.justify-end {
    justify-content:flex-end;
}

.justify-between {
    justify-content:space-between;
}

.justify-around {
    justify-content:space-around;
}

.justify-evenly {
    justify-content:space-evenly;
}



/* =========================================
   ALIGN ITEMS
   ========================================= */

.items-start {
    align-items:flex-start;
}

.items-center {
    align-items:center;
}

.items-end {
    align-items:flex-end;
}

.items-stretch {
    align-items:stretch;
}

.items-baseline {
    align-items:baseline;
}



/* =========================================
   ALIGN CONTENT
   ========================================= */

.content-start {
    align-content:flex-start;
}

.content-center {
    align-content:center;
}

.content-end {
    align-content:flex-end;
}

.content-between {
    align-content:space-between;
}

.content-around {
    align-content:space-around;
}



/* =========================================
   FLEX GROW / SHRINK
   ========================================= */

.flex-1 {
    flex:1;
}

.flex-auto {
    flex:auto;
}

.flex-none {
    flex:none;
}

.grow {
    flex-grow:1;
}

.grow-0 {
    flex-grow:0;
}

.shrink {
    flex-shrink:1;
}

.shrink-0 {
    flex-shrink:0;
}



/* =========================================
   FLEX GAP
   ========================================= */

.gap-5 {
    gap:5px;
}

.gap-10 {
    gap:10px;
}

.gap-15 {
    gap:15px;
}

.gap-20 {
    gap:20px;
}

.gap-30 {
    gap:30px;
}

.gap-40 {
    gap:40px;
}



/* =========================================
   GRID SYSTEM
   ========================================= */

.d-grid {
    display:grid;
}


.grid-1 {
    grid-template-columns:repeat(1,1fr);
}

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

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

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

.grid-5 {
    grid-template-columns:repeat(5,1fr);
}

.grid-6 {
    grid-template-columns:repeat(6,1fr);
}



/* =========================================
   GRID COLUMN SPAN
   ========================================= */

.col-span-1 {
    grid-column:span 1;
}

.col-span-2 {
    grid-column:span 2;
}

.col-span-3 {
    grid-column:span 3;
}

.col-span-4 {
    grid-column:span 4;
}

.col-span-full {
    grid-column:1/-1;
}



/* =========================================
   GRID ROW
   ========================================= */

.row-span-2 {
    grid-row:span 2;
}

.row-span-3 {
    grid-row:span 3;
}



/* =========================================
   ALIGN SELF
   ========================================= */

.self-start {
    align-self:flex-start;
}

.self-center {
    align-self:center;
}

.self-end {
    align-self:flex-end;
}

.self-stretch {
    align-self:stretch;
}



/* =========================================
   ORDER UTILITIES
   ========================================= */

.order-1 {
    order:1;
}

.order-2 {
    order:2;
}

.order-3 {
    order:3;
}

.order-last {
    order:999;
}



/* =========================================
   POSITION HELPERS
   ========================================= */

.top-0 {
    top:0;
}

.right-0 {
    right:0;
}

.bottom-0 {
    bottom:0;
}

.left-0 {
    left:0;
}



/* =========================================
   ASPECT RATIO
   ========================================= */

.aspect-square {
    aspect-ratio:1/1;
}

.aspect-video {
    aspect-ratio:16/9;
}

.aspect-wide {
    aspect-ratio:21/9;
}



/* =========================================
   RESPONSIVE BREAKPOINT SYSTEM
   ========================================= */


/* Extra Small Devices */
@media(max-width:575px){

    .container{
        max-width:100%;
    }

    .xs-hidden{
        display:none;
    }

    .xs-column{
        flex-direction:column;
    }

    .xs-grid-1{
        grid-template-columns:1fr;
    }

}



/* Small Devices */
@media(min-width:576px){

    .container{
        max-width:540px;
    }

    .sm-grid-2{
        grid-template-columns:repeat(2,1fr);
    }

}



/* Medium Devices */
@media(min-width:768px){

    .container{
        max-width:720px;
    }

    .md-grid-2{
        grid-template-columns:repeat(2,1fr);
    }

    .md-grid-3{
        grid-template-columns:repeat(3,1fr);
    }

}



/* Large Devices */
@media(min-width:992px){

    .container{
        max-width:960px;
    }

    .lg-grid-3{
        grid-template-columns:repeat(3,1fr);
    }

    .lg-grid-4{
        grid-template-columns:repeat(4,1fr);
    }

}



/* Extra Large Devices */
@media(min-width:1200px){

    .container{
        max-width:1200px;
    }

    .xl-grid-4{
        grid-template-columns:repeat(4,1fr);
    }

    .xl-grid-5{
        grid-template-columns:repeat(5,1fr);
    }

}



/* XXL Devices */
@media(min-width:1400px){

    .container{
        max-width:1400px;
    }

}

/* =========================================
   3B-2C-3D
   ADVANCED ANIMATION SYSTEM
   ========================================= */


/* =========================================
   GLOBAL ANIMATION SETTINGS
   ========================================= */

.animate {
    animation-duration:.8s;
    animation-fill-mode:both;
}

.transition-all {
    transition:all .3s ease;
}

.transition-fast {
    transition:all .15s ease;
}

.transition-slow {
    transition:all .6s ease;
}



/* =========================================
   FADE ANIMATIONS
   ========================================= */

@keyframes fadeIn {

    from {
        opacity:0;
    }

    to {
        opacity:1;
    }

}


.fade-in {
    animation:fadeIn .8s ease forwards;
}



@keyframes fadeOut {

    from {
        opacity:1;
    }

    to {
        opacity:0;
    }

}


.fade-out {
    animation:fadeOut .8s ease forwards;
}



/* =========================================
   SLIDE ANIMATIONS
   ========================================= */

@keyframes slideUp {

    from {
        opacity:0;
        transform:translateY(40px);
    }

    to {
        opacity:1;
        transform:translateY(0);
    }

}


.slide-up {
    animation:slideUp .8s ease forwards;
}



@keyframes slideDown {

    from {
        opacity:0;
        transform:translateY(-40px);
    }

    to {
        opacity:1;
        transform:translateY(0);
    }

}


.slide-down {
    animation:slideDown .8s ease forwards;
}



@keyframes slideLeft {

    from {
        opacity:0;
        transform:translateX(50px);
    }

    to {
        opacity:1;
        transform:translateX(0);
    }

}


.slide-left {
    animation:slideLeft .8s ease forwards;
}



@keyframes slideRight {

    from {
        opacity:0;
        transform:translateX(-50px);
    }

    to {
        opacity:1;
        transform:translateX(0);
    }

}


.slide-right {
    animation:slideRight .8s ease forwards;
}



/* =========================================
   ZOOM ANIMATIONS
   ========================================= */


@keyframes zoomIn {

    from {
        opacity:0;
        transform:scale(.8);
    }

    to {
        opacity:1;
        transform:scale(1);
    }

}


.zoom-in {
    animation:zoomIn .7s ease forwards;
}



@keyframes zoomOut {

    from {
        opacity:0;
        transform:scale(1.2);
    }

    to {
        opacity:1;
        transform:scale(1);
    }

}


.zoom-out {
    animation:zoomOut .7s ease forwards;
}



/* =========================================
   ROTATE ANIMATIONS
   ========================================= */


@keyframes rotate {

    from {
        transform:rotate(0deg);
    }

    to {
        transform:rotate(360deg);
    }

}


.rotate {
    animation:rotate 3s linear infinite;
}



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


@keyframes bounce {

    0%,20%,50%,80%,100% {
        transform:translateY(0);
    }

    40% {
        transform:translateY(-20px);
    }

    60% {
        transform:translateY(-10px);
    }

}


.bounce {
    animation:bounce 2s infinite;
}



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


@keyframes pulse {

    0% {
        transform:scale(1);
    }

    50% {
        transform:scale(1.05);
    }

    100% {
        transform:scale(1);
    }

}


.pulse {
    animation:pulse 2s infinite;
}



/* =========================================
   FLOATING EFFECT
   ========================================= */


@keyframes floating {

    0% {
        transform:translateY(0);
    }

    50% {
        transform:translateY(-15px);
    }

    100% {
        transform:translateY(0);
    }

}


.float {
    animation:floating 3s ease-in-out infinite;
}



/* =========================================
   SHINE EFFECT
   ========================================= */


.shine {
    position:relative;
    overflow:hidden;
}


.shine::before {

    content:"";
    position:absolute;
    top:0;
    left:-100%;
    width:50%;
    height:100%;
    background:linear-gradient(
        120deg,
        transparent,
        rgba(255,255,255,.6),
        transparent
    );

    transition:.6s;

}


.shine:hover::before {

    left:120%;

}



/* =========================================
   HOVER TRANSFORM EFFECTS
   ========================================= */


.hover-up:hover {

    transform:translateY(-8px);

}


.hover-scale:hover {

    transform:scale(1.05);

}


.hover-rotate:hover {

    transform:rotate(5deg);

}


.hover-zoom:hover {

    transform:scale(1.1);

}



/* =========================================
   CARD HOVER EFFECT
   ========================================= */


.card-hover {

    transition:.35s ease;

}


.card-hover:hover {

    transform:translateY(-10px);

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

}



/* =========================================
   BUTTON ANIMATIONS
   ========================================= */


.btn {

    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:12px 30px;
    border-radius:8px;
    cursor:pointer;
    transition:.3s ease;

}


.btn:hover {

    transform:translateY(-3px);

}



.btn-scale:hover {

    transform:scale(1.08);

}



.btn-shadow:hover {

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

}



.btn-slide {

    position:relative;
    overflow:hidden;

}


.btn-slide::before {

    content:"";
    position:absolute;
    width:0;
    height:100%;
    left:0;
    top:0;
    transition:.4s;
    z-index:-1;

}


.btn-slide:hover::before {

    width:100%;

}



/* =========================================
   IMAGE HOVER EFFECTS
   ========================================= */


.img-hover {

    overflow:hidden;

}


.img-hover img {

    transition:.5s ease;

}


.img-hover:hover img {

    transform:scale(1.12);

}



/* =========================================
   LOADING SPINNER
   ========================================= */


.loader {

    width:45px;
    height:45px;
    border-radius:50%;
    border:5px solid #eee;
    border-top-color:#222;
    animation:rotate 1s linear infinite;

}



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


.dot-loader {

    display:flex;
    gap:8px;

}


.dot-loader span {

    width:10px;
    height:10px;
    border-radius:50%;
    animation:pulse 1s infinite;

}


.dot-loader span:nth-child(2){

    animation-delay:.2s;

}


.dot-loader span:nth-child(3){

    animation-delay:.4s;

}



/* =========================================
   SKELETON LOADING
   ========================================= */


.skeleton {

    background:#eee;
    border-radius:8px;
    animation:pulse 1.5s infinite;

}



/* =========================================
   SCROLL REVEAL SUPPORT
   ========================================= */


.reveal {

    opacity:0;
    transform:translateY(40px);
    transition:.8s ease;

}


.reveal.active {

    opacity:1;
    transform:translateY(0);

}



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


.delay-100 {

    animation-delay:.1s;

}

.delay-200 {

    animation-delay:.2s;

}

.delay-300 {

    animation-delay:.3s;

}

.delay-500 {

    animation-delay:.5s;

}

.delay-1000 {

    animation-delay:1s;

}



/* =========================================
   REDUCE MOTION ACCESSIBILITY
   ========================================= */


@media(prefers-reduced-motion:reduce){

    *,
    *::before,
    *::after{

        animation-duration:0.01ms!important;
        animation-iteration-count:1!important;
        transition-duration:0.01ms!important;

    }

}

/* =========================================
   3B-2C-3E
   HEADER + NAVBAR ADVANCED SYSTEM
   ========================================= */


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

.header {

    width:100%;
    position:relative;
    top:0;
    left:0;
    z-index:1000;
    background:#ffffff;
    transition:.3s ease;

}


.header-inner {

    display:flex;
    align-items:center;
    justify-content:space-between;
    min-height:80px;

}



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

.header-sticky {

    position:sticky;
    top:0;

}


.header-fixed {

    position:fixed;
    top:0;
    left:0;

}



.header-scrolled {

    box-shadow:
    0 5px 25px rgba(0,0,0,.12);

}



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

.header-glass {

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

    backdrop-filter:
    blur(12px);

    -webkit-backdrop-filter:
    blur(12px);

}



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

.logo {

    display:flex;
    align-items:center;
    text-decoration:none;

}


.logo img {

    max-width:180px;
    height:auto;

}


.logo-text {

    font-size:26px;
    font-weight:700;

}



/* =========================================
   NAVIGATION MENU
   ========================================= */

.navbar {

    display:flex;
    align-items:center;

}


.nav-menu {

    display:flex;
    align-items:center;
    gap:30px;
    list-style:none;
    margin:0;
    padding:0;

}



.nav-menu li {

    position:relative;

}



.nav-menu a {

    display:block;
    text-decoration:none;
    padding:10px 0;
    font-size:16px;
    font-weight:500;
    transition:.3s ease;

}



.nav-menu a:hover {

    opacity:.75;

}



/* =========================================
   ACTIVE MENU
   ========================================= */

.nav-menu .active > a {

    font-weight:700;

}



/* =========================================
   DROPDOWN MENU
   ========================================= */

.dropdown {

    position:absolute;
    top:100%;
    left:0;
    min-width:220px;
    padding:15px 0;
    background:#ffffff;
    border-radius:10px;
    box-shadow:
    0 15px 40px rgba(0,0,0,.15);

    opacity:0;
    visibility:hidden;
    transform:
    translateY(20px);

    transition:.3s ease;

}



.dropdown li {

    width:100%;

}



.dropdown a {

    padding:12px 20px;

}



.nav-menu li:hover > .dropdown {

    opacity:1;
    visibility:visible;
    transform:translateY(0);

}



/* =========================================
   DROPDOWN ARROW
   ========================================= */

.has-dropdown > a::after {

    content:"▼";
    font-size:10px;
    margin-left:8px;

}



/* =========================================
   MEGA MENU
   ========================================= */

.mega-menu {

    position:absolute;
    left:50%;
    top:100%;

    width:1000px;
    transform:
    translateX(-50%)
    translateY(20px);

    background:#ffffff;

    padding:30px;

    border-radius:15px;

    box-shadow:
    0 20px 50px rgba(0,0,0,.18);

    opacity:0;
    visibility:hidden;

    transition:.3s ease;

}



.nav-menu li:hover .mega-menu {

    opacity:1;
    visibility:visible;
    transform:
    translateX(-50%)
    translateY(0);

}



.mega-grid {

    display:grid;
    grid-template-columns:
    repeat(4,1fr);
    gap:30px;

}



.mega-title {

    font-size:18px;
    font-weight:700;
    margin-bottom:15px;

}



.mega-links {

    list-style:none;
    padding:0;
    margin:0;

}


.mega-links a {

    padding:8px 0;

}



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

.menu-toggle {

    display:none;
    width:45px;
    height:45px;

    border-radius:8px;

    cursor:pointer;

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

}



.menu-toggle span {

    display:block;
    width:25px;
    height:2px;
    margin:5px 0;

    transition:.3s ease;

}



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

.menu-toggle.active span:nth-child(1){

    transform:
    translateY(7px)
    rotate(45deg);

}


.menu-toggle.active span:nth-child(2){

    opacity:0;

}



.menu-toggle.active span:nth-child(3){

    transform:
    translateY(-7px)
    rotate(-45deg);

}



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


@media(max-width:991px){


.header-inner {

    min-height:70px;

}


.menu-toggle {

    display:flex;
    flex-direction:column;

}



.navbar {

    position:absolute;
    top:100%;
    left:0;

    width:100%;

    background:#ffffff;

    max-height:0;
    overflow:hidden;

    transition:.4s ease;

}



.navbar.active {

    max-height:600px;

}



.nav-menu {

    flex-direction:column;
    align-items:flex-start;

    padding:20px;

    gap:0;

}



.nav-menu li {

    width:100%;

}



.nav-menu a {

    padding:15px 0;

}



/* MOBILE DROPDOWN */

.dropdown {

    position:static;

    width:100%;

    box-shadow:none;

    display:none;

    opacity:1;
    visibility:visible;

    transform:none;

}



.has-dropdown.active 
.dropdown {

    display:block;

}



/* MOBILE MEGA MENU */

.mega-menu {

    position:static;

    width:100%;

    transform:none;

    box-shadow:none;

    display:none;

}



.mega-grid {

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

}



}



@media(max-width:575px){


.logo img {

    max-width:140px;

}


.header-inner {

    padding:0 15px;

}


}



/* =========================================
   TOP BAR
   ========================================= */

.top-bar {

    width:100%;
    padding:10px 0;

    font-size:14px;

}



.top-bar-inner {

    display:flex;
    justify-content:space-between;
    align-items:center;

}



@media(max-width:768px){

.top-bar-inner {

    flex-direction:column;
    gap:8px;

}

}



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


.header-btn {

    padding:12px 25px;

    border-radius:50px;

    transition:.3s ease;

}



.header-btn:hover {

    transform:
    translateY(-3px);

}



/* =========================================
   SEARCH ICON
   ========================================= */


.search-box {

    position:relative;

}


.search-dropdown {

    position:absolute;

    right:0;
    top:50px;

    width:300px;

    opacity:0;
    visibility:hidden;

    transition:.3s ease;

}



.search-box:hover 
.search-dropdown {

    opacity:1;
    visibility:visible;

}

/* =========================================
   3B-2C-3F
   HERO SECTION + SLIDER SYSTEM
   ========================================= */


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

.hero {

    position:relative;
    width:100%;
    min-height:650px;

    display:flex;
    align-items:center;
    overflow:hidden;

}


.hero-container {

    position:relative;
    z-index:5;

}



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

.hero-bg {

    position:absolute;
    inset:0;

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

    z-index:0;

}


.hero-overlay {

    position:absolute;
    inset:0;

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

    z-index:1;

}




/* =========================================
   3C
   ADVANCED WEBSITE COMPONENT SYSTEM
   ========================================= */


/* =========================================
   SECTION SYSTEM
   ========================================= */

.section {

    width:100%;
    padding:80px 0;

}


.section-sm {

    padding:50px 0;

}


.section-lg {

    padding:120px 0;

}


.section-title {

    text-align:center;
    margin-bottom:50px;

}


.section-title h2 {

    font-size:42px;
    line-height:1.2;
    margin-bottom:15px;

}


.section-title p {

    max-width:700px;
    margin:auto;
    line-height:1.7;

}



/* =========================================
   BUTTON SYSTEM
   ========================================= */

.btn {

    display:inline-flex;
    align-items:center;
    justify-content:center;

    gap:10px;

    padding:14px 32px;

    border:none;
    border-radius:8px;

    font-size:16px;
    font-weight:600;

    text-decoration:none;

    cursor:pointer;

    transition:.3s ease;

}



.btn-primary {

    background:#0066ff;
    color:#fff;

}


.btn-primary:hover {

    transform:translateY(-3px);

}



.btn-secondary {

    background:#222;
    color:#fff;

}



.btn-outline {

    background:transparent;

    border:2px solid #222;

}



.btn-outline:hover {

    background:#222;
    color:#fff;

}



.btn-rounded {

    border-radius:50px;

}


.btn-lg {

    padding:18px 45px;

    font-size:18px;

}


.btn-sm {

    padding:8px 18px;

    font-size:14px;

}



/* =========================================
   CARD SYSTEM
   ========================================= */

.card {

    background:#fff;

    border-radius:15px;

    padding:30px;

    transition:.35s ease;

}



.card:hover {

    transform:translateY(-8px);

}



.card-shadow {

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

}



.card-border {

    border:1px solid #eee;

}



/* =========================================
   SERVICE CARD
   ========================================= */


.service-card {

    text-align:center;

}



.service-icon {

    width:80px;
    height:80px;

    display:flex;

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

    margin:auto;

    border-radius:50%;

    font-size:35px;

    margin-bottom:25px;

}



.service-card h3 {

    font-size:24px;

    margin-bottom:15px;

}



.service-card p {

    line-height:1.7;

}



/* =========================================
   ICON BOX
   ========================================= */


.icon-box {

    display:flex;

    gap:20px;

    align-items:flex-start;

}


.icon-box-icon {

    min-width:60px;

    height:60px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:12px;

}



/* =========================================
   FEATURE BOX
   ========================================= */


.feature-box {

    padding:30px;

    border-radius:15px;

    transition:.3s ease;

}


.feature-box:hover {

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

}



/* =========================================
   PORTFOLIO SYSTEM
   ========================================= */


.portfolio-grid {

    display:grid;

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

    gap:30px;

}



.portfolio-item {

    position:relative;

    overflow:hidden;

    border-radius:15px;

}



.portfolio-item img {

    width:100%;

    transition:.5s ease;

}



.portfolio-item:hover img {

    transform:scale(1.1);

}



.portfolio-overlay {

    position:absolute;

    inset:0;

    display:flex;

    align-items:center;

    justify-content:center;

    opacity:0;

    transition:.4s ease;

}



.portfolio-item:hover 
.portfolio-overlay {

    opacity:1;

}



/* =========================================
   TESTIMONIAL SYSTEM
   ========================================= */


.testimonial {

    padding:35px;

    border-radius:15px;

}


.testimonial-text {

    font-size:18px;

    line-height:1.8;

    margin-bottom:25px;

}



.client-info {

    display:flex;

    align-items:center;

    gap:15px;

}



.client-image {

    width:60px;
    height:60px;

    border-radius:50%;

    overflow:hidden;

}



.client-image img {

    width:100%;
    height:100%;

    object-fit:cover;

}



/* =========================================
   PRICING TABLE
   ========================================= */


.pricing-card {

    padding:40px;

    border-radius:20px;

    text-align:center;

}



.pricing-card.featured {

    transform:scale(1.05);

}



.price {

    font-size:45px;

    font-weight:800;

    margin:25px 0;

}



.price span {

    font-size:16px;

    font-weight:400;

}



.pricing-list {

    list-style:none;

    padding:0;

    margin:30px 0;

}



.pricing-list li {

    padding:12px 0;

    border-bottom:1px solid #eee;

}



/* =========================================
   FORM SYSTEM
   ========================================= */


.form-group {

    margin-bottom:20px;

}



.form-control {

    width:100%;

    padding:15px 18px;

    border:1px solid #ddd;

    border-radius:8px;

    font-size:16px;

    outline:none;

    transition:.3s ease;

}



.form-control:focus {

    border-color:#0066ff;

}



textarea.form-control {

    min-height:150px;

    resize:vertical;

}



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


.contact-box {

    padding:40px;

    border-radius:20px;

}



.contact-item {

    display:flex;

    gap:15px;

    align-items:center;

    margin-bottom:20px;

}



/* =========================================
   COUNTER SECTION
   ========================================= */


.counter-box {

    text-align:center;

}



.counter-number {

    font-size:50px;

    font-weight:800;

}



.counter-title {

    font-size:18px;

}



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


.faq-item {

    border-bottom:1px solid #ddd;

    padding:20px 0;

}



.faq-title {

    display:flex;

    justify-content:space-between;

    cursor:pointer;

    font-weight:700;

}



.faq-content {

    display:none;

    padding-top:15px;

    line-height:1.7;

}



.faq-item.active 
.faq-content {

    display:block;

}



/* =========================================
   BREADCRUMB
   ========================================= */


.breadcrumb {

    display:flex;

    gap:10px;

    align-items:center;

    list-style:none;

    padding:0;

}



.breadcrumb a {

    text-decoration:none;

}



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


@media(max-width:992px){

.section {

    padding:60px 0;

}


.portfolio-grid {

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

}


.section-title h2 {

    font-size:34px;

}

}



@media(max-width:576px){


.section {

    padding:45px 0;

}


.portfolio-grid {

    grid-template-columns:1fr;

}


.card {

    padding:20px;

}


.pricing-card.featured {

    transform:none;

}


.section-title h2 {

    font-size:28px;

}


.btn-lg {

    width:100%;

}


}

/* =========================================
   3C-1
   ADVANCED FOOTER SYSTEM
   ========================================= */


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

.footer {

    width:100%;
    background:#111;
    color:#fff;

    padding:80px 0 0;

}


.footer-container {

    display:grid;

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

    gap:40px;

}



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

.footer-widget {

    margin-bottom:30px;

}



.footer-title {

    font-size:22px;

    font-weight:700;

    margin-bottom:25px;

    position:relative;

}



.footer-title::after {

    content:"";

    display:block;

    width:45px;

    height:3px;

    margin-top:12px;

}



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

.footer-logo {

    display:inline-block;

    margin-bottom:20px;

}



.footer-logo img {

    max-width:180px;

    height:auto;

}



.footer-description {

    line-height:1.8;

    font-size:15px;

    opacity:.8;

}



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

.footer-links {

    list-style:none;

    padding:0;

    margin:0;

}



.footer-links li {

    margin-bottom:14px;

}



.footer-links a {

    color:#fff;

    text-decoration:none;

    opacity:.8;

    transition:.3s ease;

}



.footer-links a:hover {

    opacity:1;

    padding-left:8px;

}



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

.footer-contact {

    list-style:none;

    padding:0;

    margin:0;

}



.footer-contact li {

    display:flex;

    gap:15px;

    align-items:flex-start;

    margin-bottom:18px;

    line-height:1.6;

}



.footer-contact i {

    min-width:25px;

}



/* =========================================
   SOCIAL ICON SYSTEM
   ========================================= */

.social-icons {

    display:flex;

    gap:12px;

    margin-top:25px;

}



.social-icons a {

    width:42px;

    height:42px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    text-decoration:none;

    transition:.3s ease;

}



.social-icons a:hover {

    transform:
    translateY(-5px);

}



/* =========================================
   SOCIAL BRAND COLORS
   ========================================= */

.social-facebook:hover {

    background:#1877f2;

    color:#fff;

}


.social-instagram:hover {

    background:#e4405f;

    color:#fff;

}


.social-linkedin:hover {

    background:#0a66c2;

    color:#fff;

}


.social-youtube:hover {

    background:#ff0000;

    color:#fff;

}


.social-twitter:hover {

    background:#1da1f2;

    color:#fff;

}



/* =========================================
   NEWSLETTER BOX
   ========================================= */

.newsletter {

    position:relative;

}



.newsletter-form {

    display:flex;

    margin-top:20px;

}



.newsletter-input {

    width:100%;

    padding:15px;

    border:none;

    outline:none;

    border-radius:
    8px 0 0 8px;

}



.newsletter-btn {

    padding:0 25px;

    border:none;

    cursor:pointer;

    border-radius:
    0 8px 8px 0;

}



/* =========================================
   FOOTER SERVICES LIST
   ========================================= */

.footer-service-list {

    list-style:none;

    padding:0;

}



.footer-service-list li {

    display:flex;

    align-items:center;

    gap:10px;

    margin-bottom:12px;

}



/* =========================================
   FOOTER BOTTOM BAR
   ========================================= */

.footer-bottom {

    margin-top:60px;

    padding:25px 0;

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

}



.footer-bottom-inner {

    display:flex;

    align-items:center;

    justify-content:space-between;

}



.copyright {

    font-size:14px;

    opacity:.8;

}



.footer-menu {

    display:flex;

    gap:25px;

    list-style:none;

    padding:0;

    margin:0;

}



.footer-menu a {

    color:#fff;

    text-decoration:none;

    font-size:14px;

}



/* =========================================
   BACK TO TOP BUTTON
   ========================================= */

.back-top {

    position:fixed;

    right:25px;

    bottom:25px;

    width:45px;

    height:45px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    cursor:pointer;

    opacity:0;

    visibility:hidden;

    transition:.3s ease;

    z-index:999;

}



.back-top.show {

    opacity:1;

    visibility:visible;

}



.back-top:hover {

    transform:
    translateY(-5px);

}



/* =========================================
   FOOTER SHAPE DESIGN
   ========================================= */

.footer-shape {

    position:absolute;

    top:-1px;

    left:0;

    width:100%;

    overflow:hidden;

    line-height:0;

}



/* =========================================
   FOOTER LIGHT VERSION
   ========================================= */

.footer-light {

    background:#f8f9fa;

    color:#222;

}



.footer-light a {

    color:#222;

}



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


@media(max-width:992px){


.footer-container {

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

}


.footer-bottom-inner {

    flex-direction:column;

    gap:20px;

}


}



@media(max-width:576px){


.footer {

    padding-top:50px;

}


.footer-container {

    grid-template-columns:1fr;

}


.footer-title {

    font-size:20px;

}


.newsletter-form {

    flex-direction:column;

    gap:10px;

}


.newsletter-input {

    border-radius:8px;

}


.newsletter-btn {

    height:45px;

    border-radius:8px;

}


.social-icons {

    justify-content:flex-start;

}


.footer-menu {

    flex-direction:column;

    gap:10px;

    text-align:center;

}


}


/* =========================================
   3C-2
   ADVANCED BLOG SYSTEM
   ========================================= */


/* =========================================
   BLOG GRID SYSTEM
   ========================================= */

.blog-grid {

    display:grid;

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

    gap:30px;

}



/* =========================================
   BLOG CARD
   ========================================= */

.blog-card {

    background:#fff;

    border-radius:15px;

    overflow:hidden;

    transition:.35s ease;

}



.blog-card:hover {

    transform:translateY(-8px);

}



.blog-image {

    position:relative;

    overflow:hidden;

}



.blog-image img {

    width:100%;

    height:250px;

    object-fit:cover;

    transition:.5s ease;

}



.blog-card:hover 
.blog-image img {

    transform:scale(1.1);

}



/* =========================================
   BLOG CATEGORY BADGE
   ========================================= */

.blog-category {

    position:absolute;

    top:20px;

    left:20px;

    padding:7px 18px;

    border-radius:50px;

    font-size:13px;

    font-weight:600;

}



/* =========================================
   BLOG CONTENT
   ========================================= */

.blog-content {

    padding:30px;

}



.blog-title {

    font-size:24px;

    line-height:1.4;

    margin-bottom:15px;

}



.blog-title a {

    text-decoration:none;

}



.blog-excerpt {

    line-height:1.8;

    margin-bottom:20px;

}



.blog-meta {

    display:flex;

    align-items:center;

    gap:15px;

    font-size:14px;

    opacity:.8;

}



/* =========================================
   BLOG READ MORE BUTTON
   ========================================= */

.read-more {

    display:inline-flex;

    align-items:center;

    gap:8px;

    font-weight:600;

    text-decoration:none;

    transition:.3s ease;

}



.read-more:hover {

    gap:15px;

}



/* =========================================
   FEATURED BLOG
   ========================================= */

.featured-blog {

    display:grid;

    grid-template-columns:

    repeat(2,1fr);

    gap:40px;

    align-items:center;

}



.featured-blog-image img {

    width:100%;

    border-radius:20px;

}



.featured-blog-content h2 {

    font-size:40px;

    line-height:1.3;

}



/* =========================================
   BLOG SIDEBAR
   ========================================= */

.blog-layout {

    display:grid;

    grid-template-columns:

    2fr 1fr;

    gap:40px;

}



.sidebar-widget {

    padding:30px;

    border-radius:15px;

    margin-bottom:30px;

}



.sidebar-title {

    font-size:22px;

    margin-bottom:20px;

}



/* =========================================
   SEARCH BOX
   ========================================= */

.blog-search {

    display:flex;

}



.blog-search input {

    width:100%;

    padding:14px;

    border:1px solid #ddd;

    outline:none;

}



.blog-search button {

    width:55px;

    border:none;

    cursor:pointer;

}



/* =========================================
   CATEGORY LIST
   ========================================= */

.category-list {

    list-style:none;

    padding:0;

}



.category-list li {

    display:flex;

    justify-content:space-between;

    padding:12px 0;

    border-bottom:1px solid #eee;

}



.category-list a {

    text-decoration:none;

}



/* =========================================
   RECENT POSTS
   ========================================= */

.recent-post {

    display:flex;

    gap:15px;

    margin-bottom:20px;

}



.recent-post img {

    width:80px;

    height:80px;

    border-radius:8px;

    object-fit:cover;

}



.recent-post h4 {

    font-size:15px;

    line-height:1.5;

}



/* =========================================
   SINGLE BLOG PAGE
   ========================================= */

.single-blog {

    max-width:850px;

    margin:auto;

}



.single-blog-title {

    font-size:48px;

    line-height:1.25;

    margin-bottom:25px;

}



.single-blog-meta {

    display:flex;

    gap:20px;

    margin-bottom:40px;

}



.single-blog-image img {

    width:100%;

    border-radius:20px;

}



.blog-content-area {

    font-size:18px;

    line-height:1.9;

}



.blog-content-area h2 {

    font-size:32px;

    margin-top:40px;

}



.blog-content-area h3 {

    font-size:26px;

    margin-top:30px;

}



.blog-content-area ul {

    padding-left:25px;

}



.blog-content-area li {

    margin-bottom:10px;

}



/* =========================================
   TABLE OF CONTENTS
   ========================================= */

.toc {

    padding:25px;

    border-radius:12px;

    margin:30px 0;

}



.toc ul {

    margin:0;

    padding-left:20px;

}



.toc a {

    text-decoration:none;

}



/* =========================================
   AUTHOR BOX
   ========================================= */

.author-box {

    display:flex;

    gap:20px;

    padding:30px;

    border-radius:15px;

    margin-top:50px;

}



.author-image img {

    width:80px;

    height:80px;

    border-radius:50%;

}



.author-info h4 {

    margin-bottom:10px;

}



/* =========================================
   BLOG TAGS
   ========================================= */

.blog-tags {

    display:flex;

    flex-wrap:wrap;

    gap:10px;

    margin-top:30px;

}



.blog-tag {

    padding:8px 16px;

    border-radius:50px;

    font-size:14px;

}



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

.share-buttons {

    display:flex;

    gap:12px;

    margin:30px 0;

}



.share-buttons a {

    width:40px;

    height:40px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

}



/* =========================================
   PAGINATION
   ========================================= */

.pagination {

    display:flex;

    justify-content:center;

    gap:10px;

    margin-top:50px;

}



.pagination a {

    width:42px;

    height:42px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:8px;

    text-decoration:none;

}



.pagination .active {

    font-weight:700;

}



/* =========================================
   COMMENTS SYSTEM
   ========================================= */

.comment-box {

    margin-top:50px;

}



.comment {

    display:flex;

    gap:20px;

    padding:25px 0;

    border-bottom:1px solid #eee;

}



.comment img {

    width:55px;

    height:55px;

    border-radius:50%;

}



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


@media(max-width:992px){


.blog-grid {

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

}


.blog-layout {

    grid-template-columns:1fr;

}


.featured-blog {

    grid-template-columns:1fr;

}


.featured-blog-content h2 {

    font-size:32px;

}


}



@media(max-width:576px){


.blog-grid {

    grid-template-columns:1fr;

}


.blog-content {

    padding:20px;

}


.blog-title {

    font-size:21px;

}


.single-blog-title {

    font-size:32px;

}


.single-blog-meta {

    flex-direction:column;

}


.author-box {

    flex-direction:column;

}


}

/* =========================================
   3C-3
   ADVANCED E-COMMERCE UI SYSTEM
   ========================================= */


/* =========================================
   SHOP LAYOUT
   ========================================= */

.shop-layout {

    display:grid;

    grid-template-columns:
    280px 1fr;

    gap:40px;

}



/* =========================================
   PRODUCT GRID
   ========================================= */

.product-grid {

    display:grid;

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

    gap:30px;

}



/* =========================================
   PRODUCT CARD
   ========================================= */

.product-card {

    background:#fff;

    border-radius:15px;

    overflow:hidden;

    position:relative;

    transition:.35s ease;

}



.product-card:hover {

    transform:translateY(-8px);

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

}



/* =========================================
   PRODUCT IMAGE
   ========================================= */

.product-image {

    position:relative;

    overflow:hidden;

}



.product-image img {

    width:100%;

    height:280px;

    object-fit:cover;

    transition:.5s ease;

}



.product-card:hover 
.product-image img {

    transform:scale(1.08);

}



/* =========================================
   PRODUCT BADGES
   ========================================= */

.product-badge {

    position:absolute;

    top:15px;

    left:15px;

    padding:7px 15px;

    border-radius:50px;

    font-size:12px;

    font-weight:600;

}



.sale-badge {

    right:15px;

    left:auto;

}



/* =========================================
   PRODUCT ACTION BUTTONS
   ========================================= */

.product-actions {

    position:absolute;

    top:15px;

    right:15px;

    display:flex;

    flex-direction:column;

    gap:10px;

    opacity:0;

    transform:
    translateX(20px);

    transition:.3s ease;

}



.product-card:hover 
.product-actions {

    opacity:1;

    transform:
    translateX(0);

}



.product-action-btn {

    width:40px;

    height:40px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    cursor:pointer;

}



/* =========================================
   PRODUCT CONTENT
   ========================================= */

.product-content {

    padding:25px;

}



.product-category {

    font-size:14px;

    opacity:.7;

}



.product-title {

    font-size:20px;

    margin:10px 0;

}



.product-title a {

    text-decoration:none;

}



.product-rating {

    display:flex;

    gap:5px;

    margin:10px 0;

}



.product-price {

    font-size:24px;

    font-weight:700;

}



.old-price {

    text-decoration:line-through;

    opacity:.5;

    margin-left:10px;

}



/* =========================================
   FILTER SIDEBAR
   ========================================= */

.shop-filter {

    padding:30px;

    border-radius:15px;

}



.filter-title {

    font-size:20px;

    font-weight:700;

    margin-bottom:20px;

}



.filter-group {

    margin-bottom:30px;

}



.filter-list {

    list-style:none;

    padding:0;

}



.filter-list li {

    margin-bottom:12px;

}



/* =========================================
   PRICE RANGE
   ========================================= */

.price-range {

    width:100%;

}



/* =========================================
   SHOP TOOLBAR
   ========================================= */

.shop-toolbar {

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:30px;

}



.sort-select {

    padding:12px 20px;

    border-radius:8px;

    border:1px solid #ddd;

}



/* =========================================
   PRODUCT DETAIL PAGE
   ========================================= */

.product-detail {

    display:grid;

    grid-template-columns:
    1fr 1fr;

    gap:50px;

}



.product-gallery img {

    width:100%;

    border-radius:20px;

}



.thumbnail-gallery {

    display:flex;

    gap:15px;

    margin-top:20px;

}



.thumbnail-gallery img {

    width:80px;

    height:80px;

    object-fit:cover;

    border-radius:10px;

    cursor:pointer;

}



/* =========================================
   PRODUCT INFORMATION
   ========================================= */

.product-info h1 {

    font-size:42px;

    line-height:1.3;

}



.product-description {

    font-size:17px;

    line-height:1.8;

    margin:25px 0;

}



.quantity-box {

    display:flex;

    align-items:center;

    gap:15px;

}



.quantity-btn {

    width:40px;

    height:40px;

    border-radius:8px;

    cursor:pointer;

}



.quantity-input {

    width:60px;

    text-align:center;

}



/* =========================================
   PRODUCT OPTIONS
   ========================================= */

.product-options {

    margin:25px 0;

}



.option-label {

    font-weight:600;

    margin-bottom:10px;

    display:block;

}



.option-list {

    display:flex;

    gap:10px;

}



.option-item {

    padding:10px 18px;

    border-radius:8px;

    cursor:pointer;

}



/* =========================================
   CART SYSTEM
   ========================================= */

.cart-table {

    width:100%;

    border-collapse:collapse;

}



.cart-table th,

.cart-table td {

    padding:20px;

    border-bottom:1px solid #eee;

    text-align:left;

}



.cart-product {

    display:flex;

    align-items:center;

    gap:20px;

}



.cart-product img {

    width:80px;

    height:80px;

    object-fit:cover;

    border-radius:10px;

}



/* =========================================
   CART SUMMARY
   ========================================= */

.cart-summary {

    padding:35px;

    border-radius:20px;

}



.summary-row {

    display:flex;

    justify-content:space-between;

    padding:15px 0;

}



.total-price {

    font-size:28px;

    font-weight:800;

}



/* =========================================
   CHECKOUT FORM
   ========================================= */

.checkout-layout {

    display:grid;

    grid-template-columns:
    1fr 400px;

    gap:40px;

}



.checkout-box {

    padding:35px;

    border-radius:20px;

}



/* =========================================
   WISHLIST
   ========================================= */

.wishlist-card {

    display:flex;

    gap:25px;

    padding:25px;

    border-radius:15px;

    margin-bottom:20px;

}



.wishlist-card img {

    width:120px;

    height:120px;

    object-fit:cover;

    border-radius:10px;

}



/* =========================================
   EMPTY CART
   ========================================= */

.empty-cart {

    text-align:center;

    padding:80px 20px;

}



.empty-cart-icon {

    font-size:80px;

}



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


@media(max-width:1200px){

.product-grid {

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

}

}



@media(max-width:992px){


.shop-layout {

    grid-template-columns:1fr;

}


.product-grid {

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

}


.product-detail {

    grid-template-columns:1fr;

}


.checkout-layout {

    grid-template-columns:1fr;

}


}



@media(max-width:576px){


.product-grid {

    grid-template-columns:1fr;

}


.product-content {

    padding:20px;

}


.product-info h1 {

    font-size:30px;

}


.shop-toolbar {

    flex-direction:column;

    gap:20px;

}


.cart-table {

    display:block;

    overflow-x:auto;

}


.wishlist-card {

    flex-direction:column;

}


}

/* =========================================
   3C-4
   ADVANCED LANDING PAGE SECTIONS
   ========================================= */


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

.about-section {

    display:grid;

    grid-template-columns:
    1fr 1fr;

    gap:60px;

    align-items:center;

}



.about-image {

    position:relative;

}



.about-image img {

    width:100%;

    border-radius:20px;

}



.about-content h2 {

    font-size:42px;

    line-height:1.3;

    margin-bottom:20px;

}



.about-content p {

    line-height:1.8;

    margin-bottom:20px;

}



/* =========================================
   ABOUT EXPERIENCE BADGE
   ========================================= */

.experience-box {

    position:absolute;

    bottom:30px;

    right:30px;

    padding:25px;

    border-radius:15px;

    text-align:center;

}



.experience-number {

    font-size:45px;

    font-weight:800;

}



.experience-text {

    font-size:16px;

}



/* =========================================
   MISSION VISION BOX
   ========================================= */

.mission-grid {

    display:grid;

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

    gap:30px;

}



.mission-card {

    padding:35px;

    border-radius:15px;

    text-align:center;

    transition:.3s ease;

}



.mission-card:hover {

    transform:translateY(-8px);

}



/* =========================================
   TIMELINE SECTION
   ========================================= */

.timeline {

    position:relative;

    max-width:900px;

    margin:auto;

}



.timeline::before {

    content:"";

    position:absolute;

    left:50%;

    top:0;

    width:3px;

    height:100%;

}



.timeline-item {

    width:50%;

    padding:25px 40px;

    position:relative;

}



.timeline-item:nth-child(odd){

    left:0;

    text-align:right;

}



.timeline-item:nth-child(even){

    left:50%;

}



.timeline-dot {

    position:absolute;

    top:30px;

    width:20px;

    height:20px;

    border-radius:50%;

}



.timeline-item:nth-child(odd)
.timeline-dot {

    right:-10px;

}



.timeline-item:nth-child(even)
.timeline-dot {

    left:-10px;

}



.timeline-content {

    padding:30px;

    border-radius:15px;

}



/* =========================================
   TEAM SECTION
   ========================================= */

.team-grid {

    display:grid;

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

    gap:30px;

}



.team-card {

    text-align:center;

    border-radius:20px;

    overflow:hidden;

    transition:.3s ease;

}



.team-card:hover {

    transform:translateY(-10px);

}



.team-image {

    position:relative;

}



.team-image img {

    width:100%;

    height:300px;

    object-fit:cover;

}



.team-content {

    padding:25px;

}



.team-name {

    font-size:22px;

    font-weight:700;

}



.team-role {

    margin-top:8px;

    opacity:.7;

}



/* =========================================
   TEAM SOCIAL ICONS
   ========================================= */

.team-social {

    display:flex;

    justify-content:center;

    gap:10px;

    margin-top:20px;

}



.team-social a {

    width:35px;

    height:35px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

}



/* =========================================
   CLIENT LOGO CAROUSEL
   ========================================= */

.logo-carousel {

    display:flex;

    align-items:center;

    gap:50px;

    overflow:hidden;

}



.logo-item {

    min-width:160px;

    display:flex;

    justify-content:center;

    align-items:center;

}



.logo-item img {

    max-width:130px;

    filter:grayscale(100%);

    opacity:.7;

    transition:.3s ease;

}



.logo-item:hover img {

    filter:none;

    opacity:1;

}



/* =========================================
   PROCESS STEPS
   ========================================= */

.process-grid {

    display:grid;

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

    gap:30px;

}



.process-card {

    text-align:center;

    padding:35px;

    border-radius:20px;

}



.process-number {

    width:70px;

    height:70px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:25px;

    font-weight:700;

    margin:auto auto 20px;

}



/* =========================================
   CTA BANNER
   ========================================= */

.cta-banner {

    position:relative;

    padding:80px;

    border-radius:25px;

    overflow:hidden;

}



.cta-content {

    position:relative;

    z-index:2;

}



.cta-content h2 {

    font-size:42px;

    line-height:1.3;

}



.cta-content p {

    font-size:18px;

    margin:20px 0 30px;

}



/* =========================================
   VIDEO SECTION
   ========================================= */

.video-section {

    position:relative;

    min-height:500px;

    overflow:hidden;

}



.video-section video {

    width:100%;

    height:100%;

    object-fit:cover;

    position:absolute;

    inset:0;

}



.video-overlay {

    position:absolute;

    inset:0;

}



.video-content {

    position:relative;

    z-index:2;

    height:100%;

    display:flex;

    align-items:center;

    justify-content:center;

    text-align:center;

}



/* =========================================
   PLAY BUTTON
   ========================================= */

.play-btn {

    width:90px;

    height:90px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:35px;

    cursor:pointer;

    transition:.3s ease;

}



.play-btn:hover {

    transform:scale(1.1);

}



/* =========================================
   REVIEW SLIDER CARD
   ========================================= */

.review-card {

    padding:40px;

    border-radius:20px;

}



.review-stars {

    margin-bottom:20px;

}



.review-text {

    font-size:18px;

    line-height:1.8;

}



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


@media(max-width:1200px){


.team-grid {

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

}


.process-grid {

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

}

}



@media(max-width:992px){


.about-section {

    grid-template-columns:1fr;

}


.mission-grid {

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

}


.timeline::before {

    left:20px;

}


.timeline-item {

    width:100%;

    left:0!important;

    padding-left:60px;

    text-align:left!important;

}


.timeline-item .timeline-dot {

    left:10px!important;

}


.cta-banner {

    padding:50px 30px;

}


}



@media(max-width:576px){


.team-grid {

    grid-template-columns:1fr;

}


.mission-grid {

    grid-template-columns:1fr;

}


.process-grid {

    grid-template-columns:1fr;

}


.about-content h2 {

    font-size:30px;

}


.cta-content h2 {

    font-size:28px;

}


}
/* =========================================
   3C-5
   SEO + MARKETING COMPONENT SYSTEM
   ========================================= */


/* =========================================
   FAQ ACCORDION ADVANCED
   ========================================= */

.faq-section {

    max-width:900px;

    margin:auto;

}



.faq-item {

    background:#fff;

    border-radius:12px;

    margin-bottom:15px;

    overflow:hidden;

    border:1px solid #eee;

}



.faq-question {

    width:100%;

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:22px 25px;

    font-size:18px;

    font-weight:600;

    cursor:pointer;

}



.faq-icon {

    width:35px;

    height:35px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    transition:.3s ease;

}



.faq-answer {

    max-height:0;

    overflow:hidden;

    padding:0 25px;

    line-height:1.8;

    transition:.4s ease;

}



.faq-item.active 
.faq-answer {

    max-height:300px;

    padding-bottom:25px;

}



.faq-item.active 
.faq-icon {

    transform:rotate(45deg);

}



/* =========================================
   LEAD GENERATION FORM
   ========================================= */

.lead-form-box {

    padding:45px;

    border-radius:25px;

}



.lead-form {

    display:grid;

    gap:20px;

}



.lead-input {

    width:100%;

    padding:16px 20px;

    border-radius:10px;

    border:1px solid #ddd;

    outline:none;

    font-size:16px;

}



.lead-input:focus {

    border-color:#0066ff;

}



.lead-textarea {

    min-height:150px;

    resize:none;

}



.lead-submit {

    padding:16px 30px;

    border:none;

    border-radius:50px;

    cursor:pointer;

    font-size:17px;

    font-weight:600;

    transition:.3s ease;

}



.lead-submit:hover {

    transform:
    translateY(-3px);

}



/* =========================================
   TRUST BADGES
   ========================================= */

.trust-grid {

    display:grid;

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

    gap:25px;

}



.trust-badge {

    text-align:center;

    padding:30px;

    border-radius:15px;

}



.trust-icon {

    width:70px;

    height:70px;

    margin:auto;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:30px;

    margin-bottom:20px;

}



.trust-title {

    font-size:20px;

    font-weight:700;

}



/* =========================================
   STAT COUNTER
   ========================================= */

.stats-section {

    display:grid;

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

    gap:30px;

}



.stat-box {

    text-align:center;

    padding:35px;

    border-radius:20px;

}



.stat-number {

    font-size:50px;

    font-weight:800;

    line-height:1;

}



.stat-label {

    margin-top:15px;

    font-size:18px;

}



/* =========================================
   GOOGLE REVIEW WIDGET
   ========================================= */

.review-widget {

    padding:35px;

    border-radius:20px;

}



.review-header {

    display:flex;

    align-items:center;

    justify-content:space-between;

    margin-bottom:25px;

}



.google-rating {

    display:flex;

    align-items:center;

    gap:15px;

}



.rating-number {

    font-size:35px;

    font-weight:800;

}



.stars {

    letter-spacing:3px;

}



.review-list {

    display:grid;

    gap:20px;

}



.review-item {

    padding:25px;

    border-radius:15px;

}



.reviewer {

    display:flex;

    align-items:center;

    gap:15px;

}



.reviewer img {

    width:55px;

    height:55px;

    border-radius:50%;

}



/* =========================================
   LOCAL SEO LOCATION BLOCK
   ========================================= */

.local-seo-box {

    padding:40px;

    border-radius:20px;

}



.location-grid {

    display:grid;

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

    gap:20px;

}



.location-card {

    padding:20px;

    border-radius:12px;

    display:flex;

    gap:15px;

    align-items:center;

}



.location-icon {

    width:45px;

    height:45px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

}



/* =========================================
   SERVICE AREA BLOCK
   ========================================= */

.service-area-list {

    display:flex;

    flex-wrap:wrap;

    gap:12px;

}



.service-area {

    padding:10px 20px;

    border-radius:50px;

    text-decoration:none;

    transition:.3s ease;

}



.service-area:hover {

    transform:
    translateY(-3px);

}



/* =========================================
   CLIENT LOGO TRUST SECTION
   ========================================= */

.client-trust {

    display:flex;

    justify-content:center;

    align-items:center;

    flex-wrap:wrap;

    gap:40px;

}



.client-trust img {

    max-width:130px;

    opacity:.7;

    transition:.3s ease;

}



.client-trust img:hover {

    opacity:1;

}



/* =========================================
   CTA LEAD SECTION
   ========================================= */

.lead-cta {

    display:grid;

    grid-template-columns:
    1fr 1fr;

    gap:50px;

    align-items:center;

}



.lead-cta h2 {

    font-size:45px;

    line-height:1.3;

}



.lead-points {

    list-style:none;

    padding:0;

}



.lead-points li {

    margin-bottom:15px;

    display:flex;

    gap:12px;

}



/* =========================================
   WHATSAPP FLOAT BUTTON
   ========================================= */

.whatsapp-btn {

    position:fixed;

    right:25px;

    bottom:90px;

    width:60px;

    height:60px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:28px;

    z-index:999;

    transition:.3s ease;

}



.whatsapp-btn:hover {

    transform:
    scale(1.1);

}



/* =========================================
   RESPONSIVE SEO COMPONENTS
   ========================================= */


@media(max-width:992px){


.trust-grid {

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

}


.stats-section {

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

}


.location-grid {

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

}


.lead-cta {

    grid-template-columns:1fr;

}


}



@media(max-width:576px){


.lead-form-box {

    padding:25px;

}


.trust-grid {

    grid-template-columns:1fr;

}


.stats-section {

    grid-template-columns:1fr;

}


.location-grid {

    grid-template-columns:1fr;

}


.lead-cta h2 {

    font-size:30px;

}


.whatsapp-btn {

    width:55px;

    height:55px;

}

}

/* =========================================
   3C-6
   ADVANCED BUSINESS WEBSITE COMPONENTS
   ========================================= */


/* =========================================
   CORPORATE HERO CONTENT
   ========================================= */

.business-hero {

    display:grid;

    grid-template-columns:
    1fr 1fr;

    gap:60px;

    align-items:center;

}


.business-hero-content h1 {

    font-size:52px;

    line-height:1.2;

    margin-bottom:25px;

}


.business-hero-content p {

    font-size:18px;

    line-height:1.8;

    margin-bottom:30px;

}



.business-hero-image img {

    width:100%;

    border-radius:25px;

}



/* =========================================
   BUSINESS FEATURE SECTION
   ========================================= */

.business-features {

    display:grid;

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

    gap:30px;

}



.business-feature-card {

    padding:35px;

    border-radius:20px;

    transition:.35s ease;

}



.business-feature-card:hover {

    transform:
    translateY(-10px);

}



.business-feature-icon {

    width:70px;

    height:70px;

    border-radius:15px;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:30px;

    margin-bottom:25px;

}



/* =========================================
   INDUSTRIAL PRODUCT SHOWCASE
   ========================================= */

.product-showcase {

    display:grid;

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

    gap:35px;

}



.industry-product-card {

    position:relative;

    overflow:hidden;

    border-radius:20px;

}



.industry-product-card img {

    width:100%;

    height:300px;

    object-fit:cover;

    transition:.5s ease;

}



.industry-product-card:hover img {

    transform:
    scale(1.1);

}



.product-overlay {

    position:absolute;

    inset:0;

    display:flex;

    align-items:flex-end;

    padding:30px;

    opacity:0;

    transition:.4s ease;

}



.industry-product-card:hover 
.product-overlay {

    opacity:1;

}



/* =========================================
   PRODUCT DETAIL FEATURE LIST
   ========================================= */

.product-detail-layout {

    display:grid;

    grid-template-columns:
    1fr 1fr;

    gap:50px;

}



.product-feature-list {

    list-style:none;

    padding:0;

}



.product-feature-list li {

    display:flex;

    align-items:center;

    gap:15px;

    margin-bottom:18px;

}



.feature-check {

    width:30px;

    height:30px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

}



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

.service-process {

    display:grid;

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

    gap:30px;

}



.process-item {

    text-align:center;

    position:relative;

}



.process-circle {

    width:90px;

    height:90px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:30px;

    font-weight:700;

    margin:auto auto 25px;

}



.process-item::after {

    content:"";

    position:absolute;

    top:45px;

    right:-50%;

    width:100%;

    height:2px;

}



.process-item:last-child::after {

    display:none;

}



/* =========================================
   INDUSTRY APPLICATION SECTION
   ========================================= */

.industry-grid {

    display:grid;

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

    gap:25px;

}



.industry-card {

    padding:30px;

    border-radius:15px;

    text-align:center;

}



.industry-card-icon {

    font-size:40px;

    margin-bottom:20px;

}



/* =========================================
   PROJECT / CASE STUDY
   ========================================= */

.case-study-grid {

    display:grid;

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

    gap:30px;

}



.case-study-card {

    overflow:hidden;

    border-radius:20px;

}



.case-study-image {

    position:relative;

}



.case-study-image img {

    width:100%;

    height:280px;

    object-fit:cover;

}



.case-study-content {

    padding:30px;

}



.case-study-title {

    font-size:24px;

    margin-bottom:15px;

}



/* =========================================
   BEFORE AFTER SECTION
   ========================================= */

.before-after {

    display:grid;

    grid-template-columns:
    1fr 1fr;

    gap:30px;

}



.before-after-item {

    position:relative;

    overflow:hidden;

    border-radius:20px;

}



.before-after-item img {

    width:100%;

}



/* =========================================
   CERTIFICATE SECTION
   ========================================= */

.certificate-grid {

    display:grid;

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

    gap:25px;

}



.certificate-card {

    padding:20px;

    border-radius:15px;

    text-align:center;

}



.certificate-card img {

    width:100%;

    height:220px;

    object-fit:contain;

}



.certificate-title {

    margin-top:15px;

    font-weight:700;

}



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

.download-box {

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:35px;

    border-radius:20px;

}



.download-info {

    display:flex;

    align-items:center;

    gap:20px;

}



.download-icon {

    width:60px;

    height:60px;

    border-radius:12px;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:25px;

}



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

.gallery-grid {

    display:grid;

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

    gap:20px;

}



.gallery-item {

    overflow:hidden;

    border-radius:15px;

}



.gallery-item img {

    width:100%;

    height:250px;

    object-fit:cover;

    transition:.5s ease;

}



.gallery-item:hover img {

    transform:
    scale(1.1);

}



/* =========================================
   INDUSTRIAL CTA
   ========================================= */

.industry-cta {

    padding:70px;

    border-radius:25px;

    text-align:center;

}



.industry-cta h2 {

    font-size:45px;

    margin-bottom:20px;

}



/* =========================================
   RESPONSIVE BUSINESS COMPONENTS
   ========================================= */


@media(max-width:1200px){


.industry-grid {

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

}


.certificate-grid {

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

}


.gallery-grid {

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

}

}



@media(max-width:992px){


.business-hero {

    grid-template-columns:1fr;

}


.business-features {

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

}


.product-showcase {

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

}


.product-detail-layout {

    grid-template-columns:1fr;

}


.service-process {

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

}


.case-study-grid {

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

}


.download-box {

    flex-direction:column;

    gap:25px;

}

}



@media(max-width:576px){


.business-hero-content h1 {

    font-size:34px;

}


.business-features {

    grid-template-columns:1fr;

}


.product-showcase {

    grid-template-columns:1fr;

}


.industry-grid {

    grid-template-columns:1fr;

}


.service-process {

    grid-template-columns:1fr;

}


.case-study-grid {

    grid-template-columns:1fr;

}


.certificate-grid {

    grid-template-columns:1fr;

}


.gallery-grid {

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

}


.industry-cta {

    padding:40px 20px;

}


.industry-cta h2 {

    font-size:30px;

}

}

/* =========================================
   3C-7
   ADVANCED MEDIA + CONTENT SYSTEM
   ========================================= */


/* =========================================
   VIDEO GALLERY SYSTEM
   ========================================= */

.video-gallery {

    display:grid;

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

    gap:30px;

}



.video-card {

    position:relative;

    overflow:hidden;

    border-radius:20px;

}



.video-card video {

    width:100%;

    height:300px;

    object-fit:cover;

}



.video-card-overlay {

    position:absolute;

    inset:0;

    display:flex;

    align-items:center;

    justify-content:center;

}



.video-play {

    width:75px;

    height:75px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:30px;

    cursor:pointer;

    transition:.3s ease;

}



.video-play:hover {

    transform:scale(1.15);

}



/* =========================================
   IMAGE LIGHTBOX SYSTEM
   ========================================= */

.lightbox-gallery {

    display:grid;

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

    gap:20px;

}



.lightbox-item {

    position:relative;

    overflow:hidden;

    border-radius:15px;

    cursor:pointer;

}



.lightbox-item img {

    width:100%;

    height:250px;

    object-fit:cover;

    transition:.5s ease;

}



.lightbox-item:hover img {

    transform:scale(1.1);

}



.lightbox-overlay {

    position:absolute;

    inset:0;

    display:flex;

    align-items:center;

    justify-content:center;

    opacity:0;

    transition:.3s ease;

}



.lightbox-item:hover 
.lightbox-overlay {

    opacity:1;

}



/* =========================================
   IMAGE POPUP MODAL
   ========================================= */

.image-modal {

    position:fixed;

    inset:0;

    display:none;

    align-items:center;

    justify-content:center;

    z-index:9999;

}



.image-modal.active {

    display:flex;

}



.image-modal img {

    max-width:90%;

    max-height:90%;

    border-radius:15px;

}



/* =========================================
   COMPARISON TABLE
   ========================================= */

.compare-table-wrapper {

    overflow-x:auto;

}



.compare-table {

    width:100%;

    border-collapse:collapse;

}



.compare-table th {

    padding:20px;

    font-size:18px;

}



.compare-table td {

    padding:18px;

    border-bottom:1px solid #eee;

}



.compare-table tr:hover {

    background:#f8f8f8;

}



/* =========================================
   COMPARISON CARD
   ========================================= */

.compare-card {

    display:grid;

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

    gap:30px;

}



.compare-item {

    padding:35px;

    border-radius:20px;

}



.compare-item h3 {

    font-size:28px;

    margin-bottom:20px;

}



/* =========================================
   TAB SYSTEM
   ========================================= */

.tabs {

    width:100%;

}



.tab-buttons {

    display:flex;

    gap:15px;

    flex-wrap:wrap;

    margin-bottom:30px;

}



.tab-btn {

    padding:12px 25px;

    border-radius:50px;

    cursor:pointer;

    transition:.3s ease;

}



.tab-btn.active {

    font-weight:700;

}



.tab-content {

    display:none;

    animation:fadeIn .4s ease;

}



.tab-content.active {

    display:block;

}



/* =========================================
   ADVANCED ACCORDION
   ========================================= */

.accordion {

    width:100%;

}



.accordion-item {

    border-bottom:1px solid #ddd;

}



.accordion-header {

    padding:20px 0;

    display:flex;

    justify-content:space-between;

    align-items:center;

    cursor:pointer;

    font-weight:700;

}



.accordion-body {

    max-height:0;

    overflow:hidden;

    transition:.4s ease;

    line-height:1.8;

}



.accordion-item.active 
.accordion-body {

    max-height:300px;

    padding-bottom:20px;

}



/* =========================================
   SEARCH RESULT PAGE
   ========================================= */

.search-page {

    max-width:1000px;

    margin:auto;

}



.search-box-large {

    display:flex;

    margin-bottom:40px;

}



.search-box-large input {

    width:100%;

    padding:18px 25px;

    border-radius:10px 0 0 10px;

    border:1px solid #ddd;

}



.search-box-large button {

    padding:0 35px;

    border:none;

    border-radius:

    0 10px 10px 0;

}



.search-result {

    padding:25px 0;

    border-bottom:1px solid #eee;

}



.search-result h3 {

    font-size:25px;

}



.search-result p {

    line-height:1.8;

}



/* =========================================
   EMPTY SEARCH RESULT
   ========================================= */

.no-result {

    text-align:center;

    padding:80px 20px;

}



.no-result h2 {

    font-size:40px;

}



/* =========================================
   404 ERROR PAGE
   ========================================= */

.error-page {

    min-height:80vh;

    display:flex;

    align-items:center;

    justify-content:center;

    text-align:center;

}



.error-number {

    font-size:180px;

    font-weight:900;

    line-height:1;

}



.error-title {

    font-size:40px;

    margin:20px 0;

}



.error-description {

    max-width:600px;

    margin:auto;

    line-height:1.8;

}



/* =========================================
   MAINTENANCE PAGE
   ========================================= */

.maintenance-page {

    min-height:100vh;

    display:flex;

    justify-content:center;

    align-items:center;

    text-align:center;

}



.maintenance-icon {

    font-size:100px;

}



/* =========================================
   COMING SOON PAGE
   ========================================= */

.countdown {

    display:flex;

    justify-content:center;

    gap:20px;

    margin:40px 0;

}



.count-box {

    width:100px;

    height:100px;

    border-radius:15px;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

}



.count-number {

    font-size:35px;

    font-weight:800;

}



/* =========================================
   RESPONSIVE MEDIA SYSTEM
   ========================================= */


@media(max-width:1200px){


.video-gallery {

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

}


.lightbox-gallery {

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

}

}



@media(max-width:992px){


.compare-card {

    grid-template-columns:1fr;

}



.error-number {

    font-size:120px;

}

}



@media(max-width:576px){


.video-gallery {

    grid-template-columns:1fr;

}


.lightbox-gallery {

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

}


.tab-buttons {

    flex-direction:column;

}


.tab-btn {

    width:100%;

}


.countdown {

    flex-wrap:wrap;

}


.error-number {

    font-size:80px;

}


.error-title {

    font-size:28px;

}

}

/* =========================================
   3C-8
   ADVANCED WEB APP UI COMPONENT SYSTEM
   ========================================= */


/* =========================================
   DASHBOARD LAYOUT
   ========================================= */

.dashboard {

    display:grid;

    grid-template-columns:
    260px 1fr;

    min-height:100vh;

}



/* =========================================
   DASHBOARD SIDEBAR
   ========================================= */

.dashboard-sidebar {

    padding:30px;

    position:sticky;

    top:0;

    height:100vh;

}



.dashboard-logo {

    margin-bottom:40px;

}



.dashboard-menu {

    list-style:none;

    padding:0;

}



.dashboard-menu li {

    margin-bottom:10px;

}



.dashboard-menu a {

    display:flex;

    align-items:center;

    gap:15px;

    padding:14px 18px;

    border-radius:10px;

    text-decoration:none;

    transition:.3s ease;

}



.dashboard-menu a:hover,

.dashboard-menu .active a {

    transform:translateX(5px);

}



/* =========================================
   DASHBOARD CONTENT
   ========================================= */

.dashboard-content {

    padding:40px;

}



.dashboard-header {

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:40px;

}



/* =========================================
   DASHBOARD CARDS
   ========================================= */

.dashboard-grid {

    display:grid;

    grid-template-columns:

    repeat(4,1fr);

    gap:25px;

}



.dashboard-card {

    padding:30px;

    border-radius:20px;

}



.dashboard-card-icon {

    width:60px;

    height:60px;

    border-radius:15px;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:25px;

    margin-bottom:20px;

}



.dashboard-value {

    font-size:35px;

    font-weight:800;

}



.dashboard-label {

    margin-top:10px;

    opacity:.7;

}



/* =========================================
   ANALYTICS CHART BOX
   ========================================= */

.chart-box {

    padding:30px;

    border-radius:20px;

    min-height:350px;

}



/* =========================================
   AUTH SYSTEM
   LOGIN / REGISTER
   ========================================= */

.auth-page {

    min-height:100vh;

    display:flex;

    justify-content:center;

    align-items:center;

}



.auth-box {

    width:100%;

    max-width:450px;

    padding:45px;

    border-radius:25px;

}



.auth-title {

    text-align:center;

    font-size:32px;

    margin-bottom:30px;

}



/* =========================================
   FORM INPUT GROUP
   ========================================= */

.input-group {

    position:relative;

    margin-bottom:20px;

}



.input-group input {

    width:100%;

    padding:15px 20px;

    border-radius:10px;

    border:1px solid #ddd;

    outline:none;

}



.input-group label {

    position:absolute;

    left:20px;

    top:50%;

    transform:translateY(-50%);

    pointer-events:none;

    transition:.3s ease;

}



.input-group input:focus + label,

.input-group input:not(:placeholder-shown)+label {

    top:-8px;

    font-size:12px;

}



/* =========================================
   PASSWORD SHOW BUTTON
   ========================================= */

.password-toggle {

    position:absolute;

    right:15px;

    top:50%;

    transform:translateY(-50%);

    cursor:pointer;

}



/* =========================================
   USER PROFILE
   ========================================= */

.profile-card {

    padding:35px;

    border-radius:20px;

    text-align:center;

}



.profile-image {

    width:120px;

    height:120px;

    margin:auto;

    border-radius:50%;

    overflow:hidden;

}



.profile-image img {

    width:100%;

    height:100%;

    object-fit:cover;

}



.profile-name {

    font-size:25px;

    font-weight:700;

    margin-top:20px;

}



.profile-role {

    opacity:.7;

}



/* =========================================
   PROFILE DETAILS
   ========================================= */

.profile-details {

    display:grid;

    grid-template-columns:

    repeat(2,1fr);

    gap:20px;

}



.profile-item {

    padding:20px;

    border-radius:12px;

}



/* =========================================
   NOTIFICATION SYSTEM
   ========================================= */

.notification {

    display:flex;

    gap:15px;

    align-items:flex-start;

    padding:20px;

    border-radius:15px;

    margin-bottom:15px;

}



.notification-icon {

    width:45px;

    height:45px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

}



.notification-success {

    border-left:4px solid green;

}



.notification-warning {

    border-left:4px solid orange;

}



.notification-error {

    border-left:4px solid red;

}



/* =========================================
   BADGE SYSTEM
   ========================================= */

.badge {

    display:inline-flex;

    padding:6px 14px;

    border-radius:50px;

    font-size:12px;

    font-weight:600;

}



.badge-success {

    background:#dff7e8;

}



.badge-warning {

    background:#fff3cd;

}



.badge-danger {

    background:#f8d7da;

}



/* =========================================
   PROGRESS BAR
   ========================================= */

.progress {

    width:100%;

    height:12px;

    border-radius:50px;

    overflow:hidden;

}



.progress-bar {

    height:100%;

    border-radius:inherit;

    transition:.5s ease;

}



/* =========================================
   CIRCULAR PROGRESS
   ========================================= */

.circle-progress {

    width:120px;

    height:120px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:25px;

    font-weight:700;

}



/* =========================================
   MODAL SYSTEM
   ========================================= */

.modal {

    position:fixed;

    inset:0;

    display:none;

    align-items:center;

    justify-content:center;

    z-index:9999;

}



.modal.active {

    display:flex;

}



.modal-content {

    width:90%;

    max-width:600px;

    padding:40px;

    border-radius:20px;

    position:relative;

}



.modal-close {

    position:absolute;

    top:20px;

    right:20px;

    width:35px;

    height:35px;

    border-radius:50%;

    cursor:pointer;

}



/* =========================================
   TOOLTIP SYSTEM
   ========================================= */

.tooltip {

    position:relative;

    cursor:pointer;

}



.tooltip-text {

    position:absolute;

    bottom:120%;

    left:50%;

    transform:

    translateX(-50%);

    padding:8px 15px;

    border-radius:8px;

    font-size:13px;

    opacity:0;

    visibility:hidden;

    transition:.3s ease;

}



.tooltip:hover .tooltip-text {

    opacity:1;

    visibility:visible;

}



/* =========================================
   LOADING STATES
   ========================================= */

.loading {

    position:relative;

    pointer-events:none;

    opacity:.6;

}



.spinner {

    width:40px;

    height:40px;

    border-radius:50%;

    border:4px solid #ddd;

    border-top-color:#222;

    animation:rotate 1s linear infinite;

}



.skeleton-card {

    height:200px;

    border-radius:15px;

    animation:pulse 1.5s infinite;

}



/* =========================================
   TABLE SYSTEM
   ========================================= */

.data-table {

    width:100%;

    border-collapse:collapse;

}



.data-table th,

.data-table td {

    padding:18px;

    text-align:left;

    border-bottom:1px solid #eee;

}



.data-table tr:hover {

    background:#f8f8f8;

}



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


@media(max-width:1200px){

.dashboard-grid {

    grid-template-columns:

    repeat(2,1fr);

}

}



@media(max-width:992px){


.dashboard {

    grid-template-columns:1fr;

}



.dashboard-sidebar {

    position:relative;

    height:auto;

}



.dashboard-content {

    padding:25px;

}

}



@media(max-width:576px){


.dashboard-grid {

    grid-template-columns:1fr;

}



.dashboard-header {

    flex-direction:column;

    gap:20px;

}



.auth-box {

    padding:25px;

}



.profile-details {

    grid-template-columns:1fr;

}



}

/* =========================================
   3C-9
   ADVANCED MOBILE + PWA UI SYSTEM
   ========================================= */


/* =========================================
   MOBILE APP CONTAINER
   ========================================= */

.mobile-app {

    width:100%;

    min-height:100vh;

    overflow-x:hidden;

}



.mobile-container {

    width:100%;

    padding-left:15px;

    padding-right:15px;

}



/* =========================================
   MOBILE APP HEADER
   ========================================= */

.app-header {

    position:sticky;

    top:0;

    z-index:1000;

    height:65px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:0 20px;

    backdrop-filter:blur(10px);

}



.app-logo {

    display:flex;

    align-items:center;

    gap:10px;

}



.app-logo img {

    width:40px;

    height:40px;

    border-radius:10px;

}



.app-title {

    font-size:20px;

    font-weight:700;

}



/* =========================================
   APP HEADER ACTIONS
   ========================================= */

.app-actions {

    display:flex;

    gap:12px;

}



.app-icon-btn {

    width:42px;

    height:42px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    cursor:pointer;

}



/* =========================================
   MOBILE BOTTOM NAVIGATION
   ========================================= */

.bottom-nav {

    position:fixed;

    bottom:0;

    left:0;

    width:100%;

    height:70px;

    display:flex;

    justify-content:space-around;

    align-items:center;

    z-index:9999;

    border-radius:

    20px 20px 0 0;

}



.bottom-nav-item {

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:5px;

    text-decoration:none;

    font-size:12px;

}



.bottom-nav-icon {

    font-size:22px;

}



.bottom-nav-item.active {

    font-weight:700;

}



/* =========================================
   FLOATING ACTION BUTTON
   ========================================= */

.fab {

    position:fixed;

    right:25px;

    bottom:95px;

    width:60px;

    height:60px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:28px;

    z-index:1000;

    box-shadow:

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

}



.fab:hover {

    transform:

    scale(1.1);

}



/* =========================================
   MOBILE CARD SYSTEM
   ========================================= */

.mobile-card {

    padding:20px;

    border-radius:20px;

    margin-bottom:20px;

}



.mobile-card-header {

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:15px;

}



.mobile-card-title {

    font-size:20px;

    font-weight:700;

}



/* =========================================
   SWIPE CARD
   ========================================= */

.swipe-container {

    display:flex;

    gap:20px;

    overflow-x:auto;

    scroll-snap-type:x mandatory;

}



.swipe-card {

    min-width:280px;

    scroll-snap-align:start;

    border-radius:20px;

    padding:25px;

}



/* =========================================
   MOBILE LIST ITEM
   ========================================= */

.mobile-list {

    list-style:none;

    padding:0;

}



.mobile-list-item {

    display:flex;

    align-items:center;

    gap:15px;

    padding:18px 0;

    border-bottom:1px solid #eee;

}



.mobile-list-icon {

    width:45px;

    height:45px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

}



/* =========================================
   TOUCH OPTIMIZATION
   ========================================= */

.touch-target {

    min-width:44px;

    min-height:44px;

}



.no-select {

    user-select:none;

    -webkit-user-select:none;

}



.touch-scroll {

    overflow:auto;

    -webkit-overflow-scrolling:touch;

}



/* =========================================
   MOBILE HERO OPTIMIZATION
   ========================================= */

.mobile-hero {

    min-height:80vh;

    display:flex;

    align-items:center;

    padding:40px 20px;

}



.mobile-hero h1 {

    font-size:38px;

    line-height:1.2;

}



.mobile-hero p {

    line-height:1.8;

}



/* =========================================
   MOBILE BUTTON SYSTEM
   ========================================= */

.mobile-btn {

    width:100%;

    padding:15px 20px;

    border-radius:50px;

    text-align:center;

    display:block;

    font-weight:600;

    text-decoration:none;

}



/* =========================================
   MOBILE FORM UX
   ========================================= */

.mobile-input {

    width:100%;

    height:55px;

    padding:0 18px;

    border-radius:12px;

    font-size:16px;

}



.mobile-textarea {

    min-height:130px;

    padding:15px;

}



/* =========================================
   INSTALL APP BANNER
   ========================================= */

.install-banner {

    position:fixed;

    bottom:20px;

    left:20px;

    right:20px;

    padding:20px;

    border-radius:20px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:15px;

    z-index:9999;

}



.install-icon {

    width:55px;

    height:55px;

    border-radius:15px;

}



/* =========================================
   OFFLINE STATUS BAR
   ========================================= */

.offline-bar {

    position:fixed;

    top:0;

    left:0;

    width:100%;

    padding:12px;

    text-align:center;

    z-index:99999;

}



/* =========================================
   SAFE AREA SUPPORT IOS
   ========================================= */

.safe-bottom {

    padding-bottom:

    env(safe-area-inset-bottom);

}



.safe-top {

    padding-top:

    env(safe-area-inset-top);

}



/* =========================================
   MOBILE DARK MODE SUPPORT
   ========================================= */

@media(prefers-color-scheme:dark){


.mobile-app.dark-auto {

    background:#111;

    color:#fff;

}



.app-header {

    background:

    rgba(0,0,0,.5);

}


}



/* =========================================
   MOBILE RESPONSIVE RULES
   ========================================= */


@media(max-width:768px){


body {

    padding-bottom:80px;

}



.bottom-nav {

    display:flex;

}



.app-header {

    height:60px;

}



.mobile-hero h1 {

    font-size:32px;

}



}



@media(min-width:769px){


.bottom-nav,

.fab,

.install-banner {

    display:none;

}

}
/* =========================================
   3C-10
   FINAL PRODUCTION CSS SYSTEM
   ========================================= */


/* =========================================
   ROOT THEME VARIABLES
   ========================================= */

:root {


    /* Brand Colors */

    --primary-color:#0066ff;

    --secondary-color:#111827;

    --accent-color:#00c853;


    /* Background */

    --bg-color:#ffffff;

    --surface-color:#f8fafc;


    /* Text */

    --text-color:#1f2937;

    --muted-color:#6b7280;


    /* Border */

    --border-color:#e5e7eb;


    /* Shadow */

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


    --shadow-md:
    0 10px 30px rgba(0,0,0,.12);


    --shadow-lg:
    0 20px 50px rgba(0,0,0,.18);


    /* Radius */

    --radius-sm:8px;

    --radius-md:15px;

    --radius-lg:25px;


    /* Transition */

    --transition:.3s ease;


    /* Container */

    --container-width:1200px;


}



/* =========================================
   GLOBAL THEME CLASSES
   ========================================= */


.bg-primary {

    background:var(--primary-color);

}


.text-primary {

    color:var(--primary-color);

}


.text-muted {

    color:var(--muted-color);

}



.surface {

    background:var(--surface-color);

}



/* =========================================
   GLOBAL CONTAINER SYSTEM
   ========================================= */


.container {

    width:100%;

    max-width:var(--container-width);

    margin:auto;

    padding-left:20px;

    padding-right:20px;

}



.section {

    padding:100px 0;

}



/* =========================================
   ACCESSIBILITY SYSTEM
   ========================================= */


/* Screen Reader Only */

.sr-only {

    position:absolute;

    width:1px;

    height:1px;

    padding:0;

    margin:-1px;

    overflow:hidden;

    clip:rect(0,0,0,0);

    white-space:nowrap;

    border:0;

}



/* Focus Visible */

*:focus-visible {

    outline:3px solid var(--primary-color);

    outline-offset:3px;

}



/* Reduced Motion */

@media(prefers-reduced-motion:reduce){


*,

*::before,

*::after {

    animation-duration:.01ms!important;

    animation-iteration-count:1!important;

    scroll-behavior:auto!important;

    transition-duration:.01ms!important;

}


}



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


.dark-mode {


    --bg-color:#0f172a;

    --surface-color:#1e293b;

    --text-color:#f8fafc;

    --muted-color:#cbd5e1;

    --border-color:#334155;


}



.dark-mode body {

    background:var(--bg-color);

    color:var(--text-color);

}



.dark-mode .card,

.dark-mode .box,

.dark-mode .surface {

    background:var(--surface-color);

}



.dark-mode input,

.dark-mode textarea,

.dark-mode select {

    background:#1e293b;

    color:#fff;

    border-color:#475569;

}



/* =========================================
   UTILITY CLASSES
   ========================================= */


.hidden {

    display:none!important;

}



.visible {

    display:block!important;

}



.text-center {

    text-align:center;

}



.text-left {

    text-align:left;

}



.text-right {

    text-align:right;

}



.flex {

    display:flex;

}



.flex-center {

    display:flex;

    justify-content:center;

    align-items:center;

}



.flex-between {

    display:flex;

    justify-content:space-between;

    align-items:center;

}



.grid {

    display:grid;

}



.relative {

    position:relative;

}



.absolute {

    position:absolute;

}



.overflow-hidden {

    overflow:hidden;

}



.rounded {

    border-radius:var(--radius-md);

}



/* =========================================
   PERFORMANCE OPTIMIZATION
   ========================================= */


img,

video {

    max-width:100%;

    height:auto;

    content-visibility:auto;

}



.lazy-load {

    opacity:0;

    transition:.5s ease;

}



.lazy-load.loaded {

    opacity:1;

}



.optimize-render {

    transform:translateZ(0);

    backface-visibility:hidden;

}



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


@keyframes fadeIn {


from {

    opacity:0;

}


to {

    opacity:1;

}


}



@keyframes slideUp {


from {

    opacity:0;

    transform:translateY(30px);

}


to {

    opacity:1;

    transform:translateY(0);

}


}



@keyframes slideLeft {


from {

    opacity:0;

    transform:translateX(30px);

}


to {

    opacity:1;

    transform:translateX(0);

}


}



@keyframes rotate {


from {

    transform:rotate(0deg);

}


to {

    transform:rotate(360deg);

}


}



@keyframes pulse {


0% {

    opacity:.6;

}


50% {

    opacity:1;

}


100% {

    opacity:.6;

}


}



/* Animation Classes */


.animate-fade {

    animation:fadeIn .8s ease;

}



.animate-up {

    animation:slideUp .8s ease;

}



.animate-left {

    animation:slideLeft .8s ease;

}



.animate-spin {

    animation:rotate 1s linear infinite;

}



/* =========================================
   PRINT CSS
   ========================================= */


@media print {


* {

    background:transparent!important;

    color:#000!important;

    box-shadow:none!important;

    text-shadow:none!important;

}



header,

footer,

nav,

.sidebar,

.no-print {

    display:none!important;

}



.container {

    max-width:100%;

}



a {

    text-decoration:underline;

}



img {

    page-break-inside:avoid;

}



h1,h2,h3 {

    page-break-after:avoid;

}


}



/* =========================================
   SEO CONTENT VISIBILITY
   ========================================= */


.seo-content {

    contain:content;

}



.schema-hidden {

    display:none;

}



/* =========================================
   FINAL RESET OVERRIDE
   ========================================= */


button,

input,

textarea,

select {

    font-family:inherit;

}



button {

    cursor:pointer;

}



a {

    color:inherit;

}



svg {

    width:1em;

    height:1em;

}



/* =========================================
   FINAL RESPONSIVE SYSTEM
   ========================================= */


@media(max-width:1200px){


.container {

    padding-left:25px;

    padding-right:25px;

}


.section {

    padding:80px 0;

}


}



@media(max-width:768px){


.container {

    padding-left:18px;

    padding-right:18px;

}


.section {

    padding:60px 0;

}


}



@media(max-width:480px){


.section {

    padding:45px 0;

}


}


/* =========================
   Testimonials Section
========================= */


.testimonial-section {

    padding:90px 0;

    background:#ffffff;

}



.testimonial-grid {


    display:grid;

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

    gap:30px;

}




.testimonial-card {


    background:#fff;

    padding:35px 30px;

    border-radius:18px;

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

    transition:.4s ease;

    position:relative;

}



.testimonial-card:hover {


    transform:translateY(-10px);

}




.client-rating {


    color:#f5a623;

    font-size:22px;

    letter-spacing:3px;

    margin-bottom:20px;

}




.testimonial-card p {


    font-size:16px;

    line-height:1.8;

    color:#555;

    margin-bottom:30px;

    font-style:italic;

}




.client-info {


    display:flex;

    align-items:center;

    gap:15px;

}




.client-image img {


    width:65px;

    height:65px;

    object-fit:cover;

    border-radius:50%;

}




.client-info h3 {


    font-size:18px;

    margin-bottom:5px;

    color:#111;

}




.client-info span {


    font-size:14px;

    color:#777;

}





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


@media(max-width:992px){


    .testimonial-grid{


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

    }


}




@media(max-width:576px){


    .testimonial-section{


        padding:60px 0;

    }


    .testimonial-grid{


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

    }


    .testimonial-card{


        padding:25px;

    }


}


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


.contact-section {

    padding:90px 0;

    background:#f8f8f8;

}




.contact-wrapper {


    display:grid;

    grid-template-columns:
    1fr 1fr;

    gap:40px;

    align-items:start;

}




/* Contact Info */


.contact-info {


    background:#fff;

    padding:40px;

    border-radius:18px;

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

}



.contact-info h3 {


    font-size:28px;

    margin-bottom:15px;

}



.contact-info p {


    color:#666;

    line-height:1.7;

}





.contact-item {


    display:flex;

    gap:20px;

    margin-top:25px;

    align-items:flex-start;

}



.contact-icon {


    width:45px;

    height:45px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#111;

    color:#fff;

    border-radius:50%;

    font-size:20px;

}




.contact-item h4 {


    margin-bottom:5px;

}



.contact-item a {


    color:#555;

    text-decoration:none;

}





/* WhatsApp Button */


.whatsapp-btn {


    display:inline-block;

    margin-top:30px;

    padding:14px 30px;

    background:#25D366;

    color:#fff;

    border-radius:30px;

    text-decoration:none;

    font-weight:600;

    transition:.3s;

}



.whatsapp-btn:hover {


    transform:translateY(-3px);

}




/* Contact Form */


.contact-form {


    background:#fff;

    padding:40px;

    border-radius:18px;

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

}



.form-group {


    margin-bottom:20px;

}




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


    width:100%;

    padding:15px;

    border:1px solid #ddd;

    border-radius:8px;

    font-size:15px;

    outline:none;

}




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


    border-color:#111;

}





.contact-submit {


    width:100%;

    padding:15px;

    border:none;

    background:#111;

    color:#fff;

    border-radius:30px;

    font-size:16px;

    cursor:pointer;

    transition:.3s;

}



.contact-submit:hover {


    transform:translateY(-3px);

}





/* Google Map */


.map-box {


    margin-top:50px;

    overflow:hidden;

    border-radius:18px;

    height:400px;

}



.map-box iframe {


    width:100%;

    height:100%;

    border:0;

}





/* Responsive */


@media(max-width:992px){


    .contact-wrapper{


        grid-template-columns:
        1fr;

    }


}



@media(max-width:576px){


    .contact-section{


        padding:60px 0;

    }


    .contact-info,
    .contact-form{


        padding:25px;

    }


    .map-box{


        height:300px;

    }


}



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


.footer-section {

    background:#111;

    color:#fff;

    padding-top:70px;

}



.footer-grid {


    display:grid;

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

    gap:40px;

}



.footer-box h3 {


    font-size:22px;

    margin-bottom:20px;

}



.footer-box p {


    color:#bbb;

    line-height:1.8;

}




.footer-box ul {


    list-style:none;

    padding:0;

    margin:0;

}



.footer-box ul li {


    margin-bottom:12px;

    color:#bbb;

}




.footer-box ul li a {


    color:#bbb;

    text-decoration:none;

    transition:.3s;

}



.footer-box ul li a:hover {


    color:#fff;

    padding-left:5px;

}




/* Social Icons */


.footer-social {


    display:flex;

    gap:12px;

    margin-top:25px;

}



.footer-social a {


    width:40px;

    height:40px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#fff;

    color:#111;

    border-radius:50%;

    text-decoration:none;

    font-weight:bold;

    transition:.3s;

}



.footer-social a:hover {


    transform:translateY(-5px);

}





/* Footer Bottom */


.footer-bottom {


    margin-top:50px;

    padding:20px 0;

    text-align:center;

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

}



.footer-bottom p {


    margin:0;

    color:#aaa;

}






/* Floating WhatsApp */


.floating-whatsapp {


    position:fixed;

    right:25px;

    bottom:25px;

    width:60px;

    height:60px;

    background:#25D366;

    color:#fff;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    text-decoration:none;

    font-size:28px;

    z-index:999;

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

    animation:pulse 2s infinite;

}




@keyframes pulse {


    0%{

        transform:scale(1);

    }


    50%{

        transform:scale(1.1);

    }


    100%{

        transform:scale(1);

    }


}






/* Back To Top */


#backToTop {


    position:fixed;

    right:25px;

    bottom:100px;

    width:45px;

    height:45px;

    border:none;

    border-radius:50%;

    background:#fff;

    color:#111;

    cursor:pointer;

    display:none;

    font-size:22px;

    z-index:998;

}






/* Responsive Footer */


@media(max-width:992px){


    .footer-grid{


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

    }


}




@media(max-width:576px){


    .footer-grid{


        grid-template-columns:
        1fr;

    }


    .floating-whatsapp{


        width:55px;

        height:55px;

        right:15px;

        bottom:15px;

    }


}