@import url('https://fonts.googleapis.com/css2?family=Nunito&display=swap');
*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:'Nunito',sans-serif;
}
.Smoll_section{
    display:flex;
    justify-content:center;
    margin-top:15vh;
}
.section_one{
    margin-top:14vh;
    display:flex;
    justify-content:start;
    padding:40px 0;
    background:#fff;
}
.section_two{
    display:flex;
    justify-content:flex-end;
    margin-top:12vh;
    padding:0 20px;
    box-sizing:border-box;
}
.product-grid{
    display:grid;
    gap:40px;
    width:100%;
    max-width:1400px;
    margin:auto;
}
.product-card{
    background:#ffffff;
    padding:30px;
    border-radius:16px;
}
.product-card h2{
    text-align:center;
    margin-bottom:25px;
    font-size:24px;
}
.section_two{
    display:flex;
    justify-content:flex-end;
    margin-top:12vh;
    padding:0 20px;
    box-sizing:border-box;
}
.card_right{
    width:80%;
    min-height:60vh;
    background:linear-gradient(258deg,#000000 0%,#0c29d9 87%);
    border-radius:36px 34px 8px 58px;
    outline:3px solid black;
    padding:20px;
    box-sizing:border-box;
    box-shadow:-1px 2px 15px 3px rgba(23,23,24,0.801);
}
.card_right_mini{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:20px;
}
.card_image{
    flex:1;
    text-align:center;
}
.card_image img{
    max-width:100%;
    height:auto;
    max-height:280px;
}
.card_content{
    flex:1.2;
}
.card_heding{
    text-align:center;
    color:#ffffff;
}
.product-table{
    width:100%;
    border-collapse:collapse;
    background:#fff;
    border-radius:12px;
    overflow:hidden;
}
.product-table th,
.product-table td{
    border:1px solid #ddd;
    padding:14px;
    font-size:15px;
}
.product-table th{
    background:#f5f5f5;
    text-align:left;
    font-weight:600;
}
.btn-group{
    display:flex;
    gap:14px;
    margin-top:25px;
    width:100%;
    box-sizing:border-box;
}
.btn-group button{
    flex:1;
    padding:14px;
    background:linear-gradient(164deg,#061c71 0%,#081361 87%);
    color:#fff;
    outline:1px solid #fff;
    border:none;
    border-radius:10px;
    cursor:pointer;
    font-size:16px;
    transition:all .3s ease;
}
.btn-group button:hover{
    background:linear-gradient(258deg,#252525 0%,#06188d 87%);
    outline:1px solid black;
    transform:translateY(-2px);
}
@media(max-width:840px){
    .section_two{
        justify-content:center;
        margin-top:40px;
    }
    .card_right{
        width:100%;
        min-height:auto;
        border-radius:20px;
    }
    .card_right_mini{
        flex-direction:column;
    }
    .btn-group{
        flex-direction:column;
    }
}
.btn-group button:hover{
    background:linear-gradient(258deg,#252525 0%,#06188d 87%);
    outline:1px solid black;
    transform:translateY(-2px);
}
.popup{
    display:none;
    position:fixed;
    inset:0;
    background:rgba(0,0,0,0.65);
    align-items:center;
    justify-content:center;
    z-index:1000;
}
.popup-content{
    background:#ffffff;
    padding:30px;
    width:95%;
    max-width:900px;
    border-radius:14px;
    position:relative;
    animation:popupFade 0.3s ease;
}
.close-btn{
    position:absolute;
    top:10px;
    right:16px;
    font-size:26px;
    cursor:pointer;
}
@media(max-width:768px){
    .product-flex{
        flex-direction:column;
    }
    .product-card.reverse .product-flex{
        display:grid;
    }
    .product-image img{
        height:auto;
    }
    .btn-group{
        flex-direction:column;
    }
}
@keyframes popupFade{
    from{
        transform:scale(0.85);
        opacity:0;
    }
    to{
        transform:scale(1);
        opacity:1;
    }
}
.section_two{
    display:flex;
    justify-content:right;
    padding:40px 0;
    background:#fff;
}
.cards_container{
    width:90%;
    display:flex;
    gap:25px;
}
.card{
    margin:9px;
    background:linear-gradient(335deg,#000000 -16%,#0c29d9 97%);
    width:40vh;
    border-radius:12px;
    overflow:hidden;
    text-align:center;
    padding-bottom:20px;
    transition:0.3s;
    perspective:1000px;
    width:81vh;
}
.card img{
    width:100%;
    height:300px;
    transition:0.7s;
}
.card:hover img{
    transform:scale(1.1);
    margin-bottom:7px;
}
.card h3{
    margin:15px 0;
    color:#fff;
}
.card button{
    padding:10px 20px;
    border:none;
    background:#5a6d119c;
    color:#fff;
    border-radius:6px;
    cursor:pointer;
}
.card button:hover{
    background:#313b099c;
}
.card-heading{
    font-size:24px;
    font-weight:500;
    color:#ffffff;
}
.mini-card-content{
    color:white;
}
@media(max-width:768px){
    .cards_container{
        width:90%;
        display:grid;
        gap:25px;
        grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
    }
    .card{
        width:auto;
    }
}