.container {
    /*box-shadow: 15px 0 15px -20px rgba(0,0,0,0.2),-20px 0 15px -20px rgba(0,0,0,0.2);*/
}
body {
    //background-color:#c2e6f1 !important;
}

@font-face {
  font-family: B Yekan;
  src: url(../fonts/B_Yekan/Yekan.ttf);
}
@font-face {
  font-family: 'Times New Roman';
  src: url('../fonts/Times New Roman/times new roman.ttf');
}
* {
    font-family:'B Yekan';
}

/*Mobile---------------*/
@media screen and (max-width:800px) {
    #menu-desktop  {
        display:none;
    }
    .gallery {
        float:none;
        text-align:center;
        clear:both;
        margin-bottom:10px;
    }
   

}
/*Desktop-------------------*/
@media screen and (min-width:800px) {
    #openMenu{
        display:none;
    }
    .gallery {
    float:left;
    margin-right:30px;
    margin-bottom:30px;
    margin-top:50px;
}

}

/*********************************************************/
#topbar{
    background-color:#01c4c8;
    color:white;
    text-align:center;
    padding:10px 5px;
    font-size:small;
}

#topbar .fa-instagram{
    margin-right:10px;
}
#topbar .fa-map-marker{
    margin-left:10px;
}
#topbar .fa{
    color:#fff;
    font-size:18px;
}

#logo{   
   max-width:300px;
}
/*********************************************************/
#menu {
        background-color:#fff;
}
#menu .row {
    padding:10px 5px;
    /*border:1px solid blue;*/
    display: flex; 
    justify-content: center;
    align-items: center;

}
/*#menu .row > div {
    border:1px solid blue;
}*/


#menu-desktop > a{
    float:right;
    display:inline-block;
    padding:10px;
    /*border:1px solid red;*/
    color:black;
}
#menu-desktop > a:hover, .dropbtn:hover{
   background-color:#e0f3f3;
   color:black;
   text-decoration:none;
   border-radius:5px;
}
#menu-desktop .dropdown {
    float:right;
}
#menu-desktop .dropbtn {
    padding:10px;   
    border:none;
    background-color:white;
    outline:none !important;
    color:black;
}

#menu-desktop .dropdown-content a{
    display:block;
    color:white;
    padding:5px;
}
#menu-desktop .dropdown-content a:hover{
    background-color:#e0f3f3;
    color:black;
    padding:5px;
    text-decoration:none;
}
#menu-desktop .dropdown-content{
    position:absolute;
    right:0px;
    z-index:1;
    background-color:#01c4c8;
    text-align:right;
    box-shadow: 0px 6px 10px 0px rgba(0,0,0,0.2);
    transition: all .5s ease;
    max-height: 0;
    overflow:hidden;   
    width:200px;
}
#menu-desktop .dropdown:hover .dropdown-content{
    max-height:200px;  
}  

/*********************************************************/
#openMenu{
    font-size: 36px;
    cursor: pointer;
    color:#01c4c8 !important;
    float:right;

}
.sidenav {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1 !important;
  top: 0;
  right: 0;
  background-color:#e0f3f3;
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 60px;
  box-shadow: 0px 10px 20px 0px rgba(0,0,0,0.2);
}
.sidenav #titr {
   background-image:linear-gradient(to bottom,#08a6d2,#01c4c8);
   padding:20px;
   text-align:center;
}
.sidenav a, .Myaccordion{
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  display: block;
  transition: 0.3s;
  text-align:right;
  color:black;
}
.Myaccordion {
    cursor:pointer;
}
.Myaccordion::after{
    content:" + ";
}
.activeAcordion::after{
    content:" - ";
}
.Myaccordion-content{
    /*display:none;*/
    background-color:white;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
}
.Myaccordion-content a:hover {
    color:#01c4c8;
}
.sidenav a:hover {
  text-decoration:none;
}

.sidenav .closebtn {
  position: absolute;
  top: 0;
  right: 10px;
  font-size: 36px;  
}
/*********************************************************/

#myCarousel1, #myCarousel2{
    width:100%;
    width:300px;
    height:auto;
    margin:auto;
    //border:5px solid #01c4c8;
    border:2px solid #e0e0e0;border-radius:5px;
    padding:10px;
}
.carousel-inner{
    margin:auto;
}
#myCarousel1 img, #myCarousel2 img{
    //width:100%;
    max-width:250px;
    height:auto;
    margin:auto;
    display:block;
}
.carousel-control {
    background:none !important;
}
.carousel-control-prev-icon {
 background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%2301c4c8' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E") !important;
}

.carousel-control-next-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%2301c4c8' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E") !important;
}
.gallery .title{
    text-align:center;
    font-size:medium;
    color:#01c4c8;
}
.gallery #carouselImg {
    width:100%;
    max-width:400px;
    height:auto;
    margin:auto;
}

/*********************************************************/
.Content{
    padding-left:30px;
    padding-right:30px;
    padding-top:0px;
    padding-bottom:20px;
    background-color:white;
    overflow:auto;
}
.Content p{
    text-align:justify;
    direction:rtl;
}
.Content h1, .Content h2, .Content h3, .Content h4{
    text-align:right;
    font-size:large;
    font-weight:bold;
}
.Content ul li {
    text-align:right;
    direction:rtl;
    margin-right:30px;
}
.Content .contentImg {
    max-width:300px;
    height:auto;
    margin:auto;
    display:block;
    margin-top:10px;
    margin-bottom:10px;
}
.video{
    max-width:350px;
    height:350px;
    margin:auto;
    margin-top:20px;
}
/*********************************************************/
#footer {
    padding:5px;
    background-color:#e0f3f3;
}
#footer p{
    margin-bottom:0px;
}
#footer > div {
    text-align:center;
    padding:10px;
}
#footer a {
    text-decoration:none;
    font-family:'Times New Roman';
}
/*********************************************************/
#copyright {
    background-color:#23a7cd;
    color:white;
    text-align:right;
    padding:10px 5px 5px 5px;
    
}
#copyright h2{   
    /*border:1px solid red;*/
    margin:0px;
    font-size:14px;
    float:right;
}
#copyright #instagram {
    color:white;
    padding-right:5px;
}
/*********************************************************/
#designby {
    text-align:center;
    background-color:white;
}

#designby span{
    font-size:smaller;
    font-family:Times New Roman;
}

#officebleaching{
    width:250px;
    height:auto;
    margin:auto;
    display:block;
}