/*=========================================

            Table of Content
            1. Body and Core Css
            2. Preloader
            3. Navbar
            4. Home Banner Section
            5. About Section
            6. Services Section
            7. Portfolio Section
            8. Blog Section
            9. Contact Section
            10. Footer
            11. Blog Banner Section
            12. Blog Post Page Main Area
            13. Site Mobile Responsive
            14. Particles Background

===========================================*/


/*============ 1. Body and Core Css ============*/

* {
    margin: 0;
    padding: 0;
}

html {
    height: 100%;
}

body {
    font-family: "Poppins", sans-serif;
}

h1,
h2,
h3,
h4,
h5 {
    font-family: "Montserrat", sans-serif;
}

h2 {
    font-weight: 700;
}

h3,
h4,
h5,
h6 {
    font-weight: 600;
}

p {
    color: #748182;
    line-height: 28px;
}

a {
    color: #000;
}

a:hover {
    text-decoration: none;
}

a:hover,
a:focus {
    outline: none;
}

ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

img {
    max-width: 100%;
    height: auto;
}

section {
    overflow: hidden;
}


/*Margins*/

.padtop-20 {
    padding-top: 20px;
}
.padtop-40 {
    padding-top: 40px;
}
.padtop-60 {
    padding-top: 60px;
}
.padtop-90 {
    padding-top: 90px;
}
.padbtm-20 {
    padding-bottom: 20px;
}
.padbtm-40 {
    padding-bottom: 40px;
}
.padbtm-60 {
    padding-bottom: 60px;
}
.padbtm-90 {
    padding-bottom: 90px;
}
.martop-20 {
    margin-top: 20px;
}
.martop-40 {
    margin-top: 40px;
}
.martop-60 {
    margin-top: 60px;
}
.marbtm-20 {
    margin-bottom: 20px;
}
.marbtm-40 {
    margin-bottom: 40px;
}
.marbtm-60 {
    margin-bottom: 60px;
}

.main-button {
    text-decoration: none;
    border: 1px solid #aaa;
    color: #000;
    padding: 10px 20px;
    font-size: 14px;
    text-transform: uppercase;
    -webkit-transition: all .5s ease;
    -o-transition: all .5s ease;
    transition: all .5s ease;
    background-color: transparent;
}

.main-button:hover {
    border: 1px solid #000;
    background: #000;
    color: #fff;
    text-decoration: none;
}

.main-button:hover,
.main-button:focus {
    outline: none;
}

.main-button.success {
    border-color: #28a745;
    color: #28a745;
}

.main-button.success:hover {
    background-color: #28a745;
    color: #fff;
}

.main-button.error {
    border-color: #dc3545;
    color: #dc3545;
}

.main-button.error:hover {
    background-color: #dc3545;
    color: #fff;
}

.wave {
    position: absolute;
    width: 100%;
    height: 50px;
    bottom: 0;
    left: 0;
    fill: #fff;
    z-index: 1;
    visibility: hidden;
}

.wave-primary {
    position: relative;
}

.wave-primary .wave {
    fill: #fff;
    display: block;
    visibility: visible;
}

.wave-secondary {
    position: relative;
}

.wave-secondary .wave {
    fill: #f3f3f3;
    visibility: visible;
}

.wave-footer {
    position: relative;
}

.wave-footer .wave {
    fill: #111;
    visibility: visible;
    top: 0;
    -webkit-transform: translateY(-100%);
    -ms-transform: translateY(-100%);
    transform: translateY(-100%);
}



/*============ 3 .Navbar ============*/

.navbar {
    padding-top: 30px;
    padding-bottom: 20px;
    font-size: 2rem; /* Augmentez cette valeur pour une taille de police plus grande */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 99;
}

.navbar .navbar-brand img {
    width: 100%;
}

.navbar .navbar-toggler {
    border: none;
}

.navbar .navbar-toggler:focus,
.navbar .navbar-toggler:hover {
    outline: none;
}

/* Ajoutez cette règle pour cibler spécifiquement les liens de la barre de navigation */
.navbar .navbar-nav .nav-link {
    font-size: 1.2rem; /* Ajustez cette valeur selon vos besoins */
}

.navbar-scroll-fixed {
    padding-top: 10px;
    padding-bottom: 10px;
    position: fixed;
    background-color: #fff;
    -webkit-box-shadow: 0 1px 70px rgba(0, 0, 0, 0.5);
    box-shadow: 0 1px 70px rgba(0, 0, 0, 0.5);
    -webkit-transition: all .5s ease;
    -o-transition: all .5s ease;
    transition: all .5s ease;
}

.navbar-scroll-fixed .navbar-nav .back-button {
    color: #000;
}


/*============ Home Page ============*/


/*============ 4. Home Banner Section ============*/

/*Banner Section*/
#banner {
    background-position: top center;
    -webkit-background-size: cover;
    background-size: cover;
    position: relative;
    background-attachment: fixed;
}

#banner:before {
    content: " ";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

#banner .banner-text {
    text-align: center;
    position: absolute;
    z-index: 2;
    top: 50%;
    width: 100%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

#banner .banner-text h1 {
    font-weight: 800;
    color: #fff;
    font-size: 60px;
    line-height: 100px;
    letter-spacing: 2px;
}

#banner .banner-text #typed {
    color: #fff;
    font-size: 32px;
    font-weight: 500;
}


/*Animations*/

/*Typed Cursor Blink*/

.typed-cursor {
    opacity: 1;
    -webkit-animation: blink 0.7s infinite;
    animation: blink 0.7s infinite;
    font-size: 35px;
    font-weight: 900;
    color: #fff;
}

@keyframes blink {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@-webkit-keyframes blink {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}


/*============ 5. About Section ============*/

#about {
    padding-top: 120px;
    padding-bottom: 160px;
}

#about .about-info-container {
    background-color: #f3f3f3;
    margin-top: 20px;
    padding-top: 40px;
    padding-bottom: 40px;
    -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.01);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.01);
    -webkit-transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    -o-transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

#about .about-info-container:hover {
    -webkit-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1), 0 10px 10px rgba(0, 0, 0, 0.01);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1), 0 10px 10px rgba(0, 0, 0, 0.01);
}

#about .about-info-container .about-info {
    text-align: right;
    padding-right: 50px;
}

#about .about-info-container .about-info .info-item img {
    width: 100px;
    -webkit-border-radius: 90px;
    border-radius: 90px;
    border: 5px solid #fff;
    margin-bottom: 20px;
}

#about .about-info-container .about-info .info-item p {
    margin-bottom: 10px;
}

#about .about-info-container .about-info .info-item span {
    font-family: "Montserrat", sans-serif;
    font-weight: 500;
    color: #000;
}

#about .about-info-container .about-skills {
    padding-left: 50px;
}

#about .about-info-container .about-skills h3 {
    font-weight: 700;
    margin-bottom: 20px;
}

#about .about-info-container .about-skills .progress-box {
    margin-bottom: 20px;
}

#about .about-info-container .about-skills .progress-box p {
    text-transform: uppercase;
    font-family: "Montserrat", sans-serif;
    font-weight: 500;
    font-size: 14px;
    margin-bottom: 10px;
    color: #000;
}

#about .about-info-container .about-skills .progress-box .progress {
    -webkit-border-radius: 0;
    border-radius: 0;
    height: 2px;
}

#about .about-info-container .about-skills .progress-box .progress .progress-bar {
    background-color: #616161;
    -webkit-transition: width 1.5s ease;
    -o-transition: width 1.5s ease;
    transition: width 1.5s ease;
    width: 0;
}


/*============ 6. Services Section ============*/

#services {
    padding-top: 120px;
    padding-bottom: 110px;
}

#services .services-item {
    text-align: center;
    padding: 30px 20px;
    background-color: #f2f2f2;
    margin-bottom: 50px;
    -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    -webkit-transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    -o-transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

#services .services-item:hover {
    -webkit-box-shadow: 0 14px 28px rgba(0, 0, 0, 0.1);
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.1);
}

#services .services-item .fa {
    margin-bottom: 20px;
}

#services .services-item h3 {
    font-family: "Poppins", sans-serif;
    font-size: 18px;
    font-weight: 500;
    margin-bottom: 15px;
}


/*============ 7. Portfolio Section ============*/

#portfolio {
    padding-top: 120px;
    padding-bottom: 130px;
    background-color: #f2f2f2;
}

.portfolio-header .portfolio-filter {
    padding-top: 5px;
}

.portfolio-header .portfolio-filter ul {
    margin: auto;
    display: inline-block;
    padding-left: 0px;
}

.portfolio-header .portfolio-filter ul li {
    float: left;
    color: #748182;
    list-style: none;
    margin-right: 10px;
    cursor: pointer;
    font-size: 15px;
}

.portfolio-header .portfolio-filter ul li.sel-item {
    color: #000 !important;
    font-weight: bold;
}

.portfolio-header .portfolio-filter ul li li:last-child {
    margin-right: 0;
}

.portfolio-items .single-item {
    margin-bottom: 30px;
}

.portfolio-items .single-item .popup {
    position: relative;
    width: 100%;
    height: 100%;
    display: block;
    overflow: hidden;
}

.portfolio-items .single-item .popup img {
    width: 100%;
    -webkit-transition: -webkit-transform .5s ease-in-out;
    transition: -webkit-transform .5s ease-in-out;
    -o-transition: transform .5s ease-in-out;
    transition: transform .5s ease-in-out;
    transition: transform .5s ease-in-out, -webkit-transform .5s ease-in-out;
}

.portfolio-items .single-item .popup:after {
    content: " ";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 3;
    -webkit-transition: background-color .6s ease-in-out;
    -o-transition: background-color .6s ease-in-out;
    transition: background-color .6s ease-in-out;
}

.portfolio-items .single-item .popup:hover:after {
    background-color: rgba(0, 0, 0, 0.5);
}

.portfolio-items .single-item .popup:hover img {
    -webkit-transform: scale(1.2);
    -ms-transform: scale(1.2);
    transform: scale(1.2);
}

.portfolio-items img {
    transition: opacity 0.5s ease;
    cursor: pointer;
  }
  .portfolio-items img:hover {
    opacity: 0.8;
  }

  .see-more-btn {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    cursor: pointer;
    z-index: 10000;
}


/*============ 8. Blog Section ============*/

#blog {
    background-color: #f2f2f2;
    padding-top: 120px;
    padding-bottom: 160px;
}

.blog-post {
    color: #000;
    margin-bottom: 40px;
}

.blog-post:hover {
    color: #000;
    text-decoration: none;
}

.blog-post .post-image {
    position: relative;
}

.blog-post .post-image img {
    width: 100%;
}

.blog-post .post-image:before {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-color: #000;
    opacity: .3;
    z-index: 1;
    -webkit-transition: opacity .2s ease-in-out;
    -o-transition: opacity .2s ease-in-out;
    transition: opacity .2s ease-in-out;
}

.blog-post .post-image:hover:before {
    opacity: 0;
}

.blog-post .post-title {
    font-size: 18px;
    line-height: 25px;
    padding-top: 30px;
    padding-bottom: 15px;
    margin-bottom: 0;
}

.blog-post .post-body {
    font-size: 15px;
    line-height: 25px;
}

.blog-post .post-meta {
    font-size: 13px;
    font-weight: 400;
    color: #b8b8b8;
    float: right;
}

.blog-post .post-meta span {
    color: #000;
    font-weight: 600;
}

.view-more-button {
    text-align: center;
    margin-top: 20px;
}

.view-more-button a {
    display: inline-block;
}


/*============ 9. Contact Section ============*/

#contact {
    padding-top: 120px;
    padding-bottom: 160px;
}

#contact h2 {
    margin-bottom: 30px;
    text-transform: uppercase;
    font-size: 24px;
}

#contact .contact-item h4 {
    font-weight: 600;
    margin-bottom: 6px;
    font-size: 14px;
    line-height: 21px;
}

#contact .contact-item p {
    font-size: 14px;
    line-height: 24px;
}

#contact form .form-group {
    margin-bottom: 24px;
}

#contact form .form-group .form-control {
    font-size: 14px;
    -webkit-box-shadow: none;
    box-shadow: none;
    -webkit-border-radius: 0;
    border-radius: 0;
    background-color: transparent;
    border: 0;
    border-bottom: 1px solid #cccccc;
    height: 52px;
    -webkit-transition: all .4s ease;
    -o-transition: all .4s ease;
    transition: all .4s ease;
}

#contact form .form-group textarea.form-control {
    height: auto;
}

#contact form .form-group .con-error {
    border-color: red;
}

#contact form .form-control:hover,
#contact form .form-control:active,
#contact form .form-control:focus {
    -webkit-box-shadow: none;
    -moz-webkit-box-shadow: none;
    box-shadow: none;
    border-color: #666666;
}


/*============ 10. Footer ============*/

footer {
    padding-top: 60px;
    padding-bottom: 60px;
    background-color: #111;
    text-align: center;
}

footer ul.social-icons {
    padding: 0;
    margin: 0;
    list-style-type: none;
}

footer ul.social-icons li {
    display: inline-block;
    margin: 0 15px;
}

footer ul.social-icons li:first-child {
    margin-left: 0;
}

footer ul.social-icons li:last-child {
    margin-right: 0;
}

footer ul.social-icons li a {
    color: #757575;
    font-size: 16px;
    -webkit-transition: all .4s ease;
    -o-transition: all .4s ease;
    transition: all .4s ease;
}

footer ul.social-icons li a:hover {
    color: #fff;
}

footer p {
    color: #757575;
    margin: 24px 0 0 0;
    font-size: 14px;
}


/*============ Blog And Single-Blog Page ============*/

/*============ 11. Blog Post Page Banner ============*/

.blog-banner {
    padding: 150px 0;
    text-align: center;
    background-color: #111;
    color: #fff;
}

.blog-banner h1 {
    font-size: 46px;
    color: #fff;
    text-transform: capitalize;
    font-weight: 700;
    margin-top: 0;
    margin-bottom: 17px;
}

.blog-banner .bread-crumb a {
    color: #fff;
}


/*============ 12. Blog Post Page Main Area ============*/

#blog-posts-area,
#single-blog-area {
    background-color: #f2f2f2;
    padding: 100px 0;
}

.blog-featured-image {
    overflow: hidden;
    max-height: 400px;
}

.blog-meta span {
    font-size: 13px;
    text-transform: uppercase;
    margin-right: 15px;
}

.blog-content {
    margin-top: 12px;
}

#blog-posts-area .single-blog,
#single-blog-area .single-blog-details {
    padding: 30px;
    margin-bottom: 50px;
    background-color: #fff;
}

#blog-posts-area .single-blog h2,
#single-blog-area .single-blog-details h2 {
    margin: 20px 0 5px;
    font-size: 24px;
    font-weight: 600;
}

#blog-posts-area .pagination {
    margin: 0;
}

#blog-posts-area .pagination ul {
    list-style: outside none none;
}

#blog-posts-area .pagination ul li {
    display: inline-block;
}

#blog-posts-area .pagination ul li a {
    background-color: #fff;
    color: #444;
    display: block;
    font-size: 20px;
    font-weight: 500;
    height: 35px;
    line-height: 34px;
    margin-right: 5px;
    text-align: center;
    width: 35px;
    -webkit-transition: .3s;
    -o-transition: .3s;
    transition: .3s;
}

#blog-posts-area .pagination ul li.active a,
#blog-posts-area .pagination ul li:hover a {
    background-color: #000;
    color: #fff;
}

#blog-posts-area #sidebar .widget,
#single-blog-area #sidebar .widget {
    padding: 20px;
    background-color: #fff;
    margin-bottom: 40px;
}

#blog-posts-area #sidebar .widget .widget-heading,
#single-blog-area #sidebar .widget .widget-heading {
    font-size: 22px;
    margin-bottom: 20px;
    text-transform: capitalize;
    font-weight: 600;
}

#blog-posts-area #sidebar .search-form,
#single-blog-area #sidebar .search-form {
    width: 100%;
    background-color: #f2f2f2;
}

#blog-posts-area #sidebar .search-form input[type="search"],
#single-blog-area #sidebar .search-form input[type="search"] {
    padding: 15px;
    border: none;
    background: transparent;
    width: 80%;
    color: #000;
}

#blog-posts-area #sidebar .search-form button[type="submit"],
#single-blog-area #sidebar .search-form button[type="submit"] {
    border: none;
    color: #fff;
    float: right;
    padding: 14px;
    width: 20%;
    cursor: pointer;
    background: #000;
    border: 1px solid #000;
}

#blog-posts-area #sidebar .featured-post p,
#single-blog-area #sidebar .featured-post p {
    margin-top: 10px;
}

#blog-posts-area #sidebar .social .social-icons,
#single-blog-area #sidebar .social .social-icons {
    list-style: outside none none;
    padding: 0;
    margin: 0;
}

#blog-posts-area #sidebar .social .social-icons li,
#single-blog-area #sidebar .social .social-icons li {
    line-height: 22px;
    display: inline-block;
    margin-right: 8px;
}

#blog-posts-area #sidebar .social .social-icons li a,
#single-blog-area #sidebar .social .social-icons li a {
    padding-bottom: 8px;
    display: block;
    -webkit-transition: .3s;
    -o-transition: .3s;
    transition: .3s;
    width: 40px;
    height: 40px;
    line-height: 40px;
    border: 1px solid #aaaaaa;
    color: #444;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    font-size: 16px;
    text-align: center;
}

#blog-posts-area #sidebar .social .social-icons li a:hover,
#single-blog-area #sidebar .social .social-icons li a:hover {
    background-color: #000;
    color: #fff;
}

.single-blog-details blockquote {
    font-size: 14px;
    font-style: italic;
    line-height: 30px;
    background-color: #f2f2f2;
    margin-top: 15px;
    margin-bottom: 15px;
    border-left: 5px solid #000;
    padding: 10px 20px;
    margin: 0 0 20px;
}

.discussion-list-area {
    padding: 30px;
    margin-bottom: 50px;
    background-color: #fff;
}

.discussion-list-area .discussion-title {
    margin-bottom: 30px;
    font-weight: 600;
    font-size: 21px;
}

.discussion-list-area ul.discussion-list {
    list-style: none;
}

.discussion-list-area ul.discussion-list li.discussion-item {
    border-bottom: 1px solid #ddd;
    margin-bottom: 40px;
    padding-bottom: 25px;
}

.discussion-list-area ul.discussion-list li.discussion-item:last-child {
    border-bottom: none;
}

.discussion-meta h5 {
    margin-bottom: 0;
    font-weight: 600;
    font-size: 14px;
}

.discussion-meta p {
    font-size: 12px;
}

.discussion-reply-link {
    font-weight: 600;
}

.discussion-reply-link:hover {
    color: #000;
}

.row.reply-area {
    margin-left: 120px;
    margin-top: 40px;
}

.discussion-form-container {
    background-color: #fff;
    padding: 30px;
    margin-bottom: 50px;
}

.discussion-form-container h3 {
    margin-bottom: 20px;
    font-weight: 600;
    font-size: 21px;
}

.discussion-form-container .form-control {
    background: #f2f2f2;
    border: none;
    -webkit-border-radius: 0;
    border-radius: 0;
    font-size: 15px;
    height: 45px;
}

.discussion-form-container textarea.form-control {
    height: auto;
    resize: none;
}


/*============ 13. Site Mobile Responsive ============*/

/*Responsive Max Width 992px*/

@media screen and (max-width: 992px) {
    #banner .banner-text h1 {
        font-size: 50px;
    }
    #banner .banner-text #typed {
        font-size: 30px;
    }
    #banner .banner-text .typed-cursor {
        font-size: 30px;
    }
    #about .about-info-container .about-info {
        text-align: center;
        margin-bottom: 60px;
        padding-right: 15px;
    }
    #about .about-info-container .about-skills {
        padding-left: 15px;
    }
    #about .about-info-container .about-skills h3 {
        text-align: center;
    }
    #blog-posts-area .pagination {
        margin-bottom: 50px;
    }
    .wave {
        height: 25px;
    }
}


/*Max Width 768px*/

@media screen and (max-width: 767px) {
    #banner .banner-text h1 {
        font-size: 32px;
        line-height: 50px;
    }
    #banner .banner-text #typed {
        font-size: 20px;
    }
    #banner .banner-text .typed-cursor {
        font-size: 20px;
    }
    .navbar .navbar-brand img {
        width: 80%;
    }
    .navbar.navbar-dark .navbar-collapse {
        background-color: rgba(0, 0, 0, 0.9);
        text-align: center;
    }
    .navbar.navbar-dark .navbar-collapse li.nav-item {
        border-bottom: 1px solid #111;
        margin-bottom: 4px;
    }
    .navbar.navbar-dark .navbar-collapse li.nav-item:last-child {
        margin-bottom: 0;
        border-bottom: 0px;
    }
    .navbar.navbar-light {
        text-align: center;
    }
    .navbar.navbar-light li.nav-item {
        border-bottom: 1px solid #eee;
        margin-bottom: 4px;
    }
    .navbar.navbar-light li.nav-item:last-child {
        margin-bottom: 0;
        border-bottom: 0;
    }
    #contact .message-box h2 {
        margin-top: 50px;
        text-align: left !important;
    }
    .blog-banner h1 {
        font-size: 32px;
    }
    .blog-banner .bread-crumb a {
        font-size: 14px;
    }
    .row.reply-area {
        margin-left: 40px;
        margin-top: 20px;
    }
}


/*============ 13. Particles Background ============*/

#banner #particles-js {
    position: absolute;
    height: 100vh;
    width: 100%;
    left: 0;
    right: 0;
    z-index: 10;
}


.btn-custom {
    display: inline-block;
    padding: 15px 30px;
    font-size: 18px;
    font-weight: bold;
    color: #fff;
    background: linear-gradient(45deg, #007bff, #0056b3); /* Dégradé de couleur */
    border: none;
    border-radius: 5px;
    text-decoration: none;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Ombre portée */
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.btn-custom:hover {
    background: linear-gradient(45deg, #0056b3, #007bff); /* Inverse le dégradé au survol */
    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.2); /* Augmente l'ombre portée */
    transform: translateY(-3px); /* Effet de soulèvement */
}

.btn-custom:active {
    background: linear-gradient(45deg, #004494, #0056b3); /* Couleur de fond lors du clic */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Réduit l'ombre portée */
    transform: translateY(0); /* Retour à la position initiale */
}

.btn-custom::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.1); /* Fond semi-transparent */
    opacity: 0;
    transition: opacity 0.3s ease;
}

.btn-custom:hover::before {
    opacity: 1; /* Rend le fond semi-transparent visible au survol */
}

/* Animations */
.site-logo {
    width: 100%;
    height: auto;
    margin: 0 auto 20px;
    display: block;
    transition: all 0.3s ease-in-out;
    cursor: pointer;
    max-width: 140px; /* taille par défaut (mobile) */
}

@media (min-width: 768px) {
    .site-logo {
        max-width: 200px;
    }
}




/* Flottement léger */
@keyframes float {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
    100% { transform: translateY(0px); }
}



/* Animation au survol */
.site-logo:hover {
    transform: scale(1.05) rotate(2deg);
    filter: drop-shadow(0 5px 15px rgba(0,0,0,0.3));
}

/* Animation permanente */
.animate__float {
    animation: float 3s ease-in-out infinite;
}

/* Optionnel : Ajouter un effet au texte sous le logo */
.banner-text:hover h1 {
    text-shadow: 2px 2px 4px rgba(0,0,0,0.2);
    transition: text-shadow 0.3s ease;
}
.site-logo {
    will-change: transform; /* Optimise les animations */
    backface-visibility: hidden; /* Évite le scintillement */
}

.smaller-image {
    width: 30vw; /* Ajustez la largeur selon vos besoins */
    height: auto; /* Conserve les proportions de l'image */
}

.custom-icon {
    width: 64px; /* Ajustez la taille selon vos besoins */
    height: 64px;
    margin-bottom: 15px; /* Ajustez cette valeur pour augmenter ou diminuer l'espace */
}