/******************************************************************
Template Name: Nexwebly
Description: Nexwebly Website Template
Author: Nexwebly
Author URI: https://nexwebly.com/
Version: 1.0
Created: Nexwebly
******************************************************************/
/*------------------------------------------------------------------
[Table of contents]

1.  Template default CSS
	1.1	Variables
	1.2	Mixins
	1.3	Flexbox
	1.4	Reset
2.  Helper Css
3.  Header Section
4.  Hero Section
5.  Services Section
6.  Counter Section
7.  Team Section
8.  Latest Section
9.  Contact
10.  Footer Style
-------------------------------------------------------------------*/
/*----------------------------------------*/
/* Template default CSS
/*----------------------------------------*/
html,
body {
  height: 100%;
  font-family: "Josefin Sans", sans-serif;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  color: #111111;
  font-weight: 400;
  font-family: "Play", sans-serif;
}

h1 {
  font-size: 70px;
}

h2 {
  font-size: 36px;
}

h3 {
  font-size: 30px;
}

h4 {
  font-size: 24px;
}

h5 {
  font-size: 18px;
}

h6 {
  font-size: 16px;
}

p {
  font-size: 16px;
  font-family: "Josefin Sans", sans-serif;
  color: #adadad;
  font-weight: 400;
  line-height: 26px;
  margin: 0 0 15px 0;
}

img {
  max-width: 100%;
}

input:focus,
select:focus,
button:focus,
textarea:focus {
  outline: none;
}

a:hover,
a:focus {
  text-decoration: none;
  outline: none;
  color: #fff;
}

ul,
ol {
  padding: 0;
  margin: 0;
}

/*---------------------
  Helper CSS
-----------------------*/
.section-title {
  margin-bottom: 50px;
}
.section-title.center-title {
  text-align: center;
}
.section-title.center-title h2:after {
  right: 0;
  margin: 0 auto;
}
.section-title span {
  color: #ffffff;
  display: block;
  font-size: 16px;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.section-title h2 {
  color: #ffffff;
  font-weight: 700;
  text-transform: uppercase;
  position: relative;
  padding-bottom: 25px;
}
.section-title h2:after {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 5px;
  width: 70px;
  background: #00bfe7;
  content: "";
}

.set-bg {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: top center;
}

.spad {
  padding-top: 100px;
  padding-bottom: 100px;
}

.text-white h1,
.text-white h2,
.text-white h3,
.text-white h4,
.text-white h5,
.text-white h6,
.text-white p,
.text-white span,
.text-white li,
.text-white a {
  color: #fff;
}

/* buttons */
.primary-btn {
  display: inline-block;
  font-size: 15px;
  font-family: "Play", sans-serif;
  font-weight: 700;
  padding: 14px 32px 12px;
  color: #3a4547;
  text-transform: uppercase;
  letter-spacing: 2px;
  position: relative;
  z-index: 1;
}
.primary-btn:hover:before {
  height: 100%;
  width: 100%;
  background-color: #00bfe7;
  
}
.primary-btn:hover:after {
  height: 100%;
  width: 100%;
  background-color: #00bfe7;
}
.primary-btn:before {
  position: absolute;
  left: 0;
  top: 0;
  height: 30px;
  width: 30px;
  border-left: 2px solid #00bfe7;
  border-top: 2px solid #00bfe7;
  content: "";
  z-index: -1;
  -webkit-transition: all, 0.7s;
  -o-transition: all, 0.7s;
  transition: all, 0.7s;
}
.primary-btn:after {
  position: absolute;
  right: 0;
  bottom: 0;
  height: 30px;
  width: 30px;
  border-right: 2px solid #00bfe7;
  border-bottom: 2px solid #00bfe7;
  content: "";
  z-index: -1;
  -webkit-transition: all, 0.7s;
  -o-transition: all, 0.7s;
  transition: all, 0.7s;
}

.primary-btn:hover:before,
.primary-btn:hover:after {
    height: 100%;
    width: 100%;
    border-color: #00bfe7;
    border-width: 2.5px;  /* Slightly thicker border on hover */
}

.site-btn {
  font-size: 15px;
  color: #ffffff;
  background: #00bfe7;
  font-family: "Play", sans-serif;
  font-weight: 700;
  border: none;
  display: inline-block;
  text-transform: uppercase;
  letter-spacing: 2px;
  padding: 14px 34px 12px;
  width: 100%;
}

/* Preloder */
#preloder {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 999999;
  background: #000;
}

.loader {
  width: 40px;
  height: 40px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -13px;
  margin-left: -13px;
  border-radius: 60px;
  animation: loader 0.8s linear infinite;
  -webkit-animation: loader 0.8s linear infinite;
}

@keyframes loader {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    border: 4px solid #f44336;
    border-left-color: transparent;
  }
  50% {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
    border: 4px solid #673ab7;
    border-left-color: transparent;
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
    border: 4px solid #f44336;
    border-left-color: transparent;
  }
}
@-webkit-keyframes loader {
  0% {
    -webkit-transform: rotate(0deg);
    border: 4px solid #f44336;
    border-left-color: transparent;
  }
  50% {
    -webkit-transform: rotate(180deg);
    border: 4px solid #673ab7;
    border-left-color: transparent;
  }
  100% {
    -webkit-transform: rotate(360deg);
    border: 4px solid #f44336;
    border-left-color: transparent;
  }
}
/*---------------------
  Header
-----------------------*/
.header {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  background: transparent;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  z-index: 9;
}

/* Find and replace the header navigation sections with this updated code */

.header__nav__option {
  text-align: right;
  padding: 20px 0;  /* Reduced padding */
  display: flex;
  align-items: center;
  justify-content: flex-end;
  height: auto;    /* Changed from fixed height */
}

.header__nav__menu {
  display: flex;
  align-items: center;
  margin-right: 45px;
  justify-content: flex-start;
  flex-wrap: nowrap;
  width: 100%;
}

.header__nav__menu ul {
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  flex-wrap: nowrap;  /* Allow items to wrap if needed */
}

.header__nav__menu ul li {
  list-style: none;
  display: inline-block;
  align-items: center;
  margin-right: 26px;
  position: relative;
  padding: 27px 0;  /* Added padding for better dropdown positioning */
  white-space: nowrap;
}

.header__nav__menu ul li:last-child {
  margin-right: 0;
}

/* Dropdown styles */
.header__nav__menu ul li .dropdown {
    position: absolute;
    left: 0;
    top: 100%;
    width: 140px;
    background: #ffffff;
    text-align: left;
    padding: 5px 0;  /* Reduced padding */
    z-index: 99;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

/* Show dropdown on hover */
.header__nav__menu ul li:hover .dropdown {
    opacity: 1;
    visibility: visible;
}

/* Dropdown items */
.header__nav__menu ul li .dropdown li {
    margin: 0;  /* Remove any margin */
    padding: 0;  /* Remove any padding */
    display: block;
}

/* Dropdown item links */
.header__nav__menu ul li .dropdown li a {
    color: #111111 !important;
    font-size: 14px;
    text-transform: capitalize;
    padding: 4px 20px;  /* Reduced padding */
    display: block;
    transition: all 0.3s;
}

/* Dropdown item hover effect */
.header__nav__menu ul li .dropdown li:hover a {
    color: #007bff !important;
    background-color: #f8f9fa;
    padding-left: 25px;
    transition: all 0.3s;
}

/* Social icons fixes */
.header__nav__social {
  display: inline-flex;
  align-items: center;
  position: relative;
  padding-left: 50px;
}

.header__nav__social:before {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 13px;
  width: 1px;
  background: rgba(225, 225, 225, 0.2);
  content: "";
}

.header__nav__social a {
  color: #ffffff;
  font-size: 15px;
  margin-right: 18px;
  display: inline-flex;
  align-items: center;
}

.header__nav__social a:last-child {
  margin-right: 0;
}

/* Logo adjustments */
.header__logo {
  padding: 8px 0;
}

.header__logo a {
  display: inline-block;
}

.header__logo img {
  max-height: 120px;
  width: 380px;
  object-fit: contain;
  vertical-align: middle;
}

/* Column adjustments */
.header .col-lg-2 {
  flex: 0 0 30%;
  max-width: 30%;
}

.header .col-lg-10 {
  flex: 0 0 70%;
  max-width: 70%;
}

/* Responsive adjustments */
@media only screen and (max-width: 991px) {
  .header__nav__option {
    padding: 15px 0;
  }
  
  .header__logo img {
    max-height: 80px;
    width: 280px;
  }
  
  .header__nav__menu ul li {
    padding: 15px 0;
  }
}

@media only screen and (max-width: 768px) {
  .header__nav__option {
    justify-content: center;
    padding: 10px 0;
  }
  
  .header__nav__menu {
    margin-right: 25px;
  }
  
  .header__nav__social {
    padding-left: 25px;
  }
  
  .header__logo img {
    max-height: 60px;
    width: 200px;
  }
  
  .header__nav__menu ul li {
    padding: 10px 0;
  }
}

/*---------------------
  Hero
-----------------------*/
.hero {
  position: relative;
  width: 100%;
}

.button-group {
  display: flex;
  gap: 15px;
  margin-top: 20px;
  flex-wrap: wrap;
}

.secondary-btn {
  background-color: transparent;
  color: #fff;
  border: 2px solid #fff;
  padding: 12px 24px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 500;
  transition: all 0.3s ease;
}

.secondary-btn:hover {
  background-color: #00bfe7;
  color: white;
  border-color: #00bfe7;
}

/* Original */
.hero__slider.owl-carousel .owl-item.active .hero__text span {
  top: 0;
  opacity: 1;
}
.hero__slider.owl-carousel .owl-item.active .hero__text h2 {
  top: 0;
  opacity: 1;
}
.hero__slider.owl-carousel .owl-item.active .hero__text .primary-btn {
  top: 0;
  opacity: 1;
}
.hero__slider.owl-carousel .owl-dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 45px;
  width: 100%;
  max-width: 1140px;
  margin: 0 auto;
}
.hero__slider.owl-carousel .owl-dots button {
  color: #adadad;
  font-size: 18px;
  font-family: "Play", sans-serif;
  margin-right: 16px;
  position: relative;
  display: inline-block;
}
.hero__slider.owl-carousel .owl-dots button.active {
  color: #ffffff;
}
.hero__slider.owl-carousel .owl-dots button.active:after {
  background: #ffffff;
  height: 2px;
}
.hero__slider.owl-carousel .owl-dots button:after {
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 100%;
  height: 1px;
  background: rgba(255, 255, 255, 0.3);
  content: "";
}
.hero__slider.owl-carousel .owl-dots button:last-child {
  margin-right: 0;
}

.hero__item {
  height: 684px;
  padding-top: 255px;
  position: relative;
    overflow: hidden;
}

.hero__bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 1;
}

.hero__item .container {
  position: relative;
  z-index: 2;
}

.hero__text span {
  color: #ffffff;
  display: block;
  font-size: 15px;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 18px;
  position: relative;
  top: 100px;
  opacity: 0;
  -webkit-transition: all, 0.3s;
  -o-transition: all, 0.3s;
  transition: all, 0.3s;
}
.hero__text h2 {
  color: #ffffff;
  font-size: 60px;
  font-weight: 700;
  line-height: 70px;
  text-transform: uppercase;
  margin-bottom: 38px;
  position: relative;
  top: 100px;
  opacity: 0;
  -webkit-transition: all, 0.5s;
  -o-transition: all, 0.5s;
  transition: all, 0.5s;
}
.hero__text .primary-btn {
  position: relative;
  top: 100px;
  opacity: 0;
  -webkit-transition: all, 0.7s;
  -o-transition: all, 0.7s;
  transition: all, 0.7s;
  color: #ffffff !important;
  border-color: #ffffff;
}

/* What we do section */
/* Style for primary button in services section */
.services__title .primary-btn {
  color: #ffffff !important; /* White text */
  background-color: #00bfe7; /* Your theme blue color */
  border: none;
  transition: all 0.3s ease;
}

.services__title .primary-btn:before,
.services__title .primary-btn:after {
  border-color: #00bfe7;
}

.services__title .primary-btn:hover {
  background-color: #0099b8; /* Slightly darker blue on hover */
  color: #ffffff !important;
}

.services__title .primary-btn:hover:before,
.services__title .primary-btn:hover:after {
  border-color: #0099b8;
}


/*--------------
  How it works section
-----------------------*/
.how-it-works {
  background: #0a0119;  /* Matching your dark theme background */
  padding: 100px 0;  /* Matching your spad class */
}

.how-it-works .section-title {
  text-align: center;
  margin-bottom: 50px;
}

.how-it-works .section-title h2 {
  color: #ffffff;
  font-weight: 700;
  text-transform: uppercase;
  position: relative;
  padding-bottom: 25px;
}

.how-it-works .section-title h2:after {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 5px;
  width: 70px;
  background: #00bfe7;
  content: "";
  margin: 0 auto;  /* This centers the line */
}

.how-it-works .section-title p {
  color: #adadad;
  font-size: 16px;
  margin-top: 15px;
}

.hiw__item {
  background: #f8f8f8;
  padding: 30px;
  border-radius: 10px;
  text-align: center;
  margin-bottom: 30px;
  transition: 0.3s ease;
}

.hiw__item h4 {
  color: #111111;
  font-weight: 600;
  margin-bottom: 15px;
}

.hiw__item p {
  color: #666666;
  margin-bottom: 0;
}

.hiw__item:hover {
  background-color: #00bfe7;
  transform: translateY(-10px);
}

.hiw__item:hover h4,
.hiw__item:hover p {
  color: white;
}

/*---------------------
  Work
-----------------------*/
.work {
  overflow: hidden;
  background: #100028;
}

.work__gallery {
  margin-right: -10px;
}

.work__item {
  height: 311px !important;
  width: calc(16.67% - 10px);
  margin-right: 10px;
  margin-bottom: 10px;
  float: left;
  position: relative;
  overflow: hidden;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.work__item:hover .work__item__hover {
  bottom: 0;
}
.work__item.large__item {
  height: 633px !important;
  width: calc(33.33% - 10px);
}
.work__item.wide__item {
  width: calc(33.33% - 10px);
  height: 311px !important;
}
.work__item .play-btn {
  display: inline-block;
  color: #ffffff;
  font-size: 20px;
  height: 50px;
  width: 50px;
  line-height: 50px;
  text-align: center;
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 50%;
}

.grid-sizer {
  width: calc(16.67% - 10px);
}

.work__item__hover {
  background: rgba(0, 0, 0, 0.5);
  position: absolute;
  left: 0;
  bottom: -300px;
  width: 100%;
  padding: 25px 30px 20px;
  -webkit-transition: all, 0.5s;
  -o-transition: all, 0.5s;
  transition: all, 0.5s;
}
.work__item__hover h4 {
  font-size: 22px;
  color: #ffffff;
  font-weight: 700;
}
.work__item__hover ul li {
  color: #adadad;
  list-style: none;
  font-size: 16px;
  margin-right: 23px;
  position: relative;
  display: inline-block;
}
.work__item__hover ul li:after {
  position: absolute;
  right: -18px;
  top: 1px;
  content: "/";
}
.work__item__hover ul li:last-child {
  margin-right: 0;
}
.work__item__hover ul li:last-child:after {
  display: none;
}

/*---------------------
  Counter
-----------------------*/
.counter {
  background: #100028;
  height: 840px;
  padding-top: 380px;
  overflow: hidden;
}

.counter__content {
  padding: 0px 50px;
}

.counter__item {
  background: #1a083d;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
      transform: rotate(45deg);
  height: 255px;
  width: 255px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  text-align: center;
  position: relative;
  z-index: 1;
}
.counter__item::before {
  position: absolute;
  left: -1px;
  bottom: -2px;
  height: 636px;
  width: 636px;
  border-left: 1px solid #333333;
  border-top: 1px solid #333333;
  content: "";
  z-index: -1;
}
.counter__item.second__item {
  margin-top: -185px;
}
.counter__item.second__item:before {
  left: -316px;
  bottom: -65px;
  border-right: 1px solid #333333;
  border-bottom: 1px solid #333333;
  border-left: none;
  border-top: none;
}
.counter__item.four__item {
  margin-top: -185px;
}
.counter__item.four__item:before {
  left: -380px;
  bottom: -380px;
  border-right: 1px solid #333333;
  border-bottom: 1px solid #333333;
  border-left: none;
  border-top: none;
}
.counter__item.third__item:before {
  left: -65px;
  bottom: -317px;
}

.counter__item__text {
  -webkit-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
      transform: rotate(-45deg);
}
.counter__item__text h2 {
  font-size: 60px;
  color: #ffffff;
  font-weight: 700;
  margin-bottom: 6px;
  margin-top: 18px;
}
.counter__item__text p {
  color: #ffffff;
  margin-bottom: 0;
}

/*---------------------
  Team
-----------------------*/
.team {
  padding-bottom: 90px;
}

.section-title.team__title {
  margin-bottom: 90px;
}

.team__item {
  height: 390px;
  position: relative;
  overflow: hidden;
}
.team__item:hover .team__item__text {
  bottom: 0;
}
.team__item.team__item--second {
  margin-top: -60px;
}
.team__item.team__item--third {
  margin-top: -120px;
}
.team__item.team__item--four {
  margin-top: -180px;
}

.team__item__text {
  text-align: center;
  position: absolute;
  left: 0;
  bottom: -500px;
  width: 100%;
  padding: 50px 0 30px;
  z-index: 1;
  -webkit-transition: all, 0.5s;
  -o-transition: all, 0.5s;
  transition: all, 0.5s;
}
.team__item__text:before {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  background: url(../img/team/team-hover.png);
  content: "";
  z-index: -1;
}
.team__item__text h4 {
  font-size: 22px;
  color: #ffffff;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.team__item__text p {
  color: #ffffff;
  font-weight: 300px;
  margin-bottom: 12px;
}
.team__item__text .team__item__social a {
  color: #ffffff;
  display: inline-block;
  font-size: 15px;
  margin-right: 18px;
}
.team__item__text .team__item__social a:last-child {
  margin-right: 0;
}

.team__btn {
  position: absolute;
  right: 0;
  bottom: 0;
}

/*---------------------
    Latest Blog Section
-----------------------*/
.latest {
  background: url('../img/blogbg.jpg') no-repeat center center;
  background-size: cover;
  padding: 40px 0; /* Reduced from 60px */
  position: relative;
  min-height: auto; /* Removes any minimum height constraint */
  height: auto; /* Allows height to be determined by content */
  padding-top: 80px;  /* Reduced from original padding */
  padding-bottom: 80px;
}

.latest::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
}

.latest .container {
  position: relative;
  z-index: 2;
}

/* Section Title Styling */
.section-title.center-title {
  text-align: center;
  margin-bottom: 30px;
}

.section-title span {
  color: #00ffff;
  font-size: 18px;
  font-weight: 600;
  display: block;
  margin-bottom: 8px;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  letter-spacing: 1px;
}

.section-title h2 {
  color: #ffffff;
  font-size: 42px;
  font-weight: 700;
  margin-bottom: 0;
  text-shadow: 2px 2px 4px rgba(0, 191, 231, 0.3);
  letter-spacing: 1px;
}

/* Blog Item Container */
.blog__item {
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 15px;
  overflow: hidden;
  transition: all 0.3s;
  margin-bottom: 25px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  height: auto;
  display: flex;
  flex-direction: column;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
  min-height: 400px;
}

.blog__item:hover {
  transform: translateY(-10px);
  background: rgba(255, 255, 255, 0.2);
  box-shadow: 0 15px 30px rgba(0, 191, 231, 0.2);
  border: 1px solid rgba(0, 191, 231, 0.3);
}

/* Blog Image Container */
.blog__item__pic {
  position: relative;
  width: 100%;
  height: 180px;
  overflow: hidden;
}

.blog__item__pic img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: all 0.5s ease-in-out;
  filter: brightness(1.1);
}

.blog__item:hover .blog__item__pic img {
  transform: scale(1.1);
  filter: brightness(1.2);
}

/* Blog Content Area */
.blog__item__content {
  padding: 20px;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.15) 100%);
}

/* Category Tag */
.blog__category {
  display: inline-block;
  font-size: 14px;
  color: #ffffff;
  background: rgba(0, 191, 231, 0.3);
  padding: 6px 16px;
  border-radius: 25px;
  margin-bottom: 10px;
  transition: all 0.3s;
  font-weight: 600;
  letter-spacing: 0.5px;
  box-shadow: 0 2px 10px rgba(0, 191, 231, 0.2);
}

.blog__item:hover .blog__category {
  background: rgba(0, 191, 231, 0.5);
  box-shadow: 0 4px 15px rgba(0, 191, 231, 0.3);
}

/* Blog Title */
.blog__item h4 {
  color: #ffffff;
  font-weight: 600;
  font-size: 20px;
  line-height: 1.3;
  margin-bottom: 10px;
  transition: all 0.3s;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
}

.blog__item:hover h4 {
  color: #00ffff;
}

/* Meta Information */
.blog__item ul {
  margin: 0;
  padding: 0;
  list-style: none;
  margin-bottom: 10px;
}

.blog__item ul li {
  color: #ffffff;
  font-size: 14px;
  margin-right: 20px;
  display: inline-block;
  position: relative;
  opacity: 0.9;
}

.blog__item ul li:last-child {
  margin-right: 0;
}

.blog__item ul li i {
  color: #ffffff;
  margin-right: 5px;
  opacity: 1;
}

/* Blog Text */
.blog__item p {
  color: #e6e6e6;
  font-size: 14px;
  line-height: 1.5;
  margin-bottom: 15px;
  flex-grow: 1;
}

/* Read More Link */
.read-more {
  color: #ffffff;
  font-size: 14px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  transition: all 0.3s;
  margin-top: auto;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.read-more span {
  margin-left: 8px;
  transition: all 0.3s;
}

.read-more:hover {
  color: #00ffff;
  text-shadow: 0 0 10px rgba(0, 255, 255, 0.5);
}

.read-more:hover span {
  transform: translateX(8px);
}

/* Carousel Navigation */
.latest__slider.owl-carousel {
  position: relative;
}

.latest__slider.owl-carousel .owl-nav button {
  font-size: 24px;
  color: #ffffff;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0, 191, 231, 0.3);
  width: 50px;
  height: 50px;
  border-radius: 50%;
  transition: all 0.3s;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
  box-shadow: 0 0 20px rgba(0, 191, 231, 0.2);
}

.latest__slider.owl-carousel .owl-nav button:hover {
  background: rgba(0, 191, 231, 0.8);
  box-shadow: 0 0 30px rgba(0, 191, 231, 0.4);
}

.latest__slider.owl-carousel .owl-nav button.owl-prev {
  left: -60px;
}

.latest__slider.owl-carousel .owl-nav button.owl-next {
  right: -60px;
}

/* Carousel Dots */
.latest__slider.owl-carousel .owl-dots {
  text-align: center;
  margin-top: 20px;
}

.latest__slider.owl-carousel .owl-dots button {
  width: 12px;
  height: 12px;
  background: rgba(255, 255, 255, 0.4);
  border-radius: 50%;
  margin: 0 5px;
  transition: all 0.3s;
  box-shadow: 0 0 10px rgba(0, 191, 231, 0.2);
}

.latest__slider.owl-carousel .owl-dots button.active {
  background: #00ffff;
  width: 24px;
  border-radius: 6px;
  box-shadow: 0 0 15px rgba(0, 255, 255, 0.4);
}

/* Responsive Styles */
@media only screen and (max-width: 1200px) {
  .latest__slider.owl-carousel .owl-nav button.owl-prev {
      left: -30px;
  }
  
  .latest__slider.owl-carousel .owl-nav button.owl-next {
      right: -30px;
  }
}

@media only screen and (max-width: 991px) {
  .section-title h2 {
      font-size: 34px;
  }
  
  .blog__item__pic {
      height: 160px;
  }
  
  .blog__item {
      min-height: 380px;
  }
  
  .latest__slider.owl-carousel .owl-nav button {
      display: none;
  }
}

@media only screen and (max-width: 767px) {
  .latest {
      padding: 40px 0;
  }
  
  .section-title h2 {
      font-size: 28px;
  }
  
  .blog__item__pic {
      height: 150px;
  }
  
  .blog__item {
      min-height: 350px;
  }
  
  .blog__item__content {
      padding: 15px;
  }
}

@media only screen and (max-width: 575px) {
  .section-title h2 {
      font-size: 24px;
  }
  
  .blog__category {
      font-size: 12px;
      padding: 4px 12px;
  }
  
  .blog__item ul li {
      font-size: 12px;
      margin-right: 15px;
  }
  
  .blog__item__pic {
      height: 140px;
  }
  
  .blog__item {
      min-height: 330px;
  }
}


/*original*/

.latest__slider.owl-carousel .owl-item .col-lg-4 {
  max-width: 100%;
}
/*---------------------
  Call To Action
-----------------------*/
.callto {
  padding: 80px 0;
  position: relative;
  overflow: hidden;
}

.callto:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
}

.callto .container {
  position: relative;
  z-index: 2;
}

.callto__text {
  text-align: left;
}

.callto__text h2 {
  color: #ffffff;
  font-size: 42px;
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 22px;
  text-transform: capitalize;
}

.callto__text p {
  color: #ffffff;
  font-size: 20px;
  margin-bottom: 35px;
  opacity: 0.9;
}

.callto__text .primary-btn {
  background: #ffffff;
  color: #5768AD;
  padding: 14px 35px;
  font-size: 16px;
  font-weight: 600;
  text-transform: uppercase;
  border-radius: 5px;
  transition: all 0.3s;
  border: 2px solid transparent;
}

.callto__text .primary-btn:hover {
  background: transparent;
  color: #ffffff;
  border-color: #ffffff;
}

/* Responsive Styles */
@media only screen and (max-width: 991px) {
  .callto__text h2 {
      font-size: 36px;
  }
}

@media only screen and (max-width: 767px) {
  .callto {
      padding: 60px 0;
  }
  
  .callto__text h2 {
      font-size: 30px;
  }
  
  .callto__text p {
      font-size: 18px;
  }
}

@media only screen and (max-width: 575px) {
  .callto__text h2 {
      font-size: 26px;
  }
  
  .callto__text p {
      font-size: 16px;
  }
  
  .callto__text .primary-btn {
      padding: 12px 25px;
      font-size: 14px;
  }
}

/*---------------------
  Footer
-----------------------*/
.footer {
  background: #0a0119;
}

.footer__top {
  padding: 30px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.footer__top__logo {
  line-height: 40px;
}
.footer__top__logo a {
  display: inline-block;
}

.footer__top__social {
  text-align: right;
}
.footer__top__social a {
  display: inline-block;
  font-size: 15px;
  color: #ffffff;
  height: 45px;
  width: 45px;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 50%;
  line-height: 44px;
  text-align: center;
  margin-right: 8px;
  transition: all 0.3s;
}
.footer__top__social a:hover {
  background: #00bfe7;
  transform: translateY(-3px);
}
.footer__top__social a:last-child {
  margin-right: 0;
}

.footer__option {
  padding-bottom: 35px;
  padding-top: 75px;
}

.footer__option__item {
  margin-bottom: 35px;
}
.footer__option__item h5 {
  color: #ffffff;
  font-weight: 700;
  margin-bottom: 35px;
}
.footer__option__item p {
  font-weight: 300;
  margin-bottom: 20px;
}
.footer__option__item .read__more {
  font-size: 16px;
  color: #ffffff;
}
.footer__option__item .read__more span {
  font-size: 16px;
  color: #ffffff;
  opacity: 0.5;
  position: relative;
  top: 4px;
  margin-left: 5px;
}
.footer__option__item ul li {
  list-style: none;
}
.footer__option__item ul li a {
  color: #adadad;
  font-size: 16px;
  font-weight: 300;
  line-height: 32px;
}
.footer__option__item form {
  position: relative;
}
.footer__option__item form input {
  height: 50px;
  width: 100%;
  padding-left: 20px;
  border: 1px solid #544E5E;
  background: transparent;
  font-size: 16px;
  color: #adadad;
}
.footer__option__item form input::-webkit-input-placeholder {
  color: #adadad;
}
.footer__option__item form input::-moz-placeholder {
  color: #adadad;
}
.footer__option__item form input:-ms-input-placeholder {
  color: #adadad;
}
.footer__option__item form input::-ms-input-placeholder {
  color: #adadad;
}
.footer__option__item form input::placeholder {
  color: #adadad;
}
.footer__option__item form button {
  font-size: 20px;
  color: #ffffff;
  border: none;
  height: 50px;
  width: 50px;
  background: #00bfe7;
  line-height: 50px;
  text-align: center;
  position: absolute;
  right: 0;
  top: 0;
}

.footer__copyright {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding: 30px 0;
}

.footer__copyright__text {
  margin-bottom: 0;
  font-weight: 300;
}
.footer__copyright__text i {
  color: #00bfe7;
}
.footer__copyright__text a {
  color: #00bfe7;
}

/*---------------------
  Breadcrumb
-----------------------*/
.breadcrumb-option {
  padding-top: 180px;
}

.breadcrumb__text h2 {
  color: #ffffff;
  font-size: 50px;
  font-weight: 700;
  margin-bottom: 12px;
}

.breadcrumb__links a {
  font-size: 16px;
  color: #ffffff;
  font-weight: 300;
  display: inline-block;
  margin-right: 32px;
  position: relative;
}
.breadcrumb__links a:after {
  position: absolute;
  right: -22px;
  top: -3px;
  content: "/";
  color: #adadad;
  font-size: 20px;
}
.breadcrumb__links span {
  font-size: 16px;
  color: #adadad;
  font-weight: 300;
  display: inline-block;
}

/*---------------------
  About
-----------------------*/
/* About us new menu */
/*---------------------
    About Section Styles
-----------------------*/
section.about {
  background: url('../img/about/aboutusbg.jpg') no-repeat center center fixed;
  background-size: cover;
  padding: 120px 0;
  position: relative;
  will-change: transform; /* Performance optimization */
}

/* Timeline Styles */
.about-timeline {
  position: relative;
  padding: 40px 0;
}

/* Simplified overlay */
section.about::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
      rgba(16, 0, 40, 0.85),
      rgba(0, 191, 231, 0.25)
  );
  z-index: 1;
}

/* Ensure content appears above the overlay */
section.about .container {
  position: relative;
  z-index: 2;
}

/* Second overlay layer - gradient effect */
section.about::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    45deg,
    rgba(16, 0, 40, 0.85),
    rgba(0, 191, 231, 0.35)
  );
  opacity: 0.8;
  z-index: 1;
}

/* Additional soft glow effect */
.about-glow {
  position: absolute;
  top: -50%;
  left: -50%;
  right: -50%;
  bottom: -50%;
  background: radial-gradient(
      circle at center,
      rgba(0, 191, 231, 0.15) 0%,
      rgba(16, 0, 40, 0.3) 70%
  );
  z-index: 1;
  pointer-events: none;
}

/* Timeline vertical line */
.about-timeline::before {
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  height: 100%;
  background: #00bfe7;
  opacity: 0.5;
  z-index: 2;
}



/* Timeline Items */
.timeline-item {
  position: relative;
  margin-bottom: 60px;
  z-index: 3;
}

.timeline-item:nth-child(1) { animation-delay: 0.1s; }
.timeline-item:nth-child(2) { animation-delay: 0.2s; }
.timeline-item:nth-child(3) { animation-delay: 0.3s; }
.timeline-item:nth-child(4) { animation-delay: 0.4s; }

.year {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  background: #00bfe7;
  color: #fff;
  padding: 10px 20px;
  border-radius: 25px;
  font-weight: 700;
  z-index: 1;
}

/* Enhanced milestone cards */
.milestone {
  width: 45%;
  margin-left: auto;
  /* More solid background */
  background: rgba(255, 255, 255, 0.1);
  padding: 30px;
  border-radius: 15px;
  margin-top: 40px;
  transition: all 0.3s ease;
  /* Add subtle border */
  border: 1px solid rgba(0, 191, 231, 0.2);
  /* Add box shadow for depth */
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}


.timeline-item:nth-child(even) .milestone {
  margin-left: 0;
  margin-right: auto;
}

/* Hover effect */
.milestone:hover {
  transform: translateY(-5px);
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(0, 191, 231, 0.4);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
}

.milestone h3 {
  color: #00bfe7;
  margin-bottom: 15px;
  font-size: 24px;
}

.milestone p {
  color: #ffffff;
  opacity: 0.8;
  margin-bottom: 20px;
}

/* Achievement Styles */
/* Common styles for all achievements */
.achievement, .achievement-box {
  text-align: center;
  padding: 15px;
  background: rgba(0, 191, 231, 0.1);
  border-radius: 10px;
  border: 1px solid rgba(0, 191, 231, 0.2);
}

/* Single achievement style (for timeline milestones) */
.achievement .number {
  font-size: 36px;
  color: #ffffff; /* Changed to white */
  font-weight: 700;
  display: block;
  margin-bottom: 5px;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.achievement .label {
  color: #ffffff; /* Changed to white */
  opacity: 1; /* Full opacity */
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* Achievement boxes style (for the grid) */
.achievement-box .number {
  font-size: 28px;
  color: #ffffff;
  font-weight: 700;
  margin-bottom: 5px;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.achievement-box .label {
  color: #ffffff;
  opacity: 1;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* Hover effects */
.achievement:hover, .achievement-box:hover {
  background: rgba(0, 191, 231, 0.2);
  transform: translateY(-3px);
  transition: all 0.3s ease;
}

/* Value Card Styles */
.value-card {
  background: rgba(255, 255, 255, 0.05);
  padding: 40px 30px;
  border-radius: 15px;
  text-align: center;
  margin-bottom: 30px;
  transition: all 0.3s ease;
}

.value-card:hover {
  background: rgba(255, 255, 255, 0.1);
  transform: translateY(-10px);
}

.value-card .icon {
  font-size: 40px;
  color: #00bfe7;
  margin-bottom: 20px;
}

.value-card h3 {
  color: #ffffff;
  margin-bottom: 15px;
}

.value-card p {
  color: #ffffff;
  opacity: 0.8;
}

/* Expertise Card Styles */
.expertise-card {
  background: rgba(255, 255, 255, 0.05);
  padding: 30px;
  border-radius: 15px;
  margin-bottom: 30px;
}

.expertise-card h3 {
  color: #00bfe7;
  margin-bottom: 20px;
}

.expertise-card ul {
  list-style: none;
  padding: 0;
}

.expertise-card ul li {
  color: #ffffff;
  opacity: 0.8;
  margin-bottom: 15px;
  padding-left: 25px;
  position: relative;
}

.expertise-card ul li::before {
  content: '→';
  color: #00bfe7;
  position: absolute;
  left: 0;
}

/* Animations */
@keyframes fadeInUp {
  from {
      opacity: 0;
      transform: translateY(20px);
  }
  to {
      opacity: 1;
      transform: translateY(0);
  }
}

/* Responsive Styles */
@media (max-width: 991px) {
  .about-timeline::before {
      left: 20px;
  }
  
  .year {
      left: 20px;
      transform: none;
  }
  
  .milestone {
      width: 85%;
      margin-left: 50px !important;
  }
  
  .achievements-grid {
      grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 576px) {
  .achievements-grid {
      grid-template-columns: 1fr;
  }
  
  .milestone {
      width: 90%;
      margin-left: 40px !important;
      padding: 20px;
  }
}

/* Journey Section Styles */
.section-title.center-title h2:not(.testimonial .section-title h2) {
  color: #ffffff;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.section-title.center-title span:not(.testimonial .section-title span) {
  color: #ffffff;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
}

/* Core Values & Expertise Section */
.value-card h3,
.expertise-card h3 {
  color: #ffffff;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

/* What Sets Us Apart Section */
.why-choose .section-title h2,
.why-choose .section-title span {
  color: #ffffff;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

/* original */
.about {
  background: #100028;
  padding-bottom: 150px;
}

.about__pic__item {
  height: 235px;
  margin-right: -10px;
  margin-bottom: 20px;
}
.about__pic__item.about__pic__item--large {
  height: 490px;
}

.about__text {
  padding-left: 30px;
}
.about__text .services__item .services__item__icon:after {
  border-color: #281A3E;
}

.about__text__desc {
  margin-top: -10px;
}

/*---------------------
  Testimonial
-----------------------*/
.testimonial {
  background: #f8f9fa;  /* Light background color */
}

.testimonial__item {
  background: #333;
  padding: 30px;
  border-radius: 10px;
  box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1);
}

.testimonial__text p {
  color: #333;
  margin-bottom: 25px;
  font-size: 16px;
  line-height: 28px;
}

.testimonial__author__text h5 {
  color: #1a1a1a;
  font-weight: 600;
  font-size: 18px;
  margin-bottom: 5px;
}

.testimonial__author__text span {
  color: #666;
  font-size: 14px;
}

.section-title.center-title span {
  color: #333;
}

.section-title.center-title h2 {
  color: #1a1a1a;
}

/* Update carousel dots for better visibility */
.testimonial__slider.owl-carousel .owl-dots button {
  background: #ccc;
}

.testimonial__slider.owl-carousel .owl-dots button.active {
  background: #333;
}

.testimonial__slider.owl-carousel .owl-item .col-lg-4 {
  max-width: 100%;
}
.testimonial__slider.owl-carousel .owl-dots {
  text-align: center;
  padding-top: 35px;
}
.testimonial__slider.owl-carousel .owl-dots button {
  height: 8px;
  width: 8px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  margin-right: 10px;
}
.testimonial__slider.owl-carousel .owl-dots button.active {
  background: #00bfe7;
}
.testimonial__slider.owl-carousel .owl-dots button:last-child {
  margin-right: 0;
}

.testimonial__text {
  padding: 30px 40px 25px 30px;
  border: 1px solid #3D3A64;
  margin-bottom: 25px;
  position: relative;
  z-index: 9;
}
.testimonial__text P {
  color: #ffffff;
  font-size: 18px;
  font-weight: 300;
  font-style: italic;
  line-height: 30px;
  margin-bottom: 0;
}

.testimonial__author {
  padding-left: 30px;
}

.testimonial__author__pic {
  float: left;
  margin-right: 20px;
}
.testimonial__author__pic img {
  height: 50px;
  width: 50px;
  border-radius: 50%;
}

.testimonial__author__text {
  overflow: hidden;
}
.testimonial__author__text h5 {
  color: #ffffff;
  font-weight: 700;
  margin-bottom: 8px;
}
.testimonial__author__text span {
  color: #ffffff;
  font-size: 14px;
  font-weight: 300px;
  display: inline-block;
}

/*---------------------
  Services
-----------------------*/

/* Process Section Styles */
.services-process {
  background: #100028;
  padding-bottom: 70px;
}

.process__item {
  text-align: center;
  margin-bottom: 30px;
  padding: 40px 20px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.05);
  transition: all 0.3s;
}

.process__item:hover {
  transform: translateY(-10px);
  background: rgba(255, 255, 255, 0.1);
}

.process__item__icon {
  position: relative;
  height: 90px;
  width: 90px;
  margin: 0 auto 30px;
  background: rgba(0, 191, 231, 0.1);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.process__item__icon span {
  position: absolute;
  top: -10px;
  right: -10px;
  height: 35px;
  width: 35px;
  background: #00bfe7;
  border-radius: 50%;
  font-size: 16px;
  color: #ffffff;
  line-height: 35px;
  text-align: center;
}

.process__item__icon i {
  font-size: 36px;
  color: #00bfe7;
}

.process__item h4 {
  color: #ffffff;
  font-weight: 700;
  margin-bottom: 15px;
  font-size: 22px;
}

.process__item p {
  margin-bottom: 0;
  color: #adadad;
}

/* Pricing Section Styles */
.pricing {
  background: #100028;
  padding-bottom: 70px;
}

.pricing__item {
  text-align: center;
  background: rgba(255, 255, 255, 0.05);
  padding: 40px 30px 50px;
  border-radius: 10px;
  margin-bottom: 30px;
  position: relative;
  overflow: hidden;
  transition: all 0.3s;
}

.pricing__item:hover {
  transform: translateY(-10px);
  background: rgba(255, 255, 255, 0.1);
}

.pricing__item.featured {
  border: 2px solid #00bfe7;
}

.pricing__item .popular {
  position: absolute;
  right: -32px;
  top: 20px;
  background: #00bfe7;
  color: #ffffff;
  padding: 5px 40px;
  transform: rotate(45deg);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 2px;
}

.pricing__item h3 {
  color: #ffffff;
  font-weight: 700;
  margin-bottom: 25px;
  font-size: 24px;
}

.pricing__price {
  margin-bottom: 30px;
}

.pricing__price h4 {
  font-size: 60px;
  color: #00bfe7;
  font-weight: 700;
  margin-bottom: 0;
}

.pricing__price h4 sup {
  font-size: 20px;
  position: relative;
  top: -30px;
}

.pricing__price h4 span {
  font-size: 16px;
  color: #adadad;
  font-weight: 400;
}

.pricing__features {
  margin-bottom: 40px;
}

.pricing__features li {
  font-size: 16px;
  color: #adadad;
  line-height: 40px;
  list-style: none;
}

.pricing__features li i {
  color: #00bfe7;
  margin-right: 10px;
}

.pricing__features li.na {
  color: #575757;
  text-decoration: line-through;
}

.pricing__features li.na i {
  color: #575757;
}

/* Technologies Section Styles */
.technologies {
  background: #100028;
  padding-bottom: 70px;
}

.tech__item {
  text-align: center;
  margin-bottom: 30px;
  padding: 30px 20px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 10px;
  transition: all 0.3s;
}

.tech__item:hover {
  transform: translateY(-10px);
  background: rgba(255, 255, 255, 0.1);
}

.tech__item i {
  font-size: 48px;
  color: #00bfe7;
  margin-bottom: 20px;
  display: block;
}

.tech__item h5 {
  color: #ffffff;
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 0;
}

/* Process Section Icon Updates */
.process__item__icon i {
  font-size: 32px;
  color: #00bfe7;
}

@media only screen and (max-width: 767px) {
  .tech__item i {
      font-size: 36px;
  }
  
  .process__item__icon i {
      font-size: 24px;
  }
}

/* FAQ Section Styles */
.faq {
  background: #100028;
  padding-bottom: 70px;
}

.faq__item {
  background: rgba(255, 255, 255, 0.05);
  padding: 30px;
  border-radius: 10px;
  margin-bottom: 30px;
  transition: all 0.3s;
}

.faq__item:hover {
  background: rgba(255, 255, 255, 0.1);
}

.faq__item h4 {
  color: #ffffff;
  font-weight: 700;
  margin-bottom: 15px;
  font-size: 20px;
}

.faq__item p {
  color: #adadad;
  margin-bottom: 0;
  font-size: 16px;
  line-height: 26px;
}

/* Responsive Styles */
@media only screen and (max-width: 991px) {
  .pricing__item {
      padding: 30px 20px 40px;
  }

  .process__item {
      margin-bottom: 40px;
  }

  .tech__item {
      margin-bottom: 30px;
  }
}

@media only screen and (max-width: 767px) {
  .pricing {
      padding-top: 70px;
  }

  .pricing__item {
      margin-bottom: 30px;
  }

  .pricing__price h4 {
      font-size: 50px;
  }

  .pricing__price h4 sup {
      font-size: 18px;
      top: -25px;
  }

  .process__item__icon {
      height: 70px;
      width: 70px;
  }

  .process__item__icon i {
      font-size: 28px;
  }

  .tech__item img {
      height: 50px;
  }
}

@media only screen and (max-width: 479px) {
  .pricing {
      padding-top: 50px;
  }

  .pricing__item {
      padding: 20px 15px 30px;
  }

  .pricing__price h4 {
      font-size: 40px;
  }

  .pricing__features li {
      font-size: 14px;
  }

  .faq__item {
      padding: 20px;
  }

  .faq__item h4 {
      font-size: 18px;
  }
}


.services {
  background: #100028;
  padding-bottom: 60px;
  padding-top: 110px;
}

.services__title p {
  margin-bottom: 45px;
  color: #ffffff;
}

.services__item {
  margin-bottom: 45px;
  
}
.services__item:hover .services__item__icon:after {
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
      transform: rotate(45deg);
}
.services__item h4 {
  color: #ffffff;
  font-size: 22px;
  font-weight: 700;
  margin-top: 26px;
  margin-bottom: 18px;
}
.services__item p {
  margin-bottom: 0;
}

.services__item__icon {
  position: relative;
  height: 70px;
  width: 70px;
  line-height: 70px;
  text-align: center;
  background: rgba(0, 191, 231, 0.1);
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  transition: all 0.3s;
}
.services__item__icon:after {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border: 2px solid #00bfe7;
  content: "";
  -webkit-transition: all, 0.5s;
  -o-transition: all, 0.5s;
  transition: all, 0.5s;
}

.services-page.set-bg {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  background-attachment: fixed;
  position: relative;
}

.services-page.set-bg:before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.services-page .container {
  position: relative;
  z-index: 1;
}

.services__item__icon i {
  font-size: 36px;
  color: #00bfe7;
}

.services__item:hover .services__item__icon {
  background: #00bfe7;
}

.services__item:hover .services__item__icon i {
  color: #ffffff;
}

@media only screen and (max-width: 767px) {
  .services__item__icon {
      height: 70px;
      width: 70px;
  }

  .services__item__icon i {
      font-size: 28px;
  }
}

.services__features {
    list-style: none;
    padding: 0;
    margin: 0;
}

.services__features li {
    padding: 8px 0;
    color: #ffffff !important;
    position: relative;
    padding-left: 25px;
    font-size: 15px;
    list-style-type: none;
}

.services__features li:before {
    content: "✓";
    position: absolute;
    left: 0;
    color: #00bfe7;
    font-weight: bold;
}

/* Add hover effect for better interaction */
.services__features li:hover {
    color: #00bfe7 !important;
    transition: all 0.3s ease;
}

.faq.set-bg {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  position: relative;
}

.faq.set-bg:before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  
}

.faq .container {
  position: relative;
  z-index: 1;
}

/* Enhance FAQ items visibility over background */
/* More solid FAQ cards */
.faq__item { /* More solid background */
    position: relative;
    z-index: 2;
    padding: 30px;
    border-radius: 10px;
    margin-bottom: 30px;
    transition: all 0.3s;
    border: 1px solid rgba(255, 255, 255, 0.1); /* Subtle border */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); /* Adding depth */
}

.faq__item:hover {
    background: rgba(41, 92, 117, 0.98); /* Even more solid on hover */
    transform: translateY(-3px); /* Slight lift effect */
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3); /* Enhanced shadow on hover */
}

/* Ensuring text remains crisp */
.faq__item h4 {
    color: #ffffff;
    margin-bottom: 15px;
    font-weight: 600;
}

.faq__item p {
    color: #adadad;
    margin-bottom: 0;
    line-height: 26px;
}

/* Technology */
.technologies.set-bg {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  position: relative;
}

.technologies.set-bg:before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 25, 40, 0.75); /* Reduced opacity for brighter background */
}

.tech__item {
  text-align: center;
  margin-bottom: 30px;
  padding: 30px 20px;
  background: rgba(255, 255, 255, 0.1); /* Brighter card background */
  border-radius: 10px;
  transition: all 0.3s;
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 4px 15px rgba(0, 191, 231, 0.1);
}

.tech__item:hover {
  background: rgba(255, 255, 255, 0.15); /* Brighter hover state */
  transform: translateY(-10px);
  box-shadow: 0 8px 20px rgba(0, 191, 231, 0.2);
  border-color: rgba(0, 191, 231, 0.3);
}

.tech__item i {
  font-size: 48px;
  color: #00bfe7; /* Your brand color - made icons brighter */
  margin-bottom: 20px;
  display: block;
  transition: all 0.3s;
}

.tech__item:hover i {
  color: #33d5f7; /* Brighter icon color on hover */
}

.tech__item h5 {
  color: #ffffff;
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 0;
}

/* Add a subtle glow effect */
.tech__item:hover::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 10px;
  box-shadow: 0 0 20px rgba(0, 191, 231, 0.2);
  z-index: -1;
}

.technologies .container {
  position: relative;
  z-index: 1;
}
/*---------------------
  Services Page
-----------------------*/
.services-page {
  background: #100028;
  padding-bottom: 50px;
}

/*---------------------
  Logo
-----------------------*/
.logo {
  background: #100028;
  padding: 100px 20px;
}

.logo__carousel.owl-carousel .owl-item img {
  width: auto;
  display: inline-block;
}

/*---------------------
  Portfolio
-----------------------*/

.portfolio {
  background: #100028;
}

.portfolio__filter {
  text-align: center;
  margin-bottom: 40px;
}
.portfolio__filter li {
  list-style: none;
  font-size: 16px;
  color: #adadad;
  margin-right: 5px;
  display: inline-block;
  cursor: pointer;
  padding: 6px 22px;
}
.portfolio__filter li.active {
  border: 1px solid #00bfe7;
}
.portfolio__filter li:last-child {
  margin-right: 0;
}

.portfolio__item {
  margin-bottom: 35px;
}
.portfolio__item:hover .portfolio__item__text h4:after {
  opacity: 1;
}

.portfolio__item__video {
  height: 240px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin-bottom: 28px;
}
.portfolio__item__video .play-btn {
  display: inline-block;
  color: #ffffff;
  font-size: 20px;
  height: 50px;
  width: 50px;
  line-height: 50px;
  text-align: center;
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 50%;
}

.portfolio__item__text {
  text-align: center;
}
.portfolio__item__text h4 {
  color: #ffffff;
  display: inline-block;
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 8px;
  position: relative;
}
.portfolio__item__text h4:after {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 1px;
  width: 100%;
  background: #333;
  content: "";
  -webkit-transition: all, 0.3s;
  -o-transition: all, 0.3s;
  transition: all, 0.3s;
  opacity: 0;
}
.portfolio__item__text ul li {
  list-style: none;
  display: inline-block;
  font-size: 16px;
  font-weight: 300;
  margin-right: 24px;
  position: relative;
  color: #adadad;
}
.portfolio__item__text ul li:after {
  position: absolute;
  right: -16px;
  top: 0;
  content: "/";
}
.portfolio__item__text ul li:last-child {
  margin-right: 0;
}
.portfolio__item__text ul li:last-child:after {
  display: none;
}
.portfolio__item__text span {
  font-size: 16px;
  font-weight: 300;
  color: #adadad;
  display: block;
}

.pagination__option {
  text-align: center;
  padding-top: 20px;
}
.pagination__option.blog__pagi {
  padding-top: 5px;
}
.pagination__option .arrow__pagination {
  font-size: 15px;
  color: #ffffff;
  display: inline-block;
  text-transform: uppercase;
}
.pagination__option .arrow__pagination.left__arrow {
  margin-right: 26px;
}
.pagination__option .arrow__pagination.right__arrow {
  margin-left: 18px;
}
.pagination__option .arrow__pagination span {
  opacity: 0.5;
}
.pagination__option .number__pagination {
  font-size: 18px;
  color: #ffffff;
  height: 50px;
  width: 50px;
  background: rgba(242, 242, 242, 0.1);
  line-height: 50px;
  text-align: center;
  display: inline-block;
  margin-right: 6px;
}

/*---------------------
    Blog
-----------------------*/
.blog {
  background: #100028;
}

.blog__item {
  border: 1px solid #222222;
  padding: 40px 48px 35px 30px;
  position: relative;
  z-index: 1;
  margin-bottom: 45px;
}
.blog__item:hover {
  border: 1px solid transparent !important;
  background: url('../img/cardbg.jpg') center/cover no-repeat;
  background-size: cover;
  transform: translateY(-5px);  /* Slight lift effect */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); 
}
.blog__item:hover ul li {
  color: #ffffff;
  opacity: 1;
}
.blog__item:hover ul li i {
  color: #ffffff; /* Matching icon color on hover */
}
.blog__item:hover p {
  color: #ffffff;
}
.blog__item h4 {
  color: #ffffff;
  font-weight: 700;
  line-height: 31px;
  margin-bottom: 18px;
}
.blog__item ul {
  margin-bottom: 20px;
  margin: 0 0 10px 0;
    padding: 0;
    list-style: none;
}
.blog__item ul li {
  color: #ffffff;
  list-style: none;
  font-size: 14px;
  font-weight: 300;
  margin-right: 25px;
  position: relative;
  display: inline-block;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
  letter-spacing: 0.5px;
}
.blog__item ul li:after {
  position: absolute;
  right: -16px;
  top: 0px;
  content: "/";
}
.blog__item ul li:last-child {
  margin-right: 0;
}
.blog__item ul li:last-child:after {
  display: none;
}
.blog__item p {
  font-weight: 300;
  line-height: 29px;
  margin-bottom: 22px;
}
.blog__item a {
  font-size: 16px;
  color: #ffffff;
}
.blog__item a span {
  font-size: 16px;
  color: #ffffff;
  opacity: 0.5;
  position: relative;
  top: 4px;
  margin-left: 5px;
}




/*---------------------
  Blog Details Hero
-----------------------*/
.blog-hero {
  padding: 300px 0 230px;
}

.blog__hero__text {
  text-align: center;
}
.blog__hero__text h2 {
  color: #ffffff;
  font-weight: 700;
  line-height: 47px;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.blog__hero__text ul li {
  font-size: 14px;
  color: #ffffff;
  font-weight: 300;
  list-style: none;
  display: inline-block;
  margin-right: 25px;
  position: relative;
}
.blog__hero__text ul li:after {
  position: absolute;
  right: -18px;
  top: 0;
  content: "/";
}
.blog__hero__text ul li:last-child {
  margin-right: 0;
}
.blog__hero__text ul li:last-child:after {
  display: none;
}
.blog__hero__text ul li span {
  text-transform: uppercase;
}

/*---------------------
  Blog Details
-----------------------*/
.blog-details {
  background: #100028;
}

.blog__details__text {
  margin-bottom: 30px;
}
.blog__details__text p {
  font-size: 18px;
  line-height: 29px;
  font-weight: 300;
  margin-bottom: 20px;
}
.blog__details__text p:last-child {
  margin-bottom: 0;
}

.blog__details__quote {
  border: 1px solid rgba(225, 225, 225, 0.8);
  padding: 35px 90px 35px 40px;
  position: relative;
  margin-bottom: 35px;
}
.blog__details__quote p {
  font-size: 22px;
  font-weight: 300;
  line-height: 35px;
  font-style: italic;
  margin-bottom: 10px;
}
.blog__details__quote h6 {
  font-size: 15px;
  color: #adadad;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: #ffffff;
}
.blog__details__quote i {
  font-size: 36px;
  color: #00bfe7;
  position: absolute;
  right: 30px;
  bottom: 25px;
}

.blog__details__desc {
  margin-bottom: 50px;
}
.blog__details__desc p {
  font-size: 18px;
  line-height: 29px;
  font-weight: 300;
  margin-bottom: 20px;
}
.blog__details__desc p:last-child {
  margin-bottom: 0;
}

.blog__details__tags {
  padding-bottom: 60px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  margin-bottom: 65px;
}
.blog__details__tags span {
  display: inline-block;
  font-size: 15px;
  color: #ffffff;
  font-weight: 300;
  margin-right: 25px;
}
.blog__details__tags a {
  font-size: 16px;
  font-weight: 300;
  color: #ffffff;
  display: inline-block;
  margin-right: 11px;
  padding: 8px 15px 7px;
  margin-bottom: 5px;
  background: rgba(255, 255, 255, 0.1);
}

.blog__details__option {
  margin-bottom: 40px;
}

.blog__details__option__item {
  margin-bottom: 30px;
  overflow: hidden;
  display: block;
}
.blog__details__option__item h5 {
  color: #ffffff;
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 25px;
}
.blog__details__option__item h5 i {
  font-size: 18px;
  margin-right: 5px;
}
.blog__details__option__item.blog__details__option__item--right h5 {
  text-align: right;
}
.blog__details__option__item.blog__details__option__item--right h5 i {
  margin-right: 0;
  margin-left: 5px;
}
.blog__details__option__item.blog__details__option__item--right .blog__details__option__item__img {
  float: right;
  margin-right: 0;
  margin-left: 25px;
}
.blog__details__option__item.blog__details__option__item--right .blog__details__option__item__text {
  margin-right: 25px;
  text-align: right;
  float: none;
}

.blog__details__option__item__img {
  float: left;
  margin-right: 25px;
}

.blog__details__option__item__text {
  overflow: hidden;
}
.blog__details__option__item__text h6 {
  color: #ffffff;
  line-height: 21px;
  font-weight: 700;
  margin-bottom: 5px;
}
.blog__details__option__item__text span {
  font-size: 14px;
  color: #777777;
  font-weight: 300;
}

.blog__details__recent {
  margin-bottom: 60px;
}
.blog__details__recent h4 {
  color: #ffffff;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 35px;
  text-align: center;
}

.blog__details__recent__item {
  margin-bottom: 30px;
}
.blog__details__recent__item img {
  min-width: 100%;
  margin-bottom: 20px;
}
.blog__details__recent__item h5 {
  color: #ffffff;
  font-weight: 700;
  line-height: 23px;
  margin-bottom: 4px;
}
.blog__details__recent__item span {
  color: #777777;
  font-size: 14px;
  font-weight: 300;
}

.blog__details__comment h4 {
  color: #ffffff;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 35px;
  text-align: center;
}
.blog__details__comment form textarea {
  height: 120px;
  width: 100%;
  border: 1px solid rgba(225, 225, 225, 0.5);
  background: transparent;
  font-size: 16px;
  color: #adadad;
  padding-top: 12px;
  padding-left: 20px;
  font-weight: 300;
  margin-bottom: 14px;
  resize: none;
}
.blog__details__comment form textarea:placeholder {
  color: #adadad;
}

.input__list {
  margin-right: -20px;
  overflow: hidden;
}
.input__list input {
  height: 50px;
  width: calc(33.33% - 20px);
  float: left;
  border: 1px solid rgba(225, 225, 225, 0.5);
  background: transparent;
  font-size: 16px;
  color: #adadad;
  padding-left: 20px;
  font-weight: 300;
  margin-right: 20px;
  margin-bottom: 20px;
}
.input__list input:placeholder {
  color: #adadad;
}

/*---------------------
  Contact Widget
-----------------------*/
.contact-widget {
  background: #100028;
  padding-bottom: 70px;
}

.contact__widget__item {
  margin-bottom: 30px;
}

.contact__widget__item__icon {
  height: 70px;
  width: 70px;
  border: 1px solid rgba(225, 225, 225, 0.5);
  line-height: 80px;
  text-align: center;
  border-radius: 50%;
  float: left;
  margin-right: 30px;
}
.contact__widget__item__icon i {
  font-size: 30px;
  color: #ffffff;
}

.contact__widget__item__text {
  overflow: hidden;
  padding-top: 7px;
}
.contact__widget__item__text h4 {
  font-size: 22px;
  color: #ffffff;
  font-weight: 700;
  margin-bottom: 10px;
}
.contact__widget__item__text p {
  margin-bottom: 0;
}

/*---------------------
  Contact
-----------------------*/
.contact {
  background: #100028;
  padding-top: 0;
  overflow: hidden;
}

.contact__map {
  height: 450px;
}
.contact__map iframe {
  width: 100%;
}

.contact__form h3 {
  color: #ffffff;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 35px;
}
.contact__form form input {
  height: 50px;
  width: 100%;
  border: 1px solid rgba(225, 225, 225, 0.5);
  background: transparent;
  font-size: 16px;
  color: #adadad;
  padding-left: 20px;
  font-weight: 300;
  margin-right: 20px;
  margin-bottom: 20px;
  -webkit-transition: all, 0.3s;
  -o-transition: all, 0.3s;
  transition: all, 0.3s;
}
.contact__form form input:placeholder {
  color: #adadad;
}
.contact__form form input:focus {
  border-color: #e1e1e1;
}
.contact__form form textarea {
  height: 110px;
  width: 100%;
  border: 1px solid rgba(225, 225, 225, 0.5);
  background: transparent;
  font-size: 16px;
  color: #adadad;
  padding-top: 12px;
  padding-left: 20px;
  font-weight: 300;
  margin-bottom: 14px;
  resize: none;
  -webkit-transition: all, 0.3s;
  -o-transition: all, 0.3s;
  transition: all, 0.3s;
}
.contact__form form textarea:placeholder {
  color: #adadad;
}
.contact__form form textarea:focus {
  border-color: #e1e1e1;
}

/*--------------------------------- Responsive Media Quaries -----------------------------*/
@media only screen and (min-width: 1200px) {
  .container {
    max-width: 1170px;
  }
}
/* Medium Device = 1200px */
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .header__nav__menu {
    margin-right: 25px;
  }

  .header__nav__menu ul li {
    margin-right: 25px;
  }

  .header__nav__social {
    padding-left: 25px;
  }

  .counter__item::before {
    display: none;
  }

  .counter__content {
    padding: 0px 145px 0 50px;
  }

  .counter__item.second__item {
    margin-top: -210px;
  }

  .counter__item.four__item {
    margin-top: -210px;
  }

  .hero__slider.owl-carousel .owl-dots {
    max-width: 930px !important;
  }
}
/* Tablet Device = 768px */
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .hero__slider.owl-carousel .owl-dots {
    max-width: 690px !important;
  }

  .services__title {
    margin-bottom: 50px;
  }

  .counter__item {
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
        transform: rotate(0);
    margin-bottom: 30px;
    width: auto;
  }

  .counter__item::before {
    display: none;
  }

  .counter__content {
    padding: 0;
  }

  .counter__item.second__item {
    margin-top: 0;
  }

  .counter__item.four__item {
    margin-top: 0;
  }

  .counter__item__text {
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
        transform: rotate(0);
  }

  .counter {
    height: auto;
    padding-top: 100px;
    padding-bottom: 70px;
  }

  .team__item.team__item--second {
    margin-top: 0;
  }

  .team__item.team__item--third {
    margin-top: 0;
  }

  .team__item.team__item--four {
    margin-top: 0;
  }

  .team__btn {
    position: relative;
    padding-top: 50px;
  }

  .about__pic {
    margin-bottom: 50px;
  }

  .about__text {
    padding-left: 0;
  }

  .portfolio__filter li {
    padding: 6px 15px;
  }

  .slicknav_menu {
    background: transparent;
    padding: 0;
    display: block;
  }

  .slicknav_nav ul {
    margin: 0;
    padding: 10px 30px;
  }

  .slicknav_nav .slicknav_row,
.slicknav_nav a {
    padding: 7px 0;
    margin: 0;
    color: #ffffff;
    font-weight: 600;
  }

  .slicknav_nav .slicknav_row:hover {
    border-radius: 0;
    background: transparent;
    color: #111111;
  }

  .slicknav_nav a:hover {
    border-radius: 0;
    background: transparent;
    color: #111111;
  }

  .slicknav_nav {
    background: #222222;
  }

  .slicknav_btn {
    position: absolute;
    right: 10px;
    top: 26px;
    background: #00bfe7;
  }

  .header .container {
    position: relative;
  }

  .header__nav__option {
    display: none;
  }
}
/* Wide Mobile = 480px */
@media only screen and (max-width: 767px) {
  .services__title {
    margin-bottom: 50px;
  }

  .counter__item {
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
        transform: rotate(0);
    margin-bottom: 30px;
    width: auto;
  }

  .counter__item::before {
    display: none;
  }

  .counter__content {
    padding: 0;
  }

  .counter__item.second__item {
    margin-top: 0;
  }

  .counter__item.four__item {
    margin-top: 0;
  }

  .counter__item__text {
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
        transform: rotate(0);
  }

  .counter {
    height: auto;
    padding-top: 100px;
    padding-bottom: 70px;
  }

  .team__item.team__item--second {
    margin-top: 0;
  }

  .team__item.team__item--third {
    margin-top: 0;
  }

  .team__item.team__item--four {
    margin-top: 0;
  }

  .team__btn {
    position: relative;
    padding-top: 50px;
  }

  .about__pic {
    margin-bottom: 50px;
  }

  .about__text {
    padding-left: 0;
  }

  .hero__slider.owl-carousel .owl-dots {
    max-width: auto;
    padding: 0 15px;
  }

  .slicknav_menu {
    background: transparent;
    padding: 0;
    display: block;
  }

  .slicknav_nav ul {
    margin: 0;
    padding: 10px 30px;
  }

  .slicknav_nav .slicknav_row,
.slicknav_nav a {
    padding: 7px 0;
    margin: 0;
    color: #ffffff;
    font-weight: 600;
  }

  .slicknav_nav .slicknav_row:hover {
    border-radius: 0;
    background: transparent;
    color: #111111;
  }

  .slicknav_nav a:hover {
    border-radius: 0;
    background: transparent;
    color: #111111;
  }

  .slicknav_nav {
    background: #222222;
  }

  .slicknav_btn {
    position: absolute;
    right: 10px;
    top: 26px;
    background: #00bfe7;
  }

  .header .container {
    position: relative;
  }

  .header__nav__option {
    display: none;
  }

  .hero__text h2 {
    font-size: 40px;
    line-height: 40px;
  }

  .grid-sizer {
    width: calc(50% - 10px);
  }

  .work__item.wide__item {
    width: calc(50% - 10px);
  }

  .work__item {
    width: calc(50% - 10px);
  }

  .work__item.large__item {
    width: calc(50% - 10px);
  }

  .footer__top__social {
    text-align: left;
    padding-top: 30px;
  }

  .portfolio__filter li {
    margin-bottom: 10px;
  }

  .input__list {
    margin-right: 0;
  }

  .input__list input {
    width: 100%;
    margin-right: 0;
  }

  .contact__map {
    margin-bottom: 40px;
  }

  .team__item {
    margin-bottom: 20px;
  }

  .team .p-0 {
    padding: 0 15px !important;
  }

  .about__pic__item {
    margin-right: 0;
  }

  .blog__details__quote {
    padding: 30px 45px 35px 35px;
  }
}
/* Small Device = 320px */
@media only screen and (max-width: 479px) {
  .hero__text h2 {
    font-size: 30px;
    line-height: 40px;
  }

  .grid-sizer {
    width: 100%;
  }

  .work__item.wide__item {
    width: 100%;
  }

  .work__item {
    width: 100%;
    margin-right: 0;
  }

  .work__item.large__item {
    width: 100%;
  }

  .work__gallery {
    margin-right: 0;
  }

  .pagination__option .arrow__pagination.left__arrow {
    margin-right: 15px;
  }

  .pagination__option .arrow__pagination.right__arrow {
    margin-left: 10px;
  }

  .blog__details__quote {
    padding: 30px 40px 35px 35px;
  }
}

/* Mobile Menu Styles */
.slicknav_menu {
    display: none;  /* Hide by default on desktop */
    background: transparent;
    padding: 0;
}

.slicknav_btn {
    position: absolute;
    right: 15px;
    top: 35px;
    background: #00bfe7;
    border-radius: 3px;
    padding: 10px;
    margin: 0;
}

.slicknav_nav {
    background: #1a1a1a;  /* Dark background for mobile menu */
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    padding: 10px 0;
    margin: 0;
}

.slicknav_nav ul {
    margin: 0;
    padding: 0;
}

.slicknav_nav .slicknav_row,
.slicknav_nav a {
    padding: 10px 20px;
    margin: 0;
    color: #ffffff;
    font-weight: 500;
}

.slicknav_nav .slicknav_row:hover,
.slicknav_nav a:hover {
    background: #00bfe7;
    color: #ffffff;
    border-radius: 0;
}

.slicknav_nav .slicknav_item a,
.slicknav_nav .slicknav_parent-link a {
    padding: 0;
    margin: 0;
}

/* Show mobile menu only on mobile devices */
@media only screen and (max-width: 991px) {
    .header__nav__menu {
        display: none;  /* Hide regular menu */
    }
    .slicknav_menu {
        display: block;  /* Show mobile menu */
    }
}

/* Main navigation menu items */
.header__nav__menu > ul > li > a {
    color: #ffffff !important;
    font-size: 17px;
    font-weight: 500;
}

/* Active menu item */
.header__nav__menu > ul > li.active > a {
    color: #ffffff !important;
}

/* Hover state */
.header__nav__menu > ul > li > a:hover {
    color: #ffffff !important;
}

/* Only dropdown items should be dark */
.header__nav__menu ul li .dropdown li a {
    color: #111111 !important;
}

.service-highlights {
    list-style: none;
    padding: 0;
    margin: 20px 0;
}

.service-highlights li {
    position: relative;
    padding-left: 25px;
    margin-bottom: 15px;
    color: #adadad;
    line-height: 1.6;
}

.service-highlights li:before {
    content: "•";  /* Bullet point */
    position: absolute;
    left: 0;
    color: #00bfe7;  /* Theme color */
    font-size: 20px;
    line-height: 1;
    top: 2px;
}

.service-highlights li:last-child {
    margin-bottom: 20px;
}

/* Hover effect */
.service-highlights li:hover {
    color: #ffffff;
    transition: color 0.3s ease;
}

.service-highlights li:hover:before {
    color: #ffffff;
    transition: color 0.3s ease;
}

/* Fix for wide item images */
.work__item.wide__item {
  background-position: center !important;
}

.work__item.wide__item[data-setbg*="Startup.png"],
.work__item.wide__item[data-setbg*="SEOMarketing.png"] {
  background-size: cover !important;
}

.work__item.wide__item[data-setbg*="SEOMarketing.png"] {
  background-size: cover !important;
  height: 310px !important;
  background-position: center;
}

/*---------------------
  Pricing
-----------------------*/
.pricing {
  background: #100028;
  padding-top: 100px;
  padding-bottom: 70px;
}

.pricing__item {
  background: rgba(255, 255, 255, 0.05);
  padding: 40px 35px;
  border-radius: 5px;
  margin-bottom: 30px;
  position: relative;
  transition: all 0.3s;
}

.pricing__item:hover {
  transform: translateY(-10px);
}

.pricing__item.featured {
  background: rgba(0, 191, 231, 0.1);
  border: 1px solid #00bfe7;
}

.pricing__item .popular {
  position: absolute;
  right: -1px;
  top: -1px;
  background: #00bfe7;
  color: #ffffff;
  padding: 5px 20px;
  border-radius: 0 5px 0 20px;
  font-size: 14px;
}

.pricing__item h3 {
  color: #ffffff;
  font-size: 26px;
  font-weight: 700;
  margin-bottom: 20px;
}

.pricing__item .description {
  color: #adadad;
  font-size: 15px;
  margin-bottom: 25px;
}

.pricing__price {
  margin-bottom: 30px;
}

.pricing__price h4 {
  color: #00bfe7;
  font-size: 48px;
  font-weight: 700;
  display: inline-block;
  margin-bottom: 0;
}

.pricing__price h4 sup {
  font-size: 24px;
  position: relative;
  top: -20px;
}

.pricing__price h4 span {
  color: #adadad;
  font-size: 16px;
  font-weight: 400;
}

.pricing__features {
  margin-bottom: 30px;
}

.pricing__features li {
  list-style: none;
  color: #ffffff;
  font-size: 15px;
  margin-bottom: 15px;
  display: flex;
  align-items: center;
}

.pricing__features li i {
  color: #00bfe7;
  margin-right: 10px;
}

.pricing__features li.na {
  color: #adadad;
}

.pricing__features li.na i {
  color: #adadad;
}

.pricing__item .primary-btn {
  display: block;
  text-align: center;
  padding: 12px 0;
  color: #ffffff;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  background: transparent;
  border: 2px solid #00bfe7;
  border-radius: 2px;
  transition: all 0.3s;
}

.pricing__item .primary-btn:hover {
  background: #00bfe7;
  color: #ffffff;
}

.pricing__item.featured .primary-btn {
  background: #00bfe7;
}

.pricing__item.featured .primary-btn:hover {
  background: transparent;
  color: #00bfe7;
}

/* Responsive */
@media only screen and (max-width: 991px) {
  .pricing__item {
      margin-bottom: 30px;
  }
}

@media only screen and (max-width: 767px) {
  .pricing__price h4 {
      font-size: 36px;
  }
  
  .pricing__price h4 sup {
      font-size: 20px;
  }
}

/*---------------------
  Why Choose Us
-----------------------*/
.why-choose {
  background: #100028;
  position: relative;
  overflow: hidden;
  padding: 100px 0;
}



/* Overlay adjustment */
.why-choose:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(16, 0, 40, 0.5);
}

/* Ensure content stays above the overlay */
.why-choose .container {
  position: relative;
  z-index: 2;
}

/* Media query for smaller screens */
@media only screen and (max-width: 1440px) {
  .why-choose.set-bg {
      background-size: cover;
  }
}

.why-choose__item {
  text-align: center;
  background: rgba(255, 255, 255, 0.05);
  padding: 60px 50px;  /* Increased horizontal padding from 40px to 50px */
  border-radius: 15px;  /* Increased border radius from 10px for softer corners */
  margin-bottom: 40px;
  transition: all 0.4s;  /* Slightly smoother transition */
  position: relative;
  z-index: 1;
  min-height: 420px;  /* Slightly increased from 400px */
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: calc(100% + 20px);  /* Makes each item slightly wider */
  margin-left: -10px;  /* Centers the wider item */
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);  /* Added subtle shadow */
}

.why-choose__item:hover {
  transform: translateY(-12px);  /* Slightly more lift on hover */
  background: rgba(0, 191, 231, 0.15);  /* Slightly more visible hover state */
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);  /* Enhanced shadow on hover */
}

.why-choose__item:hover .why-choose__icon {
  background: #00bfe7;
}

.why-choose__icon {
  width: 130px;  /* Slightly larger icon container */
  height: 130px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 45px;  /* Slightly more bottom spacing */
  transition: all 0.3s;
  border: 2px solid transparent;  /* Added border for hover effect */
}

.why-choose__icon i {
  color: #fff;
  font-size: 48px;  /* Increased icon size */
  transition: all 0.3s;
}

.why-choose__item:hover .why-choose__icon {
  background: #00bfe7;
  border-color: rgba(255, 255, 255, 0.2);  /* Border becomes visible on hover */
  transform: scale(1.05);  /* Slight scale effect on hover */
}

.why-choose__item h4 {
  color: #ffffff;
  font-size: 26px;  /* Increased font size */
  font-weight: 700;
  margin-bottom: 30px;  /* Increased margin */
}

.why-choose__item p {
  color: #adadad;
  margin-bottom: 0;
  font-size: 16px;  /* Increased font size */
  line-height: 28px;  /* Increased line height */
}

/* Responsive Styles */
@media only screen and (max-width: 991px) {
  .why-choose__item {
      min-height: 350px;
      margin-bottom: 30px;
      padding: 40px 30px;
  }
  
  .why-choose__icon {
      width: 100px;
      height: 100px;
      margin-bottom: 30px;
  }
}

@media only screen and (max-width: 767px) {
  .why-choose {
      padding: 70px 0;
  }
  
  .why-choose .section-title {
      margin-bottom: 50px;
  }
  
  .why-choose__item {
      min-height: 300px;
      padding: 35px 25px;
  }
  
  .why-choose__icon {
      width: 90px;
      height: 90px;
      margin-bottom: 25px;
  }
  
  .why-choose__icon i {
      font-size: 36px;
  }
  
  .why-choose__item h4 {
      font-size: 22px;
      margin-bottom: 20px;
  }
}

@media only screen and (max-width: 479px) {
  .why-choose {
      padding: 50px 0;
  }
  
  .why-choose__item {
      min-height: 250px;
      padding: 30px 20px;
  }
  
  .why-choose__item h4 {
      font-size: 20px;
  }
  
  .why-choose__item p {
      font-size: 15px;
      line-height: 24px;
  }
}

/* Add print styles */
@media print {
  .header__nav__social,
  .footer__social,
  .video-popup,
  .mobile-menu-wrap {
      display: none !important;
  }
}

/* Add responsive improvements */
@media (max-width: 768px) {
  .header__logo img {
      max-width: 200px;
      height: auto;
  }
}
.services__item h4 a,
.services__item h4 a:visited,
.services__item h4 a:link,
.services__item h4 a:active {
    color: inherit;
    text-decoration: none;
}

.services__item h4 a:hover {
    text-decoration: underline;
    text-decoration-color: #00bfe7;
}

.footer__option__item ul li a {
  color: #adadad !important;
  text-decoration: none;
  transition: color 0.3s ease;
}

.footer__option__item ul li a:hover {
  color: #00bfe7 !important;
  text-decoration: none;
}

/* Sticky CTA Bar */
.sticky-cta-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(10, 1, 25, 0.25); /* Changed from 0.75 to 0.65 for more transparency */
  color: white;
  padding: 15px 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  transform: translateY(100%);
  transition: all 0.3s ease-in-out;
  z-index: 999;
  opacity: 0;
  visibility: hidden;
  backdrop-filter: blur(5px); /* Keeps the blur effect to maintain text readability */
}

.sticky-cta-bar.show {
  transform: translateY(0);
  opacity: 1;
  
}

/* Update the close button position */
.close-cta {
  position: absolute;
  left: 10px; /* Changed from right to left */
  top: 10px; /* Changed from 50% to fixed value */
  transform: none; /* Remove the Y transform */
  background: none;
  border: none;
  color: white;
  font-size: 24px;
  cursor: pointer;
  padding: 5px;
  line-height: 1;
  z-index: 1000; /* Ensure it's above other content */
}

/* Rest of the styles remain the same */
.sticky-cta-bar.show {
  transform: translateY(0);
  opacity: 1;
  visibility: visible; /* Add this */
}

.sticky-cta-bar p {
  margin: 0;
  font-size: 16px;
  color: white;
}

.sticky-cta-bar a {
  background: #00bfe7;
  color: white;
  padding: 10px 25px;
  border-radius: 5px;
  text-decoration: none;
  font-weight: 600;
  transition: all 0.3s ease;
}

.sticky-cta-bar a:hover {
  background: #0099b8;
  transform: translateY(-2px);
}

.close-cta:hover {
  color: #00bfe7;
}

@media (max-width: 768px) {
  .sticky-cta-bar {
      flex-direction: column;
      gap: 10px;
      padding: 15px;
      padding-top: 35px; /* Add padding to account for close button */
  }
  
  .sticky-cta-bar p {
      font-size: 14px;
      text-align: center;
  }
  
  .close-cta {
      left: 5px; /* Adjust for mobile */
      top: 5px;
  }
}

/* WhatsApp Float Button */
.whatsapp-float {
  position: fixed;
  bottom: 90px !important;  /* Keep it above the CTA bar */
  right: 20px;
  z-index: 999;  /* Higher z-index to stay on top */
}

.whatsapp-float img {
  width: 60px;
  height: 60px;
  transition: transform 0.3s ease;
}

.whatsapp-float:hover img {
  transform: scale(1.1);
}

/* Fade in animation for CTA bar */
.fade-in {
  animation: fadeIn 0.5s ease-in;
}

@keyframes fadeIn {
  from {
      opacity: 0;
      transform: translateY(20px);
  }
  to {
      opacity: 1;
      transform: translateY(0);
  }
}