@font-face { font-family: "TheSansArabic"; src: url("TheSansArabic-Light.otf") format("opentype"), url("TheSansArabic-Light.otf") format("opentype") } body { margin: 0; background-color: #FAF0F0; font-family: TheSansArabic; } .logo { float: right !important; margin-top: 25px !important; margin-right: 25px !important; } .top-row { position: absolute; background-color: rgba(255, 255, 255, .4); width: 83.4%; left: 0; top: 85px; padding: 20px 60px 20px 80px; } .left-icon { float: left; } .left-icon img.logo { float: left; } li.active > label.container { color:#ffffff; } .right-globe { position: absolute; top: 85px; height: 121px; background-color: x; width: 53%; right: 40%; background: linear-gradient(to left, #e8dff0, #ffffff); } .right-globe div { float: left; margin-top: 44px; } .left-img { float: right; width: 40%; } .left-img img { width: 90%; } .right-section { float: left; width: 60%; padding: 0 px; } .arrows ul { list-style: none; margin: 0; padding: 0; text-align: center; } .arrows ul li { float: right; width: 32%; background-image: url(grey-arrow-ar.png); background-size: cover; background-position: center; color: #000; height: 77px; text-align: center; display: table; } .arrows ul li:last-child { margin-right: 0px; } .arrows ul li span { vertical-align: middle; display: table-cell; margin: auto; padding: 0 20px; text-align:center !important; } .arrows ul li.active { background-image: url(green-arrow-ar.png); color: #fff; } .arrows ul li.desactive { background-image: url(gry-arrow-ar.jpeg); color: #fff; } .arrows { float: right; width: 100%; } .heading { float: right; width: 100%; margin-top: 30px; margin-bottom: 30px; direction: rtl; } .heading h1 { font-weight: 600; font-size: 26px; } .input-lists { float: left; width: 100%; } .input-lists ul { list-style: none; margin: 0; padding: 0; } .input-lists ul li { background-color: #ffffff; margin-bottom: 20px; padding: 30px 80px 30px 80px; border: 1px solid #e6e8e9; border-radius: 10px; box-shadow: 0px 2px 3px 0px #eee; } button.submit-btn { margin-top: 30px; background-color: #204d2c; color: #fff; padding: 10px 50px; border-radius: 10px; font-size: 18px; float: left; cursor: pointer; } button.submit-btn i.fa.fa-angle-right { margin-left: 10px; } .container { display: block; position: relative; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; text-align: right; } /* Hide the browser's default checkbox */ .container > input { position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0; } /* Create a custom checkbox */ .checkmark { position: absolute; top: -5px; right: -36px; height: 25px; width: 25px; background-color: #aaa; border-radius: 100%; } /* On mouse-over, add a grey background color */ .container:hover input ~ .checkmark { background-color: #ccc; } /* When the checkbox is checked, add a blue background */ .container input:checked ~ .checkmark { background-color: #fff; } /* Create the checkmark/indicator (hidden when not checked) */ .checkmark:after { content: ""; position: absolute; display: none; } /* Show the checkmark when checked */ .container input:checked ~ .checkmark:after { display: block; } /* Style the checkmark/indicator */ .container .checkmark:after { left: 9px; top: 5px; width: 5px; height: 10px; border: solid #444; border-width: 0 2px 2px 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); } /* page 2 */ .row-table { float: left; width: 100%; } .row-table .col { float: left; width: 33%; text-align: center; padding: 20px 0; border: 1px solid #eaeaea; } .col.col-th { background-color: #eaefeb; font-weight: 700; } .col.col-td { background-color: #fff; } .text-list { float: right; } .text-list li { color: #555; font-size: 14px; margin-top: 10px; } .input-lists ul li.active { background-color: #204d2c; color: #fff; } .white { background-color : white; } table { border-collapse: collapse; width: 100%; } .table-lists { float: left; width: 100%; } .table-lists tr { width: 100%; } tr.dark-green { background-color: #204d2c; color: #fff; } tr.light-green { background-color: #eaefeb; color: #000; } .table-lists tr td { padding: 25px 5px; text-align: center; border: 1px #e6e8e9 solid; } .quantity { margin-top: 10px; position: relative; display: flex; justify-content: start; } input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } input[type=number] { -moz-appearance: textfield; } .quantity input { width: 95px; height: 42px; line-height: 1.65; float: left; display: block; padding: 10px !important ; margin: 0; padding-left: 20px; border: none; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08); font-size: 1rem; border-radius: 4px; background-color: white; } .quantity input:focus { outline: 0; } .quantity-nav { float: left; position: absolute; height: 42px; padding-right: 54px;} .quantity-button { position: relative; cursor: pointer; border: none; border-left: 1px solid rgba(0, 0, 0, 0.08); width: 21px; text-align: center; color: #333; font-size: 13px; font-family: "FontAwesome" !important; line-height: 1.5; padding: 0; background: #FAFAFA; -webkit-transform: translateX(-100%); transform: translateX(-100%); -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none; } .quantity-button:active { background: #EAEAEA; } .quantity-button.quantity-up { position: absolute; height: 50%; top: 0; border-bottom: 1px solid rgba(0, 0, 0, 0.08); font-family: "FontAwesome"; border-radius: 4px 0 0 0; line-height: 1.6 } .quantity-button.quantity-down { position: absolute; bottom: 0; height: 50%; font-family: "FontAwesome"; border-radius: 0 0 0 4px; } .enfants { width: 100%; margin-top: 25px; border-radius: 4px; } .enfant { background-color: white; box-shadow: 1px 1px 5px #eae3e3; border-radius: 4px; } .enfant .title h1{ padding: 20px 15px 5px; color: #204d2c; } .enfant fieldset{ width: 50%; padding: 10px; border: none; } .enfant label { margin: 5px; } .enfant input[type=number]{ width: 60%; height: 42px; line-height: 1.65; display: block; padding: 0; padding-right: 20px; border: none; font-size: 1rem; } .placeholder { width: 65%; display: flex; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08); border-radius: 4px; } .placeholder span{ padding-top: 10px; } .enfant input:focus { outline: 0; } .fe { display: flex; } .arrows ul li.active_s { background-image: url(green-arrow-s.png); color: #fff; } .arrows ul li.desactive_s { background-image: url(gry-arrow-s.jpeg); color: #fff; } .switch { position: relative; display: inline-block; width: 60px; height: 34px; margin-left: 30% !important; } .switch input { opacity: 0; width: 0; height: 0; } .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; -webkit-transition: .4s; transition: .4s; } .slider:before { position: absolute; content: ""; height: 26px; width: 26px; left: 4px; bottom: 4px; background-color: white; -webkit-transition: .4s; transition: .4s; } input:checked + .slider { background-color: #204d2c; } input:focus + .slider { box-shadow: 0 0 1px #204d2c; } input:checked + .slider:before { -webkit-transform: translateX(26px); -ms-transform: translateX(26px); transform: translateX(26px); } /* Rounded sliders */ .slider.round { border-radius: 34px; } .slider.round:before { border-radius: 50%; } /* end page 2 */ @media screen and (max-width: 768px) {   .enfant input[type="number"] {
  width: auto !important;
} .left-img img { width: 100%; height: 450px; object-fit: cover; object-position: top; } .right-globe div { margin-top: 10px; } .top-row { position: absolute; background-color: rgba(255, 255, 255, .4); width: 87%; left: 0; top: 43px; padding: 10px 40px; } .left-icon img.logo { float: left; width: 85px; } .right-globe { color: #000; position: relative; top: 0; right: 0; height: 50px; } .right-section { display: grid; width: 90%; padding: 0; margin: auto; float: unset; } .arrows ul li span { padding: 0 10px; font-size: 13px; text-align:center !important; } .arrows ul li { width: 80%; margin-right: 10px; height: 48px; margin-bottom: 10px; } .heading { margin-top: 0; margin-bottom: 0; } .input-lists ul li { background-color: #ffffff; margin-bottom: 20px; padding: 10px; border: 1px solid #e6e8e9; border-radius: 10px; box-shadow: 0px 2px 3px 0px #eee; } .checkmark { top: 0; } .arrows { margin-top: 20px; float: left; width: 100%; } .row-table .col { width: 32%; min-height: 40px; } .left-img { margin-top: 20px; } } @media screen and (max-width: 651px) { .left-img img { width: 100%; height: 450px; object-fit: cover; object-position: top; } .arrows ul li span { padding: 0 14px 0 6px; font-size: 12px; text-align:center !important; } .arrows ul li { width: 80%; margin-right: 8px; height: 49px; margin-top: 10px; } } @media screen and (max-width: 481px) { .left-img { margin-top: 20px; float: left; width: 100%; } .arrows { margin-top: 90px; } .left-img img { width: 100%; height: 450px; object-fit: cover; object-position: top; } .arrows ul { /* display: flex; */ /* flex-direction: row-reverse; */ /* flex-wrap: wrap; */ /* align-items: flex-end; */ } .arrows ul li span { padding: 0 14px 0 6px; font-size: 14px;  text-align:center !important; } .arrows ul li { width: 80%; margin-right: 10px; height: 49px; margin-bottom: 10px; } .top-row { width: 84%; padding: 10px 38px; } .row-table .col { width: 27%; min-height: 40px; padding: 20px 10px; } } @media screen and (max-width: 415px) { .arrows ul li span { padding: 0 20px 0 6px; font-size: 12px;  text-align:center !important; } .arrows ul li { width: 80%; margin-right: 0; height: 43px; margin-bottom: 10px; /* align-items: center; */ } .left-img img { width: 100%; height: 450px; object-fit: cover; object-position: top; } } @media screen and (max-width: 361px) { .arrows ul li { width: 80%; margin-right: 0; height: 50px; margin-bottom: 10px; float: none; } .arrows ul li span { text-align:center !important; padding: 0 20px 0 20px; font-size: 16px; } button.submit-btn { width: 100%; } .left-img img { width: 100%; height: 450px; object-fit: cover; object-position: top; } }