.tf-container {
   width: min(1200px, calc(100% - 40px));
   margin: 0 auto
}

.tf-header {
   position: relative;
   z-index: 100;
   background: #fff
}

.tf-topbar {
   background: #102f63;
   color: #fff;
   font-family: Poppins, sans-serif
}

.tf-topbar-inner {
   min-height: 36px;
   display: flex;
   align-items: center;
   justify-content: space-between;
   font-size: 12px;
   font-weight: 500
}

.tf-top-left,
.tf-top-right {
   display: flex;
   align-items: center;
   gap: 12px
}

.tf-top-left a,
.tf-top-left span {
   color: #fff;
   text-decoration: none;
   white-space: nowrap
}

.tf-top-left a:first-child {
   color: #fff
}

.tf-top-left a:first-child::first-letter,
.tf-top-left a:nth-child(3)::first-letter {
   color: #ff6b00
}

.tf-top-left b {
   opacity: .35
}

.tf-top-right>a {
   width: 22px;
   height: 22px;
   border: 1px solid rgba(255, 255, 255, .16);
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   color: #fff;
   text-decoration: none;
   font-size: 12px;
   font-weight: 700
}

.tf-top-right i {
   /* height: 20px;
   width: 1px;
   background: rgba(255, 255, 255, .2); */
   display: block
}

.tf-top-right>span {
   font-size: 12px;
   opacity: .8
}

.tf-nav-wrap {
   background: #fff;
   border-bottom: 1px solid #e7edf3;
   box-shadow: 0 3px 12px rgba(12, 40, 75, .025)
}

.tf-nav {
   height: 100px;
   display: flex;
   align-items: center;
   gap: 25px
}

.tf-brand {
   display: block;
   margin-right: auto
}

.tf-brand img {
   width: 125px;
   height: auto;
   display: block
}

.tf-main-nav {
   display: flex;
   align-items: center;
   gap: 26px;
   height: 100%
}

.tf-main-nav>a,
.tf-dropdown>a {
   height: 100%;
   display: flex;
   align-items: center;
   position: relative;
   color: #102650;
   text-decoration: none;
   font: 600 12px Poppins, sans-serif;
   white-space: nowrap
}

.tf-main-nav>a.active,
.tf-dropdown>a.active {
   color: #ff6b00
}

.tf-main-nav>a.active:after,
.tf-dropdown>a.active:after {
   content: "";
   position: absolute;
   left: 0;
   right: 0;
   bottom: 0;
   height: 3px;
   background: #ff6b00;
   border-radius: 4px 4px 0 0
}

.tf-dropdown {
   height: 100%;
   position: relative
}

.tf-dropdown>a span {
   font-size: 14px;
   margin-left: 4px;
   color: #ff6b00
}

.tf-dropdown-menu {
   position: absolute;
   top: 100%;
   left: -15px;
   width: 250px;
   background: #fff;
   border: 1px solid #e2e9f0;
   border-radius: 0 0 10px 10px;
   box-shadow: 0 14px 30px rgba(16, 38, 80, .12);
   padding: 8px;
   opacity: 0;
   visibility: hidden;
   transform: translateY(7px);
   transition: .18s
}

.tf-dropdown:hover .tf-dropdown-menu {
   opacity: 1;
   visibility: visible;
   transform: none
}

.tf-dropdown-menu a {
   display: block;
   padding: 9px 10px;
   color: #40516b;
   text-decoration: none;
   font: 500 12px Poppins, sans-serif;
   border-radius: 6px
}

.tf-dropdown-menu a:hover {
   background: #fff3ea;
   color: #ff6b00
}

.tf-nav-actions {
   display: flex;
   align-items: center;
   gap: 12px;
   margin-left: 5px
}

.tf-search-btn {
   border: 0;
   background: transparent;
   color: #102650;
   font-size: 25px;
   line-height: 1;
   cursor: pointer;
   padding: 4px
}

.tf-cart {
   position: relative;
   width: 34px;
   height: 40px;
   display: flex;
   align-items: center;
   justify-content: center;
   color: #102650;
   text-decoration: none;
   font-size: 18px
}

.tf-cart span {
   position: absolute;
   top: 0;
   right: -4px;
   min-width: 18px;
   height: 18px;
   border-radius: 50%;
   background: #ff6b00;
   color: #fff;
   font: 700 12px Poppins;
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 0 4px
}

.tf-quote-btn {
   background: #ff6b00;
   color: #fff;
   text-decoration: none;
   padding: 14px 20px;
   border-radius: 6px;
   font: 700 12px Poppins;
   white-space: nowrap
}

.tf-quote-btn:hover {
   background: #e96100
}

.tf-menu-toggle {
   display: none;
   border: 0;
   background: transparent;
   color: #102650;
   font-size: 25px;
   cursor: pointer
}

.tf-footer {
   font-family: Poppins, sans-serif
}

.tf-footer-cta {
   background: linear-gradient(115deg, #0d3e72, #07538f);
   color: #fff
}

.tf-cta-inner {
   min-height: 250px;
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 30px
}

.tf-cta-inner>div:first-child>span {
   font-size: 12px;
   letter-spacing: 2px;
   font-weight: 700;
   opacity: .85
}

.tf-cta-inner h2 {
   font-size: 34px;
   line-height: 1.2;
   margin: 9px 0 10px
}

.tf-cta-inner p {
   font-size: 12px;
   margin: 0;
   opacity: .88
}

.tf-cta-buttons {
   display: flex;
   gap: 12px;
   flex: none
}

.tf-cta-buttons a {
   padding: 15px 21px;
   border-radius: 6px;
   text-decoration: none;
   font: 700 12px Poppins;
   background: #ff6b00;
   color: #fff
}

.tf-cta-buttons a:last-child {
   background: transparent;
   border: 2px solid rgba(255, 255, 255, .9);
   padding: 13px 21px
}

.tf-footer-main {
   background: #0b1b34;
   color: #fff
}

.tf-contact-strip {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 25px;
   padding: 30px 0;
   border-bottom: 1px solid rgba(255, 255, 255, .1)
}

.tf-footer-contact {
   display: flex;
   align-items: center;
   gap: 12px;
   color: #fff;
   text-decoration: none
}

.tf-footer-contact>b {
   width: 42px;
   height: 42px;
   border-radius: 50%;
   background: #075b9e;
   display: flex;
   align-items: center;
   justify-content: center;
   color: #fff;
   font-size: 17px
}

.tf-footer-contact strong {
   display: block;
   font-size: 12px
}

.tf-footer-contact small {
   display: block;
   font-size: 12px;
   color: #93a8c1;
   margin-top: 4px
}

.tf-footer-grid {
   display: grid;
   grid-template-columns: 1.35fr 1fr 1fr 1.1fr;
   gap: 45px;
   padding: 34px 0 40px
}

.tf-footer-brand img {
   width: 155px;
   background: #fff;
   border-radius: 4px;
   display: block
}

.tf-footer-grid p {
   font-size: 12px;
   color: #9bb0c7;
   line-height: 1.8;
   max-width: 280px
}

.tf-footer-grid h4 {
   font-size: 12px;
   margin: 0 0 16px;
   color: #fff
}

.tf-footer-grid>div:not(.tf-footer-brand)>a,
.tf-footer-grid>div:not(.tf-footer-brand)>span {
   display: block;
   color: #a8bad0;
   text-decoration: none;
   font-size: 12px;
   margin: 0 0 10px
}

.tf-footer-grid>div:not(.tf-footer-brand)>a:hover {
   color: #ff6b00
}

.tf-socials {
   display: flex;
   gap: 8px;
   margin-top: 16px
}

.tf-socials a {
   width: 34px;
   height: 34px;
   border: 1px solid #31506f;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   color: #fff;
   text-decoration: none;
   font-size: 12px
}

.tf-copyright {
   background: #09162a;
   color: #91a5bd;
   border-top: 1px solid rgba(255, 255, 255, .06);
   padding: 13px 0;
   font-size: 12px
}

@media(max-width:1050px) {
   .tf-main-nav {
      gap: 17px
   }

   .tf-nav-actions {
      gap: 7px
   }

   .tf-quote-btn {
      padding: 13px 14px
   }

   .tf-top-left {
      gap: 8px
   }

   .tf-top-right>span {
      display: none
   }
}

/* @media(max-width:850px) {
   .tf-topbar-inner {
      min-height: 34px
   }

   .tf-top-left {
      width: 100%;
      justify-content: center
   }

   .tf-top-left a:nth-child(4),
   .tf-top-left>span {
      display: none
   }

   .tf-top-right {
      display: none
   }

   .tf-nav {
      height: 74px
   }

   .tf-menu-toggle {
      display: block;
      order: 3
   }

   .tf-main-nav {
      display: none;
      position: absolute;
      top: 100%;
      left: 0;
      right: 0;
      height: auto;
      background: #fff;
      border-top: 1px solid #e5ebf1;
      box-shadow: 0 15px 25px rgba(0, 0, 0, .08);
      padding: 8px 20px;
      flex-direction: column;
      align-items: stretch;
      gap: 0
   }

   .tf-main-nav.open {
      display: flex
   }

   .tf-main-nav>a,
   .tf-dropdown>a {
      height: auto;
      padding: 13px 3px
   }

   .tf-main-nav>a.active:after,
   .tf-dropdown>a.active:after {
      display: none
   }

   .tf-dropdown {
      height: auto
   }

   .tf-dropdown-menu {
      position: static;
      width: auto;
      display: none;
      opacity: 1;
      visibility: visible;
      transform: none;
      box-shadow: none;
      border: 0;
      border-left: 2px solid #ff6b00;
      border-radius: 0;
      margin: 0 0 5px 8px;
      padding: 0 0 0 7px
   }

   .tf-dropdown.open .tf-dropdown-menu {
      display: block
   }

   .tf-nav-actions {
      margin-left: auto
   }

   .tf-search-btn {
      display: none
   }

   .tf-brand {
      margin-right: 0
   }

   .tf-brand img {
      width: 110px
   }

   .tf-quote-btn {
      font-size: 12px;
      padding: 12px 14px
   }

   .tf-cart {
      width: 30px
   }

   .tf-cta-inner {
      padding-top: 38px;
      padding-bottom: 38px;
      min-height: 0;
      align-items: flex-start;
      flex-direction: column
   }

   .tf-cta-inner h2 {
      font-size: 28px
   }

   .tf-cta-buttons {
      width: 100%
   }

   .tf-cta-buttons a {
      flex: 1;
      text-align: center
   }

   .tf-contact-strip {
      grid-template-columns: 1fr;
      gap: 17px;
      padding: 25px 0
   }

   .tf-footer-grid {
      grid-template-columns: 1fr 1fr;
      gap: 28px
   }
} */

@media(max-width:850px){

    /* TOP BAR */
    .tf-topbar-inner{
        min-height:34px;
        display:flex;
        align-items:center;
        justify-content:space-between;
        gap:10px;
    }

    /* LEFT SIDE */
    .tf-top-left{
        display:flex;
        align-items:center;
        justify-content:flex-start;
        gap:8px;
        width:auto;
        flex:1;
        min-width:0;
    }

    .tf-top-left a,
    .tf-top-left span{
        font-size:12px;
    }

    /* Hide location on smaller screens */
    .tf-top-left > span{
        display:none;
    }

    /* RIGHT SOCIAL ICONS */
    .tf-top-right{
        display:flex;
        align-items:center;
        justify-content:flex-end;
        gap:7px;
        width:auto;
        margin-left:auto;
        flex-shrink:0;
    }

    .tf-top-right > a{
        width:24px;
        height:24px;
        font-size:12px;
    }

    .tf-top-right > a i{
        font-size:12px;
    }

    .tf-top-right > i{
        height:18px;
    }

    .tf-top-right > span{
        display:inline;
        font-size:12px;
        white-space:nowrap;
    }


    /* MAIN NAVIGATION */
    .tf-nav{
        height:74px;
    }

    .tf-menu-toggle{
        display:block;
        order:3;
    }

    .tf-main-nav{
        display:none;
        position:absolute;
        top:100%;
        left:0;
        right:0;
        height:auto;
        background:#fff;
        border-top:1px solid #e5ebf1;
        box-shadow:0 15px 25px rgba(0,0,0,.08);
        padding:8px 20px;
        flex-direction:column;
        align-items:stretch;
        gap:0;
    }

    .tf-main-nav.open{
        display:flex;
    }

    .tf-main-nav > a,
    .tf-dropdown > a{
        height:auto;
        padding:13px 3px;
    }

    .tf-main-nav > a.active:after,
    .tf-dropdown > a.active:after{
        display:none;
    }

    .tf-dropdown{
        height:auto;
    }

    .tf-dropdown-menu{
        position:static;
        width:auto;
        display:none;
        opacity:1;
        visibility:visible;
        transform:none;
        box-shadow:none;
        border:0;
        border-left:2px solid #ff6b00;
        border-radius:0;
        margin:0 0 5px 8px;
        padding:0 0 0 7px;
    }

    .tf-dropdown.open .tf-dropdown-menu{
        display:block;
    }

    .tf-nav-actions{
        margin-left:auto;
    }

    .tf-search-btn{
        display:none;
    }

    .tf-brand{
        margin-right:0;
    }

    .tf-brand img{
        width:110px;
    }

    .tf-quote-btn{
        font-size:12px;
        padding:12px 14px;
    }

    .tf-cart{
        width:30px;
    }


    /* FOOTER CTA */
    .tf-cta-inner{
        padding-top:38px;
        padding-bottom:38px;
        min-height:0;
        align-items:flex-start;
        flex-direction:column;
    }

    .tf-cta-inner h2{
        font-size:28px;
    }

    .tf-cta-buttons{
        width:100%;
    }

    .tf-cta-buttons a{
        flex:1;
        text-align:center;
    }


    /* FOOTER CONTACT */
    .tf-contact-strip{
        grid-template-columns:1fr;
        gap:17px;
        padding:25px 0;
    }

    .tf-footer-grid{
        grid-template-columns:1fr 1fr;
        gap:28px;
    }

}

/* @media(max-width:550px) {
   .tf-container {
      width: min(100% - 28px, 1200px)
   }

   .tf-top-left a span {
      font-size: 12px
   }

   .tf-top-left a:first-child span {
      font-weight: 600
   }

   .tf-quote-btn {
      display: none
   }

   .tf-nav {
      height: 68px
   }

   .tf-brand img {
      width: 105px
   }

   .tf-cta-inner h2 {
      font-size: 24px
   }

   .tf-cta-inner p {
      font-size: 12px
   }

   .tf-cta-buttons {
      flex-direction: column
   }

   .tf-footer-grid {
      grid-template-columns: 1fr
   }

   .tf-footer-brand img {
      width: 135px
   }
} */

@media(max-width:550px){

    .tf-container{
        width:min(100% - 28px,1200px);
    }

    /* TOP BAR */
    .tf-topbar-inner{
        min-height:38px;
    }

    .tf-top-left{
        gap:6px;
    }

    .tf-top-left a{
        font-size:12px;
    }

    /* Keep only first phone number */
    .tf-top-left a:nth-child(2){
        display:none;
    }

    /* SOCIAL ICONS */
    .tf-top-right{
        gap:5px;
    }

    .tf-top-right > a{
        width:25px;
        height:25px;
    }

    .tf-top-right > span{
        display:none;
    }

    .tf-top-right > i{
        display:none;
    }


    /* NAV */
    .tf-quote-btn{
        display:none;
    }

    .tf-nav{
        height:68px;
    }

    .tf-brand img{
        width:105px;
    }


    /* FOOTER */
    .tf-cta-inner h2{
        font-size:24px;
    }

    .tf-cta-inner p{
        font-size:12px;
    }

    .tf-cta-buttons{
        flex-direction:column;
    }

    .tf-footer-grid{
        grid-template-columns:1fr;
    }

    .tf-footer-brand img{
        width:135px;
    }

}
/* TOPFIX GLOBAL TYPOGRAPHY
   Body copy and interface text start at 12px. Headings/buttons may intentionally be larger.
*/
body {
   font-size: 12px
}

.tf-topbar,
.tf-topbar * {
   font-size: 12px
}

.tf-main-nav>a,
.tf-main-nav .tf-dropdown-toggle {
   font-size: 14px
}

.tf-quote-btn {
   font-size: 13px
}

.tf-footer,
.tf-footer * {
   font-size: 12px
}

.tf-footer h4 {
   font-size: 15px
}

.tf-footer-brand p {
   font-size: 12px
}

.tf-footer-contact strong {
   font-size: 12px
}

.tf-footer-contact small {
   font-size: 12px
}

.tf-copyright {
   font-size: 12px
}

/* =========================================================
   MOBILE TOPBAR FIX
========================================================= */

@media (max-width: 600px){

    .tf-topbar-inner{
        display:flex;
        align-items:center;
        justify-content:space-between;
        gap:8px;
        min-width:0;
    }

    .tf-top-left{
        flex:1 1 auto;
        min-width:0;
        display:flex;
        align-items:center;
        gap:6px;
        overflow:hidden;
        white-space:nowrap;
    }

    .tf-top-left span{
        font-size:12px;
        white-space:nowrap;
    }

    /* Email must not push the social icons */
    .tf-top-left .tf-email{
        max-width:115px;
        overflow:hidden;
        text-overflow:ellipsis;
        white-space:nowrap;
        display:block;
    }

    .tf-top-right{
        flex:0 0 auto;
        display:flex;
        align-items:center;
        gap:5px;
        white-space:nowrap;
    }

    .tf-top-right > a{
        width:22px;
        height:22px;
        min-width:22px;
        flex:0 0 22px;
        font-size:12px;
    }

    .tf-top-right > a i{
        font-size:12px;
        line-height:1;
    }

    .tf-top-right > span{
        display:none;
    }

    .tf-top-separator{
        display:none !important;
    }
}