/*
==========================================================
INKRAH WEB DESIGN
BODY MASS INDEX CALCULATOR

STYLE.CSS
VERSION 2.0
==========================================================
*/



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

*{

    margin:0;

    padding:0;

    box-sizing:border-box;

}



html{

    scroll-behavior:smooth;

}



body{

    font-family:

        "Segoe UI",

        Arial,

        Helvetica,

        sans-serif;

    background:#f4f6fb;

    color:#222;

    line-height:1.75;

    font-size:16px;

}



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

h1{

    font-size:42px;

    font-weight:700;

    margin-bottom:25px;

}



h2{

    font-size:34px;

    color:#0B2545;

    margin-bottom:25px;

}



h3{

    font-size:22px;

    color:#173d73;

    margin-top:30px;

    margin-bottom:12px;

}



p{

    margin-bottom:18px;

    text-align:justify;

}



a{

    text-decoration:none;

    transition:.25s;

}



/*
==========================================================
CONTAINER
==========================================================
*/

.container{

    width:min(1120px,92%);

    margin:auto;

}



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

header{

    position:sticky;

    top:0;

    z-index:999;

    background:

    linear-gradient(

        135deg,

        #06162d,

        #0B2545,

        #13315C

    );

    box-shadow:

        0 5px 20px

        rgba(0,0,0,.20);

}



header .container{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:18px 0;

}



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

.logo{

    display:flex;

    align-items:center;

    gap:14px;

    color:white;

}



.logo img{

    width:58px;

    height:58px;

    object-fit:contain;

}



.logo span{

    font-size:26px;

    font-weight:700;

    color:white;

}



/*
==========================================================
NAVIGATION
==========================================================
*/

nav{

    display:flex;

    gap:30px;

}



nav a{

    position:relative;

    color:white;

    font-weight:500;

}



nav a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-8px;

    width:0;

    height:2px;

    background:#d4af37;

    transition:.25s;

}



nav a:hover{

    color:#d4af37;

}



nav a:hover::after{

    width:100%;

}



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

.hero{

    background:

    linear-gradient(

        135deg,

        #0B2545,

        #1E4D8D

    );

    color:white;

    padding:

        70px

        0;

}



.hero h1{

    color:white;

}



.hero p{

    max-width:920px;

    opacity:.96;

    margin-bottom:40px;

}



/*
==========================================================
FORM WRAPPER
==========================================================
*/

form{

    background:white;

    color:#222;

    padding:35px;

    border-radius:14px;

    box-shadow:

        0 8px 25px

        rgba(0,0,0,.12);

}



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

section{

    width:100%;

}



.about,

.faq{

    padding:80px 0;

}



.about{

    background:white;

}



.faq{

    background:#f7f9fc;

}



/*
==========================================================
UTILITY
==========================================================
*/

.text-centre{

    text-align:center;

}



.mt-20{

    margin-top:20px;

}



.mt-30{

    margin-top:30px;

}



.mt-40{

    margin-top:40px;

}



.mb-20{

    margin-bottom:20px;

}



.mb-30{

    margin-bottom:30px;

}



.mb-40{

    margin-bottom:40px;

}



.w-100{

    width:100%;

}

/*
==========================================================
FORM ELEMENTS
==========================================================
*/

label{

    display:block;

    margin-top:20px;

    margin-bottom:8px;

    font-weight:600;

    color:#0B2545;

    letter-spacing:.2px;

}



input,

select,

textarea{

    width:100%;

    padding:14px 16px;

    border:1px solid #cfd8e3;

    border-radius:8px;

    background:white;

    color:#222;

    font-size:16px;

    transition:

        border-color .25s,

        box-shadow .25s,

        background .25s;

}



input:hover,

select:hover,

textarea:hover{

    border-color:#7a9bc5;

}



input:focus,

select:focus,

textarea:focus{

    outline:none;

    border-color:#0B2545;

    box-shadow:

        0 0 0 4px

        rgba(11,37,69,.12);

}



input::placeholder{

    color:#97a6ba;

}



select{

    cursor:pointer;

}



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

button{

    display:inline-flex;

    justify-content:center;

    align-items:center;

    gap:8px;

    margin-top:25px;

    padding:14px 28px;

    border:none;

    border-radius:8px;

    background:#d4af37;

    color:#0B2545;

    font-size:16px;

    font-weight:700;

    cursor:pointer;

    transition:

        transform .2s,

        background .2s,

        box-shadow .2s;

}



button:hover{

    background:#f0c84b;

    transform:translateY(-2px);

    box-shadow:

        0 8px 18px

        rgba(0,0,0,.18);

}



button:active{

    transform:translateY(0);

}



button:disabled{

    cursor:not-allowed;

    opacity:.6;

}



/*
==========================================================
BUTTON GROUP
==========================================================
*/

.mt-30{

    display:flex;

    flex-wrap:wrap;

    gap:15px;

}



.mt-30 button{

    flex:1;

    min-width:180px;

    margin-top:0;

}



/*
==========================================================
ERROR
==========================================================
*/

.error{

    display:none;

    margin-top:25px;

    padding:18px;

    border-radius:8px;

    border-left:5px solid #c92a2a;

    background:#ffe9e9;

    color:#9f1d1d;

}



/*
==========================================================
SUCCESS
==========================================================
*/

.success{

    display:none;

    margin-top:25px;

    padding:18px;

    border-radius:8px;

    border-left:5px solid #2f9e44;

    background:#ecfff0;

    color:#1f6b31;

}



/*
==========================================================
RESULT CARD
==========================================================
*/

.result{

    margin-top:40px;

    background:white;

    border-radius:14px;

    padding:35px;

    box-shadow:

        0 8px 25px

        rgba(0,0,0,.10);

    animation:

        fadeResult .45s ease;

}



.result h2{

    margin-bottom:30px;

}



.result-container{

    display:none;

}



.result-container.show{

    display:block;

}



/*
==========================================================
BMI GAUGE
==========================================================
*/

.bmi-gauge{

    position:relative;

    width:280px;

    height:145px;

    margin:20px auto 45px;

    border-radius:

        280px

        280px

        0

        0;

    overflow:hidden;

    background:

    linear-gradient(

        90deg,

        #2d6cdf,

        #39b54a,

        #e8c547,

        #f28c28,

        #c92a2a

    );

    box-shadow:

        inset 0 -10px 20px

        rgba(255,255,255,.35),

        0 8px 25px

        rgba(0,0,0,.12);

}



.bmi-gauge::after{

    content:"";

    position:absolute;

    left:28px;

    right:28px;

    bottom:-118px;

    height:236px;

    background:white;

    border-radius:50%;

}



#gaugeNeedle{

    position:absolute;

    bottom:0;

    left:50%;

    width:4px;

    height:120px;

    background:#06162d;

    transform-origin:bottom center;

    transform:rotate(-90deg);

    transition:transform .8s ease;

    z-index:10;

}



#gaugeNeedle::after{

    content:"";

    position:absolute;

    left:50%;

    bottom:-10px;

    width:18px;

    height:18px;

    border-radius:50%;

    background:#06162d;

    transform:translateX(-50%);

}



#gaugeValue{

    position:absolute;

    left:0;

    bottom:18px;

    width:100%;

    text-align:center;

    font-size:30px;

    font-weight:700;

    color:#06162d;

    z-index:20;

}



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

@keyframes fadeResult{

    from{

        opacity:0;

        transform:

            translateY(20px);

    }

    to{

        opacity:1;

        transform:

            translateY(0);

    }

}

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

.summary{

    width:100%;

    margin-top:30px;

    border-collapse:collapse;

    background:#ffffff;

    border-radius:10px;

    overflow:hidden;

}

.summary th{

    width:34%;

    padding:16px 18px;

    background:#0B2545;

    color:#ffffff;

    text-align:left;

    font-weight:600;

    vertical-align:top;

    border-bottom:1px solid #d9e1ec;

}

.summary td{

    padding:16px 18px;

    background:#ffffff;

    color:#333333;

    border-bottom:1px solid #e8edf4;

    transition:.25s;

    word-break:break-word;

}

.summary tr:nth-child(even) td{

    background:#f7f9fc;

}

.summary tr:hover td{

    background:#edf5ff;

}

.summary tr:last-child th,

.summary tr:last-child td{

    border-bottom:none;

}



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

.status-normal{

    color:#2f9e44;

    font-weight:700;

}

.status-low{

    color:#1c7ed6;

    font-weight:700;

}

.status-warning{

    color:#f08c00;

    font-weight:700;

}

.status-danger{

    color:#d6336c;

    font-weight:700;

}

.status-critical{

    color:#c92a2a;

    font-weight:700;

}



/*
==========================================================
INFORMATION CARD
==========================================================
*/

.card{

    background:#ffffff;

    border-radius:12px;

    padding:30px;

    margin-top:30px;

    box-shadow:

        0 5px 18px

        rgba(0,0,0,.08);

}

.card h3{

    margin-top:0;

}

.card p:last-child{

    margin-bottom:0;

}



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

.about{

    color:#2d3748;

}

.about h2{

    text-align:center;

    margin-bottom:40px;

}

.about p{

    max-width:980px;

    margin:

        0 auto 20px;

}



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

.faq h2{

    text-align:center;

    margin-bottom:45px;

}

.faq h3{

    padding:15px 20px;

    background:#ffffff;

    border-left:5px solid #d4af37;

    border-radius:8px;

    box-shadow:

        0 3px 10px

        rgba(0,0,0,.05);

}

.faq p{

    padding:

        18px

        22px;

    background:#ffffff;

    border-radius:0 0 8px 8px;

    margin-bottom:24px;

    box-shadow:

        0 4px 12px

        rgba(0,0,0,.05);

}



/*
==========================================================
LINKS
==========================================================
*/

a{

    color:#0B2545;

}

a:hover{

    color:#d4af37;

}



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

footer{

    background:

        linear-gradient(

        135deg,

        #06162d,

        #0B2545

    );

    color:#ffffff;

    padding:

        60px

        0;

    text-align:center;

}

footer p{

    text-align:center;

    margin-bottom:14px;

    opacity:.95;

}

footer a{

    color:#d4af37;

    font-weight:600;

}

footer a:hover{

    color:#ffffff;

}



/*
==========================================================
BACK TO TOP
==========================================================
*/

#backTop{

    position:fixed;

    right:25px;

    bottom:25px;

    width:50px;

    height:50px;

    border:none;

    border-radius:50%;

    background:#0B2545;

    color:#ffffff;

    font-size:22px;

    cursor:pointer;

    display:none;

    z-index:999;

    box-shadow:

        0 6px 18px

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

}

#backTop:hover{

    background:#d4af37;

    color:#0B2545;

}

/*
==========================================================
UTILITY CLASSES
==========================================================
*/

.text-left{

    text-align:left;

}

.text-right{

    text-align:right;

}

.text-center{

    text-align:center;

}

.fw-bold{

    font-weight:700;

}

.fw-normal{

    font-weight:400;

}

.d-none{

    display:none;

}

.d-block{

    display:block;

}

.w-100{

    width:100%;

}

.rounded{

    border-radius:10px;

}

.shadow{

    box-shadow:

        0 6px 20px

        rgba(0,0,0,.12);

}

.bg-white{

    background:#ffffff;

}

.bg-light{

    background:#f7f9fc;

}

.text-primary{

    color:#0B2545;

}

.text-secondary{

    color:#6c757d;

}

.mt-10{

    margin-top:10px;

}

.mt-20{

    margin-top:20px;

}

.mt-30{

    margin-top:30px;

}

.mt-40{

    margin-top:40px;

}

.mt-50{

    margin-top:50px;

}

.mb-10{

    margin-bottom:10px;

}

.mb-20{

    margin-bottom:20px;

}

.mb-30{

    margin-bottom:30px;

}

.mb-40{

    margin-bottom:40px;

}

.mb-50{

    margin-bottom:50px;

}

.pt-20{

    padding-top:20px;

}

.pb-20{

    padding-bottom:20px;

}

.p-20{

    padding:20px;

}



/*
==========================================================
SCROLLBAR
==========================================================
*/

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:#eef2f7;

}

::-webkit-scrollbar-thumb{

    background:#0B2545;

    border-radius:20px;

}

::-webkit-scrollbar-thumb:hover{

    background:#d4af37;

}



/*
==========================================================
SELECTION
==========================================================
*/

::selection{

    background:#0B2545;

    color:#ffffff;

}



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

.table-responsive{

    width:100%;

    overflow-x:auto;

}



/*
==========================================================
TRANSITIONS
==========================================================
*/

button,
input,
select,
a,
.summary td,
.card{

    transition:all .25s ease;

}



/*
==========================================================
TABLET
==========================================================
*/

@media screen and (max-width:992px){

header .container{

    flex-direction:column;

    gap:18px;

}

nav{

    flex-wrap:wrap;

    justify-content:center;

}

.hero{

    padding:55px 0;

}

.hero h1{

    font-size:34px;

}

.hero p{

    font-size:15px;

}

form{

    padding:28px;

}

.summary th{

    width:40%;

}

.bmi-gauge{

    width:240px;

    height:125px;

}

#gaugeNeedle{

    height:102px;

}

#gaugeValue{

    font-size:26px;

}

}



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

@media screen and (max-width:768px){

body{

    font-size:15px;

}

h1{

    font-size:30px;

}

h2{

    font-size:26px;

}

h3{

    font-size:19px;

}

.logo{

    flex-direction:column;

    text-align:center;

}

.logo img{

    width:50px;

    height:50px;

}

.logo span{

    font-size:20px;

}

nav{

    width:100%;

    justify-content:space-around;

    gap:12px;

}

.hero{

    padding:45px 0;

}

form{

    padding:22px;

}

input,

select,

button{

    font-size:15px;

}

.mt-30{

    flex-direction:column;

}

.mt-30 button{

    width:100%;

}

.summary{

    display:block;

    overflow-x:auto;

}

.summary th,

.summary td{

    white-space:nowrap;

}

.bmi-gauge{

    width:200px;

    height:105px;

}

#gaugeNeedle{

    height:86px;

}

#gaugeValue{

    font-size:22px;

}

footer{

    padding:40px 0;

}

#backTop{

    width:44px;

    height:44px;

    right:18px;

    bottom:18px;

}

}



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

@media screen and (max-width:480px){

.container{

    width:95%;

}

h1{

    font-size:26px;

}

h2{

    font-size:23px;

}

.hero{

    padding:35px 0;

}

form{

    padding:18px;

}

button{

    padding:13px 18px;

}

.summary th,

.summary td{

    padding:12px;

    font-size:14px;

}

.bmi-gauge{

    width:180px;

    height:95px;

}

#gaugeNeedle{

    height:78px;

}

#gaugeValue{

    font-size:20px;

}

}



/*
==========================================================
PRINT
==========================================================
*/

@media print{

body{

    background:#ffffff;

    color:#000000;

}

header,

footer,

#backTop,

button{

    display:none !important;

}

.hero{

    background:#ffffff;

    color:#000000;

    padding:0;

}

.hero h1{

    color:#000000;

}

form{

    display:none;

}

.result{

    margin:0;

    padding:0;

    box-shadow:none;

}

.bmi-gauge{

    page-break-inside:avoid;

}

.summary{

    page-break-inside:auto;

}

.summary tr{

    page-break-inside:avoid;

}

.summary th{

    background:#eeeeee !important;

    color:#000000 !important;

}

.summary td{

    background:#ffffff !important;

    color:#000000 !important;

}

a{

    color:#000000;

    text-decoration:none;

}

}



/*
==========================================================
END OF FILE
==========================================================
*/