/* Header Elements */


.site-main-header-inner-wrap {
    min-height: 0px;
    border-bottom: 1px solid #E3E2E0;
    padding-bottom: 17px;

}


.page-id-11 .site-main-header-inner-wrap, 
.page-id-13 .site-main-header-inner-wrap, 
.page-id-1009 .site-main-header-inner-wrap, 
.page-id-76 .site-main-header-inner-wrap, 
.page-id-15 .site-main-header-inner-wrap {
    border: none; 
}


.main-navigation {
    color:#fff;

}

.header-navigation .menu {
    padding: 108px 0px 0px 0px;
}

ul.sub-menu {
    border-radius: 0px 0px 8px 0px;
}



.last-menu-item a {
    padding-right: 0px !important;
}


/* Before I used my own site branding hook
.site-branding a.brand {
    align-items:start;
}
     */

.site-branding .site-title a {
    font-size: 28px;
    text-decoration: none;
    color: #444240;
}

.site-title {
    font-size: 28px !important;
} 

.custom-logo {
    width:56px;
    padding-bottom: 35px;
    padding-top: 0px;
}

.site-header-item {
    align-items: start;
}


/* My role and tools section */

.my-role-fields-container {
    display: inline-block;

}

.my-role-title {
    padding-right:17px;
}

.project-banner-container {
    margin-top:13px;
    font-size: 14px;
}

.my-role-fields-container .role-item {
    padding-right:20px;
}

.hashtag {
    color:#C0C1D0;
}

.dash-line {
    min-width: 32px;
    border-bottom: 1px #E3E2E0 solid;
    display: inline-block;
    margin-bottom: 4px;
    margin-right: 17px;
}


.my-tools-fields-container .role-item {
    max-width: 20px;
    display: block;
    float:right;
    margin-left: 20px;
}

.my-tools-title {
    font-size: 14px;
    padding-right:17px;
}

.my-tools-fields-container {
    display: inline;
    img {
        height:20px;
        width: auto;
    }
}

.project-banner-container {
    display: flex;
    justify-content: space-between;
}

/* Hiding the my role banner on pages that don't need it */

.page-id-1009 .project-banner-container {
    display: none;
}

.page-id-13 .project-banner-container {
    display: none;
}

.page-id-11 .project-banner-container {
    display: none;
}

.page-id-15 .project-banner-container {
    display: none;
}


/* Content Elements */

.entry-content-wrap {
    padding: 0px;
}

.single-content figure.wp-block-image {
    margin-bottom:0px;
}



/* Home Page */ 

.home-feather-img {
    position:absolute;
    width:400px !important;
    bottom: 380px;
    left: 800px;
}

/* About Page */ 

.about-heading-padding {
    margin-left:161px !important;
}

/* My Work Page */ 

.josh-img-block img {
    width:300px;
}


/* This is for adding more gap for the grid block since I couldn't find that in the block setting */
:where(.is-layout-grid) {
    gap: 3em;
}

/* Atomized Elements */ 

.kt-btn-size-small {
    font-size: 13px !important;
    background-color: green;
    border-radius: 2px 2px 8px 2px !important;
} /* Might need to revisit this code, not sure why I'm having to use important or what's overiding this button. Might get screwed up if I got to customize a button later. */ 

.kb-svg-icon-wrap {
    background-color: #FF3FC9;
    padding:7px 5px 7px 5px;
    border-radius: 0px 0px 5px 0px;
    color:#fff;
}

.josh-icon-btn {
    background: none !important;
    color:#FF3FC9 !important;
font-size: 15px !important;
padding-left: 0px !important;
}

.josh-icon-btn-contact {
    background: none !important;
    color:#fff !important;
font-size: 15px !important;
padding-left: 0px !important;
}

.josh-icon-btn-contact .kb-svg-icon-wrap  {
    background-color: #282522;
    padding:7px 5px 7px 5px;
    border-radius: 0px 0px 5px 0px;
    color:#fff;
}



.about-btn-pink {
    color:#FF3FC9 !important;
}

.multiply-josh {
    background-color: #F5F4F3; /* background to blend with */
}

.multiply-josh img {
    mix-blend-mode: multiply; /* blends with the parent's background */
}

.home-gradient {
    background: linear-gradient(180deg, #F0A132, #FF3FC9);
  background-clip: text;
  -webkit-background-clip: text;  /* Safari/Chrome */
  color: transparent;
  -webkit-text-fill-color: transparent; /* Safari */
  display: inline-block; /* Keeps the gradient from breaking across lines */
}

.wp-block-list {
    padding-left: 16px !important;
    line-height: 28px;
}

/* Form Styling */ 

.kb-form label {
    font-family: Manrope, sans-serif !important;
    font-size: 14px;
    font-weight: 600;
    color:#fff;
    
}

.kb-form .kadence-blocks-form-field .kb-text-style-field {
    background-color: rgba(255, 255, 255, 0.2) !important;
    border-color: #fff;
}

.kadence-blocks-form-field button {
    background-color: #282522 !important;
    font-family: Manrope, sans-serif !important;
    font-size: 14px !important;
}


/* Footer Styling */

.site-footer {
    width:430px;
    background:#231F20;
    color:#F5F4F3;
    border-radius: 0px 16px 0px 0px !important;
    padding-bottom: 0px;
    padding-top:20px;
}

.site-bottom-footer-inner-wrap {
    padding:14px 15px 0px 15px;
}

.footer-logo {
    display: block;
    float: left;
    font-weight: 300;
    margin-right: 50px;
    background:#F5F4F3;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
}

.footer-list {
    width:300px;
    float:left;
    font-size: 14px;
}

.footer-list ul {
    display: block;
    float: right;

}

.footer-list li {
    display: block;
    float:left;
    padding-right:2px;
    padding-top:11px;
    list-style-type: circle;
    color:#C1B8B0;
}

.footer-html {
    margin:-1em;
}



/* Animation */

.fade-in-text {
    opacity: 0;
    transition: opacity 1s ease-in;
  }
  
  .fade-in-text.visible {
    opacity: 1;
  }