Updated teams page
diff --git a/css/home.css b/css/home.css
new file mode 100644
index 0000000..15dc2be
--- /dev/null
+++ b/css/home.css
@@ -0,0 +1,1594 @@
+.navigation-links-nav {
+ flex: 0 0 auto;
+ display: flex;
+ align-items: center;
+ flex-direction: row;
+}
+.navigation-links-text1 {
+ font-style: normal;
+ font-weight: 500;
+ margin-left: var(--dl-space-space-twounits);
+}
+.navigation-links-link {
+ font-style: normal;
+ font-weight: 500;
+ margin-left: var(--dl-space-space-twounits);
+ text-decoration: none;
+}
+.navigation-links-link1 {
+ font-style: normal;
+ font-weight: 500;
+ margin-left: var(--dl-space-space-twounits);
+ text-decoration: none;
+}
+.navigation-links-text2 {
+ font-style: normal;
+ font-weight: 500;
+ margin-left: var(--dl-space-space-twounits);
+}
+
+
+
+
+
+
+
+
+
+@media(max-width: 767px) {
+ .navigation-links-nav {
+ align-items: flex-start;
+ flex-direction: column;
+ }
+ .navigation-links-text1 {
+ margin-left: 0;
+ margin-bottom: var(--dl-space-space-unit);
+ }
+ .navigation-links-link {
+ margin-left: 0;
+ margin-bottom: var(--dl-space-space-unit);
+ }
+ .navigation-links-link1 {
+ margin-left: 0;
+ margin-bottom: var(--dl-space-space-unit);
+ }
+ .navigation-links-text2 {
+ margin-left: 0;
+ margin-bottom: var(--dl-space-space-unit);
+ }
+}
+@media(max-width: 479px) {
+ .navigation-links-root-class-name11 {
+ margin-left: var(--dl-space-space-unit);
+ }
+}
+
+.nav-nav {
+ width: 100%;
+ display: flex;
+ z-index: 100;
+ position: sticky;
+ max-width: var(--dl-size-size-maxwidth);
+ align-items: center;
+ padding-top: var(--dl-space-space-twounits);
+ padding-left: var(--dl-space-space-threeunits);
+ padding-right: var(--dl-space-space-threeunits);
+ padding-bottom: var(--dl-space-space-twounits);
+ justify-content: space-between;
+}
+.nav-image {
+ width: var(--dl-size-size-small);
+ object-fit: cover;
+}
+.nav-nav1 {
+ display: flex;
+}
+.nav-nav2 {
+ flex: 0 0 auto;
+ display: flex;
+ align-items: center;
+ flex-direction: row;
+}
+.nav-link {
+ text-decoration: none;
+}
+.nav-link1 {
+ font-style: normal;
+ font-weight: 500;
+ margin-left: var(--dl-space-space-twounits);
+ text-decoration: none;
+}
+.nav-link2 {
+ font-style: normal;
+ font-weight: 500;
+ margin-left: var(--dl-space-space-twounits);
+ text-decoration: none;
+}
+.nav-link3 {
+ font-style: normal;
+ font-weight: 500;
+ margin-left: var(--dl-space-space-twounits);
+ text-decoration: none;
+}
+.nav-link4 {
+ font-style: normal;
+ font-weight: 500;
+ margin-left: var(--dl-space-space-twounits);
+ text-decoration: none;
+}
+.nav-btn-group {
+ display: flex;
+ align-items: center;
+ flex-direction: row;
+ justify-content: center;
+}
+.nav-register {
+ color: var(--dl-color-gray-white);
+ display: flex;
+ grid-gap: 8px;
+ align-self: center;
+ align-items: center;
+ border-width: 0px;
+ flex-direction: row;
+ text-decoration: none;
+ background-color: var(--dl-color-bliss-primary);
+}
+.nav-icon {
+ width: var(--dl-size-size-xsmall);
+ height: var(--dl-size-size-xsmall);
+}
+.nav-nav3 {
+ display: flex;
+ align-items: flex-start;
+ flex-direction: column;
+}
+.nav-container {
+ width: 100%;
+ display: flex;
+ align-items: center;
+ margin-bottom: var(--dl-space-space-threeunits);
+ justify-content: space-between;
+}
+.nav-image1 {
+ height: 2rem;
+}
+.nav-menu-close {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+.nav-icon04 {
+ width: var(--dl-size-size-xsmall);
+ height: var(--dl-size-size-xsmall);
+ margin-right: var(--dl-space-space-twounits);
+}
+.nav-icon06 {
+ width: var(--dl-size-size-xsmall);
+ height: var(--dl-size-size-xsmall);
+ margin-right: var(--dl-space-space-twounits);
+}
+.nav-icon08 {
+ width: var(--dl-size-size-xsmall);
+ height: var(--dl-size-size-xsmall);
+}
+@media(max-width: 1200px) {
+ .nav-mobile-menu {
+ display: none;
+ }
+}
+@media(max-width: 991px) {
+ .nav-burger-menu {
+ display: none;
+ }
+ .nav-mobile-menu {
+ display: none;
+ }
+}
+@media(max-width: 767px) {
+ .nav-nav {
+ padding-left: var(--dl-space-space-twounits);
+ padding-right: var(--dl-space-space-twounits);
+ }
+ .nav-nav1 {
+ display: none;
+ }
+ .nav-nav2 {
+ align-items: flex-start;
+ flex-direction: column;
+ }
+ .nav-link1 {
+ margin-left: 0;
+ margin-bottom: var(--dl-space-space-unit);
+ }
+ .nav-link2 {
+ margin-left: 0;
+ margin-bottom: var(--dl-space-space-unit);
+ }
+ .nav-link3 {
+ margin-left: 0;
+ margin-bottom: var(--dl-space-space-unit);
+ }
+ .nav-link4 {
+ margin-left: 0;
+ margin-bottom: var(--dl-space-space-unit);
+ }
+ .nav-btn-group {
+ display: none;
+ }
+ .nav-burger-menu {
+ width: var(--dl-size-size-small);
+ height: var(--dl-size-size-small);
+ display: flex;
+ }
+ .nav-icon {
+ width: 32px;
+ height: 32px;
+ }
+ .nav-mobile-menu {
+ display: none;
+ }
+}
+@media(max-width: 479px) {
+ .nav-nav {
+ padding: var(--dl-space-space-unit);
+ }
+ .nav-nav1 {
+ display: none;
+ align-items: flex-start;
+ }
+ .nav-icon {
+ fill: var(--dl-color-gray-500);
+ }
+ .nav-mobile-menu {
+ display: none;
+ background-color: #ffffff;
+ }
+ .nav-nav3 {
+ width: 100%;
+ background-color: #ffffff;
+ }
+ .nav-container {
+ background-color: #ffffff;
+ }
+ .nav-menu-close {
+ width: var(--dl-size-size-small);
+ height: var(--dl-size-size-small);
+ }
+ .nav-icon02 {
+ width: 24px;
+ }
+ .nav-icon-group {
+ margin-top: var(--dl-space-space-twounits);
+ }
+}
+
+.features-features {
+ width: 100%;
+ display: flex;
+ padding: var(--dl-space-space-threeunits);
+ position: relative;
+ max-width: var(--dl-size-size-maxwidth);
+ align-self: center;
+ align-items: center;
+ flex-direction: column;
+}
+.features-heading {
+ display: flex;
+ z-index: 100;
+ margin-bottom: var(--dl-space-space-threeunits);
+ flex-direction: column;
+ justify-content: center;
+}
+.features-text {
+ color: var(--dl-color-bliss-primary);
+ font-size: 3rem;
+ align-self: center;
+ text-align: center;
+ margin-bottom: var(--dl-space-space-unit);
+}
+.features-text03 {
+ font-size: 18px;
+ align-self: center;
+ font-style: normal;
+ text-align: center;
+ font-weight: 500;
+}
+.features-list {
+ gap: 24px;
+ display: flex;
+ z-index: 100;
+ flex-direction: column;
+}
+.features-f-1 {
+ gap: 24px;
+ width: auto;
+ display: flex;
+ flex-wrap: wrap;
+ flex-direction: row;
+ justify-content: center;
+}
+.features-focus-on-design {
+ transition: 0.3s;
+}
+.features-focus-on-design:hover {
+ box-shadow: rgba(255, 255, 255, 0.1) 0px 1px 1px 0px inset, rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;;
+}
+.features-image {
+ width: 32px;
+ object-fit: cover;
+}
+.features-text04 {
+ color: #002766;
+ font-size: 18px;
+}
+.features-performance {
+ gap: 12px;
+ flex: 0 0 auto;
+ width: auto;
+ display: flex;
+ padding: var(--dl-space-space-unit);
+ max-width: 280px;
+ transition: 0.3s;
+ align-items: flex-start;
+ border-color: #AEF998;
+ border-width: 1.6px;
+ border-radius: 16px;
+ flex-direction: column;
+ background-color: #D2FDC5;
+}
+.features-performance:hover {
+ box-shadow: rgba(255, 255, 255, 0.1) 0px 1px 1px 0px inset, rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;;
+}
+.features-image1 {
+ width: 32px;
+ object-fit: cover;
+}
+.features-text06 {
+ color: #186601;
+ font-size: 18px;
+}
+.features-regular-updates {
+ gap: 12px;
+ flex: 0 0 auto;
+ width: auto;
+ display: flex;
+ padding: var(--dl-space-space-unit);
+ max-width: 280px;
+ transition: 0.3s;
+ align-items: flex-start;
+ border-color: #98EFF9;
+ border-width: 1.6px;
+ border-radius: 16px;
+ flex-direction: column;
+ background-color: #C5F7FD;
+}
+.features-regular-updates:hover {
+ box-shadow: rgba(255, 255, 255, 0.1) 0px 1px 1px 0px inset, rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;;
+}
+.features-image2 {
+ width: 32px;
+ object-fit: cover;
+}
+.features-text08 {
+ color: #002766;
+ font-size: 18px;
+}
+.features-f-2 {
+ gap: 24px;
+ display: flex;
+ flex-wrap: wrap;
+ flex-direction: row;
+ justify-content: center;
+}
+.features-battery-friendly {
+ gap: 12px;
+ flex: 0 0 auto;
+ width: auto;
+ display: flex;
+ padding: var(--dl-space-space-unit);
+ max-width: 280px;
+ transition: 0.3s;
+ align-items: flex-start;
+ border-color: #F9E798;
+ border-width: 1.6px;
+ border-radius: 16px;
+ flex-direction: column;
+ background-color: #FDF3C5;
+}
+.features-battery-friendly:hover {
+ box-shadow: rgba(255, 255, 255, 0.1) 0px 1px 1px 0px inset, rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;;
+}
+.features-image3 {
+ width: 32px;
+ object-fit: cover;
+}
+.features-text10 {
+ color: #665300;
+ font-size: 18px;
+}
+.features-added-security {
+ gap: 12px;
+ flex: 0 0 auto;
+ width: auto;
+ display: flex;
+ padding: var(--dl-space-space-unit);
+ max-width: 280px;
+ transition: 0.3s;
+ align-items: flex-start;
+ border-color: #A598F9;
+ border-width: 1.6px;
+ border-radius: 16px;
+ flex-direction: column;
+ background-color: #CDC5FD;
+}
+.features-added-security:hover {
+ box-shadow: rgba(255, 255, 255, 0.1) 0px 1px 1px 0px inset, rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;;
+}
+.features-image4 {
+ width: 32px;
+ object-fit: cover;
+}
+.features-text12 {
+ color: #002766;
+ font-size: 18px;
+}
+.features-many-more {
+ gap: 12px;
+ flex: 0 0 auto;
+ width: auto;
+ display: flex;
+ padding: var(--dl-space-space-unit);
+ max-width: 280px;
+ transition: 0.3s;
+ align-items: flex-start;
+ border-color: #F9989C;
+ border-width: 1.6px;
+ border-radius: 16px;
+ flex-direction: column;
+ background-color: #FDC5C8;
+}
+.features-many-more:hover {
+ box-shadow: rgba(255, 255, 255, 0.1) 0px 1px 1px 0px inset, rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;;
+}
+.features-image5 {
+ width: 32px;
+ object-fit: cover;
+}
+.features-text14 {
+ color: #660005;
+ font-size: 18px;
+}
+.features-image6 {
+ top: 0px;
+ left: 0px;
+ right: 0px;
+ width: 306px;
+ margin: auto;
+ z-index: 1;
+ position: absolute;
+ object-fit: cover;
+}
+@media(max-width: 991px) {
+ .features-text {
+ align-self: center;
+ }
+}
+@media(max-width: 767px) {
+ .features-features {
+ max-width: 100%;
+ padding-left: var(--dl-space-space-twounits);
+ padding-right: var(--dl-space-space-twounits);
+ }
+ .features-f-1 {
+ flex-wrap: wrap;
+ align-items: center;
+ flex-direction: column;
+ justify-content: center;
+ }
+ .features-f-2 {
+ flex-wrap: wrap;
+ align-items: center;
+ flex-direction: column;
+ justify-content: center;
+ }
+}
+@media(max-width: 479px) {
+ .features-features {
+ width: 454px;
+ max-width: auto;
+ align-self: center;
+ align-items: center;
+ padding-top: var(--dl-space-space-twounits);
+ padding-left: var(--dl-space-space-unit);
+ padding-right: var(--dl-space-space-unit);
+ padding-bottom: var(--dl-space-space-twounits);
+ }
+ .features-text {
+ width: 478px;
+ font-size: 1.6rem;
+ margin-bottom: var(--dl-space-space-halfunit);
+ }
+ .features-text03 {
+ font-size: 16px;
+ }
+}
+
+.stats-stats {
+ gap: 24px;
+ width: 100%;
+ display: flex;
+ position: relative;
+ flex-wrap: wrap;
+ align-self: center;
+ align-items: center;
+ flex-direction: row;
+ justify-content: center;
+}
+.stats-maintainer {
+ flex: 0 0 auto;
+ width: auto;
+ height: auto;
+ display: flex;
+ align-items: center;
+ padding-top: 32px;
+ padding-left: 48px;
+ border-radius: 16px;
+ padding-right: 48px;
+ flex-direction: column;
+ padding-bottom: 32px;
+}
+.stats-image {
+ width: 56px;
+ object-fit: cover;
+}
+.stats-text {
+ color: #301BB8;
+ font-size: 24px;
+}
+.stats-text1 {
+ margin-top: var(--dl-space-space-halfunit);
+ margin-bottom: var(--dl-space-space-halfunit);
+}
+.stats-text2 {
+ color: #1E0E87;
+ font-size: 3em;
+ margin-top: var(--dl-space-space-halfunit);
+}
+.stats-downloads {
+ flex: 0 0 auto;
+ width: auto;
+ height: auto;
+ display: flex;
+ align-items: center;
+ padding-top: 32px;
+ padding-left: 48px;
+ border-radius: 16px;
+ padding-right: 48px;
+ flex-direction: column;
+ padding-bottom: 32px;
+}
+.stats-image1 {
+ width: 56px;
+ object-fit: cover;
+}
+.stats-text3 {
+ color: #1B57B8;
+ font-size: 24px;
+}
+.stats-text4 {
+ margin-top: var(--dl-space-space-halfunit);
+ margin-bottom: var(--dl-space-space-halfunit);
+}
+.stats-text5 {
+ color: #0E3C87;
+ font-size: 3em;
+ margin-top: var(--dl-space-space-halfunit);
+}
+.stats-devices {
+ flex: 0 0 auto;
+ width: auto;
+ height: auto;
+ display: flex;
+ align-items: center;
+ padding-top: 32px;
+ padding-left: 48px;
+ border-radius: 16px;
+ padding-right: 48px;
+ flex-direction: column;
+ padding-bottom: 32px;
+}
+.stats-image2 {
+ width: 56px;
+ object-fit: cover;
+}
+.stats-text6 {
+ color: #3FB81B;
+ font-size: 24px;
+}
+.stats-text7 {
+ margin-top: var(--dl-space-space-halfunit);
+ margin-bottom: var(--dl-space-space-halfunit);
+}
+.stats-text8 {
+ color: #004C41;
+ font-size: 3em;
+ margin-top: var(--dl-space-space-halfunit);
+}
+@media(max-width: 767px) {
+ .stats-stats {
+ width: 100%;
+ align-items: center;
+ justify-content: center;
+ }
+ .stats-maintainer {
+ padding-top: var(--dl-space-space-oneandhalfunits);
+ padding-left: var(--dl-space-space-oneandhalfunits);
+ padding-bottom: var(--dl-space-space-oneandhalfunits);
+ }
+ .stats-downloads {
+ padding-top: var(--dl-space-space-oneandhalfunits);
+ padding-left: var(--dl-space-space-oneandhalfunits);
+ padding-bottom: var(--dl-space-space-oneandhalfunits);
+ }
+ .stats-devices {
+ padding-top: var(--dl-space-space-oneandhalfunits);
+ padding-left: var(--dl-space-space-oneandhalfunits);
+ padding-bottom: var(--dl-space-space-oneandhalfunits);
+ }
+}
+@media(max-width: 479px) {
+ .stats-stats {
+ width: auto;
+ align-self: center;
+ align-items: stretch;
+ flex-direction: column;
+ justify-content: center;
+ }
+}
+
+.footer-footer {
+ width: 100%;
+ display: flex;
+ position: relative;
+ max-width: var(--dl-size-size-maxwidth);
+ align-items: center;
+ padding-top: var(--dl-space-space-twounits);
+ padding-left: var(--dl-space-space-threeunits);
+ padding-right: var(--dl-space-space-threeunits);
+ flex-direction: column;
+ padding-bottom: var(--dl-space-space-twounits);
+ justify-content: space-between;
+}
+.footer-container {
+ width: 100%;
+ display: flex;
+ justify-content: space-between;
+}
+.footer-logo {
+ width: 32%;
+ display: flex;
+ max-width: var(--dl-size-size-maxwidth);
+ align-items: flex-start;
+ margin-bottom: var(--dl-space-space-twounits);
+ flex-direction: column;
+}
+.footer-image {
+ width: 64px;
+ height: auto;
+}
+.footer-text {
+ width: 100%;
+ margin-top: var(--dl-space-space-twounits);
+}
+.footer-links-container {
+ display: flex;
+ align-items: flex-start;
+ flex-direction: row;
+ justify-content: flex-end;
+}
+.footer-container1 {
+ display: flex;
+ align-items: flex-start;
+ margin-right: 4rem;
+ flex-direction: row;
+ justify-content: flex-start;
+}
+.footer-product-container {
+ flex: 0 0 auto;
+ display: flex;
+ align-items: flex-start;
+ margin-right: 4rem;
+ flex-direction: column;
+ justify-content: flex-start;
+}
+.footer-text1 {
+ color: var(--dl-color-bliss-primary);
+ font-weight: 700;
+ margin-bottom: var(--dl-space-space-oneandhalfunits);
+}
+.footer-link {
+ margin-bottom: var(--dl-space-space-unit);
+ text-decoration: none;
+}
+.footer-link01 {
+ margin-bottom: var(--dl-space-space-unit);
+ text-decoration: none;
+}
+.footer-link02 {
+ margin-bottom: var(--dl-space-space-unit);
+ text-decoration: none;
+}
+.footer-company-container {
+ flex: 0 0 auto;
+ display: flex;
+ align-items: flex-start;
+ flex-direction: column;
+ justify-content: flex-start;
+}
+.footer-text2 {
+ color: var(--dl-color-bliss-primary);
+ font-weight: 700;
+ margin-bottom: var(--dl-space-space-oneandhalfunits);
+}
+.footer-link03 {
+ margin-bottom: var(--dl-space-space-unit);
+ text-decoration: none;
+}
+.footer-link04 {
+ margin-bottom: var(--dl-space-space-unit);
+ text-decoration: none;
+}
+.footer-link05 {
+ margin-bottom: var(--dl-space-space-unit);
+ text-decoration: none;
+}
+.footer-link06 {
+ margin-bottom: var(--dl-space-space-unit);
+ text-decoration: none;
+}
+.footer-link07 {
+ margin-bottom: var(--dl-space-space-unit);
+ text-decoration: none;
+}
+.footer-container2 {
+ display: flex;
+ align-items: flex-start;
+ flex-direction: column;
+ justify-content: flex-start;
+}
+.footer-contact {
+ display: flex;
+ align-items: flex-start;
+ margin-bottom: var(--dl-space-space-oneandhalfunits);
+ flex-direction: column;
+ justify-content: flex-start;
+}
+.footer-text3 {
+ color: var(--dl-color-bliss-primary);
+ font-weight: 700;
+ margin-bottom: var(--dl-space-space-oneandhalfunits);
+}
+.footer-link08 {
+ margin-bottom: var(--dl-space-space-unit);
+ text-decoration: none;
+}
+.footer-link09 {
+ margin-bottom: var(--dl-space-space-unit);
+ text-decoration: none;
+}
+.footer-link10 {
+ text-decoration: none;
+}
+.footer-socials {
+ display: flex;
+ align-items: flex-start;
+ flex-direction: column;
+ justify-content: flex-start;
+}
+.footer-text4 {
+ color: var(--dl-color-bliss-primary);
+ font-weight: 700;
+ margin-bottom: var(--dl-space-space-oneandhalfunits);
+}
+.footer-icon-group {
+ display: flex;
+ align-items: center;
+ flex-direction: row;
+ justify-content: space-between;
+}
+.footer-link11 {
+ display: contents;
+}
+.footer-icon {
+ width: var(--dl-size-size-xsmall);
+ height: var(--dl-size-size-xsmall);
+ margin-right: var(--dl-space-space-unit);
+ text-decoration: none;
+}
+.footer-link12 {
+ display: contents;
+}
+.footer-icon2 {
+ width: var(--dl-size-size-xsmall);
+ height: var(--dl-size-size-xsmall);
+ margin-right: var(--dl-space-space-unit);
+ text-decoration: none;
+}
+.footer-link13 {
+ display: contents;
+}
+.footer-icon4 {
+ width: var(--dl-size-size-xsmall);
+ height: var(--dl-size-size-xsmall);
+ text-decoration: none;
+}
+.footer-separator {
+ width: 100%;
+ height: 1px;
+ margin-top: var(--dl-space-space-twounits);
+ margin-bottom: var(--dl-space-space-twounits);
+ background-color: var(--dl-color-gray-900);
+}
+.footer-text5 {
+ align-self: center;
+}
+@media(max-width: 991px) {
+ .footer-footer {
+ flex-direction: column;
+ }
+ .footer-container1 {
+ margin-right: var(--dl-space-space-fourunits);
+ }
+ .footer-product-container {
+ margin-right: var(--dl-space-space-fourunits);
+ }
+}
+@media(max-width: 767px) {
+ .footer-footer {
+ padding-left: var(--dl-space-space-twounits);
+ padding-right: var(--dl-space-space-twounits);
+ }
+ .footer-container {
+ align-items: center;
+ flex-direction: column;
+ justify-content: space-between;
+ }
+ .footer-logo {
+ align-items: center;
+ }
+ .footer-image {
+ margin-bottom: var(--dl-space-space-oneandhalfunits);
+ }
+ .footer-text {
+ margin-top: var(--dl-space-space-unit);
+ text-align: center;
+ }
+ .footer-links-container {
+ width: 100%;
+ margin-top: var(--dl-space-space-twounits);
+ align-items: flex-start;
+ flex-direction: row;
+ justify-content: center;
+ }
+ .footer-container1 {
+ margin-right: var(--dl-space-space-fourunits);
+ }
+ .footer-product-container {
+ margin-right: var(--dl-space-space-fourunits);
+ }
+}
+@media(max-width: 479px) {
+ .footer-footer {
+ padding: var(--dl-space-space-unit);
+ }
+ .footer-container {
+ align-items: center;
+ flex-direction: column;
+ }
+ .footer-logo {
+ width: auto;
+ }
+ .footer-image {
+ margin-bottom: 0px;
+ }
+ .footer-text {
+ width: 80%;
+ }
+ .footer-links-container {
+ align-items: flex-start;
+ flex-direction: column;
+ }
+ .footer-container1 {
+ margin-right: 0px;
+ flex-direction: column;
+ }
+ .footer-company-container {
+ margin-top: var(--dl-space-space-twounits);
+ }
+ .footer-container2 {
+ margin-top: var(--dl-space-space-twounits);
+ align-items: flex-start;
+ margin-bottom: 0px;
+ }
+ .footer-contact {
+ align-items: flex-start;
+ margin-bottom: var(--dl-space-space-unit);
+ }
+ .footer-text5 {
+ text-align: center;
+ }
+}
+
+.home-container {
+ width: 100%;
+ display: flex;
+ overflow: auto;
+ min-height: 100vh;
+ align-items: center;
+ flex-direction: column;
+}
+.home-hero {
+ width: 100%;
+ display: flex;
+ position: relative;
+ max-width: var(--dl-size-size-maxwidth);
+ align-self: center;
+ min-height: 80vh;
+ align-items: flex-start;
+ padding-top: var(--dl-space-space-threeunits);
+ padding-left: var(--dl-space-space-sixunits);
+ padding-right: var(--dl-space-space-sixunits);
+ flex-direction: row;
+ padding-bottom: var(--dl-space-space-threeunits);
+ justify-content: space-between;
+}
+.home-hero-text {
+ display: flex;
+ margin-right: var(--dl-space-space-threeunits);
+ padding-right: var(--dl-space-space-threeunits);
+ flex-direction: column;
+}
+.home-rom-name {
+ width: auto;
+ font-style: normal;
+ font-weight: 600;
+ padding-top: var(--dl-space-space-unit);
+ padding-bottom: var(--dl-space-space-unit);
+}
+.home-text {
+ font-size: 3rem;
+ max-width: 450px;
+ min-width: 450px;
+}
+.home-text02 {
+ color: var(--dl-color-bliss-primary);
+}
+.home-text03 {
+ color: var(--dl-color-gray-500);
+ max-width: 80%;
+ margin-top: var(--dl-space-space-oneandhalfunits);
+ margin-bottom: var(--dl-space-space-oneandhalfunits);
+}
+.home-btn-group {
+ width: auto;
+ display: flex;
+ align-items: center;
+ flex-direction: row;
+}
+.home-link {
+ color: var(--dl-color-gray-white);
+ display: flex;
+ grid-gap: 8px;
+ align-self: center;
+ transition: 0.3s;
+ align-items: center;
+ padding-top: 12px;
+ border-width: 0px;
+ padding-left: 24px;
+ padding-right: 24px;
+ flex-direction: row;
+ padding-bottom: 12px;
+ justify-content: space-between;
+ text-decoration: none;
+ background-color: var(--dl-color-bliss-primary);
+}
+.home-link:hover {
+ color: var(--dl-color-gray-white);
+ background-color: var(--dl-color-gray-black);
+}
+.home-icon {
+ fill: var(--dl-color-gray-white);
+ width: 18px;
+ height: 24px;
+}
+.home-text04 {
+ font-size: 18px;
+ font-style: normal;
+ font-weight: 500;
+}
+.home-link1 {
+ color: var(--dl-color-gray-700);
+ display: flex;
+ grid-gap: 8px;
+ transition: 0.3s;
+ align-items: center;
+ margin-left: var(--dl-space-space-unit);
+ padding-top: 12px;
+ border-color: transparent;
+ padding-left: 24px;
+ padding-right: 24px;
+ flex-direction: row;
+ padding-bottom: 12px;
+ justify-content: space-between;
+ text-decoration: none;
+}
+.home-link1:hover {
+ border-color: var(--dl-color-gray-black);
+}
+.home-icon02 {
+ fill: var(--dl-color-gray-700);
+ width: 18px;
+ height: 24px;
+}
+.home-text05 {
+ font-size: 18px;
+}
+.home-hero-image {
+ width: 949px;
+ height: 743px;
+ display: flex;
+ align-items: center;
+ flex-direction: row;
+ background-size: cover;
+ justify-content: center;
+ background-image: url("public/playground_assets/lines-bg-1400w.png");
+ background-repeat: no-repeat;
+ background-position: center;
+}
+.home-image {
+ width: 300px;
+ z-index: 100;
+ max-width: 400px;
+ align-self: center;
+ object-fit: cover;
+}
+.home-download-pc {
+ width: 100%;
+ display: flex;
+ align-items: center;
+ padding-top: var(--dl-space-space-threeunits);
+ flex-direction: column;
+ padding-bottom: var(--dl-space-space-threeunits);
+}
+.home-android-download {
+ max-width: 1800px;
+ margin-top: 0px;
+ max-height: 1200px;
+}
+.home-container1 {
+ display: flex;
+ z-index: 100;
+ align-items: flex-start;
+ flex-direction: column;
+}
+.home-container2 {
+ width: auto;
+ display: flex;
+ align-items: flex-start;
+ flex-direction: column;
+}
+.home-text06 {
+ font-size: 18px;
+ font-style: normal;
+ font-weight: 600;
+}
+.home-text07 {
+ color: var(--dl-color-gray-black);
+ font-size: 48px;
+ font-style: normal;
+ margin-top: var(--dl-space-space-halfunit);
+ font-weight: 500;
+ margin-bottom: var(--dl-space-space-halfunit);
+}
+.home-text08 {
+ color: #007F6D;
+ width: 60%;
+ font-size: 18px;
+}
+.home-link2 {
+ gap: 8px;
+ color: var(--dl-color-gray-white);
+ display: flex;
+ margin-top: var(--dl-space-space-oneandhalfunits);
+ align-items: center;
+ padding-top: var(--dl-space-space-unit);
+ border-color: #009883;
+ border-width: 0px;
+ border-radius: var(--dl-radius-radius-radius8);
+ flex-direction: row;
+ padding-bottom: var(--dl-space-space-unit);
+ justify-content: center;
+ text-decoration: none;
+ background-color: #007F6D;
+}
+.home-icon04 {
+ fill: var(--dl-color-gray-white);
+ width: 24px;
+ height: 24px;
+}
+.home-text09 {
+ font-style: normal;
+ font-weight: 600;
+}
+.home-image1 {
+ width: 48em;
+ z-index: 100;
+ object-fit: cover;
+ border-radius: var(--dl-radius-radius-radius4);
+ border-top-right-radius: 32px;
+}
+.home-image2 {
+ top: 0px;
+ right: 0px;
+ width: 421px;
+ height: 217px;
+ position: absolute;
+ object-fit: cover;
+}
+.home-image3 {
+ left: 0px;
+ width: 254px;
+ bottom: 0px;
+ height: 73px;
+ position: absolute;
+ object-fit: cover;
+}
+.home-p-c-download {
+ flex: 0 0 auto;
+ width: 90%;
+ height: 100%;
+ display: flex;
+ position: relative;
+ max-width: auto;
+ min-width: auto;
+ margin-top: var(--dl-space-space-oneandhalfunits);
+ max-height: 1200px;
+ align-items: center;
+ padding-left: var(--dl-space-space-threeunits);
+ border-radius: 32px;
+ margin-bottom: 0px;
+ padding-right: 0px;
+ flex-direction: row;
+ justify-content: center;
+ background-color: #0B3866;
+ border-top-left-radius: 0;
+ border-top-right-radius: 0;
+ border-bottom-left-radius: 32px;
+ border-bottom-right-radius: 32px;
+}
+.home-container3 {
+ display: flex;
+ align-items: flex-start;
+ flex-direction: column;
+}
+.home-container4 {
+ width: auto;
+ display: flex;
+ align-items: flex-start;
+ flex-direction: column;
+}
+.home-text10 {
+ color: #B0E4DD;
+ font-size: 18px;
+ font-style: normal;
+ font-weight: 600;
+}
+.home-text11 {
+ color: #E6F6F4;
+ font-size: 48px;
+ font-style: normal;
+ margin-top: var(--dl-space-space-halfunit);
+ font-weight: 500;
+ margin-bottom: var(--dl-space-space-halfunit);
+}
+.home-text12 {
+ color: #D9F2EF;
+ width: 61%;
+ font-size: 18px;
+}
+.home-link3 {
+ gap: 8px;
+ color: var(--dl-color-gray-white);
+ display: flex;
+ margin-top: var(--dl-space-space-oneandhalfunits);
+ align-items: center;
+ padding-top: var(--dl-space-space-unit);
+ border-color: #009883;
+ border-width: 0px;
+ border-radius: var(--dl-radius-radius-radius8);
+ flex-direction: row;
+ padding-bottom: var(--dl-space-space-unit);
+ justify-content: center;
+ text-decoration: none;
+ background-color: #83C5BE;
+}
+.home-icon06 {
+ fill: #003B33;
+ width: 24px;
+ height: 24px;
+}
+.home-text13 {
+ fill: #003B33;
+ color: #003B33;
+ font-style: normal;
+ font-weight: 600;
+}
+.home-image4 {
+ width: 48em;
+ height: 60%;
+ z-index: 100;
+ object-fit: cover;
+ border-radius: var(--dl-radius-radius-radius4);
+ border-top-right-radius: 0;
+ border-bottom-right-radius: 32px;
+}
+.home-image5 {
+ top: 0px;
+ right: 70px;
+ width: 302px;
+ height: 280px;
+ position: absolute;
+ object-fit: cover;
+}
+.home-image6 {
+ left: 510px;
+ width: 232px;
+ bottom: 0px;
+ height: 71px;
+ position: absolute;
+ object-fit: cover;
+}
+.home-download-mobile {
+ display: none;
+ align-items: center;
+ flex-direction: column;
+}
+.home-mobile-download-mobile {
+ width: 50%;
+ display: flex;
+ z-index: 100;
+ align-items: flex-start;
+ flex-direction: column;
+}
+.home-container5 {
+ width: auto;
+ display: flex;
+ align-items: flex-start;
+ flex-direction: column;
+}
+.home-text14 {
+ font-size: 18px;
+ font-style: normal;
+ font-weight: 600;
+}
+.home-text15 {
+ color: var(--dl-color-gray-black);
+ font-size: 48px;
+ font-style: normal;
+ margin-top: var(--dl-space-space-halfunit);
+ font-weight: 500;
+ margin-bottom: var(--dl-space-space-halfunit);
+}
+.home-text16 {
+ color: #007F6D;
+ font-size: 18px;
+}
+.home-button {
+ gap: 8px;
+ color: var(--dl-color-gray-white);
+ display: flex;
+ margin-top: var(--dl-space-space-oneandhalfunits);
+ align-items: center;
+ padding-top: var(--dl-space-space-unit);
+ border-color: #009883;
+ border-width: 0px;
+ border-radius: var(--dl-radius-radius-radius8);
+ flex-direction: row;
+ padding-bottom: var(--dl-space-space-unit);
+ justify-content: center;
+ background-color: #007F6D;
+}
+.home-icon08 {
+ fill: var(--dl-color-gray-white);
+ width: 24px;
+ height: 24px;
+}
+.home-text17 {
+ font-style: normal;
+ font-weight: 600;
+}
+.home-p-c-download-mobile {
+ display: flex;
+ align-items: flex-start;
+ flex-direction: column;
+}
+.home-container6 {
+ width: auto;
+ display: flex;
+ align-items: flex-start;
+ flex-direction: column;
+}
+.home-text18 {
+ color: #B0E4DD;
+ font-size: 18px;
+ font-style: normal;
+ font-weight: 600;
+}
+.home-text19 {
+ color: #E6F6F4;
+ font-size: 48px;
+ font-style: normal;
+ margin-top: var(--dl-space-space-halfunit);
+ font-weight: 500;
+ margin-bottom: var(--dl-space-space-halfunit);
+}
+.home-text20 {
+ color: #D9F2EF;
+ width: 61%;
+ font-size: 18px;
+}
+.home-button1 {
+ gap: 8px;
+ color: var(--dl-color-gray-white);
+ display: flex;
+ margin-top: var(--dl-space-space-oneandhalfunits);
+ align-items: center;
+ padding-top: var(--dl-space-space-unit);
+ border-color: #009883;
+ border-width: 0px;
+ border-radius: var(--dl-radius-radius-radius8);
+ flex-direction: row;
+ padding-bottom: var(--dl-space-space-unit);
+ justify-content: center;
+ background-color: #83C5BE;
+}
+.home-icon10 {
+ fill: #003B33;
+ width: 24px;
+ height: 24px;
+}
+.home-text21 {
+ fill: #003B33;
+ color: #003B33;
+ font-style: normal;
+ font-weight: 600;
+}
+@media(max-width: 1200px) {
+ .home-image4 {
+ width: 40em;
+ }
+}
+@media(max-width: 991px) {
+ .home-hero {
+ align-self: center;
+ align-items: center;
+ flex-direction: column;
+ justify-content: space-between;
+ }
+ .home-hero-text {
+ align-self: center;
+ align-items: center;
+ margin-right: 0px;
+ margin-bottom: var(--dl-space-space-twounits);
+ padding-right: 0px;
+ justify-content: center;
+ }
+ .home-text {
+ text-align: center;
+ }
+ .home-text03 {
+ max-width: 60%;
+ text-align: center;
+ }
+ .home-hero-image {
+ width: 100%;
+ position: static;
+ }
+ .home-download-pc {
+ padding-left: var(--dl-space-space-oneandhalfunits);
+ padding-right: var(--dl-space-space-oneandhalfunits);
+ }
+ .home-container1 {
+ padding: var(--dl-space-space-oneandhalfunits);
+ }
+ .home-text08 {
+ width: 100%;
+ }
+ .home-image1 {
+ width: 24em;
+ }
+ .home-container3 {
+ padding: var(--dl-space-space-oneandhalfunits);
+ }
+ .home-text12 {
+ width: 100%;
+ }
+ .home-image4 {
+ width: 24em;
+ }
+ .home-download-mobile {
+ display: none;
+ }
+ .home-mobile-download-mobile {
+ width: 50%;
+ padding: var(--dl-space-space-oneandhalfunits);
+ align-items: flex-start;
+ border-radius: var(--dl-radius-radius-radius4);
+ background-color: #95F9C3;
+ border-top-left-radius: 32px;
+ border-top-right-radius: 32px;
+ }
+ .home-container5 {
+ width: 50%;
+ }
+ .home-text15 {
+ width: auto;
+ }
+ .home-text16 {
+ width: 100%;
+ }
+ .home-p-c-download-mobile {
+ width: 50%;
+ padding: var(--dl-space-space-oneandhalfunits);
+ align-self: center;
+ margin-top: var(--dl-space-space-oneandhalfunits);
+ align-items: flex-start;
+ border-radius: var(--dl-radius-radius-radius4);
+ background-color: #0B3866;
+ border-bottom-left-radius: 32px;
+ border-bottom-right-radius: 32px;
+ }
+}
+@media(max-width: 767px) {
+ .home-hero {
+ max-width: 100%;
+ align-self: center;
+ align-items: center;
+ padding-left: var(--dl-space-space-twounits);
+ padding-right: var(--dl-space-space-twounits);
+ justify-content: space-between;
+ }
+ .home-hero-text {
+ align-self: center;
+ }
+ .home-hero-image {
+ width: 699px;
+ position: static;
+ align-self: center;
+ align-items: center;
+ justify-content: center;
+ }
+ .home-image {
+ width: var(--dl-size-size-xxlarge);
+ max-width: auto;
+ }
+ .home-download-pc {
+ display: none;
+ }
+ .home-download-mobile {
+ width: 100%;
+ display: flex;
+ margin-top: var(--dl-space-space-threeunits);
+ align-items: center;
+ margin-bottom: var(--dl-space-space-threeunits);
+ justify-content: center;
+ }
+ .home-mobile-download-mobile {
+ width: 80%;
+ }
+ .home-container5 {
+ width: auto;
+ }
+ .home-text15 {
+ width: 340px;
+ }
+ .home-p-c-download-mobile {
+ width: 80%;
+ }
+ .home-text20 {
+ width: auto;
+ }
+}
+@media(max-width: 479px) {
+ .home-hero {
+ align-self: center;
+ align-items: center;
+ padding-top: var(--dl-space-space-twounits);
+ padding-left: var(--dl-space-space-unit);
+ padding-right: var(--dl-space-space-unit);
+ padding-bottom: var(--dl-space-space-twounits);
+ justify-content: space-between;
+ }
+ .home-hero-text {
+ align-self: center;
+ margin-bottom: var(--dl-space-space-unit);
+ }
+ .home-text {
+ width: auto;
+ font-size: 1.8rem;
+ min-width: auto;
+ }
+ .home-text03 {
+ font-size: 12px;
+ max-width: 72%;
+ margin-top: var(--dl-space-space-unit);
+ margin-bottom: var(--dl-space-space-unit);
+ }
+ .home-btn-group {
+ flex-direction: column;
+ }
+ .home-link1 {
+ margin-top: var(--dl-space-space-unit);
+ margin-left: 0px;
+ }
+ .home-hero-image {
+ width: 450px;
+ height: 557px;
+ position: static;
+ align-self: center;
+ margin-right: 0px;
+ justify-content: center;
+ }
+ .home-image {
+ width: 48%;
+ }
+ .home-download-mobile {
+ display: flex;
+ margin-bottom: var(--dl-space-space-threeunits);
+ }
+ .home-mobile-download-mobile {
+ width: 80%;
+ align-items: center;
+ border-radius: var(--dl-radius-radius-radius4);
+ background-color: #95F9C3;
+ border-top-left-radius: 32px;
+ border-top-right-radius: 32px;
+ }
+ .home-container5 {
+ width: auto;
+ align-items: center;
+ }
+ .home-text15 {
+ width: auto;
+ font-size: 40px;
+ text-align: center;
+ }
+ .home-text16 {
+ width: auto;
+ font-size: 14px;
+ text-align: center;
+ }
+ .home-p-c-download-mobile {
+ width: 80%;
+ margin-top: var(--dl-space-space-oneandhalfunits);
+ align-items: center;
+ border-radius: var(--dl-radius-radius-radius4);
+ background-color: #0B3866;
+ border-top-left-radius: 0;
+ border-top-right-radius: 0;
+ border-bottom-left-radius: 32px;
+ border-bottom-right-radius: 32px;
+ }
+ .home-text18 {
+ align-self: center;
+ }
+ .home-text19 {
+ font-size: 40px;
+ align-self: center;
+ text-align: center;
+ }
+ .home-text20 {
+ font-size: 14px;
+ text-align: center;
+ }
+}
diff --git a/css/newteams.css b/css/newteams.css
new file mode 100644
index 0000000..bdc1368
--- /dev/null
+++ b/css/newteams.css
@@ -0,0 +1,253 @@
+@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap");
+
+html {
+ scroll-behavior: auto;
+}
+
+.z-0 {
+ z-index: 0;
+}
+
+.z-999 {
+ z-index: 999;
+}
+
+:root {
+ font-family: Inter;
+ --color-1: #ffffff;
+}
+body {
+ overflow-x: hidden;
+ line-height: 1.5;
+ font-family: sans-serif;
+ background-color: #fafafa;
+}
+* {
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+}
+a {
+ text-decoration: none;
+}
+ul {
+ list-style: none;
+}
+.container {
+ max-width: 1170px;
+ margin: auto;
+}
+.row {
+ display: flex;
+ flex-wrap: wrap;
+}
+.align-items-center {
+ align-items: center;
+}
+.justify-content-between {
+ justify-content: space-between;
+}
+
+/*header*/
+.header {
+ width: 100%;
+ position: absolute;
+ top: 0;
+ padding: 12px 0;
+ backdrop-filter: blur(24px) saturate(180%);
+ -webkit-backdrop-filter: blur(16px) saturate(180%);
+ background-color: rgba(255, 255, 255, 0.75);
+ border: 1px solid rgba(209, 213, 219, 0.3);
+}
+.header .logo,
+.header .nav {
+ padding: 0 15px;
+}
+.header .logo a {
+ font-size: 30px;
+ color: #ffffff;
+ text-transform: capitalize;
+}
+.header .nav ul li {
+ display: inline-block;
+ margin-left: 40px;
+}
+.header .nav ul li a {
+ display: block;
+ font-size: 18px;
+ padding: 10px 0;
+ font-weight: 500;
+ color: rgba(0, 0, 0, 0.7);
+ text-transform: capitalize;
+ transition: all 0.5s ease;
+}
+.header .nav ul li a:hover,
+.header .nav ul li a.active {
+ color: #0073e5;
+ text-decoration: underline;
+ text-underline-offset: 3px;
+}
+.header #nav-check {
+ position: absolute;
+ opacity: 0;
+ pointer-events: none;
+}
+.nav-toggler {
+ height: 34px;
+ width: 44px;
+ color: #0073e5;
+ border-radius: 4px;
+ cursor: pointer;
+ display: none;
+ align-items: center;
+ justify-content: center;
+ margin-right: 15px;
+ transition: all 0.5s ease;
+}
+.nav-toggler span {
+ display: block;
+ height: 2px;
+ width: 20px;
+ background-color: #000000;
+ position: relative;
+}
+.nav-toggler span::before,
+.nav-toggler span::after {
+ content: "";
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ background-color: #000000;
+ left: 0;
+}
+.nav-toggler span::before {
+ top: -6px;
+ transition: all 0.5s ease;
+}
+.nav-toggler span::after {
+ top: 6px;
+ transition: all 0.5s ease;
+}
+@media (max-width: 991px) {
+ .nav-toggler {
+ display: flex;
+ transition: all 0.5s ease;
+ }
+ .header .nav {
+ position: absolute;
+ left: 0;
+ top: 100%;
+ width: 100%;
+ background-color: var(--color-1);
+ border-top: 1px solid rgba(255, 255, 255, 0.2);
+ opacity: 0;
+ visibility: hidden;
+ }
+ .header .nav ul li {
+ display: block;
+ margin: 0;
+ }
+ .header #nav-check:checked ~ .nav {
+ opacity: 1;
+ visibility: visible;
+ transition: all 0.5s ease;
+ }
+ .header #nav-check:checked ~ .nav-toggler span {
+ background-color: transparent;
+ transition: all 0.5s ease;
+ }
+ .header #nav-check:checked ~ .nav-toggler span::before {
+ top: 0;
+ transform: rotate(45deg);
+ transition: all 0.5s ease;
+ }
+ .header #nav-check:checked ~ .nav-toggler span::after {
+ top: 0;
+ transform: rotate(-45deg);
+ transition: all 0.5s ease;
+ }
+}
+
+/* Herosection */
+.orb-canvas {
+ position: absolute;
+ top: 0%;
+ width: 100%;
+ height: 100%;
+ pointer-events: none;
+ z-index: -1;
+ opacity: 32%;
+}
+.hero {
+ width: 100vw;
+ height: 100vh;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+}
+.hero-h1 {
+ text-align: center;
+ font-size: 4rem;
+ font-weight: 500;
+ line-height: 1.15;
+ color: black;
+}
+.hero-h1 span {
+ font-weight: 500;
+ line-height: 1.15;
+ color: orangered;
+}
+
+.hero-h3 {
+ margin-top: 0.5rem;
+ width: 40%;
+ text-align: center;
+ font-size: 1.2rem;
+ color: black;
+ font-weight: 400;
+}
+.container_mouse {
+ position: absolute;
+ bottom: 10px;
+}
+.mouse-btn {
+ margin: 10px auto;
+ width: 16px;
+ height: 32px;
+ border: 3px solid rgba(122, 122, 124, 0.918);
+ border-radius: 20px;
+ display: flex;
+ pointer-events: none;
+}
+
+.mouse-scroll {
+ display: block;
+ width: 8px;
+ height: 8px;
+ background: linear-gradient(
+ 170deg,
+ rgba(122, 122, 124, 0.918),
+ rgb(123, 124, 124)
+ );
+ border-radius: 50%;
+ margin: auto;
+ animation: scrollinganim 1.8s ease-in infinite;
+ pointer-events: none;
+}
+
+@keyframes scrollinganim {
+ 0% {
+ opacity: 0;
+ transform: translateY(-8px);
+ }
+
+ 50% {
+ opacity: 1;
+ transform: translateY(8px);
+ }
+ 100% {
+ opacity: 0;
+ transform: translateY(8px);
+ }
+}
diff --git a/css/team-sec.css b/css/team-sec.css
new file mode 100644
index 0000000..6b335d0
--- /dev/null
+++ b/css/team-sec.css
@@ -0,0 +1,168 @@
+.at-section__title {
+ margin: 4rem 0 70px;
+ color: #000;
+ font-family: "Roboto", sans-serif;
+ font-size: 3.5rem;
+ font-weight: 300;
+ line-height: 2.625rem;
+ text-align: center;
+}
+.at-grid {
+ display: flex;
+ flex-direction: row;
+ flex-wrap: wrap;
+ background: #fff;
+ border: 1px solid #e2e9ed;
+}
+.at-grid[data-column="1"] .at-column {
+ width: 100%;
+ max-width: 100%;
+ min-width: 100%;
+ flex-basis: 100%;
+}
+.at-grid[data-column="2"] .at-column {
+ width: 50%;
+ max-width: 50%;
+ min-width: 50%;
+ flex-basis: 50%;
+}
+.at-grid[data-column="3"] .at-column {
+ width: 33.3333333333%;
+ max-width: 33.3333333333%;
+ min-width: 33.3333333333%;
+ flex-basis: 33.3333333333%;
+}
+.at-grid[data-column="4"] .at-column {
+ width: 25%;
+ max-width: 25%;
+ min-width: 25%;
+ flex-basis: 25%;
+}
+.at-grid[data-column="5"] .at-column {
+ width: 20%;
+ max-width: 20%;
+ min-width: 20%;
+ flex-basis: 20%;
+}
+.at-grid[data-column="6"] .at-column {
+ width: 16.6666666667%;
+ max-width: 16.6666666667%;
+ min-width: 16.6666666667%;
+ flex-basis: 16.6666666667%;
+}
+.at-grid[data-column="7"] .at-column {
+ width: 14.2857142857%;
+ max-width: 14.2857142857%;
+ min-width: 14.2857142857%;
+ flex-basis: 14.2857142857%;
+}
+.at-grid[data-column="8"] .at-column {
+ width: 12.5%;
+ max-width: 12.5%;
+ min-width: 12.5%;
+ flex-basis: 12.5%;
+}
+.at-grid[data-column="9"] .at-column {
+ width: 11.1111111111%;
+ max-width: 11.1111111111%;
+ min-width: 11.1111111111%;
+ flex-basis: 11.1111111111%;
+}
+.at-column {
+ z-index: 0;
+ position: relative;
+ background: #fff;
+ box-shadow: 0 0 0 1px #e2e9ed;
+ padding: 10px;
+ box-sizing: border-box;
+ transition: box-shadow 0.2s ease, transform 0.2s ease, z-index 0s 0.2s ease;
+}
+.at-column:before {
+ content: "";
+ display: block;
+ padding-top: 100%;
+}
+
+.at-column .at-social {
+ margin: 16px 0 0;
+ opacity: 1;
+}
+@media (max-width: 800px) {
+ .at-column {
+ width: 50% !important;
+ max-width: 50% !important;
+ min-width: 50% !important;
+ flex-basis: 50% !important;
+ }
+}
+@media (max-width: 600px) {
+ .at-column {
+ width: 100% !important;
+ max-width: 100% !important;
+ min-width: 100% !important;
+ flex-basis: 100% !important;
+ }
+}
+.at-user {
+ position: absolute;
+ top: 50%;
+ left: 0;
+ width: 100%;
+ transform: translate(0, -50%);
+ text-align: center;
+}
+.at-user__avatar {
+ width: 98px;
+ height: 98px;
+ border-radius: 100%;
+ margin: 0 auto 20px;
+ overflow: hidden;
+}
+.at-user__avatar img {
+ display: block;
+ width: 100%;
+ max-width: 100%;
+}
+.at-user__name {
+ color: #313435;
+ font-family: "Roboto", sans-serif;
+ font-size: 1.5rem;
+ font-weight: 500;
+ line-height: 2.625rem;
+}
+.at-user__title {
+ color: #6f808a;
+ font-family: "Roboto", sans-serif;
+ font-size: 0.875rem;
+ line-height: 2.375rem;
+}
+.at-social {
+ margin: 0 0 -18px;
+ opacity: 0;
+ transition: margin 0.2s ease, opacity 0.2s ease;
+}
+.at-social__item {
+ display: inline-block;
+ margin: 0 10px;
+}
+.at-social__item a {
+ display: block;
+}
+.at-social__item svg {
+ fill: #515f65;
+ display: block;
+ height: 18px;
+ transition: fill 0.2s ease;
+}
+.at-social__item svg {
+ fill: #788d96;
+}
+
+.container {
+ max-width: 1170px;
+ width: 100%;
+ padding: 0 20px;
+ box-sizing: border-box;
+ transform-origin: top center;
+ transform: scale(0.8);
+}