/* Theme Name: Xolio - Creative Agency HTML5 Template Support: themegenix@gmail.com Description: Xolio - Creative Agency HTML5 Template. Version: 1.0 */ /* CSS Index ============================ 01. Variable CSS 02. Header 03. Mobile Menu 04. Breadcrumb 05. Banner 06. Slider 07. Services 08. About 09. Company 10. Success 11. History 12. Agency 13. Developr 14. Tools 15. Brand 16. Client 17. Team 18. Community 19. Counter 20. Project 21. Faq 22. Testimonial 23. Consultation 24. Pricing 25. Work 26. Blog 27. Pagination 28. Newsletter 29. Contact 30. Footer 31. Preloader ============================ */ /*============================= 1. Google Fonts ===============================*/ /*============================= 01. Variable CSS ===============================*/ :root { --tg-body-font-family: 'yekan', sans-serif; --tg-heading-font-family: 'iransans', sans-serif; --tg-primary-color: #F89E52; --tg-secondary-color: #3482FF; --tg-body-font-color: #666666; --tg-heading-font-color: #0B0B0B; --tg-banner-title-color: #2A2A2A; --tg-paragraph-color: #666666; --tg-body-font-size: 16px; --tg-body-font-weight: 400; --tg-heading-font-weight: 700; --tg-body-line-height: 1.7; --tg-heading-line-height: 1.2; --tg-section-background: #292F3F; --tg-section-background-two: #1F1D28; --tg-section-background-three: #26242D; --tg-menu-color: #252541; --tg-arrow-color: #6F7C90; --tg-border-color: #F3F3F3; --tg-border-color-two: #D9D9D9; --tg-form-border-color: #D5D5D5; --tg-old-lace: #FFF2E4; --tg-magnolia: #F0EBFF; --tg-lavender: #E4F1FF; --tg-blue: #2B78F3; --tg-blue-two: #265FDB; --tg-blue-two-three: #398DDB; --tg-indigo: #A666F7; --tg-purple: #9270FF; --tg-dark-electric: #605E7A; --tg-pink: #F84D55; --tg-red: #F76766; --tg-orange: #F26F3B; --tg-yellow: #F1F026; --tg-yellow-two: #F5A623; --tg-yellow-three: #ECB321; --tg-green: #1B9A81; --tg-green-two: #7DDB39; --tg-teal: #57C0CE; --tg-cyan: #0dcaf0; --tg-white: #ffffff; --tg-black: #292930; --tg-black-two: #1D1D25; --tg-black-three: #1E1C1E; --tg-black-four: #212737; --tg-gray: #F4F3F9; --tg-gray-two: #FBFDFF; --tg-gray-three: #7E7E8C; --tg-gray-four: #B8B8C5; --tg-gray-five: #818080; --tg-gray-six: #F7F7F7; --tg-gray-seven: #6C7183; --tg-gray-eight: #F4F4F4; --tg-granite-gray: #6B645D; --tg-bright-gray: #EDEEF1; --tg-spanish-gray: #989898; --tg-cadet-grey: #92A5B4; --tg-cultured: #F3F7FA; --tg-black-coral: #5F5F71; --tg-silver: #C5C7CB; --tg-silver-two: #AEAEAE; --tg-silver-three: #AFAFAF; --tg-silver-three: #8D959B; --tg-silver-foil: #B0B0B0; --tg-manatee: #9E9DA9; --tg-onyx: #1D1D25; --facebook: #3b5998; --twitter: #00acee; --linkedin: #1976d2; --pinterest: #3b5998; --youtube: #c4302b; --skype: #00aff0; } @font-face { font-family: yekan; font-style: normal; font-weight: 300; src: url('../fonts/yekan/yekanRegular.eot'); src: url('../fonts/yekan/yekanRegulard41d.eot?#iefix') format('embedded-opentype'), url('../fonts/yekan/yekanRegular.woff') format('woff'), url('../fonts/yekan/yekanRegular.ttf') format('truetype'); font-display: swap; } @font-face { font-family: yekannormal; font-style: normal; font-weight: normal; src: url('../fonts/yekan/yekanMedium.eot'); src: url('../fonts/yekan/yekanMediumd41d.eot?#iefix') format('embedded-opentype'), url('../fonts/yekan/yekanMedium.woff') format('woff'), url('../fonts/yekan/yekanMedium.ttf') format('truetype'); font-display: swap; } @font-face { font-family: yekanbold; font-style: normal; font-weight: bold; src: url('../fonts/yekan/yekanBold.eot'); src: url('../fonts/yekan/yekanBoldd41d.eot?#iefix') format('embedded-opentype'), url('../fonts/yekan/yekanBold.woff') format('woff'), url('../fonts/yekan/yekanBold.ttf') format('truetype'); font-display: swap; } @font-face { font-family: IRANSans; font-style: normal; font-weight: bold; src: url('../fonts/eot/IRANSansWeb(FaNum)_Bold.eot'); src: url('../fonts/eot/IRANSansWeb(FaNum)_Bold.eot?#iefix') format('embedded-opentype'), /* IE6-8 */ url('../fonts/woff2/IRANSansWeb(FaNum)_Bold.woff2') format('woff2'), /* FF39+,Chrome36+, Opera24+*/ url('../fonts/woff/IRANSansWeb(FaNum)_Bold.woff') format('woff'), /* FF3.6+, IE9, Chrome6+, Saf5.1+*/ url('../fonts/ttf/IRANSansWeb(FaNum)_Bold.ttf') format('truetype'); } 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; direction:rtl; } .black-background { background: var(--tg-black); } img, .img { max-width: 100%; transition: all 0.3s ease-out 0s; } .f-left { float: right } .f-right { float: left } .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 100% 0; content: ""; height: 100%; right: 0; opacity: 0.6; position: absolute; top: 0; width: 100%; } .separator { border-top: 1px solid var(--tg-primary-color); } /* Bootstrap 5 */ .container { padding-right: 15px; padding-left: 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; background: var(--tg-secondary-color) none repeat scroll 100% 0; border: medium none; border-radius: 20px; color: var(--tg-white); cursor: pointer; display: inline-block; font-size: 16px; font-weight: 600; letter-spacing: 0; line-height: 1; margin-bottom: 0px; padding: 28px 55px; text-align: center; text-transform: capitalize; touch-action: manipulation; transition: all 700ms ease 0s; vertical-align: middle; white-space: nowrap; position: relative; overflow: hidden; z-index: 1; } .btn span { background: var(--tg-primary-color) none repeat scroll 100% 0; border-radius: 50%; display: block; height: 0; position: absolute; transform: translate(50%, -50%); -moz-transform: translate(50%, -50%); -webkit-transform: translate(50%, -50%); -ms-transform: translate(50%, -50%); -o-transform: translate(50%, -50%); transition: width 0.6s ease 0s, height 0.6s ease 0s; -moz-transition: width 0.6s ease 0s, height 0.6s ease 0s; -webkit-transition: width 0.6s ease 0s, height 0.6s ease 0s; -ms-transition: width 0.6s ease 0s, height 0.6s ease 0s; -o-transition: width 0.6s ease 0s, height 0.6s ease 0s; width: 0; z-index: -1; } .btn:hover > span { height: 562.5px; width: 562.5px; } .btn:hover { color: var(--tg-white); } .breadcrumb > .active { color: var(--tg-primary-color); } /* scrollUp */ .scroll-top { width: 40px; height: 40px; line-height: 40px; position: fixed; bottom: -10%; left: 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%; right: 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: 1400px; } .transparent-header { position: absolute; right: 0; top: 0px; width: 100%; z-index: 9; height: auto; } .menu-area { padding: 7px 0; } .menu-nav { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-start; } .navbar-wrap { display: flex; flex-grow: 1; } .navbar-wrap ul { display: flex; flex-direction: row; flex-wrap: wrap; padding: 0 0; margin: 0 auto 0 0; } .navbar-wrap ul li { list-style: none; display: block; position: relative; } .navbar-wrap ul li a { font-size: 16px; font-weight: 500; text-transform: capitalize; color: var(--tg-menu-color); padding: 35px 18px; display: block; line-height: 1; position: relative; z-index: 1; } .navbar-wrap > ul > li.active > a, .navbar-wrap > ul > li:hover > a { color: var(--tg-primary-color); } .navbar-wrap > ul > li.menu-item-has-children > a::after { content: "\f078"; font-family: "Font Awesome 5 Pro"; font-weight: 400; margin-right: 10px; } .main-menu .navigation li.menu-item-has-children .dropdown-btn { display: none; } .header-action > ul { display: flex; align-items: center; margin-right: 55px; } .header-action > ul li { position: relative; margin-right: 30px; } .header-action ul li:first-child { margin-right: 0; } .header-action ul li a { color: var(--tg-heading-font-color); font-size: 14px; } .header-action .header-btn .btn { color: var(--tg-white); font-size: 16px; padding: 19px 33px; font-weight: 500; background: var(--tg-primary-color); } .header-action .header-btn .btn span { background: var(--tg-secondary-color); } .navbar-wrap ul li .sub-menu { position: absolute; right: 0; left: 0; top: 100%; min-width: 230px; border: 1px solid #f5f5f5; background: var(--tg-white); margin: 0 0; transform: scale(1 , 0); transform-origin: 100% 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); border-radius: 15px; padding: 18px 0; display: block; visibility: hidden; opacity: 0; z-index: 9; } .navbar-wrap ul li .sub-menu .sub-menu { left: auto; right: 100%; top: 0; } .navbar-wrap ul li .sub-menu li { margin-right: 0; text-align: right; display: block; } .navbar-wrap ul li .sub-menu li a { padding: 9px 25px 9px 15px; line-height: 1.4; font-weight: 500; color: var(--tg-menu-color); text-transform: capitalize; -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; } .navbar-wrap ul li .sub-menu li a:hover, .navbar-wrap ul li .sub-menu li.active a { color: var(--tg-primary-color); } .navbar-wrap ul li:hover > .sub-menu { opacity: 1; visibility: visible; transform: scale(1); } .sticky-menu { position: fixed; right: 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.menu-area { padding: 0 0; } .sticky-menu .navbar-wrap ul li .sub-menu { border-radius: 0 0 15px 15px; } .menu-style-two .navbar-wrap ul li .sub-menu { background: var(--tg-black-two); border-color: #2a2a34; box-shadow: 0px 30px 70px 0px rgb(0 0 0 / 15%); } /* header-two */ .menu-style-two .navbar-wrap ul li a, .menu-style-two .navbar-wrap ul li .sub-menu li a { color: var(--tg-white); } .menu-style-two .navbar-wrap > ul > li.active > a, .menu-style-two .navbar-wrap > ul > li:hover > a { color: var(--tg-primary-color); } .menu-style-two.sticky-menu { background: var(--tg-black); box-shadow: 0 10px 15px rgb(0 0 0 / 10%); } /*============================= 03. Mobile Menu ===============================*/ .nav-outer .mobile-nav-toggler { position: relative; float: left; font-size: 40px; line-height: 50px; cursor: pointer; display: none; color: var(--tg-white); margin-left: 30px; top: 15px; } .nav-logo img { max-width: 150px; } .mobile-menu { position: fixed; left: 0; top: 0; width: 300px; padding-left: 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: right; } .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; left: 0px; top: 0px; width: 100%; height: 100%; z-index: 2; transition: all 700ms ease 0s; opacity: 0; visibility: hidden; background: rgb(255 255 255 / 50%); } .mobile-menu-visible .menu-backdrop { opacity: 1; visibility: visible; } .mobile-menu .menu-box { position: absolute; right: 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; left: 15px; top: 28px; line-height: 30px; width: 35px; text-align: center; font-size: 20px; color: var(--tg-primary-color); 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 25px 10px 60px; font-size: 16px; font-weight: 500; color: var(--tg-heading-font-color); text-transform: capitalize; -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-right: 20px; text-transform: capitalize; } .mobile-menu .navigation li ul li ul li a { margin-right: 40px; } .mobile-menu .navigation li ul li ul li ul li a { margin-right: 60px; } .mobile-menu .navigation li > a:before { content: ''; position: absolute; right: 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; left: 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: left; font-size: 30px; cursor: pointer; line-height: 1; color: var(--tg-primary-color); display: none; margin-top: 12px; } /* header-contact */ .header-contact-wrap { border-top: 1px solid rgba(4, 22, 67, 0.1); box-shadow: 0px 14px 44px rgba(0, 0, 0, 0.05); border-bottom: 1px solid rgba(4, 22, 67, 0.1); background: var(--tg-white); position: absolute; right: 0; top: 100px; left: 0; z-index: 5; padding: 25px 0 50px; opacity: 0; visibility: hidden; transition: .4s ease; transform: translateY(20px); } .header-contact-wrap.active { opacity: 1; visibility: visible; transform: translateY(0); } .sticky-menu .header-contact-wrap { top: 87px; } .body-contact-overlay { position: fixed; left: 0px; top: 100px; width: 100%; height: 100%; z-index: 2; transition: .4s ease; opacity: 0; visibility: hidden; background: rgb(255 255 255 / 50%); } .body-contact-overlay.active { opacity: 1; visibility: visible; } .header-contact-wrap .customer-support-wrap > .title, .header-contact-wrap .left-side-content > .title { margin-bottom: 0; font-weight: 600; font-size: 18px; border-bottom: 1px solid var(--tg-border-color); padding-bottom: 25px; margin-bottom: 30px; } .header-contact-wrap .contact-info-list .list-wrap li { display: flex; align-items: flex-start; line-height: 1.4; margin-bottom: 20px; } .header-contact-wrap .contact-info-list .list-wrap li:last-child { margin-bottom: 0; } .header-contact-wrap .contact-info-list .list-wrap li .icon { width: 20px; flex: 0 0 20px; margin-left: 12px; } .header-contact-wrap .contact-info-list .list-wrap li .icon svg { width: 100%; height: 100%; fill: var(--tg-black); } .header-contact-wrap .contact-info-list .list-wrap li .content span, .header-contact-wrap .contact-info-list .list-wrap li .content a { font-size: 15px; color: var(--tg-heading-font-color); display: block; } .header-contact-wrap .lats-chat { margin-top: 20px; } .header-contact-wrap .lats-chat a { font-weight: 600; font-size: 16px; text-decoration-line: underline; text-transform: capitalize; color: var(--tg-heading-font-color); display: inline-block; } .header-contact-wrap .lats-chat a:hover { color: var(--tg-primary-color); } .our-best-project { display: flex; align-items: center; border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 20px; overflow: hidden; padding: 0 35px 0 0; margin-right: 40px; } .our-best-project .content .title { font-weight: 400; font-size: 24px; margin-bottom: 30px; } .our-best-project .content .title span { font-weight: 700; } .our-best-project .content .btn { background: var(--tg-primary-color); padding: 17px 43px; border-radius: 15px; } .our-best-project .content .btn span { background: var(--tg-secondary-color); } .our-best-project .thumb { width: 214px; flex: 0 0 214px; } .customer-support-content { border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 20px; padding: 15px 22px 20px; margin-bottom: 15px; } .customer-support-content .content-top { display: flex; align-items: center; margin-bottom: 8px; } .customer-support-content .content-top img { width: 35px; flex: 0 0 35px; margin-left: 11px; } .customer-support-content .content-top .title { font-weight: 600; font-size: 16px; margin-bottom: 0; } .customer-support-content p { margin-bottom: 0; font-weight: 400; font-size: 14px; color: var(--tg-heading-font-color); } .customer-support-content p a { text-decoration: underline; color: #EF4C23; } .customer-support-wrap .content-bottom { flex-direction: column; align-items: flex-start; gap: 10px; } .customer-support-wrap .content-bottom a { color: var(--tg-heading-font-color); font-weight: 600; line-height: 1.2; } .customer-support-wrap .content-bottom a:hover { color: var(--tg-primary-color); } .header-contact-wrap.black-background { background: var(--tg-black); } .header-contact-wrap.black-background .contact-info-list .list-wrap li .icon svg { fill: var(--tg-silver-two); } .header-contact-wrap.black-background .customer-support-wrap > .title, .header-contact-wrap.black-background .left-side-content > .title { border-bottom: 1px solid rgba(255 255 255 / 10%); color: var(--tg-white); } .header-contact-wrap.black-background { border-top: 1px solid rgba(255 255 255 / 10%); border-bottom: 1px solid rgba(255 255 255 / 10%); } .header-contact-wrap.black-background .contact-info-list .list-wrap li .content span, .header-contact-wrap.black-background .contact-info-list .list-wrap li .content a { color: var(--tg-silver-two); } .header-contact-wrap.black-background .our-best-project .content .title { color: var(--tg-white); } .header-contact-wrap.black-background .lats-chat a { color: var(--tg-white); } .header-contact-wrap.black-background .our-best-project { border: 1px solid rgba(255 255 255 / 10%); } .header-contact-wrap.black-background .customer-support-content { border: 1px solid rgba(255, 255, 255, 0.1); } .header-contact-wrap.black-background .customer-support-content .content-top .title { color: var(--tg-white); } .header-contact-wrap.black-background .customer-support-content p { color: var(--tg-silver-two); } .header-contact-wrap.black-background .customer-support-wrap .content-bottom a { color: var(--tg-white); } .body-contact-overlay.black { background: rgb(0 0 0 / 50%); } /*============================= 04. Breadcrumb ===============================*/ .breadcrumb-area { position: relative; } .breadcrumb-content { text-align: center; } .breadcrumb-content .title { font-size: 78px; margin-bottom: 45px; line-height: 1; color: var(--tg-banner-title-color); } .breadcrumb-content .breadcrumb { display: inline-flex; flex-wrap: wrap; padding: 8px 26px; margin-bottom: 0; list-style: none; justify-content: center; background: var(--tg-gray); border-radius: 32px; } .breadcrumb-content .breadcrumb .breadcrumb-item { font-size: 18px; font-weight: 500; color: var(--tg-banner-title-color); } .breadcrumb-content .breadcrumb .breadcrumb-item a { color: var(--tg-silver-three); } .breadcrumb-content .breadcrumb .breadcrumb-item a:hover { color: var(--tg-primary-color); } .breadcrumb-content .breadcrumb-item+.breadcrumb-item::before { float: right; padding-left: 5px; color: var(--tg-banner-title-color); content: '/'; } .breadcrumb-content .breadcrumb-item+.breadcrumb-item { padding-right: 5px; } .breadcrumb-shape-wrap img { position: absolute; z-index: -1; } .breadcrumb-shape-wrap img:nth-child(1) { right: 18%; top: 36%; animation: animationFramesOne 20s infinite linear; } .breadcrumb-shape-wrap img:nth-child(2) { bottom: 40%; left: 29%; animation: animationFramesOne 15s infinite linear; } /* breadcrumb-three */ .breadcrumb-area-three { z-index: 1; } .breadcrumb-shape-wrap-two .parallax-shape { position: absolute; bottom: 20%; left: 27%; z-index: -1; } .breadcrumb-search { padding: 0 65px; margin-top: 45px; } .breadcrumb-search form { position: relative; } .breadcrumb-search form label { position: absolute; top: 50%; transform: translateY(-50%); right: 44px; color: #929EAF; font-size: 14px; line-height: 1; } .breadcrumb-search form input { width: 100%; border: none; background: var(--tg-white); box-shadow: 0px 34px 64px rgba(20, 28, 49, 0.11); border-radius: 25px; color: var(--tg-black-two); font-weight: 400; font-size: 15px; padding: 32px 65px 32px 200px; } .breadcrumb-search form input::placeholder { color: #AEB3BB; font-weight: 400; font-size: 15px; } .breadcrumb-search form .btn { left: 12px; top: 50%; transform: translateY(-50%); position: absolute; padding: 24px 70px; } /* breadcrumb-four */ .breadcrumb-shape-wrap-three img { position: absolute; z-index: -1; } .breadcrumb-shape-wrap-three img:nth-child(1) { right: 24%; bottom: 22%; } .breadcrumb-shape-wrap-three img:nth-child(2) { left: 27%; top: 24%; } .breadcrumb-shape-wrap-three img:nth-child(3) { bottom: 0; left: 13%; } /*============================= 05. Banner ===============================*/ .banner-bg { background-image: url(../img/banner/banner_bg.jpg); background-size: cover; background-position: center; padding: 220px 0 120px; position: relative; z-index: 1; } .banner-content .sub-title { display: inline-block; font-size: 18px; font-weight: 500; color: var(--tg-heading-font-color); line-height: 1.2; background: var(--tg-gray); padding: 12px 23px; border-radius: 32px; margin-bottom: 35px; } .banner-content .sub-title strong { font-weight: 500; color: var(--tg-secondary-color); } .banner-content .title { font-size: 72px; margin-bottom: 75px; text-transform: capitalize; line-height: 1.10; color: var(--tg-banner-title-color); } .banner-shape-wrap img { position: absolute; z-index: -1; } .banner-shape-wrap img:nth-child(1) { right: 0; top: 0; } .banner-shape-wrap img:nth-child(2) { right: 4%; top: 16%; } .banner-shape-wrap img:nth-child(3) { right: 18.3%; top: 20%; } .banner-shape-wrap img:nth-child(4) { right: 11.6%; top: 29%; } .banner-shape-wrap img:nth-child(5) { right: 8%; bottom: 27.5%; } .banner-shape-wrap img:nth-child(6) { left: 17.25%; top: 24%; } .banner-shape-wrap img:nth-child(7) { left: 28.8%; bottom: 19%; } @-webkit-keyframes float-bob-x { 0% { transform: translateX(30px); } 50% { transform: translateX(10px); } 100% { transform: translateX(30px); } } @keyframes float-bob-x { 0% { transform: translateX(30px); } 50% { transform: translateX(10px); } 100% { transform: translateX(30px); } } .float-bob-x { -webkit-animation-name: float-bob-x; animation-name: float-bob-x; -webkit-animation-duration: 3s; animation-duration: 3s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-timing-function: linear; animation-timing-function: linear; } @keyframes contactSwimmer { 0%, 100% { -webkit-transform: translateX(0) translateY(0) rotate(0); transform: translateX(0) translateY(0) rotate(0); } 25%, 75% { -webkit-transform: translateX(-15px) translateY(20px) rotate(-10deg); transform: translateX(-15px) translateY(20px) rotate(-10deg); } 50% { -webkit-transform: translateX(-60px) translateY(35px) rotate(-15deg); transform: translateX(-60px) translateY(35px) rotate(-15deg); } } .contactSwimmer { -webkit-animation-name: contactSwimmer; animation-name: contactSwimmer; -webkit-animation-duration: 5s; animation-duration: 5s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-timing-function: linear; animation-timing-function: linear; } @keyframes ribbonRotate { 0%, 100% { -webkit-transform: rotate(0); transform: rotate(0); } 25%, 75% { -webkit-transform: rotate(-15deg); transform: rotate(-15deg); } 50% { -webkit-transform: rotate(-30deg); transform: rotate(-30deg); } } .ribbonRotate { -webkit-animation-name: ribbonRotate; animation-name: ribbonRotate; -webkit-animation-duration: 5s; animation-duration: 5s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-timing-function: linear; animation-timing-function: linear; } @keyframes animation1 { 0%, 100% { -webkit-transform: rotate(0deg) translateX(0); transform: rotate(0deg) translateX(0); } 25%, 75% { -webkit-transform: rotate(-5deg) translateX(-15px); transform: rotate(-5deg) translateX(-15px); } 50% { -webkit-transform: rotate(-10deg) translateX(-30px); transform: rotate(-10deg) translateX(-30px); } } .animation1 { -webkit-animation-name: animation1; animation-name: animation1; -webkit-animation-duration: 5s; animation-duration: 5s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-timing-function: linear; animation-timing-function: linear; } @keyframes rotateme { from { -webkit-transform: rotate(0deg); transform: rotate(0deg); } to { -webkit-transform: rotate(-360deg); transform: rotate(-360deg); } } @-webkit-keyframes rotateme { from { -webkit-transform: rotate(0deg); } to { -webkit-transform: rotate(-360deg); } } .rotateme { -webkit-animation-name: rotateme; animation-name: rotateme; -webkit-animation-duration: 8s; animation-duration: 8s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-timing-function: linear; animation-timing-function: linear; } @keyframes animationFramesOne { 0% { transform: translate(0px,0px) rotate(0deg) ; } 20% { transform: translate(-73px,-1px) rotate(-36deg) ; } 40% { transform: translate(-141px,72px) rotate(-72deg) ; } 60% { transform: translate(-83px,122px) rotate(-108deg) ; } 80% { transform: translate(40px,72px) rotate(-144deg) ; } 100% { transform: translate(0px,0px) rotate(0deg) ; } } @-webkit-keyframes animationFramesOne { 0% { -webkit-transform: translate(0px,0px) rotate(0deg) ; } 20% { -webkit-transform: translate(-73px,-1px) rotate(-36deg) ; } 40% { -webkit-transform: translate(-141px,72px) rotate(-72deg) ; } 60% { -webkit-transform: translate(-83px,122px) rotate(-108deg) ; } 80% { -webkit-transform: translate(40px,72px) rotate(-144deg) ; } 100% { -webkit-transform: translate(0px,0px) rotate(0deg) ; } } .animationFramesOne { -webkit-animation: animationFramesOne 12s linear infinite; animation: animationFramesOne 12s linear infinite; } /* banner-two */ .banner-area-two { padding: 160px 0 130px; position: relative; overflow: hidden; } .banner-img-two { margin-right: 80px; } .banner-content-two .sub-title { font-weight: 500; font-size: 20px; display: block; color: var(--tg-yellow); margin-bottom: 20px; } .banner-content-two .title { font-weight: 700; font-size: 68px; margin-bottom: 60px; color: var(--tg-white); } .banner-content-two .title span { color: var(--tg-purple); } .banner-content-two .banner-content-bottom { display: flex; align-items: center; flex-wrap: wrap; gap: 38px; } .banner-content-bottom .list-wrap { display: flex; align-items: center; gap: 20px; } .banner-shape-wrap-two img { position: absolute; z-index: -1; } .banner-shape-wrap-two img:nth-child(1) { right: 9.7%; top: 25.4%; } .banner-shape-wrap-two img:nth-child(2) { right: 10.4%; bottom: 24.5%; } .banner-shape-wrap-two img:nth-child(3) { right: 42%; top: 17%; } .banner-shape-wrap-two img:nth-child(4) { left: 14.3%; bottom: 31.5%; animation: animationFramesOne 25s infinite linear; } /*============================= 06. Slider ===============================*/ .slider-area .slick-slide img { display: inline-block; } .slider-area { padding: 190px 0 150px; position: relative; overflow: hidden; } .slider-content .title { font-size: 78px; margin-bottom: 35px; } .slider-content p { margin-bottom: 40px; color: var(--tg-manatee); font-size: 18px; text-transform: capitalize; width: 80%; } .slider-btn { display: flex; align-items: center; gap: 10px 70px; } .slider-btn .popup-video { color: #858585; font-weight: 500; display: flex; align-items: center; } .slider-btn .popup-video i { width: 72px; height: 72px; flex: 0 0 72px; display: flex; align-items: center; justify-content: center; background: var(--tg-primary-color); color: var(--tg-white); font-size: 18px; border-radius: 50%; margin-left: 18px; position: relative; z-index: 1; } .mfp-iframe-holder .mfp-content { max-width: 1200px; } .mfp-image-holder .mfp-close, .mfp-iframe-holder .mfp-close { color: var(--tg-primary-color); } .slider-active .slick-dots { margin: 0; padding: 0; display: flex; align-items: center; gap: 10px; position: absolute; right: 16.4%; bottom: -50px; } .slider-active .slick-dots li { list-style: none; line-height: 0; } .slider-active .slick-dots li button { text-indent: -999999999px; width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--tg-border-color-two); background: transparent; position: relative; transition: .3s; } .slider-active .slick-dots li button::before { content: ""; position: absolute; right: 50%; top: 50%; transform: translate(50%, -50%); width: 7px; height: 7px; border-radius: 50%; background: var(--tg-primary-color); opacity: 0; transition: .3s; } .slider-active .slick-dots li.slick-active button { border-color: var(--tg-primary-color); } .slider-active .slick-dots li.slick-active button::before { opacity: 1; } .slider-shape-wrap img { position: absolute; z-index: -1; } .slider-shape-wrap img:nth-child(1) { right: 0; top: 0; } .slider-shape-wrap img:nth-child(2) { right: 7%; top: 28%; animation: animationFramesOne 25s infinite linear; } .slider-shape-wrap img:nth-child(3) { right: 46%; bottom: 37%; animation: ribbonRotate 8s infinite linear; } .slider-shape-wrap img:nth-child(4) { left: 47%; top: 32%; animation: contactSwimmer 10s infinite linear; } .slider-shape-wrap img:nth-child(5) { left: 0; top: 0; } .slider-shape-wrap img:nth-child(6) { left: 12%; top: 22%; animation: alltuchtopdown 6s infinite linear; } .pulse::after { content: ""; position: absolute; right: 50%; top: 50%; height: 100%; width: 100%; background: var(--tg-primary-color); z-index: -1; border-radius: 50%; transform: translate(50%, -50%); animation: pulse-border 1500ms ease-out infinite; } @keyframes pulse-border { 0% { transform: translateX(50%) translateY(-50%) translateZ(0) scale(1); opacity: 1; } 100% { transform: translateX(50%) translateY(-50%) translateZ(0) scale(1.5); opacity: 0; } } @-webkit-keyframes pulse-border { 0% { transform: translateX(50%) translateY(-50%) translateZ(0) scale(1); opacity: 1; } 100% { transform: translateX(50%) translateY(-50%) translateZ(0) scale(1.5); opacity: 0; } } @keyframes alltuchtopdown { 0% { transform: rotateX(0deg) translateY(0px); } 50% { transform: rotateX(0deg) translateY(-40px); } 100% { transform: rotateX(0deg) translateY(0px); } } /*============================= 07. Services ===============================*/ .services-item { background: var(--tg-white); box-shadow: 0px 15px 30px rgba(61, 90, 125, 0.08); border-radius: 20px; padding: 43px 38px 49px; text-align: center; margin-bottom: 30px; border: 1px solid var(--tg-border-color); transition: .3s linear; } .services-area .row [class*="col-"]:nth-child(even) .services-item { margin-top: 50px; } .services-icon { width: 87px; height: 87px; margin: 0 auto 35px; position: relative; z-index: 1; transition: .3s linear; display: flex; align-items: center; justify-content: center; } .services-icon::before { content: ""; position: absolute; right: 0; top: 0; width: 100%; height: 100%; background: var(--tg-old-lace); border-radius: 50%; z-index: -1; } .services-icon img { max-width: 66px; transform: translate(10px, 15px); transition: .4s linear; } .services-item:hover .services-icon img { transform: translate(0) !important; } .services-content .title { font-size: 24px; margin-bottom: 12px; } .services-content p { margin-bottom: 0; color: var(--tg-granite-gray); opacity: 0.7; } .services-area .row [class*="col-"]:nth-child(2) .services-item .services-icon::before { background: var(--tg-magnolia); } .services-area .row [class*="col-"]:nth-child(3) .services-item .services-icon::before { background: var(--tg-bright-gray); } .services-area .row [class*="col-"]:nth-child(4) .services-item .services-icon::before { background: var(--tg-lavender); } .services-area .row [class*="col-"]:nth-child(2) .services-icon img { transform: translate(-20px, 15px); } .services-area .row [class*="col-"]:nth-child(3) .services-icon img { transform: translate(-20px, -20px); } .services-area .row [class*="col-"]:nth-child(4) .services-icon img { transform: translate(30px, 18px); } /* services-two */ .services-area-two { background: var(--tg-onyx); padding: 200px 0 90px; margin-top: -85px; } .services-item-two { padding: 45px 35px 40px; border-radius: 20px; background: transparent; transition: .3s; margin-bottom: 30px; } .services-item-two.active, .services-item-two:hover { background: var(--tg-black); } .services-icon-two { margin-bottom: 70px; min-height: 67px; } .services-icon-two img { max-width: 66px; } .services-content-two .title { margin-bottom: 12px; color: var(--tg-white); font-size: 24px; } .services-content-two p { margin-bottom: 0; color: #A0A0A0; opacity: 0.7; text-transform: capitalize; transition: .3s; } /* services-three */ .services-area-three { position: relative; overflow: hidden; z-index: 1; } .section-title .title span { color: var(--tg-blue); } .services-area-three .section-title.title-style-two .title { margin-bottom: 20px; } .services-area-three .section-title p { margin-bottom: 0; color: var(--tg-black-coral); opacity: 0.7; text-transform: capitalize; width: 95%; margin: 0 auto; } .services-item-wrap { background: var(--tg-cultured); border-radius: 35px; padding: 110px 155px 90px; } .services-item-three { border-radius: 20px; padding: 40px 35px; transition: .3s ease-in; } .services-item-three:hover { background: var(--tg-white); } .services-icon-three { width: 55px; margin-bottom: 15px; } .services-content-three .title { font-size: 24px; margin-bottom: 10px; } .services-content-three p { margin-bottom: 25px; color: var(--tg-granite-gray); opacity: 0.7; text-transform: capitalize; } .services-content-three .link-btn { color: var(--tg-heading-font-color); display: inline-flex; align-items: center; } .services-content-three .link-btn i { margin-right: 10px; } .services-content-three .link-btn:hover { color: var(--tg-primary-color); } .services-active .slick-dots { display: flex; align-items: center; justify-content: center; padding: 0; margin: 0; gap: 10px; margin-top: 60px; } .services-active .slick-dots li { line-height: 0; list-style: none; } .services-active .slick-dots li button { text-indent: -9999999px; width: 16px; height: 16px; border: 2px solid #E8D4C4; border-radius: 50%; background: transparent; padding: 0; position: relative; transition: .3s; } .services-active .slick-dots li button::before { content: ""; position: absolute; right: 50%; top: 50%; transform: translate(50%, -50%); width: 7px; height: 7px; background: var(--tg-primary-color); border-radius: 50%; transition: .3s; opacity: 0; } .services-active .slick-dots li.slick-active button { border-color: var(--tg-primary-color); } .services-active .slick-dots li.slick-active button::before { opacity: 1; } .services-active [class*="col-"] { padding: 0 15px; } .services-area-three .services-shape img { position: absolute; left: 0; top: 0; z-index: -1; } /* inner-services */ .inner-services-item-wrap .row { margin: 0 -10px; } .inner-services-item-wrap .row [class*="col-"] { padding: 0 10px; } .services-item-four { border: 1px solid #EDEDEE; border-radius: 20px; padding: 45px 35px 40px 35px; text-align: center; margin-bottom: 20px; } .services-icon-four { width: 87px; height: 87px; margin: 0 auto; background: #FFE9E4; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-bottom: 45px; transition: .5s ease; } .services-item-four:hover .services-icon-four { transform: translateY(15px); } .services-icon-four img { max-width: 52px; } .services-content-four .title { margin-bottom: 13px; font-size: 22px; } .services-content-four p { margin-bottom: 0; color: var(--tg-granite-gray); text-transform: capitalize; opacity: 0.7; } .inner-services-item-wrap .row [class*="col-"]:nth-child(2) .services-icon-four { background: #EBF5FF; } .inner-services-item-wrap .row [class*="col-"]:nth-child(3) .services-icon-four { background: #F2F0FD; } .inner-services-item-wrap .row [class*="col-"]:nth-child(4) .services-icon-four { background: #FFF8E4; } .inner-services-item-wrap .row [class*="col-"]:nth-child(5) .services-icon-four { background: #FFF4E4; } .inner-services-item-wrap .row [class*="col-"]:nth-child(6) .services-icon-four { background: #EBF0FF; } .inner-services-item-wrap .row [class*="col-"]:nth-child(7) .services-icon-four { background: #FDF0F2; } .inner-services-item-wrap .row [class*="col-"]:nth-child(8) .services-icon-four { background: #E8E4FF; } /* inner-services-two */ .inner-services-area-two .section-title .title { margin-bottom: 25px; } .inner-services-area-two .section-title p { text-transform: capitalize; color: var(--tg-silver-foil); width: 75%; margin: 0 auto; } .services-item-five { text-align: center; margin-bottom: 30px; } .services-icon-five { width: 87px; height: 87px; margin: 0 auto 35px; border-radius: 50%; background: #E4FFEC; transform: translateY(0); transition: .4s ease; display: flex; align-items: center; justify-content: center; } .services-item-five:hover .services-icon-five { transform: translateY(10px); } .services-icon-five img { max-width: 55px; } .services-content-five .title { margin-bottom: 20px; font-size: 22px; } .services-content-five span { display: block; } .services-content-five p { width: 80%; margin: 0 auto; color: var(--tg-granite-gray); opacity: 0.7; text-transform: capitalize; } .inner-services-wrap-two .row [class*="col-"]:nth-child(2) .services-item-five .services-icon-five { background: #F0EBFF; } .inner-services-wrap-two .row [class*="col-"]:nth-child(3) .services-item-five .services-icon-five { background: #FDF0F2; } .inner-services-wrap-two .row [class*="col-"]:nth-child(4) .services-item-five .services-icon-five { background: #FFF8E4; } /* services-details */ .services-details-area { position: relative; } .services-details img { margin-bottom: 20px; } .services-details-content p { margin-bottom: 0; color: #9FA6AB; } .services-details-shape img { position: absolute; z-index: -1; right: 50%; transform: translateX(50%); top: 39%; } /*============================= 08. About ===============================*/ .about-inner { background: var(--tg-cultured); padding: 115px 115px 139px 105px; border-radius: 100px; } .about-inner .row .col-54 { width: 54%; flex: 0 0 auto; } .about-inner .row .col-46 { width: 46%; flex: 0 0 auto; } .section-title .sub-title { font-size: 20px; font-weight: 500; display: block; color: var(--tg-primary-color); margin-bottom: 20px; } .section-title .title { font-size: 50px; margin-bottom: 0; } .about-content > p { opacity: 0.7; margin-bottom: 40px; width: 70%; color: var(--tg-black-coral); } .about-content .list-wrap { margin-bottom: 45px; } .about-content .list-wrap li { display: flex; align-items: flex-start; width: 75%; margin-bottom: 30px; } .about-content .list-wrap li:last-child { margin-bottom: 0; } .about-content .list-wrap li .icon { width: 60px; flex: 0 0 60px; margin-left: 23px; } .about-content .list-wrap li .icon img { max-width: 60px; } .about-content .list-wrap li .content .title { font-size: 18px; margin-bottom: 10px; } .about-content .list-wrap li .content p { margin-bottom: 0; } .about-content-bottom { display: flex; align-items: center; width: 85%; position: relative; padding-top: 24px; } .about-content-bottom::before { content: ''; position: absolute; right: 0; top: 0; width: 100%; height: 1px; background: radial-gradient(circle, rgba(196, 208, 217, 1) 0%, rgba(218, 226, 233, 0.44021358543417366) 100%); } .about-content-bottom > span { display: block; color: var(--tg-heading-font-color); font-size: 20px; font-weight: 500; width: 55%; flex: 0 0 auto; } .about-content-bottom .read-more-btn { width: 45%; text-align: left; } .about-img img { border-radius: 20px; } /* about-two */ .about-area-two { position: relative; padding: 120px 0 205px; } .section-title.title-style-two .title { font-size: 55px; margin-bottom: 0; } .about-content-two p { margin-bottom: 60px; text-transform: capitalize; color: var(--tg-gray-three); width: 89%; } .about-content-two a { display: flex; align-items: center; } .about-content-two a .text { color: var(--tg-white); opacity: .7; transition: all 0.3s ease-out 0s; } .about-content-two a:hover .text { opacity: 1; } .about-content-two a .arrow { width: 72px; height: 72px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--tg-primary-color); margin-left: 18px; } .about-shape-wrap img { position: absolute; z-index: -1; } .about-shape-wrap .shape-one { top: 20%; left: 22%; } .about-shape-wrap .shape-two { top: 25%; left: 15%; animation: rotateme 10s infinite linear; } .about-shape-wrap .shape-three { bottom: 39%; right: 44%; animation: animationFramesOne 25s infinite linear; } /*============================= 09. Company ===============================*/ .company-area { background: var(--tg-section-background); padding: 110px 0 120px; position: relative; z-index: 1; overflow: hidden; } .company-shape-wrap img { position: absolute; left: 0; top: 0; } .company-area .section-title p { color: var(--tg-silver-foil); text-transform: capitalize; width: 75%; margin: 0 auto; } .company-area .section-title .title { margin-bottom: 25px; } .company-img { position: relative; text-align: left; padding-bottom: 70px; } .company-img img:nth-child(2) { position: absolute; right: 0; bottom: 0; } .company-content { margin-right: 55px; } .company-content .title { background: linear-gradient(-92.18deg, #6071D9 36.51%, #AA676F 63.73%, #CCB41A 97.49%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; margin-bottom: 25px; width: 60%; } .company-list .list-wrap { margin-bottom: 60px; } .company-list .list-wrap li { display: flex; align-items: flex-start; color: #959EB6; font-weight: 500; font-size: 18px; line-height: 1.4; margin-bottom: 16px; } .company-list .list-wrap li:last-child { margin-bottom: 0; } .company-list .list-wrap li img { width: 24px; flex: 0 0 24px; margin-left: 15px; } /*============================= 10. Success ===============================*/ .success-area { position: relative; } .success-content p { margin-bottom: 35px; text-transform: capitalize; color: var(--tg-black-coral); opacity: 0.7; width: 90%; } .success-list .list-wrap { width: 65%; } .success-list .list-wrap li { display: flex; align-items: center; margin-bottom: 10px; } .success-list .list-wrap li:last-child { margin-bottom: 0; } .success-list .list-wrap li .content { display: flex; align-items: center; width: 50%; } .success-list .list-wrap li .content img { max-width: 18px; flex: 0 0 18px; margin-left: 10px; border-radius: 50%; } .success-list .list-wrap li .content span { color: #7C8095; font-size: 15px; } .success-list .list-wrap li .progress { display: flex; height: 7px; overflow: hidden; background-color: transparent; border-radius: 0; flex-grow: 1; border-radius: 30.1494px; } .success-list .list-wrap li .progress .progress-bar { background-color: var(--tg-green-two); border-radius: 30.1494px; } .success-list .list-wrap li:nth-child(2) .progress .progress-bar { background-color: var(--tg-orange); } .success-list .list-wrap li:nth-child(3) .progress .progress-bar { background-color: var(--tg-blue-two-three); } .success-list .list-wrap li:nth-child(4) .progress .progress-bar { background-color: var(--tg-yellow-three); } .success-img { margin-right: 40px; } .success-img img { max-width: unset; } .success-shape-wrap img { position: absolute; z-index: -1; } .success-shape-wrap img:nth-child(1) { left: 40%; top: 8%; animation: ribbonRotate 5s infinite linear; } .success-shape-wrap img:nth-child(2) { right: 42%; bottom: 15%; animation: float-bob-x 3s infinite linear; } /*============================= 11. History ===============================*/ .history-area { background: var(--tg-section-background); padding: 110px 0 120px; position: relative; z-index: 1; } .history-area .section-title .title { margin-bottom: 25px; } .history-area .section-title p { margin-bottom: 0; color: var(--tg-silver-foil); } .history-inner { background: var(--tg-black-four); border-radius: 20px; overflow: hidden; position: relative; } .history-inner .history-img { position: absolute; width: 50%; height: 100%; } .history-inner .history-img img { width: 100%; height: 100%; object-fit: cover; } .history-content { padding: 70px 70px 70px 120px; } .history-content .title { font-size: 30px; margin-bottom: 18px; color: var(--tg-white); } .history-content p { margin-bottom: 40px; color: var(--tg-silver-foil); } .history-content .list-wrap li { display: flex; align-items: center; font-size: 15px; color: #7D8295; margin-bottom: 15px; } .history-content .list-wrap li:last-child { margin-bottom: 0; } .history-content .list-wrap li i { color: var(--tg-green); margin-left: 10px; } .history-roadmap-wrap { position: relative; margin-top: 60px; } .roadmap-line-shape { position: absolute; right: 50%; top: 50%; transform: translate(50%, -50%); background-image: url(../img/images/line-shape.png); background-position: center; width: 100%; height: 76px; background-repeat: no-repeat; } .roadmap-line-shape .dot-two, .roadmap-line-shape .dot-one { position: absolute; width: 20px; height: 20px; border-radius: 50%; background: #EAB76A; right: 0; top: 50%; transform: translateY(-50%); z-index: 5 !important; } .roadmap-line-shape .dot-two { right: auto; left: 0; background: #76EC97; } .roadmap-line-shape .dot-one.pulse::after { background: #EAB76A; z-index: -4; } .history-roadmap-wrap .list-wrap li { display: flex; align-items: center; justify-content: flex-end; flex-direction: column; text-align: center; width: 25%; } .history-roadmap-wrap .list-wrap li:nth-child(odd) { flex-direction: column-reverse; } .history-roadmap-wrap .list-wrap li .dot { width: 15px; height: 15px; background: #F26666; border-radius: 50%; position: relative; margin-bottom: 35px; } .history-roadmap-wrap .list-wrap li:nth-child(2) .dot { background: #D2F179; } .history-roadmap-wrap .list-wrap li:nth-child(3) .dot { background: #64EEE6; } .history-roadmap-wrap .list-wrap li:nth-child(4) .dot { background: #A672E9; } .history-roadmap-wrap .list-wrap li:nth-child(odd) .dot { margin-bottom: 0; margin-top: 35px; } .history-roadmap-wrap .list-wrap li .content .title { font-size: 18px; font-weight: 500; color: var(--tg-white); margin-bottom: 0; } .history-roadmap-wrap .list-wrap li .content p { margin-bottom: 0; font-size: 15px; color: #757C8F; } .history-roadmap-wrap .list-wrap { display: flex; padding: 0 142px; } .history-roadmap-wrap .list-wrap li:nth-child(even) { margin-top: 86px; } .history-shape-wrap img { position: absolute; z-index: -1; } .history-shape-wrap img:nth-child(1) { left: 0; top: 0; } .history-shape-wrap img:nth-child(2) { right: 7.5%; top: 20%; animation: ribbonRotate 5s infinite linear; } .pulse-one { animation: pulse-animation-one 2s linear infinite; } @keyframes pulse-animation-one { 0% { box-shadow: 0 0 0 0px rgba(90, 83, 60); } 100% { box-shadow: 0 0 0 10px rgba(0, 0, 0, 0); } } .pulse-two { animation: pulse-animation-two 2s linear infinite; } @keyframes pulse-animation-two { 0% { box-shadow: 0 0 0 0px rgba(53, 88, 68); } 100% { box-shadow: 0 0 0 10px rgba(0, 0, 0, 0); } } .pulse-three { animation: pulse-animation-three 2s linear infinite; } @keyframes pulse-animation-three { 0% { box-shadow: 0 0 0 0px rgba(109, 71, 58); } 100% { box-shadow: 0 0 0 10px rgba(0, 0, 0, 0); } } .pulse-four { animation: pulse-animation-four 2s linear infinite; } @keyframes pulse-animation-four { 0% { box-shadow: 0 0 0 0px rgba(88 122 60); } 100% { box-shadow: 0 0 0 10px rgba(0, 0, 0, 0); } } .pulse-five { animation: pulse-animation-five 2s linear infinite; } @keyframes pulse-animation-five { 0% { box-shadow: 0 0 0 0px rgba(59 123 118); } 100% { box-shadow: 0 0 0 10px rgba(0, 0, 0, 0); } } .pulse-six { animation: pulse-animation-six 2s linear infinite; } @keyframes pulse-animation-six { 0% { box-shadow: 0 0 0 0px rgba(88 61 112); } 100% { box-shadow: 0 0 0 10px rgba(0, 0, 0, 0); } } /*============================= 12. Agency ===============================*/ .agency-area { position: relative; overflow: hidden; } .agency-content p { margin-bottom: 15px; text-transform: capitalize; width: 90%; color: var(--tg-black-coral); } .agency-content .info-one { opacity: 0.7; } .agency-content .info-two { margin-bottom: 50px; } .agency-shape-wrap img { position: absolute; z-index: -1; } .agency-shape-wrap img:nth-child(1) { bottom: 22%; right: 7%; animation: animationFramesOne 25s infinite linear; } .agency-shape-wrap img:nth-child(2) { top: 18%; right: 47%; animation: rotateme 8s infinite linear; } .agency-shape-wrap img:nth-child(3) { bottom: 25%; right: 44%; animation: ribbonRotate 8s infinite linear; } .agency-shape-wrap img:nth-child(4) { bottom: 19%; left: 12%; animation: contactSwimmer 10s infinite linear; } /*============================= 13. Developr ===============================*/ .developr-area { background: linear-gradient(0deg, rgba(242, 250, 255, 1) 0%, rgba(248, 252, 255, 0) 100%, rgba(244, 250, 255, 1) 100%); } .developr-content .nav-tabs { border-bottom: 1px solid #DDE0E3; justify-content: space-between; margin-bottom: 35px; } .developr-content .nav-tabs .nav-item { margin-bottom: 10px; } .developr-content .nav-tabs .nav-link { display: block; padding: 0; color: #898989; text-decoration: none; border: none; background: transparent; font-weight: 400; font-size: 20px; position: relative; } .developr-content .nav-tabs .nav-link.active { color: var(--tg-heading-font-color); font-weight: 700; } .developr-content .nav-tabs .nav-link::before { content: ""; position: absolute; right: 0; bottom: -11px; width: 100%; height: 4px; background: var(--tg-primary-color); border-radius: 2px; transition: .3s linear; opacity: 0; } .developr-content .nav-tabs .nav-link.active::before { opacity: 1; } .developer-info-wrap .list-wrap li { display: flex; align-items: flex-start; margin-bottom: 35px; } .developer-info-wrap .list-wrap li:last-child { margin-bottom: 0; } .developer-info-wrap .list-wrap li .icon { width: 18px; margin-left: 15px; } .developer-info-wrap .list-wrap li .content { font-size: 15px; display: block; } .developer-info-wrap .list-wrap li .content p { margin-bottom: 0; font-weight: 600; font-size: 15px; color: var(--tg-heading-font-color); line-height: 1.4; } .developr-img { text-align: left; position: relative; padding-bottom: 80px; } .developr-img img { border-radius: 42px; } .work-experience-wrap { width: 196px; min-height: 187px; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; background: var(--tg-white); border: 1px solid var(--tg-border-color); box-shadow: 0px 35px 54px rgba(61, 90, 125, 0.13); border-radius: 20px; padding: 30px; position: absolute; right: 50px; top: 50px; } .work-experience-wrap .count { display: flex; align-items: center; margin-bottom: 6px; color: #FC201E; font-size: 55px; letter-spacing: -2px; line-height: .8; } .project-completed-wrap p, .work-experience-wrap p { margin-bottom: 0; text-align: right; font-size: 20px; font-weight: 500; color: var(--tg-heading-font-color); line-height: 1.3; } .project-completed-wrap { width: 293px; min-height: 219px; display: flex; justify-content: center; flex-direction: column; align-items: flex-start; border: 1px solid var(--tg-border-color); box-shadow: 0px 35px 54px rgba(61, 90, 125, 0.13); border-radius: 20px; background: var(--tg-white); padding: 30px; position: absolute; left: 25px; bottom: 0; } .project-completed-wrap .count { display: flex; align-items: center; font-size: 55px; color: #1EB9FC; margin-bottom: 6px; line-height: .8; } /* developr-two */ .developr-area-two { background: linear-gradient(0deg, rgba(242, 250, 255, 1) 0%, rgba(248, 252, 255, 0) 100%, rgba(244, 250, 255, 1) 100%); } .developr-content-two p { margin-bottom: 40px; width: 80%; } .developr-content-two .developr-social .list-wrap { display: flex; align-items: center; gap: 20px; } .developr-content-two .developr-social .list-wrap li a { color: #999FAE; font-size: 18px; display: block; } .developr-content-two .developr-social .list-wrap li a:hover { color: var(--tg-primary-color); } /*============================= 14. Tools ===============================*/ .tools-area { background: var(--tg-section-background-three); padding: 110px 0 100px; } .tools-item-wrap .row { margin: 0 -10px; } .tools-item-wrap .row [class*="col-"] { padding: 0 10px; } .tools-item { background: var(--tg-black-two); box-shadow: 0px 35px 54px rgba(4, 13, 24, 0.13); border-radius: 20px; padding: 40px 35px; margin-bottom: 20px; } .tools-icon { margin-bottom: 75px; transform: translateY(0px); transition: .3s linear; } .tools-icon img { max-width: 66px; } .tools-item:hover .tools-icon { transform: translateY(7px); } .tools-content .title { font-size: 24px; margin-bottom: 15px; color: var(--tg-white); } .tools-content p { margin-bottom: 0; color: var(--tg-gray-four); opacity: 0.7; text-transform: capitalize; } /*============================= 15. Brand ===============================*/ .brand-active .col-12 { padding: 0 10px; } .brand-item { width: 100%; min-height: 119px; display: flex; align-items: center; justify-content: center; background: var(--tg-black-two); border-radius: 20px; cursor: pointer; } /* brand-two */ .brand-area .title { text-align: center; display: block; font-weight: 500; font-size: 24px; color: var(--tg-heading-font-color); margin-bottom: 45px; } .brand-item-two { min-height: 47px; display: flex; align-items: center; justify-content: center; } .brand-item-two img { cursor: pointer; } .brand-area-two { background: linear-gradient(-360deg, rgba(242, 250, 255, 0) 9.14%, rgba(243, 250, 255, 0.873284) 47.89%, rgba(248, 252, 255, 0) 90.86%); } .brand-area-two .section-title .title { font-size: 34px; font-weight: 500; } /*============================= 16. Client ===============================*/ .client-area .section-title .title { margin-bottom: 35px; } .client-area .section-title p { color: var(--tg-gray-three); text-transform: capitalize; width: 90%; margin: 0 auto; } .client-area .brand-item { background: var(--tg-gray-eight); } /*============================= 17. Team ===============================*/ .team-area { position: relative; } .team-content { margin-right: 60px; } .team-content p { color: var(--tg-black-coral); opacity: .7; margin-bottom: 60px; width: 75%; } .team-img-wrap { position: relative; text-align: center; width: 545px; height: 545px; border: 1px dashed #95BBD7; border-radius: 76px; margin: 73px auto 36px; } .team-img-wrap img { position: absolute; border-radius: 50%; } .team-img-wrap .img-shape { right: 50%; top: 50%; transform: translate(50%, -50%); border-radius: 66px; } .team-img-wrap .img-one { top: -73px; left: 20%; } .team-img-wrap .img-two { right: -5%; top: 14%; } .team-img-wrap .img-three { right: 9.6%; bottom: 43.9%; } .team-img-wrap .img-four { left: -15px; bottom: 32.8%; } .team-img-wrap .img-five { bottom: -36px; right: 12%; } .team-shape-wrap img { position: absolute; z-index: -1; } .team-shape-wrap img:nth-child(1) { left: 31%; top: 17%; } .team-shape-wrap img:nth-child(2) { left: 25%; bottom: 21%; } /* team-two */ .team-area-two .section-title .title { margin-bottom: 30px; } .team-area-two .section-title p { width: 85%; margin: 0 auto; } .team-item { position: relative; margin-bottom: 20px; } .team-item .team-thumb { border-radius: 20px; overflow: hidden; } .team-item .team-content { margin: 0; background: var(--tg-white); position: absolute; right: 0; bottom: 0; min-width: 50%; display: block; border-radius: 20px 0 18px 0; padding: 24px 30px 20px 30px; } .team-item .team-content .title { margin-bottom: 5px; font-size: 16px; } .team-item .team-content span { display: block; font-size: 15px; color: #737373; } .team-social { display: none; } .team-social ul { display: flex; align-items: center; flex-wrap: wrap; margin: 15px 0 0; gap: 8px; } .team-social ul li a { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; font-size: 13px; background: #A6A9C6; border-radius: 50%; color: var(--tg-white); } .team-social ul li a:hover { background: var(--tg-secondary-color); } .team-active .slick-dots { margin: 0; padding: 0; display: flex; justify-content: center; gap: 10px; margin-top: 40px; } .team-active .slick-dots li { list-style: none; line-height: 0; } .team-active .slick-dots li button { text-indent: -99999999px; padding: 0; width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--tg-border-color-two); background: transparent; position: relative; transition: .3s ease-in-out; } .team-active .slick-dots li.slick-active button { border-color: var(--tg-primary-color); } .team-active .slick-dots li button::before { content: ""; position: absolute; right: 50%; top: 50%; width: 7px; height: 7px; border-radius: 50%; background: var(--tg-primary-color); transform: translate(50%, -50%); transition: .3s ease-in-out; opacity: 0; } .team-active .slick-dots li.slick-active button::before { opacity: 1; } .team-active [class*="col-"] { padding: 0 15px; } /*============================= 18. Community ===============================*/ .community-img { text-align: center; margin-bottom: 30px; } .community-content { text-align: center; } .community-content p { margin-bottom: 0; } /*============================= 19. Counter ===============================*/ .counter-area { margin-top: -85px; z-index: 1; position: relative; } .counter-item-wrap { background: var(--tg-black-two); border-radius: 20px; padding: 50px 48px 20px 48px; box-shadow: 0px 44px 64px rgba(0, 0, 0, 0.15); } .counter-item { display: flex; align-items: center; position: relative; padding: 0 20px; margin-bottom: 30px; } .counter-item-wrap .counter-item::before { content: ""; position: absolute; left: -15px; top: 50%; transform: translateY(-50%); height: 60px; width: 2px; background: #35354F; border-radius: 1px; } .counter-item-wrap .row [class*="col-"]:last-child .counter-item::before { display: none; } .counter-item > span { font-weight: 700; font-size: 40px; color: var(--tg-white); display: block; margin-left: 25px; } .counter-item p { margin-bottom: 0; font-weight: 500; color: var(--tg-white); font-size: 18px; opacity: 0.7; } .counter-item p span { display: block; } /* counter-two */ .counter-content .info { margin-bottom: 50px; width: 90%; text-transform: capitalize; opacity: 0.7; color: var(--tg-black-coral); } .counter-item-wrap-two .list-wrap { display: flex; align-items: center; flex-wrap: wrap; gap: 30px; justify-content: center; } .counter-item-two { width: 250px; min-height: 250px; position: relative; border-radius: 20px; background: var(--tg-white); border: 1px solid var(--tg-border-color); box-shadow: 0px 35px 34px rgba(61, 90, 125, 0.06); display: flex; align-items: center; justify-content: center; z-index: 1; overflow: hidden; padding: 20px; } .counter-item-two .icon { position: absolute; left: 0; bottom: 0; z-index: -1; } .counter-item-two .content { text-align: center; } .counter-item-two .content .count { font-weight: 700; font-size: 50px; line-height: .8; color: var(--tg-red); margin-bottom: 12px; display: flex; align-items: center; } .counter-item-two .content > p { color: var(--tg-granite-gray); font-size: 18px; font-weight: 500; margin-bottom: 0; } .counter-item-wrap-two .list-wrap li:nth-child(2) .counter-item-two .content .count { color: var(--tg-blue-two); } .counter-item-wrap-two .list-wrap li:nth-child(3) .counter-item-two .content .count { color: var(--tg-teal); } .counter-item-wrap-two .list-wrap li:nth-child(4) .counter-item-two .content .count { color: var(--tg-indigo); } .counter-item-wrap-two .list-wrap li:nth-child(3) .counter-item-two .icon, .counter-item-wrap-two .list-wrap li:nth-child(4) .counter-item-two .icon { left: auto; right: 0; } /* counter-three */ .counter-area-three { background: linear-gradient(-360deg, rgba(242, 250, 255, 0) 3.82%, rgba(243, 250, 255, 0.873284) 48.56%, #F3FAFF 63.29%, rgba(244, 250, 255, 0.688169) 79.47%, rgba(248, 252, 255, 0) 93.09%); } .counter-content-three p { margin-bottom: 30px; } .counter-content-three img { margin-bottom: 15px; } .counter-content-three .content-bottom { display: block; } .counter-content-three .content-bottom .title-two { margin-bottom: 5px; font-size: 18px; } .counter-content-three .content-bottom .title-two span { display: block; } .counter-item-wrap-three .list-wrap { display: flex; flex-wrap: wrap; justify-content: center; gap: 30px; } .counter-item-three { border: 1px solid #F3F3F3; box-shadow: 0px 35px 34px rgba(61, 90, 125, 0.06); border-radius: 20px; background: var(--tg-white); width: 250px; height: 250px; display: flex; align-items: center; justify-content: center; padding: 20px; position: relative; overflow: hidden; z-index: 1; } .counter-item-three .icon { position: absolute; right: 0; bottom: 0; z-index: -1; } .counter-item-three .content { text-align: center; } .counter-item-three .content .count { display: flex; align-items: center; justify-content: center; margin-bottom: 10px; line-height: 1; font-size: 50px; color: var(--tg-red); font-weight: 700; letter-spacing: -1px; } .counter-item-three .content p { margin-bottom: 0; color: var(--tg-granite-gray); font-weight: 500; font-size: 18px; line-height: 1.4; } .counter-item-three .content p span { display: block; } .counter-item-wrap-three .list-wrap li:nth-child(2) .counter-item-three .content .count { color: var(--tg-blue-two); } .counter-item-wrap-three .list-wrap li:nth-child(3) .counter-item-three .content .count { color: var(--tg-teal); } .counter-item-wrap-three .list-wrap li:nth-child(4) .counter-item-three .content .count { color: var(--tg-indigo); } .counter-item-wrap-three .list-wrap li:nth-child(2) .counter-item-three .icon { left: 0; right: auto; } .counter-item-wrap-three .list-wrap li:nth-child(1) .counter-item-three { margin-top: 80px; } .counter-item-wrap-three .list-wrap li:nth-child(4) .counter-item-three { margin-top: -80px; } /* counter-four */ .counter-area-four { background: linear-gradient(0deg, rgba(242, 250, 255, 1) 0%, rgba(248, 252, 255, 0) 100%, rgba(244, 250, 255, 1) 100%); } .counter-item-wrap-four .list-wrap { display: flex; align-items: center; flex-wrap: wrap; gap: 30px; justify-content: center; } .counter-item-four { border: 1px solid var(--tg-border-color); box-shadow: 0px 35px 34px rgba(61, 90, 125, 0.06); border-radius: 20px; background: var(--tg-white); width: 250px; min-height: 250px; display: flex; align-items: center; justify-content: center; flex-direction: column; text-align: center; } .counter-item-four .count { display: flex; align-items: center; font-weight: 700; font-size: 50px; line-height: .8; margin-bottom: 15px; color: var(--tg-red); } .counter-item-four p { margin-bottom: 0; color: var(--tg-granite-gray); font-weight: 500; font-size: 18px; line-height: 1.3; } .counter-item-four p span { display: block; } .counter-item-wrap-four .list-wrap li:nth-child(2) .counter-item-four .count { color: var(--tg-blue-two); } .counter-item-wrap-four .list-wrap li:nth-child(3) .counter-item-four .count { color: var(--tg-indigo); } .counter-item-wrap-four .list-wrap li:nth-child(4) .counter-item-four .count { color: var(--tg-teal); } /*============================= 20. Project ===============================*/ .project-area { background: var(--tg-section-background); padding: 140px 0; border-radius: 0 150px 0 0; overflow: hidden; position: relative; z-index: 1; } .section-title.white-title .title { color: var(--tg-white); } .project-content p { color: var(--tg-silver-foil); width: 92%; margin-bottom: 55px; } .project-area .row { flex-wrap: nowrap; } .project-area .col-xl-8 { overflow: hidden; -ms-flex: 0 0 110%; flex: 0 0 110%; max-width: 110%; margin-right: 40px; } .project-item { width: 416px; } .project-item img { max-width: 416px; border-radius: 38px; max-height: 579px; } .content-bottom { display: flex; align-items: center; } .project-nav { display: flex; align-items: center; margin-right: auto; } .project-nav .swiper-button-prev, .project-nav .swiper-button-next { position: inherit; margin: 0; color: var(--tg-arrow-color); padding: 0; border: none; background: transparent; right: 0; width: auto; height: auto; } .project-nav .swiper-button-prev::before, .project-nav .swiper-button-next:before { content: "\f178"; display: block; font-size: 50px; font-weight: 300; line-height: 1; font-family: "Font Awesome 5 Pro"; } .project-nav .swiper-button-prev::before { content: "\f177"; } .project-nav .swiper-button-prev::after, .project-nav .swiper-button-next::after { display: none; } .project-nav .swiper-button-prev:hover, .project-nav .swiper-button-next:hover { color: var(--tg-secondary-color); } .project-nav .swiper-button-next { margin-left: 30px; } .project-shape-wrap img { position: absolute; z-index: -1; } .project-shape-wrap .shape-one { right: 7.4%; top: 27.5%; } .project-shape-wrap .shape-two { bottom: 8.4%; right: 26.6%; } /* project-two */ .project-area-two { position: relative; } .project-area-two .section-title .title { margin-bottom: 20px; } .project-area-two .section-title p { text-transform: capitalize; width: 80%; margin: 0 auto; color: var(--tg-gray-three); } .project-menu-nav { display: flex; align-items: center; justify-content: center; margin-bottom: 50px; flex-wrap: wrap; } .project-menu-nav button { border: none; background: transparent; padding: 0; font-size: 18px; color: var(--tg-white); margin: 0 27px; position: relative; padding-bottom: 12px; } .project-menu-nav button::before { content: ""; position: absolute; right: 0; bottom: 0; width: 28px; height: 2px; background: var(--tg-border-color-two); border-radius: 5px; opacity: 0; } .project-menu-nav button.active { color: var(--tg-primary-color); } .project-menu-nav button.active::before { opacity: 1; } .project-item-two { position: relative; overflow: hidden; margin-bottom: 25px; } .project-thumb-two { border-radius: 18px; overflow: hidden; } .project-thumb-two img { transition: .3s ease-in-out; transform: scale(1); } .project-item-two:hover .project-thumb-two img { transform: scale(1.08); } .project-content-two { position: absolute; right: 22px; left: 22px; bottom: 22px; box-shadow: 0px 35px 54px rgba(61, 90, 125, 0.13); border-radius: 10px; background: var(--tg-black-two); padding: 25px 30px; transition: .4s ease-in-out; transform: translateY(150px); opacity: 0; } .project-item-two:hover .project-content-two { transform: translateY(0); opacity: 1; } .project-content-two .title { color: var(--tg-white); margin-bottom: 6px; font-size: 24px; } .project-content-two span { display: block; color: var(--tg-gray-four); opacity: 0.7; } .project-active-two { margin: 0 -14px; } .project-active-two [class*="col-"] { padding: 0 14px; } .project-area-two .project-shape { position: absolute; left: 0; z-index: -1; top: 32%; } /* project-three */ .project-area-three { background: var(--tg-cultured); padding: 120px 0 120px; overflow: hidden; position: relative; z-index: 1; } .project-tab-wrap .nav-tabs { border-bottom: none; display: block; } .project-tab-wrap .nav-tabs .nav-item { margin-bottom: 40px; } .project-tab-wrap .nav-tabs .nav-item:last-child { margin-bottom: 0; } .project-tab-wrap .nav-tabs .nav-link { margin-bottom: 0; background: transparent; border: none; border-radius: 0; padding: 0; color: var(--tg-cadet-grey); font-weight: 500; font-size: 18px; position: relative; transition: .3s ease-in; } .project-tab-wrap .nav-tabs .nav-link.active { color: var(--tg-heading-font-color); } .project-tab-wrap .nav-tabs .nav-link::before { content: ""; position: absolute; width: 33px; height: 4px; right: -75px; top: 50%; transform: translateY(-50%); background: var(--tg-heading-font-color); border-radius: 10px; transition: .3s ease-in; opacity: 0; } .project-tab-wrap .nav-tabs .nav-link.active::before { opacity: 1; } .project-item-three { background: var(--tg-white); border-radius: 20px; padding: 44px 44px 52px; } .project-content-three .title { margin-bottom: 12px; font-size: 24px; } .project-content-three p { margin-bottom: 30px; text-transform: capitalize; width: 80%; color: var(--tg-black-coral); opacity: 0.7; } .project-thumb-three { border-radius: 20px; overflow: hidden; margin-bottom: 40px; } .project-thumb-three img { transform: scale(1); transition: .3s linear; } .project-item-three:hover .project-thumb-three img { transform: scale(1.1); } .project-details-btn a { font-size: 16px; font-weight: 600; color: var(--tg-blue); border: 1px solid var(--tg-secondary-color); border-radius: 20px; line-height: 1; padding: 18px 25px; display: inline-block; } .project-details-btn a:hover { background: var(--tg-secondary-color); color: var(--tg-white); } .project-top-content { margin-right: 30px; } .project-active-three .col-12 { padding: 0 15px; } .project-shape-wrap-two img { position: absolute; z-index: -1; left: 0; bottom: 50px; } .project-area-three .project-nav-wrap .col-xl-10 { overflow: hidden; -ms-flex: 0 0 110%; flex: 0 0 110%; max-width: 110%; } .project-area-three .row { flex-wrap: nowrap; } /* inner-project */ .inner-project-area { background: var(--tg-cultured); padding: 110px 0 120px; } .inner-project-area .section-title .title { margin-bottom: 20px; } .inner-project-area .section-title p { color: var(--tg-silver-foil); text-transform: capitalize; width: 90%; margin: 0 auto; } .inner-project-item { margin-bottom: 20px; } .inner-project-item .inner-project-thumb { border-radius: 20px; overflow: hidden; display: block; } .inner-project-item .inner-project-thumb img { transform: scale(1); transition: .3s; width: 100%; } .inner-project-item:hover .inner-project-thumb img { transform: scale(1.1); } .inner-project-item-wrap .row { margin: 0 -10px; } .inner-project-item-wrap .row [class*="col-"] { padding: 0 10px; } .inner-project-item-wrap .more-btn .btn { background: var(--tg-primary-color); } .inner-project-item-wrap .more-btn .btn span { background: var(--tg-secondary-color); } /* inner-project-two */ .inner-projcet-wrap-two .row [class*="col-"] { display: flex; align-items: center; flex-direction: column; } .inner-projcet-wrap-two .row [class*="col-"]:nth-child(even) { flex-direction: column-reverse; } .inner-project-active [class*="col-"] { padding: 0 15px; } .inner-project-item.horizoital-item .inner-project-thumb img { width: 410px; height: 333px; object-fit: cover; } .inner-project-item.vertical-item .inner-project-thumb img { width: 410px; height: 502px; object-fit: cover; } .inner-project-item { margin-bottom: 25px; position: relative; overflow: hidden; } .inner-project-content { position: absolute; right: 24px; bottom: 24px; left: 24px; background: var(--tg-black-two); padding: 25px 30px; box-shadow: 0px 35px 54px rgba(61, 90, 125, 0.13); border-radius: 10px; opacity: 0; transition: .3s; transform: translateY(100px); } .inner-project-item:hover .inner-project-content { opacity: 1; transform: translateY(0); } .inner-project-content .title { margin-bottom: 5px; color: var(--tg-white); font-size: 24px; } .inner-project-content p { margin-bottom: 0; color: var(--tg-gray-four); opacity: 0.7; } .inner-project-nav { display: flex; align-items: center; justify-content: flex-end; margin-bottom: 60px; gap: 10px; } .inner-project-nav .slick-arrow { border: none; width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: rgb(235 235 235 / 50%); color: var(--tg-heading-font-color); font-size: 20px; } .inner-project-nav .slick-arrow:hover { background-color: var(--tg-secondary-color); color: var(--tg-white); } /* project-details */ .project-details-area { position: relative; z-index: 1; background: linear-gradient(0deg, rgba(242, 250, 255, 1) 0%, rgba(248, 252, 255, 0) 100%, rgba(244, 250, 255, 1) 100%); overflow: hidden; } .project-shape-wrap img { position: absolute; right: 50%; bottom: -50%; transform: translateX(50%); z-index: -1; } .project-details-inner { padding: 0 85px; text-align: center; } .project-details-img { margin-bottom: 45px; } .project-details-img img { border-radius: 20px; } .project-details-content p { font-size: 18px; width: 81%; margin: 0 auto; } .project-details-content { position: relative; margin-bottom: 35px; } .project-details-content .title { margin-bottom: 0; background: linear-gradient(-182.06deg, #2F4C65 1.74%, rgba(47, 76, 101, 0) 146.53%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; text-transform: uppercase; opacity: 0.06; font-size: 120px; line-height: .8; position: absolute; right: 50%; transform: translateX(50%); bottom: -80px; z-index: -1; width: 100%; } /*============================= 21. Faq ===============================*/ .faq-area { position: relative; } .faq-shape-wrap img { position: absolute; z-index: -1; right: 46%; bottom: 3%; animation: ribbonRotate 8s infinite linear; } .faq-img { position: relative; margin-bottom: 25px; } .faq-img img:nth-child(2) { position: absolute; left: 25%; top: -25px; animation: alltuchtopdown 6s infinite linear; } .faq-content .title-two { background: linear-gradient(-92.18deg, #6071D9 36.51%, #AA676F 63.73%, #CCB41A 97.49%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; margin-bottom: 18px; font-weight: 500; font-size: 24px; background-clip: text; } .faq-content p { margin-bottom: 0; opacity: .7; text-transform: capitalize; width: 80%; } .faq-wrap { margin-right: 80px; } .faq-wrap .accordion-item { background-color: var(--tg-white); border: 1px solid var(--tg-gray-eight); box-shadow: 0px 15px 30px rgba(61, 90, 125, 0.05); border-radius: 20px; overflow: hidden; margin-bottom: 15px; } .faq-wrap .accordion-item:last-child { margin-bottom: 0; } .faq-wrap .accordion-button { padding: 40px 80px 40px 30px; font-weight: 700; font-size: 18px; color: var(--tg-heading-font-color); text-align: right; background-color: var(--tg-white); border-bottom: 1px solid transparent; } .faq-wrap .accordion-button:not(.collapsed) { font-weight: 700; font-size: 18px; background-color: var(--tg-white); box-shadow: none; border-bottom: 1px solid var(--tg-gray-eight); } .faq-wrap .accordion-button:focus { border-color: var(--tg-gray-eight); box-shadow: none; } .faq-wrap .accordion-item:first-of-type .accordion-button { border-top-right-radius: 0; border-top-left-radius: 0; } .faq-wrap .accordion-item:last-of-type .accordion-button.collapsed { border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .faq-wrap .accordion-button::after { position: absolute; content: "\f067"; top: 33px; right: 25px; width: 37px; height: 37px; display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 300; color: var(--tg-black); border-radius: 50%; background: #EDF2FA; transition: .3s linear; font-family: "Font Awesome 5 Pro"; } .faq-wrap .accordion-button:not(.collapsed)::after { background-image: none; transform: rotate(0); content: '\f068'; } .faq-wrap .accordion-body { padding: 17px 80px 30px 50px; } .faq-wrap .accordion-body p { margin-bottom: 0; opacity: 0.7; text-transform: capitalize; } /*============================= 22. Testimonial ===============================*/ .testimonial-area { background: var(--tg-cultured); border-radius: 0 0 0 150px; } .testimonial-item { background: var(--tg-white); border-radius: 20px; padding: 50px 38px 38px; box-shadow: 0px 15px 30px rgba(61, 90, 125, 0.08); position: relative; transition: .3s linear; } .testimonial-item::before { content: "\f10d"; position: absolute; right: 38px; top: 42px; font-family: "Font Awesome 5 Pro"; font-weight: 700; font-size: 30px; line-height: 1; color: var(--tg-heading-font-color); opacity: .1; } .testimonial-content > p { color: var(--tg-granite-gray); opacity: .7; margin-bottom: 53px; text-transform: capitalize; } .testimonial-info { display: flex; align-items: center; } .testimonial-info .thumb { width: 41px; flex: 0 0 41px; margin-left: 18px; } .testimonial-info .thumb img { border-radius: 50%; } .testimonial-info .content .title { font-size: 16px; margin-bottom: 10px; } .testimonial-info .content > p { margin-bottom: 0; font-size: 15px; line-height: 1; } .testimonial-item-wrap .row [class*="col-"]:nth-child(even) .testimonial-item { margin-top: 40px; } .testimonial-active [class*="col-"] { padding: 0 10px; } .testimonial-active-two .slick-dots, .testimonial-active .slick-dots { padding: 0; margin: 0; display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 65px; } .testimonial-active-two .slick-dots li, .testimonial-active .slick-dots li { list-style: none; line-height: 0; } .testimonial-active-two .slick-dots li button, .testimonial-active .slick-dots li button { border: 2px solid var(--tg-border-color-two); padding: 0; text-indent: -99999999px; width: 16px; height: 16px; border-radius: 50%; background: transparent; position: relative; transition: .3s linear; } .testimonial-active-two .slick-dots li.slick-active button, .testimonial-active .slick-dots li.slick-active button { width: 16px; height: 16px; border-color: var(--tg-primary-color); } .testimonial-active-two .slick-dots li button::before, .testimonial-active .slick-dots li button::before { content: ""; position: absolute; right: 50%; top: 50%; transform: translate(50%, -50%); width: 8px; height: 8px; border-radius: 50%; background: var(--tg-primary-color); opacity: 0; transition: .3s linear; } .testimonial-active-two .slick-dots li.slick-active button::before, .testimonial-active .slick-dots li.slick-active button::before { opacity: 1; } /* testimonial-two */ .testimonial-item-two { border-radius: 20px; background: var(--tg-black-two); text-align: center; padding: 40px 30px; } .testimonial-content-two .rating { display: flex; align-items: center; justify-content: center; margin-bottom: 25px; } .testimonial-content-two .rating i { color: var(--tg-yellow-two); font-size: 24px; letter-spacing: 2px; } .testimonial-content-two .rating i:last-child { color: var(--tg-silver-three); } .testimonial-content-two p { margin-bottom: 40px; color: var(--tg-gray-four); text-transform: capitalize; line-height: 1.5; } .testimonial-info-two .thumb { margin-bottom: 10px; } .testimonial-info-two .thumb img { max-width: 50px; border-radius: 50%; margin: 0 auto; } .testimonial-info-two .content .title { font-weight: 600; font-size: 16px; margin-bottom: 5px; color: var(--tg-white); } .testimonial-info-two .content span { display: block; text-transform: capitalize; font-size: 14px; color: var(--tg-dark-electric); } .testimonial-area-two .row { margin: 0 -10px; } .testimonial-area-two .row [class*="col-"] { padding: 0 10px; } .testimonial-active-two .slick-dots li button { border-color: var(--tg-dark-electric); } /* testimonial-three */ .testimonial-area-three { background: var(--tg-black-three); padding: 110px 0 120px; position: relative; overflow: hidden; z-index: 1; } .testimonial-item-three { background: var(--tg-white); border-radius: 20px; padding: 60px 45px; position: relative; margin-top: 42px; } .testimonial-thumb-three { position: absolute; right: 45px; top: -42px; } .testimonial-thumb-three img { max-width: 83px; border-radius: 50%; border: 9px solid var(--tg-white); } .testimonial-content-three .title { margin-bottom: 10px; font-size: 20px; } .testimonial-content-three span { display: block; color: #616C7E; opacity: 0.8; font-size: 14px; margin-bottom: 20px; } .testimonial-content-three p { margin-bottom: 0; color: var(--tg-black-two); } .testimonial-shape-wrap img { position: absolute; z-index: -1; } .testimonial-shape-wrap img:nth-child(1) { right: 0; top: 0; } .testimonial-shape-wrap img:nth-child(2) { right: 6%; bottom: 43%; animation: animationFramesOne 20s infinite linear; } .testimonial-shape-wrap img:nth-child(3) { left: 33.2%; top: 15%; animation: animationFramesOne 25s infinite linear; } .testimonial-shape-wrap img:nth-child(4) { bottom: 10%; left: 27%; animation: rotateme 8s infinite linear; } .swiper-container.testimonial-active-three { overflow: hidden; margin-left: -460px; } .testimonial-nav { display: flex; align-items: center; justify-content: flex-end; gap: 38px; } .testimonial-nav .swiper-button-prev, .testimonial-nav .swiper-button-next { background: transparent; position: unset; top: 0; width: auto; height: auto; margin-top: 0; color: #fff; padding: 0; border: none; } .testimonial-nav .swiper-button-prev::before, .testimonial-nav .swiper-button-next:before { content: "\f177"; display: block; font-size: 20px; font-weight: 300; line-height: 1; font-family: "Font Awesome 5 Pro"; } .testimonial-nav .swiper-button-next::before { content: "\f178"; } .testimonial-nav .swiper-button-prev:after, .testimonial-nav .swiper-button-next:after { display: none; } .testimonial-swiper-pagination { display: flex; align-items: center; gap: 8px; margin-top: 60px; } .swiper-pagination-bullet { width: 16px; height: 16px; border-radius: 50%; background: transparent; margin: 0 !important; position: relative; border: 2px solid #E8D4C4; transition: .3s ease-in-out; opacity: 1; } .swiper-pagination-bullet.swiper-pagination-bullet-active { border-color: var(--tg-primary-color); } .swiper-pagination-bullet::before { content: ""; position: absolute; width: 7px; height: 7px; right: 50%; top: 50%; transform: translate(50%, -50%); border-radius: 50%; background: var(--tg-primary-color); opacity: 0; transition: .3s ease-in-out; } .swiper-pagination-bullet.swiper-pagination-bullet-active::before { opacity: 1; } /* testimonial-four */ .testimonial-area-four { background: linear-gradient(-360deg, rgba(242, 250, 255, 0) 3.82%, rgba(243, 250, 255, 0.873284) 48.56%, #F3FAFF 63.29%, rgba(244, 250, 255, 0.688169) 79.47%, rgba(248, 252, 255, 0) 93.09%); } .testimonial-area-four .testimonial-nav { gap: 20px; margin-bottom: 40px; } .testimonial-area-four .testimonial-nav .swiper-button-prev, .testimonial-area-four .testimonial-nav .swiper-button-next { position: unset; top: 0; width: 48px; height: 48px; margin-top: 0; color: var(--tg-heading-font-color); padding: 0; border: none; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--tg-white); } .testimonial-area-four .testimonial-nav .swiper-button-prev:hover, .testimonial-area-four .testimonial-nav .swiper-button-next:hover { background: var(--tg-secondary-color); color: var(--tg-white); } /* testimonial-five */ .testimonial-img { position: relative; margin-left: 102px; } .testimonial-img img { border-radius: 42px; } .testimonial-img .play-btn { position: absolute; left: 45px; bottom: 35px; width: 80px; height: 80px; display: flex; align-items: center; justify-content: center; background: var(--tg-white); border-radius: 50%; font-size: 24px; color: #FE5A5A; } .testimonial-item-five { background: var(--tg-white); position: relative; box-shadow: 0px 15px 30px rgba(61, 90, 125, 0.05); border-radius: 20px; border: 1px solid transparent; padding: 30px 40px; background-clip: padding-box; } .testimonial-item-five::before { content: ""; position: absolute; right: 0; top: 0; left: 0; bottom: 0; background: #33276B; border-radius: 20px; margin: -2px; z-index: -1; } .testimonial-item-five::after { content: ""; position: absolute; right: 0; top: 0; left: 0; bottom: 0; margin: -2px; background: linear-gradient(-90deg, rgba(230, 207, 64, 1) 0%, rgba(224, 64, 208, 1) 50%, rgba(165, 193, 104, 1) 100%); border-radius: 20px; transition: .3s linear; z-index: -1; } .testimonial-item-five .testimonial-info { margin-bottom: 28px; } .testimonial-item-five .testimonial-info .thumb { width: 65px; flex: 0 0 65px; } .testimonial-item-five .testimonial-info .content .title { font-size: 20px; } .testimonial-content-five p { margin-bottom: 0; letter-spacing: 0.163636px; color: var(--tg-heading-font-color); width: 90%; } /*============================= 23. Consultation ===============================*/ .consultation-area { position: relative; } .consultation-content .section-title img { margin-bottom: 20px; } .consultation-content p { margin-bottom: 65px; width: 80%; text-transform: capitalize; } .consultation-list ul { display: flex; align-items: center; width: 65%; } .consultation-list ul li { display: flex; align-items: center; width: 50%; margin-bottom: 30px; } .consultation-list ul li .icon { position: relative; width: 50px; flex: 0 0 50px; margin-left: 15px; } .consultation-list ul li .icon span { position: absolute; width: 28px; height: 28px; border-radius: 50%; font-size: 10px; font-weight: 600; color: var(--tg-white); background: var(--tg-pink); display: flex; align-items: center; justify-content: center; left: -5px; bottom: -10px; } .consultation-list ul li:nth-child(2) .icon span { bottom: 0; top: -10px; } .consultation-list ul li .content .title { font-weight: 600; font-size: 18px; margin-bottom: 0; } .consultation-form-wrap { background: var(--tg-white); box-shadow: 0px 15px 30px rgba(61, 90, 125, 0.08); border-radius: 20px; border: 1px solid var(--tg-border-color); padding: 62px 58px 44px; } .consultation-form-wrap .title { font-weight: 500; font-size: 30px; margin-bottom: 30px; line-height: 30px; } .consultation-form-wrap .form-grp { margin-bottom: 20px; } .consultation-form-wrap .form-grp input { width: 100%; border: 1px solid var(--tg-form-border-color); background: var(--tg-gray-two); border-radius: 13px; padding: 22px 28px; font-weight: 400; font-size: 16px; color: var(--tg-heading-font-color); height: 70px; } .consultation-form-wrap .form-grp input::placeholder { font-weight: 400; font-size: 16px; color: var(--tg-heading-font-color); } .consultation-form-wrap .form-grp .form-select { padding: 10px 16px 10px 70px; font-size: 16px; font-weight: 400; line-height: 1.6; color: var(--tg-heading-font-color); vertical-align: middle; background: url("../img/icon/select_down_arrow.png") no-repeat scroll 2.5% center; background-color: var(--tg-gray-two); border: 1px solid var(--tg-form-border-color); border-radius: 13px; box-shadow: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; transition: .3s ease-in-out; width: 100%; height: 70px; } .consultation-form-wrap .btn { width: 100%; } .consultation-shape-wrap img { position: absolute; z-index: -1; } .consultation-shape-wrap .shape-one { right: 43.8%; top: 21.5%; } .consultation-shape-wrap .shape-two { left: 7%; bottom: 105px; } /* consultation-two */ .consultation-area-two { background: var(--tg-cultured); z-index: 1; } .consultation-area-two .consultation-content > p { width: 76%; } .consultation-area-two .consultation-list ul li { display: block; } .consultation-area-two .consultation-list ul li .title { font-weight: 700; font-size: 30px; color: var(--tg-red); margin-bottom: 5px; } .consultation-area-two .consultation-list ul li p { width: 100%; margin-bottom: 0; font-weight: 500; font-size: 18px; line-height: 1.3; } .consultation-area-two .consultation-list ul li p span { display: block; } .consultation-area-two .consultation-list ul li:nth-child(2) .title { color: var(--tg-blue-two); } .consultation-area-two .consultation-shape-wrap .shape-one { right: 43.8%; bottom: 28.5%; top: auto; } /*============================= 24. Pricing ===============================*/ .pricing-area .section-title .title { margin-bottom: 20px; } .pricing-area .section-title p { text-transform: capitalize; width: 55%; margin: 0 auto; color: var(--tg-gray-three); } .pricing-item-wrap { padding: 0 70px; } .pricing-item { background: var(--tg-black-two); border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 20px; padding: 45px 50px; margin-bottom: 30px; position: relative; z-index: 1; overflow: hidden; } .pricing-icon { position: absolute; top: -58px; left: -60px; width: 182px; height: 182px; background: #161620; border-radius: 50%; display: flex; align-items: flex-end; padding: 28px; z-index: -1; } .pricing-top { width: 75%; } .pricing-top .title { font-size: 24px; margin-bottom: 24px; color: var(--tg-white); } .pricing-top p { margin-bottom: 32px; color: var(--tg-silver-two); } .pricing-price .price { display: flex; margin-bottom: 35px; font-size: 35px; color: var(--tg-white); letter-spacing: 2.15px; line-height: 1; } .pricing-price .price span { font-size: 16px; color: var(--tg-silver-two); font-weight: 400; } .pricing-price .price strong { font-weight: 400; font-size: 16px; margin-top: auto; color: var(--tg-silver-two); } .pricing-list .title { color: var(--tg-white); margin-bottom: 15px; font-size: 16px; letter-spacing: 0.145455px; } .pricing-list .list-wrap { margin-bottom: 25px; } .pricing-list .list-wrap li { display: flex; align-items: baseline; font-size: 15px; margin-bottom: 5px; color: var(--tg-silver-two); } .pricing-list .list-wrap li:last-child { margin-bottom: 0; } .pricing-list .list-wrap li i { color: var(--tg-green); margin-left: 10px; } .pricing-btn .btn { display: block; font-size: 16px; color: var(--tg-heading-font-color); font-weight: 700; background: var(--tg-white); padding: 22px 55px; } .pricing-btn .btn:hover { color: var(--tg-primary-color); } .pricing-item.active { background: var(--tg-primary-color); border: none; padding: 68px 50px; } .pricing-item.active .pricing-icon { background: #E68839; } .pricing-item.active .pricing-list .list-wrap li, .pricing-item.active .pricing-top p { color: var(--tg-white); } .pricing-item.active .pricing-price .price strong, .pricing-item.active .pricing-price .price span { color: #DEEDFF; } .pricing-item.active .pricing-btn .btn { color: var(--tg-primary-color); } .pricing-item-wrap .pricing-tab { text-align: center; margin-bottom: 60px; } .pricing-item-wrap .nav-tabs { border-bottom: none; display: inline-flex; background: var(--tg-onyx); padding: 11px 14px; border-radius: 10px; } .pricing-item-wrap .nav-tabs .nav-link { margin-bottom: 0; background: transparent; border: none; font-size: 16px; border-radius: 10px; padding: 10px 27px; color: var(--tg-white); font-weight: 400; } .pricing-item-wrap .nav-tabs .nav-link.active { box-shadow: 0px 8px 22px rgba(0, 0, 0, 0.08); font-weight: 700; background: var(--tg-primary-color); } /*============================= 25. Work ===============================*/ .work-area { background: var(--tg-onyx); position: relative; z-index: 1; overflow: hidden; } .work-content { margin-right: 72px; } .work-list .list-wrap li { display: flex; align-items: flex-start; margin-bottom: 30px; } .work-list .list-wrap li:last-child { margin-bottom: 0; } .work-list .list-wrap .icon { width: 60px; flex: 0 0 60px; margin-left: 23px; } .work-list .list-wrap .icon img { border-radius: 50%; } .work-list .list-wrap .content .title { margin-bottom: 15px; font-size: 18px; color: var(--tg-white); } .work-list .list-wrap .content p { margin-bottom: 0; color: var(--tg-gray-four); opacity: 0.7; text-transform: capitalize; width: 80%; } .work-shape-wrap img { position: absolute; z-index: -1; } .work-shape-wrap img:nth-child(1) { right: 8%; top: 21%; animation: animationFramesOne 25s infinite linear; } .work-shape-wrap img:nth-child(2) { top: 18%; right: 28%; } .work-shape-wrap img:nth-child(3) { right: 16%; bottom: 20%; animation: ribbonRotate 12s infinite linear; } .work-shape-wrap img:nth-child(4) { left: 11%; top: 21%; animation: ribbonRotate 10s infinite linear; } .work-shape-wrap img:nth-child(5) { right: 48%; bottom: 38%; animation: animationFramesOne 30s infinite linear; } /*============================= 26. Blog ===============================*/ .blog-area { background: var(--tg-cultured); padding: 110px 0 90px; } .blog-area .section-title .title { margin-bottom: 17px; } .blog-area .section-title p { margin-bottom: 0; } .blog-post-item { margin-bottom: 30px; } .blog-post-thumb { border-radius: 20px; overflow: hidden; } .blog-post-thumb img { transform: scale(1); transition: .3s linear; } .blog-post-item:hover .blog-post-thumb img { transform: scale(1.1); } .blog-post-content { background: var(--tg-white); border-radius: 20px 0 20px 20px; width: 65%; padding: 20px 28px 30px 18px; margin-top: -148px; position: relative; z-index: 1; } .blog-post-content .tag { font-size: 15px; display: inline-block; font-weight: 500; margin-bottom: 16px; } .blog-post-content .tag:hover { color: var(--tg-secondary-color); } .blog-post-content .title { font-size: 18px; margin-bottom: 13px; line-height: 1.44; } .blog-meta .list-wrap { display: flex; align-items: center; gap: 12px; } .blog-meta .list-wrap li.avatar-img { width: 34px; flex: 0 0 34px; } .blog-meta .list-wrap li.avatar-img a { display: block; } .blog-meta .list-wrap li.avatar-img img { border-radius: 50%; } .blog-meta .list-wrap li { color: var(--tg-spanish-gray); font-size: 15px; font-weight: 500; } .blog-meta .list-wrap li a { color: var(--tg-spanish-gray); } .blog-meta .list-wrap li a:hover { color: var(--tg-primary-color); } /* blog-two */ .blog-item-two { margin-bottom: 30px; } .blog-thumb-two { position: relative; border-radius: 20px; overflow: hidden; margin-bottom: 22px; } .blog-thumb-two img { transition: .5s ease-in-out; transform: scale(1); } .blog-item-two:hover .blog-thumb-two img { transform: scale(1.05); } .blog-thumb-two .date { position: absolute; right: 15px; bottom: 15px; width: 55px; height: 55px; display: flex; align-items: center; justify-content: center; background: var(--tg-primary-color); flex-direction: column; margin-bottom: 0; border-radius: 10px; font-size: 18px; color: var(--tg-white); line-height: 1.1; } .blog-thumb-two .date span { display: block; font-size: 14px; font-weight: 400; } .blog-content-two .tag { font-weight: 500; font-size: 15px; color: var(--tg-primary-color); display: inline-block; margin-bottom: 16px; } .blog-content-two .tag:hover { color: var(--tg-white); } .blog-content-two .title { font-size: 18px; width: 85%; margin-bottom: 15px; color: var(--tg-white); line-height: 1.45; } .blog-content-two p { margin-bottom: 0; color: var(--tg-gray-four); font-size: 14px; width: 90%; } .blog-content-two p a { color: var(--tg-white); text-decoration: underline; } .blog-content-two p a:hover { color: var(--tg-primary-color); } /* blog-three */ .blog-item-three .blog-meta .list-wrap { gap: 15px; margin-bottom: 15px; } .blog-item-three .blog-meta .list-wrap li { display: flex; align-items: center; font-size: 14px; font-weight: 400; color: var(--tg-gray-seven); } .blog-item-three .blog-meta .list-wrap li a { color: var(--tg-gray-seven); } .blog-item-three .blog-meta .list-wrap li a:hover { color: var(--tg-primary-color); } .blog-item-three .blog-meta .list-wrap li i { color: var(--tg-primary-color); margin-left: 8px; } .blog-item-three .blog-content-two .title { color: var(--tg-heading-font-color); } .blog-item-three .blog-content-two p { color: var(--tg-gray-seven); } .blog-item-three .blog-content-two p a { color: var(--tg-heading-font-color); } .blog-item-three .blog-content-two p a:hover { color: var(--tg-primary-color); } .blog-area-three .read-more-btn .btn { background: var(--tg-primary-color); } .blog-area-three .read-more-btn .btn span { background: var(--tg-secondary-color); } /* inner-blog */ .inner-blog-area .col-70 { flex: 0 0 auto; width: 69.8%; } .inner-blog-area .col-30 { flex: 0 0 auto; width: 30.2%; } .inner-blog-item { margin-bottom: 55px; } .inner-blog-item:last-child { margin-bottom: 0; } .inner-blog-thumb img { border-radius: 20px; } .inner-blog-thumb { margin-bottom: 50px; } .blog-meta-two .list-wrap { display: flex; align-items: center; gap: 10px 0; margin-bottom: 20px; flex-wrap: wrap; } .blog-meta-two .list-wrap li { position: relative; margin-left: 16px; padding-left: 16px; line-height: 1.2; font-size: 15px; letter-spacing: 0.122727px; color: #717171; } .blog-meta-two .list-wrap li:last-child { margin-left: 0; padding-left: 0; } .blog-meta-two .list-wrap li::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 2px; height: 20px; background: #F1F1F1; } .blog-meta-two .list-wrap li:last-child::before { display: none; } .blog-meta-two .list-wrap li i { color: #F04463; margin-left: 6px; } .blog-meta-two .list-wrap li a { color: #F04463; } .blog-meta-two .list-wrap li.tag { padding-left: 0; } .blog-meta-two .list-wrap li.tag::before { display: none; } .blog-meta-two .list-wrap li.tag a { background: var(--tg-secondary-color); color: var(--tg-white); font-size: 15px; border-radius: 7px; padding: 3px 12px; display: block; } .inner-blog-content .title { margin-bottom: 15px; font-weight: 600; font-size: 30px; } .inner-blog-content p { margin-bottom: 18px; width: 94%; } .inner-blog-content .rade-more-btn { font-weight: 600; font-size: 16px; text-decoration-line: underline; color: #5A5A5A; } .inner-blog-content .rade-more-btn:hover { color: var(--tg-primary-color); } .inner-blog-item:nth-child(2) .blog-meta-two .list-wrap li.tag a { background: #FC1AE5; } .inner-blog-item:nth-child(3) .blog-meta-two .list-wrap li.tag a { background: #FCBD1A; } .blog-sidebar { margin-right: 15px; } .blog-sidebar .widget { margin-bottom: 60px; } .blog-sidebar .widget:last-child { margin-bottom: 0; } .rc-post-item { display: flex; align-items: center; margin-bottom: 30px; } .rc-post-item:last-child { margin-bottom: 0; } .rc-post-item .thumb { width: 159px; flex: 0 0 159px; margin-left: 15px; } .rc-post-item .thumb img { border-radius: 15px; } .rc-post-item .content .title { margin-bottom: 0; font-weight: 600; font-size: 16px; } .rc-post-item .content .blog-meta-two .list-wrap { margin-bottom: 13px; } .rc-post-item:nth-child(2) .content .blog-meta-two .list-wrap li.tag a { background: #FCBD1A; } .rc-post-item:nth-child(3) .content .blog-meta-two .list-wrap li.tag a { background: #FC1AE5; } .widget-title { font-weight: 600; font-size: 22px; margin-bottom: 20px; } .blog-cat-list .list-wrap li { border-bottom: 1px solid #E5E5E5; padding: 10px 10px; } .blog-cat-list .list-wrap li a { display: flex; align-items: center; font-weight: 600; font-size: 15px; color: var(--tg-paragraph-color); } .blog-cat-list .list-wrap li a span { margin-right: auto; font-weight: 400; transition: all 0.3s ease-out 0s; } .blog-cat-list .list-wrap li a:hover { color: var(--tg-primary-color); } .popular-post-item.big-post .thumb { margin-bottom: 18px; } .popular-post-item.big-post .thumb img { border-radius: 15px; width: 100%; } .popular-post-item.big-post .content .title { margin-bottom: 10px; font-weight: 600; font-size: 16px; } .popular-post-item .content span { font-size: 14px; display: block; } .popular-post-item .thumb { margin-bottom: 20px; } .popular-post-item .thumb img { border-radius: 10px; width: 100%; } .popular-post-item .content .title { font-size: 15px; font-weight: 600; margin-bottom: 10px; } .popular-post-list .list-wrap { display: flex; flex-wrap: wrap; margin: 0 -10px; } .popular-post-list .list-wrap li { width: 50%; flex: 0 0 auto; padding: 0 10px; } .popular-post-list .list-wrap li:first-child { width: 100%; } .tag-list .list-wrap { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; } .tag-list .list-wrap li a { display: block; font-size: 14px; color: var(--tg-black); background: #F5F5F5; border-radius: 7px; padding: 10px 22px; line-height: 1; } .tag-list .list-wrap li a:hover { color: var(--tg-white); background: var(--tg-secondary-color); } /* blog-details-area */ .bd-content-top.text-center { width: 78%; margin: 0 auto 45px; } .bd-content-top .blog-meta-two .list-wrap { justify-content: center; } .bd-content-top .title { font-weight: 600; font-size: 30px; margin-bottom: 12px; } .bd-content-top p { margin-bottom: 30px; } .blog-meta-two.bottom .avatar img { width: 32px; flex: 0 0 32px; margin-left: 10px; } .blog-meta-two.bottom .list-wrap { margin-bottom: 0; } .blog-details-img { margin-bottom: 45px; } .blog-details-img img { border-radius: 20px; } .bd-content-bottom { width: 78%; } .bd-content-bottom .title { font-weight: 600; font-size: 30px; margin-bottom: 20px; } .bd-content-bottom p { margin-bottom: 30px; } .bd-content-bottom .list-wrap { margin-top: 45px; margin-bottom: 25px; } .bd-content-bottom .list-wrap li { position: relative; padding-right: 24px; margin-bottom: 5px; } .bd-content-bottom .list-wrap li:last-child { margin-bottom: 0; } .bd-content-bottom .list-wrap li::before { content: ""; position: absolute; right: 10px; top: 11px; width: 5px; height: 5px; border-radius: 50%; background: var(--tg-paragraph-color); } .bd-content-bottom .list-wrap li span { font-weight: 700; font-size: 16px; margin-left: 10px; } .comment-wrap { border-top: 1px solid rgb(151 151 151 / 50%); border-bottom: 1px solid rgb(151 151 151 / 50%); padding-top: 45px; margin-top: 65px; padding-bottom: 30px; margin-bottom: 70px; } .comment-wrap > .title { font-weight: 500; font-size: 24px; margin-bottom: 50px; } .comment-wrap .title span { color: #969696; } .comments-box { display: flex; align-items: flex-start; margin-bottom: 60px; } .comments-avatar { width: 78px; flex: 0 0 78px; margin-left: 25px; } .comments-avatar img { border-radius: 20px; } .comment-text .title { font-weight: 500; font-size: 18px; margin-bottom: 10px; } .comment-text span { display: flex; align-items: center; font-size: 15px; color: #717171; margin-bottom: 15px; } .comment-text span i { margin-left: 6px; } .comment-text p { margin-bottom: 25px; color: #4A4A4A; width: 70%; } .comment-text .comment-reply-link { display: inline-flex; align-items: center; color: #8B8989; } .comment-text .comment-reply-link i { margin-left: 10px; } .comment-text .comment-reply-link:hover { color: var(--tg-primary-color); } .comments-box.children { margin-right: 100px; border-top: 1px solid rgb(151 151 151 / 50%); padding-top: 60px; } .comments-box.children .comment-text p { width: 78%; } .post-comments-form { width: 80%; } .post-comments-title .title { font-weight: 500; font-size: 24px; opacity: 0.64; margin-bottom: 65px; } .comment-form .row { margin: 0 -10px; } .comment-form .row [class*="col-"] { padding: 0 10px; } .comment-form .form-grp { margin-bottom: 22px; } .comment-form .form-grp textarea, .comment-form .form-grp input { width: 100%; background: transparent; border: 1px solid #E3E3E3; backdrop-filter: blur(21px); border-radius: 15px; color: #818080; font-size: 16px; padding: 22px 30px; display: block; height: 72px; } .comment-form .form-grp textarea::placeholder, .comment-form .form-grp input::placeholder { color: #818080; font-size: 16px; } .comment-form .form-grp textarea { min-height: 180px; max-height: 180px; } .comment-form .btn { background: var(--tg-primary-color); margin-top: 22px; } .comment-form .btn span { background: var(--tg-secondary-color); } /*============================= 27. Pagination ===============================*/ .pagination-wrap .pagination.list-wrap { gap: 10px; } .pagination-wrap .page-item .page-link { z-index: 3; color: #AAAAAA; font-weight: 400; font-size: 15px; background: transparent; border: 1px solid #AAAAAA; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 5px; } .pagination-wrap .pagination .page-item.active .page-link, .pagination-wrap .pagination .page-link:hover { background: #F1F1F1; } .pagination-wrap .pagination .page-link:focus { background: #F1F1F1; outline: 0; box-shadow: none; } /*============================= 28. Newsletter ===============================*/ .newsletter-area { position: relative; overflow: hidden; } .newsletter-form form { display: flex; align-items: center; } .newsletter-form input { box-shadow: 0px 50px 130px rgba(31, 31, 31, 0.15); border-radius: 20px; border: none; flex-grow: 1; color: var(--tg-heading-font-color); font-weight: 400; font-size: 16px; text-align: center; padding: 26px 30px; height: 80px; } .newsletter-form .btn { padding: 28px 39px; min-width: 160px; background: var(--tg-primary-color); margin-right: 24px; } .newsletter-form .btn span { background: var(--tg-secondary-color); } .newsletter-shape-wrap img { position: absolute; z-index: -1; } .newsletter-shape-wrap .bg-shape { right: 50%; bottom: 40px; transform: translateX(50%); } .newsletter-shape-wrap .shape-one { right: 16.2%; top: 32%; animation: animationFramesOne 20s infinite linear; } .newsletter-shape-wrap .shape-two { right: 17%; bottom: 28%; animation: contactSwimmer 20s infinite linear; } .newsletter-shape-wrap .shape-three { bottom: 10%; right: 24.7%; animation: animationFramesOne 10s infinite linear; } .newsletter-shape-wrap .shape-four { left: 21%; top: 46%; animation: rotateme 10s infinite linear; } .newsletter-shape-wrap .shape-five { left: 13%; top: 27%; animation: animationFramesOne 35s infinite linear; } .newsletter-shape-wrap .shape-six { left: 17%; bottom: 24%; animation: contactSwimmer 15s infinite linear; } /* newsletter-two */ .newsletter-wrap { background: var(--tg-black-two); padding: 110px 100px 120px; position: relative; border-radius: 20px 150px 20px 20px; z-index: 1; } .newsletter-area-two .newsletter-form input { border-radius: 20px; flex-grow: 1; font-weight: 400; font-size: 16px; text-align: center; padding: 26px 30px; height: 72px; background: linear-gradient(-152.97deg, rgba(255, 255, 255, 0.185) 0%, rgba(255, 255, 255, 0.185) 100%); backdrop-filter: blur(21px); color: var(--tg-white); border: none; box-shadow: none; } .newsletter-area-two .newsletter-form input::placeholder { color: #818080; } .newsletter-shape-wrap-two img { position: absolute; z-index: -1; } .newsletter-shape-wrap-two img:nth-child(1) { left: -54px; top: -43px; } .newsletter-shape-wrap-two img:nth-child(2) { right: 0; bottom: 0; } .newsletter-shape-wrap-two img:nth-child(3) { right: 155px; bottom: 103px; animation: 10s linear 0s infinite normal none running contactSwimmer; } .newsletter-shape-wrap-two img:nth-child(4) { top: 180px; left: 240px; animation: animationFramesOne 25s infinite linear; } /*============================= 29. Contact ===============================*/ .contact-area { background: var(--tg-black-two); padding: 110px 0 120px; } .contact-form-wrap { margin-left: 38px; } .contact-form-wrap .form-grp { margin-bottom: 22px; } .contact-form-wrap .row { margin: 0 -10px; } .contact-form-wrap .row [class*="col-"] { padding: 0 10px; } .contact-form-wrap .form-grp textarea, .contact-form-wrap .form-grp input { width: 100%; background: transparent; border: 1px solid rgba(227, 227, 227, 0.2); backdrop-filter: blur(21px); border-radius: 15px; font-weight: 400; font-size: 16px; padding: 22px 35px; color: var(--tg-white); height: 72px; display: block; } .contact-form-wrap .form-grp textarea::placeholder, .contact-form-wrap .form-grp input::placeholder { color: var(--tg-gray-five); font-weight: 400; font-size: 16px; } .contact-form-wrap .form-grp textarea { min-height: 180px; max-height: 180px; } .contact-form-wrap .btn { background: var(--tg-primary-color); padding: 28px 37px; } .contact-form-wrap .btn span { background: var(--tg-secondary-color); } .contact-info-wrap { margin-right: 50px; } .contact-info-wrap .list-wrap li { margin-bottom: 40px; } .contact-info-wrap .list-wrap li:last-child { margin-bottom: 0; } .contact-info-wrap .list-wrap li { display: flex; align-items: center; } .contact-info-wrap .list-wrap li { display: flex; align-items: center; } .contact-info-wrap .list-wrap li .icon { width: 60px; flex: 0 0 60px; margin-left: 20px; } .contact-info-wrap .list-wrap li .icon img { border-radius: 50%; } .contact-info-wrap .list-wrap li .content .title { font-weight: 600; font-size: 24px; margin-bottom: 0; color: var(--tg-white); } .contact-info-wrap .list-wrap li .content span { display: block; color: var(--tg-dark-electric); } .contact-info-wrap .list-wrap li .content a { color: var(--tg-dark-electric); } .contact-info-wrap .list-wrap li .content a:hover { color: var(--tg-primary-color); } /* inner-contact */ .inner-contact-area .section-title { width: 65%; } .inner-contact-wrap { position: relative; } #contact-map { width: 100%; height: 840px; margin-bottom: 80px; } #contact-map iframe { width: 100%; height: 100%; border-radius: 20px; } .inner-contact-info .list-wrap { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 30px; } .contact-info-item { display: flex; align-items: center; } .contact-info-item .icon { width: 60px; margin-left: 20px; flex: 0 0 60px; } .contact-info-item .content .title { font-weight: 600; font-size: 24px; margin-bottom: 5px; } .contact-info-item .content a, .contact-info-item .content p { margin-bottom: 0; color: #605E7A; line-height: 1.2; display: block; } .contact-info-item .content a:hover { color: var(--tg-primary-color); } .inner-contact-form-wrap { border: 1px solid var(--tg-border-color); box-shadow: 0px 35px 54px rgba(61, 90, 125, 0.03); border-radius: 20px; width: 610px; padding: 45px 40px; position: absolute; left: 0; top: 0; background: var(--tg-white); } .inner-contact-form-wrap .form-grp { position: relative; margin-bottom: 24px; } .inner-contact-form-wrap .form-grp textarea, .inner-contact-form-wrap .form-grp input { width: 100%; border: 1px solid #E3E3E3; backdrop-filter: blur(21px); background: transparent; border-radius: 15px; letter-spacing: 0.0833333px; color: #818080; font-size: 16px; padding: 22px 55px 22px 30px; height: 72px; display: block; } .inner-contact-form-wrap .form-grp textarea::placeholder, .inner-contact-form-wrap .form-grp input::placeholder { color: #818080; font-size: 16px; } .inner-contact-form-wrap .form-grp textarea { min-height: 153px; max-height: 153px; } .inner-contact-form-wrap .form-grp label { position: absolute; right: 28px; color: #B1AEAE; font-size: 15px; z-index: 2; top: 23px; } .inner-contact-form-wrap .btn { background: var(--tg-primary-color); margin-top: 22px; } .inner-contact-form-wrap span { background: var(--tg-secondary-color); } /*============================= 30. Footer ===============================*/ .footer-area { background: var(--tg-section-background-two); } .logo img { max-width: 126px; } .footer-top { padding: 120px 0 80px; } .footer-widget { margin-bottom: 40px; } .footer-widget .logo { margin-bottom: 15px; } .footer-social .list-wrap { display: flex; align-items: center; gap: 10px; margin-bottom: 33px; } .footer-social .list-wrap li a { width: 33px; height: 33px; display: flex; align-items: center; justify-content: center; border-radius: 10px; color: var(--tg-silver); font-size: 14px; border: 2px solid #272531; } .footer-social .list-wrap li a:hover { color: var(--tg-secondary-color); border-color: var(--tg-secondary-color); } .footer-contact span { display: block; color: var(--tg-silver); margin-bottom: 8px; } .footer-contact .title { font-size: 20px; margin-bottom: 0; color: var(--tg-white); } .footer-widget .fw-title { font-size: 20px; margin-bottom: 30px; color: var(--tg-white); } .fw-link .list-wrap li { position: relative; padding-right: 20px; margin-bottom: 10px; } .fw-link .list-wrap li:last-child { margin-bottom: 0; } .fw-link .list-wrap li a { color: var(--tg-silver); font-size: 15px; transition: .3s linear; } .fw-link .list-wrap li a::before { content: ""; position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 4px; height: 4px; border-radius: 50%; background: var(--tg-silver); transition: .3s linear; } .fw-link .list-wrap li a:hover { color: var(--tg-primary-color); } .fw-link .list-wrap li a:hover::before { background: var(--tg-primary-color); } .footer-about .list-wrap li { display: flex; align-items: center; margin-bottom: 25px; } .footer-about .list-wrap li:last-child { margin-bottom: 0; } .footer-about .list-wrap li img { margin-left: 13px; min-width: 20px; } .footer-about .list-wrap li span, .footer-about .list-wrap li a { font-size: 15px; color: var(--tg-silver); } .footer-about .list-wrap li a:hover { color: var(--tg-primary-color); } .footer-bottom { background: var(--tg-white); } .footer-bottom p { margin-bottom: 0; color: var(--tg-white); font-size: 14px; } .footer-bottom { background: #24222e; padding: 21px 0; } /* footer-two */ .footer-top-two { padding: 100px 0 85px; } .footer-content-two .logo { margin-bottom: 18px; } .footer-content-two p { margin-bottom: 0; text-transform: capitalize; color: var(--tg-gray-four); opacity: 0.7; } .footer-bottom-two { border-top: 1px solid #46464F; padding: 22px 0; } .footer-bottom-two .copyright-text p { margin-bottom: 0; color: var(--tg-white); opacity: 0.7; } .footer-social-two .list-wrap { display: flex; align-items: center; justify-content: flex-end; } .footer-social-two .list-wrap li.title { color: var(--tg-white); opacity: 0.7; margin-left: 20px; } /* footer-three */ .footer-area-three .footer-content-two p { color: var(--tg-black-coral); opacity: 0.7; } .footer-area-three .footer-bottom-two { border-top: 1px solid #CFCFCF; } .footer-area-three .footer-bottom-two .copyright-text p { color: var(--tg-black-coral); opacity: 0.7; } .footer-area-three .footer-social-two .list-wrap li.title { color: var(--tg-black-coral); opacity: 0.7; margin-left: 20px; } /*============================= 31. Preloader ===============================*/ #preloader { background-color: var(--tg-white); height: 100%; width: 100%; position: fixed; margin-top: 0px; top: 0px; z-index: 9999; } #preloader .loader .loader-container { position: absolute; top: 50%; right: 50%; transform: translate(50%, -50%); width: 100px; height: 100px; border: 3px solid var(--tg-border-color); border-radius: 50%; } #preloader .loader .loader-container:before { position: absolute; content: ""; display: block; top: 50%; right: 50%; transform: translate(50%, -50%); width: 100px; height: 100px; border-top: 3px solid var(--tg-primary-color); border-radius: 50%; animation: loaderspin 1.8s infinite ease-in-out; -webkit-animation: loaderspin 1.8s infinite ease-in-out; } #preloader .loader .loader-icon { position: absolute; top: 50%; right: 50%; transform: translate(50%, -50%); width: 80px; text-align: center; } #preloader .loader .loader-icon img { animation: loaderpulse alternate 900ms infinite; width: 40px; } @keyframes loaderspin { 0% { transform: translate(50%, -50%) rotate(0deg); } 100% { transform: translate(50%, -50%) rotate(-360deg); } } @-webkit-keyframes loaderspin { 0% { transform: translate(50%, -50%) rotate(0deg); } 100% { transform: translate(50%, -50%) rotate(-360deg); } } @keyframes loaderpulse { 0% { transform: scale(1); } 100% { transform: scale(1.2); } } /* Custom cursor */ .cursor-outer { margin-right: -18px; margin-top: -18px; width: 35px; height: 35px; background: var(--tg-primary-color); box-sizing: border-box; z-index: 10000000; opacity: .2; transition: all 0.3s ease-out; } .mouseCursor { position: fixed; top: 0; right: 0; left: 0; bottom: 0; pointer-events: none; border-radius: 50%; transform: translateZ(0); visibility: hidden; text-align: center; } [dir=rtl] .mouseCursor { right: 0; left: auto; } .cursor-inner { margin-right: -4px; margin-top: -4px; width: 8px; height: 8px; z-index: 10000001; background-color: var(--tg-primary-color); transition: width 0.3s ease-in-out, height 0.3s ease-in-out, margin 0.3s ease-in-out, opacity 0.3s ease-in-out; } .cursor-inner span { color: var(--tg-white); line-height: 80px; opacity: 0; text-transform: uppercase; letter-spacing: 1px; font-size: 12px; } .cursor-inner.cursor-big span { opacity: 1; } .mouseCursor.cursor-big { width: 80px; height: 80px; margin-inline-start: -40px; margin-top: -40px; } .mouseCursor.cursor-big.cursor-outer { display: none; } .mouseCursor.cursor-big.d-none { display: none; } .slider-drag .swiper-slide { cursor: none; }