/*

TemplateMo 559 Zay Shop

https://templatemo.com/tm-559-zay-shop

---------------------------------------------
Table of contents
------------------------------------------------
1. Typography
2. General
3. Nav
4. Hero Carousel
5. Accordion
6. Shop
7. Product
8. Carousel Hero
9. Carousel Brand
10. Services
11. Contact map
12. Footer
13. Small devices (landscape phones, 576px and up)
14. Medium devices (tablets, 768px and up)
15. Large devices (desktops, 992px and up)
16. Extra large devices (large desktops, 1200px and up)
--------------------------------------------- */




/* Typography */
body, ul, li, p, a, label, input, div {
  font-family: 'Roboto', sans-serif;
  font-size: 18px !important;
  font-weight: 300 !important;
}
.h1 {
  font-family: 'Roboto', sans-serif;
  font-size: 48px !important;
  font-weight: 200 !important;
}
.h2 {
  font-family: 'Roboto', sans-serif;
  font-size: 30px !important;
  font-weight: 300;
}
.h3 {
  font-family: 'Roboto', sans-serif;
  font-size: 22px !important;
}
/* General */
.logo { font-weight: 500 !important;}
.text-warning {  color: #ede861 !important;}
.text-muted { color: #bcbcbc !important;}
.text-success { color: hsl(132, 14%, 93%) !important;}
.text-light { color: #cfd6e1 !important;}
.text-primary {color: #800000 !important;}
.bg-dark { background-color: #212934 !important;}
.bg-light { background-color: #e9eef5 !important;}
.bg-black { background-color: #1d242d !important;}
.bg-success { background-color: #800000 !important;}
.btn-success {
  background-color:#800000 !important;
  border-color: #800000 !important;
}
.pagination .page-link:hover {color: #000;}
.pagination .page-link:hover, .pagination .page-link.active {
  background-color: #800000;
  color: #fff;
}
/* Nav */
#templatemo_nav_top { min-height: 60px;}
#templatemo_nav_top * { font-size: .9em !important;}
#templatemo_main_nav a { color: #212934;}
#templatemo_main_nav a:hover { color: #800000;}
#templatemo_main_nav .navbar .nav-icon { margin-right: 20px;}

.licomponents{
  border-bottom-left-radius: 25%;
  border-bottom-right-radius: 25%;
  overflow: hidden; /* Ensures child elements do not overflow */
}
/* Hero Carousel */
#template-mo-zay-hero-carousel { background: hsla(0, 0%, 0%, 0.849) !important;  height: 100%;}

.counter-card{
  /* background: hsla(0, 0%, 0%, 0.849) !important;  */
  margin-top: -20px !important;
}
/* Accordion */
.templatemo-accordion a { color: #000;}
.templatemo-accordion a:hover { color: #333d4a;}
/* Shop */
.shop-top-menu a:hover { color: #800000 !important;}
/* Product */
.product-wap { box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.10);}
.product-wap .product-color-dot.color-dot-red { background:#f71515;}
.product-wap .product-color-dot.color-dot-blue { background:#6db4fe;}
.product-wap .product-color-dot.color-dot-black { background:#000000;}
.product-wap .product-color-dot.color-dot-light { background:#e0e0e0;}
.product-wap .product-color-dot.color-dot-green { background:#800000;}
.card.product-wap .card .product-overlay {
  background: rgba(0,0,0,.2);
  visibility: hidden;
  opacity: 0;
  transition: .3s;
}
.card.product-wap:hover .card .product-overlay {
  visibility: visible;
  opacity: 1;
}
.card.product-wap a { color: #000;}
#carousel-related-product .slick-slide:focus { outline: none !important;}
#carousel-related-product .slick-dots li button:before {
  font-size: 15px;
  margin-top: 20px;
}
/* Brand */
.brand-img {
  filter: grayscale(100%);
  opacity: 0.5;
  transition: .5s;
}
.brand-img:hover {
  filter: grayscale(0%);
  opacity: 1;
}
/* Carousel Hero */
#template-mo-zay-hero-carousel .carousel-indicators li {
  margin-top: -50px;
  background-color: #800000;
}
#template-mo-zay-hero-carousel .carousel-control-next i,
#template-mo-zay-hero-carousel .carousel-control-prev i {
  color: #800000 !important;
  font-size: 2.8em !important;
}
/* Carousel Brand */
.tempaltemo-carousel .h1 {
  font-size: .5em !important;
  color: #000 !important;
}
/* Services */
.services-icon-wap {transition: .3s;}
.services-icon-wap:hover, .services-icon-wap:hover i {color: #fff;}
.services-icon-wap:hover {background: #800000;}
/* Contact map */
.leaflet-control a, .leaflet-control { font-size: 10px !important;}
.form-control { border: 1px solid #e8e8e8;}
/* Footer */
#tempaltemo_footer a { color: #dcdde1;}
#tempaltemo_footer a:hover { color: #800000;}
#tempaltemo_footer ul.footer-link-list li { padding-top: 10px;}
#tempaltemo_footer ul.footer-icons li {
  width: 2.6em;
  height: 2.6em;
  line-height: 2.6em;
}
#tempaltemo_footer ul.footer-icons li:hover {
  background-color: #cfd6e1;
  transition: .5s;
}
#tempaltemo_footer ul.footer-icons li:hover i {
  color: #212934;
  transition: .5s;
}
#tempaltemo_footer .border-light { border-color: #2d343f !important;}
/*
// Extra small devices (portrait phones, less than 576px)
// No media query since this is the default in Bootstrap
*/
/* Small devices (landscape phones, 576px and up)*/
.product-wap .h3, .product-wap li, .product-wap i, .product-wap p {
  font-size: 12px !important;
}
.product-wap .product-color-dot {
  width: 6px;
  height: 6px;
}

@media (min-width: 576px) {
  .tempaltemo-carousel .h1 { font-size: 1em !important;}
}

/*// Medium devices (tablets, 768px and up)*/
@media (min-width: 768px) {
  #templatemo_main_nav .navbar-nav {max-width: 450px;}
 }

/* Large devices (desktops, 992px and up)*/
@media (min-width: 992px) {
  #templatemo_main_nav .navbar-nav {max-width: 550px;}
  #template-mo-zay-hero-carousel .carousel-item {min-height: 30rem !important;}
  .product-wap .h3, .product-wap li, .product-wap i, .product-wap p {font-size: 18px !important;}
  .product-wap .product-color-dot {
    width: 12px;
    height: 12px;
  }
}



/* banner crosule  */


.counter-box {
  /* padding: 20px;  */
  background-color:hsla(0, 0%, 0%, 0.849);
  /* background: hsla(0, 0%, 0%, 0.849) */
  color: white;
  text-align: center;
  /* margin-top: -5px; */
  /* display: block; */
  
}
.counter-number {
  font-size: 4rem !important;
  font-weight: 100rem !important;
}
.rounded{
  border-radius: 20px !important;
}

.fab{
  background-color: white;
  padding: 10px;
  border-radius: 100%;
  color: hsla(0, 0%, 0%, 0.849);
}


.mission-section {
  position: relative;
  width: 100%;
  margin-top: 40px;
  border-radius: 20px;
  overflow: hidden;
  margin-bottom: 15px;
}

.mission-section img {
  width: 100%;
  display: block;
  border-radius: 15px;
}

.mission-content {
  position: absolute;
  bottom: -50px;
  right: 5%;

  background: rgba(0, 0, 0, 0.85);
  color: white;
  padding: 40px;
  border-radius: 15px !important;
  max-width: 800px;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3);
}


/* .mission-content {
  position: absolute;
  bottom: 20px;
  top: 500px;
  right: 5%;
  background: rgba(0, 0, 0, 0.85);
  color: white;
  padding: 50px;
  border-radius: 15px;
  max-width: 60%;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3);
} */



.mission-content h2 {
  font-weight: 600;
  font-size: 1.8rem;
}

.mission-content p {
  font-size: 1rem;
  line-height: 1.5;
  opacity: 0.9;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
  .mission-content {
    position: relative;
    width: 100%;
    max-width: none;
    margin-top: -10px;
    padding: 20px;
  }
}


/*
*
* ==========================================
* CUSTOM UTIL CLASSES
* ==========================================
*
*/ 


a{
	color: #074E8C;
}

.scrollable-div {
  max-height: 300px; /* Adjust height as needed */
  overflow-y: auto;
  /* top: 40%; */
}

/* Custom scrollbar styling */
.scrollable-div::-webkit-scrollbar {
  width: 8px;
}

.scrollable-div::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 10px;
}

.scrollable-div::-webkit-scrollbar-thumb {
  background:  #800000;
  border-radius: 10px;
}

.scrollable-div::-webkit-scrollbar-thumb:hover {
  background:  #800000;
}
.force-overflow
{
	min-height: 450px;
}

#wrapper
{
	text-align: center;
	width: 500px;
	margin: auto;
}


/*
 *  STYLE 14
 */

 #style-14::-webkit-scrollbar-track
 {
   -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.6);
   background-color: #800000;;
 }
 
 #style-14::-webkit-scrollbar
 {
   width: 10px;
   background-color: #800000;;
 }
 
 #style-14::-webkit-scrollbar-thumb
 {
   background-color:#800000;
   background-image: -webkit-linear-gradient(90deg,
                                             rgba(0, 0, 0, 1) 0%,
                         rgba(182, 27, 27, 0.87) 25%,
                         transparent 100%,
                         rgba(0, 0, 0, 1) 75%,
                         transparent)
 }

 .SolveMindcard-body {
  position: relative;
  z-index: 2; /* Keeps text above the animation */
  background-color: white; /* Optional to make text more readable */
  padding: 40px;
  


}

.SolveMindcardtext{
margin-left: -61px ;


}

.overlay {
  position: absolute;
  top: 40%;
  left: 30%;
  width: 100%;
  height: 100%;
  transform: translate(-50%, -50%);
  z-index: 1;
  opacity: 0.3; /* Adjust transparency as needed */
  font-size: 5rem;
}


.rectangular_overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  transform: translate(-50%, -50%);
  opacity: 0.1; 
  /* z-index: 0; */
  font-size: 5rem;
}


.Team-body {
  position: relative;
 
  
  padding: 40px;
  


}

.whoweare-body {
  position: relative;
 
  

  


}

/* .rotating-circle {
  width: 100%;
  animation: rotateCircle 8s linear infinite;
} */

/* @keyframes rotateCircle {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
} */


/* .rotating-circle {
  width: 100%;
  animation: rotateCircle 8s linear infinite;
} */


/* Extra large devices (large desktops, 1200px and up)*/
@media (min-width: 1200px) {}



/* counter animation responsiveness */


.counter-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 20px;
}

.counter-number {
  font-size: 2rem;  /* Adjust for better readability */
  font-weight: bold;
}

@media (max-width: 768px) {
  .counter-box {
      padding: 15px;
  }
  
  .counter-number {
      font-size: 1.8rem;
  }
}


.scrollable-card {
  max-height: 200px; /* Adjust height as needed */
  overflow-y: auto;
  border: 1px solid #ccc; /* Optional: for better visibility */
  padding: 10px;
}

/* Custom Scrollbar */
.scrollable-card::-webkit-scrollbar {
  width: 8px;
}

.scrollable-card::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 10px;
}

.scrollable-card::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 10px;
}

.scrollable-card::-webkit-scrollbar-thumb:hover {
  background: #555;
}




.rounded {
  border-radius: 15px;
}

.bg-dark {
  background-color: #333;
}


.technologies{

  position: absolute;
  right: 25%;
  top: 40%;
  /* display: block; */
}


.technology-title {
  cursor: pointer;
  position: relative;
  color: white !important;
}

.technology-title::after {
  content: '';
  display: block;
  width: 0;
  height: 2px;
  background-color: white;
  position: absolute;
  left: 0;
  bottom: -5px;
  transition: width 0.3s ease;
}

.technology-title.active::after {
  width: 100%;
}

.icons-group {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-top: 10px;
}

.d-none {
  display: none;
}



.scrollable {
  flex: 2;
  overflow-y: auto;
  padding: 20px;
  background-color: white;
  scrollbar-width: none; /* Hide scrollbar for Firefox */
  -ms-overflow-style: none; /* Hide scrollbar for IE/Edge */
  max-height: 300px; /* Set a height or max-height to enable scrolling */
}

.scrollable::-webkit-scrollbar {
  display: none; /* Hide scrollbar for Chrome, Safari, Edge */
}
.non-scrollable {
  flex: 1;
  padding: 20px;
  /* background-color: #f5f5f5; */
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.scrollable h2,
.non-scrollable h2 {
  font-size: 1.5rem;
  margin-bottom: 16px;
  color: #333;
}
.scrollable p,
.non-scrollable p {
  font-size: 1rem;
  color: #555;
  line-height: 1.6;
}
.scrollable h2:not(:first-child) {
  margin-top: 24px;
}


.testimonial-card {
  background: grey;
  padding: 20px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  max-width: 600px;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
}
.testimonial-card img {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  margin-right: 15px;
}
.testimonial-text {
  flex: 1;
  color:white;
  font-size: 14px;
}
.testimonial-text strong {
  color: white;
  font-size: 16px;
}


/* portfolio section */


.portfolio {
  text-align: center;
  padding: 20px;
  background-color: #f9f9f9;
}

.portfolio h1 {
  font-size: 2rem;
  color: #b22222;
  margin-bottom: 10px;
}

.portfolio p {
  font-size: 1rem;
  color: #555;
}

.categories-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 20px 0;
}

.categories {
  display: flex;
  gap: 10px;
  position: relative;
}

.category-btn {
  padding: 10px 20px;
  font-size: 1rem;
  cursor: pointer;
  background: none;
  border: none;
  color: #b22222;
  position: relative;
  transition: color 0.3s ease;
}

.category-btn.active {
  color: #b22222;
}

.category-btn.active::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -5px;
  transform: translateX(-50%);
  width: 40px;
  height: 4px;
  background: #b22222;
  border-radius: 50px;
}

.arrow-btn {
  background: none;
  border: none;
  font-size: 1.5rem;
  color: #b22222;
  cursor: pointer;
  padding: 0 10px;
}

.arrow-btn:hover {
  color: #b00000;
}
.projects-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* Two columns */
  gap: 20px; /* Space between cards */
  padding: 20px;
}

.project-card {
  border: 1px solid #ddd;
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  perspective: 1000px;
  height: 300px; /* Set fixed height */
}

.project-card img {
  width: 100%;
  height: 200px; /* Set fixed height for images */
  object-fit: cover;
}

.project-card h3 {
  padding: 10px;
  font-size: 1rem;
  text-align: center;
  color: #880000; /* Updated color */
  font-weight: bold; /* Make the title bold */
  flex-shrink: 0;
}

.project-card:hover img {
  transform: scale(1.6); /* Scales the image by 10% */
  transform: translateZ(60px); /* Pops out the image */
  transition: transform 0.3s ease-in-out;
  transform: translateY(-5px); /* Slight lift of the card */
  box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.2); /* Adds shadow */  

}

/* .project-card:hover {  
} */

/* Modal Styles */
/* Modal Styles */
.modal {
  display: none; /* Hidden by default */
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.8);
}

.modal-content {
  background-color: #fff;
  margin: 5% auto;
  padding: 20px;
  border-radius: 8px;
  width: 80%;
  max-width: 700px;
  position: relative;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.close-btn {
  position: absolute;
  top: 10px;
  right: 20px;
  color: #880000;
  font-size: 1.5rem;
  font-weight: bold;
  cursor: pointer;
}

.close-btn:hover {
  color: #b00000;
}

.modal-header h2 {
  margin: 0;
  font-size: 1.5rem;
  color: #880000;
}

.modal-body img {
  width: 100%;
  height: auto;
  margin: 20px 0;
  border-radius: 8px;
}

.modal-body p {
  font-size: 1rem;
  color: #333;
  margin-bottom: 10px;
}

/* Modal Styles */
.modal-body {
  max-height: 400px;
  overflow-y: auto;
}

.carousel {
  position: relative;
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.carousel-images {
  display: flex;
  overflow: hidden;
  width: 100%;
}

.carousel-images img {
  width: 100%;
  flex-shrink: 0;
  transition: transform 0.5s ease;
}

.prev-btn,
.next-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  border: none;
  border-radius: 50%;
  padding: 10px;
  cursor: pointer;
  z-index: 10;
}

.prev-btn {
  left: 10px;
}

.next-btn {
  right: 10px;
}


.image-gallery {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}

.image-gallery img {
  width: 100px;
  height: auto;
  border-radius: 5px;
  cursor: pointer;
  transition: transform 0.2s ease;
}

.image-gallery img:hover {
  transform: scale(1.1); /* Slight zoom on hover */
}


.modal-footer {
  text-align: center;
  font-size: 0.9rem;
  color: #555;
  margin-top: 20px;
  border-top: 1px solid #ddd;
  padding-top: 10px;
}


/* FAQ Section */


.faq-container {
  max-width: 800px;
  margin: auto;
  background: #fff;
  padding: 20px !important;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.faq-header {
  font-size: 24px;
  font-weight: bold;
  color: #600;
  text-align: center;
  margin-bottom: 10px;
}
.faq-subtext {
  text-align: center;
  font-size: 14px;
  color: #777;
  margin-bottom: 20px;
}/* Ensure that the FAQ items don't expand beyond their container */
.faq-item {
  display: flex;
  flex-direction: column;
  justify-content: space-between;  /* Ensures content doesn't stretch */
  height: 100%; /* Ensure the height is controlled */
  overflow: hidden; /* Prevent overflow on click */
  transition: all 0.3s ease; /* Smooth transition */
}

/* Specific style for the question, if needed */
.faq-question {
  font-weight: bold;
  cursor: pointer;
}

/* Ensuring that the answer content remains hidden and expands correctly */
.faq-answer {
  display: none;  /* Initially hidden */
  padding: 10px 0;
  font-size: 14px;
  color: #6c757d;
}

/* Show the answer on click */
.faq-item.active .faq-answer {
  display: block;
}

/* Responsive Fixes for smaller screens */
@media (max-width: 768px) {
  .faq-item {
      flex: 1 1 100%; /* Make cards take full width on mobile */
      padding: 10px;
  }
}

.arrow {
  transition: transform 0.3s ease;
  color: #800000;
}

.faq-item.active .arrow {
  transform: rotate(180deg);
}


.container {
  max-width: 1200px;
}

/* Scrollable section with a max height */
.scrollable {
  max-height: 300px;
  overflow-y: auto;
  padding: 20px;
  border-right: 2px solid #ddd;
  color: #800000;
}

/* Rotating animation for the gif */
/* .rotating-circle {
  width: 80px;
  height: 80px;
  animation: spin 5s linear infinite;
} */

/* Button styling */
.btn-success {
  width: 100%;
}

/* Responsive Design */
@media (max-width: 992px) {
  .scrollable {
      max-height: none;
      border-right: none;
  }

  .non-scrollable {
      margin-top: 20px;
  }
}

@media (max-width: 768px) {
  .container {
      flex-direction: column;
  }

  .scrollable,
  .non-scrollable {
      width: 100%;
  }

 
}


/* technologies */

/* Ensure images scale properly */
.Team-body img {
  max-width: 100%;
  height: auto;
}

/* Make sections stack properly on small screens */
@media (max-width: 992px) {
  .d-flex.justify-content-between {
      flex-direction: column;
      align-items: center;
  }

  .technology-option {
      margin-bottom: 20px;
  }

  .technologies {
      text-align: center;
  }

  .icons-group i {
      font-size: 40px;
  }
}

@media (max-width: 768px) {
  .icons-group i {
      font-size: 35px;
  }

  .Team-body {
      text-align: center;
  }
}

/* Animation Keyframes */
/* @keyframes spin {
  from {
      transform: rotate(0deg);
  }
  to {
      transform: rotate(360deg);
  }
} */

/* faq section */
.faq-header {
  font-weight: 600 !important;
  font-size: 3rem !important;
}

.faq-subtext {
  font-size: 1.2rem;
}

/* FAQ Items */
.faq-item {
  background: #f8f9fa;
  border-radius: 8px;
  padding: 15px;
  margin-bottom: 15px;
  cursor: pointer;
  transition: background 0.3s ease;
}

.faq-item:hover {
  background: #e9ecef;
}

.faq-question {
  font-weight: bold;
  font-size: 1.2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #800000;
}

.arrow {
  font-size: 1rem;
  transition: transform 0.3s ease;
}

.faq-answer {
  display: none;
  font-size: 1rem;
  margin-top: 10px;
}

/* Responsive Grid */
@media (max-width: 992px) {
  .faq-header {
      font-size: 2.5rem !important;
  }
  .faq-subtext {
      font-size: 1rem;
  }
}

@media (max-width: 768px) {
  .faq-header {
      font-size: 2rem !important;
      text-align: center;
  }
  
  .faq-subtext {
      text-align: center;
      font-size: 1rem;
  }
  
  .faq-item {
      text-align: left;
  }
  
  .faq-question {
      font-size: 1rem;
  }
  
  .faq-answer {
      font-size: 0.9rem;
  }
}


/* who we are */

.category-wrapper {
  text-align: center;
  padding: 30px;
}

.category {
  display: flex;
  justify-content: center;
  gap: 20px; /* Space between category buttons */
  flex-wrap: wrap; /* Allow buttons to wrap on smaller screens */
}

/* some of our work */

.d-fle {
  display: flex;
  justify-content: center;
  align-items: center;  /* Aligns arrows horizontally */
  margin-top: 20px;
}

.d-flexi {
  font-size: 2rem;
  cursor: pointer;
  margin: 0 10px; /* Adjust spacing between the arrows */
}

/* Optional: Adjust the size and margins for different screen sizes */
@media (max-width: 768px) {
  .d-flexi {
      font-size: 1.5rem; /* Smaller arrows for mobile */
      margin: 0 5px; /* Adjust margin for smaller screens */
  }
}



/* contact section */


.contact-section{

  font-family: Arial, sans-serif;
  background-color: #231f20;
  color: #fff;
  margin: 0;
  padding: 0;
}
.container {
  /* text-align: center; */
  padding: 20px;
}
.title {
  color:#800000;
  font-size: 2em;
  margin-bottom: 5px;
}
.subtitle {
  font-size: 1.2em;
  margin-bottom: 30px;
}
.content-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  /* gap: 50px; */
}
.image-container {
  position: relative;
  width: 350px;
  height: 574px;
}
.image-container img {
  width: 100%;
  height: 100%;
  border-radius: 10px 0px  0px 10px;
}
.contact-card {
  position: absolute;
  top: 100px;
  right: 280px;
  background: white;
  color: black;
  width: 400px;
  padding: 75px;
  border-radius: 10px !important ;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
  text-decoration:  none;
}


.iconsofcontact {
  /* text-decoration: none; */
  color: gray;
}
.form-container {
  background: white;
  color: black;
  padding: 20px;
  border-radius:  0px 10px 10px 0px !important;
  width: 340px;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
}
.contact-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  
}
.contact-form input, .contact-form textarea {
  width: 100%;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 5px;

}


.row-fields {
  display: flex;
  gap: 10px;
 
}
.row-fields div {
  flex: 1;
}
.contact-form button {
  background: #800000;
  color: white;
  border: none;
  padding: 10px;
  border-radius: 5px;
  cursor: pointer;
}
.contact-form button:hover {
  background: #8b0000;
}
  /* blogs */
  .blog-card {
    background-color: #f8f9fa;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    padding: 20px;
    text-align: center;
    transition: transform 0.3s;
    height: 100%;
  }

  .blog-card video {
    width: 100%;
    border-radius: 5px;
    margin-bottom: 15px;
  }

  .blog-card h5 {
    font-size: 1.2rem;
    font-weight: bold;
    color: #333;
    margin-bottom: 15px;
  }

  .blog-card a {
    color: #800000;
    font-weight: bold;
    text-decoration: none;
  }

  .blog-card a:hover {
    text-decoration: underline;
  }


  /* chat bot starts */
/* Chat Icon Button */
.chat-icon {
  position: fixed;
  bottom: 20px;
  right: 20px;  /* Changed from left to right */
  /* background: #800000; */
  color: white;
  font-size: 24px;
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  transition: background 0.3s;
  z-index: 1000;
}

/* .chat-icon:hover {
  background: #800000;
} */

/* Chat Container */
.chat-container {
  position: fixed;
  bottom: 80px; 
  right: 20px; /* Changed from left to right */
  width: 350px;
  height: 450px;
  background: white;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: column;
  transform: translateY(100%);
  opacity: 0;
  transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
  z-index: 1000;
}

/* Show Chat */
.chat-container.show {
  transform: translateY(0);
  opacity: 1;
}

/* Chat Header */
.chat-header {
  background: #800000;
  color: white;
  padding: 10px;
  font-size: 18px;
  font-weight: bold;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: 10px 10px 0 0;
}

/* Close Button */
/* Close Button */
.close-btn {
  background: none !important;
  border: none !important; 
  outline: none !important; /* Remove focus outline */
  color: white;
  font-size: 24px;
  cursor: pointer;
  /* padding: 5px; */
  /* border-radius: 50%; */
  transition: background 0.3s;
}




@keyframes waveHand {
    0% { transform: rotate(0deg); }
    25% { transform: rotate(-10deg); }
    50% { transform: rotate(10deg); }
    75% { transform: rotate(-10deg); }
    100% { transform: rotate(0deg); }
}

.chat-icon {
    position: fixed;
    bottom: 20px;
    right: 20px;
    font-size: 50px; /* Adjust size */
    cursor: pointer;
    transition: transform 0.3s ease-in-out;
}

.chat-icon:hover {
    transform: scale(1.1);
}

.waving-hand {
  display: inline-block;
  animation: waveHand 1.5s infinite ease-in-out;
  font-size: 4em; /* This makes the icon 4x bigger */
}


/* Chat Box */
.chat-box {
  flex-grow: 1;
  padding: 15px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Input Container */
.input-container {
  display: flex;
  padding: 10px;
  border-top: 1px solid #ddd;
  background: white;
}

input {
  flex: 1;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 5px;
  outline: none;
}

button {
  padding: 8px 12px;
  background: #800000;
  color: white;
  border: none;
  cursor: pointer;
  border-radius: 5px;
  margin-left: 5px;
}

/* Messages */
.user-message, .bot-message {
  padding: 10px;
  border-radius: 10px;
  max-width: 75%;
  animation: fadeIn 0.3s ease-in-out;
}

.user-message {
  background: #800000;
  color: white;
  align-self: flex-end;
}

.bot-message {
  background: #ddd;
  color: black;
  align-self: flex-start;
}

/* Typing Animation */
.typing {
  display: inline-block;
  width: 30px;
  height: 10px;
  background: none;
}

.typing span {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin: 0 1px;
  background: gray;
  border-radius: 50%;
  animation: typingDots 1.4s infinite;
}

.typing span:nth-child(1) { animation-delay: 0s; }
.typing span:nth-child(2) { animation-delay: 0.2s; }
.typing span:nth-child(3) { animation-delay: 0.4s; }

@keyframes typingDots {
  0% { opacity: 0.3; }
  50% { opacity: 1; }
  100% { opacity: 0.3; }
}

/* Fade-in effect for messages */
@keyframes fadeIn {
  from {
      opacity: 0;
      transform: translateY(5px);
  }
  to {
      opacity: 1;
      transform: translateY(0);
  }
}