/*==========================================================
KWARA STATE MINISTRY OF LIVESTOCK DEVELOPMENT
GLOBAL STYLESHEET
File: assets/css/global.css
==========================================================*/



/*==========================================================
RESET
==========================================================*/

*,
*::before,
*::after{

    margin:0;

    padding:0;

    box-sizing:border-box;

}



/*==========================================================
HTML
==========================================================*/

html{

    scroll-behavior:smooth;

    font-size:16px;

}



/*==========================================================
BODY
==========================================================*/

body{

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

    font-size:var(--fs-base);

    font-weight:var(--fw-400);

    color:var(--text);

    background:var(--white);

    line-height:1.7;

    overflow-x:hidden;

    -webkit-font-smoothing:antialiased;

    text-rendering:optimizeLegibility;

}



/*==========================================================
WRAPPER
==========================================================*/

#wrapper{

    width:100%;

    overflow:hidden;

}



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

.container{

    max-width:var(--container);

}



/*==========================================================
IMAGES
==========================================================*/

img{

    max-width:100%;

    height:auto;

    display:block;

}



/*==========================================================
LINKS
==========================================================*/

a{

    color:var(--link);

    text-decoration:none;

    transition:var(--transition);

}

a:hover{

    color:var(--link-hover);

}



/*==========================================================
LISTS
==========================================================*/

ul,
ol{

    list-style:none;

    margin:0;

    padding:0;

}



/*==========================================================
HEADINGS
==========================================================*/

h1,
h2,
h3,
h4,
h5,
h6{

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

    color:var(--heading);

    font-weight:var(--fw-700);

    line-height:1.25;

    margin-bottom:18px;

}

h1{

    font-size:var(--fs-hero);

}

h2{

    font-size:var(--fs-3xl);

}

h3{

    font-size:var(--fs-2xl);

}

h4{

    font-size:var(--fs-xl);

}

h5{

    font-size:var(--fs-lg);

}

h6{

    font-size:var(--fs-base);

}



/*==========================================================
PARAGRAPHS
==========================================================*/

p{

    margin-bottom:18px;

    color:var(--text);

}



/*==========================================================
SECTIONS
==========================================================*/

section{

    position:relative;

    width:100%;

}

.section-padding{

    padding:var(--section-padding) 0;

}



/*==========================================================
BUTTONS
==========================================================*/

.btn{

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

    font-weight:var(--fw-600);

    padding:14px 30px;

    transition:var(--transition);

}

.btn-success{

    background:var(--primary);

    border-color:var(--primary);

}

.btn-success:hover{

    background:var(--primary-dark);

    border-color:var(--primary-dark);

}

.btn-outline-light{

    border-width:2px;

}



/*==========================================================
FORM ELEMENTS
==========================================================*/

input,
textarea,
select{

    border-radius:var(--radius);

    box-shadow:none !important;

}

input:focus,
textarea:focus,
select:focus{

    border-color:var(--primary);

}



/*==========================================================
UTILITY CLASSES
==========================================================*/

.text-primary{

    color:var(--primary)!important;

}

.bg-primary{

    background:var(--primary)!important;

}

.bg-light{

    background:var(--lighter)!important;

}

.shadow-custom{

    box-shadow:var(--shadow);

}

.rounded-custom{

    border-radius:var(--radius);

}



/*==========================================================
BACK TO TOP
==========================================================*/

.back-to-top{

    position:fixed;

    right:25px;

    bottom:25px;

    width:48px;

    height:48px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:var(--primary);

    color:var(--white);

    border-radius:50%;

    box-shadow:var(--shadow);

    opacity:0;

    visibility:hidden;

    transform:translateY(20px);

    transition:var(--transition);

    z-index:999;

}

.back-to-top.show{

    opacity:1;

    visibility:visible;

    transform:translateY(0);

}

.back-to-top:hover{

    background:var(--secondary);

    color:var(--white);

}



/*==========================================================
SELECTION
==========================================================*/

::selection{

    background:var(--primary);

    color:var(--white);

}



/*==========================================================
SCROLLBAR
==========================================================*/

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:var(--lighter);

}

::-webkit-scrollbar-thumb{

    background:var(--primary);

    border-radius:20px;

}

::-webkit-scrollbar-thumb:hover{

    background:var(--primary-dark);

}