@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;600;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Aref+Ruqaa:wght@400;700&family=Vibes&display=swap');




*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

html{
    font-size: 62.5%;
}

body {

    background-color: aliceblue;
    font-family: 'Montserrat', sans-serif !important;
}

ul {
    list-style: none;
}

a {
    text-decoration: none;
}

a, a:visited, a:hover, a:active {
    color: #0a5096;
  }

.container{
    max-width: 70%;
    margin: auto;
    
}

header{

    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-top: 1rem;
    border-bottom: 0.3rem solid #0a5096;
    padding-bottom: 1rem;
}

.logo{

    width: 6rem;
}

.nav{
    margin-top: 3rem;
    display: flex;
}

.nav button{
    background: #0a5096;
    border: none;
    color: white;
    padding: 1rem 2rem 1rem 2rem;
    font-size: 1.3rem;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    cursor: pointer;
}
.nav li:nth-child(1){
    margin-right: 4rem;
    
}

.nav li:nth-child(2){
    font-size: 1.3rem;
    padding: 1rem;
    font-weight: 600;
    
}

.bismillah{
    text-align: center;
    margin-top: 3rem;
    line-height: 3rem;
}
.bismillah h2{

    font-size: 2.4rem;
    color: #0a5096;
    font-family: "Aref Ruqaa", sans-serif;

}

.bismillah span{

    font-size: 1.3rem;
    color: #0a5096;
    font-family: "Montserrat";
    
}

.bio{
    
    margin-top: 5rem;
    font-size: 1.4rem;
    text-align: justify;
    margin-left: 1rem;
    margin-right: 1rem;
    color: #0a5096;
    
}

.products-heading{
    margin-top: 5rem;
    text-align: center;
    font-size: 1.5rem;
    color: #0a5096;
}

.products{

    margin-top: 5rem;
    text-align: center;
    line-height: 4rem;
    font-size: 1.3rem;
}
.products ul{

    display: grid;
    grid-template-columns: repeat(5, minmax(0,1fr));
    grid-gap: 2rem;
    
}

.products img{

    width: auto;
    height: 32rem;
    filter: drop-shadow(4px 4px 4px rgba(0, 0, 0, 0.25));;
    
}

figcaption{
    text-overflow: ellipsis; 
    overflow: hidden; 
    white-space: nowrap;

}

.all-products{
    background: #0a5096;
    border: none;
    color: white;
    padding: 1rem 2rem 1rem 2rem;
    font-size: 1.3rem;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    cursor: pointer;
}

.btn{
    text-align: center;
    margin-top: 5rem;
}

.footer{
    border-top: 0.3rem solid #0a5096;
    margin-top: 5rem;
            
}

.socials ul{
    margin-top: 2rem;
    display: flex;
    justify-content: center;
}

.socials ul img{
    
    height: 2rem;
    margin: 0 0.5rem 0 0.5rem;
}

.socials ul li:nth-child(1){
    
    align-self: center;
    font-weight: 600;
    font-size: 1.3rem;
}

.sitelinks{

    font-size: 1.3rem;
    text-align: center;
    margin-top: 5rem;
    line-height: 2rem;
}

.sitelinks a{

    margin-right: 1rem;
    margin-left: 1rem;
}

.copyright{

    margin-top: 3rem;
    text-align: center;
    color: #0a5096    
}

.keywords{
    margin-top: 5rem;
    font-size: 0.5rem;
    color: aliceblue;
}

/*Animation of Images*/

.products figure img {
	-webkit-transform: scale(1);
	transform: scale(1);
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}
.products figure:hover img {
	-webkit-transform: scale(1.1);
	transform: scale(1.05);
}

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

    .container{
        max-width: 100%;
    }
    .products img{

        height: 24rem;

    }

    .products ul{

    grid-template-columns: repeat(2, minmax(0,1fr));
    grid-column-gap: 2rem;
    margin: 0 1rem 0 1rem;    
}

    .logo{

        margin-left: 1rem;
    }

    .nav li:nth-child(2){

        margin-right: 1rem;
    }

    .nav li:nth-child(1){
        margin-right: 2rem;
        
    }

    .bismillah h2{

        font-family: sans-serif;
    }

    .keywords{

        font-size: 0.1rem;
    }
}