:root { --global-palette1: #4481EB; --global-palette2: #04BEFE; --global-palette3: #1a202c; --global-palette4: #2d3748; --global-palette9: #ffffff; } body { font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif; } h1, h2, h3, h4, h5, h6 { font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif; } .btn-primary { display: inline-block; padding: 15px 35px; border-radius: 50px; text-transform: uppercase; font-weight: 700; text-decoration: none; background-color: var(--global-palette9); border: 2px solid var(--global-palette9); color: var(--global-palette2); } .btn-primary:hover { background-color: transparent; color: var(--global-palette9); } /* Footer styles */ footer { color: var(--global-palette3); } .footer-top { padding: 120px 0 40px 0; } .footer-bg { background-image: linear-gradient(100deg, #4481EB 0%, #04BEFE 100%); } .footer-top-content { position: relative; z-index: 10; } .footer-shape { position: absolute; margin-top: -3px; top: 0; left: 0; width: 100%; overflow: hidden; line-height: 0; } .footer-shape svg { position: relative; display: block; width: calc(119% + 1.3px); height: 87px; } .footer-shape .shape-fill { fill: #FFFFFF; } .social-icons a:hover i { color: var(--global-palette1); } .social-icons-section { position: relative; z-index: 10; } @media only screen and (max-width: 516px) { .btn-primary { display: inline-block; padding: 8px 15px; border-radius: 50px; text-transform: uppercase; font-weight: 700; text-decoration: none; } }