/*====================================================
        OPERATION SECTION
====================================================*/

.operation-section{
    position:relative;
    padding:100px 0;
    background:#f8fafc;
    overflow:hidden;
}

.operation-section::before{
    content:"";
    position:absolute;
    width:350px;
    height:350px;
    background:rgba(13,110,253,.05);
    border-radius:50%;
    left:-180px;
    top:-120px;
}

.operation-section::after{
    content:"";
    position:absolute;
    width:420px;
    height:420px;
    background:rgba(0,0,0,.03);
    border-radius:50%;
    right:-200px;
    bottom:-200px;
}

/*====================================================
        SECTION TITLE
====================================================*/

.operation-subtitle{
    display:inline-block;
    color:#0d6efd;
    font-size:14px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:2px;
    margin-bottom:10px;
}

.operation-title{
    font-size:2rem;
    font-weight:500;
    color:#1b263b;
    margin-bottom:18px;
}

.operation-description{
    max-width:650px;
    margin:auto;
    color:#6c757d;
    line-height:30px;
    font-size:17px;
}

/*====================================================
        TREE WRAPPER
====================================================*/

.operation-wrapper{

    position:relative;

    width:100%;

    max-width:1150px;

    height:450px;

    margin:60px auto 0;

}

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

.operation-svg{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    z-index:1;

}

.operation-svg path{

    fill:none;

    stroke-linecap: round;
	stroke-linejoin: round;

}

/*====================================================
        MAIN STEM
====================================================*/

.stem{

    stroke:#2aa8ff;

    stroke-width:15;

}

/*====================================================
        COMMON BRANCH
====================================================*/

.branch{

    stroke-width:15;

    transition:.4s;

}

/*====================================================
        BRANCH COLORS
====================================================*/

.residential-line{

    stroke:#4f7cff;

}

.industrial-line{

    stroke:#8b3dff;

}

.hotel-line{

    stroke:#2aa8ff;

}

.banking-line{

    stroke:#d8a000;

}

.government-line{

    stroke:#f28c28;

}

.corporate-line{

    stroke:#e91e63;

}

.education-line{

    stroke:#7d8793;

}

/*====================================================
        TREE BASE
====================================================*/

.tree-base{

    position:absolute;

    left:50%;

    transform:translateX(-50%);

    width:200px;

    height:20px;

    border-radius:10px;

    background:#c6c6c6;

    z-index:2;

}

.tree-base span{

    display:block;

    width:100%;

    height:100%;

    border-radius:inherit;

    background:linear-gradient(to bottom,#d9d9d9,#b3b3b3);

}

/*====================================================
        OPERATION NODES
====================================================*/

.node{
    position:absolute;
    width:170px;
    height:170px;
    z-index:10;
    transition:.4s ease;
}

/* Center node slightly larger */

.hotel{
    width:160px;
    height:160px;
    z-index:20;
}

/*====================================================
        DIAMOND
====================================================*/

.node-inner{

    position:relative;

    width:100%;
    height:100%;

    background:#fff;

    transform:rotate(45deg);

    border-radius:22px;

    overflow:hidden;

    display:flex;
    justify-content:center;
    align-items:center;
    flex-direction:column;

    box-shadow:
        0 18px 45px rgba(0,0,0,.12);

    transition:.4s;

}

/* Rotate content back */

.node-inner>*{

    transform:rotate(-45deg);

}

/*====================================================
        NUMBER BADGE
====================================================*/

.node-number,
.node-inner span{

    position:absolute;

    top:12px;
    left:12px;

    width:42px;
    height:42px;

    border-radius:50%;

    background:#0d6efd;

    color:#fff;

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

    font-size:15px;
    font-weight:700;

    box-shadow:0 5px 15px rgba(13,110,253,.25);

}

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

.node-icon{
	position:absolute;
    width:42px;
    height:42px;

    border-radius:50%;

    background:#f4f8ff;

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


    
    right: 5px;
    bottom: 5px;

}



.node i{

    font-size:20px;

    color:#6c757d;

    transition:.35s;

}

/*====================================================
        TITLE
====================================================*/

.node h5{

    font-size:15px;

    font-weight:600;

    color:#222;

    line-height:22px;

    margin:0;

    text-align:center;

    padding:0 12px;

}

/*====================================================
        BORDER COLORS
====================================================*/

.residential .node-inner{

    border:4px solid #4f7cff;

}

.industrial .node-inner{

    border:4px solid #8b3dff;

}

.hotel .node-inner{

    border:4px solid #2aa8ff;

}

.banking .node-inner{

    border:4px solid #d8a000;

}

.government .node-inner{

    border:4px solid #f28c28;

}

.corporate .node-inner{

    border:4px solid #e91e63;

}

.education .node-inner{

    border:4px solid #7d8793;

}

/*====================================================
        HOVER
====================================================*/

.node:hover{

    transform:translateY(-8px);

}

.node:hover .node-inner{

    box-shadow:
        0 25px 55px rgba(0,0,0,.18);

}

.node:hover i{

    /*color:#0d6efd;*/

    transform:scale(1.15);

}

.node:hover .node-number{

    transform:rotate(-45deg) scale(1.08);

}

/* Shine Effect */

.node-inner::before{

    content:"";

    position:absolute;

    left:-120%;
    top:0;

    width:70%;
    height:100%;

    background:rgba(255,255,255,.35);

    transform:skewX(-30deg);

    transition:1s;

}

.node:hover .node-inner::before{

    left:160%;

}

/*====================================================
        CENTER CARD
====================================================*/

.hotel .node-inner{

    background:linear-gradient(135deg,#ffffff,#f7fbff);

}

.hotel .node-icon{

    width:42px;
    height:42px;

}

.hotel i{

    font-size:20px;

}

.hotel h5{

    font-size:17px;

}

/*====================================================
        PART 3 - NODE POSITIONING
====================================================*/

/* Main Wrapper */

.operation-wrapper{
    position:relative;
}

/*==================================
    04 Residential
==================================*/

.residential{
    width:140px;
    height:140px;

    top:5px;
    left:300px;
}
.residential i{
	color :#4f7cff;
}

/*==================================
    01 Large Industrial
==================================*/

.industrial{
    width:140px;
    height:140px;

    top:80px;
    left:140px;
}

.industrial i{
	color :#8b3dff;
}

/*==================================
    03 Hotels & Warehouses
==================================*/

.hotel{

    width:150px;
    height:150px;

    top:60px;
    left:43.3%;

    transform:translateX(-50%);

    z-index:25;
}

.hotel i{
	color :#2aa8ff;
}

/*==================================
    05 Banking
==================================*/

.banking{
    width:140px;
    height:140px;

    top:5px;
    right:300px;
}

.banking i{
	color :#d8a000;
}

/*==================================
    06 Government
==================================*/

.government{
    width:140px;
    height:140px;

    top:80px;
    right:140px;
}

.government i{
	color :#f28c28;
}

/*==================================
    02 Corporate
==================================*/

.corporate{
    width:140px;
    height:140px;

    top:210px;
    left:260px;
}

.corporate i{
	color: #e91e63;
}

/*==================================
    07 Education
==================================*/

.education{
    width:140px;
    height:140px;

    top:210px;
    right:260px;
}

.education i{
	color :#7d8793;
}

/*==================================
    TREE BASE
==================================*/

.tree-base{
    left:50%;
    bottom:0;
}

/*==================================
    CONNECTOR ALIGNMENT
==================================*/

.operation-svg{
    pointer-events:none;
}

.node{
    cursor:pointer;
}

/*==================================
    LAYER ORDER
==================================*/

.hotel{
    z-index:30;
}

.residential,
.industrial,
.banking,
.government,
.corporate,
.education{
    z-index:20;
}

/*==================================
    LARGE SCREEN
==================================*/

@media(min-width:1400px){

.operation-wrapper{

    max-width:1200px;
    height:450px;

}

.hotel{

    width:150px;
    height:150px;

}

.hotel h5{

    font-size:18px;

}

}

/*==================================
    LAPTOP
==================================*/

@media(min-width:992px) and (max-width:1199px){

.operation-wrapper{

    transform:scale(.9);
    transform-origin:top center;

    height:450px;

}

}

/*==================================
    TABLET
==================================*/

@media(max-width:991px){

.operation-wrapper{

    height:1200px;

}

/* Left */

.residential{

    top:20px;
    left:40px;

}

.industrial{

    top:360px;
    left:40px;

}

/* Center */

.hotel{

    top:230px;
    left:50%;

}

/* Right */

.banking{

    top:20px;
    right:40px;

}

.government{

    top:360px;
    right:20px;

}

.corporate{

    top:720px;
    left:80px;
}

.education{

    top:720px;
    right:60px;
}

.tree-base{

    bottom:80px;
}

}

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

@media(max-width:767px){

.operation-wrapper{

    display:flex;

    flex-wrap:wrap;

    justify-content:center;

    align-items:center;

    gap:60px;

    height:auto;

    padding:30px 0;

}

/* Hide SVG */

.operation-svg{

    display:none;

}

.tree-base{

    display:none;

}

/* Cards */

.node{

    position:relative;

    left:auto!important;
    right:auto!important;
    top:auto!important;
    bottom:auto!important;

    transform:none!important;

}

.hotel{

    width:190px;
    height:190px;

}

}

/*====================================================
            PART 4
      ANIMATION & RESPONSIVE
====================================================*/

/*==========================
SVG DRAW ANIMATION
==========================*/

.operation-svg path{

    stroke-dasharray:1200;
    stroke-dashoffset:1200;

    animation:drawLine 2s ease forwards;

}

.stem{
    animation-delay:.2s;
}

.residential-line{
    animation-delay:.4s;
}

.industrial-line{
    animation-delay:.6s;
}

.hotel-line{
    animation-delay:.8s;
}

.banking-line{
    animation-delay:1s;
}

.government-line{
    animation-delay:1.2s;
}

.corporate-line{
    animation-delay:1.4s;
}

.education-line{
    animation-delay:1.6s;
}

@keyframes drawLine{

    to{

        stroke-dashoffset:0;

    }

}

/*==========================
FLOATING CARDS
==========================*/

.node{

    animation:floating 5s ease-in-out infinite;

}

.residential{

    animation-delay:.2s;

}

.industrial{

    animation-delay:.5s;

}

.hotel{

    animation-delay:.8s;

}

.banking{

    animation-delay:1s;

}

.government{

    animation-delay:1.3s;

}

.corporate{

    animation-delay:1.6s;

}

.education{

    animation-delay:1.9s;

}

@keyframes floating{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-10px);

    }

    100%{

        transform:translateY(0);

    }

}

/*==========================
HOVER EFFECT
==========================*/

.node:hover{

    z-index:100;

}

.node:hover .node-inner{

    transform:rotate(45deg) scale(1.05);

    box-shadow:

        0 25px 60px rgba(0,0,0,.18),

        0 10px 25px rgba(13,110,253,.20);

}

.node:hover .node-icon{

    

}

.node:hover i{

    

    transform:scale(1.15);

}

.node:hover .node-number{

    background:#17a2b8;

}

/*==========================
TEXT ANIMATION
==========================*/

.node h5{

    transition:.35s;

}

.node:hover h5{

    color:#0d6efd;

}

/*==========================
SHINE EFFECT
==========================*/

.node-inner::after{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:60%;

    height:100%;

    background:rgba(255,255,255,.4);

    transform:skewX(-30deg);

    transition:1s;

}

.node:hover .node-inner::after{

    left:150%;

}

/*==========================
TREE BASE
==========================*/

.tree-base{

    box-shadow:

        0 10px 20px rgba(0,0,0,.12);

}

/*==========================
BACKGROUND
==========================*/

.operation-section{

    background:

        radial-gradient(circle at top left,#eef7ff 0%,transparent 35%),

        radial-gradient(circle at bottom right,#fff4e8 0%,transparent 35%),

        #ffffff;

}

/*==========================
SMOOTH
==========================*/

.node,
.node-inner,
.node-icon,
.node-number,
.node h5,
.operation-svg path{

    transition:.35s ease;

}

/*==========================
AOS SUPPORT
==========================*/

[data-aos]{

    pointer-events:auto;

}

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

@media(max-width:767px){

.node{

    animation:none;

}

.node:hover{

    transform:none;

}

.node:hover .node-inner{

    transform:rotate(45deg);

}

.operation-title{

    font-size:30px;

}

.operation-description{

    font-size:15px;

    line-height:28px;

}

}

/*==========================
LARGE SCREEN
==========================*/

@media(min-width:1400px){

.operation-wrapper{

    transform:scale(1.05);

    transform-origin:top center;

}

}

/*====================================================
        PART 5 - FINAL POLISH
====================================================*/

/*------------------------------
    Better Rendering
-------------------------------*/

.operation-section,
.operation-wrapper,
.node,
.node-inner,
.operation-svg{

    -webkit-font-smoothing:antialiased;
    backface-visibility:hidden;
    will-change:transform;

}


/*------------------------------
    SVG Hover Highlight
-------------------------------*/

.node:hover ~ .operation-svg .branch{
    opacity:.35;
}

.operation-svg .branch{
    transition:.4s;
}


/*------------------------------
    Glass Effect
-------------------------------*/

.node-inner{

    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);

}


/*------------------------------
    Better Shadows
-------------------------------*/

.node-inner{

    box-shadow:

        0 18px 40px rgba(0,0,0,.12),

        0 6px 12px rgba(0,0,0,.05);

}


/*------------------------------
    Number Badge
-------------------------------*/

.node-number{

    letter-spacing:.5px;

}


/*------------------------------
    Icon Circle
-------------------------------*/

.node-icon{

    border:1px solid rgba(13,110,253,.08);

}


/*------------------------------
    Hover Glow
-------------------------------*/

.node:hover .node-inner{

    box-shadow:

        0 25px 60px rgba(0,0,0,.18),

        0 0 25px rgba(13,110,253,.20);

}


/*------------------------------
    Title
-------------------------------*/

.node h5{

    transition:.35s;

}

.node:hover h5{

    color:#007bff;

}


/*------------------------------
    Tree Base
-------------------------------*/

.tree-base{

    box-shadow:

        inset 0 2px 3px rgba(255,255,255,.4),

        0 10px 20px rgba(0,0,0,.15);

}


/*------------------------------
    Background Pattern
-------------------------------*/

.operation-section{

    background-image:

        radial-gradient(circle at 10% 10%,rgba(13,110,253,.03) 0%,transparent 20%),

        radial-gradient(circle at 90% 90%,rgba(255,193,7,.04) 0%,transparent 25%);

}


/*------------------------------
    Card Entrance
-------------------------------*/

.node{

    opacity:0;

    animation:

        cardFade .8s ease forwards,

        floating 5s ease-in-out infinite;

}

@keyframes cardFade{

    from{

        opacity:0;
        transform:translateY(40px);

    }

    to{

        opacity:1;
        transform:translateY(0);

    }

}

.residential{animation-delay:.2s;}
.industrial{animation-delay:.35s;}
.hotel{animation-delay:.5s;}
.banking{animation-delay:.65s;}
.government{animation-delay:.8s;}
.corporate{animation-delay:.95s;}
.education{animation-delay:1.1s;}


/*------------------------------
    Accessibility
-------------------------------*/

.node:focus{

    outline:none;

}

.node:focus .node-inner{

    box-shadow:

        0 0 0 4px rgba(13,110,253,.2);

}


/*------------------------------
    Reduced Motion
-------------------------------*/

@media (prefers-reduced-motion:reduce){

.operation-svg path,
.node{

    animation:none !important;

}

.node:hover{

    transform:none;

}

}


/*------------------------------
    Responsive
-------------------------------*/

@media(max-width:991px){

.operation-title{

    font-size:34px;

}

.operation-description{

    font-size:16px;

}

}

@media(max-width:767px){

.operation-section{

    padding:70px 0;

}

.operation-title{

    font-size:28px;

}

.operation-description{

    font-size:15px;

    line-height:28px;

}

.node{

    margin:10px;

}

}


/*------------------------------
    Print
-------------------------------*/

@media print{

.operation-svg{

    display:none;

}

.operation-section{

    background:#fff;

}

.node{

    page-break-inside:avoid;

}

}