style.css

*{
    margin:0;
    padding: 0;

    border: border-box;
}




a{
    text-decoration: none;
    color: black;
}
Header{
    padding: 1rem;
    display: flex;
    justify-content: space-between;
 
    
    width: 80%;
    margin: 0 auto;

    img{
        height: 3.75rem;
        width: 27rem;
    }
}
.hamburger{
    display: none;
   
}
.items{
    
    display:flex;
    justify-content: flex-end;
    text-align: flex-start;  

}
.part{
    padding:0.5rem;
   
   text-align: end;
}
.dropdown p:hover {
   
    background-color: rgb(242, 236, 236);
    
}

.dropdown-content {
    display: none;
  
 
    /* margin-top: 0.5rem; */
   background-color: rgb(242, 236, 236);
    z-index: 1;
    a{
        padding: 0.2rem;
    width: 10rem;
    }
    
   
}
.navbar{ 
.dropdown:hover .dropdown-content{
    display: flex;
    flex-direction: column;

    position: absolute;
    top: 8.7rem;
}
}

#small{
    font-size: 0.8rem;
    padding:0.1rem;
}
#mid{
    font-size: 0.9rem;
    padding:0.1rem;
}
#big{
    font-size: 1rem;
    padding:0.1rem;
}
.searchbar{
    padding-top: 0.5rem;
}
.intro{
    height: 15rem;
    
    background-color:#5183B8;
    color:  white;
    
    margin-top: 0.5rem;
}
.introin{
    width: 80%;
    height: 80%;
    margin: 0 auto;
   
    
    padding-top: 2rem; 
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    
   
    .part1{
       
       
        font-weight: bold;

        p{padding-right: 1rem;
            display: inline-block;
            font-family: "Noto Sans", sans-serif;
           
        }
        span{
            font-weight: lighter;
            font-size: 0.8rem;
        }

        
    }
  
    h2{
        padding-top: 1rem;
        padding-bottom: 1rem; 
        font-family: "Lato", sans-serif;
    }
}

.colorL{
    display: inline-block;
    padding-left: 0.2rem;
    padding-right: 0.2rem;
    border:1px solid #5183B8;
    margin-right: 0.1rem;
}

.colorB{
    display: inline-block;
    padding-left: 0.2rem;
    padding-right: 0.2rem;
    background-color:#5183B8;
}

.navbar{
    display: flex;
    justify-content: space-between;
width: 80%;
    margin: 0 auto;
    margin-top:1rem;
  
   color: #232323;
   ;

    p{
        display: inline;
        padding: 0.2rem;
    }
}


.h_LI{
    display: none;
}




/* content */
.content{
margin-top: 2rem;
 font-family: "Noto Sans", sans-serif;
 font-weight: 400;
 h2{
    width: 80%;
    margin:0 auto; 
    padding-top: 2rem;
    color:#4C4C4C;
    font-weight: 500;
    font-family: 'Lato', sans-serif;
    padding-bottom: 0.5rem;
}

}
.one{
    width: 80%;
    margin: 0 auto;
}
/* .two{
    width: 80%;
    margin: 0 auto;
    padding-top: 2rem;
    padding-bottom: 0.5rem;
   
} */



.three{
    display:flex;
    flex-direction: column;
 
}


.half{
  width:80%;
  margin: 0 auto;
   margin-top: 1.5rem;
   display: flex;
   flex-direction: row;
   justify-content: space-between; 
 
}


.row{
    position: relative;
}

.background{
    background-color:#5183B8;
    z-index: -1;
    position: absolute;
   bottom: 6.4rem;
    height: 13.438rem;
    width: 100vw;
 
}
.member{
.pos{
    color: #666666;

}


    h3{
        padding: 0.2rem;
        text-align: center;
        font-family: 'Lato', sans-serif;
        font-weight: 500;
        color: #232323;
        padding-top: 0.8rem;
        
    }
    .icons{
        display: flex;
        justify-content: center;
    }

    p{
        padding: 0.5rem;
        text-align: center;
    }

    i{
      color: #D2D7D3;
       
        padding:0.2rem;
    }
    hr{
       border:none;
       background-color: #FFD53D;
        height: 0.25rem;
        width: 8.313rem;
        margin:0 auto;
    }
}

.img1{
    margin: 0 auto;
    width: 17.875rem;
    height: 21rem;
    background: url(one.png);
    /* background-size: cover; */
    background-size: contain; 
    background-repeat: no-repeat; 
    background-position: center;
    transition: background 0.3s ease-in-out;
}

.img1:hover{
    background: url(Cone.png);
    background-size: contain; 
    background-repeat: no-repeat; 
    background-position: center; 
   
}

.img2{
    background: url('two.png');
    width: 13.75rem;
    height: 21rem;
   
    margin: 0 auto;
    background-size: contain; 
    background-repeat: no-repeat; 
    background-position: center;
   
    transition: background 0.3s ease-in-out;
}
.img2:hover{
    background: url('Ctwo.png');
    width: 17.875rem;
    height: 21rem;
    background-size: contain; 
    background-repeat: no-repeat; 
    background-position: center;
  
}
.img3{
    
    width: 17.875rem;
    height: 21rem;
    background: url(three.png);
    background-size: contain; 
    background-repeat: no-repeat; 
    background-position: center;
    margin: 0 auto;
}

.img3:hover{
    background: url(Cthree.png);
    background-size: contain; 
    background-repeat: no-repeat; 
    background-position: center;
  
}
.img4{
    
    width: 20.563rem;
    height: 24.313rem;
    background: url(dev_one.png);
    background-size: cover;
    background-repeat: no-repeat; 
    background-position: center;
   
    transition: background 0.3s ease-in-out;
    margin: 0 auto;
}
.img4:hover{
  
    background: url(Cdev_one.png);
    background-size: cover;
    background-repeat: no-repeat; 
    background-position: center;
}
.img5{
    width: 20.563rem;
    height: 24.313rem;
    background: url(dev_two.png);
    background-size: contain; 
    background-repeat: no-repeat; 
    background-position: center;
    transition: background 0.3s ease-in-out;
    margin: 0 auto;
}
.img5:hover{
    background: url(Cdev_two.png);
    background-size: contain; 
    background-repeat: no-repeat; 
    background-position: center;
   
    
}
.img6{
    margin: 0 auto;
    width: 20.563rem;
    height: 24.313rem;
    background: url(dev_three.png);
    background-size: cover; 
    background-repeat: no-repeat; 
    background-position: center;
    transition: background 0.3s ease-in-out;
    
}

.img6:hover{
    background: url(Cdev_three.png);
    background-size: cover;
    background-repeat: no-repeat; 
    background-position: center;
  
    
}

/* footer */
footer{
    padding-top: 5rem;

font-size: 0.9rem;

}
.columns{
    display: flex;
    
    justify-content: space-between;
    width: 80%;
    margin: 0 auto;
    font-family: 'Noto Sans',sans-serif;
a{
    display: block;
}
}
.col1{
    padding-right: 2rem;
 img{
    height: 5rem;
    width: 6rem;
 }
 .add{
    padding: 0.2rem;
    
 }

i{
    color: #0067B3;
    padding-right: 0.1rem;
}
 p{
    padding: 0.2rem;
  
 }
}

.col2{
    padding-right: 2rem;
    h3{
        padding: 0.2rem;
    }
    p{
        padding: 0.2rem;
       
    }
}


.col3{
    padding-right: 2rem;
    a{
        padding:0.2rem;
    }
}

.col4{
.box{
    height: 7rem;
    width: 12rem;
    background-color: rgb(122, 114, 104);
}

 p{
    display: inline-block;
    padding:0.2rem;
    /* padding-left: 0rem; */
}

}
.bottom1{
    margin-top: 2rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    background-color: aquamarine;
    span{
        padding-right: 0.8rem;
    }
    .in{
        width: 80%;
        margin:0 auto;
    }
} 
.bottom2{
    background-color: black;
    color: white;
    .in{
        width: 80%;
        margin:0 auto;
    }
}



/* responsiveness */




@media  screen and (max-width: 1280px) {

    .navbar{
        font-size: 0.6rem;
    }
    header{
        img{
            width: 20rem;
        }
    }
}


@media screen and (max-width: 768px){
    .navbar{
        display:none;

    }
    .items {
        display: none;
    }
    .hamburger{
       
        display: block;
        cursor: pointer;
        position: absolute; 
        top: 2rem; 
        LEFT: 0rem;
        z-index: 1; 
       
   .h_icon {
    i{ 
    padding-left: 1rem;}
   }

    }

.half{
    display: flex;
    flex-direction: column;

width: 100%;

}
.member{
   
   
position: relative;

}
.background{
    display: none;
}
.mbg{
    background-color:#5183B8;
    width: 100vw;
    height: 13.438rem;
    z-index:-1;
   position: absolute;
    bottom: 6.4rem;
}



    .h_icon:hover .h_LI {
        display: flex;
        flex-direction: column;
       background-color: white;
      margin-top: 1rem;
      padding-right: 2rem;
     
        z-index: 1;
        p{
           
            padding: 0.5rem;
          
        }
.dropdown{
    display: flex;
}

        .dropdown:hover .dropdown-content{
            display: flex;
            flex-direction: column;
        
            position: absolute;
            /* position: relative; */
            left:10rem;
        }


        .items{
            display: flex;
            flex-direction: column;
            padding: 0.5rem;
            .part{
                text-align: left;
            }
        }
    }
  
 .columns{
    flex-wrap: wrap;
 }
}