/*html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}
*/

:root {
    /* fonts */
    --font-poppins: Poppins;
    --font-inter: Inter;
    --font-rubik: Rubik;
}

body {
    background-image: url(../img/Vector3.png);
    background-position-x: right;
    background-repeat: no-repeat;
    background-size: 70%;
}

.bg-bej {
    background-color: var(--color-whitesmoke);
}

.pb-30 {
    padding-bottom: 30px;
}

.pt-30 {
    padding-top: 30px;
}

.navbar-brand img {
    height: 90px;
}

.pt-50 {
    padding-top: 50px;
}

.device {
    width: 400px;
}

.metro-academy-nedir-child {
    position: absolute;
    top: 0;
    left: 0;
    background-color: var(--color-whitesmoke);
    width: 1920px;
    height: 815px;
}

.metro-academy-nedir-child1, .metro-academy-nedir-inner, .metro-academy-nedir-item, .rectangle-div {
    position: absolute;
    top: 430.92px px;
    left: 1056px;
    border-radius: var(--br-11xl);
    background-color: var(--color-chocolate);
    width: 153.84px;
    height: 153.84px;
    transform: rotate(-30deg);
    transform-origin: 0 0;
}

.designYellow {
    width: 108px;
    height: 100px;
    position: absolute;
    bottom: -20px;
    left: -30px;
}

.device-div {
    text-align: end;
}

.btn-orange {
    background-color: #EF7F22;
}

.image-div .image {
    width: -webkit-fill-available;
}

.bg-orange {
    background-color: #EF7F22;
}

.accordion-item .accordion-button {
    background-color: #EF7F22;
}

.socialmedia img {
    width: 30px;
    height: 30px;
    padding: 3px;
}

.backToTopBtn {
    position: fixed;
    bottom: 50px;
    right: 50px;
    z-index: 1;
    height: 50px;
    width: 50px;
    font-size: 20px;
    border: none;
    color: #cccccc;
    border-radius: 100%;
    transition: 0.5s;
    cursor: pointer;
}

    .backToTopBtn:not(:hover) {
        background: #1f1f1f;
    }

    .backToTopBtn:hover {
        background: #0f0f0f;
    }

    .backToTopBtn.active {
        visibility: visible;
        opacity: 1;
        pointer-events: auto;
    }

    .backToTopBtn:not(.active) {
        visibility: hidden;
        opacity: 0;
        pointer-events: none;
    }

.imgfirst {
    width: 108px;
    height: 100px;
    position: absolute;
    left: -66px;
    top: 300px;
}

.imgscnd {
    width: 108px;
    height: 100px;
    position: absolute;
    left: 275px;
    top: 40px;
}

.imgthrd {
    width: 170px;
    height: 170px;
    position: absolute;
    left: 289px;
    top: 170px;
}

.imgfourth {
    width: 79px;
    height: 79px;
    position: absolute;
    left: 289px;
    top: -38px;
}


.p-60 {
    padding: 60px;
}


.new-box {
    width: 100% !important;
    height: 413px !important;
    background-color: white;
}

.navbar-nav .nav-item a span {
    color: white;
    font-size: 25px;
}

.nav-item:hover {
    background-color: #f7a217;
    border-radius: 10px;
}

.navbar-brand {
    width: 40%;
}

.footer-dark {
    padding: 50px 0;
    color: #f0f9ff;
    background-image: url(../img/footerpic.png);
    background-repeat: no-repeat;
    background-position: bottom;
    background-size: 100%;
    background-size: cover;
    height: 520px;
}

    .footer-dark h3 {
        margin-top: 0;
        margin-bottom: 12px;
        font-weight: bold;
        font-size: 16px;
    }

    .footer-dark ul {
        padding: 0;
        list-style: none;
        line-height: 1.6;
        font-size: 14px;
        margin-bottom: 0;
    }

        .footer-dark ul a {
            color: inherit;
            text-decoration: none;
            opacity: 0.6;
        }

            .footer-dark ul a:hover {
                opacity: 0.8;
            }

    .footer-dark .item.text {
        margin-bottom: 36px;
    }

        .footer-dark .item.text p {
            opacity: 0.6;
            margin-bottom: 0;
        }

    .footer-dark .item.social {
        text-align: center;
    }


        .footer-dark .item.social > a {
            font-size: 20px;
            width: 36px;
            height: 36px;
            line-height: 36px;
            display: inline-block;
            text-align: center;
            border-radius: 50%;
            margin: 0 8px;
            color: #fff;
            opacity: 0.75;
        }

            .footer-dark .item.social > a:hover {
                opacity: 0.9;
            }

    .footer-dark .copyright {
        text-align: center;
        padding-top: 24px;
        opacity: 0.3;
        font-size: 13px;
        margin-bottom: 0;
    }

.footer-box {
    margin-top: 10%;
}

    .footer-box .social {
        margin-top: 20%;
    }

.card {
    padding: 10%;
    height: auto;
    border: none;
    border-radius: 10%;
    width: 80%;
    height: 600px;
}

    .card img {
        width: 100%;
        height: 200px;
    }

.error {
    color: red;
    size: 80%
}

.hidden {
    display: none;
}