/****************************************** Page First Section Block **************************************************/
.page-first-section-icon {
    width: 60px;
    height: 60px;
    margin: 8px auto 24px;
}

.page-first-section-gif {
    display: flex;
    justify-content: center;
    margin-bottom: 64px;
}

.page-first-section-title {
    font-size: 48px;
    line-height: 56px;
    font-weight: 700;
    text-align: center;
    text-transform: uppercase;
    margin-bottom: 48px;
    letter-spacing: 0.02em;
}

.page-first-section-explore {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.page-first-section-explore p {
    margin-bottom: 8px;
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
    text-align: center;
    color: #a1a1a1;
}

.gatsby-image-wrapper {
    position: relative;
    overflow: hidden;
}

.gatsby-image-wrapper img {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 0;
    margin: 0;
    height: 100%;
    width: 100%;
    max-width: none;
    object-fit: cover;
}

.gatsby-image-wrapper [data-main-image] {
    opacity: 0;
    transform: translateZ(0);
    transition: opacity 0.25s linear;
    will-change: opacity;
}

.gatsby-image-wrapper-constrained {
    display: inline-block;
    vertical-align: top;
}

#scroll-to {
    background-color: transparent;
    border: none;
    -webkit-appearance: none;
    width: 32px;
    height: 32px;
    padding: 0;
}

/*********************************************** Separator Block ******************************************************/
.separator-line {
    height: 28px;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADMAAAA3BAMAAABTHm8PAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAJcEhZcwAACxMAAAsTAQCanBgAAAAeUExURUxpcUBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQPzOAV8AAAAJdFJOUwATQL/v34BpnFbHlHAAAACeSURBVDjLY7CcCQFTQoFAgAEZaM5EAgUoUszIUgEoUkzIUpNQpBgikaQmo0plImtTQJESQZZqQJFiQ5aaiCLFiCw1DdWyTiSpKXg8nUBjT1cS6WkDoj3tSVNPO+D29HRUyywHytMziPa0JJGedqSxp1mI9PQkoj2dOVCensqAO1mhepqVpp6eSbSnOYj09DQae5qdSE+jJavSUCRJAQD0iKBOQDs/0AAAAABJRU5ErkJggg==);
    background-repeat: round;
    margin-bottom: 48px;
    background-size: contain;
}

/************************************************* Text Block *********************************************************/
.text-block-title,
.single-careers .text-block-title {
    color: #fff;
    text-transform: capitalize;
}

.single-careers .text-block-title {
    font-size: 32px;
    line-height: 32px;
    font-weight: 600;
    margin-bottom: 32px;
}

.text-block-image img {
    max-width: 100%;
    height: auto;
}

.text-block .left-column h3 {
    margin-bottom: 48px;
}

.text-block,
.big-image,
.image-grid,
.related-articles {
    margin-bottom: 72px;
}

/*********************************************** Services Block *******************************************************/
.services-section {
    margin-bottom: 72px;
}

.services-section-title {
    font-weight: 600;
    font-size: 32px;
    line-height: 48px;
    color: #fff;
    text-transform: capitalize;
    text-align: left;
    margin-bottom: 32px;
}

.services-section-container {
    flex-grow: 1;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    flex-wrap: wrap;
    align-items: center;
    grid-gap: 16px;
}

.services-section-item {
    /* box-shadow: inset 0 0 0 2px #404040; */
    border: 2px solid #404040;
    padding: 24px 30px 20px 24px;
    transition: border-color 0.2s ease-in;
    width: 100%;
}

.services-section-item-number {
    font-weight: 600;
    font-size: 24px;
    line-height: 36px;
    color: #ffcb08;
    margin-bottom: 32px;
}

.services-section-item-content {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

.services-section-item-title {
    font-weight: 600;
    font-size: 24px;
    line-height: 36px;
    color: #fff;
    max-width: 212px;
    width: 100%;
}

.services-section-item-more {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 110px;
}

.services-section-item-more-text {
    color: #a1a1a1;
    font-weight: 500;
    font-size: 16px;
    line-height: 30px;
    white-space: nowrap;
    transition: color 0.2s ease-in;
}

.services-section-item-more-icon {
    min-width: 24px;
    min-height: 24px;
}

/************************************************ Why We Block ********************************************************/
.accordion-container {
    margin-bottom: 72px;
}

.accordion-title {
    font-weight: 600;
    font-size: 32px;
    line-height: 40px;
    color: #fff;
    width: 100%;
}

.accordion-list-item-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.accordion-list-item {
    border-bottom: 2px solid #404040;
    cursor: pointer;
    padding-top: 32px;
    padding-bottom: 32px;
}

.accordion-list-item:last-child {
    box-shadow: none;
    border-bottom: none;
    padding-bottom: 0;
}

.accordion-list-item:first-child {
    padding-top: 16px;
}

.accordion-list-item-title-bold {
    font-weight: 700;
    font-size: 18px;
    line-height: 26px;
    color: #fff;
    transition: color .3s;
}
.accordion-list-item-title:hover .accordion-list-item-title-bold {
    color: #FFCB08;
}

.accordion-item .accordion-list-item-controls {
    width: 32px;
    height: 32px;
    padding: 0;
    border: none;
    outline: none;
    cursor: pointer;
    background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewbox='0 0 24 24' fill='%23ffcb08' %3E%3Cpath d='M13 11V4.497C13 4.226 12.773 4 12.495 4H11.505C11.214 4 11 4.222 11 4.497V11H4.497C4.226 11 4 11.226 4 11.505V12.495C4 12.786 4.222 13 4.497 13H11V19.504C11 19.773 11.226 20 11.505 20H12.495C12.786 20 13 19.777 13 19.504V13H19.504C19.773 13 20 12.773 20 12.495V11.505C20 11.214 19.777 11 19.504 11H13Z' fill='%23ffcb08' %3E%3C/path%3E%3C/svg%3E") no-repeat 50% 50%;
}

.accordion-item.open .accordion-list-item-controls {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='3' y='10.9998' width='18' height='2' rx='1' fill='%23ffcb08' %3E%3C/rect%3E%3C/svg%3E");
}

.accordion-item .accordion-item-text {
    max-height: 0;
    transition: all 0.2s ease-in-out;
    overflow: hidden;
}

.accordion-item-text-content {
    font-weight: 500;
    color: #a1a1a1;
    font-size: 14px;
    line-height: 26px;
    transition: all 0.2s ease-in-out;
}

.accordion-item.open .accordion-item-text {
    max-height: 200px;
    margin-top: 24px;
}

/******************************************** Interesting Data Block **************************************************/
#interesting-data {
    background-image: url('/wp-content/themes/drumncode/assets/images/ellipse.png');
    background-repeat: no-repeat;
    background-position: right -280px top 50%;
}
.interesting-data-container {
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    margin-bottom: 72px;
}

.interesting-data-title {
    font-size: 32px;
    line-height: 48px;
    font-weight: 600;
    color: #fff;
    margin-bottom: 32px;
    text-transform: capitalize;
}

.interesting-data-exp {
    display: grid;
    flex-wrap: wrap;
    flex-grow: 1;
    grid-row-gap: 32px;
    grid-column-gap: 30px;
    grid-template-columns: 1fr;
}

.interesting-data-exp-item {
    max-width: 100%;
    /* border-bottom: 2px solid #404040; */
    border-bottom: 2px solid rgba(255, 255, 255, 0.2);
    padding-bottom: 24px;
}

.interesting-data-exp-item-counter {
    font-size: 60px;
    line-height: 64px;
    font-weight: 700;
    color: #ffcb08;
}

.interesting-data-exp-item-subtitle {
    font-size: 18px;
    line-height: 32px;
    font-weight: 500;
    color: #a1a1a1;
}

.interesting-data-description {
    flex-grow: 1;
    width: 100%;
    display: flex;
    flex-direction: column;
}
@media(max-width: 1024px){
    #interesting-data {
        background-position: right -210px top 50%;
        background-size: 420px 420px;
    }
}

/************************************ What Our Clients Say (Reviews) Block ********************************************/
.reviews-section-title {
    font-weight: 600;
    font-size: 32px;
    line-height: 48px;
    color: #fff;
    text-transform: capitalize;
    text-align: left;
    margin-bottom: 32px;
}

.reviews-section {
    margin-bottom: 72px;
}

.reviews-section-container {
    display: grid;
    grid-template-columns: 1fr;
    align-items: center;
    flex-wrap: wrap;
    grid-gap: 16px;
    width: 100%;
    flex-grow: 1;
}

.reviews-section-item {
    /* box-shadow: inset 0 0 0 2px #404040; */
    border: 2px solid #404040;
    padding: 24px 32px 24px 24px;
    transition: border-color 0.2s ease-in;
    flex-grow: 1;
}

.reviews-section-item-logo-wrapper {
    margin-bottom: 56px;
}

.reviews-section-item-counter {
    line-height: 24px;
}

.reviews-section-item-logo-wrapper img {
    display: block;
    min-height: 40px;
    width: auto;
}

.reviews-section-item-bottom {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

.reviews-section-item-stars-wrapper {
    margin-bottom: 16px;
    display: flex;
}

.reviews-section-item-star {
    margin-right: 8px;
}

.reviews-section-item-star:last-child {
    margin-right: 0;
}

.reviews-section-item-more {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 56px;
}

.reviews-section-item-more-text {
    color: #a1a1a1;
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
    margin-right: 8px;
    transition: color 0.2s ease-in;
}

.reviews-section-item-more-icon {
    width: 10px;
    height: 16px;
}

/*************************************** Portfolio Description Block **************************************************/
.text-block h5 {
    font-size: 24px;
    font-weight: 600;
    line-height: 36px;
    margin-bottom: 24px;
}

.text-block h6 {
    color: #FFCB08;
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 16px;
}

.text-block p,
.portfolio-description p {
    font-weight: 500;
    font-size: 18px;
    line-height: 32px;
    margin-bottom: 16px;
    color: #a1a1a1;
}

.text-block p:last-child,
.portfolio-description p:last-child {
    margin-bottom: 0;
}

.text-block .right-column-text-wrp p > img {
    margin-top: 24px;
}

.text-block ul li {
    color: #a1a1a1;
    font-size: 18px;
    font-weight: 500;
    line-height: 32px;
}

.text-block h3,
.portfolio-description h3 {
    font-size: 32px;
    line-height: 48px;
    margin-bottom: 24px;
    font-weight: 600;
}
.text-block .text-block-pre-title {
    font-size: 16px;
    line-height: 24px;
    font-weight: 500;
    color: #ffcb08;
}

.text-block h4,
.portfolio-description h4 {
    font-size: 24px;
    line-height: 36px;
    margin-bottom: 8px;
    font-weight: 700;
}

.portfolio-description-item {
    margin-bottom: 24px;
}

.portfolio-description-item:last-child {
    margin-bottom: 0;
}

.portfolio-description h5.portfolio-description-side-1 {
    font-size: 14px;
    line-height: 16px;
    font-weight: 500;
    color: #ffcb08;
    margin-bottom: 4px;
}

.portfolio-description p.portfolio-description-side-2 {
    font-size: 18px;
    line-height: 24px;
    font-weight: 600;
    color: #FFF;
    margin: 0;
}

.right-column-text-wrp {
    margin-top: 16px;
}

.right-column-text-wrp.white-text p {
    color: #FFF;
    font-size: 24px;
    line-height: 1.5;
    font-weight: 600;
    margin-bottom: 40px;
}
@media(max-width: 576px){
    .right-column-text-wrp.white-text p {
        font-size: 18px;
        line-height: 1.5;
        margin-bottom: 24px;
    }
}

.right-column-text-wrp ol {
    display: flex;
    flex-wrap: wrap;
    gap: 28px 45px;
    padding: 0;
    margin: 16px 0 0;
}

.right-column-text-wrp ol li {
    list-style: none;
    flex: 0 0 calc(50% - 30px);
    font-weight: 700;
    font-size: 24px;
    line-height: 36px;
    counter-increment: section;
}

.right-column-text-wrp ol li::before {
    content: '0' counter(section);
    display: block;
    color: #ffcb08;
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
    margin-bottom: 8px;
}

.two-column-block .left-column {
    margin-bottom: 24px;
}

.two-column-block .left-column > *:last-child {
    margin-bottom: 0;
}

/********************************************** Image Grid Block ******************************************************/
.image-grid-wrp {
    display: flex;
    gap: 30px;
}

.image-grid-item {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.image-grid-item img {
    width: 100%;
    height: auto;
}

/*********************************************** Big Image Block ******************************************************/
.big-image-container {
    overflow: hidden;
    background-color: #181818;
}

.big-image-container img {
    display: block;
    height: auto;
    width: auto;
    max-height: 80vh;
    max-width: 100%;
    margin: 0 auto;
}

.big-image-container.cropped {
    max-height: 500px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.big-image-container.cropped img {
    max-width: 100%;
    object-fit: cover;
}

/********************************************* Image Gallery Block ****************************************************/
.image-gallery-section {
    position: relative;
    margin-bottom: 120px;
}

.image-gallery-section.section-title {
    max-width: calc(100% - 120px);
}

.image-gallery-section .image-gallery-slider-container {
    margin-top: 40px;
}

.image-gallery-section .slick-arrow {
    position: absolute;
    right: 0;
    top: 4px;
}

.image-gallery-section .slick-arrows.disabled {
    display: none;
}

.image-gallery-slide {
    max-width: 100%;
}

.image-gallery-slide img {
    display: block;
    width: auto;
    height: auto;
    margin: 0 auto;
    max-height: 70vh;
    max-width: 100%;
}

.section-title {
    font-weight: 600;
    font-size: 40px;
    line-height: 56px;
}

/******************************************** Our Team Slider Block ***************************************************/
.our-team-section {
    margin-bottom: 72px;
}

.our-team-header-nav {
    margin-bottom: 48px;
}

.our-team-header-nav .container {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.our-team-section:has(.our-team-slider:not(.slick-initialized)) .slick-arrows{
    display: none;
}

.our-team-slider:not(.slick-initialized) {
    display: flex;
    overflow: hidden;
    padding-left: calc(50% - 555px);
    gap: 30px;
}

.our-team-slide-item-container {
    width: 350px;
}

.our-team-slide-item-image {
    margin-bottom: 24px;
    width: 100%;
    height: 400px;
    -o-object-fit: cover;
    object-fit: cover;
}

.our-team-slide-item-title {
    font-weight: 700;
    font-size: 24px;
    line-height: 32px;
    color: #fff;
}

.our-team-slide-item-position {
    font-weight: 500;
    font-size: 18px;
    line-height: 32px;
    color: #a1a1a1;
}

.slick-arrows {
    position: relative;
    display: flex;
    gap: 32px;
}

.slick-arrows .slick-arrow {
    all: unset;
    cursor: pointer;
    position: relative;
    background-color: transparent;
    background-image: none;
    width: 32px;
    height: 32px;
}

.slick-arrows .slick-arrow.slick-arrow-prev::after,
.slick-arrows .slick-arrow.slick-arrow-next::after {
    content: '';
    width: 32px;
    height: 32px;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    background-repeat: no-repeat;
    background-position: 50% 50%;
}

.slick-arrows .slick-arrow.slick-arrow-prev::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 17 28' fill='none'%3E%3Cpath d='M16.1602 3.49268L5.65349 13.9993L16.1602 24.506L13.3335 27.3327L0.000152588 13.9993L13.3335 0.666016L16.1602 3.49268Z' fill='%23FFCB08'%3E%3C/path%3E%3C/svg%3E");
}

.slick-arrows .slick-arrow.slick-arrow-next::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 10 16' fill='none'%3E%3Cpath d='M0 1.696L6.50165 8L0 14.304L1.74917 16L10 8L1.74917 0L0 1.696Z' fill='%23FFCB08'%3E%3C/path%3E%3C/svg%3E");
}

.slick-arrows .slick-arrow.slick-arrow-next.slick-disabled::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 10 16' fill='none'%3E%3Cpath d='M0 1.696L6.50165 8L0 14.304L1.74917 16L10 8L1.74917 0L0 1.696Z' fill='%23404040'%3E%3C/path%3E%3C/svg%3E");
}

.slick-arrows .slick-arrow.slick-arrow-prev.slick-disabled::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 17 28' fill='none'%3E%3Cpath d='M16.1602 3.49268L5.65349 13.9993L16.1602 24.506L13.3335 27.3327L0.000152588 13.9993L13.3335 0.666016L16.1602 3.49268Z' fill='%23404040'%3E%3C/path%3E%3C/svg%3E");
}

.our-team-section .slick-slide {
    margin: 0 15px;
}


/* =========  Our Team Gallery Block ========== */

.our-team-gallery-section {
    margin-bottom: 72px;
}

.our-team-gallery-header {
    margin-bottom: 48px;
}

.our-team-gallery-header .container {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.our-team-gallery {
    display: flex;
    flex-wrap: wrap;
    overflow: hidden;
    gap: 30px;
}

.our-team-gallery-item {
    flex: 0 0 calc(25% - 24px);
}
.our-team-gallery-image-container {
    width: 100%;
    aspect-ratio: 1/1;
    overflow: hidden;
    margin-bottom: 18px;
    display: flex;
    align-items: center;
}

.our-team-gallery-image-container img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    object-position: 50% 0%;
}

.our-team-gallery-item-title {
    font-weight: 700;
    font-size: 24px;
    line-height: 32px;
    color: #fff;
}

.our-team-gallery-item-position {
    font-weight: 500;
    font-size: 18px;
    line-height: 32px;
    color: #a1a1a1;
}
@media screen and (max-width: 991px) {
    .our-team-gallery-item {
        flex: 0 0 calc(33.33% - 20px);
    }
}
@media screen and (max-width: 767px) {
    .our-team-gallery-item {
        flex: 0 0 calc(50% - 15px);
    }
}
@media screen and (max-width: 420px) {
    .our-team-gallery-item {
        flex: 0 0 100%;
    }
}



/*********************************************** Ticker Block *********************************************************/
.ticker-talk-slider {
    visibility: hidden;
    margin-bottom: 72px;
}

.ticker-talk-slider.slick-initialized {
    visibility: initial;
}

.ticker-talk-slider.highlighted {
    padding: 90px 0;
    background-color: #FFCB08;
}

.ticker-talk-slider.highlighted::before,
.ticker-talk-slider.highlighted::after,
.ticker-talk-mobile::before,
.ticker-talk-mobile::after {
    content: '';
    position: absolute;
    background-image: url("data:image/svg+xml,%3Csvg width='51' height='28' viewBox='0 0 51 28' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 0L19.3932 27.9247L45 28L32.5733 0H7Z' fill='%23222222'/%3E%3C/svg%3E%0A");
    background-repeat: repeat-x;
    display: block;
    height: 16px;
    width: calc(100% + 8px);
}

.ticker-talk-slider.highlighted::before,
.ticker-talk-slider.highlighted::after {
    height: 24px;
}

.ticker-talk-slider.highlighted::before,
.ticker-talk-mobile::before {
    left: -8px;
    top: 0;
}

.ticker-talk-slider.highlighted::after,
.ticker-talk-mobile::after {
    left: -8px;
    bottom: 0;
}

.ticker-talk-slider .ticker-talk-slide {
    font-size: 124px;
    line-height: 120px;
    font-weight: 700;
    margin: 0 30px;
}

.ticker-talk-slider .ticker-talk-slide .ticker-talk-item {
    display: block;
    color: transparent;
    -webkit-text-stroke: 2px #a1a1a1;
    user-select: none;
    cursor: pointer;
    transition: all .3s;
}

.ticker-talk-slider.highlighted .ticker-talk-slide .ticker-talk-item {
    color: #FFCB08;
    -webkit-text-stroke: 2px #222222;
}

.ticker-talk-mobile {
    display: none;
}

.ticker-talk-mobile-text {
    font-weight: 700;
    font-size: 40px;
    line-height: 46px;
    color: #222;
    max-width: 344px;
    width: 100%;
    text-align: center;
    margin-bottom: 36px;
}

.ticker-talk-mobile-button {
    width: 100%;
    height: 48px;
    border: none;
    background-color: #222;
    font-weight: 700;
    font-size: 16px;
    line-height: 24px;
    color: #fff;
}

/*********************************************** Portfolio Block ******************************************************/
.portfolio-section {
    margin-bottom: 48px;
}

.portfolio-section:has(.portfolio-slider:not(.slick-initialized)) {
    max-height: 400px;
    overflow: hidden;
}

.portfolio-title {
    font-weight: 600;
    font-size: 32px;
    line-height: 48px;
}

.portfolio-slide-item {
    position: relative;
    display: block;
    overflow: hidden;
}

.portfolio-slider .slick-slide {
    margin: 0 15px;
}

.portfolio-slide-item img {
    width: 100%;
    max-width: 540px;
    height: auto;
    max-height: 400px;
}

.portfolio-header-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 40px;
}
.front-page .portfolio-header-nav {
    display: none;
}

.related-article-item-title {
    font-weight: 700;
    font-size: 24px;
    line-height: 32px;
    margin-bottom: 8px;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.related-article-item-description {
    font-weight: 500;
    font-size: 18px;
    line-height: 32px;
    color: #a1a1a1;
    max-width: 510px;
    min-height: 64px;
    width: 100%;
    margin-bottom: 32px;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.related-article-item-tag {
    border: 2px solid #404040;
    padding: 2px 16px;
    color: #ffcb08;
    font-size: 16px;
    line-height: 24px;
    white-space: nowrap;
    user-select: none;
}

@media screen and (min-width: 1200px) {

    .portfolio-slider.no-autoplay .slick-list {
        padding-left: calc(50% - 555px);
    }
}

/*********************************************** Media Queries ********************************************************/
@media screen and (max-height: 667px) {
    .page-first-section-title {
        font-size: 42px;
        margin-bottom: 22px;
    }
}

@media screen and (max-width: 1199px) {
    .our-team-slider-container {
        padding-left: 16px;
        padding-right: 0;
    }
}

@media screen and (max-width: 1023px) {
    .text-block-image {
        max-width: 730px;
        margin-left: auto;
        margin-right: auto;
    }

    .image-grid-wrp {
        flex-direction: column;
        max-width: 681px;
        margin-left: auto;
        margin-right: auto;
    }

    .image-grid-wrp.desktop_mobile {
        max-width: 100%;
    }

    .image-grid-wrp.desktop_mobile .image-grid-item:last-child {
        display: none;
    }

    .our-team-header-nav {
        margin-bottom: 32px;
    }

    .section-title {
        font-size: 32px;
        line-height: 48px;
    }

    .big-image,
    .text-block,
    .image-grid,
    .related-articles {
        margin-bottom: 72px;
    }
}

@media screen and (max-width: 768px) {
    .page-first-section {
        display: flex;
        height: initial;
        margin-bottom: 74px;
    }

    .accordion-list-item {
        padding-top: 30px;
        padding-bottom: 30px;
    }

    .reviews-section-item-logo-wrapper img {
        min-height: initial;
        height: 100%;
        max-height: 32px;
    }

    .reviews-section-item-logo-wrapper {
        margin-bottom: 40px;
    }

    .our-team-slide-item-image {
        margin-bottom: 16px;
    }

    .ticker-talk-slider:not(.not-found) {
        display: none;
    }

    .ticker-talk-mobile {
        display: flex;
        position: relative;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        height: 274px;
        padding-left: 16px;
        padding-right: 16px;
        background-color: #ffcb08;
        margin-bottom: 72px;
    }

    .portfolio-slider .slick-list {
        margin: 0 -15px;
    }

    .portfolio-section {
        padding-left: 16px;
        padding-right: 16px;
    }

    .portfolio-slide-item img {
        margin-bottom: 24px;
    }

    .portfolio-header-nav {
        margin-bottom: 32px;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
}

@media screen and (max-width: 767px) {
    .text-block img {
        display: block;
        min-height: 280px;
        width: auto;
        object-fit: cover;
        margin-top: 32px;
    }

    .text-block h4 {
        font-weight: 700;
        font-size: 18px;
        line-height: 26px;
        margin-bottom: 8px;
    }

    .right-column-text-wrp ol {
        display: block;
    }

    .right-column-text-wrp ol li {
        margin-bottom: 28px;
    }

    .right-column-text-wrp ol li:last-child {
        margin-bottom: 0;
    }

    .big-image-container.cropped {
        max-height: 280px;
    }
}

@media screen and (max-width: 576px) {
    .page-first-section {
        display: flex;
    }
}

@media screen and (max-width: 375px) {
    .page-first-section-title {
        margin-bottom: 48px;
    }
}

@media screen and (max-width: 374px) {
    .page-first-section {
        margin-bottom: 48px;
    }

    .page-first-section-icon {
        margin-bottom: 16px;
        height: 48px;
        width: 48px;
    }

    .our-team-slide-item-container {
        width: 100%;
    }
}

@media screen and (max-width: 350px) {
    .page-first-section-title {
        font-size: 36px;
    }
}

@media screen and (min-width: 576px) {
    .interesting-data-exp {
        grid-template-columns: 1fr 1fr;
    }

    .reviews-section-container {
        grid-template-columns: 1fr 1fr;
    }

    .portfolio-description h5.portfolio-description-side-1 {
        font-size: 16px;
        line-height: 24px;
        margin-bottom: 8px;
    }

    .portfolio-description p.portfolio-description-side-2 {
        font-size: 24px;
        line-height: 36px;
    }

    .ticker-talk-mobile-button {
        max-width: 260px;
    }
}

@media screen and (min-width: 692px) {
    .services-section-container {
        grid-gap: 16px;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr 1fr;
    }
}

@media screen and (min-width: 768px) {
    .accordion-container,
    .interesting-data-container,
    .reviews-section {
        margin-bottom: 96px;
    }

    .interesting-data-title {
        margin-bottom: 48px;
    }

    .interesting-data-exp {
        grid-row-gap: 48px;
    }

    .interesting-data-exp-item-counter {
        font-size: 80px;
        line-height: 96px;
    }

    .reviews-section-title {
        margin-bottom: 48px;
    }
}

@media screen and (min-width: 769px) {
    .page-first-section-gif,
    .page-first-section-explore {
        display: none;
    }

    .services-section,
    .our-team-section,
    .ticker-talk-slider,
    .portfolio-section {
        margin-bottom: 100px;
    }

    .services-section-item {
        padding: 24px 32px 24px 24px;
    }

    .portfolio-title,
    .services-section-item-number,
    .accordion-title,
    .interesting-data-title,
    .reviews-section-title,
    .services-section-title,
    .text-block h3,
    .portfolio-description h3 {
        font-size: 40px;
        line-height: 56px;
    }

    .services-section-title,
    .text-block h3,
    .portfolio-description h3 {
        margin-bottom: 48px;
    }

    .portfolio-description h5.portfolio-description-side-1 {
        margin-bottom: 16px;
    }

    .portfolio-slide-item .portfolio-slide-text {
        position: absolute;
        top: 100%;
        right: 0;
        left: 0;
        bottom: 0;
        background-color: rgba(34, 34, 34, .9);
        padding: 36px 24px;
        transition: all .5s;
    }

    .portfolio-slide-item img {
        min-width: 540px;
    }
}

@media screen and (min-width: 1023px) {
    .two-column-block {
        display: flex;
        gap: 30px;
    }

    .two-column-block .left-column {
        flex-basis: calc(32.8% - 15px);
        width: calc(32.8% - 15px);
        margin-bottom: 0;
    }

    .two-column-block .right-column {
        flex-basis: calc(67.2% - 15px);
        width: calc(67.2% - 15px);
    }

    .interesting-data-container {
        flex-direction: row;
    }
}

@media screen and (min-width: 1024px) {
    .page-first-section-icon {
        width: 80px;
        height: 80px;
    }

    .separator-line {
        height: 52px;
        margin-bottom: 120px;
    }

    .text-block-title,
    .single-careers .text-block-title {
        font-size: 40px;
        line-height: 56px;
        margin-bottom: 0;
    }

    .services-section-title {
        max-width: 320px;
        width: 100%;
        margin-bottom: 0;
    }

    .services-section-container {
        max-width: 730px;
        grid-gap: 30px;
        margin-top: 16px;
        margin-left: auto;
    }

    .accordion-title,
    .interesting-data-title,
    .reviews-section-title {
        max-width: 320px;
        margin-bottom: 0;
    }

    .accordion-list {
        max-width: 730px;
        margin-left: auto;
    }

    .accordion-list-item-title-bold {
        font-size: 24px;
        line-height: 32px;
    }

    .accordion-item-text-content {
        font-size: 18px;
        line-height: 32px;
    }

    .accordion-list,
    .interesting-data-exp,
    .interesting-data-description,
    .reviews-section-container {
        max-width: 730px;
        width: 100%;
        margin-left: auto;
    }

    .reviews-section-container {
        grid-gap: 30px;
        margin-top: 16px;
    }

    .text-block h5 {
        margin-bottom: 32px;
    }

    .text-block p,
    .portfolio-description p {
        margin-bottom: 24px;
    }

    .portfolio-description-item {
        margin-bottom: 40px;
    }

    .image-grid-wrp {
        flex-direction: row;
    }

    .image-grid-wrp.cols_30x70 .image-grid-item:first-child {
        flex: 0 0 calc(32.8% - 15px);
    }

    .image-grid-wrp.cols_30x70 .image-grid-item:last-child {
        flex: 0 0 calc(67.2% - 15px);
    }

    .image-grid-wrp.cols_70x30 .image-grid-item:first-child {
        flex: 0 0 calc(67.2% - 15px);
    }

    .image-grid-wrp.cols_70x30 .image-grid-item:last-child {
        flex: 0 0 calc(32.8% - 15px);
    }

    .image-grid-wrp.cols_50x50 .image-grid-item:first-child {
        flex: 0 0 calc(50% - 15px);
    }

    .image-grid-wrp.cols_50x50 .image-grid-item:last-child {
        flex: 0 0 calc(50% - 15px);
    }

    .image-grid-wrp.desktop_mobile {
        position: relative;
        display: block;
        padding-bottom: 150px;
    }

    .image-grid-wrp.desktop_mobile .image-grid-item:first-child {
        max-width: 92%;
        border: 10px solid #000;
        border-radius: 32px;
    }

    .image-grid-wrp.desktop_mobile::after {
        content: '';
        display: block;
        position: absolute;
        height: 56px;
        bottom: 30px;
        width: 55%;
        background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADMAAAA3BAMAAABTHm8PAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAJcEhZcwAACxMAAAsTAQCanBgAAAAeUExURUxpcUBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQPzOAV8AAAAJdFJOUwATQL/v34BpnFbHlHAAAACeSURBVDjLY7CcCQFTQoFAgAEZaM5EAgUoUszIUgEoUkzIUpNQpBgikaQmo0plImtTQJESQZZqQJFiQ5aaiCLFiCw1DdWyTiSpKXg8nUBjT1cS6WkDoj3tSVNPO+D29HRUyywHytMziPa0JJGedqSxp1mI9PQkoj2dOVCensqAO1mhepqVpp6eSbSnOYj09DQae5qdSE+jJavSUCRJAQD0iKBOQDs/0AAAAABJRU5ErkJggg==);
        background-repeat: round;
        background-size: contain;
    }

    .image-grid-wrp.desktop_mobile .image-grid-item:last-child {
        max-width: 28vw;
        width: 320px;
        position: absolute;
        top: 11%;
        right: 0;
        border: 10px solid #000;
        border-radius: 32px;
    }

    .big-image-container.rounded {
        border-radius: 24px;
    }

    .big-image-container.outlined {
        margin: 0 auto;
        outline: 10px solid #000;
    }
}
.postid-2130 .image-grid-wrp.desktop_mobile .image-grid-item {
    border: none;
}

@media screen and (min-width: 1024px) and (hover: hover) {
    .services-section,
    .our-team-section,
    .accordion-container,
    .ticker-talk-slider,
    .portfolio-section,
    .text-block,
    .big-image,
    .image-grid,
    .related-articles,
    .reviews-section,
    .interesting-data-container {
        margin-bottom: 160px;
    }
}

@media screen and (min-width: 1200px) {
    .page-first-section-title {
        font-size: 80px;
        line-height: 96px;
    }

    .interesting-data-title {
        margin-right: 60px;
    }

    .our-team-slider-container .slick-list {
        padding-left: calc(50% - 555px);
    }
}


.ticker-talk-slider:hover .ticker-talk-slide .ticker-talk-item {
    color: #FFCB08;
    -webkit-text-stroke: 2px #FFCB08;
}

.ticker-talk-slider.highlighted:hover .ticker-talk-slide .ticker-talk-item {
    color: #222;
}

.portfolio-slide-item:hover .portfolio-slide-text {
    display: block;
    top: 0;
}

.services-section-item:hover {
    border-color: #ffcb08;
}

.services-section-item:hover .services-section-item-more-text {
    color: #ffcb08;
}

.reviews-section-item:hover {
    border-color: #ffcb08;
}

.reviews-section-item:hover .reviews-section-item-more-text {
    color: #ffcb08;
}


/* page hero services  */
.page-hero-services {
    position: relative;
    background-color: #111111;
    background-image: 
        url('/wp-content/themes/drumncode/assets/images/ellipse.png'),
        url('/wp-content/themes/drumncode/assets/images/ellipse.png'),
        url('/wp-content/themes/drumncode/assets/images/page-hero-2k.webp');
    background-repeat: no-repeat, no-repeat, repeat-x;
    background-position: top -116px left -280px, top 85px right -280px, 50% 0;
    background-size: 561px 561px,  561px 561px, auto 100%;
    min-height: 600px;
    margin-bottom: 160px;
    max-width: 100vw;
    overflow: hidden;
}
.page-hero-services .page-title {
    padding-top: 200px;
    max-width: 900px;
    margin: 0 auto;
}
.page-hero-services-image {
    position: absolute;
    height: 144px;
}
.page-hero-services-image:nth-of-type(1) {
    left: calc(50% - 686px);
    top: 284px;
}
.page-hero-services-image:nth-of-type(2) {
    left: calc(50% - 108px);
    top: 428px;
}
.page-hero-services-image:nth-of-type(3) {
    left: calc(50% + 542px);
    top: 140px;
}
.page-hero-services-image img {
    display: block;
    max-height: 100%;
    width: auto;
}
@media(max-width: 1400px){
    .page-hero-services-image:nth-of-type(1) {
        left: calc(50% - 614px);
        top: 284px;
    }
    .page-hero-services-image:nth-of-type(3) {
        left: calc(50% + 470px);
        top: 140px;
    }
}
@media(max-width: 1200px){
    .page-hero-services-image:nth-of-type(1) {
        left: calc(50% - 543px);
        top: 284px;
    }
    .page-hero-services-image:nth-of-type(3) {
        left: calc(50% + 400px);
        top: 140px;
    }
}
@media(max-width: 1024px){
    .page-hero-services {
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .page-hero-services .page-title {
        padding-top: 0;
    }
    .page-hero-services {
        position: relative;
        background-image: 
            url('/wp-content/themes/drumncode/assets/images/ellipse.png'),
            url('/wp-content/themes/drumncode/assets/images/ellipse.png'),
            url('/wp-content/themes/drumncode/assets/images/page-hero-mobile.webp');
        background-position: top -60px left -210px, top 85px right -210px, 50% 0;
        background-size: 420px 420px, 420px 420px, auto 100%;
        margin-bottom: 72px;
    }
    
    .page-hero-services-image {
        height: 88px;
    }
    .page-hero-services-image:nth-of-type(1) {
        left: 0;
        top: 367px;
    }
    .page-hero-services-image:nth-of-type(2) {
        left: unset;
        right: 0;
        top: 500px;
    }
    .page-hero-services-image:nth-of-type(3) {
        left: unset;
        right: 0;
        top: 145px;
    }
}


/* More cases block */
#more-cases {
    margin-bottom: 160px;
}
.more-cases-section-title {
    font-size: 40px;
    line-height: 56px;
    font-weight: 600;
}
.more-cases-link {
    display: block;
    outline: solid 2px rgba(255, 255, 255, 0.2);
    outline-offset: -2px;
    transition: outline .3s;
}
.more-cases-link:hover {
    outline: solid 2px rgba(255, 203, 8, 1);
}
.more-cases-behance {
    margin-bottom: 30px;
}
.more-cases-behance-background {
    background-image: url('/wp-content/themes/drumncode/assets/images/behance-background.svg');
    background-repeat: no-repeat;
    background-position: 0 0;
    background-size: 100%;
    width: 100%;
    height: 72px;
}
.more-cases-dribbble-background {
    background-image: url('/wp-content/themes/drumncode/assets/images/dribbble-background.svg');
    background-repeat: no-repeat;
    background-position: 0 0;
    background-size: 100%;
    width: 100%;
    height: 72px;
}
.more-cases-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 40px 24px 24px 24px;
}
.more-cases-inner .link-arrow {
    white-space: nowrap;
}
.more-cases-inner p {
    font-weight: 600;
    font-size: 24px;
    line-height: 150%;
    color: #fff;
}
.more-cases-behance .more-cases-inner p span {
    color: #1D70FA;
}
.more-cases-dribbble .more-cases-inner p span {
    color: #EA4C88;
}
.link-arrow {
    font-weight: 500;
    font-size: 16px;
    line-height: 150%;
    color: #a1a1a1;
    padding-right: 24px;
    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_1773_2566)'%3E%3Cpath d='M8 6.696L14.5017 13L8 19.304L9.74917 21L18 13L9.74917 5L8 6.696Z' fill='%23FFCB08' /%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_1773_2566'%3E%3Crect width='24' height='24' fill='white' /%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 100% 50%;
    transition: color .3s;
}
.more-cases-link:hover .link-arrow {
    color: #FFCB08;
}
@media(max-width: 768px){
    .more-cases-behance-background,
    .more-cases-dribbble-background {
        background-size: cover;
    }
    .more-cases-inner {
        flex-wrap: wrap;
        justify-content: end;
        
    }
    .more-cases-inner p {
        flex: 0 0 100%;
        margin-bottom: 24px;
    }
}

/* image slider (Agency) */
.image-slider-wrp {
    max-width: 1680px;
    margin: 0 auto;
}
.image-slider {
    margin-bottom: 160px;
}
.image-slider-item img {
    height: 400px;
    width: auto;
    display: block;
    padding: 0 15px;
}
@media(max-width: 1024px){
    .image-slider {
        margin-bottom: 72px;
    }
    .image-slider-item img {
        height: 220px;
        padding: 0 8px;
    }
}


/* screenshot gallery */
.screenshot-gallery {
    margin-bottom: 120px;
}
.screenshot-gallery-wrp {
    display: flex;
    gap: 30px;
    overflow: hidden;
    max-width: 100%;
}
.screenshot-gallery-wrp.desktop-2 {
    gap: 60px;
}
.screenshot-gallery-wrp.desktop-3 {
    gap: 50px;
}
.screenshot-gallery-wrp.desktop-4 {
    gap: 40px;
}
.screenshot-gallery-wrp.align-center {
    justify-content: center;
}
.screenshot-gallery-wrp.align-space-between {
    justify-content: space-between;
}
.screenshot-gallery-wrp.align-space-around {
    justify-content: space-around;
}

.screenshot-gallery-item {
    flex: 0 0 auto;
}

.screenshot-gallery-item img {
    height: 510px;
    max-width: 100%;
    width: auto;
    display: block;
}
.screenshot-gallery-wrp.desktop-5 .screenshot-gallery-item img {
    height: 428px;
}
@media(max-width: 990px){
    .screenshot-gallery {
        margin-bottom: 72px;
    }
    .screenshot-gallery-wrp.desktop-2, 
    .screenshot-gallery-wrp.desktop-3, 
    .screenshot-gallery-wrp.desktop-4 {
        gap: 16px;
    }
    .screenshot-gallery-wrp.mobile-1 .screenshot-gallery-item:nth-child(n + 2) {
        display: none;
    }
    .screenshot-gallery-wrp.mobile-2 .screenshot-gallery-item:nth-child(n + 3) {
        display: none;
    }
    .screenshot-gallery-wrp.mobile-3 .screenshot-gallery-item:nth-child(n + 4) {
        display: none;
    }
    .screenshot-gallery-item img {
        height: 224px;
    }
}


/* masonry gallery */
.masonry-gallery {
    margin-bottom: 120px;
}
.masonry-gallery-wrp {
    display: grid;
    max-width: 100%;
}

.acf-field-select .masonry-gallery-wrp {
    padding: 10px;
    background-color: #111;
    gap: 5px!important;
    counter-reset: masonry-counter;
    min-height: 320px;
}
.acf-field-select .masonry-gallery-wrp .masonry-gallery-item {
    border: 1px solid #EEE;
    position: relative;
}
.acf-field-select .masonry-gallery-wrp .masonry-gallery-item::after {
    counter-increment: masonry-counter;
    content: counter(masonry-counter);
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    font-size: 32px;
    color: rgba(255, 255, 255, 0.8);
    text-shadow: 0px 0px 8px rgba(0, 0, 0, 0.8);
}
.acf-field-select .masonry-gallery-wrp .masonry-gallery-item img {
    display: block;
}

.masonry-gallery-wrp.masonry-layout-1 {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 43fr 57fr;
    gap: 30px;
}
.masonry-layout-1 .masonry-gallery-item:nth-child(1) {
    grid-column: 1/2;
    grid-row: 1/3;
}
.masonry-layout-1 .masonry-gallery-item:nth-child(2) {
    grid-column: 2/3;
    grid-row: 1/2;
}
.masonry-layout-1 .masonry-gallery-item:nth-child(3) {
    grid-column: 2/3;
    grid-row: 2/3;
}

.masonry-gallery-wrp.masonry-layout-2 {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    gap: 30px;
}
.masonry-layout-2 .masonry-gallery-item:nth-child(1) {
    grid-column: 1/2;
    grid-row: 1/2;
}
.masonry-layout-2 .masonry-gallery-item:nth-child(2) {
    grid-column: 1/2;
    grid-row: 2/3;
}
.masonry-layout-2 .masonry-gallery-item:nth-child(3) {
    grid-column: 2/3;
    grid-row: 1/3;
}

.masonry-gallery-wrp.masonry-layout-3 {
    grid-template-columns: 35fr 73fr;
    grid-template-rows: 3fr 4fr;
    gap: 30px;
}
.masonry-layout-3 .masonry-gallery-item:nth-child(1) {
    grid-column: 1/2;
    grid-row: 1/2;
}
.masonry-layout-3 .masonry-gallery-item:nth-child(2) {
    grid-column: 1/2;
    grid-row: 2/3;
}
.masonry-layout-3 .masonry-gallery-item:nth-child(3) {
    grid-column: 2/3;
    grid-row: 1/3;
}

.masonry-gallery-wrp.masonry-layout-4 {
    grid-template-columns: 73fr 35fr;
    grid-template-rows: 44fr 20fr;
    gap: 30px;
}
.masonry-layout-4 .masonry-gallery-item:nth-child(1) {
    grid-column: 1/2;
    grid-row: 1/3;
}
.masonry-layout-4 .masonry-gallery-item:nth-child(2) {
    grid-column: 2/3;
    grid-row: 1/2;
}
.masonry-layout-4 .masonry-gallery-item:nth-child(3) {
    grid-column: 2/3;
    grid-row: 2/3;
}

.masonry-gallery-item img {
    max-width: 100%;
    height: auto;
}
@media(max-width: 990px){
    .masonry-gallery {
        margin-bottom: 72px;
    }
    .masonry-gallery-wrp {
        display: flex;
        flex-direction: column;
        gap: 24px;
    }
}

.single-portfolio section.reduced-margin {
    margin-bottom: 30px;
}