/*
Theme Name: the7dtchild
Author: Dream-Theme
Author URI: http://dream-theme.com/
Description: The7 is perfectly scalable, performance and SEO optimized, responsive, retina ready multipurpose WordPress theme. It will fit every site – big or small. From huge corporate portals to studio or personal sites – The7 will become a great foundation for your next project!
Version: 1.0.0
License: This WordPress theme is comprised of two parts: (1) The PHP code and integrated HTML are licensed under the GPL license as is WordPress itself.  You will find a copy of the license text in the same directory as this text file. Or you can read it here: http://wordpress.org/about/gpl/ (2) All other parts of the theme including, but not limited to the CSS code, images, and design are licensed according to the license purchased. Read about licensing details here: http://themeforest.net/licenses/regular_extended
Template: dt-the7
*/


.table-ap{
	font-weight: 400;
	font-size: 18px;
	line-height: 28px;
}

/*Home Page Animation Line Section*/

.app_enterprise {
    position: relative;
}
.app_enterprise .elementor-element-50e40b7 {
    display: none !important;
}
.app_enterprise .elementor-element-ea13b89 {
    position: relative !important;
    overflow: visible !important;
}
.app_enterprise .elementor-element-fb6f85 svg,
.app_enterprise .elementor-element-3005563 svg,
.app_enterprise .elementor-element-00e3b97 svg,
.app_enterprise .elementor-element-f2b858f svg,
.app_enterprise .elementor-element-18cf154 svg {
    transform: scale(1) !important;
    transition:
        filter 0.5s ease,
        opacity 0.5s ease,
        transform 0.5s ease;
}
.app_enterprise .app-step svg {
    opacity: 1 !important;
    transform: scale(1.05) !important;
    background-color: gray;
    color:#0B1F3A !important;
    border: 2px solid #E2E8F0E5;
}
.app_enterprise .app-step-active svg {
    opacity: 1 !important;
    background-color: #0B1F3A;
}
.app_enterprise .elementor-icon{
    background-color: #F8FAFC;
    border:2px solid #E2E8F0E5;
    border-radius: 4px;
    padding: 12px;
    transition:
        filter 0.5s ease,
        opacity 0.5s ease,
        transform 0.5s ease;
}
.app_enterprise .app-step-active .elementor-icon{
    background-color: #0B1F3A;
    color:white;
    padding: 12px;
    border: 2px solid transparent;
}
.app_enterprise .app-step-active .elementor-icon svg path {
    fill: #fff !important;
    stroke: none !important;
}
.app_enterprise .app-step-active:nth-child(2) .elementor-icon svg path,
.app_enterprise .app-step-active:nth-child(5) .elementor-icon svg path {
    fill: none !important;
    stroke: #fff !important;
}
.app_enterprise .app-step-active:nth-child(2) .elementor-icon svg mask path {
    fill: #fff !important;
    stroke: none !important;
}
.app_enterprise .app-step-active:nth-child(5) .elementor-icon,
.app_enterprise .app-step-active:nth-child(5) svg{
    background-color: #2563EB;
}   
.app-enterprise-lines {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    pointer-events: none !important;
    z-index: 1 !important;
    overflow: visible !important;
}
.app-enterprise-line {
    position: absolute !important;
    display: block !important;
    height: 3px !important;
    min-height: 3px !important;
    background: #D9E2EC !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    opacity: 1 !important;
}
.app-enterprise-line-fill {
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    width: 0 !important;
    height: 100% !important;
    background: #0d1e39 !important;
    border-radius: 10px !important;
    transition: width 0.9s ease !important;
}
.app-enterprise-line.is-active .app-enterprise-line-fill {
    width: 100% !important;
}
.app_enterprise .elementor-element-fb6f85,
.app_enterprise .elementor-element-3005563,
.app_enterprise .elementor-element-00e3b97,
.app_enterprise .elementor-element-f2b858f,
.app_enterprise .elementor-element-18cf154 {
    position: relative !important;
    z-index: 3 !important;
}
@media (max-width: 767px) {
    .app-enterprise-line {
        width: 3px !important;
        min-width: 3px !important;
        height: auto !important;
        min-height: 0 !important;
    }
    .app-enterprise-line-fill {
        width: 100% !important;
        height: 0 !important;
        transition: height 0.7s ease !important;
    }
    .app-enterprise-line.is-active .app-enterprise-line-fill {
        width: 100% !important;
        height: 100% !important;
    }
}

/*End*/


/* Service Page Banner Animation Line */

.app_enterprise {
    position: relative;
}
.app_enterprise .process-icon {
    position: relative;
    z-index: 5;
}
.app_enterprise .process-icon:not(:last-child)::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 52px;
    width: 2px;
    height: 70px;
    background: #d9d9d9;
    transform: translateX(-50%);
    z-index: 1;
    pointer-events: none;
}
.app_enterprise .process-icon:not(:last-child)::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 52px;
    width: 2px;
    height: 0;
    background: #2563EB;
    transform: translateX(-50%);
    z-index: 2;
    pointer-events: none;
    transition: height 3.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.app_enterprise .process-icon .elementor-icon {
    transition:
        transform 0.6s ease,
        background-color 0.6s ease;
}
.app_enterprise .process-icon.active .elementor-icon {
    background-color: #2563EB;
}
.app_enterprise .process-icon.active .elementor-icon svg path {
    stroke: #fff !important;
}
.app_enterprise .process-icon.active:nth-child(3) .elementor-icon svg path {
    fill: white;
    stroke: none !important;
}
.app_enterprise .process-icon.line-active::before {
    height: 70px;
}
.app_enterprise .process-icon.completed::before {
    height: 70px;
    transition: none;
}
.app_enterprise.reset-animation .process-icon::before {
    transition: none !important;
}
.content-box {
    transition:
        border-color 0.8s ease,
        color 0.8s ease;
}
.content-box.content-active {
    border-color: #2563EB !important;
}
.content-box.content-active h3 {
    color: #2563EB !important;
}
@media (max-width: 767px) {

    .app_enterprise .process-icon::before,
    .app_enterprise .process-icon::after {
        display: none;
    }

}

/*End*/

/* Service Page Number Animation Line */

.app-data-business {
    position: relative;
    display: flex;
    align-items: flex-start;
}
.app-data-business > .e-con {
    position: relative;
    z-index: 2;
    flex: 1;
}
.app-data-business > .e-con:not(:last-child)::after {
    content: "";
    position: absolute;
    left: 40px;
    right: 0px;
    top: 24px;
    height: 2px;
    background: #d9d9d9;
    z-index: -1;
}
.app-data-business > .e-con:not(:last-child)::before {
    content: "";
    position: absolute;
    left: 40px;
    right: -45px;
    top: 24px;
    height: 2px;
    background: #0B1F3A;
    z-index: 0;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 1.5s ease;
}
.app-data-business > .e-con.line-active::before {
    transform: scaleX(1);
}
.app-data-business > .e-con
.elementor-widget-text-editor {
    position: relative;
    z-index: 5;
}
.app-data-business > .e-con
.elementor-widget-text-editor p {
    position: relative;
    z-index: 5;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    width: 50px;
    height: 50px;
    padding: 12px 14px;
    border-radius: 50%;
    background: #F8FAFC;
    border: 2px solid #E2E8F0E5;
    transition:
        background 0.4s ease,
        color 0.4s ease,
        border-color 0.4s ease;
}
.app-data-business > .e-con.number-active
.elementor-widget-text-editor p {
   background: #0B1F3A !important;
    color: #fff !important;
    border: 2px solid transparent;
}
@media (max-width: 767px) {

    .app-data-business {
        overflow-x: auto;
    }

    .app-data-business > .e-con {
        min-width: 180px;
    }
    .app-data-business > .e-con:not(:last-child)::before,.app-data-business > .e-con:not(:last-child)::after{
        display: none;
    }
    .app-data-business > .e-con .elementor-widget-text-editor p {
        width: 40px;
        height: 40px;
    }

}

/*End*/


/*Solution Page*/

/* ==========================================
   HORIZONTAL PROCESS
   ========================================== */

.horizontal_process {
    position: relative !important;
    width: 100%;
    overflow: visible !important;
}


/* ==========================================
   ICON ROW
   ========================================== */

.horizontal_process .process-icon-row {
    left: 0 !important;
    width: 100% !important;

    display: flex !important;
    flex-direction: row !important;

    justify-content: space-between !important;
    align-items: center !important;

    gap: 0 !important;
    margin: 0 !important;
    padding: 0 !important;

    height: 20px !important;

    visibility: visible !important;
    opacity: 1 !important;

    z-index: 100 !important;

    overflow: visible !important;
}


/* ==========================================
   EACH ICON
   ========================================== */

.horizontal_process .process-item-icon {
    position: relative !important;

    width: 20% !important;
    flex: 0 0 20% !important;

    height: 20px !important;

    display: flex !important;
    justify-content: center !important;
    align-items: center !important;

    margin: 0 !important;
    padding: 0 !important;

    visibility: visible !important;
    opacity: 1 !important;

    z-index: 10 !important;
}


/* ==========================================
   ELEMENTOR ICON WRAPPER
   ========================================== */

.horizontal_process
.process-item-icon
.elementor-icon-wrapper {

    width: 12px !important;
    height: 12px !important;

    display: flex !important;
    justify-content: center !important;
    align-items: center !important;

    visibility: visible !important;
    opacity: 1 !important;

    position: relative !important;

    z-index: 20 !important;
}


/* ==========================================
   ELEMENTOR ICON
   ========================================== */

.horizontal_process
.process-item-icon
.elementor-icon {

    width: 10px !important;
    height: 10px !important;

    min-width: 10px !important;
    min-height: 10px !important;

    padding: 0 !important;
    margin: 0 !important;

    display: flex !important;
    justify-content: center !important;
    align-items: center !important;

    border-radius: 50% !important;

    background-color: #d9d9d9 !important;

    color: #d9d9d9 !important;

    visibility: visible !important;
    opacity: 1 !important;

    position: relative !important;

    z-index: 20 !important;

    transition:
        background-color 0.5s ease,
        transform 0.5s ease;
}


/* ==========================================
   SVG
   ========================================== */

.horizontal_process
.process-item-icon
.elementor-icon
svg {

    width: 10px !important;
    height: 10px !important;

    display: block !important;

    visibility: visible !important;
    opacity: 1 !important;

    overflow: visible !important;
}


/* SVG CIRCLE */
.horizontal_process
.process-item-icon
.elementor-icon
svg
path {

    fill: #d9d9d9 !important;
    stroke: #d9d9d9 !important;

    visibility: visible !important;
    opacity: 1 !important;
}


/* ==========================================
   GREY LINE
   ========================================== */

.horizontal_process
.process-item-icon:not(:last-child)::after {

    content: "";

    position: absolute !important;

    left: 50% !important;
    top: 50% !important;

    width: 100% !important;
    height: 2px !important;

    background: #d9d9d9 !important;

    transform: translateY(-50%) !important;

    z-index: 1 !important;

    display: block !important;

    pointer-events: none;
}


/* ==========================================
   BLUE ANIMATION LINE
   ========================================== */

.horizontal_process
.process-item-icon:not(:last-child)::before {

    content: "";

    position: absolute !important;

    left: 50% !important;
    top: 50% !important;

    width: 0 !important;
    height: 2px !important;

    background: #2563EB !important;

    transform: translateY(-50%) !important;

    z-index: 2 !important;

    display: block !important;

    pointer-events: none;

    transition:
        width 1.5s cubic-bezier(0.22, 1, 0.36, 1);
}


/* ANIMATING */
.horizontal_process
.process-item-icon.line-active::before {

    width: 100% !important;
}


/* COMPLETED */
.horizontal_process
.process-item-icon.completed::before {

    width: 100% !important;

    transition: none !important;
}


/* ==========================================
   ACTIVE DOT
   ========================================== */

.horizontal_process
.process-item-icon.active
.elementor-icon {

    background-color: #2563EB !important;

    transform: scale(1.2);

}


/* ACTIVE SVG */
.horizontal_process
.process-item-icon.active
.elementor-icon
svg
path {

    fill: #2563EB !important;
    stroke: #2563EB !important;
}


/* ==========================================
   CONTENT BOX
   ========================================== */

.horizontal_process
.process-item {

    position: relative;

    transition:
        border-color 0.8s ease,
        color 0.8s ease;
}


.horizontal_process
.process-item.content-active {

    border-color: #2563EB !important;
}


.horizontal_process
.process-item.content-active
h3 {

    color: #2563EB !important;
}


/* ==========================================
   RESET
   ========================================== */

.horizontal_process.reset-animation
.process-item-icon::before {

    transition: none !important;
}


/* ==========================================
   MOBILE
   ========================================== */

@media (max-width: 767px) {

    .horizontal_process .process-icon-row {
        display: none !important;
    }

}