@font-face {
  font-family: futura medium;
  src: url("../fonts/futura/futura_medium_bt.ttf");
  font-display: swap;
}
@font-face {
  font-family: futura medium condensed;
  src: url("../fonts/futura/futura_medium_condensed_bt.ttf");
  font-display: swap;
}
@font-face {
  font-family: futura Light;
  src: url("../fonts/futura/futura_light_bt.ttf");
  font-display: swap;
}
@font-face {
  font-family: futura Bold;
  src: url("../fonts/futura/futura_Bold_font.ttf");
  font-display: swap;
}
/* Farsi fonts */

@font-face {
  font-family: farsi_bold;
  src: url("../fonts/farsi/bahij-nazanin/Bahij-Nazanin-Bold.ttf");
  font-display: swap;
}
@font-face {
  font-family: farsi_light;
  src: url("../fonts/farsi/bahij-nazanin/Bahij-Nazanin-Regular.ttf");
  font-display: swap;
}
/* End of Farsi fonts */

html{
  font-family: 'futura Light', 'farsi_bold', sans-serif;
}
body{
  overflow-x: hidden;
  font-family: 'futura Light', 'farsi_bold', sans-serif;
}
::selection{
  background-color: #124D27;
  color: #fff;
}
/* Start of Headers styles */
h2, h2 p{
  font-family: 'futura Light','farsi_bold', sans-serif;
  font-size: 35px;
  letter-spacing: 1px;
  text-transform: uppercase;
}
h3, h3 p{
  font-size: 32px;
  letter-spacing: 1px;
  text-transform: uppercase;
}
h6, h6 p{
  font-size: 24px;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-family: 'futura Light','farsi_bold', sans-serif;
}
p{
  font-size: 17px;
  font-family: 'futura Light','farsi_light', sans-serif;
}

@media screen and (max-width: 768px) {
  h2, h2 p{
    font-size: 20px;
  }
  h6, h6 p{
    font-size: 18px;
  }
  p{
    font-size: 15px;
  }
}
@media screen and (max-width: 768px) {
  h1, h1 p, h2, h2 p, h3, h3 p, h6, h6 p{
    font-family: 'futura Light','farsi_bold',, sans-serif;
  }
}
/* End of Headers styles */

/* main css */
#main{
  overflow: hidden;
}

/* End of main css */

/* Start of top bar */
.topbar{
  height: 1cm;
  padding: 10px 5% 30px 5%;
}
/* End of top bar */

/* Navbar css */
.navbar{
  background-color: #fff;
  height: 2cm;
  padding: 0 5%;
  z-index: 99;
  font-family: 'futura Light','farsi_bold', sans-serif;
  transition: .4s ease;
  /*box-shadow: 0 0 20px rgb(0 0 0 / 5%);*/
}

@media screen and (max-width: 768px) {
  .navbar{
    padding: 0 5%;
  }
}
.navbar-brand{
  color: #ffd600;
  font-size: 15px;
  letter-spacing: 1px;
  font-weight: 600;
}
.navbar-brand:hover{
  color: #ffd600;
}
.navbar .contact{
  position: relative;
  margin-left: 10px;
}
.navbar .contact a{
  font-size: 12px;
  border: 1px solid #000;
  font-weight: 300;
  text-decoration: none;
  color: #000;
  padding: 10px 10px;
  transition: .4s;
}
.navbar .contact a:hover{
  text-decoration: none;
  border: 1px solid #000;
  background-color: #000;
  color: #fff;
  transition: .4s;
}

.navbar .nav-link{
  font-family: 'futura Medium','farsi_bold', sans-serif;
  margin-top: 10px;
  padding-bottom: 10px;
  padding-top: 0px;
  padding-left: 7px;
  padding-right: 7px;
  color: #000;
  text-transform: uppercase;
  font-weight: 400;
  letter-spacing: 1px;
  font-size: 13px;
  transition: .4s;
}
.navbar .nav-item .login{
  font-size: 13px !important;
  margin-top: 0px;
  border: 2px solid tomato;
  border-radius: 50px;
  padding: 8px 15px;
  color: tomato;
}
.navbar .nav-item .login:hover{
  color: tomato !important;
}
.navbar .nav-item .signup{
  font-size: 13px !important;
  margin-top: 0px;
  border: 2px solid tomato;
  background-color: tomato;
  margin-left: 5px;
  border-radius: 50px;
  padding: 8px 15px;
  color: #fff;;
}
.navbar .nav-item .signup:hover{
  color: #fff !important;
}

.navbar .active{
  color: #ffd600;
}
.navbar .dropdown-menu{
  width: auto;
  margin-left: -13px;
  border: none;
  border-radius: 0;
  display: block;
  visibility: hidden;
  padding-top: 20px;
  padding-bottom: 0;
  margin-top: -1px;
  opacity: 0;
  transition: .2s ease-out;
  box-shadow: -1px 10px 20px -15px rgba(0,0,0,0.86);
  -webkit-box-shadow: -1px 10px 20px -15px rgba(0,0,0,0.86);
  -moz-box-shadow: -1px 10px 20px -15px rgba(0,0,0,0.86);
}

.navbar .nav-item:hover>.dropdown-menu{
  visibility: visible;
  opacity: 1;
  margin-top: -1px;
  transition: .2s ease-out;
}
.dropdown-menu .dropdown-item{
  font-family: 'futura Light', 'farsi_light', sans-serif;
  font-size: 14px;
  letter-spacing: 1px;
  padding: 20px 20px;
  transition: .4s;
}
.dropdown-menu .dropdown-item:hover{
  background-color: #000;
  color: #fff;
  transition: .4s;
}

.navbar .nav-item:hover>.nav-link{
  color: #9ed0b2;
  transition: .4s;
}
.navbar .nav-link:hover{
  color: #9ed0b2;
  transition: .4s;
}

.navbar .logo-image{
  border-radius: 5%;
  background-color: #fff;
  margin-top: 10px;
  padding: 10px;
  position: absolute;
  top: 0;
  left: 5%;
}


.menu-button{
  position: fixed;
  top: 0;
  right: 10px;
  border-radius: 50px;
  display: none;
  transform: scale(0.6);
  z-index: 100;
}


.menu-button label{
  display:flex;
  flex-direction:column;
  cursor:pointer;
  padding: 19px 12px 13px 12px;
  width: 85px;
}

.menu-button label span{
  background: #000;
  height: 2px;
  margin: 5px 0 5px 5px;
  transition: .4s  cubic-bezier(0.68, 1.5, 0.32, 1.6);
}
.menu-button span:nth-of-type(1){
  width:50%;

}

.menu-button span:nth-of-type(2){
  width:100%;
}


.menu-button span:nth-of-type(3){
  width:75%;

}


.menu-button input[type="checkbox"]{
  display:none;
}


.menu-button input[type="checkbox"]:checked ~ span:nth-of-type(1){
  transform-origin:bottom;
  transform:rotatez(45deg) translate(4px,4px)
}


.menu-button input[type="checkbox"]:checked ~ span:nth-of-type(2){
  width: 95%;
  transform-origin:top;
  transform:rotatez(-45deg) translate(-5px,-2px);
}


.menu-button input[type="checkbox"]:checked ~ span:nth-of-type(3){
  transform-origin:bottom;
  width:50%;
  transform: translate(16px,-2px) rotatez(45deg);

}

@media screen and (max-width: 991px) {
  .menu-button{
    display:block;
  }
}

.sidebar{
  background-color: #fff;
  width: 100%;
  height: 120%;

  top: 0;
  z-index: 98;
  text-align: left;
  padding: 100px 30px;
  position: fixed;
  overflow-y: auto;
  display: none;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
.sidebar-open{
  margin-left: 0;
  width: 100%;
}
.sidebar .sidebar-content{
  margin-top: 30px;
  color: #fff;
  font-weight: 100;
  scroll-behavior: smooth;
  transition: .4s;
}
.sidebar .sidebar-content .plus{
  text-align: right;
  font-size: 18px;
  margin-top: -5px;
  position: absolute;
  right: 8%;
}
.sidebar .sidebar-content .sidebar-item{

}
.sidebar .sidebar-content ul li{
  list-style: none;
  margin-left: -30px;
  margin-bottom: 30px;
  color: #000;
  font-family: 'futura Medium', sans-serif;
  text-align: left;
  letter-spacing: 1px;
  font-size: 16px;
  transition: .4s;
}
.sidebar .sidebar-content ul li a{

  color: #000;
  font-family: 'futura Bold', sans-serif;
  text-align: left;
  letter-spacing: 1px;
  font-size: 16px;
  transition: .4s;
}
.sidebar .sidebar-content .sidebar-link:hover{
  background-color: rgba(255, 255, 255, 0.6);
  text-decoration: none;
  color: #0a2127;
  transition: .4s;
}
.sidebar .sidebar-content .sidebar-submenu{

}
.sidebar .sidebar-content .sidebar-submenu ul{
  padding: 10px 0;
}
.sidebar .sidebar-content .sidebar-submenu ul li{
  margin-left: 0;
  margin-bottom: -10px;
}
.sidebar .sidebar-content .sidebar-submenu ul li a{
  color: #000;
  font-family: 'futura Light', sans-serif;
  text-align: left;
  letter-spacing: 1px;
  font-size: 16px;
  transition: .4s;
}
.sidebar .social-icons{
  text-align: center;
  color: #fff;
  display: inline-flex;
  padding: 30px 10px;
}
.sidebar .social-icons .mdi{
  font-size: 25px;
  margin-right: 8px;
}
.sidebar .social-icons svg{
  fill: #fff;
  transition: 0.4s;
}

.sidebar .social-icons svg:hover{

  fill: #ffd600;
}

.sidebar .call-us h6{
  color: #ffd600;
  font-size: 14px;
  text-transform: uppercase;
  font-weight: 300;
}
.sidebar .call-us h6 a{
  color: #ffd600;
  font-size: 16px;
  text-transform: uppercase;
  font-weight: 400;
}
@media screen and (min-width: 992px) {
  .sidebar{
    display: none !important;
  }
}


/* End of navbar CSS */
/* Footer CSS */
.footer{
  padding: 30px 5% 20px 5%;
  background-color: #124D27;
  background-position: bottom left;
  background-size: 50%;
  background-repeat: no-repeat;
  background-image: url('background-amp-edp.png');
}
.footer .mdi{
  color: #fff;
  font-size: 30px;
}
.footer .logo img{
  margin-bottom: 10px;
}
.footer .logo h6{
  color: #ffffff;
  font-family: 'futura Medium', sans-serif;
  text-transform: uppercase;
  font-size: 16px;
}
.footer .logo p{
  color: #ffffff;
  font-size: 12px;
  font-weight: 200;
}
.footer .links{
  margin-bottom: 15px;
}
.footer .links h6{
  color: #fff;
  text-transform: uppercase;
  font-size: 12px;
  font-weight: 100;
  letter-spacing: 1px;
  font-family: 'futura Medium', sans-serif;
  transition: .4s;
}
.footer .links h6:hover{
  color: #ffffff;
  text-decoration: underline;
  transition: .4s;
}
.footer .contact h6{
  color: #ffffff;
  text-transform: uppercase;
  font-size: 15px;
}
.footer .contact a{
  color: #fff;;
  font-size: 14px;
}
.footer .contact h6{
  color: #ffffff;
  text-transform: uppercase;
  font-size: 12px;
  font-weight: 100;
  letter-spacing: 1px;
}
.footer .contact p{
  color: rgba(255, 255, 255, 0.5);
  font-size: 15px;
}
.footer .parent-link{
  margin-bottom: 15px;
}
.footer .parent-link h6{
  font-family: 'futura Medium', sans-serif;
  color: #ffffff;
  text-transform: uppercase;
  font-size: 12px;
  font-weight: 100;
  letter-spacing: 1px;
}
.footer .parent-link p{
  color: #fff;
  line-height: normal;
  margin: 0;
}
.footer .parent-link p a{
  color: #fff;
  font-size: 12px;
  letter-spacing: 1px;
}
.footer .parent-link hr{
  margin: 5px 0;
  background-color: rgba(255, 255, 255, 0.3);
}
.footer .social-box .mdi{
  font-size: 25px;
  color: rgba(255, 255, 255, 0.5);
}
.footer .social-box .mdi:hover{
  color: #ffd600;
}
.footer .social-box h6{
  color: #ffffff;
  text-transform: uppercase;
  font-size: 12px;
  font-weight: 100;
  letter-spacing: 1px;
}
.footer .social-box svg{
  stroke: 1px solid #fff;
  transition: 0.4s;
}
.footer .social-box svg:hover{
  transition: 0.4s;
}
.footer hr{
  background-color: #fff;
}

.footer .lower-footer{
  color: rgba(255, 255, 255, 1);
  font-weight: 300;
  text-align: center;
  font-size: 14px;
  padding: 0 5% 25px 5%;
}
/* End of footer CSS */

/* utilities */
.bread-crumb-container{
  margin-top: -40px;
  padding: 15px;
  letter-spacing: 1px;
  font-size: 15px;
  font-weight: 100;
  color: #fff;
  background-color: #124D27;
}
.bread-crumb-container a{
  color: #fff;
  text-decoration: underline;
}

.shadow-5{
  box-shadow: 0 0 20px rgba(0,0,0,.05);
}

.no-underline{
  color: inherit;
}
.no-underline:hover{
  color: inherit;
  text-decoration: none;
}

/* Green Link */
.green-link{
  font-weight: 400;
  letter-spacing: 1px;
  text-transform:uppercase;
  margin: 40px auto;
}
.green-link a{
  padding: 15px 20px;
  border-radius: 50px;
  color: #124D27;
  font-weight: 400;
  font-size: 13px;
  background: #fff;
  border: 1px solid #124D27;
  transition: .4s ease-out;
}
.green-link a:hover{
  color: #fff;
  border: 1px solid #124D27;
  background-color: #124D27;
  text-decoration: none;
}
/* End of Green link */

.light-link{
  font-weight: 400;
  letter-spacing: 1px;
  text-transform:uppercase;
  margin: 50px auto;
}
.light-link a{
  padding: 20px 28px;
  color: #000;
  font-weight: 400;
  font-size: 13px;
  border: 1px solid #fff;
  background: #fff;
  transition: .4s ease-out;
}
.light-link a:hover{
  color: #fff;
  border: 1px solid #000;
  background-color: #000;
  text-decoration: none;
}

.global-link{
  font-weight: 400;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin: 50px auto;
}
.global-link a{
  padding: 20px 28px;
  color: #fff;
  font-weight: 400;
  font-size: 13px;
  border: 1px solid #000;
  background: #000;
  transition: .4s ease-out;
}
.global-link a:hover{
  color: #000;
  border: 1px solid #fff;
  background-color: #fff;
  text-decoration: none;
}

.secondary-link{
  font-weight: 400;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin: 50px auto;
}
.secondary-link a{
  padding: 20px 28px;
  border: 1px solid #fff;
  color: #fff;
  font-weight: 400;
  font-size: 13px;
  background: none;
  transition: .4s ease-out;
}
.secondary-link a:hover{
  color: #fff;
  border: 1px solid #000;
  background-color: #000;
  text-decoration: none;
}

.general-link{
  font-weight: 400;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin: 50px auto;
}
.general-link a{
  padding: 20px 28px;
  font-size: 13px;
  border-radius: 5px;
  background-color: #ffd600;
  color: #0a2127;
  transition: .4s;
}
.general-link a:hover{
  color: #fff;
  background-color: #0a2127;
  text-decoration: none;
  transition: .4s;
}

.dark-link{
  margin: 50px auto;
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-align: center;
}
.dark-link a{
  border: 1px solid #000;
  background-color: #fff;
  color: #000;
  padding: 20px 28px;
  transition: .3s;
}
.dark-link a:hover{
  text-decoration: none;
  color: #fff;
  border: 1px solid #000;
  background-color: #000;
  transition: .3s;
}

.gold-link{
  font-weight: 300;
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-align: center;
}
.gold-link a{
  background-color: #bda211;
  border: 1px solid #bda211;
  color: #fff;
  display: inline-block;
  padding: 20px 28px;
  transition: .3s;
}
.gold-link a:hover{
  text-decoration: none;
  color: #bda211;
  background-color: #fff;
  transition: .3s;
}

.global-title{
  font-weight: 600;
  margin-bottom: 15px;
  font-size: 22px;
  text-align: center;
  text-transform: uppercase;
  margin-bottom: 20px;
}
.global-title h2{
  font-weight: 600;
  margin-bottom: 15px;
  font-size: 22px;
  text-align: center;
  text-transform: uppercase;
}
.global-text p{
  font-weight: 400;
  margin-bottom: 40px;
}

.content-container{
  padding: 20px 5%;
}


button{
  border: 1px solid #000;
  background-color: #fff;
  color: #000;
  padding: 15px 20px;
  transition: .3s;
}
button:hover{
  text-decoration: none;
  color: #fff;
  border: 1px solid #000;
  background-color: #000;
  transition: .3s;
}

/* End of utilities */



/* Home page css */
.home-banner{
  height: 700px;
  background-position: bottom;
  background-repeat: no-repeat;
  background-size: cover;
}
.home-banner .background{
  opacity: 1;
  background-position: center;
  background-repeat:no-repeat;
  background-size: contain;
  width: 100%;
  height: 700px;
  background-color: #fff;
}
.home-banner .content{

  width: 100%;
  height: 700px;
  padding: 10%;
  padding-top: 20%;
  text-align: center;
}
.home-banner .content .link-container{
  display: inline-flex;
}
.home-banner .content .link-container .home-sec-link{
  margin-left: 10px;
}
@media screen and (max-width: 576px) {
  .home-banner .content .link-container{
    display: block;
  }
  .home-banner .content .link-container .home-sec-link{
    margin-left: 0;
  }
}
.home-banner .content h1{
  padding: 2px;
  color: #fff;
  letter-spacing: 1px;
  font-weight: 300;
  font-size: 35px;
  font-family: 'futura medium','farsi_bold', sans-serif;
  text-transform: uppercase;
}
.home-banner .content h1 b{
  font-size: 35px;
  color: tomato;
}
.home-banner .content h6{
  color: #fff;
  font-weight: 200;
  letter-spacing: 1px;
  font-size: 16px;
}
.home-banner .content hr{
  background-color: rgba(255, 255, 255, 0.4);
}
@media screen and (max-width: 992px) {
  .home-banner{
    height: 600px;
    background-size:auto;
    background-position: top;
  }
  .home-banner .content{
    position: absolute;
    top: 0;
    height: 600px;
    padding: 10%;
    padding-top: 30%;
  }
}
@media screen and (max-width: 768px) {
  .home-banner{
    height: 600px;
    background-size:auto;
    background-position: top;
  }
  .home-banner .content{
    position: absolute;
    top: 0;
    height: 600px;
    padding: 5%;
    padding-top: 40%;
  }

}

.user-auth{
  background-color: #124D27;
  padding: 30px 10%;
  text-align: center;
}
.user-auth .link-container{
  display: inline-flex;
}
.user-auth .link-container .link{
  text-align: center;
}
.user-auth .link-container .link a{
  padding: 15px 20px;
  border: 1px solid tomato;
  border-radius: 50px;
  color: tomato;
  text-decoration: none;


}



/* End of Home page css */


/* Flex page */
.flex-banner{
  background-color: #f2f2f2;
  margin-top: 30px;
  height: 450px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  overflow: hidden;
}
.flex-banner .background{
  height: 450px;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media screen and (max-width: 768px) {
  .flex-banner{
    height: 350px;
  }
  .flex-banner .background-container{
    height: 350px;
  }
}


.flex-content{
  padding: 30px 5%;
  text-align: center;
  color: #000;
  font-family: 'futura Light', 'farsi_light', sans-serif;
}
.flex-content h1{
  font-size: 35px;
  font-family: 'futura Light', 'farsi_Bold', sans-serif;
  letter-spacing: 1px;
  text-transform: uppercase;
}
@media screen and (max-width: 768px) {
  .flex-content h1{
    font-size: 18px;
  }
}

.flex-content h6{
  margin-top: 10px;
  letter-spacing: 1px;
  text-align: left;
  font-weight: 100;
  font-size: 15px;
}
.flex-content p{

}

.flex-content .text{
  font-weight: 500;
  font-size: 15px;
}
@media screen and (max-width: 768px) {
  .flex-content{
    padding: 30px 5% 10px 5%;
  }
}
/* End of flex page */

/* Start of page content */
.page-content{
  padding: 40px 10%;
}
.course-detail-page{
  padding: 0px 10%;
}
.signup-page .signup-social .mdi{
  font-size: 30px;
}
.signup-page .signup-social .mdi:hover{
  color: green;
}

@media screen and (max-width: 768px) {
  .page-content{
    padding: 30px 3%;
  }
  .course-detail-page{
    padding: 0;
  }
}
/* End of page content */

/* Start of Title Text */
.TitleText{
  text-align: center;
  margin-bottom: 20px;
}
.TitleText h2{

}
.TitleText h2 p{

}
.TitleText .text{
  text-align: justify;
  margin-top: 15px;
}
.TitleText .text p{
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
  line-height: normal;
  display: inline-block;
  vertical-align: middle;
}
/* End of Title Text */

/* Start of contact-page */
.contact-page{
 background-color: #f1f4f5;
 padding: 40px 10%;
 margin-top: 40px;
}

.contact-page .contact-form label{
  font-size: 13px;
  text-transform: uppercase;
}
.contact-page .contact-form input[type=text]{
  max-width: 100%;
  width: 100%;
  height: 40px;
  box-shadow: none;
  outline: none;
  border: 1px solid #000;
  padding: 5px 15px;
  margin-bottom: 10px;
}
.contact-page .contact-form input[type=email]{
  width: 100%;
  height: 40px;
  box-shadow: none;
  outline: none;
  border: 1px solid #000;
  padding: 5px 15px;
  margin-bottom: 10px;
}
.contact-page .contact-form input[type=submit]{
  text-transform: uppercase;
  width: 100%;
  box-shadow: none;
  outline: none;
  border: 1px solid #000;
  background-color: #000;
  color: #ffffff;
  cursor: pointer;
  padding: 10px 15px;
  transition: .4s ease;
}
.contact-page .contact-form input[type=submit]:hover{
  border: 1px solid #000;
  background-color: #fff;
  color: #000;
  transition: .4s ease;
}
.contact-page .contact-form textarea{
  width: 100%;
  height: 100px;
  box-shadow: none;
  outline: none;
  border: 1px solid #000;
  padding: 5px 15px;
  margin-bottom: 10px;
}
.contact-page .contact-form select{
  width: 100%;
  height: 40px;
  box-shadow: none;
  outline: none;
  border: 1px solid #000;
  padding: 5px 15px;
  margin-bottom: 10px;
}
 .contact-page .contact-form small, .helptext{
  margin-bottom: 10px;
  font-size: 10px;
  color: dimgrey;
}

.contact-page .contact .text, .contact-page .contact .link{
 font-size: 20px;
 color: #000;
}
.contact-page .contact .link a{
  text-decoration: underline;
  color: #000;
}
/* End of contact-page */

/* Start of ClickableCard */
.ClickableCard-container{
  margin: 0;
}
.ClickableCard-container .ClickableCard{
  box-shadow: 0 0 20px rgb(0 0 0 / 8%);

  padding: 50px 30px;
  border-radius: 50px;
  color: #fff;
  height: auto;
}

.ClickableCard-container .ClickableCard .title{
  padding: 25px 20px 20px 20px;
  background-color: #fff;
  color: #000;
  border-radius: 30px;

}
.ClickableCard-container .ClickableCard .text{
  margin-top: 40px;
}
.ClickableCard-container .ClickableCard .text p{
  font-size: 19px;
  letter-spacing: 1px;
  font-family: 'futura Medium','farsi_bold', sans-serif;
}
.ClickableCard-container .ClickableCard .link{
  margin-top: 80px;
}
.ClickableCard-container .ClickableCard .link a{
  background-color: #fff;
  font-family: 'futura Bold','farsi_bold', sans-serif;
  color: #000;
  padding: 15px 40px;
  border-radius: 50px;
  text-transform: uppercase;
  letter-spacing: 2px;
}
/* End of ClickableCard */

.training-container{

}
.training-container .training-box .thumbnail{
  height: 300px;
  width: 100%;
  border-radius: 10px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.training-container .training-box .thumbnail .background{
  background-color: rgba(0, 0, 0, 0.3);
  border-radius: 10px;
  width: 100%;
  height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 70px;
  transition: .4s;
}
.training-container .training-box:hover .thumbnail .background{
  font-size: 80px;
  transition: .4s;
}
.training-container .training-box h4, .training-container .training-box p{
  transition: .4s;
}
.training-container .training-box:hover h4, .training-container .training-box:hover p{
  color: tomato;
  transition: .4s;
}


/* Start of Training video container */
.arrow-container .prev{
  position: absolute;
  bottom: -100px;
  right: 20px;
  background-color: blue;
  padding: 20px;
  color: #fff;
}
.arrow-container .next{
  position: absolute;
  bottom: -100px;
  left: 20px;
  background-color: blue;
  padding: 20px;
  color: #fff;
}

/* End of Training video container */

.card-box-container{
  margin: 5% 0;
}
.card-box-container .card-box{
  padding: 5%;
  height: 320px;
  margin: 10px;
}

/* Start of Rich text block */
.RichTextContent{
  margin-top: 40px;
}
.RichTextContent h2{
  text-align: center;
}
.RichTextContent .content ul{
  margin-left: -20px;
  margin-right: -20px;
  font-family: 'futura Light','farsi_light', sans-serif;
}
.RichTextContent .content p ul li, .RichTextContent .content p ol li, .RichTextContent .content p{
    font-family: 'futura Light','farsi_light', sans-serif;
}
.RichTextContent .content h4{

}

/* End of Rich text block */

.certificate-container{
  overflow: hidden;
  padding: 5%;
  background-repeat: no-repeat;
  background-size: 450px 250px;
  background-position: bottom left;
  background-image: url('background-amp-edp.png');
}
.certificate-container .top-row{

}
.certificate-container .top-row .logo-container{

}
.certificate-container .top-row .logo-container .usaid img{
  width: 60%;
  max-width: 60%;
  text-align: left;
}
.certificate-container .top-row .logo-container .edp img{
  width: 50%;
  max-width: 50%;
  text-align: center;
}
.certificate-container .top-row .logo-container .rop img{
  width: 60%;
  max-width: 60%;
  text-align: right;
}

.certificate-container .middle-text{
  text-transform: none;
  margin-top: 40px;
}
.certificate-container .middle-text .participant-name{
  margin-top: 50px;
  padding: 0 30px;
}
.certificate-container .middle-text .participant-name p{
  border-bottom: 1px solid #f2f2f2;
  text-transform: capitalize;
}
.certificate-container .middle-text .participant-name img{
  width: 17%;
  margin-top: -150px;
}
.certificate-container .middle-text .training-date{
  padding: 0 40px;
  margin-top: 50px;
  margin-bottom: 50px;
}
.certificate-container .middle-text .training-date .item{
  padding-bottom: 8px;
}
.certificate-container .middle-text .training-date .item p{
  text-transform: uppercase;
  font-size: 13px;
}
.certificate-container .signature{
  margin-top: -20px;
}
.certificate-container .signature .text{
  z-index: 10;
}
.certificate-container .signature .sign{

}
.certificate-container .signature .sign img{
  width: 80%;
  margin-top: -80px;
  z-index: 9;
}
.certificate-container .qrcode img{
  width: 70px;
}
@media screen and (max-width: 991px) {
  .certificate-container .middle-text h2{
    font-size: 15px;
  }
  .certificate-container .middle-text p{
    font-size: 10px;
  }
  .certificate-container .middle-text .participant-name{
    margin-top: 30px;
  }
  .certificate-container .middle-text .participant-name img{
    margin-top: -120px;
  }
  .certificate-container .middle-text .lower-text{
    margin-top: -20px;
    text-align: center;
  }

  .certificate-container .middle-text .training-date .item p{
    font-size: 10px;
  }
  .certificate-container .signature .text p{
    margin-top: -30px;
  }
  .certificate-container .signature .text p{
    font-size: 10px;
  }
  .certificate-container .signature .sign img{
    width: 50%;
    margin-top: -60px;
    z-index: 9;
  }
  .certificate-container .qrcode img{
    width: 50px;
  }
}

@media screen and (max-width: 768px) {
  .certificate-container{
    overflow: hidden;
    padding: 5% 5% -5% 5%;
    background-repeat: no-repeat;
    background-size: 200px 100px;
    background-position: bottom left;
    background-image: url('background-amp-edp.png');
  }
  .certificate-container .middle-text h2{
    font-size: 12px;
  }
  .certificate-container .middle-text p{
    font-size: 9px;
  }
  .certificate-container .middle-text .participant-name{
    margin-top: 20px;
  }
  .certificate-container .middle-text .participant-name img{
    margin-top: -80px;
  }
  .certificate-container .middle-text .lower-text{
    margin-top: -30px;
    text-align: center;
  }
  .certificate-container .middle-text .training-date .item{

    margin: -20px -35px 0 -35px;
  }

  .certificate-container .middle-text .training-date .item p{
    font-size: 7px;
  }
  .certificate-container .signature, .certificate-container .qrcode img{
    margin-top: -50px;

  }
  .certificate-container .signature .text p{
    font-size: 7px;
  }
  .certificate-container .signature .sign img{
    width: 20%;
    margin-top: -60px;
    z-index: 9;
  }
  .certificate-container .qrcode img{
    width: 40px;
  }
}