@import url("https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap");
* {
    font-family: "Poppins", sans-serif;
}
 /* * {
    background-color: #fffaf4  ;
   
}  */

/* div, header, footer, main, section, article, aside {
    background-color: inherit;
} */
:root {
    --primary-color: #52F2B8;
    --secondary-color: rgb(65, 132, 237);
    --red: #e40046;
    --purple: #7579e7;
    --green: #00bdaa;
    --dark: #26395d;
}

.home-img i {
    max-width: 50px;
    margin-left: 1200px;
    margin-top: 2px;
    color: #41333c;
    

}

.heading {
    color: var(--secondary-color);
}

.heading span {
    color: var(--dark);
}
.heading span:hover{
    color: #84a77f !important;
}
.header-container-flex {
    display: grid; 
    grid-template-columns: 0% 100%;
}

@media only screen and (max-width: 600px) {
    .header-container-flex {
        grid-template-columns: 100%;
        text-align: center;
    }
}

#prediction {
    text-transform: uppercase;
}

.flex-parent {
    display: flex;
}

.jc-center {
    justify-content: center;
}


/* button .margin-right {
    margin-right: 20px;
} */

.image-icon {
    max-width: 50%;
    margin-left: 25%;
    margin-right: 25%;
}

.adv {
    /* margin: 10px; */
    border-radius: 1rem;
    padding: 0.75rem;
    font-weight: 600;
    margin-top: 10px;
    margin-left: 20px;
    background-color: #d4edda ;
    color: #00bdaa ;
}

.dis-adv {
    /* margin: 10px; */
    padding: 1rem;
    border-radius: 1rem;
    margin-top: 10px;
    margin-left: 20px;
    font-weight: bold;
    background-color: #f8d7da;
    color:#e40046 ;
}

.subheading {
    margin-left: 20px;
}

.table {
    max-width: 50%;
    margin-left: 10%;
}

/* .webcamButton{
    background-color: #070808 !important;
} */

.cautions-and-benefits {
    display: flex;
    width: 100%;
    justify-content: space-between;
}

.section {
    flex: 1;
    margin: 10px;
    padding: 20px; /* Optional: Add padding for better spacing */
    box-sizing: border-box;
}

.cautions {
    background-color: #f8d7da; 
    border-radius: 10px;
}
.benefits {
    background-color: #d4edda ; /* Optional: Add background color for distinction */
    border-radius: 10px;
}
/* 
 #benefitstext{
    background-color:#d4edda !important;
} */

/* .flex-parent {
    display: flex;
    justify-content: center;
}

.jc-center {
    align-items: center;
    text-align: center;
} */
/* Custom CSS to center specific elements */
/* .text-center {
    text-align: center;
} */