/*! Theme Name: Xtreme Clean Theme */ /* Do not edit the imported sass/css file */ @import url("sass/custom.css"); /* For custom font please place the import in the tag in header.php and add font family to tags below */ /* body{ font-family: 'Nunito Sans', sans-serif; } */ /* Feel free to safetly add styles to this file as they will not be overwritten by the sass styles */ @import url("https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/css/bootstrap.min.css"); @import url("https://fonts.googleapis.com/css2?family=PT+Sans:wght@400;700&display=swap"); :root { --light-grey: #ccc; --light-grey-rgb: 204, 204, 204; --grey: #53575a; --grey-rgb: 83, 87, 90; --dark-grey: #5a5d6b; --dark-grey-rgb: 90, 93, 107; --primary: #69c9f3; --primary-rgb: 105, 201, 243; --secondary: #2f89d5; --secondary-rgb: 47, 137, 213; --warn: #fb6a68; --warn-rgb: 251, 106, 104; --success: #2dd373; --success-rgb: 45, 211, 115; --green: #24b780; --green-rgb: 36, 183, 128; --orange: #fe9a4b; --orange-rgb: 254, 154, 75; --mid-blue: #3eaad8; --mid-blue-rgb: 62, 170, 216; --light-blue: #e7f2f8; --light-blue-rgb: 231, 242, 248; } .container { box-sizing: border-box; } body { font-family: "PT Sans", sans-serif; margin: 0; color: var(--grey); box-sizing: border-box; } a { color: rgba(var(--grey-rgb), 0.8); transition: all 0.3s; text-decoration: none; } a:hover { color: rgba(var(--grey-rgb), 1); } p a { color: rgba(var(--secondary-rgb), 0.8); } p a:hover { color: rgba(var(--secondary-rgb), 1); } img { max-width: 100%; } h1 { color: var(--secondary); font-size: 44px; margin-top: 8px; margin-bottom: 12px; } @media (max-width: 768px) { h1 { font-size: 36px; } } h2 { color: var(--secondary); font-size: 28px; margin-top: 6px; margin-bottom: 8px; } h3 { color: var(--secondary); font-size: 18px; margin-top: 4px; margin-bottom: 6px; } h4 { font-size: 24px; font-weight: 400; margin-top: 2px; margin-bottom: 4px; } h5 { color: var(--secondary); font-size: 18px; margin: 8px 0; } .btn:hover, button.btn:hover { background: rgba(var(--light-grey-rgb), 1); } .btn-primary, button.btn-primary { background: var(--primary); color: #fff; } .btn-primary:hover, button.btn-primary:hover { background: rgba(var(--mid-blue-rgb), 0.9); } .btn-secondary, button.btn-secondary { background: var(--secondary); color: #fff; } .btn-secondary:hover, button.btn-secondary:hover { background: rgba(var(--mid-blue-rgb), 0.9); } /* Match Bootstrap max size to Elementor */ @media (min-width: 1400px) { .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl { max-width: 1320px; } }