@charset "UTF-8";

/*!

	Template Name: unlimitcon

	Template URI: https://themeforest.net/user/labartisan

	Author: labartisan.net

	Author URI: https://themeforest.net/user/labartisan

	Description: Unlimitcon Template is a Creative Multipurpose HTML5 Template

	Version: 1.0.0

	Text Domain: unlimitcon

	Tags: 	concert, conference, event, event in wordpress, event management, exhibition, Meetup, music, responsive, schedule, seminar, speakers, summit, tickets, workshop



*/

/*--------------------------------------------------------------

	>>> TABLE OF CONTENTS:

	----------------------------------------------------------------

	# Header CSS

		* Style-1

		* Style-2

		* Style-3

	# Page Header

	# Banner

		*Style-1

		*Style-2

        *Style-3

    #feature

	# About

		* Style-1

		* Style-2

		* Style-3

	# Service

		* Style-1

	# sponsor

		* Style-1

		* Style-2

	# event-schedule

		* Style-1

		* Style-2

		* Style-3

		* Style-4

	# speaker

		* Style-1

		* Style-2

	# event-speaker

	# speaker-profile

	# gallery-section

		* Style-1

		* Style-2

	# pricing-section

		* Style-1

		* Style-2

		* Style-3

	# faq-section

		* Style-1

		* Style-2

	# testimonial-section

		* Style-1

		* Style-2

		* Style-3

		* Style-4

	# blog-section

		* Style-1

		* Style-2

		* Style-3

		* Style-4

	# contact-section

		* Style-1

		* Style-2

	# gmap-section

		* Style-1

		* Style-2

		* Style-3

		* Style-4

	# newevent

	# achivement section

		* Style-1

		* Style-2

	# counreup section

	# management section

	# sponsor-opportunity

	# masonary section

	# event-venue

	# business-conference

	# business-timeline

	# register-section

	# 404 section

    # Fore Zero Page



    # Typography

    # Global CSS





>>> TABLE OF CONTENTS END:

@@@@@@@@@@@@@@@@@@@@@@ */

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

@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");

.primary-menu {
  z-index: 11;

  /* animation-name: fadeInDown;

  animation-duration: 0.1s; */

  animation-fill-mode: both;

  position: fixed;

  top: 0;

  transition: all 0.3s ease;

  width: 100%;

  text-align: center;

  display: block;

  background: transparent;
}

.primary-menu.sticky-nav {
  background: #fff !important;

  box-shadow: 0 0 10px -1px rgba(0, 0, 0, 0.1);

  top: -102px;
}

.primary-menu.sticky-nav.nav-down {
  top: 0;
}

.nav-up {
  top: -102px;
}

.banner {
  height: 100vh;
}

.banner h2 {
  font-size: 30px;
}

@media (min-width: 768px) {
  .banner h2 {
    font-size: 3.95rem;
  }
}

@media (min-width: 1400px) {
  .banner h2 {
    font-size: 60px;
  }
}

.text {
  align-items: center;

  display: flex;
}

.val {
  font-weight: 600;

  font-size: 36px;

  color: #fff;

  font-family: "Poppins", sans-serif;
}

.banner-section.style-3 {
  background-size: cover;

  background-position: center center;

  background-repeat: no-repeat;

  height: 100vh;

  position: relative;
}

/* -------------------------------------------------------- */

.banner-section.style-4 {
  min-height: 100vh;

  height: 100vh;

  position: relative;

  overflow: hidden;

  z-index: 0;

  margin-top: 0;

  padding-top: 5.5rem;
}

/* -------------------------------------------------------- */

.banner-section.style-4 .overlay {
  display: none;
}

@media (min-width: 992px) {
  .banner-section.style-4 .overlay {
    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background: rgba(0, 0, 0, 0.4);
  }
}

.banner-section.style-4 .video {
  display: none;
}

@media (min-width: 992px) {
  .banner-section.style-4 .video {
    width: 110%;

    vertical-align: baseline;

    display: inline-block;
  }
}

/* -------------------------------------------------------------- */

#video-background {
  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  overflow: hidden;

  z-index: -1;
}

#video-background video {
  width: 100%;

  height: 100%;

  object-fit: cover;

  position: absolute;

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%);

  pointer-events: none;
}

@media (max-width: 768px) {
  .banner-section.style-4 {
    margin-top: -5px;
  }
}

/* @media (max-width: 480px) {

  .banner-section.style-4 {

    margin-top: 4rem;

  }



} */

/* -------------------------------------------------------------- */

.conferench-section {
  position: relative;

  overflow: hidden;

  padding: 0;

  z-index: 1;
}

.conferench-section .ticker {
  font-weight: 600;

  font-size: 70px;

  color: #ededed;

  position: relative;
}

@media (min-width: 1200px) {
  .conferench-section .ticker {
    font-size: 242px;
  }
}

.conferench-section .ticker:after {
  position: absolute;

  content: "";

  background-image: url(../../assets/images/pattan.png);

  top: 50%;

  left: 0;

  width: 100%;

  height: 75px;

  transform: translateY(-50%);
}

.about-section.style-1 {
  background-size: cover;

  background-position: center center;

  background-repeat: no-repeat;
}

.about-section.style-1 .format-video {
  position: relative;

  margin-bottom: 40px;
}

@media (min-width: 992px) {
  .about-section.style-1 .format-video {
    margin-bottom: 0;
  }
}

.about-section.style-1 .format-video img {
  width: 100%;

  display: block;
}

.about-section.style-1 .format-video .icon {
  width: 86px;

  height: 86px;

  line-height: 86px;

  font-size: 20px;

  background: rgba(255, 255, 255, 0.6);

  text-align: center;

  color: #fd3d6b;

  border-radius: 50%;

  position: absolute;

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%);

  animation: animate 3s linear infinite;

  outline: none;

  -webkit-transition: all 0.3s ease;

  -moz-transition: all 0.3s ease;

  -ms-transition: all 0.3s ease;

  -o-transition: all 0.3s ease;

  transition: all 0.3s ease;
}

.about-section.style-1 .format-video .icon:hover {
  background: #fd3d6b;

  color: #fff;
}

@media (min-width: 992px) {
  .about-section.style-1 .about-content {
    padding-left: 30px;
  }
}

.about-section.style-1 .about-content span {
  font-size: 18px;

  font-weight: 500;

  color: #383a50;
}

.about-section.style-1 .about-content h2 {
  margin-bottom: 20px;
}

.about-section.style-2 .section-header {
  text-align: left;
}

.about-section.style-2 .section-header p {
  margin-bottom: 15px;

  font-weight: 400;

  font-family: "Roboto", sans-serif;

  font-size: 18px;

  display: inline-block;
}

.about-section.style-2 .section-header h2 {
  padding: 0;

  margin-bottom: 0;
}

.about-section.style-2 .section-header h2:after,
.about-section.style-2 .section-header h2:before {
  display: none;
}

/* ------------------------------------------------------------------------------------ */

.about-section.style-1 .format-video video {
  width: 100%;

  height: auto;

  border-radius: 20px;

  display: block;
}

.about-section.style-1 .format-video {
  position: relative;

  overflow: hidden;

  border-radius: 20px;
}

/* ------------------------------------------------------------------------------------ */

.about-section.style-3 .format-video::before {
  position: absolute;

  content: "";

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  -webkit-clip-path: polygon(0 0%, 100% 0, 100% 78%, 0 25%);

  clip-path: polygon(0 0%, 100% 0, 100% 78%, 0 25%);

  background: rgba(60, 43, 222, 0.83);
}

.about-section.style-3 .format-video .icon {
  width: 60px;

  height: 60px;

  line-height: 60px;

  font-size: 25px;

  background: #fd3d6b;

  color: #fff;
}

@media (min-width: 768px) {
  .about-section.style-3 .format-video .icon {
    width: 100px;

    height: 100px;

    line-height: 100px;

    font-size: 32px;
  }
}

.about-section.style-3 .format-video .icon:hover {
  background: #fff;

  color: #fd3d6b;
}

.swiper-pagination-bullet {
  width: 10px;

  height: 10px;
}

.about-item-pagination .swiper-pagination-bullet-active {
  opacity: 1;

  background: #fff;
}

.service-section.style-1 .section-header p {
  max-width: 680px;

  margin: 0 auto;

  display: inline-block;

  line-height: 1.625rem;
}

.service-section.style-1 .section-wrapper .b-radius {
  border-radius: 10px;

  overflow: hidden;
}

.service-section.style-1 .section-wrapper .b-radius .service-item .service-item-inner {
  margin: 0 15px;
}

@media (min-width: 1200px) {
  .service-section.style-1 .section-wrapper .b-radius .service-item .service-item-inner {
    margin: 0;
  }
}

.service-section.style-1 .section-wrapper .b-radius .service-item .service-item-inner .service-thumb {
  width: 100%;

  overflow: hidden;

  display: block;
}

@media (min-width: 768px) {
  .service-section.style-1 .section-wrapper .b-radius .service-item .service-item-inner .service-thumb {
    width: 50%;
  }
}

.service-section.style-1 .section-wrapper .b-radius .service-item .service-item-inner .service-thumb>img {
  width: 100%;

  -webkit-transition: all 0.3s ease;

  -moz-transition: all 0.3s ease;

  -ms-transition: all 0.3s ease;

  -o-transition: all 0.3s ease;

  transition: all 0.3s ease;

  display: block;

  max-height: 400px;
}

.service-section.style-1 .section-wrapper .b-radius .service-item .service-item-inner .service-thumb>img:hover {
  transform: scale(1.2);

  -webkit-filter: grayscale(50%);
}

.service-section.style-1 .section-wrapper .b-radius .service-item .service-item-inner .service-content {
  width: 100%;

  height: 400px;

  background: #fff;

  display: flex;

  align-items: center;

  padding: 40px 25px;
}

@media (min-width: 768px) {
  .service-section.style-1 .section-wrapper .b-radius .service-item .service-item-inner .service-content {
    width: 50%;
  }
}

.service-section.style-1 .section-wrapper .b-radius .service-item .service-item-inner .service-content:hover h5 {
  color: #066022;
}

.sponsor-section.style-1 .section-header h2 {
  margin-top: 15px;
}

.sponsor-section.style-2 {
  padding: 60px 0;
}

.sponsor-section.style-2 .section-wrapper .sponsor-slider {
  overflow: hidden;
}

.sponsor-section.style-2 .section-wrapper .sponsor-slider .sponsor-thumb {
  justify-content: center;

  display: flex;

  flex-wrap: wrap;

  cursor: all-scroll;

  transition: all 0.3s ease;
}

.sponsor-section.style-2 .section-wrapper .sponsor-slider .sponsor-thumb:hover {
  -webkit-filter: grayscale(100%);

  filter: grayscale(100%);
}

.event-schedule.style-1 {
  background-repeat: no-repeat;

  padding-top: 0;

  background-position: top center;
}

.event-schedule.style-1 .section-wrapper .tab .tablinks {
  margin: 2px 0;

  width: 100%;

  background: #fff;

  color: #383a50;

  text-transform: uppercase;

  padding: 15px 0;

  position: relative;

  transition: all 0.3s ease;
}

@media (min-width: 992px) {
  .event-schedule.style-1 .section-wrapper .tab .tablinks {
    margin: 0 2px;
  }
}

@media (min-width: 992px) {
  .event-schedule.style-1 .section-wrapper .tab .tablinks::after {
    position: absolute;

    content: "";

    width: 16px;

    height: 16px;

    background: transparent;

    bottom: -7px;

    left: 50%;

    transform: translateX(-50%) rotate(45deg) scale(0);

    border-radius: 4px;
  }
}

.event-schedule.style-1 .section-wrapper .tab .tablinks.active {
  background: #383a50;

  color: #fff;

  padding: 20px 0;

  position: relative;

  border-bottom-left-radius: 5px;

  border-bottom-right-radius: 5px;

  border-top-left-radius: 0px;

  border-top-right-radius: 0px;

  opacity: 1;
}

.event-schedule.style-1 .section-wrapper .tab .tablinks.active::after {
  background: #383a50;

  transform: translateX(-50%) rotate(45deg) scale(1);

  transition: all 0.3s ease;
}

.event-schedule.style-1 .section-wrapper .tabcontent {
  display: none;

  padding: 0;
}

@media (min-width: 768px) {
  .event-schedule.style-1 .section-wrapper .tabcontent {
    padding: 0px 12px;
  }
}

.event-schedule.style-1 .section-wrapper .tabcontent.active {
  display: block;
}

.event-schedule.style-2 {
  background-repeat: no-repeat;

  padding-top: 100px;

  background-size: cover;

  background-position: center center;
}

.event-schedule.style-2 .section-header h2 {
  margin-top: 15px;
}

.event-schedule.style-2 .section-header p {
  font-size: 18px;

  font-family: "Roboto", sans-serif;
}

.event-schedule.style-3 .section-wrapper .tabcontent {
  margin-top: 50px;
}

.event-schedule.style-3 .section-wrapper .tabcontent ul {
  margin: 0;
}

.event-schedule.style-3 .section-wrapper .tabcontent ul li {
  list-style: none;

  border: 1px solid #ededed;

  border-bottom: none;
}

.event-schedule.style-3 .section-wrapper .tabcontent ul li:last-child {
  border-bottom: 1px solid #ededed;
}

@media (min-width: 1200px) {
  .event-schedule.style-3 .section-wrapper .tabcontent ul li {
    display: flex;

    flex-wrap: wrap;

    align-items: center;

    border: 1px solid #ededed;

    padding: 0;

    border-bottom: none;
  }

  .event-schedule.style-3 .section-wrapper .tabcontent ul li:first-child {
    border-top-right-radius: 3px;

    border-top-left-radius: 3px;
  }

  .event-schedule.style-3 .section-wrapper .tabcontent ul li:last-child {
    border-bottom: 1px solid #ededed;

    border-bottom-right-radius: 3px;

    border-bottom-left-radius: 3px;
  }
}

@media (min-width: 992px) {
  .event-schedule.style-3 .section-wrapper .tabcontent ul li .con-schedule {
    display: flex;

    align-items: center;
  }
}

@media (min-width: 1200px) {
  .event-schedule.style-3 .section-wrapper .tabcontent ul li .con-schedule {
    width: 100%;

    /* border-right: 1px solid #ededed; */
  }
}

@media (min-width: 992px) {
  .event-schedule.style-3 .section-wrapper .tabcontent ul li .con-schedule .con-schedule-thumb {
    width: 40%;
  }
}

.event-schedule.style-3 .section-wrapper .tabcontent ul li .con-schedule .con-schedule-thumb img {
  width: 100%;

  display: block;
}

.event-schedule.style-3 .section-wrapper .tabcontent ul li .con-schedule .con-schedule-content {
  padding: 0 20px;

  margin: 0 15px;

  background: #fff;

  border-radius: 6px;

  transform: translateY(-50px);
}

@media (min-width: 768px) {
  .event-schedule.style-3 .section-wrapper .tabcontent ul li .con-schedule .con-schedule-content {
    text-align: center;
  }
}

@media (min-width: 992px) {
  .event-schedule.style-3 .section-wrapper .tabcontent ul li .con-schedule .con-schedule-content {
    text-align: left;

    width: 60%;

    padding: 30px 60px;

    background: #fff;

    border-radius: 6px;

    margin-left: -20px;

    transform: translateY(0px);
  }
}

.event-schedule.style-3 .section-wrapper .tabcontent ul li .con-schedule .con-schedule-content h4 {
  padding: 10px 0;

  font-size: 20px;

  line-height: 1rem;
}

.event-schedule.style-3 .section-wrapper .tabcontent ul li .con-schedule .con-schedule-content ul li {
  text-align: center;

  border: none;
}

@media (min-width: 992px) {
  .event-schedule.style-3 .section-wrapper .tabcontent ul li .con-schedule .con-schedule-content ul li {
    text-align: left;

    display: flex;

    padding: 2px 0;
  }
}

.event-schedule.style-3 .section-wrapper .tabcontent ul li .con-schedule .con-schedule-content ul li .con-info-title {
  font-size: 18px;

  line-height: 1rem;

  font-weight: 600;

  font-family: "Poppins", sans-serif;
}

@media (min-width: 992px) {
  .event-schedule.style-3 .section-wrapper .tabcontent ul li .con-schedule .con-schedule-content ul li .con-info-title {
    padding-right: 40px;

    position: relative;

    width: 150px;
  }

  .event-schedule.style-3 .section-wrapper .tabcontent ul li .con-schedule .con-schedule-content ul li .con-info-title::after {
    position: absolute;

    content: ":";

    top: 50%;

    right: 15px;

    transform: translateY(-50%);
  }
}

.event-schedule.style-3 .section-wrapper .pagination {
  margin: 0;

  margin-top: 60px;
}

.event-schedule.style-3 .section-wrapper .pagination li {
  list-style: none;
}

.event-schedule.style-3 .section-wrapper .pagination li a {
  width: 45px;

  height: 45px;

  line-height: 45px;

  text-align: center;

  border-radius: 50%;

  border: 1px solid #ededed;

  color: #383a50;

  display: inline-block;

  margin: 3px;

  font-weight: 600;

  font-size: 18px;

  transition: all 0.3s ease;

  outline: none;
}

.event-schedule.style-3 .section-wrapper .pagination li a:hover {
  background: #066022;

  color: #fff;

  border-color: #066022;
}

.event-schedule.style-3 .section-wrapper .pagination li a.active {
  background: #066022;

  color: #fff;

  border-color: #066022;
}

.event-schedule.style-4 {
  padding-top: 0;
}

.event-schedule.style-4 .section-wrapper .tab {
  border-left: 1px solid #ededed;

  border-top: 1px solid #ededed;

  border-right: 1px solid #ededed;

  display: inline-block;
}

.event-schedule.style-4 .section-wrapper .tab .tablinks {
  background: #fff;
}

.event-schedule.style-4 .section-wrapper .tab .tablinks.active {
  background: #fd3d6b;
}

.event-schedule.style-4 .section-wrapper .tabcontent {
  display: none;

  padding: 40px;

  border: 1px solid #ededed;
}

.event-schedule.style-4 .section-wrapper .tabcontent.active {
  display: block;
}

.event-schedule.style-4 .section-wrapper .tabcontent.sponsor .speaker-item .speaker-item-inner {
  margin: 15px;

  text-align: center;

  justify-content: center;

  display: flex;
}

.event-schedule.style-4 .section-wrapper .tabcontent .speaker-item {
  width: calc(100% / 1);
}

@media (min-width: 768px) {
  .event-schedule.style-4 .section-wrapper .tabcontent .speaker-item {
    width: calc(100% / 3);
  }
}

@media (min-width: 1200px) {
  .event-schedule.style-4 .section-wrapper .tabcontent .speaker-item {
    width: calc(100% / 4);
  }
}

.event-schedule.style-4 .section-wrapper .tabcontent .speaker-item .speaker-item-inner {
  margin: 6px;
}

.event-schedule.style-4 .section-wrapper .tabcontent .speaker-item .speaker-item-inner .item-thumb {
  overflow: hidden;

  border-radius: 4px;
}

.event-schedule.style-4 .section-wrapper .tabcontent .speaker-item .speaker-item-inner .item-thumb:hover img {
  transform: scale(1);

  opacity: 0.91;

  -webkit-filter: grayscale(100%);

  filter: grayscale(100%);
}

.event-schedule.style-4 .section-wrapper .tabcontent .speaker-item .speaker-item-inner .item-thumb a {
  display: block;

  outline: none;
}

.event-schedule.style-4 .section-wrapper .tabcontent .speaker-item .speaker-item-inner .item-thumb a img {
  display: block;

  width: 100%;
}

.event-schedule.style-4 .section-wrapper .tabcontent .speaker-item .speaker-item-inner .item-content {
  padding: 20px 10px;
}

.event-schedule.style-4 .section-wrapper .tabcontent .speaker-item .speaker-item-inner .item-content .name {
  font-family: "Poppins", sans-serif;

  font-size: 18px;

  font-weight: 600;

  color: #383a50;

  outline: none;

  -webkit-transition: all 0.3s ease;

  -moz-transition: all 0.3s ease;

  -ms-transition: all 0.3s ease;

  -o-transition: all 0.3s ease;

  transition: all 0.3s ease;
}

.event-schedule.style-4 .section-wrapper .tabcontent .speaker-item .speaker-item-inner .item-content .name:hover {
  color: #fd3d6b;
}

.event-schedule.style-4 .section-wrapper .tabcontent .speaker-item .speaker-item-inner .item-content p {
  font-size: 0.875rem;

  margin-bottom: 0;
}

.event-schedule .content {
  background: #fff;

  padding: 20px;

  border-radius: 8px;

  z-index: 1;

  box-shadow: 0px 10px 30px 0px rgba(55, 25, 5, 0.14);

  transform-origin: top;

  margin: 20px;
}

@media (min-width: 992px) {
  .event-schedule .content {
    padding: 40px;
  }
}

.speaker-section.style-1 {
  overflow: hidden;
}

@media (min-width: 1200px) {
  .speaker-section.style-1 {
    padding-bottom: 60px !important;
  }
}

@media (min-width: 992px) {
  .speaker-section.style-1 .section-wrapper {
    margin: 0 -10px;
  }
}

.speaker-section.style-1 .section-wrapper .speaker-item {
  margin-bottom: 20px;

  width: calc(100% / 1);
}

@media (min-width: 768px) {
  .speaker-section.style-1 .section-wrapper .speaker-item {
    width: calc(100% / 2);
  }
}

@media (min-width: 992px) {
  .speaker-section.style-1 .section-wrapper .speaker-item {
    width: calc(100% / 3);
  }
}

@media (min-width: 1200px) {
  .speaker-section.style-1 .section-wrapper .speaker-item {
    width: calc(100% / 4);
  }
}

@media (min-width: 576px) {
  .speaker-section.style-1 .section-wrapper .speaker-item .speaker-item-inner {
    margin: 0 15px;
  }
}

.speaker-section.style-1 .section-wrapper .speaker-item .speaker-item-inner .item-thumb {
  position: relative;

  overflow: hidden;

  border-radius: 12px;
}

.speaker-section.style-1 .section-wrapper .speaker-item .speaker-item-inner .item-thumb img {
  width: 100%;

  -webkit-transition: all 0.3s ease;

  -moz-transition: all 0.3s ease;

  -ms-transition: all 0.3s ease;

  -o-transition: all 0.3s ease;

  transition: all 0.3s ease;
}

.speaker-section.style-1 .section-wrapper .speaker-item .speaker-item-inner .item-content {
  padding: 20px 0;
}

.speaker-section.style-1 .section-wrapper .speaker-item .speaker-item-inner .item-content .name {
  font-family: "Poppins", sans-serif;

  font-size: 1.1rem;

  line-height: 29px;

  font-weight: 600;

  outline: none;

  display: inline-block;

  color: #383a50;

  transition: all 0.3s ease;
}

.speaker-section.style-1 .section-wrapper .speaker-item .speaker-item-inner .item-content .name:hover {
  color: #066022;
}

.speaker-section.style-1 .section-wrapper .speaker-item .speaker-item-inner .item-content p {
  margin-bottom: 0;

  color: #3f485d;

  font-size: 15px;

  font-family: "Roboto", sans-serif;
}

.speaker-section.style-2 {
  position: relative;
}

.speaker-section.style-2 .section-wrapper .speaker-item .speaker-item-inner .item-content {
  text-align: center;
}

.speaker-item .item-thumb:hover img {
  transform: scale(1.2);

  -webkit-filter: grayscale(100%);

  filter: grayscale(100%);

  opacity: 0.2;
}

.testimonial {
  background-size: cover;

  background-repeat: no-repeat;

  background-position: center center;
}

.testimonial-btn-prev {
  background: #ededed;

  position: absolute;

  top: 50%;

  left: -20%;

  transform: translateY(-50%);

  transition: all 0.3s ease;

  z-index: 1;
}

.testimonial-btn-prev i {
  color: #383a50;

  padding-top: 12px;

  padding-right: 2px;
}

.testimonial-btn-prev:hover {
  background: #fd3d6b;
}

.testimonial-btn-prev:hover i {
  color: #fff;
}

.testimonial-btn-next {
  background: #ededed;

  position: absolute;

  top: 50%;

  right: -20%;

  transform: translateY(-50%);

  transition: all 0.3s ease;

  z-index: 1;
}

.testimonial-btn-next i {
  color: #383a50;
}

.testimonial-btn-next:hover {
  background: #fd3d6b;
}

.testimonial-btn-next:hover i {
  color: #fff;
}

.blog-section {
  overflow: hidden;
}

.blog-section .section-header {
  position: relative;
}

@media (min-width: 768px) {
  .blog-section .section-header:hover h2::after {
    margin-left: 90px;
  }
}

.blog-section .section-header h2 {
  position: relative;

  margin: 0 auto;

  padding-bottom: 20px;
}

@media (min-width: 768px) {
  .blog-section .section-header h2 {
    margin: 0;
  }
}

@media (min-width: 768px) {
  .blog-section .section-header h2::before {
    left: 55px;
  }
}

@media (min-width: 768px) {
  .blog-section .section-header h2::after {
    left: 0;

    margin-left: 32px;
  }
}

.blog-section .section-header .all-view {
  position: relative;

  outline: none;

  color: #3f485d;

  font-family: "Roboto", sans-serif;

  text-transform: capitalize;

  font-weight: 400;

  margin-top: 40px;

  width: 100%;
}

@media (min-width: 768px) {
  .blog-section .section-header .all-view {
    top: -25px;

    margin-left: 60px;

    width: auto;
  }
}

.blog-section .section-header .all-view:hover {
  color: #fd3d6b;
}

.blog-section .section-header .all-view:hover::after {
  color: #fd3d6b;
}

.blog-section .section-header .all-view::after {
  position: absolute;

  content: "";

  font-family: "Font Awesome 5 Free";

  top: 50%;

  transform: translateY(-50%);

  color: #3f485d;

  font-weight: 600;

  padding-left: 5px;
}

@media (min-width: 768px) {
  .blog-section .section-header .all-view::after {
    right: -20px;
  }
}

@media (min-width: 768px) {
  .blog-section .section-header .all-view::before {
    width: 2px;

    height: 30px;

    top: -7px;

    left: -32px;

    background: #ededed;

    position: absolute;

    content: "";
  }
}

.blog-section .section-wrapper {
  overflow: hidden;
}

@media (min-width: 992px) {
  .blog-section .section-wrapper {
    margin: -15px;
  }
}

.blog-section .section-wrapper .post-item {
  display: flex;

  flex-direction: column;

  height: 100%;
}

.blog-section .section-wrapper .post-item .post-item-inner {
  display: flex;

  flex-direction: column;

  height: 100%;
}

@media (min-width: 768px) {
  .blog-section .section-wrapper .post-item .post-item-inner {
    margin: 15px;
  }
}

.blog-section .section-wrapper .post-item .post-item-inner .post-thumb {
  overflow: hidden;

  border-top-left-radius: 10px;

  border-top-right-radius: 10px;
}

.blog-section .section-wrapper .post-item .post-item-inner .post-thumb a {
  display: block;
}

.blog-section .section-wrapper .post-item .post-item-inner .post-thumb a img {
  min-height: 280px !important;

  height: 100%;

  width: 100%;

  object-fit: cover;
}

.blog-section .section-wrapper .post-item .post-item-inner .post-content {
  flex: 1;

  display: flex;

  flex-direction: column;

  justify-content: space-between;

  border: #066022 1px solid;

  padding: 10px;

  border-bottom-left-radius: 10px;

  border-bottom-right-radius: 10px;

  min-height: 380px;
}

.blog-section .section-wrapper .post-item .post-item-inner .post-content>span {
  font-weight: 600;

  text-transform: uppercase;

  font-family: "Roboto", sans-serif;

  font-size: 0.875rem;

  color: #3f485d;
}

.blog-section .section-wrapper .post-item .post-item-inner .post-content h5 {
  margin: 0;

  padding: 5px 0px 15px 0px;
}

.blog-section .section-wrapper .post-item .post-item-inner .post-content h5 a {
  display: inline-block;

  outline: none;
}

.blog-section .section-wrapper .post-item .post-item-inner .post-content p {
  color: #3f485d;
}

.blog-section .section-wrapper .post-item .post-item-inner .post-content .meta-post span {
  align-items: center;

  display: flex;

  flex-wrap: wrap;

  width: 100%;

  color: #7f7f7f;

  font-size: 0.875rem;

  font-weight: 400;

  font-family: "Roboto", sans-serif;
}

.blog-section .section-wrapper .post-item .post-item-inner .post-content .meta-post span .date {
  color: #7f7f7f;

  position: relative;

  outline: none;

  padding-left: 15px;
}

.blog-section .section-wrapper .post-item .post-item-inner .post-content .meta-post span .date::after {
  position: absolute;

  content: "";

  top: 0;

  left: 4px;

  width: 2px;

  height: 100%;

  background: #ededed;
}

.blog-section .section-wrapper .post-item .post-item-inner .post-content .meta-post span .date:hover {
  color: #fd3d6b;
}

.blog-section .section-wrapper .post-item .post-item-inner .post-content .meta-post span .name {
  color: #383a50;

  outline: none;

  font-weight: 600;

  padding: 0 5px;
}

.blog-section .section-wrapper .post-item .post-item-inner .post-content .meta-post span .name:hover {
  color: #fd3d6b;
}

.blog-section .section-wrapper .post-item .post-item-inner .post-content .meta-post span img {
  padding-right: 15px;
}

@media (max-width: 991px) {
  .blog-section .section-wrapper .post-item .post-item-inner .post-content .meta-post span img {
    display: none;
  }
}

.blog-section .section-wrapper .post-item .post-item-inner:hover .post-content h5 a {
  color: #066022;
}

/* Place the nav neatly to the right of the header on desktop, centered on mobile */

.blog-btn {
  position: absolute;

  right: 0;

  top: 20px;

  left: auto;

  display: flex;

  align-items: center;

  gap: 10px;

  transform: none;
}

@media (max-width: 991px) {
  .blog-btn {
    position: relative;

    top: 10px;

    right: auto;

    justify-content: center;

    margin-top: 8px;
  }
}

/* Arrow buttons */

.blog-navy {
  width: 36px;

  height: 36px;

  border: 1px solid #e6e9ef;

  border-radius: 999px;

  padding: 0;

  margin: 1rem 0 0 0;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  cursor: pointer;

  background: #fff;

  color: #066022;
  /* icon color */

  transition:
    box-shadow 0.2s ease,
    border-color 0.2s ease,
    background 0.2s ease,
    color 0.2s ease;
}

.blog-navy:hover {
  background: #066022;

  color: #fff;

  border-color: #066022;

  box-shadow: 0 4px 12px rgba(6, 96, 34, 0.18);
}

/* Draw chevrons with pure CSS */

.blog-navy::before {
  content: "";

  display: block;

  width: 12px;

  height: 12px;

  border-right: 2px solid currentColor;

  border-bottom: 2px solid currentColor;

  transform: rotate(-45deg);
}

.blog-btn-prev::before {
  transform: rotate(135deg);
  /* left arrow */
}

/* Fraction pill */

.blog-pagination {
  display: inline-flex;

  align-items: center;

  justify-content: center;

  min-width: 68px;

  padding: 6px 12px;

  border-radius: 999px;

  background: #f4f6f8;

  font:
    600 14px/1 "Roboto",
    sans-serif;

  color: #0c3a1f;

  letter-spacing: 0.2px;
}

/* Make current number bold, total dimmer, separator subtle */

.blog-pagination .swiper-pagination-current {
  font-weight: 700;
}

.blog-pagination .swiper-pagination-total {
  opacity: 0.6;
}

.blog-pagination .sep {
  margin: 0 6px;
  opacity: 0.45;
}

/* Remove the tiny bordered circles you had before */

.blog-btn-prev,
.blog-btn-next {
  border-color: #e6e9ef;
  /* handled above */
}

#news-updates .swiper-container-horizontal>.swiper-pagination-bullets,
.swiper-pagination-custom,
.swiper-pagination-fraction {
  bottom: 2.3rem !important;
}

.contact-section .section-wrapper .contact {
  margin: 0 -15px;
}

.contact-section .section-wrapper .contact .contact-item {
  width: calc(100% / 1);
}

@media (min-width: 768px) {
  .contact-section .section-wrapper .contact .contact-item {
    width: calc(100% / 2);
  }
}

.contact-section .section-wrapper .contact .contact-item .contact-item-inner {
  margin: 15px;
}

.contact-section .section-wrapper .contact .contact-item .contact-item-inner input {
  padding: 20px;

  background: #fff;

  border-radius: 6px;

  color: #383a50;

  border: none;
}

.contact-section .section-wrapper .contact .contact-item .contact-item-inner textarea {
  border: none;

  background: #fff;

  padding: 20px;

  border-radius: 6px;
}

.contact-section .section-wrapper .submit-btn {
  width: 100%;
}

.contact-section .section-wrapper .submit-btn [type="submit"] {
  width: 100%;

  background: #066022;

  font-family: "Roboto", sans-serif;

  font-size: 0.875rem;

  font-weight: 600;

  text-transform: uppercase;

  border-radius: 6px;

  padding: 19px;

  transition: all 0.3s ease;
}

.contact-section .section-wrapper .submit-btn [type="submit"]:hover {
  background: #383a50;
}

.contact-section.style-2 {
  background-position: center center;

  background-size: cover;

  background-repeat: no-repeat;
}

.gmap-section div#map iframe {
  width: 100%;

  height: 100%;

  border: none;

  margin-bottom: 0;

  box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.1);
}

.gmap-section.style-1 div#map {
  height: 600px;
}

.gmap-section.style-2 div#map {
  height: 498px;

  margin-top: 50px;

  border-radius: 6px;
}

.gmap-section.style-3 div#map {
  height: 423px;

  border-radius: 6px;
}

.gmap-section.style-4 {
  height: 100vh;
}

.gmap-section.style-4 div#map {
  height: 600px;
}

.counreup-section .counterup {
  margin: 0;

  background: #fff;

  border-radius: 6px;

  padding: 40px 0;

  display: flex;

  justify-content: space-around;

  text-align: center;

  flex-wrap: wrap;

  box-shadow:
    0 1px 4px rgba(0, 0, 0, 0.1),
    0 2px 3px rgba(0, 0, 0, 0.1);
}

@media (min-width: 992px) {
  .counreup-section .counterup {
    margin-top: -50px !important;

    padding: 0;
  }
}

.counreup-section .counterup .counterup-list {
  width: 100%;

  text-align: center;

  padding: 0;

  border: 1px solid #ededed;

  border-bottom: none;
}

@media (min-width: 768px) {
  .counreup-section .counterup .counterup-list {
    width: 50%;
  }
}

@media (min-width: 992px) {
  .counreup-section .counterup .counterup-list {
    width: 25%;
  }
}

.counreup-section .counterup .counterup-list:first-child {
  border-top-left-radius: 6px;

  border-top-right-radius: 6px;
}

@media (min-width: 768px) {
  .counreup-section .counterup .counterup-list:first-child {
    border-top-right-radius: 0;

    border-right: none;
  }
}

@media (min-width: 992px) {
  .counreup-section .counterup .counterup-list:first-child {
    border-bottom: 1px solid #ededed;

    border-bottom-left-radius: 6px;
  }
}

.counreup-section .counterup .counterup-list:first-child .c-event {
  border-top-left-radius: 6px;
}

@media (min-width: 992px) {
  .counreup-section .counterup .counterup-list:first-child .c-event {
    border-top-left-radius: 0;
  }
}

.counreup-section .counterup .counterup-list:first-child .c-clients {
  border-top-right-radius: 6px;
}

@media (min-width: 768px) {
  .counreup-section .counterup .counterup-list:nth-child(2) {
    border-top-right-radius: 6px;
  }
}

@media (min-width: 992px) {
  .counreup-section .counterup .counterup-list:nth-child(2) {
    border-bottom: 1px solid #ededed;

    border-top-right-radius: 0;

    border-right: none;
  }
}

.counreup-section .counterup .counterup-list:nth-child(3) {
  border-right: 1px solid #ededed;
}

@media (min-width: 768px) {
  .counreup-section .counterup .counterup-list:nth-child(3) {
    border-bottom: 1px solid #ededed;

    border-right: none;
  }
}

@media (min-width: 992px) {
  .counreup-section .counterup .counterup-list:nth-child(3) {
    border-bottom-left-radius: 0;

    border-right: none;
  }
}

.counreup-section .counterup .counterup-list:last-child {
  border-bottom-left-radius: 6px;

  border-bottom-right-radius: 6px;

  border-bottom: 1px solid #ededed;
}

/* ------------------------------------ NEW CSS ------------------------------------ */

.c1 .counter,
.c1 .plus-icon {
  color: #ec3517 !important;
}

.c2 .counter,
.c2 .plus-icon {
  color: #0072bc !important;
}

.c3 .counter,
.c3 .plus-icon {
  color: #195c49 !important;
}

.c4 .counter,
.c4 .plus-icon {
  color: #e4aa3a !important;
}

/* ------------------------------------ End ------------------------------------ */

@media (min-width: 768px) {
  .counreup-section .counterup .counterup-list:last-child {
    border-bottom-left-radius: 0;
  }
}

@media (min-width: 992px) {
  .counreup-section .counterup .counterup-list:last-child {
    border-bottom: 1px solid #ededed;

    border-top-right-radius: 6px;
  }
}

.counreup-section .counterup .counterup-list:last-child .c-event {
  border-bottom-left-radius: 6px;
}

.counreup-section .counterup .counterup-list:last-child .c-clients {
  border-bottom-right-radius: 6px;
}

.counreup-section .counterup .counterup-list .c-event {
  position: relative;

  width: 100%;

  padding: 10px 0;
}

.counreup-section .counterup .counterup-list .c-employ {
  position: relative;

  width: 100%;

  padding: 10px 0;
}

.counreup-section .counterup .counterup-list .c-vanues {
  position: relative;

  width: 100%;

  padding: 10px 0;
}

.counreup-section .counterup .counterup-list .c-clients {
  position: relative;

  width: 100%;

  padding: 10px 0;
}

.counreup-section .counterup .counterup-list .c-event-top {
  font-size: 60px;

  line-height: 4.875rem;

  font-weight: 900;

  font-family: "Roboto", sans-serif;

  color: #f2f2f2;

  display: block;

  text-transform: capitalize;

  position: absolute;

  top: -9px;

  left: 50%;

  text-align: center;

  transform: translateX(-50%);
}

@media (min-width: 992px) {
  .counreup-section .counterup .counterup-list .c-event-top {
    font-size: 36px;

    line-height: 3.125rem;
  }
}

@media (min-width: 1200px) {
  .counreup-section .counterup .counterup-list .c-event-top {
    font-size: 40px;

    line-height: 4.875rem;
  }
}

.counreup-section .counterup .counterup-list .counter,
.counreup-section .counterup .counterup-list .plus-icon {
  font-family: "Roboto", sans-serif;

  font-weight: 600;

  font-size: 54px;

  color: #383a50;

  margin-top: 30px;

  display: inline-block;

  z-index: 1;

  position: relative;
}

.counreup-section .counterup .counterup-list p {
  max-width: 200px;

  margin: 0 auto;

  margin-bottom: 30px;
}

.choose-us.style-1 {
  background-size: cover;

  background-repeat: no-repeat;

  background-position: center;
}

.choose-us.style-1 .section-wrapper {
  padding: 30px;

  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.2);

  border-radius: 12px;

  opacity: 0.95;

  background: #fff;
}

.choose-us.style-1 .section-wrapper .choose-item {
  width: calc(100% / 1);

  position: relative;
}

@media (min-width: 992px) {
  .choose-us.style-1 .section-wrapper .choose-item {
    width: calc(100% / 2);
  }
}

@media (min-width: 992px) {
  .choose-us.style-1 .section-wrapper .choose-item:nth-child(odd) .item-inner::after {
    content: "";

    width: 1px;

    height: 100%;

    background: #e7e7e7;

    position: absolute;

    top: 0;

    right: 0;
  }
}

@media (min-width: 992px) {
  .choose-us.style-1 .section-wrapper .choose-item:nth-child(even) .item-inner {
    padding-left: 30px;
  }
}

.choose-us.style-1 .section-wrapper .choose-item:nth-child(1) .item-inner::before {
  display: none;
}

.choose-us.style-1 .section-wrapper .choose-item:nth-child(2) .item-inner::before {
  display: none;
}

@media (min-width: 992px) {
  .choose-us.style-1 .section-wrapper .choose-item:nth-child(odd)::after {
    content: "";

    position: absolute;

    width: 15px;

    height: 15px;

    border-radius: 50%;

    background: #fff;

    top: -7px;

    right: -7px;

    z-index: 1;
  }
}

.choose-us.style-1 .section-wrapper .choose-item:nth-child(1)::after {
  display: none;
}

.choose-us.style-1 .section-wrapper .choose-item:nth-child(2)::after {
  display: none;
}

.choose-us.style-1 .section-wrapper .choose-item .item-inner {
  text-align: center;

  padding: 30px 0;

  position: relative;
}

@media (min-width: 768px) {
  .choose-us.style-1 .section-wrapper .choose-item .item-inner {
    display: flex;

    text-align: left;
  }
}

@media (min-width: 992px) {
  .choose-us.style-1 .section-wrapper .choose-item .item-inner::before {
    content: "";

    width: 100%;

    height: 1px;

    background: #e7e7e7;

    position: absolute;

    top: 0;

    right: 0;
  }
}

.choose-us.style-1 .section-wrapper .choose-item .item-inner .choose-icon span {
  width: 64px;

  height: 64px;

  color: #fff;

  border-radius: 50%;

  font-size: 20px;

  line-height: 64px;

  display: inline-block;

  text-align: center;

  background: #0fbcf9;

  margin-bottom: 25px;
}

.choose-us.style-1 .section-wrapper .choose-item .item-inner .choose-icon img {
  width: 100px;

  padding: 10px 15px;
}

@media (min-width: 768px) {
  .choose-us.style-1 .section-wrapper .choose-item .item-inner .choose-icon span {
    margin-right: 20px;

    margin-bottom: 0;
  }
}

.choose-us.style-1 .section-wrapper .choose-item .item-inner .content {
  width: 100%;
}

.choose-us.style-1 .section-wrapper .choose-item .item-inner .content h6 {
  color: #383a50;

  margin-top: 0;
}

.choose-us.style-1 .section-wrapper .choose-item .item-inner .content p {
  color: #3f485d;

  margin-bottom: 0;

  font-family: "Roboto", sans-serif;
}

.choose-us .section-wrapper .choose-item:nth-child(2) .item-inner .choose-icon span {
  background: #3c40c6;
}

.choose-us .section-wrapper .choose-item:nth-child(3) .item-inner .choose-icon span {
  background: #9c27b0;
}

.choose-us .section-wrapper .choose-item:nth-child(4) .item-inner .choose-icon span {
  background: #f53b57;
}

.choose-us .section-wrapper .choose-item:nth-child(5) .item-inner .choose-icon span {
  background: #ffa801;
}

.choose-us .section-wrapper .choose-item:nth-child(6) .item-inner .choose-icon span {
  background: #009688;
}

.choose-us .section-wrapper .choose-item:nth-child(7) .item-inner .choose-icon span {
  background: #00d8d6;
}

.choose-us .section-wrapper .choose-item:nth-child(8) .item-inner .choose-icon span {
  background: #ffd32a;
}

/* @@@@@@@@@@ global css start here @@@@@@ */

.dd-icon-down {
  position: relative;
}

.dd-icon-down::after {
  content: "";

  width: 8px;

  height: 2px;

  display: block;

  position: absolute;

  top: 50%;

  transform: rotate(-45deg);

  right: -9px;

  background: #383a50;
}

.dd-icon-down::before {
  content: "";

  width: 8px;

  height: 2px;

  display: block;

  position: absolute;

  top: 50%;

  transform: rotate(45deg);

  right: -5px;

  background: #383a50;
}

.m-menu li.open a.dd-icon-down::before,
.m-menu li.open a.dd-icon-down::after {
  background: #fd3d6b;
}

.m-menu li.open a.dd-icon-down::before {
  transform: rotate(-45deg);
}

.m-menu li.open a.dd-icon-down::after {
  transform: rotate(45deg);
}

.main-menu li.active a.dd-icon-down::after {
  background: #fd3d6b;
}

.m-menu .dd-icon-down::after,
.m-menu .dd-icon-down::before {
  background: #383a50;
}

.style-2 .dd-icon-down::before,
.style-2 .dd-icon-down::after {
  background: #3f485d;
}

.style-3 .dd-icon-down::before,
.style-3 .dd-icon-down::after {
  background: #3f485d;
}

.dd-icon-right {
  position: relative;
}

.dd-icon-right::after {
  content: "";

  width: 8px;

  height: 2px;

  display: block;

  position: absolute;

  top: 50%;

  transform: rotate(-45deg);

  right: -9px;

  background: #fff;
}

.dd-icon-right::before {
  content: "";

  width: 8px;

  height: 2px;

  display: block;

  position: absolute;

  top: 50%;

  transform: rotate(45deg);

  right: -5px;

  background: #fff;
}

.hidden {
  overflow: hidden;
}

.padding-tb {
  padding: 60px 0;
}

@media (min-width: 992px) {
  .padding-tb {
    padding: 100px 0;
  }
}

.sidebar-slider {
  position: relative;

  overflow: hidden;
}

.btn {
  width: 40px;

  height: 40px;

  line-height: 40px;

  border-radius: 50%;

  text-align: center;

  padding: 0;

  background: #ededed;

  -webkit-transition: all 0.3s ease;

  transition: all 0.3s ease;

  cursor: pointer;

  z-index: 1;
}

.btn i {
  color: #fff;

  -webkit-transition: all 0.3s ease;

  transition: all 0.3s ease;
}

.top {
  position: absolute;

  top: -34px;

  left: 50%;

  transform: translateX(-50%);

  display: inline-block;

  width: 175px;

  text-align: center;

  height: 35px;

  line-height: 50px;

  transition: all 0.3s ease;

  background: url(../../assets/images/footer/s-top.png);
}

.top .scrollToTop {
  width: 100%;

  height: 100%;

  display: block;

  position: fixed;

  outline: none;

  color: #383a50;

  transition: all 0.3s ease;
}

.top .scrollToTop:hover {
  color: #fd3d6b;
}

.top .scrollToTop i {
  font-size: 2rem;

  padding-top: 5px;
}

.top .scrollToTop:hover {
  color: #fd3d6b;
}

.bg-ash {
  background: #f2f2f2;
}

.section-header {
  text-align: center;

  margin-bottom: 60px;

  margin-top: -9px;
}

.section-header h2 {
  position: relative;

  margin: 0;

  padding-bottom: 20px;

  margin-bottom: 30px;

  display: block;
}

.section-header h2::before {
  content: "";

  width: 12px;

  height: 4px;

  background: #066022;

  position: absolute;

  bottom: -4px;

  left: 50%;

  margin-left: -35px;

  transform: translateX(-50%);

  border-radius: 2px;

  transition: all 0.3s ease;
}

.section-header h2::after {
  content: "";

  width: 72px;

  height: 4px;

  background: #066022;

  position: absolute;

  bottom: -4px;

  right: 0;

  left: 50%;

  margin-left: -25px;

  border-radius: 2px;

  transition: all 0.3s ease;
}

.section-header p {
  margin-bottom: 0;

  font-weight: 400;

  color: #3f485d;

  font-size: 1.125rem;
}

a {
  transition: all 0.3s ease;
}

.section-header:hover h2::after {
  width: 12px;

  margin-left: 35px;
}

.section-header:hover h2::before {
  width: 72px;

  margin-left: -5px;
}

.absolute-text {
  font-weight: 600;

  font-size: 60px;

  font-family: poppins;

  transform: translateX(-50%) translateY(0px);

  top: 0;

  left: 50%;

  position: absolute;

  color: #ededed;

  z-index: -1;
}

@media (min-width: 768px) {
  .absolute-text {
    font-size: 160px;

    transform: translateX(-50%) translateY(-50px);
  }
}

@media (min-width: 992px) {
  .absolute-text {
    font-size: 242px;

    transform: translateX(-50%) translateY(-135px);
  }
}

.absolute-text::before {
  position: absolute;

  content: "";

  left: 0;

  top: 50%;

  background: url(../../assets/images/pattan.png);

  height: 100px;

  width: 100%;

  transform: translateY(-50%);
}

@-webkit-keyframes bounce1 {

  0%,
  100% {
    -webkit-transform: translateY(0);

    transform: translateY(0);
  }

  50% {
    -webkit-transform: translateY(-20px);

    transform: translateY(-20px);
  }
}

@keyframes bounce1 {

  0%,
  100% {
    -webkit-transform: translateY(0);

    transform: translateY(0);
  }

  50% {
    -webkit-transform: translateY(-20px);

    transform: translateY(-20px);
  }
}

@keyframes zaraj {
  0% {
    border-radius: 45% 55% 37% 63%/63% 42% 58% 37%;

    transform: translate(0, 0) rotate(0);
  }

  25% {
    border-radius: 24% 76% 25% 75%/41% 62% 38% 59%;

    transform: translate(-7%, 8%) rotate(15deg);
  }

  50% {
    border-radius: 73% 27% 43% 57%/31% 30% 70% 69%;

    transform: translate(6%, -9%) rotate(-15deg);
  }

  75% {
    border-radius: 73% 27% 51% 49%/69% 43% 57% 31%;

    transform: translate(-7%, 1%) rotate(15deg);
  }

  100% {
    border-radius: 45% 55% 37% 63%/63% 42% 58% 37%;

    transform: translate(0, 0);
  }
}

.pulse {
  animation: pulse 1s infinite;

  animation-duration: 2s;
}

@keyframes pulse {
  0% {
    -moz-box-shadow: 0 0 0 0 rgba(255, 25, 55, 0.3);

    box-shadow: 0 0 0 0 rgba(255, 25, 55, 0.5);
  }

  70% {
    -moz-box-shadow: 0 0 0 20px rgba(255, 25, 55, 0);

    box-shadow: 0 0 0 20px rgba(255, 25, 55, 0);
  }

  100% {
    -moz-box-shadow: 0 0 0 0 rgba(255, 25, 55, 0);

    box-shadow: 0 0 0 0 rgba(255, 25, 55, 0);
  }
}

div#scrollbar::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);

  background-color: #fff;
}

div#scrollbar::-webkit-scrollbar {
  width: 6px;

  background-color: #fff;
}

div#scrollbar::-webkit-scrollbar-thumb {
  background-color: #fd3d6b;
}

button:focus,
a:focus,
a:hover,
button:hover {
  outline: none;

  text-decoration: none;
}

/* .preloader {

  position: fixed;

  top: 0;

  left: 0;

  z-index: 999999999;

  width: 100%;

  height: 100%;

  background: white;

} */

/* .preloader .preloader-inner {

  position: absolute;

  top: 50%;

  left: 50%;

  -webkit-transform: translate(-50%, -50%);

  transform: translate(-50%, -50%);

} */

/* @keyframes preloader-fx {

  0% {

    -webkit-transform: scale(0, 0);

    transform: scale(0, 0);

    opacity: 0.5;

  }



  100% {

    -webkit-transform: scale(1, 1);

    transform: scale(1, 1);

    opacity: 0;

  }

}



@-webkit-keyframes preloader-fx {

  0% {

    -webkit-transform: scale(0, 0);

    opacity: 0.5;

  }



  100% {

    -webkit-transform: scale(1, 1);

    opacity: 0;

  }

} */

@keyframes price-ani {
  0% {
    -webkit-transform: scale(1, 1);

    transform: scale(1, 1);

    opacity: 0.5;
  }

  100% {
    -webkit-transform: scale(1.2, 1.2);

    transform: scale(1.2, 1.2);

    opacity: 0.1;
  }
}

.wow {
  animation-name: none !important;

  visibility: visible !important;
}

@media (min-width: 1400px) {
  .container-1310 {
    max-width: 1310px;
  }
}

.form-message {
  margin: 30px 0 0;

  text-align: center;
}

.form-message.error {
  color: #fd3d6b;
}

.post-item:hover .post-content a>h5 {
  color: #fd3d6b;
}

.post-item:hover .post-thumb a>img {
  transform: scale(1.1);
}

.format-video .post-thumb {
  position: relative;
}

.format-video .post-thumb img {
  max-width: 100% !important;

  display: block !important;
}

.format-video .post-thumb .post-content {
  position: absolute !important;

  background: transparent !important;

  bottom: 0;

  left: 0;

  width: 100%;
}

.format-video .post-thumb .post-content a h5 {
  color: #fff;
}

.format-video .post-thumb .post-content a h5:hover {
  color: #fd3d6b;
}

.format-video .post-thumb .post-content .meta-post span {
  color: #fff;
}

.format-video .post-thumb .post-content .meta-post span .name {
  color: #fff !important;

  font-weight: 600;

  display: inline-block;
}

.format-video .post-thumb .post-content .meta-post span .name:hover {
  color: #fd3d6b !important;
}

.format-video .post-thumb .post-content .meta-post span .date {
  color: #fff !important;

  display: inline-block;
}

.format-video .post-thumb .post-content .meta-post span .date:hover {
  color: #fd3d6b !important;
}

.google {
  background: #dd4b39;
}

.google:hover {
  background: #fff;

  border-color: #dd4b39 !important;
}

.google:hover i {
  color: #dd4b39;
}

.google i {
  color: #fff;
}

.youtube {
  background: #cd201f;
}

.youtube:hover {
  background: #fff;

  border-color: #cd201f !important;
}

.youtube:hover i {
  color: #cd201f;
}

.youtube i {
  color: #fff;
}

.mobile-header {
  padding: 10px 15px;

  position: fixed;

  top: 0;

  width: 100%;

  z-index: 111;

  display: flex;

  align-items: center;

  justify-content: space-between;
}

.mobile-header .header-bar {
  position: relative;

  width: 25px;

  height: 25px;

  cursor: pointer;
}

.mobile-header .header-bar span {
  background: #fd3d6b;

  width: 100%;

  height: 3px;

  display: block;

  position: absolute;

  left: 0;

  top: 50%;

  margin-top: -1px;

  transform-origin: center;

  transition: all 0.3s ease;
}

.mobile-header .header-bar span:nth-child(1) {
  margin-top: -9px;
}

.mobile-header .header-bar span:nth-child(2) {
  opacity: 1;
}

.mobile-header .header-bar span:nth-child(3) {
  margin-top: 7px;
}

nav.mobile-header.primary-menu.close {
  display: none;
}

.style-2 .mobile-menu-area {
  top: 0;
}

.style-2 .mobile-header {
  background: transparent;

  padding: 30px;
}

@media (min-width: 1400px) {
  .style-2 .mobile-header {
    padding: 30px 60px;
  }
}

.style-2 .mobile-header.sticky-nav {
  padding: 10px 15px;
}

@media (min-width: 576px) {
  .style-2 .mobile-header.sticky-nav {
    padding: 10px 30px;
  }
}

.style-2 .mobile-header.nav-up {
  top: -120px;
}

.style-2 .mobile-header.nav-down {
  top: 0;
}

/* Close Button */

.close-button {
  width: 36px;

  height: 36px;

  line-height: 36px;

  position: relative;

  right: 0;

  top: 0;

  overflow: hidden;

  text-indent: 16px;

  border: none;

  z-index: 1001;

  background: #fd3d6b;

  color: #fff;

  text-align: center;

  border-radius: 50%;

  cursor: pointer;
}

.close-button::before,
.close-button::after {
  content: "";

  position: absolute;

  width: 2px;

  height: 18px;

  top: 50%;

  left: 50%;

  background: #fff;

  transform: translate(-50%, -50%);
}

.close-button::before {
  -webkit-transform: translate(-50%, -50%) rotate(45deg);

  transform: translate(-50%, -50%) rotate(45deg);
}

.close-button::after {
  -webkit-transform: translate(-50%, -50%) rotate(-45deg);

  transform: translate(-50%, -50%) rotate(-45deg);
}

/* Menu */

.morph-shape svg {
  transform: rotate(180deg);
}

.menu {
  background: #fff;

  width: calc(100% - 40px);

  height: 100%;

  float: right;
}

/* Morph Shape */

.morph-shape {
  position: absolute;

  width: 40px;

  height: 100%;

  top: 0;

  left: 0;

  fill: #fff;

  z-index: 1000;
}

@media (max-width: 600px) {
  .morph-shape {
    display: none;
  }
}

/* Shown menu */

html {
  font-family: sans-serif;

  -ms-text-size-adjust: 100%;

  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  overflow-x: hidden;
}

footer,
header,
nav,
section {
  display: block;
}

main {
  display: block;
}

hr {
  -webkit-box-sizing: content-box;

  -moz-box-sizing: content-box;

  box-sizing: content-box;

  height: 0;

  overflow: visible;
}

a {
  background-color: transparent;

  -webkit-text-decoration-skip: objects;
}

a:active,
a:hover {
  outline-width: 0;
}

b {
  font-weight: inherit;
}

b {
  font-weight: 600;
}

code {
  font-family: monospace, monospace;

  font-size: 1em;
}

mark {
  background-color: #eee;

  color: #222;
}

small {
  font-size: 80%;
}

sup {
  font-size: 75%;

  line-height: 0;

  position: relative;

  vertical-align: baseline;
}

sup {
  top: -0.5em;
}

video {
  display: inline-block;
}

img {
  border-style: none;
}

svg:not(:root) {
  overflow: hidden;
}

button,
input,
optgroup,
select,
textarea {
  font-family: sans-serif;

  font-size: 100%;

  margin: 0;
}

button,
input {
  overflow: visible;
}

button,
select {
  text-transform: none;
}

button,
html [type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
}

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;

  padding: 0;
}

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

fieldset {
  border: 1px solid #bbb;

  margin: 0 2px;

  padding: 0.35em 0.625em 0.75em;
}

legend {
  -webkit-box-sizing: border-box;

  -moz-box-sizing: border-box;

  box-sizing: border-box;

  color: inherit;

  display: table;

  max-width: 100%;

  padding: 0;

  white-space: normal;
}

progress {
  display: inline-block;

  vertical-align: baseline;
}

textarea {
  overflow: auto;
}

[type="checkbox"],
[type="radio"] {
  -webkit-box-sizing: border-box;

  -moz-box-sizing: border-box;

  box-sizing: border-box;

  padding: 0;
}

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

::-webkit-file-upload-button {
  -webkit-appearance: button;

  font: inherit;
}

details,
menu {
  display: block;
}

canvas {
  display: inline-block;
}

template {
  display: none;
}

[hidden] {
  display: none;
}

/*--------------------------------------------------------------

2.0 Accessibility

--------------------------------------------------------------*/

/* Text meant only for screen readers. */

/*--------------------------------------------------------------

3.0 Alignments

--------------------------------------------------------------*/

/*--------------------------------------------------------------

4.0 Clearings

--------------------------------------------------------------*/

.clear:before,
.clear:after,
.nav-links:before,
.nav-links:after,
.pagination:before,
.pagination:after,
.widget:before,
.widget:after {
  content: "";

  display: table;

  table-layout: fixed;
}

.clear:after,
.nav-links:after,
.pagination:after,
.widget:after {
  clear: both;
}

/*--------------------------------------------------------------

5.0 Typography

--------------------------------------------------------------*/

body,
button,
input,
select,
textarea {
  color: #3f485d;

  font-family: "Roboto", sans-serif;

  font-size: 1rem;

  font-weight: 400;
}

h2,
h3,
h4,
h5,
h6 {
  clear: both;

  margin: 0.25em 0 0.25em;

  font-weight: 600;

  color: #06163a;

  font-family: "Poppins", sans-serif;
}

h2:first-child,
h3:first-child,
h4:first-child,
h5:first-child,
h6:first-child {
  padding-top: 0;
}

h2 {
  font-size: 30px;
}

h3 {
  font-size: 24px;
}

h4 {
  font-size: 20px;
}

h5 {
  font-size: 18px;
}

h6 {
  font-size: 18px;
}

p {
  margin: 0 0 1.5em;

  padding: 0;

  line-height: 1.625rem;

  color: #3f485d;
}

em,
i {
  font-style: italic;
}

address {
  margin: 0 0 1.5em;

  line-height: 1.625rem;
}

code,
tt,
var {
  font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace;

  font-size: 1rem;
}

mark {
  background: #eee;

  text-decoration: none;
}

/* Typography for Arabic Font */

html[lang="ps"] body,
html[lang="ps"] button,
html[lang="ps"] input,
html[lang="ps"] select,
html[lang="ps"] textarea {
  font-family: Tahoma, Arial, sans-serif;
}

html[lang="ps"] h2,
html[lang="ps"] h3,
html[lang="ps"] h4,
html[lang="ps"] h5,
html[lang="ps"] h6 {
  font-weight: 600;
}

/* Typography for Chinese Font */

/* Typography for Cyrillic Font */

html[lang="uk"] body,
html[lang="uk"] button,
html[lang="uk"] input,
html[lang="uk"] select,
html[lang="uk"] textarea {
  font-family: "Helvetica Neue", Helvetica, "Segoe UI", Arial, sans-serif;
}

html[lang="uk"] h2,
html[lang="uk"] h3,
html[lang="uk"] h4,
html[lang="uk"] h5,
html[lang="uk"] h6 {
  font-weight: 600;
}

/* Typography for Devanagari Font */

/* Typography for Greek Font */

html[lang="el"] body,
html[lang="el"] button,
html[lang="el"] input,
html[lang="el"] select,
html[lang="el"] textarea {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

html[lang="el"] h2,
html[lang="el"] h3,
html[lang="el"] h4,
html[lang="el"] h5,
html[lang="el"] h6 {
  font-weight: 600;
}

/* Typography for Gujarati Font */

/* Typography for Hebrew Font */

/* Typography for Japanese Font */

/* Typography for Korean font */

/* Typography for Thai Font */

html[lang="th"] h2,
html[lang="th"] h3,
html[lang="th"] h4,
html[lang="th"] h5,
html[lang="th"] h6 {
  font-family: "Sukhumvit Set", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

html[lang="th"] body,
html[lang="th"] button,
html[lang="th"] input,
html[lang="th"] select,
html[lang="th"] textarea {
  font-family: "Sukhumvit Set", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/* Remove letter-spacing for all non-latin alphabets */

html[lang="ps"] *,
html[lang="uk"] *,
html[lang="el"] *,
html[lang="th"] * {
  letter-spacing: 0 !important;
}

/*--------------------------------------------------------------

6.0 Forms

--------------------------------------------------------------*/

label {
  color: #3f485d;

  display: block;

  font-weight: 800;

  margin-bottom: 0.5em;
}

fieldset {
  margin-bottom: 1em;
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="time"],
input[type="color"],
textarea {
  color: #666;

  background: #fff;

  background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0),
      rgba(255, 255, 255, 0));

  border: 1px solid #ededed;

  -webkit-border-radius: 3px;

  border-radius: 4px;

  display: block;

  padding: 0.7em;

  width: 100%;

  margin-bottom: 1.25rem;

  outline: none;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="date"]:focus,
input[type="time"]:focus,
input[type="color"]:focus,
textarea:focus {
  color: #222;

  border-color: #3f485d;
}

select {
  border: 1px solid #bbb;

  -webkit-border-radius: 3px;

  border-radius: 3px;

  max-width: 100%;
}

input[type="radio"],
input[type="checkbox"] {
  margin-right: 0.5em;
}

input[type="radio"]+label,
input[type="checkbox"]+label {
  font-weight: 400;
}

button,
input[type="button"],
input[type="submit"] {
  background-color: #222;

  border: 0;

  -webkit-border-radius: 2px;

  border-radius: 2px;

  -webkit-box-shadow: none;

  box-shadow: none;

  color: #fff;

  cursor: pointer;

  display: inline-block;

  font-size: 14px;

  font-size: 0.875rem;

  font-weight: 600;

  padding: 15px 0;

  text-shadow: none;
}

input+button,
input+input[type="button"],
input+input[type="submit"] {
  padding: 0.75em 2em;
}

input[type="reset"] {
  background-color: #ddd;

  color: #222;
}

button:hover,
button:focus,
input[type="button"]:hover,
input[type="button"]:focus,
input[type="submit"]:hover,
input[type="submit"]:focus {
  background: #767676;
}

input[type="reset"]:hover,
input[type="reset"]:focus {
  background: #bbb;
}

/* Placeholder text color -- selectors need to be separate to work. */

::-webkit-input-placeholder {
  color: #3f485d;

  font-family: "Roboto", sans-serif;
}

::-moz-placeholder {
  color: #3f485d;

  font-family: "Roboto", sans-serif;

  opacity: 1;

  /* Since FF19 lowers the opacity of the placeholder by default */
}

/*--------------------------------------------------------------

7.0 Formatting

--------------------------------------------------------------*/

hr {
  background-color: #bbb;

  border: 0;

  height: 1px;

  margin-bottom: 1.5em;
}

/*--------------------------------------------------------------

8.0 Lists

--------------------------------------------------------------*/

ul {
  padding: 0;
}

ul {
  list-style: disc;

  margin-left: 1.5em;
}

li>ul {
  margin-left: 1.5em;
}

dt {
  font-weight: 600;

  line-height: 1.625rem;

  margin: 0 1.5em;
}

/*--------------------------------------------------------------

9.0 Tables

--------------------------------------------------------------*/

table {
  border-collapse: collapse;

  margin: 0 0 1.5em;

  width: 100%;
}

thead th {
  padding-bottom: 0.5em;
}

th {
  padding: 0.4em;

  text-align: left;

  border: 1px solid #ededed;
}

tr {
  border-bottom: 1px solid #ededed;

  border-top: 1px solid #ededed;

  border-left: 1px solid #ededed;
}

td {
  padding: 1em;

  border: 1px solid #ededed;
}

th:last-child,
td:last-child {
  padding-right: 0;
}

/*--------------------------------------------------------------

10.0 Links

--------------------------------------------------------------*/

a {
  color: #3f485d;

  text-decoration: none;

  display: inline-block;

  outline: none;
}

a:focus {
  outline: thin dotted;
}

a:hover,
a:active {
  color: #000;

  outline: 0;
}

/* Hover effects */

.widget a {
  -webkit-box-shadow: inset 0 -1px 0 #0f0f0f;

  box-shadow: inset 0 -1px 0 #0f0f0f;

  -webkit-transition:
    color 80ms ease-in,
    -webkit-box-shadow 130ms ease-in-out;

  transition:
    color 80ms ease-in,
    -webkit-box-shadow 130ms ease-in-out;

  transition:
    color 80ms ease-in,
    box-shadow 130ms ease-in-out;

  transition:
    color 80ms ease-in,
    box-shadow 130ms ease-in-out,
    -webkit-box-shadow 130ms ease-in-out;
}

.widget ul li a {
  -webkit-box-shadow: inset 0 -1px 0 white;

  box-shadow: inset 0 -1px 0 white;

  text-decoration: none;

  -webkit-transition:
    color 80ms ease-in,
    -webkit-box-shadow 130ms ease-in-out;

  transition:
    color 80ms ease-in,
    -webkit-box-shadow 130ms ease-in-out;

  transition:
    color 80ms ease-in,
    box-shadow 130ms ease-in-out;

  transition:
    color 80ms ease-in,
    box-shadow 130ms ease-in-out,
    -webkit-box-shadow 130ms ease-in-out;
}

.widget a:focus,
.widget a:hover,
.widget ul li a:focus,
.widget ul li a:hover {
  color: #000;
}

/* Fixes linked images */

.widget a img {
  -webkit-box-shadow: 0 0 0 8px #fff;

  box-shadow: 0 0 0 8px #fff;
}

/*--------------------------------------------------------------

11.0 Featured Image Hover

--------------------------------------------------------------*/

/*--------------------------------------------------------------

13.0 Layout

--------------------------------------------------------------*/

html {
  -webkit-box-sizing: border-box;

  -moz-box-sizing: border-box;

  box-sizing: border-box;
}

*,
*:before,
*:after {
  /* Inherit box-sizing to make it easier to change the property for components that leverage other behavior; see http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */

  -webkit-box-sizing: inherit;

  -moz-box-sizing: inherit;

  box-sizing: inherit;
}

body {
  background: #fff;
}

/* @media (max-width: 991px) {
  body {
    margin-top: 76px;
  }
} */

@media (min-width: 992px) {
  body.body-padding {
    margin-top: 101px;
  }
}

#page {
  position: relative;

  word-wrap: break-word;
}

.wrap {
  margin-left: auto;

  margin-right: auto;

  max-width: 600px;

  padding-left: 2em;

  padding-right: 2em;
}

.wrap:after {
  clear: both;

  content: "";

  display: block;
}

/*--------------------------------------------------------------

13.4 Posts

--------------------------------------------------------------*/

/* Post Landing Page */

.sticky {
  position: relative;
}

/* Aligned blockquotes */

/* Blog landing, search, archives */

/* More tag */

/* Single Post */

/* Post Formats */

/* Post Navigation */

/*--------------------------------------------------------------

13.5 Pages

--------------------------------------------------------------*/

.page:not(.home) #content {
  padding-bottom: 1.5em;
}

/* 404 page */

/*--------------------------------------------------------------

13.6 Footer

--------------------------------------------------------------*/

/* Footer widgets */

/* Social nav */

/* Site info */

/*--------------------------------------------------------------

14.0 Comments

--------------------------------------------------------------*/

/*--------------------------------------------------------------

15.0 Widgets

--------------------------------------------------------------*/

.widget {
  padding-bottom: 3em;
}

.widget select {
  width: 100%;
}

.widget ul {
  list-style: none;

  margin: 0;
}

li {
  padding: 5px 0;
}

.widget ul li {
  border-bottom: 1px solid #ddd;

  border-top: 1px solid #ddd;

  padding: 0.5em 0;
}

.widget:not(.widget_tag_cloud) ul li+li {
  margin-top: -1px;
}

.widget ul li ul {
  margin: 0 0 -1px;

  padding: 0;

  position: relative;
}

.widget ul li li {
  border: 0;

  padding-left: 24px;

  padding-left: 1.5rem;
}

/*--------------------------------------------------------------

16.0 Media

--------------------------------------------------------------*/

img,
video {
  height: auto;

  /* Make sure images are scaled correctly. */

  max-width: 100%;

  /* Adhere to container width. */
}

embed,
iframe,
object {
  margin-bottom: 1.5em;

  max-width: 100%;
}

p>embed:only-child,
p>iframe:only-child,
p>object:only-child {
  margin-bottom: 0;
}

/* Playlist Style Overrides */

/* SVG Icons base styles */

.icon {
  display: inline-block;

  fill: currentColor;

  height: 1em;

  position: relative;

  top: -0.0625em;

  vertical-align: middle;

  width: 1em;
}

/*--------------------------------------------------------------

16.1 Galleries

--------------------------------------------------------------*/

/*--------------------------------------------------------------

19.0 Media Queries

--------------------------------------------------------------*/

@media screen and (min-width: 576px) {

  body,
  button,
  input,
  select,
  textarea {
    font-size: 1rem;
  }

  h2 {
    font-size: 36px;
  }

  h3 {
    font-size: 30px;
  }

  h4 {
    font-size: 24px;
  }

  h5 {
    font-size: 20px;
  }

  h6 {
    font-size: 18px;
  }

  p {
    font-size: 1rem;

    margin: 0 0 1em;

    color: #3f485d;
  }
}

@media screen and (min-width: 768px) {
  .wrap {
    max-width: 1000px;

    padding-left: 3em;

    padding-right: 3em;
  }

  .navigation.pagination {
    clear: both;

    float: right;

    width: 58%;
  }
}

/*---------------------------- New Navigation -----------------------------------*/

.navbar {
  display: flex;

  align-items: center;

  justify-content: space-between;

  padding: 10px 30px;

  /* background-color: rgba(255, 255, 255, 0.1);

      backdrop-filter: blur(12px);

      -webkit-backdrop-filter: blur(12px);

      border-bottom: 1px solid rgba(255, 255, 255, 0.2); */

  background-color: #fff;

  flex-wrap: wrap;

  position: fixed;

  top: 0;

  left: 0;

  right: 0;

  z-index: 1000;
}

.navbar-left {
  display: flex;

  align-items: center;

  gap: 30px;

  flex-wrap: wrap;
}

@media (max-width: 768px) {
  .navbar-left img {
    width: auto;

    height: 50px;
  }
}

.logo {
  height: 90px;
}

.event-info {
  color: black;

  border-radius: 30px;

  padding: 12px 30px;

  font-size: 20px;

  display: flex;

  flex-direction: column;

  justify-content: center;

  gap: 10px;

  white-space: nowrap;

  margin-top: 10px;

  font-weight: 800;
}

.event-info sup {
  font-style: italic;

  font-weight: 500;
}

.nav-links {
  display: flex;

  align-items: center;

  justify-content: center;

  gap: 25px;

  font-weight: 600;

  color: black;

  font-size: 16px;

  margin-left: auto;

  flex-wrap: wrap;
}

.nav-links span {
  cursor: pointer;

  transition: color 0.2s ease-in-out;
}

.nav-links span:hover {
  color: #065500;
}

.register-button {
  background-color: #066022;

  color: white;

  border: none;

  padding: 12px 28px;

  border-radius: 30px;

  font-weight: bold;

  cursor: pointer;

  font-size: 14px;

  margin-left: 20px;

  transition: background-color 0.2s ease-in-out;
}

.register-button:hover {
  background-color: #0a4f00;
}

/* Media Queries */

@media (max-width: 1700px) {
  .event-info {
    margin-top: 0;

    gap: 10px;
  }
}

@media (max-width: 1200px) {
  .nav-links {
    gap: 20px;

    font-size: 13px;
  }

  .event-info {
    font-size: 18px;

    padding: 10px 25px;
  }

  .logo {
    height: 80px;
  }
}

@media (max-width: 1000px) {
  .navbar {
    /* flex-direction: column; */

    align-items: center;

    gap: 0;

    padding: 10px 20px;
  }

  .nav-links {
    display: none;
  }

  .register-button {
    margin-left: 0;

    margin-top: 10px;

    align-self: center;
  }
}

@media (max-width: 768px) {
  .logo {
    height: 70px;
  }

  .event-info {
    width: 100%;

    font-size: 16px;

    padding: 8px 20px;

    margin-bottom: 0;

    margin-top: 0;

    gap: 0px;
  }

  .register-button {
    width: 150px;

    height: 40px;

    border-radius: 40px;

    padding: 10px 24px;

    font-size: 13px;
  }
}

@media (max-width: 576px) {
  .navbar {
    line-height: 1;

    padding: 10px 15px;
  }

  .logo {
    height: 60px;
  }

  .event-info {
    width: 100%;

    font-size: 14px;

    padding: 6px 15px;

    margin-bottom: 5px;

    white-space: normal;

    text-align: center;

    gap: 10px;

    margin-top: 0;
  }

  .nav-links {
    display: none;
  }

  .register-button {
    padding: 8px;

    border-radius: 20px;

    margin-top: 0;
  }
}

/* New CSS  */

.mySwiper.swiper {
  padding-bottom: 50px;

  padding-top: 20px;
}



.mySwiper .swiper-slide:hover {
  transform: translateY(-5px);
}

.mySwiper .con-schedule-thumb {
  height: 380px;

  overflow: hidden;
}

.mySwiper .con-schedule-thumb img {
  height: 100%;

  width: 100%;

  object-fit: cover;

  display: block;
}

.mySwiper .con-schedule-content {
  padding: 10px;
}

.mySwiper .con-schedule-content h4 {
  font-size: 1.25rem;

  font-weight: 700;

  margin-bottom: 5px;

  color: #0a1446;
}

.mySwiper .con-schedule-content p {
  font-size: 0.95rem;

  color: #555;

  margin-bottom: 5px;

  text-align: justify;
}

.mySwiper .con-schedule-content ul {
  list-style: none;

  padding: 0;

  font-size: 0.9rem;

  color: #333;
}

/* .mySwiper .con-schedule-content ul li {

  margin-bottom: 3px;



} */

.mySwiper .con-info-title {
  font-weight: 600;

  display: inline-block;

  min-width: 90px;
}

/* .project-highlights ul {

  list-style-type: disc !important;

  padding-left: 20px;

  margin: 0;

}



.project-highlights li {

  margin-left: 40px !important;

  margin-bottom: 2px !important;

} */

@media screen and (max-width: 1700px) {
  .mySwiper .con-schedule-thumb {
    height: 280px;
  }

  .mySwiper .swiper-slide {
    height: 100vh;
  }
}

@media screen and (max-width: 1200px) {
  .mySwiper .swiper-slide {
    height: 80vh;
  }
}

@media screen and (max-width: 1024px) {
  .mySwiper .swiper-slide {
    height: 75vh;
  }
}

@media screen and (max-width: 480px) {
  .mySwiper .swiper-slide {
    height: 110vh;
  }
}

@media screen and (max-width: 360px) {
  .mySwiper .swiper-slide {
    height: 120vh;
  }
}

@media screen and (max-width: 320px) {
  .mySwiper .swiper-slide {
    height: 170vh;
  }
}

/* ------------------------ Attend section ------------------------ */

.infographic-section {
  padding: 60px 0;

  background: #ffffff;
}

.infographic-section .container {
  width: 100%;

  max-width: 1500px;

  margin: 0 auto;

  padding: 0 20px;

  position: relative;
}

/* Desktop Video Styles */

.desktop-video-wrapper {
  display: block;
}

.desktop-video {
  width: 100%;

  height: auto;

  border-radius: 8px;

  opacity: 1;

  transform: translateY(20px);

  transition:
    opacity 0.6s ease-out,
    transform 0.6s ease-out;

  padding-left: 10px;
}

.desktop-video:hover {
  transform: translateY(-15px);

  transition:
    0.3s ease-in-out,
    transform 0.3s ease-in-out;
}

/* Mobile Image Styles */

.mobile-image {
  display: none;
}

.mobile-image img {
  width: 100%;

  height: auto;

  border-radius: 8px;
}

/* Responsive Behavior */

@media screen and (max-width: 768px) {
  .infographic-section {
    margin: 0;
  }

  .desktop-video-wrapper {
    display: none;
  }

  .mobile-image {
    display: block;
  }

  .mobile-image img {
    transform: scale(1.06);
  }

  .mobile-image img:hover {
    transform: scale(1.068);
  }
}

/* ======================================================== Common CSS for all Conference ==================================================== */

/* youtube video after about */

.youtube-video-container {
  border-radius: 20px;

  padding: 20px;

  position: relative;

  overflow: hidden;

  transition: transform 0.3s ease;
}

.youtube-video-container:hover {
  transform: translateY(-5px);
}

.video-wrapper-youtube {
  position: relative;

  padding-bottom: 40%;

  /* 16:9 aspect ratio */

  height: 0;

  overflow: hidden;

  border-radius: 12px;

  /* box-shadow: 0 10px 30px rgba(155, 250, 255, 0.3); */
}

.video-wrapper-youtube1 {
  position: relative;

  padding-bottom: 55%;

  /* 16:9 aspect ratio */

  height: 0;

  overflow: hidden;

  border-radius: 12px;

  /* box-shadow: 0 10px 30px rgba(155, 250, 255, 0.3); */
}

.youtube-video-container1 {
  background: rgba(255, 255, 255, 0.8);

  backdrop-filter: blur(10px);

  border-radius: 20px;

  padding: 20px;

  box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;

  position: relative;

  overflow: hidden;

  transition: transform 0.3s ease;
}

.video-wrapper-youtube iframe {
  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  border: none;

  border-radius: 12px;
}

.video-overlay2 {
  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  background: linear-gradient(45deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5));

  display: flex;

  justify-content: center;

  align-items: center;

  cursor: pointer;

  transition: opacity 0.3s ease;
}

.play-btn {
  background: #066022;

  color: white;

  width: 80px;

  height: 80px;

  border-radius: 50%;

  display: flex;

  justify-content: center;

  align-items: center;

  font-size: 32px;

  box-shadow: 0 0 20px rgba(36, 144, 81, 0.7);

  animation: pulse 1.5s infinite;
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(36, 144, 81, 0.7);
  }

  70% {
    box-shadow: 0 0 0 25px rgba(36, 144, 81, 0);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(36, 144, 81, 0);
  }
}

/* /////////////////////////////////////////////////////New Hero Section///////////////////////////////////////////////////////////////////// */

/* Layout shell */

.hero-premium {
  position: relative;

  min-height: 100vh;

  display: grid;

  place-items: center;

  color: #ffffff;

  overflow: hidden;

  isolation: isolate;
}

/* Background video */

.video-container {
  position: absolute;

  inset: 0;

  z-index: -2;
}

.bg-video {
  position: absolute;

  inset: 0;

  width: 100%;

  height: 100%;

  object-fit: cover;

  filter: saturate(1.1) contrast(1.05);
}

/* Darker, multi-layer overlay for readability */

.video-overlay {
  position: absolute;

  inset: 0;

  background:
    radial-gradient(1200px 600px at 70% 20%,
      rgba(120, 214, 255, 0.18),
      transparent 50%),
    radial-gradient(1000px 500px at 20% 80%,
      rgba(187, 140, 255, 0.16),
      transparent 55%),
    linear-gradient(to bottom, rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0.88));

  backdrop-filter: saturate(1.05) blur(0.5px);

  z-index: -1;
}

/* Subtle vignette edges */

.vignette {
  position: absolute;

  inset: -2%;

  box-shadow:
    inset 0 0 220px rgba(0, 0, 0, 0.6),
    inset 0 0 460px rgba(0, 0, 0, 0.28);

  pointer-events: none;

  z-index: -1;
}

/* Animated gradient beams (premium ambient motion) */

.beam {
  position: absolute;

  filter: blur(14px);

  opacity: 0.28;

  mix-blend-mode: screen;

  pointer-events: none;
}

.beam-1 {
  top: -10%;

  left: -10%;

  width: 60vw;

  height: 60vh;

  background: conic-gradient(from 120deg,
      rgba(140, 200, 255, 0.35),
      rgba(187, 140, 255, 0.3),
      rgba(140, 200, 255, 0.35));

  transform: rotate(8deg);

  animation: beamDrift1 18s linear infinite;
}

.beam-2 {
  bottom: -15%;

  right: -15%;

  width: 55vw;

  height: 55vh;

  background: conic-gradient(from -40deg,
      rgba(255, 255, 255, 0.15),
      rgba(120, 214, 255, 0.25),
      rgba(255, 255, 255, 0.15));

  transform: rotate(-6deg);

  animation: beamDrift2 22s linear infinite;
}

@keyframes beamDrift1 {
  0% {
    transform: rotate(8deg) translate3d(0, 0, 0);
  }

  50% {
    transform: rotate(14deg) translate3d(2%, -1%, 0);
  }

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

@keyframes beamDrift2 {
  0% {
    transform: rotate(-6deg) translate3d(0, 0, 0);
  }

  50% {
    transform: rotate(-10deg) translate3d(-2%, 1%, 0);
  }

  100% {
    transform: rotate(-6deg) translate3d(0, 0, 0);
  }
}

/* Corner glow accents */

.corner-glow {
  position: absolute;

  width: 36vmin;

  height: 36vmin;

  background: radial-gradient(circle at center,
      rgba(160, 185, 255, 0.28),
      rgba(160, 185, 255, 0) 60%);

  filter: blur(20px);

  pointer-events: none;
}

.cg-top-left {
  top: -6vmin;
  left: -6vmin;
}

.cg-bottom-right {
  bottom: -6vmin;
  right: -6vmin;
}

/* Content wrapper */

.hero-inner {
  width: 100%;

  max-width: 1100px;

  padding: clamp(48px, 8vh, 90px) clamp(16px, 4vw, 56px);

  text-align: center;

  display: grid;

  gap: clamp(12px, 2vh, 26px);

  align-items: center;

  justify-items: center;
}

/* Logo with luxe shimmer */

.event-logo {
  width: clamp(180px, 35vw, 460px);

  height: auto;

  filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.55)) drop-shadow(0 0 24px rgba(120, 214, 255, 0.15));

  opacity: 0.96;

  position: relative;

  display: block;
}

.glow-logo {
  overflow: hidden;
}

.glow-logo::after {
  content: "";

  position: absolute;

  inset: 0;

  background: linear-gradient(115deg,
      rgba(255, 255, 255, 0) 40%,
      rgba(255, 255, 255, 0.55) 50%,
      rgba(255, 255, 255, 0) 60%);

  transform: translateX(-120%);

  animation: logoShimmer 5.5s ease-in-out infinite 1.5s;

  pointer-events: none;

  mix-blend-mode: screen;
}

@keyframes logoShimmer {
  0% {
    transform: translateX(-120%);
  }

  55% {
    transform: translateX(120%);
  }

  100% {
    transform: translateX(120%);
  }
}

/* Heading with refined glow */

.event-title {
  font-size: clamp(28px, 5vw, 54px);

  line-height: 0.6;

  font-weight: 700;

  letter-spacing: 0.4px;

  text-wrap: balance;
}

.event-title.glow {
  text-shadow:
    0 0 2px rgba(255, 255, 255, 0.95),
    0 0 10px rgba(230, 240, 255, 0.8),
    0 0 26px rgba(168, 190, 255, 0.55),
    0 10px 28px rgba(0, 0, 0, 0.65);

  animation: glowPulseRefined 5s ease-in-out infinite;
}

@keyframes glowPulseRefined {

  0%,
  100% {
    text-shadow:
      0 0 2px rgba(255, 255, 255, 0.95),
      0 0 10px rgba(230, 240, 255, 0.8),
      0 0 26px rgba(168, 190, 255, 0.55),
      0 12px 30px rgba(0, 0, 0, 0.72);
  }

  50% {
    text-shadow:
      0 0 3px rgba(255, 255, 255, 1),
      0 0 14px rgba(235, 245, 255, 0.95),
      0 0 38px rgba(150, 175, 255, 0.75),
      0 14px 34px rgba(0, 0, 0, 0.78);
  }
}

/* Subheading with updated color + soft glow */

.event-subtitle {
  font-size: clamp(14px, 2.2vw, 25px);

  max-width: 900px;

  line-height: 1.45;

  font-weight: 400;

  color: #cfe1ff;

  text-wrap: balance;
}

.glow-soft {
  text-shadow:
    0 0 4px rgba(210, 225, 255, 0.55),
    0 0 14px rgba(160, 185, 255, 0.35),
    0 1px 0 rgba(0, 0, 0, 0.4);
}

/* Luxe underline accent on subtitle (responsive) */

.event-subtitle::after {
  content: "";

  display: block;

  width: clamp(80px, 14vw, 160px);

  height: 2px;

  margin: 10px auto 0;

  background: linear-gradient(90deg,
      rgba(150, 175, 255, 0),
      rgba(150, 175, 255, 0.85),
      rgba(150, 175, 255, 0));

  filter: drop-shadow(0 0 6px rgba(150, 175, 255, 0.6));

  opacity: 0.9;
}

/* Meta pill */

.event-meta {
  display: inline-flex;

  align-items: center;

  gap: 14px;

  padding: 10px 24px;

  border-radius: 999px;

  background: linear-gradient(to right,
      rgba(255, 255, 255, 0.1),
      rgba(255, 255, 255, 0.05));

  border: 1px solid rgba(255, 255, 255, 0.22);

  box-shadow:
    0 10px 30px rgba(0, 0, 0, 0.45),
    inset 0 0 24px rgba(255, 255, 255, 0.07);

  backdrop-filter: blur(8px);

  -webkit-backdrop-filter: blur(8px);
}

.meta-item {
  display: inline-flex;

  gap: 10px;

  align-items: center;

  font-size: clamp(12px, 1.8vw, 19px);

  white-space: nowrap;

  color: rgba(255, 255, 255, 0.95);

  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);

  letter-spacing: 1.1px;
}

.meta-divider {
  opacity: 0.55;

  user-select: none;
}

.meta-ic {
  width: 18px;

  height: 18px;

  flex: 0 0 18px;

  fill: currentColor;

  opacity: 0.9;

  filter: drop-shadow(0 0 4px rgba(120, 214, 255, 0.25));
}

/* Scroll cue */

.scroll-cue {
  position: absolute;

  bottom: 18px;

  left: 50%;

  transform: translateX(-50%);

  display: grid;

  place-items: center;

  gap: 6px;

  color: rgba(255, 255, 255, 0.75);

  font-size: 12px;

  letter-spacing: 1.4px;

  text-transform: uppercase;

  pointer-events: none;
}

.scroll-dot {
  width: 6px;

  height: 18px;

  border-radius: 999px;

  background: linear-gradient(180deg,
      rgba(255, 255, 255, 0.8),
      rgba(255, 255, 255, 0.1));

  animation: scrollPulse 1.6s ease-in-out infinite;

  box-shadow:
    0 0 10px rgba(255, 255, 255, 0.6),
    0 0 24px rgba(150, 175, 255, 0.45);
}

.scroll-text {
  opacity: 0.8;
}

@keyframes scrollPulse {

  0%,
  100% {
    transform: translateY(0);
    opacity: 0.85;
  }

  50% {
    transform: translateY(6px);
    opacity: 0.55;
  }
}

/* Responsive tweaks */

@media (max-width: 640px) {
  .event-logo {
    width: clamp(110px, 28vw, 150px);
  }

  .event-meta {
    gap: 10px;
    padding: 8px 10px;
  }

  .meta-item .meta-ic {
    width: 16px;
    height: 16px;
  }

  .cta-group {
    gap: 10px;
  }
}

@media (max-width: 425px) {
  .event-logo {
    width: 300px;
  }

  .event-meta {
    display: unset;
  }
}

/* Motion preferences */

@media (prefers-reduced-motion: reduce) {
  .event-title.glow {
    animation: none;
  }

  .beam-1,
  .beam-2 {
    animation: none;
  }

  .glow-logo::after {
    animation: none;
  }

  .scroll-dot {
    animation: none;
  }
}

/* CTA group layout */

.gsc-cta {
  display: flex;

  gap: 14px;

  margin-top: 8px;

  flex-wrap: wrap;

  justify-content: center;
}

/* Base button */

.gsc-btn {
  position: relative;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  padding: 14px 24px;

  min-height: 48px;

  border-radius: 999px;

  text-decoration: none;

  font-weight: 600;

  font-size: 16px;

  line-height: 1;

  letter-spacing: 0.2px;

  white-space: nowrap;

  cursor: pointer;

  user-select: none;

  border: 1px solid transparent;

  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    background 0.2s ease,
    color 0.2s ease,
    opacity 0.2s ease;

  will-change: transform, box-shadow;

  border: none;

  outline: none;
}

/* Primary (gradient, luminous) */

.gsc-btn--primary {
  color: #fff;

  background: linear-gradient(135deg, #13a742 0%, #066022 50%, #034718 100%);

  box-shadow:
    0 10px 30px rgba(0, 0, 0, 0.35),
    0 0 24px #066022;
}

.gsc-btn--primary:hover {
  transform: translateY(-2px);

  box-shadow:
    0 16px 40px rgba(0, 0, 0, 0.45),
    0 0 36px #066022;
}

.gsc-btn--primary:active {
  transform: translateY(0) scale(0.99);

  filter: brightness(0.98);
}

.gsc-btn--primary:focus-visible {
  outline: none;

  box-shadow:
    0 0 0 3px rgba(255, 255, 255, 0.6),
    0 0 0 6px rgba(92, 148, 255, 0.4),
    0 16px 40px rgba(0, 0, 0, 0.45);
}

/* Subtle sheen on primary */

.gsc-btn--primary::after {
  content: "";

  position: absolute;
  inset: 0;

  border-radius: 999px;

  background: linear-gradient(to bottom,
      rgba(255, 255, 255, 0.18),
      rgba(255, 255, 255, 0.04));

  pointer-events: none;

  mix-blend-mode: screen;
}

/* Ghost (glass / on-video) */

.gsc-btn--ghost {
  color: #ffffff;

  background: rgba(255, 255, 255, 0.07);

  border: 1px solid rgba(255, 255, 255, 0.22);

  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);

  backdrop-filter: blur(6px);

  -webkit-backdrop-filter: blur(6px);
}

.gsc-btn--ghost:hover {
  transform: translateY(-2px);

  background: rgba(255, 255, 255, 0.12);

  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
}

.gsc-btn--ghost:active {
  transform: translateY(0) scale(0.99);
}

.gsc-btn--ghost:focus-visible {
  outline: none;

  box-shadow:
    0 0 0 3px rgba(255, 255, 255, 0.55),
    0 0 0 6px rgba(150, 175, 255, 0.35),
    0 16px 40px rgba(0, 0, 0, 0.45);
}

/* Disabled state (optional) */

.gsc-btn[disabled],
.gsc-btn.is-disabled {
  opacity: 0.6;

  pointer-events: none;
}

/* Mobile tweaks */

@media (max-width: 640px) {
  .gsc-btn {
    padding: 12px 18px;
    font-size: 15px;
    min-height: 44px;
  }

  .gsc-cta {
    gap: 10px;
  }
}

.particle-canvas {
  position: absolute;

  inset: 0;

  z-index: -1;

  mix-blend-mode: screen;

  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .particle-canvas {
    display: none;
  }
}

/* === Flat Modern Speaker Banner (No Slide Animation) === */

.speaker-ribbon {
  position: absolute;

  bottom: -1px;

  left: 0;

  width: 100%;

  padding: 14px 26px;

  /* GREEN GRADIENT */

  background: linear-gradient(90deg, #066022 0%, #28a745 100%);

  color: #ffffff;

  font-size: 14px;

  font-weight: 500;

  border-radius: 0;

  line-height: 1.35;

  letter-spacing: 0.25px;

  /* 🔥 Removed slide animation */

  transform: none;

  opacity: 0;

  transition: opacity 0.35s ease;

  /* GREEN glow */

  box-shadow:
    0 -6px 20px rgba(6, 96, 34, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.35);

  overflow: hidden;

  z-index: 0;
}

/* Light sheen sweep */

.speaker-ribbon::after {
  content: "";

  position: absolute;

  inset: 0;

  background: linear-gradient(100deg,
      rgba(255, 255, 255, 0) 0%,

      rgba(255, 255, 255, 0.35) 45%,

      rgba(255, 255, 255, 0) 70%);

  transform: translateX(-100%);

  transition: transform 1s ease;

  opacity: 0.35;

  pointer-events: none;
}

/* Text */

.speaker-ribbon p {
  font-family: "Poppins", sans-serif;

  color: white;

  font-size: 0.8rem;

  margin: 0;

  position: relative;

  z-index: 2;
}

/* Hover animation */

.speaker-card-ribbon:hover .speaker-ribbon {
  opacity: 1;
  /* only fade in */
}

.speaker-card-ribbon:hover .speaker-ribbon::after {
  transform: translateX(100%);
  /* sheen still moves */
}

/* Keep speaker details above ribbon */

.speaker-card-ribbon .speaker-body {
  position: relative;

  z-index: 2;
}

/* Optional image motion */

.speaker-card-ribbon:hover .speaker-media img {
  transform: scale(1.03);

  transition: transform 0.8s ease;
}

/* === Speaker Company Logo Section === */

.company-logo-wrapper {
  background: #072f00;

  height: 30px;
  /* keeps all logos aligned */

  display: flex;

  align-items: flex-end;

  justify-content: center;

  padding: 55px 20px 10px 20px;
  /* adjust left/right padding to control logo area width */
}

.company-logo {
  max-height: 45px;

  width: auto;

  border-radius: 25px;

  opacity: 0.9;

  transition:
    opacity 0.3s ease,
    transform 0.25s ease;
}

.company-logo:hover {
  opacity: 1;

  transform: scale(1.05);
}

/* hide wrapper if empty (for speakers w/out logo) */

.company-logo-wrapper:empty {
  display: none;
}

.speaker-card {
  display: flex;

  flex-direction: column;

  height: 100%;
}

.speaker-photo {
  flex-shrink: 0;
}

.speaker-text {
  flex-grow: 1;
  /* 🔥 pushes logo block DOWN to align across all cards */

  text-align: center;

  padding: 8px 0;
}

.speaker-logo {
  height: 60px;
  /* 🔥 FIXED HEIGHT = SAME LINE ALWAYS */

  display: flex;

  align-items: center;
  /* center logo vertically */

  justify-content: center;
}

.company-logo {
  max-height: 45px;
  /* adjust size here */

  width: auto;

  object-fit: contain;

  opacity: 0.95;
}

.speaker-logo:empty {
  display: flex;
  /* keep the space! */

  content: "";
}

i[class*="fa"] {
  visibility: hidden;
}

/* .fa-loaded i[class*="fa"] {
  visibility: visible;
} */

/* .preloader {

  pointer-events: none;

  opacity: 1;

}



.preloader.hide {

  opacity: 0;

  transition: opacity .4s ease;

} */

.speaker-card {
  border: 2px solid rgba(5, 31, 0, 0.822) !important;

  background: #fff;

  border-radius: 25px !important;

  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.06);

  overflow: hidden;
}

/* === Speaker cards – white BG + border + hover === */

.speaker-section .card.speaker-card {
  display: flex;

  flex-direction: column;

  height: 100%;

  background: #ffffff;

  border-radius: 18px;

  border: 1px solid rgba(15, 23, 42, 0.08);
  /* subtle border */

  box-shadow: 0 14px 35px rgba(15, 23, 42, 0.1);

  overflow: hidden;

  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease,
    border-color 0.25s ease,
    background-color 0.25s ease;
}

/* Make sure image sits clean on top */

.speaker-section .card.speaker-card .item-thumb2 img {
  display: block;

  width: 100%;
}

/* Body area (name + title) */

.speaker-section .card.speaker-card .card-body {
  flex: 1;

  background: #072f00;

  padding: 16px 18px 1 2px;
}

/* Hover effect */

.speaker-section .card.speaker-card:hover {
  transform: translateY(-4px);

  box-shadow: 0 22px 55px rgba(15, 23, 42, 0.18);

  border-color: #066022;
}

/* --- Speaker Card Body Styling --- */

.speaker-card .card-body {
  background: #fff;

  padding: 18px 20px;

  text-align: center;
}

/* Speaker name */

.speaker-card .card-body .card-title a {
  font-family: "Poppins", sans-serif;

  font-weight: 600;

  font-size: 1.05rem;

  color: #ffffff !important;
  /* Dark premium blue */

  letter-spacing: 0.3px;

  line-height: 1.35;

  transition: color 0.25s ease;
}

/* Speaker subtitle */

.speaker-card .card-body .card-text {
  font-family: "Roboto", sans-serif;

  font-size: 0.85rem;

  line-height: 1.45;

  margin-top: 6px;

  color: #e1e1e1 !important;
  /* soft grey */
}

/* =====================================================

   UNIVERSAL WHY CONFERENCE FLOATING CARD

   - Two-column message box layout

   - Fully responsive for all screen sizes

   - Copy-paste ready for any project

===================================================== */

.why-conference-float {
  position: fixed;

  bottom: 30px;

  right: 30px;

  z-index: 9999;

  font-family:
    "DM Sans",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
}

/* Trigger Button - Message Box Style with 2 Columns */

.why-conference-trigger {
  position: relative;

  display: grid;

  grid-template-columns: 1fr auto;

  align-items: center;

  gap: 10px;

  background: linear-gradient(135deg, #027d4e, #035a38);

  color: white;

  padding: 12px 18px;

  border-radius: 18px;

  cursor: pointer;

  box-shadow: 0 8px 24px rgba(2, 125, 78, 0.4);

  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

  user-select: none;

  min-width: fit-content;
}

/* Message Box Tail/Pointer */

.why-conference-trigger::after {
  content: "";

  position: absolute;

  bottom: -8px;

  right: 20px;

  width: 0;

  height: 0;

  border-left: 10px solid transparent;

  border-right: 10px solid transparent;

  border-top: 10px solid #035a38;

  transition: border-top-color 0.3s ease;
}

/* Hover state */

.why-conference-float:hover .why-conference-trigger {
  box-shadow: 0 12px 32px rgba(2, 125, 78, 0.5);

  background: linear-gradient(135deg, #035a38, #027d4e);
}

.why-conference-float:hover .why-conference-trigger::after {
  border-top-color: #027d4e;
}

/* Text Column - Stacked */

.why-conference-text {
  display: flex;

  flex-direction: column;

  line-height: 1.2;

  gap: 2px;
}

.line-1 {
  font-size: 16px;

  font-weight: 500;

  letter-spacing: 0px;

  white-space: nowrap;
}

.line-2 {
  font-size: 18px;

  font-weight: 600;

  letter-spacing: 0.2px;

  white-space: nowrap;
}

/* Icon Column */

.why-conference-icon {
  display: flex;

  align-items: center;

  justify-content: center;
}

.why-conference-icon svg {
  width: 40px;

  height: 40px;

  stroke: white;

  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));

  transition: transform 0.3s ease;
}

.why-conference-float:hover .why-conference-icon svg {
  transform: rotate(-10deg) scale(1.1);

  animation: lightbulb-glow 1.5s ease-in-out infinite;
}

@keyframes lightbulb-glow {

  0%,
  100% {
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
  }

  50% {
    filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.8));
  }
}

/* Expanded Card (Hidden by default) */

.why-conference-card {
  position: absolute;

  bottom: 70px;

  right: 0;

  width: 420px;

  max-width: calc(100vw - 40px);

  background: rgba(255, 255, 255, 0.98);

  backdrop-filter: blur(20px);

  border-radius: 20px;

  padding: 28px;

  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);

  border: 1px solid rgba(2, 125, 78, 0.15);

  opacity: 0;

  visibility: hidden;

  transform: translateY(20px) scale(0.95);

  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);

  pointer-events: none;
}

/* Show card on hover */

.why-conference-float:hover .why-conference-card {
  opacity: 1;

  visibility: visible;

  transform: translateY(0) scale(1);

  pointer-events: auto;
}

/* Card Title */

.why-conference-title {
  font-size: 20px;

  font-weight: 700;

  color: #027d4e;

  margin: 0 0 16px 0;

  letter-spacing: -0.3px;
}

/* Card Content */

.why-conference-content {
  font-size: 14px;

  line-height: 1.7;

  color: #333;

  text-align: justify;
}

.why-conference-content p {
  margin: 0 0 14px 0;
}

.why-conference-content p:last-child {
  margin-bottom: 0;
}

.why-conference-content strong {
  color: #027d4e;

  font-weight: 700;
}

/* =====================================================

   TABLET RESPONSIVE (768px - 1024px)

===================================================== */

@media (max-width: 1024px) {
  .why-conference-float {
    bottom: 25px;

    right: 25px;
  }

  .why-conference-card {
    width: 380px;

    padding: 26px;
  }
}

/* =====================================================

   MOBILE LANDSCAPE & LARGE PHONES (768px)

===================================================== */

@media (max-width: 768px) {
  .why-conference-float {
    bottom: 50px;

    right: 20px;
  }

  .why-conference-trigger {
    padding: 11px 16px;

    gap: 8px;

    border-radius: 16px;
  }

  .why-conference-trigger::after {
    bottom: -7px;

    right: 16px;

    border-left: 8px solid transparent;

    border-right: 8px solid transparent;

    border-top: 8px solid #035a38;
  }

  .line-1 {
    font-size: 14px;
  }

  .line-2 {
    font-size: 16px;
  }

  .why-conference-icon svg {
    width: 32px;

    height: 32px;
  }

  .why-conference-card {
    width: calc(100vw - 40px);

    bottom: 65px;

    right: 0;

    padding: 24px;
  }

  .why-conference-title {
    font-size: 18px;

    margin-bottom: 14px;
  }

  .why-conference-content {
    font-size: 13px;

    line-height: 1.65;
  }

  .why-conference-content p {
    margin-bottom: 12px;
  }
}

/* =====================================================

   SMALL PHONES (480px - 576px)

===================================================== */

@media (max-width: 576px) {
  .why-conference-float {
    bottom: 50px;

    right: 15px;
  }

  .why-conference-trigger {
    padding: 10px 14px;

    gap: 7px;
  }

  .line-1 {
    font-size: 13px;
  }

  .line-2 {
    font-size: 15px;
  }

  .why-conference-icon svg {
    width: 28px;

    height: 28px;
  }

  .why-conference-card {
    width: calc(100vw - 30px);

    bottom: 60px;

    padding: 22px;

    border-radius: 18px;
  }

  .why-conference-title {
    font-size: 17px;
  }

  .why-conference-content {
    font-size: 13px;
  }
}

/* =====================================================

   VERY SMALL PHONES (320px - 480px)

===================================================== */

@media (max-width: 480px) {
  .why-conference-float {
    bottom: 50px;

    right: 12px;
  }

  .why-conference-trigger {
    padding: 9px 13px;

    gap: 6px;

    border-radius: 14px;
  }

  .why-conference-trigger::after {
    bottom: -6px;

    right: 14px;

    border-left: 7px solid transparent;

    border-right: 7px solid transparent;

    border-top: 7px solid #035a38;
  }

  .line-1 {
    font-size: 12px;
  }

  .line-2 {
    font-size: 14px;

    font-weight: 600;
  }

  .why-conference-icon svg {
    width: 26px;

    height: 26px;
  }

  .why-conference-card {
    width: calc(100vw - 24px);

    bottom: 55px;

    padding: 20px;

    border-radius: 16px;
  }

  .why-conference-title {
    font-size: 16px;

    margin-bottom: 12px;
  }

  .why-conference-content {
    font-size: 12px;

    line-height: 1.6;
  }

  .why-conference-content p {
    margin-bottom: 10px;
  }
}

/* =====================================================

   EXTRA SMALL PHONES (< 360px)

===================================================== */

@media (max-width: 360px) {
  .why-conference-float {
    bottom: 140px;

    right: 10px;
  }

  .why-conference-trigger {
    padding: 8px 12px;

    gap: 5px;
  }

  .line-1 {
    font-size: 11px;
  }

  .line-2 {
    font-size: 13px;
  }

  .why-conference-icon svg {
    width: 24px;

    height: 24px;
  }

  .why-conference-card {
    width: calc(100vw - 20px);

    padding: 18px;
  }

  .why-conference-title {
    font-size: 15px;
  }

  .why-conference-content {
    font-size: 11px;

    line-height: 1.55;
  }
}

/* =====================================================

   LANDSCAPE MODE FIX

===================================================== */

@media (max-height: 500px) and (orientation: landscape) {
  .why-conference-float {
    bottom: 15px;

    right: 15px;
  }

  .why-conference-trigger {
    padding: 8px 12px;
  }

  .why-conference-card {
    bottom: 50px;

    max-height: calc(100vh - 70px);

    overflow-y: auto;
  }
}

/* =====================================================

   ACCESSIBILITY & INTERACTIONS

===================================================== */

.why-conference-trigger:focus {
  outline: 2px solid #027d4e;

  outline-offset: 2px;
}

/* Prevent text selection on trigger */

.why-conference-trigger * {
  user-select: none;
}

/* Keep card visible when hovering over it */

.why-conference-card:hover {
  pointer-events: auto;

  opacity: 1;

  visibility: visible;
}

/* Touch device optimization */

@media (hover: none) and (pointer: coarse) {
  .why-conference-float:active .why-conference-card {
    opacity: 1;

    visibility: visible;

    transform: translateY(0) scale(1);

    pointer-events: auto;
  }
}

/* Prevent animation on low-end devices */

@media (prefers-reduced-motion: reduce) {

  .why-conference-trigger,
  .why-conference-card,
  .why-conference-icon svg {
    transition: none !important;

    animation: none !important;
  }
}

/* =====================================
   THE DARK GRID SYSTEM
   Namespace: .dark-matrix-*
===================================== */
.dark-matrix-section {
  background-color: #020402;
  /* Deepest Black-Green */
  padding: 0px px;
  color: #ffffff;
  display: flex;
  justify-content: center;
}

.dark-matrix-container {
  max-width: 100%;
  width: 100%;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* =====================================
   ROW 1: THE HERO (Split Layout)
===================================== */
.dm-hero-row {
  display: grid;
  grid-template-columns: 40% 60%;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* Left: Text Area */
.dm-hero-text {
  padding: 60px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-right: 1px solid rgba(255, 255, 255, 0.1);
}

.dm-hero-text h2 {
  font-size: 40px;
  font-weight: 600;
  line-height: 1.1;
  color: #ffffff;
  margin: 0 0 24px 0;
  letter-spacing: -1px;
}

.dm-hero-text p {
  font-size: 16px;
  line-height: 1.6;
  color: #a3a3a3;
  margin: 0;
  padding-left: 20px;
  border-left: 2px solid #4ade80;
  /* Neon Green Accent */
}

/* Right: Image Area (Score) */
.dm-hero-visual {
  position: relative;
  background-image: url("../../assets/images/score.webp");
  background-size: cover;
  background-position: center;
  min-height: 400px;
}

.dm-hero-visual::before {
  content: "";
  position: absolute;
  inset: 0;
  /* Cinematic Darkening */
  background: linear-gradient(90deg,
      #020402 0%,
      rgba(0, 21, 0, 0.4) 50%,
      rgba(0, 14, 0, 0.8) 100%);
}

/* =====================================
   ROW 2: THE MATRIX (Grid)
===================================== */
.dm-matrix-header {
  padding: 40px 60px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.02);
}

.dm-matrix-header h3 {
  font-size: 24px;
  font-weight: 600;
  color: #4ade80;
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.dm-matrix-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  /* 3 Columns */
}

.dm-matrix-item {
  padding: 50px;
  border-right: 1px solid rgba(255, 255, 255, 0.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  transition: background-color 0.3s ease;
}

.dm-matrix-item:hover {
  background-color: rgba(74, 222, 128, 0.05);
  /* Very subtle green tint */
}

/* Remove right border for every 3rd item */
.dm-matrix-item:nth-child(3n) {
  border-right: none;
}

/* Icon */
.dm-icon {
  width: 32px;
  height: 32px;
  color: #4ade80;
  margin-bottom: 20px;
}

.dm-item-title {
  font-size: 18px;
  font-weight: 700;
  color: #ffffff;
  margin: 0 0 12px 0;
}

.dm-item-desc {
  font-size: 14px;
  line-height: 1.6;
  color: #a3a3a3;
  margin: 0;
}

/* =====================================
   ROW 3: THE OUTCOMES (Circuit Image)
===================================== */
.dm-outcomes-row {
  position: relative;
  background-image: url("../../assets/images/circuit3.webp");
  background-size: cover;
  background-position: center;
  padding: 80px 60px;
  display: flex;
  flex-direction: column;
}

.dm-outcomes-row::before {
  content: "";
  position: absolute;
  inset: 0;
  /* Heavy dark overlay for text readability */
  background: linear-gradient(180deg,
      rgba(2, 4, 2, 0.95) 0%,
      rgba(2, 4, 2, 0.9) 100%);
  z-index: 1;
}

.dm-outcomes-content {
  position: relative;
  z-index: 2;
  max-width: 1400px;
}

.dm-outcomes-title {
  font-size: 28px;
  font-weight: 600;
  color: #ffffff;
  margin: 0 0 40px 0;
}

.dm-outcomes-list {
  list-style: none;
  padding: 0;
  margin: 0;

  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 30px;
}


.dm-outcomes-list li {
  font-size: 18px;
  line-height: 1.5;
  color: #e5e5e5;
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.dm-check {
  width: 20px;
  height: 20px;
  color: #4ade80;
  flex-shrink: 0;
  margin-top: 2px;
}

/* =====================================
   RESPONSIVE
===================================== */
@media (max-width: 1024px) {
  .dm-hero-row {
    grid-template-columns: 1fr;
    /* Stack Hero */
  }

  .dm-hero-visual {
    min-height: 300px;
    order: -1;
    /* Image first on mobile? Or keep bottom? Let's keep bottom */
    order: 2;
  }

  .dm-matrix-grid {
    grid-template-columns: 1fr 1fr;
    /* 2 Cols */
  }

  .dm-matrix-item:nth-child(2n) {
    border-right: none;
  }

  .dm-matrix-item:nth-child(3n) {
    border-right: 1px solid rgba(255, 255, 255, 0.1);
  }
}

@media (max-width: 768px) {
  .dm-matrix-grid {
    grid-template-columns: 1fr;
    /* 1 Col */
  }

  .dm-matrix-item {
    border-right: none;
  }

  .dm-outcomes-list {
    grid-template-columns: 1fr;
  }

  .dm-hero-text,
  .dm-matrix-header,
  .dm-outcomes-row {
    padding: 40px 24px;
  }
}

/* ================================
   WHY EXHIBIT / SPONSOR – B2B
   Brand Color: #0a4f00
================================ */

.why-exhibit-b2b {
  background: #ffffff;
  padding-top: 140px;
}

.why-exhibit-b2b-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 0px 120px;
}

/* Two-column layout */
.why-exhibit-b2b-intro {
  display: grid;
  grid-template-columns: 1fr 1.25fr;
  gap: 72px;
  align-items: start;
}

/* Sticky left column */
.why-exhibit-b2b-copy {
  position: sticky;
  top: 120px;
}

.why-exhibit-b2b-title {
  font-size: 42px;
  font-weight: 600;
  line-height: 1.15;
  color: #0a4f00;
  margin-bottom: 24px;
}

.why-exhibit-b2b-lead {
  font-size: 18px;
  line-height: 1.7;
  color: #374151;
}

/* Benefits */
.why-exhibit-b2b-benefits {
  display: flex;
  flex-direction: column;
}

.benefit-row {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 22px;
  padding: 32px 0;
  border-bottom: 1px solid #e5e7eb;
}

.benefit-index {
  font-size: 18px;
  font-weight: 600;
  color: rgba(0, 0, 0, 0.688);
}

.benefit-row h3 {
  font-size: 18px;
  font-weight: 600;
  color: hsl(0, 0%, 8%);
  margin-bottom: 6px;
}

.benefit-row p {
  font-size: 15px;
  line-height: 1.6;
  color: #374151;
}

/* ================================
   REFINED SPONSOR PANEL – B2B
================================ */

.why-exhibit-b2b-panel {
  position: relative;
  padding: 100px 24px;
  background-image: url("../../assets/images/stadiumbg.webp");
  background-size: cover;
  background-position: center;
}

.why-exhibit-b2b-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
      rgba(2, 20, 0, 0.886),
      rgba(0, 0, 0, 0.223));
}

.why-exhibit-b2b-panel-inner {
  position: relative;
  max-width: 1240px;
  margin: 0 auto;
  color: #ffffff;
}

/* Header */
.panel-header {
  max-width: 640px;
  margin-bottom: 56px;
}

.panel-title {
  font-size: 30px;
  font-weight: 600;
  margin-bottom: 10px;
}

.panel-subtitle {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.85);
}

/* Capabilities */
.panel-capabilities {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 28px;
  margin-bottom: 80px;
}

.capability-group {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.capability-group span {
  padding-left: 18px;
  position: relative;
  font-size: 15px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.95);
}

.capability-group span::before {
  content: "—";
  position: absolute;
  left: 0;
  color: rgba(255, 255, 255, 0.6);
}

/* CTA STRIP */
.panel-cta {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 32px;
  align-items: center;
  padding-top: 40px;
  border-top: 1px solid rgba(255, 255, 255, 0.25);
}

.cta-copy strong {
  font-family: "Poppins", sans-serif;
  display: block;
  font-weight: 500;
  font-size: 22px;
  margin-bottom: 6px;
}

.cta-copy span {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.85);
}

.cta-actions {
  display: flex;
  gap: 16px;
}

.cta-primary {
  background: #ffffff;
  color: #0a4f00;
  padding: 16px 26px;
  border-radius: 0px;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
}

.cta-secondary {
  border: 2px solid rgba(255, 255, 255, 0.65);
  color: #ffffff;
  padding: 14px 24px;
  border-radius: 0px;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
}

/* Responsive */
@media (max-width: 900px) {
  .panel-cta {
    grid-template-columns: 1fr;
  }

  .cta-actions {
    flex-wrap: wrap;
  }
}

/* Responsive */
@media (max-width: 900px) {
  .why-exhibit-b2b-intro {
    grid-template-columns: 1fr;
  }

  .why-exhibit-b2b-copy {
    position: relative;
    top: auto;
    margin-bottom: 48px;
  }

  .why-exhibit-b2b-title {
    font-size: 34px;
  }

  .partners-points {
    columns: 1;
  }

  .why-exhibit-b2b-panel {
    padding: 100px 20px;
  }
}
/* ======================================================
   MOBILE FIX: Add Gap on Left/Right
====================================================== */
@media (max-width: 900px) {
  .why-exhibit-b2b-container {
    /* Adds 24px gap on left and right so text doesn't touch screen edges */
    padding-left: 24px;
    padding-right: 24px;
    
    /* Keeps the bottom padding you already had */
    padding-bottom: 80px; 
  }
}
/* ================================
   SPONSOR QUALIFICATION MATRIX
   Enterprise-grade, equal-height
================================ */

.sponsor-qualification {
  margin-bottom: 72px;
}

/* Title */
.qualification-title {
  font-size: 32px;
  font-weight: 600;
  margin-bottom: 40px;
  color: #ffffff;
}

.qualification-subtitle {
  font-family: poppins, sans-serif;
  font-size: 18px;
  font-weight: 500;
  margin-bottom: 20px;
  color: #ffffff;
}

/* Matrix grid */
.qualification-matrix {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  border: 1px solid rgba(255, 255, 255, 0.35);
}

/* Cells */
.qualification-cell {
  min-height: 110px;
  /* 🔒 Forces equal height */
  padding: 24px 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;

  font-size: 16px;
  font-weight: 500;
  line-height: 1.4;
  color: #ffffff;

  border-right: 1px solid rgba(255, 255, 255, 0.35);
  border-bottom: 1px solid rgba(255, 255, 255, 0.35);
}

/* Remove right border on last column */
.qualification-cell:nth-child(5n) {
  border-right: none;
}

/* Remove bottom border on last row */
.qualification-cell:nth-last-child(-n + 5) {
  border-bottom: none;
}

/* Responsive */
@media (max-width: 1200px) {
  .qualification-matrix {
    grid-template-columns: repeat(3, 1fr);
  }

  .qualification-cell:nth-child(5n) {
    border-right: 1px solid rgba(255, 255, 255, 0.35);
  }

  .qualification-cell:nth-child(3n) {
    border-right: none;
  }

  .qualification-cell:nth-last-child(-n + 5) {
    border-bottom: 1px solid rgba(255, 255, 255, 0.35);
  }

  .qualification-cell:nth-last-child(-n + 3) {
    border-bottom: none;
  }
}

@media (max-width: 768px) {
  .qualification-matrix {
    grid-template-columns: repeat(2, 1fr);
  }

  .qualification-cell {
    min-height: 100px;
    font-size: 14px;
  }

  .qualification-cell:nth-child(3n) {
    border-right: 1px solid rgba(255, 255, 255, 0.35);
  }

  .qualification-cell:nth-child(2n) {
    border-right: none;
  }

  .qualification-cell:nth-last-child(-n + 3) {
    border-bottom: 1px solid rgba(255, 255, 255, 0.35);
  }

  .qualification-cell:nth-last-child(-n + 2) {
    border-bottom: none;
  }
}

/* =====================================
   B2B MANIFESTO SECTION
===================================== */
.b2b-manifesto-section {
  background-color: #ffffff;
  color: #111827;
  padding: 100px 24px 100px 24px;
  font-family: "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  display: flex;
  justify-content: center;
  position: relative;
  /* Essential for containing the bg image */
  overflow: hidden;
  /* Ensures image doesn't spill out */
}

/* New: The Background Image Layer */
.b2b-bg-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("../../assets/images/circuit2.webp");
  /* Replace with your image */
  background-size: cover;
  opacity: 0.2;
  /* Subtle opacity for watermark effect */
  background-position: center;
  z-index: 0;
}

/* New: White Overlay to ensure dark text is readable */
.b2b-bg-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.b2b-container {
  max-width: 1400px;
  width: 100%;
  position: relative;
  /* Puts content above the image */
  z-index: 2;
}

/* =====================================
   PART 1: THE CONTEXT BAR (Timeline)
===================================== */
.context-bar {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 40px;
  font-size: 18px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #292929;
  opacity: 0;
  animation: fadeIn 1s ease forwards;
}

.timeline-line {
  height: 1px;
  width: 60px;
  background-color: #4ade80;
}

/* =====================================
   PART 2: THE HEADLINE
===================================== */
.b2b-headline {
  font-size: 46px;
  line-height: 1.1;
  font-weight: 700;
  margin: 0 0 64px 0;
  max-width: 1200px;
  color: #000000;
  opacity: 0;
  transform: translateY(20px);
  animation: slideUp 0.8s ease forwards 0.3s;
}

.text-concrete {
  color: #5f5f5f;
  text-decoration: line-through;
  text-decoration-color: #252525;
  text-decoration-thickness: 5px;
}

.text-digital {
  color: #0a4f00;
  position: relative;
  display: inline-block;
  text-transform: uppercase;
}

/* =====================================
   PART 3: THE CONTENT GRID
===================================== */
.b2b-content-grid {
  padding-top: 0px;
  border-top: 0px solid #e5e7eb;
  /* Divider line */
  opacity: 0;
  transform: translateY(20px);
  animation: slideUp 0.8s ease forwards 0.6s;
}

.b2b-content-grid .lead-col-1 {
  max-width: 1000px;
  font-size: 20px;
  line-height: 1.7;
  color: #424243;
  font-weight: 400;
}

.b2b-content-grid .lead-col-2 {
  margin-top: 10px;
  font-size: 20px;
  line-height: 1.7;
  color: #424243;
  font-weight: 400;
}

/* =====================================
   ANIMATIONS
===================================== */
@keyframes slideUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

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

/* =====================================
   RESPONSIVE
===================================== */
@media (max-width: 900px) {
  .b2b-headline {
    font-size: 36px;
    margin-bottom: 48px;
  }

  .b2b-content-grid {
    gap: 40px;
  }
}

/* =====================================
   WHO’S IN THE ROOM — GLASS DIRECTORY
===================================== */
.who-directory-section {
  position: relative;
  background: linear-gradient(180deg,
      #f9fafb 0%,
      #ffffff 60%);
  padding: 100px 40px 60px;
  color: #111827;
  overflow: hidden;
}

/* BLACK SHADE OVERLAY (TOP → BOTTOM FADE) */
.who-directory-section::before {
  content: "";
  position: absolute;
  inset: 0;

  background: linear-gradient(180deg,
      rgba(0, 0, 0, 0.0) 0%,
      rgba(0, 0, 0, 0) 40%,
      rgba(0, 0, 0, 0.8) 90%,
      rgba(0, 0, 0, 1) 100%);

  z-index: 1;
  pointer-events: none;
}

/* FULL-WIDTH BOTTOM IMAGE */
.who-directory-section::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);

  width: 100vw;
  height: 100%;

  background-image: url("../../assets/images/ground3.webp");
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;

  z-index: 0;
}


/* CONTENT ABOVE IMAGE */
.directory-container {
  position: relative;
  z-index: 2;
  max-width: 1400px;
  margin: 0 auto;
}

/* =====================================
   HEADER
===================================== */
.directory-header {
  max-width: 760px;
  margin: 0 auto 72px auto;
  text-align: center;
}

.dir-title {
  font-size: 48px;
  font-family: poppins, sans-serif;
  font-weight: 600;
  letter-spacing: -1.5px;
  color: #0a4f00;
  margin: 0 0 24px 0;
}

.dir-lead {
  font-size: 17px;
  line-height: 1.7;
  color: #4b5563;
  margin: 0;
}

/* =====================================
   GRID
===================================== */
.directory-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 48px;
}

/* =====================================
   GLASS CARDS (SUBTLE, EXECUTIVE)
===================================== */
.dir-card {
  position: relative;

  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);

  /* border-radius: 12px; */
  padding: 48px;

  border: 1px solid rgba(255, 255, 255, 0.6);

  /* box-shadow:
    0 30px 60px rgba(0, 0, 0, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.6); */

  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

/* Soft glow edge */
.dir-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg,
      rgba(255, 255, 255, 0.6),
      rgba(255, 255, 255, 0.05));
  opacity: 0.35;
  pointer-events: none;
}

/* Hover lift */
.dir-card:hover {
  transform: translateY(-6px);
  /* box-shadow:
    0 40px 80px rgba(0, 0, 0, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.7); */
}

/* =====================================
   LIST HEADERS
===================================== */
.list-header {
  margin-bottom: 32px;
}

.list-title {
  font-size: 20px;
  font-family: poppins, sans-serif;
  font-weight: 600;
  margin: 0;
  color: #111827;
}

/* =====================================
   LIST ITEMS
===================================== */
.directory-items {
  list-style: none;
  padding: 0;
  margin: 0;
}

.dir-item {
  font-size: 15px;
  line-height: 1.6;
  color: #374151;
  padding: 14px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  position: relative;
}

.dir-item:last-child {
  border-bottom: none;
}

.dir-item::before {
  content: "";
  width: 6px;
  height: 6px;
  background: rgba(0, 0, 0, 0.35);
  border-radius: 2px;
  display: inline-block;
  margin-right: 12px;
  transform: translateY(-2px);
}

/* =====================================
   RESPONSIVE
===================================== */
@media (max-width: 1000px) {
  .directory-grid {
    grid-template-columns: 1fr;
  }

  .dir-card {
    padding: 36px;
  }

  .dir-title {
    font-size: 36px;
  }

  .who-directory-section::after {
    height: 200px;
  }
}

/* =====================================
   THE TECH MONOLITH (Dark Pillars)
===================================== */
.b2b-pillars-section {
  background-color: #050505;
  /* Deep Black Background */
  padding: 0px 0px 25px 0px;
  color: #ffffff;
}

.b2b-container {
  max-width: 1400px;
  margin: 0 auto;
}

/* =====================================
   HEADER: DARK CINEMATIC
===================================== */
.b2b-header-wrapper {
  position: relative;
  /* Your image path */
  background-image: url("../../assets/images/pillars3.webp");
  background-size: cover;
  background-position: center;
  min-height: 450px;
  margin-bottom: 64px;
  display: flex;
  align-items: center;
  padding: 0px;
  border-radius: 4px;
  overflow: hidden;
}

/* =====================================
   HORIZONTAL DARK MASK (LEFT → CENTER → RIGHT)
===================================== */
.b2b-header-wrapper::before {
  content: "";
  position: absolute;
  inset: 0;

  background: linear-gradient(90deg,
      #050505 0%,
      rgba(5, 5, 5, 0.9) 30%,
      rgba(5, 5, 5, 0.4) 50%,
      rgba(5, 5, 5, 0.5) 90%,
      #050505 100%);

  z-index: 1;
  pointer-events: none;
}

/* =====================================
   TOP → BOTTOM BLACK FADE
===================================== */
.b2b-header-wrapper::after {
  content: "";
  position: absolute;
  inset: 0;

  background: linear-gradient(180deg,
      rgba(5, 5, 5, 0.85) 0%,
      rgba(5, 5, 5, 0.55) 20%,
      rgba(5, 5, 5, 0.25) 45%,
      rgba(5, 5, 5, 0.15) 70%,
      rgba(5, 5, 5, 0.05) 100%);

  z-index: 2;
  pointer-events: none;
}


.b2b-header-card {
  position: relative;
  z-index: 2;
  max-width: 700px;
  /* Removed white box, text sits directly on dark gradient */
}

.b2b-header-title {
  font-size: 42px;
  font-family: poppins, sans-serif;
  font-weight: 600;
  line-height: 1.1;
  color: #ffffff;
  margin: 0 0 24px 0;
  letter-spacing: -1px;
}

.b2b-header-desc {
  font-size: 18px;
  line-height: 1.6;
  color: #d1d5db;
  /* Light Grey */
  margin: 0;
  border-left: 4px solid #4ade80;
  /* Neon Green Anchor */
  padding-left: 24px;
}

/* =====================================
   THE GRID: DARK CARDS
===================================== */
.b2b-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  /* 4 Columns */
  gap: 24px;
}

/* Dark Card Styling */
.b2b-card {
  background: #0f0f0f;
  /* Slightly lighter than bg */
  padding: 32px;
  border: 1px solid #1f1f1f;
  /* Subtle border */
  border-top: 3px solid #1f1f1f;
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  position: relative;
}

/* Hover: Green Border Glow + Lift */
.b2b-card:hover {
  background: #141414;
  border-top-color: #4ade80;
  /* Neon Green Top */
  /* border-color: #2a2a2a; */
  transform: translateY(-5px);
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.8);
}

/* Icon Styling */
.b2b-icon {
  width: 32px;
  height: 32px;
  color: #525252;
  /* Dim grey by default */
  margin-bottom: 24px;
  stroke-width: 1.5;
  transition: color 0.3s ease;
}

/* Icon lights up on hover */
.b2b-card:hover .b2b-icon {
  color: #4ade80;
  /* Neon Green */
  filter: drop-shadow(0 0 5px rgba(74, 222, 128, 0.5));
}

.b2b-card-title {
  font-size: 18px;
  font-weight: 600;
  font-family: poppins, sans-serif;
  color: #ffffff;
  margin: 0 0 12px 0;
}

.b2b-card-desc {
  font-size: 14px;
  line-height: 1.6;
  color: #a3a3a3;
  /* Muted grey text */
  margin: 0;
}

/* =====================================
   RESPONSIVE
===================================== */
@media (max-width: 1100px) {
  .b2b-grid {
    grid-template-columns: repeat(2, 1fr);
    /* 2 Cols on Tablet */
  }
}

@media (max-width: 768px) {
  .b2b-header-wrapper {
    padding: 40px 24px;
    align-items: flex-end;
    /* Text to bottom */
  }

  .b2b-header-wrapper::before {
    /* Change gradient direction for mobile */
    background: linear-gradient(0deg, #050505 20%, rgba(5, 5, 5, 0.6) 100%);
  }

  .b2b-header-title {
    font-size: 32px;
  }

  .b2b-grid {
    grid-template-columns: 1fr;
    /* 1 Col on Mobile */
  }
}

/* =====================================
   THE EXECUTIVE ITINERARY SECTION
===================================== */
.agenda-itinerary-section {
  background-color: #ffffff;
  padding: 80px 24px;
  color: #1f2937;
}

.agenda-itinerary-container {
  max-width: 1400px;
  margin: 0 auto;
}

/* =====================================
   HEADER
===================================== */
.itinerary-header {
  margin-bottom: 48px;
  border-bottom: 2px solid #0a4f00;
  padding-bottom: 24px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 20px;
}

.itinerary-title {
  font-size: 36px;
  font-weight: 600;
  color: #111827;
  margin: 0;
  max-width: 900px;
  line-height: 1.1;
}

.itinerary-meta {
  font-size: 14px;
  font-weight: 600;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* =====================================
   THE MASTER GRID (IMAGE ADDED HERE)
===================================== */
.itinerary-grid {
  position: relative;
  display: flex;
  flex-direction: column;
  border-top: 1px solid #e5e7eb;

  /* Background image */
  background-image: url("../../assets/images/circuit2.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Dark overlay for readability */
.itinerary-grid::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
      rgba(255, 255, 255, 0.125) 0%,
      rgba(255, 255, 255, 0.973) 100%);
  z-index: 0;
}

/* Ensure rows stay above the image */
.itinerary-row {
  position: relative;
  z-index: 1;
}

/* =====================================
   THE ROW
===================================== */
.itinerary-row {
  position: relative;
  display: grid;
  grid-template-columns: 180px 1fr 60px;

  /* REMOVE flat border */
  border-bottom: none;

  transition: background-color 0.2s ease;
  cursor: default;
}

/* GRADIENT BOTTOM DIVIDER */
.itinerary-row::after {
  content: "";
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 0;
  height: 1px;

  background: linear-gradient(90deg,
      transparent 0%,
      rgba(17, 24, 39, 0.15) 20%,
      rgba(17, 24, 39, 0.162) 50%,
      rgba(17, 24, 39, 0.049) 80%,
      transparent 100%);

  pointer-events: none;
}


/* .itinerary-row:hover {
  background-color: #f9fafb;
} */

/* COLUMN 1 */
.row-type {
  padding: 32px 24px 32px 0;
  border-right: 1px solid #f3f4f6;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.type-badge {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #0a4f00;
  background: #f0fdf4;
  padding: 6px 10px;
  border-radius: 4px;
  width: fit-content;
}

.itinerary-row.keynote .type-badge {
  background: #1f2937;
  color: #4ade80;
}

.itinerary-row.workshop .type-badge {
  background: #2e7d32;
  color: #ffffff;
}

/* COLUMN 2 */
.row-content {
  padding: 32px 32px;
}

.row-title {
  font-size: 20px;
  font-weight: 600;
  font-family: poppins, sans-serif;
  color: #111827;
  margin: 0 0 8px 0;
  display: flex;
  align-items: center;
}

.row-desc {
  font-size: 15px;
  line-height: 1.6;
  color: #4b5563;
  margin: 0;
  max-width: 750px;
}

/* COLUMN 3 */
.row-status {
  display: flex;
  align-items: center;
  justify-content: center;
  color: transparent;
}

.itinerary-row:hover .row-status {
  color: transparent;
}

/* =====================================
   FOOTER
===================================== */
.itinerary-footer {
  margin-top: 40px;
  background: #0a460029;
  padding: 24px;
  /* border-radius: 8px; */
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  border: 1px solid #e5e7eb;
}

.footer-icon {
  width: 24px;
  height: 24px;
  color: #6b7280;
  margin-bottom: 12px;
}

.footer-text {
  font-size: 16px;
  font-weight: 600;
  color: #4b5563;
  margin: 0;
}

.footer-sub {
  font-size: 13px;
  color: #4d4d4d;
  margin-top: 4px;
}

/* =====================================
   RESPONSIVE
===================================== */
@media (max-width: 800px) {
  .itinerary-row {
    grid-template-columns: 1fr;
    padding: 24px 0;
  }

  .row-type {
    padding: 0 0 16px 0;
    border-right: none;
    flex-direction: row;
    align-items: center;
  }

  .row-content {
    padding: 0;
  }

  .row-status {
    display: none;
  }

  .itinerary-header {
    flex-direction: column;
    align-items: flex-start;
  }
}


/* =====================================
   NEXT STEPS - THE CORPORATE LEDGER
===================================== */
.ns-corp-section {
  background-color: #ffffff;
  /* LIGHT BACKGROUND KEPT */
  padding: 50px 24px;
  color: #1f2937;
  display: flex;
  justify-content: center;
}

.ns-corp-container {
  max-width: 1400px;
  width: 100%;
}

/* =====================================
   HEADER
===================================== */
.ns-corp-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 55px;
  max-width: 100%;
}

.ns-header-text {
  max-width: 680px;
  text-align: center;
}

.ns-header-img {
  width: 240px;
  height: 320px;
  background-size: cover;
  background-position: center;
  flex-shrink: 0;
}

.img-left {
  background-image: url("../../assets/images/lightleft.webp");
}

.img-right {
  background-image: url("../../assets/images/lightright.webp");
}

.ns-corp-title {
  font-size: 42px;
  font-weight: 600;
  font-family: poppins, sans-serif;
  color: #111827;
  margin: 0 0 20px 0;
  letter-spacing: -1px;
}

.ns-corp-copy {
  font-size: 18px;
  line-height: 1.6;
  color: #4b5563;
  margin: 0;
}

/* =====================================
   LEDGER WRAPPER (DARK CARDS ONLY)
===================================== */
.ns-ledger-wrapper {
  background: transparent;
  /* wrapper stays neutral */
  border: none;
  border-radius: 0px;
  overflow: hidden;
  display: flex;
  position: relative;
  gap: 0;
}

/* Top Accent Bar */
.ns-ledger-wrapper::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: #4ade80;
}

/* =====================================
   LEDGER COLUMNS (DARKENED)
===================================== */
.ns-ledger-col {
  flex: 1;
  padding: 60px;
  display: flex;
  flex-direction: column;

  background: linear-gradient(180deg,
      #111111 0%,
      #111111 100%);

  border-right: 1px solid rgba(255, 255, 255, 0.08);
}

.ns-ledger-col:last-child {
  border-right: none;
}

/* TEXT INSIDE DARK CARDS */
.ns-audience-label {
  font-size: 12px;
  font-family: poppins, sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: #9ca3af;
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* 
.ns-ledger-col :hover{
    color: #4ade80;
  filter: drop-shadow(0 0 5px rgba(74, 222, 128, 0.5));
} */

.ns-action-desc {
  font-size: 16px;
  line-height: 1.6;
  color: #e5e7eb;
  margin-bottom: 40px;
  flex-grow: 1;
}

/* =====================================
   BUTTONS (MATCH DARK CARDS)
===================================== */
.ns-btn-solid {
  display: block;
  width: 100%;
  padding: 18px 24px;
  background-color: #0a4f00;
  color: #ffffff;
  font-size: 15px;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  border: 1px solid #0a4f00;
  border-radius: 0px;
  transition: all 0.2s ease;
}

.ns-btn-solid:hover {
  background-color: #063200;
  border-color: #063200;
}

.ns-btn-outline {
  display: block;
  width: 100%;
  padding: 18px 24px;
  background-color: transparent;
  color: #e5e7eb;
  font-size: 15px;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 0px;
  transition: all 0.2s ease;
}

.ns-btn-outline:hover {
  border-color: #ffffff;
  background-color: rgba(255, 255, 255, 0.08);
}

/* =====================================
   RESPONSIVE
===================================== */
@media (max-width: 1100px) {
  .ns-header-img {
    display: none;
  }
}

@media (max-width: 850px) {
  .ns-ledger-wrapper {
    flex-direction: column;
  }

  .ns-ledger-col {
    border-right: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding: 40px 24px;
  }

  .ns-ledger-col:last-child {
    border-bottom: none;
  }

  .ns-corp-title {
    font-size: 32px;
  }
}

/* =====================================
   HERO: ARCHITECTURAL GRID (Modern B2B)
   Namespace: .modern-b2b-*
===================================== */
.modern-b2b-section {
  position: relative;
  height: 100vh;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family:
    "Inter",
    system-ui,
    -apple-system,
    sans-serif;
  color: #ffffff;
  overflow: hidden;
  background-color: #050505;
}

/* =====================================
   VIDEO & GRID OVERLAY
===================================== */
.modern-b2b-video-wrap {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.modern-b2b-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.5;
  /* Slightly darker for better text contrast */
}

/* The Architectural Grid Overlay */
.modern-b2b-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(circle at center, rgba(0, 0, 0, 0.3) 0%, #000000 120%),
    linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  background-size:
    100% 100%,
    60px 60px,
    60px 60px;
}

/* =====================================
   CONTENT LAYOUT
===================================== */
.modern-b2b-content {
  position: relative;
  z-index: 10;
  width: 100%;
  padding: 0 24px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* =====================================
   COMPONENTS
===================================== */

/* 1. Logo (Replaces Tag) */
.modern-b2b-logo {
  height: 300px;
  /* Optimal size */
  width: auto;
  margin-top: 45px;
  margin-bottom: 20px;
  /* Soft drop shadow to lift it off the video */
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.8));
}

/* 2. Main Title (Massive) */
.modern-b2b-title {
  font-size: 72px;
  font-weight: 700;
  line-height: 0.95;
  letter-spacing: -2px;
  color: #ffffff;
  margin: 0 0 16px 0;
  text-transform: uppercase;
}

.title-accent {
  color: transparent;
  -webkit-text-stroke: 1.5px #ffffff;
  /* Slightly thicker outline */
  opacity: 0.8;
}

/* 3. Subheading (New - Tech Style) */
.modern-b2b-subheading {
  font-size: 24px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 4px;
  /* Wide tracking = Expensive look */
  color: #4ade80;
  /* Tech Green */
  margin: 0 0 24px 0;
  text-shadow: 0 2px 10px rgba(74, 222, 128, 0.3);
}

/* =====================================
   SUPERB ANIMATED TAGLINE (Cyber-Flow)
===================================== */
.modern-b2b-tagline {
  /* Basic Layout */
  text-transform: uppercase;
  font-size: 24px !important;
  font-weight: 600;
  margin: 0 0 25px 0;
  line-height: 1.2;
  max-width: 2000px !important;
  /* --- KEY CHANGE: Force Single Line on Desktop/Laptops --- */
  white-space: nowrap;
  
  /* --- THE SHIMMER EFFECT --- */
  background: linear-gradient(
    120deg, 
    #86efac 0%, 
    #ebfcf1 40%, 
    #16a34a 50%, 
    #86efac 60%, 
    #86efac 100%
  );
  background-size: 200% auto;
  
  /* Clip & Transparent Text */
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  
  /* --- THE ANIMATIONS --- */
  animation: 
    tag-enter 1.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards, 
    tag-shine 2s linear infinite 3s;
}

/* 1. The Entrance (Focus In) */
@keyframes tag-enter {
  0% { 
    opacity: 0; 
    transform: translateY(20px);
    filter: blur(15px);
    letter-spacing: -5px;
  }
  100% { 
    opacity: 1; 
    transform: translateY(0); 
    filter: blur(0); 
    letter-spacing: 2px;
  }
}

/* 2. The Loop (Moving Light) */
@keyframes tag-shine {
  0% { background-position: 0% center; }
  100% { background-position: 200% center; }
}

/* --- RESPONSIVE WRAPPING --- */

/* TABLET & MOBILE (1024px and down): Allow wrapping */
@media (max-width: 1024px) {
  .modern-b2b-tagline {
    white-space: normal; /* Restores wrapping for tablets/mobile */
    /* Optional: Center align if it wraps */
    text-align: center; 
  }
}

/* MOBILE SPECIFIC TWEAKS */
@media (max-width: 768px) {
  .modern-b2b-tagline {
    font-size: 18px !important;
    animation: 
      tag-enter-mobile 1.5s cubic-bezier(0.2, 0.8, 0.2, 1) forwards,
      tag-shine 5s linear infinite 1.5s;
  }
}

@keyframes tag-enter-mobile {
  0% { opacity: 0; filter: blur(10px); letter-spacing: -2px; }
  100% { opacity: 1; filter: blur(0); letter-spacing: 1px; }
}
/* 5. Info Bar (Date/Loc) - Preserved */
.modern-b2b-info-bar {
  display: flex;
  /* border-top: 1px solid #4ade80; */
  /* border-bottom: 1px solid #4ade80; */
  padding: 15px 0;
  margin-top: 10px;
  margin-bottom: 25px;
  width: 100%;
  max-width: 500px;
  justify-content: center;
}

.modern-b2b-info-item {
  flex: 1;
  text-align: center;
  font-size: 16px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.modern-b2b-info-item:first-child {
  border-right: 1px solid #4ade80;
}

/* 6. Buttons - Preserved */
.modern-b2b-actions {
  display: flex;
  gap: 24px;
}

.btn-modern-primary {
  background-color: #4ade80;
  color: #000000;
  padding: 15px 40px;
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  text-decoration: none;
  /* border: 1px solid #ffffff; */
  transition: all 0.2s ease;
  min-width: 200px;
}

.btn-modern-primary:hover {
  background-color: transparent;
  color: #ffffff;
  transform: translateY(-2px);
  border: 1px solid #4ade80;
}

.btn-modern-secondary {
  background-color: transparent;
  color: #ffffff;
  padding: 15px 40px;
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  text-decoration: none;
  border: 1px solid #4ade80;
  transition: all 0.2s ease;
  min-width: 200px;
}

.btn-modern-secondary:hover {
  border-color: #ffffff;
  background-color: rgba(255, 255, 255, 0.05);
  transform: translateY(-2px);
  color: #4ade80;
}

/* =====================================
   RESPONSIVE
===================================== */
@media (max-width: 1024px) {
  .modern-b2b-title {
    font-size: 64px;
    letter-spacing: -2px;
  }

  .modern-b2b-subheading {
    font-size: 16px;
    letter-spacing: 3px;
  }
}

@media (max-width: 768px) {
  .modern-b2b-overlay{
    top: 0 !important;
  }
  .modern-b2b-logo {
    margin-top: 10px;
    height: 160px;
    margin-bottom: 24px;
  }

  .modern-b2b-title {
    font-size: 48px;
    letter-spacing: -1px;
  }

  .modern-b2b-subheading {
    font-size: 14px;
    letter-spacing: 2px;
    margin-bottom: 16px;
  }

  .modern-b2b-tagline {
    font-size: 18px;
    margin-bottom: 40px;
  }

  .modern-b2b-info-bar {
    margin-top: -25px;
    flex-direction: column;
    gap: 16px;
    padding: 16px 0;
  }

  .modern-b2b-info-item:first-child {
    border-right: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 16px;
  }

  .modern-b2b-actions {
    flex-direction: column;
    width: 100%;
    gap: 16px;
  }

  .btn-modern-primary,
  .btn-modern-secondary {
    width: 100%;
  }
}

/* =====================================
   LARGE SCREEN SCALING (24" - 27" Monitors)
   Target: Widths above 1600px
===================================== */
@media (min-width: 1600px) {

  /* 1. Unlock the container width */
  .modern-b2b-content {
    max-width: 1600px; /* Allow it to spread out more */
  }

  /* 2. Scale up the Logo */
  .modern-b2b-logo {
    height: 380px; /* Increased from 285px */
    margin-top: 100px;
  }

  /* 3. Massive Title Scaling */
  .modern-b2b-title {
    font-size: 85px; /* Increased from 60px */
    margin-bottom: 24px;
  }

  /* 4. Subheading Scaling */
  .modern-b2b-subheading {
    font-size: 26px; /* Increased from 20px */
    letter-spacing: 6px;
    margin-bottom: 32px;
  }

  /* 5. Tagline Scaling */
  .modern-b2b-tagline {
    font-size: 28px; /* Increased from 22px */
    max-width: 1100px; /* Wider reading area */
    margin-bottom: 40px;
  }

  /* 6. Info Bar Scaling */
  .modern-b2b-info-bar {
    max-width: 700px; /* Wider bar */
    padding: 25px 0;
  }
  
  .modern-b2b-info-item {
    font-size: 18px; /* Larger text */
  }

  /* 7. Button Scaling */
  .btn-modern-primary, 
  .btn-modern-secondary {
    padding: 20px 60px; /* Bigger touch targets */
    font-size: 18px;
    min-width: 260px;
  }
}

/* =====================================
   ULTRA-WIDE SCALING (For the 34" Giants)
   Target: Widths above 2200px
===================================== */
@media (min-width: 2200px) {
  .modern-b2b-title { font-size: 110px; }
  .modern-b2b-logo { height: 450px; }
  .modern-b2b-tagline { font-size: 34px; max-width: 1400px; }
  .modern-b2b-content { max-width: 2000px; }
}

/* =====================================
   ADD-ON: QUANTUM TICKER
===================================== */
.b2b-quantum-strip {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 52px;
  z-index: 60;
  overflow: hidden;
  display: flex;
  align-items: center;
  
  /* Deep Luxury Black Glass */
  background: rgba(2, 2, 2, 0.9);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  
  /* Subtle bottom border to separate from next section */
  border-bottom: 1px solid rgba(255,255,255,0.05);
}

/* --- THE LASER SCANNER (The "Superb" Part) --- */
.quantum-laser-line {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: #333; /* Base border color */
  z-index: 2;
}

.quantum-laser-line::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 150px; /* Length of the laser beam */
  height: 100%;
  
  /* Glowing Green Beam */
  background: linear-gradient(90deg, transparent, #4bde80, #ffffff, #4bde80, transparent);
  box-shadow: 0 0 10px #4bde80, 0 0 20px #4bde80;
  
  /* Shoots across continuously */
  animation: laser-scan 4s linear infinite;
}

/* --- THE TRACK --- */
.quantum-track {
  display: flex;
  white-space: nowrap;
  animation: quantum-scroll 60s linear infinite; /* Very slow, majestic speed */
  will-change: transform;
}

.quantum-item {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 14px; /* Smaller = More Premium */
  font-weight: 500;
  color: #ffffff;
  text-transform: uppercase;
  letter-spacing: 3px; /* Wide tracking for that "Security Clearance" look */
  padding: 0 50px;
  display: flex;
  align-items: center;
  opacity: 0.7; /* Muted by default */
  transition: opacity 0.3s ease;
}

/* Hover Effect: Text lights up */
.b2b-quantum-strip:hover .quantum-item {
  opacity: 1;
  text-shadow: 0 0 15px rgba(75, 222, 128, 0.5); /* Green glow on hover */
}

/* --- THE ICON (Pulsing Lock) --- */
.q-icon svg {
  width: 18px;
  height: 18px;
  margin-right: 100px;
  stroke: #4bde80; /* Neon Green stroke */
  margin-bottom: -2px;
  filter: drop-shadow(0 0 5px rgba(75, 222, 128, 0.4));
  
  /* Heartbeat Animation */
  animation: lock-pulse 3s infinite;
}

/* =====================================
   ANIMATIONS
===================================== */
@keyframes quantum-scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

@keyframes laser-scan {
  0% { left: -20%; }
  100% { left: 120%; } /* Moves all the way across and off-screen */
}

@keyframes lock-pulse {
  0% { opacity: 0.5; stroke-width: 2; }
  50% { opacity: 1; stroke-width: 2.5; filter: drop-shadow(0 0 8px #4bde80); }
  100% { opacity: 0.5; stroke-width: 2; }
}

/* Pause on Hover */
.b2b-quantum-strip:hover .quantum-track {
  animation-play-state: paused;
}

/* =====================================
   FLOATING TECH GLASS NAVBAR — ZX SYSTEM
===================================== */

/* --- 1. Positioning & Wrapper --- */
.zx-float-nav {
  position: fixed;
  top: 24px;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 64px);
  max-width: 1400px;
  z-index: 999;
  transition: all 0.3s ease;
}

/* --- 2. The Glass Core --- */
.zx-nav-core {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px 10px;

  /* Glass Base */
  background: linear-gradient(180deg, rgba(12, 16, 14, 0.55), rgba(6, 9, 7, 0.65));
  backdrop-filter: blur(40px) saturate(130%);
  -webkit-backdrop-filter: blur(40px) saturate(130%);
  
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  
  /* Shadow for Depth */
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}

/* Tech Texture Overlay (Subtle) */
.zx-nav-core::before {
  content: "";
  position: absolute;
  inset: 0;
  /* Ensure the image path is correct relative to your CSS file */
  background-image: url("../../assets/images/circuit2.webp"); 
  background-size: cover;
  background-position: center;
  opacity: 0.15; /* Kept subtle */
  z-index: 0;
  pointer-events: none;
}

/* Ensure content sits above texture */
.zx-nav-core > * {
  position: relative;
  z-index: 2;
}

/* --- 3. Logo --- */
.zx-nav-brand img {
  padding-top: 5px;
  height: 60px;
  display: block;
  /* Optional: Ensure logo is visible on dark bg */
  filter: brightness(1.1); 
}

/* --- 4. Menu Wrapper (Desktop Layout) --- */
.zx-menu-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-grow: 1;
  padding-left: 40px; /* Space from logo */
}

/* --- 5. Nav Links --- */
.zx-nav-links {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 32px;
  margin: 0 auto;
}

.zx-nav-links a {
  font-family: 'Poppins', sans-serif; /* Or 'Inter' depending on your pref */
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.3px;
  color: rgba(255, 255, 255, 0.75);
  text-decoration: none;
  position: relative;
  padding: 6px 0;
  text-transform: uppercase;
  transition: color 0.25s ease;
}

.zx-nav-links a:hover {
  color: #ffffff;
}

/* Green Underline Effect */
.zx-nav-links a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0px;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, transparent, #4ade80, transparent);
  opacity: 0;
  transform: scaleX(0.6);
  transition: all 0.3s ease;
}

.zx-nav-links a:hover::after {
  opacity: 1;
  transform: scaleX(1);
}

/* --- 6. CTA Button --- */
.zx-cta-btn {
  display: flex;
  align-items: center;
  width: 170px;
  height: 46px;
  background: #000000;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 0px; /* Sharp tech look */
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  cursor: pointer;
  padding: 0;
  overflow: hidden;
  transition: border-color 0.3s ease;
}

.zx-cta-btn:hover {
  border-color: #4ade80;
}

.zx-cta-text {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #ffffff;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 1px;
}

.zx-cta-icon {
  width: 46px;
  height: 46px;
  background: #4ade80; /* Neon Green */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Arrow Slide Animation */
.zx-cta-btn:hover .zx-cta-icon svg {
  animation: zx-arrow 1s linear infinite;
}

@keyframes zx-arrow {
  0% { opacity: 0; transform: translateX(-5px); }
  50% { opacity: 1; transform: translateX(0); }
  100% { opacity: 0; transform: translateX(5px); }
}

/* --- 7. Hamburger Toggle (Hidden on Desktop) --- */
.zx-menu-toggle {
  display: none; /* Default hidden */
}

/* =====================================
   RESPONSIVE (MOBILE & TABLET <= 1000px)
===================================== */
@media (max-width: 1000px) {
  
  /* Reset Nav Position */
  .zx-float-nav {
    width: calc(100% - 30px);
    top: 15px;
  }

  /* --- HAMBURGER BUTTON (Visible) --- */
  .zx-menu-toggle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 6px;
    
    width: 44px;
    height: 44px;
    
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 1001;
  }

  .zx-menu-toggle .bar {
    width: 20px;
    height: 2px;
    background-color: #4ade80; /* Tech Green */
    border-radius: 2px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    transform-origin: center;
  }

  /* Hover State */
  .zx-menu-toggle:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: #4ade80;
    box-shadow: 0 0 10px rgba(74, 222, 128, 0.15);
  }

  /* Active (Open) State */
  .zx-nav-core.menu-open .zx-menu-toggle {
    border-color: #4ade80;
    background: rgba(74, 222, 128, 0.1);
  }

  /* Rotate Bars into X */
  /* .zx-nav-core.menu-open .zx-menu-toggle .top {
    transform: translateY(8px) rotate(45deg);
  }
  .zx-nav-core.menu-open .zx-menu-toggle .mid {
    opacity: 0;
    transform: translateX(10px);
  }
  .zx-nav-core.menu-open .zx-menu-toggle .bot {
    transform: translateY(-8px) rotate(-45deg);
  } */

  /* --- MOBILE DROPDOWN --- */
  .zx-menu-wrapper {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    
    /* Dark Glass Background */
    background: rgba(10, 10, 10, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.15);
    /* border-top: none; */
    border-radius: 8px;
    
    flex-direction: column;
    align-items: center;
    padding: 0;
    margin-top: 8px;
    
    /* Collapsed State */
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    
    box-shadow: 0 20px 60px rgba(0,0,0,0.8);
  }

  /* Expanded State */
  .zx-nav-core.menu-open .zx-menu-wrapper {
    max-height: 600px; /* Large enough to fit content */
    opacity: 1;
    visibility: visible;
    padding: 30px 20px;
  }

  /* --- VERTICAL LINKS --- */
  .zx-nav-links {
    flex-direction: column;
    gap: 0;
    width: 100%;
    margin-bottom: 20px;
  }

  .zx-nav-links a {
    width: 100%;
    text-align: center;
    font-size: 16px;
    padding: 16px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  }

  .zx-nav-links a:first-child { border-top: 1px solid rgba(255, 255, 255, 0.05); }
  .zx-nav-links a:last-child { border-bottom: none; }

  /* --- MOBILE CTA --- */
  .zx-nav-cta {
    width: 100%;
    display: flex;
    justify-content: center;
  }

  .zx-cta-btn {
    width: 100%;
    max-width: 100%; /* Full width looks better */
    height: 52px;
  }
}

/* =====================================
   PARTNERS — WHITE INFRA LAYOUT (QX)
   - Clean white aesthetic
   - Flexbox grid for perfect centering
   - No border-radius (Sharp Tech Feel)
   - UPDATED: Large Endorsed Cards + 4-per-row Strategic Cards
===================================== */

.qx-partners-section {
  position: relative;
  background: #ffffff;
  padding: 100px 0px 0px 0px;
  color: #111827;
  overflow: hidden;
}

/* Subtle technical texture (very light) */
.qx-partners-section::before {
  content: "";
  position: absolute;
  inset: 0;
  /* background:
    linear-gradient(180deg, rgba(10, 79, 0, 0.03) 0%, rgba(255, 255, 255, 0) 45%),
    repeating-linear-gradient(
      90deg,
      rgba(17, 24, 39, 0.035) 0px,
      rgba(17, 24, 39, 0.035) 1px,
      transparent 1px,
      transparent 56px
    ); */
  z-index: 0;
  pointer-events: none;
}

.qx-partners-container {
  max-width: 1400px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

/* =====================================
   HEADER (Centered)
===================================== */
.qx-partners-header {
  max-width: 840px;
  margin: 0 auto 72px auto;
  text-align: center;
}

.qx-partners-title {
  font-size: 44px;
  font-family: poppins, sans-serif;
  font-weight: 500;
  letter-spacing: -1.2px;
  margin: 0 0 18px 0;
  color: #111827;
}

.qx-partners-sub {
  font-size: 16px;
  line-height: 1.7;
  color: #4b5563;
  margin: 0;
}

/* =====================================
   BANDS (Separators)
===================================== */
.qx-partners-band {
  padding: 42px 0 56px 0;
  border-top: 1px solid rgba(17, 24, 39, 0.12);
}

.qx-partners-band--tight {
  padding-top: 52px;
}

.qx-band-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-bottom: 34px;
}

.qx-band-kicker {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: #0a4f00;
  margin-bottom: 10px;
}

.qx-band-title {
  font-size: 22px;
  font-family: poppins, sans-serif;
  font-weight: 600;
  letter-spacing: -0.2px;
  margin: 0;
  color: #111827;
}

/* =====================================
   LOGO GRID (FLEXBOX)
   - Centered alignment
   - Sizing logic for 4-per-row
===================================== */
.qx-logo-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  /* Forces last row to center */
  gap: 24px;
  margin: 0 auto;
}

/* 1. ENDORSED PARTNERS (Massive Authority) */
.qx-logo-grid--endorsed .qx-logo-tile {
  width: 360px;
  /* Much wider */
  height: 180px;
  /* Much taller */
  flex-grow: 0;
  flex-shrink: 0;
}

/* 2. STRATEGIC PARTNERS (Standard - 4 per row) */
/* 280px width * 4 items + gaps fits perfectly in standard desktops */
.qx-logo-grid--strategic .qx-logo-tile {
  width: 260px;
  height: 160px;
  flex-grow: 0;
  flex-shrink: 0;
}

/* =====================================
   LOGO TILE BASE
===================================== */
.qx-logo-tile {
  display: flex;
  align-items: center;
  justify-content: center;

  background: linear-gradient(180deg, #ffffff 0%, #ffffff 100%);
  border: 1px solid rgba(17, 24, 39, 0.12);

  border-radius: 0;
  /* Sharp corners */
  box-shadow: 0 18px 34px rgba(0, 0, 0, 0.04);

  text-decoration: none;
  position: relative;
  overflow: hidden;
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

/* Micro-tech scan line effect */
.qx-logo-tile::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
      rgba(34, 197, 94, 0) 0%,
      rgba(34, 197, 94, 0.10) 48%,
      rgba(34, 197, 94, 0) 100%);
  transform: translateX(-60%);
  opacity: 0;
  transition: all 0.45s ease;
  pointer-events: none;
  z-index: 2;
}

/* Thin bottom signal bar */
.qx-logo-tile::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, #0a4f00, transparent);
  opacity: 0.25;
}

/* =====================================
   LOGO IMAGE SIZING
===================================== */
.qx-logo-tile img {
  max-width: 85%;
  object-fit: contain;
  filter: grayscale(20%) contrast(1.05);
  opacity: 0.92;
  transition: filter 0.25s ease, opacity 0.25s ease, transform 0.25s ease;
}

/* Specific Image Sizing for Endorsed (Larger) */
.qx-logo-grid--endorsed .qx-logo-tile img {
  max-height: 110px;
}

/* Specific Image Sizing for Strategic (Standard) */
.qx-logo-grid--strategic .qx-logo-tile img {
  max-height: 100px;
}

/* Hover Effects */
.qx-logo-tile:hover {
  transform: translateY(-6px);
  border-color: rgba(10, 79, 0, 0.35);
  box-shadow: 0 28px 60px rgba(0, 0, 0, 0.08);
  z-index: 2;
}

.qx-logo-tile:hover::before {
  opacity: 1;
  transform: translateX(60%);
}

.qx-logo-tile:hover img {
  filter: grayscale(0%) contrast(1);
  opacity: 1;
  transform: scale(1.02);
}

/* =====================================
   RESPONSIVE
===================================== */
@media (max-width: 1100px) {
  .qx-partners-section {
    padding: 95px 24px;
  }

  .qx-partners-title {
    font-size: 36px;
  }

  /* Tablet Sizing */
  .qx-logo-grid--endorsed .qx-logo-tile {
    width: 300px;
    height: 180px;
  }

  .qx-logo-grid--strategic .qx-logo-tile {
    width: 240px;
    height: 140px;
  }
}

@media (max-width: 700px) {
  .qx-partners-header {
    margin-bottom: 56px;
  }

  .qx-partners-title {
    font-size: 30px;
  }

  .qx-partners-band {
    padding: 36px 0 44px 0;
  }

  /* Mobile: Tiles use full width available (up to max) */
  .qx-logo-grid--endorsed .qx-logo-tile,
  .qx-logo-grid--strategic .qx-logo-tile {
    width: 100%;
    max-width: 360px;
    height: 130px;
  }

  .qx-logo-grid--endorsed .qx-logo-tile img {
    max-height: 80px;
  }

  .qx-logo-grid--strategic .qx-logo-tile img {
    max-height: 70px;
  }
}


/* =====================================
   SPEAKERS — SPX SYSTEM (PREMIUM 3D FINAL)
===================================== */

.spx-speakers-section {
  background: #ffffff; /* Clean, modern backdrop */
  padding: 120px 0px 0px 0px;
}

.spx-container {
  max-width: 1400px;
  margin: 0 auto;
}

/* =====================================
   1. MARQUEE TITLE (Image Filled)
===================================== */
.spx-main-title {
  /* Force Full Viewport Width */
  width: 100vw; 
  max-width: 100vw;
  
  /* The Breakout Magic: Pulls element out of the 1400px container */
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  
  margin-bottom: 100px;
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: center;
  background: #ffffff;
  padding: 0;
}
.spx-marquee-track {
  display: flex;
  white-space: nowrap;
  animation: spx-scroll 60s linear infinite;
  will-change: transform;
}

.spx-marquee-item {
  font-family: 'Poppins', sans-serif;
  font-size: 12vw;
  font-weight: 900;
  line-height: 1.1;
  text-transform: uppercase;
  padding-right: 60px;
  
  /* Image Fill Logic */
  background-image: 
    linear-gradient(rgba(255,255,255,0.4), rgba(255,255,255,0.6)), 
    url('../../assets/images/circuit4.webp');
  background-size: contain;
  background-position: center;
  -webkit-background-clip: text;
  background-clip: text;
  
  /* Text Styling */
  color: rgba(2, 84, 43, 0.1); 
  -webkit-text-stroke: 1px #0a4f00;
}

@keyframes spx-scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}

/* =====================================
   2. GROUPS & LABELS
===================================== */
.spx-group {
  margin-bottom: 100px;
}

.spx-group-label {
  font-family: 'Poppins', sans-serif;
  font-size: 40px;
  font-weight: 600; /* Slightly bolder for impact */
  color: #111827;
  line-height: 1.2;
  margin-bottom: 50px;
  text-align: center;
  position: relative;
  display: table; /* Helps center the border */
  margin-left: auto;
  margin-right: auto;
  text-transform: uppercase;
}

/* Decorative Green Underline */
.spx-group-label::after {
  content: '';
  display: block;
  width: 60px;
  height: 4px;
  background: #0a4f00;
  margin: 15px auto 0;
  border-radius: 2px;
}

/* =====================================
   3. GRID SYSTEM (Centered Flex)
===================================== */
.spx-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center; /* Centers the Chairman */
  gap: 30px;
  width: 100%;
}

/* =====================================
   4. PREMIUM 3D CARD DESIGN
===================================== */
.spx-card {
  /* Dimensions for 4 cards per row */
  width: calc(25% - 23px);
  
  display: flex;
  flex-direction: column;
  position: relative;
  background: #ffffff;
  
  /* Initial State (Subtle) */
  box-shadow: 
    0 10px 30px -10px rgba(0,0,0,0.05),
    0 0 0 1px rgba(0,0,0,0.03); /* Tiny border via shadow */
  
  transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
  overflow: hidden;
  cursor: pointer;
    border: 1px solid rgba(10, 79, 0, 0.15); 

}

/* 3D HOVER STATE */
.spx-card:hover {
  transform: translateY(-10px) scale(1.02); /* Lifts up */
  z-index: 10;
  
  /* Premium Green Glow Shadow */
  box-shadow: 
    0 20px 50px -12px rgba(10, 79, 0, 0.2),
    0 0 0 1px rgba(10, 79, 0, 0.1);
}

/* =====================================
   5. IMAGE AREA & EFFECTS
===================================== */
.spx-card-img-box {
  width: 100%;
  height: 320px; /* Fixed height for uniformity */
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
}

.spx-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  transition: transform 0.8s ease;
}

/* Slow Zoom on Hover */
.spx-card:hover img {
  transform: scale(1.1);
}

/* SHINE EFFECT (Light flash on hover) */
.spx-card-img-box::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%; /* Start off-screen */
  width: 50%;
  height: 100%;
  background: linear-gradient(
    to right,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0.3) 50%,
    rgba(255,255,255,0) 100%
  );
  transform: skewX(-25deg);
  pointer-events: none;
}

.spx-card:hover .spx-card-img-box::after {
  left: 200%; /* Move across screen */
  transition: left 0.7s ease-in-out;
}

/* =====================================
   6. INFO SECTION (Strict Alignment)
===================================== */
.spx-info {
  padding: 16px 20px;
  text-align: center;
  display: flex;
  flex-direction: column;
  background: #ffffff;
  position: relative;
  z-index: 2;
  flex-grow: 1;
  border-top: 3px solid #0a4f00; /* Premium accent line */
}

/* SLOT 1: NAME (Reserved Space: 2 lines) */
.spx-name {
  font-family: 'Poppins', sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: #111;
  margin: 0 0 8px 0;
  letter-spacing: -0.3px;
  
  height: 54px; /* Fixed height */
  display: flex;
  align-items: flex-start;
  justify-content: center;
  overflow: hidden;
}

/* SLOT 2: TITLE (Reserved Space: 3 lines) */
.spx-title {
  font-size: 13px;
  font-weight: 700;
  color: #0a4f00;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  line-height: 1.4;
  margin-bottom: 12px;
  
  height: 50px; /* Fixed height */
  display: flex;
  align-items: flex-start;
  justify-content: center;
  overflow: hidden;
}

/* SLOT 3: ORG / DESCRIPTION (Reserved Space: 4 lines) */
/* --- FIXED THE CROPPING ISSUE HERE --- */
.spx-org {
  font-size: 13px;
  color: #555;
  line-height: 1.6;
  border-top: 1px solid #f3f4f6;
  padding-top: 12px;
  
  /* Increased height to 85px to prevent cutting */
  height: 95px; 
  overflow: hidden;
  
  /* Adds "..." if text is still too long */
  display: -webkit-box;
  -webkit-line-clamp: 4; 
  -webkit-box-orient: vertical;
}

/* =====================================
   7. GLASS QUOTE OVERLAY
===================================== */
.spx-quote {
  position: absolute;
  inset: 0;
  
  /* Glassmorphism Effect */
  background: rgba(10, 79, 0, 0.9);
  backdrop-filter: blur(5px); 
  -webkit-backdrop-filter: blur(5px);
  
  color: white;
  padding: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 16px;
  line-height: 1.7;
  
  /* Animation */
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.4s ease;
}

.spx-card:hover .spx-quote {
  opacity: 1;
  transform: translateY(0);
}

/* =====================================
   8. MODAL (Pop-up)
===================================== */
.spx-modal {
  position: fixed;
  inset: 0;
  display: none;
  z-index: 9999;
}
.spx-modal.active { display: flex; align-items: center; justify-content: center; }
.spx-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.8);
  backdrop-filter: blur(4px);
}
.spx-modal-content {
  position: relative;
  background: #fff;
  width: 90%;
  max-width: 600px;
  padding: 50px;
  /* border-radius: 16px; */
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}
.spx-modal-close {
  position: absolute;
  top: 20px; right: 20px;
  padding: 15px;
  font-size: 18px;
  cursor: pointer;
  background: none; border: none;
  color: #999;
  transition: color 0.2s;
}

/* =====================================
   9. RESPONSIVE
===================================== */
@media (max-width: 1200px) {
  /* Tablet: 2 Cards per row */
  .spx-card {
    width: calc(50% - 15px);
  }
}

@media (max-width: 768px) {
  .spx-marquee-item { font-size: 20vw; }
  
  /* Mobile: 1 Card per row */
  .spx-card {
    width: 100%;
    max-width: 400px; /* Limits width on large phones */
  }
  
  .spx-main-title { margin-bottom: 40px; }
  .spx-group-label { font-size: 24px; }

  .spx-speakers-section {
  background: #ffffff; /* Clean, modern backdrop */
  padding: 0px 0px 0px 0px;
}
}

/* =====================================
   SPECIAL: CONFERENCE CHAIRMAN CARD
   (Compact Image, Executive Layout)
===================================== */

/* 1. The Card Container */
#spx-chairman-grid .spx-card {
  width: 100%;
  max-width: 680px;      /* Very compact width */
  flex-direction: row;   /* Horizontal Layout */
  height: 350px;         /* Fixed, shorter height for sleek look */
  margin: 0 auto;
  border: 1px solid rgba(10, 79, 0, 0.15); 
}

/* Hover Effect */
#spx-chairman-grid .spx-card:hover {
  transform: translateY(-5px);
  box-shadow: 
    0 15px 40px -10px rgba(10, 79, 0, 0.15),
    0 0 0 1px rgba(10, 79, 0, 0.1);
}

/* 2. The Image - SMALLER (Only 25%) */
#spx-chairman-grid .spx-card-img-box {
  width: 220px;          /* Fixed small width */
  height: 100%;          /* Full height of the card */
  flex-shrink: 0;        /* Prevents shrinking */
}

/* 3. The Info - LARGER AREA (Rest of width) */
#spx-chairman-grid .spx-info {
  flex-grow: 1;          /* Fills remaining space */
  padding: 24px 32px;    /* Nice padding */
  text-align: left;
  justify-content: center; /* Vertically center content */
  
  border-top: none; 
  border-left: 4px solid #0a4f00; /* Green accent on left */
}

/* 4. Typography */
#spx-chairman-grid .spx-name {
  font-size: 22px;       /* Classy, not huge */
  margin-bottom: 4px;
  height: auto;
  justify-content: flex-start;
}

#spx-chairman-grid .spx-title {
  font-size: 13px;
  color: #0a4f00;
  margin-bottom: 10px;
  height: auto;
  justify-content: flex-start;
}

#spx-chairman-grid .spx-org {
  font-size: 13px;
  height: auto;
  border-top: none;
  padding-top: 0;
  -webkit-line-clamp: 3; /* Limit text to 3 lines */
}

/* 5. Mobile: Stack Vertically */
@media (max-width: 768px) {
  #spx-chairman-grid .spx-card {
    flex-direction: column;
    max-width: 350px;
    height: auto; /* Allow growth on mobile */
  }
  
  #spx-chairman-grid .spx-card-img-box {
    width: 100%;
    height: 280px;
  }
  
  #spx-chairman-grid .spx-info {
    width: 100%;
    border-left: none;
    border-top: 4px solid #0a4f00;
    text-align: center;
    padding: 20px;
  }
  
  #spx-chairman-grid .spx-name,
  #spx-chairman-grid .spx-title {
    justify-content: center;
  }
}

/* ======================
   MODAL (Static Header, Scrollable Bio)
====================== */

.spx-modal {
  position: fixed;
  inset: 0;
  display: none;
  z-index: 9999;
}

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

.spx-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.85); /* Dark focus background */
  backdrop-filter: blur(5px);
}

.spx-modal-content {
  position: relative;
  background: #fff;
  width: 90%;
  max-width: 650px;
  max-height: 85vh; /* Limits height to screen size */
  /* border-radius: 20px; */
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  
  /* CRITICAL: Layout Setup */
  display: flex;
  flex-direction: column; 
  overflow: hidden; /* Prevents whole modal from scrolling */
}

.spx-modal-close {
  position: absolute;
  top: 15px;
  right: 15px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #f3f4f6;
  border: none;
  font-size: 20px;
  color: #555;
  cursor: pointer;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

.spx-modal-close:hover {
  background: #e5e7eb;
  color: #000;
  transform: rotate(90deg);
}

/* THE BODY LAYOUT */
.spx-modal-body {
  flex: 1; /* Fills the modal content area */
  min-height: 0; /* Required for internal scrolling to work */
  padding: 40px;
  
  /* GRID LAYOUT: 
     Rows: Auto (Header), 1fr (Bio Space) 
  */
  display: grid;
  grid-template-columns: 120px 1fr;
  grid-template-rows: auto auto 1fr; /* 3rd row takes remaining space */
  column-gap: 30px;
  row-gap: 5px;
}

/* 1. STATIC IMAGE */
#spx-modal-img {
  grid-column: 1;
  grid-row: 1 / 3; /* Spans name & title rows */
  width: 180px;
  height: 180px;
  /* border-radius: 50%; */
  object-fit: cover;
  border-bottom: 4px solid #034718;
}

/* 2. STATIC NAME */
#spx-modal-name {
  grid-column: 2;
  grid-row: 1;
  align-self: end;
  font-family: 'Poppins', sans-serif;
  font-size: 28px;
  font-weight: 700;
  color: #111;
  margin: 0;
  line-height: 1.1;
  padding-right: 30px; /* Space for close button */
}

/* 3. STATIC TITLE */
#spx-modal-title {
  grid-column: 2;
  grid-row: 2;
  align-self: start;
  font-size: 14px;
  font-weight: 600;
  color: #0a4f00;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 5px 0 0 0;
}

/* 4. SCROLLABLE BIO */
#spx-modal-bio {
  grid-column: 1 / -1; /* Full Width */
  grid-row: 3; /* Puts it in the 3rd flexible row */
  
  margin-top: 30px;
  padding-top: 20px;
  padding-right: 10px; /* Space for scrollbar not to overlap text */
  border-top: 1px solid #eee;
  
  font-size: 16px;
  line-height: 1.8;
  color: #4b5563;
  
  /* --- SCROLL MAGIC --- */
  overflow-y: auto; /* Scrolls ONLY this div */
  
  /* Hide scrollbar visually but keep functionality */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE */
}

/* Hide scrollbar Chrome/Safari */
#spx-modal-bio::-webkit-scrollbar {
  display: none;
}

/* RESPONSIVE (Mobile) */
@media (max-width: 600px) {
  .spx-modal-body {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto 1fr;
    text-align: center;
    padding: 30px 20px;
  }

  #spx-modal-img {
    grid-column: 1;
    grid-row: 1;
    margin: 0 auto;
    width: 100px;
    height: 100px;
  }

  #spx-modal-name {
    grid-column: 1;
    grid-row: 2;
    padding-right: 0;
    margin-top: 15px;
    font-size: 22px;
  }

  #spx-modal-title {
    grid-column: 1;
    grid-row: 3;
  }

  #spx-modal-bio {
    grid-column: 1;
    grid-row: 4;
    text-align: left;
    margin-top: 20px;
  }
}
/* =====================================
   PAST SPEAKERS - SEAMLESS MARQUEE (FIXED)
===================================== */
.past-speakers-section {
  padding: 100px 0;
  background: #ffffff;
  overflow: hidden; 
}

.spx-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 24px;
}

/* --- HEADER --- */
.spx-section-header {
  text-align: center;
  margin-bottom: 60px;
}

.spx-section-title {
  font-size: 40px;
  font-weight: 600;
  color: #111827;
  text-transform: uppercase;
  letter-spacing: -1px;
  margin: 0;
}

/* --- MARQUEE WRAPPER --- */
.spx-marquee-wrap {
  position: relative;
  width: 100%;
  display: flex; /* Key: Flexes the two groups side-by-side */
  overflow: hidden;
  user-select: none;
  /* Soft Fade on Edges */
  mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
  padding: 0px 0;
}

/* --- THE MOVING GROUP --- */
/* We will have TWO of these groups in the HTML */
.spx-track-group {
  flex-shrink: 0; /* Prevents squishing */
  display: flex;
  align-items: center;
  gap: 35px; /* The gap between cards */
  
  /* IMPORTANT: Add padding-right equal to gap so the seam is perfect */
  padding-right: 35px; 

  /* The Animation */
  animation: spx-scroll 50s linear infinite; /* Adjust '50s' for speed */
  will-change: transform;
}

/* Pause on Hover */
.spx-marquee-wrap:hover .spx-track-group {
  animation-play-state: paused;
}

/* Move exactly -100% of the group's width */
@keyframes spx-scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}

/* --- CARD STYLING --- */
.spx-item {
  width: 240px; /* Fixed Width */
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
}

.spx-inner {
  background: #ffffff;
  border: 1px solid rgba(17, 24, 39, 0.1);
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: all 0.3s ease;
  overflow: hidden;
  position: relative;
}

/* Hover Lift */
.spx-item:hover .spx-inner {
  transform: translateY(-10px);
  border-color: #4ade80; /* Green Border */
  box-shadow: 0 20px 30px -10px rgba(0, 0, 0, 0.1);
  z-index: 10;
}

/* Image */
.spx-thumb {
  height: 220px;
  width: 100%;
  overflow: hidden;
  border-bottom: 1px solid #f3f4f6;
  background: #f9fafb;
}

.spx-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  filter: grayscale(100%);
  transition: all 0.5s ease;
}

.spx-item:hover .spx-thumb img {
  filter: grayscale(0%);
  transform: scale(1.05);
}

/* Content */
.spx-content {
  padding: 24px 20px;
  text-align: center;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

.spx-name {
  font-size: 18px;
  font-weight: 600;
  color: #111827;
  text-decoration: none;
  margin-bottom: 5px;
  display: block;
}

.spx-role {
  font-size: 12px;
  font-weight: 600;
  color: #0a4f00; /* Green */
  text-transform: uppercase;
  margin-bottom: 12px;
  line-height: 1.4;
  min-height: 34px; 
}

.spx-company {
  font-size: 13px;
  color: #6b7280;
  font-weight: 500;
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid #f3f4f6;
  width: 100%;
}
/* =====================================
   THE MIDNIGHT BLUEPRINT V3 (Final Consolidated)
   - Includes Swiper Fixes
   - Includes Content Styling (Highlights/Concept)
   - Compact Card Height
===================================== */

/* --- SECTION & CONTAINER --- */
/* --- SECTION & CONTAINER --- */
.dark-projects-section {
  position: relative; /* Needed to anchor the background image */
  background-color: #020202; /* Deep Black Base */
  padding: 80px 24px;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  color: #ffffff;
  overflow: hidden;
  z-index: 1; /* Ensures content stays on top of the background */
}

/* --- THE BACKGROUND IMAGE OVERLAY --- */
.dark-projects-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1; /* Puts the image BEHIND the text */
  
  /* PASTE YOUR IMAGE URL BELOW */
  background-image: url('../../assets/images/circuit4.webp'); 
  
  background-size: cover;
  background-position: center;
  
  /* This blends the image with the black background */
  opacity: 0.15;  /* Adjust this: 0.1 is faint, 0.5 is strong */
  filter: grayscale(100%); /* Optional: Makes image black & white to fit theme */
}
.dark-projects-container {
  max-width: 1400px;
  margin: 0 auto;
}

/* --- HEADER --- */
.dp-header {
  margin-bottom: 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #1f1f1f;
  padding-bottom: 20px;
}

.dp-title-block h2 {
  font-size: 42px;
  font-weight: 600;
  color: #ffffff;
  margin: 0;
  letter-spacing: -1px;
}

/* --- CUSTOM NAVIGATION BUTTONS --- */
.dp-nav-controls {
  display: flex;
  gap: 10px;
}

.dp-nav-btn {
  width: 44px;
  height: 44px;
  border: 1px solid #333;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  cursor: pointer;
  background: #0a0a0a;
  transition: all 0.2s ease;
  position: static; /* Prevents Swiper absolute positioning issues */
  margin: 0;
}

/* Hide default Swiper blue arrows */
.dp-nav-btn::after {
  display: none;
}

.dp-nav-btn:hover {
  border-color: #4ade80;
  color: #4ade80;
  background: rgba(74, 222, 128, 0.1);
}

/* --- SWIPER OVERRIDES (Crucial for Layout) --- */
.swiper-container {
  padding-bottom: 50px !important; /* Space for pagination/shadows */
  overflow: visible !important;    /* Allows hover effects to pop out */
}

/* Flex display ensures all cards in a row are the same height */
.swiper-slide {
  height: auto;
  display: flex;
}

/* --- CARD STYLING --- */
.dp-card {
  background-color: rgb(10, 10, 10, 0.9); /* Semi-transparent dark */
  border: 1px solid #1f1f1f;
  overflow: hidden;
  width: 100%;
  display: flex;
  flex-direction: column;
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
  position: relative;
}

.dp-card:hover {
  transform: translateY(-5px);
  border-color: #4ade80; /* Neon Green Border */
  box-shadow: 0 15px 30px -10px rgba(0, 0, 0, 0.8);
}

/* --- IMAGE THUMBNAIL --- */
.dp-thumb-box {
  position: relative;
  height: 220px; /* Controlled height */
  overflow: hidden;
  border-bottom: 1px solid #1f1f1f;
  flex-shrink: 0;
}

.dp-thumb-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
  filter: grayscale(10%);
}

.dp-card:hover .dp-thumb-box img {
  transform: scale(1.05);
  filter: grayscale(0%);
}

/* Completion Tag */
.dp-completion-tag {
  position: absolute;
  top: 12px;
  right: 12px;
  background: rgba(0, 0, 0, 0.9);
  color: #4ade80;
  font-size: 14px; /* Normal font size */
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 0px;
  border: 1px solid #4ade80;
  z-index: 2;
}

/* --- CONTENT BODY --- */
.dp-content {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  flex-grow: 1;
}

.dp-title {
  font-size: 22px;
  font-weight: 600;
  color: #ffffff;
  margin: 0;
  line-height: 1.25;
}

/* --- META ROW (Location / Capacity) --- */
.dp-meta-row {
  display: flex;
  gap: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid #1f1f1f;
}

.dp-meta-item {
  display: flex;
  flex-direction: column;
}

.dp-label {
  font-size: 11px;
  text-transform: uppercase;
  color: #6b7280; /* Muted label */
  font-weight: 600;
  margin-bottom: 4px;
}

.dp-value {
  font-size: 14px;
  color: #e5e5e5;
  font-weight: 500;
}

/* --- TEXT BLOCKS (Concept & Highlights) --- */
.dp-block {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.dp-section-label {
  font-size: 12px;
  font-weight: 600;
  color: #4ade80; /* Green Section Header */
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.dp-text-body {
  font-size: 14px;
  line-height: 1.6;
  color: #d1d5db;
  margin: 0;
}

.dp-list {
  margin: 0;
  padding-left: 18px; /* Bullet indentation */
  font-size: 14px;
  line-height: 1.6;
  color: #d1d5db;
}

.dp-list li {
  margin-bottom: 6px;
}

/* --- PAGINATION DOTS --- */
.swiper-pagination-bullet {
  background: #444;
  opacity: 1;
}
.swiper-pagination-bullet-active {
  background: #4ade80;
}

/* --- RESPONSIVE --- */
@media (max-width: 768px) {
  .dp-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }
  
  .dark-projects-section {
    padding: 60px 20px;
  }
  
  .dp-title-block h2 {
    font-size: 32px;
  }
  
  .dp-nav-controls {
    align-self: flex-end;
  }
}


/* =====================================
   THE EXECUTIVE STRUCTURAL GRID (Clean Fonts)
   Namespace: .ev-stats-*
===================================== */
.ev-stats-section {
  background-color: #ffffff;
  padding: 100px 24px;
  color: #111827;
  border-bottom: 1px solid #e5e5e5;
  font-family: 'Inter', system-ui, -apple-system, sans-serif; /* Global Clean Font */
}

.ev-stats-container {
  max-width: 1200px;
  margin: 0 auto;
}

/* --- HEADER (Structural but Clean) --- */
.ev-header {
  display: flex;
  align-items: flex-end; /* Aligns text with the bottom line */
  gap: 20px;
  margin-bottom: 0; /* No gap so it touches the grid */
  position: relative;
}

.ev-header h2 {
  font-size: 48px; /* Big & Bold */
  font-weight: 600;
  color: #111827;
  margin: 0;
  line-height: 1;
  letter-spacing: -1.5px;
  /* Visual adjustment to sit on the line */
  transform: translateY(6px); 
  background: #fff;
  padding-right: 20px;
  z-index: 2;
  text-transform: uppercase;
}

/* The Connecting Line (Shoots out from title) */
.ev-header::after {
  content: "";
  flex-grow: 1; /* Takes up remaining space */
  height: 1px;
  background: #4ade80; /* Brand Green Line */
  margin-bottom: 6px; /* Aligns with the grid top */
}

/* --- THE GRID --- */
.ev-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  /* The header provides the top border now */
  border-bottom: 1px solid #4ade80; 
  padding-top: 20px;
}

/* --- THE STAT ITEM --- */
.ev-item {
  padding: 30px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
  transition: transform 0.3s ease;
}

/* Vertical Divider (Clean Lines) */
.ev-item::after {
  content: "";
  position: absolute;
  right: 0;
  top: 15%;
  height: 70%;
  width: 1px;
  background: #e5e7eb; /* Subtle Grey */
}

/* Remove divider for last item */
.ev-item:last-child::after {
  display: none;
}

/* Hover Effect */
.ev-item:hover {
  transform: translateY(-8px);
}

.ev-item:hover .ev-number-block {
  color: #0a4f00;
}

/* --- TYPOGRAPHY (Restored to Original Clean Style) --- */
.ev-label-top {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: #6b7280; /* Grey */
  margin-bottom: 12px;
  display: block;
  font-family: inherit; /* Inherits 'Inter'/Sans-serif */
}

.ev-number-block {
  font-variant-numeric: tabular-nums;
  font-size: 64px;
  font-weight: 600;
  color: #111827;
  line-height: 1;
  margin-bottom: 12px;
  /* Use Poppins if you have it, otherwise Inter/Sans */
  font-family: 'Poppins', sans-serif; 
  display: flex;
  align-items: flex-start;
  justify-content: center;
  transition: color 0.3s ease;
}

.ev-plus {
  font-size: 32px;
  color: #0a4f00; /* Green Accent */
  margin-top: 6px;
  font-weight: 600;
}

.ev-desc {
  font-size: 16px;
  font-weight: 400;
  color: #4b5563;
  margin: 0;
  max-width: 200px;
  line-height: 1.5;
}

/* =====================================
   RESPONSIVE
===================================== */
@media (max-width: 1024px) {
  .ev-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .ev-item::after {
    display: none;
  }
  .ev-item {
    border-bottom: 1px solid #f3f4f6;
    padding: 40px 20px;
  }
  .ev-item:nth-last-child(-n+2) {
    border-bottom: none;
  }
}

@media (max-width: 768px) {
  .ev-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 20px;
  }
  
  .ev-header::after {
    width: 100%;
    margin-bottom: 0;
  }
  
  .ev-header h2 {
    font-size: 42px;
    transform: none;
    padding-right: 0;
  }

  .ev-grid {
    grid-template-columns: 1fr;
    padding-top: 0;
  }
  
  .ev-item {
    border-bottom: 1px solid #f3f4f6 !important;
  }
  .ev-item:last-child {
    border-bottom: none !important;
  }
}


/* =====================================
   THE MONOLITH REVEAL V3 (Bottom Title)
   Namespace: .mg-events-*
===================================== */
.mg-section {
  position: relative;
  background-color: rgb(2, 2, 2, 0.8); /* Deep Black */
  padding: 120px 24px;
  color: #ffffff;
  overflow: hidden;
  z-index: 1;
}

/* --- BACKGROUND TEXTURE --- */
.mg-section::before {
  content: '';
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* REPLACE WITH YOUR IMAGE URL */
  background-image: url('../../assets/images/bgstadium.webp'); 
  background-size: cover;
  background-position: center;
  opacity: 1;
  mix-blend-mode: overlay;
  z-index: -1;
  pointer-events: none;
}

.mg-container {
  max-width: 1400px;
  margin: 0 auto;
}

/* --- HEADER --- */
.mg-header {
  text-align: left;
  margin-bottom: 60px;
}

.mg-header h2 {
  font-size: 36px;
  font-weight: 600; /* STRICTLY 600 */
  color: #ffffff;
  margin: 0;
  letter-spacing: -1px;
  /* text-transform: uppercase; */
}

/* --- GRID --- */
.mg-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr); 
  gap: 24px;
}

/* --- THE CARD --- */
.mg-card {
  position: relative;
  height: 550px; /* Tall Portrait Height */
  overflow: hidden;
  background: #0a0a0a;
  box-shadow: 0 10px 30px -10px rgba(0,0,0,0.8);
  isolation: isolate;
  cursor: default;
  border: 1px solid rgba(255,255,255,0.1);
}

/* Image Layer */
.mg-img-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.mg-img-layer img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94), filter 0.6s ease;
}

/* Hover: Zoom & Darken */
.mg-card:hover .mg-img-layer img {
  transform: scale(1.1);
  filter: brightness(0.3); /* Darken to make text pop */
}

/* --- TOP CONTENT (Year Only) --- */
.mg-top-badge {
  position: absolute;
  top: 24px;
  left: 24px;
  z-index: 3;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(4px);
  padding: 6px 12px;
  border-radius: 4px;
  border: 1px solid rgba(74, 222, 128, 0.3);
}

.mg-year {
  font-size: 13px;
  font-weight: 700;
  color: #4ade80; /* Neon Green */
  letter-spacing: 1px;
  margin: 0;
  display: block;
}

/* --- BOTTOM CONTENT (Title + Desc) --- */
.mg-bottom-content {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 30px;
  z-index: 3;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  /* Strong gradient for readability */
  background: linear-gradient(to top, rgba(0,0,0,0.95) 20%, transparent 100%);
  transition: background 0.5s ease;
}

.mg-card:hover .mg-bottom-content {
  background: linear-gradient(to top, #000 40%, transparent 100%);
}

.mg-title {
  font-size: 25px; /* Larger Font */
  font-weight: 500; /* STRICTLY 600 */
  color: #ffffff;
  margin: 0 0 10px 0;
  font-family: roboto, sans-serif;
  line-height: 1.2;
  /* Animation */
  transform: translateY(20px); /* Starts lower */
  transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.mg-desc {
  font-size: 15px;
  line-height: 1.6;
  color: #d1d5db;
  margin: 0;
  
  /* Hidden State */
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease, transform 0.5s ease;
  
  /* Layout Safety */
  max-height: 0; 
}

/* --- HOVER INTERACTIONS --- */

/* Slide Title Up */
.mg-card:hover .mg-title {
  transform: translateY(0);
}

/* Reveal Description */
.mg-card:hover .mg-desc {
  opacity: 1;
  transform: translateY(0);
  max-height: 300px; /* Allow height to grow */
  transition-delay: 0.1s;
}

/* =====================================
   RESPONSIVE
===================================== */
@media (max-width: 1200px) {
  .mg-grid {
    grid-template-columns: repeat(2, 1fr); /* 2x2 */
    gap: 30px;
  }
  .mg-card {
    height: 500px;
  }
}

@media (max-width: 700px) {
  .mg-header h2 { font-size: 36px; }
  .mg-grid {
    grid-template-columns: 1fr; /* Stack vertically */
    gap: 40px;
  }
  .mg-card {
    height: 450px;
  }
  /* On mobile, show title in correct position by default? 
     Or keep interactive. Keeping interactive for consistency. */
}

/* =====================================
   THE ONYX KINETIC V3 (Equal Height & Common Footer)
   Namespace: .ov-section-*
===================================== */
.ov-section {
  position: relative;
/* Fades quickly on the left, mostly black on the right */
background: linear-gradient(to right, rgba(2, 2, 2, 0.8) 0%, #020202 50%, #020202 100%);  padding: 120px 24px;
  color: #ffffff;
  border-top: 1px solid #1a1a1a;
  overflow: hidden;
  z-index: 1; /* Ensures content stays on top */
}

/* --- BACKGROUND IMAGE OVERLAY --- */
.ov-section::before {
  content: "";
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  
  /* PASTE YOUR IMAGE URL HERE */
  background-image: url('../../assets/images/circuit5.webp'); 
  
  background-size: cover;
  background-position: center;
  
  /* Blending Settings */
  opacity: 1; /* Keeps it subtle so text is readable */
  mix-blend-mode: overlay; /* Blends nicely with the black */
  z-index: -1; /* Puts it behind the content */
  pointer-events: none;
}

.ov-container {
  max-width: 1400px;
  margin: 0 auto;
}

/* --- MAIN GRID (Equal Height) --- */
.ov-grid {
  
  display: grid;
  grid-template-columns: 1fr 1fr; /* 50/50 Split */
  gap: 60px;
  /* This ensures both sides are physically the same height */
  align-items: stretch; 
  min-height: 450px; /* Minimum height for impact */
}

/* --- LEFT: VIDEO MODULE --- */
.ov-video-wrapper {
  position: relative;
  width: 100%;
  height: 100%; /* Fills the grid cell height perfectly */
  background: #0a0a0a;
  border-radius: 0px; /* Square */
  overflow: hidden;
  box-shadow: 0 20px 50px -20px rgba(0,0,0,0.8);
  border: 1px solid #1f1f1f;
}

/* The Autoplay Video - Covers full area */
.ov-video-embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* Ensures video fills the box without distortion */
  opacity: 0.8;
  transition: opacity 0.5s ease;
}

.ov-video-wrapper:hover .ov-video-embed {
  opacity: 1;
}

/* Tech Corners */
.ov-video-wrapper::before,
.ov-video-wrapper::after {
  content: "";
  position: absolute;
  width: 40px;
  height: 40px;
  border: 2px solid #4ade80; /* Neon Green */
  z-index: 2;
  pointer-events: none;
}

.ov-video-wrapper::before { top: 0; left: 0; border-right: none; border-bottom: none; }
.ov-video-wrapper::after { bottom: 0; right: 0; border-left: none; border-top: none; }

/* --- RIGHT: CONTENT MODULE --- */
.ov-content {
  order: -1;
  display: flex;
  flex-direction: column;
  justify-content: center; /* Vertically Centers the text */
  height: 100%;
  padding-right: 20px;
}

/* Kicker */
.ov-kicker {
  font-size: 13px;
  font-weight: 700;
  color: #4ade80;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.ov-kicker::before {
  content: "";
  width: 40px;
  height: 2px;
  background: #4ade80;
}

/* Headline */
.ov-title {
  font-size: 42px;
  font-weight: 600; /* STRICTLY 600 */
  color: #ffffff;
  margin: 0 0 30px 0;
  line-height: 1.2;
  letter-spacing: -0.5px;
}

/* Body Text */
.ov-body {
  font-size: 16px;
  line-height: 1.8;
  color: #a3a3a3;
  margin-bottom: 24px;
}

.ov-body strong {
  color: #ffffff;
  font-weight: 600;
}

.ov-body:last-child {
  margin-bottom: 0;
}

/* --- BOTTOM: ECOSYSTEM FOOTER (Common) --- */
.ov-ecosystem-bar {
  border-top: 1px solid #1f1f1f;
  padding-top: 40px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.ov-tags-label {
  font-size: 14px;
  font-weight: 700;
  color: #ffffff;
  text-transform: uppercase;
  margin-bottom: 20px;
  letter-spacing: 1px;
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Green dot before label */
.ov-tags-label::before {
  content: "";
  width: 8px;
  height: 8px;
  background: #4ade80;
  display: block;
}

.ov-tags-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.ov-tag {
  font-size: 13px;
  font-weight: 500;
  width: 160px;
  color: #d1d5db;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.15);
  padding: 12px 20px;
  border-radius: 0px; /* Square */
  transition: all 0.2s ease;
  cursor: default;
}

.ov-tag:hover {
  background: rgba(74, 222, 128, 0.1);
  border-color: #4ade80;
  color: #4ade80;
  transform: translateY(-2px);
}

/* =====================================
   RESPONSIVE
===================================== */
@media (max-width: 1024px) {
  .ov-grid {
    grid-template-columns: 1fr; /* Stack vertically */
    gap: 40px;
    margin-bottom: 60px;
  }
  
  /* Reset height on mobile so video doesn't stretch weirdly */
  .ov-video-wrapper {
    height: 400px; 
  }
  
  .ov-content {
    padding-right: 0;
  }
  
  .ov-title {
    font-size: 32px;
  }
}

/* =====================================
   THE CLEAN SLATE (Minimal Video Section)
   Namespace: .fi-section-*
===================================== */
.fi-section {
  background-color: #ffffff; /* Pure White */
  padding: 100px 24px;
  color: #111827;
  border-bottom: 1px solid #e5e5e5;
}

.fi-container {
  max-width: 1000px; /* Narrower container for better video focus */
  margin: 0 auto;
}

/* --- HEADER --- */
.fi-header {
  text-align: center;
  margin-bottom: 50px;
}

.fi-title {
  font-size: 48px;
  font-weight: 500;
  color: #000000;
  margin: 0;
  letter-spacing: -1.5px;
  line-height: 1.1;
}

/* Subtle Green Underline */
.fi-title::after {
  content: "";
  display: block;
  width: 60px;
  height: 4px;
  background: #4ade80; /* Your Brand Green */
  margin: 20px auto 0 auto;
}

/* --- YOUTUBE FRAME (The Cinema Box) --- */
.fi-video-box {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* 16:9 Aspect Ratio Magic Number */
  height: 0;
  background: #000;
  overflow: hidden;
  /* Floating Shadow Effect */
  box-shadow: 0 30px 60px -12px rgba(0, 0, 0, 0.25);
}

.fi-iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}

/* =====================================
   RESPONSIVE
===================================== */
@media (max-width: 768px) {
  .fi-title {
    font-size: 36px;
  }
  .fi-section {
    padding: 60px 20px;
  }
}


/* =====================================
   THE DAYLIGHT NEXUS V2 (Wide & Clean)
   Namespace: .nexus-light-*
===================================== */
.nexus-light-section {
  background-color: #ffffff;
  padding: 100px 24px;
  color: #111827;
  border-bottom: 1px solid #e5e5e5;
  overflow: hidden;
}

.nexus-light-container {
  max-width: 1400px; /* INCREASED WIDTH */
  margin: 0 auto;
}

/* --- HEADER --- */
.nexus-light-header {
  display: flex;
  justify-content: space-between; /* Pushes title left, controls right */
  align-items: flex-end;
  margin-bottom: 50px;
  border-bottom: 2px solid #111827;
  padding-bottom: 20px;
}

.nexus-light-title {
  font-size: 42px;
  font-weight: 600;
  color: #111827;
  text-transform: uppercase;
  margin: 0;
  letter-spacing: -1px;
  line-height: 1;
}

/* --- CONTROLS (Top Right) --- */
.nexus-light-controls {
  display: flex;
  gap: 12px; /* GAP ADDED between buttons */
}

.nexus-light-btn {
  width: 56px;
  height: 56px;
  border: 1px solid #e5e7eb;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  color: #111827;
  font-size: 20px;
  border-radius: 0; /* Sharp */
}

.nexus-light-btn:hover {
  background: #111827;
  color: #4ade80;
  border-color: #111827;
}

/* --- HIDE PAGINATION DOTS --- */
.blog-pagination, 
.swiper-pagination {
  display: none !important;
}

/* --- THE CARD --- */
.nexus-light-card {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  position: relative;
  border-radius: 0;
}

.nexus-light-card:hover {
  border-color: #4ade80;
  transform: translateY(-8px);
  box-shadow: 0 20px 40px -10px rgba(0,0,0,0.1);
}

/* Image Wrapper */
.nexus-light-thumb {
  position: relative;
  width: 100%;
  padding-top: 60%; /* 16:9 */
  overflow: hidden;
  border-bottom: 1px solid #e5e7eb;
}

.nexus-light-thumb img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
  filter: grayscale(50%);
}

.nexus-light-card:hover .nexus-light-thumb img {
  transform: scale(1.05);
  filter: grayscale(0%);
}

/* Content */
.nexus-light-body {
  padding: 30px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

/* Headline */
.nexus-light-headline {
  margin: 0 0 16px 0;
  min-height: 60px;
}

.nexus-light-headline a {
  font-size: 20px;
  font-weight: 700;
  color: #111827;
  text-decoration: none;
  line-height: 1.3;
  transition: color 0.2s ease;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.nexus-light-card:hover .nexus-light-headline a {
  color: #0a4f00;
}

/* Excerpt */
.nexus-light-excerpt {
  font-size: 15px;
  line-height: 1.6;
  color: #6b7280;
  margin: 0 0 24px 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Meta */
.nexus-light-meta {
  margin-top: auto;
  padding-top: 20px;
  border-top: 1px solid #f3f4f6;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  color: #9ca3af;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.nexus-light-author {
  color: #111827;
  text-decoration: none;
  font-weight: 800;
}

.nexus-light-arrow {
  font-size: 18px;
  opacity: 0;
  transform: translateX(-10px);
  transition: all 0.3s ease;
  color: #4ade80;
}

.nexus-light-card:hover .nexus-light-arrow {
  opacity: 1;
  transform: translateX(0);
}

/* =====================================
   RESPONSIVE
===================================== */
@media (max-width: 768px) {
  .nexus-light-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }
  .nexus-light-title {
    font-size: 32px;
  }
  .nexus-light-controls {
    align-self: flex-end; /* Keep buttons right even on mobile */
  }
}


/* =====================================
   THE SPONSOR MATRIX V2 (Marquee Edition)
   Namespace: .matrix-strict-*
===================================== */

.matrix-strict-section {
  position: relative;
  background: #ffffff;
  padding: 80px 0px 0px 0px;
  color: #111827;
  overflow: hidden;
  z-index: 1;
}

/* Texture */
.matrix-strict-section::before {
  content: "";
  position: absolute;
  inset: 0;
  /* background-image: 
    linear-gradient(rgba(17, 24, 39, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(17, 24, 39, 0.03) 1px, transparent 1px); */
  background-size: 40px 40px;
  z-index: -1;
  pointer-events: none;
}

.matrix-strict-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 24px;
}

/* --- HEADERS (Exact Content) --- */
.matrix-strict-main-header {
  text-align: center;
  margin-bottom: 60px;
}

.matrix-strict-main-header h2 {
  font-size: 48px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: -1px;
  color: #111827;
  margin: 0;
}

.matrix-strict-sub-header {
  text-align: center;
  margin-bottom: 30px;
}

.matrix-strict-sub-header h3 {
  font-size: 24px;
  font-weight: 600;
  color: #111827;
  margin: 0;
  letter-spacing: -0.5px;
}

/* --- BANDS --- */
.matrix-strict-band {
  padding: 40px 0;
  border-top: 1px solid rgba(17, 24, 39, 0.08);
}

.matrix-strict-band:first-child {
  border-top: none;
}

/* --- STATIC GRID --- */
.matrix-strict-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 24px;
  margin-bottom: 20px;
}

/* --- THE TILE (Common Style) --- */
.matrix-tile {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  border: 1px solid rgba(17, 24, 39, 0.1);
  /* Sharp corners */
  border-radius: 0; 
  text-decoration: none;
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.02);
}

/* Fixed Sizes for Static Grid */
.matrix-tile--large { width: 380px; height: 200px; }
.matrix-tile--medium { width: 280px; height: 160px; }

/* Image Styling */
.matrix-tile img {
  max-width: 90%;
  max-height: 100px;
  object-fit: contain;
  /* Grayscale to Color on Hover */
  filter: grayscale(50%) opacity(1); 
  transition: all 0.4s ease;
}

/* Hover Effects */
.matrix-tile:hover {
  transform: translateY(-5px);
  border-color: rgba(10, 79, 0, 0.2);
  box-shadow: 0 20px 40px -5px rgba(0, 0, 0, 0.08);
  z-index: 5;
}

.matrix-tile:hover img {
  filter: grayscale(0%) opacity(1);
  transform: scale(1.05);
}

/* Green Bottom Line on Hover */
.matrix-tile::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 3px;
  background: #0a4f00;
  transform: scaleX(0);
  transition: transform 0.3s ease;
}
.matrix-tile:hover::after { transform: scaleX(1); }


/* =====================================
   MARQUEE SECTION (Past Sponsors)
===================================== */
.matrix-marquee-wrap {
  position: relative;
  width: 100%;
  overflow: hidden;
  /* Fades on edges to smooth the exit/entry */
  mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
  padding: 20px 0; /* Space for hover float */
}

.matrix-marquee-track {
  display: flex;
  width: max-content;
  gap: 24px;
  /* The Animation */
  animation: matrix-scroll 40s linear infinite;
}

/* Pause on Hover */
.matrix-marquee-track:hover {
  animation-play-state: paused;
}

/* Marquee Items (Smaller uniform size) */
.matrix-tile--marquee {
  width: 220px;
  height: 120px;
  flex-shrink: 0;
}

@keyframes matrix-scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(calc(-50% - 12px)); } /* -50% of track width minus half gap */
}

/* =====================================
   RESPONSIVE
===================================== */
@media (max-width: 768px) {
  .matrix-strict-main-header h2 { font-size: 32px; }
  .matrix-strict-sub-header h3 { font-size: 20px; }
  
  .matrix-tile--large,
  .matrix-tile--medium {
    width: 100%;
    height: 140px;
  }
}

/* =====================================
   STANDALONE BREAKOUT MARQUEE
   Namespace: .tm-*
===================================== */

.tm-section {
  padding: 80px 0; /* Spacing above/below */
  background: #ffffff; 
  overflow: hidden; /* Prevents horizontal scrollbar on body */
}

/* The Container that forces Full Width */
.tm-breakout-container {
  width: 100vw;
  max-width: 100vw;
  
  /* This calculation forces the element to stretch 
     screen-edge to screen-edge, even inside a wrapper */
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: center;
}

/* The Moving Track */
.tm-track {
  display: flex;
  white-space: nowrap;
  /* Adjust '60s' to change speed */
  animation: tm-scroll 160s linear infinite; 
  will-change: transform;
}

/* Hover to Pause (Optional - remove if not needed) */
.tm-track:hover {
  animation-play-state: paused;
}

/* The Text Item */
.tm-item {
  font-family: 'Poppins', sans-serif;
  /* Massive Responsive Font Size */
  font-size: 12vw; 
  font-weight: 900;
  line-height: 1.1;
  text-transform: uppercase;
  
  /* Spacing between repeated text */
  padding-right: 60px; 
  
  /* IMAGE FILL LOGIC (The "Mask" Effect) */
  color: rgba(2, 84, 43, 0.05); /* Very transparent green fallback */
  
  /* The Outline */
  -webkit-text-stroke: 1px #0a4f00; 
  
  /* The Background Image */
  /* ▼▼▼ UPDATE THIS IMAGE PATH ▼▼▼ */
  background-image: 
    linear-gradient(rgba(255,255,255,0.4), rgba(255,255,255,0.6)), 
    url('../../assets/images/circuit4.webp'); 
  /* ▲▲▲ UPDATE THIS IMAGE PATH ▲▲▲ */
  
  background-size: contain;
  background-position: center;
  
  /* Clips background to text */
  -webkit-background-clip: text;
  background-clip: text;
  
  /* Prevents shrinking */
  flex-shrink: 0; 
}

/* The Infinite Loop Animation */
@keyframes tm-scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}

/* =====================================
   QUANTUM SPLASH CSS (Premium B2B)
   [TIMING: ~8 Seconds Total]
===================================== */

:root {
  --q-black: #050505;
  --q-green: #00dc82; 
  --q-red: #00ad2b;   
  --q-concrete: #ededed;
  --q-white: #ffffff;
}

#quantum-splash {
  position: fixed;
  inset: 0;
  background: url('../../assets/images/circuit6.webp') no-repeat center center / cover, var(--q-black);
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  
  /* [UPDATED] Exit lifts up at 7.5s */
  animation: q-curtain-rise 1.2s cubic-bezier(0.76, 0, 0.24, 1) forwards 7.5s;
}

/* --- BACKGROUND ATMOSPHERE --- */
.q-grid-floor {
  position: absolute;
  width: 200%;
  height: 200%;
  top: 50%;
  left: -50%;
  background-image: 
    linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  background-size: 80px 80px;
  transform: perspective(1000px) rotateX(75deg) translateY(-100px) translateZ(-300px);
  animation: q-grid-move 30s linear infinite; 
  pointer-events: none;
}

.q-content-wrapper {
  position: relative;
  z-index: 10;
  text-align: center;
  width: 100%;
  max-width: 1200px;
  padding: 0 20px;
}

/* --- 1. TIMELINE --- */
.q-timeline {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0;
  margin-bottom: 6vh;
  opacity: 0;
  /* [UPDATED] Fade in quicker */
  animation: q-fade-in 1.0s ease forwards 0.3s;
}

.qt-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 150px;
}

.qt-label {
  font-size: 14px;
  letter-spacing: 2px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.4);
  text-transform: uppercase;
}

.qt-node.active .qt-label { color: var(--q-green); text-shadow: 0 0 15px rgba(0, 220, 130, 0.4); }

.qt-dot {
  width: 8px;
  height: 8px;
  background: #333;
  border-radius: 50%;
  position: relative;
}

.qt-node.active .qt-dot { background: var(--q-green); box-shadow: 0 0 10px var(--q-green); }

.qt-path {
  width: 80px;
  height: 1px;
  background: rgba(255, 255, 255, 0.1);
  margin-top: 18px; 
}

/* --- 2. TYPOGRAPHY --- */
.q-lead-text {
  font-size: clamp(18px, 2vw, 24px);
  color: #fff;
  font-weight: 300;
  margin: 0;
  line-height: 1.4;
}

.char-fade {
  display: inline-block;
  opacity: 0;
  animation: q-fade-up 0.8s ease forwards;
}
/* [UPDATED] Fast Stagger - Starts at 0.6s */
.char-fade:nth-child(1) { animation-delay: 0.6s; }
.char-fade:nth-child(2) { animation-delay: 0.8s; }
.char-fade:nth-child(3) { animation-delay: 1.0s; }
.char-fade:nth-child(4) { animation-delay: 1.2s; }
.char-fade:nth-child(5) { animation-delay: 1.4s; }
.char-fade:nth-child(6) { animation-delay: 1.6s; }

.q-sub-text {
  font-size: clamp(18px, 2vw, 24px);
  color: #888;
  font-weight: 300;
  margin: 5px 0 40px 0;
  opacity: 0;
  /* [UPDATED] Appear at 1.8s */
  animation: q-fade-in 1.0s ease forwards 1.8s;
}

/* --- 3. TRANSFORMATION STAGE --- */
.q-transform-stage {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: clamp(80px, 15vw, 160px); 
}

/* LAYER 1: CONCRETE */
.q-layer-concrete {
  position: absolute;
  font-size: clamp(32px, 6vw, 90px);
  font-weight: 700;
  color: var(--q-concrete);
  text-transform: uppercase;
  letter-spacing: -1px;
  opacity: 0;
  
  /* [UPDATED] 
     1. Enter at 2.5s 
     2. Erase at 4.2s (Much faster sync)
  */
  animation: 
    q-concrete-enter 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards 2.5s,
    q-erase 1.8s cubic-bezier(0.76, 0, 0.24, 1) forwards 4.2s;
}

/* The Red Strike Line */
.q-strikethrough {
  position: absolute;
  left: 0;
  top: 50%;
  height: 6px;
  background: var(--q-red);
  width: 0%;
  transform: translateY(-50%);
  
  /* [UPDATED] Strikes at 3.5s (Quick) */
  animation: q-strike 0.5s cubic-bezier(0.7, 0, 0.3, 1) forwards 3.5s;
}

/* LAYER 2: DIGITAL */
.q-layer-digital {
  margin-top: 0px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  
  display: flex;
  flex-direction: column;
  align-items: center;
  clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%);
  
  /* [UPDATED] Reveal Wipe starts at 4.2s, lasts 1.8s (Snappier) */
  animation: 
    q-scan-wipe 1.8s cubic-bezier(0.76, 0, 0.24, 1) forwards 4.2s,
    q-remove-line 0.1s linear forwards 6.1s;
}

.digital-glow-text {
  font-size: clamp(36px, 7vw, 100px);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -2px;
  line-height: 1;
  white-space: nowrap; 
  
  background-image: 
    linear-gradient(135deg, rgba(255, 255, 255, 0.3) 20%, rgba(0, 220, 130, 0.4) 100%), 
    url('../../assets/images/circuit4.webp');
    
  background-size: contain;
  background-position: center;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  filter: drop-shadow(0 0 20px rgba(0, 220, 130, 0.6));
}

.digital-sub-text {
  font-size: clamp(30px, 1.5vw, 24px);
  font-weight: 700;
  color: var(--q-green);
  letter-spacing: 0.5em;
  text-transform: uppercase;
  margin-top: 10px;
  
  background-image: 
    linear-gradient(135deg, rgba(255, 255, 255, 0.4) 20%, rgba(0, 220, 130, 0.5) 100%), 
    url('../../assets/images/circuit4.webp');
    
  background-size: contain;
  background-position: center;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  filter: drop-shadow(0 0 20px rgba(0, 220, 130, 0.6));
}

/* The Green Scan Line */
.q-scanner-line {
  position: absolute;
  top: -20%;
  bottom: -20%;
  right: 0; 
  width: 4px;
  background: #fff;
  box-shadow: 0 0 30px #fff, 0 0 50px var(--q-green);
  opacity: 1;
  
  /* [UPDATED] Hide at 6.0s */
  animation: q-hide-scanner 0.1s linear forwards 6.0s;
}

/* --- 4. SYSTEM LOADER --- */
.q-loader-bar {
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  width: 200px;
  text-align: center;
  opacity: 0;
  animation: q-fade-in 1.5s ease forwards 0.5s;
}

.q-progress {
  height: 2px;
  background: #333;
  width: 100%;
  position: relative;
  overflow: hidden;
  margin-bottom: 10px;
}

.q-progress::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 0%;
  background: var(--q-green);
  /* [UPDATED] Bar fills in 7.5s */
  animation: q-load-bar 7.5s linear forwards;
}

.q-status-text {
  font-size: 10px;
  color: #666;
  font-family: monospace;
  letter-spacing: 1px;
}

/* =====================================
   KEYFRAMES
===================================== */
@keyframes q-grid-move {
  0% { transform: perspective(1000px) rotateX(75deg) translateY(-100px) translateZ(-300px); }
  100% { transform: perspective(1000px) rotateX(75deg) translateY(-100px) translateZ(0px); }
}

@keyframes q-fade-in { to { opacity: 1; } }

@keyframes q-fade-up {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes q-concrete-enter {
  from { opacity: 0; transform: scale(0.9); filter: blur(10px); }
  to { opacity: 1; transform: scale(1); filter: blur(0); }
}

@keyframes q-strike {
  to { width: 110%; left: -5%; }
}

@keyframes q-erase {
  0% { clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%); }
  100% { clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%); }
}

@keyframes q-scan-wipe {
  0% { clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%); }
  100% { clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%); }
}

@keyframes q-load-bar {
  0% { width: 0%; }
  100% { width: 100%; }
}

@keyframes q-curtain-rise {
  0% { transform: translateY(0); border-radius: 0; }
  100% { transform: translateY(-100%); border-radius: 0 0 50% 50%; }
}

@keyframes q-remove-line { 100% { overflow: visible; } }
@keyframes q-hide-scanner { 100% { opacity: 0; } }

/* Mobile Adjustments */
@media (max-width: 768px) {
  .q-transform-stage { flex-direction: column; height: auto; padding: 40px 0; }
  .q-layer-concrete, .q-layer-digital { position: relative; transform: none; top: auto; left: auto; }
  .q-layer-digital { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
  .digital-glow-text { white-space: normal; text-align: center; }

  .digital-glow-text {
  font-size: clamp(46px, 7vw, 10px);
  }
  
  .digital-sub-text {
  font-size: clamp(20px, 1.5vw, 24px);
 margin-top: 5px;
 letter-spacing: 0.2em;}



}

/* =====================================
   SPEAKER ACTION BUTTONS (Brand Green)
===================================== */
.spx-actions {
  display: flex;
  justify-content: center;
  gap: 24px;
  margin-top: 80px;
  margin-bottom: 40px;
  flex-wrap: wrap;
}

.spx-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 18px 32px;
  font-family: 'Poppins', sans-serif;
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  text-decoration: none;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  min-width: 340px;
  text-align: center;
  
  /* NO BORDER RADIUS (Sharp Corners) */
  border-radius: 0; 
}

/* --- Primary Button (Filled) --- */
.spx-btn-primary {
  background-color: #079449; 
  color: #ffffff;
  border: 1px solid #1aa35a;
  /* Green Shadow */
  box-shadow: 0 4px 12px rgba(26, 163, 90, 0.25);
}

.spx-btn-primary:hover {
  background-color: #148549; /* Slightly darker green */
  border-color: #148549;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(26, 163, 90, 0.35);
  color: #ffffff;
}

/* --- Secondary Button (Outline) --- */
.spx-btn-secondary {
  background-color: transparent;
  color: #1aa35a; /* Text matches primary bg */
  border: 1px solid #1aa35a;
}

.spx-btn-secondary:hover {
  background-color: rgba(26, 163, 90, 0.04); /* Very subtle green tint */
  transform: translateY(-2px);
  color: #148549;
  border-color: #148549;
  box-shadow: 0 4px 12px rgba(26, 163, 90, 0.1);
}

/* --- Mobile Responsiveness --- */
@media (max-width: 768px) {
  .spx-actions {
    flex-direction: column;
    padding: 0 20px;
    gap: 16px;
  }
  
  .spx-btn {
    width: 100%;
    min-width: 100%;
  }
}



/* =========================================
   LUX STRIP: SITE-ALIGNED TECH AD
   ========================================= */

.lux-strip {
  position: relative;
  overflow: visible;
  isolation: isolate;
  margin: clamp(72px, 8vw, 130px) 0 clamp(86px, 8vw, 130px);
  padding: clamp(10px, 1.15vw, 16px) clamp(12px, 2vw, 30px);
  background: linear-gradient(180deg, rgba(8, 13, 11, 0.94), rgba(4, 7, 5, 0.97));
  border-top: 1px solid rgba(74, 222, 128, 0.22);
  border-bottom: 1px solid rgba(74, 222, 128, 0.14);
  box-shadow: none;
  font-family: 'Poppins', sans-serif;
}

.lux-strip::before {
  content: none;
}

.lux-backdrop {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(circle at 8% 45%, rgba(74, 222, 128, 0.22), rgba(74, 222, 128, 0) 48%),
    radial-gradient(circle at 100% 0%, rgba(74, 222, 128, 0.14), rgba(74, 222, 128, 0) 40%),
    linear-gradient(120deg, rgba(3, 9, 5, 0.96), rgba(6, 24, 13, 0.82) 54%, rgba(2, 6, 3, 0.97));
  animation: lux-backdrop-shift 14s ease-in-out infinite alternate;
}

.lux-backdrop::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("../../assets/images/circuit2.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.3;
  mix-blend-mode: normal;
  pointer-events: none;
}

.lux-container {
  position: relative;
  z-index: 2;
  max-width: 1320px;
  margin: 0 auto;
}

.lux-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(360px, 35vw, 580px);
  gap: clamp(10px, 2vw, 30px);
  align-items: end;
  min-height: clamp(100px, 8.5vw, 132px);
}

.lux-content {
  position: relative;
  z-index: 4;
  padding: 4px 0 8px;
  animation: lux-content-in 0.65s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.lux-title {
  margin: 0 0 7px;
  font-size: clamp(22px, 2.15vw, 34px);
  line-height: 1.13;
  letter-spacing: -0.45px;
  color: #f2fff7;
  text-wrap: balance;
}

.lux-highlight {
  color: #4ade80;
  font-weight: 700;
}

.lux-desc {
  margin: 0 0 11px;
  max-width: 610px;
  font-family: 'Inter', sans-serif;
  font-size: clamp(12px, 0.95vw, 15px);
  line-height: 1.5;
  color: rgba(239, 248, 243, 0.8);
}

.lux-btn {
  position: relative;
  display: inline-flex;
  align-items: stretch;
  min-width: 278px;
  height: 44px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 0;
  background: #040604;
  color: #ffffff !important;
  text-decoration: none;
  overflow: hidden;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.54), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.lux-btn-text {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 16px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  white-space: nowrap;
  color: #ffffff !important;
}

.lux-btn-icon {
  width: 44px;
  min-width: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #4ade80;
  color: #0a4f00;
}

.lux-btn:hover {
  transform: translateY(-2px);
  border-color: #4ade80;
  box-shadow: 0 18px 30px rgba(0, 0, 0, 0.62), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  color: #ffffff !important;
}

.lux-btn:hover .lux-btn-text {
  color: #ffffff !important;
}

.lux-btn:hover .lux-btn-icon svg {
  animation: lux-cta-arrow 1s linear infinite;
}

.lux-visual {
  position: relative;
  z-index: 4;
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  perspective: 500px;
  transform-style: preserve-3d;
  height: 0;
  animation: lux-visual-in 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.lux-img-mask {
  position: absolute;
  right: 0;
  bottom: -80px;
  width: clamp(390px, 36vw, 620px);
  height: clamp(250px, 23.5vw, 350px);
  border-radius: 14px;
  overflow: hidden;
  transform: translateY(0) rotateY(-8deg) rotateX(2deg);
  animation: lux-card-float 6.2s ease-in-out infinite;
}


.lux-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;

}

.lux-strip:hover .lux-img-mask {
  transform: translateY(-10px) rotateY(-8deg) rotateX(2deg);
}

@keyframes lux-line-pulse {
  0%, 100% { opacity: 0.35; }
  50% { opacity: 0.92; }
}

@keyframes lux-backdrop-shift {
  0% { transform: translate3d(0, 0, 0) scale(1); }
  100% { transform: translate3d(-1.3%, -1%, 0) scale(1.03); }
}

@keyframes lux-content-in {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes lux-visual-in {
  from {
    opacity: 0;
    transform: translateX(28px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes lux-card-float {
  0%, 100% { transform: translateY(0) rotateY(-8deg) rotateX(2deg); }
  50% { transform: translateY(-12px) rotateY(-8deg) rotateX(2deg); }
}

@keyframes lux-cta-arrow {
  0% { opacity: 0; transform: translateX(-4px); }
  50% { opacity: 1; transform: translateX(0); }
  100% { opacity: 0; transform: translateX(4px); }
}

@media (max-width: 980px) {
  .lux-strip {
    overflow: hidden;
    margin-bottom: 0;
    padding: 16px 12px;
  }

  .lux-grid {
    grid-template-columns: 1fr;
    min-height: auto;
    text-align: center;
    gap: 10px;
  }

  .lux-desc {
    margin: 0 auto 13px;
    max-width: 620px;
  }

  .lux-btn {
    min-width: 0;
  }

  .lux-visual {
    justify-content: center;
    height: auto;
    margin-top: 2px;
  }

  .lux-img-mask {
    position: relative;
    right: auto;
    bottom: auto;
    width: min(100%, 760px);
    height: 220px;
    transform: none;
    animation: none;
    box-shadow: 0 20px 35px rgba(0, 0, 0, 0.5);
  }

  .lux-strip:hover .lux-img-mask {
    transform: none;
  }
}

@media (max-width: 560px) {
  .lux-strip {
    padding: 14px 10px;
  }

  .lux-title {
    font-size: clamp(21px, 6vw, 27px);
  }

  .lux-btn {
    width: 100%;
  }

  .lux-btn-text {
    font-size: 11px;
    letter-spacing: 0.8px;
  }

  .lux-img-mask {
    height: 180px;
    border-radius: 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lux-strip::before,
  .lux-backdrop,
  .lux-content,
  .lux-visual,
  .lux-img-mask {
    animation: none !important;
  }

  .lux-btn,
  .lux-btn-icon svg,
  .lux-strip:hover .lux-img-mask {
    transition: none !important;
    animation: none !important;
  }
}

/* =====================================================
   GIVEAWAY FLOATING CARD (LEFT CORNER)
===================================================== */
.giveaway-float {
  left: 30px;
  right: auto;
}

.giveaway-trigger {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: auto;
  width: 64px;
  height: 64px;
  padding: 12px;
  background: linear-gradient(135deg, #02794b, #02794b);
  box-shadow: 0 8px 24px rgba(55, 64, 168, 0.42);
}

.giveaway-trigger .gift-icon {
  width: 34px;
  height: 34px;
}

.giveaway-float .why-conference-trigger::after {
  left: 20px;
  right: auto;
  border-top-color: #02784b;
}

.giveaway-float .why-conference-card {
  left: 0;
  right: auto;
  width: min(340px, calc(100vw - 24px));
  padding: 12px;
  border-color: rgba(55, 64, 168, 0.2);
}

.giveaway-card img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 14px;
}

.giveaway-float:hover .why-conference-icon .gift-icon {
  transform: rotate(-6deg) scale(1.12);
  animation: gift-wiggle 0.9s ease-in-out infinite;
  filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.65));
}

.giveaway-float:hover .giveaway-trigger {
  background: linear-gradient(135deg, #02794b, #02794b);
  box-shadow: 0 12px 32px rgba(55, 64, 168, 0.52);
}

.giveaway-float:hover .giveaway-trigger::after {
  border-top-color: #02784b;
}

@keyframes gift-wiggle {

  0%,
  100% {
    transform: rotate(-6deg) scale(1.12);
  }

  25% {
    transform: rotate(6deg) scale(1.12);
  }

  50% {
    transform: rotate(-3deg) scale(1.12);
  }

  75% {
    transform: rotate(3deg) scale(1.12);
  }
}

@media (max-width: 1024px) {
  .giveaway-float {
    left: 25px;
    right: auto;
  }
}

@media (max-width: 768px) {
  .giveaway-float {
    left: 20px;
    right: auto;
  }

  .giveaway-trigger {
    width: 56px;
    height: 56px;
    padding: 10px;
  }

  .giveaway-trigger .gift-icon {
    width: 30px;
    height: 30px;
  }

  .giveaway-float .why-conference-trigger::after {
    left: 16px;
    right: auto;
  }
}

@media (max-width: 576px) {
  .giveaway-float {
    left: 15px;
    right: auto;
  }
}

@media (max-width: 480px) {
  .giveaway-float {
    left: 12px;
    right: auto;
  }

  .giveaway-float .why-conference-trigger::after {
    left: 14px;
    right: auto;
  }
}

@media (max-width: 360px) {
  .giveaway-float {
    left: 10px;
    right: auto;
  }
}

@media (max-height: 500px) and (orientation: landscape) {
  .giveaway-float {
    left: 15px;
    right: auto;
  }
}