@font-face {
    src: url(fonts/Montserrat-Black.ttf,Montserrat-BlackItalic.ttf,Montserrat-Bold.ttf,Montserrat-Regular.ttf,Montserrat-BoldItalic.ttf,Montserrat-ExtraBold.ttfMontserrat-ExtraBoldItalic.ttf,Montserrat-ExtraLight.ttf,Montserrat-ExtraLightItalic.ttf,Montserrat-Italic.ttf,Montserrat-Light.ttf,Montserrat-LightItalic.ttf,Montserrat-Medium.ttf,Montserrat-MediumItalic.ttf,Montserrat-SemiBold.ttf,Montserrat-SemiBoldItalic.ttf);
    font-family: montserrat, gillsans;
}

@font-face {
  font-family: 'Material Symbols Outlined';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/icon/font?kit=kJF1BvYX7BgnkSrUwT8OhrdQw4oELdPIeeII9v6oDMzByHX9rA6RzaxHMPdY43zj-jCxv3fzvRNU22ZXGJpEpjC_1v-p_4MrImHCIJIZrDCvHOejbd5zrDAt69JH_tCb8NymCIkYa8prJg&skey=b8dc2088854b122f&v=v266) format('woff2');
}

.material-symbols-outlined {
  font-family: 'Material Symbols Outlined';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-smoothing: antialiased;
}

* { 
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: montserrat, gillsans;
}

/*=============== SMALLEST VIEWPORT================*/

.container-whole { /*<-------- container for the whole swiper */
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    height: fit-content; /* <==== this controls the height of the background.
    If this should go as one file, it should have its own div */
    /*border: 2px solid red;*/
    margin: 0 auto;
}

.card-wrapper {
    max-width: 90%; /* <====== this controls the width of the slide wrapper
    and the photos */
    padding: 0 0 20px 0;
    overflow: hidden;
    margin: 0 10px 25px;
    /*border: 1px solid blueviolet;*/
}

.card-list .card-item {
    list-style: none; /* <====== this gets rid of the black dot on the left of the photo */
}

.card-list .card-item .card-link {
    user-select: none;
    display: block;
    background: #fff;
    padding: 18px;
    border-radius: 12px;
    text-decoration: none;
    border: 2px solid rgb(239, 181, 244);
    box-shadow: 0 10px 10px rgba(0, 0, 0, 0.05);
    transition: 0.2s ease;
}

.card-list .card-item .card-link:active {
    cursor:grabbing;
}

.card-list .card-item .card-link:hover {
    border-color: #5372F0;
}

.card-list .card-link .card-image { /* <======== this controls the photo */
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: 10px 10px 0 0;
}

    /*.card-list .card-link .badge-kapurpurawan { <------- ACTIVATE FOR CAPTION HEAD IS NEEDED
        color: #5372F0;
        padding: 8px 16px;
        font-size: 1rem;
        font-weight: 700;
        margin: 16px 0 18px;
        background: #DDE4FF;
        width: fit-content;
        border-radius: 50px;
    }

    .card-list .card-link .badge-photoshoot1 {
        color: #5372F0;
        padding: 8px 16px;
        font-size: 1rem;
        font-weight: 700;
        margin: 16px 0 18px;
        background: #DDE4FF;
        width: fit-content;
        border-radius: 50px;
    }

    .card-list .card-link .badge-photoshoot2 {
        color: #5372F0;
        padding: 8px 16px;
        font-size: 1rem;
        font-weight: 700;
        margin: 16px 0 18px;
        background: #DDE4FF;
        width: fit-content;
        border-radius: 50px;
    }

    .card-list .card-link .badge-photoshoot3 {
        color: #5372F0;
        padding: 8px 16px;
        font-size: 1rem;
        font-weight: 700;
        margin: 16px 0 18px;
        background: #DDE4FF;
        width: fit-content;
        border-radius: 50px;
    }

    .card-list .card-link .badge-workdesk {
        color: #5372F0;
        padding: 8px 16px;
        font-size: 1rem;
        font-weight: 700;
        margin: 16px 0 18px;
        background: #DDE4FF;
        width: fit-content;
        border-radius: 50px;
    }*/

    .card-list .card-link .card-caption {
        font-family: "Montserrat";
        font-size: .8rem;
        font-style: italic;
        color: rgba(0, 0, 0, .5);
        font-weight: 700;
        margin: 10px 0 0 0;
    }

    .card-list .card-link .card-button {
        height: 35px;
        width: 35px;
        color: #5372F0;
        border-radius: 50%;
        margin: 15px 0 5px;
        background: none;
        cursor: pointer;
        border: 2px solid #5372F0;
        transform: rotate(-45deg);
        transition: 0.4s ease;
    }

    .card-list .card-link:hover .card-button {
        color: #fff;
        background: #5372F0;
    }

    .card-wrapper .swiper-pagination-bullet {
        height: 13px;
        width: 13px;
        opacity: 0.5;
        background: #5372F0;
    }

    .card-wrapper .swiper-pagination-bullet-active {
        opacity: 1;
    }

    .card-wrapper .swiper-slide-button {
        display: none;
    }
}
/*---------------- END OF SMALLEST VIEWPORT-------------------*/

/*---------------------MEDIUM VIEWPORT ----------------------*/
@media only screen and (max-width: 1366px) and (min-width: 769px)  {
    .container-whole { /*<-------- container for the whole swiper */
        display: flex;
        width: 100%;
        align-items: center;
        justify-content: center;
        height: fit-content; /* <==== this controls the height of the background.
        If this should go as one file, it should have its own div */
        /*border: 2px solid red;*/
        margin: 0 auto;
    }

    .card-wrapper {
        max-width: 90%; /* <-------- this controls the width of the slide wrapper
        and the photos */
        margin: 0 60px 35px;
        padding: 20px 10px;
        overflow: hidden;
        /*border: 1px solid blueviolet;*/
    }

    .card-list .card-item {
        list-style: none; /* <------ this gets rid of the black dot on the left of the photo */
    }

    .card-list .card-item .card-link {
        user-select: none;
        display: block;
        background: #fff;
        padding: 18px;
        border-radius: 12px;
        text-decoration: none;
        border: 2px solid rgb(239, 181, 244);
        box-shadow: 0 10px 10px rgba(0, 0, 0, 0.05);
        transition: 0.2s ease;
    }

    .card-list .card-item .card-link:active {
        cursor:grabbing;
    }

    .card-list .card-item .card-link:hover {
        border-color: #5372F0;
    }

    .card-list .card-link .card-image { /* <======== this controls the photo */
        width: 100%;
        aspect-ratio: 16 / 9;
        object-fit: cover;
        border-radius: 10px 10px 0 0;
    }

    /*.card-list .card-link .badge-kapurpurawan {<------- ACTIVATE FOR CAPTION HEAD
        color: #5372F0;
        padding: 8px 16px;
        font-size: 1rem;
        font-weight: 700;
        margin: 16px 0 18px;
        background: #DDE4FF;
        width: fit-content;
        border-radius: 50px;
    }

    .card-list .card-link .badge-photoshoot1 {
        color: #5372F0;
        padding: 8px 16px;
        font-size: 1rem;
        font-weight: 700;
        margin: 16px 0 18px;
        background: #DDE4FF;
        width: fit-content;
        border-radius: 50px;
    }

    .card-list .card-link .badge-photoshoot2 {
        color: #5372F0;
        padding: 8px 16px;
        font-size: 1rem;
        font-weight: 700;
        margin: 16px 0 18px;
        background: #DDE4FF;
        width: fit-content;
        border-radius: 50px;
    }

    .card-list .card-link .badge-photoshoot3 {
        color: #5372F0;
        padding: 8px 16px;
        font-size: 1rem;
        font-weight: 700;
        margin: 16px 0 18px;
        background: #DDE4FF;
        width: fit-content;
        border-radius: 50px;
    }

    .card-list .card-link .badge-workdesk {
        color: #5372F0;
        padding: 8px 16px;
        font-size: 1rem;
        font-weight: 700;
        margin: 16px 0 18px;
        background: #DDE4FF;
        width: fit-content;
        border-radius: 50px;
    }*/

    .card-list .card-link .card-caption {
        font-family: "Montserrat";
        font-size: .8rem;
        font-style: italic;
        color: rgba(0, 0, 0, .5);
        font-weight: 700;
        margin: 10px 0 0 0;
    }

    .card-list .card-link .card-button {
        height: 35px;
        width: 35px;
        color: #5372F0;
        border-radius: 50%;
        margin: 15px 0 5px;
        background: none;
        cursor: pointer;
        border: 2px solid #5372F0;
        transform: rotate(-45deg);
        transition: 0.4s ease;
    }

    .card-list .card-link:hover .card-button {
        color: #fff;
        background: #5372F0;
    }

    .card-wrapper .swiper-pagination-bullet {
        height: 13px;
        width: 13px;
        opacity: 0.5;
        background: #5372F0;
    }

    .card-wrapper .swiper-pagination-bullet-active {
        opacity: 1;
    }

    .card-wrapper .swiper-slide-button {
        display: block;
        color: #5372F0;
        margin-bottom: -35px;
    }
}
/*---------------------END OF MEDIUM VIEWPORT ----------------------*/


/*---------------------LARGEST viewport ----------------------*/
@media only screen and (min-width: 1367px) {
    .container-whole { /*<-------- container for the whole swiper */
        display: flex;
        width: 70%;
        align-items: center;
        justify-content: center;
        height: fit-content; /* <---- this controls the height of the background.
        If this should go as one file, it should have its own div */
        /*border: 2px solid red;*/
        margin: 0 auto;
    }
    .card-wrapper {
        max-width: 100%; /* <------ this controls the width of the slide wrapper
        and the photos */
        margin: 0 60px 35px;
        padding: 20px 10px;
        overflow: hidden;
        /*border: 1px solid blueviolet;*/
    }
    .card-list .card-item {
        list-style: none; /* <------ this gets rid of the black dot on the left of the photo */
    }
    .card-list .card-item .card-link {
        user-select: none;
        display: block;
        background: #fff;
        padding: 18px;
        border-radius: 12px;
        text-decoration: none;
        border: 2px solid rgb(239, 181, 244);
        box-shadow: 0 10px 10px rgba(0, 0, 0, 0.05);
        transition: 0.2s ease;
    }

    .card-list .card-item .card-link:active {
        cursor:grabbing;
    }

    .card-list .card-item .card-link:hover {
        border-color: #5372F0;
    }

    .card-list .card-link .card-image { /* <--------- this controls the photo */
        width: 100%;
        aspect-ratio: 16 / 9;
        object-fit: cover;
        border-radius: 10px 10px 0 0;
    }

    /*.card-list .card-link .badge-kapurpurawan { <------ activate this is if caption head is needed
        color: #5372F0;
        padding: 8px 16px;
        font-size: 1rem;
        font-weight: 700;
        margin: 16px 0 18px;
        background: #DDE4FF;
        width: fit-content;
        border-radius: 50px;
    }
    .card-list .card-link .badge-photoshoot1 {
        color: #5372F0;
        padding: 8px 16px;
        font-size: 1rem;
        font-weight: 700;
        margin: 16px 0 18px;
        background: #DDE4FF;
        width: fit-content;
        border-radius: 50px;
    }
    .card-list .card-link .badge-photoshoot2 {
        color: #5372F0;
        padding: 8px 16px;
        font-size: 1rem;
        font-weight: 700;
        margin: 16px 0 18px;
        background: #DDE4FF;
        width: fit-content;
        border-radius: 50px;
    }
    .card-list .card-link .badge-photoshoot3 {
        color: #5372F0;
        padding: 8px 16px;
        font-size: 1rem;
        font-weight: 700;
        margin: 16px 0 18px;
        background: #DDE4FF;
        width: fit-content;
        border-radius: 50px;
    }

    .card-list .card-link .badge-workdesk {
        color: #5372F0;
        padding: 8px 16px;
        font-size: 1rem;
        font-weight: 700;
        margin: 16px 0 18px;
        background: #DDE4FF;
        width: fit-content;
        border-radius: 50px;
    }*/
    .card-list .card-link .card-caption {
        font-family: "Montserrat";
        font-size: .8rem;
        font-style: italic;
        color: rgba(0, 0, 0, .5);
        font-weight: 700;
        margin: 10px 0 0 0;
    }
    .card-list .card-link .card-button {
        height: 35px;
        width: 35px;
        color: #5372F0;
        border-radius: 50%;
        margin: 15px 0 5px;
        background: none;
        cursor: pointer;
        border: 2px solid #5372F0;
        transform: rotate(-45deg);
        transition: 0.4s ease;
    }
    .card-list .card-link:hover .card-button {
        color: #fff;
        background: #5372F0;
    }
    .card-wrapper .swiper-pagination-bullet {
        height: 13px;
        width: 13px;
        opacity: 0.5;
        background: #5372F0;
    }
    .card-wrapper .swiper-pagination-bullet-active {
        opacity: 1;
    }
    .card-wrapper .swiper-slide-button {
        display: block;
        color: #5372F0;
        margin-bottom: -35px;
    }
}