*, *:after, *:before { box-sizing: border-box; border: 0; padding: 0; margin: 0; outline: 0; } :root { --black: #000; --gray-d: #010101; --gray: #121212; --gray-l: #2d2d2d; --cream: #F4F3E8; --green: #45CE99; --green-l: #A2E7CC; --text-font: 'Lato', Tahoma, sans-serif; --title-font: var(--text-font); } html { scroll-behavior: smooth; scroll-padding-top: 90px; } body { font: 16px/1.5 var(--text-font); color: var(--gray-d); padding-top: 90px; } .dark { color: #fff; } a, button, label, summary, input[type="submit"] { cursor: pointer; transition: all .3s ease-out; } a { text-decoration: none; } input, select, textarea { font: inherit; color: inherit; text-decoration: none; } h2, h3, h4, h5, h6 { font-family: var(--title-font); font-weight: normal; } img { display: block; width: auto; max-width: 100%; height: auto; } .wrap { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 20px; } .row { display: flex; flex-wrap: wrap; --gap-x: 0; --gap-y: 0; width: calc( 100% + var(--gap-x) ); gap: var(--gap-y) 0; overflow-x: hidden; } .row.m-gap { --gap-x: 20px; --gap-y: 20px; } .col { width: calc( 100% - var(--gap-x) ); margin-right: var(--gap-x ); position: relative; } .col.w-1of2 { width: calc( 50% - var(--gap-x) ); } .col.w-1of3 { width: calc( 33.33% - var(--gap-x) ); } .col.w-2of3 { width: calc( 66.67% - var(--gap-x) ); } @media ( min-width: 600px ){ .col.w-1of2-tb { width: calc( 50% - var(--gap-x) ); } .col.w-1of3-tb { width: calc( 33.33% - var(--gap-x) ); } .col.w-2of3-tb { width: calc( 66.67% - var(--gap-x) ); } } @media ( min-width: 900px ){ .col.w-1of2-dt { width: calc( 50% - var(--gap-x) ); } .col.w-1of3-dt { width: calc( 33.33% - var(--gap-x) ); } .col.w-2of3-dt { width: calc( 66.67% - var(--gap-x) ); } } /* slick */ .slick-slider{position:relative;display:block;box-sizing:border-box;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-touch-callout:none;-khtml-user-select:none;-ms-touch-action:pan-y;touch-action:pan-y;-webkit-tap-highlight-color:transparent}.slick-list{position:relative;display:block;overflow:hidden;margin:0;padding:0}.slick-list:focus{outline:0}.slick-list.dragging{cursor:pointer;cursor:hand}.slick-slider .slick-list,.slick-slider .slick-track{-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);-o-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}.slick-track{position:relative;top:0;left:0;display:block;margin-left:auto;margin-right:auto}.slick-track:after,.slick-track:before{display:table;content:''}.slick-track:after{clear:both}.slick-loading .slick-track{visibility:hidden}.slick-slide{display:none;float:left;height:100%;min-height:1px}[dir=rtl] .slick-slide{float:right}.slick-slide img{display:block}.slick-slide.slick-loading img{display:none}.slick-slide.dragging img{pointer-events:none}.slick-initialized .slick-slide{display:block}.slick-loading .slick-slide{visibility:hidden}.slick-vertical .slick-slide{display:block;height:auto;border:1px solid transparent}.slick-arrow.slick-hidden{display:none}.slick-track{ display: flex !important; }.slick-slide { height: inherit !important; } /* project */ #head { position: fixed; top: 0; left: 0; width: 100%; height: 90px; background: #000; z-index: 99; } #head .wrap { height: 90px; display: flex; justify-content: space-between; align-items: center; position: relative; } #logo { width: 212px; height: 50px; } #logo > a { display: block; width: 100%; height: 100%; font-size: 1px; color: transparent; background: url(../img/vinna.svg) no-repeat center / contain; } #nav-cb { display: none; } #nav-label { display: block; width: 50px; height: 50px; background: var(--green) url("data:image/svg+xml,%3Csvg width='25' height='17' viewBox='0 0 25 17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.91191 16.4412H23.0884C23.8163 16.4412 24.4119 15.8456 24.4119 15.1177C24.4119 14.3897 23.8163 13.7941 23.0884 13.7941H1.91191C1.18397 13.7941 0.588379 14.3897 0.588379 15.1177C0.588379 15.8456 1.18397 16.4412 1.91191 16.4412ZM1.91191 9.82354H23.0884C23.8163 9.82354 24.4119 9.22795 24.4119 8.50001C24.4119 7.77207 23.8163 7.17648 23.0884 7.17648H1.91191C1.18397 7.17648 0.588379 7.77207 0.588379 8.50001C0.588379 9.22795 1.18397 9.82354 1.91191 9.82354ZM0.588379 1.88237C0.588379 2.61031 1.18397 3.2059 1.91191 3.2059H23.0884C23.8163 3.2059 24.4119 2.61031 24.4119 1.88237C24.4119 1.15443 23.8163 0.558838 23.0884 0.558838H1.91191C1.18397 0.558838 0.588379 1.15443 0.588379 1.88237Z' fill='black'/%3E%3C/svg%3E%0A") no-repeat center; border-radius: 50%; font-size: 1px; color: transparent; } #nav-label:hover { background-color: var(--green-l); } #nav { position: absolute; top: 90px; right: 20px; padding: 20px; background-color: #000; width: 200px; clip-path: polygon( 0% 0%, 110% 0%, 110% 0%, 0% 0% ); transition: all .3s ease-out; box-shadow: 5px 5px 10px rgba( 0 0 0 / 50% ); } #nav-cb:checked ~ #nav { clip-path: polygon( 0% 0%, 110% 0%, 110% 100%, 0% 100% ); } #nav ul { list-style: none; } #nav li { text-align: right; } #nav li + li { margin-top: .25rem; } #nav a { color: #fff; display: inline-block; padding-bottom: 4px; position: relative; } #nav a:hover { color: var(--green-l); } #nav a::after { content: ''; display: block; width: 100%; height: 0; border-top: 2px solid var(--green-l); position: absolute; bottom: 0; right: 0; transition: all .3s ease-out; transform-origin: 100% 50%; transform: scaleX(0); } #nav a:hover::after { transform: scaleX(1); } @media ( max-width: 319px ){ #logo { width: 106px; } } #hero { background: #000; height: 100vw; max-height: calc( 100vh - 110px ); display: flex; align-items: center; position: relative; } #hero.is-inview { background: #000 url(../img/hero.webp) no-repeat center / cover; } #hero::after { content: ''; position: absolute; inset: 0; background: rgba( 0 0 0 / 60% ) url("data:image/svg+xml,%3Csvg width='10' height='10' viewBox='0 0 10 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='1' height='10' fill='black'/%3E%3Crect width='10' height='1' fill='black'/%3E%3C/svg%3E%0A") repeat center; z-index: 2; } #hero .wrap { position: relative; z-index: 3; } #hero h2 { color: var(--green); text-align: center; text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); font-size: 4.25rem; line-height: 1; max-width: 680px; margin: 0 auto; } #hero p { text-align: center; font-size: 1.25rem; font-style: normal; max-width: 360px; margin: 20px auto 0; } #hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; } @media ( max-width: 767px ){ #hero h2 { font-size: 3.5rem; } #hero p { font-size: 1.125rem; max-width: 340px; } } @media ( max-width: 599px ){ #hero h2 { font-size: 2.5rem; max-width: 420px; } #hero p { font-size: 1rem; max-width: 300px; } } @media ( max-width: 439px ){ #hero h2 { font-size: 2rem; } } #vision-and-mission { padding: 60px 0; } #vision-and-mission .wrap { position: relative; } #vision-and-mission h2 { width: calc( 100% - 80px ); aspect-ratio: 13/1; margin-bottom: 40px; font-size: 1px; color: transparent; position: absolute; top: -40px; left: 40px; z-index: 2; } #vision-and-mission.is-inview h2 { background: url(../img/vision-mission.webp) no-repeat center / contain;} #vision-and-mission .col { background: var(--green); padding: 180px 60px 60px; border-radius: 20px; } #vision-and-mission .col:first-of-type h3 span { display: block; } #vision-and-mission h3 { font-size: 2rem; line-height: 1; } #vision-and-mission p { margin-top: 20px; } @media ( max-width: 1199px ){ #vision-and-mission .col { background: var(--green); padding: 120px 40px 40px; border-radius: 20px; } } @media ( max-width: 899px ){ #vision-and-mission h3 { font-size: 1.75rem; } } @media ( max-width: 599px ){ #vision-and-mission h2 { aspect-ratio: 3/1; z-index: 2; } #vision-and-mission.is-inview h2 { background-image: url(../img/vision-mission-mb.webp); } #vision-and-mission .col { background: var(--green); padding: 80px 20px 20px; border-radius: 20px; } #vision-and-mission .col:first-of-type { padding-top: 160px; } #vision-and-mission h3 { font-size: 1.5rem; } } @media ( max-width: 479px ){ #vision-and-mission .col:first-of-type { padding-top: 140px; } } @media ( max-width: 359px ){ #vision-and-mission .col:first-of-type { padding-top: 120px; } } #about { padding: 60px 0; background: #000; } #about img { border-radius: 20px; } #about h2 { position: relative; font-size: 3rem; padding-left: 120px; color: var(--green); font-weight: 400; font-style: italic; line-height: 1; margin-top: 20px; margin-bottom: 60px; } #about h2::before { content: ''; display: block; position: absolute; width: clamp( 280px, 40vw, 460px ); aspect-ratio: 1.35; background: url("data:image/svg+xml,%3Csvg width='467' height='343' viewBox='0 0 467 343' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M466.485 0V294.742C455.801 311.441 443.76 327.274 430.527 342.076H414.201L414.093 127.689V116.086C414.093 115.489 414.093 115.001 414.147 114.622C414.147 114.567 414.093 114.513 414.093 114.405C414.635 96.7832 414.201 89.7346 414.201 73.089V52.3226H115.903C81.0288 52.3226 52.3379 81.0593 52.3379 115.977V342.13H0V115.977C0 52.2141 52.2294 0.108433 115.903 0.108433H466.485V0Z' fill='%23F4F3E8'/%3E%3Cpath d='M233.27 241.056C243.903 241.056 252.524 232.439 252.524 221.808C252.524 211.178 243.903 202.56 233.27 202.56C222.636 202.56 214.016 211.178 214.016 221.808C214.016 232.439 222.636 241.056 233.27 241.056Z' fill='%2345CE99'/%3E%3C/svg%3E%0A") no-repeat 0 0 / contain; left: 40px; bottom: 0; } #about p + p { margin-top: 20px; } @media ( max-width: 599px ){ #about h2 { font-size: 2rem; padding-left: 100px; margin-bottom: 40px; } #about h2::before { width: clamp( 240px, 40vw, 460px ); left: 20px; } } #services { padding: 60px 0; } #services-intro { position: relative; padding-bottom: 40px; } #services-intro h2 { display: inline-flex; align-items: center; justify-content: center; width: 180px; height: 60px; background: var(--green); border-radius: 30px; font-size: 2rem; font-style: italic; } #services-intro h3 { font-size: 3.25rem; line-height: 1; font-style: italic; margin-top: 20px; } #services-intro p { margin-top: 20px; } #services-arrow { position: absolute; bottom: 0; width: 100%; } #services-arrow ul { list-style: none; display: flex; } #services-arrow li { flex: 1 1 100%; } #services-arrow button { font-size: 1px; color: transparent; display: block; width: 100%; height: 8px; background: var(--green-l); transition: all .3s ease-out; } #services-arrow .slick-active button { background: var(--green); } #services-loop { margin: 0 -10px; } .service { padding: 140px 40px 40px; border-radius: 20px; margin: 0 10px; } .is-inview .service.data-science { background: var(--gray-d) url(../img/data-science.svg) no-repeat 40px 40px; } .is-inview .service.machive-learning { background: var(--gray-l) url(../img/machine-learning.svg) no-repeat 40px 40px; } .is-inview .service.predictive-analytics { background: var(--gray-d) url(../img/predictive-analytics.svg) no-repeat 40px 40px; } .is-inview .service.generative-ai { background: var(--gray-l) url(../img/generative-ai.svg) no-repeat 40px 40px; } .is-inview .service.data-strategy { background: var(--gray-d) url(../img/data-strategy.svg) no-repeat 40px 40px; } .is-inview .service.deep-learning { background: var(--gray-l) url(../img/deep-learning.svg) no-repeat 40px 40px; } .service h4 { color: var(--green); font-size: 1.5rem; line-height: 1; } .service p { margin-top: 20px; } #services-loop .slick-list { padding-right: 60px; } @media ( max-width: 899px ){ #services-intro h2 { height: 40px; border-radius: 20px; font-size: 1.5rem; } #services-intro h3 { font-size: 2.25rem; } } @media ( max-width: 599px ){ .service { padding: 100px 20px 20px; background-position: 20px 20px !important; } #services-loop .slick-list { padding-right: 40px; } } #team { padding: 60px 0; position: relative; } #team h2 { position: absolute; top: 50%; left: 0; width: 100%; aspect-ratio: 12/1; font-size: 1px; color: transparent; z-index: 2; } #team.is-inview h2 { background: url(../img/meet-our-team.webp) no-repeat center / contain; } #team .wrap { position: relative; z-index: 1; } #team-loop { margin: 0 -20px; } .person { padding: 0 20px; } .person img { display: block; border-radius: 150px; margin: 0 auto; } .person figcaption { margin-top: 20px; text-align: center; font-style: normal; } #team-loop:has( .slick-arrow ) { padding-bottom: 60px; } #team-loop .slick-arrow { position: absolute; bottom: 0; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--gray-l); font-size: 1px; color: transparent; } #team-loop .slick-prev { left: 20px; background: var(--gray-l) url("data:image/svg+xml,%3Csvg width='43' height='43' viewBox='0 0 43 43' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.88027 19.8968L23.6099 2.16724L21.4273 2.28882e-05L0 21.4273L21.4273 42.8547L23.6099 40.6875L5.88027 22.9579L42.8547 22.9579V19.8968L5.88027 19.8968Z' fill='%2345CE99'/%3E%3C/svg%3E%0A") no-repeat center / 50%; } #team-loop .slick-next { right: 20px; background: var(--gray-l) url("data:image/svg+xml,%3Csvg width='43' height='43' viewBox='0 0 43 43' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M36.9742 22.9578L19.2446 40.6874L21.4272 42.8547L42.8545 21.4273L21.4272 0L19.2446 2.16722L36.9742 19.8968H-0.000160217V22.9578H36.9742Z' fill='%2345CE99'/%3E%3C/svg%3E%0A") no-repeat center / 50%; } #why-vinna { background: var(--gray); padding: 60px 0; } #why-vinna .intro h2 { font-size: 3.25rem; line-height: 1; color: var(--green); font-style: italic; } #why-vinna .attributes { margin-top: 40px; } #why-vinna .attribute { border: 1px solid var(--green); padding: 40px; border-radius: 20px; } #why-vinna .attribute h3 { font-size: 1.5rem; font-style: italic; } #why-vinna .attribute p { margin-top: 20px; margin-top: .5rem; } @media ( min-width: 600px ){ #why-vinna .intro { display: flex; align-items: flex-start; gap: 40px; } #why-vinna .intro h2 { flex: 0 0 auto; } #why-vinna .intro p { flex: 1 1 100%; } #why-vinna .attributes { display: flex; flex-wrap: wrap; gap: 40px; } #why-vinna .attribute { width: calc( 50% - 20px ); } } @media ( max-width: 599px ){ #why-vinna .intro p { margin-top: 20px; } #why-vinna .attribute { padding: 20px; } #why-vinna .attribute + .attribute { margin-top: 20px; } } #contact-us { background: var(--gray-d); padding: 60px 0; } #contact-us h2 { font-size: 3.25rem; line-height: 1; color: var(--green); } #contact-us p { margin-top: 20px; } #contact-us .form {} #contact-us .form .field-wrap {} #contact-us .form .field-wrap:not( .field-submit ) { background: #fff; display: flex; align-items: center; padding: 18px 20px; border-radius: 30px; } #contact-us .form .field-wrap label { text-transform: uppercase; flex: 0 0 auto; padding-right: 12px; border-right: 1px solid var(--gray-d); margin-right: 12px; color: var(--gray-d); font-size: .875rem; } #contact-us .form .field-wrap label abbr { text-decoration: none; } #contact-us .form .field-wrap:not( .field-submit ) input { flex: 1 1 100%; color: var(--gray-d); } #contact-us .form .field-wrap.field-submit input { display: block; width: 100%; height: 58px; border: 1px solid var(--green); background: var(--green); color: var(--gray-d); text-align: center; line-height: 58px; border-radius: 30px; font-size: .875rem; font-weight: 700; text-transform: uppercase; } #contact-us .form .field-wrap.field-submit input:hover { background: transparent; color: var(--green); } @media ( min-width: 900px ){ #contact-us .row { align-items: center; } #contact-us .form { display: flex; flex-wrap: wrap; gap: 20px; } #contact-us .form .field-wrap { width: calc( 50% - 10px ); } } @media ( max-width: 899px ){ #contact-us .form .field-wrap + .field-wrap { margin-top: 20px; } } #foot { background: var(--gray-l); padding: 20px; } #foot h2 { width: 212px; height: 50px; font-size: 1px; color: transparent; } #foot.is-inview h2 { background: url(../img/vinna.svg) no-repeat center / contain; } #social { display: flex; align-items: center; } #social h3 { font-size: .875rem; margin-right: 12px; } #social ul { display: flex; list-style: none; gap: 8px; } #social a { display: block; width: 50px; height: 50px; border: 1px solid #fff; border-radius: 50%; font-size: 1px; color: transparent; } #social a:hover { background-color: var(--gray-d) !important; } #social a.ig { background: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 13.9999C11.0609 13.9999 12.0783 13.5785 12.8284 12.8283C13.5786 12.0782 14 11.0607 14 9.99988C14 8.93901 13.5786 7.9216 12.8284 7.17145C12.0783 6.42131 11.0609 5.99988 10 5.99988C8.93913 5.99988 7.92172 6.42131 7.17157 7.17145C6.42143 7.9216 6 8.93901 6 9.99988C6 11.0607 6.42143 12.0782 7.17157 12.8283C7.92172 13.5785 8.93913 13.9999 10 13.9999Z' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M1 13.9999V5.99988C1 4.6738 1.52678 3.40203 2.46447 2.46434C3.40215 1.52666 4.67392 0.999878 6 0.999878H14C15.3261 0.999878 16.5979 1.52666 17.5355 2.46434C18.4732 3.40203 19 4.6738 19 5.99988V13.9999C19 15.326 18.4732 16.5977 17.5355 17.5354C16.5979 18.4731 15.3261 18.9999 14 18.9999H6C4.67392 18.9999 3.40215 18.4731 2.46447 17.5354C1.52678 16.5977 1 15.326 1 13.9999Z' stroke='white' stroke-width='1.5'/%3E%3Cpath d='M15.5 4.50987L15.51 4.49887' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A") no-repeat center / 50%; } #social a.li { background: url("data:image/svg+xml,%3Csvg width='21' height='20' viewBox='0 0 21 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.49996 6.99988H1.49996C1.36735 6.99988 1.24018 7.05256 1.14641 7.14633C1.05264 7.2401 0.999962 7.36727 0.999962 7.49988V19.4999C0.999962 19.6325 1.05264 19.7597 1.14641 19.8534C1.24018 19.9472 1.36735 19.9999 1.49996 19.9999H5.49996C5.63257 19.9999 5.75975 19.9472 5.85352 19.8534C5.94728 19.7597 5.99996 19.6325 5.99996 19.4999V7.49988C5.99996 7.36727 5.94728 7.2401 5.85352 7.14633C5.75975 7.05256 5.63257 6.99988 5.49996 6.99988ZM4.99996 18.9999H1.99996V7.99988H4.99996V18.9999ZM16 6.99988C14.915 6.99988 13.86 7.35788 13 8.01888V7.49988C13 7.36727 12.9473 7.2401 12.8535 7.14633C12.7597 7.05256 12.6326 6.99988 12.5 6.99988H8.49996C8.36735 6.99988 8.24018 7.05256 8.14641 7.14633C8.05264 7.2401 7.99996 7.36727 7.99996 7.49988V19.4999C7.99996 19.6325 8.05264 19.7597 8.14641 19.8534C8.24018 19.9472 8.36735 19.9999 8.49996 19.9999H12.5C12.6326 19.9999 12.7597 19.9472 12.8535 19.8534C12.9473 19.7597 13 19.6325 13 19.4999V13.9999C13 13.6021 13.158 13.2205 13.4393 12.9392C13.7206 12.6579 14.1021 12.4999 14.5 12.4999C14.8978 12.4999 15.2793 12.6579 15.5606 12.9392C15.8419 13.2205 16 13.6021 16 13.9999V19.4999C16 19.6325 16.0526 19.7597 16.1464 19.8534C16.2402 19.9472 16.3674 19.9999 16.5 19.9999H20.5C20.6326 19.9999 20.7597 19.9472 20.8535 19.8534C20.9473 19.7597 21 19.6325 21 19.4999V11.9999C20.9984 10.6743 20.4711 9.40344 19.5337 8.4661C18.5964 7.52876 17.3256 7.00147 16 6.99988ZM20 18.9999H17V13.9999C17 13.3368 16.7366 12.701 16.2677 12.2321C15.7989 11.7633 15.163 11.4999 14.5 11.4999C13.8369 11.4999 13.201 11.7633 12.7322 12.2321C12.2634 12.701 12 13.3368 12 13.9999V18.9999H8.99996V7.99988H12V9.20288C11.9999 9.30644 12.0321 9.40745 12.0919 9.49196C12.1518 9.57647 12.2364 9.64032 12.3341 9.67467C12.4318 9.70903 12.5377 9.71221 12.6373 9.68376C12.7369 9.65532 12.8252 9.59666 12.89 9.51588C13.4035 8.86496 14.1073 8.39051 14.9034 8.1587C15.6994 7.92689 16.548 7.94927 17.3307 8.22272C18.1134 8.49617 18.7912 9.00707 19.2697 9.68416C19.7482 10.3612 20.0035 11.1708 20 11.9999V18.9999ZM3.86796 0.0018818C3.75046 -0.00639964 3.63255 -0.0070678 3.51496 -0.00011829C3.14073 -0.0255816 2.76526 0.0260645 2.4118 0.151621C2.05834 0.277178 1.73442 0.47397 1.46011 0.729809C1.18581 0.985648 0.96695 1.29508 0.817101 1.63895C0.667252 1.98281 0.589603 2.35379 0.588962 2.72888C0.585856 3.10006 0.659036 3.46792 0.803964 3.80965C0.948891 4.15138 1.16248 4.45969 1.43147 4.71547C1.70047 4.97124 2.01915 5.16903 2.36774 5.29657C2.71633 5.42411 3.08741 5.47867 3.45796 5.45688H3.48596C3.84414 5.48196 4.20376 5.43625 4.54427 5.32236C4.88478 5.20846 5.19953 5.02861 5.47054 4.79307C5.74155 4.55754 5.96351 4.27093 6.12375 3.94961C6.28399 3.62829 6.37938 3.27856 6.40446 2.92038C6.42954 2.5622 6.38383 2.20259 6.26994 1.86207C6.15604 1.52156 5.97619 1.20681 5.74065 0.935805C5.50512 0.664797 5.21851 0.442836 4.89719 0.282593C4.57588 0.12235 4.22614 0.0269643 3.86796 0.0018818ZM3.83296 4.45988C3.71748 4.47038 3.60124 4.46938 3.48596 4.45688H3.45796C3.21729 4.47497 2.97549 4.44268 2.748 4.36207C2.52051 4.28146 2.31233 4.1543 2.13675 3.98871C1.96116 3.82311 1.82204 3.62273 1.72825 3.40034C1.63447 3.17796 1.58809 2.93846 1.59206 2.69715C1.59604 2.45583 1.6503 2.21799 1.75136 1.99882C1.85243 1.77965 1.99808 1.58396 2.17903 1.42425C2.35998 1.26453 2.57224 1.1443 2.80226 1.07123C3.03228 0.998167 3.27502 0.973865 3.51496 0.999882C3.97379 0.957712 4.43057 1.09954 4.78483 1.39416C5.13908 1.68878 5.36179 2.11206 5.40396 2.57088C5.44613 3.02971 5.30431 3.48649 5.00969 3.84075C4.71507 4.195 4.29179 4.41771 3.83296 4.45988Z' fill='white'/%3E%3C/svg%3E%0A") no-repeat center / 50%; } @media ( min-width: 600px ){ #foot .wrap { display: flex; align-items: center; justify-content: space-between; } } @media ( max-width: 599px ){ #foot h2 { margin: 0 auto 20px; } #social { flex-direction: column; } #social h3 { margin-right: 0; margin-bottom: 12px; } } #copyright { padding: 1rem 0; background: var(--green); } #copyright a { display: inline-block; position: relative; color: var(--gray-d); } #copyright a::after { content: ''; display: block; width: 100%; height: 0; border-top: 1px solid var(--gray-d); position: absolute; bottom: -4px; right: 0; transform: scalex( 0 ); transition: all .3s ease-out; transform-origin: 100% 50%; } #copyright a:hover::after { transform: scalex( 1 ); } @media ( min-width: 600px ){ #copyright .wrap { display: flex; align-items: center; justify-content: space-between; } } @media ( max-width: 599px ){ #copyright { text-align: center; } }