@font-face {
  font-family: 'Material Symbols Outlined';
  font-style: normal;
  font-weight: 100 700;
}

.material-symbols-outlined {
  font-family: 'Material Symbols Outlined';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}
@font-face {
  font-family: 'Material Symbols Outlined';
  font-style: normal;
  font-weight: 100 700;
  src: url(../fonts/MaterialIcons/MaterialIconsOutlined-Regular.woff2) format('woff2');
}

.material-symbols-outlined {
  font-family: 'Material Symbols Outlined';
  font-weight: normal;
  font-style: normal;
  font-size: 204px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: rtl;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}
.material-icons {
  font-family: 'Material Symbols Outlined';
  font-weight: 300;
  font-style: normal;
  font-size: 24px; 
  display: inline-block;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: rtl;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'liga';
}

@font-face {
  font-family: dana;
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/Dana/woff2/DanaFaNum-Light.woff2') format('woff2'),  
    url('../fonts/Dana/ttf/DanaFaNum-Light.ttf')  format('truetype'),
     url('../fonts/Dana/woff/DanaFaNum-Light.woff') format('woff');  
}
@font-face {
  font-family: dana;
  font-style: normal;
  font-weight: 500;
  src: url('../fonts/Dana/woff2/DanaFaNum-Medium.woff2') format('woff2'), 
    url('../fonts/Dana/ttf/DanaFaNum-Medium.ttf')  format('truetype'),
     url('../fonts/Dana/woff/DanaFaNum-Medium.woff') format('woff'); 
}
@font-face {
  font-family: dana;
  font-style: normal;
  font-weight: 600;
  src: url('../fonts/Dana/woff2/DanaFaNum-DemiBold.woff2') format('woff2'),  
    url('../fonts/Dana/ttf/DanaFaNum-DemiBold.ttf')  format('truetype'),
     url('../fonts/Dana/woff/DanaFaNum-DemiBold.woff') format('woff'); 
}
@font-face {
  font-family: dana;
  font-style: normal;
  font-weight: 800;
  src: url('../fonts/Dana/woff2/DanaFaNum-ExtraBold.woff2') format('woff2'), 
    url('../fonts/Dana/ttf/DanaFaNum-ExtraBold.ttf')  format('truetype'),
     url('../fonts/Dana/woff/DanaFaNum-ExtraBold.woff') format('woff'); 
}
@font-face {
  font-family: dana;
  font-style: normal;
  font-weight: 900;
  src: url('../fonts/Dana/woff2/DanaFaNum-Black.woff2') format('woff2'), 
    url('../fonts/Dana/ttf/DanaFaNum-Black.ttf')  format('truetype'),
     url('../fonts/Dana/woff/DanaFaNum-Black.woff') format('woff'); 
}
@font-face {
  font-family: dana;
  font-style: normal;
  font-weight: 930;
  src: url('../fonts/Dana/woff2/DanaFaNum-ExtraBlack.woff2') format('woff2'), 
  url('../fonts/Dana/ttf/DanaFaNum-ExtraBlack.ttf')  format('truetype'),
     url('../fonts/Dana/woff/DanaFaNum-ExtraBlack.woff') format('woff'); 
}
@font-face {
  font-family: dana;
  font-style: normal;
  font-weight: 960;
  src: url('../fonts/Dana/woff2/DanaFaNum-Heavy.woff2') format('woff2'), 
  url('../fonts/Dana/ttf/DanaFaNum-ExtraBlack.ttf')  format('truetype'),
     url('../fonts/Dana/woff/DanaFaNum-Heavy.woff') format('woff');  
}

@font-face {
  font-family: dana;
  font-style: normal;
  font-weight: bold;
  src: url('../fonts/Dana/woff2/DanaFaNum-Bold.woff2') format('woff2'),
  url('../fonts/Dana/ttf/DanaFaNum-ExtraBlack.ttf')  format('truetype'),
     url('../fonts/woff/DanaFaNum-Bold.woff') format('woff'); 
}



body{
  font-family: dana;
  background: #FBFBFE;
  direction: rtl;
  color: #2C2C2C;
}

h1,h2,h3,h4,h5,h6{
  font-weight: bold;
  line-height: 1.8;
}
p{
  line-height: 1.8;
  margin-bottom: 0;
}
h1{
  font-style: 30px;
}
.navbar-brand img {
    height: 45px;
}
:root {
  
  --primary:#373871;
  --second:#4F509C;
  --gold:#D8B772;
  }

a{color: var(--primary);}

a:hover{
  text-decoration: none;
  color: var(--second);
}
a:hover,a:focus,button:hover,button:focus,.btn:hover,.btn:focus{
  outline: 0!important;
  border:0;
}

.main-menu li a{
 color: #2C2C2C;
 font-size:17px;
 font-weight: 500;
}
.main-menu li a:hover{
  color: var(--second);
}
.navbar{
  box-shadow: 0px 16px 34px rgb(79 80 156 / 9%);
  justify-content: space-between;
  background: #fbfbfe;
}
.navbar, .top-bar {
    padding: 0.3rem 5%;
}
.nav-item{
  margin:0 10px;
}
.left-button {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    flex-direction: row;

}
.btn{
  border-radius:25px;
  border:0;
  padding-right:25px;
  padding-left: 25px;
}
.btn p{
  margin-bottom: 0;
}
.btn-default{
  font-size:16px;
  color:#fff;

}
.btn-default span,.phone-box span{ 
  margin-left : 8px;
  transform: rotate(270deg);
  }
  .btn-primary{
  background: var(--primary);
  border:1px solid var(--primary);
  }
  .btn-second{
    background: var(--second);
    border:1px solid var(--second);
  }
  .btn-primary:hover{
  background: transparent;
  border:1px solid var(--primary);
  color: var(--primary);
  }
  .btn-second:hover{
    color: var(--second);
    background: transparent;
    border:1px solid var(--second);
  }
.call-btn h4{
  margin-bottom: 0;
    font-size: 17px;
}
.call-btn p{
  font-size: 12px;
  margin-block: 5px;
}
.icon-box{
  display: flex;
    justify-content: flex-start;
    text-align: right;
    align-items: center;

}
.call-btn{
  border:0;
  padding: 5px 20px;
}
.call-btn.icon-box span{ 
  margin-right : 20px;
  transform: rotate(270deg);
      -webkit-animation: coccoc-alo-circle-img-anim 1s infinite ease-in-out;
    -moz-animation: coccoc-alo-circle-img-anim 1s infinite ease-in-out;
    -ms-animation: coccoc-alo-circle-img-anim 1s infinite ease-in-out;
    -o-animation: coccoc-alo-circle-img-anim 1s infinite ease-in-out;
    animation: coccoc-alo-circle-img-anim 1s infinite ease-in-out;
}


@-moz-keyframes coccoc-alo-circle-img-anim {
    0% {
        transform: rotate(0) scale(1) skew(1deg)
    }
    10% {
        transform: rotate(-25deg) scale(1) skew(1deg)
    }
    20% {
        transform: rotate(25deg) scale(1) skew(1deg)
    }
    30% {
        transform: rotate(-25deg) scale(1) skew(1deg)
    }
    40% {
        transform: rotate(25deg) scale(1) skew(1deg)
    }
    50% {
        transform: rotate(0) scale(1) skew(1deg)
    }
    100% {
        transform: rotate(0) scale(1) skew(1deg)
    }
}

@-webkit-keyframes coccoc-alo-circle-img-anim {
    0% {
        transform: rotate(0) scale(1) skew(1deg)
    }
    10% {
        transform: rotate(-25deg) scale(1) skew(1deg)
    }
    20% {
        transform: rotate(25deg) scale(1) skew(1deg)
    }
    30% {
        transform: rotate(-25deg) scale(1) skew(1deg)
    }
    40% {
        transform: rotate(25deg) scale(1) skew(1deg)
    }
    50% {
        transform: rotate(0) scale(1) skew(1deg)
    }
    100% {
        transform: rotate(0) scale(1) skew(1deg)
    }
}

@-o-keyframes coccoc-alo-circle-img-anim {
    0% {
        transform: rotate(0) scale(1) skew(1deg)
    }
    10% {
        transform: rotate(-25deg) scale(1) skew(1deg)
    }
    20% {
        transform: rotate(25deg) scale(1) skew(1deg)
    }
    30% {
        transform: rotate(-25deg) scale(1) skew(1deg)
    }
    40% {
        transform: rotate(25deg) scale(1) skew(1deg)
    }
    50% {
        transform: rotate(0) scale(1) skew(1deg)
    }
    100% {
        transform: rotate(0) scale(1) skew(1deg)
    }
}

@keyframes coccoc-alo-circle-img-anim {
    0% {
        transform: rotate(0) scale(1) skew(1deg)
    }
    10% {
        transform: rotate(-25deg) scale(1) skew(1deg)
    }
    20% {
        transform: rotate(25deg) scale(1) skew(1deg)
    }
    30% {
        transform: rotate(-25deg) scale(1) skew(1deg)
    }
    40% {
        transform: rotate(25deg) scale(1) skew(1deg)
    }
    50% {
        transform: rotate(0) scale(1) skew(1deg)
    }
    100% {
        transform: rotate(0) scale(1) skew(1deg)
    }
}


main {
    padding-top: 115px;
}
.dropdown-item
{
  font-size: 15px!important;
  padding-top:7px!important;
  padding-bottom: 7px!important;
}
.dropdown-item:hover,.dropdown-item:focus{
  background: #fff;
}
.fixed-top {
  padding: 0;
}
.navbar-nav .dropdown-menu {
    padding: 10px 15px;
    border-radius: 10px;
  }
.hero {
  background: url('../images/circle1.svg') no-repeat 60px top;
}

.hero h1{
  color: var(--primary);
  font-size:30px;
  font-weight: 800;
  margin:50px 0;
}
.hero h2{
  font-size: 30px;
   color: var(--primary);
   font-weight: 600;
   margin-top: 45px;
}
.hero .exp{
  font-size: 22px;
  font-weight: 500;
  margin: 25px 0;
}
.hero img{
  margin:20px auto 0;
  width: 58%;
  z-index: 0;
}
.hero .btn{
  margin:20px 15px;
}
.m-45{
  margin-top: 45px;
}
.m-25{
  margin-top: 25px;
}
.m-b35{
  margin-bottom: 35px;
}
.m-0{
  margin-right: 0;
  margin-left: 0;
}
.top-feature{
  position: relative;
  background: var(--primary);
  border-radius: 20px;
  padding: 20px;
  margin-top: -20px;
  z-index: 1;
}

.top-feature span{
  color: var(--primary);
  background: #D8B772;
  padding: 8px;
    border-radius: 50%;
    min-width: 53px;
    height: 53px;
    width: 53px;
    text-align: center;
    margin-left: 20px;
}
.top-feature p{
  color: #fff;
}
.icon-box.horizontal{
  display: flex;
  margin: 15px;
  align-items: center;
}
.box-shadow{
  background: #FFFFFF;
  box-shadow: 0px 15px 67px -27px rgba(55, 56, 113, 0.09);
  border-radius: 20px;
  padding: 35px;
}
.box-shadow p{
  text-align: justify;
}
.caption{
  font-size: 28px;
  color: var(--primary);
  margin-bottom: 25px;
  line-height: 2;
  font-weight: 800;
}
.box-shadow img{
  margin-right: 25px;
}
.box-shadow .btn{
  margin:5px 0 10px 20px;
}
.blue{
  color: var(--second);
}
.image-round{
  border-radius: 20px;
}
section{
  margin-bottom: 25px;
  padding-top: 30px;
  padding-bottom: 30px;
}

.service{
  background: rgba(55, 56, 113, 0.04);
  margin-right:0;
  margin-left: 0;
}
.service .icon-box{
  margin-top:45px;
}
.service .icon-box h3{
  font-size: 21px;
  font-weight: 700;
  color: var(--primary);
}
.service ul li{
  font-size: 16px;
  line-height: 1.8;
  margin-bottom: 3px;
}
.service img{
  width: 40px;
  
}
.service .icon-box .img-box{
  border-radius: 50%;
  padding: 10px;
  background: #fff;
  margin-left: 15px;
}
.circle-bg .phone-box{
  background-image:url('../images/circles.svg');
  background-repeat: no-repeat;
  background-position:  left -70px;
}
.phone-box{
  position: relative;
  background: var(--primary);
  
  border-radius: 20px;
  padding: 20px;
  z-index: 1;
  color: #fff;
  overflow: hidden;
}
.phone-box a{
  color: #fff;
}
.phone-box  .num{
  font-weight: 600;
}

.phone-box .icon-box{
  align-items: flex-start;
}

.phone-box .icon-box .num{
  font-size:18px;
}

.circle-bg {
    background: url(../images/circle1.svg) no-repeat 94% top;
    padding-top: 90px;
}

.medium-p{
  font-weight: 600;
}
.item {
  margin-bottom: 25px;
  margin-top: 25px;
}
.item .icon-box{
  margin-bottom: 15px;
}
.item .icon-box h3{
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 0;
}
.item .icon-box p{
  font-size: 17px;
}
.item .icon-box span{
  color: #fff;
  background: var(--gold);
  font-size: 16px;
  width: 22px;
  min-width: 22px;
  height: 22px;
  border-radius: 50%;
  margin-left: 10px;
  text-align: center;
}
.phone-caption{
  display: flex;
    align-items: center;
    justify-content: center;
  font-size: 24px;
  border-bottom: 1px solid rgb(238 238 238 / 14%);
  padding-bottom: 20px;
  padding-top: 15px;
}

.img-box{
  text-align: center;
  margin:25px 10px;
}
.img-box img{
  margin-bottom: 20px;
}
.img-box .heading{
  font-size: 19px;
  font-weight: 600;
  margin-bottom: 7px;
}
.img-box .sub-heading{
  margin-top: 5px;
  font-size: 17px;
  line-height: 1.7;
}
.service .img-box img{
  margin-bottom: 0px;
}
.more{
    background: var(--primary);
    border:1px solid var(--primary);
    color: #fff;
    padding: 5px 20px;
    border-radius:25px;
    margin-top: 19px;
    display: inline-block;
    margin-right: 20px;

}
.more:hover{
    background: #fff;
    border:1px solid var(--primary);
    color: var(--primary);
  }

.white-box{
  background: #FFFFFF!important;
  box-shadow: 0px 15px 67px -27px rgba(55, 56, 113, 0.09)!important;
  border-radius: 20px;
  
}
.phone-box p:hover{ 
  color: var(--gold);
}

.white-box p,.white-box span ,.white-box a{
  color: #2C2C2C;
}
footer{
  background: var(--primary);
  color: #fff;
  padding-top: 45px;
  padding-bottom: 15px;
}

footer h4{
  font-size: 17px;
  margin-bottom: 45px;
}
footer a , footer p{
  font-size: 15px;
  color: #fff;
}
footer .space{
  display: block;
  height: 1px;
  width: 100%;
  border: 1px solid rgba(255, 255, 255, 0.07);
  margin:10px 0;
}
footer .space:last-child{
  border:0;
}
footer{
  position: relative;
}
footer:before {
    content: '';
    width: 100%;
    height: 100px;
    background:var(--primary);
    display: block;
    position: absolute;
    top: -90px;
}
footer .icon-box{
  margin:5px 0 0!important;
}
footer .links{
  padding-right: 45px;
}
footer ul {
  padding-right: 10px;
}
footer ul li {
  padding:5px 0;
}
footer ul li a{
  padding:5px 0;
}
footer ul li a:hover,footer  a:hover{
  color:var(--gold);
}
footer .icon-box span.call{
  transform: rotate(270deg);
}
footer .icon-box span{
  margin-left: 8px;
}
.copyright{
 
  border-top:1px solid rgb(253 253 253 / 19%);
  padding-top: 10px;
}
.copyright p{
   font-size: 13px;
   color: rgb(238 238 238 / 47%);
   text-align: center;
}
@media(min-width:768px)
{
  .wrapper{
    margin:0 5%;
  }
  .container-fluid{
  padding-right: 0;
  padding-left: 0;
  }
  
}
@media(min-width:1100px){
    .menu-desktop{
      display:block;
    }
    .menu-mob{
      display:none!important;
    }
}
@media(min-width:801px){
.bottom-contact{
    display: none;}
  }
@media(max-width:1099px){
    .menu-desktop{
  display: none;
}
.menu-mob{
      display:block;
    }
.navbar-nav.top-menu{
      width:100%;
      display: block;
    }
    .main-menu{
          justify-content: center;
          padding: 10px 0;
    }
    .top-box{
      border-bottom: 1px solid #dfdfdf;
    }
}
@media(max-width:1200px){

.nav-item {
    margin: 0 5px;
}

}

@media(max-width:992px){
  .width992{
    width:100%;
    -webkit-box-flex: 0;
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
  }
  .hidden-992{
    display: none;
  }
  .nav-item {
    width:30%;
    display: inline-block;
    margin: 0 2px;
  }
  .main-menu{
    display: inline-block;
    width: 100%;
  }
    .navbar-brand {
      margin-right: 0!important;
    }
    .navbar-nav .dropdown-menu{
      width: 100%;
    position: relative;
    float: right;
    }
    .hero {
    background:none;
    margin-top: 40px;
    }
    .navbar-brand img {
    height: 40px;
    }
    .top-box{
      align-items: center;
    }
    footer h4 {
    margin-bottom: 15px;
    }
    footer{
      padding-top:0;
    }
    .main-menu li a {
    font-size: 15px;
    }
}
@media(max-width:800px){
.bottom-contact{
    display: block;
    position: fixed;
    bottom: 0;
    background: #fff;
    right: 0;
    left: 0;
    margin-bottom: 0;
    padding-top: 15px;
    padding-bottom: 15px;
    border-top: 1px solid #eaeaec;
    z-index: 4;
    }
    .btn-green{
      background: #43A047;
      border: 0;
      color: #fff;
      border-radius: 25px;
      margin: 0 10px;
    }
    .btn-green span{
      margin-left: 8px;
      font-size: 20px;
    }
    .btn-green:hover{
        color:#fff;
    }
    .bottom-contact span{
      transform: rotate(270deg);
    }
  }

@media(max-width:767px){
footer .links {
    padding-right: 0;}
    .box-shadow{
      padding:20px;
    }
    
}