/*
  Theme Name: OmniDrill – Oil & Gas Services HTML5 Landing Page
  Author: WingsTech Solutions Pvt. Ltd.
  Support: Kindly raise your concerns, doubts, or questions in the "Ticket" section of our TemplateMonster Author profile.
  Description: OmniDrill is a modern, professional landing page template designed for oil & gas service providers to highlight their expertise, innovations, and industry impact. Whether you’re showcasing offshore projects, advanced drilling technologies, or safety-first operations, OmniDrill delivers a clean design with powerful visuals to strengthen your presence and build trust with clients worldwide.
  Version: 1.0
*/

/* ==============CSS Index================
------------------------------------------
    01. Common CSS
    02. Buttons
    03. Header
    04. Hero Section
    05. About Section
    06. Services Section
    07. Projects Section
    08. Clients Section
    09. Testimonial Section
    10. Team Section
    11. Video Section
    12. Blog Section
    13. FAQs Section
    14. CTA Section
    15. Contact Section
    16. Footer Section
    17. Blog Page Hero
    18. Blog Page Main
    19. Slider
    20. Toast Message

-----------------------------------------
=======================================*/

/****************
  01. Common CSS
****************/

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Outfit", sans-serif;
}

* h1,
* h2,
* h3,
* h4,
* h5,
* h6,
* p {
  margin: 0;
}

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
}

html,
body {
  scroll-padding-top: 80px;
  scroll-margin-top: 80px;
}

:root {
  --white: #ffffff;
  --white80: #ffffffcc;
  --white20: #ffffff33;
  --mute: #6c6c6c;
  --gray: #e0e0e0;
  --primary: #f15a29;
  --secondary: #1b75bc;
  --black: #18191a;
  --darkoverlay: #000000b2;
  --mainbg: #f7f7f7;
  --icongray: #999999;
}

body {
  background-color: #ffffff;
  position: relative;
}

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

.py-100 {
  padding: 100px 0;
}

.mb-50 {
  margin-bottom: 50px;
}

.mb-10 {
  margin-bottom: 10px;
}

.mt-50 {
  margin-top: 50px;
}

.title-xxl {
  font-size: 62px;
  line-height: 68px;
}

.title-xl {
  font-size: 48px;
  line-height: 54px;
}

.title-lg {
  font-size: 40px;
  line-height: 46px;
}

.title-md {
  font-size: 32px;
  line-height: 38px;
}

.title-sm {
  font-size: 24px;
  line-height: 30px;
}

.title-xs {
  font-size: 20px;
  line-height: 26px;
}

.title-xxl,
.title-xl,
.title-lg,
.title-md,
.title-sm,
.title-xs {
  font-weight: 600;
}

.content {
  color: var(--mute);
  font-size: 16px;
  line-height: 22px;
  font-weight: 400;
}

.primary-txt {
  color: var(--primary);
}

.secondary-txt {
  color: var(--secondary);
}

.black-txt {
  color: var(--black);
}

.mute-txt {
  color: var(--mute);
}

.gray-txt {
  color: var(--gray);
}

.white-txt-80 {
  color: var(--white80);
}

.text-white-24 {
  color: var(--white80);
  font-size: 24px;
  line-height: 30px;
  font-weight: 400;
}

.text-white-16 {
  color: var(--white);
  font-size: 16px;
  line-height: 22px;
  font-weight: 400;
}

.text-black-16 {
  color: var(--black);
  font-size: 16px;
  line-height: 22px;
  font-weight: 400;
}

.rounded-8 {
  border-radius: 8px;
}

/****************
  02. Buttons
****************/

.theme-btn {
  background: var(--primary);
  color: var(--white);
  font-family: inherit;
  padding: 5px;
  padding-left: 57px;
  padding-right: 16px;
  font-size: 16px;
  line-height: 22px;
  font-weight: 600;
  border-radius: 8px;
  border: none;
  height: 50px;
  display: inline-flex;
  align-items: center;
  overflow: hidden;
  white-space: nowrap;
  position: relative;
  cursor: pointer;
}

.theme-btn .icon {
  background: var(--white);
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  width: 40px;
  border-radius: 6px;
  left: 5px;
  transition: all 0.3s;
}

.theme-btn:hover .icon {
  width: calc(100% - 10px);
}

.theme-btn .icon svg {
  width: 24px;
  transition: transform 0.3s;
  color: var(--primary);
}

.theme-btn:hover .icon svg {
  transform: translateX(1px);
}

.theme-btn:active .icon {
  transform: scale(0.95);
}

.theme-btn-white {
  background: var(--white20);
  color: var(--white);
  backdrop-filter: blur(20px);
  font-family: inherit;
  padding: 5px;
  padding-left: 57px;
  padding-right: 16px;
  font-size: 16px;
  line-height: 22px;
  font-weight: 600;
  border-radius: 8px;
  border: none;
  height: 50px;
  display: inline-flex;
  align-items: center;
  overflow: hidden;
  position: relative;
  cursor: pointer;
}

.theme-btn-white .icon {
  background: var(--primary);
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  width: 40px;
  border-radius: 6px;
  left: 5px;
  transition: all 0.3s;
}

.theme-btn-white:hover .icon {
  width: calc(100% - 10px);
}

.theme-btn-white .icon svg {
  width: 24px;
  transition: transform 0.3s;
  color: var(--primary);
}

.theme-btn-white:hover .icon svg {
  transform: translateX(1px);
}

.theme-btn-white:active .icon {
  transform: scale(0.95);
}

/****************
  03. Header
****************/

header {
  width: 100%;
  background-color: transparent;
  position: fixed;
  top: 20px;
  z-index: 100;
  transition: all 0.5s ease;
}

.header-logo img {
  height: 60px;
}

.contact-list {
  display: flex;
  align-items: center;
  gap: 48px;
}

.contact-list li {
  display: flex;
  align-items: center;
  gap: 16px;
}

.contact-list li > .icon {
  width: 50px;
  height: 50px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  background-color: #ffffff1a;
  backdrop-filter: blur(20px);
  border: 1px solid #ffffff1a;
}

.contact-list li > .icon img {
  width: 24px;
  height: 24px;
}

.contact-list span {
  display: block;
  color: #ffffffb2;
  font-size: 16px;
  line-height: 22px;
  font-weight: 400;
  margin-bottom: 4px;
}

.contact-list p {
  font-size: 16px;
  line-height: 22px;
  font-weight: 400;
  margin-bottom: 4px;
}

.contact-list a {
  display: inline-block;
  text-decoration: none;
  color: var(--white);
  font-size: 16px;
  line-height: 22px;
  font-weight: 600;
  transition: all 0.3s ease;
}

.contact-list a:hover {
  color: var(--primary);
}

nav {
  background-color: #ffffff1a;
  backdrop-filter: blur(20px);
  border: 1px solid #ffffff1a;
  border-radius: 8px;
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px;
  padding-left: 20px;
  overflow: hidden;
}

nav ul {
  transition: all 0.3s ease;
}

nav ul li {
  display: inline-block;
}

nav ul li:not(:last-child) {
  margin-right: 30px;
}

nav ul li a {
  text-decoration: none;
  display: inline-block;
  color: var(--white);
  font-size: 16px;
  line-height: 22px;
  font-weight: 400;
  padding: 7px 0;
  text-transform: capitalize;
  transition: all 0.3s ease;
}

nav ul li a:hover {
  color: var(--primary);
}

nav ul li a.active {
  color: var(--primary);
}

@media only screen and (min-width: 992px) {
  .nav-logo {
    display: block;
    height: 0;
    padding: 0;
    line-height: 0;
  }

  .nav-logo img {
    height: 0;
    opacity: 0;
    transition: height 0.4s ease, opacity 0.4s ease;
  }

  nav ul li:first-child {
    max-height: 0;
    opacity: 0;
    line-height: 0;
    margin: 0;
    transition: max-height 0.4s ease, opacity 0.4s ease;
  }

  .scrolled-down {
    transform: translateY(-80px);
  }

  .logo-appear {
    margin-right: 30px !important;
    max-height: 36px !important;
    opacity: 1 !important;
    display: inline-block !important;
  }

  .logo-appear .nav-logo {
    height: auto;
    padding: 0 !important;
  }

  .logo-appear .nav-logo img {
    height: 36px;
    opacity: 1;
  }
}

.menu-height {
  max-height: 370px;
}

.navbar-simple {
  background-color: #000000b2;
}

.navbar button {
  border: none;
  outline: none;
  padding: 0;
}

.navbar-toggler:focus {
  outline: none;
  box-shadow: none;
}

.header-sticky {
  background-color: var(--black);
  backdrop-filter: blur(10px);
}

header .theme-btn-white {
  background-color: #ffffff20;
  flex-shrink: 0;
}

header .hamburger {
  position: absolute;
  top: -5px;
  right: 24px;
  left: auto;
  width: auto;
  height: 0;
  transition-duration: 0.5s;
}

header .hamburger .icon {
  background-color: var(--primary);
  position: absolute;
  top: 27px;
  width: 24px;
  height: 2px;
  transition-duration: 0.5s;
}

header .hamburger .icon::before {
  content: "";
  background-color: var(--primary);
  position: absolute;
  top: -6px;
  right: 0;
  width: 24px;
  height: 2px;
  transition-duration: 0.5s;
}

header .hamburger .icon::after {
  content: "";
  background-color: var(--primary);
  position: absolute;
  top: 6px;
  right: 0;
  width: 24px;
  height: 2px;
  transition-duration: 0.5s;
}

header .hamburger.open .icon {
  background: transparent;
  top: 31px;
  transition-duration: 0.5s;
}

header .hamburger.open .icon::before {
  background-color: var(--primary);
  -webkit-transform: rotateZ(45deg) scaleX(0.75) translate(2px, 2.5px);
  -moz-transform: rotateZ(45deg) scaleX(0.75) translate(2px, 2.5px);
  -ms-transform: rotateZ(45deg) scaleX(0.75) translate(2px, 2.5px);
  -o-transform: rotateZ(45deg) scaleX(0.75) translate(2px, 2.5px);
  transform: rotateZ(45deg) scaleX(0.75) translate(2px, 2.5px);
}

header .hamburger.open .icon::after {
  background-color: var(--primary);
  -webkit-transform: rotateZ(-45deg) scaleX(0.75) translate(8px, -7px);
  -moz-transform: rotateZ(-45deg) scaleX(0.75) translate(8px, -7px);
  -ms-transform: rotateZ(-45deg) scaleX(0.75) translate(8px, -7px);
  -o-transform: rotateZ(-45deg) scaleX(0.75) translate(8px, -7px);
  transform: rotateZ(-45deg) scaleX(0.75) translate(8px, -7px);
}

/****************
  04. Hero Section
****************/
.hero {
  height: 100vh;
  max-height: 1024px;
  display: flex;
  align-items: center;
  position: relative;
  z-index: 0;
}

.hero::before {
  content: "";
  position: absolute;
  background-color: var(--darkoverlay);
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

.hero-wrapper {
  display: flex;
  align-items: center;
}

.hero-content {
  width: 50%;
  margin-top: 110px;
}

.hero-content h1 {
  margin-bottom: 20px;
}

.hero-content a {
  margin-top: 40px;
}

.hero-slider {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

.img-wrapper,
.img-wrapper img {
  height: 100%;
}

.hero-slider .owl-stage-outer,
.hero-slider .owl-stage,
.hero-slider .owl-item {
  height: 100%;
}

.custom-owl-dots {
  position: absolute;
  bottom: 50px;
  left: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 50px;
}

.custom-owl-dots button {
  border: none;
  outline: none;
  height: 12px;
  background-color: transparent;
  border-radius: 50%;
}

.custom-owl-dots button span {
  display: block;
  width: 12px;
  height: 12px;
  background-color: var(--white20);
  border-radius: 50%;
  transition: all 0.3s ease;
}

.custom-owl-dots button.active span {
  background-color: var(--white);
}

.scroll-down {
  position: absolute;
  bottom: 30px;
  right: -170px;
  display: flex;
  align-items: center;
  gap: 10px;
  transform: rotate(-90deg);
  opacity: 1;
  transform-origin: left top;
  transition: all 0.3s ease;
}

.scroll-down.hidden {
  opacity: 0;
}

.scroll-down p {
  color: var(--white);
  font-size: 16px;
  line-height: 22px;
  font-weight: 400;
}

.scroll-down .line {
  width: 100px;
  height: 2px;
  background-color: var(--white);
  position: relative;
}

.scroll-down .line::after {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  background-color: var(--white);
  transform: rotate(45deg);
  position: absolute;
  left: 0;
  top: -3px;
}

/****************
  05. About Section
****************/

.about {
  background-color: var(--white);
  position: relative;
  z-index: 0;
}

.about-nav {
  display: flex;
  position: relative;
  flex-direction: column-reverse;
  justify-content: center;
  align-items: center;
  gap: 16px;
  margin: 0;
}

.about-nav::before {
  content: "";
  position: absolute;
  bottom: 0;
  width: 2px;
  height: 70px;
  background-color: var(--icongray);
}

.about-nav::after {
  content: "";
  position: absolute;
  top: 0;
  width: 2px;
  height: 70px;
  background-color: var(--icongray);
}

.about-nav li button {
  padding: 16px 14px;
  border: none;
  outline: none;
  background-color: transparent;
  border-radius: 8px;
  writing-mode: vertical-lr;
  flex-shrink: 0;
  transform: rotate(180deg);
  transition: all 0.3s ease;
}

.about-nav li button:hover {
  color: var(--primary);
}

.about-nav li button.active {
  background-color: var(--primary);
  color: var(--white);
}

.about-nav li button.active:hover {
  color: var(--white);
}

.about-image-wrapper {
  position: relative;
}

.about-image-wrapper img {
  border-radius: 8px;
}

.about-image-wrapper::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--secondary);
  border-radius: 8px;
  transform: translate(-20px, 20px);
  z-index: -1;
}

.about-content h2,
.mission-content h2 {
  margin-bottom: 10px;
}

.about-content a {
  margin-top: 30px;
}

.about-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  margin-top: 30px;
  margin-bottom: 0;
}

.about-list h6 {
  margin-bottom: 10px;
}

.about-list li {
  padding-left: 20px;
  border-left: 10px solid var(--secondary);
}

.mission-content > div > p {
  margin-bottom: 10px;
}

.mission-content > div > p:last-child {
  margin-bottom: 0;
}

.mission-content h5 {
  margin-bottom: 20px;
}

.mission-list {
  padding-left: 24px;
  list-style-type: disc;
  margin: 0;
}

.mission-list li {
  margin-bottom: 10px;
}

.mission-list li:last-child {
  margin-bottom: 0;
}

.mission-list li::marker {
  color: var(--mute);
}

/****************
  06. Services Section
****************/

.services {
  background-color: var(--mainbg);
}

.service-card {
  padding: 30px;
  position: relative;
  background-color: var(--white);
  height: 600px;
  display: flex;
  flex-direction: column-reverse;
  justify-content: space-between;
  z-index: 1;
  transition: all 0.3s ease;
}

.service-card > img {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  object-fit: cover;
  opacity: 0;
  z-index: -2;
}

.service-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.service-header .count {
  font-size: 100px;
  line-height: 106px;
  font-weight: 600;
}

.service-content span {
  display: inline-block;
  font-weight: 400;
  margin-bottom: 10px;
}

.service-content h3 {
  margin-bottom: 16px;
}

.service-card::before {
  content: "";
  position: absolute;
  background-color: var(--darkoverlay);
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  opacity: 0;
  z-index: -1;
  transition: all 0.3s ease;
}

.service-card.hovered::before,
.service-card.default-hover::before {
  opacity: 1;
}

.service-card.hovered img,
.service-card.default-hover img {
  opacity: 1;
}

.service-card.hovered .arrow svg path,
.service-card.default-hover .arrow svg path {
  fill: var(--white);
}

.service-card.hovered h3,
.service-card.default-hover h3 {
  color: var(--white);
}

.service-card.hovered .count,
.service-card.default-hover .count {
  color: var(--white);
}

.service-card.hovered .content,
.service-card.default-hover .content {
  color: #ffffffcc;
}

/****************
  07. Projects Section
****************/

.projects {
  background-color: var(--primary);
}

.project-card {
  padding: 30px;
  display: flex;
  align-items: end;
  position: relative;
  border-radius: 8px;
  z-index: 0;
  aspect-ratio: 16/9;
}

.project-card:before {
  content: "";
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 50%, #000000 100%);
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 8px;
  z-index: 1;
}

.project-card img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 8px;
  object-fit: cover;
  z-index: 0;
}

.project-card h3 {
  margin-top: 10px;
}

.project-btns button {
  border: 1px solid var(--white) !important;
}

.project-btns button svg path {
  fill: var(--white) !important;
}

.project-btns button:hover {
  background-color: var(--white) !important;
}

.project-btns button:hover svg path {
  fill: var(--primary) !important;
}

/****************
  08. Clients Section
****************/

.clients {
  background-color: var(--white);
}

.section-title p {
  width: 40%;
}

.clients .scroller[data-animated="true"] {
  overflow: hidden;
}
.clients .scroller[data-animated="true"] .scroller__inner {
  width: max-content;
  flex-wrap: nowrap;
  animation: scroll var(--_animation-duration, 40s)
    var(--_animation-direction, forwards) linear infinite;
}
.clients .scroller[data-direction="right"] {
  --_animation-direction: reverse;
}
.clients .scroller[data-direction="left"] {
  --_animation-direction: forwards;
}
.clients .scroller[data-speed="fast"] {
  --_animation-duration: 20s;
}
.clients .scroller[data-speed="slow"] {
  --_animation-duration: 60s;
}
@keyframes scroll {
  to {
    transform: translate(calc(-50% - 0.5rem));
  }
}

.clients .scroller .client-logo-wrapper span,
.clients .scroller .client-logo-reverse-wrapper span {
  display: inline-block;
  margin: 0 40px;
}

.clients .scroller {
  margin-bottom: 50px;
}

.client-wrapper {
  margin-bottom: 70px;
}

.left {
  position: absolute;
  top: 0;
  left: 0;
  width: 200px;
  height: 100%;
  background: linear-gradient(270deg, rgba(255, 255, 255, 0) 0%, #ffffff 100%);
}

.right {
  position: absolute;
  top: 0;
  right: 0;
  width: 200px;
  height: 100%;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #ffffff 100%);
}

.client-list {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  width: 80%;
}

.client-list li {
  display: flex;
  align-items: start;
  gap: 6px;
  background-color: var(--mainbg);
  padding: 4px 12px 4px 4px;
}

/****************
  9. Testimonials Section
****************/

.testimonials {
  background-color: var(--mainbg);
}

.testimonials .slider-button-block {
  margin-top: 40px;
}

.test-card {
  padding: 30px;
  margin-bottom: 24px;
  height: 100%;
}

.test-card:last-child {
  margin-bottom: 0;
}

.test-card h6 {
  margin-bottom: 4px;
}

.test-card .line {
  width: 100px;
  height: 2px;
  background-color: var(--white);
  margin: 30px 0;
}

.test-card > p {
  color: var(--white);
  font-size: 20px;
  line-height: 26px;
  font-weight: 400;
  height: 104px;
  overflow-y: auto;
}

.card-black {
  background-color: var(--black);
}

.card-primary {
  background-color: var(--primary);
}

.card-blue {
  background-color: var(--secondary);
}

#test-slider2 {
  margin-top: 50px;
}

.test-slider {
  margin-bottom: -24px;
}

.test-card > p::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}

.test-card > p::-webkit-scrollbar-track {
  background-color: #eeeeee6f;
  border-radius: 4px;
}

.test-card > p::-webkit-scrollbar-thumb {
  background: #ded9d9;
  border-radius: 4px;
  transition: all 0.3s ease;
}

/****************
  10. Team Section
****************/

.team {
  background-color: var(--white);
}

.team-card {
  background-color: var(--mainbg);
  padding: 20px;
}

.team-content {
  margin-top: 20px;
}

.team-content span {
  display: inline-block;
  font-size: 16px;
  line-height: 22px;
  font-weight: 400;
  margin-bottom: 10px;
}

.team .slider-button-block {
  justify-content: center;
  margin-top: 40px;
}

/****************
  11. Video
****************/

.video {
  background-color: var(--primary);
}

.video h2 {
  width: 55%;
}

.wrapper {
  background-image: url(../images/backgrounds/video-bg.webp);
  background-size: 100%;
  background-repeat: no-repeat;
  margin-top: 100px;
}

.counter-card {
  position: relative;
  margin-left: 20px;
}

.counter-card p {
  margin-top: 10px;
}

.counter-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: -30px;
  background-color: var(--white);
  width: 10px;
  height: 60px;
}

.video-wrapper img {
  border: 1px solid #ffffff4d;
}

.video-wrapper button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-color: #000000b2;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #ffffff4d;
  backdrop-filter: blur(30px);
  transition: all 0.3s ease;
}

.video-wrapper button:hover {
  background-color: var(--primary);
  border-color: var(--primary);
}

.ripple {
  position: relative;
  text-decoration: none;
  color: #fff;
  width: 70px;
  height: 70px;
  background-color: #0000001a;
  backdrop-filter: blur(30px);
  margin: 0 auto;
  border-radius: 50%;
  -webkit-animation: ripple 1s linear infinite;
  animation: ripple 1s linear infinite;
}

@keyframes ripple {
  0% {
    -webkit-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.2),
      0 0 0 10px rgba(0, 0, 0, 0.2), 0 0 0 30px rgba(0, 0, 0, 0.2),
      0 0 0 60px rgba(0, 0, 0, 0);
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.2), 0 0 0 10px rgba(0, 0, 0, 0.2),
      0 0 0 30px rgba(0, 0, 0, 0.2), 0 0 0 60px rgba(0, 0, 0, 0);
  }
  100% {
    -webkit-box-shadow: 0 0 0 10px rgba(0, 0, 0, 0.2),
      0 0 0 30px rgba(0, 0, 0, 0.2), 0 0 0 60px rgba(0, 0, 0, 0.2);
    box-shadow: 0 0 0 10px rgba(0, 0, 0, 0.2), 0 0 0 30px rgba(0, 0, 0, 0.2),
      0 0 0 60px rgba(0, 0, 0, 0.2);
  }
}
@-webkit-keyframes ripple {
  0% {
    -webkit-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.2),
      0 0 0 10px rgba(0, 0, 0, 0.2), 0 0 0 30px rgba(0, 0, 0, 0.2),
      0 0 0 60px rgba(0, 0, 0, 0);
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.2), 0 0 0 10px rgba(0, 0, 0, 0.2),
      0 0 0 30px rgba(0, 0, 0, 0.2), 0 0 0 60px rgba(0, 0, 0, 0);
  }
  100% {
    -webkit-box-shadow: 0 0 0 10px rgba(0, 0, 0, 0.2),
      0 0 0 30px rgba(0, 0, 0, 0.2), 0 0 0 60px rgba(0, 0, 0, 0.2);
    box-shadow: 0 0 0 10px rgba(0, 0, 0, 0.2), 0 0 0 30px rgba(0, 0, 0, 0.2),
      0 0 0 60px rgba(0, 0, 0, 0.2);
  }
}

/* YT Modal */

.modal {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-content: center;
  background-color: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(8px);
  padding: 1rem;
  transition: all 0.3s ease;
  display: none;
}

.modal-content {
  width: 100%;
  background-color: black;
  border-radius: 0.5rem;
  box-shadow: 0 10px 15px rgba(0, 0, 0, 0.5);
  position: relative;
  animation: fadeOut 0.5s ease;
}

.video-frame {
  border-radius: 0.5rem;
  width: 20rem;
  height: 12.5rem;
}

@media (min-width: 640px) {
  .video-frame {
    width: 550px;
    height: 320px;
  }
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

.no-scroll {
  overflow: hidden;
}

.fade-in {
  animation: fadeIn 0.3s ease forwards;
}

.fade-out {
  animation: fadeOut 0.3s ease forwards;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes fadeOut {
  from {
    opacity: 1;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(0.95);
  }
}

/****************
  12. Blogs
****************/

.blogs {
  background-color: var(--mainbg);
}

.blog-card {
  background-color: var(--white);
  padding: 20px;
  height: 100%;
}

.blog-card .label {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 5px 10px;
  background-color: #000000b2;
  border: 1px solid #ffffff1a;
  color: var(--white);
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
}

.blog-content {
  margin-top: 20px;
}

.blog-content ul {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
}

.blog-content ul li:not(:last-child)::after {
  content: "|";
  color: var(--black);
  font-size: 16px;
  line-height: 22px;
  font-weight: 400;
  margin-left: 6px;
}

.blog-content a {
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  line-height: 22px;
  font-weight: 600;
  margin-top: 20px;
  transition: all 0.3s ease;
}

.blog-content h5 {
  height: 78px;
}

/****************
  13. FAQs
****************/

.faqs {
  background-color: var(--white);
}

.faqs .accordion .accordion-item {
  border: none;
  border-radius: 8px;
  background-color: var(--mainbg);
}

.faqs .accordion .accordion-item:not(:last-child) {
  margin-bottom: 20px;
}

.faqs .accordion .accordion-item .accordion-header {
  border-radius: 8px;
}

.faqs .accordion .accordion-item .accordion-header button {
  background-color: var(--mainbg);
  border-radius: 8px !important;
  padding: 20px;
  position: relative;
  display: flex;
  gap: 20px;
  justify-content: space-between;
  align-items: center;
}

.faqs .accordion .accordion-item .accordion-header button:not(.collapsed) {
  border-radius: 8px 8px 0 0 !important;
  box-shadow: none;
}

.faqs .accordion .accordion-item .accordion-header button > span {
  color: var(--black);
  font-size: 20px;
  line-height: 26px;
  font-weight: 600;
  transition: all 0.3s ease;
}

.faqs .accordion .accordion-item .accordion-header button:focus {
  box-shadow: none;
}

.faqs .accordion .accordion-item .accordion-header button::after {
  display: none;
}

.faqs .accordion .accordion-item .accordion-collapse .accordion-body {
  background-color: var(--mainbg);
  border-radius: 0 0 8px 8px;
  padding: 20px;
  border-top: 1px solid var(--gray);
}

.faqs .accordion .accordion-body p {
  color: var(--black);
  font-size: 16px;
  line-height: 22px;
  font-weight: 400;
}

.faq-btn {
  width: 24px;
  height: 24px;
  background-color: var(--primary);
  border-radius: 4px;
  position: relative;
  flex-shrink: 0;
}

.faq-btn::before {
  content: "";
  position: absolute;
  top: 11px;
  left: 6px;
  display: inline-block;
  width: 12px;
  height: 2px;
  border-radius: 4px;
  background-color: var(--white);
}

.faq-btn::after {
  content: "";
  position: absolute;
  top: 11px;
  left: 6px;
  display: inline-block;
  width: 12px;
  height: 2px;
  border-radius: 4px;
  background-color: var(--white);
  transform: rotate(90deg);
  transition: all 0.3s ease;
}

.faqs
  .accordion
  .accordion-item
  .accordion-header
  button:not(.collapsed)
  .faq-btn::after {
  transform: rotate(360deg);
}

.faqs
  .accordion
  .accordion-item
  .accordion-header
  button:not(.collapsed)
  > span {
  color: var(--primary);
}

/****************
  14. CTA
****************/

.cta {
  background-color: var(--primary);
  overflow: hidden;
}

.counter-list {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.counter-list li {
  position: relative;
}

.counter-list li span {
  display: inline-block;
}

.counter-list p {
  margin-top: 10px;
}

.counter-list li::before {
  content: "";
  position: absolute;
  top: 0;
  left: -30px;
  background-color: var(--white);
  width: 10px;
  height: 60px;
}

.cta-box {
  background-color: var(--white);
  padding: 20px;
  border-top-left-radius: 8px;
  position: relative;
}

.cta-box::before {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--white);
}

.cta-box::after {
  content: "";
  position: absolute;
  left: 100%;
  top: 0;
  width: 100%;
  height: 150%;
  background-color: var(--white);
}

.cta-box form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.cta-box form > div:nth-last-of-type(2) {
  grid-column: span 2;
}

.cta-box form input,
.cta-box form textarea {
  width: 100%;
  color: var(--black);
  font-size: 20px;
  line-height: 26px;
  font-weight: 500;
  padding: 11px 16px;
  border: 1px solid var(--gray);
  outline: none;
  caret-color: var(--black);
  transition: all 0.3s ease;
}

.cta-box form textarea {
  resize: none;
}

.cta-box form input:hover,
.cta-box form input:focus,
.cta-box form textarea:hover,
.cta-box form textarea:focus {
  border-color: var(--primary);
}

/****************
  15. Contact
****************/

.contact {
  background-color: var(--white);
}

.contact-wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.contact-card {
  background-color: var(--mainbg);
  padding: 20px;
}

.contact-icon img {
  width: 50px;
  height: 50px;
}

.contact-icon {
  margin-bottom: 20px;
}

.contact-card h6 {
  font-size: 16px;
  line-height: 22px;
  font-weight: 400;
  margin-bottom: 10px;
}

.contact-card a {
  text-decoration: none;
  display: inline-block;
  transition: all 0.3s ease;
}

.contact-card a:hover {
  color: var(--secondary);
}

.contact-card ul {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.contact-card ul li:not(:last-child)::after {
  content: "|";
  display: inline-block;
  color: var(--black);
  font-size: 20px;
  line-height: 26px;
  font-weight: 600;
  margin-left: 6px;
}

/****************
  16. Footer
****************/

footer {
  background-color: var(--black);
}

.footer-logo {
  margin-bottom: 20px;
}

footer h6 {
  margin-bottom: 20px;
}

.footer-links li:not(:last-child) {
  margin-bottom: 10px;
}

.footer-links li a {
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  line-height: 20px;
  font-weight: 400;
  text-transform: capitalize;
  transition: all 0.3s ease;
}

.footer-links li a:hover {
  color: var(--primary);
}

footer form .input-wrapper {
  background-color: #ffffff0d;
  border: 1px solid #ffffff1a;
  display: flex;
  align-items: center;
  gap: 10px;
  padding-right: 4px;
  transition: all 0.3s ease;
}

footer form .input-wrapper:hover {
  border-color: var(--primary);
}

footer form .input-wrapper:has(input:focus) {
  border-color: var(--primary);
}

footer form .input-wrapper input {
  background-color: transparent;
  flex-grow: 1;
  border: none;
  outline: none;
  color: var(--white);
  font-size: 20px;
  line-height: 26px;
  padding: 11px 20px;
  caret-color: var(--white);
  width: 90%;
}

footer form .input-wrapper input::placeholder {
  color: #ffffff66;
  font-size: 16px;
  line-height: 22px;
  font-weight: 400;
}

footer form .input-wrapper button {
  background-color: var(--primary);
  width: 40px;
  height: 40px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  padding: 5px;
  border: 1px solid var(--primary);
  outline: none;
  transition: all 0.3s ease;
}

footer form .input-wrapper button:hover {
  background-color: var(--white);
  border-color: var(--white);
}

footer form .input-wrapper button:hover svg path {
  fill: var(--primary);
}

footer form .input-wrapper button:active {
  transform: scale(0.95);
}

footer form + p {
  font-size: 12px;
  line-height: 18px;
  font-weight: 400;
  margin-top: 10px;
}

.copyright {
  padding: 20px 0;
  border-top: 1px solid #ffffff1a;
}

/****************
  17. Blog Hero
****************/

.blog-hero {
  background-image: url(../images/backgrounds/blog-hero-img.webp);
  background-size: cover;
  height: 540px;
  display: flex;
  align-items: end;
  position: relative;
}

.blog-hero::after {
  content: "";
  background-color: #000000b2;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.blog-nav {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.blog-nav li a {
  display: inline-block;
  text-decoration: none;
  color: var(--white);
  font-size: 24px;
  line-height: 30px;
  font-weight: 400;
  transition: all 0.3s ease;
}

.blog-nav li .active {
  color: var(--primary);
}

.blog-nav li:not(:last-child)::after {
  content: "-";
  display: inline-block;
  color: var(--white);
  font-size: 24px;
  line-height: 30px;
  font-weight: 400;
  margin-left: 6px;
}

/****************
  18. Blog Main
****************/

.blog-main {
  background-color: var(--white);
}

.blog-wrapper h4 {
  margin-bottom: 20px;
}

.blog-main .blog-card {
  border: 1px solid var(--gray);
}

.blog-main .blog-card .blog-content > p {
  margin-top: 10px;
  text-overflow: ellipsis;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.blog-main .blog-card .blog-content > h5 {
  height: 52px;
  text-overflow: ellipsis;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.social-links-blog {
  position: sticky;
  top: 90px;
  height: auto;
  padding: 10px;
  background-color: var(--mainbg);
  border-radius: 8px;
}

.social-links-blog ul {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.social-links-blog ul li a {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 60px;
  height: 60px;
  border-radius: 8px;
  background-color: var(--white);
  transition: all 0.3s ease;
}

.social-links-blog ul li a:hover {
  transform: scale(0.9);
}

.social-links-blog ul li a img {
  width: 32px;
  height: 32px;
}

.blog-left-content {
  margin-top: 30px;
  gap: 40px;
}

.blog-main-content > p:not(:last-child) {
  margin-bottom: 10px;
}

.blog-main-content > h5 {
  margin: 30px 0 10px;
}

.blog-main-content > ol {
  margin: 20px 0 30px;
  padding-left: 20px;
}

.blog-main-content ol li:not(:last-child) {
  margin-bottom: 20px;
}

.blog-main-content ol li > h6 {
  font-size: 16px;
  line-height: 22px;
  font-weight: 600;
  margin-bottom: 10px;
}

.blog-main-content ol li::marker {
  font-size: 16px;
  line-height: 22px;
  font-weight: 600;
}

.blog-main-content > ol li > p {
  margin-left: -20px;
  margin-bottom: 0;
}

.blog-main .box-wrapper {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 50px;
}

.sticky-box {
  padding: 20px;
}

.sticky-box.blue {
  background-color: var(--secondary);
}

.sticky-box.orange {
  background-color: var(--primary);
}

.sticky-box h3 {
  font-size: 36px;
  line-height: 42px;
  margin-bottom: 20px;
}

.sticky-box p {
  color: #ffffffb2;
  font-size: 20px;
  line-height: 26px;
  font-weight: 400;
}

.sticky-box a {
  margin-top: 20px;
}

.sticky-box > .icon {
  margin-bottom: 20px;
}

.blog-main form .input-wrapper {
  background-color: transparent;
  border: 1px solid #ffffff80;
  display: flex;
  align-items: center;
  gap: 10px;
  padding-right: 4px;
  transition: all 0.3s ease;
}

.blog-main form .input-wrapper:hover {
  border-color: var(--white);
}

.blog-main form .input-wrapper:has(input:focus) {
  border-color: var(--white);
}

.blog-main form > label {
  display: block;
  margin-bottom: 8px;
}

.blog-main form .input-wrapper input {
  background-color: transparent;
  flex-grow: 1;
  border: none;
  outline: none;
  color: var(--white);
  font-size: 20px;
  line-height: 26px;
  padding: 11px 20px;
  caret-color: var(--white);
  width: 90%;
}

.blog-main form .input-wrapper input::placeholder {
  color: #ffffff66;
  font-size: 16px;
  line-height: 22px;
  font-weight: 400;
}

.blog-main form .input-wrapper button {
  background-color: var(--white);
  width: 40px;
  height: 40px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  padding: 5px;
  border: 1px solid var(--white);
  box-shadow: 0px 0px 0px 5px #ffffff33;
  outline: none;
  transition: all 0.3s ease;
}

.blog-main form .input-wrapper button:hover {
  background-color: var(--secondary);
  border-color: var(--secondary);
}

.blog-main form .input-wrapper button svg path {
  fill: var(--secondary);
}

.blog-main form .input-wrapper button:hover svg path {
  fill: var(--white);
}

.blog-main form .input-wrapper button:active {
  transform: scale(0.95);
}

.blog-links {
  display: flex;
  gap: 0;
}

.switch-card {
  padding: 16px 0;
  width: 50%;
}

.switch-card.prev {
  padding-right: 20px;
}

.switch-card.next {
  border-left: 1px solid var(--gray);
  padding-left: 20px;
  text-align: right;
}

.switch-card > a {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 16px;
  line-height: 22px;
  font-weight: 600;
  margin-bottom: 10px;
}

.switch-card.next > a {
  flex-direction: row-reverse;
}

.switch-card.prev > a svg {
  transform: rotate(180deg);
}

.blog-writer {
  display: flex;
  gap: 20px;
  align-items: start;
  background-color: var(--mainbg);
  padding: 20px;
}

.writer-img img {
  width: 100px;
  height: 100px;
}

.writer-content span {
  display: inline-block;
  font-size: 16px;
  line-height: 22px;
  font-weight: 400;
  margin-bottom: 4px;
}

.writer-content h6 {
  margin-bottom: 4px;
}

.blog-wrapper {
  position: sticky;
  top: 90px;
}

/****************
  19. Slider
****************/

.slider-button-block {
  display: flex;
  align-items: center;
  gap: 12px;
}

.slider-button-block button {
  width: 50px;
  height: 50px;
  background-color: transparent;
  border: 1px solid var(--primary);
  border-radius: 8px;
  outline: 0;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  transition: all 0.3s ease;
}

.slider-button-block button svg {
  width: 24px;
  height: 24px;
}

.slider-button-block .owl-prev svg {
  transform: rotate(180deg);
}

.slider-button-block button:active {
  transform: scale(0.95);
}

.slider-button-block button:hover {
  background-color: var(--primary);
}

.slider-button-block button:hover svg path {
  fill: var(--white);
}

.blog-slider-btns {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-top: 20px;
}

.blog-slider-btns > button {
  background-color: transparent;
  border: none;
  color: var(--primary);
  font-size: 16px;
  line-height: 22px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  transition: all 0.3s ease;
}

.blog-slider-btns > button.owl-next {
  flex-direction: row-reverse;
}

.blog-slider-btns .dots {
  display: flex;
  align-items: center;
  gap: 10px;
}

.blog-slider-btns .dots .custom-dot {
  background-color: var(--icongray);
  border: none;
  outline: none;
  width: 50px;
  height: 2px;
  transition: all 0.3s ease;
}

.blog-slider-btns .dots .custom-dot.active {
  background-color: var(--secondary);
}

/****************
  20. Toast Message
****************/

.message-wrapper {
  display: flex;
  align-items: center;
  gap: 10px;
  background-color: #ffffff;
  border-radius: 5px;
  box-shadow: 0px 0px 20px 0px #1f1f1f33;
}

.message-image {
  width: 40px;
  height: 40px;
  background-color: #3bb537;
  border-radius: 50%;
  flex-shrink: 0;
}

.message-content h3 {
  color: #000000;
  font-size: 16px;
  line-height: 22px;
  font-weight: 700;
  margin-bottom: 0;
}

.message-content p {
  color: #7a7a7a;
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  margin-bottom: 0;
}

.message-wrapper button {
  width: 16px;
  height: 16px;
  padding: 0;
  border: none;
  outline: none;
  box-shadow: none;
}

.message-wrapper button svg {
  width: 14px;
  height: 14px;
  vertical-align: top;
}

.message-wrapper button svg path {
  fill: #999999;
}

.message-wrapper button:focus {
  box-shadow: none;
}

#success-toast {
  position: fixed;
  top: 66px;
  right: 20px;
  background-color: #ffffff;
  color: #ffffff;
  border-radius: 8px;
  box-shadow: 0px 0px 20px 0px #1f1f1f33;
  padding: 12px 20px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(30px);
  transition: all 0.3s ease-in-out;
  z-index: 9999;
}

#success-toast.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.btn-close {
  background: none;
  border: none;
  color: white;
  font-size: 16px;
  cursor: pointer;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0px 1000px transparent inset;
  transition: background-color 5000s ease-in-out 0s;
}

footer input:-webkit-autofill,
footer input:-webkit-autofill:hover,
footer input:-webkit-autofill:focus,
.blog-main input:-webkit-autofill,
.blog-main input:-webkit-autofill:hover,
.blog-main input:-webkit-autofill:focus {
  -webkit-text-fill-color: #ffffff;
}

.video-spacer {
  height: 200px; /* initial gap before video */
  transition: height 1s ease-in-out; /* smooth collapse */
}
.video-spacer.shrink {
  height: 0;
}