/*---------------------------------------
  VARIABLES
-----------------------------------------*/
:root {

    --sona-color-1: #f77637;
    --sona-color-2: #52a1e6;
    --sona-color-3: #605d58;
    --sona-color-4: #383735;
    --sona-color-5: #23241f;

    --body-bg-color:                #181818;
    --headding-color:               #f0f0f0;

    --body-font-family:             'Outfit', sans-serif;

    --font-weight-light:            300;
    --font-weight-normal:           400;
    --font-weight-bold:             700;

    --h1-font-size:                 74px;
    --h2-font-size:                 46px;
    --h3-font-size:                 32px;
    --h4-font-size:                 28px;
    --h5-font-size:                 24px;
    --h6-font-size:                 22px;
    --p-font-size:                  18px;

    --primary-color:                #f77637;
    --primary-color-70:             rgba(247, 118, 55, 0.7);
    --primary-color-50:             rgba(247, 118, 55, 0.5);

    --secondary-color:              #52a1e6;
    --secondary-color-70:           rgba(82, 161, 230, 0.7);
    --secondary-color-50:           rgba(82, 161, 230, 0.5);

    --white-color:                  #ffffff;
    --black-color:                  #000000;


    --dark-color-20:                rgba(0, 0, 0, 0.2);
    --dark-color-40:                rgba(0, 0, 0, 0.4);

    --section-bg-color:             #383735;

    --p-color:                      #ffffff;


    --link-color:                   #f0f0f0;
    --link-hover-color:             #bebebe;

    --copyright-font-size:          16px;

    --border-radius-large:          100px;
    --border-radius-medium:         20px;
    --border-radius-small:          10px;
}

body {
    background-color: var(--body-bg-color);
    font-family: var(--body-font-family);
    color: var(--headding-color);
}


/*---------------------------------------
  TYPOGRAPHY
-----------------------------------------*/

@font-face {
    font-family: 'Outfit';
    src: url('../fonts/Outfit.ttf') format('truetype');
}
@font-face {
    font-family: 'Tourney';
    src: url('../fonts/Tourney.ttf') format('truetype');
}
@font-face {
    font-family: 'MandatoryPlaything';
    src: url('../fonts/MandatoryPlaything.ttf') format('truetype');
}
@font-face {
    font-family: 'Revamped';
    src: url('../fonts/Revamped.ttf') format('truetype');
}


h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--headding-color);
    font-family: MandatoryPlaything, serif;
}


h1 {
    font-size: var(--h1-font-size);
}

h2 {
    font-size: var(--h2-font-size);
}

h3 {
    font-size: var(--h3-font-size);
}

h4 {
    font-size: var(--h4-font-size);
}

h5 {
    font-size: var(--h5-font-size);
}

h6 {
    font-size: var(--h6-font-size);
}

p {
    color: var(--p-color);
    font-size: var(--p-font-size);
    font-weight: var(--font-weight-light);
}

.text-right {
    text-align: right;
}

.text-center {
    text-align: center;
}


.font-Outfit {
    font-family: Outfit, sans-serif;
}
.font-Tourney {
    font-family: Tourney, serif;
}
.font-MandatoryPlaything {
    font-family: MandatoryPlaything, serif;
}
.font-Revamped {
    font-family: Revamped, serif;
}



a, a:visited {
    color: var(--link-color);
    text-decoration: none;
    transition: color .1s linear;
}

a:hover, a:active, a:focus {
    color: var(--link-hover-color);
}





.card {
    background-color: #913005;
}

.btn-custom {
    --bs-btn-color: #fff;
    --bs-btn-bg: #f77739;
    --bs-btn-border-color: #8a330c;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #ef6827;
    --bs-btn-hover-border-color: #6b2607;
    --bs-btn-focus-shadow-rgb: 49,132,253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #df6226;
    --bs-btn-active-border-color: #6b2607;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(238, 238, 238, 0.12);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #85330f;
    --bs-btn-disabled-border-color: #381404;
}

/*---------------------------------------
  HEADER
-----------------------------------------*/
.site-header {
    background-color: var(--primary-color);
    height: 3rem;
}
.site-header h1 {
    margin: 0;
    line-height: 3rem;
    font-size: var(--h3-font-size);
    color: var(--black-color);
}



/*---------------------------------------
  SECTION
-----------------------------------------*/
.hero-section {
    position: relative;
    min-height: calc(100vh - 3rem);
    height: fit-content;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--section-bg-color);
}


/*---------------------------------------
  SITE FOOTER
-----------------------------------------*/
.site-footer {
    background-color: var(--sona-color-5);
    position: relative;
    overflow: hidden;
}

.site-footer-top {
    background-color: var(--primary-color);
    background-repeat: no-repeat;
    margin-bottom: 70px;
    padding-top: 30px;
    padding-bottom: 30px;
}

.site-footer-bottom {
    border-top: 1px solid #1f1c1c;
}

.site-footer-title {
    color: var(--primary-color);
}

.site-footer-link,
.copyright-text {
    color: var(--white-color);
}

.site-footer-links {
    padding-left: 0;
}

.site-footer-link-item {
    list-style: none;
    display: inline-block;
    margin-right: 15px;
}

.copyright-text {
    font-size: var(--copyright-font-size);
}

#logo {
    border-bottom-left-radius: 50%;
    border-bottom-right-radius: 50%;
    max-width: 60%;
    transition: transform .5s ease-in-out;
}

div:hover #logo {
    transform: rotate(9deg);
}






/*---------------------------------------
  RESPONSIVE STYLES
-----------------------------------------*/

@media screen and (max-width: 991px) {
    h1 {
        font-size: 62px;
    }

    h2 {
        font-size: 36px;
    }

    h3 {
        font-size: 32px;
    }

    h4 {
        font-size: 28px;
    }

    h5 {
        font-size: 20px;
    }

    h6 {
        font-size: 18px;
    }

}

@media screen and (max-width: 480px) {
    h1 {
        font-size: 52px;
    }

    h2 {
        font-size: 28px;
    }

    h3 {
        font-size: 26px;
    }

    h4 {
        font-size: 22px;
    }

    h5 {
        font-size: 20px;
    }

}