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

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{

    font-family:'Segoe UI',Tahoma,Geneva,Verdana,sans-serif;

    background:#f6f8fc;

    color:#333;

    line-height:1.7;

}


/*====================================================
SITEMAP CONTENT
====================================================*/

.sitemap-content{

    position:relative;

    padding:80px 0;

    background:#f6f8fc;

    overflow:hidden;

}


/*====================================================
BACKGROUND GRID
====================================================*/

.sitemap-content::before{

    content:"";

    position:absolute;

    inset:0;

    background-image:

        linear-gradient(
            rgba(18,58,120,.04) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(18,58,120,.04) 1px,
            transparent 1px
        );

    background-size:80px 80px;

    opacity:.5;

    z-index:0;

}

.sitemap-content > .container{

    position:relative;

    z-index:1;

}


/*====================================================
PAGE TITLE
====================================================*/

.page-title{

    text-align:center;

    color:#4A1F74;

    font-size:3.5rem;

    font-weight:800;

    margin-top:-30px;

    margin-bottom:10px;

    text-transform:uppercase;

}


/*====================================================
TITLE LINE
====================================================*/

.line{

    width:200px;

    height:5px;

    background:linear-gradient(
        90deg,
        #4A1F74,
        #F59E0B
    );

    border-radius:50px;

    margin:0 auto 55px;

}


/*====================================================
SITEMAP SECTION
====================================================*/

.sitemap-section{

    position:relative;

    margin-bottom:45px;

    padding-left:35px;

}


/*====================================================
SECTION HEADING
====================================================*/

.sitemap-section h3{

    position:relative;

    display:block;

    color:#4A1F74;

    font-size:24px;

    font-weight:800;

    margin:0 0 20px;

    padding:0;

}


/* Main category connector */

.sitemap-section h3::before{

    content:"";

    position:absolute;

    left:-35px;

    top:50%;

    width:22px;

    height:3px;

    background:#F59E0B;

    transform:translateY(-50%);

    border-radius:10px;

}


/* Main category node */

.sitemap-section h3::after{

    content:"";

    position:absolute;

    left:-42px;

    top:50%;

    width:12px;

    height:12px;

    background:#F59E0B;

    border-radius:50%;

    transform:translateY(-50%);

    box-shadow:0 0 0 4px rgba(245,158,11,.12);

}


/*====================================================
CHILDREN GRID
====================================================*/

.sitemap-grid{

    position:relative;

    display:grid;

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

    column-gap:45px;

    row-gap:0;

    padding-left:28px;

}


/* Vertical tree line */

.sitemap-grid::before{

    content:"";

    position:absolute;

    left:0;

    top:-5px;

    bottom:30px;

    width:2px;

    background:#dbe4ef;

}


/*====================================================
SITEMAP ITEM
====================================================*/

.sitemap-item{

    position:relative;

    display:flex;

    align-items:center;

    min-height:58px;

    padding:12px 15px 12px 20px;

    text-decoration:none;

    color:#4A1F74;

    border-bottom:1px solid #e5edf5;

    transition:.3s ease;

}


/* Horizontal connector */

.sitemap-item::before{

    content:"";

    position:absolute;

    left:-28px;

    top:50%;

    width:28px;

    height:2px;

    background:#dbe4ef;

    transform:translateY(-50%);

}


/* Child node */

.sitemap-item::after{

    content:"";

    position:absolute;

    left:-34px;

    top:50%;

    width:10px;

    height:10px;

    border-radius:50%;

    background:#2FA88A;

    transform:translateY(-50%);

    transition:.3s ease;

}


/*====================================================
ICON
====================================================*/

.sitemap-item > i{

    width:30px;

    min-width:30px;

    margin-right:13px;

    text-align:center;

    color:#F59E0B;

    font-size:17px;

    transition:.3s ease;

}


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

.sitemap-item span{

    flex:1;

    font-size:16px;

    font-weight:600;

    line-height:1.5;

}


/*====================================================
ARROW
====================================================*/

.sitemap-item span::after{

    content:"\2192";

    display:inline-block;

    margin-left:10px;

    color:#2FA88A;

    font-size:18px;

    transition:.3s ease;

}


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

.sitemap-item:hover{

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

    color:#4A1F74;

    padding-left:25px;

}


.sitemap-item:hover > i{

    color:#2FA88A;

    transform:scale(1.1);

}


.sitemap-item:hover::after{

    background:#F59E0B;

    transform:translate(2px,-50%) scale(1.15);

}


.sitemap-item:hover span::after{

    color:#F59E0B;

    transform:translateX(5px);

}


/*====================================================
EXTERNAL LINK
====================================================*/

.sitemap-item i.fa-up-right-from-square{

    color:#2FA88A;

}


/*====================================================
LAST ITEM
====================================================*/

.sitemap-grid .sitemap-item:last-child{

    border-bottom:none;

}


/*====================================================
RESPONSIVE
====================================================*/

@media(max-width:992px){

    .sitemap-content{

        padding:70px 0;

    }

    .page-title{

        font-size:3rem;

    }

    .sitemap-grid{

        column-gap:30px;

    }

}


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

@media(max-width:768px){

    .sitemap-content{

        padding:60px 0;

    }

    .page-title{

        font-size:2.5rem;

        margin-top:-20px;

    }

    .line{

        width:160px;

        margin-bottom:45px;

    }

    .sitemap-section{

        padding-left:30px;

        margin-bottom:38px;

    }

    .sitemap-section h3{

        font-size:21px;

    }

    .sitemap-grid{

        grid-template-columns:1fr;

        padding-left:25px;

    }

    .sitemap-grid::before{

        left:0;

    }

    .sitemap-item{

        min-height:56px;

        padding:11px 10px 11px 15px;

    }

}


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

@media(max-width:576px){

    .sitemap-content{

        padding:50px 0;

    }

    .page-title{

        font-size:2rem;

        margin-top:-10px;

    }

    .line{

        width:140px;

        height:4px;

        margin-bottom:35px;

    }

    .sitemap-section{

        padding-left:25px;

        margin-bottom:32px;

    }

    .sitemap-section h3{

        font-size:19px;

        margin-bottom:15px;

    }

    .sitemap-section h3::before{

        left:-25px;

        width:15px;

    }

    .sitemap-section h3::after{

        left:-31px;

        width:11px;

        height:11px;

    }

    .sitemap-grid{

        padding-left:20px;

    }

    .sitemap-item{

        min-height:52px;

        padding:10px 5px 10px 10px;

    }

    .sitemap-item::before{

        left:-20px;

        width:20px;

    }

    .sitemap-item::after{

        left:-26px;

        width:9px;

        height:9px;

    }

    .sitemap-item > i{

        width:26px;

        min-width:26px;

        margin-right:8px;

        font-size:15px;

    }

    .sitemap-item span{

        font-size:14px;

    }

    .sitemap-item span::after{

        font-size:16px;

        margin-left:7px;

    }

}


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

@media(max-width:380px){

    .sitemap-section h3{

        font-size:18px;

    }

    .sitemap-item span{

        font-size:13px;

    }

}