diff --git a/about.html b/about.html index 6408d9b..57df863 100644 --- a/about.html +++ b/about.html @@ -8,19 +8,19 @@ @@ -183,7 +183,7 @@
  • AC Installation
  • AC Maintenance
  • Air Quality Solutions
    • -
  • Ductless AC
    • +
  • Ductless AC
  • Commercial HVAC
    • @@ -198,7 +198,7 @@
  • Hydro Jetting
  • Under Slab Plumbing
  • Slab Leak Detection
    • -
  • Commercial Plumbing Service
    • +
  • Commercial Plumbing Service
    • @@ -272,7 +272,7 @@
    @@ -323,7 +323,7 @@ gallery-1
    @@ -331,7 +331,7 @@ gallery-2 @@ -339,7 +339,7 @@ gallery-3 @@ -353,7 +353,7 @@
    - +

    diff --git a/assets/css/module-css/01-header-section.css b/assets/css/module-css/01-header-section.css index fc0d581..9710a59 100644 --- a/assets/css/module-css/01-header-section.css +++ b/assets/css/module-css/01-header-section.css @@ -2,413 +2,437 @@ # Mobile Nav --------------------------------------------------------------*/ .mobile-nav__wrapper { - position: fixed; - top: 0; - left: 0; - width: 100vw; - height: 100vh; - z-index: 999; - -webkit-transform: translateX(-100%); - transform: translateX(-100%); - -webkit-transform-origin: left center; - transform-origin: left center; - -webkit-transition: visibility 500ms ease 500ms, -webkit-transform 500ms ease 500ms; - transition: visibility 500ms ease 500ms, -webkit-transform 500ms ease 500ms; - transition: transform 500ms ease 500ms, visibility 500ms ease 500ms; - transition: transform 500ms ease 500ms, visibility 500ms ease 500ms, -webkit-transform 500ms ease 500ms; - visibility: hidden; + position: fixed; + top: 0; + left: 0; + width: 100vw; + height: 100vh; + z-index: 999; + -webkit-transform: translateX(-100%); + transform: translateX(-100%); + -webkit-transform-origin: left center; + transform-origin: left center; + -webkit-transition: visibility 500ms ease 500ms, + -webkit-transform 500ms ease 500ms; + transition: visibility 500ms ease 500ms, -webkit-transform 500ms ease 500ms; + transition: transform 500ms ease 500ms, visibility 500ms ease 500ms; + transition: transform 500ms ease 500ms, visibility 500ms ease 500ms, + -webkit-transform 500ms ease 500ms; + visibility: hidden; } .mobile-nav__wrapper.expanded { - opacity: 1; - -webkit-transform: translateX(0%); - transform: translateX(0%); - visibility: visible; - -webkit-transition: visibility 500ms ease 0ms, -webkit-transform 500ms ease 0ms; - transition: visibility 500ms ease 0ms, -webkit-transform 500ms ease 0ms; - transition: transform 500ms ease 0ms, visibility 500ms ease 0ms; - transition: transform 500ms ease 0ms, visibility 500ms ease 0ms, -webkit-transform 500ms ease 0ms; + opacity: 1; + -webkit-transform: translateX(0%); + transform: translateX(0%); + visibility: visible; + -webkit-transition: visibility 500ms ease 0ms, + -webkit-transform 500ms ease 0ms; + transition: visibility 500ms ease 0ms, -webkit-transform 500ms ease 0ms; + transition: transform 500ms ease 0ms, visibility 500ms ease 0ms; + transition: transform 500ms ease 0ms, visibility 500ms ease 0ms, + -webkit-transform 500ms ease 0ms; } .mobile-nav__wrapper .container { - padding-left: 0; - padding-right: 0; + padding-left: 0; + padding-right: 0; } .mobile-nav__overlay { - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - background-color: var(--thm-black); - opacity: 0.7; - cursor: pointer; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background-color: var(--thm-black); + opacity: 0.7; + cursor: pointer; } .mobile-nav__content { - position: relative; - width: 300px; - background-color: var(--thm-black); - height: 100%; - overflow-y: auto; - padding-top: 30px; - padding-bottom: 30px; - padding-left: 15px; - padding-right: 15px; - opacity: 0; - visibility: hidden; - -webkit-transform: translateX(-100%); - transform: translateX(-100%); - -webkit-transition: opacity 500ms ease 0ms, visibility 500ms ease 0ms, -webkit-transform 500ms ease 0ms; - transition: opacity 500ms ease 0ms, visibility 500ms ease 0ms, -webkit-transform 500ms ease 0ms; - transition: opacity 500ms ease 0ms, visibility 500ms ease 0ms, transform 500ms ease 0ms; - transition: opacity 500ms ease 0ms, visibility 500ms ease 0ms, transform 500ms ease 0ms, - -webkit-transform 500ms ease 0ms; - z-index: 10; + position: relative; + width: 300px; + background-color: var(--thm-black); + height: 100%; + overflow-y: auto; + padding-top: 30px; + padding-bottom: 30px; + padding-left: 15px; + padding-right: 15px; + opacity: 0; + visibility: hidden; + -webkit-transform: translateX(-100%); + transform: translateX(-100%); + -webkit-transition: opacity 500ms ease 0ms, visibility 500ms ease 0ms, + -webkit-transform 500ms ease 0ms; + transition: opacity 500ms ease 0ms, visibility 500ms ease 0ms, + -webkit-transform 500ms ease 0ms; + transition: opacity 500ms ease 0ms, visibility 500ms ease 0ms, + transform 500ms ease 0ms; + transition: opacity 500ms ease 0ms, visibility 500ms ease 0ms, + transform 500ms ease 0ms, -webkit-transform 500ms ease 0ms; + z-index: 10; } .mobile-nav__wrapper.expanded .mobile-nav__content { - opacity: 1; - visibility: visible; - -webkit-transform: translateX(0); - transform: translateX(0); - -webkit-transition: opacity 500ms ease 500ms, visibility 500ms ease 500ms, -webkit-transform 500ms ease 500ms; - transition: opacity 500ms ease 500ms, visibility 500ms ease 500ms, -webkit-transform 500ms ease 500ms; - transition: opacity 500ms ease 500ms, visibility 500ms ease 500ms, transform 500ms ease 500ms; - transition: opacity 500ms ease 500ms, visibility 500ms ease 500ms, transform 500ms ease 500ms, - -webkit-transform 500ms ease 500ms; + opacity: 1; + visibility: visible; + -webkit-transform: translateX(0); + transform: translateX(0); + -webkit-transition: opacity 500ms ease 500ms, visibility 500ms ease 500ms, + -webkit-transform 500ms ease 500ms; + transition: opacity 500ms ease 500ms, visibility 500ms ease 500ms, + -webkit-transform 500ms ease 500ms; + transition: opacity 500ms ease 500ms, visibility 500ms ease 500ms, + transform 500ms ease 500ms; + transition: opacity 500ms ease 500ms, visibility 500ms ease 500ms, + transform 500ms ease 500ms, -webkit-transform 500ms ease 500ms; } .mobile-nav__close { - position: absolute; - display: flex; - align-items: center; - justify-content: center; - top: 20px; - right: 15px; - width: 40px; - height: 40px; - background-color: rgba(255, 255, 255, 0.3); - color: #ffffff; - font-size: 16px; - cursor: pointer; - transition: all 200ms linear; - transition-delay: 0.1s; + position: absolute; + display: flex; + align-items: center; + justify-content: center; + top: 20px; + right: 15px; + width: 40px; + height: 40px; + background-color: rgba(255, 255, 255, 0.3); + color: #ffffff; + font-size: 16px; + cursor: pointer; + transition: all 200ms linear; + transition-delay: 0.1s; } .mobile-nav__close:hover { - background-color: var(--thm-base); + background-color: var(--thm-base); } .mobile-nav__close i:before { - position: relative; - display: inline-block; - transform: rotate(0deg); + position: relative; + display: inline-block; + transform: rotate(0deg); } .mobile-nav__content .logo-box { - margin-bottom: 40px; - display: -webkit-box; - display: -ms-flexbox; - display: flex; + margin-bottom: 40px; + display: -webkit-box; + display: -ms-flexbox; + display: flex; } .mobile-nav-search-box { - position: relative; - display: block; - margin-bottom: 30px; + position: relative; + display: block; + margin-bottom: 30px; } .mobile-nav-search-box form.search-form { - position: relative; - display: block; - width: 100%; + position: relative; + display: block; + width: 100%; } .mobile-nav-search-box .search-form input[type="text"] { - position: relative; - display: block; - width: 100%; - height: 52px; - background-color: #ffffff; - border: 1px solid #ffffff; - color: #909090; - font-size: 16px; - font-weight: 500; - padding-left: 20px; - padding-right: 60px; - border-radius: 5px; - font-family: var(--thm-font); - transition: all 500ms ease 0s; + position: relative; + display: block; + width: 100%; + height: 52px; + background-color: #ffffff; + border: 1px solid #ffffff; + color: #909090; + font-size: 16px; + font-weight: 500; + padding-left: 20px; + padding-right: 60px; + border-radius: 5px; + font-family: var(--thm-font); + transition: all 500ms ease 0s; } .mobile-nav-search-box .search-form button { - position: absolute; - top: 0px; - right: 0px; - bottom: 0px; - width: 50px; - height: 52px; - color: #ffffff; - font-size: 25px; - background: rgba(var(--thm-base-rgb), 1); - text-align: center; - border: 0px solid #e7e7e8; - border-top-right-radius: 5px; - border-bottom-right-radius: 5px; - transition: all 500ms ease 0s; + position: absolute; + top: 0px; + right: 0px; + bottom: 0px; + width: 50px; + height: 52px; + color: #ffffff; + font-size: 25px; + background: rgba(var(--thm-base-rgb), 1); + text-align: center; + border: 0px solid #e7e7e8; + border-top-right-radius: 5px; + border-bottom-right-radius: 5px; + transition: all 500ms ease 0s; } .mobile-nav-search-box .search-form button i { - position: relative; - top: 0px; + position: relative; + top: 0px; } .mobile-nav-search-box .search-form input[type="text"]:focus { - color: var(--thm-black); + color: var(--thm-black); } .mobile-nav-search-box .search-form input[type="text"]:focus + button, .mobile-nav-search-box .search-form button:hover { - color: #ffffff; - background-color: var(--thm-black); + color: #ffffff; + background-color: var(--thm-black); } .mobile-nav-search-box .search-form input::-webkit-input-placeholder { - color: rgba(var(--thm-black-rgb), 0.7); + color: rgba(var(--thm-black-rgb), 0.7); } .mobile-nav-search-box .search-form input:-moz-placeholder { - color: rgba(var(--thm-black-rgb), 0.7); + color: rgba(var(--thm-black-rgb), 0.7); } .mobile-nav-search-box .search-form input::-moz-placeholder { - color: rgba(var(--thm-black-rgb), 0.7); + color: rgba(var(--thm-black-rgb), 0.7); } .mobile-nav-search-box .search-form input:-ms-input-placeholder { - color: rgba(var(--thm-black-rgb), 0.7); + color: rgba(var(--thm-black-rgb), 0.7); } .mobile-nav__container { - border-top: 1px solid rgba(255, 255, 255, 0.1); - border-bottom: 1px solid rgba(255, 255, 255, 0.1); + border-top: 1px solid rgba(255, 255, 255, 0.1); + border-bottom: 1px solid rgba(255, 255, 255, 0.1); } .mobile-nav__content .main-menu__list, .mobile-nav__content .main-menu__list > li > ul, .mobile-nav__content .main-menu__list > li > ul > li > ul { - margin: 0; - padding: 0; - list-style-type: none; + margin: 0; + padding: 0; + list-style-type: none; } .mobile-nav__content .main-menu__list > li > ul, .mobile-nav__content .main-menu__list > li > ul > li > ul { - display: none; - border-top: 1px solid rgba(255, 255, 255, 0.1); + display: none; + border-top: 1px solid rgba(255, 255, 255, 0.1); } .mobile-nav__content .main-menu__list > li:not(:last-child), .mobile-nav__content .main-menu__list > li > ul > li:not(:last-child), -.mobile-nav__content .main-menu__list > li > ul > li > ul > li:not(:last-child) { - border-bottom: 1px solid rgba(255, 255, 255, 0.1); +.mobile-nav__content + .main-menu__list + > li + > ul + > li + > ul + > li:not(:last-child) { + border-bottom: 1px solid rgba(255, 255, 255, 0.1); } .mobile-nav__content .main-menu__list > li > a, .mobile-nav__content .main-menu__list > li > ul > li > a, .mobile-nav__content .main-menu__list > li > ul > li > ul > li > a { - position: relative; - display: flex; - flex-direction: row; - justify-content: space-between; - align-items: center; - line-height: 30px; - color: #ffffff; - font-size: 15px; - font-family: var(--thm-font-2); - font-weight: 500; - height: 46px; - transition: 500ms; + position: relative; + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; + line-height: 30px; + color: #ffffff; + font-size: 15px; + font-family: var(--thm-font-2); + font-weight: 500; + height: 46px; + transition: 500ms; } .mobile-nav__content .main-menu__list > li > ul > li > a { - font-size: 14px; - font-weight: 400; + font-size: 14px; + font-weight: 400; } .mobile-nav__content .main-menu__list > li > a.expanded, .mobile-nav__content .main-menu__list > li > ul > li > a.expanded, .mobile-nav__content .main-menu__list > li > ul > li > ul > li > a.expanded { - color: var(--thm-base); + color: var(--thm-base); } .mobile-nav__content .main-menu__list > li > a > button, .mobile-nav__content .main-menu__list > li > ul > li > a > button, .mobile-nav__content .main-menu__list > li > ul > li > ul > li > a > button { - width: 30px; - height: 30px; - background: rgba(var(--thm-primary-rgb), 0.2); - border: none; - outline: none; - color: #fff; - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-box-pack: center; - -ms-flex-pack: center; - justify-content: center; - text-align: center; - -webkit-transform: rotate(-90deg); - transform: rotate(-90deg); - -webkit-transition: -webkit-transform 500ms ease; - transition: -webkit-transform 500ms ease; - transition: transform 500ms ease; - transition: transform 500ms ease, -webkit-transform 500ms ease; - padding: 0; + width: 30px; + height: 30px; + background: rgba(var(--thm-primary-rgb), 0.2); + border: none; + outline: none; + color: #fff; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + text-align: center; + -webkit-transform: rotate(-90deg); + transform: rotate(-90deg); + -webkit-transition: -webkit-transform 500ms ease; + transition: -webkit-transform 500ms ease; + transition: transform 500ms ease; + transition: transform 500ms ease, -webkit-transform 500ms ease; + padding: 0; } .mobile-nav__content .main-menu__list > li > a > button.expanded, .mobile-nav__content .main-menu__list > li > ul > li > a > button.expanded, -.mobile-nav__content .main-menu__list > li > ul > li > ul > li > a > button.expanded { - -webkit-transform: rotate(0deg); - transform: rotate(0deg); - background-color: #fff; - color: var(--thm-base); +.mobile-nav__content + .main-menu__list + > li + > ul + > li + > ul + > li + > a + > button.expanded { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + background-color: #fff; + color: var(--thm-base); } .mobile-nav__content .home-showcase__title { - background-color: rgba(255, 255, 255, 0.1); - margin-top: 0px; + background-color: rgba(255, 255, 255, 0.1); + margin-top: 0px; } .mobile-nav__contact { - position: relative; - display: block; - margin-top: 40px; - margin-bottom: 30px; + position: relative; + display: block; + margin-top: 40px; + margin-bottom: 30px; } .mobile-nav__contact li { - position: relative; - display: flex; - align-items: center; - color: #ffffff; - font-size: 15px; - font-weight: 500; + position: relative; + display: flex; + align-items: center; + color: #ffffff; + font-size: 15px; + font-weight: 500; } .mobile-nav__contact li + li { - margin-top: 15px; + margin-top: 15px; } .mobile-nav__contact li a { - color: #ffffff; - -webkit-transition: 500ms; - transition: 500ms; + color: #ffffff; + -webkit-transition: 500ms; + transition: 500ms; } .mobile-nav__contact li a:hover { - color: var(--thm-black); + color: var(--thm-black); } .mobile-nav__contact li > i { - position: relative; - display: flex; - align-items: center; - justify-content: center; - width: 30px; - height: 30px; - border-radius: 0%; - background-color: rgba(255, 255, 255, 0.1); - color: #fff; - font-size: 12px; - margin-right: 10px; + position: relative; + display: flex; + align-items: center; + justify-content: center; + width: 30px; + height: 30px; + border-radius: 0%; + background-color: rgba(255, 255, 255, 0.1); + color: #fff; + font-size: 12px; + margin-right: 10px; } .mobile-nav__top { - position: relative; - display: flex; - align-items: center; - justify-content: space-between; - margin-bottom: 30px; + position: relative; + display: flex; + align-items: center; + justify-content: space-between; + margin-bottom: 30px; } .mobile-nav__social { - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; } .mobile-nav__social a { - position: relative; - display: block; - width: 40px; - height: 40px; - border-radius: 50%; - background-color: rgba(255, 255, 255, 0.1); - color: #ffffff; - font-size: 16px; - line-height: 40px; - text-align: center; - transition: 500ms; + position: relative; + display: block; + width: 40px; + height: 40px; + border-radius: 50%; + background-color: rgba(255, 255, 255, 0.1); + color: #ffffff; + font-size: 16px; + line-height: 40px; + text-align: center; + transition: 500ms; } .mobile-nav__social a + a { - margin-left: 10px; + margin-left: 10px; } .mobile-nav__social a:hover { - color: var(--thm-base); - background-color: #ffffff; + color: var(--thm-base); + background-color: #ffffff; } /* no menu after 2rd level dropdown */ .mobile-nav__content .main-menu__list > li > ul > li > ul > li > a > button, .mobile-nav__content .main-menu__list > li > ul > li > ul > li > ul { - display: none !important; + display: none !important; } /*-------------------------------------------------------------- # Main Header Css --------------------------------------------------------------*/ .main-header { - position: relative; - display: block; - width: 100%; - background: transparent; - -webkit-transition: all 500ms ease; - transition: all 500ms ease; - z-index: 99; + position: relative; + display: block; + width: 100%; + background: transparent; + -webkit-transition: all 500ms ease; + transition: all 500ms ease; + z-index: 99; } .main-menu { - position: relative; - display: block; + position: relative; + display: block; } .main-menu__wrapper { - position: relative; - display: block; + position: relative; + display: block; } .main-menu__wrapper-inner { - position: relative; - display: flex; - align-items: center; + position: relative; + display: flex; + align-items: center; } .main-menu-box { - display: block; - float: right; - margin-left: auto; + display: block; + float: right; + margin-left: auto; } .main-menu .main-menu__list, @@ -417,486 +441,490 @@ .stricky-header .main-menu__list, .stricky-header .main-menu__list > li > ul, .stricky-header .main-menu__list > li > ul > li > ul { - margin: 0; - padding: 0; - list-style-type: none; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - display: none; + margin: 0; + padding: 0; + list-style-type: none; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + display: none; } @media (min-width: 1200px) { - .main-menu .main-menu__list, - .main-menu .main-menu__list > li > ul, - .main-menu .main-menu__list > li > ul > li > ul, - .stricky-header .main-menu__list, - .stricky-header .main-menu__list > li > ul, - .stricky-header .main-menu__list > li > ul > li > ul { - display: -webkit-box; - display: -ms-flexbox; - display: flex; - } + .main-menu .main-menu__list, + .main-menu .main-menu__list > li > ul, + .main-menu .main-menu__list > li > ul > li > ul, + .stricky-header .main-menu__list, + .stricky-header .main-menu__list > li > ul, + .stricky-header .main-menu__list > li > ul > li > ul { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + } } .main-menu .main-menu__list > li, .stricky-header .main-menu__list > li { - position: relative; - padding-top: 50px; - padding-bottom: 50px; + position: relative; + padding-top: 50px; + padding-bottom: 50px; } .main-menu .main-menu__list > li + li, .stricky-header .main-menu__list > li + li { - margin-left: 25px; + margin-left: 25px; } .main-menu .main-menu__list > li > a, .stricky-header .main-menu__list > li > a { - position: relative; - color: #ffffff; - font-size: 19px; - line-height: 20px; - font-weight: 500; - display: flex; - align-items: center; - font-family: var(--thm-font); - -webkit-transition: all 500ms ease; - transition: all 500ms ease; + position: relative; + color: #ffffff; + font-size: 19px; + line-height: 20px; + font-weight: 500; + display: flex; + align-items: center; + font-family: var(--thm-font); + -webkit-transition: all 500ms ease; + transition: all 500ms ease; } .main-menu .main-menu__list > li.current > a, .main-menu .main-menu__list > li:hover > a, .stricky-header .main-menu__list > li.current > a, .stricky-header .main-menu__list > li:hover > a { - color: var(--thm-base); + color: var(--thm-base); } .main-menu .main-menu__list > li > ul, .main-menu .main-menu__list > li > ul > li > ul, .stricky-header .main-menu__list > li > ul, .stricky-header .main-menu__list > li > ul > li > ul { - position: absolute; - top: 100%; - left: 0; - min-width: 270px; - padding: 10px 0px 10px; - background-color: var(--thm-black); - -webkit-box-orient: vertical; - -webkit-box-direction: normal; - -ms-flex-direction: column; - flex-direction: column; - -webkit-box-pack: start; - -ms-flex-pack: start; - justify-content: flex-start; - -webkit-box-align: start; - -ms-flex-align: start; - align-items: flex-start; - opacity: 0; - visibility: hidden; - -webkit-transform: rotateX(-90deg); - transform: rotateX(-90deg); - transform-origin: top; - transform-style: preserve-3d; - transition-delay: 0.1s; - transition-timing-function: ease-in-out; - transition-duration: 0.3s; - transition-property: all; - box-shadow: 2px 2px 5px 1px rgba(0, 0, 0, 0.05), -2px 0px 5px 1px rgba(0, 0, 0, 0.05); - z-index: 99; + position: absolute; + top: 100%; + left: 0; + min-width: 270px; + padding: 10px 0px 10px; + background-color: var(--thm-black); + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + -webkit-box-pack: start; + -ms-flex-pack: start; + justify-content: flex-start; + -webkit-box-align: start; + -ms-flex-align: start; + align-items: flex-start; + opacity: 0; + visibility: hidden; + -webkit-transform: rotateX(-90deg); + transform: rotateX(-90deg); + transform-origin: top; + transform-style: preserve-3d; + transition-delay: 0.1s; + transition-timing-function: ease-in-out; + transition-duration: 0.3s; + transition-property: all; + box-shadow: 2px 2px 5px 1px rgba(0, 0, 0, 0.05), + -2px 0px 5px 1px rgba(0, 0, 0, 0.05); + z-index: 99; } .main-menu .main-menu__list > li > ul > li > ul > li > ul, .stricky-header .main-menu__list > li > ul > li > ul > li > ul { - display: none; + display: none; } .main-menu .main-menu__list > li:hover > ul, .main-menu .main-menu__list > li > ul > li:hover > ul, .stricky-header .main-menu__list > li:hover > ul, .stricky-header .main-menu__list > li > ul > li:hover > ul { - opacity: 1; - visibility: visible; - transform: rotateX(0deg); - transition: all 300ms ease; + opacity: 1; + visibility: visible; + transform: rotateX(0deg); + transition: all 300ms ease; } .main-menu .main-menu__list > li > ul > li, .main-menu .main-menu__list > li > ul > li > ul > li, .stricky-header .main-menu__list > li > ul > li, .stricky-header .main-menu__list > li > ul > li > ul > li { - position: relative; - width: 100%; - padding: 0 20px; - -webkit-box-flex: 1; - -ms-flex: 1 1 100%; - flex: 1 1 100%; + position: relative; + width: 100%; + padding: 0 20px; + -webkit-box-flex: 1; + -ms-flex: 1 1 100%; + flex: 1 1 100%; } .main-menu .main-menu__list > li > ul > li + li, .main-menu .main-menu__list > li > ul > li > ul > li + li, .stricky-header .main-menu__list > li > ul > li + li, .stricky-header .main-menu__list > li > ul > li > ul > li + li { - border-top: 0px solid rgba(255, 255, 255, 0.2); + border-top: 0px solid rgba(255, 255, 255, 0.2); } .main-menu .main-menu__list > li > ul > li > a, .main-menu .main-menu__list > li > ul > li > ul > li > a, .stricky-header .main-menu__list > li > ul > li > a, .stricky-header .main-menu__list > li > ul > li > ul > li > a { - position: relative; - display: flex; - font-size: 16px; - line-height: 30px; - color: #ffffff; - letter-spacing: 0; - font-weight: 400; - display: -webkit-box; - display: -ms-flexbox; - padding: 9px 0px; - -webkit-transition: 500ms; - transition: 500ms; - font-family: var(--thm-font-2); - border-bottom: 1px solid rgba(255, 255, 255, 0.1); - z-index: 1; + position: relative; + display: flex; + font-size: 16px; + line-height: 30px; + color: #ffffff; + letter-spacing: 0; + font-weight: 400; + display: -webkit-box; + display: -ms-flexbox; + padding: 9px 0px; + -webkit-transition: 500ms; + transition: 500ms; + font-family: var(--thm-font-2); + border-bottom: 1px solid rgba(255, 255, 255, 0.1); + z-index: 1; } .main-menu .main-menu__list > li > ul > li:last-child > a, .main-menu .main-menu__list > li > ul > li > ul > li:last-child > a, .stricky-header .main-menu__list > li > ul > li:last-child > a, .stricky-header .main-menu__list > li > ul > li > ul > li:last-child > a { - border-bottom: none; + border-bottom: none; } .main-menu .main-menu__list > li > ul > li:hover > a, .main-menu .main-menu__list > li > ul > li > ul > li:hover > a, .stricky-header .main-menu__list > li > ul > li:hover > a, .stricky-header .main-menu__list > li > ul > li > ul > li:hover > a { - color: #909398; - padding-left: 3px; + color: #909398; + padding-left: 3px; } .main-menu .main-menu__list > li > ul > li > ul, .stricky-header .main-menu__list > li > ul > li > ul { - top: 0; - left: 100%; - border-left: 15px solid transparent; - background-color: transparent; + top: 0; + left: 100%; + border-left: 15px solid transparent; + background-color: transparent; } .main-menu .main-menu__list > li > ul > li > ul:before, .stricky-header .main-menu__list > li > ul > li > ul:before { - content: ""; - position: absolute; - top: 0; - left: 0; - bottom: 0; - right: 0; - background-color: var(--thm-black); + content: ""; + position: absolute; + top: 0; + left: 0; + bottom: 0; + right: 0; + background-color: var(--thm-black); } .main-menu .main-menu__list li ul li > ul.right-align, .stricky-header .main-menu__list li ul li > ul.right-align { - top: 0; - left: auto; - right: 100%; + top: 0; + left: auto; + right: 100%; } /*------------------------------------- # Mega Menu Css --------------------------------------*/ .main-menu__wrapper .main-menu__list > .megamenu { - position: static; + position: static; } .main-menu__wrapper .main-menu__list > .megamenu > ul { - top: 100% !important; - left: 0 !important; - right: 0 !important; - background-color: transparent; - -webkit-box-shadow: none; - box-shadow: none; - padding: 0; + top: 100% !important; + left: 0 !important; + right: 0 !important; + background-color: transparent; + -webkit-box-shadow: none; + box-shadow: none; + padding: 0; } .main-menu__wrapper .main-menu__list > .megamenu > ul > li { - padding: 0 !important; + padding: 0 !important; } .megamenu-content-box { - position: relative; - display: block; + position: relative; + display: block; } .megamenu-content-box .container { - max-width: 1200px !important; + max-width: 1200px !important; } .megamenu-content-box__inner { - background-color: #fff; - padding: 40px 35px 40px; - -webkit-box-shadow: 0px 10px 60px 0px rgba(0, 0, 0, 0.1); - box-shadow: 0px 10px 60px 0px rgba(0, 0, 0, 0.1); - border-bottom-left-radius: 0px; - border-bottom-right-radius: 0px; + background-color: #fff; + padding: 40px 35px 40px; + -webkit-box-shadow: 0px 10px 60px 0px rgba(0, 0, 0, 0.1); + box-shadow: 0px 10px 60px 0px rgba(0, 0, 0, 0.1); + border-bottom-left-radius: 0px; + border-bottom-right-radius: 0px; } .mobile-nav__wrapper .megamenu-content-box__inner { - padding: 15px 0px; - background-color: rgba(0, 0, 0, 0); + padding: 15px 0px; + background-color: rgba(0, 0, 0, 0); } .megamenu-content-box .row { - --bs-gutter-x: 20px; - --bs-gutter-y: 20px; + --bs-gutter-x: 20px; + --bs-gutter-y: 20px; } .home-showcase__image { - position: relative; - display: block; - overflow: hidden; - background-color: var(--thm-black); + position: relative; + display: block; + overflow: hidden; + background-color: var(--thm-black); } .home-showcase__image > img { - width: 100%; - -webkit-transition: 500ms ease; - transition: 500ms ease; - -webkit-transform: scale(1); - transform: scale(1); + width: 100%; + -webkit-transition: 500ms ease; + transition: 500ms ease; + -webkit-transform: scale(1); + transform: scale(1); } .home-showcase__image:hover > img { - opacity: 0.25; + opacity: 0.25; } .home-showcase__image:hover .home-showcase__buttons { - -webkit-transform: scale(1, 1); - transform: scale(1, 1); - opacity: 1; - visibility: visible; + -webkit-transform: scale(1, 1); + transform: scale(1, 1); + opacity: 1; + visibility: visible; } .home-showcase__buttons { - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - display: flex; - justify-content: center; - align-items: center; - flex-direction: column; - -webkit-transform: scale(1, 0); - transform: scale(1, 0); - opacity: 0; - visibility: hidden; - transform-origin: bottom center; - -webkit-transition: 500ms ease; - transition: 500ms ease; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + -webkit-transform: scale(1, 0); + transform: scale(1, 0); + opacity: 0; + visibility: hidden; + transform-origin: bottom center; + -webkit-transition: 500ms ease; + transition: 500ms ease; } .home-showcase__buttons .home-showcase__buttons__item.top { - opacity: 0; - transform: translateY(-50px); - transition: all 0.4s ease-in-out 0.1s; + opacity: 0; + transform: translateY(-50px); + transition: all 0.4s ease-in-out 0.1s; } -.home-showcase__image:hover .home-showcase__buttons .home-showcase__buttons__item.top { - opacity: 1; - transform: translateY(0px); - transition: all 0.4s ease-in-out 0.2s; +.home-showcase__image:hover + .home-showcase__buttons + .home-showcase__buttons__item.top { + opacity: 1; + transform: translateY(0px); + transition: all 0.4s ease-in-out 0.2s; } .home-showcase__buttons__item { - width: 150px; - line-height: 50px !important; - text-align: center; + width: 150px; + line-height: 50px !important; + text-align: center; } .home-showcase__buttons__item:hover { - color: #ffffff; + color: #ffffff; } .home-showcase__buttons__item + .home-showcase__buttons__item { - margin-top: 10px; + margin-top: 10px; } .home-showcase__title { - position: relative; - display: block; - background-color: rgba(var(--thm-base-rgb, 53, 84, 209), 0.05); - padding: 11px 0; - margin: 0; - text-align: center; - font-size: 15px; - font-weight: 500; - color: var(--thm-base); - text-transform: uppercase; - margin-top: 15px; + position: relative; + display: block; + background-color: rgba(var(--thm-base-rgb, 53, 84, 209), 0.05); + padding: 11px 0; + margin: 0; + text-align: center; + font-size: 15px; + font-weight: 500; + color: var(--thm-base); + text-transform: uppercase; + margin-top: 15px; } .mobile-nav__wrapper .home-showcase__title { - color: #ffffff; + color: #ffffff; } .mobile-nav__wrapper .megamenu-content-box .row [class*="col-"] { - -webkit-box-flex: 0; - -ms-flex: 0 0 100%; - flex: 0 0 100%; + -webkit-box-flex: 0; + -ms-flex: 0 0 100%; + flex: 0 0 100%; } /** Megamenu style2**/ .megamenu-box { - position: relative; - display: block; + position: relative; + display: block; } .megamenu-box .container { - max-width: 900px !important; + max-width: 900px !important; } .megamenu-box__inner { - position: relative; - display: block; - background-color: #fff; - padding: 10px 20px 10px; - -webkit-box-shadow: 0px 10px 60px 0px rgba(0, 0, 0, 0.1); - box-shadow: 0px 10px 60px 0px rgba(0, 0, 0, 0.1); + position: relative; + display: block; + background-color: #fff; + padding: 10px 20px 10px; + -webkit-box-shadow: 0px 10px 60px 0px rgba(0, 0, 0, 0.1); + box-shadow: 0px 10px 60px 0px rgba(0, 0, 0, 0.1); } .megamenu-box .row { - --bs-gutter-x: 20px; - --bs-gutter-y: 0px; + --bs-gutter-x: 20px; + --bs-gutter-y: 0px; } .megamenu-box ul { - position: relative; + position: relative; } .megamenu-box ul li { - position: relative; - display: block; - border-bottom: 1px solid rgba(var(--thm-base-rgb, 53, 84, 209), 0.05); + position: relative; + display: block; + border-bottom: 1px solid rgba(var(--thm-base-rgb, 53, 84, 209), 0.05); } .megamenu-box ul li:last-child { - border-bottom: none; + border-bottom: none; } .megamenu-box ul li a { - position: relative; - display: block; - padding-left: 20px; - color: var(--thm-gray); - font-size: 15px; - line-height: 50px; - font-weight: 500; - text-align: left; - text-transform: capitalize; - letter-spacing: normal; - font-family: var(--thm-font-2); - transition-timing-function: ease-in-out; - transition-duration: 0.2s; - z-index: 1; + position: relative; + display: block; + padding-left: 20px; + color: var(--thm-gray); + font-size: 15px; + line-height: 50px; + font-weight: 500; + text-align: left; + text-transform: capitalize; + letter-spacing: normal; + font-family: var(--thm-font-2); + transition-timing-function: ease-in-out; + transition-duration: 0.2s; + z-index: 1; } .megamenu-box ul li a:before { - content: ""; - position: absolute; - top: 0; - left: 0px; - bottom: 0px; - right: 0; - background-color: var(--thm-base); - transition: -webkit-transform 0.4s ease; - transition: transform 0.4s ease; - transition: transform 0.4s ease, -webkit-transform 0.4s ease; - -webkit-transform: scale(0, 1); - transform: scale(0, 1); - -webkit-transform-origin: right center; - transform-origin: right center; - z-index: -1; + content: ""; + position: absolute; + top: 0; + left: 0px; + bottom: 0px; + right: 0; + background-color: var(--thm-base); + transition: -webkit-transform 0.4s ease; + transition: transform 0.4s ease; + transition: transform 0.4s ease, -webkit-transform 0.4s ease; + -webkit-transform: scale(0, 1); + transform: scale(0, 1); + -webkit-transform-origin: right center; + transform-origin: right center; + z-index: -1; } .megamenu-box ul li:hover a:before { - -webkit-transform: scale(1, 1); - transform: scale(1, 1); - -webkit-transform-origin: left center; - transform-origin: left center; + -webkit-transform: scale(1, 1); + transform: scale(1, 1); + -webkit-transform-origin: left center; + transform-origin: left center; } .megamenu-box ul li:hover a { - color: #ffffff; + color: #ffffff; } .mobile-nav__wrapper .megamenu-box ul { } .mobile-nav__wrapper .megamenu-box ul li { - margin-bottom: 0px; - border-bottom: 1px solid rgba(255, 255, 255, 0.1); + margin-bottom: 0px; + border-bottom: 1px solid rgba(255, 255, 255, 0.1); } .mobile-nav__wrapper .megamenu-box ul li a { - position: relative; - display: block; - padding-left: 0; - line-height: 46px; - color: #ffffff; - font-size: 14px; - font-family: var(--thm-font-2); - font-weight: 400; - transition: all 500ms ease; + position: relative; + display: block; + padding-left: 0; + line-height: 46px; + color: #ffffff; + font-size: 14px; + font-family: var(--thm-font-2); + font-weight: 400; + transition: all 500ms ease; } .mobile-nav__wrapper .megamenu-box .row { - --bs-gutter-x: 20px; - --bs-gutter-y: 0px; + --bs-gutter-x: 20px; + --bs-gutter-y: 0px; } .mobile-nav__wrapper .megamenu-box__inner { - padding: 0px 0px; - background-color: transparent; - box-shadow: none; + padding: 0px 0px; + background-color: transparent; + box-shadow: none; } .mobile-nav__wrapper .megamenu-box__inner .row [class*="col-"] { - -webkit-box-flex: 0; - -ms-flex: 0 0 100%; - flex: 0 0 100%; + -webkit-box-flex: 0; + -ms-flex: 0 0 100%; + flex: 0 0 100%; } /*------------------------------------- Stricky Header Css ---------------------------------------*/ .stricky-header { - position: fixed; - z-index: 991; - top: 0; - left: 0; - background-color: #fff; - width: 100%; - visibility: hidden; - -webkit-transform: translateY(-120%); - transform: translateY(-120%); - -webkit-transition: visibility 500ms ease, -webkit-transform 500ms ease; - transition: visibility 500ms ease, -webkit-transform 500ms ease; - transition: transform 500ms ease, visibility 500ms ease; - transition: transform 500ms ease, visibility 500ms ease, -webkit-transform 500ms ease; - box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); + position: fixed; + z-index: 991; + top: 0; + left: 0; + background-color: #fff; + width: 100%; + visibility: hidden; + -webkit-transform: translateY(-120%); + transform: translateY(-120%); + -webkit-transition: visibility 500ms ease, -webkit-transform 500ms ease; + transition: visibility 500ms ease, -webkit-transform 500ms ease; + transition: transform 500ms ease, visibility 500ms ease; + transition: transform 500ms ease, visibility 500ms ease, + -webkit-transform 500ms ease; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); } @media (max-width: 1199px) { - .stricky-header { - display: none !important; - } + .stricky-header { + display: none !important; + } } .stricky-header.stricky-fixed { - -webkit-transform: translateY(0); - transform: translateY(0); - visibility: visible; + -webkit-transform: translateY(0); + transform: translateY(0); + visibility: visible; } /*** @@ -930,1131 +958,1148 @@ **/ .main-menu .mobile-nav__toggler { - position: relative; - display: inline-block; - font-size: 28px; - line-height: 28px; - cursor: pointer; - -webkit-transition: 500ms; - transition: 500ms; + position: relative; + display: inline-block; + font-size: 28px; + line-height: 28px; + cursor: pointer; + -webkit-transition: 500ms; + transition: 500ms; } .main-menu .mobile-nav__toggler:hover { - color: var(--thm-black); + color: var(--thm-black); } @media (min-width: 1200px) { - .main-menu .mobile-nav__toggler { - display: none; - } + .main-menu .mobile-nav__toggler { + display: none; + } } .stricky-header.main-menu { - background-color: #090d30; + background-color: #090d30; } .stricky-header .main-menu-box { - display: block; - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-box-pack: center; - -ms-flex-pack: center; - justify-content: center; + display: block; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; } .stricky-header .main-menu__wrapper { - background-color: #090d30; + background-color: #090d30; } .stricky-header .main-menu__wrapper-inner { - background-color: #090d30; - justify-content: space-between; + background-color: #090d30; + justify-content: space-between; } /*---------------------------------------- Main Header Style1 ---------------------------------------*/ .main-header-style1 { - position: relative; - display: block; - background-color: oklch(0.444 0.177 26.899); + position: relative; + display: block; + background-color: oklch(0.444 0.177 26.899); } .main-menu-style1 { - position: relative; - display: block; + position: relative; + display: block; } .main-menu-style1 .main-menu__wrapper { - position: relative; + position: relative; } .main-menu-style1 .main-menu__wrapper .container { - max-width: 1730px; - padding: 0 15px; + max-width: 1730px; + padding: 0 15px; } .main-menu-style1 .main-menu__wrapper-inner { - position: relative; - display: flex; - flex-direction: row; - justify-content: space-between; - flex-wrap: wrap; - z-index: 10; + position: relative; + display: flex; + flex-direction: row; + justify-content: space-between; + flex-wrap: wrap; + z-index: 10; } .main-menu-style1-left { - position: relative; - display: block; + position: relative; + display: block; } .logo-box-style1 { - position: relative; - display: block; + position: relative; + display: block; } .logo-box-style1 a { - position: relative; - display: inline-block; - max-width: 165px; + position: relative; + display: inline-block; + max-width: 165px; } .main-menu-style1-right { - position: relative; - display: flex; - align-items: center; + position: relative; + display: flex; + align-items: center; } .main-menu-style1-right .main-menu-box { - position: static; - display: block; - float: left; + position: static; + display: block; + float: left; } .box-search-style1 { - position: relative; - display: inline-block; - margin-left: 16px; - margin-right: 27px; - line-height: 0; + position: relative; + display: inline-block; + margin-left: 16px; + margin-right: 27px; + line-height: 0; } .box-search-style1 a { - position: relative; - display: inline-block; - color: #ffffff; - font-size: 25px; - line-height: 25px; + position: relative; + display: inline-block; + color: #ffffff; + font-size: 25px; + line-height: 25px; } .side-content-button { - position: relative; - display: block; + position: relative; + display: block; } .side-content-button a { - position: relative; - display: flex; - align-items: flex-start; - justify-content: flex-start; - flex-direction: column; + position: relative; + display: flex; + align-items: flex-start; + justify-content: flex-start; + flex-direction: column; } .side-content-button a .line { - position: relative; - display: block; - width: 40px; - height: 4px; - border-radius: 4px; - background-color: var(--thm-base); - margin: 3px 0; - transition: all 500ms ease; + position: relative; + display: block; + width: 40px; + height: 4px; + border-radius: 4px; + background-color: var(--thm-base); + margin: 3px 0; + transition: all 500ms ease; } .side-content-button a:hover .line { - background-color: #ffffff; + background-color: #ffffff; } .side-content-button a .line.two { - width: 30px; - transition: all 300ms ease; + width: 30px; + transition: all 300ms ease; } .side-content-button a .line.three { - width: 20px; - transition: all 500ms ease; + width: 20px; + transition: all 500ms ease; } .side-content-button a:hover .line.two { - width: 40px; + width: 40px; } .side-content-button a:hover .line.three { - width: 40px; + width: 40px; } .phone-number-box-style1 { - position: relative; - display: flex; - align-items: center; - margin-left: 25px; - padding-left: 26px; + position: relative; + display: flex; + align-items: center; + margin-left: 25px; + padding-left: 26px; } .phone-number-box-style1:before { - content: ""; - position: absolute; - top: 0; - left: 0; - bottom: 5px; - width: 1px; - background-color: #ffffff; - opacity: 0.4; + content: ""; + position: absolute; + top: 0; + left: 0; + bottom: 5px; + width: 1px; + background-color: #ffffff; + opacity: 0.4; } .phone-number-box-style1 .icon { - position: relative; - display: block; - width: 55px; - font-size: 45px; + position: relative; + display: block; + width: 55px; + font-size: 45px; } .phone-number-box-style1 .text { - position: relative; - display: block; + position: relative; + display: block; } .phone-number-box-style1 h5 { - color: #ffffff; - font-size: 14px; - line-height: 14px; - text-transform: uppercase; - margin: 0 0 7px; + color: #ffffff; + font-size: 14px; + line-height: 14px; + text-transform: uppercase; + margin: 0 0 7px; } .phone-number-box-style1 a { - color: #ffffff; - font-size: 24px; - font-weight: 600; - font-family: var(--thm-font); - transition: all 200ms linear; - transition-delay: 0.1s; + color: #ffffff; + font-size: 24px; + font-weight: 600; + font-family: var(--thm-font); + transition: all 200ms linear; + transition-delay: 0.1s; } .phone-number-box-style1 a:hover { - color: var(--thm-base); + color: var(--thm-base); } .stricky-header .main-menu__wrapper-inner .box-search-style1 { - display: none; + display: none; } .stricky-header .main-menu__wrapper-inner .phone-number-box-style1 { - display: none; + display: none; } .stricky-header .main-menu__wrapper-inner .side-content-button { - display: none; + display: none; } .stricky-header .main-menu__list > li { - padding-top: 30px; - padding-bottom: 30px; + padding-top: 30px; + padding-bottom: 30px; } /*---------------------------------------- Main Header Style2 ---------------------------------------*/ .main-header-style2 { - position: relative; + position: relative; } .main-header-style2__top { - position: relative; - display: block; - background-color: #090d30; - padding: 7px 0 8px; + position: relative; + display: block; + background-color: #090d30; + padding: 7px 0 8px; } .main-header-style2__top-inner { - position: relative; - display: flex; - flex-direction: row; - justify-content: space-between; - align-items: center; - flex-wrap: wrap; + position: relative; + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; + flex-wrap: wrap; } .main-header-style2-top-left { - position: relative; - display: flex; - align-items: center; + position: relative; + display: flex; + align-items: center; } .phone-number-box-style2 { - position: relative; - display: block; + position: relative; + display: block; } .phone-number-box-style2 h3 { - color: #ffffff; - font-size: 18px; - line-height: 24px; - font-weight: 600; - font-family: var(--thm-font); + color: #ffffff; + font-size: 18px; + line-height: 24px; + font-weight: 600; + font-family: var(--thm-font); } .phone-number-box-style2 h3 a { - color: #ffffff; - font-size: 20px; - font-weight: 600; - transition: all 200ms linear; - transition-delay: 0.1s; + color: #ffffff; + font-size: 20px; + font-weight: 600; + transition: all 200ms linear; + transition-delay: 0.1s; } .phone-number-box-style2 h3 a:hover { - color: var(--thm-base); + color: var(--thm-base); } .consultation-box { - position: relative; - display: block; - padding-left: 50px; + position: relative; + display: block; + padding-left: 50px; } .consultation-box::before { - content: ""; - position: absolute; - top: -12px; - left: 30px; - bottom: -12px; - width: 1px; - background-color: #ffffff; - opacity: 0.3; + content: ""; + position: absolute; + top: -12px; + left: 30px; + bottom: -12px; + width: 1px; + background-color: #ffffff; + opacity: 0.3; } .consultation-box p { - color: #ffffff; - font-size: 18px; - line-height: 26px; - font-weight: 500; + color: #ffffff; + font-size: 18px; + line-height: 26px; + font-weight: 500; } .consultation-box p a { - position: relative; - display: inline-block; - color: var(--thm-base); - font-weight: 700; - transition: all 200ms linear; - transition-delay: 0.1s; - margin-left: 11px; + position: relative; + display: inline-block; + color: var(--thm-base); + font-weight: 700; + transition: all 200ms linear; + transition-delay: 0.1s; + margin-left: 11px; } .consultation-box p a:before { - content: ""; - position: absolute; - left: 0; - bottom: 3px; - right: 0; - height: 1px; - background-color: var(--thm-base); + content: ""; + position: absolute; + left: 0; + bottom: 3px; + right: 0; + height: 1px; + background-color: var(--thm-base); } .consultation-box p a:hover { - color: #ffffff; + color: #ffffff; } .svg-container img { - padding-top: 5px; - padding-bottom: 5px; - width: 130px; + padding-top: 5px; + padding-bottom: 5px; + width: 130px; } .main-header-style2-top-right { - position: relative; - display: flex; - align-items: center; + position: relative; + display: flex; + align-items: center; } .header-social-link-style1 { - position: relative; - display: block; - padding-right: 60px; + position: relative; + display: block; + padding-right: 60px; } .header-social-link-style1:before { - content: ""; - position: absolute; - top: -11px; - right: 30px; - bottom: -11px; - width: 1px; - background-color: #ffffff; - opacity: 0.3; + content: ""; + position: absolute; + top: -11px; + right: 30px; + bottom: -11px; + width: 1px; + background-color: #ffffff; + opacity: 0.3; } .header-social-link-style1 ul { - position: relative; - display: block; - overflow: hidden; + position: relative; + display: block; + overflow: hidden; } .header-social-link-style1 ul li { - position: relative; - display: block; - float: left; - margin-right: 30px; + position: relative; + display: block; + float: left; + margin-right: 30px; } .header-social-link-style1 ul li:last-child { - margin-right: 0; + margin-right: 0; } .header-social-link-style1 ul li a { - color: rgba(255, 255, 255, 0.6); - font-size: 16px; - line-height: 20px; - transition: all 200ms linear; - transition-delay: 0.1s; + color: rgba(255, 255, 255, 0.6); + font-size: 16px; + line-height: 20px; + transition: all 200ms linear; + transition-delay: 0.1s; } .header-social-link-style1 ul li a:hover { - color: var(--thm-base); + color: var(--thm-base); } .main-menu-style2 { - position: relative; - display: block; - background-color: #ffffff; + position: relative; + display: block; + background-color: #ffffff; } .main-menu-style2 .main-menu__wrapper-inner { - position: relative; - display: flex; - flex-direction: row; - justify-content: space-between; - align-items: center; - flex-wrap: wrap; - z-index: 10; + position: relative; + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; + flex-wrap: wrap; + z-index: 10; } .main-menu-style2-left { - position: relative; - display: block; + position: relative; + display: block; } .main-menu-style2-right { - position: relative; - display: flex; - align-items: center; + position: relative; + display: flex; + align-items: center; } .main-menu-style2 .main-menu__list > li { - padding-top: 40px; - padding-bottom: 40px; + padding-top: 40px; + padding-bottom: 40px; } .main-menu-style2 .main-menu__list > li > a { - color: #000000; + color: #000000; } .main-menu-style2 .main-menu__list > li.current > a, .main-menu-style2 .main-menu__list > li:hover > a { - color: var(--thm-base); + color: var(--thm-base); } .main-menu-style2-right .box-search-style1 a { - color: #000000; + color: #000000; } .side-content-button-style2 { - position: relative; - display: block; - margin-left: 20px; + position: relative; + display: block; + margin-left: 20px; } .side-content-button-style2 a { - position: relative; - display: flex; - align-items: flex-end; - justify-content: center; - flex-direction: column; - width: 50px; - height: 50px; - background-color: var(--thm-primary); - border-radius: 50%; - padding-right: 15px; - transition: all 500ms ease; + position: relative; + display: flex; + align-items: flex-end; + justify-content: center; + flex-direction: column; + width: 50px; + height: 50px; + background-color: var(--thm-primary); + border-radius: 50%; + padding-right: 15px; + transition: all 500ms ease; } .side-content-button-style2 a:hover { - background-color: var(--thm-base); + background-color: var(--thm-base); } .side-content-button-style2 a .line { - position: relative; - display: block; - width: 10px; - height: 2px; - background-color: #ffffff; - margin: 3px 0; - transition: all 500ms ease; + position: relative; + display: block; + width: 10px; + height: 2px; + background-color: #ffffff; + margin: 3px 0; + transition: all 500ms ease; } .side-content-button-style2 a:hover .line { - position: relative; + position: relative; } .side-content-button-style2 a .line.two { - width: 20px; - transition: all 300ms ease; + width: 20px; + transition: all 300ms ease; } .side-content-button-style2 a:hover .line { - width: 20px; + width: 20px; } .stricky-header--style2.main-menu { - background-color: #ffffff; + background-color: #ffffff; } .stricky-header--style2 .main-menu__wrapper { - background-color: #ffffff; + background-color: #ffffff; } .stricky-header--style2 .main-menu__wrapper-inner { - background-color: #ffffff; - justify-content: space-between; + background-color: #ffffff; + justify-content: space-between; } .stricky-header--style2 .main-menu__list > li > a { - color: #000000; + color: #000000; } .stricky-header--style2 .main-menu__wrapper-inner .box-search-style1 { - display: block; + display: block; } /*---------------------------------------- Main Header Style3 ---------------------------------------*/ .main-header-style3 { - position: absolute; - top: 0; - left: 0; + position: absolute; + top: 0; + left: 0; } .main-header-style3 .main-menu-style2 { - background-color: transparent; + background-color: transparent; } .main-header-style3 .main-menu-style2 .container { - max-width: 100%; - padding: 0 80px; + max-width: 100%; + padding: 0 80px; } .main-header-style3 .main-menu-style2 .main-menu__list > li { - padding-top: 50px; - padding-bottom: 50px; + padding-top: 50px; + padding-bottom: 50px; } .main-header-style3 .main-menu-style2 .main-menu__list > li > a { - color: #ffffff; + color: #ffffff; } .main-header-style3 .main-menu-style2 .main-menu__list > li.current > a, .main-header-style3 .main-menu-style2 .main-menu__list > li:hover > a { - color: var(--thm-base); + color: var(--thm-base); } .main-header-style3 .main-menu-style2-right .box-search-style1 a { - color: #ffffff; + color: #ffffff; } .main-header-style3 .main-menu-style2-right .side-content-button-style2 a { - border: 1px solid #ffffff; - background-color: transparent; + border: 1px solid #ffffff; + background-color: transparent; } .stricky-header--style3.main-menu { - background-color: #090d30; + background-color: #090d30; } .stricky-header--style3 .main-menu__wrapper { - background-color: #090d30; + background-color: #090d30; } .stricky-header--style3 .main-menu__wrapper-inner { - background-color: #090d30; - justify-content: space-between; + background-color: #090d30; + justify-content: space-between; } .stricky-header--style3 .main-menu__list > li > a { - color: #ffffff; + color: #ffffff; } .stricky-header--style3 .main-menu__wrapper-inner .box-search-style1 { - display: block; + display: block; } .stricky-header--style3 .main-menu-style2-right .box-search-style1 a { - color: #ffffff; + color: #ffffff; } /*---------------------------------------- Main Header Style4 ---------------------------------------*/ .main-header-style4 { - position: relative; - display: block; + position: relative; + display: block; } .main-header-style4 .main-header-style2__top { - background-color: oklch(0.444 0.177 26.899); + background-color: #0b67b4; } .main-header-style4 .main-menu-style2 { - background-color: transparent; + background-color: transparent; } .main-header-style4 .main-menu-style2:before { - content: ""; - position: absolute; - top: 0; - left: 0; - right: 0; - z-index: -1; + content: ""; + position: absolute; + top: 0; + left: 0; + right: 0; + z-index: -1; } .main-header-style4 .main-menu-style2 .main-menu__wrapper-inner { - background-color: #ffffff; - border-radius: 10px; - padding: 0 20px; + background-color: #ffffff; + border-radius: 10px; + padding: 0 20px; } .main-header-style4 .consultation-box::before { - top: 0px; - bottom: 0px; + top: 0px; + bottom: 0px; } .main-header-style4 .header-social-link-style1:before { - top: 1px; - bottom: 1px; + top: 1px; + bottom: 1px; } .main-header-style4 .main-menu-style2-right .side-content-button-style2 a { - border: 1px solid #000000; - background-color: transparent; + border: 1px solid #000000; + background-color: transparent; } -.main-header-style4 .main-menu-style2-right .side-content-button-style2 a .line { - background-color: #000000; +.main-header-style4 + .main-menu-style2-right + .side-content-button-style2 + a + .line { + background-color: #000000; } .stricky-header--style4.main-menu { - background-color: #ffffff; + background-color: #ffffff; } .stricky-header--style4 .main-menu__wrapper { - background-color: #ffffff; + background-color: #ffffff; } .stricky-header--style4 .main-menu__wrapper-inner { - background-color: #ffffff; - justify-content: space-between; + background-color: #ffffff; + justify-content: space-between; } .stricky-header--style4 .main-menu__list > li > a { - color: #000000; + color: #000000; } .stricky-header--style4 .main-menu__wrapper-inner .box-search-style1 { - display: block; + display: block; } .stricky-header--style4 .main-menu-style2-right .box-search-style1 a { - color: #000000; + color: #000000; } /*---------------------------------------- Main Header Style5 ---------------------------------------*/ .main-header-style5 { - position: relative; - display: block; - padding-top: 10px; - margin-bottom: -30px; + position: relative; + display: block; + padding-top: 10px; + margin-bottom: -30px; } .main-header-style5::before { - content: ""; - position: absolute; - top: 0; - left: 0; - bottom: 30px; - right: 0; - background-color: #0a1937; - z-index: -1; + content: ""; + position: absolute; + top: 0; + left: 0; + bottom: 30px; + right: 0; + background-color: #0a1937; + z-index: -1; } .main-header-style5 .border-top-box { - position: absolute; - top: 10px; - left: 0; - right: 0; - height: 1px; - border-bottom: 1px dashed rgba(84, 112, 135, 0.5); + position: absolute; + top: 10px; + left: 0; + right: 0; + height: 1px; + border-bottom: 1px dashed rgba(84, 112, 135, 0.5); } .main-header-style5 .border-bottom-box { - position: absolute; - left: 0; - bottom: 30px; - right: 0; - height: 1px; - border-bottom: 1px dashed rgba(84, 112, 135, 0.5); + position: absolute; + left: 0; + bottom: 30px; + right: 0; + height: 1px; + border-bottom: 1px dashed rgba(84, 112, 135, 0.5); } .main-header-style5__top { - position: relative; - display: block; - padding: 26px 0; + position: relative; + display: block; + padding: 26px 0; } .main-header-style5__top-inner { - position: relative; - display: flex; - flex-direction: row; - justify-content: space-between; - align-items: center; - flex-wrap: wrap; + position: relative; + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; + flex-wrap: wrap; } .main-header-style5-top-left { - position: relative; - display: block; + position: relative; + display: block; } .main-header-style5-top-right { - position: relative; - display: block; + position: relative; + display: block; } .header-contact-info-style1 { - position: relative; - display: block; + position: relative; + display: block; } .header-contact-info-style1 ul { - position: relative; - display: block; - overflow: hidden; + position: relative; + display: block; + overflow: hidden; } .header-contact-info-style1 ul li { - position: relative; - display: flex; - align-items: center; - float: left; - margin-right: 40px; - padding-right: 40px; - padding-top: 4px; - padding-bottom: 4px; + position: relative; + display: flex; + align-items: center; + float: left; + margin-right: 40px; + padding-right: 40px; + padding-top: 4px; + padding-bottom: 4px; } .header-contact-info-style1 ul li:before { - content: ""; - position: absolute; - top: 0; - right: 0; - bottom: 0; - width: 1px; - background-image: -moz-linear-gradient( - 90deg, - rgb(255, 255, 255, 0.05) 5%, - rgb(255, 255, 255, 0.4) 50%, - rgb(255, 255, 255, 0.05) 95% - ); - background-image: -webkit-linear-gradient( - 90deg, - rgb(255, 255, 255, 0.05) 5%, - rgb(255, 255, 255, 0.4) 50%, - rgb(255, 255, 255, 0.05) 95% - ); - background-image: -ms-linear-gradient( - 90deg, - rgb(255, 255, 255, 0.05) 5%, - rgb(255, 255, 255, 0.4) 50%, - rgb(255, 255, 255, 0.05) 95% - ); + content: ""; + position: absolute; + top: 0; + right: 0; + bottom: 0; + width: 1px; + background-image: -moz-linear-gradient( + 90deg, + rgb(255, 255, 255, 0.05) 5%, + rgb(255, 255, 255, 0.4) 50%, + rgb(255, 255, 255, 0.05) 95% + ); + background-image: -webkit-linear-gradient( + 90deg, + rgb(255, 255, 255, 0.05) 5%, + rgb(255, 255, 255, 0.4) 50%, + rgb(255, 255, 255, 0.05) 95% + ); + background-image: -ms-linear-gradient( + 90deg, + rgb(255, 255, 255, 0.05) 5%, + rgb(255, 255, 255, 0.4) 50%, + rgb(255, 255, 255, 0.05) 95% + ); } .header-contact-info-style1 ul li:last-child:before { - display: none; + display: none; } .header-contact-info-style1 ul li:last-child { - padding-right: 0; - margin-right: 0; + padding-right: 0; + margin-right: 0; } .header-contact-info-style1 ul li .icon { - position: relative; - display: block; - width: 60px; + position: relative; + display: block; + width: 60px; } .header-contact-info-style1 ul li .icon span { - position: relative; - display: block; - line-height: 0; + position: relative; + display: block; + line-height: 0; } .header-contact-info-style1 ul li .icon span:before { - position: relative; - display: inline-block; - color: #e5b90a; - font-size: 40px; - line-height: 40px; - font-weight: 400; + position: relative; + display: inline-block; + color: #e5b90a; + font-size: 40px; + line-height: 40px; + font-weight: 400; } .header-contact-info-style1 ul li .text { - position: relative; - display: block; - flex: 1; + position: relative; + display: block; + flex: 1; } .header-contact-info-style1 ul li .text p { - color: #ffffff; - font-size: 18px; - line-height: 20px; - font-weight: 500; - margin: 0 0 6px; + color: #ffffff; + font-size: 18px; + line-height: 20px; + font-weight: 500; + margin: 0 0 6px; } .header-contact-info-style1 ul li .text a { - color: #d6d5e8; - font-size: 20px; - font-weight: 400; - transition: all 200ms linear; - transition-delay: 0.1s; + color: #d6d5e8; + font-size: 20px; + font-weight: 400; + transition: all 200ms linear; + transition-delay: 0.1s; } .header-contact-info-style1 ul li:last-child .text a { - color: #f22c39; - font-size: 28px; - font-weight: 600; + color: #f22c39; + font-size: 28px; + font-weight: 600; } .header-contact-info-style1 ul li .text a:hover { - color: var(--thm-base); + color: var(--thm-base); } .main-menu-style5 { - position: relative; - display: block; - background-color: transparent; + position: relative; + display: block; + background-color: transparent; } .main-menu-style5 .main-menu__wrapper-inner { - position: relative; - display: flex; - flex-direction: row; - justify-content: space-between; - align-items: center; - flex-wrap: wrap; - padding-right: 20px; - border-radius: 5px; - z-index: 10; + position: relative; + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; + flex-wrap: wrap; + padding-right: 20px; + border-radius: 5px; + z-index: 10; } .main-menu-style5 .main-menu__wrapper-inner .bg { - position: absolute; - top: 0; - left: 0; - bottom: 0; - right: 0; - background-attachment: scroll; - background-repeat: repeat-x; - background-size: contain; - border-radius: 5px; - z-index: -1; + position: absolute; + top: 0; + left: 0; + bottom: 0; + right: 0; + background-attachment: scroll; + background-repeat: repeat-x; + background-size: contain; + border-radius: 5px; + z-index: -1; } .main-menu-style5-left { - position: relative; - display: block; + position: relative; + display: block; } .main-header-style5 .main-menu-style5 .main-menu__list > li { - position: relative; - padding-top: 21px; - padding-bottom: 21px; - padding-left: 35px; - padding-right: 35px; - margin: 0; + position: relative; + padding-top: 21px; + padding-bottom: 21px; + padding-left: 35px; + padding-right: 35px; + margin: 0; } .main-header-style5 .main-menu-style5 .main-menu__list > li:before { - content: ""; - position: absolute; - top: 15px; - left: 0; - bottom: 15px; - width: 1px; - background-color: #cccccd; + content: ""; + position: absolute; + top: 15px; + left: 0; + bottom: 15px; + width: 1px; + background-color: #cccccd; } -.main-header-style5 .main-menu-style5 .main-menu__list > li:first-child::before { - display: none; +.main-header-style5 + .main-menu-style5 + .main-menu__list + > li:first-child::before { + display: none; } .main-header-style5 .main-menu-style5 .main-menu__list > li:last-child::after { - display: none; + display: none; } .main-header-style5 .main-menu-style5 .main-menu__list > li:after { - content: ""; - position: absolute; - top: 15px; - right: 0; - bottom: 15px; - width: 1px; - background-color: #ffffff; + content: ""; + position: absolute; + top: 15px; + right: 0; + bottom: 15px; + width: 1px; + background-color: #ffffff; } .main-header-style5 .main-menu-style5 .main-menu__list > li > a { - color: #000000; + color: #000000; } .main-header-style5 .main-menu-style5 .main-menu__list > li.current > a, .main-header-style5 .main-menu-style5 .main-menu__list > li:hover > a { - color: var(--thm-base); + color: var(--thm-base); } .main-header-style5 .main-menu-style5 .box-search-style1 a { - color: #000000; + color: #000000; } .main-menu-style5-right { - position: relative; - display: flex; - align-items: center; + position: relative; + display: flex; + align-items: center; } .main-menu-style5-right .side-content-button-style2 a { - width: 45px; - height: 45px; - padding-right: 11px; - background-color: transparent; - border: 1px solid #000000; + width: 45px; + height: 45px; + padding-right: 11px; + background-color: transparent; + border: 1px solid #000000; } .main-menu-style5-right .side-content-button-style2 a .line { - background-color: #000000; + background-color: #000000; } .stricky-header--style5 .main-menu-style5-left { - margin-right: auto; + margin-right: auto; } .stricky-header--style5 .main-menu-style5-right .side-content-button-style2 a { - border-color: #ffffff; + border-color: #ffffff; } -.stricky-header--style5 .main-menu-style5-right .side-content-button-style2 a .line { - background-color: #ffffff; +.stricky-header--style5 + .main-menu-style5-right + .side-content-button-style2 + a + .line { + background-color: #ffffff; } /*---------------------------------------- Main Header Style6 ---------------------------------------*/ .main-header-style6 { - position: absolute; - top: 40px; - left: 0; - width: 100%; + position: absolute; + top: 40px; + left: 0; + width: 100%; } .main-menu-style6 .main-menu__wrapper .container { - max-width: 100%; - padding: 0 80px; + max-width: 100%; + padding: 0 80px; } .main-menu-style6 .main-menu__wrapper-inner { - position: relative; - display: flex; - flex-direction: row; - justify-content: space-between; - align-items: center; - flex-wrap: wrap; - background-color: #ffffff; - padding: 0 30px; - border-radius: 5px; + position: relative; + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; + flex-wrap: wrap; + background-color: #ffffff; + padding: 0 30px; + border-radius: 5px; } .main-menu-style6 .main-menu__wrapper-inner:before { - content: ""; - position: absolute; - left: 20px; - bottom: -10px; - right: 20px; - height: 10px; - background-color: #ffffff; - opacity: 0.2; - border-bottom-left-radius: 5px; - border-bottom-right-radius: 5px; + content: ""; + position: absolute; + left: 20px; + bottom: -10px; + right: 20px; + height: 10px; + background-color: #ffffff; + opacity: 0.2; + border-bottom-left-radius: 5px; + border-bottom-right-radius: 5px; } .main-menu-style6-left { - position: relative; - display: flex; - align-items: center; + position: relative; + display: flex; + align-items: center; } .main-menu-style6-left .main-menu-box { - display: flex; - align-items: center; - float: left; - margin-right: auto; - margin-left: 120px; + display: flex; + align-items: center; + float: left; + margin-right: auto; + margin-left: 120px; } .main-header-style6 .main-menu-style6 .main-menu__list > li { - padding-top: 30px; - padding-bottom: 30px; + padding-top: 30px; + padding-bottom: 30px; } .main-header-style6 .main-menu-style6 .main-menu__list > li > a { - color: #000000; + color: #000000; } .main-header-style6 .main-menu-style6 .main-menu__list > li.current > a, .main-header-style6 .main-menu-style6 .main-menu__list > li:hover > a { - color: var(--thm-base); + color: var(--thm-base); } .main-header-style6 .main-menu-style6 .box-search-style1 { - margin-left: 27px; - margin-right: 0; + margin-left: 27px; + margin-right: 0; } .main-header-style6 .main-menu-style6 .box-search-style1 a { - color: #000000; + color: #000000; } .main-header-style6 .main-menu-style6 .side-content-button-style2 a { - border: 1px solid #000000; - background-color: transparent; - margin-left: 20px; - width: 45px; - height: 45px; - padding-right: 11px; + border: 1px solid #000000; + background-color: transparent; + margin-left: 20px; + width: 45px; + height: 45px; + padding-right: 11px; } .main-header-style6 .main-menu-style6 .side-content-button-style2 a .line { - background-color: #000000; + background-color: #000000; } .main-menu-style6-right { - position: relative; - display: flex; - align-items: center; + position: relative; + display: flex; + align-items: center; } .phone-number-box-style1--instyle2 { - margin-left: 0px; - padding-left: 0px; + margin-left: 0px; + padding-left: 0px; } .phone-number-box-style1--instyle2:before { - display: none; + display: none; } .phone-number-box-style1--instyle2 .icon { - width: 45px; - color: var(--thm-base); - font-size: 35px; + width: 45px; + color: var(--thm-base); + font-size: 35px; } .phone-number-box-style1--instyle2 .icon span { - font-weight: 400; + font-weight: 400; } .phone-number-box-style1--instyle2 h5 { - color: var(--thm-gray); - font-size: 14px; - line-height: 14px; - font-weight: 700; - text-transform: uppercase; - margin: 0 0 1px; + color: var(--thm-gray); + font-size: 14px; + line-height: 14px; + font-weight: 700; + text-transform: uppercase; + margin: 0 0 1px; } .phone-number-box-style1--instyle2 a { - color: var(--thm-black); - font-size: 20px; - font-weight: 600; - font-family: var(--thm-font)-2; + color: var(--thm-black); + font-size: 20px; + font-weight: 600; + font-family: var(--thm-font)-2; } .main-menu-style6-right .btn-box { - position: relative; - display: block; - line-height: 0; - margin-left: 30px; + position: relative; + display: block; + line-height: 0; + margin-left: 30px; } .main-menu-style6-right .btn-box a { - line-height: 50px; - padding: 0 30px; + line-height: 50px; + padding: 0 30px; } .stricky-header--style6.main-menu { - background-color: #ffffff; + background-color: #ffffff; } .stricky-header--style6 .main-menu__wrapper { - background-color: #ffffff; + background-color: #ffffff; } .stricky-header--style6 .main-menu__wrapper-inner { - background-color: #ffffff; - justify-content: space-between; + background-color: #ffffff; + justify-content: space-between; } .stricky-header--style6 .main-menu__list > li > a { - color: #000000; + color: #000000; } .stricky-header--style6 .main-menu__wrapper-inner .box-search-style1 { - display: none; + display: none; } .stricky-header--style6 .main-menu__wrapper-inner .main-menu-style6-left { - display: flex; - flex-direction: row; - justify-content: space-between; - align-items: center; - width: 100%; + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; + width: 100%; } -.stricky-header--style6 .main-menu__wrapper-inner .main-menu-style6-left .main-menu-box { - display: flex; - align-items: center; - float: right; - margin-right: 0; - margin-left: auto; +.stricky-header--style6 + .main-menu__wrapper-inner + .main-menu-style6-left + .main-menu-box { + display: flex; + align-items: center; + float: right; + margin-right: 0; + margin-left: auto; } .stricky-header--style6 .main-menu__wrapper-inner .main-menu-style6-right { - display: none; + display: none; } -.stricky-header--style6 .main-menu__wrapper-inner .side-content-button-style2 a { - display: none; +.stricky-header--style6 + .main-menu__wrapper-inner + .side-content-button-style2 + a { + display: none; } diff --git a/assets/css/module-css/07-footer-section.css b/assets/css/module-css/07-footer-section.css index 518d208..dd47fa6 100644 --- a/assets/css/module-css/07-footer-section.css +++ b/assets/css/module-css/07-footer-section.css @@ -4,23 +4,23 @@ ============================================= ***/ .bottom-parallax { - position: relative; - height: 525px; - opacity: 0; - z-index: -999; + position: relative; + height: 525px; + opacity: 0; + z-index: -999; } .bottom-parallax .footer-area { - position: fixed; - left: 0px; - bottom: 0px; - right: 0px; - height: 525px; + position: fixed; + left: 0px; + bottom: 0px; + right: 0px; + height: 525px; } .parallax-visible .bottom-parallax { - opacity: 1; - z-index: 1; + opacity: 1; + z-index: 1; } /*** @@ -29,369 +29,372 @@ ============================================= ***/ .footer-area { - position: relative; - display: block; - background: rgb(247, 247, 247); - z-index: 10; + position: relative; + display: block; + background: rgb(247, 247, 247); + z-index: 10; } .footer-top { - position: relative; - display: block; - z-index: 1; + position: relative; + display: block; + z-index: 1; } .footer-top__bg { - position: absolute; - top: 0; - left: 0; - bottom: 0; - right: 0; - background-attachment: scroll; - background-repeat: repeat; - background-size: cover; - background-color: oklch(0.444 0.177 26.899); - background-blend-mode: multiply; - opacity: 0.85; - z-index: -1; + position: absolute; + top: 0; + left: 0; + bottom: 0; + right: 0; + background-attachment: scroll; + background-repeat: repeat; + background-size: cover; + background-color: #0b67b4; + background-blend-mode: multiply; + opacity: 0.85; + z-index: -1; } .footer-top__inner { - position: relative; - display: block; + position: relative; + display: block; } .footer-contact-info-box1 { - position: relative; - display: flex; - flex-wrap: wrap; + position: relative; + display: flex; + flex-wrap: wrap; } .footer-contact-info-box1 li { - flex: 0 0 auto; - width: 33.3333333333%; - padding: 20px 0; + flex: 0 0 auto; + width: 33.3333333333%; + padding: 20px 0; } .footer-contact-info-box1 li + li { - border-left: 1px solid rgba(255, 255, 255, 0.1); - padding-left: 60px; + border-left: 1px solid rgba(255, 255, 255, 0.1); + padding-left: 60px; } .footer-contact-info-box1__single { - position: relative; - display: flex; - align-items: center; + position: relative; + display: flex; + align-items: center; } .footer-contact-info-box1__single .icon { - position: relative; - display: flex; - align-items: center; - justify-content: center; - overflow: hidden; - width: 60px; - height: 60px; - background-color: rgba(255, 255, 255, 0.05); - border-radius: 8px; - color: #fff; - font-size: 30px; - z-index: 1; + position: relative; + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + width: 60px; + height: 60px; + background-color: rgba(255, 255, 255, 0.05); + border-radius: 8px; + color: #fff; + font-size: 30px; + z-index: 1; } .footer-contact-info-box1__single .icon.map { - font-size: 34px; + font-size: 34px; } .footer-contact-info-box1__single .icon:before { - content: ""; - position: absolute; - top: 0; - left: 0; - bottom: 0px; - right: 0; - border-radius: 8px; - background-color: var(--thm-base); - transition: -webkit-transform 0.4s ease; - transition: transform 0.4s ease; - transition: transform 0.4s ease, -webkit-transform 0.4s ease; - transform-origin: top right; - -webkit-transform: scale(1, 0); - transform: scale(1, 0); - z-index: -1; + content: ""; + position: absolute; + top: 0; + left: 0; + bottom: 0px; + right: 0; + border-radius: 8px; + background-color: var(--thm-base); + transition: -webkit-transform 0.4s ease; + transition: transform 0.4s ease; + transition: transform 0.4s ease, -webkit-transform 0.4s ease; + transform-origin: top right; + -webkit-transform: scale(1, 0); + transform: scale(1, 0); + z-index: -1; } -.footer-contact-info-box1 li:hover .footer-contact-info-box1__single .icon:before { - -webkit-transform: scale(1, 1); - transform: scale(1, 1); - transform-origin: bottom center; +.footer-contact-info-box1 + li:hover + .footer-contact-info-box1__single + .icon:before { + -webkit-transform: scale(1, 1); + transform: scale(1, 1); + transform-origin: bottom center; } .footer-contact-info-box1__single .text { - position: relative; - margin-left: 25px; - flex: 1; + position: relative; + margin-left: 25px; + flex: 1; } .footer-contact-info-box1__single .text p { - color: #ffffff; - line-height: 24px; + color: #ffffff; + line-height: 24px; } .footer-contact-info-box1__single .text h5 { - font-size: 18px; - line-height: 20px; - font-weight: 500; - font-family: var(--thm-font-2); - margin: 7px 0 0; + font-size: 18px; + line-height: 20px; + font-weight: 500; + font-family: var(--thm-font-2); + margin: 7px 0 0; } .footer-contact-info-box1__single .text h5 a { - color: #ffffff; - transition: all 200ms linear; - transition-delay: 0.1s; + color: #ffffff; + transition: all 200ms linear; + transition-delay: 0.1s; } .footer-contact-info-box1__single .text h5 a:hover { - color: var(--thm-base); + color: var(--thm-base); } .footer-main { - position: relative; - display: block; - padding-top: 60px; - padding-bottom: 1px; + position: relative; + display: block; + padding-top: 60px; + padding-bottom: 1px; } .single-footer-widget .title { - position: relative; - display: block; - margin-top: -2px; - padding-top: 9px; + position: relative; + display: block; + margin-top: -2px; + padding-top: 9px; } .single-footer-widget .title h3 { - color: black; - font-size: 20px; - line-height: 20px; - font-weight: 600; - text-transform: capitalize; + color: black; + font-size: 20px; + line-height: 20px; + font-weight: 600; + text-transform: capitalize; } .footer-main .single-widget { - margin-bottom: 44px; + margin-bottom: 44px; } .single-footer-widget { - position: relative; - display: block; + position: relative; + display: block; } .single-footer-widget.margin-leftminus1 { - margin-left: -40px; + margin-left: -40px; } .single-footer-widget .our-company-info { - position: relative; - display: block; - padding-right: 110px; + position: relative; + display: block; + padding-right: 110px; } .footer-logo-style1 { - position: relative; - display: block; - padding-bottom: 30px; + position: relative; + display: block; + padding-bottom: 30px; } .footer-logo-style1 a { - position: relative; - display: inline-block; - max-height: 60px; + position: relative; + display: inline-block; + max-height: 60px; } .single-footer-widget .our-company-info .text { - position: relative; - display: block; + position: relative; + display: block; } .single-footer-widget .our-company-info .text p { - margin-top: 25px; - color: #bcc1c9; - font-size: 17px; - line-height: 28px; + margin-top: 25px; + color: #bcc1c9; + font-size: 17px; + line-height: 28px; } .footer-social-link { - position: relative; - display: block; - padding-top: 33px; + position: relative; + display: block; + padding-top: 33px; } .footer-social-link ul { - position: relative; - display: block; + position: relative; + display: block; } .footer-social-link ul li { - position: relative; - float: left; - margin-right: 10px; + position: relative; + float: left; + margin-right: 10px; } .footer-social-link ul li:last-child { - margin-right: 0; + margin-right: 0; } .footer-social-link ul li a { - position: relative; - display: flex; - align-items: center; - justify-content: center; - height: 40px; - width: 40px; - background: transparent; - border: 1px solid #bcc1c9; - border-radius: 50%; - color: #bcc1c9; - font-size: 16px; - text-align: center; - transition: all 200ms linear; - transition-delay: 0.1s; - z-index: 1; + position: relative; + display: flex; + align-items: center; + justify-content: center; + height: 40px; + width: 40px; + background: transparent; + border: 1px solid #bcc1c9; + border-radius: 50%; + color: #bcc1c9; + font-size: 16px; + text-align: center; + transition: all 200ms linear; + transition-delay: 0.1s; + z-index: 1; } .footer-social-link ul li a:before { - position: absolute; - top: 0px; - left: 0px; - bottom: 0px; - right: 0px; - background: transparent; - border: 1px solid var(--thm-base); - border-radius: 50%; - content: ""; - opacity: 0; - transform: scale(0.5); - transform-style: preserve-3d; - transition: all 0.4s cubic-bezier(0.62, 0.21, 0.45, 1.52); - z-index: -1; + position: absolute; + top: 0px; + left: 0px; + bottom: 0px; + right: 0px; + background: transparent; + border: 1px solid var(--thm-base); + border-radius: 50%; + content: ""; + opacity: 0; + transform: scale(0.5); + transform-style: preserve-3d; + transition: all 0.4s cubic-bezier(0.62, 0.21, 0.45, 1.52); + z-index: -1; } .footer-social-link ul li:hover a:before { - opacity: 1; - transform: scale(1); + opacity: 1; + transform: scale(1); } .footer-social-link ul li:hover a { - color: var(--thm-base); - border-color: var(--thm-base); + color: var(--thm-base); + border-color: var(--thm-base); } .footer-widget-links { - position: relative; - display: block; - overflow: hidden; - padding-top: 29px; + position: relative; + display: block; + overflow: hidden; + padding-top: 29px; } .single-footer-widget--link-box { - position: relative; + position: relative; } .footer-widget-links ul { - position: relative; - display: block; - overflow: hidden; + position: relative; + display: block; + overflow: hidden; } .footer-widget-links ul li { - position: relative; - display: block; - line-height: 26px; - margin-bottom: 11px; + position: relative; + display: block; + line-height: 26px; + margin-bottom: 11px; } .footer-widget-links ul li:last-child { - margin-bottom: 0; + margin-bottom: 0; } .footer-widget-links ul li a { - position: relative; - display: inline-block; - color: black; - font-size: 17px; - font-weight: 400; - font-family: var(--thm-font); - transition: all 100ms linear; - transition-delay: 0.1s; + position: relative; + display: inline-block; + color: black; + font-size: 17px; + font-weight: 400; + font-family: var(--thm-font); + transition: all 100ms linear; + transition-delay: 0.1s; } .footer-widget-links ul li a:hover { - color: #d90429; - padding-left: 2px; + color: #d90429; + padding-left: 2px; } .single-footer-widget__img-box { - position: relative; - display: block; - margin-top: 30px; - margin-left: -40px; + position: relative; + display: block; + margin-top: 30px; + margin-left: -40px; } .footer-bottom { - position: relative; - display: block; + position: relative; + display: block; } .footer-bottom .bottom-inner { - position: relative; - display: flex; - flex-direction: row; - justify-content: space-between; - align-items: center; - flex-wrap: wrap; - padding: 25px 0px 26px; - border-top: 1px solid rgba(255, 255, 255, 0.1); + position: relative; + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; + flex-wrap: wrap; + padding: 25px 0px 26px; + border-top: 1px solid rgba(255, 255, 255, 0.1); } .copyright-text { - position: relative; - display: block; + position: relative; + display: block; } .copyright-text p { - color: black; - font-size: 16px; + color: black; + font-size: 16px; } .copyright-text p a { - color: black; - font-weight: 500; - transition: all 300ms ease 100ms; + color: black; + font-weight: 500; + transition: all 300ms ease 100ms; } .copyright-text p a:hover { - color: #d90429; + color: #d90429; } .footer-bottom-right { - position: relative; - display: block; + position: relative; + display: block; } .footer-bottom-right p { - color: black; - font-size: 16px; + color: black; + font-size: 16px; } .footer-bottom-right p a { - color: black; - font-weight: 500; - transition: all 300ms ease 100ms; + color: black; + font-weight: 500; + transition: all 300ms ease 100ms; } .footer-bottom-right p a:hover { - color: #d90429; + color: #d90429; } /*** @@ -400,60 +403,60 @@ ============================================= ***/ .footer-area--style2 { - background: #1d1d1d; + background: #1d1d1d; } .footer-area--style2 .footer-top__bg { - background-color: #480202; + background-color: #480202; } .footer-area--style2 .single-footer-widget .our-company-info .text p { - color: #a2a2a2; + color: #a2a2a2; } .footer-area--style2 .footer-widget-links ul li a { - color: #a2a2a2; + color: #a2a2a2; } .footer-area--style2 .footer-widget-links ul li a:hover { - color: #ffffff; + color: #ffffff; } .footer-area--style2 .footer-social-link ul li a { - border: 1px solid #a2a2a2; - color: #a2a2a2; + border: 1px solid #a2a2a2; + color: #a2a2a2; } .footer-area--style2 .footer-social-link ul li a:before { - top: -2px; - left: -2px; - bottom: -2px; - right: -2px; - border: 3px solid var(--thm-base); + top: -2px; + left: -2px; + bottom: -2px; + right: -2px; + border: 3px solid var(--thm-base); } .footer-area--style2 .footer-social-link ul li a:hover { - color: #ffffff; + color: #ffffff; } .footer-area--style2 .copyright-text p { - color: #a2a2a2; + color: #a2a2a2; } .footer-area--style2 .copyright-text p a { - color: #a2a2a2; + color: #a2a2a2; } .footer-area--style2 .footer-bottom-right p { - color: #a2a2a2; + color: #a2a2a2; } .footer-area--style2 .footer-bottom-right p a { - color: #a2a2a2; + color: #a2a2a2; } .footer-logo-style1 img { - width: 50%; + width: 50%; } - + /** End Css **/ diff --git a/assets/images/home/ac1.jpg b/assets/images/home/ac1.jpg new file mode 100644 index 0000000..499bf3e Binary files /dev/null and b/assets/images/home/ac1.jpg differ diff --git a/assets/images/home/ac2.jpg b/assets/images/home/ac2.jpg new file mode 100644 index 0000000..30b78e7 Binary files /dev/null and b/assets/images/home/ac2.jpg differ diff --git a/assets/images/home/ac3.jpg b/assets/images/home/ac3.jpg new file mode 100644 index 0000000..e82c513 Binary files /dev/null and b/assets/images/home/ac3.jpg differ diff --git a/assets/images/home/ac4.jpg b/assets/images/home/ac4.jpg new file mode 100644 index 0000000..94c5ec5 Binary files /dev/null and b/assets/images/home/ac4.jpg differ diff --git a/assets/images/home/ac5.jpg b/assets/images/home/ac5.jpg new file mode 100644 index 0000000..6ae363c Binary files /dev/null and b/assets/images/home/ac5.jpg differ diff --git a/assets/images/home/home1.jpg b/assets/images/home/home1.jpg new file mode 100644 index 0000000..ccdfba7 Binary files /dev/null and b/assets/images/home/home1.jpg differ diff --git a/assets/images/home/home2.jpg b/assets/images/home/home2.jpg new file mode 100644 index 0000000..5f5f16e Binary files /dev/null and b/assets/images/home/home2.jpg differ diff --git a/assets/images/home/home3.jpg b/assets/images/home/home3.jpg new file mode 100644 index 0000000..32c2904 Binary files /dev/null and b/assets/images/home/home3.jpg differ diff --git a/assets/images/home/home4.jpg b/assets/images/home/home4.jpg new file mode 100644 index 0000000..356f528 Binary files /dev/null and b/assets/images/home/home4.jpg differ diff --git a/assets/images/home/home5.jpg b/assets/images/home/home5.jpg new file mode 100644 index 0000000..656bafd Binary files /dev/null and b/assets/images/home/home5.jpg differ diff --git a/assets/images/home/repair.jpg b/assets/images/home/repair.jpg new file mode 100644 index 0000000..8f01663 Binary files /dev/null and b/assets/images/home/repair.jpg differ diff --git a/assets/images/home/repair2.jpg b/assets/images/home/repair2.jpg new file mode 100644 index 0000000..4967681 Binary files /dev/null and b/assets/images/home/repair2.jpg differ diff --git a/blog-detail.html b/blog-detail.html index fd79952..c011902 100644 --- a/blog-detail.html +++ b/blog-detail.html @@ -8,19 +8,19 @@ diff --git a/blog.html b/blog.html index 8e0bd90..333d18a 100644 --- a/blog.html +++ b/blog.html @@ -8,19 +8,19 @@ diff --git a/commercial-hvac.html b/commercial-hvac.html index bdd0a9a..cf64022 100644 --- a/commercial-hvac.html +++ b/commercial-hvac.html @@ -8,19 +8,19 @@ diff --git a/commercial-plumbing-service.html b/commercial-plumbing-service.html index 5ad0da9..247d95d 100644 --- a/commercial-plumbing-service.html +++ b/commercial-plumbing-service.html @@ -8,19 +8,19 @@ diff --git a/contact-us.html b/contact-us.html index eec803c..fceb37a 100644 --- a/contact-us.html +++ b/contact-us.html @@ -8,19 +8,19 @@ diff --git a/ductless-ac.html b/ductless-ac.html index 3dd7dd9..e353e3e 100644 --- a/ductless-ac.html +++ b/ductless-ac.html @@ -8,19 +8,19 @@ diff --git a/hydro-jetting.html b/hydro-jetting.html index 74bb1b2..bc6a456 100644 --- a/hydro-jetting.html +++ b/hydro-jetting.html @@ -8,19 +8,19 @@ diff --git a/index.html b/index.html index b995120..400439c 100644 --- a/index.html +++ b/index.html @@ -9,19 +9,19 @@ @@ -302,25 +302,24 @@

  • AC Installation
  • AC Maintenance
  • Air Quality Solutions
    • -
  • Ductless AC
    • +
  • Ductless AC
  • Commercial HVAC
    • -
  • - Plumbing Services - +
  • About Us @@ -496,9 +495,9 @@

    • - If you're looking for "heating repair near me" or "plumber near me" and need reliable HVAC and plumbing services in Mesa, AZ, and the surrounding areas, Air & Water Mechanical Inc. is here to assist. Whether you need air conditioning repair, tankless water heater installation, or a comprehensive diagnostic check, our skilled service technicians bring years of experience to every job. + Looking for reliable heating repair or a plumber near me in Mesa, AZ, and nearby areas? Air & Water Mechanical Inc. is here to help. Our skilled technicians provide top-quality service for air conditioning repairs, tankless water heater installations, and more.

    -

    We are a locally owned and operated business committed to providing top-tier service and achieving 100% customer satisfaction. As a trusted Trane Comfort Specialist, we pride ourselves on delivering quality HVAC solutions for your home and business needs.

    +

    As a locally owned business, we’re committed to 100% customer satisfaction. As a Trane Comfort Specialist, we offer trusted HVAC solutions for your home and business needs.

    @@ -670,7 +669,7 @@
    - +

    Schedule Your Inspection! @@ -808,7 +807,7 @@
    - +
    - +
    - +
    - +
    - +
    - +
    @@ -1379,7 +1378,7 @@
    @@ -1391,7 +1390,7 @@
    @@ -1403,7 +1402,7 @@
    @@ -1415,7 +1414,7 @@
    diff --git a/maintenance-program.html b/maintenance-program.html index 6830bae..2c60dc7 100644 --- a/maintenance-program.html +++ b/maintenance-program.html @@ -8,19 +8,19 @@ diff --git a/plumbing-detail.html b/plumbing-detail.html index dac5d79..ad298af 100644 --- a/plumbing-detail.html +++ b/plumbing-detail.html @@ -8,19 +8,19 @@ diff --git a/plumbing-inspection.html b/plumbing-inspection.html index 780da77..5c41c27 100644 --- a/plumbing-inspection.html +++ b/plumbing-inspection.html @@ -8,19 +8,19 @@ diff --git a/plumbing-repair.html b/plumbing-repair.html index 5dddd70..34b11a5 100644 --- a/plumbing-repair.html +++ b/plumbing-repair.html @@ -8,19 +8,19 @@ diff --git a/plumbing.html b/plumbing.html index 2489dcb..3d2b163 100644 --- a/plumbing.html +++ b/plumbing.html @@ -8,19 +8,19 @@ diff --git a/service-area.html b/service-area.html index 9dc2d4e..257025a 100644 --- a/service-area.html +++ b/service-area.html @@ -8,19 +8,19 @@ diff --git a/service-detail.html b/service-detail.html index 073d490..6c23ccb 100644 --- a/service-detail.html +++ b/service-detail.html @@ -8,19 +8,19 @@ @@ -316,7 +316,7 @@
    -

    Images & Videos

    +

    Images

    At Air & Water Mechanical Inc, we understand just how brutal Tucson summers can be. Keeping your home’s air conditioning system in top shape is our priority! No matter the issue, we’ve got the solution to restore your comfort quickly. When your A/C stops working, we’ll be there to save the day. Call us or schedule your service online today, and discover why we’re recognized as one of the best A/C companies in Air & Water Mechanical!

    @@ -324,22 +324,22 @@
    - +
    - +
    - -
    + +
    @@ -719,7 +719,7 @@ const services = { "ac-repair": { header: 'AC Repair', - image: 'assets/images/services/service-7.webp', + image: 'assets/images/home/repair.jpg', title: "Emergency AC Repair Services", description: `When your air conditioner breaks down during Tucson's scorching heat waves, every minute matters. That’s why our NATE-certified technicians are ready to respond quickly, 365 days a year. Whether it's a refrigerant leak or a compressor failure, we’re equipped to tackle it all. With fully-stocked trucks carrying essential replacement parts, we resolve 85% of repairs on the first visit, ensuring you get back to comfort faster. `, features: [ @@ -742,7 +742,7 @@ }, "ac-installation": { header: 'AC Installation', - image: 'assets/images/services/service-8.webp', + image: 'assets/images/home/repair2.jpg', title: "Custom Cooling Solutions Engineered for Tucson Homes", description: `A proper A/C installation is about more than just swapping out equipment—it’s about precision. Our 27-point installation process starts with a Manual J load calculation, ensuring we accurately assess your home’s cooling needs based on factors like window orientation, insulation quality, and local climate patterns. From there, we design a tailored system that fits both your budget and usage habits, whether you’re seeking a high-efficiency inverter system for reliable comfort or a commercial-grade unit for your business.`, features: [ @@ -765,7 +765,7 @@ }, "ac-maintenance": { header: 'AC Maintenance', - image: 'assets/images/services/service-5.webp', + image: 'assets/images/home/home5.jpg', title: "Comprehensive AC Maintenance Plans", description: `Just like changing your car's oil, regular A/C maintenance is essential to prevent 90% of emergency breakdowns while ensuring peak efficiency. Our Gold and Platinum maintenance plans are specifically designed for Tucson’s harsh climate, with a focus on dust filtration and condenser coil care. Every visit includes thorough checks of refrigerant levels, electrical components, and system calibration to ensure your unit can handle seasonal temperature fluctuations.`, features: [ diff --git a/services.html b/services.html index 4eb048c..dc598f8 100644 --- a/services.html +++ b/services.html @@ -8,19 +8,19 @@ diff --git a/slab-leak-detection.html b/slab-leak-detection.html index 3034083..e478341 100644 --- a/slab-leak-detection.html +++ b/slab-leak-detection.html @@ -8,19 +8,19 @@ diff --git a/tankless-water-heaters.html b/tankless-water-heaters.html index 64f6bcb..6c94f2d 100644 --- a/tankless-water-heaters.html +++ b/tankless-water-heaters.html @@ -8,19 +8,19 @@ diff --git a/testimonials.html b/testimonials.html index 71c1a3c..952c744 100644 --- a/testimonials.html +++ b/testimonials.html @@ -8,19 +8,19 @@ diff --git a/under-slab-plumbing.html b/under-slab-plumbing.html index 375c2b4..8d042e9 100644 --- a/under-slab-plumbing.html +++ b/under-slab-plumbing.html @@ -8,19 +8,19 @@ diff --git a/water-heaters.html b/water-heaters.html index 2dba3c0..8fd3a7a 100644 --- a/water-heaters.html +++ b/water-heaters.html @@ -8,19 +8,19 @@