:root {
    --dark: #09112F;
    --light: #ffffff;
    --muted: #E1E6F5;
    --gold: #D1C086;
    --light-blue: #151D39;
    --transparent: #222944;
    --grey: #F5F5F5;
    --grey-x: #757a8a;
    --green: #5CD067;
}
body {
    font-family: 'Rubik', sans-serif;
}

.bg-light { background-color: var(--grey) !important; }
.bg-dark { background-color: var(--dark) !important; }

.text-muted {
    color: var(--muted) !important;
}

.text-grey {
    color: var(--grey-x);
}

.text-gold {
    color: var(--gold);
}

.btn {
    padding: 10px 14px;
    border-radius: 5rem;
    font-size: 15px;
}

.btn-outline-success {
    color: var(--green);
    border-color: var(--green);
}

section {
    padding: 120px 0;
}

.light-blue {
    background:var(--light-blue) !important;
}

.accordion-container {
    border-radius: 50px;
    padding: 60px 120px 0 120px;
}

.services {
    min-height: 800px;
}

.hero-img {
    max-width: 450px;
}

.ipad {
    position: absolute;
    bottom: -150px;
    top: 750px;  
    left: 50%; 
    transform: translate(-50%, -50%); 
}

.border-top {
    border-top: 1px solid var(--transparent) !important;
}

.logos img {
    max-width: 200px;
}

.member {
    max-width: 60px;
}

.accordion-button:focus {
    border-color: unset;
    box-shadow: none;
}

.accordion-button::after {
    background-image: url('img/add-circle.svg');
}

.accordion-button:not(.collapsed)::after {
    background-image: url('img/remove-circle.svg');
}

.bg-icon {
    background-color: var(--light);
}

.icon-sm {
    max-width: 30px;
}

.border {
    border: 1px solid #f1f2f5 !important;
}

@media (max-width: 768px) { 
    .w-50 {
        width: 100% !important;
    }
    .services {
        min-height: 900px;
    }
    .ipad {
        top: 900px;
    }
    .w-75 {
        width: 100% !important;
    }
}

@media (max-width: 576px) {
    .accordion-container {
        padding: 60px 20px 0 20px;
        border-radius: 20px;
    }
    .btn {
        min-width: 100%;
    }
    .hero-img {
        max-width: 100%;
    }
}