:root{

--primary:#2563EB;

--secondary:#1E3A8A;

--accent:#06B6D4;

--dark:#0F172A;

--light:#F8FAFC;

--radius:20px;

}


*{

margin:0;

padding:0;

box-sizing:border-box;

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

}


body{

background:#fff;

color:#333;

overflow-x:hidden;

}


.navbar{

padding:18px 0;

transition:.3s;

}


.nav-link{

font-weight:500;

margin-left:15px;

}


.btn-primary{

background:var(--primary);

border:none;

padding:12px 28px;

}


.btn-primary:hover{

background:var(--secondary);

}


footer a{

color:#ddd;

text-decoration:none;

}


footer a:hover{

color:#fff;

}



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


.hero-section{

background:

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

overflow:hidden;

}



.hero-badge{

display:inline-flex;

align-items:center;

gap:10px;

background:#e0f2fe;

color:#0369a1;

padding:10px 20px;

border-radius:50px;

font-size:14px;

font-weight:600;

margin-bottom:25px;

}



.hero-title{

font-size:55px;

font-weight:800;

line-height:1.2;

color:var(--dark);

}



.gradient-text{


background:

linear-gradient(
90deg,
var(--primary),
var(--accent)
);


-webkit-background-clip:text;

-webkit-text-fill-color:transparent;


}



.hero-description{

font-size:18px;

line-height:1.8;

color:#64748b;

margin:25px 0;

}



.hero-buttons .btn{

border-radius:50px;

padding:15px 35px;

font-weight:600;

}



.hero-stats{

display:flex;

gap:40px;

margin-top:45px;

}



.stat-item h3{

font-size:35px;

font-weight:800;

color:var(--primary);

margin-bottom:0;

}



.stat-item p{

color:#64748b;

}



/* HERO IMAGE */


.hero-image-container{

position:relative;

}



.hero-image{

animation:

floating 6s ease-in-out infinite;

}



/* FLOATING ANIMATION */


@keyframes floating{


0%{

transform:translateY(0);

}


50%{

transform:translateY(-20px);

}


100%{

transform:translateY(0);

}


}



/* FLOATING TECHNOLOGY CARDS */


.floating-card{


position:absolute;

background:#ffffff;

padding:15px 20px;

border-radius:18px;

box-shadow:

0 20px 50px rgba(0,0,0,.1);


display:flex;

gap:15px;

align-items:center;


animation:

floating 5s infinite;


z-index:2;

}



.floating-card i{

font-size:25px;

color:var(--primary);

}



.floating-card strong{

display:block;

font-size:14px;

color:var(--dark);

}



.floating-card small{

display:block;

color:#64748b;

font-size:12px;

}




/* POSITION FLOATING CARDS */


.card-one{

top:15%;

left:-10%;

}



.card-two{

bottom:25%;

right:-5%;

}



.card-three{

bottom:5%;

left:5%;

}



/* BUTTON ENHANCEMENT */


.btn-outline-primary{

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

color:var(--primary);

border-radius:50px;

padding:15px 35px;

font-weight:600;

}



.btn-outline-primary:hover{

background:var(--primary);

color:white;

}



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


@media(max-width:992px){


.hero-title{

font-size:40px;

}



.hero-stats{

gap:20px;

flex-wrap:wrap;

}



.floating-card{

display:none;

}



.hero-image{

margin-top:50px;

}


}



@media(max-width:576px){


.hero-title{

font-size:32px;

}



.hero-description{

font-size:16px;

}



.hero-buttons .btn{

width:100%;

margin-bottom:15px;

}



.hero-buttons .ms-2{

margin-left:0!important;

}


}

/* ===============================
CLIENTS SECTION
================================ */


.clients-section{

background:#ffffff;

}



.section-subtitle{

color:var(--primary);

font-weight:600;

text-transform:uppercase;

letter-spacing:1px;

font-size:14px;

}



.section-title{

font-size:40px;

font-weight:800;

color:var(--dark);

margin-bottom:15px;

}



.client-logo{

height:120px;

background:#ffffff;

border-radius:20px;

display:flex;

align-items:center;

justify-content:center;

padding:25px;

box-shadow:

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

transition:.4s;

}



.client-logo img{

max-width:150px;

max-height:70px;

filter:grayscale(100%);

opacity:.7;

transition:.4s;

}



.client-logo:hover{

transform:translateY(-10px);

box-shadow:

0 20px 40px rgba(0,0,0,.12);

}



.client-logo:hover img{

filter:grayscale(0);

opacity:1;

}

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


.about-section{

background:#f8fafc;

}



.about-image{

position:relative;

}



.about-image img{

box-shadow:

0 20px 50px rgba(0,0,0,.1);

}



.experience-box{


position:absolute;

bottom:-20px;

right:30px;


background:var(--primary);

color:white;

padding:25px;

border-radius:20px;

text-align:center;


}



.experience-box h3{

font-size:40px;

font-weight:800;

margin:0;

}



.experience-box p{

margin:0;

}



.about-feature{

padding:20px;

background:white;

border-radius:20px;

height:100%;

box-shadow:

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

}



.about-feature i{

font-size:30px;

color:var(--primary);

margin-bottom:15px;

}



.about-feature h5{

font-weight:700;

}



.about-feature p{

font-size:14px;

color:#64748b;

}

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


.services-section{

background:#ffffff;

}



.service-card{


background:white;

padding:35px 30px;

border-radius:25px;


height:100%;


box-shadow:

0 10px 40px rgba(0,0,0,.06);


transition:.4s;


border:1px solid #f1f5f9;


}



.service-card:hover{


transform:translateY(-12px);


box-shadow:

0 20px 50px rgba(37,99,235,.15);


}



.service-icon{


width:70px;

height:70px;


display:flex;

align-items:center;

justify-content:center;


border-radius:20px;


background:

linear-gradient(
135deg,
var(--primary),
var(--accent)
);


color:white;


font-size:30px;


margin-bottom:25px;


}



.service-card h4{


font-weight:700;

color:var(--dark);

margin-bottom:15px;


}



.service-card p{


color:#64748b;

line-height:1.7;

font-size:15px;


}



.service-card a{


color:var(--primary);

font-weight:600;

text-decoration:none;


}



.service-card a i{


margin-left:8px;

transition:.3s;


}



.service-card a:hover i{


transform:translateX(5px);


}

/* ===============================
PRODUCTS SECTION
================================ */


.products-section{

background:#f8fafc;

}



.product-card{


background:white;

border-radius:25px;

overflow:hidden;


height:100%;


box-shadow:

0 10px 40px rgba(0,0,0,.06);


transition:.4s;


}



.product-card:hover{


transform:translateY(-12px);


box-shadow:

0 25px 60px rgba(0,0,0,.12);


}



.product-image{


height:230px;

overflow:hidden;


}



.product-image img{


width:100%;

height:100%;

object-fit:cover;


transition:.5s;


}



.product-card:hover img{


transform:scale(1.08);


}



.product-content{


padding:30px;


}



.product-content h4{


font-weight:700;

color:var(--dark);

margin-bottom:15px;


}



.product-content p{


color:#64748b;

line-height:1.7;


}



.product-content ul{


list-style:none;

padding:0;

margin:20px 0;


}



.product-content ul li{


margin-bottom:10px;

color:#475569;


}



.product-content ul i{


color:#22c55e;

margin-right:10px;


}

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


.why-section{

background:#ffffff;

}



.why-image img{

box-shadow:

0 20px 60px rgba(0,0,0,.12);

}



.why-list{

margin-top:30px;

}



.why-item{


display:flex;

gap:20px;

margin-bottom:25px;


}



.why-icon{


width:60px;

height:60px;


min-width:60px;


border-radius:18px;


display:flex;

align-items:center;

justify-content:center;


background:

linear-gradient(
135deg,
var(--primary),
var(--accent)
);


color:white;


font-size:22px;


}



.why-item h5{


font-weight:700;

margin-bottom:5px;


}



.why-item p{


color:#64748b;

margin:0;

font-size:15px;


}

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


.stats-section{


background:

linear-gradient(
135deg,
#2563eb,
#06b6d4
);


}



.counter-card{


background:white;


padding:35px 20px;


border-radius:25px;


text-align:center;


transition:.4s;


}



.counter-card:hover{


transform:translateY(-10px);


}



.counter-card i{


font-size:35px;


color:var(--primary);


margin-bottom:15px;


}



.counter-card h2{


font-size:45px;


font-weight:800;


color:var(--dark);


}



.counter-card p{


color:#64748b;


font-weight:500;


}

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


.process-section{

background:#f8fafc;

}



.process-card{


background:white;

padding:35px 30px;

border-radius:25px;

height:100%;


position:relative;


box-shadow:

0 10px 35px rgba(0,0,0,.06);


transition:.4s;


overflow:hidden;

}



.process-card:hover{


transform:translateY(-10px);


box-shadow:

0 20px 50px rgba(0,0,0,.12);


}



.process-number{


position:absolute;


right:20px;

top:10px;


font-size:70px;

font-weight:800;


color:#f1f5f9;


}



.process-icon{


width:70px;

height:70px;


border-radius:20px;


display:flex;

align-items:center;

justify-content:center;


background:

linear-gradient(
135deg,
var(--primary),
var(--accent)
);


color:white;

font-size:28px;


margin-bottom:25px;


}



.process-card h4{


font-weight:700;

color:var(--dark);


}



.process-card p{


color:#64748b;

line-height:1.7;


}

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


.technology-section{


background:white;


}



.tech-card{


background:#f8fafc;


height:140px;


border-radius:25px;


display:flex;

flex-direction:column;


align-items:center;

justify-content:center;


transition:.4s;


}



.tech-card i{


font-size:45px;


color:var(--primary);


margin-bottom:15px;


}



.tech-card h6{


font-weight:700;

color:var(--dark);


}



.tech-card:hover{


background:white;


transform:translateY(-10px);


box-shadow:

0 20px 40px rgba(0,0,0,.1);


}

/* ===============================
PORTFOLIO SECTION
================================ */


.portfolio-section{

background:#f8fafc;

}



.portfolio-filter button{


border:none;

background:white;

padding:12px 25px;

margin:5px;


border-radius:50px;


font-weight:600;


color:#475569;


transition:.3s;


}



.portfolio-filter .active,
.portfolio-filter button:hover{


background:var(--primary);

color:white;


}




.portfolio-card{


background:white;

border-radius:25px;

overflow:hidden;


height:100%;


box-shadow:

0 10px 35px rgba(0,0,0,.06);


transition:.4s;


}



.portfolio-card:hover{


transform:translateY(-10px);


}




.portfolio-image{


height:250px;

position:relative;

overflow:hidden;


}



.portfolio-image img{


width:100%;

height:100%;

object-fit:cover;


transition:.5s;


}



.portfolio-card:hover img{


transform:scale(1.1);


}




.portfolio-overlay{


position:absolute;


inset:0;


background:

rgba(37,99,235,.85);


display:flex;

align-items:center;

justify-content:center;


opacity:0;


transition:.4s;


}



.portfolio-card:hover .portfolio-overlay{


opacity:1;


}



.portfolio-overlay a{


width:55px;

height:55px;


border-radius:50%;


background:white;


display:flex;

align-items:center;

justify-content:center;


color:var(--primary);


font-size:22px;


}




.portfolio-content{


padding:25px;


}



.portfolio-content span{


color:var(--primary);

font-size:14px;

font-weight:600;


}



.portfolio-content h4{


margin-top:10px;

font-weight:700;


}



.portfolio-content p{


color:#64748b;

font-size:15px;


}



.tech-tags small{


display:inline-block;


background:#e0f2fe;


color:#0369a1;


padding:5px 12px;


border-radius:20px;


margin-right:5px;


font-size:12px;


}

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


.testimonial-section{

background:#f8fafc;

}



.testimonial-card{


background:white;


padding:35px;


border-radius:25px;


box-shadow:

0 10px 40px rgba(0,0,0,.06);


height:100%;


}



.stars{


color:#f59e0b;


margin-bottom:20px;


}



.testimonial-card p{


color:#64748b;


line-height:1.8;


font-size:15px;


font-style:italic;


}



.client-info{


display:flex;


align-items:center;


gap:15px;


margin-top:25px;


}



.client-info img{


width:60px;


height:60px;


border-radius:50%;


object-fit:cover;


}



.client-info h5{


margin:0;


font-size:16px;


font-weight:700;


}



.client-info span{


color:#64748b;


font-size:14px;


}



/* Swiper Pagination */


.swiper-pagination-bullet{


width:10px;

height:10px;


}



.swiper-pagination-bullet-active{


background:var(--primary);


}

/* ===============================
BLOG SECTION
================================ */


.blog-section{

background:white;

}



.blog-card{


background:white;


border-radius:25px;


overflow:hidden;


box-shadow:

0 10px 40px rgba(0,0,0,.06);


transition:.4s;


height:100%;


}



.blog-card:hover{


transform:translateY(-10px);


box-shadow:

0 25px 50px rgba(0,0,0,.12);


}




.blog-image{


height:240px;

position:relative;

overflow:hidden;


}



.blog-image img{


width:100%;


height:100%;


object-fit:cover;


transition:.5s;


}



.blog-card:hover img{


transform:scale(1.1);


}




.blog-category{


position:absolute;


top:20px;

left:20px;


background:var(--primary);


color:white;


padding:8px 18px;


border-radius:50px;


font-size:13px;


font-weight:600;


}



.blog-content{


padding:30px;


}



.blog-meta{


color:#64748b;


font-size:14px;


margin-bottom:15px;


}



.blog-content h4{


font-weight:700;


line-height:1.4;


}



.blog-content p{


color:#64748b;


line-height:1.7;


}



.blog-content a{


text-decoration:none;


color:var(--primary);


font-weight:600;


}



.blog-content a i{


margin-left:8px;


transition:.3s;


}



.blog-content a:hover i{


transform:translateX(5px);


}

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


.faq-section{

background:#f8fafc;

}



.accordion-item{


border:none;

margin-bottom:15px;


border-radius:15px!important;


overflow:hidden;


box-shadow:

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


}



.accordion-button{


font-weight:600;


padding:20px;


color:var(--dark);


}



.accordion-button:not(.collapsed){


background:var(--primary);

color:white;


}



.accordion-body{


line-height:1.8;

color:#64748b;


}

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


.cta-section{


padding:80px 0;


background:#ffffff;


}



.cta-box{


background:

linear-gradient(
135deg,
#2563eb,
#06b6d4
);


padding:70px 40px;


border-radius:35px;


text-align:center;


color:white;


}



.cta-box h2{


font-size:42px;


font-weight:800;


}



.cta-box p{


max-width:700px;


margin:20px auto 35px;


font-size:18px;


opacity:.9;


}



.cta-buttons{


display:flex;


justify-content:center;


gap:15px;


flex-wrap:wrap;


}



.cta-buttons .btn{


padding:14px 35px;


font-weight:600;


}

/* ===============================
INNER PAGE HERO
================================ */


.inner-hero{


padding:120px 0;


background:

linear-gradient(
135deg,
#2563eb,
#06b6d4
);


color:white;


}



.inner-hero h1{


font-size:50px;

font-weight:800;


}





/* INFO CARDS */


.info-card{


background:white;


padding:40px 30px;


border-radius:25px;


text-align:center;


height:100%;


box-shadow:

0 10px 35px rgba(0,0,0,.06);


transition:.4s;


}



.info-card:hover{


transform:translateY(-10px);


}



.info-card i{


font-size:45px;


color:var(--primary);


margin-bottom:20px;


}





/* VALUES */


.values-section{


background:#f8fafc;


}



.value-card{


background:white;


padding:30px;


border-radius:20px;


text-align:center;


height:100%;


}



.value-card i{


font-size:35px;


color:var(--accent);


margin-bottom:15px;


}



.value-card h5{


font-weight:700;


}

/* ===============================
SERVICE DETAIL PAGE
================================ */


.services-page{

background:#f8fafc;

}



.detail-service-card{


background:white;


padding:35px;


border-radius:25px;


height:100%;


box-shadow:

0 10px 35px rgba(0,0,0,.06);


transition:.4s;


}



.detail-service-card:hover{


transform:translateY(-12px);


box-shadow:

0 25px 50px rgba(0,0,0,.12);


}



.detail-icon{


width:75px;

height:75px;


display:flex;


align-items:center;


justify-content:center;


background:

linear-gradient(
135deg,
var(--primary),
var(--accent)
);


color:white;


font-size:30px;


border-radius:20px;


margin-bottom:25px;


}



.detail-service-card h3{


font-weight:700;


margin-bottom:15px;


}



.detail-service-card p{


color:#64748b;


line-height:1.7;


}



.detail-service-card ul{


padding-left:20px;


color:#475569;


}



.detail-service-card ul li{


margin-bottom:10px;


}

/* ===============================
PRODUCT DETAILS PAGE
================================ */


.products-page{

background:#f8fafc;

}



.product-detail{


background:white;


padding:40px;


border-radius:30px;


box-shadow:

0 10px 40px rgba(0,0,0,.06);


}



.product-detail h2{


font-weight:800;


color:var(--dark);


}



.product-detail h5{


font-weight:700;

margin-top:25px;


}



.product-features{


padding-left:20px;


}



.product-features li{


margin-bottom:12px;


color:#475569;


}



.technology-label{


font-weight:700;


color:var(--dark);


}

/* ===============================
PORTFOLIO PAGE
================================ */


.portfolio-page{

background:#f8fafc;

}



.case-card{


background:white;


border-radius:25px;


overflow:hidden;


height:100%;


box-shadow:

0 10px 35px rgba(0,0,0,.06);


transition:.4s;


}



.case-card:hover{


transform:translateY(-12px);


box-shadow:

0 25px 50px rgba(0,0,0,.12);


}



.case-card img{


width:100%;


height:250px;


object-fit:cover;


}



.case-body{


padding:30px;


}



.case-body span{


color:var(--primary);


font-size:14px;


font-weight:600;


}



.case-body h3{


font-weight:700;


margin:15px 0;


}



.case-body p{


color:#64748b;


line-height:1.7;


}



.case-body h6{


font-weight:700;


margin-top:20px;


}

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


.contact-section{

background:#f8fafc;

}



.contact-box{


display:flex;


gap:20px;


align-items:center;


background:white;


padding:20px;


border-radius:20px;


margin-top:20px;


box-shadow:

0 8px 25px rgba(0,0,0,.05);


}



.contact-box i{


width:55px;


height:55px;


border-radius:50%;


display:flex;


align-items:center;


justify-content:center;


background:var(--primary);


color:white;


font-size:22px;


}



.contact-box h5{


margin:0;


font-weight:700;


}



.contact-box p{


margin:5px 0 0;


color:#64748b;


}






.contact-form{


background:white;


padding:40px;


border-radius:30px;


box-shadow:

0 10px 40px rgba(0,0,0,.06);


}



.contact-form h3{


font-weight:800;


margin-bottom:30px;


}



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


border-radius:15px;


padding:15px;


border:1px solid #e2e8f0;


}



.contact-form input:focus,
.contact-form textarea:focus{


border-color:var(--primary);


box-shadow:none;


}



.map-section iframe{


display:block;


}

.whatsapp-float{


position:fixed;


right:25px;


bottom:25px;


width:60px;


height:60px;


background:#25D366;


color:white;


border-radius:50%;


display:flex;


align-items:center;


justify-content:center;


font-size:32px;


z-index:999;


text-decoration:none;


box-shadow:

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


}



.whatsapp-float:hover{


transform:scale(1.1);


color:white;


}

.thank-icon{

font-size:80px;

color:var(--primary);

}