/* ==========================================================
   COMPONENTS
   RamiOS Portfolio
========================================================== */


/* ==========================================================
   APPLE GLASS CARD
========================================================== */

.glass-card{

    position:relative;

    overflow:hidden;

    padding:40px;

    border-radius:30px;

    background:rgba(255,255,255,.035);

    backdrop-filter:blur(25px);

    -webkit-backdrop-filter:blur(25px);

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

    transition:.4s;

}

.glass-card::before{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(
        135deg,
        rgba(255,255,255,.08),
        transparent 45%
    );

    pointer-events:none;

}

.glass-card:hover{

    transform:translateY(-8px);

    border-color:rgba(79,124,255,.45);

    box-shadow:

        0 25px 70px rgba(0,0,0,.35);

}

/* ==========================================================
   ICON BOX
========================================================== */

.icon-box{

    width:70px;

    height:70px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:22px;

    background:linear-gradient(
        135deg,
        #4F7CFF,
        #6F5CFF
    );

    color:white;

    font-size:28px;

    margin-bottom:25px;

}

/* ==========================================================
   FEATURE CARD
========================================================== */

.feature-card{

    padding:35px;

    border-radius:26px;

    background:#11151F;

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

    transition:.35s;

}

.feature-card:hover{

    transform:translateY(-10px);

    border-color:#4F7CFF;

}

.feature-card h3{

    margin:18px 0;

}

.feature-card p{

    font-size:16px;

}

/* ==========================================================
   PROJECT CARD
========================================================== */

.project{

    overflow:hidden;

    border-radius:28px;

    background:#11151F;

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

    transition:.35s;

}

.project:hover{

    transform:translateY(-12px);

}

.project-image{

    position:relative;

}

.project-image img{

    width:100%;

    height:270px;

    object-fit:cover;

}

.project-overlay{

    position:absolute;

    inset:0;

    background:linear-gradient(
        to top,
        rgba(0,0,0,.85),
        transparent
    );

    opacity:0;

    transition:.35s;

}

.project:hover .project-overlay{

    opacity:1;

}

.project-body{

    padding:30px;

}

.project-title{

    font-size:26px;

    margin-bottom:12px;

}

.project-description{

    color:#A5A9B8;

    margin-bottom:25px;

}

/* ==========================================================
   TECHNOLOGY BADGES
========================================================== */

.tech-stack{

display:flex;

flex-wrap:wrap;

gap:10px;

}

.tech{

padding:8px 18px;

background:rgba(79,124,255,.12);

border:1px solid rgba(79,124,255,.18);

border-radius:999px;

font-size:14px;

color:#9EC1FF;

}

/* ==========================================================
   APP STORE BUTTON
========================================================== */

.app-store{

display:inline-flex;

align-items:center;

gap:12px;

padding:16px 26px;

background:white;

color:#111;

border-radius:18px;

font-weight:700;

transition:.3s;

}

.app-store:hover{

transform:scale(1.04);

}

/* ==========================================================
   OUTLINE BUTTON
========================================================== */

.btn-outline{

padding:15px 30px;

border-radius:999px;

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

background:transparent;

color:white;

transition:.3s;

}

.btn-outline:hover{

background:white;

color:black;

}

/* ==========================================================
   SOCIAL ICON
========================================================== */

.social-icons{

display:flex;

gap:16px;

}

.social-icons a{

width:55px;

height:55px;

display:flex;

align-items:center;

justify-content:center;

border-radius:50%;

background:#141923;

transition:.3s;

font-size:20px;

}

.social-icons a:hover{

background:#4F7CFF;

color:white;

transform:translateY(-5px);

}

/* ==========================================================
   PROFILE CARD
========================================================== */

.profile-card{

text-align:center;

padding:45px;

border-radius:32px;

background:#11151F;

}

.profile-card img{

width:180px;

height:180px;

border-radius:50%;

object-fit:cover;

margin:auto;

margin-bottom:30px;

border:5px solid rgba(79,124,255,.35);

}

.profile-card h2{

margin-bottom:10px;

}

.profile-card h4{

color:#4F7CFF;

margin-bottom:25px;

}

/* ==========================================================
   STAT CARD
========================================================== */

.stat{

text-align:center;

padding:35px;

border-radius:24px;

background:#10141D;

}

.stat h2{

font-size:58px;

color:#4F7CFF;

margin-bottom:10px;

}

.stat p{

font-size:15px;

}

/* ==========================================================
   DIVIDER
========================================================== */

.divider{

width:120px;

height:4px;

margin:30px auto;

border-radius:999px;

background:linear-gradient(
90deg,
#4F7CFF,
#7A5FFF);

}
/*=========================================================
    PRICING CARD
=========================================================*/

.pricing-card{

    position:relative;

    padding:50px 40px;

    background:#11151F;

    border-radius:32px;

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

    transition:.35s;

    overflow:hidden;

}

.pricing-card:hover{

    transform:translateY(-12px);

    border-color:var(--primary);

    box-shadow:0 30px 80px rgba(0,0,0,.35);

}

.pricing-card.popular{

    border:2px solid var(--primary);

}

.pricing-badge{

    position:absolute;

    top:25px;

    right:-40px;

    transform:rotate(45deg);

    width:180px;

    text-align:center;

    padding:8px;

    background:var(--primary);

    color:#fff;

    font-weight:700;

    font-size:13px;

}

.price{

    display:flex;

    align-items:flex-end;

    gap:6px;

    margin:25px 0;

}

.price h2{

    font-size:60px;

    color:#fff;

}

.price span{

    color:var(--text-light);

    margin-bottom:12px;

}

.pricing-features{

    margin:35px 0;

    display:flex;

    flex-direction:column;

    gap:18px;

}

.pricing-features li{

    display:flex;

    align-items:center;

    gap:12px;

}

.pricing-features i{

    color:#32D296;

}

/*=========================================================
    TESTIMONIAL CARD
=========================================================*/

.testimonial{

    padding:40px;

    border-radius:28px;

    background:#10141D;

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

    transition:.35s;

}

.testimonial:hover{

    transform:translateY(-8px);

}

.testimonial-text{

    font-size:17px;

    color:var(--text-light);

    line-height:1.8;

    margin-bottom:35px;

}

.testimonial-user{

    display:flex;

    align-items:center;

    gap:18px;

}

.testimonial-user img{

    width:70px;

    height:70px;

    border-radius:50%;

    object-fit:cover;

}

.testimonial-user h4{

    margin-bottom:4px;

}

.testimonial-user p{

    font-size:14px;

}

/*=========================================================
    EXPERIENCE CARD
=========================================================*/

.experience-card{

    display:flex;

    gap:30px;

    padding:35px;

    background:#11151F;

    border-radius:28px;

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

    transition:.35s;

}

.experience-card:hover{

    border-color:var(--primary);

}

.company-logo{

    width:90px;

    height:90px;

    border-radius:20px;

    background:#181D28;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:34px;

    color:var(--primary);

    flex-shrink:0;

}

.company-info h3{

    margin-bottom:8px;

}

.company-info h5{

    color:var(--primary);

    margin-bottom:18px;

}

/*=========================================================
    SKILL CARD
=========================================================*/

.skill-card{

    padding:28px;

    border-radius:24px;

    background:#11151F;

    transition:.35s;

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

}

.skill-card:hover{

    transform:translateY(-6px);

}

.skill-icon{

    font-size:42px;

    color:var(--primary);

    margin-bottom:18px;

}

.skill-progress{

    height:8px;

    border-radius:100px;

    background:#1B2232;

    overflow:hidden;

    margin-top:18px;

}

.skill-progress span{

    display:block;

    height:100%;

    border-radius:100px;

    background:linear-gradient(90deg,#4F7CFF,#7A5FFF);

}

/*=========================================================
    AWARD CARD
=========================================================*/

.award{

    display:flex;

    align-items:center;

    gap:20px;

    padding:30px;

    border-radius:22px;

    background:#10141D;

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

}

.award i{

    font-size:42px;

    color:#FFC857;

}

/*=========================================================
    CLIENT LOGO
=========================================================*/

.client{

    height:120px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#11151F;

    border-radius:20px;

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

    transition:.3s;

}

.client:hover{

    background:#171D2A;

}

.client img{

    max-height:55px;

    max-width:150px;

    opacity:.75;

    transition:.3s;

}

.client:hover img{

    opacity:1;

}

/*=========================================================
    FAQ
=========================================================*/

.faq{

    border-radius:20px;

    overflow:hidden;

    margin-bottom:20px;

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

}

.faq-header{

    padding:24px;

    cursor:pointer;

    background:#11151F;

    display:flex;

    justify-content:space-between;

    align-items:center;

}

.faq-content{

    padding:25px;

    background:#171D2A;

    display:none;

}

/*=========================================================
    BADGES
=========================================================*/

.badge-primary{

    padding:8px 18px;

    border-radius:999px;

    background:#4F7CFF;

    color:white;

    font-size:13px;

}

.badge-success{

    padding:8px 18px;

    border-radius:999px;

    background:#32D296;

    color:white;

}

.badge-warning{

    padding:8px 18px;

    border-radius:999px;

    background:#FFC857;

    color:black;

}

.badge-danger{

    padding:8px 18px;

    border-radius:999px;

    background:#FF5D73;

    color:white;

}

/*=========================================================
    TAGS
=========================================================*/

.tag-cloud{

    display:flex;

    flex-wrap:wrap;

    gap:12px;

}

.tag-cloud a{

    padding:10px 20px;

    background:#171D2A;

    border-radius:999px;

    transition:.3s;

}

.tag-cloud a:hover{

    background:var(--primary);

    color:white;

}

/*=========================================================
    LOADER
=========================================================*/

.loader{

    width:60px;

    height:60px;

    border-radius:50%;

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

    border-top-color:var(--primary);

    animation:spin 1s linear infinite;

}

@keyframes spin{

    from{

        transform:rotate(0);

    }

    to{

        transform:rotate(360deg);

    }

}
/*=========================================================
    MODAL
=========================================================*/

.modal-overlay{

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.75);

    backdrop-filter:blur(8px);

    display:flex;

    align-items:center;

    justify-content:center;

    opacity:0;

    visibility:hidden;

    transition:.35s;

    z-index:9999;

}

.modal-overlay.active{

    opacity:1;

    visibility:visible;

}

.modal{

    width:min(850px,92%);

    background:#11151F;

    border-radius:32px;

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

    overflow:hidden;

    transform:translateY(40px);

    transition:.35s;

}

.modal-overlay.active .modal{

    transform:translateY(0);

}

.modal-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:28px 35px;

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

}

.modal-body{

    padding:35px;

}

.modal-footer{

    padding:25px 35px;

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

    display:flex;

    justify-content:flex-end;

    gap:15px;

}

.modal-close{

    width:42px;

    height:42px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#1B2130;

    cursor:pointer;

    transition:.3s;

}

.modal-close:hover{

    background:#FF5D73;

}

/*=========================================================
    TOAST
=========================================================*/

.toast{

    position:fixed;

    right:30px;

    bottom:30px;

    min-width:340px;

    padding:22px 24px;

    border-radius:20px;

    background:#11151F;

    border-left:5px solid var(--primary);

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

    display:flex;

    gap:15px;

    align-items:flex-start;

    z-index:9999;

}

.toast-success{

    border-left-color:#32D296;

}

.toast-error{

    border-left-color:#FF5D73;

}

.toast-warning{

    border-left-color:#FFC857;

}

/*=========================================================
    DRAWER
=========================================================*/

.drawer{

    position:fixed;

    top:0;

    right:-420px;

    width:420px;

    height:100vh;

    background:#0F131D;

    transition:.35s;

    z-index:9998;

    overflow-y:auto;

}

.drawer.open{

    right:0;

}

.drawer-header{

    padding:35px;

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

}

.drawer-body{

    padding:35px;

}

/*=========================================================
    TABS
=========================================================*/

.tabs{

    display:flex;

    gap:15px;

    margin-bottom:40px;

    flex-wrap:wrap;

}

.tab{

    padding:14px 26px;

    border-radius:999px;

    background:#171D2A;

    cursor:pointer;

    transition:.3s;

}

.tab.active{

    background:var(--primary);

    color:white;

}

.tab-content{

    display:none;

}

.tab-content.active{

    display:block;

}

/*=========================================================
    ACCORDION
=========================================================*/

.accordion{

    display:flex;

    flex-direction:column;

    gap:18px;

}

.accordion-item{

    border-radius:20px;

    overflow:hidden;

    background:#11151F;

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

}

.accordion-header{

    padding:24px 30px;

    cursor:pointer;

    display:flex;

    justify-content:space-between;

    align-items:center;

}

.accordion-body{

    display:none;

    padding:30px;

    color:var(--text-light);

}

/*=========================================================
    PAGINATION
=========================================================*/

.pagination{

    display:flex;

    justify-content:center;

    gap:15px;

    margin-top:60px;

}

.page{

    width:50px;

    height:50px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:#171D2A;

    transition:.3s;

}

.page.active{

    background:var(--primary);

}

.page:hover{

    background:var(--primary);

}

/*=========================================================
    BREADCRUMB
=========================================================*/

.breadcrumb{

    display:flex;

    align-items:center;

    gap:12px;

    margin-bottom:45px;

}

.breadcrumb a{

    color:#A5A9B8;

}

.breadcrumb i{

    font-size:12px;

    opacity:.5;

}

/*=========================================================
    SEARCH BAR
=========================================================*/

.search-box{

    position:relative;

}

.search-box input{

    padding-left:60px;

}

.search-box i{

    position:absolute;

    top:50%;

    left:24px;

    transform:translateY(-50%);

    color:#7E8596;

}

/*=========================================================
    TABLE
=========================================================*/

.table{

    width:100%;

    border-collapse:collapse;

}

.table th{

    text-align:left;

    padding:18px;

    background:#171D2A;

}

.table td{

    padding:18px;

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

}

.table tr:hover{

    background:#141923;

}

/*=========================================================
    CODE BLOCK
=========================================================*/

.code{

    background:#0A0D14;

    border-radius:20px;

    overflow:hidden;

}

.code-header{

    padding:16px 24px;

    background:#171D2A;

}

.code-body{

    padding:30px;

    overflow:auto;

}

.code pre{

    color:#9EC1FF;

}

/*=========================================================
    EMPTY STATE
=========================================================*/

.empty{

    text-align:center;

    padding:100px 30px;

}

.empty i{

    font-size:90px;

    color:var(--primary);

    margin-bottom:30px;

}

.empty h2{

    margin-bottom:15px;

}

/*=========================================================
    FLOATING ACTION BUTTON
=========================================================*/

.fab{

    position:fixed;

    right:35px;

    bottom:35px;

    width:68px;

    height:68px;

    border-radius:50%;

    background:linear-gradient(135deg,#4F7CFF,#7A5FFF);

    display:flex;

    align-items:center;

    justify-content:center;

    color:#fff;

    font-size:26px;

    cursor:pointer;

    z-index:999;

    box-shadow:0 20px 50px rgba(79,124,255,.35);

    transition:.35s;

}

.fab:hover{

    transform:translateY(-8px) scale(1.08);

}

/*=========================================================
    NOTIFICATION BADGE
=========================================================*/

.notification{

    position:relative;

}

.notification::after{

    content:"";

    position:absolute;

    top:-4px;

    right:-4px;

    width:12px;

    height:12px;

    border-radius:50%;

    background:#FF5D73;

}

/*=========================================================
    METRIC CARD
=========================================================*/

.metric-card{

    padding:35px;

    border-radius:26px;

    background:#11151F;

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

    transition:.35s;

}

.metric-card:hover{

    transform:translateY(-8px);

}

.metric-value{

    font-size:54px;

    font-weight:700;

    color:#4F7CFF;

}

.metric-label{

    margin-top:10px;

    color:#A5A9B8;

}

/*=========================================================
    DASHBOARD CARD
=========================================================*/

.dashboard-card{

    padding:30px;

    border-radius:24px;

    background:#141923;

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

}

.dashboard-header{

    display:flex;

    justify-content:space-between;

    margin-bottom:25px;

}

.dashboard-body{

    min-height:180px;

}

/*=========================================================
    FEATURE LIST
=========================================================*/

.feature-list{

    display:flex;

    flex-direction:column;

    gap:20px;

}

.feature-item{

    display:flex;

    gap:18px;

    align-items:flex-start;

}

.feature-item i{

    color:#4F7CFF;

    font-size:22px;

    margin-top:4px;

}

/*=========================================================
    SERVICE CARD
=========================================================*/

.service{

    padding:40px;

    border-radius:28px;

    background:#11151F;

    transition:.35s;

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

}

.service:hover{

    transform:translateY(-10px);

    border-color:#4F7CFF;

}

.service-icon{

    width:80px;

    height:80px;

    border-radius:22px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:rgba(79,124,255,.15);

    color:#4F7CFF;

    font-size:34px;

    margin-bottom:25px;

}

/*=========================================================
    CERTIFICATE CARD
=========================================================*/

.certificate{

    display:flex;

    gap:25px;

    padding:30px;

    border-radius:24px;

    background:#10141D;

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

}

.certificate-logo{

    width:80px;

    height:80px;

    border-radius:20px;

    background:#171D2A;

    display:flex;

    justify-content:center;

    align-items:center;

}

.certificate-logo i{

    font-size:36px;

    color:#FFC857;

}

/*=========================================================
    PROFILE INFO
=========================================================*/

.profile-info{

    display:grid;

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

    gap:20px;

}

.profile-box{

    padding:22px;

    background:#141923;

    border-radius:18px;

}

.profile-box span{

    display:block;

    color:#7E8596;

    margin-bottom:8px;

}

.profile-box strong{

    color:#fff;

}

/*=========================================================
    STATUS
=========================================================*/

.status{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:10px 18px;

    border-radius:999px;

    background:rgba(50,210,150,.15);

    color:#32D296;

}

.status::before{

    content:"";

    width:10px;

    height:10px;

    border-radius:50%;

    background:#32D296;

}

/*=========================================================
    APP CARD
=========================================================*/

.app-card{

    overflow:hidden;

    border-radius:30px;

    background:#11151F;

    transition:.35s;

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

}

.app-card:hover{

    transform:translateY(-12px);

}

.app-header{

    padding:30px;

    display:flex;

    gap:20px;

    align-items:center;

}

.app-icon{

    width:90px;

    height:90px;

    border-radius:24px;

    overflow:hidden;

}

.app-icon img{

    width:100%;

    height:100%;

    object-fit:cover;

}

.app-body{

    padding:0 30px 30px;

}

/*=========================================================
    DOWNLOAD BUTTON
=========================================================*/

.download-btn{

    display:inline-flex;

    gap:12px;

    align-items:center;

    padding:16px 28px;

    border-radius:18px;

    background:#4F7CFF;

    color:#fff;

    transition:.35s;

}

.download-btn:hover{

    background:#3A68EF;

    transform:translateY(-4px);

}

/*=========================================================
    DIVIDER
=========================================================*/

.section-divider{

    width:100%;

    height:1px;

    background:rgba(255,255,255,.05);

    margin:100px 0;

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

.navbar{

    position:sticky;
    top:0;
    z-index:999;

    backdrop-filter:blur(20px);

    background:rgba(8,12,25,.82);

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

.navbar-container{

    display:flex;

    align-items:center;

    justify-content:space-between;

    height:80px;
}

.logo{

    display:flex;

    align-items:center;

    gap:12px;

    color:#fff;

    text-decoration:none;

    font-size:1.2rem;

    font-weight:700;
}

.logo i{

    font-size:1.5rem;

    color:var(--primary);
}

.nav-menu{

    display:flex;

    gap:34px;
}

.nav-menu a{

    color:#d8d8d8;

    text-decoration:none;

    font-weight:500;

    transition:.3s;
}

.nav-menu a:hover{

    color:white;
}

.nav-actions{

    display:flex;

    align-items:center;

    gap:16px;
}

.menu-btn{

    display:none;

    width:44px;

    height:44px;

    border-radius:12px;

    background:rgba(255,255,255,.06);

    border:none;

    color:white;

    cursor:pointer;
}

.btn-sm{

    padding:12px 24px;

    font-size:.9rem;
}
/*==================================================
FOOTER
==================================================*/

.footer{

    padding:90px 0 40px;

    background:#060913;

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

.footer-grid{

    display:grid;

    grid-template-columns:2fr 1fr 1fr 1fr;

    gap:60px;
}

.footer h3{

    color:white;

    margin-bottom:20px;
}

.footer h4{

    color:white;

    margin-bottom:20px;
}

.footer p{

    color:#b9bfd0;

    line-height:1.8;
}

.footer ul{

    list-style:none;

    padding:0;

    margin:0;
}

.footer li{

    margin-bottom:12px;
}

.footer a{

    color:#b9bfd0;

    text-decoration:none;

    transition:.3s;
}

.footer a:hover{

    color:white;
}

.footer-social{

    display:flex;

    gap:18px;
}

.footer-social a{

    width:48px;

    height:48px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:14px;

    background:rgba(255,255,255,.05);

    color:white;

    transition:.35s;
}

.footer-social a:hover{

    transform:translateY(-5px);

    background:var(--primary);
}

.footer-bottom{

    margin-top:70px;

    padding-top:30px;

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

    text-align:center;

    color:#888;
}