@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');

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

:root {
    --primary-color: #3A648B;
    --secondary-color: #EAEDFA;
}

body {
    font-family: 'Poppins', sans-serif;
    background: white;
}



a {
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}


p {
    font-size: 14px;
}

.btn {
    background: var(--primary-color);
    padding: 10px 15px;
    color: white;
    font-size: 14px;
    border: none;
    border-radius: 5px;
    display: block;
    margin: 15px auto;
    cursor: pointer;
    border: 1px solid var(--primary-color);
    transition: .4s;
}

.btn:hover {
    background: none;
    color: var(--primary-color);
}

/* Breadcrumb area */
.breadcrumb-section {
    padding: 50px 0px;
    background: url(../images/digital.jpg);
    background-position: top;
    background-size: cover;
    margin-top: 100px;
}

.breadcrumb-section .breadcrumb-wrapper h2 {
    font-size: 30px;
    font-weight: 700;
    color: white;
    text-transform: uppercase;
    margin-bottom: 10px;
    padding: 10px 15px;
    display: inline-block;
    background: var(--primary-color);

}



/* Database paragraph area  */
.database-para-section {
    padding: 20px 0px;
}

.database-para-section p {
    font-size: 16px;
    margin-bottom: 10px;
}

/* accordion-card-area */
.accordion {
    box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.16);
    margin-bottom: 40px;
}

.accordion h2 {
    margin: 0% !important;
}

.accordion p {
    font-size: 14px;
}

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

.accordion-button img {
    width: 40px;
    margin-right: 20px;
}

.accordion-button {
    color: var(--primary-color);
    font-size: 18px;
    font-weight: 600;
    -ms-word-break: break-all;
    word-break: break-all;

    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    padding: 1rem 1.25rem;
    color: #212529;
    text-align: left;
    background-color: #fff;
    border: 0;
    border-radius: 0;
    overflow-anchor: none;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out, border-radius .15s ease;

}

.accordion-item:first-of-type {
    border-top-left-radius: .25rem;
    border-top-right-radius: .25rem;
}

.accordion-item {
    background-color: #fff;
    border: 1px solid rgba(0, 0, 0, .125);
}

.accordion-body {
    padding: 1rem 1.25rem;
}

.accordion-button::after {
    flex-shrink: 0;
    width: 1.25rem;
    height: 1.25rem;
    margin-left: auto;
    content: "";
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23212529'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-size: 1.25rem;
    transition: transform .2s ease-in-out;
}

.accordion-item:not(:first-of-type) {
    border-top: 0;
}

.accordion-body p {
    margin-bottom: 0px;
}

.accordion-button:not(.collapsed) {
    color: var(--primary-color);
    background-color: transparent !important;
    box-shadow: none !important;
}

.accordion-header-bg {
    background-color: #e3efff;
    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .125);

}

.accordion-button input {
    margin-right: 15px;
}

.form-check-input[type=checkbox] {
    border-radius: 0;
    border: 1px solid var(--primary-color);
}

.form-check-input[type=checkbox]:focus {
    box-shadow: none;
}

.form-check-input:checked {

    background: none;
    border: 1px solid var(--primary-color);
}

.form-check-input:checked[type=checkbox] {
    background-image: url(../images/Icon\ feather-check.svg);

    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;

}

.accordion .read-more-btn {
    border: none;
    outline: none;
    background: none;
    color: blue;
    display: inline;
}

.accordion-button::after {
    content: "";
    background-image: url(../images/Icon\ awesome-chevron-down.svg);
    transition: .3s;
}

.accordion-button:not(.collapsed)::after {
    content: "";
    background-image: url(../images/Icon\ awesome-chevron-down.svg);
    transform: rotate(180deg);
}


/* start working area */

.start-working-area {
    padding: 50px 0px;

}

.start-working-area .working-title-wrapper {
    text-align: center;
    width: 100%;
}

.start-working-area .working-title-wrapper h2 {
    color: var(--primary-color);
    font-weight: 700;
    font-size: 36px;
    text-transform: uppercase;
    margin-bottom: 5px;
}


.working-title-wrapper p {
    width: 60%;
    display: block;
    margin: auto;
    margin-top: 15px;
}

.start-working-area .working-title-wrapper hr {
    max-width: 350px;
    display: block;
    height: 2px;
    opacity: 1;
    margin: auto;

    background: #000;
}

.start-working-area .message-area {
    width: 50%;
    position: relative;
    margin-top: 50px;

}

.start-working-area .message-area .dropdown-item {
    visibility: visible;
    opacity: 1;
    position: inherit;
}

.message-area .name,
.company,
.email,
.message {
    position: relative;
}

.start-working-area .message-area input {
    padding: 15px 40px 15px;
    margin-bottom: 10px;
    width: 100%;
    border: none;
    outline: none;


}

.start-working-area .message-area input[type="checkbox"] {
    width: 30px;
    margin: 0;
    margin-top: 5px;
}

.start-working-area .message-area .term {
    display: flex;
}

.start-working-area .message-area textarea {
    width: 100%;
    padding: 15px 40px;
    margin-bottom: 10px;
    color: var(--primary-color);
    border: none;
    outline: none;

}

.start-working-area .message-area .btn:first-child {
    margin: 0%;
    width: 100%;
    text-align: left;
    border: none;
    background: white;
    color: black;
    padding: 15px 10px;
    margin-bottom: 10px;
}

.start-working-area .message-area .btn:focus {
    box-shadow: none;
}

.dropdown-menu {
    width: 100%;
    padding-left: 0% !important;
    z-index: 1;

}

.dropdown-toggle::after {
    display: inline-block;
    margin-left: .255em;
    vertical-align: middle;

    content: "";
    border-top: .3em solid;
    border-right: .3em solid transparent;
    border-bottom: 0;
    border-left: .3em solid transparent;
}

.message-area .dropdown-item {
    display: block;
    width: 100%;
    padding: .25rem 1rem;
    clear: both;
    font-weight: 400;
    color: #212529;
    text-align: inherit;
    text-decoration: none;
    white-space: nowrap;

    border: 0;
}

.start-working-area .message-area i {
    font-size: 25px;
    color: var(--primary-color);
    position: absolute;
    top: 10px;
    left: 10px;

}

.start-working-area .message-area .btn {
    margin: 0%;
    margin-top: 10px;
    width: 100px;
}

.start-working-area .message-and-img-wrapper {
    display: flex;
    padding-bottom: 40px;
    margin-bottom: 100px;
    background: #f2f2f2;
    padding: 10px;
}

.start-working-area .image-area {
    width: 50%;
    padding: 50px;

    display: flex;
    align-items: center;
    justify-content: center;
}

.start-working-area .image-area img {
    display: block;
    width: 90%;
    align-self: center;
}


.navbar-nav {
    flex-direction: row;
}


.navbar-nav .dropdown-menu {
    position: absolute;
}

.navbar {

    padding-top: 0rem;
    padding-bottom: 0rem;
}



.start-working-area .message-area input:focus {
    border: 2px solid var(--primary-color);
}

.start-working-area .message-area input[type="checkbox"]:focus {
    outline: none;
}

.start-working-area .message-area textarea:focus {
    border: 2px solid var(--primary-color);
}


.start-working-area .message-area select:focus {
    border: 2px solid #3b7eb8 !important;
}

.error-text {
    color: red !important;
    background-color: white;
    text-align: center;
    padding: 5px;
    position: relative;

}





.start-working-area .message-area .error-icon {
    color: red !important;
    top: 2px;
    left: -5px;
    position: relative;
    font-size: 20px;
}


input,
textarea,
select,
button,
.message-and-img-wrapper {
    border-radius: 8px;
}

.form-check-input[type=checkbox]:focus {
    outline: none;
}


.marquee-wrapper {
    overflow: hidden;
    display: flex;
    padding: 6px 0px;
    position: fixed;
    left: 50%;
    bottom: 37.8px;
    transform: translateX(-50%);
    background: #fff;
    width: 1230px;
    z-index: 10;
    transition: all 0.6s;
}



.marquee {
    display: flex;
    display: -webkit-flex;
    align-items: center;
    -moz-animation: marquee 25s linear infinite;
    -webkit-animation: marquee 25s linear infinite;
    animation: marquee 55s linear infinite;
}


.marquee {
    display: flex;
    display: -webkit-flex;
    align-items: center;
    -moz-animation: marquee 170s linear infinite;
    -webkit-animation: marquee 170s linear infinite;
    animation: marquee 170s linear infinite;
    /* I set the marquee animation here for 170 seconds (170s).
You can increase and decrease it to control the speed of the marquee. 
Increase it to slow down the marquee.
Decrease it to speed up the marquee.*/
}

.marquee img {
    height: 50px;
    margin-right: 20px;
    display: inline;
}

@keyframes marquee {
    0% {
        margin-left: 100%;
    }

    100% {
        margin-left: 0%;
        transform: translateX(-100%)
    }

}

.mrqstop {
    animation-play-state: paused;
    /*the animation will be stop on click*/
}


.dropdown-menu li {
    list-style-type: none !important;
}


.accordion-item h2 {
    display: flex;
    align-items: center;

}

.accordion-item input[type="checkbox"] {
    margin-left: 10px;

}


.form-check-input {
    width: 1.5em;
    height: 1.5em;
}

@media screen and (max-width:880px) {
    .breadcrumb-section {
        margin-top: 68px;
    }
}

@media screen and (max-width:767px) {
    .start-working-area .message-and-img-wrapper {
        display: flex;
        padding-bottom: 40px;
        flex-direction: column;
    }

    .breadcrumb-section {
        margin-top: 50px;
    }

    .breadcrumb-section .breadcrumb-wrapper h2 {
        font-size: 22px;
    }

    .start-working-area .message-area {
        width: 100%;
        position: relative;
        margin-top: 50px;
    }

    .start-working-area .image-area {
        width: 100%;
        padding: 50px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .accordion-button {
        font-size: 16px;

    }

    #hide-marquee-btn {
        display: block !important;
    }

    .footer-menu .hide-scroller-btn {
        display: block;
    }
}

@media screen and (max-width:756px) {
    .marquee-wrapper {
        bottom: 0px !important;
    }


}

/*
.lt-pencil {
    background: url("../../icons/lt-pencil.png") no-repeat left;

    padding-left: 25px;
    background: url("https://static.thenounproject.com/png/101791-200.png") no-repeat left;
    background-size: 20px;
*/
}