/*#################################*/
/* Because of the nature of a portfolio 
based website I will not target global variables

P__BEM nameing will be used as multiple CSS files handle 
different project styling:
Page Block Element Modifier:
William Paul Blog Page stylyings = WPBP
i.e. WPBP__publicationinfo__con 
     = WPOnline Blog Page, publication info section, container
*/ 
/*#################################*/

:root {
    --highlight-color: #41e2ba;
    

    --primary-text-color: #ffffff;
    --tertiary-color: #050910;
    --quaternary-color: #0d192b;
    --pagebg-color: #0d192b;

    /* additional variabes */
    --wphp-titlemain-color: #ffffff;
    --wphp-titlesec-color: #41e2ba;
    --wphp-homenav-color-outline: #ffffff;
    --wphp-homenav-color-fill: #00000052;
    --wphp-homenav-color-shadow: #000000;
    --highlight-color-90-fade: #41e2ba18;
    --highlight-color-10-fade: #41e2bacc;
    --wphp-homenav-btn-text: #050910;

    --wpbd-tag-bg: #ffffff38;
    --wpbd-tag-border: #5c6361;
    --wpbd-tag-text: #c0c0c0;

    --mobnav-bg: rgba(41, 41, 41, 0.45);

    --project-hero-btn-primary-bg: #41e2ba;
    --project-hero-btn-secondary-bg: #dbdbdb;
    --project-hero-btn-primary-bg-hover: #8fffe1;
    --project-hero-btn-secondary-bg-hover: #f7f7f7;

    --project-hero-btn-secondary-text: #000000;
    --project-hero-btn-primary-text: #000000;

}

.dark-theme {
    --highlight-color: #180bb1;
    

    --primary-text-color: #213343;
    --tertiary-color: #f8f8ff;
    --quaternary-color: #0d192b;
    --pagebg-color: #ffffff;

    /*core colors*/
    

    /* additional variabes */
    --wphp-titlemain-color: #180bb1;
    --wphp-titlesec-color: #213343;
    --wphp-homenav-color-outline: #180bb1;
    --wphp-homenav-color-fill: #190bb122;
    --wphp-homenav-color-shadow: #c0c0c0;
    --highlight-color-90-fade: #190bb111;
    --highlight-color-10-fade: #190bb1cd;
    --wphp-homenav-btn-text: #FFFFFF;

    --wpbd-tag-bg: #190bb122;
    --wpbd-tag-border: #180bb1;
    --wpbd-tag-text: #190bb1c0;

    --mobnav-bg: rgba(217, 217, 217, 0.45);

    --project-hero-btn-primary-bg: #180bb1;
    --project-hero-btn-secondary-bg: #444444;
    --project-hero-btn-primary-bg-hover: #4a3aff;
    --project-hero-btn-secondary-bg-hover: #6b6b6b;

    --project-hero-btn-secondary-text: #ffffff;
    --project-hero-btn-primary-text: #ffffff;
}


/*Contact Bar CSS*/
.contact-bar-v2 {
    position: fixed;
    width: 100%;
    height: 40px;
    background: rgba(255, 255, 255, 0.2); 
    backdrop-filter: blur(10px); 
    -webkit-backdrop-filter: blur(10px); 
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); 
    border: 1px solid rgba(255, 255, 255, 0.3); 
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-left: 5vw;
    padding-right: 5vw;
    z-index: 20;
}

.contact-bar-v2 h3 {
    margin: 0;
    padding: 0;
    color: black;
    font-size: 1rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.contact-bar-v2 a {
    margin: 0;
    padding: 0;
    color: black;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 1px;
}

/*END OF CONTACT BAR CSS*/

.WP-V2-offscreen-menu {
    display: none;
}

.WP-V2-ham-menu {
    display: none;
}

/*Landing Page CSS*/

.landing-container-v2 {
    display: flex;
    align-items: start;
    justify-content: center;
    height: fit-content;
    width: 100vw;
    background-color: var(--pagebg-color);
    overflow: hidden;

}

.flex-inner-container {
    height: 100vh;
    width: 95vw;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    background-color: transparent;
    overflow: hidden;
}

.title-container-v2 {
    width: 70%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: start;
    background-color: transparent;
    padding-left: 5vw;
    overflow: hidden;
}

.title-container-v2 p {
    font-size: clamp(1rem, 1.6vw, 1.5rem);
    color: var(--wphp-titlesec-color);
    margin: 0;
    margin-bottom: 20px;
}

.title-container-v2 h1 {
    font-size: clamp(4rem, 7vw, 6rem);
    color: var(--wphp-titlemain-color);
    margin: 0;
    padding: 0;
    margin-bottom: 0;
}

.title-container-v2 h2 {
    font-size: clamp(1.2rem, 2vw, 3rem);
    color: var(--wphp-titlesec-color);
    margin: 0;
    margin-bottom: 20px;
}

.title-container-v2 h5 {
    font-size: clamp(1rem, 1.5vw, 3rem);
    color: var(--wphp-titlesec-color);
    margin: 0;
    padding: 0;
}

.nav-links-container-v2 {
    width: 30%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: end;
    background-color: transparent;
    gap: 14px;
    padding-right: 5vw;
}

.nav-links-container-v2 h2 {
    font-size: clamp(2rem, 3.2vw, 3rem);
    color: transparent;
    color: var(--wphp-homenav-color-fill);
    text-decoration: none;
    -webkit-text-stroke: 1px var(--wphp-homenav-color-outline);
    font-weight: 700;
    margin-bottom: 1rem;
    background-color: transparent;
    cursor: pointer;
    transition: all 0.4s ease-in-out;
}

.nav-links-container-v2 h2:hover {
    color: var(--wphp-homenav-color-outline);
    padding-right: 6px;
    text-shadow: var(--wphp-homenav-color-shadow) -1px 1px 5px;
    
}

.WPHP__scroll-notification__con {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    height: 100px;
    background-color: var(--pagebg-color);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 60px;
    opacity: 1;
    transition: all 0.2s ease-in-out;
    color: var(--highlight-color);
    overflow: hidden;
}

.WPHP__scroll-notification__con h2 {
    font-size: 1.5rem;
    color: var(--highlight-color);
}



.discover-arrow {
    width: 30px;
    height: 30px;
    animation: bounce 2s infinite ease-in-out;
}

@keyframes bounce {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

.discover-arrow path {
    fill: var(--highlight-color);
}

.WPHP__project-hero-con {
    height: 100vh;
    width: 100vw;
    display: flex;
    flex-direction: row;
    background-color: var(--pagebg-color);
    overflow: hidden;
}

.WPHP__project-hero-text {
    padding-left: 4%;
    padding-right: 3%;
    height: 100%;
    width: 50%;
    color: var(--primary-text-color);

}

.WPHP__project-hero-imgs-con {
    position: relative;
    height: 100%;
    width: 50%;
}

.WPHP__project-hero-img-ak1 {
    position: absolute;
    width: 80%;
    left: 1%;
}

.WPHP__project-hero-img-ak2 {
    position: absolute;
    width: 50%;
    right: 4%;
    top: 5%;
}

.WPHP__project-hero-img-ak3 {
    position: absolute;
    width: 60%;
    top: 32%;
    filter: drop-shadow(4px 6px 3px black)
    
}
.WPHP__project-hero-btns__con {
    display: flex;
    flex-direction: row;
    gap: 8px;
    margin-top: 20px;
}
.WPHP__project-hero-btn-primary {
    width: 150px;
    height: 48px;
    background-color: var(--project-hero-btn-primary-bg);
    border: var(--project-hero-btn-primary-bg) 1px solid;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    color: var(--project-hero-btn-primary-text);
}

.WPHP__project-hero-btn-primary:hover {
    background-color: var(--project-hero-btn-primary-bg-hover);
    border: var(--project-hero-btn-primary-bg-hover) 1px solid;
    color: var(--project-hero-btn-primary-text);
    transition: all 0.2s ease-in-out;
}

.WPHP__project-hero-btn-secondary {
    width: 150px;
    height: 48px;
    background-color: var(--project-hero-btn-secondary-bg);
    border: var(--project-hero-btn-secondary-bg) 1px solid;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    color: var(--project-hero-btn-secondary-text);
}

.WPHP__project-hero-btn-secondary:hover {
    background-color: var(--project-hero-btn-secondary-bg-hover);
    border: var(--project-hero-btn-secondary-bg-hover) 1px solid;
    color: var(--wphp-homenav-btn-text);
    transition: all 0.2s ease-in-out;
}

/*END OF LANDING PAGE CSS*/

/*CV CSS*/

.cv-container {
    width: 100vw;
    height: fit-content;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: var(--pagebg-color);
}

.cv-container-inner {
    margin-top: 100px;
    margin-bottom: 50px;
    width: 95%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

}

.cv-title-section {
    height: 700px;
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: start;
    justify-content: start;
}

.cv-title-img {
    position: absolute;
    width: 40vw;
    max-width: 470px;
    height: 640px;
    margin-left: 30px;
    object-fit: cover;
    box-shadow: var(--highlight-color) 0px 0px 10px;
}

.cv-title-text {
    margin-top: 30px;
    padding-top: 30px;
    padding-left: clamp(200px, 40vw + 60px, 530px);
    padding-right: 50px;
    background-color: var(--tertiary-color);
    border: var(--highlight-color) 0.4px solid;
    width: 100%;
    height: 580px;
    color: var(--primary-text-color);
}

.cv-title-text h1 {
    font-size: clamp(2.2rem, 3vw, 2.8rem);
    margin: 0;
    padding: 0;
}

.cv-title-text h2 {
    font-size: clamp(1rem, 2vw, 2.2rem);
}

.cv-title-text p {
    font-size: clamp(0.8rem, 1.1vw, 1.2rem);
    margin: 0;
    padding-top: 20px;
    border-top: var(--primary-text-color) 1px solid;
}

.cv-body-section-top {
    width: 100%;
    height: fit-content;
    display: flex;
    flex-direction: row;
    align-items: start;
    justify-content: center;
}

.education-section {    
    display: flex;
    flex-direction: column;
    width: 29.5%;
    margin-right: 0.5%;
    height: fit-content;
    border: var(--highlight-color) 0.4px solid;
}

.education-section-top {
    background-color: var(--tertiary-color);
    padding: 10px;
}

.qualification-container {
    width: 100%;
    height: 150px;
    overflow: hidden;
    display: flex;
    flex-direction: row;
    padding: 10px;
}

.qualification-container img {
    width: 4.1vw;
    max-width: 70px;
    height: auto;
    object-fit: contain;
}

.qualification-text {
    display: flex;
    align-items: start;
    justify-content: center;
    flex-direction: column;
    padding-left: 26px;
    color: var(--primary-text-color);
}

.qualification-text h3 {
    font-size: clamp(1rem, 1.2vw, 1.3rem);
}

.qualification-text h4 {
    font-size: clamp(0.9rem, 1.1vw, 1.1rem);
}

.qualification-text p {
    margin:0;
    font-size: clamp(0.8rem, 1vw, 1rem);
}

.skills-v2 {
    padding-top: 20px;
    width: 100%;
    height: fit-content;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background-color: var(--tertiary-color);
}

.skills-row {
    display: flex;
    flex-direction: row;
    align-items: start;
    justify-content: start;
    height: fit-content;
    padding: 20px;
}

.skills-row img {
    width: 33.33%;
    height: auto;
    object-fit: contain;
    padding: 20px;
}

.experience-section{
    width: 69.5%;
    margin-left: 0.5%;
    height: fit-content;
    background-color: var(--tertiary-color);
    border: var(--highlight-color) 0.4px solid;
    padding: 18px 10px 10px 10px;
}

.job-entry {
    display: flex;
    flex-direction: row;
    align-items: start;
    justify-content: start;
    height: fit-content;
    border-bottom: var(--primary-text-color) 0.2px solid;
    margin-top: 14px;
}

.tlt-grid {
    display: grid;
    width: 40%;
    grid-template-columns: 15% 20% 65%;
    grid-template-rows: 100%;
    align-items: center;
    justify-content: start;
}

.tlt-grid img {
    grid-row: 1;
    grid-column: 2;
    width: 100%;
    height: auto;
    object-fit: contain;
}

.tlt-time {
    grid-row: 1;
    grid-column: 1;
    color: var(--primary-text-color);
    font-size: 0.9rem;
}

.tlt-title {
    grid-row: 1;
    grid-column: 3;
    display: flex;
    flex-direction: column;
    color: var(--primary-text-color);
    padding-left: 14px;
}

.tlt-title h5 {
    font-size: 1.1rem;
}

.tlt-title p {
    margin: 0;
    font-size: 0.9rem;
}

.job-description {
    width: 60%;
}

.job-entry p {
    color: var(--primary-text-color);
}

/*END OF CV CSS*/

/*Project page css*/

.projects-container-v2 {
    width: 100vw;
    height: fit-content;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: var(--pagebg-color);   
}

.projects-container-inner-v2 {
    width: 95%;
    height: fit-content;
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 100px;
    margin-bottom: 100px;
}

.project-display-v2 {
    width: 100%;
    height: 500px;
    display: flex;
    flex-direction: row;
    background-color: var(--tertiary-color);
    border: var(--highlight-color) 1px solid;
}

.prj-img-container-v2 {
    height: 100%;
    width: 50%;
    background-color: thistle;
}

.prj-txt-container-v2 {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: start;
    width: 50%;
    color: var(--primary-text-color);
    padding: 20px;
}

.prj-link {
    align-self: flex-end;
    margin-bottom: 15px;
    margin-right: 15px;
    width: 150px;
    height: 40px;
    background-color: var(--highlight-color-90-fade);
    border: var(--highlight-color) 1px solid;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.4s ease-in-out;
    color: var(--wphp-titlemain-color);
}

.prj-link:hover {
    background-color: var(--highlight-color-10-fade);
    border: var(--wphp-homenav-btn-text) 1px solid;
    color: var(--wphp-homenav-btn-text);
    transition: all 0.4s ease-in-out;
}

.prj-img-v2 {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

/*END OF PROJECT PAGE CSS*/

/*Navigation Bar CSS*/

.navbar-v2 {
    position: fixed;
    width: 100vw;
    height: 80px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    z-index: 20;
    padding-left: 25px;
    padding-right: 50px;

    background-color: var(--pagebg-color);
    border-bottom: var(--wphp-titlesec-color) 1px solid;
    transition: all 0.2s ease-in-out;
}

.navbar-v2.no-line {
    border-bottom: none;
    justify-content: start;
    transition: all 0.2s ease-in-out;
}

.nav-logo-v2 {
    display: flex;
    align-items: center;
    justify-content: start;
    height: 100%;
    width: auto;
    object-fit: contain;
    padding: 15px;
}

.logo-color g {
    fill: var(--highlight-color);
}


.navbar-links-v2 {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: end;
    width: 100%;
    height: 100%;
    gap: 40px;
    opacity: 1;
    transition: all 0.2s ease-in-out;
}

.hidden {
    opacity: 0;
    transition: all 0.2s ease-in-out;
}

.navbar-links-v2 p {
    color: var(--wphp-titlesec-color);
    padding: 0;
    margin: 0;
    cursor: pointer;
    transform: scale(1);
    transition: all 0.4s ease-in-out;
}

.navbar-links-v2 p:hover {
    transform: scale(1.05);
    transition: all 0.4s ease-in-out;
}

.contact-button-v2 {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 50%;
    width: 120px;
    background-color: var(--highlight-color-90-fade);
    border: var(--highlight-color) 1px solid;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.4s ease-in-out;
}

.contact-button-v2 p {
    color: var(--highlight-color);
    padding: 0;
    margin: 0;
    cursor: pointer;
    transition: all 0.4s ease-in-out;
}

.contact-button-v2:hover {
    background-color: var(--highlight-color-10-fade);
    border: var(--wphp-homenav-btn-text) 1px solid;

    p {
        color: var(--wphp-homenav-btn-text);
    }
}

.contact-button-v2 p:hover {
    transform: scale(1);
    transition: all 0.4s ease-in-out;
}


/*END OF NAVIGATION BAR CSS*/

/*Blog Directory CSS*/

.blog-directory-container{
    min-height: 100vh;
    height: fit-content;
    background-color: var(--pagebg-color);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: start;
}

.blog-title-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-top: 80px;
    width: 100%;
    height: 80px;
}

.blog-title-container h1 {
    font-size: 2vw; /*UpM: 5*/
    color: var(--primary-text-color);
    margin: 0;
    padding: 0;
}

.blog-directory-container-inner {
    width: 98%;
    min-height: 80vh;
    height: fit-content;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: start;
    margin-bottom: 100px;
    padding: 8px;
    gap: 10px;
}

.blog-top-three {
    display: flex;
    flex-direction: row;
    height: 500px;
    width: 100%;
    gap: 0.5%;
}

.most-recent-post {
    width: 66.5%;
    height: 500px;
    border: var(--highlight-color) 1px solid;
    background-color: var(--tertiary-color);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-self: start;
    padding: 20px;
    overflow: hidden;
}

.top-con-80 {
    width: 100%;
    height: 80%;
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: start;
    gap: 14px;
}

.bottom-con-20 {
    width: 100%;
    height: 20%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: start;
}

.most-recent-post-title-bar {
    width: 100%;
    height: fit-content;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: start;
    gap: 14px;
    color: var(--primary-text-color);
}

.most-recent-post-img-con {
    width: 50px;
    height: 50px;
    overflow: hidden;
    border: var(--wphp-titlemain-color) 1px solid;
    border-radius: 25px;
}

.most-recent-post-img-con img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.most-recent-post-title-bar p {
    margin: 0;
    padding: 0;
    color: var(--primary-text-color);
}

.most-recent-post-title-bar h5 {
    margin: 0;
    padding: 0;
    color: var(--primary-text-color);
}

.most-recent-post h1 {
    color: var(--primary-text-color);
}

.blog-description {
    color: var(--primary-text-color);
}

.read-more-button {
    width: 150px;
    height: 40px;
    background-color: var(--highlight-color-90-fade);
    border: var(--highlight-color) 1px solid;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.4s ease-in-out;
    color: var(--wphp-homenav-color-outline);
}

.read-more-button:hover {
    background-color: var(--highlight-color);
    border: var(--wphp-homenav-btn-text) 1px solid;
    color: var(--wphp-homenav-btn-text);
    transition: all 0.4s ease-in-out;
}

.blog-item {
    width: 100%;
    height:100%;
    display: flex;
    flex-direction: column;
    padding: 20px;
}

.blog-item-top {
    display: flex;
    flex-direction: row;
    gap: 14px;
    color: var(--primary-text-color);
    align-items: center;
    justify-content: start;
}

.blog-tag-row {
    display: flex;
    flex-direction: row;
    gap: 14px;
    align-items: center;
    justify-content: start;
}

.blog-tag {
    background-color: var(--wpbd-tag-bg);
    border: var(--wpbd-tag-border) 1px solid;
    color: var(--wpbd-tag-text);
    padding: 0px 15px 0px 15px;
}

.blog-tag p {
    margin: 0;
    padding: 0;
}

.small-blog-title {
    font-size: 1.5rem;
    color: var(--primary-text-color);
    margin: 0;
    padding: 0;
}





.top-three-side {
    width: 33%;
}

.top-three-side {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.blog-top-three-side-item {
    height: 245px;
    border: var(--highlight-color) 1px solid;
    background-color: var(--tertiary-color);
}

.blog-second-three {
    display: flex;
    flex-direction: row;
    height: 250px;
    width: 100%;
    gap: 0.5%;
}

.blog-second-three-item {
    width: 33%;
    height: 250px;
    border: var(--highlight-color) 1px solid;
    background-color: var(--tertiary-color);
}

/*END OF BLOG DIRECTORY CSS*/

/*Blog Post CSS*/

.blog-entry-page {
    position: absolute;
    background-color: var(--pagebg-color);
    padding-top: 100px;
    width: 100vw;
    height: fit-content;
    display: flex;
    flex-direction: row;
    align-items: start;
    justify-content: center;
}

.blog-entry-container {
    width: 70%;
    height: fit-content;
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: start;
    padding: 10px;
}

.WPBP__publicationinfo__con {
    width: 90%;
    height: fit-content;
    border-bottom: var(--primary-text-color) 2px solid;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 14px 10px 14px 10px;
    margin-bottom: 14px;
}

.WPBP__publicationinfo__con-authorinfo {
    height: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 14px;
}

.WPBP__publicationinfo__con-authorinfo-img {
    width: 50px;
    height: 50px;
    overflow: hidden;
    border: var(--primary-text-color) 1px solid;
    border-radius: 25px;
}

.WPBP__publicationinfo__con-authorinfo-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.WPBP__publicationinfo__con-authorinfo p {
    all: unset;
    color: var(--primary-text-color);
    font-size: 1.2rem;
}

.WPBP__publicationinfo__con-dateinfo {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.WPBP__publicationinfo__con-dateinfo p {
    all: unset;
    color: var(--primary-text-color);
    font-size: 1.2rem;
}

.blog-quick-nav-bar {
    width: 25%;
    height: 50vh;
    border: var(--highlight-color) 1px solid;
    padding: 14px;
    position: sticky;
    top: 100px;
    right: 0;
    color: var(--primary-text-color);
}

.blog-title {
    color: var(--primary-text-color);
    border-bottom: var(--primary-text-color) 2px solid;
    width: 90%;
    font-size: 3rem;
    margin: 0;
    padding: 0;
    padding-bottom: 5px;
}

.blog-text-container {
    width: 100%;
    height: fit-content;
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: start;
    color: var(--primary-text-color);
}

.blog-text-container img {
    width: 90%;
    height: 400px;
    object-fit: cover;
    margin-top: 20px;
    margin-bottom: 20px;
}

.blog-text-container p {
    width: 90%;
    font-size: 1.125rem;
    font-weight: 300;
    line-height: 1.77777778;
    overflow-wrap: normal;
}

/*END OF BLOG POST CSS*/

/*Client Zone CSS*/

.client-zone-page {
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: var(--pagebg-color);

}

.client-zone-inner {
    width: 95%;
    height: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    border: var(--highlight-color) 1px solid;
    background-color: var(--tertiary-color);
}

.client-zone-inner h1 {
    color: var(--primary-text-color);
}

.client-zone-inner p {
    color: var(--primary-text-color);
}


/*END OF CLIENT ZONE CSS*/

/*Contact Form CSS*/

.WP-V2-contact-form-con {
    display: none;
}

.WP-V2-contact-form-con.active {
    position: fixed;
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: #0d192bda;
    z-index: 21;
}

.WP-V2-contact-form {
    display: none;
    z-index: 30;
}

.WP-V2-contact-form.active {
    width: 50%;
    height: 600px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background-color: var(--tertiary-color);
    border: var(--highlight-color) 1px solid;
    z-index: 30;
}

.WP-V2-internal-form-container {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: start;
}

.WP-V2-contact-form-grid {
    display: grid;
    width: 100%;
    height: 100%;
    grid-template-columns: 50% 50%;
    grid-template-rows: 8% 8% 8% 8% 8% 8% 32% 20%;
}

.WP-V2-form-title {
    height: 100%;
    width: 100%;
    padding: 0;
    margin: 0;
    grid-column: 1;
    grid-row: 1;
    color: var(--primary-text-color);
    font-size: 2rem;
}

.WP-V2-exit-icon {
    height: 100%;
    width: 100%;
    display: flex;
    align-items: start;
    justify-content: end;
    grid-column: 2;
    grid-row: 1;
    color: red;
    font-size: 2.2rem;
    cursor: pointer;
    padding: 0;
    margin: 0;
}

.WP-V2-fn-title {
    height: 100%;
    width: 100%;
    display: flex;
    align-items: end;
    justify-content: start;
    grid-column: 1;
    grid-row: 2;
    color: var(--primary-text-color);
    font-size: 1rem;
    padding-bottom: 6px;
}

.WP-V2-fn-input {
    height: 100%;
    width: 95%;
    grid-column: 1;
    grid-row: 3;
    background-color: var(--tertiary-color);
    border: var(--highlight-color) 1px solid;
    color: var(--primary-text-color);
    padding: 10px;
}

.WP-V2-sn-title {
    height: 100%;
    width: 100%;
    display: flex;
    align-items: end;
    justify-content: start;
    grid-column: 2;
    grid-row: 2;
    color: var(--primary-text-color);
    font-size: 1rem;
    padding-bottom: 6px;
}

.WP-V2-sn-input {
    height: 100%;
    width: 95%;
    grid-column: 2;
    grid-row: 3;
    background-color: var(--tertiary-color);
    border: var(--highlight-color) 1px solid;
    color: var(--primary-text-color);
    padding: 10px;
}

.WP-V2-email-title {
    height: 100%;
    width: 100%;
    display: flex;
    align-items: end;
    justify-content: start;
    grid-column: 1;
    grid-row: 4;
    color: var(--primary-text-color);
    font-size: 1rem;
    padding-bottom: 6px;
}

.WP-V2-email-input {
    height: 100%;
    width: 95%;
    grid-column: 1;
    grid-row: 5;
    background-color: var(--tertiary-color);
    border: var(--highlight-color) 1px solid;
    color: var(--primary-text-color);
    padding: 10px;
}

.WP-V2-message-title {
    height: 100%;
    width: 100%;
    display: flex;
    align-items: end;
    justify-content: start;
    grid-column: 1;
    grid-row: 6;
    color: var(--primary-text-color);
    font-size: 1rem;
    padding-bottom: 6px;
}

.WP-V2-message-input {
    height: 100%;
    width: 100%;
    grid-column: 1 / span 2;
    grid-row: 7;
    background-color: var(--tertiary-color);
    border: var(--highlight-color) 1px solid;
    color: var(--primary-text-color);
    padding: 10px;
}

.WP-V2-submit-button {
    height: 50%;
    width: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: center;
    justify-self: center;
    grid-column: 1 / span 2;
    grid-row: 8;
    background-color: var(--tertiary-color);
    border: var(--highlight-color) 1px solid;
    color: var(--primary-text-color);
    cursor: pointer;
    transition: all 0.4s ease-in-out;
}


/*END OF CONTACT FORM CSS*/

.theme-btn {
    width: 150px;
    height: 40px;
    background-color: var(--highlight-color-90-fade);
    border: var(--highlight-color) 1px solid;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.4s ease-in-out;
    color: var(--wphp-titlesec-color);
}

.theme-btn i {
    margin-right: 10px;
}

.theme-btn:hover {
    background-color: var(--highlight-color-10-fade);
    border: var(--wphp-homenav-btn-text) 1px solid;
    color: var(--wphp-homenav-btn-text);
    transition: all 0.4s ease-in-out;
}

/* Media Query for Mobile */
@media (max-width: 768px) {

    /*Nav Bar Mobile CSS*/
    .navbar-v2 {
        height: 60px;
        padding-left: 0vw;
        padding-right: 0vw;
        display: flex;
        align-items: center;
        justify-content: space-between;
        z-index: 23;
        
    }

    .WP-V2-ham-menu {
        display: flex;
        flex-direction: column;
        height: 30px;
        width: 30px;
        background-color: none;
        position: fixed;
        top: 15px;
        right: 15px;
        opacity: 1;
        transition: opacity 1s ease-in-out;
        z-index: 23;
    }

    .WP-V2-ham-menu span {
        height: 2px;
        width: 100%;
        background-color: var(--highlight-color);
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        transition: .3s ease;
    }

    .WP-V2-ham-menu span:nth-child(1) {
        top: 25%;
    }

    .WP-V2-ham-menu span:nth-child(3) {
        top: 75%;
    }

    .WP-V2-ham-menu.active span:nth-child(1) {
        top: 50%;
        transform: translate(-50%, -50%) rotate(45deg);
    }

    .WP-V2-ham-menu.active span:nth-child(2) {
        opacity: 0;
    }

    .WP-V2-ham-menu.active span:nth-child(3) {
        top: 50%;
        transform: translate(-50%, -50%) rotate(-45deg);
    }

    .WP-V2-offscreen-menu {
        padding-top: 100px;
        position: fixed;
        height: 100vh;
        width: 100vw;
        background: var(--mobnav-bg);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        top: 0;
        left: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: start;
        transform: translateX(100%);
        z-index: 22;
        transition: transform 0.5s ease-in-out;
    }

    .WP-V2-offscreen-menu.active {
        transform: translateX(0);
    }

    .WP-V2-offscreen-menu p {
        font-size: 2rem;
        text-decoration: none;
        margin: 20px;
        color: var(--wphp-titlemain-color);       
        text-decoration: none;
        font-weight: 700;
        margin-bottom: 1rem;
        background-color: transparent;
    }

    .navbar-links-v2 {
        display: none;
    }





    /*END OF NAV BAR MOBILE CSS*/

    /*Home Page Mobile CSS*/
    .landing-container-v2 {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: start;
        height: 100vh;
        width: 100vw;
        padding: 0;
        margin: 0;
    }

    .flex-inner-container {
        margin-top: 140px;
        height: 250px;
        width: 95vw;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        background-color: transparent;
    }

    .WPHP__scroll-notification__con {
        bottom: 0px;
        gap: 25px;
    }

    .nav-links-container-v2{
        display: none;
    }

    .title-container-v2 {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        background-color: transparent;        
        align-items: start;
        justify-content: start;
        padding-left: 0;
    }

    .title-container-v2 p {
        font-size: clamp(1rem, 1.6vw, 1.5rem);
        margin: 0;
    }

    .title-container-v2 h1 {
        font-size: clamp(2rem, 15vw, 6rem);
        margin: 0;
        margin-bottom: 15px;
        padding: 0;
    }

    .title-container-v2 h2 {
        font-size: clamp(1rem, 3vw, 3rem);
        margin-bottom: 15px;
    }

    .title-container-v2 h5 {
        font-size: clamp(1rem, 2vw, 3rem);
        margin: 0;
        padding: 0;
    }

    .WPHP__project-hero-con {
        flex-direction: column-reverse;
        height: fit-content;
    }

    .WPHP__project-hero-imgs-con {
        width: 100%;
        height: 300px;
    }

    .WPHP__project-hero-img-ak1 {
        width: 90%;
        left: 5%;
    }
    
    .WPHP__project-hero-img-ak2 {
        width: 50%;
        right: 0%;
        top: 15%;
    }
    
    .WPHP__project-hero-img-ak3 {
        width: 60%;
        top: none;
        bottom: 0;
        left: 5%;
    }

    .WPHP__project-hero-text {
        width: 100%;
        height: fit-content;
        padding: 20px;
    }

    .WPHP__project-hero-btns__con {
        margin-bottom: 40px;
    }

    /*END OF HOME PAGE MOBILE CSS*/

    /*CV Mobile CSS*/

    .cv-container-inner {
        margin-top: 100px;
        margin-bottom: 50px;
        width: 95%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    
    }
    
    .cv-title-section {
        height: fit-content;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: start;
        overflow: hidden;
    }
    
    .cv-title-img {
        position: relative;
        margin-top: 18px;
        width: 90%;
        height: 300px;
        margin-left: 0;
        object-fit: cover;
    }
    
    .cv-title-text {
        margin-top: 14px;
        margin-bottom: 14px;
        padding-top: 0;
        padding-left: 0;
        padding-right: 0;
        background-color: transparent;
        border: none;
        width: 90%;
        height: fit-content;
    }
    
    .cv-title-text h1 {
        font-size: clamp(2.2rem, 3vw, 2.8rem);
        margin: 0;
        padding: 0;
    }
    
    .cv-title-text h2 {
        font-size: clamp(1rem, 2vw, 2.2rem);
    }
    
    .cv-title-text p {
        font-size: clamp(0.8rem, 1.1vw, 1.2rem);
        margin: 0;
        padding-top: 20px;
    }

    .cv-body-section-top {
        width: 100%;
        height: fit-content;
        display: flex;
        flex-direction: column;
        align-items: start;
        justify-content: center;
    }

    .education-section {       
        margin:0;
        margin-top: 14px;
        width: 100%;
    }

    .education-section-top {
        padding: 10px;
    }

    .qualification-container {
        width: 90%;
        padding-left: 25px;
    }

    .qualification-container img {
        width: 10vw;
        height: auto;
        object-fit: contain;

    }

    .experience-section {
        margin: 0;
        margin-top: 14px;
        width: 100%;
    }

    .job-entry {
        display: flex;
        flex-direction: column;
        align-items: start;
        justify-content: start;
        height: fit-content;
        margin-top: 14px;
    }

    .tlt-grid {
        display: grid;
        width: 100%;
        grid-template-columns: 15% 20% 65%;
        grid-template-rows: 100%;
        align-items: center;
        justify-content: start;
    }

    .job-description {
        width: 100%;
    }




    /*END OF CV MOBILE CSS*/

    /*Project Page Mobile CSS*/

    .project-display-v2 {
        width: 100%;
        height: fit-content;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    .prj-img-container-v2 {
        height: 150px;
        width: 100%;
        overflow: hidden;
    }

    .prj-img-container-v2 img {
        height: 100%;
        width: 100%;
        object-fit: cover;
    }

    .prj-txt-container-v2 {
        display: flex;
        flex-direction: column;
        width: 100%;
        padding: 20px;
    }

    .prj-link {
        margin-bottom: 5px;
        margin-right: 5px;

    }




    /*END OF PROJECT PAGE MOBILE CSS*/
    

    /*Blog Directory Mobile CSS */

    .blog-title-container h1 {
        font-size: 1.5rem;
    }

    .blog-directory-container-inner {
        width: 95%;
        height: fit-content;
        align-items: start;
        justify-content: start;
    }

    .blog-top-three {
        display: flex;
        flex-direction: column;
        height: fit-content;
        width: 100%;
        gap: 10px;
    }
    
    .most-recent-post {
        width: 100%;
        height: fit-content;
    }

    .top-con-80 {
        gap: 14px;
    }

    .most-recent-post-title-bar {
        gap: 0px;
        justify-content: space-between;
    }

    .most-recent-post-title-bar p {
        font-size: 1rem;
    }
    
    .most-recent-post-title-bar h5 {
        font-size: 1.1rem;
    }

    .most-recent-post h1 {
        font-size: 1.3rem;
    }
    
    .blog-description {
        font-size: 1rem;
    }

    .read-more-button {
        margin-top: 24px;
    } 

    .blog-tag-row {
        flex-wrap: wrap;
    }

    .top-three-side {
        width: 100%;
    }

    .blog-second-three {
        flex-direction: column;
        height: fit-content;
        gap: 10px;
    }

    .blog-second-three-item {
        width: 100%;
        height: fit-content;
    }


    /*END OF BLOG DIRECTORY MOBILE CSS */

    /*Blog Entry Mobile CSS */

    .blog-entry-page {
        flex-direction: column;
        align-items: center;
    }

    .blog-entry-container {
        width: 100%;
        align-items: center;


    }

    .blog-quick-nav-bar {
        position: relative;
        width: 90%;
        height: fit-content;
        top: 0;
        margin-bottom: 20px;
    }

    .blog-title {
        width: 90%;
        font-size: 1.4rem;
        margin: 0;
        margin-bottom: 15px;
        padding: 0;
        padding-bottom: 5px;
        text-align: center;
    }
    
    .blog-text-container {
        width: 100%;
        height: fit-content;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: start;
        overflow-y: hidden;
    }

    .blog-text-container h3 {
        width: 90%;
        font-size: 1.2rem;
        text-align: center;
    }


    








    /*BLOG ENTRY MOBILE CSS END*/
}