@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Arabic:wght@500&display=swap');


.layout{margin: 0px auto; padding: 0px;}
.layout img{ width:auto; height:auto; }

@media (max-width: 575px) {
  .layout img{ 
    width:100%;height: auto;
  }
}


.visit{padding:0px ;display: flex; z-index:1000 ;bottom:0px ;right:30; position: fixed;margin:0px 0px 30px 20px ;

 

}
.visit a{ display: flex; width: auto; padding:10px 26px 10px 26px ; text-align: right; font-weight:bold !important; 
  color:#fff !important ; font-size: 15px !important; text-decoration: underline; margin:0px !important;  background-color:#23ad7d ; -webkit-border-radius:100px;-ms-border-radius:100px;-o-border-radius:100px;border-radius:100px;
  box-shadow: 1px 1px 15px 1px rgba(0, 0, 0, 0.40);
  -webkit-box-shadow: 1px 1px 15px 1px rgba(0,0,0,0.40);
  font-family: 'Noto Sans Arabic', sans-serif;}
  .visit a:hover{background:#000;}


.bg-blue{background-color:#dff5ff;}
.bg-blue img{filter: brightness(0) saturate(100%) invert(59%) sepia(82%) saturate(2778%) hue-rotate(166deg) brightness(85%) contrast(91%);}

.bg-green{background-color:#defdf3;}
.bg-green img{filter: brightness(0) saturate(100%) invert(56%) sepia(68%) saturate(532%) hue-rotate(110deg) brightness(99%) contrast(95%);}

.bg-orange{background-color:#fffaec;}
.bg-orange img{filter: brightness(0) saturate(100%) invert(76%) sepia(27%) saturate(3446%) hue-rotate(329deg) brightness(104%) contrast(94%);}


.bg-green,.bg-blue,.bg-orange{
    -webkit-border-radius:10px;-ms-border-radius:10px;-o-border-radius:10px;border-radius:10px;}


    .myinfo{padding:8px 6px 8px 6px ;display: block; z-index:1000 ;bottom:0px ;left:0; position: fixed;margin:0px 0px 10px 20px ;
        background-color:#fff ;width:7%;
        -webkit-border-radius:10px;-ms-border-radius:10px;-o-border-radius:10px;border-radius:10px;
        box-shadow: 1px 1px 15px 1px rgba(0, 0, 0, 0.20);
        -webkit-box-shadow: 1px 1px 15px 1px rgba(0,0,0,0.20);
        font-family: 'Noto Sans Arabic', sans-serif;
      }
      .myinfo .contactme{ display: flex; width:auto;}
      .myinfo .contactme ul{width:100% !important;display: flex; padding:0px 0px 0px 0px !important;margin:6px 0px 0px 0px !important;}
      .myinfo .contactme ul li{ display: flex; margin:0px 0px 0px 0px !important; padding: 0px 0px 0px 0px !important;}
      .myinfo .contactme ul li a{ display:inline-block !important; padding: 6px !important; margin:0px 0px 0px 0px !important;}
      .myinfo .contactme ul li a img{ display: block; width:50% !important; height:auto !important; margin:0px auto !important;border:none !important;}
      .myinfo .contactme ul li a:last-child{margin:0px 0px 0px 8px !important;}
  
      .myinfo .titleme{ display: block; width: auto; padding:0px 0px 0px 0px ; text-align: center; font-weight:bold !important; color:#23ad7d !important ; font-size: 13px !important;}
      .myinfo .logome{ display: block; width: auto; padding:0px 0px 0px 0px !important; margin: 0px 0px 0px 0px !important;}
      .myinfo .logome a img{  height:auto !important;width:100% !important; display: block;border:none !important; padding:0px 0px 0px 0px !important; margin:0px 0px 0px 0px !important;}

      @media (max-width:500px) {

        .myinfo{width:27%;bottom:20px ;}
        .myinfo .contactme ul li a img{ width:65% !important; }
        .myinfo .titleme{ font-size: 14px !important;}
      }