#typedtext {
  font-family: "Sorts Mill Goudy", serif;
  font-weight: 400;
  line-height: 3.2rem;
  font-style: italic;
}

.bbc-title, h1, h2, h3, h4, h5, h6 {
  font-family: "EB Garamond", serif;
  font-optical-sizing: auto;
  font-weight: 600;
  font-style: normal;
}

p, li, a {
  font-size: 18px;
}

p, small {
  font-family: "Poppins", serif;
  font-weight: 300;
  font-style: normal;
}

.custom-navbar {
  font-family: "EB Garamond", serif;
  font-size: 22px !important;
  letter-spacing: 1px !important;
}

/* Hide the spin buttons in WebKit browsers */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Hide spin buttons in Firefox */
input[type="number"] {
    -moz-appearance: textfield;
}

.four-side-shadow {
  -webkit-box-shadow: 0 0 10px #fff;
        box-shadow: 0 0 10px #fff;
}

.skewed-btn {
  background-color: #007BFF;
  color: white;
  font-size: 16px;
  padding: 12px 30px;
  border: none;
  text-align: center;
  cursor: pointer;
  transform: skew(-20deg);
  /* font-weight: bold; */
  transition: background-color 0.3s ease;
  width: fit-content;
}

.skewed-btn:hover {
  background-color: #0056b3;
}

.skewed-btn i {
  margin-left: 10px;
}

.card {
  position: relative;
  width: 300px;
  height: 350px;
  overflow: hidden;
  border-radius: 10px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
}

.card:hover {
  transform: scale(1.05);
}

.card-image {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
}

.card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(30%);
  transition: filter 0.3s ease;
}

.card-text {
  position: absolute;
  /* bottom: 20px; */
  top: 40px;
  left: 20px;
  color: white;
  z-index: 1;
}

/* Animated Button Start */
/* From Uiverse.io by abrahamcalsin */ 
/* Apply custom animation and pseudo-element */
.reach-us-btn::after {
  content: " ";
  width: 0%;
  height: 100%;
  background: #007BFF;
  position: absolute;
  transition: all 0.4s ease-in-out;
  right: 0;
}

.reach-us-btn:hover::after {
  right: auto;
  left: 0;
  width: 100%;
}

.reach-us-btn:hover span {
  color: #ffffff;
  animation: scaleUp 0.3s ease-in-out;
}

@keyframes scaleUp {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(0.95);
  }

  100% {
    transform: scale(1);
  }
}
/* Animated Button End */

/* About Us Style Start */

.hero-video-container {
  position: relative;
  width: 100%;
  /* height: 100vh; Full viewport height */
  overflow: hidden;
}

.hero-video {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Ensures video covers the full width and height */
}

.hero-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: none; /* Hide image by default */
}

/* Show image if video is not loaded */
.hero-video:not(:loaded) + .hero-image {
  display: block;
}
/* About Us Style End */

/* Portfolio Start */
/* General card styles */
.portfolio-card {
  width: 400px;
  height: 300px;
  position: relative;
  overflow: hidden; /* Hide content that overflows */
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  background-color: #2F4F4F;
  padding: 40px;
}

.portfolio-card-image img {
  object-fit: cover; /* Cover the card area with the image */
  transition: transform 0.3s ease-in-out;
}

/* Content section inside the card */
.portfolio-card-content {
  position: absolute;
  bottom: -100%; /* Initially hide the content */
  left: 0;
  right: 0;
  padding: 50px 20px 0;
  text-align: center;
  background: linear-gradient(to top, rgb(0, 0, 0), rgba(0, 0, 0, 0.2));
  color: white;
  transition: bottom 0.3s ease-in-out; /* Animation for the content */
  height: 100%;
}

.portfolio-card-content h3, .portfolio-card-content p {
  margin: 0;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.3s, transform 0.3s;
}

.portfolio-card-content p {
  margin-top: 5px;
}

/* Hover effect */
.portfolio-card:hover .portfolio-card-image img {
  transform: scale(1.1); /* Zoom in effect on the image */
}

.portfolio-card:hover .portfolio-card-content {
  bottom: 0; /* Slide the content up */
}

.portfolio-card:hover .portfolio-card-content h3,
.portfolio-card:hover .portfolio-card-content p {
  opacity: 1; /* Fade in text */
  transform: translateY(0); /* Slide in text */
}

/* Portfolio End */
/* SEO Start */
/* Hero Section Styling */
.seo-hero-section {
  position: relative;
  height: 100vh; /* Full viewport height */
  width: 100%; /* Full width */
  overflow: hidden; /* Ensure no overflow from video */
}

.seo-hero-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* Ensures the video covers the entire section */
}

.seo-hero-content {
  position: absolute;
  top: 50%;
  left: 5%;
  transform: translateY(-50%); /* Center vertically */
  color: white;
  text-align: left;
}

.seo-hero-content h3 {
  font-size: 3rem;
  margin-bottom: 10px;
}

.seo-hero-content p {
  font-size: 1.2rem;
  margin-bottom: 20px;
}

.seo-btn {
  padding: 12px 24px;
  background-color: #007BFF; /* Default button color */
  color: white;
  text-decoration: none;
  font-size: 1.125rem;
  border-radius: 8px;
  transition: background-color 0.3s, transform 0.3s;
}

.seo-btn:hover {
  background-color: #0056b3;
  transform: scale(1.05); /* Slight scaling effect on hover */
}

/* Responsive Breakpoints */
@media (max-width: 1024px) {
  .seo-hero-content h3 {
    font-size: 2.5rem;
  }
  .seo-hero-content p {
    font-size: 1.1rem;
  }
  .seo-btn {
    font-size: 1rem;
    padding: 10px 20px;
  }
}

@media (max-width: 768px) {
  .seo-hero-content {
    left: 3%;
  }
  .seo-hero-content h3 {
    font-size: 2rem;
  }
  .seo-hero-content p {
    font-size: 1rem;
  }
  .seo-btn {
    font-size: 0.95rem;
    padding: 8px 16px;
  }
  .hero-video-container {
    height: 60vh;
  }
}

@media (max-width: 480px) {
  .seo-hero-content h3 {
    font-size: 1.75rem;
  }
  .seo-hero-content p {
    font-size: 0.9rem;
  }
  .seo-btn {
    font-size: 0.9rem;
    padding: 6px 12px;
  }
  .portfolio-card-content {
    padding: 5px 10px 0;
  }
  .portfolio-card {
    display: flex;
    align-items: center;
    height: 370px !important;
  }
  .hero-video-container {
    height: 50vh;
  }
}

/* SEO End */

/* SEM START */

.why-choose-container {
  display: flex;
  align-items: center;
  font-family: Arial, sans-serif;
  font-size: 48px;
  font-weight: bold;
  color: #007AFF; /* Blue color */
}

/* The triangle shape on the right side of the parent */
.triangle {
  position: absolute;
  top: 40%;
  right: -25px; /* Adjust the positioning to sit on the edge */
  width: 0;
  height: 0;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-top: 20px solid #2F4F4F; /* Color of the triangle (matching the parent) */
  transform: translateY(-50%); /* Vertically center the triangle */
  transform: rotate(270deg);
}

/* SEM END */

/* Our Clients Start */
.swiper-slide {
  display: flex;
  justify-content: center;
  margin: auto;
}
/* Our Clients End */

/* Accordion Elementor Start */
.faq .elementor-accordion {
  display: flex;
  flex-direction: column;
  gap: 10px;
  color: #ffffff;
}

.faq .elementor-accordion .elementor-accordion-item {
  border: none !important;
  border-bottom: 2px solid #007bff !important;
  border-radius: 10px;
  background: #2F4F4F;
}

.faq .elementor-accordion-icon svg {
  fill: #ffffff !important;
}
/* Accordion Elementor End */

/* Footer Start */
#menu-quick-links, #menu-our-services {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
/* Footer End */

/* General Styles for Navbar */
.site-header {
  background-color: #333;
  padding: 20px 0;
  position: relative;
}

.container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.logo img {
  height: 50px;
}

/* Navbar Styling */

/* Navigation menu styling */
.nav-tabs a {
  text-decoration: none;
}

.nav-tabs a:hover {
  text-decoration: underline;
}

/* Media queries for small screen layout */
@media (max-width: 767px) {
  .nav-tabs {
    display: none; /* Hide desktop menu */
  }

  #mobile-menu {
    display: none; /* Hide mobile menu by default */
  }

  #mobile-menu.active {
    display: block; /* Show mobile menu when active */
  }

  /* Hamburger button style */
  #hamburger-icon.active svg#hamburger-svg {
    display: none;
  }

  #hamburger-icon.active svg#close-svg {
    display: block;
  }

  .btn-lg-src {
    display: none;
  }
}

.hero-nav.scrolled {
  background: rgba(0, 0, 0, 0.7); /* Black with low opacity */
}

/* WP Form Style */

.wpforms-container-full {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.gfc-name #wpforms-820-field_7, .gfc-email #wpforms-820-field_8, .gfc-email #wpforms-820-field_8-secondary, .gfc-phone-number #wpforms-820-field_9, .gfc-website #wpforms-820-field_10, .gfc-budget #wpforms-820-field_12 {
  background: #2f4f4f;
  border-radius: 5px;
  border: none;
  color: #ffffff !important;
}

.wpforms-submit-container {
  display: flex;
  justify-content: center;
}

.wpforms-submit-container #wpforms-submit-820 {
  background: #007BFF;
  border-radius: 5px;
  border: none;
  color: #ffffff;
}

/* WP Form Style */