/* Дополнительные стили для Kiss Campaigns */

/* Импорт шрифта Oswald */
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200;300;400;500;600;700&display=swap');

/* Базовые стили */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Typography */
body {
    font-family: system-ui, -apple-system, sans-serif;
    font-size: 16px;
    line-height: 1.5;
    color: #666666;
}

h1, h2, h3 {
    color: #2C2C2C;
}

h1 {
    font-size: 60px;
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 24px;
}

h2 {
    font-size: 48px;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 20px;
}

h3 {
    font-size: 36px;
    font-weight: 600;
    line-height: 1.3;
    margin-bottom: 16px;
}

/* Colors */
.primary-bg {
    background-color: #E85A9B;
}

.secondary-bg {
    background-color: #FFFFFF;
}

.accent-bg {
    background-color: #F8F8F8;
}

.primary-text {
    color: #FFFFFF;
}

.secondary-text {
    color: #2C2C2C;
}

.link {
    color: #E85A9B;
    text-decoration: none;
    transition: color 0.3s ease;
}

.link:hover {
    color: #D4478A;
}

/* Buttons */
.button-primary {
    background: linear-gradient(135deg, #E85A9B 0%, #D4478A 100%);
    color: #FFFFFF;
    padding: 16px 32px;
    border-radius: 50px;
    font-weight: 600;
    text-transform: uppercase;
    transition: all 0.3s ease;
}

.button-primary:hover {
    background: linear-gradient(135deg, #D4478A 0%, #C23876 100%);
}

.button-secondary {
    background: transparent;
    color: #E85A9B;
    border: 2px solid #E85A9B;
    padding: 16px 32px;
    border-radius: 50px;
    font-weight: 600;
    text-transform: uppercase;
    transition: all 0.3s ease;
}

.button-secondary:hover {
    background: #E85A9B;
    color: #FFFFFF;
}

/* Утилиты для контейнеров */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem;
}

/* Утилиты для отступов */
.px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
.px-8 { padding-left: 2rem; padding-right: 2rem; }
.px-12 { padding-left: 3rem; padding-right: 3rem; }
.px-16 { padding-left: 4rem; padding-right: 4rem; }
.px-20 { padding-left: 5rem; padding-right: 5rem; }
.px-24 { padding-left: 6rem; padding-right: 6rem; }
.px-32 { padding-left: 8rem; padding-right: 8rem; }

.py-4 { padding-top: 1rem; padding-bottom: 1rem; }
.py-12 { padding-top: 3rem; padding-bottom: 3rem; }
.py-16 { padding-top: 4rem; padding-bottom: 4rem; }
.py-20 { padding-top: 5rem; padding-bottom: 5rem; }

/* Утилиты для отступов */
.mb-4 { margin-bottom: 1rem; }
.mb-8 { margin-bottom: 2rem; }
.mb-10 { margin-bottom: 2.5rem; }
.mb-12 { margin-bottom: 3rem; }

/* Утилиты для размеров */
.w-full { width: 100%; }
.h-20 { height: 5rem; }
.h-32 { height: 8rem; }
.h-40 { height: 10rem; }
.h-48 { height: 12rem; }
.h-56 { height: 14rem; }
.h-full { height: 100%; }
.min-h-600px { min-height: 600px; }

/* Мобильные изображения */
@media (max-width: 767px) {
    .relative.h-\[300px\] {
        height: 250px;
    }
    
    /* Главная секция на мобильных */
    .min-h-\[600px\] {
        min-height: auto;
    }
    
    /* Уменьшаем отступы на мобильных */
    .py-16 {
        padding-top: 2rem;
        padding-bottom: 2rem;
    }
}

/* Утилиты для флексбокса */
.flex { display: flex; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }

/* Утилиты для сетки */
.grid { display: grid; }
.md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* Утилиты для порядка элементов */
.order-1 { order: 1; }
.order-2 { order: 2; }
.md\:order-1 { order: 1; }
.md\:order-2 { order: 2; }

/* Утилиты для позиционирования */
.relative { position: relative; }
.absolute { position: absolute; }
.sticky { position: sticky; }
.top-0 { top: 0; }
.z-50 { z-index: 50; }

/* Утилиты для отображения */
.hidden { display: none; }
.block { display: block; }
.inline-block { display: inline-block; }

/* Утилиты для текста */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-xl { font-size: 1.25rem; }
.text-2xl { font-size: 1.5rem; }
.text-4xl { font-size: 2.25rem; }
.text-5xl { font-size: 3rem; }
.text-6xl { font-size: 3.75rem; }
.text-8xl { font-size: 6rem; }
.text-sm { font-size: 0.875rem; }
.text-lg { font-size: 1.125rem; }

.font-bold { font-weight: 700; }
.font-semibold { font-weight: 600; }
.uppercase { text-transform: uppercase; }
.tracking-wider { letter-spacing: 0.05em; }
.leading-tight { line-height: 1.25; }

/* Утилиты для цветов */
.text-white { color: #ffffff; }
.text-gray-600 { color: #4b5563; }
.text-gray-700 { color: #374151; }
.text-gray-800 { color: #1f2937; }
.text-gray-500 { color: #6b7280; }
.bg-white { background-color: #ffffff; }
.bg-black { background-color: #000000; }
.bg-gray-100 { background-color: #f3f4f6; }
.bg-gray-300 { background-color: #d1d5db; }

/* Кастомные цвета */
.text-\[\#3e2127\] { color: #3e2127; }
.text-\[\#eb45a1\] { color: #eb45a1; }
.bg-\[\#f6edeb\] { background-color: #f6edeb; }
.bg-\[\#eb45a1\] { background-color: #eb45a1; }
.bg-\[\#d22863\] { background-color: #d22863; }

/* Утилиты для границ */
.border { border-width: 1px; }
.border-2 { border-width: 2px; }
.border-white { border-color: #ffffff; }
.rounded-full { border-radius: 9999px; }
.rounded-3xl { border-radius: 1.5rem; }

/* Утилиты для эффектов */
.shadow-lg { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); }
.resize-none { resize: none; }

/* Утилиты для переходов */
.transition-all { transition-property: all; }
.transition-colors { transition-property: color, background-color, border-color; }
.transition-opacity { transition-property: opacity; }
.duration-300 { transition-duration: 300ms; }
.duration-500 { transition-duration: 500ms; }

/* Утилиты для трансформаций */
.transform { transform: translateZ(0); }
.translate-x-0 { transform: translateX(0); }
.translate-x-full { transform: translateX(100%); }

/* Утилиты для прозрачности */
.opacity-0 { opacity: 0; }
.opacity-100 { opacity: 1; }
.opacity-80 { opacity: 0.8; }
.opacity-90 { opacity: 0.9; }

/* Утилиты для пробелов */
.space-x-2 > * + * { margin-left: 0.5rem; }
.space-x-8 > * + * { margin-left: 2rem; }
.space-y-6 > * + * { margin-top: 1.5rem; }

/* Утилиты для пробелов в сетке */
.gap-6 { gap: 1.5rem; }

/* Утилиты для максимальной ширины */
.max-w-xl { max-width: 36rem; }
.max-w-2xl { max-width: 42rem; }
.max-w-3xl { max-width: 48rem; }

/* Утилиты для изображений */
.object-cover { object-fit: cover; }

/* Утилиты для фокуса */
.focus\:outline-none:focus { outline: none; }
.focus\:ring-4:focus { box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.3); }

/* Утилиты для ховера */
.hover\:opacity-80:hover { opacity: 0.8; }
.hover\:bg-white:hover { background-color: #ffffff; }
.hover\:bg-gray-100:hover { background-color: #f3f4f6; }
.hover\:bg-\[\#d22863\]:hover { background-color: #d22863; }
.hover\:text-black:hover { color: #000000; }
.hover\:text-\[\#eb45a1\]:hover { color: #eb45a1; }

/* Шрифт Oswald */
.font-oswald { font-family: 'Oswald', sans-serif; }

/* Медиа-запросы */
@media (min-width: 768px) {
    .md\:hidden { display: none; }
    .md\:block { display: block; }
    .md\:flex { display: flex; }
    .md\:text-left { text-align: left; }
    .md\:text-2xl { font-size: 1.5rem; }
    .md\:text-6xl { font-size: 3.75rem; }
    .md\:text-8xl { font-size: 6rem; }
    .md\:h-auto { height: auto; }
    .md\:px-16 { padding-left: 4rem; padding-right: 4rem; }
    .md\:px-20 { padding-left: 5rem; padding-right: 5rem; }
    .md\:px-24 { padding-left: 6rem; padding-right: 6rem; }
    .md\:px-32 { padding-left: 8rem; padding-right: 8rem; }
    .md\:order-1 { order: 1; }
    .md\:order-2 { order: 2; }
}

/* Мобильные стили для всех секций */
@media (max-width: 767px) {
    .grid.md\:grid-cols-2 {
        display: flex;
        flex-direction: column-reverse;
    }
    
    .grid.md\:grid-cols-2 > div {
        width: 100%;
    }
    
    .grid.md\:grid-cols-2 .relative.h-full {
        height: 250px;
    }
}

/* Дополнительные стили для слайдера */
.slider-container {
    overflow: hidden;
}

.slider-slide {
    transition: all 0.5s ease-in-out;
}

/* Стили для слайдера заголовков */
.relative.h-32.md\\:h-48 {
    overflow: hidden;
}

.relative.h-32.md\\:h-48 > div {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

/* Улучшенные стили для заголовков в слайдере */
.relative.h-32.md\\:h-48 h1 {
    line-height: 1.1;
    word-wrap: break-word;
    hyphens: auto;
}

/* Стили для формы */
input, textarea {
    font-family: inherit;
    font-size: inherit;
}

/* Стили для кнопок */
button {
    cursor: pointer;
    border: none;
    background: none;
    font-family: inherit;
}

/* Стили для ссылок */
a {
    text-decoration: none;
    color: inherit;
}

/* Стили для изображений */
img {
    max-width: 100%;
}

/* Исключение для логотипов в навигации */
img.h-\[50px\] {
    height: 50px !important;
} 

/* Styles for the CAREERS section */
#careers {
    padding: 60px 0;
    background-color: #f6edeb;
}

#careers h2 {
    font-size: 2.5rem;
    color: #3e2127;
    margin-bottom: 20px;
}

#careers p {
    color: #555;
    line-height: 1.6;
    margin-bottom: 20px;
}

#careers a {
    display: inline-block;
    background-color: #eb45a1;
    color: #fff;
    padding: 10px 20px;
    border-radius: 25px;
    text-transform: uppercase;
    font-weight: bold;
    transition: background-color 0.3s ease;
}

#careers a:hover {
    background-color: #d22863;
} 

/* Hero Section Font Styles */
.hero h1 {
    font-family: 'Oswald', sans-serif;
    font-style: normal;
    font-weight: 500;
}