﻿#tab-gallery {
    width: 400px;
    height: 390px;
    padding: 0px 0;
    margin: 0 18px;
}

    #tab-gallery .columns .column {
        float: left;
        width: 84px;
        border: 3px solid #F6F6F6;
    }

        #tab-gallery .columns .column img {
            opacity: 0.8;
            cursor: pointer;
            width: 90px;
            height: 70px;
            padding-left: 5px;
            padding-right: 5px;
            object-fit: contain;
        }

            #tab-gallery .columns .column img:hover {
                opacity: 1;
            }

    #tab-gallery .columns::after {
        content: "";
        display: table;
        clear: both;
    }

    #tab-gallery .tab-container {
        position: relative;
        margin-bottom: 20px;
        border: 3px solid #F6F6F6;
        margin-top: 7%;
    }

        #tab-gallery .tab-container #expanded-img {
            max-width: 400px;
            height: 500px;
        }

.product-detail-container {
    max-width: 1220px;
    margin: 0 auto;
    flex-wrap: wrap;
}

.esitleme {
    display: flex;
    flex-wrap: wrap;
}

.card-title {
    color: #9D021B !important;
    font-weight: bold;
    margin-top: 4.5%;
}

.p-card-title {
    color: black;
}

.tab {
    overflow: hidden;
    background-color: white;
    box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 2px, rgba(0, 0, 0, 0.07) 0px 2px 4px, rgba(0, 0, 0, 0.07) 0px 4px 8px, rgba(0, 0, 0, 0.07) 0px 8px 16px, rgba(0, 0, 0, 0.07) 0px 16px 32px, rgba(0, 0, 0, 0.07) 0px 32px 64px !important;
}

    .tab button {
        background-color: inherit;
        float: left;
        border: none;
        outline: none;
        cursor: pointer;
        padding: 14px 16px;
        transition: 0.3s;
        font-size: 15px;
        width: 25%;
        height: 57px;
        color: black;
    }

        .tab button:hover {
            background-color: #9D021B ;
            color: white;
        }

        .tab button.active {
            background-color: #9D021B !important;
            color: white;
        }

.tabcontent {
    display: none;
    padding: 6px 12px;
    border: 1px solid #F6F6F6;
    border-top: none;
}

.topright {
    float: right;
    cursor: pointer;
    font-size: 28px;
}

    .topright:hover {
        color: red;
    }

.article_tab {

    margin: 0 155px;
    max-width: 1600px;
    margin: auto;
}

.tab-hr {
    margin-top: 0rem;
    margin-bottom: 1rem;
    border: 0;
    border-top: 10px solid rgba(0,0,0,.1) !important;
    color: #9D021B ;
    opacity: .9 !important;
}

.carousel {
    display: flex;
}

#tab-gallery {
    display: table;
    width: 40%;
}

.sag {
    width: 52%;
}

.hr {
    width: 85%;
}

#carouselExampleSlidesOnly {
    width: 100%;
}

.product-title {
    font-weight: bold !important;
}

@media (max-width: 991px) {
    #tab-gallery .tab-container #expanded-img {
        width: 200px;
        height: 250px;
    }

    #tab-gallery {
        margin-top: 5%;
    }

    #carouselExampleSlidesOnly {
        display: block;
    }
}


@media(max-width: 800px) {
    .tab button {
        margin: 0px 0px;
        transition: 0.3s;
        font-size: 0.8rem;
    }
    .tabcontent {
        font-size: 0.8rem;
    }
    .sag {
        width: 100%;
    }

    .card-title {
        display: none;
    }

    .p-card-title {
        display: none;
    }

    .card-titlePhone {
        color: #9D021B ;
        font-weight: bold;
        margin-top: 3%;
    }

    .p-card-titlePhone {
        color: #595959;
    }

    .sagPhone {
        margin-top: 1%;
    }

    #tab-gallery {
        width: 89%;
    }
}

@media(min-width: 800px) {

    .card-titlePhone {
        display: none;
    }

    .p-card-titlePhone {
        display: none;
    }

    .sagPhone {
        display: none;
    }

    #tab-gallery .tab-container #expanded-img {
        transition: transform 0.3s ease;
        image-rendering: auto;
    }

        #tab-gallery .tab-container #expanded-img:hover {
            transform: scale(1.8);
        }
}

#tab-gallery .tab-container #expanded-img {
    transition: transform 0.3s ease;
    image-rendering: auto;
}

    #tab-gallery .tab-container #expanded-img:hover {
        transform: scale(1.6);
    }

.tab-container {
    z-index: 2;
}

.tab-container {
    position: relative;
}