/*==========================================================
KWARA STATE MINISTRY OF LIVESTOCK DEVELOPMENT
WELCOME SECTION
File: assets/css/welcome.css
==========================================================*/



/*==========================================================
WELCOME SECTION
==========================================================*/

.welcome-section{

    padding:120px 0;

    background:var(--white);

    position:relative;

    overflow:hidden;

}



/*==========================================================
SECTION LABEL
==========================================================*/

.section-label{

    display:inline-flex;

    align-items:center;

    gap:10px;

    margin-bottom:18px;

    color:var(--primary);

    font-size:14px;

    font-weight:700;

    letter-spacing:1px;

    text-transform:uppercase;

}

.section-label::before{

    content:"";

    width:40px;

    height:3px;

    background:var(--secondary);

}



/*==========================================================
SECTION TITLE
==========================================================*/

.section-title{

    font-size:48px;

    font-weight:800;

    line-height:1.2;

    color:var(--heading);

    margin-bottom:25px;

}



/*==========================================================
DESCRIPTION
==========================================================*/

.section-description{

    font-size:17px;

    line-height:1.9;

    color:var(--text);

    margin-bottom:28px;

}



/*==========================================================
IMAGE AREA
==========================================================*/

.welcome-image{

    position:relative;

}

.welcome-image img{

    width:100%;

    border-radius:var(--radius-lg);

    box-shadow:var(--shadow-lg);

}



/*==========================================================
EXPERIENCE CARD
==========================================================*/

.experience-card{

    position:absolute;

    left:-20px;

    bottom:40px;

    background:var(--primary);

    color:var(--white);

    padding:28px;

    border-radius:var(--radius);

    box-shadow:var(--shadow-lg);

    max-width:220px;

}

.experience-card h3{

    color:var(--white);

    font-size:42px;

    margin-bottom:8px;

}

.experience-card p{

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

    margin:0;

}

/*==========================================================
WELCOME CONTENT
==========================================================*/

.welcome-content{

    padding-left:30px;

}



/*==========================================================
WELCOME MESSAGE
==========================================================*/

.welcome-message{

    margin-bottom:35px;

}

.welcome-message p{

    font-size:16px;

    line-height:1.9;

    color:var(--text);

}



/*==========================================================
COMMISSIONER'S QUOTE
==========================================================*/

.welcome-quote{

    position:relative;

    margin:35px 0;

    padding:30px 35px;

    background:var(--lighter);

    border-left:5px solid var(--secondary);

    border-radius:var(--radius);

}

.welcome-quote::before{

    content:"\201C";

    position:absolute;

    top:-12px;

    left:18px;

    font-size:72px;

    color:rgba(212,175,55,.25);

    font-family:Georgia, serif;

    line-height:1;

}

.welcome-quote p{

    margin:0;

    font-size:17px;

    font-style:italic;

    color:var(--heading);

    line-height:1.8;

}



/*==========================================================
SIGNATURE AREA
==========================================================*/

.signature-area{

    display:flex;

    align-items:center;

    justify-content:space-between;

    flex-wrap:wrap;

    gap:25px;

    margin-top:40px;

}



/*==========================================================
SIGNATURE DETAILS
==========================================================*/

.signature{

    display:flex;

    flex-direction:column;

}

.signature-name{

    font-family:var(--font-heading);

    font-size:22px;

    font-weight:700;

    color:var(--heading);

    margin-bottom:5px;

}

.signature-title{

    color:var(--primary);

    font-weight:600;

    font-size:15px;

}



/*==========================================================
READ MORE BUTTON
==========================================================*/

.welcome-btn{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:15px 34px;

    background:var(--primary);

    color:var(--white);

    border-radius:var(--radius-pill);

    font-weight:600;

    transition:var(--transition);

}

.welcome-btn:hover{

    background:var(--primary-dark);

    color:var(--white);

    transform:translateY(-3px);

    box-shadow:var(--shadow);

}

.welcome-btn i{

    font-size:16px;

}

/*==========================================================
MINISTRY FEATURES
==========================================================*/

.welcome-features{

    margin:45px 0;

}

.feature-item{

    display:flex;

    align-items:flex-start;

    gap:18px;

    margin-bottom:28px;

}

.feature-icon{

    width:58px;

    height:58px;

    display:flex;

    align-items:center;

    justify-content:center;

    flex-shrink:0;

    border-radius:50%;

    background:rgba(11,107,58,.10);

    color:var(--primary);

    font-size:24px;

    transition:var(--transition);

}

.feature-item:hover .feature-icon{

    background:var(--primary);

    color:var(--white);

    transform:rotate(8deg);

}

.feature-content h5{

    margin-bottom:8px;

    font-size:20px;

    color:var(--heading);

}

.feature-content p{

    margin:0;

    color:var(--text);

    line-height:1.8;

}



/*==========================================================
DECORATION
==========================================================*/

.welcome-section::before{

    content:"";

    position:absolute;

    width:420px;

    height:420px;

    right:-180px;

    top:-180px;

    border-radius:50%;

    background:rgba(11,107,58,.04);

}

.welcome-section::after{

    content:"";

    position:absolute;

    width:260px;

    height:260px;

    left:-120px;

    bottom:-120px;

    border-radius:50%;

    background:rgba(212,175,55,.08);

}



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

@media (max-width:991.98px){

    .welcome-section{

        padding:90px 0;

    }

    .welcome-content{

        padding-left:0;

        margin-top:50px;

    }

    .section-title{

        font-size:38px;

    }

    .experience-card{

        left:20px;

        bottom:20px;

    }

}



@media (max-width:767.98px){

    .welcome-section{

        padding:70px 0;

    }

    .section-title{

        font-size:32px;

    }

    .section-description{

        font-size:16px;

    }

    .signature-area{

        flex-direction:column;

        align-items:flex-start;

    }

    .experience-card{

        position:relative;

        left:0;

        bottom:0;

        margin-top:20px;

        max-width:100%;

    }

    .feature-item{

        align-items:flex-start;

    }

}



@media (max-width:575.98px){

    .section-title{

        font-size:28px;

    }

    .welcome-quote{

        padding:22px;

    }

    .welcome-quote p{

        font-size:15px;

    }

    .feature-icon{

        width:50px;

        height:50px;

        font-size:20px;

    }

    .feature-content h5{

        font-size:18px;

    }

    .welcome-btn{

        width:100%;

        justify-content:center;

    }

}