@charset "UTF-8"; /*----------------------------------------------------------------------------------- Theme Name: Bizzpro - Digital Agency HTML5 Template Author: wowtheme7 Support: Description: Bizzpro – is a Digital Agency HTML5 Template that comes with high-quality 3 Pre build Home Pages and many built-in awesome inner pages which are perfect for any creative agencies, designers, digital agencies, freelancers, developers, designers, marketing, startup, blog and portfolio. Version: 1.0 ----------------------------------------------------------------------------------- /************ TABLE OF CONTENTS *************** 01. VARIBALES DECLARARION 02. MIXIN DECLARATION 03. TYPOGRAPHY CSS START 04. THEME CSS START 05. BUTTON CSS START 06. TITLE CSS START 07. WIDGET CSS START 08. ANIMATION CSS START 09. LOADING CSS START 10. MENU CSS START 11. MODAL CSS START 12. HEADER CSS START 13. OFFCANVAS CSS START 14. HERO CSS START 15. FEATURE CSS START 16. ABOUT CSS START 17. SERVICE CSS START 18. COUNTER CSS START 19. TESTIMONIAL CSS START 20. PROCESS CSS START 21. TEAM CSS START 22. PORTFOLIO CSS START 23. HIRE CSS START 24. PRICE CSS START 25. BRAND CSS START 26. BLOG CSS START 27. CONTACT CSS START 28. FOOTER CSS START **********************************************/ /*----------------------------------------*/ /* 01. VARIBALES DECLARARION /*---------------------------------------- @import url("https://fonts.googleapis.com/css2?family=Barlow:wght@100;200;300;400;500;600;700;800;900&display=swap");*/ :root { --main-color-one: #B69974; --secondary: #1F242C; --white: #fff; --white-2: #E3E3E3; --black: #000; --black-2: #252525; --black-3: #1F242C; --black-4: #232323; --black-5: #2B2B5E; --gray: #616161; --gray-2: #F4F5FA; --gray-3: #333F4D; --gray-4: #82828A; --gray-5: #3C4958; --gray-6: #757474; --blue: #0058AA; --blue-2: #064BB5; --yellow: #B8FB5E; --yellow-2: #D8FF36; } /*----------------------------------------*/ /* 02. MIXIN DECLARATION /*----------------------------------------*/ /*----------------------------------------*/ /* 03. TYPOGRAPHY CSS START /*----------------------------------------*/ * { margin: 0; padding: 0; } body { font-family: "Barlow", sans-serif; } html { scroll-behavior: smooth; } h1, h2, h3, h4, h5, h6 { padding: 0; margin: 0; position: relative; z-index: 1; } h1 { font-size: 36px; } h2 { font-size: 36px; } h3 { font-size: 30px; } h4 { font-size: 24px; } h5 { font-size: 20px; } h6 { font-size: 18px; } ul, ol { padding: 0; margin: 0; } li { list-style: none; } a { text-decoration: none; -webkit-transition: all 0.3s; transition: all 0.3s; } p { padding: 0; margin: 0; font-style: normal; line-height: 1.9; font-weight: 500; font-size: 16px; color: var(--black-2); } img { max-width: 100%; } /*----------------------------------------*/ /* 04. THEME CSS START /*----------------------------------------*/ .pos-abs { position: absolute; width: 100%; left: 0; top: 0; z-index: 3; } .underline { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; } .underline-2 { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; } .underline-3 { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 5px; } .underline-4 { text-decoration: underline; text-decoration-thickness: 4px; text-underline-offset: 5px; } .underline-5 { text-decoration: underline; text-decoration-thickness: 5px; text-underline-offset: 5px; } .db-color-secondary { color: var(--secondary) !important; } .db-color-yellow-2 { color: var(--yellow-2) !important; } .db-bg-secondary { background-color: var(--secondary) !important; } .project-completed { width: 260px; height: 260px; background: var(--gray-2); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; border-radius: 100%; position: relative; } .project-completed::after { position: absolute; content: ""; width: 230px; height: 230px; border-radius: 100%; border: 1px dashed var(--main-color-one); -webkit-animation: dbRotate 5s infinite; animation: dbRotate 5s infinite; } .project-completed img { margin-bottom: 5px; } .project-completed .total { font-weight: 600; font-size: 48px; line-height: 1; letter-spacing: 0.16px; text-transform: uppercase; color: var(--black-2); padding-bottom: 5px; } .satisfy-clients { width: 280px; padding: 50px 30px; text-align: center; background-color: var(--yellow); } .satisfy-clients img { margin-bottom: 30px; } @media (max-width: 991px) { .satisfy-clients img { margin-bottom: 20px; } } .satisfy-clients .title { font-size: 48px; line-height: 1; font-weight: 600; letter-spacing: 0.16px; color: var(--secondary); text-transform: uppercase; } @media (max-width: 991px) { .satisfy-clients .title { font-size: 36px; } } .satisfy-clients p { font-size: 20px; line-height: 1; font-weight: 600; padding-top: 15px; color: var(--secondary); } .line-cols-3 { position: relative; } .line-cols-3 .line-1, .line-cols-3 .service__area-2 .line-4, .service__area-2 .line-cols-3 .line-4, .line-cols-3 .service__area-2 .line-3, .service__area-2 .line-cols-3 .line-3, .line-cols-3 .service__area-2 .line-2, .service__area-2 .line-cols-3 .line-2 { position: absolute; width: 1px; height: 100%; left: 24%; top: 0; background-color: rgba(255, 255, 255, 0.1019607843); } .line-cols-3 .line-2 { position: absolute; width: 1px; height: 100%; left: 49%; top: 0; background-color: rgba(255, 255, 255, 0.1019607843); } .line-cols-3 .line-3 { position: absolute; width: 1px; height: 100%; left: 74%; top: 0; background-color: rgba(255, 255, 255, 0.1019607843); } .scroll-top { position: fixed; width: 50px; height: 50px; background: -webkit-gradient(linear, left bottom, left top, from(var(--main-color-one)), color-stop(25%, var(--secondary)), color-stop(50%, var(--main-color-one)), color-stop(75%, var(--secondary)), to(var(--main-color-one))); background: linear-gradient(to top, var(--main-color-one) 0%, var(--secondary) 25%, var(--main-color-one) 50%, var(--secondary) 75%, var(--main-color-one) 100%); background-size: 400% 400%; right: 20px; bottom: 0; font-size: 18px; color: var(--white); border: none; border-radius: 3px; cursor: pointer; z-index: 99; opacity: 0; visibility: hidden; -webkit-transition: all 0.7s; transition: all 0.7s; } .scroll-top.showed { bottom: 20px; opacity: 1; visibility: visible; } .scroll-top:hover { bottom: 20px; opacity: 1; visibility: visible; background-position: 100% 100%; } .img-animation { position: relative; overflow: hidden; height: 600px; } @media (max-width: 1399px) { .img-animation { height: 500px; } } @media (max-width: 991px) { .img-animation { height: auto; } } .img-animation img { position: absolute; height: 120%; bottom: 0; -o-object-fit: cover; object-fit: cover; } @media (max-width: 991px) { .img-animation img { position: static; height: auto; } } .pt-100 { padding-top: 100px; } @media (max-width: 991px) { .pt-100 { padding-top: 80px; } } @media (max-width: 767px) { .pt-100 { padding-top: 50px; } } .pt-120 { padding-top: 120px; } @media (max-width: 1199px) { .pt-120 { padding-top: 100px; } } @media (max-width: 991px) { .pt-120 { padding-top: 80px; } } @media (max-width: 767px) { .pt-120 { padding-top: 50px; } } .pt-125 { padding-top: 125px; } @media (max-width: 1199px) { .pt-125 { padding-top: 100px; } } @media (max-width: 991px) { .pt-125 { padding-top: 80px; } } @media (max-width: 767px) { .pt-125 { padding-top: 50px; } } .pt-130 { padding-top: 130px; } @media (max-width: 1199px) { .pt-130 { padding-top: 100px; } } @media (max-width: 991px) { .pt-130 { padding-top: 80px; } } @media (max-width: 767px) { .pt-130 { padding-top: 50px; } } .pt-140 { padding-top: 140px; } @media (max-width: 1199px) { .pt-140 { padding-top: 100px; } } @media (max-width: 991px) { .pt-140 { padding-top: 80px; } } @media (max-width: 767px) { .pt-140 { padding-top: 50px; } } .pt-150 { padding-top: 150px; } @media (max-width: 1199px) { .pt-150 { padding-top: 100px; } } @media (max-width: 991px) { .pt-150 { padding-top: 80px; } } @media (max-width: 767px) { .pt-150 { padding-top: 50px; } } .pt-170 { padding-top: 170px; } @media (max-width: 1199px) { .pt-170 { padding-top: 100px; } } @media (max-width: 991px) { .pt-170 { padding-top: 80px; } } @media (max-width: 767px) { .pt-170 { padding-top: 50px; } } .pb-100 { padding-bottom: 100px; } @media (max-width: 991px) { .pb-100 { padding-bottom: 80px; } } @media (max-width: 767px) { .pb-100 { padding-bottom: 50px; } } .pb-110 { padding-bottom: 110px; } @media (max-width: 1199px) { .pb-110 { padding-bottom: 100px; } } @media (max-width: 991px) { .pb-110 { padding-bottom: 80px; } } @media (max-width: 767px) { .pb-110 { padding-bottom: 50px; } } .pb-120 { padding-bottom: 120px; } @media (max-width: 1199px) { .pb-120 { padding-bottom: 100px; } } @media (max-width: 991px) { .pb-120 { padding-bottom: 80px; } } @media (max-width: 767px) { .pb-120 { padding-bottom: 50px; } } .pb-125 { padding-bottom: 125px; } @media (max-width: 1199px) { .pb-125 { padding-bottom: 100px; } } @media (max-width: 991px) { .pb-125 { padding-bottom: 80px; } } @media (max-width: 767px) { .pb-125 { padding-bottom: 50px; } } .pb-130 { padding-bottom: 130px; } @media (max-width: 1199px) { .pb-130 { padding-bottom: 100px; } } @media (max-width: 991px) { .pb-130 { padding-bottom: 80px; } } @media (max-width: 767px) { .pb-130 { padding-bottom: 50px; } } .pb-140 { padding-bottom: 140px; } @media (max-width: 1199px) { .pb-140 { padding-bottom: 100px; } } @media (max-width: 991px) { .pb-140 { padding-bottom: 80px; } } @media (max-width: 767px) { .pb-140 { padding-bottom: 50px; } } .pb-150 { padding-bottom: 150px; } @media (max-width: 1199px) { .pb-150 { padding-bottom: 100px; } } @media (max-width: 991px) { .pb-150 { padding-bottom: 80px; } } @media (max-width: 767px) { .pb-150 { padding-bottom: 50px; } } .mt-130 { margin-top: 130px; } @media (max-width: 1199px) { .mt-130 { margin-top: 100px; } } @media (max-width: 991px) { .mt-130 { margin-top: 80px; } } @media (max-width: 767px) { .mt-130 { margin-top: 50px; } } .plr-50 { padding-left: 50px; padding-right: 50px; } @media (max-width: 991px) { .plr-50 { padding-left: 30px; padding-right: 30px; } } @media (max-width: 767px) { .plr-50 { padding-left: 15px; padding-right: 15px; } } .plr-100 { padding-left: 100px; padding-right: 100px; } @media (max-width: 1199px) { .plr-100 { padding-left: 50px; padding-right: 50px; } } @media (max-width: 991px) { .plr-100 { padding-left: 30px; padding-right: 30px; } } @media (max-width: 767px) { .plr-100 { padding-left: 15px; padding-right: 15px; } } .plr-90 { padding-left: 90px; padding-right: 90px; } @media (max-width: 1199px) { .plr-90 { padding-left: 50px; padding-right: 50px; } } @media (max-width: 991px) { .plr-90 { padding-left: 30px; padding-right: 30px; } } @media (max-width: 767px) { .plr-90 { padding-left: 15px; padding-right: 15px; } } /*----------------------------------------*/ /* 05. BUTTON CSS START /*----------------------------------------*/ .btn-rollover { display: inline-block; font-weight: 500; font-size: 16px; line-height: 1.5; color: var(--white); padding: 14px 32px; border-radius: 10px; position: relative; z-index: 1; -webkit-transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1) 0s; transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1) 0s; } .btn-rollover::before { position: absolute; top: 0px; right: 0px; height: 100%; width: 0px; z-index: -1; content: ""; border-radius: 6px; background: var(--main-color-one); -webkit-transition: all 0.4s cubic-bezier(0.42, 0, 0.58, 1) 0s; transition: all 0.4s cubic-bezier(0.42, 0, 0.58, 1) 0s; } .btn-rollover:hover { color: var(--white); background-color: transparent; } .btn-rollover:hover::before { left: 0%; right: auto; width: 100%; } .db-btn-arrow { font-weight: 600; font-size: 14px; line-height: 20px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--black-2); display: inline-block; position: relative; } .db-btn-arrow::after { position: absolute; content: ""; width: 100%; height: 1px; left: 0; bottom: -8px; -webkit-transition: all 0.3s; transition: all 0.3s; background-color: var(--black-2); } .db-btn-arrow i { font-size: 18px; color: var(--main-color-one); -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } .db-btn-arrow:hover::after { width: 0; } .db-btn-arrow:hover i { color: var(--black-2); -webkit-transition: all 0.3s; transition: all 0.3s; } .db-btn-border { font-size: 14px; line-height: 1.5; font-weight: 600; padding: 16px 22px; display: inline-block; letter-spacing: 1.6px; color: var(--black-2); text-transform: uppercase; border: 1px solid currentColor; } .db-btn-border::before { border-radius: 0; } .db-btn-border.btn-rollover { border-radius: 0; } .db-btn-border.color-1:hover { color: var(--black-2); } .db-btn-border i { -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } .db-btn-call { font-size: 20px; line-height: 1.3; font-weight: 600; color: var(--black-2); display: inline-block; } .db-btn-call span { width: 50px; height: 50px; border-radius: 100%; display: inline-block; -webkit-box-shadow: 0px 4.8px 24.4px rgba(19, 16, 34, 0.1), 0px 4px 13px rgba(19, 16, 34, 0.06); box-shadow: 0px 4.8px 24.4px rgba(19, 16, 34, 0.1), 0px 4px 13px rgba(19, 16, 34, 0.06); text-align: center; line-height: 50px; color: var(--blue); font-size: 16px; } .db-btn-main-color-one { font-weight: 600; font-size: 14px; line-height: 1.5; padding: 24px 50px; letter-spacing: 1.6px; display: inline-block; color: var(--secondary); text-transform: uppercase; background-color: var(--yellow); } .db-btn-main-color-one:hover { color: var(--secondary); background-color: var(--main-color-one); } .db-arrow-up { width: 120px; height: 120px; overflow: hidden; -webkit-transition: all 0.5s; transition: all 0.5s; } .db-arrow-up img { -webkit-transition: all 0.5s; transition: all 0.5s; } .db-arrow-up .img-2 { -webkit-transform: translate(-120px, 10px); transform: translate(-120px, 10px); } .db-arrow-up:hover .img { -webkit-transform: translate(120px, -120px); transform: translate(120px, -120px); } .db-arrow-up:hover .img-2 { -webkit-transform: translate(0px, -106px); transform: translate(0px, -106px); } /*----------------------------------------*/ /* 06. TITLE CSS START /*----------------------------------------*/ .sec-title { font-size: 48px; line-height: 1; font-weight: 600; letter-spacing: 0.16px; text-transform: capitalize; color: var(--black-3); padding-bottom: 25px; } @media (max-width: 1399px) { .sec-title { font-size: 45px; } } @media (max-width: 1199px) { .sec-title { font-size: 40px; } } @media (max-width: 991px) { .sec-title { font-size: 32px; } } @media (max-width: 767px) { .sec-title { font-size: 30px; } } .sec-subtitle { font-weight: 500; font-size: 18px; line-height: 1.3; letter-spacing: 1.8px; text-transform: capitalize; color: #fd7e14; margin-bottom: 15px; position: relative; } .sec-subtitle span { font-size: 48px; line-height: 1; font-weight: 600; -webkit-text-stroke: 2px var(--main-color-one); color: transparent; position: absolute; left: 0; top: 50%; -webkit-transform: translateY(-52%); transform: translateY(-52%); opacity: 0.1; } @media (max-width: 767px) { .sec-subtitle span { font-size: 36px; } } .sec-subtitle-2 { font-weight: 500; font-size: 18px; line-height: 1.3; letter-spacing: 1.8px; color: var(--main-color-one); text-transform: uppercase; text-decoration-line: underline; padding-bottom: 15px; } /*----------------------------------------*/ /* 07. WIDGET CSS START /*----------------------------------------*/ /*----------------------------------------*/ /* 08. ANIMATION CSS START /*----------------------------------------*/ @-webkit-keyframes dbRotate { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes dbRotate { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @-webkit-keyframes cxuRipple { 0% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } 100% { -webkit-transform: scale(1.5); transform: scale(1.5); opacity: 0; } } @keyframes cxuRipple { 0% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } 100% { -webkit-transform: scale(1.5); transform: scale(1.5); opacity: 0; } } @-webkit-keyframes moveBottom { 0% { -webkit-transform: translateX(-25px); transform: translateX(-25px); } 50% { -webkit-transform: translateX(0); transform: translateX(0); } 100% { -webkit-transform: translateX(-25px); transform: translateX(-25px); } } @keyframes moveBottom { 0% { -webkit-transform: translateX(-25px); transform: translateX(-25px); } 50% { -webkit-transform: translateX(0); transform: translateX(0); } 100% { -webkit-transform: translateX(-25px); transform: translateX(-25px); } } @-webkit-keyframes moveRight { 0% { -webkit-transform: translateX(25px); transform: translateX(25px); } 50% { -webkit-transform: translateX(0); transform: translateX(0); } 100% { -webkit-transform: translateX(25px); transform: translateX(25px); } } @keyframes moveRight { 0% { -webkit-transform: translateX(25px); transform: translateX(25px); } 50% { -webkit-transform: translateX(0); transform: translateX(0); } 100% { -webkit-transform: translateX(25px); transform: translateX(25px); } } .moveRight { -webkit-animation: moveRight 2s 1; animation: moveRight 2s 1; } @-webkit-keyframes rotate { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes rotate { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @-webkit-keyframes wcLoading { 0% { -webkit-transform: scaleY(0.1); transform: scaleY(0.1); background: var(--white); } 50% { -webkit-transform: scaleY(1); transform: scaleY(1); background: var(--main-color-one); } 100% { -webkit-transform: scaleY(0.1); transform: scaleY(0.1); background: transparent; } } @keyframes wcLoading { 0% { -webkit-transform: scaleY(0.1); transform: scaleY(0.1); background: var(--white); } 50% { -webkit-transform: scaleY(1); transform: scaleY(1); background: var(--main-color-one); } 100% { -webkit-transform: scaleY(0.1); transform: scaleY(0.1); background: transparent; } } @-webkit-keyframes scroll { from { -webkit-transform: translateX(0); transform: translateX(0); } to { -webkit-transform: translateX(calc(-100% - 20px)); transform: translateX(calc(-100% - 20px)); } } @keyframes scroll { from { -webkit-transform: translateX(0); transform: translateX(0); } to { -webkit-transform: translateX(calc(-100% - 20px)); transform: translateX(calc(-100% - 20px)); } } @-webkit-keyframes cxufadeUp { 0% { opacity: 0; -webkit-transform: translateY(50px); transform: translateY(50px); } 100% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes cxufadeUp { 0% { opacity: 0; -webkit-transform: translateY(50px); transform: translateY(50px); } 100% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } } .cxufadeUp, .cxufadeUp4, .cxufadeUp3, .cxufadeUp2 { opacity: 0; -webkit-animation-name: cxufadeUp; animation-name: cxufadeUp; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } .cxufadeUp2 { -webkit-animation-delay: 0.3s; animation-delay: 0.3s; } .cxufadeUp3 { -webkit-animation-delay: 0.45s; animation-delay: 0.45s; } .cxufadeUp4 { -webkit-animation-delay: 0.6s; animation-delay: 0.6s; } @-webkit-keyframes cxuSpin { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes cxuSpin { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } .cxuSpin-slow { -webkit-animation: cxuSpin 10s linear infinite; animation: cxuSpin 10s linear infinite; } .cxuSpin-slow2 { -webkit-animation: cxuSpin 20s linear infinite; animation: cxuSpin 20s linear infinite; } .cxuSpin-medium { -webkit-animation: cxuSpin 3s linear infinite; animation: cxuSpin 3s linear infinite; } .cxuSpin-fast { -webkit-animation: cxuSpin 2s linear infinite; animation: cxuSpin 2s linear infinite; } /* Shine */ .shine { position: relative; overflow: hidden; } .shine::before { position: absolute; top: 0; left: -75%; z-index: 2; display: block; content: ""; width: 50%; height: 100%; background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), to(rgba(255, 255, 255, 0.3))); background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 100%); -webkit-transform: skewX(-25deg); transform: skewX(-25deg); } .shine:hover::before { -webkit-animation: shine 0.75s; animation: shine 0.75s; } @-webkit-keyframes shine { 100% { left: 125%; } } @keyframes shine { 100% { left: 125%; } } #preloader { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 999; background-color: var(--white); } #loader { display: block; position: relative; left: 50%; top: 50%; width: 150px; height: 150px; margin: -75px 0 0 -75px; border-radius: 50%; border: 3px solid transparent; border-top-color: var(--main-color-one); -webkit-animation: cxuSpin 2s linear infinite; animation: cxuSpin 2s linear infinite; } #loader::before { content: ""; position: absolute; top: 5px; left: 5px; right: 5px; bottom: 5px; border-radius: 50%; border: 3px solid transparent; border-top-color: var(--black-2); -webkit-animation: cxuSpin 3s linear infinite; animation: cxuSpin 3s linear infinite; } #loader::after { content: ""; position: absolute; top: 15px; left: 15px; right: 15px; bottom: 15px; border-radius: 50%; border: 3px solid transparent; border-top-color: var(--secondary); -webkit-animation: cxuSpin 1.5s linear infinite; animation: cxuSpin 1.5s linear infinite; } /*----------------------------------------*/ /* 10. MENU CSS START /*----------------------------------------*/ .main-menu { text-align: right; } @media (max-width: 1199px) { .main-menu { display: none; } } .main-menu ul li { display: inline-block; padding: 0 16px; } @media (max-width: 1399px) { .main-menu ul li { padding: 0 15px; } } .main-menu ul li:hover .main-dropdown { top: 80px; opacity: 1; visibility: visible; } .main-menu ul li:hover .mega-menu { top: 80px; opacity: 1; visibility: visible; } .main-menu ul li a { font-weight: 600; line-height: 1.3; display: block; color: var(--black-2); font-size: 16px; padding: 30px 8px; text-transform: capitalize; } .main-menu ul li a:hover { color: var(--main-color-one); } .main-menu .main-dropdown { color: var(--white); position: absolute; width: 260px; top: 100px; background: var(--black-4); padding: 20px 0; opacity: 0; visibility: hidden; -webkit-transition: all 0.2s; transition: all 0.2s; -webkit-box-shadow: rgba(17, 12, 46, 0.15) 0px 48px 100px 0px; box-shadow: rgba(17, 12, 46, 0.15) 0px 48px 100px 0px; } .main-menu .main-dropdown li { padding: 0 30px; display: block; text-align: left; position: relative; } .main-menu .main-dropdown li:hover .sub-dropdown { left: 100%; opacity: 1; visibility: visible; } @media (max-width: 1919px) { .main-menu .main-dropdown li:hover .sub-dropdown { left: -100%; } } .main-menu .main-dropdown li a { padding: 10px 0; color: var(--white); } .main-menu .sub-dropdown { position: absolute; width: 260px; left: 90%; top: 0; background: var(--blue); padding: 20px 0; opacity: 0; visibility: hidden; -webkit-transition: all 0.2s; transition: all 0.2s; -webkit-box-shadow: rgba(17, 12, 46, 0.15) 0px 48px 100px 0px; box-shadow: rgba(17, 12, 46, 0.15) 0px 48px 100px 0px; } @media (max-width: 1919px) { .main-menu .sub-dropdown { left: -90%; } } .main-menu .sub-dropdown li { padding: 0 30px; display: block; text-align: left; position: relative; } .main-menu .sub-dropdown li a { padding: 10px 0; } .main-menu .has-dropdown { position: relative; padding-right: 30px; } .main-menu .has-dropdown:hover::after { color: var(--main-color-one); } .main-menu .has-dropdown::after { position: absolute; content: "\f107"; width: 15px; height: 15px; top: 30px; color: var(--black-2); font-family: "Font Awesome 6 Free"; font-weight: 700; -webkit-transition: all 0.2s; transition: all 0.2s; } .main-menu .has-megamenu { position: static; padding-right: 30px; } .main-menu .has-megamenu:hover::after { color: var(--main-color-one); } .main-menu .has-megamenu::after { position: absolute; content: "\f107"; width: 15px; height: 15px; top: 30px; color: var(--black-2); font-family: "Font Awesome 6 Free"; font-weight: 700; -webkit-transition: all 0.2s; transition: all 0.2s; } .main-menu .main-dropdown .has-dropdown { position: relative; } .main-menu .main-dropdown .has-dropdown:hover::after { color: var(--main-color-one); } .main-menu .main-dropdown .has-dropdown::after { position: absolute; content: "\f107"; width: 15px; height: 15px; top: 15px; right: 20px; color: var(--white); -webkit-transform: rotate(-90deg); transform: rotate(-90deg); font-family: "Font Awesome 6 Free"; font-weight: 700; -webkit-transition: all 0.2s; transition: all 0.2s; } .main-menu .mega-menu { position: absolute; width: 100%; left: 0; top: 100px; z-index: 9; background-color: var(--blue); text-align: left; padding: 40px 230px; display: -ms-grid; display: grid; -ms-grid-columns: (1fr)[6]; grid-template-columns: repeat(6, 1fr); opacity: 0; visibility: hidden; -webkit-transition: all 0.2s; transition: all 0.2s; -webkit-box-shadow: rgba(17, 12, 46, 0.15) 0px 48px 100px 0px; box-shadow: rgba(17, 12, 46, 0.15) 0px 48px 100px 0px; } @media (max-width: 1919px) { .main-menu .mega-menu { padding: 40px 50px; } } @media (max-width: 1399px) { .main-menu .mega-menu { padding: 40px 20px; } } .main-menu .mega-menu li { display: block; } .main-menu .mega-menu li:first-child { font-size: 18px; color: var(--white); padding-bottom: 10px; text-transform: capitalize; } .main-menu .mega-menu li a { padding: 8px 5px; color: var(--white); } /*----------------------------------------*/ /* 11. MODAL CSS START /*----------------------------------------*/ /*----------------------------------------*/ /* 12. HEADER CSS START /*----------------------------------------*/ .header__area-3 { border-bottom: 2px solid rgba(255, 255, 255, 0.2); } .header__area-4.pos-abs { top: 47px; } .header__inner { display: -ms-grid; display: grid; grid-gap: 30px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-grid-columns: 1fr 30px auto 30px 1fr; grid-template-columns: 1fr auto 1fr; border-bottom: 2px solid rgba(37, 37, 37, 0.1); } @media (max-width: 1199px) { .header__inner { padding-top: 15px; padding-bottom: 15px; -ms-grid-columns: auto 30px auto; grid-template-columns: auto auto; } } .header__inner-3 { display: -ms-grid; display: grid; grid-gap: 30px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-grid-columns: 1fr 30px auto 30px 1fr; grid-template-columns: 1fr auto 1fr; } @media (max-width: 1199px) { .header__inner-3 { padding-top: 15px; padding-bottom: 15px; -ms-grid-columns: auto 30px auto; grid-template-columns: auto auto; } } .header__inner-4 { gap: 30px; display: -ms-grid; display: grid; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-grid-columns: 1fr 30px 3.2fr; grid-template-columns: 1fr 3.2fr; } @media (max-width: 1919px) { .header__inner-4 { -ms-grid-columns: 1fr 4fr; grid-template-columns: 1fr 4fr; } } @media (max-width: 1399px) { .header__inner-4 { gap: 10px; } } @media (max-width: 1199px) { .header__inner-4 { -ms-grid-columns: 1fr 1fr; grid-template-columns: 1fr 1fr; } } @media (max-width: 767px) { .header__inner-4 { gap: 20px; -ms-grid-columns: auto 20px 115px; grid-template-columns: auto 115px; } } .header__right-4 { height: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; background-color: var(--white); } .header__quote-4 { height: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; background-color: var(--main-color-one); } @media (max-width: 767px) { .header__quote-4 { display: none; } } .header__quote-4 a { font-weight: 600; font-size: 14px; line-height: 1.5; letter-spacing: 1.6px; color: var(--white); padding: 20px 30px; text-transform: uppercase; } .header__quote-4 a i { padding-left: 5px; } @media (max-width: 1199px) { .header__menu { display: none; } } @media (max-width: 1199px) { .header__menu-3 { display: none; } } .header__menu-3 .main-menu li a { color: var(--white); } .header__menu-3 .main-menu .has-dropdown::after, .header__menu-3 .main-menu .has-megamenu::after { color: var(--white); } .header__others { gap: 50px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; } @media (max-width: 767px) { .header__others { gap: 20px; } } .header__others-4 { height: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .header__offcanvas .menu_icon { width: 51px; height: 51px; background: var(--black-2); border-radius: 100%; border: none; outline: none; position: relative; z-index: 2; } .header__offcanvas-3 .menu_icon { width: 51px; height: 51px; border-radius: 100%; outline: none; background-color: transparent; border: 1px solid var(--white); } .header__offcanvas-4 { display: -webkit-box; display: -ms-flexbox; display: flex; height: 100%; } .header__offcanvas-4 .menu_icon { outline: none; border: none; padding: 20px 30px; background-color: transparent; border-left: 1px solid var(--white-2); } @media (max-width: 767px) { .header__offcanvas-4 .menu_icon { padding: 20px; } } .header__search button, .header__search-3 button { border: none; font-size: 18px; color: var(--black-2); background: transparent; } .header__search .search-close, .header__search-3 .search-close { font-size: 20px; display: none; } .header__search-3 button { color: var(--white); } .header__search-4 { display: -webkit-box; display: -ms-flexbox; display: flex; height: 100%; } .header__search-4 .search_icon { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 20px 30px; background-color: transparent; border-left: 1px solid var(--white-2); } @media (max-width: 767px) { .header__search-4 .search_icon { padding: 20px; } } .header__search-4 .search_icon i { font-size: 18px; color: var(--gray-6); } .search__form { position: fixed; width: 300px; right: 60px; top: 95px; z-index: 999; opacity: 0; visibility: hidden; -webkit-transition: all 0.5s; transition: all 0.5s; padding: 10px; background-color: var(--black-2); } @media (min-width: 1920px) { .search__form { right: 10%; } } @media (max-width: 767px) { .search__form { right: 10px; } } .search__form.showed { top: 85px; opacity: 1; visibility: visible; } .search__form input { width: 100%; padding: 12px; outline: none; border: none; border-radius: 5px; text-transform: capitalize; } /*----------------------------------------*/ /* 13. OFFCANVAS CSS START /*----------------------------------------*/ .offcanvas__area { position: fixed; width: 400px; height: 100vh; top: 0; right: -400px; z-index: 99; padding: 40px 30px; background: var(--black-3); opacity: 0; visibility: hidden; -webkit-transition: all 0.5s; transition: all 0.5s; } @media (max-width: 767px) { .offcanvas__area { width: 350px; right: -350px; } } .offcanvas__area.showed { right: 0; opacity: 1; visibility: visible; } .offcanvas__top { gap: 30px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; padding-bottom: 100px; } @media (max-width: 1399px) { .offcanvas__top { padding-bottom: 50px; } } .offcanvas__top img { max-width: 160px; height: -webkit-min-content; height: -moz-min-content; height: min-content; } .offcanvas__top button { background-color: transparent; width: 40px; height: 40px; color: var(--white); border-radius: 50px; font-size: 18px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-transition: all 0.3s; transition: all 0.3s; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; border: 1px solid var(--white-3); } .offcanvas__top button:hover { color: var(--main-color-one); border-color: var(--main-color-one); } .offcanvas__menu { display: none; padding-bottom: 50px; } @media (max-width: 1199px) { .offcanvas__menu { display: block; height: 75vh; overflow: scroll; } } .offcanvas-menu li a { font-size: 15px; color: var(--white); text-transform: capitalize; padding: 7px 0; display: block; } .offcanvas__map { padding-bottom: 50px; } @media (max-width: 1919px) { .offcanvas__map { padding-bottom: 40px; } } @media (max-width: 1399px) { .offcanvas__map { padding-bottom: 30px; } } @media (max-width: 1199px) { .offcanvas__map { display: none; } } .offcanvas__map iframe { width: 100%; height: 220px; } @media (max-width: 1399px) { .offcanvas__map iframe { height: 120px; } } .offcanvas__search { padding-bottom: 100px; } @media (max-width: 1399px) { .offcanvas__search { padding-bottom: 70px; } } @media (max-width: 1199px) { .offcanvas__search { display: none; } } .offcanvas__search input { width: 100%; padding: 10px; outline: none; border: none; border-radius: 5px; } @media (max-width: 1199px) { .offcanvas__btm { display: none; } } .close_offcanvas { width: 40px; height: 40px; position: absolute; right: 50px; top: 50px; font-size: 24px; color: var(--black-2); padding: 1px 11px; cursor: pointer; border: 1px solid var(--black-2); border-radius: 100%; -webkit-transition: all 0.3s; transition: all 0.3s; } .close_offcanvas:hover { color: var(--main-color-one); border-color: var(--main-color-one); } @media (max-width: 1199px) { .close_offcanvas { top: 20px; right: 30px; } } @media (max-width: 991px) { .close_offcanvas { top: 15px; right: 20px; } } @media (max-width: 767px) { .close_offcanvas { top: 6px; right: 25px; } } .mean-container .mean-nav > ul { display: block !important; } .mean-container .mean-bar { padding: 0; background: none; } .mean-container .mean-nav { width: 97%; } .mean-container .mean-nav ul li a { text-transform: capitalize; background-color: var(--blue); border-color: rgba(255, 255, 255, 0.1); } .mean-container .mean-nav ul li a :hover { background-color: var(--black-2); } .mean-container .mean-nav ul li li a { opacity: 1; border-color: rgba(255, 255, 255, 0.1); } .mean-container .mean-nav ul li a.mean-expand { line-height: 32px; background: transparent; border-color: rgba(255, 255, 255, 0.1) !important; } .mean-container .mean-nav ul li a.mean-expand:hover { background-color: var(--main-color-one); } .mean-container a.meanmenu-reveal { display: none !important; } .hero__area { padding-top: 225px; position: relative; background-image: url(../imgs/hero/bg-1.png); } @media (max-width: 1199px) { .hero__area { padding-top: 160px; } } .hero__area::after { position: absolute; content: ""; width: 100%; height: 110px; left: 0; bottom: 0; background-color: var(--white); z-index: 0; } @media (max-width: 1199px) { .hero__area::after { height: 60px; } } .hero__area .shape-1 { position: absolute; right: 0; top: 43%; z-index: 1; } @media (max-width: 991px) { .hero__area .shape-1 { top: 50%; max-width: 60px; } } .hero__area .shape-2 { position: absolute; left: 22%; bottom: 160px; } @media (max-width: 1919px) { .hero__area .shape-2 { left: 32%; } } @media (max-width: 1399px) { .hero__area .shape-2 { left: 35%; bottom: 120px; max-width: 120px; } } @media (max-width: 1199px) { .hero__area .shape-2 { left: 39%; bottom: 85px; } } @media (max-width: 767px) { .hero__area .shape-2 { display: none; } } .hero__area .shape-3 { position: absolute; left: 22.8%; bottom: 40px; z-index: 3; } @media (max-width: 1919px) { .hero__area .shape-3 { left: 30%; } } @media (max-width: 1399px) { .hero__area .shape-3 { left: 35%; max-width: 300px; } } @media (max-width: 1199px) { .hero__area .shape-3 { left: 40%; max-width: 240px; } } @media (max-width: 767px) { .hero__area .shape-3 { display: none; } } .hero__area .shape-4 { position: absolute; left: 230px; bottom: 43%; } @media (max-width: 1919px) { .hero__area .shape-4 { bottom: 32%; } } @media (max-width: 1399px) { .hero__area .shape-4 { bottom: 30%; } } @media (max-width: 1199px) { .hero__area .shape-4 { left: 130px; bottom: 23%; } } @media (max-width: 767px) { .hero__area .shape-4 { display: none; } } .hero__area .shape-5 { position: absolute; left: 38%; top: 200px; } @media (max-width: 1919px) { .hero__area .shape-5 { left: 50%; } } @media (max-width: 1199px) { .hero__area .shape-5 { left: 45%; top: 140px; } } @media (max-width: 767px) { .hero__area .shape-5 { top: 110px; } } .hero__area-2 .shape-1 { position: absolute; left: 0; top: 0; } .hero__area-2 .shape-2 { position: absolute; right: 0; top: 0; } .hero__area-3 { padding-top: 250px; background-image: url(../imgs/hero/3/bg.png); } @media (max-width: 1199px) { .hero__area-3 { padding-top: 180px; } } .hero__area-3 .shape { position: absolute; top: 370px; left: 50.4%; } @media (max-width: 1919px) { .hero__area-3 .shape { left: 56%; top: 312px; } } @media (max-width: 1199px) { .hero__area-3 .shape { top: 220px; } } @media (max-width: 991px) { .hero__area-3 .shape { left: 40%; } } @media (max-width: 767px) { .hero__area-3 .shape { left: 75%; } } .hero__area-4 { padding-bottom: 70px; background-color: var(--secondary); } @media (max-width: 1199px) { .hero__area-4 { overflow: hidden; } } .hero__area-4 .db-btn-border i { -webkit-transform: rotate(45deg); transform: rotate(45deg); } .hero__video { width: 100%; height: 100%; top: 0; left: 0; position: absolute; -webkit-transform: scale(0); transform: scale(0); -webkit-transition: all 0.5s; transition: all 0.5s; } .hero__video video { width: 100%; height: 100%; -webkit-transition: all 0.5s; transition: all 0.5s; } .hero__video.show { -webkit-transform: scale(1); transform: scale(1); } .hero__gallery { gap: 10px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .hero__gallery .image-1 { margin-left: 85px; max-width: 309px; } @media (max-width: 1919px) { .hero__gallery .image-1 { max-width: 260px; margin-left: 60px; } } @media (max-width: 991px) { .hero__gallery .image-1 { max-width: 200px; margin-left: 30px; } } .hero__gallery .image-2 { margin-left: 235px; max-width: 300px; } @media (max-width: 1919px) { .hero__gallery .image-2 { max-width: 220px; margin-left: 200px; } } @media (max-width: 991px) { .hero__gallery .image-2 { max-width: 180px; margin-left: 100px; } } .hero__gallery .image-3 { max-width: 395px; } @media (max-width: 1919px) { .hero__gallery .image-3 { max-width: 320px; } } @media (max-width: 991px) { .hero__gallery .image-3 { max-width: 220px; } } .hero__inner-3 { display: -ms-grid; display: grid; grid-gap: 60px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-grid-columns: auto 60px 1fr 60px auto; grid-template-columns: auto 1fr auto; padding-right: 320px; padding-bottom: 160px; } @media (max-width: 1919px) { .hero__inner-3 { padding-right: 130px; } } @media (max-width: 1199px) { .hero__inner-3 { padding-right: 30px; padding-bottom: 100px; } } @media (max-width: 1199px) { .hero__inner-3 { padding-right: 30px; -ms-grid-columns: auto 60px 1fr; grid-template-columns: auto 1fr; } } @media (max-width: 991px) { .hero__inner-3 { grid-gap: 40px; padding-bottom: 90px; } } @media (max-width: 767px) { .hero__inner-3 { padding-bottom: 60px; -ms-grid-columns: 1fr; grid-template-columns: 1fr; } } .hero__inner-4 { display: -ms-grid; display: grid; grid-gap: 30px; -ms-grid-columns: 1.22fr 30px 1fr; grid-template-columns: 1.22fr 1fr; padding-left: 150px; padding-right: 150px; } @media (max-width: 1399px) { .hero__inner-4 { padding-left: 50px; padding-right: 5px; } } @media (max-width: 1199px) { .hero__inner-4 { padding-left: 30px; padding-right: 30px; } } @media (max-width: 767px) { .hero__inner-4 { padding-left: 15px; padding-right: 15px; -ms-grid-columns: 1fr; grid-template-columns: 1fr; } } .hero__left-4 { max-width: 710px; padding-top: 240px; } @media (max-width: 1199px) { .hero__left-4 { padding-top: 200px; } } @media (max-width: 767px) { .hero__left-4 { padding-top: 180px; } } .hero__left-4 p { color: var(--white); margin-left: 75px; padding-top: 40px; max-width: 555px; } @media (max-width: 991px) { .hero__left-4 p { margin-left: 20px; } } .hero__left-4 a { color: var(--white); margin-top: 35px; margin-left: 75px; border-color: var(--white); border-radius: 50px !important; } .hero__left-4 a:before { border-radius: 50px !important; } @media (max-width: 991px) { .hero__left-4 a { margin-left: 20px; } } .hero__top { display: -ms-grid; display: grid; grid-gap: 30px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-grid-columns: 3fr 30px 1fr; grid-template-columns: 3fr 1fr; padding-left: 140px; padding-right: 30px; } @media (max-width: 1199px) { .hero__top { padding-left: 30px; } } @media (max-width: 767px) { .hero__top { -ms-grid-columns: 1fr; grid-template-columns: 1fr; } } .hero__line-3 { position: absolute; max-width: 385px; right: 0; top: 50%; overflow: hidden; } @media (max-width: 1919px) { .hero__line-3 { max-width: 280px; } } @media (max-width: 1399px) { .hero__line-3 { max-width: 230px; } } @media (max-width: 1199px) { .hero__line-3 { display: none; } } .hero__title { font-size: 100px; line-height: 1; font-weight: 700; letter-spacing: -3px; color: var(--black-2); text-transform: uppercase; } @media (max-width: 1199px) { .hero__title { font-size: 72px; line-height: 1.2; } } @media (max-width: 991px) { .hero__title { font-size: 60px; } } @media (max-width: 767px) { .hero__title { font-size: 50px; } } .hero__title a { width: 136px; height: 68px; line-height: 16px; display: inline-block; border-radius: 34px; border: 1px solid var(--black-2); position: relative; top: -25px; } @media (max-width: 1199px) { .hero__title a { width: 120px; height: 60px; top: -15px; } } .hero__title a span { width: 55px; height: 55px; line-height: 16px; background: var(--main-color-one); border-radius: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; margin: 5px 5px 5px auto; } @media (max-width: 1199px) { .hero__title a span { width: 50px; height: 50px; } } .hero__title a i { font-size: 18px; color: #fff; } .hero__title-3 { font-weight: 800; font-size: 100px; line-height: 1.15; color: var(--white); text-transform: capitalize; } @media (max-width: 1399px) { .hero__title-3 { font-size: 90px; } } @media (max-width: 991px) { .hero__title-3 { font-size: 70px; } } @media (max-width: 767px) { .hero__title-3 { font-size: 60px; } } .hero__title-3 span { display: block; padding-left: 120px; } @media (max-width: 1199px) { .hero__title-3 span { padding-left: 100px; } } @media (max-width: 991px) { .hero__title-3 span { padding-left: 60px; } } @media (max-width: 767px) { .hero__title-3 span { padding-left: 50px; } } .hero__title-3-wrap { padding-left: 40px; position: relative; } @media (max-width: 1919px) { .hero__title-3-wrap { padding-left: 0; } } @media (max-width: 767px) { .hero__title-3-wrap { padding-left: 15px; } } .hero__title-4 { font-size: 90px; line-height: 1; font-weight: 600; letter-spacing: 0.3px; text-transform: capitalize; color: var(--white); } @media (max-width: 1399px) { .hero__title-4 { font-size: 70px; } } @media (max-width: 1199px) { .hero__title-4 { font-size: 60px; } } @media (max-width: 991px) { .hero__title-4 { font-size: 42px; } } @media (max-width: 767px) { .hero__title-4 { font-size: 40px; } } .hero__contact { display: -webkit-box; display: -ms-flexbox; display: flex; z-index: 5; } .hero__contact a { width: 94px; height: 94px; border: 1px solid var(--black-2); border-radius: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .hero__contact a span { width: 39px; height: 39px; border-radius: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; background-color: var(--main-color-one); } .hero__contact a i { font-size: 16px; color: var(--white); } .hero__contact .text { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .hero__contact p { font-weight: 500; font-size: 16px; line-height: 1.6; color: var(--black-2); background: #e4ded8; margin-left: -18px; } @media (max-width: 1199px) { .hero__contact p { background: #F4F5FA; } } @media (max-width: 1199px) { .hero__contact-3 { grid-column: 2/-1; } } @media (max-width: 767px) { .hero__contact-3 { grid-column: unset; margin-left: 15px; } } .hero__contact-3 a { font-weight: 800; font-size: 14px; line-height: 2; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; text-transform: capitalize; color: var(--white); width: 132px; height: 132px; border: 1px solid currentColor; border-radius: 100%; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .hero__contact-3 a:hover { color: var(--main-color-one); } .hero__btm { display: -ms-grid; display: grid; grid-gap: 50px; -ms-grid-columns: 300px 50px auto; grid-template-columns: 300px auto; margin-left: 280px; padding-top: 70px; z-index: 1; position: relative; } @media (max-width: 1199px) { .hero__btm { padding-top: 50px; margin-left: 175px; } } @media (max-width: 991px) { .hero__btm { margin-left: 30px; } } @media (max-width: 767px) { .hero__btm { margin-left: 15px; -ms-grid-columns: 1fr; grid-template-columns: 1fr; } } .hero__btm p { font-weight: 500; line-height: 1.8; max-width: 240px; z-index: 1; } .hero__btm img { width: 100%; z-index: 1; border-radius: 25px 0 0 25px; } .hero__area_1 { padding: 190px 100px 100px; } .hero__area_1 .hero__area_1_inner { position: relative; } .hero__area_1 .hero_1_content { position: absolute; left: 0; top: 0px; } .hero__area_1 .hero_1_content h1 { font-weight: 300; margin-bottom: 110px; } .hero__area_1 .hero_1_content h1 span { font-weight: 700; } .hero__area_1 .hero_1_content h1 img { margin-top: -20px; } .hero__area_1 .video_area a { display: inline-block; position: relative; } .hero__area_1 .video_area a i { position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .about__area { position: relative; overflow: hidden; } .about__area .shape { position: absolute; bottom: 95px; left: 128px; z-index: -1; max-width: 100%; } @media (max-width: 1199px) { .about__area .shape { left: 0; max-width: 420px; } } @media (max-width: 767px) { .about__area .shape { bottom: unset; top: 25%; max-width: 100%; } } .about__area-3 { background-color: var(--gray-2); } @media (max-width: 991px) { .about__area-4 { overflow: hidden; } } .about__area-6 { position: relative; } .about__area-6 .shape { position: absolute; bottom: 107px; left: 190px; z-index: -1; max-width: 100%; } @media (max-width: 1199px) { .about__area-6 .shape { left: 0; max-width: 420px; } } @media (max-width: 767px) { .about__area-6 .shape { bottom: unset; top: 25%; max-width: 100%; } } .about__imgs, .about__imgs-6 { position: relative; margin-right: 80px; } @media (max-width: 1919px) { .about__imgs, .about__imgs-6 { margin-right: 20px; } } @media (max-width: 991px) { .about__imgs, .about__imgs-6 { margin-right: 0; } } .about__imgs .image-1, .about__imgs-6 .image-1 { position: relative; display: inline-block; -webkit-transform: translateX(-70px); transform: translateX(-70px); } @media (max-width: 1919px) { .about__imgs .image-1, .about__imgs-6 .image-1 { -webkit-transform: translateX(-20px); transform: translateX(-20px); } } @media (max-width: 767px) { .about__imgs .image-1, .about__imgs-6 .image-1 { -webkit-transform: unset; transform: unset; } } .about__imgs .image-2, .about__imgs-6 .image-2 { text-align: right; -webkit-transform: translateY(-50%); transform: translateY(-50%); position: absolute; right: 0; } @media (max-width: 991px) { .about__imgs .image-2 img, .about__imgs-6 .image-2 img { max-width: 240px; } } .about__imgs .play, .about__imgs-6 .play { width: 90px; height: 90px; border-radius: 5px; border: 1px solid var(--white); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } @media (max-width: 991px) { .about__imgs .play, .about__imgs-6 .play { width: 70px; height: 70px; } } .about__imgs .play i, .about__imgs-6 .play i { font-size: 28px; color: var(--main-color-one); } @media (max-width: 991px) { .about__imgs .play i, .about__imgs-6 .play i { font-size: 24px; } } .about__imgs .projects, .about__imgs-6 .projects { padding: 40px 35px; background-color: #fff; -webkit-box-shadow: 0px 10px 60px 0px rgba(0, 0, 0, 0.07); box-shadow: 0px 10px 60px 0px rgba(0, 0, 0, 0.07); gap: 10px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; position: absolute; right: 20px; top: 60px; border-radius: 25px; } @media (max-width: 1199px) { .about__imgs .projects, .about__imgs-6 .projects { top: 40px; padding: 25px; } } @media (max-width: 991px) { .about__imgs .projects, .about__imgs-6 .projects { top: 20px; padding: 15px; } } @media (max-width: 767px) { .about__imgs .projects, .about__imgs-6 .projects { right: 0; } } .about__imgs .projects p, .about__imgs-6 .projects p { font-weight: 500; } .about__imgs .projects p span, .about__imgs-6 .projects p span { font-size: 51px; font-weight: 600; display: block; line-height: 0.9; } @media (max-width: 1199px) { .about__imgs .projects p span, .about__imgs-6 .projects p span { font-size: 40px; } } .about__imgs .bell, .about__imgs-6 .bell { width: 88px; height: 88px; background: var(--main-color-one); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; border-radius: 100%; margin-top: 55px; } @media (max-width: 991px) { .about__imgs .bell, .about__imgs-6 .bell { width: 70px; height: 70px; } } @media (max-width: 767px) { .about__imgs .bell, .about__imgs-6 .bell { margin-top: 20px; } } .about__imgs .bell i, .about__imgs-6 .bell i { font-size: 48px; color: #fff; } @media (max-width: 991px) { .about__imgs .bell i, .about__imgs-6 .bell i { font-size: 36px; } } .about__imgs-3 { position: relative; margin-left: -240px; margin-right: 60px; } @media (max-width: 1919px) { .about__imgs-3 { margin-left: -50px; margin-right: 0; } } @media (max-width: 1399px) { .about__imgs-3 { margin-left: -110px; } } @media (max-width: 1199px) { .about__imgs-3 { margin-left: -30px; } } .about__imgs-3 img { width: 100%; -o-object-fit: cover; object-fit: cover; } .about__imgs-3 .projects { padding: 15px 25px 13px; background-color: var(--yellow); gap: 15px; display: -ms-grid; display: grid; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-grid-columns: 55px 15px auto; grid-template-columns: 55px auto; position: absolute; right: 0; bottom: 0; min-width: 290px; } .about__imgs-3 .projects p { font-weight: 500; } .about__imgs-3 .projects p span { font-size: 51px; font-weight: 600; display: block; line-height: 0.9; } .about__imgs-4 { margin-right: 20px; margin-left: -110px; padding-top: 30px; position: relative; text-align: right; } @media (max-width: 1919px) { .about__imgs-4 { margin-left: -20px; } } .about__imgs-4 .img-1 { position: absolute; right: 50px; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); border-radius: 25px; } @media (max-width: 1919px) { .about__imgs-4 .img-1 { max-width: 360px; } } @media (max-width: 1399px) { .about__imgs-4 .img-1 { right: 30px; max-width: 300px; } } @media (max-width: 1199px) { .about__imgs-4 .img-1 { max-width: 210px; } } @media (max-width: 1919px) { .about__imgs-4 .img-2 { max-width: 500px; } } @media (max-width: 1399px) { .about__imgs-4 .img-2 { max-width: 420px; } } @media (max-width: 1199px) { .about__imgs-4 .img-2 { max-width: 320px; } } .about__imgs-4 .activity { width: 320px; background: var(--white); -webkit-box-shadow: 0px 0px 22.0445px 6.12348px rgba(0, 0, 0, 0.06); box-shadow: 0px 0px 22.0445px 6.12348px rgba(0, 0, 0, 0.06); text-align: center; padding: 30px; position: absolute; bottom: 20px; left: -50px; } @media (max-width: 1919px) { .about__imgs-4 .activity { left: -30px; bottom: -30px; width: 280px; } } @media (max-width: 1399px) { .about__imgs-4 .activity { width: 240px; padding: 20px; } } @media (max-width: 1199px) { .about__imgs-4 .activity { left: 0; bottom: -60px; width: 200px; } } .about__imgs-4 .activity .icon { width: 104px; height: 104px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; border-radius: 100%; background-color: var(--gray-2); margin: 0 auto; margin-bottom: 15px; } .about__imgs-4 .activity p { font-size: 20px; color: var(--gray-4); } @media (max-width: 1399px) { .about__imgs-4 .activity p { line-height: 1.3; } } .about__imgs-4 .activity p span { display: block; font-weight: 600; color: var(--secondary); } .about__imgs-6 .image-1 { -webkit-transform: translateX(0px); transform: translateX(0px); } .about__imgs-6 .projects { top: 213px; padding: 30px; min-width: 222px; text-align: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; background-color: var(--gray-2); } @media (max-width: 767px) { .about__imgs-6 .projects { top: 0; padding: 15px 20px; } } .about__imgs-6 .projects p { color: var(--gray-3); } .about__imgs-6 .projects p span { font-size: 20px; color: var(--black-5); } .about__imgs-6 .play i { color: var(--main-color-one); } .about__imgs-6 .bell { background-color: var(--main-color-one); } .about__imgs-6 .chart { width: 70px; height: 70px; background: var(--main-color-one); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; border-radius: 100%; position: absolute; left: -135px; bottom: 37%; color: #fff; } @media (max-width: 1919px) { .about__imgs-6 .chart { left: -70px; } } @media (max-width: 1199px) { .about__imgs-6 .chart { left: -40px; } } @media (max-width: 991px) { .about__imgs-6 .chart { left: -30px; width: 60px; height: 60px; } } @media (max-width: 767px) { .about__imgs-6 .chart { left: -10px; } } .about__imgs-6 .chart i { font-size: 32px; color: #fff; } @media (max-width: 991px) { .about__imgs-6 .chart i { font-size: 30px; } } .about__content, .about__content-6, .about__content-3 { padding-top: 80px; background-repeat: no-repeat; background-position: right bottom; } @media (max-width: 1199px) { .about__content, .about__content-6, .about__content-3 { padding-top: 30px; } } @media (max-width: 767px) { .about__content, .about__content-6, .about__content-3 { padding-top: 80px; } } .about__content p, .about__content-6 p, .about__content-3 p { font-weight: 500; color: var(--black-4); line-height: 1.8; padding-bottom: 30px; } .about__content ul, .about__content-6 ul, .about__content-3 ul { padding-bottom: 30px; } .about__content ul li, .about__content-6 ul li, .about__content-3 ul li { font-weight: 500; font-size: 16px; line-height: 1.9; color: var(--black-2); padding-left: 35px; padding-bottom: 35px; position: relative; } @media (max-width: 991px) { .about__content ul li, .about__content-6 ul li, .about__content-3 ul li { padding-bottom: 15px; } } .about__content ul li::before, .about__content-6 ul li::before, .about__content-3 ul li::before { position: absolute; content: "\f00c"; font-family: "Font Awesome 6 Free"; font-weight: 700; width: 24px; height: 24px; left: 0; top: 5px; border: 2px solid var(--black-2); border-radius: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; font-size: 14px; } .about__content-3 { background-image: none; padding-left: 40px; padding-top: 120px; } @media (max-width: 1919px) { .about__content-3 { padding-top: 30px; } } @media (max-width: 1399px) { .about__content-3 { padding-top: 20px; } } @media (max-width: 991px) { .about__content-3 { padding-left: 0; padding-top: 0; } } @media (max-width: 767px) { .about__content-3 { padding-top: 50px; } } .about__content-3 ul li { padding-bottom: 10px; } .about__content-3 ul li::before { width: 20px; height: 20px; color: var(--white); border: none; line-height: 1; font-size: 12px; background-color: var(--blue); } .about__content-4 { padding-left: 20px; } @media (max-width: 767px) { .about__content-4 { padding-left: 0; padding-top: 120px; } } .about__content-4 .sec-subtitle { color: var(--blue-2); } .about__content-4 p { max-width: 550px; padding-top: 20px; color: var(--black-4); margin-left: 120px; } @media (max-width: 1199px) { .about__content-4 p { margin-left: 80px; } } @media (max-width: 991px) { .about__content-4 p { margin-left: 30px; } } @media (max-width: 767px) { .about__content-4 p { margin-left: 0; padding-top: 0; } } .about__content-6 ul li { padding-left: 50px; text-decoration: underline; } .about__content-6 ul li::before { width: 30px; height: 30px; font-size: 16px; top: 1px; border-color: var(--main-color-one); color: var(--main-color-one); } .about__content-6 a i { color: var(--main-color-one); } .about__btn-3 { gap: 30px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } @media (max-width: 991px) { .about__btn-3 { -ms-flex-wrap: wrap; flex-wrap: wrap; } } .skill__list-4 { gap: 60px; display: -ms-grid; display: grid; margin-top: 75px; margin-left: 60px; } @media (max-width: 991px) { .skill__list-4 { gap: 30px; margin-top: 40px; margin-left: 50px; } } .skill__item-4 { display: -ms-grid; display: grid; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-grid-columns: 90px auto; grid-template-columns: 90px auto; padding: 20px 50px 20px 0; max-width: 630px; border: 1px solid #d5d5d5; -webkit-box-shadow: 0px 4.4190478325px 22.4634914398px -5.523809433px rgba(19, 16, 34, 0.1); box-shadow: 0px 4.4190478325px 22.4634914398px -5.523809433px rgba(19, 16, 34, 0.1); border-radius: 15px; } @media (max-width: 991px) { .skill__item-4 { padding: 20px 30px 20px 0; -ms-grid-columns: 60px auto; grid-template-columns: 60px auto; } } .skill__item-4 .img { width: 80px; height: 80px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; background-color: var(--main-color-one); -webkit-transform: translateX(-50%); transform: translateX(-50%); border-radius: 6px; padding: 15px; } .skill__item-4 p.title { color: var(--secondary); font-size: 20px; font-weight: 600; line-height: 1.2; margin-bottom: 15px; } .counter__number.style2 { -webkit-text-stroke: 1px #1f242c; color: transparent; } .service__area { overflow: hidden; } @media (max-width: 767px) { .service__area { padding-top: 20px; } .service__area br { display: none; } } .service__area-3 { background-color: var(--secondary); } @media (max-width: 991px) { .service__area-3 .sec-title service__item br { display: none; } } .service__area-4 { background-color: var(--secondary); background-image: url(../imgs/service/4/shape.png); background-repeat: no-repeat; background-position: right; background-size: contain; } .service__area-4 .sec-subtitle { color: var(--main-color-one); } .service__list-3 { display: -ms-grid; display: grid; grid-gap: 30px; -ms-grid-columns: 1fr 30px 1.15fr 30px 1fr; grid-template-columns: 1fr 1.15fr 1fr; padding-top: 60px; } @media (max-width: 767px) { .service__list-3 { grid-gap: 60px; -ms-grid-columns: 1fr; grid-template-columns: 1fr; } } .service__list-4 { gap: 30px; display: -ms-grid; display: grid; -ms-grid-columns: 1fr 30px 1fr 30px 1fr 30px 1fr; grid-template-columns: repeat(4, 1fr); padding-top: 50px; } @media (max-width: 1399px) { .service__list-4 { gap: 15px; } } @media (max-width: 991px) { .service__list-4 { gap: 30px; padding-top: 30px; -ms-grid-columns: 1fr 30px 1fr; grid-template-columns: repeat(2, 1fr); } } @media (max-width: 767px) { .service__list-4 { -ms-grid-columns: 1fr; grid-template-columns: 1fr; } } .service__text { padding-top: 37px; } @media (max-width: 767px) { .service__text { padding-top: 0; } } .service__text p { max-width: 445px; margin-left: auto; color: var(--black-4); } .service__text-3 p { color: var(--white-2); } .service__title, .service__title-3 { font-weight: 600; font-size: 20px; line-height: 1; color: var(--black-2); padding-bottom: 20px; -webkit-transition: all 0.3s; transition: all 0.3s; } .service__title:hover, .service__title-3:hover { color: var(--main-color-one); } .service__title-3 { color: var(--white); } .service__title-4 { font-weight: 600; font-size: 20px; line-height: 1.2; color: var(--black-2); -webkit-transition: all 0.3s; transition: all 0.3s; } .service__content { padding: 100px 40px 60px; background-color: var(--gray-2); border-radius: 20px; } @media (max-width: 1199px) { .service__content { padding: 90px 30px 40px; } } @media (max-width: 991px) { .service__content { padding: 90px 20px 30px; } } @media (max-width: 767px) { .service__content { padding: 80px 20px 30px; } } .service__content p { color: var(--black-4); padding-bottom: 32px; } @media (max-width: 767px) { .service__content p { padding-bottom: 25px; } } .service__content-3 p { max-width: 330px; color: var(--white); padding-bottom: 30px; } .service__content-3 a { color: var(--white); border-color: var(--white); } .service__content-3 a:hover { color: var(--yellow); border-color: currentColor; } .service__content-3 a i { -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } .service__content-4 { padding: 80px 30px 50px; position: relative; } .service__content-4 .icon { width: 100px; height: 100px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; background-color: var(--main-color-one); position: absolute; right: 20px; top: -50px; border-radius: 6px; -webkit-box-shadow: 0 0 10px 5px rgba(255, 255, 255, 0.5647058824); box-shadow: 0 0 10px 5px rgba(255, 255, 255, 0.5647058824); } .service__content-4 p { color: var(--black-2); padding-bottom: 5px; -webkit-transition: all 0.3s; transition: all 0.3s; position: relative; } .service__content-4 p::before { position: absolute; content: ""; width: 50px; height: 1px; left: 0; top: -15px; background-color: var(--black-2); -webkit-transition: all 0.3s; transition: all 0.3s; } .service__content-4 .link { width: 49px; height: 49px; background: var(--main-color-one); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; border-radius: 50%; color: #fff; font-size: 18px; border: 2px solid var(--white); position: absolute; left: 50%; bottom: -24px; -webkit-transform: translateX(-50%) scale(0); transform: translateX(-50%) scale(0); } .service__item .icon { width: 110px; height: 110px; display: -webkit-box; display: -ms-flexbox; display: flex; margin-left: 40px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-transform: translateY(50%); transform: translateY(50%); background: var(--main-color-one); border-radius: 20px; padding: 25px; } @media (max-width: 1199px) { .service__item .icon { height: 130px; margin-left: 30px; } } @media (max-width: 991px) { .service__item .icon { width: 140px; height: 100px; margin-left: 20px; } } .service__item .icon img { -webkit-filter: brightness(100); filter: brightness(100); } @media (max-width: 1199px) { .service__item .icon img { max-width: 80px; } } @media (max-width: 991px) { .service__item .icon img { max-width: 60px; } } .service__item-3 { position: relative; padding-left: 30px; } @media (max-width: 991px) { .service__item-3 { padding-left: 0; } } .service__item-3:first-child { padding-left: 0; } .service__item-3:first-child::before { display: none; } @media (max-width: 991px) { .service__item-3:nth-child(2) { padding-left: 10px; padding-right: 5px; } } .service__item-3::before { position: absolute; content: ""; width: 1px; height: 100%; top: 0; left: -50px; background-color: rgba(255, 255, 255, 0.2); } @media (max-width: 1199px) { .service__item-3::before { left: 0; } } @media (max-width: 991px) { .service__item-3::before { left: -15px; } } .service__item-3 .icon { margin-bottom: 50px; } @media (max-width: 991px) { .service__item-3 .icon { max-width: 100px; margin-bottom: 30px; } } .service__item-4 { background-color: var(--gray-2); -webkit-transition: all 0.3s; transition: all 0.3s; border-radius: 20px; } .service__item-4:nth-child(even) { -webkit-transform: translateY(50px); transform: translateY(50px); } @media (max-width: 991px) { .service__item-4:nth-child(even) { -webkit-transform: translateY(30px); transform: translateY(30px); } } @media (max-width: 767px) { .service__item-4:nth-child(even) { -webkit-transform: unset; transform: unset; } } .service__item-4:hover { background-color: var(--main-color-one); } .service__item-4:hover .service__title-4 { color: var(--white); } .service__item-4:hover .service__content-4 p { color: var(--white); } .service__item-4:hover .service__content-4 p::before { background-color: var(--white); } .service__item-4:hover .service__content-4 .link { -webkit-transform: translateX(-50%) scale(1); transform: translateX(-50%) scale(1); } .service__item-4 a img { width: 100%; border-radius: 20px 20px 0 0; } .service__details p { color: var(--black-4); padding-bottom: 25px; line-height: 1.7; } .service__details ul { padding-bottom: 15px; } .service__details li { font-weight: 500; color: var(--black-4); padding-bottom: 15px; position: relative; } .service__details .list-angle li { padding-left: 25px; } .service__details .list-angle li::before { position: absolute; content: "\f101"; font-weight: 700; font-family: "Font Awesome 6 Free"; left: 0; top: 4px; width: 15px; height: 15px; font-size: 14px; color: var(--blue); } .service__details .db-btn-main-color-one { color: var(--white); background-color: var(--main-color-one); border-radius: 50px; } .service__details .db-btn-main-color-one:before { border-radius: 50px; background-color: var(--black-3); } .service__details img { margin-bottom: 30px; } .service__details .feature { display: -ms-grid; display: grid; grid-gap: 20px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-grid-columns: 60px 20px auto; grid-template-columns: 60px auto; } .service__details .feature .title { font-weight: 600; font-size: 20px; line-height: 1.3; color: var(--secondary); padding-bottom: 5px; } .service__details .feature .icon { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 60px; height: 60px; background: var(--gray-2); border-radius: 100%; } .service__details .feature .icon img { margin: 0; } .service__details.btm .service__details-title { text-align: center; padding-bottom: 55px; } .service__details-title { font-weight: 600; font-size: 48px; line-height: 48px; letter-spacing: 0.16px; text-transform: uppercase; color: var(--secondary); padding-bottom: 15px; } @media (max-width: 1399px) { .service__details-title { font-size: 40px; } } @media (max-width: 1199px) { .service__details-title { font-size: 36px; } } @media (max-width: 767px) { .service__details-title { font-size: 30px; line-height: 1.2; } } .more-service__title { font-size: 20px; line-height: 1.3; font-weight: 600; color: var(--secondary); padding-bottom: 5px; -webkit-transition: all 0.3s; transition: all 0.3s; } .more-service__item { background: var(--white); -webkit-box-shadow: 0px 4.8px 24.4px -6px rgba(19, 16, 34, 0.1), 0px 4px 13px -2px rgba(19, 16, 34, 0.06); box-shadow: 0px 4.8px 24.4px -6px rgba(19, 16, 34, 0.1), 0px 4px 13px -2px rgba(19, 16, 34, 0.06); border-radius: 20px; overflow: hidden; } .more-service__item a img { width: 100%; } @media (max-width: 1199px) { .more-service__item { margin-bottom: 30px; } } .more-service__item:hover .more-service__title { color: var(--main-color-one); } .more-service__item img { margin: 0; } .more-service__content { padding: 20px 30px 40px; } @media (max-width: 1199px) { .more-service__content { padding: 20px 20px 30px; } } .more-service__content p { padding-bottom: 0; } .service__item.style2 .service__content { padding: 50px 40px 60px; border-radius: 40px; -webkit-box-shadow: 0px 10px 30px 0px rgba(0, 0, 0, 0.07); box-shadow: 0px 10px 30px 0px rgba(0, 0, 0, 0.07); background: #fff; } .service__item.style2 .service__content .icon-box { margin-bottom: 55px; } .service__item.style2 .service__content .icon-box img { -webkit-transition: 0.4s; transition: 0.4s; } .service__item.style2:hover .service__content .icon-box img { -webkit-transform: rotateY(180deg); transform: rotateY(180deg); } .single-intro-inner { border-radius: 20px; background: #fff; overflow: hidden; margin-bottom: 25px; } .single-intro-inner .details { padding: 50px 30px 40px; } .single-intro-inner .details .icon-box { background: var(--main-color-one); height: 100px; width: 100px; line-height: 100px; text-align: center; border-radius: 10px; margin-top: -100px; float: right; position: relative; z-index: 1; -webkit-transition: 0.4s; transition: 0.4s; } .single-intro-inner .details span { width: 41px; height: 1px; display: inline-block; background: #0E1E2A; margin-bottom: 4px; } .single-intro-inner .details p { margin-bottom: 5px; } .single-intro-inner:hover .icon-box { background: var(--black-3); } .exp-area { background-size: 42% 100%; background-position: top right; background-repeat: no-repeat; } .textslider_1 .textslider__slide { text-align: center; } .textslider_1 h2 { font-size: 80px; font-weight: 400; text-transform: capitalize; text-align: center; display: inline-block; position: relative; } .textslider_1 h2 span { position: absolute; right: -74px; } .textslider_2 .textslider__slide { text-align: center; } .textslider_2 h2 { font-size: 80px; font-weight: 400; text-transform: capitalize; text-align: center; display: inline-block; position: relative; color: rgba(182, 153, 116, 0.431372549); } .textslider_2 h2 span { position: absolute; right: -74px; } .faq__list .accordion-item.style-2 { border: 1px solid #D0D0D0; border-radius: 20px; } .faq__list .accordion-item.style-2 .accordion-button { padding-left: 20px; } .faq__list .accordion-item.style-2 .accordion-button::after { left: auto; right: 20px; background: transparent; } .who__area_inner { background-position: top right; background-repeat: no-repeat; background-size: 50% 100%; } .counter__area { background-color: var(--black-2); border-bottom: 4px solid rgba(255, 255, 255, 0.1); overflow: hidden; } .counter__area-3-hero { padding-left: 180px; padding-right: 180px; border-top: 2px solid rgba(255, 255, 255, 0.1); } @media (max-width: 1919px) { .counter__area-3-hero { padding-left: 90px; padding-right: 90px; } } @media (max-width: 1199px) { .counter__area-3-hero { padding-left: 30px; padding-right: 30px; } } @media (max-width: 991px) { .counter__area-3-hero .counter__item:last-child { padding-left: 40px; } } @media (max-width: 767px) { .counter__area-3-hero .counter__item:last-child { padding-left: 0; } } .counter__area-3-hero .counter__inner::before, .counter__area-3-hero .counter__inner::after { width: 2px; } @media (max-width: 1199px) { .counter__area-3-hero .counter__inner::after { left: 68%; } } @media (max-width: 991px) { .counter__area-3-hero .counter__inner::after { left: 67%; } } .counter__area-3-hero .counter__number { color: var(--blue); } @media (max-width: 767px) { .counter__area-3-hero .counter__number { padding-bottom: 10px; } } .counter__area-3 { background-color: var(--blue); } .counter__area-4 { background-color: var(--secondary); } .counter__area-6 { background-color: var(--secondary); } .counter__area-6 .counter__inner::before, .counter__area-6 .counter__inner::after { background-color: var(--main-color-one); } .counter__area-6 .counter__number { color: var(--main-color-one); } .counter__area-6 .counter__number span { -webkit-text-stroke-color: var(--main-color-one); text-decoration: underline; text-decoration-thickness: 5px; } .counter__list-3 { display: -ms-grid; display: grid; grid-gap: 60px 30px; -ms-grid-columns: 1fr 30px 1fr; grid-template-columns: 1fr 1fr; padding-right: 110px; } @media (max-width: 1199px) { .counter__list-3 { grid-gap: 30px 15px; padding-right: 0; } } @media (max-width: 767px) { .counter__list-3 { -ms-grid-columns: 1fr; grid-template-columns: 1fr; } } .counter__list-4 { gap: 30px; display: -ms-grid; display: grid; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-grid-columns: 1fr 30px 1fr 30px 1fr 30px 1fr; grid-template-columns: repeat(4, 1fr); } @media (max-width: 1399px) { .counter__list-4 { gap: 20px; } } @media (max-width: 1199px) { .counter__list-4 { gap: 50px; -ms-grid-columns: 1fr 50px 1fr; grid-template-columns: repeat(2, 1fr); } } @media (max-width: 767px) { .counter__list-4 { -ms-grid-columns: 1fr; grid-template-columns: 1fr; } } .counter__item-3 { padding: 55px; background-color: rgba(255, 255, 255, 0.1); } @media (max-width: 1199px) { .counter__item-3 { padding: 30px; } } .counter__item-4 { gap: 40px; display: -ms-grid; display: grid; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-grid-columns: 120px 40px auto; grid-template-columns: 120px auto; } @media (max-width: 1399px) { .counter__item-4 { gap: 20px; } } .counter__inner { gap: 30px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; position: relative; padding-top: 130px; padding-bottom: 120px; } @media (max-width: 1199px) { .counter__inner { padding-top: 100px; padding-bottom: 100px; } } @media (max-width: 767px) { .counter__inner { gap: 50px; padding-top: 60px; padding-bottom: 60px; -ms-flex-wrap: wrap; flex-wrap: wrap; } } .counter__inner::before { position: absolute; content: ""; width: 4px; height: 100%; left: 31%; top: 0; background-color: rgba(255, 255, 255, 0.1); } @media (max-width: 767px) { .counter__inner::before { display: none; } } .counter__inner::after { position: absolute; content: ""; width: 4px; height: 100%; left: 72%; top: 0; background-color: rgba(255, 255, 255, 0.1); } @media (max-width: 767px) { .counter__inner::after { display: none; } } .counter__left-4 { width: 120px; height: 120px; border-radius: 7px; padding: 15px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; background: rgba(255, 255, 255, 0.05); -webkit-box-shadow: 0px 4.8px 24.4px -6px rgba(19, 16, 34, 0.1), 0px 4px 13px -2px rgba(19, 16, 34, 0.06); box-shadow: 0px 4.8px 24.4px -6px rgba(19, 16, 34, 0.1), 0px 4px 13px -2px rgba(19, 16, 34, 0.06); } .counter__content-3 { padding-top: 30px; } @media (max-width: 1199px) { .counter__content-3 { padding-top: 0; } } @media (max-width: 991px) { .counter__content-3 { padding-top: 50px; } } .counter__content-3 ul { padding-top: 30px; padding-bottom: 40px; } .counter__content-3 ul li { font-weight: 500; font-size: 16px; line-height: 1.9; color: var(--white); padding-left: 35px; padding-bottom: 15px; position: relative; } .counter__content-3 ul li::before { position: absolute; content: "\f00c"; font-family: "Font Awesome 6 Free"; font-weight: 700; width: 20px; height: 20px; left: 0; top: 5px; border: 2px solid var(--white); border-radius: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; font-size: 11px; line-height: 13px; } .counter__content-3 a { color: var(--white); border-color: var(--white); border-width: 2px; } .counter__content-3 a:hover { color: var(--yellow); border-color: currentColor; } .counter__content-3 a:hover i { color: var(--white); } .counter__content-3 a i { color: var(--yellow); -webkit-transition: all 0.3s; transition: all 0.3s; } .counter__title { font-weight: 600; font-size: 38px; line-height: 1.3; color: var(--white); letter-spacing: 0.16px; text-transform: capitalize; min-width: 130px; } @media (max-width: 1199px) { .counter__title { font-size: 32px; } } .counter__title-3 { font-weight: 500; font-size: 20px; line-height: 1.3; color: var(--white); padding-left: 20px; padding-top: 10px; min-width: 180px; } .counter__title-4 { font-size: 20px; line-height: 1.2; font-weight: 600; color: var(--white); padding-top: 15px; text-transform: capitalize; } .counter__number { font-weight: 700; font-size: 100px; line-height: 1; letter-spacing: -3px; color: var(--main-color-one); text-transform: uppercase; position: relative; padding-bottom: 20px; } @media (max-width: 1199px) { .counter__number { font-size: 80px; padding-bottom: 30px; } } @media (max-width: 991px) { .counter__number { font-size: 60px; } } .counter__number span { opacity: 0.3; color: transparent; -webkit-text-stroke: 1px var(--main-color-one); position: absolute; left: 70px; top: 30px; } @media (max-width: 1199px) { .counter__number span { left: 30px; } } .counter__number-3 { font-weight: 700; font-size: 88px; line-height: 1; letter-spacing: 0.16px; text-transform: uppercase; color: transparent; -webkit-text-stroke: 1px var(--white); } @media (max-width: 1199px) { .counter__number-3 { font-size: 70px; } } .counter__number-4 { font-size: 48px; line-height: 1; font-weight: 600; letter-spacing: 0.16px; text-transform: uppercase; color: var(--white); } .faq__area { background-color: var(--black-2); overflow: hidden; } .faq__area .sec-subtitle { margin-bottom: 30px; } .faq__area-3 { position: relative; background-color: var(--gray-2); } .faq__area-3 .shape { position: absolute; left: 0; opacity: 0.3; bottom: 0; z-index: 0; } @media (max-width: 767px) { .faq__content { padding-bottom: 50px; } } .faq__content .sec-title { padding-top: 10px; } .faq__content .sec-subtitle span { -webkit-text-stroke: 1px var(--white); } .faq__content p { max-width: 425px; color: var(--white); margin-bottom: 80px; } @media (max-width: 767px) { .faq__content p { margin-bottom: 50px; } } .faq__content-3 { position: relative; z-index: 5; } @media (max-width: 991px) { .faq__content-3 { padding-bottom: 70px; } } .faq__content-3 p { max-width: 410px; color: var(--black-4); padding-bottom: 40px; } .faq__list .accordion-body { padding-top: 10px; } .faq__list .accordion-body p { color: var(--white-2); } .faq__list .accordion-item { margin-bottom: 30px; background-color: transparent; border: 1px solid var(--gray-3); border-radius: 20px; padding-top: 10px; padding-bottom: 10px; } @media (max-width: 767px) { .faq__list .accordion-item { margin-bottom: 20px; } } .faq__list .accordion-button { font-size: 20px; line-height: 1.3; font-weight: 500; color: var(--white); outline: none; border: none; -webkit-box-shadow: none; box-shadow: none; background-color: transparent; padding-left: 60px; } .faq__list .accordion-button::after { position: absolute; width: 30px; height: 30px; background: var(--main-color-one); content: "+"; -webkit-transform: unset; transform: unset; border-radius: 100%; text-align: center; font-size: 24px; line-height: 1.1; left: 20px; } .faq__list .accordion-button:not(.collapsed)::after { content: "-"; } .faq__list-3 .accordion-body { padding: 0 60px 0 105px; } @media (max-width: 1199px) { .faq__list-3 .accordion-body { padding: 0 60px 0 75px; } } @media (max-width: 767px) { .faq__list-3 .accordion-body { padding: 0 30px 0 45px; } } .faq__list-3 .accordion-body p { color: var(--black-4); } .faq__list-3 .accordion-item { border: 0; border-radius: 0; padding: 30px; background-color: transparent; border-bottom: 1px solid var(--blue); } @media (max-width: 1199px) { .faq__list-3 .accordion-item { padding: 30px 15px; } } @media (max-width: 767px) { .faq__list-3 .accordion-item { padding: 20px 0; } } .faq__list-3 .accordion-item:first-child { border-top: 1px solid var(--blue); } .faq__list-3 .accordion-button { font-size: 20px; line-height: 1.3; font-weight: 600; color: var(--black-2); outline: none; border: none; -webkit-box-shadow: none; box-shadow: none; background-color: transparent; padding: 0; gap: 60px; padding-bottom: 10px; padding-right: 35px; } @media (max-width: 1199px) { .faq__list-3 .accordion-button { gap: 30px; } } @media (max-width: 767px) { .faq__list-3 .accordion-button { gap: 15px; } } .faq__list-3 .accordion-button::after { background: none; position: absolute; width: 30px; height: 30px; content: "\f107"; font-family: "Font Awesome 6 Free"; -webkit-transform: unset; transform: unset; text-align: center; font-size: 36px; font-weight: 700; line-height: 1.1; color: var(--blue); -webkit-transition: all 0.3s; transition: all 0.3s; right: 0; } @media (max-width: 767px) { .faq__list-3 .accordion-button::after { font-size: 24px; } } .faq__list-3 .accordion-button:not(.collapsed)::after { content: "\f106"; } .faq__list-3 .accordion-button span { font-weight: 600; font-size: 48px; line-height: 0.8; color: transparent; display: inline-block; -webkit-text-stroke: 1px var(--black-2); } @media (max-width: 767px) { .faq__list-3 .accordion-button span { font-size: 32px; } } .team__area { padding-bottom: 300px; background-image: url(../imgs/shape/zigzag-2.png); background-position: bottom left; background-repeat: no-repeat; overflow: hidden; } @media (max-width: 1199px) { .team__area { padding-bottom: 200px; } } @media (max-width: 991px) { .team__area { padding-bottom: 90px; } } @media (max-width: 767px) { .team__area { padding-bottom: 50px; } } .team__area .sec-subtitle { margin-bottom: 40px; } .team__area-3 { position: relative; padding-top: 260px; } @media (max-width: 1199px) { .team__area-3 { padding-top: 200px; } } @media (max-width: 991px) { .team__area-3 { padding-top: 150px; } } @media (max-width: 767px) { .team__area-3 { padding-top: 60px; } } .team__area-3::after { position: absolute; content: ""; width: 100%; height: 500px; bottom: 0; left: 0; background-color: var(--gray-2); } @media (max-width: 1919px) { .team__area-3::after { height: 200px; } } .team__area-3 .sec-title-wrap { padding-bottom: 35px; } @media (max-width: 767px) { .team__area-3 .sec-title-wrap { padding-bottom: 20px; } } @media (max-width: 1919px) { .team__area-3 .plr-100 { padding-left: 30px; padding-right: 30px; } } @media (max-width: 767px) { .team__area-3 .plr-100 { padding-left: 15px; padding-right: 15px; } } .team__list { display: -ms-grid; display: grid; grid-gap: 30px; -ms-grid-columns: 1fr 30px 1fr 30px 1fr; grid-template-columns: 1fr 1fr 1fr; padding-top: 40px; } @media (max-width: 991px) { .team__list { grid-gap: 15px; } } @media (max-width: 767px) { .team__list { grid-gap: 40px; -ms-grid-columns: 1fr; grid-template-columns: 1fr; } } .team__member:nth-child(2) { padding-top: 40px; } @media (max-width: 767px) { .team__member:nth-child(2) { padding-top: 0; } } .team__member:nth-child(3) { padding-top: 80px; } @media (max-width: 767px) { .team__member:nth-child(3) { padding-top: 0; } } .team__member:hover .team__content { background-color: var(--main-color-one); } .team__member:hover .team__content p { opacity: 1; } .team__image { margin-left: 35px; position: relative; overflow: hidden; border-radius: 20px; } .team__image img { -webkit-transition: all 0.5s; transition: all 0.5s; } .team__image:hover img { -webkit-transform: scale(1.1); transform: scale(1.1); } @media (max-width: 1199px) { .team__image { margin-left: 25px; } } .team__image-3 { overflow: hidden; } .team__image-3 img { width: 100%; -webkit-transition: all 0.5s; transition: all 0.5s; } .team__image-3 img:hover { -webkit-transform: scale(1.1); transform: scale(1.1); } .team__content { max-width: 82%; margin-top: -70px; padding: 110px 60px 40px 60px; background-color: var(--gray-2); -webkit-transition: all 0.5s; transition: all 0.5s; border-radius: 20px; } @media (max-width: 1399px) { .team__content { max-width: 90%; padding: 100px 40px 40px; } } @media (max-width: 1199px) { .team__content { max-width: 95%; padding: 90px 30px 40px; } } @media (max-width: 991px) { .team__content { padding: 90px 20px 30px; } } .team__content p { font-size: 16px; font-weight: 500; opacity: 0.6; color: var(--black-2); padding-top: 10px; } .team__content-3 { text-align: center; padding: 0 30px 25px; background: var(--white); margin-top: -50px; margin-left: 40px; margin-right: 40px; position: relative; z-index: 1; } @media (max-width: 1919px) { .team__content-3 { margin-left: 15px; margin-right: 15px; } } .team__content-3 p { font-weight: 500; font-size: 16px; line-height: 1.9; color: var(--black-2); } .team__content-3 .social-media { gap: 10px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .team__content-3 .social-media li a { width: 50px; height: 50px; border-radius: 5px; display: inline-block; background-color: var(--gray-2); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; color: var(--blue); } .team__content-3 .social-media li a:hover { color: var(--main-color-one); } .team__title { font-size: 32px; line-height: 1; font-weight: 600; color: var(--black-2); } @media (max-width: 1199px) { .team__title { font-size: 30px; } } @media (max-width: 991px) { .team__title { font-size: 24px; } } .team__title-3 { font-weight: 600; font-size: 20px; line-height: 1.3; color: var(--black-2); -webkit-transition: all 0.3s; transition: all 0.3s; } .team__title-3:hover { color: var(--main-color-one); } .team__awards { text-align: right; } .team__award { font-weight: 700; font-size: 128px; line-height: 0.8; text-transform: uppercase; opacity: 0.2; -webkit-text-stroke: 1px var(--black-2); color: transparent; } @media (max-width: 767px) { .team__award { font-size: 80px; } } .share__wrap { position: absolute; top: 0; left: 0; padding-top: 30px; padding-left: 30px; } .share__wrap li { position: absolute; top: 90px; -webkit-transition: all 0.5s; transition: all 0.5s; -webkit-transform: translateY(0); transform: translateY(0); opacity: 0; visibility: hidden; z-index: 9; border-radius: 6px; } .share__wrap li a { width: 50px; height: 50px; display: inline-block; background-color: var(--white); text-align: center; line-height: 50px; font-size: 18px; color: var(--black-2); border-radius: 6px; } .share__wrap li a:hover { background-color: var(--main-color-one); color: #fff; } .share__wrap .active li { top: 30px; opacity: 1; visibility: visible; -webkit-transform: translateY(calc(60px * var(--i))); transform: translateY(calc(60px * var(--i))); } .share__wrap .share-btn { width: 50px; height: 50px; display: inline-block; background-color: var(--main-color-one); text-align: center; line-height: 50px; font-size: 18px; color: #fff; border: none; outline: none; margin-bottom: 10px; border-radius: 6px; } .team-details-page .thumb { background: #f5f3ef; padding: 40px 0 40px 0; margin-right: 40px; border-radius: 20px; } .team-details-page .thumb img { width: 100%; margin-right: -80px; border-radius: 20px; } .team-details-page .social-media li { display: inline-block; margin-right: 6px; } .team-details-page .social-media li a { height: 46px; width: 46px; line-height: 46px; border-radius: 0; background: var(--main-color-one); font-size: 16px; color: #fff; display: inline-block; text-align: center; border-radius: 6px; } .team-details-page .social-media li a:hover { background: var(--black-3); } .newsletter__area { background-color: var(--main-color-one); position: relative; } .newsletter__area .sec-subtitle { margin-bottom: 25px; } .newsletter__left { position: absolute; bottom: 0; } @media (max-width: 991px) { .newsletter__left { display: none; } } @media (max-width: 1199px) { .newsletter__left img { max-width: 400px; } } .newsletter__right { padding-left: 70px; } @media (max-width: 991px) { .newsletter__right { padding-left: 0; } } .newsletter__right .sec-subtitle { color: var(--black-2); } .newsletter__right .sec-subtitle span { -webkit-text-stroke: 2px var(--black-2); } .newsletter__right form { position: relative; margin-top: 20px; } @media (max-width: 767px) { .newsletter__right form { margin-top: 15px; } } .newsletter__right input[type=email] { font-size: 20px; padding: 20px 25px; border: none; outline: none; width: 100%; font-weight: 600; color: var(--gray-3); padding-right: 200px; border-radius: 60px; } @media (max-width: 1199px) { .newsletter__right input[type=email] { padding-right: 50px; } } @media (max-width: 991px) { .newsletter__right input[type=email] { padding-right: 200px; } } @media (max-width: 767px) { .newsletter__right input[type=email] { font-size: 18px; padding: 20px; } } .newsletter__right input[type=email]::-webkit-input-placeholder { color: var(--gray-3); opacity: 0.5; } .newsletter__right input[type=email]::-moz-placeholder { color: var(--gray-3); opacity: 0.5; } .newsletter__right input[type=email]:-ms-input-placeholder { color: var(--gray-3); opacity: 0.5; } .newsletter__right input[type=email]::-ms-input-placeholder { color: var(--gray-3); opacity: 0.5; } .newsletter__right input[type=email]::placeholder { color: var(--gray-3); opacity: 0.5; } .newsletter__right .submit { position: absolute; right: 5px; top: 5px; font-size: 14px; font-weight: 600; text-transform: uppercase; background-color: var(--black-2); padding: 20px 30px; border: none; outline: none; color: var(--white); letter-spacing: 1.6px; border-radius: 60px; } .newsletter__right .submit:before { border-radius: 60px; } @media (max-width: 767px) { .newsletter__right .submit { padding: 18px 15px; position: relative; top: 5px; } } .who__area { background-image: url(../imgs/shape/zigzag.png); overflow: hidden; } .who__area .sec-subtitle { margin-bottom: 30px; } .who__area-6 .who__feature, .who__area-6 .project-completed::after { border-color: var(--main-color-one); } .who__left .sec-title-wrap { padding-bottom: 80px; } @media (max-width: 991px) { .who__left .sec-title-wrap { padding-bottom: 50px; } } .who__right { position: relative; } @media (max-width: 1399px) { .who__right { margin-top: 60px; } } .who__right .shape { position: absolute; right: 0; bottom: 18%; } .who__right .shape-2 { position: absolute; left: 23%; bottom: 15%; } @media (max-width: 1399px) { .who__right .shape-2 { bottom: 5%; } } @media (max-width: 1199px) { .who__right .shape-2 { bottom: -30px; left: 15%; } } .who__right .shape-3 { position: absolute; left: 17%; top: 8%; } @media (max-width: 1199px) { .who__right .shape-3 { left: -40px; top: 5%; } } @media (max-width: 991px) { .who__right .shape-3 { left: 20%; } } @media (max-width: 767px) { .who__right .shape-3 { left: 0; top: -80px; } } .who__right .main-img { text-align: right; } .who__right .main-img img { margin-right: -50px; } @media (max-width: 1399px) { .who__right .main-img img { max-width: 500px; } } @media (max-width: 1199px) { .who__right .main-img img { margin-right: -30px; } } @media (max-width: 767px) { .who__right .main-img img { max-width: 100%; margin-right: 0; } } .who__project { position: absolute; top: 40%; left: 20%; } @media (max-width: 1199px) { .who__project { left: -45px; } } @media (max-width: 991px) { .who__project { left: 10%; } } @media (max-width: 767px) { .who__project { position: unset; margin-top: -90px; margin-left: 40px; } } .who__features { padding-right: 80px; } @media (max-width: 1399px) { .who__features { padding-right: 30px; } } @media (max-width: 767px) { .who__features { padding-right: 0; } } .who__feature { display: -ms-grid; display: grid; grid-gap: 30px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-grid-columns: 100px 30px auto; grid-template-columns: 100px auto; border-bottom: 2px solid rgba(14, 30, 42, 0.1254901961); padding-bottom: 15px; margin-bottom: 30px; } @media (max-width: 767px) { .who__feature { grid-gap: 20px; -ms-grid-columns: 60px 20px auto; grid-template-columns: 60px auto; } } .who__feature:last-child { border: none; padding: 0; margin: 0; } .who__feature .number span { font-weight: 600; font-size: 40px; line-height: 1; letter-spacing: 0.16px; text-transform: uppercase; color: var(--black-2); width: 86px; height: 86px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; background-color: var(--white); -webkit-box-shadow: 0px 4.8px 24.4px -6px rgba(19, 16, 34, 0.1); box-shadow: 0px 4.8px 24.4px -6px rgba(19, 16, 34, 0.1); } @media (max-width: 767px) { .who__feature .number span { width: 60px; height: 60px; font-size: 30px; } } .who__content .title { font-weight: 600; font-size: 20px; line-height: 24px; color: var(--black-2); } .who__content p { padding-top: 15px; color: var(--black-4); } .textslider__area { padding-top: 50px; padding-bottom: 50px; background-color: var(--black-2); } @media (max-width: 1199px) { .textslider__area { padding-top: 30px; padding-bottom: 30px; } } .textslider__area .swiper-wrapper { -webkit-transition-timing-function: linear; transition-timing-function: linear; } .textslider__text { font-weight: 700; font-size: 100px; line-height: 100px; letter-spacing: -3px; text-transform: capitalize; color: var(--white); } @media (max-width: 1399px) { .textslider__text { font-size: 80px; } } @media (max-width: 1199px) { .textslider__text { font-size: 60px; } } .textslider__text span { color: var(--main-color-one); } .blog__area .sec-title-wrap { text-align: center; padding-bottom: 40px; } @media (max-width: 767px) { .blog__area .sec-title-wrap { padding-bottom: 30px; } } .blog__area .sec-subtitle { margin-bottom: 25px; } .blog__area .sec-subtitle span { left: 50%; width: 100%; -webkit-transform: translate(-50%, -52%); transform: translate(-50%, -52%); } .blog__area-3 .sec-title-wrap { text-align: center; padding-bottom: 30px; } .blog__area-4 { background-image: url(../imgs/blog/4/bg.png); } .blog__area-4 .sec-subtitle { color: var(--main-color-one); } @media (max-width: 767px) { .blog__area-4 .sec-title br { display: none; } } .blog__area-4 .db-btn-border i { -webkit-transform: rotate(45deg); transform: rotate(45deg); } .blog__top-4 { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; margin-bottom: 50px; } @media (max-width: 767px) { .blog__top-4 { -ms-flex-wrap: wrap; flex-wrap: wrap; } } .blog__list { display: -ms-grid; display: grid; grid-gap: 30px; -ms-grid-columns: 1fr 30px 1fr 30px 1fr; grid-template-columns: 1fr 1fr 1fr; } @media (max-width: 991px) { .blog__list { -ms-grid-columns: 1fr 30px 1fr; grid-template-columns: 1fr 1fr; } } @media (max-width: 767px) { .blog__list { gap: 50px; -ms-grid-columns: 1fr; grid-template-columns: 1fr; } } .blog__item a { margin-top: 40px; border-color: var(--main-color-one); } @media (max-width: 767px) { .blog__item a { margin-top: 25px; } } .blog__item a img { border-radius: 20px; } .blog__item-3 a { margin-top: 30px; border-color: var(--black-2); } .blog__item-3 a i { color: var(--blue); } .blog__item-4 { position: relative; } .blog__item-4::after { position: absolute; content: ""; left: 0; bottom: 0; width: 100%; height: 80%; z-index: -1; background-color: var(--gray-2); border-radius: 20px; } .blog__item-4 .db-btn-arrow { margin-top: 30px; border-color: var(--black-2); } .blog__item-4 .db-btn-arrow i { color: var(--main-color-one); -webkit-transform: rotate(45deg); transform: rotate(45deg); } .blog__content-4 { padding: 0 50px 50px; } @media (max-width: 991px) { .blog__content-4 { padding: 0 30px 40px; } } .blog__meta, .blog__meta-4, .blog__meta-3 { gap: 50px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding-top: 30px; padding-bottom: 20px; } @media (max-width: 991px) { .blog__meta, .blog__meta-4, .blog__meta-3 { gap: 10px; -ms-flex-wrap: wrap; flex-wrap: wrap; } } @media (max-width: 767px) { .blog__meta, .blog__meta-4, .blog__meta-3 { gap: 30px; padding-bottom: 15px; } } .blog__meta li a, .blog__meta-4 li a, .blog__meta-3 li a { font-weight: 500; font-size: 16px; line-height: 1.9; color: var(--black-4); } .blog__meta li a i, .blog__meta-4 li a i, .blog__meta-3 li a i { padding-right: 5px; color: var(--main-color-one); } .blog__meta-3 { padding-top: 25px; padding-bottom: 15px; } .blog__meta-3 li a i { color: var(--blue); } .blog__meta-4 { gap: 20px; padding-top: 25px; padding-bottom: 15px; } .blog__meta-4 li a i { color: var(--main-color-one); } .blog__title { font-weight: 600; font-size: 20px; line-height: 1.3; color: var(--black-2); -webkit-transition: all 0.3s; transition: all 0.3s; } .blog__title:hover { color: var(--blue); } .blog__title-3 { font-weight: 600; font-size: 20px; line-height: 1.3; color: var(--gray-5); padding-bottom: 20px; -webkit-transition: all 0.3s; transition: all 0.3s; border-bottom: 1px solid var(--blue); } .blog__title-3:hover { color: var(--blue); } @media (max-width: 991px) { .blog__title-3 { padding-bottom: 10px; } .blog__title-3 br { display: none; } } .blog__thumb, .blog__thumb-3 { position: relative; } .blog__thumb .date, .blog__thumb-3 .date { font-weight: 500; font-size: 20px; line-height: 1.2; color: #fff; position: absolute; top: 30px; right: 30px; padding: 16px 12px; background-color: var(--main-color-one); text-align: center; border-radius: 15px; } @media (max-width: 991px) { .blog__thumb .date, .blog__thumb-3 .date { right: 20px; font-size: 18px; } } .blog__thumb-3 .date { background-color: var(--yellow); bottom: unset; right: 0; top: 0; } .blog__thumb-4 { padding-left: 50px; } @media (max-width: 991px) { .blog__thumb-4 { padding-left: 30px; } } .blog__thumb-4 img { width: 100%; border-radius: 20px; } .contact__area { position: relative; } .contact__area::after { position: absolute; content: ""; width: 42%; height: 100%; right: 0; top: 0; background-color: var(--white); z-index: 0; } .contact__area .sec-subtitle { margin-bottom: 25px; } .contact__area-4 { background-color: var(--gray-2); position: relative; } @media (max-width: 1199px) { .contact__area-4 { padding-bottom: 150px; } } .contact__area-4 .bg-shadow { font-weight: 600; font-size: 300px; line-height: 1; letter-spacing: 1px; text-transform: capitalize; color: #0E1E2A; opacity: 0.03; position: absolute; left: 50%; bottom: 50px; -webkit-transform: translateX(-50%); transform: translateX(-50%); } @media (max-width: 1199px) { .contact__area-4 .bg-shadow { font-size: 220px; } } @media (max-width: 991px) { .contact__area-4 .bg-shadow { font-size: 160px; } } @media (max-width: 767px) { .contact__area-4 .bg-shadow { font-size: 80px; } } .contact__btm { background-color: var(--main-color-one); } .contact__content { background-image: url(../imgs/icon/arrow-xxl.png); background-repeat: no-repeat; background-position: 88% 75%; position: relative; z-index: 3; } .contact__content .sec-subtitle { color: var(--black-2); } .contact__content .sec-subtitle span { -webkit-text-stroke-color: var(--black-2); } .contact__content-4 { margin-left: 60px; } @media (max-width: 1199px) { .contact__content-4 { margin-left: 20px; } } .contact__content-4 .call { gap: 30px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; background: var(--blue); padding: 35px 25px; width: 80%; position: relative; z-index: 5; } @media (max-width: 1399px) { .contact__content-4 .call { width: 100%; } } @media (max-width: 991px) { .contact__content-4 .call { gap: 20px; } } .contact__content-4 .call span { width: 75px; height: 75px; background: var(--yellow-2); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; border-radius: 100%; font-size: 25px; color: var(--blue); } @media (max-width: 991px) { .contact__content-4 .call span { width: 60px; height: 60px; font-size: 20px; } } .contact__content-4 .call p { font-weight: 500; font-size: 16px; line-height: 1.8; color: var(--white); } .contact__content-4 .call a { font-weight: 600; font-size: 48px; line-height: 48px; display: block; letter-spacing: 0.16px; text-transform: uppercase; color: #F4F5FA; } @media (max-width: 1199px) { .contact__content-4 .call a { font-size: 40px; } } @media (max-width: 991px) { .contact__content-4 .call a { font-size: 30px; line-height: 1.1; } } .contact__form, .contact__form-4 { padding: 100px 60px; background-color: var(--black-2); -webkit-transform: translateY(-110px); transform: translateY(-110px); position: relative; z-index: 9; border-radius: 20px; } @media (max-width: 991px) { .contact__form, .contact__form-4 { padding: 60px 20px; } } @media (max-width: 767px) { .contact__form, .contact__form-4 { -webkit-transform: unset; transform: unset; } } .contact__form form input, .contact__form-4 form input, .contact__form form textarea, .contact__form-4 form textarea { font-weight: 500; font-size: 16px; line-height: 30px; color: var(--white); width: 100%; margin-bottom: 10px; border: 1px solid var(--white); background: transparent; opacity: 1; padding: 12px 20px; text-transform: capitalize; border-radius: 30px; } .contact__form form input::-webkit-input-placeholder, .contact__form-4 form input::-webkit-input-placeholder, .contact__form form textarea::-webkit-input-placeholder, .contact__form-4 form textarea::-webkit-input-placeholder { color: var(--white); } .contact__form form input::-moz-placeholder, .contact__form-4 form input::-moz-placeholder, .contact__form form textarea::-moz-placeholder, .contact__form-4 form textarea::-moz-placeholder { color: var(--white); } .contact__form form input:-ms-input-placeholder, .contact__form-4 form input:-ms-input-placeholder, .contact__form form textarea:-ms-input-placeholder, .contact__form-4 form textarea:-ms-input-placeholder { color: var(--white); } .contact__form form input::-ms-input-placeholder, .contact__form-4 form input::-ms-input-placeholder, .contact__form form textarea::-ms-input-placeholder, .contact__form-4 form textarea::-ms-input-placeholder { color: var(--white); } .contact__form form input::placeholder, .contact__form-4 form input::placeholder, .contact__form form textarea::placeholder, .contact__form-4 form textarea::placeholder { color: var(--white); } .contact__form form textarea, .contact__form-4 form textarea { height: 160px; resize: none; margin-bottom: 25px; } .contact__form form .submit, .contact__form-4 form .submit { width: 100%; font-size: 14px; font-weight: 600; padding: 14px 20px; letter-spacing: 1.6px; text-transform: uppercase; background-color: var(--main-color-one); border: none; color: var(--white); -webkit-transition: all 0.3s; transition: all 0.3s; } .contact__form form .submit::before, .contact__form-4 form .submit::before { background-color: var(--black-3); border-radius: 30px; } .contact__form form .submit i, .contact__form-4 form .submit i { font-size: 20px; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } .contact__form-4 { -webkit-transform: unset; transform: unset; background-color: var(--secondary); } .contact__form-4 form input, .contact__form-4 form textarea { border-color: rgba(255, 255, 255, 0.2); } .contact__form-4 form .submit { background: var(--blue); } .contact__form-4 form .submit i { -webkit-transform: rotate(45deg); transform: rotate(45deg); color: var(--main-color-one); } .contact__img-4 { position: relative; margin-top: 70px; z-index: 1; padding-left: 80px; } .contact__img-4 .shpae { position: absolute; left: 120px; top: -31px; } .contact__img-4 .shpae-2 { position: absolute; right: 12px; top: -25px; } .contact__img-4 .shpae-3 { position: absolute; left: 25px; top: 40%; } .contact__img-4 .satisfy-clients { position: absolute; bottom: -50px; left: 0; } @media (max-width: 991px) { .contact__img-4 .satisfy-clients { width: 220px; padding: 30px; bottom: -100px; } } .contact__media { padding-top: 30px; } .contact__media li { display: -ms-grid; display: grid; grid-gap: 30px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-grid-columns: 50px 30px auto; grid-template-columns: 50px auto; margin-bottom: 35px; } @media (max-width: 767px) { .contact__media li:last-child { margin-bottom: 0; } } .contact__media li span { width: 50px; height: 50px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; border: 1px solid #fff; font-size: 24px; color: #fff; } .contact__media li a { font-weight: 500; font-size: 16px; line-height: 1.8; display: block; color: #fff; } .contact__media li a:hover { color: var(--black-4); } .form__title { font-weight: 700; font-size: 100px; line-height: 100px; letter-spacing: -3px; text-transform: uppercase; opacity: 0.5; color: transparent; -webkit-text-stroke: 1px var(--black-2); padding-bottom: 30px; } @media (max-width: 1199px) { .form__title { font-size: 80px; padding-left: 50px; padding-bottom: 20px; } } @media (max-width: 991px) { .form__title { font-size: 60px; padding-left: 20px; } } .contact__form-5 { -webkit-transform: unset !important; transform: unset !important; background-color: #fff !important; } .contact__form-5 form input { border-color: #CFD2D4 !important; border-radius: 20px; color: #0E1E2A !important; } .contact__form-5 form input::-webkit-input-placeholder { color: #0E1E2A !important; } .contact__form-5 form input::-moz-placeholder { color: #0E1E2A !important; } .contact__form-5 form input:-ms-input-placeholder { color: #0E1E2A !important; } .contact__form-5 form input::-ms-input-placeholder { color: #0E1E2A !important; } .contact__form-5 form input::placeholder { color: #0E1E2A !important; } .contact__form-5 form textarea { border-color: #CFD2D4 !important; border-radius: 20px; color: #0E1E2A !important; } .contact__form-5 form textarea::-webkit-input-placeholder { color: #0E1E2A !important; } .contact__form-5 form textarea::-moz-placeholder { color: #0E1E2A !important; } .contact__form-5 form textarea:-ms-input-placeholder { color: #0E1E2A !important; } .contact__form-5 form textarea::-ms-input-placeholder { color: #0E1E2A !important; } .contact__form-5 form textarea::placeholder { color: #0E1E2A !important; } .contact__form-5 form button { border-radius: 30px !important; color: #fff !important; } .brand__inner { padding-left: 150px; padding-right: 150px; } @media (max-width: 1399px) { .brand__inner { padding-left: 90px; padding-right: 90px; } } @media (max-width: 1199px) { .brand__inner { padding-left: 30px; padding-right: 30px; } } .brand__slider .swiper-wrapper { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-transition-timing-function: linear; transition-timing-function: linear; } .brand__slide { text-align: center; } .gallery__title-wrap-3 { padding-left: 440px; padding-bottom: 60px; } @media (max-width: 1199px) { .gallery__title-wrap-3 { padding-left: 220px; padding-bottom: 40px; } } @media (max-width: 991px) { .gallery__title-wrap-3 { padding-left: 60px; } } @media (max-width: 767px) { .gallery__title-wrap-3 { padding-left: 0; padding-bottom: 20px; } } .gallery__top-3 { display: -ms-grid; display: grid; grid-gap: 30px; -ms-grid-columns: 1.43fr 30px 1fr; grid-template-columns: 1.43fr 1fr; margin-bottom: 40px; } @media (max-width: 1399px) { .gallery__top-3 { grid-gap: 20px; margin-bottom: 30px; -ms-grid-columns: 1.52fr 20px 1fr; grid-template-columns: 1.52fr 1fr; } } @media (max-width: 1199px) { .gallery__top-3 { -ms-grid-columns: 1.74fr 20px 1fr; grid-template-columns: 1.74fr 1fr; } } @media (max-width: 991px) { .gallery__top-3 { -ms-grid-columns: 1fr; grid-template-columns: 1fr; } .gallery__top-3 .gallery__item-3:last-child { display: -ms-grid; display: grid; grid-gap: 30px; -ms-grid-columns: 1fr 30px 1fr; grid-template-columns: 1fr 1fr; } } @media (max-width: 767px) { .gallery__top-3 .gallery__item-3:last-child { -ms-grid-columns: 1fr; grid-template-columns: 1fr; } } .gallery__btm-3 { display: -ms-grid; display: grid; grid-gap: 30px; -ms-grid-columns: 1fr 30px 1fr 30px 1fr; grid-template-columns: 1fr 1fr 1fr; } @media (max-width: 1399px) { .gallery__btm-3 { grid-gap: 20px; } } @media (max-width: 767px) { .gallery__btm-3 { -ms-grid-columns: 1fr; grid-template-columns: 1fr; } } .gallery__item-3 p { color: var(--black-4); padding-bottom: 45px; padding-right: 20px; } @media (max-width: 1399px) { .gallery__item-3 p { padding-bottom: 25px; } } @media (max-width: 767px) { .gallery__item-3 p { padding: 0; } } .gallery__item-3 img { width: 100%; } .process__area-4 .sec-subtitle { color: var(--main-color-one); } @media (max-width: 767px) { .process__area-4 .sec-title br { display: none; } } .process__title-3, .process__title-4 { font-size: 20px; line-height: 1; font-weight: 600; padding-bottom: 10px; color: var(--black-2); } .process__title-wrap-3 { text-align: center; padding-bottom: 60px; } @media (max-width: 991px) { .process__title-wrap-3 { padding-bottom: 40px; } } .process__list-3 { display: -ms-grid; display: grid; grid-gap: 40px; -ms-grid-columns: 1fr; grid-template-columns: 1fr; } .process__list-4 { display: -ms-grid; display: grid; -ms-grid-columns: 1fr 1fr; grid-template-columns: 1fr 1fr; } @media (max-width: 767px) { .process__list-4 { -ms-grid-columns: 1fr; grid-template-columns: 1fr; } } .process__item-3 { display: -ms-grid; display: grid; grid-gap: 30px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-grid-columns: 1fr 30px 4fr 30px 1fr; grid-template-columns: 1fr 4fr 1fr; border-bottom: 2px solid rgba(0, 0, 0, 0.1); padding-bottom: 30px; } @media (max-width: 1199px) { .process__item-3 { -ms-grid-columns: 1fr 30px 3.5fr 30px 1fr; grid-template-columns: 1fr 3.5fr 1fr; } } @media (max-width: 991px) { .process__item-3 { -ms-grid-columns: 1fr 30px 3fr 30px 1.5fr; grid-template-columns: 1fr 3fr 1.5fr; } } @media (max-width: 767px) { .process__item-3 { -ms-grid-columns: 1fr; grid-template-columns: 1fr; } } .process__item-3 .serial { font-size: 70px; line-height: 1; font-weight: 600; letter-spacing: 0.2px; text-transform: uppercase; padding-left: 20px; color: transparent; -webkit-text-stroke: 1px var(--black-2); } .process__item-4 { padding: 40px 10px; border-bottom: 1px solid #e9e9e9; display: -ms-grid; display: grid; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-grid-columns: 145px auto; grid-template-columns: 145px auto; } @media (max-width: 991px) { .process__item-4 { padding: 30px 10px; -ms-grid-columns: 100px auto; grid-template-columns: 100px auto; } } .process__item-4:nth-child(1), .process__item-4:nth-child(2) { border-top: 1px solid #e9e9e9; } .process__item-4:nth-child(even) { position: relative; padding-left: 10px; -ms-grid-columns: 180px auto; grid-template-columns: 180px auto; } @media (max-width: 991px) { .process__item-4:nth-child(even) { -ms-grid-columns: 100px auto; grid-template-columns: 100px auto; } } .process__item-4:nth-child(even)::before { position: absolute; content: ""; width: 2px; height: 60%; left: 0; top: 20%; background-color: rgba(14, 30, 42, 0.1); } @media (max-width: 767px) { .process__item-4:nth-child(even)::before { display: none; } } .process__item-4 .serial { font-size: 100px; line-height: 1; font-weight: 600; letter-spacing: -3px; text-transform: uppercase; padding-left: 20px; color: transparent; -webkit-text-stroke: 2px var(--main-color-one); } @media (max-width: 991px) { .process__item-4 .serial { font-size: 60px; padding-left: 10px; } } .process__item-4 p { max-width: 390px; color: var(--black-4); padding-top: 10px; } .process__content-3 p { max-width: 320px; color: var(--black-4); } .process__btn-3 { text-align: right; } @media (max-width: 767px) { .process__btn-3 { text-align: left; } } .process__btn-3 a { border-color: rgba(0, 0, 0, 0.1); } .process__btn-3 a:hover { border-color: var(--blue); } .process__btn-3 a i { color: var(--blue); } .testimonial__area-3 { background-color: var(--secondary); } .testimonial__left-3 p { color: var(--white); padding-bottom: 40px; } .testimonial__left-3 a { color: var(--white); border-color: var(--white); } .testimonial__left-3 a:hover { color: var(--blue); border-color: currentColor; } .testimonial__left-3 a i { color: var(--blue); -webkit-transition: all 0.3s; transition: all 0.3s; } .testimonial__right-3 { position: relative; margin-left: 20px; } @media (max-width: 991px) { .testimonial__right-3 { margin-left: 0; } } .testimonial__slider-3 { padding: 150px 45px 90px; text-align: center; background-color: var(--blue); background-repeat: no-repeat; background-position: center 100px; background-image: url(../imgs/testimonial/3/quote.png); position: absolute; right: -60px; width: 100%; } @media (max-width: 1199px) { .testimonial__slider-3 { padding: 90px 30px 60px; right: -20px; } } @media (max-width: 991px) { .testimonial__slider-3 { width: 105%; padding: 80px 20px 50px; } } @media (max-width: 767px) { .testimonial__slider-3 { position: unset; margin-top: 40px; width: 100%; padding: 50px 20px; } } .testimonial__slide-3 p { color: var(--white); padding-bottom: 100px; } @media (max-width: 1199px) { .testimonial__slide-3 p { padding-bottom: 60px; } } @media (max-width: 767px) { .testimonial__slide-3 p { padding-bottom: 40px; } } .testimonial__content-3 { gap: 20px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .testimonial__content-3 .img img { width: 80px; height: 80px; border-radius: 100%; border: 1px solid var(--yellow); } .testimonial__content-3 .info { text-align: left; } .testimonial__content-3 .rating { gap: 3px; display: -webkit-box; display: -ms-flexbox; display: flex; margin-top: 5px; } .testimonial__content-3 .rating li { font-size: 14px; color: var(--yellow); } .client__name-3 { font-size: 20px; line-height: 1.2; font-weight: 500; color: var(--white); padding-bottom: 5px; } .client__role-3 { font-size: 16px; line-height: 1.2; font-weight: 400; color: var(--white-2); } .breadcrumb__area { padding-top: 300px; padding-bottom: 192px; background-image: url(../imgs/hero/breadcrumb.png); background-position: center; background-repeat: no-repeat; background-size: cover; } @media (max-width: 1199px) { .breadcrumb__area { padding-top: 220px; padding-bottom: 150px; } } @media (max-width: 767px) { .breadcrumb__area { padding-top: 160px; padding-bottom: 80px; } } .breadcrumb__inner { gap: 30px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } @media (max-width: 767px) { .breadcrumb__inner { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } } .breadcrumb__right li { display: inline-block; padding-right: 40px; position: relative; } .breadcrumb__right li::after { position: absolute; content: "\f105"; font-family: "Font Awesome 6 Free"; font-weight: 900; right: 15px; top: 3px; color: var(--secondary); } .breadcrumb__right li:last-child { padding-right: 0; } .breadcrumb__right li:last-child::after { display: none; } .breadcrumb__right li a { font-weight: 600; font-size: 20px; line-height: 1.3; color: var(--secondary); text-transform: capitalize; } @media (max-width: 767px) { .breadcrumb__right li a { font-size: 18px; } } .breadcrumb__right li a:hover { color: var(--main-color-one); } .breadcrumb__title { font-weight: 600; font-size: 48px; line-height: 1; letter-spacing: 0.16px; color: var(--secondary); text-transform: capitalize; } @media (max-width: 767px) { .breadcrumb__title { font-size: 36px; } } .portfolio__area-4 { background-color: var(--secondary); } .portfolio__area-4 .sec-title-wrap { text-align: center; padding-bottom: 50px; } @media (max-width: 767px) { .portfolio__area-4 .sec-title-wrap { padding-bottom: 20px; } } .portfolio__area-4 .sec-subtitle { color: var(--yellow); } @media (max-width: 767px) { .portfolio__area-4 .sec-title br { display: none; } } .portfolio__area-6 { padding-bottom: 200px; } @media (max-width: 991px) { .portfolio__area-6 { padding-bottom: 150px; } } @media (max-width: 767px) { .portfolio__area-6 { padding-bottom: 130px; } } .portfolio__list-6 { display: -ms-grid; display: grid; grid-gap: 140px 30px; -ms-grid-columns: 1fr 30px 1fr 30px 1fr; grid-template-columns: repeat(3, 1fr); } @media (max-width: 991px) { .portfolio__list-6 { grid-gap: 120px 30px; -ms-grid-columns: 1fr 30px 1fr; grid-template-columns: 1fr 1fr; } } @media (max-width: 767px) { .portfolio__list-6 { grid-gap: 100px; -ms-grid-columns: 1fr; grid-template-columns: 1fr; } } .portfolio__item-4 { position: relative; } .portfolio__item-4 img { width: 100%; border-radius: 20px; } .portfolio__slider-4 { padding-bottom: 200px; } @media (max-width: 767px) { .portfolio__slider-4 { padding-bottom: 120px; } } .portfolio__content-4 { position: absolute; right: 0; bottom: 0; width: 90%; padding: 32px 40px; background: var(--white); -webkit-transform: translateY(50%); transform: translateY(50%); -webkit-box-shadow: 0px 4.8px 24.4px -6px rgba(19, 16, 34, 0.1); box-shadow: 0px 4.8px 24.4px -6px rgba(19, 16, 34, 0.1); border-radius: 20px 0 20px 20px; } @media (max-width: 1199px) { .portfolio__content-4 { width: 95%; padding: 25px 30px; } } .portfolio__content-4 p { font-size: 16px; font-weight: 500; line-height: 1.8; color: var(--gray); padding-bottom: 5px; } .portfolio__title-4 { font-size: 20px; line-height: 1.3; font-weight: 600; color: var(--secondary); -webkit-transition: all 0.3s; transition: all 0.3s; } .portfolio__title-4:hover { color: var(--main-color-one); } /*----------------------------------------*/ /* 28. FOOTER CSS START /*----------------------------------------*/ .footer__area { position: relative; } .footer__area::before { position: absolute; content: ""; width: 100%; height: 100%; right: 0; bottom: 0; background-repeat: no-repeat; background-position: right bottom; background-image: url(../imgs/footer/footer-bg.png); } .footer__area-3 { padding-top: 80px; padding-bottom: 30px; background-color: var(--secondary); } @media (max-width: 767px) { .footer__area-3 { padding-top: 60px; } } .footer__area-4 .footer__widgets { padding-top: 310px; } @media (max-width: 767px) { .footer__area-4 .footer__widgets { padding-top: 270px; } } .footer__area-4 .footer__address li span { color: var(--white); } .footer__area-4 .footer__service li::before { content: "\f101"; color: var(--white); } .footer__area-4 .footer__btm { border-width: 2px; border-color: rgba(255, 255, 255, 0.1); } .footer__top { margin-bottom: -170px; } @media (max-width: 767px) { .footer__top { margin-bottom: -120px; } } .footer__top-3 { grid-gap: 30px; display: -ms-grid; display: grid; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -ms-grid-columns: auto 30px auto; grid-template-columns: auto auto; border-bottom: 1px solid var(--white); padding-bottom: 70px; } @media (max-width: 767px) { .footer__top-3 { -ms-grid-columns: 1fr; grid-template-columns: 1fr; } } .footer__top-3 li { gap: 20px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .footer__top-3 li p { font-size: 18px; font-weight: 600; color: var(--white); } @media (max-width: 991px) { .footer__top-3 li p br { display: none; } } .footer__top-3 li p a { color: var(--white); } .footer__top-3 li p a:hover { color: var(--main-color-one); } .footer__top-3 li span { width: 65px; height: 65px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; color: var(--blue); font-size: 30px; background-color: var(--white); } .footer__top-3 li span i { -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } .footer__top-4 { padding-top: 100px; padding-bottom: 100px; text-align: center; border-radius: 25px; background-image: url(../imgs/footer/4-bg.jpg); background-position: center; background-repeat: no-repeat; background-size: cover; position: relative; } @media (max-width: 767px) { .footer__top-4 { padding-top: 60px; padding-bottom: 60px; } } .footer__top-4::after { position: absolute; content: ""; width: 100%; height: 100%; left: 0; top: 0; border-radius: 25px; background-color: rgba(6, 75, 181, 0.9); mix-blend-mode: multiply; } .footer__top-4 .title { font-weight: 600; font-size: 48px; line-height: 1; letter-spacing: 0.16px; text-transform: capitalize; color: var(--white); } @media (max-width: 991px) { .footer__top-4 .title { font-size: 40px; } } @media (max-width: 767px) { .footer__top-4 .title { font-size: 32px; } .footer__top-4 .title br { display: none; } } .footer__top-4 a { position: relative; z-index: 5; border-radius: 50px; margin-top: 55px; background-color: var(--main-color-one); color: #fff; } @media (max-width: 767px) { .footer__top-4 a { margin-top: 40px; } } .footer__top-4-wrap { margin-bottom: -210px; } .footer__map iframe { width: 100%; height: 330px; } @media (max-width: 767px) { .footer__map iframe { height: 240px; } } .footer__widgets { padding-top: 260px; padding-bottom: 45px; background-color: var(--black-2); } @media (max-width: 991px) { .footer__widgets { padding-bottom: 30px; } } @media (max-width: 767px) { .footer__widgets { padding-top: 170px; } } .footer__widgets p { color: var(--white); } .footer__widgets-3 { padding-top: 100px; } @media (max-width: 991px) { .footer__widgets-3 { padding-top: 90px; } } @media (max-width: 767px) { .footer__widgets-3 { padding-top: 60px; } } .footer__widgets-3 p { color: var(--white-2); } .footer__rblog-4 { gap: 15px; display: -ms-grid; display: grid; -ms-grid-columns: 80px 15px auto; grid-template-columns: 80px auto; } @media (max-width: 1199px) { .footer__rblog-4 { padding-left: 80px; } } @media (max-width: 991px) { .footer__rblog-4 { padding-left: 30px; } } @media (max-width: 767px) { .footer__rblog-4 { padding-left: 0; } } .footer__rcontent-4 p { font-weight: 500; margin-bottom: 5px; } .footer__rcontent-4 p i { font-size: 14px; margin-right: 5px; color: var(--yellow); } .footer__rcontent-4 h3 { color: var(--white); font-family: "Barlow", sans-serif; font-size: 20px; font-weight: 600; line-height: 1.3; } @media (max-width: 1399px) { .footer__rcontent-4 h3 { font-size: 18px; } } .footer__btm { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; border-top: 1px solid rgba(94, 94, 94, 0.5490196078); padding-top: 35px; margin-top: 90px; } @media (max-width: 1199px) { .footer__btm { margin-top: 50px; } } @media (max-width: 991px) { .footer__btm { margin-top: 30px; padding-top: 30px; } } @media (max-width: 767px) { .footer__btm { gap: 30px; -ms-flex-wrap: wrap; flex-wrap: wrap; } } .footer__btm-3 { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } @media (max-width: 767px) { .footer__btm-3 { gap: 30px; -ms-flex-wrap: wrap; flex-wrap: wrap; } } .footer__btm-3-wrap { margin-top: 70px; padding-top: 30px; border-top: 1px solid rgba(255, 255, 255, 0.1); } .footer__title { font-weight: 600; font-size: 20px; line-height: 1.3; color: var(--white); padding-top: 15px; padding-bottom: 40px; } @media (max-width: 991px) { .footer__title { padding-bottom: 30px; } } .footer__logo img { margin-bottom: 20px; } .footer__logo p { padding-bottom: 25px; } .footer__logo a { color: var(--white); border-color: var(--main-color-one); } .footer__logo a:hover { color: var(--main-color-one); } .footer__logo a:hover i { color: var(--main-color-one); } @media (max-width: 767px) { .footer__logo-3 { padding-bottom: 50px; } } .footer__logo-3 img { margin-bottom: 15px; } .footer__logo-3 p { padding-bottom: 40px; } @media (max-width: 767px) { .footer__logo-3 p { padding-bottom: 30px; } } .footer__address { padding-left: 80px; } .footer__address.footer__address-2 { padding-left: 30px; } @media (max-width: 767px) { .footer__address.footer__address-2 { padding-left: 0; padding-top: 0; } } @media (max-width: 1199px) { .footer__address { padding-bottom: 50px; } } @media (max-width: 991px) { .footer__address { padding-left: 30px; } } @media (max-width: 767px) { .footer__address { padding-left: 0; padding-top: 50px; padding-bottom: 25px; } } .footer__address li { display: -ms-grid; display: grid; grid-gap: 10px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-grid-columns: 30px 10px auto; grid-template-columns: 30px auto; padding-bottom: 10px; } .footer__address li span { font-size: 20px; color: var(--main-color-one); } .footer__address li p { line-height: 1.6; } .footer__address li a { color: var(--white); } .footer__address li a:hover { color: var(--main-color-one); } .footer__address-3 li { display: -ms-grid; display: grid; grid-gap: 10px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-grid-columns: 40px 10px auto; grid-template-columns: 40px auto; padding-bottom: 20px; } .footer__address-3 li span { width: 40px; height: 40px; font-size: 16px; color: var(--white); border-radius: 100%; border: 1px solid rgba(255, 255, 255, 0.2); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .footer__address-3 li p { line-height: 1.8; } @media (max-width: 1199px) { .footer__address-3 li p br { display: none; } } .footer__address-3 li a { color: var(--white-2); line-height: 1.8; display: block; } .footer__address-3 li a:hover { color: var(--main-color-one); } .footer__menu-3 ul { gap: 5px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .footer__menu-3 ul li a { color: var(--white-2); } .footer__menu-3 ul li a:hover { color: var(--main-color-one); } .footer__menu-4 ul { gap: 30px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .footer__menu-4 ul li a { color: var(--white-2); } .footer__menu-4 ul li a:hover { color: var(--main-color-one); } .footer__service { padding-left: 80px; } @media (max-width: 1199px) { .footer__service { padding-left: 0; padding-bottom: 50px; } } @media (max-width: 767px) { .footer__service { padding-bottom: 35px; padding-top: 20px; } } .footer__service li { padding-left: 20px; padding-bottom: 10px; position: relative; } .footer__service li::before { position: absolute; content: "\f105"; width: 20px; height: 20px; left: 0; top: 3px; font-weight: 700; font-family: "Font Awesome 6 Free"; color: var(--main-color-one); font-size: 14px; } .footer__service li a { color: var(--white); } .footer__service li a:hover { color: var(--main-color-one); } @media (max-width: 1199px) { .footer__newsletter { padding-left: 80px; } } @media (max-width: 991px) { .footer__newsletter { padding-left: 30px; } } @media (max-width: 767px) { .footer__newsletter { padding-left: 0; } } .footer__newsletter p { padding-right: 20px; padding-bottom: 25px; } .footer__newsletter form { position: relative; } .footer__newsletter form input { width: 100%; padding: 13px 20px; border: none; outline: none; font-weight: 500; color: var(--black-2); padding-right: 70px; border-radius: 6px; } .footer__newsletter form input::-webkit-input-placeholder { color: var(--black-2); } .footer__newsletter form input::-moz-placeholder { color: var(--black-2); } .footer__newsletter form input:-ms-input-placeholder { color: var(--black-2); } .footer__newsletter form input::-ms-input-placeholder { color: var(--black-2); } .footer__newsletter form input::placeholder { color: var(--black-2); } .footer__newsletter form .submit { position: absolute; right: 0; top: 0; width: 60px; height: 100%; border: none; color: var(--white); background-color: var(--main-color-one); -webkit-transition: all 0.3s; transition: all 0.3s; border-radius: 0 6px 6px 0; } .footer__newsletter form .submit:hover { color: var(--blue); } .footer__link-3 { padding-left: 80px; } @media (max-width: 1199px) { .footer__link-3 { padding-left: 30px; } } @media (max-width: 991px) { .footer__link-3 { padding-left: 80px; padding-bottom: 30px; } } @media (max-width: 767px) { .footer__link-3 { padding-left: 0; padding-bottom: 20px; } } .footer__link-3 li { padding-bottom: 20px; } .footer__link-3 li a { color: var(--white); position: relative; padding-left: 20px; } .footer__link-3 li a:hover { letter-spacing: 1px; color: var(--main-color-one); } .footer__link-3 li a:hover::before { color: var(--main-color-one); } .footer__link-3 li a::before { position: absolute; content: "\f061"; width: 20px; height: 20px; left: 0; top: 3px; font-weight: 700; font-family: "Font Awesome 6 Free"; color: var(--white); font-size: 14px; -webkit-transition: all 0.3s; transition: all 0.3s; } .footer__gallery-3 .gallery { display: -ms-grid; display: grid; grid-gap: 30px; -ms-grid-columns: 1fr 30px 1fr 30px 1fr; grid-template-columns: repeat(3, 1fr); } @media (max-width: 1399px) { .footer__gallery-3 .gallery { grid-gap: 20px; } } @media (max-width: 1199px) { .footer__gallery-3 .gallery { grid-gap: 10px; } } .footer__gallery-3 .gallery li { overflow: hidden; } .footer__gallery-3 .gallery li a:hover img { -webkit-transform: scale(1.05); transform: scale(1.05); } .footer__gallery-3 .gallery img { width: 100%; -webkit-transition: all 0.5s; transition: all 0.5s; } .footer__social ul { gap: 80px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } @media (max-width: 991px) { .footer__social ul { gap: 30px; } } .footer__social ul li a { color: var(--white); } .footer__social ul li a:hover { color: var(--main-color-one); } .footer__social-3 ul { gap: 30px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .footer__social-3 ul li a { width: 50px; height: 50px; color: var(--white); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; border: 1px solid rgba(255, 255, 255, 0.1); } .footer__social-3 ul li a:hover { color: var(--main-color-one); } .footer__social-4 ul { gap: 10px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .footer__social-4 ul li a { width: 50px; height: 50px; color: var(--white); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; border-radius: 5px; background-color: rgba(227, 227, 227, 0.1); } .footer__social-4 ul li a:hover { background-color: var(--blue); } .footer__copyright-3 p { color: var(--white-2); } .footer_top h2 { font-size: 100px; font-weight: 700; text-transform: uppercase; } .footer_top h2 span { -webkit-text-fill-color: transparent; -webkit-text-stroke: 1px #fff; } .footer_top a { width: 180px; height: 180px; line-height: 180px; color: #fff; font-size: 14px; font-weight: 600; text-transform: uppercase; border: 1px solid rgba(255, 255, 255, 0.0705882353); display: inline-block; text-align: center; border-radius: 50%; cursor: pointer; z-index: 2; position: relative; } .footer_top a:hover { background: var(--main-color-one); } .footer_top a i { margin-left: 4px; } .footer_two_area:before { display: none; } .footer_two_area .footer__widgets { padding-top: 120px; } .footer_two_area .footer_top { padding-bottom: 50px; border-bottom: 1px solid rgba(255, 255, 255, 0.062745098); margin-bottom: 50px; } @media (max-width: 1200px) { .header__area-2 { display: none; } } .header__inner.inner-2 { border-bottom: 0; position: relative; z-index: 2; margin-top: 20px; } .header__btn { font-family: "Barlow", sans-serif; font-weight: 600; font-size: 14px; line-height: 20px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--secondary); display: inline-block; border: 1px solid var(--secondary); padding: 18px 30px; border-radius: 0; } @media (max-width: 575px) { .header__btn { display: none; } } .header__btn:hover { border-radius: 0; border-color: var(--main-color-one); } .header__btn::before { border-radius: 0; } .header__btn.arrow-down i { -webkit-transform: rotate(30deg); transform: rotate(30deg); } .header__btn i { padding-left: 4px; } /* ----------------------- GALLARY AREA 2 ----------------------- */ .gallary__area-2 { padding-top: 150px; padding-left: 30px; overflow: hidden; padding-bottom: 110px; } @media (max-width: 1399px) { .gallary__area-2 { padding-top: 80px; padding-bottom: 170px; } } @media (max-width: 991px) { .gallary__area-2 { padding-top: 50px; padding-bottom: 100px; } } @media (max-width: 767px) { .gallary__area-2 { padding-left: 15px; padding-bottom: 50px; padding-top: 20px; } } .gallary__wrapper-2 { display: -ms-grid; display: grid; -ms-grid-columns: 0.47fr 75px 1fr; grid-template-columns: 0.47fr 1fr; gap: 75px; max-width: 1600px; margin-left: auto; } @media (max-width: 1399px) { .gallary__wrapper-2 { -webkit-box-align: center; -ms-flex-align: center; align-items: center; } } @media (max-width: 767px) { .gallary__wrapper-2 { -ms-grid-columns: 1fr; grid-template-columns: 1fr; gap: 35px; } } .gallary__buttons-2 { gap: 20px; padding-top: 40px; margin-bottom: 50px; } .gallary__buttons-2 li { border: 1px solid var(--blue); } .gallary__buttons-2 li button { font-weight: 600; font-size: 14px; line-height: 1.2; text-align: center; letter-spacing: 1.6px; text-transform: uppercase; color: var(--black-2); } .gallary__buttons-2 li button.active { background-color: transparent !important; color: var(--black-2) !important; } .gallary__items { display: -ms-grid; display: grid; -ms-grid-columns: 1fr 30px 1fr 30px 0.5fr; grid-template-columns: 1fr 1fr 0.5fr; gap: 30px; } @media (max-width: 1399px) { .gallary__items { -ms-grid-columns: 1fr 1fr; grid-template-columns: 1fr 1fr; } } @media (max-width: 767px) { .gallary__items { -ms-grid-columns: 1fr; grid-template-columns: 1fr; } } .gallary__items img { height: 100%; -o-object-fit: cover; object-fit: cover; } @media (max-width: 767px) { .gallary__items img { width: 50%; } } @media (max-width: 1399px) { .gallary__items img:last-child { display: none; } } /* ----------------------- TEXT SLIDER AREA 2 ----------------------- */ .textslider2__wrap { position: relative; overflow: hidden; height: 320px; } @media (max-width: 767px) { .textslider2__wrap { height: 200px; } } @media (max-width: 1399px) { .textslider2__wrap { padding-bottom: 0; } } .textslider__area-2 { background: var(--main-color-one); padding: 30px 0; overflow: hidden; } .textslider__area-2.ltr { background: #0E1E2A; z-index: -2; } @media (max-width: 767px) { .textslider__area-2 { padding: 10px 0; } } .textslider__area-2.rtl { position: absolute; top: 100px; left: 0; width: 100%; height: auto; -webkit-transform: rotate(6deg); transform: rotate(6deg); } @media (max-width: 1399px) { .textslider__area-2.rtl { -webkit-transform: rotate(0); transform: rotate(0); } } .textslider__area-2.ltr { position: absolute; top: 100px; left: 0; width: 100%; height: auto; -webkit-transform: rotate(-6deg); transform: rotate(-6deg); } @media (max-width: 1399px) { .textslider__area-2.ltr { display: none; } } .textslider__active-2 .swiper-wrapper { -webkit-transition-timing-function: linear; transition-timing-function: linear; } .textslider__active-2 .swiper-slide { width: auto; } .textslider__text1 { color: var(--white); font-weight: 600; font-size: 48px; letter-spacing: 0.997101px; text-transform: capitalize; } .textslider__text1.herotext { font-size: 40px; } @media (max-width: 1399px) { .textslider__text1.herotext { font-size: 30px; } } .textslider__text1.herotext span { margin-right: 0; margin-left: 20px; } .textslider__text1 span { display: inline-block; margin-right: 30px; } @media (max-width: 1919px) { .textslider__text1 { font-size: 25px; } } .textslide__area-2 { padding-top: 250px; padding-bottom: 150px; overflow: hidden; } @media (max-width: 1399px) { .textslide__area-2 { padding-top: 150px; padding-bottom: 100px; } } @media (max-width: 767px) { .textslide__area-2 { padding-top: 100px; padding-bottom: 70px; } } .textslide__wrapper-2 { background: var(--blue); padding: 40px 140px; display: -webkit-box; display: -ms-flexbox; display: flex; gap: 40px; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-transform: rotate(6deg); transform: rotate(6deg); } .textslide__wrapper-2.reverse { -webkit-transform: rotate(-6deg); transform: rotate(-6deg); background: var(--secondary); margin-top: -100px; position: relative; z-index: -2; } .textslide__item-2 { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 70px; } .textslide__item-2 i { font-size: 40px; color: var(--white); } .textslide__title { font-weight: 600; font-size: 48px; line-height: 1; letter-spacing: 0.16px; text-transform: uppercase; color: var(--white); } @media (max-width: 991px) { .textslide__title { font-size: 30px; } } .work__area-2 { padding-bottom: 255px; background-image: url(../imgs/home-2/process-bg.png); overflow: hidden; } @media (max-width: 1399px) { .work__area-2 { padding-bottom: 0; } } @media (max-width: 991px) { .work__area-2 { padding-bottom: 30px; } } @media (max-width: 767px) { .work__area-2 { padding-bottom: 0; } } .work__wrapper { padding-top: 80px; } .work__item { border: 1px solid #E3E3E3; padding: 40px; } @media (max-width: 767px) { .work__item { padding: 20px; } } .work__item p { padding-top: 35px; } @media (max-width: 767px) { .work__item p { padding-top: 25px; } } .work__item img { display: block; } .work__thumb { height: 115px; -o-object-fit: cover; object-fit: cover; } .work__contentwrap { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; border-bottom: 1px solid #d9d9d9; padding-bottom: 40px; } @media (max-width: 767px) { .work__contentwrap { padding-bottom: 20px; } } .work__ititle { font-weight: 600; font-size: 20px; line-height: 1; color: #090D26; } @media (max-width: 1399px) { .work__ititle br { display: none; } } .work__icounter { font-weight: 700; font-size: 100px; line-height: 1; text-align: center; letter-spacing: -3px; text-transform: uppercase; -webkit-text-fill-color: var(--white); -webkit-text-stroke-width: 1px; -webkit-text-stroke-color: var(--blue); } @media (max-width: 1399px) { .work__icounter { font-size: 70px; } } .work__header-2 { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } @media (max-width: 767px) { .work__header-2 { -ms-flex-wrap: wrap; flex-wrap: wrap; } } .work__icon-2 { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 20px; } @media (max-width: 991px) { .work__icon-2 { padding-top: 30px; } } .work__icon-2 .size { width: 80px; height: 80px; line-height: 74px; text-align: center; border: 1px solid #E3E3E3; } @media (max-width: 767px) { .work__icon-2 .size { width: 50px; height: 50px; line-height: 40px; } } .work__icon-2 .size.swiper-button-disabled { background: var(--blue); } .work__icon-2 .size.swiper-button-disabled img { -webkit-filter: brightness(100); filter: brightness(100); } /* ----------------------- COUNTER AREA 2 ----------------------- */ .counter__area-2 { background: var(--gray-2); padding: 100px 0; overflow: hidden; } @media (max-width: 767px) { .counter__area-2 { padding-bottom: 70px; } } .counter__item-2 { border: 2px solid var(--blue); text-align: center; padding: 40px; background: var(--white); } @media (max-width: 991px) { .counter__item-2 { margin-bottom: 15px; } } .counter__item-2 img { padding-bottom: 40px; max-width: 80px; display: block; margin: auto; } .counter__item-2 .counter { font-weight: 700; font-size: 80px; line-height: 0.5; letter-spacing: 0.16px; text-transform: uppercase; opacity: 0.4; display: block; padding-bottom: 30px; -webkit-text-fill-color: var(--white); /* Will override color (regardless of order) */ -webkit-text-stroke-width: 1px; -webkit-text-stroke-color: var(--black-2); display: inline-block; } @media (max-width: 1399px) { .counter__item-2 .counter { font-size: 50px; } } .counter__item-2 .dis { font-weight: 600; font-size: 20px; line-height: 1.1; text-align: center; color: var(--secondary); } .counter__content-2 { padding-left: 60px; } @media (max-width: 1399px) { .counter__content-2 { padding-left: 0; } } .counter__content-2 .service__sectiontitle { text-align: left; padding-top: 35px; } .counter__content-2 .title { color: var(--black-2); } /* ----------------------- SERVICE AREA 2 ----------------------- */ .service__area-2 { padding: 150px 0; background: var(--secondary); position: relative; overflow: hidden; } .service__area-2 .line-1, .service__area-2 .line-4, .service__area-2 .line-3, .service__area-2 .line-2 { position: absolute; opacity: 0.200000003; background: #0058AA; width: 1px; height: 100%; left: 315px; top: 0; } @media (max-width: 991px) { .service__area-2 .line-1, .service__area-2 .line-4, .service__area-2 .line-3, .service__area-2 .line-2 { display: none; } } .service__area-2 .line-2 { left: 740px; } @media (max-width: 1399px) { .service__area-2 .line-2 { display: none; } } @media (max-width: 991px) { .service__area-2 .line-2 { display: none; } } .service__area-2 .line-3 { left: 1180px; } @media (max-width: 991px) { .service__area-2 .line-3 { display: none; } } .service__area-2 .line-4 { left: auto; right: 315px; } @media (max-width: 991px) { .service__area-2 .line-4 { display: none; } } @media (max-width: 991px) { .service__area-2 { padding: 80px 0; } } @media (max-width: 767px) { .service__area-2 { padding-bottom: 35px; } } .service__sectiontitle { text-align: center; } .service__sectiontitle.contact__sectiontitle { padding-bottom: 45px; } .service__sectiontitle span { font-weight: 600; font-size: 18px; line-height: 1.2; text-align: center; letter-spacing: 1.6px; text-transform: uppercase; color: var(--blue); display: inline-block; padding-bottom: 5px; border-bottom: 1px solid var(--blue); margin-bottom: 30px; position: relative; } .service__sectiontitle .title { font-weight: 600; font-size: 48px; line-height: 1; letter-spacing: 0.16px; text-transform: uppercase; color: var(--black-2); } @media (max-width: 991px) { .service__sectiontitle .title { font-size: 25px; } } @media (max-width: 767px) { .service__sectiontitle .title br { display: none; } } .service__sectiontitle .gallarydis { font-weight: 500; font-size: 16px; line-height: 1.5; color: var(--black-4); padding-top: 50px; } @media (max-width: 767px) { .service__sectiontitle .gallarydis { padding-top: 30px; } } .service__wrapper-2 { padding-top: 80px; } .service__item-2 { text-align: center; margin-bottom: 30px; } @media (max-width: 1399px) { .service__item-2 { margin-bottom: 60px; } } @media (max-width: 767px) { .service__item-2 { margin-bottom: 40px; } } .service__ititle-2 { font-weight: 600; font-size: 20px; line-height: 1.2; color: var(--white); display: block; padding-bottom: 30px; } @media (max-width: 991px) { .service__ititle-2 { padding-bottom: 10px; } } .service__idis-2 { font-weight: 500; font-size: 16px; line-height: 1.5; color: var(--white); padding-bottom: 30px; } @media (max-width: 767px) { .service__idis-2 { padding-bottom: 10px; } } .service__readmore-2 { font-weight: 600; font-size: 14px; line-height: 1; color: var(--white); padding-bottom: 10px; text-transform: uppercase; letter-spacing: 1.6px; border-bottom: 1px solid var(--blue); } .service__readmore-2 img { margin-left: 8px; } .service__thumb-2 { padding-bottom: 30px; } /* ----------------------- CONTACT 2 ----------------------- */ .contact__area-2 .form__title { padding-bottom: 70px; font-size: 115px; padding-left: 0; -webkit-text-stroke: 2px var(--black-2); } @media (max-width: 1399px) { .contact__area-2 .form__title { padding-left: 0; font-size: 80px; } } @media (max-width: 991px) { .contact__area-2 .form__title { padding-bottom: 5px; } } @media (max-width: 767px) { .contact__area-2 .form__title { padding-bottom: 30px; font-size: 50px; } } .contact__btm-2 { background: var(--secondary); } .contact__form-2 { background: var(--gray-2); padding-bottom: 60px; padding-top: 60px; margin-top: -175px; } @media (max-width: 991px) { .contact__form-2 { margin-top: 60px; } } @media (max-width: 767px) { .contact__form-2 { margin-top: 0; } } .contact__form-2 form input { background: var(--white); color: var(--black-4); margin-bottom: 30px; } .contact__form-2 form input::-webkit-input-placeholder { color: var(--black-4); } .contact__form-2 form input::-moz-placeholder { color: var(--black-4); } .contact__form-2 form input:-ms-input-placeholder { color: var(--black-4); } .contact__form-2 form input::-ms-input-placeholder { color: var(--black-4); } .contact__form-2 form input::placeholder { color: var(--black-4); } .contact__form-2 form textarea { background: var(--white); color: var(--black-4); } .contact__form-2 form textarea::-webkit-input-placeholder { color: var(--black-4); } .contact__form-2 form textarea::-moz-placeholder { color: var(--black-4); } .contact__form-2 form textarea:-ms-input-placeholder { color: var(--black-4); } .contact__form-2 form textarea::-ms-input-placeholder { color: var(--black-4); } .contact__form-2 form textarea::placeholder { color: var(--black-4); } .contact__form-2 form .submit { background: var(--blue); } .contact__media-2 { padding-top: 0; } @media (max-width: 767px) { .contact__media-2 { padding-top: 30px; } } .contact__media-2 li { -ms-grid-columns: 80px auto; grid-template-columns: 80px auto; } .contact__media-2 li span { border: 1px solid var(--blue); color: var(--white); height: 80px; width: 80px; line-height: 80px; } .contact__media-2 li a { color: var(--white); } /* ----------------------- FOOTER 2 ----------------------- */ .footer__widgets-2 { background-color: var(--secondary); padding-top: 100px; } @media (max-width: 991px) { .footer__widgets-2 { padding-top: 50px; } } .footer__btm-2 { border-top: 1px solid var(--blue); } @media (max-width: 767px) { .footer__btm-2 { border-top: 0; margin-top: 0; } } .footer__rblog { display: -ms-grid; display: grid; -ms-grid-columns: 80px 15px auto; grid-template-columns: 80px auto; gap: 15px; padding-bottom: 30px; border-bottom: 1px solid var(--white); margin-bottom: 30px; } .footer__rblog a img { border-radius: 10px; } .footer__rblog:last-child { margin-bottom: 0; } .footer__rcontent span { color: var(--white); } .footer__rcontent span i { padding-right: 10px; } .footer__rcontent p { padding-top: 8px; font-weight: 600; font-size: 20px; line-height: 1.2; color: var(--white); } .footer__address-2 ul li span { color: var(--white); } .footer__service-2 ul li::before { color: var(--white); } .footer__newsletter-2 input { height: 76px; padding-right: 130px; background: transparent; border: 1px solid #605b5b !important; color: var(--white) !important; } .footer__newsletter-2 input::-webkit-input-placeholder { color: var(--white) !important; } .footer__newsletter-2 input::-moz-placeholder { color: var(--white) !important; } .footer__newsletter-2 input:-ms-input-placeholder { color: var(--white) !important; } .footer__newsletter-2 input::-ms-input-placeholder { color: var(--white) !important; } .footer__newsletter-2 input::placeholder { color: var(--white) !important; } .footer__newsletter-2 .submit-2 { background-color: var(--blue); color: var(--white); font-weight: 600; font-size: 14px; line-height: 1.4; display: inline-block; padding: 20px 30px; border: 0; right: 8px; top: 8px; position: absolute; text-transform: uppercase; } @media (max-width: 767px) { .footer__newsletter-2 .submit-2 { right: 0; position: relative; } } .separator-2 { border-top: 1px solid var(--white); -webkit-transform: translateY(-100px); transform: translateY(-100px); } @media (max-width: 991px) { .separator-2 { display: none; } } .blog__area-2 { padding: 150px 0; margin-bottom: 70px; padding-top: 175px; } @media (max-width: 1399px) { .blog__area-2 { padding-top: 0; } } @media (max-width: 991px) { .blog__area-2 { padding-top: 0; padding-bottom: 0; margin-bottom: 0; } } @media (max-width: 767px) { .blog__area-2 { padding-top: 0; } } .blog__title-2 { font-weight: 600; font-size: 20px; line-height: 1.2; color: #090D26; padding-bottom: 20px; display: inline-block; } .blog__item-2 { position: relative; } @media (max-width: 767px) { .blog__item-2 { margin-bottom: 30px; } } .blog__thumb-2 { position: relative; overflow: hidden; } .blog__thumb-2 img { width: 100%; -webkit-transition: 0.5s; transition: 0.5s; } .blog__thumb-2 img:hover { -webkit-transform: scale(1.2); transform: scale(1.2); } .blog__meta-2 { position: absolute; left: 30px; bottom: 30px; padding: 20px 20px; background: var(--blue); font-weight: 400; font-size: 14px; line-height: 1; color: var(--white); } .blog__content-2 { border: 1px solid #D9D9D9; border-top: 0; padding: 40px; padding-top: 35px; } @media (max-width: 767px) { .blog__content-2 { padding: 20px; } } .blog__content-2 p { font-weight: 500; font-size: 16px; line-height: 2; color: var(--black-4); padding-bottom: 25px; } .blog__btn-2 { font-weight: 600; font-size: 14px; line-height: 1.3; letter-spacing: 1.6px; text-transform: uppercase; color: var(--secondary); text-decoration: underline; text-underline-offset: 10px; display: inline-block; } .blog__btn-2 img { padding-left: 10px; } .team__area-2 { padding: 150px 0; position: relative; } .team__area-2::before { content: ""; left: 0; top: 0; height: 616px; width: 100%; background: #F4F5FA; position: absolute; } @media (max-width: 991px) { .team__area-2 { padding: 80px 0; } } @media (max-width: 767px) { .team__area-2 { padding: 50px 0; } } .team__items-2 { display: -ms-grid; display: grid; -ms-grid-columns: 1fr 30px 1fr 30px 1fr; grid-template-columns: repeat(3, 1fr); gap: 30px; padding-top: 80px; } @media (max-width: 767px) { .team__items-2 { -ms-grid-columns: 1fr; grid-template-columns: 1fr; padding-top: 50px; } } .team__thumb-2 { position: relative; background: var(--secondary); } .team__thumb-2::before { position: absolute; content: ""; left: 0; bottom: 0; height: 100%; width: 100%; pointer-events: none; background: -webkit-gradient(linear, left top, left bottom, color-stop(51.56%, rgba(184, 251, 94, 0)), to(rgba(184, 251, 94, 0.28))); background: linear-gradient(180deg, rgba(184, 251, 94, 0) 51.56%, rgba(184, 251, 94, 0.28) 100%); } .team__content-2 { text-align: center; padding-top: 30px; } .team__name { font-weight: 600; font-size: 24px; line-height: 1; color: var(--secondary); padding-bottom: 5px; -webkit-transition: all 0.3s; transition: all 0.3s; } .team__name:hover { color: var(--main-color-one); } .team__post { font-weight: 500; font-size: 16px; line-height: 1.5; color: var(--secondary); } .team__social-2 { position: absolute; bottom: 30px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; gap: 10px; z-index: 2; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); } .team__social-2 li a { background: var(--white); opacity: 0.8; border-radius: 5px; font-weight: 400; font-size: 16px; line-height: 16px; color: var(--blue); display: inline-block; padding: 15px; } .team__social-2 li a:hover { color: var(--main-color-one); } /* ----------------------- ABOUT AREA 2 ----------------------- */ .about__area-2 { padding: 130px 0 120px; } @media (max-width: 991px) { .about__area-2 { padding: 70px 0; } } .about__wrapper-2 { gap: 90px; display: -ms-grid; display: grid; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-grid-columns: 1fr 90px 1.3fr; grid-template-columns: 1fr 1.3fr; } @media (max-width: 1399px) { .about__wrapper-2 { gap: 100px; } } @media (max-width: 991px) { .about__wrapper-2 { gap: 0; } } @media (max-width: 767px) { .about__wrapper-2 { -ms-grid-columns: 1fr; grid-template-columns: 1fr; } } .about__wrapper-2 .about__content, .about__wrapper-2 .about__content-3, .about__wrapper-2 .about__content-6 { background-image: none; padding-top: 0; } .about__wrapper-2 .about__thumb { text-align: right; } .about__wrapper-2 .about__thumb { margin-top: 20px; } .about__title-2 { font-weight: 600; font-size: 48px; line-height: 1; letter-spacing: 0.16px; text-transform: uppercase; color: var(--secondary); padding-bottom: 36px; } @media (max-width: 991px) { .about__title-2 { font-size: 30px; } } .about__dis-2 { font-weight: 500; font-size: 16px; line-height: 1; color: var(--black-2); padding-left: 80px; } @media (max-width: 991px) { .about__dis-2 { padding-left: 0; } } .about__btnwrapper-2 { margin-left: 75px; margin-top: 30px; width: 205px; height: 205px; } @media (max-width: 1399px) { .about__btnwrapper-2 { margin-left: 0; height: 60px; } } @media (max-width: 767px) { .about__btnwrapper-2 { margin-top: 0; margin-left: 0; } } .about__btnwrapper-2.db-arrow-up .img-2 { -webkit-transform: translate(-205px, 10px); transform: translate(-205px, 10px); } .about__btnwrapper-2.db-arrow-up:hover .img { -webkit-transform: translate(205px, -205px); transform: translate(205px, -205px); } .about__btnwrapper-2.db-arrow-up:hover .img-2 { -webkit-transform: translate(0px, -200px); transform: translate(0px, -200px); } .about__thumb img { max-width: 100%; } @media (max-width: 991px) { .about__arrowup img { width: 50px; } } /* ----------------------- HERO AREA 2 ----------------------- */ .hero__area-2 { padding-top: 192px; padding-bottom: 115px; } @media (max-width: 1919px) { .hero__area-2 { padding-top: 100px; } } @media (max-width: 767px) { .hero__area-2 { padding-top: 45px; padding-bottom: 60px; } } .hero__area-wrapper { display: -ms-grid; display: grid; -ms-grid-columns: 1fr 2fr 1fr; grid-template-columns: 1fr 2fr 1fr; padding-left: 150px; padding-right: 100px; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } @media (max-width: 1399px) { .hero__area-wrapper { -ms-grid-columns: 0.2fr 1fr 0.2fr; grid-template-columns: 0.2fr 1fr 0.2fr; padding-left: 0; padding-right: 0px; } } @media (max-width: 767px) { .hero__area-wrapper { -ms-grid-columns: 1fr; grid-template-columns: 1fr; } } .hero__area-item { position: relative; } .hero__area-item img { position: relative; z-index: 1; max-width: 100%; } @media (max-width: 767px) { .hero__area-item img { display: none; } } .hero__area-content { text-align: center; } @media (max-width: 1919px) { .hero__area-content { padding-top: 33px; } } .hero__area-title { font-family: "Barlow", sans-serif; font-weight: 600; font-size: 86px; line-height: 1; letter-spacing: -2.60783px; text-transform: uppercase; color: var(--secondary); margin-top: -45px; padding-bottom: 25px; } @media (max-width: 1919px) { .hero__area-title { font-size: 70px; } .hero__area-title br { display: none; } } @media (max-width: 991px) { .hero__area-title { font-size: 50px; } } @media (max-width: 767px) { .hero__area-title { font-size: 40px; } } .hero__area-dis { font-family: "Barlow", sans-serif; font-weight: 500; font-size: 16px; line-height: 1.5; color: var(--black-4); padding-bottom: 40px; } @media (max-width: 767px) { .hero__area-dis { padding-bottom: 0; } } .hero__area-gradient1 { position: absolute; width: 113px; height: 122px; left: -57px; top: 60px; z-index: 2; background: -webkit-gradient(linear, left top, right top, from(#8D71FF), color-stop(32.16%, #6D2BFF), color-stop(64.84%, #405CFF), to(#21D3FD)); background: linear-gradient(90deg, #8D71FF 0%, #6D2BFF 32.16%, #405CFF 64.84%, #21D3FD 100%); border-radius: 0px 0px 1000px 1000px; } @media (max-width: 991px) { .hero__area-gradient1 { top: 170px; } } @media (max-width: 767px) { .hero__area-gradient1 { display: none; } } .hero__area-gradient2 { position: absolute; width: 103px; height: 102px; right: 200px; top: 300px; z-index: 3; background: #0058AA; border-radius: 0px 0px 0px 1000px; -webkit-transform: matrix(-1, 0, 0, 1, 0, 0); transform: matrix(-1, 0, 0, 1, 0, 0); } @media (max-width: 991px) { .hero__area-gradient2 { right: 100px; top: 150px; } } @media (max-width: 767px) { .hero__area-gradient2 { display: none; } } /* ----------------------- FAQ 2 ----------------------- */ .faq__list-2 .accordion-button::after { left: auto; right: 20px; background: var(--blue); } .faq__list-2 .accordion-body { padding-left: 0; padding-bottom: 0; } .faq__list-2 .accordion-body p { color: var(--white); } .faq__list-2 .accordion-item { border: 0; border-bottom: 1px solid var(--gray-3); margin-bottom: 8px; } .faq__list-2 .accordion-button { padding-left: 0; } .pb-70 { padding-bottom: 70px; } @media (max-width: 991px) { .pb-70 { padding-bottom: 50px; } } @media (max-width: 767px) { .pb-70 { padding-bottom: 30px; } } .footer__service.footer__service-2 { padding-left: 30px; } @media (max-width: 767px) { .footer__service.footer__service-2 { padding-left: 0; padding-bottom: 0; } } .footer__newsletter.footer__newsletter-2 { padding-left: 0; } section.contact__area-2 { overflow: hidden; } /* ----------------------- MOBILE HEADER ----------------------- */ .db-mobile-icon { display: block; } @media (min-width: 1200px) { .db-mobile-icon { display: none; } } /* ----------------------- HOME FIVE HERO ----------------------- */ .bizzpro-five { background: #0E1E2A; } .hero__area-5 { background-image: url("../imgs/home-5/hero.jpg"); background-repeat: no-repeat; padding-top: 240px; padding-bottom: 150px; position: relative; } @media (max-width: 767px) { .hero__area-5 { padding-top: 160px; } } .hero__area-5::before { content: ""; position: absolute; left: 0; top: 0; height: 100%; width: 100%; opacity: 0.5; background: #0E1E2A; } .hero__content-5 { position: relative; z-index: 2; } .hero__title-5 { color: var(--white); font-size: 100px; font-weight: 700; line-height: 1.2; letter-spacing: -3px; text-transform: uppercase; } @media (max-width: 1199px) { .hero__title-5 { font-size: 70px; } } @media (max-width: 767px) { .hero__title-5 { font-size: 40px; } } .hero__dis-5 { color: var(--white); font-family: "Barlow", sans-serif; font-size: 16px; font-weight: 500; line-height: 1.5; } .hero__btn-wrapper-5 { padding-top: 70px; } .hero__btn-wrapper-5 .db-btn-arrow { color: var(--white); } .hero__btn-wrapper-5 .db-btn-arrow::after { background: var(--main-color-one); } .hero__shape-wrapper { position: absolute; right: 0; bottom: 0; } /* ----------------------- HOME FIVE SERVICE ----------------------- */ .bizzpro-section-wrapper-5 { margin-bottom: 70px; position: relative; } .section-subtitle-5 { color: var(--main-color-one); font-size: 18px; font-weight: 500; line-height: 1.2; letter-spacing: 1.8px; text-transform: uppercase; margin-bottom: 10px; } .section-title-5 { color: var(--white); font-size: 48px; font-weight: 600; line-height: 1; letter-spacing: 0.16px; text-transform: uppercase; } @media (max-width: 991px) { .section-title-5 { font-size: 36px; } } .hero__btn-wrapper-5.service-btn { padding-top: 40px; } .service__area-5 { padding-top: 150px; padding-bottom: 150px; } @media (max-width: 991px) { .service__area-5 { padding-top: 60px; padding-bottom: 60px; } } .service__items-5 { display: -ms-grid; display: grid; -ms-grid-columns: 1fr 50px 1fr 50px 1fr; grid-template-columns: repeat(3, 1fr); gap: 50px; } @media (max-width: 1199px) { .service__items-5 { gap: 0; } } @media (max-width: 991px) { .service__items-5 { -ms-grid-columns: (1fr)[2]; grid-template-columns: repeat(2, 1fr); } } @media (max-width: 767px) { .service__items-5 { -ms-grid-columns: 1fr; grid-template-columns: 1fr; } } .service__item-5 { text-align: center; position: relative; -webkit-transition: 0.6s; transition: 0.6s; padding: 40px; } .service__item-5:hover { background: #25333F; } .service__thumb-5 { margin-bottom: 30px; } .service__content-5 p { color: var(--white); font-size: 16px; font-weight: 500; line-height: 1.5; } .service__item-title { color: var(--white); font-size: 20px; font-weight: 600; line-height: 1.2; margin-bottom: 20px; } .service__item-title:hover { color: var(--main-color-one-3); } /* ----------------------- HOME FIVE HISTORY ----------------------- */ .history__area-5 { padding-bottom: 150px; } @media (max-width: 991px) { .history__area-5 { padding-bottom: 60px; } } .history__items-5 { display: -ms-grid; display: grid; -ms-grid-columns: 1fr 30px 1fr; grid-template-columns: 1fr 1fr; gap: 30px; } @media (max-width: 767px) { .history__items-5 { -ms-grid-columns: 1fr; grid-template-columns: 1fr; } } .history__item-5 { max-width: 284px; margin-left: 45px; } .history__item-5 .double-chevron { -webkit-transform: translate(-35px, 25px); transform: translate(-35px, 25px); } .history__item-5 .title { color: var(--white); font-size: 48px; font-weight: 600; line-height: 1; letter-spacing: 0.16px; text-transform: uppercase; margin-bottom: 20px; } @media (max-width: 767px) { .history__item-5 .title { font-size: 30px; } } .history__item-5 .title-2 { color: var(--white); font-size: 20px; font-weight: 600; line-height: 1.2; margin-bottom: 10px; } .history__item-5 p { color: var(--white); } .history__thumb-5 { position: relative; -webkit-transform: translateX(100px); transform: translateX(100px); } @media (max-width: 1199px) { .history__thumb-5 { -webkit-transform: translateX(0); transform: translateX(0); } } .history__thumb-5 .history-shape-5 { position: absolute; right: -110px; bottom: -105px; } @media (max-width: 767px) { .history__thumb-5 .history-shape-5 { display: none; } } .history__circle-btn-wrapper { position: absolute; top: 0; right: 0; z-index: 2; } .history__circle-btn { background: var(--yellow-2); width: 152px; height: 152px; border-radius: 50%; 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: center; -ms-flex-pack: center; justify-content: center; } @media (max-width: 767px) { .history__circle-btn { height: 100px; width: 100px; } } .history__circle-btn .title { color: var(--secondary); font-size: 48px; font-weight: 600; line-height: 1; letter-spacing: 0.16px; text-transform: uppercase; } @media (max-width: 767px) { .history__circle-btn .title { font-size: 30px; } } .history__box-wrapper { position: absolute; bottom: -70px; right: 0; z-index: 3; } @media (max-width: 991px) { .history__box-wrapper { bottom: -18px; } } .history__box-5 { padding: 30px 60px; background: var(--main-color-one); max-width: 370px; } @media (max-width: 767px) { .history__box-5 { padding: 10px 40px; } } .history__box-5 .title { color: #252525; font-size: 48px; font-weight: 600; line-height: 1; letter-spacing: 0.16px; text-transform: uppercase; } @media (max-width: 767px) { .history__box-5 .title { font-size: 30px; } } .history__box-5 .title-2 { color: var(--p-3, #252525); font-size: 100px; font-weight: 700; line-height: 1; letter-spacing: -3px; text-transform: uppercase; padding-left: 70px; } @media (max-width: 1199px) { .history__box-5 .title-2 { font-size: 50px; } } /* ----------------------- HOME FIVE GALLARY ----------------------- */ .gallary__section-wrapper { margin-bottom: 70px; } .gallary__sec-title { color: var(--white); font-size: 48px; font-weight: 600; line-height: 1; letter-spacing: 0.16px; text-transform: uppercase; } @media (max-width: 767px) { .gallary__sec-title { font-size: 25px; } } .gallary__sec-title small { color: var(--white); font-size: 100px; font-weight: 700; line-height: 1; letter-spacing: -3px; text-transform: uppercase; } @media (max-width: 1199px) { .gallary__sec-title small { font-size: 50px; } } @media (max-width: 767px) { .gallary__sec-title small { font-size: 35px; } } .gallary__area-5 { padding-bottom: 150px; position: relative; } .gallary__area-5 .gallary__circle-5 { position: absolute; right: 290px; top: 0; } @media (max-width: 1199px) { .gallary__area-5 .gallary__circle-5 { right: 30px; } } @media (max-width: 991px) { .gallary__area-5 .gallary__circle-5 { display: none; } } @media (max-width: 767px) { .gallary__area-5 { padding-bottom: 80px; } } .gallary__area-5 .grid { gap: 30px; } .gallary__area-5 .portfolio { position: relative; margin-right: 10px; } @media (max-width: 1199px) { .gallary__area-5 .portfolio { margin-bottom: 10px; } } .gallary__area-5 .portfolio:last-child { margin-right: 0; } .gallary__area-5 .portfolio::before { position: absolute; content: ""; left: 30px; right: 30px; bottom: 30px; top: 30px; background: #252525; opacity: 0; visibility: hidden; -webkit-transition: 0.6s; transition: 0.6s; } .gallary__area-5 .portfolio:hover::before { opacity: 0.5; visibility: visible; } .gallary__area-5 .portfolio__text { position: absolute; bottom: 70px; left: 60px; color: var(--white); } .gallary__area-5 .portfolio-title { color: var(--white); font-size: 20px; font-weight: 600; line-height: 1.1; } .gallary__area-5 span { color: var(--gray-200, #E1E1E1); font-size: 16px; font-weight: 500; line-height: 1; } .gallary__area-5 .portfolio__icon { position: absolute; width: 40px; height: 40px; background: var(--main-color-one); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; bottom: 67px; right: 70px; } .gallary__area-5 .portfolio__menu { margin-bottom: 70px; } .gallary__area-5 .portfolio__menu button { padding: 10px 20px; border: 0; background: var(--white); } @media (max-width: 767px) { .gallary__area-5 .portfolio__menu button { margin: 5px; } } .gallary__area-5 .portfolio__menu button.active { background: var(--yellow-2); } /* ----------------------- HOME FIVE NEWSLETTER ----------------------- */ .newsletter__area-5 { background: var(--main-color-one); padding: 40px; } .newsletter__title-5 { color: #0E1E2A; font-size: 48px; font-weight: 600; line-height: 1; letter-spacing: 0.16px; text-transform: uppercase; } @media (max-width: 767px) { .newsletter__title-5 { font-size: 30px; } } .newsletter__form-wrapper-5 { position: relative; } @media (max-width: 991px) { .newsletter__form-wrapper-5 { margin-top: 30px; } } .newsletter__form-wrapper-5 form input { height: 65px; padding: 30px; background: #0E1E2A; color: var(--white); max-width: 460px; width: 100%; margin-bottom: 20px; border: 0; } .newsletter__form-wrapper-5 form input:focus { outline: 0; } .newsletter__form-wrapper-5 form input::-webkit-input-placeholder { color: var(--white); font-size: 16px; font-weight: 500; line-height: 1; } .newsletter__form-wrapper-5 form input::-moz-placeholder { color: var(--white); font-size: 16px; font-weight: 500; line-height: 1; } .newsletter__form-wrapper-5 form input:-ms-input-placeholder { color: var(--white); font-size: 16px; font-weight: 500; line-height: 1; } .newsletter__form-wrapper-5 form input::-ms-input-placeholder { color: var(--white); font-size: 16px; font-weight: 500; line-height: 1; } .newsletter__form-wrapper-5 form input::placeholder { color: var(--white); font-size: 16px; font-weight: 500; line-height: 1; } .newsletter__form-wrapper-5 form button { border: 0; padding: 20px 30px; background: #252525; color: var(--white); } /* ----------------------- HOME FIVE TEAM ----------------------- */ .team__area-5 { padding-left: 100px; padding-right: 100px; } @media (max-width: 991px) { .team__area-5 { padding-left: 50px; padding-right: 50px; } } .team__area-5 .team__member:hover .team__content { background-color: #26343F; } .team__area-5 .team__image { margin-left: 0; overflow: unset; } .team__area-5 .team__image:hover img { -webkit-transform: scale(1); transform: scale(1); } .team__area-5 .team__content { max-width: 100%; background-color: #26343F; text-align: right; padding: 93px 60px 24px 51px; } .team__area-5 .team__image img { width: 100%; } .team__area-5 .team__title { font-size: 20px; color: var(--white); } .team__area-5 .team__content p { color: var(--white); text-transform: capitalize; padding-top: 0; } .team__area-5 .share__wrap { top: auto; left: 0; padding-left: 30px; bottom: -32px; z-index: 9; } .team__area-5 .share__wrap .share-btn { border-radius: 0px 20px 0px 0px; background: var(--p-3, #D8FF36); } .team__area-5 .share__wrap .active li { top: -212px; } .team__area-5 .share__wrap li a { background-color: #D8FF36; } .team__wrapper-5 { display: -ms-grid; display: grid; -ms-grid-columns: 0.4fr 90px 1fr; grid-template-columns: 0.4fr 1fr; gap: 90px; } .team__subtitle-5 { color: var(--white); font-size: 18px; font-weight: 500; line-height: 1.2; letter-spacing: 1.8px; text-transform: uppercase; padding-bottom: 20px; display: block; } .team__sub-5 { color: var(--white); font-size: 48px; font-weight: 600; line-height: 1; /* 100% */ letter-spacing: 0.16px; text-transform: uppercase; } @media (max-width: 767px) { .team__sub-5 { font-size: 30px; } } .team__title-5 { color: var(--white); font-size: 100px; font-weight: 700; line-height: 1; letter-spacing: -3px; text-transform: uppercase; } @media (max-width: 1199px) { .team__title-5 { font-size: 50px; } } @media (max-width: 767px) { .team__title-5 { font-size: 30px; letter-spacing: 0; } } .team__title-5 span { text-align: right; display: block; padding-right: 70px; } @media (max-width: 991px) { .team__title-5 span { text-align: left; } } .team__left-5 { position: relative; } @media (max-width: 991px) { .team__left-5 { margin-bottom: 50px; } } .team__left-5 .testimonial-five-prev, .team__left-5 .testimonial-five-next { left: 0; bottom: -122px; top: auto; } @media (max-width: 991px) { .team__left-5 .testimonial-five-prev, .team__left-5 .testimonial-five-next { left: auto; bottom: 0; } } .team__left-5 .testimonial-five-next { left: 70px; bottom: -122px; top: auto; z-index: 3; } @media (max-width: 991px) { .team__left-5 .testimonial-five-next { left: auto; bottom: 0; } } /* ----------------------- HOME FIVE PRICING ----------------------- */ .pricing__area-5 { padding-bottom: 150px; } @media (max-width: 991px) { .pricing__area-5 { padding-bottom: 60px; } } .pricing__items-5 { display: -ms-grid; display: grid; -ms-grid-columns: 1fr 30px 1fr 30px 1fr; grid-template-columns: repeat(3, 1fr); gap: 30px; } @media (max-width: 991px) { .pricing__items-5 { -ms-grid-columns: 1fr 1fr; grid-template-columns: 1fr 1fr; } } @media (max-width: 767px) { .pricing__items-5 { -ms-grid-columns: 1fr; grid-template-columns: 1fr; } } .pricing__item-5 { position: relative; } .pricing__item-5:hover .pricing__header-5 { background: var(--yellow-2); } .pricing__item-5:hover .pricing__header-5 .title { color: var(--black); } .pricing__item-5:hover .pricing__header-5 .title-2 { color: var(--black); } .pricing__item-5:hover .pricing__header-5 p { color: var(--black); } .pricing__header-5 { background: #252525; padding: 40px; -webkit-transition: 0.6s; transition: 0.6s; } @media (max-width: 1199px) { .pricing__header-5 { padding: 25px; } } .pricing__header-5 .title { color: var(--white); font-size: 20px; font-weight: 600; line-height: 1.2; margin-bottom: 10px; } .pricing__header-5 .title-2 { color: var(--white); font-size: 16px; font-weight: 500; line-height: 1; padding-bottom: 20px; } .pricing__header-5 .title-2 span { font-size: 48px; font-weight: 600; line-height: 1; letter-spacing: 0.16px; text-transform: uppercase; } .pricing__header-5 p { color: var(--white); } .pricing__feature-5 { background: #26343F; padding: 40px; padding-bottom: 60px; } .pricing__feature-list li { color: var(--white); font-size: 16px; font-weight: 500; line-height: 1; margin-bottom: 20px; } .pricing__btn-wrapper { position: absolute; left: 50%; bottom: -30px; -webkit-transform: translateX(-50%); transform: translateX(-50%); } .pricing__btn { display: inline-block; width: 67px; height: 67px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; color: var(--black); background: var(--main-color-one); border-radius: 50px; } /* ----------------------- HOME FIVE TESTIMONIAL ----------------------- */ .testimonial-five-active { padding-bottom: 100px; } .testimonial-five-prev, .testimonial-five-next { width: 50px; height: 50px; background: #10332F; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; color: var(--white); position: absolute; right: 70px; top: 70px; z-index: 3; } @media (max-width: 767px) { .testimonial-five-prev, .testimonial-five-next { display: none; } } .testimonial-five-prev:hover, .testimonial-five-next:hover { background: var(--main-color-one); } .testimonial-five-next { right: 0; } @media (max-width: 767px) { .testimonial-five-next { font-size: 30px; } } .testimonial__area-5 { padding-bottom: 200px; position: relative; } @media (max-width: 991px) { .testimonial__area-5 { padding-bottom: 100px; } } .testimonial__item-5 { max-width: 630px; position: relative; padding-left: 80px; } @media (max-width: 991px) { .testimonial__item-5 { padding-left: 36px; } } .testimonial__item-5::before { content: ""; position: absolute; left: 19px; right: 0; bottom: 0; top: 87px; height: 100%; width: 100%; border: 1px solid #333F4D; } .testimonial__item-5 p { color: var(--white); } .testimonial__header-5 { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-bottom: 30px; } .testimonial__thumb-5 { margin-left: -20px; position: relative; z-index: 2; } .testimonial__rating-5 { -ms-flex-item-align: end; align-self: flex-end; padding: 10px; -webkit-transform: translateY(-16px); transform: translateY(-16px); } .testimonial__rating-wrap-5 { display: -webkit-box; display: -ms-flexbox; display: flex; } .testimonial__rating-star { background: var(--yellow-2); padding: 5px 10px; } .testimonial__rate-5 { background: var(--main-color-one); color: #0E1E2A; font-size: 16px; font-weight: 500; line-height: 1; padding: 5px 10px; } .testimonial__footer-5 { margin-top: 20px; max-width: 250px; margin-left: auto; background: var(--main-color-one); padding: 15px; text-align: center; position: absolute; right: 80px; } .testimonial__name-5 { color: var(--gray-900, #010D4C); font-size: 20px; font-weight: 600; line-height: 1; padding-bottom: 8px; } .testimonial__post-5 { color: #333F4D; font-size: 16px; font-weight: 500; line-height: 1; } /* ----------------------- HOME FIVE FOOTER ----------------------- */ .contact__form.contact__form, .contact__form-4 { background: #26343F; padding: 50px; } @media (max-width: 1199px) { .contact__form.contact__form, .contact__form-4 { -webkit-transform: translateY(0); transform: translateY(0); } } @media (max-width: 767px) { .contact__form.contact__form, .contact__form-4 { padding: 20px; } } .contact__form.contact__form input, .contact__form-4 input { margin-bottom: 30px; } .contact__form.contact__form .submit, .contact__form-4 .submit { border-radius: 30px; padding: 20px; background: var(--main-color-one); color: #fff; } .footer__area-5 { padding-left: 315px; padding-right: 80px; padding-top: 200px; } @media (max-width: 1199px) { .footer__area-5 .footer__address { padding-left: 0; } } @media (max-width: 767px) { .footer__area-5 .footer__address { padding-top: 0; } } @media (max-width: 1919px) { .footer__area-5 { padding-left: 100px; } } @media (max-width: 1199px) { .footer__area-5 { padding-top: 0; } } @media (max-width: 991px) { .footer__area-5 { padding-left: 50px; } } @media (max-width: 767px) { .footer__area-5 { padding-left: 15px; padding-right: 15px; } } .footer__area-5 p { color: var(--white); } .footer__wrapper-5 { display: -ms-grid; display: grid; -ms-grid-columns: 1fr 0.5fr; grid-template-columns: 1fr 0.5fr; } @media (max-width: 1199px) { .footer__wrapper-5 { -ms-grid-columns: 1fr; grid-template-columns: 1fr; } } .footer__form-title-5 { color: var(--white); font-size: 48px; font-weight: 600; line-height: 1; letter-spacing: 0.16px; text-transform: uppercase; margin-bottom: 40px; } @media (max-width: 1919px) { .footer__form-title-5 { font-size: 30px; } } .footer__field-5 { display: -ms-grid; display: grid; -ms-grid-columns: 1fr 30px 1fr; grid-template-columns: 1fr 1fr; gap: 30px; } @media (max-width: 767px) { .footer__field-5 { -ms-grid-columns: 1fr; grid-template-columns: 1fr; gap: 0; } } .footer__section-wrapper-5 { margin-bottom: 130px; } @media (max-width: 767px) { .footer__section-wrapper-5 { margin-bottom: 50px; } } .footer__title-5 { font-size: 100px; font-weight: 700; line-height: 1; letter-spacing: -3px; text-transform: uppercase; -webkit-text-stroke: 1px white; -webkit-text-fill-color: #0E1E2A; } @media (max-width: 1919px) { .footer__title-5 { font-size: 70px; } } @media (max-width: 991px) { .footer__title-5 { font-size: 40px; } } /*----------------------------------------*/ /* . BLOG CSS START /*----------------------------------------*/ .blog__item-inner { margin-bottom: 80px; } @media (max-width: 767px) { .blog__item-inner { margin-bottom: 30px; } } .blog__thumb-inner { overflow: hidden; border-radius: 20px; margin-bottom: 10px; } .blog__thumb-inner img { -webkit-transition: 1s; transition: 1s; width: 100%; } .blog__thumb-inner img:hover { -webkit-transform: scale(1.1); transform: scale(1.1); } .blog__meta-inner { display: -webkit-box; display: -ms-flexbox; display: flex; gap: 50px; padding-top: 10px; padding-bottom: 20px; } @media (max-width: 767px) { .blog__meta-inner { -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 10px; padding-bottom: 10px; } } .blog__meta-inner li a { font-weight: 500; font-size: 16px; line-height: 2; color: var(--black-4); } .blog__title-inner { font-weight: 600; font-size: 48px; line-height: 1; letter-spacing: 0.16px; text-transform: capitalize; color: #0E1E2A; padding-bottom: 15px; -webkit-transition: 0.3s; transition: 0.3s; } .blog__title-inner:hover { color: var(--main-color-one); } @media (max-width: 1399px) { .blog__title-inner { font-size: 35px; } } @media (max-width: 767px) { .blog__title-inner { font-size: 25px; } } .blog__dis-inner { font-weight: 500; font-size: 16px; line-height: 2; color: #67687A; padding-bottom: 40px; } @media (max-width: 767px) { .blog__dis-inner { line-height: 1.5; } .blog__dis-inner br { display: none; } } .blog__btn-inner { display: inline-block; padding: 15px 30px; font-weight: 600; font-size: 14px; line-height: 1.5; letter-spacing: 1.6px; text-transform: uppercase; color: #FFFFFF; background: var(--main-color-one); } .blog__btn-inner::before { border-radius: 40px; } .blog__btn-inner.btn-rollover { border-radius: 40px; } .blog__btn-inner:hover { color: #FFFFFF; } .blog__btn-inner i { padding-left: 5px; } .blog__search form { position: relative; } .blog__search form input { width: 100%; background: #F4F5FA; border: 1px solid #E3E3E3; border-radius: 50px; height: 61px; padding: 30px; padding-right: 40px; } .blog__search form input:focus { outline: 0; } .blog__search form input::-webkit-input-placeholder { font-weight: 500; font-size: 16px; line-height: 1; color: #67687A; } .blog__search form input::-moz-placeholder { font-weight: 500; font-size: 16px; line-height: 1; color: #67687A; } .blog__search form input:-ms-input-placeholder { font-weight: 500; font-size: 16px; line-height: 1; color: #67687A; } .blog__search form input::-ms-input-placeholder { font-weight: 500; font-size: 16px; line-height: 1; color: #67687A; } .blog__search form input::placeholder { font-weight: 500; font-size: 16px; line-height: 1; color: #67687A; } .blog__search form button { position: absolute; right: 20px; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); font-weight: 900; font-size: 16px; line-height: 1; color: var(--main-color-one); border: 0; background: transparent; } .blog__widget { margin-bottom: 60px; } .blog__widget-title { font-weight: 600; font-size: 20px; line-height: 1.2; color: #0E1E2A; border-bottom: 1px solid #E3E3E3; display: block; padding-bottom: 30px; } .blog__category li { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding-bottom: 20px; } .blog__category li:last-child { padding-bottom: 0; } .blog__category li span { font-weight: 600; } .blog__category li a { font-weight: 500; font-size: 16px; line-height: 1; color: #0E1E2A; font-weight: 600; } .blog__category li a:hover { color: var(--main-color-one); } .blog__ritem { display: -ms-grid; display: grid; -ms-grid-columns: auto 75px 80px; grid-template-columns: auto 80px; gap: 75px; margin-bottom: 30px; } .blog__ritem a img { border-radius: 10px; } .blog__ritem:last-child { margin-bottom: 0; } .blog__recenttitle { font-weight: 600; font-size: 20px; line-height: 1.2; color: #0E1E2A; padding-bottom: 10px; } .blog__tags { display: -webkit-box; display: -ms-flexbox; display: flex; gap: 20px; -ms-flex-wrap: wrap; flex-wrap: wrap; } .blog__tags a { font-weight: 500; font-size: 16px; line-height: 1; color: #67687A; display: inline-block; padding: 10px 16px; background: #F4F5FA; border-radius: 20px; -webkit-transition: 0.3s; transition: 0.3s; } .blog__tags a:hover { background: var(--main-color-one); color: #fff; } .blog__notification { background: #F4F5FA; padding: 70px; border: 1px solid #E3E3E3; border-radius: 5px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .blog__notification p { text-align: center; padding-top: 10px; padding-bottom: 20px; } @media (max-width: 991px) { .blog__pagination-wrap { padding-left: 0; } } .blog__pagination-list { display: -webkit-box; display: -ms-flexbox; display: flex; gap: 10px; } .blog__pagination-list li a { font-weight: 600; font-size: 16px; line-height: 1.2; text-align: center; color: #0E1E2A; display: inline-block; background: #F4F5FA; border-radius: 50%; height: 45px; width: 45px; line-height: 45px; } .blog__pagination-list li a:hover { background: var(--main-color-one); color: white; } .blog__details p { font-weight: 500; font-size: 16px; line-height: 2; color: #67687A; padding-bottom: 20px; } .blog__details h4 { font-weight: 600; font-size: 20px; line-height: 1.2; color: #0E1E2A; padding-bottom: 20px; -webkit-transition: 0.3s; transition: 0.3s; } .blog__details h4:hover { color: var(--main-color-one); } .blog__quote { padding: 40px; background: #F4F5FA; border-radius: 5px; } @media (max-width: 767px) { .blog__quote { padding: 15px; } } .blog__thumb2 { padding-top: 50px; padding-bottom: 20px; } .blog__detaillist { display: -webkit-box; display: -ms-flexbox; display: flex; gap: 30px; } .blog__detaillist span { font-weight: 600; font-size: 20px; line-height: 1.2; color: #0E1E2A; } .blog__detailtag { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; border-top: 1px solid #E3E3E3; padding-top: 15px; margin-top: 60px; } @media (max-width: 767px) { .blog__detailtag { -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 20px; margin-top: 30px; } } .blog__detailleft { display: -webkit-box; display: -ms-flexbox; display: flex; gap: 30px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .blog__social { display: -webkit-box; display: -ms-flexbox; display: flex; gap: 10px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .blog__social li a { font-weight: 400; font-size: 16px; line-height: 1; color: var(--main-color-one); padding: 10px 10px; background: #F4F5FA; border-radius: 5px; display: inline-block; } .blog__submitbtn { display: inline-block; padding: 20px 30px; background: var(--main-color-one); border-radius: 50px; font-size: 14px; line-height: 1.5; letter-spacing: 1.6px; text-transform: capitalize; color: #FFFFFF; border: 0; } .blog__submitbtn:before { border-radius: 50px; } .blog__form { padding-top: 90px; } @media (max-width: 767px) { .blog__form { padding-top: 30px; } } .blog__form form { padding-top: 30px; } .blog__form-title { font-weight: 600; font-size: 20px; line-height: 1.4; color: #0E1E2A; display: block; } .blog__form input { width: 100%; padding: 20px; border: 1px solid #E3E3E3; border-radius: 50px; height: 51px; margin-bottom: 20px; } .blog__form input:focus { outline: 0; } .blog__form textarea { height: 180px; width: 100%; padding: 20px; border: 1px solid #E3E3E3; border-radius: 30px; margin-bottom: 20px; } .blog__form textarea:focus { outline: 0; } @media (max-width: 991px) { .blog__submitwrap { margin-bottom: 30px; } } /*----------------------------------------*/ /* . PROJECT DETAILS CSS START /*----------------------------------------*/ .projectd__details-inner h2 { font-size: 48px; font-weight: 600; line-height: 1; letter-spacing: 0.16px; text-transform: uppercase; padding-bottom: 20px; } @media (max-width: 991px) { .projectd__details-inner h2 { font-size: 35px; } } .projectd__details-inner h3 { font-size: 20px; font-weight: 600; line-height: 1.5; padding-bottom: 15px; padding-top: 10px; } .projectd__details-inner p { font-size: 16px; font-weight: 500; line-height: 2; padding-bottom: 20px; color: var(--black-4); } .projectd__item-inner { display: -ms-grid; display: grid; -ms-grid-columns: 40px 23px auto; grid-template-columns: 40px auto; max-width: 185px; gap: 23px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .projectd__mcontent-inner .title { font-size: 16px; font-weight: 500; line-height: 1; padding-bottom: 15px; } .projectd__meta-inner { display: -webkit-box; display: -ms-flexbox; display: flex; gap: 160px; padding: 45px 40px; background: #F4F5FA; margin-bottom: 70px; border-radius: 0 0 20px 20px; } @media (max-width: 1199px) { .projectd__meta-inner { gap: 50px; } } @media (max-width: 991px) { .projectd__meta-inner { gap: 30px; margin-bottom: 50px; -ms-flex-wrap: wrap; flex-wrap: wrap; } } @media (max-width: 767px) { .projectd__meta-inner { -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 20px; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; margin-bottom: 20px; } } .projectd__checkboxwrapper { display: -ms-grid; display: grid; -ms-grid-columns: 1fr 30px 1fr 30px 1fr; grid-template-columns: 1fr 1fr 1fr; gap: 30px; margin-bottom: 40px; margin-top: 10px; } @media (max-width: 991px) { .projectd__checkboxwrapper { gap: 0; } } @media (max-width: 767px) { .projectd__checkboxwrapper { -ms-grid-columns: 1fr; grid-template-columns: 1fr; } } .projectd__checkbox label { padding-left: 15px; display: inline-block; font-weight: 600; } .projectd__detailsthumb { gap: 30px; padding-top: 20px; padding-bottom: 50px; display: -ms-grid; display: grid; -ms-grid-columns: 1fr 30px 1fr; grid-template-columns: 1fr 1fr; } .projectd__detailsthumb img { width: 100%; } /*----------------------------------------*/ /* . CONTACT CSS START /*----------------------------------------*/ .contact__item { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; text-align: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; background: #F4F5FA; border-radius: 25px; padding: 45px; margin-bottom: 40px; } .contact__item i { font-size: 40px; color: var(--main-color-one); } .contact__item .title { font-weight: 600; font-size: 20px; line-height: 1.2; text-align: center; color: #333F4D; padding-top: 20px; padding-bottom: 15px; } .contact__item p { font-weight: 500; font-size: 16px; line-height: 2; color: #67687A; } .contact__item a { font-weight: 500; font-size: 16px; line-height: 2; color: #67687A; } .contact__submit { display: inline-block; padding: 20px 50px; font-weight: 600; font-size: 14px; line-height: 1.5; letter-spacing: 1.6px; text-transform: uppercase; color: #FFFFFF; border: 0; background: var(--main-color-one); border-radius: 50px; } .contact__submit:before { border-radius: 50px; } .pt-30 { padding-top: 30px; } .color-base { color: var(--main-color-one) !important; } .color-heading { color: var(--black-3) !important; } .bg-base { background: var(--main-color-one) !important; } .bg-base:before { background: var(--black-3); border-radius: 25px; } .border-radius-20 { border-radius: 20px; } .border-radius-20:before { border-radius: 20px; } .border-radius-25 { border-radius: 25px; } .border-radius-25:before { border-radius: 25px; } .border-radius-50 { border-radius: 50px !important; } .border-radius-50:before { border-radius: 50px; } .bg-light1 { background: #ECE8E0; } .service-inner { margin-top: -220px; } .bg-white { background: #fff; } .border-bottom-1-black { border-bottom: 1px solid var(--black-3); } .box-shadow { -webkit-box-shadow: 0px 10px 60px 0px rgba(0, 0, 0, 0.07); box-shadow: 0px 10px 60px 0px rgba(0, 0, 0, 0.07); } .projectd__thumb img { width: 100%; border-radius: 20px 20px 0 0; } .service__item .icon img { -webkit-transition: 0.4s; transition: 0.4s; } .service__item:hover .icon img { -webkit-transform: rotateY(180deg); transform: rotateY(180deg); } .team__member:hover p, .team__member:hover .team__title { color: #fff; } .newsletter__left img { border-radius: 20px 20px 0 0; } @media all and (max-width: 1500px) { .textslider_1 h2 { font-size: 55px; } .textslider_2 h2 { font-size: 55px; } .hero__area_1_inner .main-thumb .main-img { width: 950px; } .hero__title { font-size: 75px; } .footer_two_area .footer__address { padding-left: 0; } .footer_top h2 { font-size: 80px; } .service__text p br { display: none; } .header__area-4.plr-100 { padding-left: 50px; padding-right: 50px; } .projectd__meta-inner { gap: 100px; } } @media all and (max-width: 1200px) { .hero__area_1 { padding: 190px 45px 100px; } .hero__area_1_inner .main-thumb .main-img { width: 750px; } .hero__title { font-size: 55px; } .hero__area_1 .video_area a img { width: 100px; } .hero__area_1 .hero_1_content h1 { margin-bottom: 65px; } .service__text br { display: none; } .textslider_1 h2 { font-size: 35px; } .textslider_2 h2 { font-size: 35px; } } @media all and (max-width: 991px) { .exp-area, .who__area_inner { background-image: none !important; } .service-inner { margin-top: -140px; } } @media (max-width: 575px) { .service-inner { margin-top: -75px; } .hero__title { font-size: 30px; line-height: 1.2; } .hero__area_1 .video_area a img { width: 60px; } .hero__area_1 .hero_1_content h1 img { margin-top: -11px; width: 40px; margin-left: 10px; } .hero__area_1 { padding: 257px 15px 66px; margin-bottom: 60px; } .hero__area_1 .hero_1_content h1 { margin-bottom: 15px; margin-top: -110px; } .service__item.style2 .service__content .icon-box { margin-bottom: 35px; } .service__item.style2 .service__content { padding: 50px 30px 40px; } .newsletter__right .submit { right: auto; width: 100%; margin-top: 5px; } .projectd__meta-inner { gap: 30px; padding: 30px; } } /*# sourceMappingURL=master.css.map */