/* Reset and base styles */
* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
}

body {
   font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
   line-height: 1.6;
   color: #05010c;
   background-color: #ffffff;
}

img {
   max-width: 100%;
   height: auto;
   display: block;
}

/* Layout components */
.container {
   width: 100%;
   max-width: 1162px;
   margin: 0 auto;
   padding-left: 16px;
   padding-right: 16px;
}

.hero-section {
   background-image: url('../images/img_landing_page_header_option_3.png');
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
   min-height: 400px;
   display: flex;
   align-items: flex-start;
   justify-content: flex-end;
   padding: 70px 52px;
}

.contact-btn {
   display: flex;
   align-items: center;
   gap: 14px;
   background-color: #434ee5;
   color: #ffffff;
   padding: 12px 40px 12px 62px;
   border-radius: 10px;
   text-decoration: none;
   font-size: 18px;
   font-weight: 500;

   transition: all 0.3s ease;
   position: relative;
}

.contact-btn:hover {
   background-color: #3b42d4;
   transform: translateY(-2px);
}

.contact-btn::before {
   content: '';
   width: 24px;
   height: 24px;
   background-image: url('../images/img_chatdots.svg');
   background-size: contain;
   background-repeat: no-repeat;
   position: absolute;
   left: 16px;
}

.main-content {
   margin-top: 90px;
}

.intro-section {
   display: block;
   gap: 36px;
   margin-bottom: 124px;
   padding: 0 50px;
   margin-top: 450px;
}

.intro-small-text {
   font-size: 14px;
   font-family: 'Poppins', sans-serif;
   font-weight: 400;
   color: #666666;
   margin-bottom: 10px;
}

.intro-text {
   font-size: 16px;
   font-family: 'Poppins', sans-serif;
   font-weight: 500;
   line-height: 28px;
   color: #05010c;
   margin-bottom: 24px;
}

.main-heading {

   color: #05010c;
   width: 88%;

   font-family: 'Inter', sans-serif;
   font-weight: 600;
   font-style: normal;
   font-size: 42px;
   line-height: 120%;
   letter-spacing: -0.02em;

}

.main-heading .highlight {
   color: #434ee5;
}

.vision-mission-section {
   display: flex;
   flex-direction: column;
   gap: 60px;
   margin-bottom: 76px;
}

.vision-card,
.mission-card,
.who-we-are-card {
   margin-top: 3rem;
   position: relative;
   border-radius: 40px;
   padding: 80px 56px;
   display: flex;
   align-items: center;
   gap: 24px;
   overflow: visible;
}

.vision-card {
   background: linear-gradient(90deg, #f5f0ff 0%, #f6f0ff00 100%);
}

.mission-card {
   background: linear-gradient(90deg, #eef3ff00 0%, #edf3ff 100%);
}

.who-we-are-card {
   background: linear-gradient(90deg, #f5f0ff 0%, #f6f0ff00 100%);
}

.card-content {
   flex: 1;
   display: flex;
   flex-direction: column;
   gap: 20px;
}

.card-title {
   font-size: 32px;
   font-weight: 600;
   line-height: 51px;
   color: #05010c;
}

.card-text {
   font-size: 16px;
   font-weight: 500;
   line-height: 28px;
   color: #000000;
}

.card-image {
   width: 200px;
   height: auto;
   flex-shrink: 0;
   margin-top: -120px;
   z-index: 10;
   position: relative;
}

.solutions-section {
   margin-top: 500px;
   margin-bottom: 420px;
}

.section-title {
   font-size: 32px;
   font-weight: 600;
   line-height: 51px;
   text-align: center;
   color: #05010c;
   margin-bottom: 76px;
}

.solutions-grid {
   display: grid;
   grid-template-columns: 1fr;
   gap: 20px;
}

.solution-card {
   border-radius: 40px;
   padding: 30px;
   display: flex;
   flex-direction: column;
   gap: 38px;
}

.solution-card.ai {
   background-color: #f5f5f5;
}

.solution-card.big-data {
   background: linear-gradient(180deg, #126e97 0%, #000000 100%);
   color: #ffffff;
}

.solution-card.process {
   background-color: #f5f5f5;
}

.solution-title {
   font-size: 24px;
   font-weight: 600;
   line-height: 38px;
}

.solution-text {
   font-size: 16px;
   font-weight: 500;
   line-height: 28px;
}

.big-data .solution-title {
   color: #f9f9f9;
}

.big-data .solution-text {
   color: #ffffff;
}

.success-stories-section {
   position: relative;
   background-image: url('../images/img_image_34.png');
   background-size: cover;
   background-position: center;
   background-color: #010207;
   padding: 106px 56px;

}

/* Slider Styles */
.slider-container {
   position: relative;
   overflow: hidden;
}



.success-card {
   background-color: #ffffff;
   border-radius: 40px;
   padding: 40px;
   margin-right: 20px;
   margin-left: 20px;
   position: relative;
   z-index: 2;
   box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}


.success-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-bottom: 38px;
   padding: 0 20px;
}

.success-category {
   font-size: 18px;
   font-weight: 600;
   color: #05010c;
}

.see-more-link {
   font-size: 18px;
   font-weight: 500;
   color: #434ee5;
   text-decoration: none;
}

.success-content {
   display: flex;
   flex-direction: column;
   gap: 38px;
}

.success-main {
   display: flex;
   flex-direction: column;
   gap: 20px;
}

.success-title {
   font-size: 20px;
   font-weight: 600;
   line-height: 36px;
   color: #05010c;
}

.success-image {
   width: 100%;
   max-width: 344px;
   height: 168px;
   object-fit: cover;
   border-radius: 30px;
}

.success-details {
   display: grid;
   grid-template-columns: 1fr;
   gap: 30px;
}

.detail-column {
   display: flex;
   flex-direction: column;
   gap: 20px;

   padding: 20px;
}

.detail-title {
   font-size: 18px;
   font-weight: 500;
   color: #434ee5;
}

.detail-text {
   font-size: 14px;
   font-weight: 500;
   line-height: 25px;
   color: #000000;
}



/* Slider Navigation */
.slider-nav {
   display: flex;
   justify-content: center;
   align-items: center;
   gap: 20px;
   margin-top: 20px;
   z-index: 3;
   position: relative;
}

.nav-btn {
   background-color: #434ee5;
   color: #ffffff;
   border: none;
   border-radius: 50%;
   width: 50px;
   height: 50px;
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
   font-size: 20px;
   transition: all 0.3s ease;
   box-shadow: 0px 4px 4px #888888ff;
}

.nav-btn:hover {
   background-color: #3b42d4;
   transform: translateY(-2px);
}

.nav-btn:disabled {
   background-color: #cccccc;
   cursor: not-allowed;
   transform: none;
}

.slider-wrapper {
   position: relative;
   overflow: hidden;
   display: flex;
   transition: transform 0.5s ease-in-out;
   width: 500%;
   /* 5 slides */
}

.slide {
   width: 20%;
   /* 100% / 5 slides */
   flex-shrink: 0;
   display: none;
   transition: opacity 0.5s ease-in-out;
}

.slide.active {
   display: block;
}

.slide-indicators {
   display: flex;
   justify-content: center;
   gap: 8px;
   margin-top: 10px;
   margin-bottom: -160px;
}


.indicator {
   width: 12px;
   height: 12px;
   border-radius: 50%;
   background-color: #cccccc;
   cursor: pointer;
   transition: all 0.3s ease;
}

.indicator.active {
   background-color: #434ee5;
   transform: scale(1.2);
}

.slider-wrapper {
   width: 100%;
}

.slider-container {
   overflow: visible;
}

.slider-container::after {
   content: '';
   position: absolute;
   bottom: -6px;
   left: 12%;
   width: 75%;
   height: 4rem;
   background-color: #cccccc80;
   border-radius: 2.5rem;
   backdrop-filter: blur(19px);
}

.slider-container::before {
   content: '';
   position: absolute;
   bottom: -40px;
   left: 22%;
   width: 56%;
   height: 4rem;
   background-color: #cccccc33;
   border-radius: 2.1rem;
   backdrop-filter: blur(19px);
}


.indicator {
   width: 12px;
   height: 12px;
   border-radius: 50%;
   background-color: #cccccc;
   cursor: pointer;
   transition: all 0.3s ease;
}

.indicator.active {
   background-color: #434ee5;
   transform: scale(1.2);
   padding-left: 12px;
   padding-right: 12px;
   border-radius: 9px;
}

.slide {
   width: 100%;
}


.countdown-arrow {
   margin-top: 65px;
   margin-left: 12rem;
}

.countdown-section {
   background-image: url('../images/img_image_34.png');
   background-size: cover;
   background-position: center;
   background-color: #010207;
   padding: 72px 20px;
   text-align: center;
   position: relative;
}

.countdown-content {
   max-width: 656px;
   margin: 0 auto;
   display: flex;
   flex-direction: column;
   gap: 32px;
   align-items: center;
}

.countdown-header {
   display: flex;
   flex-direction: column;
   gap: 16px;
   align-items: center;
}

.countdown-label {
   font-size: 18px;
   font-weight: 500;
   color: #09e4a8;
}

.countdown-title {
   font-size: 28px;
   font-weight: 600;
   line-height: 51px;
   color: #ffffff;
   text-align: center;
}

.countdown-timer {
   display: flex;
   gap: 10px;
   justify-content: center;
   align-items: center;
   flex-wrap: wrap;
}

.timer-unit {
   background-color: #ffffff2d;
   border-radius: 20px;
   padding: 12px;
   /*box-shadow: 0px 4px 14px #888888ff;*/
   display: flex;
   flex-direction: column;
   align-items: center;
   min-width: 80px;
}

.timer-number {
   font-size: 32px;
   font-weight: 600;
   color: #ffffff;
}

.timer-label {
   font-size: 13px;
   font-weight: 400;
   color: #948891;
   margin-top: -2px;
}

.timer-separator {
   font-size: 48px;
   font-weight: 600;
   color: #ffffff;
   align-self: flex-end;
   margin-bottom: 20px;
}


.cta-section-section {
   position: relative;
   background-color: #010207;
   margin-top: 20rem;
}

.partners-section {
   background: linear-gradient(0deg, #d9d9d97f 0%, #d9d9d97f 100%);
   padding: 84px 0;
   padding-top: 415px;
}

.partners-content {
   display: flex;
   flex-direction: column;
   gap: 70px;
   align-items: center;
}

.partners-title {
   font-size: 32px;
   font-weight: 600;
   text-align: center;
   color: #05010c;
}

.partners-logos {
   width: 100%;
   max-width: 1160px;
}

.cta-section {
   background-color: #010207;
   padding: 100px 100px;
   display: flex;
   justify-content: space-between;
   align-items: center;
   position: relative;
}

.cta-content {
   display: block;
   flex-direction: column;
   gap: 50px;
   align-items: flex-end;
   align-self: end;
   flex: 1;
   margin-bottom: -50px;
}

.cta-image {
   max-width: 400px;
   width: 100%;
}

.cta-button {
   background-color: #434ee5;
   color: #ffffff;
   padding: 12px 40px 12px 40px;
   border-radius: 10px;
   text-decoration: none;
   font-size: 22px;
   font-weight: 500;

   transition: all 0.3s ease;
}

.cta-button:hover {
   background-color: #3b42d4;
   transform: translateY(-2px);
}

.gradient-shape {
   position: absolute;
   right: 0;
   top: 50%;
   transform: translateY(-50%);
   width: 262px;
   height: 362px;
}

.footer-line {
   width: 100%;
   height: 1px;
   background-color: #e5e9ea;
   margin: 0 auto;
}

.footer {
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 22px 0;
   margin-top: 345px;
}

.footer-text {
   font-size: 18px;
   font-weight: 500;
   color: #22282b;
   text-decoration: none;


}


/* Interactive states */
.contact-btn:focus,
.cta-button:focus,
.see-more-link:focus {
   outline: 2px solid #434ee5;
   outline-offset: 2px;
}

.solution-card:hover {
   transform: translateY(-5px);
   transition: transform 0.3s ease;
}

/* Enhanced Mobile Responsive styles */
@media (max-width: 639px) {
   .container {
      padding-left: 16px;
      padding-right: 16px;
   }

   .hero-section {
      background-image: url('../images/Gitex_dubai landing_page2025.jpg');
      min-height: 87vh;
      padding: 15px 20px;
      justify-content: right;
      align-items: start;
   }

   .contact-btn {
      padding: 5px 20px 5px 50px;
      font-size: 16px;
      font-weight: 400;

   }

   .intro-section {
      flex-direction: column;
      gap: 24px;
      padding: 0 20px;
      margin-top: 350px;
   }

   .intro-text {
      order: 1;
      font-size: 14px;
   }

   .main-heading {
      order: 2;
      font-size: 28px;
      line-height: 32px;
      width: 100%;
   }

   .vision-mission-section {
      padding: 25px;
   }

   .vision-card,
   .mission-card,
   .who-we-are-card {
      flex-direction: column;
      padding: 40px 20px 60px 20px;
      text-align: center;
   }

   .card-image {
      width: 150px;
      margin-top: -80px;
      margin-bottom: 20px;
      order: -1;
   }

   .solutions-section {

      margin-top: 350px;
      padding: 20px;
   }

   .container {
      margin-top: -300px;
      padding: 0px;
   }

   .solutions-grid {
      grid-template-columns: 1fr;
      gap: 20px;
   }

   .solution-card {
      padding: 35px;
      gap: 20px;
   }

   .success-stories-section {
      padding: 60px 20px;
   }

   .success-details {
      grid-template-columns: 1fr;
      gap: 20px;
   }

   .success-main {
      flex-direction: column;
   }

   .success-image {
      margin-left: 0;
   }

   .countdown-arrow {
      margin: 2rem;
   }

   .countdown-section {
      padding: 40px 16px;
   }

   .countdown-timer {
      flex-direction: column;
      gap: 35px;
   }

   .timer-separator {
      display: none;
   }

   .timer-unit {
      min-width: 120px;
   }

   .partners-section {
      padding-top: 415px;
      padding-bottom: 0px;
   }

   .cta-section {

      flex-direction: column;
      gap: 30px;
      padding: 40px 20px;

   }

   .cta-content {
      align-items: start;
      text-align: center;
      margin: 0px;
      margin-right: 95px;

   }

   .cta-button {
      padding: 10px 30px;
   }

   .cta-image {
      width: 50%;
   }

   .gradient-shape {
      width: 131px;
      height: 181px;
   }

   .footer {
      flex-direction: column;
      gap: 10px;
      text-align: center;
   }
}

@media (min-width: 640px) {
   .container {
      padding-left: 24px;
      padding-right: 24px;
   }

   .intro-text {
      font-size: 18px;
   }

   .main-heading {
      font-size: 36px;
      line-height: 45px;
   }

   .card-title {
      font-size: 36px;
   }

   .card-text {
      font-size: 18px;
   }

   .solution-title {
      font-size: 28px;
   }

   .solution-text {
      font-size: 18px;
   }

   .countdown-title {
      font-size: 36px;
   }

   .timer-number {
      font-size: 36px;
   }

   .timer-separator {
      font-size: 56px;
   }
}

@media (min-width: 768px) {

   .container {
      padding-left: 32px;
      padding-right: 32px;
      margin-top: -350px;
      box-shadow: #000000;
   }

   .hero-section {
      min-height: 500px;
   }

   .intro-section {
      flex-direction: row;
      align-items: flex-start;
      gap: 50px;
   }

   .intro-text {
      flex: 1;
      order: 1;
   }

   .main-heading {
      font-size: 38px;
      line-height: 50px;
      flex: 2;
      order: 2;
   }

   .vision-card,
   .mission-card,
   .who-we-are-card {
      flex-direction: row-reverse;
      padding: 80px 106px 80px 56px;
      text-align: left;
   }

   .card-content {
      flex: 2;
   }

   .card-image {
      width: 280px;
      margin-top: -150px;
      order: initial;
   }

   .card-image-vis {
      margin-top: -185px;
   }

   .solutions-grid {
      grid-template-columns: repeat(3, 1fr);
   }

   .section-title {
      font-size: 42px;
   }

   .success-main {
      flex-direction: row;
      align-items: flex-start;
   }

   .success-title {
      font-size: 28px;
      flex: 1;
   }

   .success-image {
      flex-shrink: 0;
      margin-left: 40px;
   }

   .success-details {
      grid-template-columns: repeat(3, 1fr);
      gap: 50px;
   }

   .detail-text {
      font-size: 16px;
      margin-left: 15px;
   }

   .countdown-timer {
      flex-direction: row;
      gap: 20px;
   }

   .timer-separator {
      display: block;
   }

   .timer-unit {
      min-width: 100px;
   }

   .timer-number {
      font-size: 40px;
   }

   .timer-separator {
      font-size: 62px;
   }

   /*.cta-section {
            flex-direction: row;
            padding: 100px 180px 120px 290px;


         }*/

   .cta-content {
      align-items: flex-end;
   }

   .partners-title {
      font-size: 42px;
   }

   .footer {
      flex-direction: row;
   }
}

@media (min-width: 1024px) {

   .hero-section {
      min-height: 80vh;
   }

   .card-title {
      font-size: 42px;
   }

   .solution-title {
      font-size: 32px;
   }

   .countdown-title {
      font-size: 42px;
   }
}

@media (min-width: 1280px) {
   .hero-section {
      min-height: 87vh;
      padding: 70px 52px;
   }
}

@media (max-width: 1280px) {
   .hero-section {
      min-height: 80vh;

   }
}

@media (max-width: 640px) {
   .hero-section {
      min-height: 87vh;
   }
}



.bseit-partners {
   background-color: #fafafa;
   padding: 80px 0;
   height: auto !important;
   min-height: fit-content !important;
   max-height: none !important;
   overflow: visible !important;
}

.bseit-partners .container {
   max-width: 1200px;
   margin: 0 auto;
   padding: 0 20px;
   height: auto !important;
   min-height: fit-content !important;
   max-height: none !important;
}


.bseit-h2 {
   font-size: 2rem;
   font-weight: 700;
   text-align: center;
   margin-bottom: 40px;
   color: #22282b;
}

.bseit-partners__cards {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   gap: 30px;
}

.bseit-partners__card {

   border-radius: 20px;

   padding: 20px 30px;
   display: flex;
   align-items: center;
   justify-content: center;
   transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.bseit-partners__card:hover {
   transform: translateY(-5px);
   box-shadow: 0 12px 35px rgba(0, 0, 0, 0.12);
}

.bseit-partners__card img {
   max-width: 140px;
   max-height: 80px;
   object-fit: contain;
}

/* Sections spacing */
.bseit-partners__tech-partners,
.bseit-partners__cloud-partners {
   margin-bottom: 60px;
}

/* Responsive */
@media (max-width: 768px) {
   .bseit-partners__cards {
      gap: 20px;
   }

   .bseit-partners__card {
      padding: 15px 20px;
   }

   .bseit-partners__card img {
      max-width: 110px;
   }

   .bseit-h2 {
      font-size: 1.6rem;
   }
}