/* Start Variables */
:root {
    /* Colors */
    --main-Color: #48cae4;
    --secondry-color: #2c4755;
    --section-padding: 60px;
    --section-background: #f6f6f6;
    --dark-Color: #03045E;
    --light-color: #f1faee;
    --heading-light: #d3d6db;
    --heading-dark: #005792;
    /* cream colors */
    --cream-100: #f7f2f0;
    --cream-200: #eee4e0;
    --cream-300: #f5f2ed;
    --cream-600: #e8dac5;
    --cream-700: #d6b6aa;
    --cream-800: #cfbea4;
    --cream-900: #c0914b;
    /* Gray Colors */
    --gray-100: #F7FAFC;
    --gray-200: #EDF2F7;
    --gray-300: #E2E8F0;
    --gray-400: #CBD5E0;
    --gray-500: #A0AEC0;
    --gray-600: #718096;
    --gray-700: #4A5568;
    --gray-800: #2D3748;
    --gray-900: #1A202C;
    /* Blue Colors */
    --blue-100: #F3FBFF;
    --blue-200: #D6EDFF;
    --blue-300: #A0D4FF;
    --blue-400: #57B0FB;
    --blue-500: #1292EE;
    --blue-600: #0077CC;
    --blue-700: #005CA4;
    --blue-800: #034077;
    --blue-900: #002651;
    /* Logo Colors */
    --logo-900: #191919;
    --logo-500: #908a67;
    --logo-200: #767144;
    --main-duration: 0.4s;
    --header-height: 0;
    --header-padding: 0;
    --text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0, 0, 0, .1), 0 0 5px rgba(0, 0, 0, .1), 0 1px 3px rgba(0, 0, 0, .3), 0 3px 5px rgba(0, 0, 0, .2), 0 5px 10px rgba(0, 0, 0, .25), 0 10px 10px rgba(0, 0, 0, .2), 0 20px 20px rgba(0, 0, 0, .15);
}

/* End Variables */

/* Start Global Rules */
* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Roboto', sans-serif;
    font-family: 'Work Sans', sans-serif;
}

/* End Global Rules */

/* Start Component */
.special-heading {
    color: var(--blue-600);
    font-size: 100px;
    text-align: center;
    font-weight: 800;
    letter-spacing: -4px;
    margin: 0;
    text-shadow: var(--text-shadow);
}

.special-heading-title {
    margin: -12px 0 25px;
    font-size: 22px;
    text-decoration: underline;
    text-align: center;
    color: var(--blue-700);
    font-weight: 800;
}

@media (max-width: 767px) {
    .special-heading {
        font-size: 65px;
    }

    .special-heading-title {
        margin-top: -3px;
        font-size: 14px;
    }
}

/* End Component */
/* Start Navbar*/
/*.sticky-top {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 1020;
}*/
header {
    background-color: transparent;
    color: transparent;
}

.navbar {
    background-color: var(--blue-100);
}

    .navbar .logo-image {
        width: 140px;
    }

    .navbar .navbar-nav .nav-link {
        color: var(--blue-900);
        font-weight: bold;
    }

        .navbar .navbar-nav .nav-link.active,
        .navbar .navbar-nav .nav-link:focus,
        .navbar .navbar-nav .nav-link:hover {
            color: var(--main-Color);
        }

    .navbar .dropdown-menu {
        background-color: var(--blue-700);
    }

        .navbar .dropdown-menu .dropdown-item {
            color: var(--blue-100);
            transition: var(--main-duration);
        }

            .navbar .dropdown-menu .dropdown-item:hover {
                color: var(--blue-900);
                padding-left: 35px;
                font-weight: bold;
            }

.navbar-toggler button {
    color: var(--blue-800);
}

/* End Nav Bar */
/* Srart Image Head */
.image-head {
    margin: 0 auto;
    width: 95%;
    padding-left: 15px;
    padding-right: 15px;
    margin-right: auto;
    margin-left: auto;
}

    .image-head img {
        width: 100%;
        height: auto;
    }
/* End Image Head */

/* Start Card Fill Over */
.card-fill-over {
    border-radius: 10px;
    filter: drop-shadow(0 5px 10px 0 #ffffff);
    /*width: 400px;*/
    /*height: 180px;*/
    background-color: #ffffff;
    padding: 20px;
    position: relative;
    z-index: 0;
    overflow: hidden;
    transition: 0.6s ease-in;
}

    .card-fill-over::before {
        content: "";
        position: absolute;
        z-index: -1;
        top: -15px;
        right: -15px;
        background: var(--blue-800); /*#7952b3*/
        height: 100%; /*220px;*/
        width: 25px;
        border-radius: 32px;
        transform: scale(1);
        transform-origin: 50% 50%;
        transition: transform 0.25s ease-out;
    }

    .card-fill-over:hover::before {
        transition-delay: 0.2s;
        transform: scale(40);
    }

    .card-fill-over:hover {
        color: #ffffff;
    }

    .card-fill-over p {
        padding: 10px 0;
    }
/* End Card Fill Over */


/* Start Container */
.container {
    padding-left: 15px;
    padding-right: 15px;
    margin-right: auto;
    margin-left: auto;
}

@media (min-width: 767.98px) {
    .container {
        width: 750px;
    }
}

/* Medium devices (tablets, less than 992px) */
@media (min-width: 991.98px) {
    .container {
        width: 970px;
    }
}

/* Large devices (desktops, less than 1200px) */
@media (min-width: 1199.98px) {
    .container {
        width: 1170px;
    }
}

/* X-Large devices (large desktops, less than 1400px) */
@media (min-width: 1399.98px) {
    .container {
        width: 1370px;
    }
}

/* End Container*/

/* Start home-carousel */
.home-carousel-control-container {
    margin: 0 auto;
    width: 95%;
}

.home-carousel-img-container {
    height: 100%;
}

.home-carousel-img-caption {
    bottom: 4em;
    color: #fff;
    font-size: 16pt;
    height: 2em;
    position: relative;
    padding: 0.3em 1em;
    text-align: center;
    width: 100%;
}

@media (max-width: 767px) {
    .home-carousel-control-container {
        display: none;
    }
}
/* End home-carousel */
/* Start Landing */
.landing {
    background-image: url(../images/landing.jpg);
    background-size: cover;
    /* 68 is header hieght (48 + 20 padding (10 padding top + 20 padding bottom)) */
    height: 100vh;
    /* To Center Child Element */
    position: relative;
}

    .landing .intro-text {
        /* Center Emelment */
        position: absolute;
        left: 50%;
        top: 50%;
        text-align: center;
        width: 320px;
        max-width: 100%;
        transform: translate(-50%, -50%);
    }

        .landing .intro-text h1 {
            margin: 0;
            font-weight: bold;
            font-size: 45px;
            color: var(--blue-700);
        }

        .landing .intro-text p {
            font-size: 19px;
            line-height: 1.8;
            color: var(--blue-900);
        }

/* End Landing */
/* Start Features */

.features {
    padding-top: var(--section-padding);
    padding-bottom: var(--section-padding);
    background-color: var(--section-background);
}

    .features .container {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        grid-gap: 20px;
    }

    .features .feat {
        padding: 20px;
        text-align: center;
    }

        .features .feat i {
            color: var(--main-Color);
        }

        .features .feat h3 {
            font-weight: 800;
            margin: 30px 0;
        }

        .features .feat p {
            line-height: 1.6;
            color: #777;
            font-size: 17px;
        }

/* End Features */


/* Start Portfolio */
.portfolio {
    padding-top: var(--section-padding);
    padding-bottom: var(--section-padding);
    background: var(--section-background);
}

    .portfolio .portfolio-content {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        grid-gap: 20px;
        margin-top: 40px;
    }

        .portfolio .portfolio-content .card {
            background-color: white;
        }

            .portfolio .portfolio-content .card img {
                max-width: 100%;
            }

            .portfolio .portfolio-content .card .info {
                padding: 20px;
            }

@media (max-width: 767px) {
    .portfolio .portfolio-content .card .info {
        text-align: center;
    }
}

.portfolio .portfolio-content .card .info h3 {
    margin: 0;
}

.portfolio .portfolio-content .card .info p {
    line-height: 1.6;
    color: #777;
    margin-bottom: 0;
}

/* End Portfolio */
/* Start Billing System */

/* End Billing System */
.billing-system {
    padding-top: var(--section-padding);
    padding-bottom: calc(var(--section-padding) + 60px);
}

    .billing-system .billing-system-content {
        margin-top: 100px;
        display: contents;
        flex-wrap: wrap;
        justify-content: space-between;
    }


.billing-system-image-container {
    position: relative;
    /*display: inline-block;*/
    padding: 25px;
}

    .billing-system-image-container img {
        display: block;
        width: 100%;
        height: auto;
    }

.billing-system-image-container-overlay-text {
    position: absolute;
    top: 87%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: transparent;
    color: var(--blue-100);
    padding: 10px 20px;
    font-size: 28px;
    text-align: center;
}

@media (max-width: 1400px) {
    .billing-system-image-container-overlay-text {
        top: 80%;
        font-size: 26px;
    }
}
@media (max-width: 1200px) {
    .billing-system-image-container-overlay-text {
        top: 70%;
        font-size: 24px;
    }
}
@media (max-width: 991px) {
    .billing-system-image-container-overlay-text {
        top: 65%;
        font-size: 26px;
    }
}


@media (max-width: 767px) {
    .billing-system-image-container-overlay-text {
        top: 60%;
        font-size: 16px;
    }
}
@media (max-width: 400px) {
    .billing-system-image-container-overlay-text {
        display: none;
    }

}
    /* Start About */
    .about {
        padding-top: var(--section-padding);
        padding-bottom: calc(var(--section-padding) + 60px);
    }

        .about .about-content {
            margin-top: 100px;
            display: contents;
            flex-wrap: wrap;
            justify-content: space-between;
        }

            .about .about-content ul {
                list-style-type: none;
                margin: 0;
                padding: 0;
            }

    hr.about-hr {
        height: 4px;
        width: 50%;
        color: var(--blue-700);
        opacity: 34%;
    }

    ul.no-bullets {
        list-style-type: none;
        margin: 10px;
        padding: 10px;
    }

    .about-title {
        font-weight: 900 !important;
        line-height: 1.5 !important;
        margin-left: 15px !important;
        font-size: 24px;
        color: var(--logo-900) !important;
        padding-top: 25px !important;
    }



    .about-image {
        text-align: center;
        padding-top: 25px;
    }

    strong.roles-Header {
        color: var(--blue-700);
        padding-left: 25px;
    }

    p.roles-paragraph {
        color: var(--blue-900);
        padding-left: 45px;
    }

    .about .about-content .about-image {
        display: block;
        text-align: center;
        position: relative;
        margin: 0 auto 25px;
    }

    .about-paragraph p {
        line-height: 2;
        color: var(--logo-500);
        margin-left: 20px;
    }


    div.about-content div.about-image {
        box-sizing: border-box;
        text-align: center;
    }

    .about .container .about-content .about-image img {
        display: block;
        width: 95%;
        margin-left: auto;
        margin-right: auto;
        /* width: 40%; */
        padding: 15px 0 20px 0;
        /*max-width: fit-content;*/
    }

    .about .about-content .text {
        flex-basis: calc(100% - 750px);
    }

        .about .about-content .text p:first-of-type {
            font-weight: bolder;
            line-height: 1.5;
            margin-bottom: 10px;
        }

    .about .about-content hr {
        width: 50%;
        border-color: var(--main-Color);
        display: inline-block;
    }

    .about .about-content .text p:last-of-type {
        line-height: 2;
        color: #124076;
        font-weight: 600;
        margin-left: 40px;
        margin-right: 40px;
    }

    @media (max-width: 991px) {
        .about .about-content {
            flex-direction: column;
            text-align: center;
            margin: 10px auto 20px;
        }

        .about-paragraph p {
            text-align: center;
        }

        .about .about-content .text p:last-of-type {
            margin-left: 15px;
            margin-right: 15px;
        }
    }

    @media (max-width: 991px) {
        .about .about-content .about-image {
            margin: 0 auto 50px;
        }
    }


    @media (max-width: 767px) {
        .about .about-content .about-image {
            display: none;
        }

        .about-title {
            text-decoration: underline;
            text-decoration-color: var(--blue-700);
        }
    }

    /* End About */

    /* Start Latest News */

    .latestnews-column {
        float: left;
        width: 33.3%;
        margin-bottom: 16px;
        padding: 0 8px;
    }

    .latestnews-card {
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
        margin: 8px;
    }

    /* .about-section {
  padding: 50px;
  text-align: center;
  background-color: #474e5d;
  color: white;
} */

    .latestnews-container {
        padding: 0 16px;
    }

        .latestnews-container .description {
            margin: 10px;
            font-size: large;
            padding: 5px;
        }

        .latestnews-container .header {
            padding-top: 15px;
            color: var(--blue-800);
            font-size: x-large;
            text-align: center;
        }

        .latestnews-container::after, .row::after {
            content: "";
            clear: both;
            display: table;
        }

    .latestnews-title {
        color: grey;
    }


    @media screen and (max-width: 991px) {
        .latestnews-column {
            width: 100%;
            display: block;
            padding: 25px;
        }

        .latestnews-container .description {
            text-align: center;
        }
    }

    /* End Latest News */

    /* Start Card Component*/

    .card-component {
        border-radius: 25px;
    }

        .card-component img {
            border-top-left-radius: 25px;
            border-top-right-radius: 25px;
            max-width: 18rem;
        }

    .card-component-text {
        padding: 1rem;
        font-size: 16px;
        font-weight: 600;
        color: var(--blue-700);
        text-align: center;
        line-height: 20pt;
    }

    .card-component-body h5 {
        padding-top: 15px;
        text-align: center;
        text-transform: uppercase;
        font-weight: bold;
        color: var(--blue-900);
    }

    .card-component-shadow {
        -webkit-box-shadow: 0 1px 1px rgba(72, 78, 85, .6);
        box-shadow: 0 1px 1px rgba(72, 78, 85, .6);
        -webkit-transition: all .2s ease-out;
        -moz-transition: all .2s ease-out;
        -ms-transition: all .2s ease-out;
        -o-transition: all .2s ease-out;
        transition: all .2s ease-out;
    }

        .card-component-shadow:hover {
            -webkit-box-shadow: 0 20px 40px rgba(72, 78, 85, .6);
            box-shadow: 0 20px 40px rgba(72, 78, 85, .6);
            -webkit-transform: translateY(-15px);
            -moz-transform: translateY(-15px);
            -ms-transform: translateY(-15px);
            -o-transform: translateY(-15px);
            transform: translateY(-15px);
        }

    /*
@media (max-width: 991px) {
    .card-component {
        width: 80% !important;
    }

        .card-component img {
            max-width: 35rem;
        }
}*/

    /* End Card Component*/


    /* Start infrastructure */
    .infrastructure {
        padding-top: var(--section-padding);
        padding-bottom: calc(var(--section-padding) + 60px);
    }

        .infrastructure .infrastructure-Content {
            margin-top: 100px;
            display: contents;
            flex-wrap: wrap;
            justify-content: space-between;
        }

    .infrastructure-image {
        width: 100%;
        text-align: center;
        padding: 35px;
    }

        .infrastructure-image img {
            width: 100%;
        }

    .infrastructure-subject-Title p {
        font-size: 34px;
        margin-bottom: 18px;
        color: var(--blue-500);
        font-weight: bolder;
        padding-left: 30px;
    }

    .infrastructure-caption p {
        line-height: 2;
        font-size: 16px;
        color: var(--blue-900);
    }

    hr.infrastructure-hr {
        height: 3px;
        width: 50%;
        color: var(--blue-700);
        opacity: 34%;
        display: inline-block;
    }

    @media (max-width: 991px) {
        .infrastructure .infrastructure-Content {
            flex-direction: column;
            text-align: center;
            margin: 10px auto 20px;
        }

            .infrastructure .infrastructure-Content .infrastructure-hr hr {
                height: 3px;
                width: 50%;
                color: var(--blue-700);
                opacity: 34%;
                display: inline-block;
            }

            .infrastructure .infrastructure-Content .infrastructure-subject-Title p {
                font-weight: bold;
            }
    }

    @media (max-width: 767.98px) {
        .infrastructure .infrastructure-Content .infrastructure-subject-Title p {
            font-size: 18px;
        }

        /*
    .special-heading {
        font-size: 80px;
        text-align: center;
        font-weight: 600;
    }
        */
    }

    /* End infrastructure */


    /* Start Carousel */
    .carousel-item {
        height: 75vh;
        min-height: 300px;
        background: no-repeat scroll center;
        /*-webkit-background-size: cover;*/
        background-size: cover;
    }

        /*        .carousel-item img {
        object-fit: cover;
        object-position: center;
        height: 50vh;
        overflow: hidden;
    }*/

        .carousel-item::before {
            content: "";
            display: block;
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            background: #000;
            opacity: 0.7;
        }

    /*.carousel-item:before {
        content: "";
        background-image: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.5));
        display: block;
        position: absolute;
        top: 0;
        width: 100vw;
        height: 100vh;*/
    /*            background: #000;
            opacity: 0.7;*/
    /*}*/

    .carousel-caption {
        bottom: 100px;
        padding-left: 100px;
        padding-right: 100px;
    }

        .carousel-caption h5 {
            font-size: 50px;
            font-weight: 500;
        }

        .carousel-caption p {
            font-size: 18px;
            top: 2rem;
        }

    .slide .slider-btn .btn {
        background-color: aqua;
        color: black;
        border-radius: 2px;
        padding: 1.5rem 2rem;
        font-size: 1rem;
        margin-right: 15px;
    }

    @media (min-width: 40em) {

        /* Bump up size of carousel content */
        .carousel-caption p {
            margin-bottom: 1.25rem;
            font-size: 1.25rem;
            line-height: 1.4;
            height: 100vh;
        }
    }

    /* End Carousel */

    /* Start Wi-Fi Section */

    .wifi-image-container {
        position: relative;
        display: inline-block;
    }

        .wifi-image-container img {
            display: block;
            width: 100%;
            height: auto;
        }

    .wifi-image-container-overlay-text {
        position: absolute;
        top: 35%;
        left: 50%;
        transform: translate(-50%, -50%);
        background-color: transparent;
        color: var(--blue-100);
        padding: 10px 20px;
        font-size: 20px;
        text-align: center;
    }

    @media(max-width: 767px) {
        .wifi-image-container-overlay-text {
            font-size: 12px;
        }
    }
    /* End Wi-Fi Section */
    /* Start Footer */
    .footer {
        background-color: var(--secondry-color);
        position: fixed;
        bottom: 0;
        width: 100%;
        height: 2.5rem;
        /* Footer height */
    }

    @media (max-width: 767px) {
        .footer-body {
            display: none;
        }

        footer {
            display: none;
        }
    }
    /* End Footer */