/*
Theme Name: Avilon
Theme URL: https://bootstrapmade.com/avilon-bootstrap-landing-page-template/
Author: BootstrapMade.com
License: https://bootstrapmade.com/license/
*/

/*--------------------------------------------------------------
# General
--------------------------------------------------------------*/

@font-face {
font-family: "myArabicFont";
src: url("./HelveticaNeueLTArabic_Light.ttf") format("truetype");
}

@font-face {
font-family: "myArabicFont";
src: url("./HelveticaNeueLTArabic_Bold.ttf") format("truetype");
font-weight: bold;
}

body,
html {
overflow-x: hidden;
}

body {
background: #fff;
color: #666666;
font-family: "myArabicFont", "Open Sans", sans-serif;
/* overflow-x: hidden; */
}


a {
color: rgb(34, 141, 255);
transition: 0.5s;
}

a:hover,
a:active,
a:focus {
outline: none;
text-decoration: none;
}

p {
padding: 0;
margin: 0 0 30px 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
font-family: "Montserrat", sans-serif;
font-weight: 400;
margin: 0 0 20px 0;
padding: 0;
}

.template_ar, .arabic {
font-family: "myArabicFont", sans-serif;
direction: rtl;
}

.template_en, .english {
font-family: "Montserrat", sans-serif;
direction: ltr;
}

h1.arabic,
h2.arabic,
h3.arabic,
h4.arabic,
h5.arabic,
h6.arabic {
font-family: "myArabicFont", sans-serif;
font-weight: 400;
margin: 0 0 20px 0;
padding: 0;
}

/* Back to top button */

.back-to-top {
position: fixed;
display: none;
background: white;
color: #ccc;
font-size: 28px;
border-radius: 50%;
right: 15px;
bottom: 15px;
transition: 0.5s;
width: 53px;
height: 45px;
text-align: center;
border: 1px solid #f5f5f5;
padding-bottom: 50px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2)
}

.back-to-top:hover {
color: #FAA61F;
}





/*--------------------------------------------------------------
# Loading
--------------------------------------------------------------*/

#loading {
width: 120px;
height: 120px;
position: fixed;
top: 50%;
left: 50%;
background-color: rgba(255, 255, 255, 0.79);
border-radius: 50%;
z-index: 5555;
margin-left: -60px;
}

#loading .loader {
/* border: 5px solid #1877F2; */
border-radius: 50%;
border-top: 2px solid #FAA61F;
border-bottom: 2px solid #FAA61F;
/*
-webkit-box-shadow: inset 0px 0px 12px 0px rgba(29, 200, 205, 0.54);
-moz-box-shadow: inset 0px 0px 12px 0px rgba(29, 200, 205, 0.54);
box-shadow: inset 0px 0px 12px 0px rgba(29, 200, 205, 0.54);
-webkit-animation: spin 2s linear infinite;
*/
width: 100px;
height: 100px;
margin-top: 10px;
/* Safari */
animation: spin 1s linear infinite;
margin-left: auto;
margin-right: auto;
}


/*--------------------------------------------------------------
# Header
--------------------------------------------------------------*/


.pageTitle {
font-size: 70px;
color: #999;
font-weight: 500;
transition: all ease-in-out 0.5s;
}


#header {
padding: 30px 0;
height: 92px;
position: fixed;
left: 0;
top: 0;
right: 0;
transition: all ease-in-out 0.5s;
z-index: 997;
}


.comingSoon {
font-weight: 300;
padding: 0 16px;
}

#header #logo {
float: left;
text-align: center;
}

#header #logo h1 {
font-size: 30px;
margin: -4px 0 0 0;
padding: 0;
line-height: 1;
display: inline-block;
font-family: "Montserrat", sans-serif;
font-weight: 500;
text-transform: uppercase;
}

#header #logo h1.arabic {
font-size: 36px;
margin: -4px 0 0 0;
padding: 0;
line-height: 1;
display: inline-block;
font-family: "myArabicFont", sans-serif;
font-weight: 500;
letter-spacing: 3px;
text-transform: uppercase;
}

#header #logo h1 div,
#header #logo h1 div:hover {
color: white;
float: left;
display: flex;
height: 92px;
align-items: center;
justify-content: center;
transition: all ease-in-out 0.5s;

}


#header #logo h1 a.arabic,
#header #logo h1 a.arabic:hover {
color: #fff;
font-family: "myArabicFont", sans-serif;
}


#header #logo img {
padding: 0;
margin: 5px 10px 0 0;
width: 75px;
/* height: 90px; */
transition: all ease-in-out 0.5s;
float: left;
}


#action_wrapper {
width: 220px;
float: right;
margin-left: auto;
margin-bottom: 5px;
text-align: center;
transition: all ease-in-out 0.5s;
display: flex;
height: 92px;
align-items: center;
justify-content: center;
margin-top: -33px;
}

/*.action_button {*/
/* float: left;*/
/* border: 1px solid #1877F2;*/
/* border-radius: 20px;*/
/* width: 100px;*/
/* !*height: 30px;*!*/
/* cursor: pointer;*/
/* margin: 5px;*/
/* color: #1877F2;*/
/* transition: all ease-in-out 0.5s;*/
/*}*/


/*.action_button:hover {*/

/* border: 1px solid #1877F2;*/
/* background-color: #1877F2;*/
/* color: #fff;*/

/*}*/

#header.header-fixed #logo {
margin-top: -30px;
}


#header.header-fixed {
background: white;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1), 0 6px 20px 0 rgba(0, 0, 0, 0.1);
margin-top: 0;
transition: all ease-in-out 0.5s;
}


/*--------------------------------------------------------------
# Intro Section
--------------------------------------------------------------*/

#intro {
width: 100%;
/*height: 100vh;*/
/* background: linear-gradient(0deg, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.95)); */
/*background: linear-gradient(rgba(29, 200, 205, 0.65), rgba(29, 205, 89, 0.2)), url(../img/call-to-action-bg.jpg) fixed
center center;*/
background-size: cover;
/* padding-top: 80px; */
padding-bottom: 0;
position: relative;
min-height: 850px;
height: 100%;
overflow: hidden;


}

#intro .intro-text {
margin-top: 200px;
text-align: center;
/* vertical-align: top;*/
transition: all ease-in-out 0.5s;
}


#intro h2 {
margin: 30px 0 10px 0;
padding: 0 15px;
font-size: 48px;
font-weight: 400;
line-height: 56px;
color: #fff;
font-family: "Montserrat", sans-serif;
}


#intro h1 {
color: #999;
}


@media (max-width: 768px) {
#intro h2 {
font-size: 28px;
line-height: 36px;
}
}

#intro p {
color: #08afed;
margin-bottom: 20px;
padding: 0 15px;
font-size: 24px;
background: linear-gradient(90deg, #b133a7, #08afed);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
display: inline-block;
font-family: "Montserrat", sans-serif;
}


@media (max-width: 768px) {
#intro p {
font-size: 18px;
line-height: 24px;
margin-bottom: 20px;
}
}

#intro .btn-get-started {
font-family: "Montserrat", sans-serif;
font-weight: 400;
font-size: 16px;
letter-spacing: 1px;
display: inline-block;
padding: 8px 28px;
border-radius: 50px;
transition: 0.5s;
margin: 10px;
border: 1px solid #ffcb04;
color: #ffcb04;
}

#intro .btn-get-started.arabic {
font-family: "myArabicFont", sans-serif;
}

#intro .btn-get-started:hover {
color: black;
background: #ffcb04;
}

#intro .product-screens {
position: absolute;
left: 0;
right: 0;
bottom: 0;
overflow: hidden;
padding-top: 30px;
text-align: center;
width: 100%;
height: 530px;
}

#intro .product-screens img {
box-shadow: 0 -2px 19px 4px rgba(0, 0, 0, 0.29);
}

#intro .product-screens .product-screen-1 {
position: absolute;
z-index: 30;
left: calc(50% + 54px);
bottom: 0;
height: 500px;
}

#intro .product-screens .product-screen-2 {
position: absolute;
z-index: 20;
left: calc(50% - 154px);
bottom: 0;
height: 430px;
}

#intro .product-screens .product-screen-3 {
position: absolute;
z-index: 10;
left: calc(50% - 374px);
bottom: 0;
height: 360px;
}

#menuToggle {
display: none;
}

@media (max-height: 768px) {
#intro .product-screens {
height: 430px;
}

#intro .product-screens .product-screen-1 {
height: 400px;
}

#intro .product-screens .product-screen-2 {
height: 330px;
}

#intro .product-screens .product-screen-3 {
height: 260px;
}
}

@media (max-width: 767px) {
#intro .product-screens {
height: 400px;
}

#intro .product-screens .product-screen-1 {
position: static;
}

#intro .product-screens .product-screen-2,
#intro .product-screens .product-screen-3 {
display: none;
}
}

@media (max-width: 767px) and (max-height: 639px) {
#intro .product-screens {
height: 300px;
}

#intro .product-screens .product-screen-1 {
position: static;
}

#intro .product-screens .product-screen-2,
#intro .product-screens .product-screen-3 {
display: none;
}
}


@media (max-width: 768px) {
#header #logo h1 {
font-size: 25px;
margin-top: 0;
}

#header #logo img {
width: 70px;
margin-top: 10px;
}

.action_button {
width: 80px;
}

.pageTitle {
font-size: 45px;
}

.comingSoon {
font-size: 30px;
}

.container {
max-width: 100%;
}

#header.header-fixed #logo {
margin-top: -30px;
}

#intro .intro-text {
margin-top: 200px;
}

#menuToggle {
display: none;
}
}


@media (max-width: 640px) {
#header #logo h1 {
font-size: 20px;
margin-top: 0;
}

#header #logo img {
/* width: 60px;
margin-top: 10px; */
}

.pageTitle {
font-size: 36px;
}

.comingSoon {
font-size: 17px;
}

.container {
max-width: 100%;
}

/* #header.header-fixed #logo {
margin-left: auto;
margin-right: auto;
width: 190px;
float: none;
margin-top: -20px;
} */
#header.header-fixed #logo h1 div {
/* margin-top: 8px; */
/* display: none; */
}

#menuToggle {
display: none;
}

#action_wrapper {
display: none;
}

/* #action_wrapper {
margin-left: auto;
margin-right: auto;
width: 180px;
} */
#intro .intro-text {
margin-top: 100px;

}

#intro {
width: 100%;
min-height: 75px;}
.mobilepading{
padding-bottom: 100px !important;
}
}


@media (max-width: 320px) {
#header #logo h1 {
font-size: 18px;
margin-top: 0;
}

#header #logo img {
width: 60px;
margin-top: 10px;
}

.pageTitle {
font-size: 30px;
}


.comingSoon {
font-size: 15px;
}

.container {
max-width: 100%;
}

#header.header-fixed #logo {
margin-top: -30px;
}

#menuToggle {
display: block;
}

#action_wrapper {
display: none;
}

}


/*--------------------------------------------------------------
# Logo Section
--------------------------------------------------------------*/

.logo-image-container {

width: 100%;
text-align: center;

}


.logo-image-background {
margin-left: auto;
margin-right: auto;
border-radius: 50%;
background-color: #ffffffaa;
width: 300px;
height: 300px;
padding: 10px;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
border: 1px solid #ffffff00;
box-shadow: 0 1px 2px rgba(0,0,0, 0.2);
}

#main-logo-image {

width: 200px;
height: 200px;
}


/*--------------------------------------------------------------
# Navigation Menu
--------------------------------------------------------------*/

/* Nav Menu Essentials */

.nav-menu,
.nav-menu * {
margin: 0;
padding: 0;
list-style: none;
}

.nav-menu ul {
position: absolute;
display: none;
top: 100%;
left: 0;
z-index: 99;
}

.nav-menu li {
position: relative;
white-space: nowrap;
}

.nav-menu > li {
float: left;
}

.nav-menu li:hover > ul,
.nav-menu li.sfHover > ul {
display: block;
}

.nav-menu ul ul {
top: 0;
left: 100%;
}

.nav-menu ul li {
min-width: 180px;
}

/* Nav Menu Arrows */

.sf-arrows .sf-with-ul {
padding-right: 30px;
}

.sf-arrows .sf-with-ul:after {
content: "\f107";
position: absolute;
right: 15px;
font-family: "FontAwesome", sans-serif;
font-style: normal;
font-weight: normal;
}

.sf-arrows ul .sf-with-ul:after {
content: "\f105";
}

/* Nav Meu Container */

#nav-menu-container {
float: right;
margin: 0;
}

@media (max-width: 768px) {
#nav-menu-container {
display: none;
}
}

/* Nav Meu Styling */

.nav-menu a {
padding: 0 8px 10px 8px;
text-decoration: none;
display: inline-block;
color: #fff;
font-family: "Montserrat", sans-serif;
font-weight: 400;
font-size: 18px;
outline: none;
}

.nav-menu a.arabic {
padding: 0 8px 10px 8px;
text-decoration: none;
display: inline-block;
color: #fff;
font-family: "myArabicFont", sans-serif;
font-weight: 400;
font-size: 18px;
outline: none;
}

.nav-menu > li {
margin-left: 10px;
}

.nav-menu ul {
margin: 4px 0 0 0;
padding: 10px;
box-shadow: 0 0 30px rgba(127, 137, 161, 0.25);
background: #fff;
}

.nav-menu ul li {
transition: 0.3s;
}

.nav-menu ul li a {
padding: 10px;
color: #333;
transition: 0.3s;
display: block;
font-size: 13px;
text-transform: none;
}

.nav-menu ul li:hover > a {
color: rgb(34, 141, 255);
}

.nav-menu ul ul {
margin: 0;
}

/* Mobile Nav Toggle */

#mobile-nav-toggle {
position: fixed;
right: 0;
top: 0;
z-index: 999;
margin: 20px 20px 0 0;
border: 0;
background: none;
font-size: 24px;
display: none;
transition: all ease-in-out 0.4s;
outline: none;
cursor: pointer;
}

#mobile-nav-toggle i {
color: #fff;
}

@media (max-width: 768px) {
#mobile-nav-toggle {
display: inline;
}
}

/* Mobile Nav Styling */

#mobile-nav {
position: fixed;
top: 0;
padding-top: 18px;
bottom: 0;
z-index: 998;
background: rgba(52, 59, 64, 0.9);
left: -260px;
width: 260px;
overflow-y: auto;
transition: 0.4s;
}

#mobile-nav ul {
padding: 0;
margin: 0;
list-style: none;
}

#mobile-nav ul li {
position: relative;
}

#mobile-nav ul li a {
color: #fff;
font-size: 16px;
overflow: hidden;
padding: 10px 22px 10px 15px;
position: relative;
text-decoration: none;
width: 100%;
display: block;
outline: none;
}

#mobile-nav ul li a:hover {
color: #fff;
}

#mobile-nav ul li li {
padding-left: 30px;
}

#mobile-nav ul .menu-has-children i {
position: absolute;
right: 0;
z-index: 99;
padding: 15px;
cursor: pointer;
color: #fff;
}

#mobile-nav ul .menu-has-children i.fa-chevron-up {
color: rgb(34, 141, 255);
}

#mobile-nav ul .menu-item-active {
color: rgb(34, 141, 255);
}

#mobile-body-overly {
width: 100%;
height: 100%;
z-index: 997;
top: 0;
left: 0;
position: fixed;
background: rgba(52, 59, 64, 0.9);
display: none;
}

/* Mobile Nav body classes */

body.mobile-nav-active {
overflow: hidden;
}

body.mobile-nav-active #mobile-nav {
left: 0;
}

body.mobile-nav-active #mobile-nav-toggle {
color: #fff;
}

/*--------------------------------------------------------------
# Sections
--------------------------------------------------------------*/

/* Sections Header
--------------------------------*/

.section-header .section-title {
font-size: 36px;
color: #444444;
text-align: center;
font-weight: 400;
}

.section-header .section-description {
text-align: center;
padding-bottom: 40px;
color: #777;
font-style: normal;
font-size: 20px;
}


.section-description {
text-align: center;
padding-bottom: 40px;
color: #777;
font-style: normal;
font-size: 20px;
}

.section-header .section-divider {
display: block;
width: 180px;
height: 1px;
background: #FAA61F;
/*background: linear-gradient(0deg, rgb(34, 141, 255), rgb(34, 141, 255) 100%);*/
margin: 0 auto 20px;
}

/* Section with background
--------------------------------*/

.section-gray-bg {
background: #fafafa;
}

.section-dark-gray-bg {
background: #676A6E;
}


.section-light-yellow-bg {
background: #FFF7D9;
}


.section-yellow-bg {
background: #ffcb04;
}


/* About Us Section
--------------------------------*/

#about,
#services,
section {
padding: 60px 0;
}

#about .about-img,
#services .about-img {
height: 510px;
overflow: hidden;
}

#about .about-img img,
#services .about-img img {
margin-left: -15px;
max-width: 100%;
}

@media (max-width: 768px) {

#about .about-img,
#services .about-img {
height: auto;
}

#about .about-img img,
#services .about-img img {
margin-left: 0;
padding-bottom: 30px;
}
}

#about .content .h2,
#services .content .h2 {
color: #333;
font-weight: 300;
font-size: 24px;
}

#about .content h3,
#services .content h3 {
color: #777;
font-weight: 300;
font-size: 18px;
line-height: 26px;
font-style: italic;
margin-left: 20px;
margin-right: 20px;
}

#about .content p,
#services .content p {
line-height: 26px;
}

#about .content p:last-child,
#services .content p:last-child {
margin-bottom: 0;
}

#about .content i,
#services .content i {
font-size: 20px;
padding-right: 4px;
color: rgb(34, 141, 255);
}

#about .content ul,
#services .content ul {
list-style: none;
padding: 0;
}

#about .content ul li,
#services .content ul li {
padding-bottom: 10px;
}

/* Product Features Section
--------------------------------*/

#features {
background: #fff;
padding: 60px 0 0 0;
}

#features .features-img {
text-align: center;
padding-top: 20px;
}

@media (min-width: 769px) {
#features .features-img {
padding-top: 120px;
margin-top: -200px;
}
}

#features .features-img img {
max-width: 100%;
}

#features .box {
margin-bottom: 15px;
text-align: center;
}

#features .icon {
margin-bottom: 10px;
}

#features .icon i {
color: #666666;
font-size: 40px;
transition: 0.5s;
}

#features .icon i:before {
background: rgb(34, 141, 255);
background: linear-gradient(45deg, rgb(34, 141, 255) 0%, #55fabe 100%);
background-clip: border-box;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

#features .title {
font-weight: 300;
margin-bottom: 15px;
font-size: 22px;
}

#features .title a {
color: #111;
}

#features .description {
font-size: 14px;
line-height: 24px;
margin-bottom: 10px;
}

#features .section-description {
padding-bottom: 10px;
}

/* Product Advanced Features Section
--------------------------------*/

#advanced-features .features-row {
padding: 60px 0 30px 0;
}

#advanced-features h2 {
font-size: 26px;
font-weight: 700;
color: #000;
}

#advanced-features h3 {
font-size: 16px;
line-height: 24px;
font-weight: 400;
font-style: italic;
color: #999;
}

#advanced-features p {
line-height: 24px;
color: #777;
margin-bottom: 30px;
}

#advanced-features i {
color: #666666;
font-size: 64px;
transition: 0.5s;
float: left;
padding: 0 15px 0 0;
line-height: 1;
}

#advanced-features i:before {
background: rgb(34, 141, 255);
background: linear-gradient(45deg, rgb(34, 141, 255) 0%, #55fabe 100%);
background-clip: border-box;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

#advanced-features .advanced-feature-img-right {
max-width: 100%;
float: right;
padding: 0 0 30px 30px;
}

#advanced-features .advanced-feature-img-left {
max-width: 100%;
float: left;
padding: 0 30px 30px 0;
}

@media (max-width: 768px) {

#advanced-features .advanced-feature-img-right,
#advanced-features .advanced-feature-img-left {
max-width: 50%;
}
}

@media (max-width: 767px) {

#advanced-features .advanced-feature-img-right,
#advanced-features .advanced-feature-img-left {
max-width: 100%;
float: none;
padding: 0 0 30px 0;
}
}

/* Call To Action Section
--------------------------------*/

#call-to-action {
background: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)), url(../img/6.jpg) fixed center center;
background-size: cover;
padding: 80px 0;
}

#call-to-action .cta-title {
color: #fff;
font-size: 28px;
font-weight: 700;
}

#call-to-action .cta-text {
color: #fff;
}

@media (min-width: 769px) {
#call-to-action .cta-btn-container {
display: flex;
align-items: center;
justify-content: flex-end;
}
}

#call-to-action .cta-btn {
font-family: "Montserrat", sans-serif;
font-weight: 500;
font-size: 16px;
letter-spacing: 1px;
display: inline-block;
padding: 8px 30px;
border-radius: 25px;
transition: background 0.5s;
margin: 10px;
border: 2px solid #fff;
color: #fff;
}

#call-to-action .cta-btn.arabic {
font-family: "myArabicFont", sans-serif;
}

#call-to-action .cta-btn:hover {
background: rgb(34, 141, 255);
border: 2px solid rgb(34, 141, 255);
}

/* More Features Section
--------------------------------*/

#more-features {
padding: 60px 0 60px 0;
}

#more-features .box {
padding: 40px;
margin-bottom: 30px;
box-shadow: 0 0 30px rgba(73, 78, 92, 0.15);
background: #fff;
transition: 0.4s;
}

#more-features .icon {
float: left;
}

#more-features .icon i {
color: #666666;
font-size: 80px;
transition: 0.5s;
line-height: 0;
}

#more-features .icon i:before {
background: rgb(34, 141, 255);
background: linear-gradient(45deg, rgb(34, 141, 255) 0%, #55fabe 100%);
background-clip: border-box;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

#more-features h4 {
margin-left: 100px;
font-weight: 700;
margin-bottom: 15px;
font-size: 18px;
}

#more-features h4 a {
color: #111;
}

#more-features p {
font-size: 14px;
margin-left: 100px;
margin-bottom: 0;
line-height: 24px;
}

@media (max-width: 767px) {
#more-features .box {
margin-bottom: 20px;
}

#more-features .icon {
float: none;
text-align: center;
padding-bottom: 15px;
}

#more-features h4,
#more-features p {
margin-left: 0;
text-align: center;
}
}

/* Clients Section
--------------------------------*/

#clients {
padding: 30px 0;
background: #fff;
}

#clients img {
max-width: 100%;
opacity: 0.5;
transition: 0.3s;
padding: 15px 0;
}

#clients img:hover {
opacity: 1;
}

/* Pricing Section
--------------------------------*/

#pricing {
padding: 60px 0 60px 0;
}

#pricing .box {
margin-bottom: 30px;
background: #fff;
text-align: center;

/* border-top-left-radius: 10px;
border-top-right-radius: 200px;
border-bottom-left-radius: 200px;
border-bottom-right-radius: 10px; */

min-height: 400px;
max-width: 300px;
min-width: 250px;

margin-left: auto;
margin-right: auto;

box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);


/*transition: box-shadow 0.3s ease-in-out;*/
transition: all 0.3s ease-in-out;
}

#pricing .box:hover {
/* box-shadow: 0px 0px 30px rgba(73, 78, 92, 0.15); */
transform: scale(1.02, 1.02);
/* cursor: pointer;*/
}

#pricing .box:hover .tour-price {
left: 5px;
-ms-transform: scale(1.2);
-moz-transform: scale(1.2);
-o-transform: scale(1.2);
-webkit-transform: scale(1.2);
transform: scale(1.2);
}

#pricing .box a {
display: block;
position: relative;
}

#pricing .box img {
width: 100%;
border-top-left-radius: 10px;
border-top-right-radius: 8px;
}

#pricing .tour-price {
position: absolute;
bottom: 20px;
left: 0;
background: #ffa626;
/* padding: 3px 10px 2px 10px;*/
color: #fff;
font-weight: 700;
font-size: 24px;
-webkit-transition-duration: 0.2s;
-moz-transition-duration: 0.2s;
-o-transition-duration: 0.2s;
transition-duration: 0.2s;
}

#pricing .tour-price h4 {
color: white;
font-size: 16px;
border: none;
/* font-weight: 700;*/
}

#pricing .tour-price h4 sup {
font-size: 12px;
}

#pricing .tour-price.special {
position: absolute;
bottom: 20px;
left: 0;
background: #ff0045;
/* padding: 3px 10px 2px 10px;*/
color: #fff;
font-weight: 700;
font-size: 24px;
-webkit-transition-duration: 0.2s;
-moz-transition-duration: 0.2s;
-o-transition-duration: 0.2s;
transition-duration: 0.2s;
}

#pricing .box-around {
border: 1px solid black;
margin: 10px;
padding: 30px;
transition: all 0.3s ease-in-out;
}

#pricing .box-around:hover {
box-shadow: 0 0 30px rgba(73, 78, 92, 0.15);
}

#pricing h3 {
font-weight: 400;
margin-bottom: 15px;
font-size: 28px;
}

#pricing h4 {
font-size: 46px;
color: rgb(34, 141, 255);
font-weight: 300;
}

#pricing h4 sup {
font-size: 20px;
top: -20px;
}

#pricing h4 sup.arabic {
font-size: 20px;
top: -20px;
font-family: "myArabicFont", sans-serif;
}

#pricing h4 span {
color: #ffa626;
font-size: 20px;
}

#pricing h4 span.arabic {
color: #ffa626;
font-size: 20px;
font-family: "myArabicFont", sans-serif;
}


#pricing ul {
padding: 0;
list-style: none;
color: #999;
text-align: left;
line-height: 20px;
}

#pricing ul li {
padding-bottom: 12px;
}

#pricing ul i {
color: rgb(34, 141, 255);
font-size: 18px;
padding-right: 4px;
}

#pricing .get-started-btn {
background: #515e61;
display: inline-block;
padding: 6px 30px;
border-radius: 20px;
color: #fff;
transition: none;
font-size: 14px;
font-weight: 400;
font-family: "Montserrat", sans-serif;
}

#pricing .get-started-btn.arabic {
background: #515e61;
display: inline-block;
padding: 6px 30px;
border-radius: 20px;
color: #fff;
transition: none;
font-size: 14px;
font-weight: 400;
font-family: "myArabicFont", sans-serif;
}

#pricing .featured {
/* border: 2px solid rgb(34, 141, 255);
border-top-left-radius: 0px;
border-top-right-radius: 150px;
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px; */
border-radius: 10px;
}

#pricing .featured .get-started-btn {
background: linear-gradient(45deg, rgb(34, 141, 255), #1dc8cd);
}


.package_bubble_title_featured {
/* border: 0px solid rgb(34, 141, 255);
border-top-left-radius: 0px;
border-top-right-radius: 150px;
border-bottom-left-radius: 150px;
border-bottom-right-radius: 0px; */
/* height: 200px; */
width: 100%;
margin-top: -2px;
background-color: rgb(34, 141, 255);
color: white;
border-radius: 5px;
}

.package_bubble_title_regular {
/* border: 0px solid #ccc; */
/* border-top-left-radius: 150px;
border-top-right-radius: 0px;
border-bottom-left-radius: 0px;
border-bottom-right-radius: 150px; */
/* height: 200px; */
width: 100%;
margin-top: -2px;
background-color: #888;
color: white;
border-radius: 5px;
}


.package_title {
font-size: 28px;
/* font-weight: bold; */
padding: 22px;
}


#pricing .regular {
/* border: 2px solid #888;
border-top-left-radius: 150px;
border-top-right-radius: 0px;
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px; */

border-radius: 10px;
}


#pricing .package_bubble_title .regular {
border: 0 solid gray;
border-radius: 0 150px 0 150px;
height: 200px;
width: 100%;
margin-top: -2px;
background-color: gray;
color: white;

}

.package_title .regular {
font-size: 28px;
/* font-weight: bold; */
padding-top: 65px;
}

.package_pricing_featured {
font-size: 20px;
font-weight: bold;
color: rgb(34, 141, 255);
margin: 20px 0 30px;
}


.package_pricing_regular {
font-size: 20px;
font-weight: bold;
color: #888;
/* padding-right: 30px; */
margin: 0 0 30px;
}


@media (max-width: 768px) {
/* #pricing .box {
min-height: 500px;
max-width: 200px;
} */

}


/* Frequently Asked Questions Section
--------------------------------*/

#faq {
padding: 60px 0;
}

#faq #faq-list {
padding: 0;
list-style: none;
}

#faq #faq-list li {
border-bottom: 1px solid #ddd;
}

#faq #faq-list a {
display: block;
position: relative;
font-family: "Montserrat", sans-serif;
font-size: 22px;
line-height: 1;
font-weight: 300;
padding: 18px 20px 18px 0;
}

#faq #faq-list a.arabic {
display: block;
position: relative;
font-family: "myArabicFont", sans-serif;
font-size: 22px;
line-height: 1;
font-weight: 300;
padding: 18px 20px 18px 0;
}

#faq #faq-list i {
font-size: 24px;
position: absolute;
right: 0;
top: 16px;
}

#faq #faq-list p {
margin-bottom: 20px;
}

@media (max-width: 768px) {
#faq #faq-list a {
font-size: 18px;
}

#faq #faq-list i {
top: 13px;
}
}

#faq #faq-list a.collapse {
color: rgb(34, 141, 255);
}

#faq #faq-list a.collapsed {
color: #000;
}

#faq #faq-list a.collapsed i::before {
content: "\f2c7" !important;
}

/* Our Team Section
--------------------------------*/

#team {
padding: 60px 0;
}

#team .member {
text-align: center;
margin-bottom: 20px;
}

#team .member .pic {
margin-bottom: 15px;
overflow: hidden;
height: 260px;

}

#team .member .pic img {
max-width: 100%;
border-radius: 50%;
}

#team .member h4 {
font-weight: 700;
margin-bottom: 2px;
font-size: 18px;
}

#team .member span {
font-style: italic;
display: block;
font-size: 13px;
}

#team .member .social {
margin-top: 15px;
}

#team .member .social a {
color: #b3b3b3;
}

#team .member .social a:hover {
color: rgb(34, 141, 255);
}

#team .member .social i {
font-size: 18px;
margin: 0 2px;
}

/* Gallery Section
--------------------------------*/

#gallery {
background: #fff;
padding: 80px 0;
}

#gallery .container-fluid {
padding: 0;
}

#gallery .gallery-overlay {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 1;
-webkit-transition: all ease-in-out 0.4s;
transition: all ease-in-out 0.4s;
}

#gallery .gallery-item {
overflow: hidden;
position: relative;
padding: 0;
vertical-align: middle;
text-align: center;
margin: 5px;
border-radius: 5px;
}

#gallery .gallery-item img {
-webkit-transition: all ease-in-out 0.4s;
transition: all ease-in-out 0.4s;
width: 100%;
height: auto;
border-radius: 5px;
}

#gallery .gallery-item:hover img {
-webkit-transform: scale(1.1);
transform: scale(1.1);
}

#gallery .gallery-item:hover .gallery-overlay {
opacity: 1;
background: rgba(0, 0, 0, 0.7);

}

#gallery .gallery-item .label {

position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
/*background:linear-gradient(45deg, #1de09955, rgb(34, 141, 255)55); */
background: #2b2b2b88;
width: 100%;
font-size: 24px;

letter-spacing: 0;
color: white;
}


/* Contact Section
--------------------------------*/

#contact {
box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.1);
padding: 60px 0;
}

#contact .contact-about h3 {
font-size: 36px;
margin: 0 0 10px 0;
padding: 0;
line-height: 1;
font-family: "Montserrat", sans-serif;
font-weight: 300;
letter-spacing: 3px;
text-transform: uppercase;
color: rgb(34, 141, 255);
}

#contact .contact-about h3.arabic {
font-size: 36px;
margin: 0 0 10px 0;
padding: 0;
line-height: 1;
font-family: "myArabicFont", sans-serif;
font-weight: 300;
letter-spacing: 3px;
text-transform: uppercase;
color: rgb(34, 141, 255);
}

#contact .contact-about p {
font-size: 14px;
line-height: 24px;
font-family: "Montserrat", sans-serif;
color: #888;
}

#contact .contact-about p.arabic {
font-size: 14px;
line-height: 24px;
font-family: "myArabicFont", sans-serif;
color: #888;
}

#contact .social-links {
padding-bottom: 20px;
}

#contact .social-links a {
font-size: 80px;
display: inline-block;
background: #fff;
color: #00a859;
line-height: 1;
padding: 8px 0;
margin-right: 4px;
border-radius: 50%;
text-align: center;
width: 120px;
height: 120px;
transition: all 0.5s ease;
border: 1px solid #f5f5f5;
box-shadow: 0 1px 2px rgba(0,0, 0,0.2);
}

#contact .social-links a:hover {
box-shadow: 0 10px 20px #00a85988;
transform: scale(1.04, 1.04) !important;

}

#contact .social-links a.blue {
color: rgb(34, 141, 255);
}

#contact .social-links a.blue:hover {
box-shadow: 0 10px 20px rgba(34, 141, 255, 0.8);
transform: scale(1.04, 1.04) !important;
}

#contact .info {
color: #333333;
}

#contact .info i {
font-size: 32px;
color: rgb(34, 141, 255);
float: left;
line-height: 1;
}

#contact .info p {
padding: 0 0 10px 42px;
line-height: 28px;
font-size: 14px;
}

#contact .form #sendmessage {
color: #08afed;
border: 1px solid #08afed;
display: none;
text-align: center;
padding: 15px;
font-weight: 600;
margin-bottom: 15px;
border-radius: 5px;
background-color: #08afed11;
}

#contact .form #errormessage {
color: red;
display: none;
border: 1px solid red;
text-align: center;
padding: 15px;
font-weight: 600;
margin-bottom: 15px;
border-radius: 5px;
background-color: #ff000011;
}

#contact .form .validation {
color: red;
display: none;
margin: 0 0 20px;
font-weight: 400;
font-size: 13px;
}

#contact .form input,
#contact .form textarea {
border-radius: 5px;
box-shadow: none;
font-size: 14px;
}


#contact .form input:focus,
#contact .form textarea:focus {
-webkit-box-shadow: inset 0 0 4px 0 #1877F255;
-moz-box-shadow: inset 0 0 4px 0 #1877F255;
box-shadow: inset 0 0 4px 0 #1877F255;
}


#contact .form #btn_send_contact_us {
font-family: "myArabicFont", sans-serif;
font-weight: 400;
font-size: 16px;
letter-spacing: 1px;
display: inline-block;
padding: 8px 28px;
border-radius: 50px;
transition: 0.5s;
margin: 10px;
border: 1px solid #1877F2;
color: #1877F2;
background-color: white;
width: 50%;

}

#contact .form #btn_send_contact_us:hover {
color: white;
background: #1877F2;
cursor: pointer;
}

#contact .form #btn_send_contact_us:hover .loader {
border-top: 2px solid #FAA61F;
}


#contact .contact-about .section-description,
#footer .section-description {
text-align: center;
padding-bottom: 40px;
color: #777;
font-style: normal;
font-size: 16px;
}


/*-------------------------------------------------------------
# service
--------------------------------------------------------------*/

.service_circle {
color: white;
border: 2px dashed white;
border-radius: 50%;
width: 170px;
height: 170px;
text-align: center;
margin: 20px auto;
}


.service_square {
color: #1877F2;
border: 1px dashed #1877F2;
background-color: white;
border-radius: 5px;
width: 200px;
text-align: center;
margin-left: auto;
margin-right: auto;
margin-bottom: 20px;
display: table;
}


#message_info,
#message_body,
.message_info {
border-radius: 5px;
margin: 20px;
padding: 5px;
text-align: center;

border: 1px solid #eee;
background-color: #fcfcfe;
}

#message_info.error,
#message_body.error,
.message_info.error {
border: 1px solid #d30000;
background-color: rgba(255, 0, 0, 0.02);
color: #d30000;
}

#message_info.success,
#message_body.success,
.message_info.success {
border: 1px solid #008b0b;
background-color: rgba(0, 255, 20, 0.02);
color: #008b0b;
}


/*--------------------------------------------------------------
# Footer
--------------------------------------------------------------*/

#footer {
background: #fff;
box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.1);
padding: 30px 0;
color: #333;
font-size: 14px;
}

#footer .credits {
font-size: 13px;
color: #888;
}

#footer .footer-links a {
color: #666;
padding-left: 15px;
}

#footer .footer-links a:first-child {
padding-left: 0;
}

#footer .footer-links a:hover {
color: rgb(34, 141, 255);
}

/*--------------------------------------------------------------
# Page Header
--------------------------------------------------------------*/

.slider_container {
position: absolute;
top: 0;
left: 0;
margin-top: -80px;
width: 100%;
min-width: 600px;

background: linear-gradient(0deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.8));
}


.slider_caption {


position: absolute;
bottom: 0;
color: white;
font-size: 22px;
text-align: center;
background: rgba(0, 0, 0, 0.5);
margin: 20px;
padding: 10px;
border-radius: 10px;
}

#intro.fixed_top {

min-height: 680px;
background: no-repeat center center fixed;
background-size: 100%;
padding-bottom: 80px;


}


.scene {
width: 100%;
height: 260px;
/* border: 1px solid #CCC;*/
border-radius: 10px;
margin: 40px 0;
perspective: 600px;
}

.card {
border-radius: 10px;
position: relative;
width: 100%;
height: 100%;
cursor: pointer;
transform-style: preserve-3d;
transform-origin: center;
transition: transform 1s;
}

.card.is-flipped {
transform: translateX(-100%) rotateY(-180deg);
}

.card_face {
border-radius: 10px;
padding: 10px;
position: absolute;
width: 100%;
height: 100%;
text-align: center;
background: white;


backface-visibility: hidden;
}

.card_face_back {
transform: rotateY(180deg);
}


.service_icon {
width: 100px;
height: 100px;
margin-left: auto;
margin-right: auto;
border-radius: 50%;
border: 1px solid #CCC;
padding-top: 25px;
margin-top: 40px;
}

.service_title {
font-size: 20px;
}


.service_icon.blue {
border: 1px solid #2a5699;
}

/*
.card_face_back.blue {
background: #eefaff;
}
*/

.card_face.blue,
.service_title.blue {
color: #2a5699;
}


.service_icon.orange {
border: 1px solid #cb4a32;
}

/*
.card_face_back.orange {
background: #ffe4df;
}
*/

.card_face.orange,
.service_title.orange {
color: #cb4a32;
}


.service_icon.green {
border: 1px solid #207245;
}

/*
.card_face_back.green {
background: #e8fff3;

}
*/

.card_face.green,
.service_title.green {
color: #207245;
}


.service_icon.lightBlue {
border: 1px solid #009fe3;
}

/*
.card_face_back.orange {
background: #ffe4df;
}
*/

.card_face.lightBlue,
.service_title.lightBlue {
color: #009fe3;
}


.service_icon.yellow {
border: 1px solid #ffa500;
}

/*
.card_face_back.orange {
background: #ffe4df;
}
*/

.card_face.yellow,
.service_title.yellow {
color: #ffa500;
}


.service_icon.lightGreen {
border: 1px solid #a6c738;
}

/*
.card_face_back.orange {
background: #ffe4df;
}
*/

.card_face.lightGreen,
.service_title.lightGreen {
color: #a6c738;
}


.service_icon.lightOrange {
border: 1px solid #ff6633;
}

/*
.card_face_back.orange {
background: #ffe4df;
}
*/

.card_face.lightOrange,
.service_title.lightOrange {
color: #ff6633;
}


.service_icon.wpBlue {
border: 1px solid #0087be;
}

/*
.card_face_back.orange {
background: #ffe4df;
}
*/

.card_face.wpBlue,
.service_title.wpBlue {
color: #0087be;
}


div.g-recaptcha {
margin-bottom: 20px;
}


/*------------------------------------
Spinner
-------------------------------------*/

.loader {
/* border: 2px solid #1877F2; */
border-radius: 50%;
border-top: 2px solid #FAA61F;
/* border-bottom: 2px solid #1877F2; */
width: 25px;
height: 25px;
/* Safari */
animation: spin 1s linear infinite;
margin-left: auto;
margin-right: auto;
margin-top: -5px;
}

/* Safari */

@-webkit-keyframes spin {
0% {
-webkit-transform: rotate(0deg);
}

100% {
-webkit-transform: rotate(360deg);
}
}

@keyframes spin {
0% {
transform: rotate(0deg);
}

100% {
transform: rotate(360deg);
}
}

div.form form.contactForm div.g-recaptcha div {
margin-left: auto;
margin-right: auto;
}


div.row {
max-width: 1200px;
margin-left: auto;
margin-right: auto;
}

div.category_container {
background-color: #FFFFFF;
/*border: 1px solid #ccc;*/
/*width: 240px;*/
min-height: 320px;
border-radius: 10px;
margin: 40px auto;
padding: 5px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
transition: all 0.5s ease;
}


div.category_container:hover {
box-shadow: 0 10px 20px rgba(255, 203, 4, 0.8);
transform: scale(1.04, 1.04) !important;

}

.category_image {
/*background-color: white;*/
/*!*border: 1px solid #ccc;*!*/
/*width: 100%;*/
/*height: 150px;*/
/*border-radius: 10px;*/
/*!* margin: 10px; *!*/
/*margin-bottom: 10px;*/
/*text-align: center;*/

border-radius: 50%;
width: 160px;
height: 160px;
margin-left: auto;
margin-right: auto;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
transition: all 0.5s ease;
}


.category_image img {

border-radius: 50%;
width: 150px;
height: 150px;

}

.category_title {
font-size: 24px;
margin-top: 10px;
margin-bottom: 10px;
}


div.category_container:hover .category_image, div.blog_post_container:hover .category_image {
box-shadow: 0 5px 10px rgba(255, 203, 4, 0.8);
transform: scale(1.04, 1.04) !important;

}


/* .category_image:hover {
border: 1px solid #1877F2;
} */


/*----------------------------------------
# package
------------------------------------------*/

.admin_package_container {
width: 250px;
background-color: #fff;
border: 1px solid #fff;
border-radius: 10px;
margin: 40px auto;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);

}

.admin_package_container.gray {
margin-top: 48px;
}

.admin_package_container.blue {
margin-top: 40px;
}

.package_title {

width: 100%;
border: 1px solid #ccc;
border-radius: 10px 10px 0 0;
background-color: white;
color: #666;
text-align: center;
text-transform: uppercase;
padding: 5px;

}

.package_title.gray {
background-color: #666;
color: white;
font-size: 18px;
}

.package_title.blue {
background-color: #1877F2;
color: white;
font-size: 24px;
}


.package_details {
text-align: center;
padding: 10px;
}

.package_details.gray {

background-color: #f5f5f5;
color: #666;
}


.package_details.blue {
background-color: #1877F208;
color: #1877F2;
}

.package_details p {
margin-bottom: 0;
font-size: 22px;
}


.package_details p.quantity {
font-size: 48px;
margin-bottom: 0;
}

.package_details p.price {
font-size: 32px;
margin-bottom: 0;
}


/*--------------------------------------------------------------
# Modal
--------------------------------------------------------------*/

.modal {
overflow-y: scroll;
}

.modal-content {
border-radius: .4rem;
}

/*input[type="date"]:before {*/
/* content: attr(placeholder) !important;*/
/* color: #ddd;*/
/* margin-right: 0.5em;*/
/*}*/

/*input[type="date"]:focus:before,*/
/*input[type="date"]:valid:before {*/
/* content: "";*/
/*}*/

/* WebKit, Edge */
::-webkit-input-placeholder {
color: #ddd !important;
}

/* Firefox 4-18 */
:-moz-placeholder {
color: #ddd !important;
opacity: 1;
}

/* Firefox 19+ */
::-moz-placeholder {
color: #ddd !important;
opacity: 1;
}

/* IE 10-11 */
:-ms-input-placeholder {
color: #ddd !important;
}

/* Edge */
::-ms-input-placeholder {
color: #ddd !important;
}

/* MODERN BROWSER */
::placeholder {
color: #ddd !important;
}


/* WebKit, Edge */
#contact .form input::-webkit-input-placeholder, #contact .form textarea::-webkit-input-placeholder {
color: #ccc !important;
}

/* Firefox 4-18 */
#contact .form input:-moz-placeholder, #contact .form textarea:-moz-placeholder {
color: #999999 !important;
opacity: 1;
}

/* Firefox 19+ */
#contact .form input::-moz-placeholder, #contact .form textarea::-moz-placeholder {
color: #999999 !important;
opacity: 1;
}

/* IE 10-11 */
#contact .form input:-ms-input-placeholder, #contact .form textarea:-ms-input-placeholder {
color: #999999 !important;
opacity: 1;
}

/* Edge */
#contact .form input::-ms-input-placeholder, #contact .form textarea::-ms-input-placeholder {
color: #999999 !important;
opacity: 1;
}

/* MODERN BROWSER */
#contact .form input::placeholder, #contact .form textarea::placeholder {
color: #999999 !important;
opacity: 1;
}


.modal-header {
background: linear-gradient(45deg, #111111,#111111, #FAA61FCC, #111111,#111111);
color: white !important;
text-align: center;
font-size: 20px;
padding: 5px 10px;
border: 1px solid #FAA61F;
}

.modal-header.delete {
background: linear-gradient(45deg, #ff3030, #cd1d1d);
}

.modal-header .close {
color: #FAA61FAA !important;
text-align: center;
font-size: 38px;
margin-left: 0;
padding-top: 8px;
outline: none;
}

.modal-header-title {
width: 100%;
float: left;
text-align: left;
}

.modal-header-icon {
float: left;
margin-right: 20px;
font-size: 40px;
color: #FAA61FAA;
}

.modal-title {
float: left;
margin-top: 3px;
margin-bottom: 0;
}


.modal-footer {
background-color: #f9f9f9;
padding: 5px 10px;
}


.modal-footer a {
display: inline-block;
padding: 6px 30px;
border-radius: 20px;
color: #fff;
font-size: 14px;
font-weight: 400;
font-family: "Montserrat", sans-serif;
transition: all ease-in-out 0.5s;
}

.modal-footer a.arabic {
font-family: "myArabicFont", sans-serif;
direction: rtl;
}

.modal-footer a.cancel {
background: #fff;
color: #aaa;
border: 1px solid #aaa;
border-radius: 20px;
height: 30px;
min-width: 109px;
cursor: pointer;
margin: 5px;
/*font-family: "Montserrat", sans-serif;*/
text-align: center;
}

.modal-footer a.cancel.arabic {
line-height: 15px;
}


.modal-footer a.cancel:hover {
color: #fff;
background-color: #aaaaaa;
}

.modal-footer a.action, .action_button {
background: #fff;
border: 1px solid #FAA61F;
border-radius: 20px;
height: 30px;
min-width: 109px;
cursor: pointer;
margin: 5px;
color: #000000;
box-shadow: inset 0 0 10px 0 #ffcb04;
-webkit-box-shadow: inset 0 0 10px 0 #ffcb04;
/*font-family: "Montserrat", sans-serif;*/
}

.action_button {
display: flex;
height: 45px;
align-items: center;
justify-content: center;
margin-top: 10px;
font-size:20px;
}


.modal-footer a:hover {
cursor: pointer;
}

.modal-footer a.action:hover, .action_button:hover {
border: 1px solid #FAA61F;
box-shadow: inset 0 0 20px 0 #ffcb04;
-webkit-box-shadow: inset 0 0 20px 0 #ffcb04;
cursor: pointer;
}


/*------------------------------------
Spinner
-------------------------------------*/

.loader {
/* border: 2px solid #1877F2; */
border-radius: 50%;
border-top: 2px solid #FAA61F;
/* border-bottom: 2px solid #1877F2; */
width: 25px;
height: 25px;
/* Safari */
animation: spin 1s linear infinite;
margin-left: auto;
margin-right: auto;
margin-top: -5px;
}


.modal-footer a.action:hover .loader {
/*border-top: 2px solid white;*/
}

.modal-footer a.action.delete {
background: linear-gradient(45deg, #ff3030, #cd1d1d);
color: #fff;
}

.modal-footer a.action.delete:hover {
background: linear-gradient(45deg, #cd1d1d, #ff3030);
color: #fff;
}


.modal-action-text {
width: 100%;
text-align: center;
}

.modal input:focus, input:focus,
.modal textarea:focus, input.form-control:focus, select.form-control:focus {
-webkit-box-shadow: inset 0 0 6px 0 #ffcb04;
-moz-box-shadow: inset 0 0 6px 0 #ffcb04;
box-shadow: inset 0 0 6px 0 #ffcb04;
border: 1px solid #FAA61F;
}


#reservationModal.modal .validation {
color: red;
display: none;
margin: 0 0 20px;
font-weight: 400;
font-size: 13px;
}

#reservationModal.modal .validation.children {
color: red;
display: none;
margin: 0 0 20px;
font-weight: 400;
font-size: 13px;
text-align: center;
}

.validation {
color: red;
display: none;
margin: 0 0 5px;
font-weight: 400;
font-size: 13px;
}


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

.modal-title {
float: left;
margin-top: 3px;
font-size: 18px;
margin-bottom: 0;
}


.modal-header-icon {
float: left;
margin-right: 10px;
font-size: 28px;
color: rgba(255, 255, 255, 0.5);
}


.modal-footer a.action, .modal-footer a.cancel {
padding-left: 10px;
padding-right: 10px;
min-width: 0;
}


}


input.circle_check, input.circle_check_ar {
display: none;
}

label.circle_check, label.circle_check_ar {
font-size: 16px;
color: #bfbfbf;
display: inline-block;
padding: 8px 0 0 30px;
}

label.circle_check:before {
content: '';
display: inline-block;
background: #1877F2;
position: absolute;
left: 0;
top: 5px;
height: 30px;
width: 30px;
margin-right: 10px;
border-radius: 80%;
box-shadow: 0 1px 5px 0 rgba(0, 0, 0, .2);
box-sizing: border-box;
border: 15px solid #ffff;
transition: border .3s ease;
cursor: pointer;
}


label.circle_check_ar:before {
content: '';
display: inline-block;
background: #1877F2;
position: absolute;
right: 0;
top: 5px;
height: 30px;
width: 30px;
margin-right: 10px;
border-radius: 80%;
box-shadow: 0 1px 5px 0 rgba(0, 0, 0, .2);
box-sizing: border-box;
border: 15px solid #ffff;
transition: border .3s ease;
cursor: pointer;
}


input.circle_check:checked + label.circle_check:before, input.circle_check_ar:checked + label.circle_check_ar:before {
border-color: #fff;
border-width: 6px;
box-shadow: 0 0 10px 0 #1877F288;
}

input.circle_check + label.circle_check, input.circle_check_ar + label.circle_check_ar {
transition: color .7s ease;
}

input.circle_check:checked + label.circle_check, input.circle_check_ar:checked + label.circle_check_ar {
color: #888;
}


label.terms_of_service {
font-size: 16px;
color: #1877F2;
padding-top: 8px;
cursor: pointer;
}


#filter_district .filter_district_item,
#filter_account_type .filter_account_type_item,
#filter_account_type_main .filter_account_type_item_main {
float: left;
margin: 5px;
padding: 5px;
border: 1px solid #ccc;
border-radius: 5px;
font-size: 14px;
min-width: 80px;
text-align: center;
text-decoration: none;
cursor: pointer;
list-style: none;
background-color: #fff;
transition: all 0.3s ease-in-out;


}


#filter_district .filter_district_item:hover,
#filter_account_type .filter_account_type_item:hover,
#filter_account_type_main .filter_account_type_item_main:hover {

transform: scale(1.03, 1.03);
box-shadow: 0 0 10px rgba(73, 78, 92, 0.20);

-webkit-box-shadow: inset 0 0 6px 0 #CCCCCC;
-moz-box-shadow: inset 0 0 6px 0 #CCCCCC;
box-shadow: inset 0 0 6px 0 #CCCCCC;
}


#filter_district .filter_district_item.selected,
#filter_account_type .filter_account_type_item.selected,
#filter_account_type_main .filter_account_type_item_main.selected {


border: 1px solid #1877F2;
color: #1877F2;
-webkit-box-shadow: inset 0 0 6px 0 #1877F2;
-moz-box-shadow: inset 0 0 6px 0 #1877F2;
box-shadow: inset 0 0 6px 0 #1877F2;
}


#filter_account_type .filter_account_type_item.selected i.fa,
#filter_account_type_main .filter_account_type_item_main.selected i.fa {
font-size: 14px;
transition: all 0.3s ease-in-out;

}

#filter_account_type .filter_account_type_item.selected i.fa,
#filter_account_type_main .filter_account_type_item_main.selected i.fa {
font-size: 22px;
color: #1877F2;
}

#filter_account_type_main .filter_account_type_item_main i.fa {
color: #CCCCCC;
}


.language_wrapper {
width: 120px;
/*margin-left: auto;*/
/*margin-right: auto;*/
/*margin-top: 22px;*/
/*margin-bottom: 5px;*/
text-align: center;
/*min-width: 80px;*/
/*position: fixed;*/
/*left: 50%;*/
/*transform: translate(-50%);*/

position: relative;
float: right;
margin-top: -5px;
margin-right: 10px;
}

.lang_switch {
float: left;
border: 1px solid #CCCCCC;
border-radius: 20px;
width: 50px;
height: 30px;
cursor: pointer;
margin: 5px;
color: #CCCCCC;
background-color: rgba(255, 255, 255, 0);
transition: all 0.3s ease-in-out;
-webkit-box-shadow: inset 0 0 6px 0 white;
-moz-box-shadow: inset 0 0 6px 0 white;
box-shadow: inset 0 0 6px 0 white;
}

.lang_switch.selected {
color: black;
background-color: white;
border: 1px solid #ffcb04;
-webkit-box-shadow: inset 0 0 6px 0 #ffcb04;
-moz-box-shadow: inset 0 0 6px 0 #ffcb04;
box-shadow: inset 0 0 6px 0 #ffcb04;
}


.faq_icon {
background: white;
color: #ccc;
font-size: 100px;
border-radius: 50%;
right: 15px;
bottom: 15px;
transition: 0.5s;
width: 120px;
height: 120px;
/*line-height: 100px;*/
text-align: center;
border: 1px solid #f5f5f5;
/*padding-bottom: 50px;*/
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
margin-left: auto;
margin-right: auto;
cursor: pointer;
}

.faq_icon:hover {
/* background: #1877F2; */
color: #ffcb04;
box-shadow: 0 10px 20px rgba(255, 203, 4, 0.80);
transform: scale(1.04, 1.04) !important;
}

.faq_icon i {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
font-size: 100px;
}


/*===================================================
* Tooltip
====================================================*/
[tooltip]:before {

/* needed - do not touch */

content: attr(tooltip);

position: absolute;

opacity: 0;

/* customizable */

transition: all 0.5s ease;

color: white;

border-radius: 10px;

/* box-shadow: 2px 2px 1px silver; */


font-size: 5px;

padding: 0;

}


[tooltip]:hover:before {

/* needed - do not touch */
opacity: 1;
/* customizable */
background: rgba(0, 0, 0, 0.6);
margin-top: -50px;
margin-left: -60px;
width: 150px;
font-size: 12px;
padding: 0;

}


[tooltip]:not([tooltip-persistent]):before {

pointer-events: none;
}


.post_icon {
color: #CCCCCC;
background: white;
position: fixed;
width: 40px;
height: 40px;
font-size: 20px;
top: 0px;
left: 0px;
border-top-left-radius: 10px;
border-bottom-right-radius: 10px;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
border: 1px solid #f5f5f5;
border-top: unset;
border-left: unset;
transition: all 0.5s ease-in-out;
}


.category_container:hover .post_icon {

color: #1877F2;
border: 1px solid #1877F255;
border-top: unset;
border-left: unset;
}


.post_icon_right {
color: #CCCCCC;
background: white;
position: fixed;
width: 40px;
height: 40px;
font-size: 20px;
top: 0px;
right: 0px;
border-top-right-radius: 10px;
border-bottom-left-radius: 10px;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
border: 1px solid #f5f5f5;
border-top: unset;
border-right: unset;
transition: all 0.5s ease-in-out;
}


.post_icon_right img {
width: 30px;
height: 30px;
}

.category_container:hover .post_icon_right {

color: #1877F2;
border: 1px solid #1877F255;
border-top: unset;
border-right: unset;
}


.video_section {
background: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)), url(../img/5.jpg) fixed center center;
background-size: cover;
padding: 80px 0;
}


.video_container {
background: black;
padding: 10px;
margin-top: 40px;
border-radius: 10px;
min-height: 370px;
border: 1px solid rgba(255, 255, 255, 0.36);
box-shadow: 0 0 20px rgba(255, 255, 255, 0.2);
transition: all 0.5s ease;

}

.video_container:hover {
box-shadow: 0 10px 20px rgba(255, 203, 4, 0.8);
transform: scale(1.02, 1.02);
}

.video_thumbnail {
background-color: #000000;
border-radius: 10px;
border: 1px solid rgba(255, 255, 255, 0.36);
transition: all 0.5s ease;

}

.video_container:hover .video_thumbnail {
box-shadow: inset 0 0 33px 0 #ffcb04;
}

.video_thumbnail i {
transition: all 0.5s ease;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 100px;
color: #ffffffaa;

}

.video_title {
margin-bottom: 10px;
color: white;
font-size: 24px;
text-align: center;
margin-top: 10px;
transition: all 0.5s ease;
}


.video_sub_title {
margin-bottom: 10px;
color: #a5a5a5;
text-align: center;
margin-top: 10px;
transition: all 0.5s ease;
}


.video_container:hover .video_title {
font-size: 26px;
color: #ffcb04;
}

.video_container:hover .video_sub_title {
font-size: 18px;
}

.top_post_title {
transition: all 0.5s ease;
}

.top_post_title:hover {
color: #1877F2;
font-size: 24px;


}


.request_button, .pre_pay_button {

position: relative;
height: 100px;
width: 300px;
text-align: center;
border-radius: 10px;
display: flex;
flex-direction: column;
flex-direction: row;
align-items: center;
justify-content: left;
z-index: 20;
background-color: white;
border: 1px solid #ffcb04;
color: #ffcb04;
padding: 10px;
transition: all 0.5s ease;
cursor: pointer;
box-shadow: inset 0 0 10px 0 #ffcb04;
-webkit-box-shadow: inset 0 0 10px 0 #ffcb04;
-moz-box-shadow: inset 0 0 10px 0 #1877f2;

}

.request_button:hover, .pre_pay_button:hover {
box-shadow: inset 0 0 33px 0 #ffcb04;
-webkit-box-shadow: inset 0 0 33px 0 #ffcb04;
-moz-box-shadow: inset 0 0 33px 0 #1877f2;
}

.btn_ripple_container {
height: 100px;
width: 300px;
text-align: center;
border-radius: 50%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin-top: -100px;

}


.btn_ripple {
position: absolute;
width: 400px;
height: 150px;
z-index: 10;
opacity: 0;
margin: 0;
border-radius: 10px;
-webkit-animation: ripple 1.8s infinite;
animation: ripple 1.8s infinite;
}

.order_button_text {
font-size: 28px;
color: #aaaaaa;
transition: all 0.5s ease;
}

.request_button:hover .order_button_text {
font-size: 30px;
color: #444444;

}

.btn_ripple_container .pinkBg {
background-image: linear-gradient(90deg, #ffcb04, #ffcb04);
}

.pinkBg {
background-color: #ffcb04 !important;
background-image: linear-gradient(90deg, #ffcb04, #5A9DFF);

}

.intro-banner-vdo-play-btn {
height: 300px;
width: 300px;
position: absolute;
top: 50%;
text-align: center;
border-radius: 50%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
z-index: 20;
background-color: white;
border: 1px solid #ffcb04;
color: #ffcb04;
-webkit-box-shadow: inset 0 0 33px 0 #ffcb04;
-moz-box-shadow: inset 0 0 33px 0 #1877f2;
box-shadow: inset 0 0 33px 0 #ffcb04;

}

.intro-banner-vdo-play-btn i {
line-height: 56px;
font-size: 80px;
color: #1877F2;
font-style: normal;
z-index: 20;
margin-top: -10px;

}

.ripple_container {
height: 300px;
width: 300px;
position: absolute;
top: 50%;
text-align: center;
border-radius: 50%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;

}

.ripple_container .ripple {
position: absolute;
width: 600px;
height: 600px;
z-index: 10;
left: 50%;
top: 50%;
opacity: 0;
margin: -300px 0 0 -300px;
border-radius: 50%;
-webkit-animation: ripple 1.8s infinite;
animation: ripple 1.8s infinite
}


#order-top-button {
position: relative;
width: 150px;
float: right;
display: flex;
flex-direction: column;
align-items: flex-end;
justify-content: center;
margin-top: -10px;
}

#order-top-button .request_button, #order-top-button .pre_pay_button {
background-color: #000000;

}

#order-top-button .request_button:hover, #order-top-button .pre_pay_button:hover {
/*background-color:#ffffff;*/
box-shadow: inset 0 0 33px 0 #ffcb04;
-webkit-box-shadow: inset 0 0 33px 0 #ffcb04;
-moz-box-shadow: inset 0 0 33px 0 #ffcb04;
}


#order-top-button .request_button .order_button_text, #order-top-button .pre_pay_button .order_button_text {
font-size: 14px;
color: #eeeeee;

}


#order-top-button .request_button:hover .order_button_text, #order-top-button .pre_pay_button:hover .order_button_text {
font-size: 16px;
/*color: #444444;*/

}


@-webkit-keyframes ripple {
0% {
opacity: 1;
-webkit-transform: scale(0);
transform: scale(0)
}
100% {
opacity: 0;
-webkit-transform: scale(1);
transform: scale(1)
}
}

@keyframes ripple {
0% {
opacity: 1;
-webkit-transform: scale(0);
transform: scale(0)
}
100% {
opacity: 0;
-webkit-transform: scale(1);
transform: scale(1)
}
}

.ripple_container .ripple:nth-child(2), .btn_ripple_container .btn_ripple:nth-child(2) {
animation-delay: .3s;
-webkit-animation-delay: .3s
}

.ripple_container .ripple:nth-child(3), .btn_ripple_container .btn_ripple:nth-child(3) {
animation-delay: .6s;
-webkit-animation-delay: .6s
}

#header #logo h1 .banner_logo {
width: 80px;
height: 80px;
position: relative;
margin-top: 10px;
margin-right: 10px;
box-shadow: inset 0 0 5px 0 #ffcb04;
border-radius: 50%;
background: white;
}

#header #logo h1 .banner_logo:hover {
width: 95px;
height: 95px;
position: relative;
margin-top: 10px;
margin-right: 10px;
box-shadow: inset 0 0 5px 0 #ffcb04;
border-radius: 50%;
background: white;
}

.shipping_company_container {
background-color: #FFFFFF;
border-radius: 10px;
margin: 20px auto;
padding: 5px;
text-align: center;
padding: 10px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 100px;
box-shadow: 0 1px 2px rgba(0,0,0,0.2);
transition: all 0.5s ease;
}

.shipping_company_container img {
width: 100%;
}

.shipping_company_container:hover {
box-shadow: 0 10px 20px rgba(255, 203, 4, 0.8);
transform: scale(1.04, 1.04) !important;
}

.footer_link, .footer_link a {
color: #ffffff;
font-size: 24px;
margin-bottom: 0px;
width: 100%;
transition: all 0.5s ease;
}

.footer_link:hover, .footer_link:hover a {
color: #ffcb04;
font-size: 26px;
}

.footer_link.template_ar {
text-align: right;
}

.footer_link.template_en {
text-align: left;
}

@media (max-width: 640px) {
.intro-banner-vdo-play-btn {
height: 200px;
width: 200px;
}

.ripple_container {
height: 200px;
width: 200px;
}

.ripple_container .ripple {
width: 400px;
height: 400px;
margin: -200px 0 0 -200px;
}

.logo-image-container {

max-height: 220px;
}


#header #logo h1 .banner_logo {
width: 50px;
height: 50px;
position: relative;
margin-top: 22px;
}

#header #logo h1 .banner_logo:hover {
width: 55px;
height: 55px;
position: relative;
margin-top: 22px;
}

.shipping_company_container img {
max-width: 180px;
}
}

@media (max-width: 998px) {
#language_wrapper, #order-top-button {
display: none;
}

#menuToggle {
display: block;
}
}


/*=====================================================
FAQ style
=====================================================*/

.faq_answer {
display: none;
width: 100%;
}

.faq_answer .answer_wrapper {
display: table;
overflow: hidden;
border-left: 5px solid #bbb;
background-color: white;
}

.faq_answer .a_answer {
font-size: 42px;
padding: 2px 5px 5px;
color: #bbb;
}

.faq_answer .answer_content {
display: table-cell;
vertical-align: middle;
color: #999;
padding: 5px;
text-align: left;
width: 100%;
}


.faq_question {
width: 100%;
background-color: #f9f9f9;

}

.faq_question.selected {
width: 100%;
background-color: #FFF7D9;

}


.faq_question .q_question {
font-size: 42px;
padding: 2px 5px 5px;
color: #666;
cursor: pointer;
}


.faq_question.selected .q_question {
color: #666;
}

.faq_question .question_wrapper {
display: table;
overflow: hidden;
border-left: 5px solid #666;
cursor: pointer;

}

.faq_question.selected .question_wrapper {
border-left: 5px solid #FAA61F;
}

.faq_question .question_content {
display: table-cell;
vertical-align: middle;
color: #666;
padding: 5px;
}


.faq_question.ar {
direction: rtl;
}

.faq_question.ar .question_wrapper {
border-left: none;
border-right: 5px solid #666;;
}

.faq_question.ar.selected .question_wrapper {
border-right: 5px solid #FAA61F;
}


.faq_answer.ar {
display: none;
direction: rtl;
}

.faq_answer.ar .a_answer, .faq_question.ar .q_question {
padding-bottom: 30px;
}

.faq_answer.ar .answer_wrapper {
border-left: none;
border-right: 5px solid #bbb;
}

.faq_answer.ar .answer_content, .faq_question.ar .question_content {
font-size: 20px;
text-align: right;
}


.view_count {
font-size: 18px;
font-weight: bold;
color: #cccccc;
}

.faq_question.selected .view_count, .faq_question.ar.selected .view_count {
color: #FAA61F;
}


.question_section {

width: 100%;
padding: 10px;
border-radius: 10px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
margin-top: 20px;
background-color: white;

}


/* The Modal (background) */
.image-modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 5555; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0, 0, 0); /* Fallback color */
background-color: rgba(0, 0, 0, 0.9); /* Black w/ opacity */
}

/* Modal Content (Image) */
.image-modal-content {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
cursor: pointer;
}

/* Caption of Modal Image (Image Text) - Same Width as the Image */
#image-caption {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
text-align: center;
color: #ccc;
padding: 10px 0;
height: 150px;
}

/* Add Animation - Zoom in the Modal */
.image-modal-content, #image-caption {
animation-name: zoom;
animation-duration: 0.6s;
}


/* Add Animation - Zoom in the Modal */
.image-modal-content.out, #image-caption.out {
animation-name: zoom-out;
animation-duration: 0.6s;
}




@keyframes zoom {
from {
transform: scale(0)
}
to {
transform: scale(1)
}
}


@keyframes zoom-out {
from {
transform: scale(1)
}
to {
transform: scale(0)
}
}

/* The Close Button */
.image-modal-close {
position: absolute;
top: 15px;
right: 35px;
color: #f1f1f1;
font-size: 40px;
font-weight: bold;
transition: 0.3s;
}

.image-modal-close:hover,
.image-modal-close:focus {
color: #bbb;
text-decoration: none;
cursor: pointer;
}


.faq_answer_image {
width: 100px;
border-radius: 5px;
border: 1px solid #cccccc;
padding: 5px;
margin-left: auto;
margin-right: auto;
cursor: pointer;
margin: 16px;
transition: all 0.2s;
}

.faq_answer_image:hover {
box-shadow: 0 5px 10px rgba(255, 203, 4, 0.80);
transform: scale(1.02, 1.02);
}

/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px) {
.image-modal-content {
width: 100%;
}
}


.blog_section_title {
font-size: 20px;
font-weight: bold;
text-align: center;
margin-top: 24px;
}

.blog_section_content {
font-size: 18px;
text-align: center;
}

.blog_section_image {
width: 400px;
border-radius: 5px;
border: 1px solid #cccccc;
padding: 5px;
margin: 5px auto;
cursor: pointer;
transition: all 0.5s;
}

.blog_section_image:hover {
box-shadow: 0 5px 10px rgba(255, 203, 4, 0.80);
transform: scale(1.02, 1.02);
}

#selected_blog_number_of_clicks {
font-size: 16px;
width: 80px;
margin: 5px auto;
border: 1px solid #cccccc;
padding: 10px;
border-radius: 5px;
position: fixed;
top: 100px;
right: 10px;
background: #ffffff;
transition: all 0.5s;
}

#selected_blog_number_of_clicks:hover {
box-shadow: 0 5px 10px rgba(255, 203, 4, 0.80);
transform: scale(1.02, 1.02);
}



div.blog_post_container {
background-color: #FFFFFF;
/*border: 1px solid #ccc;*/
/*width: 240px;*/
min-height: 335px;
border-radius: 10px;
margin: 40px auto;
padding: 5px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
cursor: pointer;
transition: all 0.5s ease;
}


div.blog_post_container:hover {
box-shadow: 0 10px 20px rgba(255, 203, 4, 0.8);
transform: scale(1.04, 1.04) !important;

}

.slick-prev, .slick-next {
color: #FAA61F;
border-radius: 50%;
width: 66px;
height: 66px;
z-index: 1;
display: flex;
align-items: center;
justify-content: center;

}


.slick-prev:before, .slick-next:before {
font-size: 66px;

border-radius: 50%;
opacity:1.0;

color: rgba(255, 203, 4, 0.8);
line-height: 0;
vertical-align: -50%;
transition: all 0.5s ease;

}


.slick-prev:hover:before, .slick-next:hover:before {


color: #FAA61F;
transform: scale(1.04, 1.04) !important;

}



.keyword {
float: left;
margin: 5px;
padding: 5px;
border: 1px solid #ccc;
border-radius: 200px;
font-size: 14px;
min-width: 80px;
text-align: center;
text-decoration: none;
list-style: none;
background: rgba(255, 203, 4, 0.2);
border-color: rgb(255, 203, 4);
color: #666666;
transition: all 0.3s ease-in-out;
}


.keyword:hover {

transform: scale(1.08, 1.08);
box-shadow: 0 0 10px rgb(255, 203, 4);

-webkit-box-shadow: inset 0 0 10px 0 rgb(255, 203, 4);
-moz-box-shadow: inset 0 0 10px 0 rgb(255, 203, 4);
box-shadow: inset 0 0 10px 0 rgb(255, 203, 4);
}




.fab {
position: fixed;
bottom: 6px;
left: 32px;
border-radius: 50%;
width: 60px;
height: 60px;
background: #ffffff;
box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.01), 0 -4px 10px 0 rgba(0, 0, 0, 0.1);
z-index: 999;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
cursor: pointer;

}

.fab:hover {

}

.fab i {
font-size: 28px;
transform: rotate(0deg);
transition: all 0.5s ease-in-out;
color: #ccc;
}

.box {
position: fixed;
bottom: 6px;
left: 40px;
height: 337px;
transition-delay: 0.3s;
width: 80px;
transition: 0.5s cubic-bezier(0.445, 0.05, 0.55, 0.95);
display: flex;
flex-direction: column;
justify-content: center;
z-index: 888;
}

.item {
overflow: hidden;
border-radius: 50%;
width: 44px;
height: 44px;
margin-top: 5px;
margin-bottom: 5px;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
box-shadow: 1px 1px 3px gray;
transition: all 0.5s ease-in-out;
opacity: 0;
cursor: pointer;
color: rgb(255, 203, 4);
background: #ffffff;
}

.item:hover {
transform: scale(1.2);
/*box-shadow: 0 0 10px 0 #1877F288;*/
color: #FAA61F;
box-shadow: 1px 1px 3px rgba(255, 203, 4, 0.88);
}

.item1 {

color: rgb(255, 203, 4);
margin-top: 250px;
}

.item i {
font-size: 30px;
}

.box a:link, .box a:visited, .box a:hover, .box a:active {
text-decoration: none;
}

.item-active {
opacity: 1;
}

.top-item-active {
margin-top: 0px;
}

.fab-active i {
transform: rotate(180deg);
color: #FAA61F;
}

.fab-active {
box-shadow: 0 0 10px 0 rgba(255, 203, 4, 0.88);
}

input:focus,
textarea:focus,
select:focus {
outline: none;
}


/* Hussain 28/9/2023 */
.instagram{
color: #de16a2 !important;
}
.instagram:hover {
box-shadow: 0 10px 20px #eb46b9 !important;
transform: scale(1.04, 1.04) !important;
}
.youtube{
color: rgb(255 34 34)!important;
}

.youtube:hover {
box-shadow: 0 10px 20px rgb(255 34 34 / 80%) !important;
transform: scale(1.04, 1.04) !important;
}

.twitter:hover {
box-shadow: 0 10px 20px #252d2988 !important;
transform: scale(1.04, 1.04) !important;
}
.twitter {
color: rgb(255 34 34)!important;
}

.join-minh{
min-height: 70px !important;
}