*{
    margin: 0;
    padding: 0;
    scroll-behavior: smooth;

}
body{
    font-family: 'Montserrat', sans-serif;
}

/* header-section */

.first-head{
    background-color:#23809c;
    height: 40px;
    text-align: end;
}
.first-heads{
    background-color:#135a70;
    height: 40px;
    text-align: end;
}
.fa-solid{
    padding-top: 12px;
    color: rgb(255, 255, 255);
    font-size: 15px;
}
.num{
    font-size: 13px;
    color: rgb(255, 255, 255);
    margin-right: 0;
    font-weight: 500;
}


/* 
main-head */

.main-head{
    position: relative;
    background-color: rgb(255, 255, 255);
    height: 76px;
    box-shadow: 1px 1px 6px 0.5px rgb(172 169 169);
    justify-content: center; 
    align-items: center;
    display: block;
   


}
.logo img{
    position: absolute;
    height: 90%;
}


.nav{
    align-items: flex-end;
    height: 100%;
    vertical-align:middle;
  

}
.menu{
    padding-top:25px;
    display: block; 
    width: 100%;
    display: block;
    text-align: right;
}

  

.menu a{
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    color: rgb(22, 21, 21);
    margin-left: 25px;
    text-align: right;
   align-items: flex-end;
    
}
/* 
.nav-header */
#navbar-header{
    background-color: rgb(255, 255, 255);
    position: fixed;
    z-index: 1;
    top: -120px;
    width:100vw;
    height: 90px;
    display: block;
    border-bottom: #127897 solid 2px;
    transition: top 0.3s;
    box-shadow: 1px 1px 6px 0.5px rgb(172 169 169);
    
}


/* mobile-menu */

.menu-mob{
    color: #3b3b3b;
    font-size: 25px;
    margin-top: -27px;
   text-align: end;
   width: 100%;
    font-size: 27px;
}
.menu-mob .fa-bars{
    color: #135a70;
    font-size: 30px;
    margin-top: 40px;
    margin-right: 20px;
    
}
.menu-mob .fa-xmark{
    color: #135a70;
    font-size: 30px;
    margin-top: 40px;
    margin-right: 20px;
   
}

/* mobile-nav */
.mobile-nav-wrapper{

    display:none;
    position: fixed;
    width:100vw;
    left: 0;
    right: 0;
    z-index: 1;
    background:linear-gradient(to bottom,rgba(27, 27, 27, 0.226),rgb(90, 89, 89));
    height: 100vh;
    
    transition: top 0.3s;
}
.mobile-nav-wrappers{

    display:none;
    position: fixed;
    width:100vw;
    
    left: 0;
    right: 0;
    z-index: 1;
    background:linear-gradient(to bottom,rgba(27, 27, 27, 0.226),rgb(90, 89, 89));
    height: 100vh;
    transition: top 0.3s;
}

.mobile-nav{
    display: flex;
    flex-flow: column;
    width: 90%;
    align-items: center;
    justify-content: center;
    background: rgb(255, 255, 255);
    border-bottom: #135a70 solid 3px;
    border-left: #135a70 solid 3px;
    border-right: #135a70 solid 3px;
    font-size: 18px;
    padding: 1rem;
    border-radius: 5px;
    left: 0;
    right: 0;
    margin: 0 auto;
}

.mobile-nav a{
    font-weight: 600;
    color:rgb(117, 115, 115); 
    text-decoration: none;
    margin: 1rem 0;
    font-size: 20px;
}
.mobile-nav a:hover{
    font-weight: 600;
    color:#135a70; 
    text-decoration: none;
    margin: 1rem 0;
    font-size: 20px;
}

/* hero-section */

.hero-section{
    background-image:linear-gradient(rgba(164, 182, 245, 0.589), rgba(108, 159, 235, 0.356)), url(assets/images/hero-cover.jpg);
    height: 500px;
    text-align: center;
    align-items: center;
    justify-content: center;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    justify-content: center;
    display: flex;
    align-items: center;
    box-shadow: 0px 0px 0px 0px rgb(75, 74, 74);
}
.box-text{
    box-shadow: 5px 2px 7px -2px rgb(75 74 74);
    padding: 15px;
    border-radius: 3px;
    background-color: rgba(255, 255, 255, 0.582);
}
.hero-text{
    color: #135a70;;
    font-weight: 700;
    font-size: 24px;
    text-shadow: 1px 0px #f7f4f4;
    
}
.box-text p{
    font-size: 14px;
    color: rgb(118, 119, 139);
    text-shadow: 5px 2px 7px -2px rgb(255, 250, 250);
}

/* ABOUT SECTION */

.about-section{

    background-color:rgba(240, 236, 245, 0.212) ;
    padding-bottom: 0px;
}
.about-body{
    padding-bottom: 30px;
    background-image:linear-gradient(rgba(255, 255, 255, 0.952), rgba(255, 254, 254, 0.973)), url(assets/images/about/undraw_happy_news_re_tsbd.svg);
    background-size: cover;
    background-repeat: no-repeat;
    
}
.about-body .right img{
    box-shadow: -4px -4px 5px -2px rgba(75, 74, 74, 0.637);
}
.header-text{
    position: relative;
    padding-left: 2px;
}
.header-text h1{
    
    font-size: 22px;
    color: rgb(87, 80, 80);
}
.header-text .line{
    position: relative;
    height: 2px;
    width: 40px;
    background-color: rgb(90, 89, 89);
}
.header-text .subline{
    position: absolute;
    height: 2px;
    width: 30px;
    background-color: #135a70;
}
.left p{
    color: #696969;
}

.about-body h5{
    color: #696969;
}
.socialmedia{
    padding-top: 10px;
}
.socialmedia .fa-brands{
    font-size: 20px;
    color: #696969;
    padding-left: 15px;
}
.socialmedia span{
    font-size: 14px;
    color: #696969;
    padding-left: 20px;
}


/* properties-section */

.properties-section{
    background-color: #f5faff;
    padding-bottom: 40px;
}
.properties-section .header-text  p{
    padding-top: 10px;
    text-align: center;
    color: #696969;
    font-size: 14px;
}
.properties-section .header-text {
    padding-top: 10px;
    text-align: center;
}
.line-prop{
    margin: 0 auto;
    height: 2px;
    width: 40px;
    background-color: rgb(90, 89, 89);
}
.subline-prop{
    height: 2px;
    width: 20px;
    background-color: #135a70;
}
.card img{
    height: 200px;
}
.properties-section .card{
   height: 310px;
   border-bottom: #135a70 solid 3px;
}
.card{
   box-shadow: 5px 7px 5px -3px rgba(75, 74, 74, 0.37);
   transition: 0.5s;
}
.card:hover{
    box-shadow: 5px 7px 5px -3px rgba(75, 74, 74, 0.37);
    transform: scale(1.03);
    background-color: #f0f9fc80;
 }
.btn-view{
    text-align: center;
  
}
.btn-view button{
    border: none;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 10px;
    background-color:#135a70;
    color: #fff;
    border-radius: 4px;
    font-size: 13px;
    transition: 0.10s;
}

.btn-view button:hover{
    border: none;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 10px;
    background-color: #1e7f9c ;
    color: #fff;
    border-radius: 3px;
    font-size: 13px;
    width: 140px;
   
}
.first:hover{
    border-top: green solid 5px;
}
.second:hover{
    border-top: rgb(108, 34, 177) solid 5px;
}
.third:hover{
    border-top: rgb(177, 91, 34) solid 5px;
}
.fourth:hover{
    border-top: rgb(74, 139, 13) solid 5px;
}
.fifth:hover{
    border-top: rgb(139, 89, 13) solid 5px;
}
.sixth:hover{
    border-top: rgb(6, 50, 80) solid 5px;
}
/* our-clients */

.our-clients{
    border-top:rgba(182, 182, 182, 0.068)  solid 2px ;
    border-left: #135a70  solid 12px;
    border-right:#135a70  solid 12px ;
    text-align: center;
    background-color: rgb(246, 245, 252);
    padding-bottom: 40px;
}
.our-clients .container{
    padding-top: 20px;
    text-align: center;
    background-color: rgb(248, 241, 241);
}
.our-clients p{
    font-size: 14px;
    padding-top: 20px;
    text-align: center;
    color: #696969;
}
.our-clients .card{
    border-radius: 50px 10px;
    border-left: #135a70 solid 3px;
    border-right: #135a70 solid 3px;
}
.our-clients .card img{
    border-radius: 50px 2px;
}

/* 
contact-section */


.contact-section{
    background-color: #eeeaf7;
    padding-top: 20px;
    padding-bottom: 30px;
    
}
.contact-section .header-text{
    text-align: center;
}
.contact-section .fa-brands{
  color: rgb(108, 108, 109);
  font-size: 24px;
  
}
.social-network p{
   
    font-size: 14px;
    color: #696969;
}
.social-network .fa-brands{
   
    padding-left: 5px;
    color: #696969;
}
.address h4{
    padding-top: 20px;
    font-size: 18px;
    color: #3b3b3b;
}
.address p{

    font-size: 14px;
    color: #747171;
}
.menu-contact a{
    margin-top: 40px;
    text-decoration: none;
    color: #707070;
    font-size: 14px;
}
.menu-contact h4{
    padding-top: 10px;
    font-size: 18px;
    color: #707070
}
.phone .fa-solid{
    color: rgb(92, 91, 91);
}
.phone span{
    color: rgb(124, 122, 122);
    font-size: 14px
}
.btn-submit{
    background-color:#135a70; ;
    color: #fff;
    border: none;
    font-size: 12px;
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 5px;
    padding-bottom: 5px;
    border-radius: 5px;

}

input:focus,
textarea:focus

{
    outline:none;
    border: #ffffff solid 1px;
    box-shadow: none !important;
}

/* footer-section */
.footer-section{
 
    background-color: #135a70;
    text-align: center;
    padding-bottom: 5px;
}
.footer-section p{
    color: rgb(245, 233, 233);
    font-size: 13px;
    padding-top: 10px;
    
}


/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {

.menu{
    display: none;
}
#nav-btns{
    display: block;
}
#nav-btns{
    display:block;
}
#close-btns{
    display: none;
}
#nav-btns{
    display: block;
}
#close-btns{
    display: none;
}
#nav-btn{
    display: block;
}
#close-btn{
    display: none;
}




}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {

.menu {
    display: none;
}
#nav-btns{
    display: block;
}
#close-btns{
    display: none;
}
#nav-btn{
    display: block;
}
#close-btn{
    display: none;
}



}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
    .menu {
        display: block;
    }
    #nav-btns{
        display: none;
    }
    #close-btns{
        display: none;
    }
    #nav-btns{
        display: none;
    }
    #close-btns{
        display: none;
    }
    #nav-btn{
        display: none;
    }
    #close-btn{
        display: none;
    }




}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {

    .menu {
        display: block;
    }
    #nav-btns{
        display: none;
    }
    #close-btns{
        display: none;
    }
    #nav-btn{
        display: none;
    }
    #close-btn{
        display: none;
    }



}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {

    .menu {
        display: block;
    }
    #nav-btns{
        display: none;
    }
    #close-btns{
        display: none;
    }
    #nav-btn{
        display: none;
    }
    #close-btn{
        display: none;
    }



}




#preloader{
    background: rgb(255, 255, 255) url(assets/images/Ball-Drop-Preloader-1-1.gif) no-repeat center;
    background-size:55%;
    height: 100vh;
    width: 100%;
    position: fixed;
    z-index: 100;
}