/*=========================================
        ZSI SITEMAP PAGE
==========================================*/



/*==========================
Hero
==========================*/

.zsi-sitemap-hero {

     position: relative;

     overflow: hidden;

     /* min-height: 420px; */

     display: flex;

     align-items: center;

     padding: 110px 0 90px;



}

/* Floating circles */

/* .zsi-sitemap-hero::before {

     content: "";

     position: absolute;

     width: 350px;

     height: 350px;

     background: rgba(255, 255, 255, .06);

     border-radius: 50%;

     top: -100px;

     left: -120px;

     animation: zsiFloatOne 8s infinite ease-in-out;

} */

/* .zsi-sitemap-hero::after {

     content: "";

     position: absolute;

     width: 250px;

     height: 250px;

     border-radius: 50%;

     background: rgba(255, 255, 255, .04);

     bottom: -80px;

     right: -80px;

     animation: zsiFloatTwo 10s infinite ease-in-out;

} */

/*========================*/

.zsi-page-tag {

     display: inline-flex;

     align-items: center;

     gap: 10px;

     background: rgba(255, 255, 255, .12);

     backdrop-filter: blur(15px);

     color: #fff;

     padding: 12px 26px;

     border-radius: 50px;

     border: 1px solid rgba(255, 255, 255, .15);

     font-weight: 600;

     margin-bottom: 28px;

}

.zsi-page-tag i {

     color: #C8E6C9;

}

/*========================*/

.zsi-page-title {

     color: #fff;

     font-size: 58px;

     font-weight: 800;

     margin-bottom: 20px;

     line-height: 1.15;

     text-shadow: 0 10px 25px rgba(0, 0, 0, .35);

}

/*========================*/

.zsi-page-desc {

     color: rgba(255, 255, 255, .90);

     max-width: 720px;

     font-size: 18px;

     line-height: 1.9;

}

/*========================*/

.zsi-breadcrumb {

     display: flex;

     align-items: center;

     justify-content: center;

     gap: 10px;

     list-style: none;

     margin: 0;

     padding: 18px 28px;

     border-radius: 60px;

     background: rgba(255, 255, 255, .12);

     backdrop-filter: blur(18px);

     border: 1px solid rgba(255, 255, 255, .15);

}

.zsi-breadcrumb-item {

     color: #fff;

     font-weight: 600;

}

.zsi-breadcrumb-item a {

     color: #fff;

     text-decoration: none;

     transition: .3s;

}

.zsi-breadcrumb-item a:hover {

     color: #A5D6A7;

}

.zsi-breadcrumb-item.active {

     color: #C8E6C9;

}

/*==========================
Main Section
==========================*/


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

.zsi-sitemap-card {

     background: #fff;

     border-radius: 30px;

     padding: 45px;

     border: none;

     overflow: hidden;

     position: relative;

     box-shadow:

          0 25px 60px rgba(0, 0, 0, .08);

}

.zsi-sitemap-card::before {

     content: "";

     position: absolute;

     top: 0;

     left: 0;

     width: 100%;

     height: 6px;

     background: linear-gradient(90deg, #2A4173 0%, #3F5D9A 50%, #5E7FC2 100%);

}

/*==========================
Section Blocks
==========================*/

.zsi-sitemap-card section3 {

     display: block;

     background: #fff;

     border-radius: 18px;

     margin-bottom: 35px;

     padding: 28px;

     border-left: 6px solid var(--zsi-secondary);

     transition: .4s;

     box-shadow: 0 8px 20px rgba(0, 0, 0, .05);

}

.zsi-sitemap-card section3:hover {

     transform: translateY(-8px);

     box-shadow: 0 20px 45px rgba(0, 0, 0, .12);

}

/*==========================
Heading
==========================*/

.zsi-sitemap-card h2 {

     display: flex;

     align-items: center;

     gap: 12px;

     font-size: 24px;

     font-weight: 700;

     color: var(--zsi-primary);

     margin-bottom: 22px;

}

.zsi-sitemap-card h2 i {

     width: 48px;

     height: 48px;

     border-radius: 50%;

     display: flex;

     align-items: center;

     justify-content: center;

     color: #fff;

        background: linear-gradient(90deg, #2A4173 0%, #3F5D9A 50%, #5E7FC2 100%);

}

/*==========================
Lists
==========================*/

.zsi-sitemap-card ul {

     list-style: none;

     margin: 0;

     padding-left: 25px;

}

.zsi-sitemap-card li {

     position: relative;

     margin-bottom: 14px;

     padding-left: 22px;

}

.zsi-sitemap-card li::before {

     content: "🌿";

     position: absolute;

     left: 0;

     top: 2px;

     font-size: 14px;

}

.zsi-sitemap-card ul ul {

     margin-top: 12px;

     margin-left: 20px;

     border-left: 2px dashed #AED581;

     padding-left: 20px;

}

/*==========================
Links
==========================*/

.zsi-sitemap-card a {

     color: var(--zsi-text);

     text-decoration: none;

     font-weight: 600;

     transition: .35s;

}

.zsi-sitemap-card a:hover {

     color: var(--zsi-secondary);

     padding-left: 8px;

}

/*==========================
Animations
==========================*/

@keyframes zsiFloatOne {

     0%,
     100% {

          transform: translateY(0);

     }

     50% {

          transform: translateY(20px);

     }

}

@keyframes zsiFloatTwo {

     0%,
     100% {

          transform: translateY(0);

     }

     50% {

          transform: translateY(-20px);

     }

}

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

@media(max-width:991px) {

     .zsi-page-title {

          font-size: 42px;

     }

     .zsi-breadcrumb-box {

          margin-top: 30px;

          justify-content: flex-start !important;

     }

}

@media(max-width:768px) {

     .zsi-sitemap-hero {

          padding: 80px 0;

          min-height: 330px;

     }

     .zsi-page-title {

          font-size: 34px;

     }

     .zsi-page-desc {

          font-size: 16px;

     }

     .zsi-sitemap-card {

          padding: 25px;

     }

     .zsi-sitemap-card h2 {

          font-size: 20px;

     }

}

/* =========================================================
   FULL WIDTH ZSI SITEMAP HERO
   ========================================================= */

.zsi-sitemap-hero {
    position: relative;
    width: 100%;
    min-height: 500px;
    height: 500px;
    overflow: hidden;
    display: flex;
    /* align-items: flex-end; */
}


/* Full banner image */
.zsi-sitemap-hero-image {
   position: absolute;
    /* inset: 1; */
    width: 100%;
    /* height: 519px; */
    object-fit: contain;
    object-position: center;
    display: block;
}


/* Overlay */
.zsi-sitemap-hero-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 1;
}


/* Content above image */
.zsi-sitemap-hero-content {
    position: relative;
    z-index: 2;
    padding-bottom: 60px;
}


/* Page tag */
.zsi-sitemap-hero .zsi-page-tag {
    display: inline-block;
    color: #ffffff;
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 15px;
}


/* Sitemap icon */
.zsi-sitemap-hero .zsi-page-tag i {
    margin-right: 8px;
    color: #ffffff;
}


/* Title */
.zsi-sitemap-hero .zsi-page-title {
    color: #ffffff;
    font-size: 55px;
    font-weight: 700;
    margin: 0;
}


/* =========================================================
   BREADCRUMB
   ========================================================= */

.zsi-sitemap-hero .zsi-breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;

    list-style: none;
    margin: 0;
    padding: 15px 25px;

    border-radius: 50px;

    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(8px);
}


.zsi-sitemap-hero .zsi-breadcrumb-item {
    color: #ffffff;
    font-weight: 600;
}


.zsi-sitemap-hero .zsi-breadcrumb-item a {
    color: #ffffff;
    text-decoration: none;
}


.zsi-sitemap-hero .zsi-breadcrumb-item a:hover {
    color: #FFD54F;
}


.zsi-sitemap-hero .zsi-breadcrumb-item.active {
    color: #FFD54F;
}


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

@media (max-width: 768px) {

    .zsi-sitemap-hero {
        min-height: 420px;
        height: 420px;
    }

    .zsi-sitemap-hero-content {
        padding-bottom: 35px;
    }

    .zsi-sitemap-hero .zsi-page-title {
        font-size: 38px;
    }

    .zsi-sitemap-hero .zsi-page-tag {
        font-size: 15px;
    }

    .zsi-sitemap-hero .zsi-breadcrumb-box {
        justify-content: flex-start !important;
        margin-top: 25px;
    }

    .zsi-sitemap-hero .zsi-breadcrumb {
        padding: 12px 18px;
        font-size: 14px;
    }
}