@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');
.font-face h1,
.font-face h2, 
.font-face h3,
.font-face h4, 
.font-face h5,
.font-face h6,
.font-face a,
.font-face span,
.font-face p,
.font-face input,
.font-face label{

font-family: "Open Sans", sans-serif;
}
body.new-home {
    overflow: hidden;
}
.font-face h2{
font-size: 34px;
color: #000;
line-height: 44px;
font-weight: 700;
}
header.header {
    background: #fff;
    padding: 15px 0 !important;
}
a:hover{
   text-decoration:none;
}

.form-section [class*="span"] {
    margin: 0;
}

.form-section .span5 {
    width: 100%;
}
.form-section .submit-btn input {
    margin-top: 15px !important;
}
/* .card {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease, transform 0.5s ease;
    display: none;
  }

  .card.visible {
    display: block;
    opacity: 1;
    transform: translateY(0);
  }

  #showMoreBtn {
    margin: 20px auto;
    display: block;
    padding: 10px 20px;
    cursor: pointer;
  } */
.header-top, .main-header {
    display: flex;
    flex-wrap: wrap;
    align-items:center;
    justify-content:space-between;
}
header.header-top {
    background: #FFD700;
    padding: 7px  0 !important;
}
.header-social {
    display: flex;
    column-gap: 17px;
}
.header-text {
    font-size: 14px;
    line-height: 20px;
    color: #D30000;
    font-weight: 600;
    text-align: center;
}
.header-menu ul {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    gap: 40px;
    margin: 0;
}
.header-menu ul li a {
    font-size: 16px;
    line-height: 26px;
    color: #000000;
    transition: 0.3s ease-in-out;
}
.header-menu ul li a:hover, .quick-links li a:hover, .contact-info a:hover{
    color: #D40000;
    background: transparent;
    transition: 0.3s ease-in;
}
.header {
   /* overflow: hidden; */
   position: relative;
 }
 

 .header a.icon {
    display: none;
}
.header a:hover {
   background-color: #ddd;
   color: black;
 }
 
 .header a.active {
   background-color: #04AA6D;
   color: white;
 }
         .hero-main {
         background-image: url('../img/banner-img.png');
         background-size: cover;
         background-repeat: no-repeat;
         position: relative;
         }
         .hero-main:before {
         content: "";
         position: absolute;
         background-color: #000;
         width: 100%;
         height: 100%;
         left: 0;
         top: 0;
         opacity: 0.7;
         }
         .hero-section h1, 
         .hero-section p, 
         .hero-btn-row{
         position: relative;
         }
         .hero-main {
         background-image: url('../img/banner-img.png');
         background-size: cover;
         background-repeat: no-repeat;
         position: relative;
         padding: 50px 0;
         }
         .hero-section {
         display: flex;
         align-items: center;
         flex-wrap: wrap;
         gap: 100px;
         }
         .hero-section .hero-left {
         max-width: 50%;
         width: 100%;
         }
         .hero-section .hero-right {
         max-width: 38%;
         width: 100%;
         position: relative;
         }
         .hero-btn-row {
         display: flex;
         flex-wrap:wrap;
         gap: 30px;
         align-items: center;
         z-index: 999;
         /* justify-content: center; */
         }
         .form-section .submit-btn input:hover {
         font-style: normal;
         }
         section.call-to-action.font-face  .hero-btn-row {
         justify-content: center; 
         }
         .call-btn {
         background: #D40000;
         padding: 8px 20px;
         border-radius: 4px;
         height: 100% !important;
         border: 1px solid #d40000;
         transition: 0.3s ease-in-out;
         }
         .call-btn a {
         font-size: 20px;
         line-height: 20px;
         color: #fff;
         display: flex;
         gap: 17px;
         align-items: center;
         font-weight: 700;
         text-align: left;
         }
         .call-btn a span {
         font-size: 14px;
         font-weight: 500;
         }
         .hero-section h1 {
         font-size: 48px;
         line-height: 57px;
         color: #fff;
         font-weight: 700;
         padding: 0;
         }
         .hero-section p {
         font-size: 20px;
         line-height: 30px;
         color: #fff;
         font-weight: 500;
         margin: 18px 0;
         }
         .hero-right {
         background: #fff;
         padding: 20px;
         border-radius: 6px;
         }
         div.contact-form-sec {
         float: none !important;
         margin: 0 !important;
         }
         .hero-right .form-section h3 {
         font-size: 30px;
         line-height: 40px;
         color: #000;
         font-weight: 700;
         margin: 0;
         }
         .hero-right .form-section p {
         font-size: 16px;
         line-height: 26px;
         color: #000;
         font-weight: 500;
         margin: 10px 0;
         }
         .hero-right .form-section span {
         color: #D40000;
         }
         .hero-right .form-section label {
         font-size: 14px;
         font-weight: 400;
         color: #000000;
         }
         .hero-right .form-section input, 
         .hero-right .form-section textarea {
         background: #fff !important;
         border: 1px solid #DCDADA;
         padding: 10px;
         border-radius: 3px;
         box-sizing: border-box;
         }
         .hero-right .form-section input {
         height: 42px;
         }
         .hero-right .form-s18pxection textarea {
         height: 70px;
         }
         .form-section .submit-btn {
         margin-top: 14px;
         }
         .form-section .submit-btn input {
         background: #0C1343 !important;
         border-radius: 4px;
         padding: 12px 30px;
         margin: 0;
         height: auto;
         font-size: 18px;
         width: auto;
         line-height: 26px;
         }
         /* service css */
         .service-main {
         padding: 35px 0;
         }
         .service-section {
         display: flex;
         flex-wrap: wrap;
         justify-content: center;
         gap: 40px;
         margin-bottom: 30px;
         }
         .service-section .service-box {
         width: 100%;
         max-width: 31%;
         text-align: center;
         }
         .service-main h2, .service-main p{
         text-align: center;
         }
         .service-box h4 {
         font-size: 24px;
         line-height: 34px;
         font-weight: 400;
         color: #000;
         }
         .service-main p,
         .about-section p, 
         section.call-to-action.font-face p, 
         .tab-section.font-face p{
         font-size: 17px;
         line-height: 28px;
         font-weight: 400;
         color: #000;
         }
         .service-main p.main-para {
         margin: 14px 0 30px;
         }
         .service-section .service-box .read-btn a {
         font-size: 17px;
         line-height: 22px;
         color: #000;
         text-decoration: underline;
         }
         .service-section .service-box p {
         font-size: 16px;
         min-height: 84px;
         }
         .service-main.font-face .call-btn {
         display: inline-block;
         margin: 20px 0;
         }
         .service-main.font-face {
         text-align: center;
         background: #fff;
         }
         /* about css */
         .about-section {
         display: flex;
         flex-wrap: wrap;
         gap: 64px;
         align-items: center;
         }
         .about-section .about-left,
         .about-section .about-right {
         width: 100%;
         max-width: 47%;
         }
         .about-main.font-face {
         background: #F7F7F7;
         padding: 40px 0;
         }
         .main-btn a {
         padding: 10px 20px;
         background: #D40000;
         border-radius: 4px;
         color: #fff;
         font-size: 17px;
         line-height: 30px;
         font-weight: 600;
         transition: 0.3s ease-in-out;
         }
         .main-btn {
         margin-top: 30px;
         }
         .main-btn a:hover{
         text-decoration: none;
         background: #000;
         transition: 0.3s ease-in-out;
         }
         .call-btn a:hover{
         text-decoration: none;
         }
         .call-btn:hover{
         background: #000;
         transition: 0.3s ease-in-out;
         border:1px solid #000;
         }
         /* our client */
         .container-fluid.logo-section.font-face {
         background: #fff !important;
         background-image: unset !important;
         padding: 40px 0;
         }
         .container-fluid.logo-section.font-face h2 {
         margin-bottom: 30px;
         }
         /* about2 */
         .about-left ul {
         list-style: none;
         margin: 0;
         margin-bottom: 10px;
         }
         .about-left ul li {
         display: flex;
         gap: 10px;
         align-items: center;
         font-size: 17px;
         line-height: 38px;
         color: #000;
         }
         .about-main.font-face.about-main2 {
         background: #fff;
         padding: 60px 0;
         }
         /* project css */
         .project-main.font-face {
         padding: 40px 0;
         background: #fff;
         }
         .project-main.font-face h2 {
         text-align: center;
         margin-bottom: 32px;
         }
         .masonry {
         display: flex;
         flex-wrap: wrap;
         gap: 20px;
         }
         .masonry1 {
         width: 42%;
         }
         .masonry2 {
         width: 27%;
         }
         .masonry3 {
         width: 27.5%;
         }
         .masonry1 .flex2 {
         display: flex;
         flex-wrap: wrap;
         gap: 20px;
         }
         .masonry img {
         width: 100%;!i;!;
         height: 100% !important;
         }
         .flex2 img {
         width: 47.9%;
         margin-top: 20px;
         }
         .masonry2 .flex1, .masonry3 .flex1 {
         display: flex;
         flex-wrap: wrap;
         gap: 20px;
         }
         .main-btn.btn-center {
         text-align: center;
         margin: 50px 0 12px;
         }
         /* accordian */
         section.accordion_section.mt_70.font-face {
         background: #F7F7F7;
         padding: 40px 0;
         }
         .accordion_section .accordion {
         background-color: #fff;
         color: #000;
         cursor: pointer;
         font-family: 'OpenSans';
         margin: 0;
         padding: 20px 30px;
         width: 100%;
         font-size: 20px;
         font-weight: 500;
         border: none;
         text-align: left;
         outline: none;
         border-radius: 8px;
         transition: 0.4s;
         line-height: 24px;
         }
         /* .accordion_section .accordion.active{
         border-bottom: 2px solid #0000001C;
         } */
         .accordion_section .accordion_section {
         background: #F4FDFF;
         padding: 60px 0;
         }
         .accordion_section .acc_sec {
         margin: 20px auto;
         box-shadow: 0 0 6px #0000001C;
         width: 85%;
         border-radius: 8px;
         }
         .accordion_section span.icon {
         font-size: 36px;
         font-weight: 500;
         }
         .accordion_section .accordion_section h2 {
         text-align: center;
         padding-bottom: 20px;
         }
         .accordion_section .panel {
         padding: 0 18px;
         background-color: white;
         max-height: 0;
         overflow: hidden;
         transition: max-height 0.2s ease-out;
         }
         .accordion_section .panel p {
         padding: 15px 12px;
         font-size: 17px;
         line-height: 30px;
         border-top: 1px solid #D1D1D1;
         color: #000;
         font-family: 'OpenSans';
         }
         .accordion_section .panel.show {
         max-height: 500px; /* adjust based on your content */
         }
         .accordion_section .icon {
         float: right;
         }
         section.accordion_section h2 {
         text-align: center;
         margin-bottom: 28px;
         }
         /* insta section */
         section.insta_section.font-face {
         padding: 40px 0;
         background: #F7F7F7;
         }
         .insta_section, .insta_section h2{
         text-align: center;
         }
         .insta-img-group {
         display: flex;
         flex-wrap: wrap;
         margin-top: 25px;
         }
         .insta-img-group img {
         width: 25%;
         } 
         /* call to action */
         .main-btn.mainbtn2.btn-center {
         margin: 0;
         }
         .main-btn.mainbtn2.btn-center a {
         background: transparent;
         border: 1px solid #d40000;
         color: #d40000;
         padding: 16px 20px;
         }
         section.call-to-action.font-face {
         text-align: center;
         padding: 50px 0;
         }
         /* tab section */
         .logo-section.font-face {
         background: #F7F7F7;
         padding: 40px 0;
         }
         .tab-start {
         display: flex;
         flex-wrap:wrap;
         gap: 30px;
         margin-top: 30px;
         }
         .tab-start button#showMoreBtn, button#barsMoreBtn, button#tableMoreBtn, button#chairMoreBtn, button#miscMoreBtn {
    padding: 10px 20px;
    background: #D40000;
    border-radius: 4px;
    color: #fff;
    font-size: 17px;
    left: 43%;
    position: absolute;
    border: none;
    line-height: 30px;
    font-weight: 600;
    transition: 0.3s ease-in-out;
    margin-top: 20px;
    bottom: 0;
    z-index: 9999;
}
         /* Sidebar tabs */
         .tabs {
         position: relative;
         width: 200px;
         height: fit-content;
         display: flex;
         flex-wrap: wrap;
         flex-direction: column;
         }
         .tab {
         padding: 14px 20px;
         cursor: pointer;
         color: #333;
         transition: background-color 0.3s ease;
         position: relative;
         font-size: 18px;
         font-family: 'OpenSans';
         font-weight: 500;
         color: #000;
         border-left: 3px solid #eee;
         }
         .tab:hover {
         background-color: #f2f2f2;
         }
         .tab.active {
         border-color: #D40000;
         }
         /* Main content area */
         .content-wrapper {
         flex: 1;
         min-height: 300px;
         position: relative;
         }
         .tab-content {
         position: absolute;
         top: 0;
         left: 0;
         right: 0;
         opacity: 0;
         pointer-events: none;
         transform: translateY(10px);
         transition: opacity 0.5s ease, transform 0.5s ease;
         display: grid;
         grid-template-columns: repeat(3, 1fr);
         gap: 20px;
         }
         .tab-main {
    text-align: center;
}
.tab-content.active {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
    position: relative;
    padding-bottom: 84px;
}
         /* Card styles */
         .card {
         background: white;
         padding: 15px 15px 30px;
         border-radius: 16px;
         box-shadow: 0 2px 8px rgba(0,0,0,0.05);
         text-align: center;
         }
         .card img {
         width: 100%;
         height: 242px;
         object-fit: contain;
         margin-bottom: 25px;
         border: 1px solid #00000029;
         border-radius: 16px;
         }
         .card-title {
         font-size: 18px;
         line-height: 23px;
         margin-bottom: 5px;
         font-weight: 500;
         text-align: left;
         font-family: 'OpenSans';
         color: #000;
         }
         .card-details {
         flex-wrap: wrap;
         font-size: 16px;
         color: #000;
         padding: 5px 0;
         line-height: 1.8;
         font-family: 'OpenSans';
         text-align: left;
         display: flex;
         gap: 60px;
         }
         .tab-section.font-face {
         background: #F7F7F7;
         padding: 40px 0;
         }

         .card-details-new {
    gap: 20px;
}
         /* footer css */

         footer {
    background: #121214;
    padding: 50px 0 0;
}
         .footer-section-inner {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.footer-col1 {
    width: 30%;
}

.footer-col2 {
    width: 18%;
}

.footer-col3 {
    width: 19%;
}

.footer-col4 {
    width: 24%;
}
.footer-logo img.footer-logo {
    width: 200px;
    margin-bottom: 18px;
}
    .footer p {
    font-size: 15px;
    color: #FFFFFF;
    line-height: 26px;
}
.footer h4 {
    margin-bottom: 14px;
    font-size: 24px;
    line-height: 34px;
    color: #FFFFFF;
    font-weight: 500;
}
    .quick-links ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.quick-links li a{
    margin-bottom: 10px;
    font-size: 15px;
    line-height: 34px;
    color: #fff;
    transition: 0.3s ease-in-out;
}

.quick-links li::before {
    content: "›";
    margin-right: 10px;
    color: #fff;
    font-size: 21px;
}
    .social-icons {
      margin-top: 15px;
    }

    .social-icons a {
    margin-right: 10px;
    font-size: 18px;
    color: #fff;
    text-decoration: none;
    background: #D40000;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}
    .newsletter input {
    padding: 15px 10px;
    border: none;
    width: 100%;
    outline: none;
    border-radius: 4px;
    margin: 0;
}
.newsletter {
    position: relative;
}
.newsletter button {
    padding: 10px 11px;
    background-color: red;
    border: none;
    color: white;
    right: 0;
    top: 4px;
    position: absolute;
    border-radius: 50%;
    cursor: pointer;
}
.contact-info a {
    gap: 10px;
    font-size: 15px;
    line-height: 26px;
    margin-bottom: 12px;
    color: #fff;
    display: flex;
    align-items: baseline;
    transition: 0.3s ease-in-out;
}
.contact-info a img {
    position: relative;
    top: 2px;
    width: 14px;
}
.footer-copyright {
    padding: 15px;
    border-top: 1px solid #1f1f1f;
    margin-top: 70px;
}
.copyright {
    font-family: 'OpenSans';
    font-size: 14px;
    color: #FFFFFF;
    text-align: center;
    line-height: 26px;
}
p.footer-para {
    font-size: 17px;
    text-align: center;
    margin-bottom: 35px;
}
body .fancybox-container {
    position: static !important;
}
.header-logo a:hover {
    background: unset !important;
}
.header-call-btn a:hover {
    background: unset;
    color: #fff;
}
/* media */
@media only screen and (min-width: 0px) and (max-width: 767px) {
.hero-section .hero-left, 
.hero-section .hero-right, 
.service-section .service-box, 
.about-section .about-left,
.about-section .about-right  {
max-width: 100% !important;
}
.tab-content {
grid-template-columns: repeat(2, 1fr);
}
.masonry1, 
.masonry2, 
.masonry3, .flex2 img, .accordion_section .acc_sec{
width: 100% !important;
}
         .about-section.flex-reverse {
    flex-direction: column-reverse;
}
         .footer-col1, .footer-col2, .footer-col3, .footer-col4 {
    width: 100% !important;
}
.footer-col3 h4 {
    display: none;
}
.footer-col1, .footer-col3 {
    margin-bottom: 20px;
}
.newsletter input {
    width: 92%;
}
.newsletter button {
    right: 30px;
}
.header a.icon {
    top: 15px !important;
}
.tab-start button#showMoreBtn, button#barsMoreBtn, button#tableMoreBtn, button#chairMoreBtn, button#miscMoreBtn {
    left: 30%;
}
}
         @media only screen and (max-width: 1024px) {

            .header #myLinks {
    display: none;
    width: 100% !important;
    left: 0;
    position: absolute;
    background: #fff;
    top: 72px;
    padding: 20px;
}
.header-menu {
    /* position: absolute; */
    /* width: 100%; */
    /* top: 0; */
    z-index: 9999;
}
.header a {
   display: block;
 }
.header a.icon {
    background: #D40000;
    color: #fff;
    display: block;
    position: absolute;
    right: 25px;
    padding: 10px 15px;
    top: 30px;
}
 .header-top {
    justify-content: center !important;
}
.header-call-btn {
    display: none;
}
.header-logo {
    width: 40%;
}
ul#myLinks li {
    margin-bottom: 24px;
}
/* i.fa.fa-bars:active, i.fa.fa-bars:focus, i.fa.fa-bars:visible{
   color:red !important;
} */
.font-face .container {
width: 90%;
margin: 0 auto;
}
.hero-right .form-section h3 {
font-size: 26px;
line-height: 34px;
}
.hero-section p {
font-size: 17px;
line-height: 28px;
}
.hero-right .form-section p {
font-size: 14px;
line-height: 23px;
}
.hero-section h1 {
font-size: 34px;
line-height: 44px;
}
.font-face h2 {
font-size: 26px;
line-height: 36px;
}
.service-box h4 {
font-size: 20px;
line-height: 30px;
}
.service-section .service-box p {
font-size: 15px;
}
.service-main p, .about-section p, section.call-to-action.font-face p, .tab-section.font-face p {
font-size: 16px;
line-height: 27px;
}
.main-btn.mainbtn2.btn-center a {
padding: 12px 20px;
}
.hero-section, .about-section {
gap: 30px;
}
.hero-section .hero-left {
max-width: 45%;
}
.hero-section .hero-right {
max-width: 44%;
}
.service-section .service-box {
max-width: 47%;
}
.tab-start {
display: block;
}
.card-details {
gap: 0;
}
.card img {
height: 130px;
}
.card-title {
font-size: 16px;
}
.card-details {
font-size: 14px;
line-height: 1.7;
}
div#tabList {
flex-direction: row;
width: 100%;
margin-bottom: 35px;
}
.tab {
border-left: 0;
border-bottom: 3px solid #eee;
padding: 17px 15px;
font-size: 16px;
}
.about-main.font-face.about-main2 {
padding: 30px 0;
}
.accordion_section .acc_sec{
width: 100%;
}
.call-btn a {
font-size: 14px;
line-height: 16px;
}
.masonry1 .flex2 {
gap: 0;
}
.call-btn div:nth-child(1) {
width: 20%;
}
.call-btn a span {
font-size: 10px;
}
.hero-btn-row {
gap: 20px;
}
.google-review img {
width: 74%;
}
.call-btn {
padding: 8px 14px;
}
.accordion_section .accordion {
font-size: 17px;
line-height: 24px;
}
.accordion_section span.icon {
font-size: 27px;
}
.accordion_section .accordion {
display: flex;
align-items: center;
justify-content: space-between;
}
.accordion_section .panel p {
font-size: 15px;
line-height: 27px;
}
.masonry1 .flex2 {
justify-content: space-between;
}
.masonry1 {
width: 40%;
}
.masonry2 {
width: 25.5%;
}
.masonry3 {
width: 26%;
}
.flex2 img {
width: 45.9%;
}
.masonry {
justify-content: center;
}
.footer-col1 {
width: 42%;
}
.footer-col2 {
    width: 28%;
}
.footer-col3 {
    width: 26%;
}
.footer-col4 {
    width: 39%;
}
}
@media only screen and (min-width: 1025px) and (max-width: 1500px) {
.font-face .container {
width: 95%;
margin: 0 auto;
}
.hero-section .hero-left {
max-width: 49%;
}
.service-section .service-box {
width: 100%;
max-width: 30%;
text-align: center;
}
.hero-section {
gap: 85px;
}
.about-section {
gap: 57px;
}
.masonry, .masonry1 .flex2 {
gap: 17px;
}
.card-details {
gap: 0;
}

}
         /* .tab-content button {
    position: absolute;
    bottom: 0;
    left: 44%;
}

#soft , #bars {
    position: relative;
    padding-bottom: 79px;
} */