:root{
  --primary-color: #11121a;
  --hover-color: #272832;
  --accent-color: #0071FF;
  --text-color: #c9c9c9;
}
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html{
  font-family: Poppins, 'Segoe UI', sans-serif;
  color: var(--text-color);
  scroll-behavior: smooth; /*For bookmark links*/
}
.container{
  width: 80%;
  margin: 0 auto;
  padding: 20px;
}
body{
  min-height: 100vh;
  min-height: 100dvh;
  background-color: var(--primary-color);  
  font-family: 'Poppins', sans-serif;
  margin: 0;
  padding: 0;
}
main{
  padding: min(5em, 7%);
}
main p{
  margin-top: .35em;
}
nav{
  background-color: var(--primary-color);
  border-bottom: 1px solid var(--hover-color);
}
nav ul{
  list-style: none;
  display: flex;
}
nav .home-li{
  margin-right: auto;
}
nav li{
  display: flex;
}
nav a{
  display: flex;
  text-decoration: none;
  color: var(--text-color);
  padding: 1em 2em;
  transition: background-color 150ms ease;
}
nav a:hover{
  background-color: var(--hover-color);
}
/* nav a.active-link{
  border-bottom: 2px solid var(--text-color);
} */
nav a.accent-link{
  background-color: #A294F9 !important;
  padding: 0%;
  display: inline-block;
  border: none;
  cursor: pointer;
  background: none;
  font-weight: 600;
  text-decoration: none;
  letter-spacing: -0.05em;
  padding: 0.5em;
  margin-top: 0.5em;
  height: 50px;;
  color: rgb(56, 56, 56);
  background-color: #FF4C4C;
  border-radius: 6px;
  box-shadow: 0 10px 20px rgba(162, 148, 249, 0.5), 
                0 6px 6px rgba(162, 148, 249, 0.5), 
                0 0 100px -10px #A294F9; /* Updated box-shadow color */
  transition: transform 0.3s, box-shadow 0.3s;
}

a.accent-link:hover{
  transform:translateY(-10px);
  box-shadow: 0 14px 28px rgba(225, 29, 72, 0.25), 0 10px 10px
  rgba(225, 29, 72, 0.22), 0 0 120px -10px #FF4C4C;
}
#open-sidebar-button{
  display: none;
  background: none;
  border: none;
  padding: 1em;
  margin-left: auto;
  cursor: pointer;
}
#close-sidebar-button{
  display: none;
  background: none;
  border: none;
  padding: 1em;
  cursor: pointer;
}
#overlay{
  background: rgba(0, 0, 0, 0.5);
  position: fixed;
  inset: 0;
  z-index: 9;
  display: none;
}
@media screen and (max-width: 700px) {
  #open-sidebar-button, #close-sidebar-button{
    display: block;
  }
  nav{
    position: fixed;
    top: 0;
    right: -100%;
    height: 100vh;
    width: min(15em, 100%);
    z-index: 10;
    border-left: 1px solid var(--hover-color);
    transition: right 300ms ease-in-out;
  }
  nav.show{
    right: 0;
  }
  nav.show ~ #overlay{
    display: block;
  }
  nav ul{
    width: 100%;
    flex-direction: column;
  }
  nav a{
    width: 100%;
    padding-left: 2.5em;
  }
  nav a.active-link{
    border-bottom: none;
  }
  nav .home-li{
    margin-right: unset;
  }
}

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

#logo {
    font-weight: bold;
    font-size: 4.0em;
    font-family: 'Island Moments', cursive;
    margin-left: 15px; 
    font-size: 1.5rem; 
    color: #A294F9;
}
  
.fa-bars {
    width: 30px;
    height: 30px;
    cursor: pointer;
    margin-right: 15px;
}

/* Hide menu initially */
ul.hidden {
    display: none;
}


/* Show menu when toggled */
ul.visible {
    display: block;
    position: absolute;
    top: 50px; /* Adjust top position to show the menu below the icon */
    left: 0;
    right: 0; /* Make the menu stretch from left to right */
    background-color: #fff;
    padding: 0;
    border: 1px solid #ccc;
    border-radius: 0;
    width: 100%; /* Make the menu take full width of the screen */
}

ul li {
    list-style: none;
    width: 100%; /* Ensure the list items take up full width */
}

ul li a {
    display: block; /* Make the links behave like block elements */
    text-decoration: none;
    color: white;
    padding: 15px;
    /* background-color: #f5f5f5; */
    /* border-bottom: 1px solid #ddd; */
    text-align: center;
    font-size: 1em;
}


ul li a:hover {
    background-color: #B197FC; /* Highlight the background on hover */
    color: #fff; /* Change the text color on hover */
}

ul li:last-child a {
    border-bottom: none; /* Remove bottom border from the last item */
}

.btn {
    padding: 0%;
    display: inline-block;
    border: none;
    cursor: pointer;
    background: none;
    font-weight: 600;
    text-decoration: none;
    letter-spacing: -0.05em;
    padding: 0.5em 1em;
    color: rgb(56, 56, 56);
    background-color: #A294F9; /* Updated background color */
    border-radius: 6px;
    box-shadow: 0 10px 20px rgba(162, 148, 249, 0.5), 
                0 6px 6px rgba(162, 148, 249, 0.5), 
                0 0 100px -10px #A294F9; /* Updated box-shadow color */
    transition: transform 0.3s, box-shadow 0.3s;
}

.btn:hover {
    transform: translateY(-10px);
    box-shadow: 0 14px 28px rgba(162, 148, 249, 0.25), 
                0 10px 10px rgba(162, 148, 249, 0.22), 
                0 0 120px -10px #A294F9; /* Updated box-shadow color */
}

@keyframes slide {
    0% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(-100%);
    }
  }
  .logos {
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden; /* Prevent overflow */
  }
  .logos-slide {
    display: flex;
    align-items: center;
    animation: slide 15s linear infinite;
    flex-wrap: nowrap;
    gap: 20px; /* Adjust speed by changing duration */
  }
  
  .logos-slide img {
    height: 50px;
    margin: 0 20px; 
  }
  

  @media (min-width: 768px) {
    #logo {
      font-size: 2.25rem; /* Text-xl equivalent in Tailwind (20px) */
    }
  }
  @media (min-width: 1024px) {
    #logo {
      font-size: 3rem; /
    }
  }

  .violet {
    background-color: #A294F9; /* Background color behind the text */
    padding: 2px 4px; /* Adds padding around the text to make the background visible */
    padding-right: 25px;
}
.violets {
  background-color: #A294F9; /* Background color behind the text */
  padding: 2px 4px; /* Adds padding around the text to make the background visible */
  padding-right: 25px;
  padding-left: 25px;
}

 /* .custom-shape-divider-top-1736081618 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  overflow: hidden;
  line-height: 0;
} */

.custom-shape-divider-top-1736081618 .shape-fill {
  fill: white;
} 
.custom-shape-divider-top-1736081618 .shape-fills {
  fill: #A294F9;
} 

.open-sidebar-button{
  transition: transform 5.3s ease-in-out;
}

#navbar {
  transition: transform 5.3s ease-in-out; /* Smooth transition for the sidebar opening/closing */
} 

@keyframes popOut {
  0% {
    transform: scale(0.8);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.services {
  opacity: 0; /* Hidden initially */
  transform: scale(0.8); /* Slightly smaller */
  transition: transform 0.3s ease, opacity 0.3s ease; /* Ensures smooth transitions */
}

.services.animate {
  animation: none; /* Stop animation to allow hover effect */
  opacity: 1;
  transform: scale(1); /* Reset to normal size */
}

.services:hover {
  transform: scale(1.1); /* Enlarges slightly on hover */
}

.service {
  opacity: 0; /* Start hidden */
  transform: scale(0.8); /* Slightly smaller */
  transition: transform 0.5s ease, opacity 0.5s ease;
}

.service.animate {
  animation: popOut 0.5s ease-in-out forwards;
}

.swiper {
  width: 100%;
  max-width: 600px; /* Adjust as needed */
  margin: auto;
}

.swiper-slide img {
  width: 100%;
  object-fit: cover;
}

/* Customize navigation arrows */
.swiper-button-next, .swiper-button-prev {
  color: #A294F9; /* Set arrow color */
  opacity: 1; /* Ensure visibility */
  transition: color 0.3s ease;
}

.swiper-button-next:hover, .swiper-button-prev:hover {
  color: #6C5DD3; /* Optional: Add a hover effect (slightly darker color) */
}

/* Customize pagination dots */
.swiper-pagination-bullet {
  background-color: #A294F9; /* Set dot color */
  opacity: 0.8; /* Optional: Slight transparency */
  transition: transform 0.3s ease, background-color 0.3s ease;
}

.swiper-pagination-bullet-active {
  background-color: #6C5DD3; /* Highlight active dot with a slightly darker color */
  transform: scale(1.2); /* Enlarge active dot */
}

.section{
  width: full;
  height: 220vh;
  background-color: #FAF7F0;
}
.box{
  width: 300px;
  height: 400px;
  background-color: #11121a;
  border-radius: 5%;
}

@media (min-width: 600px) {
  .box {
    width: calc(300px + 20vw);
  }
}

.sticky {
  position: sticky;
  top: 0; /* Adjust as needed */
  z-index: 10; /* To make sure it stays on top */
}


/*
@media (max-width: 375px) {
  #picture {
    left: 1px;
  }
  .lorem {
    left: 25px; /
  }
}


@media (max-width: 425px) {
  #picture {
    left: 10px; 
  }
  .group-26-text {
    left: 2px; 
  }
}


@media (max-width: 768px) {
  .group-26 {
    left: 1px; 
  }
  .group-26-text {
    left: 2px; 
  }
}