/* =====================================================
   DASH MUSIC CATEGORIES
   Fully scoped - WordPress safe
===================================================== */

.dash-music-categories {
   width: 100%;
   /* background: #f5f5f5; */
   padding: 40px 0;
   margin: 0;
   box-sizing: border-box;
}

.dash-music-categories *,
.dash-music-categories *::before,
.dash-music-categories *::after {
   box-sizing: border-box;
}


/* =====================================================
   CONTAINER
   Similar to Bootstrap .container
===================================================== */

.dash-music-container {
   width: 100%;
   max-width: 1320px;

   margin-left: auto;
   margin-right: auto;

   padding-left: 12px;
   padding-right: 12px;
}


/* =====================================================
   ROW
   Similar to Bootstrap .row
===================================================== */

.dash-music-row {
   display: flex;
   flex-wrap: wrap;

   margin-left: -20px;
   margin-right: -20px;
}


/* =====================================================
   COLUMN
===================================================== */

.dash-music-col {
   width: 25%;

   padding-left: 20px;
   padding-right: 20px;

   margin-bottom: 30px;
}


/* =====================================================
   CARD
===================================================== */

.dash-music-card {

   width: 100%;

   min-height: 383px;

   background: #ebebeb;

   border: 1px solid #e3e3e3;

   border-radius: 9px;

   padding: 38px 28px 34px;

   text-align: center;

   display: flex;
   flex-direction: column;
   align-items: center;

   position: relative;

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

}


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

.dash-music-card:hover {

   transform: translateY(-8px);

   border-color: #0622fd;

   box-shadow:
      0 16px 35px rgb(66 79 226 / 65%);

}


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

.dash-music-icon {

   width: 150px;
   height: 150px;

   display: flex;

   justify-content: center;
   align-items: center;

   margin-bottom: 13px;

   transition:
      transform 0.35s ease;

}


.dash-music-icon svg {

   width: 100%;
   height: 100%;

   display: block;

}


/* ICON HOVER */

.dash-music-card:hover .dash-music-icon {

   transform:
      scale(1.04) translateY(-3px);

}


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

.dash-music-title {

   margin: 0 0 10px 0 !important;

   padding: 0 !important;

   font-family:
      Georgia,
      "Times New Roman",
      serif !important;

   font-size: 29px !important;

   line-height: 1.2 !important;

   font-weight: 500 !important;

   color: #071827 !important;

}


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

.dash-music-description {

   max-width: 245px;

   margin: 0 auto 19px !important;

   padding: 0 !important;

   font-family:
      Arial,
      Helvetica,
      sans-serif !important;

   font-size: 15px !important;

   line-height: 1.75 !important;

   font-weight: 400 !important;

   color: #858585 !important;

}


/* =====================================================
   JOIN CLASS BUTTON
===================================================== */

.dash-music-link {

   position: relative;

   display: inline-block;

   margin-top: auto;

   padding: 0 0 5px 0;

   color: #071827 !important;

   background: transparent !important;

   border: 0 !important;

   font-family:
      Arial,
      Helvetica,
      sans-serif !important;

   font-size: 12px !important;

   font-weight: 500 !important;

   line-height: 1.4 !important;

   text-decoration: none !important;

   transition:
      color 0.3s ease;

}


/* Underline */

.dash-music-link::after {

   content: "";

   position: absolute;

   left: 0;
   bottom: 0;

   width: 100%;
   height: 1px;

   background: #071827;

   transform: scaleX(1);

   transform-origin: center;

   transition:
      transform 0.3s ease,
      background 0.3s ease;

}


/* Link hover */

.dash-music-link:hover {

   color: #f11616 !important;
   font-weight: 600 !important;

}


.dash-music-link:hover::after {

   background: #f11616;

   transform: scaleX(0.65);

}


/* =====================================================
   BOOTSTRAP STYLE XL
   1200px+
===================================================== */

@media (min-width: 1200px) {

   .dash-music-container {

      max-width: 1320px;

   }

}


/* =====================================================
   BOOTSTRAP STYLE LG
   992px - 1199px
===================================================== */

@media (max-width: 1199.98px) {

   .dash-music-col {

      width: 33.333333%;

   }

}


/* =====================================================
   BOOTSTRAP STYLE MD
   768px - 991px
===================================================== */

@media (max-width: 991.98px) {

   .dash-music-container {

      padding-left: 15px;
      padding-right: 15px;

   }

   .dash-music-row {

      margin-left: -12px;
      margin-right: -12px;

   }

   .dash-music-col {

      width: 50%;

      padding-left: 12px;
      padding-right: 12px;

   }

}


/* =====================================================
   BOOTSTRAP STYLE SM
   576px - 767px
===================================================== */

@media (max-width: 767.98px) {

   .dash-music-categories {

      padding-top: 30px;
      padding-bottom: 30px;

   }

   .dash-music-card {

      min-height: 370px;

   }

}


/* =====================================================
   MOBILE
   Below 576px
===================================================== */

@media (max-width: 575.98px) {

   .dash-music-container {

      padding-left: 15px;
      padding-right: 15px;

   }

   .dash-music-row {

      margin-left: 0;
      margin-right: 0;

   }

   .dash-music-col {

      width: 100%;

      padding-left: 0;
      padding-right: 0;

      margin-bottom: 20px;

   }

   .dash-music-card {

      min-height: auto;

      padding-top: 30px;
      padding-bottom: 32px;

   }

   .dash-music-icon {

      width: 140px;
      height: 140px;

   }

   .dash-music-title {

      font-size: 27px !important;

   }

   .dash-music-description {

      max-width: 290px;

      font-size: 14px !important;

   }

}


/* =====================================================
   VERY SMALL MOBILE
===================================================== */

@media (max-width: 380px) {

   .dash-music-card {

      padding-left: 18px;
      padding-right: 18px;

   }

   .dash-music-icon {

      width: 130px;
      height: 130px;

   }

}

/* =========================================
   SAME SIZE FOR ALL COURSE CARDS
========================================= */

.it-course-item {
   height: 100% !important;
   display: flex !important;
   flex-direction: column !important;
}

/* Image same height */
.it-course-item .it-course-thumb {
   height: 230px !important;
   overflow: hidden;
}

.it-course-item .it-course-thumb img {
   width: 100% !important;
   height: 100% !important;
   object-fit: cover !important;
}

/* Content same height */
.it-course-item .it-course-content {
   min-height: 300px !important;
   display: flex !important;
   flex-direction: column !important;
}

/* Title same height */
.it-course-item .it-course-title {
   min-height: 56px !important;
}

/* Description same height */
.it-course-item .it-course-content p {
   min-height: 72px !important;
}

/* Bottom section always stays at same position */
.it-course-item .it-course-meta,
.it-course-item .it-course-author {
   margin-top: auto !important;
}

/* home slider */

/* ==========================================
   FULL WIDTH MUSIC HERO BANNER
========================================== */

.music-hero-slider {
   width: 100%;
   overflow: hidden;
}

.music-hero-slider .carousel-item {
   position: relative;

   min-height: 650px;

   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;

   display: flex;
   align-items: center;
}


/* DARK / LIGHT OVERLAY */

.hero-overlay {
   position: absolute;
   inset: 0;

   background:
      linear-gradient(90deg,
         rgba(255, 255, 255, 0.96) 0%,
         rgba(255, 255, 255, 0.88) 38%,
         rgba(255, 255, 255, 0.35) 65%,
         rgba(255, 255, 255, 0.05) 100%);

   z-index: 1;
}


/* CONTENT */

.music-hero-content {
   position: relative;
   z-index: 2;

   max-width: 650px;

   padding: 80px 0;
}


/* LABEL */

.music-hero-label {
   display: inline-flex;

   align-items: center;
   gap: 10px;

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

   letter-spacing: 1px;

   color: #0c7164;
}


.label-shape {
   font-size: 13px;

   background: linear-gradient(90deg,
         #0c7164,
         #fdc306);

   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
}


/* TITLE */

.music-hero-content h1 {
   margin-top: 20px;
   margin-bottom: 20px;

   font-size: 58px;
   line-height: 1.12;

   font-weight: 700;

   color: #151515;
}


.music-hero-content h1 span {
   color: #0c7164;
}


/* DESCRIPTION */

.music-hero-content p {
   max-width: 570px;

   font-size: 17px;
   line-height: 1.7;

   color: #555;

   margin-bottom: 35px;
}


/* BUTTON */

.music-hero-btn {
   display: inline-flex;

   align-items: center;
   gap: 15px;

   padding: 15px 25px;

   background: #0c7164;
   color: #fff;

   border-radius: 5px;

   font-size: 15px;
   font-weight: 600;

   text-decoration: none;

   transition: all .3s ease;
}


.music-hero-btn span {
   font-size: 20px;
   line-height: 1;
}


.music-hero-btn:hover {
   background: #fdc306;
   color: #111;
   transform: translateY(-2px);
}


/* CONTROLS */

.music-hero-slider .carousel-control-prev,
.music-hero-slider .carousel-control-next {
   width: 50px;
   height: 50px;

   top: 50%;
   transform: translateY(-50%);

   margin: 0 25px;

   background: rgba(12, 113, 100, .9);

   border-radius: 50%;

   opacity: 1;

   z-index: 5;
}


.music-hero-slider .carousel-control-prev:hover,
.music-hero-slider .carousel-control-next:hover {
   background: #fdc306;
}


/* INDICATORS */

.music-hero-slider .carousel-indicators {
   z-index: 5;

   margin-bottom: 25px;
}


.music-hero-slider .carousel-indicators button {
   width: 9px;
   height: 9px;

   border-radius: 50%;

   border: 0;

   margin: 0 5px;
}


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

@media (max-width: 991px) {

   .music-hero-slider .carousel-item {
      min-height: 600px;
   }

   .music-hero-content {
      padding: 70px 30px;
   }

   .music-hero-content h1 {
      font-size: 48px;
   }

}


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

@media (max-width: 767px) {

   .music-hero-slider .carousel-item {
      min-height: 620px;

      background-position: center;
   }


   /* Stronger overlay for mobile */

   .hero-overlay {
      background:
         linear-gradient(180deg,
            rgba(255, 255, 255, .96) 0%,
            rgba(255, 255, 255, .90) 50%,
            rgba(255, 255, 255, .55) 100%);
   }


   .music-hero-content {
      text-align: center;

      padding: 70px 20px 100px;

      max-width: 100%;
   }


   .music-hero-label {
      justify-content: center;

      font-size: 13px;
   }


   .music-hero-content h1 {
      font-size: 36px;

      line-height: 1.18;
   }


   .music-hero-content p {
      font-size: 15px;

      line-height: 1.65;

      margin-bottom: 28px;
   }


   .music-hero-btn {
      padding: 13px 20px;

      font-size: 14px;
   }


   .music-hero-slider .carousel-control-prev,
   .music-hero-slider .carousel-control-next {
      width: 35px;
      height: 35px;

      margin: 0 8px;
   }

}


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

@media (max-width: 480px) {

   .music-hero-slider .carousel-item {
      min-height: 580px;
   }

   .music-hero-content {
      padding: 60px 15px 90px;
   }

   .music-hero-content h1 {
      font-size: 31px;
   }

   .music-hero-content p {
      font-size: 14px;
   }

}


.full-video-section {
   width: 100%;
   height: 650px;
   overflow: hidden;
   position: relative;
   background: #000;
}

.full-section-video {
   width: 100%;
   height: 100%;

   object-fit: cover;
   object-position: center;

   display: block;
}


/* Tablet */

@media (max-width: 991px) {
   .full-video-section {
      height: 500px;
   }
}


/* Mobile */

@media (max-width: 767px) {
   .full-video-section {
      height: 420px;
   }

   .full-section-video {
      object-position: center;
   }
}


/* Small Mobile */

@media (max-width: 480px) {
   .full-video-section {
      height: 350px;
   }
}

.full-video-section {
   width: 100%;
   height: 100vh;
   min-height: 600px;
   overflow: hidden;
   position: relative;
}

.full-section-video {
   width: 100%;
   height: 100%;
   object-fit: cover;
}


.dsy-section {
   --navy: #0b1f5c;
   --blue: #017DD3;
   --red: #e11d48;
   --white: #ffffff;
   --muted: #5a6a8a;
   position: relative;
   overflow: hidden;
   padding: 110px 0;
   color: var(--navy);
   background:
      radial-gradient(700px 320px at 92% 0%, rgba(29, 78, 216, .09), transparent 60%),
      radial-gradient(600px 320px at 0% 100%, rgba(225, 29, 72, .07), transparent 60%),
      repeating-linear-gradient(180deg, transparent 0 38px, rgba(29, 78, 216, .05) 38px 39px),
      #ffffff;
}

.dsy-head {
   text-align: center;
   max-width: 720px;
   margin: 0 auto 60px
}

.dsy-tag {
   display: inline-block;
   padding: 8px 20px;
   border: 1.5px solid var(--red);
   color: var(--red);
   border-radius: 50px;
   font-size: 14px;
   font-weight: 700;
   margin-bottom: 22px;
   background: #fff1f4
}

.dsy-head h2 {
   font-size: clamp(32px, 4.6vw, 52px);
   line-height: 1.15;
   font-weight: 800;
   color: var(--navy);
   margin: 0 0 16px
}

.dsy-head h2 span {
   color: var(--blue);
   background: linear-gradient(transparent 66%, rgba(225, 29, 72, .22) 66% 92%, transparent 92%);
   padding: 0 6px
}

.dsy-head p {
   color: var(--muted);
   font-size: 17px;
   margin: 0
}

.dsy-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 28px
}

@media(max-width:991px) {
   .dsy-grid {
      grid-template-columns: repeat(2, 1fr)
   }
}

@media(max-width:575px) {
   .dsy-grid {
      grid-template-columns: 1fr
   }

   .dsy-section {
      padding: 80px 0
   }
}

.dsy-card {
   --c: #017DD3;
   position: relative;
   display: block;
   aspect-ratio: 4/5;
   border-radius: 28px;
   overflow: hidden;
   background: #fff;
   isolation: isolate;
   text-decoration: none;
   color: #fff;
   box-shadow: 0 14px 34px rgba(11, 31, 92, .16);
   transition: transform .5s cubic-bezier(.2, .8, .2, 1), box-shadow .5s ease;
}

.dsy-card.c1,
.dsy-card.c3,
.dsy-card.c5 {
   --c: #017DD3
}

.dsy-card.c2,
.dsy-card.c4,
.dsy-card.c6 {
   --c: #e11d48
}

.dsy-card:hover,
.dsy-card:focus-visible {
   transform: translateY(-10px);
   box-shadow: 0 26px 50px rgba(11, 31, 92, .26), 0 0 0 3px var(--c);
   outline: none
}

.dsy-card img {
   position: absolute;
   inset: 0;
   width: 100%;
   height: 100%;
   object-fit: cover;
   z-index: -2;
   transition: transform 1.1s ease, filter .6s ease
}

.dsy-card:hover img,
.dsy-card:focus-visible img {
   transform: scale(1.12);
   filter: saturate(1.1)
}

.dsy-card::before {
   content: "";
   position: absolute;
   inset: 0;
   z-index: -1;
   background: linear-gradient(180deg, rgba(11, 31, 92, 0) 30%, rgba(11, 31, 92, .9) 100%);
   transition: background .5s
}

.dsy-card:hover::before {
   background: linear-gradient(180deg, rgba(11, 31, 92, .25) 0%, rgba(11, 31, 92, .94) 70%)
}

.dsy-sticker {
   position: absolute;
   top: 20px;
   left: 20px;
   width: 68px;
   height: 68px;
   border-radius: 22px;
   display: grid;
   place-items: center;
   font-size: 36px;
   background: #fff;
   border: 3px solid var(--c);
   box-shadow: 0 8px 20px rgba(11, 31, 92, .25);
   transform: rotate(-8deg);
   transition: transform .5s cubic-bezier(.2, .9, .3, 1.5), background .4s;
}

.dsy-card:hover .dsy-sticker {
   transform: rotate(8deg) scale(1.18);
   background: var(--c);
   border-color: #fff
}

.dsy-rating {
   position: absolute;
   top: 26px;
   right: 20px;
   background: #fff;
   color: var(--navy);
   padding: 6px 12px;
   border-radius: 50px;
   font-size: 13px;
   font-weight: 700;
   box-shadow: 0 4px 12px rgba(0, 0, 0, .18)
}

.dsy-rating b {
   color: #f5a300
}

.dsy-info {
   position: absolute;
   left: 0;
   right: 0;
   bottom: 0;
   padding: 26px 24px 24px;
   transform: translateY(calc(100% - 118px));
   transition: transform .55s cubic-bezier(.2, .8, .2, 1)
}

.dsy-card:hover .dsy-info,
.dsy-card:focus-visible .dsy-info {
   transform: translateY(0)
}

.dsy-cat {
   display: inline-block;
   background: var(--c);
   color: #fff;
   font-weight: 700;
   font-size: 12.5px;
   padding: 5px 14px;
   border-radius: 50px;
   margin-bottom: 10px;
   border: 1.5px solid #fff
}

.dsy-info h3 {
   font-size: 22px;
   font-weight: 800;
   line-height: 1.25;
   margin: 0 0 12px;
   color: #fff
}

.dsy-info p {
   font-size: 14.5px;
   line-height: 1.6;
   color: #e4ebff;
   margin: 0 0 14px;
   opacity: 0;
   transition: opacity .4s ease .1s
}

.dsy-meta {
   display: flex;
   gap: 14px;
   flex-wrap: wrap;
   font-size: 13px;
   color: #cdd9ff;
   margin-bottom: 16px;
   opacity: 0;
   transition: opacity .4s ease .15s
}

.dsy-go {
   display: inline-flex;
   align-items: center;
   gap: 10px;
   font-weight: 700;
   font-size: 14.5px;
   background: #fff;
   color: var(--c);
   padding: 11px 20px;
   border-radius: 50px;
   opacity: 0;
   transition: opacity .4s ease .2s, gap .3s, background .3s, color .3s
}

.dsy-card:hover .dsy-go {
   gap: 16px;
   background: var(--c);
   color: #fff
}

.dsy-card:hover .dsy-info p,
.dsy-card:hover .dsy-meta,
.dsy-card:hover .dsy-go,
.dsy-card:focus-visible .dsy-info p,
.dsy-card:focus-visible .dsy-meta,
.dsy-card:focus-visible .dsy-go {
   opacity: 1
}

@media(hover:none) {
   .dsy-card {
      aspect-ratio: auto;
      min-height: 440px
   }

   .dsy-info {
      transform: none;
      padding-top: 120px
   }

   .dsy-info p,
   .dsy-meta,
   .dsy-go {
      opacity: 1
   }
}

@media(prefers-reduced-motion:reduce) {

   .dsy-card,
   .dsy-card * {
      transition: none !important
   }
}

.course-card {
   transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
   border-bottom: 4px solid var(--bs-primary) !important;
}

.course-card img {
   transition: transform .5s ease;
}

.course-card .btn {
   transition: all .25s ease;
}

.course-card:hover {
   transform: translateY(-8px);
   box-shadow: 0 1rem 2rem rgb(2, 126, 212) !important;
   border-bottom-color: var(--bs-danger) !important;
}

.course-card:hover img {
   transform: scale(1.08);
}

.course-card:hover .btn-primary {
   background-color: var(--bs-danger);
   border-color: var(--bs-danger);
}

.course-card:hover .it-course-title {
   color: var(--bs-danger) !important;
}

@media (prefers-reduced-motion: reduce) {

   .course-card,
   .course-card img {
      transition: none;
   }
}

.mobile-video-section {
   display: none;
}

@media (max-width: 767px) {
   .full-video-section {
      display: none;
   }

   .mobile-video-section {
      display: block;
   }
}