/*--------------------------------------------------------------------- File Name: style.css ---------------------------------------------------------------------*/


/*--------------------------------------------------------------------- import Fonts ---------------------------------------------------------------------*/

@import url('https://fonts.googleapis.com/css?family=Rajdhani:300,400,500,600,700');
@import url('https://fonts.googleapis.com/css?family=Poppins:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i');
@import url('https://fonts.googleapis.com/css?family=Raleway:100,400,600,700,900&display=swap');
@import url('https://fonts.googleapis.com/css?family=Baloo+Chettan&display=swap');
@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,600,600i,700,700i,800&display=swap');

/*****---------------------------------------- 1) font-family: 'Rajdhani', sans-serif;
 2) font-family: 'Poppins', sans-serif;
 ----------------------------------------*****/


/*--------------------------------------------------------------------- import Files ---------------------------------------------------------------------*/

@import url(animate.min.css);
@import url(normalize.css);
@import url(icomoon.css);
@import url(font-awesome.min.css);
@import url(meanmenu.css);
@import url(owl.carousel.min.css);
@import url(swiper.min.css);
@import url(slick.css);
@import url(jquery.fancybox.min.css);
@import url(jquery-ui.css);
@import url(nice-select.css);

/*--------------------------------------------------------------------- skeleton ---------------------------------------------------------------------*/

* {
     box-sizing: border-box !important;
}

.container {
     max-width: 1170px;
}

html {
     scroll-behavior: smooth;
}

body {
     color: #666666;
     font-size: 14px;
     font-family: 'Poppins', sans-serif;
     line-height: 1.80857;
     font-weight: normal;
}

a {
     color: #1f1f1f;
     text-decoration: none !important;
     outline: none !important;
     -webkit-transition: all .3s ease-in-out;
     -moz-transition: all .3s ease-in-out;
     -ms-transition: all .3s ease-in-out;
     -o-transition: all .3s ease-in-out;
     transition: all .3s ease-in-out;
}

h1,
h2,
h3,
h4,
h5,
h6 {
     letter-spacing: 0;
     font-weight: normal;
     position: relative;
     padding: 0 0 10px 0;
     font-weight: normal;
     line-height: normal;
     color: #111111;
     margin: 0
}

h1 {
     font-size: 24px;
}

h2 {
     font-size: 22px;
}

h3 {
     font-size: 18px;
}

h4 {
     font-size: 16px
}

h5 {
     font-size: 14px
}

h6 {
     font-size: 13px
}

*,
*::after,
*::before {
     -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
     box-sizing: border-box;
}

h1 a,
h2 a,
h3 a,
h4 a,
h5 a,
h6 a {
     color: #212121;
     text-decoration: none !important;
     opacity: 1
}

button:focus {
     outline: none;
}

ul,
li,
ol {
     margin: 0px;
     padding: 0px;
     list-style: none;
}

p {
     margin: 0px;
     font-weight: 500;
     font-size: 15px;
     line-height: 24px;
}

a {
     color: #222222;
     text-decoration: none;
     outline: none !important;
}

a,
.btn {
     text-decoration: none !important;
     outline: none !important;
     -webkit-transition: all .3s ease-in-out;
     -moz-transition: all .3s ease-in-out;
     -ms-transition: all .3s ease-in-out;
     -o-transition: all .3s ease-in-out;
     transition: all .3s ease-in-out;
}

img {
     max-width: 100%;
     height: auto;
}

:focus {
     outline: 0;
}

.btn-custom {
     margin-top: 20px;
     background-color: transparent !important;
     border: 2px solid #ddd;
     padding: 12px 40px;
     font-size: 16px;
}

.lead {
     font-size: 18px;
     line-height: 30px;
     color: #767676;
     margin: 0;
     padding: 0;
}

.form-control:focus {
     border-color: #ffffff !important;
     box-shadow: 0 0 0 .2rem rgba(255, 255, 255, .25);
}

.navbar-form input {
     border: none !important;
}

.badge {
     font-weight: 500;
}

blockquote {
     margin: 20px 0 20px;
     padding: 30px;
}

button {
     border: 0;
     margin: 0;
     padding: 0;
     cursor: pointer;
}

.full {
     float: left;
     width: 100%;
}

.full {
     width: 100%;
     float: left;
     margin: 0;
     padding: 0;
}


/**-- heading section --**/


/*---------------------------- preloader area ----------------------------*/

.loader_bg {
     position: fixed;
     z-index: 9999999;
     background: #fff;
     width: 100%;
     height: 100%;
}

.loader {
     height: 100%;
     width: 100%;
     position: absolute;
     left: 0;
     top: 0;
     display: flex;
     justify-content: center;
     align-items: center;
}

.loader img {
     width: 280px;
}


/*-- header area --*/


/*--------------------------------------------------------------------- top banner area ---------------------------------------------------------------------*/

/* .logo a img {
     position: relative;
     z-index: 9999;
}

.logo::before {
     position: absolute;
     content: "";
     top: -35px;
     background: url(../images/lo_be1.png);
     width: 390px;
     height: 197px;
     left: -30px;
     background-repeat: no-repeat;
} */

/* ==============================
   CUSTOM LOGO
============================== */

.logo {
     position: relative;
     z-index: 9999;
     padding: 0;
     margin: 0;
     display: flex;
     align-items: center;
}

.logo a {
     display: flex;
     align-items: center;
     padding: 0;
     margin: 0;
}

.logo a img {
     position: relative;
     z-index: 9999;
     display: block;

     width: 195px;
     height: 95px;

     max-width: none;
     object-fit: contain;

     /*
     يخلي اللون الأبيض الموجود
     داخل صورة اللوجو يندمج مع الخلفية
     */
     mix-blend-mode: multiply;
}


/*-- navigation--*/

/* .navigation.navbar {
     float: right;
     padding-top: 3px !important;
     padding: 0;
} */

.navigation.navbar {
     float: right;
     padding: 0 !important;
     margin: 0;

     position: relative;
     z-index: 1002;
}


.navigation.navbar-dark .navbar-nav .nav-link {
     padding: 9px 22px;
     color: #fff;
     font-size: 16px;
     line-height: 20px;
     font-weight: 500;
     text-transform: uppercase;
}

.navigation.navbar-dark .navbar-nav .nav-link:focus,
.navigation.navbar-dark .navbar-nav .nav-link:hover {
     color: #000;
}

.navigation.navbar-dark .navbar-nav .active>.nav-link,
.navigation.navbar-dark .navbar-nav .nav-link.active,
.navigation.navbar-dark .navbar-nav .nav-link.show,
.navigation.navbar-dark .navbar-nav .show>.nav-link {
     color: #000;
}

.navbar-expand-md .navbar-nav {
     padding-right: 10px;
}

/* .header {
     width: 100%;
     height: 74px;
     padding: 15px 30px;
     background-color: #ff3556e3;
} */

.header {
     width: 100%;
     height: 74px;
     padding: 8px 30px;

     background-color: #ff3556e3;

     position: relative;
     z-index: 1000;
}

.logo_section {
     position: relative;
     z-index: 1001;

     display: flex;
     align-items: center;
     height: 58px;
}

.center-desk {
     width: 100%;
     display: flex;
     align-items: center;
}

.full {
     width: 100%;
}



/** banner section **/

/* .full_bg {
     background: url(../images/banner2.jpg);
     background-size: 100% 100%;
     background-position: center;
     background-repeat: no-repeat;
     padding-top: 20px;
} */

html,
body {
     margin: 0;
     padding: 0;
}


.full_bg {
     padding: 0;
     margin: 0;
}


.banner_main {
     position: relative;
     padding-bottom: 110px;
}

.text_box {
     text-align: left;
     padding-top: 36%;
}

.text_box span {
     color: #000;
     font-size: 28px;
     line-height: 20px;
     font-weight: bold;
     padding-bottom: 15px;
     display: block;
}

.text_box h1 {
     font-size: 91px;
     font-weight: 500;
     color: #ff3556;
     margin-bottom: 50px;
     line-height: 87px;
}

.text_box h1 strong {
     font-size: 79px;
     font-weight: 500;
     line-height: 78px;
}


/** end banner section **/

.titlepage {
     text-align: center;
     padding-bottom: 40px;
}

.titlepage h2 {
     font-size: 50px;
     color: #121212;
     line-height: 45px;
     font-weight: bold;
     padding-bottom: 10px;
}

.titlepage h2::before {
     position: absolute;
     content: "";
     background-color: #ff3556;
     width: 78px;
     height: 3px;
     bottom: 0px;
}

.titlepage span {
     font-size: 17px;
     line-height: 25px;
     color: #0a0a0a;
     padding-top: 20px;
     display: block;
}

.d_flex {
     display: flex;
     align-items: center;
     flex-wrap: wrap;
}

.read_more {
     font-size: 17px;
     background-color: #000;
     color: #fff;
     padding: 12px 0px;
     width: 100%;
     max-width: 204px;
     text-align: center;
     display: inline-block;
     transition: ease-in all 0.5s;
     font-weight: 500;
     height: 54px;
}

.read_more:hover {
     background: #ff3556;
     color: #fff;
     transition: ease-in all 0.5s;
     border-radius: 30px;
}


/** about section **/

.about {
     background-color: #fff;
     padding: 90px 0;
}

.about .titlepage {
     text-align: center;
}

.about .titlepage span {
     font-family: 'Open Sans', sans-serif;
}

.about_img {
     margin: 0 46px;
}

.about_img figure {
     margin: 0;
}

.about_img figure img {
     width: 100%;
}

.about_img .read_more {
     margin: 0 auto;
     display: block;
     margin-top: 60px;
}


/** end about section **/


/** using section **/

.using {
     background: #ff3556;
     margin: 0 60px 0 60px;
}

.using .titlepage {
     text-align: left;
     max-width: 554px;
     float: right;
     width: 100%;
     padding-bottom: 0;
}

.using .titlepage h2::before {
     background-color: #fff;
}

.using .titlepage h2 {
     color: #fff;
     padding-bottom: 10px;
}

.using .titlepage p {
     color: #fff;
     font-weight: normal;
     font-family: 'Open Sans', sans-serif;
     font-size: 16px;
     border-bottom: #fff solid 1px;
     padding-bottom: 35px;
     padding-top: 20px;
}

.frout_img {
     background-color: #fff;
}

.using .titlepage .read_more {
     margin-top: 50px;
}

.white_bg:hover {
     background-color: #fff;
     color: #000;
}

.frout_img figure {
     margin: 0;
}

.frout_img figure img {
     width: 100%
}

.padding_right0 {
     padding-right: 0;
}


/** end using section **/


/** our products section **/

.products {
     padding: 60px 0 30px 0;
     margin-bottom: 90px;
     background-color: #f4f4f4;
}

.products .titlepage {
     text-align: left;
}

.our_products {
     padding: 0 15px 15px 15px;
     transition: ease-in all 0.3s;
     margin-bottom: 30px;
}

#ho_bo:hover.our_products {
     box-shadow: 0px 0px 9px rgba(255, 53, 86, 0.33);
     transition: ease-in all 0.3s;
     margin-top: -10px;
     cursor: pointer;
     background-color: #fff;
}

.our_products h3 {
     margin-top: 15px;
     font-size: 22px;
     line-height: 31px;
     color: #000;
     font-weight: 500;
     padding-bottom: 10px;
}

.our_products span {
     font-size: 17px;
     line-height: 20px;
     font-weight: 500;
     color: #ff3556;
}

.our_products p {
     font-size: 15px;
     line-height: 21px;
     font-weight: 400;
     color: #000000;
}

.product {
     background-color: #fff;
     text-align: center;
     margin: 0 -15px 0px -15px !important;
}

.product figure {
     margin: 0;
}

.padding_left0 {
     padding-left: 0;
}


/** end our products section **/


/** gallery  section **/

.gallery {
     padding: 60px 0px 30px 0px;
     margin-top: 90px;
     background-color: #f4f4f4;
}

.gallery .titlepage {
     text-align: center;
}

.gallery .gallery_img {
     overflow: hidden;
     margin-bottom: 30px;
     background-color: #ffffff;
}

.gallery .gallery_img figure {
     margin: 0;
}

.gallery .gallery_img figure img {
     width: 100%;
     transition: all .5s;
}

.gallery .gallery_img figure img:hover {
     transform: scale(1.2);
     cursor: pointer;
}


/** end gallery  section **/


/** contact section **/

.contact {
     background: url(../images/background_co.jpg);
     background-repeat: no-repeat;
     background-size: 100% 100%;
     background-position: center;
     margin-top: 90px;
     padding: 90px 0;
}

.contact .titlepage {
     text-align: left;
}

.contact .titlepage h2 {
     color: #fff;
}

.contact .titlepage h2::before {
     background: #fff;
}

.main_form {
     padding: 33px 80px;
     background: #fff;
}

.main_form .contactus {
     border: #fff solid 1px;
     padding: 0px 20px;
     margin-bottom: 25px;
     width: 100%;
     height: 44px;
     background: #fff;
     color: #dadada;
     font-size: 17px;
     font-weight: normal;
     box-shadow: 0px 0px 18px rgba(22, 22, 23, 0.11);
}

.main_form .textarea {
     border: #fff solid 1px;
     margin-bottom: 25px;
     width: 100%;
     background: #fff;
     color: #dadada;
     font-size: 17px;
     font-weight: normal;
     padding: 25px 20px 0 20px;
     box-shadow: 0px 0px 18px rgba(22, 22, 23, 0.11);
     height: 86px;
}

.main_form .send_btn {
     font-size: 20px;
     transition: ease-in all 0.5s;
     background-color: #000000;
     text-transform: uppercase;
     color: #fff;
     padding: 8px 0px;
     max-width: 144px;
     width: 100%;
     display: block;
     margin-top: 10px !important;
     font-weight: 500;
}

.main_form .send_btn:hover {
     background-color: #ff3556;
     transition: ease-in all 0.5s;
     color: #fff;
}

#request *::placeholder {
     color: #dadada;
     opacity: 1;
}


/** end contact section **/


/** footer **/

.footer {
     background: #000000;
     padding-top: 90px;
     text-align: center;
     margin-top: 90px;
}

.border_top1 {
     border-top: #fff solid 3px;
     padding-bottom: 60px;
}

.newslatter {
     padding-bottom: 60px;
}

.newslatter h4 {
     font-weight: 600;
     font-size: 35px;
     line-height: 25px;
     text-align: center;
     color: #fff;
     padding-bottom: 15px;
}

.newslatter h4::before {
     position: absolute;
     content: "";
     background-color: #fff;
     width: 76px;
     height: 3px;
     bottom: 0px;
}

.bottom_form {
     display: flex;
     flex-wrap: wrap;
     margin-top: 55px;
}

.bottom_form .enter {
     border: inherit;
     padding: 0px 19px;
     width: 64%;
     height: 61px;
     background: #fff;
     color: #d5d2d2;
     font-size: 20px;
     font-weight: 300;
     float: left;
     margin-bottom: 20px;
}

.sub_btn {
     font-size: 17px;
     transition: ease-in all 0.5s;
     background-color: #000;
     color: #fff;
     padding: 5px 0px;
     max-width: 270px;
     width: 100%;
     font-weight: normal;
     text-transform: uppercase;
     height: 61px;
     border: #fff solid 8px;
}

.sub_btn:hover {
     background-color: #ff3556;
     transition: ease-in all 0.5s;
     color: #fff;
}

.footer h3 {
     font-weight: 600;
     font-size: 20px;
     line-height: 24px;
     text-align: left;
     color: #fff;
     margin-bottom: 15px;
     display: table;
     text-transform: uppercase;
}

ul.conta li {
     color: #fff;
     text-align: left;
     padding-bottom: 20px;
     font-size: 16px;
}

ul.conta li i {
     padding-right: 15px;
     text-align: center;
     font-size: 20px;
}

ul.conta li a {
     color: #fff;
}

ul.link_menu li {
     display: block;
     text-align: left;
}

ul.link_menu li.active a {
     color: #ff0909;
}

ul.link_menu li a {
     color: #fff;
     font-size: 17px;
     line-height: 32px;
     display: block;
     width: -moz-max-content;
}

ul.link_menu li a:hover {
     color: #f4a111;
}

.copyright {
     margin-top: 60px;
     background-color: #ff3556;
     box-shadow: 3px 0px 10px rgba(0, 0, 0, 0.42);
}

.many {
     color: #fff;
     font-size: 17px;
     line-height: 32px;
     font-weight: normal;
     text-align: left;
}

.copyright p {
     color: #fff;
     font-size: 17px;
     line-height: 22px;
     font-weight: 400;
     text-align: center;
     padding-top: 26px;
     font-weight: normal;
     padding-bottom: 20px;
}

.copyright a {
     color: #fff;
}

.copyright a:hover {
     color: #000;
}


/** end footer **/


/** end inner page css **/

.inner_page .full_bg {
     background-color: #fff !important;
     background: transparent;
}

.back_re {
     background-color: #6a6767;
     margin-top: 50px;
}

.back_re .title {
     text-align: center;
}

.back_re .title h2 {
     color: #fff;
     font-size: 40px;
     padding: 40px 0;
     font-weight: 600;
     text-transform: uppercase;
     line-height: 35px;
}

.margin_0 {
     margin: 0 !important;
}

/* ==============================
   RESPONSIVE LOGO
============================== */

@media (max-width: 991px) {

     .header {
          height: auto;
          min-height: 70px;
          padding: 8px 20px;
     }

     .logo_section {
          height: 55px;
     }

     .logo a img {
          width: 160px;
          height: 70px;
     }

     .navigation.navbar {
          padding: 0 !important;
     }

}


@media (max-width: 767px) {

     .header {
          padding: 8px 15px;
     }

     .logo_section {
          height: 55px;
     }

     .logo a img {
          width: 145px;
          height: 65px;
     }

}


/* =====================================================
   ELYAH BUSINESS DEVELOPMENT - HERO SLIDER
===================================================== */

.banner_main {
     position: relative !important;
     width: 100%;
     height: 100vh !important;
     min-height: 650px;
     padding: 0 !important;
     margin: 0 !important;
     overflow: hidden !important;
}


/* =========================
   SLIDER
========================= */

.hero-slider {
     position: absolute !important;
     top: 0;
     left: 0;

     width: 100% !important;
     height: 100% !important;

     overflow: hidden !important;
}


/* =========================
   EACH SLIDE
========================= */

.hero-slide {
     position: absolute !important;

     top: 0;
     left: 0;

     width: 100% !important;
     height: 100% !important;

     display: block !important;

     opacity: 0 !important;
     visibility: hidden !important;

     overflow: hidden !important;

     z-index: 1;

     transition: opacity 1.5s ease-in-out,
          visibility 1.5s ease-in-out;
}


/* Active slide */

.hero-slide.active {
     opacity: 1 !important;
     visibility: visible !important;

     z-index: 2;
}


/* =========================
   IMAGE
========================= */

.hero-slide>img {
     position: absolute !important;

     top: 0;
     left: 0;

     width: 100% !important;
     height: 100% !important;

     max-width: none !important;

     object-fit: cover !important;

     transform: scale(1);

     transition: transform 7s ease-out;
}


/* Zoom only active image */

.hero-slide.active>img {
     transform: scale(1.10);
}


/* =========================
   DARK OVERLAY
========================= */

.hero-slide .hero-overlay {
     position: absolute !important;

     top: 0;
     left: 0;

     width: 100% !important;
     height: 100% !important;

     z-index: 2;

     background:
          linear-gradient(90deg,
               rgba(0, 0, 0, 0.72) 0%,
               rgba(0, 0, 0, 0.48) 45%,
               rgba(0, 0, 0, 0.18) 100%);
}


/* =========================
   TEXT
========================= */

.hero-caption {
     position: absolute !important;

     top: 50%;
     left: 8%;

     transform: translateY(-50%);

     width: 650px;
     max-width: 80%;

     z-index: 5;

     color: #fff;
}


/* Small title */

.hero-caption span {
     display: block;

     color: #fff;

     font-size: 20px;
     font-weight: 500;

     letter-spacing: 2px;

     margin-bottom: 15px;

     opacity: 0;
     transform: translateY(30px);
}


/* Main title */

.hero-caption h1 {
     color: #fff !important;

     font-size: 65px;
     line-height: 1.05;

     margin: 0 0 25px 0 !important;

     opacity: 0;
     transform: translateY(30px);
}


.hero-caption h1 strong {
     color: #fff !important;
}


/* Description */

.hero-caption p {
     color: #fff !important;

     font-size: 18px;
     line-height: 1.7;

     max-width: 600px;

     margin: 0 0 30px 0 !important;

     opacity: 0;
     transform: translateY(30px);
}


/* Button */

.hero-caption .read_more {
     opacity: 0;
     transform: translateY(30px);
}


/* =========================
   TEXT ANIMATION
========================= */

.hero-slide.active .hero-caption span {
     animation: heroTextIn 0.9s ease forwards;
     animation-delay: 0.3s;
}


.hero-slide.active .hero-caption h1 {
     animation: heroTextIn 0.9s ease forwards;
     animation-delay: 0.5s;
}


.hero-slide.active .hero-caption p {
     animation: heroTextIn 0.9s ease forwards;
     animation-delay: 0.7s;
}


.hero-slide.active .hero-caption .read_more {
     animation: heroTextIn 0.9s ease forwards;
     animation-delay: 0.9s;
}


@keyframes heroTextIn {

     from {
          opacity: 0;
          transform: translateY(30px);
     }

     to {
          opacity: 1;
          transform: translateY(0);
     }

}


/* =========================
   MOBILE
========================= */

@media (max-width: 768px) {

     .banner_main {
          height: 80vh !important;
          min-height: 600px;
     }

     .hero-caption {
          left: 30px;

          width: auto;
          max-width: calc(100% - 60px);
     }

     .hero-caption h1 {
          font-size: 45px;
     }

     .hero-caption span {
          font-size: 16px;
     }

     .hero-caption p {
          font-size: 16px;
          line-height: 1.6;
     }

}


@media (max-width: 480px) {

     .banner_main {
          min-height: 550px;
     }

     .hero-caption {
          left: 20px;
          max-width: calc(100% - 40px);
     }

     .hero-caption h1 {
          font-size: 38px;
     }

}



```css
/* =========================================================
   ELYAH BUSINESS DEVELOPMENT - PREMIUM NAVBAR
   ========================================================= */

/* Header */
.full_bg .header {
     position: relative;
     z-index: 1000;
     padding: 18px 35px;
     transition: all 0.35s ease;
}

/* Logo */
.full_bg .logo img {
     max-height: 62px;
     width: auto;
     transition: all 0.3s ease;
}

/* Navigation */
.full_bg .navigation {
     padding: 0;
     width: 100%;
     justify-content: flex-end;
}

.full_bg .navbar-nav {
     margin-left: auto !important;
     align-items: center;
     gap: 5px;
}

/* Nav links */
.full_bg .navbar-nav .nav-link {
     position: relative;
     padding: 12px 18px !important;
     color: #ffffff !important;
     font-size: 15px;
     font-weight: 500;
     letter-spacing: 0.3px;
     text-transform: none;
     transition: all 0.3s ease;
}

/* Underline hover effect */
.full_bg .navbar-nav .nav-link:not(.quote-btn)::after {
     content: "";
     position: absolute;
     left: 18px;
     right: 18px;
     bottom: 4px;
     height: 2px;
     background: #ffffff;
     transform: scaleX(0);
     transform-origin: center;
     transition: transform 0.3s ease;
}

.full_bg .navbar-nav .nav-item:hover>.nav-link:not(.quote-btn)::after,
.full_bg .navbar-nav .nav-item.active>.nav-link:not(.quote-btn)::after {
     transform: scaleX(1);
}

/* Hover */
.full_bg .navbar-nav .nav-link:hover {
     color: #ffffff !important;
}

/* =========================================================
   PRODUCTS DROPDOWN
   ========================================================= */

.full_bg .navbar-nav .dropdown-menu {
     min-width: 250px;
     margin-top: 12px;
     padding: 8px 0;
     border: 0;
     border-radius: 4px;
     background: #ffffff;
     box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
}

/* Dropdown items */
.full_bg .navbar-nav .dropdown-item {
     padding: 11px 20px;
     color: #222222;
     font-size: 14px;
     font-weight: 500;
     transition: all 0.25s ease;
}

/* Dropdown hover */
.full_bg .navbar-nav .dropdown-item:hover {
     background: #f5f5f5;
     color: #111111;
     padding-left: 25px;
}

/* Remove Bootstrap default arrow */
.full_bg .navbar-nav .dropdown-toggle::after {
     margin-left: 6px;
     vertical-align: middle;
}

/* =========================================================
   REQUEST A QUOTE BUTTON
   ========================================================= */

.full_bg .nav-cta {
     margin-left: 14px;
}

.full_bg .quote-btn {
     padding: 11px 22px !important;
     border: 1px solid rgba(255, 255, 255, 0.8);
     border-radius: 3px;
     color: #ffffff !important;
     font-size: 14px !important;
     font-weight: 600 !important;
     letter-spacing: 0.3px;
     transition: all 0.3s ease;
}

/* CTA hover */
.full_bg .quote-btn:hover {
     background: #ffffff;
     color: #222222 !important;
     border-color: #ffffff;
}

/* Remove underline from CTA */
.full_bg .quote-btn::after {
     display: none !important;
}

/* =========================================================
     MOBILE
   ========================================================= */

@media (max-width: 991px) {

     .full_bg .header {
          padding: 15px 20px;
     }

     .full_bg .logo img {
          max-height: 55px;
     }

     .full_bg .navbar-toggler {
          margin-left: auto;
          padding: 7px 10px;
          border: 1px solid rgba(255, 255, 255, 0.6);
          border-radius: 3px;
     }

     .full_bg .navbar-collapse {
          margin-top: 15px;
          padding: 15px;
          background: rgba(0, 0, 0, 0.92);
          border-radius: 4px;
     }

     .full_bg .navbar-nav {
          align-items: stretch;
          gap: 0;
     }

     .full_bg .navbar-nav .nav-link {
          padding: 12px 10px !important;
     }

     .full_bg .navbar-nav .nav-link:not(.quote-btn)::after {
          left: 10px;
          right: auto;
          width: 35px;
          bottom: 5px;
     }

     .full_bg .nav-cta {
          margin: 10px 0 0;
     }

     .full_bg .quote-btn {
          display: inline-block;
          text-align: center;
          width: 100%;
     }

     .full_bg .navbar-nav .dropdown-menu {
          margin-top: 0;
          box-shadow: none;
          border-radius: 2px;
     }
}

/* Small mobile */
@media (max-width: 575px) {

     .full_bg .header {
          padding: 12px 15px;
     }

     .full_bg .logo img {
          max-height: 48px;
     }

     .full_bg .navbar-collapse {
          margin-top: 12px;
     }
}

/* =========================================================
   ELYAH BUSINESS DEVELOPMENT - FIXED NAVBAR
   ========================================================= */

.full_bg .header {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     z-index: 9999;

     padding: 16px 35px;

     background: transparent;

     transition: all 0.35s ease;
}


/* =========================================================
   NAVBAR AFTER SCROLL
   ========================================================= */

.full_bg .header.scrolled {
     background: #173B2D;
     box-shadow: 0 5px 25px rgba(0, 0, 0, 0.15);

     padding-top: 10px;
     padding-bottom: 10px;
}


/* =========================================================
   LOGO
   ========================================================= */

.full_bg .header .logo img {
     max-height: 72px;
     width: auto;

     transition: all 0.35s ease;
}


/* Logo after scroll */
.full_bg .header.scrolled .logo img {
     max-height: 65px;
}


/* =========================================================
   NAV LINKS
   ========================================================= */

.full_bg .header .nav-link {
     color: #ffffff !important;
}


/* Hover */
.full_bg .header .nav-link:hover {
     color: #ffffff !important;
}


/* Active */
.full_bg .header .nav-item.active .nav-link {
     font-weight: 600;
}


/* =========================================================
   ACTIVE UNDERLINE
   ========================================================= */

.full_bg .header .nav-item.active .nav-link::after {
     transform: scaleX(1);
}


/* =========================================================
   QUOTE BUTTON
   ========================================================= */

.full_bg .header .quote-btn {
     color: #ffffff !important;
     border-color: rgba(255, 255, 255, 0.8);
}


.full_bg .header .quote-btn:hover {
     background: #ffffff;
     color: #173B2D !important;
     border-color: #ffffff;
}


/* =========================================================
   SMOOTH SCROLL
   ========================================================= */

html {
     scroll-behavior: smooth;
}


/* Space for fixed navbar */
section[id],
div[id] {
     scroll-margin-top: 95px;
}

/* =========================================================
   ELYAH BUSINESS DEVELOPMENT - PRODUCTS
========================================================= */

.elya-products {
     background: #ffffff;
     padding: 100px 0;
}

.elya-products .titlepage {
     max-width: 850px;
     margin: 0 auto 60px;
}

.elya-products .section-label {
     display: block;
     color: #173B2D;
     font-size: 14px;
     font-weight: 700;
     letter-spacing: 2px;
     text-transform: uppercase;
     margin-bottom: 12px;
}

.elya-products .titlepage h2 {
     color: #173B2D;
     font-size: 46px;
     font-weight: 400;
     line-height: 1.2;
     margin-bottom: 20px;
}

.elya-products .titlepage h2 strong {
     font-weight: 700;
}

.elya-products .titlepage p {
     color: #666666;
     font-size: 16px;
     line-height: 1.8;
     margin: 0;
}


/* Product Grid */

.elya-product-grid {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 30px;
     justify-content: center;
}


/* Product Card */

.elya-product-card {
     background: #ffffff;
     border: 1px solid #e8e8e8;
     border-radius: 4px;
     overflow: hidden;
     transition: all 0.35s ease;
     height: 100%;
     display: flex;
     flex-direction: column;
}

.elya-product-card:hover {
     transform: translateY(-8px);
     box-shadow: 0 15px 40px rgba(0, 0, 0, 0.10);
}


/* Product Image */

.elya-product-image {
     width: 100%;
     height: 250px;
     overflow: hidden;
     position: relative;
}

.elya-product-image img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     display: block;
     transition: transform 0.5s ease;
}

.elya-product-card:hover .elya-product-image img {
     transform: scale(1.06);
}


/* Product Content */

.elya-product-content {
     padding: 30px;
     display: flex;
     flex-direction: column;
     flex: 1;
}

.elya-product-number {
     display: block;
     color: #173B2D;
     font-size: 13px;
     font-weight: 700;
     letter-spacing: 1px;
     margin-bottom: 8px;
}

.elya-product-content h3 {
     color: #173B2D;
     font-size: 25px;
     font-weight: 700;
     line-height: 1.3;
     margin-bottom: 15px;
}

.elya-product-content>p {
     color: #666666;
     font-size: 15px;
     line-height: 1.7;
     margin-bottom: 20px;
}


/* Product List */

.elya-product-list {
     display: flex;
     flex-direction: column;
     gap: 8px;
     margin-bottom: 25px;
}

.elya-product-list span {
     position: relative;
     padding-left: 18px;
     color: #555555;
     font-size: 14px;
     line-height: 1.5;
}

.elya-product-list span::before {
     content: "";
     position: absolute;
     left: 0;
     top: 8px;
     width: 6px;
     height: 6px;
     border-radius: 50%;
     background: #173B2D;
}


/* Seasonal / General Category Note */

.elya-product-note {
     display: flex;
     align-items: flex-start;
     gap: 10px;
     background: #f6f8f6;
     padding: 15px;
     margin-bottom: 25px;
     border-left: 3px solid #173B2D;
}

.elya-product-note i {
     color: #173B2D;
     font-size: 15px;
     margin-top: 3px;
}

.elya-product-note span {
     color: #666666;
     font-size: 13px;
     line-height: 1.6;
}


/* Button */

.elya-product-btn {
     display: inline-block;
     align-self: flex-start;
     margin-top: auto;
     padding: 12px 25px;
     border: 1px solid #173B2D;
     background: #173B2D;
     color: #ffffff !important;
     font-size: 14px;
     font-weight: 600;
     text-decoration: none;
     transition: all 0.3s ease;
}

.elya-product-btn:hover {
     background: transparent;
     color: #173B2D !important;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 991px) {

     .elya-products {
          padding: 80px 0;
     }

     .elya-product-grid {
          grid-template-columns: repeat(2, 1fr);
     }

     .elya-products .titlepage h2 {
          font-size: 40px;
     }

}


@media (max-width: 767px) {

     .elya-products {
          padding: 65px 0;
     }

     .elya-products .titlepage {
          margin-bottom: 40px;
     }

     .elya-products .titlepage h2 {
          font-size: 34px;
     }

     .elya-product-grid {
          grid-template-columns: 1fr;
          gap: 25px;
     }

     .elya-product-image {
          height: 230px;
     }

     .elya-product-content {
          padding: 25px;
     }

}


@media (max-width: 480px) {

     .elya-products .titlepage h2 {
          font-size: 30px;
     }

     .elya-product-image {
          height: 210px;
     }

     .elya-product-content h3 {
          font-size: 22px;
     }

}

/* =========================================================
   ELYAH BUSINESS DEVELOPMENT - ABOUT
========================================================= */

.elya-about {
     background: #ffffff;
     padding: 100px 0;
}

.elya-about-image {
     position: relative;
     padding-right: 30px;
}

.elya-about-image figure {
     margin: 0;
     overflow: hidden;
     border-radius: 4px;
}

.elya-about-image figure img {
     width: 100%;
     height: 500px;
     object-fit: cover;
     display: block;
}


/* About Badge */

.elya-about-badge {
     position: absolute;
     right: 0;
     bottom: 35px;
     width: 145px;
     height: 145px;
     background: #173B2D;
     border: 8px solid #ffffff;
     border-radius: 50%;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

.elya-about-badge span {
     color: #ffffff;
     font-size: 25px;
     font-weight: 700;
     line-height: 1;
}

.elya-about-badge strong {
     color: #ffffff;
     font-size: 14px;
     font-weight: 500;
     letter-spacing: 2px;
     margin-top: 6px;
}


/* About Content */

.elya-about-content {
     padding-left: 45px;
}

.elya-about-content .section-label {
     display: block;
     color: #173B2D;
     font-size: 14px;
     font-weight: 700;
     letter-spacing: 2px;
     margin-bottom: 14px;
}

.elya-about-content h2 {
     color: #173B2D;
     font-size: 43px;
     font-weight: 400;
     line-height: 1.2;
     margin-bottom: 25px;
}

.elya-about-content h2 strong {
     display: block;
     font-weight: 700;
}

.elya-about-content p {
     color: #666666;
     font-size: 16px;
     line-height: 1.8;
     margin-bottom: 18px;
}

.elya-about-btn {
     margin-top: 15px;
     background: #173B2D !important;
     color: #ffffff !important;
     border: 1px solid #173B2D !important;
}

.elya-about-btn:hover {
     background: transparent !important;
     color: #173B2D !important;
}


/* About Responsive */

@media (max-width: 991px) {

     .elya-about {
          padding: 80px 0;
     }

     .elya-about-image {
          padding-right: 0;
          margin-bottom: 50px;
     }

     .elya-about-image figure img {
          height: 450px;
     }

     .elya-about-content {
          padding-left: 0;
     }

     .elya-about-content h2 {
          font-size: 38px;
     }

}


@media (max-width: 767px) {

     .elya-about {
          padding: 65px 0;
     }

     .elya-about-image figure img {
          height: 350px;
     }

     .elya-about-badge {
          width: 120px;
          height: 120px;
          right: 15px;
          bottom: 20px;
     }

     .elya-about-badge span {
          font-size: 21px;
     }

     .elya-about-badge strong {
          font-size: 12px;
     }

     .elya-about-content h2 {
          font-size: 32px;
     }

     .elya-about-content p {
          font-size: 15px;
     }

}

/* =========================================================
   ELYAH BUSINESS DEVELOPMENT - CONTACT
========================================================= */

.elya-contact {
     background: #f6f8f6;
     padding: 100px 0;
}


/* =========================================================
   SECTION TITLE
========================================================= */

.elya-contact-title {
     max-width: 800px;
     margin: 0 auto 55px;
     text-align: center;
}

.elya-contact-title .section-label {
     display: block;
     color: #173B2D;
     font-size: 14px;
     font-weight: 700;
     letter-spacing: 2px;
     margin-bottom: 12px;
}

.elya-contact-title h2 {
     color: #173B2D !important;
     font-size: 45px;
     font-weight: 400;
     line-height: 1.2;
     margin-bottom: 20px;
}

.elya-contact-title h2 strong {
     color: #173B2D !important;
     font-weight: 700;
}

.elya-contact-title p {
     color: #666666;
     font-size: 16px;
     line-height: 1.8;
     margin: 0;
}


/* =========================================================
   CONTACT INFORMATION
========================================================= */

.elya-contact-info {
     width: 100%;
     background: #173B2D;
     padding: 50px;
     color: #ffffff;
     box-shadow: 0 10px 35px rgba(0, 0, 0, 0.08);
}

.elya-contact-label {
     display: block;
     color: rgba(255, 255, 255, 0.75);
     font-size: 13px;
     font-weight: 700;
     letter-spacing: 2px;
     margin-bottom: 15px;
}

.elya-contact-info h3 {
     color: #ffffff;
     font-size: 32px;
     font-weight: 400;
     line-height: 1.3;
     margin-bottom: 20px;
}

.elya-contact-info h3 strong {
     display: block;
     color: #ffffff;
     font-weight: 700;
}

.elya-contact-info>p {
     color: rgba(255, 255, 255, 0.78);
     font-size: 15px;
     line-height: 1.8;
     margin-bottom: 35px;
}


/* =========================================================
   CONTACT ITEMS
========================================================= */

.elya-contact-item {
     display: flex;
     align-items: flex-start;
     gap: 18px;
     margin-bottom: 25px;
}

.elya-contact-icon {
     width: 45px;
     height: 45px;
     min-width: 45px;

     border: 1px solid rgba(255, 255, 255, 0.35);
     border-radius: 50%;

     display: flex;
     align-items: center;
     justify-content: center;
}

.elya-contact-icon i {
     color: #ffffff;
     font-size: 17px;
}

.elya-contact-item span {
     display: block;
     color: rgba(255, 255, 255, 0.65);
     font-size: 12px;
     text-transform: uppercase;
     letter-spacing: 1px;
     margin-bottom: 5px;
}

.elya-contact-item p {
     color: #ffffff;
     font-size: 14px;
     line-height: 1.7;
     margin: 0;
}

.elya-contact-item a {
     color: #ffffff;
     text-decoration: none;
     transition: all 0.3s ease;
}

.elya-contact-item a:hover {
     color: rgba(255, 255, 255, 0.7);
}


/* =========================================================
   CONTACT ACTION BUTTONS
========================================================= */

.elya-contact-actions {
     display: flex;
     gap: 12px;
     margin-top: 35px;
}

.elya-contact-action {
     flex: 1;
     min-height: 52px;

     display: flex;
     align-items: center;
     justify-content: center;
     gap: 10px;

     border: 1px solid rgba(255, 255, 255, 0.45);

     color: #ffffff !important;
     text-decoration: none !important;

     font-size: 14px;
     font-weight: 600;

     transition: all 0.3s ease;
}

.elya-contact-action i {
     font-size: 17px;
}

.elya-contact-action:hover {
     background: #ffffff;
     color: #173B2D !important;
     border-color: #ffffff;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 991px) {

     .elya-contact {
          padding: 80px 0;
     }

     .elya-contact-info {
          padding: 40px;
     }

     .elya-contact-title h2 {
          font-size: 40px;
     }

}


@media (max-width: 767px) {

     .elya-contact {
          padding: 65px 0;
     }

     .elya-contact-title {
          margin-bottom: 40px;
     }

     .elya-contact-title h2 {
          font-size: 32px;
     }

     .elya-contact-info {
          padding: 30px;
     }

     .elya-contact-info h3 {
          font-size: 27px;
     }

     .elya-contact-actions {
          flex-direction: column;
     }

}

/* =========================================================
   ELYAH BUSINESS DEVELOPMENT - FOOTER
========================================================= */

.elya-footer {
     background: #173B2D;
}

.elya-footer .footer {
     background: #173B2D;
     padding: 75px 0 0;
}


/* =========================================================
   FOOTER COLUMNS
========================================================= */

.elya-footer-column {
     width: 100%;
}

.elya-footer-column h3 {
     color: #ffffff;
     font-size: 18px;
     font-weight: 700;
     margin: 0 0 25px;
     line-height: 1.3;
}

.elya-footer-column ul {
     padding: 0;
     margin: 0;
     list-style: none;
}

.elya-footer-column ul li {
     margin-bottom: 12px;
}


/* =========================================================
   COMPANY
========================================================= */

.elya-footer-company {
     padding-right: 35px;
}

.elya-footer-logo {
     max-width: 190px;
     max-height: 70px;
     width: auto;
     margin-bottom: 25px;
}

.elya-footer-company p {
     color: rgba(255, 255, 255, 0.72);
     font-size: 14px;
     line-height: 1.8;
     margin: 0;
}


/* =========================================================
   FOOTER LINKS
========================================================= */

.elya-footer-column ul li a {
     color: rgba(255, 255, 255, 0.72);
     font-size: 14px;
     text-decoration: none;
     transition: all 0.3s ease;
}

.elya-footer-column ul li a:hover {
     color: #ffffff;
     padding-left: 4px;
}


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

.elya-footer-contact li {
     display: flex;
     align-items: flex-start;
     gap: 10px;

     color: rgba(255, 255, 255, 0.72);

     font-size: 13px;
     line-height: 1.7;

     margin-bottom: 16px;
}

.elya-footer-contact li i {
     width: 18px;
     min-width: 18px;

     color: #ffffff;

     margin-top: 3px;
}

.elya-footer-contact li span {
     display: block;
}

.elya-footer-contact li a {
     color: rgba(255, 255, 255, 0.72);
     text-decoration: none;
     transition: all 0.3s ease;
}

.elya-footer-contact li a:hover {
     color: #ffffff;
}


/* =========================================================
   COPYRIGHT
========================================================= */

.elya-footer-bottom {
     margin-top: 60px;
     padding: 22px 0;

     border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.elya-footer-bottom p {
     color: rgba(255, 255, 255, 0.55);
     text-align: center;

     font-size: 13px;

     margin: 0;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 991px) {

     .elya-footer .footer {
          padding-top: 60px;
     }

     .elya-footer-company {
          padding-right: 0;
          margin-bottom: 40px;
     }

     .elya-footer-column {
          margin-bottom: 35px;
     }

}


@media (max-width: 767px) {

     .elya-footer .footer {
          padding-top: 50px;
     }

     .elya-footer-company {
          margin-bottom: 35px;
     }

     .elya-footer-bottom {
          margin-top: 20px;
     }

}

/* CENTERED FOOTER COLUMNS */
.elya-footer-centered {
     text-align: center;
}

.elya-footer-centered h3 {
     text-align: center;
}

.elya-footer-centered ul {
     padding: 0;
     margin: 0;
     list-style: none;
     text-align: center;
}

.elya-footer-centered ul li {
     text-align: center;
}

.elya-footer-centered ul li a {
     display: inline-block;
}

/* =========================================================
   ELYAH BUSINESS DEVELOPMENT - INNER PAGE HERO
========================================================= */

.elya-inner-hero {
     position: relative;
     min-height: 430px;

     display: flex;
     align-items: center;

     background-image: url("../images/head/fresh_fruits.jpeg");
     background-size: cover;
     background-position: center;

     overflow: hidden;
}

.elya-inner-hero-overlay {
     position: absolute;
     inset: 0;

     background:
          linear-gradient(90deg,
               rgba(0, 0, 0, 0.78),
               rgba(23, 59, 45, 0.65));
}

.elya-inner-hero-content {
     position: relative;
     z-index: 2;

     max-width: 800px;

     padding: 150px 0 70px;
}

.elya-inner-hero-content>span {
     display: block;

     color: #ffffff;

     font-size: 14px;
     font-weight: 700;

     letter-spacing: 2px;

     margin-bottom: 15px;
}

.elya-inner-hero-content h1 {
     color: #ffffff;

     font-size: 55px;
     line-height: 1.15;

     font-weight: 400;

     margin-bottom: 20px;
}

.elya-inner-hero-content h1 strong {
     display: block;

     color: #ffffff;

     font-weight: 700;
}

.elya-inner-hero-content p {
     max-width: 650px;

     color: rgba(255, 255, 255, .82);

     font-size: 17px;
     line-height: 1.8;
}


/* =========================================================
   INNER PAGE HEADER
========================================================= */

.inner_page .full_bg {
     background: transparent;
}

.inner_page .full_bg .header {
     background: #173B2D;
}


/* =========================================================
   ABOUT PAGE
========================================================= */

.elya-about-page {
     padding: 110px 0;

     background: #ffffff;
}

.elya-about-page-image {
     position: relative;

     padding-right: 35px;
}

.elya-about-page-image img {
     width: 100%;
     height: 530px;

     object-fit: cover;

     display: block;

     border-radius: 4px;
}

.elya-about-page-badge {
     position: absolute;

     right: 0;
     bottom: 35px;

     width: 145px;
     height: 145px;

     background: #173B2D;

     border: 8px solid #ffffff;
     border-radius: 50%;

     display: flex;
     flex-direction: column;

     align-items: center;
     justify-content: center;

     box-shadow: 0 12px 35px rgba(0, 0, 0, .15);
}

.elya-about-page-badge span {
     color: #ffffff;

     font-size: 25px;
     font-weight: 700;

     line-height: 1;
}

.elya-about-page-badge strong {
     color: #ffffff;

     font-size: 13px;
     font-weight: 500;

     letter-spacing: 2px;

     margin-top: 6px;
}

.elya-about-page-content {
     padding-left: 45px;
}

.elya-about-page-content .section-label {
     display: block;

     color: #173B2D;

     font-size: 14px;
     font-weight: 700;

     letter-spacing: 2px;

     margin-bottom: 14px;
}

.elya-about-page-content h2 {
     color: #173B2D;

     font-size: 43px;
     line-height: 1.2;

     font-weight: 400;

     margin-bottom: 25px;
}

.elya-about-page-content h2 strong {
     display: block;
     font-weight: 700;
}

.elya-about-page-content p {
     color: #666666;

     font-size: 16px;
     line-height: 1.8;

     margin-bottom: 18px;
}


/* =========================================================
   APPROACH
========================================================= */

.elya-approach {
     padding: 100px 0;

     background: #f6f8f6;
}

.elya-approach .titlepage {
     max-width: 800px;

     margin: 0 auto 55px;
}

.elya-approach .titlepage h2 {
     color: #173B2D;

     font-size: 43px;
     line-height: 1.2;

     font-weight: 400;
}

.elya-approach .titlepage h2 strong {
     font-weight: 700;
}

.elya-approach .titlepage p {
     color: #666666;

     font-size: 16px;
     line-height: 1.8;
}


/* Info Cards */

.elya-info-card {
     height: 100%;

     background: #ffffff;

     padding: 40px 35px;

     border: 1px solid #e7e7e7;

     position: relative;

     overflow: hidden;

     transition: all .4s ease;
}

.elya-info-card:hover {
     transform: translateY(-8px);

     box-shadow: 0 20px 45px rgba(0, 0, 0, .09);
}

.elya-info-number {
     position: absolute;

     top: 20px;
     right: 25px;

     color: #173B2D;

     font-size: 13px;
     font-weight: 700;

     letter-spacing: 1px;

     opacity: .7;
}

.elya-info-icon {
     width: 55px;
     height: 55px;

     display: flex;
     align-items: center;
     justify-content: center;

     background: #173B2D;

     color: #ffffff;

     margin-bottom: 25px;
}

.elya-info-icon i {
     font-size: 20px;
}

.elya-info-card h3 {
     color: #173B2D;

     font-size: 22px;
     font-weight: 700;

     margin-bottom: 15px;
}

.elya-info-card p {
     color: #666666;

     font-size: 14px;
     line-height: 1.8;
}


/* =========================================================
   WHY
========================================================= */

.elya-why {
     padding: 100px 0;

     background: #ffffff;
}

.elya-why-title {
     padding-right: 40px;
}

.elya-why-title .section-label {
     color: #173B2D;

     font-size: 14px;
     font-weight: 700;

     letter-spacing: 2px;
}

.elya-why-title h2 {
     color: #173B2D;

     font-size: 43px;
     line-height: 1.2;

     font-weight: 400;

     margin: 15px 0 25px;
}

.elya-why-title h2 strong {
     display: block;

     font-weight: 700;
}

.elya-why-title p {
     color: #666666;

     font-size: 16px;
     line-height: 1.8;
}

.elya-why-list {
     border-top: 1px solid #e5e5e5;
}

.elya-why-item {
     display: flex;

     gap: 25px;

     padding: 28px 0;

     border-bottom: 1px solid #e5e5e5;
}

.elya-why-item>span {
     color: #173B2D;

     font-size: 13px;
     font-weight: 700;

     min-width: 30px;
}

.elya-why-item h3 {
     color: #173B2D;

     font-size: 20px;
     font-weight: 700;

     margin-bottom: 8px;
}

.elya-why-item p {
     color: #666666;

     font-size: 14px;
     line-height: 1.7;
}


/* =========================================================
   PRODUCTS PAGE
========================================================= */

.elya-products-page {
     padding: 100px 0;

     background: #ffffff;
}

.elya-products-page .titlepage {
     max-width: 800px;

     margin: 0 auto 60px;
}

.elya-products-page .titlepage h2 {
     color: #173B2D;

     font-size: 45px;
     line-height: 1.2;

     font-weight: 400;
}

.elya-products-page .titlepage h2 strong {
     font-weight: 700;
}

.elya-products-page .titlepage p {
     color: #666666;

     font-size: 16px;
     line-height: 1.8;
}


/* Category Grid */

.elya-category-grid {
     display: grid;

     grid-template-columns: repeat(2, 1fr);

     gap: 35px;
}


/* Category Card */

.elya-category-card {
     background: #ffffff;

     border: 1px solid #e5e5e5;

     overflow: hidden;

     transition: all .45s ease;

     opacity: 0;

     animation: categoryFadeUp .8s ease forwards;
}

.elya-category-card:nth-child(1) {
     animation-delay: .05s;
}

.elya-category-card:nth-child(2) {
     animation-delay: .15s;
}

.elya-category-card:nth-child(3) {
     animation-delay: .25s;
}

.elya-category-card:nth-child(4) {
     animation-delay: .35s;
}

.elya-category-card:nth-child(5) {
     animation-delay: .45s;
}

.elya-category-card:hover {
     transform: translateY(-10px);

     box-shadow: 0 20px 50px rgba(0, 0, 0, .10);
}


/* Category Image */

.elya-category-image {
     height: 280px;

     position: relative;

     overflow: hidden;
}

.elya-category-image img {
     width: 100%;
     height: 100%;

     object-fit: cover;

     transition: transform .7s ease;
}

.elya-category-card:hover .elya-category-image img {
     transform: scale(1.07);
}

.elya-category-image>span {
     position: absolute;

     top: 20px;
     left: 20px;

     width: 45px;
     height: 45px;

     display: flex;
     align-items: center;
     justify-content: center;

     background: #173B2D;

     color: #ffffff;

     font-size: 13px;
     font-weight: 700;
}


/* Category Content */

.elya-category-content {
     padding: 35px;
}

.category-label {
     display: block;

     color: #173B2D;

     font-size: 12px;
     font-weight: 700;

     letter-spacing: 1.5px;

     margin-bottom: 12px;
}

.elya-category-content h3 {
     color: #173B2D;

     font-size: 29px;
     line-height: 1.2;

     font-weight: 400;

     margin-bottom: 15px;
}

.elya-category-content h3 strong {
     font-weight: 700;
}

.elya-category-content p {
     color: #666666;

     font-size: 14px;
     line-height: 1.8;

     margin-bottom: 25px;
}

.elya-category-btn {
     display: inline-flex;

     align-items: center;

     gap: 12px;

     color: #173B2D !important;

     font-size: 14px;
     font-weight: 700;
}

.elya-category-btn i {
     transition: transform .3s ease;
}

.elya-category-btn:hover i {
     transform: translateX(6px);
}


/* =========================================================
   CATEGORY PRODUCT GRID
========================================================= */

.elya-category-products {
     padding: 100px 0;

     background: #ffffff;
}

.elya-category-products .titlepage {
     max-width: 800px;

     margin: 0 auto 60px;
}

.elya-category-products .titlepage h2 {
     color: #173B2D;

     font-size: 45px;
     line-height: 1.2;

     font-weight: 400;
}

.elya-category-products .titlepage h2 strong {
     font-weight: 700;
}

.elya-category-products .titlepage p {
     color: #666666;

     font-size: 16px;
     line-height: 1.8;
}


/* Product Detail Grid */

.elya-product-detail-grid {
     display: grid;

     grid-template-columns: repeat(3, 1fr);

     gap: 30px;
}


/* Product Detail Card */

.elya-detail-card {
     background: #ffffff;

     border: 1px solid #e5e5e5;

     overflow: hidden;

     transition: all .45s ease;

     animation: detailFadeUp .8s ease both;
}

.elya-detail-card:hover {
     transform: translateY(-10px);

     box-shadow: 0 20px 50px rgba(0, 0, 0, .10);
}


/* Product Image */

.elya-detail-image {
     height: 245px;

     position: relative;

     overflow: hidden;
}

.elya-detail-image img {
     width: 100%;
     height: 100%;

     object-fit: cover;

     transition: transform .7s ease;
}

.elya-detail-card:hover .elya-detail-image img {
     transform: scale(1.08);
}

.elya-detail-image>span {
     position: absolute;

     top: 18px;
     left: 18px;

     width: 42px;
     height: 42px;

     display: flex;
     align-items: center;
     justify-content: center;

     background: #173B2D;

     color: #ffffff;

     font-size: 12px;
     font-weight: 700;
}


/* Detail Content */

.elya-detail-content {
     padding: 30px;
}

.elya-detail-content h3 {
     color: #173B2D;

     font-size: 22px;
     line-height: 1.35;

     font-weight: 700;

     margin-bottom: 14px;
}

.elya-detail-content p {
     color: #666666;

     font-size: 14px;
     line-height: 1.8;
}


/* Product Specification */

.elya-spec {
     display: inline-block;

     padding: 6px 12px;

     background: #f0f4f1;

     color: #173B2D;

     font-size: 11px;
     font-weight: 700;

     letter-spacing: 1px;

     margin-bottom: 13px;
}


/* =========================================================
   FEATURE CATEGORY
========================================================= */

.elya-category-feature {
     padding: 100px 0;

     background: #ffffff;
}

.elya-feature-card {
     display: grid;

     grid-template-columns: 1fr 1fr;

     background: #f6f8f6;

     overflow: hidden;

     box-shadow: 0 15px 45px rgba(0, 0, 0, .07);

     transition: all .45s ease;
}

.elya-feature-card:hover {
     transform: translateY(-8px);

     box-shadow: 0 25px 60px rgba(0, 0, 0, .10);
}

.elya-feature-image {
     min-height: 500px;

     overflow: hidden;
}

.elya-feature-image img {
     width: 100%;
     height: 100%;

     object-fit: cover;

     transition: transform .8s ease;
}

.elya-feature-card:hover .elya-feature-image img {
     transform: scale(1.06);
}

.elya-feature-content {
     padding: 65px;

     display: flex;

     flex-direction: column;

     justify-content: center;
}

.elya-feature-content .section-label {
     color: #173B2D;

     font-size: 13px;
     font-weight: 700;

     letter-spacing: 2px;

     margin-bottom: 15px;
}

.elya-feature-content h2 {
     color: #173B2D;

     font-size: 43px;
     line-height: 1.2;

     font-weight: 400;

     margin-bottom: 25px;
}

.elya-feature-content h2 strong {
     display: block;

     font-weight: 700;
}

.elya-feature-content p {
     color: #666666;

     font-size: 15px;
     line-height: 1.8;

     margin-bottom: 18px;
}

.elya-season-note {
     display: flex;

     gap: 12px;

     align-items: flex-start;

     padding: 18px;

     margin: 10px 0 20px;

     background: #ffffff;

     border-left: 3px solid #173B2D;
}

.elya-season-note i {
     color: #173B2D;

     margin-top: 4px;
}

.elya-season-note span {
     color: #666666;

     font-size: 13px;

     line-height: 1.7;
}


/* =========================================================
   CTA
========================================================= */

.elya-page-cta {
     padding: 100px 0;

     background: #173B2D;

     text-align: center;
}

.elya-page-cta-content {
     max-width: 800px;

     margin: auto;
}

.elya-page-cta-content>span {
     display: block;

     color: rgba(255, 255, 255, .7);

     font-size: 13px;
     font-weight: 700;

     letter-spacing: 2px;

     margin-bottom: 15px;
}

.elya-page-cta-content h2 {
     color: #ffffff;

     font-size: 43px;
     line-height: 1.2;

     font-weight: 400;

     margin-bottom: 20px;
}

.elya-page-cta-content h2 strong {
     font-weight: 700;
}

.elya-page-cta-content p {
     color: rgba(255, 255, 255, .75);

     font-size: 16px;
     line-height: 1.8;

     margin-bottom: 30px;
}

.elya-page-cta-content .read_more {
     background: #ffffff;

     color: #173B2D;

     border: 1px solid #ffffff;
}

.elya-page-cta-content .read_more:hover {
     background: transparent;

     color: #ffffff;
}


/* =========================================================
   ANIMATIONS
========================================================= */

@keyframes categoryFadeUp {

     from {
          opacity: 0;
          transform: translateY(35px);
     }

     to {
          opacity: 1;
          transform: translateY(0);
     }

}

@keyframes detailFadeUp {

     from {
          opacity: 0;
          transform: translateY(30px);
     }

     to {
          opacity: 1;
          transform: translateY(0);
     }

}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 991px) {

     .elya-inner-hero {
          min-height: 400px;
     }

     .elya-inner-hero-content {
          padding: 130px 0 60px;
     }

     .elya-inner-hero-content h1 {
          font-size: 45px;
     }

     .elya-about-page {
          padding: 80px 0;
     }

     .elya-about-page-image {
          padding-right: 0;
          margin-bottom: 50px;
     }

     .elya-about-page-content {
          padding-left: 0;
     }

     .elya-about-page-content h2 {
          font-size: 38px;
     }

     .elya-approach,
     .elya-why,
     .elya-products-page,
     .elya-category-products,
     .elya-category-feature {
          padding: 80px 0;
     }

     .elya-category-grid {
          grid-template-columns: 1fr 1fr;
     }

     .elya-product-detail-grid {
          grid-template-columns: repeat(2, 1fr);
     }

     .elya-feature-card {
          grid-template-columns: 1fr;
     }

     .elya-feature-image {
          min-height: 400px;
     }

     .elya-feature-content {
          padding: 50px 40px;
     }

}


@media (max-width: 767px) {

     .elya-inner-hero {
          min-height: 370px;
     }

     .elya-inner-hero-content {
          padding: 120px 0 50px;
     }

     .elya-inner-hero-content h1 {
          font-size: 36px;
     }

     .elya-inner-hero-content p {
          font-size: 15px;
     }

     .elya-about-page,
     .elya-approach,
     .elya-why,
     .elya-products-page,
     .elya-category-products,
     .elya-category-feature,
     .elya-page-cta {
          padding: 65px 0;
     }

     .elya-about-page-image img {
          height: 350px;
     }

     .elya-about-page-badge {
          width: 120px;
          height: 120px;

          right: 15px;
          bottom: 20px;
     }

     .elya-about-page-content h2,
     .elya-why-title h2,
     .elya-feature-content h2 {
          font-size: 32px;
     }

     .elya-category-grid {
          grid-template-columns: 1fr;
     }

     .elya-product-detail-grid {
          grid-template-columns: 1fr;
     }

     .elya-category-image {
          height: 230px;
     }

     .elya-category-content {
          padding: 28px;
     }

     .elya-feature-image {
          min-height: 280px;
     }

     .elya-feature-content {
          padding: 35px 28px;
     }

     .elya-page-cta-content h2 {
          font-size: 32px;
     }

}


@media (max-width: 480px) {

     .elya-inner-hero-content h1 {
          font-size: 31px;
     }

     .elya-category-content h3 {
          font-size: 25px;
     }

     .elya-detail-content h3 {
          font-size: 20px;
     }

}

/* =========================================================
   ELYA - FINAL NAVBAR & LOGO
   ========================================================= */

/* =========================
   NAVBAR
   ========================= */

.full_bg .header {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     z-index: 9999;

     padding: 10px 35px;

     background: transparent;

     transition: all 0.35s ease;
}


/* =========================
   LOGO
   ========================= */

.full_bg .header .logo img {
     width: auto;
     max-height: 85px;

     object-fit: contain;

     transition: all 0.35s ease;
}


/* Logo when scrolling */

.full_bg .header.scrolled .logo img {
     max-height: 72px;
}


/* =========================
   NAV LINKS - TRANSPARENT
   ========================= */

.full_bg .header .nav-link {
     color: #173B2D !important;

     font-size: 15px;
     font-weight: 600;
     letter-spacing: 0.3px;

     padding: 12px 18px !important;

     transition: all 0.3s ease;
}


/* Hover */

.full_bg .header .nav-link:hover {
     color: #2f6b52 !important;
}


/* =========================
   ACTIVE LINK
   ========================= */

.full_bg .header .nav-item.active .nav-link {
     color: #173B2D !important;
     font-weight: 700;
}


/* =========================
   UNDERLINE
   ========================= */

.full_bg .header .nav-link:not(.quote-btn)::after {
     content: "";

     position: absolute;

     left: 18px;
     right: 18px;
     bottom: 4px;

     height: 2px;

     background: #173B2D;

     transform: scaleX(0);
     transform-origin: center;

     transition: transform 0.3s ease;
}


.full_bg .header .nav-item:hover .nav-link:not(.quote-btn)::after,
.full_bg .header .nav-item.active .nav-link:not(.quote-btn)::after {
     transform: scaleX(1);
}


/* =========================
   NAVBAR AFTER SCROLL
   ========================= */

.full_bg .header.scrolled {
     background: #173B2D;

     box-shadow: 0 5px 25px rgba(0, 0, 0, 0.15);

     padding-top: 6px;
     padding-bottom: 6px;
}


/* White links after scroll */

.full_bg .header.scrolled .nav-link {
     color: #ffffff !important;
}


/* Hover after scroll */

.full_bg .header.scrolled .nav-link:hover {
     color: #ffffff !important;
}


/* Active after scroll */

.full_bg .header.scrolled .nav-item.active .nav-link {
     color: #ffffff !important;
}


/* Underline after scroll */

.full_bg .header.scrolled .nav-link:not(.quote-btn)::after {
     background: #ffffff;
}


/* =========================
   QUOTE BUTTON
   ========================= */

.full_bg .header .quote-btn {
     color: #173B2D !important;

     border: 1px solid #173B2D;

     padding: 11px 22px !important;

     border-radius: 3px;

     font-weight: 600;
}


/* Quote button after scroll */

.full_bg .header.scrolled .quote-btn {
     color: #ffffff !important;

     border-color: rgba(255, 255, 255, 0.8);
}


/* Quote hover */

.full_bg .header .quote-btn:hover {
     background: #173B2D;

     color: #ffffff !important;

     border-color: #173B2D;
}


.full_bg .header.scrolled .quote-btn:hover {
     background: #ffffff;

     color: #173B2D !important;

     border-color: #ffffff;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 991px) {

     .full_bg .header {
          padding: 8px 20px;
     }

     .full_bg .header .logo img {
          max-height: 70px;
     }

     .full_bg .header.scrolled .logo img {
          max-height: 62px;
     }

}


@media (max-width: 767px) {

     .full_bg .header {
          padding: 6px 15px;
     }

     .full_bg .header .logo img {
          max-height: 62px;
     }

     .full_bg .header.scrolled .logo img {
          max-height: 56px;
     }

}

.elya-feature-image {
     overflow: hidden;
     background: #f6f8f6;
}

.elya-feature-image img {
     width: 100%;
     height: auto;
     display: block;
}



/* =========================================================
   ELYAH - CONTACT PAGE
========================================================= */


/* =========================================================
   CONTACT HERO
========================================================= */

.elya-contact-hero {
     position: relative;

     min-height: 430px;

     display: flex;
     align-items: center;

     background-image: url("../images/head/fresh_fruits.jpeg");
     background-size: cover;
     background-position: center;

     overflow: hidden;
}

.elya-contact-hero-overlay {
     position: absolute;
     inset: 0;

     background:
          linear-gradient(90deg,
               rgba(0, 0, 0, 0.78),
               rgba(23, 59, 45, 0.62));
}

.elya-contact-hero-content {
     position: relative;

     z-index: 2;

     max-width: 720px;

     padding: 150px 0 70px;
}

.elya-contact-hero-content>span {
     display: block;

     color: rgba(255, 255, 255, 0.75);

     font-size: 14px;
     font-weight: 700;

     letter-spacing: 2px;

     margin-bottom: 15px;
}

.elya-contact-hero-content h1 {
     color: #ffffff;

     font-size: 58px;
     line-height: 1.1;

     font-weight: 400;

     margin-bottom: 22px;
}

.elya-contact-hero-content h1 strong {
     display: block;

     color: #ffffff;

     font-weight: 700;
}

.elya-contact-hero-content p {
     max-width: 650px;

     color: rgba(255, 255, 255, 0.82);

     font-size: 17px;
     line-height: 1.8;

     margin: 0;
}


/* =========================================================
   CONTACT SECTION
========================================================= */

.elya-contact {
     background: #ffffff;

     padding: 100px 0;
}


/* =========================================================
   CONTACT TITLE
========================================================= */

.elya-contact-title {
     max-width: 800px;

     margin: 0 auto 60px;

     text-align: center;
}

.elya-contact-title .section-label {
     display: block;

     color: #173B2D;

     font-size: 13px;
     font-weight: 700;

     letter-spacing: 2px;

     margin-bottom: 12px;
}

.elya-contact-title h2 {
     color: #173B2D;

     font-size: 45px;
     line-height: 1.2;

     font-weight: 400;

     margin-bottom: 20px;
}

.elya-contact-title h2 strong {
     font-weight: 700;
}

.elya-contact-title p {
     color: #666666;

     font-size: 16px;
     line-height: 1.8;

     margin: 0;
}


/* =========================================================
   CONTACT CARDS
========================================================= */

.elya-contact-card {
     height: 100%;

     background: #ffffff;

     border: 1px solid #e5e5e5;

     padding: 40px 35px;

     transition: all 0.35s ease;
}

.elya-contact-card:hover {
     transform: translateY(-8px);

     border-color: #173B2D;

     box-shadow:
          0 18px 45px rgba(0, 0, 0, 0.08);
}


/* Icon */

.elya-contact-card-icon {
     width: 55px;
     height: 55px;

     display: flex;

     align-items: center;
     justify-content: center;

     background: #173B2D;

     color: #ffffff;

     margin-bottom: 25px;
}

.elya-contact-card-icon i {
     font-size: 21px;
}


/* Label */

.elya-contact-card-label {
     display: block;

     color: #173B2D;

     font-size: 12px;
     font-weight: 700;

     letter-spacing: 1.8px;

     margin-bottom: 10px;
}


/* Heading */

.elya-contact-card h3 {
     color: #173B2D;

     font-size: 27px;
     font-weight: 700;

     margin-bottom: 15px;
}


/* Text */

.elya-contact-card p {
     color: #666666;

     font-size: 14px;

     line-height: 1.8;

     margin-bottom: 15px;
}


/* Link */

.elya-contact-card-link {
     color: #173B2D !important;

     font-size: 15px;
     font-weight: 700;

     text-decoration: none !important;

     transition: all 0.3s ease;
}

.elya-contact-card-link:hover {
     color: #2f6b52 !important;
}


/* =========================================================
   CONTACT ACTIONS
========================================================= */

.elya-contact-actions-new {
     display: flex;

     justify-content: center;

     gap: 15px;

     margin-top: 35px;
}

.elya-contact-action-new {
     min-width: 180px;

     min-height: 54px;

     display: flex;

     align-items: center;
     justify-content: center;

     gap: 10px;

     padding: 12px 25px;

     background: #173B2D;

     color: #ffffff !important;

     border: 1px solid #173B2D;

     font-size: 14px;

     font-weight: 600;

     text-decoration: none !important;

     transition: all 0.3s ease;
}

.elya-contact-action-new i {
     font-size: 17px;
}

.elya-contact-action-new:hover {
     background: #ffffff;

     color: #173B2D !important;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 991px) {

     .elya-contact-hero {
          min-height: 400px;
     }

     .elya-contact-hero-content {
          padding: 135px 0 60px;
     }

     .elya-contact-hero-content h1 {
          font-size: 48px;
     }

     .elya-contact {
          padding: 80px 0;
     }

}


@media (max-width: 767px) {

     .elya-contact-hero {
          min-height: 370px;
     }

     .elya-contact-hero-content {
          padding: 120px 20px 50px;
     }

     .elya-contact-hero-content h1 {
          font-size: 38px;
     }

     .elya-contact-hero-content p {
          font-size: 15px;
     }

     .elya-contact {
          padding: 65px 0;
     }

     .elya-contact-title {
          margin-bottom: 40px;
     }

     .elya-contact-title h2 {
          font-size: 34px;
     }

     .elya-contact-card {
          padding: 30px;
     }

     .elya-contact-actions-new {
          flex-direction: column;
          align-items: stretch;
     }

     .elya-contact-action-new {
          width: 100%;
     }

}


@media (max-width: 480px) {

     .elya-contact-hero-content h1 {
          font-size: 32px;
     }

}


/* =========================================
   MOBILE RESPONSIVE FIX
   ========================================= */

@media (max-width: 768px) {

     /* ---------- GENERAL ---------- */
     html,
     body {
          width: 100%;
          max-width: 100%;
          overflow-x: hidden;
          margin: 0;
          padding: 0;
     }

     * {
          box-sizing: border-box;
     }


     /* ---------- NAVBAR ---------- */

     nav,
     .navbar,
     header {
          width: 100% !important;
          max-width: 100% !important;
          margin: 0 !important;
          padding-left: 12px !important;
          padding-right: 12px !important;
     }

     /* إزالة الفراغ/الشكل الزائد قبل اللوجو */
     nav::before,
     nav::after,
     .navbar::before,
     .navbar::after,
     header::before,
     header::after {
          display: none !important;
          content: none !important;
     }

     .logo,
     .navbar-logo,
     .logo-container,
     header .logo {
          margin-left: 0 !important;
          padding-left: 0 !important;
          width: auto !important;
          max-width: 120px;
     }

     .logo img,
     .navbar-logo img,
     .logo-container img,
     header .logo img {
          max-width: 100% !important;
          height: auto !important;
          display: block;
     }


     /* ---------- NAV LINKS ---------- */

     nav ul,
     .navbar ul {
          margin: 0 !important;
          padding: 0 !important;
     }

     nav li,
     .navbar li {
          margin: 0 !important;
     }


     /* ---------- HERO ---------- */

     .hero,
     .hero-section,
     #hero {
          width: 100% !important;
          max-width: 100% !important;
          min-height: 100vh !important;
          height: 100svh !important;
          margin: 0 !important;
          overflow: hidden !important;

          background-size: cover !important;
          background-position: center center !important;
          background-repeat: no-repeat !important;
     }

     /* لو الـHero عبارة عن صورة img */
     .hero img,
     .hero-section img,
     #hero img {
          width: 100% !important;
          height: 100% !important;
          object-fit: cover !important;
          object-position: center center !important;
     }


     /* ---------- HERO CONTENT ---------- */

     .hero-content,
     .hero-text,
     .hero-section .content,
     #hero .content {
          width: 90% !important;
          max-width: 500px !important;
          margin-left: auto !important;
          margin-right: auto !important;
          padding-left: 0 !important;
          padding-right: 0 !important;
     }

     .hero h1,
     .hero-section h1,
     #hero h1 {
          font-size: clamp(32px, 9vw, 48px) !important;
          line-height: 1.05 !important;
     }

     .hero p,
     .hero-section p,
     #hero p {
          font-size: 13px !important;
          line-height: 1.5 !important;
          max-width: 320px !important;
     }


     /* ---------- BUTTON ---------- */

     .hero button,
     .hero a,
     .hero-section button,
     .hero-section a {
          max-width: 100% !important;
     }
}


/* =========================================
   VERY SMALL PHONES
   ========================================= */

@media (max-width: 480px) {

     nav,
     .navbar,
     header {
          padding-left: 8px !important;
          padding-right: 8px !important;
     }

     .logo img,
     .navbar-logo img,
     .logo-container img,
     header .logo img {
          max-width: 105px !important;
     }

     .hero,
     .hero-section,
     #hero {
          min-height: 100svh !important;
          height: 100svh !important;

          /* تغيير مكان الصورة شوية عشان المنتج يبان أفضل */
          background-position: 60% center !important;
     }

     .hero img,
     .hero-section img,
     #hero img {
          object-position: 60% center !important;
     }

     .hero-content,
     .hero-text,
     .hero-section .content,
     #hero .content {
          width: 88% !important;
     }
}