

@font-face {
    font-family: myriadpro-regular-webfont;
    src: local("Segoe UI, San Francisco, Roboto"),url('/fonts/myriadpro-regular-webfont.eot');
    src: local("Segoe UI, San Francisco, Roboto"),url('/fonts/myriadpro-regular-webfont.woff') format("woff");
    font-weight: 300;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: Lato-Medium-webfont;
    src: local("Segoe UI, San Francisco, Roboto"),url('/fonts/Lato-Medium-webfont.eot');
    src: local("Segoe UI, San Francisco, Roboto"),url('/fonts/Lato-Medium-webfont.woff') format("woff");
    font-weight: 600;
    font-style: normal;
    font-display: swap
} 

@font-face {
    font-family: Lato-Light-webfont;
    src: local("Segoe UI, San Francisco, Roboto"),url('/fonts/Lato-Light-webfont.eot');
    src: local("Segoe UI, San Francisco, Roboto"),url('/fonts/Lato-Light-webfont.woff') format("woff");
    font-weight: 300;
    font-style: normal;
    font-display: swap
}


*{
  margin:0;
  padding:0;
  box-sizing:border-box;
  font-family:myriadpro-regular-webfont, sans-serif;
}

div{
  padding: 0;
}
.row{
  margin: 0 !important;
}
a {
    color: #0271c0;
    text-decoration: none;
}
a {
    transition: all .2s ease-in-out;
    outline: 0 !important;
    font: inherit;
    font-size: 100%;
    vertical-align: baseline;
}
.contents {
    padding-top: 30px;
    background-color: #99999912;
}
body{
  overflow-x:hidden;
  margin-bottom: 50px;
}
.slid_menu{
  padding: 10px ;
}
.container{
    max-width: 1140px;
    margin: 0 auto;
}
/* NAVBAR */
.navbar{
  /* position:absolute; */
  top:0;
  left:0;
  width:100%;
  display:flex;
  justify-content:space-between;
  align-items:center;
  z-index:100;
  background:rgb(255, 255, 255);
  backdrop-filter:blur(10px);
}

.logo{
  display: flex;
  justify-content: center;
  align-items: center;
} 
.logo img{
    margin-right: 10px;
}
.nav-links{
  display:flex;
  list-style:none;
}


.nav-links a{
  color:#0271c0;
  text-decoration:none;
  font-size:16px;
  transition:0.3s;
  font-weight: 300;
  font-size: 100%;
  padding: 5px 12px;
}
ul, p{
  
  margin-bottom: 0 !important;
}
.nav-links a:hover{
  
    box-shadow: inset 0 -2px 0 0 #21a9ff;

}

/* MOBILE MENU */
.menu-btn{
  display:none;
  font-size:26px;
  color:#0271c0;
  cursor:pointer;
}

/* SLIDER */
.slider{
  width:100%;
  height: 500px;
  position:relative;
  overflow:hidden;
}
/* TEXT */
.content{
  top:50%;
  width:40%;
}
.content p{
    color: #fff;
    font-family: Lato-Light-webfont,arial,sans-serif;
    font-style: normal;
    text-shadow: 3px 3px 3px rgba(0,0,0,.9);
    font-size: 2em;
    font-weight: 400;
    font-weight: 300;
}
/* PNG IMAGE */
.png-image{
  right:1%;
  width:420px;
}

/* ARROWS */
.arrow{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:50px;
  height:50px;
  border:none;
  border-radius:50%;
  background:none;
  color:#ffffff6b;
  font-size:24px;
  cursor:pointer;
  z-index:10;
}

.arrow:hover{
  color:#fff;
}

.prev{ left:3%; }
.next{ right:3%; }

/* DOTS */
.dots{
  position:absolute;
  bottom:25px;
  left:50%;
  transform:translateX(-50%);
  display:flex;
  gap:10px;
}

.dot{
  width:30px;
  height:2px;
  background:rgba(255,255,255,0.4);
  cursor:pointer;
}

.dot.active{
  background:#fff;
  transform:scale(1.2);
}

/* RESPONSIVE */
@media(max-width:900px){

  .content{
    width:70%;
  }

  .png-image{
    width:280px;
  }
}

@media(max-width:768px){

  .menu-btn{
    display:block;
  }
  .navbar{
    padding: 0 20px;
    background:#fff;
    z-index: 100000;
  }

  .nav-links{
    position:absolute;
    top:72px;
    right:0;
    flex-direction:column;
    background:#fff;
    width:100%;
    padding:20px;
    display:none;
  }
  
  .container{
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .nav-links.active{
    display:flex;
  }
  .navbar li{
    padding: 6px 2px;
  }
  .content{
    width:85%;
    left:5%;
  }

  .content p{
    font-size:18px;
  }

  .png-image{
    width:200px;
    right:0;
  }
}

@media(max-width:500px){

  .content p{
    font-size:15px;
    padding:15px;
  }

  .png-image{
    width:150px;
  }

  .middle{
    text-align: center !important;
  }
}
.slides{
  display:flex;
  height:500px;
  transition:transform 0.6s ease;
}

.slide{
  min-width:100%;
  height:100%;
  position:relative;

  /* background image here */
  background-image: var(--bg);
  background-size: cover;
  background-position: center;
}

/* dark overlay (optional but recommended) */
.slide::before{
  content:"";
  position:absolute;
  inset:0;
}

/* container holds text + image */
.container{
  position:relative;
  z-index:2;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.container_2{
  z-index:2;
  align-items:center;
  justify-content:space-between;
  gap:40px;
  max-width: 1140px;
  margin: 0 auto;
}


/* PNG image */
.png-image{
  width:540px;
  object-fit:contain;
}

/* RESPONSIVE */
@media(max-width:900px){
  .container{
    flex-direction:column-reverse;
    text-align:center;
    justify-content:center;
  }

  .png-image{
    width:70%;
  }

  .content p{
    font-size:18px;
  }
}
        .card.bg-light-danger:hover svg,
        .card.bg-light-purple:hover svg,
        .card.bg-light-primary:hover svg,
        .card.bg-light-success:hover svg,
        .card.bg-light-info:hover svg,
        .card.bg-light-warning:hover svg,
        .card.bg-light-danger:focus svg,
        .card.bg-light-purple:focus svg,
        .card.bg-light-primary:focus svg,
        .card.bg-light-success:focus svg,
        .card.bg-light-info:focus svg,
        .card.bg-light-warning:focus svg{
            transform:scale(1.1);
            transition: .3s transform cubic-bezier(.155,1.105,.295,1.12), .3s box-shadow, .3s -webkit-transform cubic-bezier(.155,1.105,.295,1.12);
        }
        .card.bg-light-danger:hover h3, .card.bg-light-danger:focus h3 {color:#a94442!important;}
        .card.bg-light-purple:hover h3, .card.bg-light-purple:focus h3 {color:#5710b2!important;}
        .card.bg-light-primary:hover h3, .card.bg-light-primary:focus h3 {color:#007bff!important;}
        .card.bg-light-success:hover h3, .card.bg-light-success:focus h3 {color:#3c763d!important;}
        .card.bg-light-info:hover h3, .card.bg-light-info:focus h3 {color:#31708f!important;}
        .card.bg-light-warning:hover h3, .card.bg-light-warning:focus h3 {color:#ff892a!important;}

        .card.rounded, .card.rounded svg, .card.card-gradient, .card.card-gradient svg{
            transition:all 0.5s ease;
            transition-property:color, transform, box-shadow;
        }
        .card.rounded a:hover, .card.rounded a:focus{text-decoration: underline;}
        .card.rounded:hover, .card.rounded:focus{
            box-shadow: 0 .5rem .7rem rgba(0,0,0,.15)!important;
            color: #31708f!important;
            background:linear-gradient(rgba(223,249,255,.7) 5%, rgba(255,255,255,1) 95%);background-repeat:no-repeat;
        }
        .card.rounded:hover svg, .card.rounded:focus svg{
            transform:scale(1.1);
            transition: .5s transform cubic-bezier(.155,1.105,.295,1.12), .5s box-shadow, .5s -webkit-transform cubic-bezier(.155,1.105,.295,1.12);
            color: #31708f!important;
        }
        .card.card-gradient:hover{
            box-shadow: 0 .5rem .7rem rgba(0,0,0,.15)!important;
            color: #856404!important;
            background:linear-gradient(rgba(255,243,205,.7) 5%, rgba(255,255,255,1) 95%);background-repeat:no-repeat;
        }
        .card.card-gradient:hover svg, .card.card-gradient:focus svg{
            transform:scale(1.1);
            transition: .5s transform cubic-bezier(.155,1.105,.295,1.12), .5s box-shadow, .5s -webkit-transform cubic-bezier(.155,1.105,.295,1.12);
            color: #856404!important;
        }
        .card.card-gradient a:hover, .card.card-gradient a:focus{text-decoration: underline;}

        @media (min-width: 320px) and (max-width: 767px){
            .table-responsive .table td .alert{text-align:left!important;}
            .rtl .table-responsive .table td .alert{text-align:right!important;}
        }
        main{padding-bottom:0px;}
        .mutabiq-branding{background:#fff;border-top:1px solid #e5e5e5;padding-bottom:50px;font-size:.875em;}
         @media (min-width: 320px) and (max-width: 1024px){
            .mutabiq-branding{padding-bottom:0px;}
            footer{margin-top:0px;}
        }
        .card-body{
          min-height: 216px;
          padding: 20px;
        }
        

        .card{
          border-radius: 4px !important;
        }

        /* select2 styles */
        .select2-container .select2-search--inline .select2-search__field{padding: 3px 0 3px 0px;}
        .form-control-select2 .select2-container .select2-selection__rendered{padding-left:10px;}
        .rtl .form-control-select2 .select2-container .select2-selection__rendered{padding-right:10px;}
        .select2-container--default .select2-selection--multiple .select2-selection__choice{margin-top:7px;}
        .select2-results{font-size:.825em;}

		.bg-dark-warning{background-color:#ffe0b7!important;}
		.hoverable{cursor:pointer;transition:all .2s ease;}
		.border-2{border-width:2px!important;}

		.rtl .dd-menu-list .dropdown-menu-right{transform: translate3d(0px, 27px, 0px) !important;}

        .upper-to-capitalize{display:inline-block;text-transform:lowercase;}
		.upper-to-capitalize::first-letter{text-transform:uppercase !important;}
    .box .box-body {
    padding: 0 20px 20px;
    min-height: 50px;
    font-size: .875em;
}
.font-weight-bold{
  font-weight: bolder;
}



footer {
    background-color: #fff;
    border-top: 1px solid #e5e5e5;
}
footer {
    font-size: .875em;
    width: 100%;
    margin-top: 30px;
    position: fixed;
    bottom: 0;
    z-index: 999;
}
footer .copyright {
    padding: 8px 0;
    width: 100%;
}