/*---------------------------------------- 01. common css ----------------------------------------*/ /*----------------------------------------------------------------------------------- Theme Name: Pixalane - Creative Agency Author: Topylo Description: Pixalane - Creative Agency Version: 1.0 ----------------------------------------------------------------------------------- /************ TABLE OF CONTENTS *************** 01. common css 02. about css 03. accordion css 04. animation css 05. award css 06. background css 07. banner css 08. blog css 09. brand css 10. button css 11. capabilities css 12. choose css 13. contact css 14. counter css 15. cover css 16. cta css 17. cursor css 18. discuss css 19. fact css 20. features css 21. footer css 22. gallery css 23. header css 24. hero css 25. history css 26. idea css 27. intro css 28. menu css 29. page-title css 30. protfilio css 31. pricing css 32. process css 33. project css 34. section-title css 35. service css 36. settings css 37. step css 38. strategy css 39. team css 40. testimonial css 41. theme dark css 42. video css 43. work css 44. sign css **********************************************/ @import url("https://fonts.googleapis.com/css2?family=Archivo:wght@300;400;500;600;700;800;900&family=Tenor+Sans&display=swap"); :root { /** @font-family declaration */ --tpl-ff-heading: 'Archivo', sans-serif; --tpl-ff-body: 'Tenor Sans', sans-serif; --tpl-ff-fontawesome: 'Font Awesome 6 Pro'; --tpl-ff-handwriting: 'autographyregular'; /** @color declaration */ --clr-common-white: #eeeeee; --clr-common-black: #222222; --clr-common-border: #c7c7c7; --clr-common-placeholder: #8a8787; --clr-theme-1: #222222; /* --clr-theme-2: #14cf93; */ --clr-theme-2: #29b4ff; --clr-theme-3: #7c7c7c; --clr-theme-primary: #222222; --clr-background-primary: #222222; --clr-bg-1: #222222; /* --clr-bg-2: #14cf93; */ --clr-bg-2: #29b4ff; --clr-bg-3: #fffcf6; --clr-bg-4: #f2f2f2; --clr-bg-5: #F7F7F7; --clr-bg-6: #E8F5FF; } * { margin: 0; padding: 0; box-sizing: border-box; scroll-behavior: smooth; } html { font-size: 10px; } body { font-family: var(--tpl-ff-body); font-size: 16px; font-weight: normal; color: var(--clr-theme-primary); line-height: 28px; } .body-4-padding-left #smooth-wrapper { padding-left: 0; } @media only screen and (min-width: 1400px) and (max-width: 1600px), only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) { .body-4-padding-left #smooth-wrapper { padding-left: 84px; } } main { overflow: hidden; } section { position: relative; z-index: 2; } a { text-decoration: none; } img { max-width: 100%; object-fit: cover; } a, .btn, button, span, p, input, select, textarea, li, img, svg path, *::after, *::before, .transition-3, h1, h2, h3, h4, h5, h6 { -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; } a:focus, .button:focus { text-decoration: none; outline: none; } a:focus, a:hover { color: var(--clr-theme-2); text-decoration: none; border-color: var(--clr-theme-2); } a, button { color: inherit; outline: none; border: none; background: transparent; } button:hover { cursor: pointer; } button:focus { outline: 0; border: 0; } .uppercase { text-transform: uppercase; } .capitalize { text-transform: capitalize; } .lowercase { text-transform: lowercase; } h1, h2, h3, h4, h5, h6 { font-family: var(--tpl-ff-heading); text-transform: capitalize; color: var(--clr-theme-primary); font-weight: 600; line-height: 1.2; margin-top: 0px; margin-bottom: 0px; -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; } h1 { font-size: 100px; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { h1 { font-size: 90px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { h1 { font-size: 60px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { h1 { font-size: 80px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { h1 { font-size: 56px; } } @media (max-width: 575px) { h1 { font-size: 50px; } } @media (max-width:450px) { h1 { font-size: 38px; } } h1.small { font-size: 65px; } h2 { font-size: 60px; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { h2 { font-size: 54px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { h2 { font-size: 50px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { h2 { font-size: 46px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { h2 { font-size: 42px; } } @media (max-width:450px) { h2 { font-size: 36px; } } h2.xlarge { font-size: 80px; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { h2.xlarge { font-size: 70px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { h2.xlarge { font-size: 60px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { h2.xlarge { font-size: 46px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { h2.xlarge { font-size: 42px; } } @media (max-width:450px) { h2.xlarge { font-size: 36px; } } h2.large { font-size: 65px; } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 768px) and (max-width: 991px) { h2.large { font-size: 60px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { h2.large { font-size: 55px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { h2.large { font-size: 46px; } } @media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px) { h2.large { font-size: 40px; } } @media (max-width:450px) { h2.large { font-size: 35px; } } h2.small { font-size: 50px; } h2.x-small { font-size: 40px; } h3 { font-size: 48px; } h4 { font-size: 34px; } h5 { font-size: 24px; } h5.small { font-size: 22px; } h6 { font-size: 20px; } ul { margin: 0; padding: 0; } p { font-family: var(--tpl-ff-body); font-size: 18px; font-weight: normal; color: var(--clr-theme-primary); margin-bottom: 26px; line-height: 28px; } p.xlarge { font-size: 24px; line-height: 40px; } @media only screen and (min-width: 768px) and (max-width: 991px) { p.xlarge { font-size: 22px; line-height: 36px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { p.xlarge { font-size: 20px; line-height: 34px; } } p.large { font-size: 20px; line-height: 34px; } ::-webkit-scrollbar { height: 4px; width: 4px; background: transparent; } ::-webkit-scrollbar-thumb { background: var(--clr-theme-2); -webkit-border-radius: 1ex; -webkit-box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.75); } ::-webkit-scrollbar-corner { background: transparent; } *::-moz-selection { background: var(--clr-common-black); color: var(--clr-common-white); text-shadow: none; } ::-moz-selection { background: var(--clr-common-black); color: var(--clr-common-white); text-shadow: none; } ::selection { background: var(--clr-common-black); color: var(--clr-common-white); text-shadow: none; } /*-- - Input Placeholder -----------------------------------------*/ *::-moz-placeholder { color: var(--clr-common-placeholder); font-size: 16px; opacity: 1; } *::placeholder { color: var(--clr-common-placeholder); font-size: 16px; opacity: 1; } /*-- - Common Classes -----------------------------------------*/ .fix { overflow: hidden; } .x-clip { overflow-x: clip; } .y-clip { overflow-y: clip; } .clear { clear: both; } .f-left { float: left; } .f-right { float: right; } .include-bg { background-repeat: no-repeat; background-size: cover; background-position: center; } .z-index-0 { z-index: 0 !important; } .z-index-1 { z-index: 1; } .z-index-2 { z-index: 2; } .z-index-3 { z-index: 3; } .z-index-4 { z-index: 4; } .z-index-5 { z-index: 5; } .z-index--1 { z-index: -1; } .z-index--2 { z-index: -2; } .z-index--3 { z-index: -3; } .z-index--4 { z-index: -4; } .z-index--5 { z-index: -5; } .overflow-y-visible { overflow-x: hidden; overflow-y: visible; } .p-relative { position: relative; } .p-absolute { position: absolute; } .pos-rel { position: relative; } .pos-abs { position: absolute; } .full-screen { display: block; width: 100%; height: 100vh; overflow: hidden; } #bd-cstm-sliders #bd-cstm-sliders__container { height: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: nowrap; flex-wrap: nowrap; padding: 0; overflow: hidden; width: 300%; } #bd-cstm-sliders #bd-cstm-sliders__container .bd-cstm-slide { position: relative; width: 100%; overflow: hidden; height: 100%; } .section-spacing { padding-top: 120px; padding-bottom: 120px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .section-spacing { padding-top: 120px; padding-bottom: 120px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .section-spacing { padding-top: 100px; padding-bottom: 100px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .section-spacing { padding-top: 80px; padding-bottom: 80px; } } .section-spacing-top { padding-top: 120px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .section-spacing-top { padding-top: 120px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .section-spacing-top { padding-top: 100px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .section-spacing-top { padding-top: 80px; } } .section-spacing-bottom { padding-bottom: 120px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .section-spacing-bottom { padding-bottom: 120px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .section-spacing-bottom { padding-bottom: 100px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .section-spacing-bottom { padding-bottom: 80px; } } .section-title-spacing { margin-bottom: 50px; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .section-title-spacing { margin-bottom: 30px; } } .adjust-header-space { margin-top: 88px; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .adjust-header-space { margin-top: 65px; } } /*---------------------------------------- Font Weight -----------------------------------------*/ .fw-400 { font-weight: 400; } .fw-500 { font-weight: 500; } .fw-600 { font-weight: 600; } .fw-500 { font-weight: 500; } .fw-600 { font-weight: 600; } .fw-700 { font-weight: 700; } .fw-800 { font-weight: 800; } .fw-900 { font-weight: 900; } /*--- color -----------------------------------------*/ .text-white h1, .text-white h2, .text-white h3, .text-white h4, .text-white h5, .text-white h6, .text-white p, .text-white span, .text-white li, .text-white a { color: var(--clr-common-white) !important; } .white-color { color: var(--clr-common-white); } .black-color { color: var(--clr-common-black); } .theme-color { color: var(--clr-theme-1); } .theme-color-2 { color: var(--clr-theme-2); } .body-overlay { background-color: rgba(0, 0, 0, 0.5); height: 100%; width: 100%; position: fixed; top: 0; z-index: 99; inset-inline-start: 0; opacity: 0; visibility: hidden; -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; } .body-overlay:hover { cursor: pointer; } .body-overlay.opened { opacity: 1; visibility: visible; } @media (max-width: 575px) { .progress-wrap { inset-inline-end: 15px; bottom: 15px; } } .centered-title { text-align: center; } .centered-title .bd-section-subtitle { justify-content: center; } .bd-section-title { font-size: 65px; line-height: 1; font-weight: 700; text-transform: uppercase; position: relative; } @media only screen and (min-width: 1400px) and (max-width: 1600px) { .bd-section-title { font-size: 60px; } } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .bd-section-title { font-size: 54px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .bd-section-title { font-size: 48px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .bd-section-title { font-size: 48px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .bd-section-title { font-size: 40px; } } @media (max-width: 575px) { .bd-section-title { font-size: 40px; } } @media (max-width:450px) { .bd-section-title { font-size: 34px; } } .bd-section-subtitle { font-size: 16px; font-weight: 600; color: var(--clr-theme-2); text-transform: uppercase; display: flex; align-items: center; justify-content: flex-start; column-gap: 15px; line-height: 1; margin-bottom: 30px; margin-top: -3px; } .bd-section-subtitle span { color: var(--clr-common-white); } .bd-section-subtitle i:not(:last-child) { transform: rotateY(180deg); } .bd-section-subtitle.no-gap { column-gap: 0; } .bd-section-subtitle.st-b { font-style: italic; column-gap: 7px; } .bd-section-subtitle.st-b span { color: var(--clr-theme-1); } .title-text-white.bd-section-subtitle.st-b span { color: var(--clr-common-white); } .title-text-white.bd-section-title { color: var(--clr-common-white); } .white-text { color: var(--clr-common-white); } .border-left { position: relative; } .border-left:before { position: absolute; content: ""; width: 1px; height: 100%; background: #eaebee; inset-inline-start: 0; top: 0; } .bg-white { background-color: var(--clr-common-white) !important; } .bg-gray { background-color: var(--clr-bg-4); } .bg-theme-1 { background: var(--clr-theme-1); } .bg-theme-2 { background: var(--clr-theme-2); } .bg-theme-3 { background: var(--clr-theme-3); } .section-main-title { font-size: 38px; line-height: 1.26; font-weight: 600; color: var(--clr-theme-1); margin-top: -8px; } @media (max-width: 575px) { .section-main-title { font-size: 32px; } } @media (max-width:450px) { .section-main-title { font-size: 28px; } } .hr1 { border-bottom: 1px solid #D9D9D9; } .container, .container-fluid, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl { width: 100%; padding-inline-end: var(--bs-gutter-x, 15px); padding-inline-start: var(--bs-gutter-x, 15px); margin-inline-end: auto; margin-inline-start: auto; } .row { --bs-gutter-x: 30px; } .g-40, .gx-40 { --bs-gutter-x: 40px; } .g-40, .gy-40 { --bs-gutter-y: 40px; } .g-50, .gx-50 { --bs-gutter-x: 50px; } .g-50, .gy-50 { --bs-gutter-y: 50px; } @media (min-width: 1441px) { .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl { max-width: 1440px; } } @media (min-width: 1200px) { .container-small { max-width: 1200px; } } .circle-dot-pagination { display: flex; gap: 4px; } .circle-dot-pagination .swiper-pagination-bullet { width: 24px; height: 24px; border: 1px solid transparent; border-radius: 50%; display: inline-block; border-radius: 50%; opacity: 1; margin: 0 !important; position: relative; background: none; } .circle-dot-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active { border-color: var(--clr-theme-2); } .circle-dot-pagination .swiper-pagination-bullet:before { position: absolute; content: ""; width: 8px; height: 8px; background: var(--clr-theme-2); border-radius: 50%; top: 50%; left: 50%; transform: translate(-50%, -50%); } .stroke-text { font-size: 100px; font-weight: 700; font-family: "Archivo", sans-serif; -webkit-text-fill-color: transparent; -webkit-text-stroke-width: 1px; -webkit-text-stroke-color: #2F2F2F; line-height: 1; display: inline-block; } .area-absolute { position: absolute; width: 100%; height: 100%; top: 0; inset-inline-start: 0; } .filter-search-input { position: relative; } .filter-search-input input { width: 100%; height: 50px; border: 1px solid var(--clr-bg-1); background: var(--clr-common-white); border-radius: 0; padding: 0 20px; padding-inline-end: 50px; outline: none; } .filter-search-input button { position: absolute; inset-inline-end: 20px; top: 12px; color: #919191; } /*---------------------------------------- Flaction customize -----------------------------------------*/ i[class^=flaticon-] { line-height: 1; top: 2px; position: relative; } /*---------------------------------------- Font customize -----------------------------------------*/ .font-highlight { font-family: var(--tpl-ff-body); font-weight: 400; } .font-normal { font-weight: 400; } .font-bold { font-weight: 700; } [dir=rtl] [type=tel], [dir=rtl] [type=url], [dir=rtl] [type=email], [dir=rtl] [type=number] { direction: rtl; } video { width: 100%; height: 100%; object-fit: cover; } .parallax-bg { background-attachment: fixed; } .panel { position: absolute; top: 0; width: 0%; height: 100%; left: 0; background: white; z-index: 10; transition: transform 0.5s ease-in-out; animation: panel 1s; animation-timing-function: cubic-bezier(0.785, 0.135, 0.15, 0.86); } .panel-top { position: absolute; top: 0; width: 100%; height: 0%; left: 0; background: white; z-index: 10; transition: transform 0.5s ease-in-out; animation: panelTop 1s; animation-timing-function: cubic-bezier(0.785, 0.135, 0.15, 0.86); } .panel-bottom { position: absolute; bottom: 0; width: 100%; height: 0%; left: 0; background: white; z-index: 10; transition: transform 0.5s ease-in-out; animation: panelBottom 1s; animation-timing-function: cubic-bezier(0.785, 0.135, 0.15, 0.86); } .tpl__item-center { width: 100%; text-align: center; } .tpl__flex-center { display: flex; justify-content: center; } .tpl__theme-color { color: var(--clr-theme-2); } .gradient-text{ text-transform: uppercase; background: linear-gradient(to right, #38b8fd 0%, #0072ff 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .has-border-bottom { border-bottom: 1px solid #D9D9D9; } .has-border-top-bottom { border-top: 1px solid #D9D9D9; border-bottom: 1px solid #D9D9D9; } .has-border-bottom-black { border-bottom: 1px solid #414141; } /*---------------------------------------- Basic-pagaination -----------------------------------------*/ .bd-basic__pagination ul { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; align-items: center; gap: 20px; justify-content: center; flex-wrap: wrap; } @media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 991px) { .bd-basic__pagination ul { justify-content: start; } } .bd-basic__pagination ul li { list-style: none; } .bd-basic__pagination ul li a { width: 50px; height: 50px; display: inline-flex; align-items: center; justify-content: center; position: relative; right: 0; top: 50%; font-weight: 500; font-size: 16px; border: 1px solid #D9D9D9; font-family: var(--tpl-ff-heading); } .bd-basic__pagination ul li a:hover { background-color: var(--clr-theme-2); color: var(--clr-common-white); border-color: transparent; } .bd-basic__pagination ul li .current { width: 50px; height: 50px; display: inline-flex; align-items: center; justify-content: center; position: relative; right: 0; top: 50%; font-weight: 500; font-size: 14px; background-color: var(--clr-theme-2); color: var(--clr-common-white); } /*---------------------------------------- Mfp customize -----------------------------------------*/ .mfp-iframe-holder .mfp-content { line-height: 0; width: 100%; max-width: 1280px; } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 1400px) and (max-width: 1600px) { .mfp-iframe-holder .mfp-content { max-width: 1050px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .mfp-iframe-holder .mfp-content { max-width: 820px; } } .mfp-close { -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); } .mfp-close:hover { color: var(--clr-common-white); } .mfp-close::after { position: absolute; content: "\f00d"; height: 100%; width: 100%; font-family: var(--tpl-ff-fontawesome); font-size: 36px; font-weight: 200; right: -35px; margin-top: -25px; } @media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 991px) { .mfp-close::after { right: 15px; margin-top: -40px; } } .mfp-iframe-scaler iframe { -webkit-box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.15); -ms-box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.15); box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.15); } .mfp-bg { opacity: 0.8; background: #212121 !important; } body.mfp-content { overflow-y: hidden !important; } --topylo-tab-width { width: 200px; } .down-mark { border-bottom: 2px solid; } @media (max-width: 575px) { .text-xs-center { text-align: center !important; } } .slider-nav.swiper-button-disabled { opacity: 0.5; pointer-events: none; } /*---------------------------------------- 10. button css ----------------------------------------*/ .fill-btn { font-size: 16px; color: var(--clr-common-white); font-weight: 600; background: var(--clr-theme-1); border: 1px solid var(--clr-theme-1); height: 60px; display: inline-flex; justify-content: center; align-items: center; gap: 13px; border-radius: 0px; padding: 0 50px; position: relative; overflow: hidden; line-height: 1; white-space: nowrap; } .fill-btn:hover { color: var(--clr-theme-1); background: var(--clr-common-white); } .radius-btn { font-size: 16px; font-weight: 400; color: var(--clr-common-white); border: 1px solid #D9D9D9; padding: 0px 55px; height: 80px; border-radius: 50px; display: inline-flex; justify-content: center; align-items: center; gap: 20px; line-height: 1; } .radius-btn .btn-icon { transform: rotate(-45deg); } .radius-btn .btn-icon i { display: inline-block; } .radius-btn:hover { color: var(--clr-common-white); background: var(--clr-theme-2); border-color: var(--clr-theme-1); } .radius-btn:hover .btn-icon i { animation: iconltr 0.5s forwards; } .radius-btn.border-black { border: 1px solid #4F4F4F; } .radius-btn.border-black:hover { border-color: var(--clr-theme-2); } .radius-btn.is-black { color: var(--clr-common-black); } .border-btn { position: relative; z-index: 1; overflow: hidden; font-weight: 500; font-size: 16px; line-height: 19px; padding: 21px 48px; text-align: center; letter-spacing: -0.01em; text-transform: capitalize; display: inline-block; border: 1px solid #d9d9d9; color: var(--clr-common-black); background: transparent; } .border-btn::before { content: ""; position: absolute; height: 400px; width: 430px; top: 50%; left: 50%; background: var(--clr-theme-2); border-radius: 50%; transform: translateX(-22%) translateY(-42%) scale(0); -moz-transition: all 0.5s ease-out 0s; -webkit-transition: all 0.5s ease-out 0s; -ms-transition: all 0.5s ease-out 0s; -o-transition: all 0.5s ease-out 0s; transition: all 0.5s ease-out 0s; z-index: -1; } .border-btn:hover::before { transform: translateX(-50%) translateY(-50%) scale(1); } .border-btn::after { position: absolute; content: ""; background: var(--clr-theme-2); height: 34px; width: 36px; border-radius: 15px; right: -11px; bottom: -11px; } .border-btn:hover { color: var(--clr-common-white); } .border-btn .btn-icon { transform: rotate(-45deg); margin-left: 15px; display: inline-block; } .border-btn .btn-icon i { display: inline-block; } .border-btn:hover .btn-icon i { animation: iconltr 0.5s forwards; } .border-btn2 { font-size: 16px; font-weight: 400; padding: 0 22px; height: 60px; border-radius: 2px; display: inline-flex; justify-content: center; align-items: center; gap: 15px; line-height: 1; color: var(--clr-common-white); border: 1px solid transparent; border-image: linear-gradient(90.37deg, #14CF93 1.75%, #42A5F5 99.88%); border-image-slice: 1; position: relative; z-index: 1; } .border-btn2::before { position: absolute; content: ""; width: 100%; height: 100%; top: 0; left: 0; background: linear-gradient(90.37deg, #14CF93 1.75%, #42A5F5 99.88%); z-index: -1; opacity: 0; transition: 0.3s ease-in-out; } @media (max-width: 575px) { .border-btn2::before { opacity: 1; } } .border-btn2:hover { color: var(--clr-common-white); } .border-btn2:hover::before { opacity: 1; } .border-btn2:hover .btn-icon i { animation: iconltr 0.5s forwards; } .thumb-link-btn { font-size: 18px; font-weight: 600; color: var(--clr-common-white); padding: 0px 155px; height: 126px; border-radius: 100px; display: inline-flex; justify-content: center; align-items: center; gap: 20px; line-height: 1; position: relative; overflow: hidden; z-index: 5; } @media (max-width:450px) { .thumb-link-btn { padding: 0px 40px; } } .thumb-link-btn::after { position: absolute; content: ""; width: 100%; height: 100%; background: #000000; opacity: 0.65; top: 0; left: 0; z-index: -1; } .thumb-link-btn .btn-icon { transform: rotate(-45deg); } .thumb-link-btn .btn-icon i { display: inline-block; } .thumb-link-btn:hover { color: var(--clr-theme-2); } .thumb-link-btn:hover .btn-icon i { animation: iconltr 0.5s forwards; } .border-bottom-btn { font-size: 16px; line-height: 25px; font-weight: 400; display: inline-flex; position: relative; } .border-bottom-btn:hover:after { left: 0; width: 100%; } .border-bottom-btn:after { position: absolute; content: ""; width: 70%; height: 3px; right: auto; left: 0; bottom: -4px; background: var(--clr-theme-2); -webkit-transition: all 0.5s ease-out 0s; -moz-transition: all 0.5s ease-out 0s; -ms-transition: all 0.5s ease-out 0s; -o-transition: all 0.5s ease-out 0s; transition: all 0.5s ease-out 0s; } .btn-text::after { position: absolute; content: ""; width: 70%; height: 3px; right: auto; left: 0; bottom: -4px; background: var(--clr-theme-2); -webkit-transition: all 0.5s ease-out 0s; -moz-transition: all 0.5s ease-out 0s; -ms-transition: all 0.5s ease-out 0s; -o-transition: all 0.5s ease-out 0s; transition: all 0.5s ease-out 0s; } .btn-text:hover::after { left: 0; width: 100%; } .service-list-btn { font-size: 16px; font-weight: 400; color: var(--clr-theme-1); border: 1px solid #D9D9D9; padding: 15px 27px; border-radius: 2px; display: inline-flex; justify-content: center; align-items: center; gap: 15px; line-height: 1.3; } .service-list-btn .btn-icon { transform: rotate(-45deg); } .service-list-btn .btn-icon i { display: inline-block; font-size: 20px; } .circle-btn { height: 180px; width: 180px; position: relative; display: inline-flex; justify-content: center; align-items: center; border-radius: 50%; } .circle-btn:hover .icon-box { color: var(--clr-theme-1); } .circle-btn:hover .icon-box svg * { fill: var(--clr-theme-2); } .circle-btn:hover .icon-box i { animation: iconltr 0.5s forwards; color: var(--clr-common-white); } .circle-btn .icon-box { height: 120px; width: 120px; display: inline-flex; justify-content: center; align-items: center; color: var(--clr-common-black); border-radius: 50%; font-size: 38px; font-weight: 400; background: var(--clr-theme-2); box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1); background-size: cover; background-repeat: no-repeat; background-position: center; } .circle-btn .image-text { position: absolute; top: 0; left: 0; width: 100%; animation: rotate 20s linear infinite; } .circle-btn.is-green .icon-box { background: var(--clr-theme-2); border-color: var(--clr-theme-2); color: var(--clr-common-white); transform: rotate(-45deg); } .circle-btn.is-green .icon-box i { font-size: 35px; } .thumb-video-btn .circle-btn { width: 160px; height: 160px; } .thumb-video-btn .circle-btn .icon-box { width: 110px; height: 110px; background-color: #1F1F1F; } .thumb-video-btn .circle-btn .image-text { filter: invert(98%) sepia(100%) saturate(0%) hue-rotate(154deg) brightness(102%) contrast(102%); } .thumb-video-btn.is-overlay .icon-box { position: relative; z-index: 55; } .thumb-video-btn.is-overlay .icon-box::before { position: absolute; content: ""; height: 100%; width: 100%; background: #000000; top: 0; left: 0; border-radius: 50%; z-index: -1; opacity: 0.5; } .thumb-video-btn.remove-filter.thumb-video-btn .circle-btn .image-text { filter: none; } .nav-btn { width: 59px; height: 59px; border: 1px solid var(--clr-theme-1); display: inline-flex; justify-content: center; align-items: center; font-size: 20px; color: var(--clr-theme-1); background: var(--clr-common-white); -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; } .nav-btn:hover { color: var(--clr-common-white); background: var(--clr-theme-2); } .nav-btn i { font-weight: 400; } [dir=rtl] .nav-btn i { transform: rotateY(180deg); } .circle-nav-btn { width: 60px; height: 60px; border-radius: 50%; display: inline-flex; justify-content: center; align-items: center; font-size: 26px; color: var(--clr-theme-2); /* background: rgba(20, 207, 147, 0.15); */ background: #2c404b; -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; } .circle-nav-btn:hover { color: var(--clr-common-white); background: var(--clr-theme-2); } .circle-nav-btn i { font-weight: 400; } [dir=rtl] .circle-nav-btn i { transform: rotateY(180deg); } .icon-box-upward { transform: rotate(-45deg); display: inline-flex; justify-content: center; align-items: center; width: 40px; height: 40px; color: #191919; font-size: 20px; position: relative; } .icon-box-upward:hover i { animation: iconltr 0.5s forwards; } .icon-box-upward::before { position: absolute; content: ""; width: 100%; height: 100%; border: 1px solid #D9D9D9; transform: rotate(45deg); } .text-btn { color: var(--clr-theme-3); font-size: 16px; font-weight: 400; line-height: 25px; position: relative; display: inline-flex; align-items: center; gap: 15px; } .text-btn:hover { color: var(--clr-theme-2); } .arrow-text-btn { color: var(--clr-theme-1); display: inline-flex; align-items: center; gap: 13px; line-height: 1; } .arrow-text-btn:hover { color: var(--clr-theme-2); } .arrow-text-btn:hover span:before { transform: scaleX(1); background: var(--clr-theme-2); } .arrow-text-btn i { font-size: 20px; } .arrow-text-btn span { font-size: 16px; font-weight: 600; position: relative; z-index: 1; } .arrow-text-btn span:before { position: absolute; left: 0; bottom: -2px; right: 0; height: 1px; content: ""; transform: scaleX(0); transform-origin: center; transform-style: preserve-3d; transition: all 0.4s cubic-bezier(0.62, 0.21, 0.45, 1.22); background: var(--clr-theme-1); z-index: -1; } .c-button { border-radius: 100rem; width: 200px; height: 200px; border: 0; background: transparent; position: relative; overflow: hidden; transform: scale(1); transition: 1s ease; display: inline-flex; justify-content: center; align-items: center; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .c-button { width: 170px; height: 170px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .c-button { width: 150px; height: 150px; } } .c-button:after, .c-button:before { content: ""; width: inherit; height: inherit; border-radius: inherit; background-color: var(--clr-theme-1); position: absolute; top: 0; left: 0; transform: rotate(-180deg); transform-origin: left; transition: 0.4s ease-out; } .c-button:before { transition-delay: 0.15s; } .c-button:after { /* background-color: #14CF93; */ background-color: #29b4ff; } .c-button:hover { transform: scale(1); /* border-color: #14CF93; */ border-color: #29b4ff; } .c-button:hover:after, .c-button:hover:before { top: 0; left: 0; transform: rotate(0deg); transition: 0.4s ease-out; } .c-button:hover:after { transition-delay: 0.15s; } .c-button:hover .c-button__text { color: var(--clr-common-white); } .c-button:hover .c-button__arrow { color: var(--clr-common-white); border-color: var(--clr-common-white); } .c-button__border { position: absolute; content: ""; width: inherit; height: inherit; border-radius: inherit; top: 0; left: 0; transition: 0.4s ease-out; border: 1px solid #5d5d5d; } .c-button__text { position: relative; display: block; text-align: center; z-index: 2; font-size: 16px; color: var(--clr-theme-primary); line-height: 25px; transition: 0.4s ease-out; } .c-button__text i { font-size: 25px; } .c-button .c-button__arrow { font-size: 32px; width: 92px; height: 92px; display: inline-flex; align-items: center; justify-content: center; border: 3.3px solid #4F4F4F; color: #4F4F4F; border-radius: 50%; position: relative; z-index: 55; -webkit-transition: all 0.4s ease-out 0s; -moz-transition: all 0.4s ease-out 0s; -ms-transition: all 0.4s ease-out 0s; -o-transition: all 0.4s ease-out 0s; transition: all 0.4s ease-out 0s; } .c-button.is-fill { background: #29b4ff; /* background: #14CF93; */ } .c-button.is-fill .c-button__border { border: none; } .c-button.is-fill::after { background-color: var(--clr-theme-1); } .team-middle .area-btn .c-button.is-fill { width: 266px; height: 266px; } @media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 992px) and (max-width: 1199px) { .team-middle .area-btn .c-button.is-fill { width: 200px; height: 200px; } } .team-middle .area-btn .c-button .c-button__text { color: var(--clr-common-white); font-size: 24px; } @media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 992px) and (max-width: 1199px) { .team-middle .area-btn .c-button .c-button__text { font-size: 18px; } } .c-button.is-white .c-button__text { color: var(--clr-common-white); } .c-button .is-white::after, .c-button::before { content: ""; width: inherit; height: inherit; border-radius: inherit; background-color: transparent; position: absolute; top: 0; left: 0; transform: rotate(-180deg); transform-origin: left; transition: 0.4s ease-out; } .round-button { border-radius: 50%; padding: 30px 41px; background: transparent; position: relative; display: inline-flex; justify-content: center; align-items: center; border: 1px solid #4F4F4F; } .round-button:hover { transform: scale(1); border-color: #14CF93; } .round-button:hover:after, .round-button:hover:before { top: 0; left: 0; transform: rotate(0deg); transition: 0.4s ease-out; } .round-button:hover:after { transition-delay: 0.15s; } .round-button:hover .c-button__text { color: var(--clr-common-white); } .round-button__border { position: absolute; content: ""; width: inherit; height: inherit; border-radius: inherit; top: 0; left: 0; transition: 0.4s ease-out; border: 1px solid #4F4F4F; } .round-button__text { position: relative; display: block; z-index: 2; font-size: 16px; color: var(--clr-theme-primary); line-height: 25px; transition: 0.4s ease-out; } .play-btn { width: 60px; height: 60px; font-size: 16px; background-color: var(--clr-common-white); display: inline-flex; border-radius: 50%; color: var(--clr-theme-2); justify-content: center; align-items: center; cursor: pointer; animation: pulse 2s infinite; } .play-btn:hover { background-color: var(--clr-theme-2); color: var(--clr-theme-1); } /* link btn */ .link-btn { position: relative; font-size: 15px; font-weight: 500; color: var(--clr-common-black); text-transform: uppercase; padding-inline-end: 15px; } .link-btn i { position: absolute; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); transition: all ease 0.2s; -webkit-transition: all ease 0.2s; -moz-transition: all ease 0.2s; -ms-transition: all ease 0.2s; -o-transition: all ease 0.2s; } .link-btn i:first-child { inset-inline-start: -100%; visibility: hidden; opacity: 0; } .link-btn i:last-child { inset-inline-end: 0; } .link-btn:hover { color: var(--clr-common-black); } .link-btn:hover i:first-child { inset-inline-start: 0; visibility: visible; opacity: 1; } .link-btn:hover i:last-child { inset-inline-end: -100%; visibility: hidden; opacity: 0; } .link-btn-2 { position: relative; font-size: 14px; color: var(--clr-common-black); font-weight: 500; padding-inline-end: 22px; display: inline-block; text-transform: uppercase; } .link-btn-2 i { position: absolute; top: 45%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); transition: all ease 0.2s; -webkit-transition: all ease 0.2s; -moz-transition: all ease 0.2s; -ms-transition: all ease 0.2s; -o-transition: all ease 0.2s; font-size: 12px; } .link-btn-2 i:first-child { inset-inline-end: 10%; visibility: hidden; opacity: 0; } .link-btn-2 i:last-child { inset-inline-end: 0; } .link-btn-2:hover { color: var(--clr-common-black); } .link-btn-2:hover i:first-child { inset-inline-end: 0; visibility: visible; opacity: 1; } .link-btn-2:hover i:last-child { inset-inline-end: -10%; visibility: hidden; opacity: 0; } .link-btn-2.pink { color: var(--clr-common-black); } .link-btn-2.pink:hover { color: var(--clr-common-black); } /* pulse btn */ .pulse-btn { display: inline-block; width: 80px; height: 80px; line-height: 84px; text-align: center; background-color: var(--clr-common-white); -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; color: var(--clr-common-black); animation: pulse 2s infinite; } .pulse-btn:hover { background-color: var(--clr-common-black); color: var(--clr-common-white); } .pulse-btn i { padding-inline-start: 2px; } @-webkit-keyframes pulse { 0% { -webkit-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4); } 70% { -webkit-box-shadow: 0 0 0 45px rgba(255, 255, 255, 0); } 100% { -webkit-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); } } @keyframes pulse { 0% { -moz-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4); box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4); } 70% { -moz-box-shadow: 0 0 0 45px rgba(255, 255, 255, 0); box-shadow: 0 0 0 45px rgba(255, 255, 255, 0); } 100% { -moz-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); } } .link-scroll-wrapper { -webkit-transition-timing-function: linear; transition-timing-function: linear; } .link-scroll-line__heading { white-space: nowrap; margin-bottom: 0; } .link-scroll-line__heading a:hover, .link-scroll-line__heading a:focus { color: inherit; } .link-scroll-line__heading a:hover .stroke-text, .link-scroll-line__heading a:focus .stroke-text { -webkit-text-stroke-color: inherit; } .link-scroll-line__heading .link-separate-icon svg { width: 50px; height: auto; } .link-scroll-line__heading .stroke-text { font-size: inherit; } .case-btn { display: inline-flex; align-items: center; gap: 15px; } .icon-box i { font-size: 24px; } .case-meta-item:hover .icon-box i { animation: iconltr 0.5s forwards; } .team-edid-btn { height: 46px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid #D9D9D9; padding: 0 15px; gap: 10px; border-radius: 6px; } .team-edid-btn:hover { color: var(--clr-common-white); background: var(--clr-theme-2); border-color: transparent; } .team-edid-btn:hover .pen-icon path { fill: var(--clr-common-white); } .input-btn { font-size: 16px; font-weight: 400; color: #a5a5a5; border: 1px solid #D9D9D9; padding: 0 22px; height: 60px; border-radius: 2px; display: inline-flex; justify-content: center; align-items: center; gap: 15px; line-height: 1; } .input-btn .btn-icon { transform: rotate(-45deg); } .input-btn .btn-icon i { display: inline-block; } .input-btn:hover { color: var(--clr-common-white); background: var(--clr-theme-2); border-color: var(--clr-theme-2); } .input-btn:hover .btn-icon i { animation: iconltr 0.5s forwards; } .login-btn { font-size: 16px; font-weight: 400; color: #a5a5a5; border: 1px solid #414141; padding: 0 22px; height: 60px; border-radius: 2px; display: inline-flex; justify-content: center; align-items: center; gap: 15px; line-height: 1; } .login-btn:hover { color: var(--clr-common-white); background: var(--clr-theme-2); border-color: var(--clr-theme-2); } .gamil__sign-btn { font-size: 16px; font-weight: 400; color: #a5a5a5; padding: 0 22px; height: 60px; border-radius: 2px; display: inline-flex; justify-content: center; align-items: center; gap: 15px; line-height: 1; background: #242424; } .d-button { background: transparent; display: inline-flex; justify-content: center; align-items: center; padding: 31.5px 41px; border: 1px solid #D9D9D9; border-radius: 50%; position: relative; overflow: hidden; } .d-button:after { content: ""; border-radius: inherit; background-color: var(--clr-theme-1); position: absolute; top: 0; left: 0; transform: rotate(-180deg); transform-origin: left; transition: 0.4s ease-out; height: 100%; width: 100%; background-color: #14CF93; } .d-button:hover { border-color: #14CF93; } .d-button:hover:after { top: 0; left: 0; transform: rotate(0deg); transition: 0.4s ease-out; } .d-button:hover:after { transition-delay: 0.15s; } .d-button:hover .c-button__text { color: var(--clr-common-white); } .d-button:hover .c-button__arrow { color: var(--clr-common-white); border-color: var(--clr-common-white); } .d-button__border { position: absolute; content: ""; width: inherit; height: inherit; border-radius: inherit; top: 0; left: 0; transition: 0.4s ease-out; border: 1px solid #4F4F4F; } .d-button__text { position: relative; display: block; z-index: 2; font-size: 16px; color: var(--clr-theme-primary); line-height: 25px; transition: 0.4s ease-out; } .features-content .d-button { margin-left: -60px; } @media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 1200px) and (max-width: 1399px) { .features-content .d-button { margin-left: 0px; } } .buttons-wrapper { display: grid; grid-template-columns: repeat(4, 1fr); justify-content: center; place-items: center; gap: 60px 60px; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px) { .buttons-wrapper { grid-template-columns: repeat(2, 1fr); } } @media (max-width:450px), (max-width: 575px) { .buttons-wrapper { grid-template-columns: repeat(1, 1fr); } } .btn_wrapper, #btn_wrapper { position: relative; } .services__btn.is-black a { color: var(--clr-theme-1); } .btn-grid { display: grid; grid-template-columns: auto auto; justify-content: center; gap: 60px 60px; } @media (max-width:450px), (max-width: 575px) { .btn-grid { grid-template-columns: auto; } } /*---------------------------------------- 04. animation css ----------------------------------------*/ @keyframes iconltr { 49% { transform: translateX(30%); } 50% { opacity: 0; transform: translateX(-30%); } 51% { opacity: 1; } } @keyframes iconrtl { 49% { transform: translateX(-30%); } 50% { opacity: 0; transform: translateX(30%); } 51% { opacity: 1; } } @keyframes iconlbtr { 49% { transform: translateX(30%) translateY(-30%); } 50% { opacity: 0; transform: translateX(-30%) translateY(30%); } 51% { opacity: 1; } } @keyframes textup { 49% { transform: translateY(-10px); } 50% { opacity: 0; transform: translateY(10px); } 51% { opacity: 1; } } /* line animation css - start ================================================== */ .line_wrap { top: 0px; inset-inline-start: calc(50% - 875px); bottom: 0px; width: 120px; z-index: 1; display: block; position: absolute; border-left: 1px solid #E8E8E8; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .line_wrap { inset-inline-start: calc(50% - 710px); width: 100px; } } .line_wrap:before { width: 1px; left: -1px; content: ""; height: 100px; position: absolute; animation: scroll1 15s linear infinite; background-image: var(--clr-theme-2); } .line_wrap .line_item { width: 100%; float: left; height: 100%; position: relative; display: inline-block; border-right: 1px solid #E8E8E8; } .line_wrap .line_item:before { width: 1px; right: -1px; content: ""; height: 100px; position: absolute; } .line_wrap .line_item:nth-child(odd):before { animation: scroll2 15s linear infinite; background-image: linear-gradient(0deg, transparent, #000000); } .line_wrap .line_item:nth-child(even):before { animation: scroll1 15s ease-out infinite; background-image: linear-gradient(0deg, #000000, transparent); } .line_wrap.line_white { border-left: 1px solid rgba(255, 255, 255, 0.07); } .line_wrap.line_white:before { background-image: linear-gradient(0deg, #ffffff, transparent); } .line_wrap.line_white .line_item { border-right: 1px solid rgba(255, 255, 255, 0.07); } .line_wrap.line_white .line_item:nth-child(odd):before { background-image: linear-gradient(0deg, transparent, #ffffff); } .line_wrap.line_white .line_item:nth-child(even):before { background-image: linear-gradient(0deg, #ffffff, transparent); } @keyframes scroll1 { 0% { top: 0px; opacity: 1; } 50% { top: 50%; } 100% { top: 100%; opacity: 1; } } @keyframes scroll2 { 0% { opacity: 1; bottom: 0px; } 50% { bottom: 50%; } 100% { bottom: 100%; opacity: 1; } } /* line animation css - end ================================================== */ @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .body-line { display: none; } } .body-line:before { display: none; } .body-line.line_wrap .line_item::before { display: none; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .banner-line { display: none; } } .banner-line.line_wrap { z-index: 2; border-left: 1px solid #2D2D2D; overflow-Y: clip; } .banner-line.line_wrap::before, .banner-line.line_wrap::after { width: auto; left: 1px; content: "\f101"; font-family: flaticon_armado_-_militery_service_themeset !important; height: 10px; background: transparent; background-image: none; background-image: none; position: absolute; animation: scroll1 15s linear infinite; color: var(--clr-theme-2); transform: rotate(90deg); } .banner-line.line_wrap::after { animation-delay: 8s; top: -10px; } .banner-line.line_wrap .line_item { border-right: 1px solid #2D2D2D; } .banner-line.line_wrap .line_item::before, .banner-line.line_wrap .line_item::after { width: auto; right: 1px; content: "\f101"; font-family: flaticon_armado_-_militery_service_themeset !important; height: 10px; background: transparent; background-image: none; position: absolute; animation: scroll2 15s linear infinite; color: var(--clr-theme-2); transform: rotate(-90deg); } .banner-line.line_wrap .line_item::after { animation-delay: 8s; bottom: -10px; } @keyframes rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .border-animation { position: absolute; width: 100%; height: 100%; top: 0; left: 0; } .border-animation::before { content: ""; position: absolute; left: 0; top: 0; width: 0; box-sizing: border-box; height: 0; border-top: 1px solid transparent; border-left: 1px solid transparent; transition: all 0.5s ease; } .border-animation::after { content: ""; position: absolute; right: 0; bottom: 0; width: 0; box-sizing: border-box; height: 0; border-bottom: 1px solid transparent; border-right: 1px solid transparent; transition: all 0.5s ease; } .single-feature:hover .border-animation::after, .single-feature:hover .border-animation::before { border-color: var(--clr-theme-2); width: 100%; height: 100%; } @-webkit-keyframes translateX { 0% { -webkit-transform: translateX(-80px); -moz-transform: translateX(-80px); -ms-transform: translateX(-80px); transform: translateX(-80px); } 100% { -webkit-transform: translateX(40px); -moz-transform: translateX(40px); -ms-transform: translateX(40px); transform: translateX(40px); } } @-moz-keyframes translateX { 0% { -webkit-transform: translateX(-80px); -moz-transform: translateX(-80px); -ms-transform: translateX(-80px); transform: translateX(-80px); } 100% { -webkit-transform: translateX(40px); -moz-transform: translateX(40px); -ms-transform: translateX(40px); transform: translateX(40px); } } @-ms-keyframes translateX { 0% { -webkit-transform: translateX(-80px); -moz-transform: translateX(-80px); -ms-transform: translateX(-80px); transform: translateX(-80px); } 100% { -webkit-transform: translateX(40px); -moz-transform: translateX(40px); -ms-transform: translateX(40px); transform: translateX(40px); } } @keyframes translateX { 0% { -webkit-transform: translateX(-80px); -moz-transform: translateX(-80px); -ms-transform: translateX(-80px); transform: translateX(-80px); } 100% { -webkit-transform: translateX(40px); -moz-transform: translateX(40px); -ms-transform: translateX(40px); transform: translateX(40px); } } @-webkit-keyframes translateY { 0% { -webkit-transform: translateY(-80px); -moz-transform: translateY(-80px); -ms-transform: translateY(-80px); transform: translateY(-80px); } 100% { -webkit-transform: translateY(40px); -moz-transform: translateY(40px); -ms-transform: translateY(40px); transform: translateY(40px); } } @-moz-keyframes translateY { 0% { -webkit-transform: translateY(-80px); -moz-transform: translateY(-80px); -ms-transform: translateY(-80px); transform: translateY(-80px); } 100% { -webkit-transform: translateY(40px); -moz-transform: translateY(40px); -ms-transform: translateY(40px); transform: translateY(40px); } } @-ms-keyframes translateY { 0% { -webkit-transform: translateY(-80px); -moz-transform: translateY(-80px); -ms-transform: translateY(-80px); transform: translateY(-80px); } 100% { -webkit-transform: translateY(40px); -moz-transform: translateY(40px); -ms-transform: translateY(40px); transform: translateY(40px); } } @keyframes translateY { 0% { -webkit-transform: translateY(-80px); -moz-transform: translateY(-80px); -ms-transform: translateY(-80px); transform: translateY(-80px); } 100% { -webkit-transform: translateY(40px); -moz-transform: translateY(40px); -ms-transform: translateY(40px); transform: translateY(40px); } } @-webkit-keyframes translateY { 0% { -webkit-transform: translateY(-40px); -moz-transform: translateY(-40px); -ms-transform: translateY(-40px); transform: translateY(-40px); } 100% { -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); transform: translateY(0px); } } @-moz-keyframes translateY { 0% { -webkit-transform: translateY(-40px); -moz-transform: translateY(-40px); -ms-transform: translateY(-40px); transform: translateY(-40px); } 100% { -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); transform: translateY(0px); } } @-ms-keyframes translateY { 0% { -webkit-transform: translateY(-40px); -moz-transform: translateY(-40px); -ms-transform: translateY(-40px); transform: translateY(-40px); } 100% { -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); transform: translateY(0px); } } @keyframes translateY { 0% { -webkit-transform: translateY(-40px); -moz-transform: translateY(-40px); -ms-transform: translateY(-40px); transform: translateY(-40px); } 100% { -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); transform: translateY(0px); } } @-webkit-keyframes fill-width { 0% { width: 0; } 100% { width: 100%; } } @-moz-keyframes fill-width { 0% { width: 0; } 100% { width: 100%; } } @-ms-keyframes fill-width { 0% { width: 0; } 100% { width: 100%; } } @keyframes fill-width { 0% { width: 0; } 100% { width: 100%; } } .play-svg { width: 160px; } .play-svg:hover .st3 { stroke-dashoffset: 0; } .play-svg .st0 { fill: none; stroke: #FFFFFF; stroke-width: 4; stroke-linecap: round; stroke-miterlimit: 10; } .play-svg .st1 { clip-path: url(#SVGID_2_); } .play-svg .st2 { fill: #FFAF00; } .play-svg .st3 { fill: none; stroke: #FFAF00; stroke-width: 4; stroke-linecap: round; stroke-miterlimit: 10; stroke-dasharray: 300; stroke-dashoffset: 300; transition: 0.5s; } @keyframes dash { from { stroke-dashoffset: 1500; } to { stroke-dashoffset: 0; } } @keyframes panel { 0% { width: 100%; } 100% { width: 0; } } @keyframes panelTop { 0% { height: 100%; } 100% { height: 0; } } @keyframes panelBottom { 0% { height: 100%; } 100% { height: 0; } } @-webkit-keyframes shine { 100% { left: 125%; } } @keyframes shine { 100% { left: 125%; } } .title-anim-part-1, .title-anim-part-2 { position: relative; display: block; width: 100%; height: 120px; overflow: hidden; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .title-anim-part-1, .title-anim-part-2 { height: 90px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .title-anim-part-1, .title-anim-part-2 { height: 80px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .title-anim-part-1, .title-anim-part-2 { height: 60px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .title-anim-part-1, .title-anim-part-2 { height: 52px; } } @media (max-width:450px) { .title-anim-part-1, .title-anim-part-2 { height: 40px; } } .title-anim-part-1 > span { position: absolute; } @media (min-width: 576px) { .title-anim-part-1 > span { transform: translateY(100%); } } .title-anim-part-2 > span { position: absolute; } @media (min-width: 576px) { .title-anim-part-2 > span { transform: translateY(-100%); } } @media (min-width: 576px) { .swiper-slide-active .title-anim-part-1 > span { animation: 0.7s titleAnim 0.5s ease forwards; } } @media (min-width: 576px) { .swiper-slide-active .title-anim-part-2 > span { animation: 0.7s titleAnim 0.7s ease forwards; } } @keyframes titleAnim { 100% { transform: translateY(0%); } } .noise-wrapper { position: absolute; left: 0; top: 0; width: 100%; height: 100%; opacity: 0.1; overflow: hidden; z-index: -1; } .noise { position: absolute; top: -500px; right: -500px; bottom: -500px; left: -500px; background: transparent url(../img/bg/noise.png) 0 0; background-size: 320px 320px; opacity: 0.7; -webkit-animation: noise 1s steps(8, end) infinite both; animation: noise 1s steps(8, end) infinite both; } .noise-2 { position: absolute; top: 0; right: -100px; bottom: -100px; left: -100px; right: -100px; -webkit-animation: noise 1s steps(8, end) infinite both; animation: noise 1s steps(8, end) infinite both; height: 100%; width: 100%; z-index: -1; } @-webkit-keyframes noise { 0% { transform: translateX(0px, 0px); } 10% { transform: translate(-100px, 100px); } 20% { transform: translate(150px, -100px); } 30% { transform: translate(-100px, 100px); } 40% { transform: translate(100px, -150px); } 50% { transform: translate(-100px, 200px); } 60% { transform: translate(-200px, -100px); } 70% { transform: translateY(50px, 100px); } 80% { transform: translate(100px, -150px); } 90% { transform: translate(0px, 200px); } 100% { transform: translate(-100px, 100px); } } @keyframes noise { 0% { transform: translateX(0px, 0px); } 10% { transform: translate(-100px, 100px); } 20% { transform: translate(150px, -100px); } 30% { transform: translate(-100px, 100px); } 40% { transform: translate(100px, -150px); } 50% { transform: translate(-100px, 200px); } 60% { transform: translate(-200px, -100px); } 70% { transform: translateY(50px, 100px); } 80% { transform: translate(100px, -150px); } 90% { transform: translate(0px, 200px); } 100% { transform: translate(-100px, 100px); } } /*====================================== Animate slide-left ========================================*/ @keyframes slide-left { from { -webkit-transform: translateX(0); transform: translateX(0); } to { -webkit-transform: translateX(-100%); transform: translateX(-100%); } } /*====================================== Hero-6 Animation ========================================*/ .slider-active .ax-hero6__title, .slider-active .ax-hero6__sub-title, .slider-active .hero-btn { animation-fill-mode: both; animation-name: fadeInUp; } .slider-active .ax-hero6__title { animation-delay: 0.6s; animation-duration: 0.8s; } .slider-active .ax-hero6__sub-title { animation-delay: 0.8s; animation-duration: 1s; } .slider-active .hero-btn { animation-delay: 0.9s; animation-duration: 1.1s; } /*---------------------------------------- 23. header css ----------------------------------------*/ .header-transparent { position: absolute; inset-inline-start: 0; margin: auto; width: 100%; z-index: 99; } .sticky { position: fixed !important; top: 0; background: var(--clr-common-white); z-index: 800; inset-inline-end: 0; inset-inline-start: 0; width: 100%; -webkit-transition: all 0.4s ease-out 0s; -moz-transition: all 0.4s ease-out 0s; -ms-transition: all 0.4s ease-out 0s; -o-transition: all 0.4s ease-out 0s; transition: all 0.4s ease-out 0s; -webkit-box-shadow: 0px 20px 30px rgba(3, 4, 28, 0.1); -moz-box-shadow: 0px 20px 30px rgba(3, 4, 28, 0.1); box-shadow: 0px 20px 30px rgba(3, 4, 28, 0.1); animation: 500ms ease-in-out 0s normal none 1 running fadeInDown; border: none; } .sticky.header__main { padding: 23px 0; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .sticky.header__main { padding: 10px 0; } } .sticky.header-3-main { top: 0; } .sticky .is-white.main-menu ul li.has-dropdown > .a::after { color: var(--clr-theme-1); } .sticky .is-white.main-menu ul li.a { color: var(--clr-theme-1); } .sticky .meta-item-message-2 .meta-item__text p { font-size: 18px; font-weight: 400; color: var(--clr-theme-primary); margin-bottom: 0; } .sticky .header-2__logo .logo-white { display: none; } .sticky .header-2__logo .logo-dark { display: block; } .header-2__main.sticky { border-bottom: 0; } .header-2__main.sticky .has-black svg { -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; } .header-2__main.sticky .has-black svg * { fill: var(--clr-common-black); -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; } .header-2__main.sticky .has-black svg:hover * { fill: var(--clr-theme-2); } .header__main { position: absolute; top: 0; left: 0; right: 0; padding: 23px 0; z-index: 100; } @media only screen and (min-width: 1400px) and (max-width: 1600px), only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) { .header__main { padding: 20px 0; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .header__main { padding: 10px 0; } } .header__main-content-wrapper { display: flex; justify-content: space-between; align-items: center; } .header__main-right { display: flex; align-items: center; column-gap: 60px; } @media only screen and (min-width: 576px) and (max-width: 767px) { .header__main-right { gap: 0 50px; } } .header__main-right .main-menu { position: absolute; left: 50%; transform: translateX(-50%); margin: 0 -50px; } .header__main .container { max-width: 1790px; } .header__logo { width: 102px; } .header__logo img { width: 100%; } .header-2__logo .logo-dark { display: none; } .header-2__main { position: absolute; top: 0; left: 0; right: 0; z-index: 100; border-bottom: 1px solid #414141; } @media (max-width: 575px) { .header-2__main { padding: 17px 0; } } .header-2__main .container { max-width: 1610px; } .header-2__main-content-wrapper { display: flex; justify-content: space-between; align-items: center; } .header-2__main-right { display: flex; align-items: center; gap: 57px; } @media only screen and (min-width: 1400px) and (max-width: 1600px) { .header-2__main-right { gap: 35px; } } .header-2__main-right .message__now { margin-left: 10px; } .header-2__logo { width: 102px; } .header-2__logo img { width: 100%; } .has-left-header { margin-left: 100px; } @media only screen and (min-width: 1400px) and (max-width: 1600px), only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px), (max-width:450px) { .has-left-header { margin-left: 0; } } .header-4__top { background: var(--clr-common-black); border-bottom: 1px solid #414141; padding: 15px 0; position: relative; z-index: 55; } @media only screen and (min-width: 1601px), only screen and (min-width: 1400px) and (max-width: 1600px), only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) { .header-4__top { display: none; } } .header-4__top .container { max-width: 1840px; } .header-4__top-content-wrapper { display: flex; justify-content: space-between; } .header-4__top-right { display: inline-flex; gap: 20px 75px; align-items: center; } .header-side-innner { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; height: 100%; position: relative; z-index: 9; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .header-side-innner { flex-direction: row; } } .header-side { height: 100%; left: 0; position: fixed; top: 0; z-index: 55; border-right: 1px solid #414141; padding: 40px 18px; background-color: var(--clr-theme-1); } @media only screen and (min-width: 1400px) and (max-width: 1600px), only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) { .header-side { padding: 40px 10px; } } @media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 991px) { .header-side { height: 0; width: 100%; border-bottom: 1px solid #414141; } } .header-support { -ms-writing-mode: tb-rl; writing-mode: vertical-rl; transform: rotate(180deg); display: flex; gap: 25px; align-items: center; filter: brightness(9); } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .header-support { display: none; } } .header-support h4 a { color: var(--clr-common-white); font-size: 20px; font-weight: 700; } .header-support h4 a:hover { color: var(--clr-theme-2); } .header-area-5 { padding: 23px 0; margin: 0 auto; } @media only screen and (min-width: 768px) and (max-width: 991px) { .header-area-5 { padding: 18px 0; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .header-area-5 { padding: 13px 0; } } .header-area-5 .container { max-width: 1600px; } .humbager-menu-text { position: relative; padding-right: 13px; font-size: 22px; font-weight: 700; text-transform: uppercase; } @media (max-width:450px) { .humbager-menu-text { font-size: 18px; } } .humbager-menu-text:after { position: absolute; content: ""; height: 7px; width: 7px; background: #14CF93; border-radius: 50%; top: 50%; right: 0; transform: translateY(-50%); } .humbager-menu-text.mobile-menu-btn:hover { color: var(--clr-theme-2); } .humbager-menu-text.mobile-menu-btn:hover::after { background: #fff; } .hheader-latout-top { position: absolute; animation: 500ms ease-in-out 0s normal none 1 running fadeInDown; top: 0px; left: 0; right: 0; z-index: 100; background: var(--clr-common-white); } .hheader-latout-top .container { max-width: 1640px; } .hheader-latout-top-content-wrapper { position: relative; display: flex; align-items: center; justify-content: space-between; } .hheader-latout-top-content-wrapper .meta-item { display: flex; gap: 20px; align-items: center; } .hheader-latout-top-content-wrapper .meta-item__icon { width: 40px; height: 40px; border: 1px solid #D9D9D9; display: inline-flex; justify-content: center; align-items: center; border-radius: 50%; font-size: 20px; color: #A5A5A5; } .hheader-latout-top-content-wrapper .meta-item__text p { font-size: 16px; font-family: var(--tpl-ff-heading); color: #4F4F4F; margin-bottom: 0; font-weight: 600; } .hheader-latout-top-content-wrapper .meta-item__text p a:hover { color: var(--clr-theme-2); } .ax-header-latout-top { position: absolute; animation: 500ms ease-in-out 0s normal none 1 running fadeInDown; top: 0px; left: 0; right: 0; padding: 0px 0; z-index: 100; background: linear-gradient(89.95deg, #FBC343 0.03%, #F2994A 99.96%); z-index: 99; } .header-main-area { position: absolute; width: 100%; z-index: 100; background-color: var(--clr-common-white); } .header-3-main-content-wrapper.is-black.has-bb { border-bottom: 1px solid #414141; } @media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 992px) and (max-width: 1199px) { .header-3-main-content-wrapper.is-black.has-bb { padding-bottom: 15px; } } .header-main-area.is-black.has-border { padding-bottom: 0; } @media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 992px) and (max-width: 1199px) { .header-main-area { padding: 10px 0; border-bottom: 1px solid #d9d9d9; } .header-main-area.is-black { border-bottom: 0; } } .header-main-area.is-black { background: var(--clr-theme-1); } .header-3-main { position: absolute; top: 60px; left: 0; right: 0; z-index: 100; background: var(--clr-theme-1); } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .header-3-main { padding: 10px 0; } } @media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 991px) { .header-3-main { top: 0; } } .header-3-main .container { max-width: 1640px; } .header-3-main-content-wrapper { display: flex; justify-content: space-between; align-items: center; } @media only screen and (min-width: 1601px), only screen and (min-width: 1400px) and (max-width: 1600px), only screen and (min-width: 1200px) and (max-width: 1399px) { .header-3-main-content-wrapper { border-bottom: 1px solid #d9d9d9; } } @media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 991px) { .header-3-main-content-wrapper { border-bottom: 0; } } .header-3-main-content-wrapper.is-bb-none { border-bottom: 0; } .header-3-main-right { display: flex; align-items: center; gap: 105px; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .header-3-main-right { gap: 80px; } } @media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 992px) and (max-width: 1199px) { .header-3-main-right { gap: 0px; } } .header6__area { position: absolute; top: 90px; left: 0; right: 0; z-index: 100; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .header6__area { top: 25px; } } .sticky.header6__area { top: 0; background-color: #000; } .contact-link { display: flex; align-items: center; gap: 15px; } .contact-link.is-black .contact-link__text p { color: var(--clr-theme-1); } .contact-link.is-black .contact-link__icon span svg * { fill: var(--clr-theme-1); } .contact-link__text p { font-size: 20px; font-weight: 600; font-family: var(--tpl-ff-heading); margin-bottom: 0; color: var(--clr-common-white); } .contact-link__text p a:hover { color: var(--clr-theme-2); } .header-3-main-content-wrapper.is-black { border-bottom: 0; } .meta-item-message { display: flex; gap: 0 10px; align-items: center; } .meta-item-message:hover .meta-item__icon { animation: wobble 0.7s; } .meta-item-message .meta-item__text p { font-size: 18px; font-weight: 400; color: var(--clr-theme-primary); margin-bottom: 0; } .meta-item-message .meta-item2__text p { font-size: 18px; font-weight: 400; color: #f9f9f9; margin-bottom: 0; } .meta-item-message-2 { display: flex; gap: 0 15px; align-items: center; padding: 12px 20px; border-radius: 2px; } .meta-item-message-2 .meta-item__icon { color: var(--clr-theme-2); } .meta-item-message-2 .meta-item__text.is-black p { color: var(--clr-theme-1); } .meta-item-message-2 .meta-item__text p { font-size: 18px; font-weight: 400; color: var(--clr-common-white); margin-bottom: 0; } .menu__bar-2 { position: absolute; transform: translate(-50%, -50%); right: 0; top: 50%; } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px) { .bar-icon-2 { margin-right: -10px; } } .menu-separator-line-2 { width: 1px; background: #414141; position: relative; height: 90px; margin-left: 55px; right: 85px; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .menu-separator-line-2 { margin-left: 60px; right: 72px; } } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) { .menu-separator-line-2 { margin-left: 60px; right: 72px; height: 65px; } } @media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px) { .menu-separator-line-2 { margin-left: 60px; right: 72px; height: 50px; } } .bar-icon-2 { margin-right: -12px; } .bar-icon-2 img { filter: invert(25%) sepia(12%) saturate(5%) hue-rotate(319deg) brightness(113%) contrast(92%); } .bar-3-pl { padding-left: 35px; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .bar-3-pl { padding-left: 0; } } .bar-icon-3 img { filter: invert(100%) sepia(0%) saturate(7458%) hue-rotate(117deg) brightness(100%) contrast(101%); } .sidebar-button { display: flex; flex-direction: column; gap: 7px; cursor: pointer; align-items: flex-end; text-align: right; } .sidebar-button span { display: inline-block; width: 40px; height: 2px; border-radius: 3px; background-color: var(--clr-theme-2); transition: all 0.5s ease; } .sidebar-button span:nth-child(2) { width: 25px; } .sidebar-button span:last-child { width: 30px; } .sidebar-button:hover span:nth-child(2) { width: 40px; } .sidebar-button:hover span:nth-child(3) { width: 40px; } .offcanvas-nav-wrapper { transition: all 0.7s ease-in; position: relative; width: 100%; z-index: 999; } .offcanvas-nav-wrapper::after { content: ""; position: absolute; right: 0; top: 0; width: 100%; height: 100%; background: #f00; z-index: 1; } .offcanvas-nav-wrapper .sidebar-menu-contact { gap: 35px; } .offcanvas-nav-wrapper .sidebar-menu-contact a { width: 45px; text-align: center; } .offcanvas-nav-wrapper .mobile-logo-area .header-logo { max-width: 120px; } .offcanvas-nav-wrapper .main-nav-js { position: fixed; top: 0; left: 0; width: 100%; padding: 30px 5% !important; z-index: 99; height: 100%; overflow-y: auto; box-shadow: 4px 3px 20px rgba(16, 33, 34, 0.06); transition: all 0.7s; display: flex; flex-direction: column; justify-content: flex-start; transform: translateY(-10vh); opacity: 0; visibility: hidden; background-repeat: repeat; background-color: #101010; gap: 30px; scrollbar-width: none; } @media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px) { .offcanvas-nav-wrapper .main-nav-js { min-width: 100%; max-width: 100%; } } .offcanvas-nav-wrapper .main-nav-js::-webkit-scrollbar { display: none; width: 5px; } .offcanvas-nav-wrapper .main-nav-js::before { content: "Explore Pages."; position: absolute; top: 45%; right: 10%; transform: translateY(-50%); display: block; font-size: 200px; font-weight: 700; line-height: 1; color: #ACACAC; opacity: 0.1; z-index: 1; width: 100%; max-width: 1000px; margin-left: auto; margin-right: 0; height: 300px; letter-spacing: 5px; text-align: right; z-index: -1; } @media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 991px) { .offcanvas-nav-wrapper .main-nav-js::before { display: none; visibility: hidden; } } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .offcanvas-nav-wrapper .main-nav-js::before { font-size: 200px; } } .offcanvas-nav-wrapper .main-nav-js::-webkit-scrollbar-track { background: #f1f1f1; } .offcanvas-nav-wrapper .main-nav-js::-webkit-scrollbar-thumb { background: #999; } .offcanvas-nav-wrapper .main-nav-js::-webkit-scrollbar-thumb:hover { background: var(--border-color); } .offcanvas-nav-wrapper .main-nav-js .menu-close-btn { opacity: 1; cursor: pointer; padding: 5px; opacity: 0.8; font-size: 40px; } @media (max-width:450px) { .offcanvas-nav-wrapper .main-nav-js .menu-close-btn { font-size: 30px; } } .offcanvas-nav-wrapper .main-nav-js .menu-close-btn i { color: #fff; } .offcanvas-nav-wrapper .main-nav-js .menu-close-btn:hover i { color: var(--clr-theme-2); } .offcanvas-nav-wrapper .main-nav-js .sidebar-menu-area > ul { float: none; text-align: left; padding: 50px 0; margin-bottom: 0; width: 100%; max-width: 550px; margin-left: 0; margin-right: auto; z-index: 3; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .offcanvas-nav-wrapper .main-nav-js .sidebar-menu-area > ul { padding: 45px 0 35px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .offcanvas-nav-wrapper .main-nav-js .sidebar-menu-area > ul { max-width: 100%; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .offcanvas-nav-wrapper .main-nav-js .sidebar-menu-area > ul { max-width: 100%; padding: 40px 0 30px; } } @media (max-width: 575px) { .offcanvas-nav-wrapper .main-nav-js .sidebar-menu-area > ul { padding: 40px 0 30px; } } .offcanvas-nav-wrapper .main-nav-js .sidebar-menu-area > ul > li { display: block; position: relative; padding: 5px; transition: all 0.2s; transform: translateY(50px) scaleY(0); opacity: 0; margin-bottom: 5px; } .offcanvas-nav-wrapper .main-nav-js .sidebar-menu-area > ul > li:last-child { border-bottom: 1px solid transparent; margin-bottom: 0; } .offcanvas-nav-wrapper .main-nav-js .sidebar-menu-area > ul > li:hover a:before { width: 0%; } .offcanvas-nav-wrapper .main-nav-js .sidebar-menu-area > ul > li > .bi { position: absolute; right: 10px; top: 15px; font-size: 36px; cursor: pointer; color: #ACACAC; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .offcanvas-nav-wrapper .main-nav-js .sidebar-menu-area > ul > li > .bi { font-size: 30px; top: 8px; right: 5px; } } @media (max-width:450px) { .offcanvas-nav-wrapper .main-nav-js .sidebar-menu-area > ul > li > .bi { font-size: 22px; } } .offcanvas-nav-wrapper .main-nav-js .sidebar-menu-area > ul > li a { padding: 4px 0; display: inline-block; font-size: 3.5rem; font-weight: 500; color: var(--clr-common-white); transition: all 0.6s ease; font-style: normal; text-decoration: none; transition: all 0.55s ease; position: relative; text-transform: uppercase; font-family: var(--tpl-ff-heading); line-height: 1; width: 100% !important; } @media only screen and (min-width: 768px) and (max-width: 991px) { .offcanvas-nav-wrapper .main-nav-js .sidebar-menu-area > ul > li a { font-size: 3rem; } } @media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px) { .offcanvas-nav-wrapper .main-nav-js .sidebar-menu-area > ul > li a { font-size: 2rem; } } .offcanvas-nav-wrapper .main-nav-js .sidebar-menu-area > ul > li a:hover { color: var(--clr-common-white); } .offcanvas-nav-wrapper .main-nav-js .sidebar-menu-area > ul > li a::before { overflow: hidden; position: absolute; top: 4px; left: 0; width: 0; color: var(--clr-common-white); white-space: nowrap; content: attr(data-hover); transition: all 0.8s cubic-bezier(0.17, 0.67, 0.32, 0.87); } .offcanvas-nav-wrapper .main-nav-js .sidebar-menu-area > ul > li ul.sub-menu { position: static; min-width: 180px; background: 0 0; border: none; opacity: 1; visibility: visible; box-shadow: none; transform: none; transition: none; display: none; list-style: none; padding-left: 20px; margin-top: 25px; margin-bottom: 25px; margin-right: 55px; } @media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px) { .offcanvas-nav-wrapper .main-nav-js .sidebar-menu-area > ul > li ul.sub-menu { margin-top: 5px; } } .offcanvas-nav-wrapper .main-nav-js .sidebar-menu-area > ul > li ul.sub-menu li { opacity: 1; } .offcanvas-nav-wrapper .main-nav-js .sidebar-menu-area > ul > li ul.sub-menu li a { font-size: 22px; font-weight: 400; padding: 15px 5px; font-style: normal; text-transform: capitalize; -webkit-text-stroke: unset; -webkit-text-fill-color: unset; color: #f2f2f2; } @media (max-width:450px) { .offcanvas-nav-wrapper .main-nav-js .sidebar-menu-area > ul > li ul.sub-menu li a { font-size: 16px; padding: 10px 5px; } } .offcanvas-nav-wrapper .main-nav-js .sidebar-menu-area > ul > li ul.sub-menu li a:hover { color: var(--clr-theme-2); padding-inline-start: 15px; } .offcanvas-nav-wrapper .main-nav-js .sidebar-menu-area > ul > li ul.sub-menu li a:hover::before { width: 15px; } .offcanvas-nav-wrapper .main-nav-js .sidebar-menu-area > ul > li ul.sub-menu li .sub-menu { margin-top: 0px; } .offcanvas-nav-wrapper .main-nav-js .sidebar-menu-area > ul > li ul.sub-menu li .sub-menu li a { font-size: 24px; } .offcanvas-nav-wrapper .main-nav-js.show-menu { transform: none; opacity: 1; visibility: visible; } .offcanvas-nav-wrapper .main-nav-js .sub-menu li { position: relative; } .offcanvas-nav-wrapper .main-nav-js .sub-menu li .bi { font-size: 22px; cursor: pointer; color: #ACACAC; position: absolute; top: 15px; } .offcanvas-nav-wrapper .uesr-aera { width: 70px; height: 70px; line-height: 72px; border-radius: 50%; text-align: center; background: var(--primary-color2); display: inline-block; margin-left: auto; margin-right: auto; } .offcanvas-nav-wrapper .uesr-aera .bi { font-size: 35px; color: var(--text-primary); } .offcanvas-nav-wrapper .mobile-menu { position: relative; top: 2px; padding: 0 5px; border-radius: 50%; display: inline-block; } .main-page-wrapper { width: 100%; display: flex; flex-direction: row; justify-content: flex-end; position: relative; } .main-page-wrapper .left-fixed-image { width: 700px; position: fixed; top: 0; left: 0; max-height: 100vh; height: 100%; } @media only screen and (min-width: 1400px) and (max-width: 1600px) { .main-page-wrapper .left-fixed-image { width: 550px; } } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .main-page-wrapper .left-fixed-image { width: 400px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .main-page-wrapper .left-fixed-image { width: 300px; } } @media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 991px) { .main-page-wrapper .left-fixed-image { display: none; visibility: none; } } .main-page-wrapper .left-fixed-image img { width: 100%; -o-object-fit: cover; object-fit: cover; height: 100% !important; } @-webkit-keyframes navLinkFade { from { opacity: 0; transform: translateY(50px) scaleY(0); } to { opacity: 1; transform: translateY(0) scaleY(1); } } @keyframes navLinkFade { from { opacity: 0; transform: translateY(50px) scaleY(0); } to { opacity: 1; transform: translateY(0) scaleY(1); } } .offcanvas-nav-wrapper .main-nav-js .sidebar-menu-area > ul > li ul.sub-menu li a::before { position: absolute; content: ""; width: 0px; height: 2px; background-color: var(--clr-theme-2); left: -17px; top: 50%; transform: translateY(-50%); } .mobile-menu-btn svg { -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; } .mobile-menu-btn svg * { fill: var(--clr-common-white); -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; } .mobile-menu-btn svg:hover * { fill: var(--clr-theme-2); } .mobile-menu-btn.is-black svg { -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; } .mobile-menu-btn.is-black svg * { fill: var(--clr-common-black); -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; } .mobile-menu-btn.is-black svg:hover * { fill: var(--clr-theme-2); } .sidebar-social { margin-top: auto; } .marquee__area { background: #FFC444; position: relative; overflow: hidden; } .marquee__wrapper { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-flex: 0; -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; animation: slide-left 30s linear infinite; } .marquee__wrapper:hover { animation-play-state: paused; } .sliding__text { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; padding: 9px 0; -webkit-box-flex: 0; -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; position: relative; } .marquee__item { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-box-flex: 0; -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; } .marquee__text-title { font-size: 32px; color: #222222; line-height: 1; text-transform: uppercase; } .marquee__text-title.text-stroke { color: transparent; -webkit-text-stroke: 1px #222222; } .marquee__text-icon { margin-right: -5px; margin-left: 20px; } .marquee__text-icon img { width: 60%; height: auto; } /*---------------------------------------- 28. main-menu css ----------------------------------------*/ @media only screen and (min-width: 992px) and (max-width: 1199px) { .main-menu { padding-left: 30px; } [dir=rtl] .main-menu { padding-left: 0; padding-right: 30px; } } .main-menu ul li { position: relative; list-style: none; display: inline-block; margin-right: 34px; /* submenu css start */ /* mega menu start */ } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .main-menu ul li { margin-right: 20px; } } [dir=rtl] .main-menu ul li { margin-right: 0; margin-left: 34px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .main-menu ul li { margin-right: 25px; } [dir=rtl] .main-menu ul li { margin-left: 25px; margin-right: 0; } } .main-menu ul li:last-child { margin-right: 0; } [dir=rtl] .main-menu ul li:last-child { margin-left: 0; } .main-menu ul li a { display: inline-block; font-size: 16px; font-weight: 500; color: var(--clr-theme-1); padding: 30px 0; text-align: left; font-family: var(--tpl-ff-heading); } [dir=rtl] .main-menu ul li a { text-align: right; } .main-menu ul li.has-dropdown > a { position: relative; } .main-menu ul li.has-dropdown > a::after { content: "\f107"; -webkit-transform: translateY(1px); -moz-transform: translateY(1px); -ms-transform: translateY(1px); transform: translateY(1px); font-size: 14px; color: var(--clr-theme-1); font-family: var(--tpl-ff-fontawesome); font-weight: 400; margin-left: 5px; display: inline-block; -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; } .main-menu ul li.has-mega-menu { position: static; } .main-menu ul li .submenu { position: absolute; top: 100%; left: 0px; min-width: 260px; background: var(--clr-common-white); z-index: 99; visibility: hidden; opacity: 0; transform-origin: top center; padding: 35px 0 14px; background: #111; -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; -webkit-box-shadow: 0px 20px 30px rgba(3, 4, 28, 0.1); -moz-box-shadow: 0px 20px 30px rgba(3, 4, 28, 0.1); box-shadow: 0px 20px 30px rgba(3, 4, 28, 0.1); border-top: 1px solid var(--clr-theme-2); } [dir=rtl] .main-menu ul li .submenu { left: auto; right: 0; } .main-menu ul li .submenu li { display: block; width: 100%; margin: 0; padding: 0; -webkit-transform: translateY(-10px); -moz-transform: translateY(-10px); -ms-transform: translateY(-10px); transform: translateY(-10px); } .main-menu ul li .submenu li.has-dropdown > a::after { position: absolute; top: 50%; right: 25px; -webkit-transform: translateY(-50%) rotate(-90deg); -moz-transform: translateY(-50%) rotate(-90deg); -ms-transform: translateY(-50%) rotate(-90deg); transform: translateY(-50%) rotate(-90deg); color: var(--clr-theme-1); } [dir=rtl] .main-menu ul li .submenu li.has-dropdown > a::after { right: auto; left: 25px; } .main-menu ul li .submenu li a { position: relative; z-index: 11; color: #fff; font-weight: 500; font-size: 15px; padding: 0 17px; padding-bottom: 0px; padding-left: 35px; padding-bottom: 5px; width: 100%; } .main-menu ul li .submenu li a::before { position: absolute; content: ""; left: 25px; top: 46%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); width: 0; height: 1px; background-color: var(--clr-theme-2); -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; } [dir=rtl] .main-menu ul li .submenu li a::before { left: auto; right: 25px; } .main-menu ul li .submenu li .submenu { left: 100%; top: 0; visibility: hidden; opacity: 0; } [dir=rtl] .main-menu ul li .submenu li .submenu { left: auto; right: 100%; } .main-menu ul li .submenu li:hover > a { color: var(--clr-theme-2); padding-left: 43px; } [dir=rtl] .main-menu ul li .submenu li:hover > a { padding-left: 0; padding-right: 43px; } .main-menu ul li .submenu li:hover > a::before { width: 12px; } .main-menu ul li .submenu li:hover > a::after { color: var(--clr-theme-1); } .main-menu ul li .submenu li:hover > .submenu { -webkit-transform: translateY(1); -moz-transform: translateY(1); -ms-transform: translateY(1); transform: translateY(1); visibility: visible; opacity: 1; } .main-menu ul li .mega-menu { position: absolute; top: 100%; left: 50%; padding: 40px 40px; background: var(--clr-theme-1); box-shadow: 0px 20px 30px rgba(3, 4, 28, 0.1); visibility: hidden; opacity: 0; -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; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); z-index: 99; width: 1400px; margin: 0 auto; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .main-menu ul li .mega-menu { max-width: 1200px; } } .main-menu ul li .mega-menu li { float: left; width: 25%; margin-right: 0; text-align: left; } [dir=rtl] .main-menu ul li .mega-menu li { float: right; margin-left: 0; text-align: right; } .main-menu ul li .mega-menu li .mega-menu-title { font-weight: 700; font-size: 14px; letter-spacing: 0.07em; text-transform: uppercase; color: var(--clr-common-white); cursor: text; padding: 0; padding-left: 0px; display: inline-block; margin-bottom: 10px; } .main-menu ul li .mega-menu li .mega-menu-title::before { display: none; } .main-menu ul li .mega-menu li ul { margin-left: 10px; } .main-menu ul li .mega-menu li ul li { width: 100%; float: none; margin-bottom: 5px; } .main-menu ul li .mega-menu li ul li:last-child { margin-bottom: 0; } .main-menu ul li .mega-menu li ul li a { font-weight: 400; font-size: 16px; color: var(--clr-common-white); padding: 0; padding-left: 0px; position: relative; } .main-menu ul li .mega-menu li ul li a::before { position: absolute; content: ""; left: 0; right: auto; top: 50%; bottom: auto; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); width: 0; height: 1px; background-color: var(--clr-theme-2); -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; } [dir=rtl] .main-menu ul li .mega-menu li ul li a::before { right: 0; left: auto; } .main-menu ul li .mega-menu li:hover > .mega-menu-title { color: var(--clr-theme-2); padding-left: 0; } [dir=rtl] .main-menu ul li .mega-menu li:hover > .mega-menu-title { padding-right: 0; } .main-menu ul li .mega-menu li:hover > a { color: var(--clr-theme-2); padding-left: 18px; } [dir=rtl] .main-menu ul li .mega-menu li:hover > a { padding-left: 0; padding-right: 18px; } .main-menu ul li .mega-menu li:hover > a::before { width: 12px; } .main-menu ul li:hover > a { color: var(--clr-theme-2); } .main-menu ul li:hover > a::after { color: var(--clr-theme-2); } .main-menu ul li:hover > .submenu { visibility: visible; opacity: 1; } .main-menu ul li:hover .mega-menu { visibility: visible; opacity: 1; } .main-menu.is-white ul li a { color: var(--clr-common-white); color: var(--clr-common-white); } .main-menu.is-white ul li:hover > a { color: var(--clr-theme-2); } .main-menu.is-white ul li:hover > a::after { color: var(--clr-theme-2); } .main-menu.is-white ul li.has-dropdown > a::after { color: var(--clr-common-white); } .main-menu.is-white ul li.has-dropdown:hover > a::after { color: var(--clr-theme-2); } .header-2__main.sticky .is-white.main-menu ul li a { color: var(--clr-common-black); } .header-2__main.sticky .is-white.main-menu ul li a::after { color: var(--clr-common-black); } .header-2__main.sticky .is-white.main-menu ul li .submenu li a { color: var(--clr-common-white); } /*---------------------------------------- 07. banner css ----------------------------------------*/ .banner-800 { min-height: 800px; } .banner-900 { min-height: 900px; position: relative; } .banner-970 { min-height: 970px; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .banner-970 { min-height: 850px; } } .banner-1080 { min-height: 1080px; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .banner-1080 { min-height: 900px; } } .single-banner { z-index: 5; position: relative; width: 100%; } .banner-bg { position: absolute; width: 100%; height: 100%; inset-inline-start: 0; top: 0; background-size: cover; background-repeat: no-repeat; background-position: center center; z-index: -1; background-color: var(--clr-common-white); transform: scale(1); -webkit-transition: all 8s linear 0s; -moz-transition: all 8s linear 0s; -o-transition: all 8s linear 0s; transition: all 8s linear 0s; } .swiper-slide-active .banner-bg { -webkit-transform: scale(1.12); -moz-transform: scale(1.12); transform: scale(1.12); } .banner-title { font-size: 120px; text-transform: uppercase; color: var(--clr-common-white); line-height: 1; letter-spacing: 3px; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .banner-title { font-size: 90px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .banner-title { font-size: 80px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .banner-title { font-size: 60px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .banner-title { font-size: 52px; } } @media (max-width:450px) { .banner-title { font-size: 40px; } } .banner-title .marked-text { color: var(--clr-theme-2); } @media (max-width: 575px) { .banner-title br { display: none; } } .banner-btn { display: flex; align-items: center; gap: 20px 40px; flex-wrap: wrap; } .banner-content1 .banner-meta-text span { color: var(--clr-common-white); font-size: 22px; font-weight: 500; margin-bottom: 25px; display: inline-block; } @media only screen and (min-width: 1200px) and (max-width: 1399px), (max-width: 575px) { .banner-content1 .banner-meta-text span { font-size: 20px; } } .banner-content1 .banner-meta-text { opacity: 0; transform: translateY(-80px); transition: all 1000ms ease; } @media (max-width: 575px) { .banner-content1 .banner-title { opacity: 0; transform: translateX(80px); transition: all 1000ms ease; } } .banner-content1 .banner-btn { opacity: 0; transform: translateY(80px); transition: all 1000ms ease; } .swiper-slide-active .banner-content1 .banner-meta-text { transform: translateY(0); transition-delay: 1500ms; opacity: 1; } @media (max-width: 575px) { .swiper-slide-active .banner-content1 .banner-title { opacity: 1; transform: translateX(0px); transition-delay: 1000ms; } } .swiper-slide-active .banner-content1 .banner-btn { opacity: 1; transform: translateY(0px); transition-delay: 1700ms; } .slider1-pagination.slider-pagination { position: absolute; inset-inline-end: 13%; top: 50%; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .slider1-pagination.slider-pagination { display: none; } } .slider-pagination { position: absolute; inset-inline-end: 13%; top: 50%; display: inline-flex; flex-direction: column; inset-inline-start: auto; width: inherit; z-index: 10; transform: translateY(-50%); justify-content: center; gap: 27px; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .slider-pagination { display: none; } } .slider-pagination:before { position: absolute; content: ""; width: 1px; height: 128px; background: var(--clr-common-white); top: -20px; inset-inline-start: 9px; transform: translateY(-100%); } .slider-pagination:after { position: absolute; content: ""; width: 4px; height: 4px; background: var(--clr-theme-2); border-radius: 50%; bottom: -45px; inset-inline-start: 8px; } .slider-pagination .swiper-pagination-bullet { width: 0; height: 0; opacity: 1; } .slider-pagination .swiper-pagination-bullet button { font-size: 14px; font-weight: 600; color: var(--clr-common-white); } .slider-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active button { color: var(--clr-theme-2); transform: scale(1.3); } .single-banner-2 { overflow-x: clip; background: var(--clr-common-white); } .banner-bg2 { background: var(--clr-bg-3); } .banner-content2 { text-align: center; position: relative; padding-top: 230px; } .banner-content2 .banner-meta-text { font-size: 30px; font-weight: 700; color: var(--clr-common-white); line-height: 24px; margin-bottom: 44px; text-transform: uppercase; letter-spacing: 0.21em; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .banner-content2 .banner-meta-text { font-size: 26px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .banner-content2 .banner-meta-text { font-size: 24px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .banner-content2 .banner-meta-text { font-size: 22px; } } @media (max-width:450px) { .banner-content2 .banner-meta-text { font-size: 20px; } } .banner-content2 .banner-title { font-size: 214px; font-weight: 700; color: var(--clr-theme-2); line-height: 0.82; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .banner-content2 .banner-title { font-size: 200px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .banner-content2 .banner-title { font-size: 160px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .banner-content2 .banner-title { font-size: 120px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .banner-content2 .banner-title { font-size: 80px; } } @media (max-width:450px) { .banner-content2 .banner-title { font-size: 50px; } } .banner-protec-shapes { position: absolute; width: 100%; height: 100%; top: 0; inset-inline-start: 0; } .banner-protec-shape-main { width: 450px; height: 848px; display: inline-block; background: var(--clr-theme-1); position: absolute; top: 0; inset-inline-start: 0; inset-inline-end: 0; margin: auto; border-radius: 0 0 450px 450px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .banner-protec-shape-main { width: 400px; height: 790px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .banner-protec-shape-main { width: 370px; height: 770px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .banner-protec-shape-main { width: 800px; left: 50%; transform: translateX(-50%); height: 900px; border-radius: 0; } } .banner-protec-shape-main-overlay { position: absolute; width: 100%; height: 100%; top: 0; inset-inline-start: 0; opacity: 0.2; border-radius: 0 0 500px 500px; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .banner-protec-shape-main-overlay { left: 50%; transform: translateX(-50%); border-radius: 0; } } .banner-protec-img-1 { width: 91%; height: 78%; position: absolute; inset-inline-start: calc(100% + 43px); bottom: -77px; border-radius: 500px; } .banner-protec-img-2 { width: 74%; height: 534px; inset-inline-start: calc(100% + 496px); bottom: -164px; position: absolute; border-radius: 500px; } .banner-protec-img-3 { position: absolute; width: 92%; bottom: 27px; margin: 0 auto; inset-inline-start: 0; inset-inline-end: 0; border-radius: 0 0 500px 500px; z-index: 2; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .banner-protec-img-3 { width: 56%; } } .banner-protec-shape-1 { width: 268px; position: absolute; inset-inline-start: -13%; top: 67%; animation: translateY 10s linear infinite alternate; } @media only screen and (min-width: 768px) and (max-width: 991px) { .banner-protec-shape-1 { width: 168px; top: 93%; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .banner-protec-shape-1 { width: 138px; top: 93%; } } .banner-protec-shape-2 { width: 82px; position: absolute; top: 51%; inset-inline-start: 104%; } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .banner-protec-shape-2 { display: none; } } .banner-protec-shape-3 { width: 68px; position: absolute; inset-inline-start: 92%; top: 192%; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .banner-protec-shape-3 { inset-inline-start: 67%; top: 143%; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .banner-protec-shape-3 { inset-inline-start: 68%; top: 166%; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .banner-protec-shape-3 { inset-inline-start: 69%; top: 161%; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .banner-protec-shape-3 { display: none; } } .banner-protec-video-btn { position: absolute; inset-inline-start: 0%; top: 140%; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .banner-protec-video-btn { display: none; } } .banner-protec-video-btn .play-btn { width: 134px; height: 134px; background-color: #FFECBF; color: var(--clr-theme-2); font-size: 36px; background-size: cover; background-position: center center; position: relative; z-index: 2; overflow: hidden; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) { .banner-protec-video-btn .play-btn { width: 90px; height: 90px; font-size: 26px; } } .banner-protec-video-btn .play-btn:hover { color: var(--clr-common-white); background-color: var(--clr-theme-2); } .banner-protec-video-btn .play-btn:before { position: absolute; content: ""; width: 100%; height: 100%; background: var(--clr-theme-1); opacity: 0.3; z-index: -1; } .banner-protec-video-btn .play-btn-text { position: absolute; left: 50%; top: 50%; border-radius: 50%; z-index: -1; width: 190px; margin: -95px -95px; -webkit-animation: rotate 20s linear infinite; -moz-animation: rotate 20s linear infinite; -ms-animation: rotate 20s linear infinite; -o-animation: rotate 20s linear infinite; animation: rotate 20s linear infinite; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .banner-protec-video-btn .play-btn-text { margin: -65px -65px; width: 130px; } } .banner-bg3::before { position: absolute; content: ""; width: 100%; height: 100%; top: 0; inset-inline-start: 0; background: linear-gradient(104.12deg, rgba(0, 0, 0, 0.03) 0.68%, #000000 100%); } .banner-3-shape-a-1 { width: 102px; position: absolute; top: 14%; inset-inline-start: calc(50% - 850px); animation: rotate 10s linear infinite; } .banner-3-shape-a-2 { width: 74px; position: absolute; top: 81%; inset-inline-start: calc(50% + 770px); animation: rotate 10s linear infinite; } .banner-3-shape-a-3 { width: 35px; position: absolute; inset-inline-start: 71.5%; top: 9%; display: none; } .banner-3-shape-a-4 { position: absolute; width: 90px; opacity: 0.3; top: 79%; inset-inline-start: calc(50% - 770px); } .banner-content3 { padding-top: 110px; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .banner-content3 .banner-title { font-size: 45px; } } @media (max-width:450px) { .banner-content3 .banner-title { font-size: 36px; } } .banner-content3 .banner-meta-text { font-size: 80px; font-weight: 700; color: var(--clr-common-white); text-transform: uppercase; font-family: "Teko", sans-serif; display: inline-flex; line-height: 1; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .banner-content3 .banner-meta-text { font-size: 70px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .banner-content3 .banner-meta-text { font-size: 60px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .banner-content3 .banner-meta-text { font-size: 50px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .banner-content3 .banner-meta-text { font-size: 45px; } } @media (max-width:450px) { .banner-content3 .banner-meta-text { font-size: 36px; } } .banner-content3 .fill-btn { background: var(--clr-common-white); border-color: var(--clr-common-white); border-radius: 50px; color: var(--clr-theme-1); padding: 0 30px; } .banner-content3 .fill-btn:hover, .banner-content3 .fill-btn:focus { background: var(--clr-theme-2); color: var(--clr-theme-1); border-color: var(--clr-theme-2); } .banner-content3 .border-btn { background: transparent; border-color: var(--clr-common-white); border-radius: 50px; color: var(--clr-common-white); padding: 0 30px; } .banner-content3 .border-btn:hover, .banner-content3 .border-btn:focus { background: var(--clr-theme-2); color: var(--clr-theme-1); border-color: var(--clr-theme-2); } .banner-content3 p { font-size: 22px; font-weight: 500; color: var(--clr-common-white); text-transform: uppercase; margin-bottom: 40px; } @media (max-width:450px) { .banner-content3 p { font-size: 18px; } } .banner-content3 p { opacity: 0; transform: translateY(-80px); transition: all 1000ms ease; } .banner-content3 .banner-title { opacity: 0; transform: translateX(80px); transition: all 1000ms ease; } .banner-content3 .banner-meta-text { opacity: 0; transform: translateX(-80px); transition: all 1000ms ease; } .banner-content3 .banner-btn { opacity: 0; transform: translateY(80px); transition: all 1000ms ease; } .swiper-slide-active .banner-content3 p { transform: translateY(0); transition-delay: 1000ms; opacity: 1; } .swiper-slide-active .banner-content3 .banner-title { opacity: 1; transform: translateX(0px); transition-delay: 1000ms; } .swiper-slide-active .banner-content3 .banner-meta-text { opacity: 1; transform: translateX(0px); transition-delay: 1000ms; } .swiper-slide-active .banner-content3 .banner-btn { opacity: 1; transform: translateY(0px); transition-delay: 1000ms; } .single-banner-3 .armado-shape { position: absolute; left: 50%; top: 33%; transform: translate(-50%, -50%); z-index: -1; transform-origin: 100% 50%; inset-inline-end: auto; } .single-banner-3 .armado-shape .stroke-text { -webkit-text-stroke-color: var(--clr-common-white); opacity: 0.15; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .single-banner-3 .armado-shape .stroke-text { font-size: 200px; } } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) { .single-banner-3 .armado-shape .stroke-text { font-size: 150px; } } .single-banner-3 .video-wrapper { position: absolute; width: 100%; height: 100%; top: 0; inset-inline-start: 0; } .single-banner-3 .video-wrapper:before { position: absolute; content: ""; width: 100%; height: 100%; top: 0; inset-inline-start: 0; background: linear-gradient(104.12deg, rgba(0, 0, 0, 0.03) 0.68%, #000000 100%); } .single-banner-3 .video-wrapper video { position: absolute; width: 100%; height: 100%; object-fit: cover; z-index: -1; } .bannner-3-social.social-links { position: absolute; padding: 5px 5px; background: var(--clr-common-white); border-radius: 60px; top: 50%; transform: translateY(-50%); inset-inline-start: 75px; z-index: 1; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .bannner-3-social.social-links { display: none; } } .bannner-3-social.social-links ul { flex-direction: column; gap: 10px; } .bannner-3-social.social-links ul li a { width: 30px; height: 30px; background: var(--clr-common-white); border-radius: 50%; } .slider-3-pagination.slider-pagination { position: absolute; inset-inline-end: 90px; top: 50%; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .slider-3-pagination.slider-pagination { display: none; } } /*---------------------------------------- 06. Background css ----------------------------------------*/ /*---------------------------------------- BACKGROUND COLOR CSS START ----------------------------------------*/ /*--- Background color -----------------------------------------*/ .white-bg { background-color: var(--clr-common-white); } .black-bg { background: var(--clr-common-black); } .dark-bg { background-color: var(--clr-common-heading); } .grey-bg { background-color: var(--clr-bg-gray-1); } .footer-bg { background-color: var(--clr-bg-footer); } .primary-bg { background: var(--clr-background-primary); } .alice-blue-bg { background: var(--clr-bg-6); } /*---------------------------------------- 17. cursor css ----------------------------------------*/ body { cursor: inherit; } .cursor-outer { margin-left: -12px; margin-top: -12px; width: 25px; height: 25px; border: 1px solid var(--clr-theme-2); box-sizing: border-box; z-index: 10000000; opacity: 0.5; transition: all 0.08s ease-out; } .cursor-outer.cursor-hover { opacity: 0; } .cursor-outer.cursor-big { opacity: 0; } @media (max-width:450px), (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px) { .cursor-outer { display: none; } } .mouseCursor { position: fixed; top: 0; left: 0; right: 0; bottom: 0; pointer-events: none; border-radius: 50%; transform: translateZ(0); visibility: hidden; text-align: center; } @media (hover: none) { .mouseCursor { display: none; } } [dir=rtl] .mouseCursor { left: 0; right: auto; } .mouseCursor.cursor-big { width: 60px; height: 60px; margin-left: -30px; margin-top: -30px; } .cursor-inner { margin-left: -3px; margin-top: -3px; width: 8px; height: 8px; z-index: 10000001; background-color: var(--clr-theme-2); opacity: 0.8; 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(--clr-common-white); line-height: 60px; opacity: 0; text-transform: uppercase; letter-spacing: 1px; font-size: 12px; } .cursor-inner.cursor-big span { opacity: 1; } .cursor-inner.cursor-hover { margin-left: -12px; margin-top: -12px; width: 25px; height: 25px; background-color: var(--clr-theme-2); opacity: 0; } @media (max-width:450px), (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px) { .cursor-inner { display: none; } } /*---------------------------------------- 24. hero css ----------------------------------------*/ .hero-area { min-height: 930px; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .hero-area { min-height: auto; } } .hero-area__bg { position: absolute; width: 100%; height: 100%; top: 0; left: 0; } .hero-area__bg:after { position: absolute; content: ""; width: 100%; height: 100%; top: 0; left: 0; background: linear-gradient(105.54deg, #FFFFFF 34.13%, rgba(255, 255, 255, 0) 100%); } .hero-area__bg img { width: 100%; height: 100%; object-fit: cover; } .hero-area .container { max-width: 1790px; } .hero-area .meta-item-call { display: flex; align-items: center; gap: 25px; writing-mode: vertical-rl; position: absolute; left: 15px; top: 50%; transform: translateY(-50%); } @media screen and (min-width: 1790px) { .hero-area .meta-item-call { left: 80px; } } .hero-area .meta-item-call .meta-item__icon { line-height: 1; } .hero-area .meta-item-call p { font-size: 20px; font-weight: 700; font-family: "Archivo", sans-serif; } .hero-area .meta-item-call p a:hover { color: var(--clr-theme-2); } .hero-area .scroll-btn span { position: absolute; bottom: 150px; left: 23px; } @media screen and (min-width: 1790px) { .hero-area .scroll-btn span { left: 88px; } } .scroll-btn span { font-size: 14px; font-weight: 400; color: #A5A5A5; writing-mode: vertical-rl; letter-spacing: 7px; font-family: "Archivo", sans-serif; position: relative; line-height: 1; } .scroll-btn span::before { position: absolute; content: "\f107"; font-family: var(--tpl-ff-fontawesome); color: #A5A5A5; left: 55%; transform: translateX(-50%); top: calc(100% + 120px); } .scroll-btn span:after { position: absolute; content: ""; width: 1px; height: 115px; background: #A5A5A5; left: 55%; transform: translateX(-50%); top: calc(100% + 15px); } .hero-inner { margin-left: 100px; } @media screen and (min-width: 1790px) { .hero-inner { margin-left: 175px; margin-right: 125px; } } @media (min-width: 1600px) and (max-width: 1789px) { .hero-inner { margin-left: 100px; margin-right: 75px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .hero-inner { margin-left: 70px; } } @media (max-width: 575px) { .hero-inner { margin-left: 0; } } .hero__title { margin-bottom: 0; } .hero__title .regular-text { font-weight: 400; font-family: "Tenor Sans", sans-serif; } .hero__text { max-width: 424px; position: absolute; right: 0; top: 120px; margin-bottom: 0; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .hero__text { top: 60px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .hero__text { max-width: 326px; top: 20px; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .hero__text { position: static; margin-top: 30px; } } .hero__btn { position: absolute; right: 0; bottom: 30px; transform: rotate(-45deg); } @media only screen and (min-width: 1400px) and (max-width: 1600px), only screen and (min-width: 1200px) and (max-width: 1399px) { .hero__btn { bottom: 0px; transform: rotate(-45deg) scale(0.8); } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .hero__btn { bottom: 60px; transform: rotate(-45deg) scale(0.5); transform-origin: right bottom; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .hero__btn { position: static; transform: scale(0.7); margin-top: 60px; transform-origin: top left; } } .hero__btn .circle-btn { width: 160px; height: 160px; } .hero__btn .circle-btn .icon-box { background: var(--clr-theme-2); } .hero__btn .circle-btn .icon-box i { font-size: 34px; color: var(--clr-common-white); } @media only screen and (min-width: 1601px), only screen and (min-width: 1400px) and (max-width: 1600px), only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 1200px) and (max-width: 1399px) { .hero__btn .circle-btn .icon-box { box-shadow: none; } } .hero__shape-1 { position: absolute; top: 217px; left: 65%; animation: zoomInOut 3s infinite linear; } .hero__shape-2 { position: absolute; left: 68%; bottom: 72px; animation: zoomInOut 3s infinite linear; } .hero-2-area { padding-top: 240px; padding-bottom: 205px; } @media only screen and (min-width: 1400px) and (max-width: 1600px), only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) { .hero-2-area { padding-bottom: 150px; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px) { .hero-2-area { padding-bottom: 135px; } } @media (max-width: 575px) { .hero-2-area { padding-top: 190px; padding-bottom: 100px; } } .hero-2-area .container { max-width: 1640px; } .hero-2-area__bg { z-index: -1; } .hero-2-area__bg::before { position: absolute; content: ""; width: 100%; height: 100%; top: 0; left: 0; background: #1F1F1F; } .hero-2__shape-1 { position: absolute; width: 44px; left: 26%; top: 279px; animation: zoomInOut 3s infinite linear; } .hero-2__shape-2 { position: absolute; width: 44px; left: 59%; bottom: 128px; animation: zoomInOut 3s infinite linear; } .hero-2__shape-3 { position: absolute; bottom: 452px; left: 72%; } .hero-2__img-box { position: absolute; left: 50%; top: 230px; transform: translateX(-50%); margin-bottom: 75px; } @media only screen and (min-width: 1400px) and (max-width: 1600px) { .hero-2__img-box { max-width: 600px; } } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .hero-2__img-box { max-width: 500px; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .hero-2__img-box { margin-left: auto; margin-right: auto; max-width: 600px; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .hero-2__img-box { position: relative; transform: none; top: 0; left: 0; } } .hero-2__img-box .main-img { width: 566px; aspect-ratio: 81/100; } @media only screen and (min-width: 1400px) and (max-width: 1600px) { .hero-2__img-box .main-img { aspect-ratio: 100/100; } } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .hero-2__img-box .main-img { aspect-ratio: 90/100; } } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .hero-2__img-box .main-img { aspect-ratio: 120/100; } } .hero-2__img-box .secondary-img { width: 566px; aspect-ratio: 81/100; position: absolute; left: 0; bottom: -33px; transform: rotate(-15deg); z-index: -1; } @media only screen and (min-width: 1400px) and (max-width: 1600px) { .hero-2__img-box .secondary-img { aspect-ratio: 100/100; } } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .hero-2__img-box .secondary-img { aspect-ratio: 90/100; } } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .hero-2__img-box .secondary-img { bottom: 0; aspect-ratio: 120/100; } } .hero-2__content { text-align: center; } @media only screen and (min-width: 1601px), only screen and (min-width: 1400px) and (max-width: 1600px), only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) { .hero-2__content { padding-bottom: 310px; } } .hero-2__subtitle { font-size: 100px; color: #F2994A; font-family: var(--tpl-ff-handwriting); font-weight: 400; line-height: 1; margin-bottom: 30px; display: inline-block; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .hero-2__subtitle { font-size: 90px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .hero-2__subtitle { font-size: 80px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .hero-2__subtitle { font-size: 70px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .hero-2__subtitle { font-size: 50px; } } @media (max-width:450px) { .hero-2__subtitle { font-size: 40px; } } .hero-2__title { font-size: 100px; line-height: 1.08; color: var(--clr-common-white); text-transform: uppercase; margin-bottom: 30px; } @media only screen and (min-width: 1400px) and (max-width: 1600px) { .hero-2__title { font-size: 120px; } } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .hero-2__title { font-size: 95px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .hero-2__title { font-size: 80px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .hero-2__title { font-size: 60px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .hero-2__title { font-size: 50px; } } @media (max-width:450px) { .hero-2__title { font-size: 32px; margin-bottom: 20px; } } .hero-2__title .circle-btn { width: 85px; height: 85px; top: -30px; margin: 0 5px; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .hero-2__title .circle-btn { top: -20px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .hero-2__title .circle-btn { top: -15px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .hero-2__title .circle-btn { width: 65px; height: 65px; top: -10px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .hero-2__title .circle-btn { display: none; } } .hero-2__title .circle-btn:hover .icon-box { color: var(--clr-theme-1); } .hero-2__title .circle-btn:hover .icon-box i { animation: iconlbtr 0.5s forwards; } .hero-2__title .circle-btn .icon-box { width: 85px; height: 85px; background: var(--clr-theme-2); border-color: var(--clr-theme-2); color: var(--clr-common-white); font-size: 30px; } @media only screen and (min-width: 768px) and (max-width: 991px) { .hero-2__title .circle-btn .icon-box { width: 65px; height: 65px; } } .hero-2__title .big-text { font-size: 120px; display: inline-block; margin-top: 5px; } @media only screen and (min-width: 1400px) and (max-width: 1600px) { .hero-2__title .big-text { font-size: 120px; } } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .hero-2__title .big-text { font-size: 105px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .hero-2__title .big-text { font-size: 90px; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .hero-2__title .big-text { font-size: inherit; } } .hero-2__text { color: #D9D9D9; max-width: 327px; margin-bottom: 30px; } @media only screen and (min-width: 1601px), only screen and (min-width: 1400px) and (max-width: 1600px), only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) { .hero-2__text { position: absolute; right: 0; bottom: 65px; text-align: left; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px) { .hero-2__text { max-width: 415px; margin-bottom: 50px; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .hero-2__text { margin-left: auto; margin-right: auto; } } @media only screen and (min-width: 1601px), only screen and (min-width: 1400px) and (max-width: 1600px), only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) { .hero-2__btn { position: absolute; bottom: 60px; left: 0; } } @media (max-width: 575px) { .hero-2__btn { transform: scale(0.8); } } .hero-2__btn .circle-btn { width: 180px; height: 180px; transform: rotate(-45deg); } .hero-2__btn .circle-btn .icon-box { width: 125px; height: 125px; } .hero-2__btn .circle-btn .image-text { filter: invert(95%) sepia(14%) saturate(0%) hue-rotate(147deg) brightness(99%) contrast(98%); } .hero-3-area { padding-top: 310px; padding-bottom: 150px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .hero-3-area { padding-top: 300px; padding-bottom: 120px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .hero-3-area { padding-top: 180px; padding-bottom: 120px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .hero-3-area { padding-top: 175px; padding-bottom: 100px; } } @media (max-width: 575px) { .hero-3-area { padding-top: 160px; padding-bottom: 90px; } } .hero-3-area .container { max-width: 1640px; } .hero-3-area .noise-wrapper { opacity: 0.2; z-index: 0; } .hero-3-area__bg { z-index: -1; } .hero-3-area__bg::before { position: absolute; content: ""; width: 100%; height: 100%; top: 0; left: 0; background: var(--clr-common-white); } .hero-3-area.container { max-width: 1640px; } .hero-3-area .scroll-btn span { position: absolute; bottom: 390px; right: 56px; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .hero-3-area .scroll-btn span { bottom: 150px; } } @media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px), only screen and (min-width: 992px) and (max-width: 1199px) { .hero-3-area .scroll-btn span { display: none; } } .hero-3__title { font-size: 140px; line-height: 1; font-weight: 700; color: #171717; margin-bottom: 30px; } @media only screen and (min-width: 1400px) and (max-width: 1600px) { .hero-3__title { font-size: 120px; } } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .hero-3__title { font-size: 95px; } } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) { .hero-3__title { font-size: 90px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .hero-3__title { font-size: 65px; } } @media (max-width: 575px) { .hero-3__title { font-size: 50px; } } @media (max-width:450px) { .hero-3__title { font-size: 38px; } } .hero-3__title .top { margin-bottom: 10px; display: block; } .hero-3__subtitle { font-size: 18px; font-weight: 300; color: #000000; line-height: 1; font-family: var(--tpl-ff-heading); position: absolute; left: 25%; padding-left: 190px; top: 60px; margin-bottom: 20px; display: inline-block; } @media only screen and (min-width: 1400px) and (max-width: 1600px) { .hero-3__subtitle { top: 60px; } } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .hero-3__subtitle { top: 45px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .hero-3__subtitle { top: 35px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .hero-3__subtitle { top: 30px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .hero-3__subtitle { position: relative; padding-left: 70px; top: 0; left: 0; } } .hero-3__subtitle::before { content: ""; width: 170px; height: 1px; background: #D9D9D9; position: absolute; left: 0; top: 50%; transform: translateY(-50%); } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .hero-3__subtitle::before { width: 50px; } } .hero-3__subtitle::after { position: absolute; content: ""; width: 40px; height: 1px; background: var(--clr-theme-2); left: 130px; top: 50%; transform: translateY(-50%); } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .hero-3__subtitle::after { width: 20px; left: 30px; } } .hero-3__text { font-size: 22px; line-height: 1.66; color: #171717; max-width: 538px; margin-bottom: 75px; margin-left: 241px; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .hero-3__text { font-size: 20px; margin-left: 100px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .hero-3__text { font-size: 20px; margin-left: 0px; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .hero-3__text { margin-left: 0; font-size: 18px; } } .hero-3__btn { margin-left: 146px; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .hero-3__btn { margin-left: 0; } } .hero-3__shape-1 { position: absolute; top: 292px; left: -190px; width: 500px; z-index: -1; opacity: 0.2; } @media only screen and (min-width: 1400px) and (max-width: 1600px) { .hero-3__shape-1 { width: 470px; } } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .hero-3__shape-1 { width: 420px; } } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) { .hero-3__shape-1 { width: 370px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .hero-3__shape-1 { display: none; } } .hero-3__shape-2 { position: absolute; width: 94px; top: 440px; right: 0; z-index: -1; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .hero-3__shape-2 { display: none; } } .hero-3__shape-3 { position: absolute; width: 54px; bottom: 230px; left: 30%; z-index: -1; animation: translateY 10s linear infinite alternate; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .hero-3__shape-3 { display: none; } } .hero-3__shapes-2 { position: absolute; left: 52%; z-index: 1; width: 674px; } @media only screen and (min-width: 1400px) and (max-width: 1600px) { .hero-3__shapes-2 { max-width: 600px; top: 20px; left: 55%; } } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .hero-3__shapes-2 { width: 550px; left: 55%; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .hero-3__shapes-2 { width: 400px; margin-top: 85px; left: 60%; } } @media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 991px) { .hero-3__shapes-2 { display: none !important; } } .hero-3__shapes-2 img { width: 100%; } .hero-3_wrapper, #hero-3_wrapper { position: absolute; } .hero-5__subtitle { font-size: 120px; color: var(--clr-theme-1); font-family: var(--tpl-ff-handwriting); font-weight: 400; line-height: 1; margin-bottom: 60px; display: block; text-align: center; } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px) { .hero-5__subtitle { font-size: 100px; } } @media (max-width: 575px) { .hero-5__subtitle { font-size: 80px; } } @media (max-width:450px) { .hero-5__subtitle { font-size: 60px; } } .hero-5__title { font-size: 90px; line-height: 1.15; margin-bottom: 55px; text-transform: uppercase; } @media only screen and (min-width: 1400px) and (max-width: 1600px) { .hero-5__title { font-size: 85px; } } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .hero-5__title { font-size: 70px; margin-bottom: 80px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .hero-5__title { font-size: 60px; margin-bottom: 80px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .hero-5__title { font-size: 70px; margin-bottom: 80px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .hero-5__title { font-size: 50px; } } @media (max-width: 575px) { .hero-5__title { font-size: 45px; } } @media (max-width:450px) { .hero-5__title { font-size: 36px; } } .hero-5__title .highlight-title { color: #14CF93; font-family: var(--tpl-ff-body); text-transform: uppercase; } .hero-5-bg { position: relative; padding-top: 170px; padding-bottom: 70px; min-height: 1020px; overflow-x: clip; } @media only screen and (min-width: 768px) and (max-width: 991px) { .hero-5-bg { padding-top: 120px; } } @media (max-width:450px), (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 991px) { .hero-5-bg { padding-top: 100px; } } .hero-5-bg::before { position: absolute; content: ""; height: 100%; width: 100%; top: 0; left: 0; z-index: -1; background: linear-gradient(180deg, #E8F5FF 0%, rgba(217, 217, 217, 0) 100%); } .hero-5__shape-2 { position: absolute; width: 44px; right: 80px; top: 43%; animation: zoomInOut 3s infinite linear; } .hero-5-area .container { max-width: 1640px; } .hero-5-thumb-1 { max-width: 673.27px; position: absolute; top: 40px; right: 0; z-index: -1; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .hero-5-thumb-1 { max-width: 600px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .hero-5-thumb-1 { max-width: 460px; } } .hero-5-thumb-1 img { aspect-ratio: 100/88; width: 100%; } @media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px) { .hero-5-thumb-1 img { display: none; } } .banner-5-thumb-1-mask { mask-size: cover; mask-repeat: no-repeat; mask-position: top; } .hero-5__btn { position: absolute; bottom: 38px; left: 56%; transform: translateX(-50%); } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 1200px) and (max-width: 1399px) { .hero-5__btn { bottom: 0; } } @media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px) { .hero-5__btn { position: static; bottom: 0; left: 0; transform: translateY(0px); margin-top: 50px; } } .hero-5__shape-1 { opacity: 0.7; filter: blur(175px); position: absolute; transform: translate(45%, -45%); } .hero-5-thumb-2 { max-width: 266px; position: relative; } .hero-5-thumb-2 img { border-radius: 1000px 1000px 0px 0px; aspect-ratio: 100/125; width: 100%; } .hero-5-thumb-2:after { position: absolute; content: ""; width: 100%; height: 100%; left: 10px; top: 0; border: 1px solid #D9D9D9; border-radius: 180px 180px 0 0; z-index: -1; } .hero-5-paragraph { max-width: 382px; } .hero-5-bottom-content { display: flex; gap: 50px 72px; } @media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px) { .hero-5-bottom-content { display: flex; gap: 30px 45px; align-items: center; } } @media (max-width: 575px) { .hero-5-bottom-content { flex-wrap: wrap; } } .hero-5__btn .circle-btn { width: 180px; height: 180px; transform: rotate(-45deg); } .hero-5__btn .circle-btn:hover .icon-box { color: var(--clr-theme-2); } .hero-5__btn .circle-btn .icon-box { width: 136px; height: 136px; color: var(--clr-theme-1); box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.03); } .ax-hero6__slider { min-height: 940px; background-position: center center; background-size: cover; background-repeat: no-repeat; display: flex; align-items: center; padding-top: 120px; padding-bottom: 255px; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .ax-hero6__slider { min-height: 650px; } } .ax-hero6__content { position: absolute; max-width: 690px; top: 55%; z-index: 9; transform: translateY(-50%); } .ax-hero6__title { background: linear-gradient(90.37deg, #14CF93 1.75%, #42A5F5 99.88%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; text-fill-color: transparent; } .hero-btn { margin-top: 50px; } /*---------------------------------------- 09. brand-area css ----------------------------------------*/ .dark-overlay { position: relative; z-index: 55; } .dark-overlay:before { position: absolute; content: ""; height: 100%; width: 100%; background: #111; top: 0; left: 0; z-index: -1; opacity: 0.7; } .brand-area__title { font-size: 20px; font-weight: 600; text-align: center; line-height: 30px; } .brand-area-2 { background: #1F1F1F; } .brand-wrapper { display: flex; justify-content: space-around; align-items: center; flex-wrap: wrap; gap: 50px 50px; } @media (min-width: 1400px) { .brand-wrapper { justify-content: space-between; } } .brand-item { text-align: center; } .brand-item img { filter: grayscale(1); -webkit-transition: all 0.5s ease-out 0s; -moz-transition: all 0.5s ease-out 0s; -ms-transition: all 0.5s ease-out 0s; -o-transition: all 0.5s ease-out 0s; transition: all 0.5s ease-out 0s; display: inline-block; max-width: 200px; } .brand-active .slick-list { margin-left: -15px; margin-right: -15px; } .brand-active .slick-track { display: flex; align-items: center; } .brand-active .slick-slide { margin-left: 15px; margin-right: 15px; } .brand-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px 30px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .brand-grid { grid-template-columns: repeat(3, 1fr); } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px) { .brand-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 575px) { .brand-grid { grid-template-columns: repeat(1, 1fr); } } .brand-grid .brand-item { border: 1px solid #414141; padding: 52px 0; transition: 0.3s ease-in-out; } .brand-grid .brand-item:hover { border-color: var(--clr-common-white); } .brand-grid .brand-item:hover img { filter: grayscale(0); } .brand-testimonial-item { padding: 40px 40px 35px; background: #242424; border-radius: 6px; } @media only screen and (min-width: 1200px) and (max-width: 1399px), (max-width:450px) { .brand-testimonial-item { padding: 40px 30px 35px; } } .brand-testimonial-icon { margin-bottom: 20px; } .brand-testimonial-content > p { color: #D9D9D9; margin-bottom: 30px; } .testimonial-author h4 { color: var(--clr-common-white); font-size: 20px; font-weight: 500; } .testimonial-author p { color: #848484; margin-bottom: 0; } .slider-nav { height: 46px; width: 46px; background: var(--clr-common-white); border-radius: 50%; box-shadow: 0px 4px 50px rgba(0, 0, 0, 0.15); display: inline-flex; align-items: center; justify-content: center; color: #14CF93; position: absolute; top: 50%; transform: translateY(-50%); z-index: 99; } .slider-nav:hover { background: var(--clr-theme-2); color: var(--clr-common-black); } .slider-nav-wrapper .slider-nav-next { left: auto; right: -25px; } @media only screen and (min-width: 1400px) and (max-width: 1600px), only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) { .slider-nav-wrapper .slider-nav-next { right: -18px; } } .slider-nav-wrapper .slider-nav-prev { left: -25px; } @media only screen and (min-width: 1400px) and (max-width: 1600px), only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) { .slider-nav-wrapper .slider-nav-prev { left: -18px; } } .slider-nav-wrapper { opacity: 0; visibility: hidden; } @media (max-width: 575px) { .slider-nav-wrapper { display: none; } } .nav-on-hover:hover .slider-nav-wrapper { opacity: 1; visibility: visible; } .brand-title { text-transform: capitalize; font-size: 20px; } .brand-round-item { width: 330px; height: 330px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid #D9D9D9; border-radius: 50%; } .brand-round-item img { filter: grayscale(1); max-width: 229px; -webkit-transition: all 0.5s ease-out 0s; -moz-transition: all 0.5s ease-out 0s; -ms-transition: all 0.5s ease-out 0s; -o-transition: all 0.5s ease-out 0s; transition: all 0.5s ease-out 0s; } .brand-round-item img:hover { filter: grayscale(0); } /*---------------------------------------- 14. counter css ----------------------------------------*/ .counter-wrapper { padding: 60px 0; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .counter-wrapper { padding: 0px 0; } } .counter-area__bg { position: absolute; width: calc(100% + 200px); top: 0; left: 50%; z-index: -1; border-radius: 1000px; transform: translateX(-50%); overflow: hidden; height: 100%; } @media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px) { .counter-area__bg { border-radius: 0; } } .counter-area__bg:after { position: absolute; content: ""; width: 100%; height: 100%; background: #000; top: 0; left: 0; opacity: 0.6; } .counter-area__bg img { width: 100%; height: 100%; object-fit: cover; } .counter-area__bg_dark { background: var(--clr-theme-1); } @media (max-width: 575px) { .counter-area__btn { text-align: center; padding: 30px 0; } } .counter-area__btn .circle-btn { width: 150px; height: 150px; } .counter-area__btn .circle-btn:hover .icon-box { background: rgb(255, 255, 255); } .counter-area__btn .circle-btn .icon-box { background: rgba(255, 255, 255, 0); } .counter-area__btn .circle-btn .icon-box svg * { fill: var(--clr-theme-2); } .counter-area__btn .circle-btn .image-text { filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(316deg) brightness(104%) contrast(103%); } .counter-item { padding: 30px 0; } @media (max-width: 575px) { .counter-item { text-align: center; } } .counter__number { font-size: 60px; font-weight: 700; line-height: 1.16; color: var(--clr-common-white); margin-bottom: 10px; } @media only screen and (min-width: 992px) and (max-width: 1199px), (max-width: 575px) { .counter__number { font-size: 45px; } } .counter__text p { font-size: 16px; font-weight: 400; text-transform: uppercase; color: var(--clr-common-white); font-family: "Archivo", sans-serif; line-height: 30px; margin-bottom: 0; } .for-black .counter__number { font-size: 60px; font-weight: 700; line-height: 1.16; color: var(--clr-common-black); margin-bottom: 10px; } @media only screen and (min-width: 992px) and (max-width: 1199px), (max-width: 575px) { .for-black .counter__number { font-size: 45px; } } .for-black .counter__text p { font-size: 16px; font-weight: 400; text-transform: uppercase; color: var(--clr-common-black); font-family: "Archivo", sans-serif; line-height: 30px; margin-bottom: 0; } .counter-area__btn .icon-box { height: 120px; width: 120px; display: inline-flex; justify-content: center; align-items: center; color: var(--clr-theme-2); border-radius: 50%; font-size: 38px; font-weight: 400; background: var(--clr-common-white); box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1); background-size: cover; background-repeat: no-repeat; background-position: center; } /*---------------------------------------- 34. section title css ----------------------------------------*/ .section__subtitle { display: inline-block; text-align: center; } .section__subtitle-icon { margin-bottom: 15px; line-height: 1; } .section__subtitle-text { font-size: 20px; font-weight: 400; color: var(--clr-theme-2) !important; line-height: 22px; margin-bottom: 20px; } .section__subtitle-3 { display: flex; align-items: flex-start; gap: 27px; margin-bottom: 30px; } .section__subtitle-3 .section__subtitle-text { font-size: 16px; font-weight: 600; color: var(--clr-theme-1); text-transform: uppercase; font-family: var(--tpl-ff-heading); margin-bottom: 0; line-height: 25px; padding-bottom: 10px; display: inline-block; position: relative; } .section__subtitle-3 .section__subtitle-text::after { position: absolute; content: ""; width: 100%; height: 1px; bottom: 0; left: 0; background-image: linear-gradient(90deg, var(--clr-theme-2) 0%, transparent 100%); } .section__subtitle-3 .section__subtitle-number span { font-size: 16px; font-weight: 600; color: var(--clr-theme-2); font-family: var(--tpl-ff-heading); } .section__title-wrapper-about .section__subtitle-text { margin-bottom: 0; } .section__title-wrapper-services .section__title-main { color: var(--clr-common-white); } .section__title-wrapper-work-process .section__title-main { color: var(--clr-common-white); } .section__title-wrapper-history { margin-bottom: 100px; } @media only screen and (min-width: 768px) and (max-width: 991px) { .section__title-wrapper-history { margin-bottom: 80px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .section__title-wrapper-history { margin-bottom: 60px; } } .section__title-main { line-height: 1.08; } .section__title-2-wrapper-testimonial-2 .section__title-main { color: var(--clr-common-white); } .section__title-2-wrapper-testimonial-2 .section__title-main span { font-weight: 500; } .section__title-2-wrapper-cta .section__title-main { color: var(--clr-common-white); font-weight: 700; } .section__title-2-wrapper-cta .section__title-main span { font-family: var(--tpl-ff-handwriting); color: var(--clr-theme-2); text-transform: initial; font-weight: 300; } .section__title-2-wrapper-capabilities .section__title-main { color: var(--clr-common-white); } .section__title-3-wrapper.section__title-wrapper-services .section__title-main { color: var(--clr-common-white); } .section__title-3-wrapper.section__title-wrapper-blogpost .section__title-main { color: var(--clr-common-white); } .section__title-3-wrapper.section__title-wrapper-discuss .section__title-main { color: #14CF93; } .section__title-3-wrapper.section__title-wrapper-team .section__title-main { color: var(--clr-common-white); } .section__title-3-wrapper.section__title-wrapper-project .section__title-main { line-height: 1; } @media only screen and (min-width: 1601px) { .section__title-3-wrapper.section__title-wrapper-project .section__title-main { font-size: 200px; } } @media only screen and (min-width: 1400px) and (max-width: 1600px) { .section__title-3-wrapper.section__title-wrapper-project .section__title-main { font-size: 180px; } } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .section__title-3-wrapper.section__title-wrapper-project .section__title-main { font-size: 140px; } } .section__right-title { font-size: 65px; line-height: 1; text-transform: uppercase; font-weight: 400; margin-bottom: 0; } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 768px) and (max-width: 991px) { .section__right-title { font-size: 60px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .section__right-title { font-size: 35px; } } @media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px) { .section__right-title { font-size: 40px; } } @media (max-width:450px) { .section__right-title { font-size: 35px; } } .section__title-wrapper.is-white .section__title-main { color: var(--clr-common-white); } .section__title-wrapper.is-white .section__right-title { color: var(--clr-common-white); } .section__title-wrapper.is-white .section__paragraph { color: var(--clr-common-white); font-size: 24px; font-weight: 400; margin-bottom: 0; line-height: 1.7; } @media (max-width: 575px), (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 1200px) and (max-width: 1399px) { .section__title-wrapper.is-white .section__paragraph { font-size: 20px; } } .section__title-wrapper.is-gradient .section__title-main > * { background-image: linear-gradient(91.13deg, #14CF93 2.19%, #4A79F2 99.94%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .icon-box .title-icon { position: relative; top: -7px; } .fw-reguler { font-weight: 400; } .section-title-hightlight { color: var(--clr-theme-2); font-weight: 300; font-family: var(--tpl-ff-body); } .section__title-wrapper .title-arrow { padding-left: 20px; } @media (max-width: 575px), sm { .section__title-wrapper .title-arrow { -webkit-transform: rotate(165deg); -moz-transform: rotate(165deg); -ms-transform: rotate(165deg); transform: rotate(165deg); } } .section__inner-subtitle { font-size: 18px; font-weight: 500; display: inline-block; margin-bottom: 25px; font-family: var(--tpl-ff-heading); text-transform: capitalize; } .line__subtitle { font-size: 18px; color: #000000; line-height: 1; font-family: var(--tpl-ff-heading); position: relative; padding-left: 190px; display: inline-block; font-weight: 600; } @media (max-width:450px) { .line__subtitle { padding-left: 140px; } } .line__subtitle::before { content: ""; width: 170px; height: 1px; background: #D9D9D9; position: absolute; left: 0; top: 50%; transform: translateY(-50%); } @media (max-width:450px) { .line__subtitle::before { width: 120px; } } .line__subtitle::after { position: absolute; content: ""; width: 40px; height: 1px; background: var(--clr-theme-2); left: 130px; top: 50%; transform: translateY(-50%); } @media (max-width:450px) { .line__subtitle::after { left: 80px; } } .section__title-inner { font-size: 65px; text-transform: capitalize; line-height: 1.17; } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 1400px) and (max-width: 1600px) { .section__title-inner { font-size: 60px; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 992px) and (max-width: 1199px) { .section__title-inner { font-size: 50px; } } @media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px) { .section__title-inner { font-size: 40px; } } @media (max-width:450px) { .section__title-inner { font-size: 36px; } } .section__title-wrapper.is-white .section__inner-subtitle { color: var(--clr-common-white); } .section__title-wrapper.is-white .section__title-inner { color: var(--clr-common-white); } .section-intro-paragraph { margin-bottom: 0; } .title-paragraph { margin-bottom: 0; } .section__title-wrapper.is-white .title-paragraph { color: var(--clr-common-white); margin-bottom: 0; } .section__title-wrapper.has-strategy-title .section__inner-subtitle { font-size: 24px; font-weight: 700; } .section__title-wrapper.has-strategy-title .title-paragraph { max-width: 587px; } .section__title-wrapper .title-disable { color: #4F4F4F; padding-right: 5px; } .title-green { color: #14CF93; border-bottom: 3px solid #14CF93; } /*Interactions*/ .text-mask { overflow: hidden; white-space: nowrap; } .text-line { transform: translate(0%, 150%); } .split-parent { overflow: hidden; } .split-child { display: inline-block; } /*---------------------------------------- 02. about css ----------------------------------------*/ .about-area__shape-1 { position: absolute; left: 84%; top: 92px; animation: zoomInOut 3s infinite linear; } @media (max-width:450px) { .about-area__shape-1 { display: none; } } .about__content { padding: 0 120px; text-align: center; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .about__content { padding: 0 90px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .about__content { padding: 0 60px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .about__content { padding: 0 30px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .about__content { padding: 0 0; } } .about__content p { margin-bottom: 0; } .about-us-text { margin-bottom: 110px; } @media only screen and (min-width: 576px) and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 991px) { .about-us-text { margin-bottom: 150px; } } .about-us-text p { font-size: 24px; margin-bottom: 0; line-height: 1.5; } @media (max-width:450px), only screen and (min-width: 992px) and (max-width: 1199px) { .about-us-text p { font-size: 20px; margin-bottom: 0; } } .about-us-thumb-1 { position: relative; padding: 0px 48px; border-radius: 1000px 1000px 0px 0px; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .about-us-thumb-1 { padding-right: 10px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .about-us-thumb-1 { padding-right: 10px; padding-left: 20px; } } @media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 991px) { .about-us-thumb-1 { padding-right: 0px; } } .about-us-thumb-1 img { width: 100%; aspect-ratio: 100/106; } .about-us-thumb-1:after { position: absolute; content: ""; height: 100%; width: 88%; border: 1px solid #D9D9D9; left: 0; top: 60px; z-index: -1; } .about-us-thumb-1::before { position: absolute; content: ""; width: 75px; height: 1px; background: #D9D9D9; bottom: -29px; left: -12px; transform: rotate(-52deg); } .about-us-content { margin-top: 70px; margin-bottom: 160px; } @media (max-width:450px) { .about-us-content { margin-bottom: 0px; } } .about-us-thumb-2 { max-width: 226px; bottom: 0px; right: 0px; position: absolute; margin-bottom: 25px; } @media only screen and (min-width: 1400px) and (max-width: 1600px) { .about-us-thumb-2 { right: 35px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .about-us-thumb-2 { max-width: 165px; } } @media (max-width: 575px) { .about-us-thumb-2 { max-width: 150px; right: 30px; } } @media (max-width:450px) { .about-us-thumb-2 { display: none; } } .about-us-thumb-2::after { position: absolute; content: ""; width: 100%; height: 100%; left: 30px; border: 1px solid #D9D9D9; border-radius: 180px 180px 0 0; z-index: -1; bottom: -25px; } .about-us-thumb-2:before { position: absolute; content: ""; width: 43.28px; height: 1px; background: #D9D9D9; bottom: -11px; right: -36px; transform: rotate(41deg); } .about-us-thumb-2 img { width: 100%; aspect-ratio: 100/147.5; border-radius: 1000px 1000px 0px 0px; } .about-us-content .c-button { margin-left: 70px; } @media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 1200px) and (max-width: 1399px) { .about-us-content .c-button { margin-left: 0; } } .why-wrapper > p { color: #D9D9D9; max-width: 992px; margin-bottom: 70px; } .why-content { position: relative; margin-bottom: 40px; margin-left: 120px; margin-right: 120px; z-index: 5; padding-bottom: 35px; } @media only screen and (min-width: 768px) and (max-width: 991px) { .why-content { margin-left: 80px; margin-right: 80px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .why-content { margin-left: 0; margin-right: 0; } } .why-thumb { padding-bottom: 35px; background-size: cover; background-position: center; background-repeat: no-repeat; min-height: 500px; } .why-content .area__btn { position: absolute; right: 0; transform: translate(49%, -50%); z-index: 1; top: 41%; } @media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px) { .why-content .area__btn { right: 50%; } } .why-content .line { position: absolute; z-index: 1; height: 350px; width: 1px; background: #D9D9D9; left: -60px; bottom: 0; } @media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px) { .why-content .line { display: none; } } .about-us-thumb-4 { margin-top: 210px; padding-right: 20px; margin-left: -22px; } @media xs, only screen and (min-width: 576px) and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 992px) and (max-width: 1199px) { .about-us-thumb-4 { padding-right: 0px; margin-left: 0px; } } @media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 991px) { .about-us-thumb-4 { margin-top: 0; padding-right: 0px; margin-left: 0px; } } .about-us-thumb-5 { margin-top: 375px; } @media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 991px) { .about-us-thumb-5 { margin-top: 0; } } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .about-us-thumb-5 { grid-column: 3/5; grid-row: 2/2; margin-top: -100px; } } .about-science-wrapper { width: 806px; display: flex; align-items: center; justify-content: space-between; position: absolute; right: 105px; top: 0; z-index: 5; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .about-science-wrapper { width: 530px; right: 20px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .about-science-wrapper { width: 603px; right: 0px; } } @media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 991px) { .about-science-wrapper { width: 100%; position: static; flex-wrap: wrap; margin-bottom: 60px; gap: 50px; } } @media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px) { .about-science-wrapper { justify-content: center; } } .about-us-thumb-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(385px, 1fr)); gap: 50px 93px; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .about-us-thumb-grid { grid-template-columns: repeat(auto-fit, minmax(308px, 1fr)); } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .about-us-thumb-grid { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 50px 50px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .about-us-thumb-grid { grid-template-columns: 30% 31% 30%; gap: 30px 30px; place-items: end; } } @media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px) { .about-us-thumb-grid { grid-template-columns: repeat(2, auto); gap: 30px 30px; place-items: end; } } @media (max-width:450px) { .about-us-thumb-grid { grid-template-columns: repeat(1, auto); } } .about-us-thumb-3 img { width: 100%; aspect-ratio: 100/137; } .about-us-thumb-4 img { width: 100%; aspect-ratio: 100/75; } .about-us-thumb-5 img { width: 100%; aspect-ratio: 100/124; } .about-us-2-title { position: relative; margin-top: -285px; } @media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 991px) { .about-us-2-title { margin-top: 50px; } } .about-us-2-title > P { max-width: 550px; margin-bottom: 0; font-size: 24px; line-height: 1.5; } @media (max-width:450px) { .about-us-2-title > P { font-size: 20px; } } .about-img-area { display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100%; width: 100%; position: relative; } .about__img-thumb { position: relative; width: 100%; height: 100%; overflow: hidden; } .about__img-thumb img { height: 100%; width: 100%; object-fit: cover; transform-origin: left; } .about__download-wrap { position: relative; } .about__download-wrap .image-text { animation: rotate 20s linear infinite; } .about__download-wrap .download-icon { position: absolute; left: 90px; top: 50%; transform: translate(-50%, -50%); text-align: center; width: 108px; height: 108px; background: #FFFFFF; box-shadow: 0px 4px 44px rgba(0, 0, 0, 0.05); border-radius: 50%; line-height: 108px; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .about__download-wrap .download-icon { left: 80px; } } @media (max-width: 575px) { .about__download-wrap .download-icon { left: 50%; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .about__download-wrap .download-icon { left: 17%; } } .about-thumb { margin-left: 30px; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .about-thumb { margin-left: 0; } } .about-thumb img { border-radius: 1000px 0px 0px 1000px; } .about-skill-area__shape-1 { position: absolute; z-index: -1; width: 200px; top: -7%; animation: translateY 2s linear infinite alternate; left: 30%; } @media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px) { .about-skill-area__shape-1 { display: none; } } .parallax-container { height: 930px; overflow: hidden; position: relative; } @media (max-width: 575px) { .parallax-container { height: 340px; } } .parallax-image { background-size: cover; background-position: center; position: absolute; top: 0; left: 0; width: 100%; height: 150%; } /*---------------------------------------- 05. award css ----------------------------------------*/ .award-scroll-line .award-scroll-line__heading { line-height: 1.08; white-space: nowrap; margin-bottom: 0; } .award-scroll-line-2 .award-scroll-line__heading { font-weight: 400; line-height: 1.08; font-family: "Tenor Sans", sans-serif; white-space: nowrap; margin-bottom: 0; } .award-scroll-wrapper { -webkit-transition-timing-function: linear; transition-timing-function: linear; } .text__scroll .swiper-slide { width: auto; } .title-moving-outer { margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important; max-width: 1000% !important; width: 100vw !important; } .title-moving-forward, .title-moving-backward { clear: both; display: inline-block; overflow: hidden; white-space: nowrap; padding: 0 6vw; box-sizing: border-box; } .light-section-wrapper, .dark-section-wrapper { margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important; max-width: 1000% !important; width: 100vw !important; } .light-section-container, .dark-section-container { position: relative; box-sizing: border-box; width: 100%; margin: 0 auto; } .scroll-content { cursor: default !important; } .content-max-width { box-sizing: border-box; padding-left: 80px; padding-right: 80px; max-width: 1320px; } .content-row { position: relative; width: 100%; margin: 0 auto; z-index: 1; opacity: 1; box-sizing: border-box; } /*---------------------------------------- 13. contact css ----------------------------------------*/ .contact-area__shape-1 { position: absolute; top: 80px; left: 8%; animation: zoomInOut 3s infinite linear; } .contact-area__shape-2 { position: absolute; right: 15%; bottom: 95px; } @media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px) { .contact-area__shape-2 { max-width: 100px; } } @media (max-width:450px) { .contact-area__shape-2 { display: none; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .contact__btn { transform: scale(0.8); } } .contact-shapes .shape-1 { position: absolute; left: -125px; z-index: -1; } @media only screen and (min-width: 1400px) and (max-width: 1600px) { .contact-shapes .shape-1 { max-width: 230px; } } @media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px), only screen and (min-width: 992px) and (max-width: 1199px) { .contact-shapes { display: none; } } .contact-info { display: flex; align-items: center; gap: 20px 15px; } .contact-info-content span { margin-bottom: 5px; display: block; } .contact-info-content h4 { margin-bottom: 0; font-size: 20px; } @media (max-width:450px) { .contact-info-content h4 { font-size: 18px; } .contact-info-content h4 a:hover { color: var(--clr-theme-2); } } .contact-info-wrapper { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 30px 20px; } .contact-info-icon { width: 96px; height: 96px; background: linear-gradient(180deg, #38b8fd 0%, #0072ff 100%); display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; position: relative; } @media (max-width:450px) { .contact-info-icon { width: 76px; height: 76px; } } .contact-info-icon .icon-middle { width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(180deg, #38b8fd 0%, #0072ff 100%); position: absolute; right: 15px; border-radius: 3px; } .contact-info-icon .icon-middle::before { position: absolute; content: ""; top: 50%; transform: translateY(-50%); left: -10px; width: 0; height: 0; border-top: 7px solid transparent; border-right: 10px solid var(--clr-theme-2); border-bottom: 7px solid transparent; border-radius: 10px 0px 0px 10px; } .contact-form { padding: 60px 60px; background: var(--clr-theme-1); margin-left: 30px; } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) { .contact-form { padding: 60px 30px; } } @media (max-width: 575px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px) { .contact-form { padding: 60px 30px; margin-left: 0px; } } .contact-input input, .contact-input textarea { height: 60px; width: 100%; font-size: 14px; border: 0; border-bottom: 1px solid #414141; outline: none; background: transparent; color: var(--clr-common-white); } .postbox__comment-check { display: flex; align-items: center; gap: 15px; } .postbox__comment-title { margin-bottom: 40px; } .contact-input { position: relative; margin-bottom: 20px; } .contact-input textarea { height: 80px; resize: none; padding-top: 25px; padding-bottom: 25px; } .contact-btn .input-btn { color: var(--clr-common-white); } .contact-btn .input-btn:hover { border-color: var(--clr-theme-2); } .e-check-input { margin: 0; appearance: none; -moz-appearance: none; display: block; width: 26px; height: 26px; background: transparent; border: 1px solid #D9D9D9; outline: none; flex: 0 0 auto; padding: 0; border-radius: 50%; } .e-check-input:hover { cursor: pointer; } .e-check-input:checked { position: relative; } .e-check-input.is-black { border-color: #414141; } .e-check-input:checked::after { box-sizing: border-box; position: absolute; content: ""; font-size: 10px; color: var(--clr-theme-2); top: 50%; left: 50%; height: 8px; width: 8px; background: var(--clr-theme-2); border-radius: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .location-map iframe { height: 650px; width: 100%; position: relative; top: 10px; } /*---------------------------------------- 35. services css ----------------------------------------*/ .services-area__bg { position: absolute; width: 100%; height: 100%; overflow: hidden; top: 0; left: 0; z-index: -1; } .services-area__bg:after { position: absolute; content: ""; width: 100%; height: 100%; top: 0; left: 0; background: #000000; opacity: 0.5; } .services-area__bg img { width: 100%; height: 100%; object-fit: cover; } .services-area-3__bg { background: var(--clr-theme-1); } .services-area-3__bg img { opacity: 0.15; } .services-area-3__shape-1 { position: absolute; left: -118px; width: 690px; transform: rotate(30deg); bottom: 232px; } @media only screen and (min-width: 1400px) and (max-width: 1600px) { .services-area-3__shape-1 { width: 600px; } } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .services-area-3__shape-1 { width: 500px; } } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px) { .services-area-3__shape-1 { width: 400px; } } @media (max-width: 575px) { .services-area-3__shape-1 { display: none; } } .services-area-3__shape-2 { position: absolute; right: -171px; top: 211px; width: 572px; display: none; } @media only screen and (min-width: 1400px) and (max-width: 1600px) { .services-area-3__shape-2 { width: 500px; } } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .services-area-3__shape-2 { width: 400px; } } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px) { .services-area-3__shape-2 { width: 300px; } } @media (max-width: 575px) { .services-area-3__shape-2 { display: none; } } .services-area-3-content p { color: var(--clr-common-white); font-size: 22px; line-height: 1.66; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .services-area-3-content p { font-size: 18px; } } .services-area-3-content .area-btn { margin-left: 107px; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .services-area-3-content .area-btn { margin-left: 0; } } .services-area-3-content .area-btn .c-button__text { color: var(--clr-common-white); } .services__btn .border-bottom-btn { color: var(--clr-common-white); } .service-slider { overflow: visible; } .services-wrapper-3 { padding-left: 40px; padding-right: 40px; margin-right: 40px; z-index: 2; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .services-wrapper-3 { margin-right: 0; padding-left: 0; padding-right: 0; padding-top: 0; } } .services-wrapper-3__bg { z-index: -1; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .services-wrapper-3__bg { opacity: 0; } } .services-wrapper-3__bg img { width: 100%; height: 100%; object-fit: cover; opacity: 0.9; } .service__box { border: 1px solid #414141; position: relative; height: 558px; } .service__box:hover .service__content { opacity: 1; visibility: visible; } .service__box:hover .service__content .service__btn a i { transform: rotate(0deg); } .service__box:hover .service__content-wrapper::before { width: calc(100% - 30px); height: calc(100% - 30px); top: 15px; right: 15px; } @media (max-width:450px) { .service__box:hover .service__content-wrapper::before { display: none; } } .service__box > .service__title { writing-mode: vertical-rl; padding-top: 82px; transform: rotate(180deg) translateX(50%); position: absolute; bottom: 0; left: 50%; margin-bottom: 0; } .service__box > .service__title a { font-size: 24px; line-height: 30px; color: var(--clr-common-white); margin-bottom: 0; display: flex; align-items: center; gap: 80px; } .service__box > .service__title a i { font-size: 50px; transform: rotate(135deg); } @media (max-width:450px) { .service__box > .service__title { opacity: 0; visibility: hidden; } } .service__content { padding: 45px 45px 65px; background: var(--clr-theme-2); width: calc(100% - 30px); height: calc(100% - 30px); margin: auto; position: absolute; top: 15px; left: 15px; display: flex; flex-direction: column; justify-content: space-between; opacity: 0; visibility: hidden; -webkit-transition: all 0.5s ease-out 0s; -moz-transition: all 0.5s ease-out 0s; -ms-transition: all 0.5s ease-out 0s; -o-transition: all 0.5s ease-out 0s; transition: all 0.5s ease-out 0s; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .service__content { padding: 45px 25px 65px; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px), (max-width:450px) { .service__content { padding: 45px 25px 65px; opacity: 1; visibility: visible; } } .service__content .service__title { font-size: 24px; line-height: 30px; color: var(--clr-common-white); margin-bottom: 30px; } .service__content-wrapper { position: absolute; width: 100%; height: 100%; top: 0; left: 0; } .service__content-wrapper:before { position: absolute; content: ""; width: 20px; height: 20px; background: var(--clr-theme-2); right: 0px; top: 0px; } @media (max-width:450px) { .service__content-wrapper:before { width: 0; height: 0; } } .service__list ul { padding: 0px; margin: 0px; } .service__list ul li { list-style-position: inside; color: var(--clr-common-white); line-height: 34px; } .service__btn { text-align: center; } .service__btn a { display: inline-block; } .service__btn a:hover i { animation: iconltr 0.5s forwards; color: var(--clr-common-black); } .service__btn a i { font-size: 50px; color: var(--clr-common-white); transform: rotate(-45deg); display: inline-block; -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; } @media only screen and (min-width: 768px) and (max-width: 991px) { .service__btn a i { transform: rotate(0deg); } } .service-box-3 { background: var(--clr-common-white); padding: 30px; } .service-box-3__content .service__title { font-size: 24px; color: #191919; margin-bottom: 30px; } .service-box-3__content .service__title a { display: flex; align-items: center; gap: 20px; justify-content: space-between; flex-wrap: wrap; } .service-box-3__content .service__title a:hover { color: var(--clr-theme-2); } .service-box-3__content .service__title a:hover .icon-box i { animation: iconltr 0.5s forwards; color: var(--clr-theme-2); } .service-box-3__content .service__title .icon-box { transform: rotate(-45deg); display: inline-flex; justify-content: center; align-items: center; width: 40px; height: 40px; color: #191919; font-size: 20px; position: relative; } .service-box-3__content .service__title .icon-box::before { position: absolute; content: ""; width: 100%; height: 100%; border: 1px solid #D9D9D9; transform: rotate(45deg); } .service-box-3__content p { color: #191919; margin-bottom: 30px; } .service-box-3__content .area-btn { line-height: 1; } .service-box-3__content .area-btn .text-btn { color: var(--clr-theme-2); font-family: var(--tpl-ff-heading); line-height: 1; padding-bottom: 5px; } .service-area-3 { background: var(--clr-theme-1); border-bottom: 1px solid #414141; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .service-area-3 { margin-top: 80px; } } .service__item-3 { display: inline-flex; flex-direction: column; position: relative; width: 220px; height: 100vh; margin: 0 -4px 0 0; margin-left: 0px; justify-content: flex-end; counter-increment: count; } .service__item-3::before { background-color: #cbcbcb; content: ""; display: inline-block; height: 100%; left: 0; position: absolute; top: 0; width: 1px; } .service__item-3:hover .service__hover-3 { opacity: 1; } .service__title-3 { color: var(--clr-common-white); transform: rotate(270deg); padding-left: 40px; font-size: 75px; font-weight: 700; z-index: 6; } .service__hover-3 { width: 100%; height: 100%; position: absolute; top: 0; left: 0; background-size: cover; background-repeat: no-repeat; opacity: 0; -webkit-transition: opacity 0.3s, -webkit-transform 0.7s cubic-bezier(0.23, 1, 0.32, 1); transition: opacity 0.3s, -webkit-transform 0.7s cubic-bezier(0.23, 1, 0.32, 1); transition: opacity 0.3s, transform 0.7s cubic-bezier(0.23, 1, 0.32, 1); transition: opacity 0.3s, transform 0.7s cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 0.7s cubic-bezier(0.23, 1, 0.32, 1); overflow: hidden; pointer-events: none; } .service-item-5 { border-top: 1px solid #414141; padding: 66px 0px; position: relative; overflow: hidden; } @media (max-width:450px) { .service-item-5 { padding: 45px 0px; } } .service-item-5:hover .service-bottom-item { transform: translate(0); } .service-item-5:hover .service-top-item { transform: translateY(-100%) !important; } @media (hover: none) { .service-item-5:hover .service-top-item { transform: none !important; } } .service-panel-inner { overflow: hidden; } .service-top-item { transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1); display: flex; align-items: center; } .service-bottom-item { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 30; transform: translateY(100%); display: flex; align-items: center; overflow: hidden; transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1); justify-content: space-between; } @media (hover: none) { .service-bottom-item { position: static; transform: none; margin-top: 30px; } } .service-count-title { font-size: 20px; color: #A5A5A5; margin-bottom: 0; } .service-title-5 { font-size: 100px; color: var(--clr-common-white); text-transform: uppercase; line-height: 1.1; margin-bottom: 0; padding-left: 125px; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .service-title-5 { padding-left: 50px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .service-title-5 { font-size: 80px; padding-left: 30px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .service-title-5 { font-size: 70px; padding-left: 30px; } } @media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px) { .service-title-5 { font-size: 50px; padding-left: 30px; } } @media (max-width:450px) { .service-title-5 { font-size: 36px; padding-left: 15px; } } .service-thumb-5 { display: grid; grid-template-columns: repeat(auto-fit, minmax(357px, 0fr)); gap: 0px 30px; max-width: 808px; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .service-thumb-5 { grid-template-columns: repeat(auto-fit, minmax(260px, 0fr)); } } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) { .service-thumb-5 { grid-template-columns: repeat(auto-fit, minmax(200px, 0fr)); } } @media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px) { .service-thumb-5 { grid-template-columns: auto auto; } } .service-thumb-5 img { width: 100%; aspect-ratio: 100/100; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .service-thumb-5 img { aspect-ratio: 100/110; } } .service-small-title h3 { color: var(--clr-common-white); font-size: 30px; font-weight: 700; text-transform: uppercase; } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) { .service-small-title h3 { font-size: 24px; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .service-small-title h3 { display: none; } } @media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px) { .service-5-link { display: none; } } .service-5-link .c-button { width: 108px; height: 108px; } .service-intro-thumb { min-height: 720px; width: calc(100% + 270px); } @media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 992px) and (max-width: 1199px) { .service-intro-thumb { min-height: 500px; width: calc(100% + 0px); } } .service-intro-text { max-width: 1089px; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .service-intro-text { max-width: 900px; } } .service-banner-area { position: relative; z-index: 5; } .service-banner-area:before { position: absolute; content: ""; height: 100%; width: 100%; background: var(--clr-theme-1); top: 0; left: 0; z-index: -1; } @media (max-width: 575px) { .service-banner-title-box { margin-top: 30px; } } .service-banner-subtitle { font-size: 18px; font-weight: 500; display: inline-block; margin-bottom: 13px; font-family: var(--tpl-ff-heading); color: var(--clr-common-white); } .service-banner-title { font-size: 100px; text-transform: uppercase; line-height: 1.25; color: var(--clr-common-white); } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .service-banner-title { font-size: 85px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .service-banner-title { font-size: 70px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .service-banner-title { font-size: 75px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .service-banner-title { font-size: 60px; } } @media (max-width: 575px) { .service-banner-title { font-size: 50px; } } @media (max-width:450px) { .service-banner-title { font-size: 35px; } } .thumb-layout .thumb-1 { display: inline-block; width: 21.5rem; height: 6.5rem; margin-left: 0.5rem; margin-bottom: -1rem; border-radius: 4rem; background-image: url(../img/gallery/gallery-19.jpg); background-size: cover; background-repeat: no-repeat; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .thumb-layout .thumb-1 { height: 6.5rem; } } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) { .thumb-layout .thumb-1 { width: 15.5rem; height: 5.5rem; } } @media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px) { .thumb-layout .thumb-1 { width: 10.5rem; height: 4.5rem; } } @media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px) { .thumb-layout .thumb-1 { display: none; } } .thumb-layout .thumb-2 { display: inline-block; width: 21.5rem; height: 6.5rem; margin-right: 0.5rem; margin-bottom: -1rem; border-radius: 4rem; background-image: url(../img/gallery/gallery-13.jpg); background-size: cover; background-repeat: no-repeat; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .thumb-layout .thumb-2 { height: 6.5rem; } } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) { .thumb-layout .thumb-2 { width: 15.5rem; height: 5.5rem; } } @media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px) { .thumb-layout .thumb-2 { width: 10.5rem; height: 4.5rem; } } @media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px) { .thumb-layout .thumb-2 { display: none; } } .service-banner-shapes .shape-1 { position: absolute; left: 0; top: 65px; z-index: -1; } @media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 992px) and (max-width: 1199px) { .service-banner-shapes .shape-1 { display: none; } } .service-banner-shapes .shape-2 { position: absolute; right: 0; bottom: 90px; z-index: -1; max-width: 420px; } @media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 991px) { .service-banner-shapes .shape-2 { display: none; } } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 1200px) and (max-width: 1399px) { .service-banner-shapes .shape-2 { max-width: 350px; } } .service-banner-award { position: absolute; right: 10px; top: -30px; bottom: 50px; z-index: -1; } @media only screen and (min-width: 1400px) and (max-width: 1600px) { .service-banner-award { right: 100px; } } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .service-banner-award { max-width: 170px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .service-banner-award { top: -60px; max-width: 165px; right: 50px; } } @media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 991px) { .service-banner-award { display: none; } } .service-banner-award .award-bg { width: 370px; height: 285px; background: var(--clr-common-white); border-radius: 1000px 1000px 0px 0px; transform: rotate(41.88deg); display: inline-block; position: absolute; bottom: -50px; left: -30%; z-index: -1; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 1200px) and (max-width: 1399px) { .service-banner-award .award-bg { width: 320px; height: 245px; bottom: -30px; } } .service-list-item { display: grid; align-items: center; grid-auto-columns: 1fr; gap: 16px 16px; grid-template-columns: 1fr 0.9fr 1fr; grid-template-rows: auto; border: 1px solid #D9D9D9; padding: 46px 50px; margin-bottom: 20px; -webkit-transition: all 0.5s ease-out 0s; -moz-transition: all 0.5s ease-out 0s; -ms-transition: all 0.5s ease-out 0s; -o-transition: all 0.5s ease-out 0s; transition: all 0.5s ease-out 0s; } @media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 991px) { .service-list-item { grid-template-columns: 1fr; } } .service-list-item:last-child { margin-bottom: 0; } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), (max-width: 575px) { .service-list-item { padding: 46px 25px; } } .service-list-item:hover { border-color: transparent; background: var(--clr-theme-2); } .service-list-item:hover .service-list-title { color: var(--clr-common-white); } .service-list-item:hover .service-list-description p { color: var(--clr-common-white); } .service-list-item:hover .service-list-btn { color: var(--clr-common-white); background: var(--clr-common-black); border-color: var(--clr-common-black); } .service-list-item:hover .btn-icon i { animation: iconltr 0.5s forwards; } .service-list-link { display: flex; flex-direction: column; align-items: flex-end; justify-content: center; } @media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 991px) { .service-list-link { align-items: flex-start; } } .service-list-description { padding-left: 25px; } @media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 1200px) and (max-width: 1399px) { .service-list-description { padding-left: 0px; } } .service-list-description p { margin-bottom: 0; } @media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 991px) { .service-list-description p { margin-bottom: 10px; } } .service-list-title { font-size: 30px; margin-bottom: 0; } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .service-list-title { font-size: 26px; } } @media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 991px) { .service-page-title-contenet { margin-bottom: 50px; } } .service-page-title-contenet h3 { font-size: 30px; color: var(--clr-common-white); margin-bottom: 35px; } @media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px) { .service-page-title-contenet h3 { font-size: 26px; } } .service-page-title-contenet p { margin-bottom: 0; font-size: 24px; line-height: 1.7; color: var(--clr-common-white); } @media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 1200px) and (max-width: 1399px) { .service-page-title-contenet p { font-size: 20px; } } .page-title-thumb { max-width: 642px; } .page-title-thumb img { width: 100%; aspect-ratio: 100/106; } .service-branding-heading { display: flex; align-items: center; gap: 20px; margin-bottom: 30px; } .service-branding-title { font-size: 30px; margin-bottom: 0; } @media (max-width:450px), (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px) { .service-branding-title { font-size: 26px; } } .service-branding-content { padding-bottom: 40px; border-bottom: 1px solid #D9D9D9; margin-bottom: 75px; } .service-branding-content > p { color: #4F4F4F; } .service-branding-thumb-1 { padding-left: 48px; } @media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 991px) { .service-branding-thumb-1 { padding-left: 0; margin-top: 50px; } } .service-branding-thumb-1 img { width: 100%; aspect-ratio: 100/124; } .service-branding-thumb-2 { position: absolute; right: -25%; max-width: 692px; } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) { .service-branding-thumb-2 { right: 0; max-width: 450px; bottom: 0; top: 50%; transform: translateY(-50%); } } @media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 991px) { .service-branding-thumb-2 { display: none; } } .service-branding-thumb-2 img { width: 100%; aspect-ratio: 100/115.3; } .service-branding-content:last-child { margin-bottom: 0; border-bottom: 0; padding-bottom: 0; } .service-branding-content:last-child.service-branding-content > p { margin-bottom: 0; } .service-main-wrapper { margin-left: -1px; } @media only screen and (min-width: 1400px) and (max-width: 1600px), only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 991px) { .service-main-wrapper { margin-left: 0; } } .topylo-fullscreen-tabs { position: relative; display: inline-block; width: 100%; vertical-align: top; height: calc(-100px + 100vh); } @media only screen and (min-width: 1601px), only screen and (min-width: 1400px) and (max-width: 1600px), only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) { .topylo-fullscreen-tabs { height: 100vh; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .topylo-fullscreen-tabs { height: auto; } } .topylo-fullscreen-tabs .service-e-inner { height: 100%; display: flex; } .topylo-fullscreen-tabs .service-m-tab { --topylo-tab-width: 204px; display: flex; height: 100%; transition: 0.6s cubic-bezier(0.38, -0.01, 0, 0.51); width: 204px; overflow: hidden; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 1400px) and (max-width: 1600px) { .topylo-fullscreen-tabs .service-m-tab { width: 120px; } } .topylo-fullscreen-tabs .service-m-tab:hover .service-m-title-vertical { color: #ffffff; } .topylo-fullscreen-tabs .service-m-tab:is(.active-tab):hover .service-m-title { color: #f00; } .topylo-fullscreen-tabs .service-m-tab-wrapper { position: relative; } .topylo-fullscreen-tabs div.service-m-title { display: flex; max-width: 204px; justify-content: flex-start; align-items: flex-end; border-left: 1px solid #414141; border-bottom: none; height: 100%; position: absolute; z-index: 50; cursor: pointer; transition: 0.3s ease-out; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 1400px) and (max-width: 1600px) { .topylo-fullscreen-tabs div.service-m-title { max-width: 120px; } } .topylo-fullscreen-tabs .service-m-title-vertical { text-transform: uppercase; color: #4F4F4F; font-size: 75px; line-height: 1.2em; display: flex; transform: rotate(270deg); transform-origin: left bottom; white-space: nowrap; align-items: center; position: relative; bottom: 100px; left: calc(100px + 0.52em); font-family: var(--tpl-ff-heading); font-weight: 700; } @media only screen and (min-width: 1601px) { .topylo-fullscreen-tabs .service-m-title-vertical { font-size: 65px; } } @media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 991px) { .topylo-fullscreen-tabs .service-m-title-vertical { transform: none; justify-content: space-between; width: 100%; height: 90px; padding-top: 12px; padding-bottom: 10px; padding-left: 25px; padding-right: 20px; bottom: 0; left: 0; padding-left: 45px; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 1400px) and (max-width: 1600px) { .topylo-fullscreen-tabs .service-m-title-vertical { left: calc(100px - 0.2em); font-size: 50px; } } @media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px) { .topylo-fullscreen-tabs .service-m-title-vertical { font-size: 45px; } } @media (max-width:450px) { .topylo-fullscreen-tabs .service-m-title-vertical { font-size: 30px; } } .topylo-fullscreen-tabs .service-content-3 { border-left: 1px solid #414141; position: relative; height: 100%; } .topylo-fullscreen-tabs .service-e-content-inner { height: 100%; } .topylo-fullscreen-tabs .service-e-content-inner .topylo-e-title { margin: 45px 0 24px; } .topylo-fullscreen-tabs .service-e-content-inner .topylo-e-text { color: var(--qode-main-color); } .topylo-fullscreen-tabs .service-e-content-inner .service-m-image a { width: 100%; height: 100%; position: relative; display: flex; justify-content: center; align-items: center; top: 0; left: 0; cursor: url(../img/shapes/cursor-round.svg) 32 32, auto; transition: cursor 0.3s; } .topylo-fullscreen-tabs .service-e-content-inner .service-m-image img { width: 100%; object-fit: cover; position: relative; display: block; height: 100%; } @media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 991px) { .topylo-fullscreen-tabs .service-e-inner { flex-direction: column; } .topylo-fullscreen-tabs .service-content-3 { padding-top: 1px; border-right: 1px solid #414141; } .topylo-fullscreen-tabs .service-m-tab, .topylo-fullscreen-tabs .service-m-tab-wrapper, .topylo-fullscreen-tabs div.service-m-title { width: 100%; max-width: 100%; height: 100%; max-height: 91px; min-height: 91px; } .topylo-fullscreen-tabs .service-m-tab:not(:last-child) { margin-left: 0; } .topylo-fullscreen-tabs .service-m-tab.active-tab { max-height: 100%; border-bottom: 1px solid #414141; } .topylo-fullscreen-tabs .service-m-tab-wrapper { max-height: 90px; } .topylo-fullscreen-tabs div.service-m-title { justify-content: flex-start; align-items: center; height: auto; border-right: 1px solid #414141; border-bottom: 1px solid #414141; } } .service-m-count { font-weight: 700; font-size: 18px; color: #4F4F4F; position: absolute; left: 46%; transform: translateX(-50%); bottom: 35px; } @media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 991px) { .service-m-count { left: 20px; top: 46%; transform: translateX(0%), -50%; } } .service-m-tab.active-tab .service-m-title-vertical { color: var(--clr-common-white); } .service-m-tab.active-tab .service-m-count { color: var(--clr-theme-2); } @media only screen and (min-width: 992px) and (max-width: 1199px) { .service-m-image { height: 100%; } } /*---------------------------------------- 33. project css ----------------------------------------*/ .project-area .noise-wrapper { position: absolute; opacity: 0.4; } .winning-projects p { font-size: 30px; font-family: var(--tpl-ff-heading); display: inline-block; position: relative; margin-bottom: 0; line-height: 30px; } .triangle { position: absolute; right: -400px; top: 1085px; } @media only screen and (min-width: 1400px) and (max-width: 1600px) { .triangle { right: -550px; } } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .triangle { right: -650px; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .triangle { display: none; } } .projects-wrapper { border: 1px solid #D9D9D9; } .projects-wrapper__border { border-top: 1px solid #D9D9D9; margin-bottom: 75px; } @media (max-width:450px) { .projects-wrapper > * { display: block !important; } } .projects-wrapper > * .project-box__thumb { border-left: 1px solid #D9D9D9; } @media (max-width:450px), (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px) { .projects-wrapper > * .project-box__thumb { border-left: 0; border-top: 1px solid #D9D9D9; } } .projects-wrapper > *:not(:first-child)::before { position: absolute; content: ""; width: 92%; height: 1px; background: #D9D9D9; top: 0; left: 0; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .projects-wrapper > *:not(:first-child)::before { width: 100%; } } .projects-wrapper > *:nth-child(2n) { flex-direction: row-reverse; } .projects-wrapper > *:nth-child(2n):before { right: 0; left: auto !important; } .projects-wrapper > *:nth-child(2n) .project-box__thumb { border-right: 1px solid #D9D9D9; border-left: 0; } .b-right { border-right: 1px solid #D9D9D9; height: 100%; position: relative; top: -200px; z-index: -1; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .b-right { top: -170px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .b-right { top: -150px; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .b-right { display: none; } } .rot-line { position: relative; } .rot-line::before { position: absolute; content: ""; height: 1px; width: 775px; background-color: #D9D9D9; bottom: -1380px; transform: rotate(128.21deg); left: -178px; z-index: -1; } @media only screen and (min-width: 1400px) and (max-width: 1600px) { .rot-line::before { width: 730px; bottom: -1330px; left: -140px; } } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .rot-line::before { width: 588px; bottom: -1440px; left: -112px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .rot-line::before { width: 490px; bottom: -1530px; left: -94px; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .rot-line::before { display: none; } } .projects-all-view-btn { text-align: center; overflow-x: clip; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .projects-all-view-btn { border: 1px solid #D9D9D9; border-top: 0; padding: 50px 0; } } .projects-all-view-btn .c-button { position: sticky; top: 0; } .project__thumb img { width: 100%; height: 100%; object-fit: cover; } .project__title .icon-box { transform: rotate(-45deg); display: inline-flex; justify-content: center; align-items: center; } .project-box { display: flex; position: relative; } @media (max-width:450px), (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px) { .project-box { display: inline; } } .project-box > * { flex: 1 1 0; } .project-box-content { padding: 24px; display: flex; flex-direction: column; justify-content: space-between; } .project-box-content .project__title { font-size: 24px; margin-bottom: 88px; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px), (max-width:450px) { .project-box-content .project__title { margin-bottom: 30px; } } .project-box-content .project__title a { display: flex; justify-content: space-between; gap: 0 20px; align-items: center; } .project-box-content .project__title a:hover { color: var(--clr-theme-2); } .project-box-content .project__title a:hover .icon-box i { animation: iconltr 0.5s forwards; } .project-box-content .awards-list-box { margin-bottom: 80px; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px), (max-width:450px) { .project-box-content .awards-list-box { margin-bottom: 30px; } } .project-box-content .awards-list-box p { font-size: 18px; font-family: var(--tpl-ff-heading); color: var(--clr-theme-1); font-weight: 400; line-height: 30px; margin-bottom: 10px; } .project-box-content .awards-list-box .awards-list ul li { list-style: none; color: #626262; } .project-box-content .awards-list-box .awards-list ul li:not(:last-child) { margin-bottom: 7px; } .project-box__thumb { padding: 24px; } .project-box__thumb img { width: 100%; height: 100%; } .project-box__btn .text-btn { color: var(--clr-theme-2); font-family: var(--tpl-ff-heading); } .project-box__btn .text-btn:hover { color: var(--clr-common-white); } .project-box .is-black a:hover { color: var(--clr-theme-1); } .projects-wrapper.is-white { border: 1px solid #414141; } .projects-wrapper.is-white .project-box-content .project__title { color: var(--clr-common-white); } .projects-wrapper.is-white .project-box-content p { color: #A5A5A5; } .projects-wrapper.is-white .project-box-content .awards-list-box .awards-list ul li { color: #A5A5A5; } .projects-wrapper.is-white > * .project-box__thumb { border-left: 1px solid #414141; } .projects-wrapper.is-white > :not(:first-child)::before { background: #414141; } .projects-wrapper.is-white > :nth-child(2n) .project-box__thumb { border-right: 1px solid #414141; border-left: 0; } .project-social-wrappper { display: grid; grid-auto-rows: auto; gap: 30px 0; position: sticky; margin-top: 0px; top: 30px; justify-content: center; } .social-round-content { display: flex; align-items: center; gap: 15px 20px; } @media (max-width:450px), (max-width: 575px) { .social-round-content { gap: 15px 15px; } } .social-round-link span { height: 30px; width: 30px; display: flex; align-items: center; justify-content: center; border: 1px solid #A5A5A5; color: #A5A5A5; border-radius: 50%; font-size: 20px; } .social-round-item { display: inline-flex; align-items: center; gap: 20px 86px; background: var(--clr-common-white); padding: 20px 30px; border-radius: 55px; justify-content: center; max-width: 340px; } @media (max-width:450px) { .social-round-item { flex-wrap: wrap; gap: 0px 44px; background: var(--clr-common-white); padding: 5px 10px; } } .social-round-item .project-social-title { font-size: 24px; margin-bottom: 0; } .social-round-item:hover .project-social-title { color: var(--clr-theme-2); } .social-round-item:hover .social-round-link span { border-color: var(--clr-theme-2); color: var(--clr-theme-2); } .social-round-item:hover .social-round-link span i { animation: iconltr 0.5s forwards; } .social-item-wrapper .social-round-item { background: transparent; border: 1px solid #D9D9D9; } .social-border-item { text-align: center; } .social-border-item .social-round-item { border: 1px solid #D9D9D9; background-color: transparent; } .project-works-inner-2 .row { --bs-gutter-x: 110px; } .project-area-2 { position: relative; background-color: transparent; overflow: hidden; } .project__text { font-size: 150px; font-weight: 500; color: var(--clr-theme-primary); text-transform: uppercase; padding: 50px 0 50px; opacity: 1; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .project__text { font-size: 125px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .project__text { font-size: 100px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .project__text { font-size: 80px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .project__text { font-size: 60px; } } @media (max-width: 575px) { .project__text { font-size: 34px; } } .project__sub-title { font-size: 16px; font-weight: 600; color: var(--clr-theme-primary); text-transform: uppercase; font-family: var(--tpl-ff-heading); margin-bottom: 0; line-height: 25px; padding-bottom: 10px; display: inline-block; position: relative; } .project__sub-title::after { position: absolute; content: ""; width: 111px; height: 1px; bottom: 0; left: 0px; background-image: linear-gradient(90deg, var(--clr-theme-2) 0%, transparent 100%); } .project__sub-title span { font-size: 16px; font-weight: 600; color: var(--clr-theme-2); font-family: var(--tpl-ff-heading); padding-left: 27px; } .project-box-3-content .project-box-3-title { font-size: 24px; font-family: var(--tpl-ff-heading); font-weight: 300; margin-bottom: 0; line-height: 1.25; margin-top: 20px; color: #000; } .project__list-1 { display: -ms-grid; display: grid; -ms-grid-columns: 1fr 30px 1fr; grid-template-columns: 1fr 1fr; gap: 0px 30px; position: relative; margin-bottom: 0; } @media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px) { .project__list-1 { grid-template-columns: 1fr; gap: 0; } } .project__item { padding-bottom: 30px; position: fixed; top: 0; left: 0; z-index: 999; scale: 0.5; opacity: 0; } @media (hover: none) { .project__item { opacity: 1 !important; transform: scale(1) !important; } } .project__item:nth-child(2n) { top: 50%; } @media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px) { .project__item:nth-child(2n) { top: 0%; } } .row_bottom { margin-top: 80vh; } @media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px) { .row_bottom { margin-top: -180px; } } @media (max-width: 575px), (max-width:450px), only screen and (min-width: 576px) and (max-width: 767px) { .project-padding { padding-top: 0; } } .project-box-3:hover .area-thumb-content { transform: scale(0.92); opacity: 1; visibility: visible; } .project-box-3-thumb { position: relative; } .project-box-3-thumb img { width: 100%; aspect-ratio: 100/110; } .project-box-3-thumb .area-thumb-content { position: absolute; width: 100%; height: 100%; top: 0; left: 0; -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; opacity: 0; visibility: hidden; } @media (hover: none) { .project-box-3-thumb .area-thumb-content { opacity: 1; visibility: visible; } } .project-box-3-thumb .area-thumb-content .area-btn { position: absolute; right: 60px; bottom: 60px; } .project-box-3-thumb .area-thumb-content .area-btn .icon-box-upward { width: 90px; height: 90px; color: var(--clr-common-white); font-size: 50px; } .project-box-3-thumb .area-thumb-content .area-btn .icon-box-upward:hover { color: var(--clr-theme-2); } .project-box-3-thumb .area-thumb-content .area-btn .icon-box-upward::before { border-color: #D9D9D9; } .project-box-3-content { padding: 20px 20px; position: absolute; bottom: 100px; background-color: var(--clr-common-white); margin: 20px 20px; opacity: 0; visibility: hidden; transition: 0.5s ease-in-out; } .project-box-3-content .tag { font-size: 16px; color: var(--clr-theme-2); background: var(--clr-common-white); padding: 2px 16px; display: inline-block; border-radius: 0; border: 1px solid #D9D9D9; } .project-box-3-content .tag:hover { color: var(--clr-common-white); background-color: var(--clr-theme-1); border-color: var(--clr-theme-1); } .project-box-3-content .project-box-3-title { font-size: 24px; font-family: var(--tpl-ff-heading); font-weight: 300; margin-bottom: 0; line-height: 1.25; margin-top: 20px; } @media (max-width: 575px) { .project-box-3-content .project-box-3-title { font-size: 20px; margin-top: 10px; } } .project-box-3-content .project-box-3-title:hover { color: var(--clr-common-white); } .project__item:hover .project-box-3-content { opacity: 1; visibility: visible; } .project-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 50px 104px; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .project-grid { gap: 50px 60px; } } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) { .project-grid { gap: 50px 60px; } } @media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px) { .project-grid { grid-template-columns: repeat(1, 1fr); } } .project__title-2.icon-box { transform: rotate(-45deg); display: inline-flex; justify-content: center; align-items: center; } .project__title-2.icon-box i { font-size: 24px; } .project-link { display: inline-flex; align-items: center; gap: 20px 100px; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .project-link { gap: 20px 30px; } } .project-link:hover { color: var(--clr-theme-2); } /*---------------------------------------- 39. team css ----------------------------------------*/ .team__big-video { text-align: center; padding-bottom: 395px; } .team__big-video-inner { background-position: center center; background-size: cover; height: 100%; width: 100%; overflow: hidden; margin: 0 auto; margin-top: -150px; } .team-area__overlay { position: absolute; width: 100%; height: 100%; top: 0; left: 0; background-size: cover; background-repeat: no-repeat; background-position: center; z-index: -1; } .team-area__overlay:after { position: absolute; content: ""; width: 100%; height: 100%; top: 0; left: 0; background: #F6F6F6; opacity: 0.7; } .team-area-2__bg { background: var(--clr-theme-1); z-index: -1; } .team-area-2__shape-1 { position: absolute; top: 144px; width: 572px; left: 43%; z-index: -1; } @media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 991px) { .team-area-2__shape-1 { display: none; } } @media (min-width: 992px) { .team__meta-description { max-width: 610px; margin-left: auto; } } .team__meta-description p { margin-bottom: 0; } .team__wrapper { border-top: 1px solid #D9D9D9; } .team__member { border-bottom: 1px solid #D9D9D9; position: relative; display: flex; align-items: center; justify-content: space-between; gap: 20px 30px; padding: 45px 0; padding-left: 50px; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .team__member { flex-direction: column; align-items: flex-start; } } .team__member:hover .member-designation { color: #000000; } .team__member:hover .member-name .first-name, .team__member:hover .member-name .last-name { color: var(--clr-theme-2); } .team__member:hover .member-image { transform: scale(2); } @media (max-width: 575px) { .team__member:hover .member-image { transform: scale(1); } } @media only screen and (min-width: 576px) and (max-width: 767px) { .team__member:hover .member-image { transform: scale(1.1); } } @media (max-width:450px) { .team__member:hover .member-image img { transform: scale(1.1); } } .team__member .member-designation { font-size: 16px; color: #656565; position: absolute; bottom: 0; left: 0; writing-mode: vertical-lr; transform: rotate(-180deg); height: 100%; text-align: center; } .team__member .member-name { display: flex; align-items: center; gap: 20px 10px; flex-wrap: wrap; } @media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px) { .team__member .member-name { margin-bottom: 20px; } } .team__member .member-name .first-name, .team__member .member-name .last-name { font-size: 26px; line-height: 1.08; text-transform: uppercase; font-weight: 400; font-family: "Archivo", sans-serif; color: #A5A5A5; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .team__member .member-name .first-name, .team__member .member-name .last-name { font-size: 22px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .team__member .member-name .first-name, .team__member .member-name .last-name { font-size: 16px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .team__member .member-name .first-name, .team__member .member-name .last-name { font-size: 14px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .team__member .member-name .first-name, .team__member .member-name .last-name { font-size: 36px; } } @media (max-width:450px) { .team__member .member-name .first-name, .team__member .member-name .last-name { font-size: 26px; } } @media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px) { .team__member .member-name .first-name, .team__member .member-name .last-name { order: 2; } } .team__member .member-image { width: 120px; height: 120px; border-radius: 300px; overflow: hidden; -webkit-transition: all 0.5s ease-out 0s; -moz-transition: all 0.5s ease-out 0s; -ms-transition: all 0.5s ease-out 0s; -o-transition: all 0.5s ease-out 0s; transition: all 0.5s ease-out 0s; } @media (max-width: 575px) { .team__member .member-image { width: 100px; height: 100px; order: -1; } } @media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px) { .team__member .member-image { z-index: 1; order: 1; width: 100%; height: auto; border-radius: 10px; margin-bottom: 20px; } } .team__member .member-image img { width: 100%; } .team__member .member-details-btn .c-button { width: 108px; height: 108px; } @media (max-width:450px) { .team__member .member-details-btn .c-button { width: 90px; height: 90px; } } .member-box-2 { position: relative; overflow: hidden; } .member-box-2:hover .member-thumb::after { opacity: 0; } .member-box-2:hover .member-thumb-overlay { transform: translateY(0); opacity: 1; } .member-box-2:hover .member-thumb img { transform: scale(1.1); } .member-box-2:hover .member-content { transform: translateY(0); } .member-box-2 .member-thumb { position: relative; } .member-box-2 .member-thumb::after { position: absolute; content: ""; width: 100%; height: 100%; background: linear-gradient(355.91deg, var(--clr-theme-1) 4.42%, rgba(17, 17, 17, 0.47) 97.75%); left: 0; right: 0; -webkit-transition: all 0.5s ease-out 0s; -moz-transition: all 0.5s ease-out 0s; -ms-transition: all 0.5s ease-out 0s; -o-transition: all 0.5s ease-out 0s; transition: all 0.5s ease-out 0s; } @media (hover: none) { .member-box-2 .member-thumb::after { opacity: 0; } } .member-box-2 .member-thumb img { width: 100%; aspect-ratio: 100/120; } @media (hover: none) { .member-box-2 .member-thumb img { transform: scale(1.1); } } .member-box-2 .member-thumb-overlay { position: absolute; width: 100%; height: 100%; z-index: 1; background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 0.01%, #FFFFFF 79.95%); top: 0; left: 0; transform: translateY(50%); opacity: 0; -webkit-transition: all 0.5s ease-out 0s; -moz-transition: all 0.5s ease-out 0s; -ms-transition: all 0.5s ease-out 0s; -o-transition: all 0.5s ease-out 0s; transition: all 0.5s ease-out 0s; } @media (hover: none) { .member-box-2 .member-thumb-overlay { transform: translateY(0); opacity: 1; } } .member-box-2 .member-content { position: absolute; bottom: 0; width: 100%; left: 0; padding: 30px; z-index: 2; transform: translateY(100%); -webkit-transition: all 0.5s ease-out 0s; -moz-transition: all 0.5s ease-out 0s; -ms-transition: all 0.5s ease-out 0s; -o-transition: all 0.5s ease-out 0s; transition: all 0.5s ease-out 0s; } @media (hover: none) { .member-box-2 .member-content { transform: translateY(0); } } .member-box-2 .member-name { font-size: 22px; font-weight: 500; margin-bottom: 5px; color: var(--clr-common-black); } .member-box-2 .member-designation { line-height: 1; } .team-slider { overflow: visible; } .team-content-title { max-width: 1266px; } @media only screen and (min-width: 1400px) and (max-width: 1600px) { .team-content-title { max-width: 100%; } } .team-slider .swiper-container { overflow: visible; } .team-slider-item .team-slider-thumb img { width: 100%; aspect-ratio: 100/54; } .swiper-slide:nth-child(2n) .team-slider-item .team-slider-thumb > img { width: 100%; aspect-ratio: 100/70; } .team-member-thumb { max-width: 122px; position: relative; border-radius: 50%; overflow: hidden; filter: drop-shadow(0px 4px 100px rgba(248, 122, 88, 0.25)); } .team-member-thumb::before { position: absolute; content: ""; height: 100%; width: 100%; background: #111; top: 0; left: 0; opacity: 0; visibility: hidden; } .team-member-thumb:hover:before { opacity: 1; visibility: visible; } .team-member-thumb:hover .team-member-info { opacity: 1; visibility: visible; } .team-member-line { display: inline-flex; gap: 40px 50px; flex-wrap: wrap; max-width: 1000px; justify-content: center; } @media (max-width:450px) { .team-member-line { gap: 30px 40px; } } .team-member-main { position: relative; text-align: center; } .team-member-bg { position: absolute; top: 0; height: 80%; width: 80%; left: 50%; top: 50%; transform: translate(-50%, -50%); background-repeat: no-repeat; background-position: center; background-size: contain; z-index: -1; } .team-member-info { position: absolute; width: 100%; height: 100%; display: flex; align-items: center; top: 0; justify-content: center; flex-direction: column; opacity: 0; visibility: hidden; } .team-member-info h5 { margin-bottom: 0; color: var(--clr-common-white); font-size: 20px; } .team-member-info h5:hover { color: var(--clr-theme-2); } .team-member-info span { color: var(--clr-common-white); } .team-item-2-grid { display: grid; grid-template-columns: repeat(3, 1fr); } @media only screen and (min-width: 768px) and (max-width: 991px) { .team-item-2-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px) { .team-item-2-grid { grid-template-columns: repeat(1, 1fr); border-color: transparent; } } .team-item-2 { position: relative; text-align: center; border-top: 1px solid #414141; } .team-item-2.active .team-thmb-2 { opacity: 1; visibility: visible; } .team-item-2.active .team-info-2 { top: 71%; } .team-info-2 { position: absolute; top: 50%; display: block; width: 100%; line-height: 1; transition: all 0.5s ease-out 0s; transform: translateY(-50%); padding: 20px; } @media (hover: none) { .team-info-2 { top: 71%; } } .team-thmb-2 { position: relative; opacity: 0; visibility: hidden; -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; } @media (max-width:450px), (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 991px) { .team-thmb-2 { opacity: 1; visibility: visible; } } .team-thmb-2::after { position: absolute; content: ""; height: 100%; width: 100%; background: linear-gradient(180deg, rgba(17, 17, 17, 0) 0%, var(--clr-theme-1) 100%); top: 0; left: 0; } .team-thmb-2 img { width: 100%; aspect-ratio: 100/92; } .team-info-2 h3 { color: var(--clr-common-white); font-family: var(--tpl-ff-body); font-size: 45px; font-weight: 400; margin-bottom: 20px; } @media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px), only screen and (min-width: 1200px) and (max-width: 1399px) { .team-info-2 h3 { font-size: 40px; } } @media only screen and (min-width: 992px) and (max-width: 1199px), (max-width:450px) { .team-info-2 h3 { font-size: 30px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .team-info-2 h3 { font-size: 36px; } } .team-info-2 h3 a:hover { color: var(--clr-theme-2); } .team-info-2 span { font-family: var(--tpl-ff-heading); color: var(--clr-common-white); text-transform: capitalize; font-size: 18px; } .team-section-3 { max-width: 1245px; margin: auto; } .team-thum-grid-top { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px 30px; position: relative; } @media (max-width: 575px) { .team-thum-grid-top { grid-template-columns: repeat(1, 1fr); place-items: center; } } .team-3-thum-common { max-width: 450px; } @media (max-width: 575px) { .team-3-thum-common { max-width: 100%; } } .team-3-thum-common img { width: 100%; aspect-ratio: 100/70; } .team-3-thum-common-2 { max-width: 450px; } @media (max-width: 575px) { .team-3-thum-common-2 { max-width: 100%; } } .team-3-thum-common-2 img { width: 100%; aspect-ratio: 100/54; } .team-thumb-3-1 { max-width: 300px; position: absolute; left: 0; bottom: -15px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .team-thumb-3-1 { left: -10%; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .team-thumb-3-1 { left: -120px; } } @media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px) { .team-thumb-3-1 { display: none; } } .team-thumb-3-1 img { width: 100%; aspect-ratio: 100/81; } .team-thumb-3-2 { right: -232px; position: absolute; top: 40px; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .team-thumb-3-2 { right: -350px; } } @media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 992px) and (max-width: 1199px) { .team-thumb-3-2 { display: none; } } .team-thumb-3-3 { margin-top: 100px; } @media (max-width: 575px) { .team-thumb-3-3 { margin-top: 0; } } .team-thumb-3-5 { margin-top: 170px; } @media (max-width: 575px) { .team-thumb-3-5 { margin-top: 0; } } .team-thumb-3-6 { margin-top: 76px; } @media (max-width: 575px) { .team-thumb-3-6 { margin-top: 0; } } .team-thumb-3-6 img { width: 100%; aspect-ratio: 100/70; } .team-thumb-3-8 { margin-top: 15px; max-width: 450px; } @media (max-width: 575px) { .team-thumb-3-8 { margin-top: 0px; max-width: 100%; } } .team-thumb-3-8 img { width: 100%; aspect-ratio: 100/54; } .team-middle .area-btn { text-align: center; margin-top: -58px; margin-bottom: 80px; } @media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 991px) { .team-middle .area-btn { margin: 30px 0; padding-bottom: 30px; } } .team-thumb-grid-bottom { display: grid; gap: 30px 30px; grid-template-columns: 16% 31% 30%; max-width: 1632px; margin: 0 auto; place-items: self-start; justify-content: space-between; } @media (max-width: 575px) { .team-thumb-grid-bottom { grid-template-columns: repeat(1, 1fr); place-items: center; } } .team-inner-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 50px 80px; } @media (max-width:450px), only screen and (min-width: 1200px) and (max-width: 1399px) { .team-inner-grid { gap: 50px 30px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .team-inner-grid { grid-template-columns: repeat(2, 1fr); gap: 50px 50px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .team-inner-grid { grid-template-columns: repeat(2, 1fr); gap: 50px 30px; } } @media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px) { .team-inner-grid { grid-template-columns: repeat(1, 1fr); gap: 50px 50px; } } .team-inner-item { height: 450px; overflow: hidden; position: relative; background-color: var(--clr-theme-2); -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; } @media (max-width:450px), (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px) { .team-inner-item { overflow: visible; padding: 30px 25px; } } .team-inner-item:hover { padding: 30px 30px; } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 768px) and (max-width: 991px) { .team-inner-item:hover { padding: 30px 25px; } } .team-inner-item:hover .team-inner-content { top: auto; bottom: 0; } .team-inner-area .noise { background: transparent url(../img/bg/noise-4.png) 0 0; } .team-inner-area .noise-wrapper { opacity: 0.8; } .team-inner-thumb { background-repeat: no-repeat; background-size: cover; background-position: top center; height: 100%; -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; } .team-inner-content { position: absolute; bottom: -30%; left: 0; width: 100%; padding: 25px 30px; -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; background-color: var(--clr-theme-2); } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 768px) and (max-width: 991px) { .team-inner-content { left: 25px; } } @media (max-width:450px), (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px) { .team-inner-content { left: 0px; bottom: 0px; padding: 15px 25px; } } .team-inner-content h3 { color: var(--clr-common-white); margin-bottom: 5px; } @media (max-width:450px), only screen and (min-width: 1200px) and (max-width: 1399px) { .team-inner-content h3 { font-size: 20px; } } .team-inner-content h3 a:hover, .team-inner-content h3 a:focus { color: var(--clr-theme-1); } .team-inner-content span { color: var(--clr-common-white); } .team-details-content { padding-left: 45px; } @media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 1200px) and (max-width: 1399px) { .team-details-content { padding-left: 0; } } .team-details-info { display: flex; justify-content: space-between; align-items: center; padding-bottom: 30px; border-bottom: 1px solid #D9D9D9; flex-wrap: wrap; gap: 15px 15px; } .team-details-content > p { padding-top: 30px; margin-bottom: 30px; } .team-autor-info p { margin-bottom: 16px; } .team-autor-info p span { font-weight: 600; font-family: var(--tpl-ff-heading); } .team-details-thumb img { width: 100%; aspect-ratio: 100/122; } .team-author-btn { position: absolute; right: 0; bottom: 75px; } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 768px) and (max-width: 991px) { .team-author-btn { bottom: 20px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .team-author-btn { left: 0; } } @media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px) { .team-author-btn { display: none; } } .team-author-btn .thumb-video-btn .circle-btn { width: 176px; height: 176px; } .skil-content { padding: 35px 30px 40px 30px; background: var(--clr-common-white); } .skil-area { background: #F2F2F2; } .team-skill--content .bd-skill--title__wrapper { margin-bottom: 10px; display: flex; justify-content: space-between; align-items: center; position: relative; } .team-skill--content .bd-skill--title__wrapper span { position: absolute; top: 0; font-size: 18px; font-weight: 500; color: var(--clr-theme-2); font-family: teko, sans-serif; line-height: 1; transform: translateX(-50%); } .team-skill--content .progress { background: #D9D9D9; border-radius: 0; height: 3px; } .team-skill--content .progress-bar { background-color: var(--clr-theme-2); } .team-skill--content .bd-skill--title { font-size: 18px; font-weight: 500; margin-bottom: 0; } @media (max-width:450px), (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 991px) { .team-details-layout { margin-top: 50px; } } /*---------------------------------------- 32. process css ----------------------------------------*/ .work-process-box { border: 1px solid #414141; padding: 50px 40px; position: relative; overflow: hidden; transition: 3s; } .work-process-box::before { position: absolute; content: ""; left: 0; top: 0; background: linear-gradient(180deg, var(--clr-theme-2) 0%, #0072ff 100%); transition: 0.3s; opacity: 0; visibility: hidden; z-index: -1; height: 0; width: 100%; } @media (hover: none) { .work-process-box { border-color: transparent; background: linear-gradient(180deg, var(--clr-theme-2) 0%, #0072ff 100%); } } .work-process-box:hover { border-color: transparent; } .work-process-box:hover::before { opacity: 1; visibility: visible; height: 100%; bottom: auto; } .work-process-box:hover p { color: var(--clr-common-white); } .work-process-box:hover .process__icon { background-color: #fff; } .work-process-box:hover .process__icon img { filter: brightness(2%); } .work-process-box:hover .process__number { background-color: var(--clr-common-black); color: var(--clr-common-white); } .work-process-box .process__icon { display: inline-block; background: rgba(255, 255, 255, 0.05); width: 99px; height: 99px; line-height: 99px; border-radius: 50%; transition: 0.3s; } @media (hover: none) { .work-process-box .process__icon { background-color: #fff; } .work-process-box .process__icon.process__icon img { filter: brightness(2%); } } .work-process-box .process__title { font-size: 30px; line-height: 1.5; color: var(--clr-common-white); margin-bottom: 35px; } @media (max-width:450px) { .work-process-box .process__title { font-size: 26px; } } .work-process-box .process__title-font { margin-bottom: 38px; } .work-process-box .process__title-font span { font-size: 150px; line-height: 0.86; -webkit-text-stroke-color: #A5A5A5; filter: drop-shadow(6px 0 0 #A5A5A5); } @media only screen and (min-width: 992px) and (max-width: 1199px), (max-width:450px) { .work-process-box .process__title-font span { font-size: 100px; } } .work-process-box .process__number { position: absolute; color: var(--clr-common-black); top: -5px; right: -5px; content: ""; width: 28px; height: 28px; line-height: 29px; border-radius: 50%; background: var(--clr-theme-2); transition: 0.3s; z-index: 1; } .work-process-box p { color: var(--clr-common-white); margin-bottom: 0; } /*---------------------------------------- 40. testimonial css ----------------------------------------*/ .author__thumb { overflow: hidden; } .author__thumb img { width: 100%; } .author__quote-box { padding: 30px 40px; display: flex; flex-direction: column; align-items: center; text-align: center; height: 100%; justify-content: center; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .author__quote-box { border-radius: 10px; padding: 30px 30px; } } .author__quote-box .quote-icon { width: 82px; margin-bottom: 35px; } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 575px) { .author__quote-box .quote-icon { width: 60px; } } .author__quote-box p { font-size: 24px; line-height: 1.34; color: #171717; font-weight: 400; margin-bottom: 30px; } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 768px) and (max-width: 991px), (max-width:450px) { .author__quote-box p { font-size: 20px; } } .author__quote-box .author__name { font-size: 20px; font-weight: 400; color: var(--clr-theme-2); line-height: 1; } .testimonial-slider { margin: -250px; padding: 250px; margin-left: calc(-100% - 30px - 0px); margin-right: calc(-100% - 30px - 0px); padding-left: 0; padding-right: 0; } .testimonial__box { background: var(--clr-common-white); box-shadow: 0px 0px 250px rgba(0, 0, 0, 0.1); border-radius: 50px; overflow: hidden; } .testimonial__nav { position: relative; z-index: 2; display: flex; gap: 15px; } .testimonial-2-area { background: #1F1F1F; } .testimonial-2-area__shape-1 { width: 70px; position: absolute; bottom: 108px; left: 6%; opacity: 0.6; animation: zoomInOut 3s infinite linear; } @media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px) { .testimonial-2-area__shape-1 { bottom: 50px; width: 50px; } } .testimonial-2__btn .c-button__text { color: var(--clr-common-white); } .testimonial-box-2 { border: 1px solid #414141; padding: 30px 30px; position: relative; } .testimonial-box-2 h4 { font-size: 30px; font-weight: 500; color: #D9D9D9; margin-bottom: 40px; display: none; } @media (max-width:450px) { .testimonial-box-2 h4 { font-size: 26px; } } .testimonial-box-2 p { font-size: 20px; color: #D9D9D9; line-height: 1.34; margin-bottom: 40px; } .testimonial-box-2 .author__thumb { border-radius: 0; margin-bottom: 40px; } .testimonial-box-2 .author__thumb img { width: 100%; aspect-ratio: 100/80; } .testimonial-box-2 .author__name { font-size: 20px; font-weight: 400; color: var(--clr-theme-2); line-height: 1; } .testimonial-box-2 .author__designation { font-size: 16px; font-weight: 400; color: #A5A5A5; line-height: 1; position: relative; margin-left: 40px; } .testimonial-box-2 .author__designation::before { position: absolute; content: ""; width: 20px; height: 1px; background: #525252; right: calc(100% + 10px); top: 50%; transform: translateY(-50%); } .testimonial-box-2 .quote-icon { width: 40px; margin-bottom: 30px; } .testimonial-box-2 .quote-icon svg * { fill: #A5A5A5; } .testimonial-wrapper-3 .testimonial-box-2 { background-color: var(--clr-theme-1); } .testimonial-round { position: absolute; top: 48px; right: 30px; max-width: 512px; z-index: -1; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 992px) and (max-width: 1199px) { .testimonial-round { right: 0; max-width: 300px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .testimonial-round { max-width: 200px; right: 0; } } @media (max-width:450px) { .testimonial-round { display: none; } } .ax-testimonial__box:hover .ax-testimonial__thumb::before { background: rgba(255, 255, 255, 0.95); } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .ax-testimonial__box:hover .ax-testimonial__thumb::before { background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.8) 100%); } } .ax-testimonial__box:hover .ax-testimonial__content { opacity: 1; visibility: visible; } .ax-testimonial__thumb img { width: 100%; height: auto; } .ax-testimonial__thumb::before { position: absolute; content: ""; width: 100%; height: 100%; background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgb(255, 255, 255) 100%); left: 0; right: 0; -webkit-transition: all 0.5s ease-out 0s; -moz-transition: all 0.5s ease-out 0s; -ms-transition: all 0.5s ease-out 0s; -o-transition: all 0.5s ease-out 0s; transition: all 0.5s ease-out 0s; } .ax-testimonial__content { position: absolute; bottom: 0; width: 100%; left: 0; padding: 30px 30px; z-index: 2; opacity: 0; visibility: hidden; -webkit-transition: all 0.5s ease-out 0s; -moz-transition: all 0.5s ease-out 0s; -ms-transition: all 0.5s ease-out 0s; -o-transition: all 0.5s ease-out 0s; transition: all 0.5s ease-out 0s; } @media only screen and (min-width: 576px) and (max-width: 767px) { .ax-testimonial__content { opacity: 1; visibility: visible; } } @media (max-width:450px), (max-width: 575px) { .ax-testimonial__content { opacity: 1; visibility: visible; padding: 15px 15px; } } .ax-testimonial__comments { font-size: 24px; line-height: 1.34; color: #171717; font-weight: 400; margin-bottom: 30px; } @media (max-width:450px) { .ax-testimonial__comments { font-size: 20px; line-height: 1.2; margin-bottom: 10px; } } .ax-testimonial__meta { border-top: 1px solid #414141; padding-top: 25px; } @media only screen and (min-width: 1400px) and (max-width: 1600px), only screen and (min-width: 1200px) and (max-width: 1399px) { .ax-testimonial__meta { padding-top: 15px; } } @media only screen and (min-width: 1400px) and (max-width: 1600px), only screen and (min-width: 1200px) and (max-width: 1399px) { .ax-testimonial__meta { padding-top: 15px; } } @media (max-width:450px) { .ax-testimonial__meta { padding-top: 10px; } } .quota-icon { margin-bottom: 100px; filter: brightness(1%); } /*---------------------------------------- 41. theme dark css ----------------------------------------*/ .theme-dark body { background: var(--clr-common-black); } .theme-dark:root { /** @color declaration */ --clr-common-white: #eeeeee; --clr-common-black: #222222; --clr-common-border: #c7c7c7; --clr-common-placeholder: #8a8787; --clr-theme-1: #222222; /* --clr-theme-2: #14cf93; */ --clr-theme-2: #29b4ff; --clr-theme-3: #7c7c7c; --clr-theme-primary: #eeeeee; --clr-background-primary: #222222; --clr-bg-1: #222222; /* --clr-bg-2: #14cf93; */ --clr-bg-2: #29b4ff; --clr-bg-3: #fffcf6; --clr-bg-4: #f2f2f2; --clr-bg-5: #F7F7F7; --clr-bg-6: #E8F5FF; } .theme-dark .border-btn { color: var(--clr-common-white); } .theme-dark .hero-area__bg::after { background: linear-gradient(105.54deg, #000 34.13%, rgba(0, 0, 0, 0.2) 100%); } .theme-dark .sticky { background: var(--clr-common-black); box-shadow: 0px 20px 30px rgba(255, 255, 255, 0.1); } .theme-dark .team-area__overlay:after { background: #000000; opacity: 0.8; } .theme-dark .team__member { border-color: #575757; } .theme-dark .team__wrapper { border-color: #575757; } .theme-dark .team__member:hover .member-designation { color: var(--clr-common-white); } .theme-dark .testimonial__box { background: #2f2f2f; } .theme-dark .testimonial__box p { color: var(--clr-common-white); } .theme-dark .blogpost-area__overlay::before { background: var(--clr-common-black); } .theme-dark .blog__list::before { border-color: #575757; } .theme-dark .blog__item-1 { border-color: #575757; } .theme-dark .blog__item-1 .tag { background: #303030; color: var(--clr-theme-primary); } .theme-dark .header-2__main.sticky .is-white.main-menu ul li a { color: var(--clr-common-white); } .theme-dark .header-2__main.sticky .is-white.main-menu ul li a::after { color: var(--clr-common-white); } .theme-dark .projects-wrapper { border-color: #575757; } .theme-dark .projects-wrapper > * .project-box__thumb { border-color: #575757; } .theme-dark .project-box-content .awards-list-box p { color: var(--clr-common-white); } .theme-dark .project-box-content .awards-list-box .awards-list ul li { color: #d1d1d1; } .theme-dark .projects-wrapper__border { border-color: #575757; } .theme-dark .projects-wrapper > :not(:first-child)::before { background: #575757; } .theme-dark .rot-line::before { background-color: #575757; } .theme-dark .b-right { border-color: #575757; } .theme-dark .portfolio__title-wrap { background-color: var(--clr-common-black); } .theme-dark .portfolio-slide-1 { background-color: var(--clr-common-black); } .theme-dark .portfolio-slide-2 { background-color: var(--clr-common-black); } .theme-dark .portfolio-slide-3 { background-color: var(--clr-common-black); } .theme-dark .portfolio-slide-3-thumb::after { background: linear-gradient(90deg, var(--clr-common-black) 10.97%, rgba(255, 255, 255, 0) 89.51%); } .theme-dark .capabilities__accordion .accordion-button { background: #2f2f2f; } .theme-dark .capabilities__accordion .accordion-body { background: #2f2f2f; } .theme-dark .blogpost-box-2 .tag { border-color: #575757; color: #EBEBEB; } .theme-dark .video__overlay { -webkit-box-shadow: 0px 0px 0px 3000px var(--clr-theme-1); -moz-box-shadow: 0px 0px 0px 3000px var(--clr-theme-1); box-shadow: 0px 0px 0px 3000px var(--clr-theme-1); } .theme-dark .blogpost-box-2 { border-color: #575757; } .theme-dark .footer-2__links ul li { color: #EBEBEB; } .theme-dark .footer-2-area__shape-1 { opacity: 0.1; } .theme-dark .hheader-latout-top { background: var(--clr-theme-1); } .theme-dark .hheader-latout-top-content-wrapper .meta-item__text p { color: var(--clr-common-white); } .theme-dark .hheader-latout-top-content-wrapper .meta-item__text p { color: var(--clr-common-white); } .theme-dark .header-3-main { background: var(--clr-common-white); } .theme-dark .mobile-menu-btn svg { -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; } .theme-dark .mobile-menu-btn svg * { fill: var(--clr-common-black); -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; } .theme-dark .mobile-menu-btn svg:hover * { fill: var(--clr-theme-2); } .theme-dark .mobile-menu-btn.is-white svg { -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; } .theme-dark .mobile-menu-btn.is-white svg * { fill: var(--clr-common-white); -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; } .theme-dark .mobile-menu-btn.is-white svg:hover * { fill: var(--clr-theme-2); } .theme-dark .header-3-main ul li a { color: var(--clr-common-black); } .theme-dark .header-3-main ul li.has-dropdown > a::after { color: var(--clr-common-black); } .theme-dark .contact-link__icon { filter: brightness(6%); } .theme-dark .contact-link__text p { color: var(--clr-common-black); } .theme-dark .hheader-latout-top-content-wrapper .meta-item__text p { color: var(--clr-common-white); } .theme-dark .hheader-latout-top-content-wrapper .meta-item__text p { color: var(--clr-common-white); } .theme-dark .hero-3-area__bg::before { background: var(--clr-common-black); } .theme-dark .hero-3__title { color: var(--clr-common-white); } .theme-dark .hero-3__text { color: var(--clr-common-white); } .theme-dark .hero-3__subtitle { color: var(--clr-common-white); } .theme-dark .hero-3__shape-3 { filter: brightness(6); } .theme-dark .service-box-3 { background: var(--clr-common-black); } .theme-dark .service-box-3__content .service__title { color: var(--clr-common-white); } .theme-dark .service-box-3__content .service__title .icon-box { color: var(--clr-common-white); } .theme-dark .service-box-3__content p { color: var(--clr-common-white); } .theme-dark .choose-area-content .thumb-wrapper::after { background: linear-gradient(180deg, #222222 0%, rgba(255, 255, 255, 0) 100%); } .theme-dark .choose-area-content p { color: var(--clr-common-white); } .theme-dark .choose-area-content .thumb-wrapper .line { background: #575757; } .theme-dark #accordionExample-st-2 .accordion-item { border-color: #575757 !important; } .theme-dark #accordionExample-st-2 .accordion-button { color: var(--clr-common-white); } .theme-dark .member-box-2 .member-designation { color: rgba(84, 84, 84, 0.7098039216); } .theme-dark .hr1 { border-color: #575757; } .theme-dark .blogpost-slider__nav .nav-btn { color: #707070; border-color: #707070; } .theme-dark .discuss-area__bg::after { background: var(--clr-theme-1); opacity: 0.9; } .theme-dark .discuss-area__bg::before { opacity: 0.2; } .theme-dark .cover-tab .nav-tabs .nav-link.active, .theme-dark .cover-tab .nav-tabs .nav-link:hover { background: #323232; color: var(--clr-common-white); } .theme-dark .cover-tab .nav-link { color: var(--clr-common-white); } .theme-dark .cover-card-content { background: #323232; } .theme-dark .cover-card-content h3 { color: var(--clr-common-white); } .theme-dark .cover-tab { border-color: #575757; } .theme-dark .cover-shape-1 { opacity: 0.3; } .theme-dark .cover-shape-2 { opacity: 0.3; } .theme-dark .hero-5-bg::before { background: linear-gradient(180deg, #000 0%, rgba(217, 217, 217, 0) 100%); } .theme-dark .hero-5__subtitle { color: var(--clr-common-white); } .theme-dark .work__content-hover h3 { background-color: var(--clr-common-black); color: var(--clr-common-white); } .theme-dark .has-border-top-bottom { border-color: #575757; } .theme-dark .has-border-bottom { border-color: #575757; } .theme-dark .for-black .counter__number { color: var(--clr-common-white); } .theme-dark .for-black .counter__text p { color: var(--clr-common-white); } .theme-dark .protfolio__content { background-color: var(--clr-common-black); } .theme-dark .protfolio__title { color: var(--clr-common-white); } .theme-dark .protfolio__content p { color: var(--clr-common-white); } .theme-dark .blog__item { background: #2a2a2a; border-color: #575757; } .theme-dark .blog__item:hover { box-shadow: 0px 4px 20px rgba(148, 148, 148, 0.3); border-color: transparent; } .theme-dark .blog__item-2-title { color: var(--clr-common-white); } .theme-dark .blog__para p { color: var(--clr-common-white); } .theme-dark .ax-testimonial__thumb::before { background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgb(28, 28, 28) 100%); } .theme-dark .ax-testimonial__box:hover .ax-testimonial__thumb::before { background: rgba(0, 0, 0, 0.9); } .theme-dark .ax-testimonial__comments { color: var(--clr-common-white); } .theme-dark .ax-testimonial__name { color: var(--clr-common-white); } .theme-dark .project-social-title { color: var(--clr-common-white); } .theme-dark .social-round-item { background: var(--clr-common-black); box-shadow: 1px 2px 3px rgba(186, 186, 186, 0.03), -2px -2px 7px rgba(186, 186, 186, 0.3); } .theme-dark .quota-icon { filter: brightness(100%); } /*---------------------------------------- 08. blog css ----------------------------------------*/ .blog__list { position: relative; margin-top: 55px; } @media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 991px) { .blog__list { margin-top: 30px; } } .blog__list::before { position: absolute; content: ""; border-top: 1px solid var(--clr-common-border); width: 100%; } .blog__item-1 { display: grid; grid-template-columns: 70% 30%; border-bottom: 1px solid var(--clr-common-border); padding: 55px 0 50px; position: relative; } @media only screen and (min-width: 576px) and (max-width: 767px) { .blog__item-1 { grid-template-columns: 1fr; } } @media (max-width: 575px) { .blog__item-1 { grid-template-columns: 1fr; padding: 40px 0; } } .blog__item-1:hover .blog__item-1-btn { opacity: 1; visibility: visible; } .blog__item-1:hover .blog-thumb-hover { opacity: 1; } .blog__item-1-title { font-size: 30px; line-height: 1.3; margin-top: 30px; margin-bottom: 30px; } @media only screen and (min-width: 768px) and (max-width: 991px) { .blog__item-1-title { font-size: 24px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .blog__item-1-title { font-size: 20px; } } @media screen and (max-width: 1399px) { .blog__item-1-title br { display: none; } } .blog__item-1-title a:hover { color: var(--clr-theme-2); } .blog__item-1 .meta-item { margin-top: 30px; } .blog__item-1 .meta-item p { font-size: 16px; color: #626262; line-height: 1; margin-bottom: 0; } .blog__item-1 .tag { font-size: 16px; color: var(--clr-theme-2); background: var(--clr-common-white); padding: 2px 16px; display: inline-block; border-radius: 30px; } .blog__item-1 .tag:hover { background: var(--clr-theme-2); color: var(--clr-common-white); } .blog__item-1 .blog__button .c-button { width: 108px; height: 108px; } @media only screen and (min-width: 576px) and (max-width: 767px) { .blog__button { justify-content: start !important; margin-top: 25px; } } @media (max-width:450px), (max-width: 575px) { .blog__button { justify-content: start !important; margin-top: 40px; } } .blog-thumb-hover { width: 395px; height: 395px; position: absolute; top: 0; inset-inline-start: 0; background-size: cover; background-repeat: no-repeat; background-position-x: 75%; opacity: 0; transition: opacity 0.3s, transform 0.7s cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 0.7s cubic-bezier(0.23, 1, 0.32, 1); margin: -200px 0 0 -150px; overflow: hidden; pointer-events: none; z-index: -1; } .blog-img-wrap { width: 20vw; position: absolute; top: 0; inset-inline-start: 0; overflow: hidden; pointer-events: none; visibility: hidden; padding-bottom: 25vw; } .blog-img { position: absolute; top: 0; inset-inline-start: 0; width: 100%; height: 100%; background-size: cover; } .blogpost-area__overlay { z-index: -2; } .blogpost-area__overlay::before { position: absolute; content: ""; width: 100%; height: 100%; top: 0; left: 0; background: #F4F4F4; z-index: -1; } .blogpost-area-3__bg { background: var(--clr-theme-1); z-index: -1; } .blogpost-wrapper { border-top: 1px solid #D9D9D9; } .blogpost-box-2 { padding: 40px 40px; z-index: 1; border: 1px solid #D9D9D9; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .blogpost-box-2 { padding: 20px 20px; } } .blogpost-box-2:hover .blog__thumb { opacity: 1; visibility: visible; } @media (max-width: 575px) { .blogpost-box-2:hover .blog__thumb { opacity: 0.3; } } .blogpost-box-2 .tag { height: 32px; border: 1px solid #4F4F4F; padding: 0 16px; color: #4F4F4F; display: inline-block; margin-bottom: 20px; } .blogpost-box-2 .tag:hover { border-color: var(--clr-theme-2); background: var(--clr-theme-2); color: var(--clr-common-white); } .blogpost-box-2 .blog__title { font-size: 30px; line-height: 1.5; margin-bottom: 30px; } @media only screen and (min-width: 992px) and (max-width: 1199px), (max-width: 575px) { .blogpost-box-2 .blog__title { font-size: 26px; } } .blogpost-box-2 .blog__title a:hover { color: var(--clr-theme-2); } .blogpost-box-2 .blog__thumb { position: absolute; right: 100px; width: 282px; transform: rotate(12deg) translateY(-50%); top: 50%; z-index: -1; opacity: 0; visibility: hidden; -webkit-transition: all 0.5s ease-out 0s; -moz-transition: all 0.5s ease-out 0s; -ms-transition: all 0.5s ease-out 0s; -o-transition: all 0.5s ease-out 0s; transition: all 0.5s ease-out 0s; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .blogpost-box-2 .blog__thumb { width: 200px; } } @media (max-width: 575px) { .blogpost-box-2 .blog__thumb { width: 100%; right: 0; height: 100%; transform: rotate(0deg) translateY(-50%); opacity: 0.3; visibility: visible; overflow: hidden; } } .blogpost-box-2 .blog__thumb img { width: 100%; } .blogpost-box-3 { border: 1px solid #414141; padding: 30px; } .blogpost-box-3:hover .blogpost-box-3__thumb img { transform: scale(1.1); } .blogpost-box-3:hover .tag { background-color: var(--clr-theme-2); color: var(--clr-common-white); border-color: transparent; } .blogpost-box-3 .tag { border: 1px solid #414141; border-radius: 30px; color: var(--clr-theme-2); padding: 6px 15px; } .blogpost-box-3__thumb { overflow: hidden; } .blogpost-box-3__content .blogpost-title { font-size: 24px; font-weight: 700; line-height: 1.45; color: var(--clr-common-white); margin-bottom: 0; } @media (max-width:450px) { .blogpost-box-3__content .blogpost-title { font-size: 20px; } } .blogpost-box-3__content .blogpost-title a:hover { color: var(--clr-theme-2); } .blogpost-box-3__thumb-content-wrapper { margin: 20px 0 30px; display: flex; flex-direction: column; gap: 35px; } .blogpost-box-3 .blogpost-date { font-size: 16px; color: #A4A4A4; display: inline-flex; align-items: center; gap: 10px; } .blogpost-box-3 .blogpost-date span { font-size: 30px; font-weight: 700; font-family: var(--tpl-ff-heading); } .blogpost-box-3__thumb img { width: 100%; aspect-ratio: 100/92; } .blogpost-slider .swiper-wrapper { align-items: flex-start; } .blogpost-slider .swiper-wrapper .swiper-slide:nth-child(2n) .blogpost-box-3__thumb-content-wrapper { flex-direction: column-reverse; } .blogpost-slider__nav { display: flex; gap: 14px; } .blogpost-slider__nav .nav-btn { color: #414141; border-color: #414141; background: transparent; } .blogpost-slider__nav .nav-btn:hover { color: var(--clr-common-white); background: var(--clr-theme-2); } .blogpost-slider__nav-2 { align-items: center; gap: 20px; } .postbox__thumb { padding: 20px 20px; border: 1px solid #D9D9D9; } .postbox__thumb img { width: 100%; aspect-ratio: 100/48.6; } .postbox__thumb-2 { width: 100%; } .postbox__thumb-2 img { width: 100%; aspect-ratio: 100/51; } .postbox__title { font-size: 38px; margin-bottom: 20px; } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 768px) and (max-width: 991px) { .postbox__title { font-size: 32px; } } @media only screen and (min-width: 992px) and (max-width: 1199px), (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px) { .postbox__title { font-size: 28px; } } @media (max-width:450px) { .postbox__title { font-size: 24px; } } .postbox__title a:hover { color: var(--clr-theme-2); } .postbox__text p { margin-bottom: 35px; } .postbox__meta { display: flex; align-items: center; gap: 30px; } .postbox__meta span { color: #626262; font-family: var(--tpl-ff-heading); position: relative; font-size: 14px; } .postbox__meta span a { font-size: 14px; color: var(--clr-theme-2); } .postbox__meta span:not(:first-child):before { position: absolute; content: ""; height: 5px; width: 5px; background: #626262; top: 50%; transform: translateY(-50%); left: -15px; border-radius: 50%; } .postbox__read-more .border-btn { font-family: var(--tpl-ff-heading); font-weight: 500; } .postbox__read-more .border-btn:hover { background-color: var(--clr-theme-2); color: var(--clr-common-white); border-color: var(--clr-theme-2); } .sidebar__wrapper { background: #F6F6F6; padding: 30px 30px; } .sidebar__widget-title { font-size: 24px; } .sidebar__search { position: relative; } .sidebar__search input { width: 100%; height: 60px; line-height: 60px; padding-left: 25px; padding-right: 80px; background-color: #FAFAFA; outline: 0; border: 0; box-shadow: 0px 1px 3px rgba(3, 4, 28, 0.06); font-size: 15px; } @media (max-width:450px) { .sidebar__search input { padding-right: 25px; } } .sidebar__search button { position: absolute; top: 0; right: 0; height: 100%; padding: 0 24px; color: var(--clr-common-white); background-color: var(--clr-theme-2); display: inline-flex; align-items: center; justify-content: center; } .sidebar__search button i { font-size: 20px; } @media (max-width:450px) { .sidebar__search button { position: static; height: 60px; margin-top: 20px; width: 100%; } } .rc__post-thumb { overflow: hidden; flex: 0 0 auto; border-radius: 50%; } @media (max-width:450px) { .rc__post-thumb { border-radius: 0; } } .rc__post { display: flex; align-items: center; gap: 15px 20px; padding-right: 45px; margin-bottom: 35px; } @media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 1200px) and (max-width: 1399px) { .rc__post { padding-right: 0; } } .rc__post:last-child { margin-bottom: 0; } .rc__post-thumb img { width: 90px; height: 90px; object-fit: cover; } .rc__post-title { font-size: 16px; font-weight: 600; margin-bottom: 6px; text-transform: capitalize; line-height: 1.5; } .rc__post-title a:hover { color: var(--clr-theme-2); } .rc__post:hover .rc__post-thumb img { -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1); } .sidebar__widget-content ul li { list-style: none; margin-bottom: 10px; } .sidebar__widget-content ul li:last-child { margin-bottom: 0; } .sidebar__widget-content ul li a { display: flex; justify-content: space-between; font-size: 16px; color: #4F4F4F; position: relative; background: #FAFAFA; padding: 16px 30px; font-family: var(--tpl-ff-heading); } @media (max-width:450px) { .sidebar__widget-content ul li a { padding: 16px 15px; } } .sidebar__widget-content ul li a:hover { background: var(--clr-theme-2); color: var(--clr-common-white); } .sidebar__tag a { display: inline-block; padding: 4px 13px; font-size: 15px; color: #4F4F4F; border: 1px solid #D9D9D9; margin-bottom: 10px; position: relative; z-index: 5; font-family: var(--tpl-ff-heading); } .sidebar__tag a:hover { background-color: var(--clr-theme-2); color: var(--clr-common-white); border-color: var(--clr-theme-2); } .sidber__adv-thumb { width: 100%; } .sidber__adv-thumb img { width: 100%; aspect-ratio: 100/117; } .postbox__item.is-box { background: #FAFAFA; padding: 30px 30px 25px; } .postbox__box-thumb { display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px 30px; max-width: 782px; } @media (max-width: 575px) { .postbox__box-thumb { grid-template-columns: repeat(1, 1fr); } } .postbox__box-thumb img { width: 100%; aspect-ratio: 100/78; } .postbox__quote-icon { margin-bottom: 25px; } .postbox__quote blockquote { margin-bottom: 0; } .postbox__quote blockquote p { font-weight: 400; font-size: 22px; text-transform: capitalize; color: #000000; margin-bottom: 0; } .postbox__share-love span { width: 54px; height: 54px; font-size: i; display: inline-flex; align-items: center; justify-content: center; border: 1px solid #d9d9d9; border-radius: 50%; } .postbox__share-wrapper { padding: 20px 0; border-top: 1px solid #D9D9D9; border-bottom: 1px solid #D9D9D9; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 20px 20px; } .postbox__social a { width: 30px; height: 30px; background: #A5A5A5; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; color: var(--clr-common-white); } .postbox__social a:hover { background-color: var(--clr-theme-2); } .postbox__navigation { display: grid; grid-template-columns: 250px auto 250px; } @media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px), only screen and (min-width: 992px) and (max-width: 1199px) { .postbox__navigation { grid-template-columns: auto; gap: 30px 30px; } } .postbox__navigation-icon { display: inline-flex; align-items: center; justify-content: center; } @media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px) { .postbox__navigation-icon { display: none; } } .postbox__more-link h5 { margin-bottom: 0; font-weight: 500; color: #A5A5A5; font-size: 16px; } .postbox__more-content h5 { font-weight: 500; text-transform: capitalize; line-height: 1.5; margin-bottom: 10px; font-size: 16px; } .postbox__more-content h5 a:hover { color: var(--clr-theme-2); } .postbox__more-link { display: flex; align-items: center; gap: 13px; } .postbox__more-link:hover h5 { color: var(--clr-theme-2); } .postbox__more-link:hover span svg * { fill: var(--clr-theme-2); } .postbox__more-link h5 { margin-bottom: 0; } .postbox__author { background: var(--clr-common-white); box-shadow: 0px 4px 45px rgba(0, 0, 0, 0.06); padding: 40px 40px 37px; display: flex; gap: 30px 20px; } @media only screen and (min-width: 576px) and (max-width: 767px) { .postbox__author { padding: 40px 30px 37px; } } @media (max-width: 575px) { .postbox__author { padding: 40px 30px 37px; flex-wrap: wrap; } } .postbox__author .author-meta-social { display: flex; justify-content: space-between; align-items: center; gap: 15px 15px; flex-wrap: wrap; margin-bottom: 20px; } .postbox__author .author-name { font-size: 16px; font-weight: 500; text-transform: capitalize; margin-bottom: 5px; } .postbox__author .author-designation { font-size: 14px; font-weight: 500; color: var(--clr-theme-2); } .postbox__author .author-text p { margin-bottom: 0; } .postbox__author-thumb { max-width: 90px; } .postbox__comment-input input, .postbox__comment-input textarea { height: 60px; width: 100%; font-size: 14px; border: 0; border-bottom: 1px solid #D9D9D9; outline: none; } .postbox__comment-input input::placeholder, .postbox__comment-input textarea::placeholder { color: #A5A5A5; } .postbox__comment-check { display: flex; align-items: center; gap: 15px; } .postbox__comment-title { margin-bottom: 40px; } .postbox__comment-input { position: relative; margin-bottom: 20px; } .postbox__comment-input textarea { height: 80px; resize: none; padding-top: 25px; padding-bottom: 25px; } .postbox__comment-check label { font-size: 14px; color: #A5A5A5; text-transform: capitalize; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 30px 20px; } .postbox__comment-check label a { color: var(--tp-common-black); font-weight: 600; padding-left: 4px; } .postbox__comment-check label a:hover { color: var(--clr-theme-1); } .postbox__comment-check label:hover { cursor: pointer; } .postbox__blog .blogpost-box-3 { border-color: #D9D9D9; } .postbox__blog .blogpost-box-3 .tag { border-color: #D9D9D9; } .postbox__blog .blogpost-box-3__content .blogpost-title { color: var(--clr-theme-1); } .postbox__blog .blogpost-box-3__content .blogpost-title a:hover { color: var(--clr-theme-2); } .blog__item { display: grid; grid-template-columns: auto auto; gap: 30px 78px; align-items: center; padding: 40px 40px; border: 2px solid rgba(66, 66, 66, 0.2509803922); background: var(--clr-common-white); transition: 0.3s ease-in-out; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .blog__item { grid-template-columns: auto; padding: 20px 20px; } } .blog__item:hover { box-shadow: 0px 4px 44px rgba(0, 0, 0, 0.1); border-color: transparent; } .blog__item-2-title { line-height: 1.3; margin-top: 30px; margin-bottom: 30px; } .blog__item .tag { font-size: 16px; color: var(--clr-common-white); background: var(--clr-common-black); padding: 2px 16px; display: inline-block; border-radius: 30px; } .blog__item .tag:hover { background: var(--clr-theme-2); color: var(--clr-common-white); } .blog__item .meta-date { color: #A4A4A4; font-family: "Archivo"; font-weight: 700; font-size: 30px; } .blog__item .meta-item p { margin-bottom: 0; } .blog__item .blog__para p { margin-bottom: 0; } /*---------------------------------------- 19. fact css ----------------------------------------*/ .fact-area { background: #1F1F1F; } .fact-area-title-wrapper { padding: 40px; border: 1px solid #414141; border-bottom: 0; } .fact-box-wrapper { border: 1px solid #414141; } .fact-box-wrapper > .row > div:not(:last-child) { border-right: 1px solid #414141; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .fact-box-wrapper > .row > div:not(:last-child) { border-right: 0; border-bottom: 1px solid #414141; } } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) { .fact-box-wrapper > .row > div:nth-child(2n) { border-right: 0; } } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) { .fact-box-wrapper > .row > div:not(:nth-last-child(-n+2)) { border-bottom: 1px solid #414141; } } .fact-box-content .fact__number { font-size: 30px; color: var(--clr-common-white); font-weight: 400; margin-bottom: 5px; } .fact-box-content .fact__number span span { font-size: 80px; color: var(--clr-theme-2); font-weight: 500; line-height: 1; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .fact-box-content .fact__number span span { font-size: 70px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .fact-box-content .fact__number span span { font-size: 70px; } } @media (max-width:450px) { .fact-box-content .fact__number span span { font-size: 60px; } } .fact-box-content .fact__number span { display: flex; align-items: center; gap: 24px; } .fact-box { padding: 80px 40px 70px; } .fact__text p { margin-bottom: 0; color: #A5A5A5; text-transform: uppercase; font-size: 16px; } .fact-box-wrapper-2 .fact-box-content .fact__number span { justify-content: center; color: var(--clr-theme-2); } .fact-box-wrapper-2 .fact-box-content .fact__number span span { color: var(--clr-theme-1); font-weight: 600; } .fact-box-wrapper-2 .fact__text p { color: #4f4f4f; font-family: var(--tpl-ff-heading); } .fact-box-wrapper-2 .fact-box { padding: 0px 40px 0px; text-align: center; position: relative; } .fact-box-wrapper-2 .fact-box:before { position: absolute; content: ""; height: 88%; width: 1px; background: #D9D9D9; right: 0; top: 18px; } .fact-box-wrapper-2 .row [class*=col-]:last-child .fact-box:before { display: none; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 992px) and (max-width: 1199px) { .fact-box-wrapper-2 .row [class*=col-]:nth-child(2n) .fact-box:before { display: none; } } @media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px) { .fact-box-wrapper-2 .row [class*=col-] .fact-box:before { display: none; } } /*---------------------------------------- 30. portfolio css ----------------------------------------*/ :root { counter-reset: current total; } .portfolio__items { padding: 0; margin: 0; opacity: 0; } .portfolio__items li { counter-increment: total; } .portfolio__num-count { color: var(--clr-theme-primary); font-size: 30px; margin-bottom: 10px; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .portfolio__num-count { display: none; } } .portfolio__num-count::before { counter-increment: current; content: counter(current) "/" counter(total); } .portfolio__area { overflow: hidden; direction: ltr; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .portfolio__area { background-color: var(--clr-bg-6); } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .portfolio__area { background-color: var(--clr-bg-6); } } .portfolio__area .wf_panel { width: 100%; height: 100%; will-change: transform; opacity: 1 !important; } .portfolio__wrapper { width: 400%; height: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: no-wrap; flex-wrap: no-wrap; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .portfolio__wrapper { width: 100%; height: auto; -ms-flex-wrap: wrap; flex-wrap: wrap; } } .protfolio-title-area { text-align: center; margin-bottom: 100px; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .protfolio-title-area { margin-bottom: 0; } } .protfolio-title { font-weight: 500; font-size: 100px; line-height: 1.08; text-transform: uppercase; color: var(--clr-theme-primary); } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .protfolio-title { font-size: 90px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .protfolio-title { font-size: 70px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .protfolio-title { font-size: 60px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .protfolio-title { font-size: 50px; } } @media (max-width:450px) { .protfolio-title { font-size: 36px; } } .portfolio__title-wrap { background-color: var(--clr-common-white); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .portfolio__title-wrap { background-color: var(--clr-bg-6); } } .portfolio__slide-area-1 { background-color: var(--clr-common-white); background-repeat: no-repeat; background-position: 200px calc(100% - 150px); } @media only screen and (min-width: 1601px) { .portfolio__slide-area-1 { background-position: 20px calc(100% - 230px); } } @media only screen and (min-width: 1400px) and (max-width: 1600px) { .portfolio__slide-area-1 { background-position: 20px calc(100% - 230px); } } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .portfolio__slide-area-1 { background-position: 20px calc(100% - 220px); } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .portfolio__slide-area-1 { background-position: 20px calc(100% - 100px); } } @media only screen and (min-width: 768px) and (max-width: 991px) { .portfolio__slide-area-1 { padding-bottom: 40px; background-position: 0 210px; background-size: 100px; } } @media only screen and (min-width: 992px) and (max-width: 1199px), (max-width: 575px) { .portfolio__slide-area-1 { background-size: 0; } } .portfolio-slide-1 { background: var(--clr-common-white); z-index: 1; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .portfolio-slide-1 { height: auto; } } .portfolio-slide-1-thumb { position: absolute; left: 0; width: 42%; height: 100%; top: 0; z-index: -1; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .portfolio-slide-1-thumb { display: none; } } .portfolio-slide-1-thumb::after { position: absolute; content: ""; width: 100%; height: 100%; top: 0; left: 0; background: var(--clr-common-white); opacity: 0.5; } @media only screen and (min-width: 1601px), only screen and (min-width: 1400px) and (max-width: 1600px), only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) { .portfolio-slide-1-thumb::after { display: none; } } .portfolio-slide-1-thumb img { width: 100%; height: 100%; object-fit: cover; } .portfolio-slide-1-content h2 { margin-bottom: 40px; } .portfolio-slide-1-content .area-btn { margin-top: 75px; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .portfolio-slide-1-content .area-btn { margin-bottom: 50px; } } .portfolio-slide-1-shape-1 { position: absolute; width: 88px; left: 91%; top: 424px; opacity: 0.5; animation: zoomInOut 3s infinite linear; } @media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 991px) { .portfolio-slide-1-shape-1 { display: none; } } .portfolio-slide-2 { height: 100vh; background: #CFDAE3; z-index: 1; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .portfolio-slide-2 { height: auto; } } .portfolio-slide-2-content h2 { margin-bottom: 50px; } .portfolio-slide-2-content h2 span { color: var(--clr-theme-2); font-weight: 400; } .portfolio-slide-2-content .awards-list { margin-bottom: 60px; } .portfolio-slide-2-content .awards-list ul { display: grid; grid-template-columns: repeat(5, 1fr); grid-gap: 5px; } .portfolio-slide-2-content .awards-list ul li { list-style: none; } .portfolio-slide-2-content .awards-list ul li img { width: 160px; } .portfolio-slide-2-paragraph { max-width: 690px; } .portfolio-slide-3 { height: 100vh; background: var(--clr-common-white); z-index: 1; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .portfolio-slide-3 { background: var(--clr-bg-6); } } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .portfolio-slide-3 { height: 100%; padding: 10px 0 30px; } } .portfolio-slide-3-content h2 { margin-bottom: 40px; } .portfolio-slide-3-content h2 span { font-weight: 400; } .portfolio-slide-3-content p { max-width: 720px; } .portfolio-slide-3-content .area-btn { display: flex; align-items: center; gap: 50px; margin-top: 60px; flex-wrap: wrap; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .portfolio-slide-3-content .area-btn { gap: 20px; margin-bottom: 60px; } } .portfolio-slide-3-content .area-btn .call-number { font-size: 24px; font-weight: 700; color: var(--clr-theme-primary); font-family: var(--tpl-ff-heading); } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .portfolio-slide-3-content .area-btn .call-number { font-size: 20px; } } .portfolio-slide-3-content .area-btn .call-number a:hover { color: var(--clr-theme-2); } .portfolio-slide-3-thumb { position: absolute; right: 0; width: 48%; height: 101%; top: 0; z-index: -1; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .portfolio-slide-3-thumb { display: none; } } .portfolio-slide-3-thumb:after { position: absolute; content: ""; width: 100%; height: 100%; top: 0; left: 0; background: linear-gradient(90deg, #eeeeee 10.97%, rgba(255, 255, 255, 0) 89.51%); } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .portfolio-slide-3-thumb:after { background: linear-gradient(90deg, var(--clr-bg-6) 10.97%, rgba(255, 255, 255, 0) 89.51%); } } .portfolio-slide-3-thumb img { width: 100%; height: 100%; object-fit: cover; } .case-meta-wrapper { padding: 37px 0px; display: flex; flex-wrap: wrap; align-items: center; background-color: var(--clr-common-white); box-shadow: 0px 4px 70px rgba(0, 0, 0, 0.15); max-width: 1300px; z-index: 5; gap: 15px 0; position: relative; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 768px) and (max-width: 991px) { .case-meta-wrapper { display: grid; grid-template-columns: repeat(2, 1fr); } } @media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px) { .case-meta-wrapper { display: grid; grid-template-columns: repeat(1, 1fr); } } .case-details-thumb { margin-top: -50px; margin-bottom: 30px; position: relative; } @media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 992px) and (max-width: 1199px) { .case-details-thumb { margin-top: 0; } } .case-meta-item { position: relative; padding-right: 40px; padding-left: 35px; } @media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px) { .case-meta-item { padding-right: 30px; padding-left: 30px; } } .case-meta-item:last-child:after { display: none; } .case-meta-item p { margin-bottom: 0; font-size: 18px; font-family: var(--tpl-ff-heading); display: inline-block; } .case-meta-item:after { position: absolute; content: ""; height: 62px; width: 1px; background: #D9D9D9; top: 50%; transform: translateY(-50%); right: 0; } @media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px) { .case-meta-item:after { display: none; } } .case-details-area { position: relative; margin-top: -160px; } .case-subtitle { font-size: 16px; } .case-subtitle span { padding-right: 5px; } .case-details-area .swiper-wrapper { align-items: end; } .case-details-area .swiper-slide:nth-child(n) { width: 25% !important; } @media only screen and (min-width: 768px) and (max-width: 991px) { .case-details-area .swiper-slide:nth-child(n) { width: 30% !important; } } @media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px) { .case-details-area .swiper-slide:nth-child(n) { width: inherit !important; } } .case-details-area .swiper-slide:nth-child(2n) { width: 14% !important; } @media only screen and (min-width: 768px) and (max-width: 991px) { .case-details-area .swiper-slide:nth-child(2n) { width: 30% !important; } } @media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px) { .case-details-area .swiper-slide:nth-child(2n) { width: inherit !important; } } .case-details-area .swiper-slide:nth-child(3n) { width: 20% !important; } @media only screen and (min-width: 768px) and (max-width: 991px) { .case-details-area .swiper-slide:nth-child(3n) { width: 30% !important; } } @media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px) { .case-details-area .swiper-slide:nth-child(3n) { width: inherit !important; } } .case-details-area .swiper-slide:nth-child(4n) { width: 20% !important; } @media only screen and (min-width: 768px) and (max-width: 991px) { .case-details-area .swiper-slide:nth-child(4n) { width: 30% !important; } } @media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px) { .case-details-area .swiper-slide:nth-child(4n) { width: inherit !important; } } .design-humb-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 75px 115px; margin-top: 100px; margin-bottom: 70px; } @media only screen and (min-width: 1400px) and (max-width: 1600px), only screen and (min-width: 1200px) and (max-width: 1399px) { .design-humb-grid { gap: 50px 50px; } } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) { .design-humb-grid { gap: 45px 45px; } } @media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px) { .design-humb-grid { gap: 30px 0px; grid-template-columns: repeat(1, 1fr); } } .design-thumb:nth-child(even) { margin-top: -100px; position: relative; } @media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px) { .design-thumb:nth-child(even) { margin-top: 0px; } } .design-thumb { position: relative; width: 100%; height: 500px; overflow: hidden; } .design-thumb img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; -webkit-transition: 0.5s; transition: 0.5s; background-size: cover; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px), (max-width:450px) { .design-thumb img { position: absolute; width: 100%; height: 100%; } } .design-thumb img:nth-child(1) { -webkit-transform: translatex(50%) scalex(2); transform: translatex(50%) scalex(2); opacity: 0; -webkit-filter: blur(10px); filter: blur(10px); } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px), (max-width:450px) { .design-thumb img:nth-child(1) { -webkit-transform: translatex(0%) scalex(1); transform: translatex(0%) scalex(1); opacity: 0; -webkit-filter: blur(0px); filter: blur(0px); } } .design-thumb:hover img:nth-child(2) { -webkit-transform: translatex(-50%) scalex(2); transform: translatex(-50%) scalex(2); opacity: 0; -webkit-filter: blur(10px); filter: blur(10px); } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px), (max-width:450px) { .design-thumb:hover img:nth-child(2) { -webkit-transform: translatex(0%) scalex(1); transform: translatex(0%) scalex(1); opacity: 0; -webkit-filter: blur(0px); filter: blur(0px); } } .design-thumb:hover img:nth-child(1) { -webkit-transform: translatex(0) scalex(1); transform: translatex(0) scalex(1); opacity: 1; -webkit-filter: blur(0); filter: blur(0); } .case-quote-area { background: var(--clr-bg-5); } .case-quote-icon { margin-bottom: 20px; } .case-quite-title { font-size: 40px; font-style: italic; font-weight: 500; text-transform: capitalize; margin-bottom: 50px; } @media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px) { .case-quite-title { font-size: 30px; } } @media (max-width:450px) { .case-quite-title { font-size: 28px; } } .case-quote-author .name { font-size: 20px; color: #14CF93; margin-right: 15px; } .case-quote-author .title { color: rgb(98, 98, 98); position: relative; padding-left: 35px; } .case-quote-author .title::after { position: absolute; content: ""; height: 1px; width: 20px; background-color: rgb(82, 82, 82); top: 50%; transform: translateY(-50%); left: 0; } .blockquote-wrapper blockquote { margin-bottom: 0; } .protfolio__wrap { display: grid; grid-template-columns: auto auto; gap: 0px 112px; margin-bottom: 100px; } @media only screen and (min-width: 1400px) and (max-width: 1600px) { .protfolio__wrap { gap: 0px 80px; } } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) { .protfolio__wrap { gap: 50px 80px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .protfolio__wrap { gap: 50px 50px; margin-bottom: 150px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .protfolio__wrap { grid-template-columns: auto; gap: 50px 112px; margin-bottom: 250px; } } .protfolio__item:nth-child(2), .protfolio__item:nth-child(4) { padding-top: 146px; } @media only screen and (min-width: 1400px) and (max-width: 1600px) { .protfolio__item:nth-child(2), .protfolio__item:nth-child(4) { padding-top: 80px; } } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .protfolio__item:nth-child(2), .protfolio__item:nth-child(4) { padding-top: 0px; } } .protfolio__item:hover .protfolio__content { opacity: 1; visibility: visible; } .protfolio__thumb { position: relative; } .protfolio__content { padding: 20px 20px; background-color: #f9f9f9; opacity: 0; visibility: hidden; transition: 0.5s all; display: block; position: absolute; bottom: 0; margin: 20px 20px; } .protfolio__content p { margin-bottom: 15px; } .protfolio-btn { position: absolute; bottom: 115px; left: 17%; max-width: 16%; } @media only screen and (min-width: 1400px) and (max-width: 1600px) { .protfolio-btn { bottom: 58px; } } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .protfolio-btn { bottom: 20px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .protfolio-btn { bottom: 0; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .protfolio-btn { bottom: 0; margin-bottom: 15px; } } @media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px) { .protfolio-btn { bottom: 20px; left: 15%; } } .protfolio-btn .c-button__text { color: var(--clr-common-white); } /*---------------------------------------- 11. capabilities css ----------------------------------------*/ .capabilities-area { background: #1F1F1F; } .capabilities-area__shape-1 { position: absolute; width: 430px; bottom: 65px; left: 67%; z-index: -1; animation: shape-rote 30s linear infinite; } .capabilities-area__shape-2 { position: absolute; width: 430px; bottom: 225px; left: 69%; z-index: -1; animation: shape-rote 95s linear infinite; } @keyframes shape-rote { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .capabilities__content p { color: #D9D9D9; max-width: 705px; } .capabilities__content .area-btn { margin-top: 75px; } .capabilities__content .area-btn .c-button__text { color: var(--clr-common-white); } .capabilities-list ul li { list-style: none; font-size: 16px; line-height: 35px; color: var(--clr-theme-primary); } /*---------------------------------------- 03. accordion css ----------------------------------------*/ .capabilities__accordion { position: relative; } .capabilities__accordion::before { position: absolute; content: ""; height: 100%; width: 100%; background: #414141; z-index: -1; transform: rotate(10.39deg); } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .capabilities__accordion::before { display: none; } } .capabilities__accordion:hover::before { transform: rotate(0deg); } .capabilities__accordion .accordion { border-radius: 0; } .capabilities__accordion .accordion-button { background: var(--clr-common-white); } .capabilities__accordion .accordion-body { background: var(--clr-common-white); } .capabilities__accordion .accordion-item:first-of-type .accordion-button { border-top-left-radius: 0; border-top-right-radius: 0; } .capabilities__accordion .accordion-item:last-of-type .accordion-button.collapsed { border-bottom-right-radius: 0; border-bottom-left-radius: 0; } .accordion-item:last-of-type .accordion-collapse { border-bottom-right-radius: 0; border-bottom-left-radius: 0; } .accordion-item { background: transparent; padding: 0px 0px; border: 0; border-radius: 0 !important; } .accordion-button { font-size: 30px; font-weight: 500; border: 0; padding: 40px 45px; text-align: start; color: var(--clr-theme-primary); background: transparent; font-family: var(--tpl-ff-heading); z-index: 2; } @media only screen and (min-width: 992px) and (max-width: 1199px), (max-width:450px) { .accordion-button { padding: 40px 30px; font-size: 26px; } } @media (max-width:450px) { .accordion-button { padding: 40px 20px; } } .accordion-button::after { width: auto; height: auto; content: "\f067"; font-family: var(--tpl-ff-fontawesome); color: #A5A5A5; font-size: 16px; transform: rotate(90deg); background-image: none; font-weight: 500; font-size: 18px; } .accordion-button:focus { border: 0; box-shadow: none; } .accordion-button:not(.collapsed) { background: none; color: var(--clr-theme-2); box-shadow: none; pointer-events: none; } .accordion-button:not(.collapsed)::after { color: var(--clr-theme-2); transform: rotate(360deg); background-image: none; content: "\f068"; } .accordion-button:not(.collapsed) .area-bg { opacity: 1; } .accordion-button .area-bg { position: absolute; content: ""; width: 100%; height: 100%; top: 0; left: 0; z-index: -1; opacity: 0; overflow: hidden; -webkit-transition: all 0.5s ease-out 0s; -moz-transition: all 0.5s ease-out 0s; -ms-transition: all 0.5s ease-out 0s; -o-transition: all 0.5s ease-out 0s; transition: all 0.5s ease-out 0s; } .accordion-button .area-bg:before { position: absolute; content: ""; width: 100%; height: 100%; background: #000000; opacity: 0.6; top: 0; left: 0; } .accordion-button .area-bg img { width: 100%; height: 100%; object-fit: cover; } .accordion-body { background: transparent; padding: 40px 45px; margin-bottom: 0px; margin-top: 0px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .accordion-body { padding: 40px 30px; } } @media (max-width:450px) { .accordion-body { padding: 40px 20px; } } .accordion-collapse { border: 0; } #accordionExample-st-1 .accordion-item:not(:first-child) .accordion-button::before { position: absolute; content: ""; width: calc(100% - 90px); height: 1px; background: #D9D9D9; top: 0; left: 0; right: 0; margin: auto; } @media only screen and (min-width: 992px) and (max-width: 1199px) { #accordionExample-st-1 .accordion-item:not(:first-child) .accordion-button::before { width: calc(100% - 60px); } } @media (max-width:450px) { #accordionExample-st-1 .accordion-item:not(:first-child) .accordion-button::before { width: calc(100% - 40px); } } #accordionExample-st-1 .accordion-item:not(:first-child) .accordion-button:not(.collapsed)::before { opacity: 0; } #accordionExample-st-2 .accordion-item { border: 1px solid #D9D9D9 !important; } #accordionExample-st-2 .accordion-button { font-size: 24px; font-weight: 500; font-family: var(--tpl-ff-heading); color: #191919; padding: 34px 30px; } @media (max-width:450px) { #accordionExample-st-2 .accordion-button { padding: 24px 20px; font-size: 20px; } } #accordionExample-st-2 .accordion-button::after { color: #191919; } #accordionExample-st-2 .accordion-button::not(.collapsed) { color: #191919; } #accordionExample-st-2 .accordion-body { padding: 30px 30px; padding-top: 0; } @media (max-width:450px) { #accordionExample-st-2 .accordion-body { padding: 30px 20px; padding-top: 0; } } .why-accordion .accordion-item { background: var(--clr-background-primary); } .why-accordion .accordion-button { background: transparent; } .why-accordion #accordionExample-st-2 .accordion-item { border: 1px solid #414141 !important; } .why-accordion #accordionExample-st-2 .accordion-button { color: var(--clr-common-white); } .why-accordion #accordionExample-st-2 .accordion-button::after { color: var(--clr-common-white); } .why-accordion .accordion-body { background: transparent; } .why-accordion .choose-accordion-content p { color: var(--clr-common-white); } .accordion__heading { display: grid; grid-template-columns: 0.66fr 1fr 1fr; width: 100%; align-items: center; gap: 10px 10px; padding-right: 10px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .accordion__heading { grid-template-columns: 1fr 1fr 1fr; } } @media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 991px) { .accordion__heading { grid-template-columns: auto; } } .accordion__title { color: var(--clr-theme-1); font-size: 26px; margin-bottom: 0; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .accordion__title { font-size: 24px; } } @media (max-width:450px) { .accordion__title { font-size: 20px; } } .accordion__title-2 { margin-bottom: 15px; } .accordion__tab .nav-tabs { border-bottom: 0; display: flex; gap: 20px; justify-content: end; margin-bottom: 50px; } @media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 991px) { .accordion__tab .nav-tabs { justify-content: start; } } .accordion__tab .nav-tabs .nav-link { border: 0; border-radius: 6px; background: var(--clr-bg-pink); margin-bottom: 0; padding: 0 25px; font-size: 16px; color: var(--clr-text-1); font-weight: var(--bd-fw-medium); background-color: var(--clr-bg-pink) !important; height: 45px; text-transform: capitalize; } .accordion__tab .nav-tabs .nav-link.active { color: var(--clr-common-white); background: var(--clr-gradient-1); border-radius: 6px; } .accordion-header { cursor: pointer; } .accordion-border { position: relative; } .accordion-border:after { position: absolute; content: ""; height: 82px; width: 1px; background: var(--clr-border-3); inset-inline-start: -50px; top: 50%; transform: translateY(-50%); } @media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px) { .accordion-border:after { display: none; } } .case__accordion .accordion-item { border: 1px solid #D9D9D9; margin-bottom: 30px; } .case__accordion .accordion-item:last-child { margin-bottom: 0; } .case__accordion .accordion-body { padding: 0 50px; } @media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 1200px) and (max-width: 1399px) { .case__accordion .accordion-body { padding: 0px 30px; } } @media (max-width:450px) { .case__accordion .accordion-body { padding: 0px 20px; } } .case__accordion .accordion-button { padding: 22px 50px; border-bottom: 1px aliceblue; } @media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 1200px) and (max-width: 1399px) { .case__accordion .accordion-button { padding: 22px 30px; } } @media (max-width:450px) { .case__accordion .accordion-button { padding: 22px 20px; } } .case__accordion .accordion-button:not(.collapsed) { box-shadow: none; } .case__accordion .accordion-button:focus { box-shadow: none; } .case__accordion .accordion-button::after { margin-inline-end: 0; content: "+"; font-family: var(--tpl-ff-fontawesome); font-size: 20px; color: var(--clr-common-heading); background-image: none; background-size: 0; width: auto; height: auto; font-weight: 500; } .case__accordion .accordion-button:not(.collapsed)::after { content: "\f068"; font-family: var(--tpl-ff-fontawesome); font-size: 18px; color: var(--clr-theme-1); background-image: none; transform: rotate(180deg); } .accordion__inner { display: grid; grid-template-columns: 0.35fr 1fr; padding-top: 30px; border-top: 1px solid #D9D9D9; padding-bottom: 30px; gap: 30px 30px; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .accordion__inner { grid-template-columns: 0.47fr 1fr; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .accordion__inner { grid-template-columns: 0.62fr 1fr; } } @media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 991px) { .accordion__inner { grid-template-columns: auto; } } .accordion__description { margin-bottom: 0; font-family: var(--tpl-ff-body); font-size: 16px; font-weight: normal; color: var(--clr-theme-1); line-height: 28px; } .accordion__content-title { margin-bottom: 20px; } .accordion__content > p { margin-bottom: 0; } .accordion__thumb img { width: 100%; } .faq-area.is-gray { background: var(--clr-bg-4); } /*---------------------------------------- 42. video css ----------------------------------------*/ .video-area:hover #circle-play-b { opacity: 1 !important; } .video-area__video { position: absolute; width: 100%; height: 100%; top: 0; left: 0; } .video-area__shape-1 { width: 72px; top: 94px; left: 74px; position: absolute; z-index: 1; opacity: 0.5; animation: zoomInOut 3s infinite linear; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .video-area__shape-1 { top: 25px; width: 50px; } } .video-area__shape-2 { width: 72px; bottom: 56px; right: 94px; position: absolute; z-index: 1; opacity: 0.5; animation: zoomInOut 3s infinite linear; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .video-area__shape-2 { width: 50px; } } .video__overlay { position: absolute; content: ""; width: 500px; height: calc(100% - 300px); top: 50%; left: 50%; transform: translate(-50%, -50%); -webkit-box-shadow: 0px 0px 0px 3000px rgb(255, 255, 255); -moz-box-shadow: 0px 0px 0px 3000px rgb(255, 255, 255); box-shadow: 0px 0px 0px 3000px rgb(255, 255, 255); -webkit-transition: all 0.5s ease-out 0s; -moz-transition: all 0.5s ease-out 0s; -ms-transition: all 0.5s ease-out 0s; -o-transition: all 0.5s ease-out 0s; transition: all 0.5s ease-out 0s; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .video__overlay { height: calc(100% - 0px); } } .video__overlay.closed { width: 100%; height: 100%; box-shadow: none; } .video__content { padding: 50px 120px; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .video__content { padding: 50px 60px; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .video__content { padding: 50px 50px; } } @media only screen and (min-width: 992px) and (max-width: 1199px), (max-width:450px) { .video__content { padding: 50px 0px; } } .video__content .area-btn-text { display: flex; flex-direction: column; gap: 24px; -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; } .video__content .area-btn-text span { font-size: 100px; line-height: 1.08; color: var(--clr-theme-primary); font-weight: 800; font-family: var(--tpl-ff-heading); text-transform: uppercase; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .video__content .area-btn-text span { font-size: 95px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .video__content .area-btn-text span { font-size: 80px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .video__content .area-btn-text span { font-size: 60px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .video__content .area-btn-text span { font-size: 50px; color: var(--clr-common-white); } } @media (max-width:450px) { .video__content .area-btn-text span { font-size: 40px; } } .video__content .area-btn-text span:nth-child(2) { margin-left: auto; } .circle-btn-blur { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); -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; } .circle-btn-blur .icon-box { width: 74px; height: 74px; background: rgba(0, 0, 0, 0.5); backdrop-filter: blur(2.5px); display: inline-flex; justify-content: center; align-items: center; border-radius: 50%; position: relative; cursor: pointer; border: 3px solid var(--clr-theme-2); } @media (max-width:450px) { .circle-btn-blur .icon-box { width: 60px; height: 60px; } } .circle-btn-blur .icon-box::before { position: absolute; content: ""; width: 100%; height: 100%; } .circle-btn-blur .icon-box svg { width: 16px; height: 16px; } /*---------------------------------------- 16. cta css ----------------------------------------*/ .cta-area { background: #1F1F1F; } .cta-wrapper { border-top: 1px solid #414141; } .cta-content .area-btn .circle-btn { width: 194px; height: 194px; background: var(--clr-theme-2); color: var(--clr-common-white); font-size: 64px; } .cta-content .area-btn .circle-btn:hover { background: var(--clr-theme-2); color: var(--clr-common-black); } .cta-content .stroke-text { font-size: 140px; text-transform: uppercase; font-weight: 700; line-height: 0.7; -webkit-background-clip: text; -webkit-text-fill-color: transparent; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: #2F2F2F; background-size: cover; background-repeat: no-repeat; background-position: center; opacity: 0.25; margin-bottom: -50px; display: block; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .cta-content .stroke-text { font-size: 120px; margin-bottom: -45px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .cta-content .stroke-text { font-size: 100px; margin-bottom: -40px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .cta-content .stroke-text { font-size: 90px; margin-bottom: -30px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .cta-content .stroke-text { font-size: 70px; margin-bottom: -30px; } } @media (max-width:450px) { .cta-content .stroke-text { font-size: 58px; margin-bottom: -20px; } } .cta-animation { display: flex; } .cta-container--2 { display: flex; align-items: center; padding-left: 77vw; margin-top: -100px; } .cta-text { white-space: nowrap; margin-top: -32px; } .cta-letter-container { display: inline-block; overflow: hidden; } .cta-letter { display: inline-block; text-transform: uppercase; font-size: 15.63em; line-height: 1; color: #111; transform: translateX(-100%); } .ax-cta__title { max-width: 850px; margin: 0 auto; } .ax-cta__title span { background: linear-gradient(91.02deg, #14CF93 38.92%, #0094FF 66.4%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; text-fill-color: transparent; } /*---------------------------------------- 12. choose area css ----------------------------------------*/ .choose-area-content { position: relative; z-index: 1; } .choose-area-content p { color: #171717; max-width: 942px; } .choose-area-content .thumb-wrapper { margin-top: -145px; margin-left: 120px; margin-right: 120px; position: relative; z-index: -1; } @media only screen and (min-width: 768px) and (max-width: 991px) { .choose-area-content .thumb-wrapper { margin-top: -65px; margin-left: 80px; margin-right: 80px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .choose-area-content .thumb-wrapper { margin-left: 0; margin-right: 0; margin-top: 240px; } } .choose-area-content .thumb-wrapper::after { position: absolute; content: ""; width: 100%; height: 100%; top: 0; left: 0; background: linear-gradient(180deg, #FFFFFF 0%, rgba(255, 255, 255, 0) 100%); } .choose-area-content .thumb-wrapper > img { aspect-ratio: 100/43; width: 100%; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .choose-area-content .thumb-wrapper > img { aspect-ratio: 100/56; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .choose-area-content .thumb-wrapper > img { aspect-ratio: 100/71; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .choose-area-content .thumb-wrapper > img { aspect-ratio: 100/60; } } .choose-area-content .thumb-wrapper .line { position: absolute; height: 350px; width: 1px; background: #D9D9D9; left: -60px; bottom: -39px; } @media only screen and (min-width: 768px) and (max-width: 991px) { .choose-area-content .thumb-wrapper .line { height: 250px; left: -40px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .choose-area-content .thumb-wrapper .line { display: none; } } .choose-area-content .thumb-wrapper .area__btn { position: absolute; right: 0; transform: translate(50%, -40%); z-index: 1; top: 50%; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .choose-area-content .thumb-wrapper .area__btn { transform: translate(-50%, -100%); top: 0; left: 50%; right: auto; } } .choose-area-content .thumb-wrapper .area__btn .circle-btn { width: 176px; height: 176px; } .choose-area-content .thumb-wrapper .area__btn .circle-btn .icon-box { width: 108px; height: 108px; background-color: var(--clr-common-white); } .choose-area-content .thumb-wrapper .area__btn .circle-btn .icon-box svg { width: 15px; } .choose-accordion-content p { margin-bottom: 0; font-size: 16px; color: #191919; } /*---------------------------------------- 22. gallery css ----------------------------------------*/ .gallery-slider { overflow: visible; } .gallery-slider .swiper-wrapper { align-items: flex-end; } .gallery-slider .swiper-wrapper .swiper-slide:nth-child(2n) .gallery-box-thumb img { aspect-ratio: 100/55; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .gallery-slider .swiper-wrapper .swiper-slide:nth-child(2n) .gallery-box-thumb img { aspect-ratio: 100/70; } } .gallery-box { position: relative; overflow: hidden; } .gallery-box:hover .gallery-box-thumb .area-overlay { opacity: 0.5; visibility: visible; } .gallery-box:hover .gallery-box-content .area-btn { opacity: 1; visibility: visible; } .gallery-box-thumb img { width: 100%; aspect-ratio: 100/70; } .gallery-box-thumb .area-overlay { position: absolute; width: 100%; height: 100%; top: 0; left: 0; background: var(--clr-theme-2); opacity: 0; visibility: hidden; -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; } .gallery-box-content { position: absolute; width: 100%; height: 100%; top: 0; left: 0; display: flex; justify-content: center; align-items: center; } .gallery-box-content .area-btn { opacity: 0; visibility: hidden; -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; } .gallery-box-content .area-btn i { color: var(--clr-common-white); font-size: 30px; } /*---------------------------------------- 18. cursor css ----------------------------------------*/ .discuss-area__bg { background-size: cover; background-repeat: no-repeat; background-position: center; z-index: -1; } .discuss-area__bg::before { position: absolute; content: ""; width: 100%; height: 100%; background-image: url(../img/bg/grid-line.png); opacity: 0.5; } .discuss-area__bg:after { position: absolute; content: ""; width: 100%; height: 100%; top: 0; left: 0; background: var(--clr-common-white); opacity: 0.9; } .discuss-area__bg .noise-wrapper { opacity: 0.3; z-index: 1; } .discuss-area__bg .noise-wrapper .noise { animation: none; } .discuss__content-wrapper { padding: 0 70px; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .discuss__content-wrapper { padding: 0 0px; } } .discuss__btn.circle-btn { width: 216px; height: 216px; } .discuss__btn.circle-btn:hover .icon-box i { color: var(--clr-theme-2); } .discuss__btn.circle-btn .icon-box { width: 160px; height: 160px; position: relative; overflow: hidden; font-size: 53px; color: var(--clr-common-white); z-index: 1; } .discuss__btn.circle-btn .icon-box:after { position: absolute; content: ""; width: 100%; height: 100%; top: 0; left: 0; background: #000000; opacity: 0.6; z-index: -1; } .discuss__btn.circle-btn .icon-box i { animation: none; font-size: 53px; } /*---------------------------------------- 20. features css ----------------------------------------*/ .features-thumb-grid { margin-top: 55px; display: grid; grid-template-columns: repeat(auto-fit, minmax(385px, 1fr)); gap: 50px 93px; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .features-thumb-grid { grid-template-columns: repeat(auto-fit, minmax(308px, 1fr)); place-items: center; } } @media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 992px) and (max-width: 1199px) { .features-thumb-grid { gap: 50px 50px; } } @media (max-width:450px) { .features-thumb-grid { gap: 50px 50px; grid-template-columns: auto; } } .features-round-cercle { position: absolute; right: -60px; top: 45px; z-index: -1; opacity: 0.5; } @media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px) { .features-round-cercle { max-width: 200px; } } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) { .features-round-cercle { max-width: 250px; } } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .features-round-cercle { max-width: 290px; } } @media (max-width: 575px) { .features-round-cercle { display: none; } } .features-description p { max-width: 395px; margin-top: 115px; margin-bottom: 75px; } @media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 991px) { .features-description p { margin-bottom: 60px; margin-top: 0; } } .features-content .c-button { margin-left: -60px; } @media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 992px) and (max-width: 1199px) { .features-content .c-button { margin-left: 0px; } } .features-thumb-1 img { width: 100%; aspect-ratio: 100/137; margin-top: -260px; } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) { .features-thumb-1 img { margin-top: -150px; } } @media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 991px) { .features-thumb-1 img { margin-top: 0px; } } .features-thumb-2 img { width: 100%; aspect-ratio: 100/75; } .features-thumb-3 img { width: 100%; aspect-ratio: 100/124; } .features-thumb-2 { padding-right: 20px; margin-left: -22px; } @media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 992px) and (max-width: 1199px) { .features-thumb-2 { padding-right: 0px; margin-left: 0px; } } .features-thumb-1 img { width: 100%; aspect-ratio: 100/137; margin-top: -157px; } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) { .features-thumb-1 img { margin-top: -150px; } } @media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 991px) { .features-thumb-1 img { margin-top: 0px; } } .features-thumb-2 img { width: 100%; aspect-ratio: 100/75; margin-top: 46px; } .features-thumb-3 img { width: 100%; aspect-ratio: 100/124; margin-top: 46px; } .features-thumb-2 { padding-right: 20px; margin-left: -22px; } @media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 992px) and (max-width: 1199px) { .features-thumb-2 { padding-right: 0px; margin-left: 0px; } } .project__thumb-1 { height: 691px; position: relative; overflow: hidden; width: 100%; } @media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px) { .project__thumb-1 { height: 344px; } } .project__thumb-1 img { width: 100%; object-fit: cover; position: absolute; margin-left: auto; margin-right: auto; bottom: 0; height: 100%; } @media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px) { .project__thumb-1 img { height: 100%; width: 100%; object-fit: cover; } } .project__thumb-2 { height: 691px; position: relative; overflow: hidden; width: 100%; } @media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px) { .project__thumb-2 { height: 344px; } } .project__thumb-2 img { width: 100%; object-fit: cover; position: absolute; height: 100%; margin-left: auto; margin-right: auto; bottom: 0; } @media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px) { .project__thumb-2 img { height: 100%; width: 100%; object-fit: cover; } } .project__thumb-3 { height: 465px; position: relative; overflow: hidden; width: 100%; } @media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px) { .project__thumb-3 { height: 250px; } } .project__thumb-3 img { width: 100%; object-fit: cover; position: absolute; height: 120%; margin-left: auto; margin-right: auto; bottom: 0; height: 100%; } @media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px) { .project__thumb-3 img { height: 100%; width: 100%; object-fit: cover; } } .project__thumb-4 { height: 465px; position: relative; overflow: hidden; width: 100%; } @media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px) { .project__thumb-4 { height: 250px; } } .project__thumb-4 img { width: 100%; object-fit: cover; position: absolute; height: 120%; margin-left: auto; margin-right: auto; bottom: 0; } @media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px) { .project__thumb-4 img { height: 100%; width: 100%; object-fit: cover; } } .featured-works-area__shape-1 { position: absolute; z-index: -1; width: 130px; right: -33; top: 100px; animation: translateY 10s linear infinite alternate; } @media only screen and (min-width: 768px) and (max-width: 991px) { .featured-works-area__shape-1 { top: -60px; right: -65px; transform: rotate(15deg); } } @media only screen and (min-width: 576px) and (max-width: 767px) { .featured-works-area__shape-1 { top: -60px; right: 25px; transform: rotate(15deg); } } @media (max-width: 575px) { .featured-works-area__shape-1 { top: -75px; } } @media only screen and (min-width: 1601px), only screen and (min-width: 1400px) and (max-width: 1600px) { .featured-works-inner > .row { --bs-gutter-x: 130px; } } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .featured-works-inner > .row { --bs-gutter-x: 90px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .featured-works-inner > .row { --bs-gutter-x: 60px; } } @media only screen and (min-width: 768px) { .featured-works-inner > .row > div:nth-child(1) { margin-top: 150px; } } .featured__work-view-btn { position: absolute; bottom: 40px; right: 40px; } .featured__work-view-btn .text-btn { color: var(--clr-common-white); font-weight: 400; } .featured__work-view-btn .text-btn:hover { color: var(--clr-theme-2); } @media (max-width:450px), (max-width: 575px) { .featured__work-view-btn .text-btn:hover { color: var(--clr-common-white); } } .featured__work-view-btn .text-btn .btn-text span { font-weight: 600; } .featured__work-content { padding-top: 34px; } .featured__work-content .project__title { font-size: 24px; line-height: 30px; margin-bottom: 20px; } .featured__work-content .project__title a:hover { color: var(--clr-theme-2); } .featured__work-content .project__tags { margin-bottom: 0; } .featured__works-grid { display: -ms-grid; display: grid; grid-auto-columns: 1fr; grid-column-gap: 125px; grid-row-gap: 85px; -ms-grid-columns: 1fr 1fr; grid-template-columns: 1fr 1fr; -ms-grid-rows: auto auto; grid-template-rows: auto auto; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 1400px) and (max-width: 1600px) { .featured__works-grid { grid-column-gap: 60px; } } @media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 991px) { .featured__works-grid { -ms-grid-columns: 1fr; grid-template-columns: 1fr; } } .featured__works-all-view-btn { padding-top: 220px; margin-top: -140px; } @media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 991px) { .featured__works-all-view-btn { padding-top: 40px; margin-top: 30px; } } .featured-work:nth-child(2n) { margin-top: 60px; } @media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 991px) { .featured-work:nth-child(2n) { margin-top: 0px; } } /*---------------------------------------- 26. idea css ----------------------------------------*/ .idea__area { background: #1F1F1F; } .idea-shape { position: absolute; bottom: 0; z-index: -1; left: 0; } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) { .idea-shape { left: 220px; max-width: 410px; } } @media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 991px) { .idea-shape { max-width: 250px; } } .idea-thumb { position: relative; top: 0px; padding-bottom: 40px; padding-left: 34px; padding-right: 18px; } .idea-thumb img { width: 100%; } @media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 991px) { .idea-thumb { padding-left: 0; padding-right: 0; } } .round-cercle-2 { position: absolute; top: 43px; right: -137px; z-index: -1; width: 422.24px; height: 378px; } @media only screen and (min-width: 1400px) and (max-width: 1600px), only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 768px) and (max-width: 991px) { .round-cercle-2 { max-width: 350px; } } @media only screen and (min-width: 576px) and (max-width: 767px), only screen and (min-width: 992px) and (max-width: 1199px) { .round-cercle-2 { max-width: 300px; } } @media (max-width: 575px) { .round-cercle-2 { display: none; } } /*---------------------------------------- 15. cover css ----------------------------------------*/ .cover-tab { padding-right: 65px; border-right: 1px solid #D9D9D9; margin-right: 36px; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 1200px) and (max-width: 1399px) { .cover-tab { padding-right: 30px; margin-right: 0; } } @media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 991px) { .cover-tab { padding-right: 0; margin-right: 0; border-right: 0; border-bottom: 1px solid #D9D9D9; padding-bottom: 35px; } } .cover-tab .nav-tabs { border-bottom: 0; } .cover-tab .nav-tabs .nav-link { margin-bottom: 0; border-radius: 0; border: 0; width: 100%; text-align: start; } .cover-tab .nav-tabs .nav-link:hover, .cover-tab .nav-tabs .nav-link:focus { border-color: transparent; } .cover-tab .nav-tabs .nav-link.active, .cover-tab .nav-tabs .nav-link:hover { border: 0; color: #111111; background: var(--clr-common-white); box-shadow: 0px 4px 44px rgba(0, 0, 0, 0.07); } .cover-tab .nav-tabs .nav-link.active i, .cover-tab .nav-tabs .nav-link:hover i { opacity: 1; visibility: visible; } .cover-tab .nav-tabs .nav-link i { float: right; color: var(--clr-theme-2); opacity: 0; visibility: hidden; } .cover-tab .nav { flex-direction: column; justify-content: start; gap: 12px 0; } .cover-tab .nav-link { font-size: 24px; font-weight: 500; font-family: var(--tpl-ff-heading); color: var(--clr-theme-1); padding: 0 30px; height: 66px; transition: 0.3s all; } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), (max-width:450px) { .cover-tab .nav-link { font-size: 20px; padding: 0 25px; } } .cover-tab .nav-link:hover { border: 0; color: #111111; background: var(--clr-common-white); box-shadow: 0px 4px 44px rgba(0, 0, 0, 0.07); } .cover-wrapper { margin-left: 30px; position: relative; z-index: 5; } @media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 992px) and (max-width: 1199px) { .cover-wrapper { margin-left: 0; } } .cover-thumb { max-width: 585px; filter: drop-shadow(0px 4px 44px rgba(0, 0, 0, 0.07)); } @media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 991px) { .cover-thumb { max-width: 100%; } } .cover-thumb img { width: 100%; aspect-ratio: 100/106; } .cover-card-content { padding: 30px 30px; background: #F2F2F2; max-width: 570px; } .cover-card-content h3 { font-size: 30px; margin-bottom: 15px; } @media (max-width: 575px) { .cover-card-content h3 { font-size: 26px; } } .cover-card-content p { margin-bottom: 25px; } .cover-card-inner { position: absolute; right: 0; top: 290px; } @media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 991px) { .cover-card-inner { bottom: 0; top: auto; } } @media (max-width:450px) { .cover-card-inner { position: static; } } .cover-shape-1 { left: -400px; content: ""; position: absolute; top: 80px; overflow: hidden; } @media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 1400px) and (max-width: 1600px) { .cover-shape-1 { display: none; } } .cover-shape-2 { right: -40px; content: ""; position: absolute; top: 100px; width: 20%; overflow: hidden; } @media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 1200px) and (max-width: 1399px) { .cover-shape-2 { display: none; } } /*---------------------------------------- 43. work css ----------------------------------------*/ .work-mt { margin-top: 215px; } @media only screen and (min-width: 1400px) and (max-width: 1600px) { .work-mt { margin-top: 140px; } } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .work-mt { margin-top: 80px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .work-mt { margin-top: 60px; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px) { .work-mt { margin-top: 50px; } } @media (max-width: 575px) { .work-mt { margin-top: 40px; } } .work-mb { margin-bottom: 60px; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .work-mb { margin-bottom: 0; } } .work__thumb-5 { position: relative; z-index: -1; } .work__item-5 { display: grid; grid-template-columns: auto auto auto; gap: 75px 75px; position: relative; } @media only screen and (min-width: 1400px) and (max-width: 1600px) { .work__item-5 { gap: 45px 45px; } } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .work__item-5 { grid-template-columns: auto auto; gap: 40px 40px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .work__item-5 { grid-template-columns: auto auto; gap: 30px 30px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .work__item-5 { grid-template-columns: auto auto; gap: 25px 25px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .work__item-5 { grid-template-columns: 1fr; gap: 15px 0px; } } .work__item-list { position: relative; } .work__item-list:nth-child(3n+2) { transform: translateY(135px); z-index: 1; } @media only screen and (min-width: 1400px) and (max-width: 1600px) { .work__item-list:nth-child(3n+2) { transform: translateY(100px); } } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .work__item-list:nth-child(3n+2) { transform: translateY(0px); } } .work__item-list:nth-child(3n+3) { transform: translateY(295px); } @media only screen and (min-width: 1400px) and (max-width: 1600px) { .work__item-list:nth-child(3n+3) { transform: translateY(200px); } } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .work__item-list:nth-child(3n+3) { transform: translateY(0px); } } .work__item-list:hover .work__content-hover { opacity: 1; } .work__content-hover { width: 480px; position: absolute; top: 0; bottom: 0; opacity: 0; transition: opacity 0.3s, transform 0.7s cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 0.7s cubic-bezier(0.23, 1, 0.32, 1); overflow: hidden; pointer-events: none; z-index: 9; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .work__content-hover { width: 480px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .work__content-hover { width: 440px; height: 145px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .work__content-hover { width: 300px; } } .work__content-hover h3 { background-color: var(--clr-common-white); padding: 29px 31px; font-size: 22px; color: var(--clr-theme-1); } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .work__content-hover h3 { padding: 20px 20px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .work__content-hover h3 { font-size: 20px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .work__content-hover h3 { padding: 18px 18px; font-size: 18px; } } .work-text-wrap { width: 20vw; position: absolute; top: 0; bottom: 0; inset-inline-start: 0; overflow: hidden; pointer-events: none; visibility: hidden; padding-bottom: 25vw; } .work-text { position: absolute; top: 0; inset-inline-start: 0; width: 100%; height: 100%; background-size: cover; } .work-shapes .work-spiral { position: absolute; right: 0; top: 0; } .work-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 75px 75px; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .work-grid { gap: 60px 60px; } } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px) { .work-grid { gap: 30px 30px; grid-template-columns: repeat(2, 1fr); } } @media (max-width: 575px), sm { .work-grid { gap: 30px 30px; grid-template-columns: repeat(1, 1fr); } } .bd-hover-title { margin-bottom: 0; font-size: 24px; line-height: 1.5; } @media (max-width:450px), (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px) { .bd-hover-title { font-size: 20px; } } .work-item .bd-hover-wrapper { background-color: var(--clr-common-white); display: inline-block; padding: 22px 25px; } @media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px) { .work-item .bd-hover-wrapper { max-width: 350px; } } @media (max-width:450px) { .work-item .bd-hover-wrapper { padding: 20px 20px; } } .work-btn .c-button { border-radius: 100rem; width: 160px; height: 160px; border: 0; background: transparent; position: relative; overflow: hidden; transform: scale(1); transition: 1s ease; display: inline-flex; justify-content: center; align-items: center; } .work-shapes .spiral { position: absolute; top: 0; left: 0; } @media (max-width:450px) { .bd-img-reveal-wrapper { width: 280px; } } /*---------------------------------------- 25. History css ----------------------------------------*/ .history-thumb-1 { position: absolute; top: 180px; left: -321px; transform: rotate(-15deg); max-width: 690px; } @media only screen and (min-width: 1400px) and (max-width: 1600px) { .history-thumb-1 { max-width: 590px; } } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .history-thumb-1 { left: -385px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .history-thumb-1 { max-width: 530px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .history-thumb-1 { max-width: 450px; } } .history-thumb-1 img { width: 100%; aspect-ratio: 100/115; } .history-thumb-2 { position: absolute; right: -165px; bottom: 150px; max-width: 690px; transform: rotate(15deg); } @media only screen and (min-width: 1400px) and (max-width: 1600px) { .history-thumb-2 { max-width: 590px; } } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .history-thumb-2 { right: -255px; max-width: 550px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .history-thumb-2 { max-width: 460px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .history-thumb-2 { max-width: 330px; } } .history-thumb-2 img { width: 100%; aspect-ratio: 100/115; } .history-thumb-3 { max-width: 277px; margin-left: 9%; } @media only screen and (min-width: 1400px) and (max-width: 1600px) { .history-thumb-3 { margin-left: 20%; } } @media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px) { .history-thumb-3 { max-width: 100%; margin: 0; } } .history-content { margin-bottom: 257px; } @media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 992px) and (max-width: 1199px) { .history-content { margin-bottom: 80px; } } .history-content > h5 { font-size: 18px; font-weight: 500; color: var(--clr-common-black); display: block; margin-bottom: 20px; } .history-content h2 { font-size: 120px; line-height: 1; font-weight: 800; position: relative; margin-bottom: 20px; display: inline-block; } @media only screen and (min-width: 768px) and (max-width: 991px) { .history-content h2 { font-size: 90px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .history-content h2 { font-size: 70px; } } @media (max-width:450px) { .history-content h2 { font-size: 60px; } } .history-content h2::before { position: absolute; content: ""; height: 6px; background: #F2994A; width: 100%; bottom: 22px; z-index: -1; } .history-content h2 .highlight { color: var(--clr-theme-2); } @media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px) { .history-thumbs { display: none; } } /*---------------------------------------- 38. strategy css ----------------------------------------*/ .strategy-area { overflow: hidden; direction: ltr; } .strategy-area .wf_panel { width: 100%; height: 100%; will-change: transform; opacity: 1 !important; } .strategy-wrapper { width: 400%; height: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: no-wrap; flex-wrap: no-wrap; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .strategy-wrapper { width: 100%; height: auto; -ms-flex-wrap: wrap; flex-wrap: wrap; } } :root { counter-reset: current total; } .strategy__items { padding: 0; margin: 0; opacity: 0; } .strategy__items li { counter-increment: total; } .strategy__num-count { color: var(--clr-common-white); font-size: 24px; margin-bottom: 20px; } .strategy__num-count::before { counter-increment: current; content: counter(current) "/" counter(total); } .strategy__num-count.is-black { color: var(--clr-common-black); } .strategy-content-2 { padding-left: 85px; } @media only screen and (min-width: 1400px) and (max-width: 1600px), only screen and (min-width: 1200px) and (max-width: 1399px) { .strategy-content-2 { padding-left: 30px; } } @media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 992px) and (max-width: 1199px) { .strategy-content-2 { padding-left: 0px; } } @media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 991px) { .strategy-thu