﻿﻿

.home-banner{
    width: 100%;
    position: relative;
    overflow: hidden;
    background: #041b45;
}


.home-banner-track{
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    transform: translate3d(0, 0, 0);
    transition: transform .85s cubic-bezier(.65, 0, .35, 1);
}


.home-banner-item{
    width: 100%;
    min-width: 100%;
    flex: 0 0 100%;
    overflow: hidden;
}

.home-banner-item a{
    display: block;
    width: 100%;
}

.home-banner-item img{
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    border: 0;
    transform: scale(1.025);
    transition: transform 4.8s ease;
}


.home-banner-item.active img{
    transform: scale(1);
}



.home-banner-dots{
    position: absolute;
    right: 10.8%;
    bottom: 36px;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
}


.home-banner-dots.is-hidden{
    display: none;
}

.home-banner-dots button{
    width: 40px;
    height: 8px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: #fff;
    opacity: 1;
    cursor: pointer;
    transition:
        width .3s ease,
        background .3s ease,
        transform .3s ease;
}

.home-banner-dots button:hover{
    transform: scaleX(1.08);
}

.home-banner-dots button.active{
    width: 80px;
    background: #041b45;
}

.home-banner{
    touch-action: pan-y;
    cursor: grab; overflow:hidden;
    user-select: none;
    -webkit-user-select: none;
}

.home-banner.is-dragging{
    cursor: grabbing;
}

.home-banner img{
    pointer-events: none;
    -webkit-user-drag: none;
}


/* Banner navigation arrows */

.home-banner-arrow{
    width: 52px;
    height: 52px;
    padding: 0;
    position: absolute;
    top: 50%;
    z-index: 12;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, .48);
    border-radius: 50%;
    background: rgba(4, 27, 69, .72);
    color: #fff;
    font-size: 30px;
    line-height: 1;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-50%) scale(.86);
    box-shadow: 0 10px 28px rgba(4, 27, 69, .25);
    transition:
        opacity .3s ease,
        visibility .3s ease,
        transform .3s ease,
        background .3s ease,
        color .3s ease,
        border-color .3s ease;
}

.home-banner-prev{
    left: 134px;
}

.home-banner-next{
    right: 134px;
}

.home-banner:hover .home-banner-arrow{
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(-50%) scale(1);
}

.home-banner-arrow:hover{
    border-color: #dfae3c;
    background: #dfae3c;
    color: #041b45;
}

.home-banner-arrow:active{
    transform: translateY(-50%) scale(.94);
}

.home-banner-arrow.is-hidden{
    display: none;
}


/* =========================================================
   Home About
   Main Color: #041b45
   Secondary Color: #dfae3c
========================================================= */

.home-about{
    width: 100%;
    padding: 64px 0;
    background: #fff;
}

.home-about-wrap{
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 48px;
}

/* =========================================================
   Image Gallery
========================================================= */

.home-about-gallery{
    width: 728px;
    flex-shrink: 0;
    display: flex;
    align-items: stretch;
    gap: 20px;
}

.home-about-small-images{
    width: 308px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.home-about-image{
    width: 308px;
    height: 338px;
    position: relative;
    overflow: hidden;
    border-radius: 10px;
    background: #041b45;
}

.home-about-image > img{
    display: block;
    width: 308px;
    height: 338px;
    object-fit: cover;
}

.home-about-main-image{
    width: 400px;
    height: 696px;
    overflow: hidden;
    border-radius: 10px;
    background: #041b45;
}

.home-about-main-image img{
    display: block;
    width: 400px;
    height: 696px;
    object-fit: cover;
}

/* =========================================================
   First Image Text
========================================================= */

.home-about-image-title{
    position: absolute;
    left: 28px;
    top: 38px;
    z-index: 2;
    color: #fff;
    font-family: myFirstFont1;
    font-size: 17px;
    line-height: 23px;
    font-weight: 600;
}

/* =========================================================
   Second Image Caption
========================================================= */

.home-about-image-caption{
    width: 268px;
    min-height: 130px;
    padding: 30px 20px 24px;
    position: absolute;
    left: 20px;
    bottom: 30px;
    z-index: 2;
    box-sizing: border-box;
    border-radius: 8px;
    background: #dfae3c;
    color: #fff;
    text-align: center;
}

.home-about-image-caption strong{
    display: block;
    margin-bottom: 14px;
    color: #fff;
    font-size: 15px;
    line-height: 22px;
    font-weight: 600;
}

.home-about-image-caption p{
    margin: 0;
    color: #fff;
    font-size: 13px;
    line-height: 18px;
}

/* =========================================================
   Content
========================================================= */

.home-about-content{
    flex: 1;
    min-width: 0;
    padding-top: 8px;
}

.home-about-label{
    width: max-content;
    min-width: 190px;
    height: 40px;
    padding: 0 26px;
    margin-bottom: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    box-sizing: border-box;
    border-radius: 24px;
    background: #041b45;
    color: #fff;
}

.home-about-label img{
    display: block;
    width: 12px;
    height: 12px;
    object-fit: contain;
}

.home-about-label span{
    color: #fff;
    font-size: 14px;
    line-height: 40px;
}

.home-about-content h2{
    margin: 0 0 32px;
    color: #111;
    font-size: 30px;
    line-height: 39px;
    font-weight: 600;
}

.home-about-description{
    margin-bottom: 25px;
}

.home-about-description p{
    margin: 0 0 12px;
    color: #666;
    font-size: 14px;
    line-height: 20px;
}

.home-about-description p:last-child{
    margin-bottom: 0;
}

/* =========================================================
   Feature Box
========================================================= */

.home-about-features{
    width: 100%;
    padding: 30px 32px;
    margin-bottom: 30px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 46px;
    box-sizing: border-box;
    border-radius: 10px;
    background: #f6f6f6;
}

.home-about-feature{
    min-width: 0;
}

.home-about-feature-title{
    min-height: 48px;
    padding-bottom: 14px;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 12px;
    border-bottom: 1px solid #ddd;
}

.home-about-feature-title img{
    display: block;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    object-fit: contain;
}

.home-about-feature-title strong{
    color: #111;
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
}

.home-about-feature p{
    margin: 0;
    color: #777;
    font-size: 12px;
    line-height: 19px;
}

/* =========================================================
   View More Button
========================================================= */

.home-about-more{
    width: 168px;
    height: 51px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    border-radius: 3px;
    background: #041b45;
    color: #fff;
    font-size: 15px;
    text-decoration: none;
    overflow: hidden;
    position: relative;
}

.home-about-more::before{
    content: "";
    width: 0;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background: #dfae3c;
    transition: width .35s ease;
}

.home-about-more i,
.home-about-more span{
    position: relative;
    z-index: 2;
}

.home-about-more i{
    font-size: 15px;
    transition: transform .3s ease;
}

.home-about-more:hover{
    color: #041b45;
}

.home-about-more:hover::before{
    width: 100%;
}

.home-about-more:hover i{
    transform: translateX(5px);
}

/* =========================================================
   Image Hover Effects
========================================================= */

.home-about-image > img,
.home-about-main-image img{
    transition: transform .6s ease;
}

.home-about-image:hover > img,
.home-about-main-image:hover img{
    transform: scale(1.04);
}



/* =========================================================
   Home Inspection Process
========================================================= */

.home-process{
    width: 100%;
    padding: 68px 0 70px;
    background: #f7f7f7;
}

.home-process-title{
    margin-bottom: 42px;
    text-align: center;
}

.home-process-title h2{
    margin: 0;
    color: #111;
    font-size: 32px;
    line-height: 42px;
    font-weight: 600;
}

.home-process-list{
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 44px;
    row-gap: 38px;
}

.home-process-item{
    min-width: 0;
    text-align: center;
}

.home-process-image{
    width: 100%;
    aspect-ratio: 421 / 240;
    margin-bottom: 17px;
    overflow: hidden;
    border-radius: 9px;
    background: #e9edf2;
}

.home-process-image img{
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .6s ease;
}

.home-process-item:hover .home-process-image img{
    transform: scale(1.045);
}

.home-process-item h3{
    margin: 0 0 9px;
    color: #111;
    font-size: 19px;
    line-height: 26px;
    font-weight: 600;
}

.home-process-item p{
    margin: 0;
    color: #666;
    font-size: 15px;
    line-height: 21px;
}


/* =========================================================
   Featured Manufacturers
   Main Color: #041b45
   Secondary Color: #dfae3c
========================================================= */

.home-brands{
    width: 100%;
    padding: 58px 0 46px;
    background: #edf2fa;
}

.home-brands-container{
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* =========================================================
   Content
========================================================= */

.home-brands-content{
    width: 480px;
    flex-shrink: 0;
}

.home-brands-content h2{
    margin: 0 0 42px;
    color: #111;
    font-size: 36px;
    line-height: 50px;
    font-weight: 600;
}

.home-brands-content p{
    width: 470px;
    margin: 0 0 38px;
    color: #666;
    font-size: 16px;
    line-height: 28px;
}

.home-brands-more{
    width: 168px;
    height: 52px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 13px;
    position: relative;
    overflow: hidden;
    border-radius: 3px;
    background: #041b45;
    color: #fff;
    font-size: 15px;
    text-decoration: none;
}

.home-brands-more::before{
    content: "";
    width: 0;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background: #dfae3c;
    transition: width .35s ease;
}

.home-brands-more i,
.home-brands-more span{
    position: relative;
    z-index: 2;
}

.home-brands-more i{
    font-size: 15px;
    transition: transform .3s ease;
}

.home-brands-more:hover{
    color: #041b45;
}

.home-brands-more:hover::before{
    width: 100%;
}

.home-brands-more:hover i{
    transform: translateX(5px);
}

/* =========================================================
   Brand Grid
========================================================= */

.home-brands-list{
    width: 744px;
    display: grid;
    grid-template-columns: repeat(2, 360px);
    gap: 20px 24px;
}

.home-brand-item{
    width: 360px;
    height: 120px;
    padding: 18px 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    overflow: hidden;
    border: 1px solid rgba(4, 27, 69, .04);
    border-radius: 11px;
    background: #fff;
    box-shadow: 0 5px 13px rgba(4, 27, 69, .10);
    text-decoration: none;
    transition:
        transform .3s ease,
        border-color .3s ease,
        box-shadow .3s ease;
}

.home-brand-item img{
    display: block;
    max-width: 100%;
    max-height: 84px;
    width: auto;
    height: auto;
    object-fit: contain;
    transition: transform .35s ease;
}

.home-brand-item:hover{
    border-color: rgba(223, 174, 60, .65);
    box-shadow: 0 12px 28px rgba(4, 27, 69, .16);
    transform: translateY(-5px);
}

.home-brand-item:hover img{
    transform: scale(1.05);
}


/* =========================================================
   Home Services
   Main Color: #041b45
   Secondary Color: #dfae3c
========================================================= */

.home-services{
    width: 100%;
    padding: 70px 0 76px;
    background: #fff;
}

.home-services-heading{
    margin-bottom: 80px;
    text-align: center;
}

.home-services-heading h2{
    margin: 0 0 14px;
    color: #111;
    font-size: 38px;
    line-height: 48px;
    font-weight: 600;
}

.home-services-heading p{
    margin: 0;
    color: #666;
    font-size: 16px;
    line-height: 26px;
}

/* Service List */

.home-services-list{
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 30px;
}

/* Service Item */

.home-service-item{
    min-width: 0;
    position: relative;
    padding-top: 42px;
    text-align: center;
}

/* Service Icon */

.home-service-icon{
    width: 86px;
    height: 86px;
    position: absolute;
    left: 50%;
    top: 0;
    z-index: 2;
    transform: translateX(-50%);
    border-radius: 50%;
    overflow: hidden;
    background: #dfae3c;
    box-shadow: 0 8px 20px rgba(4, 27, 69, .08);
    transition:
        transform .35s ease,
        box-shadow .35s ease;
}

.home-service-icon img{
    display: block;
    width: 86px;
    height: 86px;
    object-fit: contain;
}

/* Service Card */

.home-service-card{
    min-height: 208px;
    padding: 70px 24px 34px;
    box-sizing: border-box;
    border-radius: 10px;
    border-bottom: 6px solid #dfae3c;
    background: #fffaf0;
    transition:
        transform .35s ease,
        box-shadow .35s ease,
        background .35s ease;
}

.home-service-card h3{
    margin: 0 0 20px;
    color: #111;
    font-size: 19px;
    line-height: 28px;
    font-weight: 500;
}

.home-service-card p{
    margin: 0;
    color: #666;
    font-size: 14px;
    line-height: 24px; min-height:72px;
}

/* Hover Effects */

.home-service-item:hover .home-service-icon{
    transform: translateX(-50%) translateY(-7px);
    box-shadow: 0 14px 28px rgba(4, 27, 69, .16);
}

.home-service-item:hover .home-service-card{
    background: #fff;
    transform: translateY(-5px);
    box-shadow: 0 16px 34px rgba(4, 27, 69, .12);
}

.home-service-item:hover .home-service-card h3{
    color: #041b45;
}


/* =========================================================
   Home Contact
   Main Color: #041b45
   Secondary Color: #dfae3c
========================================================= */

.home-contact{
    width: 100%;
    height: 226px;
    position: relative;
    overflow: hidden;
    background:
        #050b0d
        url(../images/homecontact.jpg)
        no-repeat
        center center;
    background-size: cover;
}

.home-contact-container{
    height: 226px;
    display: flex;
    align-items: center;
}

.home-contact-content{
    width: 760px;
    color: #fff;
}

.home-contact-content h2{
    margin: 0 0 18px;
    color: #fff;
    font-size: 26px;
    line-height: 38px;
    font-weight: 600;
}

.home-contact-content p{
    margin: 0 0 30px;
    color: rgba(255, 255, 255, .92);
    font-size: 15px;
    line-height: 24px;
}

.home-contact-phone{
    width: max-content;
    padding-bottom: 9px;
    display: inline-flex;
    align-items: center;
    position: relative;
    color: #fff;
    font-size: 15px;
    line-height: 24px;
    text-decoration: none;
}

.home-contact-phone::after{
    content: "";
    width: 100%;
    height: 2px;
    position: absolute;
    left: 0;
    bottom: 0;
    background: #dfae3c;
    transform-origin: left center;
    transition: transform .3s ease;
}

.home-contact-phone strong{
    margin-right: 6px;
    color: #fff;
    font-size: 15px;
    font-weight: 600;
}

.home-contact-phone span{
    color: #fff; margin-right:15px;
}

.home-contact-phone:hover{
    color: #dfae3c;
}

.home-contact-phone:hover strong,
.home-contact-phone:hover span{
    color: #dfae3c;
}

.home-contact-phone:hover::after{
    transform: scaleX(.72);
}


/* =========================================================
   Home Industries
   Main Color: #041b45
   Secondary Color: #dfae3c
========================================================= */

.home-industries{
    width: 100%;
    padding: 68px 0 56px;
    overflow: hidden;
    background: #fff;
}

/* Heading */

.home-industries-heading{
    margin-bottom: 40px;
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    align-items: start;
    gap: 48px;
}

.home-industries-title{
    min-width: 0;
}

.home-industries-title > span{
    display: inline-block;
    margin-bottom: 10px;
    color: #dfae3c;
    font-size: 14px;
    line-height: 22px;
    font-weight: 600;
    letter-spacing: .8px;
    text-transform: uppercase;
}

.home-industries-title h2{
    margin: 0;
    color: #111;
    font-size: 38px;
    line-height: 48px;
    font-weight: 600;
}

.home-industries-category-list{
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px 14px;
}

.home-industries-category-item{
    min-width: 0;
    min-height: 58px;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    box-sizing: border-box;
    border: 1px solid #e4e8ef;
    border-radius: 8px;
    background: #f8fafc;
    color: #182235;
    text-decoration: none;
    transition:
        transform .3s ease,
        border-color .3s ease,
        background .3s ease,
        box-shadow .3s ease,
        color .3s ease;
}

.home-industries-category-icon{
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #041b45;
    color: #fff;
    font-size: 15px;
    transition:
        background .3s ease,
        color .3s ease,
        transform .3s ease;
}

.home-industries-category-name{
    min-width: 0;
    color: inherit;
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
}

.home-industries-category-item:hover{
    border-color: #dfae3c;
    background: #fff;
    color: #041b45;
    box-shadow: 0 10px 24px rgba(4, 27, 69, .10);
    transform: translateY(-3px);
}

.home-industries-category-item:hover .home-industries-category-icon{
    background: #dfae3c;
    color: #041b45;
    transform: translateX(2px);
}

/* Slider */

.home-industries-slider{
    width: 100%;
    position: relative;
    overflow: hidden;
}

.home-industries-arrow{
    width: 54px;
    height: 54px;
    padding: 0;
    position: absolute;
    top: 50%;
    z-index: 12;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, .46);
    border-radius: 50%;
    background: rgba(4, 27, 69, .88);
    color: #fff;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-50%) scale(.82);
    box-shadow: 0 10px 26px rgba(4, 27, 69, .24);
    transition:
        opacity .3s ease,
        visibility .3s ease,
        transform .3s ease,
        background .3s ease,
        color .3s ease,
        border-color .3s ease;
}

.home-industries-prev{
    left: 134px;
}

.home-industries-next{
    right: 134px;
}

.home-industries-slider:hover .home-industries-arrow{
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(-50%) scale(1);
}

.home-industries-arrow:hover{
    border-color: #dfae3c;
    background: #dfae3c;
    color: #041b45;
}

.home-industries-arrow:active{
    transform: translateY(-50%) scale(.94);
}

.home-industries-arrow.is-hidden{
    display: none;
}

.home-industries-viewport{
    width: 100%;
    overflow: hidden;
    cursor: grab;
    touch-action: pan-y;
    user-select: none;
    -webkit-user-select: none;
}

.home-industries-viewport.is-dragging{
    cursor: grabbing;
}

.home-industries-track{
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    will-change: transform;
}

/* Industry Item */

.home-industry-item{
    flex: 0 0 calc((100% - 16px) / 3);
    min-width: 0;
    aspect-ratio: 1 / 1;
    position: relative;
    display: block;
    overflow: hidden;
    background: #041b45;
    cursor: pointer;
    text-decoration: none;
}

.home-industry-item img{
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
    -webkit-user-drag: none;
    transition: transform .7s ease;
}

/* Keep the whole card clickable */
.home-industry-mask,
.home-industry-item h3,
.home-industry-item p{
    pointer-events: none;
}

/* Overlay */

.home-industry-mask{
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(
            180deg,
            rgba(4, 27, 69, .56) 0%,
            rgba(4, 27, 69, .05) 35%,
            rgba(4, 27, 69, .08) 58%,
            rgba(4, 27, 69, .82) 100%
        );
    transition: background .4s ease;
}

/* Title */

.home-industry-item h3{
    margin: 0;
    position: absolute;
    left: 28px;
    right: 28px;
    top: 28px;
    z-index: 3;
    color: #fff;
    font-size: 18px;
    line-height: 26px;
    font-weight: 500;
    transition:
        color .35s ease,
        transform .35s ease;
}

/* Description */

.home-industry-item p{
    margin: 0;
    position: absolute;
    left: 28px;
    right: 28px;
    bottom: 28px;
    z-index: 3;
    color: rgba(255, 255, 255, .95);
    font-size: 15px;
    line-height: 22px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(24px);
    transition:
        opacity .4s ease,
        visibility .4s ease,
        transform .4s ease;
}

/* Hover Effects */

.home-industry-item:hover img{
    transform: scale(1.06);
}

.home-industry-item:hover .home-industry-mask{
    background:
        linear-gradient(
            180deg,
            rgba(4, 27, 69, .65) 0%,
            rgba(4, 27, 69, .12) 38%,
            rgba(4, 27, 69, .28) 58%,
            rgba(4, 27, 69, .94) 100%
        );
}

.home-industry-item:hover h3{
    color: #dfae3c;
    transform: translateY(3px);
}

.home-industry-item:hover p{
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}


/* =========================================================
   Home Advantages
   Main Color: #041b45
   Secondary Color: #dfae3c
========================================================= */

.home-advantages{
    width: 100%;
    padding: 40px 0 38px;
    background: #041b45;
    border-top: 1px solid rgba(223, 174, 60, .55);
}

.home-advantages-list{
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 54px;
}

.home-advantage-item{
    min-width: 0;
    display: flex;
    align-items: flex-start;
    position: relative;
}

.home-advantage-icon{
    width: 42px;
    height: 42px;
    margin-right: 14px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.home-advantage-icon img{
    display: block;
    max-width: 42px;
    max-height: 42px;
    width: auto;
    height: auto;
    object-fit: contain;
    transition:
        transform .35s ease,
        filter .35s ease;
}

.home-advantage-info{
    min-width: 0;
    padding-top: 2px;
}

.home-advantage-info h3{
    margin: 0 0 13px;
    color: #fff;
    font-size: 18px;
    line-height: 25px;
    font-weight: 500;
    white-space: nowrap;
    transition: color .3s ease;
}

.home-advantage-info p{
    margin: 0;
    color: rgba(255, 255, 255, .92);
    font-size: 15px;
    line-height: 25px;
}

.home-advantage-item:hover .home-advantage-icon img{
    transform: translateY(-5px) scale(1.06);
}

.home-advantage-item:hover .home-advantage-info h3{
    color: #dfae3c;
}


/* =========================================================
   Home News
   Main Color: #041b45
   Secondary Color: #dfae3c
========================================================= */

.home-news{
    width: 100%;
    padding: 72px 0 76px;
    background: #fff;
}

/* Heading */

.home-news-heading{
    margin-bottom: 38px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

.home-news-heading-text{
    min-width: 0;
}

.home-news-heading h2{
    margin: 0 0 10px;
    color: #111;
    font-size: 38px;
    line-height: 48px;
    font-weight: 600;
}

.home-news-heading p{
    margin: 0;
    color: #444;
    font-size: 16px;
    line-height: 26px;
}

/* View More */

.home-news-more{
    width: 168px;
    height: 51px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 13px;
    position: relative;
    overflow: hidden;
    border-radius: 3px;
    background: #041b45;
    color: #fff;
    font-size: 15px;
    text-decoration: none;
}

.home-news-more::before{
    content: "";
    width: 0;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background: #dfae3c;
    transition: width .35s ease;
}

.home-news-more i,
.home-news-more span{
    position: relative;
    z-index: 2;
}

.home-news-more i{
    transition: transform .3s ease;
}

.home-news-more:hover{
    color: #041b45;
}

.home-news-more:hover::before{
    width: 100%;
}

.home-news-more:hover i{
    transform: translateX(5px);
}

/* Tabs */

.home-news-tabs{
    margin-bottom: 30px;
    display: flex;
    align-items: center;
    gap: 20px;
}

.home-news-tab{
    width: 192px;
    height: 40px;
    padding: 0 20px;
    border: 1px solid #d5d5d5;
    border-radius: 24px;
    background: #fff;
    color: #111;
    font-family: myFirstFont;
    font-size: 14px;
    line-height: 38px;
    text-align: center;
    cursor: pointer;
    transition:
        color .3s ease,
        border-color .3s ease,
        background .3s ease,
        transform .3s ease,
        box-shadow .3s ease;
}

.home-news-tab:hover{
    border-color: #dfae3c;
    color: #dfae3c;
    transform: translateY(-2px);
}

.home-news-tab.active{
    border-color: #dfae3c;
    background: #dfae3c;
    color: #fff;
    box-shadow: 0 8px 18px rgba(223, 174, 60, .22);
}

/* Tab Panels */

.home-news-panel{
    display: none;
    opacity: 0;
}

.home-news-panel.active{
    display: block;
    opacity: 1;
    animation: homeNewsFade .45s ease both;
}

@keyframes homeNewsFade{
    0%{
        opacity: 0;
        transform: translateY(12px);
    }

    100%{
        opacity: 1;
        transform: translateY(0);
    }
}

/* News Layout */

.home-news-layout{
    display: grid;
    grid-template-columns: 660px minmax(0, 1fr);
    gap: 40px;
    align-items: stretch;
}

/* Featured News */

.home-news-featured{
    min-width: 0;
    overflow: hidden;
    background: #f5f6f8;
}

.home-news-featured-image{
    display: block;
    width: 660px;
    height: 274px;
    overflow: hidden;
    background: #edf2f8;
}

.home-news-featured-image img{
    display: block;
    width: 660px;
    height: 274px;
    object-fit: cover;
    transition: transform .6s ease;
}

.home-news-featured-image:hover img{
    transform: scale(1.04);
}

.home-news-featured-info{
    min-height: 150px;
    padding: 16px 16px 20px;
    box-sizing: border-box;
}

.home-news-featured-info time{
    display: block;
    margin-bottom: 10px;
    color: #777;
    font-size: 14px;
    line-height: 22px;
}

.home-news-featured-info h3{
    margin: 0 0 10px;
    font-size: 16px;
    line-height: 24px;
    font-weight: 500;
}

.home-news-featured-info h3 a{
    display: block;
    color: #111;
    text-decoration: none;
}

.home-news-featured-info h3 a:hover{
    color: #dfae3c;
}

.home-news-featured-info p{
    display: -webkit-box;
    margin: 0;
    overflow: hidden;
    color: #777;
    font-size: 14px;
    line-height: 22px;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

/* News List */

.home-news-list{
    min-width: 0;
    border-top: 1px solid #c8c8c8;
}

.home-news-list-item{
    min-height: 139px;
    padding: 23px 0 20px 18px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 85px;
    gap: 24px;
    box-sizing: border-box;
    border-bottom: 1px solid #c8c8c8;
    transition:
        background .3s ease,
        padding-left .3s ease;
}

.home-news-list-item:hover{
    padding-left: 25px; padding-right:25px;
    background: #fffaf0;
}

.home-news-list-content{
    min-width: 0;
}

.home-news-list-content h3{
    margin: 0 0 21px;
    position: relative;
    color: #111;
    font-size: 18px;
    line-height: 25px;
    font-weight: 500;
}

.home-news-list-content h3::before{
    content: "";
    width: 6px;
    height: 6px;
    position: absolute;
    left: -18px;
    top: 10px;
    border-radius: 50%;
    background: #dfae3c;
}

.home-news-list-content h3 a{
    display: block;
    color: #111;
    text-decoration: none;
}

.home-news-list-item:hover .home-news-list-content h3 a{
    color: #dfae3c;
}

.home-news-list-content p{
    margin: 0;
    color: #666;
    font-size: 14px;
    line-height: 20px;
}

.home-news-list-side{
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;

}

.home-news-list-side time{

    margin-bottom: 17px;
    color: #aaa;
    font-size: 22px;
    line-height: 28px;
}

.home-news-arrow{
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    color: #aaa;
    font-size: 20px;
    text-decoration: none;
}

.home-news-arrow::before{
    content: "";
    width: 1px;
    height: 17px;
    margin-right: 16px;
    background: #bbb;
}

.home-news-list-item:hover .home-news-arrow{
    color: #dfae3c;
}

.home-news-list-item:hover .home-news-arrow::before{
    background: #dfae3c;
}


/* ==============================
   Force banner dots visible
============================== */

.home-banner {
    position: relative !important;
}

.home-banner-dots {
    position: absolute !important;
    left: 50% !important;
    right: auto !important;
    bottom: 30px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;

    width: auto !important;
    height: 12px !important;

    opacity: 1 !important;
    visibility: visible !important;

    transform: translateX(-50%) !important;

    z-index: 9999 !important;
    pointer-events: auto !important;
}

.home-banner-dots button {
    display: block !important;

    width: 42px !important;
    min-width: 42px !important;
    height: 8px !important;
    min-height: 8px !important;

    padding: 0 !important;
    margin: 0 !important;

    border: 0 !important;
    border-radius: 10px !important;

    background: #ffffff !important;

    opacity: 1 !important;
    visibility: visible !important;

    position: relative !important;

    cursor: pointer !important;

    appearance: none !important;
    -webkit-appearance: none !important;

    box-shadow: 0 2px 8px rgba(0, 0, 0, .3) !important;
}

.home-banner-dots button.active {
    width: 72px !important;
    min-width: 72px !important;

    background: #dfae3c !important;
}