/* ===================================
   PercentagePro V2
   Premium Style Sheet
=================================== */


/* Google Font */

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



/* Reset */

*{

    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:'Poppins',sans-serif;

}



html{

    scroll-behavior:smooth;

}



body{

    background:#f8fbff;
    color:#0f172a;
    overflow-x:hidden;

}



:root{

    --primary:#2563eb;
    --secondary:#06b6d4;
    --accent:#8b5cf6;

    --dark:#0f172a;

    --white:#ffffff;

    --light:#f8fbff;

    --text:#475569;

    --shadow:
    0 20px 50px rgba(15,23,42,.08);

}



/* Container */

.navbar,
.hero,
.calculator-section,
.stats-container,
.features,
.faq,
.newsletter,
.footer-container{

    width:90%;
    max-width:1200px;
    margin:auto;

}



/* Links */

a{

    text-decoration:none;

}



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


header{

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

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

    backdrop-filter:blur(15px);

    border-bottom:1px solid #e2e8f0;

}



.navbar{

    height:80px;

    display:flex;

    justify-content:space-between;

    align-items:center;

}



.logo{

    font-size:28px;

    font-weight:800;

    color:var(--primary);

}



.logo span{

    color:var(--secondary);

}



.nav-links{

    display:flex;

    align-items:center;

    gap:30px;

}



.nav-links a{

    color:var(--dark);

    font-weight:500;

    transition:.3s;

}



.nav-links a:hover{

    color:var(--primary);

}



#themeBtn{

    width:45px;

    height:45px;

    border-radius:50%;

    border:none;

    background:var(--primary);

    color:white;

    cursor:pointer;

    font-size:18px;

}



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


.hero{

    min-height:calc(100vh - 80px);

    display:grid;

    grid-template-columns:1fr 1fr;

    align-items:center;

    gap:50px;

}



.badge{

    display:inline-block;

    padding:8px 18px;

    background:#dbeafe;

    color:var(--primary);

    border-radius:50px;

    font-weight:600;

    margin-bottom:20px;

}



.hero h1{

    font-size:60px;

    line-height:1.15;

    font-weight:800;

}



.hero h1 span{

    background:linear-gradient(
        135deg,
        var(--primary),
        var(--secondary)
    );

    -webkit-background-clip:text;

    color:transparent;

}



.hero p{

    margin:25px 0;

    color:var(--text);

    font-size:18px;

    line-height:1.8;

}



.hero-buttons{

    display:flex;

    gap:20px;

}



.primary-btn,
.secondary-btn{

    padding:15px 35px;

    border-radius:50px;

    font-weight:600;

    transition:.3s;

}



.primary-btn{

    background:linear-gradient(
        135deg,
        var(--primary),
        var(--secondary)
    );

    color:white;

}



.secondary-btn{

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

    color:var(--primary);

}



.primary-btn:hover,
.secondary-btn:hover{

    transform:translateY(-5px);

}



/* Calculator Icon */


.calculator-icon{

    width:350px;

    height:350px;

    margin:auto;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:
    linear-gradient(
        135deg,
        #2563eb,
        #06b6d4
    );

    box-shadow:
    0 30px 60px rgba(37,99,235,.3);

    animation:float 4s infinite ease-in-out;

}



.calculator-icon i{

    font-size:150px;

    color:white;

}



@keyframes float{

    50%{

        transform:translateY(-20px);

    }

}


/* ===================================
      CALCULATOR SECTION
=================================== */


.calculator-section{

    padding:100px 0;

}



.section-title{

    text-align:center;

    margin-bottom:50px;

}



.section-title span{

    color:var(--primary);

    font-weight:600;

}



.section-title h2{

    font-size:42px;

    margin:10px 0;

}



.section-title p{

    color:var(--text);

}





/* Calculator Card */


.calculator-card{

    max-width:700px;

    margin:auto;

    padding:40px;

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

    backdrop-filter:blur(20px);

    border-radius:30px;

    box-shadow:var(--shadow);

    border:1px solid #e2e8f0;

}





.input-box{

    display:flex;

    align-items:center;

    gap:15px;

    flex-wrap:wrap;

}



.input-box label{

    font-size:18px;

    font-weight:600;

}





.input-box input{

    flex:1;

    min-width:200px;

    padding:18px;

    border-radius:15px;

    border:2px solid #e2e8f0;

    outline:none;

    font-size:16px;

    transition:.3s;

}





.input-box input:focus{

    border-color:var(--primary);

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

}





/* Calculator Buttons */


.calc-buttons{

    display:flex;

    gap:20px;

    margin-top:30px;

}



.calc-buttons button{

    flex:1;

    padding:16px;

    border:none;

    border-radius:15px;

    font-size:16px;

    font-weight:600;

    cursor:pointer;

    transition:.3s;

}





#calculateBtn{

    background:linear-gradient(
        135deg,
        var(--primary),
        var(--secondary)
    );

    color:white;

}





#clearBtn{

    background:#e2e8f0;

    color:var(--dark);

}





.calc-buttons button:hover{

    transform:translateY(-4px);

}





/* ===============================
        RESULT BOX
================================ */


.result-box{

    margin-top:40px;

    text-align:center;

    padding:30px;

    background:#f1f8ff;

    border-radius:25px;

}





.result-box h3{

    color:var(--text);

    margin-bottom:15px;

}





#result{

    font-size:55px;

    font-weight:800;

    color:var(--primary);

}





/* Result Buttons */


.result-actions{

    display:flex;

    justify-content:center;

    gap:15px;

    margin-top:25px;

}





.result-actions button{

    padding:13px 25px;

    border:none;

    border-radius:50px;

    color:white;

    font-weight:600;

    cursor:pointer;

    transition:.3s;

}





#copyBtn{

    background:#2563eb;

}





#shareBtn{

    background:#22c55e;

}





.result-actions button:hover{

    transform:translateY(-5px);

    box-shadow:0 10px 25px rgba(0,0,0,.15);

}





/* ===============================
        STATS SECTION
================================ */


.stats{

    padding:80px 0;

    background:
    linear-gradient(
        135deg,
        #2563eb,
        #06b6d4
    );

}



.stats-container{

    display:grid;

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

    gap:25px;

}





.stat-card{

    text-align:center;

    color:white;

    padding:35px;

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

    backdrop-filter:blur(15px);

    border-radius:25px;

}





.stat-card h2{

    font-size:45px;

}





.stat-card p{

    margin-top:10px;

    color:#e0f2fe;

}

/* ===================================
        FEATURES SECTION
=================================== */


.features{

    padding:100px 0;

}



.feature-grid{

    display:grid;

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

    gap:25px;

}





.feature-card{

    background:white;

    padding:35px 25px;

    text-align:center;

    border-radius:25px;

    box-shadow:var(--shadow);

    transition:.35s;

    border:1px solid #e2e8f0;

}





.feature-card:hover{

    transform:translateY(-10px);

}





.feature-card i{

    font-size:45px;

    color:var(--primary);

    margin-bottom:20px;

}





.feature-card h3{

    margin-bottom:15px;

    font-size:22px;

}





.feature-card p{

    color:var(--text);

    line-height:1.7;

}





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


.faq{

    padding:100px 0;

    background:#f8fbff;

}





.faq-container{

    max-width:900px;

    margin:auto;

}





.faq-item{

    background:white;

    padding:25px;

    margin-bottom:20px;

    border-radius:20px;

    box-shadow:var(--shadow);

    transition:.3s;

}





.faq-item:hover{

    transform:translateX(8px);

}





.faq-item h3{

    color:var(--primary);

    margin-bottom:12px;

}





.faq-item p{

    color:var(--text);

    line-height:1.8;

}





/* ===================================
        NEWSLETTER
=================================== */


.newsletter{

    padding:100px 0;

}





.newsletter-box{

    background:

    linear-gradient(
        135deg,
        #2563eb,
        #06b6d4
    );

    color:white;

    padding:60px;

    border-radius:35px;

    text-align:center;

}





.newsletter-box h2{

    font-size:38px;

    margin-bottom:15px;

}





.newsletter-box p{

    margin-bottom:30px;

    color:#e0f2fe;

}





.newsletter-form{

    display:flex;

    justify-content:center;

    gap:15px;

    flex-wrap:wrap;

}





.newsletter-form input{

    width:350px;

    max-width:100%;

    padding:17px 25px;

    border:none;

    border-radius:50px;

    outline:none;

    font-size:16px;

}





.newsletter-form button{

    padding:17px 35px;

    border:none;

    border-radius:50px;

    background:white;

    color:var(--primary);

    font-weight:700;

    cursor:pointer;

}





.newsletter-form button:hover{

    transform:translateY(-3px);

}

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


footer{

    background:#0f172a;

    color:white;

    padding-top:70px;

}



.footer-container{

    display:grid;

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

    gap:40px;

    padding-bottom:50px;

}





.footer-brand h2{

    font-size:30px;

    margin-bottom:15px;

}



.footer-brand span{

    color:#06b6d4;

}



.footer-brand p{

    color:#cbd5e1;

    line-height:1.8;

}





.footer-links h3{

    margin-bottom:20px;

}





.footer-links a{

    display:block;

    color:#cbd5e1;

    margin-bottom:12px;

    transition:.3s;

}





.footer-links a:hover{

    color:white;

    transform:translateX(5px);

}





.social{

    display:flex;

    gap:15px;

}





.social a{

    width:45px;

    height:45px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#1e293b;

    color:white;

    transition:.3s;

}





.social a:hover{

    background:var(--primary);

    transform:translateY(-5px);

}





.copyright{

    text-align:center;

    padding:25px;

    border-top:1px solid #1e293b;

    color:#94a3b8;

}





/* ===================================
        DARK MODE
=================================== */


body.dark{

    background:#020617;

    color:white;

}



body.dark header{

    background:rgba(2,6,23,.85);

}



body.dark .nav-links a{

    color:white;

}



body.dark .calculator-card,

body.dark .feature-card,

body.dark .faq-item{

    background:#1e293b;

    border-color:#334155;

}



body.dark .section-title h2,

body.dark .feature-card h3,

body.dark .faq-item h3{

    color:white;

}



body.dark .feature-card p,

body.dark .faq-item p{

    color:#cbd5e1;

}



body.dark .result-box{

    background:#172554;

}



body.dark input{

    background:#0f172a;

    color:white;

    border-color:#334155;

}





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


@media(max-width:1000px){


.hero{

    grid-template-columns:1fr;

    text-align:center;

}



.hero-buttons{

    justify-content:center;

}



.feature-grid{

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

}



.stats-container{

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

}


.footer-container{

    grid-template-columns:1fr 1fr;

}



}





@media(max-width:650px){



.navbar{

    height:auto;

    padding:20px 0;

    flex-direction:column;

    gap:20px;

}



.nav-links{

    flex-wrap:wrap;

    justify-content:center;

}



.hero h1{

    font-size:38px;

}



.calculator-icon{

    width:250px;

    height:250px;

}



.calculator-icon i{

    font-size:100px;

}



.input-box{

    flex-direction:column;

}



.input-box input{

    width:100%;

}



.calc-buttons{

    flex-direction:column;

}



#result{

    font-size:40px;

}



.feature-grid,

.stats-container,

.footer-container{

    grid-template-columns:1fr;

}



.newsletter-box{

    padding:35px 20px;

}



.newsletter-box h2{

    font-size:28px;

}


}

.history-section{

    padding:80px 0;

}


.history-box{

    max-width:700px;

    margin:auto;

    background:white;

    padding:30px;

    border-radius:25px;

    box-shadow:var(--shadow);

}


#historyList{

    list-style:none;

}


#historyList li{

    padding:15px;

    margin-bottom:12px;

    background:#f1f5f9;

    border-radius:12px;

}


#clearHistoryBtn{

    margin-top:20px;

    padding:12px 25px;

    border:none;

    border-radius:50px;

    background:#ef4444;

    color:white;

    cursor:pointer;

}

.tools-section{

    padding:100px 0;

}


.search-box{

    text-align:center;

    margin-bottom:40px;

}


#searchInput{

    width:400px;

    max-width:90%;

    padding:18px 25px;

    border-radius:50px;

    border:2px solid #e2e8f0;

    outline:none;

    font-size:16px;

}



.calculator-grid{

    display:grid;

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

    gap:25px;

}



.tool-card{

    background:white;

    padding:35px;

    text-align:center;

    border-radius:25px;

    box-shadow:var(--shadow);

    transition:.3s;

}



.tool-card:hover{

    transform:translateY(-10px);

}



.tool-card i{

    font-size:45px;

    color:var(--primary);

}



.tool-card h3{

    margin:20px 0 10px;

}



.tool-card p{

    color:var(--text);

}



.tool-card a{

    display:inline-block;

    margin-top:20px;

    padding:10px 25px;

    border-radius:50px;

    background:var(--primary);

    color:white;

}

select{

    flex:1;

    min-width:200px;

    padding:18px;

    border-radius:15px;

    border:2px solid #e2e8f0;

    font-size:16px;

}


.result-box p{

    font-size:20px;

    margin:15px;

    color:var(--text);

}


.result-box span{

    font-weight:700;

    color:var(--primary);

}

.result-box p{

    margin:15px 0;

    font-size:20px;

}


.result-box span{

    color:var(--primary);

    font-weight:700;

}

#ageResult{

    font-size:30px;

    font-weight:700;

    color:var(--primary);

}

#bmiResult{

    font-size:55px;

    font-weight:800;

    color:var(--primary);

}


#bmiStatus{

    font-size:20px;

    font-weight:600;

}

#percentageResult{

    font-size:45px;

    font-weight:800;

    color:var(--primary);

}

.result-box p{

    font-size:20px;

    margin:15px 0;

}


.result-box span{

    color:var(--primary);

    font-weight:700;

}

.scientific-card{

    max-width:420px;

    margin:auto;

    background:white;

    padding:30px;

    border-radius:25px;

    box-shadow:var(--shadow);

}



#display{

    width:100%;

    padding:20px;

    font-size:30px;

    margin-bottom:20px;

    border-radius:15px;

    border:2px solid #e2e8f0;

    text-align:right;

}



.scientific-buttons{

    display:grid;

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

    gap:15px;

}



.scientific-buttons button{

    padding:18px;

    border:none;

    border-radius:15px;

    background:#2563eb;

    color:white;

    font-size:18px;

    cursor:pointer;

}



.scientific-buttons button:hover{

    transform:scale(1.05);

}

.result-box span{

    color:var(--primary);

    font-weight:700;

}

footer{

    background:#0f172a;

    color:white;

    padding:50px 8%;

    margin-top:50px;

}



.footer-container{

    display:grid;

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

    gap:30px;

}



.footer-links a{

    display:block;

    color:#cbd5e1;

    margin:10px 0;

}



.footer-links a:hover{

    color:white;

}



.footer-about p{

    color:#cbd5e1;

}



.copyright{

    text-align:center;

    margin-top:30px;

    padding-top:20px;

    border-top:1px solid #334155;

}

@media(max-width:768px){

.footer-container{

    grid-template-columns:1fr;

}


.nav-links{

    flex-direction:column;

}

}