@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:wght@400;600;700;800&display=swap");

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
  text-decoration:none;
  outline:none;
  border:none;
  text-transform:capitalize;
}

html{
  font-size:62.5%;
  overflow-x:hidden;
  scroll-behavior:smooth;
}

body{
  background:#f7f7f7;
  font-family:"Poppins",sans-serif;
  overflow-x:hidden;
}

*::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;
}

section{
  padding:7rem 9%;
}

.heading{
  text-align:center;
  font-size:clamp(3rem,4vw,4rem);
  font-weight:800;
  color:#002057;
  margin-bottom:4rem;
}

.heading span{
  color:#ff7b00;
}

/* loader */
.loader-container{
  position:fixed;
  inset:0;
  z-index:10000;
  background:#e6eff1;
  display:flex;
  align-items:center;
  justify-content:center;
}

.loader-container.fade-out{
  top:-120%;
}

/* hero */
.home{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:4rem;
  min-height:100vh;
  padding:10rem 9% 5rem;
}

.home #particles-js{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
}

.home .content,
.home .image{
  position:relative;
  z-index:1;
  flex:1 1 42rem;
}

.home .content h2{
  font-size:clamp(3.8rem,6vw,5.5rem);
  font-weight:800;
  color:#002057;
  line-height:1.15;
}

.home .content h2 span{
  color:#ff7b00;
}

.home .content p{
  font-size:clamp(1.9rem,3vw,2.5rem);
  color:#000;
  font-weight:600;
  padding:1rem 0;
  line-height:1.5;
}

.home .content p span{
  color:rgb(148,8,8);
  font-weight:700;
}

.home .image{
  text-align:center;
}

.home .image img{
  width:min(70%,38rem);
  border-radius:50%;
  box-shadow:0 2px 8px rgba(0,0,0,.3);
  cursor:pointer;
}

.home .image img:hover{
  box-shadow:0 5px 15px rgba(0,0,0,.5);
}

.home .btn{
  margin-top:1.5rem;
  display:inline-flex;
  align-items:center;
  gap:.8rem;
  padding:1.6rem 3rem;
  border-radius:4rem;
  color:#fff;
  background:#2506ad;
  box-shadow:0 5px 18px rgba(48,68,247,.6);
  font-family:"Nunito",sans-serif;
}

.home .btn span{
  font-weight:700;
  font-size:1.7rem;
  letter-spacing:.1rem;
}

.home .btn i{
  font-size:1.5rem;
  transition:.3s;
}

.home .btn:hover{
  background:#1a047e;
}

.home .btn:hover i{
  transform:translateX(5px);
}

/* socials */
.socials{
  margin-top:3rem;
}

.socials .social-icons{
  padding-left:0;
  margin-bottom:0;
  list-style:none;
}

.socials .social-icons li{
  display:inline-block;
  margin-bottom:1.4rem;
}

.social-icons a{
  font-size:2rem;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:#00d9ff;
  background:#09011b;
  width:4.4rem;
  height:4.4rem;
  margin-right:.8rem;
  border-radius:50%;
  transition:.25s ease;
}

.social-icons a:hover{
  color:#fff;
  background:#0685da;
}

.social-icons a.github:hover{background:#0e0e0e;}
.social-icons a.twitter:hover{background:#00aced;}
.social-icons a.linkedin:hover{background:#007bb6;}
.social-icons a.dev:hover{background:#070707;}
.social-icons a.instagram:hover{background:#ee00da;}

/* about */
.about{
  background:#eef3ff;
  padding:8rem 8%;
  position:relative;
  overflow:hidden;
}

.about::before,
.about::after{
  content:"";
  position:absolute;
  border-radius:50%;
}

.about::before{
  width:35rem;
  height:35rem;
  background:#e4e8ff;
  top:-12rem;
  right:-10rem;
}

.about::after{
  width:28rem;
  height:28rem;
  background:#fff0df;
  bottom:-10rem;
  left:-8rem;
}

.about .heading{
  position:relative;
  z-index:2;
}

.about .heading i{
  color:#2506ad;
}

.about .row{
  position:relative;
  z-index:2;
  max-width:125rem;
  margin:auto;
  display:flex;
  align-items:center;
  gap:5rem;
  flex-wrap:wrap;
  background:#fff;
  border:.1rem solid #dfe4ff;
  border-radius:3rem;
  padding:5rem;
  box-shadow:0 2rem 5rem rgba(0,32,87,.12);
}

.about .row .image{
  text-align:center;
  flex:1 1 35rem;
}

.about .row .image .image-card{
  width:34rem;
  max-width:100%;
  height:42rem;
  margin:auto;
  border-radius:3rem;
  padding:1.2rem;
  background:#2506ad;
  box-shadow:0 2rem 4rem rgba(48,68,247,.28);
  position:relative;
}

.about .row .image img{
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:2.2rem;
  background:#fff;
  cursor:pointer;
}

.about .row .content{
  flex:1 1 55rem;
}

.about .row .content .small-title{
  display:inline-block;
  font-size:1.3rem;
  letter-spacing:.15rem;
  font-weight:700;
  color:#2506ad;
  background:#eeeaff;
  padding:.8rem 1.6rem;
  border-radius:5rem;
  margin-bottom:1.5rem;
}

.about .row .content h3{
  color:#002057;
  font-size:clamp(2.7rem,4vw,3.6rem);
  font-weight:800;
  margin-bottom:.8rem;
}

.about .row .content .tag{
  display:inline-block;
  font-size:1.6rem;
  color:#ff7b00;
  font-weight:700;
  margin-bottom:1.8rem;
}

.about .row .content p{
  font-size:1.6rem;
  margin-top:1.5rem;
  font-family:"Nunito",sans-serif;
  font-weight:600;
  color:#333;
  line-height:1.9;
  text-transform:none;
}

.about-highlights{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1.5rem;
  margin:3rem 0;
}

.highlight-box{
  background:#fff;
  border:.1rem solid #e3e6ff;
  border-radius:1.6rem;
  padding:1.8rem 1.2rem;
  text-align:center;
  box-shadow:0 .8rem 2rem rgba(0,0,0,.06);
}

.highlight-box i{
  font-size:2.4rem;
  color:#2506ad;
  margin-bottom:1rem;
}

.highlight-box span{
  display:block;
  font-size:1.35rem;
  font-weight:700;
  color:#020133;
}

.about .box-container .box p{
  background:#f7f7f7;
  border-left:.4rem solid #2506ad;
  padding:1.2rem 1.5rem;
  border-radius:1rem;
  margin:1rem 0;
  font-size:1.5rem;
  display:flex;
  align-items:center;
  gap:.9rem;
  text-transform:none;
  word-break:break-word;
}

.about .box-container .box p i{
  color:#ff7b00;
}

.about .box-container .box p span{
  color:#011aff;
  font-weight:800;
}

.resumebtn{
  margin-top:3rem;
  display:flex;
  gap:1.2rem;
  flex-wrap:wrap;
}

.resumebtn .btn,
.whatsapp-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:1rem;
  padding:1.5rem 2.8rem;
  border-radius:5rem;
  color:#fff;
  font-family:"Nunito",sans-serif;
  font-size:1.6rem;
  font-weight:700;
  transition:.3s ease;
}

.resumebtn .btn{
  background:#2506ad;
  box-shadow:0 .5rem 1.8rem rgba(48,68,247,.6);
}

.whatsapp-btn,
.resumebtn .whatsapp-btn{
  background:#25D366;
  box-shadow:0 .8rem 2rem rgba(37,211,102,.35);
}

.resumebtn .btn:hover{
  background:#1a047e;
  transform:translateY(-.4rem);
}

.whatsapp-btn:hover,
.resumebtn .whatsapp-btn:hover{
  background:#1ebe5d;
  transform:translateY(-.3rem);
}

/* skills */
.skills{
  min-height:auto;
  background:linear-gradient(to bottom,#57059e,#4a00e0);
  padding:8rem 6%;
}

.skills h2{
  color:#fff;
}

.skills .heading span{
  color:rgb(255,230,0);
}

.skills .container{
  background:rgba(0,0,22,.4);
  color:#fff;
  border-radius:1rem;
  padding:2rem;
  width:100%;
  max-width:120rem;
  margin:2rem auto 0;
}

.skills .container .row{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:1.8rem;
}

.skills .container .bar{
  padding:1.5rem 1rem;
  border-radius:1rem;
  box-shadow:0 4px 10px rgba(0,0,0,.2);
  background:rgba(0,0,22,.9);
  text-align:center;
}

.skills .container .bar:hover{
  background:rgba(0,0,0,.9);
}

.skills .container .bar .info{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:1rem;
}

.skills .container .bar .info i{
  font-size:4rem;
}

.skills .container .bar .info span{
  font-size:1.8rem;
  font-weight:500;
}

/* work */
.work{
  background:linear-gradient(to bottom,#000031,#00002c);
  padding:8rem 6%;
}

.work h2{
  color:#fff;
}

.work .heading span{
  color:rgb(255,230,0);
}

.work .box-container{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:2rem;
  max-width:120rem;
  margin:2rem auto;
}

.work .box-container .box{
  border-radius:1rem;
  box-shadow:0 .5rem 1rem rgba(0,0,0,.1);
  position:relative;
  overflow:hidden;
  height:30rem;
}

.work .box-container .box img{
  width:100%;
  min-height:100%;
  object-fit:cover;
  transition:transform 3s ease;
}

.work .box-container .box:hover img{
  transform:translateY(-25%);
}

.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;
  z-index:2;
  transition:.3s ease;
}

.work .box-container .box:hover .content{
  top:25%;
}

.work .desc{
  margin:2rem;
}

.work .desc p{
  font-size:1.5rem;
}

.work .desc .btns{
  display:flex;
  flex-wrap:wrap;
  gap:1rem;
  margin-top:2rem;
}

.work .desc .btns .btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:1.4rem 2.2rem;
  border-radius:.8rem;
  font-size:1.5rem;
  color:#fff;
  background:#0c0c0c;
}

.work .desc .btns .btn:hover{
  background:#310ae0f5;
}

.work .viewall{
  display:flex;
  justify-content:center;
  margin-top:3rem;
}

.work .viewall .btn,
.morebtn .btn{
  display:inline-flex;
  align-items:center;
  gap:.8rem;
  padding:1.6rem 3rem;
  border-radius:.8rem;
  color:#fff;
  font-weight:700;
  text-align:center;
}

.work .viewall .btn{
  border:2px solid #fff;
  box-shadow:0 5px 10px rgba(65,84,241,.4);
}

.work .viewall .btn:hover{
  background:#fff;
  color:#000;
}

/* experience */
.experience .timeline{
  position:relative;
  max-width:120rem;
  margin:0 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:1rem 4rem;
  position:relative;
  width:50%;
}

.experience .container::after{
  content:"\f0b1";
  position:absolute;
  width:2.5rem;
  height:2.5rem;
  right:-1.7rem;
  background:#fff;
  border:.4rem solid #ff9f55;
  top:1.5rem;
  border-radius:50%;
  z-index:10;
  font-size:1.8rem;
  text-align:center;
  font-weight:600;
  color:#02094b;
  font-family:"Font Awesome 5 Free";
}

.experience .left{
  left:0;
}

.experience .right{
  left:50%;
}

.experience .right::after{
  left:-1.6rem;
}

.experience .content{
  background:#f68c09;
  border-radius:.8rem;
  padding:1.5rem;
}

.experience .content .tag{
  font-size:1.3rem;
}

.experience .content .desc h3{
  font-size:1.6rem;
  font-weight:700;
}

.experience .content .desc p{
  font-size:1.3rem;
  text-transform:none;
}

.morebtn{
  display:flex;
  justify-content:center;
  margin-top:3rem;
}

.morebtn .btn{
  background:#2506ad;
  box-shadow:0 5px 10px rgba(48,68,247,.6);
}

.morebtn .btn:hover{
  background:#1a047e;
}

/* 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:50%;
  transition:1s linear;
  z-index:1000;
}

#scroll-top.active{
  top:calc(100% - 12rem);
}

/* tablet */
@media(max-width:1100px){
  section{
    padding:6rem 5%;
  }

  .home{
    padding:10rem 5% 5rem;
  }

  .about .row{
    padding:3.5rem;
  }

  .about-highlights{
    grid-template-columns:repeat(2,1fr);
  }

  .skills .container .row{
    grid-template-columns:repeat(4,1fr);
  }

  .work .box-container{
    grid-template-columns:repeat(2,1fr);
  }
}

/* mobile */
@media(max-width:768px){
  html{
    font-size:58%;
  }

  .home{
    flex-direction:column-reverse;
    text-align:center;
    min-height:auto;
    padding:9rem 5% 5rem;
  }

  .home .image img{
    width:min(75%,30rem);
    margin:0 auto;
  }

  .socials{
    margin-top:3rem;
  }

  .about{
    padding:6rem 4%;
  }

  .about .row{
    padding:2.5rem;
    border-radius:2rem;
  }

  .about .row .image .image-card{
    height:36rem;
  }

  .skills .container .row{
    grid-template-columns:repeat(3,1fr);
  }

  .work .box-container{
    grid-template-columns:1fr;
  }

  .experience .timeline::after{
    left:3.1rem;
  }

  .experience .container{
    width:100%;
    padding-left:8rem;
    padding-right:2rem;
  }

  .experience .right{
    left:0;
  }

  .experience .left::after,
  .experience .right::after{
    left:1.5rem;
  }
}

/* small mobile */
@media(max-width:600px){
  section{
    padding:5rem 2rem;
  }

  .home .btn{
    width:100%;
    justify-content:center;
  }

  .about-highlights{
    grid-template-columns:1fr;
  }

  .resumebtn{
    flex-direction:column;
  }

  .resumebtn .btn,
  .whatsapp-btn{
    width:100%;
  }

  .skills{
    padding:6rem 1.5rem;
  }

  .skills .container{
    padding:1rem;
  }

  .skills .container .row{
    grid-template-columns:repeat(2,1fr);
    gap:1rem;
  }

  .skills .container .bar .info i{
    font-size:3.2rem;
  }

  .skills .container .bar .info span{
    font-size:1.5rem;
  }

  .work{
    padding:6rem 1.5rem;
  }

  .work .box-container{
    margin:1rem 0;
  }

  .work .desc .btns .btn{
    width:100%;
  }
}

/* very small mobile */
@media(max-width:450px){
  html{
    font-size:55%;
  }

  section{
    padding:4rem 1.5rem;
  }

  .home{
    padding:8rem 1.5rem 4rem;
  }

  .home .content h2,
  .home .content h2 span{
    font-size:3.6rem;
  }

  .home .content p,
  .home .content p span{
    font-size:2rem;
  }

  .about{
    padding:5rem 1.2rem;
  }

  .about .row{
    padding:1.8rem;
  }

  .about .row .image .image-card{
    height:32rem;
  }

  .about .row .content p{
    font-size:1.45rem;
  }

  .work .box-container .box{
    height:26rem;
  }

  .experience .container{
    padding-left:6.5rem;
    padding-right:1rem;
  }

  .experience .timeline::after{
    left:2.5rem;
  }

  .experience .left::after,
  .experience .right::after{
    left:.9rem;
  }

  #scroll-top.active{
    top:calc(100% - 10rem);
  }
}

/* CONTACT SECTION */

.contact{
  background:var(--section-bg);
  min-height:auto;
  padding:8rem 9% 5rem;
  overflow:hidden;
}

.contact .heading{
  text-align:center;
  font-size:clamp(3rem, 4vw, 3.8rem);
  color:rgb(32,32,32);
  font-weight:800;
  margin-bottom:4rem;
  line-height:1.2;
}

.contact .heading i{
  color:var(--primary);
  margin-right:.8rem;
}

.contact .heading span{
  color:rgb(115,3,167);
}

.contact .container{
  width:100%;
  max-width:1100px;
  background:var(--white);
  border-radius:1.2rem;
  margin:0 auto;
  box-shadow:0 .5rem 1rem rgba(0,0,0,.15);
  overflow:hidden;
}

.contact .container .content{
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:center;
  gap:3rem;
  padding:3rem;
}

.contact .content .image-box{
  width:100%;
  text-align:center;
}

.contact .content .image-box img{
  width:100%;
  max-width:42rem;
  height:auto;
  object-fit:contain;
  display:inline-block;
}

.contact .content form{
  width:100%;
  min-width:0;
}

form .form-group{
  display:flex;
  flex-direction:column;
  width:100%;
}

.form-group .field{
  height:5rem;
  display:flex;
  position:relative;
  margin:1rem 0;
  width:100%;
}

form i{
  position:absolute;
  top:50%;
  left:1.8rem;
  color:rgb(51,51,51);
  font-size:1.7rem;
  pointer-events:none;
  transform:translateY(-50%);
}

form .field input,
form .message textarea{
  width:100%;
  height:100%;
  outline:none;
  padding:0 1.6rem 0 4.8rem;
  font-size:1.6rem;
  font-family:"Poppins",sans-serif;
  border-radius:.6rem;
  border:.1rem solid rgb(51,51,51);
  background:var(--section-bg);
  text-transform:none;
}

.field input::placeholder,
.message textarea::placeholder{
  color:rgb(51,51,51);
  text-transform:capitalize;
}

.field input:focus,
.message textarea:focus{
  padding-left:4.7rem;
  border:.2rem solid rgb(115,3,167);
}

.field input:focus ~ i,
.message textarea:focus ~ i{
  color:rgb(115,3,167);
}

form .message{
  position:relative;
  margin:1rem 0;
  width:100%;
}

form .message i{
  top:2.5rem;
  font-size:2rem;
  left:1.5rem;
}

form .message textarea{
  min-height:13rem;
  max-height:23rem;
  max-width:100%;
  min-width:100%;
  padding:1.2rem 2rem 0 4.8rem;
  resize:vertical;
}

form .message textarea::-webkit-scrollbar{
  width:0;
}

form .button-area{
  display:flex;
  justify-content:flex-end;
  width:100%;
  margin-top:1.5rem;
}

.button-area button{
  color:#fff;
  outline:none;
  font-size:1.7rem;
  cursor:pointer;
  border-radius:.6rem;
  padding:1.3rem 2.5rem;
  background:#2506ad;
  box-shadow:0 5px 10px rgba(48,68,247,.6);
  transition:.3s ease;
  font-family:"Nunito",sans-serif;
  font-weight:700;
  border:none;
}

.button-area button:hover{
  background:#421cecf5;
}

.button-area button i{
  position:relative;
  top:.2rem;
  left:.2rem;
  font-size:1.5rem;
  transition:.3s;
  color:#fff;
  transform:none;
}

.button-area button:hover i{
  left:.8rem;
}

/* TABLET */
@media(max-width:992px){
  .contact{
    padding:7rem 5% 4rem;
  }

  .contact .container .content{
    grid-template-columns:1fr;
    padding:2.8rem 2.2rem;
  }

  .contact .content .image-box{
    display:none;
  }
}

/* MOBILE */
@media(max-width:600px){
  html{
    font-size:55%;
  }

  .contact{
    padding:5rem 1.5rem 3rem;
  }

  .contact .heading{
    margin-bottom:3rem;
  }

  .contact .container{
    border-radius:1rem;
  }

  .contact .container .content{
    padding:2rem 1.4rem;
  }

  .form-group .field{
    height:4.8rem;
    margin:.8rem 0;
  }

  form .field input,
  form .message textarea{
    font-size:1.45rem;
    padding-left:4.5rem;
  }

  form i{
    left:1.5rem;
    font-size:1.6rem;
  }

  form .button-area{
    justify-content:center;
  }

  .button-area button{
    width:100%;
    padding:1.3rem 2rem;
  }
}

/* SMALL MOBILE */
@media(max-width:420px){
  .contact{
    padding:4rem 1rem 2.5rem;
  }

  .contact .container .content{
    padding:1.6rem 1rem;
  }

  form .field input,
  form .message textarea{
    font-size:1.35rem;
  }

  form .message textarea{
    min-height:12rem;
  }
}