<style>
 
/* Resetting default margin and padding for cross-browser consistency */
body, html {
    margin: 0;
    padding: 0;
    height: 100%; /* Ensure the body takes up the full height of the viewport */
}
		
body {
	background-color: #FFF6DD; /* light yellow of KYC  */
    font-family: "Alegreya"; 
    color: #EEB500; /* medium brown of KYC  */
	color: #CF7D0B;/* Dark brown of KYC  */
}

h1,h2,h3,h4,h5, a, p, input, span{
        font-family: "Alegreya";
		
}

p, span 
{
	text-align: left;
}

.rolling-text {
	  font-size: 150%;
  background-color: yellow;
  background-color:#EEB500;
  color: #FFF6DD;
}
.mySlides {
	display:none;
		width: 100%;
	height: 100vp;
}
.mySlidesYt 
{ 
	display: none;
	width: 100%;
	height: 80vp;
}

.mySlidesTJI
{ 
	display: none;
	width: 100%;
	
}

.w3-tag, .fa {cursor:pointer}
.w3-tag {height:15px;width:15px;padding:0;margin-top:6px}


 
/************** **********/
/******* MAIN TITLE ******/
/************** **********/

.title-container {
  width: 100%;
  display: flex;
  align-items: center; /* Centers items vertically */
  justify-content: center; /* Centers items horizontally */
  }

.title-container img {
  width: 200px; /* Adjust width as needed */

   /* Adjust width as needed */
  height: auto; /* Maintain aspect ratio */
 /* margin-right: 10px; *//* Adjust spacing between image and title */
  align-items: center;
}

.title-container h1 {
  margin: 0; /* Remove default margin */
  font-size: 500%;
}
.title-container h3 {
  float: center; /* Remove default margin */
  font-size: 100%;
}

.header h1 {
  font-size: 50px;
  color: white;
}
 
/************** **********/
/******* Menu BAR ******/
/************** **********/
/* Style the top navigation bar */
.topnav {
  overflow: hidden;
  background-color: black;
  background-color: #83580b;
  background-color: #EEB500; /* medium brown of KYC  */

}
/* Style the topnav links */
.topnav a {
  float: left;
  display: block;
  color: black;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-weight: bold;
  font-size: 150%; 
      color: #CF7D0B;/* Dark brown of KYC  */
	        color: black;


}

/* Change color on hover */
.topnav a:hover {
  background-color: #ddd;
  color: black;
  background-color:: #EEB500; /* medium brown of KYC  */
  background-color: #FFF6DD; /* light yellow of KYC  */
  color: #CF7D0B;/* Dark brown of KYC  */
}

/* social media buttons */
.fa {
  padding: 20px;
  font-size: 15px;
  width: 50px;
  text-align: center;
  text-decoration: none;
  margin: 5px 2px;
}

.fa:hover {
    opacity: 0.7;
}

.fa-facebook {
  background: #3B5998;
  color: white;
}

.fa-twitter {
  background: #55ACEE;
  color: white;
}
 
.fa-linkedin {
  background: #007bb5;
  color: white;
}

.fa-youtube {
  background: #bb0000;
  color: white;
}

.fa-instagram {
  background: #125688;
  color: white;
}

/* form for registration */
/* Style inputs */
input[type=text], select, textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  margin-top: 6px;
  margin-bottom: 16px;
  resize: vertical;
}

input[type=submit] {
  background-color: #04AA6D;
  color: white;
  padding: 12px 20px;
  border: none;
  cursor: pointer;
}

input[type=submit]:hover {
  background-color: #45a049;
}
 
 
 
/************** ******************************/
/******* CARD - 33% ; height: 70vh ******/
/************** ******************************/
/* Add a card effect for articles */
.card {
  box-shadow: 4px 8px 16px 0 rgba(0,0,0,0.2);
  transition: 1s;
  width: 31%;
  height:  70vh;
  float: left;
  
  border: 1px solid #ccc; /* Optional: border for visualization */
  border: 1px solid #e2c275; /* Optional: border for visualization */
  padding: 1%;
  margin: 20px; 
  text-align:center;
  font-size: 150%; 
  font-weight: bold;
  /* background-color:#ED8137;*/
  background-color: #e2c275;
  background-color: white;  /* medium brown of KYC  */
  
}

.card:hover {
  box-shadow: 8px 16px 32px 0 #ED8137;
  box-shadow: 8px 16px 32px 0 #e2c275;
       transform: scale(1.05);

}

/************** *******************/
/******* CARD - 33% ; Height:  ****/
/************** *******************/
/* Add a card effect for articles */
.card50 {
  box-shadow: 4px 8px 16px 0 rgba(0,0,0,0.2);
  transition: 1s;
  width: 30%;
  height:  50vh;
  float: left;
  margin: 20px; 
  border: 1px solid #ccc; /* Optional: border for visualization */
  border: 1px solid #e2c275; /* Optional: border for visualization */
  padding: 1%;
  text-align:center;
  font-size: 150%; 
  font-weight: bold;
  /* background-color:#ED8137;*/
  background-color: #e2c275;
  background-color: white;
}

.card50:hover {
  box-shadow: 8px 16px 32px 0 #ED8137;
  box-shadow: 8px 16px 32px 0 #e2c275;
  /*transform: scale(1.05); */
}
/************** *******************/
/****** Card with 100% fill  ******/
/************** *******************/
/* Add a card effect for articles */
.card100 {
  box-shadow: 4px 8px 16px 0 rgba(0,0,0,0.2);
  transition: 1s;
  width: 98%;
  /* height:  80vh; */
  float: left;
  
  border: 1px solid #ccc; /* Optional: border for visualization */
  border: 1px solid #e2c275; /* Optional: border for visualization */
  padding: 1%;
  margin: 20px; 
  text-align:center;
  font-size: 150%; 
  font-weight: bold;
  /* background-color:#ED8137;*/
  background-color: #e2c275;
  background-color: white;
}

.card100:hover {
  box-shadow: 8px 16px 32px 0 #ED8137;
  box-shadow: 8px 16px 32px 0 #e2c275;
       transform: scale(1.05);

}

.authorpic img {
    max-width: 100%; /* Ensure the image doesn't exceed the container width */
    max-height: 200px; /* Ensure the image doesn't exceed the container height */
    align-self: center; /* Center the image vertically */
}

/************** ******************************/
/******* Final CONTAINER with border etc.******/
/************** ********** ********************/
.container {
        display: flex;
        justify-content: center;
        align-items: center; /* Optional: vertically center the content */
        /*height: 300px; *//* Set the height of the container */ 
        border: 1px solid #ccc; /* Optional: border for visualization */
    }

.container img {
        max-width: 100%; /* Ensure the image doesn't exceed the container width */
        max-height: 100%; /* Ensure the image doesn't exceed the container height */
        align-self: center; /* Center the image vertically */
}
	
	/* Style the container/contact section */
.container1 {
  border-radius: 5px;
  height: 100%;
  background-color: #f2f2f2;
  background-color:#FFF6DD;
  padding: 10px;
overflow: auto;
position:relative; /* copied from w3 class property for carousel */
}


/* Clear floats after the columns */
.row::after {
  content: "";
  display: table;
  clear: both;
}
 
/************** **********/
/******* Footer ******/
/************** **********/

/* Footer */
.footer {
 /* padding: 20px; */
  text-align: center;
  /* background: #ddd; */
      clear: both;

}



/* For mobile phones: */
[class*="car"] {
  width: 96%;
  margin: 2%; 
  padding: 2%;
}
@media only screen and (min-width: 768px) {
     /* For desktop: */
  .card {width: 46%;   margin: 20px; 
  padding: 1%;}
  .card50 {width: 46%;margin: 20px; 
  padding: 1%;}
} 

@media only screen and (min-width: 992px) {
  /* For desktop: */
  .card {width: 31%;   margin: 20px; 
  padding: 1%;}
  .card50 {width: 31%;margin: 20px; 
  padding: 1%;}
} 

        /* Style to make sure the embedded content fits within the container */
        #twitter-feed {
            width: 100%;
            height: 100%;
            overflow: auto; /* Make it scrollable */
            position: relative; /* Ensure positioning context */
        }
        .twitter-timeline {
            position: absolute; /* Position the embedded timeline */
            width: 100%; /* Ensure it takes the full width */
            height: 100%; /* Ensure it takes the full height */
        }
		
		
		      /* Style for the marquee container */
        .marquee-container {
            width: 100%; /* Full width */
            overflow: hidden; /* Hide content outside the container */
            white-space: nowrap; /* Prevent line breaks */
            position: relative; /* Ensure proper positioning */
        }

        /* Style for the marquee content */
        .marquee-content {
            display: inline-block; /* Display content inline */
            animation: marquee 10s linear infinite; /* Marquee animation */
            position: absolute; /* Position the content absolutely */
        }

        /* Keyframes for the marquee animation */
        @keyframes marquee {
            from {
                left: 100%; /* Start off-screen right */
            }
            to {
                left: -100%; /* Move off-screen left */
            }
        }
</style>
