.logo {
     height: 70px;
 }
 
 .main-nav {
     text-align: start;
 }
 
 .welcome-nav {
     direction: rtl;
     color: #02407a !important;
 }
 
 .scroll-to-section a {
     font-size: 1rem !important;
     font-weight: 600 !important;
     font-family: 'Air Strip Arabic', Arial, sans-serif !important;
     color: #02407a !important;
 }
 
 html,
 body,
 p {
     font-family: 'Tajawal', sans-serif !important;
     padding-top: 0 !important;
 }
 
 a {
     font-family: 'Tajawal', sans-serif !important;
 }
 
 .features-item img {
     height: 195px !important;
 }
 
 #promotion .right-text img {
     display: inline-block;
     float: left;
     margin-right: 30px;
     height: 115px;
 }
 
 .section-padding {
     padding: 60px 0;
 }
 
 .brand-carousel {
     background: white;
     /* margin-top: 15%; */
 }
 
 .owl-dots {
     text-align: center;
     margin-top: 4%;
 }
 
 .owl-dot {
     display: inline-block;
     height: 15px !important;
     width: 15px !important;
     background-color: #878787 !important;
     opacity: 0.8;
     border-radius: 50%;
     margin: 0 5px;
 }
 
 .owl-dot.active {
     background-color: #000 !important;
 }
 
 .owl-dots2 {
     display: none;
 }
 
 .owl-dot2 {
     display: none;
 }
 
 @import url('https://fonts.googleapis.com/css2?family=Raleway:wght@100;200;400;700;800&display=swap');
 :root {
     --primary: #f78d1b;
     --secondary: #f78d1b;
     --ternery: #fe5b03;
 }
 
 *,
 *::after,
 *::before {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
 }
 
 #title {
     color: var(--ternery);
 }
 
 label {
     font-size: 1rem;
     font-weight: 700;
     color: #4c4b4b;
 }
 
 .container {
     width: 90%;
     margin: 0 auto;
 }
 /*
*START REGESTRTION
*
*/
 
 #terms .panel-body {
     margin-top: 0;
 }
 
 #terms h2 {
     color: #070707;
 }
 
 #main {
     margin: 5vh auto;
 }
 
 #main label {
     font-size: 1.5rem;
     font-weight: 600;
     color: #4c4b4b;
 }
 
 #main input.form-control {
     height: 34px;
 }
 
 .main-form-title {
     background: #004279;
     color: #004279;
     padding-top: 12px;
     padding-bottom: 5px;
     border-radius: 14px;
     margin-bottom: 32px !important;
     margin-top: 32px !important;
 }
 
 .main-form-title label {
     color: #fff !important;
 }
 
 #survey-form {
     max-width: 850px;
     /* max-width: 100%; */
     padding: 20px;
     margin: 0 auto;
     border-radius: 15px;
     background: #ffffff;
     transition: all ease-in-out 400ms;
     box-shadow: 0 4px 8px 0 rgb(0 0 0 / 30%), 0 6px 8px 0 rgb(0 0 0 / 6%);
     padding: 50px;
 }
 
 .mb-custom {
     margin-bottom: 10px;
 }
 
 .form-check-input:checked {
     border: none;
     background-color: var(--ternery);
 }
 
 .btn-primary {
     border: none;
     background-color: var(--ternery);
     transition: all ease-in-out 200ms;
 }
 
 .btn-primary:hover {
     transform: translateY(2px);
     background-color: var(--primary);
 }
 
 .system-btn {
     background-color: #004279;
     width: 130px;
     font-size: 14px;
     color: #ffffff;
     font-weight: 600;
     box-shadow: 0 7px 12px 0 rgb(0 0 0 / 35%), 0 1px 4px 0 rgb(0 0 0 / 6%);
 }
 
 .system-btn:hover {
     background-color: #1a5587;
 }
 
 .system-btn:checked {
     background-color: #1a5587;
 }
 
 .system-btn:focus {
     background-color: #1a5587;
     border-color: #1a5587;
 }
 
 .system-btn:active:hover {
     color: #fff;
     background-color: #1a5587;
     border-color: #1a5587;
 }
 
 .system-btn-outline {
     background-color: #faf0fa;
     border: 2px solid #004279;
     width: 130px;
     font-size: 16px;
     color: #4f4f4f;
     font-weight: 600;
     box-shadow: 0 7px 12px 0 rgb(0 0 0 / 15%), 0 1px 2px 0 rgb(0 0 0 / 6%);
 }
 
 .system-btn-outline:hover {
     background-color: #1a5587;
 }
 
 .system-btn-outline:checked {
     background-color: #1a5587;
 }
 
 .system-btn-outline:focus {
     background-color: #1a5587;
     border-color: #1a5587;
 }
 /*
*
*
*/
 
 .system-btn-orange {
     background-color: #f7ab53;
     width: 130px;
     font-size: 16px;
     color: #ffffff;
     font-weight: 600;
     box-shadow: 0 7px 12px 0 rgb(0 0 0 / 35%), 0 1px 4px 0 rgb(0 0 0 / 6%);
 }
 
 .system-btn-orange:hover {
     background-color: #ffb967;
 }
 
 .system-btn-orange:checked {
     background-color: #ffb967;
 }
 
 .system-btn-orange:focus {
     background-color: #ffb967;
     border-color: #ffb967;
 }
 
 .system-btn-orange:active:hover {
     color: #fff;
     background-color: #ffb967;
     border-color: #ffb967;
 }
 
 .system-btn-orange-outline {
     background-color: #f7ab5317;
     border: 2px solid #f7ab53;
     width: 130px;
     font-size: 16px;
     color: #4f4f4f;
     font-weight: 600;
     box-shadow: 0 7px 12px 0 rgb(0 0 0 / 15%), 0 1px 2px 0 rgb(0 0 0 / 6%);
 }
 
 .system-btn-orange-outline:hover {
     background-color: #ffb967;
 }
 
 .system-btn-orange-outline:checked {
     background-color: #ffb967;
 }
 
 .system-btn-orange-outline:focus {
     background-color: #ffb967;
     border-color: #ffb967;
 }
 /*
*
*/
 
 @media only screen and (max-width: 1024px) {
     #survey-form {
         width: 60vw;
     }
 }
 
 @media only screen and (max-width: 425px) {
     .box {
         width: 200px;
         height: 200px;
         border-radius: 50px;
     }
     .box1 {
         top: 50vh;
         left: -75px;
     }
     .box2 {
         top: -100px;
         right: -100px;
     }
     #survey-form {
         width: 80vw;
     }
 }
 
 #survey-form {
     direction: rtl;
     text-align: right;
 }
 
 @media only screen and (max-width: 1150px) {
     .registration-parent .box {
         display: none;
         z-index: -1;
         width: 500px;
         height: 500px;
         position: fixed;
         border-radius: 125px;
         transform: rotate(40deg);
         box-shadow: 3px 3px 7px rgba(0, 0, 0, 0.4);
         background-image: linear-gradient( var(--secondary), var(--ternery), var(--primary));
     }
 }
 
 .panel-body ul,
 .panel-body li {
     padding: 0;
     margin: 0;
     list-style: decimal !important;
 }
 
 #terms {
     display: flex;
     justify-content: center;
     direction: rtl;
     text-align: start;
     max-width: 730px;
     padding: 20px;
     padding-left: 20px;
     padding-right: 20px;
     margin: 0 auto;
     border-radius: 15px;
     background: #ffffff;
     transition: all ease-in-out 400ms;
     box-shadow: 0 4px 8px 0 rgb(0 0 0 / 30%), 0 6px 8px 0 rgb(0 0 0 / 6%);
     opacity: 0.9;
 }
 
 #terms li,
 #terms h2 {
     line-height: 24px !important;
 }
 
 #terms li {
     margin-bottom: 20px !important;
 }
 
 #terms h2 {
     margin-top: 0px !important;
 }
 
 .custom-select {
     width: 110px;
     height: 36px;
     border-color: #004279;
     border: 2px solid #004279;
     border-radius: 4%;
 }
 
 .custom-select-orange {
     width: 110px;
     height: 36px;
     border-color: #f7ab53;
     border: 2px solid #f7ab53;
     border-radius: 4%;
 }
 
 @media only screen and (max-width: 992px) {
     .system-btn,
     .system-btn-outline {
         margin-bottom: 4px;
         width: 100%;
     }
     .custom-select {
         width: 100%;
         height: 36px;
         border-color: #004279;
         border: 2px solid #004279;
         border-radius: 4%;
     }
 }
 
 @media only screen and (max-width: 542px) {
     #survey-form {
         width: 100% !important;
     }
 }
 
 .panel-body {
     max-width: 795px;
     margin-top: 60px;
 }
 /* RTL */
 
 .sidebar {
     z-index: 9888;
     top: 0;
     right: 0 !important;
     left: auto !important;
     direction: rtl !important;
     box-shadow: 0 2px 3px 0 rgb(0 0 0 / 20%), 0 6px 18px 0 rgb(0 0 0 / 19%);
 }
 
 @media (max-width: 980px) {
     .sidebar {
         z-index: 0 !important;
     }
 }
 
 .pull-right {
     float: left !important;
 }
 
 @media (min-width: 1200px) {
     .col-lg-offset-2 {
         margin-right: 16.66666667%;
     }
     .col-lg-offset-2 {
         margin-left: 0;
     }
 }
 
 @media (min-width: 768px) {
     .col-sm-offset-3 {
         /* margin-right: 25%; */
     }
     .col-sm-offset-3 {
         margin-left: 0;
     }
 }
 
 .navbar-brand {
     float: right;
 }
 
 .navbar-brand {
     padding: 0px !important;
 }
 
 .navbar-brand img {
     width: 80px !important;
     height: 35px !important;
     margin-top: 12px !important;
     margin-right: 10px!important;
 }
 
 .dropdown-toggle-custom {
     color: white;
 }
 
 .dropdown-toggle-custom:hover {
     color: white;
 }
 
 .dropdown-toggle-custom:focus {
     color: white;
 }
 
 .dropdown-menu-custom {
     text-align: right;
 }
 
 .dropdown-menu-custom li a:hover {
     color: red;
 }
 
 .breadcrumb {
     direction: rtl;
 }
 
 .profile-sidebar {
     display: flex;
     justify-content: center;
 }
 
 .logo-sidebar {
     height: 50px;
     padding: 5px;
 }
 
 .main {
     background: #e9ecf2;
     height: 100vh;
 }
 
 .sidebar ul.nav li a {
     height: 50px;
     font-size: 14px;
     font-weight: 600;
     color: #444444;
 }
 
 .li-active {
     background-color: #004279;
     box-shadow: 0 4px 8px 0 rgb(0 0 0 / 20%), 0 6px 20px 0 rgb(0 0 0 / 19%);
 }
 
 .li-active a {
     color: #fff !important;
 }
 
 .sidebar ul.nav a:hover,
 .sidebar ul.nav li.parent ul li a:hover {
     text-decoration: none;
     background-color: #ff8a32;
     color: #fff;
 }
 
 .navbar-custom {
     background: #004279;
     height: 60px;
 }
 
 .dropdown-toggle-custom {
     font-size: 16px;
     font-weight: 600;
 }
 
 .row-custom {
     display: flex;
     direction: rtl;
 }
 
 body {
     /* margin-top: 20px; */
     /* background: #FAFAFA; */
 }
 
 .order-card {
     color: #fff;
     height: 140px;
 }
 
 .bg-c-blue {
     background: linear-gradient(45deg, #4099ff, #73b4ff);
 }
 
 .bg-c-gold {
     background: linear-gradient(45deg, #af7e2a, #ffc663);
 }
 
 .bg-c-mov1 {
     background: linear-gradient(45deg, #bb3fb8a8, #a95aa7);
 }
 
 .bg-c-green {
     background: linear-gradient(45deg, #2ed8b6, #59e0c5);
 }
 
 .bg-c-yellow {
     background: linear-gradient(45deg, #FFB64D, #ffcb80);
 }
 
 .bg-c-pink {
     background: linear-gradient(45deg, #FF5370, #ff869a);
 }
 
 .bg-c-mov {
     background: linear-gradient(45deg, #7e387b, #004279d6);
 }
 
 .bg-c-orange {
     background: linear-gradient(45deg, #f77d3b, #f68d19a3);
 }
 
 .bg-c-red {
     background: linear-gradient(45deg, #f9243f, #f9243f78);
 }
 
 .bg-c-green-2 {
     background: linear-gradient(45deg, #49924a, #76ec78);
 }
 
 .bg-c-brown {
     background: linear-gradient(45deg, #a73f3d, #a94442bf);
 }
 
 .card {
     border-radius: 5px;
     -webkit-box-shadow: 0 1px 2.94px 0.06px rgba(4, 26, 55, 0.16);
     box-shadow: 0 1px 2.94px 0.06px rgba(4, 26, 55, 0.16);
     border: none;
     margin-bottom: 30px;
     -webkit-transition: all 0.3s ease-in-out;
     transition: all 0.3s ease-in-out;
     box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
 }
 
 .card .card-block {
     padding: 15px;
 }
 
 .card-block h6,
 h2 {
     color: #ffffff;
     font-size: 16px;
     font-weight: 600;
     line-height: 1 !important;
 }
 
 .card-block p {
     color: #ffffff;
     margin-top: 26px;
 }
 
 .card-block p,
 .card-block h6 {
     text-align: right;
 }
 
 .a-details {
     color: #ffffff;
     font-size: 16px;
 }
 
 .order-card i {
     font-size: 26px;
 }
 
 .f-left {
     float: left;
 }
 
 .f-right {
     float: right;
 }
 
 .panel {
     padding: 16px;
 }
 
 .white-box {
     direction: rtl;
     box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
 }
 
 .sidebar ul.nav li.parent ul li a {
     padding-right: 26px;
 }
 
 #about,
 #ourClient {
     visibility: visible;
     animation-name: fadeIn;
     background: url(../images/about-bg-2.png) center center no-repeat fixed !important;
     background-size: contain !important;
     padding: 60px 0;
 }
 
 .features-item {
     background: #ffffff;
 }
 /*footer*/
 
 .col_white_amrc {
     color: #FFF;
 }
 
 footer {
     width: 100%;
     background-color: #263238;
     min-height: 250px;
     padding: 10px 0px 25px 0px;
 }
 
 .pt2 {
     padding-top: 40px;
     margin-bottom: 20px;
 }
 
 footer p {
     font-size: 13px;
     color: #CCC;
     padding-bottom: 0px;
     margin-bottom: 8px;
 }
 
 .mb10 {
     padding-bottom: 15px;
 }
 
 .footer_ul_amrc {
     margin: 0px;
     list-style-type: none;
     font-size: 14px;
     padding: 0px 0px 10px 0px;
 }
 
 .footer_ul_amrc li {
     padding: 0px 0px 5px 0px;
 }
 
 .footer_ul_amrc li a {
     color: #CCC;
 }
 
 .footer_ul_amrc li a:hover {
     color: #fff;
     text-decoration: none;
 }
 
 .fleft {
     float: left;
 }
 
 .padding-right {
     padding-right: 10px;
 }
 
 .footer_ul2_amrc {
     margin: 0px;
     list-style-type: none;
     padding: 0px;
 }
 
 .footer_ul2_amrc li p {
     display: table;
 }
 
 .footer_ul2_amrc li a:hover {
     text-decoration: none;
 }
 
 .footer_ul2_amrc li i {
     margin-top: 5px;
 }
 
 .bottom_border {
     border-bottom: 1px solid #323f45;
     padding-bottom: 20px;
 }
 
 .foote_bottom_ul_amrc {
     list-style-type: none;
     padding: 0px;
     display: table;
     margin-top: 10px;
     margin-right: auto;
     margin-bottom: 10px;
     margin-left: auto;
 }
 
 .foote_bottom_ul_amrc li {
     display: inline;
 }
 
 .foote_bottom_ul_amrc li a {
     color: #999;
     margin: 0 12px;
 }
 
 .social_footer_ul {
     display: table;
     margin: 15px auto 0 auto;
     list-style-type: none;
 }
 
 .social_footer_ul li {
     padding-left: 20px;
     padding-top: 10px;
     float: left;
 }
 
 .social_footer_ul li a {
     color: #CCC;
     border: 1px solid #CCC;
     padding: 8px;
     border-radius: 30%;
 }
 
 .social_footer_ul li i {
     width: 20px;
     height: 20px;
     text-align: center;
 }
 
 .rtl-footer {
     direction: rtl;
     text-align: right;
 }
 
 .contact-form {
     background: #fff;
     margin-top: 10%;
     margin-bottom: 5%;
     width: 70%;
     direction: rtl;
 }
 
 .contact-form .form-control {
     border-radius: 1rem;
 }
 
 .contact-image {
     text-align: center;
 }
 
 .contact-image img {
     border-radius: 6rem;
     width: 11%;
     margin-top: -3%;
     transform: rotate(29deg);
 }
 
 .contact-form form {
     padding: 14%;
 }
 
 .contact-form form .row {
     margin-bottom: -7%;
 }
 
 .contact-form h3 {
     margin-bottom: 8%;
     margin-top: -10%;
     text-align: center;
     color: #004279;
 }
 
 .contact-form .btnContact {
     width: 50%;
     border: none;
     border-radius: 1rem;
     padding: 1.5%;
     background: #004279;
     font-weight: 600;
     color: #fff;
     cursor: pointer;
 }
 
 .btnContactSubmit {
     width: 50%;
     border-radius: 1rem;
     padding: 1.5%;
     color: #fff;
     background-color: #0062cc;
     border: none;
     cursor: pointer;
 }
 
 .contact_us_box {
     line-height: 2rem;
 }
 
 .contact_us_box p {
     font-size: 16px;
     line-height: 25px;
     color: #888;
     font-weight: 600;
 }
 
 .contact_us_box .fa {
     margin-bottom: 26px;
     color: #004279;
 }
 
 footer {
     margin-top: 0;
 }
 /* Set all containers to 100% of the viewport height */
 
 #Header-Slider .carousel,
 #Header-Slider .carousel-inner,
 #Header-Slider .item,
 .carousel-inner .active {
     height: 95vh;
 }
 
 .pic1,
 .pic2,
 .pic3 {
     width: 100%;
     height: 100%;
     background-position: center;
     background-size: cover;
     background-repeat: no-repeat;
 }
 
 .pic1 {
     background-image: url(/assetsHomePage/images/carousels/3.png);
     box-shadow: inset 0 0 0 2119px rgb(57 57 57 / 10%);
 }
 
 .pic2 {
     background-image: url(/assetsHomePage/images/carousels/2.png);
     box-shadow: inset 0 0 0 2119px rgb(57 57 57 / 10%);
 }
 
 .pic3 {
     background-image: url(/assetsHomePage/images/carousels/1.png);
     box-shadow: inset 0 0 0 2119px rgb(57 57 57 / 10%);
 }
 
 #hero {
     width: 100%;
     overflow: hidden;
     position: relative;
     background: linear-gradient(0deg, #2a2c39 0%, #33364a 100%);
     padding: 0;
 }
 
 #hero .carousel-container {
     display: flex;
     justify-content: center;
     align-items: center;
     flex-direction: column;
     text-align: center;
     position: relative;
     height: 70vh;
     padding-top: 60px;
 }
 
 #hero h2 {
     color: #fff;
     margin-bottom: 30px;
     font-size: 48px;
     font-weight: 700;
 }
 
 #hero p {
     width: 80%;
     -webkit-animation-delay: 0.4s;
     animation-delay: 0.4s;
     margin: 0 auto 30px auto;
     color: #fff;
 }
 
 #hero .carousel-control-prev,
 #hero .carousel-control-next {
     width: 10%;
 }
 
 #hero .carousel-control-next-icon,
 #hero .carousel-control-prev-icon {
     background: none;
     font-size: 48px;
     line-height: 1;
     width: auto;
     height: auto;
 }
 
 #hero .btn-get-started {
     font-family: "Raleway", sans-serif;
     font-weight: 500;
     font-size: 14px;
     display: inline-block;
     padding: 12px 32px;
     border-radius: 50px;
     transition: 0.1s;
     line-height: 1;
     margin: 10px;
     color: #fff;
     -webkit-animation-delay: 0.8s;
     animation-delay: 0.8s;
     border: 2px solid #ef6603;
 }
 
 #hero .btn-get-started:hover {
     background: #ef6603;
     color: #fff;
     text-decoration: none;
 }
 
 .dimmed {
     position: relative;
 }
 
 .dimmed:after {
     content: " ";
     z-index: 10;
     display: block;
     position: absolute;
     height: 100%;
     top: 0;
     left: 0;
     right: 0;
     background: rgba(156, 154, 154, 0.5);
 }
 
 .carousel-caption h3,
 .carousel-caption p {
     color: #fff;
     font-weight: 800;
 }
 
 .carousel-caption {}
 
 .carousel-caption button {
     margin-top: 10px;
     color: #fff;
     background-color: #004279;
     border-color: #004279;
     font-weight: 800;
 }
 
 .carousel-caption button:hover {
     color: #fff;
     background-color: #02407a;
     border-color: #02407a;
     z-index: 999;
 }
 
 @media (min-width: 1024px) {
     #hero p {
         width: 60%;
     }
     #hero .carousel-control-prev,
     #hero .carousel-control-next {
         width: 5%;
     }
 }
 
 @media (max-width: 768px) {
     #hero .carousel-container {
         height: 90vh;
     }
     #hero h2 {
         font-size: 28px;
     }
 }
 
 .hero-waves {
     display: block;
     width: 100%;
     height: 60px;
     position: relative;
 }
 
 .wave1 use {
     -webkit-animation: move-forever1 10s linear infinite;
     animation: move-forever1 10s linear infinite;
     -webkit-animation-delay: -2s;
     animation-delay: -2s;
 }
 
 .wave2 use {
     -webkit-animation: move-forever2 8s linear infinite;
     animation: move-forever2 8s linear infinite;
     -webkit-animation-delay: -2s;
     animation-delay: -2s;
 }
 
 .wave3 use {
     -webkit-animation: move-forever3 6s linear infinite;
     animation: move-forever3 6s linear infinite;
     -webkit-animation-delay: -2s;
     animation-delay: -2s;
 }
 
 @-webkit-keyframes move-forever1 {
     0% {
         transform: translate(85px, 0%);
     }
     100% {
         transform: translate(-90px, 0%);
     }
 }
 
 @keyframes move-forever1 {
     0% {
         transform: translate(85px, 0%);
     }
     100% {
         transform: translate(-90px, 0%);
     }
 }
 
 @-webkit-keyframes move-forever2 {
     0% {
         transform: translate(-90px, 0%);
     }
     100% {
         transform: translate(85px, 0%);
     }
 }
 
 @keyframes move-forever2 {
     0% {
         transform: translate(-90px, 0%);
     }
     100% {
         transform: translate(85px, 0%);
     }
 }
 
 @-webkit-keyframes move-forever3 {
     0% {
         transform: translate(-90px, 0%);
     }
     100% {
         transform: translate(85px, 0%);
     }
 }
 
 @keyframes move-forever3 {
     0% {
         transform: translate(-90px, 0%);
     }
     100% {
         transform: translate(85px, 0%);
     }
 }
 
 @media only screen and (min-width: 240px) and (max-width:446px) {
     .header-area .logo {
         margin-left: 0 !important;
     }
     .welcome-area .header-text h1 {
         font-size: 32px !important;
     }
     .welcome-area .header-text p {
         font-size: 14px;
         line-height: 26px;
     }
     .mobile-bottom-fix {
         margin-top: 60px;
     }
     #promotion .right-text h4 {
         font-size: 16px;
         font-weight: 700;
     }
     .contact-form {
         width: 90%;
     }
     .contact-form form {
         padding: 5%;
     }
     .footer-section-custom {
         text-align: center;
     }
     .contact_us_box {
         margin-bottom: 40px;
     }
     #promotion {
         padding: 70px 0px;
     }
     .left-image-decor {
         margin-top: -253px;
     }
 }
 
 @media only screen and (min-width: 446px) and (max-width:767px) {
     .header-area .logo {
         margin-left: 0 !important;
     }
     .welcome-area .header-text h1 {
         font-size: 32px !important;
     }
     .welcome-area .header-text p {
         font-size: 14px;
         line-height: 26px;
     }
     .mobile-bottom-fix {
         margin-top: 60px;
     }
     #promotion .right-text h4 {
         font-size: 16px;
         font-weight: 700;
     }
     .contact-form {
         width: 90%;
     }
     .contact-form form {
         padding: 5%;
     }
     .footer-section-custom {
         text-align: center;
     }
     .contact_us_box {
         margin-bottom: 40px;
     }
     #promotion {
         padding: 70px 0px;
     }
     .left-image-decor {
         margin-top: -253px;
     }
     .welcome-area .header-text .left-text {
         margin-top: 5%;
         margin-bottom: 32px;
         transform: none !important;
     }
 }
 
 @media only screen and (min-width: 768px) and (max-width:1024px) {
     .welcome-area .header-text .left-text {
         margin-top: 12% !important;
         margin-bottom: 38px !important;
         transform: none !important;
     }
     .contact-form {
         padding-top: 80px !important;
     }
 }
 
 .registration-parent {
     height: 100vh;
     /* top: -70px; */
     position: relative;
 }
 /*
* LOGIN START CSS
*/
 /* BASIC */
 
 #formFooter a {
     color: #92badd;
     display: inline-block;
     text-decoration: none;
     font-weight: 400;
 }
 /* STRUCTURE */
 
 .wrapper {
     display: flex;
     align-items: center;
     flex-direction: column;
     justify-content: center;
     width: 100%;
     min-height: 100%;
     min-height: 100vh;
 }
 
 #formContent {
     -webkit-border-radius: 10px 10px 10px 10px;
     border-radius: 10px 10px 10px 10px;
     background: #fff;
     width: 90%;
     max-width: 450px;
     position: relative;
     padding: 0px;
     -webkit-box-shadow: 0 30px 60px 0 rgba(0, 0, 0, 0.3);
     box-shadow: 0 4px 22px 0 rgb(0 0 0 / 18%);
     text-align: center;
     padding-top: 70px;
 }
 
 #formFooter {
     background-color: #f6f6f6;
     border-top: 1px solid #dce8f1;
     padding: 25px;
     text-align: center;
     -webkit-border-radius: 0 0 10px 10px;
     border-radius: 0 0 10px 10px;
 }
 /* FORM TYPOGRAPHY*/
 
 #formContent input[type=button],
 #formContent input[type=submit],
 #formContent input[type=reset] {
     background-color: #00437a;
     border: none;
     color: white;
     padding: 15px 80px;
     text-align: center;
     text-decoration: none;
     display: inline-block;
     text-transform: uppercase;
     font-size: 13px;
     -webkit-box-shadow: 0 10px 30px 0 rgba(95, 186, 233, 0.4);
     box-shadow: 0 10px 30px 0 rgba(95, 186, 233, 0.4);
     -webkit-border-radius: 5px 5px 5px 5px;
     border-radius: 5px 5px 5px 5px;
     margin: 5px 20px 40px 20px;
     -webkit-transition: all 0.3s ease-in-out;
     -moz-transition: all 0.3s ease-in-out;
     -ms-transition: all 0.3s ease-in-out;
     -o-transition: all 0.3s ease-in-out;
     transition: all 0.3s ease-in-out;
 }
 
 #formContent input[type=button]:hover,
 #formContent input[type=submit]:hover,
 #formContent input[type=reset]:hover {
     background-color: #00437adb;
 }
 
 #formContent input[type=button]:active,
 #formContent input[type=submit]:active,
 #formContent input[type=reset]:active {
     -moz-transform: scale(0.95);
     -webkit-transform: scale(0.95);
     -o-transform: scale(0.95);
     -ms-transform: scale(0.95);
     transform: scale(0.95);
 }
 
 #formContent input[type=text],
 #formContent input[type=password] {
     background-color: #f6f6f6;
     border: none;
     color: #0d0d0d;
     padding: 15px 32px;
     text-align: center;
     text-decoration: none;
     display: inline-block;
     font-size: 16px;
     margin: 5px;
     width: 85%;
     border: 2px solid #f6f6f6;
     -webkit-transition: all 0.1s ease-in-out;
     -moz-transition: all 0.1s ease-in-out;
     -ms-transition: all 0.1s ease-in-out;
     -o-transition: all 0.1s ease-in-out;
     transition: all 0.1s ease-in-out;
     -webkit-border-radius: 5px 5px 5px 5px;
     border-radius: 5px 5px 5px 5px;
 }
 
 #formContent input[type=text]:focus,
 #formContent input[type=password]:focus {
     background-color: #fff;
     border-bottom: 2px solid #692767;
 }
 
 #formContent input[type=text]:placeholder,
 #formContent input[type=password]:placeholder {
     color: #cccccc;
 }
 /* ANIMATIONS */
 /* Simple CSS3 Fade-in-down Animation */
 
 .fadeInDown {
     -webkit-animation-name: fadeInDown;
     animation-name: fadeInDown;
     -webkit-animation-duration: 0.1s;
     animation-duration: 0.1s;
     -webkit-animation-fill-mode: both;
     animation-fill-mode: both;
 }
 
 @-webkit-keyframes fadeInDown {
     0% {
         opacity: 0;
         -webkit-transform: translate3d(0, -100%, 0);
         transform: translate3d(0, -100%, 0);
     }
     100% {
         opacity: 1;
         -webkit-transform: none;
         transform: none;
     }
 }
 
 @keyframes fadeInDown {
     0% {
         opacity: 0;
         -webkit-transform: translate3d(0, -100%, 0);
         transform: translate3d(0, -100%, 0);
     }
     100% {
         opacity: 1;
         -webkit-transform: none;
         transform: none;
     }
 }
 /* Simple CSS3 Fade-in Animation */
 
 @-webkit-keyframes fadeIn {
     from {
         opacity: 0;
     }
     to {
         opacity: 1;
     }
 }
 
 @-moz-keyframes fadeIn {
     from {
         opacity: 0;
     }
     to {
         opacity: 1;
     }
 }
 
 @keyframes fadeIn {
     from {
         opacity: 0;
     }
     to {
         opacity: 1;
     }
 }
 
 .fadeIn {
     opacity: 0;
     -webkit-animation: fadeIn ease-in 1;
     -moz-animation: fadeIn ease-in 1;
     animation: fadeIn ease-in 1;
     -webkit-animation-fill-mode: forwards;
     -moz-animation-fill-mode: forwards;
     animation-fill-mode: forwards;
     -webkit-animation-duration: 0.1s;
     -moz-animation-duration: 0.1s;
     animation-duration: 0.1s;
 }
 
 .fadeIn.first {
     -webkit-animation-delay: 0.4s;
     -moz-animation-delay: 0.4s;
     animation-delay: 0.4s;
 }
 
 .fadeIn.second {
     -webkit-animation-delay: 0.6s;
     -moz-animation-delay: 0.6s;
     animation-delay: 0.6s;
 }
 
 .fadeIn.third {
     -webkit-animation-delay: 0.8s;
     -moz-animation-delay: 0.8s;
     animation-delay: 0.8s;
 }
 
 .fadeIn.fourth {
     -webkit-animation-delay: 0.1s;
     -moz-animation-delay: 0.1s;
     animation-delay: 0.1s;
 }
 /* Simple CSS3 Fade-in Animation */
 
 .underlineHover:after {
     display: block;
     left: 0;
     bottom: -10px;
     width: 0;
     height: 2px;
     background-color: #00437a;
     content: "";
     transition: width 0.1s;
 }
 
 .underlineHover:hover {
     color: #0d0d0d;
 }
 
 .underlineHover:hover:after {
     width: 100%;
 }
 /* OTHERS */
 
 *:focus {
     outline: none;
 }
 
 #icon {
     width: 60%;
 }
 /*
*media query
*/
 
 @media only screen and (max-width: 1024px) {
     #survey-form {
         width: 60vw;
     }
 }
 /*
* LOGIN END CSS
*/
 /*
*Tables
*/
 
 .tabl-thead-custom {
     background: #004279;
     color: white;
 }
 
 .system-table-tr:hover {
     background: #f9a143;
 }
 
 .system-table-tr-odd {
     background: #f9e1baa6;
 }
 
 .system-table-tr-event {
     background: #ffe3fe75;
 }
 
 .panel {
     border-radius: 16px;
 }
 
 .table-info .table-tr-info .title {
     width: 23%;
     font-size: 16px;
     font-weight: 600;
 }
 
 .table-info .table-tr-info .value {
     width: 77%;
     font-size: 16px;
     font-weight: 600;
     color: #fe5a02;
 }
 /*
*My EDITOR
*/
 
 .editor {
     box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
     border: solid #00000047 1px;
     border-radius: 5px;
     padding: 10px;
 }
 
 .menubar__button {
     font-weight: 700;
     display: -webkit-inline-box;
     display: -ms-inline-flexbox;
     display: inline-flex;
     background: rgba(0, 0, 0, 0);
     border: 0;
     padding: .2rem .5rem;
     margin-right: .2rem;
     border-radius: 3px;
     cursor: pointer;
     color: #4a4844 !important;
     border-color: #ccc;
     width: 45px;
     height: 45px;
     text-align: center;
 }
 
 .menubar__button:hover {
     border: solid #00000047 1px;
     background-color: #00000014;
 }
 
 .editor__content {
     padding: 20px;
 }
 
 .menubar {
     padding: 5px 20px;
     border-bottom: solid #00000014 1px;
     background-color: #cec6bd88;
 }
 
 .editor__content table {
     border-collapse: collapse;
     table-layout: fixed;
     width: 100%;
     margin: 0;
     overflow: hidden;
 }
 
 .editor__content table td,
 .editor__content table th {
     min-width: 1em;
     border: 2px solid #ddd;
     padding: 3px 5px;
     vertical-align: top;
     -webkit-box-sizing: border-box;
     box-sizing: border-box;
     position: relative;
 }
 
 .table_options {
     font-size: 10px;
 }
 
 hr {
     border-top: solid #00000047 1px;
 }
 
 strong {
     font-weight: bold;
 }
 
 .editor__content {
     padding: 20px;
     border: 1px solid #004279;
     margin-bottom: 10px;
 }
 
 .panel-custom {
     direction: rtl;
 }
 
 .padding-LR {
     padding-left: 16px;
     padding-right: 16px;
 }
 
 .pagination-custom a {
     color: white !important;
 }
 
 .pagination-custom .pagination {
     margin: 0 !important;
     justify-content: center;
     padding: 0;
 }
 
 .pagination-custom .btn-custom {
     background: #652463;
     color: white;
     border-radius: 0px;
 }
 
 .pagination-custom .nav-container {
     margin-top: 20px;
     margin-bottom: 20px;
 }
 
 .pagination-custom .pagination a {
     margin: 1px;
 }
 
 .pagination-custom .btn-disabled {
     color: #ffffff;
     cursor: not-allowed;
     opacity: 0.5;
     text-decoration: none;
 }
 
 .pagination-custom .btn-custom:hover {
     background: #963692dd;
     color: white !important;
     border-radius: 0px;
 }
 
 .pagination-custom .is-current {
     background: #963692dd;
     color: white !important;
     border-radius: 0px;
 }
 
 .pagination-custom .btn {
     text-transform: none !important;
 }
 
 @media only screen and (min-width: 1520px) {
     .show-map-big {
         display: block;
     }
     .show-map-small {
         display: none;
     }
     .show-map-smallest {
         display: none;
     }
 }
 
 @media only screen and (max-width: 1520px) {
     .show-map-big {
         display: none;
     }
     .show-map-small {
         display: block;
     }
     .show-map-smallest {
         display: none;
     }
 }
 
 @media only screen and (max-width: 425px) {
     .show-map-big {
         display: none;
     }
     .show-map-small {
         display: none;
     }
     .show-map-smallest {
         display: block;
     }
 }
 
 #main-details {
     direction: rtl;
     padding-left: 60px;
     padding-right: 60px;
 }
 
 #main-details .title {
     width: 45%;
     font-size: 17px;
     font-weight: 700;
 }
 
 #main-details .value {
     width: 55%;
     font-size: 17px;
 }
 
 .invalid-feedback {
     color: #ff0020;
 }
 
 .invalid-border {
     border-bottom: 1px solid #ff0020 !important;
 }
 
 .registration-parent,
 .login-section {
     visibility: visible;
     animation-name: fadeIn;
     background: url(../images/shohny_background_abstract.webp) center top no-repeat fixed;
     background-size: cover;
     padding: 60px 0;
     height: 100%;
     box-shadow: inset 0 0 0 1000px rgb(125 123 123 / 40%);
     visibility: visible;
     animation-name: fadeIn;
     /* background-image: linear-gradient(to bottom, rgb(252 91 2), rgb(103 37 101 / 20%)); */
     background-size: cover;
     height: 100%;
     box-shadow: inset 0 0 0 1000px rgba(125, 123, 123, 0.4);
 }
 
 .main-content {
     padding-top: 60px;
 }
 
 .swal2-modal {
     width: 500px !important;
     height: 300px !important;
 }
 
 .swal2-content {
     font-size: 16px !important;
     font-weight: 600 !important;
 }
 
 .swal2-actions button {
     width: 150px !important;
     font-size: 16px !important;
     height: 38px !important;
     font-weight: 600 !important;
 }
 
 .table-title {
     font-size: 16px;
     font-weight: 600;
     background: #f8a84e85;
     padding: 6px 0px;
 }
 
 .table-footer {
     padding: 0px 10px 10px 0px;
 }
 
 .table-footer a {
     color: #004279 !important;
 }
 
 .background-header .logo,
 .background-header .main-nav .nav li a {
     color: #02407a !important;
 }
 
 .section-mobile {
     display: none;
 }
 
 .section-web {
     display: block;
 }
 
 @media screen and (max-width: 1024px) {
     #about {
         background: url(../images/about-bg-2.png) center center no-repeat fixed !important;
         background-size: contain !important;
     }
     .section-mobile {
         display: flex !important;
         margin-top: 75px;
     }
     .welcome-area {
         height: 235px !important;
         max-height: 10px;
         min-height: 316px;
     }
     .section-mobile h1 {
         font-size: 16px !important;
         margin-top: 26px !important;
         margin-bottom: 26px !important;
     }
     .section-mobile p {
         font-size: 17px !important;
         margin-bottom: 17px !important;
     }
     .section-mobile .row {
         margin-top: 80px !important;
     }
     .section-mobile a {
         font-size: 9px !important;
         padding: 6px 12px !important;
     }
     .section-web {
         display: none !important;
     }
     .welcome-area {
         background-image: unset !important;
     }
     .pic1 {
         background-image: url(/assetsHomePage/images/carousels/3_600_246.png);
         box-shadow: inset 0 0 0 2119px rgb(57 57 57 / 10%);
     }
     .pic2 {
         background-image: url(/assetsHomePage/images/carousels/2_600_246.png);
         box-shadow: inset 0 0 0 2119px rgb(57 57 57 / 10%);
     }
     .pic3 {
         background-image: url(/assetsHomePage/images/carousels/1_600_246.png);
         box-shadow: inset 0 0 0 2119px rgb(57 57 57 / 10%);
     }
     .pic1,
     .pic2,
     .pic3 {
         background-size: contain !important;
     }
     #Header-Slider .carousel,
     #Header-Slider .carousel-inner,
     #Header-Slider .item,
     .carousel-inner .active {
         height: 51vh !important;
         margin-top: 29px !important;
     }
     .carousel-caption h1 {
         font-size: 13px !important;
     }
     .carousel-caption {
         bottom: 42px !important;
     }
     #hero {
         display: none !important;
     }
     .welcome-area {
         background-position: center top;
         background-size: 50% auto !important;
     }
     .pic1 button,
     .pic2 button,
     .pic3 button {
         width: 85px;
         font-size: 8px;
         font-weight: 500;
         border-radius: 16px;
     }
     .welcome-area {
         background-position: center top;
         background-size: 100% auto !important;
     }
     .welcome-area .header-text {
         width: 100% !important;
     }
 }
 
 @media screen and (max-width: 1024px) {
     #Header-Slider .carousel,
     #Header-Slider .carousel-inner,
     #Header-Slider .item,
     .carousel-inner .active {
         height: 49vh !important;
         margin-top: 29px !important;
     }
 }
 
 @media screen and (max-width: 912px) {
     #Header-Slider .carousel,
     #Header-Slider .carousel-inner,
     #Header-Slider .item,
     .carousel-inner .active {
         height: 45vh !important;
         margin-top: 29px !important;
     }
 }
 
 @media screen and (max-width: 820px) {
     #Header-Slider .carousel,
     #Header-Slider .carousel-inner,
     #Header-Slider .item,
     .carousel-inner .active {
         height: 46vh !important;
         margin-top: 29px !important;
     }
 }
 
 @media screen and (max-width: 430px) {
     #Header-Slider .carousel,
     #Header-Slider .carousel-inner,
     #Header-Slider .item,
     .carousel-inner .active {
         height: 35vh !important;
         margin-top: 29px !important;
     }
     .registration-parent,
     .login-section {
         background: url(../images/reg_bg_phone.png) center top no-repeat fixed;
         background-size: cover;
     }
 }
 
 @media screen and (max-width: 414px) {
     #Header-Slider .carousel,
     #Header-Slider .carousel-inner,
     #Header-Slider .item,
     .carousel-inner .active {
         height: 33vh !important;
         margin-top: 29px !important;
     }
 }
 
 @media screen and (max-width: 375px) {
     #Header-Slider .carousel,
     #Header-Slider .carousel-inner,
     #Header-Slider .item,
     .carousel-inner .active {
         height: 42vh !important;
         margin-top: 29px !important;
     }
 }
 
 @media screen and (max-width: 360px) {
     #Header-Slider .carousel,
     #Header-Slider .carousel-inner,
     #Header-Slider .item,
     .carousel-inner .active {
         height: 37vh !important;
         margin-top: 29px !important;
     }
 }
 
 @media screen and (max-width: 344px) {
     #Header-Slider .carousel,
     #Header-Slider .carousel-inner,
     #Header-Slider .item,
     .carousel-inner .active {
         height: 30vh !important;
         margin-top: 29px !important;
     }
 }
 
 .sides-pd {
     padding-left: 2px !important;
     padding-right: 2px !important;
 }