/* ==========================================================================
   Diploma in Fashion Designing - page skin
   Used by:
     diploma-in-fashion-Designing-in-bangalore-india.html
     diploma-in-fashion-designing-in-bangalore-india.html
     diploma-in-fashion-designing-in-bangalore-india.php

   Design only. It borrows the look of the Data Science & AI page (navy /
   orange palette, Inter Tight, white cards on soft surfaces) without touching
   any content, image path, video, link or form on the page.

   Scoping: the page's <body> carries .fashion-page and every section carries
   an .fd-* hook class. Every rule here starts from one of those hooks, so the
   shared header (top.php), enquiry form and footer are never restyled. Many
   rules need !important only because the page markup uses inline styles
   (fixed 1128px image widths, black 10-12px text, a 35vh recruiter band).
   ========================================================================== */

.fashion-page {
  --fd-navy:      #14243d;
  --fd-navy-2:    #173c71;
  --fd-accent:    #dd5803;
  --fd-accent-d:  #c2490a;
  --fd-amber:     #e8891f;
  --fd-text:      #55607a;
  --fd-muted:     #8590a0;
  --fd-surface:   #ffffff;
  --fd-warm:      #f8f6f2;
  --fd-cool:      #f2f4f8;
  --fd-border:    #e4e8f0;
  --fd-shadow:    0 1px 2px rgba(16,20,32,.04), 0 8px 22px -16px rgba(16,20,32,.3);
  --fd-shadow-hi: 0 1px 2px rgba(16,20,32,.04), 0 16px 32px -18px rgba(16,20,32,.42);
  --fd-radius:    12px;
  --fd-gap:       clamp(14px, 2vw, 24px);
  --fd-section:   clamp(32px, 4.6vw, 64px);
  --fd-font:      'Inter Tight', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
}

/* Shared: every hooked block uses the page font and never spills sideways. */
.fashion-page [class*="fd-"] { font-family: var(--fd-font); }
.fashion-page .fd-hero-media,
.fashion-page .fd-admission,
.fashion-page .fd-title,
.fashion-page .fd-overview,
.fashion-page .fd-facts,
.fashion-page .fd-desc,
.fashion-page .fd-curr-head,
.fashion-page .fd-curriculum,
.fashion-page .fd-outcomes,
.fashion-page .fd-recruiters,
.fashion-page .fd-reviews { max-width: 100%; box-sizing: border-box; }

/* Section headings delivered as images keep their files; they just scale. */
.fashion-page .fd-title img,
.fashion-page .fd-desc img,
.fashion-page .fd-curr-head img {
  display: block;
  width: 100% !important;
  max-width: 1128px;
  height: auto !important;
  margin-left: auto; margin-right: auto;
}

/* ------------------------------------------------------------------ hero -- */
/* Video, admission strip and course title read as one navy-to-warm band. */
.fashion-page .fd-hero-media {
  background: var(--fd-navy);
  line-height: 0;
}
.fashion-page .fd-hero-media video {
  display: block;
  width: 100%;
  height: auto;
  max-height: 82vh;
  background: var(--fd-navy);
}

.fashion-page .fd-admission {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  background: linear-gradient(90deg, var(--fd-navy) 0%, var(--fd-navy-2) 100%);
  border-bottom: 3px solid var(--fd-accent);
}
.fashion-page .fd-admission .row { margin: 0; }
.fashion-page .fd-admission .blink {
  margin: 0;
  padding: 13px 16px;
  background: transparent;
  font-family: var(--fd-font);
  font-size: clamp(12px, 1.3vw, 15px);
  font-weight: 700;
  letter-spacing: .2em;
  line-height: 1.4;
  color: #fff;
}

.fashion-page .fd-title {
  padding: clamp(22px, 3.4vw, 44px) 16px clamp(8px, 1.4vw, 16px);
  background: linear-gradient(180deg, var(--fd-warm) 0%, #fff 100%);
}
.fashion-page .fd-title img { margin-top: 0 !important; }

/* -------------------------------------------------------------- overview -- */
.fashion-page .fd-overview { padding-top: clamp(18px, 2.6vw, 32px); padding-bottom: 8px; }
.fashion-page .fd-overview > .row {
  display: flex; flex-wrap: wrap; align-items: flex-start;
}
.fashion-page .fd-overview > .row::before,
.fashion-page .fd-overview > .row::after { display: none; }
.fashion-page .fd-overview .col-md-8 { float: none; }
.fashion-page .fd-overview .col-md-4 { float: none; margin-top: 0 !important; }

.fashion-page .fd-overview h4 {
  margin: 0 0 14px;
  font-family: var(--fd-font);
  font-size: clamp(11px, 1vw, 13px);
  font-weight: 700 !important;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--fd-accent-d) !important;
}
.fashion-page .fd-overview p {
  margin: 0 0 6px;
  font-family: var(--fd-font);
  font-size: 15.5px !important;
  line-height: 1.7;
  color: var(--fd-text) !important;
  text-align: left;
}
.fashion-page .fd-overview p b i {
  display: inline-block;
  margin-bottom: 8px;
  padding-left: 14px;
  border-left: 3px solid var(--fd-accent);
  font-size: 17px;
  font-weight: 500;
  color: var(--fd-navy);
}
.fashion-page .fd-overview > .row > .col-md-8 > br { display: none; }

/* Buttons. Labels, links and the <a><button> nesting are untouched. */
.fashion-page .fd-overview .button_container {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 10px 12px;
  padding-left: 0;
  margin-top: 18px;
}
.fashion-page .fd-overview .button_container + .button_container { margin-top: 12px; }
.fashion-page .fd-overview .button_container a {
  display: inline-flex;
  background: transparent;
  text-decoration: none;
}
.fashion-page .fd-overview .button_container .brown_button,
.fashion-page .fd-overview .button_container .blue_button {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  margin-top: 0;
  padding: 12px 22px !important;
  border: 1px solid transparent;
  border-radius: 6px;
  font-family: var(--fd-font);
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.fashion-page .fd-overview .button_container .brown_button {
  background: var(--fd-accent);
  color: #fff;
  box-shadow: 0 6px 18px rgba(221,88,3,.26);
}
.fashion-page .fd-overview .button_container a:hover .brown_button,
.fashion-page .fd-overview .button_container .brown_button:focus-visible {
  background: var(--fd-amber);
  color: var(--fd-navy);
  transform: translateY(-2px);
}
.fashion-page .fd-overview .button_container .blue_button {
  background: #fff;
  border-color: var(--fd-border);
  color: var(--fd-navy);
  font-size: 13.5px;
  padding: 10px 16px !important;
}
.fashion-page .fd-overview .button_container a:hover .blue_button,
.fashion-page .fd-overview .button_container .blue_button:focus-visible {
  background: var(--fd-cool);
  border-color: #ccd5e3;
  transform: translateY(-2px);
}
.fashion-page .fd-overview .button_container button:focus-visible,
.fashion-page .fd-overview .button_container a:focus-visible {
  outline: 3px solid rgba(232,137,31,.55);
  outline-offset: 2px;
}

/* YouTube slider. Its script moves it in fixed 360px steps, so its box stays
   360px wide; the column only frames it. */
.fashion-page .fd-overview .youtube_video_player {
  display: flex; justify-content: center;
  padding-top: 6px;
}
.fashion-page .fd-overview .slider-wrapper {
  border-radius: var(--fd-radius);
  background: var(--fd-navy);
  box-shadow: var(--fd-shadow-hi);
}

/* Files where the right column only holds a commented-out iframe: the text
   takes the full row instead of leaving an empty third. */
.fashion-page .fd-overview--solo .col-md-4 { display: none; }
.fashion-page .fd-overview--solo .col-md-8 { width: 100%; }
.fashion-page .fd-overview--solo p { max-width: 78ch; }

/* ---------------------------------------------------- duration / eligibility */
.fashion-page .fd-facts { padding-top: 22px; }
.fashion-page .fd-facts .col-md-8 { float: none; width: 100%; }
.fashion-page .fd-facts h5 {
  margin: 0;
  padding: 18px 22px;
  border-left: 4px solid var(--fd-accent);
  border-radius: var(--fd-radius);
  background: var(--fd-surface);
  box-shadow: var(--fd-shadow);
  font-family: var(--fd-font);
  font-size: clamp(13px, 1.2vw, 15px);
  font-weight: 600 !important;
  line-height: 1.65;
  letter-spacing: .02em;
  color: var(--fd-navy) !important;
}

/* ------------------------------------------------------ course description */
.fashion-page .fd-desc { padding-top: var(--fd-section); }
.fashion-page .fd-desc img { margin-top: 0 !important; }
.fashion-page .fd-desc > .row > div[style] {
  margin: 20px 0 0 !important;
  text-align: left !important;
}
.fashion-page .fd-desc p:empty { display: none; }
.fashion-page .fd-desc ul {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  gap: 14px;
  margin: 0;
  padding: 0 15px;
  list-style: none !important;
}
.fashion-page .fd-desc li {
  position: relative;
  padding: 18px 20px 18px 48px;
  border-radius: var(--fd-radius);
  background: var(--fd-surface);
  box-shadow: var(--fd-shadow);
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--fd-text);
}
.fashion-page .fd-desc li::before {
  content: "";
  position: absolute; left: 20px; top: 24px;
  width: 14px; height: 8px;
  border-left: 2.5px solid var(--fd-accent);
  border-bottom: 2.5px solid var(--fd-accent);
  transform: rotate(-45deg);
}
.fashion-page .fd-desc li b { color: var(--fd-navy); font-weight: 600; }

/* ------------------------------------------------------------ curriculum -- */
.fashion-page .fd-curr-head { padding-top: var(--fd-section); }
.fashion-page .fd-curr-head img { margin-top: 0 !important; }

/* The inline studio photograph stays; a navy wash on top turns it into
   texture so the white semester cards stay crisp. */
.fashion-page .fd-curriculum {
  position: relative;
  isolation: isolate;
  margin-top: 22px !important;
  padding: clamp(24px, 4vw, 56px) clamp(12px, 3vw, 40px) !important;
}
.fashion-page .fd-curriculum::before {
  content: "";
  position: absolute; inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(20,36,61,.82) 0%, rgba(23,60,113,.74) 100%);
}
.fashion-page .fd-curriculum > .row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: var(--fd-gap);
  max-width: 1200px;
  margin: 0 auto;
  align-items: stretch;
}
.fashion-page .fd-curriculum > .row::before,
.fashion-page .fd-curriculum > .row::after { display: none; }

.fashion-page .fd-curriculum div#content {
  display: block;
  width: auto;
  margin: 0;
  padding: 22px 22px 20px;
  border-top: 3px solid var(--fd-accent);
  border-radius: var(--fd-radius);
  background: var(--fd-surface);
  box-shadow: var(--fd-shadow-hi);
  text-align: left;
  transition: transform .25s ease, box-shadow .25s ease;
}
.fashion-page .fd-curriculum div#content:hover { transform: translateY(-2px); }
.fashion-page .fd-curriculum div#content ul {
  margin: 0; padding: 0; list-style: none;
}
.fashion-page .fd-curriculum div#content ul > br,
.fashion-page .fd-curriculum div#content li br { display: none; }

/* First item of each list is the semester name. */
.fashion-page .fd-curriculum div#content li:first-child {
  margin: 0 0 14px;
  padding: 0 0 12px;
  border-bottom: 1px solid var(--fd-border);
  font-size: 12px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--fd-accent-d) !important;
}
.fashion-page .fd-curriculum div#content li:first-child::before { content: none; }

.fashion-page .fd-curriculum div#content li {
  position: relative;
  margin: 12px 0 2px;
  padding-left: 15px;
  font-size: 15px;
  line-height: 1.45;
  color: var(--fd-navy) !important;
}
.fashion-page .fd-curriculum div#content li b { font-weight: 700; }
.fashion-page .fd-curriculum div#content li::before {
  content: "";
  position: absolute; left: 0; top: 8px;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--fd-accent);
}
.fashion-page .fd-curriculum div#content ul > span {
  display: block;
  padding-left: 15px;
  font-size: 13.5px !important;
  line-height: 1.5;
  color: var(--fd-text) !important;
}

/* ------------------------------------------ career path / industries / software */
.fashion-page .fd-outcomes {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: var(--fd-gap);
  width: min(1200px, 100%);
  margin: var(--fd-section) auto 0 !important;
  padding: 0 16px;
}
.fashion-page .fd-outcomes .flexbox {
  width: auto;
  margin: 0;
  padding: 24px 24px 22px;
  border: 0;
  border-top: 3px solid var(--fd-accent);
  border-radius: var(--fd-radius);
  background: var(--fd-surface);
  background-image: none;
  box-shadow: var(--fd-shadow);
  opacity: 1;
  color: var(--fd-text);
  font-size: 14.5px;
  text-align: left;
  transition: transform .25s ease, box-shadow .25s ease;
}
.fashion-page .fd-outcomes .flexbox:hover,
.fashion-page .fd-outcomes .flexbox:focus-within {
  transform: translateY(-2px);
  border: 0;
  border-top: 3px solid var(--fd-accent);
  background-image: none;
  box-shadow: var(--fd-shadow-hi);
  color: var(--fd-text);
}
.fashion-page .fd-outcomes .flexbox > br { display: none; }
.fashion-page .fd-outcomes ul { margin: 0; padding: 0; list-style: none; }
.fashion-page .fd-outcomes ul > br { display: none; }
.fashion-page .fd-outcomes center {
  display: block;
  margin: 0 0 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--fd-border);
  text-align: left;
  font-size: 13px;
  letter-spacing: .18em;
  color: var(--fd-accent-d);
}
.fashion-page .fd-outcomes li {
  position: relative;
  margin-bottom: 10px;
  padding-left: 26px;
  line-height: 1.5;
  color: var(--fd-text);
}
.fashion-page .fd-outcomes li:last-child { margin-bottom: 0; }
.fashion-page .fd-outcomes li::before {
  content: "";
  position: absolute; left: 1px; top: 5px;
  width: 12px; height: 7px;
  border-left: 2px solid var(--fd-accent);
  border-bottom: 2px solid var(--fd-accent);
  transform: rotate(-45deg);
}

/* ------------------------------------------------------------ recruiters -- */
.fashion-page .fd-recruiters {
  position: relative;
  isolation: isolate;
  height: auto !important;
  min-height: 0;
  margin-top: var(--fd-section) !important;
  margin-bottom: 0 !important;
  padding: clamp(26px, 4vw, 48px) 0 !important;
  overflow: hidden;
}
.fashion-page .fd-recruiters::before {
  content: "";
  position: absolute; inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(20,36,61,.78) 0%, rgba(20,36,61,.86) 100%);
}
.fashion-page .fd-recruiters .row { margin: 0; }
.fashion-page .fd-recruiters h3 {
  margin: 0 0 18px;
  padding: 0 16px;
  font-family: var(--fd-font);
  font-size: clamp(22px, 2.6vw, 34px);
  font-weight: 400;
  letter-spacing: -.01em;
  line-height: 1.2;
}
.fashion-page .fd-recruiters h3 u { text-decoration: none; }
.fashion-page .fd-recruiters h3 b { font-weight: 500; }
.fashion-page .fd-recruiters h3::after {
  content: "";
  display: block;
  width: 56px; height: 3px;
  margin: 14px auto 0;
  border-radius: 2px;
  background: var(--fd-accent);
}
.fashion-page .fd-recruiters marquee { display: block; white-space: nowrap; }
.fashion-page .fd-recruiters marquee > br { display: none; }
.fashion-page .fd-recruiters .column1 {
  display: inline-block;
  margin: 0 8px;
  padding: 10px;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 6px 16px -10px rgba(0,0,0,.5);
  vertical-align: middle;
  line-height: 0;
}
.fashion-page .fd-recruiters .column1 img {
  width: 150px;
  height: 100px;
  object-fit: contain;
}

/* --------------------------------------------------------------- reviews -- */
.fashion-page .fd-reviews {
  padding-top: var(--fd-section);
  padding-bottom: var(--fd-section);
}

/* ------------------------------------------------------------ responsive -- */
@media (max-width: 991px) {
  .fashion-page .fd-overview .col-md-8,
  .fashion-page .fd-overview .col-md-4 { width: 100%; }
  .fashion-page .fd-overview .youtube_video_player { padding-top: 24px; }
}

@media (max-width: 767px) {
  .fashion-page .fd-hero-media video { max-height: none; }
  .fashion-page .fd-overview p { font-size: 15px !important; }
  .fashion-page .fd-overview .button_container .brown_button { padding: 11px 18px !important; font-size: 14px; }
  .fashion-page .fd-overview .button_container .blue_button { padding: 9px 13px !important; font-size: 12.5px; }
  .fashion-page .fd-facts h5 { padding: 15px 16px; }
  .fashion-page .fd-desc ul { padding: 0; }
  .fashion-page .fd-desc li { padding: 15px 16px 15px 42px; font-size: 14px; }
  .fashion-page .fd-desc li::before { left: 16px; top: 21px; }
  .fashion-page .fd-curriculum div#content { padding: 18px 16px; }
  .fashion-page .fd-outcomes { padding: 0 15px; }
  .fashion-page .fd-outcomes .flexbox { padding: 18px 16px; }
  .fashion-page .fd-recruiters .column1 { margin: 0 5px; padding: 6px; }
  .fashion-page .fd-recruiters .column1 img { width: 120px; height: 80px; }
}

/* Under 400px the fixed 360px slider no longer fits beside the gutters, so the
   whole box is scaled down as one piece. Its internal 360px steps still line
   up, and the negative margin gives back the space the scale frees. */
@media (max-width: 399px) {
  .fashion-page .fd-overview .slider-wrapper {
    transform: scale(.88);
    transform-origin: top center;
    margin-bottom: -31px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .fashion-page .fd-overview .button_container button,
  .fashion-page .fd-curriculum div#content,
  .fashion-page .fd-outcomes .flexbox { transition: none; }
  .fashion-page .fd-overview .button_container a:hover button,
  .fashion-page .fd-curriculum div#content:hover,
  .fashion-page .fd-outcomes .flexbox:hover { transform: none; }
}