/* fonts */
/* @import url('https://fonts.googleapis.com/css2?family=Almarai&family=Cairo&display=swap'); */
@import "./fonts.css";

/* html, body{ direction: rtl; text-align: right; font-family: 'Almarai'; color: #010000; background-color: #f1d7de; min-height: 100%; line-height: 1.6; scroll-behavior: smooth;} */
html, body{ direction: rtl; text-align: center; font-family: 'JFFlat-Regular'; color: #010000; min-height: 100%; line-height: 1.4; scroll-behavior: smooth;}
img{max-width: 100%;}
a{color: #fff;}
a:hover{text-decoration:none}
h3.section-title{padding:2rem;margin-bottom: 1rem; text-align: center;}
h3.section-title small{display: block; font-size: 25px; font-weight: normal; line-height: 50px;color: #35B557;}
h3.section-title span{display: block; font-weight: bold;font-size: 50px; line-height: 50px;color: #B80735;}
.container-sm{max-width: 500px;}
.underline{text-decoration-color:#B80735 ;text-decoration-line: none;text-decoration-thickness: 4px;}

/* animation */
.animations{animation: skew 2s infinite; transform: skew(3deg); animation-direction: alternate;}
.animations{animation: skew 2s infinite; transform: skew(3deg); animation-direction: alternate;}
@keyframes skew {0% {transform: skew(3deg, 3deg);} 100% {transform: skew(-3deg, -3deg);}}

/* custom scrollbar */
::-webkit-scrollbar {width:5px;}
::-webkit-scrollbar-thumb {background-color: #B80735; border-radius:5px;height:120px;}  /* Handle */
::-webkit-scrollbar-track {background:#33b455;background-color: #b3cdbaf7;}  /* Track */
::-webkit-scrollbar-thumb:hover{background-color: #33b455;} /* Handle on hover */
::selection { background: #e69897;} /* selected element */

 /* input */
button, input, optgroup, select, textarea {border-radius: 12px !important;}
input[type=radio] {display: none !important;border:0; background: #d5e3e3; border-radius: 50%;height: 10px;width: 10px;appearance: none; -webkit-appearance: none; cursor: pointer}
input[type=radio]:checked {box-shadow: inset 0 0 10px 20px #33b455}

input[type=checkbox] {border:0; background: #d5e3e3; border-radius: 50%;height: 16px;width: 16px;appearance: none; -webkit-appearance: none; cursor: pointer;}
input[type=checkbox]:checked {box-shadow: inset 0 0 0 20px #33b455;}

/* quantity, button-plus and button-minus */
input{border:1px solid #74927c00;box-sizing:border-box;margin:0;outline:none;padding:10px}
input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none}
.input-group .button-minus,.input-group .button-plus{font-weight:700;height:38px;padding:0;width:38px;position:relative}
.input-group .quantity-field{position:relative;height:38px;left:-6px;text-align:center;width:62px;display:inline-block;font-size:13px;margin:0 0 5px;resize:vertical}
.button-plus{left:-13px}

/* btn */
.btn{border-radius: 100px; border: none; font-size: 0.9rem;border-width: 2px;box-shadow: 0px 0px 24px 0px rgba(39, 74, 49, 0.36);padding:0.3rem 1rem;transition: .4s ease-out}
.btn-info{color: #fff !important;background-color: #B80735;border-color: #B80735;}
.btn-info:hover{background-color: #33b455;color: #33b455;box-shadow:none;}
.btn-primary{background-color: #B80735;border-color: #B80735;}
.btn-primary:hover{background-color: #fff;color: #B80735;box-shadow:none;}
.btn-outline-primary{color:#B80735 !important; background-color: #fff;border: 1px solid #B80735;}
.btn-outline-primary:hover{color: #fff !important;background-color: #B80735;box-shadow:none;border-color: #B80735 !important}
.custom-control{padding-left: 0; padding-right: 1.5rem; margin-bottom: 3rem;}
.custom-control-label::after{left: inherit; right: -1.5rem;}
.custom-control-label::before{left: inherit; right: -1.5rem;}
.form-control{margin-bottom: 2rem;}

/* navbar */
.navbar {padding: .5rem 0.3rem}
.navbar .logo {width:140px}
.navbar .navbar-nav .nav-link {color: #B80735; font-size: 1rem; position: relative; font-weight: bold;}
.navbar .navbar-nav .nav-link::after {position: absolute; bottom: 0; left: 0; right: 0; margin: auto; background-color: #B80735; color: transparent; width: 0%; content: '.'; height: 2px; transition: all 0.3s;}
.navbar .navbar-nav .nav-link:hover {font-weight: bold;-webkit-text-decoration: none;text-decoration: none;}
/* .navbar .navbar-nav .nav-link::after {position: absolute; bottom: 0; left: 0; right: 0; margin: auto; background-color: #B80735; color: transparent; width: 0%; content: '.'; height: 2px; transition: all 0.3s;} */
/* .navbar .navbar-nav .nav-link:hover::after {width: 100%;} */

/* Header */
#header{margin:.5rem;border: none;display: flex; justify-content: space-between; padding:0.1rem 0; position: fixed; top: 0; z-index: 9; width: 100%;}
#header .container{-webkit-transition: all 0.3s;transition: all 0.3s; padding-right: 10px; padding-left: 10px;}
#header.scrolled .container{background-color: #fff; border-radius: 40px; box-shadow: 0px 4px 50px 0px rgba(39, 74, 49, 0.34);}
#header a{display: inline-block; margin-left: 0.2rem; margin-right: 0.2rem; font-family: JFFlat-Regular; color: #B80735}
.header-transparent{background-color:transparent;position:absolute;right:0;top:0;width:100%;z-index:9}
#header ul{list-style: none; padding: 0; display: flex; align-items: center;}
#header li{display: inline;}

/* Banners */
#banners .carousel-inner{height:100%;width:100%;background-position:center center;background-size:cover;}
#banners .carousel-item{ padding: 22%; background-repeat: no-repeat; background-size: cover; background-position: center; color: #473617;max-width: 100%;height: auto;}
#banners .carousel-item h2{font-size: 62px; font-weight: bold; color: #000;}
#banners .carousel-item .wrapper{margin-right: 40%;}

/* tickets */
section.tickets{padding: 2rem 0; margin-top: 3%; color:#33b455;}
section.tickets .wrapper{text-align: center;color: #fff;border-radius: 1rem; position: relative;box-shadow: 0 8px 6px -6px #5b7875;background-color: #33b455;background-image: url('/images/bg-ticket.png')}
section.tickets h4{font-size: 22px; font-weight: bold; margin-top: 10%;}
section.tickets .step{padding-right: 5rem}
section.tickets .number{background-color: #fff; color: #B80735; display: inline-block;width: 64px; height: 64px; border-radius: 50%; text-align: center;z-index:0}
section.tickets .number i{font-size: 2rem;margin-top:1rem;text-align: center;}
section.tickets .star{ padding: 2rem;}
section.tickets .star h6{color:#fff;margin-top: 10px;text-align: right;}
section.tickets .star .progress{color:#B80735 !important;margin-top: 20px;height:8px;}
section.tickets .star .rating{unicode-bidi:bidi-override;color:#B80735;font-size: 1.5rem;text-align:right;}
section.tickets .star .rating > span{display:inline-block;position:relative;width:1.5rem}
section.tickets .star .rating > span:before,.rating > span:hover ~ span:before{content:"\2605";position:absolute}

/* departments */
section.departments{padding: 2rem 0; background-color: #EBF6EE; }
section.departments h3{color: #33b455;}
section.departments p{color: #33b455;font-size: larger;text-align: center;}
#departments .carousel-inner{height:100%;width:100%;background-position:center center;background-size:cover;border-radius:1rem;box-shadow: 0 30px 60px 0 #1b1f0a14;transition: all 0.4s;}
#departments .carousel-item{ padding: 22%; background-repeat: no-repeat; background-size: cover; background-position: center; color: #473617;max-width: 100%;height: auto;}
#departments .carousel-item h2{top: 50px !important;; font-size: 32px; font-weight: bold; color: #ffffff;margin:-204px -442px 0 0;background-color: #33b455;text-align: right;}
#departments .carousel-item .title{position:absolute;margin:1rem;line-height:1.5;font-size:1rem;font-weight:400;color:#fff;background-color:#33b455cc;top:2rem;right:2rem;border-radius:10px;padding:1rem;}

/* about */
section.about{padding: 2rem 0;background: linear-gradient(rgba(136, 180, 78, .1), rgba(136, 180, 78, .1));background-size: auto;}
section.about h3{color: #33b455;}
section.about p{color: #4E4E4E;font-size: larger;text-align: center;line-height: 200%;}
section.about .map{height: 30rem;position: relative;border-radius: 2rem;}
section.about .map iframe{height: 100%;width: 100%;border-radius: 1rem;box-shadow: 0 30px 60px 0 #1b1f0a14}

/* Footer */
#footer{padding: 2rem 0;background: #B80735;color: #fff; font-size: 18px;border-radius:none}
#footer a, #footer p{color: #fff;}
#footer h3{font-size: 18px; }
#footer .icon{background-color: #fff; color: #B80735; display: inline-block; width: 64px; height: 64px; border-radius: 50%; font-size: 30px; text-align: center; line-height: 2;}
#footer .line{border-top: 1px solid #fff; margin-top: 1rem; padding-top: 1rem;}
#footer .list-inline{text-align: center;}
#footer .list-inline-item{font-size: 14px;padding: 0;margin: 1%;}
#footer .list-inline-item a:hover, active{font-weight: bold;-webkit-text-decoration: none;text-decoration: none;}
#footer .copyright{font-size: 14px; text-align: center; margin-top: 5px;}
#footer .social{text-align:center; margin-right: auto; margin-top: 5px;}
#footer .social a{background-color: #fff; width: 4%; font-size: 14px; color: #B80735; display: inline-block;  border-radius: 50%; text-align: center; padding: .7rem}
#footer .social a:hover{color:#33b455;}

/* checkout-page */
.checkout-page main{ margin-top:7rem;margin-bottom: 7rem;}
.checkout-page main .wrapper{background: #EBF6EE; border-radius: 20px; border: 2px solid #b4cfbb; color:#3e3d3d; max-width: 830px; margin: auto; overflow: hidden; box-shadow: 0px 4px 50px 0px rgba(39, 74, 49, 0.34);}
.checkout-page main .wrapper img{background: linear-gradient(hsla(137, 93%, 11%, 0), #ebf6ee00);}
.checkout-page main .wrapper .price{font-size: 2rem; color: #B80735; padding:2%;}
.checkout-page main .wrapper .description{letter-spacing:.03rem; line-height:2; font-weight:normal;font-size: 1rem; color: #495057;}
.checkout-page main p{padding: 3rem; text-align:justify; line-height: 1.3; font-size: 18px;}
.checkout-page main .wrapper img:before {content: ""; position: absolute; inset: 0; background: rgba(255, 255, 255, 0.5); border-radius: 15px;transform: rotate(12deg);}
.checkout-page main .payment-methods{margin: 2rem 0;}
.checkout-page main .payment-icons .radio{padding: 8px;}
.checkout-page main .payment-icons img{border-radius: 10px; margin-right:.05rem; margin-left:1rem; border: 1px solid #c1dac8;}
.checkout-page main .payment-icons .radio:checked + label img{border: 2px solid #c4eacf; transform: scale(1.2);}
.content-card{width:auto;height:60px;background:#fff; border-radius:20px;border:1px solid #ced4da;padding: 1rem;}

/* rating */
.rating{width:300px;margin:0 auto;font-size:45px;overflow:hidden;text-align:center;}
.rating input{float:right;opacity:0;position:absolute}
.rating label{float:center;color:#aaa;text-decoration:none;-webkit-transition:color .4s;-moz-transition:color .4s;-o-transition:color .4s;transition:color .4s}
.rating label:hover ~ label,.rating input:focus ~ label,.rating input:checked~label,.rating label:hover{color:orange;cursor:pointer}
.rating2{direction:rtl}
.rating2 a{float:none}

/* article-page */
.article-page main{ margin-bottom: 10rem;}
.article-page main .wrapper{background-color: #fff;box-shadow: 0px 0px 24px rgba(0, 0, 0, 0.25); border-radius: 12px; padding: 3rem; margin-top: -90px;}
.article-page main .wrapper img{border-radius: 15px;}
.article-page main .wrapper .article{padding: 2rem; text-align:justify; line-height: 1.7; font-size: 18px; color: #282828}

/* modal */
.modal .modal-dialog .modal-content {border-radius: 12px; box-shadow: 0px 0px 24px rgba(0, 0, 0, 0.25); -webkit-box-shadow: 0px 0px 24px rgba(0, 0, 0, 0.25);}
.modal .modal-dialog .modal-content .modal-header{justify-content: center; color: #fff; background-color: #33b455;}
.modal .modal-dialog .modal-content .modal-footer{justify-content: center;}

/* google translate */
#google_translate_element{border:none;position:relative}
.goog-te-gadget{text-transform:uppercase}
.goog-te-gadget-simple .goog-te-menu-value span{display:none}
.goog-te-gadget-simple{display:inline!important;background-color:#fff0!important;border:none!important;padding:0!important;border-radius:4px!important;font-size:1rem!important;line-height:0!important;display:inline-block;cursor:pointer;zoom:1;}
.goog-te-menu2{max-width:100%}
.goog-te-menu-value{color:rgba(0,0,0,.5)!important}
.goog-te-menu-value:before{font-family:'Material Icons';content:"";display:inline-block;margin-right:16px;font-size:18px;vertical-align:-14px}
.goog-te-menu-value span:nth-child(5){display:none}
.goog-te-menu-value span:nth-child(3){border:none;font-family:'Material Icons'}
.goog-te-menu-value span:nth-child(3):after{font-family:'Material Icons';content:"";font-size:1.5rem;vertical-align:-6px;position:absolute;display:inline-block;left:-3px;top:0}
.goog-te-gadget-icon{background-image:url(https://placehold.it/32);background-position:0 0;height:32px;width:32px;margin-right:8px;display:none}
.goog-te-banner-frame.skiptranslate{display:none!important}

/* Large Devices, Wide Screens */
@media screen and (max-width: 1440px){

}
@media screen and (max-width: 1024px) {}

/* Medium Devices, Desktops */
@media screen and (max-width: 991px){
    .navbar .logo {width:100px}
    #header a {font-size: x-small;}
    section.intro-banner{background: linear-gradient(261.46deg, #33b455 30.5%, rgba(30, 166, 154, 0) 103.56%);}
    section.intro-banner{text-align: center;}
}
/* Small Devices, Tablets */
@media screen and (max-width: 768px){
    .navbar .logo {width:100px}
    .btn{vertical-align: text-top;}
    h3.section-title {padding: 1rem;font-size:x-large;}
    h3.section-title small {font-size: medium;}
    h3.section-title span{font-size: xx-large;}
    #header{padding-left:15px; border-radius:5vw; top: initial; bottom: 0;}
    #header .container { background-color: #fff; border-radius: 40px; box-shadow: 0px 4px 50px 0px rgba(39, 74, 49, 0.34); }
    #header ul{align-items: start;}
    section.tickets .number{text-align: center; margin-bottom: 0px;}
    section.tickets h4{margin-bottom: 40px;}
    section.departments {padding: .5rem 0;}
    section.departments article{max-width: 300px; margin: auto; margin-bottom: 10%;}
    #departments .carousel-item h2{font-size: 22px;}
    #departments .carousel-item h2{font-size: 20px;top:30px;margin:-60px -60px 0 0;}
    #departments .carousel-item .title{margin:.5rem;line-height:1;font-size:.7rem;top:.5rem;right:.5rem;padding:.5rem;}
    .checkout-page main{margin-top: 3rem; margin-bottom: 3rem;}
    section.about{padding: 1rem 0;}
    section.about .map {height:10rem;}
    section.about p {font-size: medium}
    #footer{padding-bottom: 88px;}
    #footer .icon{width: 44px;height: 44px;font-size: larger;}
    #footer .social a{width: 10%;}
    .article-page main .wrapper .article{padding: 1rem; text-align:right; font-size: 16px;}
}
/* Extra Small Devices, Phones */
@media screen and (max-width: 480px){
    section.intro-banner .wrapper{background-image: none!important;}
    .checkout-page main{margin-top: 3rem; margin-bottom: 3rem;}
    #footer img{display : none!important;}
    #footer, #footer .social{text-align: center;}
    #footer .social a{width: 10%;}
}