* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: 'Inter', sans-serif;
  text-decoration: none;
  scroll-behavior: smooth;
  list-style: none;
}
a {
  color: inherit; /* Use the default text color */
  text-decoration: none; /* Remove underline (optional) */
}

a:hover {
  color: inherit; /* Use the default text color on hover */
}

:root {
  --text-color: #fff;
  --bg-color: #1b1f24;
  --second-bg-color: #22282f;
  --main-color: #13bbff;
  --other-color: #c3cad5;

  --h1-font: 4.5rem;
  --h2-font: 2.9rem;
  --p-font: 1rem;
}

body {
  color: var(--text-color);
  background: var(--bg-color);
}

header {
  top: 0;
  width: 100%;
  position: fixed;
  z-index: 1000;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 40px 16%;
  background: transparent;
  transition: all .50s ease;
}

.logo {
  font-size: 36px;
  color: var(--text-color);
  font-weight: 600;
}

span {
  color: var(--main-color);
}

.navlist {
  display: flex;
}

.navlist a {
  font-size: var(--p-font);
  font-weight: 500;
  color: var(--other-color);
  margin-left: 40px;
  transition: all .50s ease;
  list-style: none;
}

.navlist a:hover {
  color: var(--main-color);
  text-shadow: 3px 3px 20px var(--main-color), -2px 1px 30px var(--text-color);
}

#menu-icon {
  font-size: 35px;
  z-index: 10001;
  cursor: pointer;
  display: none;
}

.h-btn {
  display: inline-block;
  padding: 11px 26px;
  background: transparent;
  color: var(--main-color);
  border: 2px solid var(--main-color);
  border-radius: 8px;
  font-size: 15px;
  font-weight: 600;
  transition: all .50s ease;
}

.h-btn:hover {
  background-color: var(--main-color);
  color: var(--bg-color);
  box-shadow: 0 0 20px var(--main-color);
  transform: scale(1.1);
}

section{
  padding: 110px 16% 90px;
}

.hero{
  height: 100vh;
  width: 100%;
  background-position:top right;
  background-size:cover !important;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  background: url(./img/design.jpg);
}

.main-content h4{
  font-size: 1.6rem;
}

.main-content h1{
  font-size: var(--h1-font);
  font-weight: 900;
  margin: 20px 0px 20px;
  line-height: 1.2;
}

.main-content p {
  font-size: var(--p-font);
  font-weight: 400;
  width: 620px;
  max-width: 100%;
  color: var(--other-color);
  line-height: 30px;
  margin-bottom: 15px;
}

.social {
  margin-bottom: 40px;
}

.social i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  color: var(--main-color);
  border-radius: 50%;
  backdrop-filter: brightness(88%);
  font-size: 20px;
  margin-right: 17px;
  box-shadow: 0 0 20px transparent;
  cursor: pointer;
  transition: all .50s ease;
}

.social i:hover {
  transform: scale(1.1);
  box-shadow: 0 0 20px var(--main-color);
}

.btn {
  display: inline-block;
  padding: 11px 26px;
  background: var(--main-color);
  color: var(--bg-color);
  border: 2px solid var(--main-color);
  border-radius: 8px;
  font-size: 15px;
  font-weight: 600;
  transition: all .50s ease;
}

.btn:hover {
  background: transparent;
  color: var(--main-color);
  box-shadow: 0 0 20px var(--main-color);
}

.btn2 {
  background: transparent;
  color: var(--main-color);
  border: 2px solid var(--main-color);
  margin-left: 15px;
  transition: all .50s ease;
}

.btn2:hover {
  background: var(--main-color);
  color: var(--bg-color);
}

header.sticky{
  background: var(--bg-color);
  box-shadow: 0.1rem 1rem rgba(0, 0, 0, .2);
  padding: 16px 16%;
}

.about{
  background: var(--second-bg-color);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  align-items: center;
  gap: 1rem;
}

.about-img img {
  width: 100%;
  height: 530px;
  max-width: 530px;
  border-radius: 50%;
  object-fit: cover;
  border: 7px solid var(--main-color);
  box-shadow: 0 0 20px var(--main-color);
}
.about-text h2{
font-size: var(--h2-font);
line-height: 1.3;
margin-bottom: 20px;
}
.exp-area{
  margin-bottom: 50px;
}
.exp-area p{
  color: var(--text-color);
  font-weight: 600;
  font-size: 19px;
  line-height: 42px;
}
.exp-area p span{
  color: var(--other-color);
  font-size: var(--p-font);
  font-weight: 400;
  margin-left: 8px;
}
.center-text{
  text-align: center;
}
.center-text h2{
  font-size: var(--h2-font);

}
.services-content{
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(300px,auto));
  align-items: center;
  gap: 2.3rem;
  margin-top: 4.2rem;
}
.box{
  padding: 80px 40px 66px;
  background: #2d343f;
  border-radius: 28px;
  border: 1px solid var(--other-color);
  transition: all .50s ease;
  cursor: pointer;
}
.box img{
  margin-bottom: 20px;
}
.box h3{
  font-size: 30px;
  font-weight: 700;
  margin-bottom: 10px;
}
.box p{
  font-size: var(--p-font);
  font-weight: 400;
  color: var(--other-color);
  line-height: 30px;
  margin-bottom: 20px;
}
.box a{
  display: inline-block;
  font-size: 22px;
  line-height: 1.273rem;
  font-weight: 700;
  padding: 7px 0;
  color: var(--text-color);
  border-bottom: 2px solid #5d6c83;
  transition: all .50 ease;
}
.box i{
  vertical-align: middle;
  font-size: 25px;
  color: var(--main-color);
  margin-left: 5px;
}
.box a:hover{
  border-bottom: 2px solid var(--main-color);
}
.box:hover{
  border: 1px solid var(--main-color);
  transform: translateY(-5px) scale(1.03);
}
.portfolio{
  background: var(--second-bg-color);
}
.portfolio-content{
  display:grid;
  grid-template-columns: repeat(auto-fit,minmax(350px,auto));
  align-items: center;
  gap: 2.3rem;
  margin-top: 4.2rem;
  }
  .row img{
    height: auto;
    width: 100%;
    border-radius: 28px;
    margin-bottom: 1.4rem;
  }
  .row{
    background: #2d343f;
    border-radius: 28px;
    border: 1px solid transparent;
    box-shadow: 0 0 5px var(--main-color);
    padding: 20px;
    transition: all .50s ease;
  }
  .main-row{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.5rem;
  }
  .row h5{
    font-size: 20px;
    font-weight: 600;
    color: var(--other-color);
    
  }
  .row i{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 55px;
    height: 55px;
    font-size: 27px;
    border-radius: 50%;
    color: var(--text-color);
    background: #075fe4;
  }
  .row h4{
    font-size: 25px;
    font-weight: 700;
    margin-bottom: 10px;
    line-height: 1.4  ;
  }
  .row:hover{
    border:1px solid var(--main-color);
    transform: translateY(-5px) scale(1.03);
    cursor: pointer;
}
.contact-form{
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 4.2rem;
}
.contact-form form{
  position: relative;
  width: 600px;
}

form input,
form textarea{
  width: 100%;
  padding: 20px;
  border:none;
  outline: none;
box-shadow: 0 0 5px var(--main-color);
background: #2d343f;
color: var(--text-color);
margin-bottom: 20px;
border-radius: 8px;
}
form input::placeholder,
form textarea::placeholder{
  color: var(--other-color);
  font-size: 15px;
}
form send-btn{
  display: inline-block;
  padding: 11px 26px;
  background: var(--main-color);
  color: var(--bg-color);
  border: 2px solid var(--main-color);
  border-radius: 8px;
  font-size: 15px;
  font-weight: 600;
  transition: all .50s ease;
  width: 30px;
}
form.send-btn:hover{
  background: transparent;
  color: var(--main-color);
  box-shadow: 0 0 30px var(--main-color);
  cursor: pointer;
}
.footer{
  padding: 22px 16px;
  background: var(--second-bg-color);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap:2rem;
}
.copyright p{
  font-size: 15px;
  font-weight: 400;
  color: var(--other-color);
}
.scroll-top i{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #075fe4;
  width: 45px;
  height: 45px;
  border-radius: 50%;
  color: var(--text-color);
  font-size: 27px;
}
@media (max-width: 1700px){
  header{
    padding: 20px 8%;
  }
  section{
   padding: 90px 8% 80px;
  }
  header.sticky{
    padding: 14px 8%;
  }
  footer{
    padding: 18px 8%;
  }
  .logo{
    font-size: 28px;
  }
}

@media (max-width: 1380px){
  header{
    padding: 20px 5%;
  }
  section{
   padding: 90px 5% 80px;
  }
  header.sticky{
    padding: 14px 5%;
  }
  footer{
    padding: 18px 5%;
  } 
  .hero{
    height: 90vh;
    background-position: center;
  }
}
@media (max-width: 1290px){
  .box{
    padding: 40px 40px 46px;
  }
  .box img{
    width: 100%;
    height: 60px;
    max-width: 60px;
  }
  .box h3{
   font-size: 21px;
  }
}

@media (max-width: 1240px){
.about{
  grid-template-columns: 1fr;
  gap: 2rem;
  text-align: center;
}
.about img{
  text-align: center;
  width: 100%;
  height: 400px;
  max-width: 400px;
  border-radius: 50%;
  object-fit: cover;
  margin: 0 auto ;
}
:root{
  --h1-font: 4rem;
  --h2-font: 2rem;
  --p-font: 15px;
}
}
@media (max-width: 950px){
  :root{
    --h1-font:3.5rem;
  }
  .social{
    margin-bottom: 20px;
  }
  #menu-icon{
    display: block;
  }
  .navlist{
    position: absolute;
    top: 100%; 
    right: -100%;
    width:255px;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--bg-color);
    transition: all .50s ease;
  }
  .navlist a{
    display: block;
    padding: 17px;
    font-size: 22px;
  }
  .navlist.active{
    right: 0;
  }
}
@media (max-width: 680px){
  .main-content p{
    width: 100%;
  }
}
@media (max-width: 470px){
   :root{
    --h1-font:3rem;
    --h2-font:2rem;
   }
   .about img{
    text-align: center;
    width: 100%;
    height: 300px;
    max-width: 300px;
    border-radius: 50%;
    object-fit: cover;
    margin: 0 auto ;
  }
}