@font-face {
    font-family: 'services-icons';
    src: url('../assets/fonts/icomoon/icomoon.eot');

    src: url('../assets/fonts/services/icomoon.eot') format('embedded-opentype'),
        url('../assets/fonts/services/icomoon.ttf') format('truetype'),
        url('../assets/fonts/services/icomoon.woff') format('woff'),
        url('../assets/fonts/services/icomoon.svg') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: block;
}




[class^="icon-"],
[class*=" icon-"] {
    font-family: 'services-icons' !important;
    speak: never;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    display: inline-block;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.icon-1::before {

    content: "\e900";

}

.icon-2:before {

    content: "\e902";

}

.icon-3:before {

    content: "\e903";

}

.icon-4:before {

    content: "\e904";

}


.icon-5:before {

    content: "\e905";

}


.icon-6:before {

    content: "\e906";

}


.icon-7:before {

    content: "\e907";

}


.icon-8:before {

    content: "\e908";

}


.icon-9:before {

    content: "\e909";

}


.icon-10:before {

    content: "\e90a";

}


.icon-11:before {

    content: "\e90b";

}


.icon-12:before {

    content: "\e90c";

}


.icon-13:before {

    content: "\e90d";

}


.icon-14:before {

    content: "\e90e";

}


.icon-1,
.icon-2,
.icon-3,
.icon-4,
.icon-5,
.icon-6,
.icon-7,
.icon-8,
.icon-9,
.icon-10,
.icon-11,
.icon-12,
.icon-13,
.icon-14 {

    font-size: 40px;
    color: #021DA5;
}

/* header */
.header-img {
    max-width: 100%;
}

.contact-title {
    max-width: 400px;
}

.services-header-subtitle {

    font-weight: 500;
    font-size: 16px;

    color: #060B13;

    margin-top: 1rem;
}

.services-header-text {

    font-weight: 400;
    font-size: 14px;
    line-height: 24px;

    color: #363D4F;
    max-width: 195px;

}


.services-header-section .col-md-4 {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 3rem;
}


/* services */
.services-container {
    margin-top: 5rem;
}

.service-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 64px;
    height: 64px;

    background-color: rgba(17, 227, 171, 0.09);
    border-radius: 999px;
    padding: 12px;
}

.service-title {

    font-weight: 500;
    font-size: 21.9375px;
    line-height: 29px;

    color: #060B13;


}

.service-text {

    font-weight: 400;
    font-size: 14px;
    line-height: 24px;

    color: #363D4F;


}

.service-card {

    background: #FFFFFF;
    box-shadow: 0px 12px 40px rgba(6, 11, 19, 0.04), 0px 0px 0px 4px #FFFFFF;
    border-radius: 12px;
    border: 1px solid #E9EBF1;
    padding: 1rem;
    min-height: 200px;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1rem;
    transition: .4s;
}

.service-card p {
    margin: 0;
}

.discover-more {
    display: flex;
    text-decoration: underline;
    justify-content: end;

    font-family: var(--secondary-font);

    font-weight: 400;
    font-size: 12px;


    color: #010101;

    opacity: 0.5;

}

.service-card:hover {
    background-color: #021DA5;
    cursor: pointer;
    color: #FFFFFF;
}

.service-card:hover p,
.service-card:hover .discover-more {

    color: #FFFFFF;
    opacity: 1;
}

.service-card:hover .service-icon {

    background: rgba(255, 255, 255, 0.39);
    color: #FFFFFF;
}

.modal-content {


    border: 1px solid #E9EBF1;
    border-radius: 12px;
    width: 100%; 
    height: 100%; 

}

.modal-dialog {
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 1200px;
    width: 100%;
    min-height: 70vh;
    overflow: hidden;

}

.modal-header {
    display: flex;
    justify-content: end;
    border: none
}

.close-btn {
    border: none;
    background-color: transparent;
}

.key-features {

    font-family: var(--secondary-font);
    font-weight: 700;
    font-size: 20px;
    line-height: 24px;
    color: #021DA5;
    margin-bottom: 2rem;

}

.features-title {

    font-family: var(--secondary-font);
    font-weight: 500;
    font-size: 32px;
    color: #060B13;
    margin-bottom: 1rem;


}

#modalFeatures li {
    font-family: var(--secondary-font);
    font-weight: 400;
    font-size: 20px;
    margin: 10px 0;
    color: #363D4F;


}

.features-container {
    max-width: 900px;
    margin: 3rem 0;
    overflow-y: auto;
    width: 100%; 
}

.modal-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3rem;
  
}

.modal.show .service-icon {
    width: 100px;
    height: 100px;
}

.modal.show [class^="icon-"],
.modal.show [class*=" icon-"] {
    font-size: 60px;
    margin-bottom: 1rem;
}


/* faq section */
.faq-section .container {
    max-width: 600px;

}

.faq-section .accordion-item {
    margin: 1rem 0;
    border: none;
}

.faq-section .accordion-header {
    min-height: 90px;
    background: #FFFFFF;
    box-shadow: 0px 0px 0px 4px #FFFFFF;
    border-radius: 10px;
}

.accordion-button:not(.collapsed) {
    background: #FFFFFF;

}

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

.accordion-item .collapse {
    padding: 0 1rem;
}

.accordion-button.collapsed {
    border-radius: 10px;
    border: 1px solid #E9EBF1;
    min-height: 90px;

}

.faq-title {
    max-width: 570px;

    font-family: var(--secondary-font);

    font-weight: 500;
    font-size: 44px;

    color: #060B13;
    text-align: center;
    margin: 2rem 0;
}

.faq-section .accordion {
    margin: 6rem 0;

}

.accordion-bg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: -1;
}



@media (max-width:450px) {
    .header-img {
        margin: 4rem 0;
        width: 50%;
    }

    .faq-title {
        font-size: 30px;
    }

    .modal.show .features-title {
        font-size: 25px
    }

    .modal.show .key-features {
        font-size: 16px;
    }

    .modal.show #modalFeatures li {
        font-size: 16px;
    }
}