/*
 CSS for the main interaction
*/
.tab-panels {
    width: 75%;
    position: absolute;
    right: 0;
    float: right;
    top: 0;
    padding-left: 10px;
    background-color: #fff;
    border-radius: 5px;
    transition: top 0.3s ease;
    /* Smooth transition when repositioning */
}

.tab-panels img {
    height: 500px;
    width: auto;
    margin: auto;
    object-fit: cover;
    border-radius: 5px;
}

.tabset>input[type="radio"] {
    position: absolute;
    left: -200vw;
}

.tabset .tab-panel {
    display: none;
}

.tabset>input:first-child:checked~.tab-panels>.tab-panel:first-child,
.tabset>input:nth-child(3):checked~.tab-panels>.tab-panel:nth-child(2),
.tabset>input:nth-child(5):checked~.tab-panels>.tab-panel:nth-child(3),
.tabset>input:nth-child(7):checked~.tab-panels>.tab-panel:nth-child(4),
.tabset>input:nth-child(9):checked~.tab-panels>.tab-panel:nth-child(5),
.tabset>input:nth-child(11):checked~.tab-panels>.tab-panel:nth-child(6),
.tabset>input:nth-child(13):checked~.tab-panels>.tab-panel:nth-child(7),
.tabset>input:nth-child(15):checked~.tab-panels>.tab-panel:nth-child(8),
.tabset>input:nth-child(17):checked~.tab-panels>.tab-panel:nth-child(9),
.tabset>input:nth-child(19):checked~.tab-panels>.tab-panel:nth-child(10),
.tabset>input:nth-child(21):checked~.tab-panels>.tab-panel:nth-child(11),
.tabset>input:nth-child(23):checked~.tab-panels>.tab-panel:nth-child(12),
.tabset>input:nth-child(25):checked~.tab-panels>.tab-panel:nth-child(13),
.tabset>input:nth-child(27):checked~.tab-panels>.tab-panel:nth-child(14),
.tabset>input:nth-child(29):checked~.tab-panels>.tab-panel:nth-child(15),
.tabset>input:nth-child(31):checked~.tab-panels>.tab-panel:nth-child(16),
.tabset>input:nth-child(33):checked~.tab-panels>.tab-panel:nth-child(17),
.tabset>input:nth-child(35):checked~.tab-panels>.tab-panel:nth-child(18),
.tabset>input:nth-child(37):checked~.tab-panels>.tab-panel:nth-child(19),
.tabset>input:nth-child(39):checked~.tab-panels>.tab-panel:nth-child(20),
.tabset>input:nth-child(41):checked~.tab-panels>.tab-panel:nth-child(21),
.tabset>input:nth-child(43):checked~.tab-panels>.tab-panel:nth-child(22),
.tabset>input:nth-child(45):checked~.tab-panels>.tab-panel:nth-child(23),
.tabset>input:nth-child(47):checked~.tab-panels>.tab-panel:nth-child(24),
.tabset>input:nth-child(49):checked~.tab-panels>.tab-panel:nth-child(25),
.tabset>input:nth-child(51):checked~.tab-panels>.tab-panel:nth-child(26),
.tabset>input:nth-child(53):checked~.tab-panels>.tab-panel:nth-child(27),
.tabset>input:nth-child(55):checked~.tab-panels>.tab-panel:nth-child(28),
.tabset>input:nth-child(57):checked~.tab-panels>.tab-panel:nth-child(29),
.tabset>input:nth-child(59):checked~.tab-panels>.tab-panel:nth-child(30),
.tabset>input:nth-child(61):checked~.tab-panels>.tab-panel:nth-child(31),
.tabset>input:nth-child(63):checked~.tab-panels>.tab-panel:nth-child(32),
.tabset>input:nth-child(65):checked~.tab-panels>.tab-panel:nth-child(33),
.tabset>input:nth-child(67):checked~.tab-panels>.tab-panel:nth-child(34),
.tabset>input:nth-child(69):checked~.tab-panels>.tab-panel:nth-child(35),
.tabset>input:nth-child(71):checked~.tab-panels>.tab-panel:nth-child(36),
.tabset>input:nth-child(73):checked~.tab-panels>.tab-panel:nth-child(37),
.tabset>input:nth-child(75):checked~.tab-panels>.tab-panel:nth-child(38),
.tabset>input:nth-child(77):checked~.tab-panels>.tab-panel:nth-child(39),
.tabset>input:nth-child(79):checked~.tab-panels>.tab-panel:nth-child(40),
.tabset>input:nth-child(81):checked~.tab-panels>.tab-panel:nth-child(41),
.tabset>input:nth-child(83):checked~.tab-panels>.tab-panel:nth-child(42),
.tabset>input:nth-child(85):checked~.tab-panels>.tab-panel:nth-child(43),
.tabset>input:nth-child(87):checked~.tab-panels>.tab-panel:nth-child(44),
.tabset>input:nth-child(89):checked~.tab-panels>.tab-panel:nth-child(45),
.tabset>input:nth-child(91):checked~.tab-panels>.tab-panel:nth-child(46),
.tabset>input:nth-child(93):checked~.tab-panels>.tab-panel:nth-child(47),
.tabset>input:nth-child(95):checked~.tab-panels>.tab-panel:nth-child(48),
.tabset>input:nth-child(97):checked~.tab-panels>.tab-panel:nth-child(49),
.tabset>input:nth-child(99):checked~.tab-panels>.tab-panel:nth-child(50) {
    display: block;
}

.tabset>label {
    position: relative;
    display: block;
    padding: 12px 20px;
    border: 1px solid #eeeeee;
    cursor: pointer;
    font-size: 16px;
    margin-bottom: 0px;
    color: #000;
    border-radius: 0px;
    font-weight: 600;
    background-color: #ffffff;
    width: 25%;
}

.tabset>label i {
    position: absolute;
    right: 15px;
    top: 18px;
}

.tabset>label::after {
    content: "";
    position: absolute;
    left: 0px;
    bottom: 0px;
    width: 100%;
    height: 0px;
    background: #fff;
}

.tabset>label:hover,
.tabset>input:focus+label {
    color: #28388F;
}

.tabset>label:hover::after,
.tabset>input:focus+label::after,
.tabset>input:checked+label::after {
    background: #28388F;
}

.tabset>input:checked+label {
    border-bottom: 0px solid #fff;
    color: #ffffff;
    background-color: #28388f;
}

.tab-panel {
    padding: 0px 0;
}

.tab-panel h2 {
    color: #28388f;
    font-size: 30px;
    margin-top: 0;
    margin-bottom: 15px;
}

.tab-panel p {
    color: #28388f;
    font-size: 18px;
}

/*
 Demo purposes only
*/
*,
*:before,
*:after {
    box-sizing: border-box;
}

.tabset {
    width: 100%;
    position: relative;
}

@media (max-width:1200px) {
    .tab-panels img {
        height: 335px;
    }
}

@media (max-width: 768px) {
    .tab-panels {
        width: 100%;
        margin-top: 0px;
        float: none;
        position: relative;
    }

    .tabset>label {
        width: 100%;
    }

    .tab-panels img {
        height: 205px;
    }

    .tab-panel h2 {
        font-size: 18px;
    }
}

/* Product Links Styling */
.products-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 15px 0;
}

.product-link {
    position: relative;
    display: inline-block;
    padding: 12px 40px 12px 20px;
    border: 1px solid #eeeeee;
    cursor: pointer;
    font-size: 16px;
    color: #000;
    border-radius: 5px;
    font-weight: 600;
    background-color: #ffffff;
    text-decoration: none;
    transition: all 0.3s ease;
}

.product-link i {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
}

.product-link:hover {
    color: #ffffff;
    background-color: #28388f;
    border-color: #28388f;
    text-decoration: none;
}