/* =====================================================
   AGK Premium Website
   Author : AGK
   Version: 1.0
====================================================== */

/* Google Font */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;600;700;800&display=swap');

/* ==========================================
   RESET
========================================== */

*,
*::before,
*::after{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    font-family:'Manrope',sans-serif;
    background:#050816;
    color:#ffffff;
    font-size:16px;
    line-height:1.8;
    overflow-x:hidden;
}

img{
    max-width:100%;
    display:block;
}

ul{
    list-style:none;
}

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

.container{
    width:min(1200px,92%);
    margin:auto;
}

/* ==========================================
   COLORS
========================================== */

:root{

--primary:#4F46E5;
--secondary:#06B6D4;
--dark:#050816;
--card:#0D1325;
--border:rgba(255,255,255,.08);
--text:#dbe4ff;
--heading:#ffffff;

}

/* ==========================================
TYPOGRAPHY
========================================== */

h1,
h2,
h3,
h4{
    color:var(--heading);
    line-height:1.2;
    font-weight:700;
}

h1{
    font-size:62px;
}

h2{
    font-size:44px;
}

h3{
    font-size:26px;
}

p{
    color:var(--text);
}

/* ==========================================
HEADER
========================================== */

header{

position:fixed;
top:0;
left:0;
width:100%;
z-index:999;

padding:25px 0;

background:rgba(5,8,22,.70);

backdrop-filter:blur(18px);

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

}

header .container{

display:flex;

justify-content:space-between;

align-items:center;

}

.logo{

font-size:34px;

font-weight:800;

letter-spacing:3px;

color:#fff;

}

nav ul{

display:flex;

gap:35px;

}

nav a{

font-weight:600;

transition:.35s;

color:#dbe4ff;

}

nav a:hover{

color:#06B6D4;

}

/* ==========================================
BUTTONS
========================================== */

.btn-primary{

display:inline-flex;

align-items:center;

justify-content:center;

padding:16px 36px;

border-radius:8px;

background:linear-gradient(135deg,#4F46E5,#06B6D4);

font-weight:700;

transition:.35s;

}

.btn-primary:hover{

transform:translateY(-4px);

box-shadow:0 20px 40px rgba(79,70,229,.35);

}

.btn-secondary{

display:inline-flex;

align-items:center;

justify-content:center;

padding:16px 36px;

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

border-radius:8px;

transition:.35s;

}

.btn-secondary:hover{

background:#11182d;

}

.btn-outline{

padding:12px 28px;

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

border-radius:50px;

transition:.35s;

}

.btn-outline:hover{

background:#11182d;

}

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

.hero{

padding:180px 0 120px;

position:relative;

overflow:hidden;

}

.hero::before{

content:"";

position:absolute;

width:700px;

height:700px;

background:#4F46E5;

filter:blur(180px);

opacity:.25;

top:-250px;

right:-150px;

border-radius:50%;

}

.hero-grid{

display:grid;

grid-template-columns:1fr 1fr;

align-items:center;

gap:70px;

position:relative;

z-index:2;

}

.tag{

display:inline-block;

padding:8px 18px;

border-radius:50px;

background:rgba(79,70,229,.18);

color:#7dd3fc;

font-size:14px;

margin-bottom:25px;

letter-spacing:2px;

}

.hero h1{

margin-bottom:30px;

}

.hero p{

font-size:20px;

margin-bottom:45px;

max-width:600px;

}

.hero-buttons{

display:flex;

gap:20px;

}

.hero-image{

text-align:center;

}

.hero-image img{

max-width:100%;

animation:float 5s ease infinite;

}

/* ==========================================
FLOAT ANIMATION
========================================== */

@keyframes float{

0%{
transform:translateY(0px);
}

50%{
transform:translateY(-18px);
}

100%{
transform:translateY(0px);
}

}

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

section{

padding:110px 0;

}

.section-title{

text-align:center;

margin-bottom:70px;

}

.section-title span{

display:inline-block;

color:#06B6D4;

letter-spacing:3px;

font-size:14px;

margin-bottom:15px;

}

.section-title h2{

max-width:700px;

margin:auto;

}

.menu-toggle{
    display:none;
    background:none;
    border:none;
    color:#fff;
    font-size:32px;
    cursor:pointer;
}

@media(max-width:767px){

    .menu-toggle{
        display:block;
    }

    nav{
        position:absolute;
        top:100%;
        left:0;
        width:100%;
        background:#0D1325;
        display:none;
        padding:20px 0;
    }

    nav.active{
        display:block;
    }

    nav ul{
        flex-direction:column;
        gap:20px;
        align-items:center;
    }

    .btn-outline{
        display:none;
    }

}

@media (max-width: 767px) {

    .menu-toggle {
        display: block;
        background: none;
        border: none;
        color: #fff;
        font-size: 30px;
        cursor: pointer;
        z-index: 1001;
    }

    nav {
        position: fixed;
        top: 80px;
        left: 0;
        width: 100%;
        background: #0D1325;
        display: none;
        padding: 30px 0;
        z-index: 999;
    }

    nav.active {
        display: block;
    }

    nav ul {
        display: flex;
        flex-direction: column;
        gap: 20px;
        text-align: center;
    }

    .btn-outline {
        display: none;
    }
}

/* ==========================
   Scroll To Top
========================== */

#scrollTop{
    position:fixed;
    right:30px;
    bottom:30px;
    width:55px;
    height:55px;
    border:none;
    border-radius:50%;
    background:linear-gradient(135deg,#4F46E5,#06B6D4);
    color:#fff;
    font-size:24px;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:0 12px 30px rgba(79,70,229,.35);
    opacity:0;
    visibility:hidden;
    transform:translateY(20px);
    transition:.35s ease;
    z-index:9999;
}

#scrollTop:hover{
    transform:translateY(-5px) scale(1.08);
    box-shadow:0 18px 35px rgba(6,182,212,.45);
}

#scrollTop.show{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
}

/* Mobile */

@media(max-width:767px){

    #scrollTop{
        width:48px;
        height:48px;
        right:18px;
        bottom:18px;
        font-size:20px;
    }

}

/*** Tab ***/ 
/*** Tab Navigation - Theme Matched ***/ 

/* Hide all tab sections by default */
.tab-content {
    display: none;
    animation: fadeIn 0.4s ease forwards;
}

/* Only show the active tab section */
.tab-content.active {
    display: block;
}

/* Tab container alignment */
.portfolio-tabs {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-bottom: 50px;
}

/* Theme-matched tab buttons */
.tab-btn {
    padding: 12px 28px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 50px; /* Matching your pill-shaped .btn-outline */
    color: var(--text);
    font-family: 'Manrope', sans-serif;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.35s ease;
}

/* Hover state styling */
.tab-btn:hover {
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.3);
    background: #11182d;
    transform: translateY(-2px);
}

/* Active state matching your primary action buttons */
.tab-btn.active {
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    color: #ffffff;
    border-color: transparent;
    box-shadow: 0 10px 25px rgba(79, 70, 229, 0.25);
    transform: translateY(-2px);
}

/* Smooth fade-in transition when switching tabs */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/*** Tab ***/