:root {
    --font-title: 'Playfair Display', serif;
    --font-body: 'Quattrocento Sans', sans-serif;
    --dark2-color: #262626;
    --logo-path: url('../images/logo-dark.png');
    --logo-height: 50px; /* Example height */
    --logo-width: auto; /* Adjust or set a specific width */
}

body {
    font-family: var(--font-body); /* Default font for body */
    overflow-x: hidden;
    padding: 0;
    margin: 0;
}


.language {
    font-family: "Noto Kufi Arabic", serif;
}

/* Headings styled with Playfair Display */
.playfair-title {
    font-family: var(--font-title);
    font-weight: 400;
}

/* .navbar-toggler {
    color: #fff !important;
    --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.75%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
    --bs-navbar-toggler-border-color: #fff;
} */

.hamburger-lines-checkbox,
.hamburger-lines {
    display: none;
}

.gallary {
    gap: 1rem !important;
}

.bunbun-navbar {
    background-color: transparent !important;
}

.bunbun-navbar .nav-link {
    color: #000;
    font-size: 20px;
}

.navbar-brand img {
    content: var(--logo-path); /* Optional, primarily used for pseudo-elements */
    height: var(--logo-height);
    width: var(--logo-width); /* Optional: Use 'auto' to maintain aspect ratio */
    display: block; /* Ensures the element respects dimensions */
    object-fit: contain; /* Ensures the logo fits within the defined dimensions */
}


.bunbun-hero-banner {
    background-image: url('../images/banner.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position-y: center;
}

.bunbun-hero-banner-content {
    padding: 13.5rem;
}

.bunbun-hero-banner-content h1 {
    width: 40%;    
    font-weight: bolder;
    margin: 0 auto;
}

.bunbun-hero-banner-content .bunbun-hero-banner-content-text {
    width: 50%;
    margin: 0 auto;
    font-weight: lighter;
}

.bg-dark2 {
    background-color: var(--dark2-color) !important;
}

.social-media-links {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem .6rem;
    width: 50%;
}

.social-media-cricle {
    display: block;
    width: 2rem;
    height: 2rem;
    background-color: white;
    border-radius: 100%;
    color: black;
}

.social-media-cricle i {
    font-size: 1rem;
    padding: .5rem;
}

.line-in-middle {
    position: relative;
}

.line-in-middle::before{
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1px;
    background-color: #000; /* Adjust color to match your design */
}

.line-in-middle::before {
    left: 50%;
    transform: translateX(-50%);
    height: 100%;
}

 /* Stats Section */
 .stats-section {
    text-align: center;
    padding: 2rem 0;
    background-color: #fff;
}

.stats-section hr {
    width: 100%;
    height: 1px;
    margin: 2rem auto;
    background: linear-gradient(to right, transparent, /* Left side fades out */ #000, /* Middle thicker and darker */ transparent);
    border: none;
    opacity: 1;
}

.stat-item {
    display: inline-block;
    width: 22%;
    padding: 1rem;
    position: relative;
}

.stat-item h2 {
    font-family: "Inter", serif !important;
    font-weight: 400;
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
    color: #282A3A;
}

.stat-item p {
    font-family: var(--font-title);
    
    margin: 0;
    font-size: 1rem;
    color: #555;
}

/* Vertical Lines */
.stat-item::after {
    content: '';
    position: absolute;
    top: 10%;
    bottom: 10%;
    right: 0;
    width: 1px;
    background-color: #ddd;
}

.stat-item:last-child::after {
    display: none; /* Remove line for the last item */
}

 /* Testimonial Text Styling */
 .testimonial-text {
    font-size: 1.1rem;
    color: #555;
}

.stars {
    color: #ffc107; /* Yellow stars */
    font-size: 1.2rem;
}

.swiper-container {
    overflow: hidden;
    margin: 0 auto; /* Centering Swiper */
}

.swiper-pagination-bullet-active {
    background-color: #000; /* Custom pagination bullet color */
}


/* About Us Section Container */
.about-us-section {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 3rem 2rem;
    background-color: #fff; /* Optional background */
}

/* Left Content */
.about-content h2 {
    position: relative;
    font-weight: 700;
    margin-bottom: 1.5rem;
}

/* ::before pseudo-element for About Us title */
.about-content h2::before {
    content: '';
    position: absolute;
    top: -10px;
    left: -40px;
    background: url('./images/about-icon.png') no-repeat center center;
    background-size: contain;
    width: 60px;
    height: 60px;
}

.about-content p {
    font-size: 1rem;
    color: #555;
    line-height: 1.8;
    margin-bottom: 1rem;
}

.about-content .btn-read-more {
    display: inline-block;
    background-color: #000;
    color: #fff;
    border: none;
    padding: 10px 20px;
    font-weight: 500;
    text-decoration: none;
    border-radius: 5px;
}

/* Right Single Image with Clipped Styles */
.about-image {
    position: relative;
    max-width: 45%;
    text-align: center;
}

.about-image img {
    width: 100%;
    height: auto;
    border-top-left-radius: 50%;
    border-top-right-radius: 0;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 50%;
}

.btn-bunbun-black {
    font-family: var(--font-title);
    text-transform: uppercase;
    padding: 1rem 3rem;
    color: white;
    background: #000;
    border: 1px solid;
    border-radius: 0px 32px 0px 32px;
}

.btn-bunbun-black i {
    color: #ffffff; 
    font-size: 18px;
    transform: translate(10px, 6px) rotate(-45deg);
    transition: .4s;
}

.btn-bunbun-black:hover {
    border: 1px solid #000;
    background: #fff;
    color: #000;
}

.btn-bunbun-black:hover i {
    color: #000 !important;
    font-size: 20px;
    transform: translate(10px, 5px) rotate(-90deg);
}

/* White Button */
.btn-bunbun-white {
    font-family: var(--font-title);
    text-transform: uppercase;
    padding: 1rem 3rem;
    color: #000;
    background: #fff;
    border: 1px solid #000;
    border-radius: 0px 32px 0px 32px;
    transition: background 0.4s, color 0.4s;
}

.btn-bunbun-white i {
    color: #000;
    font-size: 18px;
    transform: translate(10px, 6px) rotate(-45deg);
    transition: .4s;
}

.btn-bunbun-white:hover {
    border: 1px solid #fff;
    background: #000;
    color: #fff;
}

.btn-bunbun-white:hover i {
    color: #fff !important;
    font-size: 20px;
    transform: translate(10px, 5px) rotate(-90deg);
}

/* General Title Styling */
.bunbun-title {
    color: #282A3A;
    opacity: .58;
    font-size: 24px;
    position: relative;
}

/* Left-aligned Title with ::before Image */
.bunbun-title-left::before {
    content: '';
    position: absolute;
    top: 18%;
    filter: opacity(0.5);
    left: -25px;
    transform: translateY(-50%);
    background: url(../images/title-icon.png) no-repeat center center;
    background-size: contain;
    width: 40px;
    height: 40px;
}

/* Center-aligned Title with ::before Image */
.bunbun-title-center {
    text-align: center; /* Center the text */
}

.bunbun-title-center::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    background: url('../images/title-icon.png') no-repeat center center;
    background-size: contain;
    width: 40px; /* Adjust width of the image */
    height: 40px; /* Adjust height of the image */
}


.about-us-text {
    padding: 0 3rem 0 0;
}

.about-us-text p {
    padding-bottom: 1rem;
}

.franchise {
    background-image: url('../images/franchise.png');
    background-repeat: no-repeat;
    background-size: cover;
    color: white;
    background-position: bottom;
    padding-top: 5rem !important;
    padding-bottom: 5rem !important;
}

.w-18 {
    width: 18%;
}

.pt-10 {
    padding-top: 5rem !important;
}

.about-star {
    position: absolute;
    display: inline-block;
    height: 100%;
    width: 100% !important;
    overflow: hidden;
}

.about-star .star::after {
    content: '';
    position: absolute;
    transform: rotate(var(--rotation, 0deg));
    background-image: url(../images/title-icon.png);
    background-size: contain;
    background-repeat: no-repeat;
}


.about-star1 .star::after {
    top: 7rem;
    left: -8rem;
    height: 15rem;
    width: 15rem;
    opacity: .2;
    z-index: 3;
}

.about-star2 .star::after {
    top: 0rem;
    right: -8rem;
    height: 15rem;
    width: 15rem;
    opacity: .2;
    z-index: 3;
}

.about-star3 .star::after {
    top: 9rem;
    right: -1.5rem;
    height: 6rem;
    width: 6rem;
    opacity: .6;
    z-index: 3;
}


.about-star10 .star::after {
    top: 7rem;
    left: -8rem;
    height: 15rem;
    width: 15rem;
    opacity: .2;
    z-index: 3;
}




/* About page */
.about-page-section {
    background-color: #fff;
    padding: 2rem 0;
}

.about-page-section h3 {
    font-family: 'Arial', sans-serif;
    font-weight: 700;
    color: #333;
}

.about-page-section p {
    color: #555;
    font-size: 1rem;
    line-height: 1.6;
}



.black-bg-section {

    background-image: url(../images/about-bg.png);
}
.about-bg-section{


    background-size: cover; 
    background-position: center; 
    background-repeat: no-repeat; 
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 90vh;
}

.hor-line {
    position: relative;
    display: flex;
    align-items: center; 
}

.text-with-line {
    position: relative;
    padding: 0 20px; 
}

.text-with-line::before,
.text-with-line::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 50px; 
    height: 2px;
    transform: translateY(-50%); 
}
.white-line::before,
.white-line::after {
    background-color: #ffffff;  
}

.black-line::before,
.black-line::after {
    background-color: #000;  
}

.text-with-line::before {
    left: -60px; 
}

.text-with-line::after {
    right: -60px; 
}

.mission-bg-section{
    background-color: #E7E7E7;
    overflow: hidden;
}

.about-mission-star1 .star::after {
    top: 0;
    left: -7.5rem;
    height: 15rem;
    width: 15rem;
    opacity: 0.1;
    z-index: 3;
    transform: rotate(25deg);
}

.about-mission-star2 .star::after {
    bottom: -3rem;
    right: -8rem;
    height: 18rem;
    width: 18rem;
    opacity: .1;
    z-index: 3;
    transform: rotate(21deg);}

.about-mission-star3 .star::after {
    bottom: 4rem;
    right: 3.5rem;
    height: 6rem;
    width: 6rem;
    opacity: .6;
    z-index: 3;
    transform: rotate(21deg);
}

.about-mission-star4 .star::after {
    top: 2.8rem;
    left: 1.2rem;
    height: 6rem;
    width: 6rem;
    opacity: .6;
    z-index: 3;
    transform: rotate(21deg);
}

.form-control {
    border: none;
    border-bottom: 2px solid #ccc;
    border-radius: 0;
    padding-left: 5px;
    padding-right: 5px;
}

.form-control:focus {
    border-color: #007bff;
    outline: none;
}

.form-group {
    margin-bottom: 1rem;
}

.form-row {
    display: flex;
    gap: 20px;
}

/*contact*/
.contact-info-section {
    background-image: url(../images/Contact-Info.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 50vh;
}

.text-sm-line::after {
    content: '';
    position: absolute;
    bottom: 0;
    width: 9%;
    height: 2px;
    background-color: black;
}

.subscribe-section {
    background-color: black;
    padding: 7rem;
    color: white;
    border-bottom: #fff;
}

.subscribe-section .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap; /* Ensures it wraps on smaller screens */
}

.subscribe-text h1 {
    font-size: 2rem;
    margin-bottom: 10px;
}

.subscribe-text p {
    font-size: 1rem;
    margin: 0;
}

.subscribe-input form {
    display: flex;
    align-items: center;
    gap: 0px;
}

.subscribe-input input {
    background-color: #292929;
    border: none;
    color: white;
    padding: 10px 15px;
    font-size: 1rem;
    border-top-left-radius: 2px ;
    border-bottom-left-radius: 2px ;
    outline: none;
    flex: 1;
}

.subscribe-input input::placeholder {
    color: gray;
}

.subscribe-input button {
    background-color: white;
    color: black;
    border: none;
    padding: 10px 20px;
    font-size: 1rem;
    font-weight: bold;
    border-top-right-radius: 2px ;
    border-bottom-right-radius: 2px ;

    cursor: pointer;
    transition: background-color 0.3s, color 0.3s;
}

.subscribe-input button:hover {
    background-color: gray;
    color: white;
}
.white-line {
    background-color: white;
    height: 1px;
    width: 100%; 
}

.about-star4 .star::after {
    top: 7rem;
    left: -8rem;
    height: 15rem;
    width: 15rem;
    opacity: .2;
    z-index: 3;
}

.about-star5 .star::after {
    top: 0rem;
    right: -8rem;
    height: 15rem;
    width: 15rem;
    opacity: .2;
    z-index: 3;
}

.about-star6 .star::after {
    top: 9rem;
    right: -1.5rem;
    height: 6rem;
    width: 6rem;
    opacity: .6;
    z-index: 3;
}


/*franchise page*/

.franchise-header{
    background-image: url("../images/franshise-header.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    color: #fff;
}

.franchise-content {
    max-width: 50%;
    background-color: black;
    color: white;
    border-radius: 10px;
    padding: 20px;
}

.franchise-form-control {
    background-color: #f0f0f0; 
    border: 1px solid #ccc;
    border-radius: 5px;
    color: black;
    padding: 10px;
    margin-bottom: 15px;
    width: 100%;
}

.franchise-form-control::placeholder {
    color: #666;
}