/* =========================================================
   P.T. LEE CHENGALVARAYA NAICKER TRUST
   TRUST HEADER
========================================================= */


/* =========================================================
   HEADER
========================================================= */

.trust-header {

    width: 100%;

    background: #ffffff;

    padding: 12px 20px;

    box-sizing: border-box;

    border-bottom: 1px solid #e5e9ef;

    box-shadow:
        0 4px 15px rgba(0, 0, 0, 0.07);

    position: relative;

    z-index: 100;
}


/* =========================================================
   TOP ANIMATED LINE
========================================================= */

.trust-header::before {

    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 4px;

    background: linear-gradient(
        90deg,
        #ff8c00,
        #ffd700,
        #e91e63,
        #1565c0,
        #00a6a6,
        #ff8c00
    );

    background-size: 400% 100%;

    animation:
        trustHeaderTopLine
        8s
        linear
        infinite;
}


/* =========================================================
   TOP LINE ANIMATION
========================================================= */

@keyframes trustHeaderTopLine {

    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }

}


/* =========================================================
   CONTAINER
========================================================= */

.trust-header-container {

    width: 100%;

    max-width: 1500px;

    min-height: 210px;

    margin: 0 auto;

    display: flex;

    align-items: center;

    justify-content: center;

    position: relative;

    box-sizing: border-box;
}


/* =========================================================
   LOGOS
========================================================= */

.trust-logo {

    width: 210px;

    flex-shrink: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    position: relative;
}


/* =========================================================
   LOGO IMAGE
========================================================= */

.trust-logo img {

    width: 165px;

    height: 165px;

    object-fit: contain;

    display: block;

    filter:
        drop-shadow(
            0 5px 10px
            rgba(0, 0, 0, 0.14)
        );

    transition:
        transform 0.5s ease,
        filter 0.5s ease;
}


/* =========================================================
   LOGO HOVER
========================================================= */

.trust-logo img:hover {

    transform:
        scale(1.06)
        rotate(2deg);

    filter:
        drop-shadow(
            0 8px 18px
            rgba(0, 90, 180, 0.25)
        );
}


/* =========================================================
   LEFT / RIGHT LOGO
========================================================= */

.trust-logo-left {

    margin-right: 20px;
}

.trust-logo-right {

    margin-left: 20px;
}


/* =========================================================
   CENTER CONTENT
========================================================= */

.trust-header-content {

    flex: 1;

    min-width: 0;

    padding: 0 15px;

    text-align: center;

    position: relative;
}


/* =========================================================
   TRUST NAME
   ORIGINAL MULTI-COLOUR EFFECT
========================================================= */

.trust-header-content h1 {

    margin: 0 0 12px 0;

    padding: 0;

    font-family:
        Poppins,
        Arial,
        Helvetica,
        sans-serif;

    font-size:
        clamp(28px, 3vw, 48px);

    line-height: 1.15;

    font-weight: 800;

    letter-spacing: 1.5px;

    text-transform: uppercase;


    /* ==============================================
       IMPORTANT:
       MOVING MULTI-COLOUR GRADIENT
    ============================================== */

    background:
        linear-gradient(
            90deg,

            #9b8618 0%,

            #ffd700 12%,

            #ff9800 25%,

            #e91e63 40%,

            #9c27b0 55%,

            #1565c0 70%,

            #00a6a6 84%,

            #ffd700 100%
        );

    background-size: 500% 100%;


    /* ==============================================
       TEXT CLIPPING
    ============================================== */

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

    background-clip: text;


    /* ==============================================
       ANIMATION
    ============================================== */

    animation:
        trustColorFlow
        8s
        linear
        infinite;


    /* ==============================================
       GLOW
    ============================================== */

    filter:
        drop-shadow(
            0 3px 4px
            rgba(0, 0, 0, 0.14)
        );

}


/* =========================================================
   COLOUR FLOW
========================================================= */

@keyframes trustColorFlow {

    0% {

        background-position:
            0% 50%;

    }

    25% {

        background-position:
            50% 50%;

    }

    50% {

        background-position:
            100% 50%;

    }

    75% {

        background-position:
            50% 50%;

    }

    100% {

        background-position:
            0% 50%;

    }

}


/* =========================================================
   ADDRESS
========================================================= */

.trust-address {

    font-family:
        Poppins,
        Arial,
        Helvetica,
        sans-serif;

    font-size:
        clamp(17px, 1.5vw, 23px);

    line-height: 1.65;

    color: #06458f;

    font-weight: 500;

    letter-spacing: 0.3px;

    margin: 0;

    transition:
        color 0.3s ease;
}


/* =========================================================
   ADDRESS HOVER
========================================================= */

.trust-address:hover {

    color: #e47700;
}


/* =========================================================
   DECORATIVE LINE
========================================================= */

.trust-header-content::after {

    content: "";

    display: block;

    width: 100px;

    height: 3px;

    margin:
        14px auto 0;

    border-radius: 20px;

    background:
        linear-gradient(
            90deg,
            #ff9800,
            #e91e63,
            #1565c0
        );

    background-size: 200% 100%;

    animation:
        trustSmallLine
        4s
        ease-in-out
        infinite;
}


/* =========================================================
   DECORATIVE LINE ANIMATION
========================================================= */

@keyframes trustSmallLine {

    0% {

        background-position: 0% 50%;

        width: 70px;

    }

    50% {

        background-position: 100% 50%;

        width: 130px;

    }

    100% {

        background-position: 0% 50%;

        width: 70px;

    }

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1100px) {

    .trust-header {

        padding:
            12px 15px;

    }

    .trust-header-container {

        min-height: 180px;

    }

    .trust-logo {

        width: 160px;

    }

    .trust-logo img {

        width: 130px;

        height: 130px;

    }

    .trust-logo-left {

        margin-right: 5px;

    }

    .trust-logo-right {

        margin-left: 5px;

    }

    .trust-header-content {

        padding:
            0 8px;

    }

    .trust-header-content h1 {

        font-size: 30px;

        letter-spacing: 1px;

    }

    .trust-address {

        font-size: 17px;

        line-height: 1.55;

    }

}


/* =========================================================
   SMALL LAPTOP
========================================================= */

@media (max-width: 900px) {

    .trust-header-container {

        min-height: 160px;

    }

    .trust-logo {

        width: 135px;

    }

    .trust-logo img {

        width: 110px;

        height: 110px;

    }

    .trust-header-content h1 {

        font-size: 26px;

        line-height: 1.2;

    }

    .trust-address {

        font-size: 16px;

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 768px) {

    .trust-header {

        padding:
            15px 10px 18px;

    }

    .trust-header-container {

        min-height: auto;

        display: grid;

        grid-template-columns:
            1fr 1fr;

        gap: 10px;

        align-items: center;

    }

    .trust-header-content {

        grid-column: 1 / -1;

        grid-row: 1;

        padding: 0;

        width: 100%;

    }

    .trust-logo-left {

        grid-column: 1;

        grid-row: 2;

        width: 100%;

        margin: 0;

    }

    .trust-logo-right {

        grid-column: 2;

        grid-row: 2;

        width: 100%;

        margin: 0;

    }

    .trust-logo img {

        width: 100px;

        height: 100px;

    }

    .trust-header-content h1 {

        font-size: 25px;

        line-height: 1.25;

        letter-spacing: 0.8px;

        margin-bottom: 8px;

    }

    .trust-address {

        font-size: 15px;

        line-height: 1.55;

    }

    .trust-header-content::after {

        margin-top: 10px;

    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

    .trust-header {

        padding:
            12px 8px 15px;

    }

    .trust-header-content h1 {

        font-size: 20px;

        line-height: 1.3;

        letter-spacing: 0.5px;

    }

    .trust-address {

        font-size: 14px;

        line-height: 1.5;

    }

    .trust-logo img {

        width: 85px;

        height: 85px;

    }

    .trust-header-content::after {

        width: 65px;

        height: 2px;

    }

}


/* =========================================================
   VERY SMALL MOBILE
========================================================= */

@media (max-width: 360px) {

    .trust-header-content h1 {

        font-size: 18px;

        letter-spacing: 0.3px;

    }

    .trust-address {

        font-size: 13px;

    }

    .trust-logo img {

        width: 75px;

        height: 75px;

    }

}