* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}







:root {
    --primary-color: #b9ff66;
    --secondary-color: #000000;
    --light-color: #ffffff;
    --first-level-heading: 60px;
    --second-level-heading: 40px;

    --primary-bg: #b9ff66;
    --secondary-bg: #000000;

}

/* utilities */

.bg-primary {
    background-color: var(--primary-color);
}
.bg-dark {
    background-color: var(--secondary-color);
}
.bg-light {
    background-color: var(--light-color);
}
.c-primary {
    color: var(--primary-color);
}
.c-dark {
    color: var(--secondary-color);
}
.c-light {
    color: var(--light-color);
}

.flex {
    display: flex;
}
.justify-between {
    justify-content: space-between;
}
.justify-center {
    justify-content: center;
}
.align-center {
    align-items: center;
}
.direction-column {
    flex-direction: column;
}
.wrap {
    flex-wrap: wrap;
}

.h100 {
    height: 100%;
}







.container {
    max-width: 1240px;
    width: 90%;
    margin: 0 auto;
    
}


header{
    
    margin-top: 60px;
  
    & nav {
        display: flex;
        gap: 30px;
        align-items: center;
        a {
            text-decoration: none;
            color: var(--secondary-color);
            font-size: 18px;
            font-weight: 500;
           
        }
         & :last-of-type{
                border: 1px solid var(--secondary-color);
                border-radius: 14px;
                padding: 20px 35px;
                cursor: pointer;
            
            }
    }
}

.welcome-wrapper {
    display:flex;
    justify-content: space-between;
    margin-top: 70px;
    & .text-content {
        display: flex;
        flex-direction: column;
        gap: 30px;
        & h1 {
            font-size: var(--first-level-heading);
            
        }
        & p {
            font-size: 18px;
            color: var(--secondary-color);
            width: 80%;
        }
    }
     & button {
            background-color: var(--secondary-color);
            color: var(--light-color);
            width:264px;
            height:68px;
            border-radius: 14px;
            cursor: pointer;
     }

     & img {
        width: 500px;
     }

        
       
       
  
}

.partner-wrapper {
    display: flex;
    justify-content: center;
    margin-top: 70px;
    & .partner {
        display: flex;
        gap: 50px;
        align-items: center;
        & img {
            width: 120px;
        }
    }
}

section.services {
    & header {
        
        & p {
            max-width: 580px;
        }
    }
    & .cards-wrapper {
        gap: 40px;
        
        & .card {
            width: 600px;
            height: 310px;
            padding: 50px;
            border-radius: 45px;
            border: 1px inset var(--secondary-color);
            box-shadow: 0 5px 0 0 var(--secondary-color);

            &:hover {
                animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
                transform: translate3d(0, 0, 0);
                perspective: 1000px;
            }
            & .text-content {
                width: 220px;
                
                & h3 {
                    font-size: var(--third-level-heading);
                    text-transform: capitalize;
                    & span {
                        border-radius: 7px;
                        padding-inline: 7px;
                        display: inline-block;
                        white-space: nowrap;
                    }
                }
                & a {
                    gap: 15px;
                    font-size: 20px;
                    & .circle {
                        width: 41px;
                        height: 41px;
                        border-radius: 50%;
                        & svg {

                        }
                    }

                }
            }  
            & .image-content {
                & img {
                    display: block;
                }
            }
        }
    }
}