@charset "UTF-8";
/* CSS Document */

@keyframes scroll-right-to-left {
  0% {
    transform: translateX(100%); /* Start from the right */
  }
  100% {
    transform: translateX(-100%); /* End to the left */
  }
}

.streaming-banner {
  margin-top: 0px; /* Add space above the banner */
  margin-bottom: 0px; /* Remove space below the banner */
  overflow: hidden;
  white-space: nowrap;
  box-sizing: border-box;
  font-family: 'Impact', sans-serif;
  font-size: 200px; /* Adjust as needed */
  width: calc(500% + 50px); /* Increase width to accommodate more text */
  animation: scroll-right-to-left 50s linear infinite; /* Adjust timing for smoother scroll */
}

.second-streaming-banner {
  margin-top: 20px; /* Space above the banner */
  margin-bottom: 0px; /* Remove space below the banner */
  overflow: hidden;
  white-space: nowrap;
  box-sizing: border-box;
  font-family: 'Impact', sans-serif;
  font-size: 200px; /* Adjust as needed */
  width: calc(500% + 50px); /* Increase width to accommodate more text */
  animation: scroll-left-to-right 30s linear infinite; /* Adjust timing for smoother scroll */
}
.streaming-banner-ybf {
  margin-top: 0px; /* Add space above the banner */
  margin-bottom: 0px; /* Remove space below the banner */
  overflow: hidden;
  white-space: nowrap;
  box-sizing: border-box;
  font-family: 'Dopestyle';
  font-size: 200px; /* Adjust as needed */
  width: calc(500% + 50px); /* Increase width to accommodate more text */
  animation: scroll-right-to-left 50s linear infinite; /* Adjust timing for smoother scroll */
	
}

.second-streaming-banner-ybf {
  margin-top: 20px; /* Space above the banner */
  margin-bottom: 0px; /* Remove space below the banner */
  overflow: hidden;
  white-space: nowrap;
  box-sizing: border-box;
  font-family: 'Dopestyle' ;
  font-size: 200px; /* Adjust as needed */
  width: calc(500% + 50px); /* Increase width to accommodate more text */
  animation: scroll-left-to-right 50s linear infinite; /* Adjust timing for smoother scroll */
}


/* If you want the second banner to move from left to right, create a different animation */
@keyframes scroll-left-to-right {
  0% {
    transform: translateX(-100%); /* Start from the left */
  }
  100% {
    transform: translateX(100%); /* End to the right */
  }
}

.color1 {
  color: #1dec5a3; /* Color 1 */
}

.color2 {
  color: #d7772e; /* Color 2 */
}

.color3 {
  color: #dec5a3; /* Color 3 */
}

.color4 {
  color: #faf0db; /* Color 4 */
}

.color5 {
  color: #000; /* Color 5 */
}
.color6 {
  color: #8962AA; /* Color 1 */
}

.color7 {
  color: #39B555; /* Color 2 */
}

.color8 {
  color: #39C1C7; /* Color 3 */
}

.color9 {
  color: #F6074F; /* Color 4 */
}

.color10 {
  color: #000; /* Color 5 */
}


.carousel-item {
  transition: transform 0.1s ease-in-out;
}
	#fastCarousel {
  padding-top: 20px;
  padding-bottom: 20px;
  padding-left: 10px;
  padding-right: 10px;
}

h1 {
  font-size: 70px; /* Adjust the size as needed */
}

.merriweather-regular {
  font-family: "Merriweather", serif;
  font-weight: 400;
  font-style: normal;
}

.merriweather-bold {
  font-family: "Merriweather", serif;
  font-weight: 700;
  font-style: normal;
}

.merriweather-black {
  font-family: "Merriweather", serif;
  font-weight: 900;
  font-style: normal;

}

.roboto-regular {
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.roboto-bold {
  font-family: "Roboto", sans-serif;
  font-weight: 700;
  font-style: normal;
}

.roboto-black {
  font-family: "Roboto", sans-serif;
  font-weight: 900;
  font-style: normal;

}

/* Background color for navbar and dropdown menus */
.navbar-custom, .navbar-custom .dropdown-menu {
background-color: #000000;
}
/* Text color for navbar and dropdown menus */
.navbar-custom .navbar-brand, .navbar-custom .navbar-text,
.navbar-custom .navbar-nav .nav-link,
.navbar-custom .dropdown-item {
color: #C17FEA;
}
/* Background and text colors for current page link and links on hover and
focus */
.navbar-custom .nav-item.active .nav-link,
.navbar-custom .nav-item:hover .nav-link,
.navbar-custom .nav-item:focus .nav-link,
.navbar-custom .dropdown-item:hover,
.navbar-custom .dropdown-item:focus {
background-color:#000000;
color: #C17FEA;
}
/*navbar-brand logo*/
.navbar-brand {
    background-image: url('../Images/pngsdrobot .png');
    backgound-repeat: no-repeat;
    padding-left: 70px;
    background-position: 6% center;
    background-size: 70px auto;
    background-repeat: no-repeat
		
		

}/* main.css */

.card {
    background-color: black;
    color: white;
}

.card .card-title,
.card .card-text {
    color: white;
}

.card .btn {
    background-color: white;
    color: black;
    border-color: white;
}

.card .btn:hover {
    background-color: black;
    color: white;
    border-color: white;
}


.card-img-top {
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

.card-body {
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}
.card {
    border-radius: 10px; /* You can adjust the value to control the amount of bevel */
}

/* Border and text colors for menu icon on small screens */
.custom-toggler.navbar-toggler {
border-color: #ecf0f1;
color: #000000;
}
/* Hamburger icon - use same rgb values as previous rule for stroke */
.custom-toggler .navbar-toggler-icon {
}

#home_banner {
  padding-left: 0px;
  padding-right: 0px;
  position: relative;
  text-align: center; /* Center align the content */
}

#home_banner h1 {
  font-size: 4rem;
  color: #fff;
  text-shadow: 2px 2px #000000;
  position: absolute;
  left: 50%; /* Move the heading to the center */
  transform: translateX(-50%); /* Adjust the position */
  bottom: 30%;
}

	.footer {
    background-color: #000000; /* Black background color */
    color: #ffffff; /* Text color */
    padding: 20px 0;
	width: 100%;
		
	/* Add padding to give some space around the text */
}


.footer .container-fluid {
    padding-left: 0;
    padding-right: 0;
}

.footer a {
    color: #ffffff; /* Link color */
    text-decoration: none; /* Remove underline from links */
}

.footer a:hover {
    text-decoration: underline; /* Add underline on hover */
}
.navbar {
    background-color: #000000; /* Black background color */
	

}
body {
    background-color:white;
    background-repeat: no-repeat;
    background-size: cover; /* This will make the image cover the entire background */
    background-position: center; /* This will center the image */
}
/*Media Query Breakpoints*/
/*X-SMALL ONLY*/
@media screen and (min-width:320px){
#home_bg h1 {
    font-size: 1rem;
    bottom: 3%;
    left: 3%;
    }    
}


/*SMALL SIZE ONLY*/
@media screen and (min-width:576px){
#home_bg h1 {
    font-size: 1rem;
    bottom: 3%;
    left: 3%;
    }    


/*MEDIUM SIZE ONLY*/
@media (min-width: 768px) {
  #home_bg h1 {font-size: 2rem;
               bottom: 5%;
               left: 3%;
              }
  }


/*LARGE SIZE ONLY*/
@media screen and (min-width:992px){
    #home_bg h1 {
        font-size: 3rem;
        bottom: 5%;
        left: 3%;
        }
}.carousel-item img {
    width: 100%;
    height: auto;
}
/* main.css */

.profilePhoto img {
    width: 100%;
    height: auto;
    border-radius: 50%;
    padding: 10px;
}

.profileHeader {
    padding: 20px;
}

.profileHeader h1,
.profileHeader h3 {
    margin: 0;
}

.profileHeader hr {
    border: 1px solid #ccc;
}

.profileHeader p {
    margin-top: 20px;
	}
	header .socialNetworkNavBar {
	text-align: center;
	display: block;
	margin-top: 60px;
	clear: both;
}
	
header .socialNetworkNavBar .socialNetworkNav {
	border-radius: 50%;
	cursor: pointer;
}
header .socialNetworkNavBar .socialNetworkNav img:hover {
	opacity: 0.5;
}
.flex-container {
  display: flex;
  justify-content: center; /* Center horizontally */
  align-items: center; /* Center vertically */
  border-radius: 10px;
  background-color: black;
  color: white;
  padding: 5px;
  margin: 0px;
  text-align: center; /* Center text horizontally */
}

.flex-content {
  background-color: black;
  color: white;
  padding: 5px;
  margin: 5px;
}

.flex-container-white {
  display: flex;
  justify-content: center; /* Center horizontally */
  align-items: center; /* Center vertically */
  border-radius: 10px;
  text-align: center; /* Center text horizontally */
}

.flex-content-white {
  background-color:white;
  color: black;
  padding: 20px;
  margin: 20px;
}
.box 
            {
            background-color: black;
            color: white;
            padding: 20px;
            border-radius: 8px;
	}
	 .photo {
            text-align: center;
            border: 5px solid white;
            padding: 10px;
        }
        .photo img {
            max-width: 100%;
            height: auto;
        }
        .description {
            margin-top: 20px;
	}
	.about-section {
  background-color: rgba(255, 255, 255, 0.8); /* White background with 80% opacity */
  padding: 20px; /* Optional: Add padding */
}
	.carousel-item {
  transition: transform 0.1s ease-in-out;
}
	#fastCarousel {
  padding-top: 20px;
  padding-bottom: 20px;
  padding-left: 10px;
  padding-right: 10px;
}
	.case-study-title {
  color: white;           /* Sets the text color to white */
  background-color: black; /* Sets the background color to black */
  padding: 10px;          /* Adds padding around the text */
  text-align: center;     /* Centers the text */
  border-radius: 5px;     /* Optional: adds rounded corners */
}
.container-black {
    background-color: black; /* Black background */
    color: white;           /* White text */
    padding: 20px;          /* Add space inside the container */
    border-radius: 8px;     /* Optional: Add rounded corners */
    text-align: center;     /* Center align text */
    font-family: 'Roboto', sans-serif; /* Consistent font styling */
}
.black-background {
    background-color: black;
    color: white;
    padding: 20px; /* Optional: Add padding for spacing within the section */
}

.black-background p, .black-background .h3 {
    color: white; /* Ensures all text inside stays white */
}
.black-row {
    background-color: black;
    color: white;
    width: 100%; /* Ensures it spans the full width of the container */
    padding: 20px 0; /* Adds spacing for visual appeal */
}

.black-row p, .black-row .h3 {
    color: white; /* Keeps all text white */
}


background-image:url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0
0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath
stroke='rgba(236,240,241, 0.7)' stroke-width='2' stroke-linecap='round'
stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}