@import url('https://fonts.googleapis.com/css?family=Oswald|Rambla|Staatliches&display=swap');

body {
    margin: 0;
    padding: 0;
}

:root {
    --color-black: #000000;
    --color-white: #ffffff;
    --color-border: #ffffff34;
    --font-staat: 'Staatliches', cursive;
    --font-os: 'Oswald', sans-serif;
    --font-ram: 'Rambla', sans-serif;
}

/* global classes */
/*.font-staat{
    font: normal 400 18px var(--font-staat);
}
.font-os{
    font: normal 300 18px var(--font-os);
}
.font-ram{
    font: normal bold 18px var(--font-ram);
}*/

.font-size-40 {
    font-size: 40px;
}

.font-size-34 {
    font-size: 34px;
}

.font-size-27 {
    font-size: 27px;
}

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

.font-size-16 {
    font-size: 16px;
}

.bgcolor-black {
    background-color: var(--color-black);
}

.bg-light {
    background-color: #ececec !important;
}

.news .card-body {
    border-bottom: 2px solid #dcd9d9;
}

    .news .card-body p {
        text-align: justify;
    }

        .news .card-body p.cart-text {
            min-height: 166px;
        }

/* #global classes */

#header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1;
    transition: left .5s ease;
}

    #header nav {
        height: 100vh;
    }

    #header .site-title .navbar-brand {
        letter-spacing: 2px;
        color: var(--color-white);
    }

    #header .nav-link {
        margin: .7rem 1rem;
        border-bottom: 1px solid var(--color-border);
        text-transform: uppercase;
    }

        #header .nav-link:hover {
            color: var(--color-white) !important;
        }

    #header .toggle-button {
      background: none;
    color: #000000;
    position: fixed;
    top: 25px;
    background-color: #ffff;
    right: 20px;
    border: 1px solid #ffffff34;
    }

    .toggle-button svg {
        width: auto !important;
    height: 21px;
    vertical-align: middle;
    }

.toggle-left {
    left: 0 !important;
    width: 1000px !important;
}

.harshal-img {
    width: 150px;
    height: 150px;
    border-radius: 0;
    display: block;
    margin: 0 auto;
}

.bg-white {
    background-color: #fff;
}

.text-black {
    color: #000 !important;
}

/* site-main */

.site-banner .banner-area {
    background: url(https://cdn.pixabay.com/photo/2017/03/25/17/56/color-2174052__340.png) no-repeat;
    background-size: cover;
    width: 100%;
    height: 100vh;
    position: relative;
}

    .site-banner .banner-area .author {
        margin: 0;
        position: absolute;
        top: 45%;
        left: 50%;
        transform: translate(-50%, -50%);
    }



.skill .bars p, .site-content .skill .bars span {
    line-height: 10px;
}

#footer form .row .col input[type="text"],
#footer form .row .col input[type="email"],
#footer form textarea {
    border: none;
    border-radius: 0;
    border-bottom: 1px solid gray;
    padding: 1.5rem 1rem;
}

@media screen and (min-width: 768px) {
    .toggle-button {
        display: none;
    }

    #header {
        z-index: 0;
    }
}

@media (max-width:768px) {
    .small-nav-scrolling {
        overflow-y: scroll;
        height: 250px;
    }

    
}

@media (max-width:767px)  {

    .carousel-control-next, .carousel-control-prev, .carousel-indicators {
               z-index: 0;
    }

    .about-info-ul li {
            display: block !important;
    margin-bottom: 10px;
    width: 100% !important;
    }

}




/* #site-main */

.youtube-btn {
    background-color: red;
    border: none;
    color: white;
    padding: 12px 16px;
    font-size: 16px;
    cursor: pointer;
}

.link:hover {
    text-decoration: none;
}

.watch-text {
    margin-left: 10px;
}

.social-icon {
    margin: 5px;
}

.author.text-center {
    margin: 0;
    position: absolute;
    top: 45%;
    left: 50%;
    transform: translate(-50%, -50%);
}


@media (min-width:1500px) {
    .show-on-1600 {
        display: block;
    }

    .show-on-1599 {
        display: none;
    }
}

@media (max-width:1499px) {
    .show-on-1600 {
        display: none;
    }

    .show-on-1599 {
        display: block;
    }
}


.section-part {
    padding: 40px 0;
}

#about_me p, #about_me p span, #about_me p a {
    color: #c7c7c7 !important;
}

.about-info-ul {
    padding-left: 0;
}

    .about-info-ul li {
        display: inline-block;
        margin-bottom: 10px;
        width: 33%;
    }

        .about-info-ul li i, .about-info-ul li svg {
            color: #f7c7c7 !important;
        }

        .about-info-ul li span {
            /*display:table-cell;*/
            color: #c7c7c7 !important;
            padding-left: 0;
        }

            .about-info-ul li span a {
                color: #c7c7c7 !important;
            }

#portfolio img.p-img {
    padding: 4px;
    background-color: #f2f2f2;
    margin-bottom: 20px;
}

.footer-text p {
    color: #c7c7c7 !important;
        display: flex;
}

.footer-text p span {
     color: #c7c7c7 !important;
 }

.footer-text p svg {
    color: #f7c7c7 !important;
    margin-right:10px;
}


.social-icon a, .social-icon a svg {
        color: #c7c7c7 !important;
}

.youtube-video iframe {
        padding: 2px;
    background-color: #f2f2f2;
}

@media (max-width:1199px) and (min-width:992px) {
    
    
}

@media (max-width:991px) and (min-width:768px) {
    
    .about-info-ul li {
            width: 48%;
    }

    .copy-md {
            margin: 20px 0 0 !important;
    }

    .copy-md-2 {
         margin: 0px 0 0 !important;
    }

    .primary-nav a.navbar-brand {
        font-size:18px;
    }

    #site-main {
        overflow-x:hidden !important;
    }
}

@media (max-width:767px) and (min-width:560px) {
    
    
}

@media (max-width:480px) {
    
    
}