:root {
    --brand-white: #FFFFFF;
    --brand-text-color: #272F3C;
    --brand-red-color: #7A1A2F;
    --brand-beige-color: #F6DEBD;
    --primary-font: "Almarai", sans-serif;
}

body {
    padding: 0;
    margin: 0;
    text-decoration: none;
    font-family: var(--primary-font) !important;
}

a {
    text-decoration: none !important;
}

ul>li {
    list-style: none;
}

button.navbar-toggler {
    border: none;
}

.navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='%23F6DEBD' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E") !important;
}


.brand-header {
    background-color: #7a1a2fab;
    backdrop-filter: blur(12px);
    padding: 1rem 0 !important;
}

.brand-header-link {
    text-transform: uppercase;
    color: var(--brand-beige-color) !important;
    padding: 0 15px !important;
    transition: 0.3s ease;
}

.brand-header-link:hover {
    border-bottom: 1px solid var(--brand-beige-color);
}

.lang-link {
    color: var(--brand-beige-color);
    margin-right: 5px;
    margin-left: 5px;
}

.language-text {
    display: flex;
    justify-content: center;
}

.header-logo img {
    width: 100%;
    height: 60px;
    object-fit: contain;
}


.carousel-item {
    z-index: -1 !important;
}

.carousel-item img {
    width: 100%;
    height: 90vh;
    object-fit: cover;
}

.carousel-banner img {
    width: 100%;
    height: 90vh;
}

.hero-banner {
    position: relative;
}

.hero-banner img {
    width: 100%;
    height: 90vh;
    object-fit: cover;
}

.hero-banner-content {
    position: absolute;
    right: 15%;
    left: 15%;
    top: 40%;
    text-align: center;
}

.hero-banner-content h2 {
    color: var(--brand-white);
    font-family:  var(--primary-font);
    font-weight: 600;
    font-size: 4.688rem;
    text-transform: uppercase;
    text-shadow: 2px 2px 4px #00000080;
}


.about-banner img {
    width: 100%;
    height: 960px;
    object-fit: cover;
    margin-top: -3rem;
    z-index: 999;
}

.about-content {
    padding-top: 4rem;
    padding-bottom: 4rem;
}

.about-content h2,
.service-wrap h2,
.message-title h2,
.delivery-title h2 {
    font-size: 4rem;
    text-align: center;
    font-family: var(--primary-font);
    text-transform: uppercase;
    font-weight: 600;
}

.about-para p {
    text-align: center;
    font-size: 1.125rem;
    color: var(--brand-text-color);
    margin-bottom: 3.5rem;
    font-weight: 400;
}

.red-highlight {
    color: var(--brand-red-color);
}

.brand-btn {
    background-color: transparent;
    color: var(--brand-text-color);
    border-top: 1px solid var(--brand-beige-color);
    border-bottom: 1px solid var(--brand-beige-color);
    border-left: none;
    border-right: none;
    padding: 0.5rem 1rem;
    font-size: 1.875rem;
    font-family: var(--primary-font);
    transition: 0.3s ease;
    text-align: center;
    font-weight: 600;
}

.brand-btn:hover {
    border: none;
    color: var(--brand-beige-color)
}

.availability-banner img {
    width: 100%;
    height: 500px;
    object-fit: cover;
}

.availability-content {
    margin-top: 10rem;
}

.availability-content p {
    color: var(--brand-text-color);
    font-weight: 400;
    font-size: 1.125rem;
}

.availability-content-placement {
    margin-top: -4rem;
}

.section-spacing {
    padding: 110px 0;
}

.service-wrap {
    padding: 2rem;
    width: 60%;
    margin-right: auto;
    background-color: var(--brand-white);
    z-index: 10;
}

.service-wrap p {
    text-align: center;
    font-size: 1.125rem;
    color: var(--brand-text-color);
    margin-bottom: 1.5rem;
    font-weight: 400;
}

.service-banner img {
    width: 85%;
    height: 650px;
    object-fit: cover;
    position: absolute;
    top: 7rem;
    z-index: -1;
}

.service-wrapper {
    position: relative;
}

.message-wrap {
    margin-top: 20rem;
    text-align: center;
    width: 80%;
    margin-left: auto;
    margin-right: auto;
}

.message-content h4 {
    color: var(--brand-red-color);
    margin: 1.5rem 0;
    font-size: 1.56rem;
    font-family: var(--primary-font);
}

.message-content p {
    text-align: center;
    font-size: 1.125rem;
    color: var(--brand-text-color);
    margin-bottom: 1.5rem;
    font-weight: 400;
}

.delivery-content-wrap {
    padding: 0 3rem;
}

.delivery-content p {
    text-align: center;
    font-size: 1.125rem;
    color: var(--brand-text-color);
    margin-bottom: 1.5rem;
    font-weight: 400;
}

.delivery-banner img {
    width: 100%;
    height: 300px;
    object-fit: cover;
}

.odeh-video video {
    width: 100%;
    height: 600px;
    object-fit: cover;
    margin-bottom: -1rem;
}

.gallery-title-wrap {
    text-align: center;
    padding: 5rem 3rem;
    background-color: var(--brand-red-color);
    z-index: -1;
}

.gallery-title-wrap h2 {
    color: var(--brand-beige-color);
    font-size: 4rem;
    text-align: center;
    font-family: var(--primary-font);
    text-transform: uppercase;
    font-weight: 600;
    margin-bottom: 2rem;
}

.gallery-title-wrap h4 {
    color: var(--brand-white);
    margin-bottom: 1.5rem;
    font-family: var(--primary-font);
}

.gallery-title-wrap p {
    font-size: 1.125rem;
    color: var(--brand-white);
    font-weight: 400;
    margin-bottom: 0;
}

.gallery-slider-wrap {
    margin-top: -2rem;
}

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

.footer-logo img {
    margin-left: auto;
    margin-right: auto;
    display: block;
    width: 100%;
    height: 150px;
    object-fit: contain;
    padding-bottom: 2rem;
    border-bottom: 1px solid var(--brand-red-color);
}

.footer-contact {
    text-align: center;

}

.footer-contact h3 {
    padding-top: 1rem;
    margin-bottom: 1rem;
    font-family: var(--primary-font);
    font-weight: 600;
    text-align: center;
    text-transform: uppercase;
}

.footer-contact p a {
    color: var(--brand-red-color);
    transition: 0.3s ease;
}

.footer-contact p a:hover {
    color: var(--brand-beige-color);
}

.footer-address p {
    text-align: center;
    font-size: 1.125rem;
    color: var(--brand-text-color);
    margin-top: 3.5rem;
    margin-bottom: 3.5rem;
    font-weight: 400;
}

.footer-timing p {
    margin-bottom: 1rem;
    text-align: center;
    font-size: 1.125rem;
    color: var(--brand-text-color);
    font-weight: 400;
}

.footer-social-media {
    text-align: center;
}

.footer-social-media li {
    display: inline-flex;
}

.footer-social-media li i {
    color: var(--brand-red-color);
    font-size: 1.5rem;
    margin: 0.5rem;
    transition: 0.3s ease;
}

.footer-social-media li i:hover {
    color: var(--brand-beige-color);
}

.footer-content {
    padding-bottom: 2.5rem;
    border-bottom: 1px solid var(--brand-red-color);
}