* {
        font-family: 'Roboto', sans-serif;
}

a:hover {
        color: white;
}

.outter-grid-wrapper {
        display: flex;
        flex-direction: column;
}

.inner-wrapper {
        position: relative;
        padding-bottom: 4rem;
}

#bg-img {
        background-size: cover;
        background-position: center;
        padding-bottom: 10rem;
}

.nav-grid-wrapper {
        display: grid;
        grid-template-columns: 3fr 7fr;
        grid-template-rows: 1.5fr 1.5fr;
        grid-template-areas:
                "logo navbar"
                "logo border"
}

.upper-border-wrapper {
        grid-area: border;
        border-top: 1rem solid #ffc067;
}

.img-wrapper {
        grid-area: logo;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: white;
        padding: 3rem 3rem;
}

.resize-img {
        width: 100%;
}

.nav-link {
        font-size: 20px;
}

.nav-item {
        padding-left: 2rem;
        padding-right: 2rem;
}

.navbar {
        grid-area: navbar;
}

.social-svg {
        width: 1rem;
}

.social-wrapper {
        display: flex;
        flex-direction: row;
        margin-left: auto;
        align-items: center;
}

.social-a {
        align-items: center;
}

.background-img {
        z-index: -2;
        width: 100%;
        -webkit-transform: scaleX(-1);
        transform: scaleX(-1);
        position: absolute;
        filter: brightness(40%);
        object-fit: contain;
}

.slideshow-wrapper {
        display: grid;
        grid-template-columns: 1fr 4fr 1fr;
        grid-template-rows: 3fr;
        grid-template-areas:
                "slidebutton-left main-slidetext-wrapper slidebutton-right";
        margin-top: 4rem;
}

.slidebutton-left {
        grid-area: slidebutton-left;
        align-self: center;
        justify-self: center;
        position: relative;
}

.main-slidetext-wrapper {
        grid-area: main-slidetext-wrapper;
        display: flex;
        flex-direction: column;
        text-align: left;
        margin-right: auto;
        align-self: center;
        justify-self: center;
}

.main-slidetext-wrapper>h1 {
        font-size: 42px;
        color: var(--main-white);
        font-weight: bold;
}

.main-slidetext-wrapper>p {
        font-size: 22px;
        color: var(--main-white);
        line-height: 120%;
}

.slidebutton-right {
        grid-area: slidebutton-right;
        align-self: center;
        justify-self: center;
        position: relative;
}

.slide-button {
        background-color: #a7a7a7;
        width: 5rem;
        height: 5rem;
        border-radius: 100%;
        align-items: center;
}

.contact-button {
        font-size: 22px;
        color: var(--main-white);
        background-color: var(--main-darkgold);
        margin-right: auto;
        text-decoration: none;
        border-radius: 2rem;
        font-weight: 300;
}

.arrow-img-left {
        position: absolute;
        top: 15px;
        left: 12px;
        height: auto;
        width: 50px;
        -webkit-transform: scaleX(-1);
        transform: scaleX(-1);
}

.arrow-img-right {
        position: absolute;
        top: 15px;
        left: 18px;
        height: auto;
        width: 50px;
}

.our-services {
        display: flex;
        flex-direction: column;
        padding: 5rem 0;
}

.title-wrapper {
        grid-area: title-wrapper;
        background-color: white;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 1rem 0;
}

.title-wrapper>h1 {
        font-size: 42px;
        font-weight: 900;
        color: var(--main-black);
        letter-spacing: 0;
}

.underline-span {
        border-bottom: 20px solid var(--main-darkgold);
}

.card-wrapper {
        grid-area: card-wrapper;
        background-color: white;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 3rem;
        margin-bottom: 2rem;
}

.two-items {
        display: flex;
        flex-direction: row;
}

.spacing {
        width: 200px;
}

.spacing-2 {
        width: 200px;
}

.card-grid {
        max-width: 400px;
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        align-content: flex-end;
}

.top-circle {
        background-color: var(--main-darkgold);
        width: 150px;
        height: 150px;
        border-radius: 150px;
        margin-bottom: -75px;
        display: flex;
        justify-content: center;
        align-items: center;
}

.top-circle>img {
        height: 5rem;
        opacity: 1;
        background-color: var(--main-darkgold);
}

.card-item {
        font-size: 18px;
        box-shadow: 2px 4px 12px 3px var(--main-darkgold);
        border-radius: 20px;
        padding: 5rem 1rem;
}

.card-title {
        text-align: center;
        font-size: 24px;
        font-weight: bold;
}

.card-p {
        font-size: 18px;
        text-align: center;
}

.info-wrapper {
        grid-area: info-wrapper;
        padding: 5rem 3rem;
        display: flex;
        flex-direction: row;
        justify-content: center;
}

.spacing-2 {
        width: 0;
}

.info-wrapper>* {
        flex-basis: 100%;
}

.infotext-wrapper {
        padding-bottom: 2rem;
}

.infotext-title {
        margin: 0 auto 1rem 0;
        display: inline-block;
        font-size: 24px;
        color: var(--main-black);
        padding-bottom: .5rem;
        line-height: 110%;
        border-bottom: 10px solid var(--main-darkgold);
}

.infotext-title>span {
        font-weight: 900;
}

.infotext-p {
        font-size: 18px;
        color: rgb(124, 124, 124);
        line-height: 110%;
        font-weight: 400;
}

.infotext-p>p {
        padding-bottom: 1rem;
}


.infotext-button {
        font-size: 20px;
        margin-right: auto;
        color: var(--main-white);
        background-color: var(--main-darkgold);
        text-decoration: none;
        border-radius: 2rem;
        font-weight: 300;
        padding: 0.5rem 2rem;
}

.video-wrapper {
        display: flex;
        justify-content: center;
        align-items: center;
}

video {
        width: 100% !important;
        height: auto !important;
}

.accounts-news {
        display: grid;
        grid-template-rows: 1fr 1fr;
        row-gap: 3rem;
}

.utility {
        display: flex;
        flex-direction: column;
        background-color: var(--main-white);
}

.utility-title {
        text-align: center;
        margin: 3rem 0;
        font-size: 36px;
        font-weight: 900;
        color: var(--main-darkgold);
}

.utility-item-grid {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr;
        column-gap: 2rem;
        margin: 0 5rem;
}

.utility-item-grid a {
        text-decoration: none;
}

.utility-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        padding: 1rem;
}

.u-icon {
        padding-bottom: 1rem;
}

.u-title {
        font-size: 24px;
        font-weight: 600;
        color: var(--main-black);
        padding-bottom: 1rem;
}

.u-p {
        font-size: 18px;
        color: var(--main-black);
}

.img-sizer {
        width: 5rem;
}

.img-mirror {
        transform: scaleX(-1);
}

.img-darken {
        filter: brightness(50%)
}

.latest-news {
        background-color: var(--main-darkgold);
}

.news {
        display: flex;
        flex-direction: column;
        background-color: var(--main-darkgold);
}

.news-title {
        text-align: center;
        margin: 3rem 0;
        font-size: 36px;
        font-weight: 900;
        color: white;
}

.news-item-grid {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        column-gap: 8rem;
        margin: 0 5rem;
}

.news-item {
        display: none;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
}

.n-icon {
        padding-bottom: 1rem;
}

.n-p {
        font-size: 24px;
        font-weight: 600;
        color: var(--main-white);
        padding-bottom: 1rem;
        line-height: 120%;
}

.n-date {
        font-size: 18px;
        color: var(--main-black);
        padding-bottom: 1rem;
}

.n-btn {
        font-size: 24px;
        color: white;
        background-color: var(--main-lightgold);
        text-decoration: none;
        border-radius: 2rem;
        font-weight: 300;
        padding: 0.5rem 2rem;
        margin-bottom: 5rem;
}

.contact-us {
        margin-top: 5rem;
        display: grid;
        grid-template-columns: 0.3fr 4fr 6fr;
        grid-template-rows: 0.1fr 0.2fr 3fr 0.4fr;
        grid-template-areas:
                "aa ratna-w ac"
                "ba ratna-w bc"
                "ca ratna-w text-w"
                "da db dc";
}

.aa {
        grid-area: aa;
}

.ac {
        grid-area: ac;
}

.ba {
        grid-area: ba;
        background-color: var(--main-darkgold);
}

.bc {
        grid-area: bc;
        background-color: var(--main-darkgold);
}

.ca {
        grid-area: ca;
        background-color: black;
}

.da {
        grid-area: da;
        background-color: black;
}

.db {
        grid-area: db;
        background-color: black;
}

.dc {
        grid-area: dc;
        background-color: black;
}

.ratna-wrapper {
        grid-area: ratna-w;
        background-color: rgb(38, 38, 38);
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: space-evenly;
        padding: 3rem 2rem 2rem 2rem;
}

.logo-wrapper {
        width: 100%;
}

.text-wrapper {
        color: rgb(182, 182, 182);
        font-size: 24px;
        font-weight: 300;
}

.contact-text-wrapper {
        grid-area: text-w;
        background-color: black;
        display: flex;
        flex-direction: column;
        padding: 4rem 8rem;
        color: var(--main-white);
}

.contact-title {
        font-size: 24px;
        font-weight: 900;
}

.contact-p {
        margin-top: 1rem;
        font-size: 20px;
        font-weight: 300;
}

.contact-number {
        font-size: 22px;
        font-weight: 300;
        line-height: 100%;
        display: flex;
        flex-direction: row;
        overflow: hidden;
}

.contact-number span {
        overflow: hidden;
}

.contact-number p {
        overflow: hidden;
}

.padding-left {
        padding-left: 5px;
}

.icons-wrapper {
        display: flex;
        flex-direction: row;
}

.c-icon {
        background-color: rgb(38, 38, 38);
        padding: 1rem;
        margin: 0 4px;
}

.menu-burger {
        display: none;
}

.menu-block {
        display: none;
}

footer {
        background-color: var(--main-black);
        text-align: center;
        color: white;
        padding-top: 20px;
}