Add styles to team section

Author: Bryson69

assets/css/styles.css

@@ -237,15 +237,15 @@ img {
     margin-bottom: 2.5rem;
 }
 
-.button {
+.home__button {
     display: inline-block;
     background-color: var(--first-color-dark);
     color: var(--white-color);
     padding: 1.125rem 2rem;
     border-radius: .5rem;
 }
 
-.button:hover {
+.home__button:hover {
     background-color: var(--first-color-darken);
 }
 
@@ -302,6 +302,111 @@ img {
 }
 
 
+/* ===== TEAM ====== */
+
+.team__container{
+    position: relative;
+    z-index: 1;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-wrap: wrap;
+    margin: 40px 0;
+    /* width: 70%; */
+}
+
+.team__container .team__card{
+    position: relative;
+    width: 300px;
+    height: 400px;
+    background: rgba(255, 255, 255, 0.05);
+    margin: 20px;
+    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
+    border-radius: 15px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    backdrop-filter: blur(10px);
+}
+
+.team__container .team__card .team__content{
+    position: relative;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    opacity: 0.5;
+    transition: 0.5s;
+}
+
+.team__container .team__card:hover .team__content{
+    opacity: 1;
+    transform: translateY(-20px);
+}
+
+.team__container .team__card .team__content .team__img{
+    position: relative;
+    width: 150px;
+    height: 150px;
+    border-radius: 50%;
+    overflow: hidden;
+    border: 10px solid rgba(0, 0, 0, 0.25);
+}
+
+.team__img  img{
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+
+.team__text h3{
+    color: var(--text-color);
+    text-transform: uppercase;
+    letter-spacing: 2px;
+    font-weight: 500;
+    text-align: center;
+    margin: 20px 0 10px;
+    line-height: 1.1em;
+}
+
+.team__text span{
+    font-size: 12px;
+    font-weight: 300;
+    text-transform: initial;
+}
+
+.team__icon{
+    position: absolute;
+    bottom: 50px;
+    display: flex;
+}
+
+.team__icon li{
+    list-style: none;
+    margin: 0 10px;
+    transform: translateY(40px);
+    transition: 0.5s;
+    opacity: 0;
+    transition-delay: calc(0.1s * var(--i));
+}
+
+.team__card:hover .team__icon li{
+    transform: translateY(0px);
+    opacity: 1;
+    
+}
+
+.team__icon li a{
+    color: #11122b;
+    font-size: 28px;
+}
+
+.team__icon li a:hover{
+    color: var(--first-color-darken);
+}
 /* ===== JOIN US====== */
 .join__container{
     display: flex;
@@ -336,8 +441,9 @@ li{
 .course__preview {
 	background-color:var(--first-color);
 	color: var(--white-color);
-	padding: 100px;
+	padding: 45px;
 	max-width: 350px;
+    font-size: 20px;
 }
 
 .course__preview a {