/* style.css */
html {
  overflow-x: hidden; /* Hide horizontal scrollbar */
}

body {
  background-color: #000;
  color: #fff;
  font-family: 'Exo 2', sans-serif; 
  font-size: 14px;
  margin: 0;
  overflow-x: hidden;
}

h1 {
  font-family: "Exo 2", sans-serif;
  font-weight: 800;
  font-style: normal;
  text-transform: uppercase;
  background: -webkit-linear-gradient(180deg, #a8a9ad, #fff); 
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

h2 {
  font-family: "Exo 2", sans-serif;
  font-weight: 800;
  font-style: normal;
  text-transform: uppercase;
  font-style: italic;
  background: -webkit-linear-gradient(180deg, #009bd1, #de00d3); 
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 20px;
}

h4 {
  text-align: center; /* Center-align the text */
  margin-top: 20px;
  font-family: "Exo 2", sans-serif;
  font-weight: 300;
  font-style: italic;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
}

a {
    color: white;
    text-decoration: none;
}

.container {
  max-width: 1200px; /* Adjusted max-width as per your design */
  margin: 0 auto; /* Center the container horizontally */
}

/* Adjust spacing between rows */
.container .row {
  margin-bottom: 20px;
}

.navbar {
  position: relative; /* Change position to relative */
  background-color: #0f0015; /* Dark violet */
}

.navbar-brand img {
  width: 150px; /* Adjust width as needed */
}

.navbar-toggler {
  border: 0 !important;
}

.navbar-toggler:focus {
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;    
}

.navbar-toggler .bi {
  border: none; 
  color: #fff; /* Make hamburger icon white */
  opacity: 1; /* Ensure full opacity */
}


.navbar-nav .nav-link {
  color: #fff !important; /* Make menu text white */
  transition: color 0.3s ease; /* Smooth transition */
}

.navbar-nav .nav-link:hover {
  color: red !important; /* Change color on hover */
}

.navbar-nav .nav-item:first-child .nav-link:hover {
  color: white !important;
}

.button-item {
  border: 2px solid #fff;
  border-radius: 10px;
  color: #fff;
  transition: background-color 0.3s ease;
  width: 100px; /* Adjusted width */
  text-align: center; /* Center the text */
}

.button-item:hover {
  background-color: transparent;
  color: #fff;
}

.live-item {
  background-color: red;
  border-radius: 30px;
  padding: 0px 10px;
}

.live-icon {
  animation: blinker 1s linear infinite;
  margin-right: 5px;
}


@keyframes blinker {
  50% {
    opacity: 0;
  }
}

@media (min-width: 992px) { /* for desktop */

  .navbar-nav {
    padding-top: 16px; /* Adjusted padding */
	padding-bottom: 12px; /* Adjusted padding */
  }
	
  .navbar-nav .nav-item {
    margin-right: 20px; /* Increased horizontal margin */
  }
  .navbar-nav .nav-item:first-child {
	font-weight: 800;
  }
  .navbar-nav .nav-item:last-child {
    margin-right: 0; /* Remove right margin */
	font-size: 16px;
  }
  .navbar-nav .nav-item:last-child .nav-link {
    padding-top: 4px; /* Adjusted padding */
  }
}


@media (max-width: 991px) { /* for mobile */
	
  .navbar-nav {
    background-color:  #0f0015;
    border-top: none; /* Remove the border */
    padding-top: 0; /* Remove the top padding */
    margin-top: 20px; /* Add margin-top */
    text-align: center; /* Center the items */
	padding-left: 80px; /* Add left padding */
    padding-right: 80px; /* Add right padding */
  }
  .navbar-nav .nav-item {
    padding: 10px 0; /* Adjusted vertical padding */
    width: 100%; 
    display: flex; /* Use flexbox */
    justify-content: center; /* Center horizontally */
  }
  .navbar-nav .nav-link {
    padding: 5px 20px; /* Adjusted horizontal padding */
    width: 100%; /* Full width */
    text-align: center; /* Center the text */
  }
  .navbar-nav .nav-item:last-child {
    border-bottom: none; /* Remove border for last item */
  }
	
	
  .content-container iframe {
    width: calc(100% - 40px); /* Adjust the padding as needed */
    margin-left: 20px; /* Adjust the left padding */
    margin-right: 20px; /* Adjust the right padding */
	height: 200px; /* Set the height for mobile mode */
  }
}

@media (max-width: 991px) and (orientation: landscape) {
  .content-container iframe {
    width: 380px;
    margin-left: 20px; /* Adjust the left padding */
    margin-right: 20px; /* Adjust the right padding */
    height: 200px; /* Set the height for mobile mode */
  }
}


.block1 {
  background-image: url('img/block1.jpg'); /* Replace 'background-image1.jpg' with your image path */
  background-size: cover; /* Stretch the background image to cover the entire width and height of the block */
  background-position: center; /* Center the background image */
  position: relative; /* Ensure blocks are positioned relative to the body */
  overflow: hidden; /* Hide the overflow content */
}



.content-container {
  position: relative; /* Ensure content container is positioned relative */
  z-index: 1; /* Set higher z-index to appear above animated text */
  text-align: center; /* Center align the content */
}

h1 {
  margin-top: 35px; /* Adjust the margin to position the header */
}

iframe {
  margin-top: 20px; /* Adjust the margin to position the iframe */
}

#animated-text-strip {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: center;
  position: absolute; /* Position absolutely within the block1 */
  top: 50%; /* Center vertically */
  transform: translateY(-70%); /* Adjust to center vertically */
  width: 100%; /* Occupy full width */
}

#animated-text-strip .marquee {
  white-space: nowrap;
  animation: marquee 40s linear infinite;
  max-width: none;
}

@keyframes marquee {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-100%, 0);
  }
}


.marquee{
  font-family: 'Bebas Neue', sans-serif;
  font-size: 300px; /* Adjust the font size as needed */
  font-weight: 900;
  text-transform: uppercase;
  background: -webkit-linear-gradient(#db62b1, #6d7fae); 
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}


/* Increase font size for icons */
.platformIcon {
  font-size: 24px; /* Adjust the font size as needed */
  transition: color 0.3s; /* Add transition for smooth color change */
  cursor: pointer;
}

/* Increase font size for text */
.platformText {
  font-size: 18px; /* Adjust the font size as needed */
  transition: color 0.3s; /* Add transition for smooth color change */
  cursor: pointer;
}

/* Hover effect */
.col-auto:hover .platformIcon,
.col-auto:hover .platformText {
  color: red; /* Change the color to red on hover */
}

.selected-icon {
  color: red !important;
}

.selected-text {
	color: red;
}

.scrollable-icons {
  white-space: nowrap;
  overflow-x: hidden;
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
  justify-content: center;
}

@media (max-width: 768px) {
	.scrollable-icons {
		justify-content: start;
	}
}

.scrollable-icons::-webkit-scrollbar {
  display: none;
}



.block2 video {
  max-width: 100%; /* Ensure logos don't exceed container width */
  height: auto; /* Allow the height to adjust proportionally */
  clip-path: inset(0 0 0 0 round 5% 5% 5% 5%);
}

.block3 video, 
.block6 video {
  max-width: 100%; /* Ensure logos don't exceed container width */
  height: auto; /* Allow the height to adjust proportionally */
  clip-path: inset(0 0 0 0 round 5% 5% 5% 5%);
}

.block5 video {
  max-width: 100%; /* Ensure logos don't exceed container width */
  height: auto; /* Allow the height to adjust proportionally */
  clip-path: inset(0 0 0 0 round 5% 5% 5% 5%);
}


.cell {
  text-align: left;
  color: white;
}

.cell i {
  color: white;
  font-size: 24px;
  margin-bottom: 10px;
}

.cell h3 {
  color: white;
}

.cell p {
  color: white;
}



@media (max-width: 768px) { /*Mobile*/
  .block2 h2,
  .block3 h2,
  .block5 h2,
  .block6 h2,
  .block8 h2, 
  .cell {
    text-align: center;
  }

   .block6 {
	   margin-bottom: 40px;
	}
	
  .block3,
  .block2,
  .block5,
  .block6 {
	padding-top: 20px;
  }
	
	.cell {
	  margin-bottom: 40px;
	}
	
}

.block3 {
  background-image: url('img/block3.jpg');
  background-size: cover;
  background-position: center; /* Center the background image */
}

.block5 {
  background-image: url('img/block5.jpg');
  background-size: cover;
  background-position: center; /* Center the background image */
}

@media (min-width: 992px) { /*Desktop*/
	
	.block2,
	.block5 {
  		padding: 50px 0;	
	}
	
	.block3,
	.block6 {
		padding-top: 50px;
	}
	
	.block6 {
		padding-bottom: 50px;
	}
	
	#right-column {
    	padding-left: 30px; /* Adjust the padding as needed */
  	}
	
	.block3 .container {
	  position: relative; /* For positioning the header */
	}
	
	.block6 .container {
	  position: relative; /* For positioning the header */
	}

	.block3 h2, 
	.block6 h2 {
	  text-align: left; /* Align text left */
	  position: absolute; /* Position the header absolutely */
	  left: 52%; /* Move the header to the center horizontally */
	  transform: translateY(-170%); /* Adjust for center alignment */
	}
	
	.block1 h4 {
		padding-left: 150px;
		padding-right: 150px;
	}
	
	.cell {
	  margin-bottom: 30px;
	}
	
	.block3 video {
		margin-top: 65px;
	}
	
	.block5 video,
	.block6 video {
		margin-top: 35px;
	}
}


.block4 {
  padding: 40px 0; /* Adjust padding as needed */
}

.block4 h2 {
	margin-bottom: 10px;
}

.block4 h4 {
	margin-top: 0px;
}

.logos-container {
  background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent black background */
  backdrop-filter: blur(5px); /* Apply a blur effect */
  -webkit-backdrop-filter: blur(5px); /* For older versions of Safari */
  border-radius: 10px; /* Rounded corners */
 
  overflow: hidden; /* Hide overflow content */
  margin-top: 30px; /* Adjust margin as needed */
  padding-left: 20px;
  padding-right: 20px;
}

.logos-container img {
  max-width: 100%; /* Ensure logos don't exceed container width */
  max-height: 70px; /* Adjust logo height as needed */
  margin: 5px; /* Adjust spacing between logos */
}


/* Adjust the column width for small screens (mobile) */
@media screen and (max-width: 767px) {
  .logos-container .col-md-3 {
    width: 50%; /* Two columns per row */
    max-width: none; /* Allow logos to expand beyond column width */
  }
}


.cell-button {
    display: flex; /* Use flexbox */
    align-items: center; /* Align items vertically */
    background-color: transparent;
    border: 2px solid #fff;
    border-radius: 10px;
    color: #fff;
    padding: 5px 10px; /* Adjust padding as needed */
	text-align: center; /* Align text at the center */
	margin-top: 20px;
	padding-right: 20px;
	transition: background-color 0.3s ease;
}

.cell-button i {
    margin-right: 5px; /* Add space between icon and text */
	margin-top: 0px;
	margin-bottom: 0px;
}

.cell-button:hover {
    background-color: #ff0000; /* Red color on hover */
	color: #fff;
}

@media (max-width: 576px) {
    .cell {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
}

.button-row {
    display: flex;
    justify-content: space-between;
}

.country-button {
    border: none;
    background-color: transparent;
    font-size: 14px;
	color: white;
    cursor: pointer;
	border: 2px solid white;
    border-radius: 10px; /* Adjust the border radius as needed */
}

.country-button:hover {
    background-color: #ff0000; /* Red color on hover */
	color: #fff;
}

/* For desktop mode */
@media (min-width: 992px) {
    .cell .d-flex {
        gap: 10px; /* Adjust the distance between buttons as needed */
    }
}

/* For mobile mode */
@media (max-width: 991px) {
    .cell .d-flex {
        justify-content: center;
    }
    .cell .d-flex .country-button {
        margin: 5px; /* Adjust the distance between buttons as needed */
    }
}


.block7 {
  text-align: center;
  margin-bottom: 50px;
}

.block7 .container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.block7 h2 {
  margin-bottom: 40px;
}

.columns {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.column {
  width: calc(25% - 20px);
  margin-bottom: 40px;
}

.column .content {
  background-color: black;
  border-radius: 20px;
  height: 420px;
  padding: 20px;
  position: relative;
}

.column .content h3,
.column .content p {
  color: #fff;
  text-align: center;
}

.column .content img {
  position: absolute;
  bottom: 0;
  top: 300px;
  left: 50%;
  transform: translateX(-50%);
  width: 150px; /* Adjust image width as needed */
  height: auto;
}


/* Media query for mobile */
@media screen and (max-width: 768px) {
  .columns {
    flex-direction: column;
    align-items: center;
  }

  .column {
    width: 100%;
	margin-bottom: 20px;
  }

  .column .content {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 20px;
    height: 270px;
  }

  .column .content h3,
  .column .content p {
    text-align: left;
  }

  .column .content p {
    padding-right: 30px;
	z-index: 1;
  }
	

	.column .content img {
	  position: absolute;
	  top: 50%;
	  left: 100%;
	  width: 150px; /* Set the width to 100% */
	  height: auto;
	  clip-path: inset(0 50% 0 0);
	  
	}


}

@media (max-width: 991px) and (orientation: landscape) {
    .column .content {
		height: 200px;
  }
	
  .column .content img {
	  top: 20%;
	}
}

#block7-column1 {
	background: linear-gradient(90deg, #de00d3, #8b3ad2);
}

#block7-column2 {
	background: linear-gradient(90deg, #8b3ad2, #5560d2);
}

#block7-column3 {
	background: linear-gradient(90deg, #5560d2, #198ad1);
}

#block7-column4 {
	background: linear-gradient(90deg, #198ad1, #009bd1);
}

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

	#block7-column1 {
		background: linear-gradient(180deg, #de00d3, #8b3ad2);
	}

	#block7-column2 {
		background: linear-gradient(180deg, #8b3ad2, #5560d2);
	}

	#block7-column3 {
		background: linear-gradient(180deg, #5560d2, #198ad1);
	}

	#block7-column4 {
		background: linear-gradient(180deg, #198ad1, #009bd1);
	}

}


/* Additional CSS styles can be added here */
.block8 {
  padding: 0px 0;
}

.block8 h2 {
  text-align: center;
  margin-bottom: 40px;
}

.left-content img {
  max-width: 100%;
}

.right-content form {
  padding: 20px;
}

.right-content input[type="text"],
.right-content input[type="email"],
.right-content input[type="tel"],
.right-content textarea {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.5);
  color: #fff;
  margin-bottom: 20px;
}

.right-content input[type="text"]::placeholder,
.right-content input[type="email"]::placeholder,
.right-content input[type="tel"]::placeholder,
.right-content textarea::placeholder {
  color: rgba(255, 255, 255, 0.3);
}

.block8 p {
   font-size: 15px;
}

@media screen and (max-width: 768px) {
	.left-content {
		padding-left: 20px;
	}
}

.social-icons {
  display: flex;
  justify-content: start;
}

.social-icon {
  font-size: 26px; /* Adjust icon size as needed */
  color: white;
  margin-right: 15px; /* Adjust spacing between icons */
  transition: color 0.3s; /* Add transition for smooth color change */
}

.social-icon:hover {
  color: red; /* Change color to red on hover */
}

.copyright-text {
	color: grey;
}

.footer-link {
  text-decoration: underline;
  color: grey;
}

.footer-link:hover {
  color: red; /* Change color on hover if needed */
}

.separator {
  margin: 0 10px;
  color: grey;
}

.block8 {
  background-image: url('img/block7.jpg');
  background-size: cover;
  background-position: center; /* Center the background image */
  margin-bottom: 0px;
}

.hidden-on-desktop {
    display: none; /* Set default display property */
}

.visible-on-mobile {
    display: block; /* Hide by default on desktop */
}

/* Media query for desktop */
@media screen and (min-width: 768px) {
    .hidden-on-desktop {
        display: block;
    }
    
    .visible-on-mobile {
        display: none; 
    }
}

.modal-content {
  background-color: black;
  color: white; /* Optionally, set text color to white */
}

.modal-header {
  border-bottom: none; /* Remove the bottom border */
}