@font-face {
font-family: 'irsans';
src: url('../font/iransans.woff2') format('woff');
src: url('../font/iransans.woff') format('woff');
font-weight: normal;
}
@font-face {
font-family: 'iram';
src: url('../font/iransans-medium.woff2') format('woff');
src: url('../font/iransans-medium.woff') format('woff');
font-weight: 500;
} 
:root{
--main-color: #019267;
--secondary-color: #EBBF58;
--black: #000;
--white: #fff;
--grey: #666;
--border-radius: 0.5rem;
--border: 0.1rem solid rgba(0, 0, 0, 0.1);
--box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
--text-shadow: 3px 3px 3px rgba(0, 0, 0, 0.2);
}

.farsi::after {
  position: absolute;
  content: '';
  display: inline-block;
  background: url(../img/fa.svg) no-repeat 9px;
  width: 53px;
  height: 18px;
  top: 11px;
}
.english::after {
  position: absolute;
  content: '';
  display: inline-block;
  background: url(../img/en.svg) no-repeat 10px;
  width: 41px;
  height: 18px;
  top: 11px;
}

.bliner {
  color: #141414;
  padding: 40px 30px;
  margin: 37px 8%;
  font-size: 13px;
  border-radius: 9px;
}
.pagee {
  margin-top: 160px;
}
.menu ul li {
  display: initial;
}
*{
font-family: 'irsans',tahoma;
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
outline:none;
border: none;
text-decoration: none;
text-transform: capitalize;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
transition: all 0.2s linear;
}
*::selection{
color: var(--white);
background-color: var(--main-color);
}
html{
font-size: 62.6%;
overflow-x: hidden;
scroll-padding-top: 7rem;
scroll-behavior: smooth;
}
html::-webkit-scrollbar{
width: 0.8rem;
}
html::-webkit-scrollbar-track {
background: var(--black);
}
html::-webkit-scrollbar-thumb {
background: var(--main-color);
border-radius: var(--border-radius);
}
body{
background: var(--white);
}
section{
padding: 2rem 5%;
}
.swiper-pagination-bullet{
height: 1rem;
width: 1rem;
border-radius : 50rem;
background: #fff;
opacity: 0.5;
}
.swiper-pagination-bullet-active{
width: 3rem;
background-color: #fff;
opacity: 0.9;
}
/*--------------------- 0- Global CSS (End) ------------------------*/
/*--------------------- 1- Heading CSS (Start) ---------------------*/
.heading{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-ms-grid-row-align: center;
align-items: center;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
margin-bottom: 2rem;
}
.heading h1{ 
font-size: 2rem;
}
.heading .design{
height: 3rem;
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
-ms-grid-row-align: center;
align-items: center;
}
.heading .design img{
width: 100%;
height: 100%;
margin: 1rem;
}
.heading .design::before, .heading .design::after {
content: "";
position: absolute;
background: #0ebbff;
width: 10rem;
height: 0.2rem;
}
.heading .design:before{
right: 100%;
}
.heading .design:after{
left: 100%;
}
.linear-bg .heading{
color: var(--white);
}
/*--------------------- 1- Heading CSS (End) -----------------------*/
/*--------------------- 2- Button CSS (Start) ----------------------*/
.btn{
display: inline-block;
color: #222; 
background: #f9b632;
font-size: 1.8rem; 
padding: 5px 15px;  
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
-webkit-box-shadow: var(--box-shadow);
box-shadow: var(--box-shadow);
border-radius: 8px;
}
/*--------------------- 2- Button CSS (End) ------------------------*/
/*--------------------- 3- Logo Area CSS (Start) -------------------*/
.logo{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
-ms-grid-row-align: center;
align-items: center;
gap: 1rem;
}
.logo img{
height: 5rem;
object-fit: cover;
}
.logo .logo-name h3{
color: var(--main-color);
font-size: 1.8rem; 
}
.logo .logo-name p{
font-size: 1.5rem;
color: var(--grey);
}
/*--------------------- 3- Logo Area CSS (End) ---------------------*/
/*--------------------- 4- Pre-Loader CSS (Start) ---------------*/
.loader-container {
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
background: var(--secondary-color);
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
z-index: 100000;
-webkit-transition: none;
transition: none;
}
.loader-container.fade-out{
top: -110%;
opacity: 0;
}
.loader{
position: relative;
width: 75px;
height: 100px;
}
.loader__bar {
position: absolute;
bottom: 0;
width: 10px;
height: 50%;
background: var(--white);
-webkit-transform-origin: center bottom;
transform-origin: center bottom;
box-shadow: 1px 1px 0 rgba(0, 0, 0, .2);
}
.loader__bar:nth-child(1) {
left: 0px;
-webkit-transform: scale(1, 0.2);
transform: scale(1, 0.2);
-webkit-animation: barUp1 4s infinite;
animation: barUp1 4s infinite;
}
.loader__bar:nth-child(2) {
left: 15px;
-webkit-transform: scale(1, 0.4);
transform: scale(1, 0.4);
-webkit-animation: barUp2 4s infinite;
animation: barUp2 4s infinite;
}
.loader__bar:nth-child(3) {
left: 30px;
-webkit-transform: scale(1, 0.6);
transform: scale(1, 0.6);
-webkit-animation: barUp3 4s infinite;
animation: barUp3 4s infinite;
}
.loader__bar:nth-child(4) {
left: 45px;
-webkit-transform: scale(1, 0.8);
transform: scale(1, 0.8);
-webkit-animation: barUp4 4s infinite;
animation: barUp4 4s infinite;
}
.loader__bar:nth-child(5) {
left: 60px;
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
-webkit-animation: barUp5 4s infinite;
animation: barUp5 4s infinite;
}
.loader__ball {
position: absolute;
bottom: 10px;
left: 0;
width: 10px;
height: 10px;
background: var(--white);
border-radius: 50%;
-webkit-animation: ball 4s infinite;
animation: ball 4s infinite;
}
@-webkit-keyframes ball {
0% {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
5% {
-webkit-transform: translate(8px, -14px);
transform: translate(8px, -14px);
}
10% {
-webkit-transform: translate(15px, -10px);
transform: translate(15px, -10px);
}
17% {
-webkit-transform: translate(23px, -24px);
transform: translate(23px, -24px);
}
20% {
-webkit-transform: translate(30px, -20px);
transform: translate(30px, -20px);
}
27% {
-webkit-transform: translate(38px, -34px);
transform: translate(38px, -34px);
}
30% {
-webkit-transform: translate(45px, -30px);
transform: translate(45px, -30px);
}
37% {
-webkit-transform: translate(53px, -44px);
transform: translate(53px, -44px);
}
40% {
-webkit-transform: translate(60px, -40px);
transform: translate(60px, -40px);
}
50% {
-webkit-transform: translate(60px, 0);
transform: translate(60px, 0);
}
57% {
-webkit-transform: translate(53px, -14px);
transform: translate(53px, -14px);
}
60% {
-webkit-transform: translate(45px, -10px);
transform: translate(45px, -10px);
}
67% {
-webkit-transform: translate(37px, -24px);
transform: translate(37px, -24px);
}
70% {
-webkit-transform: translate(30px, -20px);
transform: translate(30px, -20px);
}
77% {
-webkit-transform: translate(22px, -34px);
transform: translate(22px, -34px);
}
80% {
-webkit-transform: translate(15px, -30px);
transform: translate(15px, -30px);
}
87% {
-webkit-transform: translate(7px, -44px);
transform: translate(7px, -44px);
}
90% {
-webkit-transform: translate(0, -40px);
transform: translate(0, -40px);
}
100% {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
}
@keyframes ball {
0% {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
5% {
-webkit-transform: translate(8px, -14px);
transform: translate(8px, -14px);
}
10% {
-webkit-transform: translate(15px, -10px);
transform: translate(15px, -10px);
}
17% {
-webkit-transform: translate(23px, -24px);
transform: translate(23px, -24px);
}
20% {
-webkit-transform: translate(30px, -20px);
transform: translate(30px, -20px);
}
27% {
-webkit-transform: translate(38px, -34px);
transform: translate(38px, -34px);
}
30% {
-webkit-transform: translate(45px, -30px);
transform: translate(45px, -30px);
}
37% {
-webkit-transform: translate(53px, -44px);
transform: translate(53px, -44px);
}
40% {
-webkit-transform: translate(60px, -40px);
transform: translate(60px, -40px);
}
50% {
-webkit-transform: translate(60px, 0);
transform: translate(60px, 0);
}
57% {
-webkit-transform: translate(53px, -14px);
transform: translate(53px, -14px);
}
60% {
-webkit-transform: translate(45px, -10px);
transform: translate(45px, -10px);
}
67% {
-webkit-transform: translate(37px, -24px);
transform: translate(37px, -24px);
}
70% {
-webkit-transform: translate(30px, -20px);
transform: translate(30px, -20px);
}
77% {
-webkit-transform: translate(22px, -34px);
transform: translate(22px, -34px);
}
80% {
-webkit-transform: translate(15px, -30px);
transform: translate(15px, -30px);
}
87% {
-webkit-transform: translate(7px, -44px);
transform: translate(7px, -44px);
}
90% {
-webkit-transform: translate(0, -40px);
transform: translate(0, -40px);
}
100% {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
}
@-webkit-keyframes barUp1 {
0% {
-webkit-transform: scale(1, 0.2);
transform: scale(1, 0.2);
}
40% {
-webkit-transform: scale(1, 0.2);
transform: scale(1, 0.2);
}
50% {
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
}
90% {
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
}
100% {
-webkit-transform: scale(1, 0.2);
transform: scale(1, 0.2);
}
}
@keyframes barUp1 {
0% {
-webkit-transform: scale(1, 0.2);
transform: scale(1, 0.2);
}
40% {
-webkit-transform: scale(1, 0.2);
transform: scale(1, 0.2);
}
50% {
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
}
90% {
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
}
100% {
-webkit-transform: scale(1, 0.2);
transform: scale(1, 0.2);
}
}
@-webkit-keyframes barUp2 {
0% {
-webkit-transform: scale(1, 0.4);
transform: scale(1, 0.4);
}
40% {
-webkit-transform: scale(1, 0.4);
transform: scale(1, 0.4);
}
50% {
-webkit-transform: scale(1, 0.8);
transform: scale(1, 0.8);
}
90% {
-webkit-transform: scale(1, 0.8);
transform: scale(1, 0.8);
}
100% {
-webkit-transform: scale(1, 0.4);
transform: scale(1, 0.4);
}
}
@keyframes barUp2 {
0% {
-webkit-transform: scale(1, 0.4);
transform: scale(1, 0.4);
}
40% {
-webkit-transform: scale(1, 0.4);
transform: scale(1, 0.4);
}
50% {
-webkit-transform: scale(1, 0.8);
transform: scale(1, 0.8);
}
90% {
-webkit-transform: scale(1, 0.8);
transform: scale(1, 0.8);
}
100% {
-webkit-transform: scale(1, 0.4);
transform: scale(1, 0.4);
}
}
@-webkit-keyframes barUp3 {
0% {
-webkit-transform: scale(1, 0.6);
transform: scale(1, 0.6);
}
100% {
-webkit-transform: scale(1, 0.6);
transform: scale(1, 0.6);
}
}
@keyframes barUp3 {
0% {
-webkit-transform: scale(1, 0.6);
transform: scale(1, 0.6);
}
100% {
-webkit-transform: scale(1, 0.6);
transform: scale(1, 0.6);
}
}
@-webkit-keyframes barUp4 {
0% {
-webkit-transform: scale(1, 0.8);
transform: scale(1, 0.8);
}
40% {
-webkit-transform: scale(1, 0.8);
transform: scale(1, 0.8);
}
50% {
-webkit-transform: scale(1, 0.4);
transform: scale(1, 0.4);
}
90% {
-webkit-transform: scale(1, 0.4);
transform: scale(1, 0.4);
}
100% {
-webkit-transform: scale(1, 0.8);
transform: scale(1, 0.8);
}
}
@keyframes barUp4 {
0% {
-webkit-transform: scale(1, 0.8);
transform: scale(1, 0.8);
}
40% {
-webkit-transform: scale(1, 0.8);
transform: scale(1, 0.8);
}
50% {
-webkit-transform: scale(1, 0.4);
transform: scale(1, 0.4);
}
90% {
-webkit-transform: scale(1, 0.4);
transform: scale(1, 0.4);
}
100% {
-webkit-transform: scale(1, 0.8);
transform: scale(1, 0.8);
}
}
@-webkit-keyframes barUp5 {
0% {
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
}
40% {
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
}
50% {
-webkit-transform: scale(1, 0.2);
transform: scale(1, 0.2);
}
90% {
-webkit-transform: scale(1, 0.2);
transform: scale(1, 0.2);
}
100% {
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
}
}
@keyframes barUp5 {
0% {
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
}
40% {
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
}
50% {
-webkit-transform: scale(1, 0.2);
transform: scale(1, 0.2);
}
90% {
-webkit-transform: scale(1, 0.2);
transform: scale(1, 0.2);
}
100% {
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
}
}
/*--------------------- 4- Pre-Loader CSS (Start) ---------------*/
/*--------------------- 5- Header Area CSS (Start) -----------------*/
.header1{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
-ms-flex-align: center;
-ms-grid-row-align: center;
align-items: center;
padding: 0 5%;
background: #2c2d2e;
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 1000;
height: 40px;
-webkit-box-shadow: var(--box-shadow);
box-shadow: var(--box-shadow);
}
.header1 p {
color: #fff;
padding: 0;
font-size: 13px;
line-height: 0;
margin-top: -3px;
}
.header1 .bala a{
display: inline-block;
padding: 0;
margin: -5px 5px;
font-size: 1.6rem;
font-weight: 500;
color: #fff;
border-bottom: 0.2rem solid transparent;
}
.header1 #menu-btn{
font-size: 2.4rem;
color: #fff;
cursor: pointer;
display: none;
}
.header1 #menu-btn:hover{
color: var(--secondary-color);
}
/*--------------------- 5- Header Area CSS (Start) -----------------*/
.header{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
right-content: space-between;
-webkit-box-align: center;
-ms-flex-align: center;
-ms-grid-row-align: center;
align-items: center;
padding: 1rem 5%;
background: var(--white);
position: fixed;
top: 40px;
left: 0;
width: 100%;
z-index: 1000;
-webkit-box-shadow: var(--box-shadow);
box-shadow: var(--box-shadow);
}
.header .navbar a{
display: inline-block;
padding: 0.8rem 1.5rem;
margin: 0.3rem;
font-size: 1.6rem;
font-weight: 100;
color: var(--black);
border-bottom: 0.2rem solid transparent;
}
.header .navbar a:hover,
.header .navbar a.active{
color: #090809;
border-color: #111;
}
.header #menu-btn{
font-size: 2.4rem;
color: var(--main-color);
cursor: pointer;
display: none;
}
.header #menu-btn:hover{
color: var(--secondary-color);
}
/*--------------------- 5- Header Area CSS (End) -------------------*/
.search {
position: relative;
}
.searchTerm {
width: 100%;
border: 1px solid #A9AAAA;
padding: 4px;
border-radius: 7px;
color: #686A69;
text-align: left;
}
.searchTerm:focus{
color: #00B4CC;
}
.searchButton {
width: 40px;
height: 36px;
background: #6C707100;
color: #a4a0a0;
border-radius: 0 5px 5px 0;
cursor: pointer;
font-size: 20px;
position: absolute;
right: 0;
}
/*Resize the wrap to see the search bar change!*/
.wrap {
  float: right;
  right: 8% !important;
  position: absolute;
  width: 30% !important;
}
.cartz {
  float: right;
  right: 5% !important;
  position: absolute;
  display: inline-grid;
}
/*--------------------- 6- Home Area CSS (Start) -------------------*/
.home{
width: 100%;
padding: 0;
min-height: 500px;
position: relative;
top: 42px;
}
.home-slider {
  position: relative;
  height: 500px;
}
.home-slider .swiper-button-next,
.home-slider .swiper-button-prev{
color: var(--secondary-color);
padding: 2rem;
}
.home-slider .swiper-button-next::after,
.home-slider .swiper-button-prev::after {
font-size: 4rem;
font-weight: bold;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-ms-grid-row-align: center;
align-items: center;
}
.home-slider .swiper-button-next:hover,
.home-slider .swiper-button-prev:hover {
color: var(--main-color);
}
.home-item{
position: relative;
}
.home-item .image{ 
}
.home-item .image img{ 
width: 34%; 
float: left;
}
.logosl img {
  width: 30%;
  float: right;
  right: 5%;
  position: relative;
} 
.logosr {
width:60%;
text-align:center;
padding: 0 0 0 5%;
}    
.home-item .content{ 
position: absolute;
top: 0%;
right: 0%;
width: 100%;
height: 500px;
padding-top: 5rem;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-ms-grid-row-align: center;
align-items: center; 
background:   #585858;
}
.home-item .content .text{
text-align: center;
width: 100%;
}
.home-item .content .logo{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.logosr span {
color: #f9b632;
}
.home-item .content h5{
font-size: 2.5rem;
font-weight: bold;
color: var(--secondary-color);
font-style: italic; 
font-family: 'irsans',tahoma;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
padding-bottom: 1rem;
}
.home-item .content h2{
font-size: 3.5rem;
color: var(--white);
text-shadow: 0.3rem 0.3rem 0.3rem rgba(0, 0, 0, 0.5);
}
.home-item .heading{
margin-bottom: 0;
margin-top: 1rem;
}
.home-item .heading .design-info{
font-size: 1.3rem;
font-weight: bold;
color: var(--main-color);
}
.heading .design .design-info{
height: 100%;
padding: 0 1rem;
z-index: 1;
font-size: 2rem;
color: var(--main-color)
}
.home-item .content p{
color: var(--white);
font-size: 1.5rem;
line-height: 2;
padding: 2rem 0;
}
/*--------------------- 6- Home Area CSS (End) ---------------------*/
/*--------------------- 7- About Area CSS (Start) ------------------*/
.about .box-container{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
-ms-grid-row-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
gap: 4rem;
}
.about .content{
-webkit-box-flex: 1;
-ms-flex: 1 1 40rem;
flex: 1 1 40rem;
}
.about .content .heading{
-webkit-box-align: start;
-ms-flex-align: start;
-ms-grid-row-align: flex-start;
align-items: flex-start;
}
.about .content .heading h1{
font-size: 4rem;
}
.about .content .heading .design{
-webkit-transform: translateX(150%);
transform: translateX(150%);
}
.about .content p{
color: var(--grey);
font-size: 1.6rem;
line-height: 1.9;
}
.about .content ul{
padding: 1rem 1.5rem;
padding-bottom: 2rem;
list-style-type: square;
}
.about .content li::marker{
color: var(--main-color);
}
.about .content li{
padding: 0.5rem 0;
padding-left: 1rem;
font-size: 1.6rem;
color: #282b2a;
}
.about .image{
-webkit-box-flex: 1;
-ms-flex: 1 1 45rem;
flex: 1 1 45rem;
overflow: hidden;
}
.about .image > div {
width: 100%;
display: -ms-grid;
display: grid;
-ms-grid-columns: (minmax(20rem, 1fr))[auto-fit];
grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
}
.about .image .image1,
.about .image .image4 {
padding: 1rem 3rem;
position: relative;
}
.about .image img{
width: 100%;
height: 100%;
object-fit: cover;
}
.moree {
float: left;
font-size: 15px;
}
.services .box-container{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
gap: 1.5rem;
top: 50px;
position: relative;
}
.about {
padding: 2rem 5%;
top: 100px;
position: relative;
background: #f8fafd;
}
.services {
padding: 2rem 5%;  
position: relative;
}
.servicesx {
padding: 2rem 5%;  
width: 80%;
margin:  100px  auto 0; 
}
.service-item{
-webkit-box-flex: 1;
-ms-flex: 1 1 25rem;
flex: 1 1 25rem;
padding: 2rem;
text-align: center;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
-ms-grid-row-align: center;
align-items: center;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
.service-item .image{
width: 15rem;
height: 15rem;
border-radius: 50%;
padding: 3.5rem;
}
.service-item:hover .image {
overflow: hidden;
outline: 0.1rem solid #c8c8c8;
outline-offset: 0.3rem;
}
.service-item img{
width: 100%;
height: 100%;
object-fit: contain;
}
.service-item h3 {
font-size: 1.5rem;
color: #4f4f4f;
}
.accordion .accordion-item {
border-bottom: 1px solid #e5e5e5;
}
.accordion .accordion-item button[aria-expanded='true'] {
 
}
.accordion button {
position: relative;
display: block;
text-align: right;
width: 100%;
padding: 1em 0;
color: #7288a2;
font-size: 1.15rem;
font-weight: 400;
border: none;
background: none;
outline: none;
}
.accordion button:hover,
.accordion button:focus {
cursor: pointer;
color: #03b5d2;
}
.accordion button:hover::after,
.accordion button:focus::after {
cursor: pointer;
color: #717879;
border: 1px solid #a5abac;
}
.accordion button .accordion-title {
padding: 1em 1.5em 1em 0;
text-align: right;
font-size: 15px;
}
.accordion button .icon {
display: inline-block;
position: absolute;
top: 18px;
left: 10px;
width: 22px;
height: 22px;
}
.accordion button .icon::before {
display: block;
position: absolute;
content: '';
top: 9px;
left: 5px;
width: 10px;
height: 2px;
background: currentColor;
}
.accordion button .icon::after {
display: block;
position: absolute;
content: '';
top: 5px;
left: 9px;
width: 2px;
height: 10px;
background: currentColor;
}
.accordion button[aria-expanded='true'] {
color: #717879;
}
.accordion button[aria-expanded='true'] .icon::after {
width: 0;
}
.accordion button[aria-expanded='true'] + .accordion-content {
opacity: 1;
max-height: 9em;
transition: all 200ms linear;
will-change: opacity, max-height;
}
.accordion .accordion-content {
opacity: 0;
max-height: 0;
overflow: hidden;
transition: opacity 200ms linear, max-height 200ms linear;
will-change: opacity, max-height;
}
.accordion .accordion-item {
margin: 7px;
border-radius: 9px;
box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.1);
}
.accordion .accordion-content p {
font-size: 13px;
font-weight: 300;
margin: 1em 0;
padding: 8px 20px;
color: #6d6b6b !important;
}
.pillars{
background: -webkit-linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.7)), url("../image/Pillars.png");
background:         linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.7)), url("../image/Pillars.png");
background-size: cover;
background-position: center;
background-attachment: fixed;
padding: 7rem;
}
.pillars p{
font-size: 1.6rem;
margin-top: 1.5rem;
max-width: 65rem;
text-align: center;
}
.pillars .box-container{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-ms-flex-pack: distribute;
justify-content: space-around;
gap: 1rem;
margin-top: 6rem;
}
.pillar-item{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
text-align: center;
height: 15rem;
width: 15rem;
background: var(--main-color);
-webkit-clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}
.pillar-item i{
color: var(--white);
font-size: 3rem;
}
.pillar-item p{
color: var(--white);
font-size: 1.8rem;
font-weight: bold;
margin-top: 1rem;
}
.pillar-item:hover i,
.pillar-item:hover p{
display: none;
}
.pillar-item .inner{
display: none;
}
.pillar-item:hover .inner{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
-ms-grid-row-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
width: 100%;
height: 100%;
background: var(--white);
z-index: 2;
}
.pillar-item h3{
font-size: 1.5rem;
color: var(--main-color);
}
/*--------------------- 9- Pillars of Islam Area CSS (End) ---------*/
/*--------------------- 10- Volunteers Area CSS (Start) -----------*/ 
.volunteers .box-container{
display: -ms-grid;
display: grid;
-ms-grid-columns: (minmax(22rem, 1fr))[auto-fit];
grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr));
gap: 1rem;
}
.volunteers-item{
position: relative;
}
.volunteers-item .image{
height: 35rem;
overflow: hidden;
}
.volunteers-item .image img{
width: 100%;
height: 100%;
object-fit: cover;
}
.volunteers-item:hover .image img{
scale: 1.05;
}
.volunteers-item .content{
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
.volunteers-item .icon-container .inner{
background: var(--main-color);
width: 4.5rem;
border-bottom-right-radius: 2.5rem;
padding: 1.5rem 0;
opacity: 0;
}
.volunteers-item:hover .icon-container .inner{
opacity: 1;
}
.volunteers-item .icon-container a{
height: 4.5rem;
width: 4.5rem;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-ms-grid-row-align: center;
align-items: center;
font-size: 1.7rem;
color:var(--white);
}
.volunteers-item .icon-container a:hover{
color: var(--secondary-color);
}
.volunteers-item .content .text {
width: 100%;
background: -webkit-linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.6));
background:         linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.6));
z-index: 2;
padding: 2rem;
}
.volunteers-item .content h2{
color: var(--white);
font-size: 2.5rem;
margin-bottom: 0.5rem;
}
.volunteers-item .content h5{
color: var(--secondary-color);
font-size: 1.6rem;
}
/*--------------------- 10- Volunteers Area CSS (End) --------------*/
/* -------------------- 11- Donation Area CSS (Start) ------------- */
.donation .box-container{
display: -ms-grid;
display: grid;
-ms-grid-columns: (minmax(30rem, 1fr))[auto-fit];
grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr));
gap: 1rem;
}
.donation-item{
-webkit-box-shadow: var(--box-shadow);
box-shadow: var(--box-shadow);
}
.donation-item .image{
height: 25rem;
overflow: hidden;
position: relative;
}
.donation-item .image img{
width: 100%;
height: 100%;
object-fit: cover;
}
.donation-item:hover .image img{
scale: 1.05;
}
.donation-item .image .range{
position: absolute;
bottom: 0%;
left: 0%;
right: 0%;
background: var(--white);
margin: 1.5rem;
padding: 1rem;
z-index: 10;
border-radius: var(--border-radius);
}
.donation-item .image .range .money{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
padding-bottom: 2rem;
}
.donation-item .image .range .money p{
font-size: 1.6rem;
color: var(--black);
}
.donation-item .image .range .money p span{
padding-left: 0.5rem;
color: var(--main-color);
font-weight: bold;
}
.donation-item .image .range .bar{
height: 0.8rem;
width: 100%;
background: rgba(0, 0, 0, 0.1);
margin: 1rem 0;
}
.donation-item .image .range .bar .inner{
height: 0.8rem;
background: var(--main-color);
position: relative;
}
.donation-item .image .range .bar .inner span{
position: absolute;
left: 100%;
top: -180%;
height: 3.5rem;
width: 3.5rem;
background: var(--main-color);
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-ms-grid-row-align: center;
align-items: center;
border-radius: 50%;
color: var(--white);
font-size: 1.3rem;
}
.donation-item .content{
padding: 1.5rem;    
}
.donation-item .content a{
cursor: pointer;
display: inline-block;
font-size: 2.5rem;
font-weight: bold;
color: var(--main-color);
margin-bottom: 0.5rem;
}
.donation-item .content a:hover {
color: var(--secondary-color);
}
.donation-item .content p {
font-size: 1.5rem;
line-height: 1.6;
color: var(--grey);
}
/* -------------------- 11- Donation Area CSS (End) --------------- */
/*--------------------- 12- Prayer Area CSS (Start) -----------------*/
.prayer{
background: -webkit-linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.7)), url("../image/Prayer.png");
background:         linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.7)), url("../image/Prayer.png");
background-size: cover;
background-position: center;
background-attachment: fixed;
}
.prayer .box-container {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
gap: 2rem;
margin: 4rem 0;
}
.prayer .islamic-date{
-webkit-box-flex: 1;
-ms-flex: 1 1 30rem;
flex: 1 1 30rem;
margin-top: 1rem;
}
.prayer .prayer-timing{
-webkit-box-flex: 1;
-ms-flex: 1 1 60rem;
flex: 1 1 60rem;
}
.prayer .date-item{
padding: 2.7rem;
margin-top: 2rem;
border-radius: 1rem;
background: var(--white);
}
.prayer .date-item:hover{
background: var(--main-color);
}
.prayer .date-item h2{
font-size: 2.5rem;
margin: 1rem 0;
}
.prayer .date-item h3{
font-size: 1.8rem;
margin: 1rem 0;
}
.prayer .date-item p{
font-size: 1.6rem;
margin: 1rem 0;
color: var(--grey);
}
.prayer .date-item:hover p {
color: var(--white)
}
.prayer .timing-head{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
margin-bottom: 1rem;
gap: 1rem;
}
.prayer .timing-head .head-item{
-webkit-box-flex: 1;
-ms-flex: 1 1 20rem;
flex: 1 1 20rem;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-ms-flex-align: center;
-ms-grid-row-align: center;
align-items: center;
background-color: var(--white);
padding: 1.5rem;
border-radius: var(--border-radius);;
font-size: 1.5rem;
}
.prayer .timing-head .head-item i{
font-size: 2.5rem;
margin-bottom: 0.5rem;
color: var(--main-color);
}
.prayer .prayer-timing .timing{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
margin-top: 1rem;
gap: 1rem;
border-radius: var(--border-radius);
}
.prayer .prayer-timing .timing h3,
.prayer .prayer-timing .timing p{
-webkit-box-flex: 1;
-ms-flex: 1 1 20rem;
flex: 1 1 20rem;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
padding: 1.5rem;
border-radius: var(--border-radius);;
font-size: 1.5rem;
}
.prayer .prayer-timing .timing h3{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
-ms-grid-row-align: center;
align-items: center;
gap: 1rem;
}
.prayer .prayer-timing .prayer-item h3,
.prayer .prayer-timing .prayer-item p{
background-color: var(--white);
}
.prayer .prayer-timing .prayer-item h3{
padding-left: 6rem;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
}
.prayer .prayer-timing .prayer-item p{
color: var(--grey);
}
.prayer .prayer-timing .timing.sunrise{
color: var(--white);
background: var(--main-color);
}
.prayer .prayer-timing .timing.sunset{
color: var(--white);
background: var(--secondary-color);
}
/*--------------------- 12- Prayer Area CSS (End) -------------------*/
/*--------------------- 13- Testimonials Area CSS (End) ------------*/
.testimonial-slider{
position: relative  !important;
padding-bottom: 5rem !important; 
}
.testi-item{
padding: 0rem 1rem;
position: relative;
}
.testi-item .intro{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-ms-grid-row-align: center;
align-items: center;
gap: 2rem;
margin: 2rem 0;
}
.testi-item .image{
width: 10rem;
height: 10rem;
overflow: hidden;
border-radius: 50%;
padding: 0.5rem;
border: 0.15rem solid var(--main-color);
-webkit-box-shadow: var(--box-shadow);
box-shadow: var(--box-shadow);
}
.testi-item .image img{
width: 100%;
height: 100%;
border-radius: 50%;
object-fit: cover;
}
.testi-item:hover .image img{
-webkit-transform: scale(1.05);
transform: scale(1.05);
}
.testi-item .intro .text{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-ms-flex-align: center;
-ms-grid-row-align: center;
align-items: center;
}
.testi-item .intro h2{
font-size: 2.2rem;
padding-bottom: 0.5rem;
color: var(--black);
}
.testi-item .intro h5{
font-size: 1.6rem;
color: var(--grey);
line-height: 1.5;
}
.testi-item .content{
border: 0.15rem solid var(--main-color);
padding: 2rem;
margin-bottom: 1rem;
position: relative;
}
.testi-item .content i{
font-size: 1.7rem;
color: var(--main-color);
background: var(--white);
padding: 1rem;
}
.testi-item .fa-quote-left{
position: absolute;
top: -10%;
left: -3%;
}
.testi-item .fa-quote-right {
position: absolute;
bottom: -10%;
right: -3%;
}
.testi-item .content p{
font-size: 1.5rem;
color: var(--grey);
line-height: 2;
}
/*--------------------- 13- Testimonials Area CSS (End) ------------*/
/*--------------------- 14- Events Area CSS (Start)-----------------*/
.events .box-container {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap-reverse;
flex-wrap: wrap-reverse;
gap: 1rem;
}
.event-box1{
-webkit-box-flex: 1;
-ms-flex: 1 1 10rem;
flex: 1 1 20rem;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
justify-content: space-between;
gap: 1rem;
}
.event-box2{
min-height: 35rem;
-webkit-box-flex: 1;
-ms-flex: 1 1 60rem;
flex: 1 1 80rem;
}
.event-item{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
-ms-grid-row-align: center;
align-items: center;
gap: 1.5rem; 
padding: 1.5rem;
height: 100%;
}
.event-item:hover{
background: rgba(0, 0, 0, 0.05);
}
.event-item .date{
text-align: center;
background: var(--main-color);
color: var(--white);
padding: 1rem 2.5rem;
}
.event-item .date h2{
font-size: 2rem;
text-transform: uppercase;
padding-bottom: 0.3rem;
}
.event-item .date p{
font-size: 1.5rem;
font-weight: bold;
}
.event-item .detail{
padding: 0.5rem 0;
}
.event-item .detail h3{
font-size: 1.7rem;
margin-bottom: 0.5rem;
}
.event-item .detail p{
color: var(--grey);
font-size: 1.6rem;
margin-bottom: 0.5rem;
}
.event-item .detail h4{
font-size: 1.5rem;
}
.event-item .detail i{
color: var(--main-color);
font-size: 1.4rem;
margin-right: 0.5rem;
}
.events .latest-event{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
gap: 1rem; 
height: 100%;
}
.events .latest-event:hover{
background: rgba(0, 0, 0, 0.05);
}
.events .latest-event .content{
-webkit-box-flex: 1;
-ms-flex: 1 1 30rem;
flex: 1 1 30rem;
padding: 1rem;
}
.events .latest-event .content .label{
display: inline-block;
font-size: 1.6rem;
padding: 0.6rem 1rem;
color: var(--white);
background: var(--main-color);
}
.events .latest-event .content h2{
font-size: 2rem;
padding: 1rem 0;
}
.events .latest-event .content h2 span{
color: var(--main-color);
}
.events .latest-event .content p{
font-size: 1.6rem;
color: var(--grey);
line-height: 1.6;
margin-bottom: 1rem;
}
.events .latest-event .content .description {
border-left: 2px solid var(--main-color);
padding-left: 1rem;
margin: 2rem 0;
}
.events .latest-event .description span{
display: block;
font-size: 1.6rem;
color: var(--grey);
line-height: 1.8;
}
.events .latest-event .content h4{
font-size: 1.6rem;
}
.events .latest-event .content h4 i{
color: var(--main-color);
margin-right: 0.5rem;
}
.events .latest-event .image{
-webkit-box-flex: 1;
-ms-flex: 1 1 30rem;
flex: 1 1 30rem;
overflow: hidden;
}
.events .latest-event img{
width: 100%;
height: 100%;
object-fit: cover;
}
.events .latest-event:hover img{
scale: 1.1;
}
/*--------------------- 14- Events Area CSS (End) ------------------*/
/*--------------------- 15- Counter Area CSS (Start) ---------------*/
.counting{
width: 100%;
padding: 5rem 5%;
margin: 1rem 0;
min-height: 15rem;  
display: -webkit-box;
display: -ms-flexbox;
display: flex; 
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center; 
justify-content: center; 
-ms-flex-wrap: wrap;
flex-wrap: wrap;
gap: 3rem;
background: -webkit-linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.5)), url("../image/Counter.png");
background:         linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.5)), url("../image/Counter.png");
background-position: center;
background-size: cover;
background-attachment: fixed;
}
.counting .box{
-webkit-box-flex: 1;
-ms-flex: 1 1 25rem;
flex: 1 1 25rem;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: start;
-ms-flex-align: start;
-ms-grid-row-align: flex-start;
align-items: flex-start;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
gap: 1rem;
}
.counting .box i{
color: var(--white);
font-size: 5rem;
height: 6rem;
width: 6rem;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-ms-grid-row-align: center;
align-items: center;
}
.counting .box .count{
font-size: 5rem;
font-weight: 600;
color: var(--white);
}
.counting .box h3{
font-size: 2rem;
font-weight: 500;
color: var(--white);
}
/*--------------------- 15- Counter Area CSS (Start) ---------------*/
/*--------------------- 16- Blog Area CSS (Start) ---------------*/
.blog .box-container{
display: -ms-grid;
display: grid;
-ms-grid-columns: (minmax(30rem, 1fr))[auto-fit];
grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr));
gap: 3rem;
}


.headingx {
  margin-bottom: 7rem;
}


.blog-item{
overflow: hidden;
-webkit-box-shadow: var(--box-shadow);
box-shadow: var(--box-shadow);
}
.blog-item .image{
height: 25rem;
position: relative;
}
.blog-item .image img{
height: 100%;
width: 100%;
object-fit: cover;
} 
.blog-item .date{
position: absolute;
left: 2rem;
bottom: 2rem;
width: 8rem;
text-align: center;
background-color: var(--main-color);
padding: 1rem 2rem;
font-size: 1.9rem;
font-weight: 600;
line-height: 1.4;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
text-align: center;
color: var(--white);
border-radius: var(--border-radius);
}
.blog-item .content{
padding: 2rem;
background-color: var(--white);
}
.blog-item .content .main-heading {
  display: block;
  font-size: 15px;
  font-weight: 100;
  color: var(--black);
  padding-bottom: 0;
}
.blog-item .content .main-heading:hover{
color: var(--main-color);
}
.blog-item .content p {
  font-size: 12px;
  font-weight: 100;
  color: var(--grey);
  margin-top: 12px;
}
.blog-item:hover {
  box-shadow: 0 0 5px #444;
}
.contact-info{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
gap: 1.5rem;
margin-bottom: 1.5rem;
}
.contact-info .info-item{
-webkit-box-flex: 1;
-ms-flex: 1 1 33rem;
flex: 1 1 33rem;
padding-bottom: 1.5rem;
display: -webkit-box;
display: -ms-flexbox;
display: flex; 
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-ms-flex-align: center;
-ms-grid-row-align: center;
align-items: center;
gap: 0.2rem;
padding: 2rem 1rem;
border: 0.1rem solid rgba(0,0,0,0.15);
}
.contact-info .info-item:hover{
border-color: var(--main-color);
}
.contact-info .info-item i{
font-size: 2.5rem;
color: var(--white);
background: var(--main-color);
padding: 1.5rem;
border-radius: 50%;
margin-bottom: 1rem;
border: 0.15rem solid transparent;
}
.contact-info .info-item:hover i{
color: var(--main-color);
border-color: var(--main-color);
background: var(--white);
}
.contact-info .info-item h3{
font-size: 2rem;
color: var(--black);
}
.contact-info .info-item p{
font-size: 1.5rem;
line-height: 1.8;
color: var(--grey);
}
.contact-info .gmail{
text-transform: none;
}
.contact .box-container{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
background-color: var(--white);
-webkit-box-shadow: var(--box-shadow);
box-shadow: var(--box-shadow);
border: var(--border);
gap: 1rem;
}
.contact iframe{
-webkit-box-flex: 1;
-ms-flex: 1 1 40rem;
flex: 1 1 40rem;
}
.contact-form{
-webkit-box-flex: 1;
-ms-flex: 1 1 40rem;
flex: 1 1 40rem;
padding: 2rem;
}
.contact-form h2{
font-size: 3rem;
border-left: 0.3rem solid var(--main-color);
padding-left: 1rem;
font-weight: bold;
margin-bottom: 2rem;
}
.contact-form .box{
width: 100%;
font-size: 1.6rem;
color: var(--main-color);
text-transform: none;
padding: 1rem 1.5rem;
border: 0.1rem solid rgba(0, 0, 0, 0.2);
margin-bottom: 1rem;
}
.contact-form .box::placeholder{
text-transform: capitalize;
color: var(--grey);
}
.contact-form .box:focus{
border-color: var(--main-color);
}
.contact-form textarea.box{
width: 100%;
height: 15rem;
resize: none;
}
.contact-form .alert{
font-size: 2rem;
color: var(--main-color);
padding-left: 1rem;
}
.footer{
background-image: url("../img/footer.png");
background-repeat: no-repeat;
background-size: 37% 151%;
  background-color: #eee;
  background-position: revert-layer;
}
.footer .box-container{
padding: 6rem 5%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
gap: 3rem;
}
.footer .box-container2{
padding: 2rem 5%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
gap: 3rem;
}
.footer-item h2{
color: #000000;
font-size: 2.5rem;
font-weight: 600;
letter-spacing: 0.2rem;
padding-bottom: 1rem;
}
.footer-item > span{
display: block;
width: 4rem;
height: 0.2rem;
background: var(--secondary-color);
margin-bottom: 2rem;
}
.footer-item{
-webkit-box-flex: 1;
-ms-flex: 1 1 400px;
flex: 1 1 400px;
-ms-flex: 1 1 80rem;
flex: 1 1 80rem;
}
.footer-item2 {
  -webkit-box-flex: 1;
  -ms-flex: 1 1 400px;
  flex: 1 1 400px;
  -ms-flex: 1 1 42rem;
  flex: 1 1 42rem;
}
.footer-item .logo{
padding-bottom: 2rem;
}
.footer-item .logo h3{
color: #424242;
}
.footer-item2 .logo h3{
color: #424242;
}
.footer-item .logo p{
color: #424242;
}
.footer-item p{
color: #424242;
font-size: 1.6rem;
line-height: 1.6;
}
.footer-item .social{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
gap: 1rem;
margin-top: 1rem;
}
.footer-item .social a{
}
.footer-item .social a i{
height: 4rem;
width: 4rem;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
font-size: 1.6rem;
}
.footer-item .social a:hover i{
color: #424242;
border-color: #424242;
background: transparent;
}
.footer-item .info p{
display: block;
font-size: 1.6rem;
color: #424242;
margin-bottom: 1.5rem;
}
.footer-item .info i{
color:#424242;
padding-right: 1rem;
}
.footer-item .info .gmail{
text-transform: none;
}
.footer-item .links a,
.footer-item .iinks p{
display: block;
font-size: 1.6rem;
color: #424242;
margin-bottom: 1.5rem;
}
.footer-item .links a i,
.footer-item .links p i{
padding-right: 0.5rem;
color: var(--secondary-color);
}
.footer-item2 .links a,
.footer-item2 .iinks p{
display: block;
font-size: 1.6rem;
color: #424242;
margin-bottom: 1.5rem;
}
.footer-item2 .links a i,
.footer-item2 .links p i{
padding-right: 0.5rem;
color: var(--secondary-color);
}
.footer-item .links a:hover{
color: var(--secondary-color);
}
.footer .content{
text-align: left;
padding: 2rem 5%;
background: var(--white);
}
.footer .content p{
font-size: 1.6rem;
color: var(--main-color);
}
.footer .content p span{
color: var(--secondary-color);
}
.scroll-top{
position: fixed;
bottom: 1rem;
left: 4rem;
height: 6.5rem;
width: 6.5rem;
font-size: 2rem; 
color: #999696; 
z-index: 999;
}
.scroll-top i {
  margin-left: 15px;
}
.events{margin-top: 71px;}
.add-card__ticket>* {
  position:absolute;
  left:50%;
  top:50%;
  -webkit-transform:translate(-50%,-50%);
  -ms-transform:translate(-50%,-50%);
  transform:translate(-50%,-50%);
  width:100%
}
.add-card__ticket {
  position: relative;
  width: 100%;
  height: 0;
  padding-top: 25.73%;
  margin-bottom: 1.875rem;
}
.elementor-blockquote--skin-quotation .elementor-blockquote:before {
  content:"“";
  font-size:100px;
  color:#e6e9ec;
  font-family:Times New Roman,Times,serif;
  font-weight:900;
  line-height:1;
  display:block;
  height:.6em
}
.elementor-blockquote--skin-quotation .elementor-blockquote__content {
  margin-top:15px
}
.elementor-blockquote--align-left .elementor-blockquote__content {
  text-align:left
}
.elementor-blockquote--align-left .elementor-blockquote footer {
  -webkit-box-orient:horizontal;
  -webkit-box-direction:normal;
  -ms-flex-direction:row;
  flex-direction:row
}
.elementor-blockquote--align-right .elementor-blockquote__content {
  text-align:right
}
.elementor-blockquote--align-right .elementor-blockquote footer {
  -webkit-box-orient:horizontal;
  -webkit-box-direction:reverse;
  -ms-flex-direction:row-reverse;
  flex-direction:row-reverse
}
.elementor-blockquote--align-center .elementor-blockquote {
  text-align:center
}
.elementor-blockquote--align-center .elementor-blockquote__author,
.elementor-blockquote--align-center .elementor-blockquote footer {
  display:block
}
.elementor-blockquote--align-center .elementor-blockquote__tweet-button {
  margin-right:auto;
  margin-left:auto
}
.elementor-headline {
  font-size:43px;
  line-height:1.2;
  display:block
}
.elementor-headline--style-rotate .elementor-headline-dynamic-wrapper {
  text-align:left;
  overflow:hidden
}
.elementor-headline--style-highlight .elementor-headline-dynamic-wrapper {
  overflow:visible;
  text-align:inherit
}
.elementor-headline--style-highlight .elementor-headline-dynamic-text {
  z-index:1
}
.elementor-headline--style-highlight .elementor-headline-plain-text {
  z-index:1;
  position:relative
}
.elementor-headline--style-highlight svg {
  position:absolute;
  top:100%;
  left:50%;
  width:calc(100% + 20px);
  height:calc(100% + 20px);
  -webkit-transform:translate(-50%,-50%);
  -ms-transform:translate(-50%,-50%);
  transform:translate(-50%,-50%);
  overflow:visible
}
.elementor-headline--style-highlight svg path {
  stroke:#00DAFC;
  stroke-width:9;
  fill:none;
  stroke-dasharray:1500;
  -webkit-animation:elementor-headline-dash 10s infinite;
  animation:elementor-headline-dash 10s infinite
}
.elementor-headline--style-highlight svg path:nth-of-type(2) {
  -webkit-animation-delay:.6s;
  animation-delay:.6s
}
@-webkit-keyframes elementor-headline-dash {
  0% {
    stroke-dasharray:0 1500
  }
  15% {
    stroke-dasharray:1500 1500
  }
  85% {
    opacity:1
  }
  90% {
    stroke-dasharray:1500 1500;
    opacity:0
  }
  to {
    stroke-dasharray:0 1500;
    opacity:0
  }
}
@keyframes elementor-headline-dash {
  0% {
    stroke-dasharray:0 1500
  }
  15% {
    stroke-dasharray:1500 1500
  }
  85% {
    opacity:1
  }
  90% {
    stroke-dasharray:1500 1500;
    opacity:0
  }
  to {
    stroke-dasharray:0 1500;
    opacity:0
  }
}
.elementor-headline-text-wrapper {
  vertical-align:bottom
}
.elementor-headline-dynamic-wrapper {
  display:inline-block;
  position:relative
}
.elementor-headline-dynamic-wrapper .elementor-headline-dynamic-text {
  display:inline-block;
  position:absolute;
  top:0;
  left:0
}
.elementor-headline-dynamic-wrapper .elementor-headline-dynamic-text.elementor-headline-text-active {
  position:relative
}
.elementor-headline-animation-type-flip .elementor-headline-dynamic-wrapper {
  -webkit-perspective:300px;
  perspective:300px
}









.blog {
  margin-top: 95px;
}

.pagination {
  margin: 25px 0;
  padding: 14px 0;
}
.pagination li {
  display: block;
  background-color: #fff;
  position: relative;
  border: 1px solid #e1e1e1;
  border-radius: 3px;
  box-shadow: 0 2px 5px 0 rgba(0,0,0,.16);
  margin: 0 2px;
  width: 61px;
  float: right;
  text-align: center;
  height: 30px;
}
.pagination li a{color: #575859;font-size: 15px;}

.page-item.active .page-link {
  z-index: 3;
  color: #fff;
  background-color: #8a8a8a;
  border-color: #fefffe;
  /*! border-radius: 5px; */
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
  padding: 1px 27px;
  line-height: 28px;
}