@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700;800&display=swap");
@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,300;0,400;0,600;0,700;1,300;1,400&display=swap');

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  text-decoration: none;
  outline: none; border: none;
  text-transform: capitalize;
  transition: all .2s linear;
}
html{
  font-size: 62.5%;
  overflow-x: hidden;
  scroll-behavior: smooth;
}
body{
  background: #f7f7f7;
  font-family: 'Poppins', sans-serif;
}
img{ max-width: 100%; display: block; }

*::selection{
  background: #2b3dda;
  color: #fff;
}

html::-webkit-scrollbar{ width: .8rem; }
html::-webkit-scrollbar-track{ background: rgb(235, 202, 245); }
html::-webkit-scrollbar-thumb{ background: #420177; }

a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: .2rem solid #011aff;
  outline-offset: .2rem;
}
.skip-link{
  position: absolute;
  top: -8rem; left: 1.2rem;
  z-index: 10002;
  background: #0e2431;
  color: #fff;
  font-size: 1.4rem;
  padding: 1rem 1.8rem;
  border-radius: .5rem;
  transition: top .2s ease;
}
.skip-link:focus{ top: 1.2rem; }

section{
  min-height: 100vh;
  padding: 2rem 9%;
}
.heading{
  font-size: 3.5rem;
  color: rgb(32, 32, 32);
  font-weight: 800;
  text-align: center;
  padding-top: 8rem;
}
.heading span{ color: rgb(115, 3, 167); }
.sub-heading{
  text-align: center;
  font-size: 1.5rem;
  font-family: 'Nunito', sans-serif;
  font-weight: 600;
  color: #666;
  margin-top: .8rem;
}

/* ===== navbar ===== */
header{
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.7rem 10%;
  height: 6.5rem;
  background-color: #fff;
  box-shadow: 0 1px 4px rgba(146,161,176,.3);
}
header .logo{
  font-size: 1.9rem;
  font-weight: 800;
  color: #0E2431;
  display: flex;
  align-items: center;
  gap: .8rem;
}
header .logo i{ font-size: 2.2rem; }
header .logo:hover{ color: #fc8c05; }
header .navbar ul{
  list-style: none;
  display: flex;
  justify-content: center;
  align-items: center;
}
header .navbar li{ margin-left: 2.5rem; }
header .navbar ul li a{
  font-size: 1.57rem;
  color: #0E2431;
  font-weight: 600;
  letter-spacing: .04rem;
}
header .navbar ul li a.active,
header .navbar ul li a:hover{
  color: #011aff;
  border-bottom: .2rem solid #011aff;
  padding: .5rem 0;
}
#menu{
  font-size: 3rem;
  cursor: pointer;
  color: rgb(24, 2, 63);
  display: none;
}
@media(max-width:768px){
  #menu{ display: block; }
  header .navbar{
    position: fixed;
    top: 6.5rem; right: -120%;
    width: 75%;
    height: 100%;
    text-align: left;
    align-items: flex-start;
    background-color: #0e0f31;
  }
  header .navbar ul{ flex-flow: column; padding: 1rem; }
  header .navbar ul li{
    text-align: center;
    width: 26rem;
    margin: 1rem 0;
    border-radius: .5rem;
  }
  header .navbar ul li a{
    display: block;
    padding: 1rem;
    text-align: left;
    color: #fff;
    font-size: 2rem;
  }
  header .navbar ul li a.active,
  header .navbar ul li a:hover{
    padding: 1rem;
    color: #fff;
    border-radius: .5rem;
    border-bottom: .5rem solid #011aff;
  }
  .fa-times{ transform: rotate(180deg); }
  header .navbar.nav-toggle{ right: 0; }
}

/* ===== buttons ===== */
.btn{
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .8rem;
  line-height: 0;
  padding: 1.6rem 3rem;
  border-radius: .5em;
  color: #fff;
  background: #2506ad;
  box-shadow: 0px 5px 10px rgba(48, 68, 247, .6);
  font-family: 'Nunito', sans-serif;
  font-weight: 600;
  font-size: 1.7rem;
  cursor: pointer;
}
.btn i{ font-size: 1.5rem; transition: .3s; }
.btn:hover{ background: #1a047e; }
.btn:hover i{ transform: translateX(4px); }

/* ===== hero / home ===== */
.home{
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 3rem;
  overflow: hidden;
  background: linear-gradient(135deg, #f7f7f7 0%, #eef0ff 100%);
}
#particles-js{ position: absolute; inset: 0; z-index: 0; }
.home .content{ flex: 1 1 42rem; z-index: 1; padding-top: 4rem; }
.home .content .eyebrow{
  display: inline-flex;
  align-items: center;
  gap: .8rem;
  font-family: 'Nunito', sans-serif;
  font-weight: 700;
  font-size: 1.4rem;
  letter-spacing: .1rem;
  color: #2506ad;
  margin-bottom: 1rem;
}
.home .content .eyebrow .dot{
  width: .8rem; height: .8rem; border-radius: 50%;
  background: #1fbf60;
  box-shadow: 0 0 0 4px rgba(31,191,96,.2);
}
.home .content h2{
  font-size: 5rem;
  font-weight: 800;
  color: #002057;
  line-height: 1.15;
}
.home .content h2 span{ color: #ff7b00; }
.home .content p{
  font-size: 1.8rem;
  color: #333;
  font-weight: 600;
  padding: 1.2rem 0 2rem;
}
.home .content p span.typing-text{
  color: #94021c;
  border-right: .2rem solid #2506ad;
  padding-right: .3rem;
}
.socials{ margin-top: 3rem; }
.socials .social-icons{ display: flex; flex-wrap: wrap; gap: .8rem; list-style: none; }
.social-icons a{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 4.4rem; height: 4.4rem;
  border-radius: 50%;
  background: #0E2431;
  color: #fff;
  font-size: 1.9rem;
}
.social-icons a:hover{ background: #011aff; transform: translateY(-3px); }
.home .image{ flex: 1 1 30rem; z-index: 1; text-align: center; }
.profile-photo{
  width: 30rem; height: 30rem; margin: 0 auto;
  border-radius: 50%;
  padding: .8rem;
  background: conic-gradient(from 180deg, #2506ad, #011aff, #ff7b00, #2506ad);
  box-shadow: 0 20px 50px rgba(37,6,173,.3);
}
.profile-photo img{
  width: 100%; height: 100%;
  border-radius: 50%;
  object-fit: cover;
  border: .5rem solid #f7f7f7;
}
@media(max-width:900px){
  .profile-photo{ width: 22rem; height: 22rem; }
  .home{ padding-top: 8rem; text-align: center; }
  .home .content{ padding-top: 0; }
  .home .content .eyebrow, .socials .social-icons{ justify-content: center; }
  .home .image{ order: -1; }
}

/* ===== stats strip (career highlights) ===== */
.stats-strip{ min-height: auto; background: #fff; padding: 6rem 9%; }
.stats-strip .grid{
  max-width: 110rem; margin: 0 auto;
  display: grid; grid-template-columns: repeat(4,1fr); gap: 2rem;
}
.stat-card{
  background: #fcfcfc;
  border-radius: .8rem;
  padding: 2.6rem 1.6rem;
  text-align: center;
  box-shadow: .2rem .5rem 1.2rem rgba(0,0,0,.08);
}
.stat-card:hover{ transform: translateY(-6px); box-shadow: .3rem .8rem 2rem rgba(37,6,173,.18); }
.stat-card .num{ font-size: 3.6rem; font-weight: 800; color: #2506ad; }
.stat-card .lbl{ font-size: 1.4rem; color: #555; margin-top: .6rem; font-family: 'Nunito', sans-serif; }
@media(max-width:700px){ .stats-strip .grid{ grid-template-columns: repeat(2,1fr); } }

/* ===== about ===== */
.about .row{
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  padding-top: 2rem;
  max-width: 130rem;
  margin: 0 auto;
}
.about .row .image{ flex: 1 1 32rem; text-align: center; }
.about .row .image img{ width: 30rem; margin: 2rem auto; border-radius: 1rem; }
.about .row .content{ flex: 1 1 45rem; padding: 3rem; }
.about .row .content h3{ font-size: 2.6rem; color: rgb(32,32,32); font-weight: 700; }
.about .row .content .tag{
  display: inline-block;
  font-size: 1.4rem;
  color: #011aff;
  font-weight: 700;
  margin-top: .8rem;
  font-family: 'Nunito', sans-serif;
}
.about .row .content p{
  font-size: 1.55rem;
  line-height: 1.75;
  padding: 1.6rem 0;
  color: #333;
  font-family: 'Nunito', sans-serif;
}
.about .row .content p b{ color: #2506ad; }
.about .row .content .box-container{
  display: flex; flex-wrap: wrap; gap: 1.5rem;
  font-family: 'Nunito', sans-serif; font-weight: 600;
}
.about .row .content .box-container .box{
  background: #e5ecfb;
  border-radius: .8rem;
  padding: 1.6rem 2rem;
  flex: 1 1 20rem;
}
.about .row .content .box-container .box p{ font-size: 1.4rem; padding: .3rem 0; color: #333; }
.about .row .content .box-container .box p span{ color: #011aff; font-weight: 700; }
.about .row .content .resumebtn{ margin-top: 3rem; }
@media(max-width:600px){ .about .row .content{ padding: 1rem; } }

/* ===== skills ===== */
.skills{ background: linear-gradient(160deg,#57059e,#4a00e0); }
.skills .heading, .skills .heading i{ color: #fff; }
.skills .heading span{ color: #ffe600; }
.skills .sub-heading{ color: #e4d9ff; }
.skills .container{ max-width: 120rem; margin: 0 auto; }
.skills .group-title{
  color: #fff;
  font-family: 'Nunito', sans-serif;
  font-weight: 700;
  font-size: 1.7rem;
  letter-spacing: .04rem;
  margin: 2.4rem 0 1.2rem;
  padding-left: .4rem;
  border-left: .4rem solid #ffe600;
}
.skills .row{
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1.6rem;
  padding-top: 1rem;
}
.skills .bar{
  padding: 1.8rem 1rem;
  border-radius: 1rem;
  box-shadow: 0 4px 10px rgba(0,0,0,.2);
  background: rgba(0,0,22,.55);
  text-align: center;
}
.skills .bar:hover{
  box-shadow: 0 8px 18px rgba(0,2,68,.5);
  background-color: rgba(0,0,0,.75);
  transform: translateY(-4px);
}
.skills .bar .info{ display: flex; flex-direction: column; align-items: center; gap: 1rem; }
.skills .bar .info i{ font-size: 3.2rem; color: #fff; }
.skills .bar .info span{ font-size: 1.3rem; font-weight: 500; color: #fff; line-height: 1.3; }
@media(max-width:900px){ .skills .row{ grid-template-columns: repeat(3,1fr); } }
@media(max-width:600px){ .skills .row{ grid-template-columns: repeat(2,1fr); gap: 1.2rem; } }

/* ===== education ===== */
.education{ background: #e5ecfb; }
.education .qoute{
  text-align: center;
  font-family: 'Nunito', sans-serif;
  font-size: 1.5rem;
  font-weight: 600;
  color: #444;
  max-width: 70rem;
  margin: 1rem auto 0;
}
.education .box-container{
  display: flex; flex-wrap: wrap; justify-content: center; gap: 2rem;
  max-width: 120rem; margin: 3rem auto 0;
}
.education .box-container .box{
  display: flex;
  width: 100%;
  border-radius: .8rem;
  box-shadow: .2rem .5rem 1rem rgba(0,0,0,.14);
  overflow: hidden;
  background: #fcfcfc;
}
.education .box-container .box:hover{ transform: scale(1.01); box-shadow: .4rem .8rem 1.6rem rgba(37,6,173,.2); }
.education .box-container .box .image{ flex: 0 0 14rem; }
.education .box-container .box .image img{ width: 100%; height: 100%; object-fit: cover; }
.education .box-container .box .content{ padding: 2rem 2.4rem; flex: 1; }
.education .box-container .box .content h3{ font-size: 2rem; color: #012970; font-weight: 700; }
.education .box-container .box .content p{ font-size: 1.5rem; margin-top: .5rem; color: #444; }
.education .box-container .box .content h4{
  font-size: 1.4rem; color: #226d00; margin-top: .8rem;
  font-family: 'Nunito', sans-serif; font-weight: 700;
}
.education .group-title{
  text-align: center; font-size: 2rem; font-weight: 700; color: rgb(32,32,32);
  margin: 5rem 0 0;
}
.education .group-title i{ color: #011aff; margin-right: .8rem; }
.education .cert-note{
  text-align: center; font-family: 'Nunito', sans-serif; font-size: 1.4rem; color: #555; margin-top: 1.6rem;
}
@media(max-width:600px){
  .education .box-container .box{ flex-direction: column; }
  .education .box-container .box .image{ flex: 0 0 12rem; width: 100%; }
}

/* ===== work / projects ===== */
.work{ background: linear-gradient(to bottom, #010136, #00003a); }
.work .heading, .work .heading i{ color: #fff; }
.work .heading span{ color: rgb(255,230,0); }
.work .sub-heading{ color: #b9bce0; }
.work .button-group{
  display: flex; flex-wrap: wrap; gap: 1rem;
  margin: 2rem auto; width: 60%; justify-content: center; align-items: center;
}
.work .button-group .btn{
  box-shadow: none;
  padding: 1rem 2rem;
  background: transparent;
  color: #fff;
  border: 1px solid #fff;
  border-radius: 3px;
  font-weight: 500;
  font-size: 1.4rem;
}
.work .button-group .btn:hover,
.work .button-group .btn.is-checked{
  background-color: #fff;
  color: #000;
}
.work .box-container{
  display: flex; flex-wrap: wrap; gap: 1.5rem;
  max-width: 120rem; margin: 2rem auto; justify-content: center;
}
.work .box-container .box{
  flex: 1 1 34rem;
  max-width: 40rem;
  border-radius: .5rem;
  box-shadow: 0 .7rem 1rem rgba(0,0,0,.3);
  position: relative;
  overflow: hidden;
  height: 30rem;
  background: #fff;
}
.work .box-container .box img{ height: 100%; width: 100%; object-fit: cover; }
.work .box-container .box .content{
  height: 100%; width: 100%;
  position: absolute;
  top: 85%; left: 0;
  background: rgba(255,255,255,.95);
  display: flex; flex-direction: column;
}
.work .box-container .box .content .tag{
  display: flex; justify-content: space-between; align-items: center;
  height: 4.5rem; width: 100%; padding: 0 1.5rem;
  background: #ffd900;
}
.work .box-container .box .content .tag h3{ font-size: 1.7rem; color: #1a0e00; }
.work .box-container .box:hover .content{ top: 25%; }
.work .desc{ margin: 1.8rem; display: flex; flex-direction: column; justify-content: center; overflow-y: auto; }
.work .desc p{ font-size: 1.4rem; font-family: 'Nunito', sans-serif; color: #333; line-height: 1.6; }
.work .desc .btns{ display: flex; justify-content: space-between; width: 100%; margin-top: 1.6rem; }
.work .desc .btns .btn{
  box-shadow: none;
  line-height: 0; padding: 1.2rem 2rem; border-radius: .5rem;
  font-size: 1.3rem; color: #fff; background: rgb(12,12,12); margin-right: 1rem;
}
.work .desc .btns .btn:hover{ background: #310ae0f5; }
.work .viewall, .morebtn, .backbtn{
  display: flex; justify-content: center; margin: 3rem 0 2rem;
}
@media screen and (max-width:450px){
  .work .button-group{ width: 100%; }
  .work .box-container{ margin: 1rem 0; }
}

/* ===== experience — zigzag timeline ===== */
.experience{ margin-top: 5rem; }
.experience .quote{ text-align: center; font-size: 1.5rem; font-weight: 600; font-family: 'Nunito', sans-serif; color: #444; max-width: 70rem; margin: 0 auto; }
.experience .timeline{ position: relative; max-width: 1200px; margin: 2rem auto; }
.experience .timeline::after{
  content: ''; position: absolute; width: 6px; background: #020133;
  top: 0; bottom: 0; left: 50%; margin-left: -3px; z-index: -2;
}
.experience .container{ padding: 10px 40px; position: relative; width: 50%; }
.experience .container::after{
  content: "\f0b1";
  position: absolute; width: 25px; height: 25px; right: -17px;
  background-color: #fff; border: 4px solid #f68c09; top: 15px;
  border-radius: 50%; z-index: 100; font-size: 1.5rem; text-align: center;
  font-weight: 600; color: #02094b; font-family: 'Font Awesome 6 Free';
  display: flex; align-items: center; justify-content: center;
}
.experience .left{ left: 0; }
.experience .right{ left: 50%; }
.experience .left::before{
  content: ' '; height: 0; position: absolute; top: 22px; width: 0; z-index: 1; right: 30px;
  border: medium solid #f68c09; border-width: 10px 0 10px 10px;
  border-color: transparent transparent transparent #f68c09;
}
.experience .right::before{
  content: ' '; height: 0; position: absolute; top: 22px; width: 0; z-index: 1; left: 30px;
  border: medium solid #f68c09; border-width: 10px 10px 10px 0;
  border-color: transparent #f68c09 transparent transparent;
}
.experience .right::after{ left: -16px; }
.experience .content{ background-color: #f68c09; position: relative; border-radius: 6px; }
.experience .content .tag{ font-size: 1.3rem; padding: 1.5rem 1.5rem 0; }
.experience .content .tag h2{ font-size: 1.7rem; font-weight: 700; color: #1a0e00; }
.experience .content .desc{ margin: 0 1.5rem; padding-bottom: 1rem; }
.experience .content .desc h3{ font-size: 1.5rem; font-weight: 600; color: #241000; margin-top: .3rem; }
.experience .content .desc p{ font-size: 1.2rem; color: #331700; font-family: 'Nunito', sans-serif; margin-top: .3rem; }
.experience .content .desc ul{ margin-top: .8rem; list-style: none; }
.experience .content .desc ul li{
  font-size: 1.2rem; font-family: 'Nunito', sans-serif; color: #241000;
  line-height: 1.6; padding-left: 1.4rem; position: relative; margin-bottom: .4rem;
}
.experience .content .desc ul li::before{
  content: ''; position: absolute; left: 0; top: .6rem;
  width: .5rem; height: .5rem; background: #1a0e00; border-radius: 50%;
}
@media screen and (max-width:600px){
  .experience .timeline::after{ left: 31px; }
  .experience .container{ width: 100%; padding-left: 70px; padding-right: 25px; }
  .experience .left::before, .experience .right::before{
    left: 60px; border: medium solid #f68c09; border-width: 10px 10px 10px 0;
    border-color: transparent #f68c09 transparent transparent;
  }
  .experience .left::after, .experience .right::after{ left: 15px; }
  .experience .right{ left: 0%; }
  .experience .container::after{ font-size: 1.4rem; }
}

/* ===== linkedin recommendations ===== */
.recommendations{ background: #f4f1ff; min-height: auto; padding-bottom: 8rem; }
.rec-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(32rem, 1fr));
  gap: 2.4rem;
  max-width: 120rem;
  margin: 3rem auto 0;
}
.rec-card{
  margin: 0;
  background: #fff;
  border-radius: 1rem;
  overflow: hidden;
  box-shadow: .2rem .5rem 1.2rem rgba(0,0,0,.1);
}
.rec-card:hover{ transform: translateY(-6px); box-shadow: .4rem .9rem 2rem rgba(37,6,173,.2); }
.rec-card img{ width: 100%; display: block; }
.rec-empty{
  text-align: center; font-family: 'Nunito', sans-serif; color: #666; font-size: 1.5rem;
  grid-column: 1 / -1;
}
@media(max-width:600px){ .rec-grid{ grid-template-columns: 1fr; } }

/* ===== languages (extra section, styled to match) ===== */
.languages{ background: #fff; min-height: auto; padding-bottom: 8rem; }
.lang-card{
  max-width: 90rem; margin: 3rem auto 0;
  background: #fcfcfc; border-radius: 1rem;
  box-shadow: .2rem .5rem 1.2rem rgba(0,0,0,.08);
  padding: 3rem;
  display: grid; grid-template-columns: repeat(2,1fr); gap: 2.4rem;
}
.lang-card .lang .name-row{
  display: flex; justify-content: space-between;
  font-family: 'Nunito', sans-serif; font-weight: 700; font-size: 1.5rem;
  color: rgb(32,32,32); margin-bottom: .6rem;
}
.lang-card .lang .name-row .lvl{ color: #011aff; }
.lang-card .lang .bar{ height: 1rem; border-radius: 1rem; background: #eee; overflow: hidden; box-shadow: none; }
.lang-card .lang .bar .fill{
  height: 100%; width: 0; border-radius: 1rem;
  background: linear-gradient(90deg,#2506ad,#011aff);
  transition: width 1.4s cubic-bezier(.22,1,.36,1);
}
@media(max-width:600px){ .lang-card{ grid-template-columns: 1fr; } }

/* ===== contact ===== */
.contact{ background: #e5ecfb; min-height: 70vh; }
.contact .container{
  max-width: 110rem; margin: 3rem auto 0;
  background: #fff; border-radius: 1.5rem;
  box-shadow: 0 5px 20px rgba(0,0,0,.12);
}
.contact .container .content{
  display: flex; align-items: center; justify-content: space-between;
  padding: 3rem 2.5rem; gap: 2rem;
}
.contact .content .image-box{ max-width: 42%; }
.contact .content form{ width: 55%; }
form .form-group{ display: flex; flex-direction: column; }
.form-group .field{ height: 5rem; display: flex; position: relative; margin: 1rem 0; }
form i{
  position: absolute; top: 50%; left: 1.8rem; color: #555; font-size: 1.7rem;
  pointer-events: none; transform: translateY(-50%);
}
form .field input, form .message textarea{
  width: 100%; height: 100%; padding: 0 1.6rem 0 4.8rem;
  font-size: 1.5rem; font-family: 'Poppins', sans-serif;
  border-radius: .5rem; border: .1rem solid #ccc; background: #e5ecfb;
}
.field input::placeholder, .message textarea::placeholder{ color: #666; }
.field input:focus, .message textarea:focus{ border: .2rem solid rgb(115,3,167); }
form .message{ position: relative; margin: 1rem 0; }
form .message i{ top: 2.5rem; }
form .message textarea{ min-height: 13rem; max-height: 22rem; padding: 1.2rem 2rem 0 4.8rem; }
form .button-area{ display: flex; justify-content: flex-end; margin-top: .8rem; }
.button-area button{
  color: #fff; font-size: 1.7rem; cursor: pointer; border-radius: .5rem;
  padding: 1.3rem 2.6rem; background: #2506ad;
  box-shadow: 0 5px 10px rgba(48,68,247,.6);
  font-family: 'Nunito', sans-serif; display: inline-flex; align-items: center; gap: .8rem;
}
.button-area button:hover{ background: #1a047e; }
.contact .form-note{
  font-family: 'Nunito', sans-serif; font-size: 1.2rem; color: #666;
  text-align: right; max-width: 110rem; margin: .6rem auto 0;
}
@media(max-width:900px){
  .contact .container .content{ flex-direction: column; padding: 2rem 1.5rem; }
  .contact .content .image-box{ display: none; }
  .contact .content form{ width: 100%; }
}

/* ===== footer ===== */
.footer{ min-height: auto; padding-top: 6rem; background: rgb(0,1,43); }
.footer .box-container{ display: flex; justify-content: center; flex-wrap: wrap; max-width: 120rem; margin: 0 auto; }
.footer .box-container .box{ flex: 1 1 25rem; margin: 2rem; }
.footer .box-container .box h3{ font-size: 2.5rem; color: #fff; padding-bottom: 1rem; font-weight: normal; }
.footer .box-container .box p{ font-size: 1.5rem; color: #ccc; padding: .7rem 0; text-transform: none; font-family: 'Nunito', sans-serif; }
.footer .box-container .box p i{ padding-right: 1rem; color: #ffae00; }
.footer .box-container .box a{ font-size: 1.5rem; color: rgb(238,238,238); padding: .3rem 0; display: block; }
.footer .box-container .box a:hover{ color: #ffae00; }
.footer .box-container .box .share{ display: flex; flex-wrap: wrap; padding: 1rem 0; }
.footer .box-container .box .share a{
  height: 4rem; width: 4rem; padding: 1rem; text-align: center; border-radius: 5rem;
  font-size: 1.7rem; margin-right: 1rem; background: rgb(230,230,230); color: #02094b;
  display: flex; align-items: center; justify-content: center;
}
.footer .box-container .box .share a:hover{
  background: transparent; transform: scale(.98); border: .1rem solid rgb(180,178,178); color: #ffae00;
}
.footer .credit{
  padding: 1rem 0 3rem; text-align: center; font-size: 1.5rem;
  font-family: 'Nunito', sans-serif; font-weight: 600; color: #fff; border-top: .1rem solid #fff3;
}
.footer .credit a{ color: #ffae00; }
.footer .fa{ color: #E90606; margin: 0 .3rem; font-size: 1.5rem; animation: pound .35s infinite alternate; }
@keyframes pound{ to{ transform: scale(1.1); } }
@media(prefers-reduced-motion: reduce){ .footer .fa{ animation: none; } }
@media(max-width:450px){
  .footer .box-container .box{ margin: 2rem; }
  .footer .box-container .box p{ padding: .7rem; }
  .footer .box-container .box .share a{ padding: 1.1rem; }
}

/* ===== 404 page ===== */
.page_404{ display: flex; align-items: center; justify-content: center; min-height: 90vh; }
.page_404 .container{ text-align: center; }
.page_404 .wrapper h1{ font-size: 12rem; font-weight: 800; color: #2506ad; }
.page_404 .msg h3{ font-size: 2.4rem; color: rgb(32,32,32); }
.page_404 .msg p{ font-size: 1.5rem; color: #666; font-family: 'Nunito', sans-serif; margin: 1rem 0 2rem; }

/* ===== common media queries ===== */
@media(max-width:450px){
  html{ font-size: 55%; }
  section{ padding: 2rem; }
}

/* ===== scroll top ===== */
#scroll-top{
  position: fixed;
  top: -140%;
  right: 2rem;
  padding: 1rem 1.5rem;
  font-size: 2rem;
  background: #ffae00;
  color: rgb(13,0,44);
  border-radius: 5rem;
  transition: 1s linear;
  z-index: 1000;
}
#scroll-top.active{ top: calc(100% - 12rem); }