/*!
Theme Name: EAlphabits
Theme URI: http://underscores.me/
Author: EAlphabits
Author URI: https://ealphabits.com/
Description: EAlphabits is leading iot development company in India | We offer full range of loT services including consulting, development & prototyping.
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: ealphabits
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready
This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.
EAlphabits is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.
Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/
/* -----------------------------------------------------------
ROOT VARIABLES & BASE SETUP
----------------------------------------------------------- */
:root {
--body-bg: #1c1c1c;
--body-color: rgba(214, 213, 213, 1);
--white: #ffffff;
--primary: #EA7D00;
--secondary: #F8991C;
--font-family: 'Inter', sans-serif;
--font-16: 16px;
--font-18: 18px;
--font-20: 20px;
--font-22: 22px;
--font-24: 24px;
--font-30: 30px;
--font-40: 40px;
--font-68: 68px;
--font-100: 100px;
}
html {
font-size: clamp(6px, 0.521vw, 10px);
-webkit-text-size-adjust: 100%;
scroll-behavior: smooth;
}
*,
*:before,
*:after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html,
body {
margin: 0;
padding: 0;
font-family: var(--font-family);
font-optical-sizing: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
body {
background: var(--body-bg);
color: var(--body-color);
font-size: var(--font-18);
font-weight: 400;
line-height: 1.67;
}
/* -----------------------------------------------------------
MEDIA & TYPOGRAPHY
----------------------------------------------------------- */
img {
display: block;
max-width: 100%;
height: auto;
}
p {
margin: 0 0 3rem;
line-height: 1.67;
}
p:last-child {
margin-bottom: 0;
}
a {
color: var(--white);
text-decoration: none;
transition: color 0.4s ease;
}
a:hover {
color: var(--secondary);
}
button,
input,
a {
transition: all 0.4s ease;
}
/* -----------------------------------------------------------
HEADINGS
----------------------------------------------------------- */
h1,
h2,
h3,
h4,
h5,
h6 {
font-weight: 600;
line-height: 1.2;
margin: 0 0 1.2rem;
}
h1 {
font-size: var(--font-68);
}
h2 {
font-size: var(--font-40);
}
h3 {
font-size: var(--font-30);
}
h4 {
font-size: var(--font-24);
}
h5 {
font-size: var(--font-22);
}
h6 {
font-size: var(--font-20);
}
/* -----------------------------------------------------------
FORMS
----------------------------------------------------------- */
input,
select,
textarea {
width: 100%;
font-family: var(--font-family);
font-size: var(--font-18);
font-weight: 400;
color: var(--white);
background: transparent;
border: none;
border-bottom: 2px solid rgba(255, 255, 255, 0.5);
padding: 2rem 0;
line-height: normal;
outline: none;
appearance: none;
}
input:focus,
select:focus,
textarea:focus {
border-color: var(--secondary);
}
input.wpcf7-not-valid,
select.wpcf7-not-valid,
textarea.wpcf7-not-valid {
border-color: #ffabab;
}
/* Placeholder color */
::placeholder {
color: inherit;
opacity: 0.5;
}
/* Theme overrides for gradient backgrounds */
.gredient-bg-secondary input:not(.button),
.gredient-bg-secondary textarea,
.gredient-bg-secondary select {
border-color: var(--body-bg);
color: var(--body-bg);
}
.gredient-bg-secondary .wpcf7-form label {
color: var(--body-bg);
opacity: 1;
}
textarea {
height: 15rem;
}
select option {
color: var(--body-bg);
}
.wpcf7-not-valid-tip {
color: #ffabab;
font-size: 1.5rem;
margin-top: 1.5rem;
line-height: 1;
}
.wpcf7-response-output {
display: none;
}
.wpcf7-form {
text-align: left;
}
.wpcf7-form br {
display: none;
}
.wpcf7-form p {
margin: 0;
}
.wpcf7-form label {
display: block;
width: 100%;
font-weight: 300;
font-size: var(--font-18);
opacity: 0.5;
line-height: 1;
}
.wpcf7-form-control-wrap {
display: block;
width: 100%;
}
.wpcf7-form .row {
display: flex;
flex-wrap: wrap;
margin: 0 -3rem;
gap: 6rem 0;
}
.form-group {
width: 100%;
padding: 0 3rem;
}
.col-6.form-group {
width: 50%;
}
.wpcf7-spinner {
display: none;
}
/* -----------------------------------------------------------
SLICK SLIDER
----------------------------------------------------------- */
.slick-list {
height: 100%;
margin: 0 -2rem;
}
.slick-track {
display: flex !important;
height: 100%;
}
.slick-slide {
padding: 0 2rem;
}
.slick-slide {
height: unset !important;
}
/* -----------------------------------------------------------
CUSTOM CURSOR PLAY BUTTON
----------------------------------------------------------- */
.custom-cursor {
opacity: 0;
transition: opacity 0.3s ease, transform 0.15s ease;
}
.custom-cursor,
.play-button {
position: fixed;
top: 0;
left: 0;
width: 12rem;
height: 12rem;
border-radius: 50%;
background: var(--secondary);
color: var(--white);
font-size: 12px;
display: flex;
align-items: center;
justify-content: center;
pointer-events: none;
transform: translate(-50%, -50%) scale(0);
transition: transform 0.25s ease-out;
z-index: 9999;
}
.play-button {
position: absolute;
margin: auto;
inset: 0;
transform: unset;
pointer-events: unset;
transition: 0.5s all;
-webkit-transition: 0.5s all;
-moz-transition: 0.5s all;
-ms-transition: 0.5s all;
-o-transition: 0.5s all;
}
.play-button:hover {
background: var(--white);
transform: scale(1.2);
}
.play-button:hover:after {
background-color: var(--secondary);
}
.play-button:after {
content: "";
width: 60px;
height: 60px;
background-color: var(--white);
clip-path: polygon(35% 25%, 35% 75%, 75% 50%);
border-radius: 50%;
pointer-events: none;
transition: 0.5s all;
-webkit-transition: 0.5s all;
-moz-transition: 0.5s all;
-ms-transition: 0.5s all;
-o-transition: 0.5s all;
}
.custom-cursor span {
text-transform: uppercase;
letter-spacing: 1px;
pointer-events: none;
}
.hover-area {
cursor: none;
}
/* -----------------------------------------------------------
BUTTONS
----------------------------------------------------------- */
input.button,
.button,
.comment-respond input.submit {
display: inline-flex;
align-items: center;
justify-content: space-between;
gap: 1.2rem;
padding: 2rem 3rem;
line-height: 1;
font-size: var(--font-18);
font-weight: 600;
text-transform: uppercase;
border-radius: 100rem;
cursor: pointer;
border: none;
background: var(--secondary);
color: var(--white);
transition: all 0.5s ease;
}
input.button,
.comment-respond input.submit {
border: none;
width: auto;
background: var(--secondary) url('data:image/svg+xml,') center right 3rem / 3rem no-repeat;
padding-right: 8rem;
cursor: pointer;
}
input.button:hover {
border: none;
width: auto;
background: var(--white) url('data:image/svg+xml,') center right 3rem / 3rem no-repeat;
padding-right: 8rem;
}
/* Button icons */
.button:after {
content: "";
background: url('data:image/svg+xml,') center center / contain no-repeat;
width: 3rem;
height: 1.2rem;
display: inline-block;
transform: rotate(-45deg);
filter: brightness(0) invert(1);
transition: transform 0.5s ease;
}
.button:hover {
background: var(--white);
color: var(--primary);
}
.button:hover:after {
transform: rotate(0);
filter: unset;
}
.button.secondary {
background: transparent;
border: 1px solid var(--white);
}
.button.black {
background: transparent;
border: 1px solid var(--body-bg);
color: var(--body-bg);
}
.button.black:after {
filter: brightness(0) invert(0);
}
.button.black:hover {
background: var(--body-bg);
color: var(--secondary);
}
.button.black:hover:after {
filter: brightness(1) invert(0);
}
/* -----------------------------------------------------------
LAYOUT & CONTAINERS
----------------------------------------------------------- */
.container {
max-width: 90%;
/* padding: 0 5rem; */
margin: 0 auto;
width: 100%;
}
@media (min-width:1921px) {
.container {
max-width: 1740px;
}
}
.border {
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
border-top: 1px solid rgba(255, 255, 255, 0.2);
}
section,
.section {
position: relative;
padding: 12rem 0;
overflow: clip;
color: var(--white);
}
section.small-padding {
padding: 5rem 0;
}
section.pt-0 {
padding-top: 0;
}
section.pb-0 {
padding-bottom: 0;
}
section.p-0 {
padding: 0;
}
.section.full-height,
.section:first-child:not(.contact-us-section) {
padding-top: 25rem;
z-index: 1;
}
.full-height {
min-height: 100vh;
display: flex;
align-items: center;
flex-wrap: wrap;
}
/* -----------------------------------------------------------
BACKGROUNDS
----------------------------------------------------------- */
.gredient-bg {
background: linear-gradient(108deg, rgba(251, 134, 0, 0.38) 0%, rgba(0, 0, 0, 1) 30%, rgba(0, 0, 0, 1) 70%, rgba(150, 80, 0, 0.42) 100%);
background-size: 200% 200%;
animation: gradientShift 10s ease-in-out infinite alternate;
transition: background 0.5s ease;
}
.gredient-bg-secondary {
background: linear-gradient(135deg, #ffb300, #fff1b0);
color: var(--body-bg);
}
.grey-bg {
background: #222;
}
.dots-background {
background-image: radial-gradient(rgba(255, 255, 255, 0.1) 1.2px, transparent 1.2px);
background-size: 2rem 2rem;
}
/* Safari performance fix for blur (disabled on large fixed areas) */
@supports (-webkit-backdrop-filter: blur(1rem)) {
@media not all and (min-resolution:.001dpcm) {
.safari-optimized-blur {
-webkit-backdrop-filter: none !important;
backdrop-filter: none !important;
background: rgba(20, 20, 20, 0.85) !important;
}
}
}
/* -----------------------------------------------------------
TEXT ALIGNMENTS & HEADINGS
----------------------------------------------------------- */
.text-center {
text-align: center;
}
.text-left {
text-align: left;
}
.text-right {
text-align: right;
}
.heading-group:not(:last-child) {
margin-bottom: 9.5rem;
}
.heading-group.small-margin:not(:last-child) {
margin-bottom: 6rem;
}
.heading-group p {
max-width: 90rem;
display: inline-block;
}
.heading-group img {
max-width: 10rem;
margin-bottom: 4rem;
}
.text-center .heading-group p {
margin-inline: auto;
}
.heading {
font-size: var(--font-68);
font-weight: 300;
}
.heading:not(:last-child) {
margin-bottom: 2.7rem;
}
.heading strong {
font-weight: 700;
color: var(--secondary);
line-height: 1.1;
}
.heading.big {
font-size: var(--font-100);
font-weight: 300;
}
.secondary-heading {
font-size: var(--font-30);
line-height: 1.5;
}
.heading-group ul:last-child,
.wp-block-list:last-child,
.features-list-item ul:last-child {
margin-bottom: 0;
}
.heading-group ul,
.wp-block-list,
.features-list-item ul,
.basic-content ul {
display: block;
list-style-type: none;
padding: 0;
margin: 0 0 3rem 0;
}
.heading-group ul li:not(:last-child),
.wp-block-list li:not(:last-child),
.features-list-item ul li:not(:last-child),
.basic-content ul li:not(:last-child) {
margin-bottom: 3rem;
}
.heading-group ul li:before,
.wp-block-list li:before,
.features-list-item ul li:before,
.basic-content ul li:before {
position: absolute;
width: 1rem;
height: 1rem;
background: var(--secondary);
left: 0;
right: 0;
content: "";
border-radius: 100%;
top: 1rem;
}
.heading-group ul li,
.wp-block-list li,
.features-list-item ul li,
.basic-content ul li {
position: relative;
padding-left: 2.5rem;
}
.gredient-bg-secondary ul li:before {
background: var(--body-bg);
}
/* -----------------------------------------------------------
SOCIAL MEDIA
----------------------------------------------------------- */
.social-media {
list-style: none;
display: flex;
gap: 2.1rem;
margin: 0;
padding: 0;
}
.social-media a {
width: 6.5rem;
height: 6.5rem;
display: flex;
align-items: center;
justify-content: center;
border-radius: 1.5rem;
background: #3d3d3d;
color: var(--white);
font-size: var(--font-30);
transition: all 0.4s ease;
}
.social-media a:hover {
background: var(--primary);
transform: scale(1.1);
}
/* -----------------------------------------------------------
ANIMATIONS
----------------------------------------------------------- */
@keyframes gradientShift {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
@keyframes textIn {
from {
transform: translateY(100%);
}
to {
transform: translateY(0);
}
}
@keyframes textOut {
from {
transform: translateY(0);
}
to {
transform: translateY(-100%);
}
}
@keyframes headerSlideDown {
from {
margin-top: -50rem;
opacity: 0;
}
to {
margin-top: 0;
opacity: 1;
}
}
/* -----------------------------------------------------------
MISC UTILS
----------------------------------------------------------- */
.mt-5 {
margin-top: 9.5rem;
}
.button-group {
display: flex;
flex-wrap: wrap;
gap: 2rem;
}
.button-group.text-center {
justify-content: center;
}
.pos-sticky {
position: sticky;
top: 20rem;
}
.overflow-hidden {
overflow: hidden;
}
/* =========================================================
SITE HEADER BASE
========================================================= */
.site-header {
position: absolute;
top: 0;
left: 0;
right: 0;
padding: 2rem 0;
z-index: 99;
}
/* Sticky Header */
.site-header.sticky {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 9999;
border-color: transparent;
}
.site-header.sticky .header-top-bar {
display: none;
}
.site-header.sticky .header-row {
padding-left: 5rem;
padding-right: 5rem;
border-radius: 10rem;
}
.site-header.sticky .header-row:after {
content: "";
position: absolute;
inset: 0;
background: rgba(28, 28, 28, 0.8);
backdrop-filter: blur(1rem);
border-radius: 10rem;
z-index: -1;
transform: translateZ(0);
will-change: opacity, transform;
}
.site-header.sticky .header-row .header-logo img {
max-width: 22rem;
}
/* =========================================================
HEADER TOP BAR
========================================================= */
.header-top-bar {
display: flex;
justify-content: space-between;
align-items: center;
padding-bottom: 2rem;
}
.header-top-bar ul {
display: flex;
gap: 4rem;
list-style: none;
padding: 0;
margin: 0;
}
.header-top-bar ul li a {
display: flex;
align-items: center;
gap: 1rem;
font-size: var(--font-16);
}
.header-top-bar .social-media {
display: flex;
gap: 1.5rem;
}
.header-top-bar .social-media a {
width: auto;
height: auto;
background: transparent;
font-size: var(--font-20);
}
.header-top-bar .social-media a:hover {
color: var(--secondary);
}
/* =========================================================
HEADER ROW / MAIN NAV WRAPPER
========================================================= */
.header-row {
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
padding: 2.3rem 0;
border-top: 0.5px solid rgba(255, 255, 255, 0.4);
border-bottom: 0.5px solid rgba(255, 255, 255, 0.4);
transition: all 0.5s ease;
}
.header-item {
display: inline-flex;
line-height: 1;
}
.header-item .fa-angle-down {
display: none;
}
/* Logo */
.header-logo {
max-width: 26.9rem;
display: inline-block;
transition: all 0.5s ease;
}
.header-logo img {
width: 100%;
}
/* Menu Toggle (Mobile) */
.menu-toggle {
display: none;
}
/* =========================================================
MAIN NAVIGATION
========================================================= */
.site-header .header-row ul {
display: flex;
gap: 3rem;
margin: 0;
padding: 0;
list-style: none;
}
.site-header .header-row ul li a:not(.button) {
display: inline-block;
position: relative;
padding: 1.5rem 2.2rem;
font-size: var(--font-18);
font-weight: 300;
line-height: 1;
color: var(--white);
text-transform: none;
border-radius: 100rem;
transition: all 0.3s ease;
}
.site-header .header-row ul li:hover a:not(.button),
.site-header .header-row ul li.current-menu-item a:not(.button) {
background: rgba(255, 255, 255, 0.1);
color: var(--primary);
}
.site-header .header-row ul li a:not(.button)::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
bottom: -100%;
z-index: 999;
}
/* =========================================================
DROPDOWN / SUB MENU BASE
========================================================= */
.menu-item-has-children {
position: relative;
}
.site-header .header-row ul li:hover .mega-sub-menu,
.site-header .header-row ul li:hover ul.sub-menu {
opacity: 1;
margin-top: 0;
visibility: visible;
}
/* Simple Submenu */
.site-header .header-row ul.sub-menu {
position: absolute;
top: 180%;
left: 0;
display: flex;
flex-direction: column;
gap: 0;
width: auto;
padding: 0;
font-size: var(--font-16);
background: linear-gradient(135deg, #141518ad 0%, #1E1F25 100%);
backdrop-filter: blur(1rem);
-webkit-backdrop-filter: blur(1rem);
border-radius: 2rem;
opacity: 0;
visibility: hidden;
margin-top: 2rem;
transition: all 0.5s ease;
transform: translateZ(0);
will-change: opacity, transform;
padding: 2rem 0;
}
.site-header .header-row ul.sub-menu li,
.site-header .header-row ul li ul.sub-menu a {
width: 100%;
white-space: nowrap;
background: transparent;
background: transparent !important;
padding: 0;
display: flex;
flex-direction: column-reverse;
font-size: var(--font-16);
gap: 1.4rem;
flex-direction: row-reverse;
justify-content: flex-end;
color: var(--white) !important;
}
.site-header .header-row ul li ul.sub-menu a {
padding: 2rem 3rem !important;
}
.site-header .header-row ul li ul.sub-menu a i {
color: var(--secondary) !important;
}
.site-header .header-row ul li ul.sub-menu a:hover {
color: var(--secondary) !important;
}
/* =========================================================
MEGA MENU BASE
========================================================= */
.mega-sub-menu {
position: absolute;
top: 100%;
right: 0;
display: flex;
opacity: 0;
visibility: hidden;
margin-top: 2rem;
transform: translateY(1rem);
border-radius: 2rem;
overflow: hidden;
z-index: 1;
background: linear-gradient(135deg, #141518ad 0%, #1E1F25 100%);
backdrop-filter: blur(1rem);
-webkit-backdrop-filter: blur(1rem);
transition: all 0.5s ease;
transform: translateZ(0);
will-change: opacity, transform;
}
/* =========================================================
MEGA MENU STRUCTURE (TABS + CONTENT)
========================================================= */
.sub-menu-row {
display: flex;
flex-wrap: wrap;
height: 100%;
}
.sub-menu-row .sub-menu-item-content {
width: 70%;
}
.sub-menu-row .submenu-call-to-action-block {
width: 30%;
}
/* Tab Navigation */
.sub-menu-tabing-nav {
border-right: 1px solid rgba(255, 255, 255, 0.1);
}
.site-header .header-row .sub-menu-tabing-nav ul {
display: flex;
flex-direction: column;
gap: 0;
min-width: 30rem;
height: 100%;
margin: 0;
padding: 2rem 0;
}
.site-header .header-row .sub-menu-tabing-nav ul li {
width: 100%;
}
.site-header .header-row .sub-menu-tabing-nav ul li a {
display: flex;
align-items: center;
gap: 1.4rem;
width: 100%;
padding: 2rem 3rem;
font-size: var(--font-16);
font-weight: 400;
color: #EAEAEA !important;
background: transparent !important;
border-radius: 0;
white-space: nowrap;
}
.site-header .header-row .sub-menu-tabing-nav ul li a:after {
display: none;
}
.site-header .header-row .sub-menu-tabing-nav ul li a:hover,
.site-header .header-row .sub-menu-tabing-nav ul li.active a {
color: var(--primary) !important;
}
.site-header .header-row .sub-menu-tabing-nav ul li a i {
color: var(--secondary);
}
/* =========================================================
MEGA MENU CONTENT
========================================================= */
.site-header .header-row .sub-menu-tabing-content ul {
display: flex;
flex-wrap: wrap;
min-height: 100%;
gap: 0;
}
.site-header .header-row .sub-menu-tabing-content ul li {
width: 50%;
flex: 50%;
padding: 4rem;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.site-header .header-row .sub-menu-tabing-content ul li:nth-child(2n+1):nth-last-child(-n+2) {
border-bottom: none;
}
.sub-menu-tabing-content .tab {
display: none;
height: 100%;
}
.sub-menu-tabing-content .tab.active {
display: block;
}
.sub-menu-tabing-content h3 {
display: flex;
gap: 1.4rem;
font-size: var(--font-18);
font-weight: 500;
}
.sub-menu-tabing-content p {
font-size: var(--font-16);
}
/* =========================================================
MEGA MENU CTA BLOCK
========================================================= */
.submenu-call-to-action-block {
display: flex;
flex-direction: column;
padding: 4rem;
background: var(--primary);
color: var(--white);
}
.submenu-call-to-action-block .cta-icon {
display: flex;
align-items: center;
justify-content: center;
width: 7rem;
height: 7rem;
border-radius: 2rem;
font-size: var(--font-22);
background: var(--white);
color: var(--primary);
}
.submenu-call-to-action-block h3 {
margin: 3rem 0 2rem 0;
font-size: var(--font-24);
font-weight: 400;
}
.submenu-call-to-action-block .button {
display: inline-flex;
justify-content: space-between;
margin-top: auto;
font-weight: 600;
text-transform: uppercase;
background: var(--white);
color: var(--body-bg);
}
.submenu-call-to-action-block .button:after {
filter: brightness(0) invert(0);
}
/* =========================================================
1. SITE FOOTER
========================================================= */
.site-footer {
border-top: 1.9rem solid var(--primary);
padding: 8rem 0;
}
/* Footer layout groups */
.footer-top,
.footer-middle,
.footer-bottom {
display: flex;
justify-content: space-between;
align-items: center;
gap: 3rem;
}
.footer-middle {
align-items: unset;
margin-top: 10.2rem;
}
/* Footer titles */
.footer-item h4 {
text-transform: uppercase;
font-size: var(--font-18);
font-weight: 300;
color: #6d6d6c;
line-height: 1;
margin-bottom: 3.5rem;
}
/* Footer lists / links */
.footer-item ul:not(.social-media) {
margin: 0;
padding: 0;
list-style-type: none;
display: flex;
flex-direction: column;
gap: 2.7rem;
}
.footer-item ul:not(.social-media) li {
display: block;
}
.footer-item ul:not(.social-media) li a {
color: var(--white);
font-size: var(--font-20);
text-decoration: none;
line-height: normal;
}
.footer-item ul:not(.social-media) li a:hover {
color: var(--secondary);
}
/* Footer bottom specifics */
.footer-bottom {
flex-direction: row-reverse;
padding-top: 4rem;
border-top: 0.5px solid rgba(255, 255, 255, 0.4);
margin-top: 8rem;
}
.footer-bottom .footer-item:nth-child(2) {
order: -1;
}
.footer-bottom p {
font-weight: 300;
color: #6d6d6c;
}
/* =========================================================
2. ICON BOXES
========================================================= */
.icon-row {
display: flex;
gap: 6rem;
}
.icon-boxes {
display: flex;
align-items: center;
gap: 2rem;
}
/* Icon states */
.icon-boxes:hover i {
background: var(--secondary);
color: var(--white);
}
/* Icon element */
.icon-boxes i {
background: #171717;
border: 1px solid #353535;
width: 6.5rem;
height: 6.5rem;
display: flex;
align-items: center;
justify-content: center;
color: var(--white);
font-size: var(--font-30);
border-radius: 1.5rem;
flex: 0 0 auto;
transition: 0.5s all;
-webkit-transition: 0.5s all;
-moz-transition: 0.5s all;
-ms-transition: 0.5s all;
-o-transition: 0.5s all;
}
/* Title and text inside icon boxes */
.icon-boxes h4,
.footer-item .icon-boxes h4 {
line-height: normal;
font-size: var(--font-20);
font-weight: 700;
color: var(--white);
text-transform: uppercase;
margin: 0 0 0.7rem 0;
}
.icon-boxes p,
.icon-boxes a {
font-weight: 500;
color: var(--secondary);
}
/* =========================================================
3. ROTATING WORDS
========================================================= */
.rotating-words {
display: inline-block;
overflow: hidden;
vertical-align: bottom;
line-height: 1.2em;
}
.rotating-words span {
display: none;
}
.rotating-words span.active {
display: block;
animation: textIn .5s ease;
}
/* =========================================================
4. RESPONSIVE IFRAME
========================================================= */
.responsive-iframe {
position: relative;
width: 100%;
padding-top: 56.25%;
overflow: hidden;
}
.responsive-iframe iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 0;
}
/* =========================================================
5. BACKGROUND SECTION & HERO (style-2)
========================================================= */
.background-section {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(108deg, rgba(251, 134, 0, 0.38) 0%, rgba(0, 0, 0, 1) 30%, rgba(0, 0, 0, 1) 70%, rgba(150, 80, 0, 0.42) 100%);
background-size: 200% 200%;
animation: gradientShift 10s ease-in-out infinite alternate;
transition: background 0.5s ease;
z-index: -1;
}
/* Background media */
.background-section video,
.background-section img {
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0.4;
}
/* Hero style-2 overrides for background-section */
.hero-banner.style-2 .background-section {
position: unset;
margin-top: 12rem;
width: 80%;
margin-left: auto;
margin-right: auto;
border-radius: 10rem;
overflow: hidden;
padding-top: 48%;
position: relative;
}
/* Ensure hero media covers properly */
.hero-banner.style-2 .background-section img,
.hero-banner.style-2 .background-section video {
opacity: 1;
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
/* Hero text alignment */
.hero-banner.style-2 {
text-align: center;
}
.hero-banner.style-2 .heading-group p {
display: inline-block;
}
.hero-banner.style-2 .button-group {
justify-content: center;
}
/* =========================================================
6. COUNTER ROW
========================================================= */
.counter-row {
display: flex;
gap: 5rem;
justify-content: space-between;
}
.counter-item {
padding: 1.8rem 0;
}
.counter-item h3 {
line-height: 1;
font-size: var(--font-40);
margin-bottom: 1.7rem;
}
/* Counter separators */
.counter-row .sep {
width: 1px;
background: var(--white);
opacity: 0.2;
}
.counter-row .sep:last-child {
display: none;
}
/* =========================================================
7. SEPARATOR BLOCK
========================================================= */
.separator-block {
display: flex;
align-items: center;
gap: 2.4rem;
}
.separator-block:after,
.separator-block:before {
content: "";
width: 100%;
height: 0.4rem;
border-radius: 0.8rem;
background: transparent linear-gradient(90deg,
rgba(255, 137, 0, 1) 0%,
rgba(28, 28, 28, 1) 100%) 0% 0% no-repeat padding-box;
}
.separator-block:before {
background: transparent linear-gradient(270deg,
rgba(255, 137, 0, 1) 0%,
rgba(28, 28, 28, 1) 100%) 0% 0% no-repeat padding-box;
}
.separator-block span {
width: 2.1rem;
height: 2.1rem;
background: var(--primary);
border-radius: 100%;
flex: 0 0 auto;
}
/* =========================================================
8. INDUSTRY ROW
========================================================= */
.industry-heading {
margin: 0;
display: inline-block;
background: var(--body-bg);
font-size: var(--font-24);
text-transform: uppercase;
position: relative;
z-index: 1;
font-weight: 600;
padding: 0 8rem;
}
.industry-row {
display: flex;
gap: 3rem;
justify-content: space-between;
border: 1px solid rgba(255, 255, 255, 0.23);
border-radius: 2rem;
padding: 4rem 5.2rem;
margin-top: -1.5rem;
}
.industry-item {
background: rgba(23, 23, 23, 1);
color: var(--white);
display: flex;
align-items: center;
gap: 2rem;
padding: 2rem 3rem;
border-radius: 1.5rem;
}
.industry-item img {
height: 4.5rem;
width: auto;
flex: 0 0 auto;
}
.industry-item p {
font-size: var(--font-20);
}
/* =========================================================
9. OUR SERVICES
========================================================= */
.our-services-row {
display: flex;
flex-direction: column;
gap: 3rem;
}
.our-services-item {
border: 1px solid rgba(255, 255, 255, 0.23);
border-radius: 2rem;
padding: 6rem;
display: flex;
align-items: center;
justify-content: space-between;
gap: 6rem;
transition: 0.5s all;
-webkit-transition: 0.5s all;
-moz-transition: 0.5s all;
-o-transition: 0.5s all;
-ms-transition: 0.5s all;
}
/* Service headings & hover states */
.our-services-item .secondary-heading {
margin-bottom: 2rem;
}
.our-services-item:hover {
background: var(--secondary);
color: var(--white);
}
.our-services-item:hover .number {
text-shadow:
-1px -1px 0 var(--white),
1px -1px 0 var(--white),
-1px 1px 0 var(--white),
1px 1px 0 var(--white);
color: var(--secondary);
}
.our-services-item:hover .button {
background: var(--white);
color: var(--primary);
}
.our-services-item:hover .button:after {
transform: rotate(0);
filter: unset;
}
/* Number inside service */
.our-services-item .number {
color: var(--body-bg);
font-size: var(--font-100);
font-weight: 900;
line-height: 1;
text-shadow:
-1px -1px 0 var(--secondary),
1px -1px 0 var(--secondary),
-1px 1px 0 var(--secondary),
1px 1px 0 var(--secondary);
transition: 0.5s all;
-webkit-transition: 0.5s all;
-moz-transition: 0.5s all;
-o-transition: 0.5s all;
-ms-transition: 0.5s all;
}
/* Layout parts */
.our-services-item .left-part,
.our-services-item .right-part {
flex: 0 0 auto;
}
/* =========================================================
10. IMAGE CONTENT BOXES (Full-height split)
========================================================= */
.image-content-box-row {
display: flex;
height: 100vh;
margin-top: 9.5rem;
position: relative;
z-index: 9999999;
background: #FFD8A1;
}
.image-content-box-item {
min-width: 50vw;
display: flex;
flex-direction: column;
background: #FFD8A1;
position: relative;
z-index: 1;
}
.image-content-box-item:after {
content: "";
position: absolute;
inset: 0;
z-index: -1;
}
/* content area */
.image-content-box-row .content {
padding: 7.5rem 14rem;
color: var(--body-bg);
}
.image-content-box-row .secondary-heading {
margin: 0 0 3rem 0;
}
/* image container */
.image-content-box-item .image {
height: 100%;
overflow: hidden;
}
.image-content-box-item .image img {
height: 100%;
width: 100%;
object-fit: cover;
transition: 0.1s all;
}
.image-box-item a {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 2;
}
/* =========================================================
11. IMAGE BOXES GRID
========================================================= */
.image-boxes-row {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10rem;
padding-bottom: 15rem;
}
.image-boxes-row.archive-post {
display: grid;
grid-template-columns: repeat(3, 1fr);
padding: 0;
gap: 8rem;
}
.image-boxes-row:not(:last-child) {
margin-bottom: 9.5rem;
}
.image-boxes-row.archive-post .image-box-item:nth-child(even) {
top: 0;
}
.image-boxes-row .image-box-item:nth-child(even) {
top: 15rem;
}
.image-box-item {
display: flex;
flex-direction: column;
gap: 2rem;
position: relative;
}
.image-box-item:hover img {
transform: scale(1.1) rotate(3deg);
}
/* image inside box */
.image-box-item .image {
position: relative;
padding-top: 74%;
border-radius: 2rem 20px;
overflow: hidden;
margin-bottom: 2rem;
background: #ccc;
}
.image-box-item .image img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
transition: 0.5s all;
-webkit-transition: 0.5s all;
-moz-transition: 0.5s all;
-ms-transition: 0.5s all;
-o-transition: 0.5s all;
}
/* tag / text */
.image-box-item .tag {
color: var(--secondary);
text-transform: uppercase;
font-size: 16px;
}
/* reset margins for children */
.image-box-item * {
margin: 0;
}
/* clamp paragraph lines */
.image-box-item p {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
.image-box-item .tags {
position: absolute;
top: 2rem;
right: 2rem;
background: rgba(28, 28, 28, 0.8);
backdrop-filter: blur(1rem);
border-radius: 1.5rem;
z-index: 1;
transform: translateZ(0);
will-change: opacity, transform;
padding: 1rem 2rem;
text-transform: uppercase;
font-size: 14px;
line-height: 1.6;
max-width: 80%;
}
/* =========================================================
12. BOXES / GOOGLE REVIEWS (merged section)
========================================================= */
/* Layout for boxes and review columns */
.boxes-row {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
/* Right and left sizes */
.boxes-row .right-box {
width: 68%;
}
.boxes-row .left-box {
width: 30%;
}
/* Google review - primary style */
.google-review-box {
text-align: center;
background: var(--secondary);
border: 2px solid rgb(30 30 30);
padding: 8rem;
border-radius: 2rem;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
}
/* review avatar / image */
.google-review-box img {
background: #ffffff;
border-radius: 100%;
width: 10rem;
height: 10rem;
object-fit: contain;
margin: 0 auto 2rem auto;
padding: 1rem;
}
/* texts */
.google-review-box h4 {
font-size: var(--font-24);
color: var(--white);
}
.google-review-box h3 {
font-size: var(--font-100);
color: var(--white);
line-height: 1;
margin: 2rem 0;
font-weight: 900;
}
.google-review-box .star {
color: var(--white);
font-size: var(--font-24);
}
/* Google short review / alternative style */
.google-short-review-box {
background: var(--white);
color: var(--body-bg);
max-width: 30rem;
border-radius: 2rem;
padding: 3rem;
display: flex;
flex-direction: column;
gap: 2.5rem;
}
/* Logo + count */
.google-logo-count {
display: flex;
align-items: center;
justify-content: space-between;
gap: 5rem;
}
.google-logo-count img {
max-width: 9rem;
}
.google-logo-count h3 {
line-height: 1;
margin: 0;
font-size: var(--font-24);
}
/* star list inside short box */
.google-short-review-box ul.star {
display: inline-flex;
justify-content: space-between;
width: 100%;
font-size: var(--font-30);
line-height: 1;
}
/* generic star list */
.star {
margin: 0;
padding: 0;
display: flex;
list-style-type: none;
justify-content: center;
gap: 0.6rem;
color: var(--secondary);
font-size: var(--font-18);
}
/* =========================================================
13. TESTIMONIALS
========================================================= */
.testimonial-row {
height: 100%;
width: 80vw;
}
.testimonial-item {
background: rgba(23, 23, 23, 1);
border: 2px solid rgb(30 30 30);
padding: 4rem;
border-radius: 2rem;
height: 100%;
display: flex;
flex-direction: column;
gap: 2rem;
position: relative;
overflow: hidden;
}
.testimonial-item.has-video {
padding: 0;
}
/* subtle big icon watermark */
.testimonial-item:after {
content: "\f10e";
position: absolute;
bottom: -13rem;
right: -3rem;
font-size: 36rem;
font-family: 'Font Awesome 7 Free';
font-weight: 900;
line-height: 1;
opacity: 0.02;
}
/* video container */
.testimonial-video {
position: relative;
padding-top: 100%;
height: 100%;
}
.testimonial-video video,
.testimonial-video iframe {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
object-fit: cover;
width: 100%;
height: 100%;
}
/* testimonial text */
.testimonial-item p {
font-size: var(--font-18);
font-weight: 300;
margin: 0;
}
/* meta / author */
.testimonial-meta-data {
display: flex;
margin-top: auto;
padding-top: 3rem;
}
.testimonial-author {
display: flex;
align-items: center;
gap: 1.5rem;
}
.testimonial-author img {
width: 6rem;
height: 6rem;
flex: 0 0 auto;
border-radius: 100%;
background: var(--white);
object-fit: cover;
}
.author-name {
font-size: var(--font-16);
font-weight: 400;
line-height: 1.8;
margin: 0;
}
.author-name span {
display: block;
font-weight: 300;
font-size: 90%;
color: var(--body-color);
}
/* =========================================================
14. BOOK DEMO & CALENDLY
========================================================= */
.book-demo {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
max-width: 80%;
margin: 0 auto;
}
.book-demo>div {
width: 46%;
}
/* Calendly inline widget */
.calendly-inline-widget {
border: 1px solid #505960;
border-radius: 2rem;
overflow: hidden;
max-width: 500px;
background: var(--white);
margin: 0 auto;
}
/* calendly section text color */
.calendly-section {
color: var(--white);
}
/* =========================================================
15. FEATURES (rows, list items, section style-2)
========================================================= */
.features-row {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
/* layout parts */
.features-section.style-2 .features-row .left-part,
.features-section.style-2 .features-row .right-part {
width: 100%;
}
.features-row .left-part {
width: 49.12162162162162%;
}
.features-row .right-part {
width: 43.17567567567568%;
}
/* features list row */
.features-list-row {
display: flex;
flex-wrap: wrap;
gap: 5rem;
}
.features-list-item {
border: 1px solid rgba(255, 255, 255, 0.23);
border-radius: 4rem;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
text-align: left;
padding: 5.4rem;
}
/* image inside feature list */
.features-list-item .image {
border-radius: 3rem;
background: var(--secondary);
width: 9rem;
height: 9rem;
display: flex;
align-items: center;
justify-content: center;
padding: 2rem;
margin-bottom: 2.6rem;
}
.features-list-item .image img {
width: 100%;
height: 100%;
object-fit: contain;
}
/* heading inside list item */
.features-list-item h3 {
margin: 0;
width: calc(100% - 11.6rem);
text-align: left;
margin-bottom: 2.6rem;
}
/* style-2 features grid */
.features-section.style-2 .features-list-row {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: 1fr;
gap: 4rem;
text-align: left;
margin-top: 8rem;
}
.features-section.style-2 .features-list-row .features-list-item {
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
}
.features-section.style-2 .features-list-row .features-list-item h3 {
width: 100%;
text-align: left;
max-width: 100%;
}
/* =========================================================
16. CALL TO ACTION
========================================================= */
.call-to-action-row {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
}
.call-to-action-row .left-part {
width: 40%;
}
.call-to-action-row .right-part {
width: 55%;
}
.call-to-action-row>div:only-child {
width: 100%;
}
.call-to-action-row img {
width: 100%;
}
/* =========================================================
17. TECH STACK
========================================================= */
.tech-stack-rows {
display: flex;
flex-wrap: wrap;
gap: 5rem;
}
.tech-stacks-item {
border: 1px solid rgba(255, 255, 255, 0.23);
border-radius: 2rem;
padding: 6rem;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
transition: 0.5s all;
-webkit-transition: 0.5s all;
-moz-transition: 0.5s all;
-o-transition: 0.5s all;
-ms-transition: 0.5s all;
width: 100%;
min-height: 50rem;
}
.tech-stacks-item:nth-child(even) {
flex-direction: row-reverse;
}
.tech-stacks-item .left-part {
width: 45%;
}
.tech-stacks-item .right-part {
width: 50%;
}
.tech-stacks-item .secondary-heading {
margin-bottom: 2.5rem;
font-size: var(--font-68);
color: var(--secondary);
text-transform: uppercase;
line-height: normal;
font-weight: 900;
}
/* logos grid */
.tech-stack-logos {
gap: 2rem;
display: flex;
flex-wrap: wrap;
}
.tech-stack-logos .tech-stack-logo-item {
flex: calc(20% - 2rem);
max-width: 33.33%;
}
.tech-stack-logos .tech-stack-logo-item .logo {
background: var(--white);
position: relative;
border-radius: 1rem;
padding-top: 100%;
}
.tech-stack-logos .tech-stack-logo-item .logo img {
height: 100%;
width: 70%;
position: absolute;
object-fit: contain;
left: 0;
right: 0;
bottom: 0;
top: 0;
margin: auto;
}
/* =========================================================
18. SLIDER (carousel wrapper + mobile mode)
========================================================= */
.slider-wrapper {
width: 100%;
margin: 0 auto;
overflow: hidden;
height: 34.063vw;
padding: 30px 0;
position: relative;
display: flex;
align-items: center;
margin-top: 6rem;
}
.slider-track {
display: flex;
transition: transform 0.6s ease;
will-change: transform;
}
.slide {
flex-shrink: 0;
background: #444;
border-radius: 0;
overflow: hidden;
cursor: pointer;
position: relative;
opacity: 1;
transition: 0.6s all;
}
.slide.active.complete .slider-content h3 {
max-height: 200px;
opacity: 1;
transition: max-height 1s ease, opacity 1s ease;
}
.slide:not(.active) .slider-content p {
text-align: center;
}
/* Slider content overlay */
.slider-content {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: flex;
align-items: flex-start;
background: transparent linear-gradient(185deg, #00000000 0%, #000000 100%) 0% 0% no-repeat padding-box;
flex-direction: column;
justify-content: flex-end;
text-align: left;
color: var(--white);
padding: 4rem;
gap: 2rem;
}
.slider-content p {
text-transform: uppercase;
margin: 0;
line-height: 1.5;
white-space: nowrap;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
width: 100%;
}
.slider-content h3 {
color: var(--secondary);
font-size: var(--font-24);
margin: 0;
max-height: 0;
overflow: hidden;
opacity: 0;
}
/* slide image */
.slide img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.slide.active {
opacity: 1;
}
/* nav buttons */
.nav-button {
position: absolute;
top: 50%;
transform: translateY(-50%);
background: var(--secondary);
border: none;
width: 6rem;
height: 6rem;
font-size: var(--font-18);
cursor: pointer;
z-index: 10;
color: var(--white);
font-weight: bold;
border-radius: 100%;
}
.prev-button {
left: 10px;
}
.next-button {
right: 10px;
}
/* Mobile Vertical Mode */
@media screen and (max-width: 768px) {
.slider-wrapper {
height: auto;
}
}
/* =========================================================
19. FEATURES GRID (feature-grid-item)
========================================================= */
.features-grid-row {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.features-grid-row .left-part,
.features-grid-row .right-part {
width: 25.945945945945947%;
display: flex;
flex-wrap: wrap;
}
.features-grid-row .middle-part {
width: 44%;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.feature-grid-item {
border-radius: 4rem;
border: 1px solid #2e2e2e;
background: linear-gradient(135deg, #1c1c1c 0%, #222222 50%, #332100 100%);
padding: 4.5rem;
text-align: center;
margin: 10px 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
color: var(--white);
}
.feature-grid-item h5 {
width: 7rem;
height: 7rem;
background: var(--secondary);
border-radius: 100%;
color: var(--white);
display: flex;
align-items: center;
justify-content: center;
line-height: 1;
font-weight: 900;
margin-bottom: 2rem;
}
.feature-grid-item h3 {
font-weight: 300;
}
.feature-grid-item h3 strong {
display: block;
font-weight: 700;
}
.feature-grid-item img {
max-width: 90%;
}
/* =========================================================
20. FEATURE CAROUSEL / SLIDERS
========================================================= */
.feature-carousel-section .grey-bg {
padding: 10rem 0;
border-radius: 5rem;
overflow: hidden;
}
.feature-carousel-section .grey-bg .heading-group {
padding-left: 14.4rem;
padding-right: 14.4rem;
}
.features-sliders-row {
display: flex;
gap: 3rem;
}
.features-sliders-row:not(:last-child) {
margin-bottom: 3.5rem;
}
.features-sliders-row .slick-slide {
padding: 0 1.4rem;
}
.features-sliders-row .slick-list {
margin: 0 -1.4rem;
}
.features-slider-item {
border-radius: 1rem;
background: var(--white);
color: var(--body-bg);
min-height: 21.5rem;
width: 44.5rem;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: flex-start;
height: 100%;
padding: 3rem 5rem;
position: relative;
overflow: auto;
}
.features-slider-item.light {
background: #FFEDD8;
}
.features-slider-item.orange {
background: var(--secondary);
color: var(--white);
}
.features-background-image {
position: absolute;
inset: 0;
}
.features-background-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.features-slider-item .icon {
margin-bottom: 2.5rem;
}
.features-slider-item .icon img {
height: 5rem;
width: auto;
}
/* =========================================================
21. FAQ
========================================================= */
.faq-row {
display: flex;
flex-wrap: wrap;
gap: 2rem;
}
.faq-item {
border: 1px solid #2e2e2e;
border-radius: 1.5rem;
width: 100%;
overflow: hidden;
}
/* FAQ active / hover */
.faq-item:hover h3,
.faq-item.active h3 {
background: var(--secondary);
color: var(--white);
}
.faq-item h3 {
font-size: var(--font-24);
color: var(--white);
padding: 3rem 4rem;
margin: 0;
font-weight: 300;
display: flex;
align-items: center;
justify-content: space-between;
gap: 2rem;
cursor: pointer;
transition: 0.5s all;
-webkit-transition: 0.5s all;
-moz-transition: 0.5s all;
-ms-transition: 0.5s all;
}
.faq-item h3:after {
line-height: 1;
}
.faq-answer {
padding: 3rem 4rem;
border-top: 1px solid #2e2e2e;
display: none;
}
/* =========================================================
22. CONTACT / INTRODUCTION / IMAGE GALLERY
========================================================= */
.contact-us-section:first-child .container {
margin-top: 4.6rem;
}
.contact-information-section {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.contact-information-section>div {
padding: 10rem 0;
}
.contact-information-section .left-part {
width: 40%;
}
.contact-information-section .right-part {
width: 55%;
border-left: 1px solid rgba(255, 255, 255, 0.06);
padding-left: 7.6rem;
}
.gredient-bg-secondary .contact-information-section .right-part {
border-color: rgba(0, 0, 0, 0.06);
}
.contact-item-row {
display: flex;
flex-wrap: wrap;
margin: -4rem -7rem;
}
.contact-item-row .contact-information-item {
width: 50%;
flex: 50%;
padding: 4rem 7rem;
}
.contact-item-row h4 {
text-transform: uppercase;
font-weight: normal;
font-size: var(--font-18);
opacity: 0.5;
margin: 0 0 2.5rem 0;
}
.contact-item-row a {
font-size: var(--font-22);
line-height: normal;
color: var(--secondary);
}
.contact-item-row a:hover {
color: var(--white);
text-decoration: underline;
}
.contact-item-row p:not(:last-child) {
margin-bottom: 2.5rem;
}
/* Introduction row */
.introduction-content-row {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.introduction-content-row .right-part {
width: 60%;
}
.introduction-content-row p {
max-width: 100%;
}
/* Image gallery */
.image-gallery-slider .image-gallery-item:nth-child(even) {
padding-top: 15rem;
}
.image-gallery-img {
position: relative;
padding-top: 145%;
}
.image-gallery-img img {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
/* =========================================================
23. TEAM SECTION
========================================================= */
.our-team-section.grid .our-team-row>div {
width: 100%;
}
.our-team-section.grid .our-team-row .right-part {
margin-top: 7rem;
}
.our-team-section.grid .our-team-row .our-team-list {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 3rem;
}
.our-team-section.grid .our-team-row .our-team-list .our-team-block {
width: calc(33.33% - 2rem);
}
.our-team-section.grid .our-team-row .our-team-list .our-team-block .our-team-image {
margin: 0;
width: 100%;
border-radius: 1rem;
}
.our-team-section.grid .our-team-row .our-team-list .our-team-block .our-team-content {
width: 100%;
text-align: center;
padding-bottom: 0;
}
/* team row layout */
.our-team-row {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.our-team-row .left-part {
width: 35%;
}
.our-team-row .right-part {
width: 60%;
}
/* list and block */
.our-team-list {
display: grid;
gap: 4rem;
grid-template-columns: repeat(1, 1fr);
}
.our-team-block {
border: 1px solid rgba(255, 255, 255, 0.23);
border-radius: 2rem;
width: 100%;
padding: 3rem;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.our-team-block .our-team-image {
width: 40rem;
background: var(--white);
border-radius: 1rem 1rem 0 0;
overflow: hidden;
margin-bottom: -3rem;
}
.our-team-block .our-team-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.our-team-block .our-team-content {
width: calc(100% - 45rem);
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 2rem 0;
}
.our-team-content h3 {
font-size: var(--font-30);
font-weight: 400;
line-height: 1.8;
}
.our-team-content h3 span {
display: block;
font-size: 60%;
}
.our-team-content .social-media {
gap: 1.5rem;
}
.grid .our-team-content .social-media {
justify-content: center;
margin-top: 3rem;
}
.our-team-content .social-media a {
width: 5rem;
height: 5rem;
font-size: var(--font-24);
}
/* =========================================================
24. PAGINATION
========================================================= */
.pagination-row {
display: flex;
justify-content: center;
position: relative;
z-index: 1;
}
.pagination {
inset: 0;
background: rgb(36 36 36 / 80%);
backdrop-filter: blur(1rem);
border-radius: 10rem;
z-index: -1;
transform: translateZ(0);
will-change: opacity, transform;
border-radius: 100rem;
padding: 1rem 2rem;
margin: 0 auto;
display: inline-flex;
gap: 1rem;
}
.pagination .page-numbers {
width: 5rem;
height: 5rem;
border-radius: 100%;
display: inline-flex;
align-items: center;
justify-content: center;
line-height: 1;
}
.pagination .page-numbers.prev,
.pagination .page-numbers.next {
border: 1px solid rgba(255, 255, 255, 0.1);
}
.pagination .page-numbers.current,
.pagination .page-numbers:hover {
background: var(--secondary);
color: var(--white);
}
/* =========================================================
25. 404
========================================================= */
.error-404 .heading {
font-size: clamp(140px, 13.542vw, 260px);
font-weight: 900;
line-height: 1;
margin: 0;
}
.error-404 .heading-group h3 {
font-size: clamp(20px, 1.823vw, 35px);
}
.error-404 .button {
margin-top: 3rem;
}
/* =========================================================
25. MODAL
========================================================= */
.modal-popup-design {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, .9);
z-index: 9999999999999999999;
padding: 5rem;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
overflow: auto;
transform: scale(1.5);
opacity: 0;
visibility: hidden;
transition: 0.5s all;
-webkit-transition: 0.5s all;
-moz-transition: 0.5s all;
-ms-transition: 0.5s all;
-o-transition: 0.5s all;
}
.modal-popup-design.active {
transform: scale(1);
opacity: 1;
visibility: visible;
}
.modal-popup-design .heading {
font-size: var(--font-40);
}
.modal-popup-design input.button {
width: 100%;
text-align: left;
}
.modal-popup-row {
max-width: 60rem;
background: linear-gradient(135deg, #141518ad 0%, #1E1F25 100%);
backdrop-filter: blur(1rem);
-webkit-backdrop-filter: blur(1rem);
transition: all 0.5s ease;
transform: translateZ(0);
will-change: opacity, transform;
border-radius: 2rem;
padding: 6rem;
text-align: center;
margin: 0 auto;
overflow: hidden;
}
.modal-popup-row .top-bar {
margin: -6rem -6rem 6rem -6rem;
padding: 6rem;
background: linear-gradient(135deg, #ffb300, #fff1b0);
color: var(--body-bg);
}
.close {
position: absolute;
top: 2rem;
right: 2rem;
width: 4.2rem;
height: 4.2rem;
cursor: pointer;
background: transparent;
border: none;
outline: none;
background: var(--body-bg);
border-radius: 10rem;
}
.close:hover {
background: var(--white);
}
.close::before,
.close::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 2rem;
height: 2px;
background: var(--white);
transform-origin: center;
transition: all 0.3s ease;
}
.close::before {
transform: translate(-50%, -50%) rotate(45deg);
}
.close::after {
transform: translate(-50%, -50%) rotate(-45deg);
}
.close:hover::before,
.close:hover::after {
background: var(--primary);
}
/* =========================================================
25. Blog Details
========================================================= */
.single-blog-row {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
max-width: 70%;
margin: 0 auto;
}
.blog-image {
margin-bottom: 6rem;
width: 100%;
border-radius: 2rem;
overflow: hidden;
}
.blog-image img {
width: 100%;
}
.blog-meta-data {
display: flex;
flex-wrap: wrap;
gap: 3rem;
}
.blog-meta-data span {
display: flex;
flex-wrap: wrap;
align-items: center;
line-height: 1;
gap: 1.5rem;
}
.blog-meta-data span i {
color: var(--secondary);
}
.basic-content>*:first-child {
margin-top: 0;
}
.basic-content>*,
.basic-content p {
margin: 3rem 0 0 0;
}
.basic-content h1,
.basic-content h2,
.basic-content h3,
.basic-content h4,
.basic-content h5,
.basic-content h6 {
color: var(--secondary);
}
.basic-content h1,
.basic-content h2,
.basic-content h3,
.basic-content h4,
.basic-content h5,
.basic-content h6,
.basic-content ul,
.basic-content ol {
margin-top: 5rem;
}
.basic-content ol li:not(:last-child),
.basic-content ul li:not(:last-child) {
margin-bottom: 4rem;
}
.basic-content ol {
padding-left: 2rem;
}
.basic-content ol li {
padding-left: 1rem;
}
.basic-content ol li h1,
.basic-content ol li h2,
.basic-content ol li h3,
.basic-content ol li h4,
.basic-content ol li h5,
.basic-content ol li h6 {
position: relative;
top: 2px;
}
.basic-content ol li>* {
margin: 2rem 0 0 0;
}
.single-blog-comment {
margin-top: 8rem;
}
.comment-respond {
background: linear-gradient(135deg, #ffb300, #fff1b0);
color: var(--body-bg);
border-radius: 2rem;
padding: 6rem;
width: 100%;
}
.comment-list #reply-title {
display: flex;
align-items: center;
justify-content: space-between;
}
.comment-list #reply-title small a {
color: #000;
font-size: 16px;
}
.comments-listing {
margin-top: 8rem;
padding-top: 6rem;
border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.comment-respond input,
.comment-respond select,
.comment-respond textarea {
border-radius: 2rem;
border: none;
background: rgba(0, 0, 0, 0.15);
min-height: 6rem;
padding: 2rem 3rem;
min-height: 7rem;
}
.comment-respond label {
margin-bottom: 1.5rem;
display: inline-block;
}
.comment-form {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.comment-form-comment,
.comment-form-cookies-consent,
.form-submit {
order: 1;
}
.comment-form>* {
width: 100%;
}
.comment-form-author,
.comment-form-email {
width: 48%;
}
/* Container */
.comment-form-cookies-consent {
display: flex;
align-items: center;
gap: 12px;
line-height: 1.2;
position: relative;
}
.comment-form-cookies-consent input[type="checkbox"] {
position: absolute;
opacity: 0;
width: 1px;
height: 1px;
margin: 0;
padding: 0;
}
.comment-form-cookies-consent label {
cursor: pointer;
display: inline-block;
padding-left: 5rem;
position: relative;
user-select: none;
font-weight: 300;
}
.comment-form-cookies-consent label::before {
content: "";
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 3rem;
height: 3rem;
border-radius: 6px;
border: 1px solid var(--body-bg);
background: transparent;
transition: all 180ms cubic-bezier(.2, .9, .2, 1);
will-change: transform, background, border-color;
}
.comment-form-cookies-consent label::after {
content: "";
position: absolute;
left: 1rem;
top: 44%;
transform: translateY(-60%) scale(0) rotate(-45deg);
width: 7px;
height: 12px;
border-right: 3px solid var(--white);
border-bottom: 3px solid var(--white);
transition: transform 140ms cubic-bezier(.2, .9, .2, 1);
transform-origin: 50% 50%;
box-sizing: content-box;
}
.comment-form-cookies-consent input[type="checkbox"]:checked+label::before {
background: linear-gradient(135deg, var(--body-bg) 0%, var(--body-bg) 100%);
border-color: transparent;
transform: translateY(-50%) scale(1);
}
.comment-form-cookies-consent input[type="checkbox"]:checked+label::after {
transform: translateY(-60%) scale(1) rotate(45deg);
}
.comment-form-cookies-consent input[type="checkbox"]:focus+label::before {
border-color: rgba(6, 95, 212, 0.5);
}
@media (prefers-reduced-motion: reduce) {
.comment-form-cookies-consent label::before,
.comment-form-cookies-consent label::after {
transition: none;
}
}
.comments-title {
color: var(--secondary);
}
.comments-title span {
color: var(--white);
font-weight: 300;
}
/* Comment List Styles */
.comment-list {
list-style: none;
margin: 0;
padding: 0;
}
.comment-list .children {
list-style: none;
margin: 0;
padding-left: 4rem;
}
/* Individual Comment */
.comment {
margin-bottom: 2.4rem;
}
.comment-body {
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 3rem;
padding: 3rem;
transition: box-shadow 0.2s ease;
display: flex;
flex-direction: column;
gap: 2.4rem;
margin: 3rem 0;
}
/* Comment Meta Section */
.comment-meta {
display: flex;
align-items: flex-start;
justify-content: space-between;
flex-wrap: wrap;
gap: 1rem;
align-items: center;
}
.comment-author {
display: flex;
align-items: center;
gap: 1rem;
}
.comment-author .avatar {
border-radius: 50%;
flex-shrink: 0;
}
.comment-author .fn {
font-weight: 600;
}
.comment-author .fn a {
text-decoration: none;
transition: color 0.2s ease;
}
.comment-author .says {
display: none;
}
.comment-metadata {
font-size: var(--font-16);
}
.comment-metadata a {
text-decoration: none;
transition: color 0.2s ease;
}
.comment-metadata time {
font-weight: 400;
}
.comment-content {
line-height: 1.6;
}
.comment-content p {
margin: 0 0 1.2rem 0;
}
.comment-content p:last-child {
margin-bottom: 0;
}
.comment-reply-link {
display: inline-block;
font-weight: 500;
background: var(--secondary);
color: var(--white);
text-decoration: none;
padding: 0.4rem 3rem;
border-radius: 2rem;
transition: all 0.2s ease;
font-weight: 300;
}
.comment-reply-link:hover {
background: var(--primary);
color: var(--white);
}
/* =========================================================
26. Back to top
========================================================= */
.back-to-top {
position: fixed;
bottom: 30px;
right: 30px;
width: 60px;
height: 60px;
border-radius: 50%;
background: white;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
text-decoration: none;
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
z-index: 999999999;
}
/* Show on scroll */
.back-to-top.active {
opacity: 1;
visibility: visible;
}
/* Arrow styling */
.arrow-up {
position: absolute;
font-size: var(--font-22);
font-weight: bold;
color: var(--primary);
pointer-events: none;
}
/* Circular progress bar */
.progress-ring {
transform: rotate(-90deg);
}
.progress-ring__background {
fill: none;
stroke: #eee;
stroke-width: 4;
}
.progress-ring__circle {
fill: none;
stroke: var(--secondary); /* progress color */
stroke-width: 4;
stroke-linecap: round;
stroke-dasharray: 163; /* will be calculated dynamically in JS */
stroke-dashoffset: 163;
transition: stroke-dashoffset 0.1s linear;
}