@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
body {
    margin: auto;
    overflow-x: hidden;
    font-family: 'Roboto';
    font-size: 20px;
    width:100%;
}

h1, h2, h3, h4, h5 {
    font-family: 'Poppins';
    font-weight: 500;
}
h1 {
    font-size: 50px;
    font-weight: 700;
}

.mobile-padding {
    padding-top: 0.25rem;
}

html {
    scroll-behavior: smooth;
}

.footer-text{

font-size:18px;

}


.mb1 {
    padding-bottom: 0px;
}

.footer-social-padding2 {
    margin-top: 0px;
}

.footer-social-padding {
    margin-top: 0px;
}

.footer-info-padding2 {
    margin-top: 0px;
}

.footer-info-padding {
    margin-top: 0px;
    gap: 35px;
}

.footer-nav-padding2 {
    margin-top: 0px;
    padding-left:50px;
}

.footer-border-mobile {
    border-bottom: 1px white solid;
}
.news-mobile-padding {
    padding-top: 0px;
}

.news-mobile-padding2 {
    padding-top: 0px;
}

.news-button{

    margin-top:20px;

}

.footer-nav-padding{

    padding-top:0px;
}

.news-mobile-padding3 {
    padding-top: 0px;
}

.align-center-mobile {
    margin-inline: inherit;
}

.footer-social a {
    margin-right: 10px; 

}

.padding-top-footer {
    padding-top: 1rem;
}

.footer-social {
    max-width: 200px;
}

.hr-width {
    width: 100%;
    border-color: white;
}

.footer-nav-border {
    border-bottom: solid 1px white;
}

.section-padding{

    padding-top:30px;
    padding-bottom:30px;
}

.div-no-mobile-nav {
    display: block; 
}

.div-only-mobile-nav {
    
    display: none;
}

.nav-link{
padding:0.2rem;

}
.div-no-mobile {
    display: block;
}

.div-only-mobile {
    display: none; 
}


.center-top{
    text-align:left;
}

.center-bottom {
    text-align: right;
}

.mobile-text-center {
    text-align: left;
}

.mobile-services-text{

    font-size:50px;
}

.div-only-mobile .navbar-nav {
    text-align: center;
    width: 100%;
    justify-content: center;
}

    .div-only-mobile .nav-item {
        display: inline-block; 
        margin: 0 10px; 
    }

.top-logo {
    height: 105px;
    padding-bottom:5px;



}



/* Main Box Content */
.modalBox {
    position: fixed;
    font-family: Arial, Helvetica,sans-serif;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0,0,0,0.8);
    color: black;
    z-index: 99999;
    opacity: 0;
    -webkit-transition: opacity 400ms ease-in;
    -moz-transition: opacity 400ms ease-in;
    transition: opacity 400ms ease-in;
    pointer-events: none;
}

    /* Style for target elements */
    .modalBox:target {
        opacity: 1;
        pointer-events: auto;
    }

    /* Positioning of the child box */
    .modalBox > div {
        width: 600px;
        height: 650px;
        max-height: 80vh;
        /* don’t let it get taller than the viewport */
        overflow-y: auto;
        /* enable vertical scroll inside */
        position: relative;
        margin: 10% auto;
        padding: 20px;
        border-radius: 0px;
        background: white;
    }

/* Positioning and style of the close button */
.close {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 32px;
    height: 32px;
    padding: 0;
    background: transparent;
    border: none;
    box-shadow: none;
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .close img {
        width: 100%;
        height: auto;
        display: block;
    }

    .close:hover {
        background: transparent;
    }


    .navbar-light .navbar-toggler-icon {
        background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(21, 142, 222, 1.0)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
    }
.navbar-toggler,
.navbar-toggler:focus,
.navbar-toggler:active,
.navbar-toggler-icon:focus {
    outline: none;
    border: none;
    box-shadow: none;
}

.navbar-toggler-icon {
    font-size: 1.3em;
}

.gradient-bg {
    background-color;#000000;

}

.navbar{

    padding:0px;
}


.gradient-red {
    background: rgb(69,14,17);
    background: linear-gradient(239deg, rgba(69,14,17,1) 0%, rgba(153,19,27,1) 0%, rgba(69,14,17,1) 0%, rgba(125,18,24,1) 49%, rgba(72,14,17,1) 100%);
    
}


/* ########## HEADER SECTION START ############*/

.header-section-background {
    background-image: url(../images/TrAvery-Header-Section-Background.jpg); /* Replace with your image */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    min-height: 100vh;
}
.header-section-box {
    background-color: #158ede;
    opacity: 0.9;
}


/* ########## HEADER SECTION END ############*/


/* ########## OUR SERVICES START ############*/
.services1-1 {
    
}

.services1-2 {
    background-color: #158ede;
    
}

.manufacturing-img {
    background-image: url(../images/TrAvery-Manufacturing-Background.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    
}

.design-img {
    background-image: url(../images/TrAvery-Design-Background.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    
}

.certification-img {
    background-image: url(../images/TrAvery-Certification-Background.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: 450px;
    width: auto;
    
}

.delivery-img {
    background-image: url(../images/TrAvery-Delivery-Background.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

}

.row2{
     height:537px;

}


.services-div-row1 {
    padding: 5.7rem 3.75rem 5.75rem 3.75rem;
}
.services-div-row2 {
    padding: 5.7rem 3.75rem 5.75rem 3.75rem;
}
.services-div-row3 {
    padding: 5.6rem 3.75rem 5.74rem 3.75rem;
}
.services-div-row4 {
    padding: 5.0rem 3.75rem 5.75rem 3.75rem;
}


.youtube-link img {
    transition: transform 0.3s ease;
}

    .youtube-link img:hover {
        transform: scale(1.1); 
    }

   



/* ########## OUR SERVICES END ############*/

/* ########## NEWS START ############*/

.news-section {
    background-color: #d9d9d9;
}


.carousel-indicators .active {
    background-color: #969696;
}



.carousel-indicators {
    bottom: -30px; 
}


@media (max-width: 768px) {
    .carousel-indicators {
        bottom: -15px;
    }
}

/* ########## NEWS END ############*/





.custom-button {
    padding: 2% 4%;
    border-radius: 0;
    border:2px solid white;
    background-color: #158ede;
    color: #ffffff;
    font-size: 22px;
   
}

    .custom-button:hover {
        padding: 2% 4%;
       
        border: 2px solid white;
        background-color: #000000;
        opacity: .8;
        color: #ffffff;
        font-size: 22px;
    }

.custom-button2 {
    padding: 2% 4%;
    border-radius: 0;
    border: solid 2px #158ede;
    background-color: #d9d9d9;
    color: #158ede;
    font-size: 22px;
}


    .custom-button2:hover {
        padding: 2% 4%;
        text-decoration: none;
        border: solid 2px #158ede;
        background-color: #000000;
        opacity: .8;
        color: #158ede;
        font-size: 22px;
    }






/* ########## RESPONSIVE BREAKPOINTS ############*/








/* ########## CUSTOM CLASSES END ##############*/

.bullet-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.bullet {
    padding-left: 1em;
    text-indent: -.7em;
}

li.bullet::before {
    font-size: 32px;
    content: "• ";
    color: #00ADAB; /* or whatever color you prefer */
}

.testimonial_font {
    color: black;
}

hr.footer {
    border-top: 1px solid #fff;
    width: 80%;
}

nav {
    font-family: 'Noto Serif', serif;
    font-weight: 500;
    font-size: 22px;
}

.underline {
    text-decoration-line: underline;
}

.page-title-bar {
    background-color: #000000;
    color: #ffffff;
}

.bg {
    background-color: #000000;
    color: #fff;
}

.header-text {
    color: #00ADAB;
}

.divider {
    border-right: 3px solid #000000;
}

.custom-container {
    padding: 0 25px 0 25px;
}

.bg a {
    color: rgba(255,255,255, 1);
}

.bg a:link {
    color: rgba(255,255,255, 1);
}

.bg a:hover {
    color: rgba(255,255,255, .6);
}

.social-icon {
    max-width: 60px;
    height: auto;
}

a {
    color: rgba(0,0,0, 1);
}

a:link {
    color: rgba(0,0,0, 1);
}

a:hover {
    color: rgba(0,0,0, .6);
}

ul, ol {
    list-style-position: outside;
    margin: 0px 0px 0px 0px;
}

ol li {
    padding-left: 20px;
}

.navbar-custom,
.navbar-custom .navbar-nav > li > .dropdown-menu {
    background-color: #000000;
    min-width: 250px;
}

/* change the brand and text color */
.navbar-custom .navbar-brand,
.navbar-custom .navbar-text {
    color: rgba(255,255,255, 1);
}

.white-font {
    color: #fff;
}


/* change the link color */
.navbar-custom .navbar-nav .nav-link,
.navbar-custom .navbar-nav > li > .dropdown-menu > a.nav-link {
    color: rgba(255,255,255, 1);
}

/* change the color of active or hovered links*/
.navbar-custom .nav-item:hover .nav-link,
.navbar-custom .navbar-nav > li > .dropdown-menu > a:hover {
    color: rgba(255,255,255, .6);
}

.navbar-custom .navbar-toggler {
    color: rgba(255, 255, 255, 1);
    border-color: rgba(255, 255, 255, 1);
}

.navbar-custom .navbar-toggler-icon {
    color: rgba(255, 255, 255, 1);
    border-color: rgba(255, 255, 255, 1);
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255, 255, 255, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

.carousel-inner img {
    width: 100%;
    height: auto;
}

.img-fluid {
    width: 100%;
    height: auto;
}

.logo {
    max-width: 100%;
    height: auto;
}

.staff-list {
    max-width: 290px;
}


@media (max-width: 800px) {
    html, body {
        overflow-x: hidden;
        font-size: 20px;
    }

    .top-logo {
        height: 100px;
        margin-inline:auto;
    }

    .navbar-toggler {
        margin-inline: auto;
    }
    

}

@media screen and (max-width: 990px) {
    .div-no-mobile {
        display: none; /* hide desktop */
    }

    .div-only-mobile {
        display: block; /* show mobile */
    }

    
    .align-center-mobile{

        margin-inline:auto;
    }

    

    .mobile-services-text {
        font-size: 30px;
    }
    .mobile-text-center {
        text-align: center;
    }

    .center-top {
        text-align: center;
    }

    .center-bottom {
        text-align: center;
    }


    .services-div{

        padding:1rem;
    }

    h1 {
        font-size: 35px;
        font-weight: 700;
    }

    .custom-button {
        padding: 5% 8%;
        border-radius: 0;
        border: 2px solid white;
        background-color: #158ede;
        color: #ffffff;
        font-size: 22px;
        display: block;
        margin:-1rem;
        margin: 0 auto; /* centers horizontally */
    }

    .header-section-background {
        background-image: url(../images/TrAvery-Header-Section-Background.jpg); /* Replace with your image */
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        min-height: 50vh;
    }

    .services-div-row1 {
        padding: 0.97rem 1rem 2.1rem 1rem;
    }

    .services-div-row2 {
        padding: 0.97rem 1rem 2.1rem 1rem; /* top right bottom left */
    }

    .services-div-row3 {
        padding: 0.97rem 1rem 2.1rem 1rem;
    }

    .services-div-row4 {
        padding: 0.98rem 1rem 2.1rem 1rem;
    }

    .custom-button {
        padding: 2% 4%;
        border-radius: 0;
        border: 2px solid white;
        background-color: #158ede;
        color: #ffffff;
        font-size: 22px;
    }

        .custom-button:hover {
            padding: 2% 4%;
            text-decoration: none;
            border: 2px solid white;
            background-color: #000000;
            opacity: .8;
            color: #ffffff;
            font-size: 22px;
        }

    .hr-width {
        width: 90%;
        border-color:white;
    }

    .footer-nav-border {
        border:none;
    }

    .news-mobile-padding{

        padding-top:49px;

    }

    .news-mobile-padding2 {
        padding-top: 44px;
    }

    .footer-border-mobile {
        border-bottom:none;
        
    }


    .mobile-padding {
        padding-top: 0rem; 
       
    }

    .mb1 {
        padding-bottom: 15px;
    }

    .news-button {
        margin-top: 41px;
       margin-bottom:36px;
    }

    .news-mobile-padding3 {
        padding-top: 64px;
    }

    .footer-nav-padding {
        padding-top: 23px;
    }

    .footer-nav-padding2 {
        margin-top: 20px;
        padding-left: 0px;
    }

    .padding-top-footer {
        padding-top: 2.5rem;
    }

    .footer-info-padding2 {
        margin-top: 23px;
    }
    .footer-info-padding {
        margin-top: 0px;
        gap: 15px;
    }

    .footer-social-padding2 {
        margin-top: 31px;
    }

    .footer-social-padding {
        margin-top: 20px;
    }

    .manufacturing-img {
        background-image: url(../images/TrAvery-Manufacturing-Background.png);
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        height: 350px;
        max-height:350px;
    }

    .design-img {
        background-image: url(../images/TrAvery-Design-Background.png);
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        height: 350px;
        max-height: 350px;
    }

    .certification-img {
        background-image: url(../images/TrAvery-Certification-Background.png);
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        height: 350px;
        max-height: 350px;
    }

    .delivery-img {
        background-image: url(../images/TrAvery-Delivery-Background.png);
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        height: 350px;
        max-height: 350px;
    }

    

}

@media (max-width: 767.98px) {
    .footer-middle {
        flex-direction: column;
        text-align: center;
    }

        .footer-middle .footer-logo {
           
        }
}



@media screen and (max-width: 600px) {
    .div-no-mobile {
        display: none; /* hide desktop */
    }

    .div-only-mobile {
        display: block; /* show mobile */
    }


}

@media screen and (max-width: 1900px) {
    .certification-img {
        background-image: url(../images/TrAvery-Certification-Background.png);
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        height: auto;
        width: auto;
    }
}

@media (min-width: 1900px) and (max-width: 2500px) {
    .certification-img {
        background-image: url(../images/TrAvery-Certification-Background.png);
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        height: 450px;
        width: auto;
        padding-top:35px;
    }
}





@media (max-width: 700px) {

    .modalBox > div {
        width: 400px;
        height: 600px;
        max-height: 80vh;
        /* don’t let it get taller than the viewport */
        overflow-y: auto;
        /* enable vertical scroll inside */
        position: relative;
        margin: 10% auto;
        padding: 20px;
        border-radius: 0px;
        background: white;
    }
}


@media (max-width: 500px) {

    .modalBox > div {
        width: 350px;
        height: 600px;
        max-height: 80vh;
        /* don’t let it get taller than the viewport */
        overflow-y: auto;
        /* enable vertical scroll inside */
        position: relative;
        margin: 10% auto;
        padding: 20px;
        border-radius: 0px;
        background: white;
    }
}

@media (max-width: 1500px) {

    .footer-social {
        max-width: 100%;
    }
}