/*

TemplateMo 591 villa agency

https://templatemo.com/tm-591-villa-agency

*/

/* ---------------------------------------------
Table of contents
------------------------------------------------
01. font & reset css
02. reset
03. global styles
04. header
05. banner
06. features
07. testimonials
08. contact
09. footer

--------------------------------------------- */
/* 
---------------------------------------------
font & reset css
--------------------------------------------- 
*/
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900");
/* 
---------------------------------------------
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;
}

.clearfix:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}

.clearfix {
  display: inline-block;
}

html[xmlns] .clearfix {
  display: block;
}

* html .clearfix {
  height: 1%;
}

ul, li {
  padding: 0;
  margin: 0;
  list-style: none;
}

header, nav, section, article, aside, footer, hgroup {
  display: block;
}

* {
  box-sizing: border-box;
}

html, body {
  font-family: 'Poppins', sans-serif;
  -ms-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  text-decoration: none !important;
}

h1, h2, h3, h4, h5, h6 {
  color: #1e1e1e;
  margin-top: 0px;
  margin-bottom: 0px;
  font-weight: 700;
}

ul {
  margin-bottom: 0px;
}

p {
  font-size: 14px;
  line-height: 28px;
  color: #4a4a4a;
}

img {
  width: 100%;
  overflow: hidden;
}

/* 
---------------------------------------------
Global Styles
--------------------------------------------- 
*/
html,
body {
  font-family: 'Poppins', sans-serif;
}

::selection {
  background: #0071f8;
  color: #fff;
}

::-moz-selection {
  background: #0071f8;
  color: #fff;
}

.section {
  margin-top: 120px;
}

.section-heading {
  margin-bottom: 70px;
}

.section-heading h2 {
  font-size: 40px;
  font-weight: 700;
  text-transform: capitalize;
  margin-top: 20px;
  line-height: 56px;
}

.section-heading h2 em {
  font-style: normal;
  color: #0071f8;
}

.section-heading h6 {
  color: #89c2cf;
  font-size: 15px;
  text-transform: uppercase;
  font-weight: 700;
}

.icon-button a {
  display: inline-block;
  background-color: #1e1e1e;
  color: #fff;
  font-size: 14px;
  font-weight: 400;
  height: 50px;
  line-height: 50px;
  padding: 0px 30px 0px 0px;
  border-radius: 25px;
  transition: all .3s;
}

.icon-button a i {
  background-color: #16345c;
  height: 50px;
  width: 50px;
  text-align: center;
  border-radius: 50%;
  line-height: 50px;
  display: inline-block;
  margin-right: 15px;
  margin-left: -1px;
}

.icon-button a:hover {
  color: #89c2cf;
}

.icon-button a:hover i {
  color: #89c2cf;
}

.main-button a {
  display: inline-block;
  background-color: #1e1e1e;
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  height: 40px;
  line-height: 40px;
  padding: 0px 30px;
  border-radius: 25px;
  transition: all .3s;
}

.main-button a:hover {
  background-color: #16345c;
  color: #fff;
}

/* 
---------------------------------------------
Pre-loader Style
--------------------------------------------- 
*/

.js-preloader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.99);
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-pack: center;
  justify-content: center;
  opacity: 1;
  visibility: visible;
  z-index: 9999;
  -webkit-transition: opacity 0.25s ease;
  transition: opacity 0.25s ease;
}

.js-preloader.loaded {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

@-webkit-keyframes dot {
  50% {
      -webkit-transform: translateX(96px);
      transform: translateX(96px);
  }
}

@keyframes dot {
  50% {
      -webkit-transform: translateX(96px);
      transform: translateX(96px);
  }
}

@-webkit-keyframes dots {
  50% {
      -webkit-transform: translateX(-31px);
      transform: translateX(-31px);
  }
}

@keyframes dots {
  50% {
      -webkit-transform: translateX(-31px);
      transform: translateX(-31px);
  }
}

.preloader-inner {
  position: relative;
  width: 142px;
  height: 40px;
  background: transparent;
}

.preloader-inner .dot {
  position: absolute;
  width: 16px;
  height: 16px;
  top: 12px;
  left: 15px;
  background: #16345c;
  border-radius: 50%;
  -webkit-transform: translateX(0);
  transform: translateX(0);
  -webkit-animation: dot 2.8s infinite;
  animation: dot 2.8s infinite;
}

.preloader-inner .dots {
  -webkit-transform: translateX(0);
  transform: translateX(0);
  margin-top: 12px;
  margin-left: 31px;
  -webkit-animation: dots 2.8s infinite;
  animation: dots 2.8s infinite;
}

.preloader-inner .dots span {
  display: block;
  float: left;
  width: 16px;
  height: 16px;
  margin-left: 16px;
  background: #16345c;
  border-radius: 50%;
}



/* 
---------------------------------------------
Header Style
--------------------------------------------- 
*/

.sub-header {
  background-color: #fff;
  padding: 0px 0px;
  border-bottom: 1px solid #eee;
}

.sub-header ul li {
  display: inline-block;
}

.sub-header ul.social-links {
  text-align: right;
}

.sub-header ul.social-links li {
  margin-left: 8px;
}

.sub-header ul.social-links li a {
  display: inline-block;
  width: 30px;
  height: 30px;
  background-color: #cdcdcd;
  border-radius: 50%;
  text-align: center;
  line-height: 30px;
  color: #fff;
  font-size: 14px;
  transition: all .3s;
}

.sub-header ul.social-links li a:hover {
  background-color: #16345c;
}

.sub-header ul.info li {
  font-size: 14px;
  color: #7a7a7a;
  border-right: 1px solid #eee;
  margin-right: 25px;
  padding-right: 25px;
}

.sub-header ul.info li:last-child {
  margin-right: 0px;
  padding-right: 0px;
  border-right: none;
}

.sub-header ul.info li i {
  font-size: 20px;
  color: #16345c;
  margin-right: 8px;
}

.background-header {
  background-color: #fff;
  height: 80px!important;
  position: fixed!important;
  top: 0!important;
  left: 0;
  right: 0;
  box-shadow: 0px 0px 10px rgba(0,0,0,0.15)!important;
  -webkit-transition: all .5s ease 0s;
  -moz-transition: all .5s ease 0s;
  -o-transition: all .5s ease 0s;
  transition: all .5s ease 0s;
}

.header-area {
  position: relative;
  background-color: #fff;
  height: 100px;
  z-index: 100;
  -webkit-transition: all .5s ease 0s;
  -moz-transition: all .5s ease 0s;
  -o-transition: all .5s ease 0s;
  transition: all .5s ease 0s;
}

.header-area .main-nav {
  background: transparent;
  display: flex;
}

.header-area .main-nav .logo {
  -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;
  display: inline-block;
}

.header-area .main-nav .logo h1 {
  line-height: 100px;
  font-size: 28px;
  text-transform: uppercase;
  color: #1e1e1e;
  font-weight: 700;
  letter-spacing: 2px;
}

.background-header .main-nav .logo h1 {
  line-height: 80px;
}

.header-area .main-nav ul.nav {
  flex-basis: 100%;
  margin-top: 30px;
  justify-content: right;
  -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:last-child {
  padding-right: 0px;
}

.header-area .main-nav .nav li {
  padding-left: 10px;
  padding-right: 10px;
  height: 100px;
  line-height: 100px;
}

.header-area .main-nav .nav li a {
  display: block;
  padding-left: 20px;
  padding-right: 20px;
  font-weight: 500;
  font-size: 15px;
  height: 40px;
  line-height: 40px;
  text-transform: capitalize;
  color: #1e1e1e;
  -webkit-transition: all 0.4s ease 0s;
  -moz-transition: all 0.4s ease 0s;
  -o-transition: all 0.4s ease 0s;
  transition: all 0.4s ease 0s;
  border: transparent;
  letter-spacing: .25px;
}

.header-area .main-nav .nav li:last-child a {
  background-color: #1e1e1e;
  color: #fff;
  font-size: 14px;
  font-weight: 400;
  text-transform: none;
  border-radius: 20px;
  padding-left: 0px;
}

.header-area .main-nav .nav li:last-child a i {
  background-color: #16345c;
  display: inline-block;
  width: 40px;
  height: 40px;
  text-align: center;
  line-height: 40px;
  margin-right: 10px;
  border-radius: 50%;
  margin-left: -1px;
}

.header-area .main-nav .nav li:last-child:hover a {
  background-color: #1e1e1e;
}

.header-area .main-nav .nav li:last-child:hover a i {
  color: #fff;
}

.header-area .main-nav .nav li:hover a {
  color: #89c2cf;
}

.header-area .main-nav .nav li a.active {
  color: #16345c;
}


.background-header .main-nav .nav li a.active {
  color: #16345c;
}

.header-area .main-nav .menu-trigger {
  cursor: pointer;
  position: absolute;
  top: 23px;
  width: 32px;
  height: 40px;
  text-indent: -9999em;
  z-index: 99;
  right: 20px;
  display: none;
}

.background-header .main-nav .menu-trigger {
  top: 22px;
}

.background-header .main-nav ul.nav {
  margin-top: 20px;
}

.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;
}

.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%;
}

.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;
}

.visible{
  display:inline !important;
}

@media (max-width: 1200px) {
  .header-area .main-nav .nav li {
    padding-left: 5px;
    padding-right: 5px;
  }

}

@media (max-width: 900px) {
  .background-header .main-nav {
    box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.15);
    border-radius: 0px 0px 25px 25px;
    width: 100%;
  }
  .background-header .main-nav .nav,
  .header-area .main-nav .nav {
    background-color: #fff;
  }
  .background-header .main-nav .nav li a,
  .header-area .main-nav .nav li a {
    line-height: 50px;
    height: 50px;
    font-weight: 400;
    color: #1e1e1e;
    background-color: #fff;
     border-radius: 0px 0px 25px 25px;
  }
  .background-header .main-nav .nav li,
  .header-area .main-nav .nav li {
    border-top: 1px solid #ddd;
    background-color: #f1f0fe;
    height: 50px;
    border-radius: 0px 0px 25px 25px;
  }
  .header-area .main-nav .nav {
    height: auto;
    flex-basis: 100%;
  }
  .header-area .main-nav .logo {
    position: absolute;
    left: 30px;
    top: 10px;
  }
  .background-header .main-nav .logo {
    top: 0px;
  }
  .background-header .main-nav .border-button {
    top: 0px !important;
  }
  .header-area .main-nav .border-button {
    position: absolute;
    top: 15px;
    right: 70px;
  }
  .header-area.header-sticky .nav li a:hover,
  .header-area.header-sticky .nav li a.active {
    color: #ee626b!important;
    opacity: 1;
  }
  .header-area.header-sticky .nav li.search-icon a {
    width: 100%;
  }
    /* FREE QUOTE - MOBILE MENU */
  .header-area .nav li:last-child a {
    background-color: #fff !important;
    color: #1e1e1e !important;
    font-weight: 300 !important;
    text-transform: capitalize !important;
  }

  .header-area .nav li:last-child a i {
    background-color: #16345c !important;
    color: #fff !important;
  }

  /* FREE QUOTE - HOVER */
  .header-area .nav li:last-child a:hover {
    background-color: #fff !important;
    color: #f3353c !important;
  }

  .header-area .nav li:last-child a:hover i {
    background-color: #f3353c !important;
    color: #fff !important;
  }
  .header-area {
    padding: 0px 15px;
    height: 80px;
    box-shadow: none;
    text-align: center;
  }
  .header-area .container {
    padding: 0px;
  }
  .header-area .logo {
    margin-left: 0px;
  }
  .header-area .menu-trigger {
    display: block !important;
  }
  .header-area .main-nav {
  overflow: visible;
}
  .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;
  }
  .header-area.header-sticky .nav {
    margin-top: 80px !important;
  }
  .background-header.header-sticky .nav {
    margin-top: 80px !important;
  }
  .header-area .main-nav .nav li {
    width: 100%;
    background: #fff;
    padding-left: 0px !important;
    padding-right: 0px !important;
  }
  
}

/* =========================================================
   OPENED TABLET MENU - SHOW ALL OPTIONS
   ========================================================= */

.header-area .main-nav .nav.active {
  display: block !important;
  height: auto !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.header-area .main-nav .nav.active li {
  display: block !important;
  width: 100% !important;
  height: 50px !important;
  line-height: 50px !important;
  padding: 0 !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.header-area .main-nav .nav.active li a {
  display: block !important;
  width: 100% !important;
  height: 50px !important;
  line-height: 50px !important;
  padding: 0 20px !important;
  visibility: visible !important;
  opacity: 1 !important;
  color: #1e1e1e !important;
  background: #ffffff !important;
}

/* Free Quote */
.header-area .main-nav .nav.active li:last-child {
  display: block !important;
}

.header-area .main-nav .nav.active li:last-child a {
  background: #443f95 !important;
  color: #ffffff !important;
}

/*  
--------------------------------------------- 
Banner Style 
---------------------------------------------  
*/ 
 
.main-banner .item { 
  background-position: center center; 
  background-repeat: no-repeat; 
  background-size: cover; 
  padding: 220px 20% 320px 20%; 
  margin-top: 0px; 
} 

/* Shorter carousel for branch pages only */
.main-banner .branch-short-carousel .item {
  padding: 110px 20% 160px 20%;
}
 
.main-banner .item-1 { 
  background-image: url(../images/banner-01.jpg); 
} 
 
.main-banner .item-2 { 
  background-image: url(../images/banner-02.jpg); 
} 
 
.main-banner .item-3 { 
  background-image: url(../images/banner-03.jpg); 
} 

.main-banner .item-4 { 
  background-image: url(../images/banner-04.jpg); 
} 

.main-banner .item-5 { 
  background-image: url(../images/banner-05.jpg); 
} 

.main-banner .item-6 { 
  background-image: url(../images/banner-06.jpg); 
}

.main-banner .item-7 { 
  background-image: url(../images/banner-07.jpg); 
}

.main-banner .item-8 { 
  background-image: url(../images/banner-08.jpg); 
}

.main-banner .item-9 { 
  background-image: url(../images/banner-09.jpg); 
}

.main-banner .item-10 { 
  background-image: url(../images/banner-10.jpg); 
}

.main-banner .item-11 { 
  background-image: url(../images/banner-11.jpg); 
}

.main-banner .item-12 { 
  background-image: url(../images/banner-12.jpg); 
}

.main-banner .item-13 { 
  background-image: url(../images/banner-13.jpg); 
}

.main-banner .item-14 { 
  background-image: url(../images/banner-14.jpg); 
}

.main-banner .item-15 { 
  background-image: url(../images/banner-15.jpg); 
}

.main-banner .item-16 { 
  background-image: url(../images/banner-16.jpg); 
}

.main-banner .item-17 { 
  background-image: url(../images/banner-17.jpg); 
}

.main-banner .item-18 { 
  background-image: url(../images/banner-18.jpg); 
}

.main-banner .item-19 { 
  background-image: url(../images/banner-19.jpg); 
}

.main-banner .item-20 { 
  background-image: url(../images/banner-20.jpg); 
}

.main-banner .item-21 { 
  background-image: url(../images/banner-21.jpg); 
}

.main-banner .item-22 { 
  background-image: url(../images/banner-22.jpg); 
}

.main-banner .item-23 { 
  background-image: url(../images/banner-23.jpg); 
}

.main-banner .item-24 { 
  background-image: url(../images/banner-04a.jpg); 
}

.main-banner .item-25 { 
  background-image: url(../images/banner-05a.jpg); 
}

.main-banner .item-26 { 
  background-image: url(../images/banner-24.jpg); 
}

.main-banner .item-27 { 
  background-image: url(../images/banner-25.jpg); 
}

.main-banner .item-28 { 
  background-image: url(../images/banner-26.jpg); 
}

.main-banner .item-29{ 
  background-image: url(../images/banner-27.jpg); 
}


.main-banner .item span.category {
  background-color: #fdbc54;
  color: #1e1e1e;
  font-size: 16px;
  font-weight: 500;
  text-transform: capitalize;
  padding: 6px 15px;
  display: inline-block;
  margin-bottom: 30px;
}

.main-banner .item span.category em {
  font-style: normal;
  color: #16345c;
}

.main-banner .item h2 {
  font-size: 62px;
  font-weight: 700;
  text-transform: uppercase;
  color: #fff;
  line-height: 72px;
  width: 50%;
  margin-bottom: 0px;
}

.main-banner .owl-dots {
  position: absolute;
  bottom: 60px;
  left: 20%;
}

.main-banner .owl-dots .owl-dot {
  width: 10px;
  height: 10px;
  background-color: #fff;
  border-radius: 50%;
  margin-right: 10px;
  transition: all .5s;
}

.main-banner .owl-dots .active {
  background-color: #16345c;
}

.main-banner .owl-nav {
  position: absolute;
  top: 50%;
  width: 100%;
  transform: translateY(-50px);
}

.main-banner .owl-nav .owl-prev i,
.main-banner .owl-nav .owl-next i {
  width: 50px;
  height: 50px;
  line-height: 50px;
  font-size: 24px;
  display: inline-block;
  color: #fff;
  background-color: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  opacity: 1;
  transition: all .3s;
}

.main-banner .owl-nav .owl-prev i {
  position: absolute;
  left: 45px;
}

.main-banner .owl-nav .owl-next i {
  position: absolute;
  right: 45px;
}

.main-banner .owl-nav .owl-prev i:hover,
.main-banner .owl-nav .owl-next i:hover {
  opacity: 1;
  background-color: rgba(255, 255, 255, 0.5);
}



/* 
---------------------------------------------
Featured Style
--------------------------------------------- 
*/

.featured .left-image {
  position: relative;
}

.featured .left-image img {
  padding-left: 55px;
}

.featured .left-image a {
  display: inline-block;
  width: 110px;
  height: 110px;
  line-height: 110px;
  background-color: #16345c;
  border-radius: 50%;
  text-align: center;
  position: absolute;
  left: 0;
  bottom: -55px;
}

.featured .section-heading {
  margin-left: 10px;
  margin-right: 10px;
  margin-bottom: 60px;
}

.featured .section-heading h2 {
  width: 70%;
}

.featured .accordion {
  margin-left: 10px;
  margin-right: 10px;
  --bs-accordion-border-radius: 10px;
  --bs-accordion-inner-border-radius: 10px;
  --bs-accordion-bg: #fafafa;
  --bs-accordion-border-color: none;
  border: none !important;
}

.featured .accordion-header {
  border-bottom: 1px solid #eaeaea;
}

.featured .accordion-button {
  box-shadow: none;
  font-size: 17px;
  font-weight: 500;
  color: #1e1e1e;
}

.featured .accordion-button:not(.collapsed) {
  color: #16345c;
  background-color: #fafafa;
  outline: none;
}

.featured .accordion-button::after {
  display: none;
}

.featured #headingThree {
  border-bottom: none;
}

.featured .accordion-item:last-of-type .accordion-collapse {
  border-top: 1px solid #eaeaea;
}

.featured .info-table {
  border-radius: 10px;
  box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.15);
  padding: 35px 30px;
}

.featured .info-table ul li {
  display: block;
  margin-bottom: 35px;
  padding-bottom: 35px;
  border-bottom: 1px solid #eee;
}

.featured .info-table ul li:last-child {
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 0;
}

.featured .info-table ul li img {
  float: left;
  margin-right: 25px;
}

.featured .info-table ul li h4 {
  font-size: 22px;
  font-weight: 600;
}

.featured .info-table ul li h4 span {
  font-size: 15px;
  color: #aaa;
  font-weight: 400;
}

/* 
---------------------------------------------
Video Style
--------------------------------------------- 
*/

.video {
  background-image: url(../images/video-bg.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  padding: 100px 0px 250px 0px;
  position: relative;
}

.video-content {
  margin-top: -240px;
}

.video .section-heading h2 {
  color: #fff;
}

.video-content .video-frame {
  position: relative;
  box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.15);
  border-radius: 10px;
}

.video-content .video-frame img {
  border-radius: 10px;
}

.video-content .video-frame a {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-26px, -26px);
  width: 52px;
  height: 52px;
  background-color: #fff;
  border-radius: 50%;
  display: inline-block;
  text-align: center;
  line-height: 52px;
  color: #16345c;
  outline: 15px solid rgba(254, 85, 37, 0.5);
  font-size: 18px;
}

/* 
---------------------------------------------
Fun Facts Style
--------------------------------------------- 
*/

.fun-facts {
  text-align: center;
  margin-top: 125px;
}

.fun-facts .counter {
  background-color: #fdbc54;
  position: relative;
  border-radius: 10px;
  width: 270px;
  padding: 20px 0px;
  display: inline-block;
}

.fun-facts .counter h2,
.fun-facts .counter p {
  display: inline-flex;
  vertical-align: middle;
}

.fun-facts .counter p {
  text-align: left;
  font-size: 16px;
  color: #1e1e1e;
  font-weight: 600;
  line-height: 28px;
}

.fun-facts .counter h2 {
  margin-right: 25px;
  font-size: 40px;
  color: #16345c;
}

.fun-facts .counter:after {
  position: absolute;
  width: 50px;
  height: 50px;
  background-color: #16345c;
  border-radius: 50%;
  content: '';
  right: -25px;
  top: -25px;
}


/* 
---------------------------------------------
Best Deal Style
--------------------------------------------- 
*/

.best-deal {
  background-color: #fafafa;
  padding: 100px 0px;
}

.best-deal .tab-content img {
  padding: 0px 45px;
}

.best-deal .tabs-content .nav-link {
  font-size: 16px;
  font-weight: 500;
  background-color: #1e1e1e !important;
  border-radius: 5px;
  height: 50px;
  line-height: 50px;
  display: inline-block;
  padding: 0px 25px;
  color: #fff;
}

.best-deal .tabs-content .nav-tabs .nav-link.active {
  background-color: #16345c !important;
  color: #fff;
}

.best-deal .tabs-content ul.nav-tabs {
  border-bottom: none !important;
  margin-bottom: 80px;
  align-items: end;
  justify-content: end;
  margin-top: -130px;
}

.best-deal .tabs-content ul.nav-tabs li {
  padding-right: 0px;
  border-right: none;
  margin-left: 20px;
}

.best-deal .info-table {
  border-radius: 10px;
  box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.15);
  padding: 35px 30px;
}

.best-deal .info-table ul li {
  display: block;
  margin-bottom: 24px;
  padding-bottom: 24px;
  border-bottom: 1px solid #eee;
  text-align: left;
  font-size: 15px;
  color: #aaa;
  font-weight: 400;
}

.best-deal .info-table ul li:last-child {
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 0;
}

.best-deal .info-table ul li span {
  font-size: 20px;
  color: #1e1e1e;
  font-weight: 700;
  float: right;
  display: inline-block;
}

.best-deal .tabs-content {
  padding: 0px;
  background-color: transparent;
}

.best-deal .tabs-content h4 {
  font-size: 17px;
  font-weight: 600;
  margin-bottom: 30px;
}

.best-deal .icon-button {
  margin-top: 30px;
}


/* 
---------------------------------------------
Properties Style
--------------------------------------------- 
*/

.properties .item {
  background-color: #fafafa;
  border-radius: 10px;
  padding: 30px;
  margin-bottom: 30px;
}

.properties .item img {
  border-radius: 10px;
}

.properties .item span.category {
  background-color: #fbd9cf;
  font-weight: 500;
  border-radius: 5px;
  font-size: 14px;
  color: #1e1e1e;
  padding: 5px 12px;
  display: inline-block;
  margin-top: 25px;
}

.properties .item h4 {
  font-size: 19px;
  margin: 25px 0px;
}

.properties .item h4 a {
  color: #1e1e1e;
}

.properties .item ul li {
  display: inline-block;
  font-size: 15px;
  color: #4a4a4a;
  margin-right: 20px;
}

.properties .item ul li span {
  font-weight: 600;
  color: #1e1e1e;
}

.properties .item ul {
  border-bottom: 1px solid #eaeaea;
  margin-bottom: 30px;
  padding-bottom: 30px;
}

.properties .item h6 {
  font-size: 20px;
  color: #16345c;
  margin-top: 6px;
  display: inline-block;
  float: right;
  margin-top: 30px;
}

.properties .item .main-button {
  text-align: center;
}


/* 
---------------------------------------------
Contact Style
--------------------------------------------- 
*/

.contact {
  background-image: url(../images/contact-bg.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  padding: 100px 0px 250px 0px;
  position: relative;
}

.contact .section-heading h2 {
  color: #fff;
}

.contact-content {
  margin-top: -240px;
  position: relative;
  z-index: 1;
}

.contact-content #map {
  border-radius: 10px;
  margin-bottom: 60px;
}

.contact-content .item {
  border-radius: 10px;
  box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.15);
  padding: 35px 30px;
  background-color: #fff;
}

.contact-content .phone {
  margin-right: 15px;
}

.contact-content .email {
  margin-left: 15px;
}

.contact-content .item img {
  float: left;
  margin-right: 25px;
  vertical-align: middle;
}

.contact-content .item h6 {
  font-size: 20px;
  font-weight: 600;
  vertical-align: middle;
}

.contact-content .item h6 span {
  font-size: 15px;
  color: #aaaaaa;
  font-weight: 400;
}

.contact-content #contact-form {
  margin-left: 30px;
  border-radius: 10px;
  box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.15);
  padding: 35px 30px;
  background-color: #fff;
}

.contact-content #contact-form label {
  font-size: 15px;
  color: #3a3a3a;
  margin-bottom: 15px;
}

.contact-content #contact-form input {
  width: 100%;
  height: 44px;
  border-radius: 22px;
  background-color: #f6f6f6;
  border: none;
  margin-bottom: 30px;
  font-size: 14px;
  padding: 0px 15px;
}

.contact-content #contact-form textarea {
  width: 100%;
  height: 150px;
  max-height: 180px;
  border-radius: 22px;
  background-color: #f6f6f6;
  border: none;
  margin-bottom: 40px;
  font-size: 14px;
  padding: 15px 15px;
}

.contact-content #contact-form button {
  background-color: #1e1e1e;
  height: 44px;
  border-radius: 22px;
  padding: 0px 20px;
  color: #fff;
  border: none;
  font-size: 15px;
  font-weight: 500;
  transition: all .5s;
}

.contact-content #contact-form button:hover {
  background-color: #16345c;
}


/* 
---------------------------------------------
Footer Style
--------------------------------------------- 
*/

footer.footer-no-gap {
  margin-top: 0px;
}

footer {
  margin-top: 150px;
  background-color: #1e1e1e;
  min-height: 100px;
}

footer p {
  text-align: center;
  line-height: 100px;
  color: #fff;
  font-size: 16px;
  font-weight: 400;
}

footer p a {
  color: #fff;
  transition: all .3s;
  position: relative;
  z-index: 3;
}

footer p a:hover {
  opacity: 0.75;
}


/* 
---------------------------------------------
Page Header Style
--------------------------------------------- 
*/

.page-heading {
  background-image: url(../images/page-heading-bg.jpg);
  background-position: center bottom;
  background-repeat: no-repeat;
  background-size: cover;
  padding: 110px 0px;
  text-align: center;
}

.page-heading span {
  background-color: #fff;
  color: #1e1e1e;
  font-size: 14px;
  font-weight: 500;
  text-transform: uppercase;
  padding: 10px 25px;
  display: inline-block;
  margin-bottom: 30px;
}

.page-heading span a {
  color: #1e1e1e;
}

.page-heading h3 {
  font-size: 48px;
  font-weight: 900;
  text-transform: uppercase;
  color: #fff;
}


/* 
---------------------------------------------
Properties Style
--------------------------------------------- 
*/

.properties ul.properties-filter {
  list-style: none;
  text-align: center;
  margin-bottom: 70px;
}

.properties ul.properties-filter li {
  display: inline-block;
  margin: 5px 8px;
}

.properties ul.properties-filter li a {
  display: inline-block;
  text-align: center;
  font-size: 15px;
  text-transform: capitalize;
  font-weight: 500;
  color: #fff;
  background-color: #1e1e1e;
  padding: 12px 25px;
  border-radius: 5px;
  transition: all .3s;
}

.properties ul.properties-filter li a.is_active {
  background-color: #16345c;
  color: #fff;
}

.properties ul.properties-filter li a.is_active:hover {
  color: #fff;
}

.properties ul.properties-filter li a:hover {
  color: #16345c;
}

.properties ul.pagination {
  margin-top: 50px;
  text-align: center;
  width: 100%;
  display: inline-block;
}

.properties ul.pagination li {
  display: inline-block;
  margin: 0px 5px;
}

.properties ul.pagination li a {
  display: inline-block;
  width: 40px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  background-color: #1e1e1e;
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  border-radius: 50%;
  transition: all .3s;
}

.properties ul.pagination li a:hover,
.properties ul.pagination li a.is_active {
  background-color: #16345c;
  color: #fff;
}


/* 
---------------------------------------------
Single Page Style
--------------------------------------------- 
*/

.single-property .main-image img {
  float: none;
}

.single-property .main-content h4 {
  font-size: 25px;
  margin-top: 25px;
  margin-bottom: 40px;
  padding-bottom: 40px;
  border-bottom: 1px solid #eee;
}

.single-property .main-content span.category {
  background-color: #fbd9cf;
  font-weight: 500;
  border-radius: 5px;
  font-size: 14px;
  color: #1e1e1e;
  padding: 5px 12px;
  display: inline-block;
  margin-top: 40px;
}

.single-property .accordion {
  margin-top: 60px;
  margin-left: 0px;
  margin-right: 0px;
  --bs-accordion-border-radius: 10px;
  --bs-accordion-inner-border-radius: 10px;
  --bs-accordion-bg: #fafafa;
  --bs-accordion-border-color: none;
  border: none !important;
}

.single-property .accordion-header {
  border-bottom: 1px solid #eaeaea;
}

.single-property .accordion-button {
  box-shadow: none;
  font-size: 17px;
  font-weight: 500;
  color: #1e1e1e;
}

.single-property .accordion-button:not(.collapsed) {
  color: #16345c;
  background-color: #fafafa;
  outline: none;
}

.single-property .accordion-button::after {
  display: none;
}

.single-property #headingThree {
  border-bottom: none;
}

.single-property .accordion-item:last-of-type .accordion-collapse {
  border-top: 1px solid #eaeaea;
}

.single-property .info-table {
  border-radius: 10px;
  box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.15);
  padding: 35px 30px;
  margin-left: 60px;
}

.single-property .info-table ul li {
  display: block;
  margin-bottom: 35px;
  padding-bottom: 35px;
  border-bottom: 1px solid #eee;
}

.single-property .info-table ul li:last-child {
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 0;
}

.single-property .info-table ul li img {
  float: left;
  margin-right: 25px;
}

.single-property .info-table ul li h4 {
  font-size: 22px;
  font-weight: 600;
}

.single-property .info-table ul li h4 span {
  font-size: 15px;
  color: #aaa;
  font-weight: 400;
}


/* 
---------------------------------------------
Contact Page Style
--------------------------------------------- 
*/

.contact-page #map {
  margin-top: 100px;
}

.contact-page .section-heading {
  margin-bottom: 40px;
  margin-right: 280px;
}

.contact-page p {
  margin-bottom: 50px;
}

.contact-page .item {
  border-radius: 10px;
  box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.15);
  padding: 35px 30px;
  background-color: #fff;
  display: inline-block;
  min-width: 360px;
}

.contact-page .phone {
  margin-bottom: 30px;
}

.contact-page .item img {
  float: left;
  margin-right: 25px;
  vertical-align: middle;
}

.contact-page .item h6 {
  font-size: 20px;
  font-weight: 600;
  vertical-align: middle;
}

.contact-page .item h6 span {
  font-size: 15px;
  color: #aaaaaa;
  font-weight: 400;
}

.contact-page #contact-form {
  margin-left: 30px;
  border-radius: 10px;
  box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.15);
  padding: 35px 30px;
  background-color: #fff;
}

.contact-page #contact-form label {
  font-size: 15px;
  color: #3a3a3a;
  margin-bottom: 15px;
}

.contact-page #contact-form input {
  width: 100%;
  height: 44px;
  border-radius: 22px;
  background-color: #f6f6f6;
  border: none;
  margin-bottom: 30px;
  font-size: 14px;
  padding: 0px 15px;
}

.contact-page #contact-form textarea {
  width: 100%;
  height: 150px;
  max-height: 180px;
  border-radius: 22px;
  background-color: #f6f6f6;
  border: none;
  margin-bottom: 40px;
  font-size: 14px;
  padding: 15px 15px;
}

.contact-page #contact-form button {
  background-color: #1e1e1e;
  height: 44px;
  border-radius: 22px;
  padding: 0px 20px;
  color: #fff;
  border: none;
  font-size: 15px;
  font-weight: 500;
  transition: all .5s;
}

.contact-page #contact-form button:hover {
  background-color: #16345c;
}


/* 
---------------------------------------------
Responsive Style
--------------------------------------------- 
*/

body {
  overflow-x: hidden;
}

@media (max-width: 767px) {
  .header-area .main-nav .logo h1 {
    line-height: 80px !important;
  }

  .best-deal .tabs-content .nav-link {
    font-size: 14px;
    padding: 0px 15px;
    height: 44px;
    line-height: 44px;
  }

  .best-deal .tabs-content ul.nav-tabs li {
    margin: 0px 5px;
  }

  .properties ul.properties-filter li a {
    font-size: 14px;
    padding: 10px 15px;
  }

  .properties ul.properties-filter li {
    margin: 5px;
  }

  .header-area .main-nav .nav li:last-child {
    display: block;
  }
}

@media (max-width: 992px) {
  .sub-header {
    display: none;
  }
  .header-area .main-nav .logo h1 {
    line-height: 100px;
  }
  .background-header .main-nav .logo h1 {
    line-height: 80px;
  }
.header-area .main-nav .nav li a {
  padding-left: 2px;
  padding-right: 2px;
  font-size: 13px;
  white-space: nowrap;
}

.header-area .main-nav .nav li:last-child {
  flex-shrink: 1 !important;
  white-space: nowrap !important;
}

.header-area .main-nav .nav li:last-child a {
  padding-left: 2px !important;
  padding-right: 5px !important;
  white-space: nowrap !important;
  font-size: 12px !important;
}

.main-banner .item h2 {
  width: 100%;
}
  .featured .section-heading {
    margin-left: 0px;
    margin-right: 0px;
    margin-top: 100px;
  }
  .featured .accordion {
    margin-left: 0px;
    margin-right: 0px;
  }
  .featured .info-table {
    margin-top: 45px;
  }
  .fun-facts .counter {
    margin-bottom: 45px;
  }
  .best-deal .section-heading {
    text-align: center;
  }
  .best-deal .tabs-content ul.nav-tabs {
    margin-top: 0px;
    justify-content: center;
  }
  .best-deal .info-table {
    margin-bottom: 45px;
  }
  .best-deal .tab-content img {
    padding: 0px;
  }
  .best-deal .tabs-content h4 {
    margin-top: 45px;
  }
  .properties .item h6 {
    text-align: center;
    margin-bottom: 15px;
  }
  .properties .item .main-button {
    text-align: center;
  }
  .properties .item ul li {
    margin-right: 10px;
    font-size: 13px;
  }
  .contact-content .phone {
    margin-right: 0px;
    margin-bottom: 20px;
  }
  .contact-content .email {
    margin-left: 0px;
    margin-bottom: 45px;
  }
  .contact-content #contact-form {
    margin-left: 0px;
  }
  .single-property .info-table {
    margin-left: 0px;
    margin-top: 45px;
  }
  .contact-page .section-heading {
    margin-right: 0px !important;
  }
  .contact-page #contact-form {
    margin-left: 0px;
    margin-top: 60px;
  }
  .best-deal .info-table ul li span {
    float: right !important;
    width: auto !important;
  }
}

@media (max-width: 1200px) {
  .best-deal .info-table ul li span {
    float: none;
    width: 100%;
  }
  .contact-page .section-heading {
    margin-right: 100px;
  }
}

/* Keep flooring bar directly against banner */

.main-banner {
  margin-top: 0 !important;
  padding-top: 0 !important;
}



/* =========================================
   STORE TELEPHONE NUMBERS — LAYOUT
   ========================================= */

.store-numbers {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 20px 0 0 0 !important;
  transform: translateX(70px);
  list-style: none !important;
  box-sizing: border-box !important;
}

.store-numbers li {
  display: flex !important;
  flex: 0 0 auto !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  padding: 0 30px 8px 30px !important;
  border-right: 1px solid #000000 !important;
  line-height: 1.4 !important;
  white-space: nowrap !important;
  box-sizing: border-box !important;
}

/* Remove divider after the final branch */
.store-numbers li:last-child {
  border-right: none !important;
}

/* Make the whole branch link clickable */
.store-numbers li a {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  padding: 0 !important;
  text-decoration: none !important;
}

/* Red branch label containing logo and name */
.store-numbers li a .branch-label {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 6px !important;
  width: auto !important;
  min-height: 36px !important;
  margin: 0 !important;
  padding: 5px 10px !important;
  background-color: #f3353c !important;
  border: none !important;
  border-radius: 3px !important;
  box-sizing: border-box !important;
  white-space: nowrap !important;
}

/* Small white logo inside the red label */
.store-numbers li a .branch-label img.branch-logo {
  display: block !important;
  width: 18px !important;
  min-width: 18px !important;
  max-width: 18px !important;
  height: 22px !important;
  min-height: 22px !important;
  max-height: 22px !important;
  object-fit: contain !important;
  flex: 0 0 18px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* White branch name */
.store-numbers li a .branch-label strong {
  display: inline-block !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  color: #ffffff !important;
  font-family: 'Poppins', sans-serif !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  white-space: nowrap !important;
}

/* Blue telephone number below the label */
.store-numbers li a .branch-phone {
  display: block !important;
  margin: 6px 0 0 !important;
  padding: 0 !important;
  background: transparent !important;
  color: #443f95 !important;
  font-family: 'Poppins', sans-serif !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  white-space: nowrap !important;
}

/* Preserve colours on hover */
.store-numbers li a:hover .branch-label {
  background-color: #f3353c !important;
}

.store-numbers li a:hover .branch-label strong {
  color: #ffffff !important;
}

.store-numbers li a:hover .branch-phone {
  color: #443f95 !important;
}

/* =========================================
   SOCIAL MEDIA ICONS - VERTICAL CENTRE
   ========================================= */

.sub-header .social-links {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}
/* =========================================================
   SERVICE CARD HOVER EFFECT
   ========================================================= */

.service-card {
  position: relative;
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
  transition: all 0.3s ease;
  box-shadow: 0px 0px 0px rgba(0, 0, 0, 0);
}

/* Card lifts and gains shadow */
.service-card:hover {
  transform: translateY(-8px);
  box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.15);
}

/* Image container */
.service-card .image-wrapper {
  position: relative;
  overflow: hidden;
}

/* Image */
.service-card .image-wrapper img {
  width: 100%;
  display: block;
  transition: transform 0.5s ease;
}

/* Image zoom */
.service-card:hover .image-wrapper img {
  transform: scale(1.08);
}

/* Image overlay */
.service-card .image-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(243, 53, 60, 0.12);
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}

/* Overlay appears on hover */
.service-card:hover .image-overlay {
  opacity: 1;
}

/* Card content */
.service-card .card-content {
  background: #fff;
  transition: all 0.3s ease;
}

/* Category text */
.service-card .card-content .category {
  transition: color 0.3s ease;
}

/* Category changes to corporate red */
.service-card:hover .card-content .category {
  color: #f3353c;
}


  /* =========================================================
   SERVICE CARD - REQUEST A QUOTE BUTTON
   ========================================================= */

.service-card .main-button {
  display: table !important;
  width: auto !important;
  margin: 20px auto 0 auto !important;
  padding: 0 !important;

  background: #ffffff !important;
  border: none !important;
  outline: none !important;
  border-radius: 5px !important;

  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12) !important;

  transition: all 0.3s ease !important;
}

/* Button text */
.service-card .main-button span {
  display: block !important;

  margin: 0 !important;
  padding: 10px 20px !important;

  background: #ffffff !important;
  border: none !important;
  outline: none !important;
  border-radius: 5px !important;

  color: #443f95 !important;

  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;

  transition: all 0.3s ease !important;
}

/* =========================================================
   HOVER
   ========================================================= */

.service-card:hover .main-button {
  background: #443f95 !important;
  border: none !important;
  outline: none !important;

  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25) !important;

  transform: translateY(-2px);
}

.service-card:hover .main-button span {
  background: #443f95 !important;
  color: #ffffff !important;
}

/* =========================================================
   BACK TO TOP BUTTON
   ========================================================= */

.back-to-top {
  position: fixed;
  right: 30px;
  bottom: 30px;

  width: 55px;
  height: 55px;

  background: #443f95;
  color: #ffffff;

  border-radius: 50%;

  display: flex;
  align-items: center;
  justify-content: center;

  text-decoration: none;

  font-size: 18px;

  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.18);

  z-index: 9999;

  transition: all 0.3s ease;
}

.back-to-top:hover {
  background: #f3353c;
  color: #ffffff;

  transform: translateY(-3px);

  box-shadow: 0 7px 18px rgba(0, 0, 0, 0.25);
}

.back-to-top i {
  color: #ffffff;
  line-height: 1;
}

/* =========================================================
   BACK TO TOP - KEEP ARROW CENTRED
   ========================================================= */

.back-to-top i {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;

  width: auto !important;
  height: auto !important;

  margin: 0 !important;
  padding: 0 !important;

  transform: translate(-50%, -50%) !important;

  font-size: 18px !important;
  line-height: 1 !important;

  color: #ffffff !important;
}

/* Prevent movement when button is active/focused */
.back-to-top:focus i,
.back-to-top:active i,
.back-to-top:hover i {
  transform: translate(-50%, -50%) !important;
  font-size: 18px !important;
}

/* =========================================================
   CONTACT INFORMATION BOXES - RESPONSIVE FIX
   ========================================================= */

.contact-content .phone,
.contact-content .email {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow: hidden;

  display: flex;
  align-items: center;

  margin-left: 0 !important;
  margin-right: 0 !important;

  padding: 20px;
}

/* Keep the icon contained */
.contact-content .phone img,
.contact-content .email img {
  flex: 0 0 auto;
  width: 52px !important;
  max-width: 52px !important;
  height: auto;
  margin-right: 15px;
}

/* Keep telephone/email text inside the box */
.contact-content .phone h6,
.contact-content .email h6 {
  min-width: 0;
  max-width: calc(100% - 67px);

  margin: 0 !important;

  overflow-wrap: anywhere;
  word-break: break-word;

  line-height: 1.5;
}

/* Make the smaller description behave properly */
.contact-content .phone h6 span,
.contact-content .email h6 span {
  display: inline-block;
  max-width: 100%;

  overflow-wrap: anywhere;
  word-break: break-word;
}

/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 991px) {

  .contact-content .phone,
  .contact-content .email {
    width: 100%;
    max-width: 100%;
  }

  .contact-content .phone h6,
  .contact-content .email h6 {
    font-size: 14px;
  }

}

/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 575px) {

  .contact-content .phone,
  .contact-content .email {
    width: 100%;
    max-width: 100%;

    padding: 18px 15px;
  }

  .contact-content .phone img,
  .contact-content .email img {
    width: 45px !important;
    max-width: 45px !important;

    margin-right: 12px;
  }

  .contact-content .phone h6,
  .contact-content .email h6 {
    max-width: calc(100% - 57px);

    font-size: 13px;
    line-height: 1.4;
  }

}

/* =========================================================
   CAROUSEL TEXT - RESPONSIVE
   ========================================================= */

/* Desktop */
.main-banner .header-text {
  left: 8%;
  right: auto;
  width: 45%;
  text-align: left;
}

.main-banner .header-text h2 {
  font-size: 42px;
  line-height: 1.15;
  margin: 15px 0 0 0;
  text-align: left;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 991px) {

  .main-banner .header-text {
    left: 7%;
    width: 55%;
    text-align: left;
  }

  .main-banner .header-text h2 {
    font-size: 34px;
    line-height: 1.15;
  }

  .main-banner .header-text .category {
    font-size: 15px;
  }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {

  .main-banner .header-text {
    left: 6%;
    width: 70%;
    text-align: left;
  }

  .main-banner .header-text h2 {
    font-size: 27px;
    line-height: 1.15;
    margin-top: 10px;
  }

  .main-banner .header-text .category {
    font-size: 13px;
  }

}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 480px) {

  .main-banner .header-text {
    left: 5%;
    width: 80%;
    text-align: left;
  }

  .main-banner .header-text h2 {
    font-size: 22px;
    line-height: 1.15;
    margin-top: 8px;
  }

  .main-banner .header-text .category {
    font-size: 12px;
  }

}

/* =========================================================
   SERVICES SECTION
   ========================================================= */

#services {
  background: rgba(0, 0, 0, 0);
  padding-top: 0px;
  padding-bottom: 70px;
}

/* Give the section heading some breathing room */
#services .section-heading {
  margin-top: 20px;
  margin-bottom: 50px;
}

/* =========================================================
   CONTACT PAGE ONLY
   Join flooring navigation directly to page heading
   ========================================================= */

.contact-page-heading {
  margin-top: 0 !important;
}
/* =========================================================
   CONTACT PAGE ONLY
   Remove gap between page banner and contact section
   ========================================================= */

.contact-page-heading + .contact.section {
  margin-top: 0 !important;
}

/* =========================================================
   BRANCH SHOWROOM IMAGE CAROUSEL
   ========================================================= */

.branch-gallery-carousel {
  position: relative;
  max-width: 1050px;
  margin: 40px auto 0;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0px 0px 20px rgba(0,0,0,0.12);
  background: #f5f5f5;
}

.branch-gallery-carousel .carousel-item {
  height: 520px;
  background: #f5f5f5;
}

.branch-gallery-carousel .carousel-item img {
  width: 100%;
  height: 520px;
  object-fit: cover;
  display: block;
}

.gallery-expand {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  cursor: zoom-in;
}

.gallery-expand-icon {
  position: absolute;
  right: 20px;
  bottom: 20px;
  width: 45px;
  height: 45px;
  border-radius: 50%;
  background: rgba(0,0,0,0.65);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  transition: all 0.25s ease;
}

.gallery-expand:hover .gallery-expand-icon {
  background: #f3353c;
  transform: scale(1.08);
}

.branch-gallery-carousel .carousel-control-prev,
.branch-gallery-carousel .carousel-control-next {
  width: 65px;
  opacity: 1;
}

.branch-gallery-carousel .carousel-control-prev-icon,
.branch-gallery-carousel .carousel-control-next-icon {
  width: 42px;
  height: 42px;
  background-color: rgba(0,0,0,0.65);
  background-size: 45%;
  border-radius: 50%;
  padding: 10px;
}

.branch-gallery-carousel .carousel-indicators {
  margin-bottom: 15px;
}

.branch-gallery-carousel .carousel-indicators button {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  margin: 0 4px;
}


/* =========================================================
   FULL SCREEN IMAGE VIEWER
   ========================================================= */

.branch-image-modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.92);
  z-index: 99999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 40px;
}

.branch-image-modal.active {
  display: flex;
}

.branch-image-modal img {
  max-width: 95%;
  max-height: 90vh;
  object-fit: contain;
  border-radius: 4px;
  box-shadow: 0 10px 50px rgba(0,0,0,0.5);
}

.branch-modal-close {
  position: absolute;
  top: 20px;
  right: 30px;
  width: 48px;
  height: 48px;
  border: 0;
  border-radius: 50%;
  background: rgba(255,255,255,0.15);
  color: #fff;
  font-size: 32px;
  line-height: 42px;
  cursor: pointer;
  z-index: 100000;
}

.branch-modal-close:hover {
  background: #f3353c;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {

  .branch-gallery-carousel {
    margin-top: 25px;
    border-radius: 8px;
  }

  .branch-gallery-carousel .carousel-item {
    height: 320px;
  }

  .branch-gallery-carousel .carousel-item img {
    height: 320px;
  }

  .branch-gallery-carousel .carousel-control-prev,
  .branch-gallery-carousel .carousel-control-next {
    width: 50px;
  }

  .gallery-expand-icon {
    width: 40px;
    height: 40px;
    right: 12px;
    bottom: 12px;
  }

  .branch-image-modal {
    padding: 15px;
  }

  .branch-image-modal img {
    max-width: 100%;
    max-height: 85vh;
  }

  .branch-modal-close {
    top: 10px;
    right: 10px;
    width: 42px;
    height: 42px;
    font-size: 28px;
  }

}

@media (max-width: 767px) {

  /* Keep flooring navigation tight against the page banner */
  .flooring-nav {
    margin: 0 !important;
    padding: 0 !important;
    height: 60px !important;
  }

  .page-heading {
    margin-top: 0 !important;
  }
}
/* =========================================================
   BRANCH GALLERY
   ========================================================= */

.branch-gallery {
  width: 100%;
}

.branch-gallery .item {
  width: 100%;
}

.branch-gallery .item img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 10px;
}

/* Keep carousel controls subtle */
.branch-gallery .owl-nav button {
  background: #443f95 !important;
  color: #fff !important;
}

.branch-gallery .owl-dots .owl-dot span {
  background: #ddd;
}

.branch-gallery .owl-dots .owl-dot.active span {
  background: #f3353c;
}

/* Remove gap between flooring navigation and Contact section */
.flooring-nav {
  margin-bottom: 0 !important;
}

.flooring-nav + .contact.section {
  margin-top: 0 !important;
}

/* Remove gap between flooring navigation and Contact section */
.flooring-nav {
  margin-bottom: 0 !important;
}

.flooring-nav + .contact.section {
  margin-top: 0 !important;
}

/* Remove gap between flooring navigation and Contact section */
.flooring-nav {
  margin-bottom: 0 !important;
}

.flooring-nav + .contact.section {
  margin-top: 0 !important;
}

/* =========================================================
   PROPERTIES PAGE - WHITE BACKGROUND / GREY SHOWROOM CARDS
   ========================================================= */

/* Keep the page heading/banner white */
.page-heading.header-text {
  background-color: #ffffff !important;
}

/* Keep the whole properties section white */
.properties.section {
  background-color: #ffffff !important;
}

/* The actual showroom boxes */
.properties .item.service-card {
  background-color: #f2f2f2 !important;
  border-radius: 10px !important;
  border: 1px solid #e1e1e1 !important;
  overflow: hidden !important;
}

/* The actual information area inside each box */
.properties .item.service-card .card-content {
  background-color: #f2f2f2 !important;
}

/* Make the grey continue underneath the whole card */
.properties .item.service-card a {
  background-color: #f2f2f2 !important;
}

/* Slightly darker grey when hovered */
.properties .item.service-card:hover,
.properties .item.service-card:hover .card-content,
.properties .item.service-card:hover a {
  background-color: #e9e9e9 !important;
}

/* Subtle shadow so the cards separate from the white page */
.properties .item.service-card {
  box-shadow: 0 4px 15px rgba(0,0,0,0.06) !important;
}

/* =========================================================
   PAGE HEADING - CORPORATE BLUE BREADCRUMB
   ========================================================= */

.page-heading .breadcrumb {
  color: #443f95 !important;
}

.page-heading .breadcrumb a {
  color: #443f95 !important;
  font-weight: 700 !important;
}

/* =========================================================
   BRANCH & RUGS CAROUSEL - CORPORATE RED CATEGORY BOX
   ========================================================= */

.branch-short-carousel .header-text .category {
  background-color: #f3353c !important;
  color: #ffffff !important;
}

.branch-short-carousel .header-text .category em {
  color: #ffffff !important;
}

/* =========================================================
   RUGSDIRECT2U WEBSITE PROMOTIONAL BANNER
   ========================================================= */

.rugs-website-banner {
  width: 100% !important;
  margin-top: 35px !important;
  margin-bottom: 10px !important;
  background: #443f95 !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  position: relative !important;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12) !important;
}

/* Red accent */

.rugs-website-banner::before {
  content: "" !important;
  display: block !important;
  height: 5px !important;
  background: #f3353c !important;
}


/* Main banner */

.rugs-website-banner .rugs-banner-content {
  display: flex !important;
  align-items: center !important;
  padding: 22px 25px !important;
  gap: 20px !important;
  background: #443f95 !important;
}


/* Icon */

.rugs-website-banner .rugs-banner-icon {
  flex: 0 0 58px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.rugs-website-banner .rugs-banner-icon img {
  width: 52px !important;
  height: 52px !important;
  object-fit: contain !important;
}


/* Text area */

.rugs-website-banner .rugs-banner-text {
  flex: 1 !important;
  background: transparent !important;
}

.rugs-website-banner .rugs-banner-text span {
  display: block !important;
  color: #ffffff !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 1.5px !important;
  margin-bottom: 3px !important;
}

.rugs-website-banner .rugs-banner-text h3 {
  margin: 0 0 5px 0 !important;
  padding: 0 !important;
  color: #ffffff !important;
  font-size: 21px !important;
  font-weight: 500 !important;
  line-height: 1.25 !important;
  background: transparent !important;
}

.rugs-website-banner .rugs-banner-text h3 strong {
  color: #ffffff !important;
  font-weight: 800 !important;
}

.rugs-website-banner .rugs-banner-text p {
  margin: 0 !important;
  padding: 0 !important;
  color: #ffffff !important;
  font-size: 12px !important;
  line-height: 1.5 !important;
  background: transparent !important;
}


/* Button */

.rugs-website-banner .rugs-banner-button {
  flex-shrink: 0 !important;
}

.rugs-website-banner .rugs-banner-button a {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  background: #f3353c !important;
  color: #ffffff !important;
  padding: 13px 18px !important;
  border-radius: 5px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px !important;
  text-decoration: none !important;
  transition: all 0.3s ease !important;
}

.rugs-website-banner .rugs-banner-button a i {
  color: #ffffff !important;
  font-size: 11px !important;
  transition: transform 0.3s ease !important;
}

.rugs-website-banner .rugs-banner-button a:hover {
  background: #ffffff !important;
  color: #443f95 !important;
}

.rugs-website-banner .rugs-banner-button a:hover i {
  color: #443f95 !important;
  transform: translateX(4px) !important;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {

  .rugs-website-banner > div:nth-child(2) {
    flex-direction: column !important;
    text-align: center !important;
    padding: 22px 20px !important;
    gap: 12px !important;
  }

  .rugs-website-banner > div:nth-child(2) > div {
    flex: none !important;
  }

  .rugs-website-banner h3 {
    font-size: 19px !important;
  }

  .rugs-website-banner p {
    font-size: 12px !important;
    line-height: 1.6 !important;
  }

}

/* =========================================================
   MOBILE PAGE HEADER - KEEP BACKGROUND IMAGE VISIBLE
   ========================================================= */

@media (max-width: 767px) {

  .page-heading {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;

    background-image: url(../images/page-heading-bg.jpg) !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;

    min-height: 220px !important;
    padding: 80px 15px !important;

    text-align: center !important;
  }

  .page-heading h3 {
    display: block !important;
    visibility: visible !important;
    color: #ffffff !important;
  }

  .page-heading span {
    display: inline-block !important;
    visibility: visible !important;
  }
}

/* =========================================================
   VERY SMALL MOBILE
   ========================================================= */

@media (max-width: 480px) {

  .page-heading {
    min-height: 200px !important;
    padding: 70px 15px !important;

    background-image: url(../images/page-heading-bg.jpg) !important;
    background-position: center center !important;
    background-size: cover !important;
  }

  .page-heading h3 {
    font-size: 32px !important;
  }

}

/* =========================================================
   KEEP MAIN HEADER ABOVE FLOORING NAV
   ========================================================= */

@media (max-width: 991px) {

  .header-area {
    position: relative !important;
    z-index: 1000 !important;
  }

  .header-area .main-nav {
    position: relative !important;
  }

}

/* =========================================================
   CARPETSDIRECT2U - MOBILE LOGO / HAMBURGER SPACING
   ========================================================= */

@media (max-width: 767px) {

  .header-area .main-nav {
    position: relative !important;
  }

  /* Keep logo on the left - smaller on small mobile */
.header-area .main-nav .logo {
  position: absolute !important;
  left: 15px !important;
  top: -7px !important;
  z-index: 1000 !important;
  transform: scale(0.82) !important;
  transform-origin: left center !important;
}

  /* Three-line menu - comfortably to the right of logo */
.header-area .main-nav .menu-trigger {
  position: absolute !important;
  right: 15px !important;
  top: 20px !important;
  width: 32px !important;
  height: 40px !important;
  z-index: 1001 !important;
}

}

/* =========================================================
   FREE QUOTE - TABLET WIDTH FIX
   ========================================================= */

@media (max-width: 1199px) and (min-width: 768px) {

  .header-area .main-nav .nav li:last-child {
    flex-shrink: 0 !important;
    white-space: nowrap !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .header-area .main-nav .nav li:last-child a {
    display: flex !important;
    align-items: center !important;
    white-space: nowrap !important;

    padding-left: 0 !important;
    padding-right: 5px !important;

    font-size: 12px !important;
  }

  .header-area .main-nav .nav li:last-child a i {
    width: 32px !important;
    height: 32px !important;
    line-height: 32px !important;
    margin-right: 5px !important;
    margin-left: 0 !important;
    flex-shrink: 0 !important;
  }

}

/* =========================================================
   FREE QUOTE - PREVENT DROPPING
   ========================================================= */

@media (max-width: 1199px) and (min-width: 768px) {

  .header-area .main-nav .nav {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
  }

  .header-area .main-nav .nav li:last-child {
    position: relative !important;
    float: none !important;
    flex: 0 0 auto !important;
    white-space: nowrap !important;
  }

}

/* =========================================================
   TABLET HEADER - STOP MENU TEXT WRAPPING
   ========================================================= */

@media (max-width: 1199px) and (min-width: 768px) {

  .header-area .main-nav .nav li a {
    white-space: nowrap !important;
    overflow: visible !important;
  }

  .header-area .main-nav .nav li {
    white-space: nowrap !important;
    flex-shrink: 1 !important;
  }

  /* Give the final buttons enough room */
  .header-area .main-nav .nav li:last-child,
  .header-area .main-nav .nav li:nth-last-child(2) {
    flex-shrink: 0 !important;
  }

}

/* =========================================================
   FREE QUOTE - KEEP FULLY ON SCREEN
   ========================================================= */

@media (max-width: 1199px) and (min-width: 768px) {

  .header-area .main-nav .nav li:last-child {
    margin-right: 10px !important;
    flex-shrink: 1 !important;
  }

  .header-area .main-nav .nav li:last-child a {
    max-width: 100% !important;
    box-sizing: border-box !important;
    white-space: nowrap !important;
  }

}

/* =========================================================
   768px - 900px
   COMPACT TABLET HEADER - FINAL WIDTH ADJUSTMENT
   ========================================================= */

@media (max-width: 900px) and (min-width: 768px) {

  .header-area {
    height: 120px !important;
    padding: 0 15px !important;
  }

  /* Logo */
  .header-area .main-nav .logo {
    position: absolute !important;
    left: 25px !important;
    top: 22px !important;
    width: 150px !important;
    z-index: 1000 !important;
  }

  .header-area .main-nav .logo img {
    max-width: 150px !important;
    height: auto !important;
  }

  /* Navigation */
  .header-area .main-nav .nav {
    display: flex !important;
    flex-wrap: wrap !important;

    position: absolute !important;

    /*
     * Bring menu closer to logo.
     * This gives Free Quote more room.
     */
    left: 155px !important;
    right: 5px !important;

    top: 34px !important;

    width: auto !important;
    margin: 0 !important;

    justify-content: center !important;
    align-content: center !important;
    align-items: center !important;

    background: transparent !important;
    border-top: none !important;
  }

  /* Menu items */
  .header-area .main-nav .nav li {
    display: block !important;

    width: auto !important;
    height: 43px !important;
    line-height: 43px !important;

    /*
     * Tighter spacing between options
     */
    padding: 0 2px !important;

    flex: 0 0 auto !important;
    white-space: nowrap !important;

    border-top: none !important;
  }

  /* Menu text */
  .header-area .main-nav .nav li a {
    display: block !important;

    height: 43px !important;
    line-height: 43px !important;

    padding: 0 5px !important;

    font-size: 14px !important;

    white-space: nowrap !important;
  }

/* Free Quote */
.header-area .main-nav .nav li:last-child {
  display: block !important;
  flex: 0 0 auto !important;
  white-space: nowrap !important;
  border-top: none !important;
}

.header-area .main-nav .nav li:last-child a {
  display: flex !important;
  align-items: center !important;

  height: 43px !important;
  line-height: 43px !important;

  font-size: 13px !important;

  padding-left: 0 !important;
  padding-right: 3px !important;

  white-space: nowrap !important;

  /* FREE QUOTE - NORMAL */
  color: #1e1e1e !important;
  background-color: transparent !important;
}

/* FREE QUOTE - HOVER */
.header-area .main-nav .nav li:last-child a:hover {
  color: #f3353c !important;
  background-color: transparent !important;
}

/* FREE QUOTE ICON - NORMAL */
.header-area .main-nav .nav li:last-child a i {
  background-color: #16345c !important;
  color: #ffffff !important;
  transition: all 0.3s ease !important;
}

/* FREE QUOTE ICON - HOVER */
.header-area .main-nav .nav li:last-child a:hover i {
  background-color: #f3353c !important;
  color: #ffffff !important;
}


/* Hide hamburger between 768px and 900px */
.header-area .main-nav .menu-trigger,
.header-area .main-nav a.menu-trigger {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

}

/* =========================================================
   SITE-WIDE MAIN BODY TEXT
   ========================================================= */

.main-content p,
.contact-page p,
.contact-content p,
.single-property .main-content p,
.accordion-body {
  font-size: 18px !important;
  line-height: 1.7 !important;
}

/* =========================================================
   RUGS CAROUSEL - CONSISTENT IMAGE SIZING
   ========================================================= */

.main-banner .owl-banner .item.item-24,
.main-banner .owl-banner .item.item-25,
.main-banner .owl-banner .item.item-26 {
  height: 600px !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}


/* =========================================
   BRANCH LABELS AND CARPETS DIRECT 2U LOGOS
   ========================================= */

/* Red box containing the logo and branch name */
.sub-header ul.info.store-numbers li a .branch-label {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 6px !important;
  width: auto !important;
  min-height: 36px !important;
  margin: 0 !important;
  padding: 5px 10px !important;
  background-color: #f3353c !important;
  border: none !important;
  border-radius: 3px !important;
  box-sizing: border-box !important;
  white-space: nowrap !important;
}

/* Small white logo inside the red box */
.sub-header ul.info.store-numbers li a .branch-label img.branch-logo {
  display: block !important;
  width: 18px !important;
  min-width: 18px !important;
  max-width: 18px !important;
  height: 22px !important;
  min-height: 22px !important;
  max-height: 22px !important;
  object-fit: contain !important;
  flex: 0 0 18px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* White branch name beside the logo */
.sub-header ul.info.store-numbers li a .branch-label strong {
  display: inline-block !important;
  margin: 0 !important;
  padding: 0 !important;
  color: #ffffff !important;
  background: transparent !important;
  font-family: 'Poppins', sans-serif !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  white-space: nowrap !important;
}

/* Keep the red box and white text on hover */
.sub-header ul.info.store-numbers li a:hover .branch-label {
  background-color: #f3353c !important;
}

.sub-header ul.info.store-numbers li a:hover .branch-label strong {
  color: #ffffff !important;
}

/* Keep the phone number blue on hover */
.sub-header ul.info.store-numbers li a:hover .branch-phone {
  color: #443f95 !important;
}

/* =========================================================
   FLOORING NAVIGATION — SINGLE RESPONSIVE RULE SET
   Consistent font size and vertical centring
   ========================================================= */

.flooring-nav {
  width: 100%;
  height: 60px;
  background: #000000;
  margin: 0;
  padding: 0;
}

.flooring-nav .container {
  height: 100%;
}

.flooring-nav .container > ul {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  gap: 4px;
  list-style: none;
}

.flooring-nav .container > ul > li {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 1 auto;
  min-width: 0;
  height: 100%;
  margin: 0;
  padding: 0;
}

.flooring-nav .container > ul > li > a {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  height: 60px;
  padding: 0 6px;
  margin: 0;
  font-family: 'Poppins', sans-serif;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  color: #ffffff;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
}

/* White underline animation */
.flooring-nav .container > ul > li > a::after {
  content: "";
  position: absolute;
  bottom: 12px;
  left: 6px;
  width: 0;
  height: 2px;
  background: #ffffff;
  transition: width 0.3s ease;
}

.flooring-nav .container > ul > li > a:hover::after {
  width: calc(100% - 12px);
}

.flooring-nav .container > ul > li > a:hover {
  color: #ffffff;
}

/* Smaller desktop and tablet widths */
@media (min-width: 768px) and (max-width: 1100px) {
  .flooring-nav .container > ul {
    gap: 2px;
  }

  .flooring-nav .container > ul > li > a {
    font-size: 18px;
    padding-left: 3px;
    padding-right: 3px;
  }

  .flooring-nav .container > ul > li > a::after {
    left: 3px;
  }

  .flooring-nav .container > ul > li > a:hover::after {
    width: calc(100% - 6px);
  }
}

/* Mobile phones */
@media (max-width: 767px) {
  .flooring-nav {
    height: auto;
    min-height: 60px;
  }

  .flooring-nav .container {
    height: auto;
  }

  .flooring-nav .container > ul {
    height: auto;
    min-height: 60px;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0 8px;
    padding: 4px 0;
  }

  .flooring-nav .container > ul > li {
    height: 40px;
  }

  .flooring-nav .container > ul > li > a {
    height: 40px;
    padding: 0 6px;
    font-size: 14px;
  }

  .flooring-nav .container > ul > li > a::after {
    bottom: 4px;
  }
}

/* FLOORING NAVIGATION — PREVENT OVERFLOW AT NARROW WIDTHS */
@media (min-width: 768px) and (max-width: 900px) {
  .flooring-nav {
    height: 60px !important;
    background: #000000 !important;
    overflow: hidden;
  }

  .flooring-nav .container {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 6px !important;
    padding-right: 6px !important;
  }

  .flooring-nav .container > ul {
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: space-between !important;
    gap: 0 !important;
    width: 100% !important;
  }

  .flooring-nav .container > ul > li {
    flex: 1 1 0 !important;
    min-width: 0 !important;
  }

  .flooring-nav .container > ul > li > a {
    width: 100% !important;
    padding: 0 2px !important;
    font-size: clamp(12px, 1.8vw, 16px) !important;
    white-space: nowrap !important;
  }
}

/* MOBILE — KEEP BOTH ROWS INSIDE THE BLACK BAR */
@media (max-width: 767px) {
  .flooring-nav {
    height: auto !important;
    min-height: 60px !important;
    background: #000000 !important;
    overflow: visible !important;
  }

  .flooring-nav .container {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  .flooring-nav .container > ul {
    height: auto !important;
    min-height: 60px !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 0 6px !important;
    padding: 4px 0 !important;
  }

  .flooring-nav .container > ul > li {
    flex: 0 0 auto !important;
    height: 36px !important;
  }

  .flooring-nav .container > ul > li > a {
    height: 36px !important;
    padding: 0 5px !important;
    font-size: 13px !important;
    white-space: nowrap !important;
  }
}


/* HOMEPAGE CAROUSEL — CONSISTENT, SLIGHTLY SHORTER BANNERS */

.main-banner .owl-banner .owl-item .item {
  height: 520px !important;
  min-height: 520px !important;
  padding: 0 !important;
  margin-top: 0 !important;
  box-sizing: border-box !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}

/* Tablet */
@media (max-width: 991px) {
  .main-banner .owl-banner .owl-item .item {
    height: 430px !important;
    min-height: 430px !important;
  }
}

/* Mobile */
@media (max-width: 767px) {
  .main-banner .owl-banner .owl-item .item {
    height: 340px !important;
    min-height: 340px !important;
  }
}

/* =========================================================
   HOMEPAGE CAROUSEL — RESTORE RESPONSIVE HEADING POSITION
   ========================================================= */

/* Large screens: vertically centred, left-aligned text */
.main-banner .owl-banner .owl-item .item .header-text {
  position: absolute !important;
  top: 50% !important;
  left: 8% !important;
  right: auto !important;
  width: 45% !important;
  transform: translateY(-50%) !important;
  text-align: left !important;
}

/* Keep headings left-aligned on large screens */
.main-banner .owl-banner .owl-item .item .header-text h2 {
  text-align: left !important;
}

/* Tablets and mobile: centre the text within the banner */
@media (max-width: 767px) {
  .main-banner .owl-banner .owl-item .item .header-text {
    top: 50% !important;
    left: 50% !important;
    right: auto !important;
    width: 90% !important;
    transform: translate(-50%, -50%) !important;
    text-align: center !important;
  }

  .main-banner .owl-banner .owl-item .item .header-text h2,
  .main-banner .owl-banner .owl-item .item .header-text .category {
    text-align: center !important;
  }
}