:root {
    --theme-color: #ff4c99;
    --theme-color-2: #a8d000;
    --theme-color-3: #eeffbe;
    --theme-color-4: #2a0415;
    --main-font: "Comic Relief", system-ui;
    --secondary-font: "Lacquer", system-ui;
    --cabin-font: "Cabin Sketch", sans-serif;
    --rubik-font: "Rubik Dirt", system-ui;
    --rubik2-font: "Rubik Moonrocks", sans-serif;
    --poppins-font: "Poppins", sans-serif;
}

@media (max-width: 1200px) {
    .navbar {
        padding: 10px;
    }

    .navbar-nav .nav-link {
        font-size: 16px;
    }
}

@media (max-width: 992px) {
    .navbar-nav .nav-item {
        margin-bottom: 10px;
    }

    .navbar-nav .nav-link {
        font-size: 18px;
    }

    img {
        max-width: 100%;
        height: auto;
    }
}

@media (max-width: 576px) {
    .navbar {
        padding: 2px;
    }

    .navbar-nav .nav-link {
        font-size: 14px;
    }

    h1 {
        font-size: 24px;
    }

    p {
        font-size: 14px;
    }
}

@media (max-width: 768px) {
    .secondary-navbar .right-nav-part {
        font-size: 12px;
    }
    section {
        padding: 30px 0;
    }
    span.nav-icon.border-right {
        border: none;
        padding: 0;
        position: relative;
    }
    .secondary-navbar span.nav-icon a {
        justify-content: center;
        margin: 5px 0;
        font-size: 12px;
    }

    .btn-button {
        padding: 10px 20px;
        font-size: 14px;
    }
    .btn-buttons {
        font-size: 14px;
    }
    .btn-sec {
        display: flex;
        flex-wrap: wrap;
        flex-direction: column;
        gap: 20px;
    }
    .nav.nav-tabs .nav-link {
        display: block;
        border: 1px solid #666;
        border-radius: 0;
        width: 100%;
        margin-bottom: 10px;
    }
    .nav.nav-tabs .nav-link.active {
        border: 1px solid var(--theme-secondary-color);
    }
    img.footer-logo {
        width: 90px;
    }
    footer.footer-main a {
        font-size: 14px;
    }
    footer.footer-secondary {
        padding: 10px 0;
    }
    footer.footer-secondary p {
        font-size: 10px;
    }

    .header-social-media {
        display: none !important;
    }
    .right-nav-part {
        justify-content: center;
        margin-top: 10px;
        border-top: 1px solid #ddd;
        padding-top: 10px;
        padding-bottom: 10px;
    }

    img.main-logo {
        width: 100px;
    }
    .navbar-toggler:focus {
        box-shadow: none;
    }
    .navbar-nav {
        background: #01a850;
        padding: 20px 0;
    }
    .navbar-nav .nav-link {
        font-size: 14px;
        border-bottom: 1px solid #ddd;
        padding: 10px !important;
    }
    .sub-heading {
        font-size: 12px;
    }

    h2.heading {
        font-size: 18px;
    }
    h4.footer-title {
        margin-bottom: 10px;
        font-size: 16px;
        margin-top: 20px;
    }
    .navbar-nav .dropdown-menu {
        min-width: 100% !important;
        padding: 6px !important;
        border-radius: 0;
    }
    h4.heading {
        font-size: 20px;
    }
    .footer-bottom-text {
        font-size: 12px;
    }
    .footer-bottom-text .col-md-6 {
        margin-top: 4px;
    }
    .form-section {
        padding: 10px;
        border-radius: 10px;
    }
    .form-heading {
        padding: 10px;
    }
    h4.form-title {
        font-size: 18px;
    }
    label.form-label {
        font-size: 13px;
    }
    .form-area .form-control {
        font-size: 14px;
        padding: 10px;
    }
    .forms-area {
        padding: 10px;
    }
    img.pot-image-form {
        position: absolute;
        height: 100px;
        width: auto;
        bottom: 0px;
        left: 0px;
        z-index: 2;
    }
    img.lady-image-form {
        position: relative;
        height: 200px;
        width: auto;
        bottom: -25px;
        right: 0px;
        z-index: 2;
        float: inline-end;
    }

    img.boy-image-form {
        position: absolute;
        height: 200px;
        width: auto;
        bottom: 0;
        right: 0;
        left: auto;
        z-index: -1;
    }
    .pot2-image-form {
        position: absolute;
        height: 100px;
        width: auto;
        bottom: 0px;
        left: 5%;
        z-index: 1;
    }
    .reg-cont-title {
        font-size: 20px;
    }
    h2.sub-desc {
        font-size: 22px;
    }
    section.login-page {
        padding: 60px 0;
        min-height: 100vh;
        background-position: right;
        background-size: cover;
        display: grid;
        align-items: baseline;
    }
    section.login-page .card-body {
        z-index: 4;
    }
    .login-form-sec {
        padding: 0px;
        position: relative;
        z-index: 2;
    }

    img.img-shapes.img-top-sun {
        width: 100px;
    }
    img.img-shapes.img-giraffe {
        width: 200px;
    }
    img.img-shapes.img-cloud-3 {
        width: 100px;
    }
    img.img-shapes.img-cloud-5 {
        width: 100px;
        top: 4%;
        right: 0;
    }
    img.img-shapes.img-cloud-4 {
        width: 100px;
        top: 10%;
        left: 0;
    }
    img.img-shapes.img-cloud-1 {
        width: 60px;
        right: -10px;
    }
    img.img-shapes.img-cloud-2 {
        width: 60px;
        left: -10px;
        bottom: 45%;
    }
    img.img-shapes.img-tree-right {
        width: 65px;
        left: -10px;
        bottom: 20%;
    }
    img.img-shapes.img-tree-left {
        bottom: 30%;
        right: -10px;
        width: 60px;
        height: auto;
    }
    img.img-shapes.img-shrub-right {
        bottom: -10px;
        left: -10px;
        width: 120px;
        object-position: bottom;
        z-index: -1;
    }
    img.img-shapes.img-hippo {
        width: 300px;
    }
    img.img-shapes.img-shrub-left {
        width: 150px;
    }
    img.img-shapes.img-crane {
        width: 30px;
        bottom: 40px;
        right: -22px;
    }
    .mbl-small {
        font-size: 12px;
    }
    .parents-card {
        padding: 5px;
    }
    .parents-heading h4 {
        font-size: 15px;
        margin: 10px;
    }

    img.bg-shape.shape-img-1 {
        width: 80px;
        top: 20%;
        left: 0;
    }
    img.bg-shape.shape-img-2 {
        width: 80px;
        bottom: 5%;
        left: 0;
        right: 0;
        margin: 0 auto;
    }
    img.bg-shape.shape-img-3 {
        width: 80px;
        bottom: 5%;
        left: 20%;
        right: 0;
        margin: 0 auto;
    }
    img.bg-shape.shape-img-4 {
        width: 100px;
        bottom: 25%;
        right: -8%;
        margin: 0 auto;
        z-index: -1;
        rotate: 70deg;
    }
    img.bg-shape.shape-img-5 {
        width: 100px;
        top: 23%;
        left: -80px;
        z-index: -1;
    }
    img.bg-shape.shape-img-6 {
        width: 200px;
        bottom: -10%;
        left: 12%;
        z-index: -1;
    }
    img.bg-shape.shape-img-7 {
        width: 100px;
        bottom: -30px;
        right: 5%;
    }
    img.bg-shape.shape-img-8 {
        width: 100px;
        right: 0;
        bottom: 25%;
    }
    img.bg-shape.shape-img-9 {
        width: 100px;
        top: -30%;
        left: 0;
        right: 0;
        rotate: -90deg;
        margin: 0 auto;
        z-index: -1;
    }
    img.bg-shape.shape-img-10 {
        width: 100px;
        bottom: 0;
        left: 48%;
        z-index: -1;
    }
    img.bg-shape.shape-img-12 {
        width: 60px;
        right: 0;
        margin: 0 auto;
        bottom: 0;
    }
    img.bg-shape.shape-img-13 {
        width: 150px;
        bottom: -35px;
        right: 19%;
    }
    img.bg-shape.shape-img-14 {
        width: 150px;
        bottom: 0;
        left: 0;
    }
    img.bg-shape.shape-img-15 {
        width: 100px;
        bottom: -50px;
        right: 10%;
    }
    img.bg-shape.shape-img-16 {
        width: 150px;
        top: 0;
        right: 0;
    }
    img.bg-shape.shape-img-17 {
        width: 100px;
        bottom: -50px;
        right: 0;
    }
    img.bg-shape.shape-img-18 {
        width: 100px;
        bottom: 18%;
        left: 2%;
        margin: 0 auto;
    }
    img.bg-shape.shape-img-19 {
        width: 70px;
        top: 0;
        right: 25%;
    }
    img.bg-shape.shape-img-20 {
        width: 80px;
        top: 0;
        left: 0;
    }
    img.bg-shape.shape-img-21 {
        width: 80px;
        bottom: 25%;
        right: -6%;
        top: auto;
    }
    img.bg-shape.shape-img-22 {
        width: 80px;
        bottom: 10%;
        right: 0%;
        top: auto;
    }
    img.bg-shape.shape-img-23 {
        width: 100px;
        top: 135px;
        left: 60px;
        z-index: -1;
        transform: rotate(45deg);
    }
}