/* ================ =================== */ 
.contact-heading {
    background-color: #192733; 
    padding-top: 5rem;
    padding-bottom: 0;
    .container {
        display: flex; 
        align-items: center; 
        gap: 20px; 
        justify-content: space-between; 
        max-width: 80%; 
        flex-wrap: wrap;
        padding: 0;
        .text-wrapper {
            max-width: 50%;
            h4.text-header {
                color: white; 
                font-size: 2.5rem;
                font-weight: 800;
            }
            p.text-header-desc {
                color: white; 
                font-size: 1.2rem;
            }
        }
        img.img-header {
            max-width: 47%;
        }
    }
}

.contact-card-wrapper {
    height: auto;
    max-width: 85%;
    margin: auto;
    margin-top: -55px;
    position: relative;
    z-index: 2;
    display: flex;
    overflow: hidden;
    justify-content: center;
    .card-body {
        .card-title-wrapper {
            .mdi-phone::before,
            .mdi-email-check::before {
                font-size: 4.5rem;
                margin-bottom: 1.5rem;
            }
            h4.card-title {
                font-size: 1.4rem;
                font-weight: 800;
            }
        }
        p.card-desc {
            font-size: 1.2rem;
        }
        a.contact-list-btn {
            padding: 0.90rem 2rem;
            transition: 0.4s;
            font-size: 1rem;
            color: #ffff;
            border-color: #4b93da;
            background-color: #4b93da;
            &:hover {
                border-color: #636ede;
                background-color: #636ede;
            }
        }
        a.contact-link-btn {
            text-decoration: underline;
            font-size: 1.1rem;
        }
    }
}

.contact-popular-links {
    padding-top: 4rem;
    padding-bottom: 4rem;
    max-height: 100vh;
    .container {
        .popular-wrapper {
            p.card-desc {
                font-size: 1rem;
            }
            a.card-btn {
                border-color: #4b93da !important;
                color: #4b93da !important;
                &:hover {
                    color: #666cff !important;
                    border-color: #636ede !important;
                }
            }
        }
        .need-help-wrapper {
            p.text-desc {
                font-size: 1rem;
            }
            button.viber-community-btn {
                border-color: #4b93da;
                background-color: #4b93da;
                padding: 0.80rem 2rem;
                font-size: 1rem;
                &:hover {
                    border-color: #636ede;
                    background-color: #636ede;
                }
            }
            .modal {
                display: none;
                justify-content: center;
                align-items: center;
                .close-btn {
                    position: absolute;
                    top: 20px;
                    right: 50px;
                    font-size: 35px;
                    font-weight: bold;
                    cursor: pointer;
                }
                .modal-content {
                    width: 30%;
                    max-height: 100%;
                    animation: zoomIn 0.5s ease;
                }
                @keyframes zoomIn {
                    from { transform: scale(0.5); opacity: 0; }
                    to { transform: scale(1); opacity: 1; }
                }
            }
        }
    }
    .dotted {
        width: 100%;
        height: 40px;
        background-image: url('../img/front-pages/landing-page/point.png');
        /* top: -21; */
        /* margin-bottom: -55px; */
    }
}

.blog-link {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    padding-top: 6rem;
    padding-bottom: 6rem;
    .container-fluid {
        /* display: flex;  */
        /* align-items: center;  */
        /* gap: 20px;  */
        /* justify-content: space-between;  */
        padding: 0;
        max-width: 85%;
        margin: auto;
        /* flex-wrap: wrap; */
        .text-wrapper {
            h5.text-header {
                font-size: 1.2rem;
                font-weight: 500;
                margin-bottom: 0 !important;
                color: #7e7e7e;
            }
            h4.text-title {
                font-weight: 800;
                .mdi-download-box::before {
                    font-size: 3.5rem;
                    letter-spacing: .03rem;
                }
            }
        }
        a.btn-link {
            padding: 1rem 2rem;
            transition: 0.4s;
            color: #ffff;
            border-color: #4b93da;
            background-color: #4b93da;
            font-size: 1rem;
            line-height: 1;
            /* font-weight: 500; */
            .mdi-arrow-right-thin {
                &::before {
                    font-size: 1.1rem;
                    letter-spacing: .03rem;
                    font-weight: 700;
                }
            }
            &:hover {
                border-color: #636ede;
                background-color: #636ede;
            }
        }
    }
}

.contact-list-modal {
    .modal-body {
        padding: 3rem;
        .modal-title {
            font-weight: 800;
            font-size: 1.3rem;
        }
        .table {
            .office-region {
                font-size: 0.90rem;
            }
            .office-details {
                font-size: 0.90rem;
            }
        }
    }
}


/* ==================================================================== */
/* ===============================LIGHT THEME========================== */ 
/* ===============================LIGHT THEME========================== */ 
/* ==================================================================== */
.light-style {
    .contact-card-wrapper {
        .card-body {
            a.contact-link-btn {
                color: #484554;
                &:hover {
                    color: #666cff;
                }
            }
        }
    }
    .contact-popular-links {
        background-color: #fff;
        .container {
            .need-help-wrapper {
                .modal {
                    background-color: rgba(230, 230, 230, 0.817);
                    .close-btn {
                        color: #474747bd;
                    }
                }
            }
        }
    }
    .blog-link {
        background-image: url('../img/front-pages/landing-page/light-about-bg.png');
    }
    .contact-list-modal {
        .modal-body {
            .table {
                .office-region {
                    color: #484554;
                }
                .office-details {
                    color: #484554;
                }
            }
        }
    }
}

/* ===================================================================== */
/*===============================END OF LIGHT PAGE====================== */ 
/* ==============================END OF LIGHT PAGE====================== */ 
/* ===================================================================== */


/* ===================================================================== */
/* =================================DARK THEME========================== */ 
/* =================================DARK THEME========================== */ 
/* ===================================================================== */

.dark-style {
    .contact-card-wrapper {
        .card-body {
            a.contact-link-btn {
                color: #f7f6ff;
                &:hover {
                    color: #8685ef;
                }
            }
        }
    }
    .contact-popular-links {
        background-color: #30334e;
        .container {
            .need-help-wrapper {
                .modal {
                    background-color: rgba(121, 121, 121, 0.688);
                    .close-btn {
                        color: #efefefbd;
                    }
                }
            }
        }
    }
    .blog-link {
        background-image: url('../img/front-pages/landing-page/dark-about-bg.png');
    }
    .contact-list-modal {
        .modal-body {
            .table {
                .office-region {
                    color: #d2d2e8;
                }
                .office-details {
                    color: #d2d2e8;
                }
            }
        }
    }
}

/* ===================================================================== */
/*================================END OF DARK PAGE====================== */ 
/* ===============================END OF DARK PAGE====================== */ 
/* ===================================================================== */