/* ============================================
   CSS Variables
   ============================================ */
:root {
  --primary-blue: #004975;
  --accent-blue: #007bff;
  --accent-gold: #cba135;
  --accent-lime: #b9b632;
  --accent-olive: #b4bd67;
  --card-blue: #0066cc;
  --card-teal: #004d66;
  --card-olive: #aeb575;
  --bg-light: #f8f9fa;
  --text-dark: #1a1a1a;
  --text-gray: #555;
  --white: #ffffff;
}

/* ============================================
   Global / Base (mobile first)
   ============================================ */
* { font-family: 'Inter', sans-serif; }
body { color: var(--text-dark); line-height: 1.6; }

.custom-header { padding: 20px 0; position: absolute; width: 100%; z-index: 1000; }
.section-gray-bg { background: #f7f7f7; }
.logo { background-color: var(--primary-blue); color: var(--white); font-weight: bold; padding: 5px 10px; border-radius: 2px; font-size: 1.2rem; text-decoration: none; display: inline-block; }
.uk-navbar-nav>li>a { color: var(--primary-blue) !important; font-weight: 600; font-size: 0.9rem; }
.uk-navbar-nav>li.uk-active>a { font-weight: 700;}
/* Section */
.section-title { margin-top: 2rem; font-size: 1.6rem; color: var(--primary-blue); font-weight: 800; margin-bottom: 2rem; word-break: break-word; }
.section-light-bg { background: linear-gradient(to right, transparent 0%, transparent 25%, rgba(0,78,138,0.15) 25.1%, transparent 25.2%, transparent 50%, rgba(0,78,138,0.15) 50.1%, transparent 50.2%, transparent 75%, rgba(0,78,138,0.15) 75.1%, transparent 75.2%, transparent 100%); }
.section-light-news { background: linear-gradient(to right, transparent 25%, rgba(0,78,138,0.15) 25.1%, transparent 25.2%, transparent 50%, rgba(0,78,138,0.15) 50.1%, transparent 50.2%, transparent 75%, rgba(0,78,138,0.15) 75.1%, transparent 75.2%, transparent 100%), linear-gradient(165deg, rgba(252,252,252,1) 74%, rgba(112,172,255,1) 100%); }

/* Banner */
.banner-section { position: relative; padding: 6rem 0 5rem; overflow: hidden; background: linear-gradient(to right, transparent 25%, rgba(0,78,138,0.15) 25.1%, transparent 25.2%, transparent 50%, rgba(0,78,138,0.15) 50.1%, transparent 50.2%, transparent 75%, rgba(0,78,138,0.15) 75.1%, transparent 75.2%, transparent 100%), radial-gradient(ellipse at left center, rgb(31,116,235) 3%, rgba(255,255,255,1) 70%) left / 50% 100% no-repeat, linear-gradient(42deg, rgba(255,255,255,1) 95%, rgba(90,159,255,1) 100%) right / 50% 100% no-repeat; }
.banner-title { font-size: 2.4rem; font-weight: 800; line-height: 1; margin-bottom: 20px; color: var(--primary-blue); transition: transform 0.15s ease, text-shadow 0.15s ease; position: absolute; padding-left: 5%; }
.highlight-gold { color: var(--accent-lime); padding-left: 0.5rem; }
.highlight-blue { color: var(--accent-blue); }
.banner-grid { width: 90%; margin: 0 auto; padding-top: 4rem; display: grid; grid-template-columns: 1fr; }
.banner-col-left { width: 100%; }
.banner-col-right { width: 100%; display: flex; flex-direction: column; gap: 0.75rem; padding-left: 0; }
.banner-img-wrapper-top { width: 100%; display: flex; justify-content: center; padding-top: 5rem; }
.banner-img-1 { width: 100%; height: auto; }
.banner-desc-1 { padding-top: 2rem; color: #4a4a4a; font-size: 1rem; }
.banner-img-wrapper-right-top { display: flex; justify-content: center; padding-top: 2rem; width: 100%; }
.banner-img-2 { height: auto; width: 100%; max-width: 22rem; }
.banner-img-wrapper-right-botton { display: flex; justify-content: center; padding-top: 1.5rem; }
.banner-img-3 { height: auto; width: 100%; max-width: 16rem; }
.banner-desc-2 { padding-top: 2rem; color: #4a4a4a; font-size: 1rem; }

/* Banner Studium */
.banner-studium-section { position: relative; padding: 4rem 0; overflow: hidden; background: linear-gradient(to right, transparent 25%, rgba(0,78,138,0.15) 25.1%, transparent 25.2%, transparent 50%, rgba(0,78,138,0.15) 50.1%, transparent 50.2%, transparent 75%, rgba(0,78,138,0.15) 75.1%, transparent 75.2%, transparent 100%), radial-gradient(ellipse at left center, rgb(31,116,235) 3%, rgba(255,255,255,1) 80%) left / 50% 100% no-repeat, linear-gradient(135deg, rgba(255,255,255,1) 80%, rgba(90,159,255,1) 100%) right / 50% 100% no-repeat; }
.banner-studium-title { padding-top: 2rem; font-size: 1.5rem; font-weight: 800; color: #004976; margin-top: -2rem; margin-bottom: 1.5rem; padding-left: 1rem; white-space: normal; }
.banner-studium-grid { text-align: center; justify-content: center; width: min(65rem, 100vw); margin: 2rem auto 0; padding: 0 1rem; display: grid; grid-template-columns: none; font-size: 1rem; }
.box { width: 100%;     justify-content: center; align-items: center; padding: clamp(1rem, 3vw, 2.4rem); border-radius: clamp(18px, 2vw, 24px); color: white; font-weight: 800; font-size: clamp(0.9rem, 2.5vw, 1.92rem); }
.box-left { height: clamp(8rem, 20vw, 18rem); display: flex; padding-right: clamp(1rem, 8vw, 6.6rem); line-height: 2rem; }
.box-center-top {  height: clamp(10rem, 22vw, 17rem); display: flex; margin-top: 2rem; line-height: 2rem; }
.box-center-bottom { height: clamp(7rem, 18vw, 14.5rem); display: flex; padding-top: clamp(1rem, 2.5vw, 2.4rem); margin-top: 2rem; line-height: 2rem; }
.box-right { height: clamp(7rem, 16vw, 12.2rem); display: flex; justify-content: center; margin-top: 2rem; line-height: 2rem; }
.right-study-quote { color: var(--primary-blue); padding-bottom: 2rem; margin-top: -0.5rem; margin-bottom: 0.5rem; font-weight: 800; font-size: 0.85rem; }
.grid-study { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
.column { line-height: 1.7; font-size: 0.9rem; padding-left: 1.5rem; padding-right: 1.5rem; }
.left-2rem { padding-left: 2rem; }

/* What Will Learn */
.what-will-learn-bg { background: linear-gradient(to right, transparent 25%, rgba(0,78,138,0.15) 25.1%, transparent 25.2%, transparent 50%, rgba(0,78,138,0.15) 50.1%, transparent 50.2%, transparent 75%, rgba(0,78,138,0.15) 75.1%, transparent 75.2%, transparent 100%), linear-gradient(397deg, rgba(255,255,255,1) 92%, rgba(166,199,245,1) 100%); }
.content-section { width: 100%; max-width: 100%; margin: 0 auto; display: flex; flex-direction: column; gap: 1.5rem; padding-top: 1rem; padding-bottom: 3rem; }
.what-will-learn-quote { color: var(--primary-blue); padding-bottom: 2rem; margin-top: -10px; font-weight: 600; }
.grid-what-will-learn { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
.grid-what-will-learn::after { content: ""; left: 50%; top: 0; bottom: 0; width: 1px; background: #d9d9d9; }
.content-item { width: 100%; font-size: 0.9rem; padding-left: 1.5rem; padding-right: 1.5rem; padding-bottom: 2rem; }

/* Topic Cards */
.topic-card { min-height: 150px; min-width: 260px; padding: 10px; color: var(--white); display: grid; align-items: center; text-align: center; font-weight: bold; font-size: 1rem; border-radius: 4px !important; transition: transform 0.3s; cursor: pointer; }
.topic-card:hover { transform: translateY(-5px); }
.topic-card-parent>ul>li { padding: 20px !important; }

/* News Cards */
.news-card { background: var(--white); width: 80% !important; padding: 16px; border-radius: 4px; min-height: 200px; min-width: 280px; display: flex; flex-direction: column; justify-content: space-between; border: 1px solid #ededed; }
.news-title { color: var(--primary-blue); font-weight: 700; margin-bottom: 10px; }
.read-more { margin-top: auto; }
.read-more a { color: #b5bd67; font-size: 0.8rem; font-weight: bold; text-decoration: none; }
.read-more a:hover { text-decoration: underline; }

/* Social Cards */
.social-card { background: var(--white); border-radius: 8px; overflow: hidden; display: flex; flex-direction: column; padding: 15px; min-height: 26rem; }
.social-header { padding: 15px; display: flex; align-items: flex-start; gap: 10px; }
.social-header i { margin-top: 2px; }
.social-header-info { display: flex; flex-direction: column; gap: 2px; }
.social-name { font-weight: 600; color: #1a1a1a; }
.social-time { color: #888; font-size: 12px; }
.social-logo { background: #004e8a; border-radius: 25px; width: 46px; height: 45px; text-align: center; font-size: 1.6rem; color: white; padding-top: 2px; }
.social-linkedin { color: #0077b5; }
.social-linkedin a { width: 25px; height: 25px; }
.social-img { width: 100%; height: 180px; object-fit: cover; cursor: pointer; }
.social-content { padding: 15px 5px; font-size: 0.9rem; flex-grow: 1; }
.social-footer { padding: 10px 15px; border-top: 1px solid #eee; display: flex; gap: 15px; color: #888; font-size: 0.8rem; justify-content: space-between; }
.link-linked-in { text-align: right; color: var(--accent-lime); font-size: 14px; padding-top: 1.5rem; }

/* Person Cards */
.person-card { background: var(--white); padding: 16px; border-radius: 6px; display: flex; flex-direction: column; gap: 10px; transition: background 0.5s ease, color 0.5s ease; cursor: pointer; border: 1px solid #ededed; min-height: 220px; box-shadow: 0 10px 16px rgba(0,0,0,.08); text-align: center; align-items: center; }
.person-card:hover { background: var(--accent-olive); transform: translateY(-3px); }
.person-card>div:last-child { display: flex; align-items: center; gap: 15px; width: 100%; flex-direction: column; }
.uk-grid>div { display: flex; height: 100%; justify-content: center; }
.uk-grid>*>:last-child { margin-bottom: 0; margin: auto; }
.person-card-quote { font-size: 0.9rem; line-height: 1.5; color: black; flex-shrink: 0; text-align: center; }
.person-info-card { margin-top: auto; }
.person-avatar { width: 60px; height: 60px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.person-info h5 { font-weight: 500; color: #004975; }
.person-info h5, .person-info p { margin: 0; transition: color 0.3s ease; text-align: center; }
.person-info p { margin-top: 3px; font-size: 12px; opacity: 0.8; }
.person-card:hover .person-card-quote, .person-card:hover .person-info h5, .person-card:hover .person-info p { color: var(--white); }

/* Quote / Testimonial */
.no-grid-padding { padding-left: 0; }
.team-grid-quote { justify-content: center; }
.uk-quote { width: 100% !important; }
.uk-quote .uk-grid-column-large>*, .uk-quote .uk-grid-large>* { padding-left: 0; }
.person-card-box { width: 300px !important; }
.quote-box { font-size: 1rem; color: #333; margin: 0 auto; text-align: center; }
.quote-author { display: block; margin-top: 15px; font-size: 1.1rem; color: var(--primary-blue); font-weight: bold; font-style: normal; text-align: center; }
.quote-author-company { display: block; font-size: 0.8rem; color: #666; font-style: normal; text-align: center; }
.uk-profile-img { padding-left: 0 !important; padding-right: 0 !important; }
.profile-img { width: 120px !important; height: 120px !important; border-radius: 50%; object-fit: cover; border: 5px solid var(--white); transition: transform 0.5s ease; cursor: pointer; }
.profile-img:hover { transform: translateY(-5px); }

/* Nav Buttons */
.nav-btn { position: absolute; top: 50%; transform: translateY(-50%); width: 38px; height: 38px; background: transparent; color: var(--accent-olive); border: none; cursor: pointer; z-index: 10; display: flex; align-items: center; justify-content: center; transition: all 0.3s ease; }
.nav-btn:hover { color: #b2bd56; opacity: 1; transform: translateY(-50%) scale(1.5); background: transparent !important; }
.nav-btn i { font-size: 16px; }
.nav-prev { left: -40px; }
.nav-next { right: -36px; }

/* UIkit Slider */
.uk-slider-nav { align-items: center; }
.uk-slider-nav>* { background-color: transparent; }
.uk-slider-nav>.uk-active { transform: scale(1.2); }
.uk-dotnav>.uk-active>* { background-color: var(--white); border: var(--accent-olive) solid 3px; width: 0.7rem; height: 0.7rem; }
.uk-dotnav li a { padding-top: 3px; background-color: #9a9a9a; width: 0.5rem; height: 0.5rem; }
.team-grid { padding-left: 10px; }


/* ============================================
   min-width: 480px
   ============================================ */
@media (min-width: 480px) {
  .section-title { font-size: 2rem; margin-bottom: 3rem; }
  .column { padding-left: 2rem; padding-right: 2rem; }
  .content-item { padding-left: 2rem; padding-right: 2rem; padding-bottom: 3rem; }
  .profile-img { width: 150px !important; height: 150px !important; }
}

@media (min-width: 540px) {
  .banner-title { font-size: 3rem; padding-left: 8%; }
  .banner-studium-grid { grid-template-columns: 1.6fr 1.2fr 0.8fr; padding: 0 0.5rem; margin-top: 8rem; }
  .box{justify-content: left; align-items: start; text-align: left;}
  .box-left {width:  clamp(15rem, 16vw, 18rem); margin-left: 1rem;    height: clamp(8rem, 50vw, 10rem);}
  .box-center-top { width: clamp(12rem, 15vw, 18rem); margin-left: 1rem; }
  .box-center-bottom { width: clamp(12rem, 15vw, 18rem); margin-left: 1rem; margin-top: 1rem;}
  .box-right { margin-top: clamp(9rem, 15vw, 20rem); margin-left: 0.5rem; width: clamp(5rem, 8vw, 10rem);}
}

/* ============================================
   min-width: 640px
   ============================================ */
@media (min-width: 640px) {
  .banner-title { font-size: 3.5rem; padding-left: 10%; }
  .link-linked-in { padding-top: 0; }
  .person-card { text-align: left; align-items: flex-start; height: 260px; padding: 20px; }
  .person-card>div:last-child { flex-direction: row; }
  .person-card-quote { text-align: left; }
  .person-info h5, .person-info p { text-align: left; }
  .nav-btn { width: 45px; height: 45px; }
  .nav-btn i { font-size: 18px; }
  .nav-prev { left: -55px; }
  .nav-next { right: -55px; }

  .banner-studium-title { font-size: 1.7rem; }
  .box{ justify-content: left; align-items: start; text-align: left;}
  .box-left { width:  clamp(16rem, 18vw, 20rem); margin-left: 1rem; margin-top: 2rem;}
  .box-center-top { width: clamp(16rem, 18vw, 20rem); margin-left: 1rem; }
  .box-center-bottom { width: clamp(16rem, 18vw, 20rem); margin-left: 1rem; margin-top: 1rem;}
  .box-right { margin-top: clamp(10rem, 12vw, 14rem); margin-left: 1rem; width: clamp(8rem, 10vw, 12rem);}
}


/* ============================================
   min-width: 768px
   ============================================ */
@media (min-width: 768px) {
  .uk-navbar-nav { gap: 15px ; }
  .uk-section { padding-top: 2rem; padding-bottom: 4rem; }
  .section-title { font-size: 2.5rem; margin-bottom: 4rem; }

  .banner-section { padding: 8rem 0; background: linear-gradient(to right, transparent 25%, rgba(0,78,138,0.15) 25.1%, transparent 25.2%, transparent 50%, rgba(0,78,138,0.15) 50.1%, transparent 50.2%, transparent 75%, rgba(0,78,138,0.15) 75.1%, transparent 75.2%, transparent 100%), radial-gradient(ellipse at left center, rgb(31,116,235) 3%, rgba(255,255,255,1) 70%) left / 50% 100% no-repeat, linear-gradient(42deg, rgba(255,255,255,1) 90%, rgba(90,159,255,1) 100%) right / 50% 100% no-repeat; }
  .banner-title { font-size: 4.5rem; padding-left: 12%; margin-bottom: 30px; }
  .banner-grid { width: 85%; padding-top: 5rem; grid-template-columns: 1fr 1fr; }
  .banner-col-right { width: 105%; padding-left: 1rem; }
  .banner-img-wrapper-top { justify-content: flex-end; padding-top: 8rem; }
  .banner-img-1 { width: 22rem; height: 16rem; }
  .banner-desc-1 { padding-top: 3rem; font-size: 1.1rem; }
  .banner-img-wrapper-right-top { justify-content: flex-end; padding-left: 1rem; padding-top: 0; }
  .banner-img-2 { height: 18rem; width: 20rem; }
  .banner-img-wrapper-right-botton { display: block; }
  .banner-img-3 { height: 20rem; width: 14rem; }
  .banner-desc-2 { padding-top: 2.5rem; font-size: 1.1rem; }

  .banner-studium-section { padding: 6rem 0; }
  .banner-studium-title { font-size: 1.9rem; padding-left: 2rem; margin-top: 0rem; white-space: nowrap; }
  .banner-studium-grid {  grid-template-columns: 1fr 1fr 1fr; margin-left: 1rem; font-size: clamp(0.96rem, 2.09vw, 1.2rem); margin-top: 6rem; }
  .banner-studium-title { font-size: 2rem; margin-top: -1rem; padding-top: 0rem;}
  .box{ justify-content: left; align-items: start; text-align: left; font-size: clamp(1rem, 50vw, 1.5rem);}
  .box-left { width:  clamp(18rem, 23vw, 26rem); margin-left: 1rem; margin-top: 2rem; height: clamp(10rem, 50vw, 12rem);}
  .box-center-top { width: clamp(16rem, 18vw, 20rem); margin-left: 1rem; height: clamp(11rem, 50vw, 12rem);}
  .box-center-bottom { width: clamp(16rem, 18vw, 20rem); margin-left: 1rem; margin-top: 1rem; height: clamp(9rem, 50vw, 10rem);}
  .box-right { margin-top: clamp(10rem, 15vw, 11rem); transform: translateX(clamp(-2.5rem, 50vw, -0.5rem)); }
  .grid-study { grid-template-columns: 1fr 1fr; gap: 2rem; }
  .column { padding-left: 3rem; padding-right: 2rem; }
  .left-2rem { padding-left: 5rem; }

  .content-section { max-width: 900px; padding-top: 1.5rem; padding-bottom: 4rem; }
  .what-will-learn-quote { padding-bottom: 3rem; }
  .grid-what-will-learn { grid-template-columns: 1fr 1fr; gap: 2rem; }
  .content-item { padding-left: 6rem; padding-right: 6rem; padding-bottom: 4rem; }

  .topic-card { min-height: 180px; min-width: 300px; font-size: 1.1rem; }
  .news-card { padding: 20px; min-height: 220px; min-width: 300px; }
  .social-card { min-height: 28rem; }

  .uk-quote { width: 90% !important; }
  .quote-box { font-size: 1.1rem; text-align: left; }
  .uk-profile-img { padding-right: 1rem !important; }
  .profile-img { width: 180px !important; height: 180px !important; }
}


/* ============================================
   min-width: 1024px
   ============================================ */
@media (min-width: 1024px) {
  .uk-navbar-nav { gap: 30px ; }
  .banner-section { background: linear-gradient(to right, transparent 25%, rgba(0,78,138,0.15) 25.1%, transparent 25.2%, transparent 50%, rgba(0,78,138,0.15) 50.1%, transparent 50.2%, transparent 75%, rgba(0,78,138,0.15) 75.1%, transparent 75.2%, transparent 100%), radial-gradient(ellipse at left center, rgb(31,116,235) 3%, rgba(255,255,255,1) 70%) left / 50% 100% no-repeat, linear-gradient(42deg, rgba(255,255,255,1) 85%, rgba(90,159,255,1) 100%) right / 50% 100% no-repeat; }
  .banner-title { font-size: 5.5rem; padding-left: 13%; }
  .highlight-gold { padding-left: 0; }
  .banner-grid { width: 75%; padding-top: 6rem; }
  .banner-col-right { width: 108%; padding-left: 1.5rem; }
  .banner-img-wrapper-top { padding-top: 10rem; }
  .banner-img-1 { width: 24rem; height: 18rem; }
  .banner-desc-1 { padding-top: 4rem; }
  .banner-img-2 { height: 20rem; width: 22rem; }
  .banner-img-3 { height: 22rem; width: 16rem; }

  .banner-studium-title { font-size: 2.4rem; padding-left: 3rem; margin-top: clamp(-2rem, 3vw, -4rem); margin-bottom: clamp(1.5rem, 2.5vw, 2.5rem); white-space: nowrap; }
  .banner-studium-grid { grid-template-columns: 1.2fr 1fr 0.8fr; margin-left: clamp(3rem, 50vw, 6rem); font-size: clamp(0.96rem, 2.09vw, 1.44rem); }
  .box{ justify-content: left; align-items: start; text-align: left; font-size: clamp(1.2rem, 50vw, 1.5rem);}
  .box-left { margin-left: 3rem; width: clamp(22rem, 23vw, 26rem);}
  .box-center-top { width: clamp(16rem, 18vw, 20rem); margin-left: 1rem; }
  .box-center-bottom { width: clamp(16rem, 18vw, 20rem); margin-left: 1rem; margin-top: 1rem;}
  .box-right { margin-top: clamp(8rem, 11vw, 12rem); transform: translateX(clamp(-5rem, 5.26vw, -4rem)); width: clamp(10rem, 50vw, 12rem);}
  .column { padding-left: 4rem; padding-right: 3rem; }

  .content-section { max-width: 1000px; }
  .content-item { padding-left: 10rem; padding-right: 10rem; padding-bottom: 5rem; }

  .uk-profile-img { padding-right: 2rem !important; }
  .profile-img { width: 200px !important; height: 200px !important; }
  .team-grid { padding-left: 0; }
}


/* ============================================
   min-width: 1200px
   ============================================ */
@media (min-width: 1200px) {
  .section-title { font-size: 3rem; margin-bottom: 2rem; }

  .banner-section { background: linear-gradient(to right, transparent 25%, rgba(0,78,138,0.15) 25.1%, transparent 25.2%, transparent 50%, rgba(0,78,138,0.15) 50.1%, transparent 50.2%, transparent 75%, rgba(0,78,138,0.15) 75.1%, transparent 75.2%, transparent 100%), radial-gradient(ellipse at left center, rgb(31,116,235) 3%, rgba(255,255,255,1) 70%) left / 50% 100% no-repeat, linear-gradient(42deg, rgba(255,255,255,1) 80%, rgba(90,159,255,1) 100%) right / 50% 100% no-repeat; }
  .banner-title { font-size: 6.5rem; padding-left: 14%; margin-bottom: 40px; }
  .banner-grid { width: 65%; padding-top: 7rem; }

  .banner-studium-grid { grid-template-columns: 1.2fr 1fr 0.7fr;margin-top:8rem; margin-left: clamp(3rem, 50vw, 11rem); font-size: clamp(0.96rem, 2.09vw, 1.44rem); }
  .box-left {
    margin-left: 4rem;
    width: clamp(22rem, 23vw, 26rem);
    height: clamp(10rem, 50vw, 17rem);
  }
  .box-right {
    margin-left: 2.2rem;
    height: clamp(10rem, 50vw, 11rem);
  }
  .box-center-top {
    margin-left: 2rem;
    height: clamp(11rem, 50vw, 13rem);
  }
  .box-center-bottom {
    margin-left: 2rem;
    height: clamp(9rem, 50vw, 11rem);
  }

  .right-study-quote { padding-bottom: 3rem; margin-top: -1rem; margin-bottom: 1rem; font-size: 0.9rem; }
  .grid-study { gap: 3rem; }
  .column { padding-left: 4rem; padding-right: 4rem; }

  .content-section { max-width: 1000px; padding-top: 0; padding-bottom: 0; }
  .grid-what-will-learn { gap: 3rem; }

  .topic-card { min-height: 200px; min-width: 330px; font-size: 1.2rem; }
  .topic-card-parent>ul>li { padding: 30px !important; }
  .news-card { min-height: 240px; min-width: 340px; }
  .social-card { min-height: 29.5rem; }

  .uk-quote { width: 85% !important; }
  .quote-box { font-size: 1.2rem; }
  .uk-profile-img { padding-right: 2rem !important; }
  .profile-img { width: 220px !important; height: 220px !important; }

  .uk-child-width-1-5\@l>* { width: 14%; }
  .footer-col { width: 20%; padding-left: 0; }
  .footer-col:nth-child(n+3) { padding-left: 5rem; }
}


/* ============================================
   min-width: 1500px
   ============================================ */
@media (min-width: 1500px) {
  .banner-section { padding: 10rem 0; background: linear-gradient(to right, transparent 25%, rgba(0,78,138,0.15) 25.1%, transparent 25.2%, transparent 50%, rgba(0,78,138,0.15) 50.1%, transparent 50.2%, transparent 75%, rgba(0,78,138,0.15) 75.1%, transparent 75.2%, transparent 100%), radial-gradient(ellipse at left center, rgb(31,116,235) 3%, rgba(255,255,255,1) 70%) left / 50% 100% no-repeat, linear-gradient(42deg, rgba(255,255,255,1) 70%, rgba(90,159,255,1) 100%) right / 50% 100% no-repeat; }
  .banner-title { font-size: 7rem; padding-left: 15%; margin-bottom: 50px; }
  .banner-grid { width: 60rem; padding-top: 7rem; }
  .banner-col-right { width: 110%; padding-left: 2rem; }
  .banner-img-wrapper-top { padding-top: 11rem; }
  .banner-img-1 { width: 27rem; height: 20rem; }
  .banner-desc-1 { padding-top: 5rem; font-size: 1.2rem; }
  .banner-img-wrapper-right-top { padding-left: 2rem; }
  .banner-img-2 { height: 22rem; width: 25rem; }
  .banner-img-3 { height: 25rem; width: 18rem; }
  .banner-desc-2 { padding-top: 3rem; font-size: 1.2rem; }

  .banner-studium-section { padding: clamp(4rem, 9vw, 10rem) 0; }
  .banner-studium-title { font-size: clamp(2rem, 2.5vw, 3rem); padding-left: 0; margin-top: clamp(1rem, -5vw, -8rem); margin-bottom: clamp(1.5rem, 2.5vw, 2.5rem); white-space: nowrap; }
  .banner-studium-grid { grid-template-columns: 1.2fr 1fr 0.8fr; margin: 2rem auto 0; padding: 0; font-size: clamp(0.96rem, 2.09vw, 1.44rem); }
  .box-left { width: clamp(17rem, 43.85vw, 24.5rem); height: clamp(10rem, 26.3vw, 18rem); padding-right: clamp(2.4rem, 14.03vw, 6.6rem); line-height: 2.5rem; margin-left: 0rem;}
  .box-center-top { width: clamp(13rem, 29.82vw, 18.5rem); height: clamp(12rem, 28.06vw, 17rem); transform: translateY(clamp(0rem, 5.26vw, 1rem)); margin-top: clamp(2rem, 5vw, 6rem); line-height: 2.5rem; }
  .box-center-bottom { width: clamp(13rem, 29.82vw, 18.5rem); height: clamp(9rem, 28.06vw, 14.5rem); padding-top: clamp(1.2rem, 3.5vw, 2.4rem); transform: translateY(clamp(1.6rem, 7.02vw, 1.8rem)); line-height: 2.5rem; }
  .box-right { width: clamp(8.4rem, 21.05vw, 14rem); height: clamp(8.4rem, 21.05vw, 12.2rem); margin-top: clamp(10rem, 50vw, 20rem); transform: translateX(clamp(-1.5rem, -8.77vw, -7rem)); line-height: 2.5rem; }

  .content-section { max-width: 1100px; }
  .content-item { padding-left: 18rem; padding-right: 18rem; padding-bottom: 5rem; }

  .uk-profile-img { padding-right: 6rem !important; }
  .profile-img { width: 23rem !important; height: 23rem !important; }
}


/* ============================================
   min-width: 1800px
   ============================================ */
@media (min-width: 1800px) {
  .banner-title { font-size: 8rem; padding-left: 18%; }
  .banner-grid { width: 72rem; }
  .banner-img-1 { width: 30rem; height: 22rem; }
  .banner-img-2 { height: 24rem; width: 27rem; }
  .banner-img-3 { height: 27rem; width: 20rem; }

  .banner-studium-section { padding: 8rem 0; }
  .banner-studium-title { font-size: 3rem; margin-bottom: 2rem; padding-left: 0; white-space: nowrap; }
  .banner-studium-grid { width: 65rem; margin: 2rem auto 0; padding: 0; font-size: 1.24rem; margin-top: 5rem;}
  .box-left          { width: 24.2rem; height: 18.5rem; padding-right: 3rem;   line-height: 2.2rem; }
  .box-center-top    { width: 18.9rem; height: 17.6rem; transform: translateY(0.86rem); margin-top: 5.2rem; line-height: 2.2rem; }
  .box-center-bottom { width: 18.9rem; height: 15.5rem; padding-top: 2.1rem;  transform: translateY(2.4rem); line-height: 2.2rem; }
  .box-right         { width: 15.1rem; height: 13.5rem; margin-top: 18rem;  transform: translateX(-1rem); line-height: 2.2rem; }

  .content-section { max-width: 1200px; }
  .profile-img { width: 25rem !important; height: 25rem !important; }
  .uk-profile-img { padding-right: 6.5rem !important; }
}


/* ============================================
   min-width: 2100px
   ============================================ */
@media (min-width: 2100px) {
  .banner-title { font-size: 9rem; padding-left: 20%; }
  .banner-grid { width: 85rem; }
  .banner-img-1 { width: 34rem; height: 25rem; }
  .banner-img-2 { height: 27rem; width: 30rem; }
  .banner-img-3 { height: 30rem; width: 22rem; }

  .banner-studium-section { padding: 12rem 0; }
  .banner-studium-title { font-size: 4.5rem;}
  .banner-studium-grid { width: 85rem; }
  .box { font-size: 2.8rem; line-height: 3rem;}
  .box-left   { width: 38rem;   height: 24rem;  padding-right: 5rem; }
  .box-center-top    { width: 22rem;   height: 19rem;  margin-top: 7rem; }
  .box-center-bottom { width: 22rem;   height: 16rem; }
  .box-right  { width: 16rem;   height: 14rem;  margin-top: 20rem; transform: translateX(-1rem); }

  .content-section { max-width: 1500px; }
  .content-item { padding-left: 22rem; padding-right: 22rem; }
  .profile-img { width: 29rem !important; height: 29rem !important; }
  .uk-profile-img { padding-right: 8rem !important; }
}