:root {
       --indrive-orange: #c1f11d;
       --indrive-dark: #3f3f3f;
       --indrive-light: #fffee9;
       --indrive-gray: #6C757D;
       --indrive-white: #FFFFFF;
       --text-dark: #141414;
       --text-light: #ffffff;
   }

   /* Add the font-face declarations at the top of your CSS */
   @font-face {
       font-family: 'Agrandir';
       src: url('./assets/font/Agrandir/Agrandir-Regular.otf') format('opentype');
       font-weight: normal;
       font-style: normal;
       font-display: swap;
   }
   
   @font-face {
       font-family: 'Agrandir';
       src: url('./assets/font/Agrandir/Agrandir-TextBold.otf') format('opentype');
       font-weight: bold;
       font-style: normal;
       font-display: swap;
   }
   

   :root {
       --indrive-orange: #c1f11d;
       --indrive-dark: #3f3f3f;
       --indrive-light: #fffee9;
       --indrive-gray: #6C757D;
       --indrive-white: #FFFFFF;
       --text-dark: #333333;
       --text-light: #ffffff;
   }
   
   * {
       margin: 0;
       padding: 0;
       box-sizing: border-box;
       font-family: 'Agrandir', sans-serif;
   }
   
   /* Rest of your CSS remains the same */
   body {
       background-color: var(--indrive-light);
       color: var(--text-dark);
       line-height: 1.6;
   }
   
   
   .container {
       width: 90%;
       /*max-width: 1200px;*/
       margin: 0 auto;
       padding: 0 15px;
   }
   
   /* Animations */
   @keyframes fadeIn {
       from { opacity: 0; }
       to { opacity: 1; }
   }

   @keyframes slideUp {
       from {
           transform: translateY(50px);
           opacity: 0;
       }
       to {
           transform: translateY(0);
           opacity: 1;
       }
   }

   @keyframes scaleHover {
       from {
           transform: scale(1);
       }
       to {
           transform: scale(1.05);
       }
   }

   /* Hero Section */
   .hero {
       padding: 100px 0 80px;
       background: linear-gradient(135deg, #fffee9 0%, #fffee9);
       color: var(--text-light);
       text-align: center;
   }
   
   .logo {
       font-size: 2.5rem;
       font-weight: bold;
       color: var(--indrive-orange);
       margin-bottom: 10px;
       animation: fadeIn 1s ease-out;
   }
   
   .hero h1 {
       font-size: 3rem;
       margin-bottom: 20px;
       animation: fadeIn 1s ease-out 0.3s;
       animation-fill-mode: backwards;
       color: #141414;
   }
   
   
   .hero p {
       font-size: 1.2rem;
       margin-bottom: 30px;
       color: #141414;
       max-width: 700px;
       margin-left: auto;
       margin-right: auto;
       animation: fadeIn 1s ease-out 0.6s;
       animation-fill-mode: backwards;
   }
   
   .cta-button {
       display: inline-block;
       background-color: var(--indrive-orange);
       color: var(--text-dark);
       padding: 12px 30px;
       border-radius: 16px;
       font-weight: 600;
       text-decoration: none;
       /*transition: all 0.3s;*/
       margin-bottom: 50px;
       opacity: 0; /* caché initialement */
       animation: fadeIn 1s ease-out 1s forwards; /* 1s de délai */
   }

   @keyframes fadeIn {
        from { opacity: 0; }
        to { opacity: 1; }
    }
   
   .cta-button:hover {
       background-color: #a8d318;
       /*transform: translateY(-3px) scale(1.05);*/
       box-shadow: 0 10px 20px rgba(193,241,29,0.2);
       /*animation: scaleHover 0.3s ease-out;*/
   }
   
   .hero-image {
       border-radius: 10px;
       overflow: hidden;
       /* box-shadow: 0 20px 40px rgba(0,0,0,0.3); */
       max-width: 900px;
       margin: 0 auto;
       animation: fadeIn 1s ease-out 1.2s;
       animation-fill-mode: backwards;
   }
   
   .hero-image img {
       width: 100%;
       height: auto;
       display: block;
   }
   
   /* Contact Form */
   .contact {
       padding: 80px 0;
       background-color: var(--indrive-light);
       color: var(--text-dark);
       text-align: center;
       position: relative;
   }

   .contact .container{
       background-image: url(https://indrive.com/images/background/tag.svg);
       background-size: 100% auto; /* Adjust percentage to make bigger/smaller */
       background-position: center;
       background-repeat: no-repeat;
       padding: 80px 0; /* Maintain section padding */
   }
   
   
   .contact-container {
       max-width: 600px;
       margin: 0 auto;
       background-color: rgba(255, 254, 233, 0.9);
       border-radius: 10px;
       padding: 50px;
       animation: fadeIn 1s ease-out;
       position: relative;
       z-index: 1;
       border: 1px solid rgba(0,0,0,0.1);
       box-shadow: 0 10px 30px rgba(0,0,0,0.1);
   }
   
   .contact h2 {
       font-size: 2.5rem;
       margin-bottom: 20px;
       color: var(--text-dark);
   }
   
   .contact h2 span {
       color: var(--indrive-orange);
   }
   
   .contact p {
       margin-bottom: 30px;
       color: var(--text-dark);
       font-size: 20px;
       line-height: 28px;
   }
   
   .form-group {
       margin-bottom: 20px;
       text-align: left;
       animation: slideUp 0.8s ease-out;
       animation-fill-mode: backwards;
   }
   
   .form-group:nth-child(1) { animation-delay: 0.2s; }
   .form-group:nth-child(2) { animation-delay: 0.3s; }
   .form-group:nth-child(3) { animation-delay: 0.4s; }
   .form-group:nth-child(4) { animation-delay: 0.5s; }
   
   .form-group label {
       display: block;
       margin-bottom: 8px;
       color: var(--text-dark);
       font-weight: 500;
   }
   
   .form-group input,
   .form-group select,
   .form-group textarea {
       width: 100%;
       padding: 15px;
       background-color: rgba(255,255,255,0.9);
       border: 1px solid rgba(0,0,0,0.1);
       border-radius: 8px;
       color: var(--text-dark);
       font-size: 1rem;
       transition: all 0.3s;
   }
   
   .form-group input::placeholder,
   .form-group textarea::placeholder {
       color: rgba(0,0,0,0.4);
   }
   
   .form-group input:focus,
   .form-group select:focus,
   .form-group textarea:focus {
       outline: none;
       border-color: var(--indrive-orange);
       box-shadow: 0 0 0 3px rgba(193, 241, 29, 0.2);
   }
   
   .form-group textarea {
       min-height: 120px;
   }
   
   .checkbox-group {
       display: flex;
       align-items: center;
       gap: 10px;
       margin-bottom: 20px;
       animation: slideUp 0.8s ease-out 0.6s;
       animation-fill-mode: backwards;
   }
   
   .checkbox-group input {
       width: auto;
   }
   
   .checkbox-group label {
       margin-bottom: 0;
       color: var(--text-dark);
   }
   
   .submit-button {
       width: 100%;
       font-size: 1.1rem;
       padding: 15px;
       background-color: var(--indrive-orange);
       border: none;
       cursor: pointer;
       border-radius: 8px;
       color: var(--text-dark);
       font-weight: 600;
       transition: all 0.3s;
       /*animation: fadeIn 1s ease-out 0.7s;
       animation-fill-mode: backwards;*/
   }
   
   .submit-button:hover {
       background-color: #a8d318;
       transform: scale(1.02);
       animation: scaleHover 0.3s ease-out;
   }
   
   /* Footer */
   footer {
       background-color: var(--indrive-dark);
       color: var(--text-light);
       padding: 40px 0 20px;
       text-align: center;
   }

   .highlight {
       background-color: transparent;
       background-image: url("data:image/svg+xml,%3Csvg width='388' height='64' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M386 24c-64 3-211 8-341 0 61 6 174 14 300 14-37 2-148 4-343-6' stroke='%23C1F11D' stroke-width='48'/%3E%3C/svg%3E");
       padding: 0 5px 10px;
       background-repeat: no-repeat;
       background-position: 50%;
       background-size: 100% 70%;
       color: var(--main-dark);
   }
   
   .social-icons {
       display: flex;
       justify-content: center;
       gap: 20px;
       margin-bottom: 30px;
       animation: fadeIn 1s ease-out;
   }
   
   .social-icons a {
       color: var(--text-light);
       font-size: 1.2rem;
       transition: all 0.3s;
   }
   
   .social-icons a:hover {
       color: var(--indrive-orange);
       transform: scale(1.2);
       animation: scaleHover 0.3s ease-out;
   }
   
   .copyright {
       color: rgba(255,255,255,0.5);
       font-size: 0.9rem;
       animation: fadeIn 1s ease-out 0.3s;
       animation-fill-mode: backwards;
   }
   
   /* Responsive Styles */
   @media (max-width: 992px) {
       .resource-image {
           order: -1;
       }
   }
   
   @media (max-width: 768px) {
       .hero h1 {
           font-size: 2.5rem;
       }
       
       .hero, .contact {
           padding: 60px 0;
       }
       
       .contact-container {
           padding: 30px;
       }

       .contact .container{
           background-image: url(https://indrive.com/images/background/tag.svg);
           background-size: 100% auto; /* Adjust percentage to make bigger/smaller */
           background-position: center;
           background-repeat: no-repeat;
           padding: 10px 0; /* Maintain section padding */
       }
   }
   
   @media (max-width: 576px) {
       .hero h1 {
           font-size: 2rem;
       }
       
       .logo {
           font-size: 2rem;
       }
       
       .contact h2 {
           font-size: 2rem;
       }

       .contact .container{
           background-image: url(https://indrive.com/images/background/tag.svg);
           background-size: 100% auto; /* Adjust percentage to make bigger/smaller */
           background-position: center;
           background-repeat: no-repeat;
           padding: 10px 0; /* Maintain section padding */
       }
   }

   /* Style général du footer */
    /* Style des icônes circulaires */
    .social-icons.custom-icons a {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    background-color: var(--indrive-orange);
    border-radius: 50%;
    transition: all 0.3s ease;
    color: #000000;
    text-decoration: none;
    }

    /* Icône Font Awesome */
    .social-icons.custom-icons i {
    font-size: 1.2rem;
    }

    /* Icône X personnalisée en SVG */
    .icon-x-svg {
    width: 15px;
    height: 20px;
    display: block;
    }

    /* Hover effect identique */
    .social-icons.custom-icons a:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    }