:root {
	--unique-color:#280ebc;
}

body {
	overflow-x: hidden;
}

/* Clearfix Hack */
header::after {
	content: "";
	display: block;
	clear: both; /* Clears the floats */
  }
  
  header {
	position: sticky;
	top: 0px;
	text-align: center;
	background-color: #FCFCFC;
	max-height: 70px; /* Keeps the header at least 80px high */
	width: 100%;
	z-index: 99;
	box-shadow: 0px 0px 5px rgba(0,0,0,0.1);
	padding: 0 20px; /* Optional: Added padding to adjust the spacing */
  }
  
  .navbar-logo {
	box-sizing: border-box;
	float: left;
	margin-left: -100px;
	height: 70px;
	width: 250px;
	margin-top: -18px; /* Removed the margin-top */
  }
  
  .navbar-logo img {
	height: 100%; /* Ensures it doesn’t overflow */
	width: auto;
	margin-top: 10px; /* You can adjust or remove this */
  }

.cssload-loader {
  	width: 50px;
  	height: 50px;
  	position: absolute;
  	left: 50%;
  	top:50%;
  	transform: translate3d(-50%, -50%, 0);
    -o-transform: translate3d(-50%, -50%, 0);
    -ms-transform: translate3d(-50%, -50%, 0);
    -webkit-transform: translate3d(-50%, -50%, 0);
    -moz-transform: translate3d(-50%, -50%, 0);
  	perspective: 1200;
    -o-perspective: 1200;
    -ms-perspective: 1200;
    -webkit-perspective: 1200;
    -moz-perspective: 1200;
}

.cssload-flipper {
  	position: relative;
  	display: block;
  	height: inherit;
  	width: inherit;
  	animation: cssload-flip 1.08s infinite ease-in-out;
    -o-animation: cssload-flip 1.08s infinite ease-in-out;
    -ms-animation: cssload-flip 1.08s infinite ease-in-out;
    -webkit-animation: cssload-flip 1.08s infinite ease-in-out;
    -moz-animation: cssload-flip 1.08s infinite ease-in-out;
  	transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
}

.cssload-front,
.cssload-back {
  	position: absolute;
  	top: 0;
  	left: 0;
  	display: block;
  	background-color: rgba(58,201,149,0.93);
  	height: 100%;
  	width: 100%;
  	backface-visibility: hidden;
}

.cssload-back {
  	background-color: rgb(59,57,59);
  	z-index: 800;
  	transform: rotateY(-180deg);
    -o-transform: rotateY(-180deg);
    -ms-transform: rotateY(-180deg);
    -webkit-transform: rotateY(-180deg);
    -moz-transform: rotateY(-180deg);
}

span#loading{
	font-size: 15px;
}
.clr-switch{
	border: 2px solid white;
	position: fixed;
	bottom: 10px;
	right: 10px;
	background-color: var(--unique-color);
	border-radius: 15px;
	height: 25px;
	width: 25px;
	animation: color 3s ease-in-out infinite;
	box-shadow: 1px 1px 2px grey;
	z-index: 999;
	cursor: pointer;
}

.bubble-1, .bubble-2, .bubble-3{
	border: 1px solid white;
	display: none;
	position: fixed;
	border-radius: 10px;
	height: 20px;
	width: 20px;
	z-index: 999;
	box-shadow: 2px 2px 2px grey;
	cursor: pointer;
	animation: rotateIn 0.5s ease-in-out
}

.bubble-1{
	background-color: rgb(71, 211, 160);
	right:60px;
	bottom: 9px;
}

.bubble-2{
	background-color: #4ebcfc;
	right: 50px;
	bottom: 50px;
}

.bubble-3{
	background-color: #d84e49;
	right: 10px;
	bottom: 60px;
}

#nav:target .horizontal-page-links{
	display: block;
}

.horizontal-page-links {
	float: right;
	margin-top: 20px; /* Adjusted the margin-top */
  }
  
  .horizontal-page-links ul {
	box-sizing: border-box;
	list-style-type: none;
	margin-top: 0;
	padding-left: 20px;
  }
  
  .horizontal-page-links li {
	padding-left: 15px;
	padding-right: 15px;
  }

.last-navbar-link{
	margin-left: -47px;
	float: right;
	height:23px;
	border-right: 1px solid grey;
}

.horizontal-page-links li a{
	display: block;
	text-decoration: none;
	font-family: calibri;
	font-size: 20px;
	font-weight: bolder;
	background-color: #565656;
  	color: transparent;
  	text-shadow: 0px 2px 3px rgba(255,255,255,0.5);
    -webkit-background-clip: text;
    background-clip: text;
	border-left: 1px solid grey;
}

.horizontal-page-links li a:hover{
	color:var(--unique-color);
	text-shadow: -1px -1px 1px rgba(0,0,0,0.15);
	transition: color 0.5s ease;
}

.horizontal-page-links li a:active{
	color:black;
}

.sliding-out {			/* sliding line bar on navbar links */
	display: inline-block;
	position: relative;
}

.sliding-out:after {
	content: '';
	display: block;
	margin-top: -37px;
	height: 2px;
	width: 0%;
	background: transparent;
	transition: all .3s ease;
}
.sliding-out:hover:after {
	width: 100%;
	background: var(--unique-color);
}

.register-user a{
	float: right;
	margin-top: 35px;
  	height: 17px;
  	border:none;
  	cursor:pointer;
  	border-radius:2px;
  	padding:10px 20px 10px 0;
  	color:white;
  	font-size:15px;
  	font-family: 'calibri', arial;
  	text-align:left;
  	text-indent:40px;
 	text-decoration: none;
  	transition: background .5s, text-indent 0.5s;
  	box-shadow: 0px 1px 3px grey;
}

.register-user a#register {
	margin-right: 30px;
  	background:url('../images/register.png') no-repeat 6px 6px #f43545;
  	width: 90px;
	margin-top:20px;
}

.register-user a#register:hover {
  	background-image: url('../images/register.png');
  	background-color: var(--unique-color);
  	background-position: 75px 6px;
  	text-indent: 15px; 
  	box-shadow: 0px 5px 15px rgba(0,0,0,0.3);
	color:white;
	transition: all .3s ease;
}

li,ul,body,input{
	margin:0; 
	padding:0; 
	list-style:none
}

body{
	background-color: #f4f2f5;
}

body::after{				/* Body background */
	background-image: url("../images/bg6.png");
	content: "";
	opacity: 0.07;
	top: 0;
	left: 0;
	bottom: 0;
  	right: 0;
  	position: fixed;
  	z-index: -1;   
}

img{
	transition: all 0.4s ease;
}
img:hover {
	transform: scale(1.05);

	opacity: 0.9;
}

.wrap-width{
	margin: 0 auto;
	align-content: center;
	text-align: center;
	max-width: 1600px;
}

.clearfix::after {		/* clearfix hack */
	content: "";
    clear: both;
    display: table;
} 

hr.style-1 {			/*horizontal line style*/
    border: 0;
    height: 1px;
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.30), rgba(0, 0, 0, 0));
}

hr.style-2 {			/*horizontal line style*/
    height: 12px;
    border: 0;
    box-shadow: inset 0 12px 12px -12px rgba(0, 0, 0, 0.5);
}

.vertical-line{			/*vertical line*/
	display: inline-block;
	height: 560px;
	width: 1px;
	background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0));
}

header::before{			/* horizontal rainbow line above header */
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: #c4e17f;
  border-radius: 5px 5px 0 0;
  background-image: linear-gradient(to left, #c4e17f, #c4e17f 12.5%, #db9dbe 50%, #db9dbe 62.5%, #669ae1 75%,  #62c2e4 87.5%, #62c2e4);
}

h1 {
	font-family: 'Ropa Sans',calibri,Georgia;
	font-size: 30px;
}

h1 span{
	color: var(--unique-color);
}

.empty-layout{
	float:left;
	width: 7%;
	height: 560px;
}

/* SIGN UP BAR */

.link-container{
	text-align: center;
	margin-top: 15px;
	display: block;
	width: 100%;
	background-color: var(--unique-color);
	box-shadow: 1px 1px 5px rgba(0,0,0,0.5);
}

.link-container a#register{
	float: left;
	background-color: #555;
	display: block;
  	width: 150px;
  	height: 25px;
  	border:none;
  	cursor:pointer;
  	border-radius:2px;
  	padding:10px 20px 10px 0;
  	color:white;
  	font-size:20px;
  	font-family: 'Georgia';
  	text-indent: 25px;
 	text-decoration: none;
  	box-shadow: rgb(204, 204, 204) 1px 1px 0px, rgb(201, 201, 201) 2px 2px 0px, rgb(187, 187, 187) 3px 3px 0px, rgb(185, 185, 185) 4px 4px 0px, rgb(170, 170, 170) 3px 5px 0px, rgba(0, 0, 0, 0.0980392) 3px 6px 1px, rgba(0, 0, 0, 0.0980392) 0px 0px 5px, rgba(0, 0, 0, 0.298039) 0px 1px 3px, rgba(0, 0, 0, 0.14902) 0px 3px 5px, rgba(0, 0, 0, 0.2) 0px 5px 10px, rgba(0, 0, 0, 0.2) 0px 10px 10px, rgba(0, 0, 0, 0.0980392) 0px 20px 20px, 0px 0px 5px rgba(0,0,0,0.5);
  	margin: 20px 30px 0px 10%;
  	transition: transform 0.2s ease;
}

.link-container a#register:active{
	box-shadow: rgb(204, 204, 204) 1px 1px 0px, rgb(201, 201, 201) 2px 2px 0px, rgb(187, 187, 187) 3px 3px 0px, rgba(0, 0, 0, 0.0980392) 0px 0px 5px, rgba(0, 0, 0, 0.298039) 0px 1px 3px, rgba(0, 0, 0, 0.14902) 0px 3px 5px, rgba(0, 0, 0, 0.2) 0px 10px 10px, rgba(0, 0, 0, 0.0980392) 0px 20px 20px, 0px 0px 5px rgba(0,0,0,0.5);
	transform: translateY(5px);
}

.link-container a#register:hover{
	background-color: var(--unique-color);

}

.link-container p{
	color: white;
	float: left;
	font-family: 'Fjalla One', sans-serif;
	font-size: 30px;
	margin-top: 25px;
  	color: white;
  	text-shadow: 0px 2px 3px rgba(0,0,0,0.5);
}

.dashboard {
    background: linear-gradient(to right, #fcfcfc 0%, #ffffff 60%);
	width:100%;
	flex-wrap: wrap;
	display: flex;
	height: 60vh;
	position: relative;
}
.form {
	width:55%;
	padding-left: 2%;
	margin-top: 10px;
	padding-bottom: 10px;
	position: relative;
	z-index: 1;
}
.form::before {
    content: '';
    background: url('images/vibrantlogo.jpg') no-repeat center center;
    background-size: contain; /* Ensures the logo scales proportionally */
    opacity: 0.1; /* Low opacity for watermark effect */
    /*filter: grayscale(100%); /* Converts the logo to black & white */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0; /* Ensures the watermark stays behind the content */
}
form {
	background-color: yellow;
	padding: 10px 10px;
	border-radius: 5px;
	position: relative;
	z-index: 1;
}
.form input {
	border: 1px solid red;
	border-radius: 5px;
	background-color: #ccc;
	padding: 10px 20px;
	width: 70%;
}
.form button {
	cursor: pointer;
	background-color: red;
	padding: 10px;
	color: white;
	border: none;
	border-radius: 5px;
}
.form button:hover {
	background-color: blue;
}
.image {
	margin-left: 20px;
	width: 35%;
	margin-top:20px;
}
.image img{
	width: 100%;
}

.services-section {
    display: flex;
    flex-wrap: wrap;
	justify-content: center;
}

.service-card {
    background-color: #FCFCFC;
    border-radius: 5px;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    text-align: center;
    padding: 20px;
    width: 300px; /* Adjust width as needed */
    overflow: hidden;
	margin-left: 20px;
	margin-top: 10px;
}

.service-card img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    border-radius: 5px;
}

.service-card h1 {
    font-size: 18px;
    margin: 15px 0 10px;
    color: #333;
}

.service-card p {
    font-size: 14px;
    color: #666;
    margin-bottom: 15px;
}

.service-card .btn {
    display: inline-block;
    background-color: #007BFF;
    color: white;
    padding: 10px 20px;
    text-decoration: none;
    font-size: 14px;
    border-radius: 5px;
    transition: background-color 0.3s ease;
}

.service-card .btn:hover {
    background-color: red;
}


/* ABOUT US */
.about-container{
	margin: 0px auto 10px auto;
	padding-top: 80px;
	display: block;
	position: relative;
	padding-bottom: 20px;
	overflow: hidden;
	width: 100%;
 }

.about-container p{
	padding-top: 10px;
	width: 100%;
	text-align: center;
	font-size: 35px;
	font-weight: bold;
	font-family: 'Ropa Sans';
	color: #2d3834;
}


#about:target .col_one_third{
	animation: fadeInUp 0.5s ease-out;
}

.col_one_third{
	text-align: center;
	display: inline-block;
	width: 530px;
	margin: 30px auto 0px auto;
}

.about-container img{
	position: relative;
	height: 230px;
	width: 220px;
	margin-top:25px;
	margin-right: 50px;
}


.col_one_third p{
	font-family: 'Maitree', calibri, Georgia;
	font-size: 20px;
	font-weight: normal;
	text-align: justify;
}

.bottom-border{
	margin-top: 20px;
	height: 3px;
	background-color: var(--unique-color);
}


i.arrow{
	font-size: 60px;
	color: var(--unique-color);
	cursor: pointer;
	margin-left: 50px;
	margin-right: 50px;
	text-shadow: 2px 2px 3px rgba(0,0,0,0.1);
}

i.arrow:hover{
	color: var(--unique-color);
	text-shadow: 2px 2px 3px rgba(0,0,0,0.4);
}

i.radio-1, i.radio-2, i.radio-3{
	position: relative;
	color: #333333;
	cursor:default;
	margin-bottom: 80px;
}

.tooltip{
	position: absolute;
	text-align: center;
	z-index: 1;
	width: 120px;
	display: none;
	border-radius: 5px;
	padding: 8px;
	background-color: #333333;
	color: white;
	margin-left: 25px;
	opacity: 0.8;
	z-index: -1;
}

.text-back{
	top: 440px;
	left:10px;
}

.text-forward{
	top: 440px;
	right: 30px;
	
}

.tooltip::after {
    content: "";
    position: absolute;
    top: 30%;
    border-width: 8px;
    border-style: solid;
    border-color: #333 transparent transparent transparent;
}

.text-forward::after{
	transform: rotateZ(90deg);
	left: 0%;
    margin-left: -15px;
}

.text-back::after{
	transform: rotateZ(-90deg);
	right: -11%;
}

/* Reset list styles */
ul {
	list-style-type: none;
	padding: 0;
	margin: 0;
  }
  
  /* Navbar style */
  .horizontal-page-links ul {
	display: flex; /* Align items horizontally */
  }
  
  .horizontal-page-links li {
	position: relative; /* Required for positioning the dropdown */
  }
  .horizontal-page-links li:nth-child(3),
  .horizontal-page-links li:nth-child(5)	{
	display: none;
  }
  /* Link styles */
  .horizontal-page-links a {
	text-decoration: none;
	color: #000; /* Default color, adjust as needed */
	padding: 10px 20px;
	display: block;
  }
  
  /* Hide services dropdown by default */
  .services-dropdown {
	display: none; /* Hidden by default */
	position: absolute;
	top: 90%; /* Align it directly below the "Services" link */
	left: -31px;
	margin-top:0;
	background-color: #f9f9f9;
	min-width: 300px; /* Set a minimum width */
	border: 1px solid #ddd; /* Optional border */
	box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
	opacity: 0; /* Initially invisible */
	transition: opacity 0.3s ease; /* Fade-in effect */
	z-index: 101; /* Ensure dropdown appears on top */
  }
  
  /* Show the dropdown on hover */
  .services:hover .services-dropdown {
	display: block; /* Make the dropdown visible */
	opacity: 1; /* Smooth fade-in effect */
  }
  
  .services-dropdown li {
	padding: 10px;
	background-color: #fff;
	border-bottom: 1px solid #ccc;
  }
    .services-dropdown li {
	padding: 10px;
	background-color: #fff;
	border-bottom: 1px solid #ccc;
  }
  .services-dropdown li:nth-child(3)
  .services-dropdown li:nth-child(4) {
	display: block;
  }
  .services-dropdown li a {
	color: #000;
	padding: 5px 5px;
	display: block;
  }
  
  /* Highlight dropdown item on hover */
  .services-dropdown li a:hover {
	background-color: #ddd;
  }
  .services-dropdown li :hover {
	border-bottom: 2px solid blue;
  }

  /* Optional: Add a small arrow indicator next to the "Services" link */
  .services > a::after {
	content: " ▼"; /* Arrow character */
	font-size: 10px;
	padding-left: 5px;
  }
  
  /* Optional: Hover transition for smooth fading */
  .services-dropdown {
	opacity: 0;
	transition: opacity 0.3s ease-in-out;
  }
  .navbar-toggle {
	display: none; /* Hide the hamburger menu by default */
	cursor: pointer;
  }
  
  .menu-icon,
  .close-icon {
	font-size: 30px;
	color: #FCFCFC;
	background-color: blue;
	border-radius:5px;
	padding:0 5px;
	margin-right: 40%;
  }

 /* Hero Section Styling */
.hero-section {
    position: relative;
    height: 100vh; /* 80% of the viewport height */
    width: 100%; /* Full width of the screen */
    background: url('images/seobg.avif') no-repeat center center/cover; /* Background image */
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    overflow: hidden;
	z-index: 1;
}

/* Text Container for Slides */
.text-container {
    position: absolute;
	top: -80px;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    opacity: 0.9; /* Slight transparency for readability */
}

/* Text Slide */
.text-slide {
    display: none;
    color: white;
    max-width: 700px;
    padding: 10px;
    background-color: rgba(0, 0, 0, 0.6); /* Semi-transparent background for text */
    border-radius: 10px;
}

.text-slide h1 {
	color:red;
    font-size: 3em;
    margin-bottom: 10px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.text-slide p {
    font-size: 1.2em;
    margin-bottom: 20px;
}

.see-more {
    text-decoration: none;
    color: blue;
    font-size: 1.1em;
    font-weight: bold;
    transition: color 0.3s ease;
}

.see-more:hover {
    color: #fff;
}

/* Fade-in effect */
.text-container .text-slide.fade-in {
    display: block;
    animation: fadeIn 1s ease-in-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.navbar-toggle.active ~ .horizontal-page-links {
	display: flex;
  }
  
  .navbar-toggle.active .menu-icon {
	display: none;
  }
  
  .navbar-toggle.active .close-icon {
	display: inline-block;
  }

/* Container styling */
.logo-container {
    width: 80%;
    padding: 5px 5px;
    overflow: hidden;
    border-radius: 16px; /* Adjust border color as needed */
    background-color: #FCFCFC;
    box-sizing: border-box;
    position: relative;
	margin-left: 5%;
  }
  
  /* Slider wrapper */
  .logo-slider {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 20px; /* Adjust the spacing between logos */
    animation: slide 30s linear infinite; /* Adjust speed by changing the duration */
  }
  
  /* Logo styling */
  .logo2 {
    height: 60px; /* Adjust height as needed */
    flex-shrink: 0; /* Prevent logos from shrinking */
	border-radius: 50%;
  }
  
  /* Animation for sliding */
  @keyframes slide {
    0% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(-100%);
    }
  }
  

/*reviews*/
  .blogs-container {
  display: flex;
  width: 100%;
  padding-right: 2%;
  margin-top: 0;
}

.rating-container {
  width: 30%;
  text-align: center;
  padding: 20px;
  box-sizing: border-box;
  background-color: blue;
  color: black;
  margin-left: 0;
  margin-right: 5px;
}

.blog-slider-container {
  width: 70%;
  overflow: hidden;
  position: relative;
}

.blogimages {
  display: flex;
  justify-content: space-between;
  align-items: center; 
  z-index: 999;
}
.blogimages img{
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-size: 60px;
  justify-content: space-between;
}
.blogimages img:first-child {
  margin-right: 70%;
  float: left;
}
.swiper-slide {
  background-color: #333;
}

.card {
  position: relative;
  background-color: #333;
  padding: 10px 20px;
  box-shadow: 0 0 10px #ccc;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  border: 1px solid #fcfcfc;
  border-radius: 5px 5px 5px 5px;
}

.overlay {
    border-radius: 5px 5px 0 5px;
    position: absolute;
    height: 25%;
    width: 100%;
    left: 0;
    top:0;
    background-color: #333;
}
.overlay::before,
.overlay::after{
    content:'';
    position:absolute;
    height: 40px;
    width: 40px;
    right: 0;
    bottom: -40px;
    background-color: #333;
}
.overlay::after{
    border-radius: 0 25px 0 0;
    background-color: #333;
    background-color: #333;
}
.card .image {
  width: 100%;
  height: auto;
  padding: 3px;
  margin-bottom:5px;
  z-index: 1000;
}
.card h3{
  color: red;
  font-size: 20px;
  top: 25%;
  z-index: 999;
}

.card p {
  color:white;
  text-align: center;
}

.swiper-container {
  position: relative;
  margin: 0 auto;
  width: 100%;
}
.swiper {
  margin: 0 auto;
  cursor: grab;
}
.swiper-slide {
  display: flex;
  justify-content: center;
  align-items: center;
}
.swiper-button-next,
.swiper-button-prev {
  width: 15px;
  height: 10px;
}
.swiper-button-next::after,
.swiper-button-prev::after {
  font-size: 30px;
  font-weight: bold;
  color: blue;
}
.swiper-button-next {
  margin-right: 20px;
}
.swiper-button-prev {
  margin-left: 10px;
}
.swiper-button-next:hover {
  transform: scale(1.2) translateX(80%);
}
.swiper-button-prev:hover {
  transform: scale(1.2) translateX(-80%);
}
.swiper-button-next {
  transform: translateX(100%);
}
.swiper-button-prev {
  transform: translateX(-100%);
}
.swiper-pagination {
  transform: translateY(200%);
}
.swiper-pagination-bullet {
  background: #fff;
  width: 10px;
  height: 10px;
  margin-top: 5px;
}

/* FAQ Section */
.faq-section {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    padding: 20px;
}

/* Info Section */
.info-section {
    margin-bottom: 20px;
	width: 30%;
}

.info-section h1 {
    font-size: 40px;
    margin-bottom: 10px;
}

.info-section p {
    font-size: 25px;
}

/* FAQ Container */
.faq-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 10px; /* Space between FAQ items */
}

/* Individual FAQ Items */
.faq-item {
    background-color: #fcfcfc;
    border-left: 5px solid yellow;
    padding: 10px;
    flex: 1 1 calc(50% - 10px); /* Flexible width */
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    width: 300px;
}

.faq-header {
    display: flex;
    align-items: center;
}

.faq-header h1 {
    margin: 0;
    font-size: 20px;
    cursor: pointer;
    flex: 1;
    color:blue;

}

/* Initially hide the content */
.faq-content {
    display: none;
    font-size: 18px;
    margin-top: 6px;
}

/* Styling for revealed content */
.faq-content.active {
    display: block;
}

/* Main Section Styling */
.main-section2 {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
}

.left-div {
    width: 60%;
    padding: 10px;
}
.left-div iframe{
	width:100%;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
	height:450px;
}

.main-image {
    width: 100%;
    border-radius: 5px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.image-description {
    margin-top: 10px;
    font-size: 1.1em;
    color: #555;
    text-align: center;
}

/* Right Div Styling */
.right-div {
    width: 35%;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Video Item Styling */
.video-item {
    display: flex;
    align-items: flex-start;
    background-color: #fff;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.video {
    width: 0;
    border-radius: 5px;
    margin-right: 15px;
}

/* Video Description Styling */
.video-description {
    width: 100%;
}

.video-description h1 {
    font-size: 1.0em;
    color: #333;
    margin: 0 0 5px;
    text-transform: uppercase;
}

.video-description p {
    font-size: 0.8em;
    color: #666;
}

/* Style the hidden content */
.hidden-content {
    display: none;
    font-size: 15px;
    color: #333;
    margin-top: 10px;
}

/* Read More link style */
.read-more {
    color: #007bff;
    text-decoration: none;
    font-weight: bold;
    cursor: pointer;
}

.read-more:hover {
    text-decoration: underline;
}

/* Style for the scroll-to-top button */
.scroll-to-top {
    position: fixed;
    bottom: 40px;
    left: 20px;
    background-color: red; /* Blue color for the button */
    color: white;
    padding: 10px;
    border-radius: 50%; /* Makes it round */
    font-size: 24px;
    text-align: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    cursor: pointer;
    transition: background-color 0.3s ease;
    text-decoration: none; /* Removes underline */
}

.scroll-to-top:hover {
    background-color: #0056b3; /* Darker blue on hover */
}

.scroll-to-top i {
    margin: 0; /* Remove margin around the icon */
}

/* Optional: Animation for smooth scroll to top */
html {
    scroll-behavior: smooth;
}

/* Newsletter Subscription Section */
.newsletter-text {
    font-size: 1.2em;
    margin-bottom: 20px;
}

.newsletter-input {
    display: flex;
    justify-content: center;
    align-items: center;
}

.newsletter-email {
    padding: 10px;
    width: 200px;
    margin-right: 10px;
    border: none;
    border-radius: 4px;
    font-size: 1em;
}

.subscribe-btn {
    padding: 10px 20px;
    background-color: red;
    color: #fff;
    border: none;
    border-radius: 4px;
    font-size: 1.1em;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.subscribe-btn:hover {
    background-color: blue;
}

/*privacy policy*/
.privacy-policy {
	margin-left: 5%;
	margin-right: 5%;
	padding: 20px;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
	border-radius: 10px;
	background-color: #FCFCFC;
	border:1px solid blue;
	margin-bottom:10px;
  }
  
  .privacy-policy h1 {
	color: blue;
	font-size: 1.5em;
	margin-bottom: 10px;
	font-weight:bold;
  }
  
  .privacy-policy p {
	font-size: 1em;
	margin-bottom: 20px;
  }
  
  .privacy-policy h1,
  .privacy-policy p {
	text-align: left;
  }

/*footer*/
.footertop {
	display: flex;
	flex-wrap:wrap;
	margin-bottom: 5px;
	justify-content: space-between;
    background-color: #FCFCFC;
}
.footerlogo img {
	float: left;
	margin-left: 1%;
	background-size: 50px;
	width: 50px;
	height: 50px;
}

.quicklink p a{
	margin-right:20px;
}
.quicklinks h3{
	border-bottom: 1px solid black;
}
.contactus {
	display: flex;
	float: left;
}
.contactus p {
	color: green;
	margin-right: 10px;
}
.contactus a{
	color: blue;
}
.contactus a:hover {
	color: orange;
}

footer {
	border-top: 2px solid gold;
	flex-direction:column;
}
.footerbottom {
	display: flex;
	flex-direction:row;
	justify-content: space-between;
	display:inline-block;
	background-color:red;
	width:100%;
	padding: 10px 10px;
}
.copyright {
	float: left;
	color: white;
}
.link {
	margin-left: 45%;
	color: white;
}
.link i{
	color: red;
}
.link a:hover {
  color: orange;
}
.policy {
	float: right;
	text-decoration: underline;
}
.policy a{
	text-decoration: underline;
	color: yellow;
}
.policy a:hover{
	color: orange;
}


.link{
  color: white;
}
.link i{
  color: skyblue;
}
@keyframes pulse {
  0% { color: white; }
  50% { color: yellow; }
  100% { color: white; }
}

.fa-solid-fa-heart {
  animation: pulse 2s infinite;
}

/*services*/
 /* Section 1: Background Image with SEO Audit Title */
 .section-one {
	position: relative;
	height: 60vh;
background: url('images/seoaudit.webp') no-repeat center center/cover; /* Background image */
	background-size: cover;
	background-position: center;
	color: white;
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	margin-top:0;
}

.section-one h1 {
	font-size: 3rem;
	font-weight: bold;
	position: relative;
	z-index: 1;
}



/* Section 2: Introductory Text with Border */
.section-two {
	margin-top: 0px;
	padding-top: 10px;
	text-align: center;
	background-color: #f5f5f5;
	padding-left:10px;

}

.section-two h2 {
	font-size: 2rem;
	margin-bottom: 10px;
	border-top: 2px solid blue;
    color:blue;
}

.section-two p {
	font-size: 1.2rem;
	color: #333;
	max-width: 900px;
	margin: 0 auto;
}

/* Section 3: Flex Layout for Image and Text */
.section-three {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
padding-left:10px;
}

.section-three .image {
	flex: 1;
	min-width: 300px;
	margin-right: 20px;
}

.section-three .image img {
	width: 100%;
	border-radius: 8px;
}

.section-three .content {
	flex: 2;
	min-width: 350px;
}

.section-three .content h3 {
	font-size: 2rem;
	margin-bottom: 15px;
	color: red;
}

.section-three .content p {
	font-size: 1.2rem;
	color: #555;
	margin-bottom: 20px;
}

.section-three .content a {
	display: inline-block;
	padding: 10px 20px;
	background-color: blue;
	color: white;
	text-decoration: none;
	border-radius: 5px;
	font-size: 1.1rem;
	transition: background-color 0.3s;
	max-width:300px;
	margin-bottom: 10px;
}

.section-three .content a:hover {
	background-color: red;
}

/*portfolio*/
.tab-container {
	display: flex;
	justify-content: space-between;
	padding-bottom: 10px;
	background-color: red;
	padding-left: 20%;
	padding-right: 20%;
  } 
  .tab {
	padding: 10px 20px;
	cursor: pointer;
	color: white;
	background-color: blue;
	border: 1px solid #ddd;
	border-radius: 5px 5px 0 0;
  }
  .tab:hover {
	background-color: orange;
  }
  .tab-active {
	background-color: orange; /* Ensure that the active tab's color overrides */
  }
  /* Styles for logo container */
  .logo-container {
	display: flex;
	flex-wrap: wrap;
	background-color: lavenderblush;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	padding-left: 5%;
	padding-right: 5%;
	border: 1px solid #ccc;
  }
  .logo-container h1,
  .logo-container p{
	color: blue;
  }
  .logo-container p{
	margin-top: -5px;
  }

  /*heading*/
  .heading {
    background-color: red;
    align-items: center;
    margin-top: -20px;
}
.heading h1{
    color: white;
    text-align: center;
	padding-top: 10px;
	margin-bottom: 1px;
}
.heading p {
    text-align: center;
    font-style: italic;
	font-size: 20px;
	padding-bottom: 2px;
}

  .container1 {
    position: relative;
    width: 100%;
    height: 60vh; /* Reduced height of the background */
    background-image: url('images/portfolio1.jpeg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    margin-top: -20px;
  }
  
  .content2 {
    position: absolute;
    top: 50%;
    left: 20%; /* Increased left position for centering */
    transform: translateY(-50%);
    background-color: rgba(0, 0, 255, 0.7); /* Blue transparent background */
    padding: 20px;
    max-width: 500px; /* Increased width of content */
  }
  
  .content2 h2 {
    color: yellow; /* Red color for heading */
    margin: 0;
    border-bottom: 1.5px solid white;
	font-size: 35px;
  }
  
  .content2 p {
    color: white; /* White color for paragraph text */
    margin: 0;
	font-size:20px;
  }

  /*awards*/
.awards {
	display: flex;

  }
  
  .explanationdiv{
	width: 50%;
	background-color: gold;
  }
  .explanationdiv h1{
	color: red;
	font-weight: bold;
	text-align: center;
	margin-top: 2px;
  }
  .logodiv{
	width: 50%;
	background-color: white;
  }
  .logodiv img{
	margin-left: 20px;
	margin-right: 20px;
	margin-top: 20px;
	margin-bottom: 10px;
	width: 150px;
	height: 150px;
	border: 1px solid burlywood;
	transition: transform 0.3s ease;
  }
  .logodiv img:hover {
	transform: translateY(5px);
  }

  .section {
	display: flex;
	flex-wrap: wrap;
	margin-bottom: 20px;
  }
  
  .info-box {
	padding: 20px;
	padding-bottom: 20px;
	background-size: cover;
	background-position: center;
	position: relative;
	width: 350px;
	margin-right: 2%;
	margin-top: 20px;
	margin-left: 20px;

  }
  .info-box:first-child{
	margin-left: 2%;
  }
  
  .intro1 {
	background-color: rgba(0, 0, 255, 0.7); 
	padding: 10px;
	border-radius: 5px;
  }
  .intro1 h2{
	font-weight: bold;
	font-size: 24px;
	color:yellow;
	text-align: center;
  }


/* Responsive for smaller screens */
@media (max-width: 1000px) {
	/* Hide the menu by default and show toggle */
	.horizontal-page-links {
	  display: none;
	  width: 100%;
	  background-color: #FCFCFC;
	  position: absolute;
	  top: 30px;
	  left: 0;
	  padding: 20px;
	  flex-direction: column;
	}

	.navbar-logo {
		margin-left: -100px;
		height: 65px;
		margin-top: -20px; /* Removed the margin-top */
	  }
	  
	  .navbar-logo img {
		margin-top: 0px; /* You can adjust or remove this */
	  }
	
  
	.horizontal-page-links ul {
	  display: block;
	  width: 100%;
	  top:20px;
	}
  
	.horizontal-page-links li {
	  width: 100%;
	  padding: 5px 0;
	  text-align: center;
	  border-bottom: 1px solid #ccc;
	  border-left: none;
	}
	.horizontal-page-links li:nth-child(3),
	.horizontal-page-links li:nth-child(5)	{
	  display: block;
	}
	.horizontal-page-links li:last-child{
		display: none;
	}

  
	.navbar-toggle {
	  display: block; /* Show the hamburger icon on mobile */
	}
  
	.navbar-toggle .close-icon {
	  display: none; /* Hide close icon initially */
	}
  
	.navbar-toggle.active .menu-icon {
	  display: none;
	}
  
	.navbar-toggle.active .close-icon {
	  display: inline-block;
	}
  
	.navbar-toggle.active ~ .horizontal-page-links {
	  display: flex; /* Show menu when toggled */
	}
	.register-user{
		padding-right: 10px;
		z-index: 1000;
	}
	.register-user a#register {
		margin-top:-30px;
		z-index: 1000;
		margin-right:0;
	}
	.blogs-container {
		display: flex;
		flex-direction: column	;
	  }
	  
	  .rating-container {
		width: 100%;
	  }
	  
	  .blog-slider-container {
		width: 100%;
	  }
}

@media screen and (max-width:500px) {
	.dashboard{
		flex-direction: column;
		height: 120vh;
	}
	.form button {
		width: 80%;
		margin-top: 10px;
	}
	.form, .image {
		width: 100%;
	}
	.image img {
		width: 100%;
	}
	.main-section2 {
		flex-direction: column;
	}
	.right-div,
	.left-div {
		width: 100%;
	}
	.faq-section {
		flex-direction: column;
	}
	.faq-container {
		width: 100%;
		flex-direction: column;
		padding-right: 20px;
		margin-right: 0;
		margin-top: 5px;
		padding-top: 0%;
	}
	.faq-item {
		width: 100%;
	}
	.info-section {
		width:100%;
	}
}

/* 
.chatbot-toggler {
    position: fixed;
    bottom: 30px;
    right: 35px;
    outline: none;
    border: none;
    height: 50px;
    width: 50px;
    display: flex;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: blue;
    transition: all 0.2s ease;
}

body.show-chatbot .chatbot-toggler {
    transform: rotate(90deg);
}

.chatbot-toggler span {
    color: #fff;
    position: absolute;
}

.chatbot-toggler span:last-child,
body.show-chatbot .chatbot-toggler span:first-child {
    opacity: 0;
}

.chatbot {
    position: fixed;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background-color: #fff;
    border-radius: 10px 10px 0 0;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
    display: none;
    flex-direction: column;
}

body.show-chatbot .chatbot {
    display: flex;
}

.chatbot header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #003366;
    padding: 10px 20px;
    color: #fff;
    font-size: 1.5rem;
}

.chatbot header .logo {
    width: 40px; 
    height: auto;
    margin-right: 10px;
}

.chatbot header h2 {
    font-size: 1.5rem;
    margin: 0;
    flex-grow: 1;
}

.chatbot header .close-btn {
    cursor: pointer;
    font-size: 2rem;
}

.chatbox {
    overflow-y: auto;
    flex-grow: 1;
    padding: 10px 20px;
    list-style: none;
    margin: 0;
    max-height: calc(100vh - 120px); 
}

.chatbox .chat {
    margin-bottom: 20px;
}

.chatbox .chat p {
    margin: 5px 0;
}

.chatbox .chat .material-symbols-outlined {
    font-size: 2rem;
    margin-right: 10px;
}

.chat-input {
    display: flex;
    padding: 10px;
    border-top: 1px solid #ddd;
    background-color: #f9f9f9;
}

.chat-input textarea {
    flex-grow: 1;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
    resize: none;
    height: auto; 
}

.chat-input #send-btn {
    cursor: pointer;
    font-size: 2rem;
    color: #003366;
    margin-left: 10px;
}

.chat-input #send-btn:hover {
    color: #007BFF;
}

@media (max-width: 768px) {
    .chatbot header {
        font-size: 1.2rem;
    }
    .chatbot header .logo {
        width: 30px;
    }
}

.chatbot-toggler {
	position: fixed;
	bottom: 30px;
	right: 35px;
	outline: none;
	border: none;
	height: 50px;
	width: 50px;
	display: flex;
	cursor: pointer;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: blue;
	transition: all 0.2s ease;
  }
  body.show-chatbot .chatbot-toggler {
	transform: rotate(90deg);
  }
  .chatbot-toggler span {
	color: #fff;
	position: absolute;
  }
  .chatbot-toggler span:last-child,
  body.show-chatbot .chatbot-toggler span:first-child  {
	opacity: 0;
  }
  body.show-chatbot .chatbot-toggler span:last-child {
	opacity: 1;
  }
  .chatbot {
	position: fixed;
	right: 35px;
	bottom: 95px;
	width: 350px;
	height:450px;
	background: #fff;
	border-radius: 15px;
	overflow: hidden;
	opacity: 0;
	pointer-events: none;
	transform: scale(0.5);
	transform-origin: bottom right;
	box-shadow: 0 0 128px 0 rgba(0,0,0,0.1),
				0 32px 64px -48px rgba(0,0,0,0.5);
	transition: all 0.1s ease;
	z-index: 101;
  }
  body.show-chatbot .chatbot {
	opacity: 1;
	pointer-events: auto;
	transform: scale(1);
  }
  .chatbot header {
	padding: 16px 0;
	position: relative;
	text-align: center;
	color: #fff;
	background: blue;
	box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  }
  .chatbot header span {
	position: absolute;
	right: 15px;
	top: 50%;
	display: none;
	cursor: pointer;
	transform: translateY(-50%);
  }
  header h2 {
	font-size: 1.4rem;
  }
  .chatbot .chatbox {
	overflow-y: auto;
	height: 450px;
	padding: 30px 20px 100px;
  }
  .chatbot :where(.chatbox, textarea)::-webkit-scrollbar {
	width: 6px;
  }
  .chatbot :where(.chatbox, textarea)::-webkit-scrollbar-track {
	background: #fff;
	border-radius: 25px;
  }
  .chatbot :where(.chatbox, textarea)::-webkit-scrollbar-thumb {
	background: #ccc;
	border-radius: 25px;
  }
  .chatbox .chat {
	display: flex;
	list-style: none;
  }
  .chatbox .outgoing {
	margin: 20px 0;
	justify-content: flex-end;
  }
  .chatbox .incoming span {
	width: 32px;
	height: 32px;
	color: #fff;
	cursor: default;
	text-align: center;
	line-height: 32px;
	align-self: flex-end;
	background: #4ae8a6;
	border-radius: 4px;
	margin: 0 10px 7px 0;
  }
  .chatbox .chat p {
	white-space: pre-wrap;
	padding: 12px 16px;
	border-radius: 10px 10px 0 10px;
	max-width: 75%;
	color: #fff;
	font-size: 0.95rem;
	background: #724ae8;
  }
  .chatbox .incoming p {
	border-radius: 10px 10px 10px 0;
  }
  .chatbox .chat p.error {
	color: #721c24;
	background: #f8d7da;
  }
  .chatbox .incoming p {
	color: #000;
	background: #f2f2f2;
  }
  .chatbot .chat-input {
	display: flex;
	gap: 5px;
	position: absolute;
	bottom: 0;
	width: 100%;
	background: #fff;
	padding: 3px 20px;
	border-top: 1px solid #ddd;
  }
  .chat-input textarea {
	height: 55px;
	width: 100%;
	border: none;
	outline: none;
	resize: none;
	max-height: 180px;
	padding: 15px 15px 15px 0;
	font-size: 0.95rem;
  }
  .chat-input span {
	align-self: flex-end;
	color: blue;
	cursor: pointer;
	height: 55px;
	display: flex;
	align-items: center;
	visibility: hidden;
	font-size: 1.35rem;
  }
  .chat-input textarea:valid ~ span {
	visibility: visible;
  }*