@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300..700&display=swap');


*, *::before,
 *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;  /* The box-sizing property controls how the total width and height of an element are calculated by the browser.
                                 With border-box: width = content + padding + border (more intuitive)
                                 sof width:100px, only 100px width will be used for that container and no more for padding or other reasons.*/
    font-family: "Quicksand", sans-serif;
}

body{
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background-color: #060913;
    color: #fff;
    overflow: hidden;
}


#particles-js {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 0;
}


.swiper{
    width: 100%;
    padding: 50px 0;
}

.swiper-slide{
    position: relative;
    width: 320px;
    aspect-ratio: 3/4;      /* aspect ratio declares the height as 3/4 * width so,
                                height = 426.7px.  3/4 is 3 is width and height is 4.  */
    border-radius: 14px;
    border: 1px solid rgba(177,177,177,0.4);
}


.swiper-slide img{
    display: block;     /* to take complete space of width and height declare below */
    width:100%;
    height: 100%;
    object-fit: cover;      
    /*  object-fit helps to display images or videos in container. Its types are:
        fill = stretches images to fill the container, stretched if aspect ratios dont match.
        contain = scales image to fit inside container while maintaining aspect ratio. may show empty space.
        cover = scales the image to fill the container completely maintaining aspect ratio. May crop if necessary.
        none = keeps original size of iamge. Image overflows if larger than container.  */
    border-radius: inherit; /* inherits border radius value from its parent */
    user-select: none;  /*prevents the user from selecting text */
}

.title{
    position: absolute;
    bottom: 5px;
    left: 50%;
    transform: translate(-50%, -20%);   /*(x,y), translate(-50%,-20%) helps to change
                                             placement left by its own 50% width and upward by its own 20% height */
    width: max-content; /*tells the browser to make the element as wide as its content requires  */
    text-align: center;
    padding: 10px 18px;
    background: rgba(46,39,39,0.3);     /*0.3 is the alpha value, 30% opacity and 70% transparency */
    border-radius: 8px;
    border: 2px solid rgba(177,177,177,0.4);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(10px);        /*This applies a blur effect to whatever is behind the element, like a frosted glass effect  */
    -webkit-backdrop-filter: blur(10px);  /* better compatibility with Safari and older WebKit browsers.
                                            always use both for full browser support. same effect as above .
*/
    transition: all 0.5s linear;
}

.title span{
    font-size: 1.2rem;
    font-weight: 600;
}


.swiper-slide-active .title{
    bottom: -10px;          /* transitions downwards slowly because of .title above transition: all 0.5s linear */
    box-shadow: 0 20px 30px 2px rgba(25,43,205,0.6);        /* box-shadow: offset-x offset-y blur-radius spread-radius color; */
}

.swiper-pagination{
    --swiper-pagination-bottom: -6px;
}

.swiper-pagination-bullet {
width: 14px;
height: 14px;
background-color: #fff;
border-radius: 50%;     /*with 14*14, the shape is circle due to border radius 50% */
transition: all 0.3s ease-in-out;
}

.swiper-pagination-bullet-active {
    width: 32px;        /* now the bullet is not circle and is larger in comparision to otherss */
    background-color: rgba(25,43,206,1);
    border-radius: 14px;

}



@media (max-width: 1100px){
.swiper-slide{
    width: 300px;
}
}

@media (max-width: 900px){
    .swiper-slide{
    width: 250px;
}
}


@media (max-width: 700px){
    .swiper-slide{
    width: 230px;
}
}

@media (max-width: 610px){
    .swiper-slide{
    width: 200px;
}
}