.service-icon{
    width: 60px;
    height: 60px;
    display:flex;
    align-items:center;
    justify-content:center;
}

.uiux-icon{
    transform: scale(0.45);
    transform-origin:center;
}




.webdev-icon{
    font-family: Consolas, monospace;
    font-weight: bold;
    line-height: 1;
}






.mobile-icon{
    display:flex;
    align-items:center;
    justify-content:center;
}

/* Phone body */
.phone{
    width:1em;
    height:1.8em;
    border:0.12em solid #2563eb;
    border-radius:0.25em;
    position:relative;
    background:#fff;
}

/* Screen */
.screen{
    width:70%;
    height:65%;
    background:#dbeafe;
    margin:0.2em auto;
    border-radius:0.1em;
}

/* Home button */
.home{
    width:0.25em;
    height:0.25em;
    background:#2563eb;
    border-radius:50%;
    position:absolute;
    bottom:0.15em;
    left:50%;
    transform:translateX(-50%);
}




.strategy-icon{
    display:flex;
    align-items:center;
    justify-content:center;
}

.chart{
    position:relative;
    width:1.4em;
    height:1.4em;
}

/* Bars */
.bar{
    position:absolute;
    bottom:0;
    width:0.25em;
    background:#2563eb;
    border-radius:0.1em;
}

.bar1{ left:0; height:40%; }
.bar2{ left:0.5em; height:65%; }
.bar3{ left:1em; height:90%; }

/* Growth arrow */
.arrow{
    position:absolute;
    top:-0.2em;
    right:-0.2em;
    font-size:0.6em;
    color:#16a34a;
}



.cloud-icon{
    display:flex;
    align-items:center;
    justify-content:center;
}

.cloud{
    position:relative;
    width:1.6em;
    height:1em;
}

/* Cloud shape */
.cloud-shape{
    position:absolute;
    width:100%;
    height:70%;
    bottom:0;
    background:#2563eb;
    border-radius:1em;
}

.cloud-shape::before,
.cloud-shape::after{
    content:"";
    position:absolute;
    background:#2563eb;
    border-radius:50%;
}

.cloud-shape::before{
    width:0.8em;
    height:0.8em;
    top:-0.4em;
    left:0.2em;
}

.cloud-shape::after{
    width:1em;
    height:1em;
    top:-0.5em;
    right:0.1em;
}

/* Upload arrow */
.upload{
    position:absolute;
    width:100%;
    text-align:center;
    top:0.05em;
    font-size:0.7em;
    color:#fff;
    font-weight:bold;
}

.security-icon{
    display:flex;
    align-items:center;
    justify-content:center;
}

/* Shield */
.shield{
    position:relative;
    width:1.4em;
    height:1.6em;
    background:#2563eb;
    clip-path: polygon(50% 0%, 90% 15%, 90% 55%, 50% 100%, 10% 55%, 10% 15%);
}

/* Lock body */
.lock-icon{
    display:flex;
    align-items:center;
    justify-content:center;
}

/* Lock container */
.lock2{
    position:relative;
    width:1.2em;
    height:1.5em;
}

/* Lock body */
.lock2 .body{
    position:absolute;
    bottom:0;
    width:100%;
    height:0.9em;
    background:#2563eb;
    border-radius:0.2em;
}

/* Lock hole */
.lock2 .hole{
    position:absolute;
    top:0.35em;
    left:50%;
    transform:translateX(-50%);
    width:0.35em;
    height:0.35em;
    background:#fff;
    border-radius:50%;
}

/* Lock shackle */
.lock2::before{
    content:"";
    position:absolute;
    top:-0.2em;
    left:50%;
    transform:translateX(-50%);
    width:0.7em;
    height:0.5em;
    border:0.15em solid #2563eb;
    border-bottom:none;
    border-radius:0.5em 0.5em 0 0;
}


.uiux-icon2{
    display:flex;
    align-items:center;
    justify-content:center;
}

/* Container */
.uiux2{
    position:relative;
    width:1.4em;
    height:1.4em;
}

/* Grid layout */
.grid{
    width:100%;
    height:100%;
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    grid-template-rows:repeat(2, 1fr);
    gap:0.15em;
}

/* Colorful UI blocks */
.grid span{
    border-radius:0.15em;
}

.grid span:nth-child(1){ background:#3b82f6; } /* blue */
.grid span:nth-child(2){ background:#ec4899; } /* pink */
.grid span:nth-child(3){ background:#f59e0b; } /* orange */
.grid span:nth-child(4){ background:#22c55e; } /* green */

/* Cursor (UX interaction) */
.cursor{
    position:absolute;
    width:0;
    height:0;
    right:-0.1em;
    bottom:-0.1em;
    border-left:0.4em solid transparent;
    border-right:0.4em solid transparent;
    border-top:0.6em solid #111827;
    transform:rotate(-20deg);
}






.tutorial {
    position: relative;
    width: 70px;
    height: 70px;
}

/* Book */
.book {
    position: absolute;
    width: 50px;
    height: 60px;
    left: 8px;
    top: 5px;
    background: #fff;
    border: 2px solid #4f46e5;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.15);
}

.book::before {
    content: "";
    position: absolute;
    left: 10px;
    top: 12px;
    width: 28px;
    height: 2px;
    background: #4f46e5;
}

.book span {
    display: block;
    width: 24px;
    height: 2px;
    background: #4f46e5;
    margin: 10px auto;
    opacity: 0.7;
}

/* Play Button */
.play-btn {
    position: absolute;
    right: -2px;
    bottom: 4px;
    width: 24px;
    height: 24px;
    background: #4f46e5;
    border-radius: 50%;
}

.play-btn::before {
    content: "";
    position: absolute;
    left: 9px;
    top: 6px;
    width: 0;
    height: 0;
    border-left: 8px solid #fff;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
}