.elementor-1994 .elementor-element.elementor-element-b6a499a{--display:flex;--margin-top:-60px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-1994 .elementor-element.elementor-element-cbbd104{--display:flex;--margin-top:-3px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}:root{--page-title-display:none;}/* Start custom CSS for container, class: .elementor-element-b6a499a *//* =========================
   MOBILE RESPONSIVE FIX
   ========================= */

@media (max-width:768px){

    body{
        overflow-x:hidden;
    }

    #cmh-caffeine-calculator{
        width:100%;
        padding:15px;
        box-sizing:border-box;
    }

    /* Form Fields */
    .cmh-grid{
        display:grid;
        grid-template-columns:1fr;
        gap:15px;
    }

    .cmh-field,
    .cmh-inline,
    .cmh-field input,
    .cmh-field select{
        width:100%;
    }

    .cmh-inline{
        display:flex;
        gap:10px;
    }

    .cmh-inline input{
        flex:2;
    }

    .cmh-inline select{
        flex:1;
    }

    /* Buttons */
    .cmh-buttons{
        display:flex;
        flex-direction:column;
        gap:12px;
    }

    .cmh-buttons button{
        width:100%;
    }

    /* ===== YOUR RESULTS (2 UP + 2 DOWN) ===== */

    .cmh-result-grid{
        display:grid !important;
        grid-template-columns:repeat(2,1fr) !important;
        gap:15px !important;
    }

    .cmh-box{
        width:100% !important;
        min-width:0 !important;
        padding:18px 10px;
        text-align:center;
        box-sizing:border-box;
    }

    .cmh-box span{
        display:block;
        font-size:14px;
        margin-bottom:8px;
    }

    .cmh-box strong{
        display:block;
        font-size:24px;
    }

    /* Progress */
    .cmh-progress{
        margin-top:20px;
    }

    .cmh-progress p{
        text-align:center;
    }

    /* Table */
    .cmh-table-card{
        overflow-x:auto;
    }

    .cmh-table-card table{
        min-width:600px;
    }

}

/* Extra Small Phones */

@media (max-width:480px){

    .cmh-result-grid{
        grid-template-columns:repeat(2,1fr) !important;
        gap:10px !important;
    }

    .cmh-box{
        padding:15px 8px;
    }

    .cmh-box span{
        font-size:13px;
    }

    .cmh-box strong{
        font-size:20px;
    }

}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-3673271 *//* =====================================
   CoffeeMasterHub Caffeine Calculator
===================================== */


#cmh-caffeine-calculator{

    max-width:1200px;

    margin:40px auto;

    padding:20px;

    font-family:Arial, sans-serif;

    box-sizing:border-box;

    color:#4B2E1F;

}







/* =====================================
   Header
===================================== */


.cmh-header{

    text-align:center;

    margin-bottom:35px;

}



.cmh-badge{

    display:inline-block;

    background:#F5E6D3;

    color:#6F3D1E;

    padding:7px 16px;

    border-radius:50px;

    font-size:12px;

    font-weight:700;

}



.cmh-header h1{

    font-size:40px;

    margin:15px 0 10px;

    color:#4B2E1F;

}



.cmh-header p{

    max-width:700px;

    margin:auto;

    font-size:15px;

    color:#666;

    line-height:1.7;

}









/* =====================================
   Loader
===================================== */


#cmh-loader{

    position:fixed;

    top:25px;

    left:50%;

    transform:translateX(-50%);

    z-index:9999;

    opacity:0;

    visibility:hidden;

    transition:.3s;

}



#cmh-loader.show{

    opacity:1;

    visibility:visible;

}





.cmh-loader-card{

    background:#fff;

    padding:14px 22px;

    border-radius:18px;

    display:flex;

    align-items:center;

    gap:12px;

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

}





.cmh-loader-icon{

    font-size:28px;

    animation:cmhCup 1s infinite;

}





@keyframes cmhCup{

    50%{

        transform:scale(1.15);

    }

}









/* =====================================
   Two Equal Panels
===================================== */


.cmh-main-layout{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:25px;

    align-items:stretch;

}








/* =====================================
   Panel Design
===================================== */


.cmh-card,

.cmh-right-panel{

    background:#fff;

    padding:30px;

    border-radius:20px;

    box-shadow:0 10px 30px rgba(0,0,0,.08);

    box-sizing:border-box;

}







.cmh-title h2,

.cmh-panel-header h2{

    font-size:22px;

    margin:0 0 8px;

    color:#4B2E1F;

}





.cmh-title p,

.cmh-panel-header p{

    font-size:13px;

    color:#777;

    margin-bottom:22px;

}









/* =====================================
   LEFT SIDE 2 Columns
===================================== */


.cmh-grid{

    display:grid;

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

    gap:18px;

}







.cmh-field label{

    display:block;

    font-size:13px;

    font-weight:700;

    margin-bottom:7px;

    color:#4B2E1F;

}
/* =====================================
   Input & Select Styling
===================================== */


.cmh-field input,

.cmh-field select{


    width:100%;

    padding:12px 14px;

    border:1px solid #ddd;

    border-radius:10px;

    background:#fff;

    color:#4B2E1F;

    font-size:13px;

    box-sizing:border-box;

    transition:.3s;

}



.cmh-field input:focus,

.cmh-field select:focus{


    outline:none;

    border-color:#6F3D1E;

    box-shadow:0 0 0 3px rgba(111,61,30,.12);

}









/* =====================================
   Weight Inline
===================================== */


.cmh-inline{

    display:flex;

    gap:10px;

}



.cmh-inline input{

    flex:1;

}



.cmh-inline select{

    width:80px;

}









/* =====================================
   Buttons
===================================== */


.cmh-buttons{

    display:flex;

    gap:15px;

    margin-top:25px;

}



.cmh-buttons button{


    flex:1;

    padding:13px 18px;

    border:none;

    border-radius:50px;

    font-size:13px;

    font-weight:700;

    cursor:pointer;

    transition:.3s;

}



#calculateBtn{

    background:#6F3D1E;

    color:#fff;

}



#calculateBtn:hover{

    background:#4B2E1F;

    transform:translateY(-2px);

}



#resetBtn{

    background:#eee5dc;

    color:#4B2E1F;

}









/* =====================================
   RIGHT FEATURES 2 x 3
===================================== */


.cmh-result-grid{


    display:grid;


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


    gap:15px;


}







.cmh-result-box{


    background:#faf7f2;


    border:1px solid #f0e4d7;


    padding:18px 12px;


    border-radius:15px;


    text-align:center;


    transition:.3s;


}





.cmh-result-box:hover{


    transform:translateY(-3px);


    box-shadow:0 8px 20px rgba(0,0,0,.08);


}





.cmh-result-box span{


    display:block;


    font-size:11px;


    color:#777;


    margin-bottom:8px;


}





.cmh-result-box strong{


    font-size:19px;


    color:#6F3D1E;


}
/* =====================================
   Progress Section
===================================== */


.cmh-progress{

    margin-top:25px;

}



.cmh-progress-title{

    font-size:13px;

    font-weight:700;

    margin-bottom:10px;

    color:#4B2E1F;

}





.cmh-progress-bar{

    width:100%;

    height:16px;

    background:#eee;

    border-radius:50px;

    overflow:hidden;

}





.cmh-progress-fill{

    width:0%;

    height:100%;

    background:linear-gradient(
        90deg,
        #16A34A,
        #F59E0B,
        #DC2626
    );

    border-radius:50px;

    transition:1s ease;

}





#progressText{

    text-align:center;

    font-size:12px;

    font-weight:700;

    margin-top:10px;

}









/* =====================================
   Recommendation Box
===================================== */


.cmh-recommendation{

    margin-top:20px;

    padding:16px;

    background:#FFF8E6;

    border-left:4px solid #6F3D1E;

    border-radius:12px;

    font-size:13px;

    color:#555;

    line-height:1.6;

}









/* =====================================
   Mobile Responsive
===================================== */


@media(max-width:991px){


    .cmh-main-layout{

        grid-template-columns:1fr;

    }


}







@media(max-width:768px){



    #cmh-caffeine-calculator{

        padding:15px;

        margin:20px auto;

    }





    .cmh-header h1{

        font-size:30px;

    }





    .cmh-header p{

        font-size:14px;

    }





    .cmh-card,

    .cmh-right-panel{


        padding:20px;


    }






    .cmh-grid{


        grid-template-columns:1fr;


        gap:15px;


    }





    .cmh-result-grid{


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


        gap:12px;


    }





    .cmh-result-box{


        padding:15px 8px;


    }





    .cmh-result-box strong{


        font-size:17px;


    }





    .cmh-buttons{


        flex-direction:column;


    }





    .cmh-buttons button{


        width:100%;


    }





}







@media(max-width:480px){



    .cmh-result-grid{


        grid-template-columns:1fr 1fr;


    }





    .cmh-result-box span{


        font-size:10px;


    }





    .cmh-result-box strong{


        font-size:15px;


    }



}
/* =====================================
   Below Tool Content
===================================== */


.cmh-table-card,

.cmh-faq,

.cmh-disclaimer,

.cmh-content{

    max-width:1200px;

    margin:40px auto;

    background:#fff;

    padding:35px;

    border-radius:20px;

    box-shadow:0 10px 30px rgba(0,0,0,.08);

}








/* =====================================
   Table Section
===================================== */


.cmh-table-card h2,

.cmh-faq h2,

.cmh-content h2{

    color:#4B2E1F;

    font-size:28px;

    margin-bottom:25px;

}






.cmh-table-card{

    overflow-x:auto;

}




.cmh-table-card table{

    width:100%;

    border-collapse:collapse;

}




.cmh-table-card th{

    background:#6F3D1E;

    color:#fff;

    padding:15px;

    text-align:left;

    font-size:14px;

}




.cmh-table-card td{

    padding:15px;

    border-bottom:1px solid #eee;

    color:#555;

    font-size:14px;

}





.cmh-table-card tr:hover{

    background:#faf5ef;

}








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


.faq-item{

    background:#faf7f2;

    padding:22px;

    border-radius:15px;

    margin-bottom:18px;

}



.faq-item h3{

    margin:0 0 10px;

    color:#4B2E1F;

    font-size:18px;

}



.faq-item p{

    margin:0;

    color:#666;

    font-size:15px;

    line-height:1.8;

}
/* =====================================
   Disclaimer
===================================== */


.cmh-disclaimer{


    background:#FFF3F3;

    border-left:5px solid #DC2626;

    color:#555;

    line-height:1.8;

    font-size:15px;


}



.cmh-disclaimer strong{


    color:#B91C1C;


}








/* =====================================
   SEO Content
===================================== */


.cmh-content{


    line-height:1.8;

}



.cmh-content h2{


    color:#4B2E1F;

    font-size:27px;

    margin-top:40px;

    margin-bottom:15px;


}



.cmh-content h2:first-child{


    margin-top:0;


}






.cmh-content p{


    color:#555;

    font-size:16px;

    margin-bottom:18px;


}








/* =====================================
   Lists
===================================== */


.cmh-content ul,

.cmh-content ol{


    padding-left:25px;

    color:#555;


}



.cmh-content li{


    margin-bottom:10px;

    line-height:1.7;


}








/* =====================================
   Links
===================================== */


.cmh-content a{


    color:#6F3D1E;

    font-weight:600;

    text-decoration:none;

}



.cmh-content a:hover{


    text-decoration:underline;


}








/* =====================================
   Smooth Reading
===================================== */


.cmh-content,

.cmh-faq,

.cmh-table-card{


    scroll-margin-top:80px;


}
/* =====================================
   Tablet Responsive
===================================== */


@media(max-width:991px){



    .cmh-table-card,

    .cmh-faq,

    .cmh-disclaimer,

    .cmh-content{


        margin:30px 15px;

        padding:25px;


    }





    .cmh-content h2,

    .cmh-table-card h2,

    .cmh-faq h2{


        font-size:24px;


    }


}









/* =====================================
   Mobile Responsive
===================================== */


@media(max-width:768px){



    .cmh-table-card,

    .cmh-faq,

    .cmh-disclaimer,

    .cmh-content{


        padding:20px;

        border-radius:15px;

        margin:25px 10px;


    }






    .cmh-content h2,

    .cmh-table-card h2,

    .cmh-faq h2{


        font-size:21px;

        line-height:1.4;


    }






    .cmh-content p{


        font-size:15px;

        line-height:1.7;


    }







    .faq-item{


        padding:16px;

        margin-bottom:14px;


    }







    .faq-item h3{


        font-size:16px;


    }







    .faq-item p{


        font-size:14px;


    }







    .cmh-table-card{


        overflow-x:auto;


    }







    .cmh-table-card table{


        min-width:600px;


    }







    .cmh-table-card th,

    .cmh-table-card td{


        padding:12px;

        font-size:13px;


    }





}









/* =====================================
   Small Mobile
===================================== */


@media(max-width:480px){



    .cmh-content,

    .cmh-faq,

    .cmh-table-card,

    .cmh-disclaimer{


        margin:20px 5px;


    }






    .cmh-content ul,

    .cmh-content ol{


        padding-left:20px;


    }



}/* End custom CSS */