@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
/* root styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box; }

li {
  list-style: none; }

a {
  text-decoration: none; }

button {
  border: none;
  outline: none;
  cursor: pointer;
  font-family: Poppins; }

button:disabled {
  opacity: 0.5; }

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 100px; }

body {
  font-family: Poppins, Arial, Helvetica, sans-serif; }

.container {
  margin: 0 auto;
  padding: 0 16px;
  position: relative; }

.container-fluid {
  padding: 0 16px;
  width: 100%;
  position: relative; }

@media screen and (max-width: 576px) {
  .container {
    max-width: 100%; } }

@media screen and (min-width: 576px) {
  .container {
    max-width: 100%; } }

@media screen and (min-width: 768px) {
  .container {
    max-width: 720px; } }

@media screen and (min-width: 992px) {
  .container {
    padding: 0;
    max-width: 960px; } }

@media screen and (min-width: 1200px) {
  .container {
    padding: 0;
    max-width: 1140px; } }

@media screen and (min-width: 1400px) {
  .container {
    padding: 0;
    max-width: 1320px; } }

@media screen and (min-width: 1600px) {
  .container {
    padding: 0;
    max-width: 1500px; } }

.button-df {
  width: 146px;
  height: 46px;
  color: #6000b8;
  background: #ffffff 0% 0% no-repeat padding-box;
  border: 1px solid #6000b8; }

.btn-dark {
  width: 146px;
  height: 46px;
  background-color: #2b2a2a;
  color: white; }

.button-df:hover {
  background-color: #6000b8;
  color: white; }

.h-lines {
  color: #6000b8;
  display: flex;
  align-items: center;
  position: relative; }

.h-lines span {
  display: flex;
  align-items: center;
  position: relative; }

.h-lines::before {
  content: "";
  margin-right: 8px;
  display: inline-block;
  width: 48px;
  height: 4px;
  background-color: #6000b8;
  border-radius: 4px; }

.h-lines span::before {
  content: "";
  margin-right: 16px;
  display: inline-block;
  width: 16px;
  height: 4px;
  background-color: #fe007c;
  border-radius: 4px; }

section {
  margin-bottom: 80px;
  position: relative; }

.page-title {
  margin-top: 100px;
  background-color: #1B1C1D; }

.page-title > .container {
  padding: 34px 0; }

.page-title h1 {
  color: #ffffff; }

h2 {
  margin-bottom: 56px; }

li {
  margin-bottom: 16px; }

/* banner */
.head .banner {
  height: 500px; }

.r-more {
  padding: 15px 20px;
  color: white;
  font-size: 16px;
  position: relative;
  z-index: 10;
  box-shadow: 0 0 2px; }

.r-more:hover {
  color: #fe007c; }

.r-more::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #6000b8;
  z-index: -1; }

.r-more::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  background-color: white;
  z-index: -1;
  transition: 0.4s; }

.r-more:hover.r-more::after {
  width: 100%; }

.r-more:hover img {
  filter: invert(0.7); }

.right-arrow {
  width: 24px;
  height: 24px; }

.align-center {
  display: flex;
  align-items: center; }

.leftmargin {
  margin-left: 8px; }

.no-data {
  margin: 40px 0;
  font-size: 17px;
  text-align: center;
  opacity: 0.5; }

.social-row {
  display: flex; }

@media screen and (max-width: 1400px) {
  section {
    margin-bottom: 80px; } }

@media screen and (max-width: 800px) {
  section {
    margin-bottom: 50px;
    position: relative; }
  .h-lines::before {
    margin-right: 4px;
    width: 16px;
    height: 4px; }
  .h-lines span::before {
    margin-right: 12px;
    width: 8px;
    height: 4px; }
  h2 {
    margin-bottom: 32px; }
  .button-df {
    width: 126px;
    height: 36px; }
  .btn-dark {
    width: 126px;
    height: 36px; }
  .page-title {
    margin-top: 56px; }
  .page-title > .container {
    padding: 24px 16px; }
  /* banner */
  .head .banner {
    height: 320px; }
  .r-more {
    padding: 10px 15px;
    font-size: 17px; }
  .social-f {
    width: 48px;
    height: 48px; }
  .social-f img {
    width: 32px;
    height: 32px; } }

.top {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: #1b1c1d;
  border-bottom: 1px solid #343a40;
  z-index: 100;
  transition: 0.4s; }

.top > .container {
  padding: 24px 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  transition: 0.4s; }

.scrolled .top > .container {
  padding: 16px 0; }

.top .logo img {
  width: 200px;
  height: 50px;
  object-fit: contain; }

.logo .black-logo {
  display: none; }

.nav-list {
  display: flex;
  align-items: center; }

.nav-link {
  margin-right: 32px;
  padding-bottom: 2px;
  color: #adb5bd;
  font-size: 16px;
  font-weight: 500; }

.nav-link:hover {
  color: #fff; }

.nav-link.active {
  font-weight: 600;
  color: #e9ecef;
  border-bottom: 2px solid #fe007c; }

.dropdown {
  position: relative;
  display: inline-block; }

.dropdown-btn {
  padding: 8px 0;
  display: flex;
  align-items: center; }

.dropdown-svg {
  margin-left: 8px;
  width: 8px;
  height: 8px;
  object-fit: contain; }

.dropdown-content {
  position: absolute;
  white-space: nowrap;
  background-color: white;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
  display: none; }

.dropdown-link {
  display: block;
  padding: 12px;
  color: #4e4e4e;
  font-size: 14px; }

.dropdown-link:hover {
  color: #1b1c1d;
  background-color: #f8f9fa; }

.dropdown:hover .dropdown-content {
  display: block; }

.contact-btn {
  margin-left: 16px;
  padding: 12px 32px;
  display: grid;
  place-items: center;
  font-size: 14px;
  font-weight: 400;
  color: #ffffff;
  background: #6000b8 0% 0% no-repeat padding-box;
  cursor: pointer; }

.contact-btn img {
  width: 20px;
  height: 20px;
  object-fit: contain; }

.menu-bar {
  display: none; }

.contact-bar {
  display: none; }

.hide-menu {
  display: none; }

.contact-side {
  position: fixed;
  padding: 0 72px;
  top: 0;
  right: 0;
  height: 100vh;
  width: 500px;
  background-color: white;
  overflow: auto;
  z-index: 100;
  transform: translateX(500px);
  transition: 0.4s; }

.contact-side > .contact-cont {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center; }

.toggled .contact-side {
  transform: translateX(0);
  box-shadow: 0px 6px 40px #637abb7a; }

.contact-side h3 {
  margin-bottom: 8px;
  text-align: center;
  color: #6000b8;
  font-size: 38px; }

.contact-side p {
  text-align: center;
  font: normal normal normal 16px/24px Poppins;
  color: #4e4e4e;
  margin-bottom: 64px; }

.location-img {
  width: 100%;
  height: unset;
  object-fit: contain;
  margin-bottom: 64px; }

.contact-side ul {
  margin-bottom: 20px; }

.contact-side li {
  margin-bottom: 40px;
  color: #4e4e4e;
  font: normal normal normal 16px/30px Poppins;
  display: flex;
  align-items: center; }

.contact-side .info a {
  color: #4e4e4e;
  font: normal normal normal 16px/30px Poppins;
  display: flex;
  align-items: center; }

.contact-side .info img {
  width: 32px;
  height: 32px; }

.contact-side .info span {
  margin-left: 16px; }

.hide-contact {
  cursor: pointer;
  position: absolute;
  top: 24px;
  left: 24px; }

.hide-contact img {
  width: 32px;
  height: 32px;
  object-fit: contain;
  transform: rotate(180deg); }

.social-f {
  padding: 8px;
  margin-right: 16px;
  width: 48px;
  height: 48px;
  background-color: #6000b8; }

.contact-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
  z-index: 99; }

.footer-top {
  color: black;
  background-color: #f9f3ff;
  position: relative;
  z-index: 9;
  overflow: hidden; }

.footer-top::before {
  content: "";
  width: 640px;
  height: 640px;
  position: absolute;
  top: 40px;
  left: 40px;
  background-image: url("../img/bg/footer-dots.svg");
  z-index: -1; }

.footer-top::after {
  content: "";
  width: 849px;
  height: 419px;
  position: absolute;
  top: 20px;
  right: 20px;
  background-image: url("../img/bg/footer-map.svg");
  z-index: -1; }

.footer-top .container {
  padding: 82px 0;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap-reverse; }

.footer-contact {
  flex: 2;
  min-width: 300px; }

.footer-top .right {
  flex: 3;
  margin-bottom: 32px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap; }

.footer-top .right > div {
  flex: 1;
  min-width: 300px;
  margin-right: 40px;
  margin-bottom: 24px; }

.footer-top h3 {
  margin-bottom: 16px;
  color: #6000b8;
  font-size: 24px;
  font-weight: 700; }

.footer-top p {
  font: normal normal normal 16px/1.5 Poppins; }

.footer-top a {
  color: #000000;
  font: normal normal medium 16px/1 Poppins;
  display: block; }

.footer-contact > div {
  margin-bottom: 24px; }

.footer-contact h3 {
  margin-bottom: 16px; }

.footer-contact a {
  display: flex; }

.contact-num a {
  font-weight: 600; }

.footer-icon {
  width: 24px;
  height: 24px;
  object-fit: contain; }

.footer-links a {
  margin-bottom: 12px;
  font-weight: 600; }

.footer-bottom {
  background-color: #1b1c1d; }

.footer-bottom .container {
  padding: 20px 0;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap; }

.footer-social {
  display: flex; }

.footer-social img {
  margin-right: 40px;
  width: 24px;
  height: 24x;
  object-fit: contain; }

.footer-social img:hover {
  filter: grayscale(1.5); }

.footer-bottom p,
.footer-bottom a {
  font: normal normal normal 16px/40px Poppins;
  color: #adb5bd; }

.footer-nav a {
  margin-right: 40px; }

.footer-nav a:hover {
  color: white; }

.footer-nav a:last-child {
  margin-right: 0; }

@media screen and (max-width: 1400px) {
  .top .logo img {
    width: 140px; } }

@media screen and (max-width: 800px) {
  .contact-btn {
    display: none; }
  .menu-bar {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    cursor: pointer;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 99; }
  .contact-bar {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    cursor: pointer;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 99; }
  .menu-bar img,
  .contact-bar img {
    width: 24px;
    height: 24px; }
  .menu-bar img {
    transform: rotate(180deg); }
  .logo .black-logo {
    display: none; }
  .logo .white-logo {
    display: block; }
  .top > .container {
    padding: unset;
    min-height: 56px;
    background-color: #1b1c1d;
    justify-content: center;
    border: unset; }
  .scrolled .top .container {
    padding: unset;
    min-height: 56px; }
  .top .logo img {
    margin: 0;
    width: 120px; }
  .nav-list {
    position: fixed;
    top: 0;
    left: 0;
    padding: 48px 100px;
    width: 100%;
    height: 100vh;
    display: block;
    background-color: white;
    transform: translateX(-100%);
    overflow: auto;
    z-index: 100;
    transition: 0.4s; }
  .nav-link {
    color: #4e4e4e; }
  .nav-link.active {
    color: #6000b8;
    border-bottom: 2px solid #6000b8; }
  .nav-link {
    display: block;
    margin: 0;
    margin-bottom: 40px;
    color: #4e4e4e;
    font-size: 16px;
    text-align: center;
    border: none; }
  .nav-link.active {
    color: #6000b8;
    border-bottom: 1px solid #6000b8; }
  .dropdown {
    display: block;
    width: 100%;
    margin-bottom: 0 20px;
    text-align: center; }
  .dropdown .nav-link {
    display: flex;
    justify-content: center; }
  .menu-toggled.menu-bar {
    z-index: 999; }
  .menu-toggled .nav-list {
    transform: translateX(0); }
  .dropdown-content {
    margin-bottom: 40px;
    position: static;
    padding: 0;
    background-color: unset;
    box-shadow: unset; }
  .dropdown:hover .nav-link {
    margin-bottom: 16px; }
  .hide-menu {
    display: block;
    position: absolute;
    top: 24px;
    right: 24px;
    z-index: 999;
    cursor: pointer; }
  .hide-menu img {
    width: 24px;
    height: 24px; }
  .footer-top .container {
    padding: 32px 16px; }
  .footer-top .container > div {
    padding: 0;
    padding-bottom: 24px;
    flex: 1; }
  .footer-contact {
    margin-right: 0; }
  .footer-top h3 {
    font: normal normal bold 22px/28px Poppins; }
  .footer-top a {
    font: normal normal medium 16px/22px Poppins;
    display: block; }
  .footer-bottom .container {
    justify-content: center; }
  .footer-bottom p,
  .footer-bottom a {
    font: normal normal normal 16px/22px Poppins;
    color: #adb5bd; }
  .footer-bottom .container > div {
    margin: 10px;
    text-align: center; } }