@import url('https://fonts.googleapis.com/css?family=Exo:400,700');

*{
    margin: 0px;
    padding: 0px;
}

body{
    font-family: 'Exo', sans-serif;
}


.context {
    width: 100%;
    position: absolute;
    /* top:50vh; */
    
}

.context h1{
    text-align: center;
    color: #fff;
    font-size: 50px;
}


.area{
    /* background: #f6a71b;   */
    background-image: linear-gradient(310deg, #f5a81e 0%, #f09204 100%);
    background: -webkit-linear-gradient(310deg, #f5a81e 0%, #f09204 100%);  
    width: 100%;
    height:100vh;
    
   
}

.area1{
    /* background: #f6a71b;   */
    background-image: linear-gradient(310deg, #f5a81e 0%, #f09204 100%);
    background: -webkit-linear-gradient(310deg, #f5a81e 0%, #f09204 100%);  
    width: 100%;
    height:40vh;
    
   
}
.circles{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.circles li{
    position: absolute;
    display: block;
    list-style: none;
    width: 20px;
    height: 20px;
    background: rgba(255, 255, 255, 0.2);
    animation: animate 25s linear infinite;
    bottom: -150px;
    
}

.circles li:nth-child(1){
    left: 25%;
    width: 80px;
    height: 80px;
    animation-delay: 0s;
}


.circles li:nth-child(2){
    left: 10%;
    width: 20px;
    height: 20px;
    animation-delay: 2s;
    animation-duration: 12s;
}

.circles li:nth-child(3){
    left: 70%;
    width: 20px;
    height: 20px;
    animation-delay: 4s;
}

.circles li:nth-child(4){
    left: 40%;
    width: 60px;
    height: 60px;
    animation-delay: 0s;
    animation-duration: 18s;
}

.circles li:nth-child(5){
    left: 65%;
    width: 20px;
    height: 20px;
    animation-delay: 0s;
}

.circles li:nth-child(6){
    left: 75%;
    width: 110px;
    height: 110px;
    animation-delay: 3s;
}

.circles li:nth-child(7){
    left: 35%;
    width: 150px;
    height: 150px;
    animation-delay: 7s;
}

.circles li:nth-child(8){
    left: 50%;
    width: 25px;
    height: 25px;
    animation-delay: 15s;
    animation-duration: 45s;
}

.circles li:nth-child(9){
    left: 20%;
    width: 15px;
    height: 15px;
    animation-delay: 2s;
    animation-duration: 35s;
}

.circles li:nth-child(10){
    left: 85%;
    width: 150px;
    height: 150px;
    animation-delay: 0s;
    animation-duration: 11s;
}



@keyframes animate {

    0%{
        transform: translateY(0) rotate(0deg);
        opacity: 1;
        border-radius: 0;
    }

    100%{
        transform: translateY(-1000px) rotate(720deg);
        opacity: 0;
        border-radius: 50%;
    }

}



/* ######################## */

.hd--expanded .content__header {
    /* background-color: #fdd935; */ 
    background-color: #f2990d; 
    border-radius: 0 0 100% 100%/ 0 5vw 5vw;
    color: #78621f;
    height: 25.5vw;
    display: flex;
    flex-direction: column;
    position: relative;
    width: 100%
}

/* .sidebar {
    display: flex;
    flex-direction: column;
  }
  
  .fas {
    width: 40px;
    text-align: center;
  }
  
  #compress:hover~li>.nav-text {
    display: none;
  } */

/* .hd--expanded .content__header.overlapping .content__wrap:after {
    content: "";
    display: block;
    height: 12.5vw;
    width: 100%
}

.hd--expanded .content__header.overlapping+.content__boxed {
    margin-top: calc(-12.5vw - 2rem);
    z-index: 99
}

.hd--expanded .content__header:not(.overlapping):not(.rounded-0) {
    min-height: 10.9375rem
}


@media (min-width:1195px) {
    .sb--pinned:not(.mn--show):before {
        opacity: 0;
        pointer-events: none;
        visibility: hidden
    }

    .sb--pinned.hd--sticky .sidebar__inner {
        top: 3.125rem
    }

    .sb--pinned .content__boxed {
        padding-right: 17.1875rem
    }

    .sb--pinned:not(.mn--push):not(.mn--reveal) .sidebar {
        transition-duration: 0s !important
    }

    .sb--pinned:not(.sb--unite) .sidebar {
        background-color: transparent
    }

    .sb--pinned:not(.sb--unite) .sidebar .sidebar__inner {
        background-color: #edf1f6;
        color: #7a878e
    }

    .sb--pinned:not(.sb--static) .sidebar .sidebar__inner {
        height: calc(100vh - 3.125rem);
        overflow-x: hidden
    }

    .sb--pinned .sidebar {
        height: calc(100% - 3.125rem);
        top: 3.125rem;
        z-index: 999
    }

    .sb--pinned .sidebar .sidebar__inner {
        border-top-left-radius: 1.09375rem
    }

    .sb--pinned.sb--unite .sidebar__inner {
        border-radius: 0
    }

    .sb--pinned.sb--unite .sidebar:after {
        background-color: #fdd935;
        content: "";
        display: block;
        height: 1.09375rem;
        margin-left: -1.09375rem;
        margin-top: -100vh;
        -webkit-mask-image: radial-gradient(circle at 0 1.09375rem, transparent 0, transparent 1.09375rem, #000 1.15625rem);
        mask-image: radial-gradient(circle at 0 1.09375rem, transparent 0, transparent 1.09375rem, #000 1.15625rem);
        position: relative;
        top: 3.125rem;
        width: 1.155rem
    }

    .sb--pinned.sb--unite.hd--sticky .sidebar:after {
        position: sticky
    }

    .sb--pinned.sb--unite.hd--expanded .content__header:after {
        align-self: flex-end;
        background-color: #fdd935;
        content: "";
        display: block;
        height: 1.15625rem;
        -webkit-mask-image: radial-gradient(circle at 0 1.09375rem, transparent 1.09375rem, #000 1.15625rem);
        mask-image: radial-gradient(circle at 0 1.09375rem, transparent 1.09375rem, #000 1.15625rem);
        position: absolute;
        top: 100%;
        transition: transform .5s ease;
        width: 1.15625rem;
        z-index: 1000
    }

    .sb--pinned.sb--unite.hd--expanded .content__header {
        border-radius: 0 !important
    }
}

@media (min-width:990px) {
    .centered-layout .sb--pinned:not(.sb--unite) .sidebar__inner {
        border-radius: 1.09375rem
    }

    .centered-layout .sb--pinned .content__header {
        padding-inline-end: calc(((100vw - 990px)/ 2) + 17.1875rem) !important;
        width: auto !important
    }

    .centered-layout .sb--pinned .content__boxed {
        padding-inline-end: calc(17.1875rem + 1.25rem + .3125rem)
    }

    .centered-layout .sb--pinned .sidebar {
        padding-right: calc(((100vw - 990px)/ 2))
    }

    .centered-layout .mn--max.sb--pinned .content__boxed,
    .centered-layout .mn--min.sb--pinned .content__boxed {
        padding-inline-end: calc((((100vw - 990px)/ 2) + 17.1875rem))
    }

    .centered-layout .mn--max.sb--pinned .sidebar,
    .centered-layout .mn--min.sb--pinned .sidebar {
        padding-right: calc(((100vw - 990px)/ 2))
    }
}


.in-quart .mn--reveal.mn--show:before,
.in-quart :where(.mainnav, .content, .header, .header__brand, .sidebar, .offcanvas, .collapsing, .searchbox__input, .dropdown-menu, .mininav-toggle:after, .sb--pinned.content__boxed) {
    transition-timing-function: cubic-bezier(.755, .045, .915, .135) !important
}

.out-quart .mn--reveal.mn--show:before,
.out-quart :where(.mainnav, .content, .header, .header__brand, .sidebar, .offcanvas, .collapsing, .searchbox__input, .dropdown-menu, .mininav-toggle:after, .sb--pinned.content__boxed) {
    transition-timing-function: cubic-bezier(.015, .77, .04, .985) !important
}

.in-back .mn--reveal.mn--show:before,
.in-back :where(.mainnav, .content, .header, .header__brand, .sidebar, .offcanvas, .collapsing, .searchbox__input, .dropdown-menu, .mininav-toggle:after, .sb--pinned.content__boxed) {
    transition-timing-function: cubic-bezier(.705, -.155, .735, .045) !important
}

.out-back .mn--reveal.mn--show:before,
.out-back :where(.mainnav, .content, .header, .header__brand, .sidebar, .offcanvas, .collapsing, .searchbox__input, .dropdown-menu, .mininav-toggle:after, .sb--pinned.content__boxed) {
    transition-timing-function: cubic-bezier(.28, 1.02, .36, 1.145) !important
}

.in-out-back .mn--reveal.mn--show:before,
.in-out-back :where(.mainnav, .content, .header, .header__brand, .sidebar, .offcanvas, .collapsing, .searchbox__input, .dropdown-menu, .mininav-toggle:after, .sb--pinned.content__boxed) {
    transition-timing-function: cubic-bezier(1, -.28, 0, 1.275) !important
}

.steps .mn--reveal.mn--show:before,
.steps :where(.mainnav, .content, .header, .header__brand, .sidebar, .offcanvas, .collapsing, .searchbox__input, .dropdown-menu, .mininav-toggle:after, .sb--pinned.content__boxed) {
    transition-timing-function: cubic-bezier(0, .955, 1, .045) !important
}

.jumping .mn--reveal.mn--show:before,
.jumping :where(.mainnav, .content, .header, .header__brand, .sidebar, .offcanvas, .collapsing, .searchbox__input, .dropdown-menu, .mininav-toggle:after, .sb--pinned.content__boxed) {
    transition-timing-function: cubic-bezier(.005, 1.045, .25, .915) !important
}

.rubber .mn--reveal.mn--show:before,
.rubber :where(.mainnav, .content, .header, .header__brand, .sidebar, .offcanvas, .collapsing, .searchbox__input, .dropdown-menu, .mininav-toggle:after, .sb--pinned.content__boxed) {
    transition-timing-function: cubic-bezier(.135, 1.525, 0, .9) !important
}



.hd--expanded .content__header :where(h1, h2, h3, h4, h5, h6) {
    color: #69561b
}

.hd--expanded .content__header .text-head {
    color: #69561b !important
}

.hd--expanded .content__header .text-muted {
    color: rgba(105, 86, 27, .75) !important
}

.hd--expanded .content__header .page-title {
    color: #69561b
}

.hd--expanded .content__header .page-title:after {
    background-color: #69561b
}

.hd--expanded .content__header .breadcrumb-item.active,
.hd--expanded .content__header .breadcrumb-item:before {
    color: #78621f
}

.hd--expanded .content__header .breadcrumb-item>a {
    color: #69561b
}

.hd--expanded .content__header .btn-primary {
    background-color: #caae2a;
    border-color: #caae2a
}

.hd--expanded .content__header .btn-link {
    color: #e5e0c7
}

.hd--expanded .content__header .btn-link.active,
.hd--expanded .content__header .btn-link:active,
.hd--expanded .content__header .btn-link:focus,
.hd--expanded .content__header .btn-link:hover {
    color: #c6ba84
}

.hd--expanded .content__header.overlapping .content__wrap:after {
    content: "";
    display: block;
    height: 12.5vw;
    width: 100%
}

.hd--expanded .content__header.overlapping+.content__boxed {
    margin-top: calc(-12.5vw - 2rem);
    z-index: 99
}

.hd--expanded .content__header:not(.overlapping):not(.rounded-0) {
    min-height: 10.9375rem
}

.hd--expanded.mn--max.mn--sticky .content__header:before,
.hd--expanded.mn--min.mn--sticky .content__header:before {
    position: sticky;
    top: -.06125rem
}

.hd--expanded.mn--max.hd--sticky .content__header:not(.rounded-0):before,
.hd--expanded.mn--max.mn--sticky .content__header:not(.rounded-0):before,
.hd--expanded.mn--min.hd--sticky .content__header:not(.rounded-0):before,
.hd--expanded.mn--min.mn--sticky .content__header:not(.rounded-0):before {
    margin-bottom: 2.1875rem
}

.hd--expanded.mn--max.hd--sticky .content__header:before,
.hd--expanded.mn--min.hd--sticky .content__header:before {
    position: sticky;
    top: 3.125rem
}

.hd--expanded.mn--max.hd--sticky .content__header:not(.rounded-0) .content__wrap,
.hd--expanded.mn--max.mn--sticky .content__header:not(.rounded-0) .content__wrap,
.hd--expanded.mn--min.hd--sticky .content__header:not(.rounded-0) .content__wrap,
.hd--expanded.mn--min.mn--sticky .content__header:not(.rounded-0) .content__wrap {
    margin-top: -3.28125rem
}

.hd--expanded.mn--max .content__header .content__wrap,
.hd--expanded.mn--min .content__header .content__wrap {
    margin-top: -1.09375rem
}

.hd--expanded.mn--max .content__header:before,
.hd--expanded.mn--min .content__header:before {
    background-color: #fdd935;
    content: "";
    display: block;
    height: 1.09375rem;
    margin-left: 0;
    -webkit-mask-image: radial-gradient(circle at 0 1.09375rem, transparent 0, transparent 1.09375rem, #000 1.09375rem);
    mask-image: radial-gradient(circle 1.09375rem at 0 1.09375rem, transparent 0, transparent 1.09375rem, #000 1.09375rem);
    position: relative;
    top: -.06125rem;
    transform: translateX(-1.09375rem);
    width: 1.155rem;
    z-index: 10
}

.hd--expanded.mn--max.hd--sticky .content__header:not(.rounded-0) .content__wrap,
.hd--expanded.mn--max.mn--sticky .content__header:not(.rounded-0) .content__wrap,
.hd--expanded.mn--min.hd--sticky .content__header:not(.rounded-0) .content__wrap,
.hd--expanded.mn--min.mn--sticky .content__header:not(.rounded-0) .content__wrap {
    margin-top: -3.28125rem
}
.hd--expanded .content__header.overlapping .content__wrap:after {
    content: "";
    display: block;
    height: 12.5vw;
    width: 100%
}

.hd--expanded.mn--max .content__header .content__wrap,
.hd--expanded.mn--min .content__header .content__wrap {
    margin-top: -1.09375rem
}

.hd--expanded.mn--max .content__header:before, .hd--expanded.mn--min .content__header:before {
    background-color: #fdd935;
    content: "";
    display: block;
    height: 1.09375rem;
    margin-left: 0;
    -webkit-mask-image: radial-gradient(circle at 0 1.09375rem,transparent 0,transparent 1.09375rem,#000 1.09375rem);
    mask-image: radial-gradient(circle 1.09375rem at 0 1.09375rem,transparent 0,transparent 1.09375rem,#000 1.09375rem);
    position: relative;
    top: -0.06125rem;
    transform: translateX(-1.09375rem);
    width: 1.155rem;
    z-index: 10;
}

.hd--expanded .content__header.overlapping .content__wrap:after {
    content: "";
    display: block;
    height: 12.5vw;
    width: 100%;
} */
/* ######################### */