/* This removes global horizontal scroll */
body {
  overflow-x: hidden;
}



.btn-primary {
    background-color: aliceblue !important;
    height:43px;
    color:black;
}

.btn-primary:hover{
    background-color: black !important;
}

.custom-button {
    background-color:#701a75;
    color: white;
}

.custom-button:hover {
    background-color: #000000!important;
    color: rgb(255, 255, 255) !important;;
    transform: scale(1.1); /* Scale up the button by 10% */
}



.auto-container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
}

.clearfix::after {
    content: "";
    display: table;
    clear: both;
}

/* Header Top Styles */
.header-top {
    background-color:black;
    color: #fff;
    padding: 10px 0;
    position: sticky;
    top: 0;
    z-index: 1000;
}

.inner-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.top-left {
    display: flex;
    align-items: center;
    font-size: 14px;
}

.top-left .working-time {
    margin-right: 20px;
}

.top-right {
    display: flex;
    align-items: center;
}

.social-box {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
}

.social-box li {
    margin-right: 10px;
}

.social-box li a {
    color: #fff;
    font-size: 16px;
    text-decoration: none;
}

.top-right .text {
    font-size: 14px;
    margin-left: 15px;
}

.top-right .text a {
    color: #fff;
    text-decoration: none;
}

.top-right .text a:hover {
    text-decoration: underline;
}

/* Basic reset and global styles */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
}

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

/* Section specific styles */
#courses {
    padding: 48px;
}

#courses h2 {
    font-size: 1.5rem;
}

#courses h1 {
    font-size: 3.5rem;
}

.grid {
    display: grid;
}

.grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
}

.grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

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

.grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.gap-8 {
    gap: 8px;
}

.justify-center {
    justify-content: center;
}

.items-center {
    align-items: center;
}

.p-12 {
    padding: 72px;
}

.bg-fuchsia-900 {
  background: linear-gradient(to bottom, rgba(112, 26, 117, 1), rgba(45, 8, 52, 1)); /* Gradient background */
}

.text-white {
    color: #ffffff;
}

.text-xl {
    font-size: 1.25rem;
}

.text-6xl {
    font-size: 4rem;
}

.font-medium {
    font-weight: 500;
}

.font-semibold {
    font-weight: 600;
}



.mb-8 {
    margin-bottom: 2rem;
}

.flex {
    display: flex;
}

.flex-row {
    flex-direction: row;
}

.hover:bg-lime-200:hover {
    background-color: #cde855;
}

.rounded-full {
    border-radius: 9999px;
}

.p-2 {
    padding: 0.5rem;
}

.m-1 {
    margin: 0.25rem;
}

.hover:hover {
    cursor: pointer;
}

.bg-gray-50 {
    background-color: #f9fafb;
}

.bottom-24 {
    bottom: 6rem;
}

.group {
    position: relative;
    overflow: hidden;
}

.group-hover\: {
    position: absolute;
}

.group-hover\:duration-600 {
    transition-duration: 600ms;
}

.duration-500 {
    transition-duration: 500ms;
}

.h-72 {
    height: 18rem;
}

.w-64 {
    width: 16rem;
}

.hover\:bg-lime-200:hover {
    background-color: #cde855;
}

.rounded-2xl {
    border-radius: 1rem;
}

.absolute {
    position: absolute;
}


.m-3 {
    margin: 0.75rem;
}

.w-74 h-72 bg-cover bg-center text-gray-800:hover {
            transform: scale(1.1);}


.course-container {
                width: 300px; /* Adjust width as per your design */
                height: 300px; /* Adjust height as per your design */
                overflow: hidden;
                position: relative;
                border-radius: 20px; /* Rounded corners */
                box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Box shadow for elevation */
            }


            .course-container2 {
                width: 300px; /* Adjust width as per your design */
                height: 300px; /* Adjust height as per your design */
                overflow: hidden;
                position: relative;
                border-radius: 20px; /* Rounded corners */
                box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Box shadow for elevation */
            }
        
            .course-image {
                width: 100%;
                height: 100%;
                background-size: cover;
                background-position: center;
                transition: transform 0.3s ease; /* Transition for transform property */
            }

            
        
            .course-image:hover {
                transform: scale(1.1); /* Scale up on hover */
            }
    
            #aboutImage {
                transition: transform 0.5s ease;
            }
        
            #aboutImage:hover {
                transform: scale(1.05);
            }


            /* Section styles */
#program {
    /*padding: 48px;*/
    margin-top: 16px;
    background-color: #ffffff;
  }
  
  #program h2 {
    font-size: 1.5rem;
    color: rgba(112,26,117,255);
    /*margin-bottom: 1.5rem;*/
  }
  
  #program h1 {
    font-size: 4rem;
    font-weight: bold;
    margin-bottom: 1.5rem;
  }
  
  /* Image styles */
  #program img {
    display: block;
    margin: 0 auto;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  }
  
  /* Text content styles */
  #program .text-fuchsia-900 {
    color: rgba(112,26,117,255);
    font-size: 1.25rem;
    font-weight: bold;
    margin-bottom: 1rem;
  }
  
  #program .text-black {
    color: #000000;
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 1rem;
  }
  
  #program button {
    /*background-color: rgba(112,26,117,255);*/
    color: #ffffff;
    padding: 1rem 2rem;
    border: none;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease;
  }
  
  #program button:hover {
    /*background-color:rgba(112,26,117,255);*/
    color: #000000;
  }
  
 
  .testimonial{
    margin:200px auto 100px;
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(350px, 1fr));
    grid-gap:20px;
  }
  .testimonial .card{
    position:relative;
    margin:0 auto;
    width:350px;
    border-radius:50% ;
    padding:20px;
    box-sizing:border-box;
    text-align:center;
    box-shadow:0 10px 40px rgba(0,0,0,.5);
    overflow:hidden;
  }
  .testimonial .card .layer{
    position:absolute;
    top:calc(100% - 2px);
    left:0;
    height:100%;
    width:100%;
    background:linear-gradient(rgba(112,26,117,255), #e91ee3);
    z-index:1;
    transition:0.5s;
  }
  .testimonial .card:hover .layer{
    top:0;
  }
  .testimonial .card .content{
    position:relative;
    z-index:2;
  }
  .testimonial .card .content p{
    font-size:18px;
    line-height:24px;
  }
  .testimonial .card .content .image{
    width:128px;
    height:128px;
    margin:0 auto;
    border-radius:50%;
    overflow:hidden;
    border:4px solid #fff;
  }
  .testimonial .card .content .details h2{
    font-size:18px;
  }
  .testimonial .card .content .details span{
    color:#03a9f4;
    font-size:14px;
    transition:0.5s;
  }
  .testimonial .card:hover .content .details span{
    color:#fff;
  }

  .site-footer
  {
    background-color:#020b30;
    padding:45px 0 20px;
    font-size:15px;
    line-height:24px;
    color:#737373;
  }
  .site-footer hr
  {
    border-top-color:#bbb;
    opacity:0.5
  }
  .site-footer hr.small
  {
    margin:20px 0
  }
  .site-footer h6
  {
    color:#fff;
    font-size:16px;
    text-transform:uppercase;
    margin-top:5px;
    letter-spacing:2px
  }
  .site-footer a
  {
    color:#737373;
  }
  .site-footer a:hover
  {
    color:#3366cc;
    text-decoration:none;
  }
  .footer-links
  {
    padding-left:0;
    list-style:none
  }
  .footer-links li
  {
    display:block
  }
  .footer-links a
  {
    color:#737373
  }
  .footer-links a:active,.footer-links a:focus,.footer-links a:hover
  {
    color:#3366cc;
    text-decoration:none;
  }
  .footer-links.inline li
  {
    display:inline-block
  }
  .site-footer .social-icons
  {
    text-align:right
  }
  .site-footer .social-icons a
  {
    width:40px;
    height:40px;
    line-height:40px;
    margin-left:6px;
    margin-right:0;
    border-radius:100%;
    background-color:#071342
  }
  .copyright-text
  {
    margin:0
  }
  
  .social-icons
  {
    padding-left:0;
    margin-bottom:0;
    list-style:none
  }
  .social-icons li
  {
    display:inline-block;
    margin-bottom:4px
  }
  .social-icons li.title
  {
    margin-right:15px;
    text-transform:uppercase;
    color:#96a2b2;
    font-weight:700;
    font-size:13px
  }
  .social-icons a{
    background-color:#eceeef;
    color:#818a91;
    font-size:16px;
    display:inline-block;
    line-height:44px;
    width:44px;
    height:44px;
    text-align:center;
    margin-right:8px;
    border-radius:100%;
    -webkit-transition:all .2s linear;
    -o-transition:all .2s linear;
    transition:all .2s linear
  }
  .social-icons a:active,.social-icons a:focus,.social-icons a:hover
  {
    color:#fff;
    background-color:#29aafe
  }
  .social-icons.size-sm a
  {
    line-height:34px;
    height:34px;
    width:34px;
    font-size:14px
  }
  .social-icons a.facebook:hover
  {
    background-color:#3b5998
  }
  .social-icons a.twitter:hover
  {
    background-color:#00aced
  }
  .social-icons a.linkedin:hover
  {
    background-color:#007bb6
  }
  .social-icons a.dribbble:hover
  {
    background-color:#ea4c89
  }
  
.social-icons
{
  padding-left:0;
  margin-bottom:0;
  list-style:none
}
.social-icons li
{
  display:inline-block;
  margin-bottom:4px
}
.social-icons li.title
{
  margin-right:15px;
  text-transform:uppercase;
  color:#96a2b2;
  font-weight:700;
  font-size:13px
}
.social-icons a{
  background-color:#eceeef;
  color:#818a91;
  font-size:16px;
  display:inline-block;
  line-height:44px;
  width:44px;
  height:44px;
  text-align:center;
  margin-right:8px;
  border-radius:100%;
  -webkit-transition:all .2s linear;
  -o-transition:all .2s linear;
  transition:all .2s linear
}
.social-icons a:active,.social-icons a:focus,.social-icons a:hover
{
  color:#fff;
  background-color:#29aafe
}
.social-icons.size-sm a
{
  line-height:34px;
  height:34px;
  width:34px;
  font-size:14px
}
.social-icons a.facebook:hover
{
  background-color:#3b5998
}
.social-icons a.twitter:hover
{
  background-color:#00aced
}
.social-icons a.linkedin:hover
{
  background-color:#007bb6
}
.social-icons a.dribbble:hover
{
  background-color:#ea4c89
}




 

.slider-container {
    width: 80%;
    margin: 0 auto;
    padding: 20px;
    
  }

  h1 {
    text-align: center;
    margin: 20px 0;
    font-size: 3rem;
    font-weight: bold;
  }

  
  
  .faculty-member {
    text-align: center;
    padding: 20px;
    border-radius: 8px;
    /* box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); */
    transition: transform 0.3s ease;
    margin-right: 20px; /* Increase this value to increase the spacing */
  }
  
  .faculty-member:hover {
    transform: translateY(-5px);
    
  }
  
  .faculty-member img {
    width: 300px;
    height: 300px;
    object-fit: cover;
    border-radius: 50%;
    margin-bottom: 20px;
  }



  .faculty-image {
    position: relative; /* Ensure this is relative */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border-radius: 8px;
    overflow: hidden; /* Ensure overflow is hidden */
}

.faculty-image:hover {
  transform: scale(1.05);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
  background-color:black;
  z-index:999;

}


.slideshow-container {
  position: relative;
  max-width: 100%;
  overflow: hidden;
}

.slides {
  display: none;
  animation: fadeEffect 8s ease-in-out infinite; /* Adjust timing as needed */
}

.slides img {
  width: 100%;
  height: auto;
  object-fit: cover; /* Ensure the image covers the entire slide */
}


@keyframes fadeEffect {
  0% {
      opacity: 0;
  }
  20% {
      opacity: 1;
  }
  80% {
      opacity: 1;
  }
  100% {
      opacity: 0;
  }
}

  .faculty-member h2 {
    font-size: 1.5rem;
    font-weight: bold;
    margin-bottom: 10px;
  }
  
  .faculty-member p {
    color: #666;
    margin: 0;
  }

  

  
  
  
  /* Slider navigation styles */
  .slider-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    background-color: rgba(255, 255, 255, 0.8);
    padding: 10px;
    border: none;
    outline: none;
    transition: background-color 0.3s ease;
  }

  .slider-btn:hover {
    background-color: rgba(255, 255, 255, 0.5);
  }

  .prev-btn {
    left: 20px;
  }

  .next-btn {
    right: 20px;
  }


/* General CSS */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}

/* Custom CSS */
.container1 {
  width: 100%;
  min-height: 60vh;
  background: linear-gradient(rgba(112,26,117,255), #0b0b0b),
    url(https://github.com/MdRasen/Number-Counting-Animation/blob/main/Number%20Counting%20Animation/assets/bg.jpg?raw=true);
  background-size: cover;
  background-position: center;
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 0 8%;
}

.container1 .header1 {
  padding: 0 0 60px 0;
}

.header1 .title {
  /*font-family: "Clicker Script", cursive;*/
  font-size: 42px;
  color: #ef7e39;
}

.header1 .sub-title {
  font-size: 48px;
  line-height: 1;
}

.container1 .counters {
  width: 100%;
  display: flex;
  flex-direction: row; /* Align items side by side */
  justify-content: space-between; /* Distribute space between counters */
  gap: 10px; /* Add space between each counter */
}

.counters .counter {
  flex: 1; /* Allow each counter to take equal space */
  max-width: 180px; /* Set a max width for each counter */
  background-color: #fff;
  color: #000;
  padding: 30px 15px;
  border-radius: 20px;
  cursor: pointer;
  background-position: left bottom;
  background-repeat: no-repeat;
  transition: all 0.5s;
}

.counters .counter:hover {
  box-shadow: rgba(229, 126, 57, 0.8) 0px 2px 8px 0px;
  transform: translateY(-5px);
}

/* Counter-specific background images */
.counters .customer {
  background-image: url(https://github.com/MdRasen/Number-Counting-Animation/blob/main/Number%20Counting%20Animation/assets/counter_icon01.png?raw=true);
}

.counters .project {
  background-image: url(https://github.com/MdRasen/Number-Counting-Animation/blob/main/Number%20Counting%20Animation/assets/counter_icon02.png?raw=true);
}

.counters .employee {
  background-image: url(https://github.com/MdRasen/Number-Counting-Animation/blob/main/Number%20Counting%20Animation/assets/counter_icon03.png?raw=true);
}

.counters .award {
  background-image: url(https://github.com/MdRasen/Number-Counting-Animation/blob/main/Number%20Counting%20Animation/assets/counter_icon04.png?raw=true);
}

/* Number styling */
.counters .counter .number {
  font-size: 40px;
  font-weight: 700;
}

.counters .customer .number {
  color: #fd297b;
}

.counters .project .number {
  color: #2760dc;
}

.counters .employee .number {
  color: #58c0cf;
}

.counters .award .number {
  color: #a667f8;
}

/* Detail text styling */
.counters .counter .detail {
  font-size: 18px;
  font-weight: 500;
}



.font-bold {
    font-weight: bold;
}



.flex {
    display: flex;
    align-items: center; /* Align items vertically in the center */
}

.text-6xl {
    font-size: 3.75rem; /* Adjust this value according to your design */
    
}


.text-xl {
    font-size: 1.25rem; /* Adjust this value according to your design */
}

.text-2xl {
    font-size: 1.5rem; /* Adjust this value according to your design */
}

.text-container {
    display: inline-block; /* Ensures the container fits the text */
    padding: 0.25rem; /* Add some padding for better visual */
    box-shadow: 4px 4px 4px rgba(112,26,117,255); /* Box shadow effect */
    margin-left: 0.5rem; /* Adjust the margin to space out the text containers */
    height:100px;
    text-align: center;
    transition: transform 0.3s, box-shadow 0.3s; /* Smooth transition */
}

.text-container:hover{
background-color: #eb85f4;
transform: scale(1.1); /* Enlarge effect */
box-shadow: 4px 4px 4px rgb(255, 255, 255); /* Enhanced shadow on hover */

}

/* Courses section specific styles */
#courses {
    padding-top: 3rem;
}



.text-neutral-800 {
    color: #4a5568; /* Adjust color as needed */
}

.text-white {
    color: #ffffff; /* Adjust color as needed */
}

.text-xl {
    font-size: 1.25rem; /* Adjust font size as needed */
}

.text-6xl {
    font-size: 4rem; /* Adjust font size as needed */
}

.font-bold {
    font-weight: bold;
}

.grid {
    display: grid;
}

.grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
}

.grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

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

.grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.gap-8 {
    gap: 2rem; /* Adjust gap between grid items */
}

.justify-center {
    justify-content: center;
}

.items-center {
    align-items: center;
}

.hover\:duration-700:hover {
    transition-duration: 0.7s; /* Adjust hover transition duration */
}

.hover\:bg-lime-200:hover {
    background-color: #a7f3d0; /* Adjust hover background color */
}

.relative {
    position: relative;
}

.group {
    position: relative;
}

.group-hover\:-bottom-0:hover {
    bottom: 0;
}

.w-64 {
    width: 16rem;
}

.h-72 {
    height: 18rem;
}

.rounded-2xl {
    border-radius: 0.75rem; /* Adjust border radius */
}

.bg-cover {
    background-size: cover;
}

.bg-center {
    background-position: center;
}

.text-center {
    text-align: center;
}

.text-gray-800 {
    color: #2d3748; /* Adjust text color as needed */
}

.p-3 {
    padding: 0.75rem; /* Adjust padding as needed */
}

.flex {
    display: flex;
}

.flex-row {
    flex-direction: row;
}

.justify-between {
    justify-content: space-between;
}

.fill-current {
    fill: currentColor;
}

.stroke-current {
    stroke: currentColor;
}

.w-8 {
    width: 2rem;
}

.h-8 {
    height: 2rem;
}

.p-2 {
    padding: 0.5rem; /* Adjust padding as needed */
}

.m-1 {
    margin: 0.25rem; /* Adjust margin as needed */
}

.p-8 {
    padding: 2rem; /* Adjust padding as needed */
}




/* Responsive styles for smaller screens */



.member {
    text-align: center;
    padding: 20px;
    background-image: linear-gradient(to bottom, rgba(112,26,117,255), #ffffff);
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
    margin-right: 20px; /* Increase this value to increase the spacing */
  }
  
  .member:hover {
    transform: translateY(-5px);
  }
  
  .member img {
    width: 200px;
    height: 200px;
    object-fit: cover;
    border-radius: 50%;
    margin-bottom: 20px;
    align-items: center;
  }
  
  .member h2 {
    font-size: 1.5rem;
    font-weight: bold;
    margin-bottom: 10px;
  }
  
  .member p {
    color: #666;
    margin: 0;
  }





  .review {
    text-align: center;
    padding: 20px;
    background-image: #ffffff;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
    margin-right: 20px; /* Increase this value to increase the spacing */
  }
  
  .review:hover {
    transform: translateY(-5px);
  }
  
  .review img {
    width: 200px;
    height: 200px;
    object-fit: cover;
    border-radius: 50%;
    margin-bottom: 20px;
    align-items: center;
  }
  
  .review h2 {
    font-size: 1.5rem;
    font-weight: bold;
    margin-bottom: 10px;
  }
  
  .review p {
    color: #666;
    margin: 0;
  }



  .review {
    margin-bottom: 20px;
  }
  
  .review p {
    margin-bottom: 10px;
  }
  
  .rating {
    display: inline-block;
  }
  
  /*.star {*/
  /*  display: inline-block;*/
  /*  width: 20px;*/
  /*  height: 20px;*/
  /*  background-color: #ccc;*/
  /*  margin-right: 5px;*/
  /*  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);*/
  /*}*/
  
  
  
  .star {
    display: inline-block;
    width: 20px;
    height: 20px;
    background-color: #fde700!important;
    margin-right: 5px;
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  }
  
  
  
  
  .star.active {
    background-color: #fdd835; /* Active star color */
  }
  
  
  
  
  /* Reset and general styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}






.font-bold {
  font-weight: bold;
}

.text-white {
  color: #ffffff;
}




.grid {
  display: grid;
}

.grid-cols-1 {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

.md-grid-cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.lg-grid-cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.gap-8 {
  gap: 2rem;
}

/* Video card styles */
.bg-white {
  background-color: #ffffff;
}

.rounded-lg {
  border-radius: 0.5rem; /* Adjust as per your preference */
}

.shadow-lg {
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.overflow-hidden {
  overflow: hidden;
}

.relative {
  position: relative;
}

.block {
  display: block;
}

.w-full {
  width: 100%;
}

.h-auto {
  height: auto;
}

.absolute {
  position: absolute;
}

.inset-0 {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.flex {
  display: flex;
}

.items-center {
  align-items: center;
}

.justify-center {
  justify-content: center;
}

.w-16 {
  width: 4rem; /* Adjust as per your preference */
}

.h-16 {
  height: 4rem; /* Adjust as per your preference */
}

.transition {
  transition-property: all;
  transition-duration: 0.3s;
  transition-timing-function: ease;
}

.duration-500 {
  transition-duration: 0.5s;
}

.hover\:text-red-600:hover {
  color: #dc2626; /* Adjust as per your preference */
}

.hover\:text-red-700:hover {
  color: #d94646; /* Adjust as per your preference */
}

.hover\:scale-125:hover {
  transform: scale(1.25); /* Adjust as per your preference */
}


#navbar {
  background-color:purple;
  color:white;
  top: -80px; /* Initially hidden above viewport */
  left: 0;
  right: 0;
  z-index: 1000;
  transition: top 0.3s ease-in-out, background-color 0.3s ease-in-out;
  box-shadow: 0 4px 2px -2px rgba(0, 0, 0, 0.1); /* Optional: Add shadow */
}



#navbar.sticky {
  top: 0; /* Stick to the top */
  background-color: white; /* White background when sticky */
  color: purple; /* Purple text color when sticky */
}

.container {
  /*display: flex;*/
  justify-content: space-between;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
  padding: 10px 20px;
}

.logo img {
  height: 60px; /* Adjust as needed */
}

.links {
  display: flex;
  gap: 20px;
}

/* .links a {
  color: white; /* Purple color for links 
  text-decoration: none;
  font-size: 16px;
  transition: color 0.3s ease-in-out;
} */

.links a:hover {
  color: #ffffff; /* Black text on hover */
}

.enroll-btn button {
  padding: 10px 20px;
  border: 2px solid #b300b3;
  background-color: #fff;
  color: #b300b3;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
  border-radius:5px;
}

.enroll-btn button:hover {
  background-color:black; /* Purple background on hover */
  color: #fff; /* White text on hover */
  border-color: #b300b3; /* Purple border on hover */
  transform: scale(1.1); /* Scale up the button by 10% */
}



.best-btn button {
  padding: 10px 20px;
  border: 2px solid #b300b3;
  background-color: #fff;
  color: #b300b3;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
  border-radius:5px;
}

.best-btn button:hover {
  background-color:black; /* Purple background on hover */
  color: #fff; /* White text on hover */
  border-color: #b300b3; /* Purple border on hover */
  transform: scale(1.1); /* Scale up the button by 10% */
}





.site-footer .container {
  max-width: 1200px;
  margin: 0 auto;
}

.site-footer .column {
  display: flex;
  flex-wrap: wrap;
  justify-content: center; /* Center the columns */
  gap: 60px; /* Reduced space between columns */
}

.site-footer .col-md-3, .site-footer .col-sm-6 {
  display: flex;
  flex-direction: column;
  align-items: center; /* Center the items horizontally */
  text-align: center; /* Center the text */
  margin-bottom: 10px; /* Reduced space between columns in smaller screens */
  width: 200px; /* Set a fixed width for each column */
}

.site-footer h6 {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 10px; /* Reduced margin */
  text-transform: uppercase;
}

.site-footer p {
  margin-bottom: 10px; /* Reduced margin */
  line-height: 1.5;
}

.site-footer .footer-links {
  list-style: none;
  padding: 0;
}

.site-footer .footer-links li {
  margin-bottom: 5px; /* Reduced margin */
}

.site-footer .footer-links a {
  color: #ffffff;
  text-decoration: none;
}

.site-footer .footer-links a:hover {
  color: #007bff;
}

.site-footer .social-icons {
  list-style: none;
  padding: 0;
  display: flex;
  justify-content: center; /* Center the icons */
  gap: 10px; /* Add space between the icons */
}

.site-footer .social-icons li {
  display: inline-block;
}

.site-footer .social-icons a {
  color: #ffffff;
  font-size: 20px;
  text-decoration: none;
}

.site-footer .social-icons a:hover {
  color: #007bff;
}

.site-footer .text-center {
  text-align: center;
}

.site-footer .copyright-text {
  margin-top: 10px; /* Reduced margin */
  color: #ffffff;
}

/*.custom-radius {*/
/*  border-radius: 800px 800px 5px 5px; */
/*}*/


.tick-list {
  list-style: none; /* Remove default bullets */
  padding-left: 0;
}

.tick-list li {
  position: relative;
  margin-bottom: 10px; /* Add spacing between list items */
  opacity: 1; /* Ensure list items are initially visible */
  animation: fadeInUp 0.5s ease-in-out forwards; /* Apply animation */
  display: flex;
  align-items: center;
}

.tick-list li:nth-child(1) {
  animation-delay: 0.1s;
}

.tick-list li:nth-child(2) {
  animation-delay: 0.3s;
}

.tick-list li:nth-child(3) {
  animation-delay: 0.5s;
}

.tick-list li:nth-child(4) {
  animation-delay: 0.7s;
}

.tick-list li i {
  font-size: 1.5em; /* Make the icon bigger */
  margin-right: 10px; /* Space between icon and text */
  color: purple; /* Change tick mark color */
  
  transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out; /* Apply transition */
}

.tick-list li:hover i {
  transform: translateY(-10px) scale(1.2); /* Move up and enlarge on hover */
  opacity: 1; /* Ensure visibility */
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px); /* Start position */
  }
  to {
    opacity: 1;
    transform: translateY(0); /* End position */
  }
}

 /* Footer Patterns */
.pattern1, .pattern2 {
  position: absolute;
  top: 0;
  width: 50%;
  height: 100%;
  background-repeat: repeat; /* Ensure patterns repeat */
  background-size: auto; /* Adjust background size */
  z-index: 0; /* Ensure patterns are above content */
  transition: transform 0.3s ease; /* Add a smooth transition for transform */
  animation: moveUpDown 5s ease-in-out infinite alternate; /* Apply animation */
}


.pattern1 {
  left: 0;
 /*background-image: url('https://mycodecheck.com/ilacad/data_assets/Images/footer-shape-1.png');*/
}

.pattern2 {
  right: 0;
 /*background-image: url('https://mycodecheck.com/ilacad/data_assets/Images/footer-shape-2.png');*/
}

/* Main Footer Styles */
.site-footer {
  position: relative;
  background: linear-gradient(to bottom, #140132, #4b1547); /* Gradient background */
  color: white;
  padding: 50px 0;
  text-align: center;
  z-index: 0; /* Ensure footer content is behind patterns */
}


 .container {
  padding-top: 20px;
}

.card {
  transition: transform 0.2s ease;
}

.card:hover {
  transform: scale(1.05);
}


.logo img {
   
    transition: max-height 0.3s ease; /* Smooth transition when logo changes */
}

.hidden {
    display: none; /* Hide the element */
}

/*.....................css by awadh..................*/
.myconent h3{
        padding: 10px;
    background: #a34aa3;
    font-size: 17px;
    font-weight: 600;
    border-radius: 10px;
    margin: 10px 0px;
    color: #fff;
}

/*end*/



@media (max-width: 768px) {
    .enroll-btn {
        display: none;
    }
}








/* Define the animation */
@keyframes slideInRight {
    from {
        transform: translateX(100%);
    }
    to {
        transform: translateX(0);
    }
}

/* Apply the animation to the content */
.animate-slide {
    animation: slideInRight 1s ease;
}


/* Add your CSS styles here */

.video-player {
    width: 100%;
    
    height: auto;
}

/* Slider navigation styles */
.slider2-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    background-color: rgba(255, 255, 255, 0.8);
    padding: 10px;
    border: none;
    outline: none;
    transition: background-color 0.3s ease;
  }

  .slider2-btn:hover {
    background-color: rgba(255, 255, 255, 0.5);
  }


  @keyframes slideInFromLeft {
    0% {
      opacity: 0;
      transform: translateX(-50px);
    }
    100% {
      opacity: 1;
      transform: translateX(0);
    }
  }

  @keyframes fadeIn {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }

  /* Apply animations to specific elements */
  .animate-slide {
    animation: slideInFromLeft 1s ease forwards;
  }

  .animate-fade {
    animation: fadeIn 1s ease forwards;
  }


  @keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(-50px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}







/* Animation Effect */
.pattern1:hover {
  transform: translateX(-10px); /* Move pattern1 to the left on hover */
}

.pattern2:hover {
  transform: translateX(10px); /* Move pattern2 to the right on hover */
}


@keyframes moveUpDown {
  0%, 100% {
      transform: translateY(0);
  }
  50% {
      transform: translateY(-10px); /* Adjust the vertical distance */
  }
}


.footer .content .container .column {
    opacity: 0; /* Initially hidden */
    animation: slideIn 1s forwards; /* Apply animation */
}

.footer .content .container .column:nth-child(1) { animation-delay: 0.2s; }
.footer .content .container .column:nth-child(2) { animation-delay: 0.4s; }
.footer .content .container .column:nth-child(3) { animation-delay: 0.6s; }
.footer .content .container .column:nth-child(4) { animation-delay: 0.8s; }
/* ... */

/*Home Page*/
h2{
  text-align:center;
  padding: 0px;
}

.slick-slider
{
    position: relative;
    display: block;
    box-sizing: border-box;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
            user-select: none;
    -webkit-touch-callout: none;
    -khtml-user-select: none;
    -ms-touch-action: pan-y;
        touch-action: pan-y;
    -webkit-tap-highlight-color: transparent;
}

.slick-list
{
    position: relative;
    display: block;
    overflow: hidden;
    margin: 0;
    padding: 0;
}
.slick-list:focus
{
    outline: none;
}
.slick-list.dragging
{
    cursor: pointer;
    cursor: hand;
}

.slick-slider .slick-track,
.slick-slider .slick-list
{
    -webkit-transform: translate3d(0, 0, 0);
       -moz-transform: translate3d(0, 0, 0);
        -ms-transform: translate3d(0, 0, 0);
         -o-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
}

.slick-track
{
    position: relative;
    top: 0;
    left: 0;
    display: block;
}
.slick-track:before,
.slick-track:after
{
    display: table;
    content: '';
}
.slick-track:after
{
    clear: both;
}
.slick-loading .slick-track
{
    visibility: hidden;
}

.slick-slide
{
    display: none;
    float: left;
    height: 100%;
    min-height: 1px;
}
[dir='rtl'] .slick-slide
{
    float: right;
}
.slick-slide img
{
    display: block;
}
.slick-slide.slick-loading img
{
    display: none;
}
.slick-slide.dragging img
{
    pointer-events: none;
}
.slick-initialized .slick-slide
{
    display: block;
}
.slick-loading .slick-slide
{
    visibility: hidden;
}
.slick-vertical .slick-slide
{
    display: block;
    height: auto;
    border: 1px solid transparent;
}
.slick-arrow.slick-hidden {
    display: none;
}


.customer-logos .slick-slide {
    text-align: center; /* Center the content horizontally */
}

.customer-logos .slick-slide img {
    display: inline-block; /* Ensures the image remains inline and can be centered */
}

.logo-img {
    width: 180px!important; /* Set the width you want for all logos */
    height:110px!important; /* Maintains aspect ratio */
    /*object-fit: contain; */
}



.accordion-item {
  position: relative;
  background-size: cover;
  background-position: center;
  padding: 20px;
  height: 300px; /* Adjust height as needed */
}

/*.vertical-text {*/
/*  position: absolute;*/
/*  top: 0;*/
/*  left: 0;*/
/*  transform-origin: top left;*/
/*  transform: rotate(-90deg) translateX(-100%);*/
/*  font-size:30px;*/
/*  background-color: rgb(128, 0, 128, 0.8);*/
/*  color:white;*/
/*  padding: 10px;*/
/*  z-index:1;*/
 
/*  width: 300px;*/
  /*height: auto;*/
  
  /* Apply border-radius only to the top-left and bottom-left corners */
/*  border-bottom-right-radius: 10px;  */
/*  border-bottom-left-radius: 10px; */
 
/*}*/
.accordion-overlay h2 {
  color: white;
  font-size: 24px;
  margin-top: 20px;
}

.text-6xl{
 
            color: white;
            font-size: 70px;
            font-weight: 700;
            letter-spacing: 8px;
            margin-bottom: 20px;
            
            position: relative;
            animation: text 3s 1;
        }
 
        .mb-2{
            font-family: Georgia, serif;
        }
 
        @keyframes text {
            0% {
                color: black;
                margin-bottom: -40px;
            }
 
            30% {
                letter-spacing: 25px;
                margin-bottom: -40px;
            }
 
            85% {
                letter-spacing: 8px;
                margin-bottom: -40px;
            }
        }


 .banner-container {
            position: absolute;
            text-align: center;
            color: white;
        }

        .centered-text {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            /*background-color: rgba(255, 255, 255, 0.7); */
            padding: 20px;
            border-radius: 10px;
            color: black; /* Text color */
            font-weight: bold;
            font-size: 2rem;
        }

        .banner-image {
            width: 100%;
            height: auto;
            max-height: 100vh;
        }
        
        
.animate-fade {
    opacity: 0;
    animation: fadeInTopToBottom 1s ease-out forwards;
}

.slider-container {
    width: 80%;
    margin: 0 auto;
    padding: 20px;
}
  


.faculty-member {
    position: relative;
    text-align: center;
    width: 200px; /* Set size of the faculty member card */
    margin: 1rem; /* Adjust spacing as needed */
}



.faculty-image-overlay:hover {
  transform: scale(1.05);
  /*box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);*/
  /*background-color:purple;*/
}

.faculty-image {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensure image covers the circular container */
}



.faculty-image-overlay {
    position: relative;
    width: 100%;
    height: 100%; /* Maintain the circular shape */
    border-radius: 50%; /* Circular container */
    overflow: hidden; /* Hide overflow to maintain circle shape */
    margin-bottom: 1rem; /* Space between image and text */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Transition for scale and shadow */
}


.faculty-overlay-box {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.5); /* Optional: adds an overlay effect */
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
    border-radius: 100%; /* Match the circular shape */
    z-index: 1; /* Ensure overlay appears above other content */
}

/* Reveal the overlay on hover */
.faculty-image-overlay:hover .faculty-overlay-box {
    opacity: 1;
}


.slider-container {
    max-width: 1440px; /* Limits the width of the slider container */
    margin: 0 auto; /* Centers the slider container */
    padding: 0 15px; /* Optional: adds padding to prevent content from touching the screen edges */
}

.slider1 {
    display: flex;
    flex-wrap: wrap; /* Ensures items wrap to the next row if necessary */
    justify-content: space-between; /* Distributes space between the items */
}

.faculty-member {
    flex: 1 0 21%; /* Each item takes up 21% of the row, allowing for 4 items per row with some space between */
    margin-bottom: 20px;
    text-align: center; /* Centers text content */
}

.faculty-image-overlay {
    position: relative;
    overflow: hidden;
    border-radius: 10px; /* Optional: adds rounded corners to the images */
}

.faculty-image {
    width: 100%;
    height: auto;
    display: block;
}



.faculty-image-overlay:hover .faculty-overlay-box {
    opacity: 1; /* Optional: makes the overlay visible on hover */
}

@media (max-width: 1500px) {
    .faculty-member {
        flex: 1 0 22%; /* Adjusts the width of each item slightly to fit better on smaller screens */
    }
}

@media (max-width: 768px) {
    .faculty-member {
        flex: 1 0 48%; /* On smaller screens, each item takes up almost half the row */
    }
}

@media (max-width: 480px) {
    .faculty-member {
        flex: 1 0 100%; /* On very small screens, each item takes up the full width of the row */
    }
}



@media (max-width: 320px) {
.slider-container{
   width:100%!important; 
}

/* Mobile-specific styles */
@media (max-width: 768px) {
    .accordion-item {
        height: 200px; /* Adjust based on content */
    }

    .vertical-text {
        font-size: 1rem; /* Adjust font size */
    }

    .accordion-overlay {
        bottom: 0;
        padding: 5px;
    }
}

@media (max-width: 320px) {
    .accordion-item {
        height: 150px; /* Further adjustment for very small screens */
    }

    .vertical-text {
        font-size: 0.8rem; /* Further adjust font size */
    }

    .accordion-overlay {
        padding: 2px;
    }
    
    #accordion {
   
     height:100px!important; 
 
}
}

@media (max-width: 768px) {
            .text {
                top: 40%;
                width: 90%;
                padding: 0 10px;
            }
            .text h1 {
                font-size: 4rem;
            }
            .text h2 {
                font-size: 2rem;
            }
            .text ul {
                font-size: 1rem;
            }
            .custom-button {
                padding: 1rem 2rem;
                font-size: 1rem;
            }
        }
        @media (max-width: 480px) {
            .text {
                top: 30%;
                width: 95%;
                padding: 0 5px;
            }
            .text h1 {
                font-size: 3rem;
            }
            .text h2 {
                font-size: 1.5rem;
            }
            .text ul {
                font-size: 0.875rem;
            }
            .custom-button {
                padding: 0.75rem 1.5rem;
                font-size: 0.875rem;
            }
        }
        
.slider-gallery {
    position: relative;
    text-align: center;
    width: 200px; /* Set size of the faculty member card */
    margin: 1rem; /* Adjust spacing as needed */
}


.slider-gallery {
    flex: 1 0 21%; /* Each item takes up 21% of the row, allowing for 4 items per row with some space between */
    margin-bottom: 20px;
    text-align: center; /* Centers text content */
}


@media (max-width: 1500px) {
   .slider-gallery {
        flex: 1 0 22%; /* Adjusts the width of each item slightly to fit better on smaller screens */
    }
}

@media (max-width: 768px) {
   .slider-gallery {
        flex: 1 0 48%; /* On smaller screens, each item takes up almost half the row */
    }
}

@media (max-width: 480px) {
    .slider-gallery {
        flex: 1 0 100%; /* On very small screens, each item takes up the full width of the row */
    }
}

@media (max-width: 768px) {
  .vertical-text {
  width: auto;
  height: auto; /* Adjust based on your text length */
 
}}
}



* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

main {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	max-width: 100vw;
	min-height: 100vh;
	overflow-x: hidden;
}
p {
	line-height: 1;
}
a {
	color: crimson;
	text-decoration: none;
}
img {
	-moz-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
	user-select: none;
	pointer-events: none;
}
#gallery {
	position: relative;
	left: calc(-1 * var(--adjust-size));
	display: grid;
	/*grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));*/
	grid-template-columns: repeat(4, 1fr); /* Ensures 4 columns */
	gap: 30px;
	max-width: 100vw;
	padding: 20px;
	-webkit-perspective: 0;
	perspective: 0;
}
#gallery figure:nth-child(7n) {
	--duration: 1s;
	--pin-color: crimson;
}
#gallery figure:nth-child(7n + 1) {
	--duration: 1.8s;
	--pin-color: hotpink;
}
#gallery figure:nth-child(7n + 2) {
	--duration: 1.3s;
	--pin-color: magenta;
}
#gallery figure:nth-child(7n + 3) {
	--duration: 1.5s;
	--pin-color: orangered;
}
#gallery figure:nth-child(7n + 4) {
	--duration: 1.1s;
	--pin-color: darkorchid;
}
#gallery figure:nth-child(7n + 5) {
	--duration: 1.6s;
	--pin-color: deeppink;
}
#gallery figure:nth-child(7n + 6) {
	--duration: 1.2s;
	--pin-color: mediumvioletred;
}
#gallery figure:nth-child(3n) {
	--angle: 3deg;
}
#gallery figure:nth-child(3n + 1) {
	--angle: -3.3deg;
}
#gallery figure:nth-child(3n + 2) {
	--angle: 2.4deg;
}
#gallery figure:nth-child(odd) {
	--direction: alternate;
}
#gallery figure:nth-child(even) {
	--direction: alternate-reverse;
}
#gallery figure {
	--angle: 3deg;
	--count: 5;
	--duration: 1s;
	--delay: calc(-0.5 * var(--duration));
	--direction: alternate;
	--pin-color: red;

	position: relative;
	display: inline-block;
	margin: var(--adjust-size);
	padding: 0.5rem;
	border-radius: 5px;
	box-shadow: 0 7px 8px rgba(0, 0, 0, 0.4);
	width: 100%;
	height: auto;
	text-align: center;
	background-color: ghostwhite;
	background-image: url("https://images.unsplash.com/photo-1629968417850-3505f5180761?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2OTMzMjQ3ODJ8&ixlib=rb-4.0.3&q=80&w=500");
	background-size: cover;
	background-position: center;
	background-blend-mode: multiply;

	transform-origin: center 0.22rem;
	will-change: transform;
	break-inside: avoid;
	overflow: hidden;
	outline: 1px solid transparent;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}
#gallery.active figure {
	animation-duration: var(--duration), 1.5s;
	animation-delay: var(--delay),
		calc(var(--delay) + var(--duration) * var(--count));
	animation-timing-function: ease-in-out;
	animation-iteration-count: var(--count), 1;
	animation-direction: var(--direction), normal;
	animation-fill-mode: both;
	animation-name: swing, swingEnd;
}
#gallery figure:after {
	position: absolute;
	top: 0.22rem;
	left: 50%;
	width: 0.7rem;
	height: 0.7rem;
	content: "";
	background: var(--pin-color);
	border-radius: 50%;
	box-shadow: -0.1rem -0.1rem 0.3rem 0.02rem rgba(0, 0, 0, 0.5) inset;
	filter: drop-shadow(0.3rem 0.15rem 0.2rem rgba(0, 0, 0, 0.5));
	transform: translateZ(0);
	z-index: 2;
}
figure img {
	aspect-ratio: 1 /1;
	width: 100%;
	object-fit: cover;
	display: block;
	border-radius: 5px;
	margin-bottom: 10px;
	z-index: 1;
}
figure figcaption {
	font-size: 14px;
	font-weight: 400;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	z-index: 1;
}
figure h2 {
	color: crimson;
	font-size: 22px;
}
figure p {
	font-size: 17px;
}
figure small {
	font-size: 12px;
}
figure > div {
	width: 100%;
	height: 100%;
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
}
@keyframes swing {
	0% {
		transform: rotate3d(0, 0, 1, calc(-1 * var(--angle)));
	}
	100% {
		transform: rotate3d(0, 0, 1, var(--angle));
	}
}
@keyframes swingEnd {
	to {
		transform: rotate3d(0, 0, 1, 0deg);
	}
}
#info {
	position: relative;
	text-align: center;
	z-index: 1;
}
#info a {
	font-size: 1.1rem;
}

@media (max-width: 1200px) {
    #gallery {
        grid-template-columns: repeat(3, 1fr); 
    }
}

@media (max-width: 800px) {
    #gallery {
        grid-template-columns: repeat(2, 1fr); 
    }
}

@media (max-width: 600px) {
    #gallery {
        grid-template-columns: 1fr; 
    }
}


/*Calender Page*/


.event-container {
    display: flex;
    flex-direction: column;
    background-color: #fff;
    margin: 20px auto;
    padding: 20px;
    width:80%;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.event-date {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #f08080;
    color: white;
    padding: 10px;
    border-radius: 8px;
    margin-bottom: 20px;
}


.event-time {
    background-color: #ffcc00;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 14px;
    color: white;
    font-weight: bold;
    align-self: start;
}

.day {
    font-size: 1.2em;
}

.date-number {
    font-size: 2.5em;
}

.event-details {
    margin-bottom: 20px;
}

.event-header {
    display: flex;
    flex-direction: column;
    margin-bottom: 10px;
}

.event-date-range {
    background-color: #ffcc00;
    padding: 5px;
    border-radius: 4px;
    margin-bottom: 5px;
}

.event-title {
    font-size: 1.5em;
    font-weight: bold;
}

.event-venue, .event-description {
    margin-bottom: 10px;
}

.event-image img {
    width: 100%;
    height: auto;
    border-radius: 8px;
}

@media (min-width: 768px) {
    .event-container {
        flex-direction: row;
    }

    .event-date {
        margin-right: 20px;
        margin-bottom: 0;
    }

    .event-details {
        flex: 1;
    }

    .event-image img {
        max-width: 300px;
        height: auto;
    }
}


/*Calender Detail*/
      .custom-padding {
        padding-left: 140px; 
        padding-right: 140px;
     }
    
    
 .popover-custom {
            display: none;
            position: absolute;
            top: 0;
            left: 0;
            width: 300px;
            border: 1px solid #2E7D71;
            border-radius: 5px;
            background-color: #fff;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            z-index: 1000;
        }
        .popover-header-custom {
            background-color:purple;
            color: #fff;
            text-align: center;
            padding: 10px;
            border-bottom: 1px solid #2E7D71;
            border-radius: 5px 5px 0 0;
        }
        .popover-body-custom {
            padding: 15px;
        }
        .form-control, .btn {
            margin-bottom: 10px;
        }
        .btn-submit {
            background-color:#2E7D71;
            color: #fff;
        }
        .btn-submit:hover {
            background-color: #1B4D4B;
        }
        
        .custom-margin-left {
            margin-left: 140px;
        }
        
    @media (max-width: 767px) {
    .custom-padding {
     padding-left:20px; 
     padding-right:20px; 
    }   
    
    
    .custom-margin-left {
            margin-left: 20px;
        }}