html, body {
  overflow-x: hidden;
  width: 100%;
  position: relative;
}

/* 1. Genel Renk Ayarları (#38b6ff) */
:root {
  --primary-color: #38b6ff;
  --primary-dark: #1e9de0;
  --primary-white: #ffffff;
}

/* Porto'nun ana renklerini eziyoruz */
html .text-color-primary {
  color: var(--primary-color) !important;
}
html .text-color-white {
  color: var(--primary-white) !important;
}
html .bg-color-primary {
  background-color: var(--primary-color) !important;
}
html .btn-primary {
  background-color: var(--primary-color) !important;
  border-color: var(--primary-color) !important;
}
html .btn-primary:hover {
  background-color: var(--primary-dark) !important;
  border-color: var(--primary-dark) !important;
}
html .header .header-nav-main nav > ul > li > a.active {
  color: var(--primary-color) !important;
}

/* 2. Çocuk Çizimleri Dekorasyonları */

/* Başlıkların yanına çizim ekler */
.title-drawing::after {
  content: "";
  display: inline-block;
  width: 40px;
  height: 40px;
  background-image: url("../img/cizimler/cizim-1.svg"); /* Buraya ikon koymalısın */
  background-size: contain;
  background-repeat: no-repeat;
  margin-left: 10px;
  vertical-align: middle;
}

/* Butonların kenarına çizim ekler */
.btn-drawing {
  position: relative;
  overflow: visible;
}
.btn-drawing::before {
  content: "";
  position: absolute;
  top: -15px;
  right: -15px;
  width: 30px;
  height: 30px;
  background-image: url("../img/cizimler/cizim-2.png"); /* Buraya ikon koymalısın */
  background-size: contain;
  background-repeat: no-repeat;
  z-index: 1;
}

/* Breadcrumb altı çizgi yerine çizmi */
.page-header {
  border-bottom: 5px solid var(--primary-color);
  background-image: url("../img/cizimler/bg-pattern.png"); /* Hafif bir desen */
  padding: 15px 0 !important;
  margin-bottom: 5px !important;
}

.page-header.page-header-sm {
    padding: 15px 0 !important;
}

.page-header.page-header-lg {
    padding: 25px 0 !important;
}

.page-header.page-header-modern.page-header-md {
    padding: 25px 0 !important;
}

.page-header.page-header-modern.page-header-lg {
    padding: 32.5px 0 !important;
}

.page-header.page-header-modern.page-header-background {
    padding: 65px 0 !important;
}

.page-header.page-header-modern.page-header-background.page-header-background-sm {
    padding: 25px 0 !important;
}

.page-header.page-header-modern.page-header-background.page-header-background-md {
    padding: 35px 0 !important;
}

.page-header.page-header-modern.page-header-background.page-header-background-lg {
    padding: 125px 0 !important;
}

/* 3. Mobile Responsiveness Fixes */
@media (max-width: 991px) {
    /* Hero Heading Fix */
    .custom-hero-heading {
        font-size: 10vw !important;
        line-height: 1.1 !important;
    }
    .custom-hero-heading em {
        -webkit-text-stroke: 1px #FFF !important;
    }

    /* Fix Porto Big Titles (Background texts) */
    .porto-big-title {
        font-size: 15vw !important;
        letter-spacing: -2px !important;
        opacity: 0.05 !important;
    }

    /* General background text scaling */
    [data-text]::after, 
    [data-text]::before {
        font-size: 12vw !important;
        max-width: 100vw !important;
        overflow: hidden !important;
    }

    /* Section Height Adjustments */
    .custom-row-about .col-12,
    .custom-col-about-bg {
        height: auto !important;
        min-height: 300px !important;
    }
/* Past Courses Page Refinements */
.img-past-course {
    border: 2px solid #0088cc !important;
    border-radius: 15px !important;
    padding: 3px;
    background-color: #fff;
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.img-square-wrap {
    display: block !important;
    aspect-ratio: 1 / 1 !important;
    overflow: hidden !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 15px !important;
    border: 2px solid #0088cc !important;
    position: relative;
}

.img-square-wrap img, 
.img-square-wrap .img-past-course {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}

.img-past-course:hover {
    transform: scale(1.03);
    box-shadow: 0 4px 15px rgba(0, 136, 204, 0.3);
}

    .custom-col-about-bg-text {
        position: relative !important;
        top: 0 !important;
        transform: none !important;
        padding: 40px 20px !important;
    }

    /* Horizontal Overflow Prevention */
    .container, .container-fluid {
        max-width: 100vw !important;
        overflow-x: hidden !important;
    }

    /* Header adjustments */
    #header .header-logo img {
        width: 100px !important;
        height: auto !important;
    }

    /* Countdown stack fix */
    .custom-countdown.text-10 {
        font-size: 2rem !important;
    }
}

@media (max-width: 575px) {
    .custom-hero-heading {
        font-size: 12vw !important;
    }
    
    .custom-hero {
        height: auto !important;
        padding-top: 100px !important;
        padding-bottom: 60px !important;
    }

    #davet p {
        font-size: 0.95rem !important;
        line-height: 1.5 !important;
    }
}