/* -------------  header -------------- */
body{
    font-family: "Manrope";
}
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
a{
    color: #fff;
    text-decoration: none;
}

.a:hover{
    color: #ba9bc5;
}
.hero_section_back_img img{
    width: 100%;
    object-fit: cover;
    position: absolute;
    height: 50rem;
}
.hero_section_container{
    position: relative;
    margin-left: auto;
    margin-right: auto;
    height: 50rem;
}


.hero_section_nav{
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 99px;
    position: absolute;
    padding-top: 25px;
}
.nav_logo_img img{
    padding: 2px;
    width: 180px;
    text-align: center;
    font-size: x-large;
    height: 91px;
}

.nav_menu_show ul {
  list-style: none;
  display: flex;
  justify-content: center;
  gap: 32px;
  padding-top: 10px;
}
.nav_menu_show li a {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  font-size: 18px;
  color: #000;
  transition: color 0.3s;
}
.nav_menu_show li a::after {
  content: "";
  position: absolute;
  bottom: -4px;
  left: 50%;
  transform: translateX(-50%) scaleX(0);
  transform-origin: center;
  width: 100%;
  height: 2px;
  background-color: #6A15FA;
  transition: transform 0.3s ease;
}

.nav_menu_show li a:hover::after {
  transform: translateX(-50%) scaleX(1);
}

.nav_join_us{
    transition: transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
    border-radius: 4px;
}
.nav_join_us{
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  font-size: 18px;
  color: #000;
  transition: color 0.3s;
}
.nav_join_us::after {
  content: "";
  position: absolute;
  bottom: -4px;
  left: 50%;
  transform: translateX(-50%) scaleX(0);
  transform-origin: center;
  width: 100%;
  height: 2px;
  background-color: #6A15FA;
  transition: transform 0.3s ease;
}
.nav_join_us:hover::after {
  transform: translateX(-50%) scaleX(1);
}
.nav_join_us_side{
    transition: transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
    border: 2px solid #6A15FA;
    border-radius: 4px;
}
.btn_nav_join_side{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 11px;
    padding: 9px 25px ;
    text-align: center;
    font-size: medium;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
    transition: background 0.5s ease, transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
    border: none;
    background: transparent;
}
.btn_nav_join_side svg path{
    fill: #0C0C0C;
}

.btn_nav_join{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 11px;
    text-align: center;
    font-size: medium;
    transition: background 0.5s ease, transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
    border: none;
    background: transparent;

}
.btn_nav_join svg path{
    fill: #0C0C0C;
}
/*-----------------------------popup--------------------------------------*/
.popup_overlay_header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.popup_overlay_header.active {
    display: flex;
    opacity: 1;
}

.popup_content_header {
    background: white;
    border-radius: 15px;
    width: 90%;
    max-width: 800px;
    max-height: 90vh;
    position: relative;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    animation: popupFadeIn 0.4s ease-out;
    overflow-y: auto;
}

@keyframes popupFadeIn {
    from {
        opacity: 0;
        transform: translateY(-50px) scale(0.9);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.popup_container_header {
    padding: 40px 30px;
    position: relative;
}

.popup_close_btn_header{
    position: absolute;
    top: 15px;
    right: 20px;
    background: none;
    border: none;
    font-size: 30px;
    color: #666;
    cursor: pointer;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.3s ease;
    z-index: 10;
}

.popup_close_btn_header:hover {
    background: #f5f5f5;
    color: #390393;
    transform: rotate(90deg);
}

.popup_header_header h1 {
    color: #390393;
    text-align: center;
    text-transform: uppercase;
    font-weight: 900;
    font-size: 2.5rem;
    letter-spacing: 2px;
    margin-bottom: 30px;
    position: relative;
    padding-bottom: 15px;
}


.popup-image {
    width: 100%;
    max-width: 250px;
    display: block;
    margin: 0 auto 30px;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.popup_body_header h2 {
    color: #333;
    font-size: 14px;
    text-align: center;
    line-height: 1.5;
    margin-bottom: 50px;
    font-weight: 600;
    margin-top: -38px;
}

.subscribe-form {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.subscribe-form input[type="email"] {
    padding: 16px 20px;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    font-size: 1rem;
    font-family: inherit;
    transition: all 0.3s ease;
    outline: none;
}

.subscribe-form input[type="email"]:focus {
    border-color: #8e6ac1;
    box-shadow: 0 0 0 3px rgba(142, 106, 193, 0.2);
}

.subscribe-form button[type="submit"] {
    padding: 16px 20px;
    background: linear-gradient(135deg, #8e6ac1, #7752b8);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.subscribe-form button[type="submit"]:hover {
    background: linear-gradient(135deg, #7752b8, #6342a3);
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(119, 82, 184, 0.3);
}

.subscribe-form button[type="submit"]:active {
    transform: translateY(0);
}





/* form */
.popup_body_header form{
  margin-top: -45px;
  padding: 10px 32px;
}

.popup_body_header .user_box_school{
  position: relative;
}
.popup_body_header{
    padding: 25px 40px 10px 40px;
    margin-left: auto;
    margin-right: auto;
    background-color: transparent;
    border-radius: 4px;
}

.popup_body_header form{
    padding: 30px 0 0 0;
}
.popup_body_header form .form_row_join_header{
    display: flex;
    margin: 32px 0;
}
form .form_row_join_header .input_data_join_header{
    width: 100%;
    height: 40px;
    margin: 10px 20px;
    position: relative;
}
.input_data_join_header input,
.textarea textarea{
    display: block;
    width: 100%;
    height: 100%;
    border: none;
    padding: 0px;
    font-size: 17px;
    border-bottom: 2px solid #4F04CE;
    background-color: transparent;
    }
.input_data_join_header input:focus-visible , .textarea textarea:focus-visible {
    outline: none;
}
.input_data_join_header input:focus ~ label, .textarea textarea:focus ~ label,
.input_data_join_header input:valid ~ label, .textarea textarea:valid ~ label{
    transform: translateY(-20px);
    font-size: 14px;
    color: #4F04CE;
}
.textarea textarea{
    resize: none;
    padding-top: 0px;
}
.input_data_join_header label{
    position: absolute;
    pointer-events: none;
    bottom: 10px;
    font-size: 16px;
    transition: all 0.3s ease;
    color: #220258;
}
.input_data_join_header .underline_join_header{
    position: absolute;
    bottom: 0;
    height: 2px;
    width: 100%;
}
.input_data_join_header .underline_join_header:before{
    position: absolute;
    content: "";
    height: 2px;
    width: 100%;
    background: #bf9ff6;
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 0.3s ease;
}
.input_data_join_header input:focus ~ .underline_join_header:before,
.input_data_join_header input:valid ~ .underline_join_header:before,
.textarea textarea:focus ~ .underline_join_header:before,
.textarea textarea:valid ~ .underline_join_header:before{
    transform: scale(1);
}
.role-select{
    display: flex;
    flex-direction: row;
    padding-left: 21px;
    gap: 36px;
    color: #390393;
    flex-wrap: wrap;
}
.role-select label {
    display: block;
    margin-bottom: 6px;
    cursor: pointer;
}
.input_data_join_header .file_label{
    bottom: 44px;
}
.input_data_join_header input[type="file"] {
    font-size: 14px;
    color: #5d5d5d;
    cursor: pointer;
}
@media (max-width: 700px) {
  .popup_body_header .join_title{
    font-size: 30px;
  }
  .popup_body_header form{
    padding: 10px 0 0 0;
  }
  .popup_body_header form .form_row_join_header{
    display: block;
  }
  form .form_row_join_header .input_data_join_header{
    margin: 35px 0!important;
  }
  .submit-btn .input_data_join_header{
    width: 40%!important;
  }
}

.popup_body_header form button {
  position: relative;
  display: inline-block;
  padding: 10px 20px;
  font-weight: bold;
  color: #390393;
  font-size: 16px;
  text-decoration: none;
  text-transform: uppercase;
  overflow: hidden;
  transition: .5s;
  margin-top: 20px;
  letter-spacing: 3px;
  border: none;
  background: none;
}

.popup_body_header button:hover {
  background: #390393;
  color: #ede3ff;
  border-radius: 4px;
}

.popup_body_header button span {
  position: absolute;
  display: block;
}

.popup_body_header button span:nth-child(1) {
  top: 0;
  left: -100%;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, transparent, #390393);
  animation: btn-anim1 1.5s linear infinite;
}

@keyframes btn-anim1 {
  0% {
    left: -100%;
  }

  50%,100% {
    left: 100%;
  }
}

.popup_body_header button span:nth-child(2) {
  top: -100%;
  right: 0;
  width: 2px;
  height: 100%;
  background: linear-gradient(180deg, transparent, #390393);
  animation: btn-anim2 1.5s linear infinite;
  animation-delay: .375s
}

@keyframes btn-anim2 {
  0% {
    top: -100%;
  }

  50%,100% {
    top: 100%;
  }
}

.popup_body_header button span:nth-child(3) {
  bottom: 0;
  right: -100%;
  width: 100%;
  height: 2px;
  background: linear-gradient(270deg, transparent, #390393);
  animation: btn-anim3 1.5s linear infinite;
  animation-delay: .75s
}

@keyframes btn-anim3 {
  0% {
    right: -100%;
  }

  50%,100% {
    right: 100%;
  }
}

.popup_body_header button span:nth-child(4) {
  bottom: -100%;
  left: 0;
  width: 2px;
  height: 100%;
  background: linear-gradient(360deg, transparent, #390393);
  animation: btn-anim4 1.5s linear infinite;
  animation-delay: 1.125s
}

@keyframes btn-anim4 {
  0% {
    bottom: -100%;
  }

  50%,100% {
    bottom: 100%;
  }
}
.input_data_join_header input[type="file"]::-webkit-file-upload-button {
  background: #4F04CE;
  color: white;
  border: none;
  padding: 8px 15px;
  cursor: pointer;
  font-weight: bold;
}
.input_data_join_header input[type="file"]::-webkit-file-upload-button:hover {
  background: #dbc8ff;
  color: #4F04CE;
}


/*-------------------------------------------*/
.hero_section_content{
    position: absolute;
    display: flex;
    flex-direction: column;
    gap: 35px;
}
.header_text{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}
.header_title{
    text-align: center;
    background: linear-gradient(90deg, #0C0C0C, #4F04CE);
    background-clip: text;
    color: transparent;
    line-height: 140%;
}
.header_body{
    font-weight: 400;
    text-align:center;
}

.header_btn {
    display: flex;
    border-radius: 4px;
    padding: 12px 25px;
    gap: 10px;
    background: linear-gradient(90deg, #6A15FA, #8B49FB);
    color: #fff;
    margin-left: auto;
    margin-right: auto;
    align-items: center;
    justify-content: center;
    transition: background 0.5s ease, transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.header_btn:hover {
    background: linear-gradient(90deg, #390393, #4F04CE);
    cursor: pointer;
}

.header_button_text a:hover{
    color: #ba9bc5!important;
}
.header_btn .header_button_text {
    height: 24px;
    width: 119px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    transition: transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.header_btn:hover .header_button_text {
    transform: translateX(6px);
}

.header_btn svg {
    fill: #fff;
    stroke: #fff;
    stroke-width: 2;
    transition: transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.header_btn:hover svg {
    transform: translateX(4px);
}

.header_btn .header_button_text,
.header_btn svg {
    will-change: transform;
}
.header_btn:active {
    background: linear-gradient(90deg, #CDB1FD, #CDB1FD);
    transform: scale(0.97);
}



/* -------------nav side-------------------- */
.hamburger_menu {
  cursor: pointer;
  display: none;
  z-index: 70001;
}
.hamburger_menu2 {
  cursor: pointer;
  display: none;
  z-index: 70001;
}

.hamburger_menu input {
  display: none;
}
.hamburger_menu2 input {
  display: none;
}

.hamburger_menu svg {
  height: 2.8em;
  transition: transform 600ms cubic-bezier(0.4, 0, 0.2, 1);
}
.hamburger_menu2 svg {
  height: 2.8em;
  transition: transform 600ms cubic-bezier(0.4, 0, 0.2, 1);
}

.line_menu {
  fill: none;
  stroke: rgb(24, 24, 24);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 3;
  transition: stroke-dasharray 600ms cubic-bezier(0.4, 0, 0.2, 1),
              stroke-dashoffset 600ms cubic-bezier(0.4, 0, 0.2, 1);
}

.line_top_bottom_menu{
  stroke-dasharray: 12 63;
}

.hamburger_menu input:checked + svg {
    transform: rotate(-45deg);
    position: fixed;
    top: 24px;
    right: 51px;
}


.hamburger_menu input:checked + svg .line_top_bottom_menu {
  stroke-dasharray: 20 300;
  stroke-dashoffset: -32.42;
}
.side_menu_nav {
  position: fixed;
  right: -335px;
  top: 0;
  height: 100vh;
  width: 280px;
  padding: 20px;
  backdrop-filter: blur(25px) saturate(180%);
  -webkit-backdrop-filter: blur(25px) saturate(180%);
  background: rgba(255, 255, 255, 0.10);
  border-left: 1px solid rgba(255, 255, 255, 0.25);
  box-shadow: -10px 0 30px rgba(0,0,0,0.3);
  transition: right 0.45s cubic-bezier(0.33, 0.83, 0.99, 0.98);
  z-index: 70000;
  padding-top: 65px;
  -webkit-transition: right 0.45s cubic-bezier(0.33, 0.83, 0.99, 0.98);
  -moz-transition: right 0.45s cubic-bezier(0.33, 0.83, 0.99, 0.98);
  -ms-transition: right 0.45s cubic-bezier(0.33, 0.83, 0.99, 0.98);
  -o-transition: right 0.45s cubic-bezier(0.33, 0.83, 0.99, 0.98);
}

.side_menu_nav.open {
  right: 0;
}

.side_menu_nav ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 25px;
  margin-top: 30px;
}

.side_menu_nav a {
  font-size: 20px;
  text-decoration: none;
  color: #000;
  font-weight: 600;
}


/*---------------- OVERLAY -----------------*/
.overlay_sidbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.12%);
    backdrop-filter: blur(3px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    z-index: 1400;
}

.overlay_sidbar.active {
    opacity: 1;
    pointer-events: all;
}

@media (max-width: 992px) {
    .hamburger_menu {
        display: block;
        position: relative;
        z-index: 1600;
    }
}
@media (max-width: 992px) {
    .hamburger_menu2 {
        display: block;
        position: relative;
        z-index: 1600;
    }
}



/*------------- floating menu ------------*/

.floating-wrapper .nav_container {
    background: #cacaca42;
    border-radius: 4px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
    display: flex;
    justify-content: center;
    align-items: center;
}


.nav_center_items{
    display: flex;
}

.floating-wrapper {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 9999;
    opacity: 0;
    transform: translateY(-100%);
    transition: all .35s ease;
    pointer-events: none;
}

.floating-wrapper.active {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.floating-wrapper .nav_container {
    margin-top: 15px;

}

.floating-wrapper .nav_wrap {
    margin-top: 0;
    margin-left: 0 ;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}
.nav_container {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}
.nav_container .theme {
  color: #000000ce;
  background-color: #e8e8e8;
  position: relative;
  cursor: pointer;
  z-index: 9;
  -webkit-user-select: none;
  user-select: none;
  border: 1px solid #13131323;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5px;
  transition: background-color 0.25s linear;
}
.nav_logo_wrap img {
    width: 188px;
    height: auto;
}
.nav_container .theme:hover {
  background-color: #13131323;
}
.nav_container .theme::before {
  position: absolute;
  left: -16px;
  width: 1px;
  height: 100%;
  background-color: #13131323;
}
.nav_container .theme a {
  border: none;
  outline: none;
  background-color: transparent;
  padding: 0.125rem;
  border-radius: 9999px;
  align-items: center;
  justify-content: center;
}
.mode:checked + .nav_container .theme a.light,
.mode + .nav_container .theme a.dark {
  display: none;
}
.mode + .nav_container .theme a.light,
.mode:checked + .nav_container .theme a.dark {
  display: flex;
}
.nav_container .theme svg {
  stroke-linejoin: round;
  stroke-linecap: round;
  stroke: currentColor;
  fill: none;
  height: 22px;
  width: 22px;
}

.nav_wrap {
  display: flex;
  position: relative;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  box-shadow: 0 0px 9px rgba(0, 0, 0, 0.2);
  scrollbar-width: none;
  z-index: 1;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  -o-border-radius: 4px;
    max-width: 1200px;
    padding: 0 10px;
}

.nav_wrap input {
  height: 0;
  width: 0;
  position: absolute;
  overflow: hidden;
  display: none;
  visibility: hidden;
}

.nav_label {
  cursor: pointer;
  outline: none;
  font-size: 0.875rem;
  letter-spacing: initial;
  font-weight: 500;
  color: #000000ce;
  background: transparent;
  padding: 12px 16px;
  width: 100px;
  min-width: 100px;
  text-decoration: none;
  -webkit-user-select: none;
  user-select: none;
  transition: color 0.25s ease;
  outline-offset: -6px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 2;
  -webkit-tap-highlight-color: transparent;
}
.nav_label a {
  overflow: hidden;
  display: -webkit-box;
}

.nav_wrap input[class*="rd-"]:checked + label {
  color: #000;
}

.mode:checked + .nav_container .nav_wrap input[class*="rd-"]:checked + label {
  color: #fff;
}

.mode:checked + .nav_container .nav_label {
  color: #fff;
}

.mode:checked + .nav_container .nav_container .theme {
  color: #fff;
  background-color: #212121;
  border: 1px solid #383838;
}

.mode:checked + .nav_container .nav_container .theme:hover {
  background-color: #383838;
}

.mode:checked + .nav_container .nav_container .theme::before {
  background-color: #383838;
}

.nav_bar {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: absolute;
  transform-origin: 0 0 0;
  height: 100%;
  width: 100px;
  z-index: 0;
  transition: transform 0.5s cubic-bezier(0.33, 0.83, 0.99, 0.98);
}
.nav_bar::before,
.nav_bar::after {
  top: 50px;
  display: flex;
  align-items: center;
  content: "";
  position: absolute;
  height: 4px;
  width: 100%;
  background: #430079ce;
}
.nav_bar::before {
  align-items: center;
  border-radius: 0 0 9999px 9999px;
}
.nav_bar::after {
  border-radius: 9999px 9999px 0 0;
}

.mode:checked + .nav_container .nav_bar::before,
.mode:checked + .nav_container .nav_bar::after {
  background: #ffffff;
}

.nav_slidebar {
    display: flex;
    align-items: center;
    gap: 3px;
    position: absolute;
    width: 100px;
    border-radius: 4px;
    background: #13131323;
    transform-origin: 0 0 0;
    z-index: 0;
    transition: transform 0.5s     cubic-bezier(0.33, 0.83, 0.99, 0.98);
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
}

.mode:checked + .nav_container .nav_slidebar {
  background: #383838;
}

.nav_radio_1:checked ~ .nav_bar,
.nav_radio_1:checked ~ .nav_slidebar,
.nav_radio_1 + nav_label:hover ~ .nav_slidebar {
    transform: translateX(0) scaleX(1);
}
.nav_radio_2:checked ~ .nav_bar,
.nav_radio_2:checked ~ .nav_slidebar,
.nav_radio_2 + nav_label:hover ~ .nav_slidebar {
  transform: translateX(100%) scaleX(1);
  -webkit-transform: translateX(100%) scaleX(1);
  -moz-transform: translateX(100%) scaleX(1);
  -ms-transform: translateX(100%) scaleX(1);
  -o-transform: translateX(100%) scaleX(1);
}
.nav_radio_3:checked ~ .nav_bar,
.nav_radio_3:checked ~ .nav_slidebar,
.nav_radio_3 + nav_label:hover ~ .nav_slidebar {
    transform: translateX(199%) scaleX(1);
    -webkit-transform: translateX(199%) scaleX(1);
    -moz-transform: translateX(199%) scaleX(1);
    -ms-transform: translateX(199%) scaleX(1);
    -o-transform: translateX(199%) scaleX(1);
    margin-top: -5px;
}

.nav_radio_4:checked ~ .nav_bar,
.nav_radio_4:checked ~ .nav_slidebar,
.nav_radio_4 + nav_label:hover ~ .nav_slidebar {
  transform: translateX(301%) scaleX(1);
  margin-top: -5px;
  -webkit-transform: translateX(301%) scaleX(1);
  -moz-transform: translateX(301%) scaleX(1);
  -ms-transform: translateX(301%) scaleX(1);
  -o-transform: translateX(301%) scaleX(1);
}

.nav_radio_5:checked ~ .nav_bar,
.nav_radio_5:checked ~ .nav_slidebar,
.nav_radio_5 + nav_label:hover ~ .slidebar {
  transform: translateX(401%) scaleX(1);
  margin-top: -5px;
  -webkit-transform: translateX(401%) scaleX(1);
  -moz-transform: translateX(401%) scaleX(1);
  -ms-transform: translateX(401%) scaleX(1);
  -o-transform: translateX(401%) scaleX(1);
}










/*------------- learning section ------------*/
.learning_section_container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 29.9275rem;
    position: relative;
}


.learning_section_img {
    position: relative;
}

.learning_section_img img {
    width: 100%;
    object-fit: cover;
    border-bottom-left-radius: 1000px;
    border-bottom-right-radius: 500px;
    border-top-left-radius: 500px;
    border-top-right-radius: 1000px;
    z-index: 2;
    position: relative;
}

.circle_learning {
    width: 516.54px;
    height: 511.65px;
    background: linear-gradient(90deg, #6A15FA, #8B49FB);
    border-bottom-left-radius: 1146px;
    border-bottom-right-radius: 1206px;
    border-top-left-radius: 1206px;
    border-top-right-radius: 1146px;
    position: absolute;
    top: -18px;
    left: 7px;

    z-index: 1;
    box-shadow: 0 4px 60px rgba(139, 73, 251, 0.7);
}

.learning_section_content {
    height: auto;
    text-align: left;
    display: flex;
    flex-direction: column;
}

.learning_title {
    font-size: 42px;
    font-weight: 700;
    color: rgba(57, 3, 147, 1);
    padding-bottom: 18px;
}
.learning_text{
    line-height: 174%;
}

.learning_btn {
    display: flex;
    border-radius: 4px;
    padding: 12px 25px;
    gap: 10px;
    border: 2px solid #6A15FA;
    color: #220258;
    align-items: center;
    justify-content: center;
    transition: background 0.5s ease, transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
    margin-top: 20px;
}

.learning_btn:hover {
    background-color: #cdb1fd57;
    cursor: pointer;
}

.learning_btn .learning_button_text {
    height: 24px;
    width: 103.5px;
    font-size: 16px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    transition: transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.learning_btn:hover .learning_button_text {
    transform: translateX(6px);
}

.learning_btn svg {
    fill: #220258;
    stroke: #220258;
    stroke-width: 2;
    transition: transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.learning_btn:hover svg {
    transform: translateX(4px);
}

.learning_btn .learning_button_text,
.learning_btn svg {
    will-change: transform;
}
.learning_btn:active {
    background: linear-gradient(90deg, #CDB1FD, #CDB1FD);
    transform: scale(0.97);
}
/* ------------------- research section ---------------------- */
.research_section_title{
    text-align: center;
}
.research_section_container{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 29.9275rem;
    position: relative;
    top: 80px;
    gap: 55px;
}
.research_title{
    font-weight: 700;
    color: #390393;
}
.research_subtitle{
    font-weight: 400;
    color: #131313;
    letter-spacing: 0.8px;
}


#carousel_research_section{
  position: relative;
  height: 500px;
  top: 50%;
  transform: translateY(-50%);
  overflow: hidden;
  margin-left: auto;
  margin-right: auto;
}

#carousel_research_section > div.slideImgResearch{
  position: absolute;
  opacity: 0;
}

#carousel_research_section > div > img{
  width: 400px;
  transition: width 1s;
}

#carousel_research_section > div.hideLeft{
    left: 0%;
    opacity: 0;
    transition: transform 1s, left 1s, opacity 1s;
    transform: translateY(50%) translateX(-50%);
    cursor: pointer;
}

#carousel_research_section > div.hideLeft > img{
  width: 200px;
}

#carousel_research_section > div.hideRight{
    left: 100%;
    transition: transform 1s, left 1s, opacity 1s;
    opacity: 0;
    transform: translateY(50%) translateX(-50%);
    cursor: pointer;
}

#carousel_research_section > div.hideRight > img{
  width: 200px;
}

#carousel_research_section > div.prev{
    z-index: 5;
    transform: translateY(50px) translateX(-50%);
    opacity: 1;
    transition: transform 1s, left 1s, opacity 1s;
    filter: blur(0px);
    -webkit-filter: blur(0px);
    cursor: pointer;
}

#carousel_research_section > div.prev > img{
  width: 300px;
}

#carousel_research_section > div.prevLeftSecond{
    z-index: 4;
    transform: translateY(50%) translateX(-50%);
    opacity: 0.7;
    transition: transform 1s, left 1s, opacity 1s;
    filter: blur(0px);
    -webkit-filter: blur(0px);
    mask-image: linear-gradient(to left, rgb(0 0 0) 50%, rgb(0 0 0 / 0%) 100%);
    mask-repeat: no-repeat;
    mask-size: cover;
    cursor: pointer;
}

#carousel_research_section > div.prevLeftSecond > img{
  width: 200px;
}

#carousel_research_section > div.selected{
    z-index: 10;
    left: 50%;
    transition: transform 1s, left 1s, opacity 1s;
    opacity: 1;
    transform: translateY(0px) translateX(-50%);
    cursor: pointer;
}

#carousel_research_section > div.next{
    z-index: 5;
    transition: transform 1s, left 1s, opacity 1s;
    opacity: 1;
    transform: translateY(50px) translateX(-50%);
    filter: blur(0px);
    -webkit-filter: blur(0px);
    cursor: pointer;
}

#carousel_research_section > div.next > img{
  width: 300px;
}

#carousel_research_section > div.nextRightSecond{
    z-index: 4;
    transition: transform 1s, left 1s, opacity 1s;
    transform: translateY(50%) translateX(-50%);
    opacity: 0.7;
    filter: blur(0px);
    -webkit-filter: blur(0px);
    mask-image: linear-gradient(to right, rgb(0 0 0) 50%, rgb(0 0 0 / 0%) 100%);
    mask-repeat: no-repeat;
    mask-size: cover;
    cursor: pointer;
}

#carousel_research_section > div.nextRightSecond > img{
  width: 200px;
}



/* -------------------css card------------------- */
.card_content_research {
    position: relative;
    width: 230px;
    height: 290px;
    border-radius: 20px;
    border-top-left-radius: 70px;
    overflow: hidden;
    background: #ffffff;
    font-family: 'Poppins', sans-serif;
    transition: 0.3s ease;
    border-top-left-radius: 70px;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
    border-top-right-radius: 20px;


}

.card_title_research {
    text-align: center;
    font-weight: 700;
    letter-spacing: 1px;
    margin-top: 30px;
}
.card_cont_text {
    font-size: 14px;
    opacity: 0.75;
    color: #61745d;
    width: 180px;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    margin-top: 21px;
}
.card_icon_research {
    border-bottom-right-radius: 50%;
    height: 118px;
    width: 118px;
}
.card_icon_research::after {
    content: '';
    position: absolute;
    left: 119px;
    top: 0px;
    height: 30px;
    width: 30px;
    border-top-left-radius: 30px;
}
.card_icon_research::before {
    content: '';
    position: absolute;
    top: 119px;
    height: 30px;
    width: 30px;
    border-top-left-radius: 30px;
}
.card_bg_icon {
    height: 100px;
    width: 100px;
    inset: 7px;
    background: #ffffff;
    position: absolute;
    border-radius: 10px;
    border-top-left-radius: 50%;
    border-bottom-right-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background-color 0.3s ease-in-out;
}
.icon_research img {
    width: 60px;
    height: 60px;
    transition: filter -4.8s ease-in-out;
}
/* ------------------- card 1 ------------------- */
.card_research1 {
    position: relative;
    background: #ffffff;
}
.card_research1 .card_icon_research {
    background: #6A15FA;
    position: relative;
    top: 4px;
    left: 7px;
}
.card_research1 .card_title_research {
    color: #6A15FA;
}
.card_research1:hover .card_bg_icon {
    background: #6A15FA;
}
.card_research1:hover .icon_research img {
    filter: brightness(0) invert(1);
}
.card_research1::before {
    content: "";
    position: absolute;
    inset: 0;
    padding: 11px;
    border-radius: inherit;
    background: linear-gradient(180deg, #6A15FA, #6A15FA);
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    pointer-events: none;
}

/* ------------------- card 2 ------------------- */
.card_research2 {
    position: relative;
    background: #ffffff;
}
.card_research2 .card_icon_research {
    background: #6A15FA;
    position: relative;
    top: 4px;
    left: 7px;
}
.card_research2 .card_title_research {
    color: #6A15FA;
}
.card_research2:hover .card_bg_icon {
    background: #6A15FA;
}
.card_research2:hover .icon_research img {
    filter: brightness(0) invert(1);
}

.card_research2::before {
    content: "";
    position: absolute;
    inset: 0;
    padding: 11px;
    border-radius: inherit;
    background: linear-gradient(180deg, #6A15FA, #6A15FA);
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    pointer-events: none;
}
/* ------------------- card 3 ------------------ */

.card_research3 {
    position: relative;
    background: #ffffff;
}
.card_research3 .card_icon_research {
    background: #6A15FA;
    position: relative;
    top: 4px;
    left: 7px;
}
.card_research3 .card_title_research {
    color: #6A15FA;
}
.card_research3:hover .card_bg_icon {
    background: #6A15FA;
}
.card_research3:hover .icon_research img {
    filter: brightness(0) invert(1);
}
.card_research3::before {
    content: "";
    position: absolute;
    inset: 0;
    padding: 11px;
    border-radius: inherit;
    background: linear-gradient(180deg, #6A15FA, #6A15FA);
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    pointer-events: none;
}
/* ------------------- card 4 ------------------- */

.card_research4 {
    position: relative;
    background: #ffffff;
}
.card_research4 .card_icon_research {
    background: #6A15FA;
    position: relative;
    top: 4px;
    left: 7px;
}
.card_research4 .card_title_research {
    color: #6A15FA;
}
.card_research4:hover .card_bg_icon {
    background: #6A15FA;
}
.card_research4:hover .icon_research img {
    filter: brightness(0) invert(1);
}
.card_research4::before {
    content: "";
    position: absolute;
    inset: 0;
    padding: 11px;
    border-radius: inherit;
    background: linear-gradient(180deg, #6A15FA, #6A15FA);
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    pointer-events: none;
}

/*------------- event section ------------*/
 .event_section_container{
    position: relative;
    top: 390px;
}

.event_section_img{
    position: relative;
}

.event_section_img img{
    width: 38%;
    object-fit: cover;
    height: 680px;
}
.event_section_img::before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    background: linear-gradient(to right, rgba(255,255,255,0.8), rgba(255,255,255,0));
}

 .event_section_content{
    position: relative;
    display: flex;
    align-items: center;
}

.event_img {
    position: absolute;
    top: -680px;
    left: -10px;
    width: 100%;
    height: 700px;
    z-index: -1;
}

.event_img img{
    width: 100%;
    height: 680px;
    object-fit: cover;
}

.event_section_text{
    margin-left: 145px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: absolute;
    bottom: 198px;
}


.event_btn {
    display: flex;
    width: 180px;
    height: 48px;
    border-radius: 4px;
    padding: 12px 25px;
    gap: 10px;
    margin-top: 46px;
    background: linear-gradient(90deg, #6A15FA, #8B49FB);
    color: #fff;
    align-items: center;
    justify-content: center;
    transition: background 0.5s ease, transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.event_btn:hover {
    background: linear-gradient(90deg, #390393, #4F04CE);
    cursor: pointer;
}


.event_btn .event_button_text {
    height: 24px;
    width: 103.5px;
    font-size: 16px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    transition: transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.event_btn:hover .event_button_text {
    transform: translateX(6px);
}

.event_btn svg {
    fill: #fff;
    stroke: #fff;
    stroke-width: 2;
    transition: transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.event_btn:hover svg {
    transform: translateX(4px);
}

.event_btn .event_button_text,
.event_btn svg {
    will-change: transform;
}



/*------------- news section ------------*/
.news_section_container{
    height: 652px;
    position: relative;
    top: 480px;

}
.news_section_title{
    width: 340px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.news_title{
    font-size: 42px;
    font-weight: 700;
    color: #390393;
}
.news_subtitle{
    font-weight: 400;
    color: #131313;
    letter-spacing: 0.3px;
}
.news_section_cards{
    height: 532px;
    margin-top: 50px;
}
.news_cards_contain{
    display: flex;
    gap: 10px;
    justify-content: space-around;
}
.cards_news{
    height: 452px;
    border-radius: 4px;
    padding: 24px;
    box-shadow: 0px 4px 10px 0px #00000040;
}

.cards_news_img img{
    height: 216px;
    border-radius: 4px;
}
.news_txt_title{
    font-size: 20px;
    font-weight: 700;
    text-align: center;
    color: #414A53;
    margin-top: 16px;
}
.news_txt_body{
    font-size: 18px;
    color: #57626D;
    font-weight: 400;
    margin-top: 20px;
    text-align: center;
    height: 77px;
}

.cards_news_btn{
    width: 170px;
    height: 48px;
    margin-right: auto;
    margin-left: auto;
    transition: background 0.5s ease, transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
    border-radius: 4px;
}
.cards_news_btn:hover{
    cursor: pointer;
    border-radius: 4px;
    background:#dccdf5;

}

.read_more_btn {
  border-radius: 4px;
  position: relative;
  overflow: hidden;
}

.cards_news_btn:hover .read_more_btn{
    transform: translateX(6px);
}

.cards_news_btn .read_more_btn{
    text-decoration: none;
    font-size: 14px;
    text-align: center;
    display: block;
    font-weight: 500;
    color: #220258;
    padding: 14px;
    transition: transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}


.hidden_content {
    display: none;
}

.cover_news {
  position: fixed;
  z-index: 100;
  transform-origin: 50% 50%;
  border-radius: 1px;
  background:#dccdf5;
  display: none;
}


.open_content_news {
  width: 100%;
  z-index: 110;
  position: fixed;
  opacity: 0;
  pointer-events: none;
  top: 0;
  left: 0;
  height: 100vh;
  overflow-y: auto;
  background: transparent;

}

.open_content_news img {
  position: relative;
  width: 40%;
  margin-left: 3%;
  margin-top: 20px;
  z-index: 5;
}

.open_content_news .text {
  background: #fff;
  margin-top: -56%;
  padding: 60% 5% 5% 5%;
  width: 80%;
  margin-left: 5%;
  margin-bottom: 5%;
}

.open_content_news .text h1, .open_content_news .text p {
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}

.close_content_news {
  display: block;
  position: absolute;
  right: 12px;
  top: 12px;
  width: 30px;
  height: 30px;
  z-index: 120;
}

.close_content_news span {
  background: #222;
  width: 30px;
  height: 6px;
  display: block;
  position: absolute;
  top: 14px;
}

.x_1 {
  transform: rotate(45deg);
}

.x_2 {
  transform: rotate(-45deg);
}

.read_more_btn {
  transition: opacity 200ms linear 320ms, transform 200ms ease-out 320ms;
}

.cover_news {
  transition: transform 300ms ease-in-out;
}

.open_content_news {
  transition: opacity 200ms linear 0ms;
}

.open_content_news.open {
  opacity: 1;
  pointer-events: all;
  transition-delay: 1000ms;
}



.news_btn {
    display: flex;
    width: 180px;
    height: 48px;
    border-radius: 4px;
    padding: 12px 25px;
    gap: 10px;
    margin-top: 46px;
    background: linear-gradient(90deg, #6A15FA, #8B49FB);
    color: #fff;
    align-items: center;
    justify-content: center;
    transition: background 0.5s ease, transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
    margin-left: auto;
    margin-right: auto;

}

.news_btn:hover {
    background: linear-gradient(90deg, #390393, #4F04CE);
    cursor: pointer;
}


.news_btn .news_button_text {
    height: 24px;
    width: 103.5px;
    font-size: 16px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    transition: transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.news_btn:hover .news_button_text {
    transform: translateX(6px);
}

.news_btn svg {
    fill: #fff;
    stroke: #fff;
    stroke-width: 2;
    transition: transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.news_btn:hover svg {
    transform: translateX(4px);
}

.news_btn .news_button_text,
.news_btn svg {
    will-change: transform;
}



/*  */

.footer_section_container{
    display: flex;
    width: 100%;
    flex-direction: column;
}
.footer_back img{
    width: 100%;
    position: relative;
    top: 625px;
    height: 151px;
}
.footer_sec1{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.footer_sec1 .footer_section_logo img{
    width: 180px;
    height: 91px;
}

.footer_section_container{
    position: relative;
    margin-left: auto;
    margin-right: auto;
    height: 91px;
    top: 497px;
}
.footer_section_links_ul_li a{
    text-decoration: none;
    font-size: 18px;
    font-weight: 400;
    color: #220258;
}
.footer_section_links_ul_li{
    border-right: 2px solid #220258!important;
    padding-left: 20px;
    padding-right: 5px;
}
.footer_section_links ul{
    list-style-type: none;
    display: flex;
    justify-content: space-between;
    /*width: 20rem;*/
}
.footer_section_links ul li:last-child{
    border-right: none;
}

/*  */
.footer_media_ul {
    list-style: none;
}

.footer_media_ul {
    display: flex;
    justify-content: center;
    align-items: center;
}
.footer_media_ul .footer_icon {
    margin: 0 10px;
    position: relative;
}
.footer_media_ul .footer_icon .tooltip {
    position: absolute;
    top: -30px;
    left: 50%;
    transform: translateX(-50%);
    color: #ffffff;
    padding: 6px 10px;
    border-radius: 5px;
    opacity: 0;
    visibility: hidden;
    font-size: 14px;
    transition: all 0.3s ease;
    background-color: #220258;
}
.footer_media_ul .footer_icon:hover .tooltip {
    opacity: 1;
    visibility: visible;
    top: -50px;
}
.footer_media_ul .footer_icon a {
    position: relative;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50px;
    height: 50px;
    border-radius: 4px;
    color: #4d4d4d;
    background-color: #ffffff00;
    transition: all 0.3s ease-in-out;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
}
.footer_media_ul .footer_icon a:hover {
    box-shadow: 3px 2px 45px 0px rgb(0 0 0 / 12%);
}

.footer_media_ul .footer_icon a .footer_filled {
    position: absolute;
    top: auto;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 0;
    background-color: #220258;
    transition: all 0.3s ease-in-out;
}
.footer_media_ul .footer_icon a:hover .footer_filled {
    height: 100%;
}

.footer_icon a .img_twitter{
    width: 30px;
    position: absolute;
    z-index: 2;
    opacity: 1;
    transition: opacity 0.2s ease-in-out;
}

.footer_icon a .img_twitter_white {
    width: 30px;
    position: absolute;
    z-index: 1;
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
}

.footer_icon a:hover .img_twitter {
    opacity: 0;
    z-index: 1;
}

.footer_icon a:hover .img_twitter_white {
    opacity: 1;
    z-index: 2;
}
.footer_icon a .img_linkedin{
    width: 42px;
    position: absolute;
    z-index: 2;
    opacity: 1;
    transition: opacity 0.2s ease-in-out;
}

.footer_icon a .img_linkedin_white {
    width: 42px;
    position: absolute;
    z-index: 1;
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
}

.footer_icon a:hover .img_linkedin {
    opacity: 0;
    z-index: 1;
}

.footer_icon a:hover .img_linkedin_white {
    opacity: 1;
    z-index: 2;
}
.footer_icon a .img_instagram{
    width: 38px;
    position: absolute;
    z-index: 2;
    opacity: 1;
    transition: opacity 0.2s ease-in-out;
}

.footer_icon a .img_instagram_white {
    width: 38px;
    position: absolute;
    z-index: 1;
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
}

.footer_icon a:hover .img_instagram {
    opacity: 0;
    z-index: 1;
}

.footer_icon a:hover .img_instagram_white {
    opacity: 1;
    z-index: 2;
}

.footer_sec2{
    font-size: 12px;
    font-weight: 600;
    color: #220258;
    text-align: center;
}




/* ------------- responsiv header  -------------- */

@media (max-width: 449px){
    .hero_section_container{
        width: 100%;
        max-width: 18.3125rem;
    }
    .hero_section_content{
        width: 18.375rem;
        height: 4.25rem;
        top: 9rem;
        left: 1rem;
    }
    .header_text{
        gap: 10px;
    }
    .header_title{
        font-size: 24px;
        font-weight: 700;
    }
    .header_body{
        font-size: 16px;
        width: 17rem;
    }
    .nav_menu_show ul , .nav_menu_show{
        display: none;
    }
    .nav_join_us {
        display: none;
    }
    .side_menu_nav{
        width: 325px;
    }
    .btn_nav_join_side ,
    .nav_join_us_side{
        height: 43px;
        width: 145px;
    }
    .hero_section_back_img img{
        height: 100vh;
    }
    .header_btn .header_button_text{
        font-size: 14px;
    }
    /*  */
    .nav_center_items{
        display: none;
    }
    .nav_join_side{
        display: none;
    }
    .nav_container {
        width: 70%;
    }
    .learning_section_container {
        flex-direction: column-reverse;
        align-items: center;
        height: auto;
        gap: 50px;
        margin: 55px auto 0;
    }
    .learning_section_img img {
        width: 230px;
        height: 188px;
    }
    .circle_learning {
        width: 210px;
        height: 215px;
        top: -13px;
    }
    .learning_section_content {
        width: 75%;
        margin-left: 77px;
        margin-right: auto;

    }
    .learning_title {
        font-size: 22px;
    }
    /*  */
    .research_section_container{
        max-width: 18.3125rem;
        margin-left: 100px;
        margin-right: auto;
        margin-top: 77px;
    }
    .research_title{
        font-size: 30px;
    }
    .research_subtitle{
        font-size: 14px;
    }
    /*  */
    .event_section_content img{
        top: -330px;
        right: 1040px;
    }
    /*  */
    .event_section_text{
        width: 20rem;
        font-size: 32px;
    }
    .event_title{
        font-size: 32px;
        font-weight: 700;
        color: #390393;
        /*margin-top: 5rem;*/
    }
    .event_subtext{
        font-size: 18px;
        font-weight: 400;
        color: #000000;
        padding-top: 15px;
    }
    /*  */
    .news_section_container{
        max-width: 18.3125rem;
        margin-left: 100px;
        margin-right: auto;
        margin-top: 77px;
    }
    .news_title{
        font-size: 30px;
    }
    .news_subtitle{
        font-size: 14px;
    }
    /*  */

    .footer_section_container{
        width: 100%;
        max-width: 18.3125rem;
    }
    .footer_sec1{
        gap: 1rem;
        flex-direction: column;
    }
    .footer_back img{
        top: 93rem;
        height: 233px;
    }
    .footer_section_container{
        top: 78rem;
    }
    .footer_sec2 {
        padding-left: 25px;
        padding-top: 14px;
    }
    .footer_media_ul .footer_icon .tooltip{
        display: none;
        visibility: hidden;
    }
    .footer_media_ul .footer_icon:hover .tooltip {
        display: none;
        visibility: hidden;
    }
    .nav_logo_img img{
        width: 100px;
        height: 53px;
    }
    .cards_news_img img {
        width: 245px;
    }
    .learning_btn{
        margin-left: auto;
        margin-right: auto;
    }
    .header_btn ,.event_btn , .learning_btn  ,.news_btn ,.cards_news_btn ,.read_more_btn{
        width: 145px;
        height: 39px;
    }
}
@media (min-width: 450px) and (max-width: 575px){
    .hero_section_container{
        width: 100%;
        max-width: 24.3125rem;
    }
    .hero_section_content{
        width: 18.375rem;
        height: 4.25rem;
        top: 15rem;
        left: 3rem;
    }
    .header_text{
        gap: 10px;
    }
    .header_title{
        font-size: 24px;
        font-weight: 700;
    }
    .header_body{
        font-size: 16px;
        width: 17rem;
    }
    .nav_menu_show ul , .nav_menu_show{
        display: none;
    }
    .nav_join_us {
        display: none;
    }
    .btn_nav_join_side ,
    .nav_join_us_side {
        height: 43px;
        width: 145px;
    }
    .side_menu_nav{
        width: 245px;
    }
    .header_btn ,.event_btn , .learning_btn , .news_btn{
        width: 145px;
        height: 39px;
    }
    .header_btn .header_button_text{
        font-size: 14px;
    }
    .nav_logo_img img{
        width: 100px;
        height: 53px;
    }

    /*  */
    .floating-wrapper .nav_wrap{
        width: 25rem;
    }
     .nav_center_items{
        display: none;
    }
    .nav_join_side{
    display: none;
    }
    .nav_container {
        width: 70%;
    }
    /*  */
    .learning_section_container {
        flex-direction: column-reverse;
        align-items: center;
        height: auto;
        gap: 50px;
        margin: 55px auto 0;
    }
    .learning_section_img img {
        width: 330px;
        height: 285px;
    }
    .circle_learning {
        width: 300px;
        height: 300px;
        top: -10px;
        left: 13px;
    }
    .learning_section_content {
        width: 65%;
        margin-left: 100px;
        margin-right: auto;
    }
    .learning_title {
        font-size: 24px;
    }
    /*  */
    .research_section_container{
        max-width: 24.3125rem;
        margin-left: auto;
        margin-right: auto;
        margin-top: 77px;
    }
    .research_title{
        font-size: 30px;
    }
    .research_subtitle{
        font-size: 14px;
    }
    /*  */
    .event_section_text{
        width: 20rem;
        font-size: 32px;
    }
    .event_title{
        font-size: 20px;
        font-weight: 700;
        color: #390393;
    }
    .event_subtext{
        font-size: 12px;
        font-weight: 400;
        color: #000000;
        padding-top: 15px;
        width: 17rem;
    }
    /*  */
    .news_section_container{
        max-width: 24.3125rem;
        margin-left: auto;
        margin-right: auto;
        margin-top: 77px;
    }
    .news_title{
        font-size: 30px;
    }
    .news_subtitle{
        font-size: 14px;
    }
    .news_cards_contain{
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
    }
    .cards_news {
        width: 368px;
    }
    .cards_news_img img {
        width: 320px;
    }
    /*  */
    .footer_section_container{
        width: 100%;
        max-width: 24.3125rem;
    }
    .footer_sec1{
        gap: 2rem;
        flex-direction: column;
        margin-left: 2rem;
    }
    .footer_back img{
        top: 97rem;
        height: 233px;
    }
    .footer_section_container{
        top: 80rem;
    }
    .footer_sec2 {
        padding-left: 25px;
        padding-top: 14px;
    }
    .footer_media_ul .footer_icon .tooltip{
        display: none;
        visibility: hidden;
    }
    .footer_media_ul .footer_icon:hover .tooltip {
        display: none;
        visibility: hidden;
    }
    .header_btn ,.event_btn , .learning_btn  ,.news_btn ,.cards_news_btn ,.read_more_btn{
        width: 145px;
        height: 39px;
    }
}
@media screen and (max-width: 768px) {
  .news_cards_contain {
    flex-direction: column;
    align-items: center;
  }

  .cards_news {
    max-width: 100%;
  }

  .open_content_news img {
    margin-top: 40px;
  }
}
@media (min-width: 576px) and (max-width: 799px){
    .hero_section_container{
        width: 100%;
        max-width: 31.3125rem;
    }
    .hero_section_content{
        width: 22.375rem;
        height: 4.25rem;
        top: 15rem;
        left: 5rem;
    }
    .header_title{
        font-size: 24px;
        font-weight: 700;
    }
    .header_body{
        font-size: 16px;
        width: 22rem;
    }
    .nav_menu_show ul , .nav_menu_show{
        display: none;
    }
    .nav_join_us {
        display: none;
    }
    .btn_nav_join_side ,
    .nav_join_us_side{
        height: 43px;
        width: 145px;
    }
    .side_menu_nav{
        width: 280px;
    }
    .header_btn ,.event_btn , .learning_btn  ,.news_btn ,.cards_news_btn ,.read_more_btn{
        width: 145px;
        height: 39px;
    }
    .header_btn .header_button_text{
        font-size: 14px;
    }
     .nav_logo_img img{
        width: 143px;
        height: 72px;
    }
    /*  */
    .floating-wrapper .nav_wrap{
        width: 100%;
        max-width: 100%;
    }
     .nav_center_items{
        display: none;
     }
    .nav_join_side{
    display: none;
    }
    .nav_container {
        width: 70%;
    }
    /*  */
    .learning_section_container {
        flex-direction: column-reverse;
        align-items: center;
        height: auto;
        gap: 50px;
        margin: 77px auto 0;
    }
    .learning_section_img img {
        width: 330px;
        height: 285px;
    }
    .circle_learning {
        width: 300px;
        height: 300px;
        top: -10px;
        left: 13px;
    }
    .learning_section_content {
        width: 65%;
        margin-left: 152px;
        margin-right: auto;
    }
    .learning_title {
        font-size: 28px;
    }
    /*  */
    .research_section_container{
        max-width: 31.3125rem;
        margin-left: auto;
        margin-right: auto;
        margin-top: 77px;
    }
    .research_title{
        font-size: 32px;
    }
    .research_subtitle{
        font-size: 14px;
        padding-left: 11px;
    }
    /*  */
    .event_section_text{
        width: 25rem;
        font-size: 32px;
    }
    .event_title{
        font-size: 32px;
        font-weight: 700;
        color: #390393;
    }
    .event_subtext{
        font-size: 18px;
        font-weight: 400;
        color: #000000;
        padding-top: 15px;
    }
    /*  */
    .news_section_container{
        max-width: 31.3125rem;
        margin-left: auto;
        margin-right: auto;
        margin-top: 77px;
    }
    .news_title{
        font-size: 32px;
    }
    .news_subtitle{
        font-size: 14px;
    }
    .news_cards_contain{
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
    }
    .cards_news {
        width: 368px;
    }
    .cards_news_img img {
        width: 320px;
    }
    /*  */
    .footer_section_container{
        width: 100%;
        max-width: 31.3125rem;
    }
    .footer_sec1{
        gap: 2rem;
        flex-direction: column;
        margin-left: 1rem;
    }
    .footer_back img{
        top: 96rem;
        height: 233px;
    }
    .footer_section_container{
        top: 79rem;
    }
    .footer_sec2 {
        padding-left: 25px;
        padding-top: 14px;
    }
    .footer_media_ul .footer_icon .tooltip{
        display: none;
        visibility: hidden;
    }
    .footer_media_ul .footer_icon:hover .tooltip {
        display: none;
        visibility: hidden;
    }
}
@media (min-width: 800px) and (max-width: 991px){
    .hero_section_container{
        width: 100%;
        max-width: 44.3125rem;
    }
    .hero_section_content{
        width: 39.4375rem;
        height: 13.5rem;
        top: 15rem;
        left: 3rem;
    }
    .header_title{
        font-size: 36px;
        font-weight: 800;
    }
    .header_body{
        font-size: 18px;
        width: 31rem;
    }
    .nav_menu_show ul , .nav_menu_show{
        display: none;
    }
    .nav_join_us {
        display: none;
    }
    .btn_nav_join_side ,
    .nav_join_us_side{
        height: 43px;
        width: 145px;
    }
    .side_menu_nav{
        width: 280px;
    }
    .header_btn ,.event_btn , .learning_btn ,.news_btn ,.cards_news_btn ,.read_more_btn{
        width: 145px;
        height: 39px;
    }
    .header_btn .header_button_text{
        font-size: 14px;
    }
    .cards_news_btn .read_more_btn{
        padding: 10px;
    }
    /*  */
    .floating-wrapper .nav_wrap{
        width: 45rem;
    }
     .nav_center_items{
        display: none;
     }
     .nav_join_side{
        display: none;
     }
     .nav_container {
        width: 70%;
    }
    /*  */
     .learning_section_container {
        height: 360px;
        max-width: 46.3125rem;
        gap: 50px;
        margin: 150px auto 0;
    }
    .learning_section_img img {
        width: 361px;
        height: 306px;
        left: 21px;
    }
    .circle_learning {
        width: 326px;
        height: 331px;
        top: -13px;
        left: 39px;
    }
    .learning_section_content {
        width: 80%;
    }
    .learning_title {
        font-size: 30px;
    }
    /*  */
    .research_section_container{
        max-width: 46.3125rem;
        margin-left: auto;
        margin-right: auto;
        margin-top: 150px;
    }
    .research_title{
        font-size: 32px;
    }
    .research_subtitle{
        font-size: 14px;
        padding-left: 11px;
    }
    /*  */
    .event_section_img img{
        margin-top: 150px;
    }
    .event_section_text{
        width: 36rem;
    }
    .event_title{
        font-size: 42px;
        font-weight: 700;
        color: #390393;
    }
    .event_subtext{
        font-size: 20px;
        font-weight: 400;
        color: #000000;
        padding-top: 15px;
    }
    /*  */
    .news_section_container{
        max-width: 46.3125rem;
        margin-left: auto;
        margin-right: auto;
        margin-top: 150px;
    }
    .news_title{
        font-size: 32px;
    }
    .news_subtitle{
        font-size: 14px;
    }
    .cards_news{
        width: 240px;
    }
    .cards_news_img img{
        width: 198px;
        object-fit: cover;
    }
    .news_txt_body{
        font-size: 12px;
        font-weight: 500;
    }
    .news_txt_title{
        font-size: 16px;
        font-weight: 700;
    }
    /*  */
    .footer_section_container{
        width: 100%;
        max-width: 44.3125rem;
    }
    .footer_media_ul .footer_icon a {
        width: 40px;
        height: 40px;
    }
    .footer_sec1{
        gap: 1.5rem;
    }
}


@media (max-width: 992px) {
    .hamburger_menu {
        display: block;
        position: relative;
        z-index: 70001;
    }
    .hamburger_menu2 {
        display: block;
        position: relative;
    }
    .nav_menu_show ul,
    .btn_nav_join {
        display: none !important;
    }
}





@media (min-width: 992px) and (max-width: 1199px){
    .hero_section_container{
        width: 100%;
        max-width: 57.3125rem;
    }
    .hero_section_content{
        width: 40.4375rem;
        height: 13.5rem;
        top: 15rem;
        left: 8rem;
    }
    .header_title{
        font-size: 48px;
        font-weight: 800;
    }
    .header_body{
        font-size: 20px;
    }
    .side_menu_nav{
        width: 280px;
    }
    .btn_nav_join{
        height: 29px;
        width: 85px;
    }
    .header_btn ,.event_btn , .learning_btn ,.news_btn ,.cards_news_btn{
        width: 180px;
        height: 48px;
    }
    .header_btn .header_button_text{
        font-size: 16px;
    }
    .learning_section_container {
        gap: 60px;
        max-width: 57.3125rem;
        margin: 150px auto 0;
    }
    .learning_section_img {
        width: 420px;
        height: 456.72px;
    }
    .learning_section_img img {
        width: 444px;
        height: 86%;
    }
    .circle_learning {
        width: 406px;
        height: 405px;
        top: -7px;
        left: 21px;

    }
    .learning_section_content {
        width: 450px;
    }
    .learning_title {
        font-size: 32px;
    }
    /*  */
    .research_section_container{
        max-width: 57.3125rem;
        margin-left: auto;
        margin-right: auto;
        margin-top: 150px;
    }
    .research_title{
        font-size: 42px;
    }
    .research_subtitle{
        font-size: 18px;
        padding-left: 11px;
    }
    /*  */
    .event_section_img img{
        margin-top: 150px;
    }
    .event_section_text{
        width: 36rem;
    }
    .event_title{
    font-size: 42px;
    font-weight: 700;
    color: #390393;
    }
    .event_subtext{
        font-size: 20px;
        font-weight: 400;
        color: #000000;
        padding-top: 15px;
    }
    /*  */
    .news_section_container{
        max-width: 57.3125rem;
        margin-left: auto;
        margin-right: auto;
        margin-top: 70px;
    }
    .news_title{
        font-size: 42px;
    }
    .news_subtitle{
        font-size: 18px;
    }
    .cards_news{
        width: 299px;
    }
    .cards_news_img img{
        width: 251px;
    }
    /*  */
    .footer_section_container{
        width: 100%;
        max-width: 57.3125rem;
    }
    .footer_sec1{
        gap: 7rem;
    }
}

@media (min-width: 1200px) and (max-width: 1600px){
    .hero_section_container{
        width: 100%;
        max-width: 70.3125rem;
    }
    .hero_section_content{
        width: 40.4375rem;
        height: 13.5rem;
        top: 15rem;
        left: 15rem;
    }
    .header_title{
        font-size: 48px;
        font-weight: 800;
    }
    .header_body{
        font-size: 20px;
    }
    .side_menu_nav{
        width: 280px;
    }
    .btn_nav_join{
        height: 32px;
        width: 84px;
    }
    .header_btn ,.event_btn , .learning_btn ,.news_btn{
        width: 180px;
        height: 48px;
    }
    .header_btn .header_button_text{
        font-size: 16px;
    }
    /*  */
    .learning_section_container {
        gap: 60px;
        max-width: 70.3125rem;
        margin: 150px auto 0;
    }
    .learning_section_img {
        width: 533px;
        height: 456.72px;
    }
    .learning_section_img img {
        width: 518px;
        height: 95%;
    }
    .circle_learning {
        width: 470px;
        height: 470px;
        top: -21px;
        left: 21px;
    }
    .learning_section_content {
        width: 520px;
    }
    .learning_title {
        font-size: 38px;
    }
    /*  */
    .research_section_container{
        max-width: 70.3125rem;
        margin-left: auto;
        margin-right: auto;
        margin-top: 150px;
    }
    .research_subtitle{
        font-size: 18px;
        padding-left: 11px;
    }
    .research_title{
        font-size: 42px;
    }
    /*  */
    .event_section_img img{
        margin-top: 150px;
    }
    .event_section_text{
        width: 36rem;
    }
    .event_title{
    font-size: 42px;
    font-weight: 700;
    color: #390393;
    }
    .event_subtext{
        font-size: 20px;
        font-weight: 400;
        color: #000000;
        padding-top: 15px;
    }
    /*  */
    .news_section_container{
        max-width: 70.3125rem;
        margin-left: auto;
        margin-right: auto;
        margin-top: 150px;
    }
    .news_title{
        font-size: 42px;
    }
    .news_subtitle{
        font-size: 18px;
    }
    .cards_news{
        width: 368px;
    }
    .cards_news_img img{
        width: 320px;
    }
    /*  */
    .footer_section_container{
        width: 100%;
        max-width: 70.3125rem;
    }
    .footer_sec1{
        gap: 13rem;
    }
}
@media (min-width: 1601px){
    .hero_section_container{
        width: 100%;
        max-width: 87.3125rem;
    }
    .hero_section_content{
        width: 40.4375rem;
        height: 13.5rem;
        top: 16rem;
        left: 25rem;
    }
    .header_title{
        font-size: 48px;
        font-weight: 800;
    }
    .header_body{
        font-size: 20px;
    }
    .side_menu_nav{
        width: 280px;
    }
    .btn_nav_join{
        height: 25px;
        width: 88px;
    }
    .header_btn ,.event_btn , .learning_btn ,.news_btn{
        width: 180px;
        height: 48px;
    }
    .header_btn .header_button_text{
        font-size: 16px;
    }
    .learning_section_container {
        max-width: 87.3125rem;
        margin: 150px auto 0;
    }
    .learning_section_img {
        width: 533px;
        height: 456.72px;
    }
    .learning_section_img img {
        width: 540px;
        height: 100%;
    }
    .circle_learning {
        width: 520px;
        height: 520px;
        top: -30px;
        left: 10px;
    }
    .learning_section_content {
        width: 600px;
    }
    .learning_title {
        font-size: 48px;
    }
    /*  */
    .research_section_container{
        max-width: 70.3125rem;
        margin-left: auto;
        margin-right: auto;
        margin-top: 150px;
    }
    .research_subtitle{
        font-size: 18px;
        padding-left: 11px;
    }
    .research_title{
        font-size: 42px;
    }
    #carousel_research_section {
        width: 82rem;
    }
    /*  */
    .event_section_img img{
        margin-top: 150px;
    }
    .event_section_text{
        width: 36rem;
    }
    .event_title{
        font-size: 42px;
        font-weight: 700;
        color: #390393;
    }
    .event_subtext{
        font-size: 20px;
        font-weight: 400;
        color: #000000;
        padding-top: 15px;
    }
    .event_section_text {
        margin-left: 260px;
    }
    /*  */
    .news_section_container{
        max-width: 86.3125rem;
        margin-left: auto;
        margin-right: auto;
        margin-top: 150px;
    }
    .news_title{
        font-size: 42px;
    }
    .news_subtitle{
        font-size: 18px;
    }
    .cards_news{
        width: 368px;
    }
    .cards_news_img img{
        width: 320px;
    }
    /*  */
    .footer_section_container{
        width: 100%;
        max-width: 87.3125rem;
    }
}

/* ------------------- research section responsive---------------------- */

@media (max-width: 575px) {
  #carousel_research_section{
    width: 25rem;
    height: 380px;
  }
  .card_content_research {
    width: 190px;
    max-width: 320px;
    height: 290px;
  }
  .card_cont_text {
    width: 80%;
    margin: 15px auto 0;
    font-size: 14px;
  }
  #carousel_research_section > div.prev{
    left: 25%;
  }
  #carousel_research_section > div.next{
    left: 75%;
  }
  #carousel_research_section > div.prevLeftSecond{
    left: -13%;
  }
  #carousel_research_section > div.nextRightSecond{
    left: 113%;
  }
}
@media (min-width: 576px) and (max-width: 768px) {
  #carousel_research_section{
    width: 35rem;
  }
  .card_title_research {
    font-size: 18px;
  }
  .card_cont_text {
    width: 80%;
    margin: 15px auto 0;
    font-size: 13px;
  }
  #carousel_research_section > div.prev{
    left: 25%;
  }
  #carousel_research_section > div.next{
    left: 75%;
  }
  #carousel_research_section > div.prevLeftSecond{
    left: -13%;
  }
  #carousel_research_section > div.nextRightSecond{
    left: 113%;
  }
}

@media (min-width: 769px) and (max-width: 992px) {
  #carousel_research_section > div.prev{
    left: 30%;
  }
  #carousel_research_section > div.next{
    left: 75%;
  }
  #carousel_research_section{
    width: 47rem;
  }
  .card_title_research {
    font-size: 20px;
  }
  .card_cont_text {
    width: 140px;
    margin-left: auto;
    margin-right: auto;
  }
  #carousel_research_section > div.prevLeftSecond{
    left: 9%;
  }
  #carousel_research_section > div.nextRightSecond{
    left: 91%;
  }
  .card_research1 ,
  .card_research2 ,
  .card_research3 ,
  .card_research4{
    width: 268px;
    height: 312px;
  }
}
@media (min-width: 993px) and (max-width: 1200px){
  #carousel_research_section > div.prev{
    left: 30%;
  }
  #carousel_research_section > div.next{
    left: 70%;
  }
  #carousel_research_section{
    width: 60rem;
  }
  #carousel_research_section > div.prevLeftSecond{
    left: 9%;
  }
  #carousel_research_section > div.nextRightSecond{
    left: 91%;
  }
  .card_research1 ,
  .card_research2 ,
  .card_research3 ,
  .card_research4{
    width: 268px;
    height: 312px;
  }
 .card_title_research {
    font-size: 24px;
  }
}
@media (min-width: 1201px){
  #carousel_research_section{
    width: 69rem;
  }
  #carousel_research_section > div.prev{
    left: 30%;
  }
  #carousel_research_section > div.next{
    left: 70%;
  }
  #carousel_research_section > div.prevLeftSecond{
    left: 10%;
  }
  #carousel_research_section > div.nextRightSecond{
    left: 90%;
  }
@media (min-width: 1400px) {
  #carousel_research_section {
     width: 76rem;
  }
}
  .card_research1 ,
  .card_research2 ,
  .card_research3 ,
  .card_research4{
    width: 268px;
    height: 312px;
  }
   .card_title_research {
    font-size: 24px;
  }
}
/* ===== Reset & Base Styles ===== */
body {
    font-family: "Manrope", sans-serif;
    margin: 0;
    padding: 0;
    color: #220258;
}

/* ===== About Section ===== */
.about_us_container {
    /*max-width: 1280px;*/
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 60px;
    padding: 100px 0px;
    margin-bottom: 150px;
}

.about_text {
    flex: 1;
    max-width: 500px;
}

.about_text h2 {
    color: #390393;
    font-size: 42px;
    font-weight: 800;
    letter-spacing: 2px;
    margin-bottom: 24px;
    line-height: 1.2;
}

.about_text p {
    line-height: 32px;
    font-weight: 500;
    color: #444;
}

.about_content {
    flex: 1;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 400px;
}

.about_bg_befor {
    width: 72%;
    height: 80%;
    background: linear-gradient(90deg, #4F04CE, #9b68f3);
    position: absolute;
    border-radius: 4px;
    top: -43px;
    left: 36px;
    z-index: 1;
}

.about_content img {
    width: 100%;
    max-width: 500px;
    height: auto;
    border-radius: 4px;
    position: relative;
    z-index: 2;
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}

.about_bg_after {
    width: 53%;
    height: 80%;
    background: linear-gradient(90deg, #4F04CE, #9b68f3);
    position: absolute;
    border-radius: 4px;
    bottom: -39px;
    right: 58px;
    z-index: 1;
}

/* ===== Team Section ===== */
.member_title {
    font-weight: 700;
    color: #390393;
    text-align: center;
    font-size: 42px;
    margin: 60px 0 40px;
}

.team_cards {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 21px;
    max-width: 90%;
    margin: 0 auto;
    padding: 0 20px;
}

.team-card {
    background-color: #ffffff;
    border-radius: 8px;
    padding: 24px;
    text-align: center;
    width: 280px;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    position: relative;
    margin-top: 60px;
    flex-shrink: 0;
}

.team-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
}

.team_card_img {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    object-fit: cover;
    position: absolute;
    top: -48px;
    left: 50%;
    transform: translateX(-50%);
    border: 4px solid #ffffff;
    background-color: #e5e7eb;
}

.team_card_content {
    margin-top: 48px;
    margin-bottom: 16px;
}

.team_card_name {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 4px;
    color: #220258;
}

.team_card_role {
    color: #6b7280;
    font-size: 14px;
}

.team_card_social {
    display: flex;
    justify-content: center;
    gap: 16px;
    padding-top: 16px;
    border-top: 2px solid #9864f19e;
}

.social_link {
    color: #220258;
    text-decoration: none;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #eadfffcc;
}

.social_link:hover {
    color: #7c3aed;
    background-color: rgba(124, 58, 237, 0.2);
    transform: scale(1.1);
}

.social-icon {
    width: 20px;
    height: 20px;
}


/* form */
.div_form{
    text-align: left;
}
.join_us_form{
    width: 73%;
    padding: 25px 40px 10px 40px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 15rem;
    background-color: #f8f5ff;
    border-radius: 4px;
    border: 14px dotted #ffffff;
}

.join_us_form form{
    padding: 30px 0 0 0;
    text-align: center;
}
.join_us_form form .form_row_join{
    display: flex;
    margin: 32px 0;
}
form .form_row_join .input_data_join{
    width: 100%;
    height: 40px;
    margin: 10px 20px;
    position: relative;
}
.input_data_join input,
.textarea textarea{
    display: block;
    width: 100%;
    height: 100%;
    border: none;
    padding: 0px;
    font-size: 17px;
    border-bottom: 2px solid #4F04CE;
    background-color: transparent;
    }
.input_data_join input:focus-visible , .textarea textarea:focus-visible {
    outline: none;
}
.input_data_join input:focus ~ label, .textarea textarea:focus ~ label,
.input_data_join input:valid ~ label, .textarea textarea:valid ~ label{
    transform: translateY(-20px);
    font-size: 14px;
    color: #4F04CE;
}
.textarea textarea{
    resize: none;
    padding-top: 0px;
}
.input_data_join label{
    position: absolute;
    pointer-events: none;
    bottom: 10px;
    font-size: 16px;
    transition: all 0.3s ease;
    color: #220258;
}
.input_data_join .underline_join{
    position: absolute;
    bottom: 0;
    height: 2px;
    width: 100%;
}
.input_data_join .underline_join:before{
    position: absolute;
    content: "";
    height: 2px;
    width: 100%;
    background: #bf9ff6;
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 0.3s ease;
}
.input_data_join input:focus ~ .underline_join:before,
.input_data_join input:valid ~ .underline_join:before,
.textarea textarea:focus ~ .underline_join:before,
.textarea textarea:valid ~ .underline_join:before{
    transform: scale(0);
}
.role-select{
    display: flex;
    flex-direction: row;
    padding-left: 21px;
    gap: 36px;
    color: #390393;
    flex-wrap: wrap;
}
.role-select label {
    display: block;
    margin-bottom: 6px;
    cursor: pointer;
}
.input_data_join .file_label{
    bottom: 44px;
}
.input_data_join input[type="file"] {
    font-size: 14px;
    color: #5d5d5d;
    cursor: pointer;
}
@media (max-width: 700px) {
  .join_us_form .join_title{
    font-size: 30px;
  }
  .join_us_form form{
    padding: 10px 0 0 0;
  }
  .join_us_form form .form_row_join{
    display: block;
  }
  form .form_row_join .input_data_join{
    margin: 35px 0!important;
  }
  .submit-btn .input_data_join{
    width: 40%!important;
  }
}

.join_us_form form button {
  position: relative;
  display: inline-block;
  padding: 10px 20px;
  font-weight: bold;
  color: #390393;
  font-size: 16px;
  text-decoration: none;
  text-transform: uppercase;
  overflow: hidden;
  transition: .5s;
  margin-top: 20px;
  letter-spacing: 3px;
  border: none;
  background: none;
}

.join_us_form button:hover {
  background: #390393;
  color: #ede3ff;
  border-radius: 4px;
}

.join_us_form button span {
  position: absolute;
  display: block;
}

.join_us_form button span:nth-child(1) {
  top: 0;
  left: -100%;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, transparent, #390393);
  animation: btn-anim1 1.5s linear infinite;
}

@keyframes btn-anim1 {
  0% {
    left: -100%;
  }

  50%,100% {
    left: 100%;
  }
}

.join_us_form button span:nth-child(2) {
  top: -100%;
  right: 0;
  width: 2px;
  height: 100%;
  background: linear-gradient(180deg, transparent, #390393);
  animation: btn-anim2 1.5s linear infinite;
  animation-delay: .375s
}

@keyframes btn-anim2 {
  0% {
    top: -100%;
  }

  50%,100% {
    top: 100%;
  }
}

.join_us_form button span:nth-child(3) {
  bottom: 0;
  right: -100%;
  width: 100%;
  height: 2px;
  background: linear-gradient(270deg, transparent, #390393);
  animation: btn-anim3 1.5s linear infinite;
  animation-delay: .75s
}

@keyframes btn-anim3 {
  0% {
    right: -100%;
  }

  50%,100% {
    right: 100%;
  }
}

.join_us_form button span:nth-child(4) {
  bottom: -100%;
  left: 0;
  width: 2px;
  height: 100%;
  background: linear-gradient(360deg, transparent, #390393);
  animation: btn-anim4 1.5s linear infinite;
  animation-delay: 1.125s
}

@keyframes btn-anim4 {
  0% {
    bottom: -100%;
  }

  50%,100% {
    bottom: 100%;
  }
}
.input_data_join input[type="file"]::-webkit-file-upload-button {
  background: #4F04CE;
  color: white;
  border: none;
  padding: 8px 15px;
  cursor: pointer;
  font-weight: bold;
}
.input_data_join input[type="file"]::-webkit-file-upload-button:hover {
  background: #dbc8ff;
  color: #4F04CE;
}

























@media (max-width: 449px) {
    .about_us_container {
        width: 100%;
        max-width: 234px;
        flex-direction: column;
        margin-bottom: 86px;
    }
    .about_bg_befor {
        width: 9rem;
        height: 5rem;
        left: -24px;
    }
    .about_content img {
        width: 12rem;
        left: 0rem;
        top: -22px;
    }
    .about_bg_after {
        width: 9rem;
        height: 5rem;
        top: 2rem;
        left: 5rem;
    }
    .about_text {
        left: 40px;
        top: 11rem;
        width: 16rem;
        height: auto;
    }
    .about_text h2 {
        font-size: 16px;
        letter-spacing: 2px;
        font-weight: 800;
    }
    .about_text p {
        font-size: 16px;
        line-height: 19px;
        overflow: hidden;
        font-weight: 500;
    }
    .team_cards{
        margin-top: -65px;
    }
    .team-card{
        margin-top: 118px;
    }
    .member_title{
        font-size: 30px;
    }
    .join_title{
        font-size: 30px;
    }
    .about_content {
        min-height: 0px;
    }
}
@media (min-width: 450px) and (max-width: 575px){
    .about_us_container {
        width: 100%;
        max-width: 377px;
        flex-direction: column;
    }
    .about_bg_befor {
        width: 13rem;
        height: 8rem;
        left: -40px;
    }
    .about_content img {
        width: 19rem;
        left: 0rem;
        top: -120px;
    }
    .about_bg_after {
        width: 13rem;
        height: 8rem;
        top: 5rem;
        left: 9rem;
    }
    .about_text {
        width: 23rem;
        height: auto;
    }
    .about_text h2 {
        font-size: 22px;
        letter-spacing: 2px;
        font-weight: 800;
    }
    .about_text p {
        font-size: 16px;
        line-height: 24px;
        overflow: hidden;
        font-weight: 500;
    }
    .team_cards{
        margin-top: -45px;
    }
     .team-card{
        font-size: 30px;
        margin-top: 83px;
    }
    .member_title{
        font-size: 30px;
        margin-top: 83px;
    }
    .join_title{
        font-size: 30px;
        margin-top: 83px;
    }
}
@media (min-width: 576px) and (max-width: 799px) {
    .about_us_container {
        width: 100%;
        max-width: 477px;
        flex-direction: column;
        height: 700px;
    }
    .about_bg_befor {
        left: -2rem;
        width: 12rem;
        height: 9rem;
    }
    .about_content img {
        width: 26rem;
        left: 0rem;
        top: -96px;
    }
    .about_bg_after {
        width: 12rem;
        height: 9rem;
        right: -34px;
        top: 7rem;
    }
    .about_text {
        left: 22%;
        top: 21rem;
        width: 30rem;
        height: auto;
    }
    .about_text h2 {
        font-size: 22px;
        letter-spacing: 2px;
        font-weight: 800;
    }
    .about_text p {
        font-size: 16px;
        line-height: 24px;
        overflow: hidden;
        font-weight: 500;
    }
    .team_cards{
        margin-top: 30px;
    }
    .member_title{
        font-size: 32px;
    }
    .join_title{
        font-size: 32px;
    }
}
@media (min-width: 800px) and (max-width: 991px) {
    .about_us_container {
        width: 100%;
        max-width: 783px;
    }
    .about_bg_befor {
        width: 15rem;
        height: 7rem;
        top: 3rem;
        left: -5rem;
    }
    .about_content img {
        width: 24rem;
        left: -3rem;
        top: 0px;
    }
    .about_bg_after {
        width: 15rem;
        height: 7rem;
        top: 15rem;
        left: 8rem;
    }
    .about_text {
        left: 25px;
        top: 0rem;
        width: 17rem;
        height: auto;
        padding: 20px 25px;
    }
    .about_text h2 {
        font-size: 32px;
        letter-spacing: 2px;
        font-weight: 800;
    }
    .about_text p {
        font-size: 18px;
        line-height: 24px;
        font-weight: 500;
    }
    .member_title{
        font-size: 32px;
    }
    .join_title{
        font-size: 32px;
    }
}
@media (min-width: 992px) and (max-width: 1199px){
    .about_us_container {
        width: 100%;
    }
    .about_bg_befor {
        width: 20rem;
        height: 11rem;
        left: -4rem;
        top: 4rem;
    }
    .about_content img {
        width: 24rem;
        left: -3rem;
        top: 19px;
    }
    .about_bg_after {
        width: 20rem;
        height: 11rem;
        top: 13rem;
        left: 8rem;
    }
    .about_text {
        left: 115px;
        top: 1rem;
        width: 18rem;
        height: auto;
        padding: 20px 25px;
    }
    .about_text h2 {
        font-size: 30px;
        letter-spacing: 2px;
        font-weight: 800;
    }
    .about_text p {
        font-size: 20px;
        line-height: 34px;
        font-weight: 500;
    }
    .member_title{
        font-size: 42px;
    }
    .join_title{
        font-size: 42px;
    }
}
@media (min-width: 1200px) and (max-width: 1400px) {
    .about_us_container {
        width: 100%;
        max-width: 70.3125rem;
    }
    .about_bg_befor {
        width: 20rem;
        height: 11rem;
        left: -4rem;
        top: 4rem;
    }
    .about_content img {
        width: 26rem;
        top: 20px;
        right: 66px;
    }
    .about_bg_after {
        width: 20rem;
        height: 11rem;
        top: 13rem;
        left: 11rem;
    }
    .about_text {
        left: 125px;
        top: 1rem;
        width: 24rem;
        height: auto;
        padding: 20px 25px;
    }
    .about_text h2 {
        font-size: 42px;
        letter-spacing: 2px;
        font-weight: 800;
    }
    .about_text p {
        font-size: 20px;
        line-height: 32px;
        font-weight: 500;
    }
    .member_title{
        font-size: 42px;
    }
    .join_title{
        font-size: 42px;
    }
}
@media (min-width: 1401px) and (max-width: 1600px) {
    .about_us_container {
        width: 100%;
        max-width: 74%;
    }
    .about_bg_befor {
        width: 22rem;
        height: 12rem;
        top: 7rem;
        left: -4rem;
    }
    .about_content img {
        width: 31rem;
        left: -1rem;
        top: 87px;
    }
    .about_bg_after {
        width: 22rem;
        height: 12rem;
        top: 17.7rem;
        left: 15rem;
    }
    .about_text {
        left: 202px;
        top: 1rem;
        width: 24rem;
        height: auto;
        padding: 20px 25px;
    }
    .about_text h2 {
        font-size: 25px;
        letter-spacing: 2px;
        font-weight: 800;
    }
    .about_text p {
        font-size: 20px;
        line-height: 32px;
        font-weight: 500;
    }
    .member_title{
        font-size: 42px;
    }
    .join_title{
        font-size: 42px;
    }
}
@media (min-width: 1601px) {
    .about_us_container {
        width: 100%;
        max-width: 87.3125rem;
        justify-content: space-between;
        gap: 183px;
    }
    .about_bg_befor {
        width: 20rem;
        height: 15rem;
        top: 3rem;
        left: 4rem;
    }
    .about_content img {
        width: 31rem;
        left: 1rem;
        top: 38px;
    }
    .about_bg_after {
        width: 21rem;
        height: 15rem;
        top: 11.7rem;
        left: 22rem;
    }
    .about_text {
        left: 249px;
        top: 1rem;
        width: 28rem;
        height: auto;
    }
    .about_text h2 {
        font-size: 30px;
        letter-spacing: 2px;
        font-weight: 800;
    }
    .about_text p {
        font-size: 20px;
        line-height: 32px;
        font-weight: 500;
        width: 40rem;
    }
    .member_title{
        font-size: 42px;
    }
    .join_title{
        font-size: 42px;
    }
}















body{
    font-family: "Manrope";
    overflow-x: hidden;
}
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
.contact_us_container {
    position: relative;
    margin-left: auto;
    margin-right: auto;
    height: 100vh;
}
.contact_bg{
    position: relative;
    height: 100vh;

}
.contact_bg_color{
    background: linear-gradient(90deg, #8B49FB, #CDB1FD);
    width: 350px;
    height: 470px;
    position: absolute;
    left: 39rem;
    top: 3rem;
    z-index: 1;
    border-radius: 4px;
}
.contact_bg_img{
    width: 44rem;
    position: absolute;
    left: 49rem;
    top: 6rem;
    z-index: 3;
    border-radius: 4px;
}
.contact_bg_back{
    width: 52rem;
    position: absolute;
    left: 36rem;
    top: 32rem;
    z-index: 2;

}

/* form */

.contact_title{
    font-size: 40px;
    text-align: center;
    margin-bottom: 26px;
    margin-top: -14px;
    color: #5c2fa8;
    font-weight: 900;
    letter-spacing: 4px;
}
.contact_form{
    position: absolute;
    width: 52rem;
    left: 27rem;
    top: 32rem;
    z-index: 10;
}
.contact_box::before {
    position: absolute;
    content: "";
    right: -3px;
    top: -21px;
    width: 0px;
    height: 0px;
    border-left: 0px solid transparent;
    border-right: 96px solid transparent;
    border-bottom: 23px solid #ede3ff;
    margin-bottom: -3px;
}
.contact_box {
    position: absolute;
    top: -6rem;
    left: 9rem;
    width: 600px;
    height: 36rem;
    padding: 65px;
    margin: 20px auto;
    transform: translate(-50%, -55%);
    box-sizing: border-box;
    background-color: #ede3ff;
    border-radius: 4px;
}

.contact_box .user_box_contact{
  position: relative;
  padding-bottom: 17px;
}

.contact_box .user_box_contact input {
  width: 100%;
  padding: 22px 0;
  font-size: 17px;
  color: #390393;
  margin-bottom: 30px;
  border: none;
  border-bottom: 1px solid #390393;
  outline: none;
  background: transparent;
}

.contact_box .user_box_contact label {
  position: absolute;
  top: 0;
  left: 0;
  padding: 12px 0;
  font-size: 17px;
  color: #390393;
  pointer-events: none;
  transition: .5s;
}

.contact_box .user_box_contact input:focus ~ label,
.contact_box .user_box_contact input:valid ~ label {
  top: -20px;
  left: 0;
  color: #390393;
  font-size: 12px;
}

.contact_box form button {
    position: relative;
    display: inline-block;
    padding: 10px 20px;
    font-weight: bold;
    color: #390393;
    font-size: 16px;
    text-decoration: none;
    text-transform: uppercase;
    overflow: hidden;
    transition: .5s;
    margin-top: 20px;
    letter-spacing: 3px;
    border: none;
    background: none;
}

.contact_box button:hover {
  background: #390393;
  color: #ede3ff;
  border-radius: 4px;
}

.contact_box button span {
  position: absolute;
  display: block;
}

.contact_box button span:nth-child(1) {
  top: 0;
  left: -100%;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, transparent, #390393);
  animation: btn-anim1 1.5s linear infinite;
}

@keyframes btn-anim1 {
  0% {
    left: -100%;
  }

  50%,100% {
    left: 100%;
  }
}

.contact_box button span:nth-child(2) {
  top: -100%;
  right: 0;
  width: 2px;
  height: 100%;
  background: linear-gradient(180deg, transparent, #390393);
  animation: btn-anim2 1.5s linear infinite;
  animation-delay: .375s
}

@keyframes btn-anim2 {
  0% {
    top: -100%;
  }

  50%,100% {
    top: 100%;
  }
}

.contact_box button span:nth-child(3) {
  bottom: 0;
  right: -100%;
  width: 100%;
  height: 2px;
  background: linear-gradient(270deg, transparent, #390393);
  animation: btn-anim3 1.5s linear infinite;
  animation-delay: .75s
}

@keyframes btn-anim3 {
  0% {
    right: -100%;
  }

  50%,100% {
    right: 100%;
  }
}

.contact_box button span:nth-child(4) {
  bottom: -100%;
  left: 0;
  width: 2px;
  height: 100%;
  background: linear-gradient(360deg, transparent, #390393);
  animation: btn-anim4 1.5s linear infinite;
  animation-delay: 1.125s
}

@keyframes btn-anim4 {
  0% {
    bottom: -100%;
  }

  50%,100% {
    bottom: 100%;
  }
}

.contact_info{
    width: 57rem;
    background-color: #390393;
    height: 12rem;
    position: absolute;
    left: 35rem;
    z-index: 11;
    top: 41rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 2rem;
    gap: 21px;
    border-radius: 4px;
}
.info_content{
    color:#fff;
}
.info_content h2{
  padding-bottom: 12px;
}
.info_content p{
    color: #fff;
}
.info_content h2{
    color: #fff;
}

.contact_info:nth-child(2){
    width: 26rem;
    padding-top: 20px;
}













@media (max-width: 449px) {
  .contact_us_container {
    width: 100%;
    max-width: 18.3125rem;
  }
  .contact_title {
    font-size: 20px;
  }
  .contact_box form a {
    font-size: 8px;
    padding: 6px 13px;
  }
  .contact_box {
    top: -82px;
    left: -290px;
    width: 273px;
    height: 23rem;
    padding: 27px 30px;
  }
  .contact_box .user_box_contact input{
    font-size: 15px;
    margin-bottom: 18px;
    padding: 16px 0;
  }
  .contact_box .user_box_contact label{
    font-size: 10px;

  }
  .contact_box .user_box_contact {
    padding-bottom: 8px;
  }
  .contact_info {
    width: 12rem;
    height: 18rem;
    left: 50px;
    top: 43rem;
    padding: 1rem;
    gap: 21px;
    flex-direction: column;
    text-align: center;
  }
  .contact_bg_color{
    width: 288px;
    height: 100px;
    left: 3rem;
    top: 4rem;
  }
  .contact_bg_img{
    width: 16rem;
    left: 15px;
    top: 97px;
  }
  .contact_bg_back {
    display: none;
  }
  .contact_box::before {
    display: none;
  }
  .info_content p{
    font-size: 10px;
  }
  .info_content h2{
    padding-bottom: 10px;
    font-size: 18px;
  }
  .contact_box form button {
      font-size: 12px;
  }
}
  @media (min-width: 450px) and (max-width: 575px) {
  .contact_us_container {
    width: 100%;
    max-width: 24.3125rem;
  }
  .contact_title {
    font-size: 29px;
  }
  .contact_box form a {
    font-size: 11px;
  }
  .contact_box {
    top: -21px;
    left: -232px;
    width: 342px;
    height: 25rem;
    padding: 26px 40px;
  }
  .contact_box .user_box_contact input{
    font-size: 15px;
    margin-bottom: 18px;
    padding: 16px 0;
  }
  .contact_box .user_box_contact label{
    font-size: 15px;

  }
  .contact_box .user_box_contact {
    padding-bottom: 8px;
  }
  .contact_info {
    width: 24rem;
    height: 7rem;
    left: 8px;
    top: 43rem;
    padding: 1rem;
    gap: 21px;
  }
  .contact_bg_color{
    width: 288px;
    height: 100px;
    left: 3rem;
    top: 4rem;
  }
  .contact_bg_img{
    width: 24rem;
    left: 7px;
    top: 97px;
  }
  .contact_bg_back {
    display: none;
  }
  .contact_box::before {
    display: none;
  }
  .info_content p{
    font-size: 10px;
  }
  .info_content h2{
    padding-bottom: 10px;
    font-size: 18px;
  }
  .contact_box form button {
      font-size: 12px;
  }
}
@media (min-width: 576px) and (max-width: 799px) {
  .contact_us_container {
    width: 100%;
    max-width: 31.3125rem;
  }
  .contact_title {
    font-size: 29px;
  }
  .contact_box form a {
    font-size: 11px;
  }
  .contact_box {
    top: -193px;
    left: -325px;
    width: 342px;
    height: 25rem;
    padding: 26px 40px;
  }
  .contact_box .user_box_contact input{
    font-size: 15px;
    margin-bottom: 18px;
    padding: 16px 0;
  }
  .contact_box .user_box_contact label{
    font-size: 15px;

  }
  .contact_box .user_box_contact {
    padding-bottom: 8px;
  }
  .contact_info {
    width: 27rem;
    height: 8rem;
    left: 8rem;
    top: 27rem;
    padding: 1rem;
    gap: 21px;
  }
  .contact_bg_color{
    width: 228px;
    height: 100px;
    left: 4rem;
    top: 4rem;
  }
  .contact_bg_img{
    width: 24rem;
    left: 186px;
    top: 97px;
  }
  .contact_bg_back {
    width: 22rem;
    left: 12rem;
    top: 21rem;
  }
  .info_content p{
    font-size: 10px;
  }
  .info_content h2{
    padding-bottom: 10px;
    font-size: 18px;
  }
}
@media (min-width: 800px) and (max-width: 991px) {
  .contact_us_container {
    width: 100%;
    max-width: 44.3125rem;
  }
  .contact_title {
    font-size: 29px;
  }
  .contact_box form a {
    font-size: 11px;
  }
  .contact_box {
    top: -193px;
    left: -215px;
    width: 342px;
    height: 25rem;
    padding: 26px 40px;
  }
  .contact_box .user_box_contact input{
    font-size: 15px;
    margin-bottom: 18px;
    padding: 16px 0;
  }
  .contact_box .user_box_contact label{
    font-size: 15px;

  }
  .contact_box .user_box_contact {
    padding-bottom: 8px;
  }
  .contact_info {
    width: 27rem;
    height: 8rem;
    left: 16rem;
    top: 27rem;
    padding: 1rem;
    gap: 21px;
  }
  .contact_bg_color{
    width: 228px;
    height: 100px;
    position: absolute;
    left: 11rem;
    top: 4rem;
  }
  .contact_bg_img{
    width: 24rem;
    left: 296px;
    top: 97px;
  }
  .contact_bg_back {
    width: 22rem;
    left: 19rem;
    top: 21rem;
  }
  .info_content p{
    font-size: 10px;
  }
  .info_content h2{
    padding-bottom: 10px;
    font-size: 18px;
  }

}
@media (min-width: 992px) and (max-width: 1199px) {
  .contact_us_container {
    width: 100%;
    max-width: 57.3125rem;
  }
  .contact_title {
    font-size: 29px;
  }
  .contact_box form a {
    font-size: 11px;
  }
  .contact_box {
    top: -193px;
    left: -215px;
    width: 342px;
    height: 25rem;
    padding: 26px 40px;
  }
  .contact_box .user_box_contact input{
    font-size: 15px;
    margin-bottom: 18px;
    padding: 16px 0;
  }
  .contact_box .user_box_contact label{
    font-size: 15px;

  }
  .contact_box .user_box_contact {
    padding-bottom: 8px;
  }
  .contact_info {
    width: 30rem;
    height: 8rem;
    left: 16rem;
    top: 30rem;
    padding: 1rem;
    gap: 21px;
  }
  .contact_bg_color{
    width: 228px;
    height: 100px;
    position: absolute;
    left: 11rem;
    top: 4rem;
  }
  .contact_bg_img{
    width: 30rem;
    left: 296px;
    top: 97px;
  }
  .contact_bg_back {
    width: 28rem;
    left: 19rem;
    top: 25rem;
  }
  .info_content p{
    font-size: 10px;
  }
  .info_content h2{
    padding-bottom: 10px;
    font-size: 18px;
  }
}
@media (min-width: 1200px) and (max-width: 1400px) {
  .contact_us_container {
    width: 100%;
    max-width: 70.3125rem;
  }
  .contact_title {
    font-size: 29px;
  }
  .contact_box form a {
    font-size: 11px;
  }
  .contact_box {
    top: -185px;
    left: -109px;
    width: 460px;
    height: 26rem;
    padding: 26px 40px;
  }
  .contact_box .user_box_contact input{
    font-size: 15px;
    margin-bottom: 18px;
    padding: 16px 0;
  }
  .contact_box .user_box_contact label{
    font-size: 15px;

  }
  .contact_box .user_box_contact {
    padding-bottom: 8px;
  }
  .contact_info {
    width: 34rem;
    height: 8rem;
    left: 26rem;
    top: 32rem;
    padding: 1rem;
    gap: 21px;

  }
  .contact_bg_color{
    width: 228px;
    height: 100px;
    position: absolute;
    left: 22rem;
    top: 4rem;
  }
  .contact_bg_img{
    width: 34rem;
    left: 460px;
    top: 97px;
  }
  .contact_bg_back {
    width: 28rem;
    left: 28rem;
    top: 27rem;
  }
  .info_content p{
    font-size: 13px;
  }
  .info_content h2{
    padding-bottom: 10px;
    font-size: 18px;
    letter-spacing: 1px;
  }
}
@media (min-width: 1401px) and (max-width: 1600px) {
  .contact_us_container {
    width: 100%;
    max-width: 70.3125rem;
  }
  .event_container{
    width: 100%;
    max-width: 70.3125rem;
  }
  .contact_title {
    font-size: 29px;
  }
  .contact_box form a {
    font-size: 11px;
  }
  .contact_box {
    top: -185px;
    left: -50px;
    width: 470px;
    height: 26rem;
    padding: 26px 40px;
  }
  .contact_box .user_box_contact input{
    font-size: 15px;
    margin-bottom: 18px;
    padding: 16px 0;
  }
  .contact_box .user_box_contact label{
    font-size: 15px;

  }
  .contact_box .user_box_contact {
    padding-bottom: 8px;
  }
  .contact_info {
    width: 39rem;
    height: 9rem;
    left: 26rem;
    top: 32rem;
    padding: 1rem;
    gap: 21px;
  }
  .contact_bg_color{
    width: 265px;
    height: 100px;
    position: absolute;
    left: 23rem;
    top: 4rem;
  }
  .contact_bg_img{
    width: 34rem;
    left: 524px;
    top: 97px;
  }
  .contact_bg_back {
    width: 28rem;
    left: 36rem;
    top: 27rem;
  }
  .info_content p{
    font-size: 18px;
    color: #fff;
  }
  .info_content h2{
    padding-bottom: 10px;
    font-size: 18px;
    color: #fff;
    letter-spacing: 1px;
  }
}
@media (min-width: 1601px) {
    .event_container{
        width: 100%;
        max-width: 87.3125rem;
    }
    .event_container_school{
        width: 100%;
        max-width: 87.3125rem;
    }
}


.event_page{
    width: 85%;
    margin-left: auto;
    margin-right: auto;
}
.event_title{
  font-weight: 700;
  color: #390393;
  font-size: 42px;
  margin-top: 5rem;
}
.event_container{
    display: flex;
    align-items: center;
    justify-content: left;
    flex-wrap: wrap;
    margin-bottom: 12rem;
    margin-top: 3rem;
}
.card_event {
  position: relative;
  overflow: hidden;
  margin: 10px;
  min-width: 230px;
  max-width: 315px;
  width: 100%;
  background: #130824;
  text-align: left;
  color: #ffffff;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
  font-size: 16px;
  border-radius: 4px;
}
.card_event * {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}
.card_event > img,
.card_event .image_event img {
  -webkit-transform: scale(1.05);
  transform: scale(1.05);
  max-width: 100%;
}
.card_event > img {
  vertical-align: top;
  position: relative;
  -webkit-filter: blur(5px);
  filter: blur(5px);
  opacity: 0.6;
  height: 25rem;
}
.card_event .caption_event,
.card_event .image_event {
  -webkit-transition-delay: 0.2s;
  transition-delay: 0.2s;
}
.card_event .image_event {
  position: absolute;
  top: 0;
  bottom: 25%;
  right: 0;
  left: 0;
  overflow: hidden;
}
.card_event .image_event img {
  position: absolute;
  top: 0;
}
.card_event .caption_event {
  position: absolute;
  top: 72%;
  bottom: 46px;
  left: 20px;
  right: 20px;
  border-bottom: 2px solid #ffffff;
  padding-top: 20px;
  z-index: 1;
}
.card_event h3,
.card_event p {
  margin: 0;
}
.card_event h3 {
  font-weight: 700;
  margin-bottom: 5px;
  text-transform: uppercase;
}
.card_event p {
  font-size: 0.9em;
  letter-spacing: 1px;
  font-weight: 400;
  opacity: 0;
}
.card_event .read_more_event {
  display: block;
  opacity: 0;
  -webkit-transform: translateX(-20px);
  transform: translateX(-20px);
  line-height: 48px;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 0 20px;
  color: #ffffff;
  right: 0;
  bottom: 0;
  font-weight: 500;
  position: absolute;
}
.card_event a {
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  position: absolute;
  z-index: 1;
}
.card_event:hover .read_more_event,
.card_event.hover .read_more_event,
.card_event:hover .caption_event,
.card_event.hover .caption_event {
  opacity: 1;
  -webkit-transform: translateX(0px);
  transform: translateX(0px);
}
.card_event:hover .caption_event,
.card_event.hover .caption_event,
.card_event:hover .image_event,
.card_event.hover .image_event {
  -webkit-transition-delay: 0s;
  transition-delay: 0s;
}
.card_event:hover .caption_event,
.card_event.hover .caption_event {
  top: 50%;
}
.card_event:hover .image_event,
.card_event.hover .image_event {
  bottom: 55%;
}
.card_event:hover p,
.card_event.hover p {
  opacity: 1;
  -webkit-transition-delay: 0.2s;
  transition-delay: 0.2s;
}
.caption_event p{
    color: #fff;
}
.card_event:hover .caption_event{
    border-bottom: none;
}
/* event schools */
/* استایل‌های اصلی کارت (همان کد شما) */
.event_title_school {
  font-weight: 700;
  color: #390393;
  font-size: 42px;
  margin-top: 100px;
}

.event_container_school {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-top: 3rem;
}

.card_event_school {
  position: relative;
  overflow: hidden;
  margin: 10px;
  min-width: 230px;
  max-width: 315px;
  width: 100%;
  background: #130824;
  text-align: left;
  color: #ffffff;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
  font-size: 16px;
  border-radius: 4px;
}

.card_event_school * {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}

.card_event_school > img,
.card_event_school .image_event_school img {
  -webkit-transform: scale(1.05);
  transform: scale(1.05);
  max-width: 100%;
}

.card_event_school > img {
  vertical-align: top;
  position: relative;
  -webkit-filter: blur(5px);
  filter: blur(5px);
  opacity: 0.6;
  height: 25rem;
}

.card_event_school .caption_event_school,
.card_event_school .image_event_school {
  -webkit-transition-delay: 0.2s;
  transition-delay: 0.2s;
}

.card_event_school .image_event_school {
  position: absolute;
  top: 0;
  bottom: 25%;
  right: 0;
  left: 0;
  overflow: hidden;
}

.card_event_school .image_event_school img {
  position: absolute;
  top: 0;
}

.card_event_school .caption_event_school {
  position: absolute;
  top: 61%;
  bottom: 46px;
  left: 20px;
  right: 20px;
  border-bottom: 2px solid #ffffff;
  padding-top: 20px;
  z-index: 1;
}
.card_event_school:hover .caption_event_school{
    border-bottom: none;
}

.card_event_school h3,
.card_event_school p {
  margin: 0;
}

.card_event_school h3 {
  font-weight: 700;
  margin-bottom: 5px;
  text-transform: uppercase;
}

.card_event_school p {
  font-size: 0.9em;
  letter-spacing: 1px;
  font-weight: 400;
  opacity: 0;
}

.card_event_school .read_more_event_school {
  display: block;
  opacity: 0;
  -webkit-transform: translateX(-20px);
  transform: translateX(-20px);
  line-height: 48px;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 0 20px;
  color: #ffffff;
  right: 0;
  bottom: 0;
  font-weight: 500;
  position: absolute;
  border: none;
  background: transparent;
  cursor: pointer;
  font-family: inherit;
  z-index: 2;
}

.card_event_school a {
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  position: absolute;
  z-index: 1;
}
.caption_event_school p{
    color: #fff;
}

.card_event_school:hover .read_more_event_school,
.card_event_school.hover .read_more_event_school,
.card_event_school:hover .caption_event_school,
.card_event_school.hover .caption_event_school {
  opacity: 1;
  -webkit-transform: translateX(0px);
  transform: translateX(0px);
}

.card_event_school:hover .caption_event_school,
.card_event_school.hover .caption_event_school,
.card_event_school:hover .image_event_school,
.card_event_school.hover .image_event_school {
  -webkit-transition-delay: 0s;
  transition-delay: 0s;
}

.card_event_school:hover .caption_event_school,
.card_event_school.hover .caption_event_school {
  top: 44%;
}

.card_event_school:hover .image_event_school,
.card_event_school.hover .image_event_school {
  bottom: 55%;
}

.card_event_school:hover p,
.card_event_school.hover p {
  opacity: 1;
  -webkit-transition-delay: 0.2s;
  transition-delay: 0.2s;
}

/* استایل‌های پاپ‌آپ جدید */
.popup_overlay_school {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.popup_overlay_school.active {
    display: flex;
    opacity: 1;
}

.popup_content_school {
    background: white;
    border-radius: 15px;
    width: 90%;
    max-width: 500px;
    max-height: 98vh;
    position: relative;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    animation: popupFadeIn 0.4s ease-out;
}

@keyframes popupFadeIn {
    from {
        opacity: 0;
        transform: translateY(-50px) scale(0.9);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.popup_container_school {
    padding: 40px 30px;
    position: relative;
}

.popup_close_btn_school{
    position: absolute;
    top: 15px;
    right: 20px;
    background: none;
    border: none;
    font-size: 30px;
    color: #666;
    cursor: pointer;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.3s ease;
    z-index: 10;
}

.popup_close_btn_school:hover {
    background: #f5f5f5;
    color: #390393;
    transform: rotate(90deg);
}

.popup_header_school h1 {
    color: #390393;
    text-align: center;
    text-transform: uppercase;
    font-weight: 900;
    font-size: 2.5rem;
    letter-spacing: 2px;
    margin-bottom: 30px;
    position: relative;
    padding-bottom: 15px;
}


.popup-image {
    width: 100%;
    max-width: 250px;
    display: block;
    margin: 0 auto 30px;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.popup_body_school h2 {
    color: #333;
    font-size: 14px;
    text-align: center;
    line-height: 1.5;
    margin-bottom: 50px;
    font-weight: 600;
    margin-top: -38px;
}

.subscribe-form {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.subscribe-form input[type="email"] {
    padding: 16px 20px;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    font-size: 1rem;
    font-family: inherit;
    transition: all 0.3s ease;
    outline: none;
}

.subscribe-form input[type="email"]:focus {
    border-color: #8e6ac1;
    box-shadow: 0 0 0 3px rgba(142, 106, 193, 0.2);
}

.subscribe-form button[type="submit"] {
    padding: 16px 20px;
    background: linear-gradient(135deg, #8e6ac1, #7752b8);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.subscribe-form button[type="submit"]:hover {
    background: linear-gradient(135deg, #7752b8, #6342a3);
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(119, 82, 184, 0.3);
}

.subscribe-form button[type="submit"]:active {
    transform: translateY(0);
}





/* form */
.popup_body_school form{
  margin-top: -45px;
  padding: 10px 32px;
}

.popup_body_school .user_box_school{
  position: relative;
}

.popup_body_school .user_box_school input {
  width: 100%;
  padding: 12px 0;
  font-size: 17px;
  color: #390393;
  margin-bottom: 11px;
  border: none;
  border-bottom: 1px solid #390393;
  outline: none;
  background: transparent;
}

.popup_body_school .user_box_school label {
  position: absolute;
  top: 0;
  left: 0;
  padding: 12px 0;
  font-size: 17px;
  color: #390393;
  pointer-events: none;
  transition: .5s;
}

.popup_body_school .user_box_school input:focus ~ label,
.popup_body_school .user_box_school input:valid ~ label {
  top: -20px;
  left: 0;
  color: #390393;
  font-size: 12px;
}

.popup_body_school form button {
  position: relative;
  display: inline-block;
  padding: 10px 20px;
  font-weight: bold;
  color: #390393;
  font-size: 16px;
  text-decoration: none;
  text-transform: uppercase;
  overflow: hidden;
  transition: .5s;
  margin-top: 20px;
  letter-spacing: 3px;
  border: none;
  background: none;
}

.popup_body_school button:hover {
  background: #390393;
  color: #ede3ff;
  border-radius: 4px;
}

.popup_body_school button span {
  position: absolute;
  display: block;
}

.popup_body_school button span:nth-child(1) {
  top: 0;
  left: -100%;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, transparent, #390393);
  animation: btn-anim1 1.5s linear infinite;
}

@keyframes btn-anim1 {
  0% {
    left: -100%;
  }

  50%,100% {
    left: 100%;
  }
}

.popup_body_school button span:nth-child(2) {
  top: -100%;
  right: 0;
  width: 2px;
  height: 100%;
  background: linear-gradient(180deg, transparent, #390393);
  animation: btn-anim2 1.5s linear infinite;
  animation-delay: .375s
}

@keyframes btn-anim2 {
  0% {
    top: -100%;
  }

  50%,100% {
    top: 100%;
  }
}

.popup_body_school button span:nth-child(3) {
  bottom: 0;
  right: -100%;
  width: 100%;
  height: 2px;
  background: linear-gradient(270deg, transparent, #390393);
  animation: btn-anim3 1.5s linear infinite;
  animation-delay: .75s
}

@keyframes btn-anim3 {
  0% {
    right: -100%;
  }

  50%,100% {
    right: 100%;
  }
}

.popup_body_school button span:nth-child(4) {
  bottom: -100%;
  left: 0;
  width: 2px;
  height: 100%;
  background: linear-gradient(360deg, transparent, #390393);
  animation: btn-anim4 1.5s linear infinite;
  animation-delay: 1.125s
}

@keyframes btn-anim4 {
  0% {
    bottom: -100%;
  }

  50%,100% {
    bottom: 100%;
  }
}

























@media (max-width: 768px) {
    .popup_container_school {
        padding: 30px 20px;
    }

    .popup_header_school h1 {
        font-size: 2rem;
    }

    .popup_body_school h2 {
        font-size: 1.2rem;
    }

    .popup-image {
        max-width: 200px;
    }
}

@media (max-width: 480px) {
    .popup_content_school {
        width: 95%;
    }

    .popup_header_school h1 {
        font-size: 1.8rem;
    }
}
/*-------------------------------------بیات-----------------------------------------------------*/

.swiper-wrapper {
    display: flex;
    align-items: stretch;
    height: 100%;
}

.swiper-slide {
    height: auto;
    display: flex;
}

@media screen and (max-width: 992px) {
    .blog_slider {
        max-width: 680px;
        height: 400px;
    }
}

@media screen and (max-width: 768px) {
    .blog_slider {
        min-height: 500px;
        height: auto;
        margin: 50px auto 60px;
        padding: 20px;
        width: 85%;
    }
}

@media screen and (max-height: 500px) and (min-width: 992px) {
    .blog_slider {
        height: 350px;
    }
}

.blog_slider__wrp {
    width: 100%;
    height: 100%;
}

.blog_slider__item {
    display: flex !important;
    align-items: center;
    width: 750px !important;
    height: 100%;
    gap: 30px;
    overflow: visible;
}

@media screen and (max-width: 768px) {
    .blog_slider__item {
        flex-direction: column;
        gap: 20px;
        text-align: center;
    }
}

.blog_slider__item.swiper-slide-active .blog_slider__img img {
    opacity: 1;
    transition-delay: .3s;
}

.blog_slider__item.swiper-slide-active .blog_slider__content > * {
    opacity: 1;
    transform: none;
}

.blog_slider__item.swiper-slide-active .blog_slider__content > *:nth-child(1) {
    transition-delay: 0.3s;
}

.blog_slider__item.swiper-slide-active .blog_slider__content > *:nth-child(2) {
    transition-delay: 0.4s;
}

.blog_slider__item.swiper-slide-active .blog_slider__content > *:nth-child(3) {
    transition-delay: 0.5s;
}

.blog_slider__item.swiper-slide-active .blog_slider__content > *:nth-child(4) {
    transition-delay: 0.6s;
}

.blog_slider__item.swiper-slide-active .blog_slider__content > *:nth-child(5) {
    transition-delay: 0.7s;
}

.blog_slider__item.swiper-slide-active .blog_slider__content > *:nth-child(6) {
    transition-delay: 0.8s;
}

.blog_slider__item.swiper-slide-active .blog_slider__content > *:nth-child(7) {
    transition-delay: 0.9s;
}

.blog_slider__item.swiper-slide-active .blog_slider__content > *:nth-child(8) {
    transition-delay: 1s;
}

.blog_slider__item.swiper-slide-active .blog_slider__content > *:nth-child(9) {
    transition-delay: 1.1s;
}

.blog_slider__item.swiper-slide-active .blog_slider__content > *:nth-child(10) {
    transition-delay: 1.2s;
}

.blog_slider__item.swiper-slide-active .blog_slider__content > *:nth-child(11) {
    transition-delay: 1.3s;
}

.blog_slider__item.swiper-slide-active .blog_slider__content > *:nth-child(12) {
    transition-delay: 1.4s;
}

.blog_slider__item.swiper-slide-active .blog_slider__content > *:nth-child(13) {
    transition-delay: 1.5s;
}

.blog_slider__item.swiper-slide-active .blog_slider__content > *:nth-child(14) {
    transition-delay: 1.6s;
}

.blog_slider__item.swiper-slide-active .blog_slider__content > *:nth-child(15) {
    transition-delay: 1.7s;
}

/* .blog_slider__img {
    width: 300px;
    flex-shrink: 0;
    height: 300px;
    background-image: linear-gradient(147deg, #481384a2 0%, #6b21f359 74%);
    border-radius: 20px;
    overflow: visible;
    position: relative;
    left: -90px;
    top: 0;
} */

.blog_slider__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    opacity: 0;
    border-radius: 20px;
    transition: all .3s;
}

@media screen and (max-width: 768px) {
    .blog_slider__img {
        width: 90%;
        height: 200px;
        max-width: 300px;
        margin: 0 auto;
    }
}

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

@media screen and (max-height: 500px) and (min-width: 992px) {
.blog_slider__img {
    width: 300px;
    flex-shrink: 0;
    height: 300px;
    background-image: linear-gradient(147deg, rgb(72 19 132 / 0%) 0%, rgb(107 33 243 / 0%) 74%);
    border-radius: 20px;
    overflow: visible;
    position: relative;
    left: -90px;
    top: 0px;
}
}

.blog_slider__content {
    flex: 1;
    min-width: 590px;
    margin-left: -70px;
}

@media screen and (max-width: 768px) {
    .blog_slider__content {
        padding: 0 20px;
        width: 100%;
    }
}

@media screen and (max-width: 576px) {
    .blog_slider__content {
        padding: 0 10px;
    }
}

.blog_slider__content > * {
    opacity: 0;
    transform: translateY(25px);
    transition: all .4s;
}

.blog_slider__code {
    color: #423a66;
    margin-bottom: 15px;
    display: block;
    font-weight: 500;
    font-size: 14px;
}

.blog_slider__title {
    font-size: 24px;
    font-weight: 700;
    color: #4b406f;
    margin-bottom: 20px;
    line-height: 1.3;
}

.blog_slider__text {
    color: #76709c;
    margin-bottom: 30px;
    line-height: 1.6em;
    font-size: 15px;
}

.blog_slider .swiper-container-horizontal > .swiper-pagination-bullets,
.blog_slider .swiper-pagination-custom,
.blog_slider .swiper-pagination-fraction {
    bottom: 10px;
    left: 0;
    width: 100%;
}

.blog_slider__pagination {
    position: absolute;
    z-index: 21;
    right: 20px;
    width: 11px !important;
    text-align: center;
    left: auto !important;
    top: 50%;
    bottom: auto !important;
    transform: translateY(-50%);
}

@media screen and (max-width: 768px) {
    .blog_slider__pagination {
        transform: translateX(-50%);
        left: 50% !important;
        top: auto;
        bottom: 15px !important;
        width: 100% !important;
        display: flex;
        justify-content: center;
        align-items: center;
    }
}

.blog_slider__pagination.swiper-pagination-bullets .swiper-pagination-bullet {
    margin: 8px 0;
}

@media screen and (max-width: 768px) {
    .blog_slider__pagination.swiper-pagination-bullets .swiper-pagination-bullet {
        margin: 0 5px;
    }
}

.blog_slider__pagination .swiper-pagination-bullet {
    width: 11px;
    height: 11px;
    display: block;
    border-radius: 10px;
    background: #b30a42;
    opacity: 0.5;
    transition: all .3s;
}

.blog_slider__pagination .swiper-pagination-bullet-active {
    opacity: 1;
    background: #b30a42;
    height: 30px;
    box-shadow: 0px 0px 20px rgba(252, 56, 56, 0.3);
}

@media screen and (max-width: 768px) {
    .blog_slider__pagination .swiper-pagination-bullet-active {
        height: 11px;
        width: 30px;
    }
}

/* - - - - - - - - - - - - - - - - - - - - - accardion menu - - - - - - - - - - - - - - - - - - - - - */
.course_wrapper {
    max-width: 962px;
    margin: 60px auto;
    padding: 22px;
    border-radius: 4px;
    /* font-family: sans-serif; */
}

.course_info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 22px;
    color: #4c1d95;
}

.teacher strong {
    color: #7c3aed;
}

.sessions {
    background: rgba(255, 255, 255, 0.6);
    padding: 6px 14px;
    border-radius: 999px;
    font-weight: bold;
}

.accordion {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.acc_item {
    background: rgba(255, 255, 255, 0.65);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(124, 58, 237, 0.041);
}

.acc_title {
    width: 100%;
    border: none;
    background: transparent;
    padding: 16px 18px;
    font-size: 17px;
    font-weight: 600;
    cursor: pointer;
    color: #3b0764;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.arrow {
    font-size: 20px;
    transition: 0.35s;
    color: #7c3aed;
}

.acc_content {
    max-height: 0;
    overflow: hidden;
    transition: 0.45s ease;
    background: linear-gradient(180deg,
            rgba(237, 233, 254, 0.8),
            rgba(255, 255, 255, 0.9));
}

.acc_content ul {
    padding: 14px 18px 18px;
}

.acc_content li {
    padding: 6px 0;
    font-size: 13px;
    color: #4c1d95;
}

.acc_item.active .arrow {
    transform: rotate(90deg);
}

.lesson_list {
    list-style: none;
    padding: 10px 18px 18px;
    margin: 0;
}

.accordion ul {
    list-style: none;
}

.lesson_list li {
    border-bottom: 1px solid rgba(124, 58, 237, 0.25);
    list-style: none;
}

.lesson_list li:last-child {
    border-bottom: none;
}

.lesson_list a {
    text-decoration: none;
    display: block;
    padding: 10px 0;
}

.lesson_row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    color: #4c1d95;
    font-size: 17px;
    transition: 0.3s ease;
}

.lesson_time {
    font-size: 15px;
    background: rgba(124, 58, 237, 0.15);
    padding: 4px 10px;
    border-radius: 999px;
    color: #6d28d9;
}

.lesson_list li:hover .lesson_row {
    color: #7c3aed;
    transform: translateX(4px);
}

/* - - - - - - - - - - - - - - - - - - - - - ticket - - - - - - - - - - - - - - - - - - - - - */


.ticket_Section {
    position: relative;
    width: 100%;
    height: 600px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.signupSection {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 955px;
    height: 409px;
    display: flex;
    text-align: center;
    color: white;
    /*background: url(static/images/details/ml2.jpg) no-repeat center center;*/
    background-size: cover;
    box-shadow: 3px 10px 20px 5px rgba(0, 0, 0, 0.5);
    border-radius: 10px;
    overflow: hidden;
}

.info {
    width: 45%;
    background: rgba(20, 20, 20, 0);
    border-right: 5px solid rgba(30, 30, 30, 0.8);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.info h2 {
    padding-top: 20px;
    font-size: xx-large;
    margin: 12px;
}

.info p {
    font-size: 18px;
    margin: 10px 0 0 0;
}

.info .icon {
    font-size: 8em;
    padding: 20px 0;
    color: rgb(112, 10, 180);
}

.signupForm {
    width: 55%;
    padding: 30px;
    background: rgba(32, 20, 40, 0.8);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transition: 0.2s;
    padding-top: 20px;
    padding-bottom: 20px;
}

.signupForm h2 {
    font-weight: 00;
    font-size: xx-large;
    margin-bottom: 15px;
    color: #fcd5fd;
}

.inputFields {
    width: 90%;
    max-width: 250px;
    padding: 10px;
    margin: 5px 0;
    font-size: 16px;
    border: none;
    border-bottom: 1px solid rgb(132, 10, 180);
    background: rgba(20, 20, 20, 0.2);
    color: white;
    outline: none;
}

.noBullet {
    list-style: none;
    padding: 0;
    margin: 0;
    width: 100%;
}

.noBullet label{
    display: none;
}


.form-control{
    background: none;
    border-bottom: 2px solid #fccdfd;
    color: #fff;
    height: 42px;
    width: 224px;
    border-right: none;
    border-left: none;
    border-top: none;
    margin-bottom: 20px;
}
.form-control:active{
    border: none;

}
.form-control:focus{
    border: none;

}


#join_btn {
    margin-top: 10px;
    padding: 10px 20px;
    font-size: 18px;
    color: #ffffffa8;
    background: rgba(20, 20, 20, 0.6);
    border: 1px solid rgb(146, 10, 180);
    cursor: pointer;
    transition: 0.4s;
}

#join_btn:hover {
    background: rgba(20, 20, 20, 0.8);
    padding: 10px 80px;
}

.priceInfo {
    margin-top: 5px;
    text-align: center;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
}

.originalPrice {
    text-decoration: line-through;
    color: rgba(255, 255, 255, 0.6);
    font-size: 21px;
    margin: 0;
    margin-top: 20px;
    margin-right: 10px;
}

.offerPrice {
    color: #ffffff;
    font-size: 40px;
    font-weight: bold;
    margin: 5px 0 0 0;
}

/* - - - - - - - - - - - - - - - - - - - - - teacher - - - - - - - - - - - - - - - - - - - - - */
.instructorImage {
    max-width: 100%;
    display: block;
}

.instructorStatistics {
    list-style: none;
}

.instructorProfileCard::after,
.instructorProfileCard .instructorImage {
    border-radius: 50%;
}

.instructorProfileCard,
.instructorStatistics {
    display: flex;
}

.instructorProfileCard {
    padding: 2.5rem 2rem;
    margin-left: 26%;
    border-radius: 10px;
    background-color: rgba(255, 255, 255, 0.308);
    max-width: 906px;
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.15);
    position: relative;
    transform-style: preserve-3d;
    overflow: hidden;
}

.instructorProfileCard::before,
.instructorProfileCard::after {
    content: '';
    position: absolute;
    z-index: -1;
}

.instructorProfileCard::before {
    width: 100%;
    height: 100%;
    border: 1px solid #FFF;
    border-radius: 10px;
    top: -0.7rem;
    left: -0.7rem;
}

.instructorProfileCard::after {
    height: 15rem;
    width: 15rem;
    background-color: #8641f5aa;
    top: -8rem;
    right: -8rem;
    box-shadow: 2rem 6rem 0 -3rem #FFF;
}

.instructorImage {
    width: 8rem;
    min-width: 153px;
    box-shadow: -20px 43px 85px 128px #ae80f88c;
}

.instructorContent {
    margin-left: 1.5rem;
}

.instructorHeader {
    margin-bottom: 1rem;
}

.instructorFullName {
    font-size: 1.3rem;
}

.instructorUsername {
    font-size: 0.8rem;
    color: #333;
}

.instructorBio {
    font-size: 19px;
    margin-bottom: 1rem;
}

.instructorStatistics {
    margin-bottom: 1rem;
}

.instructorStatItem {
    min-width: 5rem;
}

.instructorStatValue {
    font-size: 0.99rem;
}

.instructorStatLabel {
    font-size: 0.75rem;
}

.instructorActions button {
    font-family: 'Poppins', sans-serif;
    min-width: 120px;
    padding: 0.5rem;
    border: 1px solid #222;
    border-radius: 5px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.25s linear;
}

.header_btn {
    display: flex;
    border-radius: 4px;
    padding: 12px 25px;
    gap: 10px;
    background: linear-gradient(90deg, #6A15FA, #8B49FB);
    color: #fff;
    align-items: center;
    justify-content: center;
    transition: background 0.5s ease, transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.header_btn:hover {
    background: linear-gradient(90deg, #390393, #4F04CE);
    cursor: pointer;
}

.header_btn .header_button_text {
    height: 24px;
    width: 103.5px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    transition: transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.header_btn:hover .header_button_text {
    transform: translateX(6px);
}

.header_btn svg {
    fill: #fff;
    stroke: #fff;
    stroke-width: 2;
    transition: transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.header_btn:hover svg {
    transform: translateX(4px);
}

.header_btn .header_button_text,
.header_btn svg {
    will-change: transform;
}

.header_btn:active {
    background: linear-gradient(90deg, #CDB1FD, #CDB1FD);
    transform: scale(0.97);
}

@media screen and (max-width: 450px) {
    .instructorProfileCard {
        display: block;
    }

    .instructorContent {
        margin-left: 0;
        margin-top: 1.5rem;
    }

    .instructorActions button {
        min-width: 100px;
    }
}

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */



@media (min-width: 992px) and (max-width: 1199px) {
    .blog_slider {
        /* width: 90%; */
        position: relative;
        max-width: 749px;
        margin: auto;
        background: rgba(248, 242, 255, 0.68);
        box-shadow: rgba(84, 37, 122, 0.44) 0px 14px 80px;
        padding: 25px;
        border-radius: 25px;
        /* height: 400px; */
        transition: 0.3s;
        overflow: visible !important;
    }
}



/* ------------- responsiv header  -------------- */
@media (max-width: 449px) {

}

@media (min-width: 450px) and (max-width: 575px) {

}

@media (min-width: 576px) and (max-width: 799px) {

}

@media (min-width: 800px) and (max-width: 991px) {

}

@media (max-width: 992px) {

}



@media (max-width: 992px) {

}

@media (min-width: 992px) and (max-width: 1199px) {
    .blog_slider {
        /* width: 90%; */
        position: relative;
        max-width: 749px;
        margin: auto;
        background: rgba(248, 242, 255, 0.68);
        box-shadow: rgba(84, 37, 122, 0.44) 0px 14px 80px;
        padding: 25px;
        border-radius: 25px;
        /* height: 400px; */
        transition: 0.3s;
        overflow: visible !important;
    }
}


    .blog_slider{
    /* width: 90%; */
    position: relative;
    max-width: 749px;
    margin: auto;
    background: rgba(248, 242, 255, 0.68);
    box-shadow: rgba(84, 37, 122, 0.44) 0px 14px 80px;
    padding: 25px;
    border-radius: 25px;
    /* height: 400px; */
    transition: 0.3s;
    overflow: visible !important;
    margin-top: 100px;
    margin-left: 33%;
}
.blog_slider__content {
    flex: 1 1 0%;
    min-width: 433px;
    margin-left: -68px;
}
.blog_slider__item {
    align-items: center;
    height: 100%;
    gap: 1px;
    overflow: visible;
    display: flex !important;
    width: 693px !important;
}
.blog_slider__img {
    width: 265px;
    flex-shrink: 0;
    height: 235px;
    background-image: linear-gradient(147deg, rgb(72 19 132 / 0%) 0%, rgb(107 33 243 / 0%) 74%);
    border-radius: 20px;
    overflow: visible;
    position: relative;
    left: -108px;
    top: -4px;
    height: 262px;
}

@media (min-width: 1401px) and (max-width: 1600px) {

}

@media (min-width: 1200px) and (max-width: 1400px) {

}

@media (min-width: 1200px) and (max-width: 1600px) {

}

@media (min-width: 1601px) {

}

/* ------------------- research section responsive---------------------- */
@media (max-width: 575px) {

}

@media (min-width: 576px) and (max-width: 768px) {

}

@media (min-width: 769px) and (max-width: 992px) {

}

@media (min-width: 993px) and (max-width: 1200px) {

}

@media (min-width: 1201px) {

}

/* - - - - - - - - - - - - - - - - - - - - - title distribution - - - - - - - - - - - - - - - - - - - - - */



.swiper-wrapper {
    display: flex;
    align-items: stretch;
    height: 100%;
}

.swiper-slide {
    height: auto;
    display: flex;
}

@media screen and (max-width: 992px) {
    .blog_slider {
        max-width: 680px;
        height: 400px;
    }
}

@media screen and (max-width: 768px) {
    .blog_slider {
        min-height: 500px;
        height: auto;
        margin: 50px auto 60px;
        padding: 20px;
        width: 85%;
    }
}

@media screen and (max-height: 500px) and (min-width: 992px) {
    .blog_slider {
        height: 350px;
    }
}

.blog_slider__wrp {
    width: 100%;
    height: 100%;
}

.blog_slider__item {
    display: flex !important;
    align-items: center;
    width: 750px !important;
    height: 100%;
    gap: 30px;
    overflow: visible;
}

@media screen and (max-width: 768px) {
    .blog_slider__item {
        flex-direction: column;
        gap: 20px;
        text-align: center;
    }
}

.blog_slider__item.swiper-slide-active .blog_slider__img img {
    opacity: 1;
    transition-delay: .3s;
}

.blog_slider__item.swiper-slide-active .blog_slider__content > * {
    opacity: 1;
    transform: none;
}

.blog_slider__item.swiper-slide-active .blog_slider__content > *:nth-child(1) {
    transition-delay: 0.3s;
}

.blog_slider__item.swiper-slide-active .blog_slider__content > *:nth-child(2) {
    transition-delay: 0.4s;
}

.blog_slider__item.swiper-slide-active .blog_slider__content > *:nth-child(3) {
    transition-delay: 0.5s;
}

.blog_slider__item.swiper-slide-active .blog_slider__content > *:nth-child(4) {
    transition-delay: 0.6s;
}

.blog_slider__item.swiper-slide-active .blog_slider__content > *:nth-child(5) {
    transition-delay: 0.7s;
}

.blog_slider__item.swiper-slide-active .blog_slider__content > *:nth-child(6) {
    transition-delay: 0.8s;
}

.blog_slider__item.swiper-slide-active .blog_slider__content > *:nth-child(7) {
    transition-delay: 0.9s;
}

.blog_slider__item.swiper-slide-active .blog_slider__content > *:nth-child(8) {
    transition-delay: 1s;
}

.blog_slider__item.swiper-slide-active .blog_slider__content > *:nth-child(9) {
    transition-delay: 1.1s;
}

.blog_slider__item.swiper-slide-active .blog_slider__content > *:nth-child(10) {
    transition-delay: 1.2s;
}

.blog_slider__item.swiper-slide-active .blog_slider__content > *:nth-child(11) {
    transition-delay: 1.3s;
}

.blog_slider__item.swiper-slide-active .blog_slider__content > *:nth-child(12) {
    transition-delay: 1.4s;
}

.blog_slider__item.swiper-slide-active .blog_slider__content > *:nth-child(13) {
    transition-delay: 1.5s;
}

.blog_slider__item.swiper-slide-active .blog_slider__content > *:nth-child(14) {
    transition-delay: 1.6s;
}

.blog_slider__item.swiper-slide-active .blog_slider__content > *:nth-child(15) {
    transition-delay: 1.7s;
}

/* .blog_slider__img {
    width: 300px;
    flex-shrink: 0;
    height: 300px;
    background-image: linear-gradient(147deg, #481384a2 0%, #6b21f359 74%);
    border-radius: 20px;
    overflow: visible;
    position: relative;
    left: -90px;
    top: 0;
} */

.blog_slider__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    opacity: 0;
    border-radius: 20px;
    transition: all .3s;
}

@media screen and (max-width: 768px) {
    .blog_slider__img {
        width: 90%;
        height: 200px;
        max-width: 300px;
        margin: 0 auto;
    }
}

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

@media screen and (max-height: 500px) and (min-width: 992px) {
.blog_slider__img {
    width: 300px;
    flex-shrink: 0;
    height: 300px;
    background-image: linear-gradient(147deg, rgb(72 19 132 / 0%) 0%, rgb(107 33 243 / 0%) 74%);
    border-radius: 20px;
    overflow: visible;
    position: relative;
    left: -90px;
    top: 0px;
}
}

.blog_slider__content {
    flex: 1;
    min-width: 590px;
    margin-left: -70px;
}

@media screen and (max-width: 768px) {
    .blog_slider__content {
        padding: 0 20px;
        width: 100%;
    }
}

@media screen and (max-width: 576px) {
    .blog_slider__content {
        padding: 0 10px;
    }
}

.blog_slider__content > * {
    opacity: 0;
    transform: translateY(25px);
    transition: all .4s;
}

.blog_slider__code {
    color: #423a66;
    margin-bottom: 15px;
    display: block;
    font-weight: 500;
    font-size: 14px;
}

.blog_slider__title {
    font-size: 24px;
    font-weight: 700;
    color: #4b406f;
    margin-bottom: 20px;
    line-height: 1.3;
}

.blog_slider__text {
    color: #76709c;
    margin-bottom: 30px;
    line-height: 1.6em;
    font-size: 15px;
}

.blog_slider .swiper-container-horizontal > .swiper-pagination-bullets,
.blog_slider .swiper-pagination-custom,
.blog_slider .swiper-pagination-fraction {
    bottom: 10px;
    left: 0;
    width: 100%;
}

.blog_slider__pagination {
    position: absolute;
    z-index: 21;
    right: 20px;
    width: 11px !important;
    text-align: center;
    left: auto !important;
    top: 50%;
    bottom: auto !important;
    transform: translateY(-50%);
}

@media screen and (max-width: 768px) {
    .blog_slider__pagination {
        transform: translateX(-50%);
        left: 50% !important;
        top: auto;
        bottom: 15px !important;
        width: 100% !important;
        display: flex;
        justify-content: center;
        align-items: center;
    }
}

.blog_slider__pagination.swiper-pagination-bullets .swiper-pagination-bullet {
    margin: 8px 0;
}

@media screen and (max-width: 768px) {
    .blog_slider__pagination.swiper-pagination-bullets .swiper-pagination-bullet {
        margin: 0 5px;
    }
}

.blog_slider__pagination .swiper-pagination-bullet {
    width: 11px;
    height: 11px;
    display: block;
    border-radius: 10px;
    background: #b30a42;
    opacity: 0.5;
    transition: all .3s;
}

.blog_slider__pagination .swiper-pagination-bullet-active {
    opacity: 1;
    background: #b30a42;
    height: 30px;
    box-shadow: 0px 0px 20px rgba(252, 56, 56, 0.3);
}

@media screen and (max-width: 768px) {
    .blog_slider__pagination .swiper-pagination-bullet-active {
        height: 11px;
        width: 30px;
    }
}

/* - - - - - - - - - - - - - - - - - - - - - accardion menu - - - - - - - - - - - - - - - - - - - - - */
.course_wrapper {
    max-width: 962px;
    margin: 60px auto;
    padding: 22px;
    border-radius: 4px;
    /* font-family: sans-serif; */
}

.course_info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 22px;
    color: #4c1d95;
}

.teacher strong {
    color: #7c3aed;
}

.sessions {
    background: rgba(255, 255, 255, 0.6);
    padding: 6px 14px;
    border-radius: 999px;
    font-weight: bold;
}

.accordion {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.acc_item {
    background: rgba(255, 255, 255, 0.65);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(124, 58, 237, 0.041);
}

.acc_title {
    width: 100%;
    border: none;
    background: transparent;
    padding: 16px 18px;
    font-size: 17px;
    font-weight: 600;
    cursor: pointer;
    color: #3b0764;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.arrow {
    font-size: 20px;
    transition: 0.35s;
    color: #7c3aed;
}

.acc_content {
    max-height: 0;
    overflow: hidden;
    transition: 0.45s ease;
    background: linear-gradient(180deg,
            rgba(237, 233, 254, 0.8),
            rgba(255, 255, 255, 0.9));
}

.acc_content ul {
    padding: 14px 18px 18px;
}

.acc_content li {
    padding: 6px 0;
    font-size: 13px;
    color: #4c1d95;
}

.acc_item.active .arrow {
    transform: rotate(90deg);
}

.lesson_list {
    list-style: none;
    padding: 10px 18px 18px;
    margin: 0;
}

.accordion ul {
    list-style: none;
}

.lesson_list li {
    border-bottom: 1px solid rgba(124, 58, 237, 0.25);
    list-style: none;
}

.lesson_list li:last-child {
    border-bottom: none;
}

.lesson_list a {
    text-decoration: none;
    display: block;
    padding: 10px 0;
}

.lesson_row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    color: #4c1d95;
    font-size: 17px;
    transition: 0.3s ease;
}

.lesson_time {
    font-size: 15px;
    background: rgba(124, 58, 237, 0.15);
    padding: 4px 10px;
    border-radius: 999px;
    color: #6d28d9;
}

.lesson_list li:hover .lesson_row {
    color: #7c3aed;
    transform: translateX(4px);
}

/* - - - - - - - - - - - - - - - - - - - - - ticket - - - - - - - - - - - - - - - - - - - - - */


.ticket_Section {
    position: relative;
    width: 100%;
    height: 600px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.signupSection {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 965px;
    height: 419px;
    display: flex;
    text-align: center;
    color: white;
    /*background: url(stat!**!ic/images/details/ml2.jpg) no-repeat center center;*/
    background-size: cover;
    box-shadow: 3px 10px 20px 5px rgba(0, 0, 0, 0.5);
    border-radius: 10px;
    overflow: hidden;
}

.info {
    width: 45%;
    background: rgba(20, 20, 20, 0);
    border-right: 5px solid rgba(30, 30, 30, 0.8);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}


.info_h2_new {
    font-size: 48px!important;
    color: #fff!important;
}
.info h2 {
    padding-top: 20px;
    font-size: xx-large;
    margin: 12px;
}

.info p {
    font-size: 18px;
    margin: 10px 0 0 0;
}




/* - - - - - - - - - - - - - - - - - - - - - teacher - - - - - - - - - - - - - - - - - - - - - */
.instructorImage {
    max-width: 100%;
    display: block;
}

.instructorStatistics {
    list-style: none;
}

.instructorProfileCard::after,
.instructorProfileCard .instructorImage {
    border-radius: 50%;
}

.instructorProfileCard,
.instructorStatistics {
    display: flex;
}

.instructorProfileCard {
    padding: 2.5rem 2rem;
    margin-left: 26%;
    border-radius: 10px;
    background-color: rgba(255, 255, 255, 0.308);
    max-width: 906px;
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.15);
    position: relative;
    transform-style: preserve-3d;
    overflow: hidden;
}

.instructorProfileCard::before,
.instructorProfileCard::after {
    content: '';
    position: absolute;
    z-index: -1;
}

.instructorProfileCard::before {
    width: 100%;
    height: 100%;
    border: 1px solid #FFF;
    border-radius: 10px;
    top: -0.7rem;
    left: -0.7rem;
}

.instructorProfileCard::after {
    height: 15rem;
    width: 15rem;
    background-color: #8641f5aa;
    top: -8rem;
    right: -8rem;
    box-shadow: 2rem 6rem 0 -3rem #FFF;
}

.instructorImage {
    width: 8rem;
    min-width: 153px;
    box-shadow: -20px 43px 85px 128px #ae80f88c;
}

.instructorContent {
    margin-left: 1.5rem;
}

.instructorHeader {
    margin-bottom: 1rem;
}

.instructorFullName {
    font-size: 1.3rem;
}

.instructorUsername {
    font-size: 0.8rem;
    color: #333;
}

.instructorBio {
    font-size: 19px;
    margin-bottom: 1rem;
}

.instructorStatistics {
    margin-bottom: 1rem;
}

.instructorStatItem {
    min-width: 5rem;
}

.instructorStatValue {
    font-size: 0.99rem;
}

.instructorStatLabel {
    font-size: 0.75rem;
}

.instructorActions button {
    font-family: 'Poppins', sans-serif;
    min-width: 120px;
    padding: 0.5rem;
    border: 1px solid #222;
    border-radius: 5px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.25s linear;
}

.header_btn {
    display: flex;
    border-radius: 4px;
    padding: 12px 25px;
    gap: 10px;
    background: linear-gradient(90deg, #6A15FA, #8B49FB);
    color: #fff;
    align-items: center;
    justify-content: center;
    transition: background 0.5s ease, transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.header_btn:hover {
    background: linear-gradient(90deg, #390393, #4F04CE);
    cursor: pointer;
}

.header_btn .header_button_text {
    height: 24px;
    width: 103.5px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    transition: transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.header_btn:hover .header_button_text {
    transform: translateX(6px);
}

.header_btn svg {
    fill: #fff;
    stroke: #fff;
    stroke-width: 2;
    transition: transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.header_btn:hover svg {
    transform: translateX(4px);
}

.header_btn .header_button_text,
.header_btn svg {
    will-change: transform;
}

.header_btn:active {
    background: linear-gradient(90deg, #CDB1FD, #CDB1FD);
    transform: scale(0.97);
}

@media screen and (max-width: 450px) {
    .instructorProfileCard {
        display: block;
    }

    .instructorContent {
        margin-left: 0;
        margin-top: 1.5rem;
    }

    .instructorActions button {
        min-width: 100px;
    }
}

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */



@media (min-width: 992px) and (max-width: 1199px) {
    .blog_slider {
        /* width: 90%; */
        position: relative;
        max-width: 749px;
        margin: auto;
        background: rgba(248, 242, 255, 0.68);
        box-shadow: rgba(84, 37, 122, 0.44) 0px 14px 80px;
        padding: 25px;
        border-radius: 25px;
        /* height: 400px; */
        transition: 0.3s;
        overflow: visible !important;
    }
}



/* ------------- responsiv header  -------------- */
@media (max-width: 449px) {

}

@media (min-width: 450px) and (max-width: 575px) {

}

@media (min-width: 576px) and (max-width: 799px) {

}

@media (min-width: 800px) and (max-width: 991px) {

}

@media (max-width: 992px) {

}



@media (max-width: 992px) {

}

@media (min-width: 992px) and (max-width: 1199px) {
    .blog_slider {
        /* width: 90%; */
        position: relative;
        max-width: 749px;
        margin: auto;
        background: rgba(248, 242, 255, 0.68);
        box-shadow: rgba(84, 37, 122, 0.44) 0px 14px 80px;
        padding: 25px;
        border-radius: 25px;
        /* height: 400px; */
        transition: 0.3s;
        overflow: visible !important;
    }
}


    .blog_slider{
    /* width: 90%; */
    position: relative;
    max-width: 749px;
    margin: auto;
    background: rgba(248, 242, 255, 0.68);
    box-shadow: rgba(84, 37, 122, 0.44) 0px 14px 80px;
    padding: 25px;
    border-radius: 25px;
    /* height: 400px; */
    transition: 0.3s;
    overflow: visible !important;
    margin-top: 100px;
        margin-left: 33%;
}
.blog_slider__content {
    flex: 1 1 0%;
    min-width: 433px;
    margin-left: -68px;
}
.blog_slider__item {
    align-items: center;
    height: 100%;
    gap: 1px;
    overflow: visible;
    display: flex !important;
    width: 693px !important;
}
.blog_slider__img {
    width: 265px;
    flex-shrink: 0;
    height: 235px;
    background-image: linear-gradient(147deg, rgb(72 19 132 / 0%) 0%, rgb(107 33 243 / 0%) 74%);
    border-radius: 20px;
    overflow: visible;
    position: relative;
    left: -108px;
    top: -4px;
    height: 262px;
}

@media (min-width: 1401px) and (max-width: 1600px) {

}

@media (min-width: 1200px) and (max-width: 1400px) {

}

@media (min-width: 1200px) and (max-width: 1600px) {

}

@media (min-width: 1601px) {

}

/* ------------------- research section responsive---------------------- */
@media (max-width: 575px) {

}

@media (min-width: 576px) and (max-width: 768px) {

}

@media (min-width: 769px) and (max-width: 992px) {

}

@media (min-width: 993px) and (max-width: 1200px) {

}

@media (min-width: 1201px) {

}

/*--------------------------------------------لیست بیات--------------------------------------------------------*/
.header_ai_card_container{
    position: relative;
    margin-left: auto;
    margin-right: auto;
/*     height: 100vh; */
	margin-top: 6%;
}


.ezy__featured31 {
  /* Bootstrap variables */
  --bs-body-color: #0f111a;
  /* --bs-body-bg: #fff; */
  height: 500px;
  width:100% ;

  /* Easy Frontend variables */
  --ezy-theme-color: rgb(13, 110, 253);
  --ezy-theme-color-rgb: 13, 110, 253;
  --ezy-card-bg: rgba(243, 245, 248, 0.73);

  background-color: var(--bs-body-bg);
  /* overflow: hidden; */
  padding: 60px 0 0 0;
  position: relative;
}

.gray .ezy__featured31,
.ezy__featured31.gray {
  /* Bootstrap variables */
  --bs-body-bg: #faf9fd;
}

/* Dark Gray Block Style */
.dark_gray .ezy__featured31,
.ezy__featured31.dark_gray {
  /* Bootstrap variables */
  --bs-body-color: #ffffff;
  --bs-body-bg: rgb(30, 39, 53);

  /* Easy Frontend variables */
  --ezy-card-bg: rgba(243, 245, 248, 0.12);
}

/* Dark Block Style */
.dark .ezy__featured31,
.ezy__featured31.dark {
  /* Bootstrap variables */
  --bs-body-color: #ffffff;
  --bs-body-bg: rgb(11, 23, 39);

  /* Easy Frontend variables */
  --ezy-card-bg: rgba(243, 245, 248, 0.12);
}

.ezy__featured31_heading {
  font-weight: 400;
  font-size: 25px;
  line-height: 25px;
  color: var(--bs-body-color);
  font-size: 25px;
        font-weight: bold;
        line-height: 43px;
}

@media (min-width: 768px) {
  .ezy__featured31_heading {
font-size: 25px;
        font-weight: bold;
        line-height: 43px;
  }
}

.ezy__featured31_sub_heading {
  color: var(--bs-body-color);
  font-size: 18px;
  line-height: 1.5;
  opacity: 0.8;
}

.ezy__featured31_btn {
    padding: 12px 25px;
    background-color: #c089ff7a;
    border-color: #b378d573;
    border-radius: 5px;
    text-decoration: none;
}

.ezy__featured31_btn:hover {
  background-color: rgba(111, 54, 145, 0.451);
  border-color: #4e137073;
  color: white;
}

.ezy__featured31_wrapper {
    background-color: #fbf5ffbd;
    backdrop-filter: blur(144px);
    /* margin-bottom: 60px; */
    width: 796px;
    height: 255px;
    margin-left: 370px;
    margin-top: 183px;
    padding: 23px;
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 25px;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(160, 50, 255, 0.22);
    border-radius: 16px;
}

@media (min-width: 768px) {
  .ezy__featured31_wrapper {
            margin-bottom: 100px;
            border-radius: 8px;

}
}

.ezy__featured31_bg_holder {
  background-position: top center;
  background-repeat: no-repeat;
  background-size: cover;
  /* min-height: 350px; */
  position: absolute;
  /* bottom: 0;
  height: 20px;
  width: 9vw;
  left: 46%; */

}

.ezy__featured31_bg_holder img {
    width: 529px;
    height: auto;
    object-fit: contain;
    margin-left: -38%;
    margin-top: -145px;
    border-radius: 8px;
    box-shadow: 0 10px 25px rgba(150, 0, 255, 0.25);
}

@media (min-width: 991px) {
  .ezy__featured31_bg_holder {
        height: 100%;
        width: 25vw;
        left: 62%;
  }
}





/*  - - - - - - - - - - - - - - - - - - - - - pill_btn - - - - - - - - - - - - - - - - - - - - -  */

.pill_btn{
    margin-top: 150px;
    z-index: 20;
}



.course_card {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.5s ease;
}

.course_card.show {

    opacity: 1;
    transform: translateY(0);
}





/* === CATEGORY BUTTONS === */
.categories {
    display: flex;
    gap: 10px;
    margin-bottom: 75px;
    flex-wrap: wrap;
    align-content: center;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    top: 415px;
    justify-content: center;
    width: 79rem;
}

.cat_btn {
  padding: 10px 18px;
  border: none;
  background: #954cf5;
  color: white;
  border-radius: 8px;
  cursor: pointer;
  transition: .2s;
  font-size: 15px;
}

.cat_btn:hover {
  background: #5e3bdb;
}

/* === COURSE CARDS === */
#courses_container {
  margin-top: 30rem;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.course_card {
  background: #f6efff;
  padding: 15px 20px;
  border-radius: 10px;
  margin-bottom: 12px;
  box-shadow: 0 3px 10px rgba(0,0,0,0.12);
  opacity: 0;
  transform: translateY(-10px);
  transition: all 0.35s ease;
  border-left: 5px solid #a34cf5;
  align-items: center;
  align-content: center;
  width: 69%;
  height: 155px;
  margin-left: 15%;

}

.course_card.show {
  opacity: 1;
  transform: translateY(0);
}

/* Optional: Smooth container spacing */
#courses_container {
  transition: .3s;
}



/* === COURSE CARD NEW HORIZONTAL STYLE === */

.course_card {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  background: #ffffff;
  border-radius: 12px;
  padding: 20px;
  width: 70%;
  margin-left: 15%;
  min-height: 200px;
  box-shadow: 0 3px 20px rgba(0,0,0,0.15);
  overflow: hidden;
}

/* خط مورب مشکی گوشه سمت چپ */
.course_card::before {
  content: '';
  position: absolute;
  height: 280%;
  width: 170px;
  background: #5b3c8080;
  top: -60px;
  left: -130px;
  z-index: 0;
  transform: rotate(17deg);
}

/* === IMAGE SECTION === */
.course_card_img {
  width: 180px;
  height: 160px;
  flex-shrink: 0;
  border-radius: 10px;
  overflow: hidden;
  z-index: 3;
}

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

/* === TEXT SECTION === */
.course_card_info {
  margin-left: 25px;
  z-index: 3;
}

.course_card_info h3 {
  font-size: 22px;
  margin-bottom: 10px;
  font-weight: 700;
  font-family: 'Montserrat', sans-serif;
}

.course_card_info p {
  font-size: 15px;
  margin-bottom: 12px;
  color: #444;
}

.card_btn {
  padding: 8px 14px;
  background: #954cf5;
  color: #fff;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: .2s;
}

.card_btn:hover {
  background: #6733d4;
}

/* === Animation (you already had this, stays same) === */
.course_card {
  opacity: 0;
  transform: translateY(-10px);
  transition: all 0.35s ease;
}

.course_card.show {
  opacity: 1;
  transform: translateY(0);
}









/* - - - - - - - - - - - - - - - - - - - - - pagination - - - - - - - - - - - - - - - - - - - - - */

/* main */
.pagination {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    margin-top: 83px;
    margin-bottom: 15rem;
}

.pagination .pagination_item {
  text-decoration: none;
  position: relative;
  margin: 0 10px;
  width: 45px;
  height: 45px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    0 5px 10px rgba(0, 0, 0, 0.3),
    inset 0 -5px 0px rgba(80, 80, 80, 0.1),
    inset 0 -10px 0px rgba(150, 150, 150, 0.1);
  overflow: hidden;
  color: #000000;
  cursor: pointer;
  transition: 0.3s ease-in-out;
  background-color: #efefef8a;
}

/* حذف افکت های ::before و ::after */
.pagination .pagination_item::before,
.pagination .pagination_item::after {
  display: none;
}

/* hover فقط رنگ و بکگراند تغییر کنه */
.pagination .pagination_item:hover {
  color: #fff;
  background-image: linear-gradient(135deg, #ec9dfc, #b05efd);
  box-shadow:
    0 5px 15px rgba(0, 0, 0, 0.3); /* اگه سایه بخوای */
}

/* active click */
.pagination .pagination_item:active {
  box-shadow: none;
}

/* active class */
.pagination .pagination_item.active {
  color: #fff;
background-image: linear-gradient(135deg, #9b3ead, #6527a0);
}




/*--------------------------------------------خانی_event--------------------------------------------------------*/

.head_event{
  max-width:897px;
  margin:40px auto;
  padding:30px;
  display:flex;
  gap:30px;
  align-items:center;
  position:relative;
}
.head_event_left{
    flex:1;
    min-width:260px;
    position:relative;
    top: -49px;
    left: 33px;
    bottom: 49%;
    width: 45%;
    background: #F2F2F2;
    padding: 28px 22px;
    z-index: 4;
    box-shadow: 7px 9px 24px rgb(0 0 0 / 5%);
    border-radius: 4px;
}
.head_event_left::before {
    position: absolute;
    content: "";
    right: -2px;
    top: -19px;
    width: 0px;
    height: 0px;
    border-left: 0px solid transparent;
    border-right: 53px solid transparent;
    border-bottom: 20px solid #F2F2F2;
    margin-bottom: -2px;
}


.head_event_subTitle{
    color: #575757;
    font-size: 14px;
    line-height: 1.6;
    max-width: 393px;
}

.head_event_media{
  flex:1.15;
  min-width:320px;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
}

.head_event_imgwrap{
  position:relative;
  width:100%;
  max-width:520px;
  aspect-ratio: 4/3;
  min-height:260px;
}

.head_event_smback{
    position: absolute;
    right: -5%;
    bottom: -8%;
    width: 84%;
    height: 60%;
    background: #390393;
    border-radius: 4px;
    z-index: 1;
}

.head_event_photo{
    position: absolute;
    left: -45px;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 3;
    border-radius: 2px;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.08);
}

.head_event_bigback{
    position: absolute;
    left: 14%;
    top: -6%;
    width: 86%;
    height: 92%;
    background: linear-gradient(90deg , #8B49FB ,#CDB1FD);
    z-index: 2;
    border-radius: 2px;
}


.head_event_title{
    margin: 0;
    font-size: 38px;
    line-height: 1.1;
    letter-spacing: 0.5px;
    color: #390393;
    font-weight: 700;
}

/* responsive */
@media (max-width:880px){
    .head_event{
        flex-direction:column;
        padding:18px;
        gap:16px;
        max-width: 380px;
    }
    .head_event_left{
        order:2;
        padding-left:0;
        padding-top:8px
    }
    .head_event_media{
        order:1;
        width:100%;
        left: 2rem;
    }
    .head_event_title{
        font-size:28px;
    }
    .head_event_titleback{
        width: 16rem;
        padding: 18px;
    }
    .head_event_smback {
        bottom: -38%;
    }
    .head_event_bigback{
        left:6%;
        top:-4%;
        width:88%;
    }
    .head_event_subTitle {
        padding-left: 15px;
    }
    .head_event_left {
        min-width: 319px;
        top: -21px;
        left: 51px;
        bottom: 49%;
    }

}

@media (max-width:420px){
    .head_event_title{
        font-size:22px;
    }
    .head_event_subTitle{
        font-size:13px;
    }
    .head_event_titleback{
        padding:14px;
    }
    .head_event_left {
        min-width: 319px;
        top: -21px;
        left: 51px;
        bottom: 49%;
    }

}
@media (min-width:881px) and (max-width:1199px){
    .head_event{
      max-width:716px;
    }
    .head_event_left{
        top: 34px;
        left: 34px;
        bottom: 49%;
    }
}
@media (min-width:1200px){
    .head_event {
        max-width: 1046px;

    }
    .head_event_left{
        top: -61px;
        left: 36px;
        bottom: 49%;
    }
    .event_page {
        margin-left: auto;
        margin-right: auto;
        max-width: 87.3125rem;
    }

}
@media (min-width:1400px){
    .head_event {
        max-width: 1200px;

    }
    .head_event_left{
        top: -74px;
        left: 59px;
        bottom: 49%;
    }
    .event_page {
        margin-left: auto;
        margin-right: auto;
        max-width: 87.3125rem;
    }

}
@media (min-width:1600px) {
    .head_event {
        max-width: 87.3125rem;
    }
    .head_event_left {
        top: -50px;
        left: 88px;
        bottom: 49%;
        padding: 39px 70px;
    }
}

/*------------------------------------------News_Archive-------------------------------------------------------*/

.news_container {
    width: 80%;
    margin-right: auto;
    margin-left: auto;
}


/* ================= auto slider ================= */
.news_img_autoSlide {
  max-width: 100%;
  position: relative;
  z-index: 1;
  border: 0;
}

.news_line_title {
  margin-bottom: 48px;
  padding-bottom: 16px;
  position: relative;
  text-transform: capitalize;
  font-size: 42px;
  font-weight: 700;
  color: #390393;
  margin-bottom: 3rem;
}

h3 {
  margin: 0 0 10px;
  font-size: 28px;
  line-height: 36px;
}

/* ===== Title ===== */
.news_line_title {
  position: relative;
  width: 400px;
}

.news_line_title::before,
.news_line_title::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  height: 4px;
  border-radius: 4px;
}

.news_line_title::after {
  width: 25rem;
  background: #e5d6ff;
}

/* ===== News Section / Cards ===== */
.news_section {
  padding: 60px 50px;
}


.news_slider_container {
  overflow: hidden;
  position: relative;
  width: 100%;
}

.news_slider_track {
  display: flex;
  gap: 20px;
  transform: translateX(0);
}

.news_item {
  flex: 0 0 320px;
  height: 400px;
  border-radius: 4px;
  overflow: hidden;
  position: relative;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  transition: all 0.4s ease-in-out;
}

.news_item:after {
  content: "";
  display: block;
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  background-image: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,1));
}
.news_item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 4px;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
}
.news_item_desc {
  padding: 0 24px 12px;
  color: #fff;
  position: relative;
  z-index: 1;
  overflow: hidden;
  transform: translateY(calc(100% - 54px));
  transition: all 0.4s ease-in-out;
}

.news_item.active .news_item_desc {
  transform: translateY(0);
}

.news_item_desc p {
  opacity: 0;
  transform: translateY(32px);
  transition: all 0.4s ease-in-out 0.2s;
}

.news_item.active .news_item_desc p {
  opacity: 1;
  transform: translateY(0);
}

/* ===== Responsive ===== */
@media (max-width: 767px) {
  body { font-size: 14px; }
  h2 { margin-bottom: 20px; }
  h3 { font-size: 19px; line-height: 24px; margin-bottom: 8px; }
  .news_line_title { width: 250px; }
  .news_section { padding: 30px 15px 20px; }
  .news_item { margin: 0 10px 40px; width: 200px; height: 280px; }
  .news_item.active { width: 270px; box-shadow: 6px 10px 10px rgba(0,0,0,0.25); }
  .news_item_desc { padding: 0 14px 5px; transform: translateY(calc(100% - 42px)); }
}

@media (min-width: 768px) and (max-width: 991px) {
  h2 { margin-bottom: 32px; }
  h3 { font-size: 24px; line-height: 32px; margin-bottom: 8px; }
  .news_line_title { width: 330px; }
  .news_section { padding: 50px 30px 40px; }
  .news_item { margin: 0 12px 60px; width: 240px; height: 330px; }
  .news_item.active { width: 360px; }
  .news_item_desc { transform: translateY(calc(100% - 42px)); }
}

@media (min-width: 992px) and (max-width: 1199px) {
  h2 { margin-bottom: 32px; }
  h3 { font-size: 24px; line-height: 32px; margin-bottom: 8px; }
  .news_section { padding: 50px 30px; }
  .news_item { margin: 0 12px 60px; width: 260px; height: 360px; }
  .news_item.active { width: 400px; }
  .news_item_desc { transform: translateY(calc(100% - 46px)); }
}
















/* ================= news SLIDER ================= */

.news_blog_slider {
  width: 95%;
  position: relative;
  max-width: 800px;
  margin: auto;
  background: #fff;
  box-shadow: 0px 14px 80px rgba(34, 35, 58, 0.2);
  padding: 25px;
  border-radius: 4px;
  height: 400px;
  transition: all .3s;
}

/* ================= ITEM ================= */

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

.news_blog_slider__item.swiper-slide-active .news_blog_slider__img img {
  opacity: 1;
  transition-delay: .3s;
}

.news_blog_slider__item.swiper-slide-active .news_blog_slider__content > * {
  opacity: 1;
  transform: none;
}

/* ================= IMAGE ================= */

.news_blog_slider__img {
  width: 300px;
  flex-shrink: 0;
  height: 300px;
  background-image: linear-gradient(147deg, #AC7DFC 0%, #CDB1FD 74%);
  border-radius: 4px;
  transform: translateX(-80px);
  position: relative;
}

.news_blog_slider__img::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 4px;
  opacity: 0.8;
}

.news_blog_slider__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0;
  border-radius: 4px;
  transition: all .3s;
}

/* ================= CONTENT ================= */

.news_blog_slider__content {
  padding-right: 25px;
}

.news_blog_slider__content > * {
  opacity: 0;
  transform: translateY(25px);
  transition: all .4s;
}

/* ================= TEXT ================= */

.news_blog_slider__code {
  color: #7b7992;
  margin-bottom: 15px;
  display: block;
  font-weight: 500;
}

.news_blog_slider__title {
  font-size: 24px;
  font-weight: 700;
  color: #390393;
  margin-bottom: 20px;
}

.news_blog_slider__text {
  color: #000000;
  margin-bottom: 30px;
  line-height: 1.5em;
}

/* ================= PAGINATION ================= */

.news_blog_slider__pagination {
  position: absolute;
  z-index: 21;
  right: 20px;
  width: 11px !important;
  text-align: center;
  left: auto !important;
  top: 50%;
  bottom: auto !important;
  transform: translateY(-50%);
}

.news_blog_slider__pagination .swiper-pagination-bullet {
  width: 11px;
  height: 11px;
  display: block;
  border-radius: 10px;
  background: #062744;
  opacity: 0.2;
  transition: all .3s;
}

.news_blog_slider__pagination .swiper-pagination-bullet-active {
  opacity: 1;
  background: #8B49FB;
  height: 30px;
  box-shadow: 0px 0px 20px rgba(139, 73, 251, 0.3);
}

/* ================= SWIPER CORE FIX ================= */

.news_blog_slider.swiper-container {
  overflow: hidden;
}

.news_blog_slider__wrp.swiper-wrapper {
  display: flex;
  align-items: stretch;
}

.news_blog_slider__item.swiper-slide {
  flex-shrink: 0;
  width: 100%;
  height: 100%;
}

.swiper-slide {
  opacity: 0;
}

.swiper-slide-active {
  opacity: 1;
}

.swiper-container-fade .swiper-slide {
  pointer-events: none;
}

.swiper-container-fade .swiper-slide-active {
  pointer-events: auto;
}

/* ================= RESPONSIIVE ================= */

@media screen and (max-width: 992px) {
  .news_blog_slider {
    max-width: 680px;
    height: 400px;
  }
}

@media screen and (max-width: 768px) {
  .news_blog_slider {
    min-height: 500px;
    height: auto;
    margin: 180px auto;
  }

  .news_blog_slider__item {
    flex-direction: column;
  }

  .news_blog_slider__content {
    margin-top: -80px;
    text-align: center;
    padding: 0 30px;
  }

  .news_blog_slider__pagination {
    transform: translateX(-50%);
    left: 50% !important;
    top: 205px;
    width: 100% !important;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .news_blog_slider__pagination .swiper-pagination-bullet-active {
    height: 11px;
    width: 30px;
  }

  .news_blog_slider__img {
    transform: translateY(-50%);
    width: 90%;
  }
}

@media screen and (max-width: 576px) {
  .news_blog_slider__content {
    padding: 0;
  }

  .news_blog_slider__img {
    width: 95%;
  }
}

@media screen and (max-height: 500px) and (min-width: 992px) {
  .news_blog_slider {
    height: 350px;
  }

  .news_blog_slider__img {
    height: 270px;
  }
}



/* -----------------cards------------------ */
.news_page_title{
    width: 340px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.news_title_page{
    font-size: 42px;
    font-weight: 700;
    color: #390393;
    margin-bottom: 3rem;
}
.news_page_cards{
    height: 532px;
    margin-top: 120px;
}
.news_cards_contain_page{
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    justify-content: center;
}
.cards_news_page{
    width: 23rem;
    height: 450px;
    border-radius: 4px;
    padding: 24px;
    box-shadow: 0px 4px 10px 0px #00000040;
}

.cards_news_img_page img{
    height: 216px;
    border-radius: 4px;
    width: 20rem;
}
.news_txt_title_page{
    font-size: 20px;
    font-weight: 700;
    text-align: center;
    color: #414A53;
    margin-top: 16px;
}
.news_txt_body_page{
    font-size: 18px;
    color: #57626D;
    font-weight: 400;
    margin-top: 20px;
    text-align: center;
    height: 77px;
}

.cards_news_btn_page{
    width: 170px;
    height: 48px;
    margin-right: auto;
    margin-left: auto;
    transition: background 0.5s ease, transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
    border-radius: 4px;
}
.cards_news_btn_page:hover{
    cursor: pointer;
    border-radius: 4px;
    background:#dccdf5;

}

.read_more_btn_page {
  border-radius: 4px;
  position: relative;
  overflow: hidden;
}

.cards_news_btn_page:hover .read_more_btn_page{
    transform: translateX(6px);
}

.cards_news_btn_page .read_more_btn_page{
    text-decoration: none;
    font-size: 14px;
    text-align: center;
    display: block;
    font-weight: 500;
    color: #220258;
    padding: 14px;
    transition: transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}


.hidden_content_page {
    display: none;
}

.cover_news_page {
  position: fixed;
  z-index: 100;
  transform-origin: 50% 50%;
  border-radius: 2px;
  background:#dccdf5;
  display: none;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  -ms-border-radius: 2px;
  -o-border-radius: 2px;
}


.open_content_news_page {
  width: 100%;
  z-index: 110;
  position: fixed;
  opacity: 0;
  pointer-events: none;
  top: 0;
  left: 0;
  height: 100vh;
  overflow-y: auto;
  background: transparent;

}

.open_content_news_page img {
  position: relative;
  width: 40%;
  margin-left: 3%;
  margin-top: 20px;
  z-index: 5;
  height: 32rem;
}

.open_content_news_page .text_page {
  background: #fff;
  margin-top: -56%;
  padding: 60% 5% 5% 5%;
  width: 80%;
  margin-left: 5%;
  margin-bottom: 5%;
}

.open_content_news_page .text_page h1, .open_content_news_page .text_page p {
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}

.close_content_news_page {
  display: block;
  position: absolute;
  right: 12px;
  top: 12px;
  width: 30px;
  height: 30px;
  z-index: 120;
}

.close_content_news_page span {
  background: #222;
  width: 30px;
  height: 6px;
  display: block;
  position: absolute;
  top: 14px;
}

.x_1_page {
  transform: rotate(45deg);
}

.x_2_page {
  transform: rotate(-45deg);
}

.read_more_btn_page {
  transition: opacity 200ms linear 320ms, transform 200ms ease-out 320ms;
}

.cover_news_page {
  transition: transform 300ms ease-in-out;
}

.open_content_news_page {
  transition: opacity 200ms linear 0ms;
}

.open_content_news_page.open {
  opacity: 1;
  pointer-events: all;
  transition-delay: 1000ms;
  display: flex;
}

@media (max-width:1000px) {
  .open_content_news_page.open {
    display: block;
  }
.open_content_news_page img {
    width: 58%;
    height: auto;
  }
}
@media (max-width: 449px) {
    .news_container {
        width: 100%;
        max-width: 18.3125rem;
    }
    .news_line_title , .news_title_page{
        font-size: 24px;
        font-weight: 700;
    }
}
@media (min-width: 450px) and (max-width: 575px) {
    .news_container {
        width: 100%;
        max-width: 24.3125rem;
    }
    .news_line_title , .news_title_page{
        font-size: 24px;
        font-weight: 700;
    }
}
@media (min-width: 576px) and (max-width: 799px) {
    .news_container {
        width: 100%;
        max-width: 35.3125rem;
    }
    .news_line_title , .news_title_page{
        font-size: 24px;
        font-weight: 700;
    }
}
@media (min-width: 800px) and (max-width: 991px) {
    .news_container{
        width: 100%;
        max-width: 44.3125rem;
    }
    .news_line_title , .news_title_page{
        font-size: 36px;
        font-weight: 800;
    }
}
@media (min-width: 992px) and (max-width: 1199px) {
    .news_container  {
        width: 100%;
        max-width: 57.3125rem;
    }
    .news_line_title , .news_title_page{
        font-size: 48px;
        font-weight: 800;
    }
}
@media (min-width: 1200px) and (max-width: 1400px) {
    .news_container{
        width: 100%;
        max-width: 71.3125rem;
    }
    .news_line_title , .news_title_page{
        font-size: 48px;
        font-weight: 800;
    }
}
/*---------------------------------------صفحه بندی--------------------------------------------*/
.pag_safhe{
    position: absolute;
    bottom: -59rem;
    margin-top: 0px;
    margin-bottom: 0rem;
}
.pag_safhe_li_new{
    background: rebeccapurple!important;

}
.pag_safhe_li_new:hover{
    background: #dbb7fd!important;

}
.pag_hov_dect{
    background: #dbb7fd!important;
}
/*----------------------------------------------joinus popup----------------------------------------------------------------*/

/* استایل‌های پاپ‌آپ جدید */
.popup_overlay_school {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.popup_overlay_school.active {
    display: flex;
    opacity: 1;
}

.popup_content_school {
    background: white;
    border-radius: 15px;
    width: 90%;
    max-width: 500px;
    max-height: 98vh;
    position: relative;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    animation: popupFadeIn 0.4s ease-out;
}

@keyframes popupFadeIn {
    from {
        opacity: 0;
        transform: translateY(-50px) scale(0.9);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.popup_container_school {
    padding: 40px 30px;
    position: relative;
}

.popup_close_btn_school{
    position: absolute;
    top: 15px;
    right: 20px;
    background: none;
    border: none;
    font-size: 30px;
    color: #666;
    cursor: pointer;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.3s ease;
    z-index: 10;
}

.popup_close_btn_school:hover {
    background: #f5f5f5;
    color: #390393;
    transform: rotate(90deg);
}

.popup_header_school h1 {
    color: #390393;
    text-align: center;
    text-transform: uppercase;
    font-weight: 900;
    font-size: 2.5rem;
    letter-spacing: 2px;
    margin-bottom: 30px;
    position: relative;
    padding-bottom: 15px;
}


.popup-image {
    width: 100%;
    max-width: 250px;
    display: block;
    margin: 0 auto 30px;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.popup_body_school h2 {
    color: #333;
    font-size: 14px;
    text-align: center;
    line-height: 1.5;
    margin-bottom: 50px;
    font-weight: 600;
    margin-top: -38px;
}

.subscribe-form {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.subscribe-form input[type="email"] {
    padding: 16px 20px;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    font-size: 1rem;
    font-family: inherit;
    transition: all 0.3s ease;
    outline: none;
}

.subscribe-form input[type="email"]:focus {
    border-color: #8e6ac1;
    box-shadow: 0 0 0 3px rgba(142, 106, 193, 0.2);
}

.subscribe-form button[type="submit"] {
    padding: 16px 20px;
    background: linear-gradient(135deg, #8e6ac1, #7752b8);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.subscribe-form button[type="submit"]:hover {
    background: linear-gradient(135deg, #7752b8, #6342a3);
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(119, 82, 184, 0.3);
}

.subscribe-form button[type="submit"]:active {
    transform: translateY(0);
}





/* form */
.popup_body_school form{
  margin-top: -45px;
  padding: 10px 32px;
}

.popup_body_school .user_box_school{
  position: relative;
}

.popup_body_school .user_box_school input {
  width: 100%;
  padding: 12px 0;
  font-size: 17px;
  color: #390393;
  margin-bottom: 11px;
  border: none;
  border-bottom: 1px solid #390393;
  outline: none;
  background: transparent;
}

.popup_body_school .user_box_school label {
  position: absolute;
  top: 0;
  left: 0;
  padding: 12px 0;
  font-size: 17px;
  color: #390393;
  pointer-events: none;
  transition: .5s;
}

.popup_body_school .user_box_school input:focus ~ label,
.popup_body_school .user_box_school input:valid ~ label {
  top: -20px;
  left: 0;
  color: #390393;
  font-size: 12px;
}

.popup_body_school form button {
  position: relative;
  display: inline-block;
  padding: 10px 20px;
  font-weight: bold;
  color: #390393;
  font-size: 16px;
  text-decoration: none;
  text-transform: uppercase;
  overflow: hidden;
  transition: .5s;
  margin-top: 20px;
  letter-spacing: 3px;
  border: none;
  background: none;
}

.popup_body_school button:hover {
  background: #390393;
  color: #ede3ff;
  border-radius: 4px;
}

.popup_body_school button span {
  position: absolute;
  display: block;
}

.popup_body_school button span:nth-child(1) {
  top: 0;
  left: -100%;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, transparent, #390393);
  animation: btn-anim1 1.5s linear infinite;
}

@keyframes btn-anim1 {
  0% {
    left: -100%;
  }

  50%,100% {
    left: 100%;
  }
}

.popup_body_school button span:nth-child(2) {
  top: -100%;
  right: 0;
  width: 2px;
  height: 100%;
  background: linear-gradient(180deg, transparent, #390393);
  animation: btn-anim2 1.5s linear infinite;
  animation-delay: .375s
}

@keyframes btn-anim2 {
  0% {
    top: -100%;
  }

  50%,100% {
    top: 100%;
  }
}

.popup_body_school button span:nth-child(3) {
  bottom: 0;
  right: -100%;
  width: 100%;
  height: 2px;
  background: linear-gradient(270deg, transparent, #390393);
  animation: btn-anim3 1.5s linear infinite;
  animation-delay: .75s
}

@keyframes btn-anim3 {
  0% {
    right: -100%;
  }

  50%,100% {
    right: 100%;
  }
}

.popup_body_school button span:nth-child(4) {
  bottom: -100%;
  left: 0;
  width: 2px;
  height: 100%;
  background: linear-gradient(360deg, transparent, #390393);
  animation: btn-anim4 1.5s linear infinite;
  animation-delay: 1.125s
}

@keyframes btn-anim4 {
  0% {
    bottom: -100%;
  }

  50%,100% {
    bottom: 100%;
  }
}





























@media (max-width: 768px) {
    .popup_container_school {
        padding: 30px 20px;
    }

    .popup_header_school h1 {
        font-size: 2rem;
    }

    .popup_body_school h2 {
        font-size: 1.2rem;
    }

    .popup-image {
        max-width: 200px;
    }
}

@media (max-width: 480px) {
    .popup_content_school {
        width: 95%;
    }

    .popup_header_school h1 {
        font-size: 1.8rem;
    }
}


/*--------------------------------------------ai_index-----------------------------------------------*/

/* -------------------header bayat------------------- */




.hero_section {
    position: relative;
    height: 1000px;
    overflow: hidden;
}
@media (max-width: 800px){
    .hero_section {
        height: 800px!important;
    }
}

@keyframes blobColorAnimation {
    0% {
        fill: #7c3aed;
    }

    50% {
        fill: #9333ea;
    }

    100% {
        fill: #a855f7;
    }
}

.img_blob_shape {
    position: absolute;
    top: -191px;
    left: 555px;
    z-index: 1;
    width: 91%;
    height: 80rem;
}

.hero_slider_container {
    position: relative;
    height: 665px;
    margin-right: auto;
    margin-left: auto;
}

.slider_slide {
    position: absolute;
    top: 0;
    left: 100%;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    transition: all 0.7s ease-in-out;
    opacity: 0;
    z-index: 0;
}

.slider_slide.current_slide {
    left: 0;
    opacity: 1;
    z-index: 2;
}

.slide_overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    color: #00000000;
}

.slide_layout_row {
    display: flex;
    width: 100%;
    align-items: center;
    z-index: 3;
    position: relative;
    flex-direction: row-reverse;
}

.slide_main_image {
    flex: 1;
    position: relative;
    background-size: cover;
    background-position: center;
    border-radius: 4px;
    margin-left: 235px;
    margin-top: 40px;
    box-shadow:        0 20px 40px #00000040,        0 10px 20px #00000026;
    width: 666px;
}

.vertical_search_text {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    color: #ffffffc9;
    font-weight: bold;
    font-size: 29px;
    position: absolute;
    left: 38px;
    top: 83px;
    transition: opacity 0.3s ease;
}

.search_expand_content {
    opacity: 0;
    visibility: hidden;
    position: absolute;
    top: 50%;
    left: 140px;
    transform: translateY(-50%) translateX(0px);
    color: #fff;
    width: 200px;
    transition: all 0.3s ease;
}

.search_expand_content h4 {
    margin-bottom: 8px;
    font-size: 18px;
}

.search_expand_content p {
    font-size: 14px;
    margin-bottom: 10px;
}

.search_expand_content .primary_action_button {
    display: inline-block;
    padding: 6px 14px;
    background: #fff;
    color: #59379f;
    border-radius: 20px;
    font-size: 13px;
    text-decoration: none;
    font-weight: bold;
}

.search_expand_panel {
    position: absolute;
    top: 222px;
    left: -17px;
    width: 110px;
    height: 239px;
    background: linear-gradient(135deg, #6b3fd6, #59379f);
    border-radius: 4px;
    overflow: hidden;
    transition: width 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Hover expand */
.search_expand_panel:hover {
    width: 650px;
}

.search_expand_panel:hover .vertical_search_text {
    opacity: 0.25;
}

.ai_search_form {
    display: flex;
    color: #fff;
    margin-bottom: 23px;
    flex-direction: column;
}

.ai_search_form h3 {
    font-size: 18px;
    margin-bottom: 7px;
    text-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.form_inputs_row {
    display: flex;
    gap: 15px;
    margin-bottom: 20px;
}

.form_input_group {
    flex: 1;
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 6px;
    padding: 10px 12px;
}

.form_input_group .input_icon {
    margin-right: 8px;
    opacity: 0.8;
}

.form_input_group input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: #fff;
    font-size: 14px;
}

.form_input_group input::placeholder {
    color: rgba(255, 255, 255, 0.7);
}

/* Submit */
.form_submit_button {
    width: 100%;
    padding: 12px;
    background: #ffffff;
    color: #59379f;
    border: none;
    border-radius: 4px;
    font-weight: bold;
    cursor: pointer;
    transition: 0.3s;

}

.form_submit_button:hover {
    background: #ece6ff;
}

/* Popular section */
.popular_courses_section {
    display: flex;
    flex-direction: row;
    margin-top: 20px;
    font-size: 14px;
}

.popular_courses_section span {
    opacity: 0.8;
}

.course_tags_list {
    margin-top: -5px;
    margin-left: 18px;
    display: flex;
    flex-wrap: nowrap;
    gap: 26px;
    flex-direction: row;
    justify-content: center;
}

.course_tags_list a {
    width: 120px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 4px;
    color: #fff;
    text-decoration: none;
    font-size: 13px;
    transition: 0.3s;
    text-align: center;
    align-content: center;
}

.course_tags_list a:hover {
    background: rgba(255, 255, 255, 0.3);
}

/* Hover content wrapper */
.search_expand_content {
    position: absolute;
    inset: 0;
    padding: 30px 40px;
    opacity: 0;
    visibility: hidden;
    transform: translateX(-40px);
}

.search_expand_panel:hover .search_expand_content {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
    left: 80px;
    bottom: 0px;
    margin-top: -29px;
}

.slide_text_content {
    flex: 2;
    color: #39005e;
    max-width: 500px;
    animation: slideFadeAnimation 1s ease-in-out;
    text-shadow: 10px 10px 16px rgba(83, 25, 146, 0.211);
}

.slide_text_content h1 {
    font-size: 48px;
    margin-bottom: 15px;
}

.slide_text_content p {
    font-size: 16px;
}

.primary_action_button {
    display: inline-block;
    background: #8534db;
    color: #fff;
    padding: 10px 25px;
    text-decoration: none;
    margin-top: 15px;
    border-radius: 4px;
    transition: background 0.3s;
}

.primary_action_button:hover {
    background: #ad80dd;
}

@keyframes slideFadeAnimation {
    0% {
        opacity: 0;
        transform: translateY(30px);
    }

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

/* Responsive */








@media (max-width:768px) {

    .hero_slider_container{
        width: 100%;
        max-width: 31.3125rem;
    }
    .slide_main_image {
        margin-left: -87px;
        margin-top: 20px;
        width: 80%;
        min-height: 456px;
    }
    .slide_layout_row {
        display: flex;
        flex-direction: column;
        margin-left: 11%;
}

    .slide_text_content {
        padding: 47px 83px 0px 15px;
        max-width: 487px;
}

    .slide_text_content h1 {
        font-size: 32px;
    }

    .slide_text_content p {
        font-size: 14px;
    }

    .search_expand_panel {
        width: 73px;
        height: 189px;
        bottom: -17px;
        top: 138px;
        left: -13px;
        transform: translateX(1%);
    }
    .search_expand_panel:hover {
    width: 359px;
    }

    .vertical_search_text {
        left: 24px;
        top: 64px;
        font-size: 21px;
    }
}

@media (min-width: 576px) and (max-width: 799px) {
    .hero_slider_container{
        width: 100%;
        max-width: 31.3125rem;
    }
        .slide_main_image {
        margin-left: -52px;
        margin-top: 20px;
        width: 100%;
        min-height: 506px;
    }
    .slide_layout_row {
        display: flex;
        flex-direction: column;
    }
    .search_expand_panel {
    top: 149px;
    }
    .search_expand_panel:hover {
    width: 535px;
    }
    .slide_text_content{
        padding: 22px;
        margin-top: 33px;
    }
    .hero_slider_container {
    position: relative;
    height: 740px;
    }
    .img_blob_shape {
    left: -36px;
    width: 139%;
    height: 65rem;
}

}

@media (min-width: 800px) and (max-width: 991px) {
    .hero_slider_container{
        width: 100%;
        max-width: 43.3125rem;
    }
    .slide_main_image {
        margin-left: -125px;
        height: 475px;

    }
    .search_expand_panel:hover {
        width: 400px;
    }
    .slide_text_content p {
        font-size: 16px;
        max-width: 272px;
        padding-left: 8px;
    }
    .slide_text_content {
        max-width: 420px;
        margin-right: 37px;
        margin-left: -11px;
    }

}


@media (min-width: 992px) and (max-width: 1199px) {
    .hero_slider_container {
        width: 100%;
        max-width: 57.3125rem;
    }
    .slide_main_image {
        margin-left: 0px;
        height: 500px;
    }
    .search_expand_panel:hover {
        width: 470px;
    }

    .slide_text_content p {
        font-size: 18px;
        max-width: 391px;
        padding-left: 0;
    }
}

@media (min-width: 1200px) and (max-width: 1600px) {
    .hero_slider_container {
        width: 100%;
        max-width: 70.3125rem;
    }
    .slide_main_image {
        margin-left: 0px;
        height: 640px;
    }
    .slide_text_content p {
        font-size: 20px;
        max-width: 96%;
        padding-left: 0;
    }

}

@media (min-width: 1601px) {
    .hero_slider_container{
        width: 100%;
        max-width: 87.3125rem;
    }
    .slide_text_content{
        padding: 0px;
        max-width: 635px;
    }
    .slide_text_content p {
        font-size: 20px;
        max-width: 601px;
        padding-left: 0;
    }
    .slide_main_image {
        margin-left: 0px;
        height: 640px;
    }
    .slide_layout_row{
        gap: 9rem;
    }
}

@media (max-width: 575px) {
    .slide_text_content h1 {
        font-size: 30px!important;
    }
}
@media (min-width: 576px) and (max-width: 991px) {
    .slide_text_content h1 {
        font-size: 32px!important;
    }
}



/* --------------- roadmap khani ----------> */
.roadmap_school_section {
    margin-bottom: 8rem;
    margin-top: 3rem;
    margin-bottom: 3rem;
    display: flex;
    flex-wrap: wrap;
    gap: 60px;
    position: relative;
    padding: 40px;
    justify-content: center;
    margin-left: auto;
    margin-right: auto;

}

.card_wrapper_school {
    position: relative;
    width: 260px;
}

.number_box_roadmap {
    background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
    color: white;
    width: 75px;
    height: 75px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 1.2rem;
    margin-bottom: -30px;
    margin-left: 10px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
    position: absolute;
    right: 15rem;
    bottom: 10rem;
    z-index: -2;
}
.number_box_roadmap span{
    position: absolute;
    top: 3px;
    left: 1rem;
    font-size: 30px;
}
.glass_card_roadmap {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 4px;
    padding: 30px 20px;
    position: relative;
    z-index: 2;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;
    height: 185px
}
.glass_card_roadmap::before {
    content: '';
    position: absolute;
    top: 10px;
    left: 10px;
    width: 40px;
    height: 40px;
    background: #4b39b5;
    filter: blur(25px);
    opacity: 0.5;
    z-index: -1;
}

.glass_card_roadmap h3 {
    margin: 0 0 10px 0;
    color: #390393;
    text-transform: uppercase;
    font-size: 19px;
}

.glass_card_roadmap p {
    margin: 0;
    color: #666;
    font-size: 0.85rem;
    line-height: 1.6;
}
@media (min-width: 576px) and (max-width: 799px) {
    .card_wrapper_school {
        width: 250px;
    }
    .number_box_roadmap {
        right: 13rem;
        bottom: 10rem;
    }
}
@media (max-width: 650px) {
    .card_wrapper_school {
        width: 340px;
    }
    .number_box_roadmap {
        right: 17rem;
        bottom: 8rem;
    }
    .roadmap_school_section{
        margin-bottom: 11rem;
    }

}

@media (max-width: 767px) {
       .roadmap_school_section{
        margin-bottom: 11rem;
    }
}
@media (min-width: 800px) and (max-width: 991px) {
    .roadmap_school_section {
        width: 100%;
        max-width: 102.3125rem;
        gap: 130px!important;
        row-gap: 110px!important;
    }
}

@media (min-width: 992px) and (max-width: 1199px) {
    .roadmap_school_section {
        width: 100%;
        max-width: 76.3125rem;
        gap: 68px;
    }
}
@media (min-width: 1200px) and (max-width: 1600px){
    .card_wrapper_school {
        position: relative;
        width: 248px;
    }
    .number_box_roadmap {
        bottom: 10rem;
    }
}

@media (min-width: 1200px) and (max-width: 1600px) {
    .roadmap_school_section {
        width: 100%;
        max-width: 80.3125rem;
        gap: 45px;
        row-gap: 65px;
    }
}
@media (min-width: 1400px) and (max-width: 1600px) {
    .card_wrapper_school {
        position: relative;
        width: 248px;
    }
    .number_box_roadmap {
        bottom: 10rem;
    }
}
@media (min-width: 1601px) {
    .roadmap_school_section {
        width: 100%;
        max-width: 101.3125rem;
        gap: 118px;
    }
}


/*------------- About Section ---------------*/

.about_info_section {
    padding: 220px 0;
    color: #fff;
    margin-left: auto;
    margin-right: auto;
}

.about_main_container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}

.about_content_row {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    justify-content: center;

}

.about_image_left_part {
    flex: 0 0 25%;
    z-index: -1;
    margin-right: -60px;
    padding: 15px;
    position: relative;
    left: 3rem;
}

.about_center_content {
    flex: 0 0 69%;
    align-self: flex-start;
    background: linear-gradient(to bottom, #e1d2ff 0%, #b48eff 100%);
    padding: 57px 65px;
    border-radius: 4px;
    padding: 31px;
}


.about_image_right_part {
    flex: 0 0 25%;
    z-index: -1;
    margin-right: -60px;
    padding: 15px;
    position: relative;
    right: 6.4rem;
}

.about_text_block {
    margin-top: 29px;
}

.about_main_image_left {
    height: auto;
    width: 355px;
    margin-top: 180px;
    box-shadow:
        0 10px 40px #00000040,
        0 10px 20px #00000026;
}

.about_main_image_right {
    height: auto;
    width: 350px;
    margin-top: -113px;
    margin-left: -66px;
    box-shadow:
        0 10px 40px #00000040,
        0 10px 20px #00000026;
}

.image_wrapper_left {
    position: relative;
}

.image_overlay_info {
    display: flex;
    position: absolute;
    bottom: 4px;
    width: 356px;
    height: 46px;
    right: 0px;
    background: linear-gradient(to bottom, #ffffff00 0%, #5a3ca7ad 100%);
    border-radius: 4px;
    text-align: center;
    gap: 0px;
    flex-direction: column;
}

.about_text_block h2 {
    margin-bottom: 16px;
}

.about_text_block p {
    line-height: 1.8;
}

.about_action_buttons {
    display: flex;
    align-items: center;
    gap: 24px;
    margin-top: 40px;
}

.about_primary_button {
    background-color: #643a9f;
    padding: 12px 26px;
    color: #fff;
    text-decoration: none;
    border-radius: 4px;
    transition: 0.3s;
}

.about_primary_button:hover {
    background: #7800f9;
    color: #ffffff;
}

.about_secondary_link {
    color: #fff;
    text-decoration: none;
    position: relative;
}

.instagram_profile_button {
    position: absolute;
    bottom: -17px;
    width: 351px;
    height: 46px;
    left: -87px;
    background: linear-gradient(to bottom, #a54bff00 0%, #5a3ca7c2 100%);
    border-radius: 4px;
    text-align: center;
    text-decoration: none;
    color: #ffffff;
    font-weight: bolder;
}

.instagram_image_block {
    position: relative;
}

.instagram_link_wrapper {
    position: absolute;
    bottom: 20px;
    left: 20px;
}


/* btn header */
.primary_action_button_header {
    display: flex;
    width: 180px;
    height: 40px;
    border-radius: 4px;
    padding: 12px 25px;
    gap: 10px;
    margin-top: 46px;
    background: linear-gradient(90deg, #6A15FA, #8B49FB);
    color: #fff;
    align-items: center;
    justify-content: center;
    transition: background 0.5s ease, transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.primary_action_button_header:hover {
    background: linear-gradient(90deg, #390393, #4F04CE);
    cursor: pointer;
}


.primary_action_button_header .primary_action_button_text {
    height: 24px;
    width: 103.5px;
    font-size: 20px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    transition: transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.primary_action_button_header:hover .primary_action_button_text {
    transform: translateX(6px);
}

.primary_action_button_header svg {
    fill: #fff;
    stroke: #fff;
    stroke-width: 2;
    transition: transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.primary_action_button_header:hover svg {
    transform: translateX(4px);
}

.primary_action_button_header .primary_action_button_text,
.primary_action_button_header svg {
    will-change: transform;
}



/* btn about */

.about_primary_button_header {
    display: flex;
    width: 180px;
    height: 48px;
    border-radius: 4px;
    padding: 12px 25px;
    gap: 10px;
    background: linear-gradient(90deg, #6A15FA, #8B49FB);
    color: #fff;
    align-items: center;
    justify-content: center;
    transition: background 0.5s ease, transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}


.about_primary_button_header:hover {
    background: linear-gradient(90deg, #390393, #4F04CE);
    cursor: pointer;
}


.about_primary_button_header .about_primary_button_text {
    width: 119.5px;
    font-size: 15px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    transition: transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.about_primary_button_header:hover .about_primary_button_text {
    transform: translateX(6px);
}

.about_primary_button_header svg {
    fill: #fff;
    stroke: #fff;
    stroke-width: 2;
    transition: transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.about_primary_button_header:hover svg {
    transform: translateX(4px);
}

.about_primary_button_header .about_primary_button_text,
.about_primary_button_header svg {
    will-change: transform;
}

































/* Responsive */
@media (max-width:319px) {
    .about_center_content{
        margin-right: 66px!important;
    }

    .about_image_left_part {
        left: 69%!important;
        top: 26rem!important;

    }
    .about_image_right_part {
        right: 27rem !important;
        bottom: 171px !important;
    }

    .about_action_buttons {
        flex-direction: column!important;
        align-items: flex-start!important;
    }

    .about_content_row{
        height: 50rem!important;
    }
}
@media (min-width:320px) and (max-width: 576px) {
    .about_center_content{
        margin-right: 66px!important;
    }

    .about_image_left_part {
        left: 69%!important;
        top: 26rem!important;

    }
    .about_image_right_part {
        right: 59% !important;
        bottom: 124px !important;
    }

    .about_action_buttons {
        flex-direction: column!important;
        align-items: flex-start!important;
    }

    .about_content_row{
        height: 50rem!important;
    }
}
@media (min-width:576px) and (max-width: 800px) {
    .about_center_content{
        margin-right: 66px!important;
    }

    .about_image_left_part {
        left: 56%;
        top: 17rem !important;

    }
    .about_image_right_part {
        right: 63%;
        bottom: 171px !important;
    }

    .about_action_buttons {
        flex-direction: column!important;
        align-items: flex-start!important;
    }

    .about_content_row{
        height: 50rem!important;
    }
}


@media (min-width: 800px) and (max-width: 991px) {
    .about_primary_button_header{
        width: 145px;
        height: 39px;
    }
    .about_primary_button_header .about_primary_button_text{
        font-size: 13px!important;
        gap: 3px!important;
    }
    .about_image_left_part {
        left: 12rem;
        top: 15rem;
    }
    .about_image_right_part {
        right: 14rem;
        bottom: 7rem;
    }

    .about_action_buttons {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (min-width: 992px) and (max-width: 1199px) {

    .about_image_left_part {
        left: 10rem;
        top: 4rem;
    }
    .about_image_right_part {
        right: 14rem;
        bottom: 0;
    }


}
@media (min-width: 1200px) and (max-width: 1600px) {


    .about_image_left_part {
        left: 7rem;
    }
        .about_image_right_part {
        right: 11rem;
    }

}
@media (min-width: 1601px) {
    .about_info_section{
        width: 100%;
        max-width: 87.3125rem;
    }
    .about_center_content{
         margin-right: 7.5rem
    }
    .about_image_right_part{
        right: 6.4rem;
    }
    .about_image_left_part{
         left: 2.6rem;
    }
}






/* <!---------- card khani ----------> */
/* <!----------------- card  ----------------> */
/* title */
.courses_card_title {
  font-weight: 700;
  color: #390393;
  text-align: center;
  font-size: 42px;
}
@media (max-width: 575px) {
    .courses_card_title {
        font-size: 30px!important;
    }

}
@media (min-width: 576px) and (max-width: 991px) {
    .courses_card_title  {
        font-size: 32px!important;
    }

}

.courses_card_subtitle {
  font-weight: 400;
  color: #131313;
  letter-spacing: 0.8px;
  font-size: 18px;
  text-align: center;
}

.courses_card_school_section {
    margin-top: -5rem;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    padding: 40px;
    justify-content: center;
    align-items: center;
    margin-left: auto;
    margin-right: auto;
}
.div_container_course_card{
    margin-bottom: 5rem;
    margin-top: 7rem;
    display: flex;
    flex-wrap: wrap;
    gap: 60px;
    position: relative;
    justify-content: center;
}

.Product_info_school {
  padding: 80px 32px 32px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  position: relative;
  top: -50px;
}
.Product_info_school > * + * {
  margin-top: -33px;
}

.Product_title_course {
  font-weight: 500;
  font-size: 1.5em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #390393;
  margin-top: 2rem;
}

.product_discription {
  font-size: 0.9em;
  border-bottom: 1px solid #8B49FB;
  padding-bottom: 1rem;
  margin-top: 12px;
  color: #555;
  line-height: 1.6;
  overflow: hidden;
  height: 150px;
}

.title_tag_info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.time_tag {
  font-weight: lighter;
  color: grey;
  display: flex;
  align-items: center;
  margin-top: 4px;
}

.back_img_course {
  background-color: #b2b2fd;
}

.card-img div {
  width: 90%;
}

.card_courses_contain_school {
  background-color: white;
  color: black;
  width: 400px;
  height: 475px;
  /*max-height: 400px;*/
  border-radius: 8px;
  box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px,
    rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;
}

.card_img_courses_school{
  position: relative;
  top: -20px;
  height: 100px;
  display: flex;
  justify-content: center;
}

.card_img_courses_school a,
.card_img_courses_school div {
    height: 170px;
    width: 83%;
    object-fit: cover;
    border-radius: 4px;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
    margin-top: -2rem;
}

.card_imgs_course {
  transition: all 0.5s;
}
.card_imgs_course
.back_img_course_img_crs{
    height: 170px;
    width: 100%;

}
.card_imgs_course img{
    object-fit: cover;
    width: 100%;
    height: 195px;
}



.tag-time {
  font-size: 13px;
  color: #777;
  display: flex;
  align-items: center;
  gap: 4px;
}


.product_tags {
  display: flex;
  gap: 8px;
}

.product_tags .product_tag {
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 999px;
  background: #f1ecff;
  color: #6A15FA;
  font-weight: 500;
  text-decoration: none;
  /*cursor: pointer;*/
}
.card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: -15px;
}

.price {
  font-size: 16px;
  font-weight: 700;
  color: #390393;
}

/* btn card */

.btn_school_regis {
  border: none;
  width: 112px;
  height: 35px;
  display: flex;
  border-radius: 4px;
  padding: 12px 25px;
  gap: 10px;
  background: linear-gradient(90deg, #6A15FA, #8B49FB);
  color: #fff;
  align-items: center;
  justify-content: center;
  transition: background 0.5s ease, transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.btn_school_regis:hover {
    background: linear-gradient(90deg, #390393, #4F04CE);
    cursor: pointer;
}


.btn_school_regis .btn_school_text {
    height: 24px;
    width: 103.5px;
    font-size: 16px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1px;
    transition: transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.btn_school_regis:hover .btn_school_text {
    transform: translateX(6px);
}

.btn_school_regis svg {
    fill: #fff;
    stroke: #fff;
    stroke-width: 2;
    transition: transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.btn_school_regis:hover svg {
    transform: translateX(4px);
}

.btn_school_regis .btn_school_text,
.btn_school_regis svg {
    will-change: transform;
}
.btn_school_regis:active {
    background: linear-gradient(90deg, #CDB1FD, #CDB1FD);
    transform: scale(0.97);
}

/* btn more */
.course_btn_more {
    display: flex;
    width: 180px;
    height: 45px;
    border-radius: 4px;
    padding: 12px 25px;
    gap: 10px;
    margin-top: 46px;
    background: linear-gradient(90deg, #6A15FA, #8B49FB);
    color: #fff;
    align-items: center;
    justify-content: center;
    transition: background 0.5s ease, transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
    margin-left: auto;
    margin-right: auto;

}


.course_btn_more:hover {
    background: linear-gradient(90deg, #390393, #4F04CE);
    cursor: pointer;
}


.course_btn_more .course_button_text {
    height: 24px;
    width: 103.5px;
    font-size: 20px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    transition: transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.course_btn_more:hover .course_button_text {
    transform: translateX(6px);
}

.course_btn_more svg {
    fill: #fff;
    stroke: #fff;
    stroke-width: 2;
    transition: transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.course_btn_more:hover svg {
    transform: translateX(4px);
}

.course_btn_more .course_button_text,
.course_btn_more svg {
    will-change: transform;
}
@media (max-width: 500px) {
    .courses_card_school_section {
        padding: 0px;
    }
}

@media (max-width: 991px) {
    .course_btn_more{
        width: 145px;
        height: 39px;
    }
    .course_btn_more .course_button_text{
        font-size: 16px!important;
        gap: 16px!important;
    }
    .btn_school_regis .btn_school_text {
        font-size: 14px;
    }
}

@media (min-width: 800px) and (max-width: 991px) {
    .roadmap_school_section {
        width: 100%;
        max-width: 102.3125rem;
        gap: 30px;
        row-gap: 65px;
    }
    .courses_card_school_section {
    margin-top: 6rem;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    padding: 40px;
    justify-content: center;
    align-items: center;
    margin-left: auto;
    margin-right: auto;
    }
}

@media (min-width: 992px) and (max-width: 1199px) {
    .roadmap_school_section {
        width: 100%;
        max-width: 76.3125rem;
        gap: 68px;
    }
    .card_courses_contain_school {
        width: 395px;
    }
    .div_container_course_card {
        gap: 75px;
    }
}
@media (min-width: 1200px) and (max-width: 1600px) {
    .courses_card_school_section {
        width: 100%;
        max-width: 88.3125rem;
        gap: 45px;
        row-gap: 65px;
    }
    .card_courses_contain_school {
        width: 366px;
    }
    .div_container_course_card {
        gap: 40px;
    }
}

@media (min-width: 1601px) {
    .courses_card_school_section {
        width: 100%;
        max-width: 101.3125rem;
    }
    .div_container_course_card {
        gap: 95px;
    }
}


/* --------------------card ----------------------- */
/* educational workshop */
.educational_card_school_section {
    margin-top: 12rem;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    padding: 40px;
    justify-content: center;
    align-items: center;
}
/* eductional title */
.educational_card_title {
  font-weight: 700;
  color: #390393;
  text-align: center;
  font-size: 42px;
}
.educational_card_subtitle {
  font-weight: 400;
  color: #131313;
  letter-spacing: 0.8px;
  font-size: 18px;
  text-align: center;
}



.educational_btn_more {
    display: flex;
    width: 180px;
    height: 40px;
    border-radius: 4px;
    padding: 12px 25px;
    gap: 10px;
    margin-top: 46px;
    background: linear-gradient(90deg, #6A15FA, #8B49FB);
    color: #fff;
    align-items: center;
    justify-content: center;
    transition: background 0.5s ease, transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
    margin-left: auto;
    margin-right: auto;

}

.educational_btn_more:hover {
    background: linear-gradient(90deg, #390393, #4F04CE);
    cursor: pointer;
}


.educational_btn_more .educational_button_text {
    height: 24px;
    width: 103.5px;
    font-size: 20px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    transition: transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.educational_btn_more:hover .educational_button_text {
    transform: translateX(6px);
}

.educational_btn_more svg {
    fill: #fff;
    stroke: #fff;
    stroke-width: 2;
    transition: transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.educational_btn_more:hover svg {
    transform: translateX(4px);
}

.educational_btn_more .educational_button_text,
.educational_btn_more svg {
    will-change: transform;
}



.img_text_school_section{
    margin-top: 12rem;
    margin-left: auto;
    margin-right: auto;
    max-width: 1200px;
    width: 80rem;
}
.img_text_container{
    display: flex;
    justify-content: space-between;
    gap: 7rem;
}
.img_wrapper img{
    width: 540px;
    height: 540px;
    object-fit: cover;
    border-radius: 4px;
}
.text_wrapper{
    display: flex;
    flex-direction: column;
}
.text_wrapper h3{
    font-size: 35px;
    color: #390393;
}
.text_wrapper p{
    font-size: 19px;
    font-weight: 300;
    line-height: 33px;
    color: #131313;
}
.info_student_number{
    display: flex;
    gap: 2rem;
}
.counter_student{
    display: flex;
    flex-direction: column;
    margin-top: 2rem;
    color: #8B49FB;
}
.counter_number{
    font-size: 50px;
    color: #390393;
}

@media (max-width: 799px) {
    .img_text_school_section{
        width: 100%;
        max-width: 24.3125rem;
        margin-right: auto;
        margin-left: auto;
    }
    .img_text_container {
        gap: 3rem;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    .img_wrapper img {
        width: 100%;
    }
    .courses_card_section_title{
        width: 435px!important;
    }

}
@media (min-width: 800px) and (max-width: 991px) {
    .img_text_school_section{
        width: 100%;
        max-width: 44.3125rem;
    }
    .img_wrapper img {
        width: 277px !important;
        height: 325px !important;
        object-fit: cover !important;
        border-radius: 4px !important;
    }
    .img_text_container {
        gap: 3rem;
        justify-content: normal;
    }
    .text_wrapper p {
        width: 386px;
    }

}
@media (min-width: 992px) and (max-width: 1199px) {
    .img_text_school_section{
        width: 100%;
        max-width: 57.3125rem;
    }
    .img_text_container {
        gap: 3rem;
    }

}
@media (min-width: 1200px) and (max-width: 1600px) {
    .img_text_school_section{
        width: 100%;
        max-width: 70.3125rem;
    }

}
@media (min-width: 1601px) {
    .img_text_school_section{
        width: 100%;
        max-width: 87.3125rem;
    }
}

/*------------------------------hamberger menu-----------------------------------------------------------------------*/


.side_menu_nav.open {
    right: 0;
    opacity: 1;
}


.overlay_sidbar {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(6px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s ease;
    z-index: 60000;
}

.overlay_sidbar.show {
    opacity: 1;
    pointer-events: all;
}
.hamburger_menu svg {
    transition: transform 0.4s ease;
}

#menuToggle:checked + svg {
    transform: rotate(42deg);
}