/* ==== CSS FOR ALL PAGE  ==== */
html {
    scroll-behavior: smooth;
    overflow-x: hidden;
}

body {
    font-family: 'Pangolin', cursive;
    overflow-x: hidden;
    background-image: url('../images/background-img/square-pattern-second.png');
    background-position: center !important;
}

/* Scrollbar Style */
::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: #ebebeb;
}

::-webkit-scrollbar-thumb {
    background: #52a67f;
}

.mirror-img {
    transform: rotateY(180deg);
}

/* Color & Background Color */
.color-1 {
    color: #52a67f;
}

.color-2 {
    color: #d3d3d3 !important;
}

.color-3 {
    color: #457C62;
}

.color-4 {
    color: #000000;
}

.bg-color-1 {
    background-color: #52a67f;
}

.bg-color-2 {
    background-color: #31AE74;
}

/* Navbar (For All Page) */
.navbar {
    background-image: url('../images/background-img/bg-header.jpg');
    box-shadow: 0px 0px 25px rgba(0, 0, 0, 0.25);
}

.dropdown-menu a {
    color: #52a67f !important;
}

.dropdown-menu a:hover {
    background-color: #b1dfcd;
}

.dropdown:hover .dropdown-menu {
    display: block;
}

/* Jumbotron (For All Page) */
.jumbotron {
    background-size: cover;
    background-repeat: no-repeat;
}

/* Footer (For All Page */
.footer {
    background-color: #295A42;
}

/* ==== CSS FOR INDEX.HTML ==== */
/* index.html : Subject */
.subject {
    margin-top: -65px;
    background-size: cover;
}

.subject-btn {
    background-color: #52a67f;
    border: 2px solid #52a67f;
    color: white;
    font-size: 25px;
    text-decoration: none !important;
    transition: 0.3s ease-in;
}

.subject-btn:hover {
    background-color: transparent;
    color: #52a67f;
    border: 2px solid #52a67f;
    transition: 0.3s ease-out;
}

/* index.html : About and Contact */
.about-and-contact {
    background-size: cover;
    background-repeat: no-repeat;
}

.about-and-contact-ruler-img,
.subject-triangle {
    width: 150px;
}

.about-border-bottom,
.contact-border-bottom {
    width: 200px;
}

.contact-socmed {
    color: white;
    text-decoration: none !important;
    transition: 0.3s ease-out;
}

.contact-socmed:hover {
    color: black;
    transition: 0.3s ease-in;
}

.contact-icon {
    font-size: 30px;
    color: #000000;
}

/* CSS FOR DASAR-ALJABAR.HTML */
.heading-do-you-know-part-one {
    padding-top: 45px;
}

/* dasar-aljabar.html : Do You Know (Part Two) */
.do-you-know-part-two {
    background-size: cover;
    background-repeat: no-repeat;
}

/* dasar-aljabar.html : Form Of Operation */
.form-of-operation-bottom-line-one::after,
.form-of-operation-bottom-line-two::after {
    content: '';
    border-bottom: 3px solid #52a67f;
    width: 100%;
    display: block;
    padding-top: 10px;
}

.btn-test {
    background-color: #52a67f;
    border: 2px solid #52a67f;
    color: white;
    font-size: 25px;
    text-decoration: none !important;
    transition: 0.3s ease-in;
}

.btn-test:hover {
    background-color: transparent;
    border: 2px solid #52a67f;
    color: #52a67f;
    transition: 0.3s ease-out;
}

/* Top Footer */
.top-footer-socmed {
    font-size: 30px;
}

/* CSS FOR KONVERSI-PECAHAN.html */
/* konversi-pecahan.html : Pecahan Do You Know */
.pecahan-do-you-know {
    background-size: cover;
    margin-top: -35px;
}

.do-you-know-part-one {
    margin-top: -35px;
}

.heading-pecahan-do-you-know-border-bottom {
    width: 255px;
}

.pecahan-do-you-know-ruler-img {
    position: absolute;
    right: 0;
}

/* konversi-pecahan.html : Pecahan How To Convert */
.pecahan-how-to-convert {
    background-size: cover;
    background-repeat: no-repeat;
}

.pecahan-how-to-convert-scribbles-top {
    position: absolute;
    right: 0;
}

.pecahan-how-to-convert-scribbles-bottom {
    position: absolute;
    left: 0;
}

.pecahan-how-to-convert-triangle-img {
    position: absolute;
    right: 0;
}

/* konversi-pecahan.html : Pecahan Learn With Ani And Edu */
.pecahan-learn-with-ani-and-edu {
    background-size: cover;
    background-repeat: no-repeat;
}

/* CSS FOR ABOUT-AND-CONTACT.html */
/* .about-and-contact.html */
.contact-us-link {
    color: white;
}

.contact-us-link:hover {
    color: #295A42;
    text-decoration: none;
}