body{
    font-family: 'Oswald', sans-serif;
    margin: 0;
    padding: 0;
    font-size:16px;
    font-weight:200;
    
}
.container-fluid{padding:0px;}
.header{
    background-color:rgba(221, 225, 234, 0.700);
    padding:0.5rem 0rem ;
}
.banner{
    display: flex;
    justify-content: space-between;
}
.today{
    flex: 1;
}
.telphone{
    flex: 1;
    display: flex;
    align-items:flex-end;
    justify-content: flex-end;
}
.fa-phone{
    font-size: 24px;
    color: black;
}
.headerlogo{
    display: flex;
    justify-content: space-between;
}
.logo{
    flex:calc(20%);
    padding:0.5rem 0rem ;
    }
   .navbar{
    flex:calc(80%);
    display:flex;
    justify-content: space-between;
    
    height: 4vh;
  }  
li{
    
    list-style: none;
    margin: 0;
    padding: 0;
}
a{
    color:black;
    text-decoration: none;
}
.nav-menu{
    display:flex;
    justify-content:center;
    align-items: center;
    margin: 0;
    padding: 0;
    position: relative;
    gap:2rem;
    
}
.submenu{display:none;background-color:rgba(221, 225, 234, 0.900);width:25vw;z-index:2
;padding: 0;position: absolute; top:8.1rem;left:28rem;transition: 0.5s ease-in-out;
}
.submenu li{display: flex;justify-content: center;align-items: center;}
.submenu li a{display: block;width:100%;font-size: 18px; font-weight: 500;padding: 0.5rem 0rem;color:black;text-align: center;}

.nav-item{
    display: block;
    margin: 16px 0;
    padding: 0rem 0rem 1.6rem 0rem;
}
.nav-item:hover ul{display:block;position:fixed;transition: 0.5s ease-in-out;}
.nav-link{
    color: black;
  transition: 0.7s ease;
}
.nav-link:hover{
  color:#b5d1e2;
}
.bars{
  display:none;  
  justify-content: right;
}
.bar{
    display: block;
    justify-content: flex-end;
    align-items: flex-end;
    -webkit-transition: all 0.3s ease-in-out;
    transition:all 0.3s ease-in-out;
}
.sliders, .wrap , .slider , .slide-content{
    padding: 0;
    margin: 0;
    width: 100%;
    height: 90vh;
    overflow-x: hidden;
    overflow-y: hidden;
}
.wrap{
    position: relative;
}
.slide{background-size: cover;background-position: center;background-repeat: no-repeat;}
.slide img{
    width: 100%;
}
.slide:hover{zoom: 2rem;}
.slide-content{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    position: absolute;
    top:-0%;
    margin-top: -0px;
    background-color:rgba(0,0 ,0, 0.40);
}
 .slide-content .caption{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width:50vw;
    transition: width 2s;
    
}
.title{font-size: 3rem;font-weight:bold; color: #fff;}
.slide p{font-size:18px; color: #fff;opacity: 1;}
.arrow{cursor: pointer;position: absolute; top: -50%; margin-top:45%; width: 0;height: 0;border-style: solid;z-index:3;}
#arrow-left{border-width: 30px 40px 30px 0px; border-color: transparent #fff transparent transparent;left:0;margin-left: 30px;}
#arrow-right{border-width: 30px 0px 30px 40px; border-color: transparent transparent transparent #fff;right:0;margin-right: 30px;}
.topint{ padding:7rem 0rem; background-color: #DDE1EA;height:auto;}
.topwarp{display: flex;justify-content: space-between; padding:10px 20px;}
.topleft{flex:1;display: flex;justify-content:left;align-items: left;flex-direction: column;}
.topleft h2{padding-bottom: 20px;font-size:24px; font-weight: 500;}
.topleft p{line-height:2rem;}
.topright{flex:1;display: flex;justify-content:center;align-items: center;padding: 30px;background-position: center;
 background-repeat: no-repeat;background-size: cover;
}
.topright .img{width: 100%;}
.tophold{border-bottom:1px solid #DDE1EA;padding:5rem 0rem;}
.hold{display:grid;grid-template-columns: 1fr 1fr 1fr 1fr;width:100%;gap:10px;}
.icons{width:100px; height:100px;}
.icons img{width:100%;height:100%;object-fit:cover;}
.catitle{font-size:21px; font-weight:400;}
.cabody{font-size:16px;font-weight:200;overflow-y: hidden;padding:10px;}
.midhold{padding: 5rem 0rem;}
.midwarp{display:grid;grid-template-columns: 1fr 1fr 1fr 1fr;gap:10px;}
.midimg{height: 45vh;border-radius: 5px 5px 5px 5px;overflow-y: hidden;background-size:50%;
}
.contain{object-fit:cover;object-position:top}
.midimg img{width:100%;height:100%;}
.midheader{margin-bottom: 2rem;}
.midcaption{margin:0rem 0rem 0rem 1rem;}
.midcaption h4{height:5vh;padding: 1rem 0rem;font-size: 21px; font-weight: 400;margin-bottom: 2rem;overflow-wrap: break-word;}
.midcaption span{font-size: 16px; font-weight: 400;margin-bottom: 0.5em 0em;}
.midcaption p{line-height: 1.5rem;font-size: 16px; font-weight: 200;}
.midowarp{ background-color:rgba(0,0 ,0, 0.30);height: 60vh;padding: 5rem 0rem;
}
.midoheader{display: flex;justify-content: space-between;opacity: 1;}
.midoheaderleft{flex:1;position: relative;}
.midoheaderleft h2{font-size:2.4rem;font-weight: 600; color: #fff;}
.midoheaderleft p{font-size: 1rem; font-weight: 400; color:#fff;line-height: 1.5em;}
.midheaderleft a{font-size: 20px;background-color:#fff; border-radius: 50%;}
.midoheaderright{flex:1}
.modal{ display: none; 
    position: fixed; 
    z-index: 1; 
    padding-top: 100px; 
    left: 0;
    top: 50px;
    width: 100%;
    height: 100%; 
    overflow: auto;
}
.modal-content {
    background-color: #fefefe;
    margin: auto;
    padding: 20px;
    border: 1px solid #888;
    width: 50%;
    display: none;
    flex-direction: column;
  }
  .close {
    color: #aaaaaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
  }
  .modal-body .form{display: flex;flex-direction: column;}
  .form input{padding: 5px;margin-bottom: 1rem;}
  .form textarea {margin-bottom: 1rem;}
  
  .close:hover,
  .close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
  }
  .comm{background-color: #DCE0EB; padding: 0;}
  .comment{display:flex;justify-content: center;align-items: center;padding: 5rem 0rem;}
.commenting{width:70%;display:flex;justify-content: center;align-items: center;flex-direction: column;}
.commentimg{width: 7vw;margin-bottom: 2rem;}
.commentimg img{width: 100%;}
.news {padding:3rem 0rem}
.newscontent{display: flex ;flex-direction: column;}
.newsheader{display: flex;justify-content: space-between;margin-bottom: 2rem;}
.newsheader .left{flex:1}
.newsheader .right{flex:1;display: flex;justify-content:flex-end;align-items: flex-end;}
.newsbody{display:flex;justify-content: space-between;flex-wrap:wrap;flex-flow:  wrap;}
.media{flex:1;display: flex;justify-content: space-between;width: 100%;}
.mediaimg{flex:1;width: 23vw;height: 15vh;overflow-y: hidden;margin-right: 2rem;margin-bottom: 3rem;}
.media-body{flex:2;height: 25vh; overflow:hidden;text-overflow: ellipsis;}
.mediaimg img{width:100%;height:100%;background-position: center;background-repeat: no-repeat;}
.media-title a {font-size: 16px;font-weight: 600;text-transform: uppercase;}
.media-title a:hover {color: #DCE0EB;}
.media-body p{font-size: 16px;font-weight: 400;text-transform: lowercase;}
.footer{padding: 3rem 0rem;background-color: rgba(221, 225, 234, 0.900);}
.colophon{display: flex;justify-content: space-between;}
.foot{flex:1;}
.logofoot{width:15vw;background-position: center; background-size: cover; background-repeat: no-repeat;margin-bottom: 2rem;}
.logofoot img{width: 100%;}
.address address span{margin: 0rem 1rem 0.5rem 0rem; padding-left:0.5rem;font-size: 20px;font-weight: 500;}
.foottitle{font-size: 20px;font-weight: 600;margin-bottom: 0.5rem;}
.latest{margin-bottom: 0.5rem;}
.latest a{font-size: 15px; font-weight:500;text-transform: lowercase;}
.latest a:hover{color: #fff;}
.services{display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
    padding-left: 0;}
    .services li{ list-style: none;
    display: inline-block;
    width: calc(100% / 2);
    text-align: center;
    padding: 0.5rem 0rem;
    }
    .services li a{font-size: 15px;font-weight: 500;}
    .services li a:hover{color: #fff;}
    .bottoms {display: flex; justify-content: space-between;}
    .bleft{flex:calc(50%);}
    .bright{flex:calc(50%)}
    .bleft ul{display: flex;justify-content:left;padding: 0;}
    .bright ul{display: flex;justify-content: right;padding: 0;}
    .bleft ul li{margin:0 0.5rem;}
    .bright ul li{margin:0 0.5rem;}
    .fluid{background-color:rgba(0,0 ,0, 0.30);padding: 3rem 0rem;}
    .rubri{display: flex;justify-content: left;}
    .contentrub{width:50vw;flex-wrap: wrap;flex-direction: column;}
    .contentrub h3{color: #fff;font-size: 20px;font-weight: 600;text-transform: uppercase;}
    .contentrub p{font-size: 15px; font-weight: 400;color: #fff;text-transform: lowercase;}
    .ru{display: flex; justify-content: space-between;width: 100%;padding: 2rem 0rem;}
    .leftru{flex:calc(70%);margin-right: 2rem;}
    .rightru{flex:calc(30%);background-color:rgba(221, 225, 234, 0.700); justify-content: center;padding: 3rem 0rem;}
    .rutit{text-align: center;font-size: 20px;font-weight: 600;margin:0 2rem;margin-bottom: 1rem;}
    .rightru ul{padding: 0 2rem;}
    .rightru ul li{display: block;width: 100%;border-bottom:1px solid #888;}
    .rightru ul li a{display: block;font-size: 15px;font-weight: 500;padding: 0.5rem 0rem;}
    .rightru ul li a:hover{color:#fff}
    .team {display: flex;justify-content: space-between;}
    .teambody{flex:calc(33%);margin-right: 0.7rem;}
    .teambody .image{background-position: center; background-size: cover;background-repeat: no-repeat; height: 40vh;overflow-y: hidden;border-radius: 0.5rem 0.5rem 0.5rem 0.5rem;
     margin: 2rem 0rem;
    }
    .image img{width:100%;}
    .captionteam h3{font-size: 20px; font-weight: 600;height: 7vh;overflow-y: hidden;}
    .captionteam h5{font-size: 17px; font-weight: 500;padding:1rem 0rem 0rem 0rem}
    .captionteam a{font-size: 16px;font-weight: 500;padding: 0.5rem;background-color: #DDE1EA;}
    .services{display: flex; justify-content: space-between;padding: 2rem 0rem;}
    .leftserv{ flex:calc(30%);background-color:rgba(221, 225, 234, 0.700);padding: 2rem 0rem;}
    .rightserv{flex: calc(70%);padding:0rem 2rem;}
    .leftserv ul{ padding: 0rem 1rem;}
    .leftserv ul li{display: block;width: 100%;border-bottom:1px solid #888;}
    .leftserv ul li a{display: block;font-size: 15px;font-weight: 500;padding: 0.3rem 0rem;}
    .leftserv ul li a:hover{color:#fff}
    .rut{font-size: 20px;font-weight: 600;padding: 0rem 0rem 0.5rem 0rem;}
    .rightserv h6 {font-size: 17px; font-weight: 400;line-height: 1.5rem;}
    .contacts{display: flex;justify-content: space-between;}
    .contactcontent{flex:calc(70%)}
    .contactside{flex:calc(30%);padding:0 2rem;}
    .contact{display: flex;flex-direction: column;border-radius: 5px;
        background-color: rgba(221, 225, 234, 0.700);padding: 20px;}
    .contact input[type=text],  textarea {width: 100%; padding: 10px;border: 1px solid #ccc;
        border-radius: 4px;
        box-sizing: border-box;
        margin-top: 6px;
        margin-bottom: 16px;
        resize: vertical;
      }
      .contact input[type=email]{width: 100%; padding: 12px;border: 1px solid #ccc;
        border-radius: 4px;
        box-sizing: border-box;
        margin-top: 6px;
        margin-bottom: 16px;
        resize: vertical;
      }
      .news{display: flex;justify-content:right;}
      .leftnews{flex:calc(25%);}
      .rightnews{flex:calc(75%);}
      .rightnews .media{display: flex;justify-content: right;margin-bottom: 0.5rem;padding: 0rem 1rem;}
      .media .image{flex:calc(40%);background-position: center;background-size: cover;background-repeat: no-repeat;height: 30vh;overflow-y: hidden;}
      .media .capt{flex:calc(60%);padding:0rem 1rem}
      .image,img{width: 100%;}
      .capt a{display: block;font-size: 18px; font-weight: 600;text-transform: uppercase;}
      .capt a:hover{color:#DDE1EA;font-size: 18px; font-weight: 600;}
      .capt p{font-size: 15px; font-weight: 400;text-transform: capitalize!important;}
      .searchs {display:flex;justify-content:space-between;background-color:rgba(221, 225, 234, 0.700);}
      .searchs input[type=text]{
        flex:calc(90%);
        background-color:rgba(221, 225, 234, 0.100);
        width:100%;
        border-radius: none;
        border: none;
        box-sizing: none;
        padding:8px 5px;
      }
      .search input[type=submit]{flex:calc(10%);}
      .late{margin-top: 2rem;background-color:rgba(221, 225, 234, 0.700); padding: 10px 2px;}
      .late h4{font-size: 20px;font-weight: 600;padding: 0rem 0.5rem;}
      .late ul{padding:0px;}
      .late ul li{border-bottom: 1px solid #aaaaaa;padding:10px 5px;}
      .late ul li:last-child{border: none;}
      .late ul li a {display: block;color:black;font-size: 15px;font-weight: 500;text-transform:lowercase;}
      .late ul li a:hover {display: block;color:#fefefe;font-size: 15px;font-weight: 500;}
      .main{display: flex;justify-content: left;padding: 3rem 0rem;}
      .main .wrapper{flex: calc(75%);}
      .main .aside{flex: calc(25%);}
      .menu{display: block;}
      .menu .spip{padding: 0px;}
      .arbo a{color: #DDE1EA;}
      .medias{padding: 0rem 1rem;}
      .medias .image{background-position: center;background-size: cover;background-repeat: no-repeat;height: 70vh;overflow-y: hidden;}
      .medias .image img{width:100%;}
      .imageteam{background-position: center;background-size: cover;}
      .imageteam img{width: 100%;height: auto;}
      #myBtn {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 30px;
  z-index: 99;
  font-size: 18px;
  border: none;
  outline: none;
  background-color: rgba(221, 225, 234, 0.90);
  color: white;
  cursor: pointer;
  padding: 15px;
  border-radius: 4px;
}

#myBtn:hover {
  background-color: #555;
}

@media(max-width:768px){
   .headerlogo{
    display: flex;
    flex-direction: column;
    align-items: none;
   }
   .logo{
    width:100%;
   }
   .navbar{
    display: block;
    width:100%;
   }
   .nav-menu{
    position: fixed;
    flex-direction: column;
    background-color:#b5d1e2 ;
    width:90%;
    display: none;
    top:230px;
    gap:0;
    transition: 0.3s;
    padding: 0px;
    margin: 0px;
    z-index: 2;
   }
   .nav-item{
    width: 100%;
    margin: 0px;
    padding: 0px;
   }
   .nav-menu.active{
     display: block;
   }
   .nav-item:hover{
    background-color: white;
    display: block;
    align-items: center;
    justify-content: center;
    width:100%;
   }
   .nav-link{
    display:block;
    color :white;
   }
   .nav-link:hover{
     display: block;
     color:black;
     
   }
   
   .bars{
    display: block;
    cursor: pointer;
    
   }
   .bar{
    font-size: 34px;
   }
   .bars.active .bar:nth-child(0) {
    opacity: 0;
    transform: translateY(8px) rotate(45deg);
    transform: translateY(-8px) rotate(-45deg);
   }
   .sliders, .wrap , .slider , .slide-content{
    padding: 0;
    margin: 0;
    width: 100%;
    height: 50vh;
    overflow-x: hidden;
    overflow-y: hidden;
}
.slide{background-size: cover;background-position: center;background-repeat: no-repeat;overflow-y: hidden;}
.slide img{
    width: 100%;
    height: 40vh;
}
.slide-content{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  position: absolute;
  height: 40vh;
  top:-0%;
  margin-top: -0px;
  background-color:rgba(0,0 ,0, 0.40);
}
   .slide-content .caption{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width:90%;
    top:25%;
    transition: width 2s;
}
.arrow{cursor: pointer;position: absolute; top: -25%; margin-bottom:0%; width: 0;height: 0;border-style: solid;z-index:3;}
.title{font-size: 12px;font-weight:bold; color: #fff;}
.slide p{font-size:10px; color: #fff;opacity: 1;}
.topwarp{display: flex;justify-content: space-between; height:50vh;padding: 0px 20px;width: 100%;flex-direction: column;}
.topleft{width:100%}
.topleft h2{padding-bottom: 5px;font-size:17px; font-weight: 500;}
.topleft p{line-height:1.2rem;font-size: 10px;}
.topright{flex:1;display: none;justify-content:center;align-items: center;padding: 30px;background-position: center;
 background-repeat: no-repeat;background-size: cover;
}
.topright .img{width: 100%;}
.tophold{border-bottom:1px solid #DDE1EA;}
.hold{width: 100%;display: flex; justify-content: space-between;align-items: center;padding: 5rem 0rem;overflow-x: hidden;flex-direction: column;}
.ca{flex: calc(100%);;border: none;margin-right: 10px;}
.icons{display: flex;justify-content: center;align-items: center;width:50vw; height: 20vh;overflow: hidden;
     background-repeat: no-repeat;background-size: cover;background-position: center;
}
.icons img{width:50%;}
.catitle{font-size: 20px; font-weight: 600;margin-bottom: 1em;height: 5vh;}
.cabody{line-height: 1.2rem;overflow-x: hidden;font-size:15px;}
.midwarp{display: flex; justify-content: space-between;flex-direction: column;}
.midbody{flex:calc(100%)}
.midimg{display:block;background-repeat: no-repeat;background-size: cover;background-position: top;
    height: 35vh;border-radius: 5px 5px 5px 5px;overflow-y: hidden;margin:0rem 0rem 0rem 1rem;
}
.midimg img{width:100%;}
.midheader{margin-bottom: 2rem;}
.midcaption{margin:0rem 0rem 0rem 1rem;}
.midcaption h4{height:5vh;padding: 1rem 0rem;font-size: 17px; font-weight: 600;margin-bottom: 2rem;overflow-wrap: break-word;}
.midcaption span{font-size: 15px; font-weight: 500;margin-bottom: 0.5em 0em;}
.midcaption p{line-height: 1.5rem;font-size: 15px; font-weight: 400;}
.footer{padding: 3rem 0rem;background-color: rgba(221, 225, 234, 0.900);}
.colophon{display: flex;justify-content: space-between;flex-direction: column;}
.foot{flex:calc(100%);}
.logofoot{width:50vw;background-position: center; background-size: cover; background-repeat: no-repeat;margin-bottom: 1rem;}
.logofoot img{width: 100%;}
.ru{display: flex; justify-content: space-between;width: 100%;padding: 2rem 0rem; flex-direction: column;}
    .leftru{flex:calc(100%);margin-right: 2rem;}
    .rightru{flex:calc(100%);background-color:rgba(221, 225, 234, 0.700); justify-content: center;padding: 3rem 0rem;height: 30vh;}
    .news{display: flex;justify-content:right;flex-direction: column;}
      .leftnews{flex:calc(100%);}
      .rightnews{flex:calc(100%);}
      .rightnews .media{display: flex;justify-content: right;margin-bottom: 0.5rem;padding: 0rem 1rem;flex-direction: column;}
      .media .image{flex:calc(100%);background-position: center;background-size: cover;background-repeat: no-repeat;height: 30vh;overflow-y: hidden;}
      .media .capt{flex:calc(100%);padding:0rem 1rem}
      .contacts{display: flex;justify-content: space-between;flex-direction: column;}
    .contactcontent{flex:calc(100%)}
    .contactside{flex:calc(100%);padding:0 2rem;}
}