/* Measured reference proportions. Container units scale the compact desktop composition. */

.photograph {
  object-fit:cover;
  object-position:center;
  display:block;
}

.vector {
  overflow:visible;
}

.hero:after {
  background:rgba(13, 43, 59, .66);
}

.hero>.hero-photo {
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 60%;
}

.hero {
  height:52.46cqw;
}

.hero h1 {
  font-size:5.85cqw;
}

.hero-copy {
  padding:10cqw 4.65cqw 0;
}

.hero p {
  font-size:3.12cqw;
  margin:1.4cqw 0 3.8cqw;
}

.hero .btn {
  border-radius:2.6cqw;
  padding:1.6cqw 3.4cqw;
}

.hero .btn>span,.course-card .btn>span,.register-banner .btn>span {
  order:2;
}

.popular {
  height:52.73cqw;
  padding:5.46cqw 2.73cqw;
}

.popular h2 {
  font-size:3.55cqw;
  line-height:1.54;
  margin:0 0 2.46cqw;
}

.home-courses {
  gap:3cqw;
}

.home-card {
  height:33.88cqw;
  padding:3.8cqw 1cqw 3.1cqw;
  border-radius:1.6cqw;
}

.home-card .art {
  width:8cqw;
  height:8cqw;
  margin-bottom:2.6cqw;
}

.home-card h3 {
  font-size:2.25cqw;
}

.home-card p {
  font-size:1.43cqw;
  line-height:1.6;
  min-height:4.5cqw;
}

.round-link {
  width:3.1cqw;
  height:3.1cqw;
  font-size:1.7cqw;
  margin-top:auto;
}

.stats {
  height:29.5cqw;
  padding:4.7cqw 2cqw 4.2cqw;
  background:#192d3c;
}

.stat .art {
  width:7.1cqw;
  height:7.1cqw;
  margin:0 auto 1.7cqw;
}

.stat .vector {
  stroke:#8ca5bb;
}

.stat .stat-icon path,.stat .stat-icon circle {
  fill:#839eb5;
}

.stat .stat-icon path:last-child {
  stroke:#6c859e;
}

.stat strong {
  font-size:4cqw;
  line-height:1.5;
  font-weight:500;
}

.stat p {
  font-size:1.7cqw;
  line-height:1.65;
  margin:1cqw 0 0;
}

.catalog-page {
  padding:2.5cqw 2cqw 3.3cqw;
}

.catalog-page .page-heading {
  font-size:4.1cqw;
  line-height:1.5;
  margin:0;
}

.catalog-page .subtitle {
  font-size:2cqw;
  line-height:1.8;
  margin:0 0 5.96cqw;
}

.course-grid {
  gap:3.26cqw;
}

.course-card {
  height:36.4cqw;
  padding:3.8cqw 1.3cqw 3.2cqw;
  border-radius:1.65cqw;
}

.course-card .art {
  width:9cqw;
  height:9cqw;
  margin:0 auto 2cqw;
}

.course-card h2 {
  font-size:2.7cqw;
  line-height:1.5;
  margin:0 0 1.4cqw;
}

.course-card p {
  font-size:1.5cqw;
  line-height:1.8;
  min-height:5cqw;
  margin:0 0 2.2cqw;
}

.course-card .btn {
  margin-top:auto;
  font-size:1.9cqw;
  padding:1.1cqw 2.6cqw;
  border-radius:2.1cqw;
}

.register-banner {
  height:33.15cqw;
  margin-top:5.16cqw;
  padding:3.3cqw 2.5cqw 3cqw;
}

.register-banner .art {
  width:7.4cqw;
  height:7.4cqw;
  margin-bottom:1.5cqw;
}

.register-banner h2 {
  font-size:2.75cqw;
  line-height:1.65;
  margin:0 0 1.1cqw;
}

.register-banner p {
  font-size:1.65cqw;
  margin:0 0 2.3cqw;
}

.register-banner .btn {
  font-size:2.1cqw;
  padding:1.25cqw 3cqw;
  border-radius:1.8cqw;
}

.about-page {
  padding-inline:3.8cqw;
}

.about-page>.page-heading {
  margin-bottom:8.4cqw;
}

.about-intro {
  grid-template-columns:1.25fr 1fr;
  gap:6.8cqw;
}

.about-intro>.art {
  aspect-ratio:139/145;
  border-radius:1.6cqw;
}

.about-intro h2 {
  font-size:3.35cqw;
}

.about-intro p {
  font-size:2.43cqw;
  line-height:2.15;
}

.values {
  margin-top:7.65cqw;
  margin-bottom:13.66cqw;
  gap:3cqw;
}

.value {
  height:26.23cqw;
  padding:3.6cqw 1cqw 3cqw;
}

.value .art {
  width:7.9cqw;
  height:7.9cqw;
}

.value h3 {
  font-size:2.25cqw;
  margin-top:2.8cqw;
}

.vision {
  gap:4cqw;
  margin-inline:3.5cqw;
}

.vision h2 {
  font-size:3.8cqw;
}

.vision p {
  font-size:2.2cqw;
}

.course-page {
  padding-inline:4.1cqw;
}

.course-intro {
  grid-template-columns:1fr 1.05fr;
  gap:5cqw;
  margin-bottom:6.5cqw;
}

.course-intro>.photograph {
  aspect-ratio:170/149;
  border-radius:1.5cqw;
}

.course-intro h2 {
  font-size:3.85cqw;
}

.course-intro p {
  font-size:2.4cqw;
}

.benefits {
  font-size:2.22cqw;
}

.syllabus details {
  padding:1.1cqw 2.2cqw;
  border-radius:1cqw;
}

.syllabus summary {
  font-size:2.2cqw;
}

.course-register {
  margin-top:7.8cqw;
  font-size:2.3cqw;
}

body:is([data-page="blog"],[data-page="gallery"],[data-page="register"],[data-page="contact"],[data-page="article"]) header {
  height:11.7cqw;
  padding:1.8cqw 4.3cqw;
  gap:2cqw;
}

body:is([data-page="blog"],[data-page="gallery"],[data-page="register"],[data-page="contact"],[data-page="article"]) header .brand .art {
  width:7.1cqw;
  height:7.1cqw;
}

body:is([data-page="blog"],[data-page="gallery"],[data-page="register"],[data-page="contact"],[data-page="article"]) header .brand b {
  font-size:2.18cqw;
}

body:is([data-page="blog"],[data-page="gallery"],[data-page="register"],[data-page="contact"],[data-page="article"]) header .brand small {
  font-size:1.25cqw;
}

body:is([data-page="blog"],[data-page="gallery"],[data-page="register"],[data-page="contact"],[data-page="article"]) header nav {
  font-size:1.4cqw;
  gap:1.9cqw;
}

body:is([data-page="blog"],[data-page="gallery"],[data-page="register"],[data-page="contact"],[data-page="article"]) header .header-cta {
  font-size:1.6cqw;
  padding:.9cqw 1.3cqw;
}

.blog-page {
  padding:3.8cqw 2.8cqw 10cqw;
}

.blog-grid {
  gap:4.2cqw;
}

.article {
  border-radius:1.5cqw;
}

.article>.photograph {
  aspect-ratio:107/64;
}

.article h2 {
  font-size:2.4cqw;
  min-height:8.5cqw;
  margin-bottom:3cqw;
}

.pagination {
  margin-top:10.33cqw;
}

.pagination button {
  width:5.8cqw;
  height:6cqw;
  font-size:2.3cqw;
}

.gallery-page {
  padding-inline:4.3cqw;
}

.gallery-page .filters {
  margin-bottom:5.7cqw;
}

.gallery-grid {
  gap:2.45cqw;
}

.gallery-grid button {
  aspect-ratio:104/65;
  border-radius:1.7cqw;
}

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

.register-page {
  padding:5.46cqw 4cqw;
}

.form-layout {
  grid-template-columns:1.07fr 1fr;
  gap:3.55cqw;
}

.form-panel {
  padding:1.8cqw 2.8cqw 3.5cqw;
}

.form-panel h1 {
  font-size:4.1cqw;
}

.form-panel textarea {
  height:12.84cqw;
}

.form-panel input,.form-panel select {
  height:6.56cqw;
  min-height:0;
}

.form-panel select {
  direction:rtl;
}

.form-panel .btn {
  font-size:2.3cqw;
  min-height:7cqw;
}

.contact-panel {
  margin-top:3cqw;
  padding:6.5cqw 2.8cqw 3.5cqw;
}

.contact-panel>.art {
  width:10cqw;
  height:9cqw;
  margin-bottom:2.4cqw;
}

.contact-panel h2 {
  font-size:3.35cqw;
}

.contact-panel p {
  font-size:2.15cqw;
}

.contact-line {
  font-size:2.2cqw;
}

.socials {
  gap:2cqw;
}

.contact-page .map {
  width:100%;
  height:37.9cqw;
  aspect-ratio:auto;
  border:1px solid #e3e8ef;
  background:#f0f3f4;
}

.contact-layout .social {
  width:4.4cqw;
  height:4.4cqw;
}

.brand-white svg * {
  stroke:#a9b9c6!important;
}

.brand-white .brand-copy {
  color:white;
}

.footer-brand .brand b {
  font-size:2.85cqw;
}

.footer-brand .brand small {
  font-size:2cqw;
}

.modal-inner>.photograph {
  width:100%;
  height:auto;
  max-height:70vh;
  object-fit:contain;
}

@media(max-width:500px) {
  .hero-copy {
    padding-top:10cqw;
  }
  .page {
    min-height:calc(100vh - 14.5cqw);
  }
  .contact-page {
    min-height:0;
  }
}

.hero-copy {
  padding-top:11.5cqw;
}

.hero h1 {
  font-size:6.6cqw;
  line-height:1.4;
}

.hero p {
  font-size:3.65cqw;
  line-height:1.4;
  margin:1.4cqw 0 3.8cqw;
}

.hero .btn {
  width:30.6cqw;
  height:8.2cqw;
  padding:0;
  font-size:2.6cqw;
  gap:1.8cqw;
}

@media(max-width:500px) {
  .hero-copy {
    padding-top:11.5cqw;
  }
}

.about-intro p {
  font-size:2.55cqw;
  line-height:2.3;
}

.gallery-page .filter {
  height:5.74cqw;
  line-height:1.5;
  padding:0 2.4cqw;
  font-size:2.15cqw;
}

.gallery-page .filters {
  margin-bottom:6.3cqw;
}

.gallery-grid {
  column-gap:3cqw;
  row-gap:2.45cqw;
}

.form-panel {
  padding-top:1.2cqw;
}

.form-panel h1 {
  line-height:1.4;
  padding-bottom:1.5cqw;
  margin-bottom:1.8cqw;
  font-size:4.4cqw;
}

.form-panel label {
  line-height:1.5;
  margin-top:1.4cqw;
}

.form-status:empty {
  display:none;
}

.article-link {
  line-height:1.5;
  padding:1.2cqw 1.8cqw;
}

.footer-nav a {
  padding:0;
}

.course-intro {
  grid-template-columns:35.3cqw 46.8cqw;
  gap:9.7cqw;
  margin-bottom:5.4cqw;
}

.course-page .breadcrumb {
  margin-bottom:3.4cqw;
}

.course-register {
  height:7.1cqw;
  padding:0;
}

.course-intro h2 {
  font-size:4.1cqw;
}

.form-panel label {
  margin-top:1cqw;
}

.form-panel h1+label {
  margin-top:1.4cqw;
}

.form-panel h1 {
  margin-bottom:2.07cqw;
}

.hero .btn>span,.course-card .btn>span,.register-banner .btn>span {
  order:0;
}