@font-face {
    font-family: 'LIBRARY 3 AM';
    src: url('../fonts/library/LIBRARY3AM.eot');
    src: url('../fonts/library/LIBRARY3AM.eot?#iefix') format('embedded-opentype'),
        url('../fonts/library/LIBRARY3AM.woff2') format('woff2'),
        url('../fonts/library/LIBRARY3AM.woff') format('woff'),
        url('../fonts/library/LIBRARY3AM.svg#LIBRARY3AM') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Sreda';
    src: url('../fonts/sreda/Sreda.eot');
    src: url('../fonts/sreda/Sreda.eot?#iefix') format('embedded-opentype'),
        url('../fonts/sreda/Sreda.woff2') format('woff2'),
        url('../fonts/sreda/Sreda.woff') format('woff'),
        url('../fonts/sreda/Sreda.svg#Sreda') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Lemon Tuesday';
    src: url('../fonts/LemonTuesday.eot');
    src: url('../fonts/LemonTuesday.eot?#iefix') format('embedded-opentype'),
        url('../fonts/LemonTuesday.woff2') format('woff2'),
        url('../fonts/LemonTuesday.woff') format('woff'),
        url('../fonts/LemonTuesday.svg#LemonTuesday') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: '3Dumb';
    src: url('../fonts/3dumb.eot');
    src: url('../fonts/3dumb.eot?#iefix') format('embedded-opentype'),
        url('../fonts/3dumb.woff2') format('woff2'),
        url('../fonts/3dumb.woff') format('woff'),
        url('../fonts/3dumb.svg#3dumb') format('svg');
    font-weight: 400;
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Wolgast Two';
    src: url('../fonts/WolgastTwoBold.eot');
    src: url('../fonts/WolgastTwoBold.eot?#iefix') format('embedded-opentype'),
        url('../fonts/WolgastTwoBold.woff2') format('woff2'),
        url('../fonts/WolgastTwoBold.woff') format('woff'),
        url('../fonts/WolgastTwoBold.svg#WolgastTwoBold') format('svg');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family:'Xiomara';
    src:url('../fonts/xiomara-font/Xiomara-wWLw.woff2') format('woff2');
    font-display: swap;
}

@font-face {
    font-family:'Xiomara';
    src:url('../fonts//xiomara-font/Xiomara-wWLw.woff2') format('woff2');
    font-display:swap;
}

/* Основни настройки */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* body {
    background-color: #f8f9fa;
    color: #333; 
    background-image: url('images/pink_sky.png');
} */

/* Заглавие (облике) */
#home {
    height: 60%;  /* Примерна стойност */
    padding: 5% 0;  /* Намаляване на вертикалното отстояние, ако е необходимо */
}

#home h1 {
    font-size: 3em;
    margin-bottom: 10%;
    font-family: 'Sreda';  /* Заглавието да е с oblique стил */
}

#home .container {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .home-logo {
        width: 20%;
        height: auto;
    }

#home h1, #home h2 {
    text-shadow: 2px 2px 5px rgba(38, 34, 34, 0.5);
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Контейнер за съдържанието */
.container {
    width: 100%;
    max-width: 95%;
    margin: 0 auto;
    padding: 0 2%;
}

.container2 {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    padding: 0 5%; /* Add padding for mobile devices */
    background-image: url('images/pink_sky.png');
}

#gallery h2{
    font-family: 'Xiomara', sans-serif;
    font-size: 46px;
    color: rgb(89, 163, 197);
}

.container2 h2{
    font-family: 'Wolgast Two', sans-serif;
    font-size: 46px;
}

/* Навигация */
header {
    /* background-color: #ad8ba9a8; */
    padding: 0.5% 0;            /* Add padding around the header */
    background-image: url('images/pink.jpg');
    background-size: cover;
}

#nav ul li {
    float: left;
    list-style: none;
    margin-right: 1em;
    font-family: 'LIBRARY 3 AM', helvetica, sans-serif;
    font-size: 10%;
    padding: 5%;
}

#nav li a {
    color: #544738;
    text-decoration: none;
    font-family: 'LIBRARY 3 AM', helvetica, sans-serif;
    float: left;
    transition: transform 0.5s ease, color 0.3s ease; /* Transition added */
}

#nav li a:hover {
    color: #7eb9be;
    transform: scale(1.2);
}

#nav .left a:hover {
    transform: rotate(-10deg) scale(1.2);
}

#nav .right a:hover {
    transform: rotate(10deg) scale(1.2);
}

/* Style the navigation menu */
#nav {
    display: flex;
    justify-content: space-between;
    list-style-type: none;
    padding: 0;
    margin: 0;
    flex-wrap: wrap;  /* Allow wrapping for smaller screens */
}

#nav li {
    margin: 0 15px;
}

#nav a {
    color: #544738;
    text-decoration: none;
    font-family: 'Barrio', helvetica, sans-serif;
    font-size: 25px;
    padding: 12px;
    transition: transform 0.5s ease, color 0.3s ease;
}

#nav a:hover {
    color: #7eb9be;
    transform: scale(1.2);
}

/* Начална секция */
#home {
    text-align: center;
    padding: 10px 0;
    background-color: #f0f8ff;
    background-image: url('images/background.jpg');  /* Задаваме фоновото изображение */
    background-size: cover;  /* Това прави изображението да покрива целия контейнер */
    background-position:  center;  /* Центрира изображението */
    background-repeat: no-repeat;  /* Не повтаря изображението */
}

#home h1 {
    font-size: 4em;
    margin-bottom: 50px;
    font-style: oblique;  /* Заглавие "Картотени торти за детски рожденни дни" да е с oblique стил */
    color: rgb(146, 82, 183);
}

#home h2 {
    font-size: 2.2em;
    margin-bottom: 120px;
    font-style: italic;
    color: rgb(146, 82, 183);
}

#home .banner img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
}



/* Галерия */
#gallery {
    padding: 40px 0;
    /* background-color: #69196b; */
    background-size: contain;  /* Това прави изображението да покрива целия контейнер */
    background-position: center;  /* Центрира изображението */
    background-repeat: no-repeat;  /* Не повтаря изображението */
    background-image: url('images/pinc_cloud.png');
    background-size: cover;
}

#gallery h2 {
    text-align: center;
    font-size: 2.5em;
    margin-bottom: 40px;
    font-style: italic;  /* Подзаглавията са в italic */
    /* color: mediumorchid; */
}

.categories {
    display: flex;
    justify-content: space-between;
}

.category {
    width: 45%;
    /* background-color: #c89ebf; */
    padding: 20px;
    border-radius: 8px;
    text-align: center;
    background-image: url('images/main_back.png');  /* Задаваме фоновото изображение */
}

.category img {
    max-width: 100%;
    border-radius: 8px;
    margin-bottom: 15px;
}

.category h3 {
    font-family: '3Dumb', sans-serif;
    font-size: 32px;
}

.cakes p{
    font-family: 'Lemon Tuesday', sans-serif;
    font-size: 16px;
}

/* Стилове за изображението при hover */
.cake-link {
    display: inline-block; /* За да можем да работим със изображенията като елемент с блокови свойства */
    position: relative;    /* Позволява да добавяме фон или ефекти спрямо изображението */
}

.cake-link img {
    max-width: 100%; /* Максимална ширина, за да се адаптира към контейнера */
    height: auto;    /* Височината се настройва автоматично, за да запази пропорциите */
    max-height: 350px; /* Можеш да зададеш максимална височина на изображението */
    object-fit: cover; /* Запълва целия контейнер, като запазва пропорциите */
    border-radius: 8px; /* Закръгляне на ъглите на изображението */
}

/* Ефект при hover върху изображението */
.cake-link:hover img {
    transform: scale(1.1); /* Увеличава изображението */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); /* Добавя сянка около изображението */
}

/* Добавяне на фонов цвят при hover върху връзката */
.cake-link:hover {
    background-color: rgba(255, 255, 255, 0.7); /* Лек бял фон */
    border-radius: 8px; /* Добавяме заоблени ъгли на фона */
}

/* Меню */
#menu {
    padding: 60px 0;
    /* background-color: #f0f8ff; */
}

#menu h2 {
    text-align: center;
    font-size: 2.5em;
    margin-bottom: 40px;
    font-style: italic;  /* Подзаглавията са в italic */
}

#menu ul {
    list-style-type: none;
}

#menu ul li {
    margin-bottom: 20px;
}

#menu form {
    margin-top: 30px;
    text-align: center;
}

#menu input, #menu textarea, #menu select {
    width: 60%;
    padding: 10px;
    margin-bottom: 15px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

#menu button {
    padding: 10px 20px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

#menu button:hover {
    background-color: #0056b3;
}

#menu p {
    font-family: 'Sreda', helvetica, sans-serif;
}

/* Контакти */
#contacts {
    padding: 60px 0;
    /* background-color: #f0f8ff; */
}

#contacts h2 {
    text-align: center;
    font-size: 2.5em;
    margin-bottom: 40px;
    font-style: italic;  /* Подзаглавията са в italic */
}

#contacts form {
    text-align: center;
}

#contacts input, #contacts textarea {
    width: 60%;
    padding: 10px;
    margin-bottom: 15px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

#contacts button {
    padding: 10px 20px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

#contacts button:hover {
    background-color: #0056b3;
}

#contacts p {
    font-family: 'Sreda', helvetica, sans-serif;
}

/* Footer */
footer {
    background-color: #333;
    color: white;
    padding: 20px 0;
    text-align: center;
    font-style: italic;  /* Footer също е в italic */
}

/* Base responsive container */
.container {
    width: 100%;
    max-width: 95%;
    margin: 0 auto;
    padding: 0 2%;
}

/* Responsive images */
img {
    max-width: 100%;
    height: auto;
}

/* Icons */
.social-icons {
    display: flex;
    gap: 15px;
    margin-top: 10px;
    justify-content: center;
}

.social-icons a {
    font-size: 44px;
    text-decoration: none;
    transition: transform 0.2s ease;
}

.social-icons a:hover {
    transform: scale(1.2);
}

/* Калкулатор */
/* ===== КАЛКУЛАТОР ===== */

#calculator {
    text-align: center;
    margin: 60px 0;
}

#calculator h2 {
    font-family: 'Wolgast Two', sans-serif;
    font-size: 42px;
    color: rgb(146, 82, 183);
    margin-bottom: 20px;
}

/* Кутия */
.calculator-box {
    background: linear-gradient(135deg, #ffe6f0, #e6f7ff);
    padding: 30px;
    border-radius: 20px;
    width: 90%;
    max-width: 400px;
    margin: auto;
    box-shadow: 0 10px 25px rgba(0,0,0,0.15);
    border: 3px dashed #ffb6d9;
    position: relative;
    
}

/* Леко "плаващ" ефект */
.calculator-box:hover {
    transform: translateY(-5px);
    transition: 0.3s ease;
}

/* Етикети */
.calculator-box label {
    display: block;
    font-family: 'Sreda';
    margin-top: 10px;
    font-size: 18px;
    color: #5a3d5c;
}

/* Полета */
.calculator-box input,
.calculator-box select {
    width: 100%;
    padding: 10px;
    margin-top: 5px;
    margin-bottom: 15px;
    border-radius: 10px;
    border: 2px solid #ffd1e6;
    font-size: 16px;
    font-family: 'Sreda';
    transition: 0.2s;
}

/* Hover ефект */
.calculator-box input:focus,
.calculator-box select:focus {
    border-color: #7eb9be;
    outline: none;
    box-shadow: 0 0 8px rgba(126, 185, 190, 0.5);
}

/* Цена */
.calculator-box h3 {
    margin-top: 15px;
    font-size: 22px;
    font-family: 'Wolgast Two';
    color: #333;
}

/* Самата цена */
#total {
    color: #e1306c;
    font-size: 28px;
    font-weight: bold;
}

/* Малък bounce ефект при промяна */
@keyframes pop {
    0% { transform: scale(1); }
    50% { transform: scale(1.15); }
    100% { transform: scale(1); }
}

#total.updated {
    animation: pop 0.3s ease;
}

/* ===== CONTACT FORM ===== */

.contact-form {
    max-width: 500px;
    width: 95%;
    margin: 30px auto;
    background: linear-gradient(135deg, #fff0f7, #f0fbff);
    padding: 25px;
    border-radius: 20px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.15);
    border: 3px dashed #ffb6d9;

    display: flex;
    flex-direction: column;
}

.contact-form h3 {
    font-family: 'Sreda';
    margin-bottom: 10px;
    color: #5a3d5c;
}

/* label */
.contact-form label {
    font-family: 'Sreda';
    margin-top: 10px;
    font-size: 16px;
    color: #5a3d5c;
}

/* input – ОТ КРАЙ ДО КРАЙ */
.contact-form input {
    width: 100%;
    padding: 12px;
    margin-top: 5px;
    border-radius: 10px;
    border: 2px solid #ffd1e6;
    font-family: 'Sreda';
    font-size: 16px;
    transition: 0.2s;
}

.contact-form input:focus {
    border-color: #7eb9be;
    outline: none;
    box-shadow: 0 0 8px rgba(126,185,190,0.5);
}

/* бутон */
.contact-form button {
    margin-top: 15px;
    padding: 14px;
    border: none;
    border-radius: 12px;
    background: linear-gradient(45deg, #ff7eb3, #7eb9be);
    color: white;
    font-size: 18px;
    /* font-family: 'Wolgast Two'; */
    cursor: pointer;
    transition: 0.3s;
}

.contact-form button:hover {
    transform: scale(1.05);
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}


@media (max-width: 600px) {
    .contact-form {
        grid-template-columns: 1fr;
    }
}

/* ===== MOBILE DEVICES (SMALL) ===== */
@media (max-width: 480px) {
    /* Typography */
    /* Typography */
    body {
        font-size: 16px;
    }
    
    /* Navigation */
    #nav {
        display: flex;
        flex-direction: row;
        justify-content: space-between; /* Разпределя елементите равномерно */
        align-items: center;
        width: 100%;
        padding: 10px 0;
        margin: 0 auto;
        list-style: none;
        flex-wrap: nowrap;
    }
    
    #nav li {
        margin: 0 8px;
    }
    
    #nav a {
        font-size: 12px;
        padding: 6px 8px;
        white-space: nowrap;
    }
    
    /* Gallery */
    .categories {
        display: flex;
        flex-direction: column; /* Подрежда елементите вертикално */
        gap: 20px; /* Добавя разстояние между елементите */
    }

    .category{
        width: 100%; /* Задава ширината на всяка категория да е 100% */
    }
    /* .categories {
        flex-wrap: wrap;
        gap: 15px;
    } */
    
    /* .category {
        flex: 1 1 45%;
    } */
    
    .cake-link img {
        height: 56%;
    }
    
    /* Home section */
    #home {
        padding: 10px 0;
    }
    
    #home h1 {
        font-size: 3em;
    }
    
    #home h2 {
        font-size: 2em;
    }

    .home-logo {
        width: 50%;
        height: auto;
    }
    
    /* Gallery section */
    #gallery {
        padding: 40px 0;
    }
    
    #gallery h2 {
        font-size: 36px;
        margin-bottom: 30px;
    }
    
    /* Menu and Contacts */
    #menu, #contacts {
        padding: 50px 0;
    }
    
    #menu input, #menu textarea, #menu select,
    #contacts input, #contacts textarea {
        width: 70%;
    }
}

/* ===== MObile ===== */
@media (min-width: 481px) and (max-width: 768px) {
    /* Typography */
    body {
        font-size: 16px;
    }
    
    /* Navigation */
    #nav {
        display: flex;
        flex-direction: row;
        justify-content: space-between; /* Разпределя елементите равномерно */
        align-items: center;
        width: 100%;
        padding: 10px 0;
        margin: 0 auto;
        list-style: none;
        flex-wrap: nowrap;
    }
    
    #nav li {
        margin: 0 8px;
    }
    
    #nav a {
        font-size: 20px;
        padding: 8px 12px;
        white-space: nowrap;
    }
    
    /* Gallery */
    .categories {
        display: flex;
        flex-direction: column; /* Подрежда елементите вертикално */
        gap: 20px; /* Добавя разстояние между елементите */
    }

    .category {
        width: 100%; /* Задава ширината на всяка категория да е 100% */
    }

    .cakes .cake-link {
        width: 100%; /* Задава ширината на 80% */
        margin: 0 auto; /* Центрира елемента в родителския контейнер */
    }


    
    .cake-link img {
        height: 70%; /* Изображението заема 70% от височината на родителя */
        width: auto; /* Запазва пропорциите на изображението */
        object-fit: contain; /* Адаптира изображението в рамките на контейнера */
    }
    
    /* Home section */
    #home {
        padding: 20px 0;
    }
    
    #home h1 {
        font-size: 3em;
    }
    
    #home h2 {
        font-size: 2em;
    }

    .home-logo {
        width: 40%;
        height: auto;
    }
    
    /* Gallery section */
    #gallery {
        padding: 40px 0;
    }
    
    #gallery h2 {
        font-size: 36px;
        margin-bottom: 30px;
    }
    
    /* Menu and Contacts */
    #menu, #contacts {
        padding: 50px 0;
    }
    
    #menu input, #menu textarea, #menu select,
    #contacts input, #contacts textarea {
        width: 70%;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    /* Typography */
    body {
        font-size: 16px;
    }
    
    /* Navigation */
    #nav {
        display: flex;
        flex-direction: row;
        justify-content: space-between; /* Разпределя елементите равномерно */
        align-items: center;
        width: 100%;
        padding: 10px 0;
        margin: 0 auto;
        list-style: none;
        flex-wrap: nowrap;
    }
    
    #nav li {
        margin: 0 8px;
    }
    
    #nav a {
        font-size: 20px;
        padding: 8px 12px;
        white-space: nowrap;
    }
    
    /* Gallery */
    .categories {
        display: flex;
        flex-direction: column; /* Подрежда елементите вертикално */
        gap: 20px; /* Добавя разстояние между елементите */
    }

    .category {
        width: 100%; /* Задава ширината на всяка категория да е 100% */
    }
    /* .categories {
        flex-wrap: wrap;
        gap: 15px;
    } */
    
    /* .category {
        flex: 1 1 45%;
    } */
    
    .cake-link img {
        height: 56%;
    }
    
    /* Home section */
    #home {
        padding: 5px 0;
    }

    
    #home h1 {
        font-size: 3em;
    }
    
    #home h2 {
        font-size: 2em;
    }

    .home-logo {
        width: 40%;
        height: auto;
    }
    
    /* Gallery section */
    #gallery {
        padding: 40px 0;
    }
    
    #gallery h2 {
        font-size: 36px;
        margin-bottom: 30px;
    }
    
    /* Menu and Contacts */
    #menu, #contacts {
        padding: 50px 0;
    }
    
    #menu input, #menu textarea, #menu select,
    #contacts input, #contacts textarea {
        width: 70%;
    }
}

/* ===== LARGE TABLETS AND SMALL DESKTOPS ===== */
@media (min-width: 1025px) and (max-width: 1440px) {
    /* Navigation */
    #nav {
        display: flex;
        flex-direction: row;
        justify-content: space-between; /* Разпределя елементите равномерно */
        align-items: center;
        width: 100%;
        padding: 10px 0;
        margin: 0 auto;
        list-style: none;
        flex-wrap: nowrap;
    }
    
    #nav li {
        margin: 0 10px;
    }
    
    #nav a {
        font-size: 22px;
        padding: 10px 15px;
        white-space: nowrap;
    }
    
    /* Gallery */
    .categories {
        flex-wrap: wrap;
        gap: 20px;
    }
    
    .category {
        flex: 1 1 45%;
    }
    
    .cake-link img {
        height: 300px;
    }

    .home-logo {
        width: 50%;
        height: auto;
    }
}