/*------------------------- Fonts -------------------------*/ /*@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap");*/ @import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap'); /*------------------------- Variables -------------------------*/ /*------------------------- Responsive Styles -------------------------*/ /*------------------------- Reset Styles -------------------------*/ body{ font-family: "Poppins", sans-serif !important; } img { max-width: 100%; height: auto; vertical-align: middle; } ul.list-style, ol.list-style { padding: 0; } ul.list-style li::marker, ol.list-style li::marker { color: #C550FF; } .unstyled { padding-left: 0; list-style: none; margin-bottom: 0; } @media (max-width: 576px) { .row { --bs-gutter-x: 0.75rem; --bs-gutter-y: 0; } } .slick-track > [class*=col] { -webkit-flex-shrink: 0 !important; -ms-flex-negative: 0; flex-shrink: 0; width: 100%; max-width: 100%; margin-right: calc(var(--bs-gutter-x) / 2) !important; margin-left: calc(var(--bs-gutter-x) / 2) !important; } .container-fluid { padding-right: calc(var(--bs-gutter-x) * 0.75); padding-left: calc(var(--bs-gutter-x) * 0.75); } @media (min-width: 1600px) { .container-fluid { padding: 0 12.5vw; width: 100%; } } @media (max-width: 1599px) { .container-fluid { padding: 0 6vw; width: 100%; } } @media (max-width: 1199px) { .container-fluid { padding: 0 2vw; width: 100%; } } @media (max-width: 575px) { .container-fluid { --bs-gutter-x: 2rem; --bs-gutter-y: 0; width: 100%; padding-right: calc(var(--bs-gutter-x) * 0.5); padding-left: calc(var(--bs-gutter-x) * 0.5); } } #scroll-container { overflow-x: hidden; } /*------------------------- Typography -------------------------*/ html { scroll-behavior: smooth; } body { font-family: "Inter", sans-serif; color: #45474F; background: #FAFAFA; vertical-align: baseline; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; font-size: clamp(16px, 0.938vw, 22px); font-weight: 400; line-height: 140%; height: 100%; overflow-x: hidden; } @media (max-width: 490px) { body { font-size: clamp(12px, 0.729vw, 28px); } } body::-webkit-scrollbar { width: 5px; } body::-webkit-scrollbar-track { background-color: #45474F; border-radius: 0; } body::-webkit-scrollbar-thumb { border-radius: 4px; background: #C550FF; } a { display: inline-block; text-decoration: none; color: unset; transition: all 0.4s ease-in-out; } h1, h2, h3, h4, h5, h6, p, table, hr { margin: 0; } h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { color: inherit; } h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 { color: #141516; margin-bottom: 0; } h1, .h1 { font-family: "Plus Jakarta Sans", sans-serif; font-size: clamp(48px, 3.177vw, 99px); /* 61px */ font-style: normal; font-weight: 600; line-height: 120%; /* 96px */ } @media (max-width: 1199px) { h1, .h1 { font-size: clamp(46px, 4.837vw, 69px); /* 58px */ } } @media (max-width: 820px) { h1, .h1 { font-size: clamp(38px, 5.61vw, 58px); /* 46px */ } } h2, .h2 { font-family: "Plus Jakarta Sans", sans-serif; font-size: clamp(48px, 2.552vw, 69px); /* 49px */ font-style: normal; font-weight: 500; line-height: 120%; /* 66px */ } @media (max-width: 1199px) { h2, .h2 { font-size: clamp(39px, 2.24vw, 52px); /* 43px */ } } @media (max-width: 820px) { h2, .h2 { font-size: clamp(33px, 1.979vw, 48px); /* 38px */ } } h3, .h3 { font-family: "Plus Jakarta Sans", sans-serif; font-size: clamp(31px, 2.031vw, 125px); /* 39px */ font-style: normal; font-weight: 700; line-height: 120%; } @media (max-width: 1199px) { h3, .h3 { font-size: clamp(33px, 1.927vw, 48px); /* 37px */ } } @media (max-width: 820px) { h3, .h3 { font-size: clamp(28px, 1.667vw, 38px); /* 32px */ } } h4, .h4 { font-family: "Inter", sans-serif; font-size: clamp(30px, 1.615vw, 57px); /* 3!px */ font-style: normal; font-weight: 600; line-height: 120%; /* 42px */ } @media (max-width: 1199px) { h4, .h4 { font-size: clamp(28px, 1.719vw, 40px); /* 33px */ } } @media (max-width: 820px) { h4, .h4 { font-size: clamp(20px, 1.406vw, 30px); /* 27px */ } } h5, .h5 { font-family: "Inter", sans-serif; font-size: clamp(18px, 1.302vw, 62px); /* 25px */ font-style: normal; font-weight: 600; line-height: 120%; /* 33.6px */ } @media (max-width: 1199px) { h5, .h5 { font-size: clamp(20px, 1.302vw, 32px); /* 25px */ } } @media (max-width: 820px) { h5, .h5 { font-size: clamp(18px, 1.042vw, 24px); /* 20px */ } } h6, .h6 { font-family: "Inter", sans-serif; font-size: clamp(15px, 1.042vw, 40px); /* 20px */ font-style: normal; font-weight: 500; line-height: 120%; /* 27.6px */ } @media (max-width: 1199px) { h6, .h6 { font-size: clamp(14px, 0.938vw, 36px); /* 18px */ } } @media (max-width: 820px) { h6, .h6 { font-size: clamp(14px, 0.833vw, 32px); /* 16px */ } } .text-18, p { color: #45474F; font-family: "Inter", sans-serif; font-size: clamp(14px, 0.833vw, 32px); /* 16px */ font-style: normal; font-weight: 400; line-height: 150%; /* 21.6px */ } @media (max-width: 399px) { .text-18, p { font-size: clamp(13px, 0.729vw, 28px); /* 14px */ } } .eyebrow { color: #FAF0FF; text-transform: uppercase; font-size: clamp(10px, 0.729vw, 28px); /* 16px */ font-family: "Inter", sans-serif; font-weight: 500; line-height: 120%; /* 24px */ } @media (max-width: 1199px) { .eyebrow { font-size: clamp(12px, 0.677vw, 32px); /* 15px */ } } .subtitle { font-size: clamp(12px, 0.677vw, 28px); /* 13px */ font-family: "Inter", sans-serif; font-style: normal; font-weight: 400; line-height: 120%; } .caption { font-size: clamp(12px, 0.677vw, 28px); /* 13px */ font-style: normal; font-weight: 400; line-height: 120%; } @media (max-width: 1499px) { .caption { font-size: 10px; } } span { display: inline-block; } b, strong { font-family: "Inter", sans-serif; } .hr-line { width: 100%; height: 1px; background: #92949F; } .hover-content { transition: all 0.4s ease-in-out; } .hover-content:hover { color: #d6b36b !important; } /*------------------------- Helpers -------------------------*/ .color-primary { color: #d6b36b !important; } .color-sec { color: #E7B8FF !important; } .color-ter { color: #FAF0FF !important; } .black { color: #0C0C0D !important; } .medium-black { color: #1E1F20 !important; } .light-black { color: #141516 !important; } .dark-gray { color: #45474F !important; } .light-gray { color: #92949F !important; } .lightest-gray { color: #EAEAEC !important; } .white { color: #FAFAFA; } .bg-primary { background: #d6b36b !important; } .bg-sec { background: #E7B8FF !important; } .bg-ter { background: #FAF0FF !important; } .bg-black { background: #0C0C0D !important; } .bg-medium-black { background: #1E1F20 !important; } .bg-light-black { background: #141516 !important; } .bg-dark-gray { background: #45474F !important; } .bg-light-gray { background: #92949F !important; } .bg-lightest-gray { background: #EAEAEC !important; } .bg-white { background: #FAFAFA !important; } .bg-white-bordered { background: #FAFAFA; border: 1px solid #EAEAEC; border-radius: clamp(8px, 0.625vw, 24px); } .fw-200 { font-weight: 200; } .fw-300 { font-weight: 300; } .fw-400 { font-weight: 400; } .fw-500 { font-weight: 500; } .fw-600 { font-weight: 600; } .fw-700 { font-weight: 700; } .fw-800 { font-weight: 800; } .font-primary { font-family: "Inter", sans-serif; } .font-sec { font-family: "Plus Jakarta Sans", sans-serif; } .br-4 { border-radius: 4px; } .br-8 { border-radius: clamp(4px, 0.417vw, 16px); } .br-10 { border-radius: clamp(5px, 0.521vw, 20px); } .br-12 { border-radius: clamp(8px, 0.625vw, 24px); } .br-14 { border-radius: clamp(10px, 0.729vw, 28px); } .br-16 { border-radius: clamp(12px, 0.833vw, 32px); } .br-18 { border-radius: clamp(14px, 0.938vw, 36px); } .br-20 { border-radius: clamp(16px, 1.042vw, 40px); } .br-24 { border-radius: clamp(18px, 1.25vw, 48px); } .br-32 { border-radius: clamp(24px, 1.667vw, 64px); } .gap-6 { gap: clamp(3px, 0.313vw, 7px); } .order-6 { order: 6 !important; } /*----------------------------------------*/ /* SPACE CSS START /*----------------------------------------*/ .mb-160 { margin-bottom: clamp(96px, 8.32vw, 320px); } @media (max-width: 767px) { .mb-160 { margin-bottom: 46px; } } .mb-90 { margin-bottom: clamp(32px, 4.688vw, 128px); } @media (max-width: 767px) { .mb-90 { margin-bottom: 48px; } } .mb-96 { margin-bottom: clamp(52px, 5vw, 128px); } @media (max-width: 767px) { .mb-96 { margin-bottom: 48px; } } .my-80 { margin: clamp(48px, 4.167vw, 160px) 0; } @media (max-width: 575px) { .my-80 { margin: 40px 0; } } .mt-80 { margin-top: clamp(48px, 4.167vw, 160px); } @media (max-width: 575px) { .mt-80 { margin-top: 40px; } } .mb-80 { margin-bottom: clamp(48px, 4.167vw, 160px); } @media (max-width: 575px) { .mb-80 { margin-bottom: 40px; } } .mb-180 { margin-bottom: clamp(58px, 9.375vw, 260px); } @media (max-width: 575px) { .mb-180 { margin-bottom: 50px; } } .mb-64 { margin-bottom: clamp(32px, 3.33vw, 128px); } @media (max-width: 767px) { .mb-64 { margin-bottom: 40px; } } .mt-90 { margin-top: clamp(32px, 4.688vw, 128px); } @media (max-width: 767px) { .mt-90 { margin-top: 26px; } } .mt-64 { margin-top: clamp(32px, 3.33vw, 128px); } @media (max-width: 767px) { .mt-64 { margin-top: 26px; } } .my-64 { margin: clamp(32px, 3.33vw, 128px) 0; } @media (max-width: 767px) { .my-64 { margin: 26px 0; } } .mt-48 { margin-top: clamp(24px, 2.5vw, 96px); } @media (max-width: 767px) { .mt-48 { margin-top: 20px; } } .mb-48 { margin-bottom: clamp(24px, 2.5vw, 96px); } @media (max-width: 767px) { .mb-48 { margin-bottom: 20px; } } .mb-40 { margin-bottom: clamp(24px, 2.083vw, 80px); } @media (max-width: 575px) { .mb-40 { margin-bottom: 20px; } } .mt-32 { margin-top: 32px; } @media (max-width: 1599px) { .mt-32 { margin-top: 29px; } } @media (max-width: 1399px) { .mt-32 { margin-top: 27px; } } @media (max-width: 1199px) { .mt-32 { margin-top: 25px; } } @media (max-width: 991px) { .mt-32 { margin-top: 22px; } } @media (max-width: 767px) { .mt-32 { margin-top: 20px; } } .mb-36 { margin-bottom: clamp(24px, 1.875vw, 64px); } .mb-32 { margin-bottom: 32px; } @media (max-width: 1599px) { .mb-32 { margin-bottom: 29px; } } @media (max-width: 1399px) { .mb-32 { margin-bottom: 27px; } } @media (max-width: 1199px) { .mb-32 { margin-bottom: 25px; } } @media (max-width: 991px) { .mb-32 { margin-bottom: 22px; } } @media (max-width: 767px) { .mb-32 { margin-bottom: 20px; } } .mt-24 { margin-top: 24px; } @media (max-width: 1199px) { .mt-24 { margin-top: 22px; } } @media (max-width: 991px) { .mt-24 { margin-top: 22px; } } @media (max-width: 767px) { .mt-24 { margin-top: 20px; } } .mb-120 { margin-bottom: clamp(60px, 6.25vw, 320px); } @media (max-width: 575px) { .mb-120 { margin-bottom: 48px; } } .mb-28 { margin-bottom: 28px; } @media (max-width: 1199px) { .mb-28 { margin-bottom: 22px; } } @media (max-width: 991px) { .mb-28 { margin-bottom: 22px; } } @media (max-width: 767px) { .mb-28 { margin-bottom: 20px; } } .mb-24 { margin-bottom: 24px; } @media (max-width: 1199px) { .mb-24 { margin-bottom: 22px; } } @media (max-width: 991px) { .mb-24 { margin-bottom: 22px; } } @media (max-width: 767px) { .mb-24 { margin-bottom: 20px; } } .mb-20 { margin-bottom: 20px; } @media (max-width: 1199px) { .mb-20 { margin-bottom: 18px; } } @media (max-width: 991px) { .mb-20 { margin-bottom: 16px; } } @media (max-width: 767px) { .mb-20 { margin-bottom: 14px; } } .mt-16 { margin-top: 16px; } @media (max-width: 1199px) { .mt-16 { margin-top: 15px; } } @media (max-width: 991px) { .mt-16 { margin-top: 14px; } } @media (max-width: 767px) { .mt-16 { margin-top: 10px; } } .mb-18 { margin-bottom: 18px; } @media (max-width: 1199px) { .mb-18 { margin-bottom: 14px; } } @media (max-width: 991px) { .mb-18 { margin-bottom: 13px; } } @media (max-width: 767px) { .mb-18 { margin-bottom: 10px; } } .mb-16 { margin-bottom: 16px; } @media (max-width: 1199px) { .mb-16 { margin-bottom: 15px; } } @media (max-width: 991px) { .mb-16 { margin-bottom: 14px; } } @media (max-width: 767px) { .mb-16 { margin-bottom: 10px; } } .mb-12 { margin-bottom: 12px; } @media (max-width: 1199px) { .mb-12 { margin-bottom: 11px; } } @media (max-width: 991px) { .mb-12 { margin-bottom: 10px; } } @media (max-width: 767px) { .mb-12 { margin-bottom: 8px; } } .mb-8 { margin-bottom: 8px; } @media (max-width: 767px) { .mb-8 { margin-bottom: 4px; } } .mb-6 { margin-bottom: 6px; } @media (max-width: 767px) { .mb-6 { margin-bottom: 3px; } } .mb-4p { margin-bottom: 4px; } .py-160 { padding: clamp(96px, 8.32vw, 320px) 0; } @media (max-width: 575px) { .py-160 { padding: 80px 0; } } .pt-160 { padding-top: clamp(96px, 8.32vw, 320px); } @media (max-width: 575px) { .pt-160 { padding-top: 80px; } } .pb-160 { padding-bottom: clamp(96px, 8.32vw, 320px); } @media (max-width: 575px) { .pb-160 { padding-bottom: 80px; } } .py-80 { padding: clamp(48px, 4.167vw, 160px) 0; } @media (max-width: 575px) { .py-80 { padding: 40px 0; } } .pt-80 { padding-top: clamp(48px, 4.167vw, 160px); } @media (max-width: 575px) { .pt-80 { padding-top: 40px; } } .pt-120 { padding-top: clamp(60px, 6.25vw, 320px); } @media (max-width: 575px) { .pt-120 { padding-top: 48px; } } .pb-120 { padding-bottom: clamp(60px, 6.25vw, 320px); } @media (max-width: 575px) { .pb-120 { padding-bottom: 48px; } } .pb-80 { padding-bottom: clamp(48px, 4.167vw, 160px); } @media (max-width: 575px) { .pb-80 { padding-bottom: 40px; } } .py-64 { padding: clamp(32px, 3.33vw, 128px) 0; } @media (max-width: 767px) { .py-64 { padding: 26px 0; } } .pt-64 { padding-top: clamp(32px, 3.33vw, 128px); } @media (max-width: 767px) { .pt-64 { padding-top: 26px; } } .pb-64 { padding-bottom: clamp(32px, 3.33vw, 128px); } @media (max-width: 767px) { .pb-64 { padding-bottom: 26px; } } .pb-48 { padding-bottom: 26px; } .py-48 { padding: clamp(24px, 2.5vw, 96px) 0; } @media (max-width: 767px) { .py-48 { padding: 20px 0; } } .pb-48 { padding-bottom: clamp(24px, 2.5vw, 96px); } @media (max-width: 767px) { .pb-48 { padding-bottom: 20px; } } .pt-48 { padding-top: clamp(24px, 2.5vw, 96px); } @media (max-width: 767px) { .pt-48 { padding-top: 20px; } } .py-40 { padding: clamp(24px, 2.083vw, 80px) 0; } @media (max-width: 575px) { .py-40 { padding: 20px 0; } } .pt-40 { padding-top: clamp(24px, 2.083vw, 80px); } @media (max-width: 575px) { .pt-40 { padding-top: 20px; } } .pt-12 { padding-top: clamp(8px, 0.625vw, 24px); } @media (max-width: 575px) { .pt-12 { padding-top: 8px; } } .pb-40 { padding-bottom: clamp(24px, 2.083vw, 80px); } @media (max-width: 575px) { .pb-40 { padding-bottom: 20px; } } .py-32 { padding: 32px 0; } @media (max-width: 1599px) { .py-32 { padding: 29px 0; } } @media (max-width: 1399px) { .py-32 { padding: 27px 0; } } @media (max-width: 1199px) { .py-32 { padding: 25px 0; } } @media (max-width: 991px) { .py-32 { padding: 22px 0; } } @media (max-width: 767px) { .py-32 { padding: 20px 0; } } .p-32 { padding: 32px; } @media (max-width: 1599px) { .p-32 { padding: 29px; } } @media (max-width: 1399px) { .p-32 { padding: 27px; } } @media (max-width: 1199px) { .p-32 { padding: 25px; } } @media (max-width: 991px) { .p-32 { padding: 22px; } } @media (max-width: 767px) { .p-32 { padding: 20px; } } .py-24 { padding: 24px 0; } @media (max-width: 1199px) { .py-24 { padding: 22px 0; } } @media (max-width: 991px) { .py-24 { padding: 22px 0; } } @media (max-width: 767px) { .py-24 { padding: 20px 0; } } .pl-24 { padding-left: 32px; } @media (max-width: 1199px) { .pl-24 { padding-left: 22px; } } @media (max-width: 991px) { .pl-24 { padding-left: 22px; } } @media (max-width: 767px) { .pl-24 { padding-left: 20px; } } .pr-24 { padding-right: 24px; } @media (max-width: 1199px) { .pr-24 { padding-right: 22px; } } @media (max-width: 991px) { .pr-24 { padding-right: 22px; } } @media (max-width: 767px) { .pr-24 { padding-right: 20px; } } .pb-24 { padding-bottom: 24px; } @media (max-width: 1199px) { .pb-24 { padding-bottom: 22px; } } @media (max-width: 991px) { .pb-24 { padding-bottom: 22px; } } @media (max-width: 767px) { .pb-24 { padding-bottom: 20px; } } .p-24 { padding: 24px; } @media (max-width: 1199px) { .p-24 { padding: 22px; } } @media (max-width: 991px) { .p-24 { padding: 22px; } } @media (max-width: 767px) { .p-24 { padding: 20px; } } .py-16 { padding: clamp(12px, 0.833vw, 32px) 0; } @media (max-width: 1199px) { .py-16 { padding: 15px 0; } } @media (max-width: 991px) { .py-16 { padding: 14px 0; } } @media (max-width: 767px) { .py-16 { padding: 10px 0; } } .p-16 { padding: 16px; } @media (max-width: 1199px) { .p-16 { padding: 15px; } } @media (max-width: 991px) { .p-16 { padding: 14px; } } @media (max-width: 767px) { .p-16 { padding: 10px; } } .p-12 { padding: 12px; } @media (max-width: 1199px) { .p-12 { padding: 11px; } } @media (max-width: 991px) { .p-12 { padding: 10px; } } @media (max-width: 767px) { .p-12 { padding: 8px; } } .gap-4 { gap: clamp(2px, 0.208vw, 8px) !important; } .gap-8 { gap: clamp(4px, 0.417vw, 16px); } .gap-10 { gap: clamp(5px, 0.521vw, 20px); } .gap-12 { gap: clamp(8px, 0.625vw, 24px); } .gap-14 { gap: clamp(10px, 0.729vw, 28px); } .gap-16 { gap: clamp(12px, 0.833vw, 32px); } .gap-18 { gap: clamp(14px, 0.938vw, 36px); } .gap-20 { gap: clamp(16px, 1.042vw, 40px); } .gap-24 { gap: clamp(18px, 1.25vw, 48px); } .gap-32 { gap: clamp(24px, 1.667vw, 64px); } .gap-38 { gap: clamp(28px, 1.979vw, 76px); } .gap-48 { gap: clamp(10px, 2.5vw, 28px); } .gap-64 { gap: clamp(48px, 3.333vw, 128px); } /*------------------------- Elements -------------------------*/ /*----------------------------------------*/ /* Button CSS START /*----------------------------------------*/ .cus-btn { position: relative; display: inline-flex; align-items: center; gap: clamp(4px, 0.417vw, 16px); padding: clamp(13px, 0.75vw, 64px) clamp(28px, 2.083vw, 88px); font-size: clamp(14px, 0.938vw, 36px); text-transform: none; background-color: transparent; border: 1px solid #C550FF; border-radius: clamp(5px, 0.521vw, 20px); font-weight: 600; color: #C550FF; cursor: pointer; overflow: hidden; transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1); } .cus-btn .circle { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: clamp(16px, 1.042vw, 40px); height: clamp(16px, 1.042vw, 40px); background-color: #E7B8FF; border-radius: 50%; opacity: 0; transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1); } .cus-btn .text { font-weight: 600; font-size: clamp(14px, 0.938vw, 36px); position: relative; z-index: 1; transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1); } .cus-btn:hover { box-shadow: 0 0 0 12px transparent; color: #FAFAFA; border: 1px solid #C550FF; } .cus-btn:hover .circle { background-color: #C550FF; box-shadow: -4px -4px 4px 0px rgba(0, 0, 0, 0.1) inset, 4px 4px 4px 0px rgba(0, 0, 0, 0.1) inset; width: 460px; height: 460px; opacity: 1; } .cus-btn-2 { position: relative; display: inline-flex; align-items: center; gap: clamp(4px, 0.417vw, 16px); padding: clamp(16px, 0.907vw, 28px) clamp(28px, 2.083vw, 78px); font-size: clamp(14px, 0.833vw, 32px); font-family: "Inter", sans-serif; font-weight: 600; text-transform: none; line-height: 120%; border: 1px solid #C550FF; background-color: #C550FF; color: #FAFAFA; cursor: pointer; overflow: hidden; transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1); border-radius: clamp(5px, 0.521vw, 20px); } .cus-btn-2 svg { position: absolute; width: clamp(20px, 1.25vw, 48px); height: clamp(20px, 1.25vw, 48px); fill: #FAFAFA; z-index: 9; transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1); } .cus-btn-2 .arr-1 { right: clamp(14px, 0.833vw, 32px); } .cus-btn-2 .arr-2 { left: -25%; } .cus-btn-2 .circle { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: clamp(16px, 1.042vw, 40px); height: clamp(16px, 1.042vw, 40px); background-color: #E7B8FF; border-radius: 50%; opacity: 0; transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1); } .cus-btn-2 .text { position: relative; z-index: 1; transform: translateX(-12px); transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1); } .cus-btn-2:hover { border: 0.2px solid #C550FF; box-shadow: -4px -4px 4px 0px rgba(0, 0, 0, 0.1) inset, 4px 4px 4px 0px rgba(0, 0, 0, 0.1) inset; color: #FAFAFA; } .cus-btn-2:hover .arr-1 { right: -25%; } .cus-btn-2:hover .arr-2 { transform: rotate(45deg); left: 16px; } .cus-btn-2:hover .arr-2 path { fill: #C550FF; } .cus-btn-2:hover .text { transform: translateX(12px); } .cus-btn-2:hover .circle { background-color: #C550FF; width: 420px; height: 420px; opacity: 1; } .cus-btn-3 { position: relative; display: inline-flex; align-items: center; gap: clamp(4px, 0.417vw, 16px); padding: clamp(13px, 0.75vw, 64px) clamp(18px, 1.25vw, 48px); text-transform: none; background-color: #C550FF; border: 1px solid #C550FF; border-radius: clamp(5px, 0.521vw, 20px); color: #FAFAFA; cursor: pointer; overflow: hidden; transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1); } .cus-btn-3 .circle { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: clamp(16px, 1.042vw, 40px); height: clamp(16px, 1.042vw, 40px); background-color: #E7B8FF; border-radius: 50%; opacity: 0; transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1); } .cus-btn-3 .text { font-weight: 600; font-size: clamp(14px, 0.833vw, 32px); font-style: normal; position: relative; z-index: 1; transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1); } .cus-btn-3:hover { box-shadow: 0 0 0 12px transparent; color: #FAFAFA; border: 1px solid #C550FF; } .cus-btn-3:hover .text { color: #C550FF; } .cus-btn-3:hover .circle { background-color: #E7B8FF; box-shadow: -4px -4px 4px 0px rgba(0, 0, 0, 0.1) inset, 4px 4px 4px 0px rgba(0, 0, 0, 0.1) inset; width: 460px; height: 460px; opacity: 1; } /*----------------------------------------*/ /* scroll to top /*----------------------------------------*/ .scrollToTopBtn { background-color: #C550FF; border-radius: clamp(4px, 0.417vw, 16px); border: none; color: #FAFAFA; cursor: pointer; font-size: clamp(18px, 1.25vw, 48px); line-height: 48px; display: grid; align-items: center; justify-content: center; width: clamp(40px, 2.5vw, 94px); height: clamp(40px, 2.5vw, 94px); position: fixed; bottom: 30px; right: 30px; z-index: 100; opacity: 0; transform: translateY(100px); transition: all 0.5s ease; } .scrollToTopBtn:hover { border: 1px solid #45474F; background: #45474F; color: #FAFAFA; transition: all 0.4s ease-in-out; transform: scale(0.99); } .showBtn { opacity: 1; transform: translateY(0); } .pagination { margin-left: auto; margin-right: auto; text-align: center; overflow: hidden; display: flex; } .pagination #border-pagination { display: flex; gap: clamp(4px, 0.417vw, 16px); margin: 0 auto; padding: 4px; text-align: center; background-color: transparent; } .pagination #border-pagination li { display: inline; } .pagination #border-pagination li a { margin: 0; width: clamp(40px, 2.5vw, 54px); height: clamp(40px, 2.5vw, 54px); background-color: transparent; border: 1px solid #E7B8FF; border-radius: clamp(4px, 0.417vw, 16px); color: #0C0C0D; display: flex; align-items: center; justify-content: center; border-bottom: none; padding: 4px; transition: all 0.4s ease-in-out; } .pagination #border-pagination li a svg path { transition: all 0.4s ease-in-out; } .pagination #border-pagination li a:hover, .pagination #border-pagination li a .active { background-color: #C550FF; border: 1px solid #C550FF; color: #FAFAFA; } .pagination #border-pagination li a:hover svg path, .pagination #border-pagination li a .active svg path { fill: #FAFAFA; } .pagination #border-pagination li span { color: #FAFAFA; transition: all 0.4s ease-in-out; } .pagination { margin-left: auto; margin-right: auto; text-align: center; overflow: hidden; display: flex; } .pagination #border-pagination { display: flex; gap: 8px; margin: 0 auto; padding: 0; text-align: center; } .pagination #border-pagination .l-arrow { margin-right: 8px; } .pagination #border-pagination .r-arrow { margin-left: 8px; } .pagination #border-pagination li { display: inline; } .pagination #border-pagination li span { color: #C550FF; transition: all 0.4s ease-in-out; } .pagination #border-pagination li a { display: flex; align-items: center; justify-content: center; text-decoration: none; width: clamp(40px, 2.5vw, 140px); height: clamp(40px, 2.5vw, 140px); background-color: transparent; border: 1px solid #E7B8FF; border-radius: clamp(4px, 0.417vw, 16px); color: #0C0C0D; float: left; transition: all 0.4s ease-in-out; font-size: clamp(14px, 0.833vw, 32px); font-weight: 400; line-height: 150%; } .pagination #border-pagination li a svg { width: clamp(16px, 1.042vw, 96px); height: clamp(16px, 1.042vw, 96px); } .pagination #border-pagination li a svg path { fill: #0C0C0D; transition: all 0.4s ease-in-out; } .pagination #border-pagination li a:hover, .pagination #border-pagination li a.active { background-color: #C550FF; border: 1px solid #C550FF; color: #FAFAFA; } .pagination #border-pagination li a:hover svg path, .pagination #border-pagination li a.active svg path { fill: #FAFAFA; } /*------------------------- Form Styling -------------------------*/ textarea.form-control { min-height: 118px; height: 142px; } @media (max-width: 578px) { textarea.form-control { min-height: 80px; max-height: 80px; } } .input-block .form-control { padding: clamp(10px, 0.62vw, 28px) clamp(12px, 0.833vw, 72px); padding-left: clamp(22px, 2.292vw, 72px); border-radius: clamp(4px, 0.417vw, 16px); border: 1px solid #92949F; background: transparent; font-family: "Plus Jakarta Sans", sans-serif; font-size: clamp(15px, 0.833vw, 32px); font-weight: 400; line-height: 140%; position: relative; color: #92949F; box-shadow: none; outline: 0; } .input-block .form-control:-webkit-autofill, .input-block .form-control:-webkit-autofill:focus { transition: background-color 600000s 0s, color 600000s 0s; } .input-block .form-control:focus { box-shadow: none !important; outline: 0 !important; color: #92949F !important; background: transparent !important; } .input-block .form-control::placeholder { color: #92949F; opacity: 1; } .input-block .form-control-2 { padding-left: clamp(12px, 0.833vw, 32px); } .input-block svg { width: clamp(19px, 1.042vw, 48px); height: clamp(19px, 1.042vw, 48px); } .input-block { position: relative; } .input-block svg { position: absolute; top: clamp(12px, 0.8vw, 48px); left: clamp(12px, 0.625vw, 32px); width: clamp(19px, 1.042vw, 48px); height: clamp(19px, 1.042vw, 48px); } input[type=file] { display: none; } label.error { color: #ff0000; } .cus-checkBox input { display: none; color: #141516; } .cus-checkBox label { position: relative; display: flex; align-items: center; gap: 8px; cursor: pointer; color: #92949F; font-size: clamp(15px, 0.833vw, 32px); font-weight: 400; } .cus-checkBox label::before { content: "\f0c8"; font-family: "Font Awesome 6 Pro"; color: #92949F; font-size: clamp(16px, 1.042vw, 40px); font-weight: 400; } .cus-checkBox input[type=checkbox]:checked + label::before { content: "\f14a"; color: #C550FF; font-weight: 600; } #preloader { position: fixed; width: 100%; height: 100vh; z-index: 9999999; display: grid; align-items: center; justify-content: center; background: #FAF0FF; /* Dark theme */ /* Animations */ } #preloader :root { --hue: 223; --sat: 10%; --bg: hsl(var(--hue),var(--sat),90%); --fg: hsl(var(--hue),var(--sat),10%); --hue-success: 126; --success1: #C550FF; --success2: #C550FF; --periwinkle: #C550FF; --light-blue: #C550FF; --orange: #C550FF; --magenta: #C550FF; --light-green: #C550FF; --light-teal: #C550FF; --purple: #C550FF; --trans-dur: 0.3s; font-size: clamp(1rem, 0.95rem + 0.25vw, 1.25rem); } #preloader body { background-color: var(--bg); color: var(--fg); display: flex; font: 1em/1.5 sans-serif; height: 100vh; transition: background-color var(--trans-dur), color var(--trans-dur); } #preloader .spinner { color: #C550FF; overflow: visible; margin: auto; width: 8em; height: auto; transition: color all 0.4s ease-in-out; } #preloader .spinner circle, #preloader .spinner g, #preloader .spinner path { animation-duration: 3s; animation-timing-function: linear; animation-fill-mode: forwards; } #preloader .spinner__check, #preloader .spinner__pop-start, #preloader .spinner__worm { transform-origin: 24px 24px; } #preloader .spinner__check { animation-name: check; } #preloader .spinner__pop-dot { animation-name: pop-dot; } #preloader .spinner__pop-dot-group { animation-name: pop-dot-group1; } #preloader .spinner__pop-dot-group + #preloader .spinner__pop-dot-group { animation-name: pop-dot-group2; } #preloader .spinner__pop-end { animation-name: pop-end; } #preloader .spinner__pop-start { animation-name: pop-start; } #preloader .spinner__worm { animation-name: worm; } @media (prefers-color-scheme: dark) { #preloader :root { --bg: hsl(var(--hue),var(--sat),10%); --fg: hsl(var(--hue),var(--sat),90%); } #preloader .spinner { color: var(--success1); } } @keyframes check { from, 64% { stroke-dashoffset: -36.7; transform: scale(1); } 75%, 77% { animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); stroke-dashoffset: 13.7; transform: scale(1); } 79% { animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); stroke-dashoffset: 13.7; transform: scale(0.4); } 87% { animation-timing-function: cubic-bezier(0.32, 0, 0.67, 0); stroke-dashoffset: 13.7; transform: scale(1.4); } 93%, to { stroke-dashoffset: 13.7; transform: scale(1); } } @keyframes pop-dot { from, 80% { animation-timing-function: cubic-bezier(0.33, 1, 0.68, 1); transform: translate(0, 6px); } 90%, to { transform: translate(0, 0); } } @keyframes pop-dot-group1 { from, 82.5%, 90%, to { opacity: 0; } 85%, 87.5% { opacity: 1; } } @keyframes pop-dot-group2 { from, 82.5%, to { opacity: 0; } 85%, 90% { opacity: 1; } } @keyframes pop-end { from { animation-timing-function: steps(1, end); opacity: 0; r: 18px; stroke-width: 4px; } 82.5% { animation-timing-function: linear; opacity: 1; r: 18px; stroke-width: 4px; } 84%, to { opacity: 0; r: 19px; stroke-width: 3px; } } @keyframes pop-start { from { animation-timing-function: steps(1, end); opacity: 0; transform: scale(0.35); } 76% { animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); opacity: 1; transform: scale(0.35); } 82.5% { animation-timing-function: steps(1, start); opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(1); } } @keyframes worm { from { stroke-dashoffset: -51.84; transform: rotate(-119deg); } 60% { stroke-dashoffset: -51.84; transform: rotate(961deg); } 64% { animation-timing-function: cubic-bezier(0.61, 1, 0.88, 1); stroke-dashoffset: -51.84; transform: rotate(1033deg); } 72.5%, to { stroke-dashoffset: -138.23; transform: rotate(1033deg); } } .drop-container { background-color: transparent; display: flex; align-items: center; justify-content: space-between; width: 100%; } .wrapper-dropdown { background: transparent; padding: clamp(10px, 0.729vw, 28px) clamp(12px, 0.833vw, 72px); font-weight: 400; line-height: 140%; color: #92949F; display: inline-flex; align-items: center; justify-content: space-between; gap: clamp(4px, 0.417vw, 16px); position: relative; width: fit-content; width: 100%; text-align: left; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; border-radius: clamp(4px, 0.417vw, 16px); border: 1px solid #92949F; } .wrapper-dropdown .selected-display { font-weight: 400; line-height: 150%; } .wrapper-dropdown svg { width: clamp(19px, 1.042vw, 48px); height: clamp(19px, 1.042vw, 48px); } .wrapper-dropdown::before { position: absolute; top: 50%; right: 16px; margin-top: -2px; border-width: 6px 6px 0 6px; border-style: solid; border-color: #fff transparent; } .wrapper-dropdown .topbar-dropdown { width: 100%; overflow: hidden; box-shadow: 0px 3px 6px 0px #92949F; background: #FAFAFA; color: #92949F !important; transition: 0.3s; position: absolute; top: 100%; right: 0; left: 6px; margin: 0; padding: 0; list-style: none; z-index: 99; border-radius: 16px; -webkit-transform-origin: top; -moz-transform-origin: top; -ms-transform-origin: top; transform-origin: top; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; opacity: 0; visibility: hidden; } .wrapper-dropdown .topbar-dropdown li { color: #1E1F20 !important; font-weight: 500; padding: 0 15px; line-height: 45px; border-radius: 0; overflow: hidden; transition: all 0.4s ease-in-out; } .wrapper-dropdown .topbar-dropdown li:last-child { border-bottom: none; } .wrapper-dropdown .topbar-dropdown li:hover { transition: all 0.4s ease-in-out; background-color: #C550FF; color: #FAFAFA !important; } .wrapper-dropdown.active .topbar-dropdown { color: #0C0C0D; opacity: 1; visibility: visible; border-radius: 5px; } .wrapper-dropdown .scrollable-menu { height: auto; max-height: 200px; overflow-x: hidden; } .wrapper-dropdown .arrow { float: right; rotate: 180deg; } .wrapper-dropdown svg { transition: all 0.3s; } .wrapper-dropdown .rotated { transform: rotate(-180deg); } /*------------------------- layouts -------------------------*/ .header { width: 100%; color: #FAFAFA; background-color: transparent; z-index: 2; border-bottom: 1px solid #E7B8FF; } @media (max-width: 580px) { .header { padding: clamp(12px, 0.833vw, 32px) 0; /*16px */ } } .header .navigation { width: 100%; position: relative; display: flex; align-items: center; justify-content: space-between; padding: clamp(16px, 1.042vw, 40px) 0; } .header .navigation .header-logo { width: clamp(160px, 10.737vw, 432px); height: clamp(40px, 2.5vw, 94px); } @media (max-width: 1024px) { .header .navigation .header-logo { width: 80%; height: auto; } } .header .navigation .menu-button-right { text-transform: capitalize; padding-top: 5px; display: flex; align-items: center; gap: clamp(24px, 3.333vw, 72px); } .header .navigation .menu-button-right .main-menu__nav { margin-left: auto; margin-right: auto; } .header .navigation .menu-button-right .main-menu__nav .main-menu__list, .header .navigation .menu-button-right .main-menu__nav .main-menu__list ul, .header .navigation .menu-button-right .main-menu__nav .stricky-header .main-menu__list, .header .navigation .menu-button-right .main-menu__nav .stricky-header .main-menu__list ul { margin: 0; padding: 0; list-style-type: none; align-items: center; display: none; text-transform: capitalize; } @media screen and (min-width: 1200px) { .header .navigation .menu-button-right .main-menu__nav .main-menu__list, .header .navigation .menu-button-right .main-menu__nav .main-menu__list ul, .header .navigation .menu-button-right .main-menu__nav .stricky-header .main-menu__list, .header .navigation .menu-button-right .main-menu__nav .stricky-header .main-menu__list ul { display: flex; gap: clamp(20px, 1.667vw, 40px); } } .header .navigation .menu-button-right .main-menu__nav .main-menu__list > li, .header .navigation .menu-button-right .main-menu__nav .stricky-header .main-menu__list > li { padding-top: 0.417vw; padding-bottom: 0.417vw; position: relative; } .header .navigation .menu-button-right .main-menu__nav .main-menu__list > li > a, .header .navigation .menu-button-right .main-menu__nav .stricky-header .main-menu__list > li > a { font-size: clamp(14px, 0.938vw, 36px); font-weight: 400; line-height: 150%; font-family: "Inter", sans-serif; text-transform: capitalize; color: #45474F; display: flex; align-items: center; gap: clamp(18px, 1.25vw, 48px) !important; position: relative; transition: all all 0.4s ease-in-out; padding-bottom: 2px; } @media (max-width: 1199px) { .header .navigation .menu-button-right .main-menu__nav .main-menu__list > li > a, .header .navigation .menu-button-right .main-menu__nav .stricky-header .main-menu__list > li > a { font-size: clamp(17px, 1.251vw, 18px); } } @media (max-width: 575px) { .header .navigation .menu-button-right .main-menu__nav .main-menu__list > li > a, .header .navigation .menu-button-right .main-menu__nav .stricky-header .main-menu__list > li > a { font-size: clamp(16px, 2.261vw, 14px); } } .header .navigation .menu-button-right .main-menu__nav .main-menu__list > li > a::after, .header .navigation .menu-button-right .main-menu__nav .stricky-header .main-menu__list > li > a::after { bottom: 0; left: 0; position: absolute; content: ""; width: 0; height: 2px; background-color: #C550FF; transition: all 0.4s ease-in-out; } .header .navigation .menu-button-right .main-menu__nav .main-menu__list > li > a:hover, .header .navigation .menu-button-right .main-menu__nav .main-menu__list > li > a.active, .header .navigation .menu-button-right .main-menu__nav .stricky-header .main-menu__list > li > a:hover, .header .navigation .menu-button-right .main-menu__nav .stricky-header .main-menu__list > li > a.active { transition: all 0.4s ease-in-out; color: #C550FF; } .header .navigation .menu-button-right .main-menu__nav .main-menu__list > li > a:hover::after, .header .navigation .menu-button-right .main-menu__nav .main-menu__list > li > a.active::after, .header .navigation .menu-button-right .main-menu__nav .stricky-header .main-menu__list > li > a:hover::after, .header .navigation .menu-button-right .main-menu__nav .stricky-header .main-menu__list > li > a.active::after { width: 100%; transition: all 0.4s ease-in-out; } .header .navigation .menu-button-right .main-menu__nav .main-menu__list > li .header-arrow, .header .navigation .menu-button-right .main-menu__nav .stricky-header .main-menu__list > li .header-arrow { font-weight: 300; margin-left: -16px; } .header .navigation .menu-button-right .main-menu__nav .main-menu__list > li:first-child a::before, .header .navigation .menu-button-right .main-menu__nav .stricky-header .main-menu__list > li:first-child a::before { display: none; } .header .navigation .menu-button-right .main-menu__nav .main-menu__list > li.current, .header .navigation .menu-button-right .main-menu__nav .main-menu__list > li:hover, .header .navigation .menu-button-right .main-menu__nav .stricky-header .main-menu__list > li.current, .header .navigation .menu-button-right .main-menu__nav .stricky-header .main-menu__list > li:hover { color: #C550FF; } .header .navigation .menu-button-right .main-menu__nav .main-menu__list li ul, .header .navigation .menu-button-right .main-menu__nav .stricky-header .main-menu__list li ul { overflow: hidden; border-radius: 10px; text-transform: uppercase; position: absolute; top: 100%; left: 0; min-width: clamp(200px, 10.938vw, 616px); flex-direction: column; justify-content: flex-start; align-items: flex-start; opacity: 0; visibility: hidden; transform-origin: top center; transform: scaleY(0) translateZ(100px); backface-visibility: hidden; transition: opacity all 0.4s ease-in-out, visibility all 0.4s ease-in-out, transform 700ms ease; z-index: 99; background: #FAFAFA; padding: 0; box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px; } .header .navigation .menu-button-right .main-menu__nav .main-menu__list li ul li, .header .navigation .menu-button-right .main-menu__nav .stricky-header .main-menu__list li ul li { flex: 1 1 100%; width: 100%; position: relative; } .header .navigation .menu-button-right .main-menu__nav .main-menu__list li ul li > a, .header .navigation .menu-button-right .main-menu__nav .stricky-header .main-menu__list li ul li > a { font-size: clamp(14px, 0.833vw, 40px); line-height: 26px; color: #45474F; font-weight: 600; font-family: "Inter", sans-serif; display: flex; padding: clamp(4px, 0.417vw, 46px) clamp(16px, 1.042vw, 80px); transition: 400ms; border-radius: 6px; text-transform: capitalize; } .header .navigation .menu-button-right .main-menu__nav .main-menu__list li ul li.current > a, .header .navigation .menu-button-right .main-menu__nav .main-menu__list li ul li:hover > a, .header .navigation .menu-button-right .main-menu__nav .stricky-header .main-menu__list li ul li.current > a, .header .navigation .menu-button-right .main-menu__nav .stricky-header .main-menu__list li ul li:hover > a { background-color: #C550FF; color: #FAFAFA; } .header .navigation .menu-button-right .main-menu__nav .main-menu__list li ul li > ul, .header .navigation .menu-button-right .main-menu__nav .stricky-header .main-menu__list li ul li > ul { top: 0; left: calc(100% + 20px); } .header .navigation .menu-button-right .main-menu__nav .main-menu__list li ul li > ul.right-align, .header .navigation .menu-button-right .main-menu__nav .stricky-header .main-menu__list li ul li > ul.right-align { top: 0; left: auto; right: 100%; } .header .navigation .menu-button-right .main-menu__nav .main-menu__list li ul li > ul ul, .header .navigation .menu-button-right .main-menu__nav .stricky-header .main-menu__list li ul li > ul ul { display: flex; } .header .navigation .menu-button-right .main-menu__nav .main-menu__list li:hover > ul, .header .navigation .menu-button-right .main-menu__nav .stricky-header .main-menu__list li:hover > ul { opacity: 1; visibility: visible; gap: 0; transform: scaleY(1) translateZ(0px); transition: all 0.4s ease-in-out; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .header .navigation .menu-button-right .main-menu__nav .main-menu__list li:nth-last-child(1) ul li > ul, .header .navigation .menu-button-right .main-menu__nav .main-menu__list li:nth-last-child(2) ul li > ul, .header .navigation .menu-button-right .main-menu__nav .stricky-header .main-menu__list li:nth-last-child(1) ul li > ul, .header .navigation .menu-button-right .main-menu__nav .stricky-header .main-menu__list li:nth-last-child(2) ul li > ul { left: auto; right: calc(100% + 20px); } } .header .navigation .main-menu__right { display: flex; align-items: center; gap: clamp(18px, 1.25vw, 48px) !important; } .header .navigation .main-menu__right .main-menu-link-btn { position: relative; } .header .navigation .main-menu__right .main-menu-link-btn svg .icon { transition: all 0.4s ease-in-out; } .header .navigation .main-menu__right .main-menu-link-btn:hover svg .icon { fill: #C550FF; transition: all 0.4s ease-in-out; } .header .cus-btn-2 { position: relative; display: inline-flex; align-items: center; gap: clamp(4px, 0.417vw, 16px); padding: clamp(12px, 0.703vw, 28px) clamp(28px, 2.083vw, 78px); font-size: clamp(12px, 0.833vw, 32px); font-family: "Inter", sans-serif; font-weight: 600; text-transform: none; line-height: 120%; border: 1px solid #C550FF; background-color: #C550FF; color: #FAFAFA; cursor: pointer; overflow: hidden; transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1); border-radius: clamp(5px, 0.521vw, 20px); } .header .cus-btn-2 svg { position: absolute; width: clamp(18px, 1.25vw, 48px); height: clamp(18px, 1.25vw, 48px); fill: #FAFAFA; z-index: 9; transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1); } .header .cus-btn-2 .arr-1 { right: clamp(14px, 0.833vw, 32px); } .header .cus-btn-2 .arr-2 { left: -25%; } .header .cus-btn-2 .circle { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: clamp(16px, 1.042vw, 40px); height: clamp(16px, 1.042vw, 40px); background-color: #E7B8FF; border-radius: 50%; opacity: 0; transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1); } .header .cus-btn-2 .text { position: relative; z-index: 1; transform: translateX(-12px); transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1); } .header .cus-btn-2:hover { border: 0.2px solid #C550FF; box-shadow: -4px -4px 4px 0px rgba(0, 0, 0, 0.1) inset, 4px 4px 4px 0px rgba(0, 0, 0, 0.1) inset; color: #FAFAFA; } .header .cus-btn-2:hover .arr-1 { right: -25%; } .header .cus-btn-2:hover .arr-2 { transform: rotate(45deg); left: 16px; } .header .cus-btn-2:hover .arr-2 path { fill: #C550FF; } .header .cus-btn-2:hover .text { transform: translateX(12px); } .header .cus-btn-2:hover .circle { background-color: #C550FF; width: 420px; height: 420px; opacity: 1; } .header.stricky-fixed { transform: translateY(0); } .header .sticky-header__content { width: 100%; padding: 0 0; background: #FAFAFA; box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px; } .stricky-header { position: fixed; z-index: 991; top: 0; left: 0; width: 100%; transform: translateY(-120%); transition: transform 500ms ease; } @media (max-width: 1199px) { .stricky-header { display: none; } } .stricky-header.main-menu { padding: 0 !important; } .stricky-header.stricky-fixed { transform: translateY(0); } .stricky-header .sticky-header__content { width: 100%; padding: 0; background: #FAFAFA; box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px; } .stricky-header .sticky-header__content .navigation { width: 100%; position: relative; display: flex; align-items: center; justify-content: space-between; padding: clamp(16px, 1.042vw, 40px) 0; } .stricky-header .sticky-header__content .navigation .header-logo { width: clamp(160px, 10.737vw, 432px); height: clamp(40px, 2.5vw, 94px); } @media (max-width: 1024px) { .stricky-header .sticky-header__content .navigation .header-logo { width: 80%; height: auto; } } .stricky-header .sticky-header__content .navigation .menu-button-right { text-transform: capitalize; padding-top: 5px; display: flex; align-items: center; gap: clamp(24px, 3.333vw, 72px); } .stricky-header .sticky-header__content .navigation .menu-button-right .main-menu__nav { margin-left: auto; margin-right: auto; } .stricky-header .sticky-header__content .navigation .menu-button-right .main-menu__nav .main-menu__list, .stricky-header .sticky-header__content .navigation .menu-button-right .main-menu__nav .main-menu__list ul, .stricky-header .sticky-header__content .navigation .menu-button-right .main-menu__nav .stricky-header .main-menu__list, .stricky-header .sticky-header__content .navigation .menu-button-right .main-menu__nav .stricky-header .main-menu__list ul { margin: 0; padding: 0; list-style-type: none; align-items: center; display: none; text-transform: capitalize; } @media screen and (min-width: 1200px) { .stricky-header .sticky-header__content .navigation .menu-button-right .main-menu__nav .main-menu__list, .stricky-header .sticky-header__content .navigation .menu-button-right .main-menu__nav .main-menu__list ul, .stricky-header .sticky-header__content .navigation .menu-button-right .main-menu__nav .stricky-header .main-menu__list, .stricky-header .sticky-header__content .navigation .menu-button-right .main-menu__nav .stricky-header .main-menu__list ul { display: flex; gap: clamp(20px, 1.667vw, 40px); } } .stricky-header .sticky-header__content .navigation .menu-button-right .main-menu__nav .main-menu__list > li, .stricky-header .sticky-header__content .navigation .menu-button-right .main-menu__nav .stricky-header .main-menu__list > li { padding-top: 0.417vw; padding-bottom: 0.417vw; position: relative; } .stricky-header .sticky-header__content .navigation .menu-button-right .main-menu__nav .main-menu__list > li > a, .stricky-header .sticky-header__content .navigation .menu-button-right .main-menu__nav .stricky-header .main-menu__list > li > a { font-size: clamp(14px, 0.938vw, 36px); font-weight: 400; line-height: 150%; font-family: "Inter", sans-serif; text-transform: capitalize; color: #45474F; display: flex; align-items: center; gap: clamp(18px, 1.25vw, 48px) !important; position: relative; transition: all all 0.4s ease-in-out; padding-bottom: 2px; } @media (max-width: 1199px) { .stricky-header .sticky-header__content .navigation .menu-button-right .main-menu__nav .main-menu__list > li > a, .stricky-header .sticky-header__content .navigation .menu-button-right .main-menu__nav .stricky-header .main-menu__list > li > a { font-size: clamp(17px, 1.251vw, 18px); } } @media (max-width: 575px) { .stricky-header .sticky-header__content .navigation .menu-button-right .main-menu__nav .main-menu__list > li > a, .stricky-header .sticky-header__content .navigation .menu-button-right .main-menu__nav .stricky-header .main-menu__list > li > a { font-size: clamp(16px, 2.261vw, 14px); } } .stricky-header .sticky-header__content .navigation .menu-button-right .main-menu__nav .main-menu__list > li > a::after, .stricky-header .sticky-header__content .navigation .menu-button-right .main-menu__nav .stricky-header .main-menu__list > li > a::after { bottom: 0; left: 0; position: absolute; content: ""; width: 0; height: 2px; background-color: #C550FF; transition: all 0.4s ease-in-out; } .stricky-header .sticky-header__content .navigation .menu-button-right .main-menu__nav .main-menu__list > li > a:hover, .stricky-header .sticky-header__content .navigation .menu-button-right .main-menu__nav .main-menu__list > li > a.active, .stricky-header .sticky-header__content .navigation .menu-button-right .main-menu__nav .stricky-header .main-menu__list > li > a:hover, .stricky-header .sticky-header__content .navigation .menu-button-right .main-menu__nav .stricky-header .main-menu__list > li > a.active { transition: all 0.4s ease-in-out; color: #C550FF; } .stricky-header .sticky-header__content .navigation .menu-button-right .main-menu__nav .main-menu__list > li > a:hover::after, .stricky-header .sticky-header__content .navigation .menu-button-right .main-menu__nav .main-menu__list > li > a.active::after, .stricky-header .sticky-header__content .navigation .menu-button-right .main-menu__nav .stricky-header .main-menu__list > li > a:hover::after, .stricky-header .sticky-header__content .navigation .menu-button-right .main-menu__nav .stricky-header .main-menu__list > li > a.active::after { width: 100%; transition: all 0.4s ease-in-out; } .stricky-header .sticky-header__content .navigation .menu-button-right .main-menu__nav .main-menu__list > li .header-arrow, .stricky-header .sticky-header__content .navigation .menu-button-right .main-menu__nav .stricky-header .main-menu__list > li .header-arrow { font-weight: 300; margin-left: -16px; } .stricky-header .sticky-header__content .navigation .menu-button-right .main-menu__nav .main-menu__list > li:first-child a::before, .stricky-header .sticky-header__content .navigation .menu-button-right .main-menu__nav .stricky-header .main-menu__list > li:first-child a::before { display: none; } .stricky-header .sticky-header__content .navigation .menu-button-right .main-menu__nav .main-menu__list > li.current, .stricky-header .sticky-header__content .navigation .menu-button-right .main-menu__nav .main-menu__list > li:hover, .stricky-header .sticky-header__content .navigation .menu-button-right .main-menu__nav .stricky-header .main-menu__list > li.current, .stricky-header .sticky-header__content .navigation .menu-button-right .main-menu__nav .stricky-header .main-menu__list > li:hover { color: #C550FF; } .stricky-header .sticky-header__content .navigation .menu-button-right .main-menu__nav .main-menu__list li ul, .stricky-header .sticky-header__content .navigation .menu-button-right .main-menu__nav .stricky-header .main-menu__list li ul { overflow: hidden; border-radius: 10px; text-transform: uppercase; position: absolute; top: 100%; left: 0; min-width: clamp(200px, 10.938vw, 616px); flex-direction: column; justify-content: flex-start; align-items: flex-start; opacity: 0; visibility: hidden; transform-origin: top center; transform: scaleY(0) translateZ(100px); backface-visibility: hidden; transition: opacity all 0.4s ease-in-out, visibility all 0.4s ease-in-out, transform 700ms ease; z-index: 99; background: #FAFAFA; padding: 0; box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px; } .stricky-header .sticky-header__content .navigation .menu-button-right .main-menu__nav .main-menu__list li ul li, .stricky-header .sticky-header__content .navigation .menu-button-right .main-menu__nav .stricky-header .main-menu__list li ul li { flex: 1 1 100%; width: 100%; position: relative; } .stricky-header .sticky-header__content .navigation .menu-button-right .main-menu__nav .main-menu__list li ul li > a, .stricky-header .sticky-header__content .navigation .menu-button-right .main-menu__nav .stricky-header .main-menu__list li ul li > a { font-size: clamp(14px, 0.833vw, 40px); line-height: 26px; color: #45474F; font-weight: 600; font-family: "Inter", sans-serif; display: flex; padding: clamp(4px, 0.417vw, 46px) clamp(16px, 1.042vw, 80px); transition: 400ms; border-radius: 6px; text-transform: capitalize; } .stricky-header .sticky-header__content .navigation .menu-button-right .main-menu__nav .main-menu__list li ul li.current > a, .stricky-header .sticky-header__content .navigation .menu-button-right .main-menu__nav .main-menu__list li ul li:hover > a, .stricky-header .sticky-header__content .navigation .menu-button-right .main-menu__nav .stricky-header .main-menu__list li ul li.current > a, .stricky-header .sticky-header__content .navigation .menu-button-right .main-menu__nav .stricky-header .main-menu__list li ul li:hover > a { background-color: #C550FF; color: #FAFAFA; } .stricky-header .sticky-header__content .navigation .menu-button-right .main-menu__nav .main-menu__list li ul li > ul, .stricky-header .sticky-header__content .navigation .menu-button-right .main-menu__nav .stricky-header .main-menu__list li ul li > ul { top: 0; left: calc(100% + 20px); } .stricky-header .sticky-header__content .navigation .menu-button-right .main-menu__nav .main-menu__list li ul li > ul.right-align, .stricky-header .sticky-header__content .navigation .menu-button-right .main-menu__nav .stricky-header .main-menu__list li ul li > ul.right-align { top: 0; left: auto; right: 100%; } .stricky-header .sticky-header__content .navigation .menu-button-right .main-menu__nav .main-menu__list li ul li > ul ul, .stricky-header .sticky-header__content .navigation .menu-button-right .main-menu__nav .stricky-header .main-menu__list li ul li > ul ul { display: flex; } .stricky-header .sticky-header__content .navigation .menu-button-right .main-menu__nav .main-menu__list li:hover > ul, .stricky-header .sticky-header__content .navigation .menu-button-right .main-menu__nav .stricky-header .main-menu__list li:hover > ul { opacity: 1; visibility: visible; gap: 0; transform: scaleY(1) translateZ(0px); transition: all 0.4s ease-in-out; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .stricky-header .sticky-header__content .navigation .menu-button-right .main-menu__nav .main-menu__list li:nth-last-child(1) ul li > ul, .stricky-header .sticky-header__content .navigation .menu-button-right .main-menu__nav .main-menu__list li:nth-last-child(2) ul li > ul, .stricky-header .sticky-header__content .navigation .menu-button-right .main-menu__nav .stricky-header .main-menu__list li:nth-last-child(1) ul li > ul, .stricky-header .sticky-header__content .navigation .menu-button-right .main-menu__nav .stricky-header .main-menu__list li:nth-last-child(2) ul li > ul { left: auto; right: calc(100% + 20px); } } .stricky-header .sticky-header__content .navigation .main-menu__right { display: flex; align-items: center; gap: clamp(18px, 1.25vw, 48px) !important; } .stricky-header .sticky-header__content .navigation .main-menu__right .main-menu-link-btn { position: relative; } .stricky-header .sticky-header__content .navigation .main-menu__right .main-menu-link-btn svg .icon { transition: all 0.4s ease-in-out; } .stricky-header .sticky-header__content .navigation .main-menu__right .main-menu-link-btn:hover svg .icon { fill: #C550FF; transition: all 0.4s ease-in-out; } .stricky-header .sticky-header__content .cus-btn-2 { position: relative; display: inline-flex; align-items: center; gap: clamp(4px, 0.417vw, 16px); padding: clamp(12px, 0.703vw, 28px) clamp(28px, 2.083vw, 78px); font-size: clamp(12px, 0.833vw, 32px); font-family: "Inter", sans-serif; font-weight: 600; text-transform: none; line-height: 120%; border: 1px solid #C550FF; background-color: #C550FF; color: #FAFAFA; cursor: pointer; overflow: hidden; transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1); border-radius: clamp(5px, 0.521vw, 20px); } .stricky-header .sticky-header__content .cus-btn-2 svg { position: absolute; width: clamp(18px, 1.25vw, 48px); height: clamp(18px, 1.25vw, 48px); fill: #FAFAFA; z-index: 9; transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1); } .stricky-header .sticky-header__content .cus-btn-2 .arr-1 { right: clamp(14px, 0.833vw, 32px); } .stricky-header .sticky-header__content .cus-btn-2 .arr-2 { left: -25%; } .stricky-header .sticky-header__content .cus-btn-2 .circle { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: clamp(16px, 1.042vw, 40px); height: clamp(16px, 1.042vw, 40px); background-color: #E7B8FF; border-radius: 50%; opacity: 0; transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1); } .stricky-header .sticky-header__content .cus-btn-2 .text { position: relative; z-index: 1; transform: translateX(-12px); transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1); } .stricky-header .sticky-header__content .cus-btn-2:hover { border: 0.2px solid #C550FF; box-shadow: -4px -4px 4px 0px rgba(0, 0, 0, 0.1) inset, 4px 4px 4px 0px rgba(0, 0, 0, 0.1) inset; color: #FAFAFA; } .stricky-header .sticky-header__content .cus-btn-2:hover .arr-1 { right: -25%; } .stricky-header .sticky-header__content .cus-btn-2:hover .arr-2 { transform: rotate(45deg); left: 16px; } .stricky-header .sticky-header__content .cus-btn-2:hover .arr-2 path { fill: #C550FF; } .stricky-header .sticky-header__content .cus-btn-2:hover .text { transform: translateX(12px); } .stricky-header .sticky-header__content .cus-btn-2:hover .circle { background-color: #C550FF; width: 420px; height: 420px; opacity: 1; } .mobile-nav__toggler { font-size: 24px; font-weight: 200; color: #45474F; cursor: pointer; transition: 500ms; display: none; } @media (max-width: 1099px) { .mobile-nav__toggler { display: flex; } } .mobile-nav__toggler:hover { color: #C550FF; } /*-------------------------------------------------------------- # Mobile Nav --------------------------------------------------------------*/ .mobile-nav__wrapper { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 999; transform: translateX(-100%); transform-origin: left center; transition: transform 500ms ease 500ms, visibility 500ms ease 500ms; visibility: hidden; position: fixed; } .mobile-nav__wrapper .container { padding-left: 0; padding-right: 0; } .mobile-nav__wrapper.expanded { opacity: 1; transform: translateX(0%); visibility: visible; transition: transform 500ms ease 0ms, visibility 500ms ease 0ms; } .mobile-nav__wrapper.expanded .mobile-nav__content { border-radius: clamp(18px, 1.25vw, 48px); margin-top: 11px; margin-left: 11px; margin-bottom: 11px; opacity: 1; visibility: visible; transform: translateX(0); transition: opacity 500ms ease 500ms, visibility 500ms ease 500ms, transform 500ms ease 500ms; } .mobile-nav__wrapper .mobile-nav__overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: #1E1F20; opacity: 0.3; } .mobile-nav__wrapper .mobile-nav__content { width: 300px; background: #FAFAFA; z-index: 10; position: relative; height: 98%; overflow-y: auto; padding-top: 30px; padding-bottom: 30px; padding-left: 15px; padding-right: 15px; opacity: 0; visibility: hidden; transform: translateX(-100%); transition: opacity 500ms ease 0ms, visibility 500ms ease 0ms, transform 500ms ease 0ms; } @media (max-width: 490px) { .mobile-nav__wrapper .mobile-nav__content { width: clamp(250px, 55.102vw, 450px); } } .mobile-nav__wrapper .mobile-nav__content .main-menu__nav { display: block; padding: 0; } .mobile-nav__wrapper .mobile-nav__content .logo-box { margin-top: 14px; margin-bottom: 40px; display: flex; } .mobile-nav__wrapper .mobile-nav__content .logo-box img { width: clamp(160px, 15.625vw, 320px); } .mobile-nav__wrapper .mobile-nav__content .main-menu__list, .mobile-nav__wrapper .mobile-nav__content .main-menu__list ul { margin: 0; padding: 0; list-style-type: none; } .mobile-nav__wrapper .mobile-nav__content .main-menu__list ul { display: none; border-top: 1px solid RGBA(255, 255, 255, 0.1); } .mobile-nav__wrapper .mobile-nav__content .main-menu__list ul li > a { padding-left: 1em; } .mobile-nav__wrapper .mobile-nav__content .main-menu__list ul li:not(:last-child) { border-bottom: 1px solid RGBA(255, 255, 255, 0.1); } .mobile-nav__wrapper .mobile-nav__content .main-menu__list li:not(:last-child) { border-bottom: 1px solid RGBA(255, 255, 255, 0.1); } .mobile-nav__wrapper .mobile-nav__content .main-menu__list li a { display: flex; justify-content: space-between; line-height: 30px; color: #0C0C0D; font-size: 18px; font-family: "Inter", sans-serif; text-transform: capitalize; font-weight: 600; height: 46px; letter-spacing: 0.8px; align-items: center; transition: 500ms; } .mobile-nav__wrapper .mobile-nav__content .main-menu__list li a.expanded { color: #C550FF; } .mobile-nav__wrapper .mobile-nav__content .main-menu__list li a button { width: 30px; height: 30px; background-color: #C550FF; border: none; outline: none; color: #FAFAFA; display: flex; align-items: center; justify-content: center; text-align: center; transform: rotate(-90deg); border-radius: 4px; transition: transform 500ms ease; } .mobile-nav__wrapper .mobile-nav__content .main-menu__list li a button.expanded { transform: rotate(0deg); background-color: #1E1F20; color: #FAF0FF; } .mobile-nav__wrapper .mobile-nav__close { position: absolute; top: 20px; right: 15px; font-size: 18px; color: #C550FF; cursor: pointer; } .mobile-nav__social { display: flex; align-items: center; } .mobile-nav__social a { font-size: 16px; color: #0C0C0D; transition: 500ms; } .mobile-nav__social a + a { margin-left: 20px; } .mobile-nav__social a:hover { color: #C550FF; } .mobile-nav__contact { margin-bottom: 0; margin-top: 20px; margin-bottom: 20px; } .mobile-nav__contact li { color: #0C0C0D; font-size: 14px; font-weight: 500; position: relative; display: flex; align-items: center; } .mobile-nav__contact li + li { margin-top: 15px; } .mobile-nav__contact li a { color: inherit; transition: 500ms; } .mobile-nav__contact li a:hover { color: #C550FF; } .mobile-nav__contact li i { width: 30px; height: 30px; border-radius: 4px; background-color: #C550FF; display: flex; justify-content: center; align-items: center; text-align: center; font-size: 14px; margin-right: 10px; color: #FAFAFA; } .mobile-nav__container .main-menu__logo, .mobile-nav__container .main-menu__right { display: none; } .nav-bar .nav-link li { position: relative; display: flex; align-items: center; gap: 16px; } .nav-bar .nav-link li::before { width: clamp(4px, 0.417vw, 16px); height: clamp(4px, 0.417vw, 16px); border: 1px solid #FAF0FF; border-radius: clamp(4px, 0.417vw, 16px); } .nav-bar .nav-link li.active::before { display: none; } .hero-banner { padding: clamp(48px, 4.167vw, 160px) 0 clamp(40px, 2.5vw, 54px) 0; } .hero-banner .title { font-weight: 700; line-height: 120%; /* 73.2px */ letter-spacing: -1.83px; } .hero-banner .img-wrapper { position: relative; } .hero-banner .img-wrapper .tool-img { position: absolute; left: -46px; bottom: 237.936px; } @media (max-width: 822px) { .hero-banner .img-wrapper .tool-img { display: none; } } .hero-banner .img-wrapper .vec-line { position: absolute; right: clamp(-80px, -5.208vw, 184px); top: -30px; } @media (max-width: 1025px) { .hero-banner .img-wrapper .vec-line { display: none; } } .hero-banner .img-wrapper .img-block { position: relative; width: 100%; } .hero-banner .img-wrapper .img-block .cardimg { position: absolute; width: 100%; left: clamp(18px, 1.25vw, 48px); bottom: clamp(18px, 1.25vw, 48px); } @media (max-width: 599px) { .hero-banner .img-wrapper .img-block .cardimg img { width: 210px; } } footer { background-color: #FAF0FF; padding: clamp(48px, 3.333vw, 188px) 0 clamp(24px, 1.667vw, 94px) 0; } footer .footer-block { display: flex; align-items: center; justify-content: space-between; padding-right: 4.427vw; } footer .news-letter-form { display: flex; align-items: end; gap: clamp(18px, 1.25vw, 48px) !important; padding-right: 4.167vw; } footer .news-letter-form .form-control { padding: clamp(10px, 0.573vw, 24px) clamp(10px, 0.729vw, 28px); border: 1px solid #92949F; color: #92949F !important; background-color: transparent; border-radius: clamp(4px, 0.417vw, 16px); box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05); } footer .news-letter-form .form-control::placeholder { color: #92949F !important; } footer .news-letter-form .cus-btn-2 { padding: clamp(13px, 0.755vw, 24px) clamp(24px, 1.667vw, 64px); } footer .h6, footer .heading-underline { text-align: center; display: inline-flex; padding-bottom: 1px; border-bottom: 4px solid #C550FF; } footer .links-block { display: flex; align-items: center; justify-content: center; } @media (max-width: 821px) { footer .links-block { justify-content: start; } } footer .links-block ul li { font-size: clamp(15px, 0.833vw, 32px); color: #141516; } footer .time-block { display: flex; align-items: center; justify-content: end; } @media (max-width: 821px) { footer .time-block { justify-content: start; } } footer .svg-block, footer .clock-vector { width: clamp(18px, 1.25vw, 88px); height: clamp(18px, 1.25vw, 88px); } footer .svg-block svg, footer .clock-vector svg { width: clamp(18px, 1.25vw, 88px); height: clamp(18px, 1.25vw, 88px); } footer .hover-content:hover { color: #d6b36b !important; } footer .footer-logo img { width: clamp(168px, 14.219vw, 604px); } footer .social-icons { display: flex; align-items: center; gap: clamp(8px, 0.625vw, 24px); } footer .social-icons .icon { width: clamp(36px, 2.083vw, 84px); height: clamp(36px, 2.083vw, 84px); border-radius: 4px; border: 1px solid #C550FF; display: flex; align-items: center; justify-content: center; } footer .social-icons .icon svg { width: clamp(20px, 0.833vw, 52px); height: clamp(20px, 0.833vw, 52px); } footer .social-icons .icon svg path { fill: #C550FF; transform: all 0.4s ease-in-out; } footer .social-icons .icon:hover { border: 1px solid #C550FF; background-color: #C550FF; } footer .social-icons .icon:hover svg path { fill: #E7B8FF; } .title-banner { background: url("../media/images/bg-banner.jpg") no-repeat; background-size: cover; display: flex; align-items: center; justify-content: start; padding: clamp(128px, 10.521vw, 628px) 0; } @media (max-width: 999px) { .title-banner { background-position-x: center; } } .title-banner h1 { font-weight: 700; line-height: 120%; /* 73.2px */ letter-spacing: -1.83px; color: #d6b36b !important; } .about-sec .img-block { position: relative; text-align: end; } .about-sec .img-block .block-img-2 { text-align: end; width: clamp(368px, 27.813vw, 928px); height: clamp(438px, 29.323vw, 988px); flex-shrink: 0; object-fit: cover; border-radius: clamp(18px, 1.25vw, 48px); } @media (max-width: 821px) { .about-sec .img-block .block-img-2 { width: 100%; height: auto; } } .about-sec .img-block .block-img-1 { position: absolute; bottom: 62px; left: 0; width: clamp(168px, 15vw, 528px); height: clamp(168px, 14.583vw, 528px); object-fit: cover; flex-shrink: 0; border-radius: clamp(18px, 1.25vw, 48px); border: 8px solid #FAFAFA; } @media (max-width: 821px) { .about-sec .img-block .block-img-1 { display: none; } } .about-sec .coundown-sec .counter-section .counter-count { display: flex; align-items: center; gap: clamp(8px, 0.625vw, 24px); } .about-sec .coundown-sec .counter-section .counter-count .svg-block svg { width: clamp(40px, 2.5vw, 54px); height: clamp(40px, 2.5vw, 54px); } .coundown-block .counter-count { display: flex; align-items: center; gap: clamp(8px, 0.625vw, 24px); } .coundown-block .counter-count .svg-block svg { width: clamp(40px, 3.75vw, 94px); height: clamp(40px, 3.75vw, 94px); } .getting-sec { position: relative; border-radius: clamp(18px, 1.25vw, 48px); background-color: #FAF0FF; } .getting-sec .hero-wrapper { padding: clamp(48px, 5vw, 188px) 0; text-align: center; } .getting-sec .hero-wrapper .hero-content-block { display: flex; gap: clamp(18px, 1.25vw, 88px); align-items: center; position: relative; justify-content: center; } @media (max-width: 590px) { .getting-sec .hero-wrapper .hero-content-block { flex-wrap: wrap; row-gap: 12px; } } .getting-sec .hero-wrapper .hero-content-block .hero-svg-1 { position: absolute; left: 12.896vw; top: 1.4vw; z-index: 0; width: 23.5vw; height: 9vw; pointer-events: none; } @media (max-width: 2010px) { .getting-sec .hero-wrapper .hero-content-block .hero-svg-1 { left: 12.896vw; top: 1.4vw; } } @media (max-width: 1840px) { .getting-sec .hero-wrapper .hero-content-block .hero-svg-1 { left: 11.896vw; } } @media (max-width: 1799px) { .getting-sec .hero-wrapper .hero-content-block .hero-svg-1 { left: 12.896vw; } } @media (max-width: 1599px) { .getting-sec .hero-wrapper .hero-content-block .hero-svg-1 { left: 18.896vw; } } @media (max-width: 1399px) { .getting-sec .hero-wrapper .hero-content-block .hero-svg-1 { width: 29.5vw; height: 10vw; left: 12.896vw; top: 1.4vw; } } @media (max-width: 1025px) { .getting-sec .hero-wrapper .hero-content-block .hero-svg-1 { display: none; } } .getting-sec .hero-wrapper .hero-content-block .hero-svg-2 { pointer-events: none; position: absolute; right: 578px; top: 32px; z-index: 0; width: 23vw; height: 9vw; top: 13%; } @media (max-width: 3860px) { .getting-sec .hero-wrapper .hero-content-block .hero-svg-2 { right: 13.104vw; } } @media (max-width: 1840px) { .getting-sec .hero-wrapper .hero-content-block .hero-svg-2 { right: 13.104vw; } } @media (max-width: 1799px) { .getting-sec .hero-wrapper .hero-content-block .hero-svg-2 { right: 14.104vw; } } @media (max-width: 1599px) { .getting-sec .hero-wrapper .hero-content-block .hero-svg-2 { right: 20.104vw; } } @media (max-width: 1399px) { .getting-sec .hero-wrapper .hero-content-block .hero-svg-2 { width: 31vw; height: 10vw; right: 13.104vw; } } @media (max-width: 1025px) { .getting-sec .hero-wrapper .hero-content-block .hero-svg-2 { display: none; } } .getting-sec .hero-wrapper .hero-content-block .block-1 { width: clamp(378px, 24.167vw, 1030px); display: flex; align-items: center; justify-content: center; flex-direction: column; gap: clamp(24px, 1.667vw, 64px); position: relative; z-index: 5; } .getting-sec .hero-wrapper .hero-content-block .block-1 .num-icon { width: clamp(48px, 4.167vw, 160px); height: clamp(48px, 4.167vw, 160px); display: flex; justify-content: center; align-items: center; background-color: #141516; color: #FAFAFA; border-radius: 50%; font-size: clamp(24px, 1.563vw, 64px); font-style: normal; font-weight: 600; line-height: 120%; font-family: "Inter", sans-serif; transition: all 0.4s ease-in-out; } .getting-sec .hero-wrapper .hero-content-block .block-1:hover .num-icon { background-color: #C550FF; } .sidebar .other-services-block { display: flex; align-items: center; justify-content: space-between; background-color: transparent; border: 1px solid #92949F; border-radius: clamp(8px, 0.625vw, 24px); padding: clamp(8px, 0.625vw, 24px); transition: all 0.4s ease-in-out; } .sidebar .other-services-block .text-18 { font-size: clamp(15px, 0.833vw, 32px); font-weight: 500; color: #92949F !important; } .sidebar .other-services-block svg { width: clamp(18px, 1.25vw, 48px); height: clamp(18px, 1.25vw, 48px); transition: all 0.4s ease-in-out; } .sidebar .other-services-block svg path { stroke: #92949F; transition: all 0.4s ease-in-out; } .sidebar .other-services-block:hover, .sidebar .other-services-block.active { background-color: #C550FF; border: 1px solid #C550FF; } .sidebar .other-services-block:hover .text-18, .sidebar .other-services-block.active .text-18 { color: #FAFAFA !important; } .sidebar .other-services-block:hover span, .sidebar .other-services-block.active span { color: #FAFAFA !important; } .sidebar .other-services-block:hover span svg, .sidebar .other-services-block.active span svg { transform: rotate(45deg); } .sidebar .other-services-block:hover span svg path, .sidebar .other-services-block.active span svg path { stroke: #FAFAFA; } .sidebar .gallery-block { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); grid-column-gap: 12px; grid-row-gap: 12px; } .sidebar .gallery-block img { width: 100%; border-radius: 6px; } .sidebar .blog-img { position: relative; width: 100%; border-radius: clamp(12px, 0.833vw, 32px); } .sidebar .blog-img img { border-radius: clamp(12px, 0.833vw, 32px); width: 100%; } .sidebar .blog-img .img-content { position: absolute; width: 100%; text-align: center; top: 50%; left: 50%; transform: translate(-50%, -50%); } .blog-detail-sec { position: relative; } .blog-detail-sec .sticky-wrapper { overflow: hidden; } .blog-detail-sec .sticky-wrapper .sidebar .menu li.text-18 { padding: 4px 0 4px 8px; cursor: pointer; transition: all 0.5s; color: #45474F; border-left: 2px solid #EAEAEC; } .blog-detail-sec .sticky-wrapper .sidebar .menu li.cur { border-left: 2px solid #C550FF; color: #141516 !important; } .blog-detail-sec .sticky-wrapper .sidebar .social-icons { display: flex; align-items: center; gap: clamp(8px, 0.625vw, 24px); } .blog-detail-sec .sticky-wrapper .sidebar .social-icons .icon { width: clamp(31px, 1.667vw, 64px); height: clamp(31px, 1.667vw, 64px); border-radius: 4px; border: 1px solid #C550FF; display: flex; align-items: center; justify-content: center; } .blog-detail-sec .sticky-wrapper .sidebar .social-icons .icon svg { width: clamp(12px, 0.719vw, 24px); height: clamp(12px, 0.719vw, 24px); } .blog-detail-sec .sticky-wrapper .sidebar .social-icons .icon svg path { fill: #C550FF; transform: all 0.4s ease-in-out; } .blog-detail-sec .sticky-wrapper .sidebar .social-icons .icon:hover { border: 1px solid #C550FF; background-color: #C550FF; } .blog-detail-sec .sticky-wrapper .sidebar .social-icons .icon:hover svg path { fill: #E7B8FF; } .blog-detail-sec .calendar-img, .blog-detail-sec .user-img { width: clamp(16px, 1.042vw, 40px); height: clamp(16px, 1.042vw, 40px); } .contact-sec .img-block { position: relative; width: 100%; } .contact-sec .img-block img { width: 100%; border-radius: clamp(16px, 1.042vw, 40px); } .contact-sec .img-block .img-content { position: absolute; left: clamp(24px, 1.667vw, 64px); bottom: clamp(24px, 1.667vw, 64px); } .contact-sec .img-block .img-content .tel-icon { flex-shrink: 0; width: clamp(40px, 2.5vw, 54px); height: clamp(40px, 2.5vw, 54px); display: flex; align-items: center; justify-content: center; border-radius: 50%; background-color: #C550FF; } .contact-sec .img-block .img-content .tel-icon svg { width: clamp(22px, 1.458vw, 48px); height: clamp(22px, 1.458vw, 48px); } .contact-sec .contact-form { border-radius: clamp(16px, 1.042vw, 40px); border: 1px solid #EAEAEC; padding: clamp(24px, 1.667vw, 64px); } .contact-sec .google-map-container { border-radius: clamp(18px, 1.25vw, 48px); height: clamp(220px, 22.917vw, 1250px); } .contact-sec .google-map-container iframe { border-radius: clamp(18px, 1.25vw, 48px); width: 100%; height: clamp(220px, 22.917vw, 1250px); } .service-sec .service-card { background-color: #FAFAFA; border-radius: clamp(8px, 0.625vw, 24px); overflow: hidden; border: 1px solid #EAEAEC; } .service-sec .service-card .card-img { position: relative; width: 100%; display: flex; justify-content: center; } .service-sec .service-card .card-img .main-img { border-radius: clamp(5px, 0.521vw, 20px); width: 100%; } .service-sec .service-card .card-img .card-vector { display: flex; align-items: center; justify-content: center; position: absolute; bottom: -1px; left: 50%; transform: translateX(-50%); width: clamp(62px, 4.375vw, 164px); height: clamp(24px, 1.609vw, 64px); } .service-sec .service-card .card-img .card-icon { border: 2px solid #C550FF; margin-bottom: -29px; position: absolute; bottom: 0; width: clamp(38px, 2.917vw, 128px); height: clamp(38px, 2.917vw, 128px); justify-content: center; align-items: center; display: flex; border-radius: 50%; flex-shrink: 0; background-color: #C550FF; transition: all 0.4s ease-in-out; } @media (max-width: 2680px) { .service-sec .service-card .card-img .card-icon { margin-bottom: -41px; } } @media (max-width: 2180px) { .service-sec .service-card .card-img .card-icon { margin-bottom: -29px; } } @media (max-width: 1399px) { .service-sec .service-card .card-img .card-icon { margin-bottom: -23px; } } @media (max-width: 1025px) { .service-sec .service-card .card-img .card-icon { margin-bottom: -20px; } } .service-sec .service-card .card-img .card-icon svg { width: clamp(24px, 1.875vw, 64px); height: clamp(24px, 1.875vw, 64px); flex-shrink: 0; transition: all 0.4s ease-in-out; } .service-sec .service-card .card-img .card-icon svg path { fill: #FAFAFA; } .service-sec .service-card .card-content { padding: clamp(16px, 1.042vw, 40px); padding-top: clamp(32px, 2.344vw, 82px); } .service-sec .service-card .card-content .h6 { transition: all 0.4s ease-in-out; } .service-sec .service-card .card-content .text-18 { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; } .service-sec .service-card .card-content .card-btn { display: flex; align-items: center; gap: clamp(4px, 0.417vw, 16px); transition: all 0.4s ease-in-out; } .service-sec .service-card .card-content .card-btn .text-18 { transition: all 0.4s ease-in-out; color: #0C0C0D !important; } .service-sec .service-card .card-content .card-btn i { font-weight: 600; font-size: clamp(14px, 0.833vw, 72px); color: #0C0C0D; transition: all 0.4s ease-in-out; } .service-sec .service-card .card-content .card-btn:hover .text-18 { color: #d6b36b !important; } .service-sec .service-card .card-content .card-btn:hover i { color: #d6b36b !important; transform: translateX(5px); } .service-sec .service-card:hover .h6 { text-decoration: underline; } .service-sec .service-card:hover .card-icon { border: 2px solid #C550FF; background-color: #FAFAFA; } .service-sec .service-card:hover .card-icon svg path { fill: #C550FF; } .service-sec.serviceslist-sec .card-content { padding: clamp(24px, 1.667vw, 64px); height: 100%; display: flex; flex-direction: column; justify-content: end; position: relative; border-radius: clamp(12px, 0.833vw, 32px); border: 1px solid #EAEAEC; background-color: #FAFAFA; transition: all 0.4s ease-in-out; } .service-sec.serviceslist-sec .card-content .list-vec { position: absolute; right: clamp(18px, 1.25vw, 48px); top: clamp(18px, 1.25vw, 48px); } .service-sec.serviceslist-sec .card-content .card-icon { width: clamp(64px, 5vw, 128px); height: clamp(64px, 5vw, 128px); border-radius: 50%; background-color: #C550FF; display: flex; align-items: center; justify-content: center; } .service-sec.serviceslist-sec .card-content .card-icon svg { width: clamp(48px, 2.857vw, 128px); } .service-sec.serviceslist-sec .card-content:hover { background-color: #FAF0FF; } .service-detail-sec .chooseplane { padding: clamp(24px, 1.667vw, 64px) 0; display: flex; align-items: center; justify-content: space-between; position: relative; } @media (max-width: 920px) { .service-detail-sec .chooseplane { flex-wrap: wrap; row-gap: 32px; } } .service-detail-sec .chooseplane .line-vector01 { position: absolute; width: 17.189vw; height: 8.115vw; left: clamp(134px, 10.417vw, 464px); z-index: -1; } @media (max-width: 1399px) { .service-detail-sec .chooseplane .line-vector01 { width: 22.189vw; height: 11.115vw; } } @media (max-width: 999px) { .service-detail-sec .chooseplane .line-vector01 { width: 34.189vw; height: 13.115vw; } } @media (max-width: 821px) { .service-detail-sec .chooseplane .line-vector01 { display: none; } } .service-detail-sec .chooseplane .line-vector02 { position: absolute; width: 17.189vw; height: 8.153vw; right: clamp(134px, 10.417vw, 464px); z-index: -1; } @media (max-width: 1399px) { .service-detail-sec .chooseplane .line-vector02 { width: 23.189vw; height: 11.153vw; } } @media (max-width: 999px) { .service-detail-sec .chooseplane .line-vector02 { width: 35.189vw; height: 13.153vw; } } @media (max-width: 821px) { .service-detail-sec .chooseplane .line-vector02 { display: none; } } .service-detail-sec .chooseplane .plane-1 { width: clamp(254px, 17.813vw, 564px); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; } @media (max-width: 920px) { .service-detail-sec .chooseplane .plane-1 { width: 100%; } } .service-detail-sec .chooseplane .plane-1 h4 { color: #d6b36b !important; } .service-detail-sec .chooseplane .plane-1 .icon { width: clamp(48px, 4.167vw, 160px); height: clamp(48px, 4.167vw, 160px); display: flex; justify-content: center; align-items: center; background-color: #C550FF; color: #FAFAFA; border-radius: 50%; font-size: clamp(24px, 1.563vw, 64px); font-style: normal; font-weight: 600; line-height: 120%; font-family: "Inter", sans-serif; transition: all 0.4s ease-in-out; } .testimonials-sec .testemonial-block .content-block { padding: clamp(40px, 2.5vw, 54px) clamp(18px, 1.25vw, 48px) clamp(32px, 5vw, 128px) clamp(18px, 1.25vw, 48px); border-radius: clamp(12px, 0.833vw, 32px); border: 1px solid #EAEAEC; background-color: #FAFAFA; text-align: center; display: flex; flex-direction: column; justify-content: center; transition: all 0.4s ease-in-out; } .testimonials-sec .testemonial-block .content-block .star { display: flex; align-items: center; justify-content: center; } .testimonials-sec .testemonial-block .content-block .star i { color: #FCA431; } .testimonials-sec .testemonial-block .user-block { text-align: center; display: flex; flex-direction: column; justify-content: center; align-items: center; margin-top: -38px; } .testimonials-sec .testemonial-block .user-block .user-img { width: clamp(48px, 3.75vw, 98px); height: clamp(48px, 3.75vw, 98px); } .testimonials-sec .testemonial-block:hover .content-block { background-color: #FAF0FF; } .blog-sec .blog-card { border: 1px solid #EAEAEC; border-radius: clamp(8px, 0.625vw, 24px); overflow: hidden; background-color: #FAFAFA; transition: all 0.4s ease-in-out; } .blog-sec .blog-card .card-img { width: 100%; position: relative; overflow: hidden; } .blog-sec .blog-card .card-img img { width: 100%; transition: all 0.4s ease-in-out; } .blog-sec .blog-card .card-img .date-block { position: absolute; left: clamp(12px, 0.833vw, 72px); top: clamp(12px, 0.833vw, 72px); background-color: #FAF0FF; border-radius: clamp(4px, 0.417vw, 16px); display: inline-flex; padding: clamp(3px, 0.313vw, 32px) clamp(8px, 0.625vw, 50px); flex-direction: column; align-items: center; } .blog-sec .blog-card .card-content { padding: clamp(18px, 1.25vw, 96px) clamp(12px, 0.833vw, 64px); padding-bottom: clamp(18px, 1.25vw, 96px); padding-top: clamp(16px, 1.042vw, 40px); } .blog-sec .blog-card .card-content p { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; } .blog-sec .blog-card .card-content .card-user { border-radius: 50%; width: clamp(18px, 1.25vw, 136px); height: clamp(18px, 1.25vw, 146px); } @media (max-width: 800px) { .blog-sec .blog-card .card-content .card-user { width: 34px; height: 34px; } } .blog-sec .blog-card .card-content .card-btn { display: flex; align-items: center; gap: clamp(4px, 0.417vw, 16px); font-weight: 500; font-size: clamp(14px, 0.938vw, 36px); line-height: 120%; color: #C550FF; transition: all 0.4s ease-in-out; } .blog-sec .blog-card .card-content .card-btn svg { transition: all 0.4s ease-in-out; width: clamp(16px, 1.042vw, 88px); height: clamp(16px, 1.042vw, 88px); } .blog-sec .blog-card .card-content .card-btn:hover { color: #C550FF; } .blog-sec .blog-card .card-content .card-btn:hover svg { transform: translateX(6px); } .blog-sec .blog-card:hover { background-color: #FAF0FF; } .blog-sec .blog-card:hover .card-img img { transform: scale(1.03); } .blog-sec.blog-list-sec .blog-card { display: flex; align-items: center; gap: clamp(18px, 1.25vw, 48px) !important; } @media (max-width: 1025px) { .blog-sec.blog-list-sec .blog-card { flex-wrap: wrap; gap: 4px !important; } } .blog-sec.blog-list-sec .blog-card .card-img { width: 464px; height: 320px; } .blog-sec.blog-list-sec .blog-card .card-img img { width: 100%; height: 100%; object-fit: cover; } .blog-sec.blog-list-sec .blog-card p { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .blog-sec.blog-list-sec .blog-card .card-user { border-radius: 50%; width: clamp(32px, 1.875vw, 136px); height: clamp(32px, 1.875vw, 146px); } @media (max-width: 800px) { .blog-sec.blog-list-sec .blog-card .card-user { width: 34px; height: 34px; } } .blog-heading { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; row-gap: 22px; } @media (max-width: 590px) { .blog-heading { flex-wrap: wrap; justify-content: center; } } .blog-heading .search-form { display: flex; align-items: center; justify-content: space-between; border-radius: clamp(4px, 0.417vw, 16px); border: 1px solid #92949F; padding: 2px 2px 2px clamp(12px, 0.833vw, 32px); } @media (max-width: 1399px) { .blog-heading .search-form { width: auto; } } .blog-heading .search-form input { width: 100%; border: none; background-color: transparent; outline: none; box-shadow: none; } .blog-heading .search-form input:focus { border: none; background-color: transparent; outline: none; box-shadow: none; } .blog-heading .search-form input::placeholder { color: #45474F; font-family: "Plus Jakarta Sans", sans-serif; font-size: clamp(12px, 0.833vw, 32px); /* 16px */ font-style: normal; font-weight: 400; line-height: 150%; } .blog-heading .search-form .news-button { flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: 4px; background-color: #C550FF; transition: all 0.4s ease-in-out; border: none; width: clamp(28px, 2.5vw, 120px); height: clamp(28px, 2.5vw, 120px); } .blog-heading .search-form .news-button svg { width: clamp(16px, 1.042vw, 40px); height: clamp(16px, 1.042vw, 40px); } .blog-heading .search-form .news-button:hover { background-color: #C550FF; } .blog-heading .drop-container { border: none; } .blog-heading .drop-container .wrapper-dropdown { width: clamp(178px, 13.073vw, 396px); border-radius: clamp(4px, 0.417vw, 16px); border: none; background-color: #EAEAEC; } .quote-sec { background-color: #FAF0FF; padding: clamp(88px, 6.667vw, 198px) 0; } .quote-sec .quote-wrapper { padding: clamp(24px, 1.667vw, 64px) clamp(16px, 1.042vw, 40px); border-radius: clamp(12px, 0.833vw, 32px); background-color: #FAFAFA; } .learnig-journey-sec .img-block { position: relative; } .learnig-journey-sec .img-block .journey-img { width: 100%; border-radius: clamp(12px, 0.833vw, 32px); object-fit: cover; } .learnig-journey-sec .img-block .our-student-block { width: clamp(258px, 18.021vw, 648px); padding: clamp(22px, 1.25vw, 48px); border-radius: clamp(8px, 0.625vw, 24px); background-color: #C550FF; display: inline-flex; align-items: center; flex-direction: column; justify-content: center; text-align: center; position: absolute; bottom: clamp(18px, 1.25vw, 48px); left: clamp(18px, 1.25vw, 48px); } .learnig-journey-sec .img-block .our-student-block .img-block { display: flex; align-items: center; } .learnig-journey-sec .img-block .our-student-block .img-block img { width: clamp(48px, 2.917vw, 140px); height: clamp(48px, 2.917vw, 140px); } .learnig-journey-sec .img-block .our-student-block .img-block img:nth-child(2), .learnig-journey-sec .img-block .our-student-block .img-block img:nth-child(3), .learnig-journey-sec .img-block .our-student-block .img-block img:nth-child(4) { margin-left: -22.4px; } @media (max-width: 1025px) { .learnig-journey-sec .img-block .our-student-block .img-block img:nth-child(2), .learnig-journey-sec .img-block .our-student-block .img-block img:nth-child(3), .learnig-journey-sec .img-block .our-student-block .img-block img:nth-child(4) { margin-left: -11.4px; } } .learnig-journey-sec .img-block .our-student-block .img-block .numicon { width: clamp(48px, 2.917vw, 140px); height: clamp(48px, 2.917vw, 140px); border-radius: 50%; border: 2px solid #FAFAFA; display: flex; align-items: center; justify-content: center; background-color: #FAFAFA; color: #C550FF; font-weight: 600; line-height: 150%; font-size: clamp(15px, 0.833vw, 72px); margin-left: -22.4px; } @media (max-width: 1025px) { .learnig-journey-sec .img-block .our-student-block .img-block .numicon { margin-left: -11.4px; } } .learnig-journey-sec #learningjourney { padding: clamp(24px, 1.667vw, 64px); } .learnig-journey-sec .faq .faq-block .collapsed, .learnig-journey-sec .faq .faq-block .collapse, .learnig-journey-sec .faq .faq-block .show { transition: all 0.4s ease-in-out; } .learnig-journey-sec .faq .faq-block .accordion-button { transition: all 0.4s ease-in-out; margin: 0; position: relative; padding: 0; color: #0C0C0D !important; font-family: "Inter", sans-serif; font-size: clamp(16px, 1.042vw, 40px); font-style: normal; font-weight: 500; line-height: 120%; } .learnig-journey-sec .faq .faq-block .accordion-button.collapsed { transition: all 0.4s ease-in-out; color: #0C0C0D !important; border-radius: 0px; padding: 0; background: none; margin: 0; } .learnig-journey-sec .faq .faq-block .accordion-button.collapsed::after { transition: all 0.4s ease-in-out; background-image: none !important; content: "\f054"; font-family: "Font Awesome 6 Pro"; transform: rotate(0deg); color: #0C0C0D !important; } .learnig-journey-sec .faq .faq-block .accordion-button:not(.collapsed) { transition: all 0.4s ease-in-out; color: #0C0C0D; background: transparent; border: none; box-shadow: none; } .learnig-journey-sec .faq .faq-block .accordion-button:focus { transition: all 0.4s ease-in-out; border: none; box-shadow: none; } .learnig-journey-sec .faq .faq-block .accordion-button::after { content: "\f054"; width: clamp(16px, 1.042vw, 96px); height: clamp(16px, 1.042vw, 96px); display: inline-flex; align-items: center; justify-content: center; transition: all 0.4s ease-in-out; font-family: "Font Awesome 6 Pro"; background-image: none !important; position: absolute; right: 0px; font-weight: 400; color: #d6b36b !important; font-size: clamp(16px, 1.042vw, 96px); cursor: pointer; transform: rotate(-90deg); } .learnig-journey-sec .faq .faq-block .accordion-collapse { transition: all 0.4s ease-in-out; border-top: 1px solid #EAEAEC; padding-top: 8px; margin-top: 8px; } .learnig-journey-sec .faq .faq-block .accordion-collapse p { color: #45474F !important; } .out-team-sec .team-block { display: flex; flex-direction: column; border-radius: clamp(16px, 1.042vw, 40px); overflow: hidden; background-color: #FAFAFA; border: 1px solid #EAEAEC; } .out-team-sec .team-block .img-block { border-radius: clamp(16px, 1.042vw, 40px); width: 100%; overflow: hidden; transition: all 0.4s ease-in-out; } .out-team-sec .team-block .img-block img { border-radius: clamp(16px, 1.042vw, 40px); transition: all 0.4s ease-in-out; width: 100%; } .out-team-sec .team-block .team-content { padding: clamp(18px, 1.25vw, 48px); display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; row-gap: 12px; } .out-team-sec .team-block .team-content .links-icon { width: clamp(24px, 1.667vw, 108px); height: clamp(24px, 1.667vw, 108px); flex-shrink: 0; } .out-team-sec .team-block:hover .img-block img { transform: scale(1.03); } /*# sourceMappingURL=app.css.map */ .about_p{ line-height: 25px; }