/* Theme Name: Madexry - Factory & Industrial HTML Template Support: themedox@gmail.com Description: Madexry - Factory & Industrial HTML Template. Version: 1.0 */ /* CSS Index ============================ 01. Variable CSS 02. Header 03. Mobile Menu 04. Search 05. OffCanvas 06. Slider 07. Banner 08. Breadcrumb 09. About 10. Services 11. Work 12. Consultation 13. Project 14. Choose 15. Faq 16. Team 17. Counter 18. Brand 19. Testimonial 20. CTA 21. Error 22. Blog 23. Contact 24. Footer 25. Preloader ============================ */ /*============================= 1. Google Fonts ===============================*/ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=Roboto:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap'); /*============================= 01. Variable CSS ===============================*/ :root { --tg-body-font-family: 'Roboto', sans-serif; --tg-heading-font-family: 'Inter', sans-serif; --tg-primary-color: #FF5203; --tg-secondary-color: #22252F; --tg-section-background: #FFF9F6; --tg-body-font-color: #616161; --tg-heading-font-color: #22252F; /* --tg-paragraph-color: #616161; */ --tg-paragraph-color: #464444; --tg-body-font-size: 16px; --tg-body-font-weight: 400; --tg-heading-font-weight: 700; --tg-body-line-height: 1.8; --tg-heading-line-height: 1.2; --tg-blue: #0d6efd; --tg-indigo: #6610f2; --tg-purple: #6f42c1; --tg-pink: #d63384; --tg-red: #dc3545; --tg-orange: #fd7e14; --tg-yellow: #ffc107; --tg-green: #198754; --tg-teal: #20c997; --tg-cyan: #0dcaf0; --tg-white: #ffffff; --tg-gray: #A0A0A0; --tg-gray-two: #737272; --tg-gray-three: #949494; --facebook: #3b5998; --twitter: #00acee; --linkedin: #1976d2; --pinterest: #3b5998; --youtube: #c4302b; --skype: #00aff0; } body { font-family: var(--tg-body-font-family); font-weight: var(--tg-body-font-weight); font-size: var(--tg-body-font-size); line-height: var(--tg-body-line-height); color: var(--tg-body-font-color); font-style: normal; } img, .img { max-width: 100%; transition: all 0.3s ease-out 0s; } .f-left { float: left } .f-right { float: right } .fix { overflow: hidden } a, button { -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; text-decoration: none; } a:focus, .btn:focus, button:focus { text-decoration: none; outline: none; box-shadow: none; } a:hover, .portfolio-cat a:hover, .footer -menu li a:hover { color: var(--tg-primary-color); text-decoration: none; } a, button { color: var(--tg-primary-color); outline: medium none; text-decoration: none; } .btn:focus, button:focus, input:focus, input:focus, textarea, textarea:focus { outline: 0 } .uppercase { text-transform: uppercase; } .capitalize { text-transform: capitalize; } h1, h2, h3, h4, h5, h6 { font-family: var(--tg-heading-font-family); color: var(--tg-heading-font-color); margin-top: 0px; margin-bottom: .7rem; font-style: normal; line-height: var(--tg-heading-line-height); font-weight: var(--tg-heading-font-weight); text-transform: inherit; } h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { color: inherit; } h1 { font-size: 2.5rem; } h2 { font-size: 2rem; } h3 { font-size: 1.75rem; } h4 { font-size: 1.5rem; } h5 { font-size: 1.25rem; } h6 { font-size: 1rem; } .list-wrap { margin: 0px; padding: 0px; } .list-wrap li { list-style: none } p { font-size: var(--tg-body-font-size); font-weight: var(--tg-body-font-weight); line-height: var(--tg-body-line-height); color: var(--tg-paragraph-color); margin-bottom: 15px; } hr { border-bottom: 1px solid var(--tg-primary-color); border-top: 0 none; margin: 30px 0; padding: 0; } label { color: var(--tg-body-font-color); cursor: pointer; font-size: 16px; font-weight: 400; } *::-moz-selection { background: var(--tg-primary-color); color: var(--tg-white); text-shadow: none; } ::-moz-selection { background: var(--tg-primary-color); color: var(--tg-white); text-shadow: none; } ::selection { background: var(--tg-primary-color); color: var(--tg-white); text-shadow: none; } *::-moz-placeholder { color: var(--tg-body-font-color); font-size: var(--tg-body-font-size); opacity: 1; } *::placeholder { color: var(--tg-body-font-color); font-size: var(--tg-body-font-size); opacity: 1; } .theme-overlay { position: relative } .theme-overlay::before { background: var(--tg-primary-color) none repeat scroll 0 0; content: ""; height: 100%; left: 0; opacity: 0.6; position: absolute; top: 0; width: 100%; } .separator { border-top: 1px solid var(--tg-primary-color); } /* Bootstrap 5 */ .container { padding-left: 15px; padding-right: 15px; } .row { --bs-gutter-x: 30px; } .row.g-0 { --bs-gutter-x: 0; } .gutter-y-30 { --bs-gutter-y: 30px; } /*============================= 1. Button style ===============================*/ .btn { user-select: none; -moz-user-select: none; background: var(--tg-primary-color) none repeat scroll 0 0; border: medium none; border-radius: 5px; color: var(--tg-white); cursor: pointer; display: inline-flex; font-size: 15px; font-weight: 700; letter-spacing: 0; line-height: 1; margin-bottom: 0; padding: 18px 34px; text-align: center; text-transform: uppercase; touch-action: manipulation; transition: all 0.3s ease; vertical-align: middle; white-space: nowrap; font-family: var(--tg-heading-font-family); position: relative; z-index: 1; overflow: hidden; } .btn:before { position: absolute; content: ''; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; opacity: 0; -webkit-transition: all 0.4s; -moz-transition: all 0.4s; -o-transition: all 0.4s; transition: all 0.4s; -webkit-transform: scale(0.2, 1); transform: scale(0.2, 1); background-color: var(--tg-secondary-color); } .btn:hover::before { opacity: 1; -webkit-transform: scale(1, 1); transform: scale(1, 1); } .btn:hover { color: var(--tg-white); } .btn.btn-two { background: var(--tg-white); color: var(--tg-secondary-color); } .btn.btn-two:hover { color: var(--tg-white); } .breadcrumb > .active { color: var(--tg-primary-color); } /* scrollUp */ .scroll-top { width: 35px; height: 35px; line-height: 35px; position: fixed; bottom: -10%; right: 30px; font-size: var(--tg-body-font-size); border-radius: 6px; z-index: 99; color: var(--tg-white); text-align: center; cursor: pointer; background: var(--tg-primary-color); transition: 1s ease; border: none; } .scroll-top.open { bottom: 30px; } .scroll-top::after { position: absolute; z-index: -1; content: ''; top: 100%; left: 5%; height: 10px; width: 90%; opacity: 1; background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0) 80%); } .scroll-top:hover { background: var(--tg-secondary-color); } /*============================= 02. Header ===============================*/ .custom-container { max-width: 1830px; } .custom-container-two { max-width: 1750px; } .transparent-header { position: absolute; left: 0; top: 0px; width: 100%; z-index: 9; height: auto; } /* header-top */ .header-top-wrap { padding: 9px 0; background: var(--tg-secondary-color); } .header-top-left span { display: block; font-size: 12px; line-height: 1.4; color: #D1D1D1; } .header-top-left span i { margin-right: 5px; color: var(--tg-white); } .header-top-social .list-wrap { display: flex; align-items: center; justify-content: flex-end; gap: 5px; } .header-top-social .list-wrap li a { width: 28px; height: 28px; border-radius: 50px; border: 1px solid var(--tg-gray); display: flex; align-items: center; justify-content: center; font-size: 13px; color: var(--tg-gray); line-height: 1; } .header-top-social .list-wrap li a:hover { background: var(--tg-white); border-color: var(--tg-white); color: var(--tg-secondary-color); } /* header-logo-area */ .header-logo-area { padding: 22px 0 28px; background: var(--tg-white); } .header-info-wrap { display: flex; align-items: center; justify-content: flex-end; gap: 30px; } .header-info-wrap .header-info-item { display: flex; align-items: center; border-radius: 10px; padding: 17px 25px; transition: .3s linear; } .header-info-wrap .header-info-item .icon { width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; border-radius: 5px; border: 1px solid var(--tg-primary-color); font-size: 20px; color: var(--tg-primary-color); margin-right: 10px; transition: .3s ease-in-out; } .header-info-wrap .header-info-item .icon svg { width: 22px; } .header-info-wrap .header-info-item .content span { display: block; line-height: 1; font-size: 12px; font-weight: 500; text-transform: uppercase; color: var(--tg-primary-color); margin-bottom: 8px; transition: .3s ease-in-out; } .header-info-wrap .header-info-item .content a { display: block; line-height: 1; font-size: 15px; font-weight: 500; color: var(--tg-secondary-color); } .header-info-wrap .header-info-item:hover .content a:hover, .header-info-wrap .header-info-item.active .content a:hover { color: var(--tg-secondary-color); } .header-info-wrap .header-info-item:hover, .header-info-wrap .header-info-item.active { background: var(--tg-primary-color); } .header-info-wrap .header-info-item:hover .icon, .header-info-wrap .header-info-item.active .icon { color: var(--tg-white); border-color: var(--tg-white); border-radius: 50%; } .header-info-wrap .header-info-item:hover .content a, .header-info-wrap .header-info-item:hover .content span, .header-info-wrap .header-info-item.active .content a, .header-info-wrap .header-info-item.active .content span { color: var(--tg-white); } /* menu */ .menu-area { background: var(--tg-white) !important; } .menu-nav { display: flex; align-items: center; flex-wrap: wrap; justify-content: space-between; } .logo img { max-height: 68px; } .logo.sticky-logo { display: none; } .navbar-wrap { display: flex; flex-grow: 0; } .navbar-wrap ul { display: flex; flex-direction: row; flex-wrap: wrap; padding: 0 0; margin: 0; } .navbar-wrap > ul > li { list-style: none; display: block; position: relative; margin-right: 40px; } .navbar-wrap ul li:last-child { margin-right: 0; display: inline-flex ; justify-content: center; align-items: center; } .navbar-wrap ul li a { font-size: 16px; font-weight: 600; text-transform: uppercase; color: var(--tg-secondary-color); padding: 40px 0; display: block; line-height: 1; position: relative; z-index: 1; font-family: var(--tg-heading-font-family); } .navbar-wrap > ul > li.active > a, .navbar-wrap > ul > li:hover > a { color: var(--tg-primary-color); } .main-menu .navigation li.menu-item-has-children .dropdown-btn { display: none; } .header-action > ul { display: flex; align-items: center; margin-left: 10px; } .header-action > ul li { position: relative; margin-left: 30px; } .header-action ul li:first-child { margin-left: 0; } .header-action ul li a { color: var(--tg-heading-font-color); font-size: 14px; } .header-action ul li.header-search a { width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--tg-secondary-color); color: var(--tg-white); border: 2px solid var(--tg-primary-color); font-size: 16px; } .header-action ul li.header-search a:hover { background: var(--tg-primary-color); } .header-action .header-btn .btn { color: var(--tg-white); font-size: 16px; } .navbar-wrap ul li .sub-menu { position: absolute; left: 0; right: 0; top: 100%; min-width: 230px; border: 1px solid #f5f5f5; background: var(--tg-white); margin: 0 0; transform: scale(1, 0); transform-origin: 0 0; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; -webkit-box-shadow: 0px 30px 70px 0px rgba(137, 139, 142, 0.15); -moz-box-shadow: 0px 30px 70px 0px rgba(137, 139, 142, 0.15); box-shadow: 0px 30px 70px 0px rgba(137, 139, 142, 0.15); padding: 18px 0; display: block; visibility: hidden; opacity: 0; z-index: 9; border-radius: 0 0 5px 5px; } .navbar-wrap ul li .sub-menu .sub-menu { right: auto; left: 100%; top: 0; } .navbar-wrap ul li .sub-menu li { margin-left: 0; text-align: left; display: block; } .navbar-wrap ul li .sub-menu li a { padding: 9px 15px 9px 25px; line-height: 1.4; font-weight: 600; color: var(--tg-secondary-color); text-transform: uppercase; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; display: flex; align-items: center; } .navbar-wrap ul li .sub-menu li a::before { content: ""; display: block; width: 0; height: 2px; border-radius: 2px; background: var(--tg-primary-color); transition: .3s ease-in-out; } .navbar-wrap ul li .sub-menu > li.active > a::before, .navbar-wrap ul li .sub-menu li a:hover::before { width: 10px; margin-right: 5px; } .navbar-wrap ul li .sub-menu > li.active > a, .navbar-wrap ul li .sub-menu li a:hover { color: var(--tg-primary-color); } .navbar-wrap ul li:hover > .sub-menu { opacity: 1; visibility: visible; transform: scale(1); } .sticky-menu { position: fixed; left: 0; margin: auto; top: 0; width: 100%; z-index: 99; background: var(--tg-white); -webkit-animation: 1000ms ease-in-out 0s normal none 1 running fadeInDown; animation: 1000ms ease-in-out 0s normal none 1 running fadeInDown; -webkit-box-shadow: 0 10px 15px rgba(25, 25, 25, 0.1); box-shadow: 0 10px 15px rgba(25, 25, 25, 0.1); border-radius: 0; } .sticky-menu .navbar-wrap ul li a { color: var(--tg-secondary-color); } .sticky-menu .navbar-wrap > ul > li.active > a, .sticky-menu .navbar-wrap > ul > li:hover > a { color: var(--tg-primary-color); } /* header-two */ .header-style-two .navbar-wrap ul { margin: 0 auto; } .header-style-two .navbar-wrap ul li a { padding: 40px 0; } .header-style-two .navbar-wrap .menu-contact{ padding: 16px 16px !important; color: var(--tg-white); } .header-style-two .navbar-wrap .menu-contact:hover{ color: var(--tg-orange); } .header-style-two .menu-area { background: rgba(0, 0, 0, 0.40); } .header-style-two .header-action .header-btn .btn { color: var(--tg-primary-color); } .header-style-two .sticky-menu { background: var(--tg-white); } .header-style-two .sticky-menu .header-action .header-btn .btn { background: var(--tg-primary-color); color: var(--tg-white); } .header-style-two .sticky-menu .logo { display: none; } .header-style-two .sticky-menu .logo.sticky-logo { display: block; } /* header-three */ .header-top-wrap-two { padding: 16px 0; } .header-top-menu .list-wrap { display: flex; align-items: center; flex-wrap: wrap; gap: 25px; } .header-top-menu .list-wrap li { position: relative; } .header-top-menu .list-wrap li::before { content: ""; position: absolute; width: 4px; height: 4px; border-radius: 50%; right: -13px; top: 50%; transform: translateY(-50%); background: var(--tg-white); } .header-top-menu .list-wrap li:last-child::before { display: none; } .header-top-menu .list-wrap li a { font-size: 14px; color: var(--tg-white); display: block; line-height: 1; } .header-top-menu .list-wrap li a:hover { color: var(--tg-primary-color); } .header-top-social-two .list-wrap { display: flex; align-items: center; justify-content: flex-end; gap: 20px; } .header-top-social-two .list-wrap li a { color: #B9B9B9; font-size: 14px; line-height: 1; } .header-top-social-two .list-wrap li a:hover { color: var(--tg-white); } .header-style-three .logo img { max-height: 50px; } .header-style-three .navbar-wrap ul { margin: 0 0 0 auto; } .header-style-three .header-action > ul { margin-left: 35px; } .header-style-three .menu-area { background: transparent; } .header-style-three .menu-nav { background: var(--tg-white); border-radius: 10px; padding: 0 20px; } .header-style-three .navbar-wrap ul li a { color: var(--tg-secondary-color); } .header-style-three .navbar-wrap > ul > li.active > a, .header-style-three .navbar-wrap > ul > li:hover > a { color: var(--tg-primary-color); } .header-style-three .sticky-menu { background: var(--tg-white); } /* header-four */ .header-style-four .navbar-wrap ul { margin: 0 auto; } .header-style-four .menu-area { background: transparent; padding: 30px 0; } .header-style-four .menu-area.sticky-menu { padding: 0; background: var(--tg-white); } .header-style-four .logo img { max-height: 50px; } .header-style-four .menu-area.sticky-menu .logo { display: none; } .header-style-four .menu-area.sticky-menu .logo.d-none { display: block !important; } .header-style-four .header-action ul li.header-search a { width: auto; height: auto; display: block; border-radius: 0; background: transparent; color: var(--tg-white); border: none; font-size: 25px; line-height: 1; } .header-style-four .header-action ul li.header-search a:hover { color: var(--tg-primary-color); } .offcanvas-menu .menu-tigger { width: 60px; height: 60px; display: flex; align-items: center; background: var(--tg-white); border-radius: 5px; flex-direction: column; justify-content: center; gap: 7px; } .offcanvas-menu .menu-tigger span { width: 30px; height: 3px; border-radius: 3px; background: var(--tg-primary-color); transition: .15s linear; } .offcanvas-menu .menu-tigger span:nth-child(3) { width: 23px; margin-left: 7.5px; } .offcanvas-menu .menu-tigger:hover span:nth-child(3) { margin-left: 0; width: 30px; } .offcanvas-menu .menu-tigger:hover span:nth-child(1) { width: 23px; margin-left: 7.5px; } .header-style-four .menu-area.sticky-menu .header-action ul li.header-search a { color: var(--tg-primary-color); } .header-style-four .menu-area.sticky-menu .offcanvas-menu .menu-tigger { background: var(--tg-primary-color); } .header-style-four .menu-area.sticky-menu .offcanvas-menu .menu-tigger span { background: var(--tg-white); } /*============================= 03. Mobile Menu ===============================*/ .nav-outer .mobile-nav-toggler { position: relative; float: right; font-size: 40px; line-height: 50px; cursor: pointer; display: none; color: var(--tg-white); margin-right: 30px; top: 15px; } .nav-logo img { width: 150px; } .mobile-menu { position: fixed; right: 0; top: 0; width: 300px; padding-right: 30px; max-width: 100%; height: 100%; z-index: 99; border-radius: 0px; transition: all 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86); -moz-transition: all 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86); -webkit-transition: all 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86); -ms-transition: all 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86)e; -o-transition: all 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86); -webkit-transform: translateX(101%); -ms-transform: translateX(101%); transform: translateX(101%); } .mobile-menu .navbar-collapse { display: block !important; } .mobile-menu .nav-logo { position: relative; padding: 30px 25px; text-align: left; } .mobile-menu-visible { overflow: hidden; } .mobile-menu-visible .mobile-menu { -webkit-transform: translateX(0%); -ms-transform: translateX(0%); transform: translateX(0%); } .mobile-menu .navigation li.current>a:before { height: 100%; } .menu-backdrop { position: fixed; right: 0; top: 0; width: 100%; height: 100%; z-index: 2; transition: all 700ms ease; -moz-transition: all 700ms ease; -webkit-transition: all 700ms ease; -ms-transition: all 700ms ease; -o-transition: all 700ms ease; opacity: 0; visibility: hidden; background: rgba(0, 0, 0, 0.5); } .mobile-menu-visible .menu-backdrop { opacity: 1; visibility: visible; } .mobile-menu .menu-box { position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; max-height: 100%; overflow-y: auto; overflow-x: hidden; background: var(--tg-white); padding: 0px 0px; z-index: 5; box-shadow: -9px 0 14px 0px rgb(0 0 0 / 6%); } .mobile-menu-visible .mobile-menu .menu-box { opacity: 1; visibility: visible; } .mobile-menu .close-btn { position: absolute; right: 15px; top: 28px; line-height: 30px; width: 35px; text-align: center; font-size: 20px; color: #292b37; cursor: pointer; z-index: 10; -webkit-transition: all 0.9s ease; -o-transition: all 0.9s ease; transition: all 0.9s ease; } .mobile-menu-visible .mobile-menu .close-btn { -webkit-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); } .mobile-menu .navigation { position: relative; display: block; width: 100%; float: none; margin: 0; padding: 0; } .mobile-menu .navigation ul { padding: 0; margin: 0; } .mobile-menu .navigation li { position: relative; display: block; border-top: 1px solid rgb(0 0 0 / 10%); } .mobile-menu .navigation:last-child { border-bottom: 1px solid rgb(0 0 0 / 10%); } .mobile-menu .navigation li>ul>li:first-child { border-top: 1px solid rgb(0 0 0 / 10%); } .mobile-menu .navigation li > a { position: relative; display: block; line-height: 24px; padding: 10px 60px 10px 25px; font-size: 16px; font-weight: 700; color: var(--tg-heading-font-color); text-transform: uppercase; -webkit-transition: all 500ms ease; -o-transition: all 500ms ease; transition: all 500ms ease; border: none; } .mobile-menu .navigation li ul li > a { font-size: 16px; margin-left: 20px; text-transform: uppercase; } .mobile-menu .navigation li ul li ul li a { margin-left: 40px; } .mobile-menu .navigation li ul li ul li ul li a { margin-left: 60px; } .mobile-menu .navigation li > a:before { content: ''; position: absolute; left: 0; top: 0; height: 0; -webkit-transition: all 500ms ease; -o-transition: all 500ms ease; transition: all 500ms ease; } .mobile-menu .navigation li.menu-item-has-children .dropdown-btn { position: absolute; right: 15px; top: 6px; width: 32px; height: 32px; text-align: center; font-size: 16px; line-height: 32px; color: var(--tg-white); background: var(--tg-primary-color); cursor: pointer; border-radius: 2px; -webkit-transition: all 500ms ease; -o-transition: all 500ms ease; transition: all 500ms ease; z-index: 5; } .mobile-menu .navigation li.menu-item-has-children .dropdown-btn i { -webkit-transition: all 500ms ease; -o-transition: all 500ms ease; transition: all 500ms ease; } .mobile-menu .navigation li.menu-item-has-children .dropdown-btn.open i { -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); color: var(--tg-primary-color); } .mobile-menu .navigation li > ul, .mobile-menu .navigation li > ul > li > ul { display: none; } .mobile-menu .social-links ul { display: flex; position: relative; text-align: center; padding: 30px 20px 20px; align-items: center; justify-content: center; flex-wrap: wrap; } .mobile-menu .social-links li { position: relative; display: inline-block; margin: 0px 6px 10px; } .mobile-menu .social-links li a { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; position: relative; line-height: 32px; font-size: 16px; color: var(--tg-heading-font-color); -webkit-transition: all 500ms ease; -o-transition: all 500ms ease; transition: all 500ms ease; border: 1px solid var(--tg-gray); border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; -o-border-radius: 3px; } .mobile-menu .social-links li a:hover { border-color: var(--tg-primary-color); background: var(--tg-primary-color); color: var(--tg-white); } .menu-area .mobile-nav-toggler { position: relative; float: right; font-size: 27px; cursor: pointer; line-height: 1; color: var(--tg-primary-color); display: none; margin-top: 0; padding: 5px 10px; border: 2px solid var(--tg-primary-color); } /*============================= 04. Search ===============================*/ .search-popup-wrap { position: fixed; top: 0; left: 0; background: var(--tg-white); height: auto; width: 100%; z-index: 99; padding: 40px 0 50px; display: none; z-index: 999; } .search-form { position: relative; } .search-form input { width: 100%; border: none; border-bottom: 1px solid var(--tg-primary-color); padding: 10px 50px 20px; text-align: center; font-weight: 500; font-size: 30px; background: transparent; color: var(--tg-heading-font-color); } .search-form input::placeholder { font-size: 30px; color: #222; opacity: .5; } .search-btn { position: absolute; right: 20px; background: transparent; border: 0; font-size: 25px; color: var(--tg-primary-color); top: 50%; transform: translateY(-50%); } .search-close { position: absolute; top: 5%; right: 5%; font-size: 30px; color: var(--tg-primary-color); cursor: pointer; } body.search-visible { overflow: hidden; } .search-backdrop { background: #000; cursor: url(../img/images/cross-out.png), pointer; z-index: 99; visibility: hidden; position: fixed; right: 0; top: 0; width: 100%; height: 100%; z-index: 4; transition: all .3s linear; -moz-transition: all .3s linear; -webkit-transition: all .3s linear; -ms-transition: all .3s linear; -o-transition: all .3s linear; opacity: 0; visibility: hidden; } .search-visible .search-backdrop { opacity: .55; visibility: visible; } /*============================= 05. OffCanvas ===============================*/ .extra-info { background: var(--tg-white) none repeat scroll 0 0; height: 100%; padding: 30px; position: fixed; right: 0; top: 0; transition: all 0.7s ease 0s; width: 340px; z-index: 999; overflow-y: scroll; transform: translateX(100%); } .extra-info.active { transform: translateX(0); } .close-icon { margin-top: -16px; text-align: right; } .close-icon > button { background: transparent; border: 0 none; color: var(--tg-primary-color); cursor: pointer; font-size: 20px; padding: 0; } .extra-info .logo-side img { max-height: 45px; } .side-info { border-top: 1px solid var(--tg-primary-color); padding-top: 25px; } .contact-list h4 { color: var(--tg-heading-font-color); font-weight: 700; font-size: 18px; } .contact-list p { color: var(--tg-paragraph-color); margin: 0; margin-bottom: 2px; line-height: 26px; } .side-instagram { overflow: hidden; display: flex; flex-wrap: wrap; margin: -5px; } .side-instagram li { width: 33.3333%; flex: 0 0 33.3333%; padding: 5px; } .side-instagram li > a { display: block; } .side-instagram img { width: 100%; border-radius: 5px; } .social-icon-right > a { color: var(--tg-primary-color); display: inline-block; margin-right: 20px; text-align: center; } .social-icon-right > a:hover { color: var(--tg-secondary-color); } .offcanvas-overly { position: fixed; background: var(--tg-secondary-color); top: 0; left: 0; height: 100%; width: 100%; z-index: 99; opacity: 0; visibility: hidden; transition: .3s; } .offcanvas-overly.active { opacity: .5; visibility: visible; } .extra-info::-webkit-scrollbar { width: 0px; } /*============================= 06. Slider ===============================*/ .slider-bg { background-size: cover; background-position: center; padding: 400px 0 120px; min-height: 975px; position: relative; z-index: 1; } .slider-bg::before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.40); z-index: -1; } .slider-content { overflow: hidden; } .slider-content .sub-title { font-size: 20px; text-transform: uppercase; font-weight: 500; letter-spacing: 2px; display: block; line-height: 1.4; color: var(--tg-white); font-family: var(--tg-heading-font-family); margin-bottom: 15px; } .slider-content .title { font-size: 70px; color: var(--tg-white); margin-bottom: 45px; line-height: 1.1; } .slider-btn { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; } .slider-shape .shape-one { width: 184px; height: 184px; border-radius: 50%; background: rgba(0, 0, 0, 0.33); position: absolute; right: 24%; bottom: 40%; z-index: -1; } .slider-shape .shape-two { width: 433px; height: 433px; border-radius: 50%; background: rgba(255, 82, 3, 0.60); position: absolute; right: 65px; bottom: 25px; z-index: -1; } .slider-active .slick-dots { display: flex; align-items: center; position: absolute; bottom: 90px; left: 50%; transform: translateX(-50%); margin: 0; padding: 0; gap: 20px; } .slider-active .slick-dots li { list-style: none; line-height: 0; } .slider-active .slick-dots li button { text-indent: -99999999999px; border: none; background: rgba(255, 255, 255, 0.40); width: 15px; height: 15px; border-radius: 50%; line-height: 1; } .slider-active .slick-dots li.slick-active button { background: var(--tg-primary-color); width: 30px; border-radius: 10px; } /* slider-two */ .slider-area-two { position: relative; } .slider-bg-two { background-size: cover; background-position: center; min-height: 960px; display: flex !important; align-items: center; position: relative; z-index: 1; padding: 200px 0 200px; } .slider-bg-two::before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.25); z-index: -1; } .slider-content-two { text-align: center; } .slider-content-two .sub-title { display: block; font-size: 20px; font-family: var(--tg-heading-font-family); letter-spacing: 3px; text-transform: uppercase; line-height: 1; font-weight: 500; color: var(--tg-primary-color); margin-bottom: 20px; } .slider-content-two .title { font-size: 90px; margin-bottom: 50px; line-height: 1; color: var(--tg-white); } .slider-content-two .slider-btn { justify-content: center; } .slider-nav { display: flex; align-items: center; gap: 10px; position: absolute; bottom: -40px; right: 19%; } .slider-nav .slick-arrow { width: 80px; height: 80px; display: flex; align-items: center; justify-content: center; border: none; box-shadow: 0px 0px 50px 0px rgba(0, 0, 0, 0.10); border-radius: 5px; background: var(--tg-white); font-size: 30px; color: var(--tg-secondary-color); padding: 0; } .slider-nav .slick-arrow:hover { color: var(--tg-white); background: var(--tg-primary-color); } /* slider-three */ .slider-bg-three { background-size: cover; background-position: center; min-height: 960px; display: flex; align-items: center; position: relative; z-index: 1; padding: 200px 0 200px; } .slider-bg-three::before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.50); z-index: -1; } .slider-content-three { overflow: hidden; } .slider-content-three .title { margin-bottom: 10px; color: var(--tg-white); font-size: 140px; line-height: 1.14; } .slider-content-three p { margin-bottom: 50px; color: var(--tg-white); font-size: 20px; width: 90%; } .slider-active-three .slick-dots { margin: 0; padding: 0; display: flex; flex-direction: column; align-items: flex-end; position: absolute; right: 100px; top: 50%; transform: translateY(-50%); gap: 10px; } .slider-active-three .slick-dots li { list-style: none; line-height: 0; } .slider-active-three .slick-dots li button { text-indent: -9999999999px; border: none; border-radius: 5px; background: rgba(255, 255, 255, 0.15); width: 23px; height: 6px; } .slider-active-three .slick-dots li.slick-active button { width: 45px; background: var(--tg-white); } /*============================= 07. Banner ===============================*/ .banner-bg { background-size: cover; background-position: center; min-height: 960px; display: flex; align-items: center; position: relative; z-index: 1; padding: 240px 0 240px; } .banner-bg::before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.50); z-index: -1; } .banner-content { text-align: center; margin-top: -40px; } .banner-content .title { margin-bottom: 35px; color: var(--tg-white); font-size: 70px; text-transform: uppercase; line-height: 1.2; } .banner-btn { display: flex; align-items: center; justify-content: center; gap: 20px; flex-wrap: wrap; } /*============================= 08. Breadcrumb ===============================*/ .breadcrumb-bg { background-size: cover; background-position: center; padding: 150px 0 150px; position: relative; z-index: 1; } .breadcrumb-bg::before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.30); z-index: -1; } .breadcrumb-content .title { font-size: 40px; margin-bottom: 20px; font-weight: 600; color: var(--tg-white); } .breadcrumb-content .breadcrumb { margin-bottom: 0; } .breadcrumb-content .breadcrumb-item { line-height: 1.2; color: #D9D9D9; font-size: 16px; font-weight: 500; text-transform: uppercase; } .breadcrumb-content .breadcrumb-item a { color: var(--tg-white); font-size: 18px; font-weight: 700; } .breadcrumb-content .breadcrumb-item a i { margin-right: 10px; } .breadcrumb-content .breadcrumb-item a:hover { color: var(--tg-primary-color); } .breadcrumb-content .breadcrumb-item+.breadcrumb-item::before { float: left; padding-right: 10px; color: var(--tg-white); content: '\f105'; font-family: "Font Awesome 5 Free"; font-size: 16px; font-weight: 700; } .breadcrumb-content .breadcrumb-item+.breadcrumb-item { padding-left: 10px; } /*============================= 09. About ===============================*/ .section-title .sub-title { display: inline-flex; align-items: center; line-height: 1; font-size: 20px; font-weight: 700; text-transform: uppercase; font-family: var(--tg-heading-font-family); color: var(--tg-primary-color); gap: 15px; margin-bottom: 30px; } .section-title .sub-title strong { transform: translateY(-2px); } .section-title .sub-title strong svg path { color: var(--tg-primary-color); } .section-title .title { margin-bottom: 0; font-size: 40px; } .word { display:inline-flex; opacity:0; transition:opacity 1.1s cubic-bezier(.65,.05,.36,1); transition-delay:calc(70ms * var(--word-index) + 0ms); } .innerAnimated .word { opacity:1; } .char { display:inline-flex; opacity:0; transform:rotateX(90deg); transform-origin:bottom; transition:opacity 1.1s cubic-bezier(.65,.05,.36,1),transform 1.1s cubic-bezier(.65,.05,.36,1); transition-delay:calc(30ms * var(--char-index) + 10ms); } .innerAnimated .char { transform:rotateX(0deg); opacity:1; } [data-animation^=innerAnimated] { visibility: hidden; } .innerAnimated { -webkit-animation-fill-mode: both; animation-fill-mode: both; visibility: visible; } .about-img-wrap { position: relative; padding-right: 100px; padding-bottom: 160px; } .about-img-wrap img { border-radius: 10px; } .about-img-wrap img:nth-child(2) { position: absolute; right: 30px; bottom: 0; } .about-img-wrap .play-btn { position: absolute; width: 80px; height: 80px; background: var(--tg-primary-color); color: var(--tg-white); display: flex; align-items: center; justify-content: center; border-radius: 50%; font-size: 20px; line-height: 0; margin: 10px; left: 15px; bottom: 30px; z-index: 1; } .about-img-wrap .play-btn::before { content: ""; position: absolute; left: -10px; top: -10px; width: 100px; height: 100px; border-radius: 50%; border: 2px dashed var(--tg-secondary-color); background: transparent; z-index: -1; animation: btnRotate 15s linear infinite; } .about-content > p { margin-bottom: 45px; } .about-list .list-wrap { margin-bottom: 50px; } .about-list .list-wrap li { display: flex; align-items: flex-start; margin-bottom: 40px; } .about-list .list-wrap li:last-child { margin-bottom: 0; } .about-list .list-wrap li .icon { width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; border-radius: 50%; border: 1px dashed var(--tg-primary-color); flex: 0 0 auto; font-size: 25px; color: var(--tg-primary-color); margin-right: 10px; line-height: 0; } .about-list .list-wrap li .content .title { font-size: 20px; margin-bottom: 8px; } .about-list .list-wrap li .content p { margin-bottom: 0; } .about-content-bottom { display: flex; align-items: center; flex-wrap: wrap; gap: 20px; } .about-content-bottom .call-btn { display: flex; align-items: center; font-size: 24px; color: var(--tg-secondary-color); font-weight: 700; font-family: var(--tg-heading-font-family); } .about-content-bottom .call-btn i { width: 45px; height: 45px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--tg-secondary-color); color: var(--tg-white); font-size: 15px; margin-right: 12px; } .about-content-bottom .call-btn:hover { color: var(--tg-primary-color); } .rotateme { -webkit-animation-name: btnRotate; animation-name: btnRotate; -webkit-animation-duration: 10s; animation-duration: 10s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-timing-function: linear; animation-timing-function: linear; } @keyframes btnRotate { from { -webkit-transform: rotate(0deg); transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @-webkit-keyframes btnRotate { from { -webkit-transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); } } /* about-two */ .about-area-inner .col-45 { width: 44.5%; flex: 0 0 auto; } .about-area-inner .col-55 { width: 55.5%; flex: 0 0 auto; } .about-img-wrap-two { display: flex; align-items: center; gap: 20px; } .about-img-wrap-two img:nth-child(1) { border-radius: 10px 0 0 10px; } .about-img-wrap-two img:nth-child(2) { border-radius: 0 10px 10px 0; } .about-content-two { margin-left: 20px; } .section-title.title-style-three .sub-title { font-size: 16px; color: #838383; letter-spacing: 3.2px; margin-bottom: 20px; } .about-tab { width: 90%; } .about-tab .nav-tabs { border-bottom: none; gap: 20px; margin-bottom: 30px; } .about-tab .nav-tabs .nav-link { margin-bottom: 0; background: #FFF7F3; border: none; font-size: 18px; font-weight: 500; color: var(--tg-primary-color); font-family: var(--tg-heading-font-family); line-height: 1; padding: 16px 23px; border-radius: 5px; } .about-tab .nav-tabs .nav-link.active { background: var(--tg-primary-color); color: var(--tg-white); } .about-tab .tab-content p { margin-bottom: 30px; } .about-list-two .list-wrap { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 0; } .about-list-two .list-wrap li { display: flex; align-items: baseline; width: 50%; font-weight: 500; color: var(--tg-secondary-color); gap: 7px; } /*============================= 10. Services ===============================*/ .services-area { position: relative; padding: 120px 0; z-index: 1; overflow: hidden; margin-bottom: 120px; } .services-area::before { content: ""; width: 79%; height: 100%; position: absolute; left: 50%; transform: translateX(-50%); top: 0; background: var(--tg-section-background); z-index: -1; } .services-item { border-radius: 10px; background: var(--tg-white); box-shadow: 0px 0px 50px 0px rgba(0, 0, 0, 0.06); padding: 90px 20px 80px; text-align: center; position: relative; z-index: 1; overflow: hidden; } .services-item::before { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 0; background: var(--tg-primary-color); z-index: -1; transition: .3s ease-in-out; opacity: 0; } .services-item:hover::before { height: 100%; opacity: 1; } .services-icon { font-size: 90px; line-height: 0; color: var(--tg-primary-color); margin-bottom: 40px; transition: .3s ease-in-out; } .services-content .title { font-size: 30px; margin-bottom: 25px; } .services-content .link-btn { font-size: 15px; font-weight: 600; letter-spacing: 1.5px; text-decoration-line: underline; text-transform: uppercase; line-height: normal; display: inline-block; color: #848484; } .services-content .number { width: 50px; height: 50px; border: 1px solid #ABABAB; display: flex; align-items: center; justify-content: center; border-radius: 50%; line-height: 1; font-size: 20px; font-weight: 700; font-family: var(--tg-heading-font-family); -webkit-text-stroke: 1px #ABABAB; color: transparent; position: absolute; top: 40px; right: 40px; transition: .3s ease-in-out; } .services-item:hover .services-content .link-btn, .services-item:hover .services-content .title, .services-item:hover .services-icon { color: var(--tg-white); } .services-item:hover .services-content .title a:hover { color: var(--tg-white); } .services-item:hover .services-content .number { border-color: var(--tg-white); -webkit-text-stroke: 1px var(--tg-white); } .services-scrollbar { margin-top: 60px; } .services-scrollbar .swiper-scrollbar { display: block; width: 100%; height: 2px; position: relative; -webkit-border-radius: 0; -moz-border-radius: 0; -o-border-radius: 0; -ms-border-radius: 0; border-radius: 0; background: transparent; margin: 11px 0; } .services-scrollbar .swiper-scrollbar::before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: #C9C9C9; pointer-events: none; } .services-scrollbar .swiper-scrollbar .swiper-scrollbar-drag { height: 24px; background: var(--tg-primary-color); -webkit-border-radius: 50%; -moz-border-radius: 50%; -o-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; cursor: pointer; -webkit-transition: all 0.5s ease-out 0s; -moz-transition: all 0.5s ease-out 0s; -ms-transition: all 0.5s ease-out 0s; -o-transition: all 0.5s ease-out 0s; transition: all 0.5s ease-out 0s; top: -11px; z-index: 1; } /* services-two */ .services-area-two { position: relative; padding: 140px 0 100px; } .services-shape { position: absolute; left: 0; bottom: 9%; z-index: -1; } .section-title.title-style-two .sub-title { font-size: 16px; gap: 10px; margin-bottom: 22px; } .section-title.title-style-two.text-center .sub-title::before { content: ""; width: 37px; height: 2px; background: var(--tg-primary-color); } .section-title.title-style-two .sub-title::after { content: ""; width: 37px; height: 2px; background: var(--tg-primary-color); } .services-item-two { margin-bottom: 40px; } .services-thumb-two { position: relative; overflow: hidden; border-radius: 10px 10px 0 0; } .services-thumb-two img { width: 370px; height: 300px; object-fit: cover; transform: scale(1); transition: all .8s cubic-bezier(.25, .46, .45, .94); } .services-item-two:hover .services-thumb-two img { transform: scale(1.1); } .services-icon-two { position: absolute; right: 30px; bottom: 30px; width: 78px; height: 78px; display: flex; align-items: center; justify-content: center; background: var(--tg-white); border-radius: 10px; font-size: 45px; line-height: 0; color: var(--tg-primary-color); transition: .3s ease-in-out; } .services-item-two:hover .services-icon-two { background: var(--tg-primary-color); color: var(--tg-white); } .services-content-two { background: var(--tg-white); border-radius: 0px 0px 10px 10px; box-shadow: 0px 0px 50px 0px rgba(0, 0, 0, 0.06); padding: 20px 30px; transition: .3s ease-in-out; } .services-content-two .title { font-size: 30px; font-weight: 600; margin-bottom: 8px; } .services-content-two .title a:hover { color: var(--tg-white); } .services-content-two .link-btn { display: inline-block; color: #848484; font-size: 15px; font-weight: 600; line-height: normal; letter-spacing: 1.5px; text-transform: uppercase; } .services-content-two .link-btn:hover { color: var(--tg-secondary-color); } .services-item-two:hover .services-content-two { background: var(--tg-primary-color); } .services-item-two:hover .services-content-two .link-btn, .services-item-two:hover .services-content-two .title { color: var(--tg-white); } /* services-three */ .services-area-three { margin-top: -188px; padding: 0 0 90px; } .services-item-three { box-shadow: 0px 0px 50px 0px rgba(0, 0, 0, 0.10); text-align: center; background: var(--tg-white); padding: 45px 40px; border-radius: 10px; position: relative; z-index: 1; overflow: hidden; margin-bottom: 30px; } .services-item-three::before { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 0; background: var(--tg-primary-color); z-index: -1; transition: .3s ease-in-out; opacity: 0; } .services-item-three.active::before, .services-item-three:hover::before { opacity: 1; height: 100%; } .services-icon-three { line-height: 0; font-size: 75px; color: var(--tg-primary-color); margin-bottom: 20px; transition: .3s ease-in-out; } .services-content-three .title { font-size: 30px; margin-bottom: 40px; line-height: 1.3; } .services-content-three .title a:hover { color: var(--tg-white); } .services-content-three .link-arrow { font-size: 30px; line-height: 1; -webkit-text-stroke: 1px var(--tg-secondary-color); color: transparent; } .services-item-three.active .services-content-three .link-arrow, .services-item-three:hover .services-content-three .link-arrow, .services-item-three.active .services-content-three .title, .services-item-three:hover .services-content-three .title, .services-item-three.active .services-icon-three, .services-item-three:hover .services-icon-three { color: var(--tg-white); } .services-item-three.active .services-content-three .link-arrow, .services-item-three:hover .services-content-three .link-arrow { -webkit-text-stroke: 1px transparent; } /* services-four */ .services-area-four { background: var(--tg-section-background); padding: 120px 0 90px; } .services-item-four { border-radius: 20px; background: var(--tg-white); padding: 35px 30px; margin-bottom: 30px; position: relative; overflow: hidden; z-index: 1; } .services-item-four::before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 0; background: var(--tg-primary-color); z-index: -1; transition: .3s ease-in-out; opacity: 0; } .services-item-four.active::before, .services-item-four:hover::before { opacity: 1; height: 100%; } .services-content-four .services-content-top { display: flex; align-items: center; margin-bottom: 18px; } .services-icon-four { width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; border: 0px solid var(--tg-primary-color); border-radius: 50%; line-height: 0; font-size: 22px; color: var(--tg-primary-color); flex: 0 0 auto; margin-right: 15px; transition: .3s ease-in-out; } .services-item-four.active .services-icon-four, .services-item-four:hover .services-icon-four { border-color: var(--tg-white); color: var(--tg-white); } .services-content-four .title { margin-bottom: 0; font-size: 24px; font-weight: 600; } .services-content-four .title a:hover { color: var(--tg-white); } .services-content-four p { margin-bottom: 25px; transition: .3s ease-in-out; } .services-content-four .link-btn { color: #848484; font-family: var(--tg-heading-font-family); font-size: 15px; font-weight: 600; line-height: normal; letter-spacing: 1.5px; text-transform: uppercase; } .services-content-four .link-btn:hover { text-decoration: underline; } .services-item-four.active .services-content-four .link-btn, .services-item-four.active .services-content-four p, .services-item-four.active .services-content-four .title, .services-item-four:hover .services-content-four .link-btn, .services-item-four:hover .services-content-four p, .services-item-four:hover .services-content-four .title { color: var(--tg-white); } /* services-five */ .section-title.title-style-four .sub-title { display: block; align-items: center; line-height: 1; font-size: 20px; font-weight: 700; text-transform: uppercase; font-family: var(--tg-heading-font-family); color: var(--tg-primary-color); margin-bottom: 15px; } .services-item-five { margin-bottom: 30px; } .services-thumb-five { border-radius: 10px 10px 0 0; overflow: hidden; } .services-thumb-five img { transform: scale(1); transition: all .8s cubic-bezier(.25, .46, .45, .94); width: 370px; height: 270px; object-fit: cover; } .services-item-five:hover .services-thumb-five img { transform: scale(1.1); } .services-content-five { border-radius: 0px 0px 10px 10px; background: var(--tg-white); box-shadow: 0px 0px 50px 0px rgba(0, 0, 0, 0.06); overflow: hidden; display: flex; } .services-content-five .icon { width: 100px; height: auto; min-height: 90px; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; background: var(--tg-primary-color); color: var(--tg-white); line-height: 0; font-size: 45px; } .services-content-five .content { padding: 14px 15px; } .services-content-five .title { font-size: 24px; font-weight: 600; margin-bottom: 5px; } .services-content-five .link-btn { font-size: 15px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; color: #848484; line-height: 1; } .services-content-five .link-btn:hover { color: var(--tg-primary-color); } /* services-details */ .services-sidebar { position: sticky; top: 110px; } .services-widget { margin-bottom: 40px; } .services-widget:last-child { margin-bottom: 0; } .services-cat-list .list-wrap { border-radius: 10px; overflow: hidden; } .services-cat-list .list-wrap li { margin-bottom: 2px; } .services-cat-list .list-wrap li:last-child { margin-bottom: 0; } .services-cat-list .list-wrap li a { font-size: 20px; font-weight: 600; color: var(--tg-secondary-color); background: #FBF6F3; display: block; line-height: 1.2; padding: 18px 40px; } .services-cat-list .list-wrap li.active a, .services-cat-list .list-wrap li a:hover { color: var(--tg-white); background: var(--tg-primary-color); } .services-sidebar .services-contact { background-size: cover; background-position: center; text-align: center; padding: 100px 30px; border-radius: 10px; position: relative; overflow: hidden; z-index: 1; } .services-sidebar .services-contact::before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.75); z-index: -1; } .services-sidebar .services-contact span { display: block; color: var(--tg-white); line-height: 1; margin-bottom: 10px; } .services-sidebar .services-contact .title { margin-bottom: 25px; color: var(--tg-white); font-size: 30px; } .services-details-wrap { margin-left: 10px; } .services-details-img { margin-bottom: 30px; } .services-details-img img { border-radius: 10px; } .services-details-content .title { margin-bottom: 15px; font-size: 40px; } .services-details-content p { margin-bottom: 30px; } .services-details-content .bold-info { font-style: italic; font-weight: 500; color: var(--tg-secondary-color); } .service-quality-wrap .title-two { margin-bottom: 0; font-size: 24px; border-bottom: 1px solid #D9D9D9; padding-bottom: 25px; margin-bottom: 20px; } .service-quality-wrap .sq-item { margin-bottom: 30px; margin-top: 10px; } .service-quality-wrap .sq-item .thumb img { border-radius: 10px 10px 0 0; } .service-quality-wrap .sq-item .content { border-radius: 0px 0px 10px 10px; background: var(--tg-white); box-shadow: 0px 0px 50px 0px rgba(0, 0, 0, 0.10); padding: 30px 30px 25px; } .service-quality-wrap .sq-item .content .title { font-size: 23px; margin-bottom: 10px; } .service-quality-wrap .sq-item .content p { margin-bottom: 0; } .services-faq-wrap .faq-wrap-two { padding: 60px 70px 40px; margin-left: 0; margin-top: 50px; } /*============================= 11. Work ===============================*/ .work-item { text-align: center; border-radius: 10px; background: var(--tg-white); box-shadow: 0px 0px 50px 0px rgba(0, 0, 0, 0.05); padding: 75px 20px 40px; position: relative; margin-top: 40px; transition: .3s linear; margin-bottom: 0px; } .work-item-wrap .row [class*="col-"]:nth-child(odd) .work-item { padding: 40px 20px 75px; margin-top: 0; margin-bottom: 0px; } .work-item.active, .work-item:hover { background: var(--tg-primary-color); } .work-icon { width: 80px; height: 80px; display: flex; align-items: center; justify-content: center; line-height: 0; border: 1px solid var(--tg-primary-color); border-radius: 50%; margin: 0 auto; color: var(--tg-primary-color); font-size: 30px; position: absolute; top: -40px; left: 50%; transform: translateX(-50%); background: var(--tg-white); transition: .3s linear; } .work-item-wrap .row [class*="col-"]:nth-child(odd) .work-item .work-icon { top: auto; bottom: -40px; } .work-item.active .work-icon, .work-item:hover .work-icon { border-color: var(--tg-white); background: var(--tg-primary-color); color: var(--tg-white); } .work-content span { color: #838383; font-size: 15px; font-weight: 600; letter-spacing: 1.5px; display: block; line-height: 1; margin-bottom: 12px; transition: .3s linear; } .work-content .title { font-size: 22px; font-weight: 600; margin-bottom: 20px; transition: .3s linear; } .work-content p { margin-bottom: 0; transition: .3s linear; } .work-item.active .work-content p, .work-item.active .work-content .title, .work-item.active .work-content span, .work-item:hover .work-content p, .work-item:hover .work-content .title, .work-item:hover .work-content span { color: var(--tg-white); } /*============================= 12. Consultation ===============================*/ .consultation-area { background: var(--tg-section-background); padding: 120px 0; position: relative; } .consultation-form .form-grp { margin-bottom: 30px; } .consultation-form .form-grp textarea, .consultation-form .form-grp input { width: 100%; border: none; background: transparent; border-bottom: 1px solid #D6D6D6; padding: 0 0 5px; font-size: 15px; color: var(--tg-secondary-color); line-height: 1; display: block; } .consultation-form .form-grp textarea::placeholder, .consultation-form .form-grp input::placeholder { font-size: 15px; color: #808080; line-height: 1; } .consultation-form .form-grp textarea { min-height: 110px; max-height: 110px; } .consultation-content { margin-right: 50px; } .consultation-img { background-size: cover; background-position: center; width: 50%; height: 100%; position: absolute; right: 0; top: 0; } /* consultation-two */ .consultation-area-two { background: var(--tg-section-background); padding: 120px 0; position: relative; } .consultation-content.consultation-content-two { margin-left: 70px; } .consultation-img-two { background-size: cover; background-position: center; width: 50%; height: 100%; position: absolute; left: 0; top: 0; } .consultation-img-two .play-btn { width: 120px; height: 120px; display: flex; align-items: center; justify-content: center; background: var(--tg-primary-color); color: var(--tg-white); border-radius: 50%; font-size: 30px; line-height: 0; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } /*============================= 13. Project ===============================*/ .project-area { position: relative; z-index: 1; padding: 120px 0 0; } .project-area::before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 60%; background: #0F171B; z-index: -1; } .section-title.white-title .title { color: var(--tg-white); } .project-item-wrap .row { --bs-gutter-x: 45px; } .project-item-wrap .row [class*="col-"] { padding: 0 22.5px; } .project-item { position: relative; overflow: hidden; } .project-thumb img { border-radius: 5px; width: 418px; height: 478px; object-fit: cover; } .project-content { position: absolute; left: 40px; right: 0; bottom: 35px; background: var(--tg-white); border-radius: 5px 0px 0px 5px; box-shadow: 0px 0px 50px 0px rgba(0, 0, 0, 0.15); padding: 40px 40px; transition: .3s ease-in-out; opacity: 0; visibility: hidden; transform: translateX(200px); } .project-item.active .project-content, .project-item:hover .project-content { transform: translateX(0); opacity: 1; visibility: visible; } .project-content span { display: block; line-height: 1; font-size: 15px; font-weight: 600; text-transform: uppercase; font-weight: 600; color: var(--tg-primary-color); font-family: var(--tg-heading-font-family); margin-bottom: 10px; } .project-content .title { margin-bottom: 0; font-size: 24px; } /* project-two */ .project-item-two { margin-bottom: 40px; } .project-thumb-two { padding-right: 30px; } .project-thumb-two img { border-radius: 10px; } .project-content-two { border-radius: 10px; background: var(--tg-white); box-shadow: 0px 0px 50px 0px rgba(0, 0, 0, 0.15); padding: 40px 25px 40px 40px; margin-left: 40px; margin-top: -80px; position: relative; z-index: 1; transition: .3s ease-in-out; } .project-item-two:hover .project-content-two { background: var(--tg-primary-color); } .project-content-two span { font-size: 15px; text-transform: uppercase; font-weight: 600; color: var(--tg-primary-color); font-family: var(--tg-heading-font-family); display: block; line-height: 1; margin-bottom: 8px; transition: .3s ease-in-out; } .project-content-two .title { font-size: 24px; margin-bottom: 0; } .project-content-two .title a:hover { color: var(--tg-white); } .project-item-two:hover .project-content-two .title, .project-item-two:hover .project-content-two span { color: var(--tg-white); } .project-active-two [class*="col-"] { padding: 0 15px; } .project-active-two .slick-dots { display: flex; align-items: center; justify-content: center; margin: 0; padding: 0; gap: 10px; margin-top: 20px; } .project-active-two .slick-dots li { list-style: none; line-height: 0; } .project-active-two .slick-dots li button { text-indent: -9999999999px; border: none; background: #ECECEC; border-radius: 50%; width: 15px; height: 15px; line-height: 1; } .project-active-two .slick-dots li.slick-active button { background: var(--tg-primary-color); } /* project-three */ .project-item-three { position: relative; overflow: hidden; } .project-thumb-three { overflow: hidden; border-radius: 10px; } .project-thumb-three img { width: 100%; height: 660px; object-fit: cover; transition: all .8s cubic-bezier(.25, .46, .45, .94); transform: scale(1); } .project-item-three:hover .project-thumb-three img { transform: scale(1.1); } .project-content-three { background: var(--tg-white); border-radius: 20px; box-shadow: 0px 0px 50px 0px rgba(0, 0, 0, 0.15); padding: 40px 40px; width: 400px; position: absolute; left: 40px; bottom: 45px; transition: all .4s cubic-bezier(.25, .46, .45, .94); transform: translateX(-150px); opacity: 0; visibility: hidden; } .slick-current.slick-active .project-item-three .project-content-three, .project-item-three:hover .project-content-three { transform: translateX(0); opacity: 1; visibility: visible; } .project-content-three span { display: block; font-size: 15px; text-transform: uppercase; color: var(--tg-primary-color); font-family: var(--tg-heading-font-family); font-weight: 600; line-height: 1; margin-bottom: 10px; } .project-content-three .title { margin-bottom: 0; font-size: 24px; } .project-active-three { --bs-gutter-x: 50px; } .project-active-three [class*="col-"] { padding: 0 25px; } .project-nav { display: flex; align-items: center; justify-content: flex-end; gap: 20px; margin-bottom: 50px; } .project-nav .slick-arrow { border: none; border-radius: 5px; background: var(--tg-white); box-shadow: 0px 0px 50px 0px rgba(0, 0, 0, 0.10); width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; font-size: 20px; line-height: 0; -webkit-text-stroke: 1px var(--tg-secondary-color); color: transparent; } .project-nav .slick-arrow:hover { color: var(--tg-white); background: var(--tg-primary-color); -webkit-text-stroke: transparent; } /* project-four */ .project-item-four { position: relative; margin-bottom: 30px; } .project-thumb-four { position: relative; border-radius: 10px; overflow: hidden; } .project-thumb-four::before { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 35%; border-radius: 20px; background: #000; filter: blur(100px); pointer-events: none; } .project-content-four { position: absolute; left: 0; bottom: 0; padding: 20px 60px 60px 60px; } .project-content-four span { display: block; font-size: 15px; font-weight: 600; font-family: var(--tg-heading-font-family); line-height: 1; text-transform: uppercase; color: var(--tg-white); margin-bottom: 10px; } .project-content-four .title { margin-bottom: 0; color: var(--tg-white); font-size: 30px; } /* inner-project */ .inner-project-item-wrap .row { --bs-gutter-x: 50px; } .inner-project-item-wrap .project-item-three { margin-bottom: 50px; } .btn.btn-three { background: #FFF6F1; color: var(--tg-primary-color); } .btn.btn-three:hover { color: var(--tg-white); } .btn.btn-three::before { background: var(--tg-primary-color); } /* project-details */ .project-details-img { margin-bottom: 50px; } .project-details-img img { border-radius: 10px; } .project-details-content .pd-inner-content .title { font-size: 40px; margin-bottom: 22px; } .project-details-content p { margin-bottom: 30px; } .project-details-content .pd-inner-content p { margin-bottom: 30px; } .project-details-content .title-two { font-size: 30px; margin-bottom: 12px; } .project-details-info { border-radius: 10px; background: var(--tg-white); box-shadow: 0px 0px 50px 0px rgba(0, 0, 0, 0.10); padding: 50px 25px; position: sticky; top: 100px; } .project-details-info .info-list .list-wrap li { display: flex; align-items: center; margin-bottom: 30px; } .project-details-info .info-list .list-wrap li:last-child { margin-bottom: 0; } .project-details-info .info-list .icon { width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid var(--tg-primary-color); color: var(--tg-primary-color); margin-right: 20px; flex: 0 0 auto; } .project-details-info .info-list .content span { display: block; font-size: 18px; line-height: 1; margin-bottom: 10px; } .project-details-info .info-list .content .title { font-size: 24px; margin-bottom: 0; font-weight: 600; } .project-details-social { display: flex; align-items: center; gap: 15px; border-top: 1px solid var(--tg-secondary-color); padding-top: 30px; margin-top: 40px; } .project-details-social .title { margin-bottom: 0; font-size: 15px; } .project-details-social .list-wrap { display: flex; align-items: center; gap: 15px; } .project-details-social .list-wrap li a { width: 45px; height: 45px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--tg-secondary-color); color: var(--tg-white); font-size: 15px; } .project-details-social .list-wrap li a:hover { background: var(--tg-primary-color); } .pd-list-item { border-radius: 10px; border: 1px solid #C3C3C3; padding: 40px 32px 35px; margin-bottom: 30px; } .pd-list-item .icon { font-size: 55px; line-height: 0; color: var(--tg-primary-color); margin-bottom: 15px; } .pd-list-item .content .title { margin-bottom: 10px; font-size: 24px; } .pd-list-item .content p { margin-bottom: 0; } .project-details-list-wrap { margin: 20px 0 0; } .prev-next-post-wrap { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px; } .prev-next-post-wrap .btn { text-transform: capitalize; gap: 5px; } .project-active-five [class*="col-"] { padding: 0 15px; } /*============================= 14. Choose ===============================*/ .choose-img-wrap { position: relative; padding-right: 47px; padding-bottom: 25px; } .choose-img-wrap img { border-radius: 20px; } .choose-img-wrap .year-experience { margin-bottom: 0; width: 280px; height: 280px; display: flex; align-items: center; justify-content: center; flex-direction: column; background: var(--tg-secondary-color); border-radius: 50%; border: 15px solid var(--tg-white); font-size: 60px; color: var(--tg-primary-color); line-height: 1; position: absolute; right: 0; bottom: 0; } .choose-img-wrap .year-experience span { display: block; text-align: center; font-size: 20px; font-weight: 600; line-height: normal; text-transform: uppercase; color: var(--tg-white); margin-top: 15px; } .choose-content p { margin-bottom: 30px; } .progress-item .title { margin-bottom: 12px; font-size: 22px; font-weight: 600; font-family: var(--tg-heading-font-family); } .progress-wrap { overflow: hidden; } .progress-item { margin-bottom: 50px; } .progress-item:last-child { margin-bottom: 0; } .progress-item .progress { height: 10px; background-color: #FFEAE0; border-radius: 10px; overflow: inherit; } .progress-item .progress-bar { background-color: var(--tg-primary-color); position: relative; overflow: inherit; border-radius: 10px; } .progress-item .progress-bar span { display: block; position: absolute; right: -13px; bottom: 22px; color: var(--tg-primary-color); line-height: 1; font-size: 16px; font-style: normal; font-weight: 500; } /*============================= 15. Faq ===============================*/ .faq-area { background: var(--tg-section-background); padding: 120px 0 90px; } .faq-content p { margin-bottom: 35px; } .faq-wrap .accordion-item { background-color: transparent; border: none; border-bottom: 1px solid var(--tg-gray); margin-bottom: 30px; } .faq-wrap .accordion-item:last-child { border-bottom: none; margin-bottom: 0; } .faq-wrap .accordion-button { padding: 0 50px 20px 0; font-size: 20px; color: var(--tg-secondary-color); font-weight: 600; font-family: var(--tg-heading-font-family); background-color: transparent; line-height: 1.6; position: relative; } .faq-wrap .accordion-button::after { content: "\f063"; width: 25px; height: 25px; background-image: none; font-family: "Font Awesome 5 Free"; font-size: 12px; position: absolute; right: 0; top: 13px; color: var(--tg-secondary-color); box-shadow: 0px 0px 50px 0px rgba(0, 0, 0, 0.20); border-radius: 2px; background: var(--tg-white); display: flex; align-items: center; justify-content: center; } .faq-wrap .accordion-button:not(.collapsed)::after { background-image: none; transform: rotate(-180deg); background: var(--tg-primary-color); color: var(--tg-white); } .faq-wrap .accordion-button:not(.collapsed) { color: var(--tg-secondary-color);; background-color: transparent; box-shadow: none; } .faq-wrap .accordion-body { padding: 0 0 25px; } .faq-wrap .accordion-body p { margin-bottom: 0; } .faq-wrap .accordion-button:focus { border-color: none; box-shadow: none; } .faq-img { position: relative; z-index: 1; } .faq-img img { max-width: unset; margin-bottom: -30px; } .faq-shape { width: 440px; height: 440px; border-radius: 50%; background: rgba(255, 82, 3, 0.10); position: absolute; z-index: -1; right: -20%; top: -18%; } /* faq-two */ .faq-img-two img { border-radius: 20px; max-width: unset; } .faq-wrap-two { background: var(--tg-white); border-radius: 10px; padding: 60px 40px 40px; box-shadow: 0px 0px 50px 0px rgba(0, 0, 0, 0.10); margin-left: 70px; margin-top: 150px; } .faq-wrap.faq-wrap-two .accordion-button::after { content: "\f078"; width: auto; height: auto; background-image: none; font-family: "Font Awesome 5 Free"; font-size: 18px; position: absolute; right: 0; top: 2px; color: var(--tg-secondary-color); box-shadow: none; border-radius: 0; background: transparent; line-height: 1; } .faq-wrap.faq-wrap-two .accordion-button:not(.collapsed)::after { color: var(--tg-primary-color); } .faq-wrap.faq-wrap-two .accordion-button:not(.collapsed) { color: var(--tg-primary-color); } .faq-wrap.faq-wrap-two .accordion-body { padding: 0 30px 25px 0; } /*============================= 16. Team ===============================*/ .area-bg { position: relative; z-index: 1; } .area-bg-inner { background-size: cover; background-position: center; position: absolute; width: 100%; height: 68%; bottom: 0; left: 0; z-index: -1; background-attachment: fixed; } .area-bg-inner::before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.70); } .team-item { margin-bottom: 40px; } .team-thumb { position: relative; overflow: hidden; } .team-thumb img { border-radius: 5px 5px 5px 0; transition: .3s ease-in-out; width: 370px; height: 450px; object-fit: cover; } .team-item.active .team-thumb img, .team-item:hover .team-thumb img { filter: grayscale(1); } .team-social .list-wrap { display: flex; flex-direction: column; position: absolute; right: 30px; top: 30px; gap: 8px; transition: .3s ease-in-out; transform: translateX(50px); opacity: 0; visibility: hidden; } .team-item.active .team-social .list-wrap, .team-item:hover .team-social .list-wrap { transform: translateX(0); opacity: 1; visibility: visible; } .team-social .list-wrap li a { width: 45px; height: 45px; display: flex; align-items: center; justify-content: center; background: var(--tg-secondary-color); border-radius: 50%; color: var(--tg-white); font-size: 15px; } .team-social .list-wrap li a:hover { background: var(--tg-primary-color); } .team-content { background: var(--tg-white); border-radius: 0px 0px 5px 5px; display: inline-block; min-width: 240px; padding: 15px 20px; transition: .3s ease-in-out; } .team-item.active .team-content, .team-item:hover .team-content { background: var(--tg-primary-color); } .team-content .title { margin-bottom: 5px; font-size: 24px; } .team-content .title a:hover { color: var(--tg-white); } .team-content span { display: block; color: #6D6E72; font-size: 15px; line-height: 1.2; transition: .3s ease-in-out; } .team-item.active .team-content span, .team-item:hover .team-content span, .team-item.active .team-content .title, .team-item:hover .team-content .title { color: var(--tg-white); } /* team-two */ .team-item-two { margin-bottom: 30px; } .team-thumb-two { position: relative; overflow: hidden; } .team-thumb-two img { border-radius: 10px 10px 0 0; width: 100%; height: 450px; object-fit: cover; } .team-item-two.active .team-social .list-wrap, .team-item-two:hover .team-social .list-wrap { transform: translateX(0); opacity: 1; visibility: visible; } .team-content-two { background: var(--tg-section-background); border-radius: 0 0 10px 10px; text-align: center; padding: 24px 20px; transition: .3s ease-in-out; } .team-item-two.active .team-content-two, .team-item-two:hover .team-content-two { background: var(--tg-white); box-shadow: 0px 0px 50px 0px rgba(0, 0, 0, 0.10); background: var(--tg-white); } .team-content-two .title { margin-bottom: 8px; font-size: 24px; } .team-content-two span { color: #6D6E72; display: block; font-size: 15px; line-height: 1; } /* team-details */ .team-details-wrap .row .col-36 { width: 35.9%; flex: 0 0 auto; } .team-details-wrap .row .col-64 { width: 64.1%; flex: 0 0 auto; } .team-details-img { position: sticky; top: 110px; } .team-details-img img { border-radius: 10px; } .team-details-info-wrap { margin-left: 35px; } .team-details-name { margin-bottom: 30px; } .team-details-name .title { margin-bottom: 10px; font-size: 40px; } .team-details-name span { display: block; font-size: 20px; font-weight: 600; color: #6D6E72; line-height: 1; } .team-info-wrap .list-wrap { display: flex; align-items: center; flex-wrap: wrap; justify-content: space-between; gap: 18px; margin-bottom: 30px; } .team-info-wrap .list-wrap li { color: #6D6E72; line-height: 1.4; } .team-info-wrap .list-wrap li span { font-weight: 700; color: var(--tg-secondary-color); } .team-details-social .list-wrap { display: flex; align-items: center; gap: 15px; margin-bottom: 40px; } .team-details-social .list-wrap li a { width: 45px; height: 45px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--tg-secondary-color); color: var(--tg-white); font-size: 15px; } .team-details-social .list-wrap li a:hover { background: var(--tg-primary-color); } .team-details-content { margin-bottom: 45px; } .team-details-content p { margin-bottom: 30px; } .team-details-info-wrap .progress-wrap { margin-bottom: 70px; } .team-details-info-wrap .progress-item { margin-bottom: 30px; } .team-details-info-wrap .progress-item:last-child { margin-bottom: 0; } .team-details-form-wrap .title { margin-bottom: 30px; font-size: 30px; } .team-details-form-wrap .row { --bs-gutter-x: 20px; } .team-details-form-wrap .form-grp { margin-bottom: 20px; } .team-details-form-wrap .form-grp textarea, .team-details-form-wrap .form-grp input { width: 100%; border: none; border-radius: 10px; background: #F8F8F8; font-size: 15px; line-height: 1; color: var(--tg-secondary-color); padding: 16px 22px; display: block; height: 50px; } .team-details-form-wrap .form-grp textarea::placeholder, .team-details-form-wrap .form-grp input::placeholder { font-size: 15px; line-height: 1; color: #818181; } .team-details-form-wrap .form-grp textarea { min-height: 183px; max-height: 183px; } .related-team-item-wrap [class*="col-"] { padding: 0 15px; } .team-nav { display: flex; align-items: center; justify-content: flex-end; margin-bottom: 50px; gap: 20px; } .team-nav .slick-arrow { border: none; border-radius: 5px; background: var(--tg-white); box-shadow: 0px 0px 50px 0px rgba(0, 0, 0, 0.10); width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; font-size: 20px; line-height: 0; -webkit-text-stroke: 1px var(--tg-secondary-color); color: transparent; } .team-nav .slick-arrow:hover { color: var(--tg-white); background: var(--tg-primary-color); -webkit-text-stroke: transparent; } /*============================= 17. Counter ===============================*/ .counter-item { display: flex; align-items: center; margin-bottom: 30px; justify-content: center; } .counter-icon { width: 60px; height: 60px; flex: 0 0 auto; margin-right: 15px; } .counter-icon svg { width: 100%; height: 100%; color: var(--tg-primary-color); transition: .3s linear; transform: rotateY(0); } .counter-item:hover .counter-icon svg { transform: rotateY(180deg); } .counter-content .count { margin-bottom: 5px; line-height: .8; font-size: 40px; color: var(--tg-white); font-weight: 400; } .counter-content .count span { font-weight: 700; } .counter-content p { margin-bottom: 0; font-size: 20px; color: var(--tg-white); line-height: 1; } /* counter-two */ .counter-area-two { position: relative; z-index: 1; padding: 120px 0 90px; } .counter-bg { background-size: cover; background-position: center; position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: -1; background-attachment: fixed; } .counter-bg::before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.70); } /* counter-three */ .counter-item-two .counter-content .count { color: var(--tg-secondary-color); } .counter-item-two .counter-content p { color: var(--tg-secondary-color); } /*============================= 18. Brand ===============================*/ .brand-item { border-radius: 10px; border: 1px solid #DCDCDC; text-align: center; min-height: 220px; display: flex; align-items: center; justify-content: center; padding: 30px; margin-bottom: 30px; cursor: pointer; transition: .3s linear; background: var(--tg-white); } .brand-item:hover { box-shadow: 0px 0px 50px 0px rgba(0, 0, 0, 0.10); border-color: var(--tg-white); } /* brand-two */ .brand-area-two { padding: 50px 0 25px; border-top: 1px solid #E4E4E4; } .brand-item-two { display: flex; align-items: center; justify-content: center; } .brand-item-two img { cursor: pointer; filter: grayscale(1); transition: .3s linear } .brand-item-two img:hover { filter: grayscale(0); } .brand-active .col-12 { padding: 0 15px; } /* brand-three */ .brand-area-three { background: var(--tg-section-background); } .brand-item.brand-item-three { filter: grayscale(1); opacity: .50; } .brand-item.brand-item-three:hover { opacity: 1; filter: grayscale(0); } /*============================= 19. Testimonial ===============================*/ .testimonial-bg { background-size: cover; background-position: center; padding: 120px 0 120px; } .testimonial-item { border-radius: 10px; background: var(--tg-white); box-shadow: 0px 0px 50px 0px rgba(0, 0, 0, 0.05); padding: 40px 40px; text-align: center; } .testimonial-icon { width: 72px; height: 72px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--tg-primary-color); color: var(--tg-white); font-size: 30px; line-height: 1; margin: 0 auto 30px; } .testimonial-icon svg { color: var(--tg-white); width: 30px; } .testimonial-content p { margin-bottom: 35px; } .testimonial-avatar { display: flex; align-items: center; justify-content: center; } .testimonial-avatar .avatar-thumb { width: 40px; flex: 0 0 auto; margin-right: 10px; } .testimonial-avatar .avatar-thumb img { border-radius: 50%; } .avatar-content .title { font-size: 20px; font-weight: 500; margin-bottom: 5px; color: var(--tg-primary-color); text-align: left; } .avatar-content span { display: block; text-align: left; font-size: 15px; line-height: 1; } .testimonial-active [class*="col-"] { padding: 0 15px; } .testimonial-active .slick-dots { display: flex; align-items: center; justify-content: center; margin: 0; padding: 0; gap: 20px; margin-top: 60px; } .testimonial-active .slick-dots li { list-style: none; line-height: 0; } .testimonial-active .slick-dots li button { text-indent: -99999999999px; width: 15px; height: 15px; border: none; border-radius: 50%; background: #262E32; line-height: 1; } .testimonial-active .slick-dots li.slick-active button { background: var(--tg-primary-color); border-radius: 10px; width: 30px; } /* testimonial-two */ .testimonial-area-two { position: relative; padding: 120px 0 120px; z-index: 1; } .testimonial-shape { background-size: cover; background-position: center; width: 1091px; position: absolute; height: 523px; left: 50%; transform: translateX(-50%); bottom: 10%; z-index: -1; } .testimonial-item-two { text-align: center; } .testimonial-content-two p { font-size: 24px; color: var(--tg-secondary-color); font-style: italic; font-weight: 500; line-height: 1.6; width: 92%; margin: 0 auto 40px; } .testimonial-content-two .avatar-content .title { color: var(--tg-secondary-color); } .testimonial-active-two .col-12 { padding: 0 15px; } /*============================= 20. CTA ===============================*/ .cta-bg { background-size: cover; background-position: center; margin-top: 220px; } .cta-inner-wrap { padding: 85px 0; position: relative; } .cta-img { position: absolute; left: 0; bottom: 0; } .cta-content .section-title .title { text-transform: capitalize; font-weight: 600; line-height: 1.4; } .cta-content .call-now { display: inline-flex; align-items: center; } .cta-content .call-now i { width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; background: var(--tg-white); color: var(--tg-primary-color); line-height: 0; border-radius: 50%; font-size: 20px; flex: 0 0 auto; margin-right: 15px; } .cta-content .call-now a { font-size: 40px; font-family: var(--tg-heading-font-family); color: var(--tg-white); line-height: 1; } .cta-content .call-now a:hover { color: var(--tg-white); } /* cta-two */ .cta-item-wrap { border-radius: 10px; overflow: hidden; } .cta-item { display: flex; align-items: center; justify-content: center; background: #161616; padding: 40px 30px; height: 100%; } .cta-item .icon { font-size: 55px; line-height: 0; color: var(--tg-white); margin-right: 15px; } .cta-item .content span { display: block; font-size: 25px; text-transform: uppercase; color: var(--tg-white); font-weight: 500; margin-bottom: 10px; } .cta-item .content a, .cta-item .content p { font-size: 15px; font-weight: 600; line-height: 24px; color: var(--tg-white); margin-bottom: 0; } .cta-item-wrap .row [class*="col-"]:nth-child(2) .cta-item { background: var(--tg-primary-color); } /* cta-three */ .cta-area-three { margin-top: -90px; position: relative; z-index: 2; } /*============================= 21. Error ===============================*/ .error-area { display: flex; align-items: center; justify-content: center; padding: 120px 0; } .error-img { text-align: center; margin-bottom: 50px; } .error-content { text-align: center; } .error-content .title { font-size: 60px; margin-bottom: 15px; } .error-content p { margin-bottom: 35px; font-size: 18px; } /*============================= 22. Blog ===============================*/ .blog-post-item { margin-bottom: 30px; } .blog-meta .list-wrap { display: flex; align-items: center; flex-wrap: wrap; gap: 25px; margin-bottom: 10px; } .blog-meta .list-wrap li { font-size: 15px; text-transform: capitalize; } .blog-meta .list-wrap li i { margin-right: 8px; } .blog-meta .list-wrap li a { color: var(--tg-paragraph-color); } .blog-meta .list-wrap li a:hover { color: var(--tg-primary-color); } .blog-post-content .title { margin-bottom: 20px; font-size: 24px; } .blog-post-content .title a { color: inherit; display: inline; padding-bottom: 0; -webkit-transition: background-size 0.8s cubic-bezier(0.25, 0.8, 0.25, 1); transition: background-size 0.8s cubic-bezier(0.25, 0.8, 0.25, 1); background-image: -webkit-gradient(linear, left top, left bottom, from(currentColor), color-stop(98%, currentColor)); background-image: linear-gradient(to bottom, currentColor 0%, currentColor 98%); background-size: 0 1px; background-repeat: no-repeat; background-position: left 100%; } .blog-post-content .title a:hover { background-size: 100% 1px; color: var(--tg-primary-color); } .blog-post-thumb { overflow: hidden; border-radius: 10px; position: relative; margin-bottom: 30px; } .blog-post-thumb img { width: 100%; height: 270px; object-fit: cover; transform: scale(1); transition: all .8s cubic-bezier(.25, .46, .45, .94); } .blog-post-item-two:hover .blog-post-thumb img, .blog-post-item:hover .blog-post-thumb img { transform: scale(1.1); } .blog-post-thumb .tag { position: absolute; left: 20px; top: 20px; font-size: 12px; font-family: var(--tg-heading-font-family); text-transform: uppercase; font-weight: 700; color: var(--tg-white); background: var(--tg-primary-color); display: block; padding: 7px 10px; border-radius: 5px; } .blog-post-thumb .tag:hover { background: var(--tg-secondary-color); color: var(--tg-white); } .blog-post-content p { margin-bottom: 20px; } .blog-post-content .link-btn { font-family: var(--tg-heading-font-family); text-transform: uppercase; text-decoration: underline; font-weight: 500; color: var(--tg-paragraph-color); display: inline-block; } .blog-post-content .link-btn:hover { color: var(--tg-secondary-color); } /* blog-two */ .blog-post-item-two { margin-bottom: 30px; } .blog-post-item-two .blog-post-thumb { margin-bottom: 25px; } .blog-post-item-two .blog-meta .list-wrap { margin-bottom: 15px; } /* blog-three */ .blog-post-item-three { margin-bottom: 30px; } .blog-post-thumb-three { border-radius: 10px 10px 0 0; overflow: hidden; position: relative; } .blog-post-thumb-three .post-date { position: absolute; right: 30px; top: 30px; color: var(--tg-white); font-size: 15px; font-weight: 700; text-transform: uppercase; line-height: 1; display: block; background: var(--tg-primary-color); padding: 12px 14px; border-radius: 5px; } .blog-post-thumb-three img { width: 100%; height: 330px; object-fit: cover; transition: all .8s cubic-bezier(.25, .46, .45, .94); transform: scale(1); } .blog-post-item-three:hover .blog-post-thumb-three img { transform: scale(1.1); } .blog-post-content-three { border-radius: 0px 0px 10px 10px; border: 1px solid #E3E3E3; padding: 40px 40px 35px 40px; border-top: none; transition: .3s linear; background: var(--tg-white); } .blog-post-item-three:hover .blog-post-content-three { box-shadow: 0px 0px 50px 0px rgba(0, 0, 0, 0.10); border-color: var(--tg-white); } .blog-post-content-three .tag { display: inline-flex; align-items: center; color: #ABABAB; font-size: 15px; font-weight: 500; line-height: normal; text-transform: uppercase; line-height: 1; margin-bottom: 5px; } .blog-post-content-three .tag:hover { color: var(--tg-primary-color); } .blog-post-content-three .tag i { color: var(--tg-primary-color); margin-right: 5px; } .blog-post-content-three .title { margin-bottom: 0; font-size: 30px; font-weight: 600; line-height: 1.35; } .blog-post-content-three .title a { color: inherit; display: inline; padding-bottom: 0; -webkit-transition: background-size 0.8s cubic-bezier(0.25, 0.8, 0.25, 1); transition: background-size 0.8s cubic-bezier(0.25, 0.8, 0.25, 1); background-image: -webkit-gradient(linear, left top, left bottom, from(currentColor), color-stop(98%, currentColor)); background-image: linear-gradient(to bottom, currentColor 0%, currentColor 98%); background-size: 0 1px; background-repeat: no-repeat; background-position: left 100%; } .blog-post-content-three .title a:hover { background-size: 100% 1px; color: var(--tg-primary-color); } .blog-active [class*="col-"] { padding: 0 15px; } .blog-nav { display: flex; align-items: center; justify-content: flex-end; margin-bottom: 50px; gap: 20px; } .blog-nav .slick-arrow { border: none; border-radius: 5px; background: var(--tg-white); box-shadow: 0px 0px 50px 0px rgba(0, 0, 0, 0.10); width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; font-size: 20px; line-height: 0; -webkit-text-stroke: 1px var(--tg-secondary-color); color: transparent; } .blog-nav .slick-arrow:hover { color: var(--tg-white); background: var(--tg-primary-color); -webkit-text-stroke: transparent; } /* inner-blog */ .blog-item { margin-bottom: 30px; } .blog-thumb img { border-radius: 10px 10px 0 0; } .blog-content { border-radius: 0px 0px 10px 10px; background: var(--tg-white); box-shadow: 0px 0px 50px 0px rgba(0, 0, 0, 0.06); padding: 45px 45px; } .blog-content .title { font-size: 40px; margin-bottom: 20px; } .blog-content p { margin-bottom: 30px; } .blog-content .link-btn { font-family: var(--tg-heading-font-family); text-transform: uppercase; text-decoration: underline; font-weight: 500; color: var(--tg-secondary-color); display: inline-block; line-height: 1; } .blog-content .link-btn:hover { color: var(--tg-primary-color); } /* blog-sidebar */ .blog-sidebar { border-radius: 10px; border: 1px solid #CFCFCF; padding: 40px 25px 50px; position: sticky; top: 100px; } .blog-widget { margin-bottom: 40px; } .blog-widget:last-child { margin-bottom: 0; } .widget-title { font-size: 22px; margin-bottom: 15px; } .sidebar-search form { position: relative; } .sidebar-search form input { width: 100%; border-radius: 2px; border: 1px solid #E9E9E9; font-size: 14px; font-weight: 400; color: var(--tg-secondary-color); padding: 20px 80px 20px 24px; line-height: 1; height: 60px; } .sidebar-search form input::placeholder { font-size: 14px; font-weight: 400; color: #9C9C9C; } .sidebar-search form button { border: none; position: absolute; right: 0; top: 0; height: 60px; width: 66px; display: flex; align-items: center; justify-content: center; background: var(--tg-primary-color); color: var(--tg-white); font-size: 18px; border-radius: 0 2px 2px 0; } .sidebar-search form button:hover { background: var(--tg-secondary-color); } .rc-post-item { display: flex; align-items: center; border-bottom: 1px solid #D9D9D9; padding-bottom: 20px; margin-bottom: 20px; } .rc-post-item:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: none; } .rc-post-item .thumb { width: 90px; flex: 0 0 90px; margin-right: 10px; } .rc-post-item .thumb img { border-radius: 2px; } .rc-post-item .content .title { font-size: 18px; font-weight: 600; margin-bottom: 10px; } .rc-post-item .content span { display: flex; align-items: center; line-height: 1; font-size: 14px; color: #8E8E8E; gap: 8px; } .sidebar-cat-list .list-wrap li { border-bottom: 1px solid #D9D9D9; padding-bottom: 20px; margin-bottom: 20px; } .sidebar-cat-list .list-wrap li:last-child { margin-bottom: 0; border-bottom: none; padding-bottom: 0; } .sidebar-cat-list .list-wrap li a { color: #757589; display: flex; align-items: center; line-height: 1.4; font-weight: 600; font-family: var(--tg-heading-font-family); gap: 5px; } .sidebar-cat-list .list-wrap li a:hover { color: var(--tg-primary-color); } .sidebar-tag-list .list-wrap { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; } .sidebar-tag-list .list-wrap li a { color: #757589; font-size: 12px; font-weight: 500; line-height: normal; text-transform: uppercase; border-radius: 2px; border: 1px solid #E0E0E0; display: block; padding: 10px 11px; } .sidebar-tag-list .list-wrap li a:hover { background: var(--tg-primary-color); border-color: var(--tg-primary-color); color: var(--tg-white); } /* blog-details */ .blog-content.blog-details-content .title { font-size: 30px; } .blog-details-content blockquote { margin: 0 0 50px; text-align: center; border-radius: 10px; border: 1px solid var(--tg-primary-color); padding: 35px 30px; } .blog-details-content blockquote .icon { font-size: 50px; line-height: 1; color: var(--tg-primary-color); margin-bottom: 10px; } .blog-details-content blockquote p { color: var(--tg-secondary-color); font-family: var(--tg-heading-font-family); font-size: 18px; font-style: italic; font-weight: 600; line-height: 1.5; margin-bottom: 20px; } .blog-details-content blockquote cite { font-style: normal; font-size: 18px; font-family: var(--tg-heading-font-family); font-weight: 700; color: var(--tg-secondary-color); line-height: 1; } .bd-img-wrap { margin-top: 40px; } .bd-img-wrap img { border-radius: 10px; margin-bottom: 30px; } .bd-img-wrap .row { --bs-gutter-x: 20px; } .post-tags { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; } .bd-content-bottom .post-tags .title { margin-bottom: 0; font-size: 16px; font-weight: 500; } .post-tags .list-wrap { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; } .post-tags .list-wrap li a { color: #757589; font-size: 12px; font-weight: 500; line-height: normal; text-transform: uppercase; display: block; border-radius: 2px; border: 1px solid #E0E0E0; padding: 10px 12px; } .post-tags .list-wrap li a:hover { background: var(--tg-primary-color); color: var(--tg-white); border-color: var(--tg-primary-color); } .blog-post-share .list-wrap { display: flex; align-items: center; justify-content: flex-end; gap: 15px; } .blog-post-share .list-wrap li a { width: 45px; height: 45px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--tg-secondary-color); color: var(--tg-white); font-size: 15px; } .blog-post-share .list-wrap li a:hover { background: var(--tg-primary-color); } .comments-wrap { border-top: 1px solid #D9D9D9; padding-top: 60px; margin-top: 60px; } .comments-wrap-title { font-size: 22px; margin-bottom: 35px; } .comments-box { display: flex; align-items: flex-start; border-bottom: 1px solid #D9D9D9; padding-bottom: 40px; margin-bottom: 40px; } .latest-comments .children .comments-box { padding: 0 0 40px 100px; } .latest-comments > .list-wrap > li:last-child .comments-box { border-bottom: none; padding-bottom: 0; margin-bottom: 0; } .comments-avatar { width: 80px; flex: 0 0 auto; margin-right: 20px; } .comments-text .avatar-name .name { font-size: 18px; display: flex; align-items: center; margin-bottom: 5px; justify-content: space-between; } .comments-text .comment-reply-link { color: var(--tg-primary-color); font-size: 12px; font-weight: 500; line-height: normal; display: block; border-radius: 2px; background: #FFF7F3; padding: 8px 12px; text-transform: uppercase; } .comments-text .comment-reply-link:hover { background: var(--tg-primary-color); color: var(--tg-white); } .comments-text .avatar-name .date { display: block; font-size: 14px; line-height: normal; } .comments-text .avatar-name { margin-bottom: 20px; } .comments-text p { margin-bottom: 0; } .latest-comments { margin-bottom: 70px; } .comment-reply-title { font-size: 22px; margin-bottom: 30px; } .comment-form .row { --bs-gutter-x: 10px; } .comment-form .form-grp { margin-bottom: 10px; } .comment-form .form-grp textarea, .comment-form .form-grp input { border-radius: 5px; border: 1px solid #BDBDBD; width: 100%; color: var(--tg-secondary-color); font-size: 15px; font-weight: 400; line-height: normal; padding: 20px 15px; height: 60px; display: block; } .comment-form .form-grp textarea { min-height: 184px; max-height: 184px; } .comment-form .form-grp textarea::placeholder, .comment-form .form-grp input::placeholder { color: #9B9B9B; font-size: 15px; font-weight: 400; } .comment-form .checkbox-grp { display: flex; align-items: flex-start; margin-bottom: 30px; margin-top: 30px; } .comment-form .checkbox-grp input { width: 15px; margin-top: 3px; margin-right: 10px; height: 15px; border-radius: 2px; } .comment-form .checkbox-grp label { color: var(--tg-secondary-color); user-select: none; line-height: 1.4; font-weight: 500; font-size: 15px; } .blog-style-one .blog-post-item-two { margin-bottom: 50px; } .blog-style-two .blog-post-item { margin-bottom: 60px; } /*============================= 23. Contact ===============================*/ .contact-info-item { border-radius: 10px; border: 1px solid #C2C2C2; text-align: center; padding: 40px 30px 40px; height: 100% !important; margin-bottom: 35px; } .contact-info-wrap{ margin-bottom: 5rem; } .contact-info-item .icon { font-size: 36px; line-height: 1; color: var(--tg-primary-color); margin-bottom: 22px; } .contact-info-item .content .title { margin-bottom: 20px; font-size: 22px; font-weight: 600; text-transform: uppercase; } .contact-info-item .content p { margin-bottom: 0; font-size: 20px; font-weight: 500; color: var(--tg-secondary-color); line-height: 1.54; } .contact-info-item .content p a { color: var(--tg-secondary-color); } .contact-info-item .content p a:hover { color: var(--tg-primary-color); } .contact-form-wrap { border-radius: 10px; background: var(--tg-secondary-color); padding: 45px 35px; } .contact-form-wrap .title { color: var(--tg-white); font-size: 30px; margin-bottom: 30px; } .contact-form-wrap .form-grp { margin-bottom: 20px; } .contact-form-wrap .form-grp textarea, .contact-form-wrap .form-grp input { width: 100%; border-radius: 5px; border: 1px solid #5C5C5C; background: transparent; color: var(--tg-white); font-size: 15px; font-weight: 400; padding: 15px 22px; height: 50px; line-height: 1; display: block; } .contact-form-wrap .form-grp textarea { min-height: 183px; max-height: 183px; } .contact-form-wrap .form-grp textarea::placeholder, .contact-form-wrap .form-grp input::placeholder { color: #898989; font-size: 15px; font-weight: 400; } .contact-form-wrap .btn:hover { color: var(--tg-primary-color); } .contact-form-wrap .btn::before { background: var(--tg-white); } .contact-form-wrap .row { --bs-gutter-x: 20px; } .contact-map { width: 100%; height: 100%; } .contact-map iframe { width: 100%; height: 100%; border-radius: 10px; } .ajax-response.error { margin-top: 20px; color: red; } .ajax-response.success { margin-top: 20px; color: green; } /*============================= 24. Footer ===============================*/ .footer-area { background: var(--tg-white); } .footer-newsletter-wrap { padding: 60px 0; border-bottom: 1px solid #464646; } .footer-logo img { max-height: 58px; } .footer-newsletter-form form { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 20px; } .footer-newsletter-form .form-grp { position: relative; width: 370px; } .footer-newsletter-form .form-grp input { width: 100%; border-radius: 5px; border: 1px solid var(--tg-gray-two); background: transparent; font-size: 14px; color: var(--tg-white); padding: 17px 35px; line-height: 1; height: 50px; } .footer-newsletter-form .form-grp input::placeholder { font-size: 14px; color: var(--tg-gray-two); } .footer-newsletter-form .form-grp label { font-size: 14px; color: var(--tg-gray-two); position: absolute; left: 16px; top: 50%; transform: translateY(-50%); } .footer-top { padding: 60px 0 20px; } .footer-widget { margin-bottom: 40px; display: flex ; flex-direction: column; justify-content: center; align-items: start; } .footer-widget.footer-widget-right{ align-items: start; } .fw-title { font-size: 20px; margin-bottom: 25px; color: var(--tg-secondary-color); font-weight: 500; } .footer-contact .list-wrap li { display: flex; align-items: baseline; font-size: 15px; color: var(--tg-gray-three); line-height: 1.4; margin-bottom: 20px; } .footer-contact .list-wrap li:last-child { margin-bottom: 0; } .footer-contact .list-wrap li a { color: var(--tg-gray-three); } .footer-contact .list-wrap li a:hover { color: var(--tg-primary-color); } .footer-contact .list-wrap li i { font-size: 18px; color: var(--tg-primary-color); margin-right: 15px; transform: translateY(2px); } .footer-link .list-wrap li { padding-left: 0px; position: relative; line-height: 1.2; margin-bottom: 12px; } .footer-link .list-wrap li:last-child { margin-bottom: 0; } .footer-link .list-wrap li::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 6px; height: 6px; background: #949494; display: none; } .contact-item .title p{ margin-bottom: 5px; color: var(--tg-heading-font-color); } .contact-item .content p{ color: var(--tg-gray-two); } .contact-item .content a { color: var(--tg-gray-two); transition: all 0.3s ease-in-out; margin-bottom: 15px; display: inline-block; } .contact-item .content a:hover{ color: var(--tg-orange); } .footer-link .list-wrap li a { color: var(--tg-gray-two); font-size: 15px; position: relative; padding-left: 0px; display: inline-block; } .footer-link .list-wrap li a:hover { color: var(--tg-gray-two); } .footer-link .list-wrap li a::before { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: var(--tg-gray-two); -webkit-transform-origin: right top; -ms-transform-origin: right top; transform-origin: right top; -webkit-transform: scale(0, 1); -ms-transform: scale(0, 1); transform: scale(0, 1); -webkit-transition: transform 0.4s cubic-bezier(1, 0, 0, 1); transition: transform 0.4s cubic-bezier(.74, .72, .27, .24); } ul.footer-contact-menu { list-style: none; padding-left: 0px; } .footer-link .list-wrap li a:hover::before { -webkit-transform-origin: left top; -ms-transform-origin: left top; transform-origin: left top; -webkit-transform: scale(1, 1); -ms-transform: scale(1, 1); transform: scale(1, 1); } .materials-list .list-wrap li { display: flex; align-items: flex-start; margin-bottom: 25px; } .materials-list .list-wrap li:last-child { margin-bottom: 0; } .materials-list .list-wrap li .icon { font-size: 35px; line-height: 1; margin-right: 15px; color: #6B6B6B; } .materials-list .list-wrap li .content .title { font-size: 18px; font-weight: 400; color: var(--tg-white); margin-bottom: 10px; } .materials-list .list-wrap li .content span { display: block; line-height: 1; font-size: 15px; color: var(--tg-gray-three); } .footer-bottom { border-top: 1px solid #464646; padding: 15px 0; } .copyright-text p { margin-bottom: 0; font-size: 15px; color: var(--tg-gray-three); text-align: center; } .copyright-text p a { color: var(--tg-gray-three); font-weight: 600; } .copyright-text p a:hover { color: var(--tg-primary-color); } .footer-social .list-wrap { display: flex; align-items: center; justify-content: flex-end; gap: 20px; } .footer-social .list-wrap li a { font-size: 14px; color: var(--tg-gray-three); } .footer-social .list-wrap li a:hover { color: var(--tg-white); } /* footer-two */ .footer-area-two { background: #171717; } .footer-top-two { padding: 90px 0 40px; } .footer-newsletter-two { position: relative; height: 100%; } .footer-newsletter-two::before { content: ""; position: absolute; right: 80px; top: 0; width: 1px; height: 88%; background: #464646; } .footer-top-two .footer-newsletter-form form { align-items: flex-start; justify-content: flex-start; flex-direction: column; } /* zig-zag */ .zigzag-image img { border-radius: 20px; } /*============================= 25. Preloader ===============================*/ #preloader { background: var(--tg-white); height: 100%; width: 100%; position: fixed; margin-top: 0px; top: 0px; z-index: 999; } .ta-preloader-block { width: 100%; height: 100%; position: relative; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; text-align: center; } .ta-spinner-eff { position: relative; width: 50px; height: 50px; -webkit-animation: taRotation 12.8s steps(1) 0s infinite; animation: taRotation 12.8s steps(1) 0s infinite; } .ta-spinner-eff .ta-bar { position: absolute; background-color: var(--tg-primary-color); } .ta-spinner-eff .ta-bar-top { width: 100%; height: 7px; position: absolute; top: 0; left: 0; transform-origin: left top; transform: scale(0, 1); -webkit-animation: bar-top 3.2s linear 0s infinite; animation: bar-top 3.2s linear 0s infinite; } .ta-spinner-eff .ta-bar-right { width: 7px; height: 100%; position: absolute; top: 0; right: 0; transform-origin: left top; transform: scale(1, 0); -webkit-animation: bar-right 3.2s linear 0s infinite; animation: bar-right 3.2s linear 0s infinite; } .ta-spinner-eff .ta-bar-bottom { width: 100%; height: 7px; position: absolute; right: 0; bottom: 0; transform-origin: right top; transform: scale(0, 1); -webkit-animation: bar-bottom 3.2s linear 0s infinite; animation: bar-bottom 3.2s linear 0s infinite; } .ta-spinner-eff .ta-bar-left { width: 7px; height: 100%; position: absolute; left: 0; bottom: 0; transform-origin: left bottom; transform: scale(1, 0); -webkit-animation: bar-left 3.2s linear 0s infinite; animation: bar-left 3.2s linear 0s infinite; } @keyframes taRotation { 0% { transform: rotate(0deg); } 25% { transform: rotate(90deg); } 50% { transform: rotate(180deg); } 75% { transform: rotate(270deg); } 100% { transform: rotate(360deg); } } @keyframes bar-top { 0% { transform: scale(0,1); } 12.5% { transform: scale(1,1); } 87.5% { transform: scale(1,1); } 100% { transform: scale(0,1); } } @keyframes bar-right { 0% { transform: scale(1,0); } 12.5% { transform: scale(1,0); } 25% { transform: scale(1,1); } 75% { transform: scale(1,1); } 87.5% { transform: scale(1,0); } 100% { transform: scale(1,0); } } @keyframes bar-bottom { 0% { transform: scale(0,1); } 25% { transform: scale(0,1); } 37.5% { transform: scale(1,1); } 62.5% { transform: scale(1,1); } 75% { transform: scale(0,1); } 100% { transform: scale(0,1); } } @keyframes bar-left { 0% { transform: scale(1,0); } 37.5% { transform: scale(1,0); } 50% { transform: scale(1,1); } 62.5% { transform: scale(1,0); } 100% { transform: scale(1,0); } } /* sustainability */ .sustainability-area.project-content-four .title { margin-bottom: -60px; color: var(--tg-white); font-size: 30px; } .flip-card { perspective: 1000px; overflow: hidden; transition: transform 0.6s ease; } .flip-card .project-thumb-four { transition: transform 0.6s ease; transform-style: preserve-3d; } .flip-card:hover .project-thumb-four { transform: rotateY(180deg); } .project-content-four { position: absolute; bottom: 0; left: 0; width: 100%; padding: 20px; text-align: center; pointer-events: none; } .project-content-four h2, .project-content-four p { transition: opacity 0.6s ease; } .project-content-four p { color: var(--tg-white); opacity: 0; } .flip-card:hover .project-content-four p { opacity: 1; } .flip-card:hover .project-content-four h2 { opacity: 0; } .custom-pad{ padding:90px 0; } .sustainability-area { padding-bottom: 0px; } .section-title.text-center.title-style-two { margin-bottom: 40px; } .footer-pad{ padding-left: 80px; } .image-anime img { border-radius: 20px; width: 100%; object-fit: contain; } .contact-form { background: var(--tg-section-background); padding: 50px; border-radius: 20px; } .contact-form h3{ text-align: center; margin-bottom: 40px; } .select_option_wrapper .select_arrow { position: absolute; top: 30%; right: 10px; transform: translateY(-50%) rotate(180deg); } #contact-form textarea { height: 150px; } #contact-form input:not([type=submit]), #contact-form select, #contact-form textarea { font-size: 15px; padding: 10px 15px; border-radius: 5px; margin-bottom: 15px; color: var(--tg-gray-two); width: 100%; border: 1px solid #f4f4f4; } .team-member-profile{ background: #f4f4f4; padding: 30px; border-radius: 20px; } .profile-info .person-name h2{ text-align: center; } .profile-info p{ text-align: center; } .work-icon img { width: 40px; height: 40px; } /* projects-page */ .project_title{ margin-bottom: 40px; } .project_title h2{ text-align: center; font-size: 40px; } .project_image{ position: relative; } .project_image img{ border-radius: 20px !important; } .project_image .project_content { position: absolute; left: 80px; bottom: 80px; max-width: 390px; width: 100%; padding: 30px 30px; background-color: var(--tg-white); border-radius: 20px; } .project_content ul{ list-style: none; padding-left: 0px; } .granite_project{ padding: 0px 0px; } .zigzag-section .section-title.text-center.title-style-two{ margin-bottom: 0px; } .projects_listing hr { border-bottom: 1px solid var(--tg-heading-font-color); border-top: 0 none; margin: 30px 0; padding: 0; } .aggregate_project{ padding-bottom: 0px; } .projects_listing .row > div:nth-child(2) .project_listing_box { margin-top: 40px; } .zigzag-section .zigzag-item { margin-top: 40px; } section.project-area-four.custom-pad { padding-bottom: 0px; } .wpcf7 form.invalid .wpcf7-response-output, .wpcf7 form.unaccepted .wpcf7-response-output, .wpcf7 form.payment-required .wpcf7-response-output { border-color: #ffb900; color: #fff; } .contact-form-wrap .btn:hover { color: #fff; } #menu-header-main-menu .current-menu-item > a, #menu-header-main-menu .current_page_item > a { color: var(--tg-orange); } #menu-header-main-menu > li:last-child > a { color: var(--tg-white) !important; } .consultation-area .wpcf7-response-output { color: #101010 !important; }