@import url('https://fonts.googleapis.com/css2?family=Merienda:wght@300..900&family=Protest+Revolution&display=swap');
body, html {
	width: 100%;
	overflow-x: hidden;
}

.fa-twitterx{
	font-family:sans-serif;
}
.fa-twitterx::before{
	content:"𝕏";
	font-size:1.2em;
}

#menu {
  transition: all .5s ease-in-out;
  background-color: #1b1b3f;
}

#menu a {
	color:#fff;
}

#menu .dropdownHead a {
color:#031e79;
}

.brandLogo {
	margin-right: 60px;
}

.pageMaintitle {
  text-transform: uppercase;
  text-align: center;
  text-shadow: 0px 0px 3px grey;
  color: #031e79 !important;
  font-size: 35px;
  margin-bottom: 20px;
}

.transparentTxt {
  background-color: transparent !important;
  color: white;
  text-shadow: -1px -1px 0 #031e79, 1px -1px 0 #031e79, -1px 1px 0 #031e79, 1px 1px 0 #031e79;
/*text-decoration-line: underline;
text-decoration-style: solid;
text-decoration-color:#0275c7;*/
}

.brandLogo img {
	width: 200px;
}

.navbar-toggler-icon, .icon-bar {
  color:#fff !important;
  border-color: #fff !important;
  background-color: #fff !important;
}

#collapsibleNavbar {
z-index: 999;
margin-bottom: 20px;
}

.serviceTitle {
  font-family: "Merienda", cursive;
  font-optical-sizing: auto;
  font-weight: bold;
  font-style: normal;
  font-size: 26px !important;
}

.serviceTitle h3 {
  font-size: 22px !important;
  color:#201f1f !important;
}

.aboutTxt h1 {
  font-size: 22px !important;
}

#footerBranchOffices .col-md-4 {
margin-bottom: 20px;
}

#footerBranchOffices .contactPara {
  font-size: 14px;
  color:#03a4c4;
  margin-top: -10px;
  padding-top: 0;
}

#footerBranchOffices .titlePara {
margin-bottom: 0px !important;
}

.navbar-nav > li{
  padding-left:15px;
  padding-right:15px;
}

.slider .banner img {
	width:100% !important; 
}

.counts {
  z-index: 2;
  position: relative;
}

.countData h1, .countData h2, .countData h3, .countData h4 {
	line-height: 0.9;
}

#countBox {
	width: 80%;
	margin: 0 auto;
	padding: 12px;
	box-shadow: 0px 0px 2px grey;
	margin-top: -80px;
	border-radius: 12px;
	background-color: #fff;
}

.aboutImage img {
width: 100%;
margin: 0 auto;
}

.servicesSection .serviceData {
	height: 550px;
}

#serviceCol .serviceData{
	box-shadow: 0px 0px 3px grey;
	border-radius: 5px;
	margin: 10;
	padding: 0;
	overflow: hidden;
	background-color: #fff;
	color: #1b1b3f;
  margin-bottom: 30px !important;
}
.serviceImage {
  overflow: hidden;
}

.serviceImage:hover img {
  transform: scale(1.1);
  transition: all 1s;
}

.serviceImage img, .certificateImage img {
	width: 100%;
  transition: all 1.5s;
}

.eventData {
  padding: 8px;
  border-radius: 5px;
  box-shadow: 0px 0px 1px #dbdfdf;
  transition: all 1s;
  background-color: rgba(255,255,255,0.9);
}

.eventData:hover {
background-color: rgba(255,255,255,0.9);
background-image: url('../../images/darkLogoDiagonal.png');
background-size: contain;
transform: scale(1.08);
transition: all 1s;
}

.eventData:hover {
  box-shadow: 0px 0px 1px #6d6d6d;
  transition: all 1s;
}

.eventImage {
  height: 140px;
}

.eventImage img {
  width: 70%;
}

.serviceText .justify {
	text-align: justify !important;
}

#eventCol {
  margin-bottom: 30px;
}

.eventTitle {
  position: relative;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-decoration-thickness: 2px;
  text-decoration-color: rgb(1, 114, 207);  
  padding: 10px;
  text-align: center;
  /*margin-top: -60px !important;
  background-color: rgba(0,0,0,0.8);
  color:#ddd;
  padding: 10px;
  border-radius: 50px 50px 0px 0px;
  z-index: 9;
  border:1px solid #fff;*/
}

.galleryImage img {
  width: 100%;
  border-radius: 8px;
}

.contactBtn {
  padding: 8px 20px;
  background-color: cornflowerblue;
}
#galleryCol {
  margin-bottom: 20px;
}

.galleryTitle {
  position: relative;
  margin-top: -50px !important;
  background-color: #fff;
  color:#201f1f;
  padding: 10px;
  border-radius: 50px 50px 0px 0px;
  z-index: 9;
  border:1px solid #fff;
}

.galleryTitle h3 {
  font-size: 18px;
}

.blogData {
  box-shadow: 0px 0px 2px #000;
  border-radius: 50px;
    margin-bottom: 15px;
}

.blogImage {
  height: 160px;
  width: 160px;
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid darkmagenta;
    margin: 10px;
}

.blogImage img {
  height: 100%;
  width: 100%;
}

.blogTitle h3 {
  color:darkred;
  cursor: pointer;
}
.questionSection {
	background-color: #2c2d2d;
	color: #fff !important;
}

.bg_1 {
	background-image: url('../../images/bg_1.jpg');
	background-size: cover;
	color:#fff;
	background-attachment: fixed;
}

.chatBox {
	position: fixed;
	bottom: 20px;
	right: 20px;
	background-color: rgb(2, 208, 2);
	color: #fff;
	font-size:36px;
	padding:4px 16px;
	cursor: pointer;
	border-radius: 50px;
  z-index: 99;
  box-shadow: 0px 0px 12px green;
}

.carousel-item {
	text-align: center;
	padding: 12px;
}

.carousel-item p {
	width: 80%;
	padding: 15px;
	text-align: center;
	margin: 10px auto;
}

#testimonialBox {
	/*background-color: #2c2d2d;*/
	color: #fff;
}

.innerPage_bg {
  /*background-color: #e6edf7;*/
  background-color: rgba(230, 237, 247, 0.9);
}

.innerPage_bg_img {
  background-repeat: no-repeat;
  background-position: center;
  background-attachment: fixed;
  background-size: 100% 85%;
}

#testimonialCarousel .carousel-item {
  height: 440px;
}

.testimonial-slide img {
  height: 130px;
  width: 130px;
  border-radius: 50%;
}

#imageArea .mouseMove {
  background: url('../../images/about-us_2.webp');
  position: relative;
  background-size: 100% 100%;
  width: 100%;
  z-index: 11;
  height: 100%;
  background-repeat: no-repeat;
  background-position: center;
}
/* form rating review */

.star-rating {
        direction: rtl;
        display: inline-block;
        cursor: pointer;
    }

    .star-rating input {
        display: none;
    }

    .star-rating label {
        color: #ddd;
        font-size: 16px;
        padding: 0 2px;
        cursor: pointer;
        transition: all 0.2s ease;
		color: #ffc107;
    }

    .star-rating label:hover,
    .star-rating label:hover~label,
    .star-rating input:checked~label {
        color: #ffc107;
    }

	.ratingReview .rrLogo img {
		width: 100px;
	}

	/* social media icons */
	a {
  color: #fff;
  text-decoration: none;
}
.social {
  position: fixed;
  top: 12%;
  right: 0;
  z-index: 99;
}
.social ul {
  padding: 0px;
  transform: translate(250px,0);
}
.social ul li {
  display: block;
  margin: 5px;
  background: rgba(1, 45, 121, 0.36);
  width: 300px;
  text-align: left;
  padding: 10px;
  border-radius: 30px 0px 0px 30px;
  transition: all 1s;
}
.social ul li:hover {
  transform: translate(-110px, 0);
  background: rgba(255, 255, 255, 0.4);
}
.social ul li:hover a {
  color: #000;
}
.social ul li:hover i {
  color: #fff;
  background: rgba(0, 0, 0, 0.36);
  transform: rotate(360deg);
  transition: all 1s;
}
.social ul li i {
  margin-right: 10px;
  color: #000;
  background: #fff;
  padding: 6px;
  border-radius: 50%;
  width: 35px;
  height: 35px;
  font-size: 25px;
  background: #ffffff;
  transform: rotate(0deg);
}

.readMore:hover {
  margin-left: 12px;
  padding-right: 12px;
  transition: all 1s;
}

/* slide in travsition */
.videobox {
    position: absolute;
    left: 0;
    width: 100%;
    height: 100%;
    top:0;
    background-color: #031e79;
    background-size: 80% auto;
    background-repeat: no-repeat;
    background-position: center;
    z-index: 99;
}
.slidein {
    position: absolute;
    left: -100%;
    width: 100%;
    height: 100%;
    top:0;
    background: blue;
    -webkit-animation: slide 0.5s forwards;
    -webkit-animation-delay: 2s;
    animation: slide 0.5s forwards;
    animation-delay: 2s;
    z-index: 999;
}

@-webkit-keyframes slide {
    100% { left: 0; }
}

@keyframes slide {
    100% { left: 0; }
}

/* 1. Pulse Animation */
.btn-pulse {
  animation: pulse 1.5s infinite;
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}

/* 2. Wobble Animation */
.btn-wobble:hover {
  animation: wobble 0.8s;
}

@keyframes wobble {
  0%,
  100% {
    transform: translateX(0%);
  }
  15% {
    transform: translateX(-25%) rotate(-5deg);
  }
  30% {
    transform: translateX(20%) rotate(3deg);
  }
  45% {
    transform: translateX(-15%) rotate(-3deg);
  }
  60% {
    transform: translateX(10%) rotate(2deg);
  }
  75% {
    transform: translateX(-5%) rotate(-1deg);
  }
}

/* hover 3d effect */
.hover3d {
  height: 60px;
  width: 180px;
  position: relative;
  transition: 4s;
  transform-style: preserve-3d;
  transform: perspective(1000px) rotateX(0deg);
}
.hover3d:hover {
  transform: perspective(1000px) rotateX(360deg);
}
.hover3d span {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-family: sans-serif;
  text-transform: uppercase;
  font-size: 22px;
  letter-spacing: 2px;
  transition: 0.5s;
  box-sizing: border-box;
  box-shadow: insert 0 20px 50px rgba(0, 0, 0, 0.2);
  background-color: #007aff;
}
.hover3d:hover span {
  color: #fff;
  background: rgba(3, 169, 244, 0.8);
}
.hover3d span:nth-child(1) {
  transform: rotateX(360deg) translateZ(25px);
}
.hover3d span:nth-child(2) {
  transform: rotateX(270deg) translateZ(25px);
}
.hover3d span:nth-child(3) {
  transform: rotateX(180deg) translateZ(25px);
}
.hover3d span:nth-child(4) {
  transform: rotateX(90deg) translateZ(25px);
}

.crumb {
  position: absolute;
  width: 230px;
  padding: 9px 20px;
  background-color: #007aff;
  border: 1px solid blue;
  margin: auto;
  margin-top: 60px;
  text-align: center;
  left: 43%;
}


.mobile {
  display: none !important;
}

.desktop {
  display:block !important;
}

.videoContainer, .testimonialSwiper {
  /*--s: 20px;  
  --w: 100%; 
  padding: 20px;*/
  /*aspect-ratio: 1;*/
  /*padding: var(--s);
  border: var(--s) solid #0000;
  box-sizing: border-box;
  background: conic-gradient(#CD8C52,#5E9FA3,#CD8C52) border-box;
  border-radius: calc(3.5*var(--s)); 
  mask: 
    radial-gradient(calc(sqrt(2)*var(--s)),#000 calc(100% - 1px),#0000),
    conic-gradient(#000 0 0) content-box,
    radial-gradient(calc(sqrt(2)*var(--s)),#0000 100%,#000 calc(100% + 1px)) 
     var(--s) var(--s) padding-box;
  mask-size: calc(var(--s)*4) calc(var(--s)*4);*/
  padding: 10px;
  background-color: #fff;
  margin: 10px;
}

.testimonialSwiper .video {
  /*height: 100%;*/
  width: 100%;
  background-color: #fff;  
}

.testimonialSwiper .swiper-slide 
{
  height: 420px !important;
}

/* swing inner page title */
.swing  {
    animation: swing ease-in-out 1s infinite alternate;
    transform-origin: center -20px;
    float:left;
    box-shadow: 5px 5px 10px rgba(0,0,0,0.5);
}
.swing::before {
  content: '';
  position: absolute;
  width: 15px;
  height: 15px;
  top: -30px;
  left: 46%;
  z-index: 5;
  border-radius: 50% 50%;
  background: #212020;
}


.swing::after {
  content: '';
  position: absolute;
  width: 40px;
  height: 40px;
  border: 1px solid #999;
    border-right-width: 3px;
    border-right-style: solid;
    border-right-color: rgb(153, 153, 153);
    border-bottom-width: 3px;
    border-bottom-style: solid;
    border-bottom-color: rgb(153, 153, 153);
  top: -18px;
  left: 40%;
  z-index: 0;
  border-bottom: none;
  border-right: none;
  transform: rotate(45deg);
}

@keyframes swing {
    0% { transform: rotate(3deg); }
    100% { transform: rotate(-3deg); }
}


/* responsive */

@media screen and (max-width:650px) {
  #countBox {
    margin-top: 12px !important;
    width: 100% !important;
    border-radius: 0px !important;
  }

  .ratingReview .col-md-6 {
    margin-top: 12px !important;
    padding-top: 10px !important;
  }

  .eventImage img {
  width: 50%;
}

.eventTitle  {
  font-size: 22px !important;
  font-weight: bold;
  margin-top: 12px !important;
}

.blogImage {
  margin: 1px auto !important;
}
.blogData {
  width: 96% !important;
  margin: 12px auto !important;
  border-radius: 10px !important;
  padding: 8px;
}

.pageMaintitle {
  font-size: 40px !important;
}

#contactInfo .card-group {
  margin-left: -4% !important;
  width: 100% !important;
}

.crumb {
left: 23% !important;
margin-top: 35px;
}

#imageArea .mouseMove  {
  height: 300px !important;
  width: 90% !important;
  background-position: center !important;
}

.mobile {
  display: block !important;
}

.desktop {
  display:none !important;
}

.testimonialSwiper .swiper-slide {
height:230px !important;
      }

      footer .card-body {
        margin-bottom: 20px !important;
      }
}

    @media screen and (min-width:651px) and (max-width:850px)
    {

      .testimonialSwiper .swiper-slide {
height:400px !important;
      }

      footer .card-body {
        margin-bottom: 20px !important;
      }

    }