*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
html{
    scroll-behavior: smooth;
}
body {
    color: #333;
    line-height: 1.6;
    margin:  0 auto;
    max-width:  90vw;
    font-family: 'Poppins', sans-serif;
    padding:  0;
      background-color: hsl(0, 0%, 95%);
}
ul {
    list-style-type: none;
}
a {
    text-decoration: none;
    color: #333;
}
h1, h2{
    font-weight: 300;
    line-height: 1.2;
    margin: 10px 0;
}
p{
    margin: 10px 0;
    text-align: justify;
}
input{
    border:  1px solid hsl(0, 0%, 50%);
}
button{
    border: none;
}
img{
    width: 100%;
}

/*Scroll-indicator*/
.scroll-indicator{
    width:  100%;
    height:  10px;
    position: fixed;
    
   top: 0;
    left: 0;
    right: 0;
    border-bottom:  1px solid hsl(0, 0%, 80%);
    background-color:  white;
    z-index:  1000;
 }
.pagescrollindicator{
    height: 10px;
    background-color:  #0077ff;
    z-index:  1000;
   }
/*Navigation*/
.logo {
    margin-left:  30px;
    padding:  10px;
    background-color:  #0077ff;
    color:  white;
    border-radius:  5px;
}
.header{
    display: inline;
}
.header-section {
  display: flex;
  flex-direction: row;
  position : fixed;
  top: 10px; 
  left: 0;
  right: 0;
  background-color: white;
  z-index: 999;
  justify-content: space-between;
  padding: 20px 10px;
  border-bottom: 1px solid hsl(0, 0%, 90%);
  width: 100%; 
}


.header-section .logo{
    font-size:  30px;
}
.nav-section{
 margin-top:  10px;
 padding-top:  0;
 color:   hsl(0, 0%, 40%);
}
.nav-section a{
    padding:  0 10px;
    font-size:  1.5em;
    font-weight:  bold;
    color:   hsl(0, 0%, 50%);
}
.about .resume{
    background-color:   #0077ff;
    color:  white;
    padding:  15px 100px;
    border-radius:  8px;
    font-size:  25px;
}
.social-icons{
    display:  inline;
    
}
.about a img{
   width:  30px;
   margin-bottom:  10px;
   margin:  10px;
   margin-right:  15px;
   margin-left: 0;
}
.nav-section a:hover{
   color: black;
}
nav a.active{
    background-color:   #0077ff;
   color: white;
   padding:  10px;
   border-radius:  5px;
}
.hamburger{
    display: none;
    font-size: 24px;
    cursor: pointer;
}
/*home page*/
main {
  padding-top: 180px; 
}
.about .name{
    color:  #002b5c;
    font-size:  4em;
    font-weight:  bold;
}
.about .prof{
    color:  #0077ff;
     font-size:  4em;
    font-weight:  bold;
    margin-bottom:  20px;
}

.home-info{
    display: grid;
    
    margin-top:  10px;
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows:  minmax(200px, auto);
    grid-template-areas: 
                                            "about image"
                                            ". image";
    gap:  30px;
}
.about{
    max-width:  700px;
}
.home-info p{
    font-size:  20px;
}
.myimage img{
  
    max-width:  30em;
}
.home-info .about{
    grid-area:  about;
}
.home-info .myimage{
    grid-area:  image;
}

/*About page*/
.about-me .about{
    font-size:  3.5em;
    font-weight: bold;
    text-align: center;
    max-width:  90vw;
    margin: 0 auto;
   
}
.abit{
    color: #0077ff;
    font-size:  2em;
    font-weight:  bold;
}
.about-me p{
    font-size:  20px;
}
.resources p{
    font-size:  20px;
}
.resources .tool-container .tools{
    width: 80px;
    margin-bottom: 0;
}
.resources .tool-container{
    display: flex;
    flex-direction:  row;
    gap:  70px;
    flex-wrap: wrap;
    justify-content: center;
}
.card{
    padding:  15px 20px;
    color:  white;
    border-radius:  15px;
    padding-right:  120px;
    box-shadow:  0 0px 16px rgba(0, 0, 0, 0.1);
    margin-top:  px;
    margin-bottom: 0;

}
.tool-container .tools h4{
    opacity: 1000;
    color: black;
}
.tool-container .card{
     transition:  transform 0.5s ease;
}
.tool-container .card:hover{
    transform:  translateY(-10px);
}

.tool-container .tools{
   display: flex; 
   flex-direction:  row;
   align-items: center;
   gap:  10px;
   }
/*Services page*/
.service{
     font-size:  3.5em;
    font-weight: bold;
    text-align: center;
    max-width:  90vw;
    margin: 0 auto;
   margin-top:  10rem;
   margin-bottom:  3rem;
}
.card-container{
    display: grid;
    grid-template-columns:  repeat(3, 1fr);
}

.grid{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}
.prov-card{
    max-width: 500px;
    text-align: justify;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items:  center;
    padding:  1rem;
    background-color: white;
    margin:  10px;
    margin-bottom: 80px;
    border-radius:  10px;
}
.prov-card h3{
    font-size:  1.5em;
}
.prov-card p{
    font-size:  20px;
}
/*Projects page*/
.weather{
    box-shadow:  0 0px 16px rgba(0, 0, 0, 0.1);
}
.weather a{
    background-color: #0077ff;
    color: white;
    padding: 10px 20px;
    border-radius:  5px;
}
/*contact page*/
.attribute{
    font-weight: bold;
    font-size: 1.2em;
}
#name{
     margin-top:  5px;
     font-family: 'Poppins', sans-serif;
    width: 90%;
    max-width: 600px;
    height: 40px;
    font-size: 18px;
    border-radius: 5px;
}
#Email{
    margin-top:  5px;
     font-family: 'Poppins', sans-serif;
    width: 90%;
    max-width: 600px;
    height: 40px;
    font-size: 18px;
    border-radius: 5px;
}
#message{
     margin-top:  5px;
     font-family: 'Poppins', sans-serif;
    width: 90%;
    max-width: 600px;
    height: 80px;
    font-size: 18px;
    border-radius: 5px;
}
.submit{
     margin-top:  10px;
     background-color:   #0077ff;
    color:  white;
    padding:  15px 100px;
    border-radius:  8px;
    font-size:  25px;
}
.attribute{
    margin-top: 20px;
}
.social-icon a img{
    width:  50px;
    height: 50px;
    margin: 10px;
}

.address-container h2{
    font-weight: bold;
    margin-top: 40px;
    display: flex;
    justify-content: flex-end;
}
.address-container p{
    font-size: 20px;
    display: flex;
    justify-content: flex-end;
}
.address-container a{
    font-size: 20px;
    display: flex;
    justify-content: right;
}
.social-icon{
    display: flex;
    justify-content: flex-end;
}
.contact-container{
    display: flex;
    justify-content: space-between;
}
.contact-container p{
    font-size: 20px;
}
/*Animation*/
.fadeslide{
    opacity:  0;
    transform: translateY(30px);
    animation: fadeInUp 1s ease-out forwards;
}
.fadeslide:nth-child(1){
    animation-delay:  0.2s;
}
.fadeslide:nth-child(2){
    animation-delay:  0.4s;
}
.fadeslide:nth-child(3){
    animation-delay:  0.6s;
}
.fadeslide:nth-child(4){
    animation-delay:  0.8s;
}
@keyframes fadeInUp { 
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/*Responsivity*/
@media (max-width: 480px){
    .header-section{
        padding: 7px;
    }
    .header-section .logo{
        padding: 3px 5px;
    }
    .nav-links{
        display: none;
        background-color: white;
       
        position: absolute;
        top: 60px;
        right: 20px;
        flex-direction: column;
        padding: 1rem;
        border-radius: 5px;
    }
    .nav-links a{
         border-bottom: 1px solid hsl(0, 0%, 50%);
    }

  
    .nav-links.show{
        display: flex;
    }
    .hamburger{
        display: block;
        
    }
    
    body{
        max-width:  90vw;
        margin: 0 auto;
    }
    p{
        text-align: justify;
        max-width: 90vw;
    }

    .home-info{
        grid-template-columns: repeat(1, 1fr);
         grid-auto-rows:  minmax(auto, auto);
         grid-template-areas: 
                                            "about"
                                            "image";
    }
    .home-info .myimage{
        padding-top: 10px;

    }
    .about-me .about{
        margin-top:  1.5em;
    }
    .tool-container .tools{
   display: flex; 
   flex-direction: row;
   align-items: center;
   gap:  10px;
   }
 .card-container{
    display: grid;
    grid-template-columns:  repeat(1, 1fr);
    gap: 5px;

}
.prov-card{
    margin-bottom: 15px;
    max-width: 90vw;
}
.prov-card h3{
    text-align: center;
}
.resources .tool-container{
    display: flex;
    flex-direction:  row;
    flex-wrap: wrap;
    gap:  15px;
}
.card{
    width: 200px;
    max-width: 90vw;
    margin: 0 auto;
}
.contact-container{
    display: flex;
    flex-direction: column;
}
.address-container h2{
    font-weight: bold;
    margin-top: 40px;
    display: flex;
    justify-content: flex-start;
}
.address-container p{
    font-size: 20px;
    display: flex;
    justify-content: flex-start;
}
.address-container a{
    font-size: 20px;
    display: flex;
    justify-content: flex-start;
}
.social-icon{
    display: flex;
    justify-content: flex-start;
}

}
@media (max-width: 780px){
     .header-section{
        padding: 7px;
    }
    .header-section .logo{
        padding: 3px 5px;
    }
    .nav-links{
        display: none;
        background-color: white;
       
        position: absolute;
        top: 60px;
        right: 20px;
        flex-direction: column;
        padding: 1rem;
        border-radius: 5px;
    }
    .nav-links a{
         border-bottom: 1px solid hsl(0, 0%, 50%);
    }

  
    .nav-links.show{
        display: flex;
    }
    .hamburger{
        display: block;
        
    }
    body{
        max-width:  90vw;
        margin: 0 auto;
    }
    p{
        text-align: justify;
        max-width: 90vw;
    }
    .home-info{
        grid-template-columns: repeat(1, 1fr);
         grid-auto-rows:  minmax(auto, auto);
         grid-template-areas: 
                                            "about"
                                            "image";
    }
    .home-info .myimage{
        padding-top: 10px;

    }
    .about-me .about{
        margin-top:  1.5em;
    }
    .tool-container .tools{
   display: flex; 
   flex-direction: row;
   align-items: center;
   gap:  10px;
   }
 .card-container{
    display: grid;
    grid-template-columns:  repeat(1, 1fr);
    gap: 5px;

}
.prov-card{
    margin-bottom: 15px;
    max-width: 90vw;
}
.prov-card h3{
    text-align: center;
}
.resources .tool-container{
    display: flex;
    flex-direction:  row;
    flex-wrap: wrap;
    gap:  15px;
}
.card{
    width: 200px;
    max-width: 90vw;
    margin: 0 auto;
}
.contact-container{
    display: flex;
    flex-direction: column;
}
.address-container h2{
    font-weight: bold;
    margin-top: 40px;
    display: flex;
    justify-content: flex-start;
}
.address-container p{
    font-size: 20px;
    display: flex;
    justify-content: flex-start;
}
.address-container a{
    font-size: 20px;
    display: flex;
    justify-content: flex-start;
}
.social-icon{
    display: flex;
    justify-content: flex-start;
}

}
@media (max-width: 825px){
     .header-section{
        padding: 7px;
    }
    .header-section .logo{
        padding: 3px 5px;
    }
    .nav-links{
        display: none;
        background-color: white;
       
        position: absolute;
        top: 60px;
        right: 20px;
        flex-direction: column;
        padding: 1rem;
        border-radius: 5px;
    }
    .nav-links a{
         border-bottom: 1px solid hsl(0, 0%, 50%);
    }

  
    .nav-links.show{
        display: flex;
    }
    .hamburger{
        display: block;
        
    }
    body{
        max-width:  90vw;
        margin: 0 auto;
    }
    p{
        text-align: justify;
        max-width: 90vw;
    }
    .home-info{
        grid-template-columns: repeat(1, 1fr);
         grid-auto-rows:  minmax(auto, auto);
         grid-template-areas: 
                                            "about"
                                            "image";
    }
    .home-info .myimage{
        padding-top: 10px;

    }
    .about-me .about{
        margin-top:  1.5em;
    }
    .tool-container .tools{
   display: flex; 
   flex-direction: row;
   align-items: center;
   gap:  10px;
   }
 .card-container{
    display: grid;
    grid-template-columns:  repeat(1, 1fr);
    gap: 5px;

}
.prov-card{
    margin-bottom: 15px;
    max-width: 90vw;
}
.prov-card h3{
    text-align: center;
}
.resources .tool-container{
    display: flex;
    flex-direction:  row;
    flex-wrap: wrap;
    gap:  15px;
}
.card{
    width: 200px;
    max-width: 90vw;
    margin: 0 auto;
}
.contact-container{
    display: flex;
    flex-direction: column;
}
.address-container h2{
    font-weight: bold;
    margin-top: 40px;
    display: flex;
    justify-content: flex-start;
}
.address-container p{
    font-size: 20px;
    display: flex;
    justify-content: flex-start;
}
.address-container a{
    font-size: 20px;
    display: flex;
    justify-content: flex-start;
}
.social-icon{
    display: flex;
    justify-content: flex-start;
}

}

}
@media (max-width: 1000px){
    
    body{
        max-width:  90vw;
        margin: 0 auto;
    }
    p{
        text-align: justify;
        max-width: 90vw;
    }
    .home-info{
        grid-template-columns: repeat(1, 1fr);
         grid-auto-rows:  minmax(auto, auto);
         grid-template-areas: 
                                            "about"
                                            "image";
    }
    .home-info .myimage{
        padding-top: 10px;

    }
    .about-me .about{
        margin-top:  1.5em;
    }
    .tool-container .tools{
   display: flex; 
   flex-direction: row;
   align-items: center;
   gap:  10px;
   }
 .card-container{
    display: grid;
    grid-template-columns:  repeat(1, 1fr);
    gap: 5px;

}
.prov-card{
    margin-bottom: 15px;
    max-width: 90vw;
}
.prov-card h3{
    text-align: center;
}
.resources .tool-container{
    display: flex;
    flex-direction:  row;
    flex-wrap: wrap;
    gap:  15px;
}
.card{
    width: 200px;
    max-width: 90vw;
    margin: 0 auto;
}
.contact-container{
    display: flex;
    flex-direction: column;
}
.address-container h2{
    font-weight: bold;
    margin-top: 40px;
    display: flex;
    justify-content: flex-start;
}
.address-container p{
    font-size: 20px;
    display: flex;
    justify-content: flex-start;
}
.address-container a{
    font-size: 20px;
    display: flex;
    justify-content: flex-start;
}
.social-icon{
    display: flex;
    justify-content: flex-start;
}

}
@media (max-width: 1200px){
    body{
        max-width:  90vw;
        margin: 0 auto;
    }
    p{
        text-align: justify;
        max-width: 90vw;
    }
    .home-info{
        grid-template-columns: repeat(1, 1fr);
         grid-auto-rows:  minmax(auto, auto);
         grid-template-areas: 
                                            "about"
                                            "image";
    }
    .home-info .myimage{
        padding-top: 10px;

    }
    .about-me .about{
        margin-top:  1.5em;
    }
    .tool-container .tools{
   display: flex; 
   flex-direction: row;
   align-items: center;
   gap:  10px;
   }
 .card-container{
    display: grid;
    grid-template-columns:  repeat(1, 1fr);
    gap: 5px;

}
.prov-card{
    margin-bottom: 15px;
    max-width: 90vw;
}
.prov-card h3{
    text-align: center;
}
.resources .tool-container{
    display: flex;
    flex-direction:  row;
    flex-wrap: wrap;
    gap:  15px;
}
.card{
    width: 200px;
    max-width: 90vw;
    margin: 0 auto;
}

}