*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Roboto", system-ui;
}

html{
    /* font-size: 62.5%; */
    height:300vh;
}

hr{
    background-color:rgb(2,2,70);
    height:5px;
}


/*! Header */


#navbar{
    background-color: rgb(2, 2, 70);
    display: flex;
    align-items: center;
    justify-content:space-around;
    padding: 1.3rem;
    /* position:sticky;
    top:0; */
    z-index: 1000;
    width: 100%;
    
}

#navbar img{
    width:auto;
    height:4rem;
    cursor: pointer;
    /* padding-left: 44%;     */
}

#navbar .fa-bars{
    font-size: 2rem;
    color: #fff;
    cursor: pointer;
    padding-top: 0.1rem;
    display:none;
}

#navbar .menu{
    display: flex;
    background-color:rgb(2, 2, 70);
    list-style-type: none;
    gap: 4rem;
    padding: 0rem 0px 0px 3rem;
    
}


#navbar .menu li a{
    text-decoration: none;
    color: #fff;
    font-size: 1.1rem;
    transition: 0.5s ease-in-out;
}

#navbar .menu li a:hover{
    text-decoration: none;
    color: #2cabe7;
    font-size: 1.1rem;
}

/*! Home */

#home{
    position: relative;
}

#home .background-clip{
    background-position: absolute;
    width: 100%;
    height: 100vh;
    object-fit: cover;
    z-index: 10;
    
}

.home-content{
    /* background: rgb(0,0,0,0.5); */
    width: 100%;
    height: 99%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 20;
    display: flex;
    flex-direction: column;
    row-gap:3rem;
    justify-content: center;
    align-items: center;

}


.home-content .content h1{
    color: #fff;
    font-size: 3.5rem;
    text-shadow: 3px 3px 3px rgb(2, 2, 70);
}

.home-content .button a{
    background-color: rgb(2, 2, 70);
    color: #fff;
    padding: 1.5rem 2.5rem;
    text-align: center;
    text-decoration: none;
    border-radius:1.5rem;
    font-size: 1.2rem;
    letter-spacing:2px;
    transition: 1s ease-in-out;
}

.home-content .button a:hover{
    background-color: #fff;
    border: 3px solid rgb(2, 2, 70);
    color: rgb(2, 2, 70);
}



/*! Cards */

#cards-content{
    display: flex;
    flex-direction: column;
    row-gap:2rem;
    text-align: center;
    padding:2rem;
}

#cards-content h2{
    font-size:4rem;
    color:rgb(2, 2, 70);
    /* text-shadow: 2px 2px 8px rgb(6, 6, 161); */
}

.rows-container{
    padding:1rem;
    display: flex;
    flex-direction: column;
    row-gap:2rem;

}

.row1.row,
.row2.row,
.row3.row{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    flex: 100%;
    gap:2rem;
    margin: 1rem;
}

.row1.row .album-image,
.row2.row .album-image,
.row3.row .album-image
{
    width:30%;
    cursor: pointer;
    box-shadow: 5px 15px 23px rgb(2, 2, 70);
    transition: 0.5s ease-in-out;
}

.row1.row .album-image:hover,
.row2.row .album-image:hover,
.row3.row .album-image:hover{
 -ms-transform: scale(1.3); /* IE 9 */
 -webkit-transform: scale(1.3); /* Safari 3-8 */
  transform: scale(1.3);
}


/*! About-us */

#about-us{
    display: flex;
    flex-wrap: wrap;
    flex: 100%;
    padding: 3rem;
    gap:7rem;

}

.title-image{
    width: 45%;
}

.text-content{
    display: flex;
    flex-direction: column;
    align-items: center;
    row-gap:1.5rem ;
    width: 45%;
}

.text-content h2{
    color:rgb(2, 2, 70) ;
    font-size:2.2rem;
    letter-spacing: 3px;
    /* text-shadow: 2px 2px 8px rgb(6, 6, 161); */
}
.text-content p{
    font-size:1.2rem;
    line-height: 40px;
    text-align: justify;
}

.text-content p span{
    font-weight: bold;
}

/*! Referance */

#referance{
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2rem;
    row-gap:2rem;
}

#referance h2{
    font-size:4rem;
    color:rgb(2, 2, 70);
    
}

.referance-cont{
    display: flex;
    flex-wrap: wrap;
    flex: 100%;
    padding:3rem;
}

.referance-image{
    width:20%;
    cursor: pointer;
}

.referance-image:hover{
    background-color: rgb(5, 125, 176);
    border-radius: 10px; 
}

/*! Contact */
 
#contact{
    background-color:rgb(2, 2, 70);
    padding: 2rem;
    display: flex;
    flex-wrap: wrap;
    flex: 100%;
    align-items: center;
    justify-content: center;
    text-shadow: 2px 2px #000;
    /* gap: 5rem; */
    
}

#contact .image-content{
    width: 50%;
    display: flex; 
    justify-content: center;
}

#contact .image-content .footer-img{
    width: 50%;
}

#contact .info-content{
    width:50%;
    color: #fff;
    display: flex;
    flex-direction: column;
    row-gap:2rem;
}

#contact .info-content h3{
    font-size: 1.5rem;
}

/*! Adress-Container*/

#contact .info-content  .adress-container{
    display: flex;
    flex-direction: column;
    row-gap:2rem;
    font-size: 1.2rem;
    
} 

#contact .info-content  .adress-container .adress{
    display: flex;
    gap: 1.4rem;
    align-items: center;
    
}

 .adress-container .adress .fa-location-dot{
    font-size:2rem;
    color: red;
}

.adress-container .adress .fa-phone-volume{
    background-color:green;
    color: #fff;
    padding: 0.5rem;
    border-radius: 5px;
}

.adress-container .adress .fa-envelope{
    background-color:rgb(165, 172, 16);
    font-size:1.5rem;
    color: #fff;
    padding: 0.3rem;
    border-radius: 5px;
}

/*! Social-Media */

.info-content .social-media{
    display: flex;
    gap:1.8rem;
}
.info-content .social-media i{
    font-size: 2rem;
    padding:0.5rem;
    color: #fff;
    border-radius: 10px;
}

.info-content .social-media .fa-whatsapp:hover,
.info-content .social-media .fa-instagram:hover,
.info-content .social-media .fa-youtube:hover,
.info-content .social-media .fa-facebook:hover,
.info-content .social-media .fa-linkedin:hover{
  opacity: 0.8;
}

.info-content .social-media .fa-whatsapp{
    background-color: green;
    color: #fff;
      
}

.info-content .social-media  .fa-instagram{
    background-color: purple;

}

.info-content .social-media  .fa-youtube{
    background-color: red;
    }
    

.info-content .social-media .fa-facebook{
 background-color:blue;
}


.info-content .social-media .fa-linkedin{
 background-color: rgb(7, 144, 208);
}

/*!End-text */


#contact .end-text {
    padding-top:2rem ;
    color: gray;
   
}



/*! Responsive */

/*1420px*/

@media(max-width:1420px){

    /*! About-us */

#about-us{
    display: flex;
    align-items: center;
    flex-direction: column;
    row-gap:2rem;
}

.title-image{
    width: 100%;
}

.text-content{
   
    width: 100%;
}

}

/*1340px*/

@media(max-width:1340px){
    #contact{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        row-gap:3rem ;
        
    }

    #contact .image-content .footer-img{
        width: 100%;
    }

    #contact .info-content{
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        
    }
}

/*1030px*/


@media(max-width:1030px){
    .referance-cont{
        flex-direction: column;
    }

    .referance-image{
        width: 100%;
    }
}


/* 900px*/

@media(max-width:900px){

    #navbar{
        position: relative;
    }

    #navbar img{
        width:auto;
        height:3rem;
        cursor: pointer;
        /* padding-left: 44%;     */
    }

    #navbar .menu{
        display: flex;
        flex-direction: column;
        align-items: center;
        padding:4rem;
        position: absolute;
        top:90px;
        width: 100%;
        height:100vh;
        left: -100%;
     
    }

    #navbar .menu.active{
        left:0;
        transition: 0.5s ease-in-out;
    }

    #navbar .menu li{
        width: 100%;
        border-bottom: 2px solid rgb(9, 150, 237);
        
    }

    #navbar .fa-bars{
        font-size: 2rem;
        color: #fff;
        cursor: pointer;
        padding-top: 0.1rem;
        display:block;
    }  

}

/*840px*/

@media(max-width:840px){

    /*! Cards */
   
.row1.row,
.row2.row,
.row3.row{
  
    flex-direction: column;
}


.row1.row .album-image,
.row2.row .album-image,
.row3.row .album-image
{
    width:100%;

}

}

/*710px */

@media(max-width:710px){

    .home-content .content h1{
        font-size: 2.5rem;
        
    }

    .home-content .button a{
        background-color: rgb(2, 2, 70);
        color: #fff;
        padding: 1rem 2rem;
        text-align: center;
        text-decoration: none;
        border-radius:1.5rem;
        font-size: 1.2rem;
        letter-spacing:2px;
        transition: 1s ease-in-out;
    }

}

/* 545px*/

@media(max-width:545px){

    /*!cards */

    #cards-content h2{
        font-size:3rem;
        color:rgb(2, 2, 70);
        /* text-shadow: 2px 2px 8px rgb(6, 6, 161); */
    }



    /*!about-us */
    .text-content h2{
        color:rgb(2, 2, 70) ;
        font-size:1.9rem;
        letter-spacing: 3px;
        /* text-shadow: 2px 2px 8px rgb(6, 6, 161); */
    }

    /*!referance */

    #referance h2{
        font-size:3rem;
        color:rgb(2, 2, 70);
        /* text-shadow: 2px 2px 8px rgb(6, 6, 161); */
        
    }

}


/* 510px*/

@media(max-width:510px){

    .home-content .content h1{
        font-size: 2rem;
        
    }
}

/* 431px*/

@media(max-width:431px){

    /*!About-us */

    .text-content h2{
        color:rgb(2, 2, 70) ;
        font-size:1.5rem;
        letter-spacing: 3px;
        /* text-shadow: 2px 2px 8px rgb(6, 6, 161); */
    }

}


/*415px*/

@media(max-width:415px){
    
    /*!About-us */

    .text-content h2{
        color:rgb(2, 2, 70) ;
        font-size:1.3rem;
        letter-spacing: 3px;
        /* text-shadow: 2px 2px 8px rgb(6, 6, 161); */
    }

    .text-content p{
        font-size:1rem;
        line-height: 40px;
        text-align: justify;
    }

}


/*391px*/

@media(max-width:391px){

    /*!Contact */
    #contact .info-content  .adress-container{
        display: flex;
        flex-direction: column;
        row-gap:2rem;
        font-size: 1.1rem;
    }
    
    #contact .info-content h3{
        font-size:1.4rem;
    }    

}


/*376px*/

@media(max-width:376px){

    /*! Home*/

    .home-content .content h1{
        color: #fff;
        font-size: 1.8rem;
        text-shadow: 3px 3px 3px #000;
    }

 
    /*!About-us */

    .text-content h2{
        color:rgb(2, 2, 70) ;
        font-size:1.1rem;
        letter-spacing: 3px;
        /* text-shadow: 2px 2px 8px rgb(6, 6, 161); */
    }

    .text-content p{
        font-size:0.8rem;
        line-height: 40px;
        text-align: justify;
    }

    /*!Contact*/
    #contact .info-content  .adress-container{
        display: flex;
        flex-direction: column;
        row-gap:2rem;
        font-size: 1rem;
    }
    
    #contact .info-content h3{
        font-size:1.3rem;
    }

}

/*362px*/

@media(max-width:362px){

    /*!Contact*/
    #contact .info-content h3{
        font-size:1.2rem;
    }

    .info-content .social-media i{
        font-size: 1.8rem;
        padding:0.5rem;
        color: #fff;
        border-radius: 10px;
    }

    #contact  .end-text {
        font-size: 0.9rem;
    }


}

/*345px*/

@media(max-width:345px){

    /*! Home */

    .home-content .content h1{
        color: #fff;
        font-size: 1.7rem;
        text-shadow: 3px 3px 3px #000;
    }


     /*!About-us */

     .text-content h2{
        color:rgb(2, 2, 70) ;
        font-size:1rem;
        letter-spacing: 3px;
        /* text-shadow: 2px 2px 8px rgb(6, 6, 161); */
    }

    .text-content p{
        font-size:0.7rem;
        line-height: 40px;
        text-align: justify;
    }

    /*!Contact*/
    #contact .info-content  .adress-container{
        display: flex;
        flex-direction: column;
        row-gap:2rem;
        font-size: 0.9rem;
    }
    
    #contact .info-content h3{
        font-size:1.2rem;
    }

    .info-content .social-media i{
        font-size: 1.7rem;
        padding:0.5rem;
        color: #fff;
        border-radius: 10px;
    }


}