* {
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:"Poppins", sans-serif;
}


html {
    scroll-behavior:smooth;
}


body {

    background:#080d1a;
    color:white;
    overflow-x:hidden;
    padding-top:140px;

    padding-bottom:120px;

}



a {
    text-decoration:none;
    color:inherit;
}




/* =====================
   SMART PROGRAMMER TOP AD
===================== */


.creator-bar {

    width:100%;

    padding:12px 20px;

    background:
    linear-gradient(90deg,#001b3a,#004d3d);

    text-align:center;

    font-size:15px;

    color:white;

    position:relative;

    z-index:2000;

}


.creator-bar a {

    color:#00ff88;

    font-weight:700;

    margin-left:8px;

}



.creator-bar a:hover {

    text-decoration:underline;

}






/* =====================
NAVBAR
===================== */


header {

    width:100%;

    position:fixed;

    top:65px; /* hapësirë poshtë reklamës */

    z-index:1000;

    background:rgba(8,13,26,0.90);

    backdrop-filter:blur(15px);

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

}




nav {

    max-width:1200px;

    margin:auto;

    padding:15px 40px;

    display:flex;

    justify-content:space-between;

    align-items:center;

}




.logo img {

    width:80px;

    height:80px;

    object-fit:contain;

}




.nav-links {

    display:flex;

    gap:35px;

    list-style:none;

}



.nav-links a {

    color:white;

    font-size:16px;

    transition:.3s;

}



.nav-links a:hover {

    color:#00ff88;

}



.menu-btn {

    display:none;

    font-size:30px;

    cursor:pointer;

}








/* =====================
HERO
===================== */


.hero {

    min-height:100vh;

    padding:230px 10% 100px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:50px;


    background:

    radial-gradient(circle at top right,#004d3d,transparent 35%),

    linear-gradient(135deg,#071426,#111827);

}




.hero-text {

    max-width:650px;

}



.hero-text h1 {

    font-size:65px;

    line-height:1.1;

    font-weight:800;

}



.hero-text h1 span {

    display:block;

    color:#00ff88;

}



.hero-text h2 {

    font-size:35px;

    color:#00ff88;

    margin:20px 0;

}



.hero-text p {

    color:#d1d5db;

    font-size:20px;

    line-height:1.7;

    margin-bottom:35px;

}







.hero-buttons {

    display:flex;

    gap:20px;

    flex-wrap:wrap;

}





.btn {

    background:#00ff88;

    color:#061018;

    padding:15px 35px;

    border-radius:35px;

    font-weight:700;

    transition:.3s;

}



.btn:hover {

    transform:translateY(-5px);

    box-shadow:0 10px 30px rgba(0,255,136,.4);

}




.secondary {

    background:white;

}







.hero-image img {

    width:330px;

    filter:drop-shadow(0 20px 40px rgba(0,0,0,.5));

    animation:float 4s infinite;

}




@keyframes float {


50% {

transform:translateY(-15px);

}


}







/* =====================
SECTIONS
===================== */


.section {

    padding:100px 10%;

}



.title {

    text-align:center;

    font-size:42px;

    margin-bottom:60px;

    color:#00ff88;

}





.cards {

    display:flex;

    justify-content:center;

    gap:30px;

    flex-wrap:wrap;

}





.card {

    width:330px;

    background:#111827;

    padding:35px;

    border-radius:25px;

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

    transition:.4s;

}



.card:hover {

    transform:translateY(-15px);

    border-color:#00ff88;

    box-shadow:0 20px 40px rgba(0,255,136,.15);

}



.card h3 {

    color:#00ff88;

    font-size:25px;

    margin-bottom:15px;

}



.card p {

    color:#cbd5e1;

    line-height:1.7;

}








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


.about-preview {

    padding:100px 10%;

    text-align:center;

    background:#111827;

}



.about-preview h2 {

    font-size:40px;

    color:#00ff88;

    margin-bottom:25px;

}



.about-preview p {

    max-width:800px;

    margin:auto;

    color:#ddd;

    font-size:18px;

}








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


.cta {

    text-align:center;

    padding:100px 20px;

}



.cta h2 {

    font-size:40px;

    margin-bottom:20px;

}


.cta p {

    color:#ccc;

    margin-bottom:30px;

}







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


footer {

    background:#050914;

    text-align:center;

    padding:50px 20px 20px;

    color:#aaa;

}



.footer-content h3 {

    color:white;

    font-size:28px;

    margin-bottom:20px;

}



.footer-content p {

    margin:10px;

}






/* SMART PROGRAMMER FOOTER AD */


.smart-programmer-footer {

    margin:40px auto;

    padding:35px;

    max-width:700px;

    border-radius:25px;

    background:

    linear-gradient(135deg,#001b3a,#004d3d);

}



.smart-programmer-footer h3 {

    color:#00ff88;

    font-size:25px;

}



.smart-programmer-footer p {

    margin:15px 0;

}



.smart-programmer-footer a {

    display:inline-block;

    background:#00ff88;

    color:#061018;

    padding:12px 25px;

    border-radius:30px;

    font-weight:bold;

}




.credit {

    margin-top:30px;

}



.credit a {

    color:#00ff88;

}





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


@media(max-width:850px){



.nav-links {

    display:none;

}



.menu-btn {

    display:block;

}



.hero {

    flex-direction:column;

    text-align:center;

}



.hero-text h1 {

    font-size:45px;

}



.hero-image img {

    width:240px;

}



.hero-buttons {

    justify-content:center;

}



}

/* SERVICES PAGE HEADER */


.page-header {

    min-height:50vh;

    padding:180px 10% 80px;

    text-align:center;

    background:

    radial-gradient(circle at top,#004d3d,transparent 40%),

    #080d1a;

}



.page-header h1 {

    font-size:55px;

    color:#00ff88;

    margin-bottom:20px;

}



.page-header p {

    font-size:20px;

    color:#ccc;

}

/* =====================
ABOUT PAGE
===================== */


.about-page {

    padding:100px 10%;

    display:flex;

    flex-direction:column;

    gap:30px;

}



.about-box {

    background:#111827;

    padding:40px;

    border-radius:25px;

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

    transition:.3s;

}



.about-box:hover {

    border-color:#00ff88;

    transform:translateY(-5px);

}



.about-box h2 {

    color:#00ff88;

    font-size:30px;

    margin-bottom:20px;

}



.about-box p {

    color:#d1d5db;

    line-height:1.8;

    font-size:17px;

}



.choose-list {

    list-style:none;

    color:#ddd;

    line-height:2;

    font-size:18px;

}

/* =====================
CONTACT PAGE
===================== */


.contact-page {

    padding:100px 10%;

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(320px,1fr));

    gap:40px;

}



.contact-card {

    background:#111827;

    padding:40px;

    border-radius:25px;

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

}



.contact-card h2 {

    color:#00ff88;

    font-size:30px;

    margin-bottom:20px;

}



.contact-card p {

    color:#ccc;

    line-height:1.7;

}



.contact-info {

    margin:30px 0;

}



.contact-info a {

    color:#00ff88;

}



.contact-buttons {

    display:flex;

    gap:15px;

    flex-wrap:wrap;

}



.contact-card form {

    margin-top:20px;

}

/* =====================
MOBILE MENU ACTIVE
===================== */


@media(max-width:850px){


.nav-links.active{


display:flex;

position:absolute;

top:100px;

right:20px;

background:#111827;

padding:25px;

border-radius:20px;

flex-direction:column;

gap:20px;

box-shadow:0 20px 40px rgba(0,0,0,.4);


}


}





/* =====================
SCROLL ANIMATION
===================== */


.hidden{

opacity:0;

transform:translateY(40px);

transition:0.8s ease;

}



.show{

opacity:1;

transform:translateY(0);

}

/* ==================================
   SMART PROGRAMMER FLOATING ADS
================================== */


/* TOP FLOATING BAR */


.smart-top-ad {

position:fixed;

top:0;

left:0;

width:100%;

z-index:3000;


background:

linear-gradient(
90deg,
#001b3a,
#004d3d
);


padding:14px 25px;


box-shadow:

0 5px 25px rgba(0,0,0,.5);


}




.ad-content {


display:flex;

justify-content:center;

align-items:center;

gap:15px;

font-size:16px;

}



.ad-content strong {

color:#00ff88;

font-size:18px;

}



.ad-content a {


background:#00ff88;

color:#061018;

padding:9px 25px;

border-radius:25px;

font-weight:700;


transition:.3s;


}



.ad-content a:hover {


transform:scale(1.1);


}






/* BOTTOM FLOATING BAR */



.smart-bottom-ad {


position:fixed;


bottom:20px;


left:50%;


transform:translateX(-50%);


width:90%;


max-width:900px;


z-index:3000;


padding:20px 30px;


border-radius:25px;



background:


linear-gradient(
135deg,
#001b3a,
#004d3d
);



display:flex;


justify-content:space-between;


align-items:center;


gap:20px;


box-shadow:


0 15px 40px rgba(0,0,0,.5);



border:

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


}



.smart-bottom-ad h3 {


color:#00ff88;

font-size:22px;


}



.smart-bottom-ad p {


color:white;

margin-top:5px;


}



.smart-bottom-ad a {


background:#00ff88;


color:#061018;


padding:12px 25px;


border-radius:30px;


font-weight:bold;


white-space:nowrap;


}







/* Prevent overlap */

body {


padding-top:60px;

padding-bottom:120px;


}








@media(max-width:700px){


.ad-content {


flex-direction:column;

text-align:center;


}



.smart-bottom-ad {


flex-direction:column;

text-align:center;

bottom:10px;


}



.smart-bottom-ad h3 {


font-size:18px;


}


}

.reserve-page {

    min-height:100vh;

    padding:180px 10% 100px;

    text-align:center;

}

/* ===================================
   RESERVE PAGE PREMIUM DESIGN
=================================== */


.reserve-page {

    min-height:100vh;

    padding:220px 10% 150px;

    text-align:center;

    background:

    radial-gradient(
        circle at top right,
        #004d3d,
        transparent 35%
    ),

    linear-gradient(
        135deg,
        #050914,
        #111827
    );

}




.reserve-page h1 {

    font-size:55px;

    font-weight:800;

    color:#00ff88;

    margin-bottom:20px;

}



.reserve-page > p {

    color:#d1d5db;

    font-size:19px;

    margin-bottom:50px;

}




/* FORM CARD */


.reserve-form {

    max-width:700px;

    margin:auto;

    padding:45px;


    background:

    rgba(255,255,255,0.08);


    border:

    1px solid rgba(255,255,255,0.15);


    border-radius:30px;


    backdrop-filter:blur(15px);


    box-shadow:

    0 25px 60px rgba(0,0,0,0.45);


    display:flex;

    flex-direction:column;

    gap:22px;


}






/* INPUTS */


.reserve-form input,
.reserve-form select,
.reserve-form textarea {


    width:100%;


    padding:17px 20px;


    border-radius:15px;


    border:

    1px solid rgba(255,255,255,0.12);



    background:#111827;


    color:white;


    font-size:16px;


    outline:none;


    transition:.3s;


}




.reserve-form input::placeholder,
.reserve-form textarea::placeholder {

    color:#9ca3af;

}





.reserve-form input:focus,
.reserve-form select:focus,
.reserve-form textarea:focus {


    border-color:#00ff88;


    box-shadow:

    0 0 15px rgba(0,255,136,0.25);


}







/* SELECT */


.reserve-form select {


    cursor:pointer;

}



.reserve-form option {

    background:#111827;

    color:white;

}






/* TEXTAREA */


.reserve-form textarea {


    height:160px;


    resize:none;


}







/* BUTTON */


.reserve-form button {


    margin-top:10px;


    padding:17px;


    border:none;


    border-radius:35px;


    background:#00ff88;


    color:#061018;


    font-size:18px;


    font-weight:800;


    cursor:pointer;


    transition:.3s;


}





.reserve-form button:hover {


    transform:translateY(-5px);


    box-shadow:

    0 15px 35px rgba(0,255,136,0.35);


}







/* FOOTER SPACING */


.reserve-page + footer {

    margin-top:0;

}







/* MOBILE */


@media(max-width:700px){


.reserve-page {

    padding:180px 5% 120px;

}



.reserve-page h1 {

    font-size:38px;

}



.reserve-form {


    padding:25px;


}



}