/* ============================================================ [Master Stylesheet] Theme Name: David Personal Portfolio Theme URL: http:// Description: David - Personal Portfolio HTML Template Author: PhotoClerks Version: 1.0.0 ============================================================== */ /* ======================================== *********** TABLE OF CONTENTS ********** ***************** 00. Type CSS ***************** 00.00 Variables Css 00.01 Font Size css 00.02 Common Typography Css 00.03 Reset css ***************** 01. Home CSS ***************** 01.01 header css 01.02 banner css 01.03 digital services css 01.04 hey there css 01.05 creative responsive css 01.06 portfolio css 01.07 brands css 01.08 brands story css 01.09 testimonial css 01.10 blog css ***************** 02. About CSS ***************** 02.01 about banner css 02.02 customers feedback css 02.03 my skills css 02.04 design meets css ***************** 03. Theme Ext CSS ***************** services css questions css navbar css footer css Scroll to Top css breadcrumb css pricing css ========================================*/ @import url("https://fonts.googleapis.com/css2?family=Exo:ital,wght@0,100..900;1,100..900&display=swap"); /* ============================ 00.00 Variables Css =============================== */ :root { /* Font Family */ --body-font: "Exo", sans-serif; --medium: 500; --semibold: 600; --bold: 700; /* ===== Theme Color ====== */ /* Base Color */ --base-h: 166; --base-s: 60%; --base-l: 41%; --base: var(--base-h) var(--base-s) var(--base-l); --base-d-100: var(--base-h) var(--base-s) calc(var(--base-l) - var(--base-l) * 0.1); --base-d-200: var(--base-h) var(--base-s) calc(var(--base-l) - var(--base-l) * 0.2); --base-d-300: var(--base-h) var(--base-s) calc(var(--base-l) - var(--base-l) * 0.3); --base-d-400: var(--base-h) var(--base-s) calc(var(--base-l) - var(--base-l) * 0.4); --base-d-500: var(--base-h) var(--base-s) calc(var(--base-l) - var(--base-l) * 0.5); --base-d-600: var(--base-h) var(--base-s) calc(var(--base-l) - var(--base-l) * 0.6); --base-d-700: var(--base-h) var(--base-s) calc(var(--base-l) - var(--base-l) * 0.7); --base-d-800: var(--base-h) var(--base-s) calc(var(--base-l) - var(--base-l) * 0.8); --base-d-900: var(--base-h) var(--base-s) calc(var(--base-l) - var(--base-l) * 0.9); --base-d-1000: var(--base-h) var(--base-s) calc(var(--base-l) - var(--base-l) * 1); --base-l-100: var(--base-h) calc(var(--base-s)) calc(var(--base-l) + (100% - var(--base-l)) * 0.1); --base-l-200: var(--base-h) calc(var(--base-s)) calc(var(--base-l) + (100% - var(--base-l)) * 0.2); --base-l-300: var(--base-h) calc(var(--base-s)) calc(var(--base-l) + (100% - var(--base-l)) * 0.3); --base-l-400: var(--base-h) calc(var(--base-s)) calc(var(--base-l) + (100% - var(--base-l)) * 0.4); --base-l-500: var(--base-h) calc(var(--base-s)) calc(var(--base-l) + (100% - var(--base-l)) * 0.5); --base-l-600: var(--base-h) calc(var(--base-s)) calc(var(--base-l) + (100% - var(--base-l)) * 0.6); --base-l-700: var(--base-h) calc(var(--base-s)) calc(var(--base-l) + (100% - var(--base-l)) * 0.7); --base-l-800: var(--base-h) calc(var(--base-s)) calc(var(--base-l) + (100% - var(--base-l)) * 0.8); --base-l-900: var(--base-h) calc(var(--base-s)) calc(var(--base-l) + (100% - var(--base-l)) * 0.9); --base-l-1000: var(--base-h) calc(var(--base-s)) calc(var(--base-l) + (100% - var(--base-l)) * 1); /* Base Two Color */ --base-two-h: 280; --base-two-s: 7%; --base-two-l: 8%; --base-two: var(--base-two-h) var(--base-two-s) var(--base-two-l); --base-two-d-100: var(--base-two-h) var(--base-two-s) calc(var(--base-two-l) - var(--base-two-l) * 0.1); --base-two-d-200: var(--base-two-h) var(--base-two-s) calc(var(--base-two-l) - var(--base-two-l) * 0.2); --base-two-d-300: var(--base-two-h) var(--base-two-s) calc(var(--base-two-l) - var(--base-two-l) * 0.3); --base-two-d-400: var(--base-two-h) var(--base-two-s) calc(var(--base-two-l) - var(--base-two-l) * 0.4); --base-two-d-500: var(--base-two-h) var(--base-two-s) calc(var(--base-two-l) - var(--base-two-l) * 0.5); --base-two-d-600: var(--base-two-h) var(--base-two-s) calc(var(--base-two-l) - var(--base-two-l) * 0.6); --base-two-d-700: var(--base-two-h) var(--base-two-s) calc(var(--base-two-l) - var(--base-two-l) * 0.7); --base-two-d-800: var(--base-two-h) var(--base-two-s) calc(var(--base-two-l) - var(--base-two-l) * 0.8); --base-two-d-900: var(--base-two-h) var(--base-two-s) calc(var(--base-two-l) - var(--base-two-l) * 0.9); --base-two-d-1000: var(--base-two-h) var(--base-two-s) calc(var(--base-two-l) - var(--base-two-l) * 1); --base-two-l-100: var(--base-two-h) calc(var(--base-two-s)) calc(var(--base-two-l) + (100% - var(--base-two-l)) * 0.1); --base-two-l-200: var(--base-two-h) calc(var(--base-two-s)) calc(var(--base-two-l) + (100% - var(--base-two-l)) * 0.2); --base-two-l-300: var(--base-two-h) calc(var(--base-two-s)) calc(var(--base-two-l) + (100% - var(--base-two-l)) * 0.3); --base-two-l-400: var(--base-two-h) calc(var(--base-two-s)) calc(var(--base-two-l) + (100% - var(--base-two-l)) * 0.4); --base-two-l-500: var(--base-two-h) calc(var(--base-two-s)) calc(var(--base-two-l) + (100% - var(--base-two-l)) * 0.5); --base-two-l-600: var(--base-two-h) calc(var(--base-two-s)) calc(var(--base-two-l) + (100% - var(--base-two-l)) * 0.6); --base-two-l-700: var(--base-two-h) calc(var(--base-two-s)) calc(var(--base-two-l) + (100% - var(--base-two-l)) * 0.7); --base-two-l-800: var(--base-two-h) calc(var(--base-two-s)) calc(var(--base-two-l) + (100% - var(--base-two-l)) * 0.8); --base-two-l-900: var(--base-two-h) calc(var(--base-two-s)) calc(var(--base-two-l) + (100% - var(--base-two-l)) * 0.9); --base-two-l-1000: var(--base-two-h) calc(var(--base-two-s)) calc(var(--base-two-l) + (100% - var(--base-two-l)) * 1); /* ========== Color Variables ======== */ --white: 0 0% 100%; --body-color: 60 0% 49%; --heading-color: 0 0% 89%; --black: 0 0% 0%; --border-color: 280 7% 8%; --section-bg: 44 56% 95%; /* ======= Box Shadow ========= */ --header-box-shadow: 0px -1px 15px 3px hsl(var(--black) / 0.3); --mobile-box-shadow: 0px -1px 5px 0px hsl(var(--black) / 0.92); --box-shadow: 0px 2px 15px hsl(var(--black) / 0.05); /* ========= Bootstrap Modifier =========== */ /* Primary Color */ --primary-h: 166; --primary-s: 60%; --primary-l: 41%; --primary: var(--primary-h) var(--primary-s) var(--primary-l); --primary-d-100: var(--primary-h) var(--primary-s) calc(var(--primary-l) - var(--primary-l) * 0.1); --primary-d-200: var(--primary-h) var(--primary-s) calc(var(--primary-l) - var(--primary-l) * 0.2); --primary-d-300: var(--primary-h) var(--primary-s) calc(var(--primary-l) - var(--primary-l) * 0.3); --primary-d-400: var(--primary-h) var(--primary-s) calc(var(--primary-l) - var(--primary-l) * 0.4); --primary-d-500: var(--primary-h) var(--primary-s) calc(var(--primary-l) - var(--primary-l) * 0.5); --primary-l-100: var(--primary-h) calc(var(--primary-s)) calc(var(--primary-l) + (100% - var(--primary-l)) * 0.1); --primary-l-200: var(--primary-h) calc(var(--primary-s)) calc(var(--primary-l) + (100% - var(--primary-l)) * 0.2); --primary-l-300: var(--primary-h) calc(var(--primary-s)) calc(var(--primary-l) + (100% - var(--primary-l)) * 0.3); --primary-l-400: var(--primary-h) calc(var(--primary-s)) calc(var(--primary-l) + (100% - var(--primary-l)) * 0.4); --primary-l-500: var(--primary-h) calc(var(--primary-s)) calc(var(--primary-l) + (100% - var(--primary-l)) * 0.5); /* Secondary Color */ --secondary-h: 280; --secondary-s: 7%; --secondary-l: 8%; --secondary: var(--secondary-h) var(--secondary-s) var(--secondary-l); --secondary-d-100: var(--secondary-h) var(--secondary-s) calc(var(--secondary-l) - var(--secondary-l) * 0.1); --secondary-d-200: var(--secondary-h) var(--secondary-s) calc(var(--secondary-l) - var(--secondary-l) * 0.2); --secondary-d-300: var(--secondary-h) var(--secondary-s) calc(var(--secondary-l) - var(--secondary-l) * 0.3); --secondary-d-400: var(--secondary-h) var(--secondary-s) calc(var(--secondary-l) - var(--secondary-l) * 0.4); --secondary-d-500: var(--secondary-h) var(--secondary-s) calc(var(--secondary-l) - var(--secondary-l) * 0.5); --secondary-l-100: var(--secondary-h) calc(var(--secondary-s)) calc(var(--secondary-l) + (100% - var(--secondary-l)) * 0.1); --secondary-l-200: var(--secondary-h) calc(var(--secondary-s)) calc(var(--secondary-l) + (100% - var(--secondary-l)) * 0.2); --secondary-l-300: var(--secondary-h) calc(var(--secondary-s)) calc(var(--secondary-l) + (100% - var(--secondary-l)) * 0.3); --secondary-l-400: var(--secondary-h) calc(var(--secondary-s)) calc(var(--secondary-l) + (100% - var(--secondary-l)) * 0.4); --secondary-l-500: var(--secondary-h) calc(var(--secondary-s)) calc(var(--secondary-l) + (100% - var(--secondary-l)) * 0.5); /* Success Color */ --success-h: 112; --success-s: 100%; --success-l: 40%; --success: var(--success-h) var(--success-s) var(--success-l); --success-d-100: var(--success-h) var(--success-s) calc(var(--success-l) - var(--success-l) * 0.1); --success-d-200: var(--success-h) var(--success-s) calc(var(--success-l) - var(--success-l) * 0.2); --success-d-300: var(--success-h) var(--success-s) calc(var(--success-l) - var(--success-l) * 0.3); --success-d-400: var(--success-h) var(--success-s) calc(var(--success-l) - var(--success-l) * 0.4); --success-d-500: var(--success-h) var(--success-s) calc(var(--success-l) - var(--success-l) * 0.5); --success-l-100: var(--success-h) calc(var(--success-s)) calc(var(--success-l) + (100% - var(--success-l)) * 0.1); --success-l-200: var(--success-h) calc(var(--success-s)) calc(var(--success-l) + (100% - var(--success-l)) * 0.2); --success-l-300: var(--success-h) calc(var(--success-s)) calc(var(--success-l) + (100% - var(--success-l)) * 0.3); --success-l-400: var(--success-h) calc(var(--success-s)) calc(var(--success-l) + (100% - var(--success-l)) * 0.4); --success-l-500: var(--success-h) calc(var(--success-s)) calc(var(--success-l) + (100% - var(--success-l)) * 0.5); /* Danger Color */ --danger-h: 0; --danger-s: 96%; --danger-l: 63%; --danger: var(--danger-h) var(--danger-s) var(--danger-l); --danger-d-100: var(--danger-h) var(--danger-s) calc(var(--danger-l) - var(--danger-l) * 0.1); --danger-d-200: var(--danger-h) var(--danger-s) calc(var(--danger-l) - var(--danger-l) * 0.2); --danger-d-300: var(--danger-h) var(--danger-s) calc(var(--danger-l) - var(--danger-l) * 0.3); --danger-d-400: var(--danger-h) var(--danger-s) calc(var(--danger-l) - var(--danger-l) * 0.4); --danger-d-500: var(--danger-h) var(--danger-s) calc(var(--danger-l) - var(--danger-l) * 0.5); --danger-l-100: var(--danger-h) calc(var(--danger-s)) calc(var(--danger-l) + (100% - var(--danger-l)) * 0.1); --danger-l-200: var(--danger-h) calc(var(--danger-s)) calc(var(--danger-l) + (100% - var(--danger-l)) * 0.2); --danger-l-300: var(--danger-h) calc(var(--danger-s)) calc(var(--danger-l) + (100% - var(--danger-l)) * 0.3); --danger-l-400: var(--danger-h) calc(var(--danger-s)) calc(var(--danger-l) + (100% - var(--danger-l)) * 0.4); --danger-l-500: var(--danger-h) calc(var(--danger-s)) calc(var(--danger-l) + (100% - var(--danger-l)) * 0.5); /* Warning Color */ --warning-h: 40; --warning-s: 100%; --warning-l: 46%; --warning: var(--warning-h) var(--warning-s) var(--warning-l); --warning-d-100: var(--warning-h) var(--warning-s) calc(var(--warning-l) - var(--warning-l) * 0.1); --warning-d-200: var(--warning-h) var(--warning-s) calc(var(--warning-l) - var(--warning-l) * 0.2); --warning-d-300: var(--warning-h) var(--warning-s) calc(var(--warning-l) - var(--warning-l) * 0.3); --warning-d-400: var(--warning-h) var(--warning-s) calc(var(--warning-l) - var(--warning-l) * 0.4); --warning-d-500: var(--warning-h) var(--warning-s) calc(var(--warning-l) - var(--warning-l) * 0.5); --warning-l-100: var(--warning-h) calc(var(--warning-s)) calc(var(--warning-l) + (100% - var(--warning-l)) * 0.1); --warning-l-200: var(--warning-h) calc(var(--warning-s)) calc(var(--warning-l) + (100% - var(--warning-l)) * 0.2); --warning-l-300: var(--warning-h) calc(var(--warning-s)) calc(var(--warning-l) + (100% - var(--warning-l)) * 0.3); --warning-l-400: var(--warning-h) calc(var(--warning-s)) calc(var(--warning-l) + (100% - var(--warning-l)) * 0.4); --warning-l-500: var(--warning-h) calc(var(--warning-s)) calc(var(--warning-l) + (100% - var(--warning-l)) * 0.5); /* Info Color */ --info-h: 196; --info-s: 100%; --info-l: 50%; --info: var(--info-h) var(--info-s) var(--info-l); --info-d-100: var(--info-h) var(--info-s) calc(var(--info-l) - var(--info-l) * 0.1); --info-d-200: var(--info-h) var(--info-s) calc(var(--info-l) - var(--info-l) * 0.2); --info-d-300: var(--info-h) var(--info-s) calc(var(--info-l) - var(--info-l) * 0.3); --info-d-400: var(--info-h) var(--info-s) calc(var(--info-l) - var(--info-l) * 0.4); --info-d-500: var(--info-h) var(--info-s) calc(var(--info-l) - var(--info-l) * 0.5); --info-l-100: var(--info-h) calc(var(--info-s)) calc(var(--info-l) + (100% - var(--info-l)) * 0.1); --info-l-200: var(--info-h) calc(var(--info-s)) calc(var(--info-l) + (100% - var(--info-l)) * 0.2); --info-l-300: var(--info-h) calc(var(--info-s)) calc(var(--info-l) + (100% - var(--info-l)) * 0.3); --info-l-400: var(--info-h) calc(var(--info-s)) calc(var(--info-l) + (100% - var(--info-l)) * 0.4); --info-l-500: var(--info-h) calc(var(--info-s)) calc(var(--info-l) + (100% - var(--info-l)) * 0.5); /* ======== Dark Mood Color Modify ========= */ } :root [data-theme=dark] { --white: 200 9% 7%; --black: 210 40% 98%; } /* ============================ 00.01 Font Size css =============================== */ .fs-10 { font-size: 0.5rem; } .fs-11 { font-size: 0.563rem; } .fs-12 { font-size: 0.625rem; } .fs-13 { font-size: 0.688rem; } .fs-14 { font-size: 0.75rem; } .fs-15 { font-size: 0.813rem; } .fs-16 { font-size: 0.875rem; } @media screen and (max-width: 1199px) { .fs-16 { font-size: 0.813rem; } } .fs-17 { font-size: 0.938rem; } @media screen and (max-width: 1199px) { .fs-17 { font-size: 0.875rem; } } @media screen and (max-width: 767px) { .fs-17 { font-size: 0.813rem; } } .fs-18 { font-size: 1rem; } @media screen and (max-width: 1399px) { .fs-18 { font-size: 0.938rem; } } @media screen and (max-width: 767px) { .fs-18 { font-size: 0.875rem; } } .fs-19 { font-size: 1.063rem; } @media screen and (max-width: 1399px) { .fs-19 { font-size: 1rem; } } @media screen and (max-width: 767px) { .fs-19 { font-size: 0.938rem; } } .fs-20 { font-size: 1.125rem; } @media screen and (max-width: 1399px) { .fs-20 { font-size: 1.063rem; } } @media screen and (max-width: 767px) { .fs-20 { font-size: 1rem; } } .fs-21 { font-size: 1.188rem; } @media screen and (max-width: 1399px) { .fs-21 { font-size: 1.125rem; } } @media screen and (max-width: 767px) { .fs-21 { font-size: 1.063rem; } } .fs-22 { font-size: 1.25rem; } @media screen and (max-width: 1399px) { .fs-22 { font-size: 1.188rem; } } @media screen and (max-width: 767px) { .fs-22 { font-size: 1.125rem; } } .fs-23 { font-size: 1.313rem; } @media screen and (max-width: 1399px) { .fs-23 { font-size: 1.25rem; } } @media screen and (max-width: 767px) { .fs-23 { font-size: 1.188rem; } } .fs-24 { font-size: 1.375rem; } @media screen and (max-width: 1399px) { .fs-24 { font-size: 1.313rem; } } @media screen and (max-width: 767px) { .fs-24 { font-size: 1.25rem; } } .fs-25 { font-size: 1.438rem; } @media screen and (max-width: 1399px) { .fs-25 { font-size: 1.375rem; } } @media screen and (max-width: 767px) { .fs-25 { font-size: 1.313rem; } } .fs-26 { font-size: 1.5rem; } @media screen and (max-width: 1399px) { .fs-26 { font-size: 1.438rem; } } @media screen and (max-width: 767px) { .fs-26 { font-size: 1.375rem; } } .fs-27 { font-size: 1.563rem; } @media screen and (max-width: 1399px) { .fs-27 { font-size: 1.5rem; } } @media screen and (max-width: 767px) { .fs-27 { font-size: 1.438rem; } } .fs-28 { font-size: 1.625rem; } @media screen and (max-width: 1399px) { .fs-28 { font-size: 1.563rem; } } @media screen and (max-width: 767px) { .fs-28 { font-size: 1.5rem; } } .fs-29 { font-size: 1.688rem; } @media screen and (max-width: 1399px) { .fs-29 { font-size: 1.625rem; } } @media screen and (max-width: 767px) { .fs-29 { font-size: 1.563rem; } } .fs-30 { font-size: 1.75rem; } @media screen and (max-width: 1399px) { .fs-30 { font-size: 1.688rem; } } @media screen and (max-width: 767px) { .fs-30 { font-size: 1.625rem; } } .fs-31 { font-size: 1.813rem; } @media screen and (max-width: 1399px) { .fs-31 { font-size: 1.75rem; } } @media screen and (max-width: 767px) { .fs-31 { font-size: 1.688rem; } } .fs-32 { font-size: 1.875rem; } @media screen and (max-width: 1399px) { .fs-32 { font-size: 1.813rem; } } @media screen and (max-width: 767px) { .fs-32 { font-size: 1.75rem; } } .fs-33 { font-size: 1.938rem; } @media screen and (max-width: 1399px) { .fs-33 { font-size: 1.875rem; } } @media screen and (max-width: 767px) { .fs-33 { font-size: 1.813rem; } } .fs-34 { font-size: 2rem; } @media screen and (max-width: 1399px) { .fs-34 { font-size: 1.938rem; } } @media screen and (max-width: 767px) { .fs-34 { font-size: 1.875rem; } } .fs-35 { font-size: 2.063rem; } @media screen and (max-width: 1399px) { .fs-35 { font-size: 2rem; } } @media screen and (max-width: 767px) { .fs-35 { font-size: 1.938rem; } } .fs-36 { font-size: 2.125rem; } @media screen and (max-width: 1399px) { .fs-36 { font-size: 2.063rem; } } @media screen and (max-width: 767px) { .fs-36 { font-size: 2rem; } } .fs-37 { font-size: 2.188rem; } @media screen and (max-width: 1399px) { .fs-37 { font-size: 2.125rem; } } @media screen and (max-width: 767px) { .fs-37 { font-size: 2.063rem; } } .fs-38 { font-size: 2.25rem; } @media screen and (max-width: 1399px) { .fs-38 { font-size: 2.188rem; } } @media screen and (max-width: 767px) { .fs-38 { font-size: 2.125rem; } } .fs-39 { font-size: 2.313rem; } @media screen and (max-width: 1399px) { .fs-39 { font-size: 2.25rem; } } @media screen and (max-width: 767px) { .fs-39 { font-size: 2.188rem; } } .fs-40 { font-size: 2.375rem; } @media screen and (max-width: 1399px) { .fs-40 { font-size: 2.313rem; } } @media screen and (max-width: 767px) { .fs-40 { font-size: 2.25rem; } } .fs-41 { font-size: 2.438rem; } @media screen and (max-width: 1399px) { .fs-41 { font-size: 2.375rem; } } @media screen and (max-width: 767px) { .fs-41 { font-size: 2.313rem; } } .fs-42 { font-size: 2.5rem; } @media screen and (max-width: 1399px) { .fs-42 { font-size: 2.438rem; } } @media screen and (max-width: 767px) { .fs-42 { font-size: 2.375rem; } } .fs-43 { font-size: 2.563rem; } @media screen and (max-width: 1399px) { .fs-43 { font-size: 2.5rem; } } @media screen and (max-width: 767px) { .fs-43 { font-size: 2.438rem; } } .fs-44 { font-size: 2.625rem; } @media screen and (max-width: 1399px) { .fs-44 { font-size: 2.563rem; } } @media screen and (max-width: 767px) { .fs-44 { font-size: 2.5rem; } } .fs-45 { font-size: 2.688rem; } @media screen and (max-width: 1399px) { .fs-45 { font-size: 2.625rem; } } @media screen and (max-width: 767px) { .fs-45 { font-size: 2.563rem; } } .fs-46 { font-size: 2.75rem; } @media screen and (max-width: 1399px) { .fs-46 { font-size: 2.688rem; } } @media screen and (max-width: 767px) { .fs-46 { font-size: 2.625rem; } } .fs-47 { font-size: 2.813rem; } @media screen and (max-width: 1399px) { .fs-47 { font-size: 2.75rem; } } @media screen and (max-width: 767px) { .fs-47 { font-size: 2.688rem; } } .fs-48 { font-size: 2.875rem; } @media screen and (max-width: 1399px) { .fs-48 { font-size: 2.813rem; } } @media screen and (max-width: 767px) { .fs-48 { font-size: 2.75rem; } } .fs-49 { font-size: 2.938rem; } @media screen and (max-width: 1399px) { .fs-49 { font-size: 2.875rem; } } @media screen and (max-width: 767px) { .fs-49 { font-size: 2.813rem; } } .fs-50 { font-size: 3rem; } @media screen and (max-width: 1399px) { .fs-50 { font-size: 2.938rem; } } @media screen and (max-width: 767px) { .fs-50 { font-size: 2.875rem; } } .fs-51 { font-size: 3.063rem; } @media screen and (max-width: 1399px) { .fs-51 { font-size: 3rem; } } @media screen and (max-width: 767px) { .fs-51 { font-size: 2.938rem; } } .fs-52 { font-size: 3.125rem; } @media screen and (max-width: 1399px) { .fs-52 { font-size: 3.063rem; } } @media screen and (max-width: 767px) { .fs-52 { font-size: 3rem; } } .fs-53 { font-size: 3.188rem; } @media screen and (max-width: 1399px) { .fs-53 { font-size: 3.125rem; } } @media screen and (max-width: 767px) { .fs-53 { font-size: 3.063rem; } } .fs-54 { font-size: 3.25rem; } @media screen and (max-width: 1399px) { .fs-54 { font-size: 3.188rem; } } @media screen and (max-width: 767px) { .fs-54 { font-size: 3.125rem; } } .fs-55 { font-size: 3.313rem; } @media screen and (max-width: 1399px) { .fs-55 { font-size: 3.25rem; } } @media screen and (max-width: 767px) { .fs-55 { font-size: 3.188rem; } } .fs-56 { font-size: 3.375rem; } @media screen and (max-width: 1399px) { .fs-56 { font-size: 3.313rem; } } @media screen and (max-width: 767px) { .fs-56 { font-size: 3.25rem; } } .fs-57 { font-size: 3.438rem; } @media screen and (max-width: 1399px) { .fs-57 { font-size: 3.375rem; } } @media screen and (max-width: 767px) { .fs-57 { font-size: 3.313rem; } } .fs-58 { font-size: 3.5rem; } @media screen and (max-width: 1399px) { .fs-58 { font-size: 3.438rem; } } @media screen and (max-width: 767px) { .fs-58 { font-size: 3.375rem; } } .fs-59 { font-size: 3.563rem; } @media screen and (max-width: 1399px) { .fs-59 { font-size: 3.5rem; } } @media screen and (max-width: 767px) { .fs-59 { font-size: 3.438rem; } } .fs-60 { font-size: 3.625rem; } @media screen and (max-width: 1399px) { .fs-60 { font-size: 3.563rem; } } @media screen and (max-width: 767px) { .fs-60 { font-size: 3.5rem; } } .btn-magnetic { position: relative; overflow: hidden; z-index: 1; -webkit-transition: all cubic-bezier(0.645, 0.045, 0.355, 1) 0.35s; transition: all cubic-bezier(0.645, 0.045, 0.355, 1) 0.35s; cursor: pointer; border: 1px solid hsl(var(--border-color)/0.1); font-size: 0.875rem; font-weight: var(--bold); display: inline-block; color: hsl(var(--secondary)); display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 10px; padding: 10px 20px; -webkit-transition: all 0.5s ease; transition: all 0.5s ease; border-radius: 0px 0px 12px 12px; text-transform: capitalize; } .btn-magnetic:hover, .btn-magnetic:focus { border-color: hsl(var(--base)); color: hsl(var(--white)); border-radius: 0; } .btn-magnetic:hover i, .btn-magnetic:focus i { -webkit-transform: translateX(10px); transform: translateX(10px); } .btn-magnetic:hover span, .btn-magnetic:focus span { width: 225%; height: 225%; } .btn-magnetic i { font-size: 1.125rem; -webkit-transition: all 0.3s; transition: all 0.3s; } .btn-magnetic span { position: absolute; width: 0; height: 0; background-color: hsl(var(--base)); -webkit-transition: width 0.5s ease-in-out, height 0.5s ease-in-out; transition: width 0.5s ease-in-out, height 0.5s ease-in-out; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); z-index: -1; border-radius: 10px; } .custom_anime_top { -webkit-animation: anime-top 1.5s forwards cubic-bezier(0.645, 0.045, 0.355, 1); animation: anime-top 1.5s forwards cubic-bezier(0.645, 0.045, 0.355, 1); opacity: 0; } @-webkit-keyframes anime-top { 0% { -webkit-transform: translateY(-5%); transform: translateY(-5%); -webkit-clip-path: inset(0 0 100% 0); clip-path: inset(0 0 100% 0); opacity: 0; } 100% { -webkit-transform: translateY(0); transform: translateY(0); -webkit-clip-path: inset(0 0 0 0); clip-path: inset(0 0 0 0); opacity: 1; } } @keyframes anime-top { 0% { -webkit-transform: translateY(-5%); transform: translateY(-5%); -webkit-clip-path: inset(0 0 100% 0); clip-path: inset(0 0 100% 0); opacity: 0; } 100% { -webkit-transform: translateY(0); transform: translateY(0); -webkit-clip-path: inset(0 0 0 0); clip-path: inset(0 0 0 0); opacity: 1; } } /* ================================= 00.02 Common Typography Css =========================== */ * { margin: 0; padding: 0; -webkit-box-sizing: border-box; box-sizing: border-box; } body { font-family: var(--body-font); color: hsl(var(--body-color)); word-break: break-word; background-color: hsl(var(--section-bg)); min-height: 100vh; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; main{ overflow-x: hidden; } } p { font-size: 1rem; margin: 0; color: hsl(var(--body-color)); } span { display: inline-block; } h1, h2, h3, h4, h5, h6 { color: hsl(var(--base-two)); line-height: 1.3; font-weight: 700; } @media screen and (max-width: 767px) { h1, h2, h3, h4, h5, h6 { margin: 0 0 15px 0; } } h1 { font-size: 3.75rem; } @media screen and (max-width: 1399px) { h1 { font-size: 3.125rem; } } @media screen and (max-width: 1199px) { h1 { font-size: 2.8125rem; } } @media screen and (max-width: 991px) { h1 { font-size: 2.5rem; } } @media screen and (max-width: 767px) { h1 { font-size: 2.1875rem; } } @media screen and (max-width: 575px) { h1 { font-size: 1.875rem; } } h2 { font-size: 3.5rem; margin-top: -10px !important; } @media screen and (max-width: 1399px) { h2 { font-size: 2.8125rem; } } @media screen and (max-width: 1199px) { h2 { font-size: 2.5rem; } } @media screen and (max-width: 991px) { h2 { font-size: 2.1875rem; } } @media screen and (max-width: 767px) { h2 { font-size: 1.875rem; } } @media screen and (max-width: 575px) { h2 { font-size: 1.5625rem; } } h3 { font-size: 1.875rem; } @media screen and (max-width: 1399px) { h3 { font-size: 1.75rem; } } @media screen and (max-width: 1199px) { h3 { font-size: 1.5625rem; } } @media screen and (max-width: 991px) { h3 { font-size: 1.4375rem; } } @media screen and (max-width: 767px) { h3 { font-size: 1.375rem; } } @media screen and (max-width: 575px) { h3 { font-size: 1.25rem; } } h4 { font-size: 1.5rem; } @media screen and (max-width: 1399px) { h4 { font-size: 1.3125rem; } } @media screen and (max-width: 1199px) { h4 { font-size: 1.25rem; } } @media screen and (max-width: 991px) { h4 { font-size: 1.1875rem; } } @media screen and (max-width: 767px) { h4 { font-size: 1.125rem; } } @media screen and (max-width: 575px) { h4 { font-size: 1.0625rem; } } h5 { font-size: 1.25rem; } @media screen and (max-width: 1399px) { h5 { font-size: 1.1875rem; } } @media screen and (max-width: 1199px) { h5 { font-size: 1.125rem; } } @media screen and (max-width: 991px) { h5 { font-size: 1.0625rem; } } @media screen and (max-width: 767px) { h5 { font-size: 1rem; } } @media screen and (max-width: 575px) { h5 { font-size: 1rem; } } h6 { font-size: 1rem; } @media screen and (max-width: 1399px) { h6 { font-size: 1rem; } } @media screen and (max-width: 1199px) { h6 { font-size: 0.9375rem; } } @media screen and (max-width: 991px) { h6 { font-size: 0.875rem; } } @media screen and (max-width: 767px) { h6 { font-size: 0.875rem; } } @media screen and (max-width: 575px) { h6 { font-size: 0.875rem; } } h1 > a, h2 > a, h3 > a, h4 > a, h5 > a, h6 > a { font-weight: inherit; font-size: inherit; color: inherit; -webkit-transition: 0.2s linear; transition: 0.2s linear; line-height: inherit; } a { display: inline-block; -webkit-transition: 0.2s linear; transition: 0.2s linear; text-decoration: none; color: hsl(var(--info)); } a:hover { color: hsl(var(--base)); } img { max-width: 100%; height: auto; } select { cursor: pointer; } ul, ol { padding: 0; margin: 0; list-style: none; } button { border: 0; background-color: transparent; } button:focus { outline: none; -webkit-box-shadow: none; box-shadow: none; } .form-select:focus { outline: 0; -webkit-box-shadow: none; box-shadow: none; } .dashboard-body h1, .dashboard-body h2, .dashboard-body h3, .dashboard-body h4, .dashboard-body h5, .dashboard-body h6 { font-family: var(--body-font); } /* ============================ 00.03 Reset css =============================== */ *, *::before, *::after { -webkit-box-sizing: border-box; box-sizing: border-box; } * { margin: 0; padding: 0; } html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; } ul[role=list], ol[role=list] { list-style: none; } ul { list-style: none; margin: 0; padding: 0; } html:focus-within { scroll-behavior: smooth; } a:not([class]) { -webkit-text-decoration-skip: ink; text-decoration-skip-ink: auto; } button, a { text-decoration: none; outline: none; -webkit-box-shadow: none; box-shadow: none; border: 0; } button:focus, a:focus { -webkit-box-shadow: none !important; box-shadow: none !important; border: 0; } img, picture, svg, video, canvas { max-width: 100%; height: auto; vertical-align: middle; font-style: italic; background-repeat: no-repeat; background-size: cover; } img { margin-bottom: -1px; } input, button, textarea, select { font: inherit; } @media (prefers-reduced-motion: reduce) { html:focus-within { scroll-behavior: auto; } *, *::before, *::after { -webkit-animation-duration: 0.01ms !important; animation-duration: 0.01ms !important; -webkit-animation-iteration-count: 1 !important; animation-iteration-count: 1 !important; -webkit-transition-duration: 0.01ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; -webkit-transition: none; transition: none; } } .offcanvas-backdrop { -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); background: hsl(var(--secondary)/0.5) !important; opacity: 1 !important; -webkit-transition: all 0.4s; transition: all 0.4s; width: 0; } .offcanvas-backdrop.show { width: 100%; border-radius: 0; } .offcanvas { background: hsl(var(--secondary)); height: 100vh; } button.btn-close { -webkit-filter: invert(99%) sepia(0%) saturate(819%) hue-rotate(70deg) brightness(105%) contrast(100%); filter: invert(99%) sepia(0%) saturate(819%) hue-rotate(70deg) brightness(105%) contrast(100%); opacity: 1; } .navbar-brand { margin-right: 0; } body, html { scroll-behavior: smooth; overflow-x: hidden; } body::-webkit-scrollbar-track, html::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); background-color: hsl(var(--white)); } body::-webkit-scrollbar, html::-webkit-scrollbar { width: 8px; background-color: hsl(var(--white)); } body::-webkit-scrollbar-thumb, html::-webkit-scrollbar-thumb { background-color: hsl(var(--primary)); border-radius: 0px; } body ::-moz-selection, html ::-moz-selection { background: hsl(var(--primary)/0.7); color: hsl(var(--black)); } body ::selection, html ::selection { background: hsl(var(--primary)/0.7); color: hsl(var(--black)); } .slide-transition { -webkit-transition-timing-function: linear; transition-timing-function: linear; margin: -35px 0; } @media screen and (max-width: 991px) { .slide-transition { margin: -14px 0; } } @media screen and (max-width: 767px) { .slide-transition { margin: -8px 0; } } .inner-slide-element { width: auto; display: inline-block; padding: 0 15px; } .bg--base { background-color: hsl(var(--base)) !important; } .bg--primary { background-color: hsl(var(--primary)) !important; } .bg--secondary { background-color: hsl(var(--secondary)) !important; } .bg--success { background-color: hsl(var(--success)) !important; } .bg--danger { background-color: hsl(var(--danger)) !important; } .bg--warning { background-color: hsl(var(--warning)) !important; } .bg--info { background-color: hsl(var(--info)) !important; } .text--base { color: hsl(var(--base)) !important; } .text--primary { color: hsl(var(--primary)) !important; } .text--secondary { color: hsl(var(--secondary)) !important; } .text--success { color: hsl(var(--success)) !important; } .text--danger { color: hsl(var(--danger)) !important; } .text--warning { color: hsl(var(--warning)) !important; } .text--info { color: hsl(var(--info)) !important; } .my-120 { margin-top: 60px; margin-bottom: 60px; } @media (min-width: 576px) { .my-120 { margin-top: 80px; margin-bottom: 80px; } } @media (min-width: 992px) { .my-120 { margin-top: 120px; margin-bottom: 120px; } } .mt-120 { margin-top: 60px; } @media (min-width: 576px) { .mt-120 { margin-top: 80px; } } @media (min-width: 992px) { .mt-120 { margin-top: 120px; } } .mb-120 { margin-bottom: 60px; } @media (min-width: 576px) { .mb-120 { margin-bottom: 80px; } } @media (min-width: 992px) { .mb-120 { margin-bottom: 120px; } } .my-60 { margin-top: 30px; margin-bottom: 30px; } @media (min-width: 576px) { .my-60 { margin-top: 40px; margin-bottom: 40px; } } @media (min-width: 992px) { .my-60 { margin-top: 60px; margin-bottom: 60px; } } .mt-60 { margin-top: 30px; } @media (min-width: 576px) { .mt-60 { margin-top: 40px; } } @media (min-width: 992px) { .mt-60 { margin-top: 60px; } } .mb-60 { margin-bottom: 30px; } @media (min-width: 576px) { .mb-60 { margin-bottom: 40px; } } @media (min-width: 992px) { .mb-60 { margin-bottom: 60px; } } .py-120 { padding-top: 60px; padding-bottom: 60px; } @media (min-width: 576px) { .py-120 { padding-top: 80px; padding-bottom: 80px; } } @media (min-width: 992px) { .py-120 { padding-top: 120px; padding-bottom: 120px; } } .pt-120 { padding-top: 60px; } @media (min-width: 576px) { .pt-120 { padding-top: 80px; } } @media (min-width: 992px) { .pt-120 { padding-top: 120px; } } .pb-120 { padding-bottom: 60px; } @media (min-width: 576px) { .pb-120 { padding-bottom: 80px; } } @media (min-width: 992px) { .pb-120 { padding-bottom: 120px; } } .py-100 { padding-top: 60px; padding-bottom: 60px; } @media (min-width: 576px) { .py-100 { padding-top: 80px; padding-bottom: 80px; } } @media (min-width: 992px) { .py-100 { padding-top: 100px; padding-bottom: 100px; } } .pt-100 { padding-top: 60px; } @media (min-width: 576px) { .pt-100 { padding-top: 80px; } } @media (min-width: 992px) { .pt-100 { padding-top: 100px; } } .pb-100 { padding-bottom: 60px; } @media (min-width: 576px) { .pb-100 { padding-bottom: 80px; } } @media (min-width: 992px) { .pb-100 { padding-bottom: 100px; } } .py-60 { padding-top: 30px; padding-bottom: 30px; } @media (min-width: 576px) { .py-60 { padding-top: 40px; padding-bottom: 40px; } } @media (min-width: 992px) { .py-60 { padding-top: 60px; padding-bottom: 60px; } } .pt-60 { padding-top: 30px; } @media (min-width: 576px) { .pt-60 { padding-top: 40px; } } @media (min-width: 992px) { .pt-60 { padding-top: 60px; } } .pb-60 { padding-bottom: 30px; } @media (min-width: 576px) { .pb-60 { padding-bottom: 40px; } } @media (min-width: 992px) { .pb-60 { padding-bottom: 60px; } } .border--base { border-color: hsl(var(--base)) !important; } .border--primary { border-color: hsl(var(--primary)) !important; } .border--secondary { border-color: hsl(var(--secondary)) !important; } .border--success { border-color: hsl(var(--success)) !important; } .border--danger { border-color: hsl(var(--danger)) !important; } .border--warning { border-color: hsl(var(--warning)) !important; } .border--info { border-color: hsl(var(--info)) !important; } /* ============================ 01.01 header css =============================== */ .header-area { display: grid; grid-template-columns: 1fr 690px 1fr; border-bottom: 1px solid hsl(var(--border-color)/0.07); -webkit-box-align: center; -ms-flex-align: center; align-items: center; } @media screen and (max-width: 1399px) { .header-area { grid-template-columns: 1fr 500px 1fr; } } @media screen and (max-width: 1199px) { .header-area { grid-template-columns: 1fr 350px 1fr; } } @media screen and (max-width: 767px) { .header-area { display: none; } } .header-area__left { text-align: right; } .header-area__left .address-text { display: block; font-size: 0.875rem; color: hsl(var(--secondary)); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 10px; height: 60px; padding: 0rem 1.25rem; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: end; } .header-area__left .address-text:hover { color: hsl(var(--base)); } .header-area__left button { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 15px; font-size: 1.125rem; color: hsl(var(--secondary)); font-weight: var(--semibold); } .header-area__center { text-align: center; border-right: 1px solid hsl(var(--border-color)/0.15); border-left: 1px solid hsl(var(--border-color)/0.15); padding: 15px; margin: 0 20px; } .header-area__center img { max-height: 50px; } .header-area__right { text-align: left; } .header-area__right .address-text { display: block; font-size: 0.875rem; color: hsl(var(--secondary)); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 10px; height: 60px; padding: 0rem 1.25rem; } .header-area__right .address-text:hover { color: hsl(var(--base)); } .header-area__right .btn-magnetic { border-radius: 0; } .animate-bar:hover .animate-path { stroke: hsl(var(--base)); } .animate-bar .animate-path { stroke-dasharray: 23; stroke-dashoffset: 23; -webkit-animation: draw 2s ease-out forwards infinite; animation: draw 2s ease-out forwards infinite; } .animate-bar .animate-path:nth-child(1) { -webkit-animation-delay: 0s; animation-delay: 0s; } .animate-bar .animate-path:nth-child(2) { -webkit-animation-delay: 0.3s; animation-delay: 0.3s; } .animate-bar .animate-path:nth-child(3) { -webkit-animation-delay: 0.6s; animation-delay: 0.6s; } .animate-bar .animate-path:nth-child(4) { -webkit-animation-delay: 0.9s; animation-delay: 0.9s; } @-webkit-keyframes draw { 0% { stroke-dashoffset: 23; } 50% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 23; } } @keyframes draw { 0% { stroke-dashoffset: 23; } 50% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 23; } } /* ============================ 01.02 banner css =============================== */ .banner-area { background-image: url("../images/banner/banner-bg-shape.png"); background-position: center center; background-repeat: no-repeat; background-size: cover; background-position: center top; overflow: hidden; padding-top: 90px; overflow: hidden; -webkit-perspective: 1500px; perspective: 1500px; display: grid; -webkit-box-align: end; -ms-flex-align: end; align-items: end; min-height: calc(100vh - 80px); } @media screen and (max-width: 991px) { .banner-area { min-height: 100%; } } .banner-area .container { position: relative; } .banner-area .banner-shape img { position: absolute; } @media screen and (max-width: 767px) { .banner-area .banner-shape img { height: 60px; } } .banner-area .banner-shape img:nth-child(1) { left: 2.8%; top: 16%; -webkit-animation: scale-up-two 2500ms ease-out infinite; animation: scale-up-two 2500ms ease-out infinite; } .banner-area .banner-shape img:nth-child(2) { right: 3px; top: 13%; -webkit-animation: rotatedHalfTwo 4000ms ease-out infinite; animation: rotatedHalfTwo 4000ms ease-out infinite; } .banner-area .banner-shape img:nth-child(3) { right: 36px; top: 44%; -webkit-animation: scale-up-one 2500ms ease-out infinite; animation: scale-up-one 2500ms ease-out infinite; } .banner-area .banner-shape img:nth-child(4) { left: -11.7%; bottom: -1%; -webkit-animation: rotatedHalf 3500ms ease-out infinite; animation: rotatedHalf 3500ms ease-out infinite; } .banner-area .banner-contents { -webkit-transform: translateY(-75px); transform: translateY(-75px); } @media screen and (max-width: 767px) { .banner-area .banner-contents { -webkit-transform: translateY(-105px); transform: translateY(-105px); } } .banner-area__content { position: relative; } .banner-area__img { position: relative; text-align: center; padding: 0 1.875rem; margin: 0 auto; max-width: 40.625rem; margin-bottom: -15px; } @media screen and (max-width: 991px) { .banner-area__img { max-width: 31.25rem; margin-bottom: 0; } } @media screen and (max-width: 767px) { .banner-area__img { max-width: 19.375rem; } } .banner-area__img::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 75%; background: hsl(var(--base)); border-radius: 60px 60px 0px 0px; z-index: -1; } .banner-area__img img { width: 100%; position: relative; z-index: 1; } .banner-area__img .logo-circle { position: absolute; top: 80px; right: -80px; z-index: 1; } @media screen and (max-width: 991px) { .banner-area__img .logo-circle { top: 36px; right: -98px; } } @media screen and (max-width: 767px) { .banner-area__img .logo-circle { top: 60px; right: -60px; } } @media screen and (max-width: 575px) { .banner-area__img .logo-circle { top: -47px; right: -97px; } } @media screen and (max-width: 374px) { .banner-area__img .logo-circle { right: -88px; } } .banner-area__text .last-name, .banner-area__text .first-name { position: absolute; top: 35%; font-size: 180px; font-weight: var(--bold); color: hsl(var(--secondary)); } @media screen and (max-width: 1399px) { .banner-area__text .last-name, .banner-area__text .first-name { font-size: 170px; } } @media screen and (max-width: 1199px) { .banner-area__text .last-name, .banner-area__text .first-name { font-size: 140px; top: 50%; } } @media screen and (max-width: 991px) { .banner-area__text .last-name, .banner-area__text .first-name { font-size: 100px; } } @media screen and (max-width: 767px) { .banner-area__text .last-name, .banner-area__text .first-name { font-size: 70px; top: 51%; } } @media screen and (max-width: 424px) { .banner-area__text .last-name, .banner-area__text .first-name { font-size: 60px; top: 50%; } } .banner-area__text .last-name strong::before, .banner-area__text .first-name strong::before { content: attr(data-before); position: absolute; top: 0; left: 0; -webkit-text-fill-color: transparent; -webkit-text-stroke: 3px; color: hsl(var(--secondary)); z-index: 11; } @media screen and (max-width: 767px) { .banner-area__text .last-name strong::before, .banner-area__text .first-name strong::before { -webkit-text-stroke: 2px; } } .banner-area__text .first-name { left: 0; } .banner-area__text .last-name { top: 60%; right: 0; right: 0; } @media screen and (max-width: 1199px) { .banner-area__text .last-name { top: 70%; } } @media screen and (max-width: 767px) { .banner-area__text .last-name { top: 73%; } } @media screen and (max-width: 575px) { .banner-area__text .last-name { top: 71%; } } @media screen and (max-width: 424px) { .banner-area .logo-circle-content { -webkit-transform: scale(0.6); transform: scale(0.6); } } @media screen and (max-width: 374px) { .banner-area .logo-circle-content { -webkit-transform: scale(0.5); transform: scale(0.5); } } .logo-circle-content { background: hsl(var(--white)); border-radius: 100%; padding: 15px; } .logo-circle-content:hover svg { -webkit-animation: moveUp 0.8s linear; animation: moveUp 0.8s linear; } .logo__subs__label { width: 14.375rem; height: 14.375rem; position: relative; z-index: 1; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; margin-left: auto; margin-right: auto; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; pointer-events: none; } .logo__subs__label > div { width: 9.375rem; height: 9.375rem; border-radius: 50%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; background: hsl(var(--primary)); } .logo__subs__label > div img { width: 4.375rem; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; pointer-events: none; } .logo__subs__label > div .logo__circle__text { position: absolute; left: 0%; top: 0%; width: 100%; height: 100%; -webkit-animation: textRotation 8s linear infinite; animation: textRotation 8s linear infinite; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; pointer-events: none; } .logo__subs__label > div .logo__circle__text p { color: hsl(var(--secondary)); } .logo__subs__label > div .logo__circle__text div { position: absolute; left: 50%; -webkit-transform-origin: 0 115px; transform-origin: 0 115px; -webkit-transform: translateX(-50%); transform: translateX(-50%); font-size: 1.25rem; font-weight: 600; } @-webkit-keyframes textRotation { to { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes textRotation { to { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } /* ============================ 01.03 digital services css =============================== */ .digital-services-area { background: hsl(var(--white)); border-radius: 0px 0px 60px 60px; } @media screen and (max-width: 991px) { .digital-services-area { border-radius: 0 0 30px 30px; } } .digital-services-area__text { display: inline-block; text-align: center; } .digital-services-area__text strong { color: hsl(var(--base)); font-weight: var(--bold); } .digital-services-area__text .primary-text strong { display: block; opacity: 0; -webkit-transform: translateY(20px); transform: translateY(20px); -webkit-transition: opacity 1s ease-in-out, -webkit-transform 1s ease-in-out; transition: opacity 1s ease-in-out, -webkit-transform 1s ease-in-out; transition: opacity 1s ease-in-out, transform 1s ease-in-out; transition: opacity 1s ease-in-out, transform 1s ease-in-out, -webkit-transform 1s ease-in-out; } .digital-services-area__text .primary-text strong:nth-child(1) { -webkit-animation-delay: 0s; animation-delay: 0s; } .digital-services-area__text .primary-text strong:nth-child(2) { -webkit-animation-delay: 3s; animation-delay: 3s; } .digital-services-area__text .primary-text strong:nth-child(3) { -webkit-animation-delay: 6s; animation-delay: 6s; } .digital-services-area__text .primary-text .active { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } @-webkit-keyframes textFade { 0%, 100% { opacity: 0; -webkit-transform: translateY(20px); transform: translateY(20px); } 50% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes textFade { 0%, 100% { opacity: 0; -webkit-transform: translateY(20px); transform: translateY(20px); } 50% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } } /* ============================ 01.04 hey there css =============================== */ .hey-there-area__title { text-align: left; } .hey-there-area__title h2 { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 15px; } .hey-there-area__title .fs-54 { font-weight: var(--bold); color: hsl(var(--secondary)); margin-top: 10px; } @media screen and (max-width: 1399px) { .hey-there-area__title .fs-54 { font-size: 2.8125rem; } } @media screen and (max-width: 1199px) { .hey-there-area__title .fs-54 { font-size: 2.5rem; } } @media screen and (max-width: 991px) { .hey-there-area__title .fs-54 { font-size: 2.1875rem; } } @media screen and (max-width: 767px) { .hey-there-area__title .fs-54 { font-size: 1.875rem; } } @media screen and (max-width: 575px) { .hey-there-area__title .fs-54 { font-size: 1.5625rem; } } .hey-there-area__img { width: 100px; overflow: hidden; border-radius: 6px 16px 16px 6px; display: inline-block; position: relative; } .hey-there-area__img img { position: relative; overflow: hidden; width: 100%; display: block; -webkit-transition: all 1s ease-in-out; transition: all 1s ease-in-out; } .hey-there-area__img img:nth-child(2) { -webkit-transition: all 1s ease-in-out; transition: all 1s ease-in-out; } .hey-there-area__img img:first-child { position: absolute; left: 0; top: 0; right: 0; bottom: 0; z-index: 1; -webkit-transform: translatex(50%) scalex(2); transform: translatex(50%) scalex(2); opacity: 0; -webkit-filter: blur(10px); filter: blur(10px); } .hey-there-area__img img:first-child img { -webkit-transform: scale(1); transform: scale(1); -webkit-transition: all 1s ease-in-out; transition: all 1s ease-in-out; } .hey-there-area__img:hover img:first-child { -webkit-transform: translatex(0) scalex(1); transform: translatex(0) scalex(1); opacity: 1; -webkit-filter: blur(0); filter: blur(0); } .hey-there-area__img:hover img:nth-child(2) { -webkit-transform: translatex(-50%) scalex(2); transform: translatex(-50%) scalex(2); opacity: 0; -webkit-filter: blur(10px); filter: blur(10px); } .hey-there-area__video { -webkit-mask-image: url("../images/shape-svg/laptop-screen.png"); mask-image: url("../images/shape-svg/laptop-screen.png"); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 90%; mask-size: 90%; width: 315px; height: 270px; } .hey-there-area__video iframe { -webkit-transform: rotate(-37deg) translateY(-83px); transform: rotate(-37deg) translateY(-83px); width: 490px; height: 380px; } .hey-there-area__video video { -webkit-transform: rotate(-37deg) translateY(-4px); transform: rotate(-37deg) translateY(-4px); width: 290px; height: 271px; -o-object-fit: cover; object-fit: cover; } .hey-there-area__text { display: grid; grid-template-columns: 300px 1fr; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 30px; } @media screen and (max-width: 991px) { .hey-there-area__text { grid-template-columns: 1fr; } } .hey-there-area__text .text { display: grid; gap: 30px; } .hey-there-area__text svg { -webkit-animation: scaleRight 2500ms ease-out infinite; animation: scaleRight 2500ms ease-out infinite; } @media screen and (max-width: 991px) { .hey-there-area__text svg { display: none; } } @-webkit-keyframes scaleRight { 0% { -webkit-transform: translateX(-15%); transform: translateX(-15%); } 50% { -webkit-transform: translateX(15%); transform: translateX(15%); } 100% { -webkit-transform: translateX(-15%); transform: translateX(-15%); } } @keyframes scaleRight { 0% { -webkit-transform: translateX(-15%); transform: translateX(-15%); } 50% { -webkit-transform: translateX(15%); transform: translateX(15%); } 100% { -webkit-transform: translateX(-15%); transform: translateX(-15%); } } .hey-there-area__text ul { -webkit-column-count: 2; -moz-column-count: 2; column-count: 2; gap: 15px; } @media screen and (max-width: 991px) { .hey-there-area__text ul { -webkit-column-count: 1; -moz-column-count: 1; column-count: 1; } } .hey-there-area__text ul li { font-weight: 600; font-size: 1rem; padding: 4px 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .hey-there-area__text ul li::before { content: "\f111"; font-weight: 900; font-family: "Font Awesome 6 free"; font-size: 7px; margin-right: 10px; color: hsl(var(--base)); } @media screen and (max-width: 991px) { .hey-there-area .mt-60 { margin-top: 0; } } /* ============================ 01.05 creative responsive css =============================== */ .creative-services, .creative-responsive-area { background-color: hsl(var(--secondary)); background-image: url("../images/shape-svg/creative-shape.png"); background-position: center center; background-repeat: no-repeat; background-size: cover; } .creative-services__title, .creative-responsive-area__title { text-align: center; } .creative-services__title h2, .creative-responsive-area__title h2 { color: hsl(var(--white)); } .creative-services .col-lg-4:nth-child(n+4):nth-child(-n+8) .creative-responsive-area__item, .creative-services .col-lg-4:nth-child(n+13):nth-child(-n+16) .creative-responsive-area__item, .creative-services .col-lg-4:nth-child(n+21):nth-child(-n+24) .creative-responsive-area__item, .creative-services .col-lg-4:nth-child(n+29):nth-child(-n+34) .creative-responsive-area__item, .creative-responsive-area .col-lg-4:nth-child(n+4):nth-child(-n+8) .creative-responsive-area__item, .creative-responsive-area .col-lg-4:nth-child(n+13):nth-child(-n+16) .creative-responsive-area__item, .creative-responsive-area .col-lg-4:nth-child(n+21):nth-child(-n+24) .creative-responsive-area__item, .creative-responsive-area .col-lg-4:nth-child(n+29):nth-child(-n+34) .creative-responsive-area__item { border-radius: 20px 20px 6px 6px; } @media screen and (max-width: 991px) { .creative-services .col-lg-4:nth-child(n+4):nth-child(-n+8) .creative-responsive-area__item, .creative-services .col-lg-4:nth-child(n+13):nth-child(-n+16) .creative-responsive-area__item, .creative-services .col-lg-4:nth-child(n+21):nth-child(-n+24) .creative-responsive-area__item, .creative-services .col-lg-4:nth-child(n+29):nth-child(-n+34) .creative-responsive-area__item, .creative-responsive-area .col-lg-4:nth-child(n+4):nth-child(-n+8) .creative-responsive-area__item, .creative-responsive-area .col-lg-4:nth-child(n+13):nth-child(-n+16) .creative-responsive-area__item, .creative-responsive-area .col-lg-4:nth-child(n+21):nth-child(-n+24) .creative-responsive-area__item, .creative-responsive-area .col-lg-4:nth-child(n+29):nth-child(-n+34) .creative-responsive-area__item { border-radius: 15px; } } .creative-services__item, .creative-responsive-area__item { position: relative; overflow: hidden; z-index: 1; -webkit-transition: all cubic-bezier(0.645, 0.045, 0.355, 1) 0.7s; transition: all cubic-bezier(0.645, 0.045, 0.355, 1) 0.7s; --width-box: 45px; background: hsl(var(--white)); padding: 40px 30px; border-radius: 6px 6px 20px 20px; } .creative-services__item:hover, .creative-services__item:focus, .creative-responsive-area__item:hover, .creative-responsive-area__item:focus { color: hsl(var(--white)); } .creative-services__item:hover span, .creative-services__item:focus span, .creative-responsive-area__item:hover span, .creative-responsive-area__item:focus span { width: 225%; height: 225%; } .creative-services__item span, .creative-responsive-area__item span { position: absolute; width: 0; height: 0; background-color: hsl(var(--base)); -webkit-transition: width 0.6s ease-in-out, height 0.6s ease-in-out; transition: width 0.6s ease-in-out, height 0.6s ease-in-out; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); z-index: -1; border-radius: 50px; } @media screen and (max-width: 991px) { .creative-services__item, .creative-responsive-area__item { border-radius: 15px; } } @media screen and (max-width: 575px) { .creative-services__item, .creative-responsive-area__item { padding: 30px 20px; } } .creative-services__item:hover .number, .creative-services__item:hover p, .creative-services__item:hover h3, .creative-responsive-area__item:hover .number, .creative-responsive-area__item:hover p, .creative-responsive-area__item:hover h3 { color: hsl(var(--white)); border-color: hsl(var(--white)); } .creative-services__item:hover .btn-item, .creative-responsive-area__item:hover .btn-item { color: hsl(var(--secondary)); background: hsl(var(--white)); } .creative-services__item .number, .creative-responsive-area__item .number { font-size: 1.375rem; font-weight: var(--semibold); color: hsl(var(--secondary)); margin-bottom: 20px; border-radius: 100px; border: 1px solid hsl(var(--secondary)/0.1); display: inline-block; width: var(--width-box); height: var(--width-box); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-transition: all 0.3s; transition: all 0.3s; } .creative-services__item h3, .creative-responsive-area__item h3 { -webkit-transition: all 0.3s; transition: all 0.3s; } .creative-services__item p, .creative-responsive-area__item p { font-weight: normal; padding: 10px 0 20px; -webkit-transition: all 0.3s; transition: all 0.3s; } .creative-services__item .btn-item, .creative-responsive-area__item .btn-item { border-radius: 100px; width: var(--width-box); height: var(--width-box); background: hsl(var(--secondary)); color: hsl(var(--white)); padding: 0; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; justify-content: center; font-size: 1.125rem; -webkit-transition: all 0.3s; transition: all 0.3s; } .creative-services__item .btn-item i, .creative-responsive-area__item .btn-item i { -webkit-transition: all 0.3s; transition: all 0.3s; } .creative-services__item .btn-item:hover, .creative-responsive-area__item .btn-item:hover { color: hsl(var(--base)); } .creative-services__item .btn-item:hover i, .creative-responsive-area__item .btn-item:hover i { -webkit-transform: rotate(45deg); transform: rotate(45deg); } /* ============================ 01.06 portfolio css =============================== */ .portfolio-area { background: hsl(var(--section-bg)); position: relative; overflow: hidden; } .portfolio-area__title { font-weight: var(--bold); text-transform: uppercase; color: hsl(var(--secondary)); word-break: normal; font-weight: var(--bold); text-transform: uppercase; color: hsl(var(--secondary)); font-size: 124px; gap: 24px; margin-bottom: -10px; } @media screen and (max-width: 1199px) { .portfolio-area__title { font-size: 70px; } } @media screen and (max-width: 991px) { .portfolio-area__title { font-size: 60px; } } @media screen and (max-width: 767px) { .portfolio-area__title { font-size: 50px; } } .portfolio-area__title span { -webkit-text-fill-color: transparent; -webkit-text-stroke: 1.5px; color: hsl(var(--secondary)); } .portfolio-area__title img { max-width: 72px; height: auto; margin-top: -25px; -webkit-animation: rotated 4000ms ease-out infinite; animation: rotated 4000ms ease-out infinite; } @media screen and (max-width: 1199px) { .portfolio-area__title img { max-width: 40px; } } @media screen and (max-width: 991px) { .portfolio-area__title img { max-width: 35px; margin-top: -10px; } } .portfolio-category-content .container { max-width: 1720px; } .portfolio-content { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; } @media screen and (max-width: 767px) { .portfolio-content { grid-template-columns: 1fr; } } .portfolio-content .portfolio-item { overflow: hidden; position: relative; border-radius: 8px 32px 32px 8px; } @media screen and (max-width: 767px) { .portfolio-content .portfolio-item { border-radius: 20px; } } .portfolio-content .portfolio-item:nth-child(even) { border-radius: 32px 8px 8px 32px; } @media screen and (max-width: 767px) { .portfolio-content .portfolio-item:nth-child(even) { border-radius: 20px; } } .portfolio-content .portfolio-item:hover .portfolio-item__image img:first-child { -webkit-transform: translatex(0) scalex(1); transform: translatex(0) scalex(1); opacity: 1; -webkit-filter: blur(0); filter: blur(0); } .portfolio-content .portfolio-item:hover .portfolio-item__image img:nth-child(2) { -webkit-transform: translatex(-50%) scalex(2); transform: translatex(-50%) scalex(2); opacity: 0; -webkit-filter: blur(10px); filter: blur(10px); } .portfolio-content .portfolio-item:hover .portfolio-item__image img:first-child { -webkit-transform: translateY(0) scaleX(1); transform: translateY(0) scaleX(1); } .portfolio-content .portfolio-item:hover .portfolio-item__image img:nth-child(2) { -webkit-transform: translateY(50%) scaleX(2); transform: translateY(50%) scaleX(2); } .portfolio-content .portfolio-item__image { position: relative; } .portfolio-content .portfolio-item__image img { position: relative; overflow: hidden; width: 100%; display: block; -webkit-transition: all 1s ease-in-out; transition: all 1s ease-in-out; } .portfolio-content .portfolio-item__image img:nth-child(2) { -webkit-transition: all 1s ease-in-out; transition: all 1s ease-in-out; } .portfolio-content .portfolio-item__image img:first-child { position: absolute; left: 0; top: 0; right: 0; bottom: 0; z-index: 1; -webkit-transform: translatex(50%) scalex(2); transform: translatex(50%) scalex(2); opacity: 0; -webkit-filter: blur(10px); filter: blur(10px); } .portfolio-content .portfolio-item__image img:first-child img { -webkit-transform: scale(1); transform: scale(1); -webkit-transition: all 1s ease-in-out; transition: all 1s ease-in-out; } .portfolio-content .portfolio-item__image img:first-child { -webkit-transform: translateY(-50%) scaleX(2); transform: translateY(-50%) scaleX(2); } .portfolio-content .portfolio-item__content { position: absolute; top: 0; width: 100%; height: 100%; display: grid; padding: 40px; z-index: 1; } @media screen and (max-width: 767px) { .portfolio-content .portfolio-item__content { padding: 20px; } } .portfolio-content .portfolio-item__content .d-flex:nth-child(1) { margin-bottom: auto; } .portfolio-content .portfolio-item__content .d-flex:nth-child(2) { margin-top: auto; } .portfolio-content .portfolio-item__content .portfolio-item__title { color: hsl(var(--white)); -webkit-transition: all 0.3s; transition: all 0.3s; display: inline !important; width: 100%; background-repeat: no-repeat; background-position-y: -2px; background-image: linear-gradient(transparent calc(100% - 2px), currentColor 1px); -webkit-transition: 0.6s cubic-bezier(0.215, 0.61, 0.355, 1); transition: 0.6s cubic-bezier(0.215, 0.61, 0.355, 1); background-size: 0 100%; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .portfolio-content .portfolio-item__content .portfolio-item__title:hover { background-image: linear-gradient(transparent calc(100% - 2px), currentColor 1px); background-size: 100% 100%; } .portfolio-content .portfolio-item__content .date { font-size: 1.125rem; font-weight: var(--semibold); color: hsl(var(--secondary)); background: hsl(var(--white)); border-radius: 3px 8px 8px 3px; padding: 5px 10px 3px; -webkit-transition: all 0.3s; transition: all 0.3s; } @media screen and (max-width: 991px) { .portfolio-content .portfolio-item__content .date { width: 75px; text-align: center; } } .portfolio-content .portfolio-item__content .date:hover { color: hsl(var(--base)); -webkit-animation: moveUp 0.8s linear; animation: moveUp 0.8s linear; } @media screen and (max-width: 374px) { .portfolio-content .portfolio-item__content .date { font-size: 0.75rem; } } .portfolio-content .portfolio-item__content .portfolio-item__category { display: -webkit-box; display: -ms-flexbox; display: flex; gap: 10px; } @media screen and (max-width: 991px) { .portfolio-content .portfolio-item__content .portfolio-item__category { -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 6px; } } .portfolio-content .portfolio-item__content .portfolio-item__category a { font-size: 1.375rem; font-weight: var(--semibold); color: hsl(var(--white)); -webkit-transition: all 0.3s; transition: all 0.3s; } @media screen and (max-width: 1199px) { .portfolio-content .portfolio-item__content .portfolio-item__category a { font-size: 1rem; } } @media screen and (max-width: 374px) { .portfolio-content .portfolio-item__content .portfolio-item__category a { font-size: 0.875rem; } } .portfolio-content .portfolio-item__content .portfolio-item__category a:hover { color: hsl(var(--base)); } .portfolio-content .portfolio-item__content .portfolio-item__category a::after { content: "/"; margin-left: 10px; } .portfolio-content .portfolio-item__content .portfolio-item__category a:last-child::after { display: none; } .portfolio-content .portfolio-item__content .btn-item { display: -webkit-box; display: -ms-flexbox; display: flex; min-width: 48px; height: 48px; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; font-size: 1.375rem; background: hsl(var(--white)); color: hsl(var(--secondary)); border-radius: 100px; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } @media screen and (max-width: 374px) { .portfolio-content .portfolio-item__content .btn-item { min-width: 38px; height: 38px; } } .portfolio-content .portfolio-item__content .btn-item i { -webkit-transition: all 0.3s; transition: all 0.3s; } .portfolio-content .portfolio-item__content .btn-item:hover { color: hsl(var(--base)); -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } .portfolio-content .portfolio-item__content .btn-item:hover i { -webkit-transform: rotate(45deg); transform: rotate(45deg); } .portfolio-details .custom_anime_top { position: relative; border-radius: 10px; } .portfolio-details .custom_anime_top img { position: relative; overflow: hidden; width: 100%; display: block; -webkit-transition: all 1s ease-in-out; transition: all 1s ease-in-out; } .portfolio-details .custom_anime_top img:nth-child(2) { -webkit-transition: all 1s ease-in-out; transition: all 1s ease-in-out; } .portfolio-details .custom_anime_top img:first-child { position: absolute; left: 0; top: 0; right: 0; bottom: 0; z-index: 1; -webkit-transform: translatex(50%) scalex(2); transform: translatex(50%) scalex(2); opacity: 0; -webkit-filter: blur(10px); filter: blur(10px); } .portfolio-details .custom_anime_top img:first-child img { -webkit-transform: scale(1); transform: scale(1); -webkit-transition: all 1s ease-in-out; transition: all 1s ease-in-out; } .portfolio-details .custom_anime_top:hover img:first-child { -webkit-transform: translatex(0) scalex(1); transform: translatex(0) scalex(1); opacity: 1; -webkit-filter: blur(0); filter: blur(0); } .portfolio-details .custom_anime_top:hover img:nth-child(2) { -webkit-transform: translatex(-50%) scalex(2); transform: translatex(-50%) scalex(2); opacity: 0; -webkit-filter: blur(10px); filter: blur(10px); } .portfolio-details__header { text-align: center; } .portfolio-details__header h2 { padding: 20px 0 40px; } .portfolio-details__header ul { display: grid; grid-template-columns: repeat(5, 1fr); -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; border: 1px solid hsl(var(--secondary)/0.1); border-radius: 0px 0px 15px 15px; overflow: hidden; } @media screen and (max-width: 767px) { .portfolio-details__header ul { grid-template-columns: repeat(3, 1fr); } } @media screen and (max-width: 575px) { .portfolio-details__header ul { grid-template-columns: repeat(2, 1fr); } } .portfolio-details__header ul li { width: 100%; border-right: 1px solid hsl(var(--secondary)/0.1); text-align: left; padding: 24px; -webkit-transition: all 0.4s; transition: all 0.4s; } .portfolio-details__header ul li:hover { background: hsl(var(--white)); -webkit-transform: scale(1.05); transform: scale(1.05); } @media screen and (max-width: 767px) { .portfolio-details__header ul li:hover { -webkit-transform: scale(1); transform: scale(1); } } .portfolio-details__header ul li:hover .title { color: hsl(var(--base)); } @media screen and (max-width: 767px) { .portfolio-details__header ul li:nth-child(3) { border-right: 0; } .portfolio-details__header ul li:nth-child(5) { grid-column: span 2; border-top: 1px solid hsl(var(--secondary)/0.1); text-align: center; } .portfolio-details__header ul li:nth-child(5) .social { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } } @media screen and (max-width: 575px) { .portfolio-details__header ul li:nth-child(2) { border-right: 0; } .portfolio-details__header ul li:nth-child(3) { border-right: 1px solid hsl(var(--secondary)/0.1); border-top: 1px solid hsl(var(--secondary)/0.1); } .portfolio-details__header ul li:nth-child(4) { border-right: 0; border-top: 1px solid hsl(var(--secondary)/0.1); } } @media screen and (max-width: 374px) { .portfolio-details__header ul li { padding: 10px; } } .portfolio-details__header ul li:last-child { border-right: 0; } .portfolio-details__header ul li .title { font-size: 1.125rem; font-weight: var(--semibold); color: hsl(var(--secondary)); padding-bottom: 5px; -webkit-transition: all 0.3s; transition: all 0.3s; } @media screen and (max-width: 374px) { .portfolio-details__header ul li .title { font-size: 0.938rem; } } .portfolio-details__header ul li .social { display: -webkit-box; display: -ms-flexbox; display: flex; gap: 15px; } .portfolio-details__header ul li .social a { color: hsl(var(--secondary)/0.5); font-size: 1rem; } @media screen and (max-width: 374px) { .portfolio-details__header ul li .social a { font-size: 0.875rem; } } .portfolio-details__header ul li .social a:hover { color: hsl(var(--base)); } .portfolio-details__text { display: grid; gap: 20px; margin-top: 20px; } .portfolio-details__text h2 { font-size: 2.375rem; font-weight: var(--semibold); padding-top: 20px; } @media screen and (max-width: 991px) { .portfolio-details__text h2 { font-size: 2.1875rem; } } @media screen and (max-width: 767px) { .portfolio-details__text h2 { font-size: 1.875rem; } } @media screen and (max-width: 575px) { .portfolio-details__text h2 { font-size: 1.5625rem; } } .portfolio-details__text p { text-align: justify; } .portfolio-details__text ul { display: grid; gap: 5px; } .portfolio-details__text ul li { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; font-weight: 500; } .portfolio-details__text ul li:before { content: "\f111"; font-weight: 900; font-family: "Font Awesome 6 free"; font-size: 7px; margin-right: 10px; color: hsl(var(--secondary)/0.5); } .portfolio-details .border-portfolio { border-radius: 20px; overflow: hidden; } .pagination_content { margin-top: 20px; } .pagination_content ul { gap: 15px; } .pagination_content a { font-size: 1.125rem; font-weight: var(--semibold); color: hsl(var(--secondary)); -webkit-transition: all 0.3s; transition: all 0.3s; width: 44px; height: 44px; border-radius: 100px !important; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; color: hsl(var(--secondary)/0.5); background: none; border: 1px solid hsl(var(--secondary)/0.5); outline: none; -webkit-box-shadow: none; box-shadow: none; } .pagination_content a:focus { outline: none; -webkit-box-shadow: none; box-shadow: none; color: hsl(var(--secondary)/0.5); background: none; } @media screen and (max-width: 767px) { .pagination_content a { width: 34px; height: 34px; font-size: 0.938rem; } } .pagination_content a .page-link.active, .pagination_content a .active, .pagination_content a:hover { color: hsl(var(--white)); background: hsl(var(--base)); border-color: hsl(var(--base)); } .pagination_content .active > .page-link, .pagination_content .page-link.active { color: hsl(var(--white)); background: hsl(var(--base)); border-color: hsl(var(--base)); } .portfolio-pages { background: hsl(var(--white)); } /* ============================ 01.07 brands css =============================== */ .brands-area { position: relative; z-index: 1; } .brands-area.brands-bg { background: hsl(var(--secondary)); } .brands-area.brands-bg h2 { color: hsl(var(--white)); } .brands-logo { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; } @media screen and (max-width: 991px) { .brands-logo { grid-template-columns: repeat(3, 1fr); } } @media screen and (max-width: 767px) { .brands-logo { grid-template-columns: repeat(2, 1fr); } } .brands-logo__item { background: hsl(var(--white)); border-radius: 4px 4px 12px 12px; height: 135px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; padding: 20px; position: relative; overflow: hidden; z-index: 1; -webkit-transition: all cubic-bezier(0.645, 0.045, 0.355, 1) 0.7s; transition: all cubic-bezier(0.645, 0.045, 0.355, 1) 0.7s; } .brands-logo__item:hover, .brands-logo__item:focus { color: hsl(var(--white)); } .brands-logo__item:hover span, .brands-logo__item:focus span { width: 225%; height: 225%; } .brands-logo__item span { position: absolute; width: 0; height: 0; background-color: hsl(var(--base)); -webkit-transition: width 0.6s ease-in-out, height 0.6s ease-in-out; transition: width 0.6s ease-in-out, height 0.6s ease-in-out; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); z-index: -1; border-radius: 50px; } @media screen and (max-width: 991px) { .brands-logo__item { border-radius: 10px; } } .brands-logo__item:hover img { -webkit-animation: moveUp 0.8s linear; animation: moveUp 0.8s linear; -webkit-filter: invert(100%) sepia(1%) saturate(5%) hue-rotate(354deg) brightness(104%) contrast(103%); filter: invert(100%) sepia(1%) saturate(5%) hue-rotate(354deg) brightness(104%) contrast(103%); } @media screen and (max-width: 575px) { .brands-logo__item { height: 85px; } } .brands-logo__item img { -webkit-transition: all 0.3s; transition: all 0.3s; } .brands-logo__item:nth-child(n+5):nth-child(-n+8), .brands-logo__item:nth-child(n+13):nth-child(-n+16), .brands-logo__item:nth-child(n+21):nth-child(-n+24), .brands-logo__item:nth-child(n+29):nth-child(-n+34) { border-radius: 12px 12px 4px 4px; } @media screen and (max-width: 991px) { .brands-logo__item:nth-child(n+5):nth-child(-n+8), .brands-logo__item:nth-child(n+13):nth-child(-n+16), .brands-logo__item:nth-child(n+21):nth-child(-n+24), .brands-logo__item:nth-child(n+29):nth-child(-n+34) { border-radius: 10px; } } /* ============================ 01.08 brands story css =============================== */ .brands-story-area { background-image: url("../images/shape-svg/brands-story-shape.png"); background-position: center center; background-repeat: no-repeat; background-size: cover; margin: 0; } .brands-story-area__content { display: grid; grid-template-columns: 200px 1fr; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 20px; } @media screen and (max-width: 991px) { .brands-story-area__content { grid-template-columns: 1fr; } } .brands-story-area__logo { -webkit-mask-image: url("../images/shape-svg/brands-shape.png"); mask-image: url("../images/shape-svg/brands-shape.png"); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 90%; mask-size: 90%; height: 200px; width: 200px; } .brands-story-area__logo video { -o-object-fit: cover; object-fit: cover; height: 100%; } .brands-story-area .brand-count { border-radius: 4px 4px 16px 16px; background: hsl(var(--white)); padding: 20px; -webkit-transition: all 0.5s; transition: all 0.5s; } .brands-story-area .brand-count:hover { background: hsl(var(--base)); -webkit-transform: translateY(-10px); transform: translateY(-10px); } .brands-story-area .brand-count:hover .brand-count__text, .brands-story-area .brand-count:hover .brand-count__number { color: hsl(var(--white)); } .brands-story-area .brand-count:hover .brand-count__text { border-color: hsl(var(--white)/0.4); } @media screen and (max-width: 767px) { .brands-story-area .brand-count { padding: 10px; } } .brands-story-area .brand-count__number { font-size: 3.625rem; font-weight: var(--bold); color: hsl(var(--secondary)); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 4px; -webkit-transition: all 0.5s; transition: all 0.5s; } @media screen and (max-width: 991px) { .brands-story-area .brand-count__number { font-size: 2.1875rem; } } @media screen and (max-width: 767px) { .brands-story-area .brand-count__number { font-size: 1.875rem; } } @media screen and (max-width: 575px) { .brands-story-area .brand-count__number { font-size: 1.5625rem; } } .brands-story-area .brand-count__text { border-top: 1px solid hsl(var(--secondary)/0.1); font-size: 0.875rem; font-weight: var(--semibold); color: hsl(var(--secondary)); padding-top: 10px; -webkit-transition: all 0.5s; transition: all 0.5s; } @media screen and (max-width: 767px) { .brands-story-area .brand-count__text { font-size: 0.75rem; } } @media screen and (max-width: 374px) { .brands-story-area .brand-count__text { font-size: 0.688rem; } } /* ============================ 01.09 testimonial css =============================== */ .testimonial-area { background: hsl(var(--secondary)); } .testimonial-area__title { text-align: center; } .testimonial-area__title h2 { color: hsl(var(--white)); } .testimonial-slider__item { padding: 20px; background-color: hsl(var(--white)); border-radius: 5px; -webkit-box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.1); box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.1); position: relative; max-width: 100%; text-align: left; border-bottom-left-radius: 20px; border-bottom-right-radius: 20px; } .testimonial-slider__item .testimonial-slider__quote { font-size: 1rem; color: hsl(var(--secondary)/0.9); background: hsl(var(--section-bg)); padding: 20px; border-radius: 8px; margin-bottom: 15px; min-height: 130px; font-weight: 400; text-align: justify; } .testimonial-slider__item .testimonial-slider__author { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 10px; margin-top: 10px; } .testimonial-slider__item .testimonial-slider__author-img { width: 50px; height: 50px; border-radius: 50%; -o-object-fit: cover; object-fit: cover; } .testimonial-slider__item .testimonial-slider__author-name { font-size: 1.125rem; font-weight: 600; color: hsl(var(--secondary)); padding-top: 4px; } .testimonial-slider__item .testimonial-slider__author-position { font-size: 0.875rem; color: hsl(var(--secondary)/0.3); } .testimonial-slider__item .testimonial-slider__quote-icon { position: absolute; font-size: 3.625rem; font-weight: 700; color: hsl(var(--secondary)/0.05); right: 20px; bottom: 0px; } .testimonial-slider__item .testimonial-slider__quote-icon img { opacity: 0.05; width: 80px; margin-top: -8px; } .swiper__buttons { position: absolute; width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; top: 50%; z-index: 11; } @media screen and (max-width: 767px) { .swiper__buttons { position: relative; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; gap: 15px; margin-top: 50px; } } .swiper__buttons .swiper-button-next, .swiper__buttons .swiper-button-prev { --pad-100: 100px; cursor: pointer; -webkit-transition: color 0.3s; transition: color 0.3s; position: relative; border: 1px solid hsl(var(--white)); width: 50px; height: 50px; border-radius: 100px; color: hsl(var(--white)); background: none; -webkit-animation: moveUp 0.8s linear; animation: moveUp 0.8s linear; } .swiper__buttons .swiper-button-next:hover, .swiper__buttons .swiper-button-prev:hover { background: hsl(var(--base)); border-color: hsl(var(--base)); color: hsl(var(--white)); } .swiper__buttons .swiper-button-next::after, .swiper__buttons .swiper-button-prev::after { font-size: 1.125rem; font-weight: 900; font-family: "Font Awesome 6 free"; } .swiper__buttons .swiper-button-next.swiper-button-disabled, .swiper__buttons .swiper-button-prev.swiper-button-disabled { background: none; border-color: hsl(var(--white)); color: hsl(var(--white)); } .swiper__buttons .swiper-button-next { left: 100px; -webkit-transition: color 0.3s; transition: color 0.3s; } @media screen and (max-width: 1499px) { .swiper__buttons .swiper-button-next { left: 55px; } } @media screen and (max-width: 767px) { .swiper__buttons .swiper-button-next { left: 0; } } .swiper__buttons .swiper-button-next::after { content: "\f061"; } .swiper__buttons .swiper-button-prev { left: -100px; -webkit-transition: color 0.3s; transition: color 0.3s; } @media screen and (max-width: 1499px) { .swiper__buttons .swiper-button-prev { left: -55px; } } @media screen and (max-width: 767px) { .swiper__buttons .swiper-button-prev { left: 0; } } .swiper__buttons .swiper-button-prev::after { content: "\f060"; } /* ============================ 01.10 blog css =============================== */ .blog-posts { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; margin: 0 auto; border-top: 1px solid hsl(var(--secondary)/0.1); border-bottom: 1px solid hsl(var(--secondary)/0.1); } @media screen and (max-width: 767px) { .blog-posts { border-top: 0; } } .blog-post { display: grid; grid-template-columns: 1fr 624px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; border-bottom: 1px solid hsl(var(--secondary)/0.1); } @media screen and (max-width: 1199px) { .blog-post { grid-template-columns: 1fr 400px; } } @media screen and (max-width: 991px) { .blog-post { grid-template-columns: 1fr 350px; } } @media screen and (max-width: 767px) { .blog-post { grid-template-columns: 1fr; border: 1px solid hsl(var(--secondary)/0.1); border-bottom: 0; padding: 20px; } } .blog-post:last-child { border-bottom: 0; } .blog-post:hover .blog-post__image img:first-child { -webkit-transform: translatex(0) scalex(1); transform: translatex(0) scalex(1); opacity: 1; -webkit-filter: blur(0); filter: blur(0); } .blog-post:hover .blog-post__image img:nth-child(2) { -webkit-transform: translatex(-50%) scalex(2); transform: translatex(-50%) scalex(2); opacity: 0; -webkit-filter: blur(10px); filter: blur(10px); } @media screen and (max-width: 767px) { .blog-post__content { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; } } .blog-post__content .blog-post__meta { font-size: 1.125rem; color: hsl(var(--secondary)); } @media screen and (max-width: 991px) { .blog-post__content .blog-post__meta { font-size: 0.875rem; } } .blog-post__content .blog-post__title { font-size: 2.375rem; color: hsl(var(--secondary)); font-weight: var(--semibold); max-width: 575px; padding: 10px 0 30px; line-height: 1.3; -webkit-transition: all 0.3s; transition: all 0.3s; } .blog-post__content .blog-post__title:hover { color: hsl(var(--base)); } @media screen and (max-width: 1199px) { .blog-post__content .blog-post__title { font-size: 1.5625rem; } } @media screen and (max-width: 991px) { .blog-post__content .blog-post__title { font-size: 1.25rem; line-height: 1.5; } } @media screen and (max-width: 767px) { .blog-post__content .blog-post__title { font-size: 1.1875rem; padding-bottom: 20px; } } @media screen and (max-width: 575px) { .blog-post__content .blog-post__title { font-size: 1.125rem; } } .blog-post .post-img-content { border-left: 1px solid hsl(var(--secondary)/0.1); padding: 24px; padding-right: 0; } @media screen and (max-width: 767px) { .blog-post .post-img-content { border: 0; padding: 0; } } .blog-post__image { position: relative; overflow: hidden; border-radius: 20px 6px 6px 20px; } .blog-post__image img { position: relative; overflow: hidden; width: 100%; display: block; -webkit-transition: all 1s ease-in-out; transition: all 1s ease-in-out; } .blog-post__image img:nth-child(2) { -webkit-transition: all 1s ease-in-out; transition: all 1s ease-in-out; } .blog-post__image img:first-child { position: absolute; left: 0; top: 0; right: 0; bottom: 0; z-index: 1; -webkit-transform: translatex(50%) scalex(2); transform: translatex(50%) scalex(2); opacity: 0; -webkit-filter: blur(10px); filter: blur(10px); } .blog-post__image img:first-child img { -webkit-transform: scale(1); transform: scale(1); -webkit-transition: all 1s ease-in-out; transition: all 1s ease-in-out; } @media screen and (max-width: 767px) { .blog-post__image { border-radius: 15px; margin-bottom: 20px; } } .blog-content-area { border-top: 1px solid hsl(var(--secondary)/0.1); } .blog-details__text .custom_anime_top, .blog-details__img .custom_anime_top { position: relative; border-radius: 10px; } .blog-details__text .custom_anime_top img, .blog-details__img .custom_anime_top img { position: relative; overflow: hidden; width: 100%; display: block; -webkit-transition: all 1s ease-in-out; transition: all 1s ease-in-out; } .blog-details__text .custom_anime_top img:nth-child(2), .blog-details__img .custom_anime_top img:nth-child(2) { -webkit-transition: all 1s ease-in-out; transition: all 1s ease-in-out; } .blog-details__text .custom_anime_top img:first-child, .blog-details__img .custom_anime_top img:first-child { position: absolute; left: 0; top: 0; right: 0; bottom: 0; z-index: 1; -webkit-transform: translatex(50%) scalex(2); transform: translatex(50%) scalex(2); opacity: 0; -webkit-filter: blur(10px); filter: blur(10px); } .blog-details__text .custom_anime_top img:first-child img, .blog-details__img .custom_anime_top img:first-child img { -webkit-transform: scale(1); transform: scale(1); -webkit-transition: all 1s ease-in-out; transition: all 1s ease-in-out; } .blog-details__text .custom_anime_top:hover img:first-child, .blog-details__img .custom_anime_top:hover img:first-child { -webkit-transform: translatex(0) scalex(1); transform: translatex(0) scalex(1); opacity: 1; -webkit-filter: blur(0); filter: blur(0); } .blog-details__text .custom_anime_top:hover img:nth-child(2), .blog-details__img .custom_anime_top:hover img:nth-child(2) { -webkit-transform: translatex(-50%) scalex(2); transform: translatex(-50%) scalex(2); opacity: 0; -webkit-filter: blur(10px); filter: blur(10px); } .blog-details__text .blog-images, .blog-details__img .blog-images { overflow: hidden; border-bottom-left-radius: 30px; border-bottom-right-radius: 30px; } .blog-details__header { text-align: center; } .blog-details__header h2 { padding: 20px 0 40px; } .blog-details__header ul { display: grid; grid-template-columns: repeat(5, 1fr); -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; border: 1px solid hsl(var(--secondary)/0.25); border-radius: 0px 0px 15px 15px; } .blog-details__header ul li { width: 100%; border-right: 1px solid hsl(var(--secondary)/0.25); text-align: left; padding: 24px; font-weight: 600; } .blog-details__header ul li:last-child { border-right: 0; } .blog-details__header ul li .title { font-size: 1.125rem; font-weight: var(--semibold); color: hsl(var(--secondary)); padding-bottom: 5px; } .blog-details__header ul li .social { display: -webkit-box; display: -ms-flexbox; display: flex; gap: 15px; } .blog-details__header ul li .social a { color: hsl(var(--secondary)/0.5); font-size: 1rem; } .blog-details__header ul li .social a:hover { color: hsl(var(--base)); } .blog-details__text { display: grid; gap: 30px; margin-top: 30px; } .blog-details__text h2 { font-size: 2.375rem; font-weight: var(--semibold); padding-top: 20px; } @media screen and (max-width: 991px) { .blog-details__text h2 { font-size: 2.1875rem; } } @media screen and (max-width: 767px) { .blog-details__text h2 { font-size: 1.875rem; } } @media screen and (max-width: 575px) { .blog-details__text h2 { font-size: 1.5625rem; } } .blog-details__text p { text-align: justify; } .blog-details__text ul { display: grid; gap: 5px; } .blog-details__text ul li { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; font-weight: 500; } .blog-details__text ul li:before { content: "\f111"; font-weight: 900; font-family: "Font Awesome 6 free"; font-size: 7px; margin-right: 10px; color: hsl(var(--secondary)/0.5); } .blog-details__text .blog-info { border-radius: 4px 4px 16px 16px; background: hsl(var(--white)); padding: 40px; } .blog-details__text .blog-info svg { fill: hsl(var(--base)); } .blog-details__text .blog-info p { padding: 24px 0; } .blog-details__text .blog-info .blog-author { color: hsl(var(--base)); font-weight: var(--semibold); } .blog-details__text .blog-info .blog-author::after { content: "____"; } .blog-details__text .blog-info .blog-desc { color: hsl(var(--secondary)/0.5); font-size: 0.875rem; } .blog-details .tag-share-content { border-top: 1px solid hsl(var(--secondary)/0.1); border-bottom: 1px solid hsl(var(--secondary)/0.1); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; gap: 10px; padding: 30px 0; } @media screen and (max-width: 767px) { .blog-details .tag-share-content { -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; text-align: center; gap: 20px; } } .blog-details .tag-share-content .tags { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 5px; } .blog-details .tag-share-content .tags a { color: hsl(var(--secondary)/0.5); font-size: 0.875rem; } .blog-details .tag-share-content .tags a:hover { color: hsl(var(--base)); } .blog-details .tag-share-content .share { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 10px; } .blog-details .tag-share-content .share a { color: hsl(var(--secondary)); font-size: 0.813rem; border: 1px solid hsl(var(--secondary)/0.5); width: 35px; height: 35px; border-radius: 50%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .blog-details .tag-share-content .share a:hover { background-color: hsl(var(--base)); border-color: hsl(var(--base)); color: hsl(var(--white)); } .blog-details .post-comment { background: hsl(var(--white)); border-radius: 8px 8px 16px 16px; padding: 40px; } @media screen and (max-width: 767px) { .blog-details .post-comment { padding: 30px 20px; } } .blog-details .post-comment h3 { margin-bottom: 30px; } .blog-details .post-comment textarea, .blog-details .post-comment input { background: hsl(var(--section-bg)); border: 0; border-radius: 0; padding: 24px; border-radius: 4px 4px 8px 8px; } .blog-details .post-comment input { height: 60px; } .blog-details .post-comment .btn-magnetic { background: hsl(var(--base)); color: hsl(var(--white)); border-color: hsl(var(--white)); } .blog-details .post-comment .btn-magnetic span { background-color: hsl(var(--secondary)); } .info-container { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; gap: 30px; } @media screen and (max-width: 374px) { .info-container { -ms-flex-wrap: wrap; flex-wrap: wrap; } } .info-container .author-photo { width: 50px; height: 50px; border-radius: 50%; overflow: hidden; -webkit-transition: all 0.5s; transition: all 0.5s; } .info-container .author-photo:hover { border: 2px solid hsl(var(--base)); -webkit-transform: scale(1.05); transform: scale(1.05); } .info-container .author-photo img { width: 50px; height: 50px; -o-object-fit: cover; object-fit: cover; } .info-container .info-text { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .info-container .info-text span { color: hsl(var(--secondary)/0.5); font-size: 0.75rem; text-align: left; display: block; } .info-container .info-text span.bold { font-size: 0.875rem; font-weight: var(--semibold); color: hsl(var(--secondary)); } .info-container .info-item { text-align: left; } .info-container .info-item:hover span.bold { color: hsl(var(--base)); } .info-container .info-item span { color: hsl(var(--secondary)/0.5); display: block; font-size: 0.75rem; text-align: left; } .info-container .info-item span.bold { font-size: 0.875rem; font-weight: var(--semibold); color: hsl(var(--secondary)); -webkit-transition: all 0.3s; transition: all 0.3s; } /* ============================ 02.01 about banner css =============================== */ .about-banner { background-image: url("../images/banner/banner-bg.png"); background-position: center center; background-repeat: no-repeat; background-size: cover; position: relative; z-index: -1; } .about-banner__content { position: relative; } .about-banner__content__customers { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; position: absolute; left: 80px; bottom: 17%; } @media screen and (max-width: 1199px) { .about-banner__content__customers { bottom: 14%; left: 20px; } } @media screen and (max-width: 991px) { .about-banner__content__customers { bottom: 3%; } } .about-banner__content__avatars { display: -webkit-box; display: -ms-flexbox; display: flex; } .about-banner__content__avatars img { width: 50px; height: 50px; border-radius: 50%; margin-left: -25px; border: 2px solid hsl(var(--white)); -webkit-transition: all 0.3s; transition: all 0.3s; cursor: pointer; } @media screen and (max-width: 424px) { .about-banner__content__avatars img { width: 40px; height: 40px; } } .about-banner__content__avatars img:hover { -webkit-transform: translateY(-10px); transform: translateY(-10px); z-index: 1; } .about-banner__content__avatars .arrow { width: 50px; height: 50px; border-radius: 50%; background: hsl(var(--base)); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; font-size: 30px; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); margin-left: -25px; border: 2px solid hsl(var(--white)); color: hsl(var(--white)); cursor: pointer; } @media screen and (max-width: 424px) { .about-banner__content__avatars .arrow { width: 40px; height: 40px; } } .about-banner__content__stats { display: grid; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-left: 15px; } .about-banner__content__stats .odometer-text { font-size: 1.875rem; font-weight: var(--semibold); color: hsl(var(--secondary)); line-height: 1; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } @media screen and (max-width: 767px) { .about-banner__content__stats .odometer-text { color: hsl(var(--white)); } } @media screen and (max-width: 424px) { .about-banner__content__stats .odometer-text { font-size: 1.625rem; } } .about-banner__content__stats p { font-size: 1rem; color: hsl(var(--secondary)/0.5); } @media screen and (max-width: 767px) { .about-banner__content__stats p { color: hsl(var(--white)); } } .about-banner__content__image { position: relative; z-index: -1; } .about-banner__content__image__img { position: relative; text-align: center; padding: 0 1.875rem; margin: 0 auto; max-width: 31.25rem; } .about-banner__content__image__img img { width: 100%; position: relative; z-index: 1; } .about-banner__content__image__img .logo-circle { position: absolute; top: 80px; right: -80px; z-index: 1; } .about-banner__content__image__text .last-name, .about-banner__content__image__text .first-name { position: absolute; top: 35%; font-size: 160px; font-weight: var(--bold); color: hsl(var(--secondary)); } @media screen and (max-width: 1399px) { .about-banner__content__image__text .last-name, .about-banner__content__image__text .first-name { font-size: 150px; } } @media screen and (max-width: 1199px) { .about-banner__content__image__text .last-name, .about-banner__content__image__text .first-name { font-size: 130px; top: 50%; } } @media screen and (max-width: 991px) { .about-banner__content__image__text .last-name, .about-banner__content__image__text .first-name { font-size: 100px; } } @media screen and (max-width: 767px) { .about-banner__content__image__text .last-name, .about-banner__content__image__text .first-name { font-size: 70px; top: 60%; } } @media screen and (max-width: 424px) { .about-banner__content__image__text .last-name, .about-banner__content__image__text .first-name { font-size: 50px; top: 51%; } } .about-banner__content__image__text .last-name strong::before, .about-banner__content__image__text .first-name strong::before { content: attr(data-before); position: absolute; top: 0; left: 0; -webkit-text-fill-color: transparent; -webkit-text-stroke: 2.5px; color: hsl(var(--white)); z-index: 11; } @media screen and (max-width: 991px) { .about-banner__content__image__text .last-name strong::before, .about-banner__content__image__text .first-name strong::before { -webkit-text-stroke: 1.5px; } } .about-banner__content__image__text .first-name { left: 0; } .about-banner__content__image__text .last-name { top: 60%; right: 0; right: 0; } @media screen and (max-width: 1199px) { .about-banner__content__image__text .last-name { top: 70%; } } @media screen and (max-width: 424px) { .about-banner__content__image__text .last-name { top: 65%; } } .about-banner__content__desc { position: absolute; right: 0; top: 30%; max-width: 385px; } @media screen and (max-width: 1199px) { .about-banner__content__desc { right: -38px; top: 14%; max-width: 358px; } } @media screen and (max-width: 991px) { .about-banner__content__desc { display: none; } } .about-banner__content__desc h1 { font-size: 2.375rem; font-weight: var(--semibold); color: hsl(var(--secondary)); margin-bottom: 20px; } .about-banner__content__desc p { font-size: 1rem; color: hsl(var(--secondary)/0.5); } /* ============================ 02.02 customers feedback css =============================== */ .customers-feedback { background: hsl(var(--white)); border-radius: 0px 0px 60px 60px; } @media screen and (max-width: 991px) { .customers-feedback { border-radius: 0 0 30px 30px; } } .customers-feedback__title { text-align: center; } .customers-feedback__content { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; } @media screen and (max-width: 767px) { .customers-feedback__content { grid-template-columns: repeat(2, 1fr); } } .customers-feedback__content__item { border-radius: 4px 4px 16px 16px; padding: 20px 20px 35px; text-align: center; border: 1px solid hsl(var(--secondary)/0.1); -webkit-transition: all 0.3s; transition: all 0.3s; } .customers-feedback__content__item:hover { background: hsl(var(--base)); border-color: hsl(var(--base)); color: hsl(var(--white)); } .customers-feedback__content__item:hover .number, .customers-feedback__content__item:hover p { color: hsl(var(--white)); } .customers-feedback__content__item .number { font-size: 3.625rem; font-weight: var(--bold); color: hsl(var(--secondary)); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-transition: all 0.3s; transition: all 0.3s; } @media screen and (max-width: 1199px) { .customers-feedback__content__item .number { font-size: 3rem; } } @media screen and (max-width: 991px) { .customers-feedback__content__item .number { font-size: 2.375rem; } } @media screen and (max-width: 767px) { .customers-feedback__content__item .number { font-size: 2.063rem; } } @media screen and (max-width: 424px) { .customers-feedback__content__item .number { font-size: 1.75rem; } } .customers-feedback__content__item p { color: hsl(var(--secondary)); font-size: 1rem; max-width: 100px; margin: 0 auto; -webkit-transition: all 0.3s; transition: all 0.3s; font-weight: 400; } /* ============================ 02.03 my skills css =============================== */ .my-skills__title { text-align: center; } .my-skills__accordion .accordion-item { border-bottom: 1px solid hsl(var(--secondary)/0.1); -webkit-transition: all 0.3s ease; transition: all 0.3s ease; } .my-skills__accordion .accordion-item:first-child { border-top: 1px solid hsl(var(--secondary)/0.1); } .my-skills__accordion .accordion-button { font-size: 2.375rem; font-weight: var(--semibold); color: hsl(var(--secondary)); padding: 15px 0; } @media screen and (max-width: 1199px) { .my-skills__accordion .accordion-button { font-size: 2.125rem; } } @media screen and (max-width: 991px) { .my-skills__accordion .accordion-button { font-size: 1.625rem; } } @media screen and (max-width: 424px) { .my-skills__accordion .accordion-button { font-size: 1.5rem; } } .my-skills__accordion .accordion-button::after { content: "+"; font-weight: 900; font-family: "Font Awesome 6 free"; font-size: 1.75rem; } .my-skills__accordion .accordion-button:not(.collapsed)::after { content: "\f068"; } .my-skills__content { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; padding-bottom: 30px; } @media screen and (max-width: 991px) { .my-skills__content { grid-template-columns: 1fr; } } .my-skills__content__item { position: relative; overflow: hidden; z-index: 1; -webkit-transition: all cubic-bezier(0.645, 0.045, 0.355, 1) 0.7s; transition: all cubic-bezier(0.645, 0.045, 0.355, 1) 0.7s; border-radius: 4px 16px 16px 4px; background: hsl(var(--white)); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; padding: 30px; } .my-skills__content__item:hover, .my-skills__content__item:focus { color: hsl(var(--white)); } .my-skills__content__item:hover span, .my-skills__content__item:focus span { width: 225%; height: 225%; } .my-skills__content__item span { position: absolute; width: 0; height: 0; background-color: hsl(var(--base)); -webkit-transition: width 0.6s ease-in-out, height 0.6s ease-in-out; transition: width 0.6s ease-in-out, height 0.6s ease-in-out; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); z-index: -1; border-radius: 50px; } .my-skills__content__item:nth-child(even) { border-radius: 16px 4px 4px 16px; } @media screen and (max-width: 767px) { .my-skills__content__item:nth-child(even) { border-radius: 15px; } } @media screen and (max-width: 767px) { .my-skills__content__item { border-radius: 15px; display: grid; gap: 20px; text-align: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } } .my-skills__content__item:hover p, .my-skills__content__item:hover h4 { color: hsl(var(--white)); } .my-skills__content__item h4 { max-width: 238px; font-size: 1.375rem; color: hsl(var(--secondary)); font-weight: var(--semibold); -webkit-transition: all 0.3s; transition: all 0.3s; } @media screen and (max-width: 767px) { .my-skills__content__item h4 { font-size: 1.125rem; } } .my-skills__content__item p { -webkit-transition: all 0.3s; transition: all 0.3s; } .my-skills__content__item .skills { text-align: right; } @media screen and (max-width: 767px) { .my-skills__content__item .skills { text-align: center; } } .my-skills__content__item .skills button { background: hsl(var(--section-bg)); font-size: 0.875rem; font-weight: var(--semibold); color: hsl(var(--secondary)); padding: 3px 15px; border-radius: 8px 2px 2px 8px; margin-bottom: 10px; } /* ============================ 02.04 design meets css =============================== */ .design-meets { background: hsl(var(--secondary)); } .design-meets__title h2 { color: hsl(var(--white)); } .design-meets__content { display: grid; grid-template-columns: 250px 1fr; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 80px; } @media screen and (max-width: 991px) { .design-meets__content { grid-template-columns: 1fr; } } .design-meets__content__img svg { opacity: 0.1; -webkit-animation: scale-svg 3500ms ease-out infinite; animation: scale-svg 3500ms ease-out infinite; } @-webkit-keyframes scale-svg { 0% { -webkit-transform: scale(0.7); transform: scale(0.7); } 40% { -webkit-transform: scale(0.9); transform: scale(0.9); } 100% { -webkit-transform: scale(0.7); transform: scale(0.7); } } @keyframes scale-svg { 0% { -webkit-transform: scale(0.7); transform: scale(0.7); } 40% { -webkit-transform: scale(0.9); transform: scale(0.9); } 100% { -webkit-transform: scale(0.7); transform: scale(0.7); } } .design-meets__content__list .list-item { position: relative; cursor: pointer; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; font-size: 1.375rem; color: hsl(var(--white)); padding: 30px 0; border-bottom: 0.5px solid hsl(var(--white)/0.3); -webkit-transition: all 0.3s; transition: all 0.3s; font-weight: var(--semibold); } .design-meets__content__list .list-item:first-child { border-top: 0.5px solid hsl(var(--white)/0.3); } @media screen and (max-width: 575px) { .design-meets__content__list .list-item { display: grid; gap: 5px; padding: 22px 0; } } .design-meets__content__list .list-item:hover { color: hsl(var(--base)); } .design-meets__content__list .list-item:hover .date { color: hsl(var(--base)); font-weight: 500; } .design-meets__content__list .list-item .date { font-weight: 300; color: hsl(var(--white)); } @media screen and (max-width: 575px) { .design-meets__content__list .list-item .date { font-size: 1rem; } } .design-meets__content .hover-image-container { position: absolute; pointer-events: none; top: 0; left: 0; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); display: none; z-index: 1000; } .design-meets__content .hover-image-container::before, .design-meets__content .hover-image-container::after { content: ""; position: absolute; bottom: 0; left: -40%; width: 150px; height: 119px; border-radius: 12px 4px 4px 12px; background: hsl(var(--white)); z-index: -1; } .design-meets__content .hover-image-container::before { background: hsl(var(--base)); -webkit-transform: rotate(-15deg); transform: rotate(-15deg); } .design-meets__content .hover-image-container img { max-width: 130px; border-radius: 5px; margin: 0 auto; margin-left: -20px; } /* ============================ 02.04 design meets css =============================== */ .experiences-area__title { text-align: center; } .experiences-area__title h2 { font-weight: var(--bold); color: hsl(var(--secondary)); } .experiences-area .experiences-content { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; } @media screen and (max-width: 991px) { .experiences-area .experiences-content { grid-template-columns: repeat(3, 1fr); } } @media screen and (max-width: 767px) { .experiences-area .experiences-content { grid-template-columns: repeat(2, 1fr); } } .experiences-area .experiences-content__item { border-radius: 4px 4px 12px 12px; height: 135px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; border: 1px solid hsl(var(--secondary)/0.1); padding: 20px; position: relative; overflow: hidden; z-index: 1; -webkit-transition: all 0.5s; transition: all 0.5s; } @media screen and (max-width: 991px) { .experiences-area .experiences-content__item { border-radius: 10px; } } @media screen and (max-width: 424px) { .experiences-area .experiences-content__item { display: grid; gap: 15px; height: auto; } } .experiences-area .experiences-content__item::before { content: ""; position: absolute; right: 5%; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); background: hsl(var(--base)); width: 80px; height: 80px; z-index: -1; border-radius: 100%; -webkit-transition: all 0.5s; transition: all 0.5s; opacity: 0; } .experiences-area .experiences-content__item:hover { -webkit-transform: scale(1.05); transform: scale(1.05); } .experiences-area .experiences-content__item:hover .number-text p, .experiences-area .experiences-content__item:hover .number-text .number { color: hsl(var(--white)); } .experiences-area .experiences-content__item:hover::before { width: 100%; height: 100%; right: 0; border-radius: 0; opacity: 1; } .experiences-area .experiences-content__item:nth-child(n+5):nth-child(-n+8), .experiences-area .experiences-content__item:nth-child(n+13):nth-child(-n+16), .experiences-area .experiences-content__item:nth-child(n+21):nth-child(-n+24), .experiences-area .experiences-content__item:nth-child(n+29):nth-child(-n+34) { border-radius: 12px 12px 4px 4px; } @media screen and (max-width: 991px) { .experiences-area .experiences-content__item:nth-child(n+5):nth-child(-n+8), .experiences-area .experiences-content__item:nth-child(n+13):nth-child(-n+16), .experiences-area .experiences-content__item:nth-child(n+21):nth-child(-n+24), .experiences-area .experiences-content__item:nth-child(n+29):nth-child(-n+34) { border-radius: 10px; } } .experiences-area .experiences-content__item .number-text .number { font-size: 3rem; font-weight: var(--bold); color: hsl(var(--secondary)); -webkit-transition: all 0.5s; transition: all 0.5s; } @media screen and (max-width: 1199px) { .experiences-area .experiences-content__item .number-text .number { font-size: 2.375rem; } } @media screen and (max-width: 991px) { .experiences-area .experiences-content__item .number-text .number { font-size: 1.75rem; } } @media screen and (max-width: 424px) { .experiences-area .experiences-content__item .number-text .number { font-size: 1.5rem; } } .experiences-area .experiences-content__item .number-text p { font-size: 1.125rem; font-weight: var(--semibold); color: hsl(var(--secondary)/0.5); -webkit-transition: all 0.5s; transition: all 0.5s; } @media screen and (max-width: 1199px) { .experiences-area .experiences-content__item .number-text p { font-size: 1rem; } } .experiences-area .experiences-content__item .icon { width: 90px; height: 90px; border-radius: 50%; background-color: hsl(var(--white)); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } @media screen and (max-width: 1199px) { .experiences-area .experiences-content__item .icon { width: 65px; height: 65px; padding: 10px; } } /* ============================ services css =============================== */ .services-details-banner__title { text-align: center; } .services-details-banner__title h2 { color: hsl(var(--secondary)); max-width: 850px; margin: 40px auto 0; } .services-details-content__left { display: grid; gap: 24px; } .services-details-content__left .custom_anime_top { position: relative; border-radius: 10px; border-radius: 8px 8px 16px 16px; overflow: hidden; } .services-details-content__left .custom_anime_top img { position: relative; overflow: hidden; width: 100%; display: block; -webkit-transition: all 1s ease-in-out; transition: all 1s ease-in-out; } .services-details-content__left .custom_anime_top img:nth-child(2) { -webkit-transition: all 1s ease-in-out; transition: all 1s ease-in-out; } .services-details-content__left .custom_anime_top img:first-child { position: absolute; left: 0; top: 0; right: 0; bottom: 0; z-index: 1; -webkit-transform: translatex(50%) scalex(2); transform: translatex(50%) scalex(2); opacity: 0; -webkit-filter: blur(10px); filter: blur(10px); } .services-details-content__left .custom_anime_top img:first-child img { -webkit-transform: scale(1); transform: scale(1); -webkit-transition: all 1s ease-in-out; transition: all 1s ease-in-out; } .services-details-content__left .custom_anime_top:hover img:first-child { -webkit-transform: translatex(0) scalex(1); transform: translatex(0) scalex(1); opacity: 1; -webkit-filter: blur(0); filter: blur(0); } .services-details-content__left .custom_anime_top:hover img:nth-child(2) { -webkit-transform: translatex(-50%) scalex(2); transform: translatex(-50%) scalex(2); opacity: 0; -webkit-filter: blur(10px); filter: blur(10px); } .services-details-content__left h3 { font-size: 2.375rem; color: hsl(var(--secondary)); font-weight: var(--semibold); } @media screen and (max-width: 991px) { .services-details-content__left h3 { font-size: 1.875rem; } } @media screen and (max-width: 767px) { .services-details-content__left h3 { font-size: 1.75rem; } } @media screen and (max-width: 575px) { .services-details-content__left h3 { font-size: 1.375rem; } } .services-details-content__left ul { display: grid; gap: 10px; } .services-details-content__left ul li { font-size: 0.875rem; font-weight: var(--semibold); color: hsl(var(--secondary)/0.5); position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 10px; } .services-details-content__left ul li::before { content: "\f111"; font-weight: 900; font-family: "Font Awesome 6 free"; font-size: 5px; } .services-details-content__sidebar .sidebar-nav { border-radius: 8px 8px 16px 16px; border: 1px solid hsl(var(--secondary)/0.1); padding: 24px; display: grid; gap: 15px; } .services-details-content__sidebar .sidebar-nav li a { font-size: 0.875rem; font-weight: var(--semibold); color: hsl(var(--secondary)); padding: 10px 25px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-transition: all 0.2s ease; transition: all 0.2s ease; border-radius: 2px 2px 8px 8px; border: 1px solid hsl(var(--secondary)/0.1); } .services-details-content__sidebar .sidebar-nav li a:hover::after { -webkit-transform: translateX(10px); transform: translateX(10px); } .services-details-content__sidebar .sidebar-nav li a::after { content: "\f054"; font-weight: 900; font-family: "Font Awesome 6 free"; -webkit-transition: all 0.2s; transition: all 0.2s; } .services-details-content__sidebar .sidebar-nav li a:hover { color: hsl(var(--white)); background: hsl(var(--base)); } .services-details-content__sidebar .get-touch { padding: 24px; border-radius: 8px 8px 16px 16px; border: 1px solid hsl(var(--secondary)/0.1); margin-top: 24px; } .services-details-content__sidebar .get-touch .touch-bg { background-position: center center; background-repeat: no-repeat; background-size: cover; background-image: url("../images/blog/s1.png"); position: relative; border-radius: 8px 8px 16px 16px; height: 368px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .services-details-content__sidebar .get-touch .touch-bg::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: hsl(var(--secondary)); opacity: 0.7; border-radius: 8px 8px 16px 16px; } .services-details-content__sidebar .get-touch .btn-magnetic { background: hsl(var(--white)); border: 0; } .contact-details__header { text-align: center; } .contact-details__header h1 { font-size: 110px; line-height: 1.2; margin-top: -20px; text-transform: uppercase; } @media screen and (max-width: 1399px) { .contact-details__header h1 { font-size: 6.25rem; } } @media screen and (max-width: 1199px) { .contact-details__header h1 { font-size: 5rem; margin-top: -10px; } } @media screen and (max-width: 991px) { .contact-details__header h1 { font-size: 3.75rem; margin-top: -5px; } } @media screen and (max-width: 767px) { .contact-details__header h1 { font-size: 2.5rem; } } @media screen and (max-width: 575px) { .contact-details__header h1 { font-size: 1.875rem; } } .contact-details__header p { max-width: 660px; margin: 20px auto 0; } .contact-details__info { border-radius: 12px 12px 20px 20px; background: hsl(var(--white)); display: grid; grid-template-columns: 360px 1fr; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 50px; padding: 50px; } @media screen and (max-width: 991px) { .contact-details__info { grid-template-columns: 1fr; } } @media screen and (max-width: 575px) { .contact-details__info { padding: 30px; } } .contact-details__info__address { border-radius: 8px 8px 16px 16px; background: hsl(var(--section-bg)); padding: 30px; display: grid; gap: 24px; } .contact-details__info__address .contact-item { display: -webkit-box; display: -ms-flexbox; display: flex; gap: 10px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .contact-details__info__address .contact-item:hover .icon { background: hsl(var(--base)); } .contact-details__info__address .contact-item .icon { border-radius: 4px 4px 10px 10px; min-width: 48px; height: 48px; background-color: hsl(var(--secondary)); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; color: hsl(var(--white)); font-size: 1.438rem; -webkit-transition: all 0.3s; transition: all 0.3s; } .contact-details__info__address .contact-item .info span { display: block; } .contact-details__info__address .contact-item .info strong { color: hsl(var(--secondary)); } .contact-details__info__address .social-buttons { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 10px; -ms-flex-wrap: wrap; flex-wrap: wrap; } .contact-details__info__address .social-buttons .btn-magnetic { border-radius: 2px 2px 4px 4px; background: hsl(var(--white)); border: 0; min-width: 120px; font-weight: var(--medium); } .contact-details__info__form textarea, .contact-details__info__form input { background: hsl(var(--section-bg)); border: 0; border-radius: 0; padding: 24px; border-radius: 4px 4px 8px 8px; border: 1px solid hsl(var(--section-bg)/0.1); } .contact-details__info__form textarea:focus, .contact-details__info__form input:focus { -webkit-box-shadow: none; box-shadow: none; outline: none; background: hsl(var(--section-bg)); border-color: var(--secondary)/0.1; } .contact-details__info__form input { height: 60px; } .contact-details__info__form .btn-magnetic { background: hsl(var(--base)); color: hsl(var(--white)); border-color: hsl(var(--white)); } .contact-details__info__form .btn-magnetic span { background-color: hsl(var(--secondary)); } /* ============================ questions css =============================== */ .questions-content__accordion .accordion-item { border-bottom: 1px solid hsl(var(--secondary)/0.1); -webkit-transition: all 0.3s ease; transition: all 0.3s ease; } .questions-content__accordion .accordion-item:first-child { border-top: 1px solid hsl(var(--secondary)/0.1); } .questions-content__accordion .accordion-button { font-size: 1.125rem; font-weight: var(--semibold); color: hsl(var(--secondary)); padding: 15px 0; } .questions-content__accordion .accordion-button::after { content: "+"; font-weight: 900; font-family: "Font Awesome 6 free"; } .questions-content__accordion .accordion-button:not(.collapsed) { color: hsl(var(--base)); } .questions-content__accordion .accordion-button:not(.collapsed)::after { content: "\f068"; } .questions-content__accordion .accordion-body p { padding-bottom: 20px; } /* Style the cursor elements */ .cursor, .cursor-trail { position: fixed; top: 0; left: 0; pointer-events: none; border-radius: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); z-index: 1000; } .cursor { width: 5px; height: 5px; background-color: hsl(var(--primary)); } .cursor-trail { width: 30px; height: 30px; background-color: hsl(var(--primary)/0.3); } /* ============================ preload Css =============================== */ .preloader { position: fixed; z-index: 999999; background-color: hsl(var(--black)); width: 100%; height: 100%; } .loader-p { border: 0 solid transparent; width: 150px; height: 150px; position: absolute; top: calc(50vh - 75px); left: calc(50vw - 75px); } .loader-p::before, .loader-p::after { content: ""; background-image: url("../images/shape-svg/Logo.svg"); background-position: center center; background-repeat: no-repeat; background-size: cover; width: inherit; height: inherit; position: absolute; top: 0; left: 0; } .loader-p:before { -webkit-animation-delay: 0.5s; animation-delay: 0.5s; } /* Preloader container styling */ #preloader { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background-color: hsl(var(--black)/0.9); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; z-index: 9999; opacity: 1; -webkit-transition: opacity 0.5s ease; transition: opacity 0.5s ease; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } /* Logo animation styling */ #preloader img { width: 100px; /* Adjust size as needed */ -webkit-animation: pulse 1.5s ease-in-out infinite, fade 1.5s ease-in-out infinite alternate; animation: pulse 1.5s ease-in-out infinite, fade 1.5s ease-in-out infinite alternate; } /* Scale (pulse) animation */ @-webkit-keyframes pulse { 0%, 100% { -webkit-transform: scale(1); transform: scale(1); } 50% { -webkit-transform: scale(1.1); transform: scale(1.1); /* Adjust scale intensity */ } } @keyframes pulse { 0%, 100% { -webkit-transform: scale(1); transform: scale(1); } 50% { -webkit-transform: scale(1.1); transform: scale(1.1); /* Adjust scale intensity */ } } /* Fade effect */ @-webkit-keyframes fade { 0% { opacity: 1; } 100% { opacity: 0.5; /* Adjust fade intensity */ } } @keyframes fade { 0% { opacity: 1; } 100% { opacity: 0.5; /* Adjust fade intensity */ } } /* ============================ navbar css =============================== */ .navbar-one { width: 100%; z-index: 22; padding: 0; position: absolute; } .navbar-one .navbar-brand { display: none; -webkit-transition: all 0.4s; transition: all 0.4s; } @media screen and (max-width: 991px) { .navbar-one .navbar-brand { display: block; } } .navbar-one .navbar-nav { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-transition: all 0.4s; transition: all 0.4s; } .navbar-one.sticky .container { -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); background: hsl(var(--secondary)/0.8); } .navbar-one .container { max-width: 100%; background: hsl(var(--secondary)); border-radius: 0px 0px 20px 20px; -webkit-transition: all 0.4s; transition: all 0.4s; } @media (min-width: 992px) { .navbar-one .container { max-width: 55.125rem; } } @media screen and (max-width: 991px) { .navbar-one .container { padding: 10px 20px; border-radius: 0px 0px 10px 10px; } } .navbar-one .logo-img { height: 2.5rem; } .navbar-one .nav__offcanvas { display: none; } .navbar-nav { gap: 0.9375rem; } @media screen and (max-width: 991px) { .navbar-nav { gap: 0rem; } } .navbar-nav .nav-item .nav-link { color: hsl(var(--white)); font-size: 0.875rem; font-weight: var(--semibold); padding: 1.25rem 0.625rem; text-transform: uppercase; } @media screen and (max-width: 991px) { .navbar-nav .nav-item .nav-link { padding: 0.625rem; } } .navbar-nav .nav-item .nav-link span { position: relative; -webkit-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } .navbar-nav .nav-item .nav-link span::before { content: attr(data-before); -webkit-transition: 0.5s; transition: 0.5s; color: hsl(var(--base)); position: absolute; top: 0; bottom: 0; left: 0; right: 0; width: 0; overflow: hidden; } .navbar-nav .nav-item .nav-link.active, .navbar-nav .nav-item .nav-link:hover { color: hsl(var(--base)); } .navbar-nav .nav-item .nav-link.active span::before, .navbar-nav .nav-item .nav-link:hover span::before { width: 100%; -webkit-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } .navbar-tow { padding: 0; z-index: 22; border-bottom: 1px solid hsl(var(--secondary)/0.1); } @media screen and (max-width: 991px) { .navbar-tow .nav__offcanvas { display: none; } } @media screen and (max-width: 991px) { .navbar-tow { background: hsl(var(--secondary)); } } .navbar-tow.sticky { z-index: 222; background-color: hsl(var(--section-bg)); height: 80px !important; } .navbar-tow.sticky .offcanvas { padding: 10px 0; } @media screen and (max-width: 991px) { .navbar-tow.sticky { background: hsl(var(--secondary)); } } .navbar-tow .navbar-brand { padding-right: 20px; } .navbar-tow .navbar-brand img { height: 61px; } .navbar-tow .offcanvas { border-left: 1px solid hsl(var(--secondary)/0.1) !important; border-right: 1px solid hsl(var(--secondary)/0.1) !important; padding: 20px 0; } .navbar-tow .navbar-nav { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .navbar-tow .offcanvas-body { background: hsl(var(--secondary)); } .navbar-tow .nav__offcanvas { padding-left: 20px; font-size: 1rem; font-weight: 600; color: hsl(var(--secondary)); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 10px; } @media screen and (max-width: 991px) { .navbar-tow .nav__offcanvas { display: none; } } button.navbar-toggler { color: hsl(var(--white)); border-color: hsl(var(--white)); padding: 10px 12px; } /* ============================ footer css =============================== */ .footer-area { background-color: hsl(var(--secondary)); position: relative; z-index: 1; overflow: hidden; } .footer-area::before { content: ""; position: absolute; left: 0; top: 0; right: 0; width: 100%; height: 100%; background-position: center center; background-repeat: no-repeat; background-size: cover; background-image: url("../images/shape-svg/footer-shape.svg"); z-index: -1; opacity: 0.04; -webkit-animation: jump1 9000ms ease-out infinite; animation: jump1 9000ms ease-out infinite; } @-webkit-keyframes jump1 { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 40% { -webkit-transform: translate3d(0, 20%, 0); transform: translate3d(0, 20%, 0); } 100% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes jump1 { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 40% { -webkit-transform: translate3d(0, 20%, 0); transform: translate3d(0, 20%, 0); } 100% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .footer-area__title { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } @media screen and (max-width: 767px) { .footer-area__title { -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; gap: 24px; text-align: center; } } .footer-area__title h2 { color: hsl(var(--white)); font-size: 160px; } @media screen and (max-width: 1399px) { .footer-area__title h2 { font-size: 120px; } } @media screen and (max-width: 1199px) { .footer-area__title h2 { font-size: 110px; } } @media screen and (max-width: 991px) { .footer-area__title h2 { font-size: 100px; } } @media screen and (max-width: 767px) { .footer-area__title h2 { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; font-size: 70px; margin-top: 15px; } } .footer-area__title h2 span { -webkit-text-fill-color: transparent; -webkit-text-stroke: 2.5px; } .footer-area .footer-widget { border-top: 1px solid hsl(var(--white)/0.2); } .footer-area .footer-widget__content { display: grid; grid-template-columns: 1fr 350px; } @media screen and (max-width: 1399px) { .footer-area .footer-widget__content { grid-template-columns: 1fr 250px; } } @media screen and (max-width: 991px) { .footer-area .footer-widget__content { grid-template-columns: 1fr; } } .footer-area .footer-widget__left, .footer-area .footer-widget__right { padding: 60px 0; } @media screen and (max-width: 374px) { .footer-area .footer-widget__left, .footer-area .footer-widget__right { padding: 40px 0; } } .footer-area .footer-widget__left { border-right: 1px solid hsl(var(--white)/0.2); display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; } @media screen and (max-width: 991px) { .footer-area .footer-widget__left { border-right: 0; border-bottom: 1px solid hsl(var(--white)/0.2); } } @media screen and (max-width: 767px) { .footer-area .footer-widget__left { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; row-gap: 35px; } } .footer-area .footer-widget__right { padding-left: 30px; } @media screen and (max-width: 991px) { .footer-area .footer-widget__right { padding-left: 0; } } .footer-area .footer-widget__title { color: hsl(var(--white)); font-size: 1.125rem; font-weight: var(--semibold); margin-bottom: 20px; } .footer-area .footer-widget__list { display: grid; gap: 5px; } .footer-area .footer-widget__list a { font-size: 0.875rem; color: hsl(var(--white)); position: relative; display: block; padding: 5px 0; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; } .footer-area .footer-widget__list a:hover { padding-left: 15px; color: hsl(var(--base)); font-weight: var(--semibold); } .footer-area .footer-widget__list a:hover::before { width: 12px; opacity: 1; } .footer-area .footer-widget__list a::before { content: ""; position: absolute; top: 50%; left: 0; -webkit-transform: translateY(-50%); transform: translateY(-50%); width: 5px; height: 3px; background: hsl(var(--primary)); border-radius: 50px; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; opacity: 0; } .footer-area .footer-widget .footer-action-form input { width: 100%; border: 0; border-bottom: 1px solid hsl(var(--white)); outline: none; -webkit-box-shadow: none; box-shadow: none; background: none; font-size: 0.875rem; color: hsl(var(--white)); padding: 10px 0; } .footer-area .footer-widget .footer-action-form input::-webkit-input-placeholder { color: hsl(var(--white)/0.5); } .footer-area .footer-widget .footer-action-form input::-moz-placeholder { color: hsl(var(--white)/0.5); } .footer-area .footer-widget .footer-action-form input:-ms-input-placeholder { color: hsl(var(--white)/0.5); } .footer-area .footer-widget .footer-action-form input::-ms-input-placeholder { color: hsl(var(--white)/0.5); } .footer-area .footer-widget .footer-action-form input::placeholder { color: hsl(var(--white)/0.5); } .footer-area .footer-widget .footer-action-form button { color: hsl(var(--white)); font-size: 0.875rem; font-weight: var(--semibold); padding: 10px 0; margin-top: 10px; } .footer-area .footer-widget .footer-action-form button:hover i { -webkit-transform: rotate(0deg) translateX(5px); transform: rotate(0deg) translateX(5px); } .footer-area .footer-widget .footer-action-form button i { -webkit-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-transition: all 0.3s; transition: all 0.3s; } .footer-area .footer-two-title { text-align: center; } .footer-area .footer-two-title .btn-magnetic { color: hsl(var(--white)); border-color: hsl(var(--white)/0.5); } .footer-area .footer-two-title .btn-magnetic:hover { border-color: hsl(var(--base)/0); } @media screen and (max-width: 424px) { .footer-area .footer-two-title .btn-magnetic { text-align: left; } } .footer-area .footer-two-title h2 { color: hsl(var(--white)); font-size: 160px; padding: 30px 0 10px; } @media screen and (max-width: 1399px) { .footer-area .footer-two-title h2 { font-size: 120px; } } @media screen and (max-width: 1199px) { .footer-area .footer-two-title h2 { font-size: 110px; } } @media screen and (max-width: 991px) { .footer-area .footer-two-title h2 { font-size: 100px; } } @media screen and (max-width: 767px) { .footer-area .footer-two-title h2 { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; font-size: 70px; margin-top: 15px; } } .footer-area .footer-two-title h2 span { -webkit-text-fill-color: transparent; -webkit-text-stroke: 1.5px; } .footer-area .footer-two-title .portfolio-btn { position: relative; min-width: 246px; height: 208px; margin: 0 auto; } @media screen and (max-width: 767px) { .footer-area .footer-two-title .portfolio-btn { margin: 0 auto 15px; } } .footer-area .footer-two-title .portfolio-btn:hover .btn-icon svg { -webkit-animation: moveUp 0.8s linear; animation: moveUp 0.8s linear; } .footer-area .footer-two-title .portfolio-btn__img { background-color: unset; background-image: url("../images/footer/logo-shape.png"); background-position: center center; background-repeat: no-repeat; background-size: cover; -webkit-clip-path: none; clip-path: none; height: 157px; padding: 15px; } .footer-area .footer-widget-two { border-top: 1px solid hsl(var(--white)/0.2); } .footer-area .footer-widget-two__content { display: grid; grid-template-columns: 1fr 1fr; } @media screen and (max-width: 424px) { .footer-area .footer-widget-two__content { grid-template-columns: 1fr; padding: 10px 0; } } .footer-area .footer-widget-two__content__item { border-right: 1px solid hsl(var(--white)/0.2); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; padding: 16px 20px; } @media screen and (max-width: 424px) { .footer-area .footer-widget-two__content__item { border-right: 0; padding: 10px 20px; } } .footer-area .footer-widget-two__content__item:last-child { border: 0; } .footer-area .footer-widget-two__content__item a, .footer-area .footer-widget-two__content__item span { color: hsl(var(--white)); font-size: 0.875rem; font-weight: var(--semibold); -webkit-transition: all 0.3s; transition: all 0.3s; } .footer-area .footer-widget-two__content__item a:hover, .footer-area .footer-widget-two__content__item span:hover { color: hsl(var(--base)); } .footer-area .copy-right { border-top: 1px solid hsl(var(--white)/0.2); } .footer-area .copy-right__content { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } @media screen and (max-width: 767px) { .footer-area .copy-right__content { -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } } .footer-area .copy-right__content .back-to-top { color: hsl(var(--white)); -webkit-transition: all 0.3s; transition: all 0.3s; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 10px; } @media screen and (max-width: 767px) { .footer-area .copy-right__content .back-to-top { padding: 15px 0; } } .footer-area .copy-right__content .back-to-top:hover { color: hsl(var(--base)); } .footer-area .copy-right__content .back-to-top i { -webkit-transition: all 0.3s; transition: all 0.3s; } .footer-area .copy-right__text { color: hsl(var(--white)); font-size: 0.875rem; font-weight: var(--semibold); } @media screen and (max-width: 767px) { .footer-area .copy-right__text { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; padding: 15px 0; } } .footer-area .copy-right__social { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } @media screen and (max-width: 767px) { .footer-area .copy-right__social { border-top: 1px solid hsl(var(--white)/0.2); border-bottom: 1px solid hsl(var(--white)/0.2); width: 100%; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } } .footer-area .copy-right__social li { color: hsl(var(--white)); font-size: 0.875rem; font-weight: var(--semibold); } .footer-area .copy-right__social li:first-child { padding-right: 10px; } .footer-area .copy-right__social li a { color: hsl(var(--white)); font-size: 1.125rem; font-weight: var(--semibold); width: 40px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; padding: 13px 0; border-left: 1px solid hsl(var(--white)/0.2); -webkit-transition: all 0.3s; transition: all 0.3s; } .footer-area .copy-right__social li a:hover { background: hsl(var(--base)); } .portfolio-btn { position: relative; min-width: 246px; height: 196px; margin: 0 auto; } @media screen and (max-width: 767px) { .portfolio-btn { margin: 0 auto 15px; } } .portfolio-btn:hover .btn-icon svg { -webkit-animation: moveUp 0.8s linear; animation: moveUp 0.8s linear; } .portfolio-btn__img { background-color: hsl(var(--white)); -webkit-clip-path: path("M246 122.999C246 190.93 190.931 128.999 123 128.999C55.069 128.999 0 190.93 0 122.999C0 55.068 55.069 -0.000976562 123 -0.000976562C190.931 -0.000976562 246 55.068 246 122.999Z"); clip-path: path("M246 122.999C246 190.93 190.931 128.999 123 128.999C55.069 128.999 0 190.93 0 122.999C0 55.068 55.069 -0.000976562 123 -0.000976562C190.931 -0.000976562 246 55.068 246 122.999Z"); height: 155px; padding: 15px; } .portfolio-btn img { width: 100%; } .portfolio-btn .btn-icon { background: hsl(var(--base)); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; border-radius: 100px; width: 150px; height: 150px; margin-top: -100px; position: relative; z-index: 1; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); } /* ============================ Scroll to Top css =============================== */ .scroll-top { position: fixed; right: 30px; bottom: 30px; color: hsl(var(--white)); width: 48px; height: 48px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; border-radius: 50%; z-index: 5; -webkit-transition: 0.5s; transition: 0.5s; cursor: pointer; -webkit-transform: scale(0); transform: scale(0); background-color: hsl(var(--base)); } .scroll-top:hover { color: hsl(var(--white)); background-color: hsl(var(--base-d-100)); } .scroll-top.show { -webkit-transform: scale(1); transform: scale(1); } /* ============================ breadcrumb css =============================== */ .breadcrumb_banner { background-image: url("../images/banner/banner-bg.png"); background-position: center center; background-repeat: no-repeat; background-size: cover; } .breadcrumb_banner__content { text-align: center; } .breadcrumb_banner__content h1 { font-size: 110px; line-height: 1.2; margin-top: -20px; text-transform: uppercase; } @media screen and (max-width: 1399px) { .breadcrumb_banner__content h1 { font-size: 6.25rem; } } @media screen and (max-width: 1199px) { .breadcrumb_banner__content h1 { font-size: 5rem; margin-top: -10px; } } @media screen and (max-width: 991px) { .breadcrumb_banner__content h1 { font-size: 3.75rem; margin-top: -5px; } } @media screen and (max-width: 767px) { .breadcrumb_banner__content h1 { font-size: 2.5rem; } } @media screen and (max-width: 575px) { .breadcrumb_banner__content h1 { font-size: 1.875rem; } } .breadcrumb_banner__content p { max-width: 820px; margin: 20px auto 40px; } /* ============================ pricing css =============================== */ .pricing-area__title { display: -webkit-box; word-break: normal; gap: 20px; margin: -50px 0; } .pricing-area__title li { font-size: 16vh; color: hsl(var(--secondary)); font-weight: var(--bold); } @media screen and (max-width: 1399px) { .pricing-area__title li { font-size: 6.25rem; } } @media screen and (max-width: 1199px) { .pricing-area__title li { font-size: 5rem; margin-top: -10px; } } @media screen and (max-width: 991px) { .pricing-area__title li { font-size: 3.75rem; margin-top: -5px; } } @media screen and (max-width: 767px) { .pricing-area__title li { font-size: 2.5rem; } } @media screen and (max-width: 575px) { .pricing-area__title li { font-size: 1.875rem; } } .pricing-area__title li:last-child { -webkit-text-fill-color: transparent; -webkit-text-stroke: 1px; color: hsl(var(--secondary)); } .pricing-area__item { border-radius: 8px 8px 20px 20px; background: hsl(var(--white)); padding: 40px; } .pricing-area__item:hover .number { color: hsl(var(--base)); } .pricing-area__item .title { font-size: 1.125rem; color: hsl(var(--secondary)); } .pricing-area__item .number { font-size: 3.375rem; font-weight: var(--bold); color: hsl(var(--secondary)); margin: -5px 0 -5px; padding-top: 5px; -webkit-transition: all 0.3s; transition: all 0.3s; } @media screen and (max-width: 1399px) { .pricing-area__item .number { font-size: 3rem; } } @media screen and (max-width: 1199px) { .pricing-area__item .number { font-size: 2.625rem; } } @media screen and (max-width: 991px) { .pricing-area__item .number { font-size: 2.375rem; padding: 10px 0 5px; } } @media screen and (max-width: 767px) { .pricing-area__item .number { font-size: 2.125rem; } } .pricing-area__item .pren { font-size: 1.125rem; color: hsl(var(--secondary)/0.5); margin-bottom: 20px; } .pricing-area__item__list { border-top: 1px solid hsl(var(--secondary)/0.1); border-bottom: 1px solid hsl(var(--secondary)/0.1); padding: 30px 0; display: grid; gap: 10px; } .pricing-area__item__list li { font-size: 0.875rem; color: hsl(var(--secondary)); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 5px; -webkit-transition: all 0.3s; transition: all 0.3s; } .pricing-area__item__list li:hover { color: hsl(var(--base)); -webkit-transform: translateX(5px); transform: translateX(5px); } .pricing-area__item__list li::before { content: "\f111"; font-weight: 900; font-family: "Font Awesome 6 free"; font-size: 5px; } .pricing-area__item__list li.disable { color: hsl(var(--secondary)/0.5); } .pricing-area__item .btn-magnetic { margin-top: 30px; width: 100%; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; background: hsl(var(--secondary)); color: hsl(var(--white)); padding: 15px 20px; } .offcanvas .offcanvas-header { padding: 30px; } .offcanvas .offcanvas-header img { max-height: 60px; } .offcanvas .offcanvas-body { padding: 0 30px; } .sidebar-content { display: grid; gap: 30px; } .sidebar-content p { font-size: 1rem; font-weight: 400; color: hsl(var(--white)); } .sidebar-content__nav .nav-item .nav-link { color: hsl(var(--white)); padding: 5px 0; } .sidebar-content__nav .nav-item .nav-link:hover { color: hsl(var(--base)); } .sidebar-content__address { display: grid; gap: 20px; } .sidebar-content__address li { font-size: 1.125rem; color: hsl(var(--white)); } .sidebar-content__address li span { color: hsl(var(--base)); text-transform: uppercase; font-weight: var(--bold); display: block; } .sidebar-content__address li a { color: hsl(var(--white)); } .sidebar-content__address li a:hover { color: hsl(var(--base)); } .sidebar-content .social-media { display: -webkit-box; display: -ms-flexbox; display: flex; gap: 15px; } .sidebar-content .social-media a { background: hsl(var(--white)); width: 45px; height: 45px; border-radius: 100px; font-size: 1.125rem; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-transition: all 0.5s; transition: all 0.5s; color: hsl(var(--base)); } .sidebar-content .social-media a:hover { background: hsl(var(--base)); color: hsl(var(--white)); } .sidebar-content .btn-magnetic { background: hsl(var(--base)); border-color: hsl(var(--base)); border-radius: 5px; padding: 15px 30px; color: hsl(var(--white)); } .sidebar-content .btn-magnetic:hover { color: hsl(var(--base)); } .sidebar-content .btn-magnetic span { background: hsl(var(--white)); } /*# sourceMappingURL=main.css.map */