@import url("https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i&display=swap");


 label, input {
	 cursor: pointer;
}

 img {
	 max-width: 100%;
	 display: block;
	 vertical-align: middle;
}

 .top-text-wrapper {
	 margin: 20px 0 30px 0;
}
 .top-text-wrapper h4 {
	 font-size: 24px;
	 margin-bottom: 10px;
}
 .top-text-wrapper code {
	 font-size: 0.85em;
	 background: linear-gradient(90deg, #fce3ec, #ffe8cc);
	 color: #f20;
	 padding: 0.1rem 0.3rem 0.2rem;
	 border-radius: 0.2rem;
}
 .tab-section-wrapper {
	 padding: 30px 0;
}
 .grid-wrapper {
	 display: grid;
	 grid-gap: 10px;
	 place-items: center;
	 place-content: center;
}
 .grid-col-auto {
	 grid-auto-flow: column;
	 grid-template-rows: auto;
}
/* ******************* Main Styeles : Radio Card */
 label.radio-card {
	 cursor: pointer;
}
 label.radio-card .card-content-wrapper {
	 background: #fff;
	 border-radius: 5px;
	 max-width: 280px;
	 min-height: 50px;
	 padding: 15px;
	 display: grid;
	 box-shadow: 0 2px 4px 0 rgba(219, 215, 215, 0.04);
	 transition: 200ms linear;
}
 label.radio-card .check-icon {
	 width: 20px;
	 height: 20px;
	 display: inline-block;
	 border: solid 2px #e3e3e3;
	 border-radius: 50%;
	 transition: 200ms linear;
	 position: relative;
}
 label.radio-card .check-icon:before {
	 content: "";
	 position: absolute;
	 inset: 0;
	 background-image: url("data:image/svg+xml,%3Csvg width='12' height='9' viewBox='0 0 12 9' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.93552 4.58423C0.890286 4.53718 0.854262 4.48209 0.829309 4.42179C0.779553 4.28741 0.779553 4.13965 0.829309 4.00527C0.853759 3.94471 0.889842 3.88952 0.93552 3.84283L1.68941 3.12018C1.73378 3.06821 1.7893 3.02692 1.85185 2.99939C1.91206 2.97215 1.97736 2.95796 2.04345 2.95774C2.11507 2.95635 2.18613 2.97056 2.2517 2.99939C2.31652 3.02822 2.3752 3.06922 2.42456 3.12018L4.69872 5.39851L9.58026 0.516971C9.62828 0.466328 9.68554 0.42533 9.74895 0.396182C9.81468 0.367844 9.88563 0.353653 9.95721 0.354531C10.0244 0.354903 10.0907 0.369582 10.1517 0.397592C10.2128 0.425602 10.2672 0.466298 10.3112 0.516971L11.0651 1.25003C11.1108 1.29672 11.1469 1.35191 11.1713 1.41247C11.2211 1.54686 11.2211 1.69461 11.1713 1.82899C11.1464 1.88929 11.1104 1.94439 11.0651 1.99143L5.06525 7.96007C5.02054 8.0122 4.96514 8.0541 4.90281 8.08294C4.76944 8.13802 4.61967 8.13802 4.4863 8.08294C4.42397 8.0541 4.36857 8.0122 4.32386 7.96007L0.93552 4.58423Z' fill='white'/%3E%3C/svg%3E%0A");
	 background-repeat: no-repeat;
	 background-size: 12px;
	 background-position: center center;
	 transform: scale(1.6);
	 transition: 200ms linear;
	 opacity: 0;
}
 label.radio-card input[type=radio] {
	 appearance: none;
	 -webkit-appearance: none;
	 -moz-appearance: none;
}
 label.radio-card input[type=radio]:checked + .card-content-wrapper {
	 box-shadow: 0 2px 4px 0 rgba(219, 215, 215, 0.5), 0 0 0 2px #3057d5;
}
 label.radio-card input[type=radio]:checked + .card-content-wrapper .check-icon {
	 background: #3057d5;
	 border-color: #3057d5;
	 transform: scale(1.2);
}
 label.radio-card input[type=radio]:checked + .card-content-wrapper .check-icon:before {
	 transform: scale(1);
	 opacity: 1;
}
 label.radio-card input[type=radio]:focus + .card-content-wrapper .check-icon {
	 box-shadow: 0 0 0 4px rgba(48, 86, 213, 0.2);
	 border-color: #3056d5;
}
 label.radio-card .card-content img {
	 margin-bottom: 10px;
}
 label.radio-card .card-content h4 {
	 font-size: 16px;
	 letter-spacing: -0.24px;
	 text-align: center;
	 color: #1f2949;
	 margin-bottom: 10px;
}
 label.radio-card .card-content h5 {
	 font-size: 14px;
	 line-height: 1.4;
	 text-align: center;
	 color: #686d73;
}



.pricing-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    padding: 20px;
    max-width: 1200px;
    width: 100%;
}

.card3 {
    background-color: #fffbe6;
    border: 2px solid #ffe8a1;
    border-radius: 12px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    padding: 10px;
    text-align: center;
  
}

.card3.highlighted {
    background-color: #fff1c1;
    border-color: #ffd166;
}



.card3 h3 {
    font-size: 1.5em;
    color: #333;
    margin-bottom: 10px;
}

.card3 .price {
    font-size: 2.5em;
    font-weight: bold;
    color: #e63946;
    margin: 10px 0;
}

.card3 ul {
    list-style-type: none;
    padding: 0;
    margin: 10px 0;
    color: #555;
}

.card3 ul li {
    margin: 5px 0;
    font-size: 1em;
}

.card3 button {
    background-color: #fffbe6;
    color: black;
    border: none;
    border-radius: 8px;
    padding: 10px 0px;
    font-size: 1em;
    cursor: pointer;
    transition: background-color 0.3s ease;
}



.card3 .icon {
    font-size: 1.2em;
    vertical-align: middle;
    margin-left: 5px;
    color: #ffb703;
}
.card3.featured {
    background-color:white;
    border: 2px solid #ffd166;
    position: relative;
    
}

.card3.featured .header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    background-color: #ffd166;
    color: #333;
    font-size: 1em;
    font-weight: bold;
    text-align: center;
    padding: 10px 0;
    border-radius: 12px 12px 0 0;
}

.card3.featured .price {
    color: #e63946;
    font-size: 2.5em;
    font-weight: bold;
}

.learning-plan {
    text-align: center;
    max-width: 600px;
    padding: 20px;
}

.learning-plan h1 {
    font-size: 2em;
    color: #1a1a1a;
    margin-bottom: 10px;
}

.learning-plan p {
    font-size: 1em;
    color: #666;
    margin-bottom: 20px;
    line-height: 1.6;
}

.age-selection {
    background-color: white;
    border-radius: 15px;
    padding: 30px;
    width: 100%;
    max-width: 800px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    text-align: center;
}

.age-selection h1 {
    font-size: 1.8em;
    color: #5a0d8e;
    margin-bottom: 20px;
}

.age-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
}

.age-button {
    background-color: #fffbe6;
    border: 2px solid #ffe8a1;
    border-radius: 10px;
    padding: 10px;
    font-size: 1em;
    color: #5a0d8e;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s, background-color 0.3s;
}

.age-button:hover {
    background-color: #ffe8a1;
    transform: scale(1.05);
}

.age-button:focus {
    outline: none;
    border-color: #5a0d8e;
}
/* Media Queries for Mobile View */
@media (max-width: 768px) {
    h1 {
        font-size: 1.8rem;
    }

    p {
        font-size: 0.9rem;
    }

    .age-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
    }

    .age-button {
        font-size: 0.9rem;
        padding: 8px;
    }
}

@media (max-width: 480px) {
    h1 {
        font-size: 1.5rem;
    }

    p {
        font-size: 0.8rem;
    }

    .age-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 6px;
    }

    .age-button {
        font-size: 0.8rem;
        padding: 6px;
    }
    .free-trial-container {
    position: relative;
    display: inline-block;
    margin-top: -20px; /* Üstteki öğeye göre konumlandırma */
    margin-bottom: 10px;
}