@charset "UTF-8";

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  font-family: "Epilogue", sans-serif;
}

/* MOOD COLOR */

:root {
  --primary-color: #fff;
  --secondary-color: #C6DEF3;

  --hero-section-primary: #1A2B35;
  --hero-section-secondary: #263C48;

  --third-color: #fff;
  --fourth-color: #222222;

  --border-color: rgba(0, 0, 0, 0.10);
  --footer-text-color: #4D6F88;
  --footer-bg-color: linear-gradient(180deg, #C9E4ED 0%, #ABD2EF 100%);

  --table-color: #F7F7F7;
  --btn-primary: #326598;
  --banner-bg: #FAFAFA;


  --btn-close: invert(1) grayscale(100%) contrast(100%) brightness(.5)


}

.darkmode {
  --primary-color: #1B1B1B;
  --secondary-color: #263C48;

  --hero-section-primary: #1A2B35;
  --hero-section-secondary: #263C48;

  --third-color: #222222;
  --fourth-color: #fff;

  --border-color: #fff;
  --footer-text-color: #fff;
  --footer-bg-color: #263C48;

  --table-color: #222222;
  --btn-primary: #0087FF;
  --banner-bg: black;

  --btn-close: invert(1) grayscale(100%) contrast(100%) brightness(40.5)

}


#loading-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(-45deg, #1A2B35, #263C48, #537FA6);
  background-size: 400% 400%;
  animation: gradient 3s ease-in-out infinite;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

@keyframes gradient {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

.spinner {
  border: 4px solid #fff;
  border-radius: 50%;
  border-top: 4px solid #3498db;
  width: 40px;
  height: 40px;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}


.owl-carousel .nav-btn{
  height: 47px;
  position: absolute;
  width: 26px;
  cursor: pointer;
  top: 100px !important;
}

.owl-carousel .owl-prev.disabled,
.owl-carousel .owl-next.disabled{
pointer-events: none;
opacity: 0.2;
}

.owl-carousel .prev-slide{
  background: url(nav-icon.png) no-repeat scroll 0 0;
  left: -33px;
}
.owl-carousel .next-slide{
  background: url(nav-icon.png) no-repeat scroll -24px 0px;
  right: -33px;
}
.owl-carousel .prev-slide:hover{
 background-position: 0px -53px;
}
.owl-carousel .next-slide:hover{
background-position: -24px -53px;
}  



body {
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  position: relative;

}

/* html,
body {
  overflow-x: hidden;
} */

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type=number] {
  -moz-appearance: textfield;
}

.whatsapp_icon {
  position: fixed;
  bottom: 10%;
  right: 30px;
  z-index: 999;
}

.error-message {
  color: red;
  font-size: 0.875em;
  display: block;
  margin-top: 0.25em;
  font-weight: 700;
}

.up-arrow-btn {
  position: fixed;
  bottom: 20px;
  right: 50px;
  background-color: #326598;
  color: white;
  border: none;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 24px;
  z-index: 999;
  box-shadow: 0 4px 8px #17365E;
  transition: background-color 0.3s;
}

.up-arrow-btn:hover {
  background-color: #17365E;
}


.swal2-popup .swal2-styled.swal2-confirm {
  background-color: #17365E !important;
}




header {
  width: 100%;
  color: #121212;

}

header .navbar {
  width: 100%;
  height: 80px;




  .navBar {
    max-width: 1464px;
    width: 1464px;
    height: 80px;


    .navbar-collapse {
      background-color: white;

      z-index: 99;

      .navbar-nav {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 30px;


        .nav-item {

          .nav-link {
            color: var(--fourth-color);
            font-family: Epilogue;
            font-size: 14px;
            font-style: normal;
            font-weight: 500;
            line-height: 160%;
          }


          .dropdown-submenu {
            position: relative;

            a:focus-within {
              background-color: transparent;
              color: #000;
            }
          }


          .dropdown-submenu .show {
            display: none;
          }

          .dropdown-submenu:hover .show {
            display: block;
          }

          .dropdown-submenu>.dropdown-menu {
            top: 0;
            left: 100%;
            margin-top: -1px;
          }

          .dropdown-submenu .dropdown-toggle::after {
            display: none;
          }

          .dropdown-submenu .dropdown-item .fa-angle-right {
            float: right;
            margin-left: 10px;
          }

          .sign-up {
            background: var(--btn-primary);
            padding: 7px 22px;
            color: #FFF;
            text-align: center;
            font-family: Epilogue;
            font-size: 14px;
            font-style: normal;
            font-weight: 500;
            line-height: 160%;
          }

        }

        .dropdown-menu {
          background-color: var(--third-color);

          li {
            a {
              color: var(--fourth-color);

              &:hover {
                background-color: var(--fourth-color);
                color: var(--third-color);
              }
            }
          }
        }

        .dropdown-services {
          .dropdown-menu {
            li {
              a:focus-within {
                background-color: transparent;

              }

            }
          }
        }

        .hoverLine {
          position: relative;
        }

        .hoverLine::after {
          content: '';
          position: absolute;
          background-color: var(--fourth-color);
          height: 2px;
          width: 0;
          left: 0;
          bottom: 0px;
          transition: 0.3s;
        }

        .hoverLine:hover:after {
          width: 100%;
        }


        .dropdown-user {



          .btn {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 10px;

            img {
              height: 30px;
              width: 30px;
              border-radius: 50%;
            }

            span {
              color: var(--fourth-color);
            }
          }

          .dropdown-toggle::after {
            color: var(--fourth-color);
          }


          .dropdown-menu {
            min-height: 24px;
            min-width: 100%;
            padding: 0px;
            padding-top: 10px;
            background-color: var(--third-color);

            li {
              display: flex;
              align-items: center;
              padding: 5px;

              &:hover {
                background-color: var(--fourth-color);
              }

              &:hover i{
                color: var(--third-color);
              }

              i{
                color: var(--fourth-color);
              }
            }

            a {
              display: flex;
              gap: 10px;
              justify-content: flex-start;
              align-items: flex-start;
              padding-top: 0px;
              font-family: Epilogue;
              font-size: 12px;
              font-style: normal;
              font-weight: 500;
              line-height: 160%;
              color: var(--fourth-color);

              &:focus-within {
                background-color: transparent;
              }



              .fa-repeat {
                margin-top: 3px;
              }

              .fa-arrow-right-from-bracket {
                color: #f10707;
                margin-top: 3px;

              }
            }

            .exit {
              color: #f10707;
            }

          }

        }

        .dropdown-lang {
          .dropdown-menu {
            min-height: 24px;
            min-width: 51px;
            padding: 0px;
          }

        }


      }
    }
  }
}

/* -------------- BUTTON -------------- */
.mood-btn {
  width: 4em;
  height: 2em;
  border-radius: 10em;
  padding: 0 0.5em;
  box-shadow: inset 0 8px 60px rgba(0, 0, 0, 0.1), inset 0 8px 8px rgba(0, 0, 0, 0.1), inset 0 -4px 4px rgba(0, 0, 0, 0.1);
  position: relative;
  display: flex;
  align-items: center;
  cursor: pointer;
}

.mood-btn .btn__indicator {
  background-color: #fff;
  width: 1em;
  height: 1em;
  border-radius: 50%;
  position: absolute;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.2);
  transition: transform 0.3s ease;
}

.mood-btn .btn__indicator .btn__icon-container {
  display: flex;
  flex-direction: none;
  flex-wrap: none;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}

.mood-btn .btn__indicator .btn__icon-container .btn__icon {
  color: #FFDE59;
  font-size: 1rem;
}

/* -------------- ANIMATION ------------ */
.btn__icon.animated {
  animation: spin 0.5s;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* -------------- DARKMODE -------------- */
body {
  background-color: var(--primary-color) !important;
}

.navbar-collapse.darkmode {
  background-color: #1B1B1B !important;
}

.nav_link.darkmode {
  color: white;
}

.navbar-toggler {
  border-color: var(--fourth-color) !important;
}


body.darkmode .btn__indicator {
  transform: translateX(2em);
  background-color: #000;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.3);
}

body.darkmode .btn {
  box-shadow: inset 0 8px 60px rgba(0, 0, 0, 0.3), inset 8px 0 8px rgba(0, 0, 0, 0.3), inset 0 -4px 4px rgba(0, 0, 0, 0.3);
}

body.darkmode .btn__icon {
  color: #000;
}

section {
  height: 100%;
}

.content {
  display: flex;
  flex-direction: none;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  height: 616px;
  width: 100%;
  background: var(--secondary-color);
  position: relative;
}

.container {
  display: flex;
  flex-direction: none;
  flex-wrap: none;
  justify-content: center;
  align-items: center;
  max-width: 1200px;
  width: 1200px;
}

.container .row {
  max-width: 1200px;
  width: 1200px;
}

.content .home-text {
  max-width: 1200px;
  width: 1200px;
}

.content .home-text .animate-text {
  margin: 0;
  overflow: hidden;
  max-width: 621px;
}

.content .home-text .animate-text span {
  color: var(--fourth-color);
  font-family: Epilogue;
  font-size: 40px;
  font-style: normal;
  font-weight: 700;
  line-height: 160%;
  display: inline-block;
  display: none;
}

.content .home-text .animate-text span.text-in {
  display: block;
  animation: textIn 0.5s ease;
}

/* .content .home-text .animate-text span.text-out {
    display: block;
    animation: textOut .5s ease;
} */

/* slide homepage */
.carouselBox {
  display: flex;
  flex-direction: none;
  flex-wrap: none;
  justify-content: center;
  align-items: center;
  max-width: 545px;
  height: 400px;
  position: absolute;
  z-index: 11;
  top: 5%;
  right: 10%;

}

.carouselBox .carousel-bg-dots{
  position: absolute;
  z-index: 99999;
  top: -45px;
  left: -45px;
}

.carouselBox .carousel-bg-dots2{
  position: absolute;
  z-index: 99999;
  bottom: -45px;
  right: -45px;
}

.carouselBox .carousel-item img {
  width: 545px;
  height: 400px;
}

@keyframes textIn {
  0% {
    transform: translateY(100%);
  }

  100% {
    transform: translateY(0%);
  }
}

@keyframes textOut {
  0% {
    transform: translateY(0%);
  }

  100% {
    transform: translateY(-100%);
  }
}

.content .home-text .btn-content {
  display: flex;
  flex-direction: none;
  flex-wrap: none;
  justify-content: center;
  align-items: center;
  height: 44px;
  width: 145px;
  background: var(--btn-primary);
  color: #FFF;
  text-align: center;
  font-family: Epilogue;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 160%;
  position: relative;
  border: none;
  text-decoration: none;
}

.content .home-text .btn-content:hover {
  background-color: #537FA6;
}

.btn-content i {
  transition: transform 0.3s ease;
  margin-left: 10px;
}

.btn-content:hover i {
  transform: translateX(10px);
}

/* The Modal of Sertificat  */
#myModalSertificat {

  .modal-content {
    background-color: var(--banner-bg);
  }

  .modal-header {
    border-bottom: transparent;
    padding-bottom: 0px;

    .modal-title {
      color: var(--fourth-color);
      font-family: Epilogue;
      font-size: 24px;
      font-style: normal;
      font-weight: 700;
      line-height: 160%;
      padding-left: 4px;
    }

    .btn-close {
      margin-right: 5px;
      margin-bottom: 5px;
      filter: var(--btn-close);
    }
  }

  .modal-body {
    padding-bottom: 0px;
    padding-left: 24px;
    padding-right: 24px;

    p {
      color: var(--fourth-color);
      font-family: Epilogue;
      font-size: 14px;
      font-style: normal;
      font-weight: 400;
      line-height: 180%;
    }

    form {
      .form-control {
        border-radius: 2px 0px 0px 2px;
        border: 1px solid var(--border-color);
        background: var(--third-color);
        color: var(--fourth-color);

        &:focus-within {
          box-shadow: none;
        }
      }

      .form-control::placeholder {
        color: var(--fourth-color);
        font-family: Epilogue;
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: 160%;
      }

      #validation {
        color: red;
        font-size: 12px;
      }

      .btn {
        width: 100%;
        color: #FFF;
        text-align: center;
        font-family: Epilogue;
        font-size: 14px;
        font-style: normal;
        font-weight: 500;
        line-height: 160%;
        height: 44px;
        flex-shrink: 0;
        background: #34679A;
        border: none;
        border-radius: 0px;
        display: flex;
        justify-content: center;
        align-items: center;

        &:focus-within {
          background-color: #34679A;
        }

        &:hover {
          background: #537FA6;
        }
      }
    }
  }

  .modal-footer {
    border-top: transparent;
    padding-top: 0px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}

/* The Modal of Exit Question  */
#myModalExitQuestion .modal-content {
  width: 233px;
  height: 125px;
  background-color: var(--third-color);
}

#myModalExitQuestion .modal-content .modal-header {
  border-bottom: transparent;
  padding-bottom: 0px;
  padding-left: 12px;
  padding-right: 12px;
}

#myModalExitQuestion .modal-content .modal-header .modal-title {
  color: #111;
  font-family: Epilogue;
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: 160%;
}

#myModalExitQuestion .modal-content .modal-header .btn-close {
  margin-right: 5px;
  margin-bottom: 5px;
  filter: var( --btn-close);
}

#myModalExitQuestion .modal-content .modal-body {
  padding-left: 12px;
  padding-right: 12px;
  padding-top: 0px;
}

#myModalExitQuestion .modal-content .modal-body p {
  color: rgba(17, 17, 17, 0.65);
  font-family: Epilogue;
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 160%;
  margin-bottom: 0px;
}

#myModalExitQuestion .modal-content .modal-footer {
  display: flex;
  flex-direction: none;
  flex-wrap: none;
  justify-content: space-around;
  align-items: center;
  border-top: transparent;
  padding-top: 0px;
}

#myModalExitQuestion .modal-content .modal-footer .yes {
  display: flex;
  flex-direction: none;
  flex-wrap: none;
  justify-content: center;
  align-items: center;
  width: 98.5px;
  height: 36px;
  padding: 4px 22px;
  background: #F00;
  color: #FFF;
  text-align: center;
  font-family: Epilogue;
  font-size: 12px;
  font-style: normal;
  font-weight: 500;
  line-height: 160%;
  border-radius: 0px;
}

#myModalExitQuestion .modal-content .modal-footer .no {
  color: rgba(17, 17, 17, 0.65);
  text-align: center;
  font-family: Epilogue;
  font-size: 12px;
  font-style: normal;
  font-weight: 500;
  line-height: 160%;
}

/* The Modal of Remove Question  */
#myModalRemoveQuestion .modal-content {
  width: 233px;
  background-color: var(--third-color);
}

#myModalRemoveQuestion .modal-content .modal-header {
  border-bottom: transparent;
  padding-bottom: 0px;
  padding-left: 12px;
  padding-right: 12px;
}

#myModalRemoveQuestion .modal-content .modal-header .modal-title {
  color: #111;
  font-family: Epilogue;
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: 160%;
}

#myModalRemoveQuestion .modal-content .modal-header .btn-close {
  margin-right: 5px;
  margin-bottom: 5px;
  filter: var( --btn-close);
}

#myModalRemoveQuestion .modal-content .modal-body {
  padding-left: 12px;
  padding-right: 12px;
  padding-top: 0px;
}

#myModalRemoveQuestion .modal-content .modal-body p {
  color: rgba(17, 17, 17, 0.65);
  font-family: Epilogue;
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 160%;
  margin-bottom: 0px;
}

#myModalRemoveQuestion .modal-content .modal-footer {
  display: flex;
  flex-direction: none;
  flex-wrap: none;
  justify-content: space-around;
  align-items: center;
  border-top: transparent;
  padding-top: 0px;
}

#myModalRemoveQuestion .modal-content .modal-footer .yes {
  display: flex;
  flex-direction: none;
  flex-wrap: none;
  justify-content: center;
  align-items: center;
  width: 98.5px;
  height: 36px;
  padding: 4px 22px;
  background: #F00;
  color: #FFF;
  text-align: center;
  font-family: Epilogue;
  font-size: 12px;
  font-style: normal;
  font-weight: 500;
  line-height: 160%;
  border-radius: 0px;
}

#myModalRemoveQuestion .modal-content .modal-footer .no {
  color: rgba(17, 17, 17, 0.65);
  text-align: center;
  font-family: Epilogue;
  font-size: 12px;
  font-style: normal;
  font-weight: 500;
  line-height: 160%;
}

/* The Modal of ProjectsImg  */
#myModalProjectsImg .modal-body {
  /* img {} */
}

/* The Modal of MediaPicturesImg  */
#myModalModalPicturesImg {
  /* .modal-content {} */
}

#myModalModalPicturesImg .modal-body {
  width: 800px;
  padding: 0;
  position: relative;
}

#myModalModalPicturesImg .modal-body img {
  width: 100%;
}

#myModalModalPicturesImg .modal-body .img-info {
  position: absolute;
  bottom: 0;
  left: 0;
  color: #fff;
  padding: 6px;
}

/* The Modal of Media AllPicturesImg  */
#myModalAllPicturesImg .modal-body {
  padding: 0;
}

#myModalAllPicturesImg .modal-body img {
  width: 100%;
}

/* The Modal of Media AllViedosImg  */
#myModalAllVideosImg .modal-body {
  display: flex;
  flex-direction: none;
  flex-wrap: none;
  justify-content: center;
  align-items: center;
  padding: 20px;
  width: 100%;
}

#myModalAllVideosImg .modal-body img {
  width: 100%;
}

/* The Modal of Sign In  */
#myModalSignIn .modal-header {
  border-bottom: transparent;
  padding-bottom: 0px;
}

#myModalSignIn .modal-content {
  background-color: var(--third-color);
}

#myModalSignIn .modal-header .modal-title {
  color: var(--fourth-color);
  font-family: Epilogue;
  font-size: 24px;
  font-style: normal;
  font-weight: 700;
  line-height: 160%;
  padding-left: 4px;
}

#myModalSignIn .modal-header .btn-close {
  margin-right: 5px;
  margin-bottom: 5px;
  filter: var( --btn-close);
}

#myModalSignIn .modal-body {
  padding-bottom: 0px;
  padding-left: 24px;
  padding-right: 24px;
}

#myModalSignIn .modal-body p {
  color: var(--fourth-color);
  font-family: Epilogue;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 180%;
}

#myModalSignIn .modal-body form .form-control {
  border-radius: 2px 0px 0px 2px;
  border: 1px solid var(--border-color);
  background: var(--third-color);
}

#myModalSignIn .modal-body form .form-control:focus-within {
  box-shadow: none;
}

#myModalSignIn .modal-body form .form-control::-moz-placeholder {
  color: rgba(0, 0, 0, 0.4);
  font-family: Epilogue;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 160%;
}

#myModalSignIn .modal-body form .form-control::placeholder {
  color: var(--fourth-color);
  font-family: Epilogue;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 160%;
}

#myModalSignIn .modal-body form div .pass_eye_icon_div {
  display: flex;
  flex-direction: none;
  flex-wrap: none;
  justify-content: center;
  align-items: center;
  border: 1px solid var(--border-color);
  background: var(--third-color);
}

#myModalSignIn .modal-body form div .pass_eye_icon_div .form-control {
  border: none;
  color: var(--fourth-color);
}

#myModalSignIn .modal-body form div .pass_eye_icon_div i {
  padding: 0px 10px;
  color: var(--fourth-color);
}

#myModalSignIn .modal-body form div .btn {
  width: 100%;
  text-align: center;
  height: 44px;
  flex-shrink: 0;
  background: #34679A;
  border: none;
  color: #FFF;
  font-family: Epilogue;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 160%;
  border-radius: 0px;
}

#myModalSignIn .modal-body form div .btn:focus-within {
  background-color: #34679A;
}

#myModalSignIn .modal-body form div .btn:hover {
  background: #537FA6;
}

#myModalSignIn .modal-body form .forgetpass_div {
  display: flex;
  flex-direction: none;
  flex-wrap: none;
  justify-content: space-between;
  align-items: center;
}

#myModalSignIn .modal-body form .forgetpass_div .forgetpas_div_right {
  display: flex;
  gap: 10px;
}

#myModalSignIn .modal-body form .forgetpass_div .forgetpas_div_right span {
  color: var(--fourth-color);
}

#myModalSignIn .modal-body form .forgetpass_div .forgetpas_div_right .form-check-input {
  color: var(--fourth-color);
  font-family: Roboto;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 22px;
}

#myModalSignIn .modal-body form .forgetpass_div a {
  color: #326598;
  text-align: center;
  font-family: Epilogue;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 160%;
  text-decoration: none;
  padding: 4px 22px;
}

#myModalSignIn .modal-body form .forgetpass_div a:hover {
  background-color: #ECF3FA;
}

#myModalSignIn .modal-body .divider {
  display: flex;
  flex-direction: none;
  flex-wrap: none;
  justify-content: none;
  align-items: center;
  color: #929EAE;
  text-align: center;
  font-family: Epilogue;
  font-size: 12px;
  font-style: normal;
  font-weight: 500;
  line-height: 160%;
}

#myModalSignIn .modal-body .divider::before,
#myModalSignIn .modal-body .divider::after {
  flex: 1;
  content: "";
  padding: 1px;
  background: rgba(0, 0, 0, 0.1);
  margin: 5px;
}

#myModalSignIn .modal-footer {
  display: flex;
  flex-direction: none;
  flex-wrap: none;
  justify-content: center;
  align-items: center;
  border-top: transparent;
  padding-top: 0px;
  margin-top: 12px;
  gap: 12px;
  padding-left: 24px;
  padding-right: 24px;
}

#myModalSignIn .modal-footer .socials {
  display: flex;
  flex-direction: none;
  flex-wrap: none;
  justify-content: flex-start;
  align-items: center;
  border-radius: 2px;
  border: 1px solid var(--border-color);
  background: var(--third-color);
  height: 42px;
  width: 100%;
  gap: 10px;
  padding: 10px 24px;

  cursor: pointer;
}

#myModalSignIn .modal-footer .socials span {
  color: var(--fourth-color);
}

#myModalSignIn .modal-footer .footer-div {
  display: flex;
  flex-direction: none;
  flex-wrap: none;
  justify-content: center;
  align-items: center;
}

#myModalSignIn .modal-footer .footer-div span {
  color: var(--fourth-color);
  text-align: center;
  font-family: Epilogue;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 160%;
}

#myModalSignIn .modal-footer .footer-div a {
  color: #326598;
  text-align: center;
  font-family: Epilogue;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 160%;
  text-decoration: none;
  padding: 4px 8px;
}

#myModalSignIn .modal-footer .footer-div a:hover {
  background-color: #ECF3FA;
}

/* The Modal of Forget Pass  */
#myModalForgetPass .modal-header {
  border-bottom: transparent;
  padding-bottom: 0px;
}

#myModalForgetPass .modal-header a {
  display: flex;
  flex-direction: none;
  flex-wrap: none;
  justify-content: center;
  align-items: center;
  gap: 10px;
  color: #326598;
  text-align: center;
  font-family: Epilogue;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 160%;
  text-decoration: none;
  padding: 4px 8px;
}

#myModalForgetPass .modal-header a:hover {
  background-color: #ECF3FA;
}

#myModalForgetPass .modal-header .btn-close {
  margin-right: 5px;
  margin-bottom: 5px;
  filter: var( --btn-close);
}

#myModalForgetPass .modal-title {
  color: #17365E;
  font-family: Epilogue;
  font-size: 24px;
  font-style: normal;
  font-weight: 700;
  line-height: 160%;
  padding-left: 24px;
}

#myModalForgetPass .modal-body {
  padding-bottom: 0px;
  padding-left: 24px;
  padding-right: 24px;
}

#myModalForgetPass .modal-body p {
  color: #929EAE;
  font-family: Epilogue;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 180%;
}

#myModalForgetPass .modal-body form .form-control {
  border-radius: 2px 0px 0px 2px;
  border: 1px solid var(--border-color);
  background: #FAFAFA;
}

#myModalForgetPass .modal-body form .form-control:focus-within {
  box-shadow: none;
}

#myModalForgetPass .modal-body form .form-control::-moz-placeholder {
  color: rgba(0, 0, 0, 0.4);
  font-family: Epilogue;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 160%;
}

#myModalForgetPass .modal-body form .form-control::placeholder {
  color: rgba(0, 0, 0, 0.4);
  font-family: Epilogue;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 160%;
}

#myModalForgetPass .modal-body form .btn {
  width: 100%;
  color: #FFF;
  text-align: center;
  font-family: Epilogue;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 160%;
  height: 44px;
  flex-shrink: 0;
  background: #34679A;
  border: none;
  border-radius: 0px;
}

#myModalForgetPass .modal-body form .btn:focus-within {
  background-color: #34679A;
}

#myModalForgetPass .modal-body form .btn:hover {
  background: #537FA6;
}

#myModalForgetPass .modal-footer {
  display: flex;
  flex-direction: none;
  flex-wrap: none;
  justify-content: center;
  align-items: center;
  border-top: transparent;
  padding-top: 0px;
}

/* The Modal of Pass Boxs  */
#myModalPassBoxs .modal-header {
  border-bottom: transparent;
  padding-bottom: 0px;
}

#myModalPassBoxs .modal-header a {
  display: flex;
  flex-direction: none;
  flex-wrap: none;
  justify-content: center;
  align-items: center;
  gap: 10px;
  color: #326598;
  text-align: center;
  font-family: Epilogue;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 160%;
  text-decoration: none;
  padding: 4px 8px;
}

#myModalPassBoxs .modal-header a:hover {
  background-color: #ECF3FA;
}

#myModalPassBoxs .modal-header .btn-close {
  margin-right: 5px;
  margin-bottom: 5px;
  filter: var( --btn-close);
}

#myModalPassBoxs .modal-title {
  color: #17365E;
  font-family: Epilogue;
  font-size: 24px;
  font-style: normal;
  font-weight: 700;
  line-height: 160%;
  padding-left: 24px;
}

#myModalPassBoxs .modal-body {
  padding-bottom: 0px;
  padding-left: 24px;
  padding-right: 24px;
}

#myModalPassBoxs .modal-body p {
  color: #929EAE;
  font-family: Epilogue;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 180%;
}

#myModalPassBoxs .modal-body form .form-control {
  border-radius: 2px 0px 0px 2px;
  border: 1px solid var(--border-color);
  background: #FAFAFA;
}

#myModalPassBoxs .modal-body form .form-control:focus-within {
  box-shadow: none;
}

#myModalPassBoxs .modal-body form .auth-pin-wrap {
  display: flex;
  flex-direction: none;
  flex-wrap: none;
  justify-content: none;
  align-items: center;
  margin-bottom: 45px;
}

#myModalPassBoxs .modal-body form .auth-pin-wrap .code-input {
  width: 61px;
  min-height: 40px;
  text-align: center;
  font-size: 20px;
  font-weight: 600;
  color: #040404;
  border-color: #e8e8e8;
  border: 1px solid #ced4da;
  border-radius: 5px;
  outline: none;
}

#myModalPassBoxs .modal-body form .auth-pin-wrap .code-input:focus {
  border: 1px solid #7667FF;
}

#myModalPassBoxs .modal-body form .auth-pin-wrap .code-input:nth-child(n+2) {
  margin-left: 15px;
}

@media (max-width: 475px) {
  #myModalPassBoxs .modal-body form .auth-pin-wrap .code-input:nth-child(n+2) {
    margin-left: 5px;
  }
}

#myModalPassBoxs .modal-body form #countdown {
  color: #537FA6;
  text-align: center;
  font-family: Epilogue;
  font-size: 12px;
  font-style: normal;
  font-weight: 600;
  line-height: 160%;
}

#myModalPassBoxs .modal-body form .form-control::-moz-placeholder {
  color: rgba(0, 0, 0, 0.4);
  font-family: Epilogue;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 160%;
}

#myModalPassBoxs .modal-body form .form-control::placeholder {
  color: rgba(0, 0, 0, 0.4);
  font-family: Epilogue;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 160%;
}

#myModalPassBoxs .modal-body form .footer-btns-div {
  display: flex;
  flex-direction: column;
  flex-wrap: none;
  justify-content: center;
  align-items: center;
  gap: 12px;
}

#myModalPassBoxs .modal-body form .footer-btns-div .btn {
  width: 100%;
  color: #FFF;
  text-align: center;
  font-family: Epilogue;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 160%;
  height: 44px;
  flex-shrink: 0;
  background: #34679A;
  border: none;
  border-radius: 0px;
}

#myModalPassBoxs .modal-body form .footer-btns-div .btn:focus-within {
  background-color: #34679A;
}

#myModalPassBoxs .modal-body form .footer-btns-div .btn:hover {
  background-color: #537FA6;
}

#myModalPassBoxs .modal-body form .footer-btns-div .btn-repeat {
  padding: 4px 8px;
  color: #326598;
  text-align: center;
  font-family: Epilogue;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 160%;
  border: none;
  background-color: #fff;
}

#myModalPassBoxs .modal-body form .footer-btns-div .btn-repeat:hover {
  background-color: #ECF3FA;
}

#myModalPassBoxs .modal-footer {
  display: flex;
  flex-direction: none;
  flex-wrap: none;
  justify-content: center;
  align-items: center;
  border-top: transparent;
  padding-top: 0px;
}

/* The Modal of Repeat Pass */
#myModalRepeatPass .modal-header {
  border-bottom: transparent;
  padding-bottom: 0px;
}

#myModalRepeatPass .modal-header a {
  display: flex;
  flex-direction: none;
  flex-wrap: none;
  justify-content: center;
  align-items: center;
  gap: 10px;
  color: #326598;
  text-align: center;
  font-family: Epilogue;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 160%;
  text-decoration: none;
  padding: 4px 8px;
}

#myModalRepeatPass .modal-header a:hover {
  background-color: #ECF3FA;
}

#myModalRepeatPass .modal-header .btn-close {
  margin-right: 5px;
  margin-bottom: 5px;
  filter: var( --btn-close);
}

#myModalRepeatPass .modal-title {
  color: #17365E;
  font-family: Epilogue;
  font-size: 24px;
  font-style: normal;
  font-weight: 700;
  line-height: 160%;
  padding-left: 24px;
}

#myModalRepeatPass .modal-body {
  padding-bottom: 0px;
  padding-left: 24px;
  padding-right: 24px;
}

#myModalRepeatPass .modal-body p {
  color: #929EAE;
  font-family: Epilogue;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 180%;
}

#myModalRepeatPass .modal-body form .form-control {
  border-radius: 2px 0px 0px 2px;
  border: 1px solid var(--border-color);
  background: #FAFAFA;
}

#myModalRepeatPass .modal-body form .form-control:focus-within {
  box-shadow: none;
}

#myModalRepeatPass .modal-body form .form-control::-moz-placeholder {
  color: rgba(0, 0, 0, 0.4);
  font-family: Epilogue;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 160%;
}

#myModalRepeatPass .modal-body form .form-control::placeholder {
  color: rgba(0, 0, 0, 0.4);
  font-family: Epilogue;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 160%;
}

#myModalRepeatPass .modal-body form div .pass_eye_icon_div {
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid var(--border-color);
  background: #FAFAFA;
}

#myModalRepeatPass .modal-body form div .pass_eye_icon_div .form-control {
  border: none;
}

#myModalRepeatPass .modal-body form div .pass_eye_icon_div i {
  padding: 0px 10px;
}

#myModalRepeatPass .modal-body form .btn {
  width: 100%;
  height: 44px;
  flex-shrink: 0;
  background: #34679A;
  border: none;
  color: #FFF;
  text-align: center;
  font-family: Epilogue;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 160%;
  border-radius: 0px;
}

#myModalRepeatPass .modal-body form .btn:focus-within {
  background-color: #34679A;
}

#myModalRepeatPass .modal-body form .btn:hover {
  background: #537FA6;
}

#myModalRepeatPass .modal-footer {
  display: flex;
  flex-direction: none;
  flex-wrap: none;
  justify-content: center;
  align-items: center;
  border-top: transparent;
  padding-top: 0px;
}


/* The Modal of OTP */

#myModalOtp {

  .container {
    padding: 0px;
  }

  .modal-header {
    border: none;
  }


  .card {
    width: 100%;
    border: none;
    height: 300px;
    box-shadow: 0px 5px 20px 0px #d2dae3;
    z-index: 1;
    display: flex;
    justify-content: center;
    align-items: center
  }


  .inputs {
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .inputs input {
    width: 40px;
    height: 40px
  }

  input[type=number]::-webkit-inner-spin-button,
  input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    margin: 0
  }

  .card-2 {
    background-color: #fff;
    padding: 10px;
    width: 100%;
    height: 100px;
    bottom: -50px;
    left: 20px;
    position: absolute;
    border-radius: 5px
  }

  .card-2 .content {
    margin-top: 50px
  }


  .form-control:focus {
    box-shadow: none;
    border: 2px solid #17365E
  }

  .modal-footer {
    border: none;
  }

  #otpSubmitBtn {
    background-color: #17365E;
  }

}

/* The Modal of Sign Up  */
#myModalSignUp .modal-header {
  border-bottom: transparent;
  padding-bottom: 0px;

  background-color: var(--third-color);
}

#myModalSignUp .modal-header .modal-title {
  color: var(--fourth-color);
  font-family: Epilogue;
  font-size: 24px;
  font-style: normal;
  font-weight: 700;
  line-height: 160%;
  padding-left: 4px;
}

#myModalSignUp .modal-header .btn-close {
  margin-right: 5px;
  margin-bottom: 5px;
  filter: var( --btn-close);
}

#myModalSignUp .modal-body {
  padding-bottom: 0px;
  padding-left: 24px;
  padding-right: 24px;

  background-color: var(--third-color);
}

#myModalSignUp .modal-body p {
  color: var(--fourth-color);
  font-family: Epilogue;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 180%;
}

#myModalSignUp .modal-body form .form-control {
  border-radius: 2px 0px 0px 2px;
  border: 1px solid var(--border-color);
  background: var(--third-color);

  color: var(--fourth-color);
}

#myModalSignUp .modal-body form .form-control:focus-within {
  box-shadow: none;
}

#myModalSignUp .modal-body form .form-control::-moz-placeholder {
  color: rgba(0, 0, 0, 0.4);
  font-family: Epilogue;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 160%;
}

#myModalSignUp .modal-body form .form-control::placeholder {
  color: var(--fourth-color);
  font-family: Epilogue;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 160%;
}

#myModalSignUp .modal-body form div .pass_eye_icon_div {
  display: flex;
  flex-direction: none;
  flex-wrap: none;
  justify-content: center;
  align-items: center;
  border: 1px solid var(--border-color);
  background: var(--third-color);
}

#myModalSignUp .modal-body form div .pass_eye_icon_div .form-control {
  border: none;
}

#myModalSignUp .modal-body form div .pass_eye_icon_div i {
  padding: 0px 10px;

  color: var(--fourth-color);
}

#myModalSignUp .modal-body form div .btn {
  width: 100%;
  text-align: center;
  height: 44px;
  flex-shrink: 0;
  background: #34679A;
  border: none;
  color: #FFF;
  font-family: Epilogue;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 160%;
  border-radius: 0px;
}

#myModalSignUp .modal-body form div .btn:focus-within {
  background-color: #34679A;
}

#myModalSignUp .modal-body form div .btn:hover {
  background: #537FA6;
}

#myModalSignUp .modal-body form .forgetpass_div {
  display: flex;
  flex-direction: none;
  flex-wrap: none;
  justify-content: space-between;
  align-items: center;
}

#myModalSignUp .modal-body form .forgetpass_div .forgetpas_div_right {
  display: flex;
  gap: 10px;
}

#myModalSignUp .modal-body form .forgetpass_div .forgetpas_div_right .form-check-input {
  color: rgba(0, 0, 0, 0.85);
  font-family: Roboto;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 22px;
}

#myModalSignUp .modal-body form .forgetpass_div a {
  color: #326598;
  text-align: center;
  font-family: Epilogue;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 160%;
  text-decoration: none;
  padding: 4px 22px;
}

#myModalSignUp .modal-body form .forgetpass_div a:hover {
  background-color: #ECF3FA;
}

#myModalSignUp .modal-body .divider {
  display: flex;
  flex-direction: none;
  flex-wrap: none;
  justify-content: none;
  align-items: center;
  color: #929EAE;
  text-align: center;
  font-family: Epilogue;
  font-size: 12px;
  font-style: normal;
  font-weight: 500;
  line-height: 160%;
}

#myModalSignUp .modal-body .divider::before,
#myModalSignUp .modal-body .divider::after {
  flex: 1;
  content: "";
  padding: 1px;
  background: rgba(0, 0, 0, 0.1);
  margin: 5px;
}

#myModalSignUp .modal-footer {
  display: flex;
  flex-direction: none;
  flex-wrap: none;
  justify-content: center;
  align-items: center;
  border-top: transparent;
  padding-top: 12px;
  gap: 12px;
  padding-left: 24px;
  padding-right: 24px;
  border-color: var(--third-color);

  background-color: var(--third-color);
}

#myModalSignUp .modal-footer .socials {
  display: flex;
  flex-direction: none;
  flex-wrap: none;
  justify-content: flex-start;
  align-items: center;
  border-radius: 2px;
  border: 1px solid var(--border-color);
  background: var(--third-color);
  height: 42px;
  width: 100%;
  gap: 10px;
  padding: 10px 24px;

  cursor: pointer;

}

#myModalSignUp .modal-footer span {
  color: var(--fourth-color);
}

#myModalSignUp .modal-footer .footer-div {
  display: flex;
  flex-direction: none;
  flex-wrap: none;
  justify-content: center;
  align-items: center;
}

#myModalSignUp .modal-footer .footer-div span {
  color: var(--fourth-color);
  text-align: center;
  font-family: Epilogue;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 160%;
}

#myModalSignUp .modal-footer .footer-div a {
  color: var(--btn-primary);
  text-align: center;
  font-family: Epilogue;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 160%;
  text-decoration: none;
  padding: 4px 8px;
}

#myModalSignUp .modal-footer .footer-div a:hover {
  background-color: #ECF3FA;
}

/* The Modal of Apply  */
#myModalApplyİnstruct .modal-content {
  width: 400px;
  background-color: var(--third-color);
  height: auto;
}

#myModalApplyİnstruct .modal-content .modal-header {
  border-bottom: transparent;
  padding-bottom: 0px;
}

#myModalApplyİnstruct .modal-content .modal-header .modal-title {
  color: var(--fourth-color);
  font-family: Epilogue;
  font-size: 18px;
  font-style: normal;
  font-weight: 600;
  line-height: 160%;
}

#myModalApplyİnstruct .modal-content .modal-header .btn-close {
  margin-right: 5px;
  margin-bottom: 5px;
  filter: var( --btn-close);
}

#myModalApplyİnstruct .modal-content .modal-body {
  padding-bottom: 0px;
  padding-top: 0px;
}

#myModalApplyİnstruct .modal-content .modal-body p {
  color: var(--fourth-color);
  font-family: Epilogue;
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 160%;
}

#myModalApplyİnstruct .modal-content .modal-body form .form-control {
  border-radius: 2px 0px 0px 2px;
  border: 1px solid var(--border-color);
  color: var(--fourth-color);
  background: var(--third-color);
}

#myModalApplyİnstruct .modal-content .modal-body form .form-control:focus-within {
  box-shadow: none;
}

#myModalApplyİnstruct .modal-content .modal-body form .form-control::-moz-placeholder {
  color: rgba(0, 0, 0, 0.4);
  font-family: Epilogue;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 160%;
}

#myModalApplyİnstruct .modal-content .modal-body form .form-control::placeholder {
  color: var(--fourth-color);
  font-family: Epilogue;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 160%;
}

#myModalApplyİnstruct .modal-content .modal-body form .btn {
  width: 100%;
  color: #FFF;
  text-align: center;
  font-family: Epilogue;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 160%;
  height: 44px;
  flex-shrink: 0;
  background: #34679A;
  border: none;
  border-radius: 0px;
}

#myModalApplyİnstruct .modal-content .modal-body form .btn:focus-within {
  background-color: #34679A;
}

#myModalApplyİnstruct .modal-content .modal-body form .btn:hover {
  background: #537FA6;
}

#myModalApplyİnstruct .modal-content .modal-footer {
  display: flex;
  flex-direction: none;
  flex-wrap: none;
  justify-content: center;
  align-items: center;
  border-top: transparent;
  padding-top: 0px;
}

/* The Modal of Environmental Document  */
#myModalEnvironmentalDoc .modal-content {
  width: 400px;
  height: auto;
  background-color: var(--third-color);
}

#myModalEnvironmentalDoc .modal-content .modal-header {
  border-bottom: transparent;
  padding-bottom: 0px;
}

#myModalEnvironmentalDoc .modal-content .modal-header .modal-title {
  color: var(--fourth-color);
  font-family: Epilogue;
  font-size: 18px;
  font-style: normal;
  font-weight: 600;
  line-height: 160%;
}

#myModalEnvironmentalDoc .modal-content .modal-header .btn-close {
  margin-right: 5px;
  margin-bottom: 5px;
  filter: var( --btn-close);
}

#myModalEnvironmentalDoc .modal-content .modal-body {
  padding-bottom: 0px;
  padding-top: 0px;
}

#myModalEnvironmentalDoc .modal-content .modal-body p {
  color: var(--fourth-color);
  font-family: Epilogue;
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 160%;
}

#myModalEnvironmentalDoc .modal-content .modal-body form .form-control {
  border-radius: 2px 0px 0px 2px;
  border: 1px solid var(--border-color);
  background: var(--third-color);

  color: var(--fourth-color);
}

#myModalEnvironmentalDoc .modal-content .modal-body form .form-control:focus-within {
  box-shadow: none;
}

#myModalEnvironmentalDoc .modal-content .modal-body form .form-control::-moz-placeholder {
  color: rgba(0, 0, 0, 0.4);
  font-family: Epilogue;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 160%;
}

#myModalEnvironmentalDoc .modal-content .modal-body form .form-control::placeholder {
  color: var(--fourth-color);
  font-family: Epilogue;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 160%;
}

#myModalEnvironmentalDoc .modal-content .modal-body form .btn {
  width: 100%;
  color: #FFF;
  text-align: center;
  font-family: Epilogue;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 160%;
  height: 44px;
  flex-shrink: 0;
  background: #34679A;
  border: none;
  border-radius: 0px;
}

#myModalEnvironmentalDoc .modal-content .modal-body form .btn:focus-within {
  background-color: #34679A;
}

#myModalEnvironmentalDoc .modal-content .modal-body form .btn:hover {
  background: #537FA6;
}

#myModalEnvironmentalDoc .modal-content .modal-footer {
  display: flex;
  flex-direction: none;
  flex-wrap: none;
  justify-content: center;
  align-items: center;
  border-top: transparent;
  padding-top: 0px;
}

/* The Modal of Apply Seminar */
#myModalApplySeminar .modal-content {
  width: 400px;
  height: auto;
  background-color: var(--third-color);


}

#myModalApplySeminar .modal-content .modal-header {
  border-bottom: transparent;
  padding-bottom: 0px;
}

#myModalApplySeminar .modal-content .modal-header .modal-title {
  color: var(--fourth-color);
  font-family: Epilogue;
  font-size: 18px;
  font-style: normal;
  font-weight: 600;
  line-height: 160%;
}

#myModalApplySeminar .modal-content .modal-header .btn-close {
  margin-right: 5px;
  margin-bottom: 5px;
  filter: var( --btn-close);
}

#myModalApplySeminar .modal-content .modal-body {
  padding-bottom: 0px;
  padding-top: 0px;

  div {
    color: var(--fourth-color);
  }
}

#myModalApplySeminar .modal-content .modal-body p {
  color: var(--fourth-color);
  font-family: Epilogue;
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 160%;
}

#myModalApplySeminar .modal-content .modal-body form .form-control {
  border-radius: 2px 0px 0px 2px;
  border: 1px solid var(--border-color);
  background: var(--third-color);

  color: var(--fourth-color);
}

#myModalApplySeminar .modal-content .modal-body form .form-control:focus-within {
  box-shadow: none;
}

#myModalApplySeminar .modal-content .modal-body form .form-control::-moz-placeholder {
  color: rgba(0, 0, 0, 0.4);
  font-family: Epilogue;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 160%;
}

#myModalApplySeminar .modal-content .modal-body form .form-control::placeholder {
  color: var(--fourth-color);
  font-family: Epilogue;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 160%;
}

#myModalApplySeminar .modal-content .modal-body form .btn {
  width: 100%;
  color: #FFF;
  text-align: center;
  font-family: Epilogue;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 160%;
  height: 44px;
  flex-shrink: 0;
  background: #34679A;
  border: none;
  border-radius: 0px;
}

#myModalApplySeminar .modal-content .modal-body form .btn:focus-within {
  background-color: #34679A;
}

#myModalApplySeminar .modal-content .modal-body form .btn:hover {
  background: #537FA6;
}

#myModalApplySeminar .modal-content .modal-footer {
  display: flex;
  flex-direction: none;
  flex-wrap: none;
  justify-content: center;
  align-items: center;
  border-top: transparent;
  padding-top: 0px;
}

/* The Modal of Apply Legislation */
#myModalLegislation .modal-dialog-centered {
  justify-content: center;
}

#myModalLegislation .modal-dialog {
  max-width: 80%;
}

#myModalLegislation .modal-content {
  background-color: var(--third-color);
}


#myModalLegislation .modal-content .modal-header {
  border-bottom: transparent;
  padding-bottom: 0px;
}


#myModalLegislation .modal-content .modal-header .modal-title {
  color: var(--fourth-color);
  font-family: Epilogue;
  font-size: 18px;
  font-style: normal;
  font-weight: 600;
  line-height: 160%;
}

#myModalLegislation .modal-content .modal-header .btn-close {
  margin-right: 5px;
  margin-bottom: 5px;

  filter: var( --btn-close);


  color: var(--fourth-color);
}

#myModalLegislation .modal-content .modal-header .btn-close span{
  color: red !important;
}

#myModalLegislation .modal-content .modal-body {
  margin-top: 20px;
  padding-bottom: 0px;
  padding-top: 0px;
  display: flex;
  overflow: auto;
  padding-bottom: 50px;
  gap: 12px;
}

#myModalLegislation .modal-content .modal-body .modal-body-left {
  min-width: 236px;
  border-right: 0.5px solid var(--border-color);
}

#myModalLegislation .modal-content .modal-body .modal-body-left ul {
  list-style: none;
  padding: 0;

  background-color: var(--third-color);
}

#myModalLegislation .modal-content .modal-body .modal-body-left ul li {
  padding: 10px 12px;
  border-bottom: 0.5px solid var(--border-color);
  background: var(--third-color);
}

#myModalLegislation .modal-content .modal-body .modal-body-left ul li a {
  text-decoration: none;
  font-family: Epilogue;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 160%;
  color: var(--fourth-color);
}

#myModalLegislation .modal-content .modal-body .modal-body-left ul li a:hover,
#myModalLegislation .modal-content .modal-body .modal-body-left ul li a:focus-within,
#myModalLegislation .modal-content .modal-body .modal-body-left ul li a.active-link {
  color: #537FA6;
}

#myModalLegislation .modal-content .modal-body .modal-body-right .link {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#myModalLegislation .modal-content .modal-body .modal-body-right .link span {
  font-weight: 600;
}

#myModalLegislation .modal-content .modal-body .modal-body-right p {
  color: var(--fourth-color) !important;
  background-color: var(--third-color) !important;
}

#myModalLegislation .modal-content .modal-body .modal-body-right p span {
  color: var(--fourth-color) !important;
  background-color: var(--third-color) !important;
}

#myModalLegislation .modal-content .modal-footer {
  display: flex;
  flex-direction: none;
  flex-wrap: none;
  justify-content: center;
  align-items: center;
  border-top: transparent;
  padding-top: 0px;
}

/* The Modal of Instructions  */
#myModalInstruc .modal-header {
  border-bottom: transparent;
  padding-bottom: 0px;
}

#myModalInstruc .modal-content {
  background-color: var(--third-color);
}

#myModalInstruc .modal-header .modal-title {
  color: var(--fourth-color);
  font-family: Epilogue;
  font-size: 24px;
  font-style: normal;
  font-weight: 700;
  line-height: 160%;
}

#myModalInstruc .modal-header .btn-close {
  margin-right: 5px;
  margin-bottom: 5px;
  filter: var( --btn-close);
}



#myModalInstruc .modal-body p {
  color: var(--fourth-color);
  font-family: Epilogue;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 160%;
}

#myModalInstruc .modal-body .ins-info {
  display: flex;
  flex-direction: none;
  flex-wrap: none;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  border-bottom: 1px solid var(--border-color);
}

#myModalInstruc .modal-body .ins-info span {
  color: var(--fourth-color);
  font-family: Epilogue;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 160%;
}

#myModalInstruc .modal-body .ins-info p {
  color: var(--fourth-color);
  font-family: Epilogue;
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: 160%;
}

#myModalInstruc .modal-body .btn-ins {
  padding: 9px 22px;
  width: 100%;
  background: var(--btn-primary);
  border: none;
  color: #FFF;
  text-align: center;
  font-family: Epilogue;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 160%;
  margin-top: 12px;
}

#myModalInstruc .modal-footer {
  display: flex;
  flex-direction: none;
  flex-wrap: none;
  justify-content: center;
  align-items: center;
  border-top: transparent;
  padding-top: 0px;

  background-color: var(--third-color) !important;
}

#myModalApplyİnstruct .btn {
  padding: 9px 22px;
  width: 100%;
  background: #326598;
  border: none;
  color: #FFF;
  text-align: center;
  font-family: Epilogue;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 160%;
  margin-top: 12px;
}

/* homepage-services*/
.homepage-services {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 40px 0px;

  .row {
    max-width: 1464px;
    width: 1464px;

    .homepage-services-top {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 24px;

      h3 {
        color: var(--fourth-color);
        font-family: Epilogue;
        font-size: 18px;
        font-style: normal;
        font-weight: 600;
        line-height: 160%;
      }

      a {
        color: var(--btn-primary);
        text-align: center;
        font-family: Epilogue;
        font-size: 14px;
        font-style: normal;
        font-weight: 500;
        line-height: 160%;
        text-decoration: none;
        padding: 4px 22px;

        &:hover {
          background-color: rgba(132, 121, 121, 0.1);
        }
      }

    }

    .services-content {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      align-items: center;



      .info-box {
        display: flex;
        height: 191px;
        width: 348px;
        padding: 60px 0px 58px 0px;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        border-radius: 4px;
        border: 1px solid var(--border-color);
        background: var(--third-color);
        text-decoration: none;

        &:hover {
          border-radius: 4px;
          border: 2px solid #326598;
          background: transparent;
          box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.15);


        }

        h4 {
          color: var(--fourth-color);
          text-align: center;
          font-family: Epilogue;
          font-size: 18px;
          font-style: normal;
          font-weight: 600;
          line-height: 160%;
        }

        p {
          color: rgba(17, 17, 17, 0.75);
          text-align: center;
          font-family: Epilogue;
          font-size: 14px;
          font-style: normal;
          font-weight: 400;
          line-height: 160%;
        }

      }
    }

  }

  .row .services-content .logo-carousel {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  }
}

/* seminar table */
.seminar-contaniner {
  display: flex;
  flex-direction: none;
  flex-wrap: none;
  justify-content: center;
  align-items: center;
  height: 300px;

  #seminar-mobile {
    display: none;
  }
}

.seminar-contaniner .row {
  max-width: 1464px;
  width: 1464px;
  align-items: flex-start;
  height: 100%;
}

.seminar-contaniner .row .seminar-left {
  display: flex;
  flex-direction: none;
  flex-wrap: none;
  justify-content: center;
  align-items: none;
}

.seminar-contaniner .row .seminar-left .table {
  height: 100%;
}

.seminar-contaniner .row .seminar-left .table thead tr th {
  color: var(--fourth-color);
  padding-left: 20px;
  padding-right: 20px;
  font-family: Epilogue;
  background: var(--table-color);
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 160%;
  height: 44px;
}

.seminar-contaniner .row .seminar-left .table thead tr th:first-child {
  border-radius: 63px 0px 0px 63px;
}

.seminar-contaniner .row .seminar-left .table thead tr th:last-child {
  border-radius: 0px 63px 63px 0px;
}


.seminar-contaniner .row .seminar-left .table tbody tr td {
  color: var(--fourth-color);
  font-family: Epilogue;
  background-color: var(--third-color);
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 160%;
  height: 48px;
}

.seminar-contaniner .row .seminar-left .table tbody tr td a {
  color: #326598;
  text-align: center;
  font-family: Epilogue;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 160%;
  text-decoration: none;
  padding: 4px 8px;
}

.seminar-contaniner .row .seminar-left .table tbody tr td a:hover {
  background-color: #ECF3FA;
}

.seminar-contaniner .row .seminar-right {
  background-color: var(--third-color);
  display: flex;
  flex-direction: column;
  flex-wrap: none;
  justify-content: center;
  align-items: center;
  gap: 20px;
  padding: 20px 0px;
}

.seminar-contaniner .row .seminar-right .seminar-right-btn {
  padding: 7px 22px;
  background: var(--btn-primary);
  color: #FFF;
  text-align: center;
  font-family: Epilogue;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 160%;
  border: none;
}

.seminar-contaniner .row .seminar-right .seminar-right-btn:hover {
  background-color: #537FA6;
}

/* comments */
.comments-contaniner {
  display: flex;
  flex-direction: none;
  flex-wrap: none;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin-top: 26px;
  height: 377px;
}

.comments-contaniner .row {
  max-width: 1464px;
  width: 1464px;
}

.comments-contaniner .row .users-content {
  display: flex;
  height: 415px;
}



.comments-contaniner .row .users-content .users {
  display: flex;
  flex-direction: column;
  flex-wrap: none;
  justify-content: none;
  align-items: none;
  width: 650px;
  overflow-y: scroll;
  scrollbar-width: none;
  position: relative;
  gap: 40px;
}

.comments-contaniner .row .users-content .users .user-box {
  display: flex;
  flex-direction: none;
  flex-wrap: none;
  justify-content: flex-start;
  align-items: center;
  width: 420px;
  height: 96px;
  gap: 12px;
  padding: 12px;
  border: 1.5px solid #d3d3d3;
  border-radius: 8px;
  cursor: pointer;
  margin-bottom: 10px;
}

.comments-contaniner .row .users-content .users .user-box img {
  border-radius: 50%;
  object-fit: cover;
}

.comments-contaniner .row .users-content .users .user-box:hover {
  border-radius: 8px;
  border: 1.5px solid #326598;
  background: transparent;
  box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.05);
}

.comments-contaniner .row .users-content .users .user-box .user-info {
  margin-top: 10px;
  display: inline-block;
  vertical-align: middle;
}

.comments-contaniner .row .users-content .users .user-box .user-info span {
  color: var(--fourth-color);
  font-family: Epilogue;
  font-size: 18px;
  font-style: normal;
  font-weight: 600;
  line-height: 160%;
}

.comments-contaniner .row .users-content .users .user-box .user-info p {
  color: var(--fourth-color);
  font-family: Epilogue;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 160%;
}

.comments-contaniner .row .users-content .users .user-box .point {
  width: 9px;
  height: 9px;
  background-color: #537FA6;
  border-radius: 50%;
  position: absolute;
  right: 5px;
  z-index: 11;
}


.comments-contaniner .row .users-content .users .user-box .point.active {
  width: 15px;
  height: 15px;
  right: 2px;
}

.comments-contaniner .row .users-content .users .user-box:nth-child(even) {
  margin-left: 100px;
}

.comments-contaniner .row .users-content .users::-webkit-scrollbar {
  display: none;
}

.comments-contaniner .row .users-content .line {
  width: 1px;
  background: #537FA6;
  position: relative;
  z-index: 1;
  margin-left: -10px;
}

.comments-contaniner .row .comments {

  display: flex;
  flex-direction: column;
  flex-wrap: none;
  justify-content: center;
  align-items: center;
  padding-left: 48px;
}

.comments-contaniner .row .comments .comment {
  background-color: var(--third-color);
  color: var(--fourth-color);
  display: none;
  width: 705px;
  height: 154px;
}

.comments-contaniner .row .comments .comment[data-user="1"] {
  display: block;
}

/* logos */
.logos {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  background-color: var(--third-color);
  margin-top: 20px;



  .logo-box {
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 1464px;
    width: 1464px;
    padding: 50px 0px;
    background-color: var(--third-color);

    .logo-carousel {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 200px;

      .item {
        margin: 10px 10px;
        width: 180px !important;
        height: 100px;
      }

      .item img {
        width: 100%;
        height: 100%;
        transition: all 0.3s ease;
        border-radius: 12px;
        background: #FFF;
        /* object-fit: cover; */
      }

      .item img:hover {
        scale: 1.1;
        border-radius: 12px;
        background: #FFF;
        box-shadow: 0px 3px 16px 0px rgba(22, 22, 22, 0.10);
      }
    }
  }

  .logo-tablet {
    display: none;
  }
}

.dropdown-lang select {
  border: 1px solid #c9c9c9;
  border-radius: 5px;
  padding: 7px;

  background-color: transparent;
  color: var(--fourth-color);

  option {
    background-color: var(--third-color);
    color: var(--fourth-color);
  }
}

.dropdown-lang select option {
  padding: 10px;
  border-radius: 2px;
}

/* Graduates */
.graduates {
  display: flex;
  flex-direction: none;
  flex-wrap: none;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.graduates .graduates-box {
  display: flex;
  flex-direction: none;
  flex-wrap: none;
  justify-content: center;
  align-items: center;
  max-width: 1464px;
  width: 1464px;
  padding: 50px 0px;
  background-color: var(--primary-color);

  h2 {
    color: var(--fourth-color);
  }
}

.graduates .graduates-box .graduates-carousel {
  display: flex;
  flex-direction: none;
  flex-wrap: none;
  justify-content: space-between;
  align-items: center;
  padding-right: 0px;
  padding-left: 0px;
}

.graduates .graduates-box .graduates-carousel .item {
  max-width: 254px;
  height: 367px;
  height: auto;
  position: relative;
  border-radius: 0px;
}

.graduates .graduates-box .graduates-carousel .item img {
  border-radius: 0px;
  display: block;
  margin: auto;
}

.graduates .graduates-box .graduates-carousel .item .img-info {
  position: absolute;
  bottom: 20px;
  left: 0;
  text-align: center;
  border-radius: 0px;
  width: 100%;
}

.graduates .graduates-box .graduates-carousel .item .img-info h4 {
  color: #FFF;
  text-align: center;
  font-family: Epilogue;
  font-size: 18px;
  font-style: normal;
  font-weight: 600;
  line-height: 160%;
}

.graduates .graduates-box .graduates-carousel .item .img-info .line {
  width: 100%;
  height: 2px;
  background-color: #fff;
}

.graduates .graduates-box .graduates-carousel .item .img-info p {
  margin-top: 8px;
}

.graduates .graduates-box .graduates-carousel .item .img-info p .point {
  margin: 5px;
}

.graduates .graduates-box .graduates-carousel .item .img-info p span {
  color: #FFF;
  font-family: Epilogue;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 160%;
}

.graduates .graduates-box .graduates-carousel .item .img-hoverText {
  display: flex;
  flex-direction: column;
  flex-wrap: none;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  opacity: 0;
  transition: 0.6s;
}

.graduates .graduates-box .graduates-carousel .item .img-hoverText:hover {
  opacity: 1;
}

.graduates .graduates-box .graduates-carousel .item .img-hoverText p {
  color: #FFF;
  text-align: center;
  font-family: Epilogue;
  font-size: 12px;
  font-style: normal;
  font-weight: 500;
  line-height: 160%;
}

.graduates .graduates-box .graduates-carousel .item .img-hoverText>* {
  transform: translateY(25px);
  transition: transform 0.6s;
}

.graduates .graduates-box .graduates-carousel .item .img-hoverText:hover>* {
  transform: translateY(0px);
}

/* Questions */
.accordion-container {
  display: flex;
  flex-direction: none;
  flex-wrap: none;
  justify-content: center;
  align-items: center;
}

.accordion-container .row {
  max-width: 1464px;
  width: 1464px;
}

.accordion-container .row .accordion-title-col .accordion-title {
  color: var(--fourth-color);
  text-align: center;
  font-family: Epilogue;
  font-size: 18px;
  font-style: normal;
  font-weight: 600;
  line-height: 160%;
}

.accordion-container .row .col-sm-12 .accordion {
  width: 100%;
  margin: auto;
}

.accordion-container .row .col-sm-12 .accordion .accordion-item {
  border: none;
  color: #111;
  border-bottom: 0.5px solid rgba(0, 0, 0, 0.1);
  background: var(--third-color);
}

.accordion-container .row .col-sm-12 .accordion .accordion-item .accordion-item-header {
  display: flex;
  flex-direction: none;
  flex-wrap: none;
  justify-content: none;
  align-items: center;
  padding: 8px 12px;
  height: 48px;
  position: relative;
  cursor: pointer;
  color: var(--fourth-color);
  font-family: Epilogue;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 160%;
}

.accordion-container .row .col-sm-12 .accordion .accordion-item .accordion-item-header::after {
  content: "+";
  font-size: 3rem;
  position: absolute;
  right: 0px;
  font-weight: 200;
}

.accordion-container .row .col-sm-12 .accordion .accordion-item .accordion-item-header.active::after {
  content: "−";
}

.accordion-container .row .col-sm-12 .accordion .accordion-item .accordion-item-body {
  border-radius: 4px;
  background: #ECF3FA;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}

.accordion-container .row .col-sm-12 .accordion .accordion-item .accordion-item-body .accordion-item-body-content {
  padding: 12px;
}

.accordion-container .row .col-sm-12 .accordion .accordion-item .accordion-item-body .accordion-item-body-content p {
  color: #414141;
  font-family: Epilogue;
  font-size: 12px;
  font-style: normal;
  font-weight: 300;
  line-height: 160%;
}

/* About Page */
.about-container {
  display: flex;
  flex-direction: none;
  flex-wrap: none;
  justify-content: center;
  align-items: center;
  background-image: url("/img/AboutBgImage.png");
  height: 160px;
  width: 100vw;
  background-position: center;
  background-size: cover;
}

.about-container .row {
  max-width: 1464px;
  width: 1464px;
}

.about-container .row .col-sm-12 h3 {
  color: #FFF;
  font-family: Epilogue;
  font-size: 32px;
  font-style: normal;
  font-weight: 500;
  line-height: 160%;
}

.about-breadcrumb {
  display: flex;
  flex-direction: none;
  flex-wrap: none;
  justify-content: center;
  align-items: center;
  background: var(--banner-bg);
  height: 60px;
}

.about-breadcrumb .row {
  max-width: 1464px;
  width: 1464px;
}

.about-breadcrumb .row .col-sm-12 {
  display: flex;
  flex-direction: none;
  flex-wrap: none;
  justify-content: flex-start;
  align-items: center;
  gap: 10px;
}

.about-breadcrumb .row .col-sm-12 .main_page {
  color: var(--fourth-color);
  font-family: Epilogue;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 160%;
  text-decoration: none;
  padding: 10px 12px;
  cursor: pointer;
}

.about-breadcrumb .row .col-sm-12 .line {
  width: 20px;
  height: 0.5px;
  background: rgba(17, 17, 17, 0.3);
}

.about-breadcrumb .row .col-sm-12 .active_page {
  color: var(--btn-primary);
  font-family: Epilogue;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 160%;
  text-decoration: none;
  padding: 10px 12px;
}

.about-content {
  display: flex;
  justify-content: center;
  align-items: center;

  .row {
    max-width: 1464px;
    width: 1464px;

    .about-content-top {
      display: flex;
      align-items: center;
      gap: 24px;


      .text-content {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        margin-top: 30px;


        h3 {
          color: var(--fourth-color);
          font-family: Epilogue;
          font-size: 24px;
          font-style: normal;
          font-weight: 500;
          line-height: 160%;
        }

        p {
          color: var(--fourth-color);
          font-family: Epilogue;
          font-size: 14px;
          font-style: normal;
          font-weight: 300;
          line-height: 160%;
        }
      }
    }

    .about-content-bottom {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 24px;
      margin-top: 60px;



      .text-content {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        width: 720px;
        height: 154px;


        h3 {
          color: var(--fourth-color);
          font-family: Epilogue;
          font-size: 24px;
          font-style: normal;
          font-weight: 500;
          line-height: 160%;
        }

        p {
          color: var(--fourth-color);
          font-family: Epilogue;
          font-size: 14px;
          font-style: normal;
          font-weight: 300;
          line-height: 160%;
        }
      }

      .content-img {
        width: 720px;
        height: 480px;

        img {
          width: 100%;
          height: auto;
        }
      }


    }
  }
}

/* Projects Page */
.projects-container {
  display: flex;
  flex-direction: none;
  flex-wrap: none;
  justify-content: center;
  align-items: center;
  background-image: url("/img/AboutBgImage.png");
  height: 160px;
  width: 100vw;
  background-position: center;
  background-size: cover;
}

.projects-container .row {
  max-width: 1464px;
  width: 1464px;
}

.projects-container .row .col-sm-12 h3 {
  color: #FFF;
  font-family: Epilogue;
  font-size: 32px;
  font-style: normal;
  font-weight: 500;
  line-height: 160%;
}

.projects-breadcrumb {
  display: flex;
  flex-direction: none;
  flex-wrap: none;
  justify-content: center;
  align-items: center;
  background: var(--banner-bg);
  height: 60px;
}

.projects-breadcrumb .row {
  max-width: 1464px;
  width: 1464px;
}

.projects-breadcrumb .row .col-sm-12 {
  display: flex;
  flex-direction: none;
  flex-wrap: none;
  justify-content: flex-start;
  align-items: center;
  gap: 10px;
}

.projects-breadcrumb .row .col-sm-12 .main_page {
  color: var(--fourth-color);
  font-family: Epilogue;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 160%;
  text-decoration: none;
  padding: 10px 12px;
  cursor: pointer;
}

.projects-breadcrumb .row .col-sm-12 .line {
  width: 20px;
  height: 0.5px;
  background: rgba(17, 17, 17, 0.3);
}

.projects-breadcrumb .row .col-sm-12 .active_page {
  color: #326598;
  font-family: Epilogue;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 160%;
  text-decoration: none;
  padding: 10px 12px;
}

.projects-content {
  display: flex;
  justify-content: center;
  align-items: center;

  .row {
    max-width: 1464px;
    width: 1464px;


    .about-content-container {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      margin-top: 30px;
      gap: 24px;



      .item {
        display: flex;
        gap: 20px;
      }



      .text-content {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        width: 990px;
        height: 110px;


        h3 {
          color: var(--fourth-color);
          font-family: Epilogue;
          font-size: 24px;
          font-style: normal;
          font-weight: 500;
          line-height: 160%;
          max-width: 990px;
        }

        p {
          color: var(--fourth-color);
          font-family: Epilogue;
          font-size: 14px;
          font-style: normal;
          font-weight: 300;
          line-height: 160%;
        }
      }

      .content-img {
        width: 450px;
        height: 300px;

        img {
          width: 100%;
          height: 100%;
          cursor: pointer;
          object-fit: cover;
        }
      }


    }
  }
}

/* Media Page */
.media-container {
  display: flex;
  flex-direction: none;
  flex-wrap: none;
  justify-content: center;
  align-items: center;
  background-image: url("/img/AboutBgImage.png");
  height: 160px;
  width: 100vw;
  background-position: center;
  background-size: cover;
}

.media-container .row {
  max-width: 1464px;
  width: 1464px;
}

.media-container .row .col-sm-12 h3 {
  color: #FFF;
  font-family: Epilogue;
  font-size: 32px;
  font-style: normal;
  font-weight: 500;
  line-height: 160%;
}

.media-breadcrumb {
  display: flex;
  flex-direction: none;
  flex-wrap: none;
  justify-content: center;
  align-items: center;
  background: var(--banner-bg);
  height: 60px;
}

.media-breadcrumb .row {
  max-width: 1464px;
  width: 1464px;
}

.media-breadcrumb .row .col-sm-12 {
  display: flex;
  flex-direction: none;
  flex-wrap: none;
  justify-content: flex-start;
  align-items: center;
  gap: 10px;
}

.media-breadcrumb .row .col-sm-12 .main_page {
  color: var(--fourth-color);
  font-family: Epilogue;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 160%;
  text-decoration: none;
  padding: 10px 12px;
  cursor: pointer;
}

.media-breadcrumb .row .col-sm-12 .line {
  width: 20px;
  height: 0.5px;
  background: rgba(17, 17, 17, 0.3);
}

.media-breadcrumb .row .col-sm-12 .active_page {
  color: var(--btn-primary);
  font-family: Epilogue;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 160%;
  text-decoration: none;
  padding: 10px 12px;
}

.live_video {

  .video {
    width: 1024px;
    height: 520px;
    margin: 0 auto;
    background-color: gray;
  }
}

.media-content {
  display: flex;
  flex-direction: none;
  flex-wrap: none;
  justify-content: center;
  align-items: center;
  margin-top: 26px;
}

.media-content .row {
  max-width: 1464px;
  width: 1464px;
}

.media-content .row .media-content-top {
  display: flex;
  flex-direction: none;
  flex-wrap: none;
  justify-content: space-between;
  align-items: center;
}

.media-content .row .media-content-top p {
  color: var(--fourth-color);
  font-family: Epilogue;
  font-size: 24px;
  font-style: normal;
  font-weight: 500;
  line-height: 160%;
}

.media-content .row .media-content-top a {
  color: var(--btn-primary);
  text-align: center;
  font-family: Epilogue;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 160%;
  text-decoration: none;
  padding: 4px 22px;
}

.media-content .row .media-content-top a:hover {
  background-color: #ECF3FA;
}

.media-content .row .media-content-container {
  display: flex;
  flex-direction: none;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  margin-top: 30px;
  gap: 24px;
  padding-left: 0px;
  padding-right: 0px;
}

.media-content .row .media-content-container .card {
  display: flex;
  flex-direction: column;
  flex-wrap: none;
  justify-content: none;
  align-items: none;
  width: 348px;
  height: 374px;
  border-radius: 0px;
}

.media-content .row .media-content-container .card img {
  max-width: 348px;
  height: 232px;
}

.media-content .row .media-content-container .card .card-body {
  padding: 12px;
  background-color: var(--third-color);
}

.media-content .row .media-content-container .card .card-body .date {
  color: #929EAE;
  font-family: Epilogue;
  font-size: 12px;
  font-style: normal;
  font-weight: 500;
  line-height: 160%;
  margin-bottom: 0px;
}

.media-content .row .media-content-container .card .card-body .title {
  color: var(--fourth-color);
  font-family: Epilogue;
  font-size: 18px;
  font-style: normal;
  font-weight: 500;
  line-height: 160%;
}

.media-content .row .media-content-container .card .card-body .text {
  color: var(--fourth-color);
  font-family: Epilogue;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 160%;
}

.video-content {
  display: flex;
  flex-direction: none;
  flex-wrap: none;
  justify-content: center;
  align-items: center;
  margin-top: 26px;
}

.video-content .row {
  max-width: 1464px;
  width: 1464px;
}

.video-content .row .video-content-top {
  display: flex;
  flex-direction: none;
  flex-wrap: none;
  justify-content: space-between;
  align-items: center;
}

.video-content .row .video-content-top p {
  color: var(--fourth-color);
  font-family: Epilogue;
  font-size: 24px;
  font-style: normal;
  font-weight: 500;
  line-height: 160%;
}

.video-content .row .video-content-top a {
  color: var(--btn-primary);
  text-align: center;
  font-family: Epilogue;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 160%;
  text-decoration: none;
  padding: 4px 22px;
}

.video-content .row .video-content-top a:hover {
  background-color: #ECF3FA;
}

.video-content .row .video-content-container {
  display: flex;
  flex-direction: none;
  flex-wrap: wrap;
  justify-content: start;
  align-items: center;
  margin-top: 30px;
  gap: 24px;
  padding-left: 0px;
  padding-right: 0px;
}

.video-content .row .video-content-container .card {
  display: flex;
  flex-direction: column;
  flex-wrap: none;
  justify-content: none;
  align-items: none;
  width: 348px;
  height: 374px;
  border-radius: 0px;
}

.video-content .row .video-content-container .card video {
  max-width: 348px;
  height: 232px;
}

.video-content .row .video-content-container .card .card-body {
  padding: 12px;
  background-color: var(--third-color);
}

.video-content .row .video-content-container .card .card-body .date {
  color: #929EAE;
  font-family: Epilogue;
  font-size: 12px;
  font-style: normal;
  font-weight: 500;
  line-height: 160%;
  margin-bottom: 0px;
}

.video-content .row .video-content-container .card .card-body .title {
  color: var(--fourth-color);
  font-family: Epilogue;
  font-size: 18px;
  font-style: normal;
  font-weight: 500;
  line-height: 160%;
}

.video-content .row .video-content-container .card .card-body .text {
  color: var(--fourth-color);
  font-family: Epilogue;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 160%;
}

/* checkCertificate Page */
.checkCertificate-container {
  display: flex;
  flex-direction: none;
  flex-wrap: none;
  justify-content: center;
  align-items: center;
  background-image: url("/img/AboutBgImage.png");
  height: 160px;
  width: 100vw;
  background-position: center;
  background-size: cover;
}

.checkCertificate-container .row {
  max-width: 1464px;
  width: 1464px;
}

.checkCertificate-container .row .col-sm-12 h3 {
  color: #FFF;
  font-family: Epilogue;
  font-size: 32px;
  font-style: normal;
  font-weight: 500;
  line-height: 160%;
}

.checkCertificate-breadcrumb {
  display: flex;
  flex-direction: none;
  flex-wrap: none;
  justify-content: center;
  align-items: center;
  background: var(--banner-bg);
  height: 60px;
}

.checkCertificate-breadcrumb .row {
  max-width: 1464px;
  width: 1464px;
}

.checkCertificate-breadcrumb .row .col-sm-12 {
  display: flex;
  flex-direction: none;
  flex-wrap: none;
  justify-content: flex-start;
  align-items: center;
  gap: 10px;
}

.checkCertificate-breadcrumb .row .col-sm-12 .main_page {
  color: var(--fourth-color);
  font-family: Epilogue;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 160%;
  text-decoration: none;
  padding: 10px 12px;
  cursor: pointer;
}

.checkCertificate-breadcrumb .row .col-sm-12 .line {
  width: 20px;
  height: 0.5px;
  background: rgba(17, 17, 17, 0.3);
}

.checkCertificate-breadcrumb .row .col-sm-12 .active_page {
  color: var(--btn-primary);
  font-family: Epilogue;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 160%;
  text-decoration: none;
  padding: 10px 12px;
}

.checkCertificate-content {
  display: flex;
  flex-direction: none;
  flex-wrap: none;
  justify-content: center;
  align-items: center;
  margin-top: 26px;
}

.sertificate-desktop {
  display: block;
}

.sertificate-mobile {

  display: none;
}

.checkCertificate-content .row {
  max-width: 1464px;
  width: 1464px;
}

.checkCertificate-content .row .checkCertificate-content-top {
  display: flex;
  flex-direction: column;
  flex-wrap: none;
  justify-content: center;
  align-items: flex-start;
}

.checkCertificate-content .row .checkCertificate-content-top th:first-child {
  border-radius: 63px 0px 0px 63px;

}

.checkCertificate-content .row .checkCertificate-content-top th:last-child {
  border-radius: 0px 63px 63px 0px;
}

.checkCertificate-content .row .checkCertificate-content-top th {
  padding-left: 15px;
  padding-right: 15px;
}

.checkCertificate-content .row .checkCertificate-content-top tr {
  border-bottom: 0.5px solid rgba(0, 0, 0, 0.10);
  border-top: none;
}

.checkCertificate-content .row .checkCertificate-content-top tr:first-child {
  border-bottom: 0px white;
}

.checkCertificate-content .row .checkCertificate-content-top tr td {
  padding: 20px;

  color: var(--fourth-color);
}

.checkCertificate-content .row .checkCertificate-content-top .certificate_table {
  border-radius: 20px;
}

.checkCertificate-content .row .checkCertificate-content-top p {
  color: var(--fourth-color);
  font-family: Epilogue;
  font-size: 24px;
  font-style: normal;
  font-weight: 500;
  line-height: 160%;
}

.checkCertificate-content .row .checkCertificate-content-top .table thead tr th {
  background: var(--banner-bg);
  color: var(--fourth-color);
  font-family: Epilogue;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 160%;
}

.checkCertificate-content .row .checkCertificate-content-top .table tbody .thead {
  border-radius: 63px 0px 0px 63px;

}

.checkCertificate-content .row .checkCertificate-content-top .table tbody tr {
  height: 48px;
}

.checkCertificate-content .row .checkCertificate-content-top .table tbody tr td {
  color: #111;
  font-family: Epilogue;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 160%;
}

.checkCertificate-content .row .checkCertificate-content-top .btn {
  padding: 7px 22px;
  background: #326598;
  border-radius: 0px;
  color: #FFF;
  text-align: center;
  font-family: Epilogue;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 160%;
}

.checkCertificate-content .row .checkCertificate-content-top .btn:hover {
  background-color: #537FA6;
}

/*All Pictures Media Page */
.allpictures-container {
  display: flex;
  flex-direction: none;
  flex-wrap: none;
  justify-content: center;
  align-items: center;
  background-image: url("/img/AboutBgImage.png");
  height: 160px;
  width: 100vw;
  background-position: center;
  background-size: cover;
}

.allpictures-container .row {
  max-width: 1464px;
  width: 1464px;
}

.allpictures-container .row .col-sm-12 h3 {
  color: #FFF;
  font-family: Epilogue;
  font-size: 32px;
  font-style: normal;
  font-weight: 500;
  line-height: 160%;
}

.allpictures-breadcrumb {
  display: flex;
  flex-direction: none;
  flex-wrap: none;
  justify-content: center;
  align-items: center;
  background: #FAFAFA;
  height: 60px;
}

.allpictures-breadcrumb .row {
  max-width: 1464px;
  width: 1464px;
}

.allpictures-breadcrumb .row .col-sm-12 {
  display: flex;
  flex-direction: none;
  flex-wrap: none;
  justify-content: flex-start;
  align-items: center;
  gap: 10px;
}

.allpictures-breadcrumb .row .col-sm-12 .main_page {
  color: #111;
  font-family: Epilogue;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 160%;
  text-decoration: none;
  padding: 10px 12px;
  cursor: pointer;
}

.allpictures-breadcrumb .row .col-sm-12 .line {
  width: 20px;
  height: 0.5px;
  background: rgba(17, 17, 17, 0.3);
}

.allpictures-breadcrumb .row .col-sm-12 .active_page {
  color: #326598;
  font-family: Epilogue;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 160%;
  text-decoration: none;
  padding: 10px 12px;
}

.allpictures-content {
  display: flex;
  flex-direction: none;
  flex-wrap: none;
  justify-content: center;
  align-items: center;
  margin-top: 26px;
}

.allpictures-content .row {
  max-width: 1464px;
  width: 1464px;
}

.allpictures-content .row .allpictures-content-top {
  display: flex;
  flex-direction: none;
  flex-wrap: none;
  justify-content: space-between;
  align-items: center;
}

.allpictures-content .row .allpictures-content-top p {
  color: #000;
  font-family: Epilogue;
  font-size: 24px;
  font-style: normal;
  font-weight: 500;
  line-height: 160%;
}

.allpictures-content .row .allpictures-content-top a {
  color: #326598;
  text-align: center;
  font-family: Epilogue;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 160%;
  text-decoration: none;
  padding: 4px 22px;
}

.allpictures-content .row .allpictures-content-top a:hover {
  background-color: #ECF3FA;
}

.allpictures-content .row .allpictures-content-container {
  display: flex;
  flex-direction: none;
  flex-wrap: wrap;
  justify-content: start;
  align-items: center;
  margin-top: 30px;
  gap: 24px;
  padding-left: 0px;
  padding-right: 0px;
}

.allpictures-content .row .allpictures-content-container .card {
  display: flex;
  flex-direction: column;
  flex-wrap: none;
  justify-content: none;
  align-items: none;
  width: 348px;
  height: 374px;
  border-radius: 0px;
}

.allpictures-content .row .allpictures-content-container .card img {
  max-width: 348px;
  height: 232px;
}

.allpictures-content .row .allpictures-content-container .card .card-body {
  padding: 12px;

  background-color: var(--third-color);
}

.allpictures-content .row .allpictures-content-container .card .card-body .date {
  color: #929EAE;
  font-family: Epilogue;
  font-size: 12px;
  font-style: normal;
  font-weight: 500;
  line-height: 160%;
  margin-bottom: 0px;
}

.allpictures-content .row .allpictures-content-container .card .card-body .title {
  color: var(--fourth-color);
  font-family: Epilogue;
  font-size: 18px;
  font-style: normal;
  font-weight: 500;
  line-height: 160%;
}

.allpictures-content .row .allpictures-content-container .card .card-body .text {
  color: var(--fourth-color);
  font-family: Epilogue;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 160%;
}

/* PAGINATE */
.paginate-container {
  display: flex;
  flex-direction: none;
  flex-wrap: none;
  justify-content: center;
  align-items: center;
  margin-top: 20px;
}

.paginate-container .row {
  max-width: 1464px;
  width: 1464px;
}

.paginate-container .row .col-sm-12 {
  display: flex;
  flex-direction: none;
  flex-wrap: none;
  justify-content: center;
  align-items: center;
}

.paginate-container .row .col-sm-12 .pagination {
  gap: 10px;
}

.paginate-container .row .col-sm-12 .pagination .page-item .page-link {
  display: flex;
  flex-direction: column;
  flex-wrap: none;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  padding: 9px 10px;
  border: 0.5px solid rgba(17, 17, 17, 0.1);
  background: #FFF;
  color: #000;
  text-align: center;
  font-family: Epilogue;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 160%;
}

.paginate-container .row .col-sm-12 .pagination .page-item .page-link:hover {
  color: #326598;
}

.paginate-container .row .col-sm-12 .pagination .page-item.active .page-link {
  background: #326598;
  color: #fff;
  border: 1px solid #326598;
}

.paginate-container .row .col-sm-12 .pagination .page-item:first-child .page-link,
.paginate-container .row .col-sm-12 .pagination .page-item:last-child .page-link {
  border: none;
}

/*All Videos Media Page */
.allvideo-container {
  display: flex;
  flex-direction: none;
  flex-wrap: none;
  justify-content: center;
  align-items: center;
  background-image: url("/img/AboutBgImage.png");
  height: 160px;
  width: 100vw;
  background-position: center;
  background-size: cover;
}

.allvideo-container .row {
  max-width: 1464px;
  width: 1464px;
}

.allvideo-container .row .col-sm-12 h3 {
  color: #FFF;
  font-family: Epilogue;
  font-size: 32px;
  font-style: normal;
  font-weight: 500;
  line-height: 160%;
}

.allvideo-breadcrumb {
  display: flex;
  flex-direction: none;
  flex-wrap: none;
  justify-content: center;
  align-items: center;
  background: #FAFAFA;
  height: 60px;
}

.allvideo-breadcrumb .row {
  max-width: 1464px;
  width: 1464px;
}

.allvideo-breadcrumb .row .col-sm-12 {
  display: flex;
  flex-direction: none;
  flex-wrap: none;
  justify-content: flex-start;
  align-items: center;
  gap: 10px;
}

.allvideo-breadcrumb .row .col-sm-12 .main_page {
  color: #111;
  font-family: Epilogue;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 160%;
  text-decoration: none;
  padding: 10px 12px;
  cursor: pointer;
}

.allvideo-breadcrumb .row .col-sm-12 .line {
  width: 20px;
  height: 0.5px;
  background: rgba(17, 17, 17, 0.3);
}

.allvideo-breadcrumb .row .col-sm-12 .active_page {
  color: #326598;
  font-family: Epilogue;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 160%;
  text-decoration: none;
  padding: 10px 12px;
}

.allvideo-content {
  display: flex;
  flex-direction: none;
  flex-wrap: none;
  justify-content: center;
  align-items: center;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 26px;
}

.allvideo-content .row {
  max-width: 1464px;
  width: 1464px;
}

.allvideo-content .row .allvideo-content-top {
  display: flex;
  flex-direction: none;
  flex-wrap: none;
  justify-content: space-between;
  align-items: center;
}

.allvideo-content .row .allvideo-content-top p {
  color: #000;
  font-family: Epilogue;
  font-size: 24px;
  font-style: normal;
  font-weight: 500;
  line-height: 160%;
}

.allvideo-content .row .allvideo-content-top a {
  color: #326598;
  text-align: center;
  font-family: Epilogue;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 160%;
  text-decoration: none;
  padding: 4px 22px;
}

.allvideo-content .row .allvideo-content-top a:hover {
  background-color: #ECF3FA;
}

.allvideo-content .row .allvideo-content-container {
  display: flex;
  flex-direction: none;
  flex-wrap: wrap;
  justify-content: start;
  align-items: center;
  margin-top: 30px;
  gap: 24px;
  padding-left: 0px;
  padding-right: 0px;
}

.allvideo-content .row .allvideo-content-container .card {
  display: flex;
  flex-direction: column;
  flex-wrap: none;
  justify-content: none;
  align-items: none;
  width: 348px;
  height: 374px;
  border-radius: 0px;
}

.allvideo-content .row .allvideo-content-container .card img {
  max-width: 348px;
  height: 232px;
}

.allvideo-content .row .allvideo-content-container .card video {
  width: 100%;
  height: 100%;
}

.allvideo-content .row .allvideo-content-container .card .card-body {
  padding: 12px;
}

.allvideo-content .row .allvideo-content-container .card .card-body .date {
  color: #929EAE;
  font-family: Epilogue;
  font-size: 12px;
  font-style: normal;
  font-weight: 500;
  line-height: 160%;
  margin-bottom: 0px;
}

.allvideo-content .row .allvideo-content-container .card .card-body .title {
  color: #111;
  font-family: Epilogue;
  font-size: 18px;
  font-style: normal;
  font-weight: 500;
  line-height: 160%;
}

.allvideo-content .row .allvideo-content-container .card .card-body .text {
  color: rgba(17, 17, 17, 0.75);
  font-family: Epilogue;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 160%;
}

/* Contact */
.contact-container {
  display: flex;
  flex-direction: none;
  flex-wrap: none;
  justify-content: center;
  align-items: center;
  background-image: url("/img/AboutBgImage.png");
  height: 160px;
  width: 100vw;
  background-position: center;
  background-size: cover;
}

.contact-container .row {
  max-width: 1464px;
  width: 1464px;
}

.contact-container .row .col-sm-12 h3 {
  color: #FFF;
  font-family: Epilogue;
  font-size: 32px;
  font-style: normal;
  font-weight: 500;
  line-height: 160%;
}

.contact-breadcrumb {
  display: flex;
  flex-direction: none;
  flex-wrap: none;
  justify-content: center;
  align-items: center;
  background: var(--banner-bg);
  height: 60px;
}

.contact-breadcrumb .row {
  max-width: 1464px;
  width: 1464px;
}

.contact-breadcrumb .row .col-sm-12 {
  display: flex;
  flex-direction: none;
  flex-wrap: none;
  justify-content: flex-start;
  align-items: center;
  gap: 10px;
}

.contact-breadcrumb .row .col-sm-12 .main_page {
  color: var(--fourth-color);
  font-family: Epilogue;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 160%;
  text-decoration: none;
  padding: 10px 12px;
  cursor: pointer;
}

.contact-breadcrumb .row .col-sm-12 .line {
  width: 20px;
  height: 0.5px;
  background: rgba(17, 17, 17, 0.3);
}

.contact-breadcrumb .row .col-sm-12 .active_page {
  color: var(--btn-primary);
  font-family: Epilogue;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 160%;
  text-decoration: none;
  padding: 10px 12px;
}

.contact-content {
  display: flex;
  flex-direction: none;
  flex-wrap: none;
  justify-content: center;
  align-items: center;
  margin-top: 26px;
}

.contact-content .row {
  max-width: 1464px;
  width: 1464px;
  margin-bottom: 300px;
}

.contact-content .row .contact-content-container {
  display: flex;
  flex-direction: none;
  flex-wrap: none;
  justify-content: space-between;
  align-items: none;
  gap: 24px;
}

.contact-content .row .contact-content-container .contact-content-container-left {
  width: 1056px;
}

.contact-content .row .contact-content-container .contact-content-container-left .contact-fields {
  display: flex;
  flex-direction: column;
  gap: 0px;
}

.contact-content .row .contact-content-container .contact-content-container-left form .mb-3 {
  display: flex;
  width: 100%;
  gap: 24px;
}

.contact-content .row .contact-content-container .contact-content-container-left form div input {
  width: 516px;
  height: 44px;
  border-radius: 0px;
  color: var(--fourth-color);
  background-color: var(--third-color);
}

.contact-content .row .contact-content-container .contact-content-container-left form div input::placeholder {
  color: var(--fourth-color);
}

.contact-content .row .contact-content-container .contact-content-container-left form div textarea::placeholder {
  color: var(--fourth-color);
}

.contact-content .row .contact-content-container .contact-content-container-left form div textarea {
  width: 100%;
  border-radius: 0px;
  color: var(--fourth-color);
  background-color: var(--third-color);
}

.contact-content .row .contact-content-container .contact-content-container-left form .btn {
  background: #326598;
  width: 138px;
  padding: 11px 22px;
  border-radius: 0px;
  color: #FFF;
  text-align: center;
  font-family: Epilogue;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 160%;
  margin-top: 10px;
}

.contact-content .row .contact-content-container .contact-content-container-right {
  width: 384px;
  padding-left: 12px;
  border-left: 0.5px solid rgba(18, 18, 18, 0.1);
  height: 100%;

  background-color: var(--third-color);
}

.contact-content .row .contact-content-container .contact-content-container-right .contact-right-box .socials {
  display: flex;
  gap: 8px;
}

.contact-content .row .contact-content-container .contact-content-container-right .contact-right-box .socials a {
  display: flex;
  flex-direction: none;
  flex-wrap: none;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  padding: 8px;
  color: var(--fourth-color);
}

.contact-content .row .contact-content-container .contact-content-container-right .contact-right-box .socials a:hover {
  background-color: #326598;
}

.contact-content .row .contact-content-container .contact-content-container-right .contact-right-box .socials a:hover i {
  color: #fff;
}

.contact-content .row .contact-content-container .contact-content-container-right .contact-right-box h5 {
  color: var(--fourth-color);
  font-family: Roboto;
  font-size: 20px;
  font-style: normal;
  font-weight: 700;
  line-height: 160%;
}

.contact-content .row .contact-content-container .contact-content-container-right .contact-right-box ul {
  list-style: none;
  padding: 0;
  color: var(--fourth-color);
}

.contact-content .row .contact-content-container .contact-content-container-right .contact-right-box ul li {
  padding: 8px 0px;
  color: var(--fourth-color);
  font-family: Roboto;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 160%;
  position: relative;
}

.contact-content .row .contact-content-container .contact-content-container-right .contact-right-box ul li address {
  margin-bottom: 0px;
  color: var(--fourth-color);
  font-family: Epilogue;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 175%;
}

.contact-content .row .contact-content-container .contact-content-container-right .contact-right-box ul li a {
  text-decoration: none;
  color: var(--fourth-color);
}

.contact-content .row .contact-content-container .contact-content-container-right .hoverLi {
  position: relative;
}

.contact-content .row .contact-content-container .contact-content-container-right .hoverLi::after {
  content: "";
  position: absolute;
  background-color: #121212;
  height: 2px;
  width: 0;
  left: 0;
  bottom: 0px;
  transition: 0.3s;
}

.contact-content .row .contact-content-container .contact-content-container-right .hoverLi:hover:after {
  width: 100%;
}

/* Other services */
.otherServices-container {
  display: flex;
  flex-direction: none;
  flex-wrap: none;
  justify-content: center;
  align-items: center;
  background-image: url("/img/AboutBgImage.png");
  height: 160px;
  width: 100vw;
  background-position: center;
  background-size: cover;
}

.otherServices-container .row {
  max-width: 1464px;
  width: 1464px;
}

.otherServices-container .row .col-sm-12 h3 {
  color: #FFF;
  font-family: Epilogue;
  font-size: 32px;
  font-style: normal;
  font-weight: 500;
  line-height: 160%;
}

.otherServices-breadcrumb {
  display: flex;
  flex-direction: none;
  flex-wrap: none;
  justify-content: center;
  align-items: center;
  background: var(--banner-bg);
  height: 60px;
}

.otherServices-breadcrumb .row {
  max-width: 1464px;
  width: 1464px;
}

.otherServices-breadcrumb .row .col-sm-12 {
  display: flex;
  flex-direction: none;
  flex-wrap: none;
  justify-content: flex-start;
  align-items: center;
  gap: 10px;
}

.otherServices-breadcrumb .row .col-sm-12 .main_page {
  color: var(--fourth-color);
  font-family: Epilogue;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 160%;
  text-decoration: none;
  padding: 10px 12px;
  cursor: pointer;
}

.otherServices-breadcrumb .row .col-sm-12 .line {
  width: 20px;
  height: 0.5px;
  background: rgba(17, 17, 17, 0.3);
}

.otherServices-breadcrumb .row .col-sm-12 .active_page {
  color: #326598;
  font-family: Epilogue;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 160%;
  text-decoration: none;
  padding: 10px 12px;
}

.otherServices-content-container {
  display: flex;
  flex-direction: none;
  flex-wrap: none;
  justify-content: center;
  align-items: center;
  margin-top: 26px;
}

.otherServices-content-container .row {
  max-width: 1464px;
  width: 1464px;
}

.otherServices-content-container .row .otherServices-content-container-title {
  display: flex;
  flex-direction: none;
  flex-wrap: none;
  justify-content: flex-start;
  align-items: center;
}

.otherServices-content-container .row .otherServices-content-container-title h2 {
  color: var(--fourth-color);
  font-family: Epilogue;
  font-size: 24px;
  font-style: normal;
  font-weight: 500;
  line-height: 160%;
}

.otherServices-content-container .row .otherServices-content-container-center {
  display: flex;
  flex-direction: none;
  flex-wrap: wrap;
  justify-content: start;
  align-items: center;
  gap: 24px;
  padding-left: 0px;
  padding-right: 0px;
}

.otherServices-content-container .row .otherServices-content-container-center .services-content {
  display: flex;
  flex-direction: column;
  flex-wrap: none;
  justify-content: center;
  align-items: center;
  width: 348px;
  height: 191px;
  min-width: 348px;
  padding: 60px 0px 58px 0px;
  border-radius: 4px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  background: var(--third-color);
  text-decoration: none;


}

.otherServices-content-container .row .otherServices-content-container-center .services-content:hover {
  border-radius: 4px;
  border: 2px solid #326598;
  background: transparent;
  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.15);
}


.otherServices-content-container .row .otherServices-content-container-center .services-content h3 {
  color: var(--fourth-color);
  text-align: center;
  font-family: Epilogue;
  font-size: 18px;
  font-style: normal;
  font-weight: 600;
  line-height: 160%;
}

.otherServices-content-container .row .otherServices-content-container-center .services-content p {
  color: rgba(17, 17, 17, 0.75);
  text-align: center;
  font-family: Epilogue;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 160%;
}

/* Instructions and  Documentations */
.InsAndDoc-container {
  display: flex;
  flex-direction: none;
  flex-wrap: none;
  justify-content: center;
  align-items: center;
  background-image: url("/img/AboutBgImage.png");
  height: 160px;
  width: 100vw;
  background-position: center;
  background-size: cover;
}

.InsAndDoc-container .row {
  max-width: 1464px;
  width: 1464px;
}

.InsAndDoc-container .row .col-sm-12 h3 {
  color: #FFF;
  font-family: Epilogue;
  font-size: 32px;
  font-style: normal;
  font-weight: 500;
  line-height: 160%;
}

.InsAndDoc-breadcrumb {
  display: flex;
  flex-direction: none;
  flex-wrap: none;
  justify-content: center;
  align-items: center;
  background: #FAFAFA;
  height: 60px;
}

.InsAndDoc-breadcrumb .row {
  max-width: 1464px;
  width: 1464px;
}

.InsAndDoc-breadcrumb .row .col-sm-12 {
  display: flex;
  flex-direction: none;
  flex-wrap: none;
  justify-content: flex-start;
  align-items: center;
  gap: 10px;
}

.InsAndDoc-breadcrumb .row .col-sm-12 .main_page {
  color: #111;
  font-family: Epilogue;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 160%;
  text-decoration: none;
  padding: 10px 12px;
  cursor: pointer;
}

.InsAndDoc-breadcrumb .row .col-sm-12 .line {
  width: 20px;
  height: 0.5px;
  background: rgba(17, 17, 17, 0.3);
}

.InsAndDoc-breadcrumb .row .col-sm-12 .active_page {
  color: #326598;
  font-family: Epilogue;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 160%;
  text-decoration: none;
  padding: 10px 12px;
}

.InsAndDoc-content-container {
  display: flex;
  flex-direction: none;
  flex-wrap: none;
  justify-content: center;
  align-items: center;
  margin-top: 26px;
}

.InsAndDoc-content-container .row {
  max-width: 1464px;
  width: 1464px;
}

.InsAndDoc-content-container .row .InsAndDoc-content-container-title {
  display: flex;
  flex-direction: none;
  flex-wrap: none;
  justify-content: flex-start;
  align-items: center;
}

.InsAndDoc-content-container .row .InsAndDoc-content-container-title h2 {
  color: var(--fourth-color);
  font-family: Epilogue;
  font-size: 24px;
  font-style: normal;
  font-weight: 500;
  line-height: 160%;
}

.InsAndDoc-content-container .row .InsAndDoc-content-container-center {
  display: flex;
  flex-direction: none;
  flex-wrap: wrap;
  justify-content: start;
  align-items: center;
  gap: 24px;
  padding-left: 0px;
  padding-right: 0px;
}

.InsAndDoc-content-container .row .InsAndDoc-content-container-center .services-content {
  display: flex;
  flex-direction: column;
  flex-wrap: none;
  justify-content: center;
  align-items: center;
  width: 224px;
  height: 341px;
  min-width: 224px;
  padding: 60px 0px 58px 0px;
  border-radius: 4px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  background: var(--third-color);
  text-decoration: none;
}

.InsAndDoc-content-container .row .InsAndDoc-content-container-center .services-content:hover {
  border-radius: 4px;
  border: 2px solid #326598;
  background: transparent;
  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.15);
}


.InsAndDoc-content-container .row .InsAndDoc-content-container-center .services-content h3 {
  color: var(--fourth-color);
  text-align: center;
  font-family: Epilogue;
  font-size: 18px;
  font-style: normal;
  font-weight: 600;
  line-height: 160%;
}

.InsAndDoc-content-container .row .InsAndDoc-content-container-center .services-content p {
  color: var(--fourth-color);
  text-align: center;
  font-family: Epilogue;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 160%;
}

/* google map */
.contact-map {
  margin-top: 26px;
  position: absolute;
  bottom: 100px;

}

/* Environmental Documentation  */
.environmentalDoc-container {
  display: flex;
  flex-direction: none;
  flex-wrap: none;
  justify-content: center;
  align-items: center;
  background-image: url("/img/AboutBgImage.png");
  height: 160px;
  width: 100vw;
  background-position: center;
  background-size: cover;
}

.environmentalDoc-container .row {
  max-width: 1464px;
  width: 1464px;
}

.environmentalDoc-container .row .col-sm-12 h3 {
  color: #FFF;
  font-family: Epilogue;
  font-size: 32px;
  font-style: normal;
  font-weight: 500;
  line-height: 160%;
}

.environmentalDoc-breadcrumb {
  display: flex;
  flex-direction: none;
  flex-wrap: none;
  justify-content: center;
  align-items: center;
  background: var(--banner-bg);
  height: 60px;
}

.environmentalDoc-breadcrumb .row {
  max-width: 1464px;
  width: 1464px;
}

.environmentalDoc-breadcrumb .row .col-sm-12 {
  display: flex;
  flex-direction: none;
  flex-wrap: none;
  justify-content: flex-start;
  align-items: center;
  gap: 10px;
}

.environmentalDoc-breadcrumb .row .col-sm-12 .main_page {
  color: var(--fourth-color);
  font-family: Epilogue;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 160%;
  text-decoration: none;
  padding: 10px 12px;
  cursor: pointer;
}

.environmentalDoc-breadcrumb .row .col-sm-12 .line {
  width: 20px;
  height: 0.5px;
  background: rgba(17, 17, 17, 0.3);
}

.environmentalDoc-breadcrumb .row .col-sm-12 .active_page {
  color: var(--btn-primary);
  font-family: Epilogue;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 160%;
  text-decoration: none;
  padding: 10px 12px;
}

.environmentalDoc-content {
  display: flex;
  flex-direction: none;
  flex-wrap: none;
  justify-content: center;
  align-items: center;
  margin-top: 26px;
}

.environmentalDoc-content .row {
  gap: 24px;
  max-width: 1464px;
  width: 1464px;
}

.environmentalDoc-content .row .environmentalDoc-content-left {
  display: flex;
  flex-direction: column;
  flex-wrap: none;
  justify-content: flex-start;
  align-items: none;
  max-width: 968px;
  padding: 20px 16px;
  align-self: stretch;
  border-radius: 4px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  background: var(--third-color);

  p {
    color: var(--fourth-color);
  }
}

.environmentalDoc-content .row .environmentalDoc-content-left h3 {
  color: #111;
  font-family: Epilogue;
  font-size: 18px;
  font-style: normal;
  font-weight: 500;
  line-height: 160%;
}

.environmentalDoc-content .row .environmentalDoc-content-left li {
  color: rgba(17, 17, 17, 0.75);
  font-family: Epilogue;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 160%;
}

.environmentalDoc-content .row .environmentalDoc-content-left .btn-apply {
  padding: 7px 22px;
  background: var(--btn-primary);
  border: none;
  color: #FFF;
  text-align: center;
  font-family: Epilogue;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 160%;
  width: 130px;
}

.environmentalDoc-content .row .environmentalDoc-content-left .btn-apply:hover {
  background-color: #537FA6;
}

.environmentalDoc-content .row .environmentalDoc-content-right {
  max-width: 472px;
  height: auto;
  border-radius: 4px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  background: var(--third-color);
  padding: 24px 16px 44px 16px;
  gap: 24px;
}

.environmentalDoc-content .row .environmentalDoc-content-right h4 {
  color: var(--fourth-color);
  font-family: Epilogue;
  font-size: 18px;
  font-style: normal;
  font-weight: 600;
  line-height: 160%;
}

.environmentalDoc-content .row .environmentalDoc-content-right p {
  color: var(--fourth-color);
  font-family: Epilogue;
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 160%;
}

.environmentalDoc-content .row .environmentalDoc-content-right form input {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  background: var(--primary-color);
  border-radius: 0px;

  color: var(--fourth-color);
}

.environmentalDoc-content .row .environmentalDoc-content-right form input::-moz-placeholder {
  color: rgba(0, 0, 0, 0.4);
  font-family: Epilogue;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 160%;
}

.environmentalDoc-content .row .environmentalDoc-content-right form input::placeholder {
  color: var(--fourth-color);
  font-family: Epilogue;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 160%;
}

.environmentalDoc-content .row .environmentalDoc-content-right form textarea {
  background-color: var(--primary-color);
  border-radius: 0px;

  color: var(--fourth-color);
}

.environmentalDoc-content .row .environmentalDoc-content-right form textarea::-moz-placeholder {
  color: var(--fourth-color);
  font-family: Epilogue;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 160%;
}

.environmentalDoc-content .row .environmentalDoc-content-right form textarea::placeholder {
  color: var(--fourth-color);
  font-family: Epilogue;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 160%;
}

.environmentalDoc-content .row .environmentalDoc-content-right form .btn {
  padding: 7px 22px;
  background: var(--btn-primary);
  width: 100%;
  color: #FFF;
  text-align: center;
  font-family: Epilogue;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 160%;
  border-radius: 0px;
}

.environmentalDoc-content .row .environmentalDoc-content-right form .btn:hover {
  background-color: #537FA6;
}

.environmental-services {
  display: flex;
  flex-direction: none;
  flex-wrap: none;
  justify-content: center;
  align-items: center;
  padding: 40px 0px;
}

.environmental-services .row {
  max-width: 1464px;
  width: 1464px;
}

.environmental-services .row .environmental-services-top {
  display: flex;
  flex-direction: none;
  flex-wrap: none;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.environmental-services .row .environmental-services-top h3 {
  color: var(--fourth-color);
  font-family: Epilogue;
  font-size: 24px;
  font-style: normal;
  font-weight: 500;
  line-height: 160%;
}

.environmental-services .row .environmental-services-top a {
  color: #326598;
  text-align: center;
  font-family: Epilogue;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 160%;
  text-decoration: none;
  padding: 4px 22px;
}

.environmental-services .row .environmental-services-top a:hover {
  background-color: rgba(132, 121, 121, 0.1);
}

.environmental-services .row .environmental-services-content {
  display: flex;
  flex-direction: none;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}

.environmental-services .row .environmental-services-content .info-box {
  display: flex;
  flex-direction: column;
  flex-wrap: none;
  justify-content: center;
  align-items: center;
  height: 191px;
  width: 348px;
  padding: 60px 0px 58px 0px;
  border-radius: 4px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  background: var(--third-color);
  text-decoration: none;
}

.environmental-services .row .environmental-services-content .info-box:hover {
  border-radius: 4px;
  border: 2px solid #326598;
  background: transparent;

  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.15);
}

.environmental-services .row .environmental-services-content .info-box:hover h4 {
  /* color: var(--third-color) !important; */
}

.environmental-services .row .environmental-services-content .info-box h4 {
  color: var(--fourth-color);
  text-align: center;
  font-family: Epilogue;
  font-size: 18px;
  font-style: normal;
  font-weight: 600;
  line-height: 160%;
}

.environmental-services .row .environmental-services-content .info-box p {
  color: var(--fourth-color);
  text-align: center;
  font-family: Epilogue;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 160%;
}

/* footer */
footer {
  display: flex;
  flex-direction: column;
  flex-wrap: none;
  justify-content: flex-end;
  align-items: center;
  background-image: url("/img/FooterBgImg.svg");
  background-position: center;
  background-size: cover;
  height: 385px;
  position: relative;
  margin-top: 150px;
}

footer.darkmode {
  background-image: url("/img/FooterBgImgdark.png");
}

footer .footerLogo {
  display: flex;
  flex-direction: column;
  flex-wrap: none;
  justify-content: center;
  align-items: center;
  position: absolute;
  width: 200px;
  height: 200px;
  border-radius: 110px;
  border: 4px solid #326598;
  background: #FFF;
  top: -121px;
  left: 43%;
}

footer .footerLogo .footerLogo-container {
  display: flex;
  flex-direction: column;
  flex-wrap: none;
  justify-content: center;
  align-items: center;
  width: 116px;
  height: 80px;
  position: relative;
}

footer .footerLogo .footerLogo-container .rotate {
  width: 100px;
  height: 100px;
  animation: rotation 6s infinite linear;
}

footer .footerLogo .footerLogo-container .rotationTopLogo {
  position: absolute;
  bottom: 54px;
  width: 45px;
  height: 45px;
  animation: rotationTopLogo 3s infinite linear;
}

footer .footerLogo .footerLogo-container .imgText {
  margin-top: 5px;
}

footer .footerContainer {
  display: flex;
  flex-direction: column;
  flex-wrap: none;
  justify-content: center;
  align-items: center;
}

footer .footerContainer .mobile {
  display: none;
}

footer .footerContainer .desktop {
  display: flex;
}

footer .row {
  display: flex;
  flex-direction: none;
  flex-wrap: none;
  justify-content: center;
  align-items: none;
  max-width: 1464px;
  width: 1464px;
}

footer .row .col {
  padding-left: 0px;
  padding-right: 0px;
}

footer .footer-menu {
  display: flex;
}

.single-box {
  height: 100%;
}

.single-box .footer-left-title {
  color: var(--footer-text-color);
  font-family: Epilogue;
  font-size: 20px;
  font-style: normal;
  font-weight: 600;
  line-height: 160%;
}

.single-box ul {
  list-style: none;
  padding: 0;
}

.single-box ul li {
  padding: 4px 12px;
  margin-bottom: 8px;

}

.single-box ul li a {
  display: flex;
  align-items: center;
  gap: 8px;
}

.hoverLine {
  position: relative;
}

.hoverLine::after {
  content: "";
  position: absolute;
  background-color: #121212;
  height: 2px;
  width: 0;
  left: 0;
  bottom: -5px;
  transition: 0.3s;
}

.hoverLine:hover:after {
  width: 100%;
}

.single-box ul li a {
  color: var(--footer-text-color);
  font-family: Epilogue;
  font-size: 12px;
  font-style: normal;
  font-weight: 500;
  line-height: 160%;
  text-decoration: none;
}

.single-box .footer-right-text {
  color: var(--footer-text-color);
  font-family: Epilogue;
  font-size: 20px;
  font-style: normal;
  font-weight: 600;
  line-height: 160%;
}

.single-box .footer-form {
  display: flex;
  flex-direction: none;
  flex-wrap: none;
  justify-content: center;
  align-items: center;
  width: 405px;
  height: 36px;
  margin-bottom: 12px;
}

.single-box .footer-form .form-control {
  border-radius: 0px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: var(--third-color);
  height: 36px;
  width: 309px;
  color: var(--fourth-color);
}

.single-box .footer-form .form-control:hover {
  box-shadow: none;
}

.single-box .footer-form .form-control::-moz-placeholder {
  color: #C3C3C3;
  font-family: Poppins;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 160%;
}

.single-box .footer-form .form-control::placeholder {
  color: #C3C3C3;
  font-family: Poppins;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 160%;
}

.single-box .footer-form .footer-button {
  background: #326598;
  height: 36px;
  width: 96px;
  border-radius: 0px;
  padding: 7px 22px;
  border: none;
  color: #FFF;
  text-align: center;
  font-family: Epilogue;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 160%;
}

.single-box .footer-form .footer-button:hover {
  background-color: #537FA6;
}

.single-box .socials {
  display: flex;
}

.single-box .socials a {
  display: flex;
  flex-direction: none;
  flex-wrap: none;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  width: 40px;
  height: 40px;
  padding: 8px;
  color: var(--footer-text-color);
  margin-right: 8px;
}

section {
  /* Legislation */
  /* Adjustments */
}

section .about-company {
  display: flex;
  flex-direction: none;
  flex-wrap: none;
  justify-content: center;
  align-items: center;
  text-align: center;
}

section .about-company .row {
  max-width: 1200px;
  width: 1200px;
}

section .about-company .about-company-top {
  padding-top: 24px;
  padding-bottom: 40px;
  gap: 10px;
}

section .about-company .about-company-top a {
  color: #0B0C0C;
  font-family: Poppins;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 160%;
  text-decoration: none;
  padding: 4px 12px;
}

section .about-company .about-company-top a:hover {
  background-color: rgba(132, 121, 121, 0.1);
  text-decoration: underline;
}

section .about-company .about-company-top span {
  color: #979797;
  font-family: Poppins;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 160%;
  padding: 4px 12px;
}

section .about-company-card {
  display: flex;
  flex-direction: none;
  flex-wrap: none;
  justify-content: center;
  align-items: center;
  padding-bottom: 16px;
}

section .about-company-card .row {
  max-width: 1200px;
  width: 1200px;
}

section .about-company-card .row .about-company-card-box {
  display: flex;
  flex-direction: none;
  flex-wrap: none;
  justify-content: space-between;
  align-items: none;
  width: 100%;
  height: 112px;
  padding-left: 0px;
  padding-right: 0px;
  gap: 24px;
  margin-bottom: 24px;
}

section .about-company-card .row .about-company-card-box img {
  padding-top: 10px;
  padding-bottom: 10px;
}

section .about-company-card .row .about-company-card-box .card-content {
  height: 100%;
}

section .about-company-card .row .about-company-card-box .card-content h5 {
  color: #17365E;
  font-family: Poppins;
  font-size: 20px;
  font-style: normal;
  font-weight: 600;
  line-height: 160%;
}

section .about-company-card .row .about-company-card-box .card-content p {
  color: #929EAE;
  font-family: Poppins;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 180%;
}

section .Legislation {
  display: flex;
  flex-direction: none;
  flex-wrap: none;
  justify-content: center;
  align-items: center;
  text-align: center;
}

section .Legislation .row {
  max-width: 1200px;
  width: 1200px;
}

section .Legislation .legislation-top {
  padding-top: 24px;
  padding-bottom: 40px;
  gap: 10px;
}

section .Legislation .legislation-top a {
  color: #0B0C0C;
  font-family: Poppins;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 160%;
  text-decoration: none;
  padding: 4px 12px;
}

section .Legislation .legislation-top a:hover {
  background-color: rgba(132, 121, 121, 0.1);
  text-decoration: underline;
}

section .Legislation .legislation-top span {
  color: #979797;
  font-family: Poppins;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 160%;
  padding: 4px 12px;
}

section .legislation-container {
  display: flex;
  flex-direction: none;
  flex-wrap: none;
  justify-content: center;
  align-items: center;
  text-align: center;
}

section .legislation-container .row {
  display: flex;
  flex-direction: none;
  flex-wrap: none;
  justify-content: space-between;
  align-items: none;
  max-width: 1200px;
  width: 1200px;
}

section .legislation-container .row .col-sm-8 {
  text-align: start;
}

section .legislation-container .row .col-sm-8 h4 {
  color: #17365E;
  font-family: Poppins;
  font-size: 20px;
  font-style: normal;
  font-weight: 600;
  line-height: 160%;
}

section .legislation-container .row .col-sm-8 ul {
  list-style: none;
  padding: 0;
}

section .legislation-container .row .col-sm-8 ul li {
  margin-bottom: 15px;
  color: #929EAE;
  font-family: Poppins;
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 160%;
}

section .legislation-container .row .rightLeg {
  text-align: end;
  width: 324px;
  height: 169px;
  position: sticky;
  top: 0;
}

section .legislation-container .row .rightLeg #menu {
  list-style: none;
  width: 100%;
  padding-left: 0px;
  border-right: 0.5px solid rgba(0, 0, 0, 0.1);
}

section .legislation-container .row .rightLeg #menu li {
  width: 100%;
  text-align: end;
  padding: 6px 0px;
  padding-right: 14px;
}

section .legislation-container .row .rightLeg #menu li a {
  text-decoration: none;
  color: #9A9A9A;
  text-align: right;
  font-family: Poppins;
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 160%;
  display: inline-block;
  width: 100%;
}

section .legislation-container .row .rightLeg #menu li a:hover {
  color: #333;
  text-align: right;
  font-family: Poppins;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 160%;
}

section .legislation-container .row .rightLeg #menu li .default-select {
  color: #34679A;
  text-align: right;
  font-family: Poppins;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 160%;
}

section .adjustments-container {
  display: flex;
  flex-direction: none;
  flex-wrap: none;
  justify-content: center;
  align-items: flex-start;
  margin-top: 50px;
  min-height: 540px;
  height: auto;
}

section .adjustments-container .row {
  max-width: 1464px;
  width: 1464px;
}

section .adjustments-container .row .nav .nav-item button.active {
  background-color: transparent;
  color: #929EAE !important;
}

section .adjustments-container .row .exit_btn {
  color: var(--fourth-color);
  font-family: Epilogue;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 160%;
  text-decoration: none;
  cursor: pointer;
}

section .adjustments-container .row .remove_btn_container {
  margin-top: 20px;
}

section .adjustments-container .row .remove_btn_container .remove_btn {
  color: #F00;
  font-family: Epilogue;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 160%;
  cursor: pointer;
  text-decoration: none;
  margin-top: 10px;
}

section .adjustments-container .row .exit_btn_container {
  margin-top: 10px;
  border-top: 0.5px solid var(--border-color);
  width: 100%;
  padding-top: 10px;
}

section .adjustments-container .row .container {
  display: flex;
  gap: 100px;
}

section .adjustments-container .row .container ul {
  max-width: 227px;
  min-width: 227px;
  width: 227px;
}

section .adjustments-container .row .container ul h4 {
  color: var(--fourth-color);
  font-family: Epilogue;
  font-size: 24px;
  font-style: normal;
  font-weight: 500;
  line-height: 160%;
  margin-bottom: 20px;
}

section .adjustments-container .row .container ul li button {
  color: var(--fourth-color);
  font-family: Epilogue;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 160%;
  padding-left: 0px;
}

section .adjustments-container .row .container #main label {
  color: var(--fourth-color);
  font-family: Epilogue;
  font-size: 12px;
  font-style: normal;
  font-weight: 500;
  line-height: 160%;
}

section .adjustments-container .row .container #main .form-control {
  width: 596px;
  height: 40px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  background: var(--third-color);
  border-radius: 0px;
  color: var(--fourth-color) !important;
}

section .adjustments-container .row .container #main .form-control::-moz-placeholder {
  color: var(--fourth-color) !important;
  font-family: Epilogue;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 160%;
}

section .adjustments-container .row .container #main .form-control::placeholder {
  color: var(--fourth-color) !important;
  font-family: Epilogue;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 160%;
}

section .adjustments-container .row .container #main .select_container {
  display: flex;
  gap: 12px;
  width: 596px;
}

section .adjustments-container .row .container #main .select_container .form-select {
  border-radius: 0px;
  color: var(--fourth-color);
  font-family: Epilogue;
  font-size: 12px;
  font-style: normal;
  font-weight: 500;
  line-height: 160%;
  border: 1px solid rgba(0, 0, 0, 0.1);
  background-color: var(--third-color);
  height: 40px;
}

section .adjustments-container .row .container #main .gender_content .gender {
  color: var(--fourth-color) !important;
  font-family: Epilogue;
  font-size: 12px;
  font-style: normal;
  font-weight: 500;
  line-height: 160%;
}

section .adjustments-container .row .container #main .btn {
  display: flex;
  flex-direction: none;
  flex-wrap: none;
  justify-content: center;
  align-items: center;
  padding: 7px 22px;
  background-color: #326598 !important;
  color: #FFF;
  text-align: center;
  font-family: Epilogue;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 160%;
  border-radius: 0px;
}

section .adjustments-container .row .container #pass .pass_eye_icon_div {
  display: flex;
  flex-direction: none;
  flex-wrap: none;
  justify-content: center;
  align-items: center;
  border: 1px solid rgba(0, 0, 0, 0.1);
  background: var(--third-color);
  width: 596px;
  height: 40px;
  border: 1px solid rgba(0, 0, 0, 0.1);
}

section .adjustments-container .row .container #pass .pass_eye_icon_div .form-control {
  border: none;
  background: var(--third-color);

  color: var(--fourth-color);
}

section .adjustments-container .row .container #pass .pass_eye_icon_div .form-control::-moz-placeholder {
  color: rgba(0, 0, 0, 0.4);
  font-family: Epilogue;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 160%;
}

section .adjustments-container .row .container #pass .pass_eye_icon_div .form-control::placeholder {
  color: var(--fourth-color);
  font-family: Epilogue;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 160%;
}

section .adjustments-container .row .container #pass .pass_eye_icon_div i {
  padding: 0px 10px;
  color: var(--fourth-color);
}

section .adjustments-container .row .container #pass .bottom {
  display: flex;
  flex-direction: none;
  flex-wrap: none;
  justify-content: flex-start;
  align-items: center;
  gap: 12px;
}

section .adjustments-container .row .container #pass .btn {
  display: flex;
  flex-direction: none;
  flex-wrap: none;
  justify-content: center;
  align-items: center;
  padding: 7px 22px;
  background-color: #326598 !important;
  color: #FFF;
  text-align: center;
  font-family: Epilogue;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 160%;
  border-radius: 0px;
}

section .adjustments-container .row .container #pass a {
  color: #326598;
  text-align: center;
  font-family: Epilogue;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 160%;
  padding: 7px 22px;
  text-decoration: none;
}

section .adjustments-container .row .container .table {
  width: 792px;
  background-color: red !important;

}

section .adjustments-container .row .container .table thead {
  border-bottom: 1px solid transparent;


}

section .adjustments-container .row .container .table thead tr .checkbox {
  width: 30px;
  background-color: var(--third-color);
  margin-top: 5px;
}

section .adjustments-container .row .container .table thead tr .checkbox input {
  border-radius: 2px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  background: var(--fourth-color);
}

section .adjustments-container .row .container .table thead tr .allCheck {
  color: var(--fourth-color);
  font-family: Epilogue;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 160%;
  background-color: var(--third-color);
}

section .adjustments-container .row .container .table thead tr .void {
  background-color: var(--third-color);
}

section .adjustments-container .row .container .table tbody tr td {
  color: var(--fourth-color);
  font-family: Epilogue;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 160%;

  background-color: var(--third-color);
}

section .adjustments-container .row .container .table tbody tr td .dropdown-remove {
  text-align: end;
}

section .adjustments-container .row .container .table tbody tr td .dropdown-remove i {
  color: #D9D9D9;
  cursor: pointer;
  padding: 5px;
}

section .adjustments-container .row .container .table tbody tr td .dropdown-remove i:hover {
  color: #000;
}

section .adjustments-container .row .container .table tbody tr td .dropdown-remove .dropdown-menu {
  min-width: 60px;
  height: 43px;
  max-width: 60px;
  background-color: var(--third-color);

}

section .adjustments-container .row .container .table tbody tr td .dropdown-remove .dropdown-menu li {
  width: 60px;
  min-width: 60px;
}

section .adjustments-container .row .container .table tbody tr td .dropdown-remove .dropdown-menu li .delete-row {
  width: 60px;
  background-color: var(--third-color);
  min-width: 60px;
  color: red;
}

section .adjustments-container .row .adjust_profile_img_container {
  display: flex;
  flex-direction: none;
  flex-wrap: none;
  justify-content: flex-start;
  align-items: center;
  width: 596px;
  height: 80px;
}



section .adjustments-container .row .adjust_profile_img_container .content {
  width: 400px;
  background-color: #fff;
  padding: 40px;
  border-radius: 15px;
  text-align: center;
  color: #333;
}

/*  */
.adjust_profile_img_container {
  position: relative;
  display: inline-block;
}

.adjust_profile_img_container img {
  display: block;
  width: 100%;
  height: auto;
}

.adjust_profile_img_container .delete-icon {
  position: absolute;
  bottom: 0px;
  left: 40px;
  background-color: #ffffff;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  padding: 5px;
  cursor: pointer;
  display: none;
  /* Initially hidden */
}

.adjust_profile_img_container .delete-icon i {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: red;
}

.adjust_profile_img_container:hover .delete-icon {
  display: block;
  /* Show icon on hover */
}

/*  */

section .adjustments-container .row .adjust_profile_img_container .content img {
  display: flex;
  flex-direction: none;
  flex-wrap: none;
  justify-content: center;
  align-items: center;
  width: 80px;
  height: 80px;
  background-color: #F5FAFF;
  border-radius: 50%;
  border: 2px solid #F5FAFF;
}

section .adjustments-container .row .adjust_profile_img_container .content label {
  display: flex;
  flex-direction: none;
  flex-wrap: none;
  justify-content: center;
  align-items: center;
  color: #326598;
  text-align: center;
  font-family: Epilogue;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 160%;
  display: flex;
  padding: 4px 12px;
  gap: 10px;
  width: 150px;
}

section .adjustments-container .row .adjust_profile_img_container .content input {
  display: none;
}

/* footer logo animation */
@keyframes rotation {
  0% {
    transform: rotateY(0deg);
  }

  44.3% {
    transform: rotateY(179deg);
  }

  64.3% {
    transform: rotateY(179deg);
  }

  100% {
    transform: rotateY(359deg);
  }
}

@keyframes rotationTopLogo {
  0% {
    transform: rotateY(360deg);
  }

  44.3% {
    transform: rotateY(270deg);
  }

  64.3% {
    transform: rotateY(270deg);
  }

  100% {
    transform: rotateY(360deg);
  }
}

/*# sourceMappingURL=style.css.map */



/* RESPONSIVE */



/* Media Query for low resolution  Tablets, Ipads */

@media (min-width: 768px) and (max-width: 1024px) {


  /* HOME PAGE */

  .dropdown-menu {
    max-width: 520px;
    height: 200px;
    overflow-y: scroll;

    .dropdown-submenu {
      width: 500px;
      position: absolute;
    }

  }


  header .navbar {
    & .navBar {
      & .navbar-collapse {
        .navbar-nav {
          gap: 15px;
          box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
          padding-bottom: 20px;


        }
      }
    }
  }

  .homepage-services .row {
    width: 100%;
  }

  .carouselBox .carousel-item {
    margin-top: 50px;
  }



  .content .home-text {
    max-width: 1200px;
    width: 300px;
  }

  .content .home-text .animate-text {
    margin: 0;
    overflow: hidden;
    max-width: 621px;
  }

  .content .home-text .animate-text span {
    color: var(--fourth-color);
    font-family: Epilogue;
    font-size: 32px;
    font-style: normal;
    font-weight: 600;
    line-height: 160%;
    display: inline-block;
    display: none;
  }


  /* Logo Carousel */
  .logos .logo-box .logo-carousel {
    display: flex;
    flex-direction: column;
    height: auto;

    .logo-flex {
      display: flex;
    }

    .item {
      min-width: 300px;
      height: 123px;
    }
  }

  .logos .logo-desktop {
    display: none;
  }

  .logos .logo-tablet {
    display: flex;
  }

  /* graduates */

  .graduates .graduates-box .item {
    width: 254px;
    height: 367px;
  }

  .graduates .graduates-box {
    width: 100%;
  }


  /* Services */

  .homepage-services .row .services-content .logo-carousel {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  }

  .carouselBox {
    top: 2%;
    right: 14%;
  }


  /* Comments */
  .comments-contaniner {
    margin-top: 140px;
  }

  .comments-contaniner .users-content .comments {
    width: 100%;
    text-align: start;
  }

  .comments-contaniner .row .users-content .users {
    display: flex;
    align-items: end;
    margin-right: 30px;
  }

  .comments-contaniner .row .users-content .comments {
    padding: 20px;
  }

  .comments-contaniner .row .users-content .comments .comment {
    width: 100%;
  }

  .comments-contaniner .row .users-content .users .user-box {
    width: 316px !important;
  }

  .comments-contaniner .row .users-content .users .user-box:nth-child(even) {
    margin-left: 0px;
  }


  /* Seminars */

  .seminar-contaniner .row {
    display: flex;
    flex-direction: row;
  }

  .seminar-contaniner .row .seminar-left {
    width: 100%;
  }

  .seminar-contaniner .row .seminar-right {
    width: 100%;
    background: var(--third-color);
    padding: 20px 0px;
  }

  .container .row {
    width: 100%;
    position: absolute;
    bottom: 10px;
    text-align: center;
  }

  .content .home-text {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
  }

  /* Service Item Page */


  .environmentalDoc-content .row {
    display: flex;
    flex-direction: column;
    padding: 20px;

    .environmentalDoc-content-right {
      max-width: 100%;
    }
  }

  .environmentalDoc-content .row .environmentalDoc-content-left {
    width: 100%;
  }

  .environmental-services .row .environmental-services-content {
    display: flex;
    justify-content: center;
    gap: 20px;
  }

  #myModalEnvironmentalDoc .modal-dialog-centered {
    justify-content: center;
  }

  #myModalApplySeminar .modal-dialog-centered {
    justify-content: center;
  }


  /* Projects Page */

  .projects-content .row .about-content-container .item {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }

  .projects-content .row .about-content-container .content-img {
    width: 100%;
  }

  .projects-content .row .about-content-container .text-content {
    width: 100%;
  }

  /* About Page */

  .about-content .row .about-content-bottom .content-img {
    width: 100%;
    height: auto;
  }

  /* Profile Page */

  .adjustments-container .align-items-start {
    display: flex;
    flex-direction: column-reverse;
  }

  .adjustments-container .row .container #main .form-control {
    width: 100% !important;
  }

  section .adjustments-container .row .container #main .select_container {
    width: 100%;
  }


  section .adjustments-container .row .container .table {
    width: 100%;
  }

  /* Contact  Page*/

  .contact-content .row .contact-content-container {
    display: flex;
    flex-direction: column;
  }

  .contact-content .row .contact-content-container .contact-content-container-left form div input {
    width: 100%;
  }

  .contact-content .row .contact-content-container .contact-content-container-left {
    width: 100%;
  }

  /* Media */

  .live_video {

    .video {
      width: 100%;
      height: 342px;
      margin: 0 auto;
      background-color: gray;
    }
  }


  /* check certificate */

  .sertificate-desktop {
    display: none;
  }

  .checkCertificate-content .sertificate-mobile {
    display: block;
    border-radius: 4px;
    margin-bottom: 24px;
    width: 100%;
    padding: 12px;
    border: 1px solid rgba(0, 0, 0, 0.10);

  }

  .checkCertificate-content .sertificate-mobile .certificate-item {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .checkCertificate-content .sertificate-mobile h4 {
    color: #737373;
    margin-bottom: 0px;
    font-family: Epilogue;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 160%;
  }

  .checkCertificate-content .sertificate-mobile span {
    color: var(--TextColor, #111);

    font-family: Epilogue;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 160%;
  }






}



/* Media Query for mobile device */

@media (max-width: 480px) {
  /* Service Item Page */

  .dropdown-menu {
    max-width: 320px;
    height: 200px;
    overflow-y: scroll;
    border: none;

    .dropdown-submenu {
      width: 300px;
      position: absolute;
    }

  }




  header .navbar {
    & .navBar {
      & .navbar-collapse {
        .navbar-nav {
          gap: 15px;
          box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;

        }
      }
    }
  }


  .page-titles h3 {
    font-size: 24px;
  }

  .carouselBox {
    top: 1%;
    left: 1%;
  }

  .carouselBox .carousel-img-size {
    width: 300px;
  }

  .carouselBox .carousel-img-size img {
    width: 100%;
  }

  .homepage-services .row {
    width: 100%;
  }


  .content .home-text {
    max-width: 1200px;
    width: 100%;
    margin-top: 250px;
    text-align: center;
  }

  .content .home-text .animate-text {
    margin: 0;
    overflow: hidden;
    max-width: 621px;
  }

  .content .home-text .btn-content {
    margin: 0 auto;
  }

  .content .home-text .animate-text span {
    color: var(--fourth-color);
    font-family: Epilogue;
    font-size: 32px;
    font-style: normal;
    font-weight: 600;
    line-height: 160%;
    display: inline-block;
    display: none;
  }


  .logos .logo-desktop {
    display: none;
  }

  .logos .logo-box .logo-carousel {
    display: flex;
    flex-direction: column;
    height: auto;

    .logo-flex {
      display: flex;
      flex-direction: column;
    }

    .item {
      min-width: 300px;
      height: 123px;
    }
  }

  .logos .logo-tablet {
    display: flex;
  }


  .graduates .graduates-box {
    width: 100%;
  }

  .seminar-contaniner {
    height: auto;

  }

  #myModalLegislation .modal-dialog {
    max-width: 100%;
  }


  #myModalLegislation .modal-content .modal-body {
    display: flex;
    flex-direction: column;
  }

  #myModalLegislation .modal-content .modal-body .modal-body-left {
    border: none;
  }




  .environmentalDoc-content .row {
    display: flex;
    flex-direction: column;
    padding: 20px;

    .environmentalDoc-content-right {
      max-width: 100%;
    }
  }

  .environmentalDoc-content .row .environmentalDoc-content-left {
    width: 100%;
  }

  .environmental-services .row .environmental-services-content {
    display: flex;
    justify-content: center;
    gap: 20px;
  }

  .seminar-contaniner .seminar-desktop {
    display: none;
  }

  .seminar-contaniner .row .seminar-right {
    margin-bottom: 20px;
  }

  .seminar-contaniner #seminar-mobile {
    display: block;
    padding: 10px;

    .card-bottom {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 10px;
    }

    .seminar_card {
      border-radius: 4px;
      border: .5px solid var(--border-color);

      padding: 10px;
      margin-top: 10px;

      h3 {
        color: var(--fourth-color);
      }

      span {
        color: var(--fourth-color);
      }


      .seminar_date {
        border-radius: 46px;
        background: var(--third-color);
        padding: 2px 10px;

        color: var(--fourth-color)
      }

      .apply-button {
        text-decoration: none;
        color: var(--btn-primary);
        font-weight: 500;
      }
    }
  }

  .homepage-services .row .services_content .info-box {
    width: 100%;
  }


  .comments-contaniner {
    margin-top: 40px;
  }

  .comments-contaniner .row .users-content {
    height: 450px;
  }

  .comments-contaniner .users-content .comments {
    width: 100%;
    text-align: start;
  }

  .comments-contaniner .row .users-content .comments {
    padding: 20px;
  }

  .comments-contaniner .row .users-content .comments .comment {
    width: 100%;
  }

  .comments-contaniner .row .users-content .users {
    width: 100%;
  }

  .comments-contaniner .row .users-content .users .user-box {
    width: 316px !important;
  }

  .comments-contaniner .row .users-content .users .user-box:nth-child(even) {
    margin-left: 0px;
  }


  .comments-contaniner .row .users-content {
    display: flex;
    flex-direction: column;
  }

  .row .services-content .logo-carousel {
    justify-content: center;
  }


  /* Projects Page */

  .projects-content .row .about-content-container .item {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }

  .projects-content .row .about-content-container .content-img {
    width: 100%;
  }

  .projects-content .row .about-content-container .text-content {
    width: 100%;
  }


  /* About Page */

  .about-content .row .about-content-bottom .content-img {
    width: 100%;
    height: auto;
  }

  .about-content {
    & .row {
      .about-content-bottom {
        display: flex;
        flex-direction: column;
      }
    }
  }

  .about-content {
    & .row {
      & .about-content-bottom .text-content {
        width: 100%;
      }
    }
  }


  /* Profile Page */

  .adjustments-container .align-items-start {
    display: flex;
    flex-direction: column-reverse;
  }

  .adjustments-container .row .container #main .form-control {
    width: 100% !important;
  }

  section .adjustments-container .row .container #main .select_container {
    width: 100%;
  }

  section .adjustments-container .row .container .table {
    width: 100%;
  }


  section .adjustments-container .row .adjust_profile_img_container {
    width: 100%;
  }

  section .adjustments-container .row .container #pass .pass_eye_icon_div {
    width: 100%;
  }


  /* Contact  Page*/

  .contact-content .row .contact-content-container {
    display: flex;
    flex-direction: column;
  }


  .contact-content .row .contact-content-container .contact-content-container-left {
    padding: 0px 10px;
  }

  .contact-content .row .contact-content-container .contact-content-container-left form div input {
    width: 100%;
  }

  .contact-content .row .contact-content-container .contact-content-container-left {
    width: 100%;
  }

  /* Service Page */

  .environmentalDoc-container {
    height: auto;

    #title {
      font-size: 24px;
    }
  }

  .environmentalDoc-breadcrumb {
    height: auto;

    .row div {
      flex-wrap: nowrap;
    }

  }

  .paginate-container .row .col-sm-12 .pagination {
    display: flex;
    flex-wrap: wrap;
  }

  #myModalEnvironmentalDoc .modal-dialog-centered {
    justify-content: center;
  }

  #myModalApplySeminar .modal-dialog-centered {
    justify-content: center;
  }

  /* Instruction Page */

  .InsAndDoc-content-container .row .InsAndDoc-content-container-center {
    .services-content {
      width: 90%;
    }
  }


  /* Media */

  .live_video {

    .video {
      width: 100%;
      height: 212px;
      margin: 0 auto;
      background-color: gray;
    }
  }


  /* Chertificate */

  .sertificate-desktop {
    display: none;
  }

  .checkCertificate-content .sertificate-mobile {
    display: block;
    border-radius: 4px;
    margin-bottom: 24px;
    width: 100%;
    padding: 12px;
    border: 1px solid rgba(0, 0, 0, 0.10);

  }

  .checkCertificate-content .sertificate-mobile .certificate-item {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .checkCertificate-content .sertificate-mobile h4 {
    color: #737373;
    margin-bottom: 0px;
    font-family: Epilogue;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 160%;
  }

  .checkCertificate-content .sertificate-mobile span {
    color: var(--TextColor, #111);

    font-family: Epilogue;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 160%;
  }

}


/* Footer */

@media (min-width: 768px) and (max-width: 1024px) {

  footer {
    background-image: none;
    height: 577px;
    background: var(--footer-bg-color);

  }

  footer .footerContainer .menu_footer {
    display: flex;
  }

  footer .footerContainer .row {
    display: flex;
    flex-direction: column;
    flex-direction: column-reverse;
    width: 100%;

  }

  footer .footerContainer .row .float {
    float: right;
  }

  footer .footerLogo {
    width: 150px;
    height: 150px;
  }

  footer .footerContainer .desktop {
    display: none;
  }

  footer .footerContainer .mobile {
    display: flex;
  }
}



@media (max-width: 480px) {
  footer {
    background-image: none;
    height: 577px;
    background: linear-gradient(180deg, #C9E4ED 0%, #ABD2EF 100%);

  }

  footer .footerContainer .menu_footer {
    display: flex;
  }

  footer .footerContainer .row {
    display: flex;
    flex-direction: column;
    flex-direction: column-reverse;
    width: 100%;

  }

  footer .footerContainer .row .float {
    float: right;
  }

  footer .footerContainer .single-box .footer-form {
    width: 100%;
  }

  footer .footerContainer .single-box .footer-form .form-control {
    width: 100%;
  }

  footer .footerLogo {
    width: 150px;
    height: 150px;

    left: 50%;

    transform: translate(-50%);
  }

  footer .footerContainer .desktop {
    display: none;
  }

  footer .footerContainer .mobile {
    display: flex;
  }
}