/* 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;
    /* 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;
    --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: -20px 0 0;
    font-size: 22px;
    text-align: center;
    color: var(--blue-800);
}

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

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

/* End Component */
/* Start Navbar*/
/*.sticky-top {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 1020;
}*/
.navbar {
    background-color: var(--blue-900);
}

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

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

        .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;
            }
/* End Nav Bar */
/* 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 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 */