/* ==================================================
DOIGLOBAL MASTER CSS
================================================== */

:root{
primary:#2563ff;
secondary:#00c6ff;
dark:#020817;
dark2:#071225;
text:#9fb2d4;
white:#ffffff;
}

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

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

html{
scroll-behavior:smooth;
}

body{
font-family:'Space Grotesk',sans-serif;
background:linear-gradient(180deg,#020817,#071225,#020817);
color:#ffffff;
overflow-x:hidden;
min-height:100vh;
}

/* =========================
BACKGROUND EFFECTS
========================= */

body::before{
content:'';
position:fixed;
width:900px;
height:900px;
background:#2563ff15;
border-radius:50%;
top:-400px;
right:-250px;
filter:blur(120px);
z-index:-2;
}

body::after{
content:'';
position:fixed;
width:700px;
height:700px;
background:#00c6ff10;
border-radius:50%;
bottom:-300px;
left:-200px;
filter:blur(120px);
z-index:-2;
}

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

.navbar{
background:rgba(2,8,23,.85);
backdrop-filter:blur(20px);
border-bottom:1px solid rgba(255,255,255,.06);
padding:18px 0;
z-index:9999;
}
.navbar{
    min-height:80px;
}
.navbar-brand{
color:#ffffff !important;
font-size:32px;
font-weight:700;
letter-spacing:-1px;
}

.navbar-nav{
    gap:10px;
    align-items:center;
}

.nav-link{
color:#ffffff !important;
font-weight:500;
margin-left:12px;
transition:.3s;
white-space:nowrap;
}

.nav-link:hover,
.nav-link.active{
color:#38bdf8 !important;
}

.navbar-toggler{
border:1px solid rgba(255,255,255,.15);
}

.navbar-toggler-icon{
filter:invert(1);
}
.navbar-collapse{
    justify-content:flex-end;
}

.navbar-nav{
    display:flex !important;
    flex-direction:row !important;
    align-items:center;
    gap:8px;
}

.navbar-nav .nav-item{
    display:flex;
    align-items:center;
}

.nav-link{
    white-space:nowrap;
}
/* =========================
PAGE LAYOUT
========================= */

.page-container{
max-width:1300px;
margin:auto;
padding:150px 20px 100px;
}

.page-header{
text-align:center;
margin-bottom:70px;
}

.page-header h1{
font-size:64px;
font-weight:700;
letter-spacing:-2px;
margin-bottom:20px;
}

.page-header p{
color:var(--text);
max-width:850px;
margin:auto;
line-height:2;
font-size:18px;
}
.page-header{
    max-width:900px;
    margin:0 auto 70px;
    text-align:center;
}
/* =========================
CARDS
========================= */

.page-card,
.service-card,
.pricing-card{
background:rgba(255,255,255,.04);
border:1px solid rgba(255,255,255,.06);
backdrop-filter:blur(20px);
border-radius:35px;
padding:40px;
transition:.3s;
}

.page-card:hover,
.service-card:hover,
.pricing-card:hover{
transform:translateY(-8px);
border-color:rgba(37,99,255,.35);
}

/* =========================
SERVICE ICON
========================= */

.service-icon{
width:80px;
height:80px;
border-radius:22px;
display:flex;
align-items:center;
justify-content:center;
font-size:34px;
background:linear-gradient(135deg,var(--primary),var(--secondary));
margin-bottom:25px;
}

/* =========================
DOI DIRECTORY
========================= */

.doi-card{
background:rgba(255,255,255,.04);
border:1px solid rgba(255,255,255,.06);
backdrop-filter:blur(20px);
border-radius:35px;
padding:40px;
height:100%;
}

.doi-number{
color:#38bdf8;
font-weight:700;
margin-bottom:15px;
word-break:break-all;
}

.doi-title{
font-size:24px;
font-weight:700;
margin-bottom:15px;
}

.doi-author{
color:#cbd5e1;
}

.doi-meta{
color:#94a3b8;
line-height:2;
}

.doi-actions{
display:flex;
flex-wrap:wrap;
gap:10px;
margin-top:20px;
}

.doi-badge{
display:inline-block;
padding:8px 14px;
border-radius:50px;
background:rgba(37,99,255,.15);
color:#38bdf8;
font-size:13px;
margin-bottom:15px;
}

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

.btn-main{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    padding:12px 24px;

    height:48px;

    border-radius:14px;

    background:linear-gradient(
        135deg,
        #2563ff,
        #00c6ff
    );

    color:#fff !important;
    text-decoration:none;
    font-weight:600;
    font-size:15px;

    white-space:nowrap;

    border:none;

    transition:.3s;
}

.btn-main:hover{
    transform:translateY(-2px);
    color:#fff !important;
}
/* =========================
FORMS
========================= */

.form-control,
.form-select{
background:rgba(255,255,255,.05);
border:1px solid rgba(255,255,255,.08);
color:white;
border-radius:16px;
}
.form-control::placeholder{
    color:#94a3b8 !important;
    opacity:1;
}
.form-control:focus,
.form-select:focus{
background:rgba(255,255,255,.08);
border-color:#2563ff;
color:white;
box-shadow:none;
}
.form-control{
    min-height:60px;
}
.form-select{
    background:rgba(255,255,255,.05) !important;
    color:#ffffff !important;
    border:1px solid rgba(255,255,255,.08) !important;
}

.form-select option{
    background:#0f172a !important;
    color:#ffffff !important;
}
/* =========================
FORMS
========================= */

.form-control,
.form-select{
    background:rgba(255,255,255,.05);
    border:1px solid rgba(255,255,255,.08);
    color:white;
    border-radius:16px;
}

.form-control:focus,
.form-select:focus{
    background:rgba(255,255,255,.08);
    border-color:#2563ff;
    color:white;
    box-shadow:none;
}
.form-control,
.form-select{

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

    color:#ffffff !important;

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

    border-radius:18px;

    min-height:60px;

}

.form-control::placeholder{

    color:#94a3b8 !important;

    opacity:1;

}

.form-control:focus,
.form-select:focus{

    background:rgba(255,255,255,.08) !important;

    border-color:#2563ff !important;

    box-shadow:0 0 0 4px rgba(37,99,255,.15) !important;

    color:#ffffff !important;

}
/* =========================
MEMBERSHIP TABLE
========================= */

.table{
    color:#ffffff !important;
    margin-bottom:0;
}

.table th{
    background:rgba(37,99,255,.15) !important;
    color:#ffffff !important;
    border-color:rgba(255,255,255,.08) !important;
    padding:18px;
}

.table td{
    background:rgba(255,255,255,.03) !important;
    color:#cbd5e1 !important;
    border-color:rgba(255,255,255,.08) !important;
    padding:18px;
}

.table tbody tr:hover td{
    background:rgba(255,255,255,.05) !important;
}

.table-responsive{
    border-radius:25px;
    overflow:hidden;
}

/* =========================
FORMS
========================= */

/* form css */


/* =========================
TABLES
========================= */

/* table css */


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

/* membership table css */


/* =========================
DOI LANDING PAGE
========================= */

.doi-hero{
padding:170px 0 80px;
}

/* ALL DOI CSS HERE */


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

/* footer css */


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

@media(max-width:992px){

}
/* =========================
DOI LANDING PAGE
========================= */

.doi-hero{
padding:170px 0 80px;
}

.doi-badge{
display:inline-flex;

}

.permalink-box{

}


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

@media(max-width:992px){

    /* existing mobile css */

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

.accordion-item{
}
/* =========================
FAQ
========================= */

.accordion-item{
background:rgba(255,255,255,.04);
border:1px solid rgba(255,255,255,.06);
border-radius:20px;
overflow:hidden;
margin-bottom:15px;
}

.accordion-button{
background:rgba(255,255,255,.03);
color:white;
}

.accordion-button:not(.collapsed){
background:rgba(37,99,255,.15);
color:white;
}

.accordion-body{
background:rgba(255,255,255,.02);
color:#cbd5e1;
}
/* =========================
DOI LANDING PAGE
========================= */

.doi-hero{
    padding:170px 0 80px;
}

/* all DOI css here */


/* =========================
CITATION GENERATOR
========================= */

.citation-box{
    background:rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.06);
    padding:25px;
    border-radius:20px;
    color:#cbd5e1;
    line-height:1.8;
    word-break:break-word;
}

pre{
    background:#020817;
    border:1px solid rgba(255,255,255,.08);
    padding:25px;
    border-radius:20px;
    color:#38bdf8;
    overflow:auto;
}


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

/* footer css */


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

@media(max-width:992px){

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

footer{
padding:100px 0 40px;
}

.footer-box{
background:rgba(255,255,255,.04);
border:1px solid rgba(255,255,255,.06);
border-radius:40px;
padding:60px;
backdrop-filter:blur(20px);
}

.footer-links a{
display:block;
color:#94a3b8;
margin-bottom:12px;
text-decoration:none;
}

.footer-links a:hover{
    color:#ffffff;
    padding-left:6px;
}
/* =========================
SOCIAL ICONS
========================= */

.social-icons{
    display:flex;
    gap:12px;
    margin-top:20px;
    flex-wrap:wrap;
}

.social-icons a{
    width:50px;
    height:50px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:rgba(255,255,255,.08);
    color:#fff;
    text-decoration:none;
    transition:.3s;
}

.social-icons a:hover{
    transform:translateY(-3px);
    background:linear-gradient(
        135deg,
        var(--primary),
        var(--secondary)
    );
}
/* =========================
DOI DIRECTORY
========================= */

.doi-number{
    color:#38bdf8;
    font-size:15px;
    font-weight:600;
    word-break:break-all;
    margin-bottom:15px;
}

.doi-title{
    min-height:70px;
    line-height:1.5;
    margin-bottom:15px;
    color:#ffffff;
}

/* =========================
DOI DIRECTORY HERO
========================= */

.hero{
    padding-top:180px;
    padding-bottom:120px;
}

.hero h1{
    font-size:72px;
    font-weight:700;
    line-height:1.1;
    margin-bottom:25px;
}

.hero h1 span{
    background:linear-gradient(
        135deg,
        #38bdf8,
        #818cf8
    );
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
}

.hero p{
    color:#94a3b8;
    font-size:20px;
    line-height:1.8;
    margin-bottom:35px;
}

.hero-buttons{
    display:flex;
    gap:15px;
    flex-wrap:wrap;
}

.btn-glass{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:14px 28px;
    border-radius:14px;
    border:1px solid rgba(255,255,255,.12);
    color:#ffffff;
    text-decoration:none;
    background:rgba(255,255,255,.03);
    backdrop-filter:blur(20px);
    transition:.3s;
}

.btn-glass:hover{
    color:#ffffff;
    transform:translateY(-3px);
}

.hero-card{
    margin-top:20px;
}

.doi-box{
    text-align:center;
    padding:40px;
}

.doi-box h4{
    font-size:32px;
    font-weight:700;
    margin-top:20px;
}

.doi-box p{
    color:#94a3b8;
    margin-bottom:0;
}

/* ==================================================
   DOIGLOBAL MOBILE RESPONSIVE CSS
================================================== */

@media (max-width:992px){

    /* NAVBAR */

    .navbar{
        padding:14px 0;
        min-height:auto;
    }

    .navbar-brand{
        font-size:26px;
    }

    .navbar-toggler{
        border:1px solid rgba(255,255,255,.15);
        padding:8px 12px;
    }

    .navbar-collapse{
        background:#071225;
        margin-top:15px;
        padding:20px;
        border-radius:20px;
        border:1px solid rgba(255,255,255,.06);
    }

    .navbar-nav{
        flex-direction:column !important;
        width:100%;
        text-align:center;
        gap:0;
        padding-top:10px;
    }

    .navbar-nav .nav-item{
        width:100%;
    }

    .nav-link{
        margin-left:0 !important;
        padding:14px 0;
        display:block;
        font-size:16px;
    }

    .join-btn{
        width:100%;
        margin-top:15px;
        justify-content:center;
    }

    /* PAGE LAYOUT */

    .page-container{
        padding:130px 15px 70px;
    }

    .page-header{
        margin-bottom:40px;
    }

    .page-header h1{
        font-size:42px;
        line-height:1.2;
    }

    .page-header p{
        font-size:16px;
        line-height:1.8;
    }

    /* CARDS */

    .page-card,
    .service-card,
    .pricing-card,
    .doi-card,
    .footer-box{
        padding:25px;
        border-radius:25px;
    }

    /* SERVICE ICONS */

    .service-icon{
        width:70px;
        height:70px;
        font-size:28px;
    }

    /* DOI DIRECTORY */

    .doi-title{
        font-size:22px;
    }

    .doi-actions{
        flex-direction:column;
    }

    .doi-actions a{
        width:100%;
    }

    /* TABLES */

    .table{
        font-size:14px;
    }

    .table th,
    .table td{
        padding:12px;
    }

    /* FORMS */

    .form-control,
    .form-select{
        min-height:56px;
        font-size:15px;
    }

    /* BUTTONS */

    .btn-main,
    .btn-glass{
        width:100%;
        justify-content:center;
    }

    /* FOOTER */

    .footer-box{
        text-align:center;
    }

    .social-icons{
        justify-content:center;
    }

    .footer-links a{
        margin-bottom:14px;
    }

}

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

@media (max-width:768px){

    .navbar-brand{
        font-size:24px;
    }

    .page-header h1{
        font-size:34px;
    }

    .page-header p{
        font-size:15px;
    }

    .service-card,
    .page-card,
    .pricing-card,
    .doi-card{
        padding:22px;
    }

    .footer-box{
        padding:25px 20px;
    }

    .table{
        font-size:13px;
    }

}
@media(max-width:992px){

    .hero{
        padding-top:140px;
        padding-bottom:80px;
        text-align:center;
    }

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

    .hero-buttons{
        justify-content:center;
    }

    .hero-card{
        margin-top:50px;
    }

}
@media(max-width:992px){

    .doi-title{
        font-size:34px;
    }

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

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

}
/* ==================================================
   SMALL MOBILE
================================================== */

@media (max-width:576px){

    .navbar-brand{
        font-size:22px;
    }

    .page-container{
        padding:120px 12px 60px;
    }

    .page-header h1{
        font-size:30px;
    }

    .page-header p{
        font-size:14px;
    }

    .service-icon{
        width:60px;
        height:60px;
        font-size:24px;
    }

    .doi-title{
        font-size:20px;
    }

    .footer-box{
        padding:20px 15px;
    }

    .table th,
    .table td{
        padding:10px;
        font-size:12px;
    }

}

/* ==================================================
   LARGE DESKTOP
================================================== */

@media (min-width:1400px){

    .page-container{
        max-width:1400px;
    }

}
/* ==========================================
   DOIGLOBAL MOBILE THEME
========================================== */

@media (max-width:992px){

    /* NAVBAR */

    .navbar{
        background:rgba(2,8,23,.95) !important;
        backdrop-filter:blur(20px);
        border-bottom:1px solid rgba(255,255,255,.06);
    }

    .navbar-collapse{
        background:rgba(7,18,37,.98) !important;
        border:1px solid rgba(255,255,255,.08);
        border-radius:20px;
        padding:20px;
        margin-top:15px;
        box-shadow:0 20px 50px rgba(0,0,0,.35);
    }

    .navbar-nav{
        flex-direction:column !important;
        width:100%;
        text-align:center;
    }

    .nav-link{
        color:#ffffff !important;
        font-size:16px;
        padding:14px 0;
        border-bottom:1px solid rgba(255,255,255,.04);
    }

    .nav-link:hover,
    .nav-link.active{
        color:#38bdf8 !important;
    }

    .nav-item:last-child .nav-link{
        border-bottom:none;
    }

    /* PUBLISHER LOGIN BUTTON */

    .join-btn{
        width:100%;
        margin-top:15px;
        background:linear-gradient(
            135deg,
            #2563ff,
            #00c6ff
        ) !important;

        color:#fff !important;

        border-radius:14px;
        text-align:center;
    }

    /* CARDS */

    .page-card,
    .service-card,
    .pricing-card,
    .doi-card,
    .footer-box{

        background:rgba(255,255,255,.04) !important;

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

        backdrop-filter:blur(20px);

    }

    /* FOOTER */

    footer{
        background:transparent;
    }

    .footer-box{
        padding:30px 20px;
        text-align:center;
    }

    .footer-links a{
        color:#94a3b8;
    }

    .footer-links a:hover{
        color:#ffffff;
    }

    .social-icons{
        justify-content:center;
        gap:12px;
    }

    .social-icons a{
        background:rgba(255,255,255,.06);
        color:#ffffff;
    }

}
@media (max-width:992px){

    .navbar{
        background:rgba(2,8,23,.95) !important;
        backdrop-filter:blur(20px);
    }

    .navbar-brand{
        font-size:24px;
    }

    .navbar-collapse{
        background:#071225;
        border:1px solid rgba(255,255,255,.08);
        border-radius:20px;
        padding:20px;
        margin-top:15px;
    }

    .navbar-nav{
        flex-direction:column !important;
        width:100%;
        text-align:center;
        gap:0;
    }

    .navbar-nav .nav-item{
        width:100%;
    }

    .nav-link{
        display:block;
        width:100%;
        padding:14px 0;
        margin-left:0 !important;
        color:#fff !important;
    }

    .join-btn{
        width:100%;
        margin-top:15px;
    }

    .navbar-toggler{
        border:1px solid rgba(255,255,255,.15);
    }

    .navbar-toggler-icon{
        filter:invert(1);
    }
}
/* ==========================================
FINAL MOBILE NAVIGATION
========================================== */

@media (max-width:992px){

.navbar{
    background:rgba(2,8,23,.97) !important;
    backdrop-filter:blur(20px);
    padding:14px 0;
}

.navbar-brand{
    font-size:24px;
}

.navbar-toggler{
    border:1px solid rgba(255,255,255,.15);
    padding:8px 12px;
}

.navbar-toggler-icon{
    filter:invert(1);
}

.navbar-collapse{
    background:#071225;
    margin-top:15px;
    border-radius:20px;
    padding:20px;
    border:1px solid rgba(255,255,255,.08);
    box-shadow:0 20px 50px rgba(0,0,0,.35);
}

.navbar-nav{
    flex-direction:column !important;
    width:100%;
    text-align:center;
    gap:0 !important;
}

.navbar-nav .nav-item{
    width:100%;
}

.nav-link{
    width:100%;
    display:block;
    margin-left:0 !important;
    padding:14px 0 !important;
    font-size:16px;
    border-bottom:1px solid rgba(255,255,255,.04);
}

.join-btn{
    width:100%;
    margin-top:15px;
    justify-content:center;
}

body{
    overflow-x:hidden;
}

}
.metadata-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:20px;
margin-bottom:30px;
}

.meta-card{
background:rgba(255,255,255,.04);
border:1px solid rgba(255,255,255,.06);
padding:25px;
border-radius:20px;
}

.section-card{
background:rgba(255,255,255,.04);
border:1px solid rgba(255,255,255,.06);
padding:30px;
border-radius:25px;
margin-bottom:25px;
}

.tools-grid{
display:flex;
flex-wrap:wrap;
gap:12px;
}

.stats-grid{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:20px;
}

.stat-box{
background:rgba(255,255,255,.04);
border:1px solid rgba(255,255,255,.06);
padding:25px;
border-radius:20px;
text-align:center;
}

.keyword{
display:inline-block;
padding:8px 15px;
margin:5px;
background:rgba(37,99,255,.12);
border-radius:30px;
color:#38bdf8;
}

@media(max-width:992px){

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

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

}