/* ==========================================================
CONTACT SECTION
========================================================== */

.course-contact-card {
   position: relative;
   overflow: hidden;
}

/* ==========================================================
SECTION INTRO
========================================================== */

.course-contact-card__top {
   max-width: 760px;

   margin:
      0 auto 70px;

   text-align: center;
}

/* ==========================================================
EYEBROW
========================================================== */

.course-contact-card__eyebrow {
   display: inline-flex;

   margin-bottom: 24px;

   padding:
      10px 18px;

   border-radius:
      999px;

   background:
      rgba(7, 21, 33, 0.06);

   color:
      #071521;

   font-size: 12px;
   font-weight: 700;

   letter-spacing: 0.18em;

   text-transform: uppercase;
}

/* ==========================================================
TITLE
========================================================== */

.course-contact-card__title {
   margin-bottom: 26px !important;

   color:
      #071521;

   font-size:
      clamp(3rem, 6vw, 4.25rem);

   font-weight: 700;

   line-height: 1;

   letter-spacing:
      -0.025em;

   text-wrap: balance;
}

/* ==========================================================
DESCRIPTION
========================================================== */

.course-contact-card__description {
   margin: 0 auto;

   max-width: 680px;

   color:
      rgba(7, 21, 33, 0.68);

   font-size:
      1.05rem;

   line-height: 1.9;

   text-wrap: pretty;
}

/* ==========================================================
CONTACT GRID
========================================================== */

.course-contact-list {
   display: grid;

   grid-template-columns:
      repeat(3, minmax(0, 1fr));

   gap: 40px;
}

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

.course-contact-item {
   position: relative;

   overflow: hidden;

   min-height: 240px;

   padding: 38px 34px;

   border:
      1px solid rgba(255, 255, 255, 0.06);

   border-radius:
      30px;

   background:
      linear-gradient(180deg,
         #071521 0%,
         #0b1f30 100%);

   box-shadow:
      0 24px 60px rgba(3, 12, 20, 0.14);

   transition:
      transform 0.5s ease,
      border-color 0.5s ease,
      box-shadow 0.5s ease;
}

/* ==========================================================
HOVER
========================================================== */

.course-contact-item:hover {
   transform:
      translateY(-8px);

   border-color:
      rgba(255, 219, 27, 0.12);

   box-shadow:
      0 34px 80px rgba(3, 12, 20, 0.22);
}

/* ==========================================================
ICON
========================================================== */

.course-contact-item__icon {
   display: flex;
   justify-content: center;
   align-items: center;

   width: 58px;
   height: 58px;

   margin-bottom: 28px;

   border-radius:
      20px;

   background:
      rgba(255, 255, 255, 0.04);

   color:
      var(--bee-gold);
}

.course-contact-item__icon svg {
   width: 20px;
   height: 20px;

   stroke-width: 1.8;
}

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

.course-contact-item__content {
   display: flex;
   flex-direction: column;
}

/* ==========================================================
LABEL
========================================================== */

.course-contact-item__label {
   display: block;

   margin-bottom: 16px;

   color:
      rgba(255, 255, 255, 0.48);

   font-size: 14px;
   font-weight: 700;

   letter-spacing: 0.2em;

   text-transform: uppercase;
}

/* ==========================================================
LINKS
========================================================== */

.course-contact-item__content a,
.course-contact-item__kakao {
   color:
      #fff;

   font-size:
      1.05rem;

   font-weight: 600;

   line-height: 1.6;

   text-decoration: none;

   word-break: break-word;

   transition:
      opacity 0.4s ease,
      transform 0.4s ease;
}

.course-contact-item__content a:hover {
   opacity: 0.72;

   transform:
      translateX(3px);
}

.course-contact-item__content a{
    text-decoration:none !important;
    font-size:18px;
}

/* ==========================================================
RESPONSIVE
========================================================== */

@media (max-width: 1200px) {

   .course-contact-list {
      grid-template-columns:
         repeat(2, minmax(0, 1fr));
   }

}

/* ==========================================================
TABLET
========================================================== */

@media (max-width: 768px) {

   .course-contact-card {
      padding:
         70px 32px;
   }

   .course-contact-card__top {
      margin-bottom: 50px;
   }

   .course-contact-card__title {
      font-size:
         clamp(2.8rem, 10vw, 4.2rem);

      line-height: 0.96;
   }

   .course-contact-card__description {
      font-size:
         1rem;
   }

   .course-contact-item {
      min-height: 220px;
   }

}

/* ==========================================================
MOBILE
========================================================== */

@media (max-width: 640px) {

   .course-contact-list {
      grid-template-columns: 1fr;
   }

   .course-contact-card {
      padding:
         60px 22px;

      border-radius:
         28px;
   }

   .course-contact-card__top {
      margin-bottom: 40px;
   }

   .course-contact-card__title {
      font-size:
         clamp(2.4rem, 12vw, 3.5rem);

      line-height: 1;
   }

   .course-contact-card__description {
      font-size:
         0.95rem;

      line-height: 1.8;
   }

   .course-contact-item {
      min-height: auto;

      padding:
         30px 26px;

      border-radius:
         24px;
   }

   .course-contact-item__icon {
      width: 54px;
      height: 54px;

      margin-bottom: 22px;
   }

}

.bee-contact-form-header {
   padding-top: 6rem !important;
   padding-bottom: 2rem !important;
}

@media(min-width:1200px) {
   .bee-contact-form-header .bee-section-wrapper {
      max-width: 650px !important;
   }
}

.bee-contact-form {
   padding-bottom: 7rem !important;
}