/* MAIN */
:root {
    /* Primary Colors */
    --primary-100: #febfaa;
    --primary-200: #fc7f56;
    --primary-300: #f84004;
    --primary-400: #c03203;
    --primary-500: #892302;
    --primary-alpha-10: rgba(211, 60, 32, 0.1);

    /* Secondary Colors */
    --secondary-100: #ffe6b7;
    --secondary-200: #fece70;
    --secondary-300: #feb528;
    --secondary-400: #e29501;
    --secondary-500: #956901;
    --secondary-alpha-10: rgba(254, 181, 40, 0.1);

    /* Neutral Colors */
    --neutral-100: #ffffff;
    --neutral-200: #eff0f4;
    --neutral-300: #d3d6de;
    --neutral-400: #b5b9c0;
    --neutral-500: #454952;
    --neutral-600: #2f3338;
    --neutral-700: #25282c;
    --neutral-800: #14161a;
    --neutral-900: #000000;

    /* Red Colors */
    --red-100: #fd9ba3;
    --red-200: #fb3748;
    --red-300: #e70518;
    --red-400: #a30311;
    --red-alpha-10: rgba(251, 55, 72, 0.1);

    /* Yellow Colors */
    --yellow-100: #ffe9a4;
    --yellow-200: #fed44a;
    --yellow-300: #fbc101;
    --yellow-400: #b08701;
    --yellow-alpha-10: rgba(254, 212, 74, 0.1);

    /* Green Colors */
    --green-100: #adf2cd;
    --green-200: #5be59b;
    --green-300: #1fc16b;
    --green-400: #16884b;
    --green-alpha-10: rgba(31, 193, 107, 0.1);
}

/* Step 2: Create Reusable Utility Classes */
.bg-primary-100 { background-color: var(--primary-100); }
.bg-primary-200 { background-color: var(--primary-200); }
.bg-primary-300 { background-color: var(--primary-300); }
.bg-primary-400 { background-color: var(--primary-400); }
.bg-primary-500 { background-color: var(--primary-500); }
.bg-primary-alpha-10 { background-color: var(--primary-alpha-10); }

/* Secondary Colors */
.bg-secondary-100 { background-color: var(--secondary-100); }
.bg-secondary-200 { background-color: var(--secondary-200); }
.bg-secondary-300 { background-color: var(--secondary-300); }
.bg-secondary-400 { background-color: var(--secondary-400); }
.bg-secondary-500 { background-color: var(--secondary-500); }
.bg-secondary-alpha-10 { background-color: var(--secondary-alpha-10); }

/* Neutral Colors */
.bg-neutral-100 { background-color: var(--neutral-100); }
.bg-neutral-200 { background-color: var(--neutral-200); }
.bg-neutral-300 { background-color: var(--neutral-300); }
.bg-neutral-400 { background-color: var(--neutral-400); }
.bg-neutral-500 { background-color: var(--neutral-500); }
.bg-neutral-600 { background-color: var(--neutral-600); }
.bg-neutral-700 { background-color: var(--neutral-700); }
.bg-neutral-800 { background-color: var(--neutral-800); }
.bg-neutral-900 { background-color: var(--neutral-900); }

/* Red Colors */
.bg-red-100 { background-color: var(--red-100); }
.bg-red-200 { background-color: var(--red-200); }
.bg-red-300 { background-color: var(--red-300); }
.bg-red-400 { background-color: var(--red-400); }
.bg-red-alpha-10 { background-color: var(--red-alpha-10); }

/* Yellow Colors */
.bg-yellow-100 { background-color: var(--yellow-100); }
.bg-yellow-200 { background-color: var(--yellow-200); }
.bg-yellow-300 { background-color: var(--yellow-300); }
.bg-yellow-400 { background-color: var(--yellow-400); }
.bg-yellow-alpha-10 { background-color: var(--yellow-alpha-10); }

/* Green Colors */
.bg-green-100 { background-color: var(--green-100); }
.bg-green-200 { background-color: var(--green-200); }
.bg-green-300 { background-color: var(--green-300); }
.bg-green-400 { background-color: var(--green-400); }
.bg-green-alpha-10 { background-color: var(--green-alpha-10); }


.text-primary-100 { color: var(--primary-100); }
.text-primary-200 { color: var(--primary-200); }
.text-primary-300 { color: var(--primary-300); }
.text-primary-400 { color: var(--primary-400); }
.text-primary-500 { color: var(--primary-500); }
.text-primary-alpha-10 { color: var(--primary-alpha-10); }

/* Secondary Colors */
.text-secondary-100 { color: var(--secondary-100); }
.text-secondary-200 { color: var(--secondary-200); }
.text-secondary-300 { color: var(--secondary-300); }
.text-secondary-400 { color: var(--secondary-400); }
.text-secondary-500 { color: var(--secondary-500); }
.text-secondary-alpha-10 { color: var(--secondary-alpha-10); }

/* Neutral Colors */
.text-neutral-100 { color: var(--neutral-100); }
.text-neutral-200 { color: var(--neutral-200); }
.text-neutral-300 { color: var(--neutral-300); }
.text-neutral-400 { color: var(--neutral-400); }
.text-neutral-500 { color: var(--neutral-500); }
.text-neutral-600 { color: var(--neutral-600); }
.text-neutral-700 { color: var(--neutral-700); }
.text-neutral-800 { color: var(--neutral-800); }
.text-neutral-900 { color: var(--neutral-900); }

/* Red Colors */
.text-red-100 { color: var(--red-100); }
.text-red-200 { color: var(--red-200); }
.text-red-300 { color: var(--red-300); }
.text-red-400 { color: var(--red-400); }
.text-red-alpha-10 { color: var(--red-alpha-10); }

/* Yellow Colors */
.text-yellow-100 { color: var(--yellow-100); }
.text-yellow-200 { color: var(--yellow-200); }
.text-yellow-300 { color: var(--yellow-300); }
.text-yellow-400 { color: var(--yellow-400); }
.text-yellow-alpha-10 { color: var(--yellow-alpha-10); }

/* Green Colors */
.text-green-100 { color: var(--green-100); }
.text-green-200 { color: var(--green-200); }
.text-green-300 { color: var(--green-300); }
.text-green-400 { color: var(--green-400); }
.text-green-alpha-10 { color: var(--green-alpha-10); }

/* Example: Secondary Colors */
.bg-secondary-100 { background-color: var(--secondary-100); }
.text-secondary-100 { color: var(--secondary-100); }

/* Add similar utility classes for all color groups as needed */

/* Step 3: Reuse in Other Classes */
.button-primary {
    background-color: var(--primary-500);
    color: var(--neutral-100);
    border: 1px solid var(--primary-400);
}

.alert-warning {
    background-color: var(--yellow-100);
    color: var(--yellow-400);
    border-left: 4px solid var(--yellow-300);
}


html
{
    border: 0 !important;
}


body{
    background-color: var(--neutral-800);
    font-family: 'Albert Sans', sans-serif;
}



h1 {
    font-family: 'Albert Sans', sans-serif;
    font-weight: 700;
    font-size: 3.5rem; /* 56px / 16px = 3.5rem */
    line-height: 4.375rem; /* 70px / 16px = 4.375rem */
}

h2 {
    font-family: 'Albert Sans', sans-serif;
    font-weight: 700;
    font-size: 3rem; /* 48px / 16px = 3rem */
    line-height: 4rem; /* 64px / 16px = 4rem */
}

h3 {
    font-family: 'Albert Sans', sans-serif;
    font-weight: 700;
    font-size: 2.5rem; /* 40px / 16px = 2.5rem */
    line-height: 3.5rem; /* 56px / 16px = 3.5rem */
}

h4 {
    font-family: 'Albert Sans', sans-serif;
    font-weight: 600;
    font-size: 2rem; /* 24px / 16px = 1.5rem */
    line-height: 2.125rem; /* 34px / 16px = 2.125rem */
}

h5 {
    font-family: 'Albert Sans', sans-serif;
    font-size: 1.25rem; /* 20px / 16px = 1.25rem */
    font-weight: 700;
    line-height: 1.5rem; /* 28px / 16px = 1.75rem */
    text-align: left;
}

h6 {
    font-family: 'Albert Sans', sans-serif;
    font-weight: 700;
    font-size: 1.25rem; /* 18px / 16px = 1.125rem */
    line-height: 1.625rem; /* 26px / 16px = 1.625rem */
}


a
{
    text-decoration: none;
    color: #F84004;
}


.text-white-75
{
    color: #ffffff;
    opacity: 0.75;
}


.nav-link
{
    color: #ffffff;
}

.course-content-nav
{
    font-size: 1.2rem;
}

.nav-link.active
{
    color: #F84004 !important;
}


.navbar-toggler
{
    border: none !important;
}

.navbar-toggler:focus
{
    outline: none !important;
    box-shadow: none !important;
}

.navbar-toggler:focus:not(:focus-visible) {
    outline: none !important;
}



footer
{
    background-color: rgba(37, 40, 44, 0.36);
}


.bg-navbar
{
    background-color: #14161A;
    z-index: 9999;
}


#collapseFooter1 , #collapseFooter2, #collapseFooter3, #headingFooter1, #headingFooter2, #headingFooter3
{
    background-color: rgba(9,10,12,1);
    border: none;
    border-color: transparent;
}


@media (min-width: 1200px) {
    .container {
        /*max-width: 1500px; */
    }
}

@media screen and (max-width: 1000px) {
    .container {
        max-width: 100%;
    }

}

@media screen and (max-width: 991px ){
    .navbar-custom-w
    {
        width: 100%;
    }
}




/* ----------- GENERAL ----------- */
/* Override Bootstrap Primary Button Colors */
.btn-primary {
    background-color: #F84004; /* Normal color */
    border-color: #F84004; /* Normal border color */
    color: #fff; /* Text color */
}

.btn-primary:hover, .btn-primary:focus {
    background-color: #B52E03; /* Hover color */
    border-color: #B52E03; /* Hover border color */
    color: #fff; /* Hover text color */
}

.btn-primary:active, .btn-primary.active, .show > .btn-primary.dropdown-toggle {
    background-color: #B52E03; /* Active color */
    border-color: #B52E03; /* Active border color */
    color: #fff; /* Active text color */
}

.btn-primary:focus {
    box-shadow: 0 0 0 0.25rem rgba(235, 111, 71, 0.5); /* Focus shadow color */
}

.btn-primary:disabled, .btn-primary.disabled {
    background-color: #672109; /* Disabled color */
    border-color: #672109; /* Disabled border color */
    color: #fff; /* Disabled text color */
    opacity: 0.65; /* Disabled opacity */
}


.btn-secondary
{
    background-color: transparent !important;
    border-color: white !important;
    color: white;
    padding: 0.5rem;
    padding-right:1.5rem;
    padding-left:1.5rem;
}


.btn-secondary:hover
{
    border-color: var(--primary-300) !important;
    color: var(--primary-300) !important;
}

.btn-secondary:disabled
{

}


.btn-primary:active {
    background-color: rgba(248, 64, 4, 1) !important; /* Color when clicked */
}

.navbar-nav .nav-link:hover {
    color: #F84004 !important; /* Hover color for links */
}
/* Optional: Offcanvas custom background */
.offcanvas-top {
    background: linear-gradient(175.14deg, #14161A 0.34%, #1F2228 91.13%);
    /* Same as navbar background color */
    bottom: initial;
}


.dropdown-menu
{
    background-color: #14161A;
    /* drop shadow white */
    box-shadow: 0 0.25rem 0.75rem rgba(255, 255, 255, 0.2);
}

.dropdown-menu > li > a
{
    color: #ffffff;
}


.dropdown-item:active
{
    background-color: rgba(248, 64, 4, 1); /* Color when clicked */
}


/* carousel  */
.carousel-headline {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 48px;
    line-height: 64px;
}

@media (max-width: 768px) {
    .carousel-headline {
        font-family: 'Poppins', sans-serif;
        font-weight: 700;
        font-size: 24px;
        line-height: 34px;
    }

    .carousel-headline-caption {
        font-family: 'Poppins', sans-serif;
        font-weight: 400;
        font-size: 16px;
        line-height: 24px;
    }
}

.carousel-headline-caption {
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    font-size: 20px;
    line-height: 32px;
}


.btn-secondary-carousel
{
    background: transparent;
}

.btn-secondary-carousel:hover
{
    background: transparent;
    color: #F84004;
    border-color: #F84004;
}

.btn-primary-filter
{
    background-color: rgba(248, 64, 4, 0.1);
    color: #F84004;
}

.text-button
{
    color: #F84004;
    fill: #F84004;
}

.text-button:hover
{
    color: #F09172;
    fill: #F09172;
}

.text-button:disabled
{
    color: #672109;
    fill: #672109;
}

/* Hover state: Change color to #F09172 */
.text-button > img:hover {
    filter: invert(71%) sepia(56%) saturate(350%) hue-rotate(338deg) brightness(97%) contrast(92%);
}

/* Disabled state: Change color to #672109 */
.text-button > img:disabled {
    filter: invert(13%) sepia(35%) saturate(5165%) hue-rotate(356deg) brightness(91%) contrast(127%);
}





/* Adjust the height of the carousel-item to match the Swiper carousel */
#textCarousel .carousel-item {
    height: 100%;  /* Default height to match the Swiper container */
    color: white;
}

#textCarousel > .carousel-inner
{
    flex-grow: 1;
    height: 100%;
}

/* Adjustments for responsiveness, similar to the Swiper container */
@media (max-width: 1023px) {
    #textCarousel .carousel-item {
        height: 300px; /* Increased height for smaller screens */
        margin-top: 15px;
    }
}

#textCarousel > .carousel-inner > .carousel-item {
    transition: opacity 1s ease-in-out;
}

textCarousel > .carousel-inner > .carousel-item.active {
    display: block;
    opacity: 1;
}




.swiper-pagination-bullets .swiper-pagination-bullet {
    width: 35px; /* Increase bullet size */
    height: 4px; /* Increase bullet size */
    border-radius: 4px;
    background-color: var(--neutral-400); /* Change bullet color to orange */
    margin: 0 8px;
}

/* Customize the active bullet to make it stand out */
.swiper-pagination-bullets .swiper-pagination-bullet-active {
    width: 35px; /* Set width of active bullet */
    height: 4px; /* Set height of active bullet */
    border-radius: 4px;
    background-color: var(--neutral-200);

}






/* banner background image*/
.banner-bg {
    background-image: url(../../assets/img/banner_background.png);
    position: absolute;

    width: 1974px;
    height: 1977px;
    right: -230px;
    top: -669px;
    mix-blend-mode: screen;
    background-size: cover; /* Cover the entire area without repeating */
    background-repeat: no-repeat;

}



@media (min-width: 1920px)
{
    /*banner background will 2x the size of standard width*/
    .banner-bg {
        width: 85%;
    }
}
@media (max-width: 1919px) {
    .banner-bg {
        width: 100vw;
        left: 150px;
    }
}


.background-wrapper {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 150vh;
    overflow: hidden;
    z-index: -1; /* Ensure it's behind the content */
    pointer-events: none; /* Ensure the background doesn't interfere with user interactions */
}


.background-container {
    position: absolute;
    width: 2500px;
    height: 2500px;
    top: -50%;
    right: -50%; /* Ekranın sağ üst köşesinden taşmasını sağlar */
    background: url(../../assets/img/bg-banner.webp) no-repeat center center;
    background-size: cover;
    opacity: 0.06; /* 6% opacity */
    clip-path: ellipse(50% 50% at 50% 50%);
}

/* Responsive adjustments */
@media (max-width: 1200px) {
    .background-container {
        width: 100%;
        height: 100%;
        top: 0;
        right: 0;
        clip-path: none;
    }
}

@media (min-width: 1201px) and (max-width: 1919px) {
    .background-container {
        width: 1700px;
        height: 1700px;
        top: -50%;
        right: -20%;
    }
}

@media (min-width: 1920px) {
    .background-container {
        width: 80vw;
        height: 80vw;
        top: -50%;
        right: -10%;
    }
}

.container
{
    position: relative;
    z-index: 1;
}




/* buttons */

.btn
{
    border-radius: 50px;
}



@media (max-width: 576px) {
    .btn-carousel-action
    {
        width: 80%;
    }
}




/* A HREFS */
.color-orange
{
    color: #F84004;
}

.border-orange
{
    border-color: #F84004 !important;
}

.background-orange
{
    background-color: #F84004 !important;
}


.color-white
{
    color: white !important;
}



.h-feature-box
{
    height: 100px !important;
}



/* popular courses cards */

.card-title-popular-courses {
    position: absolute;
    bottom: 10px; /* Position text 10px above the bottom of the parent */
    left: 0;
    right: 0;
    text-align: center; /* Center text horizontally */
    color: white;
    transition: opacity 0.5s ease, transform 0.5s ease; /* Smooth transition for opacity and transform */
    opacity: 0; /* Initially hidden */
    padding: 10px; /* Add padding around the text */
    transform: translate(0, 0); /* Reset transform for dynamic scaling */
}



.card-overlay:hover .card-title
{
    opacity: 1;
}

.card-overlay::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: transparent;
    transition: background-color 0.5s ease;
    pointer-events: none; /* Ensures clicks pass through to elements underneath */
}

.card-overlay:hover::before {
    background: linear-gradient(to top, rgba(146, 36, 0, 1) 0%,  rgba(248, 64, 4, 0.25) 75%, rgba(0, 0, 0, 0) 100%);
}


.card-popular-courses
{
    transition: transform 0.5s ease;
    z-index: 1;
}

.card-popular-courses:hover
{
    transform: scale(1.2);
    z-index: 2;
    box-shadow: 0 4px 44px 12px rgba(255, 255, 255, 0.15);
}

.card-popular-courses {
    height: 100%; /* Kartların eşit yükseklikte olması için */
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.card-popular-courses .card-overlay {
    position: relative;
    overflow: hidden;
    flex-grow: 1; /* İçeriği eşit genişlet */
}

.card-popular-courses .card-img-top {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Resimleri kırpmadan aynı yükseklikte yap */
    aspect-ratio: 3 / 4; /* Sabit en-boy oranı */
}

.card-title-popular-courses {
    text-align: center;
    padding: 10px;
}




/* Container to hold the flip card */
/* General Container to hold the flip card */
.flip-card {
    perspective: 1000px;
    width: 300px; /* Adjust card size as needed */
    height: 300px; /* Ensure the height is the same as width for a square shape */
}

/* Flip card inner section to manage 3D transformation */
.flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: transform 0.6s;
}

/* On hover, the card flips */
.flip-card:hover .flip-card-inner {
    transform: rotateY(180deg);
}

/* Front and back sides of the flip card */
.flip-card-front,
.flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%; /* Ensure both sides match the height and width */
    backface-visibility: hidden; /* Prevent mirrored text */
    border-radius: 8px; /* Optional rounded corners */
    overflow: hidden;
}

/* Flip card front style */
.flip-card-front {
    background: white; /* Front background color */
    color: black; /* Front text color */
}

/* Flip card back style */
.flip-card-back {
    background-color: #FF784D; /* Back background color */
    color: white; /* Back text color */
    transform: rotateY(180deg); /* Place back side behind */
}

/* Image inside the flip card */
.flip-card img {
    width: auto;
    height: 80%; /* Adjust to fit in the card */
    margin: 0 auto; /* Center the image */
}

/* Custom background colors for specific flip cards */
.flip-card-bg-1 {
    background-color: var(--primary-300);
}

.flip-card-bg-2 {
    background-color: var(--secondary-300);
}

.flip-card-bg-3 {
    background-color: #FF784D;
}

/* Optional: Style for cards with a hover effect */
.flip-card:hover .flip-card-bg-1,
.flip-card:hover .flip-card-bg-2,
.flip-card:hover .flip-card-bg-3 {
    opacity: 1; /* Add hover effect to change opacity */
}

/* Text styling inside the flip card */
.flip-card .card-body {
    text-align: left;
    padding: 15px;
}

.flip-card .card-title {
    font-size: 1.875rem;
}

.flip-card .card-text {
    font-size: 1rem;
    color: inherit; /* Ensure text color is inherited from parent */
}


/* Info Card Part */
.fs-7
{
    font-size: 0.75rem;
}

/* Extra Small Devices, Phones */
@media only screen and (max-width : 992px ) {
    .home-info-card
    {
        border-right: none !important;
    }

    .bg-sm-transparent
    {
        background-color: transparent !important;
        border: none;
    }
}





/* Explore Featured Courses */

.card-overlay-no-hover{

}





/* Our Courses */
.section-our-courses {
    width: 100%;
}



.badge-bg-orange
{
    background-color: #F84004;
}


.our-courses-online-course
{
    font-family: 'Poppins', serif;
    font-style: normal;
    font-weight: 600;
    font-size: 14px;
    line-height: 21px;
    color: #FF784D;
}

.our-courses-time-badge
{
    /* Badge background color */
    background: rgba(254, 181, 40, 0.15);
}

.our-courses-time-badge-text
{
    color: #FEB528;
}


.why-us-title
{
    font-family: 'Albert Sans', sans-serif;
    font-weight: 100;
    font-size: 40px;
    line-height: 56px;
}




/* FAQ */
.accordion
{
    border: none !important;
    background-color: #14161A;
    border-color: #14161A !important;
}


.faq-accordion > .accordion-item > .accordion-header > .accordion-button
{
    background-color: #14161A;
    border-bottom: 1px solid #454952;
}

.faq-accordion > .accordion-item > .accordion-header > .accordion-button:not(.collapsed)
{
    border-color: #14161A;
    box-shadow: none;
}

.faq-accordion > .accordion-item
{
    border: none;
    border-radius: var(--bs-accordion-border-radius) !important;
    margin-bottom: 15px;
}

.faq-accordion > .accordion-item  > .accordion-collapse > .accordion-body
{
    background-color: #14161A;
    color: white;
    border: none;
}

.accordion-collapse {
    background-color: #14161A;
    border-color: #14161A;
    border: none;
}

/* Optional: Change the color of the active accordion header */
.accordion-button.collapsed {
    background-color: #14161A;
    color: #14161A;
    border: none;
}

.accordion-button::after
{
    filter: brightness(0) invert(1);
}

.accordion-btn-bg-dark
{
    background-color: #0d1117 !important;
}

.accordion-body-bg-dark
{
    background-color: #0d1117 !important;
}


/* CONTACT US FORM */
.section-contact-form
{
    background:
            linear-gradient(90deg, #14161A 0%, rgba(20, 22, 26, 0.75) 67%, rgba(20, 22, 26, 0.5) 100%),
            url('/assets/img/contact-us-bg.jpg');
    background-size: cover;  /* Ensures the image covers the div */
    background-position: 15vw center;  /* Centers the image within the div */
    background-repeat: no-repeat;  /* Prevents the image from repeating */ /* Adjust the height as needed */
    width: 100%;
}

.btn-contact-us
{
    width: 200px;
}




/* FOOTER */
.footer-logo
{
    max-width: 317px;
}


.icon-container {

    width: 50px; /* Adjust size as needed */
    height: 50px; /* Adjust size as needed */
    background-color: rgba(245, 127, 40, 0.08); /* Twitter blue color */
    border-radius: 50%; /* Make it a circle */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px; /* Adjust icon size as needed */
}

.list-business li
{
    margin-bottom: 10px;
}

.heading-600
{
    font-weight: 600;
}

.copyright-text
{
    color: #C6BFBF;
}

.copyright-hr
{
    border: 0;
    height: 1px;
    background-color: #2A2E37;
    margin: 0;
}




/* ----------- STATS ----------- */
@media (min-width: 992px) {
    .home-info-card {
        border-radius: 0 !important;
    }
}



/* ----------- HOME ----------- */
.transition_all_03s {
    transition: all .3s ease;
}

.backface_visibility_hidden {
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

*, *:before, *:after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

.swiper-container {
    width: 100%; /* Container grows with the screen size */
    aspect-ratio: 685 / 470; /* This maintains the aspect ratio */
    transition: opacity .6s ease;
    max-width: 100%; /* Adjust this to your desired maximum size if needed */
    height: auto;
}

.swiper-container.swiper-container-coverflow {
    /*padding-top: 2%; */
}

.swiper-container.loading {
    opacity: 0;
    visibility: hidden;
}

.swiper-container:hover .swiper-button-prev,
.swiper-container:hover .swiper-button-next {
    transform: translateX(0);
    opacity: 1;
    visibility: visible;
}

.swiper-slide {
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.swiper-slide .entity-img {
    display: none;
}

.swiper-slide .content {
    position: absolute;
    top: 40%;
    left: 0;
    width: 50%;
    padding-left: 5%;
    color: #fff;
}

.swiper-slide .content .title {
    font-size: 2.6em;
    font-weight: bold;
    margin-bottom: 30px;
}

.swiper-slide .content .caption {
    display: block;
    font-size: 13px;
    line-height: 1.4;
}

[class^="swiper-button-"] {
    width: 44px;
    opacity: 0.5;
    visibility: hidden;
    transition: all .3s ease;
}

:root {
    --swiper-theme-color: #fff !important; /* Change the theme color to white */
}

.swiper-button-next,
.swiper-button-prev {
    transition: color 0.3s ease !important; /* Smooth hover effect */
}

.swiper-button-next:hover,
.swiper-button-prev:hover {
    color: white !important; /* Set hover color to white */
    opacity: 1 !important;
    transition: color 0.3s ease, opacity 0.3s ease !important; /* Smooth transition for color and opacity */
}

.popularCoursesSwiper > .swiper-button-next
{
    transform: translateX(-150px);
}

.swiper-button-prev {
    left: -80px !important; /* Move it outside the left of the container */
}

.swiper-button-next {
    right: -40px; /* Move it outside the right of the container */
}


.swiper-button-prev {
    transform: translateX(50px);
}

.swiper-button-next {
    transform: translateX(-50px);
}


.swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet:hover,
.swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet-active {
    opacity: 1;
}

.swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet-active::before {
    border-width: 1px;
}

@media (max-width: 1180px) {
    .swiper-slide .content .title {
        font-size: 25px;
    }

    .swiper-slide .content .caption {
        font-size: 12px;
    }
}

@media (max-width: 1023px) {
    .swiper-container {
        width: 100%;
        height: 50vh; /* Adjust this value as needed */
        transition: opacity .6s ease;
    }

    .swiper-container.swiper-container-coverflow {
        padding-top: 0;
    }
}



.carousel-item {
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    width: 100%;
    opacity: 0;
    transform: translateY(20px);
}

.carousel-item.active {
    opacity: 1;
    transform: translateY(0);
    position: relative;
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideOut {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        transform: translateY(-20px);
    }
}

.carousel-item.active.carousel-item-start,
.carousel-item.active.carousel-item-end {
    animation: slideOut 0.75s ease forwards;
}


.carousel-indicators {
    display: none; /* Hide the carousel indicators */
}

.carousel-control-prev, .carousel-control-next {
    display: none; /* Hide the carousel control icons */
}



/* ----------- FILTERS ----------- */
.filter-white
{
    filter: brightness(0) invert(1);
}

.blend-overlay
{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0.7; /* Adjust as needed */
    mix-blend-mode: multiply; /* Blend mode */
}




/* ----------- COURSES ----------- */
.background-courses {
    background: #403333D9;
    position: relative;
}

.background-courses::before {
    content: "";
    position: absolute;
    top: 295px;
    width: 50%;
    left: 50%;
    transform: translateX(-50%) scale(1.1);
    height: 407px;
    background: inherit;
    filter: blur(320px);
    border-radius: 50%;
    z-index: -1;
}

.background-courses-texture
{
    background-image: url('/assets/img/courses-bg-texture.svg');
    margin-top: 350px;
    opacity: 50%;
    width: 100%;
    height: 491px;
}

.courses-popular-card
{
    background-color: #2A2D32;
}

#verticalcard
{
    background-color: #2A2D32;
}

.courses-popular-card-title
{
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 18px;
    line-height: 27px;
}


.scrollable-filters {
    display: block;
    overflow-x: auto; /* Enable horizontal scroll */
    white-space: nowrap; /* Keep buttons on a single line */
    scrollbar-width: none; /* Hide scrollbar in Firefox */
    padding-bottom: 10px; /* optional for better appearance */
    -webkit-overflow-scrolling: touch;
}

/* Hide scrollbar in Chrome, Safari, Edge */
.scrollable-filters::-webkit-scrollbar {
    display: none;
}

.scrollable-filters .btn {
    flex-shrink: 0; /* Prevent buttons from shrinking */
    margin-right: 10px; /* Add space between buttons */
}

@media (max-width: 768px) {
    .scrollable-filters {
        padding-bottom: 10px; /* Prevent buttons from getting cut off on mobile */
    }
}



/* ----------- COURSE DETAILS PAGE ----------- */
.detail-banner {
    position: relative;

    overflow: hidden;
}



.parallax {
    background-image: url("/assets/img/course/diksiyon-mennan-sahin/mennansahin.webp"); /* Phone and tablet image */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 60vh;
    bottom: 0;
    background-size: cover;
    background-position: center;
    background-attachment: fixed; /* This creates the parallax effect */
    transform: translateY(0);
}

@media (min-width: 992px) { /* Adjust this value based on your design breakpoints for desktop */
    .parallax {
        background-image: url("/assets/img/course/diksiyon-mennan-sahin/mennansahin-wide.webp"); /* Desktop image */

    }
}

.overlay {
    position: absolute;
    top: 219px;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to bottom, rgba(20, 22, 26, 0.0) 0%, rgba(20, 22, 26, 1) 100%);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    z-index: 1;
}

.overlay-1 {
    position: absolute;
    top: 219px;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to bottom, rgba(20, 22, 26, 0.0) 0%, rgb(20, 22, 26) 100%);    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    z-index: 1;
}

.overlay-text
{
    position: absolute;
    top: 20%;
    left: 0;
    right: 0;
    bottom: 0;
}

.overlay-full {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    height: 100%;

    background: linear-gradient(
            to bottom,
            rgba(20, 22, 26, 0.64) 0%,  /* En üst: %64 opak */
            rgba(20, 22, 26, 0.84) 50%, /* Orta: %84 opak */
            rgba(20, 22, 26, 1) 90% /* En alt: Tam opak */
    );
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}



@media (max-width: 768px) {
    .overlay-text
    {
        top: 9% !important;
    }
}



.overlay-top {
    position: absolute;
    top:40px;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to top, rgba(20, 22, 26, 0.0) 0%, rgba(20, 22, 26, 1) 100%);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    z-index: 1;
    height: 50px;
}


/* Mobile adjustments */
@media (max-width: 768px) {
    .parallax {
        background-size: 100%;
        background-attachment: scroll; /* Prevents fixed position issues on mobile */
        background-repeat: no-repeat;
        height: auto;
        background-color: rgba(1,1,1,0.6);
        background-blend-mode: overlay;
    }
    .detail-banner
    {
        min-height: 400px; /* Adjust as needed for your design */

        /*height: auto; */
    }
}
@media (min-width: 768px) {
    .detail-banner
    {
        height: 60vh; /* Full height of the viewport */
    }
}



.text {
    color: white;
    text-align: center;
    z-index: 1; /* Ensures text stays above the overlay */
}


.text h1 {
    font-size: 7vw; /* Base size using viewport width */
    margin: 0;
    line-height: normal;
}

.text p {
    font-size: 1.2em;
}

/* Adjust for larger screens */
@media (min-width: 768px) {
    .text h1 {
        font-size: 3.5rem; /* Larger size for tablets and small desktops */
    }
}

/* Adjust for very large screens */
@media (min-width: 1200px) {
    .text h1 {
        font-size: 4rem; /* Larger size for large desktops */
    }
}


.form-container {
    position: fixed;
    top: 50%;
    right: -300px;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    z-index: 100;
    transition: transform 0.4s ease;
}

.form-container.expanded {
    transform: translateY(-50%) translateX(-300px); /* Form açıldığında sola kayar */
}

.toggle-button {

    background: linear-gradient(45deg, #ff7f50, #ff4500);
    color: white;
    font-size: 1.2rem;
    padding: 0.5rem 1.5rem;
    border: none;
    border-top-left-radius: 12px;
    border-bottom-left-radius: 0;
    border-top-right-radius: 12px;
    border-bottom-right-radius: 0;
    transform: rotate(-90deg);
    transform-origin: center right;
    cursor: pointer;
    transition: all 0.4s ease;
    white-space: nowrap;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    margin-right: 22px;
}

.form-content {
    width: 300px;
    padding: 1rem;
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.form-container.expanded .form-content {
    display: block;
}

/* Hover Effect */
.toggle-button:hover {
    scale: 1.1;
    box-shadow: 0 0 10px 2px rgba(255, 69, 0, 0.7);
}

/* Optional: Focus Styles */
.toggle-button:focus {
    outline: none;
    box-shadow: 0 0 10px 2px rgba(255, 69, 0, 0.7);
}

/* ----------- COURSE DETAIL ACCORDION ----------- */
/* Scrollable container */
#courseAccordion {
    max-height: 400px; /* Adjust this height as needed */
    overflow-y: auto; /* Enables vertical scrolling */
    border: 1px solid #ccc; /* Optional: adds a border to define the area */
    padding-right: 10px; /* Add some padding to avoid scrollbar overlapping content */
    background-color: var(--neutral-800);
}

#courseAccordion > .accordion-item
{
    border:none;
    padding-bottom: 5px;
    --bs-accordion-bg: #343a40;
}

/* adjust courseAccordion height on mobile */
@media (max-width: 768px) {
    #courseAccordion {
        max-height: 150px; /* Adjust this height as needed */
    }
}

/* Adjusted padding and font sizes for a more compact look */
.accordion-button {
    padding: 0.4rem 0.8rem;
    font-size: 0.85rem;

}

.accordion-body {
    padding: 0.5rem 0.8rem;
    font-size: 0.8rem;
}


.accordion-header {
    font-size: 0.85rem;
}

.bg-course-topics
{
    background-color: #2A2D32;
    border-color: #2A2D32;
}

.bg-light-gray
{
    background-color: #454952;
}


.course-topic-border-color
{
    border-color: #2A2D32;
}

/* Accordion Header Background and Text */
.accordion-button {
    background-color: #343a40; /* Dark background */
    color: #fff; /* White text */
}

.accordion-button:not(.collapsed) {
    background-color: #343a40; /* Active header background */
    color: #fff; /* Active header text color */
}

/* Collapsed Button Background */
.accordion-button.collapsed {
    background-color: #343a40; /* Light grey background for collapsed state */
    color: #fff; /* Text color */
}

.accordion-body
{
    background-color: #343a40;
    color: white;
}


.lecturer-section {
    text-align: justify;
    margin: 0 auto;
}

.lecturer-photo img {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border: 2px solid #F84004;
}

.lecturer-name {
    font-size: 1.5em;
    font-weight: bold;
    line-height: normal;
}

.lecturer-job {
    font-size: 1.2em;
    color: #555;

}

.lecturer-about {

    font-size: 0.9em;
    color: #333;
}

.lecturer-info {
    display: flex;
    flex-direction: column;
}

.course-lecturer
{
    color: white;
    opacity: 0.6;
}


.background-secondary
{
    background-color: #2A2D32;
}


.sticky-apply-button {
    position: fixed;
    bottom: 20px;
    z-index: 1050; /* Ensures it appears on top of other elements */
    padding: 10px 20px;
    font-weight: bold;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
    width: 90vw;
    left: 50%;
    transform: translateX(-50%);
}

#courseAccordion > .accordion-item > .accordion-header > .accordion-button.collapsed , .accordion-button:not(.collapsed)  , #courseAccordion > .accordion-item
{
    background-color: var(--neutral-800);
}

.collapse-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease, padding 0.5s ease;
}

.collapse-content.show {
    max-height: 1000px; /* Arbitrary large height for animation */
    padding-top: 1rem;
    padding-bottom: 1rem;
}

@media (min-width: 992px) {
    .collapse-content {
        max-height: none !important;
        overflow: visible !important;
    }

    .text-center.d-lg-none {
        display: none;
    }
}

.modal-content {
    background-color: #343a40; /* Bootstrap's dark background */
}

.modal-header {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1); /* Optional: border for separation */
}

.modal-body {
    padding: 20px; /* Add some padding */
}

#CoursesCarouselControlNext , #CoursesCarouselControlPrev
{
    display: block;
}



/* if screen small make height 60px, if large make it 96px */
@media (max-width: 576px)
{
    .course-features-box
    {
        height: 60px !important;
        border-radius: 6px !important;
    }

}

@media (min-width: 992px)
{
    .course-features-box
    {
        height: 96px !important;
        border-radius: 16px !important;
    }
}



#ozel-indirimler > div
{
    background-color: rgba(248, 64, 4, 0.12);
    border: 2px solid var(--primary-300)
}

.orange-box
{
    background-color: rgba(248, 64, 4, 0.12);
    border: 2px solid var(--primary-300)
}

.form-background {
    background-color: #25282C;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.form-control-dark {
    background-color: #2F3338;
    border: 1px solid #454A52;
    color: #fff;
}

.form-control:focus {
    border-color: #454A52;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.form-control::placeholder {
    color: #AFAEB5;
}


@media (prefers-color-scheme: dark) {
    .iti {
        --iti-border-color: #5b5b5b;
        --iti-dialcode-color: #999999;
        --iti-dropdown-bg: #0d1117;
        --iti-arrow-color: #aaaaaa;
        --iti-hover-color: #30363d;
    }
}

@media (prefers-color-scheme: dark) {
    input {
        color: white;
        background-color: #0d1117;
    }
    input {
        border-color: #5b5b5b;
    }
    input::placeholder {
        color: #8d96a0;
    }
}

.info-container {
    display: flex;
    align-items: center;
    gap: 16px; /* Adjust spacing between items as needed */
}

.separator {
    color: #FF784D; /* Set the separator color */
    font-size: 1.2em; /* Adjust size if needed */
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0; /* Ensures no extra space around the separator */
    padding: 0 8px; /* Equal spacing on both sides */
}

.info-item {
    white-space: nowrap; /* Prevent line breaks */
}

.box-shadow-white {
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.4) !important;
}


.hidden-reference {
    position: static; /* Default position */
    opacity: 1;
    transition: opacity 0.5s ease;
    visibility: visible;
}

.hidden-reference.fade-in {
    opacity: 1;
    animation: fadeIn 0.5s ease forwards;
}

.hidden-reference.fade-out {
    position: absolute; /* Prevent layout shift */
    opacity: 0;
    animation: fadeOut 0.5s ease forwards;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeOut {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        transform: translateY(-10px);
    }
}


.text-regular
{
    font-weight: normal !important;
}



.avatar-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 150px; /* Adjust size as needed */
    height: 150px;
    border-radius: 50%;
    background-color: var(--neutral-200); /* Neutral background color */
    overflow: hidden;
    position: relative;
    text-align: center;
    font-family: Arial, sans-serif;
}

.avatar-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.avatar-placeholder-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: var(--neutral-500); /* Text color */
    font-size: 14px;
    font-weight: bold;
    display: none; /* Initially hidden */
}

.avatar-container img[src="https://via.placeholder.com/150"] + .avatar-placeholder-text {
    display: block; /* Show placeholder text only when the image is the placeholder */
}


.card-contact-form
{
    max-width: 430px;
}

.iti--inline-dropdown
{
    width: 100%;
}

.lecturersSwiper > .swiper-wrapper
{
    height: 350px !important;
}

.lecturersSwiper
{
    height: 375px;
}

.gallerySwiper
{
    aspect-ratio: unset;
}


.reference:hover
{
    transform: scale(1.1);
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.4) !important;

}

.reference
{
    transition: transform 0.3s ease, box-shadow 0.5s ease;

}


.object-position-top
{
    object-position: top;
}




.custom-title-button {
    font-size: 1.5rem; /* Larger font size */
    font-weight: bold; /* Bold text */
    text-align: center; /* Center text */
    width: 100%; /* Full width */
    color: white; /* Text color */
    background-color: transparent; /* Transparent background */
    border: none; /* Remove border */
    padding: 1rem; /* Add padding */
}

.custom-title-button:not(.collapsed) {
    background-color: transparent; /* Keep background transparent when expanded */
}

.custom-title-button:focus {
    box-shadow: none; /* Remove focus shadow */
}

.storefront-breadcrumb-wrapper {
    background: transparent;
    border-bottom: none;
}

.storefront-breadcrumb {
    padding: 0.75rem 0;
    font-size: 0.9rem;
}

.storefront-breadcrumb .breadcrumb {
    --bs-breadcrumb-divider: '›';
    margin-bottom: 0;
    background-color: transparent;
    padding-left: 0;
    padding-right: 0;
}

.storefront-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
    color: #6c757d;
    font-weight: 600;
}

.storefront-breadcrumb .breadcrumb-item,
.storefront-breadcrumb .breadcrumb-item span {
    color: #ff6f00;
}

.storefront-breadcrumb .breadcrumb-item a {
    color: #ff6f00;
    text-decoration: none;
    font-weight: 600;
}

.storefront-breadcrumb .breadcrumb-item:not(.active) span {
    color: #ff6f00;
    font-weight: 600;
}

.storefront-breadcrumb .breadcrumb-item a:hover {
    text-decoration: underline;
}

.storefront-breadcrumb .breadcrumb-item.active {
    color: #fff;
    font-weight: 600;
}