.hero{

    width:95%;
    margin:25px auto;

    background:
    linear-gradient(
        135deg,
        #2743b3,
        #3167ea
    );

    border-radius:24px;

    padding:70px 8%;

    text-align:center;

    box-shadow:var(--shadow);
}

.hero h1{

    font-size:52px;

    color:white;

    margin-bottom:18px;
}

.hero p{

    color:#eaf1ff;

    font-size:19px;

    max-width:900px;

    margin:auto;

    line-height:1.9;
}

/* LAYOUT */

.layout{

    width:95%;

    margin:25px auto;

    display:grid;

    grid-template-columns:
    260px 1fr 240px;

    gap:24px;

    align-items:start;
}

/* SIDEBAR */

.sidebar{

    background:var(--bg-light);

    border-radius:var(--radius);

    padding:28px;

    box-shadow:var(--shadow);
}

.sidebar h2{

    color:var(--primary);

    font-size:24px;

    margin-bottom:25px;
}

.topic{
    margin-bottom:28px;
}

.topic-title{

    font-size:18px;

    font-weight:700;

    margin-bottom:12px;
}

.sidebar a{

    display:block;

    text-decoration:none;

    color:var(--text-dark);

    padding:10px 12px;

    border-radius:8px;

    transition:var(--transition);
}

.sidebar a:hover{

    background:var(--primary);

    color:white;

    transform:translateX(4px);
}

/* ADS */

.ads{

    background:var(--bg-light);

    border-radius:var(--radius);

    padding:22px;

    box-shadow:var(--shadow);
}

.ad-box,
.ad-box-small{

    background:#dbe7ff;

    border-radius:14px;

    display:flex;

    align-items:center;

    justify-content:center;

    text-align:center;

    color:var(--text-light);
}

.ad-box{

    height:250px;

    margin-bottom:18px;
}

.ad-box-small{

    height:140px;
}

/* RESPONSIVE */

@media(max-width:1200px){

    .layout{
        grid-template-columns:
        250px 1fr;
    }

    .ads{
        display:none;
    }
}

@media(max-width:900px){

    .layout{
        grid-template-columns:1fr;
    }

    .hero h1{
        font-size:38px;
    }

    .hero p{
        font-size:16px;
    }
}

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

        .section{
            width:90%;
            margin:80px auto;
        }

        .section-title{
            text-align:center;
            font-size:48px;
            margin-bottom:50px;
			color:white;
        }

        /* =========================
           ABOUT BOX
        ========================== */

        .about-box{
            background:#11184b;
            padding:45px;
            border-radius:25px;
            margin-bottom:40px;
        }

        .about-box h2{
            font-size:38px;
            margin-bottom:20px;
            color:#4d8dff;
        }

        .about-box p{
            font-size:20px;
            color:#d7d7d7;
            margin-bottom:20px;
        }

        /* =========================
           FEATURE GRID
        ========================== */

        .feature-grid{
            display:grid;
            grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
            gap:30px;
        }

        .feature-card{
            background:#f3f3f3;
            color:#1f2a44;
            padding:35px;
            border-radius:22px;
            transition:0.3s;
        }

        .feature-card:hover{
            transform:translateY(-8px);
        }

        .feature-card h3{
            font-size:28px;
            color:#3167ea;
            margin-bottom:18px;
        }

        .feature-card p{
            font-size:18px;
            color:#4b5563;
        }

        /* =========================
           TECHNOLOGIES
        ========================== */

        .tech-section{
            width:90%;
            margin:80px auto;
            background:#11184b;
            border-radius:25px;
            padding:60px;
            text-align:center;
			color:white;
        }

        .tech-section h2{
            font-size:46px;
            margin-bottom:40px;
        }

        .tech-grid{
            display:flex;
            flex-wrap:wrap;
            justify-content:center;
            gap:20px;
        }

        .tech-grid span{
            background:#3167ea;
            padding:15px 28px;
            border-radius:12px;
            font-size:18px;
            font-weight:bold;
        }

        /* =========================
           CTA
        ========================== */

        .cta{
            width:90%;
            margin:80px auto;
            background:linear-gradient(to right,#2743b3,#3167ea);
            border-radius:25px;
            padding:70px;
            text-align:center;
        }

        .cta h2{
            font-size:48px;
            margin-bottom:20px;
        }

        .cta p{
            font-size:22px;
            margin-bottom:35px;
        }

        .cta a{
            display:inline-block;
            text-decoration:none;
            background:white;
            color:#3167ea;
            padding:16px 35px;
            border-radius:12px;
            font-size:18px;
            font-weight:bold;
            transition:0.3s;
        }

        .cta a:hover{
            background:#dfe9ff;
        }
		
		.copy-btn {

            float: right;

            margin-bottom: 10px;

            padding: 8px 14px;

            border: none;

            border-radius: 6px;

            cursor: pointer;

            font-size: 14px;

        }

        /* =========================
           FOOTER
        ========================== */

       /*  .footer{
            background:#020420;
            padding:35px;
            text-align:center;
            color:#bdbdbd;
            font-size:16px;
            margin-top:50px;
        } */

        /* =========================
           RESPONSIVE
        ========================== */

        @media(max-width:950px){

            .hero h1{
                font-size:45px;
            }

            .hero p{
                font-size:20px;
            }

            .section-title{
                font-size:38px;
            }

            .cta{
                padding:50px 25px;
            }

            .cta h2{
                font-size:36px;
            }

        }