f-park{
    font-family: "Parkinsans", sans-serif !important;
}

.contact-button-wrapper {
    margin-top: 0px;
    -webkit-transform: skew(-5deg);
    -moz-transform: skew(-5deg);
    -o-transform: skew(-5deg); 
}

.contact-button {
text-transform: uppercase;
font-family: "Roboto Bold Italic", sans-serif;
font-size: 12px;
font-weight: 600;
color: #000;
position: relative;
border-radius: 11px;
background-color: #f7c32e;
padding: 10px 20px;
-webkit-transition: 0.3s ease;
transition: 0.3s ease;
border: none; 
}

.contact-button:hover {
-webkit-box-shadow: 0px 2px 20px #f7c32e;
        box-shadow: 0px 2px 20px #f7c32e;
}

.hero-contact-button-wrapper {
margin-top: 0px;
-webkit-transform: skew(-5deg);
-moz-transform: skew(-5deg);
-o-transform: skew(-5deg); 
}

.hero-contact-button {
text-transform: uppercase;
font-family: "Parkinsans", sans-serif;
font-size: 15px;
font-weight: 600;
color: #ffffff;
position: relative;
border-radius: 11px;
background-color: #fa4d00;
padding: 15px 25px;
-webkit-transition: 0.3s ease;
transition: 0.3s ease;
border: none; 
}

.hero-contact-button:hover {
-webkit-box-shadow: 0px 2px 20px #fa4d00;
        box-shadow: 0px 2px 20px #fa4d00;
}

.hero-login-button-wrapper {
margin-top: 0px;
-webkit-transform: skew(-5deg);
-moz-transform: skew(-5deg);
-o-transform: skew(-5deg); 
}

.hero-login-button {
text-transform: uppercase;
font-family: "Roboto Bold Italic", sans-serif;
font-size: 15px;
font-weight: 600;
color: #000;
position: relative;
border-radius: 11px;
background-color: #f7c32e;
padding: 15px 25px;
-webkit-transition: 0.3s ease;
transition: 0.3s ease;
border: none; 
}

.hero-login-button:hover {
-webkit-box-shadow: 0px 2px 20px #f7c32e;
        box-shadow: 0px 2px 20px #f7c32e;
}

.icon.icon-with-bg {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center
}

.avatar-sm {
    height: 3rem;
    width: 3rem;
}

.icon {
    position: relative;
    width: 3rem;
    height: 3rem;
}

.rounded-lg {
    border-radius: .5rem;
}

.bg-soft-primary {
    background-color: rgba(0, 85, 255, .12) !important;
}

.icon>svg {
    width: 3rem;
    height: 3rem
}

.icon-xs>svg {
    width: 1.5rem;
    height: 1.5rem
}

.icon[class*=text-]>svg [fill]:not([fill=none]) {
    fill: currentColor!important
}

.bg-soft-primary {
    background-color: rgba(0,85,255,.12)!important
}

.bg-soft-secondary {
    background-color: rgba(73,80,87,.12)!important
}

.bg-soft-success {
    background-color: rgba(60,210,120,.12)!important
}

.bg-soft-info {
    background-color: rgba(23,162,184,.12)!important
}

.bg-soft-warning {
    background-color: rgba(255,200,55,.12)!important
}

.bg-soft-danger {
    background-color: rgba(240,50,60,.12)!important
}

.bg-soft-light {
    background-color: rgba(244,245,247,.12)!important
}

.bg-soft-dark {
    background-color: rgba(52,58,64,.12)!important
}

.bg-soft-orange {
    background-color: rgba(255,120,75,.12)!important
}

.bg-soft-teal {
    background-color: rgba(32,201,151,.12)!important
}
.shape {
    position:absolute;
    pointer-events:none;
    overflow:hidden
}
.shape.left {
    top:0;
    bottom:0;
    left:-1px
}
.shape.right {
    top:0;
    right:-1px;
    bottom:0
}
.shape.bottom {
    bottom:-2px;
    left:0;
    right:0
}
.shape.bottom>svg {
    width:100%
}
.shape.top {
    top:-2px;
    left:0;
    right:0
}
.shape.top>svg {
    width:100%
}
.shape>svg {
    width:auto;
    height:100%
}
@media (max-width:768px) {
    .shape.bottom {
        bottom:-5px
    }
}
.divider {
    position: absolute;
    pointer-events: none;
    overflow: hidden
}

[data-bs-theme=dark] .bg-soft-orange {
    background-color: #ffffff00 !important;
}

[data-bs-theme=dark]  .divider.top {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1920 120' preserveAspectRatio='none'%3E%3Cg class='n2-ss-divider-end'%3E%3Cpath fill='rgba(42,44,49,1)' opacity='0.25' d='M1920,0,0,120,0,0z'%3E%3C/path%3E%3Cpath fill='rgba(42,44,49,1)' opacity='0.5' d='M1920,0,0,80,0,0z'%3E%3C/path%3E%3Cpath fill='rgba(42,44,49,1)' d='M1920,-2,1920,0,0,40,0,-2z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 120px;
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1)
}

[data-bs-theme=dark] .divider.bottom {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1920 120' preserveAspectRatio='none'%3E%3Cg class='n2-ss-divider-end'%3E%3Cpath fill='rgba(42,44,49,1)' opacity='0.25' d='M1920,0,0,120,0,0z'%3E%3C/path%3E%3Cpath fill='rgba(42,44,49,1)' opacity='0.5' d='M1920,0,0,80,0,0z'%3E%3C/path%3E%3Cpath fill='rgba(42,44,49,1)' d='M1920,-2,1920,0,0,40,0,-2z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 120px;
    -webkit-transform: scaleX(1) scaleY(-1);
    transform: scaleX(1) scaleY(-1)
}

.divider.top {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1920 120' preserveAspectRatio='none'%3E%3Cg class='n2-ss-divider-end'%3E%3Cpath fill='rgba(255,255,255,1)' opacity='0.25' d='M1920,0,0,120,0,0z'%3E%3C/path%3E%3Cpath fill='rgba(255,255,255,1)' opacity='0.5' d='M1920,0,0,80,0,0z'%3E%3C/path%3E%3Cpath fill='rgba(255,255,255,1)' d='M1920,-2,1920,0,0,40,0,-2z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 120px;
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1)
}

.divider.bottom {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1920 120' preserveAspectRatio='none'%3E%3Cg class='n2-ss-divider-end'%3E%3Cpath fill='RGBA(255,255,255,1)' opacity='0.25' d='M1920,0,0,120,0,0z'%3E%3C/path%3E%3Cpath fill='RGBA(255,255,255,1)' opacity='0.5' d='M1920,0,0,80,0,0z'%3E%3C/path%3E%3Cpath fill='RGBA(255,255,255,1)' d='M1920,-2,1920,0,0,40,0,-2z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 120px;
    -webkit-transform: scaleX(1) scaleY(-1);
    transform: scaleX(1) scaleY(-1)
}
@-webkit-keyframes rotating {
    0% {
        -webkit-transform:rotate(0);
        transform:rotate(0);
        top:10%;
        left:5%
    }
    100% {
        -webkit-transform:rotate(360deg);
        transform:rotate(360deg);
        top:60%;
        left:15%
    }
}
@keyframes rotating {
    0% {
        -webkit-transform:rotate(0);
        transform:rotate(0);
        top:10%;
        left:5%
    }
    100% {
        -webkit-transform:rotate(360deg);
        transform:rotate(360deg);
        top:60%;
        left:15%
    }
}
@-webkit-keyframes rotating2 {
    0% {
        -webkit-transform:rotate(0);
        transform:rotate(0);
        bottom:10%;
        right:10%
    }
    100% {
        -webkit-transform:rotate(360deg);
        transform:rotate(360deg);
        bottom:80%;
        right:30%
    }
}
@keyframes rotating2 {
    0% {
        -webkit-transform:rotate(0);
        transform:rotate(0);
        bottom:10%;
        right:10%
    }
    100% {
        -webkit-transform:rotate(360deg);
        transform:rotate(360deg);
        bottom:80%;
        right:30%
    }
}
@-webkit-keyframes rotating3 {
    0% {
        -webkit-transform:rotate(0);
        transform:rotate(0);
        bottom:0;
        right:65%
    }
    100% {
        -webkit-transform:rotate(360deg);
        transform:rotate(360deg);
        bottom:50%;
        right:35%
    }
}
@keyframes rotating3 {
    0% {
        -webkit-transform:rotate(0);
        transform:rotate(0);
        bottom:0;
        right:65%
    }
    100% {
        -webkit-transform:rotate(360deg);
        transform:rotate(360deg);
        bottom:50%;
        right:35%
    }
}
.hero-with-shapes .shape1 {
    position:absolute;
    top:5%;
    left:5%;
    width:7rem;
    height:7rem;
    background:url(../images/shapes/rounded-square2.svg);
    -webkit-animation:rotating alternate ease-in-out infinite 6s;
    animation:rotating alternate ease-in-out infinite 6s
}
.hero-with-shapes .shape2 {
    position:absolute;
    bottom:20%;
    right:10%;
    width:7rem;
    height:7rem;
    background:url(../images/shapes/rounded-square2.svg);
    -webkit-animation:rotating2 alternate ease-in-out infinite 6s;
    animation:rotating2 alternate ease-in-out infinite 6s
}
.hero-with-shapes .shape3 {
    position:absolute;
    bottom:0;
    right:65%;
    width:7rem;
    height:7rem;
    background:url(../images/shapes/rounded-square2.svg);
    -webkit-animation:rotating3 alternate ease-in-out infinite 6s;
    animation:rotating3 alternate ease-in-out infinite 6s
}
.hero-3 .shape1 {
    position:absolute;
    bottom:5%;
    left:5%;
    width:7rem;
    height:7rem;
    background:url(../images/shapes/rounded-square.svg)
}
.hero-3 .shape2 {
    position:absolute;
    top:40%;
    right:10%;
    width:7rem;
    height:7rem;
    background:url(../images/shapes/rounded-square2.svg)
}
.hero-3 .shape3 {
    position:absolute;
    top:5%;
    right:50%;
    width:7rem;
    height:7rem;
    background:url(../images/shapes/rounded-square2.svg)
}

.shape-fill {
    fill: #f5f7f9;
}

[data-bs-theme=dark] .shape-fill {
    fill: #2a2c31;
}

#footer li a {
    border-bottom: dotted 1px #394d5c;
    padding-bottom: 0;
    width: fit-content;
}

#footer li a:hover {
    color: #044df7;
    text-decoration: none;
    border-bottom: solid 1px #2665d9
}

.ribbon {
    position: absolute;
    right: -3px;
    top: -3px;
    z-index: 1;
    overflow: hidden;
    width: 93px;
    height: 93px;
    text-align: right;
}
.ribbon span {
    font-size: 0.8rem;
    color: #fff;
    text-transform: uppercase;
    text-align: center;
    font-weight: bold;
    line-height: 32px;
    transform: rotate(45deg);
    width: 125px;
    display: block;
    background: #79a70a;
    background: linear-gradient(#9bc90d 0%, #79a70a 100%);
    box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1);
    position: absolute;
    top: 17px; // change this, if no border
    right: -29px; // change this, if no border
}

.ribbon span::before {
    content: '';
    position: absolute; 
    left: 0px; top: 100%;
    z-index: -1;
    border-left: 3px solid #79A70A;
    border-right: 3px solid transparent;
    border-bottom: 3px solid transparent;
    border-top: 3px solid #79A70A;
}
.ribbon span::after {
    content: '';
    position: absolute; 
    right: 0%; top: 100%;
    z-index: -1;
    border-right: 3px solid #79A70A;
    border-left: 3px solid transparent;
    border-bottom: 3px solid transparent;
    border-top: 3px solid #79A70A;
}

.red span {
    background: linear-gradient(#f70505 0%, #8f0808 100%);
}
.red span::before {
    border-left-color: #8f0808;
    border-top-color: #8f0808;
}
.red span::after {
    border-right-color: #8f0808;
    border-top-color: #8f0808;
}

.blue span {
    background: linear-gradient(#2989d8 0%, #1e5799 100%);
}
.blue span::before {
    border-left-color: #1e5799;
    border-top-color: #1e5799;
}
.blue span::after {
    border-right-color: #1e5799;
    border-top-color: #1e5799;
}

.bg-orange-500 {
    --tw-bg-opacity: 1;
    background-color: rgb(249 115 22 / var(--tw-bg-opacity, 1));
}