.heroSectionImg {
    width: 34rem;
}

.mediaImg,
.webDesignImg,
.engineImg {
    width: 50rem;
}

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

.cont-bg {
    background-color: var(--primaryColor);
}

.bg-org {
    background-color: var(--teriaryColor);
}

.btn {
    background-color: var(--teriaryColor);
    font-size: 1.4rem;
}

.btn:hover {
    background-color: var(--darkColor);
    color: var(--teriaryColor);
}

.last-btn {
    background-color: var(--primaryColor);
    color: var(--lightColor);
    font-size: 1.4rem;
}

.last-btn:hover {
    background-color: var(--teriaryColor);
    color: var(--primaryColor);
    font-size: 1.4rem;
}

.navbar-brand {
    width: 15rem;
}

.nav-icons {
    color: var(--teriaryColor);
}

.nav-contact a {
    color: var(--lightColor);
}

.nav-icons:hover {
    color: var(--lightColor);
}

.nav-links {
    color: var(--lightColor);
}

.img {
    width: 40rem;
}

.hero_display-4 {
    font-family: var(--ffPrimary);
    font-size: 5rem;
    color: var(--lightColor);
}

.hero-lead {
    font-family: var(--ffPrimary);
    font-size: 1.5rem;
    color: var(--lightColor);
}

.display-4 {
    font-family: var(--ffPrimary);
    font-size: 4.5rem;
    color: var(--primaryColor);
}

.lead {
    font-family: var(--ffPrimary);
    font-size: 1.5rem;
    color: var(--secondaryColor);
}

.Contact-display-4 {
    font-family: var(--ffPrimary);
    font-size: 4.5rem;
    color: var(--lightColor);
}

.number {
    background-color: var(--teriaryColor);
    width: 40px;
    height: 40px;
    color: var(--lightColor);
    font-size: 1.8rem;
}

.card-title {
    font-family: var(--ffTertiary);
    font-size: 1.8rem;
    color: var(--primaryColor);
}

.last-card-title {
    font-family: var(--ffTertiary);
    font-size: 4.5rem;
    color: var(--lightColor);
}

.card-text {
    font-family: var(--ffPrimary);
    font-size: 1.5rem;
    color: var(--secondaryColor);
}

h3 {
    font-size: 4rem;
    color: var(--teriaryColor);
}

.footer-tittle {
    font-family: var(--ffTertiary);
    font-size: 1.5rem;
    color: var(--primaryColor);
}

.footer-list-items,
a,
.footer-text {
    font-family: var(--ffPrimary);
    font-size: 1.5rem;
    color: var(--primaryColor);
}

.footer-icon {
    font-size: 2rem;
    color: var(--primaryColor);
}

.footer-icon:hover {
    color: var(--teriaryColor);
}

.footer-list-items a:hover {
    text-decoration: underline;
    color: var(--teriaryColor);
}

/* for Responsive Target the ROW Code (display:grid) */

/* Small devices (landscape phones, upto 576px and below) */
/* @media (width <=576px) */
@media (max-width: 576px) {

    .nav-media,
    .nav-contact,
    .nav-contact a,
    .form-inline {
        display: none;
    }

    .navbar-toggler {
        background-color: var(--lightColor);
    }

    .last-card-title {
        font-family: var(--ffTertiary);
        font-size: 2.5rem;
        color: var(--lightColor);
    }
}

@media (width >=577px) and (width <=768px) {

    .nav-media,
    .nav-contact,
    .nav-contact a,
    .form-inline {
        display: none;
    }

    .navbar-toggler {
        background-color: var(--lightColor);
    }
}