/*=========================================================
  Electronic Jacquard Sales & Services
  File : components.css
  Version : 1.0.0
  Description : Reusable UI Components
=========================================================*/


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

.section-title{

    margin-bottom:var(--space-48);

}


.section-title__tag{

    display:inline-flex;

    align-items:center;

    gap:8px;

    padding:6px 16px;

    border-radius:var(--radius-round);

    background:rgba(0,87,184,.10);

    color:var(--clr-primary);

    font-size:var(--fs-14);

    font-weight:600;

    text-transform:uppercase;

    letter-spacing:1px;

}


.section-title__heading{

    margin-top:var(--space-16);

    font-size:clamp(
        2rem,
        4vw,
        3rem
    );

    font-weight:800;

}


.section-title__heading span{

    color:var(--clr-primary);

}


.section-title__description{

    max-width:700px;

    margin:20px auto 0;

    color:var(--text-muted);

}



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

.btn-custom{

    height:var(--btn-height);

    padding-inline:32px;

    border-radius:var(--btn-radius);

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    font-weight:600;

    transition:var(--transition);

    position:relative;

    overflow:hidden;

    z-index:1;

}



/* Ripple Layer */

.btn-custom::before{

    content:"";

    position:absolute;

    inset:0;

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

    transform:translateX(-100%);

    transition:.4s;

    z-index:-1;

}


.btn-custom:hover::before{

    transform:translateX(0);

}



.btn-primary{

    background:var(--gradient-primary);

    color:#fff;

    box-shadow:var(--shadow-primary);

}


.btn-primary:hover{

    transform:translateY(-3px);

    color:#fff;

}



.btn-secondary{

    background:var(--clr-secondary);

    color:#fff;

}


.btn-secondary:hover{

    transform:translateY(-3px);

    color:#fff;

}



.btn-outline{

    border:2px solid var(--clr-primary);

    color:var(--clr-primary);

}


.btn-outline:hover{

    background:var(--clr-primary);

    color:#fff;

}



/* Glass Button */

.btn-glass{

    background:var(--glass-bg);

    border:1px solid var(--glass-border);

    color:#fff;

    backdrop-filter:var(--glass-blur);

}



.btn-glass:hover{

    background:#fff;

    color:var(--clr-primary);

}



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


.card-custom{

    background:var(--bg-card);

    border-radius:var(--radius-lg);

    box-shadow:var(--shadow-sm);

    padding:var(--space-32);

    transition:var(--transition);

    border:1px solid var(--border);

}


.card-custom:hover{

    transform:translateY(-10px);

    box-shadow:var(--shadow-lg);

}



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


.product-card{

    background:var(--bg-card);

    border-radius:var(--radius-lg);

    overflow:hidden;

    box-shadow:var(--shadow-sm);

    transition:var(--transition);

}



.product-card:hover{

    transform:translateY(-8px);

    box-shadow:var(--shadow-lg);

}



.product-card__image{

    height:260px;

    overflow:hidden;

}


.product-card__image img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:.5s;

}


.product-card:hover img{

    transform:scale(1.08);

}



.product-card__body{

    padding:24px;

}



.product-card__title{

    font-size:var(--fs-20);

    font-weight:700;

    margin-bottom:10px;

}



.product-card__text{

    color:var(--text-muted);

}



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


.service-card{

    text-align:center;

    padding:40px 25px;

    background:var(--bg-card);

    border-radius:var(--radius-lg);

    transition:var(--transition);

    border:1px solid var(--border);

}



.service-card:hover{

    transform:translateY(-8px);

    box-shadow:var(--shadow-lg);

}



.service-card__icon{

    width:80px;

    height:80px;

    margin:auto;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    background:var(--gradient-primary);

    color:#fff;

    font-size:32px;

    margin-bottom:24px;

}



/*=========================================================
  FEATURE CARD
=========================================================*/


.feature-card{

    padding:30px;

    display:flex;

    gap:20px;

    background:var(--bg-card);

    border-radius:var(--radius-lg);

    border:1px solid var(--border);

}



.feature-card__icon{

    flex-shrink:0;

    width:60px;

    height:60px;

    border-radius:var(--radius-md);

    display:flex;

    align-items:center;

    justify-content:center;

    background:rgba(0,87,184,.1);

    color:var(--clr-primary);

    font-size:25px;

}



/*=========================================================
  STATISTICS CARD
=========================================================*/


.stat-card{

    text-align:center;

    padding:30px;

}


.stat-card__number{

    font-family:var(--font-number);

    font-size:clamp(2.5rem,5vw,4rem);

    color:var(--clr-primary);

}



.stat-card__label{

    color:var(--text-muted);

    font-weight:500;

}



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


.badge-custom{

    display:inline-flex;

    align-items:center;

    gap:6px;

    padding:6px 14px;

    border-radius:var(--radius-round);

    background:var(--clr-primary);

    color:#fff;

    font-size:13px;

}



/*=========================================================
  FORM ELEMENTS
=========================================================*/


.form-control-custom{

    height:55px;

    padding-inline:18px;

    border:1px solid var(--border);

    border-radius:var(--radius-md);

    background:var(--bg-card);

    transition:var(--transition);

}



.form-control-custom:focus{

    border-color:var(--clr-primary);

    box-shadow:0 0 0 4px rgba(0,87,184,.12);

}



textarea.form-control-custom{

    height:150px;

    padding-top:15px;

}



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


.social-btn{

    width:45px;

    height:45px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:var(--bg-card);

    color:var(--clr-primary);

    box-shadow:var(--shadow-sm);

    transition:var(--transition);

}



.social-btn:hover{

    background:var(--clr-primary);

    color:#fff;

    transform:translateY(-5px);

}



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


.floating-btn{

    width:55px;

    height:55px;

    position:fixed;

    right:25px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    color:#fff;

    font-size:22px;

    z-index:var(--z-fixed);

    box-shadow:var(--shadow-lg);

    transition:var(--transition);

}



.floating-btn:hover{

    transform:scale(1.1);

}



.whatsapp-btn{

    bottom:90px;

    background:#25D366;

}



.call-btn{

    bottom:25px;

    background:var(--clr-primary);

}



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


.page-loader{

    position:fixed;

    inset:0;

    background:var(--bg-dark);

    display:flex;

    align-items:center;

    justify-content:center;

    z-index:var(--z-loader);

}



.loader-logo{

    width:100px;

    height:100px;

    border-radius:50%;

    border:5px solid rgba(255,255,255,.2);

    border-top-color:var(--clr-primary);

    animation:loaderRotate 1s linear infinite;

}



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


.scroll-progress{

    position:fixed;

    top:0;

    left:0;

    height:4px;

    width:0;

    background:var(--gradient-primary);

    z-index:99999;

}



/*=========================================================
  DIVIDER
=========================================================*/


.section-divider{

    width:80px;

    height:4px;

    background:var(--clr-primary);

    border-radius:var(--radius-round);

    margin:20px auto;

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


.product-card{

height:100%;

overflow:hidden;

}



.product-card__image{

height:280px;

position:relative;

overflow:hidden;

}



.product-card__image img{

width:100%;

height:100%;

object-fit:cover;

}



.product-badge{

position:absolute;

top:20px;

left:20px;

background:var(--clr-primary);

color:white;

padding:8px 18px;

border-radius:30px;

font-size:13px;

font-weight:600;

}



.product-card__body{

padding:25px;

}



.product-card__body h3{

font-size:22px;

margin-bottom:15px;

}



.product-card__body p{

color:var(--text-muted);

margin-bottom:25px;

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


.service-card{

height:100%;

padding:35px;

transition:
transform .4s ease,
box-shadow .4s ease;

}



.service-card:hover{

transform:translateY(-10px);

box-shadow:
var(--shadow-lg);

}



.service-card__icon{

width:75px;

height:75px;

display:flex;

align-items:center;

justify-content:center;

border-radius:50%;

background:

linear-gradient(
135deg,
var(--clr-primary),
var(--clr-secondary)
);

color:white;

font-size:30px;

margin-bottom:25px;

}



.service-card h3{

font-size:22px;

margin-bottom:15px;

}



.service-card p{

color:var(--text-muted);

line-height:1.7;

}



.service-link{

display:inline-flex;

align-items:center;

gap:10px;

font-weight:600;

color:var(--clr-primary);

margin-top:15px;

transition:.3s;

}



.service-link:hover{

gap:15px;

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


.about-section{

position:relative;

overflow:hidden;

}



.about-bg{

position:absolute;

width:450px;

height:450px;

right:-200px;

top:100px;

background:

var(--clr-primary);

opacity:.08;

border-radius:50%;

}




.about-image{

border-radius:var(--radius-lg);

overflow:hidden;

box-shadow:var(--shadow-lg);

}



.about-image img{

width:100%;

height:500px;

object-fit:cover;

}



.about-feature{

display:flex;

align-items:center;

gap:12px;

font-weight:600;

}



.about-feature i{

color:var(--clr-primary);

font-size:20px;

}





/*=========================================================
 WHY CHOOSE CARD
=========================================================*/


.choose-card{

height:100%;

text-align:center;

padding:35px 25px;

}



.choose-card i{

font-size:40px;

color:var(--clr-primary);

margin-bottom:20px;

}



.choose-card h3{

font-size:22px;

margin-bottom:12px;

}
/*=========================================================
 STATISTICS SECTION
=========================================================*/


.statistics-section{

position:relative;

padding:100px 0;

background:

linear-gradient(
135deg,
#08111F,
#0057B8
);

overflow:hidden;

}



.statistics-overlay{

position:absolute;

inset:0;

background:

url("../images/about/factory-bg.jpg");

background-size:cover;

background-position:center;

opacity:.15;

}



.stat-card{

position:relative;

z-index:2;

text-align:center;

padding:35px 20px;

border-radius:var(--radius-lg);

background:

rgba(255,255,255,.12);

backdrop-filter:blur(15px);

border:

1px solid rgba(255,255,255,.2);

color:white;

transition:.4s;

}



.stat-card:hover{

transform:translateY(-10px);

background:

rgba(255,255,255,.18);

}



.stat-icon{

font-size:40px;

color:#FF9F1C;

margin-bottom:20px;

}



.stat-card h2{

font-family:var(--font-number);

font-size:55px;

font-weight:700;

color:white;

}



.stat-card span{

font-size:18px;

color:

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

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


.gallery-item{

position:relative;

overflow:hidden;

height:320px;

border-radius:var(--radius-lg);

}



.gallery-item img{

width:100%;

height:100%;

object-fit:cover;

transition:.6s ease;

}



.gallery-item:hover img{

transform:scale(1.1);

}



.gallery-overlay{

position:absolute;

inset:0;

background:

rgba(0,87,184,.75);

display:flex;

align-items:center;

justify-content:center;

opacity:0;

transition:.4s;

}



.gallery-item:hover 
.gallery-overlay{

opacity:1;

}



.gallery-lightbox{

width:55px;

height:55px;

display:flex;

align-items:center;

justify-content:center;

border-radius:50%;

background:white;

color:var(--clr-primary);

font-size:22px;

}

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


.testimonial-section{

background:
var(--bg-light);

}



.testimonial-card{

padding:35px;

height:100%;

}



.testimonial-stars{

color:#FFB400;

font-size:18px;

margin-bottom:20px;

}



.testimonial-card p{

font-size:17px;

line-height:1.8;

color:var(--text-muted);

font-style:italic;

}



.testimonial-user{

display:flex;

align-items:center;

gap:15px;

margin-top:25px;

}



.testimonial-user img{

width:60px;

height:60px;

border-radius:50%;

object-fit:cover;

}



.testimonial-user h4{

font-size:18px;

margin:0;

}



.testimonial-user span{

font-size:14px;

color:var(--text-muted);

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


.contact-item{

display:flex;

gap:15px;

align-items:center;

margin:25px 0;

}



.contact-item i{

font-size:28px;

color:var(--clr-primary);

}



.contact-form{

padding:35px;

}



.form-control{

padding:14px;

border-radius:10px;

}





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


.footer{

background:#08111F;

color:white;

padding:70px 0 30px;

}



.footer h3,
.footer h4{

color:white;

}



.footer ul{

list-style:none;

padding:0;

}



.footer li{

margin:10px 0;

color:#ccc;

}



.footer-social{

display:flex;

gap:15px;

}



.footer-social a{

width:45px;

height:45px;

display:flex;

align-items:center;

justify-content:center;

background:#0057B8;

border-radius:50%;

color:white;

}