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

>>> TABLE OF CONTENTS:

----------------------------------------------------------------

1.	Spacing Global

2.	Start progress-wrap

3.	Button Main

4.	Video Main

5.	Start Text Animation

6.	testimonial

7.	SlideBar

8.	Review

9.	Form



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





/* Padding */



.padding-section {

    padding: 120px 0;

}



.padding-bottom-80 {

    padding-bottom: 80px;

}



.padding-bottom-120 {

    padding-bottom: 120px;

}



.padding-top-40 {

    padding-top: 40px;

}



.padding-top-120 {

    padding-top: 120px;

}



.margin-top-42 {

    margin-top: 42px;

}



.no-padding {

    padding: 0;

}



.no-padding-top {

    padding-top: 0 !important;

}



.no-background {

    background: none !important;

}





/* ====================== [  Start progress-wrap ] ====================== */



.progress-wrap {

    position: fixed;

    bottom: 30px;

    right: 30px;

    height: 44px;

    width: 44px;

    cursor: pointer;

    display: block;

    border-radius: 50px;

    -webkit-box-shadow: inset 0 0 0 2px rgba(130, 130, 130, 0.2);

    box-shadow: inset 0 0 0 2px rgba(130, 130, 130, 0.2);

    z-index: 100;

    opacity: 0;

    visibility: hidden;

    -webkit-transform: translateY(20px);

    -ms-transform: translateY(20px);

    transform: translateY(20px);

    -webkit-transition: all 400ms linear;

    -o-transition: all 400ms linear;

    transition: all 400ms linear;

}



.progress-wrap.active-progress {

    opacity: 1;

    visibility: visible;

    -webkit-transform: translateY(0);

    -ms-transform: translateY(0);

    transform: translateY(0);

}



.progress-wrap::after {

    position: absolute;

    font-family: 'Font Awesome 5 Free';

    content: '\f077';

    text-align: center;

    line-height: 44px;

    font-size: 13px;

    font-weight: 900;

    color: rgb(252, 85, 70);

    left: 0;

    top: 0;

    height: 44px;

    width: 44px;

    cursor: pointer;

    display: block;

    z-index: 1;

    -webkit-transition: all 400ms linear;

    -o-transition: all 400ms linear;

    transition: all 400ms linear;

}



.progress-wrap svg path {

    fill: none;

}



.progress-wrap svg.progress-circle path {

    stroke: #ffffff;

    stroke-width: 4;

    -webkit-box-sizing: border-box;

    box-sizing: border-box;

    -webkit-transition: all 400ms linear;

    -o-transition: all 400ms linear;

    transition: all 400ms linear;

}



.progress-wrap {

    -webkit-box-shadow: inset 0 0 0 2px rgba(130, 130, 130, 0.2);

    box-shadow: inset 0 0 0 2px rgba(130, 130, 130, 0.2);

}



.progress-wrap::after {

    color: #77cad2;

}



.progress-wrap svg.progress-circle path {

    stroke: #77cad2;

}





/* ====================== [ End progress-wrap ] ====================== */





/* Button */



.btn-action {

    position: relative;

    padding: 21px 51px 17px 44px;

    background: #fc5546;

    display: inline-block;

    overflow: hidden;

}



.btn-action.dark {
    /*background: #ffffff;*/
    background: #77cad2;
}



.btn-action span.more {

    position: relative;

    z-index: 99;

    font-size: 18px;

    font-weight: bold;

    text-transform: uppercase;

    color: black;

}



.btn-action span.more::before {

    content: '';

    width: 9px;

    height: 3px;

    position: absolute;

    top: 10px;

    right: -15px;

    background: black;

}


.header .main-header .btn-action span.more::after {
    background: #000000;
}
.header .main-header .btn-action:hover span::before {
    background: #77cad2;
    transition: all 0.3s ease;
}
.header .main-header .btn-action:hover span::after {
    background: #77cad2;
    transition: all 0.3s ease;
}
.header .main-header .btn-action:hover span {
    color: #77cad2 !important;
    transition: all 0.3s ease;
}
a.btn-action.dark:hover {
    background: #b4e6eb !important;
}

.section-blog .blog-main .blog-list-main .list-blog-box .blog-item .btn-blog .btn-action.dark:hover span {
    color: #ffffff;
}
.section-blog .blog-main .blog-list-main .list-blog-box .blog-item .btn-blog .btn-action.dark:hover span::before {
    background: #ffffff;
}
.section-blog .blog-main .blog-list-main .list-blog-box .blog-item .btn-blog .btn-action.dark:hover span::after {
    background: #ffffff;
}


.btn-action span.more::after {
    content: '';
    width: 3px;
    height: 9px;
    position: absolute;
    top: 7px;
    right: -12px;
    background: #000000;
}



.btn-action span.more.dark::before {

    background: rgb(71, 44, 53);

    content: '';

    width: 9px;

    height: 3px;

    position: absolute;

    top: 0;

    right: 0;

}



.btn-action span.more.dark::after {

    background: rgb(71, 44, 53);

    content: '';

    width: 3px;

    height: 9px;

    position: absolute;

    top: 0;

    right: 0;

}



.btn-readmore:before {

    content: '';

    width: 9px;

    height: 3px;

    position: absolute;

    top: 18px;

    right: 15px;

    background: rgb(71, 44, 53);

}



.btn-readmore:after {

    content: '';

    width: 3px;

    height: 9px;

    position: absolute;

    top: 15px;

    right: 18px;

    background: rgb(71, 44, 53);

}



.btn-readmore:hover:before,

.btn-readmore:hover:after {

    background: #fc5546;

}



.btn-action span {

    position: relative;

    z-index: 99;

    color: white;

}



.btn-action span i {

    font-size: 12px;

}



.btn-action:before {

    content: "";

    width: 38px;

    height: 38px;

    border-radius: 50%;

    position: absolute;

    left: -32px;

    bottom: -7px;

    /*background: #ffffff;*/
    background: #ffffff;

    -webkit-transition: all 0.5s ease;

    -moz-transition: all 0.5s ease;

    -ms-transition: all 0.5s ease;

    -o-transition: all 0.5s ease;

    transition: all 0.5s ease;

}



.btn-action:after {

    content: "";

    width: 3px;

    height: 100%;

    position: absolute;

    top: 0;

    right: 0;

    background: #ffffff;

}



.btn-action:hover:before {

    border-radius: 0;

    width: 100%;

    height: 100%;

    left: 0;

    bottom: 0;

    -webkit-transition: all 0.5s ease;

    -moz-transition: all 0.5s ease;

    -ms-transition: all 0.5s ease;

    -o-transition: all 0.5s ease;

    transition: all 0.5s ease;

}



span.flus-icon::before {

    content: '';

    width: 9px;

    height: 3px;

    position: absolute;

    top: -8px;

    left: 0;

    background: white;

}



span.flus-icon.dark::before {

    background: rgb(71, 44, 53);

    content: '';

    width: 9px;

    height: 3px;

    position: absolute;

    top: 17px;

    left: 8px;

}



span.flus-icon.dark::after {

    background: rgb(71, 44, 53);

    content: '';

    width: 3px;

    height: 9px;

    position: absolute;

    top: 14px;

    left: 11px;

}



span.flus-icon::after {

    content: '';

    width: 3px;

    height: 9px;

    position: absolute;

    top: -11px;

    left: 3px;

    background: white;

}





/* Video */



.ripple,

.ripple:before,

.ripple:after {

    position: absolute;

    top: 50%;

    left: 50%;

    width: 100px;

    height: 100px;

    border-radius: 50%;

    -ms-border-radius: 50%;

    -webkit-transform: translate(-50%, -50%);

    -moz-transform: translate(-50%, -50%);

    -ms-transform: translate(-50%, -50%);

    -o-transform: translate(-50%, -50%);

    transform: translate(-50%, -50%);

    -webkit-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.8);

    -moz-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.8);

    -ms-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.8);

    -o-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.8);

    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.8);

    -webkit-animation: ripple 3s infinite;

    -moz-animation: ripple 3s infinite;

    -ms-animation: ripple 3s infinite;

    -o-animation: ripple 3s infinite;

    animation: ripple 3s infinite;

}



.ripple:before {

    -webkit-animation-delay: 0.9s;

    -moz-animation-delay: 0.9s;

    -ms-animation-delay: 0.9s;

    -o-animation-delay: 0.9s;

    animation-delay: 0.9s;

    content: "";

    position: absolute;

}



.ripple:after {

    -webkit-animation-delay: 0.6s;

    -moz-animation-delay: 0.6s;

    -ms-animation-delay: 0.6s;

    -o-animation-delay: 0.6s;

    animation-delay: 0.6s;

    content: "";

    position: absolute;

}



.intro-heading {

    text-align: center;

	padding-top: 50px;

}



.intro-heading p {

    padding-top: 20px;

	padding-bottom: 40px;

}



.intro-heading hr.divider {

    background-color: #472c35;

    width: 48px;

    height: 5px;

    display: inline-block;

    margin-top: -4px;

    margin-left: -16px;

    opacity: 1;

}



.owl-dots {

    display: none;

}





/* ====================== [Start Text Animation] ====================== */



span,

a,

a:hover {

    display: inline-block;

    text-decoration: none;

    color: inherit;

}



span.color {

    /*color: #edc92a;*/

    color: #77cad2;

}



.splitting.animated .char {

    -webkit-animation: fadeInUp 0.4s cubic-bezier(0.3, 0, 0.7, 1) both;

    animation: fadeInUp 0.4s cubic-bezier(0.3, 0, 0.7, 1) both;

    -webkit-animation-delay: calc(30ms * var(--char-index));

    animation-delay: calc(40ms * var(--char-index));

}



.splitting .whitespace {

    width: 5px;

}



@-webkit-keyframes fadeInUp {

    0% {

        opacity: 0;

        -webkit-transform: translateY(50px);

        transform: translateY(30px);

    }

    100% {

        opacity: 1;

        -webkit-transform: translateY(0);

        transform: translateY(0);

    }

}



@keyframes fadeInUp {

    0% {

        opacity: 0;

        -webkit-transform: translateY(30px);

        transform: translateY(30px);

    }

    100% {

        opacity: 1;

        -webkit-transform: translateY(0);

        transform: translateY(0);

    }

}



.splitting.text.animated .char {

    -webkit-animation: fadeIn 0.3s cubic-bezier(0.3, 0, 0.7, 1) both;

    animation: fadeIn 0.3s cubic-bezier(0.3, 0, 0.7, 1) both;

    -webkit-animation-delay: calc(10ms * var(--char-index));

    animation-delay: calc(10ms * var(--char-index));

}



.splitting.text .whitespace {

    width: 4px;

}



@-webkit-keyframes fadeIn {

    0% {

        opacity: 0;

    }

    100% {

        opacity: 1;

    }

}



@keyframes fadeIn {

    0% {

        opacity: 0;

    }

    100% {

        opacity: 1;

    }

}



.imgio {

    position: relative;

}



.imgio .cimgio {

    position: absolute;

    height: 100%;

    width: 100%;

    bottom: 0;

    right: 0;

    background: #fff;

    visibility: visible !important;

    -webkit-transition: all .5s linear;

    -o-transition: all .5s linear;

    transition: all .5s linear;

    -webkit-transition-delay: .2s;

    -o-transition-delay: .2s;

    transition-delay: .2s;

}



.imgio .animated {

    height: 0;

}



.cimgio[data-delay="100"] {

    -webkit-transition-delay: .1s;

    -o-transition-delay: .1s;

    transition-delay: .1s;

}



.cimgio[data-delay="200"] {

    -webkit-transition-delay: .2s;

    -o-transition-delay: .2s;

    transition-delay: .2s;

}



.cimgio[data-delay="300"] {

    -webkit-transition-delay: .3s;

    -o-transition-delay: .3s;

    transition-delay: .3s;

}



.cimgio[data-delay="400"] {

    -webkit-transition-delay: .4s;

    -o-transition-delay: .4s;

    transition-delay: .4s;

}



.cimgio[data-delay="500"] {

    -webkit-transition-delay: .5s;

    -o-transition-delay: .5s;

    transition-delay: .5s;

}



.cimgio[data-delay="600"] {

    -webkit-transition-delay: .6s;

    -o-transition-delay: .6s;

    transition-delay: .6s;

}



.cimgio[data-delay="700"] {

    -webkit-transition-delay: .7s;

    -o-transition-delay: .7s;

    transition-delay: .7s;

}



.cimgio[data-delay="800"] {

    -webkit-transition-delay: .8s;

    -o-transition-delay: .8s;

    transition-delay: .8s;

}



.cimgio[data-delay="900"] {

    -webkit-transition-delay: .9s;

    -o-transition-delay: .9s;

    transition-delay: .9s;

}



.cimgio[data-delay="1s"] {

    -webkit-transition-delay: 1s;

    -o-transition-delay: 1s;

    transition-delay: 1s;

}



.title span {

    font-weight: bold;

}



.heading-title span {

    font-weight: bold;

}





/* ====================== [ End Text Animation ] ====================== */





/* testimonial */



.testimonials-main-list {

    padding-top: 80px;

}



.list-testimonials {

    display: flex;

}



.section-testimonials.s1 .themesflat-testimonial {

    margin-right: 30px;

    background: white;

    border-radius: 5px;

}



.themesflat-testimonial:nth-child(3) {

    margin-right: 0;

}



.themesflat-testimonial .testimonials-item {

    padding: 43px 35px 32px 30px;

    position: relative;

}



.themesflat-testimonial .testimonials-item .img-item {

    padding-left: 27px;

    background: #fff;

    position: absolute;

    width: 70px;

    height: 70px;

    border-radius: 50%;

    padding-top: 20px;

    top: -36px;

    border: 1px solid #f6f4f5;

}



.themesflat-testimonial .testimonials-item .img-item img {

    width: auto;

}



.themesflat-testimonial .testimonials-item .text {

    font-weight: 400;

    line-height: 1.5;

}



.themesflat-testimonial .testimonials-item .author {

    padding-top: 19px;

}



.themesflat-testimonial .testimonials-item .author .info {

    float: left;

    padding-right: 22px;

}



.themesflat-testimonial .testimonials-item .author .info img {

    width: auto;

    float: left;

    padding-right: 2px;

}



.themesflat-testimonial .testimonials-item .author .info ul {

    display: inline-block;

}



.themesflat-testimonial .testimonials-item .author .info li {

    list-style-type: none;

    background: rgb(252, 85, 70);

    width: 30px;

    height: 50px;

    padding-top: 16px;

    display: inline-block;

    text-align: center;

}



.themesflat-testimonial .testimonials-item .author .info li a {

    color: white;

}



.themesflat-testimonial .testimonials-item .author .info li a:hover {

    color: rgb(252, 85, 70);

}



.themesflat-testimonial .testimonials-item .author .name {

    padding-top: 7px;

}



.themesflat-testimonial .testimonials-item .author .name h5 {

    text-transform: uppercase;

    font-weight: 500;

}



.themesflat-testimonial .testimonials-item .author .name p {

    font-size: 14px;

}





/* SlideBar */



.slidebar {

    width: 31.5%;

}



.slidebar .box-author {

    text-align: center;

    background: url('../images/background/background.jpg') no-repeat;

    background-size: cover;

    padding: 50px 28px 14px 28px;

    position: relative;

    border-bottom: 2px solid rgb(237, 201, 42);

    background-position-x: center;

}



.slidebar .box-author h4.name {

    text-transform: uppercase;

    font-weight: bold;

    color: #fff;

    padding-top: 25px;

    padding-left: 6px;

}



.slidebar .box-author p.text {

    padding-top: 16px;

    font-size: 16px;

    color: rgba(255, 255, 255, 0.6);

}



.slidebar .box-author .img-author {

    position: relative;

}



.slidebar .box-author li.fb-author {

    position: absolute;

    top: 15%;

    left: 30%;

    width: 40px;

    height: 40px;

    border-radius: 50%;

    background: #11161e;

    display: flex;

    justify-content: center;

    align-items: center;

}



.slidebar .box-author li.fb-author a {

    color: rgb(237, 201, 42);

}



.slidebar .box-author li.fb-author a i:before {

    content: '\f39e';

}



.slidebar .box-author li.fb-author:hover a {

    color: #fff;

}



.slidebar .box-author .list-social {

    margin: 0;

    position: absolute;

    top: 11px;

    right: 11px;

    background: rgb(252, 85, 70);

}



.slidebar .box-author .list-social li {

    position: relative;

    padding: 14px 11px;

}



.fab.fa-facebook-f::before {

    content: '\f39e';

}



.slidebar .box-author .list-social li a {

    color: #fff;

    font-size: 14px;

}



.slidebar .box-author .list-social li a::before {

    content: '';

    width: 25%;

    height: 1px;

    position: absolute;

    bottom: 0;

    left: 36%;

    background: #fff;

}



.slidebar .box-author .list-social li:nth-last-child(1) a::before {

    display: none;

}



.slidebar .box-author .list-social li a:hover {

    color: rgb(71, 44, 53);

}



.slidebar .box-author .list-social li.none a::after {

    display: none;

}



.slidebar .box-author hr {

    margin: 23px 0;

}



.slidebar .box-search {

    margin-top: 70px;

    background: rgb(246, 244, 245);

    padding: 50px 27px;

}



.slidebar .box-search h4.title {

    font-weight: 600;

    text-transform: uppercase;

    padding-bottom: 20px;

}



.slidebar .box-search .search-form {

    position: relative;

}



.slidebar .box-search .search-form input.header-search-field {

    font-family: 'Open Sans', sans-serif;

    font-size: 14px;

    font-weight: 400;

    background-color: #f3f3f4;

    padding: 15px 30px;

    border-radius: 8px;

    border-color: rgba(17, 22, 30, 0.1);

    width: 100%;

}



.slidebar .box-search .search-form button.header-search-submit {

    position: absolute;

    top: 20px;

    right: 20px;

    border: none;

    background: transparent;

    color: #e74901;

}



.slidebar .box-search .search-form button.header-search-submit i {

    font-size: 20px;

}



.slidebar .box-category {

    margin-top: 68px;

    background: rgb(246, 244, 245);

    padding: 46px 28px 30px 28px;

}



.slidebar .box-category h4.title {

    font-weight: 600;

    text-transform: uppercase;

}



.slidebar .box-category ul.list-category {

    margin-left: 25px;

    padding-top: 19px;

}



.slidebar .box-category ul.list-category li {

    list-style: square;

    padding-bottom: 12px;

}



.slidebar .box-category ul.list-category li::marker {

    color: #6b575e;

}



.slidebar .box-category ul.list-category li a {

    color: #6b575e;

    display: block;

}



.slidebar .box-category ul.list-category li a span.number {

    float: right;

    margin-top: -9px;

}



.slidebar .box-category ul.list-category li a:hover {

    color: rgb(252, 85, 70);

}



.slidebar .box-tag {

    background: rgb(246, 244, 245);

    margin-top: 72px;

    padding: 46px 5px 34px 27px;

}



.slidebar .box-tag .tag-cloud {

    padding-top: 20px;

}



.slidebar .box-tag h4.title {

    font-weight: 600;

    text-transform: uppercase;

}



.slidebar .box-tag .tag-cloud a {

    display: inline-block;

    background-color: #fff;

    border-radius: 4px;

    padding: 5px 18px;

    margin-bottom: 8px;

    margin-right: 8px;

    color: rgb(71, 44, 53);

}



.slidebar .box-tag .tag-cloud a:hover {

    background: rgb(252, 85, 70);

    color: #fff;

}





/* end */





/* Review */



.review h5.title {

    font-size: 18px;

    font-weight: 500;

    text-transform: uppercase;

    padding-top: 56px;

}



.review .review-content {

    position: relative;

    padding-top: 8px;

}



.review .review-content .img-rev {

    float: left;

}



.review .review-content .img-rep {

    float: left;

    margin-left: 21px;

    margin-top: 21px;

}



.review .review-content .content {

    position: relative;

    padding-top: 27px;

    background: #fff;

    margin-left: 112px;

    padding-left: 51px;

    padding-right: 51px;

    padding-bottom: 20px;

    border: 2px solid rgb(246, 244, 245);

}



.review .review-content .content p.text {

    margin-top: -11px;

    line-height: 1.78em;

    font-size: 14px;

    color: #6b575e;

}



.review .review-content .content .author {

    font-weight: 600;

}



.review .review-content .content .list-action {

    margin: 0;

}



.review .review-content .content .list-action li {

    display: inline-block;

    padding-right: 18px;

}



.review .review-content .content .list-action li a {

    font-size: 13px;

    font-weight: 500;

    color: #6b575e;

}



.review .review-content .content .list-action li a:hover {

    color: rgb(252, 85, 70);

}



.review .review-content .content .list-action li a i:before {

    padding-right: 5px;

}



.review .review-content .content .list-star {

    position: absolute;

    top: 27px;

    right: 72px;

    margin: 0;

}



.review .review-content .content .list-star li {

    display: inline-block;

}



.review .review-content .content .list-star li a {

    color: rgb(237, 201, 42);

    font-size: 14px;

}



.review .review-content .content .list-star li a i:before {

    margin-right: -2px;

}



.review .review-content .triangle-bottomright {

    position: absolute;

    bottom: 0;

    width: 0;

    height: 0;

    border-bottom: 100px solid #fff;

    border-left: 100px solid transparent;

}



.review .review-content.rep {

    padding-left: 100px;

    margin-top: 42px;

}



.review .review-content.rep .content {}



.review .review-content.rep .content .list-star {

    display: none;

}



.review .review-content.rep .content .list-action li.clock {

    display: none;

}



.form-review {

    padding-top: 66px;

}



.form-review .list-star {

    margin: 0;

}



.form-review .list-star li {

    display: inline-block;

}



.form-review .list-star li a {

    color: #6b575e;

}



.form-review .list-star li a i:before {

    margin-right: -2px;

}





/* end */





/* Contact Form 7

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



.themesflat-contact-form .wpcf7-form-control-wrap {

    position: relative;

    display: block;

}



.themesflat-contact-form .wpcf7-form-control-wrap.your-name,

.themesflat-contact-form .wpcf7-form-control-wrap.your-email,

.themesflat-contact-form .wpcf7-form-control-wrap.your-phone {

    margin-bottom: 14px;

}



.themesflat-contact-form .btn-action {

    border: none;

}





/* Style Form */



.themesflat-contact-form.style-2 {

    padding-top: 46px;

}



.themesflat-contact-form.style-2 .wpcf7-form-control-wrap.your-name,

.themesflat-contact-form.style-2 .wpcf7-form-control-wrap.your-email,

.themesflat-contact-form.style-2 .wpcf7-form-control-wrap.your-phone,

.themesflat-contact-form.style-2 .wpcf7-form-control-wrap.your-subject {

    width: 48%;

    float: left;

    margin-bottom: 20px;

}



.themesflat-contact-form.style-2 .wpcf7-form-control-wrap.your-name {

    margin-right: 30px;

}



.themesflat-contact-form.style-2 .wpcf7-form-control-wrap.your-message {

    clear: both;

    padding-bottom: 61px;

}



.themesflat-contact-form.style-2 input[type="text"],

.themesflat-contact-form.style-2 input[type="email"],

.themesflat-contact-form.style-2 textarea {

    width: 100%;

    background-color: transparent;

    font-family: 'Open Sans', sans-serif;

    font-size: 13px;

    font-weight: 400;

    border: 1px solid rgba(17, 22, 30, 0.1);

    padding: 10px 30px;

}



.themesflat-contact-form.style-2 textarea {

    height: 199px;

    padding-top: 19px;

}



.themesflat-contact-form.style-2 input[type="submit"] {

    padding: 19px 49px;

    margin-top: 20px;

}



.themesflat-contact-form.w100 .wpcf7-form-control-wrap.your-name,

.themesflat-contact-form.w100 .wpcf7-form-control-wrap.your-email,

.themesflat-contact-form.w100 .wpcf7-form-control-wrap.your-phone {

    width: 100%;

    float: none;

    margin-right: 0;

    margin-bottom: 9px;

}



.themesflat-contact-form.w100 textarea {

    height: 142px;

}



.themesflat-contact-form.w100 input[type="submit"] {

    margin-top: 9px;

}



.themesflat-contact-form input[type="text"]:focus,

.themesflat-contact-form input[type="email"]:focus {

    border-color: #ffa800;

}



.flat-alert {

    font-size: 14px;

    font-weight: 400;

    font-family: 'Open Sans', sans-serif;

    color: #472c35;

    padding-bottom: 20px;

}
.flat-slider .btn-silde .btn-action span::after {
    background: #000000;
    transition: all 0.3s ease;
}