/* ==========================================================
THE E-X TECHNOLOGIES
STYLE.CSS
========================================================== */


/* ==========================================================
GOOGLE FONT
========================================================== */

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


/* ==========================================================
RESET
========================================================== */

*{

margin:0;

padding:0;

box-sizing:border-box;

scroll-behavior:smooth;

}


body{

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

background:#050816;

color:#ffffff;

overflow-x:hidden;

line-height:1.7;

}


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

.container{

width:90%;

max-width:1200px;

margin:auto;

}


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

a{

text-decoration:none;

color:white;

}


img{

width:100%;

display:block;

}


/* ==========================================================
SECTION SPACING
========================================================== */

section{

padding:100px 0;

}


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

.section-title{

text-align:center;

margin-bottom:70px;

}


.section-title p{

color:#38bdf8;

font-weight:700;

letter-spacing:2px;

margin-bottom:15px;

text-transform:uppercase;

}


.section-title h2{

font-size:42px;

font-weight:800;

line-height:1.2;

}


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

header{

position:fixed;

top:0;

left:0;

width:100%;

z-index:999;

background:rgba(5,8,22,.85);

backdrop-filter:blur(14px);

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

}


.navbar{

height:80px;

display:flex;

align-items:center;

justify-content:space-between;

width:90%;

max-width:1200px;

margin:auto;

}


.logo h2{

font-size:28px;

font-weight:800;

}


.logo span{

color:#38bdf8;

}


.nav-links{

display:flex;

list-style:none;

gap:35px;

}


.nav-links a{

font-weight:600;

transition:.3s;

}


.nav-links a:hover{

color:#38bdf8;

}


.menu-btn{

display:none;

font-size:32px;

cursor:pointer;

}


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

.hero{

min-height:100vh;

display:flex;

align-items:center;

justify-content:space-between;

gap:60px;

padding-top:140px;

width:90%;

max-width:1200px;

margin:auto;

}


.hero-content{

flex:1;

}


.small-title{

color:#38bdf8;

font-weight:700;

letter-spacing:2px;

margin-bottom:20px;

}


.hero h1{

font-size:64px;

font-weight:800;

line-height:1.1;

margin-bottom:25px;

}


.hero-text{

font-size:18px;

color:#cbd5e1;

margin-bottom:40px;

max-width:650px;

}


.hero-buttons{

display:flex;

gap:20px;

flex-wrap:wrap;

}


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

.btn-primary{

display:inline-block;

padding:16px 34px;

background:#2563eb;

border-radius:50px;

font-weight:700;

transition:.35s;

}


.btn-primary:hover{

transform:translateY(-5px);

background:#1d4ed8;

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

}


.btn-secondary{

display:inline-block;

padding:16px 34px;

border:2px solid #38bdf8;

border-radius:50px;

font-weight:700;

transition:.35s;

}


.btn-secondary:hover{

background:#38bdf8;

color:#050816;

transform:translateY(-5px);

}


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

.hero-image{

flex:1;

position:relative;

display:flex;

align-items:center;

justify-content:center;

height:520px;

}


.glass-card{

width:360px;

padding:45px;

border-radius:25px;

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

backdrop-filter:blur(20px);

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

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

z-index:2;

}


.glass-card h3{

font-size:28px;

margin-bottom:20px;

}


.glass-card p{

color:#cbd5e1;

}
/* ==========================================================
ANIMATED CIRCLES
========================================================== */

.circle{

position:absolute;

border-radius:50%;

filter:blur(2px);

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

}

.circle.one{

width:120px;

height:120px;

background:#2563eb;

top:20px;

left:20px;

opacity:.5;

}

.circle.two{

width:180px;

height:180px;

background:#7c3aed;

bottom:40px;

right:30px;

opacity:.35;

animation-delay:1.5s;

}

.circle.three{

width:90px;

height:90px;

background:#06b6d4;

top:180px;

right:100px;

opacity:.5;

animation-delay:3s;

}

@keyframes float{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-20px);

}

100%{

transform:translateY(0);

}

}


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

.about-grid{

display:grid;

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

gap:60px;

align-items:center;

}

.about-text p{

margin-bottom:25px;

color:#cbd5e1;

font-size:17px;

}

.about-card{

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

padding:40px;

border-radius:20px;

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

backdrop-filter:blur(12px);

}

.about-card h3{

margin-bottom:15px;

color:#38bdf8;

}

.about-card p{

margin-bottom:25px;

color:#cbd5e1;

}


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

.stats{

background:#091126;

}

.stats-grid{

display:grid;

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

gap:30px;

}

.stat-card{

text-align:center;

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

padding:35px;

border-radius:18px;

transition:.35s;

}

.stat-card:hover{

transform:translateY(-10px);

box-shadow:0 0 30px rgba(37,99,235,.3);

}

.stat-card h2{

font-size:48px;

color:#38bdf8;

margin-bottom:10px;

}

.stat-card p{

color:#cbd5e1;

}


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

.features-grid{

display:grid;

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

gap:30px;

}

.feature-card{

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

padding:35px;

border-radius:20px;

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

transition:.35s;

}

.feature-card:hover{

transform:translateY(-10px);

background:rgba(37,99,235,.12);

}

.feature-card h3{

margin-bottom:15px;

font-size:24px;

}

.feature-card p{

color:#cbd5e1;

}


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

.services-grid{

display:grid;

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

gap:30px;

}

.service-card{

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

padding:35px;

border-radius:20px;

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

transition:.35s;

}

.service-card:hover{

transform:translateY(-10px);

box-shadow:0 0 30px rgba(6,182,212,.3);

}

.service-card h3{

margin-bottom:15px;

color:#38bdf8;

}

.service-card p{

color:#cbd5e1;

}


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

.projects-grid{

display:grid;

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

gap:30px;

}

.project-card{

overflow:hidden;

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

border-radius:20px;

transition:.35s;

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

}

.project-card:hover{

transform:translateY(-10px);

}

.project-image{

height:420px;

overflow:hidden;

border-radius:20px 20px 0 0;

}

.project-image img{

width:100%;

height:100%;

object-fit:contain;

background:#050816;

}

.project-content{

padding:25px;

}

.project-content h3{

margin-bottom:15px;

}

.project-content p{

color:#cbd5e1;

margin-bottom:20px;

}

.project-content span{

display:inline-block;

padding:8px 18px;

background:#2563eb;

border-radius:30px;

font-size:14px;

}


/* ==========================================================
TECHNOLOGIES
========================================================== */

.tech-grid{

display:grid;

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

gap:25px;

}

.tech-card{

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

padding:28px;

text-align:center;

font-weight:700;

border-radius:15px;

transition:.35s;

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

}

.tech-card:hover{

background:#2563eb;

transform:translateY(-8px);

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

.process{

background:#091126;

}

.process-grid{

display:grid;

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

gap:30px;

}

.process-card{

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

padding:35px;

border-radius:20px;

text-align:center;

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

transition:.35s;

}

.process-card:hover{

transform:translateY(-10px);

box-shadow:0 0 30px rgba(37,99,235,.3);

}

.process-card h3{

font-size:48px;

color:#38bdf8;

margin-bottom:15px;

}

.process-card h4{

margin-bottom:15px;

font-size:22px;

}

.process-card p{

color:#cbd5e1;

}


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

.testimonial-grid{

display:grid;

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

gap:30px;

}

.testimonial-card{

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

padding:35px;

border-radius:20px;

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

transition:.35s;

}

.testimonial-card:hover{

transform:translateY(-10px);

}

.testimonial-card p{

color:#cbd5e1;

margin-bottom:25px;

}

.testimonial-card h4{

margin-bottom:5px;

color:#38bdf8;

}

.testimonial-card span{

font-size:14px;

color:#94a3b8;

}


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

.contact-wrapper{

display:grid;

grid-template-columns:1fr 1fr;

gap:50px;

}

.contact-info h3{

font-size:32px;

margin-bottom:20px;

}

.contact-info p{

margin-bottom:15px;

color:#cbd5e1;

}

.contact-form{

display:flex;

flex-direction:column;

gap:20px;

}

.contact-form input,

.contact-form textarea{

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

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

padding:18px;

border-radius:12px;

color:#fff;

font-size:16px;

outline:none;

}

.contact-form input:focus,

.contact-form textarea:focus{

border-color:#38bdf8;

}

.contact-form textarea{

resize:vertical;

min-height:180px;

}


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

footer{

background:#030712;

padding:60px 0;

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

}

.footer-content{

text-align:center;

}

.footer-content h2{

font-size:34px;

margin-bottom:20px;

}

.footer-content span{

color:#38bdf8;

}

.footer-content p{

color:#94a3b8;

margin-bottom:25px;

}

.footer-links{

display:flex;

justify-content:center;

gap:30px;

flex-wrap:wrap;

margin-bottom:30px;

}

.footer-links a{

transition:.3s;

}

.footer-links a:hover{

color:#38bdf8;

}

.copyright{

font-size:15px;

color:#64748b;

}


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

@media(max-width:992px){

.hero,

.about-grid,

.contact-wrapper{

grid-template-columns:1fr;

display:grid;

}

.hero{

text-align:center;

}

.hero-buttons{

justify-content:center;

}

.services-grid,

.projects-grid,

.tech-grid,

.process-grid,

.testimonial-grid,

.features-grid,

.stats-grid{

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

}

}


@media(max-width:768px){

.nav-links{

display:none;

}

.menu-btn{

display:block;

}

.hero h1{

font-size:42px;

}

.section-title h2{

font-size:34px;

}

.services-grid,

.projects-grid,

.tech-grid,

.process-grid,

.testimonial-grid,

.features-grid,

.stats-grid{

grid-template-columns:1fr;

}

.hero{

padding-top:120px;

}

.glass-card{

width:100%;

max-width:340px;

}

}


@media(max-width:480px){

.container{

width:92%;

}

.hero h1{

font-size:34px;

}

.hero-text{

font-size:16px;

}

.btn-primary,

.btn-secondary{

width:100%;

text-align:center;

}

.section-title h2{

font-size:28px;

}

.logo h2{

font-size:22px;

}

}
/* ==========================================================
JAVASCRIPT EFFECT CLASSES
========================================================== */

.nav-links.active{

display:flex;

flex-direction:column;

position:absolute;

top:80px;

right:5%;

width:220px;

padding:25px;

background:#091126;

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

border-radius:15px;

gap:20px;

}


header.scrolled{

background:rgba(3,7,18,.97);

box-shadow:0 5px 30px rgba(0,0,0,.3);

}


.about,

.stats,

.why-us,

.services,

.projects,

.technologies,

.process,

.testimonials,

.contact{

opacity:0;

transform:translateY(40px);

transition:1s ease;

}


.about.show,

.stats.show,

.why-us.show,

.services.show,

.projects.show,

.technologies.show,

.process.show,

.testimonials.show,

.contact.show{

opacity:1;

transform:translateY(0);

}