/*
Theme Name: Optivai Tech
Description: Twenty Twenty-Four Child Theme
Author: Tryfon Tzanetis
Author URI: http://tafhub.com
Description: Twenty Twenty-Four is designed to be flexible,
versatile and applicable to any website. Its collection of templates and patterns tailor to different needs,
such as presenting a business,
blogging and writing or showcasing work. A multitude of possibilities open up with just a few adjustments to color and typography. Twenty Twenty-Four comes with style variations and full page designs to help speed up the site building process,
is fully compatible with the site editor,
and takes advantage of new design tools introduced in WordPress 6.4.
Template: twentytwentyfour
Requires at least: 6.4
Tested up to: 6.4
Requires PHP: 7.0
Version: 1.0 License: GNU General Public License v2 or later
License URI: http: //www.gnu.org/licenses/gpl-2.0.html
Tags: one-column,
custom-colors,
custom-menu,
custom-logo,
editor-style,
featured-images,
full-site-editing,
block-patterns,
rtl-language-support,
sticky-post,
threaded-comments,
translation-ready,
wide-blocks,
block-styles,
style-variations,
accessibility-ready,
blog,
portfolio,
news
Text Domain: twentytwentyfourchild
*/
/* Plus Jakarta Sans */
/*@font-face {
font-family: 'Plus Jakarta Sans';
src: url('fonts/PlusJakartaSans/PlusJakartaSans-ExtraLight.woff2') format('woff2'),
url('fonts/PlusJakartaSans/PlusJakartaSans-ExtraLight.woff') format('woff');
font-weight: 200;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Plus Jakarta Sans';
src: url('fonts/PlusJakartaSans/PlusJakartaSans-ExtraLightItalic.woff2') format('woff2'),
url('fonts/PlusJakartaSans/PlusJakartaSans-ExtraLightItalic.woff') format('woff');
font-weight: 200;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: 'Plus Jakarta Sans';
src: url('fonts/PlusJakartaSans/PlusJakartaSans-Light.woff2') format('woff2'),
url('fonts/PlusJakartaSans/PlusJakartaSans-Light.woff') format('woff');
font-weight: 300;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Plus Jakarta Sans';
src: url('fonts/PlusJakartaSans/PlusJakartaSans-LightItalic.woff2') format('woff2'),
url('fonts/PlusJakartaSans/PlusJakartaSans-LightItalic.woff') format('woff');
font-weight: 300;
font-style: italic;
font-display: swap;
}*/
@font-face {
font-family: 'Plus Jakarta Sans';
src: url('fonts/PlusJakartaSans/PlusJakartaSans-Italic.woff2') format('woff2'),
url('fonts/PlusJakartaSans/PlusJakartaSans-Italic.woff') format('woff');
font-weight: normal;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: 'Plus Jakarta Sans';
src: url('fonts/PlusJakartaSans/PlusJakartaSans-Regular.woff2') format('woff2'),
url('fonts/PlusJakartaSans/PlusJakartaSans-Regular.woff') format('woff');
font-weight: normal;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Plus Jakarta Sans';
src: url('fonts/PlusJakartaSans/PlusJakartaSans-Medium.woff2') format('woff2'),
url('fonts/PlusJakartaSans/PlusJakartaSans-Medium.woff') format('woff');
font-weight: 500;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Plus Jakarta Sans';
src: url('fonts/PlusJakartaSans/PlusJakartaSans-MediumItalic.woff2') format('woff2'),
url('fonts/PlusJakartaSans/PlusJakartaSans-MediumItalic.woff') format('woff');
font-weight: 500;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: 'Plus Jakarta Sans';
src: url('fonts/PlusJakartaSans/PlusJakartaSans-SemiBoldItalic.woff2') format('woff2'),
url('fonts/PlusJakartaSans/PlusJakartaSans-SemiBoldItalic.woff') format('woff');
font-weight: 600;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: 'Plus Jakarta Sans';
src: url('fonts/PlusJakartaSans/PlusJakartaSans-SemiBold.woff2') format('woff2'),
url('fonts/PlusJakartaSans/PlusJakartaSans-SemiBold.woff') format('woff');
font-weight: 600;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Plus Jakarta Sans';
src: url('fonts/PlusJakartaSans/PlusJakartaSans-Bold.woff2') format('woff2'),
url('fonts/PlusJakartaSans/PlusJakartaSans-Bold.woff') format('woff');
font-weight: bold;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Plus Jakarta Sans';
src: url('fonts/PlusJakartaSans/PlusJakartaSans-BoldItalic.woff2') format('woff2'),
url('fonts/PlusJakartaSans/PlusJakartaSans-BoldItalic.woff') format('woff');
font-weight: bold;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: 'Plus Jakarta Sans';
src: url('fonts/PlusJakartaSans/PlusJakartaSans-ExtraBoldItalic.woff2') format('woff2'),
url('fonts/PlusJakartaSans/PlusJakartaSans-ExtraBoldItalic.woff') format('woff');
font-weight: 800;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: 'Plus Jakarta Sans';
src: url('fonts/PlusJakartaSans/PlusJakartaSans-ExtraBold.woff2') format('woff2'),
url('fonts/PlusJakartaSans/PlusJakartaSans-ExtraBold.woff') format('woff');
font-weight: 800;
font-style: normal;
font-display: swap;
}
/* Plus Jakarta Sans */
:root {
--white: 255, 255, 255;
--black: 0, 0, 0;
--primary: 0, 76, 230;
--secondary: 3, 0, 143;
--body-txt-grey: 34, 35, 42;
--border1: 171, 185, 212;
--heading-text: 34, 35, 42;
--subheading-text: 3, 0, 143;
--heading-text-p: 34, 35, 42;
}
body,html {
border:0;
margin:0;
padding:0;
color: rgba(var(--body-txt-grey), 1);
font-size: 28px;
font-weight: normal;
line-height: normal;
font-family: 'Plus Jakarta Sans',sans-serif;
/*scroll-behavior: smooth;*/
}
img {
max-width: 100%;
height: auto;
}
a {
transition: all .4s ease-in-out;
}
h1,h2,h3,h4,h5,h6, strong {
font-weight: 600;
font-family: 'Plus Jakarta Sans',sans-serif;
}
section ul {
margin: 0;
padding: 0;
}
section ul li {
font-weight: normal;
display: flex;
align-items: flex-start;
text-align: left;
}
section ul li:before {
content: "";
width: 19px;
min-width: 19px;
height: 15px;
margin-top: 15px;
margin-right: 20px;
background-repeat: no-repeat;
background-position: 100%;
background-image: url('data:image/svg+xml,');
}
section ul li + li {
padding-top: 30px;
}
h1 { font-size: 48px; }
h2 { font-size: 40px; }
h3 { font-size: 32px; }
h4 { font-size: 24px; }
h5 { font-size: 20px; }
h6 { font-size: 16px; }
label {
font-size: 1.2rem;
line-height: normal;
color: rgba(var(--body-txt-grey),1);
font-family: 'Plus Jakarta Sans',sans-serif;
font-weight: 600;
margin: 0;
}
input,
textarea {
background-color: rgba(var(--white), 1);
color: rgba(var(--body-txt-grey), 1);
border: 1px solid rgba(var(--border1),1);
font-family: 'Plus Jakarta Sans',sans-serif;
border-radius: 12px;
font-weight: normal;
font-size: 18px;
padding: 15px 28px;
width: 100%;
}
input {
height: 74px;
}
textarea {
height: 155px;
}
input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
line-height: normal;
color: #333333;
}
input::-moz-placeholder,
textarea::-moz-placeholder {
line-height: normal;
color: #333333;
}
input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
line-height: normal;
color: #333333;
}
input:-ms-input-placeholder,
textarea:-moz-placeholder {
line-height: normal;
color: #333333;
}
input:focus,
textarea:focus,
input:focus-visible,
textarea:focus-visible {
border-color: rgba(var(--primary),1);
color: rgba(var(--body-txt-grey),1);
outline: none;
}
.wpcf7-not-valid-tip {
font-size: 18px;
padding-top: 5px;
}
@media (min-width: 1200px) {
.container, .container-lg, .container-md, .container-sm, .container-xl {
max-width: 100%;
}
}
@media (min-width: 1400px) {
.container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
max-width: 1590px;
}
}
.btn {
width: auto;
line-height: 66px;
border-radius: 12px;
padding: 0 20px;
font-size: 20px;
font-family: 'Plus Jakarta Sans',sans-serif;
font-weight: 500;
display: flex;
justify-content: center;
align-items: center;
border-width: 1px;
border-style: solid;
cursor: pointer;
text-decoration: none;
transition: all .4s ease-in-out;
}
.btn-primary {
background-color: rgba(var(--primary),1);
border-color: rgba(var(--primary),1);
color: rgba(var(--white),1);
}
.btn-primary.active,
.btn-primary:is(:hover, :focus) {
background-color: rgba(var(--primary),.8);
border-color: rgba(var(--primary),.8);
color: rgba(var(--white),1);
}
.btn-outline-primary {
background-color: transparent;
border-color: rgba(var(--primary),1);
color: rgba(var(--primary), 1);
}
.btn-outline-primary.active,
.btn-outline-primary:is(:hover, :focus) {
background-color: rgba(var(--primary),.8);
border-color: rgba(var(--primary),.8);
color: rgba(var(--white),1);
}
.btn-secondary {
background-color: rgba(var(--secondary),1);
border-color: rgba(var(--secondary),1);
color: rgba(var(--white),1);
}
.btn-secondary.active,
.btn-secondary:is(:hover, :focus) {
background-color: rgba(var(--secondary),.8);
border-color: rgba(var(--secondary),.8);
color: rgba(var(--white),1);
}
.btn-outline-secondary {
background-color: transparent;
border-color: rgba(var(--secondary),1);
color: rgba(var(--secondary), 1);
}
.btn-outline-secondary.active,
.btn-outline-secondary:is(:hover, :focus) {
background-color: rgba(var(--secondary),.8);
border-color: rgba(var(--secondary),.8);
color: rgba(var(--white),1);
}
@keyframes uptoDown {
0% {
transform: translateY(-50%)
}
50% {
transform: translateY(-40%)
}
to {
transform: translateY(-50%)
}
}
@keyframes img-anim-left {
0% {
transform: translateX(-5%);
clip-path: inset(0 100% 0 0);
opacity: 0;
}
100% {
transform: translateX(0);
clip-path: inset(0 0 0 0);
opacity: 1;
}
}
.img-custom-anim-left {
animation: img-anim-left 1.3s forwards cubic-bezier(0.645, 0.045, 0.355, 1) 0.4s;
opacity: 0;
}
main#site-content {
overflow: hidden;
}
section {
padding: 100px 0;
}
.heading {
padding-bottom: 50px;
}
.heading .title {
font-family: 'Plus Jakarta Sans',sans-serif;
font-weight: 600;
color: rgba(var(--heading-text), 1);
font-size: 60px;
margin-bottom: 0;
}
.heading .subtitle {
font-family: 'Plus Jakarta Sans',sans-serif;
font-weight: 500;
color: rgba(var(--subheading-text), 1);
font-size: 40px;
margin-bottom: 0;
}
.heading .subtitle ~ p {
font-family: 'Plus Jakarta Sans',sans-serif;
font-weight: normal;
color: rgba(var(--heading-text-p), 1);
font-size: 30px;
margin-bottom: 0px;
}
.heading:has(.subtitle) .title {
margin-bottom: 28px;
}
.heading:has(.subtitle ~ p) .subtitle {
margin-bottom: 18px;
}
/* Header Start */
header {
width: 100%;
padding: 16px 0;
position: fixed;
top: 80px;
z-index: 9;
background-color: transparent;
transition: all .3s ease-in-out;
}
header.header-sticky {
position: sticky;
top: 0;
padding: 10px 0;
background-color: #ebf7ff;
backdrop-filter: blur(10px);
box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .075);
}
header.header-sticky .navbar-brand img {
height: 50px;
}
header.header-sticky .header-inner .btn-secondary {
line-height: 50px;
font-size: 18px;
}
header.header-sticky .header-inner nav ul li a {
font-size: 20px;
}
header .header-inner nav.navbar {
width: 100%;
display: flex;
flex-flow: row;
justify-content: space-between;
align-items: center;
}
header .navbar-brand {
margin: 0;
padding: 0;
}
header .navbar-brand img {
width: auto;
height: 55px;
transition: all .3s ease-in-out;
}
header .header-inner nav ul {
list-style-type: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
header .header-inner nav ul li {
margin: 0;
padding: 0;
position: relative;
}
header .header-inner nav ul li a {
display: inline-block;
text-decoration: none;
padding: 10px 20px;
font-size: 24px;
line-height: 1;
color: #303036;
font-family: 'Plus Jakarta Sans',sans-serif;
font-weight: normal;
transition: all .3s ease-in-out;
}
header .header-inner nav ul li.scroll-link > a.active,
header .header-inner nav ul li.current-menu-item a,
header .header-inner nav ul li a:is(:hover, :active, .active) {
color: rgba(var(--primary), 1) !important;
}
header .header-inner nav ul li.scroll-link > a.active,
header .header-inner nav ul li.current-menu-item a,
header .header-inner nav ul li a:is(:active, .active) {
font-weight: 600;
}
header .header-inner nav ul li.scroll-link > a.active,
header .header-inner nav ul ul li.current-menu-item a,
header .header-inner nav ul ul li a:is(:hover, :active, .active) {
color: rgba(var(--primary), 1) !important;
}
header .header-inner ul li.menu-item-has-children>a:after {
content: '\f078';
font-family: 'Font Awesome 5 Free';
font-size: 14px;
margin-left: 6px;
display: inline-block;
transform-origin: center;
transition: all .4s ease-in-out;
}
header .header-inner ul li.menu-item-has-children:hover>a:after {
transform: rotate(180deg);
}
header .header-inner ul li.menu-item-has-children>ul.sub-menu li.menu-item-has-children:hover>a:after,
header .header-inner ul li.menu-item-has-children>ul.sub-menu li.menu-item-has-children>a:after {
/*transform: rotate(-90deg);*/
transform: unset;
content: '\f054';
}
header .header-inner nav ul.primary-menu-class ul {
position: absolute;
top: calc(100% + 10px);
left: 0;
min-width: 220px;
width: auto;
z-index: 1;
white-space: nowrap;
padding: 10px 0;
background-color: rgba(var(--secondary), 1);
border-radius: 10px;
opacity: 0;
visibility: hidden;
transition: all .15s linear;
}
header .header-inner nav ul.primary-menu-class ul li {
width: 100%;
}
header .header-inner nav ul.primary-menu-class ul li a {
width: 100%;
}
header .header-inner nav ul.primary-menu-class ul a {
color: rgba(var(--white), 1) !important;
}
header .header-inner .primary-menu-class>li.menu-item-has-children>ul.sub-menu {
visibility: hidden;
opacity: 0;
}
header .header-inner .primary-menu-class>li.menu-item-has-children:hover>ul.sub-menu {
visibility: visible;
opacity: 1;
}
header .header-inner .primary-menu-class>li.menu-item-has-children>ul.sub-menu li>ul.sub-menu {
top: 0;
right: auto;
left: calc(100% + 0px);
opacity: 0;
visibility: hidden;
}
header .header-inner .primary-menu-class>li.menu-item-has-children>ul.sub-menu li:hover>ul.sub-menu {
visibility: visible;
opacity: 1;
}
header .header-inner .btn-secondary {
line-height: 56px;
}
header .header-inner .button-group {
display: none;
}
/* Header End */
/* Hero Banner Start */
.hero-banner {
background: linear-gradient(to bottom, #d8ecff 0%,#ffffff 100%);
padding-top: 280px;
position: relative;
padding-bottom: 0;
}
.hero-banner::before {
content: "";
position: absolute;
top: 0;
width: 1420px;
height: 386px;
transform: translateX(-50%);
left: 50%;
background-image: url('data:image/svg+xml,');
}
.hero-banner .container {
position: relative;
z-index: 1;
}
.hero-banner .banner-text {
max-width: 1050px;
margin: 0 auto;
text-align: center;
}
.hero-banner .banner-text .banner-button {
display: flex;
justify-content: center;
gap: 20px;
}
.hero-banner .banner-text h1 {
margin-bottom: 36px;
color: rgba(var(--body-txt-grey), 1);
font-weight: 600;
font-size: 76px;
}
.hero-banner .banner-text h1 span {
color: rgba(var(--primary), 1);
display: block;
}
.hero-banner .banner-text h2 {
margin-bottom: 56px;
color: #454D5E;
font-size: 30px;
font-weight: normal;
}
.hero-banner .banner-text .btn {
min-width: 315px;
}
.hero-banner .banner-img {
position: relative;
margin: 130px auto 0 auto;
max-width: 732px;
text-align: right;
background-image: url('data:image/svg+xml,');
background-position: top center;
}
.hero-banner .banner-img img {
margin-top: -112px;
max-height: 545px;
}
.hero-banner .banner-img::before {
content: "";
width: 500px;
height: 500px;
border-radius: 50%;
filter: blur(200px);
position: absolute;
background: linear-gradient(135deg, #050193 0%, #004CE6 100%);
opacity: .25;
left: 50%;
z-index: -1;
transform: translateX(-50%);
}
.hero-banner .left-center-shape {
content: "";
position: absolute;
top: 0;
width: 290px;
height: 330px;
transform: translateY(-50%);
left: 0;
top: 50%;
background-image: url('data:image/svg+xml,');
animation: uptoDown 4s ease-in-out infinite;
}
.hero-banner .bottom-right-shape {
content: "";
position: absolute;
width: 271px;
height: 265px;
transform: translateY(-70%);
right: 40px;
top: 70%;
background-image: url('data:image/svg+xml,');
animation: uptoDown 4s ease-in-out infinite;
}
.hero-banner .top-right-shape {
content: "";
position: absolute;
width: 608px;
height: 345px;
right: 0;
top: 0;
background-image: url('data:image/svg+xml,');
}
/* Hero Banner End */
/* What We Do Start */
section.what-we-do {
padding-left: 80px;
padding-right: 80px;
border-radius: 42px;
background: linear-gradient(135deg, #050193 0%, #004CE6 100%);
color: #ffffff;
margin-left: 80px;
margin-right: 80px;
}
.what-we-do .heading .title {
margin-bottom: 0;
color: #fff;
}
.what-we-do-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 30px;
}
.what-we-do-card {
background: rgba(255, 255, 255, 0.20);
backdrop-filter: blur(10px);
border-radius: 20px;
padding: 28px;
border: 1px solid rgba(255, 255, 255, 0.1);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.what-we-do-card .icon {
width: 92px;
height: 92px;
background: #ffffff;
border-radius: 20px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 24px;
}
.what-we-do-card img {
width: 62px;
height: 62px;
}
.what-we-do-card h3 {
font-size: 30px;
font-weight: 600;
margin-bottom: 18px;
}
.what-we-do-card p {
font-size: 26px;
font-weight: normal;
}
/* What We Do End */
/* About Us Start */
.content-media-wrapper {
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 90px;
}
.content-media-description:has(p ~ ul) ul {
margin-top: -0.5rem;
}
.content-media-visual {
position: relative;
}
.content-media-visual:before {
content: "";
position: absolute;
width: 302px;
height: 268px;
right: -36px;
top: -36px;
background-image: url('data:image/svg+xml,');
animation: img-anim-left 1.6s forwards cubic-bezier(0.645, 0.045, 0.355, 1) 0.6s;
opacity: 0;
}
.content-media-visual img {
max-width: 100%;
border-radius: 38px;
object-fit: cover;
}
/* About Us End */
/* Our Services Start */
.agentic-ai-section {
background: #F0F5FF;
text-align: center;
position: relative;
}
.agentic-ai-section:before {
content: "";
position: absolute;
width: 270px;
height: 410px;
right: 0;
top: 5%;
transform: translateY(-50%);
background-image: url('data:image/svg+xml,');
animation: uptoDown 4s ease-in-out infinite;
}
.agentic-ai-section .capabilities-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 30px;
margin-bottom: 80px;
margin-top: 30px;
}
.agentic-ai-section .capability-card {
background: #fff;
border: 1px solid rgba(var(--primary),1);
border-radius: 32px;
padding: 70px 35px;
transition: 0.3s ease;
}
.agentic-ai-section .capability-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 30px rgba(0,0,0,0.08);
}
.agentic-ai-section .capability-card img {
width: 100px;
margin-bottom: 48px;
}
.agentic-ai-section .capability-card p {
font-weight: 500;
margin-bottom: 0;
}
.agentic-ai-section .use-cases-title {
font-size: 40px;
font-weight: 500;
margin-bottom: 100px;
color: rgba(var(--heading-text), 1);
}
.agentic-ai-section .use-cases-grid {
display: grid;
grid-template-columns: 330px 440px 1fr;
gap: 0;
position: relative;
max-width: 1160px;
margin: 0 auto;
padding-bottom: 40px;
}
.agentic-ai-section .use-case-item {
color: rgba(var(--heading-text), 1);
font-weight: 500;
padding-left: 70px;
padding-right: 70px;
position: relative;
}
.agentic-ai-section .use-case-item::after {
content: "";
position: absolute;
right: 0px;
top: 0;
width: 1px;
height: 100%;
background: #A9B5CD;
}
.agentic-ai-section .use-case-item:nth-child(1),
.agentic-ai-section .use-case-item:nth-child(4) {
padding-left: 0;
}
.agentic-ai-section .use-case-item:nth-child(3),
.agentic-ai-section .use-case-item:nth-child(6) {
padding-right: 0;
}
.agentic-ai-section .use-case-item:nth-child(3)::after,
.agentic-ai-section .use-case-item:nth-child(6)::after {
display: none;
}
.agentic-ai-section .use-case-item:nth-child(-n+3) {
padding-bottom: 70px;
}
.agentic-ai-section .use-case-item:nth-child(n+4):nth-child(-n+6) {
padding-top: 70px;
}
.agentic-ai-section .use-case-item:nth-child(n+4):nth-child(-n+6):before {
content: "";
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 1px;
background: #A9B5CD;
}
/* Our Services End */
/* AI Integrations Start */
.ai-integrations-section {
background: #E8EEFF;
text-align: center;
position: relative;
}
.ai-integrations-section:before {
content: "";
position: absolute;
width: 349px;
height: 388px;
left: 0;
top: 0;
transform: translateY(-50%);
background-image: url('data:image/svg+xml,');
animation: uptoDown 4s ease-in-out infinite;
}
.ai-integrations-section .heading {
padding-bottom: 35px;
max-width: 870px;
margin: 0 auto;
}
.ai-integrations-section .support-title {
font-size: 40px;
font-weight: 500;
margin-bottom: 50px;
color: rgba(var(--heading-text), 1);
}
.support-grid {
display: flex;
gap: 50px;
flex-wrap: wrap;
justify-content: center;
padding: 0 70px;
}
.ai-integrations-section .support-card {
background: #fff;
padding: 30px;
border-radius: 14px;
font-weight: 500;
transition: 0.3s ease;
display: flex;
justify-content: center;
align-items: center;
width: calc((100% / 3) - 34px);
}
/* AI Integrations End */
/* CRM & Automation Solutions Start */
.crm-automation-section {
background-color: #F0F5FF;
}
.crm-automation-section .crm-automation-wrapper {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 40px;
}
.crm-automation-section .crm-automation-left {
flex: 1 1 40%;
}
.crm-automation-section .crm-automation-right {
flex: 1 1 55%;
}
.crm-automation-section h3 {
font-size: 40px;
font-weight: 500;
margin-bottom: 40px;
color: rgba(var(--heading-text), 1);
}
.crm-automation-section .crm-automation-left .deliverables-list {
list-style: none;
}
.crm-automation-section .crm-automation-left .deliverables-list li {
font-size: 30px;
}
.crm-automation-section .crm-automation-right img {
max-width: 100%;
}
/* CRM & Automation Solutions End */
/* Platforms we specialized in Start */
.platforms-section {
text-align: center;
}
.platforms-section .platforms-list {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
gap: 30px;
}
/* Platforms we specialized in End */
/* Why Choose OptivAI Start */
.why-optivai-section {
background-color: #E8EEFF;
}
.why-optivai-wrapper {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 100px;
padding-top: 20px;
}
.why-optivai-image {
position: relative;
}
.why-optivai-image:before {
content: "";
position: absolute;
width: 271px;
height: 300px;
left: -46px;
top: -35px;
background-image: url('data:image/svg+xml,');
animation: img-anim-left 1.3s forwards cubic-bezier(0.645, 0.045, 0.355, 1) 0.3s;
opacity: 0;
}
.why-optivai-image img {
max-width: 100%;
border-radius: 38px;
object-fit: cover;
}
/* Why Choose OptivAI End */
/* Let’s Build Your AI Start */
.ai-roadmap-section {
padding-bottom: 0;
position: relative;
}
.ai-roadmap-section .ai-roadmap-wrapper {
display: flex;
gap: 100px;
align-items: center;
background-color: rgba(var(--secondary),1);
padding: 80px;
border-radius: 30px;
}
.ai-roadmap-section .ai-roadmap-left {
flex: 1 1 50%;
color: #fff;
display: flex;
flex-direction: column;
gap: 40px;
}
.ai-roadmap-section .heading {
padding-bottom: 0;
}
.ai-roadmap-section .heading .title {
color: white;
}
.ai-roadmap-section .ai-roadmap-description {
font-size: 22px;
}
.ai-roadmap-section .ai-roadmap-description p {
margin-bottom: 0;
}
.ai-roadmap-section .ai-roadmap-email {
display: flex;
align-items: center;
gap: 20px;
font-size: 26px;
font-weight: 500;
}
.ai-roadmap-section .ai-roadmap-email a {
color: #fff;
text-decoration: none;
}
.ai-roadmap-section .ai-roadmap-right {
flex: 1 1 45%;
}
.ai-roadmap-section .ai-roadmap-right form label {
display: block;
}
.ai-roadmap-section .ai-roadmap-right form p {
color: white;
font-size: 20px;
font-weight: 500;
position: relative;
}
.ai-roadmap-section .ai-roadmap-right form input[type="submit"] {
background-color: rgba(var(--primary),1);
border-color: white;
font-weight: 500;
font-size: 26px;
color: white;
min-width: 315px;
width: auto;
margin: 0 auto;
display: block;
padding-left: 30px;
padding-right: 30px;
transition: all .4s ease-in-out;
}
.ai-roadmap-section .ai-roadmap-right form input[type="submit"]:hover {
background-color: rgba(var(--primary),.8);
color: rgba(var(--white),1);
height: 66px;
}
.ai-roadmap-section .ai-roadmap-right form .wpcf7-spinner {
position: absolute;
bottom: 20px;
right: 0;
}
.ai-roadmap-section .ai-roadmap-right form p:last-child {
margin-bottom: 0;
}
.ai-roadmap-section .ai-roadmap-right form .wpcf7-response-output {
color: white;
text-align: center;
font-size: 18px;
margin-bottom: 0;
padding: 0.5em 1em;
}
/* Let’s Build Your AI End */
footer.footer {
background: linear-gradient(to bottom, #0b0b2a 0%,#0f103e 100%);
padding-top: 180px;
padding-bottom: 50px;
color: white;
margin-top: -110px;
}
footer.footer .footer-details {
max-width: 440px;
display: flex;
flex-direction: column;
gap: 30px;
}
footer.footer .footer-details aside:first-child {
padding-bottom: 15px;
}
footer.footer .footer-details aside .textwidget p {
margin-bottom: 0;
font-size: 20px;
}
footer.footer .footer-details aside .textwidget p a {
font-size: 26px;
font-weight: 500;
text-decoration: none;
color: white;
}
footer.footer .footer-details aside#text-3 .textwidget p {
display: flex;
align-items: center;
gap: 20px;
}
footer.footer .footer-details aside#text-3 .textwidget p:before {
content: "";
width: 26px;
min-width: 26px;
height: 20px;
margin-top: 20px;
display: inline-block;
background-image: url('data:image/svg+xml,');
animation: uptoDown 4s ease-in-out infinite;
}
footer.footer .footer-menu {
padding-bottom: 85px;
}
footer.footer .footer-menu .widget-title {
font-weight: 600;
font-size: 26px;
margin-bottom: 0.75rem;
}
footer.footer .footer-menu .menu {
margin: 0;
padding: 0;
list-style: none;
}
footer.footer .footer-menu .menu li + li {
padding-top: 12px;
}
footer.footer .footer-menu .menu li a {
color: white;
text-decoration: none;
font-size: 20px;
}
footer.footer .footer-menu .menu li.current-menu-item a,
footer.footer .footer-menu .menu li a:hover {
color: rgba(var(--primary),1);
}
footer.footer .copy-right {
border-top: 1px solid rgba(var(--primary),1);
padding-top: 35px;
}
footer.footer .copy-right .copy {
font-weight: 500;
font-size: 20px;
padding-bottom: 12px;
}
footer.footer a {
text-decoration: none;
color: white;
}
footer.footer a:hover {
color: rgba(var(--primary),1);
}
footer.footer .copy-right .text {
font-size: 17px;
}
/* Responsive Css */
@media (max-width: 1650px) {
section.what-we-do {
padding-left: 40px;
padding-right: 40px;
margin-left: 20px;
margin-right: 20px;
}
}
@media (max-width: 1400px) {
body, html {
font-size: 20px;
}
header {
top: 40px;
}
header .header-inner nav ul li a {
font-size: 20px;
}
header.header-sticky .header-inner nav ul li a {
font-size: 18px;
}
section {
padding: 80px 0;
}
section ul li + li {
padding-top: 15px;
}
section ul li:before {
margin-top: 8px;
margin-right: 15px;
}
.wpcf7-form-control-wrap input {
height: 66px;
}
.ai-roadmap-section .ai-roadmap-right form input[type=submit],
.btn {
font-size: 18px;
line-height: initial;
height: 56px;
}
header .header-inner .btn-secondary {
line-height: 48px;
height: 48px;
}
.ai-roadmap-section .ai-roadmap-right form input[type="submit"] {
min-width: auto;
}
.hero-banner {
padding-top: 220px;
}
.hero-banner .banner-text h1 {
font-size: 60px;
}
.hero-banner .banner-text h2 {
font-size: 26px;
}
.hero-banner .banner-text .btn {
min-width: 260px;
}
.heading .title {
font-size: 50px;
}
.heading .subtitle ~ p {
font-size: 26px;
}
.what-we-do-card p {
font-size: inherit;
}
.what-we-do-card h3 {
font-size: 26px;
}
.ai-integrations-section .support-title,
.agentic-ai-section .use-cases-title,
.heading .subtitle,
.crm-automation-section h3 {
font-size: 36px;
}
section.what-we-do {
padding-left: 20px;
padding-right: 20px;
}
.content-media-visual {
margin-right: 30px;
}
.why-optivai-image {
margin-left: 40px;
}
.content-media-wrapper,
.why-optivai-wrapper {
gap: 60px;
}
.agentic-ai-section .use-cases-title {
margin-bottom: 70px;
}
.support-grid {
gap: 30px;
}
.ai-roadmap-section .ai-roadmap-wrapper {
padding: 60px;
}
footer.footer .footer-details aside .textwidget p a,
.ai-roadmap-section .ai-roadmap-email {
font-size: 24px;
}
footer.footer .footer-menu .widget-title {
font-size: 24px;
}
footer.footer .copy-right .copy,
footer.footer .footer-menu .menu li a {
font-size: 18px;
}
footer.footer .copy-right .text {
font-size: 16px;
}
.ai-integrations-section .heading {
max-width: 800px;
}
}
@media (max-width: 1199px) {
.container, .container-lg, .container-md, .container-sm, .container-xl {
max-width: 100%;
}
body, html {
font-size: 18px;
}
header {
top: 20px;
}
header .header-inner nav ul li a {
font-size: 18px;
padding: 10px 15px;
}
header.header-sticky .header-inner nav ul li a {
font-size: 16px;
}
header.header-sticky .header-inner .btn-secondary {
line-height: 46px;
font-size: 16px;
height: 46px;
}
header .navbar-brand img {
height: 50px;
}
.ai-roadmap-section .ai-roadmap-right form input[type=submit],
.btn {
font-size: 16px;
}
.agentic-ai-section .use-case-item:nth-child(-n+3) {
padding-bottom: 50px;
}
.agentic-ai-section .use-case-item:nth-child(n+4):nth-child(-n+6) {
padding-top: 50px;
}
.heading {
padding-bottom: 30px;
}
.hero-banner {
padding-top: 180px;
}
.agentic-ai-section .capability-card {
padding: 50px 20px;
}
.agentic-ai-section .use-cases-grid {
grid-template-columns: 1fr 1fr 1fr;
}
.support-grid {
padding: 0;
}
.platforms-section .platforms-list {
flex-wrap: nowrap;
}
.ai-roadmap-section .ai-roadmap-wrapper {
padding: 60px 30px;
}
.heading .title {
font-size: 44px;
}
.ai-roadmap-section .ai-roadmap-wrapper {
gap: 40px;
}
.heading:has(.subtitle) .title {
margin-bottom: 20px;
}
.heading:has(.subtitle ~ p) .subtitle {
margin-bottom: 15px;
}
section.what-we-do {
padding-left: 10px;
padding-right: 10px;
}
.hero-banner .banner-text .btn {
min-width: 240px;
}
footer.footer .footer-details aside .textwidget p a,
.ai-roadmap-section .ai-roadmap-email {
font-size: 22px;
}
.ai-roadmap-section .ai-roadmap-description {
font-size: inherit;
}
}
@media (max-width: 991px) {
header .header-inner .btn-secondary {
margin-left: auto;
margin-right: 20px;
}
.hero-banner .top-right-shape {
width: 300px;
height: 170px;
background-size: 100%;
}
header .header-inner button.navbar-toggler {
border: none;
padding: 0;
font-size: 30px;
width: 27px;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
}
header .header-inner .navbar-toggler .fa-bars:before {
color: rgba(var(--secondary), 1);
transition: all .4s ease-in-out;
}
header .header-inner button.navbar-toggler:focus-visible,
header .header-inner button.navbar-toggler:focus {
box-shadow: none;
outline: none;
}
header .header-inner button.navbar-toggler[aria-expanded="true"] .fa-bars:before {
content:"\f00d";
}
header .header-inner nav.navbar {
position: relative;
}
header .header-inner .primary-menu-wrapper {
position: absolute;
right: 0;
top: calc(100% + 10px);
background-color: white;
border-radius: 10px;
border: 1px solid rgba(var(--primary), 1);
min-width: 200px;
padding: 10px 10px 15px 10px;
}
/*header .header-inner .primary-menu-wrapper:before {
content: "";
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: rgba(0, 0, 0, 0.5);
z-index: 10;
}*/
header .header-inner nav ul {
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
}
header .header-inner nav ul li,
header .header-inner nav ul li a {
min-width: 100%;
}
.capabilities-grid {
grid-template-columns: repeat(2, 1fr);
}
.use-cases-grid {
grid-template-columns: repeat(2, 1fr);
}
.support-grid {
grid-template-columns: repeat(2, 1fr);
}
.why-optivai-wrapper {
flex-direction: column;
text-align: center;
}
.why-optivai-list li {
text-align: left;
}
.ai-roadmap-wrapper {
flex-direction: column;
}
.hero-banner {
padding-top: 160px;
}
.hero-banner .banner-text h1 {
font-size: 44px;
margin-bottom: 15px;
}
.hero-banner .banner-text h2 {
font-size: 20px;
margin-bottom: 30px;
}
.hero-banner .banner-text {
max-width: 500px !important;
}
.hero-banner .left-center-shape {
width: 165px;
background-size: 100%;
height: 188px;
top: 25%;
left: -80px;
}
.hero-banner .banner-text .btn {
min-width: 220px;
}
.hero-banner .bottom-right-shape {
width: 150px;
background-size: 100%;
height: 150px;
right: -50px;
}
section {
padding: 60px 0;
}
.heading .title {
font-size: 36px;
}
.heading .subtitle ~ p {
font-size: 22px;
}
.ai-integrations-section .support-title,
.agentic-ai-section .use-cases-title,
.heading .subtitle,
.crm-automation-section h3 {
font-size: 30px;
}
section.what-we-do {
border-radius: 20px;
}
.what-we-do-grid {
grid-template-columns: repeat(1, 1fr);
}
.what-we-do-card h3 {
font-size: 24px;
}
.what-we-do-card {
border-radius: 12px;
}
.content-media-wrapper, .why-optivai-wrapper {
grid-template-columns: 1fr;
}
.why-optivai-image img,
.content-media-visual img {
border-radius: 20px;
}
.agentic-ai-section:before {
width: 150px;
height: 230px;
right: -50px;
background-size: 100%;
top: 10%;
}
.agentic-ai-section .capabilities-grid {
grid-template-columns: repeat(2, 1fr);
margin-bottom: 60px;
}
.agentic-ai-section .use-cases-title {
margin-bottom: 50px;
}
.agentic-ai-section .use-case-item {
padding-left: 30px;
padding-right: 30px;
}
.agentic-ai-section .use-cases-grid {
padding-bottom: 20px;
}
.ai-integrations-section .heading {
max-width: 500px;
}
.ai-integrations-section .support-card {
width: calc((100% / 2) - 34px);
}
.why-optivai-wrapper {
padding-top: 0;
gap: 80px;
}
.why-optivai-image {
order: 2;
}
.why-optivai-section .heading .title {
text-align: left;
}
.ai-roadmap-section .ai-roadmap-wrapper {
padding: 50px 30px;
}
.ai-roadmap-section .ai-roadmap-left {
gap: 20px;
flex: none;
width: 100%;
}
.ai-roadmap-section .ai-roadmap-wrapper {
flex-direction: column;
gap: 50px;
flex-wrap: wrap;
border-radius: 20px;
}
footer.footer .footer-details aside .textwidget p a,
.ai-roadmap-section .ai-roadmap-email {
font-size: 20px;
}
.ai-roadmap-section .ai-roadmap-right {
flex: auto;
width: 100%;
}
.wpcf7-form-control-wrap input {
height: 56px;
}
input, textarea {
padding: 10px 20px;
font-size: 16px;
}
.ai-roadmap-section .ai-roadmap-right form p {
font-size: inherit;
}
footer.footer .footer-details aside .textwidget p {
font-size: inherit;
}
.agentic-ai-section .capability-card {
border-radius: 20px;
}
.ai-integrations-section:before {
width: 180px;
background-size: 100%;
height: 200px;
left: -90px;
}
footer.footer {
padding-top: 160px;
padding-bottom: 35px;
}
footer.footer .row>.col-md-6 {
width: 100%;
}
footer.footer .footer-menu {
padding-bottom: 35px;
padding-top: 35px;
}
footer.footer .footer-details {
gap: 20px;
}
}
@media (max-width: 767px) {
body, html {
font-size: 16px;
}
.hero-banner {
padding-top: 140px;
}
.hero-banner .banner-text h1 {
font-size: 40px;
}
.hero-banner .banner-text h1 span {
display: inline;
}
.hero-banner .banner-text h2 {
font-size: 16px;
}
.hero-banner .banner-text .banner-button {
flex-direction: column;
}
.hero-banner .banner-text {
max-width: 370px !important;
}
.hero-banner .banner-text .btn {
max-width: 280px;
}
.hero-banner .banner-text .banner-button {
align-items: center;
gap: 15px;
}
.hero-banner .banner-img {
background-size: 100%;
}
.hero-banner .banner-img img {
margin-top: -12%;
max-width: 85%;
}
.hero-banner .banner-img::before {
width: 100%;
height: 100%;
bottom: 0;
filter: blur(100px);
}
.hero-banner .banner-img {
margin: 15% auto 0 auto;
background-size: 95%;
background-repeat: no-repeat;
}
.content-media-visual:before {
background-size: 100%;
background-repeat: no-repeat;
width: 45%;
height: 48%;
right: -6%;
top: -6%;
}
.why-optivai-image {
margin-left: 30px;
}
.why-optivai-wrapper {
gap: 60px;
}
.why-optivai-image:before {
background-size: 100%;
background-repeat: no-repeat;
width: 45%;
height: 70%;
left: -6%;
top: -6%;
}
section ul li + li {
padding-top: 10px;
}
.agentic-ai-section .capabilities-grid {
grid-template-columns: repeat(1, 1fr);
max-width: 240px;
margin: 20px auto 50px auto;
gap: 20px;
}
.heading .subtitle ~ p {
font-size: 16px;
}
.heading .title {
font-size: 32px;
}
.what-we-do-card h3 {
font-size: 20px;
}
.ai-integrations-section .support-title,
.agentic-ai-section .use-cases-title,
.heading .subtitle, .crm-automation-section h3 {
font-size: 26px;
}
.agentic-ai-section .use-case-item {
padding-left: 15px;
padding-right: 15px;
}
.agentic-ai-section .use-case-item:nth-child(-n+3) {
padding-bottom: 30px;
}
.agentic-ai-section .use-case-item:nth-child(n+4):nth-child(-n+6) {
padding-top: 30px;
}
.agentic-ai-section .use-cases-title {
margin-bottom: 40px;
}
.ai-integrations-section .support-title {
margin-bottom: 20px;
}
.ai-integrations-section .support-card {
width: calc((100% / 2) - 16px);
padding: 20px;
}
.support-grid {
gap: 20px;
}
section {
padding: 50px 0;
}
.what-we-do-card {
padding: 20px;
}
.what-we-do-card .icon {
width: 70px;
height: 70px;
margin-bottom: 20px;
border-radius: 12px;
}
.what-we-do-card img {
width: 50px;
height: 50px;
}
.what-we-do-grid {
gap: 20px;
}
.heading {
padding-bottom: 20px;
}
.heading:has(.subtitle) .title {
margin-bottom: 10px;
}
.heading:has(.subtitle ~ p) .subtitle {
margin-bottom: 10px;
}
.agentic-ai-section .capability-card img {
width: 70px;
margin-bottom: 30px;
}
.ai-integrations-section .support-title {
margin-bottom: 20px;
}
footer.footer .footer-details aside .textwidget p a, .ai-roadmap-section .ai-roadmap-email {
font-size: 18px;
}
footer.footer .copy-right .copy, footer.footer .footer-menu .menu li a {
font-size: 16px;
}
footer.footer .footer-menu .widget-title {
font-size: 22px;
margin-bottom: 1rem;
}
footer.footer .footer-menu .menu li + li {
padding-top: 15px;
}
footer.footer .copy-right .text {
font-size: 14px;
}
footer.footer .copy-right {
text-align: left !important;
padding-top: 25px;
}
footer.footer {
padding-top: 140px;
padding-bottom: 25px;
margin-top: -80px;
}
.ai-roadmap-section .ai-roadmap-wrapper {
padding: 40px 20px;
}
.hero-banner {
background: linear-gradient(to bottom, #ecf6ff 0%, #ffffff 100%);
}
.hero-banner::before {
width: 150px;
height: 150px;
filter: blur(100px);
background: linear-gradient(135deg, #050193 0%, #004CE6 100%);
opacity: .25;
}
header.header-sticky .header-inner nav ul li a,
header .header-inner nav ul li a {
font-size: 16px !important;
}
}
@media (max-width: 479px) {
header .header-inner .primary-menu-wrapper {
min-width: 180px;
}
header .navbar-brand img {
height: 35px;
}
header.header-sticky .navbar-brand img {
height: 32px;
}
header .header-inner .btn-secondary {
font-size: 13px;
padding: 0 10px;
line-height: 40px;
height: 40px;
}
header.header-sticky .header-inner .btn-secondary {
font-size: 12px;
line-height: 38px;
height: 38px;
}
header .header-inner .btn-secondary {
margin-right: 15px
}
input, textarea {
padding: 10px 20px;
font-size: 14px;
}
textarea {
height: 130px;
}
footer.footer .footer-details aside#text-3 .textwidget p,
.ai-roadmap-section .ai-roadmap-email {
gap: 10px;
}
.hero-banner .top-right-shape {
width: 50%;
height: 10%;
background-size: 100%;
background-repeat: no-repeat;
}
.ai-roadmap-section .ai-roadmap-right form input[type=submit], .btn {
height: 46px;
border-radius: 8px;
}
.support-grid {
justify-content: center;
flex-direction: column;
max-width: 260px;
margin: 0 auto;
}
.ai-integrations-section .support-card {
width: 100%;
}
.hero-banner .banner-text h1 {
font-size: 36px;
}
.hero-banner .banner-text {
max-width: 330px !important;
}
.heading .title {
font-size: 28px;
}
.ai-integrations-section .support-title,
.agentic-ai-section .use-cases-title,
.heading .subtitle,
.crm-automation-section h3 {
font-size: 20px;
}
.agentic-ai-section .heading {
max-width: 250px;
margin: 0 auto;
}
.ai-integrations-section .heading {
padding-bottom: 25px;
}
.ai-integrations-section .support-card {
padding: 15px 20px;
}
.crm-automation-section h3 {
margin-bottom: 20px;
}
section ul li:before {
width: 15px;
min-width: 15px;
height: 12px;
background-size: 100%;
margin-top: 5px;
margin-right: 10px;
}
.platforms-section .platforms-list {
flex-wrap: wrap;
justify-content: center;
gap: 15px;
}
.platforms-section .platforms-list .item {
width: 40%;
}
.wpcf7-form-control-wrap input {
height: 46px;
border-radius: 8px;
padding: 10px 15px;
}
textarea {
height: 110px;
border-radius: 8px;
padding: 10px 15px;
}
footer.footer {
padding-top: 100px;
margin-top: -60px;
}
footer.footer .footer-details {
gap: 15px;
}
footer.footer .row .row .col-4 {
flex: 0 0 auto;
width: 41.66666667%;
}
footer.footer .row .row .col-8 {
flex: 0 0 auto;
width: 58.33333333%;
}
footer.footer .copy-right .copy {
padding-bottom: 5px;
}
.platforms-section .heading {
max-width: 230px;
margin: 0 auto;
}
.agentic-ai-section .use-case-item:nth-child(-n+3) {
padding-bottom: 20px;
}
.agentic-ai-section .use-case-item:nth-child(n+4):nth-child(-n+6) {
padding-top: 20px;
}
.agentic-ai-section .use-cases-grid {
padding-bottom: 0;
}
}