@import url('https://fonts.googleapis.com/css2?family=Almarai:wght@300;400;700;800&display=swap');

:root{
    --blue:#033E5C;
    --beige : #D7C091;
}
html{scroll-behavior: smooth;}
a{text-decoration: none;}
*{
  font-family: "Almarai", sans-serif;
}
.nav-link{
    font-size: 1.2rem!important;
}
.nav-link:hover{
    color: var(--blue) !important;
    text-decoration: underline;
}
.text-blue{
    color: var(--blue);
}
.text-beige{
    color: var(--beige);
}
.bg-beige{
    background-color: var(--beige);
}
.navbar-brand img{
    width: 150px;
}
.social-icon:hover{color: var(--beige);}
.quotes{width: 60px; height: 60px;}
.bg-light{
    background-color: #F4F4F4 !important;
}
.about-icon:hover{
    color: var(--blue);
}
.btn.bg-beige:hover{
    background-color: var(--blue);
    color: var(--beige);
}
.card-service img{
    transition: 1s;
    height: 200px;
}
.card-service:hover img{
    transform: scale(1.2);
}
.rounded-image{
    width: 100px;
    height: 100px;
    object-fit: cover;
}
.fb-icon:hover{color: #3b5998 !important;}
.twit-icon:hover{color: #55acee  !important;}
.goog-icon:hover{color: #F90101 !important;}
.link-icon:hover{color: #007bb6 !important;}
.custom-position{
    position: absolute;
}

@media  (max-width:1200px){
    .custom-position{
        position: static;
    }
}


.card-deck .card{
  transition:all .4s ease-in-out;
}
.card-deck .card:hover{
  transform:scale(1.05);
  box-shadow:10px 10px 10px #888888;
}


.ser .card{
  overflow: hidden;
}
.ser .card-con{
   overflow: hidden;
}
.ser .card-img-top{
  height: 220px;
  transition: all 0.3s ease-in-out; 
}

.ser .card-img-top:hover{
  transform: scale(1.2) rotate(5deg);
  transition: all 0.3s ease-in-out;
  cursor: pointer
}

@media (max-width:992px){
    h4{
        font-size: 19px;
    }
    p{
        font-size: 16px;
    }
    h5{
        font-size: 17px;
    }
    h3 , .h3{
        font-size: 20px;
    }
    .display-3{
        font-size: 40px;
    }
      .ser .card-img-top{
        height: 180px;
    }
}


@media (max-width:767px){
    .border-none{
        border:none !important
    }
    .ser .card-img-top{
        height: 160px;
    }
    .display-3{
        font-size: 35px;
    }
    p{
        font-size: 14px;
    }
    
  
}



@media (max-width:500px){
    .display-3{
        font-size: 30px;
    }
    header .justify-content-between{
        justify-content: center !important;
    }
    
}