/* Add custom CSS styles below */ 
:root {
    --font-main: 'Tajawal';
    --color-primary: #eab7bc;
   /* --color-primary-dark: #00266a;
    --color-primary-light: #3b72b6;
    --color-primary-lighter: #154c9014;
    --color-primary-reverse: #e1ffff;
    --color-background: #ffffff;
    --color-text: #000000;
    --color-secondary: #df8f97;
    --color-bg-header: #ffffff;
    --color-text-header: #000000;
    --logo-width-desktop: 150px;
    --logo-height-desktop: 70px;
    --logo-width-mobile: 75px;
    --logo-height-mobile: 32px;
    --color-bg-footer: #df8f97;
    --color-text-footer: #824f38;*/
}
.main-banner-component .container {
    max-width: 90% !important;
}

section:nth-child(1 of .main-banner-component)  h3 {
    color: #fff !important;
    font-size: 30px;
    border-right: 2px solid #fff;
    padding-right: 20px;
}
section:nth-child(1 of .main-banner-component) .content > div {
  width: 35%
}
section:nth-child(2 of .main-banner-component) .content > div {
    width: 35%;
    align-items: center;
    text-align: center;
}
section:nth-child(2 of .main-banner-component)  h3 {
  color:#FEE4E2 !important;
  font-size: 42px
}
@media (max-width:768px){
 .main-banner-component .container {
    max-width: 100% !important;
} 
  section:nth-child(1 of .main-banner-component) .content > div {
    width: 100%;
    align-items: center;
    text-align: center;
}
  section:nth-child(2 of .main-banner-component) .content > div {
    width: 100%;

}
  .main-banner-component .content {
    display: flex;
    align-items: flex-start;
    height: 450px !important;
    padding-top: 30px;
}
  section:nth-child(1 of .main-banner-component)  h3 {
    font-size: 20px;
}
  section:nth-child(2 of .main-banner-component)  h3 {
    color: #FEE4E2 !important;
    font-size: 22px;
}
}
@media (min-width:991px){
  .special-categories-component .swiper-wrapper{
    justify-content: center
  }
}