/*=========================================================
eHostSupport v2
style.css
PART 1A
=========================================================*/
/*===============================
GOOGLE FONT
================================*/
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');
/*===============================
CSS VARIABLES
================================*/
:root{
--primary:#2563eb;
--primary-dark:#1d4ed8;
--secondary:#38bdf8;
--dark:#0f172a;
--dark-light:#162033;
--dark-card:#1e293b;
--white:#ffffff;
--light:#f8fafc;
--gray:#94a3b8;
--border:#e5e7eb;
--success:#10b981;
--warning:#f59e0b;
--danger:#ef4444;
--heading:#0f172a;
--text:#475569;
--shadow-sm:0 10px 25px rgba(15,23,42,.05);
--shadow:
0 25px 60px rgba(15,23,42,.12);
--shadow-hover:
0 30px 80px rgba(37,99,235,.22);
--glass:
rgba(255,255,255,.12);
--radius:18px;
--transition:.35s ease;
--container:1320px;
}
/*===============================
RESET
================================*/
*,
*::before,
*::after{
margin:0;
padding:0;
box-sizing:border-box;
}
html{
scroll-behavior:smooth;
}
body{
font-family:'Poppins',sans-serif;
background:#fff;
color:var(--text);
line-height:1.8;
overflow-x:hidden;
-webkit-font-smoothing:antialiased;
}
img{
max-width:100%;
display:block;
}
a{
text-decoration:none;
transition:var(--transition);
}
ul{
list-style:none;
}
button,
input,
select,
textarea{
font-family:'Poppins',sans-serif;
outline:none;
}
section{
position:relative;
padding:110px 0;
}
.container{
width:min(100% - 40px,var(--container));
margin:auto;
}
::selection{
background:var(--primary);
color:#fff;
}
/*===============================
TYPOGRAPHY
================================*/
h1{
color:var(--heading);
font-size:64px;
font-weight:800;
line-height:1.12;
}
h2{
font-size:46px;
color:var(--heading);
line-height:1.2;
font-weight:700;
}
h3{
font-size:24px;
color:var(--heading);
font-weight:700;
}
h4{
font-size:18px;
}
p{
color:var(--text);
font-size:16px;
}
.section-title{
max-width:760px;
margin:auto;
text-align:center;
margin-bottom:70px;
}
.section-title span{
display:inline-block;
padding:10px 18px;
border-radius:50px;
background:#dbeafe;
color:var(--primary);
font-size:13px;
letter-spacing:2px;
font-weight:700;
margin-bottom:18px;
}
.section-title h2{
margin-bottom:18px;
}
/*===============================
GRID HELPERS
================================*/
.grid-2{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:40px;
}
.grid-3{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:30px;
}
.grid-4{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:30px;
}
/*===============================
BUTTONS
================================*/
.btn-primary{
display:inline-flex;
align-items:center;
justify-content:center;
gap:10px;
padding:17px 34px;
border-radius:60px;
background:linear-gradient(135deg,#2563eb,#3b82f6);
color:#fff;
font-weight:600;
box-shadow:
0 20px 50px rgba(37,99,235,.30);
}
.btn-primary:hover{
transform:translateY(-5px);
box-shadow:
0 30px 60px rgba(37,99,235,.40);
}
.btn-secondary{
display:inline-flex;
align-items:center;
justify-content:center;
gap:10px;
padding:17px 34px;
border-radius:60px;
border:2px solid #dbeafe;
color:var(--heading);
background:#fff;
font-weight:600;
}
.btn-secondary:hover{
background:#2563eb;
color:#fff;
}
.full-width{
width:100%;
}
/*===============================
UTILITIES
================================*/
.text-center{
text-align:center;
}
.mt-30{
margin-top:30px;
}
.mb-30{
margin-bottom:30px;
}
.shadow{
box-shadow:var(--shadow);
}
.rounded{
border-radius:var(--radius);
}
/*===============================
PRELOADER
================================*/
#preloader{
position:fixed;
inset:0;
background:#fff;
z-index:999999;
display:flex;
justify-content:center;
align-items:center;
}
.loader{
width:70px;
height:70px;
position:relative;
}
.loader span{
position:absolute;
inset:0;
border:5px solid transparent;
border-top-color:#2563eb;
border-radius:50%;
animation:rotate 1s linear infinite;
}
.loader span:nth-child(2){
inset:10px;
animation-direction:reverse;
border-top-color:#38bdf8;
}
.loader span:nth-child(3){
inset:20px;
border-top-color:#0f172a;
}
@keyframes rotate{
from{
transform:rotate(0deg);
}
to{
transform:rotate(360deg);
}
}
/*===============================
HEADER
================================*/
#header{
position:fixed;
width:100%;
left:0;
top:0;
z-index:9999;
transition:.4s;
padding:18px 0;
}
#header.sticky{
background:rgba(255,255,255,.92);
backdrop-filter:blur(20px);
box-shadow:0 15px 45px rgba(0,0,0,.08);
}
/*===============================
NAVIGATION
================================*/
.navbar{
display:flex;
align-items:center;
justify-content:space-between;
}
.logo img{
height:55px;
}
.nav-menu{
display:flex;
align-items:center;
gap:34px;
}
.nav-menu li{
position:relative;
}
.nav-menu a{
color:#fff;
font-weight:500;
font-size:15px;
}
#header.sticky .nav-menu a{
color:var(--heading);
}
.nav-menu a:hover{
color:var(--secondary);
}
/*===============================
HEADER BUTTONS
================================*/
.header-buttons{
display:flex;
gap:14px;
}
.login-btn{
padding:13px 22px;
border:2px solid rgba(255,255,255,.30);
border-radius:50px;
color:#fff;
font-weight:600;
}
.client-btn{
padding:13px 28px;
border-radius:50px;
background:#fff;
color:#2563eb;
font-weight:700;
}
#header.sticky .login-btn{
color:#0f172a;
border-color:#dbeafe;
}
#header.sticky .client-btn{
background:#2563eb;
color:#fff;
}
/*===============================
MOBILE MENU
================================*/
.hamburger{
display:none;
width:45px;
cursor:pointer;
}
.hamburger span{
display:block;
height:3px;
background:#fff;
margin:8px 0;
border-radius:50px;
}
#header.sticky .hamburger span{
background:#0f172a;
}
/*===============================
DROPDOWN
================================*/
.nav-menu li ul{
position:absolute;
top:130%;
left:0;
min-width:230px;
background:#fff;
border-radius:16px;
box-shadow:0 20px 50px rgba(0,0,0,.08);
opacity:0;
visibility:hidden;
transition:.35s;
padding:15px;
}
.nav-menu li:hover ul{
opacity:1;
visibility:visible;
top:100%;
}
.nav-menu li ul li{
margin-bottom:10px;
}
.nav-menu li ul a{
color:#0f172a;
}
/*===============================
HERO
================================*/
.hero{
overflow:hidden;
min-height:100vh;
display:flex;
align-items:center;
background:
linear-gradient(135deg,#0f172a 0%,#162033 45%,#2563eb 100%);
}
.hero-bg{
position:absolute;
inset:0;
background:
radial-gradient(circle at top right,
rgba(56,189,248,.25),
transparent 40%),
radial-gradient(circle at bottom left,
rgba(37,99,235,.25),
transparent 35%);
animation:gradientMove 8s ease infinite;
}
@keyframes gradientMove{
0%{
transform:scale(1);
}
50%{
transform:scale(1.08);
}
100%{
transform:scale(1);
}
}
.hero-grid{
display:grid;
grid-template-columns:1.1fr .9fr;
align-items:center;
gap:80px;
position:relative;
}
.hero-content{
position:relative;
z-index:5;
}
.hero-badge{
display:inline-flex;
align-items:center;
gap:10px;
background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.18);
backdrop-filter:blur(18px);
color:#fff;
padding:14px 22px;
border-radius:60px;
margin-bottom:30px;
}
.hero h1{
color:#fff;
margin-bottom:25px;
}
.hero h1 span{
display:block;
color:#38bdf8;
}
.hero p{
color:#dbeafe;
font-size:18px;
max-width:620px;
margin-bottom:40px;
}
.hero-buttons{
display:flex;
gap:20px;
margin-bottom:45px;
}
.hero-image{
position:relative;
z-index:5;
}
.hero-image img{
width:100%;
animation:float 5s ease infinite;
}
@keyframes float{
0%,100%{
transform:translateY(0px);
}
50%{
transform:translateY(-18px);
}
}
/*===============================
TRUST BADGES
================================*/
.trust-list{
display:flex;
gap:25px;
flex-wrap:wrap;
}
.trust-list div{
display:flex;
align-items:center;
gap:10px;
color:#fff;
font-size:15px;
}
.trust-list i{
color:#38bdf8;
}
/*===============================
STATISTICS
================================*/
.stats{
background:#fff;
margin-top:-70px;
position:relative;
z-index:100;
}
.stats-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:30px;
}
.stat-card{
background:#fff;
border-radius:20px;
padding:40px;
text-align:center;
box-shadow:0 20px 60px rgba(0,0,0,.08);
transition:.35s;
}
.stat-card:hover{
transform:translateY(-12px);
box-shadow:0 30px 80px rgba(37,99,235,.20);
}
.stat-card i{
font-size:40px;
color:#2563eb;
margin-bottom:20px;
}
.stat-card h2{
font-size:42px;
color:#0f172a;
margin-bottom:10px;
}
.stat-card p{
color:#64748b;
font-weight:500;
}
/*===============================
END OF PART 1A
===============================*/
/*=========================================================
eHostSupport v2
style.css
PART 1B
=========================================================*/
/*===============================
SERVICES
================================*/
.services{
background:linear-gradient(180deg,#ffffff 0%,#f8fbff 100%);
position:relative;
overflow:hidden;
}
.services::before{
content:"";
position:absolute;
width:600px;
height:600px;
border-radius:50%;
background:rgba(37,99,235,.05);
top:-250px;
right:-180px;
}
.services::after{
content:"";
position:absolute;
width:500px;
height:500px;
border-radius:50%;
background:rgba(56,189,248,.06);
left:-220px;
bottom:-220px;
}
.services-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:35px;
position:relative;
z-index:2;
}
.service-card{
position:relative;
background:#fff;
padding:45px 35px;
border-radius:24px;
overflow:hidden;
transition:.45s;
border:1px solid rgba(37,99,235,.08);
box-shadow:0 15px 45px rgba(15,23,42,.06);
}
.service-card::before{
content:"";
position:absolute;
width:120px;
height:120px;
border-radius:50%;
background:rgba(37,99,235,.08);
top:-40px;
right:-40px;
transition:.5s;
}
.service-card::after{
content:"";
position:absolute;
left:0;
bottom:0;
width:100%;
height:5px;
background:linear-gradient(90deg,#2563eb,#38bdf8);
transform:scaleX(0);
transform-origin:left;
transition:.45s;
}
.service-card:hover{
transform:translateY(-15px);
box-shadow:0 30px 80px rgba(37,99,235,.20);
}
.service-card:hover::after{
transform:scaleX(1);
}
.service-card:hover::before{
transform:scale(1.5);
}
.service-icon{
width:82px;
height:82px;
border-radius:22px;
display:flex;
align-items:center;
justify-content:center;
background:linear-gradient(135deg,#2563eb,#38bdf8);
color:#fff;
font-size:34px;
margin-bottom:28px;
box-shadow:0 18px 45px rgba(37,99,235,.30);
}
.service-card h3{
margin-bottom:18px;
}
.service-card p{
margin-bottom:28px;
color:#64748b;
}
.service-card ul{
display:flex;
flex-direction:column;
gap:14px;
}
.service-card li{
display:flex;
align-items:center;
gap:12px;
color:#475569;
font-size:15px;
}
.service-card li i{
color:#10b981;
font-size:15px;
}
/*===============================
WHY CHOOSE US
================================*/
.why-us{
background:#0f172a;
position:relative;
overflow:hidden;
}
.why-us::before{
content:"";
position:absolute;
width:700px;
height:700px;
border-radius:50%;
background:rgba(59,130,246,.08);
left:-250px;
top:-280px;
}
.why-us .section-title span{
background:rgba(37,99,235,.18);
color:#38bdf8;
}
.why-us .section-title h2{
color:#fff;
}
.why-us .section-title p{
color:#cbd5e1;
}
.why-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:30px;
position:relative;
z-index:2;
}
.why-card{
background:rgba(255,255,255,.05);
backdrop-filter:blur(18px);
border:1px solid rgba(255,255,255,.08);
border-radius:22px;
padding:35px;
transition:.45s;
}
.why-card:hover{
transform:translateY(-12px);
background:rgba(255,255,255,.08);
box-shadow:0 30px 80px rgba(0,0,0,.30);
}
.why-icon{
width:75px;
height:75px;
display:flex;
align-items:center;
justify-content:center;
border-radius:20px;
background:linear-gradient(135deg,#2563eb,#38bdf8);
margin-bottom:24px;
}
.why-icon i{
font-size:32px;
color:#fff;
}
.why-card h3{
color:#fff;
margin-bottom:18px;
}
.why-card p{
color:#cbd5e1;
font-size:15px;
}
/*===============================
TECHNOLOGIES
================================*/
.technologies{
background:#ffffff;
overflow:hidden;
}
.technology-grid{
display:grid;
grid-template-columns:repeat(6,1fr);
gap:28px;
}
.tech-item{
background:#fff;
border-radius:22px;
padding:28px;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
text-align:center;
transition:.45s;
border:1px solid #eef2ff;
box-shadow:0 15px 40px rgba(15,23,42,.06);
}
.tech-item:hover{
transform:translateY(-12px);
box-shadow:0 30px 80px rgba(37,99,235,.18);
}
.tech-item img{
width:72px;
height:72px;
object-fit:contain;
margin-bottom:18px;
transition:.45s;
}
.tech-item:hover img{
transform:scale(1.08);
}
.tech-item span{
font-size:15px;
font-weight:600;
color:#334155;
}
/*===============================
OFFICIAL SVG LOGOS
================================*/
.tech-item img[src*="cpanel"]{
width:95px;
}
.tech-item img[src*="plesk"]{
width:90px;
}
.tech-item img[src*="wordpress"]{
width:68px;
}
.tech-item img[src*="whmcs"]{
width:90px;
}
.tech-item img[src*="cloudlinux"]{
width:100px;
}
.tech-item img[src*="litespeed"]{
width:105px;
}
.tech-item img[src*="ubuntu"]{
width:68px;
}
.tech-item img[src*="almalinux"]{
width:105px;
}
.tech-item img[src*="rocky"]{
width:105px;
}
.tech-item img[src*="debian"]{
width:68px;
}
.tech-item img[src*="mysql"]{
width:80px;
}
.tech-item img[src*="mariadb"]{
width:90px;
}
.tech-item img[src*="apache"]{
width:80px;
}
.tech-item img[src*="nginx"]{
width:90px;
}
.tech-item img[src*="jetbackup"]{
width:95px;
}
.tech-item img[src*="imunify"]{
width:95px;
}
/*===============================
TECHNOLOGY LOGO EFFECTS
================================*/
.tech-item:hover img{
filter:
drop-shadow(0 10px 18px rgba(37,99,235,.22));
}
/*===============================
DECORATIVE SHAPES
================================*/
.tech-shape-1{
position:absolute;
width:260px;
height:260px;
border-radius:50%;
background:rgba(56,189,248,.08);
top:80px;
left:-120px;
filter:blur(5px);
}
.tech-shape-2{
position:absolute;
width:180px;
height:180px;
border-radius:50%;
background:rgba(37,99,235,.08);
bottom:60px;
right:-60px;
}
.service-glow{
position:absolute;
width:500px;
height:500px;
border-radius:50%;
background:radial-gradient(circle,
rgba(37,99,235,.10),
transparent 70%);
top:-200px;
right:-150px;
pointer-events:none;
}
.why-glow{
position:absolute;
width:450px;
height:450px;
border-radius:50%;
background:radial-gradient(circle,
rgba(56,189,248,.08),
transparent 70%);
bottom:-200px;
left:-120px;
}
/*===============================
END OF PART 1B
================================*/
/*=========================================================
eHostSupport v2
style.css
PART 2
=========================================================*/
/*==================================
TESTIMONIALS
==================================*/
.testimonials{
background:linear-gradient(180deg,#f8fbff 0%,#ffffff 100%);
position:relative;
overflow:hidden;
}
.testimonials::before{
content:"";
position:absolute;
width:700px;
height:700px;
border-radius:50%;
background:rgba(37,99,235,.05);
right:-250px;
top:-250px;
}
.testimonial-slider{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:35px;
position:relative;
z-index:2;
}
.testimonial-card{
position:relative;
background:#fff;
padding:40px;
border-radius:22px;
border:1px solid rgba(37,99,235,.08);
box-shadow:0 20px 60px rgba(15,23,42,.07);
transition:.45s;
}
.testimonial-card:hover{
transform:translateY(-12px);
box-shadow:0 35px 80px rgba(37,99,235,.18);
}
.quote-icon{
width:65px;
height:65px;
border-radius:18px;
display:flex;
align-items:center;
justify-content:center;
background:linear-gradient(135deg,#2563eb,#38bdf8);
color:#fff;
font-size:24px;
margin-bottom:25px;
}
.testimonial-card p{
color:#64748b;
margin-bottom:30px;
min-height:145px;
}
.stars{
display:flex;
gap:6px;
margin-bottom:28px;
}
.stars i{
color:#fbbf24;
font-size:17px;
}
.client-info{
display:flex;
align-items:center;
gap:18px;
}
.client-info img{
width:65px;
height:65px;
border-radius:50%;
object-fit:cover;
border:4px solid #dbeafe;
}
.client-info h4{
color:#0f172a;
margin-bottom:4px;
}
.client-info span{
color:#64748b;
font-size:14px;
}
/*==================================
FAQ
==================================*/
.faq{
background:#fff;
}
.faq-container{
max-width:950px;
margin:auto;
}
.faq-item{
margin-bottom:18px;
border-radius:18px;
overflow:hidden;
border:1px solid rgba(37,99,235,.08);
box-shadow:0 12px 35px rgba(15,23,42,.05);
transition:.35s;
}
.faq-item.active{
border-color:#2563eb;
}
.faq-question{
width:100%;
display:flex;
align-items:center;
justify-content:space-between;
padding:24px 30px;
background:#fff;
border:none;
cursor:pointer;
font-size:17px;
font-weight:600;
color:#0f172a;
}
.faq-question i{
width:42px;
height:42px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
background:#eff6ff;
color:#2563eb;
transition:.35s;
}
.faq-item.active .faq-question i{
transform:rotate(45deg);
}
.faq-answer{
max-height:0;
overflow:hidden;
transition:max-height .4s ease;
background:#fbfdff;
}
.faq-item.active .faq-answer{
max-height:300px;
}
.faq-answer p{
padding:0 30px 28px;
color:#64748b;
}
/*==================================
CONTACT SECTION
==================================*/
.contact-section{
background:#f8fbff;
position:relative;
}
.contact-wrapper{
display:grid;
grid-template-columns:.9fr 1.1fr;
gap:45px;
align-items:start;
}
.contact-info{
display:flex;
flex-direction:column;
gap:25px;
}
.info-card{
display:flex;
gap:20px;
align-items:flex-start;
background:#fff;
padding:30px;
border-radius:20px;
border:1px solid rgba(37,99,235,.08);
box-shadow:0 18px 45px rgba(15,23,42,.06);
}
.info-icon{
width:70px;
height:70px;
display:flex;
align-items:center;
justify-content:center;
border-radius:18px;
background:linear-gradient(135deg,#2563eb,#38bdf8);
color:#fff;
font-size:28px;
flex-shrink:0;
}
.info-card h3{
margin-bottom:10px;
}
.contact-form{
background:#fff;
border-radius:28px;
padding:45px;
border:1px solid rgba(37,99,235,.08);
box-shadow:0 25px 60px rgba(15,23,42,.08);
}
.form-grid{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:22px;
}
.form-group{
margin-bottom:22px;
}
.form-group label{
display:block;
margin-bottom:10px;
font-size:15px;
color:#334155;
font-weight:600;
}
.form-group input,
.form-group select,
.form-group textarea{
width:100%;
padding:16px 18px;
border:1px solid #dbeafe;
border-radius:14px;
background:#fff;
color:#334155;
transition:.3s;
}
.form-group textarea{
resize:vertical;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus{
border-color:#2563eb;
box-shadow:0 0 0 4px rgba(37,99,235,.12);
}
.checkbox{
display:flex;
align-items:center;
gap:12px;
margin:15px 0 30px;
color:#64748b;
font-size:14px;
}
.checkbox input{
width:18px;
height:18px;
}
/*==================================
CALL TO ACTION
==================================*/
.cta{
padding:70px 0;
background:#fff;
}
.cta-box{
border-radius:30px;
padding:70px;
text-align:center;
background:linear-gradient(135deg,#0f172a,#2563eb);
color:#fff;
position:relative;
overflow:hidden;
}
.cta-box::before{
content:"";
position:absolute;
width:350px;
height:350px;
background:rgba(255,255,255,.06);
border-radius:50%;
right:-120px;
top:-120px;
}
.cta-box h2{
color:#fff;
margin-bottom:18px;
}
.cta-box p{
color:#dbeafe;
max-width:700px;
margin:auto auto 35px;
}
.cta-buttons{
display:flex;
justify-content:center;
gap:20px;
}
/*==================================
FOOTER
==================================*/
.footer{
background:#0b1220;
color:#fff;
padding:90px 0 0;
}
.footer-grid{
display:grid;
grid-template-columns:2fr 1fr 1fr 1fr;
gap:50px;
}
.footer-logo{
width:220px;
margin-bottom:25px;
}
.footer-column p{
color:#94a3b8;
margin-bottom:30px;
}
.footer-column h3{
color:#fff;
margin-bottom:25px;
font-size:22px;
}
.footer-column ul{
display:flex;
flex-direction:column;
gap:14px;
}
.footer-column ul li{
color:#94a3b8;
}
.footer-column a{
color:#94a3b8;
}
.footer-column a:hover{
color:#38bdf8;
padding-left:6px;
}
.social-links{
display:flex;
gap:14px;
}
.social-links a{
width:46px;
height:46px;
display:flex;
align-items:center;
justify-content:center;
border-radius:50%;
background:#162033;
color:#fff;
}
.social-links a:hover{
background:#2563eb;
transform:translateY(-5px);
}
.footer-bottom{
margin-top:60px;
padding:25px 0;
text-align:center;
border-top:1px solid rgba(255,255,255,.08);
color:#94a3b8;
}
/*==================================
END OF PART 2
==================================*/
/*=========================================================
eHostSupport v2
style.css
PART 3
=========================================================*/
/*==================================
SCROLL ANIMATIONS
==================================*/
.reveal{
opacity:0;
transform:translateY(60px);
transition:all .8s cubic-bezier(.22,.61,.36,1);
}
.reveal.active{
opacity:1;
transform:translateY(0);
}
.reveal-left{
opacity:0;
transform:translateX(-70px);
transition:all .8s cubic-bezier(.22,.61,.36,1);
}
.reveal-left.active{
opacity:1;
transform:translateX(0);
}
.reveal-right{
opacity:0;
transform:translateX(70px);
transition:all .8s cubic-bezier(.22,.61,.36,1);
}
.reveal-right.active{
opacity:1;
transform:translateX(0);
}
.reveal-scale{
opacity:0;
transform:scale(.9);
transition:all .8s ease;
}
.reveal-scale.active{
opacity:1;
transform:scale(1);
}
/*==================================
HOVER EFFECTS
==================================*/
.hover-lift{
transition:.35s;
}
.hover-lift:hover{
transform:translateY(-12px);
}
.hover-glow:hover{
box-shadow:0 25px 80px rgba(37,99,235,.25);
}
.hover-zoom{
overflow:hidden;
}
.hover-zoom img{
transition:.45s;
}
.hover-zoom:hover img{
transform:scale(1.08);
}
/*==================================
GLASS COMPONENTS
==================================*/
.glass{
background:rgba(255,255,255,.08);
backdrop-filter:blur(20px);
border:1px solid rgba(255,255,255,.12);
}
.glass-dark{
background:rgba(15,23,42,.65);
backdrop-filter:blur(20px);
border:1px solid rgba(255,255,255,.08);
}
/*==================================
BACKGROUND BLOBS
==================================*/
.blob{
position:absolute;
border-radius:50%;
filter:blur(30px);
pointer-events:none;
}
.blob-primary{
width:450px;
height:450px;
background:rgba(37,99,235,.12);
}
.blob-secondary{
width:350px;
height:350px;
background:rgba(56,189,248,.10);
}
.blob-success{
width:260px;
height:260px;
background:rgba(16,185,129,.08);
}
/*==================================
ICON BOXES
==================================*/
.icon-circle{
width:72px;
height:72px;
display:flex;
align-items:center;
justify-content:center;
border-radius:50%;
background:linear-gradient(135deg,#2563eb,#38bdf8);
color:#fff;
font-size:30px;
box-shadow:0 18px 40px rgba(37,99,235,.25);
}
.icon-square{
width:70px;
height:70px;
border-radius:20px;
display:flex;
align-items:center;
justify-content:center;
background:#eff6ff;
color:#2563eb;
font-size:30px;
}
/*==================================
CARDS
==================================*/
.card{
background:#fff;
border-radius:24px;
padding:35px;
border:1px solid rgba(37,99,235,.08);
box-shadow:0 15px 50px rgba(15,23,42,.06);
transition:.35s;
}
.card:hover{
transform:translateY(-10px);
box-shadow:0 30px 80px rgba(37,99,235,.16);
}
/*==================================
BADGES
==================================*/
.badge{
display:inline-flex;
align-items:center;
gap:8px;
padding:10px 18px;
border-radius:999px;
background:#eff6ff;
color:#2563eb;
font-size:13px;
font-weight:700;
}
.badge-success{
background:#ecfdf5;
color:#10b981;
}
.badge-warning{
background:#fffbeb;
color:#f59e0b;
}
.badge-danger{
background:#fef2f2;
color:#ef4444;
}
/*==================================
TABLES
==================================*/
.table-responsive{
width:100%;
overflow-x:auto;
}
table{
width:100%;
border-collapse:collapse;
}
table th{
background:#2563eb;
color:#fff;
padding:18px;
text-align:left;
}
table td{
padding:18px;
border-bottom:1px solid #e5e7eb;
}
table tr:hover{
background:#f8fbff;
}
/*==================================
PAGINATION
==================================*/
.pagination{
display:flex;
justify-content:center;
gap:10px;
}
.pagination a{
width:48px;
height:48px;
display:flex;
align-items:center;
justify-content:center;
border-radius:12px;
background:#fff;
border:1px solid #dbeafe;
color:#334155;
}
.pagination a.active,
.pagination a:hover{
background:#2563eb;
color:#fff;
}
/*==================================
ALERTS
==================================*/
.alert{
padding:18px 22px;
border-radius:14px;
margin-bottom:20px;
}
.alert-success{
background:#ecfdf5;
color:#065f46;
}
.alert-warning{
background:#fffbeb;
color:#92400e;
}
.alert-danger{
background:#fef2f2;
color:#991b1b;
}
/*==================================
LOADING BUTTON
==================================*/
.btn-loading{
position:relative;
pointer-events:none;
opacity:.8;
}
.btn-loading::after{
content:"";
position:absolute;
width:18px;
height:18px;
border:2px solid rgba(255,255,255,.3);
border-top-color:#fff;
border-radius:50%;
animation:spin .8s linear infinite;
right:22px;
top:50%;
margin-top:-9px;
}
@keyframes spin{
to{
transform:rotate(360deg);
}
}
/*==================================
CUSTOM SCROLLBAR
==================================*/
::-webkit-scrollbar{
width:10px;
}
::-webkit-scrollbar-track{
background:#eef2ff;
}
::-webkit-scrollbar-thumb{
background:#2563eb;
border-radius:999px;
}
::-webkit-scrollbar-thumb:hover{
background:#1d4ed8;
}
/*==================================
BACK TO TOP
==================================*/
.back-to-top{
position:fixed;
right:25px;
bottom:25px;
width:55px;
height:55px;
display:flex;
align-items:center;
justify-content:center;
border-radius:50%;
background:linear-gradient(135deg,#2563eb,#38bdf8);
color:#fff;
font-size:20px;
box-shadow:0 20px 40px rgba(37,99,235,.25);
opacity:0;
visibility:hidden;
transition:.35s;
z-index:999;
}
.back-to-top.show{
opacity:1;
visibility:visible;
}
.back-to-top:hover{
transform:translateY(-6px);
}
/*==================================
IMAGE EFFECTS
==================================*/
.img-shadow{
box-shadow:0 30px 80px rgba(15,23,42,.15);
border-radius:24px;
}
.img-rounded{
border-radius:24px;
}
.img-border{
border:8px solid #fff;
}
/*==================================
END OF PART 3
==================================*/
/*=========================================================
eHostSupport v2
style.css
PART 4
=========================================================*/
/*==================================
LARGE DESKTOP
==================================*/
@media (max-width:1400px){
.container{
width:min(100% - 50px,1200px);
}
h1{
font-size:58px;
}
h2{
font-size:42px;
}
}
/*==================================
DESKTOP
==================================*/
@media (max-width:1200px){
.hero-grid{
gap:50px;
}
.services-grid{
grid-template-columns:repeat(2,1fr);
}
.why-grid{
grid-template-columns:repeat(2,1fr);
}
.technology-grid{
grid-template-columns:repeat(4,1fr);
}
.testimonial-slider{
grid-template-columns:repeat(2,1fr);
}
.stats-grid{
grid-template-columns:repeat(2,1fr);
}
.footer-grid{
grid-template-columns:repeat(2,1fr);
}
}
/*==================================
TABLET
==================================*/
@media (max-width:991px){
section{
padding:90px 0;
}
h1{
font-size:46px;
}
h2{
font-size:36px;
}
.grid-2,
.hero-grid,
.contact-wrapper{
grid-template-columns:1fr;
}
.hero{
padding-top:140px;
text-align:center;
}
.hero-content{
order:2;
}
.hero-image{
order:1;
max-width:650px;
margin:auto;
}
.hero-buttons{
justify-content:center;
flex-wrap:wrap;
}
.trust-list{
justify-content:center;
}
.header-buttons{
display:none;
}
.hamburger{
display:block;
z-index:10001;
}
.nav-menu{
position:fixed;
top:0;
right:-100%;
width:320px;
height:100vh;
background:#0f172a;
flex-direction:column;
justify-content:flex-start;
align-items:flex-start;
padding:120px 35px;
gap:25px;
transition:.4s;
overflow-y:auto;
box-shadow:-20px 0 50px rgba(0,0,0,.25);
}
.nav-menu.active{
right:0;
}
.nav-menu a{
color:#fff !important;
font-size:16px;
}
.nav-menu li{
width:100%;
}
.nav-menu li ul{
position:relative;
opacity:1;
visibility:visible;
top:auto;
left:auto;
width:100%;
background:#162033;
margin-top:12px;
display:none;
box-shadow:none;
}
.nav-menu li:hover ul{
top:auto;
}
.nav-menu li.open ul{
display:block;
}
.nav-overlay{
position:fixed;
inset:0;
background:rgba(0,0,0,.55);
opacity:0;
visibility:hidden;
transition:.35s;
z-index:9998;
}
.nav-overlay.active{
opacity:1;
visibility:visible;
}
}
/*==================================
MOBILE
==================================*/
@media (max-width:768px){
.services-grid{
grid-template-columns:1fr;
}
.why-grid{
grid-template-columns:1fr;
}
.technology-grid{
grid-template-columns:repeat(2,1fr);
}
.testimonial-slider{
grid-template-columns:1fr;
}
.stats-grid{
grid-template-columns:1fr;
}
.footer-grid{
grid-template-columns:1fr;
gap:40px;
}
.form-grid{
grid-template-columns:1fr;
}
.cta-box{
padding:50px 30px;
}
.cta-buttons{
flex-direction:column;
align-items:center;
}
.contact-form{
padding:30px;
}
.section-title{
margin-bottom:55px;
}
}
/*==================================
SMALL MOBILE
==================================*/
@media (max-width:576px){
.container{
width:min(100% - 30px,100%);
}
section{
padding:75px 0;
}
h1{
font-size:38px;
line-height:1.2;
}
h2{
font-size:30px;
}
h3{
font-size:22px;
}
.hero-badge{
font-size:13px;
padding:12px 18px;
}
.btn-primary,
.btn-secondary{
width:100%;
}
.hero-buttons{
flex-direction:column;
}
.service-card{
padding:35px 28px;
}
.why-card{
padding:30px;
}
.testimonial-card{
padding:30px;
}
.info-card{
padding:25px;
}
.contact-form{
padding:25px;
}
.faq-question{
padding:20px;
font-size:15px;
}
.faq-answer p{
padding:0 20px 20px;
}
.cta-box{
border-radius:24px;
}
.footer{
padding-top:70px;
}
}
/*==================================
ACCESSIBILITY
==================================*/
:focus-visible{
outline:3px solid rgba(37,99,235,.45);
outline-offset:3px;
}
button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible{
outline:3px solid rgba(37,99,235,.45);
}
@media (prefers-reduced-motion:reduce){
*,
*::before,
*::after{
animation:none !important;
transition:none !important;
scroll-behavior:auto !important;
}
}
/*==================================
DARK MODE SUPPORT
==================================*/
body.dark-mode{
background:#0f172a;
color:#cbd5e1;
}
body.dark-mode .card,
body.dark-mode .service-card,
body.dark-mode .testimonial-card,
body.dark-mode .contact-form,
body.dark-mode .info-card,
body.dark-mode .tech-item,
body.dark-mode .stat-card{
background:#162033;
border-color:rgba(255,255,255,.06);
}
body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode h4{
color:#ffffff;
}
body.dark-mode p{
color:#cbd5e1;
}
/*==================================
PRINT STYLES
==================================*/
@media print{
#header,
.back-to-top,
.cta,
.hero-buttons,
.social-links{
display:none !important;
}
body{
background:#fff;
color:#000;
}
section{
padding:20px 0;
}
a{
color:#000;
text-decoration:none;
}
}
/*==================================
UTILITIES
==================================*/
.d-none{
display:none !important;
}
.d-flex{
display:flex !important;
}
.d-grid{
display:grid !important;
}
.align-center{
align-items:center !important;
}
.justify-center{
justify-content:center !important;
}
.justify-between{
justify-content:space-between !important;
}
.w-100{
width:100% !important;
}
.text-white{
color:#fff !important;
}
.text-primary{
color:#2563eb !important;
}
.bg-primary{
background:#2563eb !important;
}
.bg-dark{
background:#0f172a !important;
}
.round-10{
border-radius:10px !important;
}
.round-20{
border-radius:20px !important;
}
.shadow-lg{
box-shadow:0 30px 80px rgba(15,23,42,.15) !important;
}
/*==================================
FINAL POLISH
==================================*/
.service-card,
.why-card,
.tech-item,
.testimonial-card,
.stat-card,
.info-card,
.contact-form{
will-change:transform;
}
img{
image-rendering:auto;
}
.hero,
.services,
.why-us,
.technologies,
.testimonials,
.faq,
.contact-section,
.footer{
position:relative;
z-index:1;
}
/*==================================
END OF PART 4
STYLE.CSS COMPLETE
==================================*/
/*=========================================================
eHostSupport v2
style.css
PART 5
PREMIUM EFFECTS
=========================================================*/
/*==================================
PREMIUM GRADIENTS
==================================*/
.gradient-primary{
background:linear-gradient(135deg,#2563eb 0%,#38bdf8 100%);
}
.gradient-dark{
background:linear-gradient(135deg,#0f172a 0%,#1e293b 100%);
}
.gradient-light{
background:linear-gradient(180deg,#ffffff 0%,#f8fbff 100%);
}
/*==================================
ANIMATED BORDER
==================================*/
.border-gradient{
position:relative;
overflow:hidden;
}
.border-gradient::before{
content:"";
position:absolute;
inset:-2px;
background:linear-gradient(
90deg,
#2563eb,
#38bdf8,
#2563eb,
#38bdf8
);
background-size:300%;
animation:borderFlow 6s linear infinite;
z-index:-2;
}
.border-gradient::after{
content:"";
position:absolute;
inset:2px;
background:#fff;
border-radius:inherit;
z-index:-1;
}
@keyframes borderFlow{
0%{
background-position:0%;
}
100%{
background-position:300%;
}
}
/*==================================
GLOW EFFECTS
==================================*/
.glow-primary{
box-shadow:
0 0 20px rgba(37,99,235,.20),
0 0 60px rgba(37,99,235,.10);
}
.glow-blue{
box-shadow:
0 0 25px rgba(56,189,248,.25);
}
.glow-hover{
transition:.35s;
}
.glow-hover:hover{
box-shadow:
0 30px 80px rgba(37,99,235,.28);
}
/*==================================
FLOATING ANIMATION
==================================*/
.float{
animation:floating 4s ease-in-out infinite;
}
.float-delay{
animation:floating 5s ease-in-out infinite;
}
@keyframes floating{
0%{
transform:translateY(0);
}
50%{
transform:translateY(-18px);
}
100%{
transform:translateY(0);
}
}
/*==================================
PULSE
==================================*/
.pulse{
animation:pulse 2.5s infinite;
}
@keyframes pulse{
0%{
box-shadow:0 0 0 0 rgba(37,99,235,.5);
}
70%{
box-shadow:0 0 0 18px rgba(37,99,235,0);
}
100%{
box-shadow:0 0 0 0 rgba(37,99,235,0);
}
}
/*==================================
FADE ANIMATIONS
==================================*/
.fade-up{
animation:fadeUp .8s ease forwards;
}
@keyframes fadeUp{
from{
opacity:0;
transform:translateY(50px);
}
to{
opacity:1;
transform:none;
}
}
.fade-left{
animation:fadeLeft .8s ease forwards;
}
@keyframes fadeLeft{
from{
opacity:0;
transform:translateX(-60px);
}
to{
opacity:1;
transform:none;
}
}
.fade-right{
animation:fadeRight .8s ease forwards;
}
@keyframes fadeRight{
from{
opacity:0;
transform:translateX(60px);
}
to{
opacity:1;
transform:none;
}
}
/*==================================
GLASS NAVBAR
==================================*/
.glass-navbar{
background:rgba(255,255,255,.08);
backdrop-filter:blur(25px);
border:1px solid rgba(255,255,255,.15);
}
/*==================================
PREMIUM SHADOWS
==================================*/
.shadow-blue{
box-shadow:
0 15px 45px rgba(37,99,235,.18);
}
.shadow-dark{
box-shadow:
0 20px 60px rgba(15,23,42,.15);
}
.shadow-soft{
box-shadow:
0 8px 25px rgba(15,23,42,.08);
}
/*==================================
DIVIDERS
==================================*/
.wave-divider{
position:absolute;
bottom:0;
left:0;
width:100%;
line-height:0;
}
.wave-divider svg{
display:block;
width:100%;
height:120px;
}
/*==================================
TECH LOGO FILTER
==================================*/
.tech-item:hover img{
transform:scale(1.12) rotate(2deg);
transition:.35s;
}
/*==================================
STATUS BADGES
==================================*/
.status-online{
color:#10b981;
font-weight:600;
}
.status-offline{
color:#ef4444;
}
.status-maintenance{
color:#f59e0b;
}
/*==================================
CODE BLOCK
==================================*/
.code-box{
background:#0f172a;
color:#38bdf8;
padding:25px;
border-radius:16px;
overflow:auto;
font-family:monospace;
}
/*==================================
SELECTION
==================================*/
::selection{
background:#2563eb;
color:#fff;
}
/*==================================
PLACEHOLDER
==================================*/
::placeholder{
color:#94a3b8;
}
/*==================================
LAZY IMAGE
==================================*/
.lazy{
opacity:0;
transition:opacity .4s;
}
.lazy.loaded{
opacity:1;
}
/*==================================
IMAGE RADIUS
==================================*/
.radius-xl{
border-radius:30px;
}
.radius-full{
border-radius:999px;
}
/*==================================
PREMIUM TRANSITIONS
==================================*/
.transition{
transition:all .35s ease;
}
.transition-slow{
transition:all .6s ease;
}
.transition-fast{
transition:all .2s ease;
/* Cloudflare Turnstile */ .cf-turnstile{ margin:20px 0;}
}
/* WhatsApp Link */
.whatsapp-link{
color: inherit;
text-decoration: none;
transition: color .3s ease;
}
.whatsapp-link:hover{
color: #25D366;
text-decoration: underline;
}
+91 7020148837
Start WhatsApp Chat
/* ===============================
eHostSupport WhatsApp Widget
================================*/
#ehs-floating{
position:fixed;
right:25px;
bottom:25px;
width:65px;
height:65px;
background:#25D366;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
cursor:pointer;
font-size:34px;
color:#fff;
box-shadow:0 15px 35px rgba(0,0,0,.25);
z-index:999999;
transition:.3s;
}
#ehs-floating:hover{
transform:scale(1.08);
}
.ehs-widget{
position:fixed;
right:25px;
bottom:105px;
width:340px;
background:#fff;
border-radius:18px;
overflow:hidden;
box-shadow:0 20px 60px rgba(0,0,0,.18);
display:none;
z-index:999998;
animation:slideUp .35s ease;
}
@keyframes slideUp{
from{
opacity:0;
transform:translateY(40px);
}
to{
opacity:1;
transform:translateY(0);
}
}
.ehs-header{
padding:18px;
background:#0f4fa8;
display:flex;
justify-content:space-between;
align-items:center;
}
.ehs-header img{
height:42px;
}
.ehs-close{
border:none;
background:none;
font-size:30px;
color:#fff;
cursor:pointer;
}
.ehs-body{
padding:20px;
}
.ehs-body h3{
margin-bottom:10px;
font-size:22px;
}
.ehs-body p{
line-height:1.6;
color:#555;
}
.ehs-chat-btn{
display:flex;
justify-content:center;
align-items:center;
gap:10px;
padding:18px;
background:#25D366;
color:#fff;
font-weight:700;
font-size:18px;
text-decoration:none;
transition:.3s;
}
.ehs-chat-btn:hover{
background:#1EBE5D;
color:#fff;
}
.ehs-chat-btn i{
font-size:22px;
}
@media(max-width:768px){
.ehs-widget{
width:92%;
right:4%;
bottom:95px;
}
}
/*==================================
END PART 5
==================================*/