@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;600;700&display=swap');

:root {
    --main-color: #2563eb;
    --secondary-color: #1e293b;
    --bg-color: #5f688a;
    --card-bg: #ffffff;
    --text-color: #0f172a;
    --text-light: #64748b;
    --border-color: #e2e8f0;
    --shadow: 0 8px 30px rgba(0,0,0,0.08);
    --radius: 18px;
    --header-height: 100px;
}

* {
    font-family: 'Cairo', sans-serif;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-decoration: none;
    transition: .3s ease;
}

    *::selection {
        background: var(--main-color);
        color: white;
    }

html {
    font-size: 62.5%;
    scroll-behavior: smooth;
    overflow-x: hidden;
}

body {
    background: var(--bg-color);
    color: var(--text-color);
        padding-top: 80px;
}

section {
    padding: 3rem 7%;
}

.heading {
    text-align: center;
    color: var(--text-color);
    padding-bottom: 2rem;
    font-size: 4rem;
    font-weight: 700;
}

    .heading span {
        color: var(--main-color);
    }

/* BUTTON */

.btn {
    display: inline-block;
    margin-top: 1rem;
    padding: 1.2rem 3rem;
    border-radius: 14px;
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    color: white;
    font-size: 1.6rem;
    font-weight: 600;
    box-shadow: var(--shadow);
}

    .btn:hover {
        transform: translateY(-3px);
    }

/* HEADER */

.header {
    background: rgba(255,255,255,0.9);
    backdrop-filter: blur(14px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.5rem 7%;
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 1000;
    border-bottom: 1px solid var(--border-color);
    box-shadow: var(--shadow);
}

    .header .logo img {
        height: 65px;
    }

    /* NAVBAR */

    .header .navbar1 {
        display: flex;
        align-items: center;
        gap: 10px;
    }

        .header .navbar1 a {
            color: var(--text-color);
            font-size: 1.7rem;
            font-weight: 600;
            padding: 1rem 1.6rem;
            border-radius: 14px;
        }

            .header .navbar1 a i {
                margin-left: 8px;
                color: var(--main-color);
            }

            .header .navbar1 a:hover {
                background: var(--main-color);
                color: white;
            }

                .header .navbar1 a:hover i {
                    color: white;
                }

    /* ICONS */

    .header .icons div,
    .header .icons .nameuserIcon {
        font-size: 2.4rem;
        color: var(--text-color);
    }

        .header .icons div:hover {
            color: var(--main-color);
        }

/* HOME */

.home {
    min-height: 100vh;
    display: flex;
    align-items: center;
}

    .home .content {
        max-width: 60rem;
    }

        .home .content h3 {
            font-size: 5rem;
            color: var(--text-color);
        }

        .home .content p {
            font-size: 1.8rem;
            color: var(--text-light);
            line-height: 1.8;
        }

/* ABOUT */

.about .row {
    display: flex;
    flex-wrap: wrap;
    background: white;
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow);
}

    .about .row .image {
        flex: 1 1 45rem;
    }

        .about .row .image img {
            width: 100%;
        }

    .about .row .content {
        flex: 1 1 45rem;
        padding: 3rem;
    }

        .about .row .content h3 {
            font-size: 3rem;
        }

        .about .row .content p {
            font-size: 1.6rem;
            color: var(--text-light);
            line-height: 1.8;
        }

/* BOX CONTAINERS */

.menu .box-container,
.products .box-container,
.review .box-container,
.blogs .box-container {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(28rem,1fr));
    gap: 2rem;
}

.box {
    background: white;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden;
    padding: 2rem;
}

    .box:hover {
        transform: translateY(-5px);
    }

/* PRODUCTS */

.products .box .image img {
    height: 250px;
    object-fit: cover;
}

.products .box .content h3 {
    font-size: 2.2rem;
}

.products .box .content .price {
    font-size: 2rem;
    color: var(--main-color);
}

/* REVIEW */

.review .box p {
    font-size: 1.5rem;
    color: var(--text-light);
    line-height: 1.8;
}

.review .box .user {
    width: 70px;
    height: 70px;
    border-radius: 50%;
}

/* CONTACT */

.contact {
    width: 100%;
    max-width: 700px;
    margin: auto;
}

    .contact .form {
        background: white;
        padding: 4rem;
        border-radius: var(--radius);
        box-shadow: var(--shadow);
    }

        .contact .form h3 {
            font-size: 3rem;
            margin-bottom: 2rem;
        }

        .contact .form .inputBox {
            display: flex;
            align-items: center;
            margin: 1.5rem 0;
            background: white;
            border: 1px solid var(--border-color);
            border-radius: 14px;
        }

            .contact .form .inputBox span {
                padding: 0 1.5rem;
                font-size: 2rem;
                color: var(--main-color);
            }

            .contact .form .inputBox input {
                width: 100%;
                padding: 1.8rem;
                font-size: 1.6rem;
                background: none;
                color: var(--text-color);
            }

/* BLOGS */

.blogs .box .image {
    height: 250px;
    overflow: hidden;
}

    .blogs .box .image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.blogs .box:hover .image img {
    transform: scale(1.08);
}

.blogs .box .content {
    padding: 2rem;
}

    .blogs .box .content .title {
        font-size: 2rem;
        color: var(--text-color);
    }

    .blogs .box .content span {
        color: var(--main-color);
        font-size: 1.5rem;
    }

    .blogs .box .content p {
        font-size: 1.5rem;
        color: var(--text-light);
    }

/* CAROUSEL */

.carousel {
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow);
}

.carousel-inner img {
    width: 100%;
    height: 700px;
    object-fit: cover;
}

.carousel-caption {
    background: rgba(0,0,0,.45);
    padding: 20px;
    border-radius: 14px;
}

    .carousel-caption h3 {
        font-size: 3rem;
    }

    .carousel-caption p {
        font-size: 1.6rem;
    }

/* FOOTER */

.footer {
    background: white;
    text-align: center;
    padding: 3rem 2rem;
    margin-top: 5rem;
    border-top: 1px solid var(--border-color);
}

    .footer .share {
        padding-bottom: 2rem;
    }

        .footer .share a {
            width: 50px;
            height: 50px;
            line-height: 50px;
            border-radius: 50%;
            background: #f1f5f9;
            color: var(--main-color);
            margin: .5rem;
            display: inline-block;
        }

            .footer .share a:hover {
                background: var(--main-color);
                color: white;
            }

    .footer .credit {
        font-size: 1.5rem;
        color: var(--text-light);
    }

/* MESSAGE */

.message {
    color: var(--main-color);
    font-size: 1.8rem;
    font-weight: bold;
}

/* MOBILE */

@media (max-width:991px) {
    html {
        font-size: 55%;
    }

    section {
        padding: 2rem;
    }
}



@media (max-width:450px) {
    html {
        font-size: 50%;
    }
   
}
/* כפתור המבורגר */
.menu-btn{
    display:none;
    font-size:28px;
    cursor:pointer;
    color:#111;
}

/* מובייל */
@media(max-width:768px){

    .menu-btn{
        display:block;
    }

    .navbar1{
        position:absolute;
        top:80px;
        right:0;
        left:0;
        background:white;

        display:flex;
        flex-direction:column;

        max-height:0;
        overflow:hidden;
        transition:0.3s ease;
    }

    .navbar1.active{
        max-height:500px;
    }
}
body {
    margin: 0;
    padding-top: 80px;
}

/* ביטול רווח ראשון בכל עמוד */
#ContentPlaceHolder1 {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* ביטול רווח ראשון של section ראשון */
section:first-of-type {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* תיקון bootstrap container אם קיים */
.container, .container-fluid {
    margin-top: 0 !important;
    padding-top: 0 !important;
}
.menu-btn{
    display:none;
    font-size:28px;
    cursor:pointer;
    z-index:1100;
}

/* MOBILE FIX ONLY */
@media (max-width:768px){

    .header{
        flex-direction:row !important;
        justify-content:space-between !important;
        align-items:center !important;
    }

    .menu-btn{
        display:flex !important;
        align-items:center;
    }

    .navbar1{
        position:absolute !important;
        top:80px !important;
        left:0 !important;
        right:0 !important;
        background:white;
        flex-direction:column;
        max-height:0;
        overflow:hidden;
        transition:0.3s ease;
        z-index:999;
    }

    .navbar1.active{
        max-height:500px;
    }
}
.menu-btn{
    display:none;
    font-size:28px;
    cursor:pointer;
    color:#111;
    z-index:2000;
}

/* מובייל */
@media (max-width:768px){

    .header{
        flex-direction:row !important;
        justify-content:space-between !important;
        align-items:center !important;
    }

    .menu-btn{
        display:flex;
        align-items:center;
    }

    .navbar1{
        position:absolute;
        top:80px;
        left:0;
        right:0;
        background:white;
        flex-direction:column;
        max-height:0;
        overflow:hidden;
        transition:0.3s ease;
        z-index:999;
    }

    .navbar1.active{
        max-height:500px;
    }

    .navbar1 a{
        width:100%;
        padding:15px;
    }
}
@media (max-width:768px){

    .about-container{
        flex-direction:column !important;
    }

    .about-card,
    .hours-card{
        width:100% !important;
        min-width:unset !important;
    }

    .about-page{
        padding:20px 10px !important;
    }

    .about-title h1{
        font-size:28px !important;
    }

    .schedule-table th,
    .schedule-table td{
        font-size:13px;
        padding:10px;
    }
}