body {
}

.main {
    position: relative;
    height: 500px;
    margin-top: 5%;
    color: white;
}

.Port {
    width: 0px;
}

.h-1 {
    margin-top: -99px;
    font-weight: bold;
    font-size: 4.8rem;
    font-family: Arial, Helvetica, sans-serif;
    margin-right: 30px;
    text-transform: capitalize;
}
/* .Port
    {
        height: 300px;
        width: 200px;
    }
*/
.port {
    position: relative;
    margin-top: -30%;
    font-weight: bolder;
    padding-left: 20px;
}

.h-3 {
    font-family: Arial;
    font-weight: bold;
    font-size: x-large;
}

/*Project Tabs*/

.nav-tabs.projects-tabs > li > a {
    margin-right: 2px;
    line-height: 1.42857143;
    border: 1px solid transparent;
    border-radius: 30px;
    color: #333;
    text-transform: uppercase;
    font-size: 14px;
    letter-spacing: 0.3px;
    font-weight: 500;
    padding: 10px 8px;
}

.nav-item:hover {
    background: #054a85;
    border-radius: 33px;
    text-decoration-style: wavy;
    color: #fff;
}

.nav-tabs.projects-tabs > li.active > a, .nav-tabs.projects-tabs > li.active > a:focus, .nav-tabs.projects-tabs > li.active > a:hover {
    color: #fff !important;
    cursor: default;
    background-color: #054a85;
    border: none;
    border-bottom-color: currentcolor;
    border-bottom-color: transparent;
}

.nav-tabs.projects-tabs > li > a {
    margin-right: 2px;
    line-height: 1.42857143;
    border: 1px solid transparent;
    border-radius: 30px;
    color: #333;
    text-transform: uppercase;
    font-size: 14px;
    letter-spacing: 0.3px;
    font-weight: 500;
    padding: 10px 8px;
    border-color: #054a85;
    border-style: none;
}

    .nav-tabs.projects-tabs > li > a:hover {
        color: #fff;
    }

.projects-tabs {
    background: #f5f5f5;
    max-width: 100%;
    margin: 20px auto;
    text-align: center;
    border-bottom: 0;
    padding: 5px;
    border-radius: 35px;
    font-size: smaller;
    align-items: center;
    justify-content: center;
}

.nav-tabs {
    border-bottom: 1px solid #ddd;
}

.nav {
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;
}

ul {
    padding-left: 0;
    margin-left: 0;
    display: block;
    list-style-type: disc;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    padding-inline-start: 40px;
    unicode-bidi: isolate;
}

#btnn {
    margin-left: 490px;
}

.btn-success {
    margin-left: 490px;
    margin-top: -60px;
    --bs-btn-color: #fff;
    --bs-btn-bg: #198754;
    --bs-btn-border-color: #198754;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #157347;
    --bs-btn-hover-border-color: #146c43;
    --bs-btn-focus-shadow-rgb: 60, 153, 110;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #146c43;
    --bs-btn-active-border-color: #13653f;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #198754;
    --bs-btn-disabled-border-color: #198754;
}

/**
* Template Name: MyPortfolio - v2.1.0
* Template URL: https://bootstrapmade.com/myportfolio-bootstrap-portfolio-website-template/
* Author: BootstrapMade.com
* License: https://bootstrapmade.com/license/
*/

/*--------------------------------------------------------------
# General
--------------------------------------------------------------*/
/*body {
    font-family: "Inconsolata", monosapce;
    color: #0d1e2d;
}*/

/*a {
    color: #777;
}*/

a:hover {
    color: #1bbd36;
}

h1, h2, h3, h4, h5, h6, .font-heading {
    font-family: "Raleway", sans-serif;
}

.section {
    padding: 7rem 0;
}

.filters {
    list-style: none outside none;
    margin: 0 0 40px 0;
    padding: 0;
}

    .filters > li {
        display: inline-block;
    }

    .filters a {
        color: #000;
        display: inline-block;
        padding-left: 10px;
        padding-right: 10px;
        position: relative;
        background: none repeat scroll 0 0 #FFFFFF;
        font-size: 14px;
        font-weight: 400;
        margin-right: 20px;
        text-transform: uppercase;
        transition: all 0.9s ease 0s;
        -moz-transition: all 0.9s ease 0s;
        -webkit-transition: all 0.9s ease 0s;
        -o-transition: all 0.9s ease 0s;
        border: 1px solid #F2F2F2;
        outline: none;
        border-radius: 3px;
    }

        .filters a:hover, .filters a:focus, .filters a:active {
            text-decoration: none;
        }

        .filters a:hover, .filters a.active {
            color: #fff;
            background: #1BBD36;
            border: 1px solid #1BBD36;
            box-shadow: none;
            -webkit-box-shadow: none;
        }




.item {
    border: none;
    margin-bottom: 30px;
    background: #fff;
    -webkit-box-shadow: 7px 7px 10px 0px rgba(0,0,0,0.2);
    box-shadow: 7px 7px 10px 0px rgba(0,0,0,0.2);
    overflow: visible !important;
}

    .item .item-wrap {
        display: block;
        position: relative;
        overflow: hidden;
    }

        .item .item-wrap:after {
            z-index: 2;
            position: absolute;
            content: "";
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.4);
            visibility: hidden;
            opacity: 0;
            transition: .3s all ease-in-out;
        }

        .item .item-wrap img {
            transition: .3s transform ease;
            transform: scale(1);
        }

        .item .item-wrap > .work-info {
            position: absolute;
            top: 50%;
            width: 100%;
            text-align: center;
            z-index: 3;
            transform: translateY(-50%);
            color: #fff;
            opacity: 0;
            visibility: hidden;
            margin-top: 20px;
            transition: .3s all ease;
        }

            .item .item-wrap > .work-info h3 {
                font-size: 20px;
                margin-bottom: 0;
            }

            .item .item-wrap > .work-info span {
                font-size: 14px;
                text-transform: uppercase;
                letter-spacing: .2rem;
            }

        .item .item-wrap:hover {
            text-decoration: none;
        }

            .item .item-wrap:hover img {
                transform: scale(1.05);
            }
/*Hover text and div */
/*.item .item-wrap:hover:after {
                opacity: 1;
                visibility: visible;
            }

            .item .item-wrap:hover .work-info {
                margin-top: 0px;
                opacity: 1;
                visibility: visible;
            }*/




#pm a, #jobportal a, #chatapp a, #matrimony a, #kblc a, #eshopping a, #tourism a, #news a, #sstv a, #pms a, #cdc a, #discussionBlog a, #skyways a, #afrtn a, #book a, #mediaCard a, #staff a, #newsLogo a, #alifLogo a, #certificate a, #channelLogo a, #newweblogo a, #lgu a, #slalogo a, #sybiotic a, #tahacarstereo a {
    text-align: center;
    color: #fff;
    padding-top: 20px;
    /*width: 350px;*/
    height: 385px;
    -webkit-transition: background-position 10s ease-in-out;
    -moz-transition: background-position 10s ease-in-out;
    -ms-transition: background-position 10s ease-in-out;
    -o-transition: background-position 10s ease-in-out;
    transition: background-position 10s ease-in-out;
}

#pm a {
    background: url('../img/portfolio/ProjectManagement.png')0 0 no-repeat;
    background-size: cover;
}

    #pm a:hover {
        background-position: 0px -2030px;
    }


#jobportal a {
    background: url('../img/portfolio/JobPortal.png');
    background-size: cover;
}

    #jobportal a:hover {
        background-position: 0px -1430px;
    }

#chatapp a {
    background-image: url('../img/portfolio/ChatWebApp.png');
    background-size: cover;
}

    #chatapp a:hover {
        background-position: 0px -850px;
    }

#tahacarstereo a {
    background-image: url('../images/portfolio/Websites/Taha_Car_Stereo.png');
    background-size: cover;
}

    #tahacarstereo a:hover {
        background-position: 0px -850px;
    }

#sybiotic a {
    background-image: url('../images/portfolio/Websites/Symbiotic_Synergies.png');
    background-size: cover;
}

    #sybiotic a:hover {
        background-position: 0px -1125px;
    }

#matrimony a {
    background-image: url('../images/portfolio/Websites/Garjorde.png');
    background-size: cover;
}

    #matrimony a:hover {
        background-position: 0px -2390px;
    }

#kblc a {
    background-image: url('../images/portfolio/Websites/KBLC.jpg');
    background-size: cover;
}

    #kblc a:hover {
        background-position: 0px -1100px;
    }

#eshopping a {
    background-image: url('../images/portfolio/Websites/E-Shopping.jpg');
    background-size: cover;
}

    #eshopping a:hover {
        background-position: 0px -900px;
    }

#tourism a {
    background-image: url('../images/portfolio/Websites/FTS.png');
    background-size: cover;
}

    #tourism a:hover {
        background-position: 0px -500px;
    }

#news a {
    background-image: url('../images/portfolio/Websites/S72NEWS.png');
    background-size: cover;
}

    #news a:hover {
        background-position: 0px -500px;
    }

#sstv a {
    background-image: url('../images/portfolio/Websites/SSTV.png');
    background-size: cover;
}

    #sstv a:hover {
        background-position: 0px -400px;
    }

#pms a {
    background-image: url('../images/portfolio/Websites/PMS.png');
    background-size: cover;
}

    #pms a:hover {
        background-position: 0px -800px;
    }

#cdc a {
    background-image: url('../images/portfolio/Websites/CrashDataCollection.png');
    background-size: cover;
}

    #cdc a:hover {
        background-position: 0px -400px;
    }

#discussionBlog a {
    background-image: url('../images/portfolio/Websites/Project Live Discussion Blog.png');
    background-size: cover;
}

    #discussionBlog a:hover {
        background-position: 0px -1500px;
    }


#skyways a {
    background-image: url('../images/portfolio/Websites/Skyways.PNG');
    background-size: cover;
}

    #skyways a:hover {
        background-position: 0px -500px;
    }

#afrtn a {
    background-image: url('../images/portfolio/Websites/AFRTN.png');
    background-size: cover;
}

    #afrtn a:hover {
        background-position: 0px -500px;
    }

#book a {
    background-image: url('../images/portfolio/Designs/BookMagazine.png');
    background-size: cover;
}

    #book a:hover {
        background-position: 0px -1000px;
    }

#mediaCard a {
    background-image: url('../images/portfolio/Designs/Reporter-Card.png');
    background-size: cover;
}

/*#mediaCard a:hover {
        background-position: 0px -1000px;
    }*/

#staff a {
    background-image: url('../images/portfolio/Designs/Staff.png');
    background-size: cover;
}

    #staff a:hover {
        background-position: 0px -500px;
    }

#newsLogo a {
    background-image: url('../images/portfolio/Logo/3d-S72News.png');
    background-size: cover;
}

/*#newsLogo a:hover {
        background-position: 0px -180px;
    }*/

#alifLogo a {
    background-image: url('../images/portfolio/Logo/Alif.png');
    background-size: cover;
}

/*#alifLogo a:hover {
        background-position: 0px -180px;
    }*/

#certificate a {
    background-image: url('../images/portfolio/Logo/S72News.png');
    background-size: cover;
}

/*#certificate a:hover {
        background-position: 0px -180px;
    }*/

#channelLogo a {
    background-image: url('../images/portfolio/Logo/Final Logo.png');
    background-size: cover;
}

    #channelLogo a:hover {
        background-position: 0px -180px;
    }

#newweblogo a {
    background-image: url('../images/portfolio/Logo/news logo -FINAL-2.png');
    background-size: cover;
}

    #newweblogo a:hover {
        background-position: -1000px 0px;
    }

#lgu a {
    background-image: url('../images/portfolio/Websites/lgu.png');
    background-size: cover;
}

/*#lgu a:hover {
    background-position: -1000px 0px;
}*/

#slalogo a {
    background-image: url('../images/portfolio/Logo/SLA.png');
    background-size: cover;
}

/*#slalogo a:hover {
    background-position: -1000px 0px;
}*/
.section-gap {
    padding: 125px 0 !important;
}