/* <style> */
/* portfolio */
.header-container .recentwork {
    font-size: 64px !important;
    font-family: "Poppins", sans-serif !important;
    text-transform: capitalize !important;
    font-weight: 800 !important;
}
.contentdiv {
    height: auto;
}
.portfolioTitle {
    font-weight: 600;
    color: rgb(247, 238, 228);
}

.main-nav-container {
    height: 100px !important;
}

.navbar-brand {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.navbar-brand p {
    margin-bottom: 0;
    font-size: 13px;
    margin-top: 5px;
    font-weight: bold;
}

.navbar-brand p span {
    color: #f6b619;
}

.one {
    right: 100% !important;
    bottom: 100% !important;
    width: inherit;
    height: inherit;
}

@media only screen and (max-width: 420px) {
    .main-nav-container .qmaCertify {
        font-size: 8px;
    }
}
@media only screen and (max-width: 540px) and (min-width: 420px) {
    .main-nav-container .qmaCertify {
        font-size: 10px;
    }
}

@media only screen and (max-width: 320px) {
    .main-nav-container {
        display: flex;
        align-items: center;
        justify-content: flex-start;
    }

    .header-container .recentwork {
        font-size: 60px !important;
    }
}
/* </style> */
@media only screen and (max-width: 1050px) and (min-width: 950px) {
    /* .navtext {
        
        padding: 0 !important;
        border: 1px solid red;
    } */

    .main-nav
        .main-nav-container
        .navbar-collapse
        .navbar-nav
        .nav-item
        .nav-link {
        padding: 7px 0 !important;
    }
}
@media only screen and (max-width: 950px) and (min-width: 750px) {
    .main-nav .main-nav-container {
        padding: 0 2% !important;
    }
    .main-nav
        .main-nav-container
        .navbar-collapse
        .navbar-nav
        .nav-item
        .nav-link {
        padding: 7px 0 !important;
    }
    .main-nav .main-nav-container .navbar-collapse .navbar-nav .nav-item {
        margin-left: 0 !important;
    }
    .navbar-brand p {
        font-size: 10px;
    }
}

@media only screen and (max-width: 750px) {
    .main-nav .main-nav-container {
        padding: 0 4% !important;
    }
    .navbar-brand p {
        font-size: 10px;
    }
}
@media only screen and (max-width: 800px) and (min-width: 770px) {
    .navbar-brand p {
        font-size: 8px;
    }
}

/* portfolio tab */
@media only screen and (max-width: 320px) {
    .navbtn {
        font-size: 10px !important;
    }
}
@media only screen and (max-width: 350px) {
    .contenttab::after {
        width: 60px !important;
    }
}
@media only screen and (max-width: 700px) {
    .navbtn {
        background: none !important;
    }
    .contentdiv .tab-pane {
        margin: 0 !important;
    }
    .imagemedia:hover .hoverdiv i {
        font-size: 20px !important;
    }
}
@media only screen and (max-width: 575px) {
    .contenttab nav {
        width: 25%;
        gap: 30px;
    }
    .imagemedia:hover .hoverdiv i {
        font-size: 25px !important;
    }
    /* .gapdiv {
        width: 5%;
        background-color: white !important;
    } */
}
.scrollbar {
    padding-left: 0 !important;
}
/* .nav-tabs .nav-link .active::before {
    border: 1px solid #efb31d;
} */

.imagemedia {
    position: relative;
    padding: 3px 3px;
}

@media only screen and (max-width: 870px) and (min-width: 700px) {
    .contenttab::after {
        top: 55px !important;
    }
    .navbtn {
        font-size: 10px;
    }
}

@media only screen and (max-width: 1050px) and (min-width: 767px) {
    .scrollbar {
        height: 450px !important;
    }
    /* hover height */
    .details {
        height: 30% !important;
    }
}

.imagemedia {
    position: relative !important;
    padding: 3px 3px;
}

.imagemedia:hover img {
    filter: brightness(0.7) !important;
}

.hoverdiv {
    position: absolute;
    bottom: 0;
    padding: 8%;
    height: 100% !important;
    width: 100% !important;
    display: flex !important;
    align-items: flex-end;
    flex-direction: row !important;
}

.hoverdiv .linkclasss {
    margin-left: 65% !important;
}
.imagemedia:hover {
    filter: brightness(0.8) !important;
}
.details:hover .hoverdiv {
    display: flex;
    top: 50px !important;
    flex-direction: row;
    backface-visibility: hidden;
}
h6 .hoverdiv {
    top: 50px !important;
}
.imagemedia:hover .linkcolumn {
    display: flex;
    justify-content: flex-end;
}
.imagemedia:hover .details {
    display: flex;
}
.imagemedia:hover .hoverdiv i {
    color: aliceblue;
    font-size: 30px;
}
.imagemedia iframe {
    height: 100%;
    width: 100%;
}
.image_show_div {
    height: 50%;
    width: 100%;
}
.image_show_div img {
    width: 100%;
    padding: 50px;
    object-fit: cover;
}

.pdf_show_div {
    height: 100%;
    width: 100%;
}
.pdfbody {
    height: auto !important;
}
.pdfiframe {
    padding: 50px;
    height: 700px !important;
    width: 100% !important;
}

.tab-active a {
    /* background: #fff; */
    border-bottom-color: transparent;
}

.dropShadow {
    padding: 0 5px 5px 5px !important;
    position: relative;
    /* height: 50%; */
    /* border: 1px solid red !important; */
    object-fit: cover;
}

.details {
    border: 1px solid white !important;
    position: absolute;
    width: 100% !important;
    background-color: #f6b619 !important;
    border-bottom-right-radius: 290px;
    /* height: 20% !important; */
    padding: 10px;
    font-family: georgia;
    color: #fff;
    opacity: 0;
    width: 291px;
    gap: 100px;
    z-index: 1000;
    transition-property: width;
    transition: width 20s ease-out 0.8s !important;
    display: flex;
    flex-direction: column;
}

.items:hover .details {
    opacity: 1;
    transition: opacity 0.2s 0.3s;
}
.items:hover .wholehover {
    opacity: 1;
    transition: opacity 0.2s 0.3s;
}

.items:hover .one {
    transition: all 0.3s;
    left: 0;
    bottom: 0;
}

/* /zxfcfchvbkkl */
/* i.fa.fa-download.ds */
.i.fa.fa-eye {
    color: var(--primary);
    margin-top: 161px;
    margin-right: 6px;
}

.bg-items {
    padding: 9px;
    width: 340px;

    margin: 18px;
    background-color: white;
    float: left;
    cursor: pointer;
    /* box-shadow : 3px 3px 5px 0px rgba(0,0,0,0.5);
  } */
}

/* ------------------------------------------------------- */

.container .row .dropShadow:hover .blackOverlay {
    top: 0;
}

.items {
    width: 100%;
    height: 100%;
    position: relative;
    border: 2px solid var(--primary);
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 25px;
}
.items:hover .details {
    opacity: 1;
    transition: opacity 0.2s 0.3s;
}
.items div {
    position: absolute;
    /* z-index: 10 */
}

.items:hover .one {
    transition: all 0.3s;
    left: 0;
    bottom: 0;
}
.items img {
    object-fit: cover;
    height: 100%;
    border-radius: 6px;
    width: 100%;
}

.one h6 {
    text-align: left;
    margin-top: 270px;
    padding: 10px;
}
.one {
    right: 100%;
    bottom: 100%;
    width: inherit;
    height: inherit;
}

.items:hover .one {
    transition: all 0.3s;
    left: 0;
    bottom: 0;
}

.details {
    background-color: var(--primary);
    border-bottom-right-radius: 290px;
    /* height: 25% !important; */
    padding: 10px;
    top: 0;
    left: 0;
    font-family: georgia;
    /* color: #fff; */
    opacity: 0;
    width: 291px;
    z-index: 1000;

    transition-property: width;
    transition: width 20s ease-out 0.8s !important;
}

.wholehover {
    background-color: var(--primary);
    height: 25% !important;
    padding: 8%;
    /* padding-right: 20px; */
    bottom: 0;
    left: 0;
    font-family: georgia;
    color: #fff;
    opacity: 0;
    width: 100%;
    z-index: 1000;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    transition-property: width;
    transition: width 20s ease-out 0.8s !important;
}
.wholehover i {
    font-size: 25px;
    z-index: 1000;
    color: #f6b619;
}

.details h3 {
    margin-bottom: 20px;
}

.details h6 {
    text-align: left;

    color: white !important;
}

.one h6 {
    text-align: left;
    margin-top: 270px;
    padding: 10px;
}

.details p {
    font-size: 14px;
    font-style: italic;
    text-align: center;
    line-height: 20px;
}

.items:hover .details {
    opacity: 1;
    transition: opacity 0.2s 0.3s;
}

.blackOverlay {
    color: white;
    background-color: rgba(13,110,253,.25);
    position: absolute;
    top: -106%;
    height: 100%;
    width: 100%;
    padding: 10px;
    box-sizing: border-box;
    transition: all 0.2s;
}