/*
Theme Name: نوولاین ( NevoLine )
Theme URI: mah04.ir
Author: محمدعلی حیدرزاده
Author URI: mah04.ir
Requires PHP:7.0
Version:1.1
Text Domain:DN
*/

@font-face {
    font-family: Vazir;
    font-style: normal;
    font-weight: normal;
    src: url('../fonts/Vazir.eot');
    src: url('../fonts/Vazir.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Vazir.woff2') format('woff2'),
        url('../fonts/Vazir.woff') format('woff'),
        url('../fonts/Vazir.ttf') format('truetype');
}

@font-face {
    font-family: Vazir;
    font-style: normal;
    font-weight: bold;
    src: url('../fonts/Vazir-Bold.eot');
    src: url('../fonts/Vazir-Bold.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Vazir-Bold.woff2') format('woff2'),
        url('../fonts/Vazir-Bold.woff') format('woff'),
        url('../fonts/Vazir-Bold.ttf') format('truetype');
}

:root {
    --green: #27ae60;
    --black: #192a56;
    --light-color: #666;
    --box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .1);
}

*{
    font-family: Vazir , Arial, Helvetica, sans-serif;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-decoration: none;
    outline: none;
    border: none;
    text-transform: capitalize;
    transition: all .2s linear;
    list-style: none;
}

section {
    padding: 2rem 9%;
    margin-top: 3%;
}



.btn{
    margin-top: 1rem;
    display: inline-block;
    font-size: 1.7rem;
    color: #fff;
    background: var(--black);
    border-radius: .5rem;
    cursor: pointer;
    padding: .8rem 3rem;
}

.btn:hover{
    background: var(--green);
    letter-spacing: .1rem;
}

.sub-heading{
    text-align: center;
    color: var(--green);
    font-size: 2rem;
    padding-top: 1rem;
}
.more {
    width: 99%;
    margin-top: 1rem;
    border-radius: .5rem;
    cursor: pointer;
    text-align: center;
}
.more a p{
    color: #e9e9e9;
    background: var(--black);
    font-size: 2.7rem;
}
.more a p:hover{
    background: var(--green);
    border-radius: 10px;
}

.heading{
    text-align: center;
    color: var(--black);
    font-size: 3rem;
    padding-bottom: 2rem;
    margin-top: 3rem; 
}

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

body{
    direction: rtl;
}

header{
    top: 0;
    left: 0;
    right: 0;
    height: 130px;
    background: #fff;
    padding: 1rem 7%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    z-index: 1000;
    box-shadow: var(--box-shadow);
    position: fixed;
}

header .logo img{
    width: 80px;
    max-width: 80px;
    height: 80px;
    opacity: 1;
    transition-duration: 2.2s;
    border-style: solid;
    border-color: #91944252;
    border-radius: 50px 50px 50px 50px;
}

header .navbar{
    display: flex;
    align-items: center;
    align-content: center;
}

header .navbar a{
    font-size: 1.7rem;
    border-radius: .5rem;
    padding: .5rem 1.5rem;
    color: var(--light-color);
}

header .navbar a.active,
header .navbar a:hover{
    color: #ffffff;
    background: var(--green);
    margin-right: 5px;
}

#sing{
    background-color: #27a3b9;
    color: rgb(0, 0, 0);
    margin-right: 2rem;
}

#sing:hover{
    background-color: #27ae60;
    transform: rotate(360deg);
}


header .icons{
    display: flex;
    align-items: center;
    align-content: center;
}

header .icons i,
header .icons a{
    cursor: pointer;
    margin-left: .5rem;
    height: 4.5rem;
    width: 4.5rem;
    line-height: 4.5rem;
    text-align: center;
    font-size: 1.7rem;
    color: var(--black);
    border-radius: 50%;
    background: #eee;
}
header .icons i p{
    cursor: pointer;
    text-align: center;
    display: flex;
    align-items: center;
    align-content: center;
    font-size: 1.7rem;
}

header .icons i:hover,
header .icons a:hover{
    color: #ffffff;
    background: var(--green);
    transform: rotate(360deg);
}

#heart:hover{
    background: red;
}

header .icons #menu-bars{
    display: none;
}

#search-form{
    position: fixed;
    top: -110%;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: 1004;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 1rem;
}

#search-form.active{
    top: 0;
}


#search-form #search-box {
    width: 50rem;
    border-bottom: 0.1rem solid #fff;
    padding: 0.1rem 0;
    color: #fff;
    font-size: 3rem;
    text-transform: none;
    background: none;
}

#search-form #search-box::placeholder{
    color: #eee;
}

#search-form label{
    color: #fff;
    cursor: pointer;
    font-size: 3rem;
}

#search-form label:hover{
    color: var(--green);
}

#search-form #closer{
    position: absolute;
    color: #fff;
    cursor: pointer;
    top: 2rem;
    right: 3rem;
    font-size: 5rem;
}
#search-form #closer:hover{
    color: red;
}
.home{
    box-shadow: 0 10px 10px rgba(0,0,0,0.2);
}
.home .home-slider .slide{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 2rem;
    padding-top: 9rem;
}



.home .home-slider .slide .content,
.home .home-slider .slide .image{
    flex: 1 1 45rem;
}

.home .home-slider .slide .image img{
    width: 100%;
}

.home .home-slider .slide .content span{
    color: var(--green);
    font-size: 2.5rem;
}

.home .home-slider .slide .content h3{
    color: var(--black);
    font-size: 7rem;
}

.home .home-slider .slide .content p{
    font-size: 2rem;
    padding: .5rem;
    line-height: 1.5;
}

.swiper-pagination-bullet-active{
    background: var(--green) !important;
    font-size: 20px !important;
}

.dishes .box-container{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(28rem, 1fr));
    gap: 1.5rem;
}

.dishes .box-container .box{
    padding: 2.5rem;
    background: #fff;
    border-radius: .5rem;
    border: 1px solid rgba(0, 0, 0, .2);
    box-shadow: var(--box-shadow);
    position: relative;
    overflow: hidden;
    text-align: center;
}

.dishes .box-container .box .fa-heart,
.dishes .box-container .box .fa-eye{
    position: absolute;
    top: 1.5rem;
    background: #eee;
    border-radius: 50%;
    height: 5rem;
    width: 5rem;
    line-height: 5rem;
    font-size: 2rem;
    color: var(--black);
}

.dishes .box-container .box .fa-heart{
    right: 1.5rem;
}

.dishes .box-container .box .fa-eye{
    left: 1.5rem;
}

.dishes .box-container .box img{
    height: 17rem;
    margin: 1rem 0;
}

.dishes .box-container .box h3{
    color: var(--black);
    font-size: 2.5rem;
}

.dishes .box-container .box .stars i{
    font-size: 1.7rem;
}

.dishes .box-container .box span{
    color: var(--green);
    font-weight: bolder;
    margin-right: 1rem;
    font-size: 2.5rem;
}


.about .row{
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    align-content: center;
}

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

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

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

.about .row .content h3{
    color: var(--black);
    font-size: 4rem;
    padding: .5rem 0;
}

.about .row .content p{
    color: var(--light-color);
    font-size: 1.5rem;
    padding: .5rem 0;
    list-style: 2;
}

.about .row .content .icons-container{
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 1rem 0;
    margin-top: .5rem;
}

.about .row .content .icons-container .icons{
    background: #eee;
    border-radius: .5rem;
    border: .1rem solid rgba(0, 0, 0, .2);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    flex: 1 1 17rem;
    padding: 1.5rem 1rem;
}

.about .row .content .icons-container .icons i{
    font-size: 2.5rem;
    color: var(--green);
}

.about .row .content .icons-container .icons span{
    font-size: 1.5rem;
    color: var(--black);
}

.menu .box-container {
    display: flex;
    gap: 11px;
    flex-wrap: wrap;
}

.menu .box-container .box{
    background: #fff;
    border: .1rem solid rgba(0, 0, 0, .2);
    border-radius: .5rem;
    box-shadow: var(--box-shadow);
    width: 250px;
}

.menu .box-container .box .image{
    width: 100%;
    padding: 1.5rem;
    position: relative;
    overflow: hidden;
}

.menu .box-container .box .image img{
    width: 100%;
    height: auto;
    border-radius: .5rem;
    object-fit: cover;
}

.menu .box-container .box .image .fa-heart{
    position: absolute;
    top: 2.5rem;
    right: 2.5rem;
    height: 5rem;
    width: 5rem;
    line-height: 5rem;
    text-align: center;
    font-size: 2rem;
    border-radius: 50%;
    color: var(--black);
    background: #e9e9e9;
}

.menu .box-container .box .image .fa-heart:hover{
    background: red;
    color: #ffff;
}

.menu .box-container .box .content{
    padding: 0 1rem 1rem 1rem;
}

.menu .box-container .box .content .stars{
    padding-bottom: 1rem;
    display: flex;
}

.menu .box-container .box .content .stars i{
    font-size: 1.7rem;
    color: var(--green);
}
.menu .box-container .box .content .stars h2{
    margin-left: 20%;
}

.menu .box-container .box .content h3{
    color: var(--black);
    font-size: 2.5rem;
}

.menu .box-container .box .content p{
    color: var(--light-color);
    font-size: 14px;
    line-height: 2.5rem;
    text-align: justify;
}


.menu .box-container .box .content button{
    width: 100%;
}

.review .slide{
    padding: 2rem;
    box-shadow: var(--box-shadow);
    border: 1px solid rgba(0, 0, 0, .2);
    border-radius: .5rem;
    position: relative;
}

.review .slide .fa-quote-right{
    position: absolute;
    top: 2rem;
    left: 2rem;
    font-size: 6rem;
    color: #ccc;
}

.review .slide .user{
    display: flex;
    gap: 1.5rem;
    align-items: center;
    padding-bottom: 1.5rem;
}

.review .slide .user img{
    height: 7rem;
    width: 7rem;
    border-radius: 50%;
    object-fit: cover;
}

.review .slide .user h3{
    color: var(--black);
    font-size: 2rem;
    padding-bottom: 10px;
}

.review .slide .user i{
    font-size: 1.3rem;
    color: var(--green);
}

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

.footer{
    border-radius: 5px;
    border: 1px solid rgba(0, 0, 0, .1);
}
footer .box-container {
    display: flex;
    justify-content: space-between;
}


footer .box-container .box h3{
    font-size: 2.5rem;
    color: var(--black);
}
footer .box-container .box p{
    width: 370px;
}
footer .box-container .box a{
    display: block;
    padding: .5rem 0;
    font-size: 1.5rem;
    color: var(--light-color);
}

footer .box-container .box a:hover{
    color: var(--green);
    text-decoration: underline;
    font-weight: bolder;
}
footer .box-container .box .item li::marker {
    display: none;
}

footer .credit{
    text-align: center;
    border-top: .1rem solid rgba(0, 0, 0, .1);
    font-size: 2rem;
    color: var(--black);
    padding: 15px 0;
    margin-top: 1.5rem;
}

footer .credit span{
    color: var(--green);
}

.loader-container{
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: 10000;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.loader-container img{
    width: 35rem;
}

.fadeout{
    top: 110%;
    opacity: 0;
}
/***********sing******************/
.signup-form{
    width: 50%;
    margin-right: 25%;
    padding: 20px;
    text-align: center;
    background: #27a3b9;
    position: absolute;
    top: 20%;
    transform: translate(-50, -50);
    overflow: hidden;
    border-radius: 10px;
}
.signup-form h1{
    margin-top: 100px;
    font-size: 40px;
    color: #fff;
}
.signup-form input{
    display: block;
    width: 100%;
    padding: 0 16px;
    height: 44px;
    text-align: center;
    box-sizing: border-box;
    outline: none;
    border: none;
}
.txtd{
    margin: 20px 0;
    background: rgba(255, 255, 255, .5);
    border-radius: 6px;
}
.signup-btn{
    margin-top: 60px;
    margin-bottom: 20px;
    background: #192a56;
    color: #ccc;
    border-radius: 44px;
    cursor: pointer;
    transform: 0.8s;
    font-size: 2rem;
}
.signup-btn:hover{
    transform: scale(0.96);
    background: #1f7706;
}
.signup-form a{
    text-decoration: none;
    color: #ccc;
    font-size: 20px;
    padding: 10px;
    transform: 0.8s;
    background: rgb(100, 137, 151);
}
.signup-form a:hover{
    background: rgba(0, 0, 0, .3);
    border-radius: 10px;
    padding: 15px;
}
.signup-form .back{
    background: rgb(100, 137, 151);
    border-radius: 10px;
    margin-right: 3% ;
}
/***************single*******************************/
.post-single header {
    margin-top: 8rem;
    float: right;
    width: 100%;
}
.main-single {
    float: right;
    width: 100%;
    margin-top: 20rem;
}
.post-single {
    float: right;
    width: 100%;
    background: #f8f8f8;
    border: 1px solid #e8e8e8;
    border-radius: 4px;
    padding: 15px;
}
.post-single header {
    margin-bottom: 20px;
    float: right;
    width: 100%;
}
.post-single header h1 {
    border-bottom: 2px solid #ffffff;
    padding: 10px 10px 20px;
    font-size: 24px;
    margin-bottom: 10px;
}
.post-single .post-meta {
    float: right;
    margin-left: 25px;
    font-size: 13.5px;
    color: #8f8f8f;
}
.post-single .post-meta i {
    margin-left: 5px;
}
.post-single .post-meta a {
    color: #8f8f8f;
    text-decoration: none;
}
.post-single .post-thumbnail {
    margin-bottom: 30px;
}
.post-single .post-thumbnail img {
    max-width: 40%;
    display: block;
    margin: 0 auto;
    float: right;
}
.post-single .content-single {
    font-size: 18px;
    line-height: 35px;
    padding: 10px;
    text-align: justify;
    overflow: hidden;
}
.post-single .content-single img {
    max-width: 10%;
    max-height: 10%;
}
.related-post {
    float: right;
    width: 100%;
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 4px;
    padding: 0px 15px 15px;
    margin: 30px 0;
}
.related-post .related-head {
    font-size: 18px;
    border-bottom: 1px solid #ddd;
    padding: 15px;
}
.related-post .related-head h4{

}
.related-post .box-article {
    margin: 0px 5px;
    border: 0;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0px 0px 13px #eef0f1;
}


.item-right .category P{
    float: right;
    color: #8f8f8f;
    font-size: 20px;
}

.container .contact-single .item-right .star{
    font-size: 15px;
    color: #ffd142;
    float: right;
    margin-top: -10rem;
}

.container .contact-single .item-right .sum{
    float: right;
    margin-top: -4rem; 
}

.container .contact-single .item-right .sum h1{
    float: right;
    color: #49b927;
    border-top: 1px solid black;
    width: 54%;
}

.container .contact-single .item-right .sum p {
    max-width: 300px;
    max-height: 200px;
    overflow: auto;
    padding: 3%;
    border: 1px solid #ccc;
    white-space: nowrap;
    background-color: #f5f5f5;
    margin-bottom: -22%;
    margin-top: 18%;
    width: 100%;
    height: 300px;
    white-space: normal;
    font-size: 1.8rem;
}



.item-left {
    margin: -6% 0 0 0;
    background-color: #f5f4f4;
    border-radius: 0.5rem;
    display: flex;
    width: 46%;
}

.item-left .icon-single{
    float: right;
    padding-top: 7%;
    text-align: right;
    width: 100%;
}

.item-left .icon-single i {
    font-size: 1.5rem;
    padding-bottom: 5%;
    background-color: #f5f4f4;
    display: list-item;
    list-style: none;
    padding-right: 3%;
}

.item-left .price {
    float: right;
    font-size: 1.7rem;
    text-align: right;
    width: 100%;
    margin-top: 25%;
    display: flex;
}

.item-left .price p {
    margin-top: 1px;
    margin-bottom: 20px;
    color: red;
    border-radius: 44px;
    cursor: pointer;
    transform: 0.8s;
    font-size: 2rem;
    padding: 3%;
}


.item-left .price p:hover{
    transform: scale(0.96);
    background: #1f7706;
    color: #fff;
}
.counter-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: 2rem;
    width: 66%;
    background-color: #192a56;
    padding: 0 0 0 5px;
}

button {
    font-size: 1.5rem;
    cursor: pointer;
}

#decrement{
    color: red;
    font-size: 3.5rem;
    background-color: #192a56;
}

#increment{
    color: #3cff00;
    font-size: 3.5rem; 
    background-color: #192a56;
}

#counter{
    color: #ffffff;
}

.counter-container p{
    color: #3cff00;
    border-radius: 10%;
}

.body-single .descri{
    background-color: #ddd;
    width: 100%;
    height: auto;
    margin-top: 2%;
    border-radius: 2rem;
}

.descri h1{
    padding: 1%;
    width: 10%;
    border-bottom: 1px solid #8f8f8f;
}

.descri p{
    padding: 1%;
    font-size: 2rem;
    line-height: 2.5;
}

.popup{
    width: 50%;
    background: #ffffff52;
    border-radius: 6px;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.1);
    text-align: center;
    padding: 30px 30px 30px;
    color: #333;
    visibility: hidden;
    transition: transform 0.4s top 0.4s;
    z-index: 2;
    font-size: 3rem;
}

.open-popup{
    visibility: visible;
    top: 50%;
    transform: translate(-50%, -50%) scale(1);
}

.popup form{
    width: 100%;
    background: #eeeeee00;
    border-radius: .5rem;
    padding: 3rem;
    font-size: 1.6rem;
    color: var(--black);
    width: 100%;
}

.popu form .input-box input,
.popu form .input-box textarea{
    
    text-transform: none;
    display: flex , grid;
    margin-bottom: 1rem;
}

.popup form{
    width: 100%;
    border: 1px solid rgba(0,0,0,.2);
    box-shadow: var(--box-shadow);
    background: #ffffffd4;
    padding: 1.5rem;
    margin: 0 auto;
}

.popup form .input-box{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.popup form .input-box .input{
    width: 49%;
}

.popup form .input-box span{
    display: block;
    padding: .5rem 0;
    font-size: 1.5rem;
    color: var(--light-color);
}

.popup form .input-box input,
.popup form .input-box textarea{
    background: #eee;
    border-radius: .5rem;
    padding: 1rem;
    font-size: 1.6rem;
    color: var(--black);
    text-transform: none;
    margin-bottom: 1rem;
    width: 100%;
}

.popup form .input-box input:focus,
.popup form .input-box textarea:focus{
    border: 1px solid var(--green);
}

.order form .input-box textarea{
    height: 20rem;
    resize: none;
}

/***************comment***********************/
.comment {
    max-width: 600px;
    margin: 20px auto;
    padding: 20px;
    background-color: #f9f9f9;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    font-family: 'Arial', sans-serif;
    direction: rtl;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.1);
    visibility: hidden;
    opacity: 0;
    transition: transform 0.3s ease, opacity 0.3s ease;
    z-index: 2;

}

.open-comment {
    visibility: visible;
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

.worksaples{
     max-width: 600px;
    margin: 20px auto;
    padding: 20px;
    background-color: #f9f9f9;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    font-family: 'Arial', sans-serif;
    direction: rtl;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.1);
    visibility: hidden;
    opacity: 0;
    transition: transform 0.3s ease, opacity 0.3s ease;
    z-index: 2;
}
.open-ws{
    visibility: visible;
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}


/* استایل کلی برای بخش worksaples */
#worksaples {
    font-family: 'Arial', sans-serif; /* فونت خوانا */
    margin: 20px auto;
    padding: 20px;
    border: 1px solid #e0e0e0; /* حاشیه ملایم */
    border-radius: 8px; /* گوشه‌های گرد */
    background-color: #f9f9f9; /* رنگ پس‌زمینه روشن */
    max-width: 600px; /* عرض حداکثر برای خوانایی بهتر */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); /* سایه ملایم */
}

/* استایل برای هر ردیف اطلاعات */
.info-row {
    display: flex; /* استفاده از فلکس‌باکس برای چینش */
    align-items: flex-start; /* هم‌ترازی از بالا */
    margin-bottom: 15px; /* فاصله بین ردیف‌ها */
    padding-bottom: 15px; /* فاصله داخلی پایین */
    border-bottom: 1px dashed #ccc; /* خط جداکننده نقطه‌چین */
    font-size: 15px;
}

/* حذف خط جداکننده برای آخرین ردیف */
.info-row:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

/* استایل برای برچسب‌ها (Labels) */
.info-row label {
    flex: 0 0 150px; /* عرض ثابت برای برچسب‌ها */
    font-weight: bold; /* ضخیم کردن متن */
    color: #333; /* رنگ تیره */
    margin-right: 15px; /* فاصله با متن */
    text-align: right; /* راست‌چین کردن برچسب‌ها */
}

/* استایل برای محتوای متنی (Span و P) */
.info-row span,
.info-row p {
    flex-grow: 1; /* اجازه رشد به محتوا برای پر کردن فضای باقی‌مانده */
    color: #555; /* رنگ متن کمی روشن‌تر */
    line-height: 1.6; /* فاصله خطوط برای خوانایی بهتر */
    text-align: justify;
}

/* استایل برای پاراگراف متن طولانی‌تر */
.info-row p {
    margin-top: 5px; /* کمی فاصله از بالا */
}



.input-box {
    margin-bottom: 15px;
}

.input {
    margin-bottom: 10px;
}

.input span {
    display: block;
    font-weight: bold;
    margin-bottom: 5px;
    color: #333;
    font-size: 1.5rem;
}

.input input,
.input textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
    box-sizing: border-box;
    font-size: 14px;
    font-family: 'Arial', sans-serif;
    background-color: #fff;
    transition: border-color 0.3s;
}

.input input:focus,
.input textarea:focus {
    border-color: #007BFF;
    outline: none;
}

textarea {
    resize: vertical;
    min-height: 100px;
}

/**************************************/
.about-text{
    max-width: 600px;
    margin: 20px auto;
    padding: 20px;
    background-color: #f9f9f9;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    font-family: 'Arial', sans-serif;
    direction: rtl;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.1);
    visibility: hidden;
    opacity: 0;
    transition: transform 0.3s ease, opacity 0.3s ease;
    z-index: 2;

}

.open-about {
    visibility: visible;
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

.about-text h1 h1 {
    font-size: 3rem;
    color: #192a56;
    border-bottom: 4px solid #192a56;
    padding-bottom: 10px;
}


.about-text p{
    font-size: 15px;
    width: 100%;
    margin-top: 4%;
    line-height: 1.7;
    text-align: justify;
}

.f-w-contet {
    color: #7A7A7A;
    line-height: 30px;
    text-align: justify;
    font-size: 15px;
    width: 300px;
}

/* css media query */
@media (max-width:991px){
    html{
        font-size: 50%;
    }

    header{
        padding: 1rem 2rem;
    }

    section{
        padding: 2rem;
    }
    .menu .box-container .box,
    .popup form .input-box .input{
        width: 100%;
    }
    .dishes .box-container .box img{
        height: auto;
        width: 100%;
    }

    .order form .input-box .input {
        width: 100%;
    }
    .signup-form{
        width: 100%;
        margin-right: 0;
        padding: 20px;
        text-align: center;
        background: #27a3b9;
        position: absolute;
        top: 0;
        bottom: 0;
        transform: translate(-50, -50);
        overflow: hidden;
    }
    .signup-form h1{
        margin-top: 0;
        font-size: 40px;
        color: #fff;
    }
    #worksaples {
        width: 300px;
    }
    .info-row {
         display: block;
         align-items: flex-start;
        font-size: 13px;
    }
    .open-popup {
        width: 300px;
        top: 60%;
    }
    .open-about {
        width: 80%;
    }
    .about-text p {
        font-size: 15px;
        height: 267px;
        overflow-y:scroll;
    }
    footer .box-container {
        display: flex;
        width: 100%;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 10px;
    }
    footer .box-container .box{
        width: 100%;
    }

}

@media (max-width:768px){
    header .icons #menu-bars {
            display: inline-block;
        }

        header .navbar{
            position: absolute;
            top: 100%;
            right: 0;
            left: 0;
            background: #fff;
            border-top: .1rem solid rgba(0, 0, 0, .2);
            border-bottom: .1rem solid rgba(0, 0, 0, .2);
            padding: 1rem;
            clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
            display: block;
        }

        header .navbar.active{
            clip-path: polygon(0 0, 100% 0, 100% 100% ,0 100%);
        }

        header .navbar a{
            display: block;
            padding: 1.5rem;
            margin: 1rem;
            font-size: 2rem;
            background: #eee;
        }

        .home .home-slider .slide .content h3 {
            font-size: 5rem;
        }
}