/* =========================================
   GBG NEON METAVERSE - DIAMOND HOSTING CSS
   ========================================= */


.diamond-section {
    width:100%;
    padding:80px 20px;
    background:
        radial-gradient(circle at top, rgba(0,255,255,0.15), transparent 40%),
        linear-gradient(180deg,#050510,#020208);
}


.diamond-container {
    max-width:1200px;
    margin:auto;
}


/* HEADER */

.diamond-header {
    text-align:center;
    margin-bottom:50px;
}


.diamond-header h1 {

    font-size:42px;
    color:#00ffff;
    text-shadow:
        0 0 10px #00ffff,
        0 0 25px #0088ff;

}


.diamond-header p {

    color:#ddd;
    font-size:18px;

}



/* MAIN DIAMOND BOX */

.diamond-box,
.control-box {

    background:
    rgba(10,15,35,0.85);

    border:1px solid rgba(0,255,255,0.35);

    border-radius:20px;

    padding:35px;

    margin-bottom:40px;

    box-shadow:
    0 0 25px rgba(0,255,255,0.15),
    inset 0 0 20px rgba(0,150,255,0.08);

    backdrop-filter:blur(10px);

}


.diamond-box h2,
.control-box h2 {

    color:#00ffff;

    text-align:center;

    margin-bottom:25px;

}



.diamond-box p,
.control-box p,
.control-box li {

    color:#e5e5e5;

    font-size:16px;

    line-height:1.8;

}




/* FEATURE MINI BOXES */


.diamond-features {

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:20px;

    margin:35px 0;

}



.diamond-features div {

    background:#080d20;

    border:1px solid #005eff;

    padding:20px;

    border-radius:15px;

    text-align:center;

    color:#fff;

    transition:.3s;

}



.diamond-features div:hover {

    transform:translateY(-8px);

    box-shadow:
    0 0 25px #00ffff;

}




/* WARNING */


.warning-box {

    margin-top:30px;

    padding:20px;

    text-align:center;

    border-radius:15px;

    background:rgba(255,0,0,.15);

    border:1px solid #ff3333;

    color:#ff5555;

    font-size:18px;

}



/* CONTROL LIST */


.control-box ul {

    list-style:none;

    padding:0;

}


.control-box li {

    padding:10px;

    border-bottom:1px solid rgba(255,255,255,.1);

}



/* SCREENSHOTS */


.screenshots {

    display:flex;

    justify-content:center;

    gap:30px;

    flex-wrap:wrap;

    margin-bottom:60px;

}


.screenshots img {

    width:450px;

    max-width:100%;

    border-radius:20px;

    border:2px solid #00ffff;

    box-shadow:
    0 0 25px rgba(0,255,255,.4);

    transition:.4s;

}


.screenshots img:hover {

    transform:scale(1.05);

}



/* HOSTING FEATURES */


.hosting-features-section {

    max-width:1200px;

    margin:80px auto;

    padding:20px;

    text-align:center;

}



.hosting-features-section h2 {

    color:#00ffff;

    font-size:35px;

    text-shadow:0 0 15px #00ffff;

}




.hosting-grid {

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:25px;

    margin-top:40px;

}



.hosting-card {

    background:
    linear-gradient(
        145deg,
        rgba(20,30,60,.9),
        rgba(5,5,20,.9)
    );


    border:1px solid rgba(0,255,255,.35);

    border-radius:20px;

    padding:25px;

    transition:.4s;

}



.hosting-card:hover {

    transform:translateY(-10px);

    border-color:#00ffff;

    box-shadow:
    0 0 30px rgba(0,255,255,.5);

}



.hosting-card img {

    width:180px;

    height:180px;

    object-fit:cover;

    border-radius:50%;

    border:3px solid #00ffff;

    margin-bottom:20px;

}



.hosting-card h3 {

    color:#00ffff;

}



.hosting-card p {

    color:#ddd;

    line-height:1.8;

}



/* MOBILE */

@media(max-width:900px){


.diamond-features,
.hosting-grid {

    grid-template-columns:repeat(2,1fr);

}


}


@media(max-width:600px){


.diamond-header h1 {

    font-size:30px;

}


.diamond-features,
.hosting-grid {

    grid-template-columns:1fr;

}


.diamond-box,
.control-box {

    padding:20px;

}


}

/* ===============================
   HOSTING PACKAGES
================================ */


.hosting-packages-section {

    max-width:1200px;

    margin:80px auto;

    padding:20px;

    text-align:center;

}



.hosting-packages-section h2 {

    color:#00ffff;

    font-size:35px;

    text-shadow:
    0 0 15px #00ffff;

}



.hosting-packages-grid {

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:25px;

    margin-top:40px;

}



.package-box {


    background:
    rgba(10,15,35,.9);


    border:1px solid rgba(0,255,255,.4);


    border-radius:25px;


    padding:30px;


    transition:.4s;


}



.package-box:hover {


    transform:translateY(-10px);


    box-shadow:
    0 0 35px rgba(0,255,255,.5);


}



.photo-frame img {


    width:200px;

    height:200px;

    object-fit:cover;

    border-radius:50%;


    border:3px solid #00ffff;


}



.package-box h3 {


    color:#00ffff;

}



.package-box p {


    color:#ddd;

    line-height:1.8;


}



.package-warning {


    color:#ff5555;

    margin:20px;


    font-size:18px;


}



.package-price h3 {


    color:white;


}



.package-btn {


    display:inline-block;


    padding:15px 30px;


    margin-top:20px;


    border-radius:30px;


    background:#00ffff;


    color:#000;


    font-weight:bold;


    text-decoration:none;


}



.package-btn:hover {


    background:white;


    box-shadow:0 0 25px #00ffff;


}




@media(max-width:900px){


.hosting-packages-grid {

grid-template-columns:repeat(2,1fr);

}


}



@media(max-width:600px){


.hosting-packages-grid {

grid-template-columns:1fr;

}


}

/* =====================================
   GBG NEON DIAMOND INFO PANEL
===================================== */


.diamond-info-panel {

    margin-top:50px;

    background:
    linear-gradient(
        145deg,
        rgba(10,15,35,.95),
        rgba(3,5,15,.95)
    );


    border:2px solid #00ffff;

    border-radius:20px;

    box-shadow:
    0 0 25px rgba(0,255,255,.5),
    inset 0 0 30px rgba(120,0,255,.15);


    overflow:hidden;

}



/* HEADER */

.diamond-info-header {


    background:
    linear-gradient(
        90deg,
        rgba(0,255,255,.15),
        rgba(120,0,255,.25)
    );


    padding:20px;

    text-align:center;


    border-bottom:1px solid #00ffff;


    box-shadow:
    inset 0 0 25px rgba(0,255,255,.3);


}



.diamond-info-header h3 {


    margin:0;


    color:#00ffff;


    font-size:22px;


    text-shadow:

    0 0 10px #00ffff,

    0 0 25px #0088ff;


}




/* CONTENT */


.diamond-info-content {


    padding:30px;


    color:#e5e5e5;


    line-height:1.8;


    font-size:16px;


}




.diamond-info-content h2 {


    color:#00ffff;


    text-align:center;


    margin-top:30px;


    text-shadow:

    0 0 15px #00ffff;


}




.diamond-info-content h3 {


    color:#b566ff;


    border-left:4px solid #00ffff;


    padding-left:12px;


    margin-top:30px;


}




.diamond-info-content p {


    margin-bottom:15px;


}




.diamond-info-content a {


    color:#00ffff;


    font-weight:bold;


    text-decoration:none;


}



.diamond-info-content a:hover {


    color:white;


    text-shadow:

    0 0 15px #00ffff;


}




/* IMPORTANT LINES */


.diamond-info-content strong {


    color:#ffffff;


}



/* SERVER SPECS BOX EFFECT */


.diamond-info-content p:last-child {


    background:

    rgba(0,255,255,.05);


    padding:20px;


    border-radius:15px;


    border:1px solid rgba(0,255,255,.25);


}



/* MOBILE */

@media(max-width:600px){


.diamond-info-content {

    padding:20px;

}


.diamond-info-header h3 {

    font-size:18px;

}


}