/* ==========================================================================
   THE SECRET SAUCE SUMMIT 2026
   Builder Card
   PHP 7.3.5+
========================================================================== */

.builder-slider,
.builder-slider-mobile{
    position:relative;
}

/* ==========================================================================
   Swiper
========================================================================== */

.swiper-slide{
    overflow:hidden;
}

.swiper-slide img{
    width:100%;
    height:auto;
    display:block;
    transition:.45s ease;
}

.swiper-slide:hover img{
    transform:scale(1.03);
}

.builder-top .swiper-wrapper,
.builder-bottom .swiper-wrapper{
    transition-timing-function: linear !important;
}
.desktop-only{
    display:block;
}

.mobile-only{
    display:none;
}

/* ==========================================================================
   Card
========================================================================== */

.builder-card{
    display:block;
    color:#fff;
    text-decoration:none;
    background:#000;
    overflow:hidden;
}

.builder-card:hover{
    color:#fff;
    text-decoration:none;
}

.builder-image{
    position:relative;
    overflow:hidden;
}

.builder-image img{
    width:100%;
    display:block;
}

.builder-line {border-top: 1px solid rgba(255, 255, 255, .35); position: absolute; left: 0; top: 40%; width: 100%;}

/* ==========================================================================
   Logo
========================================================================== */

.builder-logo{
    position:absolute;
    top:10px;
    right:10px;
    z-index:5;
    border-radius: 50%;
    overflow: hidden;

    display: flex;
    justify-content: center;
    align-items: center;
}

.builder-logo img{
    width:64px;
    height:64px;
    object-fit:contain;
    border-radius: 50%;
}

/* ==========================================================================
   Footer
========================================================================== */

.builder-footer{
    background:rgba(0, 0, 0, .35);
    color:#fff;

    display:flex;
    justify-content:space-between;
    align-items:flex-start;

    gap:20px;
    padding:20px;

    width: 100%;
    position: absolute;
    bottom: 0;
    z-index: 1;

    transition: background .45s ease;
}

.builder-card:hover .builder-footer {
    background: rgba(0, 0, 0, .75);
}

.builder-content{
    flex:1;
}

.builder-name{
    margin:0;
    font-size:20px;
    line-height:1;
    font-weight:600;
    color:#fff;
    font-family: var(--fontfamily1);
    /*font-family: var(--fontAnton),var(--fontfamily1);*/
    /*letter-spacing: 1.75px;*/
}

.builder-brand{
    font-size:18px;
    line-height:1;
    color:#fff;
    opacity:.85;
    font-family: var(--fontfamily1);
}

.builder-type{
    margin-top:12px;
    font-size:24px;
    line-height: 1;
    text-transform:uppercase;
    color:#fff;
}

/* ==========================================================================
   Arrow
========================================================================== */

.builder-arrow{

    width:20px;
    height:20px;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:.3s;
    
    border: 1px solid transparent;
    border-radius: 50%;
    padding: 20px;

    position: absolute;
    right: 15px;
    top: 10px;
}

.builder-arrow::after {
    content: "";
    position: absolute;
    width: 20px;
    height: 20px;
    background: url(../images/icon/arrow-headline-down-while.webp) no-repeat center;
    background-size: contain;
}

/*.builder-arrow svg{
    width:22px;
    height:22px;
}*/

.builder-card:hover .builder-arrow{
    /*transform:translate(3px,-3px);*/
    border-color:#fff;
}

/*.builder-card:hover .builder-arrow svg{
    transform:translate(1px,-1px);
}*/



/* ==========================================================================
   Desktop Slider
========================================================================== */

/*.builder-top{
    margin-bottom:30px;
}*/

/*.builder-top .swiper-slide,
.builder-bottom .swiper-slide{
    border-radius:12px;
}*/

/* ==========================================================================
   Mobile
========================================================================== */

/*.builder-mobile .swiper-slide{
    border-radius:12px;
}*/

/* ==========================================================================
   Swiper Pagination
========================================================================== */

.builder-mobile .swiper-pagination{
    position:relative;
    margin-top:25px;
}

.builder-mobile .swiper-pagination-bullet{
    width:10px;
    height:10px;
    opacity:.3;
    background:#999;
}

.builder-mobile .swiper-pagination-bullet-active{
    opacity:1;
    background:#fff;
}

/* ==========================================================================
   Responsive
========================================================================== */

@media (max-width:1024px){

    .builder-name{
        font-size:22px;
    }

}

@media (max-width:768px){

    .desktop-only{
        display:none;
    }

    .mobile-only{
        display:block;
    }

    .builder-logo{
        top:8px;
        right:8px;
    }

    .builder-logo img{
        width:52px;
        height:52px;
    }

    .builder-footer{
        padding:18px;
    }

    .builder-name{
        font-size:20px;
    }

    .builder-brand{
        font-size:14px;
    }

    .builder-type{
        font-size:12px;
    }

    .builder-arrow{
        width:28px;
        height:28px;
    }

    .builder-arrow svg{
        width:18px;
        height:18px;
    }

}

@media (max-width:480px){

    .builder-footer{
        padding:16px;
    }

    .builder-name{
        font-size:18px;
    }

    .builder-brand{
        font-size:13px;
    }

    .builder-type{
        font-size:11px;
    }

}



/* ==========================================================================
   Builder Archive
========================================================================== */

.builders-archive{

    padding:80px 0;

}

.builder-type-section{

    margin-bottom:35px;

}

.builder-type-title{

    margin:0 0 30px;

    font-size:42px;

    font-weight:700;

    color:#fff;

}

.builder-grid{

    display:grid;

    grid-template-columns:repeat(3,minmax(0,1fr));

    gap:32px;

}

.builder-grid .builder-card{

    width:100%;

}

#builders-showcase.gtco-section {padding: 0 0 10vh;}
.page-template-99builders .hero-btn-access {margin: 5vh 0 10vh;}

@media(max-width:991px){

    .builder-grid{

        grid-template-columns:repeat(2,minmax(0,1fr));

    }

}

@media(max-width:768px){
    #builders-showcase .gtco-container {padding-left: 0; padding-right: 0;}
    #builders-showcase.gtco-section {padding: 0 0 5vh;}
    .page-template-99builders .hero-btn-access {margin: 2vh 0 20vh;}

    .builder-type-title{

        font-size:28px;

    }

    .builder-grid{

        grid-template-columns:1fr;

        gap:20px;

    }

}


/*!
 * ==========================================================================
 * THE SECRET SAUCE SUMMIT 2026
 * Builders Home
 * ==========================================================================
 */

.builders-home{
    padding: 60px 0 0;
}

.builder-type-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:10px;
    padding-bottom: 5px;
    border-bottom: 1px solid rgba(255, 255, 255, .35);
}

.page-template-99builders .section-heading h2{
    color: var(--color-orange);
    font-size: 30px;
    letter-spacing: 1.75px;
    font-weight: bold;
    line-height: 1.5;
    font-family: var(--fontCoolvetica);
}

.builder-type-header h3{
    margin:0;
    color:#fff;
    font-size:24px;
    letter-spacing: 1.75px;
    font-weight: normal;
    text-transform:uppercase;
    font-family: var(--fontCoolvetica);
}



.builder-type-slider{
    overflow:hidden;
}

.builder-type-slider .swiper-slide{
    height:auto;
}

.builder-card{
    display:block;
    height:100%;
}

.builder-card img{
    width:100%;
    display:block;
}

@media(max-width:991px){

    .builders-home{
        padding:40px 0 0;
    }

    .builder-type-header h3{
        font-size:18px;
    }

}


.builder-view-all{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;

    color: rgba(255, 255, 255, .65);
    text-decoration:none;

    font-size:14px;
    font-weight:600;
    letter-spacing:.08em;
    text-transform:uppercase;

    transition:.3s;
}
.builder-view-all .builder-arrow {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: .3s;
    border: 1px solid transparent;
    border-radius: 50%;
    padding: 16px;
    position: relative;
    right: unset;
    top: unset;
}

/*.builder-view-all svg{
    width:26px;
    height:26px;
    transition:.3s;
}*/

.builder-view-all:hover{
    color:#FFF;
    transform:translateX(4px);
}

.builder-view-all:hover .builder-arrow {
  border: 1px solid #FFF;
}

/*.builder-view-all:hover svg{
    transform:translateX(4px);
}*/

.builder-view-all .builder-arrow::after {width: 16px; height: 16px;}

/* Builder Type ----------------------------------- */
.builder-type-slider .builder-logo img {height: 42px;}
.builder-type-slider .builder-footer {padding: 8px;}
.builder-type-slider .builder-name {font-size: 14px;}
.builder-type-slider .builder-brand {font-size: 12px;}
.builder-type-slider .builder-type,
.builder-type-slider .builder-line {display: none;}
.builder-type-slider .builder-arrow,
.builder-type-slider:hover .builder-arrow {padding: 12px; right: 8px; top: 8px;}
.builder-type-slider .builder-arrow::after {width: 12px; height: 12px;}




/* page builder ----------------------------------- */
.logo-page-builders {padding: 2.5em 0; border-top: 1px solid rgba(255, 255, 255, .35); /*border-bottom: 1px solid rgba(255, 255, 255, .45);*/ margin-top: 150px;}
.logo-page-builders img {width: 50%;}

@media(max-width:768px){
    .builder-type-slider .builder-logo img {
        height: 32px;
    }
  .builder-type-slider .builder-arrow,
  .builder-type-slider:hover .builder-arrow {padding: 8px; right: 0px; top: 8px;}
  .logo-page-builders {padding: 1.5em 0; margin-top: 90px;}
  .page-template-99builders .builder-profile {padding: 40px 0;}

  .logo-page-builders img {width: 75%;}

  .page-template-99builders .section-heading h2 {font-size: 24px;}
}