@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:ital@1&family=Luxurious+Roman&family=Oswald:wght@200&family=Poppins:ital,wght@0,300;0,800;1,100;1,400&family=Road+Rage&family=Shalimar&display=swap');

*{
   margin: 0;
   padding: 0;
   box-sizing: border-box;
font-family: 'Work Sans', sans-serif;

}

:root {
    --heading: rgb(0 10 45);
    --para: #777777;
    --para-tint: #e4e4e4;
    --white: #fff;
    --black: #212529;
--helper: #8490ff;
--helper-tint: #f3f4ff;
--overlay  : #3e64ff;
--bg: rgb(249 249 255);
--icons-bg:rgba(144, 172, 209, 0.2);
--gradient: linear-gradient(0deg, rgb(132 144 255)0% , rgb(98 189 252)100%);
--gradientSupport: -webkit-linear-gradient(
0deg,
rgb(132 144 255) 0%,
rgb(98 189 252) 100%
);
--shadow:0px 0px 20px 0px rgb(132 144 255/20%);
--shadowSupport : 0px 20px 20px 0px rgb(132 144 255/ 30%);
}  

html{
    font-size:62.5% ;
    scroll-behavior: smooth  ;
    overflow-x: hidden;
  
    /* 1rem=10px */
}
body{
    overflow-x: hidden;
}

h1, 
h2,
h3,
h4 {
font-family: "poppins", sans-serif;
}

h1{
   color: var(--heading) ;
   font-size: 6vw;
   font-weight: 600;
}

h3{
 font-size: 1.8vw;   
 font-weight: 400;
}

p{
    color: var(--para);
    line-height: 1.6;
    font-size: 1.7vw;
}

a{
    text-decoration: none;
}
li{
    list-style: none;
}


/*===========================

 HEADER SECTION START 

 ===========================*/

 .header{
   padding: 0 4.8rem;
   height:10rem;
  background-color:var(--bg) ;
  display: flex;
  justify-content: space-between;
  align-items: center;
 }

  .header  { 
height: 3rem;
 }
.logo{
  font-weight: 200;
  font-size: 20rem;
  width: 50rem;
  height: 10rem;
background-color:var(--shadowSupport);
}

 .navbar-lists{
display: flex;
gap: 4.8rem;
 }

 .navbar-link:link,
 .navbar-link:visited{
display: inline-block;
text-decoration: none;
font-size: 1.8rem;
font-weight: 500;
text-transform: uppercase;
color: var(--black);
transition:color 0.3s linear;

 }

 .navbar-link:hover,
 .navbar-link:active{
     color: var(--helper) 
 }
 
 .mobile-navbar-btn{
    display: none;
    background-color: transparent;
    cursor: pointer;
    border: none;
 }
 
 /* .mobile-navbar-btn {
  width: 5.5rem;
  height: 5.5rem;
  color: var(--black);
  font-size: 4rem;
  padding-left: 0.8rem ;
  border: 3px solid;
  padding: 0.5rem ;

} */

 .mobile-navbar-btn .fa-solid{
display:none; 
 } 

 .sticky .header {
  position: fixed;
  top: 0;
  left: 0;
  height: 8rem;
  width: 100%;
  background-color: rgba(255, 255, 255, 1);
  box-shadow: 0 0 2rem 0 rgba(0, 0, 0, 0.1);
  z-index: 9999;
  padding-top: 0;
  padding-bottom: 0;
}

 
 /*===========================

 REUSEABLE CODE SECTION 

 ===========================*/
.section{
    padding: 9rem 0;
}

.container{
    max-width: 110rem;
    margin: 0 auto;
}

.grid{
    display: grid;
    gap: 9rem;
}

 .grid-two-column {
    grid-template-columns: repeat(2, 1fr);
}
.grid-three-column{
    grid-template-columns: repeat(3, 1fr);
}
.grid-four-column{
    grid-template-columns: repeat(4, 1fr);
}

.btn{
background: var(--gradientSupport);
padding: 1.6rem 3.2rem;
border: none;
color: var(--helper-tint) ;
display: inline-block;
text-transform: uppercase;
font-size: 1.8rem;
cursor: pointer;
font-weight: 500;
transition: all 0.3s ease;
-webkit-transition: all 0.3s ease 0s ;
-moz-transition: all 0.3s ease 0s;
-o-transition: all 0.3s ease 0s;
}

.btn:hover,
.btn:active{
   box-shadow:var(--shadowSupport) ; 
} 
.common-heading{
   font-size: 4.8rem;
   font-weight: 600;
   margin-bottom:6rem;
   position: relative;
text-transform:capitalize;
}
 .common-heading::before {
  content: "";
  position: absolute;
  top: 120%;
  left: 0;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: var(--helper);
}

.common-heading::after {
  content: "";
  position: absolute;
  top: 128%;
  left: 1.5rem;
  width: 20%;
  height: 0.3rem;
  background: var(--helper);
} 


 .f-social-icons
 .icons{
   width: 5rem;
   height: 5rem;
   background-color:var(--icons-bg);
   display: inline-block;
   padding: 1.4rem 1.8rem;
   position: relative;  
   color: var(--white);
   border-radius: 56% 44% 70% 30% / 30% 54% 46% 70%;
   animation: water-wave 3s linear infinite;
   cursor: pointer;
}

.f-social-icons
.icons::after{
    content:"";
    position: relative;
    top: 50%;
    transform: translate(-50% -50% -50%);
    width: 90%;
    height: 90%;
    border-radius: 56% 44% 70% 30% / 30% 54% 46% 70%;
    background-color: transparent;
    border: 1px solid var(--black);
    animation: water-wave 3s linear infinite;
    }



@keyframes water-wave{
   0%{
       border-radius: 56% 44% 70% 30% / 30% 54% 46% 70%;

   }
   50%{
       border-radius: 3% 97% 15% 85% / 72% 0% 100% 28%;
   }
   100%{
       border-radius: 56% 44% 70% 30% / 30% 54% 46% 70%;
   }
}


 /*===========================

 HERO SECTION START 

 ===========================*/

 .section-hero{
     background-color: var(--bg);
   
   
    
   
 }

 .section-hero-data{
display: flex;
flex-direction: column;
justify-content: center;
align-self: start;
padding: 0 3.2rem;

 }

 .hero-top-data{
text-transform: uppercase;
font-weight: 500;
font-size:1.5rem ;
color: var(--helper); 
color: var(--heading);

} 
.hero-img{
    max-width:75%;
    z-index: 1;  
  
}

.hero-heading{
    text-transform: uppercase;
    font-weight: 700;
font-size: 6.4rem;
}

.hero-para{
    margin-top:1.5rem ;
    margin-bottom: 5rem;
    max-width: 60rem;
}

.section-hero-image{
    display: flex;
    justify-content: center;
    align-items: center;
}



/* ===========================

 BIO SECTION START 

 =========================== */

.bio-image{
    display:flex;
    justify-content: center ;
    align-items: center;
}
.bio-image img{ 
display: inline-block;
   width: 85%; 
   height: 80%;
    box-shadow: -2rem -2rem 0rem 0rem var(--helper); 

}
/* .resumedata{
justify-content: center;
align-self: start;
padding: 0 3.2rem;
} */

.hellohtml,
 .hellocss,
 .hellojavascript,
 .hellomsExcel,
 .hellowordpress {
font-size: 2rem;
color: var(--black);
}

input.hellohtml,
.hellocss,
.hellojavascript,
.hellomsExcel,
.hellowordpress
{
width: 4rem;
}
label {
    font-size: 1.3rem;
    padding: 1rem;
}

/*===========================

PORTFOLIO SECTION START 

 =========================== */

.section-portfolio{
    background-color: var(--bg);
    transition: all 0.7s linear;
}

.section-portfolio p{
    max-width: 60rem;
}
.p-btns{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 3.2rem;
    margin-top: 6.4rem 0;
    padding: 5rem;

    
}

.portfolio-images{
    gap: 3.2rem;
     
}
.portfolio-images img{
  width: 100%;  
  border-radius: 3.5rem;
  position: relative;
  overflow: hidden;

}

.img-overlay{
    position: relative;
    overflow:hidden;
}

.img-overlay .overlay{
    position: absolute;
    top: 0;
    left: 0;
   width: 100%;  
   height: 100%;
   background: var(--gradientSupport);
   opacity: 0;
   display: flex;
   justify-content: center;
   align-items: center;
   transform: translate(100%);
   transition: all 0.3s linear;
   border-radius: 3.5rem;

}

.img-overlay:hover > .overlay{
    transform: translateY(0);
    opacity: 0.8;
    cursor: pointer;
}

.img-overlay .common-heading{
margin: 0;
color: var(--white);
text-decoration: none;
}


.p-btn-active {
    transform: translate(-1rem);
}

.p-image-not-active{
    display :none;
}


/* ====================================

   OUR  FREELANCING SECTION START
 
   ================================== */
 

   
   .section-freelancing{
       background-image:url(../images/pexels-vlada-karpovich-4050347.jpg);
       background-repeat: no-repeat;
       background-size: 100%;
       background-attachment: fixed;
       position: relative;
       transition: all 0.7s linear;
      text-align: center;
   }
   .section-freelancing .overlay{
       position: absolute;
       top: 0;
       left: 0;
       width: 100%;
       height:100% ;
background-color: var(--helper);
background-color: var(--overlay);
opacity: 0.7;
   }

   .section-freelancing .container{
       position: relative;
   }
   .section-freelancing h2{
       font-size: 5.4rem;
   }
   .section-freelancing span{
       color: #a0f669;
   }
   .section-freelancing h2,.section-freelancing p{
    color:var(--white) ;   
    margin-bottom: 1.8rem;
   }



   /* ====================================

   OUR  contact us SECTION START
 
   ================================== */

   .section-contact-main{
    max-width: 70rem;
    margin: 0 auto;
    margin-top: 9rem;
    transition: all 0.3s linear;
    justify-content: center;
    padding-right: 3rem;

   }
   .section-contact-main .grid{
    gap:3.2rem;
   }

   .section-contact-main form{
    display: flex;
    flex-direction: column;
    gap: 3.2rem; 
    
   }

   .section-contact-main input, .section-contact-main textarea {
    padding: 1.5rem 2rem;
    border:0.1rem solid #c9c9c9;
    border-radius: 5px;
    font-size: 1.6rem;
    font-family:"work sans"; 
    width: 100%;
   }

   .section-contact-main input[type="submit"]{
 width:30%;
border: none;

   }

     /* ====================================

   OUR  FOOTER SECTION START
 
   ================================== */

   .section-footer{
 
    background: var(--heading);
    transition: all 0.7s linear;

    }

    .section-footer h3{
       
        color: var(--white);
        margin-bottom: 4rem;
    }
 h3{
    padding-left: 20%;
 }
    .f-about p{
        color: #adadad;
    }
    .f-links ul, .f-services ul , .f-address address{
        
        display: flex;
        flex-direction: column;
        gap: 1.8rem ;
        justify-content: center;
        padding-left: 20%;
    }

    .f-links li,
     .f-links a,
     .f-services li,
     .f-services a{
        
        font-size: 1.8rem;
        color: #adadad;
        text-transform: capitalize;
     }

     .f-links span,
     .f-services span,
     .f-address span
     {
margin-right:1rem  ;
     }

     .f-address p,
     .f-address p a {
font-style: normal;
color: #adadad;

     }
     .f-address p  ,
     .f-address p a{
       white-space: nowrap; 
     } 
 
     .f-social-icons{
        margin: 5rem 0;
      text-align: center;
        color: #adadad;
        font-size: 1.7rem;
     }

     .f-credits p{
        text-align: center;
        color: #adadad;
     } 

 /* ====================================  

  SCROLL UP BTN START
 
   ==================================*/

    .scrollTop-style{
        position: fixed;
        right: 2%;
        bottom: 5%; 
        z-index: 1;

    }

    .scroll-top{  
   width: 4rem;
   height: 4rem;
   background:var(--helper);
   display: inline-block;
   padding: 1.4rem 1.8rem;
   position: relative;  
   color: var(--heading);
   animation: water-wave 3s linear infinite;
   cursor: pointer;
        
     }
  
   /* =================================
     media queries
   ================================= */
   /* @media screen and (max-width:72em){
   .bio-image{
   max-width: 30rem;
   }

} */
@media (max-width: 94em) {
    .container {
      max-width: 130rem;
    }
    .navbar-lists {
      gap: 3.4rem;
    }
  }
  @media(max-width:44em)and (min-width:24em){
    .section-contact-main{
padding:0 5rem;
  }


  }
  @media(max-width:54em){
    .section-contact-main{
max-width: 35rem;
width: fit-content;

    }
 .btn{
     width: fit-content;
     block-size:fit-content;
    }
  }
  
  /* for width below 1200px  */
  @media (max-width: 75em) {
    .container {
      max-width: 110rem;
      
    }
    .navbar-lists {
      gap: 3.4rem;
    }
  }
  
  /* media queries less then 980px */
  @media (max-width: 980px) {
    /* to make all the container with same padding  */
    .container {
      padding: 0 3.5rem;
    }
  
    html {
      font-size: 56.25%; 
    }
  

  
    /* when we are in 980px we need to show the menu open icon */
    
     .mobile-navbar-btn {
      display: block;
      z-index: 9999;
      border: 3px solid #212529;
      color:var(--black);
    }
  
    .header {
      position: relative;
    }
    .mobile-navbar-btn {
      width: 5.5rem;
      height: 5.5rem;
      color: var(--black);
      font-size: 4rem;
      padding-left: 0.8rem ;
      border: 3px solid;
      padding: 0.5rem ;
    
    }
    
  
    .header .logo {
      width: 40%;
      /* height: 3.4rem; */
    }
  .fa-solid{
    padding-left: 0.6rem ;
  }
    .navbar {
      width: 100%;
      height: 100vh;
      background:var(--helper);
      position: absolute;
      top: 0; 
      left: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      transform: translateX(100%);
      transition: all 0.5s linear;
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
    }
  
    .navbar-lists {
      flex-direction: column;
      align-items: center;
    }
  
    .navbar .navbar-lists .navbar-link:link,
    .navbar .navbar-lists .navbar-link:visited {
      color: #212529;
      font-size: 3.2rem;
    }
  
    .active .navbar {
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
      transform: translateX(0);
      z-index: 9999;
    }
  
  
     .active .mobile-navbar-btn .fa-solid {
      display: block;
    }
  
    .active .mobile-navbar-btn .fa-bars {
      display: none;
    }  
  
    /* hero section */
  
    .section-hero h1 {
      line-height: 1.05;
    }
  
    /* section bidoata  */
    .section-biodata .grid {
      gap: 3rem;
    }
  
    /* section work  */
    .section-work-data .common-numbers {
      font-size: 3.2rem;
    }
  
    /* services section  */
  
    .section-services .grid {
      gap: 6rem;
    }
  
    .section-services .grid-three-column {
      grid-template-columns: repeat(2, 1fr);
    }
  
    /* resume section  */
    .section-resume .grid-two-column {
      grid-template-columns: 1fr;
    }
  
    .section-resume .grid-two-column img {
      width: 50%;
    }
    .resume-img {
      grid-row: 2;
      transform: translateY(-2rem);
    }
  
    /* testimonial section  */
    .section-testimonial .grid-three-column {
      grid-template-columns: 2fr;
    }
  
    .section-footer .grid-four-column {
      grid-template-columns: 1fr 1fr;
    }
  }
  
  /* Below 780px  */
  @media (max-width: 780px) {
    .container {
      max-width: 720px;
    }
    /* hero section  */
    .section-hero .grid-two-column {
      grid-template-columns: 1fr;
    }
  
    .section-hero-data {
      align-items: center;
    }
  
    .section-hero-data .hero-top-data {
      /* align-self: flex-start; */
    }
  
    .hero-heading {
      text-align: center;
    }
    .hero-para {
      text-align: center;
      margin-top: 2rem;
    }
  
    .section-hero img {
      width: 50%;
    }
  
    /* work section  */
    .section-portfolio .grid-three-col {
      grid-template-columns: repeat(2, 1fr);
    }
  }
  
  /* Below 560px  */
  @media (max-width: 35em) {
    .header {
      padding: 0 3.2rem;
    }
  
    .header .logo {
      width: 60%;
    }
  
    /* secion .bio-data */
  
    .section-biodata .grid-two-column {
      grid-template-columns: 1fr;
    }
  
    .section-biodata .bio-image {
      grid-row: 2;
      margin-top: 3.2rem;
    }
  
    /* work section  */
    .section-work-data .grid-four-column {
      grid-template-columns: 1fr 1fr;
    }
  
    /* services section  */
    .section-services .grid-three-column {
      grid-template-columns: 1fr;
    }
    .section-footer .grid-two-column{
      grid-template-columns: 1fr 1fr;
    }
  }


   @media (max-width:49em){
    .container{
      max-width: 71rem;
    }
    .section-hero-data{
      align-items: center;
    }
    .hero-heading{
      text-align: center;
    }
  
    
    .hero-para{
      text-align: center;
      margin-top: 2rem;
    }
    .section-hero img{
      width: 70%;
    }

/* biodata */
 .section-biodata .grid-two-column{
grid-template-columns: 1fr;

}


.section-biodata, .bio-image{
  grid-row-start: 2;
  grid-row-end:3 ;
/* grid-row: 2; */
margin-top: 3.2rem;


} 
.section-biodata .bio-image{
  width: 50%;

 
}
.bio-image{
 margin: auto;
}
   }