html {
    scroll-behavior: smooth;
}

::root {
    --background-color-1: #355592;
    --mobile-color: #FDC700;
}

/* Our Classes Background */
.clip-bg::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #f6f6f6;
    z-index: -3;
    clip-path: polygon(35% 0, 100% 0, 100% 100%, 50% 100%);
}
 
/* Our Classes Classları */
.tab-btn {
    transition: 0.3s;
}

.tab-btn.active-tab {
    background-color: #f97316;
    clip-path: polygon(0% 0%, 100% 0%, 100% 86%, 62% 86%, 52% 100%, 41% 86%, 0 86%);

}

/* BMI Arrow Funct  Değerlendirme Kısmı 3*/
#arrow {
    left: 55px;
    transition: left 0.5s ease;
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
    background-color: #F49B10;
}

/* Card Animation Değerlendirme Kısmı 2*/
.card-wrapper {
    position: relative;
    display: inline-block;
}

/* HOVER ANIMATION */
.card-wrapper:hover .block-top {
    transform:  translate3d(-50%, -50%, 0) scaleX(1.8);
}

.card-wrapper:hover .block-bottom {
    transform:  translate3d(-50%, 50%, 0) scaleX(1.8);
}

.card-wrapper:hover .block-left {
    transform:  translate3d(-50%, -50%, 0) scaleY(1.8);
}

.card-wrapper:hover .block-right {
    transform: translate3d(50%, -50%, 0) scaleY(1.8);
}

.card {
    position: absolute;
    background: #1e40af;
    transform: translate3d(0,0,0) scale(1);
    transition: transform 0.5s ease;
}

.block-top {
    top: 0;
    left: 50%;
    width: 100px;
    height: 10px;
    transform: translate3d(-50%, -50%, 0) scaleX(1);
}

.block-bottom {
    bottom: 0;
    left: 50%;
    width: 100px;
    height: 10px;
    transform: translate3d(-50%, 50%, 0) scaleX(1);
}

.block-left {
    top: 50%;
    left: 0;
    width: 10px;
    height: 100px;
    transform: translate3d(-50%, -50%, 0) scaleY(1);
    transform-origin: top;
}

.block-right {
    top: 50%;
    right: 0;
    width: 10px;
    height: 100px;
    transform: translate3d(50%, -50%, 0) scaleY(1);
    transform-origin: top;
}

/* Secret Text */
.card-text {
    position: absolute;
    display: inline-block;
    bottom: 20px;
    left: 50%;
    min-width: 250px;
    min-height: 100px;
    transform: translateX(-50%) translateY(20px);
    background-color: #355592; 
    color: #fff;
    opacity: 0;
    transition: all 0.5s ease;
    clip-path: polygon(0% 15%, 15% 15%, 15% 0%, 85% 0%, 85% 15%, 100% 15%, 100% 85%, 85% 85%, 85% 100%, 15% 100%, 15% 85%, 0% 85%);
}

.card-wrapper:hover .card-text {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}
/* Değerlendirme Kısmı 2 Son */

/* Ribbon */
.triangle-r {
    bottom: -39px;
    left: 0;
    clip-path: polygon(100% 0, 0 0, 100% 100%);
}

.triangle-l {
    bottom: -39px;
    right: 0;
    clip-path: polygon(100% 0, 0 0, 0 100%);
}