/*==========================================================
 ELVIN KUBERNETES TECH
 Enterprise Website Stylesheet
 Version: 1.0
==========================================================*/


/*==========================================================
Google Fonts
==========================================================*/

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


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

:root{

--primary:#0d6efd;
--primary-dark:#0b5ed7;

--secondary:#1f2937;

--success:#198754;

--danger:#dc3545;

--warning:#ffc107;

--info:#0dcaf0;

--dark:#0b1220;

--dark-light:#16213a;

--white:#ffffff;

--light:#f8f9fa;

--gray:#6b7280;

--gray-light:#f1f5f9;

--border:#e5e7eb;

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

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

--shadow-lg:0 25px 60px rgba(0,0,0,.15);

--radius:12px;

--radius-lg:18px;

--transition:.35s ease;

}


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

*{

margin:0;

padding:0;

box-sizing:border-box;

}

html{

scroll-behavior:smooth;

}

body{

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

font-size:16px;

line-height:1.7;

background:#ffffff;

color:#222;

overflow-x:hidden;

}


/*==========================================================
Typography
==========================================================*/

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

font-weight:700;

line-height:1.3;

color:#111827;

}

p{

color:#6b7280;

margin-bottom:20px;

}

a{

text-decoration:none;

transition:var(--transition);

}

img{

max-width:100%;

display:block;

}

ul{

list-style:none;

padding:0;

margin:0;

}


/*==========================================================
Utilities
==========================================================*/

.container{

max-width:1320px;

}

.text-primary{

color:var(--primary)!important;

}

.bg-primary{

background:var(--primary)!important;

}

.shadow{

box-shadow:var(--shadow)!important;

}

.rounded{

border-radius:var(--radius)!important;

}

.section-padding{

padding:100px 0;

}

.section-title{

text-align:center;

margin-bottom:70px;

}

.section-title h2{

font-size:2.8rem;

margin-bottom:20px;

font-weight:800;

}

.section-title p{

max-width:750px;

margin:auto;

font-size:1.1rem;

}


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

.btn{

border-radius:50px;

padding:15px 38px;

font-weight:600;

transition:var(--transition);

}

.btn-primary{

background:var(--primary);

border:none;

}

.btn-primary:hover{

background:var(--primary-dark);

transform:translateY(-3px);

box-shadow:var(--shadow);

}

.btn-outline-light{

border:2px solid #fff;

color:#fff;

}

.btn-outline-light:hover{

background:#fff;

color:var(--primary);

}


/*==========================================================
Navbar
==========================================================*/

.navbar{

background:#fff;

padding:18px 0;

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

transition:var(--transition);

z-index:9999;

}

.navbar-brand{

font-size:1.8rem;

font-weight:800;

color:var(--primary)!important;

letter-spacing:.5px;

}

.nav-link{

font-weight:600;

color:#1f2937!important;

margin-left:18px;

position:relative;

}

.nav-link::after{

content:"";

position:absolute;

left:0;

bottom:-6px;

width:0;

height:3px;

background:var(--primary);

transition:var(--transition);

}

.nav-link:hover::after{

width:100%;

}

.nav-link:hover{

color:var(--primary)!important;

}

.navbar-toggler{

border:none;

box-shadow:none!important;

}


/*==========================================================
Sticky Navbar
==========================================================*/

.navbar.scrolled{

padding:12px 0;

background:#ffffff;

box-shadow:var(--shadow);

}

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

.hero{

background:linear-gradient(135deg,#0b5ed7 0%,#081f52 100%);

color:#fff;

padding:170px 0 120px;

position:relative;

overflow:hidden;

}

.hero::before{

content:"";

position:absolute;

width:650px;

height:650px;

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

border-radius:50%;

top:-250px;

right:-180px;

}

.hero::after{

content:"";

position:absolute;

width:450px;

height:450px;

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

border-radius:50%;

bottom:-220px;

left:-150px;

}

.hero .container{

position:relative;

z-index:2;

}

.hero h1{

font-size:4rem;

font-weight:800;

color:#fff;

margin-bottom:25px;

line-height:1.2;

}

.hero p{

font-size:1.2rem;

color:#eef2ff;

max-width:650px;

margin-bottom:35px;

}

.hero-buttons{

display:flex;

gap:20px;

margin-top:35px;

flex-wrap:wrap;

}

.hero-image{

text-align:center;

}

.hero-image img{

max-width:100%;

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

}


/*==========================================================
Animations
==========================================================*/

@keyframes float{

0%{

transform:translateY(0px);

}

50%{

transform:translateY(-15px);

}

100%{

transform:translateY(0px);

}

}

@keyframes fadeUp{

from{

opacity:0;

transform:translateY(40px);

}

to{

opacity:1;

transform:translateY(0);

}

}

.fade-up{

animation:fadeUp .8s ease forwards;

}


/*==========================================================
Sections
==========================================================*/

section{

padding:100px 0;

}

.services{

background:#f8fafc;

}

.ai{

background:#ffffff;

}


/*==========================================================
Cards
==========================================================*/

.service-card,
.ai-card,
.lab-card,
.project-card{

background:#ffffff;

border-radius:18px;

padding:40px 35px;

height:100%;

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

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

transition:var(--transition);

position:relative;

overflow:hidden;

}

.service-card::before,
.ai-card::before,
.lab-card::before,
.project-card::before{

content:"";

position:absolute;

left:0;

top:0;

width:100%;

height:4px;

background:var(--primary);

transform:scaleX(0);

transition:var(--transition);

}

.service-card:hover,
.ai-card:hover,
.lab-card:hover,
.project-card:hover{

transform:translateY(-10px);

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

}

.service-card:hover::before,
.ai-card:hover::before,
.lab-card:hover::before,
.project-card:hover::before{

transform:scaleX(1);

}


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

.service-card i,
.ai-card i,
.lab-card i{

font-size:55px;

color:var(--primary);

margin-bottom:25px;

transition:var(--transition);

}

.service-card:hover i,
.ai-card:hover i,
.lab-card:hover i{

transform:scale(1.1) rotate(-5deg);

}

.service-card h3,
.ai-card h3,
.lab-card h3,
.project-card h3{

font-size:1.45rem;

font-weight:700;

margin-bottom:18px;

}

.service-card p,
.ai-card p,
.lab-card p,
.project-card p{

font-size:1rem;

line-height:1.8;

margin-bottom:0;

}


/*==========================================================
Background Utilities
==========================================================*/

.bg-light-section{

background:#f8fafc;

}

.bg-white{

background:#ffffff;

}

/*==========================================================
Engineering Lab
==========================================================*/

.engineering-lab{

background:#f1f5f9;

position:relative;

}

.engineering-lab .section-title h2{

color:#111827;

}

.engineering-lab .lab-card{

text-align:center;

}

.engineering-lab .lab-card i{

display:inline-block;

margin-bottom:25px;

}


/*==========================================================
Projects
==========================================================*/

.projects{

background:#ffffff;

}

.project-card{

text-align:left;

}

.project-card h3{

color:#111827;

}

.project-card p{

margin-bottom:25px;

}

.project-card .btn{

margin-top:auto;

}


/*==========================================================
About
==========================================================*/

.about{

background:#f8fafc;

}

.about h2{

font-size:2.7rem;

font-weight:800;

margin-bottom:25px;

}

.about p{

font-size:1.05rem;

line-height:1.9;

margin-bottom:20px;

}

.about img{

width:100%;

border-radius:20px;

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

}


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

.contact{

background:#ffffff;

}

.contact form{

background:#ffffff;

padding:45px;

border-radius:20px;

box-shadow:var(--shadow);

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

}


/*==========================================================
Forms
==========================================================*/

.form-control{

height:56px;

border-radius:12px;

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

padding:14px 18px;

font-size:1rem;

transition:var(--transition);

box-shadow:none;

}

textarea.form-control{

height:180px;

resize:none;

padding-top:16px;

}

.form-control:focus{

border-color:var(--primary);

box-shadow:0 0 0 .2rem rgba(13,110,253,.15);

}

form .btn-primary{

margin-top:15px;

padding:15px 40px;

}


/*==========================================================
Images
==========================================================*/

img{

max-width:100%;

height:auto;

}

.rounded-image{

border-radius:20px;

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

}


/*==========================================================
Spacing Helpers
==========================================================*/

.mt-100{

margin-top:100px;

}

.mb-100{

margin-bottom:100px;

}

.py-100{

padding-top:100px;

padding-bottom:100px;

}

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

.footer{

background:#0b1220;

color:#ffffff;

padding:80px 0 30px;

}

.footer h3,
.footer h5{

color:#ffffff;

font-weight:700;

margin-bottom:20px;

}

.footer p{

color:#cbd5e1;

line-height:1.8;

}

.footer-links{

padding:0;

margin:0;

list-style:none;

}

.footer-links li{

margin-bottom:12px;

}

.footer-links a{

color:#cbd5e1;

transition:var(--transition);

}

.footer-links a:hover{

color:#ffffff;

padding-left:6px;

}

.footer hr{

border-color:#334155;

margin:40px 0 25px;

}

.copyright{

text-align:center;

color:#94a3b8;

font-size:.95rem;

}


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

.social-icons{

display:flex;

gap:12px;

margin-top:20px;

}

.social-icons a{

width:45px;

height:45px;

display:flex;

align-items:center;

justify-content:center;

background:#1e293b;

border-radius:50%;

color:#ffffff;

font-size:18px;

transition:var(--transition);

}

.social-icons a:hover{

background:var(--primary);

transform:translateY(-5px);

}


/*==========================================================
Scrollbar
==========================================================*/

::-webkit-scrollbar{

width:10px;

}

::-webkit-scrollbar-track{

background:#f1f5f9;

}

::-webkit-scrollbar-thumb{

background:var(--primary);

border-radius:20px;

}

::-webkit-scrollbar-thumb:hover{

background:var(--primary-dark);

}


/*==========================================================
Text Selection
==========================================================*/

::selection{

background:var(--primary);

color:#ffffff;

}


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

@media(max-width:1200px){

.hero h1{

font-size:3.4rem;

}

}

@media(max-width:992px){

.section-padding{

padding:80px 0;

}

.hero{

padding:140px 0 90px;

text-align:center;

}

.hero h1{

font-size:2.9rem;

}

.hero p{

margin-left:auto;

margin-right:auto;

}

.hero-buttons{

justify-content:center;

}

.about{

text-align:center;

}

.about img{

margin-top:40px;

}

.contact form{

padding:35px;

}

}

@media(max-width:768px){

.navbar-brand{

font-size:1.5rem;

}

.section-title{

margin-bottom:50px;

}

.section-title h2{

font-size:2.2rem;

}

.hero{

padding:120px 0 70px;

}

.hero h1{

font-size:2.3rem;

}

.hero p{

font-size:1rem;

}

.service-card,
.ai-card,
.lab-card,
.project-card{

padding:30px;

margin-bottom:25px;

}

.contact form{

padding:25px;

}

.footer{

text-align:center;

}

.footer .row>div{

margin-bottom:35px;

}

.social-icons{

justify-content:center;

}

}

@media(max-width:576px){

.hero h1{

font-size:2rem;

}

.btn{

width:100%;

margin-bottom:15px;

}

.hero-buttons{

flex-direction:column;

}

.section-title h2{

font-size:1.9rem;

}

}

/*==========================================================
End of Stylesheet
==========================================================*/