@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Varela+Round&display=swap');
  * {
  margin:0;
  padding:0;
  box-sizing:border-box;
  font-family:"Varela Round",serif;
}
html,body {
  background-color:#f9f4f8;
  display:flex;
  flex-direction:column;
}
/*header*/
header {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:25px;
  background-color:#753BBD;
  color:white;
  position:sticky;
  top:0;
  z-index:1000;
}
.logo {
  font-size:1.5rem;
  padding-left:20px;
}
.logo img {
  width:140px;
  margin-top:10px;
  transition:transform 0.3s ease-in-out;
}
/* Navbar */
nav {
  display:flex;
  justify-content:space-between;
  align-items:center;
  background-color:#753BBD;
  padding:15px 40px;
  border-radius:30px;
}
/* When navbar is active (scroll down or interact) */
nav.active {
  background-color:#9c27b0;
  /* Slightly lighter purple */
}
/* Navbar links */
.nav-links {
  list-style:none;
  display:flex;
  gap:2px;
}
.nav-links li a {
  color:white;
  text-decoration:none;
  padding:8px 16px;
  border-radius:41px;
}
/* Hover effect for links */
.nav-links li a:hover {
  background-color:#fff34fcf;
}
/* Sidebar styles */
.sidebar {
  height:100%;
  width:250px;
  position:fixed;
  top:0;
  left:0;
  background-color:#753BBD;
  overflow-x:hidden;
  transition:0.5s;
  padding-top:60px;
  z-index:1000;
}
.sidebar a {
  padding:8px 8px 8px 32px;
  text-decoration:none;
  font-size:25px;
  color:white;
  display:block;
  transition:0.3s;
}
/* Hover effect for sidebar links */
.sidebar a:hover {
  background-color:#530363;
  border-radius:20px;
}
.sidebar .closebtn {
  position:absolute;
  top:0;
  right:25px;
  font-size:36px;
  margin-left:50px;
}
#sidebarBtn {
  font-size:30px;
  cursor:pointer;
  color:white;
}
/* Initially hide sidebar button */
#sidebarBtn {
  display:none;
}
.content {
  margin-left:260px;
  /* Ensure content doesn't overlap with sidebar */
  padding:20px;
}
/* Media queries for different screen sizes */

/* Mobile screens (max-width:480px) */
@media screen and (max-width:480px) {
  .sidebar {
  width:0;
  position:fixed;
}
.content {
  margin-left:0;
}
nav {
  display:none;
}
#sidebarBtn {
  display:block;
  /* Show sidebar button on mobile */
}
.sidebar a {
  font-size:18px;
  line-height:40px;
}
.logo img {
  width:100px;
  margin-top:10px;
  transition:transform 0.3s ease-in-out;
}
}/* Tablets (min-width:481px and max-width:768px) */
@media screen and (min-width:481px) and (max-width:768px) {
  .sidebar {
  width:0;
  position:fixed;
}
.content {
  margin-left:0;
}
nav {
  display:none;
}
#sidebarBtn {
  display:block;
  /* Show sidebar button on tablets */
}
.sidebar a {
  font-size:20px;
  line-height:40px;
}
}/* Laptops and Small Desktops (min-width:769px and max-width:1024px) */
@media screen and (min-width:769px) and (max-width:1024px) {
  .sidebar {
  display:none;
}
.content {
  margin-left:260px;
}
nav {
  display:flex;
}
#sidebarBtn {
  display:none;
}
}/* Large Screens and Desktops (min-width:1025px) */
@media screen and (min-width:1025px) {
  .sidebar {
  display:none;
}
.content {
  margin-left:260px;
}
nav {
  display:flex;
}
#sidebarBtn {
  display:none;
}
}/* Content */
  .content {
  margin-left:260px;
  /* Ensure content doesn't overlap with sidebar */
    padding:20px;
}
.event {
  margin-left:30px;
  margin-bottom:100px;
}
.event h1 {
  font-size:1.4rem;
  position:relative;
  width:max-content;
  margin:60px;
  animation:appear ease-in-out;
  animation-timeline:view();
  animation-range:entry -10% cover 30%;
}
.event h1::after {
  content:'';
  font-size:1.4rem;
  background:#530363;
  height:4px;
  width:100%;
  position:absolute;
  bottom:0;
  left:0;
  transition:400ms;
}
.event h1:hover::after {
  width:0;
}
.testimonials {
  margin-left:30px;
  margin-bottom:100px;
}
.testimonials h1 {
  font-size:1.4rem;
  position:relative;
  width:max-content;
  margin:60px;
  animation:appear ease;
  animation-timeline:view();
  animation-range:entry -10% cover 30%;
}
.testimonials h1::after {
  content:'';
  font-size:1.4rem;
  background:#530363;
  height:4px;
  width:100%;
  position:absolute;
  bottom:0;
  left:0;
  transition:400ms;
}
.testimonials h1:hover::after {
  width:0;
}
.card {
  width:190px;
  height:254px;
  background:#dadadaca;
  position:relative;
  display:flex;
  place-content:center;
  place-items:center;
  overflow:hidden;
  border-radius:20px;
  margin:30px;
  animation:appear ease;
  animation-timeline:view();
  animation-range:entry -10% cover 30%;
}
.card h2 {
  z-index:1;
  color:white;
  font-size:1.4rem;
  text-align:center;
}
.card::before {
  content:'';
  position:absolute;
  width:100px;
  background-image:linear-gradient(180deg,rgba(218,255,6,0.574),rgba(255,48,255,0.618));
  height:130%;
  animation:rotBGimg 5s linear infinite;
  transition:all 0.5s ease;
}
@keyframes rotBGimg {
  from {
  transform:rotate(0deg);
}
to {
  transform:rotate(360deg);
}
}.card::after {
  content:'';
  position:absolute;
  background:#dadada;
  inset:5px;
  border-radius:15px;
}
.card:hover:before {
  background-image:linear-gradient(180deg,rgb(81,255,0),purple);
  animation:rotBGimg 3.5s linear infinite;
}
/* Contact Footer */
.contact-footer {
  padding:20px;
  color:#753BBD;
  text-align:center;
  border-radius:5px;
  /* Smaller border-radius */
  font-family:'Arial',sans-serif;
  position:relative;
  overflow:hidden;
}
.contact-footer h3 {
  font-size:20px;
  font-weight:600;
  margin-bottom:15px;
  letter-spacing:1px;
  position:relative;
}
.contact-footer h3::after {
  content:"";
  position:absolute;
  left:50%;
  bottom:-5px;
  transform:translateX(-50%);
  width:30px;
  /* Smaller underline */
  height:2px;
  background-color:#ffd700;
  /* Accent color for underline */
  border-radius:10px;
  animation:underlineAnim 1.5s infinite;
}
.contact-footer .social-links {
  display:flex;
  justify-content:center;
  gap:10px;
  /* Reduced gap between icons */
  margin-top:15px;
}
.contact-footer .social-links a {
  font-size:20px;
  /* Equalized and smaller icon size */
  color:#fff;
  background-color:#753BBD;
  /* Dark background for icons */
  width:40px;
  /* Smaller circle size */
  height:40px;
  /* Equal height and width for circle */
  display:flex;
  justify-content:center;
  align-items:center;
  text-decoration:none;
  border-radius:50%;
  /* Perfect circle */
  border:2px solid transparent;
  transition:all 0.3s ease;
}
.contact-footer .social-links a:hover {
  transform:translateY(-3px);
  /* Slight lift effect */
  background-color:#ffd700;
  /* Accent color for hover */
  color:#fff;
  box-shadow:0 5px 15px rgba(255,111,97,0.3);
  /* Soft glowing effect */
  border:2px solid #ffd700;
  /* Accent border on hover */
}
.contact-footer .social-links a:active {
  transform:translateY(1px);
  /* Slight downward effect on click */
  box-shadow:0 5px 15px rgba(255,111,97,0.5);
  /* Stronger glow on click */
}
/* Keyframe for the underline animation */
@keyframes underlineAnim {
  0% {
  width:30px;
}
50% {
  width:45px;
}
100% {
  width:30px;
}
}@keyframes appear {
  from {
  opacity:0;
  /*scale:0.5;
  */
    transform:translateX(-100px);
}
to {
  opacity:1;
  /*scale:1;
  */
    transform:translateX(0px);
}
}@media screen and (max-width:480px) {
  .sidebar {
  width:0;
  position:fixed;
}
.content {
  margin-left:0;
}
nav {
  display:none;
}
#sidebarBtn {
  display:block;
}
.sidebar a {
  font-size:18px;
  line-height:40px;
}
.logo img {
  width:100px;
  margin-top:10px;
  transition:transform 0.3s ease-in-out;
}
}/* Tablets (min-width:481px and max-width:768px) */
  @media screen and (min-width:481px) and (max-width:768px) {
  .sidebar {
  width:0;
  position:fixed;
}
.content {
  margin-left:0;
}
nav {
  display:none;
}
#sidebarBtn {
  display:block;
}
.sidebar a {
  font-size:20px;
  line-height:40px;
}
}/* Laptops and Small Desktops (min-width:769px and max-width:1024px) */
  @media screen and (min-width:769px) and (max-width:1024px) {
  .sidebar {
  display:none;
}
.content {
  margin-left:260px;
}
nav {
  display:flex;
}
#sidebarBtn {
  display:none;
}
}/* Large Screens and Desktops (min-width:1025px) */
  @media screen and (min-width:1025px) {
  .sidebar {
  display:none;
}
.content {
  margin-left:260px;
}
nav {
  display:flex;
}
#sidebarBtn {
  display:none;
}
}.copywrite {
  padding-top:15px;
  padding-bottom:15px;
  text-align:center;
  color:#753BBD;
}