/* * {
  outline: 1px solid red;
} */

@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap");

:root {
  --bg-color: #121212;
  --bg-color2: #1f1f1f;
  --text-color: #e0e0e0;
  --card-bg: #1e1e1e;
  --heading-color: #ffffff;
  --secondary-text: #aaaaaa;
  --accent-color: #339af0;
  --border-color: #e0e0e0;
  --hover-bg: #2d2d2d;
  --menu-bg-mobile: rgba(17, 17, 17, 0.98);
}

body.light-mode {
  --bg-color: #f4f4f4;
  --bg-color2: #fff;
  --text-color: #333333;
  --card-bg: #fff;
  --heading-color: #333333;
  --secondary-text: #666;
  --accent-color: #0070c0;
  --border-color: #f0f0f0;
  --hover-bg: #f8f9fa;
}

body {
  font-family: Arial, sans-serif;
  text-align: center;
  background: var(--bg-color);
  color: var(--text-color);
  margin: 0;
  font-family: "Lato", serif !important;
  transition: background 0.3s ease, color 0.3s ease;
  /* font-family: "Montserrat", sans-serif !important; */
}

a {
  text-decoration: none !important;
}

/* Header Css */

/* ---------------------------------------------------------------- Index  Header  -------------------------------------------------------------------- */
header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: none;
  padding: 20px 20px;
  position: absolute;
  width: 100%;
  z-index: 999;
}

.header-section .logo {
  width: 200px;
  z-index: 999;
}

.header-section .logo img {
  margin-left: 30px;
  /* margin-top: 15px; */
  width: 100%;
}

.header-section nav {
  display: none;
  /* Hide navigation by default */
  justify-content: center;
  align-items: center;
  width: 0;
  overflow: hidden;
  opacity: 0;
  transition: width 0.6s ease, opacity 0.3s ease;
  position: absolute;
  right: 100px;
  top: 0;
  bottom: 0;
  background: none;
}

.header-section nav a {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #fff;
  text-decoration: none;
  font-size: 17px;
  font-weight: bolder;
  padding: 10px 15px;
  margin: 0 10px;
  border-radius: 30px;
  background: transparent;
  border: 2px solid transparent;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.header-section nav a:hover {
  color: #0070c0;
}

/* Special hover effect for brands link */
.header-section nav a[href="brands.html"]:hover {
  color: #0070c0;
  background: rgba(0, 112, 192, 0.1);
  transform: translateY(-2px);
}

.header-section nav a::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  z-index: -1;
  transition: left 0.4s ease;
}

.header-section nav a:hover::before {
  left: 0;
}

header.expanded nav {
  display: flex;
  /* Show navigation when expanded */
  width: calc(100% - 200px);
  margin-top: 0;
  opacity: 1;
}

/* Dropdown container */
.nav-brands {
  position: relative;
}

/* Show dropdown on hover */
.nav-brands:hover .brand-dropdown {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(5px);
}

.nav-brands .brand-dropdown {
  /* min-height: 366.578px; */
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  background: var(--card-bg);
  z-index: 999;
  padding-top: 20px;
}

.nav-brands .brand-dropdown>ul>li {
  width: 25%;
  list-style-type: none;
}

.nav-brands .brand-dropdown a {
  display: block;
  text-decoration: none;
}

.nav-brands .brand-dropdown>li>a {
  padding: 4px 10px;
}

.nav-brands .brand-dropdown>li {
  position: relative;
  margin: 40px 0 30px 60px;
}

.nav-brands .brand-dropdown>li>ul {
  display: none;
  background: rgba(0, 0, 0, 0.1);
  position: absolute;
  top: 100%;
  left: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px);
  transition: all 300ms ease-in-out 500ms;
  transition: all 300ms ease-in-out;
}

.nav-brands .brand-dropdown>li>ul>li>a {
  padding: 4px 10px;
}

.nav-brands .brand-dropdown>li>ul>li>a:hover {
  background-color: rgba(0, 0, 0, 0.15);
}

.nav-brands .brand-dropdown>li:hover>ul {
  display: block;
  opacity: 1;
  visibility: visible;
  transform: translateY(0px);
  transition: all 300ms ease-in-out;
  padding: 0;
  padding-top: 10px;
}

.nav-brands .brand-dropdown>li>a:hover {
  background-color: rgba(0, 0, 0, 0.05);
}

.nav-brands .brand-dropdown {
  position: static;
}

.nav-brands .brand-dropdown>ul {
  min-height: 400px;
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  background: var(--card-bg);
  z-index: 999;
  padding-top: 20px;
}

.nav-brands .brand-dropdown>ul>li {
  width: 25%;
  list-style-type: none;
  /* // position:relative; */
}

.nav-brands.brand-dropdown>ul>li>a {
  padding: 15px 20px;
  color: var(--heading-color);
  display: block;
  text-align: left;
}

.nav-brands.brand-dropdown>ul>li>ul {
  display: none;
  position: absolute;
  top: 0;
  left: 25%;
  width: 75%;
}

.nav-brands .brand-dropdown>ul>li.show>ul {
  display: block;
  padding: 0;
}

.nav-brands .brand-dropdown>ul>li>ul>li {
  display: block;
  width: 100%;
  float: left;
  list-style-type: none;
  color: var(--heading-color);
}

.nav-brands .brand-dropdown>ul>li>ul>li.col3 {
  width: 33.3334%;
  /* padding: 0 10px; */
}

.nav-brands .brand-dropdown>ul>li>ul>li>a {
  font-weight: bold;
  border-bottom: 1px solid #333;
}

.nav-brands .brand-dropdown>ul>li>ul>li a {
  /* padding: 10px 10px; */
  color: var(--heading-color);
  border: 1px solid #ccc;
}

.nav-brands .brand-dropdown>ul>li>ul>li.col3 ul li {
  list-style-type: none;
}

.nav-brands .brand-dropdown>ul>li>ul>li.col3 ul li img {
  width: 100%;
}

.nav-brands .brand-dropdown>ul>li>ul>li.col3 ul {
  padding: 0;
}

.header-section .menu-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  /* space between icon and text */
  width: 160px;
  /* height: 50px; */
  padding: 0 15px;
  background-color: #fe6f27;
  border: none;
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  cursor: pointer;
  z-index: 2;
  overflow: hidden;
  transition: background 0.25s ease, transform 0.2s ease;

  z-index: 2;
  grid-column-gap: 0.75rem;
  color: #fff;
  text-align: center;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  border-radius: 20rem;
  justify-content: center;
  align-items: center;
  padding: 0.5rem 0.75rem 0.5rem 1.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.4;
  transition: all 0.4s;
  display: flex;
  position: relative;
  transform: translate(0);
}

.header-section .menu-btn:hover {
  background-color: #e55b10;
  transform: scale(1.03);
}

/* Button text container for swipe effect */
.btn-text-container {
  flex: 1;
  text-align: center;
  position: relative;
  height: 20px;
  overflow: hidden;
}

.menu-btn .btn-text {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  color: #fff;
  opacity: 0;
  transform: translateY(100%);
  transition: all 0.3s ease-in-out;
  white-space: nowrap;
}

.menu-btn .btn-text.active {
  opacity: 1;
  transform: translateY(0);
}

.menu-btn .btn-text.swipe-up {
  opacity: 0;
  transform: translateY(-100%);
}

.menu-btn .btn-text.swipe-down {
  opacity: 0;
  transform: translateY(100%);
}

.menu-btn .btn-text.swipe-up-in {
  opacity: 1;
  transform: translateY(0);
  animation: swipeUpIn 0.3s ease-in-out;
}

.menu-btn .btn-text.swipe-down-in {
  opacity: 1;
  transform: translateY(0);
  animation: swipeDownIn 0.3s ease-in-out;
}

@keyframes swipeUpIn {
  from {
    opacity: 0;
    transform: translateY(100%);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes swipeDownIn {
  from {
    opacity: 0;
    transform: translateY(-100%);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.icon-circle {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #00a0e3;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  transition: transform 0.25s ease, background 0.25s ease;
  animation: iconPulse 2.2s ease-in-out infinite;
}

.icon-circle i {
  font-size: 14px !important;
  animation: scribble 1.5s infinite ease-in-out;
}

.icon-circle i.fas {
  font-size: 16px !important;
}

/* Scribble animation */
@keyframes scribble {

  0%,
  50%,
  100% {
    transform: rotate(0deg) translateX(0) translateY(0);
  }

  25% {
    transform: rotate(-20deg) translateX(-2px) translateY(1px);
  }

  75% {
    transform: rotate(20deg) translateX(2px) translateY(-1px);
  }
}

/* Brands Mega Menu Styles */
.brands-mega-menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: rgba(0, 0, 0, 0.8);
  z-index: 1000;
  display: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.brands-mega-menu.show {
  display: flex;
  opacity: 1;
  visibility: visible;
}

.mega-menu-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--card-bg);
  border-radius: 12px;
  padding: 40px;
  width: 90%;
  max-width: 1000px;
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  display: flex;
  gap: 40px;
}

.mega-menu-sidebar {
  flex: 0 0 200px;
  border-right: 2px solid #f0f0f0;
  padding-right: 30px;
}

.mega-menu-sidebar h3 {
  font-size: 18px;
  font-weight: 700;
  color: var(--heading-color);
  margin: 0 0 20px 0;
  padding: 10px 0;
  border-bottom: 2px solid #0070c0;
  cursor: pointer;
  transition: color 0.3s ease;
}

.mega-menu-sidebar h3:hover {
  color: #0070c0;
}

.mega-menu-sidebar h3.active {
  color: #0070c0;
  background: rgba(0, 112, 192, 0.1);
  border-radius: 6px;
  padding: 10px 15px;
}

.brands-grid {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  align-content: start;
}

.brand-item {
  text-align: center;
  padding: 20px;
  border-radius: 8px;
  transition: all 0.3s ease;
  cursor: pointer;
  border: 2px solid transparent;
}

.brand-item img {
  width: 150px;
}

#partnersSection .brand-item img {
  width: 150px;
}

.brand-item:hover {
  background: var(--hover-bg);
  border-color: var(--accent-color);
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(0, 112, 192, 0.1);
}

.brand-logo {
  font-size: 48px;
  margin-bottom: 15px;
  color: #0070c0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 60px;
}

.brand-item h4 {
  font-size: 16px;
  font-weight: 700;
  color: var(--heading-color);
  margin: 0 0 8px 0;
  line-height: 1.3;
}

.brand-item p {
  font-size: 12px;
  color: var(--secondary-text);
  margin: 0;
  font-weight: 500;
}

/* Close button for mega menu */
.mega-menu-close {
  position: absolute;
  top: 20px;
  right: 20px;
  background: none;
  border: none;
  font-size: 24px;
  color: #999;
  cursor: pointer;
  transition: color 0.3s ease;
}

.mega-menu-close:hover {
  color: var(--text-color);
}

/* Responsive design for mega menu */
@media (max-width: 768px) {
  .mega-menu-content {
    flex-direction: column;
    gap: 20px;
    padding: 20px;
    width: 95%;
  }

  .mega-menu-sidebar {
    flex: none;
    border-right: none;
    border-bottom: 2px solid #f0f0f0;
    padding-right: 0;
    padding-bottom: 20px;
  }

  .brands-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }

  .brand-logo {
    font-size: 36px;
    height: 50px;
  }

  .brand-item h4 {
    font-size: 14px;
  }

  .brand-item p {
    font-size: 11px;
  }
}

@media (max-width: 480px) {
  .brands-grid {
    grid-template-columns: 1fr;
  }
}

/* Pulse animation */
@keyframes pencilDraw {
  0% {
    transform: translate(0, 0) rotate(0deg);
  }

  20% {
    transform: translate(3px, 1px) rotate(-12deg);
  }

  40% {
    transform: translate(6px, -1px) rotate(0deg);
  }

  60% {
    transform: translate(3px, 1px) rotate(12deg);
  }

  80% {
    transform: translate(0, 0) rotate(0deg);
  }

  100% {
    transform: translate(0, 0) rotate(0deg);
  }
}

/* Pause pulse when expanded to reduce visual noise */
header.expanded .icon-circle {
  animation-play-state: paused;
}

/* Respect reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
  .index-page .icon-circle {
    animation: none;
  }
}

.expanded .icon-circle {
  background: var(--card-bg);
  color: #00a0e3;
}

.header-section .close-nav {
  display: none;
}

@media (max-width: 1200px) {
  .index-page nav {
    justify-content: center;
  }

  .index-page nav a {
    padding: 10px 10px;
  }

  .header-section nav a {
    font-size: 14px;
    font-weight: bold;
    margin: 0;
  }

  .header-section .menu-btn {
    font-size: 15px;
    right: 30px;
    /* width: 135px; */
    height: 50px;
    padding: 6px 10px;
    margin-top: 10px;
    gap: 8px;
  }

  .icon-circle {
    width: 35px;
    height: 35px;
  }

  .icon-circle i {
    font-size: 17px;
  }
}

@media (max-width: 1024px) {
  .header-section .close-nav {
    display: block;
    background: transparent;
    border: none;
    color: #fff;
    font-size: 30px;
    text-align: right;
    padding: 0 10px;
    cursor: pointer;
  }

  .header-section nav {
    position: fixed;
    top: 0;
    right: -100%;
    height: 100vh;
    width: 78%;
    max-width: 340px;
    background: rgba(17, 17, 17, 0.98);
    padding: 30px 18px 24px;
    box-shadow: -10px 0 30px rgba(0, 0, 0, 0.55);
    overflow-y: auto;
    transition: right 0.36s cubic-bezier(0.2, 0.9, 0.2, 1), opacity 0.28s ease;
    opacity: 0;
    z-index: 1100;
  }

  .header-section nav a {
    display: block;
    width: 100%;
    padding: 14px 12px;
    margin: 8px 0;
    color: #fff;
    border-radius: 8px;
    font-size: 16px;
    text-decoration: none;
    background: transparent;
    transition: background 0.18s ease, color 0.18s ease;
  }

  .header-section nav a::before {
    display: none;
  }

  .header-section nav a::after {
    display: none;
  }

  header.expanded nav {
    display: flex;
    /* Show navigation when expanded on mobile */
    right: 0;
    opacity: 1;
    flex-direction: column;
    margin-top: 0;
  }

  header.expanded::before {
    content: "";
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 1050;
    pointer-events: none;
  }
}

@media (max-width: 567px) {
  .header-section .menu-btn {
    font-size: 10px;
    right: 15px;
    width: 110px;
    height: 35px;
    padding: 6px 10px;
    margin-top: 10px;
    gap: 8px;
  }

  .icon-circle i {
    font-size: 15px;
  }

  .header-section .logo img {
    width: 80%;
  }

  .icon-circle {
    width: 30px;
    height: 30px;
  }

  .header-section .logo img {
    margin-left: 0;
    margin-top: 15px;
  }
}

@media only screen and (min-device-width: 320px) and (max-width: 414px) {
  .header-section .menu-btn {
    width: 115px;
    height: 30px;
  }

  .header-section .logo {
    width: 115px;
  }

  .icon-circle {
    width: 20px;
    height: 20px;
  }

  .icon-circle i.fas {
    font-size: 10px !important;
  }
}

/* Header Css */

/* Hero Slider */
.Hero {
  height: 100vh;
  position: relative;
}

.mob_view {
  display: none;
}

.Hero .slider-container {
  position: relative;
  max-width: 100%;
  margin: auto;
  overflow: hidden;
  height: 100%;
}

.Hero .slider {
  display: flex;
  width: 100%;
}

.Hero .slide {
  display: none;
  width: 100%;
}

.Hero .slide.active {
  display: block;
  animation: fade 1s ease-in-out;
}

@keyframes fade {
  from {
    opacity: 0.5;
  }

  to {
    opacity: 1;
  }
}

.Hero .slide img {
  width: 100%;
  height: 100vh;
}

/* Progress Bar */
.Hero .progress-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0%;
  height: 2px;
  background: #00a0e3;
  transition: width 3s linear;
  display: none;
}

/* Counter */
.Hero .counter {
  position: absolute;
  bottom: 42px;
  left: 260px;
  color: white;
  padding: 0 10px;
  border-radius: 5px;
  font-size: 14px;
}

/* Navigation Buttons */
.Hero .controls button {
  position: absolute;

  background: transparent;
  color: white;
  border: none;
  cursor: pointer;
  font-size: 18px;
  bottom: 40px;
}

.Hero #prevBtn {
  left: 150px;
}

.Hero #nextBtn {
  left: 350px;
}

/* Dots */
.Hero .dots-container {
  text-align: center;
  padding: 10px;
  position: absolute;
  top: 50%;
  right: 40px;
  display: none;
  transform: translateY(-50%);
  /* left: 50%;
  transform: translateX(-50%); */
}

.Hero .dot {
  height: 25px;
  width: 3px;
  margin: 5px;
  background-color: #bbb;
  /* border-radius: 50%; */
  /* display: inline-block; */
  display: block;
  cursor: pointer;
}

.Hero .dot.active {
  background-color: #00a0e3;
}

.slider_cnt {
  position: absolute;
  top: 50%;
  left: 80px;
  width: 50%;
  transform: translateY(-50%);
}

.slider_cnt h1 {
  color: #fff;
  text-transform: capitalize;
  text-align: left;
  font-size: 45px;
  line-height: 50px;
  font-weight: 600;
  padding-top: 10px;
}

.cnt_more {
  padding-left: 65px;
  position: relative;
  padding-top: 30px;
}

.slider_cnt p {
  color: #fff;
  text-transform: inherit;
  text-align: left;
  width: 80%;
  font-size: 16px;
  line-height: 22.9px;
}

.slider_cnt .cnt_more::before {
  position: absolute;
  content: "";
  left: 40px;
  top: 35px;
  width: 2px;
  height: 125px;
  background: #fe6f27;
}

.cta_btn {
  background: #fe6f27;
  padding: 10px 30px;
  color: #fff;
  display: block;
  width: max-content;
  text-decoration: none;
  font-size: 14px;
  cursor: pointer;
}

.cta_btn i {
  padding-left: 5px;
}

.cta_btn:hover {
  background: var(--card-bg);
  color: #007bff;
  transition: all 0.5s;
}

.blue {
  background-color: #00a0e3;
}

.servers-list h3 {
  text-align: left;
  margin-top: 30px;
  margin-bottom: 20px;
  color: var(--text-color);
}

@media only screen and (min-device-width: 800px) and (max-width: 1199px) {
  .slider_cnt {
    width: 75%;
    left: 4rem;
  }

  .slider_cnt h1 {
    font-size: 35px;
  }

  .cnt_more {}

  .slider_cnt p {
    width: 80%;
    font-size: 14px;
  }
}

@media only screen and (max-device-width: 768px) {
  .mob_view {
    display: block !important;
  }

  /* 
  .Hero .slide img {
    width: auto;
  } */

  .slider_cnt {
    position: absolute;
    left: 30px;
    /* left: 65px; */
    width: 85%;
    transform: translateY(-50%);
  }

  .Hero #prevBtn {
    left: 30px;
  }

  .Hero #nextBtn {
    right: 115px;
    left: inherit;
  }

  .Hero .counter {
    left: 40%;
    transform: translateX(-50%);
  }

  .slider_cnt p {
    width: 80%;
  }

  .Hero .dots-container {
    right: 15px;
    padding: 0;
  }
}

@media only screen and (min-device-width: 769px) and (max-width: 800px) {
  .slider_cnt {
    width: 100%;
    left: 80px;
  }
}

@media only screen and (max-device-width: 360px) {
  .cta_btn {
    padding: 7px 15px;
  }

  .slider_cnt .cnt_more::before {
    left: 20px;
  }

  .cnt_more {
    padding-left: 40px;
  }
}

@media only screen and (max-device-width: 320px) {
  .slider_cnt {
    left: 30px;
  }

  .slider_cnt {
    position: absolute;
    left: 30px;
  }

  .cnt_more {
    padding-top: 10px;
  }

  .slider_cnt .cnt_more::before {
    top: 10px;
  }

  .slider_cnt p {
    font-size: 10px !important;
    line-height: 15px !important;
  }

  .cta_btn {
    padding: 5px 10px;
  }
}

/* Hero Css Code End  */

/* Parallax Css Code Start */
.Parallax {}

/* Parallax Css Code End */

/* Timeline Css Code Start */
.Timeline {
  overflow: hidden;
  background: var(--bg-color2);
}

.Timeline .col-md-6 {
  padding: 0 !important;
}

.Timeline img {
  width: 100%;
}

.Timeline .container-fluid {
  padding: 0;
}

.timeline_content {
  position: absolute;
  /* left: 52%; */
  bottom: 30px;
  /* transform: translateX(-50%); */
  padding: 0 90px;
  width: 100%;
}

.Timeline h3 {
  font-size: 52px;
  line-height: 50.4px;
  font-weight: 600;
  font-style: italic;
  color: #fff;
  margin-bottom: 15px;
}

.Timeline p {
  font-size: 16px;
  line-height: 21.3px;
  color: #fff;
  margin-bottom: 15px;
  /* width: 40%;
  margin: 0 auto; */
}

@media only screen and (min-device-width: 768px) and (max-width: 800px) {
  .timeline_content {
    padding: 0 30px;
  }
}

/* Timeline Css Code End */

/* Testimonial Css Code Start */

.Testimonial {
  background: var(--bg-color2);
  padding: 80px 0 50px;
  transition: background 0.3s ease;
}

.Testimonial .col-md-12 {
  padding: 0 !important;
}

.Testimonial h5 {
  color: #00a0e3;
  font-size: 18px;
  line-height: 30px;
}

.Testimonial h2 {
  color: var(--heading-color);
  font-size: 50px;
  line-height: 60px;
  margin-bottom: 50px;
}

.testimonial {
  padding: 15px;
  text-align: center;
}

.testimonial:nth-child(2) {
  padding-right: 0;
}

#testimonial-slider.owl-carousel {
  display: block !important;
}

.testimonial .pic {
  display: inline-block;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  margin-bottom: 25px;
  overflow: hidden;
}

.Testimonial .container {
  max-width: 1330px;
}

.Testimonial .owl-carousel .owl-wrapper,
.Testimonial .owl-carousel .owl-item {
  /* height: 450px !important; */
  margin-bottom: 0;
}

.testimonial .pic img {
  width: 100%;
  height: auto;
}

.testimonial .description {
  padding: 50px 50px 40px;
  box-shadow: -1px 2px 22px -9px rgba(0, 0, 0, 0.8);
  border-radius: 8px;
  background-color: var(--card-bg);
  transition: all 0.3s ease;
  min-height: 350px;
}

.Testimonial.two .description {
  min-height: 300px !important;
}

.Testimonial.two .description {
  min-height: 300px;
}

.testimonial .description p {
  font-size: 13px;
  color: var(--secondary-text);
  line-height: 26px;
}

.testimonial .owl-theme .owl-controls .owl-page span {
  background: var(--heading-color);
  opacity: 0.7;
}

.Testimonial .owl-theme .owl-controls .owl-page.active span {
  background: #00a0e3;
  width: 10px;
  height: 10px;
  opacity: 0.7;
}

.Testimonial .owl-theme .owl-controls.clickable .owl-page:hover span {
  background: #00a0e3;
}

.testimonial .description svg {
  margin-bottom: 20px;
}

.testimonial .testimonial-title {
  font-size: 14px;
  letter-spacing: 3px;
  color: var(--heading-color);
  text-transform: uppercase;
  position: relative;
}

.testimonial .owl-theme .owl-controls .owl-page span {
  display: block;
  width: 12px;
  height: 12px;
  border-radius: 20px;
  background: #f3904d;
  margin: 5px 7px;
  opacity: 0.5;
}

@media only screen and (max-device-width: 768px) {

  .Testimonial h2 {
    font-size: 36px;
    width: 90%;
    margin: 0 auto;
  }

  .Testimonial .owl-carousel .owl-wrapper,
  .Testimonial .owl-carousel .owl-item {
    height: auto !important;
  }

  .Timeline h3 {
    font-size: 30px;
    line-height: 45px;
  }

  .Timeline p {
    font-size: 10px;
    line-height: 15px;
    width: 100%;
  }
}

@media only screen and (min-device-width: 320px) and (max-width: 414px) {
  .Timeline h3 {
    font-size: 20px;
    line-height: 15px;
  }

  .Timeline p {
    font-size: 8px;
    line-height: 10px;
    width: 100%;
  }

  .timeline_content {
    bottom: 20px;
  }
}

@media only screen and (min-device-width: 601px) and (max-width: 767px) {
  .testimonial .description {
    padding: 30px 30px 20px;
    min-height: 380px;
  }
}

@media only screen and (max-device-width: 900px) {

  /* .Testimonial .owl-carousel .owl-wrapper,
  .Testimonial .owl-carousel .owl-item {
    height: 550px !important;
  } */
  .instagram-media {
    margin-bottom: 20px !important;
  }

  .mt_15.no_mt.mb10 {
    padding-left: 0 !important;
  }

  .imageOverlayFb {
    position: absolute;
    width: 100%;
    background: rgba(59, 89, 152, 0.7);
    height: 100%;
    top: 0;
    bottom: 0;
    left: 0 !important;
    right: 0 !important;
  }

  .mb10 {
    margin-bottom: 10px;
  }

}

@media only screen and (min-device-width: 320px) and (max-width: 414px) {

  /* .Testimonial .owl-carousel .owl-wrapper,
  .Testimonial .owl-carousel .owl-item {
    height: 600px !important;
  } */

  .testimonial .description {
    padding: 50px 50px 40px;
    box-shadow: -1px 2px 22px -9px rgba(0, 0, 0, 0.8);
    border-radius: 8px;
    min-height: auto;
  }
}

/* Testimonial Css Code End */

/* News Css Code Start */

.News {
  padding-top: 70px;
  padding-bottom: 70px;
  background: var(--bg-color);
  position: relative;
  overflow: hidden;
}

.news_box {
  position: absolute;
  left: 35px;
  z-index: 99;
  background: rgba(255, 255, 255, 0.8);
  color: #454545;
  padding: 10px 20px;
  top: 35px;
  box-shadow: 0 6px 9px 0 rgba(0, 0, 0, 0.2);
  font-size: 2.4rem;
  line-height: 3.6rem;
}

.news_box h2 {
  margin-bottom: 0;
}

.news-section {
  background: var(--card-bg);
  box-shadow: -1px 2px 22px -9px rgba(0, 0, 0, 0.8);
  box-shadow: 0 0 8px 0 rgba(177, 177, 177, 0.3);
}

.news_Content {
  position: relative;
  background-color: #fff;
  height: 36.2rem;
  margin: 0;
}

/* .noPadding {
  padding: 0 !important;
} */

.NewsCaption {
  padding: 40px 0 0 40px;
  text-transform: uppercase;
  color: #4a90e2;
  font-size: 12px;
  text-align: left;
  line-height: 17.1px;
}

h3.NewsHeading {
  max-width: 25rem;
  font-weight: 700;
  font-style: normal;
  color: var(--text-color);
  font-size: 20px;
  line-height: 28px;
  margin: 60px 0 0 40px;
  text-align: left;
  width: 65%;
}

.titleContent .newsStoryContent {
  position: relative;
  margin: 2rem 4rem 0 6rem;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform: translate3d(0, 0, 0);
}

.newsStoryContent .newsFeedArticle {
  text-align: left;
  color: var(--text-color);
}

.newsBorder {
  border-left: 1px solid orange;
  position: absolute;
  height: 95%;
  bottom: 0;
  left: -13px;
}

img.arrow {
  position: absolute;
  bottom: 0;
  right: 25px;
  bottom: 25px;
  cursor: pointer;
}

.News .owl-pagination {
  position: absolute;
  bottom: 0;
  left: 20%;
}

.News .owl-theme .owl-controls .owl-page span {
  border-radius: 0;
  width: 8px;
  height: 8px;
}

.News .owl-theme .owl-controls .owl-page.active span {
  background: #00a0e3;
}

.News .owl-theme .owl-controls .owl-page:hover span {
  background: #00a0e3;
}

.titleContent {
  position: relative;
  background-color: var(--bg-color2) !important;
  height: 388px;
  /* box-shadow: 0 0 8px 0 rgba(177, 177, 177, 0.3); */
}

.whiteCaption {
  padding: 40px 0 2rem 40px;
  text-transform: uppercase;
  color: #fff;
  font-size: 1.2rem;
  text-align: left;
}

h3.CareerHead {
  max-width: 25rem;
  font-weight: 700;
  font-style: normal;
  color: #fff;
  text-align: left;
  font-style: normal;
  font-size: 20px;
  line-height: 28px;
  margin: 20px 0 0 40px;
}

h3.nHeading {
  max-width: 25rem;
  font-weight: 700;
  font-style: normal;
  color: #fff;
  font-size: 2rem;
  line-height: 2.4rem;
  margin: 4rem 0 2rem 4rem;
}

.lineBorder {
  border-left: 1px solid orange;
  position: absolute;
  height: 95%;
  bottom: 0;
  left: -13px;
}

.FeedArticle {
  color: #fff;
  max-width: 23rem;
  font-weight: 300;
  font-size: 16px;
  text-align: left;
}

.twitterFeed,
.fB,
.instaGram {
  height: 36.2rem;
}

.imageOverlayFb {
  position: absolute;
  width: 95%;
  background: rgba(59, 89, 152, 0.7);
  height: 100%;
  top: 0;
  bottom: 0;
  left: 11px;
  right: 0;
}

.whiteContent {
  top: 0;
  width: 100%;
  position: absolute;
  height: 100%;
  box-shadow: 0 0 8px 0 rgba(177, 177, 177, 0.3);
}

.newsStoryContent {
  position: relative;
  margin: 2rem 4rem 0 6rem;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform: translate3d(0, 0, 0);
}

.newsFeedA {
  word-break: break-word;
  line-height: 2.4rem;
  margin-left: 2rem;
  animation: fadein 2s;
  -moz-animation: fadein 2s;
  -webkit-animation: fadein 2s;
  -o-animation: fadein 2s;
}

.newsBorder {
  border-left: 1px solid #fff;
  position: absolute;
  height: 97%;
  bottom: 0;
  left: 2%;
}

.News img {
  width: 100%;
  /* height: 60vh; */
  height: 52vh;
  height: 100%;
  height: 388px;
}

/* .top_news {
  height: 388px;
} */

#News .instagram-media {
  height: 388px !important;
  max-height: 388px !important;
  min-width: 100% !important;
  margin: 0 !important;
  overflow-y: auto !important;
}

#video-activity-slider .instagram-media {
  height: 740px;
}

.a-btn span {
  display: block;
}

.s-btn {
  display: block;
}

.Relative {
  position: relative;
}

.Content2 {
  top: 0;
  width: 100%;
  position: absolute;
  height: 100%;
  text-align: left;
}

.Content2 svg {
  margin: 40px 0 0 40px;
}

.Content2 .newsStoryContent {
  margin: 2rem 4rem 40px 80px;
  color: #fff;
}

a.hoverCard {
  position: absolute;
  top: 0;
  left: 0;
  cursor: pointer;
  width: 100%;
  height: 100%;
  z-index: 2;
  transition: 1s ease;
}

.Content2 .feeds,
.fJobs {
  text-decoration: none;
  color: #fff;
  cursor: pointer;
  font-weight: 400;
  font-style: normal;
  font-size: 14px;
  line-height: 2.4rem;
}

.Content2 .newsFeedA {
  line-height: 20px;
}

.Content2.instagram svg path {
  fill: var(--heading-color);
}

.mt_15 {
  margin-top: 0.7rem !important;
}


@media only screen and (min-device-width: 768px) and (max-width: 800px) {
  .mt_15.no_mt {
    margin-top: 0 !important;
  }

  .mt_15-mob {
    margin-top: 10px !important;
  }

}


.news-slider {
  position: relative;
  overflow: hidden;
}

/* All slides hidden by default */
.news-slider .news-inner-image {
  display: none;
  opacity: 0;
  transition: opacity 0.6s ease-in-out;
}

/* Visible (current) slide */
.news-slider .news-inner-image.active {
  display: block;
  opacity: 1;
}

/* News Css Code End */

/* Client Css Code */

.Client {
  padding: 30px 0;
  background-color: var(--card-bg);
}

.Client h2 {
  color: var(--heading-color);
  padding-bottom: 40px;
  padding-top: 30px;
}

.Client .owl-carousel {
  display: block;
}

.client-slider {
  margin: 0 0;
}

.client-slider .pic {
  width: auto;
  background: #fff;
  margin: 0 5px;
  padding: 10px;
  height: 80px;
}

.client-slider .pic img {
  width: 100%;
}

.Client .owl-pagination {
  display: none;
}

/* Client Css Code End */

/* News Css Code Start */

.Career {
  padding-top: 70px;
  padding-bottom: 55px;
  background: var(--bg-color);
  position: relative;
}

.Embed {
  height: 350px;
}

.news_box {
  position: absolute;
  left: 35px;
  z-index: 99;
  background: rgba(255, 255, 255, 0.8);
  color: #454545;
  padding: 10px 20px;
  top: 35px;
  box-shadow: 0 6px 9px 0 rgba(0, 0, 0, 0.2);
  font-size: 2.4rem;
  line-height: 3.6rem;
}

.news_box h2 {
  margin-bottom: 0;
}

.news-section {
  background: var(--card-bg);
  box-shadow: -1px 2px 22px -9px rgba(0, 0, 0, 0.8);
  box-shadow: 0 0 8px 0 rgba(177, 177, 177, 0.3);
}

.news_Content {
  position: relative;
  background-color: #fff;
  height: 36.2rem;
  margin: 0;
}

/* .noPadding {
  padding: 0 !important;
} */

.NewsCaption {
  padding: 40px 0 0 40px;
  text-transform: uppercase;
  color: #4a90e2;
  font-size: 12px;
  text-align: left;
  line-height: 17.1px;
}

h3.NewsHeading {
  max-width: 25rem;
  font-weight: 700;
  font-style: normal;
  color: var(--text-color);
  font-size: 20px;
  line-height: 28px;
  margin: 30px 0 0 40px;
  text-align: left;
  width: 65%;
}

.newsStoryContent {
  position: relative;
  margin: 2rem 4rem 0 6rem;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform: translate3d(0, 0, 0);
}

.newsStoryContent {
  position: relative;
  margin: 2rem 4rem 0 6rem;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform: translate3d(0, 0, 0);
}

.newsBorder {
  border-left: 1px solid orange;
  position: absolute;
  height: 95%;
  bottom: 0;
  left: -13px;
}

img.arrow {
  position: absolute;
  bottom: 0;
  right: 25px;
  bottom: 25px;
  cursor: pointer;
}

.Career .owl-pagination {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 20px;
}

.Career .owl-theme .owl-controls .owl-page span {
  border-radius: 0;
  width: 8px;
  height: 8px;
  background: var(--heading-color);
}

.Career .owl-theme .owl-controls .owl-page.active span {
  background: var(--card-bg);
}

.Career .owl-theme .owl-controls .owl-page:hover span {
  background: var(--card-bg);
}

.Career .client-slider {
  margin: 0 0;
}

.titleContent {
  position: relative;
  background-color: #fff;
  height: 388px;
  background: var(--card-bg);
  /* box-shadow: 0 0 8px 0 rgba(177, 177, 177, 0.3); */
}

.whiteCaption {
  padding: 40px 0 2rem 40px;
  text-transform: uppercase;
  color: #fff;
  font-size: 1.2rem;
  text-align: left;
}

h3.CareerHead {
  max-width: 25rem;
  font-weight: 700;
  font-style: normal;
  color: #fff;
  text-align: left;
  font-style: normal;
  font-size: 20px;
  line-height: 28px;
  margin: 20px 0 0 40px;
}

.clear {
  clear: both;
}

.flot {
  text-align: right;
  padding: 40px 40px 0 40px;
}

.flot i {
  color: #0070c0;
  font-size: 25px !important;
}

h3.nHeading {
  max-width: 25rem;
  font-weight: 700;
  font-style: normal;
  color: #fff;
  font-size: 2rem;
  line-height: 2.4rem;
  margin: 4rem 0 2rem 4rem;
}

.lineBorder {
  border-left: 1px solid orange;
  position: absolute;
  height: 95%;
  bottom: 0;
  left: -13px;
}

.FeedArticle {
  color: #fff;
  max-width: 23rem;
  font-weight: 300;
  font-size: 16px;
  text-align: left;
}

.twitterFeed,
.fB,
.instaGram {
  height: 36.2rem;
}

.imageOverlayFb {
  position: absolute;
  width: 95%;
  background: rgba(59, 89, 152, 0.7);
  height: 100%;
  top: 0;
  bottom: 0;
  left: 11px;
  right: 0;
}

.whiteContent {
  top: 0;
  width: 100%;
  position: absolute;
  height: 100%;
  box-shadow: 0 0 8px 0 rgba(177, 177, 177, 0.3);
}

.newsStoryContent {
  position: relative;
  margin: 2rem 2rem 0 4rem;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform: translate3d(0, 0, 0);
}

.newsFeedA {
  word-break: break-word;
  line-height: 2.4rem;
  margin-left: 2rem;
  animation: fadein 2s;
  -moz-animation: fadein 2s;
  -webkit-animation: fadein 2s;
  -o-animation: fadein 2s;
}

.newsBorder {
  border-left: 1px solid #fff;
  position: absolute;
  height: 97%;
  bottom: 0;
  left: 2%;
}

.Career img {
  width: 100%;
  height: 100%;
}

.Relative {
  position: relative;
}

.Content2 {
  top: 0;
  width: 100%;
  position: absolute;
  height: 100%;
  text-align: left;
}

.Content2 svg {
  margin: 40px 0 0 40px;
}

.Content2 .newsStoryContent {
  margin: 2rem 4rem 40px 80px;
  color: #fff;
}

a.hoverCard {
  position: absolute;
  top: 0;
  left: 0;
  cursor: pointer;
  width: 100%;
  height: 100%;
  z-index: 2;
  transition: 1s ease;
}

.Content2 .feeds,
.fJobs {
  text-decoration: none;
  color: #fff;
  cursor: pointer;
  font-weight: 400;
  font-style: normal;
  font-size: 15px;
  line-height: 1.5rem;
}

.Content2 .newsFeedA {
  line-height: 22px;
  font-weight: 300;
}

.Content2.instagram svg path {
  fill: var(--heading-color);
}

.mt_15 {
  margin-top: 0.7rem !important;
}

.career_box .FeedArticle,
.career_box h3.CareerHead {
  color: var(--heading-color);
  /* color: var(--card-bg); */
  /* color: var(--secondary-text);
  color: #222; */
}

.career_box .whiteCaption {
  color: #00a0e3;
}

.in_number img {
  width: auto;
}

.in_number h3 {
  font-size: 36px;
  color: #00a0e3;
  line-height: 51.4px;
  font-weight: 600;
}

.in_number {
  color: var(--heading-color);
  padding: 55px 0;
}

.arrow img {
  width: auto;
}

.mt_1 {
  margin-top: 1.4rem !important;
}




/* Career Css Code End */

/* Gallery Slider Css Code Start */

.Gallery {
  background: #000;
  padding-bottom: 15px;
  position: relative;
}

.bx-wrapper .bx-controls-direction a {
  top: inherit !important;
  bottom: -15% !important;
  border-radius: 0 !important;
}

.bx-wrapper .bx-prev {
  left: 50px !important;
}

.bx-wrapper .bx-next {
  right: 45px !important;
}

.Gallery .bx-wrapper {
  box-shadow: 0 0 0 #ccc;
  border: 0 solid #fff;
  background: var(--card-bg);
}

.Gallery .container-fluid {
  width: 100%;
  padding: 0;
}

.slider {
  width: 100%;
  margin: 0 auto;
  padding: 0;
}

.slider ul.bxslider img {
  width: 100%;
  height: auto;
}

.bx-pager {
  margin: 0;
  padding: 0;
}

.bx-pager img {
  width: 100%;
  height: auto;
}

.bx-pager a {
  /* opacity: 0.1; */
}

.bx-pager a:hover,
.bx-pager a.active {
  opacity: 1;
}

.bx-pager {
  margin: 0;
  padding: 0;
  display: flex;
  gap: 10px;
  margin: 0 100px;
}

@media only screen and (min-device-width: 800px) and (max-width: 1200px) {
  .bx-pager img {
    width: 100%;
    height: auto;
  }

  .news-inner-image iframe {
    height: 355px !important;
  }
}

@media only screen and (max-device-width: 768px) {
  .Gallery .bx-wrapper {
    margin-bottom: 30px;
  }

  .bx-pager {
    gap: 5px;
    margin: 0 15px;
  }

  .bx-pager img {
    width: 100%;
    height: auto;
  }

  .menu-btn .btn-text {
    top: 3px;
  }

  .bx-wrapper .bx-controls-direction a {
    display: none !important;
  }

  .slider ul.bxslider img {
    height: 60vh;
  }

  .titleContent {
    height: 350px;
    margin: 10px 0;

  }

  #video-activity-slider .instagram-media {
    height: 1220px;
    margin: 0 auto;
    display: table;
    min-width: 100% !important;
  }


}

/* Gallery Slider Css Code End */

/* Footer Css Code Start */
footer {
  background: #191919;
  padding-top: 75px;
  padding-bottom: 20px;
}

footer ul {
  padding-left: 0;
}

footer ul li {
  list-style: none;
  text-align: left;
}

footer ul li a {
  text-decoration: none;
  color: #fff;
  text-align: left;
}

footer h3 {
  font-size: 1.5rem;
  color: #fff;
  text-align: left;
}

.footer__link {
  opacity: 0.8;
  padding: 10px 0;
}

.footer__link a {
  font-weight: 400;
  color: #fff;
  text-decoration: none;
  font-size: 14px;
  width: 17.2rem;
  height: 0;
}

.social i {
  text-shadow: none;
  color: var(--heading-color);
  color: #000 !important;
  background-color: #fff;
  padding: 10px 10px;
  height: 40px;
  width: 40px;
  text-align: center;
  font-size: 15px;
  border-radius: 60px;
  margin-right: 20px;
  justify-content: center;
  display: flex;
  flex-direction: row;
  line-height: 20px;
}

.social a {
  text-decoration: none;
}

.social {
  width: 100%;
  margin-top: 40px;
  display: flex;
  flex-direction: row;
  gap: 10px;
  justify-content: center;
}

footer .logo {
  width: 200px;
  margin: 0 auto;
  margin-top: 30px;
}

footer .logo img {
  width: 100%;
}

.Copyright {
  color: #fff;
  text-align: center;
  margin-top: 40px;
  font-size: 14px;
  font-weight: 300;
}

@media only screen and (min-device-width: 414px) and (max-width: 575px) {
  .social {
    padding: 10px 80px;
  }
}

@media only screen and (min-device-width: 768px) and (max-width: 1023px) {
  .social {
    gap: 15px;
    justify-content: center;
  }
}

/* Footer Css Code End */

/* Mega Menu */

/* Navbar */
header .navbar {
  width: 100%;
  padding: 15px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: white;
  position: relative;
}

header .menu {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  z-index: 9;
  /* position: relative; */
}

header .menu li {
  position: inherit;
  padding: 15px;
}

header .menu a {
  text-decoration: none;
  color: white;
  padding: 10px;
}

/* Mega Menu */

nav {
  display: flex;
  position: relative;
}

.nav a {
  display: block;
  text-decoration: none;
}

.nav>li>a {
  padding: 4px 10px;
}

.nav>li {
  position: relative;
  margin: 40px 0 30px 60px;
}

.nav>li>ul {
  /* // display:none; */
  background: rgba(0, 0, 0, 0.1);
  position: absolute;
  top: 100%;
  left: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px);
  transition: all 300ms ease-in-out 500ms;
  transition: all 300ms ease-in-out;
}

.nav>li>ul>li {}

.nav>li>ul>li>a {
  padding: 4px 10px;
}

.nav>li>ul>li>a:hover {
  background-color: rgba(0, 0, 0, 0.15);
}

.nav>li:hover>ul {
  /* // display:block; */
  opacity: 1;
  visibility: visible;
  transform: translateY(0px);
  transition: all 300ms ease-in-out;
  padding: 0;
  padding-top: 10px;
}

.nav>li>a:hover {
  background-color: rgba(0, 0, 0, 0.05);
}

.nav .big-nav {
  position: static;
}

.nav .big-nav>ul {
  min-height: 400px;
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  background: var(--card-bg);
  z-index: 999;
  padding-top: 20px;
}

.nav .big-nav>ul>li {
  width: 25%;
  list-style-type: none;
  /* // position:relative; */
}

.nav .big-nav>ul>li>a {
  padding: 15px 20px;
  color: var(--heading-color);
  display: block;
  text-align: left;
}

.nav .big-nav>ul>li>ul {
  display: none;
  position: absolute;
  top: 0;
  left: 25%;
  width: 75%;
}

.nav .big-nav>ul>li.show>ul {
  display: block;
  padding: 0;
}

.nav .big-nav>ul>li>ul>li {
  display: block;
  width: 100%;
  float: left;
  list-style-type: none;
  color: var(--heading-color);
}

.nav .big-nav>ul>li>ul>li.col3 {
  width: 33.3334%;
  /* padding: 0 10px; */
}

.nav .big-nav>ul>li>ul>li>a {
  font-weight: bold;
  border-bottom: 1px solid #333;
}

.nav .big-nav>ul>li>ul>li a {
  /* padding: 10px 10px; */
  color: var(--heading-color);
  border: 1px solid #ccc;
}

.nav .big-nav>ul>li>ul>li.col3 ul li {
  list-style-type: none;
}

.nav .big-nav>ul>li>ul>li.col3 ul li img {
  width: 100%;
}

.nav .big-nav>ul>li>ul>li.col3 ul {
  padding: 0;
}

.desk_menu {
  display: block;
}

.mob_menu {
  display: none;
}

@media only screen and (max-width: 950px) and (min-width: 800px) {
  .desk_menu .container {
    max-width: 90%;
  }

  header .logo {
    width: 140px;
    cursor: pointer;
    margin: 40px 0 30px 0px;
  }

  .nav>li {
    position: relative;
    margin: 40px 0 30px 30px;
  }
}

@media only screen and (max-device-width: 800px) {
  .desk_menu {
    display: none;
  }

  .mob_menu {
    display: block;
  }
}

#showSidebar div {
  width: 35px;
  height: 5px;
  background-color: #fff;
  margin: 6px 0;
}

/* Vertical Nav */

.vertical-nav {
  position: fixed;
  right: 4rem;
  /* top: 50%;
  transform: translateY(-50%); */
  top: calc(50% - 75px);
  z-index: 100;
  background-color: transparent;
  width: 11rem !important;
  display: block;
}

/* Hide vertical nav when brands section is active */
.vertical-nav.brands-active {
  display: none !important;
}

.nav-item {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin: 0 0;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
}

.nav-item span {
  padding: 8px 15px;
  color: #fff;
  background-color: #00a0e3;
  border-radius: 4px;
  font-size: 14px;
  opacity: 0;
  transform: translateX(20px);
  transition: all 0.3s ease;
  white-space: nowrap;
  margin-right: 10px;
  margin-top: 2px;
}

.nav-item::after {
  content: "";
  width: 0;
  height: 1px;
  background-color: rgba(255, 255, 255, 0.6);
  display: block;
  transition: all 0.3s ease;
  top: 10px;
}

.nav-item::before {
  content: "";
  width: 3px;
  height: 10px;
  background-color: rgba(255, 255, 255, 0.6);
  display: block;
  transition: all 0.3s ease;
  position: absolute;
  box-sizing: border-box;
  height: 1.5rem;
  width: 0.2rem;
  display: block;
  margin-top: 0.3rem;
}

.nav-item:hover span {
  opacity: 1;
  transform: translateX(0);
}

.nav-item:hover::after,
.nav-item.active::after {
  background-color: #00a0e3;
  width: 1.5rem;
}

.nav-item:hover::before,
.nav-item.active::before {
  background-color: #00a0e3;
}

.nav-item.active span {
  opacity: 1;
  transform: translateX(0);
  background-color: #00a0e3;
}

/* .section {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 2rem;
  position: relative;
  background-size: cover;
  background-position: center;
} */

@media only screen and (max-device-width: 800px) {
  .vertical-nav {
    display: none;
  }

  .nav-controls {
    width: 80%;
  }
}

.content {
  text-align: center;
  max-width: 800px;
  padding: 20px;
}

.content h2 {
  margin-bottom: 20px;
  font-size: 3rem;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.content p {
  font-size: 1.2rem;
  line-height: 1.6;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

/*About Us*/

.about {
  padding: 60px 0;
  background: var(--bg-color);
}

.about_cnt {
  width: 60%;
  margin: 0 auto;
}

.about_cnt h2 {
  margin-bottom: 25px;
  line-height: 2.5rem;
  /* display: inline-block; */
  text-align: left;
  margin-bottom: 2.5rem;
  color: var(--text-color);
}

.about_cnt p {
  font-size: 16px;
  line-height: 28px;
  text-align: justify;
  font-family: "Lato", sans-serif;
  color: var(--text-color);
}

.mission {
  background-color: #f8f8f8;
  padding: 80px 0;
  background: var(--bg-color2);
}

/* .mission .container,
.vision .container {
  width: 1170px;
} */

.mission p {
  text-align: justify;
  padding-left: 80px;
  position: relative;
  color: var(--text-color);
}

.mission p::after {
  position: absolute;
  content: "";
  left: 60px;
  top: 0;
  background: #00a0e3;
  height: 150px;
  width: 1px;
}

.imageSection img {
  width: 100%;
}

.infoHeading {
  text-align: left;
  font-weight: 700;
  font-style: normal;
  color: var(--text-color);
  font-size: 22px;
  margin: 40px 0 20px 40px;
}

.vision {
  background-color: #fff;
  padding: 80px 0;
  background: var(--bg-color);
}

.vision p {
  text-align: justify;
  padding-left: 80px;
  position: relative;
  color: var(--text-color);
  width: 90%;
}

.vision p::after {
  position: absolute;
  content: "";
  left: 60px;
  top: 0;
  background: #00a0e3;
  height: 90px;
  width: 1px;
}

@media only screen and (max-device-width: 800px) {

  .mission .container,
  .vision .container {
    width: 90%;
  }

  .infoHeading {
    margin-left: 0;
  }

  .mission p,
  .vision p {
    padding-left: 30px;
  }

  .mission p::after,
  .vision p::after {
    left: 15px;
  }

  .about {
    padding: 70px 0;
  }

  .vision {
    padding: 60px 0;
  }

  .about_cnt {
    width: 90%;
  }

  .imageSection img {
    margin-top: 100px;
  }
}

/*About Us*/

/* Contact Us */

/* Mega menu styling */
.mega-menu {
  width: 700px;
  left: 50% !important;
  transform: translateX(-50%);
  padding: 1rem 0;
  border-top: 2px solid #d32f2f;
}

.mega-menu .dropdown-item {
  padding: 0.25rem 1rem;
}

.navbar-nav .nav-link.active {
  color: #d32f2f !important;
  border-bottom: 2px solid #d32f2f;
}

.navbar-brand {
  letter-spacing: 2px;
}

@media (max-width: 991.98px) {
  .mega-menu {
    width: 100%;
    left: 0 !important;
    transform: none;
  }
}

/* Contact Us */

/* News */

.Inner-Hero .slider_cnt .cnt_more::before {
  height: 45px;
}

.banner {
  min-height: 100vh;
  background: url("../images/bannerinner.png") center center/cover no-repeat;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

/* .banner-content {
  position: absolute;
  top: 35%;
  left: 5%;
  max-width: 600px;
} */

.navbar .nav-link.active {
  border-bottom: 2px solid #fff;
  color: #fff !important;
}

.cookie-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background: var(--card-bg);
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.08);
  z-index: 9999;
  font-size: 1rem;
}

.cookie-bar a {
  color: #007bff;
}

.chevron-down-link {
  height: 100%;
}

.chevron-down {
  position: absolute;
  width: 24px;
  height: 24px;
  right: 100px;
  bottom: 80px;
}

.chevron {
  position: absolute;
  width: 28px;
  height: 2px;
  opacity: 0;
  transform: scale3d(0.5, 0.5, 0.5);
  animation: move 3s ease-out infinite;
}

.chevron:first-child {
  animation: move 3s ease-out 1s infinite;
}

.chevron:nth-child(2) {
  animation: move 3s ease-out 2s infinite;
}

.chevron:before,
.chevron:after {
  content: " ";
  position: absolute;
  top: 0;
  height: 100%;
  width: 51%;
  background: var(--card-bg);
}

.chevron:before {
  left: 0;
  transform: skew(0deg, 30deg);
}

.chevron:after {
  right: 0;
  width: 50%;
  transform: skew(0deg, -30deg);
}

@keyframes move {
  25% {
    opacity: 1;
  }

  33% {
    opacity: 1;
    transform: translateY(30px);
  }

  67% {
    opacity: 1;
    transform: translateY(40px);
  }

  100% {
    opacity: 0;
    transform: translateY(55px) scale3d(0.5, 0.5, 0.5);
  }
}

.text {
  display: block;
  margin-top: 75px;
  margin-left: -30px;
  font-family: "Helvetica Neue", "Helvetica", Arial, sans-serif;
  font-size: 12px;
  color: #fff;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0.25;
  animation: pulse 2s linear alternate infinite;
}

@keyframes pulse {
  to {
    opacity: 1;
  }
}

@media (max-width: 768px) {
  .banner-content {
    top: 50%;
    left: 5%;
    right: 5%;
    max-width: 100%;
  }

  .navbar .navbar-brand img {
    height: 30px;
  }

  .chevron-down {
    right: 30px;
    bottom: 50px;
  }

  .slider_cnt h1 {
    font-size: 25px;
    line-height: 32px;
  }

  .slider_cnt p {
    font-size: 14px;
    line-height: 22px;
  }
}

/* News */

.news_section {
  padding: 100px 0;
}

.select-wrapper {
  position: relative;
  width: 400px;
  margin: 0 10px;
  display: inline-block;
}

.select-wrapper.open ul {
  display: block;
  width: 100%;
}

.select-wrapper ul {
  position: absolute;
  left: 0;
  top: calc(100% - 1px);
  display: none;
  width: 400px;
  border: 1px solid #ccc;
  background-color: #fff;
  z-index: 1;
  padding-left: 0;
}

.select-wrapper ul li {
  cursor: pointer;
  font-size: 16px;
  line-height: 20px;
  color: #808080;
  padding: 10px 0;
  list-style: none;
}

.select-wrapper ul li:hover {
  background: rgba(229, 229, 229, 0.5);
}

.select-checked {
  position: relative;
  display: flex;
  align-items: center;
  height: 40px;
  padding-left: 20px;
  border: 1px solid #ccc;
  font-size: 16px;
  line-height: 20px;
  color: var(--heading-color);
  white-space: nowrap;
  text-overflow: ellipsis;
  cursor: pointer;
  justify-content: center;
  gap: 20px;
}

.item-body {
  display: none;
}

.item-body.active {
  display: block;
}

.newsroom-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  margin-top: 40px;
  justify-content: center;
}

.news-card {
  background: var(--card-bg);
  border-radius: 12px;
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.07);
  width: 340px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
  transition: box-shadow 0.2s;
}

.news-card:hover {
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.13);
}

.news-img {
  width: 100%;
  height: 180px;
  object-fit: cover;
}

.news_vpro {
  height: 335px;
}

.news-content {
  padding: 24px 20px 20px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.news-category {
  color: #0070c0;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 4px;
}

.news-title {
  font-size: 18px;
  font-weight: 700;
  margin: 0 0 8px 0;
  color: #222;
}

.news-summary {
  font-size: 15px;
  color: #555;
  margin-bottom: 12px;
}

.news-share {
  align-self: flex-end;
  color: #0070c0;
  cursor: pointer;
  font-size: 18px;
}

.news_section .card,
.news_section .card-img,
.news_section .card-img-top {
  border-radius: 0;
  text-align: left;
}

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


.mt-30 {
  margin-top: 1.5rem !important;
}

.text-primary.small {
  padding: 1rem 0 2rem 0rem;
  text-transform: uppercase;
  color: #4a90e2;
  font-size: 12px;
  text-align: left;
}

.news_section .card-body {
  padding: 0 2rem 2rem;
  background: var(--bg-color2);
}

.news-gallery.vpro-gal .card {
  background: var(--bg-color2);
  border-color: var(--bg-color2);
}

.card-title {
  font-style: normal;
  color: rgb(70, 70, 70);
  color: var(--heading-color);
  max-width: 25rem;
  font-weight: 700;
  text-align: left;
  font-style: normal;
  font-size: 20px;
  line-height: 28px;
  padding-bottom: 10px;
}

.card-body.why-join {
  padding: 20px;
  color: var(--heading-color);
  border: 1px solid #00a0e4;
  padding: 40px;
}

.card-body.why-join h3 {
  margin-bottom: 30px;
  text-align: center;
}

.card-body.why-join ul {
  padding-left: 20px;
}

.card-body.why-join li {
  padding-bottom: 10px;
}

.card-text {
  position: relative;
  color: var(--heading-color);
  padding-left: 40px;
  font-size: 14px;
  line-height: 1.42857;
}

.news_section .card-body ul li {
  color: var(--heading-color);
  padding-bottom: 5px;
}

.news_section .card-body ul {
  padding-left: 50px;
}

.card-text::after {
  position: absolute;
  left: 20px;
  content: "";
  background: #4a90e2;
  height: 100px;
  width: 1px;
  top: 0;
}

.card-text ul li {
  color: var(--heading-color);
  padding-bottom: 10px;
}

.news_section {
  background: var(--bg-color);
}

.news_section .card-footer {
  text-align: right;
  background-color: var(--bg-color2) !important;
}

.news_section .card-footer a i {
  color: var(--accent-color);
}

.news_section .card {
  border: 0 !important;
}

/* .NoPaddingL{
  padding: 0 !important;
}
.cmPadding{
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}
.NoPaddingR{
  padding: 0 !important;
} */
.news_section .shadow-sm {
  box-shadow: 0 0 8px 0 rgba(177, 177, 177, 0.3);
}

@media (max-width: 900px) {
  .newsroom-cards {
    flex-direction: column;
    align-items: center;
  }

  .news-card {
    width: 95%;
  }

  .select-wrapper {
    width: 90%;
    margin: 15px auto;
    display: block;
  }

  .news_vpro {
    height: auto;
  }
}

/* Brands  */

.brands {
  padding: 100px 0;

}

#Brands {
  background: var(--bg-color);
}

.brands .image-wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;

  /* margin-bottom: 50px; */
}

.brands .media {
  /* width: 30%;
  height: 30%; */
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 10px 0;
  padding: 20px;
  overflow: hidden;
  position: relative;
  box-shadow: 0 0 8px 0 rgba(177, 177, 177, 0.3);
}

.brands .media:hover {
  cursor: pointer;
}

.brands .overlay {
  background: rgba(0, 0, 0, 0.7);
  position: absolute;
  height: 100%;
  width: 100%;
  z-index: 3;
  opacity: 0;
  transition: all ease-in-out 0.5s;
}

.brands .media:hover .overlay {
  opacity: 1;
}

.brands img {
  width: 100%;
  /* z-index: 9; */
  margin: auto;
  transform: scale(1);
  transition: all ease-in-out 0.5s;
}

.brands .media:hover img {
  transform: scale(1.1);
  filter: blur(2px);
}

.brands .image-details {
  text-align: center;
  color: white;
  font-size: 20px;
  z-index: 4;
  position: absolute;
  top: 100%;
  opacity: 0;
  transition: all ease-in-out 0.5s;
}

.brands .media:hover .image-details {
  top: 40%;
  opacity: 1;
}



@media only screen and (max-width: 900px) {}

/* Brands */

/* Services */
.services {
  padding: 100px 0;
  background: url(../images/web.png) no-repeat;
  position: relative;
  height: 100vh;
}

.services .slider_cnt {
  margin-top: 15%;
  width: 85%;
}

.services .slider_cnt .cnt_more::before {
  height: 70px;
}

.services.Bg2 {
  background: url(../images/data.png) no-repeat;
}

.services.Bg3 {
  background: url(../images/network.png) no-repeat;
}

.services.Bg4 {
  background: url(../images/system.png) no-repeat;
}

.services.Bg5 {
  background: url(../images/api.png) no-repeat;
}

.services.Bg6 {
  background: url(../images/cloud.png) no-repeat;
}

.services.Bg6 .slider_cnt .cnt_more::before {
  height: 60px;
}

.services.Bg5 .slider_cnt .cnt_more::before {
  height: 50px;
}

.services.Bg4 .slider_cnt .cnt_more::before {
  height: 50px;
}

@media (max-width: 900px) {
  .services .slider_cnt {
    margin-top: 15%;
    width: 85%;
  }
}

@media (max-width: 414px) {
  .services .slider_cnt {
    margin-top: 35%;
  }
}

@media (max-width: 767px) {
  .services {
    height: 550px;
  }

  .instagram-media {
    margin-bottom: 10px !important;
  }

  .mb10 {
    margin-bottom: 10px;
  }

  .container {
    max-width: 100% !important;
  }

  .desk_view {
    display: none !important;
  }

  .mob_view {
    display: block;
  }

  .slider_cnt p {
    width: 90%;
    text-align: justify;
  }

  .services {
    background: url(../images/web_mob.png) no-repeat;
    background-size: cover;
  }

  .services.Bg2 {
    background: url(../images/data_mob.png) no-repeat;
    background-size: cover;
  }

  .services.Bg3 {
    background: url(../images/network_mob.png) no-repeat;
    background-size: cover;
  }

  .services.Bg4 {
    background: url(../images/system_mob.png) no-repeat;
    background-size: cover;
  }

  .services.Bg5 {
    background: url(../images/api_mob.png) no-repeat;
    background-size: cover;
  }

  .services.Bg6 {
    background: url(../images/cloud_mob.png) no-repeat;
    background-size: cover;
  }
}



/* Services */

/* Services Inner page for Web */
ul.servers-list {
  padding-left: 1.5rem;
}

.banner.web {
  min-height: 100vh;
  background: url(../images/web.png) center center / cover no-repeat;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.banner.data_migration {
  min-height: 100vh;
  background: url(../images/data.png) center center / cover no-repeat;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.banner.system {
  min-height: 100vh;
  background: url(../images/system.png) center center / cover no-repeat;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.banner.api {
  min-height: 100vh;
  background: url(../images/api.png) center center / cover no-repeat;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.banner.cloud {
  min-height: 100vh;
  background: url(../images/cloud.png) center center / cover no-repeat;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

/* Project */

.banner.project {
  min-height: 100vh;
  background: url(../images/project.png) center center / cover no-repeat;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.desk_view {
  display: block;
}

.mob_view {
  display: none;
}

.projectCard {
  position: relative;
  margin-bottom: 1.5rem;
}

.imageProject img {
  width: 100%;
}

.projectContent {
  top: 0px;
  width: 100%;
  position: absolute;
  height: 100%;
  background: hwb(0deg 0% 100% / 63%);
  box-shadow: rgba(177, 177, 177, 0.3) 0px 0px 8px 0px;
}

.projectTitle {
  color: #fff;
  max-width: 25rem;
  font-weight: 700;
  font-style: normal;
  color: rgb(255, 255, 255);
  font-size: 20px;
  line-height: 24px;
  margin: 40px 0px 20px 40px;
  text-align: left;
}

.projectContent .storyContent {
  margin: 20px 20px 0 70px;
  text-align: left;
  font-style: normal;
  color: rgb(255, 255, 255);
  position: absolute;
}

.storyContent p {
  padding-left: 20px;
}

.sub_title {
  margin: 20px 20px 0 40px;
  text-align: left;
  font-style: normal;
  color: rgb(255, 255, 255);
}

/* .newsStoryContent:before {
  position: absolute;
  content: "";
  left: 40px;
  top: 35px;
  width: 2px;
  height: 125px;
  background: #fe6f27;
} */

.storyContnetBox {
  padding-top: 15px;
}

.feedArticleBorder {
  position: absolute;
  height: 95%;
  bottom: 0px;
  left: 1%;
  border-left: 1px solid orange;
}

.leftArrow {
  text-align: right;
  position: absolute;
  right: 25px;
  bottom: 25px;
}

.cont-top {
  width: 100%;
  padding-top: 50px;
}

.contact-top_wrap {
  display: flex;
  flex-direction: row;
  gap: 20px;
}

.cont-icon i {
  color: #00a0e3;
  font-size: 35px;
}

.cont-des {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.cont-des h5 {
  color: var(--heading-color);
  font-weight: bold;
  text-align: left;
}

.cont-des {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.cont-des p {
  text-align: left;
  color: var(--heading-color);
}

@media (min-width: 992px) and (max-width: 1199.98px) {
  .projectTitle {
    max-width: 25rem;
    font-size: 20px;
    margin: 20px 0px 20px 40px;
  }

  .projectContent .storyContent {
    margin: 10px 0px 0 40px;
    font-size: 13px;
  }

  .storyContent p {
    padding-left: 15px;
  }

  .sub_title {
    font-size: 15px;
  }

  .storyContnetBox {
    padding-top: 5px;
  }
}

@media (max-width: 992px) {
  .projectTitle {
    max-width: 25rem;
    font-size: 40px;
    margin: 70px 0px 20px 40px;
  }

  .projectContent .storyContent {
    margin: 50px 0px 0 80px;
    font-size: 20px;
  }

  .storyContent p {
    padding-left: 15px;
  }

  .sub_title {
    font-size: 30px;
    margin: 50px 20px 0 45px;
  }

  .storyContnetBox {
    padding-top: 5px;
  }
}

#google_map.about {
  padding-top: 0;
}

.banner.contact {
  min-height: 100vh;
  background: url(../images/contact_bg.png) center center / cover no-repeat;
}

/* .banner.brands {
  min-height: 100vh;
  background: url(../images/brands.png) center center / cover no-repeat;
} */

@media (max-width: 767px) {
  .storyContnetBox {
    padding-top: 50px;
  }

  .projectContent .storyContent {
    margin: 40px 50px 0 50px;
    text-align: left;
    font-size: 20px;
  }

  .sub_title {
    margin: 30px 30px 0 30px;
    text-align: left;
    font-size: 18px;
  }

  .projectTitle {
    margin: 30px 30px 0 30px;
    font-size: 35px;
  }
}

@media (max-width: 414px) {
  .storyContnetBox {
    padding-top: 50px;
  }

  .projectContent .storyContent {
    margin: 30px 30px 0 40px;
    text-align: left;
    font-size: 15px;
  }

  .sub_title {
    margin: 20px 20px 0 20px;
    text-align: left;
    font-size: 14px;
  }

  .projectTitle {
    margin: 20px 20px 0 20px;
    font-size: 30px;
  }
}

/* News Inner Page */

.news-inner-image img {
  width: 100%;
}

.mvd-vpro-banner {
  background: url(../images/news/mvd-vpro.png) no-repeat;
  height: 33rem;
  background-size: cover;
  min-height: 33rem;
  overflow: hidden;
  position: relative;
  width: 100%;
}

.mvd-vpro-banner h5 {
  text-align: left;
}

.News-inner {
  height: 100%;
}


.news-gallery {
  padding: 80px 0;
  background-color: var(--bg-color);
}

#activity-slider .owl-pagination {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 40px;
}


.news-details-page {
  padding-top: 100px;
  padding-bottom: 80px;
  background-color: var(--bg-color2);
}

.news-gallery .owl-theme .owl-controls .owl-page span {
  border-radius: 0;
  width: 8px;
  height: 8px;
  background: var(--heading-color);
  background: #767676;
}

.news-gallery .owl-theme .owl-controls .owl-page.active span,
.owl-theme .owl-controls.clickable .owl-page:hover span {
  background: #00a0e4;
}

.news-gallery .owl-pagination {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 20px;
}



.news-details-page .container {
  width: 70%;
  margin: 0 auto;
}

.top-details {
  display: inline-block;
  font-size: 1.6rem;
  line-height: 1.1;
  font-weight: 500;
}

.top-details {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.dateTop {
  color: #0070c0;
  font-size: 16px;
  line-height: 1.1;
  font-weight: 500;
}

.news-details-cnt h2 {
  font-size: 21px;
  font-weight: 800;
  line-height: 33px;
  width: 100%;
  text-align: left;
  color: var(--heading-color);
  margin-bottom: 20px;
  margin-top: 30px;
}

.news-details-cnt p {
  font-size: 16px;
  line-height: 2;
  margin-bottom: 25px;
  text-align: left;
  color: var(--text-color);
}

.news-link {
  line-height: 1.6;
  font-size: 16px;
  color: var(--text-color);
  text-align: left;
}

.newsFeedArticle {
  color: var(--text-color);
  max-width: 23rem;
  font-weight: 300;
  font-size: 15px;
  text-align: left;
  padding-left: 20px;
}

.titleContent .News_Content {
  position: relative;
  margin: 2rem 4rem 0 6rem;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform: translate3d(0, 0, 0);
}

@media (min-width: 992px) and (max-width: 1199.98px) {
  .newsFeedArticle {
    max-width: 15rem;
    font-size: 14px;
    margin-left: -25px;
  }

  .lineBorder {
    left: -50px;
  }
}

@media (max-width: 767px) {
  .news-details-page .container {
    width: 100%;
    margin: 0 auto;
  }
}

@media (max-width: 425px) {
  .dateTop {
    font-size: 15px;
  }
}

@media only screen and (max-device-width: 1024px) and (min-width:768px) {
  .News img {
    height: 100%;
  }

  .titleContent .newsStoryContent {
    margin: 20px 30px 0 60px;
  }

  h3.CareerHead {
    margin: 0 0 0 30px;
  }

  .in_number {
    padding: 25px 0;
  }

  .whiteCaption {
    padding: 20px 0 20px 30px;
  }

  h3.NewsHeading {
    margin: 20px 0 0 20px;
  }

  h3.NewsHeading {
    margin: 20px 0 0 20px;
  }

  h3.NewsHeading {
    max-width: 100%;
    margin: 20px 0 0 40px;
    width: 85%;
  }

  .newsStoryContent {
    margin: 20px 20px 0 40px;
  }

  .Content2 .newsStoryContent {
    margin: 20px 3rem 20px 60px;
    color: #fff;
  }

  .titleContent {
    height: 338px
  }

  .mt_15.no_mt {
    margin-top: 0 !important;
  }

  .News_Content {
    padding-bottom: 30px;
  }
}

@media only screen and (max-device-width: 767px) {
  .news_box h2 {
    font-size: 16px;

  }

  .News_Content {
    min-height: 260px;
  }

  .NewsCaption {
    padding: 20px;
  }

  .whiteCaption {
    font-size: 14px;
    padding: 20px;
  }

  .FeedArticle {
    font-size: 14px;
    line-height: 22px;
  }

  .titleContent .newsStoryContent {
    margin: 20px 40px 0 60px;
  }

  .Content2 .newsFeedA {
    font-size: 14px;
  }

  .Content2 .newsStoryContent {
    margin: 20px 40px 40px 40px;
    color: #fff;
  }

  .Content2 svg {
    margin: 20px 0 0 20px;
  }

  .News img {
    width: 100%;
    height: 100%;
  }

  h3.CareerHead {
    margin: 0 0 0 20px;
  }

  .News .owl-pagination {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
  }

  h3.NewsHeading {
    font-size: 18px;
    margin: 0 10px 10px 20px;
    line-height: 22px;
    width: 85%;
  }

  .newsStoryContent {
    margin: 1rem 15px 0px 50px;
  }

  .newsFeedArticle {
    font-size: 14px;
    line-height: 22px;
    width: 260px;
  }
}



/* Gallery Section */
.gallery-section .article {
  position: relative;
  cursor: pointer;
  height: 100%;
  height: max-content;
}

.gallery-section .article:hover:before {
  opacity: 1;
}

.gallery-section .article:hover .article__cover {
  transform: translateX(-2rem) scale(1.05);
}

.gallery-section .article:hover .article__title,
.gallery-section .article:hover .article__info {
  opacity: 1;
  transform: translateX(0);
}

.gallery-section .article:hover .article__title {
  transition-delay: 0s;
}

.gallery-section .article:hover .article__info {
  transition-delay: 0.1s;
}

.gallery-section .article:before {
  content: "";
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  /* box-shadow: 0 0 10px 4px rgba(0, 0, 0, 0.47); */
  transition: opacity 0.3s ease-in-out;
}

.gallery-section .article__figure {
  position: relative;
  overflow: hidden;
  margin: 0;
  height: 100%;

  /* padding-bottom: 100%; */
}

@media only screen and (min-width: 500px) {
  /* .gallery-section .article__figure {
    padding-bottom: 100%;
  } */
}

@media only screen and (min-width: 767px) {
  /* .gallery-section .article__figure {
    padding-bottom: 66.6%;
  } */
}

@media only screen and (min-width: 1200px) {
  /* .gallery-section .article__figure {
    padding-bottom: 100%;
  } */
}

.gallery-section .article__cover {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: -2rem;
  width: calc(100% + 2rem);
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  transform: translateX(0);
  transition: transform 0.55s ease-in-out;
}

.gallery-section .article__caption {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 90%;
}

.gallery-section .article__title,
.gallery-section .article__info {
  opacity: 0;
  max-width: 25rem;
  padding: 0.85rem 1rem;
  transform: translateX(50%);
  transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
}

.gallery-section .article__title {
  background-color: rgba(15, 15, 15, 0.5);
  font-weight: 300;
  transition-delay: 0.1s;
  color: #fff;
  text-align: left;
  font-size: 20px;
}

.gallery-section .article__info {
  background-color: rgba(51, 51, 51, 0.7);
  font-size: 0.75rem;
  color: #fff;
  text-align: left;
  font-size: 15px;
}

.gallery-section .news-inner-image {
  margin-bottom: .7rem;
}

/*  MVD V-Pro  */

.mvd-vpro-page-banner {
  background: url(../images/vpro/handover.png) no-repeat;
  background-size: cover;
}

.mvd-vpro-page-banner h5 {
  text-align: left;
}

.Vpro-1 {
  margin-top: 125px;
  min-height: 300px;
}

@media only screen and (max-width: 767px) {
  .vpro-gal .titleContent {
    height: 100%;
  }

  .vpro-gal .lineBorder {
    border-left: 1px solid orange;
    position: absolute;
    height: 60%;
    top: 0;
    left: -13px;
    bottom: inherit;
  }

  .vpro-gal .Vpro-1 {
    min-height: 100%;
    margin-top: 0;
  }

  .vpro-gal .news-inner-cnt {
    margin-bottom: 10px;
  }
}

/* Detailed Gallery Section */
.gallery-inner-section .gal-article {
  position: relative;
  cursor: pointer;
  height: 100%;
  height: max-content;
}

.gallery-inner-section .gal-article:hover:before {
  opacity: 1;
}

.gallery-inner-section .gal-article:hover .article__cover {
  transform: translateX(-2rem) scale(1.05);
}

.gallery-inner-section .gal-article:hover .gal__article__title,
.gallery-inner-section .gal-article:hover .gal__article__info {
  opacity: 1;
  transform: translateX(0);
}

.gallery-inner-section .gal-article:hover .gal__article__title {
  transition-delay: 0s;
}

.gallery-inner-section .gal-article:hover .gal__article__info {
  transition-delay: 0.1s;
}

.gallery-inner-section .gal-article:before {
  content: "";
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  /* box-shadow: 0 0 10px 4px rgba(0, 0, 0, 0.47); */
  transition: opacity 0.3s ease-in-out;
}

.gallery-inner-section .gal__article__figure {
  position: relative;
  overflow: hidden;
  margin: 0;
  height: 100%;

  /* padding-bottom: 100%; */
}

@media only screen and (min-width: 500px) {
  /* .gallery-inner-section .gal__article__figure {
    padding-bottom: 100%;
  } */
}

@media only screen and (min-width: 767px) {
  /* .gallery-inner-section .gal__article__figure {
    padding-bottom: 66.6%;
  } */
}

@media only screen and (min-width: 1200px) {
  /* .gallery-inner-section .gal__article__figure {
    padding-bottom: 100%;
  } */
}

.gallery-inner-section .article__cover {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: -2rem;
  width: calc(100% + 2rem);
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  transform: translateX(0);
  transition: transform 0.55s ease-in-out;
}

.gallery-inner-section .gal__article__caption {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 90%;
}

.gallery-inner-section .gal__article__title,
.gallery-inner-section .gal__article__info {
  opacity: 0;
  max-width: 25rem;
  padding: 0.85rem 1rem;
  transform: translateX(50%);
  transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
}

.gallery-inner-section .gal__article__title {
  background-color: rgba(15, 15, 15, 0.5);
  font-weight: 300;
  transition-delay: 0.1s;
  color: #fff;
  text-align: left;
  font-size: 20px;
}

.gallery-inner-section .gal__article__info {
  background-color: rgba(51, 51, 51, 0.7);
  font-size: 0.75rem;
  color: #fff;
  text-align: left;
  font-size: 15px;
}

.gallery-inner-section .news-inner-image {
  margin-bottom: 1.5rem;
}

/* Career Page Start */
.career-section {
  width: 100%;
  padding: 100px 0;
  background: var(--bg-color);
}

.career-section .tab {
  overflow: hidden;
  border: 0px solid #ccc;
  background-color: #f2f2f2;
  background: var(--bg-color);

}

.career-section .tab button.active {
  background-color: #fff;
  border-top: 1px solid #e1e1e1;
  border-left: 1px solid #e1e1e1;
  border-right: 1px solid #e1e1e1;
  border-bottom: 2px solid #00a0e4;
  background: var(--bg-color2);
}

.career-section .tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
  font-size: 17px;
  border-top: 1px solid #f1f1f1;
  border-left: 1px solid #f1f1f1;
  border-right: 1px solid #f1f1f1;
  width: 33.3%;
  color: var(--heading-color);
}

.career-section .tabcontent {
  display: none;
  padding: 0;
  border: 1px solid #e1e1e1;
  border-top: none;
}

.career-section table {
  width: 100%;
  border-collapse: collapse;
  overflow: hidden;
  border: 0 solid #e1e1e1;
  background: var(--card-bg);
  color: #231f20;
  font-size: 17px;
  font-weight: 400;
}

.career-section tr {
  border-top: 1px solid #e1e1e1;
}

.career-section table th {
  padding: 20px;
  text-align: left;
  color: var(--border-color);
}

.career-section table td {
  color: var(--border-color);
}

.career-section table td {
  padding: 12px 20px;
  vertical-align: middle;
  font-weight: 400;
  font-size: 17px;
  text-align: left;
}

.career-section table a.readMore {
  color: #231f20;
  font-size: 14px;
  line-height: 13px;
  display: inline-block;
  text-transform: uppercase;
  position: relative;
}

@media (max-width: 414px) {
  .career-section table td {
    padding: 5px 10px;
    font-size: 13px;
  }

  .career-section table a.readMore {
    font-size: 12px;
  }

  .career-section table th {
    font-size: 13px;
  }

  .career-section .tab button {
    font-size: 14px;
    padding: 10px 15px;
  }
}

/* Career Page Start */

/* fixed socials start */
.fixed-socials {
  position: fixed;
  bottom: 20px;
  right: 45px;
  z-index: 99;
}

.fixed-socials a {
  color: #fff;
  display: block;
  height: 40px;
  position: relative;
  text-align: center;
  line-height: 45px;
  width: 40px;
  margin-bottom: 1px;
  z-index: 2;
  border-radius: 50%;
  margin-bottom: 10px;
}

.fix-wp {
  background: linear-gradient(270deg,
      rgba(166, 211, 37, 1) 35%,
      rgba(42, 198, 100, 1) 100%);
  border-radius: 50%;
}

.fix-ph {
  background: linear-gradient(270deg,
      rgba(0, 160, 227, 1) 35%,
      rgba(8, 135, 188, 1) 100%);
  border-radius: 50%;
}

.fixed-socials .fa,
.far,
i.fas,
.fab {
  font-size: 20px !important;
  margin-right: 0 !important;
}

/* fixed socials end */

/* onam celebration page start*/
.onam-page-banner {
  background: url(../images/project/v-pro.png) no-repeat;
  background-size: cover;
}

.onam-page-banner h5 {
  text-align: left;
}

@media only screen and (max-width: 767px) {
  .onam-gal .titleContent {
    height: 100%;
  }

  .onam-gal .lineBorder {
    border-left: 1px solid orange;
    position: absolute;
    height: 60%;
    top: 0;
    left: -13px;
    bottom: inherit;
  }

  .onam-gal .onam-1 {
    min-height: 100%;
  }

  .onam-gal .news-inner-cnt {
    margin-bottom: 10px;
  }

  .Testimonial {
    padding-top: 60px;
  }

  .cnt_more {
    padding-left: 45px;
  }

  .slider_cnt .cnt_more::before {
    left: 25px;
  }
}

/* onam celebration page end*/

/* onam celebration page start*/
.onam-page-banner {
  background: url(../images/project/v-pro.png) no-repeat;
  background-size: cover;
}

.onam-page-banner h5 {
  text-align: left;
}

.onam-1 {
  margin-top: 110px;
}

@media only screen and (max-width: 767px) {
  .ai-gal .titleContent {
    height: 100%;
  }

  .ai-gal .lineBorder {
    border-left: 1px solid orange;
    position: absolute;
    height: 60%;
    top: 0;
    left: -13px;
    bottom: inherit;
  }

  .ai-gal .onam-1 {
    min-height: 100%;
  }

  .ai-gal .news-inner-cnt {
    margin-bottom: 10px;
  }
}

/* onam celebration page end*/

/* Careers Inner Page Section Start */
.career_form {
  padding: 40px 30px;
  background-color: #f1f1f1;
}

.careerinner {
  padding: 100px 0;
  align-items: unset;
}

.careerinner .career_form {
  position: relative;
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
}

.form-group {
  margin-bottom: 15px;
  width: 100%;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.career .col,
.col-1,
.col-10,
.col-11,
.col-12,
.col-2,
.col-3,
.col-4,
.col-5,
.col-6,
.col-7,
.col-8,
.col-9,
.col-auto,
.col-lg,
.col-lg-1,
.col-lg-10,
.col-lg-11,
.col-lg-12,
.col-lg-2,
.col-lg-3,
.col-lg-4,
.col-lg-5,
.col-lg-6,
.col-lg-7,
.col-lg-8,
.col-lg-9,
.col-lg-auto,
.col-md,
.col-md-1,
.col-md-10,
.col-md-11,
.col-md-12,
.col-md-2,
.col-md-3,
.col-md-4,
.col-md-5,
.col-md-6,
.col-md-7,
.col-md-8,
.col-md-9,
.col-md-auto,
.col-sm,
.col-sm-1,
.col-sm-10,
.col-sm-11,
.col-sm-12,
.col-sm-2,
.col-sm-3,
.col-sm-4,
.col-sm-5,
.col-sm-6,
.col-sm-7,
.col-sm-8,
.col-sm-9,
.col-sm-auto,
.col-xl,
.col-xl-1,
.col-xl-10,
.col-xl-11,
.col-xl-12,
.col-xl-2,
.col-xl-3,
.col-xl-4,
.col-xl-5,
.col-xl-6,
.col-xl-7,
.col-xl-8,
.col-xl-9,
.col-xl-auto {
  position: relative;
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
}

.form-check-inline label {
  margin: 10px;
}

.form-check .form-check-input {
  float: left;
  margin-left: 0 !important;
}

/* Careers Inner Page Section End */

/* MVD Virtual PRO Content Section Start */

.news-details-cnt p {
  text-align: left;
}

/* ========== Background Banner ========== */

.banner.ai-contest-banner {
  /* background: url(../images/news/ai_contest.jpg) center center / cover no-repeat; */
}

.ai-video-banner {}

.banner.brand-banner {
  background: url(../images/brands.png) center center / cover no-repeat;
}

.banner.news-banner {
  background: url(../images/banner/news.jpg) center center / cover no-repeat;
}

.banner.about-banner {
  background: url(../images/banner/about1.jpg) center center / cover no-repeat;
}

.banner.services-banner {
  background: url(../images/banner/services.jpg) center center / cover no-repeat;
}

.banner.career-banner {
  background: url(../images/banner/career.jpg) center center / cover no-repeat;
}

.banner.crudomark-banner {
  background: url(../images/banner/crudomark.jpg) center center / cover no-repeat;
}

.banner.bsg-banner {
  background: url(../images/banner/bsg1.jpg) center center / cover no-repeat;
}

/* ---------------------------------------------------------------- BSG Start -------------------------------------------------------------------- */
.bsg-hero {
  position: relative;
  /* height:100vh; */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 100px 0;
  background: url("../images/banner/bsg1.jpg") center center/cover no-repeat;
  width: 100%;
  color: white;
}

/* background image with subtle dark overlay */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.hero__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transform: scale(1.02);
  filter: saturate(0.95) contrast(0.98);
  z-index: 0;
}

/* subtle vignette for focus */
.hero__vignette {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.hero__container {
  position: relative;
  z-index: 3;
  width: 100%;
  max-width: 1200px;
  margin: auto;
}

.hero-row {
  display: grid;
  grid-template-columns: 1fr 420px;
  align-items: center;
  margin-left: 100px;
  gap: 5rem;
}

/* heading */
.bsg-heading h1 {
  font-size: 60px;
  font-weight: 900;
}

.bsg-heading h3 {
  font-size: 50px;
  font-weight: 800;
}

.bsg-heading p {
  font-size: 30px;
  font-weight: 400;
}

/* Left announcement card */
.announce {
  padding: 36px;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.685));
  box-shadow: 0 10px 40px rgba(2, 6, 12, 0.6);
  backdrop-filter: blur(1px);
}

.announce h1 {
  font-weight: 800;
  font-size: 30px;
  line-height: 1.02;
  margin-bottom: 8px;
  letter-spacing: 0.2px;
}

.announce h2 {
  font-weight: 500;
  font-size: 25px;
  line-height: 1.02;
  margin-bottom: 8px;
  letter-spacing: 0.2px;
}

/* right form glass */
.apply-card {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.685));
  border-radius: 14px;
  padding: 22px;
  border: 1px solid var(--glass-border);
  box-shadow: 0 12px 30px rgba(2, 6, 12, 0.5);
  backdrop-filter: blur(8px) saturate(120%);
}

.apply-card h4 {
  margin: 0 0 12px 0;
  font-weight: 700;
}

.form-control {
  border-radius: 10px;
  height: 44px;
  box-shadow: none;
}

.form-control::placeholder {
  color: #9aa4b2;
  opacity: 1;
}

.apply-card .btn-submit {
  width: 100%;
  height: 44px;
  border-radius: 10px;
  background: dodgerblue;
  color: white;
  font-weight: 700;
  border: none;
  box-shadow: 0 10px 22px rgba(107, 77, 245, 0.18);
}

/* subtle floating ornament bottom-right */
.hero-ornament {
  position: absolute;
  right: 22px;
  bottom: 12px;
  width: 60px;
  height: 60px;
  border-radius: 8px;
  background: linear-gradient(180deg,
      rgba(255, 255, 255, 0.02),
      rgba(255, 255, 255, 0.01));
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.5);
  z-index: 4;
  opacity: 0.35;
}

/* responsiveness */
@media (max-width: 992px) {
  .hero-row {
    grid-template-columns: 1fr;
  }

  .apply-card {
    margin-top: 18px;
  }

  :root {
    --hero-height: 760px;
  }
}

@media (max-width: 576px) {
  .announce h1 {
    font-size: 26px;
  }

  .announce {
    padding: 20px;
    border-radius: 12px;
  }

  .apply-card {
    padding: 16px;
    border-radius: 12px;
  }
}

/* Overlay background */
.popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 999;
}

/* Popup box */
.popup-box {
  background: var(--card-bg);
  width: 50%;
  padding: 25px;
  border-radius: 8px;
  position: relative;
  animation: fadeIn 0.3s ease-in-out;
}

/* Animation */
@keyframes fadeIn {
  from {
    transform: scale(0.7);
    opacity: 0;
  }

  to {
    transform: scale(1);
    opacity: 1;
  }
}

/* Close button */
.close-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 22px;
  cursor: pointer;
  color: #555;
}

/* Inputs */
.popup-box input,
.popup-box textarea {
  width: 100%;
  padding: 10px;
  margin: 10px 0;
  border: 1px solid #ccc;
  border-radius: 5px;
}

.popup-box button {
  width: 100%;
  padding: 10px;
  background: #007bff;
  border: none;
  color: white;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;
}

@media (max-width: 767px) {
  .popup-box {
    width: 85%;
  }
}

/* Blog Slider Styles */
.blog-slide {
  width: 100%;
  height: 100%;
}

.blog-item {
  display: flex;
  width: 100%;
  height: 443px;
}

.no_mt {
  margin-top: 0 !important;
}

.blog-image {
  flex: 0 0 50%;
  background-size: cover;
  background-position: center;
  position: relative;

}

.blog-content {
  flex: 0 0 50%;
  background-color: var(--card-bg);
  padding: 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  text-align: left;
}

.blog-label {
  color: #339af0;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 20px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.blog-title {
  color: var(--heading-color);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 30px;
}

.blog-desc-group {
  display: flex;
  align-items: stretch;
  margin-bottom: 20px;
}

.blog-desc-line {
  width: 2px;
  background-color: #ffa500;
  /* Orange accent */
  margin-right: 15px;
}

.blog-desc {
  color: #e0e0e0;
  color: var(--heading-color);
  font-size: 14px;
  line-height: 1.6;
  margin: 0;
  flex: 1;
}

.blog-arrow-link {
  position: absolute;
  bottom: 30px;
  left: 50%;
  color: #fff;
  font-size: 20px;
  transition: transform 0.3s ease;
}

.blog-arrow-link:hover {
  transform: translateX(5px);
  color: #339af0;
}

/* Owl Dots Customization for Blog Slider */
#blog-slider .owl-pagination {
  position: absolute;
  bottom: 20px;
  left: 25%;
  /* Center in the image half */
  transform: translateX(-50%);
  z-index: 10;
}

#blog-slider .owl-page span {
  width: 8px;
  height: 8px;
  background: rgba(255, 255, 255, 0.5);
  margin: 0 5px;
  border-radius: 0;
  /* Square dots or keep round? Design looks squareish/small */
}

#blog-slider .owl-page.active span {
  background: #fff;
}

/* Responsiveness */
@media (max-width: 768px) {
  .blog-item {
    flex-direction: column;
    height: auto;
  }

  .blog-image,
  .blog-content {
    flex: 0 0 100%;
    width: 100%;
  }

  .blog-image {
    height: 200px;
  }

  #blog-slider .owl-pagination {
    left: 50%;
  }
}


.blog-page {
  padding: 170px 0;
  background: var(--bg-color);
}

/* Featured Story Section Styles */

.author-profile {
  padding-top: 0;
  padding-bottom: 20px;
}

.author-avatar-wrapper {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  /* padding: 5px;
  border: 4px solid #f0f0f0; */
  /* Light gray border ring */
  margin-bottom: 30px;
  overflow: hidden;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  background: white;
  margin: 0 auto;
  margin-bottom: 30px;
}

.author-avatar {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: contain;
}

.author-name {
  font-size: 36px;
  font-weight: 400;
  /* Lighter weight as per design */
  color: var(--heading-color);
  margin-bottom: 10px;
  font-family: inherit;
  /* Use site font */
}

.author-role {
  font-size: 16px;
  color: #777;
  font-weight: 400;
  margin-bottom: 30px;
}

.author-bio p {
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-color);
  margin-bottom: 20px;
  text-align: justify;
}

/* Featured Content Column */

.featured-content {
  padding-top: 40px;
  padding-bottom: 20px;
}

.featured-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
  font-size: 12px;
  font-weight: 700;
  color: #339af0;
  /* Blue color */
  text-transform: uppercase;
}

.featured-header a {
  color: #339af0;
  text-decoration: none;
}

.breadcrumb-separator {
  color: #ccc;
  font-size: 10px;
}

.featured-story-title {
  font-size: 32px;
  font-weight: 700;
  color: var(--heading-color);
  margin-bottom: 30px;
}

.featured-media {
  width: 100%;
  background: #000;
  border-radius: 12px;
  overflow: hidden;
  aspect-ratio: 16/9;
  /* Standard video aspect ratio */
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.media-placeholder {
  color: white;
  text-align: center;
}

.gemini-logo {
  font-size: 48px;
  background: linear-gradient(90deg, #4285f4, #9b72cb, #d96570);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: bold;
}

.featured-title {
  text-align: left;
  font-size: 36px;
  margin-bottom: 28px;
  letter-spacing: -.25px;
  line-height: 44px;
  color: var(--heading-color)
}

/* Responsive */
@media (max-width: 991px) {
  .author-profile {
    text-align: center;
    margin-bottom: 40px;
  }

  .author-avatar-wrapper {
    margin: 0 auto 20px;
  }
}

/* Updated Featured Article Styles */
.featured-article {
  margin-bottom: 60px;
  margin-top: 40px;
}

.featured-article-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: #339af0;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-bottom: 15px;
  text-align: left;
}

.featured-article-title {
  font-size: 42px;
  font-weight: 700;
  color: var(--heading-color);
  line-height: 1.2;
  margin-bottom: 15px;
  text-align: left;
}

.featured-article-desc {
  font-size: 18px;
  line-height: 1.6;
  color: var(--text-color);
  margin-bottom: 25px;
  max-width: 800px;
  text-align: left;
}

.read-article-link {
  display: block;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 700;
  color: var(--heading-color);
  text-transform: uppercase;
  text-decoration: none;
  letter-spacing: 0.5px;

}

.read-article-link i {
  margin-left: 10px;
}

.read-article-link i {
  font-size: 14px;
}

/* All the Latest Section Styles */
.latest-news-section {
  padding-top: 20px;
}

.section-heading {
  font-size: 28px;
  font-weight: 700;
  color: var(--heading-color);
  margin-bottom: 30px;
}

.blog-page .news-card {
  border: 1px solid var(--bg-color2);
  ;
  /* Light gray border */
  border-radius: 8px;
  padding: 25px;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: box-shadow 0.3s ease;
  background: white;
  background: var(--bg-color2);
  min-height: 200px;
  flex-direction: row;
  width: 100%;
  /* Minimum height for consistency */
}

.news-card:hover {
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}

.news-card-body {
  /* flex: 1; */
  padding-right: 15px;
}

.news-meta {
  font-size: 10px;
  font-weight: 700;
  color: #777;
  /* Gray text */
  text-align: left;
  margin-bottom: 15px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Highlight the category part with color if needed, but plain is fine for now */

.blog-page .news-title {
  font-size: 18px;
  font-weight: 400;
  color: #222;
  text-align: left;
  /* color: var(--bg-color2); */
  color: var(--text-color);
  line-height: 1.5;
  margin: 0;
}

.news-thumbnail {
  flex: 0 0 100px;
  /* Fixed width for thumbnail */
  width: 100px;
  height: 75px;
  overflow: hidden;
  border-radius: 4px;
  margin-left: 20px;
  background: #000;
  margin-top: 20px;
}

.news-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Helper for spacing */
.mb-4 {
  margin-bottom: 30px;
}

/* Dark Mode Adjustments if vars exist */
[data-theme="dark"] .news-card {
  background-color: var(--card-bg);
  border-color: #444;
}

/* Interactive Page Effects */

/* Sticky Sidebar */
.author-profile {
  position: -webkit-sticky;
  /* Safari */
  position: sticky;
  top: 30px;
  /* Adjust based on header height */
  height: fit-content;
}

/* Enhanced News Card Hover Effects */
.news-card {
  transform: translateY(0);
  transition: transform 0.3s cubic-bezier(0.165, 0.84, 0.44, 1),
    box-shadow 0.3s cubic-bezier(0.165, 0.84, 0.44, 1),
    background-color 0.3s ease;
}

.news-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
  border-color: #d0d0d0;
}

.news-card:hover a {
  text-decoration: underline !important;
}

.blog-social .social {
  display: flex;
  width: auto;
  justify-content: flex-start;
  gap: 20px;
}

.blog-social {
  margin-top: 50px !important;
  padding-top: 30px;
  border-top: 1px solid var(--heading-color);
}

.blog-social .social i {
  border-radius: inherit;
}

.blog-social .social a:hover i {
  background: #00a0e4;
  color: #fff !important;
}

.blog-social .social h2 {
  color: var(--heading-color);
}

/* Card Entry Animation */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translate3d(0, 20px, 0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

.news-card {
  animation: fadeInUp 0.6s ease-out forwards;
  opacity: 0;
  /* Prepare for animation */
}

/* Stagger animation delays for cards */
.col-md-6:nth-child(1) .news-card {
  animation-delay: 0.1s;
}

.col-md-6:nth-child(2) .news-card {
  animation-delay: 0.2s;
}

.col-md-6:nth-child(3) .news-card {
  animation-delay: 0.3s;
}

.col-md-6:nth-child(4) .news-card {
  animation-delay: 0.4s;
}

/* Read Article Link Hover */
.read-article-link i {
  transition: transform 0.2s ease;
}

.read-article-link:hover i {
  transform: translateX(4px);
}

/* Scroll Effects for Featured Content */

.featured-content {
  /* position: -webkit-sticky;
    position: sticky;
    top: 80px; */
  /* Adjust based on navbar height */
  z-index: 90;
  background-color: var(--bg-color);
  /* Ensure background is opaque */
  padding-bottom: 20px;
  transition: all 0.3s ease;
  border-bottom: 1px solid transparent;
}

/* Scrolled State */
.featured-content.scrolled {
  padding-bottom: 10px;
  border-bottom-color: #eee;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

.featured-content.scrolled .author-avatar-wrapper {
  width: 60px;
  height: 60px;
}

.article:hover:before.scrolled .author-avatar-wrapper {
  width: 60px;
  height: 60px;
}

.featured-content.scrolled .featured-article {
  margin-bottom: 10px;
}

.featured-content.scrolled .featured-article-label {
  margin-bottom: 5px;
  opacity: 0.8;
}

.featured-content.scrolled .featured-article-title {
  font-size: 24px;
  /* Shrink title */
  margin-bottom: 5px;
}

.featured-content.scrolled .featured-article-desc {

  /* Hide description */
  opacity: 0;
  max-height: 0;
  margin: 0;
  overflow: hidden;
  transition: opacity 0.2s ease;
}

.featured-content.scrolled .read-article-link {
  font-size: 10px;
}

/* Update News Meta for Blue Categories */
.news-category {
  color: #1a73e8;
  /* Standard Google Blue or match theme */
  font-weight: 700;
}

.news-card {
  cursor: pointer;
  /* Indication it's clickable */
}

/* Hide Author Bio on Scroll */
.author-profile.scrolled .author-bio {
  display: none;
}

.blog-header.header-section nav a {
  color: var(--heading-color)
}

.blog-page .news-card-body {
  padding-right: 0;
}

/* Smooth resize for avatar */
.author-avatar-wrapper {
  transition: all 0.3s ease;
}

/* Shrink Avatar on Scroll */
.author-profile.scrolled .author-avatar-wrapper {
  width: 80px;
  height: 80px;
  border-width: 2px;
  /* Thinner border */
  margin-bottom: 10px;
  /* Reduced margin */
}

.footer {
  margin-top: 30px;
}

.footer-one {
  margin-top: 10px;
  display: flex;
  color: #fff;
  gap: 10px;
  text-align: right;
  justify-content: flex-end;
}

.footer-one h6 {
  font-size: 13px;
}


.NewsSlider {
  background: var(--bg-color2);
  padding: 60px 0;
}

.NewsSlider h2 {
  margin-bottom: 25px;
  line-height: 2.5rem;
  /* display: inline-block; */
  text-align: center;
  margin-bottom: 2.5rem;
  color: var(--text-color);
}

.NewsSlider p {
  color: var(--text-color);
  width: 80%;
  margin: 0 auto;
}

/* our-team */

.banner.team-banner {
  background: url(../images/team.jpg) center center/cover no-repeat;
}


.team {
  background: url(../images/team/leaderBdg.svg);
}

.our-team {
  padding: 80px 0;
  background: var(--bg-color2);
}

.our-team h2 {
  text-align: left;
  line-height: 2.5rem;
  margin-bottom: 2.5rem;
  color: var(--text-color);
}

/* Leadership Section Styles */
.leadership-card {
  position: relative;
  width: 100%;
  margin-bottom: 0;
  overflow: hidden;
}

.leadership-image {
  width: 50%;
  height: 100vh;
  /* Takes full viewport height or adjust as needed */
  max-height: 900px;
  overflow: hidden;
  position: relative;
}

.leadership-image img {
  /* width: 100%; */
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

.leadership-info-box {
  position: absolute;
  bottom: 10%;
  right: 15%;
  /* Positioned to the right */
  background: rgba(20, 20, 20, 0.95);
  /* Dark background with slight transparency */
  padding: 40px;
  max-width: 500px;
  color: #fff;
  backdrop-filter: blur(5px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  z-index: 10;
}

.leadership-info-box h2 {
  font-size: 32px;
  font-weight: 700;
  margin-bottom: 15px;
  color: #fff;
  font-family: 'Lato', sans-serif;
}

.leadership-info-box p {
  font-size: 16px;
  line-height: 1.6;
  color: #ccc;
  margin-bottom: 30px;
  font-weight: 300;
}

.leadership-info-box .connector-line {
  width: 2px;
  height: 40px;
  background-color: var(--accent-color, #e2a330);
  /* Use accent color or gold/yellow from image */
  position: absolute;
  left: 0;
  top: 40px;
  display: none;
  /* Hidden for now, matching the box style more simply first like the image */
}


.leadership-info-box p {
  border-left: 1px solid #555;
  padding-left: 20px;
  margin-left: 5px;
}

.btn-full-profile {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background-color: #bfa15f;
  /* Gold-ish color from the screenshot button */
  color: #000;
  padding: 12px 25px;
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
  transition: all 0.3s ease;
  border: none;
}

.btn-full-profile:hover {
  background-color: #d4b46c;
  color: #000;
  transform: translateX(5px);
}

.btn-full-profile i {
  transition: transform 0.3s ease;
}

.btn-full-profile:hover i {
  transform: translateX(5px);
}

/* Responsive adjustments */
@media (max-width: 991px) {
  .leadership-info-box {
    right: 5%;
    bottom: 5%;
    max-width: 450px;
  }
}

@media (max-width: 768px) {
  .leadership-image {
    height: auto;
    max-height: 600px;
  }

  .leadership-info-box {
    position: relative;
    right: auto;
    bottom: auto;
    width: 100%;
    max-width: 100%;
    margin-top: -50px;
    /* Overlap slightly */
    margin-left: 20px;
    margin-right: 20px;
    width: calc(100% - 40px);
  }

  .blog-social .social {
    padding: 0;
  }
}

/* Leadership Section Styles */
.leadership-card {
  position: relative;
  width: 100%;
  margin-bottom: 0;
  overflow: hidden;
}



.leadership-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

.leadership-info-box {
  position: absolute;
  bottom: 10%;
  right: 15%;
  /* Positioned to the right */
  background: rgba(20, 20, 20, 0.95);
  /* Dark background with slight transparency */
  padding: 40px;
  max-width: 500px;
  color: #fff;
  backdrop-filter: blur(5px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  z-index: 10;
}

.leadership-info-box h2 {
  font-size: 32px;
  font-weight: 700;
  margin-bottom: 15px;
  color: #fff;
  font-family: 'Lato', sans-serif;
  text-align: left;
}

.leadership-info-box p {
  font-size: 16px;
  line-height: 1.6;
  color: #ccc;
  margin-bottom: 30px;
  font-weight: 300;
  text-align: left;
}

.leadership-info-box .connector-line {
  width: 2px;
  height: 40px;
  background-color: var(--accent-color, #e2a330);
  /* Use accent color or gold/yellow from image */
  position: absolute;
  left: 0;
  top: 40px;
  display: none;
  /* Hidden for now, matching the box style more simply first like the image */
}

/* Border accent on the left of the text content if needed, 
   based on the image it looks like a clean box but let's check closely. 
   There seems to be a vertical line in the text or just paragraph indentation. 
   The image has a vertical line next to the paragraph. */

.leadership-info-box p {
  border-left: 1px solid #555;
  padding-left: 20px;
  margin-left: 5px;
}

.btn-full-profile {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background-color: #00a0e3;
  /* Gold-ish color from the screenshot button */
  color: #000;
  padding: 12px 25px;
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
  transition: all 0.3s ease;
  border: none;
}

.btn-full-profile:hover {
  background-color: #d4b46c;
  color: #000;
  transform: translateX(5px);
}

.btn-full-profile i {
  transition: transform 0.3s ease;
}

.btn-full-profile:hover i {
  transform: translateX(5px);
}

/* Responsive adjustments */
@media (max-width: 991px) {
  .leadership-info-box {
    right: 5%;
    bottom: 5%;
    max-width: 450px;
  }
}

@media (max-width: 768px) {
  .leadership-image {
    height: auto;
    max-height: 600px;
  }

  .leadership-info-box {
    position: relative;
    right: auto;
    bottom: auto;
    width: 100%;
    max-width: 100%;
    margin-top: -50px;
    /* Overlap slightly */
    margin-left: 20px;
    margin-right: 20px;
    width: calc(100% - 40px);
  }
}


.leadership {
  background: var(--bg-color2);
  padding: 100px 0;
}

.leader-card {
  border: 1px solid #ccc;
}

.leader-info-box {
  margin: 30px 0;
}

.img-area {
  position: relative;
  margin-top: 100px !important;
}

.img-area h2 {
  text-align: center;
  color: var(--heading-color);
  margin-bottom: 50px;
}

.img-area {
  width: 1170px;
  margin: 2% auto;
}

.single-img {
  position: relative;
  width: 30%;
  float: left;
  margin: 0 1%;
}

.image {
  display: block;
  width: 100%;
  height: auto;
}

.img-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #00a0e3;
  overflow: hidden;
  width: 100%;
  height: 0;
  transition: .5s ease;
}

.single-img:hover .img-overlay {
  height: 40%;
}

.leadership .text {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  color: #fff;
  text-align: center;
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-weight: 500;
  margin: 0 !important;
}

.text span {
  font-weight: 300;
  font-size: 14px;
  text-transform: capitalize;
}

/* ignore the code below */


.link-area {
  position: fixed;
  bottom: 20px;
  left: 20px;
  padding: 15px;
  border-radius: 40px;
  background: tomato;
}

.link-area a {
  text-decoration: none;
  color: #fff;
  font-size: 25px;
}

.leadershipBox {
  position: absolute;
  left: 2px;
  z-index: 99;
  background: rgba(255, 255, 255, 0.8);
  color: #454545;
  padding: 5px 20px;
  top: -35px;
  box-shadow: 0 6px 9px 0 rgba(0, 0, 0, 0.2);
  font-size: 2rem;
}

@media (max-width: 767px) {
  .leadership-image {
    width: 100%;
    height: 100vh;
    max-height: 900px;
    overflow: hidden;
    position: relative;
  }

  .single-img {
    position: relative;
    width: 100%;
    float: left;
    margin: 2% 0%;
  }
}


/* Smart Infrastructure */

.banner.infrastructure {
  background: url(../images/infrastructure.png) no-repeat;
}

.project-section {
  background: var(--bg-color);
  padding: 70px 0;
}

.project-title {
  font-size: 2.5rem;
  font-weight: 700;
  color: #00a0e3;
}

.project-subtitle {
  color: #fff;
  margin-bottom: 40px;
}

.feature-box {
  background: var(--card-bg);
  padding: 30px;
  border-radius: 5px;
  color: #fff;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
  height: 100%;
  color: var(--text-color);
}

.feature-box p {
  text-align: justify;
  margin-top: 20px;
}

.feature-box ul li {
  text-align: left;
  padding: 5px 0;
}

.feature-box ul {
  margin-top: 20px;
}


.project-section .btn-primary {
  background: #00a0e3;
}

.highlight {
  color: #00a0e3;
  font-weight: 600;
}

.stats-box {
  background: #00a0e3;
  color: white;
  border-radius: 15px;
  padding: 30px;
  text-align: center;
}


.register-section {
  background: var(--card-bg);
  padding: 90px 0;
}

.form-wrap {
  background: #f7f9fc;
  background: var(--bg-color);
  color: var(--text-color);
  padding: 45px;
  border-radius: 15px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .08);
}

.form-title {
  font-weight: 700;
  color: #00a0e3;
  text-align: left;
  margin-bottom: 20px;
}

.form-control,
.form-select {
  border-radius: 12px;
  padding: 12px;
  background: var(--bg-color);
}

.submit-btn {
  background: #00a0e3;
  color: #fff;
  border-radius: 30px;
  padding: 12px 40px;
  border: none;
}

.info-box {
  padding-right: 40px;
}

.info-box p {
  text-align: left;
  color: var(--text-color);
}

.info-box ul li {
  text-align: left;
  padding: 5px 0;
  color: var(--text-color);
}

.who_can_apply {
  background: var(--bg-color);
  padding: 20px;
  border-radius: 15px;
  text-align: center;
}

.who_can_apply strong {
  color: #00a0e3;
}

.who_can_apply p {
  text-align: center;
}



/* BMO HR Platform */

.bmo-hr-platform {
  background: var(--bg-color);
}


.bmo-hr-platform h2 {
  color: var(--text-color);
}

.bmo-hr-platform .card {
  background: var(--bg-color2);
  background: transparent;
  min-height: 420px;
  padding-top: 20px;
}

.bmo-hr-platform .card.no-height {
  min-height: auto;
  padding-bottom: 50px;
}


.bmo-hr-platform .card.no-height form {
  margin-top: 30px;
}

.bmo-hr-platform .card form {
  margin-top: 60px;
}

.bmo-hr-platform .card form input {
  background: var(--bg-color);
  border: var(--bg-color);
}

.hr-card {
  padding: 20px;
  border-radius: 15px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
  background: white;
  transition: 0.3s;
}

.hr-card:hover {
  transform: translateY(-5px);
}

.hr-card h5 {
  color: var(--text-color);
  font-weight: 600;
  margin-bottom: 15px;
}

.bmo-hr-platform .btn-success {
  background: #007bff;
}

/* BMO HR Platform */

.bmo-hr-platform {
  position: relative;
}

.bmo-hr-platform .title-head {
  position: relative;
  z-index: 9;
}

.particle-network-animation {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
  background-color: #171717;
  background: var(--bg-color);
}

.particle-network-animation::before {
  z-index: -2;
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-image: url(https://images.unsplash.com/photo-1450849608880-6f787542c88a?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=786a67dca1d8791d181bfd90b16240d9);
  background-position: center center;
  background-size: cover;
  opacity: 0.2;
}

.glow {
  z-index: -1;
  position: fixed;
  top: 50%;
  left: 50%;
  background-image: radial-gradient(circle closest-side, rgba(255, 255, 255, 0.025), transparent);
}

.glow-1 {
  width: 150vw;
  height: 150vh;
  margin-top: -75vh;
  margin-left: -75vw;
  animation: glow-1-move 25s linear infinite both;
}

@keyframes glow-1-move {
  from {
    transform: translate(-100%, 100%);
  }

  to {
    transform: translate(100%, -100%);
  }
}

.glow-2 {
  width: 100vw;
  height: 100vh;
  margin-top: -50vh;
  margin-left: -50vw;
  animation: glow-2-move 25s linear 8.3333333333s infinite both;
}

@keyframes glow-2-move {
  from {
    transform: translate(-100%, 0%);
  }

  to {
    transform: translate(100%, 100%);
  }
}

.glow-3 {
  width: 120vw;
  height: 120vh;
  margin-top: -60vh;
  margin-left: -60vw;
  animation: glow-3-move 25s linear 16.6666666667s infinite both;
}

@keyframes glow-3-move {
  from {
    transform: translate(100%, 100%);
  }

  to {
    transform: translate(0%, -100%);
  }
}



.internship-modern {
  background: linear-gradient(135deg, #0f2027, #203a43, #2c5364);
  color: #fff;
  position: relative;
  overflow: hidden;
  background: var(--bg-color2);
}

.internship-modern .title {
  font-size: 32px;
  font-weight: 700;
}

.internship-modern .desc {
  color: #cfd8dc;
  font-size: 16px;
  line-height: 1.6;
}

.highlights span {
  display: inline-block;
  margin: 6px 10px 6px 0;
  padding: 6px 12px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.1);
  font-size: 14px;
  backdrop-filter: blur(10px);
}

/* Glass Card */
.domain-card {
  padding: 20px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(12px);
  text-align: center;
  transition: all 0.3s ease;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.domain-card h6 {
  font-weight: 600;
  margin-bottom: 5px;
}

.domain-card p {
  font-size: 13px;
  color: #ddd;
}

/* Hover Effect */
.domain-card:hover {
  transform: translateY(-8px) scale(1.03);
  background: rgba(255, 255, 255, 0.15);
}

/* Glow Button */
.btn-glow {
  display: inline-block;
  /* padding: 12px 28px;
  border-radius: 30px;
  background: linear-gradient(45deg, #00c6ff, #0072ff);
  color: #fff;
  text-decoration: none;
  font-weight: 500; */
  transition: 0.3s;
  /* box-shadow: 0 0 15px rgba(0, 198, 255, 0.5); */
}

/* .btn-glow:hover {
  box-shadow: 0 0 25px rgba(0, 198, 255, 0.9);
  transform: translateY(-2px);
} */








/* BMO Startup Ecosystem */

/* HERO */

.bmo-startup-ecosystem {
  background: var(--bg-color);
}

.bmo-startup-ecosystem .hero {
  background: linear-gradient(135deg, #0d6efd, #001f3f);
  background: linear-gradient(135deg, #0f1c2f, #001f3f);
  color: #fff;
  padding: 120px 20px;
  text-align: center;
  background: url(../images/new/1.png) no-repeat;
  background-size: contain;
  /* height: 550px; */
  padding-bottom: 85px;
  margin-top: 0;
}

.startup-program {
  background: linear-gradient(135deg, #0f1c2f, #001f3f);
  padding: 120px 20px;
  background: url(../images/new/2.png) no-repeat;
  background-size: cover;
  background-position: center;

}

.bmo-startup-ecosystem .startup-program .cta_btn {
  display: inline-block;
  margin: 0 10px !important;
}

.bmo-startup-ecosystem .startup-program p {
  margin-bottom: 30px;
}

.bmo-startup-ecosystem .hero h1 {
  font-size: 3rem;
  font-weight: 700;
  margin-top: 100px;
}


.bmo-startup-ecosystem p {
  color: var(--text-color);
}

.bmo-startup-ecosystem h2 {
  color: var(--text-color);

  margin-bottom: 30px;
}

.bmo-startup-ecosystem .hero p {
  font-size: 1.2rem;
  opacity: 0.9;
  color: var(--border-color);
}

.startup-program p,
.startup-program h2 {
  color: var(--border-color);
}

.bmo-startup-ecosystem .blog-header.header-section nav a {
  color: var(--border-color);
}

/* SECTION */
.bmo-startup-ecosystem .section {
  background: var(--bg-color);
  padding: 80px 20px;
}

.bmo-startup-ecosystem .bg-light {
  background: var(--bg-color2) !important;
}

.bmo-startup-ecosystem .bg-light .card-box {
  background: var(--bg-color) !important;
}

.bmo-startup-ecosystem .card-box ul {
  margin-bottom: 0;
}

.bmo-startup-ecosystem .card-box ul li {
  text-align: left;
}

.bmo-startup-ecosystem .bg-light .card-box h4 {
  color: var(--text-color);
  margin-bottom: 30px;
}

/* CARDS */
.bmo-startup-ecosystem .card-box {
  background: var(--bg-color2);
  border-radius: 15px;
  padding: 25px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
  transition: 0.3s;
  height: 100%;
}

.bmo-startup-ecosystem .card-box:hover {
  transform: translateY(-8px);
}

/* FEATURE GRID */
.bmo-startup-ecosystem .feature-icon {
  font-size: 30px;
  margin-bottom: 10px;
  color: #0d6efd;
}

.bmo-startup-ecosystem .card-box h5 {
  color: var(--text-color);
  margin-bottom: 30px;
}

/* TIMELINE */
.bmo-startup-ecosystem .timeline {
  border-left: 3px solid #0d6efd;
  padding-left: 20px;
}

.bmo-startup-ecosystem .timeline h5,
.bmo-startup-ecosystem .timeline p {
  color: var(--text-color);
  text-align: left;
}

.timeline-item {
  margin-bottom: 30px;
}

/* CTA */
.bmo-startup-ecosystem .cta_btn {
  margin: 1rem auto;
  display: table;
  text-align: center;
}

.bmo-startup-ecosystem .btn-custom {
  background: #fff;
  color: #0d6efd;
  border-radius: 30px;
  padding: 10px 25px;
  margin: 10px;
}

/* RESPONSIVE */
@media (max-width:768px) {
  .bmo-startup-ecosystem .hero h1 {
    font-size: 2rem;
  }
}

.agro-startups {
  background: url(../images/new/agro2.png) no-repeat;
  padding: 120px 20px;
  background-size: cover;
  background-position: center;
  color: #fff;
}

.agro-startups .cta_btn {
  margin: 0 auto;
  margin-top: 30px;
}


/* BMO Startup Ecosystem */


/* bm-designs-adtech-ecosystem */

.bm-designs-adtech-ecosystem .blog-header.header-section nav a {
  color: var(--border-color);
}

/* HERO */
.bm-designs-adtech-ecosystem .hero {
  background: linear-gradient(135deg, #6610f2, #0d6efd);
  background: linear-gradient(135deg, #0f1c2f, #001f3f);
  background: url(../images/new/3.png) no-repeat;
  background-size: cover;
  background-position: center;
  color: #fff;
  padding: 120px 20px;
  text-align: center;
  height: 500px;
}

.bm-designs-adtech-ecosystem .hero .cta_btn {
  margin: 0 auto;
  display: table;
}

.bm-designs-adtech-ecosystem .hero h1 {
  font-size: 3rem;
  font-weight: 700;
}

.bm-designs-adtech-ecosystem .hero p {
  font-size: 1.2rem;
}

/* SECTION */
.bm-designs-adtech-ecosystem .section {
  padding: 80px 20px;
  background: var(--bg-color);
}

.bm-designs-adtech-ecosystem .section.bg-light {
  background: var(--bg-color2) !important;
}

.bm-designs-adtech-ecosystem .section.bg-light .cta_btn {
  margin: 0 auto;
  display: table;
}

.bm-designs-adtech-ecosystem .section p {
  color: var(--heading-color);
}

.bm-designs-adtech-ecosystem .section h2 {
  margin-bottom: 30px;
  color: var(--heading-color);
}

.bm-designs-adtech-ecosystem .cta.future h2 {
  margin-bottom: 30px;
}

.bm-designs-adtech-ecosystem .section h3 {
  color: var(--heading-color);
  margin-bottom: 30px;
}

.bm-designs-adtech-ecosystem .section.bg-light h3,
.bm-designs-adtech-ecosystem .section.bg-light p {
  text-align: left;
}

.bm-designs-adtech-ecosystem .section li {
  color: var(--heading-color);
  text-align: left;
  padding: 8px 0;

}

.bm-designs-adtech-ecosystem .section ul {
  margin-bottom: 20px;
}

/* CARD */
.bm-designs-adtech-ecosystem .card-box {
  background: var(--bg-color2);
  border-radius: 15px;
  padding: 25px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
  transition: 0.3s;
  height: 100%;
}

.bm-designs-adtech-ecosystem .card-box h5 {
  color: var(--heading-color);
  margin-bottom: 30px;
}

.bm-designs-adtech-ecosystem .card-box:hover {
  transform: translateY(-8px);
}

/* CTA */
.bm-designs-adtech-ecosystem .cta.future {
  background: linear-gradient(135deg, #0d6efd, #001f3f);
  background: linear-gradient(135deg, #0f1c2f, #001f3f);
  color: white;
  text-align: center;
  padding: 80px 20px;
}

.future .cta_btn {
  display: inline-block;
  margin: 0 10px;
}

.future p {
  margin-bottom: 30px;
}

.bm-designs-adtech-ecosystem .btn-custom {
  background: white;
  color: #0d6efd;
  border-radius: 30px;
  padding: 10px 25px;
  margin: 10px;
}

/* RESPONSIVE */
@media (max-width:768px) {
  .bm-designs-adtech-ecosystem .hero h1 {
    font-size: 2rem;
  }
}



.bmo-preventive-maintenance-force .blog-header.header-section nav a {
  color: #fff;
}

/* HERO */
.bmo-preventive-maintenance-force .hero {
  background: linear-gradient(135deg, #0f1c2f, #001f3f);
  color: white;
  padding: 110px 20px;
  text-align: center;
}

.bmo-preventive-maintenance-force .hero h1 {
  font-size: 2.8rem;
  font-weight: 700;
}

.bmo-preventive-maintenance-force .hero p {
  font-size: 1.2rem;
  opacity: 0.9;
  margin-bottom: 30px;
}

/* SECTION */
.bmo-preventive-maintenance-force .section {
  background: var(--bg-color);
  padding: 80px 20px;
}

.bmo-preventive-maintenance-force .section.bg-light {
  background: var(--bg-color2) !important;
  padding: 80px 20px;
}

.bmo-preventive-maintenance-force .section.bg-light img {
  width: 55%;
  margin: 0 auto;
  display: table;
}

.bmo-preventive-maintenance-force .section p {
  color: var(--heading-color);

}

.bmo-preventive-maintenance-force .section.bg-light p {
  text-align: left;
}

.bmo-preventive-maintenance-force .section h2 {
  color: var(--heading-color);
}

.bmo-preventive-maintenance-force .section h3 {
  color: var(--heading-color);
  margin-bottom: 30px;
  text-align: left;
}

.bmo-preventive-maintenance-force .card-box p {
  text-align: center;
}

.bmo-preventive-maintenance-force .section li {
  color: var(--heading-color);
  text-align: left;
  padding: 8px 0;

}

.bmo-preventive-maintenance-force .section ul {
  margin-bottom: 30px;
}


/* CARD */
.bmo-preventive-maintenance-force .card-box {
  background: var(--bg-color2);
  border-radius: 15px;
  padding: 25px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
  transition: 0.3s;
  height: 100%;
}

.bmo-preventive-maintenance-force .card-box h6,
.bmo-preventive-maintenance-force .card-box h5 {
  color: var(--heading-color);
  margin-bottom: 30px;
}

.bmo-preventive-maintenance-force .section.bg-light .card-box {
  background: var(--bg-color);
}

.bmo-preventive-maintenance-force .card-box:hover {
  transform: translateY(-8px);
}

/* ICON */
.bmo-preventive-maintenance-force .icon {
  font-size: 30px;
  margin-bottom: 10px;
}

/* CTA */
.bmo-preventive-maintenance-force .cta {
  background: linear-gradient(135deg, #0f1c2f, #001f3f);
  color: white;
  text-align: center;
  padding: 80px 20px;
}

.bmo-preventive-maintenance-force .cta h2 {
  margin-bottom: 30px;
}

.bmo-preventive-maintenance-force .btn-custom {
  background: white;
  color: #0d6efd;
  border-radius: 30px;
  padding: 10px 25px;
  margin: 10px;
}

.bmo-preventive-maintenance-force .cta_btn {
  margin: 0 auto;
  display: table;
}

.bmo-preventive-maintenance-force .cta .cta_btn {
  display: inline-block;
  margin: 0 10px;
}

.bmo-preventive-maintenance-force .cta p {
  margin-bottom: 30px;
}

/* RESPONSIVE */
@media (max-width:768px) {
  .bmo-preventive-maintenance-force .hero h1 {
    font-size: 2rem;
  }
}



.bmo-agritech-platform .hero {
  /* background: linear-gradient(120deg, #0f5132, #198754); */
  color: #fff;
  padding: 150px 0;
  padding-bottom: 106px;

  text-align: center;
  background: url(../images/new/5.png) no-repeat;
  background-size: cover;
}

.section-title {
  font-weight: 700;
  margin-bottom: 20px;
}

.card {
  border: none;
  border-radius: 15px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
  transition: 0.3s;
}

.card:hover {
  transform: translateY(-5px);
}

.icon {
  font-size: 40px;
  color: #198754;
}

/* .cta {
  background: #198754;
  color: #fff;
  padding: 60px 20px;
  text-align: center;
} */

/* footer {
            background: #0f5132;
            color: #fff;
            padding: 20px;
            text-align: center;
        } */




/* Color moving effects for buttons */
.agri-tech .btn {
  background-size: 200% auto !important;
  transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}

.agri-tech .btn:hover {
  background-position: right center !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1) !important;
}

/* Specific button colors for gradient sweep */
.agri-tech .btn-warning {
  background-image: linear-gradient(to right, #ffc107 0%, #ff9800 51%, #ffc107 100%) !important;
  border-color: transparent !important;
  color: #2F2F2F !important;
}

.agri-tech .btn-success {
  background-image: linear-gradient(to right, #5A8D40 0%, #7CB361 51%, #5A8D40 100%) !important;
  border-color: transparent !important;
  color: #fff !important;
}

.agri-tech .btn-primary {
  background-image: linear-gradient(to right, #1B1C43 0%, #363870 51%, #1B1C43 100%) !important;
  border-color: transparent !important;
  color: #fff !important;
}

.agri-tech .agro {
  position: relative;
}


/* .agri-tech {
  margin-top: 100px;
} */

.agro-cnt {
  position: absolute;
  top: 50px;
  width: 80%;
  margin: 0 auto;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  font-size: 18px;
  color: #222;

}

.agro-cnt span {
  color: var(--primary-color);
  font-weight: 500;
}

.logoSec {
  margin-top: 50px;
  margin-bottom: 10px;
  display: flex;
  justify-content: center;
  gap: 20px;
}

.logoSec img {

  width: 200px;
}

.agri-tech h2 {
  font-family: 'Rubik', sans-serif;
  font-size: clamp(1.5rem, 2.5vw, 3rem);
  text-align: center;
  margin-bottom: 100px;
  color: var(--heading-color);
  margin-top: 100px;

}

.title-line1 {
  font-weight: 600;
}

.title-line1 span {
  font-family: 'Gloria Hallelujah', cursive;
  font-size: clamp(1.5rem, 2.5vw, 3rem);
  /* color: #387C40; */
  margin-bottom: 20px;
}

.line {
  width: 1px;
  height: 50px;
  background: #387C40;
}


.agro-cnt span {
  color: #387C40;
  font-weight: 600;
}

/* .bmo-agritech-platform .blog-header.header-section nav a {
  color: #222;
} */

.agri-tech {
  background: var(--bg-color);
}

.agri-tech .container-fluid {
  padding: 0 !important;
}

.features {
  background: var(--bg-color2);
}

.features .section-title {
  color: var(--heading-color);
}

.features .card {
  background: var(--bg-color);
  color: var(--heading-color);
}



.integration.bg-light {
  color: var(--heading-color);
  background: var(--bg-color) !important;
}

.bmo-agritech-platform .text-muted {
  color: var(--heading-color) !important;
}

/* ========================================================================= */
/* Join Popup Modal Styles */
/* ========================================================================= */
.join-popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 10000;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease, visibility 0.4s ease;
}

.join-popup-overlay.active {
  opacity: 1;
  visibility: visible;
}

.join-popup-content {
  background: var(--card-bg, #1e1e1e);
  border-radius: 20px;
  width: 90%;
  max-width: 450px;
  padding: 40px 30px;
  position: relative;
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
  transform: translateY(30px) scale(0.95);
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  border: 1px solid rgba(255, 255, 255, 0.1);
  overflow: hidden;
}

body.light-mode .join-popup-content {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
}

.join-popup-overlay.active .join-popup-content {
  transform: translateY(0) scale(1);
}

.join-popup-close {
  position: absolute;
  top: 20px;
  right: 20px;
  background: rgba(255, 255, 255, 0.05);
  border: none;
  font-size: 20px;
  color: var(--secondary-text, #aaaaaa);
  cursor: pointer;
  width: 35px;
  height: 35px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

body.light-mode .join-popup-close {
  background: rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(0, 0, 0, 0.1);
  color: #666;
}

.join-popup-close:hover {
  background: var(--accent-color, #339af0);
  color: #fff;
  border-color: var(--accent-color, #339af0);
  transform: rotate(90deg);
}

.join-popup-header {
  text-align: center;
  margin-bottom: 30px;
}

.join-popup-header h3 {
  margin: 0 0 10px;
  font-size: 24px;
  font-weight: 800;
  color: var(--heading-color, #ffffff);
}

.join-popup-header p {
  margin: 0;
  font-size: 15px;
  color: var(--secondary-text, #aaaaaa);
}

.join-popup-form .form-group {
  margin-bottom: 20px;
  text-align: left;
}

.join-popup-form label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 8px;
  color: var(--heading-color, #ffffff);
}

.join-popup-form input,
.join-popup-form select {
  width: 100%;
  padding: 14px 15px;
  border-radius: 10px;
  border: 1px solid var(--border-color, #333);
  background: var(--bg-color, #121212);
  color: var(--heading-color, #ffffff);
  font-size: 15px;
  transition: all 0.3s ease;
  box-sizing: border-box;
  outline: none;
}

body.light-mode .join-popup-form input,
body.light-mode .join-popup-form select {
  border: 1px solid #ddd;
  background: #f9f9f9;
  color: #333;
}

.join-popup-form input:focus,
.join-popup-form select:focus {
  border-color: var(--accent-color, #339af0);
  box-shadow: 0 0 0 3px rgba(51, 154, 240, 0.2);
  background: var(--card-bg, #1e1e1e);
}

body.light-mode .join-popup-form input:focus,
body.light-mode .join-popup-form select:focus {
  background: #fff;
}

.join-popup-form input::placeholder {
  color: #777;
}

.join-popup-form select {
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M2.5 4.5L6 8L9.5 4.5' stroke='%23888888' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 15px center;
  padding-right: 40px;
}

@media (min-width:768px) and (max-width:1024px) {
  .bmo-agritech-platform .hero {
    background: url(../images/new/5-mob.png) no-repeat;
    background-size: cover;
  }

  .bmo-agritech-platform .desk_view {
    display: none;
  }

  .bmo-agritech-platform .mob_view {
    display: block;
  }

  .agro-cnt {
    position: absolute;
    top: 100px;
  }

  .logoSec {
    margin-bottom: 10px;
    display: flex;
    justify-content: center;
    flex-direction: column-reverse;
    align-items: center;
    gap: 30px;
    margin-top: 50px;
  }

  .line {
    width: 50px;
    height: 1px;
    background: #387C40;
  }
}

@media (max-width:767px) {
  .bmo-agritech-platform .hero {
    background: url(../images/new/5-mob.png) no-repeat;
    background-size: cover;
  }

  .agro-cnt {
    font-size: 15px;
    top: 40px;
    width: 90%;

  }

  .logoSec {
    margin-bottom: 10px;
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-direction: column-reverse;
    align-items: center;
    gap: 10px;
    margin-top: 30px;
  }

  .line {
    width: 50px;
    height: 1px;
    background: #387C40;
  }
}