/*------------------------------------------------------------------
cpt.css
Last edited: 1/6/25
[Table of contents]

1. TESTIMONIALS CPT ARCHIVE
2. TEAM SINGLE POST
3. OUR WORK ARCHIVE

100. MEDIA QUERIES
    100a. EXTRA SMALL DEVICES (phones 576px and up)
    100b. SMALL DEVICES (tablets, 768px and up)
    100c. MEDIUM DEVICES (desktops, 992px and up)
    100d. LARGE DEVICES (large desktops, 1200px and up)
    100e. EXTRA LARGE DEVICES (large desktops, 1450px and up)

[Notes]
-------------------------------------------------------------------*/

/*------------------------------------------------------------------
1. TESTIMONIALS CPT ARCHIVE
-------------------------------------------------------------------*/
.archive-testimonials .testimonial-wrapper {
    border-bottom: 1px solid #e3e3e3;
    margin: 0 0 25px;
    padding: 0 0 25px;
}
.archive-testimonials .testimonial-wrapper:last-of-type {
    border-bottom: none;
    margin: 0;
    padding: 0;
}
.testimonial-wrapper img {
    border: 1px solid #e3e3e3;
    width: 150px;
}
.testimonial-wrapper .position {
    font-weight: bold;
    text-transform: uppercase;
}
/*------------------------------------------------------------------
2. TEAM SINGLE POST
-------------------------------------------------------------------*/
.team-members h1 {
    font-size: 40px;
    text-transform: none;
}

/*------------------------------------------------------------------
3. OUR WORK ARCHIVE
-------------------------------------------------------------------*/

.work-hero h1 {
    margin-bottom: 10px;
    line-height: 1;
    color: rgb(35, 31, 32);
}
.work-hero h1 + p {
    font-size: 36px;
    font-weight: 500;
}

.work-items > .work-item :is(p, a, h3, span) {
    color: #fff;
}

/* Assuming you have a parent element containing the items you want to style */
.work-items > .work-item:nth-child(4n-1) .card {
    background-color: #5f1847; /* Color 1 for the 1st, 5th, 9th, etc. elements */
}

.work-items > .work-item:nth-child(4n-2) .card {
    background-color: #e46736; /* Color 2 for the 2nd, 6th, 10th, etc. elements */
}

.work-items > .work-item:nth-child(4n-3) .card {
    background-color: #1f9c86; /* Color 3 for the 3rd, 7th, 11th, etc. elements */
}

.work-items > .work-item:nth-child(4n) .card {
    background-color: #f9b113; /* Color 4 for the 4th, 8th, 12th, etc. elements */
}

.work-items > .work-item:nth-child(4n) :is(p, a, h3, span) {
    color: #211d1e;
}

.work-items > .work-item {
    padding-bottom: 30px;
}

.work-item .card {
    box-shadow: 0px 10px 15px 3px rgba(0, 0, 0, 0.15);
    transition: transform 200ms ease-in-out;
}

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

.work-item img {
    height: 300px;
    width: 100%;
    object-fit: cover;
    display: block;
}

.work-items > .work-item .card-body {
    background-color: transparent;
    border-radius: 0;
    text-align: center;
    padding: 1rem;
}

.work-item h3 {
    font-weight: 600;
    font-size: 28px;
    line-height: 1.1;
}
.work-type {
    padding-block: 1rem;
    display: block;
    border-top: 1px solid currentColor;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-weight: 500;
}


@media screen and (min-width: 992px) {
    .work-hero h1.larger {
        font-size: 130px;
    }

    .work-items > .work-item {
        padding-bottom: 60px;
    }
}

/* Single work item band overrides */
.single-work h1 {
    text-align: center;
}
.single-work .work-type {
    border-top: none;
    color: #e56736;
    display: flex;
    flex-direction: column;
    font-size: 1.35rem;
    text-align: center;
}
.single-work .work-type:before {
    background: #303030;
    content: "";
    height: 2px;
    margin: 10px auto 30px;
    width: 120px;
}
.single-work h2 {
    font-size: 30px;
    font-weight: 600;
    line-height: 1.25;
    margin-bottom: 0.3em;
    text-transform: none;
}
.single-work h2 strong {
    font-size: 1.5em;
}
.single-work .band-1-col img {
    display: block;
    margin-top: 2rem;
}
.single-work .project-nav {
  display: flex;
  justify-content: space-between;
}
/*------------------------------------------------------------------
100. MEDIA QUERIES
-------------------------------------------------------------------*/
/*------------------------------------------------------------------
100a. EXTRA SMALL DEVICES (phones 576px and up)
-------------------------------------------------------------------*/
@media (min-width: 576px) {
}
/*------------------------------------------------------------------
100b. SMALL DEVICES (tablets, 768px and up)
-------------------------------------------------------------------*/
@media (min-width: 768px) {
    /*------------------------------------------------------------------
	2. TEAM SINGLE POST
	-------------------------------------------------------------------*/
    .team-members h1 {
        font-size: 45px;
    }
    /*------------------------------------------------------------------
2. TESTIMONIALS CPT ARCHIVE
-------------------------------------------------------------------*/
    .testimonial-wrapper img {
        width: inherit;
    }
}

/*------------------------------------------------------------------
100c. MEDIUM DEVICES (desktops, 992px and up)
-------------------------------------------------------------------*/
@media (min-width: 992px) {
    .single-work h2.extra-margin {
        margin-top: 70px;
    }
}
/*------------------------------------------------------------------
100d. LARGE DEVICES (large desktops, 1200px and up)
-------------------------------------------------------------------*/
@media (min-width: 1200px) {
}
/*------------------------------------------------------------------
100e. EXTRA LARGE DEVICES (large desktops, 1450px and up)
-------------------------------------------------------------------*/
@media screen and (min-width: 1450px) {
/*------------------------------------------------------------------
3. OUR WORK ARCHIVE
-------------------------------------------------------------------*/
 .band-work .row.work-items [class^="col-"]:nth-of-type(3n-2) {
    padding-left: 15px;
    padding-right: 29px;
  }
  .band-work .row.work-items [class^="col-"]:nth-of-type(3n-1) {
    padding-left: 22px;
    padding-right: 22px;
  }
  .band-work .row.work-items [class^="col-"]:nth-of-type(3n + 3) {
    padding-left: 29px;
    padding-right: 15px;
  }

}