/* ==========================================================
   Technologies Behind Website Maintenance Services
   Premium White Technology Ecosystem CSS
========================================================== */


/* ------------------------------
   Main Section
------------------------------ */

.tech-ecosystem-section {

    position: relative;
    padding: 100px 20px;
    background: #ffffff;
    overflow: hidden;

}


.tech-ecosystem-section::before {

    content: "";
    position: absolute;
    width: 450px;
    height: 450px;
    top: -150px;
    left: -150px;
    background: radial-gradient(
        circle,
        rgba(37,99,235,0.12),
        transparent 70%
    );

    filter: blur(20px);

}


.tech-ecosystem-section::after {

    content: "";
    position: absolute;
    width: 400px;
    height: 400px;
    bottom: -150px;
    right: -150px;

    background: radial-gradient(
        circle,
        rgba(6,182,212,0.12),
        transparent 70%
    );

    filter: blur(25px);

}



.tech-container {

    max-width: 1200px;
    margin: auto;
    position: relative;
    z-index: 2;

}



/* ------------------------------
   Header
------------------------------ */


.tech-header {

    text-align: center;
    max-width: 850px;
    margin: 0 auto 70px;

}


.tech-badge {

    display: inline-flex;
    align-items: center;

    padding: 8px 18px;

    background: #eff6ff;

    color: #2563eb;

    border-radius: 50px;

    font-size: 14px;

    font-weight: 600;

    margin-bottom: 20px;

}



.tech-header h2 {

    font-size: 46px;

    line-height: 1.2;

    font-weight: 700;

    color: #0f172a;

}



.tech-header h2 span {

    background: linear-gradient(
        90deg,
        #2563eb,
        #06b6d4
    );

    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;

}



.tech-header p {

    margin-top:20px;

    font-size:18px;

    line-height:1.8;

    color:#64748b;

}



/* ------------------------------
   Ecosystem Layout
------------------------------ */


.tech-ecosystem {

    position:relative;

    min-height:650px;

}



/* ------------------------------
   Website Core
------------------------------ */


.website-core {

    position:absolute;

    top:50%;

    left:50%;

    transform:translate(-50%,-50%);

    width:220px;

    height:220px;

    background:#ffffff;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    box-shadow:

    0 20px 50px rgba(15,23,42,0.12);

    z-index:3;

}



.core-ring {

    position:absolute;

    width:250px;

    height:250px;

    border-radius:50%;

    border:2px dashed rgba(37,99,235,0.35);

    animation:rotateRing 20s linear infinite;

}



@keyframes rotateRing {

    from {

        transform:rotate(0deg);

    }

    to {

        transform:rotate(360deg);

    }

}



.core-content {

    text-align:center;

}



.core-icon {

    font-size:40px;

    margin-bottom:10px;

    animation:pulseIcon 2s infinite;

}



@keyframes pulseIcon {

    50% {

        transform:scale(1.15);

    }

}



.core-content h3 {

    font-size:22px;

    color:#0f172a;

}



.core-content p {

    font-size:13px;

    color:#64748b;

}





/* ------------------------------
   Technology Cards
------------------------------ */


.technology-card {

    position:absolute;

    width:330px;

    background:

    rgba(255,255,255,0.9);

    border:1px solid #e2e8f0;

    border-radius:24px;

    padding:30px;

    box-shadow:

    0 15px 40px rgba(15,23,42,0.08);

    transition:all .4s ease;

    backdrop-filter:blur(10px);

}



.technology-card:hover {

    transform:translateY(-12px);

    border-color:#2563eb;

    box-shadow:

    0 25px 60px rgba(37,99,235,0.18);

}



.technology-card::before {

    content:"";

    position:absolute;

    top:0;

    left:20px;

    right:20px;

    height:4px;

    background:

    linear-gradient(
        90deg,
        #2563eb,
        #06b6d4
    );

    border-radius:20px;

}



.technology-icon {

    font-size:35px;

    margin-bottom:15px;

}



.technology-card h3 {

    font-size:22px;

    color:#0f172a;

    margin-bottom:20px;

}



.technology-card ul {

    list-style:none;

    padding:0;

    margin:0;

}



.technology-card li {

    font-size:15px;

    color:#475569;

    padding:8px 0;

    position:relative;

    padding-left:22px;

}



.technology-card li::before {

    content:"✓";

    position:absolute;

    left:0;

    color:#2563eb;

    font-weight:bold;

}





/* Card Positions */


.development-card {

    left:0;

    top:120px;

}



.hosting-card {

    left:50%;

    transform:translateX(-50%);

    bottom:0;

}



.analytics-card {

    right:0;

    top:120px;

}





/* ------------------------------
   Hosting Status
------------------------------ */


.server-status {

    margin-top:20px;

    display:flex;

    flex-wrap:wrap;

    gap:10px;

}



.server-status span {

    background:#eff6ff;

    color:#2563eb;

    padding:6px 10px;

    border-radius:20px;

    font-size:12px;

}





/* ------------------------------
   Analytics Graph
------------------------------ */


.analytics-graph {

    height:50px;

    display:flex;

    align-items:flex-end;

    gap:8px;

    margin-top:20px;

}



.analytics-graph span {

    width:8px;

    background:#2563eb;

    border-radius:10px;

    animation:graphMove 1.5s infinite alternate;

}



.analytics-graph span:nth-child(1){

    height:20px;

}

.analytics-graph span:nth-child(2){

    height:35px;

}


.analytics-graph span:nth-child(3){

    height:45px;

}


.analytics-graph span:nth-child(4){

    height:30px;

}


.analytics-graph span:nth-child(5){

    height:50px;

}



@keyframes graphMove {

    from {

        transform:scaleY(.7);

    }

    to {

        transform:scaleY(1);

    }

}





/* ------------------------------
   Technology Strip
------------------------------ */


.technology-strip {

    margin-top:80px;

    overflow:hidden;

    border-top:1px solid #e2e8f0;

    padding-top:25px;

}



.strip-track {

    display:flex;

    gap:50px;

    width:max-content;

    animation:scrollTech 25s linear infinite;

}



.strip-track span {

    font-weight:600;

    color:#64748b;

}



@keyframes scrollTech {

    from {

        transform:translateX(0);

    }

    to {

        transform:translateX(-50%);

    }

}





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


@media(max-width:992px){


.tech-ecosystem {

    min-height:auto;

    display:flex;

    flex-direction:column;

    gap:30px;

}



.website-core {

    position:relative;

    top:auto;

    left:auto;

    transform:none;

    margin:0 auto 40px;

}



.technology-card {

    position:relative;

    width:100%;

}



.development-card,
.hosting-card,
.analytics-card {

    left:auto;

    right:auto;

    top:auto;

    bottom:auto;

    transform:none;

}


.tech-header h2 {

    font-size:36px;

}


}



@media(max-width:576px){


.tech-ecosystem-section {

    padding:70px 15px;

}



.tech-header h2 {

    font-size:30px;

}



.tech-header p {

    font-size:16px;

}



.website-core {

    width:190px;

    height:190px;

}



.core-ring {

    width:215px;

    height:215px;

}


.technology-card {

    padding:25px;

}



}