.brand-collaborations-hero{
    padding: 73px 0px 12vw 0px;
    position: relative;
    .title{
        max-width: 680px;
        margin: 0px auto;
        h2{
            font-size: clamp(30px, 3.125vw, 80px);
            color: $white;
            font-weight: $extra_bold;
        
            span{
                display: block;
                margin-left: 130px;  
            }
        }
    }
    .brands-collab-hero-gallery{
        // height: 348px;
        --num-cols: 15;
        max-width: 100%;
        margin-block: 0px;
        padding-top: 4rem;
        display: grid;
        grid-template-columns: repeat(var(--num-cols), 1fr);
        grid-template-rows: repeat(2, 175px);
        gap: 15px;
        align-items: end;
        .brands-collab-gallery-item{
            height: 100%;
            .brands-collab-gallery-image{
                height: 100%;
                width: 100%;
                border-radius: 8px;
                overflow: hidden;
                img{
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                }
            }
            &:nth-child(1){
                grid-row: span 2;
                grid-column: span 1;
                height: calc(100% - 30px);
                align-self: baseline;

                .brands-collab-gallery-image{   
                    border-radius: 8px 8px 8px 8px;
                }
            }
            &:nth-child(2){
                grid-row: span 2;
                grid-column: span 2;
                height: calc(100% - 32px);
            }
            &:nth-child(3){
                grid-row: span 2;
                grid-column: span 4;
                height: calc(100% - 15px);
                .brand-info-card{
                    height: 100%;
                    .brand-info-cover{
                        height: 188px;
                        img{
                            height: 100%;
                            width: 100%;
                            object-fit: cover;
                        }
                    }
                    .brand-info-box{
                        padding: 18px 33px;
                        background-color: $white;
                        height: calc(100% - 188px);
                        .brnad-acc-info{
                            display: flex;
                            align-items: center;
                            .brand-info-img{
                                height: 70px;
                                width: 70px;
                                border-radius: 50%;
                                overflow: hidden;
                                img{
                                    height: 100%;
                                    width: 100%;
                                    object-fit: cover;
                                }
                            }
                            .brand-name{
                                margin-left: 13px;
                                width: calc(100% - 83px);
                                h4{
                                    @include font-applying(
                                        $fs: 23px,
                                        $ff: $font_text,
                                        $fw: $bold,
                                        $fsty: normal
                                    );
                                    line-height: 20px;
                                    margin-bottom: 0px;
                                }
                                p{
                                    font-size: 16px;
                                    margin-bottom: 0px !important;
                                }
                            }
                        }
                        .brand-socials{
                            margin-top: 20px;
                            .follower-count{
                                i{
                                    font-family: 'Font Awesome 5';
                                    font-size: 16px;
                                    color: #bcb5b5;
                                }
                                span{
                                    font-size: 16px;
                                    color: $text_color;
                                    font-weight: light;
                                }
                            }
                        }
                    }
                }
            }
            &:nth-child(4){
                grid-row: span 2;
                grid-column: span 3;
                height: calc(100% - 30px);
                .brands-collab-gallery-image{
                    img{
                        object-position: top;
                    }
                }
            }
            &:nth-child(5){
                grid-row: span 2;
                grid-column: span 2;
            }
            &:nth-child(6){
                grid-row: span 2;
                grid-column: span 3;
                height: calc(100% - 10px);
                .brands-collab-gallery{
                    height: calc(50% - 5px);
                    img{
                        height: 100%;
                        width: 100%;
                        object-fit: cover;
                        margin: 5px 0 0 0;
                        /* padding-top: 5px; */
                        border-radius: 8px;
                    }     
                }
            }
        }
    }
}
.wave {
    position: absolute;
    bottom: -1px;
}
.parallax-section{
    position: relative;
    margin-bottom: 50px;
}
.brands-callab-logos{
    padding: 55px 0px;
    .collab-logos-list {
        max-width: 800px;
        margin: 0px auto;
        .collab-logo-item{
            padding: 0px 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            height: 48px;
            img{
                height: 100%;
                width: 100%;
                object-fit: contain;
            }
        }
        .slick-list {
            .slick-track{
                display: flex;
                justify-content: center;
                align-items: center;
            }
        }
    }
}
.content-zigzag-section{
  @media(min-width:767px){
    margin:100px 0px;
  }

  @media(max-width:767px){
    margin: 60px 0px;
  }
    
    .content-sec-wrap{
        .content-column{
            display: flex;
            align-items: flex-end;
            justify-content: end;
        }
        .content-box{
            max-width: 550px;
            padding: 0px 50px;
            h3{
                /* font-size: 45px;
                line-height: 64px; */
            }
            p{
                font-size: 16px;
            }
        }
        .content-sec-imgs{
          
            padding: 90px 65px 140px 90px;
            background-color: #ffda69;
            border-radius: 30px 0px 0px 30px;
            position: relative;
            margin: 0px 0px 0px auto;
            .image-collage{
                position: relative;
                max-width: 550px;
                img{
                   &:nth-child(1){
                        height: 395px;
                        width: 330px;
                        object-fit: cover;
                        border-radius: 8px;
                    }    
                }
            }
            .small-image{
                height: 215px;
                width: 230px;
                object-fit: cover;
                position: absolute;
                bottom: -50px;
                right: 2vw;
                border-radius: 8px;
            }
        }
        .custom-x-gap{
          @media (min-width: 767px) and (max-width: 850px) {
            --bs-gutter-x: 0;
          }
            --bs-gutter-x: 85px;
        }
    }

    &:nth-child(2){
        .content-sec-wrap{
            .row{
                flex-flow: row-reverse;
            }
            .content-column{
                justify-content: start;
            }

            .content-sec-imgs{
                padding: 65px 60px 90px 60px;
                background-color: #d6e8dc;
                border-radius: 0px 30px 30px 0px;
                margin: 0px 0px auto 0px;
                .image-collage{
                    margin-top: 105px;
                    width: 100%;
                    display: flex;
                    margin-left: auto;
                    img{
                        &:nth-child(1){
                            height: 355px;
                            width: calc(100% - 200px);
                        }
                    }
                    .small-image{
                        position: unset;
                        width: 182px;
                        height: 353px;
                        object-fit: cover;
                        border: none;
                        border-radius: 8px;
                        margin-left: 18px;
                        transform: translateY(-105px);
                    }
                }
            }
            .content-box{
                padding: 0px; 
                padding-left: 50px;
            }
        }
        @media (min-width: 768px) {
            .custom-side-container .container {
              max-width: calc(((100% - 750px) / 2) + 750px) !important;
              margin-left: 0;
              padding-left: 0px;
            }
        }
          
        @media (min-width: 992px) {
            .custom-side-container .container {
              max-width: calc(((100% - 970px) / 2) + 970px) !important;
              margin-left: 0;
              padding-left: 0px;
            }
        }
          
        @media (min-width: 1200px) {
            .custom-side-container .container {
              max-width: calc(((100% - 1170px) / 2) + 1170px) !important;
              margin-left: 0;
              padding-left: 0px;
            }
        }
    }
    &:nth-child(3){
        .content-sec-imgs{
            background-color: #fab6d2;
            .image-collage{
                display: flex;
                justify-content: flex-end;
                right: 40px;
                .small-image{
                    right: unset;
                    left: 3vw;
                    border: 0px;
                }
            }
        }
    }
}
.eleavte-brand-section{
    padding: 80px 0px;
    .title{
        h3{
            /* font-size: 50px; */

          font-size: clamp(30px, 2.34375vw, 50px);
        }
    }
    .products-cards-listing{
        max-width: 1050px;
        margin: 0px auto;
        padding-top: 60px;
        .product-card{
            height: 460px;
            border-radius: 20px;
            overflow: hidden;
          /* 08-10-2024 */
            max-width: 400px;
            margin: 10px auto;
            .product-image{
                position: relative;
                height: 100%;
                img{
                    height: 100%;
                    width: 100%;
                    object-fit: cover;
                }
                .product-content{
                    position: absolute;
                    top: 0;
                    height: 100%;
                    width: 100%;
                    background: linear-gradient(to top, rgba(0, 0, 0, 0.7), rgba(255, 255, 255, 0), rgba(255, 255, 255, 0));
                    display: flex;
                    align-items: end;
                    padding: 30px;
                    h4{
                        color: $white;
                        font-size: 24px;
                        font-weight: bold;
                        margin-bottom: 0px;
                    }
                }
            }
            &:hover{
                .product-image{
                    .product-content{
                        background: linear-gradient(to top, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.2), rgba(255, 255, 255, 0));
                    }
                }
            }
        }
    }
}

.brands-we-love-wrap{
    padding: 25px 0px 130px 0px;
    .section-header{
        max-width: 560px;
        margin: 0px auto;
        h3{
            /* font-size: 50px; */
        }
        p{
            color: #2d2d2d;
            font-size: 16px;
        }
    }
    .ellipsis{
        position: absolute;
        top: 80px;
    }
    .brand-cards{
        margin-top: 50px;
        max-width: 1130px;
        margin: 50px auto 0px;
        z-index: 2;
        position: relative;
        .primary-brand-card{
            background: #ffda69;
            border-radius: 10px 8px 8px 8px;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0px 0px 0px 35px;
            overflow: hidden;
            /* height: 290px; */
            max-height: auto;
            .card-content{
                max-width: calc(100% - 230px);
                padding: 13px 0px;
                h4{
                    font-size: 28px;
                    font-weight: bold;
                }
                p{
                    font-size: 16px;
                    margin-bottom: 0px;
                }   
            }
            .primary-card-imgs{
                width: 190px;
                height: 100%;
                display: flex;
                flex-flow: column;
                justify-content: center;
                .card-single-img{
                    img{
                        width: 100%;
                        height: 100%;
                        object-fit: cover;
                        border-radius: 8px;
                        overflow: hidden;
                    }
                    &:nth-child(1){
                        padding: 16px;
                    }
                    &:nth-child(2){
                        border-radius: 8px 8px;
                        overflow: hidden;
                        img{
                            border-radius: 8px 0px;
                        }
                    }
                }
            }
            &.secondary-brand-card{
                background-color: #fab6d2;
                padding: 0px 0px 0px 30px;

                .primary-card-imgs{
                    height: 100%;
                    .card-single-img{
                        height: 100%;
                        padding: 0px !important;
                        border: 0px;
                        img{
                            border-radius: 0px;
                        }
                    }
                }
            }
        }
    }
}

.get-in-touch-form{
    background-color: $secondary_color;
    /* padding: 10px 0px 320px; */
    margin-bottom: 70px;
    .section-header{
        max-width: 615px;
        margin: 0px auto;
        h3{
            text-align: center;
            color: $white;
            font-weight: bold;
        }
        p{
            text-align: center;
            color: $white;
            font-size: 16px;
            letter-spacing: 0.3px;
        }

    }
    .contact-form{
        max-width: 810px;
        margin: 0px auto;
        padding: 0px 15px;
        .form-floating{
            margin: 5px;
            input{
                padding: 1rem 25px;
                              padding-top: 20px;
                border-radius: 8px;
                outline: none;
              font-size: 16px;
              height: 58px;
                &:focus{
                    box-shadow: none;
                }
            }
            label{
                font-size: 16px;
                color: #010101;
                padding: 1.8rem 25px;
                overflow: inherit;
                white-space: normal;
            }
            textarea{
                min-height: 180px;
                padding: 2rem 25px;
                resize: none;
                outline: none;
                &:focus{
                    box-shadow: none;
                }
            }
            .form-control-plaintext~label, .form-control:focus~label, .form-control:not(:placeholder-shown)~label, .form-select~label{
                transform: scale(.75) translateY(-0.8rem) translateX(0.15rem) !important;
            }
        }
        .submit-cta{
            margin-top: 50px;
            text-align: center;
        }
    }
}



@media screen and (max-width: 767px) {
  .brands-collab-hero-marquee {
    overflow: hidden;
    position: relative;
    display: flex;
    .brands-collab-hero-gallery {
      display: grid;
      animation: marquee 10s linear infinite; // Increase duration for smoother effect
      min-width: 100%;
      &:nth-child(2) {
        position: absolute;
        left: 100%;
        margin-left: 15px;
      }
    }
    @keyframes marquee {
      0% {
        transform: translateX(0);
      }
      100% {
        transform: translateX(
          calc(-100% - 15px)
        ); // Move left by 100% of the container width
      }
    }
  }
}