@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@300;400;500;700;900&display=swap');
body{font-family: 'Tajawal', sans-serif; }
.btn:active:focus, .btn:focus{
    outline: unset;
}
.form-control,input{
    height: 3em;
    box-shadow: 0px 3.11579px 3.11579px rgba(0, 0, 0, 0.05);;
}
a:hover{
    text-decoration: none;
    opacity: .9;
}
a:focus-within{
    text-decoration: none;

}
/* begin color variable */
:root {
    --secondary: #87786C;
    --tertiary: #6C727F;
    --primary: #F26530;
    --body_text: #363636;
    --head_text: #FFFFFF;
    --card_bg: #FFF8F6;
    --input_fields_stroke: #E6E1DE;
    --secondary2: #685A4D;
    --toggles: #AFAFAF;
    --links: #1F3C9F;
    --on_hover: #DF491B;
    --nav_links: #777;
    --font: 'Tajawal';


}
body {background: #FFF8F6;}
/* End color variable */
.img-fluid {
    width: 100%;
}
.clear_both{
    clear: both
}
.float-right {
    float: right;
}

.float-left {
    float: left;
}

.mb-5 {
    margin-bottom: 3em;
}
.mt-5 {
    margin-top: 3em;
}
/************** Select ***************/
.select-wrapper {
  position: relative;
}

/* FORM -------change foucs colors */
select:focus, textarea.form-control:focus {
  border-color: #F26530 !important;
    box-shadow: 0px 3.11579px 3.11579px rgba(0, 0, 0, 0.05) !important;
}

/*************************/
/* start header */
header .banner-container img {
    width: 100%;
    height: 100%;
}
header .banner-container .col-xs-6{
    padding-left: 0 !important;
    padding-right: 0;
    margin-top: -5em;
}
header .banner-container .col-xs-6 img{
    margin-top: -2em;
    margin-right: 2em;
}
header .banner-container .banner-info{
    text-align: center;
    margin: 0 .5em;
}

header .banner-container .banner-info>h1{
    font-size: 7.5em;
    color: var(--primary);
    font-weight: 800;
    font-family: var(--font);
}
header .banner-container .banner-info>p{
    font-size: 2em;
    color: #87786C;
    font-weight: 800;
    font-family: var(--font);
}
header .banner-container .banner-info .year_container{
    color: var(--primary);
}

.user {
    width: 14rem;

}

.cart,
.user {
    background: #f9f9f9;
    border-radius: 50rem;
    margin-left: 5px;
}

.user a {
    padding-top: 5px !important;
    padding-bottom: 3px !important;
}

.flag {
    margin-top: 0.5rem;
    margin-left: 4px;
}

nav .first {
    float: right;
    border-left: 1px solid;
    padding-left: 6px;
    margin-left: 4px;
}

nav .icon i {
    background: #f16236;
    padding: 0.7rem;
    border-radius: 50rem;
    color: #fff;
    margin-top: -8px;
    margin-right: 4px;
}
/***** BreadCumb ******/
.breadcrumb { margin-bottom: 0px;}
.breadcrumb-item a { color: #6C727F; text-decoration: none;}
.breadcrumb .active { color: #685A4D; font-weight:700;}
/****** header ********/
.head-bg-cont{margin-left: 15px; margin-right: 15px;}
.head-bg{background: url(../img/bg.jpg) no-repeat center right ;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  height: 887px;}
/************* *************/
.img-s-logo{ max-width: 50%;}
.fijo {background: url(../img/orphans.png) no-repeat center bottom ; background-size: contain;}
.sec-logo{ margin: auto; padding-top: 0%;text-align: center;}
.text-entr-akika { width: 45%; margin: auto;
  color: #593E21;
text-align: center;
font-size: 40px;
font-style: normal;
font-weight: 700;
line-height: 139.9%; /* 55.96px */
text-transform: capitalize;
}
.b-shar { background:var(--head_text); color:var(--primary) ; border-color:var(--primary); float: left;}
.b-shar:hover, .b-shar:focus {
    background: var(--primary) !important;
    color: #ffffff !important;
}
.all-formo h2 { display: inline-block; color:#685A4D; font-size: 32px;}
.all-formo { margin: auto;
    background: #FFF8F6;
    border-radius: 20px;
    padding: 32px 32px;
    width: 90%;
    margin-top: 15%;}
    /*************************************************/
.b-shar.dropdown-toggle::after { display: none;}
.share-men{ border-radius: 0px 0px 8px 8px; margin: auto; padding-right: 0px;min-width: 50px;}
.share-men li { width: 100%;}
.share-men li a { text-align: center; padding: 4px 0px;border-bottom: 0px}
.share-men .bi-twitter-x{color: #000;font-size: 22px;padding-bottom: 7px;}
.share-men .fa-facebook{color:#3089F2;font-size: 27px;}
.share-men .bi-link-45deg{color:#F26530;font-size: 27px;}
.share-men .bi-whatsapp{color:#008C27;font-size: 23px;}
    /*********************country *******************/
    .has-float-label {
        display: block;
        position: relative;
    }
    .form-control, input {
      color: var(--tertiary);
        text-align: right;
        font-family: Tajawal;
        font-size: 24px;
        font-style: normal;
        font-weight: 500;
        line-height: 152.9%; /* 36.696px */
        text-transform: capitalize;
        height: 3em;
        box-shadow: 0px 3.11579px 3.11579px rgba(0, 0, 0, 0.05) !important;
    		border-radius: 12px !important;
    }
    .has-float-label label, .has-float-label>span {
        position: absolute;
        cursor: text;
        font-size: 24px;
        font-weight: 700;
        color: var(--secondary);
        opacity: 1;
        -webkit-transition: all .2s;
        transition: all .2s;
        top: -0.5em;
        right: 1rem;
        z-index: 3;
        line-height: 1;
        padding: 0 1px;
        background: #ffffff;
    }
    /****************Family********************/
    .bonm,.family_num,.tot-mon {padding-bottom: 24px;}
    .notex {padding-bottom: 44px;}
    .family_num {position: relative;}
    textarea.form-control {min-height: calc(1.5em + 2.5rem + calc(var(--bs-border-width) * 2));}
    /******************num*****************/
.tot-mon{text-align: center}
    .tot-mon h2 {background: #ffffff; border-radius: 16px;height: 84px; color: var(--secondary, #87786C);
				text-align: center;
				font-size: 32px;
				font-style: normal;
				font-weight: 700;
				line-height: 152.9%; /* 48.928px */
				text-transform: capitalize;
    margin: 0px;}
.inputarrow{border-radius: 12.463px;
border: 1.558px solid #E6E1DE;
background: #FFF;
box-shadow: 0px 3.11579px 3.11579px 0px rgba(0, 0, 0, 0.05);}
    .tot-mon span { font-family: arial; color: #685A4D;}
    .tot-mon small {color: #685A4D;font-family: 'Tajawal', sans-serif !important;font-weight: 700;font-size: 32px !important;}
    /*****************************************/
   
.bonm textarea{
  color: #6C727F;
  text-align: right;
  font-family: Tajawal;
  font-size: 24px;
  font-style: normal;
  font-weight: 500;
  line-height: 200%; /* 36.696px */
  text-transform: capitalize;

}
/*****************************/
.copo h2 { display: none;}
.copo { padding-bottom: 44px;}
/********* Radio ***************/
.radio {
  margin: 0.5rem;
  display: inline-block;
}
.radio input[type=radio] {
  position: absolute;
  opacity: 0;
}
.radio input[type=radio] + .radio-label:before {
  content: "";
  background: #FFFFFF;
  border-radius: 100%;
  border: 4px solid #AFAFAF;
  display: inline-block;
  width: 1.4em;
  height: 1.4em;
  position: relative;
  top: -0.2em;
  margin-right: -5px;
  vertical-align: top;
  cursor: pointer;
  text-align: center;
  transition: all 250ms ease;
  margin-left: 10px;
}
.radio input[type=radio]:checked + .radio-label:before {
  background-color: #F26530;
  box-shadow: inset 0 0 0 1px #afafaf;
}
.radio input[type=radio]:focus + .radio-label:before {
  outline: none;
  border-color: #AFAFAF;
}
.radio input[type=radio]:disabled + .radio-label:before {
  box-shadow: inset 0 0 0 4px #f4f4f4;
  border-color: #b4b4b4;
  background: #b4b4b4;
}
.radio input[type=radio] + .radio-label:empty:before {
  margin-right: 0;
}
.radio label {
  color: var(--secondary, #87786C);
text-align: center;
font-family: Tajawal;
font-size: 24px;
font-style: normal;
font-weight: 700;
line-height: 152.9%; /* 36.696px */
text-transform: capitalize;
}
.message-div{ margin-top: 7%;;}
/******* Question **************/

.infos { margin-top: 20px; margin-bottom: 40px;}
.faq-tabz {padding: 40px 20px 20px 20px; background: #ffffff;}
.nav-tabs>button{ height: 60px; padding: 15px 60px !important;font-family: 'Tajawal';color:#6C727F;
font-style: normal;
font-weight: 500;
font-size: 21px;background: none !important;}
.nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link {
    color: #F26530;
}

element.style {
}
.nav-tabs .nav-link {
    margin-bottom: calc(-1 * var(--bs-nav-tabs-border-width));
    border: 0px solid transparent;
    border-top-right-radius: var(--bs-nav-tabs-border-radius);
    border-top-left-radius: var(--bs-nav-tabs-border-radius);
}
.nav-link:hover, .nav-link:focus {color: var(--primary);}
.nav-tabs {
    --bs-nav-tabs-border-width: 0px;
    --bs-nav-tabs-border-color: var(--bs-border-color);
    --bs-nav-tabs-border-radius: var(--bs-border-radius);
    --bs-nav-tabs-link-hover-border-color: var(--bs-secondary-bg) var(--bs-secondary-bg) var(--bs-border-color);
    --bs-nav-tabs-link-hover-border-color: var(--bs-secondary-bg) var(--bs-secondary-bg) var(--bs-border-color);
    --bs-nav-tabs-link-active-color: var(--bs-emphasis-color);
    --bs-nav-tabs-link-active-bg: var(--bs-body-bg);
    --bs-nav-tabs-link-active-border-color: var(--bs-border-color) var(--bs-border-color) var(--bs-body-bg);
    border-bottom: var(--bs-nav-tabs-border-width) solid var(--bs-nav-tabs-border-color);
}
.nav-tabs>button.active, .nav-tabs>button.active:focus, .nav-tabs>button.active:hover, .nav-tabs .nav>button:focus, .nav-tabs .nav>button:hover, .nav-tabs .nav-tabs>button:hover {
    color: #F26530 !important;
    cursor: pointer;
    border: none;
    border-bottom-color: #FFF8F6;
		background: #FFFFFF !important;
		border-width: 0px;
		border-style: none;
		border-color: transparent;
		border-radius: 16px 16px 0px 0px !important;

		font-family: 'Tajawal';
		font-style: normal;
		font-weight: 700;
		font-size: 21px;
}
/*******/
.reports .caption a {
    display: block;
    margin: auto;
    font-size: 13px;
    color: #F26530;
    padding: 10px;
    text-align: center;
    text-decoration: none;
}
/***********************************************/
.caption{display: table-cell;}
.col-xs-8 {
    flex: 0 0 auto;
    width: 79.66666667%;
}
.col-xs-4 {
    flex: 0 0 auto;
    width: 19.33333333%;
}
/************ Sizes Responsives ****************/
@media (max-width:1765px) {
.family_breakfast_btn button.like-button {font-size: 30px;}
.family_breakfast_btn button.add_toCard {font-size: 30px;}
}
@media (max-width:1680px) {
.family_breakfast_btn button.like-button {font-size: 28px;}
.family_breakfast_btn button.add_toCard {font-size: 28px;}
}
@media (max-width:1600px) {
.family_breakfast_btn button.like-button {font-size: 26px;}
.family_breakfast_btn button.add_toCard {font-size: 26px;}
}
@media (max-width:1536px) {
	 .head-bg{background: url(../img/bg-1536.jpg) repeat center right ;height: 642px;}
.family_breakfast_btn button.like-button {font-size: 24px; width: 52%;height: 54px;}
.family_breakfast_btn button.add_toCard {font-size: 24px; width: 44%;height: 54px;}
	.has-float-label label, .has-float-label>span {font-size: 20px;}
.form-control, input {font-size: 18px;}
	.tot-mon h2 {height: 72px;font-size: 28px;}
	.all-formo { padding: 32px 24px;    margin-top: 5%;}
	.copo {
    padding-bottom: 32px;
}
.message-div {margin-top: 7%;margin-right: -5%;}
}
@media (max-width: 1440px) {
  .head-bg{background: url(../img/bg-1440.png) repeat center right ;height: 600px;}
  .sec-logo { text-align: right;margin-right: 14%;}
  .img-s-logo {max-width: 60%;}
  .text-entr-akika {
    width: 55%;
    font-size: 32px;
    margin-right: 12%;
    margin-top: 2%;}
    .has-float-label label, .has-float-label>span {    font-size: 20px;}
    .form-control, input {  font-size: 18px;}
    .bonm textarea {  font-size: 22px;}
    .all-formo {margin-top: 5%;}
.message-div {margin-top: 7%;margin-right: 0%;}
	.family_breakfast_btn {padding-bottom: 0px;margin-top: 0px;}
	.notex { padding-bottom: 32px;}
	.tot-mon h2 {height: 64px; font-size: 24px;}
		.radio label {font-size: 18px;}
	.has-float-label label, .has-float-label>span {font-size: 18px;}
	.form-control, input {
    font-size: 16px;
}
	.bonm, .family_num, .tot-mon {padding-bottom: 16px;}
	.radio { margin-left: 24px;}
}
@media (max-width: 1280px) {
  .head-bg{background: url(../img/bg-1280.jpg) no-repeat center right ;height: 533px;}
  .text-entr-akika {width: 55%;font-size: 28px;}
  .fijo {background: url(../img/orphans-1280.png) no-repeat center bottom ; background-size: contain; }
  .text-entr {  font-size: 22px; line-height: 35px;}
  .all-formo h2 {font-size: 26px; font-weight: 700;padding-top: 0.4rem;}
  .family_num {padding-top: 5px;}
  .tot-mon h2 {font-size: 18px; margin-top: 5px; height: 54px;padding-top:0px;}
  .tot-mon small {font-size: 22px !important;}
  .family_breakfast_btn button{padding: 13px 0;}
  .family_breakfast_btn button.add_toCard   {padding: 13px 0px ;}
  .all-formo {padding:20px 24px; margin-top: 5%;}
  .family_breakfast_btn button.like-button {font-size: 18px;width: 50%;height: 46px;}
  .family_breakfast_btn button.add_toCard {font-size: 18px;height: 46px;}
  .has-float-label label, .has-float-label>span {font-size: 20px;}
  .form-control, input {  font-size: 20px;}
  .bonm textarea {  font-size: 20px;}
  .ctrl {height:54px !important;}
  .select-wrapper::after {top: 20px;}
	.radio label {font-size: 18px;}
	.has-float-label label, .has-float-label>span {font-size: 18px;}
	.form-control, input {
    font-size: 16px;
}
	.all-formo {width: 85%}
	.notex {
    padding-bottom: 24px;
}
	.bonm, .family_num, .tot-mon {padding-bottom: 16px;}
	.radio { margin-left: 24px;}
		.family_breakfast_btn button.add_toCard {
    padding: 5px 0px;
}
	.bonm, .family_num, .tot-mon {padding-bottom: 16px;}
}
@media (max-width: 1024px) {
  .head-bg{background: url(../img/bg-1024.jpg) no-repeat center right ;height: 426px;}
  .radio label {font-size: 16px;}
  .has-float-label label, .has-float-label>span {font-size: 16px;}
  .form-control, input {  font-size: 16px;}
  .bonm textarea {  font-size: 16px;}
  .family_breakfast_btn button{font-size: 17px;}
  .family_breakfast_btn button.add_toCard   {font-size: 17px;}
  .select-wrapper::after {top: 16px;}
		.copo {
    padding-bottom: 16px;
}
	.tot-mon h2 {
    font-size: 16px;
    margin-top: 0px;
		height: 42px;}
	.all-formo {
    padding: 15px 20px;
    margin-top: 1%;
}

}
@media (max-width: 991px){
	
.head-bg {background: url(../img/bg-990.jpg) no-repeat center top ;height: 100%;}
.all-formo {margin-top: 0%;width: 100%; border-radius: 0px;}
.sec-logo {display: none;}
.all-formo {padding: 16px;}
.copo h2 {display: block;}
.head-bg{margin-left: 0px;margin-right: 0px;}
.family_breakfast_btn button.like-button {font-size: 24px; width: 52%; height: 54px}
  .family_breakfast_btn button.add_toCard {font-size: 24px; width: 44%; height: 54px}
/*******/
.header, .head-bg-cont, .head-bg-cont, .form-div {position: relative;height: 100%;}
.message-div{position: relative;height: 440px;margin-top: 0%;}
/*******/
.text-entr {display: none;}
  .tot-mon h2 {background:transparent;}
  .text-entr-akika {width: 49%;font-size: 28px;margin-top: 10%;}
}
@media (max-width: 550px){
  .head-bg {background: url(../img/bg-550.jpg) no-repeat center top ;height: 100%;}
  .message-div{position: relative;height: 244px;;}
  .nav-tabs>button.active, .nav-tabs>button.active:focus, .nav-tabs>button.active:hover, .nav-tabs .nav>button:focus, .nav-tabs .nav>button:hover, .nav-tabs .nav-tabs>button:hover {
font-size: 18px;}
.nav-tabs>button {font-size: 18px;}
.nav-tabs>button {height: 60px;padding: 15px 45px !important;}
.text-entr-akika {width: 49%;font-size: 22px;margin-top: 9%;}
.radio label {font-size: 20px;}
.form-control, input {font-size: 18px;}
.bonm textarea {font-size: 18px;}
.family_breakfast_btn button.like-button {width: 100%; margin-bottom: 15px;}
.family_breakfast_btn button.add_toCard {width: 100%;}
	  .all-formo h2 {font-size: 22px;padding-bottom: 16px;}
	.radio label {font-size: 18px;}
	.radio { margin-left: 32px;}
	.infos {margin-top: 0px;margin-bottom: 20px;}
}
@media (max-width: 450px){
  .nav-tabs>button.active, .nav-tabs>button.active:focus, .nav-tabs>button.active:hover, .nav-tabs .nav>button:focus, .nav-tabs .nav>button:hover, .nav-tabs .nav-tabs>button:hover {
font-size: 15px;}
  .nav-tabs>button {font-size: 15px;}
.nav-tabs>button {height: 60px;padding: 15px 25px !important;}
.family_breakfast_btn button {width: 100%; margin-bottom: 20px;}
.family_breakfast_btn button.add_toCard {width: 100%;}
.family_breakfast_btn button.like-button { width: 100%; margin-bottom: 15px;}
.text-entr-akika {width: 53%;font-size: 20px;margin-top: 9%;}
.all-formo h2 {font-size: 22px;padding-bottom: 16px;}
	.copo {
    padding-bottom: 24px;
}
	.notex label { display: none;}
	.notex {
    padding-bottom: 24px;
}
	.family_breakfast_btn button.like-button {font-size: 20px; height: 54px; border-radius: 16px;padding: 12px;}
	.family_breakfast_btn button.add_toCard {font-size: 20px; height: 54px; border-radius: 16px;padding: 12px;}


}
@media (max-width: 375px){
  .b-shar{
    --bs-btn-padding-x: 0.5rem;
    --bs-btn-padding-y: 0.25rem;}
  .all-formo h2 {font-size: 24px;}
  .tot-mon h2 {background:transparent; height: auto;}
  .all-formo h2 {font-size: 22px;}
  .text-entr-akika {font-size: 18px;}
}
@media (max-width: 335px){
.radio {
    margin-left: 25px;
}
}