/*
Theme Name: Titan Packaging
Theme URI: 
Author: Marius Cautis
Author URI: 
Description: A WordPress theme created by Giant for Titan Packaging
Requires at least: 6.7
Tested up to: 6.7
Requires PHP: 5.7
Version: 
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Template: twentytwentyfive
Text Domain: titan-packaging
Tags: 



Table of Contents
- Globals
- Backend styling
- Page Jumper Css
- Contact labels
- Hero Section (Item-1)
- Homepage - module (#item-3)
- Homepage - module (#item-4)
- Homepage - module (#item-6)
- Homepage - module (#item-7)
- Copyright Block
- Footer Styling
- Static Hero - Native Block - Pattern
- Floating Block - Native Block - Pattern
- Contact Module - Native Block - Pattern
- Map Module - Native Block - Pattern
- Content Block with Icons - Native Block - Pattern
- Query list block - Native Block - Pattern
- Partners Area - Native Block - Pattern
- Related Products Block - Native Block - Pattern
- Yellow Banner Block - Native Block - Pattern
- News Page
- Header
- Navigation Menu
- Team members module
- Benefits Banner
- Search Results Page
- Three Column Section - Native Block
/*

/* Globals Start */


@import url("https://use.typekit.net/syb1qtv.css");

a{
    transition: 0.3s;
}
a:hover{
    transition: 0.3s;
}
:root {
    /* Colours */
    --titanBeige : #D3C6C2;
    --titanYellow : #FAE600;
    --titanBlue : #330DF3 ;
    /* --titanGreen : #59C800;  (Old Green) */
    --titanGreen : #488F0E;
    --titanGrey : #E0E0E0;
    --titanDarkGrey : #3d3d3d;
    --TitanNavy :  #3a4a89;

    --termina-light: 300;
    --termina-regular: 400;
    --termina-medium: 500;
    --termina-bold: 700;
}


html {
    scroll-behavior: smooth;
}


body {
    font-family: "termina", sans-serif !important;
    font-weight: var(--termina-regular);
    font-style: normal;
}




.wp-block-cover {
    /* scroll-behavior: smooth;
    transition: transform 0.2s ease-in-out, opacity 0.2s ease-in-out; */
}

.has-global-padding > .alignfull{
    margin-left: unset !important;
    margin-right: unset !important;
    margin: auto !important;
}


.connected-paragraphs em{
    text-decoration: unset;
    font-style: unset;
    color: var(--titanYellow);
}

.duo-colour-heading-yellow em{
    text-decoration: unset;
    font-style: unset;
    color: var(--titanYellow);
}
.no-desktop-max-width{
    max-width: unset !important;
}
a:focus,
a:focus-visible{
    outline: unset !important;
}


.entry-content{
    padding-left: unset !important;
    padding-right: unset !important;
}

.container-xl{
    max-width: 1900px;
    width: 100%;
    margin: auto !important;
}
.container{
    max-width: 1600px;
    width: 100%;
    margin: auto !important;
}

.container-small{
    max-width: 1400px;
    width: 100%;
    margin: auto !important;
}
.container-xs{
    max-width: 1100px;
    width: 100%;
    margin: auto !important;
}
.centered{
    margin: auto !important;
}
.max-width-1200{
    max-width: 1200px;
}
.max-width-1100{
    max-width: 1100px;
}
.max-width-1000{
    max-width: 1000px;
}
.max-width-900{
    max-width: 900px;
}
.max-width-800{
    max-width: 800px;
}
.max-width-700{
    max-width: 700px;
}
.max-width-600{
    max-width: 600px;
}
.max-width-500{
    max-width: 500px;
}
.max-width-400{
    max-width: 400px;
}
.no-max-width{
    max-width: unset !important;
}
.content-img{
    max-width: unset;
    display: flex;
    justify-content: center;
}
.white-green-text strong{
    color: var(--titanGreen);
}
#blue-banner .wp-block-button a {
    min-width: 100px;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

#underlap-module{
    margin-top: -150px !important;  
}
.read-more-btn{
    margin: auto;
}

.owl-carousel.owl-drag .owl-item {
    touch-action: pan-y;
}


.outer{
    width: 100%;
    max-width: unset;
    position: relative;
}
.outer::after{

    content: '';
    height: 2px;
    bottom: -150px;
    width: 100%;
    background-color: var(--titanBlue);
    position: absolute;
    bottom: 10px;
    z-index: 0;
}
.relative{
    position: relative;
}
.right-float{
    position: absolute;
    right: 20px;
    top: 20px;
}
.nowrap{
    flex-wrap: nowrap !important;
}
.green-btn a:hover{
    background-color: var(--titanYellow) !important;
    color: var(--titanBlue) !important;
    transition: 0.3s;
}

.yellow-btn a:hover{
    background-color: var(--titanBlue) !important;
    color: var(--titanYellow) !important;
    transition: 0.3s;
}
.inline-buttons{
    flex-wrap: nowrap;
}
.no-owl-dots .owl-dots{
    display: none !important;
}
.btn-yellow-background a{
    border: 1px solid var(--titanYellow) !important;
}
.btn-yellow-background:hover a{
    
    background-color: var(--titanBlue) !important;
    color: var(--titanYellow) !important;
}


.has-dark-green-filter{
    filter: invert(50%) sepia(17%) saturate(1657%) hue-rotate(57deg) brightness(92%) contrast(97%);
}

@media screen and (min-width: 1250px){
    .postid-225 #yellow-banner.left .dyk-col h2{
        bottom: -160px;
    }
}
  
@media screen and (max-width: 1200px){
    .home-scrolled {

    }
  
    .home-scrolled header{
        padding-bottom: 30px;
        background: rgba(250, 230, 0, 0.7);
        transition: 0.5s;
    }
    
    .relative {
        padding-top: 140px !important;
        justify-content: center !important;
        display: flex ;
    }
    .relative .wp-block-cover__inner-container{
        display: flex !important;
        justify-content: center !important;
    }
    .right-float{
        width: 100px !important;
        right: unset;
        top: -100px;
    }
}
@media screen and (max-width: 1000px){
    .break-1000{
        flex-wrap: wrap !important;
    }
    .break-1000 .wp-block-column{
        flex-basis: 100% !important;
    }
    .wp-block-cover.item{
        height: auto !important;
    }
    #underlap-module{
        margin-top: 0px !important;
        padding-top: 0px !important;
    }
}
@media screen and (max-width: 800px){
    .wp-block-cover{
        min-height: unset !important;
    }
    .sliding-item .wp-block-button a{
        font-size: 12px !important;
    }
    .dots-container{
        display: none !important;
    }
    h2{
        font-size: 1.5rem !important;
    }
    p.has-medium-font-size{
        font-size: 0.9rem !important;
    }
}

  /* Apply Termina to the whole body */
/* body {
    font-family: 'Termina', sans-serif !important;
    font-weight: 400; 
} */

/* Specific font weights */


/* .light-text {
    font-weight: 300;
}

.regular-text {
    font-weight: 400; 
}
.bold-text {
    font-weight: 700;
}

.extra-bold-text {
    font-weight: 900;
} */


.container-large{
    max-width: 2400px;
    width: 100%;
    margin: auto;
}
.container{
    max-width: 1600px;
    width: 100%;
    margin-left: unset !important;
    margin-right: unset !important;
    margin: auto !important;
}
.container-large{
    max-width: 2400px;
    width: 100%;
    margin: auto !important;
}

.iframe-wrapper {
    position: relative;
    /* pointer-events: none; Disable interactions by default */
  }
  

  
.iframe-wrapper .video-overlay{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-size: 16px;
    cursor: pointer;
    z-index: 10; 
}

.postid-809 #job-title {
    max-width: 1100px;
}
/* Globals End  */


/* - Backend styling Start  */

.acf-block-preview #logo-slider .owl-carousel{
    display: flex;
    flex-wrap: nowrap;
    overflow: scroll;
}
.acf-block-preview #logo-slider .owl-carousel img{
    max-height: 150px;
    width: auto;
    padding: 30px;
}
.acf-block-preview .post-row{
    display: flex;
    flex-wrap: nowrap;
    overflow-x: scroll;
}
/* - Backend styling End  */



/* - Page Jumper Css Start */




.wp-block-cover.item {
    height: 100vh; /* Full viewport height */
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2rem;
    transition: transform 0.8s ease-in-out;
    margin: unset;
    width: 100vw;
}

.item .video-hero{
    width: 100%;
}
.video-item{
    position: relative;
}


.dots-container {
    position: fixed;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 10px;
    z-index: 1;
    padding: unset;
}

.dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: transparent; /* Default dot color */
    cursor: pointer;
    border: 1px solid var(--titanBeige);
    transition: background-color 0.3s ease;
    display: flex;
    margin-bottom: 10px;
}

.dot.active {
    background-color: var(--titanBeige); /* Active dot color */

}
.dots-container ul{
    list-style: none;
    padding: unset;
}

#fp-nav {
    display: none;
}

.wp-block-cover .wp-block-cover__inner-container, 
.wp-block-cover-image .wp-block-cover__inner-container{
    position: relative;
}
.dot.footer{
    border: 1px solid var(--titanYellow);
}
 
.max-width-500{
    max-width: 500px;
}





/* - Contact labels Start  */
body.page-template-default{
    position: relative;
}
.contact-label-outer{
    position: fixed !important;
    opacity: 1 !important;
    bottom: 60px !important;
    z-index: 10;
    width: 100%;
}
.home .contact-label-outer{
    position: absolute !important;
    bottom: -10px !important;
    right: 0px;
    z-index: 100;
    left: 0px;
    display: flex;
    justify-content: right;
    z-index: 10;
}

.contact-label-outer .container{
    max-width: 1600px;
    margin: auto;
    width: 100%;
    display: flex;
    justify-content: right;
    gap: 20px;
}
.contact-label-outer h3{
    margin-top: 10px;
    font-weight: 900;
}
.contact-label-outer{
    text-decoration: unset;
}
.blue-contact-label{
    height: 50px;
    gap: 10px;
    display: flex;
    padding: 10px 20px;
    text-decoration: none;
    font-weight: 800;
    color: var(--titanYellow);
    background-color: var(--titanBlue);
    font-family: 'Termina', sans-serif !important;
}
.yellow-contact-label{
    height: 50px;
    gap: 10px;
    display: flex;
    padding: 10px 20px;
    text-decoration: none;
    font-weight: 800;
    background-color: var(--titanYellow);
    color: var(--titanBlue);
    font-family: 'Termina', sans-serif !important;
}
.blue-contact-label:hover{
    background-color: var(--titanYellow);
    color: var(--titanBlue);
}
.yellow-contact-label:hover{
    color: var(--titanYellow);
    background-color: var(--titanBlue);
}
.sliding-item {
    position: relative;
  }
  

  
.contact-label-outer {
    position: absolute;
    bottom: 0;
    right: 0;
    transform: translateY(100%);
    opacity: 0;
    transition: transform 0.4s ease, opacity 0.4s ease;
}

.contact-label-outer.show {
    transform: translateY(0%);
    opacity: 1;
}


@media screen and (max-width: 1400px){
    .contact-label-outer h3{
        font-size: 15px;
    }
    .yellow-contact-label,
    .blue-contact-label{
        height: 35px;
    }
    .contact-label-outer h3{
        font-size: 10px;
    }
    .yellow-contact-label,
    .blue-contact-label{
        padding: 0px 20px;
    }
    .home .contact-label-outer{
        position: fixed !important;
        
    }
    .contact-label-outer{
        bottom: 30px !important;
    }
}

@media screen and (max-width: 1000px){
    
}
@media screen and (max-width: 800px){
    .max-width-500{
        margin: auto !important;
    }
    .mobile-reduced-opacity .wp-block-cover__inner-container .wp-block-columns{
        background-color: rgba(0, 0, 0, 0.3) !important;
    }
    .home .contact-label-outer{
        position: fixed;
        opacity: 1;
        transform: unset;
    }
    .sliding-item {
        min-height: 35vh !important;
    }
    .home .contact-label-outer{
        bottom: -10px !important;
    }
}
@media screen and (max-width: 400px){
    .yellow-contact-label, .blue-contact-label{
        padding: 0px 10px;
        height: 30px;
    }
}
/* - Contact labels End */




/* Hero Section (Item-1) Start */

.hero-links-area {
    position: absolute;
    bottom: 100px;
    display: flex !important;    
    max-width: 1200px;
    gap: 0;
    margin: auto;
    gap: 20px;
}
.hero-links-area .wp-block-column{
    /* display: flex; */
    transition: 0.3s;
}
.hero-links-area .wp-block-column:hover{
    cursor: pointer;
    background-color:var(--titanYellow);
    transition: 0.3s;
}
.hero-links-area .wp-block-column:hover h3{
    color: var(--titanBlue) !important;
    transition: 0.3s;
}
#item-1 .wp-block-cover__inner-container{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    height: 100%;
}
.hero-links-area .hero-link a:hover{
    background-color: var(--titanBlue) !important;
    transition: 0.3s;
}
.hero-links-area a{
    border-width: 0px !important;
    
}
.hero-links-area a:hover{
    color: #fff !important;
}

@media screen and (max-width: 1220px){
    .hero-links-area{
        flex-wrap: wrap !important;
        max-width: 700px;
    }
    .hero-links-area.wp-block-columns:not(.is-not-stacked-on-mobile)>.wp-block-column .wp-block-column{
        flex-basis: 50% !important;
    }
    .hero-links-area .wp-block-column h3{
        padding: 20px 0px !important;
        font-size: 14px !important;
    }
}

@media screen and (max-width: 1050px){
    #item-1  .hero-link{
        flex-basis: 40%;
    }
    .hero-links-area{
        bottom: 80px;
    }
}
@media screen and (max-width: 1000px){
    #item-1  .hero-link{
        flex-basis: 40%;
    }
    .hero-links-area{
        bottom: -40px;
    }
    #item-1,
    #item-1 .wp-block-cover__inner-container{
        height: 70vh;
    }
    /* aici este */
}
@media screen and (max-width: 600px){
    #item-1,
    #item-1 .wp-block-cover__inner-container{
        height: 500px;
    }
    .hero-links-area{
        gap: 5px;
    }
}
@media screen and (max-width: 500px){
    #item-1,
    #item-1 .wp-block-cover__inner-container{
        height: 400px;
    }
}

@media screen and (max-width: 800px){
    #fullpage .sliding-item p strong{
        font-size: 14px !important;
    }
    #fullpage .sliding-item h2{
        font-size: 24px !important;
    }
    #item-1.sliding-item{
        min-height: 45vh !important;
    }
    #item-1.sliding-item .wp-block-columns{
        position: absolute;
        bottom: 10px;
    }
    .hero-links-area .wp-block-column{
        flex-basis: 40% !important;
        justify-content: center;
        display: flex;
        margin-bottom: 10px;
    }
    .hero-links-area .wp-block-column:nth-child(2) h3{
        margin-right: 20px;
    }
    #item-1.sliding-item .wp-block-column h3{
        padding: 10px 30px !important;
    }
    .hero-links-area{
        bottom: 30px;
    }
    .hero-links-area .hero-link a{
        display: flex;
        justify-content: center;
        align-items: center;
    }
}
@media screen and (max-width: 720px){
    .hero-links-area.wp-block-columns.is-not-stacked-on-mobile{
        display: flex;
        flex-wrap: wrap !important;
        max-width: 90%;
    }
    .hero-links-area .wp-block-column{
        flex-basis: 50% !important;
    }

}

@media screen and (max-width: 600px){
    .hero-links-area .hero-link a{
        font-size: 10px !important;
        padding: unset;
    }
}
/* Hero Section (Item-1) End */ 



/* - Homepage - module (#item-3) Start  */
@media screen and (max-width: 800px){
    #item-3 .item-three-img img{
        width: auto !important;
        height: 350px !important;
    }
    #item-3 .connected-paragraphs p{
        line-height: 0.8 !important;
    }
}

/* - Homepage - module (#item-3) End  */


/* - Homepage - module (#item-4) Start  */

@media screen and (max-width: 800px){
    #item-4 .products-row .post-item{
        min-width: 35%;
    }
}



/* - Homepage - module (#item-4) End  */



/* - Homepage - module (#item-6) Start  */

@media screen and (max-width: 800px){
    #item-6{
        min-height: 55vh !important;
        text-align: center;
    }
    #item-6 .wp-block-buttons.is-content-justification-left{
        justify-content: center;
    }
}
/* - Homepage - module (#item-6) End  */


/* - Homepage - module (#item-7) Start  */
@media screen and (max-width: 600px){
    #item-7 .post-row .post-item{
        min-width: 63%;
    }
}


/* - Homepage - module (#item-7) End  */


/* - Copyright Block Start  */

.copyright{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 50px;
}
/* - Copyright Block End  */



/* Footer Styling Start  */

footer{
    background-color: #111111;
}
.social-icons-row{
    margin-top: 20px;
    margin-bottom: 20px;
}
.social-icons-row .social-icon{
    margin-right: 30px !important;
    transform: scale(1);
    transition: 0.3s;
}
.social-icons-row .social-icon:hover{
    cursor: pointer;
    transform: scale(1.2);
    transition: 0.3s;
}
.footer-phone-link{
    margin-bottom: 20px;
    display: flex;
}
footer .logo-slider .owl-nav{
    display: none;
}

@media screen and (max-width: 781px){
    .details-columns{
        flex-wrap: nowrap !important; 
    }
    footer .footer-nav-columns .wp-block-columns{
        display: flex;
        flex-wrap: wrap !important;
    }
    footer .footer-nav-columns .wp-block-columns .wp-block-column{
        flex-basis: 45% !important;
    }
    footer .footer-nav-columns .wp-block-columns .wp-block-column h3{
        text-align: left !important;
    }
    .wp-container-core-navigation-is-layout-ce155fab{
        flex-direction: unset !important;
    }
    footer .footer-nav-columns .wp-block-columns .wp-block-column h3{
        text-align: left !important;
    }
    footer .footer-nav-columns .wp-block-column:nth-child(3) ul{
        width: 100%;
        text-align: left;
        justify-content: left;
    }
    footer .footer-nav-columns .wp-block-column:nth-child(3) ul li{
        width: 100%;
    }
    footer .footer-nav-columns .wp-block-column:nth-child(3) .wp-block-buttons{
        width: 100%;
    }
    footer .footer-bottom-area .wp-block-column .wp-block-group{
        justify-content: center;
    }
    footer .social-icons-row .social-icon{
        margin-left: 10px !important;
        margin-right: 10px !important;
    }
    
}
@media screen and (max-width: 600px){
    .details-columns{
        flex-wrap: wrap !important; 
    }
    
}


/* Footer Styling End  */






/* - Static Hero - Native Block - Pattern - Start  */

@media screen and (max-width: 800px){
    .static-hero{
        min-height: 400px !important;
        padding-top: 100px !important;
    }
    .static-hero h1{
        font-size: 2rem !important;
        margin-bottom: 20px !important;
    }
    .static-hero p{
        font-size: 0.9rem !important;
    }
    .static-hero .wp-block-cover__inner-container{
        padding: unset !important;
    }
}


/* - Static Hero - Native Block - Pattern - End  */


/* - Floating Block - Native Block - Pattern - Start  */


.wp-block-cover.floating-block.end-of-page{
    margin-bottom: 50px !important;
    overflow: visible;
}

.wp-block-cover.floating-block{
    margin-top: -150px !important;    
}
.wp-block-cover.floating-block{
    border: 20px solid transparent !important;
    z-index: 2;
}
@media screen and (max-width: 1000px){
    .wp-block-cover.floating-block{
        margin-top: -90px !important;
    }
    .wp-block-cover.floating-block.end-of-page{
        margin-bottom: 20px !important;
        margin-top: -90px !important;
    }
}
/* - Floating Block - Native Block - Pattern - End  */




/* - Contact Module  Start  */

#input_1_1_3_container label{
    display: none;
}
#contact-module .titan-contact select:focus,
#contact-module .titan-contact input:focus-visible,
#contact-module .titan-contact select:focus,
#contact-module .titan-contact input:focus-visible{
    outline: unset !important;
}
#contact-module .titan-contact select{
    display: flex;
    align-items: center;
}
#contact-module .titan-contact select,
#contact-module .titan-contact input{
    height: 50px;
    background-color: var(--titanGrey);
    border-radius: 0px;
    border: unset;
}
#field_1_11{
    border: unset;
}
#contact-module .gsection_description{
    max-width: 1000px;
    margin: auto;
    text-align: center;
}
#contact-module #field_1_12 input{
    height: auto;
    background-color: var(--titanBlue);
    border: 2px solid var(--titanBlue);
}
#contact-module #field_1_12 .gfield_checkbox {
    display: block;
    max-width: 900px;
    margin: auto;
    text-align: center;
}
#contact-module #field_1_12 .gfield_checkbox .gchoice{
    margin-right: 40px;
    margin-bottom: 20px;
}
#contact-module #field_1_12 .gfield_checkbox .gchoice:hover{
    cursor: pointer;
}
#contact-module #field_1_12 .gfield_checkbox .gchoice label{
    margin-left: 7px;
}
#contact-module .gform-theme--framework input[type=checkbox]:where(:not(.gform-theme__disable):not(.gform-theme__disable *):not(.gform-theme__disable-framework):not(.gform-theme__disable-framework *))::before{
    background: var(--titanYellow);
    /* font-family: unset !important; */
    width: 18px;
    border: 2px solid var(--titanBlue);
    color: var(--titanYellow);
}
#contact-module #field_1_12 .gfield_checkbox .gchoice input:focus,
#contact-module #field_1_12 .gfield_checkbox .gchoice input:focus-visible{
    outline: unset !important;
}

#contact-module .titan-contact textarea{
    background-color: var(--titanGrey);
    border-radius: 0px;
    border: unset;
    font-size: 26px;
}
#contact-module .gform-footer .gform_button{
    margin: auto;
    padding: 0px 20px;
    height: 20px;
    color: var(--titanBlue);
    background-color: var(--titanYellow);
    font-weight: 800;
    border: 1px solid var(--titanYellow);
}
#contact-module .gform-footer .gform_button:hover{
    background-color: var(--titanBlue);
    color: var(--titanYellow);
}

@media screen and (max-width: 800px){
    #contact-module #field_1_12 .gfield_checkbox{
        flex-direction: unset !important;
        display: flex;
        flex-wrap: wrap;
     }
     #contact-module #field_1_12 .gfield_checkbox .gchoice{
        margin-right: 20px;
     }
}
/* - Contact Module  End  */



/* - Map Module Start  */

#map-module .phone,
#map-module .location{
    position: relative;
}

#map-module .phone::before,
#map-module .location::before{
    content: '';
    position: absolute;
    top: 0px;
    left: 5px;
    width: 30px;
    height: 30px;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}
#map-module .phone::before{
    background-image: url('/wp-content/themes/titan-packaging/assets/images/phone.png');
}
#map-module .location::before{
    background-image: url('/wp-content/themes/titan-packaging/assets/images/location.png');
}
#map-module .wp-block-button a {
    min-width: 100px;
}

/* - Map Module End  */



/* - Content Block with Icons - Native Block - Pattern - Start */


@media screen and (max-width: 1000px){
    #content-icons .icon-row{
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    #content-icons .icon-row .wp-block-group{
        margin-bottom: 30px;
    }
    #content-icons figure img{
        max-width: 4rem;
    }
    #content-icons  h4{
        font-size: .8rem !important;
    }
    
}

@media screen and (max-width: 600px){
    #content-icons .icon-row{
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}



/* - Content Block with Icons - Native Block - Pattern - End */





/* Query List Block - Native Block - Pattern - Start */

.query-list-item ul{
    overflow-x: scroll;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    display: flex;
    flex-wrap: nowrap;
}

.query-list-item li{
    flex: 0 0 auto;
    white-space: normal;
    max-width: 33%;
}
.query-list-item li .wp-block-group{
    white-space: normal;
}

.query-list-item::after{
    content: '';
    position: absolute;
    height: 2px;
    width: 100%;
    bottom: 65px;
    display: flex;
    background-color: var(--titanYellow);
    z-index: 20;
    max-width: 1400px;
}


.query-list-item ul::-webkit-scrollbar {
    height: 20px;
    padding-bottom: 10px;
    max-width: 80% !important;
    margin: auto;
    /* border: 1px solid red; */
    z-index: 10;
}
.query-list-item ul::-webkit-scrollbar-thumb {
    background: var(--titanYellow);
    border-radius: 0px;
} 

@media screen and (max-width: 1250px){
    .query-list-item::after{
        bottom: 60px;
    }
}
@media screen and (max-width: 800px){
    .query-list-item li{
        max-width: 85%;
    }
}
@media screen and (max-width: 450px){
    .query-list-item li{
        max-width: 75%;
    }
}
/* Query List Block - Native Block - Pattern - End */


/* - Partners Area - Native Block - Pattern Start */

.partners-area{
    flex-wrap: wrap !important;
    display: flex !important;
    justify-content: center !important;
}
.partners-area .wp-block-column{
    flex-basis: 23% !important;
    flex-wrap: wrap !important;
    display: flex !important;
    justify-content: center !important;
}

@media screen and (max-width: 781px){
    .partners-area.wp-block-columns:not(.is-not-stacked-on-mobile)>.wp-block-column{
        flex-basis: 40%!important;
    }
}

@media screen and (max-width: 587px){
    .partners-area.wp-block-columns:not(.is-not-stacked-on-mobile)>.wp-block-column{
        flex-basis: 30%!important;
    }
    .partners-area .wp-block-column{
        padding-left: unset !important;
        padding-right: unset !important;
        padding-top: unset !important;
        padding-bottom: unset !important;
    }
}


/* - Partners Area - Native Block - Pattern End */



/* - Related Products Block - Native Block - Pattern Start */

#related-products {
    padding: 50px 0px;
}

#related-products .wp-block-cover__inner-container{
    padding-left: 0px;
    padding-right: 0px;
}
#related-products .scrollbar-wrapper {
    max-width: unset;
    overflow-x: auto;
    position: relative;
    padding-bottom: 30px;
}

#related-products .scrollbar-wrapper::after {
    content: '';
    position: absolute;
    height: 2px;
    width: 100%;
    bottom: 7px;
    background-color: var(--titanBlue);
    z-index: 2;
    max-width: 1400px;
    left: 50%;
    transform: translateX(-50%);
}

#related-products .wp-block-columns {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: scroll;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 40px;
    position: relative;
}
#related-products .wp-block-columns::before{
    content:'';
    /* height: 2px solid var(--titanBlue); */
    border: 1px solid var(--titanBlue);
    width: 100%;
    position: absolute;
    bottom: -5px;
    left: 50%;
    transform: translateX(-50%);
}

/* Scrollbar styling similar to .testimonials */
#related-products .wp-block-columns::-webkit-scrollbar {
    height: 20px;
}

#related-products .wp-block-columns::-webkit-scrollbar-thumb {
    background: var(--titanBlue);
    border-radius: 0px;
}

#related-products .wp-block-column {
    min-width: 20%;
    flex: 0 0 auto;
    position: relative;
}

#related-products .wp-block-column h5 {
    position: absolute;
    left: 10px;
    bottom: 10px;
    font-size: 1.6rem !important;
}

@media screen and (max-width: 800px) {
    #related-products .wp-block-column {
        max-width: 90%;
    }
}



/* - Related Products Block - Native Block - Pattern End */




/* - Yellow Banner Block - Native Block - Pattern Start */
#yellow-banner .wp-block-cover__inner-container{
    position: relative;
    z-index: 3;
}

#yellow-banner.right .wp-block-cover__inner-container::after{
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    right: 0;
    background-color: var(--titanYellow);
    width: 100vw;
    z-index: 0;
}

#yellow-banner.right .dyk-col{
    position: absolute;
    height: 100%;
    width: 70px;
    top: 0px;
    left: -70px;
    background-color: var(--titanBlue);
}
#yellow-banner.right .dyk-col h2{
    font-style: normal;
    font-weight: 700;
    min-width: 300px;
    transform: rotate(-90deg);
    left: -111px;
    position: absolute;
    bottom: -140px;
    font-size: 27px;
}
#yellow-banner .wp-block-columns{
    position: relative;
    z-index: 3;
    padding: 70px 0px;
}
#yellow-banner figure img{
    position: absolute;
    bottom: 0px;
    max-height: 440px;
    width: auto !important;
}
#yellow-banner.left .wp-block-cover__inner-container::after{
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    right: 50%;
    background-color: var(--titanYellow);
    width: 100vw;
    z-index: 0;
}


#yellow-banner.left .dyk-col{
    position: absolute;
    height: 100%;
    width: 70px;
    top: 0px;
    right: -70px;
    background-color: var(--titanBlue);
}
#yellow-banner.left .dyk-col h2{
    font-style: normal;
    font-weight: 700;
    min-width: 300px;
    transform: rotate(90deg);
    right: -111px;
    position: absolute;
    bottom: -190px;
    font-size: 27px;
    text-align: center;
}
#yellow-banner.left img{
    right: 0px;
}

#yellow-banner.right figure img {
    right: 13%;
}
#yellow-banner.right{
    padding-left: 130px;
}
#yellow-banner.left{
    padding-right: 130px;
}
@media screen and (max-width: 1100px){
    #yellow-banner.right figure img {
        right: -50px;
    }
    #yellow-banner.right .dyk-col h2{
        bottom: -240px;
    }
}
@media screen and (max-width:781px){
    #yellow-banner.right .wp-block-columns{
        padding: 70px 0px;
    }
    #yellow-banner figure img{
        position: absolute;
        bottom: 60px !important;
        max-height: 350px;
        width: auto !important;
    }
    #yellow-banner{
        position: relative;
        width: 100%;
        display: flex;
        justify-content: center;
    }
    #yellow-banner .img-column{
        flex-basis: 100%;
        order: 1;
        display: flex;
        justify-content: center;
        position: relative;        
    }
    #yellow-banner .img-column figure{
        width: 100%;
        display: flex;
        justify-content: center;
    }
    #yellow-banner .content-column{
        flex-basis: 100%;
        order: 2;
        text-align: center;
    }
    #yellow-banner{
        padding-top: 350px !important;
    }
    #yellow-banner .wp-block-cover__inner-container{
        padding-left: 0px;
        padding-right: 0px;
    }
    #yellow-banner{
        padding-left: 0px;
        padding-right: 0px;
    }
    #yellow-banner .wp-block-column.dyk-col{
        height: 70px;
        width: 100%;
        left: 0px;
    }
    #yellow-banner .wp-block-column.dyk-col h2{
        transform: rotate(0deg);
        justify-content: center;
        display: flex;
        align-items: center;
        height: 100%;
        position: unset;
    }
    #yellow-banner .wp-block-column.dyk-col .wp-block-group{
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100%;
    }
    #yellow-banner .img-column figure{
        z-index: -1;
    }
    #yellow-banner.left img{
        right: unset;   
    }
    #yellow-banner.right figure img {
        right: unset;
    }
    #yellow-banner.right{
        padding-left: unset;
    }
    #yellow-banner.left{
        padding-right: unset;
    }
}
/* - Yellow Banner Block - Native Block - Pattern End */





/* - News Page Start  */

#news-query ul {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}
#news-query ul li{
    flex-basis: 32%;
}
#news-query  ul.top-item li{
    flex-basis: 100%;
}
#news-query .date-field{
    position: relative;
}
#news-query .date-field::before{
    content: "";
    position: absolute;
    width: 20px;
    height: 20px;
    background-image: url('/wp-content/themes/titan-packaging/assets/images/calendar.png');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    top: 0px;
    left: 20px;
}

#news-query  ul.top-item li figure{
    max-width: 100%;
    display: block;
    height: 100%;
}
#news-query ul.top-item  .date-field::before{
    left: 0px;
    top: 3px;
}

@media screen and (max-width: 1100px){
    #news-query ul li{
        flex-basis: 31%;
    }
}

@media screen and (max-width: 701px){
    #news-query ul li{
        flex-basis: 48%;
    }
}
@media screen and (max-width: 576px){
    #news-query ul li{
        flex-basis: 46%;
    }
}
/* - News Page End */




/* - Header Start  */
header{
    padding-bottom: unset;
    background: transparent;
    transition: 0.5s;
}
.scrolled header{
    padding-bottom: 30px;
    background: rgba(51, 13, 243, 1);
    transition: 0.5s;
}

/* - Header End  */




/* Navigation Menu Start  */

/* Navigation Menu End  */



/* - Team members module Start  */

.team-members-section {
    max-width: unset !important;
    background-color: #000;
}
.team-members-section .container{
    display: flex;
    flex-wrap: wrap;
}




.team-members-section .container {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0;
    padding: 0;
}
.team-member-outer {
    overflow: hidden;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    position: relative;
}
.team-members-section .img-outer{
    position: relative;
}
.team-members-section .img-outer .overlay{
    z-index: 2;
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    background: rgb(0,0,0,0.4);
    transition: 0.3s;
}
.team-members-section .team-member-outer:hover .img-outer .overlay{
    background: rgb(0,0,0,0);
    transition: 0.3s;
}
.team-members-section a:nth-child(n+1){
    z-index: 10;
}
/* Square image wrapper */
.team-member-outer img {
    aspect-ratio: 1 / 1;
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
    filter: grayscale(100%);
}

/* Name and job title */
.member-tag {
    margin: 10px;
    font-size: 16px;
    line-height: 1.4;
}

.member-tag.name {
    color: var(--titanYellow);
    position: absolute;
    bottom: 50px;
    left: 20px;
    font-weight: 600;
    font-size: 1.3rem;
}

.member-tag.job-title {
    color: var(--titanYellow);
    position: absolute;
    bottom: 10px;
    left: 20px;
    font-weight: 600;
    line-height: 1;
    text-align: left;
    font-size: 16px;
}

@media screen and (max-width: 1200px){
    .team-members-section .container {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
    }
    .member-tag.job-title{
        font-size: 14px;
    }
}
@media screen and (max-width: 700px){
    .team-members-section .container {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
    }
}

@media screen and (max-width: 600px){
    .team-members-section .container {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }
}


/* - Team members module End  */


/* - Benefits Banner Start  */
#benefits-banner .wp-block-columns h4{
    min-height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

@media screen and (max-width: 1200px){
    #benefits-banner .wp-block-columns{
        flex-wrap: wrap !important;
    }
    #benefits-banner .wp-block-columns .wp-block-column{
        flex-basis: 25% !important;
        max-width: 33%;
    }
}
@media screen and (max-width: 700px){
    #benefits-banner .wp-block-columns .wp-block-column{
        flex-basis: 40% !important;
        max-width: 50%;
    }
}

/* - Benefits Banner End  */





/* - Search Results Page Start  */

.search-query ul{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    padding: 50px 0px;    
}
  
.search-query ul li{
    border: 1px solid var(--titanBlue);
    flex-basis: 20%;
    justify-content: center;
    transition: 0.2s;
}
.search-query ul li h2{
    padding: 5px 0px;
    text-align: center;
}
.search-query ul li h2 a{
    font-size: 16px;
}
.search-query ul li:hover{
    transform: scale(1.02);
    box-shadow: 1px 5px 12px 1px rgba(51,13,243,0.57);
    -webkit-box-shadow: 1px 5px 12px 1px rgba(51,13,243,0.57);
    -moz-box-shadow: 1px 5px 12px 1px rgba(51,13,243,0.57);
    transition: .3s;
}
.search-query ul li .wp-block-group{
    padding: 20px;
}
.search-query ul li:last-child{
    display: none;
}
.search-page-bar input{
    border: unset;
    border-radius: 0px;
    border-bottom: 2px solid var(--titanBlue);
    color: var(--titanBlue);
}
.search-page-bar input:focus,
.search-page-bar input:focus-visible{
    outline: none;
}
.search-page-bar button{
    border-radius: 0px;
    background-color: var(--titanBlue);
    color: Var(--titanYellow);
    font-weight: 700;
    transition: 0.3s;
}
.search-page-bar button:hover{
    color: var(--titanBlue);
    background-color: Var(--titanYellow);
    transition: 0.3s;
}
#three-column-section.inverted .container-xl{
    max-width: 2200px !important;
}
@media screen and (max-width: 1400px){
    .search-query ul li{
        flex-basis: 30%;
    }
    .search-query ul li:last-child{
        display: flex;
    }
}
@media screen and (max-width: 800px){
    .search-query ul {
        justify-content: unset;
    }
    .search-query ul li{
        flex-basis: 47%;
    }
    .search-query ul li:last-child{
        display: none;
    }
}
/* - Search Results Page End  */



/* - Three Column Section - Native Block  */

@media screen and (min-width: 2200px){
    #three-column-section{
        padding: 30px 0px !important;
    }
}
#three-column-section .logo-area{
    max-width: 25%;
    width: 100%;
}
#three-column-section .single-image{
    max-width: 35%;
    width: 100%;
    display: flex;
    justify-content: center;
}
#three-column-section .single-image img{
    max-width: 90%;
}
#three-column-section .container-xl{
    max-width: 2200px !important;
}
@media screen and (max-width: 900px){
    #three-column-section .single-image{

    }
    #three-column-section .single-image,
    #three-column-section .logo-area{
        max-width: unset;
        padding: unset !important;
    }

    #three-column-section .wp-block-group{
        flex-wrap: wrap;
        justify-content: center;
    }    
    #three-column-section .logo-area{
        margin-bottom: 30px;
    }
    #three-column-section .logo-area p,
    #three-column-section .logo-area figure{
        margin: auto;
        text-align: center;
    }
   .inverted #three-column-section .logo-area{
        order: 1;
    }
    #three-column-section .content-area{
        order: 2;
        margin-bottom: 30px;
        padding: 0px 20px !important;
    }
    #three-column-section .single-image{
        order: 3;
        margin-bottom: 30px;
    }
    #three-column-section .wp-block-buttons{
        margin: auto;
    }
}

/* - Three Column Section - Native Block */