/*----------------------------------------------

*

* [Default Stylesheet]

*

* Theme    : NEXGEN

* Version  : 1.0

* Author   : Codings

* Support  : codings.dev

* 

----------------------------------------------*/



/*----------------------------------------------



[ALL CONTENTS]



1. Root

2. Button

3. Effect



----------------------------------------------*/



/*----------------------------------------------

1. Root

----------------------------------------------*/



/* #region Root */



:root {

    --h1-font: 'Poppins', sans-serif;

    --h1-size: 4.5rem;

    --h1-weight: 900;

    

    --h2-font: 'Poppins', sans-serif;

    --h2-size: 3rem;

    --h2-weight: 700;

    

    --p-font: 'Montserrat', sans-serif;

    --p-size: 1rem;

    --p-weight: 400;



    --header-bg-color: #21333e;

    --nav-top-bg-color: #21333e;

    --nav-sub-bg-color: #21333e;

    --nav-holder-bg-color: #21333e;

    --nav-brand-height: 35px;

    --nav-item-color: #f9f9f9;

    --hero-bg-color: #111117;

    --footer-brand-height: 80px;



    --primary-color: #2f2f2f;

    --secondary-color: #2f3281;

    

    --white-color: #ffffff;

    --black-color: #000007;

    --dark-grey-color: #111117;



    --primary-t-color: #041e41;

    --secondary-t-color: #f9f9f9; 

    --primary-p-color: #606d75;

    --secondary-p-color: #c0c3d0;

    --primary-b-color: #f9f9f9;

    --primary-l-color: rgba(0, 0, 0, .25);

    --secondary-l-color: rgba(255, 255, 255, 0.35);



    --valid-color: #007a4d;

    --invalid-color: #e34f4f;



    --primary-bg-color: #f9f9f9;

    --primary-bg-color-2: #f1f1f1;

    --primary-bg-color-3: rgba(5, 130, 131, 0.15);



    --secondary-bg-color: #111117;

    --secondary-bg-color-2: #080d10;

    --secondary-bg-color-3: #191919;



    --card-bg-color: #ffffff;



    --footer-bg-color: #111117;

}



/* #endregion Root */



/*----------------------------------------------

2. Button

----------------------------------------------*/



/* #region Button */



.primary-button, .primary-button:visited, .primary-button:active {

    position: relative;

    z-index: 2;

    padding: 10px 25px;

    background-color: #2f3281;

    border-radius: 4px;

    border: 1px solid;

    border-color: #2f3281;

    color: #fff;

    font-weight: 500;

    -webkit-transition: all .4s ease-out 0s;

    -o-transition: all .4s ease-out 0s;

    -moz-transition: all .4s ease-out 0s;

    transition: all .4s ease-out 0s;

}



.primary-button:hover, .primary-button:focus {

    background-color: #2f3281;

    border-color: #2f3281;

    color: var(--white-color);

}



.outline-button, .outline-button:visited, .outline-button:active {

    position: relative;

    z-index: 2;

    padding: 10px 25px;

    background-color: transparent;

    border-radius: 4px;

    border: 1px solid;

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

    color: var(--primary-color);

    font-weight: 500;

    -webkit-transition: all .4s ease-out 0s;

    -o-transition: all .4s ease-out 0s;

    -moz-transition: all .4s ease-out 0s;

    transition: all .4s ease-out 0s;

}



.odd .outline-button, .odd .outline-button:visited, .odd .outline-button:active {

    position: relative;

    z-index: 2;

    padding: 10px 25px;

    background-color: transparent;

    border-radius: 4px;

    border: 1px solid;

    border-color: #2f3281;

    color: #fff;

    font-weight: 500;

    -webkit-transition: all .4s ease-out 0s;

    -o-transition: all .4s ease-out 0s;

    -moz-transition: all .4s ease-out 0s;

    transition: all .4s ease-out 0s;

}



.outline-button:hover, .outline-button:focus {

    border-color: #2f3281;

    background-color: #2f3281;

    color: var(--white-color);

}



/* #endregion Button */



/* #region Effect */



@-webkit-keyframes pulse {

    0% {

        -webkit-box-shadow: 0 0 0 0 var(--secondary-color);

        background-color: var(--secondary-color);

    }

    70% {

        -webkit-box-shadow: 0 0 0 10px rgba(204,169,44, 0);

        background-color: rgba(204,169,44, 0);

    }

    100% {

        -webkit-box-shadow: 0 0 0 0 rgba(204,169,44, 0);

        background-color: rgba(204,169,44, 0);

    }

}

  

@keyframes pulse {

    0% {

        -moz-box-shadow: 0 0 0 0 var(--secondary-color);

        box-shadow: 0 0 0 0 var(--secondary-color);

        background-color: var(--secondary-color);

    }

    70% {

        -moz-box-shadow: 0 0 0 10px rgba(204,169,44, 0);

        box-shadow: 0 0 0 10px rgba(204,169,44, 0);

        background-color: rgba(204,169,44, 0);

    }

    100% {

        -moz-box-shadow: 0 0 0 0 rgba(204,169,44, 0);

        box-shadow: 0 0 0 0 rgba(204,169,44, 0);

        background-color: rgba(204,169,44, 0);

    }

}



/* #endregion Effect */