/*==================================================
EARTHCONNECT CORPORATE WEBSITE

STYLE.CSS

Version 1.0
==================================================*/

:root{

--primary:#22B8E8;
--secondary:#1F2937;
--dark:#111827;
--light:#F8FAFC;
--white:#ffffff;
--text:#5B6472;
--border:#E5E7EB;
--success:#14B8A6;

--radius:16px;

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

--transition:.35s ease;

}

*{

margin:0;
padding:0;
box-sizing:border-box;

}

html{

scroll-behavior:smooth;

}

body{

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

background:var(--light);

color:var(--text);

overflow-x:hidden;

line-height:1.7;

}

img{

max-width:100%;

display:block;

}

a{

text-decoration:none;

transition:var(--transition);

}

ul{

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

}

section{

position:relative;

padding:100px 0;

}

.container{

max-width:1320px;

}

h1,h2,h3,h4,h5,h6{

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

font-weight:700;

color:var(--secondary);

}

.section-subtitle{

display:inline-block;

font-weight:600;

letter-spacing:2px;

text-transform:uppercase;

color:var(--primary);

margin-bottom:15px;

}

.section-heading{

font-size:42px;

font-weight:700;

margin-bottom:20px;

}
.btn-earth{

background:linear-gradient(
135deg,
#22B8E8,
#0D91C5);

color:#fff;

padding:14px 36px;

border-radius:50px;

font-weight:600;

transition:.35s;

border:none;

box-shadow:

0 10px 25px rgba(34,184,232,.35);

}

.btn-earth:hover{

transform:translateY(-4px);

color:#fff;

box-shadow:

0 20px 45px rgba(34,184,232,.45);

}

.btn-outline-light{

border-radius:50px;

padding:14px 34px;

}
.btn-earth{

background:linear-gradient(
135deg,
#22B8E8,
#0D91C5);

color:#fff;

padding:14px 36px;

border-radius:50px;

font-weight:600;

transition:.35s;

border:none;

box-shadow:

0 10px 25px rgba(34,184,232,.35);

}

.btn-earth:hover{

transform:translateY(-4px);

color:#fff;

box-shadow:

0 20px 45px rgba(34,184,232,.45);

}

.btn-outline-light{

border-radius:50px;

padding:14px 34px;

}
#loader{

position:fixed;

top:0;
left:0;

width:100%;

height:100%;

background:#fff;

z-index:99999;

display:flex;

justify-content:center;

align-items:center;

}

.spinner{

width:70px;

height:70px;

border:6px solid #eee;

border-top:6px solid var(--primary);

border-radius:50%;

animation:spin 1s linear infinite;

}

@keyframes spin{

100%{

transform:rotate(360deg);

}

}
.navbar{

padding:22px 0;

transition:.4s;

}

.navbar.scrolled{

background:#111827;

padding:12px 0;

box-shadow:

0 15px 40px rgba(0,0,0,.15);

}

.navbar-brand img{

height:62px;

}

.nav-link{

font-weight:600;

margin-left:20px;

color:#fff !important;

}

.nav-link:hover{

color:var(--primary)!important;

}

.dropdown-menu{

border:none;

border-radius:14px;

box-shadow:var(--shadow);

padding:15px;

}

.dropdown-item{

padding:12px 18px;

border-radius:10px;

font-weight:500;

}

.dropdown-item:hover{

background:var(--primary);

color:#fff;

}
.hero-section{

padding:0;

}

.hero-slide{

height:100vh;

position:relative;

display:flex;

align-items:center;

background-size:cover;

background-position:center;

}

.slide1{

background-image:url("../img/hero/hero1.jpg");

}

.slide2{

background-image:url("../img/hero/hero2.jpg");

}

.slide3{

background-image:url("../img/hero/hero3.jpg");

}

.overlay{

position:absolute;

inset:0;

background:

linear-gradient(

90deg,

rgba(10,20,40,.85),

rgba(10,20,40,.35)

);

}

.hero-slide .container{

position:relative;

z-index:2;

}

.hero-badge{

display:inline-block;

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

backdrop-filter:blur(8px);

padding:10px 20px;

border-radius:50px;

color:#fff;

margin-bottom:25px;

}

.hero-slide h1{

font-size:64px;

line-height:1.15;

color:#fff;

margin-bottom:25px;

max-width:720px;

}

.hero-slide p{

font-size:20px;

color:#fff;

max-width:650px;

margin-bottom:35px;

}

.hero-buttons{

display:flex;

gap:20px;

flex-wrap:wrap;

}
.whatsapp-btn{

position:fixed;

bottom:35px;

right:35px;

width:65px;

height:65px;

background:#25D366;

border-radius:50%;

display:flex;

justify-content:center;

align-items:center;

font-size:32px;

color:#fff;

z-index:999;

box-shadow:

0 15px 40px rgba(0,0,0,.3);

transition:.35s;

}

.whatsapp-btn:hover{

transform:translateY(-6px);

color:#fff;

}
.about-preview{

background:#fff;

}

.feature-list li{

margin-bottom:15px;

font-weight:500;

}

.feature-list i{

color:var(--primary);

margin-right:10px;

}

.about-preview img{

border-radius:20px;

box-shadow:var(--shadow);

}
.services{

background:#F7FAFC;

}

.service-card{

background:#fff;

padding:45px;

border-radius:20px;

transition:.35s;

box-shadow:var(--shadow);

height:100%;

}

.service-card:hover{

transform:translateY(-12px);

}

.service-icon{

width:85px;

height:85px;

background:

linear-gradient(
135deg,
#22B8E8,
#0D91C5);

border-radius:18px;

display:flex;

justify-content:center;

align-items:center;

margin-bottom:30px;

}

.service-icon i{

font-size:34px;

color:#fff;

}

.service-card h4{

margin-bottom:20px;

}

.service-card a{

font-weight:600;

color:var(--primary);

}

.featured{

background:

linear-gradient(
135deg,
#22B8E8,
#0D91C5);

color:#fff;

}

.featured h4,

.featured a{

color:#fff;

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

.why-us{

background:#ffffff;

}

.feature-box{

background:#fff;

padding:40px 30px;

border-radius:20px;

text-align:center;

box-shadow:var(--shadow);

transition:var(--transition);

height:100%;

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

}

.feature-box:hover{

transform:translateY(-10px);

border-color:var(--primary);

}

.feature-box i{

font-size:48px;

margin-bottom:25px;

color:var(--primary);

}

.feature-box h5{

margin-bottom:15px;

font-size:22px;

}

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

.statistics{

background:linear-gradient(
135deg,
#1F2937,
#0F172A);

color:#fff;

}

.counter-box{

padding:35px 20px;

text-align:center;

}

.counter-box i{

font-size:50px;

margin-bottom:20px;

color:var(--primary);

}

.counter-box h2{

font-size:56px;

font-weight:700;

color:#fff;

margin-bottom:10px;

}

.counter-box p{

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

margin:0;

}

/*==================================================
INDUSTRIES
==================================================*/

.industries{

background:#F8FAFC;

}

.industry-card{

background:#fff;

border-radius:18px;

padding:35px 20px;

text-align:center;

transition:var(--transition);

box-shadow:var(--shadow);

height:100%;

}

.industry-card:hover{

transform:translateY(-8px);

background:var(--primary);

color:#fff;

}

.industry-card:hover h5,

.industry-card:hover i{

color:#fff;

}

.industry-card i{

font-size:42px;

margin-bottom:18px;

color:var(--primary);

transition:.35s;

}

.industry-card h5{

margin:0;

font-size:18px;

}

/*==================================================
TECHNOLOGY
==================================================*/

.technology{

background:#fff;

}

.brand-card{

background:#fff;

padding:30px;

border-radius:18px;

box-shadow:var(--shadow);

display:flex;

align-items:center;

justify-content:center;

height:140px;

transition:.35s;

}

.brand-card:hover{

transform:translateY(-8px);

}

.brand-card img{

max-height:55px;

width:auto;

filter:grayscale(100%);

opacity:.75;

transition:.35s;

}

.brand-card:hover img{

filter:none;

opacity:1;

}

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

.process-section{

background:#F7FAFC;

}

.process-box{

position:relative;

padding:25px;

}

.step{

width:75px;

height:75px;

margin:0 auto 25px;

border-radius:50%;

background:linear-gradient(
135deg,
#22B8E8,
#0D91C5);

color:#fff;

font-size:28px;

font-weight:700;

display:flex;

justify-content:center;

align-items:center;

box-shadow:0 12px 30px rgba(34,184,232,.30);

}

.process-box h5{

font-size:20px;

}

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

.cta-section{

background:linear-gradient(
135deg,
#22B8E8,
#0C93C9);

color:#fff;

padding:80px 0;

}

.cta-section h2{

color:#fff;

font-size:44px;

margin-bottom:15px;

}

.cta-section p{

font-size:20px;

margin-bottom:0;

}

.cta-section .btn{

padding:16px 42px;

font-weight:600;

border-radius:50px;

}

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

.testimonials{

background:#fff;

}

.testimonial-card{

background:#fff;

padding:45px;

border-radius:20px;

box-shadow:var(--shadow);

text-align:center;

margin:15px;

}

.testimonial-card p{

font-size:18px;

font-style:italic;

margin-bottom:25px;

}

.testimonial-card h5{

margin-bottom:5px;

}

.testimonial-card span{

color:var(--primary);

font-weight:600;

}

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

.contact-preview{

background:#F8FAFC;

}

.contact-item{

display:flex;

align-items:flex-start;

margin-bottom:30px;

}

.contact-item .icon{

width:65px;

height:65px;

background:linear-gradient(
135deg,
#22B8E8,
#0D91C5);

color:#fff;

display:flex;

align-items:center;

justify-content:center;

border-radius:16px;

margin-right:20px;

font-size:24px;

flex-shrink:0;

}

.quote-card{

background:#fff;

padding:45px;

border-radius:22px;

box-shadow:var(--shadow);

}

.quote-card h3{

margin-bottom:30px;

}

.form-control,
.form-select{

height:55px;

border-radius:12px;

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

padding:15px;

}

textarea.form-control{

height:auto;

resize:none;

}

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

.map-section{

padding:0;

}

.map-section iframe{

width:100%;

height:500px;

border:0;

display:block;

}

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

.newsletter{

background:#111827;

color:#fff;

padding:70px 0;

}

.newsletter h3{

color:#fff;

margin-bottom:10px;

}

.newsletter .form-control{

height:60px;

border:none;

}

.newsletter .btn{

padding:0 35px;

}

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

footer{

background:#0B1220;

color:#BFC7D5;

padding:90px 0 30px;

}

.footer-logo{

height:70px;

margin-bottom:30px;

}

footer h5{

color:#fff;

margin-bottom:25px;

}

footer ul li{

margin-bottom:14px;

}

footer ul li a{

color:#BFC7D5;

transition:.35s;

}

footer ul li a:hover{

color:var(--primary);

padding-left:6px;

}

.social-links{

display:flex;

gap:12px;

margin-top:25px;

}

.social-links a{

width:46px;

height:46px;

display:flex;

align-items:center;

justify-content:center;

background:#1F2937;

border-radius:50%;

color:#fff;

transition:.35s;

}

.social-links a:hover{

background:var(--primary);

transform:translateY(-5px);

}

.footer-bottom{

display:flex;

justify-content:space-between;

align-items:center;

flex-wrap:wrap;

padding-top:25px;

font-size:15px;

}

footer hr{

border-color:rgba(255,255,255,.1);

margin:50px 0 25px;

}

/*==================================================
UTILITY CLASSES
==================================================*/

.rounded-20{

border-radius:20px;

}

.shadow-lg-custom{

box-shadow:var(--shadow);

}

.bg-primary-gradient{

background:linear-gradient(
135deg,
#22B8E8,
#0D91C5);

}

.text-primary{

color:var(--primary)!important;

}

.transition{

transition:var(--transition);

}

/*==================================================
AOS / SWIPER ADJUSTMENTS
==================================================*/

.swiper-pagination-bullet{

background:#fff;

opacity:.5;

}

.swiper-pagination-bullet-active{

background:var(--primary);

opacity:1;

}

.heroSwiper .swiper-pagination{

bottom:40px;

}

.testimonialSwiper{

padding-bottom:60px;

}

/* Scroll To Top */

.scroll-top{

position:fixed;

right:30px;

bottom:120px;

width:55px;

height:55px;

border:none;

border-radius:50%;

background:#22B8E8;

color:#fff;

font-size:20px;

cursor:pointer;

opacity:0;

visibility:hidden;

transition:.35s;

z-index:999;

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

}

.scroll-top.show{

opacity:1;

visibility:visible;

}

.scroll-top:hover{

transform:translateY(-5px);

background:#0D91C5;

}

.navbar .nav-link.active{

color:#22B8E8 !important;

font-weight:700;

}
/* =====================================
SHOP
===================================== */

.shop-sidebar{
    background:#fff;
    padding:25px;
    border-radius:12px;
    position:sticky;
    top:110px;
}

.category-list .list-group-item{
    cursor:pointer;
    transition:.3s;
}

.category-list .list-group-item:hover{
    background:var(--primary);
    color:#fff;
}

.category-list .active{
    background:var(--primary)!important;
    border-color:var(--primary)!important;
}

.product-item{
    border:none;
    border-radius:14px;
    overflow:hidden;
    transition:.35s;
    height:100%;
}

.product-item:hover{
    transform:translateY(-8px);
    box-shadow:0 15px 40px rgba(0,0,0,.12);
}

.product-item img{
    height:220px;
    object-fit:cover;
}

.product-item ul{
    padding-left:18px;
    font-size:.92rem;
}

.shop-notification{
    position:fixed;
    right:25px;
    bottom:25px;
    background:#198754;
    color:#fff;
    padding:18px 22px;
    border-radius:8px;
    z-index:99999;
    opacity:0;
    transform:translateY(20px);
    transition:.3s;
}

.shop-notification.show{
    opacity:1;
    transform:translateY(0);
}
/* ==========================================
404 PAGE
========================================== */

.error-page{

min-height:100vh;

display:flex;

align-items:center;

justify-content:center;

background:linear-gradient(135deg,#07182b,#0b3158);

color:#fff;

padding:100px 0;

}

.error-logo{

max-width:180px;

}

.error-page h1{

font-size:9rem;

font-weight:800;

color:var(--primary);

}

.error-search{

max-width:600px;

margin:auto;

}

.popular-links{

display:flex;

justify-content:center;

flex-wrap:wrap;

gap:15px;

margin-top:20px;

}

.popular-links a{

padding:10px 18px;

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

border-radius:30px;

color:#fff;

text-decoration:none;

transition:.3s;

}

.popular-links a:hover{

background:var(--primary);

border-color:var(--primary);

}