@import url('../callToActionBoxShape.css');
@import url('../tablev1.css');
@import url('../faq.css');

.dyn-onDemand-cardSecOne-v1 {
    border: 1px solid transparent;
    background-color: var(--card-clr);
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: .78rem;
    height: 100%;
    border-radius: .5rem;
    transform: translateY(0);
    transition: transform 0.4s ease-in-out, 0.4s ease-in-out;
}

.dyn-onDemand-cardSecOne-v1:hover .strong-text-sm {
    transition: color 0.4s ease-in-out;
    color: var(--dark-clr);
}

.dyn-onDemand-cardSecOne-v1:hover {
    transform: translateY(-2%);
    border: 1px solid var(--dark-clr);
}

.dyn-onDemand-min-height-v1 {
    height: 700px;
    overflow-y: scroll;
    scrollbar-width: thin;
    scrollbar-color: #0180f7 rgba(136, 119, 136, 0);
}

.dyn-onDemand-scrl-box-v1 {
    background-color: white;
    padding: 1.5rem;
    border-radius: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    height: 100%;
    border: 2px solid transparent;
    transition: 0.4s ease-in-out;
}

.dyn-onDemand-scrl-box-v1:hover {
    border: 2px solid var(--dark-clr);
}

.dyn-onDemand-tab-left-v1{
    border-radius: 1rem 0 0 1rem;
    scrollbar-width: thin;
    scrollbar-color: #0180f7 rgba(136, 119, 136, 0);
}

.dyn-onDemand-tab-btn-container-v1{
    position: sticky;
    top: 15%;
}

.dyn-onDemand-tab-btn-v1 {
    padding: 2rem 1rem;
    border-radius: .5rem;
    font-size: 1rem;
    font-weight: 600;
    background-color: var(--card-clr);
    transition: .3s ease-in-out;
}

@media (max-width: 991px){
    .dyn-onDemand-tab-btn-v1 {
        white-space: nowrap;
    }
}

.dyn-onDemand-tab-btn-v1:hover,
.dyn-onDemand-tab-btn-v1.active {
    background-color: var(--dark-clr);
    color: white;
}

.dyn-onDemand-cardSecTwo-v1 {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.5rem;
    background-color: var(--card-clr);
    border-radius: 1rem 0;
    margin: 1rem 0;
    height: 100%;
    transition: .3s ease-in-out;
    box-shadow: var(--dark-clr) 0px 0px 0px;
}

.dyn-onDemand-cardSecTwo-v1:hover{
    box-shadow: var(--dark-clr) 8px 8px 0px;
}

.dyn-onDemand-cardSectionThree-v1 {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    align-items: start;
    background-color: white;
    border-radius: .75rem;
    padding: 1rem;
    border: 2px solid var(--card-clr);
    height: 100%;
    transition: .3s ease-in-out;
}

.dyn-onDemand-cardSectionThree-v1:hover {
    background-color: var(--card-clr);
}


.dyn-onDemand-cardSectionFour-v1 {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    align-items: start;
    background-color: white;
    border-radius: .75rem;
    padding: 1rem;
    height: 100%;
    border: 1px solid transparent;
    transform: scale(1);
    transition: .2s ease-in-out;
}

.dyn-onDemand-cardSectionFour-v1:hover {
    border: 1px solid var(--dark-clr);
    transform: scale(1.01);
    box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 50px;
}

.dyn-onDemand-cardSectionFive-v1 {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    align-items: start;
    background-color: white;
    border-radius: .75rem;
    padding: 1rem;
    height: 100%;
    border: 1px solid var(--dark-clr);
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
    transition: .3s ease-in-out;
}

.dyn-onDemand-cardSectionFive-v1:hover {
    background-color: var(--card-clr);
}

.dyn-onDemand-rightHdSticky-v2 {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    align-items: start;
    background-color: white;
    border-radius: .5rem;
    padding: 1rem;
    height: 100%;
    border-right: 2px solid transparent;
    transition: .3s ease-in-out;
}

.dyn-onDemand-rightHdSticky-v2:hover {
    border-right: 2px solid var(--dark-clr);
}


.dyn-onDemand-development-box-v1 {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    background-color: var(--dark-clr);
    border-radius: 1.5rem;
    margin: 1rem 0;
}

.dyn-onDemand-dev-box-inner-v1 {
    border-radius: 1.5rem;
    padding: 1rem;
    background-color: #ffff;
    box-shadow: 0.3125rem 0rem 0.875rem 0rem rgba(0, 0, 0, 0.25);
}

.dyn-onDemand-dev-box-no-v1 {
    font-size: 4rem;
    font-weight: 600;
    color: #fff;
    padding: 1rem 2rem;
}

@media (max-width: 767px){
    .dyn-onDemand-development-box-v1 {
        flex-direction: column;
    }
}


.dyn-onDemand-cardSectionSix-v1{
    display: flex;
    flex-direction: column;
    gap: .75rem;
    padding: 1rem;
    background-color: var(--card-clr);
    height: 100%;
    border: 1px solid var(--dark-clr);
    border-radius: .56rem;
}


.dyn-onDemand-cardSectionSeven-v1 {
    padding: 1rem;
    background-color: var(--card-clr);
    height: 100%;
    border: 2px solid transparent;
    corner-shape: bevel;
    border-radius: 1rem;
    transition: .3s ease-in-out;
}

.dyn-onDemand-cardSectionSeven-v1:hover {
    border: 2px solid var(--dark-clr);
}