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

.social-media a{
    transition:.4s ease;
}

.social-media a:hover{
    background:var(--main-color);
    box-shadow:0 0 15px var(--main-color);
    transform:translateY(-5px);
}

.social-media a i{
    font-size:2rem;
}

/* HackerRank image hover */
.social-media a img{
    filter:invert(1);
    transition:.4s ease;
}

.social-media a:hover img{
    filter:invert(0);
}

/* GLOBAL */
*{

margin:0;
padding:0;
box-sizing:border-box;
font-family:'Poppins',sans-serif;
scroll-behavior:smooth;
}
.services-box{
    width:380px;
    min-height:420px;
}

:root{
--bg-color:#06142d;
--second-bg-color:#010814;
--text-color:#fff;
--main-color:#0ef;
--box-color:#14121c;
}

html{font-size:72.5%;overflow-x:hidden;}
body{background:var(--bg-color);color:var(--text-color);}

section{min-height:100vh;padding:10rem 9% 2rem}

/* HEADER */
.header{
position:fixed;top:0;width:100%;padding:2rem 9%;
background:var(--bg-color);display:flex;justify-content:space-between;z-index:100;
}

.logo{font-size:2.5rem;font-weight:600}
.navbar a{color:white;margin-left:4rem;font-size:1.7rem}
.navbar a:hover,.navbar a.active{color:var(--main-color)}

#menu-icon{display:none;font-size:3rem}

/* HOME */
.home{display:flex;align-items:center;justify-content:center}
.home-img img{width:35vw;animation:float 4s infinite}
@keyframes float{50%{transform:translateY(-20px)}}

.social-media a{
width:40px;height:40px;border:2px solid var(--main-color);
display:inline-flex;align-items:center;justify-content:center;border-radius:50%;
margin:2rem 1rem 2rem 0;color:var(--main-color)
}

.btn{
padding:1rem 3rem;background:var(--main-color);border-radius:4rem;
color:#000;font-weight:600
}

/* ABOUT */
.about{display:flex;gap:3rem;background:var(--second-bg-color)}
.about img{width:35vw}

.heading{text-align:center;font-size:4rem;margin-bottom:3rem}

/* TECH SKILLS */
.skill-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(130px,1fr));
gap:2rem;margin-top:3rem
}

.skill-card{
background:var(--second-bg-color);
padding:2rem;border-radius:1.5rem;text-align:center;
transition:.4s;border:1px solid transparent
}

.skill-card i{font-size:2.8rem;color:var(--main-color)}
.skill-card:hover{
border-color:var(--main-color);
transform:translateY(-6px);
box-shadow:0 0 15px var(--main-color)
}

/* PROFESSIONAL SKILLS */
.soft-skill{margin-top:3rem}
.soft-skill-box{margin-bottom:2rem}

.soft-bar{
height:12px;background:#000;border-radius:20px;overflow:hidden
}

.soft-bar span{
height:100%;display:block;background:var(--main-color);
animation:fill 2s ease
}

@keyframes fill{from{width:0}}

/* SERVICES */
.services-container{
display:flex;flex-wrap:wrap;gap:3rem;justify-content:center;max-width:1200px;margin:auto
}

.services-box{
width:1380px;min-height:120px;padding:4rem 3rem;text-align:center;
background:var(--second-bg-color);border-radius:2rem;
transition:.4s;border:2px solid transparent
}

.services-box:hover{
transform:translateY(-10px);
border-color:var(--main-color)
}

.services-box i{font-size:7rem;color:var(--main-color)}
.services-box p{margin:2rem 0}

/* PORTFOLIO */
.portfolio{background:var(--second-bg-color)}
.portfolio-container{
display:grid;grid-template-columns:repeat(3,1fr);gap:2rem
}

.portfolio-box{
position:relative;overflow:hidden;border-radius:2rem
}

.portfolio-box img{width:100%;transition:.5s}
.portfolio-box:hover img{transform:scale(1.1)}

.portfolio-layer{
position:absolute;inset:0;
background:linear-gradient(rgba(0,0,0,.2),var(--main-color));
display:flex;flex-direction:column;align-items:center;justify-content:center;
transform:translateY(100%);transition:.5s
}

.portfolio-box:hover .portfolio-layer{transform:translateY(0)}

video {
  border-radius: 10px;
  max-width: 100%;
}


/* CERTIFICATIONS */
.certification-container{
display:grid;grid-template-columns:repeat(3,1fr);gap:2rem
}

.cert-box{
background:var(--bg-color);padding:2rem;border-radius:2rem;text-align:center;
transition:.4s;border:2px solid transparent
}

.cert-box:hover{
border-color:var(--main-color);
transform:translateY(-6px)
}

.cert-box:hover img{
    transform:scale(1.05);
}

.cert-box h4{
    font-size:1.6rem;
    margin-top:.5rem;
}
.cert-box img{
    width:100%;
    height:200px;
    object-fit:cover;
    border-radius:1.2rem;
    cursor:pointer;
    transition:.3s;
}

.cert-box img:hover{
    transform:scale(1.05);
}

/* Modal */

.cert-modal{
    display:none;
    position:fixed;
    z-index:9999;
    left:0;
    top:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,.9);
}

.cert-modal-content{
    margin:auto;
    display:block;
    max-width:90%;
    max-height:90%;
    margin-top:5%;
    border-radius:1rem;
}

.close{
    position:absolute;
    top:20px;
    right:40px;
    color:white;
    font-size:40px;
    cursor:pointer;
}


/* FOOTER */
.footer{
display:flex;justify-content:space-between;padding:2rem 9%;
background:var(--second-bg-color)
}

/* RESPONSIVE */
@media(max-width:991px){
.portfolio-container,.certification-container{grid-template-columns:repeat(2,1fr)}
}

@media(max-width:768px){
#menu-icon{display:block}
.navbar{display:none}
.home{flex-direction:column}
}

@media(max-width:617px){
.portfolio-container,.certification-container{grid-template-columns:1fr}
}

@media(max-width:450px){
html{font-size:55%}
}