/*
  Theme Name: Thames - Portfolio HTML template
  Author: eThemeStudio
  Support: xuwelkhan@gmail.com
  Description: Personal Portfolio Template
  Version: 2.1
  Released: March 11, 2024
  Last Update: November 21, 2024
*/

/* CSS Index
-----------------------------------
1. Theme default css
2. header
3. slider
4. about area
5. about area
6. fun fact area
7. portfolio area
8. experience area
9. skill area
10. price area
11. service area
12. testimonial area
13. brand area
14. contact area
15. blog area
16. footer area
17. extra info css
*/

/* 1. Theme default css
-------------------------------------------------------------- */
/* font css */
@font-face {
  font-family: "jost-medium-font";
  src: url(../fonts/jost-medium-font/jost-medium.ttf);
}

/* common css */
:root {
  --main-color: #6b9cf4;
  --primary-color: #25262f;
  --secondary-color: #e2ecf6;
  --text-color: #4d4d5c;
  --meta-text-color: #9b9db1;
  --section-bg: #e2ecf6;
  --main-border: #bcc7d3;
}
body {
  font-family: "jost-medium-font";
  font-weight: 400;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  color: #2e2e37;
  font-weight: 400;
}
h1 a,
h2 a,
h3 a,
h4 a,
h5 a,
h6 a {
  color: inherit;
}
h1 a:hover,
h2 a:hover,
h3 a:hover,
h4 a:hover,
h5 a:hover,
h6 a:hover {
  color: var(--main-color);
}
h2 {
  font-size: 72px;
}
h3 {
  font-size: 60px;
  line-height: 1.16;
}
h4 {
  font-size: 30px;
}
h5 {
  font-size: 24px;
  line-height: 1.5;
}
h6 {
  font-size: 21px;
}
p {
  font-family: "Open Sans", sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.67;
  color: #4d4d5c;
}
span,
input,
img {
  transition: all 0.3s ease-out;
  -webkit-transition: all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;
  -ms-transition: all 0.3s ease-out;
  -o-transition: all 0.3s ease-out;
}
ul {
  margin: 0px;
  padding: 0px;
}
li {
  list-style: none;
}
img {
  max-width: 100%;
  transition: all 0.3s ease-out 0s;
}
a,
button,
li {
  transition: 0.3s;
  -webkit-transition: all 0.3s ease-out 0s;
  -moz-transition: all 0.3s ease-out 0s;
  -ms-transition: all 0.3s ease-out 0s;
  -o-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
}
a:focus,
button:focus,
.btn:focus {
  text-decoration: none;
  outline: 0;
  box-shadow: none;
}
a:focus,
a:hover,
.footer-menu li a:hover {
  color: var(--main-color);
  text-decoration: none;
  outline: 0 none;
}
*::-moz-selection {
  background: #7a7a8a;
  color: #fff;
  text-shadow: none;
}
::-moz-selection {
  background: #7a7a8a;
  color: #fff;
  text-shadow: none;
}
::selection {
  background: #7a7a8a;
  color: #fff;
  text-shadow: none;
}
.btn:focus {
  outline: 0 none;
}
/* button */
.btn {
  padding: 14px 40px 13px 40px;
  font-size: 16px;
  color: #ffffff;
  border-radius: 5px;
  outline: 0 none;
  text-transform: capitalize;
  transition: all 0.5s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  -ms-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
}
.btn::after {
  position: absolute;
  content: "";
  background: #ffffff;
  height: 155px;
  left: -75px;
  opacity: 0.2;
  top: -50px;
  -webkit-transform: rotate(35deg);
  transform: rotate(35deg);
  -webkit-transition: all 550ms cubic-bezier(0.19, 1, 0.22, 1);
  transition: all 550ms cubic-bezier(0.19, 1, 0.22, 1);
  width: 50px;
  z-index: 1;
}
.btn:hover::after {
  left: 120%;
  -webkit-transition: all 550ms cubic-bezier(0.19, 1, 0.22, 1);
  transition: all 550ms cubic-bezier(0.19, 1, 0.22, 1);
}
.btn:hover {
  color: #ffffff;
}
/* btn css end */
/* common css */
.jostMedium-font-family {
  font-family: "jost-medium-font";
}
.openS-font-family {
  font-family: "Open Sans", sans-serif;
}
.img-grayscale {
  filter: grayscale(100%);
  -webkit-filter: grayscale(100%);
}
.shadow-hover:hover {
  box-shadow: 0px 5px 15px 0px rgba(7, 7, 7, 0.06);
}
.cursor-pointer {
  cursor: pointer;
}
.rotate {
  transition: 0.9s;
  -webkit-transition: all 0.4s ease-out 0s;
  -moz-transition: all 0.4s ease-out 0s;
  -ms-transition: all 0.4s ease-out 0s;
  -o-transition: all 0.4s ease-out 0s;
  transition: all 0.4s ease-out 0s;
  -webkit-transform: rotateY(0deg);
  -ms-transform: rotateY(0deg);
  transform: rotateY(0deg);
  z-index: 1;
}
.rotate-hover:hover span.rotate,
.rotate-hover:hover a.rotate {
  -webkit-transform: rotateY(360deg);
  -ms-transform: rotateY(360deg);
  transform: rotateY(360deg);
}
/* title css */
.title span {
  font-size: 18px;
  letter-spacing: 7px;
}
.title h2 {
  font-size: 60px;
}
/* marquee css start */
.marquee {
  display: block;
  margin: auto auto;
  white-space: nowrap;
  overflow: hidden;
  min-width: 100%;
  height: 100%;
}
.marquee span {
  display: inline-block;
  padding-left: 0%;
  text-transform: uppercase;
  white-space: nowrap;
  min-width: 100%;
  height: 100%;
  line-height: 1.1;
  font-size: 96px;
  animation: marquee1 20s linear infinite;
  -webkit-animation: marquee1 20s linear infinite;
}
.marquee2 span {
  -webkit-text-stroke: 1px #333;
  -webkit-text-fill-color: transparent;
  animation: marquee2 20s linear infinite;
  -webkit-animation: marquee2 20s linear infinite;
}

@keyframes marquee1 {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-100%, 0);
  }
}

@keyframes marquee2 {
  0% {
    transform: translate(-100%, 0);
  }
  100% {
    transform: translate(0, 0);
  }
}
/* marquee css end */
.section-text-color {
  color: var(--secondary-color);
}

/* slick-dots css */
.slick-dots {
  position: absolute;
  left: 80px;
  bottom: -80px;
  z-index: 11;
}
.slick-dots li {
  border: 2px solid transparent;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  background: transparent;
  margin-right: 15px;
  cursor: pointer;
  display: inline-block;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
}
.slick-dots button {
  width: 8px !important;
  height: 8px;
  background: #bec9ca;
  display: block;
  text-indent: 1000px;
  overflow: hidden;
  border: 0;
  border-radius: 50%;
  margin: 4px auto;
  cursor: pointer;
  padding: 0;
}
.slick-dots li.slick-active {
  border: 2px solid var(--main-color);
}
.slick-dots li.slick-active button {
  background: var(--main-color);
}
/* slick-arrow css */
.slick-arrow .l-a,
.slick-arrow .r-a {
  position: absolute;
  right: 65px;
  top: -130px;
  width: 42px;
  height: 42px;
  line-height: 41px;
  background: transparent;
  color: var(--main-color);
  text-align: center;
  z-index: 11;
  font-size: 18px;
  border: 1px solid #c8ccd4;
  border-radius: 50px;
  -webkit-border-radius: 50px;
  -moz-border-radius: 50px;
  -ms-border-radius: 50px;
  -o-border-radius: 50px;
  transition: 0.4s;
  -webkit-transition: 0.4s;
  -moz-transition: 0.4s;
  -ms-transition: 0.4s;
  -o-transition: 0.4s;
}
.slick-arrow .r-a {
  left: auto;
  right: 15px;
}
.slick-arrow .l-a:hover,
.slick-arrow .r-a:hover {
  cursor: pointer;
  background: var(--main-color);
  color: #fff;
  border: 1px solid var(--main-color);
}
.testimonial-active .slick-arrow .l-a,
.testimonial-active .slick-arrow .r-a {
  right: auto;
  top: auto;
  bottom: -80px;
  left: 80px;
}
.testimonial-active .slick-arrow .r-a {
  left: 132px;
}

/* 2. header
--------------------------------------------------- */
.transparent-header {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  z-index: 22;
  transition: 0.3s;
  transition: 0.5s;
  -webkit-transition: 0.5s;
  -moz-transition: 0.5s;
  -ms-transition: 0.5s;
  -o-transition: 0.5s;
}

.body-overlay {
  background-color: rgba(0, 0, 0, 0.5);
  height: 100%;
  width: 100%;
  position: fixed;
  top: 0;
  z-index: 999;
  left: 0;
  opacity: 0;
  visibility: hidden;
  transition: all 0.5s ease-out;
  -webkit-transition: all 0.5s ease-out;
  -moz-transition: all 0.5s ease-out;
  -ms-transition: all 0.5s ease-out;
  -o-transition: all 0.5s ease-out;
}
.body-overlay.opened {
  opacity: 1;
  visibility: visible;
}
.sticky-menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 99;
  transition: 0.3s;
  -webkit-transition: 0.3s;
  -moz-transition: 0.3s;
  -ms-transition: 0.3s;
  -o-transition: 0.3s;
}
.logo a {
  display: block;
}
.sticky-menu .logo {
  margin: 0 0;
}
.sticky-menu .logo img {
  max-width: 72%;
}
.sticky-menu .logo a.header-sticky-logo {
  display: block;
}
.sticky-menu .header {
  background: #25262f;
  -webkit-box-shadow: 0 8px 4px -7px rgba(115, 115, 115, 0.1);
  -moz-box-shadow: 0 8px 4px -7px rgba(115, 115, 115, 0.1);
  box-shadow: 0 8px 4px -7px rgba(115, 115, 115, 0.1);
  transition: 0.5s;
  -webkit-transition: 0.5s;
  -moz-transition: 0.5s;
  -ms-transition: 0.5s;
  -o-transition: 0.5s;
}
.sticky-menu .main-menu ul li > a {
  padding: 24px 0;
}
.main-menu ul li {
  display: inline-block;
  margin-left: 36px;
  position: relative;
}
.main-menu ul li > a {
  color: #ffffff;
  font-size: 18px;
  display: inline-block;
  text-transform: capitalize;
  padding: 53px 0;
  position: relative;
}
.main-menu ul li:hover > a,
.main-menu ul li.active a,
.mean-container .mean-nav ul li a:hover {
  color: var(--main-color);
}
.main-menu ul li > a:hover::before,
.main-menu ul li > a:hover a.active::before {
  background: var(--main-color);
  width: 100%;
  left: 0;
}
.header-btn a {
  padding: 12px 28px 11px 28px;
  border: 1px solid var(--main-color);
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  font-size: 15px;
}
.header-btn a:hover,
.sticky-menu .header-btn a:hover {
  background: var(--main-color);
  color: #ffffff;
}
.sticky-menu .header-btn a {
  padding: 8px 20px 7px 20px;
}
/* .header-sidebar.sticky-menu .logo img {max-width: 90%;} */
.header-sidebar.sticky-menu .header-btn a {padding: 12px 28px 11px 28px;}

/* header sidebar css*/
.header-sidebar {
	position: fixed;
	top: 0;
	bottom: 0;
	z-index: 55;
	overflow: visible;
	width: 300px;
	padding: 60px 45px;
}
.sidebar-content {
	margin-left: 300px;
}
.header-sidebar .main-menu ul li {
  display: block;
  margin-left: 0;
}
.header-sidebar .main-menu ul li > a {
	display: inline-block;
	padding: 7px 0;
}
.header-sidebar .logo img {
	width: 90%;
}
.header-sidebar.sticky-menu {
  -webkit-box-shadow: 0 8px 4px -7px rgba(115, 115, 115, 0.1);
  -moz-box-shadow: 0 8px 4px -7px rgba(115, 115, 115, 0.1);
  box-shadow: 0 8px 4px -7px rgba(115, 115, 115, 0.1);
}


/* 3. slider
-------------------------------------------------------------- */
.slider-height {
  min-height: 920px;
}
/* .slider-bg-color {
  background: #25262f;
} */
.slider-img img {
	width: 90%;
}
.slider-img {
  max-height: 100vh;
}
.slider-content .sub-heading {
  font-size: 24px;
  line-height: 1.3;
  letter-spacing: 7px;
  font-weight: 400;
}
.slider-content h1 {
  /* font-size: 144px; */
  font-size: 60px;
  line-height: 1.07;
}
.slider-content h2 {
  font-size: 24px;
  line-height: 2;
}
.slider-content h2 span {
  font-size: 36px;
  letter-spacing: 0px;
}
span#main {
  color: var(--main-color) !important;
}
.slider-social-link {
  top: 50%;
  transform: translateY(-50%) !important;
  -webkit-transform: translateY(-50%) !important;
  -moz-transform: translateY(-50%) !important;
  -ms-transform: translateY(-50%) !important;
  -o-transform: translateY(-50%) !important;
}
.slider-social-link .social li a {
  font-size: 18px;
  width: 55px;
  margin: 2px 0;
  height: 50px;
  line-height: 52px;
}
.slider-social-link .social li {
  border: 1px solid rgb(204, 211, 217, 0.2);
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
}
.slider-social-link .social li:hover {
  background: var(--main-color);
  border: 1px solid var(--main-color);
}
.slider-img {
  margin-right: -50px;
}
/* heartbeat scale effects*/
.slider-img::before {
  position: absolute;
  content: "";
  border-radius: 50%;
  background-color: rgb(59, 60, 70);
  opacity: 0.529;
  left: 5%;
  top: 65px;
  width: 770px;
  height: 761px;
  z-index: -1;
  transform: scale(1);
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  -o-transform: scale(1);
  animation: heartbeat-middle 5s infinite alternate;
  -webkit-animation: heartbeat-middle 5s infinite alternate;
}
/* heartbeat-middle */
@-webkit-keyframes heartbeat-middle {
  to {
    transform: scale(0.9);
    -webkit-transform: scale(0.9);
    -moz-transform: scale(0.9);
    -ms-transform: scale(0.9);
    -o-transform: scale(0.9);
  }
}
/* shape css */
.hero-shape1 {
  top: 18%;
  right: 5%;
}
.hero-shape2 {
  bottom: 17%;
  right: 12%;
}
.hero-shape3 {
  bottom: 8%;
  left: 6%;
}
.hero-shape4 {
  top: 21%;
  left: 47%;
}

/*  sidebar content css */
.sidebar-content .slider-height {
	min-height: 920px;
}
.sidebar-content .slider-img img {
	width: 92%;
}
.sidebar-content .hero-shape {
  max-width: 60px;
  max-height: 60px;
}
.sidebar-content .hero-shape4 {
	top: 16%;
	left: 49%;
}
.sidebar-content .hero-shape2 {
	bottom: 16%;
	right: 8%;
	max-width: 35px;
}
.sidebar-content .hero-shape3 {
	left: 5%;
}
.sidebar-content .intro-feature-icon {
	top: 12%;
	left: 5%;
}

.sidebar-content .skill-right-padding {margin-left: 100px;}

.single-slider video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* Ensures the video covers the div without distortion */
  z-index: -1; /* Keeps the video behind other elements */
}

/* 4. intro feature area
------------------------------------------------------------- */
/* Enhanced Styling for Single Intro Feature Content */
/* Vibrant Animation for Intro Feature Content */
.single-intro-feature-content {
  background: linear-gradient(145deg, #ffffff, #f0f7fe);
  box-shadow: 0px 5px 60px 0px rgba(2, 24, 93, 0.08);
  padding: 55px 48px 35px 48px;
  border-radius: 15px;
  transition: transform 0.5s ease, box-shadow 0.5s ease;
  position: relative;
  overflow: hidden;
  z-index: 2;
}

.single-intro-feature-content:hover {
  box-shadow: 0px 10px 80px 0px rgba(2, 24, 93, 0.4),
              0px 0px 20px rgba(108, 228, 244, 0.8);
  transform: translateY(-15px) scale(1.05);
  background: linear-gradient(145deg, #7868f8, #6ce4f4);
}

/* Glowing Animation */
.single-intro-feature-content::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 15px;
  z-index: -1;
  background: linear-gradient(45deg, rgba(255, 0, 150, 0.2), rgba(0, 229, 255, 0.3));
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
  animation: neon-glow 5s infinite alternate;
}

.single-intro-feature-content:hover::after {
  opacity: 1;
}

@keyframes neon-glow {
  0% {
    filter: blur(10px);
  }
  100% {
    filter: blur(30px);
  }
}

/* Particle Effect on Hover */
.single-intro-feature-content:hover::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 150%;
  height: 150%;
  background: radial-gradient(circle, rgba(108, 228, 244, 0.5), transparent 60%);
  opacity: 0.6;
  z-index: -1;
  animation: particle-animation 2s ease-out infinite;
}

@keyframes particle-animation {
  0% {
    transform: scale(0.8) translate(-50%, -50%);
    opacity: 1;
  }
  100% {
    transform: scale(1.5) translate(-50%, -50%);
    opacity: 0;
  }
}

/* Feature Icon with Pulse Effect */
.intro-ft-icon img {
  width: 60px;
  height: 60px;
  animation: icon-pulse 2s infinite;
}

@keyframes icon-pulse {
  0%, 100% {
    transform: scale(1);
    filter: brightness(1);
  }
  50% {
    transform: scale(1.1);
    filter: brightness(1.5);
  }
}
.single-intro-feature-content:hover h4 {
  color: #6ce4f4;
  
  text-shadow: 2px 2px 8px rgba(108, 228, 244, 0.5);
}
/* Animated Gradient Heading */
.single-intro-feature-content h4 {
  font-size: 24px;
  font-weight: bold;
  background: linear-gradient(90deg, #7209b7, #4361ee, #4cc9f0);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: text-gradient 3s ease infinite;
}


@keyframes text-gradient {
  0% {
    background-position: 0%;
  }
  100% {
    background-position: 100%;
  }
}

/* Glow Effect for Paragraph */
.single-intro-feature-content p {
  font-size: 16px;
  line-height: 1.6;
  color: #646b7f;
  transition: color 0.3s ease;
}

.single-intro-feature-content:hover p {
  color: rgba(255, 255, 255, 0.8);
  text-shadow: 0 0 8px rgba(108, 228, 244, 0.8);
}

/* Floating Animation for Cards */
.single-intro-feature-content {
  animation: float-card 6s ease-in-out infinite;
}

@keyframes float-card {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

/* Rotating Background Shapes */
.intro-feature-icon {
  top: 28%;
  left: 7%;
  animation: spin-bg 20s linear infinite;
}

@keyframes spin-bg {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* Text Fade-in Effect */
.intro-feature-text-style {
  font-size: 300px;
  bottom: -110px;
  line-height: 1;
  right: -30px;
  color: rgba(240, 247, 254, 0.2);
  animation: fade-in 3s ease-in-out forwards, move-up 5s infinite alternate;
}

@keyframes fade-in {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes move-up {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-20px);
  }
}


/* 5. about area
------------------------------------------------------------- */
/* About Us Section - Enhanced Animation */

/* Background Shape Animations */
.about-img-over::after {
  position: absolute;
  content: "";
  background: #ffffff;
  background-image: url(../images/about/about-img-shape.jpg);
  width: 65px;
  height: 65px;
  right: -9%;
  top: 137px;
  transform: rotate(42deg);
  z-index: 11;
  animation: float 5s ease-in-out infinite;
}

.about-img-over::before {
  position: absolute;
  content: "";
  width: 45px;
  height: 64px;
  background: linear-gradient(45deg, #7868f8, #6ce4f4);
  right: 55px;
  bottom: -32px;
  z-index: 111;
  animation: bounce 3s ease-in-out infinite;
}

/* Rotating Shape 1 */
.about-shape1 {
  width: 133px;
  height: 134px;
  border: 4px solid #7a88d8;
  right: -25px;
  top: -25px;
  animation: rotate-scale 8s ease-in-out infinite;
}

/* Pulsating Shape 2 */
.about-shape2 {
  background: linear-gradient(145deg, #6b9cf4, #7868f8);
  width: 91px;
  height: 91px;
  top: 70px;
  left: -12px;
  animation: pulse 4s infinite;
}

/* Rotating Download Background */
.about-download-wrapper {
  left: -75px;
  bottom: -125px;
  animation: rotate-slow 12s linear infinite;
}

.download-bg {
  animation: rotation 10s infinite linear;
}

.d-icon {
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  transition: transform 0.3s ease-in-out;
}

.cv-download-link:hover .d-icon {
  transform: translate(-50%, -50%) scale(1.2);
}

/* About Icon Float */
.about-icon {
  right: 3%;
  top: 5%;
  animation: float 6s ease-in-out infinite;
}

/* Rotated Text Animation */
.about-text-style {
  font-size: 310px;
  line-height: 1;
  transform: matrix(0, -1, 1, 0, 0, 0);
  color: rgba(255, 255, 255, 0.05);
  bottom: 165px;
  right: 68%;
  animation: text-fade-in 3s ease-in-out forwards;
}

/* Image Hover Effects */
.about-img-wrapper:hover .about-img {
  transform: scale(1.05);
  transition: transform 0.5s ease;
}

.about-img-wrapper:hover::before,
.about-img-wrapper:hover::after {
  background: linear-gradient(145deg, #7868f8, #6ce4f4);
  transition: background 0.5s ease;
}

/* Title and Content Hover Effects */
.title span {
  transition: color 0.3s ease, transform 0.5s ease;
}

.title span:hover {


  color: #6ce4f4;
  transform: translateY(-5px);
}

p:hover {
  color: #7a88d8;
} 
/* 
p {
  color: #a0a0bb;
  transition: color 0.3s ease;
}
*/

/* Keyframe Animations */
@keyframes float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

@keyframes bounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-15px);
  }
}

@keyframes rotate-scale {
  0%, 100% {
    transform: rotate(0deg) scale(1);
  }
  50% {
    transform: rotate(180deg) scale(1.2);
  }
}

@keyframes pulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 10px rgba(108, 228, 244, 0.5);
  }
  50% {
    transform: scale(1.1);
    box-shadow: 0 0 30px rgba(108, 228, 244, 0.8);
  }
}

@keyframes rotate-slow {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes text-fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}


/* 6. fun fact area
------------------------------------------------------------- */
/* Fun Fact Area Animations with Enhanced Interactions */
.fun-fact-bg {
  background: #25262f;
  position: relative;
  overflow: hidden;
}

.fun-fact-content p {
  color: #a0a0bb;
  font-size: 15px;
  line-height: 1.8;
  transition: color 0.3s ease-in-out;
}

.fun-fact-content p:hover {
  color: #7868f8; /* Subtle hover color change for paragraph text */
}

.single-fact {
  padding: 48px 30px;
  border: 1px solid rgba(204, 211, 217, 0.2);
  background: linear-gradient(145deg, #7a88d8, #6b9cf4);
  border-radius: 10px;
  overflow: hidden;
  position: relative;
  transition: transform 0.5s ease, box-shadow 0.5s ease;
}

.single-fact:hover {
  transform: translateY(-10px) scale(1.05);
  box-shadow: 0 10px 40px rgba(108, 228, 244, 0.3);
  background: linear-gradient(145deg, #6b9cf4, #6ce4f4); /* Subtle gradient change */
}

.single-fact span {
  font-size: 72px;
  line-height: 1;
  color: #6ce4f4; /* Accent color */
  transition: color 0.3s ease, transform 0.5s ease;
}

.single-fact:hover span {
  color: #7868f8; /* Shift to a deeper color on hover */
  transform: rotate(10deg) scale(1.1);
}

.single-fact h3 {
  font-size: 18px;
  color: #fff;
  line-height: 1.5;
  text-transform: uppercase;
  transition: color 0.3s ease, letter-spacing 0.3s ease;
  margin-top: 7px;
  text-align: center;
}

.single-fact:hover h3 {
  color: #6ce4f4; /* Highlighted on hover */
  letter-spacing: 2px; /* Slight letter spacing animation */
}

.hover-effect {
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

.hover-text {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  color: #fff;
  transition: top 0.5s ease-in-out, opacity 0.5s ease-in-out;
  opacity: 0;
}

.single-fact:hover .hover-text {
  top: 0;
  opacity: 1;
}

.content-container {
  transition: opacity 0.3s ease, transform 0.5s ease;
}

.single-fact:hover .content-container {
  opacity: 0.2;
  transform: scale(0.9);
}

.fact-style1,
.fact-style2 {
  animation: float 5s ease-in-out infinite;
}

.fact-style1 {
  bottom: 86%;
  left: 0;
}

.fact-style2 {
  bottom: -75px;
  right: -5px;
}

/* Floating animation for shapes */
@keyframes float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-15px);
  }
}

/* Glow Effect */
.single-fact:hover::before {
  content: '';
  position: absolute;
  top: -10px;
  left: -10px;
  right: -10px;
  bottom: -10px;
  border-radius: 15px;
  background: radial-gradient(circle, rgba(108, 228, 244, 0.5), transparent);
  animation: glow 1.5s infinite alternate;
  z-index: -1;
}

@keyframes glow {
  0% {
    transform: scale(0.95);
    opacity: 0.7;
  }
  100% {
    transform: scale(1.1);
    opacity: 1;
  }
}


/* 7. portfolio area
-------------------------------------------------------------- */
.single-portfolio {
  padding-top: 48px;
  padding-bottom: 38px;
}
.port-img {
  opacity: 0;
  visibility: hidden;
  margin-top: -12px;
  z-index: 1;
  border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
}
.single-portfolio:hover .port-img {
  opacity: 1;
  visibility: visible;
  transform: rotate(-12deg);
  -webkit-transform: rotate(-12deg);
  -moz-transform: rotate(-12deg);
  -ms-transform: rotate(-12deg);
  -o-transform: rotate(-12deg);
}
.port-content {
  font-size: 25px;
  cursor: pointer;
  color: var(--main-color);
  border: 1px solid var(--main-border);
  width: 95px;
  height: 95px;
  line-height: 95px;
  border-radius: 50%;
}
.port-content:hover {
  background: var(--main-color);
  border: 1px solid var(--main-color);
  color: #fff;
}
.single-portfolio h3 {
  font-size: 48px;
  line-height: 1.2;
}
.award-content h3 {
  font-size: 24px;
  line-height: 1.3;
}

/* 8. experience area
-------------------------------------------------------------- */
.experience-img {
  margin-left: -48%;
}
.experience-ser-icon {
  background: var(--main-color);
  border: 1px solid var(--main-color);
  border-radius: 6px;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  -ms-border-radius: 6px;
  -o-border-radius: 6px;
}
.experience-content li:hover .experience-ser-icon,
.education-content li:hover .experience-ser-icon {
  background: transparent;
}
.experience-content li .experience-ser-icon span,
.education-content li .experience-ser-icon span {
  color: #fff;
}
.experience-content li:hover .experience-ser-icon span,
.education-content li:hover .experience-ser-icon span {
  color: var(--main-color);
}
.experience-ser-icon span {
  width: 70px;
  height: 70px;
  line-height: 70px;
  font-size: 35px;
}
.experience-service-text h4 span {
  font-size: 15px;
}
.experience-bg-img {
  border-bottom-right-radius: 10px;
  border-top-right-radius: 10px;
}
.experience-service-text h3 {
  font-size: 30px;
}
.experience-service-text h4 {
  font-size: 18px;
}

/* 9. skill area
-------------------------------------------------------------- */
.single-skill .knob {
  color: #2e2e37 !important;
}
.progress-circular h4 {
  font-size: 25px;
  line-height: 1.23;
}
.skill-text-style {
  font-size: 310px;
  line-height: 0;
  bottom: 60px;
  left: -25px;
}
.padtoexp{
  padding: 30px;
}

/* 10. price area
-------------------------------------------------------------- */
/* Base Styles for Single Price Cards */
/* General Styling for Single Price Boxes */
.single-price {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #ffffff, #f9f9f9);
  border-radius: 10px;
  box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.1);
  transition: transform 0.4s ease, box-shadow 0.4s ease, background 0.4s ease;
  display: flex;
  flex-direction: column; /* Ensures content stacks vertically */
  justify-content: space-between; /* Proper spacing between elements */
  height: 500px; /* Fixed height for uniform size */
}

.single-price:hover {
  margin-top: -20px;
  transform: translateY(-10px);
  box-shadow: 0px 15px 30px rgba(0, 0, 0, 0.15);
  background: linear-gradient(135deg, #eef3fa, #ffffff);
}

/* Price List Items */
.price-list li {
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  opacity: 0.9;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.price-list li:hover {
  opacity: 1;
  transform: scale(1.02);
}

/* List Text and Icons */
.price-list li p,
.price-list li span {
  font-size: 16px;
  transition: color 0.3s ease;
}

.price-list li span {
  width: 20px;
  height: 20px;
  line-height: 1.4;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  background-color: #6ce4f4;
  color: #fff;
  margin-right: 10px;
  transition: background-color 0.3s ease, transform 0.3s ease;
}

.price-list li span.disable {
  background-color: #e5e5e5;
  color: #999;
}

.price-list li:hover span {
  transform: scale(1.1);
}

/* Rate */
.rate {
  font-size: 30px;
  font-weight: 700;
  color: #6ce4f4;
  transition: color 0.3s ease, text-shadow 0.3s ease;
}

.single-price:hover .rate {
  color: #5ac0db;
  text-shadow: 1px 1px 5px rgba(108, 228, 244, 0.5);
}

/* Button Styling */
.single-price .btn {
  margin-top: auto; /* Aligns the button at the bottom */
  padding: 10px 35px;
  background-color: #6ce4f4;
  color: #fff;
  border-radius: 5px;
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.single-price .btn:hover {
  background-color: #5ac0db;
  box-shadow: 0px 10px 20px rgba(108, 228, 244, 0.3);
}

/* Title Styling */
.single-price h3 {
  font-size: 30px;
  color: #4d4d4d;
  font-weight: 600;
  margin-bottom: 15px;
  border-bottom: 2px solid #6ce4f4;
  display: inline-block;
  padding-bottom: 8px;
  transition: color 0.3s ease, border-color 0.3s ease;
}

.single-price:hover h3 {
  color: #5ac0db;
  border-color: #5ac0db;
}

/* Description */
.single-price p {
  font-size: 18px;
  color: #555;
  transition: color 0.3s ease;
}

.single-price:hover p {
  color: #333;
}

/* Price Wrapper Alignment */
.price-wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch; /* Ensures all boxes have equal height */
}

/* Responsive Design */
@media (max-width: 992px) {
  .single-price {
    height: auto; /* Allow boxes to adjust height for smaller screens */
  }
}


/* Enhanced Service Area Animations with Custom Colors */
.single-service {
  box-shadow: 0px 5px 90px 0px rgba(2, 24, 93, 0.08);
  position: relative;
  overflow: hidden;
  transition: transform 0.4s ease, box-shadow 0.4s ease;
  background: linear-gradient(145deg, #7a88d8, #6b9cf4);
  color: #fff; /* Ensures contrast */
  /* height: 100%;
  max-height: 269px; */
}

.service-circle.service-small-circle {
  width: 36px;
  height: 36px;
  top: -11px;
  left: -14px;
  background: #7868f8; /* First color */
  transition: all 0.5s ease-in-out;
}

.service-circle.service-large-circle {
  width: 58px;
  height: 58px;
  bottom: -12px;
  right: -12px;
  background: #6ce4f4; /* Fourth color */
  transition: all 0.5s ease-in-out;
}

.single-service:hover {
  transform: translateY(-10px) scale(1.05);
  box-shadow: 0px 10px 100px rgba(2, 24, 93, 0.2);
  background: linear-gradient(145deg, #6b9cf4, #7868f8);
}

.single-service:hover .service-circle.service-small-circle {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(1.2);
  background: #7a88d8; /* Second color */
}

.single-service:hover .service-circle.service-large-circle {
  bottom: 50%;
  right: 50%;
  transform: translate(50%, 50%) scale(1.5);
  background: #7868f8; /* First color */
}

.single-service:hover .service-text h3 {
  color: #6ce4f4;
  text-shadow: 2px 2px 8px rgba(108, 228, 244, 0.5); 
}

.single-service:hover .service-text p {
  color: #6454f0; /* Apply the requested color on hover */
}

.service-text h3 {
  font-size: 30px;
  transition: color 0.3s ease, text-shadow 0.3s ease;
}

.service-text p {
  transition: color 0.3s ease;
}


/* 12. testimonial area
-------------------------------------------------------------- */
/* General styles */
.testimonial-text {
  font-size: 24px;
  line-height: 1.75;
  color: #555;
  font-style: italic;
  position: relative;
  animation: fadeInUp 1s ease-out;
}

/* Quote Icon */
.quit {
  top: 14px;
}

.quit span {
  font-size: 32px;
  color: #6ce4f4;
  position: absolute;
  left: 0;
  top: -10px;
  transform: rotate(-45deg);
}

/* Avatar Text Styling */
.avatar-info p {
  font-size: 16px;
  color: #999;
}

/* Testimonial Image Styling */
.testimonial-img {
  width: 132%;
  transition: transform 0.3s ease-in-out, box-shadow 0.3s ease;
}

.testimonial-img:hover {
  transform: scale(1.05);
  box-shadow: 0px 15px 30px rgba(0, 0, 0, 0.15);
}

/* Testimonial Background */
.testimonial-bg::before {
  position: absolute;
  content: "";
  background: var(--section-bg);
  left: -100%;
  top: 0;
  bottom: 0;
  right: 0;
  border-bottom-right-radius: 12px;
  border-top-right-radius: 12px;
  transition: left 0.4s ease-in-out;
}

/* On hover, background animates */
.testimonial-bg:hover::before {
  left: 0;
}

/* Testimonial Section Background */
.testimonial-bg {
  border-bottom-right-radius: 12px;
  border-top-right-radius: 12px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  background: #fff;
  padding: 50px 40px;
  transition: all 0.3s ease;
}

.testimonial-bg:hover {
  box-shadow: 0px 15px 50px rgba(0, 0, 0, 0.2);
  transform: translateY(-5px);
}

/* Testimonial Text Style */
.testimonial-text-style {
  right: -20px;
  font-size: 140px;
  font-weight: 900;
  color: rgba(200, 200, 200, 0.1);
  text-transform: uppercase;
  position: absolute;
  top: 10%;
  pointer-events: none;
  z-index: 0;
}

/* Smooth Fade In Animation for Text */
@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translateY(50px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Add transition and animations to testimonials */
.testimonial-content {
  opacity: 0;
  transform: translateY(50px);
  animation: fadeInUp 1s ease-out forwards;
  animation-delay: 0.2s;
}

.testimonial-content:nth-child(2) {
  animation-delay: 0.4s;
}

.testimonial-content:nth-child(3) {
  animation-delay: 0.6s;
}

.testimonial-content.active {
  opacity: 1;
  transform: translateY(0);
}

/* Hover effect on testimonials */
.testimonial-wrapper:hover .testimonial-content {
  transform: translateY(-10px);
  box-shadow: 0px 10px 25px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Responsive Styling */
@media (max-width: 768px) {
  .testimonial-img {
    width: 100%;
  }

  .testimonial-bg {
    padding: 30px 20px;
  }

  .testimonial-text-style {
    font-size: 100px;
    top: 5%;
  }

  .testimonial-text {
    font-size: 18px;
  }
}


/* 13. brand area
-------------------------------------------------------------- */
.brand-active li {
  text-align: center;
}
.single-brand img {
  display: inline-block;
}
.brand-active li:hover .single-brand-out {
  transform: translateY(-100%);
}
.single-brand.single-brand-hover {
  position: absolute;
  width: 100%;
  margin: 0 auto;
  top: 110%;
}
.brand-active li:hover .single-brand-hover {
  top: 0;
}
/* 14. Contact Area with Animations */
.contact-area {
  background: #f4f7fb;
  padding: 90px 0;
  position: relative;
  overflow: hidden;
}

.contact-wrapper {
  position: relative;
}

/* Contact Info */
.contact-info-content li {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  transition: transform 0.3s ease;
}

.contact-info-content li:hover {
  transform: translateX(10px); /* subtle hover effect */
}

/* Contact icon */
.contact-icon {
  width: 72px;
  height: 72px;
  line-height: 72px;
  border-radius: 50%;
  background: #6ce4f4;
  text-align: center;
  transition: transform 0.3s ease, background 0.3s ease;
}

.contact-icon i {
  color: #fff;
  font-size: 28px;
  transition: color 0.3s ease;
}

.contact-info-content li:hover .contact-icon {
  transform: scale(1.1);
  background: #7a88d8;
}

.contact-info-content li:hover .contact-icon i {
  color: #fff;
}

/* Contact text */
.contact-text h4 {
  font-size: 24px;
  font-weight: 600;
  color: #333;
  margin-bottom: 5px;
  transition: color 0.3s ease;
}

.contact-info-content li:hover .contact-text h4 {
  color: #7a88d8;
}

.contact-text p {
  font-size: 16px;
  color: #777;
  margin: 0;
  transition: color 0.3s ease;
}

.contact-info-content li:hover .contact-text p {
  color: #333;
}

/* Contact Form */
.contact-form {
  /* background: #fff;
  border-radius: 12px;
  padding: 40px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1); */
  transition: transform 0.3s ease-in-out;
}

.contact-form:hover {
  transform: translateY(-10px); /* Slight elevation on hover */
}

/* Form Fields */
.contact-info input,
.contact-info textarea {
  font-size: 18px;
  border-radius: 26px;
  padding: 15px;
  width: 100%;
  border: 2px solid #ddd;
  margin-bottom: 20px;
  transition: border 0.3s ease, box-shadow 0.3s ease;
}

.contact-info input:focus,
.contact-info textarea:focus {
  border-color: #6ce4f4;
  box-shadow: 0 0 10px rgba(108, 228, 244, 0.4);
  outline: none;
}

.contact-info textarea {
  min-height: 200px;
}

.contact-info input::placeholder,
.contact-info textarea::placeholder {
  color: #aaa;
  font-style: italic;
}

/* Submit Button */
.btn {
  position: relative;
  display: inline-block;
  background-color: #6ce4f4;
  color: #fff;
  font-size: 18px;
  padding: 15px 30px;
  border-radius: 50px;
  border: none;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform 0.4s ease, box-shadow 0.3s ease, background-color 0.3s ease;
}

.btn:hover {
  transform: translateY(-5px); /* Slight movement */
  background-color: #7a88d8;
  box-shadow: 0px 15px 30px rgba(0, 123, 255, 0.2); /* Soft shadow effect */
}

/* Add animation on focus for the button */
.btn:focus {
  outline: none;
  box-shadow: 0 0 15px rgba(108, 228, 244, 0.8);
}

.btn:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 50px;
  transition: opacity 0.3s ease;
  opacity: 0;
}

.btn:hover:after {
  opacity: 1;
}

/* AOS animations */
.contact-info input,
.contact-info textarea,
.contact-info .btn {
  opacity: 0;
  transform: translateY(20px);
  animation: fadeInUp 1s ease-out forwards;
}

.contact-info input:nth-child(1),
.contact-info textarea:nth-child(4),
.contact-info .btn:nth-child(5) {
  animation-delay: 0.3s;
}

.contact-info input:nth-child(2),
.contact-info .btn:nth-child(5) {
  animation-delay: 0.5s;
}

.contact-info input:nth-child(3) {
  animation-delay: 0.7s;
}

/* Animation for the form */
@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Map */
.map-wrapper {
  margin-top: 40px;
}

.map-wrapper iframe {
  border-radius: 12px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.map-wrapper iframe:hover {
  transform: scale(1.05);
  box-shadow: 0px 15px 30px rgba(0, 0, 0, 0.2);
}

/* Media Queries */
@media (max-width: 768px) {
  .contact-info input,
  .contact-info textarea {
    font-size: 16px;
    padding: 12px;
  }

  .contact-info .btn {
    font-size: 16px;
    padding: 12px 25px;
  }

  .contact-wrapper {
    padding: 20px;
  }

  .contact-form {
    padding: 30px;
  }
}

/* map */
.map-wrapper {
  width: 100%;
  min-height: 340px;
  background: #f9f9f9;
  border-radius: 10px;
}

/* 15. blog area
-------------------------------------------------------------- */
.blog-meta li span {
  font-size: 15px;
}
.single-blog-content h3 {
  font-size: 24px;
  line-height: 1.3;
}
.blog-img {
  overflow: hidden;
}
.single-blog:hover img,
.zoom-img:hover {
  transform: scale(1.1);
  -webkit-transform: scale(1.1);
  -moz-transform: scale(1.1);
  -ms-transform: scale(1.1);
  -o-transform: scale(1.1);
}
.single-blog {
  transition: 0.5s;
  -webkit-transition: 0.5s;
  -moz-transition: 0.5s;
  -ms-transition: 0.5s;
  -o-transition: 0.5s;
}
.blog-img,
.blog-img:hover {
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
}
.single-blog-content {
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
  box-shadow: 0px 5px 15px 0px rgba(7, 7, 7, 0.05);
}
.blog-modal-img img {
  border-radius: 30px;
}
/* modal */
.modal-dialog {
  max-width: 1180px;
  margin: 0 auto;
}
.modal-content h2 {
  font-size: 36px;
  padding: 50px 0px 20px 0px;
  line-height: 1.32;
}
.pro-modal-footer h6 {
  font-size: 16px;
}
.meta-wrapper {
  border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
}
.item-meta li {
  padding-bottom: 16px;
  color: var(--primary-color);
}
.modal-tags li a {
  color: var(--meta-text-color);
  font-family: "Open Sans", sans-serif;
}
.blog-meta li a,
.blog-modal-wrapper .blog-meta li span {
  font-size: 15px;
}
.blog-modal-wrapper .blog-meta li {
  display: inline-block;
  margin-right: 30px;
}
.blog-meta li {
  margin-right: 12px;
}
.blog-meta li:last-child {
  margin-right: 0;
}
.item-meta li span {
  color: var(--text-color);
  font-size: 15px;
}
.modal-body .btn {
  padding: 11px 25px 10px 25px;
  font-size: 14px;
}

/* 16. footer area
-------------------------------------------------------------- */
.subscribe-info span {
  right: 25px;
  top: 50%;
  transform: translateY(-50%);
}
.social.social-bg li a {
  font-size: 18px;
  width: 42px;
  height: 42px;
  line-height: 42px;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
}
.footerwords{
  font-size: 14px;
  font-weight: 600;
}
.footer-video-container {
  position: absolute;
  /* top: 0;
  left: 0; */
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: -1; /* Places the video behind the footer content */
  max-height: 500px;
}

@media screen and (max-width: 678px) {
  .footer-video-container {
    max-height: 703px;
  }
}
.footer_white_color{
  color: #fff;
}
.bg-video {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Ensures the video covers the entire footer area */
}

.contact-info p {
  font-size: 16px;
  margin: 10px 0;
}


.contact-info a {
  color: #333; /* Default color for the links */
  text-decoration: none;
  /* font-weight: 600; */
  transition: color 0.3s ease;
  color: #fff;
}

.contact-info a:hover {
  color: #007BFF; /* Change link color on hover */
}

.contact-info i:hover {
  background-color: #0056b3; /* Darker blue when icon is hovered */
}
.contact-info i {
  font-size: 20px;
  width: 40px;
  height: 40px;
  display: inline-block;
  text-align: center;
  line-height: 30px;
  border-radius: 50%;
  background-color: #304154;
  color: white;
  margin-right: 10px;
  transition: background-color 0.3s ease;
  padding: 5px;
}
/* 17. extra info css
-------------------------------------------------------------- */
#scroll a {
  position: fixed;
  font-size: 20px;
  width: 45px;
  height: 45px;
  line-height: 45px;
  right: -1px;
  bottom: 30px;
  cursor: pointer;
  z-index: 11;
  color: #ffffff;
  -webkit-transition: all 0.3s ease-out 0s;
  -moz-transition: all 0.3s ease-out 0s;
  -ms-transition: all 0.3s ease-out 0s;
  -o-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
  border-radius: 50%;
}
#scroll a:hover,
#scroll a:focus {
  color: #fff;
  opacity: 0.9;
}
/* .side-mobile-menu start*/
.side-mobile-menu {
  width: 380px;
  position: fixed;
  left: -125%;
  top: 0;
  z-index: 9999;
  height: 100%;
  background: var(--main-color);
  transition: all 0.5s ease-out;
  overflow: scroll;
  -webkit-transition: all 0.5s ease-out;
  -moz-transition: all 0.5s ease-out;
  -ms-transition: all 0.5s ease-out;
  -o-transition: all 0.5s ease-out;
}
.mean-container .mean-nav ul li a {
  background: var(--main-color);
  color: #ffffff;
  border: 0;
  font-weight: 400;
  padding: 8px 5%;
  border-color: transparent;
  text-transform: capitalize;
}
.mean-container .mean-nav ul li a:hover {
  background: var(--main-color);
  color: #fff;
}
.side-mobile-menu.open-menubar {
  left: 0;
}
.close-icon span {
  font-size: 18px;
  color: var(--main-color);
  background: #e7e1e1;
  width: 36px;
  height: 36px;
  display: inline-block;
  line-height: 37px;
  text-align: center;
  border-radius: 30px;
  transition: 0.3s;
  -webkit-transition: 0.3s;
  -moz-transition: 0.3s;
  -ms-transition: 0.3s;
  -o-transition: 0.3s;
}
.close-icon span:hover {
  box-shadow: 0px 6px 30px 0px rgba(7, 7, 7, 0.12);
}
.modal-content .close-icon span:hover {
  box-shadow: none;
  color: #f5f4f4;
  background: var(--main-color);
}
.mobile-menubar {
  font-size: 20px;
  border: 2px solid transparent;
  padding: 5px 10px;
  border-radius: 3px;
}
.mobile-menubar:focus {
  color: var(--main-color);
}
.mean-container .mean-nav {
  background: var(--main-color);
}
/* .side-mobile-menu end*/




    /* //////////////// blinking border start ///////////////////////////// */
    .blinking-border {
      border: 1px solid #cc0000 ;
      outline: 1px solid #cc0000 ;
      animation: blink ease-in-out 1.5s infinite ;
  }
  
  @keyframes blink {
          0% {
              border-color: #cc0000 ;
              outline-color: #cc0000 ;
          }
          50% {
              border-color: transparent ;
              outline-color: transparent ;
          }
          100% {
              border-color: #cc0000 !important;
              outline-color: #cc0000 !important;
      }


  }

/* //////////////// blinking border start end///////////////////////////// */





 /* WhatsApp icon */
 .contact_icon {
  background-color: #42db87;
  color: #fff;
  width: 60px;
  height: 60px;
  font-size: 30px;
  border-radius: 50px;
  text-align: center;
  box-shadow: 2px 2px 3px #999;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: pulse 1.5s infinite;
}

.fa-whatsapp:before {
  content: "\f232";
}

/* Floating button container */
.floating_btn {
  position: fixed;
  bottom: 42px;
  /* right: 15px; Adjusted to 15px for better positioning */
  width: 100px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}



/* search btn  */

/* Wrapper for the search input and icon */
.search-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  width: 200px;
}

/* Search input styling */
.search-input {
  width: 100%;
  padding: 8px 12px 8px 12px; /* Standard padding */
  padding-right: 35px; /* Add space for the icon on the right */
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
  outline: none;
  transition: all 0.3s ease-in-out;
}

.search-input:focus {
  border-color: #007bff;
  box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
}

/* Search icon styling */
.search-icon {
  position: absolute;
  right: 10px; /* Position the icon inside the input box, aligned to the right */
  color: #aaa;
  font-size: 16px;

}
.search-iconn {

  right: 10px; /* Position the icon inside the input box, aligned to the right */
  color: #aaa;
  font-size: 16px;

}

.theme-colorr{
  color: green;
}



@media screen and (max-width: 678px) {
  .header-search{
    display: none;

  }
}

.slider-image {
  display: none; /* Hide all images by default */
}

.slider-image.active {
  display: block; /* Show only the active image */
}

.edu_p{
  font-size: 15px;
}

.youtube-bg {
  background-color: #ff0000; /* YouTube red */
  color: #ffffff; /* White icon color */
  font-size: 18px; /* Icon size (matches others) */
  width: 42px; /* Circle size */
  height: 42px; /* Circle size */
  line-height: 42px; /* Align icon vertically */
  border-radius: 50%; /* Make it circular */
  display: inline-block; /* Ensure proper alignment */
  text-align: center; /* Center icon */
  transition: 0.3s ease; /* Add smooth hover effect */
}

.telegram-bg {
  background-color: #0088cc; /* Telegram blue */
  color: #ffffff; /* White icon color */
  font-size: 18px; /* Icon size */
  width: 42px; /* Circle size */
  height: 42px; /* Circle size */
  line-height: 42px; /* Align icon vertically */
  border-radius: 50%; /* Make it circular */
  display: inline-block; /* Ensure proper alignment */
  text-align: center; /* Center icon */
  transition: 0.3s ease; /* Add smooth hover effect */
}

/* Optional: Hover effect for Telegram icon */
.telegram-bg:hover {
  background-color: #0077b5; /* Slightly darker blue on hover */
  color: #ffffff; /* Keep icon color white */
}
.instagram-bg {
  background: radial-gradient(circle at 30% 30%, #fdf497, #fd5949, #d6249f, #285aeb); /* Instagram gradient */
  color: #ffffff; /* White icon color */
  font-size: 18px; /* Icon size */
  width: 42px; /* Circle size */
  height: 42px; /* Circle size */
  line-height: 42px; /* Align icon vertically */
  border-radius: 50%; /* Make it circular */
  display: inline-block; /* Ensure proper alignment */
  text-align: center; /* Center icon */
  transition: 0.3s ease; /* Add smooth hover effect */
}

/* Optional: Hover effect for Instagram icon */
.instagram-bg:hover {
  opacity: 0.9; /* Slight transparency on hover */
  color: #ffffff; /* Keep icon color white */
}