*{
    box-sizing:border-box;
}


body{

    margin:0;
    padding:0;

    font-family:"Nunito",Arial,sans-serif;

    background:linear-gradient(
        to right,
        #d9f7ff,
        #fef6d8
    );

    color:#243447;

}


.container{

    width:90%;
    max-width:950px;

    margin:30px auto;

    background:white;

    border-radius:22px;

    padding:30px;

    box-shadow:
        0 8px 25px rgba(0,0,0,0.10);

}


/* HOME BUTTON */

.top-nav{

    text-align:center;

    margin-bottom:25px;

}


.home-btn{

    display:inline-block;

    background:#14b8a6;

    color:white;

    text-decoration:none;

    padding:10px 20px;

    border-radius:10px;

    font-weight:800;

}


.home-btn:hover{

    background:#0f766e;

}



/* HEADER */

header{

    text-align:center;

    margin-bottom:30px;

}


header h1{

    color:#0f766e;

    font-size:38px;

    margin:10px 0;

}


header p{

    font-size:19px;

    color:#555;

}



.golden-rule{
    background:#f0fdfa;
    border:2px solid #14b8a6;
    border-radius:16px;
    padding:18px;
    text-align:center;
}

.golden-rule h2{
    color:#0f766e;
    font-size:27px;
    margin:0 0 8px;
}

.main-rule{
    font-size:20px;
    font-weight:800;
    margin:8px 0 14px;
}

.rules{
    display:flex;
    justify-content:center;
    gap:10px;
    flex-wrap:wrap;
}

.rule{
    background:white;
    padding:9px 12px;
    margin:0;
    border-radius:9px;
    font-size:16px;
}

.mistake{
    color:#dc2626;
    border:1px solid #fecaca;
}



/* SECTIONS */

.section{

    margin-top:40px;

}


.section h2{

    text-align:center;

    color:#0f766e;

    font-size:28px;

    margin-bottom:22px;

}



/* DEMONSTRATION */

.demo-card{

    background:#f8fffe;

    border:2px solid #99f6e4;

    border-radius:18px;

    padding:25px;

    margin-bottom:25px;

}


.demo-card h3{

    text-align:center;

    color:#0f766e;

    font-size:23px;

}


.fraction-equation{

    text-align:center;

    font-size:27px;

    font-weight:800;

    margin:25px 0;

}


.fraction{

    display:inline-block;

    vertical-align:middle;

    text-align:center;

    line-height:1;

    margin:0 6px;

}


.fraction .top{

    display:block;

    border-bottom:2px solid #243447;

    padding:3px 9px;

}


.fraction .bottom{

    display:block;

    padding:3px 9px;

}


.answer .top{

    color:#0f766e;

}


.steps{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:12px;

}


.steps > div{

    background:white;

    padding:14px;

    border-radius:10px;

    text-align:center;

}


.final-answer{

    color:#0f766e;

    font-weight:800;

}



/* MORE EXAMPLES */

.examples-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:15px;
}

.example-box{
    background:#fffdf5;
    border:2px solid #fbbf24;
    border-radius:14px;
    padding:16px;
}

.example-box h3{
    color:#0f766e;
    margin:0 0 12px;
    font-size:21px;
}

.example{
    background:white;
    padding:9px 12px;
    border-radius:8px;
    margin:7px 0;
    font-size:17px;
    text-align:center;
}


/* ACTIVITY */

.activity{

    background:#f0fdfa;

    border:3px solid #14b8a6;

    border-radius:20px;

    padding:25px;

    text-align:center;

}


.choice-buttons{

    display:flex;

    justify-content:center;

    gap:15px;

    flex-wrap:wrap;

}


.choice-buttons button{

    border:none;

    background:#ccfbf1;

    color:#0f766e;

    padding:13px 22px;

    border-radius:10px;

    font-size:16px;

    font-weight:800;

    cursor:pointer;

}


.choice-buttons button:hover{

    background:#99f6e4;

}


.question{

    background:white;

    max-width:600px;

    margin:25px auto;

    padding:25px;

    border-radius:15px;

    font-size:30px;

    font-weight:800;

}


.instruction{

    font-weight:700;

}


#answer{

    width:160px;

    padding:12px;

    border:2px solid #14b8a6;

    border-radius:10px;

    font-size:18px;

    text-align:center;

}


.check-btn,
.new-btn{

    border:none;

    padding:12px 20px;

    border-radius:10px;

    margin:10px 5px;

    font-weight:800;

    cursor:pointer;

}


.check-btn{

    background:#14b8a6;

    color:white;

}


.new-btn{

    background:#fbbf24;

    color:#333;

}


#feedback{

    min-height:30px;

    font-weight:800;

    margin:10px;

}


.score{

    color:#0f766e;

    font-weight:800;

    font-size:18px;

}



/* PRACTICE */

.practice-box{

    background:#f8fffe;

    border:2px solid #99f6e4;

    border-radius:15px;

    padding:20px;

}


.practice-question{

    background:white;

    padding:15px;

    border-radius:10px;

    margin:10px 0;

    font-size:19px;

}



/* COMMON MISTAKE */

.mistake-box{

    background:#fff7ed;

    border-left:6px solid #f97316;

    padding:20px;

    border-radius:12px;

    margin-top:35px;

}


.mistake-box h2{

    color:#ea580c;

}



/* QUICK HELP */

.quick-help{

    margin:40px auto;

    max-width:750px;

    padding:22px;

    text-align:center;

    background:#f8fffe;

    border:2px solid #14b8a6;

    border-radius:14px;

}


.quick-help h3{

    color:#0f766e;

}


.quick-help-btn{

    display:inline-block;

    margin-top:10px;

    padding:11px 24px;

    background:#14b8a6;

    color:white;

    text-decoration:none;

    border-radius:10px;

    font-weight:800;

}



/* FOOTER */

footer{

    text-align:center;

    padding:20px;

    color:#555;

}



/* MOBILE */

@media(max-width:700px){

    .container{

        width:94%;

        padding:18px;

    }


    header h1{

        font-size:30px;

    }


    .steps{

        grid-template-columns:1fr;

    }


    .examples-grid{

        grid-template-columns:1fr;

    }


    .fraction-equation{

        font-size:22px;

    }


    .question{

        font-size:24px;

    }


    .golden-rule h2{

        font-size:25px;

    }

}
.fraction{
    display:inline-flex;
    flex-direction:column;
    vertical-align:middle;
    text-align:center;
    line-height:1;
    margin:0 4px;
    min-width:30px;
}

.fraction .top{
    padding:3px 7px;
    border-bottom:2px solid #243447;
}

.fraction .bottom{
    padding:3px 7px;
}
.fraction {
    display: inline-flex;
    flex-direction: column;
    text-align: center;
    vertical-align: middle;
}

.fraction .top {
    border-bottom: 2px solid #243447;
    padding: 2px 7px;
}

.fraction .bottom {
    padding: 2px 7px;
}
.simplifying-title {
    color: #2196F3;
    background: none;
    border: none;
    padding: 0;
    text-decoration: underline;
    display: inline;
    cursor: pointer;
}
.whatsapp-btn {
    background-color: #25D366;
    color: white;
    text-decoration: none;
    padding: 12px 20px;
    border-radius: 8px;
    display: inline-block;
}
.whatsapp-btn:hover {
    background: #1ebe5d;
}