:root {
--color-background: #FBF9F5;
--nav-bg: #CEDDE0;
--nav-text: #3A3A3A;
--nav-text-hover: #385E75;
--nav-text-active: #E9A16C;
--color-section-alt: #F0F4F7;
--color-card-1: #7DA7B0;
--color-card-2: #E9A16C;
--color-card-3: #5A68E3;
--color-card-4: #F3D6C2;
--color-card-5: #B3C8CF;
--color-card-6: #ECF1F9;
--color-card-7: #EBEAF9;
--color-card-bg: #FFFFFF;
--color-card-border: #E5E3DE;
--color-text: #3C3C3C;
--color-text-hover: #6B6B6B;
--color-button: #B4D9C6;
--color-button-hover: #9AC9B2;
--color-button-disabled: #E0E0E0;
--color-button-text: #3C3C3C;
--color-button-text-hover: #2A2A2A;
--color-border-light: #EFEDE8;
--color-shadow: rgba(0, 0, 0, 0.04);
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Comfortaa', -apple-system, BlinkMacSystemFont, sans-serif;
background: var(--color-background);
color: var(--color-text);
line-height: 1.6;
margin: 0;
padding: 0;
overflow-x: hidden;
}
/* ============================================
Navigation Bar
============================================ */
.navbar {
background: url('data:image/svg+xml,') center top/cover no-repeat;
position: sticky;
top: 0;
width: 100%;
z-index: 1000;
height: 126px;
transition: all 0.3s ease;
margin: 0;
display: flex;
align-items: flex-start;
padding-top: 20px;
}
.nav-container {
max-width: 1400px;
margin: 0 auto;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 2rem;
width: 100%;
}
.logo {
display: flex;
align-items: center;
font-size: 1.3rem;
font-weight: 700;
color: var(--nav-text);
text-decoration: none;
font-family: 'Borsok', 'Comfortaa', sans-serif;
}
.nav-menu {
display: flex;
list-style: none;
gap: 0;
}
.nav-item {
position: relative;
}
.nav-link {
display: block;
padding: 1rem 1.8rem;
color: var(--nav-text);
text-decoration: none;
font-weight: 500;
font-size: 0.95rem;
transition: all 0.3s ease;
border-radius: 12px;
position: relative;
overflow: hidden;
white-space: nowrap;
}
.nav-link:hover {
color: var(--nav-text-active);
transform: translateY(-2px);
}
.nav-item.has-dropdown > .nav-link::after {
content: '▼';
margin-left: 0.5rem;
font-size: 0.7rem;
transition: transform 0.3s ease;
}
.nav-item.has-dropdown:hover > .nav-link::after {
transform: rotate(180deg);
}
/* ============================================
Mega Menu
============================================ */
.mega-menu {
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
width: 800px;
background: white;
border-radius: 20px;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
border: 1px solid rgba(206, 221, 224, 0.3);
opacity: 0;
visibility: hidden;
transform: translateX(-50%) translateY(20px);
transition: all 0.3s ease;
padding: 2rem;
margin-top: 0px;
}
.nav-item:hover .mega-menu {
opacity: 1;
visibility: visible;
transform: translateX(-50%) translateY(0);
margin-top: 0px;
}
.mega-content {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 2rem;
}
.mega-section h4 {
font-size: 1rem;
color: var(--nav-text);
margin-bottom: 1rem;
font-weight: 600;
display: flex;
align-items: center;
gap: 0.5rem;
}
.mega-section .section-icon {
width: 30px;
height: 30px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.9rem;
background: var(--color-card-4);
}
.mega-links {
list-style: none;
}
.mega-links li {
margin-bottom: 0.5rem;
}
.mega-links a {
color: var(--nav-text);
text-decoration: none;
font-size: 0.9rem;
display: block;
padding: 0.5rem 0.8rem;
border-radius: 8px;
transition: all 0.3s ease;
}
.mega-links a:hover {
background: var(--color-card-4);
color: var(--nav-text-hover);
transform: translateX(5px);
}
/* ============================================
Dropdown Menu
============================================ */
.dropdown {
position: absolute;
top: 100%;
left: 0;
min-width: 320px;
background: white;
border-radius: 15px;
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
border: 1px solid rgba(206, 221, 224, 0.3);
opacity: 0;
visibility: hidden;
transform: translateY(20px);
transition: all 0.3s ease;
padding: 1rem 0;
}
.nav-item:hover .dropdown {
opacity: 1;
visibility: visible;
transform: translateY(0);
margin-top: 0px;
}
.dropdown-link {
display: block;
padding: 0.8rem 1.5rem;
color: var(--nav-text);
text-decoration: none;
font-size: 0.9rem;
transition: all 0.3s ease;
position: relative;
line-height: 1.4;
}
.dropdown-link::before {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 4px;
background: var(--color-card-2);
transform: scaleY(0);
transition: transform 0.3s ease;
}
.dropdown-link:hover::before {
transform: scaleY(1);
}
.dropdown-link:hover {
background: rgba(125, 167, 176, 0.1);
color: var(--nav-text-hover);
padding-left: 2rem;
}
/* ============================================
CTA Button
============================================ */
.cta-button {
background: var(--color-button);
color: var(--color-button-text);
padding: 0.8rem 1.8rem;
border: none;
border-radius: 25px;
font-weight: 600;
font-size: 0.9rem;
cursor: pointer;
transition: all 0.3s ease;
text-decoration: none;
display: inline-block;
}
.cta-button:hover {
background: var(--color-button-hover);
color: var(--color-button-text-hover);
transform: translateY(-2px);
}
/* ============================================
Mobile Menu
============================================ */
.mobile-toggle {
display: none;
flex-direction: column;
cursor: pointer;
padding: 0.5rem;
border-radius: 8px;
transition: background 0.3s ease;
}
.mobile-toggle:hover {
background: rgba(206, 221, 224, 0.3);
}
.mobile-toggle span {
width: 25px;
height: 3px;
background: var(--nav-text);
margin: 3px 0;
transition: 0.3s;
border-radius: 2px;
}
.mobile-menu {
display: none;
position: absolute;
top: 100%;
left: 0;
right: 0;
background: white;
border-radius: 0 0 20px 20px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
padding: 2rem;
margin-top: 1rem;
}
/* ============================================
Responsive Design
============================================ */
/* Анимация бургер меню */
.mobile-toggle {
display: none;
flex-direction: column;
cursor: pointer;
padding: 0.5rem;
border-radius: 8px;
transition: background 0.3s ease;
position: relative;
z-index: 1001;
}
.mobile-toggle:hover {
background: rgba(206, 221, 224, 0.3);
}
.mobile-toggle span {
width: 25px;
height: 3px;
background: var(--nav-text);
margin: 3px 0;
transition: 0.3s;
border-radius: 2px;
transform-origin: center;
}
/* Анимация бургера в крестик */
.mobile-toggle.active span:nth-child(1) {
transform: rotate(45deg) translate(6px, 6px);
}
.mobile-toggle.active span:nth-child(2) {
opacity: 0;
transform: scale(0);
}
.mobile-toggle.active span:nth-child(3) {
transform: rotate(-45deg) translate(6px, -6px);
}
.mobile-menu {
display: none;
position: fixed;
top: 126px;
left: 0;
right: 0;
background: white;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
padding: 2rem;
z-index: 999;
transform: translateY(-100%);
opacity: 0;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
max-height: calc(100vh - 126px);
overflow-y: auto;
}
.mobile-menu.active {
display: block;
transform: translateY(0);
opacity: 1;
}
.mobile-nav-item {
margin-bottom: 1rem;
border-bottom: 1px solid var(--color-border-light);
padding-bottom: 1rem;
}
.mobile-nav-item:last-child {
border-bottom: none;
}
.mobile-nav-link {
display: block;
padding: 1rem 0;
color: var(--nav-text);
text-decoration: none;
font-weight: 500;
font-size: 1.1rem;
transition: all 0.3s ease;
}
.mobile-nav-link:hover {
color: var(--nav-text-active);
padding-left: 1rem;
}
.mobile-submenu {
margin-top: 0.5rem;
padding-left: 1rem;
border-left: 2px solid var(--color-card-2);
}
.mobile-submenu-link {
display: block;
padding: 0.8rem 0;
color: var(--nav-text-hover);
text-decoration: none;
font-size: 0.95rem;
transition: all 0.3s ease;
}
.mobile-submenu-link:hover {
color: var(--nav-text-active);
padding-left: 0.5rem;
}
.mobile-cta {
margin-top: 2rem;
text-align: center;
padding-top: 2rem;
border-top: 2px solid var(--color-border-light);
}
.mobile-cta .cta-button {
width: 100%;
padding: 1rem 2rem;
font-size: 1rem;
}
/* ============================================
ПОЛНАЯ ЗАМЕНА ВСЕХ АДАПТИВОВ ДЛЯ НАВИГАЦИИ
============================================ */
/* Базовые стили мобильного меню (по умолчанию скрыто) */
.mobile-toggle {
display: none;
}
.mobile-menu {
display: none;
}
.nav-menu {
display: flex;
}
.cta-button {
display: inline-block;
}
/* ============================================
ДЕСКТОПНЫЕ ЭКРАНЫ (1024px и больше)
============================================ */
/* Глобальное правило для всех больших экранов */
@media (min-width: 1024px) {
.nav-menu {
display: flex !important;
}
.mobile-toggle {
display: none !important;
}
.mobile-menu {
display: none !important;
}
.cta-button {
display: inline-block !important;
}
}
/* 1024px-1279px */
@media (min-width: 1024px) and (max-width: 1279px) {
.navbar {
height: 115px;
padding-top: 16px;
}
.nav-container {
max-width: 1024px;
padding: 0 1rem;
margin: 0 auto;
}
.logo {
font-size: 1.1rem;
}
.nav-link {
padding: 0.7rem 0.9rem;
font-size: 0.8rem;
}
.cta-button {
padding: 0.6rem 1.1rem;
font-size: 0.75rem;
}
.mega-menu {
width: 550px;
padding: 1.3rem;
}
.dropdown {
min-width: 220px;
}
}
/* 1280px-1439px */
@media (min-width: 1280px) and (max-width: 1439px) {
.navbar {
height: 120px;
padding-top: 18px;
}
.nav-container {
max-width: 1200px;
padding: 0 1.5rem;
margin: 0 auto;
}
.logo {
font-size: 1.2rem;
}
.nav-link {
padding: 0.9rem 1.4rem;
font-size: 0.85rem;
}
.cta-button {
padding: 0.7rem 1.4rem;
font-size: 0.8rem;
}
.mega-menu {
width: 700px;
padding: 1.6rem;
}
.dropdown {
min-width: 280px;
}
}
/* 1440px-1599px */
@media (min-width: 1440px) and (max-width: 1599px) {
.navbar {
height: 126px;
padding-top: 20px;
}
.nav-container {
max-width: 1400px;
padding: 0 2rem;
margin: 0 auto;
}
.logo {
font-size: 1.3rem;
}
.nav-link {
padding: 1rem 1.8rem;
font-size: 0.95rem;
}
.cta-button {
padding: 0.8rem 1.8rem;
font-size: 0.9rem;
}
.mega-menu {
width: 800px;
padding: 2rem;
}
.dropdown {
min-width: 320px;
}
}
/* 1600px-1919px */
@media (min-width: 1600px) and (max-width: 1919px) {
.navbar {
height: 135px;
padding-top: 22px;
}
.nav-container {
max-width: 1500px;
padding: 0 2.5rem;
margin: 0 auto;
}
.logo {
font-size: 1.5rem;
}
.nav-link {
padding: 1.1rem 2rem;
font-size: 1.05rem;
}
.cta-button {
padding: 0.95rem 2.3rem;
font-size: 1.05rem;
}
.mega-menu {
width: 850px;
padding: 2.3rem;
}
.dropdown {
min-width: 360px;
}
}
/* 1920px+ */
@media (min-width: 1920px) {
.navbar {
height: 140px;
padding-top: 25px;
}
.nav-container {
max-width: 1600px;
padding: 0 3rem;
margin: 0 auto;
}
.logo {
font-size: 1.6rem;
}
.nav-link {
padding: 1.2rem 2.2rem;
font-size: 1.1rem;
}
.cta-button {
padding: 1rem 2.5rem;
font-size: 1.1rem;
}
.mega-menu {
width: 900px;
padding: 2.5rem;
}
.dropdown {
min-width: 380px;
}
}
/* ============================================
ПЛАНШЕТНЫЕ ЭКРАНЫ (769px-1023px)
============================================ */
@media (min-width: 769px) and (max-width: 1023px) {
.navbar {
height: 110px;
padding-top: 15px;
}
.nav-container {
padding: 0 1.5rem;
margin: 0 auto;
}
.logo {
font-size: 1.1rem;
}
.nav-link {
padding: 0.8rem 1rem;
font-size: 0.75rem;
}
.cta-button {
padding: 0.6rem 1rem;
font-size: 0.7rem;
}
.mega-menu {
width: 500px;
padding: 1.2rem;
}
.dropdown {
min-width: 200px;
}
}
/* ============================================
МОБИЛЬНЫЕ ЭКРАНЫ (768px и меньше)
============================================ */
@media (max-width: 768px) {
.navbar {
height: 100px;
padding-top: 15px;
}
.nav-container {
padding: 0 1rem;
}
.logo {
font-size: 1.2rem;
}
/* Скрываем десктопное меню */
.nav-menu {
display: none;
}
.cta-button {
display: none;
}
/* Показываем мобильное меню */
.mobile-toggle {
display: flex;
}
.mega-menu,
.dropdown {
display: none !important;
}
.mobile-menu {
top: 100px;
max-height: calc(100vh - 100px);
}
}
/* 414px-768px */
@media (min-width: 414px) and (max-width: 768px) {
.mobile-nav-link {
font-size: 1rem;
padding: 0.9rem 0;
}
.mobile-submenu-link {
font-size: 0.85rem;
padding: 0.7rem 0;
}
}
/* 375px-413px */
@media (min-width: 375px) and (max-width: 413px) {
.navbar {
height: 95px;
padding-top: 10px;
}
.nav-container {
padding: 0 0.9rem;
}
.logo {
font-size: 1rem;
}
.mobile-menu {
top: 40px;
max-height: calc(100vh - 95px);
}
.mobile-nav-link {
font-size: 0.95rem;
padding: 0.85rem 0;
}
.mobile-submenu-link {
font-size: 0.8rem;
padding: 0.65rem 0;
}
}
/* 360px-374px */
@media (min-width: 360px) and (max-width: 374px) {
.navbar {
height: 90px;
padding-top: 10px;
}
.nav-container {
padding: 0 0.8rem;
}
.logo {
font-size: 0.95rem;
}
.mobile-menu {
top: 90px;
max-height: calc(100vh - 90px);
}
.mobile-nav-link {
font-size: 0.9rem;
padding: 0.8rem 0;
}
.mobile-submenu-link {
font-size: 0.75rem;
padding: 0.6rem 0;
}
}
/* 320px-359px */
@media (min-width: 320px) and (max-width: 359px) {
.navbar {
height: 85px;
padding-top: 8px;
}
.nav-container {
padding: 0 0.6rem;
}
.logo {
font-size: 0.9rem;
}
.mobile-menu {
top: 85px;
max-height: calc(100vh - 85px);
}
.mobile-nav-link {
font-size: 0.85rem;
padding: 0.75rem 0;
}
.mobile-submenu-link {
font-size: 0.7rem;
padding: 0.55rem 0;
}
}
/* Меньше 320px */
@media (max-width: 319px) {
.navbar {
height: 80px;
padding-top: 6px;
}
.nav-container {
padding: 0 0.5rem;
}
.logo {
font-size: 0.85rem;
}
.mobile-menu {
top: 80px;
max-height: calc(100vh - 80px);
}
.mobile-nav-link {
font-size: 0.8rem;
padding: 0.7rem 0;
}
.mobile-submenu-link {
font-size: 0.65rem;
padding: 0.5rem 0;
}
}
/* ============================================
Accessibility для сенсорных устройств
============================================ */
@media (hover: none) and (pointer: coarse) {
.nav-link:hover {
transform: none;
}
.mobile-nav-link,
.mobile-submenu-link {
min-height: 44px;
display: flex;
align-items: center;
}
.mobile-toggle {
min-height: 44px;
min-width: 44px;
display: flex;
align-items: center;
justify-content: center;
}
.mobile-cta .cta-button {
min-height: 44px;
display: flex;
align-items: center;
justify-content: center;
}
}
/* ============================================
Performance оптимизация для анимаций
============================================ */
@media (prefers-reduced-motion: reduce) {
.mobile-toggle span,
.mobile-menu,
.mobile-nav-link,
.mobile-submenu-link {
transition: none;
}
.mobile-toggle.active span:nth-child(1),
.mobile-toggle.active span:nth-child(3) {
transition: none;
}
}
/* ============================================
Hero Section
============================================ */
.hero {
background: var(--color-background);
position: relative;
overflow: hidden;
min-height: 600px;
display: flex;
align-items: center;
margin-top: -48px;
margin-bottom: 150px;
}
.hero-bg-image {
position: absolute;
top: 0;
right: 0;
height: 100%;
width: auto;
object-fit: cover;
z-index: 1;
}
.hero-container {
max-width: 1400px;
position: relative;
z-index: 2;
width: 100%;
}
.hero-content {
padding-left: 120px;
max-width: 740px;
}
.hero-title {
font-family: 'Borsok', 'Comfortaa', sans-serif;
font-size: 60px;
font-weight: 700;
line-height: 120%;
margin-bottom: 20px;
background: linear-gradient(-77deg, #7DA7B0 0%, #E9A16C 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.hero-text {
font-size: 24px;
line-height: 150%;
color: var(--color-text);
margin-bottom: 50px;
}
.hero-buttons {
display: flex;
gap: 1.5rem;
align-items: center;
}
.hero-phone {
background: var(--color-card-4);
color: var(--color-text);
padding: 1rem 2rem;
border-radius: 50px;
text-decoration: none;
font-weight: 600;
font-size: 1.1rem;
transition: all 0.3s ease;
white-space: nowrap;
}
.hero-phone:hover {
background: #E6C4A8;
transform: translateY(-2px);
}
.hero-cta {
background: var(--color-button);
color: var(--color-button-text);
padding: 1rem 2rem;
border-radius: 50px;
text-decoration: none;
font-weight: 600;
font-size: 1.1rem;
transition: all 0.3s ease;
white-space: nowrap;
}
.hero-cta:hover {
background: var(--color-button-hover);
transform: translateY(-2px);
}
.hero-cta:hover {
background: var(--color-button-hover);
transform: translateY(-2px);
}
/* ============================================
Hero Mobile Responsive
============================================ */
/* 1920px and above */
@media (min-width: 1920px) {
.hero {
min-height: 700px;
padding-top: 0;
}
.hero-content {
padding-left: 160px;
max-width: 900px;
}
.hero-title {
font-size: 72px;
margin-bottom: 30px;
}
.hero-text {
font-size: 28px;
margin-bottom: 60px;
}
.hero-phone,
.hero-cta {
padding: 1.2rem 2.5rem;
font-size: 1.2rem;
}
}
/* 1600px - 1919px */
@media (max-width: 1919px) and (min-width: 1600px) {
.hero {
min-height: 650px;
padding-top: 0;
}
.hero-content {
padding-left: 140px;
max-width: 820px;
}
.hero-title {
font-size: 68px;
margin-bottom: 25px;
}
.hero-text {
font-size: 26px;
margin-bottom: 55px;
}
.hero-phone,
.hero-cta {
padding: 1.1rem 2.3rem;
font-size: 1.15rem;
}
}
/* 1440px - 1599px */
@media (max-width: 1599px) and (min-width: 1440px) {
.hero {
min-height: 600px;
padding-top: 0;
}
.hero-content {
padding-left: 120px;
max-width: 740px;
}
.hero-title {
font-size: 60px;
margin-bottom: 20px;
}
.hero-text {
font-size: 24px;
margin-bottom: 50px;
}
.hero-phone,
.hero-cta {
padding: 1rem 2rem;
font-size: 1.1rem;
}
}
/* 1280px - 1439px */
@media (max-width: 1439px) and (min-width: 1280px) {
.hero {
min-height: 550px;
padding-top: 0;
}
.hero-content {
padding-left: 100px;
max-width: 680px;
}
.hero-title {
font-size: 56px;
margin-bottom: 18px;
}
.hero-text {
font-size: 22px;
margin-bottom: 45px;
}
.hero-phone,
.hero-cta {
padding: 0.95rem 1.8rem;
font-size: 1.05rem;
}
}
/* 1024px - 1279px */
@media (max-width: 1279px) and (min-width: 1024px) {
.hero {
min-height: 500px;
padding-top: 0;
display: flex;
align-items: center;
margin-top: -48px;
margin-bottom: 150px;
padding-right: 0;
}
.hero-bg-image {
position: absolute;
top: 0;
right: 0;
height: 100%;
width: auto;
object-fit: cover;
z-index: 1;
}
.hero-container {
max-width: 100%;
position: relative;
z-index: 2;
width: 100%;
padding: 0 0 0 2rem;
margin: 0;
}
.hero-content {
padding-left: 0;
max-width: 620px;
position: relative;
z-index: 2;
}
.hero-title {
font-size: 52px;
margin-bottom: 16px;
}
.hero-text {
font-size: 20px;
margin-bottom: 40px;
}
.hero-buttons {
display: flex;
gap: 1.5rem;
align-items: center;
}
.hero-phone,
.hero-cta {
padding: 0.9rem 1.6rem;
font-size: 1rem;
white-space: nowrap;
}
}
/* ============================================
Hero Tablet Responsive
============================================ */
/* 769px - 1023px */
@media (max-width: 1023px) and (min-width: 769px) {
.hero {
min-height: 450px;
margin-top: -40px;
margin-bottom: 100px;
padding-top: 0;
}
.hero-content {
padding-left: 60px;
max-width: 580px;
}
.hero-title {
font-size: 48px;
margin-bottom: 15px;
}
.hero-text {
font-size: 19px;
margin-bottom: 35px;
}
.hero-phone,
.hero-cta {
padding: 0.85rem 1.5rem;
font-size: 0.95rem;
}
}
@media (max-width: 768px) {
.hero {
min-height: auto;
margin-top: -35px;
margin-bottom: 80px;
display: block;
text-align: center;
}
.hero-bg-image {
position: static;
display: block;
width: 100%;
height: auto;
max-height: 400px;
object-fit: cover;
border-radius: 0 0 30px 30px;
margin-bottom: 40px;
}
.hero-container {
padding: 0 1rem;
margin: 0 auto;
}
.hero-content {
padding-left: 0;
max-width: 100%;
position: static;
z-index: auto;
}
.hero-title {
font-size: 40px;
margin-bottom: 20px;
}
.hero-text {
font-size: 18px;
margin-bottom: 40px;
max-width: 350px;
margin-left: auto;
margin-right: auto;
}
.hero-buttons {
flex-direction: column;
gap: 1rem;
align-items: center;
max-width: 300px;
margin: 0 auto;
}
.hero-phone,
.hero-cta {
text-align: center;
white-space: normal;
width: 100%;
display: block;
}
}
@media (max-width: 768px) and (min-width: 769px) {
.hero {
min-height: auto;
margin-top: -35px;
margin-bottom: 80px;
display: block;
text-align: center;
}
.hero-bg-image {
position: static;
display: block;
width: 100%;
height: auto;
max-height: 400px;
object-fit: cover;
border-radius: 0 0 30px 30px;
margin-bottom: 40px;
}
.hero-container {
padding: 0 1rem;
margin: 0 auto;
}
.hero-content {
padding-left: 0;
max-width: 100%;
position: static;
z-index: auto;
}
.hero-title {
font-size: 40px;
margin-bottom: 20px;
}
.hero-text {
font-size: 18px;
margin-bottom: 40px;
max-width: 350px;
margin-left: auto;
margin-right: auto;
}
.hero-buttons {
flex-direction: column;
gap: 1rem;
align-items: center;
max-width: 300px;
margin: 0 auto;
}
.hero-phone,
.hero-cta {
text-align: center;
white-space: normal;
width: 100%;
display: block;
}
}
@media (max-width: 768px) and (min-width: 481px) {
.hero {
min-height: 500px;
margin-top: -35px;
margin-bottom: 80px;
display: flex;
align-items: flex-start;
text-align: left;
padding-top: 60px;
}
.hero-bg-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: 1;
}
.hero-container {
padding: 0 1rem;
margin: 0 auto;
position: relative;
z-index: 2;
}
.hero-content {
padding-left: 2rem;
max-width: 100%;
position: relative;
z-index: 2;
}
.hero-title {
font-size: 40px;
margin-bottom: 10px;
}
.hero-text {
font-size: 18px;
margin-bottom: 10px;
max-width: 350px;
margin-left: 0;
}
.hero-buttons {
flex-direction: row;
gap: 1rem;
align-items: flex-start;
max-width: 500px;
margin-left: 0;
}
.hero-phone,
.hero-cta {
text-align: center;
white-space: nowrap;
flex: 1;
display: block;
}
}
@media (max-width: 679px) and (min-width: 481px) {
.hero {
min-height: 500px;
margin-top: -35px;
margin-bottom: 80px;
display: flex;
align-items: flex-start;
text-align: left;
padding-top: 60px;
}
.hero-bg-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: 1;
}
.hero-container {
padding: 0 1rem;
margin: 0 auto;
position: relative;
z-index: 2;
}
.hero-content {
padding-left: 2rem;
max-width: 100%;
position: relative;
z-index: 2;
}
.hero-title {
font-size: 40px;
margin-bottom: 10px;
}
.hero-text {
font-size: 18px;
margin-bottom: 10px;
max-width: 350px;
margin-left: 0;
}
.hero-buttons {
flex-direction: row;
gap: 1rem;
align-items: flex-start;
max-width: 500px;
margin-left: 0;
}
.hero-phone,
.hero-cta {
text-align: center;
white-space: nowrap;
flex: 1;
display: block;
}
}
@media (max-width: 480px) {
.hero {
margin-bottom: 60px;
margin-top: -35px;
}
.hero-bg-image {
max-height: 300px;
margin-bottom: 30px;
border-radius: 0 0 20px 20px;
}
.hero-title {
font-size: 32px;
margin-bottom: 15px;
}
.hero-text {
font-size: 16px;
margin-bottom: 30px;
max-width: 280px;
}
.hero-phone,
.hero-cta {
padding: 0.9rem 1.5rem;
font-size: 1rem;
}
.hero-buttons {
max-width: 280px;
}
}
@media (max-width: 375px) {
.hero-title {
font-size: 28px;
}
.hero-text {
font-size: 15px;
max-width: 260px;
}
.hero-phone,
.hero-cta {
padding: 0.8rem 1.2rem;
font-size: 0.95rem;
}
.hero-buttons {
max-width: 260px;
}
}
/* ============================================
Key Points Section
============================================ */
.key-points {
background: var(--color-background);
padding: 0;
margin: 0;
position: relative;
z-index: 10;
margin-top: -80px;
}
.key-points-container {
max-width: 1400px;
margin: 0 auto;
padding: 0 2rem;
display: flex;
justify-content: center;
gap: 6rem;
margin-bottom: 150px;
}
.key-point-card {
background: var(--color-card-6);
width: 210px;
height: 114px;
border-radius: 20px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding: 1rem;
box-sizing: border-box;
transition: transform 0.3s ease, box-shadow 0.3s ease;
transform: rotate(-6deg);
}
.key-point-card:nth-child(2) {
background: var(--color-card-7);
transform: rotate(3deg);
}
.key-point-card:nth-child(3) {
background: var(--color-card-6);
transform: rotate(-3deg);
}
.key-point-card:nth-child(4) {
background: var(--color-card-7);
transform: rotate(6deg);
}
.key-point-card:hover {
transform: rotate(-6deg) translateY(-5px);
box-shadow: 0 10px 30px var(--color-shadow);
}
.key-point-card:nth-child(2):hover {
transform: rotate(3deg) translateY(-5px);
}
.key-point-card:nth-child(3):hover {
transform: rotate(-3deg) translateY(-5px);
}
.key-point-card:nth-child(4):hover {
transform: rotate(6deg) translateY(-5px);
}
.key-point-title {
font-family: 'Comfortaa', sans-serif;
font-size: 1.1rem;
font-weight: 600;
color: var(--color-text);
line-height: 150%;
margin: 0;
text-align: center;
}
@media (min-width: 1920px) {
.key-points-container {
gap: 8rem;
}
}
@media (min-width: 1600px) and (max-width: 1919px) {
.key-points-container {
gap: 7rem;
max-width: 1600px;
}
}
@media (min-width: 1440px) and (max-width: 1599px) {
.key-points-container {
gap: 6rem;
}
}
@media (min-width: 1280px) and (max-width: 1439px) {
.key-points-container {
gap: 5rem;
}
}
@media (min-width: 1024px) and (max-width: 1279px) {
.key-points {
margin-top: -80px;
}
.key-points-container {
padding: 0 2rem;
display: flex;
justify-content: center;
gap: 4rem;
margin-bottom: 150px;
}
.key-point-card {
width: 210px;
height: 114px;
}
.key-point-title {
font-size: 1.1rem;
}
}
@media (min-width: 768px) and (max-width: 1023px) {
.key-points {
margin-top: -80px;
}
.key-points-container {
padding: 0 1rem;
display: flex;
justify-content: center;
gap: 1.5rem;
margin-bottom: 150px;
max-width: 768px;
margin-left: auto;
margin-right: auto;
}
.key-point-card {
width: 160px;
height: 114px;
}
.key-point-title {
font-size: 1.1rem;
}
}
@media (min-width: 415px) and (max-width: 767px) {
.key-points {
margin-top: -70px;
padding-top: 40px;
}
.key-points-container {
padding: 0 1.5rem;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 1.5rem;
margin-bottom: 100px;
}
.key-point-card {
width: 160px;
height: 100px;
}
.key-point-title {
font-size: 0.9rem;
}
}
@media (max-width: 414px) {
.key-points {
margin-top: -40px;
padding-top: 60px;
}
.key-points-container {
padding: 0 1rem;
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
gap: 1.5rem;
margin-bottom: 80px;
max-width: 350px;
grid-template-areas:
"card1 card2"
"card4 card3";
}
.key-point-card:nth-child(1) {
grid-area: card1;
}
.key-point-card:nth-child(2) {
grid-area: card2;
}
.key-point-card:nth-child(3) {
grid-area: card3;
}
.key-point-card:nth-child(4) {
grid-area: card4;
}
.key-point-card {
width: 100%;
height: 100px;
}
.key-point-title {
font-size: 0.85rem;
line-height: 140%;
}
}
@media (max-width: 375px) {
.key-points-container {
max-width: 340px;
}
.key-point-card {
height: 98px;
}
}
@media (max-width: 360px) {
.key-points-container {
max-width: 320px;
}
.key-point-card {
height: 95px;
}
}
@media (max-width: 320px) {
.key-points-container {
padding: 0 0.8rem;
gap: 1rem;
max-width: 280px;
}
.key-point-card {
height: 90px;
}
.key-point-title {
font-size: 0.8rem;
}
}
/* ============================================
Why Choose Us Section
============================================ */
.why-choose {
background: var(--color-background);
padding: 0 0 150px 0;
position: relative;
}
.why-choose-container {
max-width: 1400px;
margin: 0 auto;
padding: 0 2rem;
display: flex;
align-items: center;
gap: 4rem;
}
.why-choose-left {
position: relative;
flex: 1;
}
.car-icon {
position: absolute;
top: -30px;
left: 36px;
width: 100px;
height: 100px;
z-index: 2;
}
.main-photo-wrapper {
position: relative;
}
.main-photo {
width: 100%;
height: auto;
border-radius: 30px;
}
.why-choose-right {
width: 580px;
position: relative;
}
.why-choose-header {
margin-bottom: 2rem;
}
.why-choose-title {
font-family: 'Comfortaa', sans-serif;
font-size: 24px;
font-weight: 700;
color: var(--color-text);
margin-bottom: 1rem;
line-height: 1.2;
text-transform: uppercase;
}
.why-choose-subtitle {
font-family: 'Comfortaa', sans-serif;
font-size: 18px;
font-weight: 400;
color: var(--color-text);
line-height: 1.5;
margin: 0;
}
.bento-grid {
display: flex;
flex-direction: column;
gap: 1.25rem;
margin-bottom: 2rem;
}
.bento-row-1,
.bento-row-2 {
display: flex;
gap: 1.25rem;
}
.bento-card {
border-radius: 20px;
padding: 1.25rem;
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.bento-1 {
width: 280px;
height: 153px;
background: none;
border: 1px dashed var(--color-text);
}
.bento-2 {
width: 280px;
height: 153px;
background: var(--color-card-5);
}
.bento-3 {
width: 320px;
height: 153px;
background: var(--color-card-2);
}
.bento-4 {
width: 240px;
height: 153px;
background: none;
border: 1px dashed var(--color-text);
}
.bento-title {
font-family: 'Comfortaa', sans-serif;
font-size: 18px;
font-weight: 700;
color: var(--color-text);
margin: 0;
line-height: 1.3;
}
.bento-text {
font-family: 'Comfortaa', sans-serif;
font-size: 18px;
font-weight: 300;
color: var(--color-text);
margin: 0;
line-height: 1.4;
}
.contact-button {
width: 100%;
background: var(--color-card-1);
border-radius: 50px;
padding: 1rem 2rem;
display: flex;
align-items: center;
justify-content: center;
gap: 1rem;
font-family: 'Comfortaa', sans-serif;
font-size: 18px;
font-weight: 300;
color: white;
text-decoration: none;
transition: all 0.3s ease;
cursor: pointer;
border: none;
}
.contact-button:hover {
background: #6A95A0;
transform: translateY(-2px);
}
.phone-icon {
width: 24px;
height: 24px;
}
.house-icon {
position: absolute;
top: 360px;
right: -80px;
width: 110px;
height: 116px;
z-index: 1;
}
@media (min-width: 1920px) {
.why-choose-container {
max-width: 1600px;
gap: 6rem;
}
.why-choose-right {
width: 680px;
}
}
@media (min-width: 1600px) and (max-width: 1919px) {
.why-choose-container {
max-width: 1500px;
gap: 5rem;
}
.why-choose-right {
width: 640px;
}
}
@media (min-width: 1440px) and (max-width: 1599px) {
.why-choose-container {
gap: 4rem;
}
.why-choose-right {
width: 580px;
}
}
@media (min-width: 1280px) and (max-width: 1439px) {
.why-choose-container {
gap: 3rem;
}
.why-choose-right {
width: 520px;
}
.bento-1, .bento-2 {
width: 240px;
}
.bento-3 {
width: 280px;
}
.bento-4 {
width: 200px;
}
}
@media (min-width: 1024px) and (max-width: 1279px) {
.why-choose-container {
gap: 2rem;
padding: 0 1rem;
}
.why-choose-left {
max-width: 420px;
}
.why-choose-right {
width: 580px;
}
.why-choose-title {
font-size: 22px;
}
.why-choose-subtitle {
font-size: 16px;
}
.bento-1, .bento-2 {
width: 280px;
height: 140px;
}
.bento-3 {
width: 320px;
height: 140px;
}
.bento-4 {
width: 240px;
height: 140px;
}
.bento-title {
font-size: 16px;
}
.bento-text {
font-size: 15px;
}
.car-icon {
width: 70px;
height: 62px;
top: -20px;
left: 30px;
}
.house-icon {
width: 80px;
height: 86px;
top: 80px;
right: -30px;
}
}
@media (max-width: 768px) {
.why-choose-container {
flex-direction: column;
gap: 2rem;
text-align: center;
padding: 0 1rem;
}
.why-choose-left {
order: 1;
max-width: 350px;
margin: 0 auto;
}
.why-choose-right {
order: 2;
width: 100%;
}
.car-icon {
display: none;
}
.house-icon {
display: none;
}
.why-choose-title {
font-size: 20px;
text-transform: none;
}
.why-choose-subtitle {
font-size: 16px;
}
.bento-grid {
display: flex;
flex-direction: column;
gap: 1rem;
}
.bento-row-1, .bento-row-2 {
display: flex;
flex-direction: column;
gap: 1rem;
}
.bento-card {
width: 100% !important;
height: auto !important;
min-height: 100px;
padding: 1.2rem;
}
.bento-title {
font-size: 16px;
text-transform: none;
}
.bento-text {
font-size: 14px;
}
.contact-button {
font-size: 16px;
padding: 0.8rem 1.5rem;
}
}
@media (max-width: 414px) {
.why-choose {
padding: 0 0 100px 0;
}
.why-choose-container {
padding: 0 1rem;
}
.why-choose-left {
max-width: 300px;
}
.why-choose-title {
font-size: 18px;
text-transform: none;
}
.why-choose-subtitle {
font-size: 15px;
}
.bento-card {
min-height: 110px;
padding: 1rem;
}
.bento-title {
font-size: 15px;
text-transform: none;
}
.bento-text {
font-size: 13px;
}
}
@media (max-width: 375px) {
.why-choose-container {
padding: 0 0.8rem;
}
.why-choose-left {
max-width: 280px;
}
.contact-button {
font-size: 15px;
padding: 0.7rem 1.2rem;
}
.why-choose-title {
text-transform: none;
}
.bento-title {
text-transform: none;
}
}
@media (max-width: 360px) {
.why-choose-left {
max-width: 260px;
}
.bento-card {
min-height: 100px;
padding: 0.8rem;
}
.why-choose-title {
text-transform: none;
}
.bento-title {
text-transform: none;
}
}
@media (max-width: 320px) {
.why-choose-container {
padding: 0 0.6rem;
}
.why-choose-left {
max-width: 240px;
}
.why-choose-title {
font-size: 16px;
text-transform: none;
}
.why-choose-subtitle {
font-size: 14px;
}
.bento-title {
font-size: 14px;
text-transform: none;
}
.bento-text {
font-size: 12px;
}
.contact-button {
font-size: 14px;
padding: 0.6rem 1rem;
}
}
/* ============================================
Age Groups Section
============================================ */
.age-groups-wrapper {
position: relative;
margin-bottom: 150px;
}
.age-groups {
background: var(--color-section-alt);
position: relative;
padding: 80px 0 40px;
margin-top: -8px;
}
.age-groups-container {
max-width: 1400px;
margin: 0 auto;
padding: 0 2rem;
position: relative;
}
.cloud-decoration {
position: absolute;
top: -40px;
left: 80px;
width: 200px;
height: auto;
z-index: 1;
}
.age-groups-content {
text-align: center;
position: relative;
z-index: 2;
}
.age-groups-title {
font-family: 'Comfortaa', sans-serif;
font-size: 24px;
font-weight: 700;
color: var(--color-text);
margin-bottom: 20px;
line-height: 1.2;
text-transform: uppercase;
}
.age-groups-subtitle {
font-size: 20px;
font-weight: 300;
color: var(--color-text);
margin-bottom: 60px;
max-width: 800px;
margin-left: auto;
margin-right: auto;
line-height: 1.5;
}
.age-groups-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 30px;
margin-bottom: 40px;
}
.age-group-card {
position: relative;
text-align: center;
}
.age-group-image-wrapper {
position: relative;
display: inline-block;
}
.age-group-image {
width: 100%;
height: auto;
display: block;
}
.age-group-overlay {
position: absolute;
top: 62%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
color: var(--color-text);
width: 80%;
}
.age-group-title {
font-family: 'Comfortaa', sans-serif;
font-size: 20px;
font-weight: 700;
margin-bottom: 8px;
line-height: 1.2;
}
.age-group-age {
font-size: 14px;
font-weight: 500;
margin-bottom: 12px;
line-height: 1.3;
opacity: 0.9;
}
.age-group-description {
font-size: 14px;
font-weight: 400;
line-height: 1.4;
}
.pencil-decoration {
position: absolute;
bottom: -20px;
right: -20px;
width: 200px;
height: auto;
z-index: 1;
}
/* ============================================
Age Groups Responsive
============================================ */
/* 1920px+ */
@media (min-width: 1920px) {
.age-groups-container {
max-width: 1600px;
padding: 100px 3rem 60px;
}
.cloud-decoration {
width: 250px;
left: 120px;
top: -60px;
}
.age-groups-title {
font-size: 28px;
margin-bottom: 25px;
}
.age-groups-subtitle {
font-size: 22px;
margin-bottom: 80px;
max-width: 900px;
}
.age-groups-grid {
gap: 40px;
margin-bottom: 60px;
}
.pencil-decoration {
width: 250px;
right: -40px;
bottom: -40px;
}
}
/* 1600px-1919px */
@media (min-width: 1600px) and (max-width: 1919px) {
.age-groups-container {
max-width: 1500px;
padding: 90px 2.5rem 50px;
}
.cloud-decoration {
width: 230px;
left: 100px;
top: -50px;
}
.age-groups-title {
font-size: 26px;
margin-bottom: 22px;
}
.age-groups-subtitle {
font-size: 21px;
margin-bottom: 70px;
max-width: 850px;
}
.age-groups-grid {
gap: 35px;
margin-bottom: 50px;
}
.pencil-decoration {
width: 230px;
right: -30px;
bottom: -30px;
}
}
/* 1440px-1599px */
@media (min-width: 1440px) and (max-width: 1599px) {
.age-groups-container {
max-width: 1400px;
padding: 80px 2rem 40px;
}
.cloud-decoration {
width: 200px;
left: 80px;
top: -40px;
}
.age-groups-title {
font-size: 24px;
margin-bottom: 20px;
}
.age-groups-subtitle {
font-size: 20px;
margin-bottom: 60px;
max-width: 800px;
}
.age-groups-grid {
gap: 30px;
margin-bottom: 40px;
}
.pencil-decoration {
width: 200px;
right: -20px;
bottom: -20px;
}
}
/* 1280px-1439px */
@media (min-width: 1280px) and (max-width: 1439px) {
.age-groups-container {
max-width: 1200px;
padding: 70px 2rem 35px;
}
.cloud-decoration {
width: 180px;
left: 60px;
top: -35px;
}
.age-groups-title {
font-size: 22px;
margin-bottom: 18px;
}
.age-groups-subtitle {
font-size: 18px;
margin-bottom: 50px;
max-width: 700px;
}
.age-groups-grid {
gap: 25px;
margin-bottom: 35px;
}
.age-group-title {
font-size: 18px;
}
.age-group-age {
font-size: 13px;
}
.age-group-description {
font-size: 13px;
}
.pencil-decoration {
width: 180px;
right: -15px;
bottom: -15px;
}
}
/* 1024px-1279px */
@media (min-width: 1024px) and (max-width: 1279px) {
.age-groups-container {
max-width: 1000px;
padding: 60px 1.5rem 30px;
}
.cloud-decoration {
width: 160px;
left: 40px;
top: -30px;
}
.age-groups-title {
font-size: 20px;
margin-bottom: 16px;
}
.age-groups-subtitle {
font-size: 16px;
margin-bottom: 40px;
max-width: 600px;
}
.age-groups-grid {
gap: 20px;
margin-bottom: 30px;
}
.age-group-title {
font-size: 16px;
}
.age-group-age {
font-size: 12px;
}
.age-group-description {
font-size: 12px;
}
.pencil-decoration {
width: 160px;
right: -10px;
bottom: -10px;
}
}
/* 768px-1023px */
@media (min-width: 768px) and (max-width: 1023px) {
.age-groups-container {
padding: 50px 1rem 25px;
}
.cloud-decoration {
width: 140px;
left: 20px;
top: -25px;
}
.age-groups-title {
font-size: 18px;
margin-bottom: 14px;
}
.age-groups-subtitle {
font-size: 15px;
margin-bottom: 35px;
max-width: 500px;
}
.age-groups-grid {
grid-template-columns: repeat(2, 1fr);
gap: 20px;
margin-bottom: 25px;
}
.age-group-title {
font-size: 16px;
}
.age-group-age {
font-size: 14px;
}
.age-group-description {
font-size: 14px;
}
.pencil-decoration {
width: 210px;
right: -5px;
bottom: 40px;
}
}
/* Mobile 414px-767px */
@media (max-width: 767px) {
.age-groups-wrapper {
margin-bottom: 100px;
}
.age-groups {
padding: 40px 0 30px;
}
.age-groups-container {
padding: 0 1rem;
}
.cloud-decoration {
display: none;
}
.age-groups-title {
font-size: 16px;
margin-bottom: 12px;
text-transform: none;
}
.age-groups-subtitle {
font-size: 14px;
margin-bottom: 30px;
max-width: 100%;
}
.age-groups-grid {
display: flex;
flex-direction: column;
gap: 20px;
margin-bottom: 20px;
}
.age-group-card {
max-width: 300px;
margin: 0 auto;
}
.age-group-image-wrapper {
width: 100%;
}
.age-group-overlay {
top: 65%;
width: 85%;
}
.age-group-title {
font-size: 16px;
margin-bottom: 6px;
}
.age-group-age {
font-size: 12px;
margin-bottom: 8px;
}
.age-group-description {
font-size: 12px;
}
.pencil-decoration {
width: 150px;
right: 10px;
bottom: 10px;
}
}
/* 375px-413px */
@media (min-width: 375px) and (max-width: 413px) {
.age-groups-wrapper {
margin-bottom: 40px;
}
.age-group-card {
max-width: 280px;
}
.age-groups-title {
font-size: 15px;
text-transform: none;
}
.age-groups-subtitle {
font-size: 13px;
}
.age-group-title {
font-size: 15px;
}
.age-group-age {
font-size: 11px;
}
.age-group-description {
font-size: 11px;
}
}
/* 360px-374px */
@media (min-width: 360px) and (max-width: 374px) {
.age-groups-wrapper {
margin-bottom: 100px;
}
.age-group-card {
max-width: 260px;
}
.age-groups-title {
font-size: 14px;
text-transform: none;
}
.age-groups-subtitle {
font-size: 12px;
}
.age-group-title {
font-size: 14px;
}
.age-group-age {
font-size: 10px;
}
.age-group-description {
font-size: 10px;
}
}
/* 320px-359px */
@media (min-width: 320px) and (max-width: 359px) {
.age-groups-wrapper {
margin-bottom: 100px;
}
.age-groups-container {
padding: 0 0.8rem;
}
.age-group-card {
max-width: 240px;
}
.age-groups-title {
font-size: 13px;
text-transform: none;
}
.age-groups-subtitle {
font-size: 11px;
}
.age-group-title {
font-size: 13px;
}
.age-group-age {
font-size: 9px;
}
.age-group-description {
font-size: 9px;
}
.pencil-decoration {
width: 60px;
}
}
.age-groups-wrapper {
overflow: hidden !important;
max-width: 100vw !important;
width: 100% !important;
position: relative !important;
}
/* ============================================
Day Schedule Section
============================================ */
.day-schedule {
background: var(--color-background);
position: relative;
margin-bottom: 150px;
}
.day-schedule-container {
max-width: 1400px;
margin: 0 auto;
padding: 0 2rem;
position: relative;
}
.cubes-decoration {
position: absolute;
top: -40px;
left: 80px;
width: 150px;
height: auto;
z-index: 1;
}
.day-schedule-content {
text-align: center;
position: relative;
z-index: 2;
}
.day-schedule-title {
font-family: 'Comfortaa', sans-serif;
font-size: 24px;
font-weight: 700;
color: var(--color-text);
margin-bottom: 20px;
line-height: 1.2;
text-transform: uppercase;
}
.day-schedule-subtitle {
font-size: 20px;
font-weight: 300;
color: var(--color-text);
margin-bottom: 60px;
max-width: 800px;
margin-left: auto;
margin-right: auto;
line-height: 1.5;
}
.gallery-wrapper {
position: relative;
display: flex;
align-items: center;
gap: 30px;
}
.photo-gallery {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
flex: 1;
max-width: 1200px;
margin: 0 auto;
}
.photo-item {
position: relative;
border-radius: 20px;
overflow: hidden;
height: 400px;
transition: transform 0.3s ease;
}
.photo-item:hover {
transform: translateY(-5px);
}
.gallery-photo {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.gallery-nav {
width: 50px;
height: 50px;
border: none;
border-radius: 50%;
background: var(--nav-bg);
color: var(--color-button-text);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.3s ease;
flex-shrink: 0;
}
.gallery-nav:hover {
transform: scale(1.1);
}
.gallery-prev {
order: -1;
}
.gallery-next {
order: 1;
}
/* ============================================
Day Schedule Responsive
============================================ */
/* Desktop - 1920px+ */
@media (min-width: 1920px) {
.day-schedule {
padding: 120px 0;
}
.day-schedule-container {
max-width: 1600px;
padding: 0 3rem;
}
.cubes-decoration {
width: 180px;
left: 120px;
top: -30px;
}
.day-schedule-title {
font-size: 28px;
margin-bottom: 25px;
}
.day-schedule-subtitle {
font-size: 22px;
margin-bottom: 80px;
max-width: 900px;
}
.photo-gallery {
max-width: 1400px;
gap: 25px;
grid-template-columns: repeat(4, 1fr);
}
.photo-item {
height: 450px;
}
.gallery-nav {
width: 60px;
height: 60px;
}
.gallery-dots {
display: none;
}
}
/* Desktop - 1600px-1919px */
@media (min-width: 1600px) and (max-width: 1919px) {
.day-schedule {
padding: 110px 0;
}
.day-schedule-container {
max-width: 1500px;
padding: 0 2.5rem;
}
.cubes-decoration {
width: 170px;
left: 100px;
top: -25px;
}
.day-schedule-title {
font-size: 26px;
margin-bottom: 22px;
}
.day-schedule-subtitle {
font-size: 21px;
margin-bottom: 70px;
max-width: 850px;
}
.photo-gallery {
max-width: 1300px;
gap: 22px;
grid-template-columns: repeat(4, 1fr);
}
.photo-item {
height: 425px;
}
.gallery-nav {
width: 55px;
height: 55px;
}
.gallery-dots {
display: none;
}
}
/* Desktop - 1440px-1599px */
@media (min-width: 1440px) and (max-width: 1599px) {
.day-schedule {
padding: 100px 0;
}
.day-schedule-container {
max-width: 1400px;
padding: 0 2rem;
}
.cubes-decoration {
width: 150px;
left: 80px;
top: -20px;
}
.day-schedule-title {
font-size: 24px;
margin-bottom: 20px;
}
.day-schedule-subtitle {
font-size: 20px;
margin-bottom: 60px;
max-width: 800px;
}
.photo-gallery {
max-width: 1200px;
gap: 20px;
grid-template-columns: repeat(4, 1fr);
}
.photo-item {
height: 400px;
}
.gallery-nav {
width: 50px;
height: 50px;
}
.gallery-dots {
display: none;
}
}
/* Desktop - 1280px-1439px */
@media (min-width: 1280px) and (max-width: 1439px) {
.day-schedule {
padding: 90px 0;
}
.day-schedule-container {
max-width: 1200px;
padding: 0 2rem;
}
.cubes-decoration {
width: 130px;
left: 60px;
top: -18px;
}
.day-schedule-title {
font-size: 22px;
margin-bottom: 18px;
}
.day-schedule-subtitle {
font-size: 18px;
margin-bottom: 50px;
max-width: 700px;
}
.photo-gallery {
max-width: 1000px;
gap: 18px;
grid-template-columns: repeat(4, 1fr);
}
.photo-item {
height: 350px;
}
.gallery-nav {
width: 45px;
height: 45px;
}
.gallery-dots {
display: none;
}
}
/* Desktop - 1024px-1279px */
@media (min-width: 1024px) and (max-width: 1279px) {
.day-schedule {
padding: 80px 0;
}
.day-schedule-container {
max-width: 1000px;
padding: 0 1.5rem;
}
.cubes-decoration {
width: 120px;
left: 40px;
top: -15px;
}
.day-schedule-title {
font-size: 20px;
margin-bottom: 16px;
}
.day-schedule-subtitle {
font-size: 16px;
margin-bottom: 40px;
max-width: 600px;
}
.photo-gallery {
max-width: 900px;
gap: 15px;
grid-template-columns: repeat(4, 1fr);
}
.photo-item {
height: 300px;
}
.gallery-nav {
width: 40px;
height: 40px;
}
.gallery-dots {
display: none;
}
}
/* Tablet - 768px-1023px */
@media (min-width: 768px) and (max-width: 1023px) {
.day-schedule {
padding: 70px 0;
}
.day-schedule-container {
padding: 0 1rem;
}
.cubes-decoration {
width: 100px;
left: 20px;
top: -12px;
}
.day-schedule-title {
font-size: 18px;
margin-bottom: 14px;
}
.day-schedule-subtitle {
font-size: 15px;
margin-bottom: 35px;
max-width: 500px;
}
.photo-gallery {
grid-template-columns: repeat(2, 1fr);
gap: 15px;
max-width: 600px;
}
.photo-item {
height: 250px;
}
.gallery-nav {
width: 35px;
height: 35px;
}
.gallery-dots {
display: none;
}
}
/* Mobile - 414px-767px */
@media (max-width: 767px) {
.day-schedule {
padding: 50px 0;
overflow-x: hidden;
margin-bottom: 40px;
}
.day-schedule-container {
padding: 0 1rem;
max-width: 100%;
overflow: hidden;
}
.cubes-decoration {
position: absolute;
top: 20px;
left: 0px;
width: 60px;
z-index: 1;
}
.day-schedule-title {
font-size: 16px;
margin-bottom: 12px;
text-transform: none;
padding-top: 40px;
}
.day-schedule-subtitle {
font-size: 14px;
margin-bottom: 30px;
max-width: 100%;
}
.gallery-wrapper {
gap: 10px;
align-items: center;
width: 100%;
overflow: hidden;
}
.photo-gallery {
grid-template-columns: 1fr;
gap: 0;
max-width: calc(100vw - 120px);
width: 100%;
position: relative;
overflow: hidden;
}
.photo-item {
height: 350px;
width: 100%;
border-radius: 20px;
overflow: hidden;
display: none;
margin: 0 auto;
max-width: 280px;
}
.photo-item.active {
display: block;
}
.gallery-photo {
width: 100%;
height: 100%;
object-fit: cover;
}
.gallery-nav {
width: 40px;
height: 40px;
flex-shrink: 0;
z-index: 2;
background: var(--color-button);
border: none;
border-radius: 50%;
color: var(--color-button-text);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.3s ease;
}
.gallery-nav:hover {
transform: scale(1.1);
}
.gallery-nav svg {
width: 20px;
height: 20px;
}
.gallery-dots {
display: flex;
justify-content: center;
gap: 8px;
margin-top: 20px;
}
.gallery-dot {
width: 12px;
height: 12px;
border-radius: 50%;
background: #E0E0E0;
cursor: pointer;
transition: all 0.3s ease;
}
.gallery-dot.active {
background: var(--color-card-2);
}
}
/* Mobile - 375px-413px */
@media (min-width: 375px) and (max-width: 413px) {
.day-schedule-title {
font-size: 15px;
text-transform: none;
margin-bottom: 40px;
}
.day-schedule-subtitle {
font-size: 13px;
}
.photo-item {
height: 320px;
max-width: 260px;
}
.gallery-nav {
width: 36px;
height: 36px;
}
.gallery-nav svg {
width: 18px;
height: 18px;
}
.gallery-dot {
width: 10px;
height: 10px;
}
}
/* Mobile - 360px-374px */
@media (min-width: 360px) and (max-width: 374px) {
.day-schedule-title {
font-size: 14px;
text-transform: none;
margin-bottom: 40px;
}
.day-schedule-subtitle {
font-size: 12px;
}
.photo-item {
height: 300px;
max-width: 240px;
}
.gallery-nav {
width: 34px;
height: 34px;
}
.gallery-nav svg {
width: 16px;
height: 16px;
}
.gallery-dot {
width: 9px;
height: 9px;
}
}
/* Mobile - 320px-359px */
@media (min-width: 320px) and (max-width: 359px) {
.day-schedule-container {
padding: 0 0.8rem;
margin-bottom: 40px;
}
.day-schedule-title {
font-size: 13px;
text-transform: none;
}
.day-schedule-subtitle {
font-size: 11px;
}
.gallery-wrapper {
gap: 8px;
}
.photo-gallery {
max-width: calc(100vw - 100px);
}
.photo-item {
height: 280px;
max-width: 200px;
}
.gallery-nav {
width: 30px;
height: 30px;
}
.gallery-nav svg {
width: 14px;
height: 14px;
}
.gallery-dot {
width: 8px;
height: 8px;
}
}
/* Additional mobile-specific styles */
@media (max-width: 767px) {
.gallery-wrapper {
display: flex;
justify-content: center;
align-items: center;
margin: 0 auto;
max-width: 100%;
}
.photo-gallery {
display: flex;
justify-content: center;
}
}
/* ============================================
Newsletter Section
============================================ */
.newsletter {
position: relative;
min-height: 500px;
margin-bottom: 150px;
overflow: hidden;
}
.newsletter-bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
z-index: 0;
}
.newsletter-container {
max-width: 1440px;
margin: 0 auto;
position: relative;
text-align: center;
z-index: 1;
min-height: 546px;
display: flex;
align-items: center;
justify-content: center;
}
.dino-decoration {
position: absolute;
bottom: 0px;
left: 80px;
width: 200px;
height: auto;
z-index: 2;
}
.rocket-decoration {
position: absolute;
top: 200px;
right: 100px;
width: 50px;
height: auto;
z-index: 2;
}
.newsletter-content {
position: relative;
z-index: 3;
max-width: 862px;
margin: 0 auto;
margin-top: 130px;
}
.newsletter-title {
font-family: 'Comfortaa', sans-serif;
font-size: 32px;
font-weight: 700;
color: var(--color-text);
margin-bottom: 20px;
line-height: 1.3;
}
.newsletter-subtitle {
font-size: 18px;
font-weight: 300;
color: var(--color-text);
margin-bottom: 40px;
line-height: 1.5;
max-width: 600px;
margin-left: auto;
margin-right: auto;
}
.newsletter-form {
display: flex;
gap: 15px;
max-width: 564px;
margin: 0 auto;
align-items: center;
}
.newsletter-input {
flex: 1;
padding: 15px 20px;
border: 2px solid var(--color-border-light);
border-radius: 15px;
font-size: 16px;
font-family: 'Comfortaa', sans-serif;
background: white;
color: var(--color-text);
outline: none;
transition: all 0.3s ease;
}
.newsletter-input:focus {
border-color: var(--color-button);
box-shadow: 0 0 0 3px rgba(180, 217, 198, 0.2);
}
.newsletter-input::placeholder {
color: var(--color-text-hover);
font-family: 'Comfortaa', sans-serif;
}
.newsletter-button {
background: var(--color-button);
color: var(--color-button-text);
padding: 15px 30px;
border: none;
border-radius: 15px;
font-weight: 600;
font-size: 16px;
font-family: 'Comfortaa', sans-serif;
cursor: pointer;
transition: all 0.3s ease;
white-space: nowrap;
}
.newsletter-button:hover {
background: var(--color-button-hover);
transform: translateY(-2px);
}
/* ============================================
Newsletter Responsive
============================================ */
/* 1920px+ */
@media (min-width: 1920px) {
.newsletter {
height: 320px;
min-height: 610px;
}
.newsletter-container {
max-width: 1600px;
padding: 0 3rem;
}
.newsletter-content {
width: 1000px;
max-width: 1000px;
padding-bottom: 100px;
}
.newsletter-title {
font-size: 38px;
margin-bottom: 25px;
}
.newsletter-subtitle {
font-size: 20px;
margin-bottom: 50px;
}
.newsletter-form {
max-width: 600px;
gap: 20px;
}
.newsletter-input,
.newsletter-button {
padding: 18px 25px;
font-size: 18px;
}
.dino-decoration {
width: 250px;
left: 120px;
bottom: 30px;
}
.rocket-decoration {
width: 140px;
right: 120px;
top: 30px;
}
}
/* 1600px-1919px */
@media (min-width: 1600px) and (max-width: 1919px) {
.newsletter {
height: 300px;
}
.newsletter-container {
max-width: 1500px;
padding: 0 2.5rem;
}
.newsletter-content {
width: 950px;
max-width: 950px;
padding-bottom: 90px;
}
.newsletter-title {
font-size: 36px;
margin-bottom: 22px;
}
.newsletter-subtitle {
font-size: 19px;
margin-bottom: 45px;
}
.newsletter-form {
max-width: 550px;
gap: 18px;
}
.newsletter-input,
.newsletter-button {
padding: 16px 22px;
font-size: 17px;
}
.dino-decoration {
width: 230px;
left: 100px;
bottom: 64px;
}
.rocket-decoration {
width: 130px;
right: 100px;
top: 25px;
}
}
/* 1440px-1599px */
@media (min-width: 1440px) and (max-width: 1599px) {
.newsletter {
height: 274px;
}
.newsletter-container {
max-width: 1400px;
padding: 0 2rem;
}
.newsletter-content {
width: 861px;
max-width: 861px;
padding-bottom: 82px;
}
.newsletter-title {
font-size: 32px;
margin-bottom: 20px;
}
.newsletter-subtitle {
font-size: 18px;
margin-bottom: 40px;
}
.newsletter-form {
max-width: 500px;
gap: 15px;
}
.newsletter-input,
.newsletter-button {
padding: 15px 20px;
font-size: 16px;
}
.dino-decoration {
width: 200px;
left: 80px;
bottom: 50px;
}
.rocket-decoration {
width: 60px;
right: 100px;
top: 100px;
}
}
/* 1280px-1439px */
@media (min-width: 1280px) and (max-width: 1439px) {
.newsletter {
height: 260px;
}
.newsletter-container {
max-width: 1200px;
padding: 0 2rem;
}
.newsletter-content {
width: 750px;
max-width: 750px;
padding-bottom: 70px;
}
.newsletter-title {
font-size: 28px;
margin-bottom: 18px;
}
.newsletter-subtitle {
font-size: 16px;
margin-bottom: 35px;
}
.newsletter-form {
max-width: 450px;
gap: 12px;
}
.newsletter-input,
.newsletter-button {
padding: 14px 18px;
font-size: 15px;
}
.dino-decoration {
width: 180px;
left: 60px;
bottom: 55px;
}
.rocket-decoration {
width: 100px;
right: 80px;
top: 15px;
}
}
/* 1024px-1279px */
@media (min-width: 1024px) and (max-width: 1279px) {
.newsletter {
height: 240px;
}
.newsletter-container {
max-width: 1000px;
padding: 0 1.5rem;
}
.newsletter-content {
width: 650px;
max-width: 650px;
padding-bottom: 60px;
}
.newsletter-title {
font-size: 24px;
margin-bottom: 16px;
}
.newsletter-subtitle {
font-size: 15px;
margin-bottom: 30px;
}
.newsletter-form {
max-width: 400px;
gap: 10px;
}
.newsletter-input,
.newsletter-button {
padding: 12px 16px;
font-size: 14px;
}
.dino-decoration {
width: 160px;
left: 40px;
bottom: 54px;
}
.rocket-decoration {
width: 90px;
right: 60px;
top: 70px;
}
}
/* 768px-1023px */
@media (min-width: 768px) and (max-width: 1023px) {
.newsletter {
height: 220px;
}
.newsletter-container {
padding: 0 1rem;
}
.newsletter-content {
width: 90%;
max-width: 550px;
padding-bottom: 50px;
}
.newsletter-title {
font-size: 20px;
margin-bottom: 14px;
}
.newsletter-subtitle {
font-size: 14px;
margin-bottom: 25px;
}
.newsletter-form {
max-width: 350px;
gap: 8px;
}
.newsletter-input,
.newsletter-button {
padding: 10px 14px;
font-size: 13px;
border-radius: 10px;
}
.dino-decoration {
width: 120px;
left: 20px;
bottom: 55px;
}
.rocket-decoration {
width: 70px;
right: 40px;
top: 55px;
}
}
/* Mobile 414px-767px */
@media (max-width: 767px) {
.newsletter {
height: auto;
min-height: 200px;
padding: 40px 0;
}
.newsletter-container {
padding: 0 1rem;
height: auto;
min-height: 450px;
}
.newsletter-content {
width: 100%;
max-width: 100%;
padding-bottom: 0;
}
.newsletter-title {
font-size: 18px;
margin-bottom: 12px;
text-transform: none;
}
.newsletter-subtitle {
font-size: 13px;
margin-bottom: 25px;
}
.newsletter-form {
flex-direction: column;
max-width: 100%;
gap: 15px;
}
.newsletter-input {
width: 100%;
padding: 12px 18px;
font-size: 14px;
}
.newsletter-button {
width: 100%;
padding: 12px 18px;
font-size: 14px;
}
.dino-decoration {
display: none;
}
.rocket-decoration {
width: 60px;
right: 20px;
top: 20px;
}
}
/* 375px-413px */
@media (min-width: 375px) and (max-width: 413px) {
.newsletter-title {
font-size: 17px;
text-transform: none;
}
.newsletter-subtitle {
font-size: 12px;
}
.newsletter-input,
.newsletter-button {
padding: 11px 16px;
font-size: 13px;
}
.rocket-decoration {
width: 55px;
right: 15px;
top: 110px;
}
}
/* 360px-374px */
@media (min-width: 360px) and (max-width: 374px) {
.newsletter-title {
font-size: 16px;
text-transform: none;
}
.newsletter-subtitle {
font-size: 11px;
}
.newsletter-input,
.newsletter-button {
padding: 10px 14px;
font-size: 12px;
}
.rocket-decoration {
width: 50px;
right: 12px;
top: 12px;
}
}
/* 320px-359px */
@media (min-width: 320px) and (max-width: 359px) {
.newsletter-container {
padding: 0 0.8rem;
}
.newsletter-title {
font-size: 15px;
text-transform: none;
}
.newsletter-subtitle {
font-size: 10px;
}
.newsletter-input,
.newsletter-button {
padding: 9px 12px;
font-size: 11px;
}
.rocket-decoration {
width: 45px;
right: 10px;
top: 40px;
}
}
/* ============================================
Teachers Section
============================================ */
.teachers {
background: var(--color-background);
position: relative;
padding: 100px 0;
margin-bottom: 150px;
}
.teachers-container {
max-width: 1400px;
margin: 0 auto;
padding: 0 2rem;
position: relative;
}
.teachers-content {
text-align: center;
position: relative;
z-index: 2;
}
.teachers-title {
font-family: 'Comfortaa', sans-serif;
font-size: 24px;
font-weight: 700;
color: var(--color-text);
margin-bottom: 20px;
line-height: 1.2;
text-transform: uppercase;
}
.teachers-subtitle {
font-size: 20px;
font-weight: 300;
color: var(--color-text);
margin-bottom: 60px;
max-width: 800px;
margin-left: auto;
margin-right: auto;
line-height: 1.5;
}
.teachers-wrapper {
position: relative;
display: flex;
align-items: center;
gap: 30px;
}
.teachers-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 30px;
max-width: 1200px;
margin: 0 auto;
flex: 1;
}
.teacher-card {
text-align: center;
transition: transform 0.3s ease;
}
.teacher-card:hover {
transform: translateY(-5px);
}
.teacher-photo {
width: 100%;
height: auto;
border-radius: 20px;
margin-bottom: 20px;
display: block;
}
.teacher-name {
font-family: 'Comfortaa', sans-serif;
font-size: 20px;
font-weight: 700;
color: var(--color-text);
margin-bottom: 8px;
line-height: 1.2;
}
.teacher-role {
font-size: 16px;
font-weight: 400;
color: var(--color-card-2);
line-height: 1.3;
margin: 0;
}
.teachers-nav {
display: none;
width: 50px;
height: 50px;
border: none;
border-radius: 50%;
background: var(--nav-bg);
color: var(--color-button-text);
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.3s ease;
flex-shrink: 0;
}
.teachers-nav:hover {
transform: scale(1.1);
}
.teachers-nav svg {
width: 24px;
height: 24px;
}
.teacher-nav-btn {
width: 50px;
height: 50px;
border: none;
border-radius: 50%;
background: var(--nav-bg);
color: var(--color-button-text);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.3s ease;
flex-shrink: 0;
}
.teacher-nav-btn:hover {
transform: scale(1.1);
}
.teacher-nav-btn svg {
width: 24px;
height: 24px;
}
.teacher-prev {
order: -1;
}
.teacher-next {
order: 1;
}
.teacher-dots {
display: none;
justify-content: center;
gap: 8px;
margin-top: 20px;
}
.teacher-dot {
width: 12px;
height: 12px;
border-radius: 50%;
background: #E0E0E0;
cursor: pointer;
transition: all 0.3s ease;
}
.teacher-dot.active {
background: var(--color-card-2);
}
/* ============================================
Teachers Responsive
============================================ */
/* 1920px+ */
@media (min-width: 1920px) {
.teachers {
padding: 120px 0;
}
.teachers-container {
max-width: 1600px;
padding: 0 3rem;
}
.teachers-title {
font-size: 28px;
margin-bottom: 25px;
}
.teachers-subtitle {
font-size: 22px;
margin-bottom: 80px;
max-width: 900px;
}
.teachers-grid {
max-width: 1400px;
gap: 40px;
}
.teacher-name {
font-size: 22px;
}
.teacher-role {
font-size: 18px;
}
}
/* 1600px-1919px */
@media (min-width: 1600px) and (max-width: 1919px) {
.teachers {
padding: 110px 0;
}
.teachers-container {
max-width: 1500px;
padding: 0 2.5rem;
}
.teachers-title {
font-size: 26px;
margin-bottom: 22px;
}
.teachers-subtitle {
font-size: 21px;
margin-bottom: 70px;
max-width: 850px;
}
.teachers-grid {
max-width: 1300px;
gap: 35px;
}
.teacher-name {
font-size: 21px;
}
.teacher-role {
font-size: 17px;
}
}
/* 1440px-1599px */
@media (min-width: 1440px) and (max-width: 1599px) {
.teachers {
padding: 100px 0;
}
.teachers-container {
max-width: 1400px;
padding: 0 2rem;
}
.teachers-title {
font-size: 24px;
margin-bottom: 20px;
}
.teachers-subtitle {
font-size: 20px;
margin-bottom: 60px;
max-width: 800px;
}
.teachers-grid {
max-width: 1200px;
gap: 30px;
}
.teacher-name {
font-size: 20px;
}
.teacher-role {
font-size: 16px;
}
}
/* 1280px-1439px */
@media (min-width: 1280px) and (max-width: 1439px) {
.teachers {
padding: 90px 0;
}
.teachers-container {
max-width: 1200px;
padding: 0 2rem;
}
.teachers-title {
font-size: 22px;
margin-bottom: 18px;
}
.teachers-subtitle {
font-size: 18px;
margin-bottom: 50px;
max-width: 700px;
}
.teachers-grid {
max-width: 1000px;
gap: 25px;
}
.teacher-name {
font-size: 18px;
}
.teacher-role {
font-size: 15px;
}
}
/* 1024px-1279px */
@media (min-width: 1024px) and (max-width: 1279px) {
.teachers {
padding: 80px 0;
}
.teachers-container {
max-width: 1000px;
padding: 0 1.5rem;
}
.teachers-title {
font-size: 20px;
margin-bottom: 16px;
}
.teachers-subtitle {
font-size: 16px;
margin-bottom: 40px;
max-width: 600px;
}
.teachers-grid {
max-width: 900px;
gap: 20px;
}
.teacher-name {
font-size: 16px;
}
.teacher-role {
font-size: 14px;
}
}
/* 768px-1023px */
@media (min-width: 768px) and (max-width: 1023px) {
.teachers {
padding: 70px 0;
}
.teachers-container {
padding: 0 1rem;
}
.teachers-title {
font-size: 18px;
margin-bottom: 14px;
}
.teachers-subtitle {
font-size: 15px;
margin-bottom: 35px;
max-width: 500px;
}
.teachers-grid {
grid-template-columns: repeat(2, 1fr);
gap: 20px;
max-width: 600px;
}
.teacher-name {
font-size: 16px;
}
.teacher-role {
font-size: 14px;
}
}
/* Mobile-specific styles */
@media (max-width: 767px) {
.teachers-wrapper {
display: flex;
justify-content: center;
align-items: flex-start;
margin: 0 auto;
max-width: 100%;
min-height: 420px;
}
.teachers-grid {
display: flex;
justify-content: center;
min-height: 420px;
}
}
@media (min-width: 415px) and (max-width: 767px) {
.teachers {
padding: 50px 0;
margin-bottom: 100px;
overflow-x: hidden;
}
.teachers-container {
padding: 0 1rem;
max-width: 100%;
overflow: hidden;
}
.teachers-title {
font-size: 16px;
margin-bottom: 12px;
text-transform: none;
}
.teachers-subtitle {
font-size: 14px;
margin-bottom: 30px;
max-width: 100%;
}
.teachers-wrapper {
gap: 10px;
align-items: center;
width: 100%;
overflow: hidden;
}
.teachers-grid {
grid-template-columns: 1fr;
gap: 0;
max-width: calc(100vw - 120px);
width: 100%;
position: relative;
overflow: hidden;
min-height: 420px;
}
.teacher-card {
height: 400px;
width: 100%;
border-radius: 20px;
overflow: hidden;
display: none;
margin: 0 auto;
max-width: 280px;
}
.teacher-card.active {
display: block;
}
.teacher-photo {
width: 100%;
height: 300px;
object-fit: cover;
}
.teachers-nav {
display: flex;
width: 40px;
height: 40px;
flex-shrink: 0;
z-index: 2;
background: var(--color-button);
border: none;
border-radius: 50%;
color: var(--color-button-text);
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.3s ease;
}
.teachers-nav:hover {
transform: scale(1.1);
}
.teachers-nav svg {
width: 20px;
height: 20px;
}
.teacher-dots {
display: flex;
justify-content: center;
gap: 8px;
margin-top: 20px;
}
.teacher-name {
font-size: 16px;
}
.teacher-role {
font-size: 14px;
}
}
/* Mobile 414px */
@media (max-width: 414px) {
.teachers {
padding: 50px 0;
overflow-x: hidden;
margin-bottom: 80px;
}
.teachers-container {
padding: 0 1rem;
max-width: 100%;
overflow: hidden;
}
.teachers-wrapper {
display: flex;
justify-content: center;
align-items: center;
margin: 0 auto;
max-width: 100%;
gap: 10px;
}
.teachers-grid {
display: flex;
justify-content: center;
grid-template-columns: 1fr;
gap: 0;
max-width: calc(100vw - 120px);
min-height: 360px;
}
.teachers-nav {
display: flex;
width: 40px;
height: 40px;
flex-shrink: 0;
z-index: 2;
background: var(--color-button);
border: none;
border-radius: 50%;
color: var(--color-button-text);
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.3s ease;
}
.teachers-nav:hover {
transform: scale(1.1);
}
.teachers-nav svg {
width: 20px;
height: 20px;
}
.teacher-dots {
display: flex;
justify-content: center;
gap: 8px;
margin-top: 20px;
}
.teacher-card {
height: 360px;
width: 100%;
border-radius: 20px;
overflow: hidden;
display: none;
margin: 0 auto;
max-width: 260px;
}
.teacher-card.active {
display: block;
}
.teacher-photo {
width: 100%;
height: 300px;
object-fit: cover;
}
.teachers-title {
font-size: 15px;
text-transform: none;
}
.teachers-subtitle {
font-size: 13px;
margin-bottom: 0;
}
.teacher-name {
font-size: 15px;
}
.teacher-role {
font-size: 13px;
}
}
/* Mobile 375px */
@media (max-width: 375px) {
.teacher-card {
height: 380px;
max-width: 240px;
}
.teacher-photo {
width: 100%;
height: 300px;
object-fit: cover;
}
.teachers-nav {
width: 36px;
height: 36px;
}
.teachers-nav svg {
width: 18px;
height: 18px;
}
.teachers-title {
font-size: 14px;
text-transform: none;
}
.teachers-subtitle {
font-size: 12px;
}
.teacher-name {
font-size: 14px;
}
.teacher-role {
font-size: 12px;
}
.teacher-dot {
width: 10px;
height: 10px;
}
}
/* Mobile 360px */
@media (max-width: 360px) {
.teacher-card {
height: 370px;
max-width: 220px;
}
.teacher-photo {
width: 100%;
height: 300px;
object-fit: cover;
}
.teachers-nav {
width: 34px;
height: 34px;
}
.teachers-nav svg {
width: 16px;
height: 16px;
}
.teachers-title {
font-size: 13px;
text-transform: none;
}
.teachers-subtitle {
font-size: 11px;
}
.teacher-name {
font-size: 13px;
}
.teacher-role {
font-size: 11px;
}
.teacher-dot {
width: 9px;
height: 9px;
}
}
/* Mobile 320px */
@media (max-width: 320px) {
.teachers-container {
padding: 0 0.8rem;
}
.teachers-wrapper {
gap: 8px;
min-height: 420px;
align-items: flex-start;
}
.teachers-grid {
max-width: calc(100vw - 100px);
min-height: 420px;
}
.teacher-card {
height: 360px;
max-width: 200px;
}
.teacher-photo {
width: 100%;
height: 300px;
object-fit: cover;
}
.teachers-title {
font-size: 12px;
text-transform: none;
}
.teachers-subtitle {
font-size: 10px;
}
.teachers-nav {
width: 30px;
height: 30px;
}
.teachers-nav svg {
width: 14px;
height: 14px;
}
.teacher-name {
font-size: 12px;
}
.teacher-role {
font-size: 10px;
}
.teacher-dot {
width: 8px;
height: 8px;
}
}
/* ============================================
About Section
============================================ */
.about {
background: var(--color-background);
padding: 0 0 150px 0;
position: relative;
}
.about-container {
max-width: 1400px;
margin: 0 auto;
padding: 0 2rem;
display: flex;
align-items: center;
gap: 4rem;
}
.about-left {
position: relative;
flex: 1;
}
.about-photo {
width: 100%;
height: auto;
border-radius: 30px;
position: relative;
z-index: 2;
}
.about-right {
width: 580px;
position: relative;
}
.about-title {
font-family: 'Comfortaa', sans-serif;
font-size: 24px;
font-weight: 700;
color: var(--color-text);
margin-bottom: 1rem;
line-height: 1.2;
text-transform: uppercase;
}
.about-description {
font-family: 'Comfortaa', sans-serif;
font-size: 18px;
font-weight: 400;
color: var(--color-text);
line-height: 1.5;
margin-bottom: 2rem;
}
.about-advantages-title {
font-family: 'Comfortaa', sans-serif;
font-size: 20px;
font-weight: 700;
color: var(--color-text);
margin-bottom: 1.5rem;
line-height: 1.2;
}
.about-advantages-list {
list-style: none;
padding: 0;
}
.about-advantages-item {
display: flex;
align-items: flex-start;
gap: 1rem;
margin-bottom: 1rem;
font-family: 'Comfortaa', sans-serif;
font-size: 16px;
font-weight: 400;
color: var(--color-text);
line-height: 1.5;
}
.about-advantages-item::before {
content: '✓';
color: white;
font-weight: 700;
font-size: 14px;
flex-shrink: 0;
width: 20px;
height: 20px;
background: var(--color-button);
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
margin-top: 2px;
}
/* ============================================
About Responsive
============================================ */
/* 1920px+ */
@media (min-width: 1920px) {
.about-container {
max-width: 1600px;
gap: 6rem;
}
.about-right {
width: 680px;
}
.about-title {
font-size: 28px;
margin-bottom: 1.25rem;
}
.about-description {
font-size: 20px;
margin-bottom: 2.5rem;
}
.about-advantages-title {
font-size: 22px;
margin-bottom: 1.8rem;
}
.about-advantages-item {
font-size: 18px;
margin-bottom: 1.2rem;
}
}
/* 1600px-1919px */
@media (min-width: 1600px) and (max-width: 1919px) {
.about-container {
max-width: 1500px;
gap: 5rem;
}
.about-right {
width: 640px;
}
.about-title {
font-size: 26px;
margin-bottom: 1.1rem;
}
.about-description {
font-size: 19px;
margin-bottom: 2.2rem;
}
.about-advantages-title {
font-size: 21px;
margin-bottom: 1.6rem;
}
.about-advantages-item {
font-size: 17px;
margin-bottom: 1.1rem;
}
}
/* 1440px-1599px */
@media (min-width: 1440px) and (max-width: 1599px) {
.about-container {
gap: 4rem;
}
.about-right {
width: 580px;
}
.about-title {
font-size: 24px;
margin-bottom: 1rem;
}
.about-description {
font-size: 18px;
margin-bottom: 2rem;
}
.about-advantages-title {
font-size: 20px;
margin-bottom: 1.5rem;
}
.about-advantages-item {
font-size: 16px;
margin-bottom: 1rem;
}
}
/* 1280px-1439px */
@media (min-width: 1280px) and (max-width: 1439px) {
.about-container {
gap: 3rem;
}
.about-right {
width: 520px;
}
.about-title {
font-size: 22px;
margin-bottom: 0.9rem;
}
.about-description {
font-size: 16px;
margin-bottom: 1.8rem;
}
.about-advantages-title {
font-size: 18px;
margin-bottom: 1.3rem;
}
.about-advantages-item {
font-size: 15px;
margin-bottom: 0.9rem;
}
}
/* 1024px-1279px */
@media (min-width: 1024px) and (max-width: 1279px) {
.about-container {
gap: 2rem;
padding: 0 1rem;
}
.about-left {
max-width: 420px;
}
.about-right {
width: 580px;
}
.about-title {
font-size: 20px;
margin-bottom: 0.8rem;
}
.about-description {
font-size: 15px;
margin-bottom: 1.6rem;
}
.about-advantages-title {
font-size: 16px;
margin-bottom: 1.2rem;
}
.about-advantages-item {
font-size: 14px;
margin-bottom: 0.8rem;
}
}
/* 768px */
@media (max-width: 768px) {
.about-container {
flex-direction: column;
gap: 2.5rem;
text-align: center;
padding: 0 1rem;
}
.about-left {
order: 1;
max-width: 400px;
margin: 0 auto;
}
.about-right {
order: 2;
width: 100%;
max-width: 500px;
margin: 0 auto;
}
.about-title {
font-size: 20px;
margin-bottom: 1rem;
text-transform: none;
}
.about-description {
font-size: 16px;
margin-bottom: 2rem;
text-align: left;
}
.about-advantages-title {
font-size: 18px;
margin-bottom: 1.5rem;
text-align: left;
}
.about-advantages-item {
font-size: 15px;
margin-bottom: 1rem;
text-align: left;
}
}
/* 414px */
@media (max-width: 414px) {
.about {
padding: 0 0 100px 0;
}
.about-container {
padding: 0 1rem;
gap: 2rem;
}
.about-left {
max-width: 320px;
}
.about-right {
max-width: 100%;
}
.about-title {
font-size: 18px;
margin-bottom: 0.8rem;
text-transform: none;
}
.about-description {
font-size: 14px;
margin-bottom: 1.5rem;
text-align: center;
}
.about-advantages-title {
font-size: 16px;
margin-bottom: 1.2rem;
}
.about-advantages-item {
font-size: 13px;
margin-bottom: 0.8rem;
}
}
/* 375px */
@media (max-width: 375px) {
.about-container {
padding: 0 0.8rem;
gap: 1.8rem;
}
.about-left {
max-width: 300px;
}
.about-title {
font-size: 17px;
text-transform: none;
}
.about-description {
font-size: 13px;
}
.about-advantages-title {
font-size: 15px;
}
.about-advantages-item {
font-size: 12px;
}
}
/* 360px */
@media (max-width: 360px) {
.about-left {
max-width: 280px;
}
.about-title {
font-size: 16px;
text-transform: none;
}
.about-description {
font-size: 12px;
}
.about-advantages-title {
font-size: 14px;
}
.about-advantages-item {
font-size: 11px;
}
}
/* 320px */
@media (max-width: 320px) {
.about-container {
padding: 0 0.6rem;
gap: 1.5rem;
}
.about-left {
max-width: 260px;
}
.about-title {
font-size: 15px;
text-transform: none;
}
.about-description {
font-size: 11px;
}
.about-advantages-title {
font-size: 13px;
}
.about-advantages-item {
font-size: 10px;
}
}
/* ============================================
Parents Section
============================================ */
.parents-section {
position: relative;
background: url('data:image/svg+xml,') center top/cover no-repeat;
padding: 80px 0;
margin-bottom: 150px;
min-height: 513px;
}
.parents-container {
max-width: 1400px;
margin: 0 auto;
padding: 0 2rem;
text-align: center;
position: relative;
z-index: 2;
}
.parents-title {
font-family: 'Comfortaa', sans-serif;
font-size: 24px;
font-weight: 700;
color: white;
margin-bottom: 20px;
line-height: 1.2;
text-transform: uppercase;
}
.parents-subtitle {
font-size: 20px;
font-weight: 300;
color: white;
margin-bottom: 60px;
max-width: 700px;
margin-left: auto;
margin-right: auto;
line-height: 1.5;
}
.parents-cards {
display: flex;
justify-content: center;
gap: 50px;
flex-wrap: wrap;
max-width: 1200px;
margin: 0 auto;
}
.parents-card {
position: relative;
text-align: center;
transition: transform 0.3s ease;
cursor: pointer;
width: 200px;
height: 200px;
}
.parents-card:hover {
transform: translateY(-5px);
}
.parents-card-blob {
width: 200px;
height: 200px;
display: block;
}
.parents-card-title {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-family: 'Comfortaa', sans-serif;
font-size: 16px;
font-weight: 600;
color: var(--color-text);
margin: 0;
line-height: 1.3;
max-width: 140px;
text-align: center;
}
/* ============================================
Parents Section Fixed Responsive
============================================ */
/* 1920px+ */
@media (min-width: 1920px) {
.parents-section {
padding: 120px 0;
}
.parents-container {
max-width: 1600px;
padding: 0 3rem;
}
.parents-title {
font-size: 28px;
margin-bottom: 25px;
}
.parents-subtitle {
font-size: 22px;
margin-bottom: 80px;
max-width: 800px;
}
.parents-cards {
gap: 40px;
max-width: 1400px;
}
.parents-card {
width: 220px;
height: 220px;
}
.parents-card-blob {
width: 220px;
height: 220px;
}
.parents-card-title {
font-size: 18px;
max-width: 160px;
}
}
/* 1600px-1919px */
@media (min-width: 1600px) and (max-width: 1919px) {
.parents-section {
padding: 110px 0;
}
.parents-container {
max-width: 1500px;
padding: 0 2.5rem;
}
.parents-title {
font-size: 26px;
margin-bottom: 22px;
}
.parents-subtitle {
font-size: 21px;
margin-bottom: 70px;
max-width: 750px;
}
.parents-cards {
gap: 35px;
max-width: 1300px;
}
.parents-card {
width: 210px;
height: 210px;
}
.parents-card-blob {
width: 210px;
height: 210px;
}
.parents-card-title {
font-size: 17px;
max-width: 150px;
}
}
/* 1280px-1599px */
@media (min-width: 1280px) and (max-width: 1599px) {
.parents-section {
padding: 90px 0;
}
.parents-container {
max-width: 1200px;
padding: 0 2rem;
}
.parents-title {
font-size: 22px;
margin-bottom: 18px;
}
.parents-subtitle {
font-size: 18px;
margin-bottom: 50px;
max-width: 650px;
}
.parents-cards {
gap: 55px;
max-width: 1200px;
}
.parents-card {
width: 180px;
height: 180px;
}
.parents-card-blob {
width: 180px;
height: 180px;
}
.parents-card-title {
font-size: 15px;
max-width: 130px;
}
}
/* 1024px-1279px */
@media (min-width: 1024px) and (max-width: 1279px) {
.parents-section {
padding: 80px 0;
}
.parents-container {
max-width: 1000px;
padding: 0 1.5rem;
}
.parents-title {
font-size: 20px;
margin-bottom: 16px;
}
.parents-subtitle {
font-size: 16px;
margin-bottom: 40px;
max-width: 600px;
}
.parents-cards {
gap: 20px;
max-width: 900px;
}
.parents-card {
width: 160px;
height: 160px;
}
.parents-card-blob {
width: 160px;
height: 160px;
}
.parents-card-title {
font-size: 14px;
max-width: 120px;
}
}
/* 768px - все в одну строку */
@media (max-width: 768px) and (min-width: 415px) {
.parents-section {
padding: 60px 0;
margin-bottom: 100px;
}
.parents-container {
padding: 0 1rem;
}
.parents-title {
font-size: 18px;
margin-bottom: 14px;
text-transform: none;
}
.parents-subtitle {
font-size: 15px;
margin-bottom: 40px;
max-width: 100%;
}
.parents-cards {
gap: 35px;
max-width: 100%;
justify-content: center;
flex-wrap: nowrap;
}
.parents-card {
width: 120px;
height: 120px;
}
.parents-card-blob {
width: 120px;
height: 120px;
}
.parents-card-title {
font-size: 11px;
max-width: 90px;
}
}
/* Mobile Grid 3x2 - 414px and below */
@media (max-width: 414px) {
.parents-section {
padding: 50px 0;
margin-bottom: 80px;
}
.parents-container {
padding: 0 1rem;
}
.parents-title {
font-size: 16px;
margin-bottom: 12px;
text-transform: none;
}
.parents-subtitle {
font-size: 14px;
margin-bottom: 30px;
}
.parents-cards {
display: flex;
flex-wrap: wrap;
gap: 15px;
max-width: 100%;
margin: 0 auto;
justify-content: center;
}
.parents-card {
width: 100px;
height: 100px;
flex: 0 0 calc(33.333% - 10px);
max-width: 100px;
}
.parents-card-blob {
width: 100px;
height: 100px;
}
.parents-card-title {
font-size: 11px;
max-width: 80px;
}
.parents-card:nth-child(4),
.parents-card:nth-child(5) {
flex: 0 0 100px;
margin: 0 7.5px;
}
}
/* 375px */
@media (max-width: 375px) {
.parents-title {
font-size: 15px;
text-transform: none;
}
.parents-subtitle {
font-size: 13px;
}
.parents-cards {
gap: 12px;
}
.parents-card {
width: 90px;
height: 90px;
}
.parents-card-blob {
width: 90px;
height: 90px;
}
.parents-card-title {
font-size: 10px;
max-width: 70px;
}
}
/* 360px */
@media (max-width: 360px) {
.parents-title {
font-size: 14px;
text-transform: none;
}
.parents-subtitle {
font-size: 12px;
}
.parents-cards {
gap: 10px;
}
.parents-card {
width: 85px;
height: 85px;
}
.parents-card-blob {
width: 85px;
height: 85px;
}
.parents-card-title {
font-size: 9px;
max-width: 65px;
}
}
/* 320px */
@media (max-width: 320px) {
.parents-title {
font-size: 13px;
text-transform: none;
}
.parents-subtitle {
font-size: 11px;
}
.parents-cards {
gap: 8px;
}
.parents-card {
width: 80px;
height: 80px;
}
.parents-card-blob {
width: 80px;
height: 80px;
}
.parents-card-title {
font-size: 8px;
max-width: 60px;
}
}
/* ============================================
Testimonials Section
============================================ */
.testimonials {
background: var(--color-background);
position: relative;
padding: 100px 0;
margin-bottom: 150px;
}
.testimonials-container {
max-width: 1400px;
margin: 0 auto;
padding: 0 2rem;
position: relative;
}
.cloud-decoration {
position: absolute;
top: -100px;
left: 80px;
width: 300px;
height: auto;
z-index: 1;
}
.balloon-decoration {
position: absolute;
top: -110px;
left: 100px;
width: 80px;
height: auto;
z-index: 1;
}
.testimonials-content {
text-align: center;
position: relative;
z-index: 2;
}
.testimonials-title {
font-family: 'Comfortaa', sans-serif;
font-size: 24px;
font-weight: 700;
color: var(--color-text);
margin-bottom: 20px;
line-height: 1.2;
text-transform: uppercase;
}
.testimonials-subtitle {
font-size: 20px;
font-weight: 300;
color: var(--color-text);
margin-bottom: 60px;
max-width: 600px;
margin-left: auto;
margin-right: auto;
line-height: 1.5;
}
.testimonials-wrapper {
position: relative;
display: flex;
align-items: flex-start;
gap: 30px;
margin-bottom: 40px;
justify-content: center;
max-width: 1400px;
margin-left: auto;
margin-right: auto;
}
.testimonials-grid {
display: flex;
gap: 32px;
justify-content: center;
flex: 0 0 auto;
max-width: calc(378px * 3 + 32px * 2);
}
.testimonial-card {
background: white;
border-radius: 60px;
padding: 40px;
box-shadow: 0 10px 30px var(--color-shadow);
border: 1px solid var(--color-card-border);
text-align: left;
transition: all 0.4s ease;
position: relative;
width: 378px;
height: 283px;
box-sizing: border-box;
overflow: hidden;
}
.testimonial-card:hover {
transform: translateY(-5px);
}
.testimonial-card.expanded {
width: 800px;
height: auto;
min-height: 350px;
z-index: 10;
position: relative;
}
.testimonial-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 0px;
}
.testimonial-name {
font-family: 'Comfortaa', sans-serif;
font-size: 18px;
font-weight: 700;
color: var(--color-text);
margin: 0;
flex: 1;
}
.testimonial-quotes {
width: 32px;
height: 32px;
opacity: 0.4;
}
.testimonial-stars {
display: flex;
gap: 4px;
margin-bottom: 16px;
}
.testimonial-stars img {
width: 16px;
height: 16px;
}
.testimonial-text {
font-size: 16px;
font-weight: 400;
color: var(--color-text);
line-height: 1.4;
margin-bottom: 16px;
display: -webkit-box;
-webkit-line-clamp: 5;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
height: calc(1.4em * 5);
}
.testimonial-text-full {
font-size: 16px;
font-weight: 400;
color: var(--color-text);
line-height: 1.4;
margin-bottom: 16px;
}
.testimonial-expand {
background: none;
border: none;
color: var(--color-text);
opacity: 60%;
font-size: 16px;
font-weight: 300;
cursor: pointer;
padding: 0;
transition: color 0.3s ease;
position: absolute;
bottom: 40px;
left: 40px;
margin-top: 8px;
}
.testimonial-expand:hover {
color: var(--nav-text-hover);
}
.testimonials-nav {
width: 60px;
height: 60px;
border: none;
border-radius: 50%;
background: var(--color-card-5);
color: var(--color-button-text);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.3s ease;
flex-shrink: 0;
margin-top: 110px;
}
.testimonials-nav:hover {
background: var(--color-card-1);
transform: scale(1.1);
}
.testimonials-nav svg {
width: 24px;
height: 24px;
}
.testimonials-dots {
display: flex;
justify-content: center;
gap: 12px;
}
.testimonial-dot {
width: 12px;
height: 12px;
border-radius: 50%;
background: #E0E0E0;
cursor: pointer;
transition: all 0.3s ease;
}
.testimonial-dot.active {
background: var(--color-card-2);
}
/* ============================================
Testimonials Responsive
============================================ */
/* 1920px+ */
@media (min-width: 1920px) {
.testimonials {
padding: 120px 0;
}
.testimonials-container {
max-width: 1600px;
padding: 0 3rem;
}
.cloud-decoration {
width: 350px;
left: 120px;
top: -120px;
}
.balloon-decoration {
width: 100px;
left: 140px;
top: -130px;
}
.testimonials-title {
font-size: 28px;
margin-bottom: 25px;
}
.testimonials-subtitle {
font-size: 22px;
margin-bottom: 80px;
max-width: 700px;
}
.testimonials-wrapper {
gap: 40px;
max-width: 1600px;
}
.testimonials-grid {
gap: 40px;
max-width: calc(400px * 3 + 40px * 2);
}
.testimonial-card {
width: 400px;
height: 300px;
padding: 45px;
}
.testimonial-name {
font-size: 20px;
}
.testimonial-text,
.testimonial-text-full {
font-size: 18px;
}
.testimonial-expand {
font-size: 18px;
bottom: 45px;
left: 45px;
}
.testimonials-nav {
width: 70px;
height: 70px;
margin-top: 115px;
}
.testimonials-nav svg {
width: 28px;
height: 28px;
}
.testimonials-dots {
gap: 15px;
}
.testimonial-dot {
width: 15px;
height: 15px;
}
}
/* 1600px-1919px */
@media (min-width: 1600px) and (max-width: 1919px) {
.testimonials {
padding: 110px 0;
}
.testimonials-container {
max-width: 1500px;
padding: 0 2.5rem;
}
.cloud-decoration {
width: 330px;
left: 100px;
top: -110px;
}
.balloon-decoration {
width: 90px;
left: 120px;
top: -120px;
}
.testimonials-title {
font-size: 26px;
margin-bottom: 22px;
}
.testimonials-subtitle {
font-size: 21px;
margin-bottom: 70px;
max-width: 650px;
}
.testimonials-wrapper {
gap: 35px;
max-width: 1500px;
}
.testimonials-grid {
gap: 35px;
max-width: calc(390px * 3 + 35px * 2);
}
.testimonial-card {
width: 390px;
height: 290px;
padding: 42px;
}
.testimonial-name {
font-size: 19px;
}
.testimonial-text,
.testimonial-text-full {
font-size: 17px;
}
.testimonial-expand {
font-size: 17px;
bottom: 42px;
left: 42px;
}
.testimonials-nav {
width: 65px;
height: 65px;
margin-top: 112px;
}
.testimonials-nav svg {
width: 26px;
height: 26px;
}
.testimonials-dots {
gap: 14px;
}
.testimonial-dot {
width: 14px;
height: 14px;
}
}
/* 1280px-1599px */
@media (min-width: 1280px) and (max-width: 1599px) {
.testimonials {
padding: 90px 0;
}
.testimonials-container {
max-width: 1200px;
padding: 0 2rem;
}
.cloud-decoration {
width: 280px;
left: 60px;
top: -90px;
}
.balloon-decoration {
width: 70px;
left: 80px;
top: -100px;
}
.testimonials-title {
font-size: 22px;
margin-bottom: 18px;
}
.testimonials-subtitle {
font-size: 18px;
margin-bottom: 50px;
max-width: 550px;
}
.testimonials-wrapper {
gap: 25px;
max-width: 1200px;
}
.testimonials-grid {
gap: 25px;
max-width: calc(340px * 3 + 25px * 2);
}
.testimonial-card {
width: 340px;
height: 260px;
padding: 35px;
}
.testimonial-name {
font-size: 16px;
}
.testimonial-text,
.testimonial-text-full {
font-size: 15px;
}
.testimonial-expand {
font-size: 15px;
bottom: 35px;
left: 35px;
}
.testimonials-nav {
width: 55px;
height: 55px;
margin-top: 100px;
}
.testimonials-nav svg {
width: 22px;
height: 22px;
}
.testimonials-dots {
gap: 10px;
}
.testimonial-dot {
width: 10px;
height: 10px;
}
}
/* 1024px-1279px */
@media (min-width: 1024px) and (max-width: 1279px) {
.testimonials {
padding: 80px 0;
}
.testimonials-container {
max-width: 1000px;
padding: 0 1.5rem;
}
.cloud-decoration {
width: 250px;
left: 40px;
top: -80px;
}
.balloon-decoration {
width: 60px;
left: 60px;
top: -90px;
}
.testimonials-title {
font-size: 20px;
margin-bottom: 16px;
}
.testimonials-subtitle {
font-size: 16px;
margin-bottom: 40px;
max-width: 500px;
}
.testimonials-wrapper {
gap: 20px;
max-width: 1000px;
}
.testimonials-grid {
gap: 20px;
max-width: calc(300px * 3 + 20px * 2);
}
.testimonial-card {
width: 300px;
height: 240px;
padding: 30px;
}
.testimonial-name {
font-size: 15px;
}
.testimonial-text,
.testimonial-text-full {
font-size: 14px;
}
.testimonial-expand {
font-size: 14px;
bottom: 30px;
left: 30px;
}
.testimonials-nav {
width: 50px;
height: 50px;
margin-top: 95px;
}
.testimonials-nav svg {
width: 20px;
height: 20px;
}
}
/* 768px-1023px */
@media (min-width: 768px) and (max-width: 1023px) {
.testimonials {
padding: 70px 0;
margin-bottom: 100px;
overflow-x: hidden;
}
.testimonials-container {
padding: 0 1rem;
max-width: 100%;
overflow: hidden;
}
.cloud-decoration {
width: 200px;
left: 20px;
top: -60px;
}
.balloon-decoration {
width: 50px;
left: 40px;
top: -70px;
}
.testimonials-title {
font-size: 18px;
margin-bottom: 14px;
}
.testimonials-subtitle {
font-size: 15px;
margin-bottom: 35px;
max-width: 100%;
}
.testimonials-wrapper {
gap: 15px;
align-items: center;
width: 100%;
overflow: hidden;
justify-content: center;
max-width: calc(100vw - 30px);
margin: 0 auto;
}
.testimonials-grid {
gap: 0;
max-width: calc(100vw - 150px);
width: 100%;
position: relative;
overflow: hidden;
display: flex;
justify-content: center;
}
.testimonial-card {
width: 100%;
height: 220px;
padding: 25px;
border-radius: 20px;
overflow: hidden;
display: none;
margin: 0 auto;
max-width: 450px;
}
.testimonial-card.active {
display: block;
}
.testimonial-name {
font-size: 14px;
}
.testimonial-text,
.testimonial-text-full {
font-size: 13px;
}
.testimonial-expand {
font-size: 13px;
bottom: 25px;
left: 25px;
}
.testimonials-nav {
display: flex;
width: 45px;
height: 45px;
margin-top: 0px;
flex-shrink: 0;
z-index: 2;
background: var(--color-button);
border: none;
border-radius: 50%;
color: var(--color-button-text);
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.3s ease;
}
.testimonials-nav:hover {
transform: scale(1.1);
}
.testimonials-nav svg {
width: 18px;
height: 18px;
}
.testimonials-dots {
display: flex;
justify-content: center;
gap: 8px;
margin-top: 20px;
}
}
/* Mobile 414px-767px */
@media (max-width: 767px) {
.testimonials {
padding: 50px 0;
overflow-x: hidden;
margin-bottom: 80px;
}
.testimonials-container {
padding: 0 1rem;
max-width: 100%;
overflow: hidden;
}
.cloud-decoration {
display: none;
}
.balloon-decoration {
display: none;
}
.testimonials-title {
font-size: 16px;
margin-bottom: 12px;
text-transform: none;
}
.testimonials-subtitle {
font-size: 14px;
margin-bottom: 30px;
max-width: 100%;
}
.testimonials-wrapper {
gap: 10px;
align-items: center;
width: 100%;
overflow: hidden;
}
.testimonials-grid {
grid-template-columns: 1fr;
gap: 0;
max-width: calc(100vw - 120px);
width: 100%;
position: relative;
overflow: hidden;
display: flex;
justify-content: center;
}
.testimonial-card {
height: 300px;
width: 100%;
border-radius: 20px;
overflow: hidden;
display: none;
margin: 0 auto;
max-width: 280px;
padding: 25px;
}
.testimonial-card.active {
display: block;
}
.testimonials-nav {
display: flex;
width: 40px;
height: 40px;
flex-shrink: 0;
z-index: 2;
background: var(--color-button);
border: none;
border-radius: 50%;
color: var(--color-button-text);
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.3s ease;
margin-top: 130px;
}
.testimonials-nav:hover {
transform: scale(1.1);
}
.testimonials-nav svg {
width: 20px;
height: 20px;
}
.testimonials-dots {
display: flex;
justify-content: center;
gap: 8px;
margin-top: 20px;
}
.testimonial-name {
font-size: 15px;
}
.testimonial-text,
.testimonial-text-full {
font-size: 14px;
}
.testimonial-expand {
font-size: 14px;
bottom: 25px;
left: 25px;
}
}
/* 414px */
@media (max-width: 414px) {
.testimonial-card {
height: 200px;
max-width: 361px;
width: 361px;
padding: 20px;
}
.testimonials-nav {
width: 32px;
height: 32px;
margin-top: 0px;
}
.testimonials-nav svg {
width: 18px;
height: 18px;
}
.testimonials-title {
font-size: 15px;
text-transform: none;
}
.testimonials-subtitle {
font-size: 13px;
}
.testimonial-name {
font-size: 14px;
}
.testimonial-text,
.testimonial-text-full {
font-size: 13px;
}
.testimonial-expand {
font-size: 13px;
bottom: 20px;
left: 20px;
}
.testimonial-dot {
width: 10px;
height: 10px;
}
}
/* 375px */
@media (max-width: 375px) {
.testimonial-card {
height: 270px;
max-width: 240px;
padding: 18px;
}
.testimonials-nav {
width: 34px;
height: 34px;
margin-top: 115px;
}
.testimonials-nav svg {
width: 16px;
height: 16px;
}
.testimonials-title {
font-size: 14px;
text-transform: none;
}
.testimonials-subtitle {
font-size: 12px;
}
.testimonial-name {
font-size: 13px;
}
.testimonial-text,
.testimonial-text-full {
font-size: 12px;
}
.testimonial-expand {
font-size: 12px;
bottom: 18px;
left: 18px;
}
.testimonial-dot {
width: 9px;
height: 9px;
}
}
/* 360px */
@media (max-width: 360px) {
.testimonial-card {
height: 260px;
max-width: 220px;
padding: 16px;
}
.testimonials-nav {
width: 32px;
height: 32px;
margin-top: 110px;
}
.testimonials-nav svg {
width: 14px;
height: 14px;
}
.testimonials-title {
font-size: 13px;
text-transform: none;
}
.testimonials-subtitle {
font-size: 11px;
}
.testimonial-name {
font-size: 12px;
}
.testimonial-text,
.testimonial-text-full {
font-size: 11px;
}
.testimonial-expand {
font-size: 11px;
bottom: 16px;
left: 16px;
}
.testimonial-dot {
width: 8px;
height: 8px;
}
}
/* 320px */
@media (max-width: 320px) {
.testimonials-container {
padding: 0 0.8rem;
}
.testimonials-wrapper {
gap: 8px;
}
.testimonials-grid {
max-width: calc(100vw - 100px);
}
.testimonial-card {
height: 250px;
max-width: 200px;
padding: 15px;
}
.testimonials-nav {
width: 30px;
height: 30px;
margin-top: 105px;
}
.testimonials-nav svg {
width: 12px;
height: 12px;
}
.testimonials-title {
font-size: 12px;
text-transform: none;
}
.testimonials-subtitle {
font-size: 10px;
}
.testimonial-name {
font-size: 11px;
}
.testimonial-text,
.testimonial-text-full {
font-size: 10px;
}
.testimonial-expand {
font-size: 10px;
bottom: 15px;
left: 15px;
}
.testimonial-dot {
width: 7px;
height: 7px;
}
}
/* ============================================
Newsletter Footer Section
============================================ */
.newsletter-footer {
background: #F5EEE4;
position: relative;
min-height: 400px;
overflow: hidden;
padding: 80px 0;
margin-bottom: 0;
}
.newsletter-footer-container {
max-width: 1440px;
margin: 0 auto;
position: relative;
text-align: center;
z-index: 1;
display: flex;
align-items: center;
justify-content: center;
min-height: 400px;
padding: 0 2rem;
}
.dino-footer-decoration {
position: absolute;
bottom: 0px;
right: 80px;
width: 200px;
height: auto;
z-index: 2;
transform: scaleX(-1);
}
.balloon-footer-decoration {
position: absolute;
top: 50px;
left: 100px;
width: 50px;
height: auto;
z-index: 2;
}
.newsletter-footer-content {
position: relative;
z-index: 3;
max-width: 862px;
margin: 0 auto;
}
.newsletter-footer-title {
font-family: 'Comfortaa', sans-serif;
font-size: 32px;
font-weight: 700;
color: var(--color-text);
margin-bottom: 20px;
line-height: 1.3;
}
.newsletter-footer-subtitle {
font-size: 18px;
font-weight: 300;
color: var(--color-text);
margin-bottom: 40px;
line-height: 1.5;
max-width: 600px;
margin-left: auto;
margin-right: auto;
}
.newsletter-footer-form {
display: flex;
gap: 15px;
max-width: 564px;
margin: 0 auto;
align-items: center;
}
.newsletter-footer-input {
flex: 1;
padding: 15px 20px;
border: 2px solid var(--color-border-light);
border-radius: 15px;
font-size: 16px;
font-family: 'Comfortaa', sans-serif;
background: white;
color: var(--color-text);
outline: none;
transition: all 0.3s ease;
}
.newsletter-footer-input:focus {
border-color: var(--color-button);
box-shadow: 0 0 0 3px rgba(180, 217, 198, 0.2);
}
.newsletter-footer-input::placeholder {
color: var(--color-text-hover);
font-family: 'Comfortaa', sans-serif;
}
.newsletter-footer-button {
background: var(--color-button);
color: var(--color-button-text);
padding: 15px 30px;
border: none;
border-radius: 15px;
font-weight: 600;
font-size: 16px;
font-family: 'Comfortaa', sans-serif;
cursor: pointer;
transition: all 0.3s ease;
white-space: nowrap;
}
.newsletter-footer-button:hover {
background: var(--color-button-hover);
transform: translateY(-2px);
}
/* ============================================
Newsletter Footer Responsive
============================================ */
/* 1920px+ */
@media (min-width: 1920px) {
.newsletter-footer {
min-height: 500px;
padding: 120px 0;
}
.newsletter-footer-container {
max-width: 1600px;
padding: 0 3rem;
min-height: 500px;
}
.newsletter-footer-title {
font-size: 38px;
margin-bottom: 25px;
}
.newsletter-footer-subtitle {
font-size: 20px;
margin-bottom: 50px;
}
.newsletter-footer-form {
max-width: 600px;
gap: 20px;
}
.newsletter-footer-input,
.newsletter-footer-button {
padding: 18px 25px;
font-size: 18px;
}
.dino-footer-decoration {
width: 250px;
right: 120px;
}
.balloon-footer-decoration {
width: 60px;
left: 120px;
}
}
/* 1600px-1919px */
@media (min-width: 1600px) and (max-width: 1919px) {
.newsletter-footer {
min-height: 450px;
padding: 100px 0;
}
.newsletter-footer-container {
max-width: 1500px;
padding: 0 2.5rem;
min-height: 450px;
}
.newsletter-footer-title {
font-size: 36px;
margin-bottom: 22px;
}
.newsletter-footer-subtitle {
font-size: 19px;
margin-bottom: 45px;
}
.newsletter-footer-form {
max-width: 580px;
gap: 18px;
}
.newsletter-footer-input,
.newsletter-footer-button {
padding: 16px 22px;
font-size: 17px;
}
.dino-footer-decoration {
width: 230px;
right: 100px;
}
.balloon-footer-decoration {
width: 55px;
left: 100px;
}
}
/* 1440px-1599px */
@media (min-width: 1440px) and (max-width: 1599px) {
.newsletter-footer {
min-height: 400px;
padding: 80px 0;
}
.newsletter-footer-container {
max-width: 1400px;
padding: 0 2rem;
min-height: 400px;
}
.newsletter-footer-title {
font-size: 32px;
margin-bottom: 20px;
}
.newsletter-footer-subtitle {
font-size: 18px;
margin-bottom: 40px;
}
.newsletter-footer-form {
max-width: 564px;
gap: 15px;
}
.newsletter-footer-input,
.newsletter-footer-button {
padding: 15px 20px;
font-size: 16px;
}
.dino-footer-decoration {
width: 200px;
right: 80px;
}
.balloon-footer-decoration {
width: 50px;
left: 100px;
}
}
/* 1280px-1439px */
@media (min-width: 1280px) and (max-width: 1439px) {
.newsletter-footer {
min-height: 380px;
padding: 70px 0;
}
.newsletter-footer-container {
max-width: 1200px;
padding: 0 2rem;
min-height: 380px;
}
.newsletter-footer-title {
font-size: 28px;
margin-bottom: 18px;
}
.newsletter-footer-subtitle {
font-size: 16px;
margin-bottom: 35px;
}
.newsletter-footer-form {
max-width: 500px;
gap: 12px;
}
.newsletter-footer-input,
.newsletter-footer-button {
padding: 14px 18px;
font-size: 15px;
}
.dino-footer-decoration {
width: 180px;
right: 60px;
}
.balloon-footer-decoration {
width: 45px;
left: 80px;
}
}
/* 1024px-1279px */
@media (min-width: 1024px) and (max-width: 1279px) {
.newsletter-footer {
min-height: 360px;
padding: 60px 0;
}
.newsletter-footer-container {
max-width: 1000px;
padding: 0 1.5rem;
min-height: 360px;
}
.newsletter-footer-title {
font-size: 24px;
margin-bottom: 16px;
}
.newsletter-footer-subtitle {
font-size: 15px;
margin-bottom: 30px;
}
.newsletter-footer-form {
max-width: 450px;
gap: 10px;
}
.newsletter-footer-input,
.newsletter-footer-button {
padding: 12px 16px;
font-size: 14px;
}
.dino-footer-decoration {
width: 160px;
right: 40px;
}
.balloon-footer-decoration {
width: 40px;
left: 60px;
}
}
/* 768px-1023px */
@media (min-width: 768px) and (max-width: 1023px) {
.newsletter-footer {
min-height: 320px;
padding: 50px 0;
}
.newsletter-footer-container {
padding: 0 1rem;
min-height: 320px;
}
.newsletter-footer-title {
font-size: 20px;
margin-bottom: 14px;
}
.newsletter-footer-subtitle {
font-size: 14px;
margin-bottom: 25px;
}
.newsletter-footer-form {
max-width: 400px;
gap: 8px;
}
.newsletter-footer-input,
.newsletter-footer-button {
padding: 10px 14px;
font-size: 13px;
border-radius: 10px;
}
.dino-footer-decoration {
width: 120px;
right: 20px;
}
.balloon-footer-decoration {
width: 35px;
right: 40px;
}
}
/* Mobile 414px-767px */
@media (max-width: 767px) {
.newsletter-footer {
min-height: 280px;
padding: 40px 0;
}
.newsletter-footer-container {
padding: 0 1rem;
min-height: 280px;
}
.newsletter-footer-title {
font-size: 18px;
margin-bottom: 12px;
}
.newsletter-footer-subtitle {
font-size: 13px;
margin-bottom: 25px;
}
.newsletter-footer-form {
flex-direction: column;
max-width: 100%;
gap: 15px;
}
.newsletter-footer-input {
width: 100%;
padding: 12px 18px;
font-size: 14px;
}
.newsletter-footer-button {
width: 100%;
padding: 12px 18px;
font-size: 14px;
}
.dino-footer-decoration {
display: none;
}
.balloon-footer-decoration {
width: 30px;
left: 10px;
top: -30px;
}
}
/* 375px-413px */
@media (min-width: 375px) and (max-width: 413px) {
.newsletter-footer-title {
font-size: 17px;
}
.newsletter-footer-subtitle {
font-size: 12px;
}
.newsletter-footer-input,
.newsletter-footer-button {
padding: 11px 16px;
font-size: 13px;
}
.balloon-footer-decoration {
width: 28px;
left: 10px;
top: -30px;
}
}
/* 360px-374px */
@media (min-width: 360px) and (max-width: 374px) {
.newsletter-footer-title {
font-size: 16px;
}
.newsletter-footer-subtitle {
font-size: 11px;
}
.newsletter-footer-input,
.newsletter-footer-button {
padding: 10px 14px;
font-size: 12px;
}
.balloon-footer-decoration {
width: 26px;
left: 10px;
top: -30px;
}
}
/* 320px-359px */
@media (min-width: 320px) and (max-width: 359px) {
.newsletter-footer-container {
padding: 0 0.8rem;
}
.newsletter-footer-title {
font-size: 15px;
}
.newsletter-footer-subtitle {
font-size: 10px;
}
.newsletter-footer-input,
.newsletter-footer-button {
padding: 9px 12px;
font-size: 11px;
}
.balloon-footer-decoration {
width: 24px;
left: 10px;
top: -30px;
}
}
/* ============================================
Footer Section
============================================ */
.footer-wrapper {
position: relative;
margin-top: -135px;
z-index: 1;
width: 100%;
overflow: hidden;
}
.footer-wave {
position: relative;
top: 0;
left: 0;
width: 100%;
height: 153px;
z-index: 1;
display: block;
margin: 0;
padding: 0;
}
.footer {
background: #CEDDE0;
position: relative;
z-index: 2;
padding-top: 50px;
padding-bottom: 50px;
margin-top: -25px;
}
.footer-container {
max-width: 1440px;
margin: 0 auto;
padding: 50px 2rem 0;
position: relative;
}
.footer-content {
display: grid;
grid-template-columns: 2fr 1fr 1fr 1.5fr;
gap: 4rem;
margin-bottom: 3rem;
align-items: start;
}
.footer-logo-section {
display: flex;
flex-direction: column;
}
.footer-logo {
font-family: 'Borsok', 'Comfortaa', sans-serif;
font-size: 1.3rem;
font-weight: 700;
color: var(--color-text);
text-decoration: none;
margin-bottom: 1rem;
}
.footer-description {
font-size: 14px;
color: var(--color-text);
line-height: 1.5;
margin-bottom: 1.5rem;
}
.footer-legal {
font-size: 12px;
color: var(--color-text);
line-height: 1.4;
opacity: 0.8;
}
.footer-section h4 {
font-family: 'Comfortaa', sans-serif;
font-size: 16px;
font-weight: 600;
color: var(--color-text);
margin-bottom: 1.5rem;
position: relative;
display: inline-block;
}
.footer-section h4::after {
content: '';
position: absolute;
bottom: -8px;
left: 0;
width: 120px;
height: 12px;
background: url('./assets/img/underline.svg') no-repeat left center;
background-size: contain;
}
.footer-links {
list-style: none;
padding: 0;
}
.footer-links li {
margin-bottom: 0.8rem;
}
.footer-links a {
color: var(--color-text);
text-decoration: none;
font-size: 14px;
transition: color 0.3s ease;
}
.footer-links a:hover {
color: var(--color-text-hover);
}
.contact-item {
display: flex;
align-items: center;
gap: 0.8rem;
margin-bottom: 1rem;
font-size: 14px;
color: var(--color-text);
}
.contact-icon {
width: 20px;
height: 20px;
flex-shrink: 0;
}
.footer-bottom {
border-top: 1px solid rgba(60, 60, 60, 0.2);
padding-top: 2rem;
display: flex;
justify-content: space-between;
align-items: center;
}
.footer-copyright {
font-size: 14px;
color: var(--color-text);
opacity: 0.8;
}
.footer-bottom-links {
display: flex;
gap: 2rem;
}
.footer-bottom-links a {
color: var(--color-text);
text-decoration: none;
font-size: 14px;
opacity: 0.8;
transition: opacity 0.3s ease;
}
.footer-bottom-links a:hover {
opacity: 1;
}
/* ============================================
Footer Responsive
============================================ */
/* 1920px+ */
@media (min-width: 1920px) {
.footer-container {
max-width: 1600px;
padding: 60px 3rem 0;
}
.footer-content {
gap: 5rem;
margin-bottom: 4rem;
}
.footer-logo {
font-size: 1.5rem;
margin-bottom: 1.2rem;
}
.footer-description {
font-size: 16px;
margin-bottom: 1.8rem;
}
.footer-legal {
font-size: 14px;
}
.footer-section h4 {
font-size: 18px;
margin-bottom: 1.8rem;
}
.footer-links a {
font-size: 16px;
}
.contact-item {
font-size: 16px;
margin-bottom: 1.2rem;
}
.contact-icon {
width: 22px;
height: 22px;
}
}
/* 1600px-1919px */
@media (min-width: 1600px) and (max-width: 1919px) {
.footer-container {
max-width: 1500px;
padding: 55px 2.5rem 0;
}
.footer-content {
gap: 4.5rem;
margin-bottom: 3.5rem;
}
.footer-logo {
font-size: 1.4rem;
margin-bottom: 1.1rem;
}
.footer-description {
font-size: 15px;
margin-bottom: 1.6rem;
}
.footer-legal {
font-size: 13px;
}
.footer-section h4 {
font-size: 17px;
margin-bottom: 1.6rem;
}
.footer-links a {
font-size: 15px;
}
.contact-item {
font-size: 15px;
margin-bottom: 1.1rem;
}
.contact-icon {
width: 21px;
height: 21px;
}
}
/* 1440px-1599px */
@media (min-width: 1440px) and (max-width: 1599px) {
.footer-container {
max-width: 1400px;
padding: 50px 2rem 0;
}
.footer-content {
gap: 4rem;
margin-bottom: 3rem;
}
.footer-logo {
font-size: 1.3rem;
margin-bottom: 1rem;
}
.footer-description {
font-size: 14px;
margin-bottom: 1.5rem;
}
.footer-legal {
font-size: 12px;
}
.footer-section h4 {
font-size: 16px;
margin-bottom: 1.5rem;
}
.footer-links a {
font-size: 14px;
}
.contact-item {
font-size: 14px;
margin-bottom: 1rem;
}
.contact-icon {
width: 20px;
height: 20px;
}
}
/* 1280px-1439px */
@media (min-width: 1280px) and (max-width: 1439px) {
.footer-container {
max-width: 1200px;
padding: 45px 2rem 0;
}
.footer-content {
gap: 3rem;
margin-bottom: 2.5rem;
}
.footer-logo {
font-size: 1.2rem;
margin-bottom: 0.9rem;
}
.footer-description {
font-size: 13px;
margin-bottom: 1.3rem;
}
.footer-legal {
font-size: 11px;
}
.footer-section h4 {
font-size: 15px;
margin-bottom: 1.3rem;
}
.footer-section h4::after {
width: 100px;
height: 10px;
}
.footer-links a {
font-size: 13px;
}
.contact-item {
font-size: 13px;
margin-bottom: 0.9rem;
}
.contact-icon {
width: 18px;
height: 18px;
}
}
/* 1024px-1279px */
@media (min-width: 1024px) and (max-width: 1279px) {
.footer-container {
max-width: 1000px;
padding: 40px 1.5rem 0;
}
.footer {
margin-top: -35px;
}
.footer-content {
gap: 2.5rem;
margin-bottom: 2rem;
}
.footer-logo {
font-size: 1.1rem;
margin-bottom: 0.8rem;
}
.footer-description {
font-size: 12px;
margin-bottom: 1.2rem;
}
.footer-legal {
font-size: 10px;
}
.footer-section h4 {
font-size: 14px;
margin-bottom: 1.2rem;
}
.footer-section h4::after {
width: 90px;
height: 9px;
}
.footer-links a {
font-size: 12px;
}
.contact-item {
font-size: 12px;
margin-bottom: 0.8rem;
}
.contact-icon {
width: 16px;
height: 16px;
}
}
/* 768px-1023px */
@media (min-width: 768px) and (max-width: 1023px) {
.footer-container {
padding: 35px 1rem 0;
}
.footer {
margin-top: -47px;
}
.footer-content {
grid-template-columns: 1fr 1fr;
gap: 2rem;
margin-bottom: 1.5rem;
}
.footer-logo {
font-size: 1rem;
margin-bottom: 0.7rem;
}
.footer-description {
font-size: 11px;
margin-bottom: 1rem;
}
.footer-legal {
font-size: 9px;
}
.footer-section h4 {
font-size: 13px;
margin-bottom: 1rem;
}
.footer-section h4::after {
width: 80px;
height: 8px;
left: 50%;
transform: translateX(-50%);
}
.footer-links a {
font-size: 11px;
}
.contact-item {
font-size: 11px;
margin-bottom: 0.7rem;
}
.contact-icon {
width: 14px;
height: 14px;
}
.footer-content {
text-align: center;
}
}
/* Mobile 414px-767px */
@media (max-width: 767px) {
.footer-wrapper {
margin-top: -50px;
z-index: 10;
}
.footer-wave {
position: relative;
z-index: 11;
margin-bottom: -20px;
margin-top: -40px;
}
.footer {
padding-top: 40px;
position: relative;
z-index: 10;
margin-top: -61px;
}
.footer-container {
padding: 30px 1rem 0;
}
.footer-content {
grid-template-columns: 1fr;
gap: 2rem;
margin-bottom: 2rem;
text-align: center;
}
.footer-logo {
font-size: 1.2rem;
margin-bottom: 0.8rem;
}
.footer-description {
font-size: 12px;
margin-bottom: 1rem;
}
.footer-legal {
font-size: 10px;
}
.footer-section h4 {
font-size: 14px;
margin-bottom: 1rem;
}
.footer-section h4::after {
width: 100px;
height: 10px;
left: 50%;
transform: translateX(-50%);
}
.footer-links a {
font-size: 12px;
}
.contact-item {
font-size: 12px;
margin-bottom: 0.8rem;
justify-content: center;
}
.contact-icon {
width: 16px;
height: 16px;
}
.footer-bottom {
flex-direction: column;
gap: 1rem;
text-align: center;
}
.footer-bottom-links {
justify-content: center;
}
}
/* 375px-413px */
@media (min-width: 375px) and (max-width: 413px) {
.footer-wrapper {
margin-top: -45px;
z-index: 10;
}
.footer-wave {
position: relative;
z-index: 11;
margin-bottom: -18px;
}
.footer {
padding-top: 35px;
position: relative;
z-index: 10;
margin-top: -62px;
}
.footer-logo {
font-size: 1.1rem;
}
.footer-description {
font-size: 11px;
}
.footer-legal {
font-size: 9px;
}
.footer-section h4 {
font-size: 13px;
}
.footer-section h4::after {
width: 90px;
height: 9px;
}
.footer-links a {
font-size: 11px;
}
.contact-item {
font-size: 11px;
}
.contact-icon {
width: 15px;
height: 15px;
}
}
/* 360px-374px */
@media (min-width: 360px) and (max-width: 374px) {
.footer-wrapper {
margin-top: -40px;
z-index: 10;
}
.footer-wave {
position: relative;
z-index: 11;
margin-bottom: -15px;
}
.footer {
padding-top: 30px;
position: relative;
z-index: 10;
}
.footer-logo {
font-size: 1rem;
}
.footer-description {
font-size: 10px;
}
.footer-legal {
font-size: 8px;
}
.footer-section h4 {
font-size: 12px;
}
.footer-section h4::after {
width: 80px;
height: 8px;
}
.footer-links a {
font-size: 10px;
}
.contact-item {
font-size: 10px;
}
.contact-icon {
width: 14px;
height: 14px;
}
}
/* 320px-359px */
@media (min-width: 320px) and (max-width: 359px) {
.footer-wrapper {
margin-top: -35px;
z-index: 10;
}
.footer-wave {
position: relative;
z-index: 11;
margin-bottom: -12px;
}
.footer {
padding-top: 25px;
position: relative;
z-index: 10;
}
.footer-container {
padding: 25px 0.8rem 0;
}
.footer-content {
gap: 1.5rem;
}
.footer-logo {
font-size: 0.9rem;
}
.footer-description {
font-size: 9px;
}
.footer-legal {
font-size: 7px;
}
.footer-section h4 {
font-size: 11px;
}
.footer-section h4::after {
width: 70px;
height: 7px;
}
.footer-links a {
font-size: 9px;
}
.contact-item {
font-size: 9px;
}
.contact-icon {
width: 12px;
height: 12px;
}
.footer-bottom-links {
gap: 1rem;
}
}