@charset "UTF-8"; /*---------------------------------------------" // Template Name: Nexus // Description: Nexus - Digital Agency HTML Template // Version: 1.0.0 =============================================== STYLE SHEET INDEXING | |___ Fonts |___ Variables |___ Responsive |___ Reset Styles |___ Spacing |___ Helper Classes |___ Buttons |___ Headings |___ Layout Styles |___ END STYLE SHEET INDEXING --------------------------------------------*/ /*------------------------- Fonts -------------------------*/ @import url("https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100..900;1,100..900&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 -------------------------*/ /* Fonts */ /* Colors */ /* Transitions */ /* Gradient */ /* Shadows */ /*------------------------- Responsive Styles -------------------------*/ /*------------------------- Reset Styles -------------------------*/ 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: #FDDC8B; } .unstyled { padding-left: 0; list-style: none; margin-bottom: 0; } @media (min-width: 768px) { .container, .container-fluid { padding: 0 5vw; width: 100%; } } @media (max-width: 575px) { .container, .container-fluid { --bs-gutter-x: 2rem; --bs-gutter-y: 0; width: 100%; padding-right: calc(var(--bs-gutter-x) * 0.5); } } .row { margin-left: -15px; margin-right: -15px; } .row > [class*=col] { padding-left: 15px; padding-right: 15px; } .row.g-0 { margin-left: 0; margin-right: 0; } .row.g-0 > [class*=col] { padding-left: 0; padding-right: 0; } .page-content { margin: 20px 0; } .main-wrapper { height: auto; overflow-x: hidden; } .star-cb-group { font-size: 0; unicode-bidi: bidi-override; direction: rtl; margin-bottom: 24px; } .slick-track > [class*=col] { -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; width: 100%; max-width: 100%; padding-right: calc(var(--bs-gutter-x) / 2); padding-left: calc(var(--bs-gutter-x) / 2); } @media (max-width: 575px) { .slick-track > [class*=col] { padding-right: calc(var(--bs-gutter-x) * 0.25); padding-left: calc(var(--bs-gutter-x) * 0.25); } } /* ------------------------------------------------------------- * * Custom scrollbar style /* ------------------------------------------------------------- */ .tt-custom-scrollbar { overflow-y: auto; } /* Works on Firefox */ .tt-custom-scrollbar, .tt-sliding-sidebar-inner, .tt-sidebar { scrollbar-width: thin; scrollbar-color: #555 #2a2a2a; } select { scrollbar-width: thin; scrollbar-color: #666 #2a2a2a; } /* Works on Chrome, Edge, and Safari */ .tt-custom-scrollbar::-webkit-scrollbar, .tt-sliding-sidebar-inner::-webkit-scrollbar, .tt-sidebar::-webkit-scrollbar { width: 8px; height: 8px; } select::-webkit-scrollbar { width: 10px; } .tt-custom-scrollbar::-webkit-scrollbar-track, .tt-sliding-sidebar-inner::-webkit-scrollbar-track, .tt-sidebar::-webkit-scrollbar-track, select::-webkit-scrollbar-track { background: #2a2a2a; } .tt-custom-scrollbar::-webkit-scrollbar-thumb, .tt-sliding-sidebar-inner::-webkit-scrollbar-thumb, .tt-sidebar::-webkit-scrollbar-thumb { background-color: #555; border-radius: 50px; } select::-webkit-scrollbar-thumb { background-color: #666; border-radius: 50px; } /* ------------------------------------------------------------- * * Smooth Scrollbar * Source: https://github.com/idiotWu/smooth-scrollbar/ /* ------------------------------------------------------------- */ /* Hide default scrollbar */ body:not(.is-mobile).tt-smooth-scroll { overflow: hidden; } /* Scroll content (added if contain class "tt-smooth-scroll". Disabled on mobile devices!) */ body:not(.is-mobile).tt-smooth-scroll #scroll-container { width: auto; height: 100vh; overflow: auto; margin: 0; } /* Styling scrollbar */ .scrollbar-track { background: transparent !important; z-index: 99999 !important; } .scrollbar-track:hover { /*background: rgba(222, 222, 222, 0.1) !important;*/ } .scrollbar-thumb { background: #DDD !important; opacity: 0.25; transition: opacity 0.2s ease-in-out; } .scrollbar-track:hover .scrollbar-thumb { opacity: 0.5; } /* ------------------------------------------------------------- * * Magic cursor /* ------------------------------------------------------------- */ #magic-cursor { position: absolute; display: none; width: 10px; height: 10px; pointer-events: none; z-index: 99999; opacity: 0; } body.tt-magic-cursor #magic-cursor { display: block; } #ball { position: fixed; display: flex; justify-content: center; align-items: center; color: #FFF; pointer-events: none; border-style: solid; /*border-color: #FFF;*/ border-radius: 50%; /* Note: border width handled through JS */ } /*------------------------- Typography -------------------------*/ html { scroll-behavior: smooth; } html[data-scroll-orientation=horizontal] body { width: fit-content; } html[data-scroll-orientation=horizontal] [data-scroll-container] { display: flex; } body { font-family: "Poppins", sans-serif; color: #fafafa; background-color: #141414; font-size: clamp(15px, 0.938vw, 21px); font-weight: 400; line-height: 150%; height: 100%; vertical-align: baseline; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } body::-webkit-scrollbar { width: 8px; } body::-webkit-scrollbar-track { background-color: #141414; border-radius: 8px; } body::-webkit-scrollbar-thumb { border-radius: 8px; background: linear-gradient(180deg, rgba(253, 220, 139, 0.95) 0%, rgba(40, 208, 232, 0.95) 100%); } @media (max-width: 991px) { body { font-size: clamp(15.5px, 1.778vw, 16px); } } @media (max-width: 767px) { body { font-size: clamp(14px, 2.286vw, 14px); } } @media (max-width: 575px) { body { font-size: clamp(12.5px, 3.59vw, 14px); } } .o-scroll { height: 100vh; } h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6, address, p, pre, blockquote, 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: #fafafa; font-family: "Jost", sans-serif; } a { display: inline-block; text-decoration: none; color: unset; transition: all 0.5s ease-in-out; } a:hover { color: #FDDC8B; } span { display: inline-block; } b, strong { font-family: "Poppins", sans-serif; } h1, .h1 { font-size: clamp(80px, 6.771vw, 260px); /* 130px */ font-weight: 700; line-height: 85%; /* 110.5px */ letter-spacing: -3.9px; } @media (max-width: 991px) { h1, .h1 { font-size: clamp(64px, 9.146vw, 84px); letter-spacing: -2.9px; } } @media (max-width: 767px) { h1, .h1 { font-size: clamp(54px, 9.375vw, 68px); letter-spacing: -2.3px; } } @media (max-width: 575px) { h1, .h1 { font-size: clamp(36px, 11.282vw, 56px); letter-spacing: -1.5px; } } h2, .h2 { font-size: clamp(60px, 5.208vw, 200px); /* 100px */ font-weight: 500; line-height: 120%; } @media (max-width: 991px) { h2, .h2 { font-size: clamp(54px, 7.143vw, 72px); } } @media (max-width: 767px) { h2, .h2 { font-size: clamp(42px, 7.5vw, 56px); } } @media (max-width: 575px) { h2, .h2 { font-size: clamp(26px, 8.205vw, 42px); } } h3, .h3 { font-size: clamp(24px, 1.875vw, 72px); /* 36px */ font-weight: 500; line-height: 120%; letter-spacing: -0.36px; } @media (max-width: 991px) { h3, .h3 { font-size: clamp(24px, 3.493vw, 28px); } } @media (max-width: 767px) { h3, .h3 { font-size: clamp(22px, 4.23vw, 24px); } } @media (max-width: 575px) { h3, .h3 { font-size: clamp(20px, 6.575vw, 22px); } } h4, .h4 { font-size: clamp(33px, 2.865vw, 110px); /* 55px */ font-weight: 500; line-height: 120%; } @media (max-width: 991px) { h4, .h4 { font-size: clamp(27px, 3.78vw, 36px); } } @media (max-width: 767px) { h4, .h4 { font-size: clamp(24px, 4.219vw, 30px); } } @media (max-width: 575px) { h4, .h4 { font-size: clamp(20px, 5.897vw, 26px); } } h5, .h5 { font-size: clamp(20px, 1.563vw, 60px); /* 30px */ font-weight: 500; line-height: 120%; } @media (max-width: 991px) { h5, .h5 { font-size: clamp(18px, 2.439vw, 23px); } } @media (max-width: 767px) { h5, .h5 { font-size: clamp(17px, 2.969vw, 21px); letter-spacing: 0.2px; } } @media (max-width: 575px) { h5, .h5 { font-size: clamp(15px, 4.359vw, 19px); } } h6, .h6 { font-size: clamp(15px, 1.042vw, 40px); /* 20px */ font-weight: 700; line-height: 120%; } @media (max-width: 991px) { h6, .h6 { font-size: clamp(15.5px, 1.778vw, 16px); } } @media (max-width: 767px) { h6, .h6 { font-size: clamp(14px, 2.286vw, 14px); } } @media (max-width: 575px) { h6, .h6 { font-size: clamp(12.5px, 3.59vw, 14px); } } .bold-text { font-size: clamp(13px, 0.833vw, 22px); line-height: 120%; font-weight: 600; } @media (max-width: 991px) { .bold-text { font-size: clamp(13.5px, 1.778vw, 16px); } } @media (max-width: 767px) { .bold-text { font-size: clamp(13px, 2.286vw, 14px); } } @media (max-width: 575px) { .bold-text { font-size: clamp(11.5px, 3.59vw, 14px); } } /*------------------------- Helpers -------------------------*/ .color-primary { color: #FDDC8B !important; } .bg-primary { background-color: #FDDC8B !important; } .color-sec { color: #28D0E8 !important; } .bg-sec { background-color: #28D0E8 !important; } .color-white { color: #fafafa !important; } .bg-white { background-color: #fafafa !important; } .light-black { color: #141516 !important; } .bg-light-black { background-color: #141516 !important; } .color-black { color: #141414 !important; } .bg-black { background-color: #141414 !important; } .medium-black { color: #1e1f20 !important; } .bg-medium-black { background-color: #1e1f20 !important; } .dark-black { color: #0c0c0d !important; } .bg-dark-black { background-color: #0c0c0d !important; } .light-gray { color: #92949f !important; } .bg-light-gray { background-color: #92949f !important; } .lightest-gray { color: #eaeaec !important; } .bg-lightest-gray { background-color: #eaeaec !important; } .medium-gray { color: #92949f !important; } .bg-medium-gray { background-color: #92949f !important; } .dark-gray { color: #45474f !important; } .bg-dark-gray { background-color: #45474f !important; } .gradient-stroke-text { background: linear-gradient(90deg, rgba(253, 220, 139, 0.95) 0%, rgba(40, 208, 232, 0.95) 100%); -webkit-background-clip: text; -webkit-text-stroke: 2px transparent; color: #141414; } .gradient-stroke-text-medium-black { background: linear-gradient(90deg, rgba(253, 220, 139, 0.95) 0%, rgba(40, 208, 232, 0.95) 100%); -webkit-background-clip: text; -webkit-text-stroke: 2px transparent; color: #1e1f20; } .bg-gradient { background: linear-gradient(90deg, rgba(253, 220, 139, 0.95) 0%, rgba(40, 208, 232, 0.95) 100%); } .light-shadow { box-shadow: 0px 6px 12px 0px rgba(0, 0, 0, 0.12); } .br-30 { border-radius: 30px; } .br-25 { border-radius: 25px; } .br-20 { border-radius: 20px; } .br-15 { border-radius: 15px; } .br-12 { border-radius: 12px; } .br-10 { border-radius: 10px; } .br-5 { border-radius: 5px; } .b-unstyle { border: 0; background: transparent; } .social-icons { display: flex; gap: 8px; } .social-icons li a { width: clamp(28px, 2.083vw, 54px); height: clamp(28px, 2.083vw, 54px); display: grid; align-items: center; justify-content: center; background-color: #fafafa; border-radius: 0px; transition: all 0.5s ease-in-out; } .social-icons li a svg { width: clamp(18px, 1.25vw, 32px); height: clamp(18px, 1.25vw, 32px); } .social-icons li a svg path { fill: #141414; transition: all 0.5s ease-in-out; } .social-icons li a:hover { background-color: #FDDC8B; } .social-icons-2 { display: flex; gap: clamp(16px, 1.1vw, 32px); } .social-icons-2 a svg { width: clamp(24px, 1.66vw, 42px); height: clamp(24px, 1.66vw, 42px); } .gap-4 { gap: 4px; } @media (max-width: 768px) { .gap-4 { gap: 2px; } } .gap-8 { gap: 8px; } @media (max-width: 768px) { .gap-8 { gap: 4px; } } .gap-16 { gap: 16px; } @media (max-width: 768px) { .gap-16 { gap: 12px; } } .gap-24 { gap: 24px; } @media (max-width: 1199px) { .gap-24 { gap: 20px; } } @media (max-width: 992px) { .gap-24 { gap: 16px; } } @media (max-width: 768px) { .gap-24 { gap: 12px; } } .gap-32 { gap: 32px; } @media (max-width: 1199px) { .gap-32 { gap: 26px; } } @media (max-width: 992px) { .gap-32 { gap: 22px; } } @media (max-width: 768px) { .gap-32 { gap: 18px; } } @media (max-width: 768px) { .facility img { width: 24px; } } @media (max-width: 575px) { .facility img { width: 16px; } } .fw-400 { font-weight: 400; } .fw-500 { font-weight: 500; } .fw-600 { font-weight: 600; } .fw-700 { font-weight: 700; } /*----------------------------------------*/ /* SPACE CSS START /*----------------------------------------*/ .my-100 { margin: clamp(70px, 5.208vw, 200px) 0; } @media (max-width: 575px) { .my-100 { margin: 50px 0; } } .mt-100 { margin-top: clamp(70px, 5.208vw, 200px); } @media (max-width: 575px) { .mt-100 { margin-top: 50px; } } .mb-100 { margin-bottom: clamp(70px, 5.208vw, 200px); } @media (max-width: 575px) { .mb-100 { margin-bottom: 50px; } } .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; } } .mt-64 { margin-top: clamp(32px, 3.33vw, 128px); } @media (max-width: 767px) { .mt-64 { margin-top: 26px; } } .mb-64 { margin-bottom: clamp(32px, 3.33vw, 128px); } @media (max-width: 767px) { .mb-64 { margin-bottom: 26px; } } .mb-60 { margin-bottom: 60px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .mb-60 { margin-bottom: 46px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .mb-60 { margin-bottom: 40px; } } @media (max-width: 767px) { .mb-60 { margin-bottom: 30px; } } .my-48 { margin: clamp(24px, 2.5vw, 96px) 0; } @media (max-width: 767px) { .my-48 { margin: 23px 0; } } .mb-48 { margin-bottom: clamp(24px, 2.5vw, 96px); } @media (max-width: 767px) { .mb-48 { margin-bottom: 23px; } } .mt-48 { margin-top: clamp(24px, 2.5vw, 96px); } @media (max-width: 767px) { .mt-48 { margin-top: 23px; } } .my-40 { margin: clamp(24px, 2.08vw, 80px) 0; } @media (max-width: 575px) { .my-40 { margin: 20px 0; } } .mt-40 { margin-top: clamp(24px, 2.08vw, 80px); } @media (max-width: 575px) { .mt-40 { margin-top: 20px; } } .mb-40 { margin-bottom: clamp(24px, 2.08vw, 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-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; } } .mb-30 { margin-bottom: 30px; } @media (max-width: 1199px) { .mb-30 { margin-bottom: 28px; } } @media (max-width: 991px) { .mb-30 { margin-bottom: 24px; } } @media (max-width: 767px) { .mb-30 { 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: 18px; } } .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: 18px; } } .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; } } .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: 12px; } } .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: 12px; } } .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; } } .mt-8 { margin-top: 8px; } @media (max-width: 767px) { .mt-8 { margin-top: 4px; } } .mb-8 { margin-bottom: 8px; } .mb-4p { margin-bottom: 4px; } @media (max-width: 1299px) { .mr-4 { margin-right: 4px; } } .py-100 { padding: clamp(70px, 5.208vw, 200px) 0; } @media (max-width: 575px) { .py-100 { padding: 50px 0; } } .pt-100 { padding-top: clamp(70px, 5.208vw, 200px); } @media (max-width: 575px) { .pt-100 { padding-top: 50px; } } .pb-100 { padding-bottom: clamp(70px, 5.208vw, 200px); } @media (max-width: 575px) { .pb-100 { padding-bottom: 50px; } } .p-108 { padding: clamp(64px, 5.625vw, 216px); } @media (max-width: 767px) { .p-108 { padding: 48px; } } .py-96 { padding: clamp(54px, 5vw, 192px) 0; } @media (max-width: 767px) { .py-96 { padding: 44px 0; } } .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; } } .pb-80 { padding-bottom: clamp(48px, 4.167vw, 160px); } @media (max-width: 575px) { .pb-80 { padding-bottom: 40px; } } .py-64 { padding: clamp(40px, 3.33vw, 128px) 0; } @media (max-width: 767px) { .py-64 { padding: 32px 0; } } .pt-64 { padding-top: clamp(40px, 3.33vw, 128px); } @media (max-width: 767px) { .pt-64 { padding-top: 32px; } } .pad-64 { padding-bottom: clamp(40px, 3.33vw, 128px); } @media (max-width: 767px) { .pad-64 { padding-bottom: 32px; } } .py-60 { padding: 60px 0; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .py-60 { padding: 40px 0; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .py-60 { padding: 32px 0; } } @media (max-width: 767px) { .py-60 { padding: 20px 0; } } .py-48 { padding: clamp(24px, 2.5vw, 96px) 0; } @media (max-width: 767px) { .py-48 { padding: 23px 0; } } .pb-48 { padding-bottom: clamp(24px, 2.5vw, 96px); } @media (max-width: 767px) { .pb-48 { padding-bottom: 23px; } } .pt-48 { padding-top: clamp(24px, 2.5vw, 96px); } @media (max-width: 767px) { .pt-48 { padding-top: 23px; } } .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; } } .pb-40 { padding-bottom: clamp(24px, 2.083vw, 80px); } @media (max-width: 575px) { .pb-40 { padding-bottom: 20px; } } .pl-36 { padding-left: 37px; } @media (max-width: 1199px) { .pl-36 { padding-left: 32px; } } @media (max-width: 991px) { .pl-36 { padding-left: 28px; } } @media (max-width: 767px) { .pl-36 { padding-left: 22px; } } .pad-32 { padding: 32px; } @media (max-width: 1199px) { .pad-32 { padding: 28px; } } @media (max-width: 991px) { .pad-32 { padding: 24px; } } @media (max-width: 767px) { .pad-32 { padding: 20px; } } .pt-32 { padding: 32px; } @media (max-width: 1599px) { .pt-32 { padding: 29px; } } @media (max-width: 1399px) { .pt-32 { padding: 27px; } } @media (max-width: 1199px) { .pt-32 { padding: 25px; } } @media (max-width: 991px) { .pt-32 { padding: 22px; } } @media (max-width: 767px) { .pt-32 { padding: 20px; } } .pb-32 { padding-bottom: 32px; } @media (max-width: 1599px) { .pb-32 { padding-bottom: 29px; } } @media (max-width: 1399px) { .pb-32 { padding-bottom: 27px; } } @media (max-width: 1199px) { .pb-32 { padding-bottom: 25px; } } @media (max-width: 991px) { .pb-32 { padding-bottom: 22px; } } @media (max-width: 767px) { .pb-32 { padding-bottom: 20px; } } .p-24 { padding: clamp(16px, 1.25vw, 48px); } @media (max-width: 575px) { .p-24 { padding: 14px; } } .pb-24 { padding-bottom: clamp(16px, 1.25vw, 48px); } @media (max-width: 575px) { .pb-24 { padding-bottom: 14px; } } .plr-24 { padding: 0 clamp(16px, 1.25vw, 48px); } @media (max-width: 575px) { .plr-24 { padding: 0 14px; } } .p-16 { padding: 16px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .p-16 { padding: 15px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .p-16 { padding: 13px; } } @media (max-width: 767px) { .p-16 { padding: 10px; } } @media (max-width: 490px) { .p-16 { padding: 10px; } } .pl-28 { padding-left: 28px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .pl-28 { padding-left: 24px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .pl-28 { padding-left: 19px; } } @media (max-width: 767px) { .pl-28 { padding-left: 16px; } } @media (max-width: 490px) { .pl-28 { padding-left: 14px; } } /*------------------------- Elements -------------------------*/ .preloader { position: fixed; width: 100%; height: 100vh; display: grid; align-items: center; justify-content: center; background: #141414; z-index: 9999999; align-content: center; } .preloader #timer { display: grid; grid-template-columns: repeat(3, 25px); grid-template-rows: repeat(5, 25px); gap: 10px; position: absolute; left: 50%; transform: translateX(-50%); grid-template-areas: "div1 div2 div3" "div4 div5 div6" "div7 div8 div9" "div10 div11 div12" "div13 div14 div15"; } .preloader #timer #div1, .preloader #timer #div2, .preloader #timer #div3, .preloader #timer #div4, .preloader #timer #div5, .preloader #timer #div6, .preloader #timer #div7, .preloader #timer #div8, .preloader #timer #div9, .preloader #timer #div10, .preloader #timer #div11, .preloader #timer #div12, .preloader #timer #div13, .preloader #timer #div14, .preloader #timer #div15 { background-color: #fafafa; border-radius: 5px; } #div1 { grid-area: div1; animation: div1 10s both infinite; } @keyframes div1 { 0% { transform: translateX(0); } 10% { transform: translateX(70px); } 20% { transform: translateX(0); } 30% { transform: translateX(0); } 40% { transform: translateX(0); } 50% { transform: translateX(0); } 60% { transform: translateX(0); } 70% { transform: translateX(0); } 80% { transform: translateX(0); } 90% { transform: translateX(0); } 100% { transform: translateX(0); } } #div2 { grid-area: div2; animation: div2 10s both infinite; } @keyframes div2 { 0% { transform: translateX(0); } 10% { transform: translateX(35px); } 20% { transform: translateX(0); } 30% { transform: translateX(0); } 40% { transform: translateX(35px); } 50% { transform: translateX(0); } 60% { transform: translateX(0); } 70% { transform: translateX(0); } 80% { transform: translateX(0); } 90% { transform: translateX(0); } 100% { transform: translateX(0); } } #div3 { grid-area: div3; } #div4 { grid-area: div4; animation: div4 10s both infinite; } @keyframes div4 { 0% { transform: translateX(0); } 10% { transform: translateX(70px); } 20% { transform: translateX(70px); } 30% { transform: translateX(70px); } 40% { transform: translateX(0); } 50% { transform: translateX(0); } 60% { transform: translateX(70px); } 70% { transform: translateX(70px); } 80% { transform: translateX(0); } 90% { transform: translateX(0); } 100% { transform: translateX(0); } } #div5 { grid-area: div5; display: none; } #div6 { grid-area: div6; animation: div6 10s both infinite; } @keyframes div6 { 0% { transform: translateX(0); } 10% { transform: translateX(0); } 20% { transform: translateX(0); } 30% { transform: translateX(0); } 40% { transform: translateX(0); } 50% { transform: translateX(-70px); } 60% { transform: translateX(0); } 70% { transform: translateX(0); } 80% { transform: translateX(0); } 90% { transform: translateX(0); } 100% { transform: translateX(0); } } #div7 { grid-area: div7; animation: div7 10s both infinite; } @keyframes div7 { 0% { transform: translateX(0); } 10% { transform: translateX(70px); } 20% { transform: translateX(0); } 30% { transform: translateX(0); } 40% { transform: translateX(0); } 50% { transform: translateX(0); } 60% { transform: translateX(0); } 70% { transform: translateX(70px); } 80% { transform: translateX(0); } 90% { transform: translateX(0); } 100% { transform: translateX(0); } } #div8 { grid-area: div8; animation: div8 10s both infinite; } @keyframes div8 { 0% { transform: translateX(35px); } 10% { transform: translateX(35px); } 20% { transform: translateX(0); } 30% { transform: translateX(0); } 40% { transform: translateX(0); } 50% { transform: translateX(0); } 60% { transform: translateX(0); } 70% { transform: translateX(35px); } 80% { transform: translateX(0); } 90% { transform: translateX(0); } 100% { transform: translateX(35px); } } #div9 { grid-area: div9; } #div10 { grid-area: div10; animation: div10 10s both infinite; } @keyframes div10 { 0% { transform: translateX(0); } 10% { transform: translateX(70px); } 20% { transform: translateX(0); } 30% { transform: translateX(70px); } 40% { transform: translateX(70px); } 50% { transform: translateX(70px); } 60% { transform: translateX(0); } 70% { transform: translateX(70px); } 80% { transform: translateX(0); } 90% { transform: translateX(70px); } 100% { transform: translateX(0); } } #div11 { grid-area: div11; display: none; } #div12 { grid-area: div12; animation: div12 10s both infinite; } @keyframes div12 { 0% { transform: translateX(0); } 10% { transform: translateX(0); } 20% { transform: translateX(-70px); } 30% { transform: translateX(0); } 40% { transform: translateX(0); } 50% { transform: translateX(0); } 60% { transform: translateX(0); } 70% { transform: translateX(0); } 80% { transform: translateX(0); } 90% { transform: translateX(0); } 100% { transform: translateX(0); } } #div13 { grid-area: div13; animation: div13 10s both infinite; } @keyframes div13 { 0% { transform: translateX(0); } 10% { transform: translateX(70px); } 20% { transform: translateX(0); } 30% { transform: translateX(0); } 40% { transform: translateX(70px); } 50% { transform: translateX(0); } 60% { transform: translateX(0); } 70% { transform: translateX(70px); } 80% { transform: translateX(0); } 90% { transform: translateX(0); } 100% { transform: translateX(0); } } #div14 { grid-area: div14; animation: div14 10s both infinite; } @keyframes div14 { 0% { transform: translateX(0); } 10% { transform: translateX(35px); } 20% { transform: translateX(0); } 30% { transform: translateX(0); } 40% { transform: translateX(35px); } 50% { transform: translateX(0); } 60% { transform: translateX(0); } 70% { transform: translateX(35px); } 80% { transform: translateX(0); } 90% { transform: translateX(0); } 100% { transform: translateX(0); } } #div15 { grid-area: div15; } /*----------------------------------------*/ /* scroll to top /*----------------------------------------*/ .scroll-top { position: fixed; right: 30px; bottom: 30px; height: clamp(36px, 2.5vw, 64px); width: clamp(36px, 2.5vw, 64px); cursor: pointer; display: grid; justify-content: center; align-content: center; border-radius: 50%; box-shadow: inset 0 0 0 2px RGBA(0, 0, 0, 0.2); z-index: 9999; opacity: 0; visibility: hidden; transform: translateY(15px); -webkit-transition: all 200ms linear; transition: all 200ms linear; } .scroll-top::after { position: absolute; content: ""; font-family: "Font Awesome 5 Pro" !important; text-align: center; font-size: clamp(14.5px, 1.042vw, 32px); color: #FDDC8B; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 100%; cursor: pointer; display: block; z-index: 1; -webkit-transition: all 200ms linear; transition: all 200ms linear; } .scroll-top .scroll-top__circle path { stroke: #FDDC8B; stroke-width: 4; fill: none; box-sizing: border-box; -webkit-transition: all 200ms linear; transition: all 200ms linear; } .scroll-top--active { opacity: 1; visibility: visible; transform: translateY(0); } /*----------------------------------------*/ /* Button CSS START /*----------------------------------------*/ .cus-btn { position: relative; transition: 0.5s ease-in-out; display: flex; align-items: center; gap: 12px; overflow: hidden; height: clamp(40px, 2.917vw, 64px); padding: 0 clamp(20px, 1.66vw, 48px); text-transform: uppercase; border: none; color: #1e1f20; flex-shrink: 0; width: fit-content; font-size: clamp(13px, 0.833vw, 22px); font-weight: 600; box-sizing: border-box; } .cus-btn svg { width: clamp(16px, 1.042vw, 24px); height: clamp(16px, 1.042vw, 24px); } .cus-btn svg path { fill: #1e1f20; transition: 0.5s ease-in-out; } .cus-btn:before { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: -2; background-color: #fafafa !important; transform: translateX(0); box-sizing: border-box; transition: 0.5s ease-in-out; } .cus-btn:after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: -1; background: linear-gradient(90deg, rgba(253, 220, 139, 0.95) 0%, rgba(40, 208, 232, 0.95) 100%); transform: translateX(-100%); box-sizing: border-box; transition: 0.5s ease-in-out; } .cus-btn:hover { color: #141414; box-sizing: border-box; transition: 0.5s ease-in-out; } .cus-btn:hover svg path { fill: #141414; transition: 0.5s ease-in-out; } .cus-btn:hover:after { transform: translateX(0); box-sizing: border-box; transition: 0.5s ease-in-out; } .cus-btn-sec { position: relative; display: flex; align-items: center; gap: 12px; overflow: hidden; height: clamp(40px, 2.917vw, 64px); padding: 0 clamp(20px, 1.66vw, 48px); text-transform: uppercase; border: none; color: #1e1f20; background: #fafafa; flex-shrink: 0; width: fit-content; font-size: clamp(13px, 0.833vw, 22px); font-weight: 600; box-sizing: border-box; transition: all 0.5s ease-in; } .cus-btn-sec svg { width: clamp(16px, 1.042vw, 24px); height: clamp(16px, 1.042vw, 24px); } .cus-btn-sec svg path { fill: #1e1f20; transition: 0.5s ease-in; } .cus-btn-sec:hover { color: #141414; box-sizing: border-box; transition: all 0.5s ease-in; background: #FDDC8B; } .cus-btn-sec:hover svg path { fill: #141414; transition: all 0.5s ease-in; } .form-group { position: relative; width: 100%; } .form-group input[type=date], .form-group input[type=text], .form-group input[type=email], .form-group input[type=file], .form-group input[type=number], .form-group input[type=password], .form-group input[type=search], .form-group input[type=submit], .form-group input[type=tel], .form-group textarea, .form-group .cus-form-control { width: 100%; background: #141414; padding: 0 clamp(12px, 0.83vw, 24px); height: clamp(46px, 2.917vw, 72px); color: #92949f; font-weight: 400; display: flex; border-radius: 0px; align-items: center; border: 1px solid; border-image-slice: 1; border-width: 1px; border-image-source: linear-gradient(90deg, rgba(253, 220, 139, 0.95) 0%, rgba(40, 208, 232, 0.95) 100%); font-size: clamp(13px, 0.833vw, 22px); } @media (max-width: 991px) { .form-group input[type=date], .form-group input[type=text], .form-group input[type=email], .form-group input[type=file], .form-group input[type=number], .form-group input[type=password], .form-group input[type=search], .form-group input[type=submit], .form-group input[type=tel], .form-group textarea, .form-group .cus-form-control { font-size: clamp(13.5px, 1.778vw, 16px); } } @media (max-width: 767px) { .form-group input[type=date], .form-group input[type=text], .form-group input[type=email], .form-group input[type=file], .form-group input[type=number], .form-group input[type=password], .form-group input[type=search], .form-group input[type=submit], .form-group input[type=tel], .form-group textarea, .form-group .cus-form-control { font-size: clamp(13px, 2.286vw, 14px); } } @media (max-width: 575px) { .form-group input[type=date], .form-group input[type=text], .form-group input[type=email], .form-group input[type=file], .form-group input[type=number], .form-group input[type=password], .form-group input[type=search], .form-group input[type=submit], .form-group input[type=tel], .form-group textarea, .form-group .cus-form-control { font-size: clamp(11.5px, 3.59vw, 14px); } } .form-group input[type=date]:focus, .form-group input[type=text]:focus, .form-group input[type=email]:focus, .form-group input[type=file]:focus, .form-group input[type=number]:focus, .form-group input[type=password]:focus, .form-group input[type=search]:focus, .form-group input[type=submit]:focus, .form-group input[type=tel]:focus, .form-group textarea:focus, .form-group .cus-form-control:focus { color: #92949f; outline: none; background: #141414 !important; border: 1px solid; border-image-slice: 1; border-width: 1px; border-image-source: linear-gradient(90deg, rgba(253, 220, 139, 0.95) 0%, rgba(40, 208, 232, 0.95) 100%); border-radius: 0px; box-shadow: none; } .form-group input[type=date]:hover, .form-group input[type=text]:hover, .form-group input[type=email]:hover, .form-group input[type=file]:hover, .form-group input[type=number]:hover, .form-group input[type=password]:hover, .form-group input[type=search]:hover, .form-group input[type=submit]:hover, .form-group input[type=tel]:hover, .form-group textarea:hover, .form-group .cus-form-control:hover { color: #92949f; border: 1px solid; border-image-slice: 1; border-width: 1px; border-image-source: linear-gradient(90deg, rgba(253, 220, 139, 0.95) 0%, rgba(40, 208, 232, 0.95) 100%); } .form-group input[type=date]::placeholder, .form-group input[type=text]::placeholder, .form-group input[type=email]::placeholder, .form-group input[type=file]::placeholder, .form-group input[type=number]::placeholder, .form-group input[type=password]::placeholder, .form-group input[type=search]::placeholder, .form-group input[type=submit]::placeholder, .form-group input[type=tel]::placeholder, .form-group textarea::placeholder, .form-group .cus-form-control::placeholder { color: #92949f; opacity: 1; } .form-group .error { color: red; letter-spacing: 1.2px; font-size: 13px; } .form-group textarea { height: auto !important; padding-top: 16px; } .newsletter-field { display: flex; justify-content: space-between; align-items: center; padding: 8px 8px 8px 16px; border-radius: 0px; max-width: 528px; border: 1px solid; border-image-slice: 1; border-width: 1px; border-image-source: linear-gradient(90deg, rgba(253, 220, 139, 0.95) 0%, rgba(40, 208, 232, 0.95) 100%); background: transparent; } .newsletter-field .cus-btn { flex-shrink: 0; } .newsletter-field .form-group input[type=date], .newsletter-field .form-group input[type=text], .newsletter-field .form-group input[type=email], .newsletter-field .form-group input[type=number], .newsletter-field .form-group input[type=password], .newsletter-field .form-group input[type=search], .newsletter-field .form-group input[type=submit], .newsletter-field .form-group input[type=tel], .newsletter-field .form-group textarea, .newsletter-field .form-group .cus-form-control { text-transform: uppercase; height: clamp(24px, 2.1vw, 72px); padding: 0; border-radius: 0; border: none; } .newsletter-field .form-group input[type=date]:focus, .newsletter-field .form-group input[type=text]:focus, .newsletter-field .form-group input[type=email]:focus, .newsletter-field .form-group input[type=number]:focus, .newsletter-field .form-group input[type=password]:focus, .newsletter-field .form-group input[type=search]:focus, .newsletter-field .form-group input[type=submit]:focus, .newsletter-field .form-group input[type=tel]:focus, .newsletter-field .form-group textarea:focus, .newsletter-field .form-group .cus-form-control:focus { border: none; } .newsletter-field .form-group input[type=date]:hover, .newsletter-field .form-group input[type=text]:hover, .newsletter-field .form-group input[type=email]:hover, .newsletter-field .form-group input[type=number]:hover, .newsletter-field .form-group input[type=password]:hover, .newsletter-field .form-group input[type=search]:hover, .newsletter-field .form-group input[type=submit]:hover, .newsletter-field .form-group input[type=tel]:hover, .newsletter-field .form-group textarea:hover, .newsletter-field .form-group .cus-form-control:hover { border: none; } .newsletter-field .form-group input[type=date]::placeholder, .newsletter-field .form-group input[type=text]::placeholder, .newsletter-field .form-group input[type=email]::placeholder, .newsletter-field .form-group input[type=number]::placeholder, .newsletter-field .form-group input[type=password]::placeholder, .newsletter-field .form-group input[type=search]::placeholder, .newsletter-field .form-group input[type=submit]::placeholder, .newsletter-field .form-group input[type=tel]::placeholder, .newsletter-field .form-group textarea::placeholder, .newsletter-field .form-group .cus-form-control::placeholder { border: none; } .custom-checkbox { display: inline-flex; align-items: center; gap: 12px; cursor: pointer; user-select: none; font-size: 16px; color: #fafafa; transition: color 0.3s; } .custom-checkbox input[type=checkbox] { display: none; } .custom-checkbox .checkmark { flex-shrink: 0; width: 20px; height: 20px; border: 1px solid #92949f; border-radius: 2.5px; display: flex; align-items: center; justify-content: center; transition: background-color 0.3s, border-color 0.3s, transform 0.3s; transform-style: preserve-3d; } .custom-checkbox .checkmark::before { content: "✓"; font-size: 14px; color: transparent; transition: color 0.3s, transform 0.3s; } .custom-checkbox input[type=checkbox]:checked + .checkmark { background-color: #141414; border-color: #141414; transform: scale(1.1) rotateZ(360deg) rotateY(360deg); } .custom-checkbox input[type=checkbox]:checked + .checkmark::before { color: #fafafa; } .custom-checkbox:hover .checkmark { transform: scale(1.05); } .custom-checkbox input[type=checkbox]:focus + .checkmark { box-shadow: 0 0 3px 2px rgba(0, 0, 0, 0.2); outline: none; } .custom-checkbox .checkmark, .custom-checkbox input[type=checkbox]:checked + .checkmark { transition: background-color 1.3s, border-color 1.3s, color 1.3s, transform 0.3s; } .file-drop-area { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; max-width: 100%; height: clamp(48px, 3.33vw, 72px); border: 1px dashed #eaeaec !important; transition: 0.2s; } .file-drop-area.is-active { background-color: rgba(255, 255, 255, 0.05); } .file-drop-area .file-msg { font-weight: 400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .file-drop-area .file-input { position: absolute; left: 0; top: 0; height: 100%; width: 100%; cursor: pointer; opacity: 0; } .file-drop-area .file-input:focus { outline: none; } .filter-row .search-filters { z-index: 9; position: relative; width: 100%; display: flex; gap: clamp(16px, 1.25vw, 36px); background: #1e1f20; padding: clamp(14px, 0.83vw, 24px) clamp(16px, 1.25vw, 32px); border-radius: 0px; } @media (max-width: 767px) { .filter-row .search-filters { flex-wrap: wrap; } } .filter-row .search-filters .cus-btn { flex-shrink: 0; } @media (max-width: 767px) { .filter-row .search-filters .cus-btn { margin: 0 auto; } } .detail-form textarea { border: 1px solid #141516; border-radius: 10px; } .nice-select { -webkit-tap-highlight-color: transparent; background-color: transparent; border-radius: 0px; border: none; box-sizing: border-box; clear: both; cursor: pointer; display: block; float: left; outline: none; padding-left: 0px; padding-right: 24px; position: relative; text-align: left !important; -webkit-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; white-space: nowrap; width: auto; } .nice-select:hover { border-color: #dbdbdb; } .nice-select:active, .nice-select.open, .nice-select:focus { border-color: #999; } .nice-select:after { border-bottom: 2px solid #45474f; border-right: 2px solid #45474f; content: ""; display: block; width: clamp(8px, 0.53vw, 12px); height: clamp(8px, 0.53vw, 12px); margin-top: clamp(-5px, -0.365vw, -8px); pointer-events: none; position: absolute; right: clamp(12px, 0.83vw, 24px); top: 50%; -webkit-transform-origin: 66% 66%; -ms-transform-origin: 66% 66%; transform-origin: 66% 66%; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); -webkit-transition: all 0.15s ease-in-out; transition: all 0.15s ease-in-out; } .nice-select.open:after { -webkit-transform: rotate(-135deg); -ms-transform: rotate(-135deg); transform: rotate(-135deg); } .nice-select.open .list { opacity: 1; pointer-events: auto; -webkit-transform: scale(1) translateY(0); -ms-transform: scale(1) translateY(0); transform: scale(1) translateY(0); } .nice-select.disabled { border-color: #ededed; color: #999; pointer-events: none; } .nice-select.disabled:after { border-color: #cccccc; } .nice-select.wide { width: 100%; } .nice-select.wide .list { left: 0 !important; right: 0 !important; } .nice-select.right { float: right; } .nice-select.right .list { left: auto; right: 0; } .nice-select.small { font-size: 12px; height: 36px; line-height: 34px; } .nice-select.small:after { height: 4px; width: 4px; } .nice-select.small .option { line-height: 34px; min-height: 34px; } .nice-select .list { width: 100%; background: #1e1f20; box-shadow: 2px 1px 5px 0px rgba(0, 0, 0, 0.05), 7px 6px 9px 0px rgba(0, 0, 0, 0.04), 15px 13px 12px 0px rgba(0, 0, 0, 0.03), 26px 23px 14px 0px rgba(0, 0, 0, 0.01), 41px 37px 15px 0px rgba(0, 0, 0, 0); border-radius: 0; box-sizing: border-box; margin-top: 4px; opacity: 0; overflow: hidden; padding: 0; pointer-events: none; position: absolute; top: 100%; left: 0; -webkit-transform-origin: 50% 0; -ms-transform-origin: 50% 0; transform-origin: 50% 0; -webkit-transform: scale(0.75) translateY(-21px); -ms-transform: scale(0.75) translateY(-21px); transform: scale(0.75) translateY(-21px); -webkit-transition: all 0.2s cubic-bezier(0.5, 0, 0, 1.25), opacity 0.15s ease-out; transition: all 0.2s cubic-bezier(0.5, 0, 0, 1.25), opacity 0.15s ease-out; z-index: 99; } .nice-select .list:hover .option:not(:hover) { background-color: transparent !important; } .nice-select .option { cursor: pointer; font-weight: 400; line-height: clamp(32px, 2.083vw, 45px); list-style: none; min-height: clamp(32px, 2.083vw, 45px); outline: none; color: #92949f; padding: 0 clamp(12px, 0.83vw, 24px); text-align: left; -webkit-transition: all 0.2s; transition: all 0.2s; } .nice-select .option:hover, .nice-select .option.focus, .nice-select .option.selected.focus { background: rgba(253, 220, 139, 0.2); color: #FDDC8B; } .nice-select .option.disabled { background-color: transparent; color: #999; cursor: default; } .no-csspointerevents .nice-select .list { display: none; } .no-csspointerevents .nice-select.open .list { display: block; } .pagination { display: flex; align-items: center; margin-bottom: 0; gap: clamp(6px, 0.43vw, 12px); justify-content: center; } .pagination li a { width: clamp(32px, 2.083vw, 48px); height: clamp(32px, 2.083vw, 48px); display: grid; align-content: center; justify-content: center; background: #fafafa; border-radius: 0px; color: #1e1f20; line-height: 100%; transition: all 0.5s ease-in-out; padding: 0; } .pagination li a svg { transition: all 0.5s ease-in-out; width: clamp(32px, 2.083vw, 48px); height: clamp(32px, 2.083vw, 48px); } .pagination li a svg path { stroke: #1e1f20; transition: all 0.5s ease-in-out; } .pagination li a.active, .pagination li a:hover { background: #FDDC8B; transition: all 0.5s ease-in-out; } /*------------------------- layouts -------------------------*/ .menu__block { position: relative; width: 100%; z-index: 500; display: flex; align-items: center; justify-content: space-between; padding: clamp(10px, 0.83vw, 24px) 0; } @media (max-width: 992px) { .menu__block .main-menu__logo img { width: 90%; } } @media (max-width: 767px) { .menu__block .main-menu__logo img { width: 80%; } } .menu__block .menu-link { display: flex; gap: 20px; } .menu__block .menu-link .hamburger { background: transparent; border: none; cursor: pointer; position: relative; z-index: 600; } @media (max-width: 490px) { .menu__block .menu-link .hamburger { padding: 0; } } .menu__block .menu-link .hamburger svg { height: 3em; transition: transform 600ms cubic-bezier(0.4, 0, 0.2, 1); } .menu__block .menu-link .hamburger .line { fill: none; stroke: #fafafa; stroke-linecap: round; stroke-linejoin: round; stroke-width: 3; transition: stroke-dasharray 600ms cubic-bezier(0.4, 0, 0.2, 1), stroke-dashoffset 600ms cubic-bezier(0.4, 0, 0.2, 1); } .menu__block .menu-link .hamburger .line-top-bottom { stroke-dasharray: 12 63; } .menu__block .menu-link .hamburger.show svg { transform: rotate(-45deg); } .menu__block .menu-link .hamburger.show .line-top-bottom { stroke-dasharray: 20 300; stroke-dashoffset: -32.42; } .menu__block .menu-link .toggle-menu { position: absolute; z-index: 99; right: 0; top: 8px; padding: 24px; min-width: 180px; text-align: end; pointer-events: none; transition: all 0.6s ease-in-out; } @media (max-width: 575px) { .menu__block .menu-link .toggle-menu { min-width: 210px; } } .menu__block .menu-link .toggle-menu .menu-bg { position: absolute; inset: 0; z-index: 1; overflow: hidden; border-radius: 10px; } .menu__block .menu-link .toggle-menu .menu-bg .site-header__bg { position: absolute; top: 0; left: 0; bottom: 0; right: 0; z-index: -1; transition: transform 1.5s cubic-bezier(0.86, 0, 0.07, 1); pointer-events: none; overflow: hidden; border-radius: 15px; transition: transform 1.5s cubic-bezier(0.23, 1, 0.32, 1); transform: translate(-2px, 2px) scale(1) rotate(1deg); cursor: pointer; transform-origin: 100% 0; } .menu__block .menu-link .toggle-menu .menu-bg .site-header__bg::before, .menu__block .menu-link .toggle-menu .menu-bg .site-header__bg::after { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: #fafafa; content: ""; pointer-events: none; transition: transform 1.5s cubic-bezier(0.23, 1, 0.32, 1); transform: translate(130px, 0) rotate(15deg) scale(1.3, 0); transform-origin: 100% 0; } .menu__block .menu-link .toggle-menu .menu-bg .site-header__bg::before { transition-delay: 0.05s; } .menu__block .menu-link .toggle-menu .menu-bg .site-header__bg::after { background: #fafafa; } .menu__block .menu-link .toggle-menu .toggle-link { position: relative; z-index: 2; transition: all 0.5s ease-in; } .menu__block .menu-link .toggle-menu .toggle-link .links { position: relative; padding-top: clamp(32px, 2.5vw, 64px); display: flex; align-items: flex-end; flex-direction: column; gap: 8px; transition: all 0.6s ease-in-out; } .menu__block .menu-link .toggle-menu .toggle-link .links > li { color: #141414; font-family: "Poppins", sans-serif; text-transform: capitalize; opacity: 0; transition: transform 0.75s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.4s cubic-bezier(0.23, 1, 0.32, 1), color 0.5s; transition-delay: 0s; will-change: transform; transform-origin: 0 100%; transform: translateY(0.25em) scale(0.95); } .menu__block .menu-link .toggle-menu .toggle-link .links > li a { pointer-events: none; transition: all 0.5s ease-in-out; color: #141414; font-size: clamp(33px, 2.865vw, 110px); /* 55px */ font-weight: 500; line-height: 120%; } @media (max-width: 991px) { .menu__block .menu-link .toggle-menu .toggle-link .links > li a { font-size: clamp(27px, 3.78vw, 36px); } } @media (max-width: 767px) { .menu__block .menu-link .toggle-menu .toggle-link .links > li a { font-size: clamp(24px, 4.219vw, 30px); } } @media (max-width: 575px) { .menu__block .menu-link .toggle-menu .toggle-link .links > li a { font-size: clamp(20px, 5.897vw, 26px); } } .menu__block .menu-link .toggle-menu .toggle-link .links > li a.active { color: #28D0E8; } .menu__block .menu-link .toggle-menu .toggle-link .links > li a:hover { color: #28D0E8; transition: all 0.5s ease-in-out; } .menu__block .menu-link .toggle-menu .toggle-link .links > li.dropdown { position: relative; } .menu__block .menu-link .toggle-menu .toggle-link .links > li.dropdown a { display: flex; gap: 8px; align-items: center; justify-content: flex-end; } .menu__block .menu-link .toggle-menu .toggle-link .links > li.dropdown a:hover button { color: #28D0E8; transition: all 0.5s ease-in-out; } .menu__block .menu-link .toggle-menu .toggle-link .links > li.dropdown .toggle-menu-2 { position: absolute; right: 100%; min-width: 300px; top: 10%; padding: 24px; text-align: end; border-radius: 10px; pointer-events: none; overflow: hidden; transition: all 0.6s ease-in-out; } @media (max-width: 575px) { .menu__block .menu-link .toggle-menu .toggle-link .links > li.dropdown .toggle-menu-2 { min-width: 200px; } } .menu__block .menu-link .toggle-menu .toggle-link .links > li.dropdown .toggle-menu-2 .site-header__bg-2 { position: absolute; top: 0; left: 0; bottom: 0; right: 0; z-index: -1; transition: transform 1.5s cubic-bezier(0.86, 0, 0.07, 1); pointer-events: none; overflow: hidden; border-radius: 15px; transition: transform 1.5s cubic-bezier(0.23, 1, 0.32, 1); transform: translate(-2px, 2px) scale(1) rotate(1deg); cursor: pointer; transform-origin: 100% 0; } .menu__block .menu-link .toggle-menu .toggle-link .links > li.dropdown .toggle-menu-2 .site-header__bg-2::before, .menu__block .menu-link .toggle-menu .toggle-link .links > li.dropdown .toggle-menu-2 .site-header__bg-2::after { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: #fafafa; content: ""; pointer-events: none; transition: transform 1.5s cubic-bezier(0.23, 1, 0.32, 1); transform: translate(130px, 0) rotate(15deg) scale(1.3, 0); transform-origin: 100% 0; } .menu__block .menu-link .toggle-menu .toggle-link .links > li.dropdown .toggle-menu-2 .site-header__bg-2::before { transition-delay: 0.05s; } .menu__block .menu-link .toggle-menu .toggle-link .links > li.dropdown .toggle-menu-2 .site-header__bg-2::after { background: #fafafa; } .menu__block .menu-link .toggle-menu .toggle-link .links > li.dropdown .toggle-menu-2 .toggle-link-2 { position: relative; overflow: hidden; transition: all 0.5s ease-in; } .menu__block .menu-link .toggle-menu .toggle-link .links > li.dropdown .toggle-menu-2 .toggle-link-2 .links-2 { padding-top: 0; position: relative; display: flex; align-items: flex-end; flex-direction: column; gap: 8px; transition: all 0.6s ease-in-out; } .menu__block .menu-link .toggle-menu .toggle-link .links > li.dropdown .toggle-menu-2 .toggle-link-2 .links-2 li { color: #141414; font-family: "Poppins", sans-serif; text-transform: capitalize; opacity: 0; transition: transform 0.75s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.4s cubic-bezier(0.23, 1, 0.32, 1), color 0.5s; transition-delay: 0s; will-change: transform; transform-origin: 0 100%; transform: translateY(0.25em) scale(0.95); } .menu__block .menu-link .toggle-menu .toggle-link .links > li.dropdown .toggle-menu-2 .toggle-link-2 .links-2 li a { pointer-events: none; transition: all 0.5s ease-in-out; color: #141414; font-size: clamp(24px, 1.875vw, 72px); /* 36px */ font-weight: 500; line-height: 120%; } @media (max-width: 991px) { .menu__block .menu-link .toggle-menu .toggle-link .links > li.dropdown .toggle-menu-2 .toggle-link-2 .links-2 li a { font-size: clamp(24px, 3.493vw, 28px); } } @media (max-width: 767px) { .menu__block .menu-link .toggle-menu .toggle-link .links > li.dropdown .toggle-menu-2 .toggle-link-2 .links-2 li a { font-size: clamp(22px, 4.23vw, 24px); } } @media (max-width: 575px) { .menu__block .menu-link .toggle-menu .toggle-link .links > li.dropdown .toggle-menu-2 .toggle-link-2 .links-2 li a { font-size: clamp(20px, 6.575vw, 22px); } } .menu__block .menu-link .toggle-menu .toggle-link .links > li.dropdown .toggle-menu-2 .toggle-link-2 .links-2 li a.active { color: #28D0E8; } .menu__block .menu-link .toggle-menu .toggle-link .links > li.dropdown .toggle-menu-2 .toggle-link-2 .links-2 li a:hover { color: #28D0E8; transition: all 0.5s ease-in-out; } .menu__block .menu-link .toggle-menu .toggle-link .links > li.dropdown.dropdown-active > a { transition: all 0.5s ease-in-out; color: #28D0E8; } .menu__block .menu-link .toggle-menu .toggle-link .links > li.dropdown.dropdown-active .toggle-menu-2 { z-index: 150; pointer-events: auto; } .menu__block .menu-link .toggle-menu .toggle-link .links > li.dropdown.dropdown-active .toggle-menu-2 .site-header__bg-2 { transform: translate(calc(3vw / 2), calc(calc(3vw / 2) * -1)) scale(1.1); } .menu__block .menu-link .toggle-menu .toggle-link .links > li.dropdown.dropdown-active .toggle-menu-2 .site-header__bg-2::before, .menu__block .menu-link .toggle-menu .toggle-link .links > li.dropdown.dropdown-active .toggle-menu-2 .site-header__bg-2::after { transform: translateX(0) rotate(0) scale(1.3, 1); } .menu__block .menu-link .toggle-menu .toggle-link .links > li.dropdown.dropdown-active .toggle-menu-2 .site-header__bg-2::after { transition-delay: 0.5s; } .menu__block .menu-link .toggle-menu .toggle-link .links > li.dropdown.dropdown-active .toggle-menu-2 .site-header__bg-2::before { transition-delay: 0s; } .menu__block .menu-link .toggle-menu .toggle-link .links > li.dropdown.dropdown-active .toggle-menu-2 .links-2 li { opacity: 1; transition: transform 1.1s cubic-bezier(0.23, 1, 0.32, 1), opacity 1.3s cubic-bezier(0.23, 1, 0.32, 1), color 0.5s; transition-delay: calc(1 * 0.065s + 0.1s); } .menu__block .menu-link .toggle-menu .toggle-link .links > li.dropdown.dropdown-active .toggle-menu-2 .links-2 li a { pointer-events: auto; } .menu__block.menu-active .menu-link .hamburger .line { stroke: #141414; } .menu__block.menu-active .menu-link .toggle-menu { z-index: 150; pointer-events: auto; } .menu__block.menu-active .menu-link .toggle-menu .site-header__bg { transform: translate(calc(3vw / 2), calc(calc(3vw / 2) * -1)) scale(1.1); } .menu__block.menu-active .menu-link .toggle-menu .site-header__bg::before, .menu__block.menu-active .menu-link .toggle-menu .site-header__bg::after { transform: translateX(0) rotate(0) scale(1.3, 1); } .menu__block.menu-active .menu-link .toggle-menu .site-header__bg::after { transition-delay: 0.5s; } .menu__block.menu-active .menu-link .toggle-menu .site-header__bg::before { transition-delay: 0s; } .menu__block.menu-active .menu-link .toggle-menu .links li { opacity: 1; transition: transform 1.1s cubic-bezier(0.23, 1, 0.32, 1), opacity 1.3s cubic-bezier(0.23, 1, 0.32, 1), color 0.5s; transition-delay: calc(1 * 0.065s + 0.1s); } .menu__block.menu-active .menu-link .toggle-menu .links li a { pointer-events: auto; } footer { background-color: #1e1f20; } footer .form-group input { background: #1e1f20 !important; } footer .form-group input[type=email]:focus { background: #1e1f20 !important; } footer .top-block { border-bottom: 1px solid; border-image-slice: 1; border-width: 1px; border-image-source: linear-gradient(90deg, rgba(253, 220, 139, 0.95) 0%, rgba(40, 208, 232, 0.95) 100%); } footer .footer-widget { position: relative; } footer .footer-widget ul { display: flex; flex-direction: column; gap: 12px; } footer .footer-widget ul.contact-list { gap: 8px; } footer .footer-widget ul li a { display: flex; align-items: center; gap: 8px; color: #eaeaec; transition: all 0.5s ease-in-out; } footer .footer-widget ul li a:hover { color: #28D0E8; transition: all 0.5s ease-in-out; } footer .footer-widget ul li a i { background: linear-gradient(90deg, rgba(253, 220, 139, 0.95) 0%, rgba(40, 208, 232, 0.95) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-size: clamp(16px, 1.25vw, 32px); } .hero-banner { width: 100%; } .hero-banner .content { background: url(../media/banner/banner-bg-vector.png) no-repeat; background-position: center center; background-size: 77.292vw; } @media (max-width: 992px) { .hero-banner .content { background-position: right 116px; background-size: 71.292vw; padding-top: 0 !important; } } .hero-banner .content .left-block { position: relative; z-index: 10; } .hero-banner .content .text-block { display: flex; align-items: center; } @media (max-width: 492px) { .hero-banner .content .text-block { flex-direction: column; align-items: flex-start; gap: 16px; margin-bottom: 16px; } } .hero-banner .content .text-block .description { max-width: clamp(280px, 16.25vw, 400px); background: rgba(30, 31, 32, 0.5); padding: 12px; } @media (max-width: 492px) { .hero-banner .content .text-block .description { margin-left: 10%; } } .hero-banner .content .scroll-down { display: flex; align-items: center; height: clamp(40px, 2.917vw, 64px); align-items: center; } .hero-banner .content .scroll-down svg { stroke: #fafafa; transition: all 0.5s ease-in-out; } .hero-banner .content .scroll-down:hover { stroke: #FDDC8B; transition: all 0.5s ease-in-out; } .hero-banner .content .reviews-block { position: relative; margin-bottom: clamp(40px, 5.208vw, 200px); } @media (max-width: 992px) { .hero-banner .content .reviews-block { display: none; } } .hero-banner .content .reviews-block .rating { display: flex; align-items: center; gap: 4px; } .hero-banner .content .reviews-block .rating i { color: #FDDC8B; } .hero-banner .content .reviews-block .slider { position: relative; width: 100%; height: 250px; perspective: 100px; } .hero-banner .content .reviews-block .slider .item { position: absolute; width: 100%; height: auto; display: none; border: 1px solid; border-image-slice: 1; border-width: 1px; border-image-source: linear-gradient(90deg, rgba(253, 220, 139, 0.95) 0%, rgba(40, 208, 232, 0.95) 100%); background: #1e1f20; padding: clamp(24px, 1.66vw, 42px) clamp(16px, 1.25vw, 32px); } .hero-banner .content .reviews-block .slider .item:nth-child(5) { left: -20px; top: 20px; display: block; } .hero-banner .content .reviews-block .slider .item:nth-child(4) { left: 0px; top: 0px; display: block; } .hero-banner .content .reviews-block .slider .item:nth-child(3) { left: 40px; top: -40px; } .hero-banner .content .reviews-block .slider .item:nth-child(2) { left: 60px; top: -60px; } .hero-banner .content .reviews-block .slider .item:nth-child(1) { left: 80px; top: -80px; } .portfolio { position: relative; z-index: 100; } .portfolio .nav-pills { gap: clamp(14px, 1.25vw, 32px); border-bottom: 1px solid; border-image-slice: 1; border-width: 1px; border-image-source: linear-gradient(90deg, rgba(253, 220, 139, 0.95) 0%, rgba(40, 208, 232, 0.95) 100%); } .portfolio .nav-pills .nav-link { font-weight: 500; color: #fafafa; padding: clamp(6px, 0.42vw, 10px) clamp(12px, 0.83vw, 20px); border: 1px solid #fafafa; border-radius: 0; background: transparent; transition: all 0.5s ease-in-out; } .portfolio .nav-pills .nav-link.active, .portfolio .nav-pills .nav-link:hover { border: 1px solid #45474f; background: #45474f; } .portfolio .tab-content { padding-left: clamp(16px, 1.25vw, 32px); border-left: 1px solid; border-image-slice: 1; border-width: 1px; border-image-source: linear-gradient(180deg, rgba(253, 220, 139, 0.95) 0%, rgba(40, 208, 232, 0.95) 100%); } .portfolio .portfolio-content-2 .tab-content { padding-left: 0; border-left: 0; } .feedback { position: relative; } .feedback .img-block { position: relative; width: fit-content; } .feedback .img-block .feedback-user a { position: absolute; z-index: 10; } .feedback .img-block .feedback-user a:nth-child(1) { top: 0; left: 50%; transform: translateX(-50%); } .feedback .img-block .feedback-user a:nth-child(2) { top: 95px; right: 0; } .feedback .img-block .feedback-user a:nth-child(3) { left: 20%; bottom: 52%; } .feedback .img-block .feedback-user a:nth-child(4) { right: 30%; bottom: 14%; } .feedback .img-block .feedback-user a img { width: 52px; height: 70px; -webkit-transition: all 0.4s linear 0s; transition: all 0.4s linear 0s; } @media (max-width: 575px) { .feedback .img-block .feedback-user a img { width: 39px; height: 52.5px; } } .feedback .img-block .feedback-user a.active img { -webkit-transform: scale(1.3); transform: scale(1.3); -webkit-transition: all 0.4s linear 0s; transition: all 0.4s linear 0s; } .feedback .feedback-user-nav { display: none; } .feedback .feedback-slider .col-12 { width: clamp(520px, 39.458vw, 800px); } .feedback .feedback-card { position: relative; padding: clamp(16px, 1.25vw, 32px); background-color: #1e1f20; border: 1px solid; border-image-slice: 1; border-width: 1px; border-image-source: linear-gradient(90deg, rgba(253, 220, 139, 0.95) 0%, rgba(40, 208, 232, 0.95) 100%); } .feedback .feedback-card .rating { position: relative; width: fit-content; } .feedback .feedback-card .rating span { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .feedback .feedback-card .user { display: flex; align-items: center; gap: clamp(12px, 0.83vw, 24px); } .feedback .feedback-card .user img { border-radius: clamp(48px, 4.167vw, 96px); width: clamp(48px, 4.167vw, 96px); height: clamp(48px, 4.167vw, 96px); } .coming-soon { position: relative; height: 100vh; align-content: center; } .coming-soon .newsletter-field { max-width: 530px; margin: 0 auto; } @media (max-width: 767px) { .coming-soon .newsletter-field { max-width: 450px; } } .coming-soon .countdown { display: flex; justify-content: center; align-items: center; gap: clamp(10px, 0.83vw, 24px); } @media (max-width: 492px) { .coming-soon .countdown { flex-wrap: wrap; } } .coming-soon .countdown li { width: clamp(80px, 6.25vw, 280px); height: clamp(80px, 6.25vw, 280px); background: #141414; border-radius: 0px; border: 1px solid; border-image-slice: 1; border-width: 1px; border-image-source: linear-gradient(90deg, rgba(253, 220, 139, 0.95) 0%, rgba(40, 208, 232, 0.95) 100%); display: grid; justify-content: center; align-content: center; } @media (max-width: 492px) { .coming-soon .countdown li { width: 64px; height: 64px; } } .coming-soon .countdown li p { font-weight: 500; line-height: 120%; } .process { position: relative; } .process .process-content .img-block { width: 100%; height: clamp(250px, 29.167vw, 850px); position: relative; } .process .process-content .img-block .process-image { position: absolute; left: 0; bottom: 0; width: 100%; height: 100%; object-position: center; object-fit: cover; } .process .text-block { display: flex; flex-direction: column; gap: clamp(6px, 0.63vw, 16px); border-left: 1px solid #FDDC8B; width: 100%; height: 100%; } .process .text-block .block { border-left: 1px solid #FDDC8B; overflow: hidden; display: flex; padding: clamp(8px, 0.938vw, 24px) 0 0 clamp(16px, 2.083vw, 80px); margin-left: -1px; flex-direction: column; flex-shrink: 0; } .process .text-block .block .title { color: #92949f; margin-bottom: clamp(8px, 0.938vw, 24px); cursor: pointer; transition: all 0.5s ease-in-out; } .process .text-block .block p { opacity: 0; visibility: hidden; height: 0; transition: all 0.5s ease-in-out; } .process .text-block .block.active { border-color: #28D0E8; } .process .text-block .block.active .title { color: #fafafa; transition: all 0.5s ease-in-out; } .process .text-block .block.active p { opacity: 1; visibility: visible; height: auto; transition: 0.8s all ease-in; } .process .text-block .block:hover .title { color: #fafafa; } .about { background: url(../media/backgrounds/about-bg-object.png) no-repeat; background-size: contain; background-position: center bottom 6.667vw; position: relative; z-index: 100; } .about .content { position: relative; } .about .content p { width: 51%; } @media (max-width: 992px) { .about .content p { width: 75%; } } @media (max-width: 767px) { .about .content p { width: 85%; } } @media (max-width: 575px) { .about .content p { width: 92%; } } .about .empty-space { height: 20.26vw; } .about-2 { background: url(../media/backgrounds/about-bg.png) no-repeat; background-size: cover; background-position: center; } .about-2 .content { position: relative; } .blog-card .image-block { overflow: hidden; height: 100%; object-fit: cover; } .blog-card .image-block img { height: 100%; object-fit: cover; -webkit-transition: all 0.6s linear 0s; transition: all 0.6s linear 0s; } .blog-card .text-block { padding: clamp(16px, 1.25vw, 32px); background-color: #1e1f20; } .blog-card .text-block .ab-blog { display: flex; gap: clamp(6px, 0.63vw, 12px); align-items: center; } .blog-card .text-block .ab-blog span { border: 1px solid #fafafa; font-size: 14px; line-height: 120%; padding: clamp(6px, 0.42vw, 10px) clamp(12px, 0.83vw, 20px); } .blog-card .text-block a, .blog-card .text-block p { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; } .blog-card .text-block .blog-btn { display: flex; align-items: center; gap: 12px; transition: all 0.5s ease-in-out; width: fit-content; font-size: clamp(13px, 0.833vw, 22px); font-weight: 600; color: #FDDC8B; } .blog-card .text-block .blog-btn svg { width: clamp(16px, 1.042vw, 24px); height: clamp(16px, 1.042vw, 24px); } .blog-card .text-block .blog-btn svg path { fill: #FDDC8B; stroke: #FDDC8B; transition: 0.5s ease-in-out; } .blog-card .text-block .blog-btn:hover { gap: 16px; transition: all 0.5s ease-in-out; } .blog-card:hover { box-shadow: 0px 6px 12px 0px rgba(0, 0, 0, 0.12); } .blog-card:hover .image-block img { -webkit-transform: scale(1.05); transform: scale(1.05); -webkit-transition: all 0.6s linear 0s; transition: all 0.6s linear 0s; } .blog-detail .top-row { border-bottom: 1px solid; border-image-slice: 1; border-width: 1px; border-image-source: linear-gradient(90deg, rgba(253, 220, 139, 0.95) 0%, rgba(40, 208, 232, 0.95) 100%); } .blog-detail .top-row ul { display: flex; align-items: center; gap: clamp(16px, 1.25vw, 32px); } .blog-detail .top-row ul li span { border: 1px solid #fafafa; font-size: 14px; line-height: 120%; padding: clamp(6px, 0.42vw, 10px) clamp(12px, 0.83vw, 20px); } .blog-detail .top-row .social { border: 1px solid #fafafa; padding: clamp(6px, 0.42vw, 10px) clamp(12px, 0.83vw, 20px); display: flex; align-items: center; gap: clamp(4px, 0.32vw, 8px); } .blog-detail .top-row .social ul { display: flex; align-items: center; gap: 0; } .blog-detail .top-row .social ul li a { width: clamp(24px, 1.66vw, 42px); height: clamp(24px, 1.66vw, 42px); display: grid; align-items: center; justify-content: center; } .blog-detail .top-row .social ul li a svg { width: clamp(16px, 1vw, 26px); height: clamp(16px, 1vw, 26px); } .blog-detail .top-row .social ul li a svg path { fill: #fafafa; transition: all 0.5s ease-in-out; } .blog-detail .top-row .social ul li a:hover svg path { fill: #FDDC8B; transition: all 0.5s ease-in-out; } .title-banner { display: grid; justify-content: center; align-items: center; background: url("../media/backgrounds/title-banner.html"); background-repeat: no-repeat; background-size: cover; height: 200px; } @media (max-width: 575px) { .title-banner { height: 160px; } } .sidebar { border: 1px solid; border-image-slice: 1; border-width: 1px; border-image-source: linear-gradient(90deg, rgba(253, 220, 139, 0.95) 0%, rgba(40, 208, 232, 0.95) 100%); padding: clamp(12px, 0.83vw, 20px); } .sidebar .blogs-list { display: flex; flex-direction: column; gap: clamp(16px, 1.25vw, 32px); } .sidebar .blogs-list li a { display: flex; align-items: start; gap: clamp(12px, 0.83vw, 20px); } .sidebar .blogs-list li a img { width: clamp(56px, 4.043vw, 96px); } .sidebar .blogs-list li a .fs-14 { font-size: clamp(10px, 0.73vw, 17px); } .pricing .pricing-block { position: relative; padding: clamp(20px, 1.25vw, 32px) clamp(16px, 1.25vw, 32px); background: #1e1f20; border: 1px solid; border-image-slice: 1; border-width: 1px; border-image-source: linear-gradient(90deg, #1e1f20 0%, #1e1f20 100%); transition: all 0.5s ease-in-out; margin: 1px; } .pricing .pricing-block:hover { border: 1px solid; border-image-slice: 1; border-width: 1px; border-image-source: linear-gradient(90deg, rgba(253, 220, 139, 0.95) 0%, rgba(40, 208, 232, 0.95) 100%); transition: all 0.5s ease-in-out; } .pricing .pricing-block .title { border: 1px solid #fafafa; line-height: 120%; padding: clamp(6px, 0.42vw, 10px) clamp(12px, 0.83vw, 20px); } .pricing .pricing-block .title-row span { justify-content: space-between; position: relative; display: flex; align-items: center; gap: clamp(16px, 1.25vw, 32px); } .pricing .pricing-block .title-row span::before { content: ""; width: 6px; height: 6px; border-radius: 6px; background: #eaeaec; } .pricing .pricing-block .title-row span::after { content: ""; width: 6px; height: 6px; border-radius: 6px; background: #eaeaec; } .pricing .pricing-block .title-row span p { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; gap: clamp(16px, 1.25vw, 32px); } .pricing .pricing-block .title-row span p::before { content: ""; height: 1px; width: 35%; position: absolute; left: 0; top: 50%; transform: translateY(-50%); background: #eaeaec; } .pricing .pricing-block .title-row span p::after { content: ""; height: 1px; width: 35%; position: absolute; right: 0; top: 50%; transform: translateY(-50%); background: #eaeaec; } .pricing .pricing-block ul { display: flex; flex-direction: column; gap: clamp(12px, 0.83vw, 20px); } .contact-area { position: relative; } .contact-area .form-block { position: relative; padding: clamp(20px, 1.66vw, 40px); background-color: #1e1f20; border: 1px solid; border-image-slice: 1; border-width: 1px; border-image-source: linear-gradient(90deg, rgba(253, 220, 139, 0.95) 0%, rgba(40, 208, 232, 0.95) 100%); } .contact-area .form-block .bottom-row { display: flex; align-items: center; gap: clamp(16px, 1.25vw, 32px); } @media (max-width: 575px) { .contact-area .form-block .bottom-row { flex-wrap: wrap; } } .contact-area .contacts-block { padding: clamp(20px, 1.66vw, 40px); background-color: #1e1f20; } .contact-area .contacts-block .block { display: flex; gap: clamp(12px, 0.83vw, 24px); } .contact-area .contacts-block .block i { background: #FDDC8B; color: #141414; font-size: clamp(16px, 1.25vw, 32px); width: clamp(36px, 2.5vw, 64px); height: clamp(36px, 2.5vw, 64px); display: grid; justify-content: center; align-content: center; } iframe { width: 100%; height: clamp(300px, 31.25vw, 750px); box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.12); border-radius: clamp(16px, 1.25vw, 32px); } /*# sourceMappingURL=app.css.map */