/*==========================
Google Font
==========================*/

*{
margin:0;
padding:0;
box-sizing:border-box;
scroll-behavior:smooth;
}

body{

font-family:'Poppins',sans-serif;
background:#08131a;
color:#fff;
line-height:1.8;
overflow-x:hidden;

}

img{
max-width:100%;
display:block;
}

a{
text-decoration:none;
color:inherit;
}

ul{
list-style:none;
}

.container{

width:90%;
max-width:1200px;
margin:auto;

}

/*==========================
Header
==========================*/

header{

position:fixed;
top:0;
left:0;
width:100%;
z-index:999;
background:rgba(5,15,20,.90);
backdrop-filter:blur(15px);
border-bottom:1px solid rgba(255,255,255,.05);

}

.nav{

display:flex;
justify-content:space-between;
align-items:center;
height:80px;

}

.logo{

font-size:32px;
font-weight:700;
color:#ffffff;

}

.logo span{

color:#00d084;

}

nav ul{

display:flex;
gap:35px;

}

nav a{

font-weight:500;
transition:.4s;

}

nav a:hover{

color:#00d084;

}

.btn-nav{

background:#00d084;
padding:12px 30px;
border-radius:50px;
font-weight:600;
transition:.4s;
color:#fff;

}

.btn-nav:hover{

background:#00b46f;
transform:translateY(-3px);

}

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

.hero{

padding:160px 0 100px;

}

.hero-grid{

display:grid;
grid-template-columns:repeat(2,1fr);
align-items:center;
gap:70px;

}

.hero h5{

color:#00d084;
font-size:18px;
margin-bottom:10px;

}

.hero h1{

font-size:60px;
line-height:1.2;
margin-bottom:20px;

}

.hero h1 span{

color:#00d084;

}

.hero h3{

font-size:28px;
font-weight:500;
margin-bottom:20px;

}

.hero p{

color:#bdbdbd;
margin-bottom:35px;

}

.hero-btn{

display:flex;
gap:20px;
margin-bottom:50px;

}

.btn{

background:#00d084;
padding:15px 35px;
border-radius:50px;
font-weight:600;
display:inline-block;
transition:.4s;

}

.btn:hover{

background:#00b46f;
transform:translateY(-5px);

}

.btn-outline{

border:2px solid #00d084;
padding:15px 35px;
border-radius:50px;
transition:.4s;

}

.btn-outline:hover{

background:#00d084;

}

.hero-info{

display:flex;
gap:45px;

}

.hero-info h2{

font-size:40px;
color:#00d084;

}

.hero-image{

text-align:center;

}

.hero-image img{

width:850px;
border-radius:30px;
border:5px solid rgba(0,208,132,.2);

box-shadow:

0 0 30px rgba(0,208,132,.25),

0 0 80px rgba(0,208,132,.15);

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

}

/*==========================
Titles
==========================*/

.section-title{

text-align:center;
margin-bottom:70px;

}

.section-title h2{

font-size:42px;
margin-bottom:15px;

}

.section-title p{

color:#bfbfbf;

}

.left{

text-align:left;

}

/*==========================
Services
==========================*/

#services{

padding:100px 0;

}

.service-grid{

display:grid;
grid-template-columns:repeat(3,1fr);
gap:30px;

}

.service-box{

background:#101d27;
padding:40px 30px;
border-radius:20px;
transition:.4s;
border:1px solid rgba(255,255,255,.05);

}

.service-box:hover{

transform:translateY(-12px);
border-color:#00d084;

box-shadow:0 15px 40px rgba(0,208,132,.20);

}

.service-box i{

font-size:45px;
color:#00d084;
margin-bottom:20px;

}

.service-box h3{

margin-bottom:15px;

}

.service-box p{

color:#c4c4c4;

}

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

#about{

padding:100px 0;

}

.about-grid{

display:grid;
grid-template-columns:1fr 1.2fr;
gap:70px;
align-items:center;

}

.about-image img{

border-radius:25px;

box-shadow:0 0 40px rgba(0,208,132,.25);

}

.about-content p{

margin-bottom:20px;
color:#d7d7d7;

}

.skills{

margin:40px 0;

}

.skill{

margin-bottom:25px;

}

.skill span{

display:block;
margin-bottom:10px;

}

.bar{

background:#1b2b35;
height:10px;
border-radius:20px;
overflow:hidden;

}

.fill{

background:#00d084;
height:100%;
border-radius:20px;

}

.w95{width:95%;}
.w90{width:90%;}
.w88{width:88%;}

.highlight{

background:#101d27;
padding:25px;
border-radius:20px;
margin:40px 0;

}

.highlight ul li{

padding:10px 0;

}

blockquote{

background:#0d1820;
padding:30px;
border-left:5px solid #00d084;
border-radius:15px;
font-style:italic;
font-size:18px;

}

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

#contact{

padding:100px 0;

}

.contact-grid{

display:grid;
grid-template-columns:1fr 1fr;
gap:50px;

}

.contact-box{

display:flex;
align-items:center;
gap:20px;
margin-bottom:25px;

}

.contact-box i{

width:60px;
height:60px;
background:#00d084;
border-radius:50%;
display:flex;
justify-content:center;
align-items:center;
font-size:24px;

}

.contact-form{

background:#101d27;
padding:40px;
border-radius:20px;

}

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

width:100%;
padding:16px;
margin-bottom:20px;
background:#08131a;
border:none;
border-radius:10px;
color:#fff;
font-size:15px;

}

.contact-form button{

border:none;
cursor:pointer;

}

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

footer{

padding:35px 0;
text-align:center;
border-top:1px solid rgba(255,255,255,.08);
color:#bcbcbc;

}

/*==========================
Animation
==========================*/

@keyframes float{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-12px);

}

100%{

transform:translateY(0);

}

}

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

@media(max-width:992px){

.hero-grid,
.about-grid,
.contact-grid{

grid-template-columns:1fr;

}

.service-grid{

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

}

.hero{

text-align:center;

}

.hero-image{

order:-1;

}

.hero-info{

justify-content:center;

}

}

@media(max-width:768px){

nav{

display:none;

}

.hero h1{

font-size:40px;

}

.hero h3{

font-size:22px;

}

.hero-image img{

width:320px;

}

.service-grid{

grid-template-columns:1fr;

}

.hero-info{

flex-direction:column;
gap:25px;

}

.hero-btn{

flex-direction:column;

}

.section-title h2{

font-size:34px;

}

}
/* ===============================
Active Menu
=============================== */

nav a.active{
color:#00d084;
}

/* ===============================
Scroll Animation
=============================== */

.hidden{

opacity:0;
transform:translateY(60px);
transition:1s;

}

.show{

opacity:1;
transform:translateY(0);

}

/* ===============================
Back To Top
=============================== */

#topBtn{

position:fixed;
right:25px;
bottom:25px;

width:55px;
height:55px;

border:none;
border-radius:50%;

background:#00d084;
color:#fff;

font-size:20px;
cursor:pointer;

opacity:0;
visibility:hidden;

transition:.4s;

z-index:999;

box-shadow:0 15px 30px rgba(0,208,132,.35);

}

#topBtn:hover{

transform:translateY(-5px);

}

.showBtn{

opacity:1 !important;
visibility:visible !important;

}

/* ===============================
WhatsApp
=============================== */

#whatsapp{

position:fixed;

left:25px;
bottom:25px;

width:60px;
height:60px;

background:#25D366;

border-radius:50%;

display:flex;
align-items:center;
justify-content:center;

font-size:34px;
color:#fff;

z-index:999;

box-shadow:0 15px 35px rgba(37,211,102,.45);

animation:pulse 2s infinite;

}

@keyframes pulse{

0%{

transform:scale(1);

}

50%{

transform:scale(1.12);

}

100%{

transform:scale(1);

}

}