:root {
    --primary-color: #1f62cc;
    --primary-dark: #1d4ed8;
    --primary-light: #93c5fd;
}

.poppins-thin {
  font-family: "Poppins", system-ui;
  font-weight: 100;
  font-style: normal;
}

.poppins-extralight {
  font-family: "Poppins", system-ui;
  font-weight: 200;
  font-style: normal;
}

.poppins-light {
  font-family: "Poppins", system-ui;
  font-weight: 300;
  font-style: normal;
}

.poppins-regular {
  font-family: "Poppins", system-ui;
  font-weight: 400;
  font-style: normal;
}

.poppins-medium {
  font-family: "Poppins", system-ui;
  font-weight: 500;
  font-style: normal;
}

.poppins-semibold {
  font-family: "Poppins", system-ui;
  font-weight: 600;
  font-style: normal;
}

.poppins-bold {
  font-family: "Poppins", system-ui;
  font-weight: 700;
  font-style: normal;
}

.poppins-extrabold {
  font-family: "Poppins", system-ui;
  font-weight: 800;
  font-style: normal;
}

.poppins-black {
  font-family: "Poppins", system-ui;
  font-weight: 900;
  font-style: normal;
}

.poppins-thin-italic {
  font-family: "Poppins", system-ui;
  font-weight: 100;
  font-style: italic;
}

.poppins-extralight-italic {
  font-family: "Poppins", system-ui;
  font-weight: 200;
  font-style: italic;
}

.poppins-light-italic {
  font-family: "Poppins", system-ui;
  font-weight: 300;
  font-style: italic;
}

.poppins-regular-italic {
  font-family: "Poppins", system-ui;
  font-weight: 400;
  font-style: italic;
}

.poppins-medium-italic {
  font-family: "Poppins", system-ui;
  font-weight: 500;
  font-style: italic;
}

.poppins-semibold-italic {
  font-family: "Poppins", system-ui;
  font-weight: 600;
  font-style: italic;
}

.poppins-bold-italic {
  font-family: "Poppins", system-ui;
  font-weight: 700;
  font-style: italic;
}

.poppins-extrabold-italic {
  font-family: "Poppins", system-ui;
  font-weight: 800;
  font-style: italic;
}

.poppins-black-italic {
  font-family: "Poppins", system-ui;
  font-weight: 900;
  font-style: italic;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", system-ui;
  font-weight: 500;
  font-style: normal;
  scroll-behavior: smooth;
}
body {
  overflow-x: hidden;
}
nav  a{
  font-family: "Poppins", system-ui !important;
}
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  background-color: #fefefe;
  border-bottom: 1px solid #d1d1d1;
  height: 60px;
  position: fixed;
  font-family: "Poppins", system-ui !important;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 1000;
}

.logo img {
  height: 25px;
  margin-left: 40px; /* Adjust this according to your logo size */
}

.nav-menu {
  list-style: none;
  display: flex;
  justify-content: center;
  flex-grow: 1;
}

.nav-menu li {
  margin: 0 15px; /* Reduced margin */
  
}

.nav-menu a {
  text-decoration: none;
  color: #000;
  font-family: "Poppins", system-ui !important;

  font-size: 13px; /* Smaller font size */
  padding: 17px 0;
  position: relative; /* Position for underline effect */
}

.nav-menu a:hover {
  color: rgb(41, 7, 174); /* Blue color on hover */
}

.nav-menu a:hover::after {
  content: "";
  display: block;
  height: 2px; /* Height of the underline */
  position: absolute;
  left: 0;
  right: 0;
  bottom: -5px; /* Position the underline below the text */
}

.language {
  display: flex;
  align-items: center;
  font-size: 14px; /* Smaller font size */
  color: #333;
  margin-right: 40px;
  visibility: hidden;
}

.language .globe {
  margin-right: 8px;
  color: #000;
  font-size: 16px; /* Adjust globe icon size */
}

/* Media Query for smaller screens */
@media (max-width: 768px) {
  .nav-menu {
    display: none; /* Hide menu on smaller screens, can add mobile menu later */
  }

  .logo img {
    height: 30px;
  }

  .language {
    font-size: 12px; /* Adjusted for smaller screens */
  }
}

/* Submenu styles */
/* Submenu styles */
.submenu {
  display: none; /* Hide submenu by default */
  position: absolute;
  top: 60px; /* Position submenu directly below the parent item */
  left: 0;
  width: 100%; /* Make submenu the same width as the parent item */
  background-color: #fff;
  height: 4vh;
  justify-content: center;
  padding: 0;
  margin: 0;
  list-style: none;
  white-space: nowrap;
  z-index: 1000;
}

.submenu li {
  display: inline-block; /* Align submenu items horizontally */
  padding-top: 5px;
}

.submenu a {
  padding: 20px 15px;
  color: #000;
  text-decoration: none;
}
.submenu .has-submenu .submenu-blocks a {
  padding: 3px 15px;
  color: #000;
  text-decoration: none;
}

.has-submenu:hover > a,
.submenu a:hover {
  color: rgb(41, 7, 174); /* Blue color on hover */
}

/* Show submenu on hover */
.has-submenu:hover .submenu {
  display: flex; /* Display submenu on hover */
  padding-bottom: 5px;
}

/* CSS for submenu-blocks */
.submenu-blocks {
  display: none; /* Initially hidden */
  position: absolute;
  top: 100%; /* Position the blocks below the submenu */
  left: 0;
  background-color: #fff;
  padding: 10px;
  list-style: none;
  justify-content: center;
  z-index: 1000;
  width: 100%; /* Adjust the width as needed */
  flex-wrap: wrap; /* Allow items to wrap */
  border: 1px solid #ddd; /* Optional border for submenu blocks */
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1); /* Optional shadow */
}

/* Display submenu-blocks when hovering over the parent submenu item */
.has-submenu:hover > .submenu > .has-submenu:hover > .submenu-blocks {
  display: flex; /* Display submenu blocks as flex */
}

/* Styling each block item */
.block-item {
  width: 100px;
  height: 100px;
  background-color: #f8f8f8;
  border: 1px solid #ddd;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-radius: 10px;
  align-items: center;
  margin-right: 5px; /* Space between blocks */
  text-align: center;
  transition: box-shadow 0.3s ease; /* Smooth hover effect */
}
.submenu-blocks li {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}
.block-item img {
  max-width: 100%;
  max-height: 90px;
  transform: scale(1.1); /* Scale the image to 110% of its original size */
  margin-bottom: 5px; /* Space between image and anchor tag */
}
.block-item img:hover {
  transform: scale(1.2); /* Scale the image to 110% of its original size */
  transition: transform 1s ease; /* Smooth scaling transition */
}
.block-item a {
  color: #000;
  text-decoration: none;
}

.block-item a:hover {
  color: rgb(41, 7, 174); /* Change color on hover */
}

/* Hide the menu icon by default */
.menu-icon {
  display: none;
  font-size: 24px;
  cursor: pointer;
}

/* Language styles */
.language {
  display: flex;
  align-items: center;
}

@media (max-width: 1280px) {
  .navbar {
    height: 50px;
  }
  .logo img {
    height: 22px;
  }
}
/* Responsive styles for smaller screens */
@media (max-width: 768px) {
  /* Hide the full menu on smaller screens */
  .nav-menu {
    display: none;
    flex-direction: column;
    position: absolute;
    top: 60px;
    right: 0;
    width: 100%;
    background-color: #fefefe;
    text-align: center;
  }

  /* Display the menu icon */
  .menu-icon {
    display: block;
  }

  /* Hide the language icon on smaller screens */
  .language {
    display: none;
  }

  /* Show the menu when it's active (toggled) */
  .nav-menu.active {
    display: flex;
  }

  .nav-menu li {
    margin: 15px 0;
    text-align: center;
  }
  .submenu-blocks {
    margin-top: 20px;
  }
}

/* hero code here  */

/* Individual Slide Backgrounds */
#main-image {
  background-image: url("new/all\ file\ 2.2412.png");
}

#hermes-image {
  background-image: url("images/Redesign.png");

}

#standee-image {
  background-image: url("images2/sample/new standee LIT.1164.png");
  background-position: center top 60px;
}

#pocket-image {
  background-image: url("images2/sample/Pocket Device 17.png");
}

#t1-image {
  background-image: url("new/tap\ &\ pay.2433.png");
}

.hero-slider {
  position: relative;
  height: 100vh;
  width: 100%;
  overflow: hidden;
}

.slides {
  display: flex;
  transition: transform 0.5s ease-in-out; /* Smooth transition for slide change */
}

.slide {
  min-width: 100%;
  height: 100vh;
  background-size: cover;
  background-position: center;
  display: flex; /* Ensure the content is centered */
  align-items: center; /* Center the content vertically */
  position: relative; /* Make sure the position context is set */
}

.content {
  left: 5%;
  position: relative; /* Change to relative to stay in view */
  color: white;
  z-index: 1; /* Ensure content is above overlay */
}
#white-slide {
  color: black;
}

.content h1 {
  font-weight: 600;
  font-size: 65px;
  margin-bottom: 10px; /* Spacing below main title */
}

.content h2 {
  font-size: 20px; /* Smaller size for subtitle */
  margin-bottom: 20px; /* Spacing below subtitle */
}
.first-text {
  font-size: 55px;
}

.learn-more {
  margin-top: 20px; /* Margin from top */
  display: inline-block;
  color: white;
  text-decoration: none;
}

.navigation {
  position: absolute;
  top: 50%;
  width: 100%;
  display: flex;
  justify-content: space-between;
  transform: translateY(-50%);
}

.prev,
.next {
  background: transparent; /* Semi-transparent background */
  color: white;
  border: none;
  padding: 15px;
  cursor: pointer;
}
.prev:hover,
.next:hover {
  background-color: rgba(0, 0, 0, 0.5);
}

.indicators {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
}

.indicators span {
  height: 10px;
  width: 10px;
  background-color: white;
  border-radius: 50%;
  margin: 0 5px;
  opacity: 0.5; /* Slightly transparent */
  transition: opacity 0.3s;
}

.indicators .active {
  opacity: 1; /* Fully visible for active indicator */
}

/* Responsive Design for smaller screens */
/* for macbook  */
@media (max-width: 1600px) {
  .first-text {
    font-size: 40px !important;
  }
}
/* For tablets */
@media (max-width: 1024px) {
  .slide {
    height: 80vh; /* Adjust height for tablets */
  }

  .content h1 {
    font-size: 50px;
  }
  .hero-slider {
    height: auto;
  }

  .content h2 {
    font-size: 18px;
  }

  .learn-more {
    font-size: 16px;
  }
}

/* For smaller tablets and large phones */
@media (max-width: 768px) {
  .content h1 {
    font-size: 40px;
  }
  .hero-slider {
    height: 100vh;
  }
  .content h2 {
    font-size: 16px;
    text-align: center;
  }

  .learn-more {
    font-size: 14px;
  }

  .prev,
  .next {
    padding: 10px; /* Smaller buttons for smaller screens */
  }
  .slide {
    height: 100vh;
  }
  .hero-slider {
    height: 98vh;
  }
  /* Individual Slide Backgrounds */
  #main-image {
    background-image: url("images2/sample/main-mobile.png");
    background-size: cover;
  }

  #hermes-image {
    background-image: url("images2/sample/hermes-mobile.png");
  }

  #standee-image {
    background-image: url("images2/sample/standee-mobile.png");
    background-position: center top 60px;
  }

  #pocket-image {
    background-image: url("images2/sample/4-mobile.png");
  }

  #t1-image {
    background-image: url("images2/sample/6-mobile.png");
  }
  .content {
    left: 5%;
    /* position: relative; */
    color: white;
    height: 80%;
    display: flex;
    width: 100%;
    flex-direction: column;
    z-index: 1;
    align-items: center;
    /* justify-content: center; */
  }
  .first-text {
    text-align: center;
    margin-right: 52px;
    margin-left: 18px;
  }
}

/* For phones */
@media (max-width: 550px) {
  .slide {
    height: 98vh; /* Shorter height for mobile */
  }

  .content h1 {
    font-size: 30px;
    top: 0%;
  }

  .content h2 {
    font-size: 14px;
    text-align: center;
  }
  .hero-slider {
    height: auto;
  }
  .learn-more {
    font-size: 12px;
  }

  .navigation {
    display: none; /* Hide navigation buttons on small screens */
  }

  .indicators {
    bottom: 10px;
  }

  .indicators span {
    height: 8px;
    width: 8px;
  }

  .slide {
    height: 100vh;
  }
  .hero-slider {
    height: 98vh;
  }
  /* Individual Slide Backgrounds */
  #main-image {
    background-image: url("images2/sample/main-mobile.png");
    background-size: cover;
  }

  #hermes-image {
    background-image: url("images2/sample/hermes-mobile.png");
  }

  #standee-image {
    background-image: url("images2/sample/standee-mobile.png");
    background-position: center top 60px;
  }

  #pocket-image {
    background-image: url("images2/sample/4-mobile.png");
  }

  #t1-image {
    background-image: url("images2/sample/6-mobile.png");
  }
  .content {
    /* position: relative; */
    color: white;
    height: 80%;
    display: flex;
    width: 90%;
    flex-direction: column;
    z-index: 1;
    align-items: center;
    /* justify-content: center; */
  }
  .first-text {
    text-align: center;
    margin-right: 18px;
    margin-left: 18px;
  }
}

/* remote code here category */

.remote-block-container {
  width: 100%;
  height: auto;
  margin-top: 30px;
  display: flex;
  justify-content: space-evenly;
  margin-bottom: 30px;
}

.remote-child,
.remote-child-second {
  width: 45vw;
  height: 60vh;
  border-radius: 10px;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  text-align: center;
  transition: all 0.6s ease; /* Smooth transition for all properties */
}

.remote-child {
  background-image: url("images/herms.2457.png");
  background-repeat: no-repeat;
  background-position: 80% 80%; /* Moves right (60% from the left) and up (90% from the top) */
  background-color: #191919;
  background-size: 700px auto;
}

.remote-child-second {
  background-image: url("images2/113.png");
  background-size: 600px auto;
  background-repeat: no-repeat;
  background-position: center 70px;
  background-color: #efeff6;
}

/* Title styles */
.remote-child h1,
.remote-child-second h1 {
  color: white;
  font-weight: 600;
  font-size: 28px;
  position: absolute;
  top: 7%;
  left: 5%;
  z-index: 3;
}

.remote-child-second h1 {
  color: #000;
}

/* Paragraph styles */
.remote-child p,
.remote-child-second p,
.remote-child-third p,
.remote-child-four p {
  color: white;
  opacity: 0; /* Hidden initially */
  transition: opacity 0.3s ease; /* Smooth transition for visibility */
  z-index: 3;
  position: absolute;
  top: 50%; /* Vertically center */
  left: 50%; /* Horizontally center */
  transform: translate(-50%, -50%);
  font-size: 25px;
}

/* Anchor styles */
.remote-child a,
.remote-child-second a {
  color: white;
  text-decoration: none;
  font-size: 18px;
  position: absolute;
  bottom: 10%; /* Original position */
  left: 5%; /* Original position */
  z-index: 3; /* Ensure it's above the background */
  transition: transform 0.3s ease; /* Smooth transition */
  opacity: 1; /* Visible initially */
  margin-top: 40px;
}

.remote-child-second a {
  color: black;
}

/* On hover, paragraph becomes visible */
.remote-child:hover p,
.remote-child-second:hover p {
  opacity: 1; /* Show the p tag text on hover */
}

/* On hover, anchor moves below paragraph */
.remote-child:hover a,
.remote-child-second:hover a {
  opacity: 1;
  transform: translate(-50%, -10%); /* Center the a tag below the p */
  bottom: auto; /* Remove the original bottom positioning */
  left: 50%; /* Center horizontally */
  top: 60%; /* Position it below p */
}

/* Add a dark overlay effect on hover */
.remote-child::before,
.remote-child-second::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0); /* Initially no dark overlay */
  z-index: 2; /* Make sure the overlay is above the image but below text */
  transition: background-color 0.3s ease; /* Smooth transition */
}

.remote-child:hover::before,
.remote-child-second:hover::before {
  background-color: rgba(0, 0, 0, 0.459); /* Darken the overlay on hover */
}

#remote-child-four {
  background-image: url("images2/tap\ &\ pay.1103.png");
  background-color: #191919;
  background-size: 700px auto;

  background-position: center 50px; /* Aligns the image from the top */
  padding-top: 50px; /* Creates a space that looks like a margin */
}

#remote-child-third {
  background-image: url("images2/pocket.png");
  background-size: 800px auto;
  background-repeat: no-repeat;
  background-position: center top;
}

/* Color changes on hover for specific elements */
.remote-child-second:hover a,
.remote-child-second:hover h1,
#remote-child-third:hover a,
#remote-child-third:hover h1,
#remote-child-four:hover a {
  color: white;
}

/* Scale the background image on hover */
.remote-child:hover {
  transform: scale(
    1.05
  ); /* Slightly scale the block itself for smoother effect */
}

.remote-child:hover::before {
  transform: scale(1.05); /* Scale the overlay to match the block */
}

.remote-child-second:hover {
  transform: scale(
    1.05
  ); /* Slightly scale the block itself for smoother effect */
}

.remote-child-second:hover::before {
  transform: scale(1.05); /* Scale the overlay to match the block */
}
.remote-child-four a {
  margin-top: 60px;
}
/* Animation on scroll */
.scroll-animate {
  opacity: 1; /* Visible when animated */
  transform: translateY(0); /* Reset position */
}

@media (min-width: 480px) and (max-width: 768px) {
  /* Adjust the max-width as needed */
  .remote-block-container {
    display: block; /* Change to block display for small screens */
  }
  .remote-child {
    background-position: 40%;
  }
  .remote-child-second scroll-animate {
    width: auto; /* Full width for small screens */
  }

  .remote-child,
  .remote-child-second {
    width: auto;
    background-size: 500px;
    background-position: center;
    margin: 20px;
  }
  .remote-child p,
  .remote-child-second p,
  .remote-child-third p,
  .remote-child-four p {
    margin-bottom: 10px;
  }
}

@media (max-width: 480px) {
  .remote-child,
  .remote-child-second {
    width: auto;
    background-size: 450px;
    background-position: center;
    margin: 20px;
    height: 400px;
  }
  .remote-child p,
  .remote-child-second p {
    font-size: 18px;
    margin-bottom: 10px;
  }
  .remote-block-container {
    flex-direction: column;
  }
  #remote-child-four,
  #remote-child-third {
    background-position: center 35px;
    background-size: 400px;
  }
}
@media (min-width: 1024px) and (max-width: 1280px) {
  .remote-child,
  .remote-child-second {
    background-size: 400px;
    margin: 20px;
  }

  .remote-child p,
  .remote-child-second p {
    font-size: 18px;
    margin-bottom: 10px;
    top: 40%; /* Adjusting the top position */
  }

  #remote-child-four,
  #remote-child-third {
    background-position: center 40px;
    background-size: 400px; /* Adjust background size */
  }
}
@media (min-width: 1280px) and (max-width: 1600px) {
  .remote-child,
  .remote-child-second {
    background-size: 550px;
    margin: 20px;
  }

  .remote-child p,
  .remote-child-second p {
    font-size: 18px;
    margin-bottom: 10px;
    top: 40%; /* Adjusting the top position */
  }

  #remote-child-four,
  #remote-child-third {
    background-position: center 40px;
    background-size: 550px; /* Adjust background size */
  }
}

@media (min-width: 768px) and (max-width: 1024px) {
  .remote-block-container {
    display: block; /* Change to block display for small screens */
  }
  .remote-block-container {
    display: block; /* Change to block display for small screens */
  }
  /* .remote-child{
    background-position: 40%;
  } */
  .remote-child-second scroll-animate {
    width: auto; /* Full width for small screens */
  }

  .remote-child,
  .remote-child-second {
    width: auto;
    background-size: 700px;
    background-position: center;
    margin: 20px;
  }
  #remote-child-four,
  #remote-child-third {
    background-position: center 35px;
    background-size: 600px;
  }
  .remote-child p,
  .remote-child-second p {
    font-size: 20px;
    margin-bottom: 10px;
  }
}
/* 2nd block code here  */

.second-block-container {
  width: 100%;
  height: 90vh;
  margin-top: 30px;
  display: flex;
  justify-content: center;
}

.second-child {
  position: relative; /* Added this to enable absolute positioning of child elements */
  height: 98%;
  width: 96%;
  border-radius: 20px;
  background-image: url("https://www.bahrainedb.com/app/uploads/2021/01/pearl-trading-to-epayment.png");
  background-size: cover;
}

.second-child h1 {
  color: white;
  font-weight: 600;
  font-size: 45px;
  position: absolute; /* Changed to absolute positioning */
  top: 10%; /* 10% from the top */
  left: 5%; /* 10% from the left */
}
.second-child p {
  color: white;
  position: absolute; /* Changed to absolute positioning */
  top: 25%;
  left: 5%; /* 10% from the left */
}

.second-child a {
  color: white;
  text-decoration: none;
  font-size: 20px;
  position: absolute; /* Changed to absolute positioning */
  bottom: 10%; /* 10% from the bottom */
  left: 5%; /* 10% from the left */
}

/* 3rd block code here  */

.third-block-container {
  width: 100%;
  height: 90vh;
  margin-top: 30px;
  display: flex;
  justify-content: center;
}
.mobile {
  display: none;
}
.third-child {
  position: relative; /* Added this to enable absolute positioning of child elements */
  height: 98%;
  width: 96%;
  border-radius: 20px;
  background-image: url("images/5078151.jpg");
  background-size: cover;
}

.third-child h1 {
  color: white;
  font-weight: 600;
  font-size: 45px;
  position: absolute; /* Changed to absolute positioning */
  top: 10%; /* 10% from the top */
  left: 5%; /* 10% from the left */
}
.third-child p {
  color: white;
  position: absolute; /* Changed to absolute positioning */
  top: 25%;
  left: 5%; /* 10% from the left */
  font-size: larger;
}

.third-child a {
  color: white;
  text-decoration: none;
  font-size: 20px;
  position: absolute; /* Changed to absolute positioning */
  bottom: 10%; /* 10% from the bottom */
  left: 5%; /* 10% from the left */
}
/* Default styles for desktop (keep the line breaks) */
.line-break {
  display: inline;
}

@media (max-width: 1280px) {
  .third-child h1 {
    font-size: 25px; /* Smaller font for tablet */
  }

  .third-child p {
    font-size: 14px; /* Adjust paragraph size */
  }

  .third-child a {
    font-size: 18px; /* Adjust button/link size */
  }
}
/* Responsive design for tablets */
@media (max-width: 1024px) {
  .third-block-container {
    height: 80vh; /* Reduce height slightly */
  }

  .third-child h1 {
    font-size: 38px; /* Smaller font for tablet */
  }

  .third-child p {
    font-size: 18px; /* Adjust paragraph size */
  }

  .third-child a {
    font-size: 18px; /* Adjust button/link size */
  }
}
/* .desktop{
  display: none;
}
.mobile{
  display: block;
} */
.vid {
  display: none;
}

/* Responsive design for small tablets and large phones */
@media (max-width: 768px) {
  .third-block-container {
    height: 75vh; /* Reduce height more */
    margin: 20px;
  }

  .third-child {
    width: 90%; /* Reduce width slightly for smaller devices */
  }

  .third-child h1 {
    font-size: 32px; /* Further reduce font size */
  }

  .third-child p {
    font-size: 16px;
  }
  .vid {
    display: none;
  }
  /* .desktop{
    display: none;
  }
  .mobile{
    display: block;
  } */
  .third-child a {
    font-size: 16px;
  }
}

/* Responsive design for phones */
@media (max-width: 603px) {
  .third-block-container {
    height: 70vh; /* Further reduce height */
  }
  .vid {
    display: none;
  }
  .desktop {
    display: none;
  }
  .mobile {
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
  }
  .third-child {
    width: 100%; /* Take full width on small screens */
    padding: 10px;
  }

  .third-child h1 {
    font-size: 28px; /* Make the title smaller */
  }

  .third-child p {
    font-size: 14px; /* Adjust paragraph font size */
    top: 30%; /* Adjust position of paragraph */
  }

  .third-child a {
    font-size: 14px; /* Make button smaller */
    bottom: 8%; /* Adjust position of the button */
  }
}

/* partners code here  */
.parent-container {
  display: flex;
  justify-content: center;
  padding-top: 200px;
  background-color: #f1f2f6;
  align-items: center;
  height: 100vh; /* Full viewport height */
}

.parent-container .part-container {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
}

.parent-container .title {
  font-size: 50px;
  color: black;
  position: relative;
  display: inline-block;
  margin-bottom: 20px;
}

.parent-container .title::after {
  content: "";
  display: block;
  width: 100%;
  height: 3px;
  background-color: #f78336;
  position: absolute;
  left: 0;
  bottom: -5px;
}
.partners {
  height: 720px;
  width: 1280px;
}

.partners img {
  width: 100%;
}

/* 4th block code here  */

/* 4th block code here  */
.fourth-block-container {
  width: 100%;
  height: 70vh;
  margin-top: 30px;
  display: flex;
  justify-content: space-evenly;
}

.fourth-child,
.fourth-child-second {
  width: 45vw;
  height: 60vh;
  border-radius: 10px;
  background: #191919;
}

.fourth-child {
  background-image: url("https://img.freepik.com/premium-vector/abstract-health-medical-science-healthcare-icon_36402-275.jpg");
  background-size: cover;
  position: relative; /* Make this relative to position children */
}

.fourth-child h1 {
  color: white;
  font-weight: 600;
  font-size: 28px;
  position: absolute;
  top: 10%; /* 10% from the top */
  left: 5%; /* 5% from the left */
}

.fourth-child p {
  color: white; /* Add color to the description */
  position: absolute; /* Position it relative to the parent */
  top: 25%; /* Adjust top position as needed */
  left: 5%; /* 5% from the left */
}
.fourth-child a {
  color: white;
  text-decoration: none;
  font-size: 18px;
  position: absolute; /* Changed to absolute positioning */
  bottom: 10%; /* 10% from the bottom */
  left: 5%; /* 10% from the left */
}
.fourth-child-second {
  position: relative; /* Make this relative to position children */
  height: 60vh; /* Match the height as needed */
}

.video-container {
  position: relative;
  width: 100%;
  height: 100%;
}

video {
  width: 100%;
  height: 100%;
  border-radius: 10px;
  object-fit: cover; /* Cover the entire area */
}

.play-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 50px; /* Adjust size as needed */
  color: white; /* Change to your preferred color */
  cursor: pointer;
}

.fourth-child-second h1 {
  position: absolute; /* Position it absolutely within the parent */
  top: 10%; /* Adjust as needed */
  left: 5%; /* Adjust as needed */
  color: white; /* Make it visible against the video */
  font-size: 45px; /* Adjust size as needed */
  z-index: 2; /* Ensure it's above the video */
}
/* Responsive styles */

@media (max-width: 1024px) {
  .fourth-child,
  .fourth-child-second {
    width: 100%;
    min-height: 450px;
    border-radius: 10px;
    margin: 20px;
  }
}
@media (max-width: 768px) {
  .fourth-block-container {
    flex-direction: column;
    height: auto;
    align-items: center;
    justify-content: center;
  }

  .fourth-child,
  .fourth-child-second {
    width: 90%;
    min-height: 300px;
    margin: 10px 0;
  }

  .lit-video-container {
    position: relative;
    width: 100%;
    height: 100%;
  }

  .lit-video-container video {
    width: 100%;
    height: 100%;
    position: relative;
    top: 0;
    left: 0;
    transform: none;
    object-fit: cover;
  }

  .fourth-child h1 {
    font-size: 24px; /* Smaller font size for headings */
  }

  .fourth-child p {
    font-size: 16px; /* Smaller font size for paragraphs */
  }

  .fourth-child a {
    font-size: 16px; /* Smaller font size for links */
  }

  .fourth-child-second h1 {
    font-size: 24px; /* Reduce size if you have a heading in the second block */
  }
}

/* news code here  */

.news {
  background-color: #f1f2f6;
  width: 100%;
  padding-left: 50px;
  padding-top: 50px;
  padding-bottom: 50px;
  font-size: 30px;
  font-weight: 600;
}

.parent-block {
  display: flex;
  flex-wrap: wrap;
  background-color: #f1f2f6;
  justify-content: space-between;
  padding-right: 30px;
  padding-left: 30px;
}

.child-block {
  width: calc(33.33% - 20px); /* 3 blocks in a row with margin */
  margin-bottom: 20px; /* Space between rows */
  border-radius: 15px; /* Card corner radius */
  overflow: hidden; /* Hide overflow for scaling effect */
  position: relative; /* For positioning child elements */
}

.block1,
.block3,
.block6 {
  height: 60vh; /* Height for blocks 1, 3, and 6 */
}

.block2 {
  height: 60vh; /* Height for block 2 */
}

.block4 {
  height: 60vh; /* Height for block 4 */
}

.block5 {
  height: 50vh; /* Height for block 5 */
}

.image-container {
  height: 80%; /* 80% height for image */
  overflow: hidden; /* Hide overflow for scaling effect */
  transition: transform 0.3s ease; /* Smooth scale transition */
}

.image-container img {
  width: 100%; /* Full width */
  height: 105%; /* Full height */
  object-fit: cover; /* Cover the area */
  transition: transform 0.3s ease; /* Smooth scale transition */
}

.child-block:hover .image-container img {
  transform: scale(1.03); /* Scale up on hover */
}

.text-container {
  height: 20%; /* 20% height for text */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px; /* Padding for text */
  background-color: white; /* Text color */
  text-align: center; /* Center text */
}

.text-container a {
  text-decoration: none;
  color: black;
}

.news-section {
  height: 120vh;
  background-color: #f1f2f6;
}
@media (max-width: 768px) {
  .parent-block {
    flex-direction: column; /* Stack blocks vertically */
    align-items: center; /* Center align blocks */
  }

  .child-block {
    width: 90%; /* Full width for each block */
    margin-bottom: 20px; /* Space between blocks */
  }
}

/* vision code here  */

.vision-goal {
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;
  height: 50vh;
  flex-direction: column;
  /* margin-top: 200px;
  margin-bottom: 15px; */
  
}

.vision-goal h1 {
  font-size: 4.5rem;
  text-align: center;
  line-height: 1.2;
  color: #191919;
}

.vision-goal button {
  background-color: black;
  color: white;
  padding: 15px 30px;
  border: none;
  border-radius: 50px;
  margin-top: 40px;
  cursor: pointer;
  font-size: 1.2rem;
}

.vision-goal button:hover {
  opacity: 0.85;
}
@media (max-width: 768px) {
  .vision-goal h1 {
    font-size: 2.5rem; /* Reduce font size for smaller screens */
    line-height: 1.3; /* Adjust line height if needed */
  }

  .vision-goal button {
    padding: 10px 20px; /* Reduce padding for the button */
    font-size: 1rem; /* Adjust font size */
  }
  .vision-goal {
    height: auto;
    padding: 30px;
  }
}

/* tips code here 4 block code  */
.tips-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #000;
  color: white;
  text-align: center;
  height: 100vh;
  padding: 0 50px;
}
.block h1 {
  color: #000;
  margin-top: 10px;
  background: transparent;
  position: absolute;
  left: 5%;
  z-index: 3;
  font-size: 1.2em;
}
.left-section {
  width: 50%;
  text-align: left;
}

.text-content h1 {
  font-size: 2.8em;
  margin-bottom: 20px;
  font-weight: 400;
}

.discover-btn {
  background-color: white;
  color: black;
  padding: 10px 20px;
  border: none;
  border-radius: 30px;
  cursor: pointer;
  margin-top: 40px;
  font-size: 1.2em;
}

.right-section {
  width: 50%;
  display: flex;
  justify-content: center;
}

.blocks {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* Create a 2x2 grid */
  gap: 40px;
  justify-content: center;
}

.block {
  position: relative;
  overflow: hidden;
  background-color: #f6f8fc;
  width: 100%;
  max-width: 300px;
  border-radius: 15px;
  max-height: 200px;
  border: 1px solid white;
  text-align: center;
}

.block img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease, filter 0.3s ease; /* Smooth transition on hover */
}

.block p {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 1.1em;
  width: 100%;
  margin: 0;
  color: white;
  opacity: 0; /* Hidden by default */
  z-index: 1; /* Keeps text on top of the image */
  transition: opacity 0.3s ease; /* Smooth transition for text */
}

.block::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0); /* Transparent by default */
  transition: background 0.3s ease; /* Smooth transition for overlay */
}

.block:hover img {
  transform: scale(1.1); /* Scale image on hover */
}

.block:hover::after {
  background: rgba(0, 0, 0, 0.5); /* Darkens the image on hover */
}

.block:hover p {
  opacity: 1; /* Show the text on hover */
}
.block:hover h1 {
  color: white; /* Show the text on hover */
  top: 0;
  left: 2%;
}

/* Responsive styles */
@media (max-width: 1545px) {
  .tips-section {
    padding: 50px;
    margin: 40px;
    border-radius: 10px;
    height: 70vh;
  }
  .tips-section .text-content h1 {
    font-size: 2rem;
    margin-right: 20px;
  }
}
@media (max-width: 1024px) {
  .tips-section {
    padding: 50px;
    margin: 20px;
    border-radius: 10px;
    height: auto;
  }
  .tips-section .text-content h1 {
    font-size: 1.2rem;
    margin-right: 20px;
  }
}
@media (max-width: 768px) {
  .tips-section {
    flex-direction: column; /* Stack elements vertically */
    height: auto; /* Allow height to adjust based on content */
    padding: 20px; /* Adjust padding */
  }

  .left-section {
    width: 100%; /* Full width for left section */
    text-align: center; /* Center text */
    margin-bottom: 20px; /* Add margin for spacing */
  }

  .right-section {
    width: 100%; /* Full width for right section */
    display: block; /* Change to block for stacking */
  }

  .blocks {
    grid-template-columns: 1fr; /* Change grid to 1 column */
    gap: 20px; /* Adjust gap */
  }

  .block {
    max-width: 100%; /* Full width for blocks */
    max-height: 350px; /* Remove max-height restriction */
  }

  .text-content h1 {
    font-size: 2em; /* Reduce font size for smaller screens */
  }

  .discover-btn {
    font-size: 1em; /* Adjust button font size */
    padding: 8px 16px; /* Adjust button padding */
  }
}
/* footer coder here  */

.footer {
  background-color: #1c1e22;
  color: #fff;
  padding: 40px 0 0 0;
  font-family: Arial, sans-serif;
}

.footer-content {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  max-width: 1400px;
  margin: 0 auto;
  padding: 10px;
}

.footer-column {
  flex: 1;
  min-width: 150px;
  margin-bottom: 20px;
}

.footer-column h3 {
  margin-bottom: 15px;
  font-size: 16px;
}
.footer-column ul {
  list-style-type: none;
  padding: 0;
}

.footer-column ul li {
  margin-bottom: 20px; /* Space between list items */
}

.footer-column ul li a {
  color: rgb(216, 216, 216);
  text-decoration: none;
  font-size: 14px;
  transition: color 0.3s ease, transform 0.3s ease; /* Smooth transition for color and scale */
  display: inline-block; /* Allow scaling effect */
}

.footer-column ul li a:hover {
  color: white; /* Change color on hover */
  transform: scale(1.2); /* Scale effect on hover */
}

.footer-column ul li a:hover {
  text-decoration: underline;
}

.footer-column .social-icons {
  display: flex;
}

.footer-column .social-icons a {
  margin-right: 10px;
}

.footer-column .social-icons img {
  width: 24px;
  height: 24px;
}

.footer-bottom {
  background-color: #004b9b;
  text-align: center;
  padding: 10px;
  font-size: 14px;
}

.footer-bottom a {
  color: #fff;
  text-decoration: none;
}

.footer-bottom a:hover {
  text-decoration: underline;
}

/* Responsive Styles */
@media (max-width: 768px) {
  .footer-content {
    flex-direction: column; /* Stack columns vertically */
    align-items: center; /* Center items */
  }

  .footer-column {
    text-align: center; /* Center text in columns */
    margin-bottom: 15px; /* Adjust spacing between columns */
  }
  .footer-column .social-icons {
    display: flex;
    justify-content: center;
}
}
@media (max-width: 480px){
  .footer-column .social-icons {
    display: flex;
    justify-content: center !important;
}
}

/* scroll bar code here from bottom to top  */
#progress {
  position: fixed;
  bottom: 20px;
  right: 10px;
  height: 70px;
  width: 70px;
  display: none;
  place-items: center;
  border-radius: 50%;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  z-index: 10;
}
#progress-value {
  display: block;
  height: calc(100% - 15px);
  width: calc(100% - 15px);
  background-color: #ffffff;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 35px;
  color: #001a2e;
}
html {
  scroll-behavior: smooth;
}

/* text scroll code here  */
/* video code here  */

section.vid video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

section.vid {
  height: 1800px;
}

section.vid div.holder {
  position: sticky;
  top: 0;
}

#footer2{
  display: none;
}


.footer-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
}

.footer-content {
  display: flex;
  width: 100%;
  justify-content: space-between;
  max-width: 1200px;
  flex-wrap: wrap; /* Allows wrapping for smaller screens */
}

.left-footer {
  flex: 1;
  margin-bottom: 20px;
}

.right-footer {
  display: flex;
  flex-direction: column;
  gap: 20px;
  flex: 1;
}

.footer-follow {
  text-align: center;
  margin-top: 20px;
}

.footer-column h3 {
  font-size: 18px;
  margin-bottom: 10px;
}

.footer-column ul {
  list-style: none;
  padding: 0;
}

.footer-column ul li a {
  text-decoration: none;
  color: #c5c4c4;
}

.social-icons a img {
  width: 24px;
  height: 24px;
  margin: 0 10px;
}

/* Media query for screens up to 768px */
@media (max-width: 768px) {
  .footer-content {
    flex-direction: row;
    align-items: flex-start;
  }
  #footer1{
    display: none;
  }
  #footer2{
    display: block;
  }
  .right-footer {
      width: 100%;
      flex-direction: row;
      justify-content: space-between;
      margin-bottom: 20px;
  }

  .footer-follow {
      margin-top: 10px;
      order: 3;
  }
}

/* Media query for screens up to 480px */
@media (max-width: 480px) {
  .right-footer {
      flex-direction: column;
      gap: 20px;
  }
  .footer-follow h3{
    margin-bottom: 20px;
  }
}

/* Loader */
.loader-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: white;
    background-image: 
        radial-gradient(circle at 25% 25%, rgba(31, 98, 204, 0.02) 0%, transparent 50%),
        radial-gradient(circle at 75% 75%, rgba(31, 98, 204, 0.02) 0%, transparent 50%);
    z-index: 9999;
    transition: opacity 0.6s cubic-bezier(0.165, 0.84, 0.44, 1), visibility 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.loader {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    transform: translateY(0);
    transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1);
}

.loader-logo {
    position: relative;
    width: 150px;
    height: 150px;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: visible;
}

.loader img {
    width: 100%;
    height: auto;
    z-index: 2;
    transform-origin: center;
    animation: float 3s infinite ease-in-out;
    filter: drop-shadow(0 8px 30px rgba(31, 98, 204, 0.25));
}

/* Modern gradient background */
.loader::before {
    content: '';
    position: absolute;
    width: 180px;
    height: 180px;
    background: linear-gradient(135deg, rgba(31, 98, 204, 0.05) 0%, rgba(59, 130, 246, 0.1) 100%);
    border-radius: 50%;
    z-index: 0;
    animation: pulse-modern 4s infinite cubic-bezier(0.455, 0.03, 0.515, 0.955);
}

/* Smooth circular loader */
.loader-spinner {
    position: absolute;
    width: 280px;
    height: 280px;
    transform-origin: center;
    border-radius: 50%;
    box-sizing: border-box;
    border: 1px solid rgba(31, 98, 204, 0.08);
    z-index: 1;
}

.loader-spinner::before {
    content: '';
    position: absolute;
    top: -3px;
    left: -3px;
    width: calc(100% + 6px);
    height: calc(100% + 6px);
    border-radius: 50%;
    border: 3px solid transparent;
    border-top-color: var(--primary-color);
    border-right-color: var(--primary-color);
    box-shadow: 0 0 12px rgba(31, 98, 204, 0.4);
    animation: rotate 2s infinite ease-in-out;
    box-sizing: border-box;
}

.loader-spinner::after {
    content: '';
    position: absolute;
    top: 15px;
    left: 15px;
    right: 15px;
    bottom: 15px;
    border-radius: 50%;
    border: 3px solid transparent;
    border-left-color: var(--primary-color);
    border-bottom-color: var(--primary-color);
    opacity: 0.8;
    box-sizing: border-box;
    animation: rotate-reverse 3s infinite cubic-bezier(0.5, 0.1, 0.5, 0.9);
}

/* Animated progress bar - exactly 3 seconds */
.loader-progress {
    position: absolute;
    bottom: -20px;
    left: 50%;
    transform: translateX(-50%);
    width: 120px;
    height: 2px;
    background: rgba(31, 98, 204, 0.1);
    border-radius: 3px;
    overflow: hidden;
    z-index: 10;
    box-shadow: 0 1px 6px rgba(31, 98, 204, 0.1);
}

.loader-progress::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 0;
    background: var(--primary-color);
    animation: loading 3s 1 cubic-bezier(0.09, 0.25, 0.15, 1);
    animation-fill-mode: forwards;
}

/* Modern animations */
@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

@keyframes pulse-modern {
    0%, 100% { transform: scale(1); opacity: 0.5; }
    50% { transform: scale(1.1); opacity: 0.8; }
}

@keyframes loading {
    0% { width: 0; }
    100% { width: 100%; }
}

@keyframes rotate {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes rotate-reverse {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(-360deg); }
}

.loader-hidden {
    opacity: 0;
    visibility: hidden;
}

.loader-hidden .loader {
    transform: translateY(-30px) scale(0.95);
}

.video {
  width: 100%;
  height: 90vh;
  margin-top: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f7f9fc;
}

.video video {
  width: 96%;
  height: 98%;
  border-radius: 20px;
  object-fit: cover;
}

@media (max-width: 768px) {
  .video {
    height: auto;
    margin-top: 20px;
  }
  
  .video video {
    width: 95%;
    height: auto;
  }
}

.lit-video-container {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 10px;
}

.lit-video-container video {
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  object-fit: cover;
  border-radius: 10px;
}