/* --------------------------------------------- font & reset css --------------------------------------------- */
@import url("https://fonts.googleapis.com/css?family=Poppins:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i");
/* --------------------------------------------- reset --------------------------------------------- */
 html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, div pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, figure, header, nav, section, article, aside, footer, figcaption {
     margin: 0;
     padding: 0;
     border: 0;
     outline: 0;
}
 header, nav, section, article, aside, footer, hgroup {
     display: block;
}
 * {
     box-sizing: border-box;
}
 html, body {
     font-family: 'Poppins', sans-serif;
     font-weight: 400;
     background-color: #fff;
     font-size: 16px;
     -ms-text-size-adjust: 100%;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     scroll-behavior: smooth;
}
 a {
     text-decoration: none !important;
}
 p {
     font-size: 16px;
     line-height: 25px;
     color: #383838;
}
/* --------------------------------------------- header --------------------------------------------- */
 .background-header {
     background: rgba(250,250,250,0.99) !important;
     height: 80px!important;
     position: fixed!important;
     top: 0px;
     left: 0px;
     right: 0px;
     box-shadow: 0px 0px 10px rgba(0,0,0,0.15)!important;
}
 .background-header .logo, .background-header .main-nav .nav li a {
     color: #232d39!important;
}
 .background-header .main-nav .nav li:last-child a {
     color: #fff !important;
}
 .background-header .main-nav .nav li:last-child a:hover {
     color: #fff!important;
}

 .header-area .main-nav {
     min-height: 80px;
     background: transparent;
}

 .header-area .main-nav .nav {
     float: right;
     margin-top: 27px;
     margin-right: 0px;
     background-color: transparent;
     -webkit-transition: all 0.3s ease 0s;
     -moz-transition: all 0.3s ease 0s;
     -o-transition: all 0.3s ease 0s;
     transition: all 0.3s ease 0s;
     position: relative;
     z-index: 999;
}
 .header-area .main-nav .nav li {
     padding-left: 20px;
     padding-right: 20px;
}
 .header-area .main-nav .nav li a {
     display: block;
     font-weight: 600;
     font-size: 21px;
     color: #7a7a7a;
     text-transform: uppercase;
     -webkit-transition: all 0.3s ease 0s;
     -moz-transition: all 0.3s ease 0s;
     -o-transition: all 0.3s ease 0s;
     transition: all 0.3s ease 0s;
     height: 40px;
     line-height: 40px;
     border: transparent;
     letter-spacing: 0px;
}
 .header-area .main-nav .nav li a {
     color:#000;
}
 .header-area .main-nav .nav li:last-child a {
     display: inline-block;
     font-size: 17px;
     padding: 11px 17px;
     background-color: #0c223f;
     color: #fff;
     text-align: center;
     font-weight: 500;
     letter-spacing: 0px;
     text-transform: uppercase;
     transition: all .3s;
     height: auto;
     line-height: 20px;
}
 .header-area .main-nav .nav li:last-child a:hover {
     background-color:#0c223f;
     opacity: 1;
}
 .header-area .main-nav .nav li:hover a, .header-area .main-nav .nav li a.active {
     color:#fff;
     opacity: 1;
}
 .background-header .main-nav .nav li:hover a, .background-header .main-nav .nav li a.active {
     color: #000;
     opacity: 1;
}
 .header-area .main-nav .menu-trigger {
     cursor: pointer;
     display: block;
     position: absolute;
     top: 23px;
     width: 32px;
     height: 40px;
     text-indent: -9999em;
     z-index: 99;
     right: 40px;
     display: none;
}
 .header-area .main-nav .menu-trigger span, .header-area .main-nav .menu-trigger span:before, .header-area .main-nav .menu-trigger span:after {
     -moz-transition: all 0.4s;
     -o-transition: all 0.4s;
     -webkit-transition: all 0.4s;
     transition: all 0.4s;
     background-color: #1e1e1e;
     display: block;
     position: absolute;
     width: 30px;
     height: 2px;
     left: 0;
}
 .background-header .main-nav .menu-trigger span, .background-header .main-nav .menu-trigger span:before, .background-header .main-nav .menu-trigger span:after {
     background-color: #1e1e1e;
}
 .header-area .main-nav .menu-trigger span:before, .header-area .main-nav .menu-trigger span:after {
     -moz-transition: all 0.4s;
     -o-transition: all 0.4s;
     -webkit-transition: all 0.4s;
     transition: all 0.4s;
     background-color: #1e1e1e;
     display: block;
     position: absolute;
     width: 30px;
     height: 2px;
     left: 0;
     width: 75%;
}
 .background-header .main-nav .menu-trigger span:before, .background-header .main-nav .menu-trigger span:after {
     background-color: #1e1e1e;
}
 .header-area .main-nav .menu-trigger span:before, .header-area .main-nav .menu-trigger span:after {
     content: "";
}
 .header-area .main-nav .menu-trigger span {
     top: 16px;
}
 .header-area .main-nav .menu-trigger span:before {
     -moz-transform-origin: 33% 100%;
     -ms-transform-origin: 33% 100%;
     -webkit-transform-origin: 33% 100%;
     transform-origin: 33% 100%;
     top: -10px;
     z-index: 10;
}
 .header-area .main-nav .menu-trigger span:after {
     -moz-transform-origin: 33% 0;
     -ms-transform-origin: 33% 0;
     -webkit-transform-origin: 33% 0;
     transform-origin: 33% 0;
     top: 10px;
}
 .header-area .main-nav .menu-trigger.active span, .header-area .main-nav .menu-trigger.active span:before, .header-area .main-nav .menu-trigger.active span:after {
     background-color: transparent;
     width: 100%;
}
 .header-area .main-nav .menu-trigger.active span:before {
     -moz-transform: translateY(6px) translateX(1px) rotate(45deg);
     -ms-transform: translateY(6px) translateX(1px) rotate(45deg);
     -webkit-transform: translateY(6px) translateX(1px) rotate(45deg);
     transform: translateY(6px) translateX(1px) rotate(45deg);
     background-color: #1e1e1e;
}
 .background-header .main-nav .menu-trigger.active span:before {
     background-color: #1e1e1e;
}
 .header-area .main-nav .menu-trigger.active span:after {
     -moz-transform: translateY(-6px) translateX(1px) rotate(-45deg);
     -ms-transform: translateY(-6px) translateX(1px) rotate(-45deg);
     -webkit-transform: translateY(-6px) translateX(1px) rotate(-45deg);
     transform: translateY(-6px) translateX(1px) rotate(-45deg);
     background-color: #1e1e1e;
}
 .background-header .main-nav .menu-trigger.active span:after {
     background-color: #1e1e1e;
}
 .header-area.header-sticky {
     min-height: 80px;
}
 .header-area.header-sticky .nav {
     margin-top: 20px !important;
}
 .header-area.header-sticky .nav li a.active {
     color:#000;
}
 @media (max-width: 1200px) {
     .header-area .main-nav .nav li {
         padding-left: 12px;
         padding-right: 12px;
    }
     .header-area .main-nav:before {
         display: none;
    }
}
 @media (max-width: 767px) {
     .header-area .main-nav .logo {
         color: #1e1e1e;
    }
     .header-area.header-sticky .nav li a:hover, .header-area.header-sticky .nav li a.active {
         color: #000;
         opacity: 1;
    }
     .header-area {
         background-color: #f7f7f7;
         padding: 0px 15px;
         height: 80px;
         box-shadow: none;
         text-align: center;
    }
     .header-area .container {
         padding: 0px;
    }
     .header-area .logo {
         margin-left: 30px;
    }
     .header-area .menu-trigger {
         display: block !important;
    }
     .header-area .main-nav {
         overflow: hidden;
    }
     .header-area .main-nav .nav {
         float: none;
         width: 100%;
         display: none;
         -webkit-transition: all 0s ease 0s;
         -moz-transition: all 0s ease 0s;
         -o-transition: all 0s ease 0s;
         transition: all 0s ease 0s;
         margin-left: 0px;
    }
     .header-area .main-nav .nav li:first-child {
         border-top: 1px solid #eee;
         margin-top: -81px;
    }
     .header-area .main-nav .nav li:last-child {
         width: 100%;
         background-color: #0c223f;
         color: #fff;
    }
     .header-area .main-nav .nav li:last-child a {
         background-color:#0c223f!important;
    }
     .header-area .main-nav .nav li:last-child a:hover, .header-area .main-nav .nav li:last-child:hover a {
         background-color:#0c223f!important;
         color: #fff!important;
    }
     .header-area.header-sticky .nav {
         margin-top: 80px !important;
    }
     .header-area .main-nav .nav li {
         width: 100%;
         background: #fff;
         border-bottom: 1px solid #eee;
         padding-left: 0px !important;
         padding-right: 0px !important;
    }
     .header-area .main-nav .nav li a {
         height: 40px !important;
         line-height: 40px !important;
         font-size: 16px;
         padding: 0px !important;
         border: none !important;
         background: #f7f7f7 !important;
         color: #232d39 !important;
    }
     .header-area .main-nav .nav li:last-child a {
         color: #fff!important;
    }
     .header-area .main-nav .nav li a:hover {
         background: #eee !important;
         color: #224595!important;
    }

     .header-area .main-nav .nav li.submenu:hover ul, .header-area .main-nav .nav li.submenu:focus ul {
         height: 0px;
    }
}
 @media (min-width: 767px) {
     .header-area .main-nav .nav {
         display: flex !important;
    }
}

 .image-box {
     position: relative;
     overflow: hidden;
     border-radius: 0px;
     height: 550px;
     background-size: cover;
     background-position: center;
     display: flex;
     align-items: center;
     justify-content: center;
}
 .overlay {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: rgba(0, 0, 0, 0.5);
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     color: white;
     text-align: center;
     padding: 20px;
     opacity: 1;
     transition: background 0.4s ease-in-out;
}
 .overlay::before {
     content: "";
     position: absolute;
     bottom: -100%;
     left: 0;
     width: 100%;
     height: 100%;
     background: rgba(0, 0, 0, 0.4);
     transition: bottom 0.4s ease-in-out;
}
 .overlay h3 {
     opacity: 1;
     transform: translateY(10px);
     transition: opacity 0.4s ease-in-out, transform 0.4s ease-in-out;
     margin-bottom: 10px;
     position: relative;
}
 .overlay p {
     opacity: 0;
     transform: translateY(20px);
     transition: opacity 0.4s ease-in-out, transform 0.4s ease-in-out;
     position: relative;
     color: #fff;
}
 .image-box:hover .overlay::before {
     bottom: 0;
}
 .image-box:hover .overlay {
     background: rgb(12 34 63 / 40%);
}
 .image-box:hover .overlay h3 {
     transform: translateY(-10px);
}
 .image-box:hover .overlay p {
     opacity: 1;
     transform: translateY(0);
}
 .servicesmat{
     margin-top: 90px;
     margin-bottom: 80px;
     padding-left: 80px;
     padding-right: 80px;
}
 @media(max-width:767px){
     .image-box {
         position: relative;
         overflow: hidden;
         border-radius: 10px;
         height: 300px;
         background-size: cover;
         background-position: center;
         display: flex;
         align-items: center;
         justify-content: center;
         margin-top: 10px;
    }
}
 .matrial{
     margin-top: 50px;
     margin-top: 50px;
     padding-top: 60px;
     padding-bottom: 60px;
     background-color:#f5f5f5;
}
 .servicesmat{
     padding-left: 80px;
     padding-right: 80px;
}
 @media(max-width:676px) {
     .servicesmat {
         padding-left: 10px;
         padding-right: 10px;
         margin-top: 0px!important;
         margin-bottom: 20px;
    }
     .service-item {
         text-align: center;
         margin-bottom: 25px;
         border: 1px solid #b3afaf;
         margin-left: 55px;
         margin-right: 55px;
         padding-bottom: 23px;
         border-radius: 3px;
    }
     .who-checklist {
         margin-left: 0px!important;
    }
     .material {
         margin-top: 20px!important;
    }
}
 .material {
     margin-top: 0px;
     padding-top: 20px;
     padding-bottom: 50px;
     background-color: #fff;
}
 .service-item {
     text-align: center;
     margin-bottom: 20px;
}
 .service-item img {
     max-width: 120px;
     margin-bottom: 10px;
}
 .service-item b {
     display: block;
     font-size: 16px;
     color: #333;
}
 .header-area.header-sticky {
     min-height: 80px;
     z-index: 1000;
     position: fixed;
     top: 0;
     width: 100%;
     background-color: #ffffff00;
     transition: all 0.3s ease-in-out;
}
/* --------------------------------------------- banner --------------------------------------------- */

 html {
     scroll-behavior: smooth;
}
 @media (max-width: 991px) {
     html, body {
         overflow-x: hidden;
    }
     .mobile-top-fix {
         margin-top: 30px;
         margin-bottom: 0px;
    }
     .mobile-bottom-fix {
         margin-bottom: 30px;
    }
     .mobile-bottom-fix-big {
         margin-bottom: 60px;
    }
}
 .who-checklist{
     margin-left: 30px;
}
 .main-button a {
     display: inline-block;
     font-size: 15px;
     padding: 12px 20px;
     background-color: #224595;
     color: #fff;
     text-align: center;
     font-weight: 400;
     text-transform: uppercase;
     transition: all .3s;
}
 .main-banner {
     position: relative;
}
 #bg-video {
     min-width: 100%;
     min-height: 100vh;
     max-width: 100%;
     max-height: 100vh;
     object-fit: cover;
     z-index: -1;
}
 #bg-video::-webkit-media-controls {
     display: none !important;
}
 .video-overlay {
     position: absolute;
     top: 0;
     left: 0;
     bottom: 7px;
     width: 100%;
}
 .main-banner .caption {
     text-align: center;
     position: absolute;
     width: 80%;
     left: 50%;
     top: 90%;
     transform: translate(-50%,-50%);
}
 .main-banner .caption h6 {
     margin-top: 0px;
     font-size: 51px;
     text-transform: capitalize;
     font-weight: 800;
     color: #fff;
     letter-spacing: 0.5px;
}
 .main-banner i.fa.fa-angle-down {
     font-size: 4rem;
     text-transform: uppercase;
     font-weight: 400;
     color: #fff;
     letter-spacing: 1px;
}
 .main-banner i.fa.fa-angle-down:hover{
     color: #0c223f;
}
 .main-banner .caption h2 em {
     font-style: normal;
     color:#224595;
     font-weight: 900;
}
 @media (min-width: 1400px) {
     .container{
        /* max-width: 3997px !important;
         */
         max-width:5600px!important;
    }
}

 .about_whowearesection{
     margin-top: 110px;
     margin-bottom: 100px;
}
 .about_whoweare{
     font-size: 59px;
     font-weight: 700;
     color: #0c223f;
}
 @media(max-width:767px){
     .about_whoweare{
         font-size: 35px;
         font-weight: 900px;
         color: #0c223f;
    }
     .about_paragonflooring {
         font-size: 30px!important;
    }
     .about_paragonflooring span {
         font-size: 21px!important;
    }
     .paragonflooringparagraph{
         font-size: 15px!important;
         text-align: justify;
    }
}
 p.about_whowearepara {
     font-size: 19px;
     line-height: 1.7;
     text-align: justify;
}
 .about_paragonflooring{
     font-size: 45px;
     font-weight: 700;
     color: #0c223f;
}
 .about_paragonflooring span{
     font-size: 30px;
}
 .contact-now{
     font-size: 38px;
     color: #0c223f;
     font-weight: 700;
}
 .contact_main{
     background-color:#0c223f;
     padding-top: 40px;
     padding-bottom: 40px;
}
 .btn-secondary {
     color: #fff;
     background-color:#224595;
     border-color: #224595;
     padding:10px 15px 10px 15px;
}
 .btn-secondary:hover {
     color: #fff;
     background-color: #000;
     border-color: #000;
}

 .rounded-circle {
     border-radius: 50% !important;
     float: right;
     background-color: #0c223f;
     border-color: #fff;
}
 .rounded-circle:hover {
     border-radius: 50% !important;
     float: right;
     background-color: #0c223f;
}
 .abouttitle{
     color: #0c223f;
     font-size: 45px;
}
 .about_subtitle{
     color: #0c223f;
     font-size: 30px;
     font-weight: 600;
}
 .aboutheading{
     color: #808080;
}
 .blog_subtitle{
     text-align: center;
     color: #0c223f;
     margin-top: 10px;
     font-size: 56px;
     padding-bottom: 40px;
     margin-bottom: 30px;
     font-weight: 700;
}
/*footer Section Start*/
.scrolling{
    background:#374252!important;
    border: 1px solid #cac1c1!important;
}
 .footer {
     background: #e8ecfc;
     padding: 32px 0px 30px 0px;
}
 .header-logo{
     width: 240px;
}
 .footer-logo {
     width: 240px;
}
 .footer-text {
     font-size: 14px;
     color: #333;
     padding: 20px 0px 20px 0px;
}
 .social-icons a {
     display: inline-block;
     font-size: 16px;
     color: #002366;
     margin-right: 10px;
     text-decoration: none;
}
 .footer-title {
     font-weight: bold;
     color: #0c223f;
}
 .footer-line {
     width: 60px;
     height: 2px;
     background: #0c223f;
     margin: 5px 0 20px;
}
 .footer-links {
     list-style: none;
     padding: 0;
}
 .footer-links li {
     margin-bottom: 8px;
}
 .footer-links a {
     text-decoration: none;
     color: #333;
     font-size: 14px;
}
 .footer-links a i {
     margin-right: 5px;
}
 .f-logo {
     margin-left: 70px;
     margin-top: 25px;
}
 .footer-contact {
     margin-left: -46px;
}
 .footer-quick {
     margin-left: 27px;
}
 @media only screen and (max-width: 767px){
     .f-logo {
         margin-left: 0px;
    }
     .header-logo {
         width: 138px;
         margin-left: -163px;
         margin-top: 15px;
    }
     .footer-contact {
         margin-left: 0px;
         padding-top: 20px;
    }
     .footer-quick {
         margin-left: 0px;
         padding-top: 20px;
    }
     .footer-logo{
         width: 190px;
         margin-left: 0px;
    }
}
/*Footer Section End*/
 .contact-item {
     display: flex;
     align-items: center;
     margin-bottom: 15px;
}
 .form-contact{
     margin-bottom: 30px;
}
 .icon-box {
     width: 40px;
     height: 40px;
     color: #0c223f;
     font-size: 18px;
     display: flex;
     align-items: center;
     justify-content: center;
     border-radius: 8px;
     margin-right: 10px;
}
 .label {
     font-size: 12px;
     font-weight: bold;
     color: #555;
     margin: 0;
}
 .detail {
     font-size: 14px;
     margin: 0;
     color: #0c223f;
}
 .detail a {
     color: #0c223f;
     text-decoration: none;
     font-weight: bold;
}
 .send-btn i {
     font-size: 14px;
}
 .copyright{
     background-color: #0c223f;
}
 .fab{
     border: 1px solid;
     padding: 10px;
     border-radius: 20px;

     /* margin-left: 50px; */
}
.social{
    margin-left: 120px;
}
 .aboutparagonflooring{
     margin-top: 150px;
}
 .about_subheading{
     padding: 0px 20px 0px 20px;
}
 .section-checklist{
     background-image: url(../images/particle_4.png);
     background-position: top center;
     background-repeat: no-repeat;
     background-size: cover;
     padding: 0px 30px 10px 0px ;
     margin-top: -25px;
}
 .check-item {
     display: flex;
     align-items: center;
     margin-bottom: 15px;
}
 .check-icon {
     width: 20px;
     height: 20px;
     background: #0c223f;
     color: white;
     font-size: 15px;
     display: flex;
     align-items: center;
     justify-content: center;
     border-radius: 4px;
     margin-right: 10px;
     margin-top: -14px;
}
/* Ensuring content stays above overlay */

 .testimonial_section{
     margin: 140px 230px 80px 230px;
}

 .owl-theme .owl-controls .owl-page span{
     border: 2px solid #0c223f;
     background: #fff !important;
     border-radius:0 !important;
     opacity: 1;
}
 .owl-theme .owl-controls .owl-page.active span, .owl-theme .owl-controls .owl-page:hover span{
     background: #0c223f !important;
     border-color:#0c223f;
}
 @media only screen and (max-width: 767px){
   
     .testimonial_section {
         margin: 50px 0px 40px 0px;
    }
   .social{
    margin-left: 40px;
}
    .check-icon{
        margin-top: -28px!important;
    }

     .about_whowearesection {
         margin-top: 28px;
         margin-bottom: 39px;
    }
     p.about_whowearepara {
         font-size: 16px;
         line-height: 1.7;
         text-align: justify;
    }
     .aboutparagonflooring {
         margin-top: 48px;
    }

     .blog_subtitle {
         text-align: center;
         color: #0c223f;
         margin-top: 10px;
         font-size: 30px!important;
         margin-bottom: 30px;
         font-weight: 700;
    }

}
/* --------------------------------------------- global styles --------------------------------------------- */

 #contact-us .contact-form #contact {
     background-color: #fff;
    padding: 65px 70px 90px 70px;
     border-radius: 5px;
}
 .contact-form input, .contact-form textarea {
     color: #7a7a7a;
     font-size: 13px;
     border: 1px solid #ddd;
     background-color: #fff;
     width: 100%;
     height: 40px;
     outline: none;
     line-height: 40px;
     padding: 0px 10px;
     margin-bottom: 30px;
}
 .contact-form textarea {
     height: 150px;
     resize: none;
}
 
 .contact-form button {
     display: inline-block;
     font-size: 17px;
     padding: 11px 17px;
     background-color: #0c223f;
     color: #fff;
     text-align: center;
     font-weight: 400;
     text-transform: uppercase;
     transition: all .3s;
     border: none;
     outline: none;
     margin-top: -8px;
}
 .contact-form button:hover {
     background-color: #0c223f;
}
 @media(max-width:767px){
     .about_subheading {
         padding: 30px 0px 0px 0px;
         margin-top: 20px;
    }
     .section-checklist {
         padding: 40px 0px 0px 0px;
    }
     .about_subtitle {
         font-size: 21px;
         font-weight: 700;
    }
     .abouttitle {
         font-size: 26px;
    }
  
     #contact-us {
         margin-top: 51px;
    }
 
     .main-banner .caption h6 {
         margin-top: 0px;
         font-size: 30px;
    }
    .about_whoweare {
        font-size: 39px!important;
   }
}
/* --------------------------------------------- responsive --------------------------------------------- */
 @media (max-width: 992px) {
     .main-banner .caption h2 {
         font-size: 30px;
         text-transform: capitalize;
    }
     .about_whowearesection {
         margin-top: 56px!important;
         margin-bottom: 45px!important;
    }
     .who-checklist {
         margin-left: 0px;
         margin-top: -32px;
    }
     .about_whoweare {
         font-size: 49px;
    }
     p.about_whowearepara {
         font-size: 16px;
    }
     .about_subheading {
         padding: 0px;
    }
     #contact-us #map {
         margin-bottom: -7px;
    }
     #contact-us .contact-form {
         padding: 30px;
    }
     #contact-us .contact-form #contact {
         padding: 30px;
    }
     .material {
         margin-top: 40px;
         padding-top: 0px;
         padding-bottom: 50px;
         background-color: #fff;
    }
     .blog_subtitle {
         font-size: 43px;
    }
    .check-icon{
        margin-top: -29px;
    }
}
 @media (max-width: 450px) {
     .feature-item .right-content a.text-button {
         margin-left: 130px;
    }
}