body { margin: 0; padding: 0; font-family: 'Poppins', sans-serif; background-color: white; color: #ABB194; } .fullscreen { height: 100vh; width: 100vw; } .fullscreen-center { height: 100vh; width: 100vw; display: flex; align-items: center; justify-content: center; overflow-x: hidden; } .fullscreen-min { min-width: 1440px; width: 100%; height: 100%; } .absolute-center { position: absolute; width: 100vw; height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; } .text-style-title { color: white; font-weight: bold; text-align: center; font-size: 1rem; } .text-container { margin: 1rem; max-width: 16rem; text-align: center; color: white; } .put { background: rgba( 36, 36, 36, 0.6 ); box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 ); backdrop-filter: blur( 0px ); -webkit-backdrop-filter: blur( 0px ); width: 100%; height: 100%; } .container-carousel { height: 170vh; width: 100vw; background-color: white; color: white; display: flex; flex-direction: column; align-items: center; justify-content: center; margin-top: 50px; } .scroll-container { background-color: white; width: 100vw; height: 700px; overflow-x: auto; display: grid; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; -ms-overflow-style: none; } .scroll-container::-webkit-scrollbar { display: none; } .row-container { display: flex; flex-direction: row; width: 200vw; gap: 2.5rem; height: 100%; padding: 1rem; } .card-scroll { background-color: #2563eb; min-width: 300px; border-radius: 2rem; max-width: 300px; min-height: 598px; max-height: 598px; position: relative; } .titre-card { position: absolute; top: 55px; margin: 40px; color: white; width: 150px; z-index: 10; } .picture-scroll { width: 100%; height: 100%; border-radius: 2rem; object-fit: cover; } .button-scroll { width: 100%; height: 100%; background-color: #2563eb; min-width: 300px; border-radius: 2rem; border: none; } .bg-modal { background: rgba( 36, 36, 36, 0.6 ); height: 100vh; width: 100vw; position: fixed; top: 0; left: 0; display: none; flex-direction: column; align-items: flex-end; justify-content: flex-end; z-index: 100; backdrop-filter: blur( 0px ); -webkit-backdrop-filter: blur( 0px ); } .container-modal-activities { height: 4000px; width: 100%; background-color: white; display: flex; flex-direction: column; align-items: center; justify-content: center; border-top-right-radius: 40px; border-top-left-radius: 40px; overflow: auto; } .body-modal { background: rgb(175, 173, 173, 0.3); height: 4000px; width: 95%; margin: 20px; border-radius: 20px; display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: auto; } .title-modal { color: #484848; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 2.5rem; } .content-modal { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; } .part-modal { width: 100%; height: 100%; display: flex; flex-direction: column; align-items:flex-start; justify-content: flex-start; color: #484848; } .selection-container { background-color: white; height: 90vh; width: 100vw; display: flex; flex-direction: column; align-items: center; justify-content: center; margin-bottom: 120px; margin-top: 60px; } .para_info { background: #2563eb; display: none; } .card-selection { background-color: #fbbf24; height: 500px; min-width: 300px; width: 300px; position: relative; } .card-selection:hover { background-color: #fbbf24; cursor: pointer; } .card-selection:hover .para_info { display: block; color: white; font-size: 1.5rem; font-weight: 700; margin-top: 20px; margin-left: 20px; transform: scale(1.05); transition: transform 0.3s ease-in-out; } .title-selection { color: #484848; font-size: 4.5rem; font-weight: 700; margin-top: 4rem; margin-bottom: 4rem; margin-left: 30px; } .container-grid-selection { display: grid; grid-template-rows: 1fr; grid-template-columns: repeat(3, 1fr); width: 90%; min-width: 300px; min-height: 500px; height: 20%; gap: 1.5rem; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; margin-left: 20px; scrollbar-width: none; -ms-overflow-style: none; } .container-grid-selection::-webkit-scrollbar { display: none; } .container-text-selection { background-color: #ABB194; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 50vh; color: #484848; } .phone-logo { display: inline-block; width: 20px; height: 20px; margin-top: 2px; background-repeat: no-repeat; background-size: 100% 100%; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 1200'%3E%3Cpath fill='%239D9D9D' d='M600 0C268.629 0 0 268.629 0 600s268.629 600 600 600s600-268.629 600-600S931.371 0 600 0M384.375 238.33c12.362-.729 23.536 6.66 32.007 19.775l82.031 155.566c8.637 18.434 3.729 38.172-9.155 51.343l-37.573 37.573c-2.319 3.178-3.845 6.757-3.882 10.693c14.409 55.775 58.117 107.223 96.681 142.603c38.562 35.38 80.009 83.281 133.812 94.629c6.65 1.855 14.797 2.52 19.556-1.903l43.652-44.458c15.068-11.421 36.866-16.956 52.954-7.617h.732l148.021 87.378c21.728 13.619 23.979 39.944 8.423 55.957L849.683 941.016c-15.056 15.44-35.058 20.631-54.491 20.654c-85.948-2.575-167.158-44.759-233.862-88.11c-109.49-79.653-209.923-178.446-272.975-297.803c-24.182-50.05-52.589-113.91-49.878-169.774c.242-21.016 5.928-41.605 20.728-55.151l101.953-101.953c7.942-6.758 15.799-10.111 23.217-10.549' stroke-width='30' stroke='%239D9D9D'/%3E%3C/svg%3E"); } .text-style-selection { color: #484848; font-size: 1.5rem; text-align: center; font-weight: 700; margin-bottom: 1rem; } .centered-text-selection{ display: flex; align-items: center; justify-content: center; text-align: center; color: #484848; } .button-selection { border-radius: 1.5; height: 4rem; width: 12rem; margin-top: 2.5rem; color: #ABB194; background-color: white; display: flex; align-items: center; justify-content: center; font-size: 1rem; font-weight: bold; border: none; border-radius: 10px; } .main-new-agent { background-color: white; display: flex; flex-direction: row; height: auto; width: 100vw; align-items: center; justify-content: flex-start; } .new-container-agent { height: auto; width: 100%; background-color: #e5e7eb; display: flex; flex-direction: column; align-items: center; justify-content: center; } .new-container-agent h2 { color: #484848; margin-top: 1rem; text-align: center; font-weight: bold; font-size: 50px; } .new-container-agent p { color: #484848; margin-top: 30px; text-align: center; text-wrap: balance; } .new-container-agent button { background-color: #ABB194; width: 140px; height: 40px; margin-top: 2rem; border-radius: 1rem; border: none; } .div-picture-agent { width: 300px; margin-top: 2rem; margin-bottom: 2rem; display: flex; align-items: center; justify-content: center; } .picture-shadow { filter: drop-shadow(0 10px 8px rgba(0, 0, 0, 0.04)) drop-shadow(0 4px 3px rgba(0, 0, 0, 0.1)); } .div-picture-agent2 { width: 300px; margin-top: 2rem; margin-bottom: 2rem; display: none; align-items: center; justify-content: center; } .contact-line { margin: 5px 0; color: white; display: flex; align-items: center; justify-content: center; width: 100%; } .contact-link { display: flex; align-items: center; gap: 10px; color: white; text-decoration: none; height: 20px; } .mdi-light--phone { display: inline-block; width: 20px; height: 20px; background-repeat: no-repeat; background-size: 100% 100%; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M19.5 22a1.5 1.5 0 0 0 1.5-1.5V17a1.5 1.5 0 0 0-1.5-1.5c-1.17 0-2.32-.18-3.42-.55a1.51 1.51 0 0 0-1.52.37l-1.44 1.44a14.77 14.77 0 0 1-5.89-5.89l1.43-1.43c.41-.39.56-.97.38-1.53c-.36-1.09-.54-2.24-.54-3.41A1.5 1.5 0 0 0 7 3H3.5A1.5 1.5 0 0 0 2 4.5C2 14.15 9.85 22 19.5 22M3.5 4H7a.5.5 0 0 1 .5.5c0 1.28.2 2.53.59 3.72c.05.14.04.34-.12.5L6 10.68c1.65 3.23 4.07 5.65 7.31 7.32l1.95-1.97c.14-.14.33-.18.51-.13c1.2.4 2.45.6 3.73.6a.5.5 0 0 1 .5.5v3.5a.5.5 0 0 1-.5.5C10.4 21 3 13.6 3 4.5a.5.5 0 0 1 .5-.5'/%3E%3C/svg%3E"); } .foundation--mail { display: inline-block; width: 20px; height: 20px; background-repeat: no-repeat; background-size: 100% 100%; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill='%23fff' d='M85.944 20.189H14.056a2.56 2.56 0 0 0-2.556 2.557v5.144c0 .237.257.509.467.619l37.786 21.583a.63.63 0 0 0 .318.083a.63.63 0 0 0 .324-.088L87.039 28.53c.206-.115.752-.419.957-.559c.248-.169.504-.322.504-.625v-4.601a2.56 2.56 0 0 0-2.556-2.556m2.237 15.457a.64.64 0 0 0-.645.004L66.799 47.851a.637.637 0 0 0-.145.985l20.74 22.357a.63.63 0 0 0 .467.204a.64.64 0 0 0 .639-.639V36.201a.64.64 0 0 0-.319-.555M60.823 51.948a.636.636 0 0 0-.791-.118l-8.312 4.891a3.24 3.24 0 0 1-3.208.021l-7.315-4.179a.64.64 0 0 0-.751.086L12.668 78.415a.64.64 0 0 0 .114 1.02c.432.254.849.375 1.273.375h71.153a.64.64 0 0 0 .585-.385a.64.64 0 0 0-.118-.689zm-26.489-2.347a.64.64 0 0 0-.115-1.023L12.453 36.146a.638.638 0 0 0-.953.556v32.62a.637.637 0 0 0 1.073.468z' stroke-width='2.5' stroke='%23fff'/%3E%3C/svg%3E"); } .mdi-black--phone { display: inline-block; width: 20px; height: 20px; background-repeat: no-repeat; background-size: 100% 100%; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M19.5 22a1.5 1.5 0 0 0 1.5-1.5V17a1.5 1.5 0 0 0-1.5-1.5c-1.17 0-2.32-.18-3.42-.55a1.51 1.51 0 0 0-1.52.37l-1.44 1.44a14.77 14.77 0 0 1-5.89-5.89l1.43-1.43c.41-.39.56-.97.38-1.53c-.36-1.09-.54-2.24-.54-3.41A1.5 1.5 0 0 0 7 3H3.5A1.5 1.5 0 0 0 2 4.5C2 14.15 9.85 22 19.5 22M3.5 4H7a.5.5 0 0 1 .5.5c0 1.28.2 2.53.59 3.72c.05.14.04.34-.12.5L6 10.68c1.65 3.23 4.07 5.65 7.31 7.32l1.95-1.97c.14-.14.33-.18.51-.13c1.2.4 2.45.6 3.73.6a.5.5 0 0 1 .5.5v3.5a.5.5 0 0 1-.5.5C10.4 21 3 13.6 3 4.5a.5.5 0 0 1 .5-.5'/%3E%3C/svg%3E"); } .container-form { height: 200vh; width: 100vw; display: flex; background-color: white; } .background-form { background-image: url('/assets/ilemaurice/fondmer.jpg'); width: 100vw; height: 500px; display: flex; align-items: flex-end; justify-content: center; position: relative; overflow: visible; } .form-container { background-color: #ABB194; opacity: 0.8; height: 1200px; width: 100%; border-radius: 1.5rem; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; z-index: 10; margin-bottom: -700px; } .title-form { text-align: center; color: white; font-size: 2.25rem; margin-top: 2.5rem; font-weight: bold; width: 100%; } .block-form-first-line { display: flex; width: 100%; height: 125px; flex-direction: column; justify-content: flex-start; align-items: center; margin-bottom: 40px; margin-top: 50px; } .child-block-form { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; margin-top: 10px; } .input-form { background-color: white; width: 256px; height: 4rem; border-radius: 0.125rem; border: none; z-index: 100; } .input-form-smaller { background-color: white; width: 256px; height: 4rem; border-radius: 0.125rem; border: none; } .container-form-button { display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-end; margin-top: 200px; } .fluent-emoji-high-contrast--plus { display: inline-block; position: absolute; z-index: 20; width: 40px; height: 40px; bottom: 0; margin: 10px; right: 0; background-repeat: no-repeat; background-size: 100% 100%; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='%23fff' d='M19.05 5.06c0-1.68-1.37-3.06-3.06-3.06s-3.07 1.38-3.06 3.06v7.87H5.06C3.38 12.93 2 14.3 2 15.99c0 1.68 1.38 3.06 3.06 3.06h7.87v7.86c0 1.68 1.37 3.06 3.06 3.06c1.68 0 3.06-1.37 3.06-3.06v-7.86h7.86c1.68 0 3.06-1.37 3.06-3.06c0-1.68-1.37-3.06-3.06-3.06h-7.86z' stroke-width='1' stroke='%23fff'/%3E%3C/svg%3E"); } @media (min-width: 350px) { .container-carousel { height: 125vh; } } @media (min-width: 425px ) { .container-carousel { height: 100vh; } } @media (min-width: 640px) { .selection-container { margin-bottom: 0px; margin-top: 0px; } .text-style-title { font-size: 30px; text-align: center; } .text-style-selection { font-size: 3rem; } .centered-text-selection{ width: 500px; } .container-form { height: 120vh; } .form-container { height: 700px; width: 600px; margin-bottom: -500px; } .title-form { width: 24rem; } .block-form-first-line{ flex-direction: row; justify-content: center; align-items: flex-start; margin-top: 20px; margin-bottom: 0px; } .child-block-form { margin-left: 1.25rem; } .input-form-smaller { width: 116px; } .container-form-button { margin-left: 1.25rem; margin-top: 0px; } .container-modal-activities { height: 80%; width: 80%; justify-content: center; align-items: center; border-radius: 40px; } .bg-modal { justify-content: center; align-items: center; } .div-picture-agent { width: 600px; } .div-picture-agent2 { width: 600px; } } @media (min-width: 1024px) { .container-grid-selection { width: 948px; height: 30%; grid-template-columns: repeat(3, 1fr); } .new-container-agent { justify-content: flex-start; height: 60%; width: 80%; } .new-container-agent p { text-wrap: balance; width: 500px; } .div-picture-agent { display: none; } .div-picture-agent2 { display: flex; width: 300px; margin-top: 300px; margin-left: -150px; } .main-new-agent { height: 100vh; } } @media (min-width: 1280px) { .text-container { max-width: 56rem; } .content-modal { flex-direction: row; } .part-modal { width: 50%; height: 100%; display: flex; flex-direction: column; align-items:flex-start; justify-content: flex-start; color: #484848; margin-left: 30px; } .new-container-agent { height: 60%; } .new-container-agent h2 { margin-top: 7rem; } .div-picture-agent2 { margin-left: -200px; } } @media (min-width: 1536px) { .text-style-title { font-size: 5.625rem; } } @keyframes bounce { 0%, 100% { transform: translateY(-25%); animation-timing-function: cubic-bezier(0.8, 0, 1, 1); } 50% { transform: translateY(0); animation-timing-function: cubic-bezier(0, 0, 0.2, 1); } } .translate-x-52 { transform: translateX(13rem); } .transition-all { transition: all 0.3s ease-in-out; } .opacity-0 { opacity: 0; } .opacity-100 { opacity: 1; } .invisible { visibility: hidden; } .visible { visibility: visible; }