.top-page {

    padding: 100px 10px;padding-top: 200px;text-align: center;
    color: var(--textColor);
}

.m-img {width: 95%;max-width: 1200px; border-radius: 20px;margin: -20px auto;margin-top: -150px;
    display: block;height: 300px;object-fit: cover;
}


.top-gallery {padding: 100px 20px;text-align: center;padding-top: 200px;
  color: var(--textColor);margin-bottom: 20px;color:var(--text-color) !important; background-position: center;
  background-size: cover;padding-bottom: 150px;
}

.load-more {padding: 8px 20px ;background-color: var(--mainColor);color: white;border-radius: 20px;
display: inline-flex;margin: 10px 0;min-width: 120px;text-align: center;justify-content: center;align-items: center;
}
.load-more:hover {background-color: var(--mainColorHover);cursor: pointer;}

.work {background-position:center ;
  background-size: cover ;display: inline-block;
  margin: 10px;padding: 80px ;font-size: 17px;color: white;
  max-width: 250px;
  }
.work-d {border-radius:70% 30% 30% 70% / 60% 40% 60% 40%;}
.work-u {border-radius:30% 70% 70% 30% / 40% 60% 40% 60%;}

.work:hover {transform: scale(1.08);cursor: pointer;box-shadow:  0 0 0 4px var(--mainColor);}


.top-page2 {color:var(--text-color);  padding: 100px 10px;padding-top: 200px;text-align: center;}

.top-page img , .top-page2 img {margin-bottom: 20px;width: 80%;max-width: 200px;}
.top-page h2 , .top-page2 h2 {font-size: 35px;margin: 20px 0;}
.top-page p  , .top-page2 p{font-size: 18px;max-width: 600px;}

 .page-content {min-height: 80vh;background-color: white;padding: 50px 10px;
    max-width: 1100px;clear:both;text-align: right;line-height: 33px;
    }
    .page-content h1   {margin: 30px 0;font-size: 30px ;}
 .page-content h2  {margin: 20px 0;font-size: 25px ;}
  .page-content h3  {margin: 20px 0;font-size: 22px ;}
.page-content h4 {margin: 10px 0;font-size: 19px ;}
  .page-content p {color: var(--textColor);margin: 5px 0;line-height: 33px;font-size: 17px;}
.page-content img  {max-width: 95%;border-radius: 10px;margin: 10px auto;display: block;height: auto;}



.page-content ul , .page-content ol {padding: 15px ;}
.page-content li {margin: 10px 0 ;}


.serv-tabs {margin: 20px 0;}
.serv-tab {border-radius: 10px;box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
	border: 1px solid rgba(192, 192, 192, 0.3);animation-duration: 0.5s;cursor: pointer;
	position: relative;margin: 10px ;
	padding:  20px  ;font-size: 21px;height: auto;position: relative;
	display: inline-table;
}

.serv-tab b {font-weight: bolder;font-size: 26px;}
.serv-tab:hover {box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;animation-duration: 0.5s}
.serv-tab img , .service-tab svg {width: 45px;color: var(--mainColor) !important;margin: 5px 0;}
.serv-tab:hover img , .service-tab:hover svg {transform: scale(1.15);animation-duration: 0.5s}

.serv-tab::before,
.serv-tab::after {
  position: absolute;
  content: "";
}
.hover-border-2::before,
.hover-border-2::after {width: 20%; height: 20%;transition: 0.35s; }
.hover-border-2::before {bottom: 0; left: 0;border-left: 2px solid var(--mainColor);
  border-bottom: 2px solid var(--mainColor)}
.hover-border-2::after {top: 0; right: 0;
  border-right:2px solid var(--mainColor);border-top: 2px solid var(--mainColor);
}
.hover-border-2:hover::before,
.hover-border-2:hover::after {width: 100%;
  height: 100%;border-radius: 10px;
}


/*Faq*/

.faq ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
.faq {
    padding: 100px 0 10px;
    background: transparent;
}

.faq .section-title {
    margin-bottom: 54px;
}

.faq .section-title h2 {
    margin-bottom: 22px;
    text-align: center;
}
.faq .section-title p {text-align: center !important;}

.faq .accordion .card {
    border: none;
    margin-bottom: 30px;
    background-color: transparent;
}

.faq .accordion .card:not(:first-of-type) .card-header:first-child {
    border-radius: 10px;
}

.faq .accordion .card .card-header {
    border: none;
    border-radius: 10px;
    padding: 0;
}

.faq .accordion .card .card-header h5 {
    padding: 0;
}

.faq .accordion .card .card-header h5 button {
    color: #1e3056;
    font-size: 18px;
    font-weight: 500;
    text-decoration: none;
    padding: 0 30px 0 70px;
    min-height: 80px;
    display: block;
    width: 100%;
    color: rgba(30, 48, 86, 0.8);
    text-align: right;
    background: #fff;
    -webkit-box-shadow: 0px -50px 140px 0px rgba(69, 81, 100, 0.1);
    box-shadow: 0px -50px 140px 0px rgba(69, 81, 100, 0.1);
    border-radius: 10px 10px 0 0;
    position: relative;
}



.faq .accordion .card .card-header h5 button.collapsed {
    background: #fff;
    border-radius: 10px;
    -webkit-box-shadow: none;
    box-shadow: none;
    border: 1px solid rgba(97, 125, 255, 0.2);
}

.faq .collapse {
    background-color: white !important;
}

.faq .accordion .card .card-body {
    -webkit-box-shadow: 0px 15px 140px 0px rgba(69, 81, 100, 0.1);
    box-shadow: 0px 15px 140px 0px rgba(69, 81, 100, 0.1);
    border-radius: 0 0 10px 10px;
    padding-top: 0;
    margin-top: -6px;
    padding-left: 72px;
    padding-right: 70px;
    padding-bottom: 23px;
    color: rgba(30, 48, 86, 0.8);
    line-height: 30px;
}


.fico {
    position: absolute;
    left: 30px;
    top: 50%;
    margin-top: -10px;
    background-color: transparent;
    color: var(--mainColor);
    text-align: center;
    font-size: 17px;
}



.faq .accordion .card .card-header h5 button[aria-expanded="true"] .fico {
    transform: rotate(180deg);
}

.faq .accordion .card .card-body {
    -webkit-box-shadow: 0px 15px 140px 0px rgba(69, 81, 100, 0.1);
    box-shadow: 0px 15px 140px 0px rgba(69, 81, 100, 0.1);
    border-radius: 0 0 10px 10px;
    padding: 20px 5px;
    color: rgba(30, 48, 86, 0.8);
    line-height: 30px;
    text-align: right;
    background-color: white !important;
}



/*end Faq*/



@media only screen  and (max-width:500px){
    .m-img {height: 150px;}
  .top-page , .top-page2 {padding-top:120px}
  .serv-tab {max-width: 95%;}
}