html,
body{
overflow-x: hidden;
}
*{
margin:0;
padding:0;
box-sizing:border-box;
}
html{
scroll-behavior:smooth;
}
body{
font-family:'Poppins',sans-serif;
background:#181A20;
color:#FFFFFF;
overflow-x:hidden;
line-height:1.7;
font-size:16px;
font-weight:400;
}
/*=====================================
BINANCE COLOR PALETTE
======================================*/
:root{
/* Primary Brand */
--primary:#F0B90B;
--primary-dark:#DFA300;
--primary-light:#FCD535;
/* Backgrounds */
--secondary:#181A20;
--section:#1E2329;
--card:#242A33;
--card-hover:#2B3139;
/* Borders */
--border:#2B3139;
/* Text */
--white:#FFFFFF;
--black:#000000;
--text:#FFFFFF;
--text-light:#B7BDC6;
--gray:#848E9C;
/* Effects */
--shadow:0 12px 30px rgba(0,0,0,.35);
--transition:.35s ease;
}
/*=====================================
COMMON STYLES
======================================*/
.section{
padding:100px 0;
position:relative;
background:var(--secondary);
}
img{
max-width:100%;
height:auto;
display:block;
}
a{
text-decoration:none;
color:inherit;
transition:var(--transition);
}
a:hover{
color:var(--primary);
}
ul{
list-style:none;
margin:0;
padding:0;
}
/*=====================================
NAVBAR - BINANCE STYLE
======================================*/
.navbar{
background:var(--secondary) !important;
padding:18px 0;
border-bottom:1px solid var(--border);
transition:var(--transition);
z-index:999;
}
.navbar-brand img{
height:60px;
width:auto;
transition:var(--transition);
}
.navbar-brand img:hover{
transform:scale(1.03);
}
.nav-link{
font-weight:500;
font-size:15px;
margin-left:20px;
color:var(--white) !important;
position:relative;
transition:var(--transition);
}
.nav-link:hover{
color:var(--primary) !important;
}
/* Active Menu */
.nav-link.active{
color:var(--primary) !important;
font-weight:600;
}
/* Underline Animation */
.nav-link::after{
content:"";
position:absolute;
left:0;
bottom:-6px;
width:0;
height:2px;
background:var(--primary);
transition:var(--transition);
}
.nav-link:hover::after,
.nav-link.active::after{
width:100%;
}
/* Mobile Toggle */
.navbar-toggler{
border:1px solid var(--border);
background:var(--section);
}
.navbar-toggler:focus{
box-shadow:none;
}
/*=====================================
BUTTONS - BINANCE STYLE
======================================*/
.btn-primary{
background:var(--primary);
border:2px solid var(--primary);
color:#181A20;
padding:12px 28px;
border-radius:8px;
font-weight:600;
font-size:15px;
transition:var(--transition);
box-shadow:0 8px 20px rgba(240,185,11,.25);
}
.btn-primary:hover{
background:var(--primary-light);
border-color:var(--primary-light);
color:#181A20;
transform:translateY(-3px);
box-shadow:0 12px 25px rgba(240,185,11,.35);
}
.btn-primary:focus{
box-shadow:0 0 0 0.25rem rgba(240,185,11,.30);
}
.btn-primary:active{
transform:scale(.98);
}
/*=====================================
TRUSTED BOX - BINANCE STYLE
======================================*/
.trusted-box{
display:inline-flex;
align-items:center;
gap:14px;
padding:14px 24px;
background:var(--card);
border:1px solid var(--border);
border-radius:14px;
box-shadow:var(--shadow);
transition:var(--transition);
}
.trusted-box:hover{
transform:translateY(-6px);
border-color:var(--primary);
box-shadow:0 18px 40px rgba(0,0,0,.45);
}
.trusted-icon{
width:45px;
height:45px;
background:var(--primary);
color:#181A20;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
font-size:18px;
font-weight:700;
flex-shrink:0;
}
.trusted-content small{
display:block;
color:var(--text-light);
font-size:12px;
letter-spacing:1px;
text-transform:uppercase;
margin-bottom:4px;
}
.trusted-content h5{
margin:0;
font-size:17px;
font-weight:600;
color:var(--white);
}
/*=====================================
HERO SECTION - BINANCE STYLE
======================================*/
.hero-section{
padding:10px 0;
background:linear-gradient(180deg,#181A20 0%,#1E2329 100%);
overflow:hidden;
position:relative;
}
/* Soft Glow */
.hero-section::before{
content:"";
position:absolute;
width:450px;
height:450px;
background:rgba(240,185,11,.08);
border-radius:20%;
top:-100px;
right:-100px;
filter:blur(100px);
}
.hero-section h1{
font-size:60px;
font-weight:700;
line-height:1.2;
color:var(--white);
}
.hero-section h1 span{
color: #F0B90B;
display: block;
}
.hero-section p{
font-size:18px;
line-height:1.9;
color:var(--text-light);
margin:10px 0;
}
.hero-section .btn{
padding:14px 32px;
border-radius:8px;
margin-top:10px;
}
.hero-section .text-primary{
color:var(--primary)!important;
}
/*=========================
Hero Image
==========================*/
.hero-image{
width:115%;
height: 560px;
overflow:hidden;
border-radius:18px;
border:1px solid var(--border);
box-shadow:0 30px 60px rgba(0,0,0,.45);
transition:var(--transition);
}
.hero-image:hover{
transform:translateY(-8px);
box-shadow:0 40px 70px rgba(240,185,11,.12);
}
.hero-image img{
width:100%;
height:100%;
object-fit:cover;
object-position:center;
display:block;
transition:0.6s;
}
.hero-image:hover img{
transform:scale(1.05);
}
/*=====================================
ABOUT SECTION - BINANCE STYLE
======================================*/
.homeAbt01-sec{
padding:10px 0;
background:var(--secondary);
}
.homeAbt01-sec h2{
font-size:60px;
font-weight:700;
color:var(--white);
line-height:1.3;
margin-top:-20px !important;
}
.homeAbt01-sec p{
font-size:18px;
line-height:1.9;
color:var(--text-light);
margin-bottom:10px;
margin-top:-10px;
}
.homeAbt01-sec{
background:#111418;
padding-top:15px !important;
padding-bottom:15px !important;
}
/*=========================
About Image
==========================*/
.homeAbt01-img{
overflow:visible;
border-radius:0;
background:none;
box-shadow:none;
}
.homeAbt01-img img{
width:100%;
display:block;
border-radius:0;
box-shadow:none;
}
.homeAbt01-img:hover{
transform:translateY(-8px);
border-color:var(--primary);
}
.homeAbt01-img img{
width:100%;
border-radius:20px;
transition:.6s;
}
.homeAbt01-img:hover img{
transform:scale(1.05);
}
/*=========================
About Tag
==========================*/
.homeAbt01-tagWrap{
display:block;
text-align:center;
margin-bottom:-30px;
}
.homeAbt01-tag{
display:inline-block;
letter-spacing:3px;
text-transform:uppercase;
color:#F0B90B;
font-size:20px;
font-weight:700;
margin-bottom:25px;
}
/*=========================
About Heading
==========================*/
.homeAbt01-content{
max-width:750px;
margin:auto;
}
.homeAbt01-content h2 span{
color:#F0B90B;
}
/*=========================
About Features
==========================*/
.homeAbt01-feature{
display:flex;
align-items:center;
gap:12px;
font-size:17px;
font-weight:500;
color:var(--white);
margin-bottom:18px;
}
.homeAbt01-feature i{
width:40px;
height:40px;
background:var(--primary);
color:#181A20;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
font-size:16px;
flex-shrink:0;
}
/*=========================
Button
==========================*/
.homeAbt01-btn{
display:inline-flex;
align-items:center;
justify-content:center;
padding:16px 38px;
background:#F0B90B;
color:#000;
border-radius:12px;
text-decoration:none;
font-size:18px;
font-weight:700;
transition:.3s ease;
width:fit-content;
}
.homeAbt01-btn:hover{
background:#FCD535;
color:#000;
transform:translateY(-3px);
}
/*=====================================
ABOUT PAGE - BINANCE STYLE
======================================*/
.page-banner{
padding:120px 0;
background:var(--secondary);
}
.about-tag{
color:var(--primary);
font-weight:700;
letter-spacing:2px;
text-transform:uppercase;
}
/*=====================================
ABOUT PAGE SECTION first
======================================*/
.abtPgX91 h2{
font-size:60px;
font-weight:700;
color:var(--white);
line-height:1.3;
margin-top:-40px;
}
.abtPgX91 h2 span{
color:#F0B90B;
}
.abtPgX91 p{
color:var(--text-light);
line-height:1.9;
font-size:17px;
margin:5px;
margin-top:-10px;
}
.abtPgX91Tag{
color:#F0B90B;
font-size:20px;
font-weight:700;
letter-spacing:3px;
text-transform:uppercase;
position:relative;
top:-40px;
}
.btn-primary{
background:var(--primary);
border:2px solid var(--primary);
color:#181A20;
padding:12px 28px;
border-radius:8px;
font-weight:600;
font-size:15px;
transition:var(--transition);
}
.abtPgX91Video{
width:100%;
height:450px;
overflow:hidden;
border-radius:20px;
transform:translateX(-40px);
}
.abtPgX91Video video{
width:100%;
height:100%;
object-fit:cover;
display:block;
}
/*=========================
Info Card
==========================*/
.info-card{
background:var(--card);
padding:35px;
border-radius:16px;
border:1px solid var(--border);
box-shadow:var(--shadow);
transition:var(--transition);
height:100%;
}
.info-card:hover{
transform:translateY(-8px);
border-color:var(--primary);
}
.info-card h3{
color:var(--white);
margin-bottom:18px;
font-weight:700;
}
/*=========================
Feature Box
==========================*/
.feature-box{
background:var(--card);
padding:30px 25px;
border-radius:16px;
border:1px solid var(--border);
box-shadow:var(--shadow);
transition:var(--transition);
height:100%;
}
.feature-box:hover{
transform:translateY(-8px);
border-color:var(--primary);
box-shadow:0 20px 40px rgba(240,185,11,.12);
}
.feature-box h4{
margin-bottom:15px;
font-size:22px;
font-weight:600;
color:var(--white);
}
.feature-box p{
color:var(--text-light);
}
/*=========================
CTA
==========================*/
.cta-section{
background:var(--section);
}
.cta-section h2{
color:var(--white);
font-weight:700;
margin-bottom:15px;
}
.cta-section p{
color:var(--text-light);
font-size:18px;
margin-bottom:25px;
}
/*=========================
Active Navbar
==========================*/
.navbar .nav-link.active{
color:var(--primary)!important;
}
.navbar .nav-link.active::after{
width:100%;
}
/*========================================
ABOUT PAGE BANNER - BINANCE STYLE
========================================*/
.about-banner{
position:relative;
overflow:hidden;
padding:50px 0;
padding-bottom: 50px;
background:linear-gradient(180deg,#181A20 0%,#1E2329 100%);
}
/* Yellow Glow */
.about-banner::before{
content:"";
position:absolute;
width:500px;
height:500px;
background:rgba(240,185,11,.08);
border-radius:50%;
top:-180px;
right:-150px;
filter:blur(120px);
}
/* Left Glow */
.about-banner::after{
content:"";
position:absolute;
width:350px;
height:350px;
background:rgba(240,185,11,.05);
border-radius:50%;
left:-120px;
bottom:-120px;
filter:blur(100px);
}
.about-banner-content{
position:relative;
z-index:10;
text-align:center;
}
.about-small-title{
color:var(--primary);
letter-spacing:3px;
text-transform:uppercase;
font-size:15px;
font-weight:600;
margin-bottom:15px;
}
.about-banner h1{
color:var(--white);
font-size:70px;
font-weight:700;
margin:15px 0;
line-height:1.2;
}
.about-banner h1 span{
color:var(--primary);
}
.about-banner p{
color:var(--text-light);
font-size:20px;
margin-bottom:30px;
max-width:700px;
margin-left:auto;
margin-right:auto;
}
/*=========================
Breadcrumb
==========================*/
.breadcrumb{
display:flex;
justify-content:center;
align-items:center;
gap:10px;
margin-top:25px;
color:var(--text-light);
font-size:17px;
}
.breadcrumb a{
color:var(--white);
text-decoration:none;
transition:var(--transition);
}
.breadcrumb a:hover{
color:var(--primary);
}
.breadcrumb span{
color:var(--text-light);
}
/*=========================
CTA
==========================*/
.cta-section{
background:var(--secondary);
}
.cta-box{
background:var(--card);
border:1px solid var(--border);
border-radius:18px;
box-shadow:var(--shadow);
transition:var(--transition);
}
.cta-box:hover{
border-color:var(--primary);
transform:translateY(-6px);
}
/*========================================
BANNER DECORATIONS - BINANCE STYLE
========================================*/
/* SVG Curved Lines */
.banner-lines{
position:absolute;
inset:0;
width:100%;
height:100%;
pointer-events:none;
opacity:.75;
}
/*=========================
Left Dots
==========================*/
.banner-left{
position:absolute;
top:60px;
left:60px;
z-index:2;
}
/*=========================
Right Dots
==========================*/
.banner-right{
position:absolute;
right:70px;
bottom:70px;
z-index:2;
}
/*=========================
Dot Pattern
==========================*/
.banner-dots{
width:110px;
height:180px;
background-image:radial-gradient(rgba(240,185,11,.55) 2px, transparent 2px);
background-size:22px 22px;
opacity:.85;
}
/*=========================
Yellow Glow Circle
==========================*/
.banner-circle{
width:140px;
height:140px;
border-radius:50%;
position:absolute;
right:50px;
bottom:40px;
background:radial-gradient(circle,
rgba(240,185,11,.95) 0%,
rgba(240,185,11,.35) 60%,
transparent 100%);
filter:blur(2px);
box-shadow:0 0 80px rgba(240,185,11,.30);
}
/*=========================
Responsive
==========================*/
@media(max-width:768px){
.about-banner{
padding:80px 20px;
}
.about-banner h1{
font-size:42px;
}
.about-banner p{
font-size:17px;
}
.banner-left,
.banner-right,
.banner-circle{
display:none;
}
}
/*========================================
PAGE BANNER - BINANCE STYLE
========================================*/
.page-banner{
position:relative;
overflow:hidden;
padding:120px 0;
padding-bottom: 10px;
background:linear-gradient(180deg,#181A20 0%,#1E2329 100%);
}
/*=========================
Background Glow
==========================*/
.page-banner::before{
content:"";
position:absolute;
width:550px;
height:550px;
top:-220px;
right:-180px;
background:rgba(240,185,11,.08);
border-radius:50%;
filter:blur(120px);
}
.page-banner::after{
content:"";
position:absolute;
width:350px;
height:350px;
bottom:-150px;
left:-120px;
background:rgba(240,185,11,.05);
border-radius:50%;
filter:blur(90px);
}
/*=========================
Banner Content
==========================*/
.banner-content{
position:relative;
z-index:10;
text-align:center;
}
.banner-subtitle{
color:var(--primary);
font-size:15px;
letter-spacing:3px;
font-weight:600;
text-transform:uppercase;
margin-bottom:15px;
}
.banner-content h1{
color:var(--white);
font-size:68px;
font-weight:700;
line-height:1.2;
margin-bottom:20px;
}
.banner-content h1 span{
color:var(--primary);
}
.banner-content p{
color:var(--text-light);
font-size:18px;
margin:0;
}
.banner-content p span{
margin:0 10px;
color:var(--primary);
}
/*=========================
Left Dots
==========================*/
.shape-1{
position:absolute;
left:60px;
top:50px;
width:100px;
height:180px;
background-image:radial-gradient(rgba(240,185,11,.55) 2px,transparent 2px);
background-size:22px 22px;
opacity:.75;
}
/*=========================
Right Dots
==========================*/
.shape-2{
position:absolute;
right:70px;
bottom:70px;
width:100px;
height:150px;
background-image:radial-gradient(rgba(240,185,11,.55) 2px,transparent 2px);
background-size:22px 22px;
opacity:.75;
}
/*=========================
Glow Circle
==========================*/
.shape-3{
position:absolute;
width:140px;
height:140px;
right:50px;
bottom:40px;
border-radius:50%;
background:radial-gradient(circle,
rgba(240,185,11,.95) 0%,
rgba(240,185,11,.35) 60%,
transparent 100%);
box-shadow:0 0 80px rgba(240,185,11,.30);
}
/*=========================
Responsive
==========================*/
@media(max-width:991px){
.page-banner{
padding:100px 0;
}
.banner-content h1{
font-size:50px;
}
}
@media(max-width:768px){
.page-banner{
padding:80px 20px;
}
.banner-content h1{
font-size:38px;
}
.banner-content p{
font-size:16px;
}
.shape-1,
.shape-2,
.shape-3{
display:none;
}
}
/*====================================
SERVICES SECTION
====================================*/
.services-section{
background:#181A20;
padding: 10px;
}
/* Heading */
.services-heading{
display:flex;
flex-direction:column;
align-items:stretch;
}
.section-tag{
color:#FCD535;
font-size:16px;
font-weight:700;
letter-spacing:3px;
text-transform:uppercase;
position: relative;
top: -30px;
}
.services-heading h2{
text-align:center;
color:#fff;
font-size:60;
font-weight:700;
}
.services-heading h2 span{
color:#f0b90b;
}
div.services-heading > h2{
font-size:50px !important;
}
/*=========================================
SECTION DESCRIPTION
=========================================*/
.section-description{
max-width:820px;
margin:10px auto ;
color:#AEB4BF;
font-size:16px;
font-weight:400;
line-height:1.9;
text-align:center;
letter-spacing:.3px;
}
.section-label{
display:flex;
align-items:center;
justify-content:flex-start;
width:100%;
margin-bottom:25px;
}
.section-label span{
width:50px;
height:2px;
background:#F0B90B;
margin-right:15px;
}
.section-label h5{
margin:0;
color:#F0B90B;
letter-spacing:2px;
font-size:20px;
font-weight:700;
}
/* Grid */
.services-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:30px;
}
/* Card */
.service-card{
background:#242A33;
border-radius:22px;
padding:40px;
transition:.35s;
border-top:4px solid #FCD535;
}
.service-card:hover{
box-shadow:
0 0 30px rgba(247, 185, 15, 0.655);
}
.number{
display:block;
font-size:65px;
font-weight:900;
color:#FCD535;
opacity:.15;
margin-bottom:15px;
}
.service-card h3{
color:#fff;
font-size:30px;
margin-bottom:18px;
}
.service-card p{
color:#B7BDC6;
line-height:1.8;
font-size:16px;
}
/* Responsive */
@media(max-width:992px){
.services-grid{
grid-template-columns:repeat(2,1fr);
}
}
@media(max-width:768px){
.services-grid{
grid-template-columns:1fr;
}
.services-heading h2{
font-size:42px;
}
}
/*====================================
SERVICE DETAILS
====================================*/
.service-banner{
background: #242A33;
padding: 10px 0;
}
.service-banner h2{
color: #ffffff;
}
.service-banner p,
.service-banner li{
color: #C7CDD6;
}
.service-content .service-list{
list-style:none;
padding:0;
margin:30px 0;
}
.service-content .service-list li{
position:relative;
padding-left:28px;
margin-bottom:15px;
}
.service-content .service-list li::before{
content:"";
position:absolute;
left:0;
top:10px;
width:10px;
height:10px;
background:#DFA300;
border-radius:50%;
}
/* Spacing only for last three service sections */
.service-spacing {
margin-top: 50px;
margin-bottom: 50px;
}
/* Space after E-Commerce section */
.ecommerce-gap{
margin-bottom:50px !important;
}
.affiliate-gap{
margin-top:50px !important;
margin-bottom: 50px !important;
}
/*====================================
SERVICE IMAGES
====================================*/
.service-banner .col-lg-6 img{
width:100%;
height:400px; /* Same height for all images */
object-fit:cover;
object-position:center;
display:block;
border-radius:16px;
transition:.4s ease;
}
.service-banner .col-lg-6 img:hover{
transform:scale(1.03);
}
@media (max-width:991px){
.service-banner .col-lg-6 img{
height:340px;
margin-bottom:25px;
}
}
@media (max-width:576px){
.service-banner .col-lg-6 img{
height:250px;
}
}
/*====================================
WHY CHOOSE ACT
====================================*/
.why-us{
background:#1E2329;
padding:10px 0;
}
.why-us .text-center span{
color:#F0B90B;
font-size:40px;
font-weight:700;
}
.why-us .text-center > p{
color:rgb(183, 189, 198);
font-size:18px;
margin-top:8px;
}
/* =========================
Feature Cards
========================= */
.feature-box{
background:var(--card);
padding:10px 25px;
border-radius:16px;
border:1px solid var(--border);
box-shadow:var(--shadow);
transition:var(--transition);
height:100%;
}
.feature-box:hover{
transform:translateY(-8px);
border-color:var(--primary);
box-shadow:0 20px 40px rgba(240,185,11,.12);
}
.feature-box h4{
margin-bottom:15px;
font-size:22px;
font-weight:600;
color:var(--white);
}
.feature-box p{
color:var(--text-light);
}
/*====================================
SERVICE CTA
====================================*/
.service-cta{
padding-top:50px;
background:var(--secondary);
}
.cta-box{
background:linear-gradient(180deg,#1E2329,#242A33);
color:var(--white);
padding:70px 60px;
border:1px solid var(--border);
border-radius:18px;
text-align:center;
box-shadow:var(--shadow);
}
.cta-box h2{
font-size:46px;
font-weight:700;
margin-bottom:20px;
}
.cta-box p{
color:var(--text-light);
font-size:18px;
line-height:1.8;
margin-bottom:30px;
}
.cta-box .btn{
padding:14px 36px;
border-radius:8px;
}
/*====================================
COURSES PAGE BANNER - BINANCE
====================================*/
.page-banner{
position:relative;
overflow:hidden;
padding:130px 0;
background:linear-gradient(180deg,#181A20 0%,#1E2329 100%);
color:var(--white);
}
/* Yellow Glow */
.banner-circle{
position:absolute;
border-radius:50%;
background:radial-gradient(circle,
rgba(240,185,11,.9) 0%,
rgba(240,185,11,.25) 60%,
transparent 100%);
filter:blur(2px);
}
.circle-1{
width:420px;
height:420px;
right:-140px;
top:-170px;
}
.circle-2{
width:300px;
height:300px;
left:-120px;
bottom:-120px;
}
/* Tag */
.banner-tag{
display:inline-block;
padding:10px 24px;
background:rgba(240,185,11,.15);
border:1px solid rgba(240,185,11,.30);
color:var(--primary);
border-radius:50px;
letter-spacing:2px;
font-size:14px;
font-weight:600;
margin-bottom:25px;
}
/* Heading */
.banner-content h1{
font-size:60px;
font-weight:700;
line-height:1.2;
color:var(--white);
margin-bottom:25px;
}
.banner-content h1 span{
color:var(--primary);
}
/* Paragraph */
.banner-content p{
font-size:18px;
color:var(--text-light);
line-height:1.9;
margin-bottom:35px;
}
/* Buttons */
.banner-buttons{
display:flex;
gap:15px;
flex-wrap:wrap;
}
.banner-buttons .btn{
padding:14px 32px;
border-radius:8px;
font-weight:600;
}
/* Image */
.banner-image{
text-align:center;
}
.banner-image img{
max-width:95%;
border-radius:18px;
border:1px solid var(--border);
box-shadow:var(--shadow);
animation:float 5s ease-in-out infinite;
}
/* Responsive */
@media(max-width:991px){
.page-banner{
text-align:center;
padding:100px 0;
}
.banner-content{
margin-bottom:50px;
}
.banner-content h1{
font-size:42px;
}
.banner-buttons{
justify-content:center;
}
}
/* Glow Circle */
.shape-3{
position:absolute;
width:140px;
height:140px;
border-radius:50%;
right:50px;
bottom:40px;
background:radial-gradient(circle,
rgba(240,185,11,.95) 0%,
rgba(240,185,11,.35) 60%,
transparent 100%);
box-shadow:0 0 80px rgba(240,185,11,.30);
}
/*====================================
COURSE STATISTICS
====================================*/
.course-stats{
background:#181A20;
padding:50px 0;
}
.stats-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:25px;
}
.stat-box{
background:#242A33;
border:1px solid rgba(255,255,255,.08);
border-radius:20px;
padding:40px 30px;
text-align:center;
transition:.35s ease;
position:relative;
overflow:hidden;
}
.stat-box::before{
content:"";
position:absolute;
top:0;
left:0;
width:100%;
height:4px;
background:#F0B90B;
}
.stat-box:hover{
transform:translateY(-8px);
border-color:#FCD535;
box-shadow:0 15px 40px rgba(0,0,0,.35);
}
.stat-box h2{
color:#F0B90B;
font-size:56px;
font-weight:800;
margin-bottom:12px;
line-height:1;
}
.stat-box h4{
color:#FFFFFF;
font-size:22px;
font-weight:700;
margin-bottom:15px;
}
.stat-box p{
color:#B7BDC6;
font-size:15px;
line-height:1.8;
}
/*==============================
Responsive
==============================*/
@media(max-width:992px){
.stats-grid{
grid-template-columns:repeat(2,1fr);
}
}
@media(max-width:768px){
.stats-grid{
grid-template-columns:1fr;
}
.stat-box{
padding:35px 25px;
}
.stat-box h2{
font-size:46px;
}
}
.small-title{
display:inline-block;
color:var(--primary);
font-size: 20px;
font-weight:700;
letter-spacing:2px;
text-transform:uppercase;
padding-left: 40px;
padding-right: 40px;
margin-bottom:5px;
margin-top: 15px;
}
.content-box h2{
font-size:58px;
font-weight:700;
line-height:1.2;
color:var(--white);
margin-bottom:25px;
padding-left: 40px;
padding-right: 40px;
}
.content-box h2 span{
color:var(--primary);
}
.content-box p{
font-size:18px;
line-height:1.9;
color:var(--text-gray);
margin-top:-10px;
margin-bottom:35px;
padding-left: 40px;
padding-right: 40px;
}
/* Course List */
.course-list{
list-style:none;
padding:0;
margin:-10px 0 35px;
padding-left: 40px;
padding-right: 40px;
margin-bottom: -3px;
}
.course-list li{
position:relative;
padding-left:34px;
margin-bottom:18px;
font-size:19px;
padding-left: 40px;
padding-right: 40px;
font-weight:500;
color:var(--white);
}
.course-list li::before{
content:"✔";
position:absolute;
left:0;
top:0;
color:var(--primary);
font-size:18px;
font-weight:bold;
}
/* Primary Button */
.btn-course{
display:inline-block;
padding:15px 38px;
background:var(--primary);
color:#181A20;
text-decoration:none;
margin-left:40px;
border-radius:8px;
font-weight:600;
transition:var(--transition);
margin-bottom:20px;
}
.btn-course:hover{
background:#F8D33A;
color:#181A20;
transform:translateY(-3px);
}
/* Outline Button */
.contact-btn{
background:transparent;
border:2px solid var(--primary);
color:var(--primary);
transition:var(--transition);
}
.contact-btn:hover{
background:var(--primary);
color:#181A20;
}
/*=====================================
IMAGE SIDE
======================================*/
.contact-btn:hover,
.contact-btn:focus,
.contact-btn:active{
background:var(--primary);
border-color:var(--primary);
color:#181A20;
}
/*=========================
RIGHT IMAGE
==========================*/
.image-side{
background:var(--section);
padding:70px;
}
.image-grid{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:30px;
}
.img-box{
overflow:hidden;
border-radius:16px;
border:1px solid var(--border);
box-shadow:var(--shadow);
transition:var(--transition);
}
.img-box:hover{
transform:translateY(-6px);
border-color:var(--primary);
}
.img-box img{
width:100%;
height:270px;
object-fit:cover;
transition:.6s;
}
.img-box:hover img{
transform:scale(1.08);
}
/*====================================
WHAT YOU WILL GET
====================================*/
.course-benefits{
background:#181A20;
padding:30px 0;
}
.benefits-heading{
max-width:800px;
margin:0 auto 60px;
text-align:center;
}
.section-tag{
color:#F0B90B;
font-size:16px;
font-weight:700;
letter-spacing:2px;
text-transform:uppercase;
}
.benefits-heading h2{
color:#FFFFFF;
font-size:60px;
font-weight:700;
margin:-20px 0;
}
.benefits-heading h2 span{
color:#F0B90B;
}
.benefits-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:30px;
}
.benefit-card{
background:#242A33;
border:1px solid rgba(255,255,255,.08);
border-radius:20px;
padding:35px;
transition:.35s;
position:relative;
}
.benefit-card::before{
content:"";
position:absolute;
left:0;
top:0;
width:100%;
height:4px;
background:#F0B90B;
}
.benefit-card:hover{
transform:translateY(-8px);
border-color:#F0B90B;
box-shadow:0 15px 40px rgba(0,0,0,.35);
}
.benefit-icon{
width:70px;
height:70px;
display:flex;
align-items:center;
justify-content:center;
background:#F0B90B;
color:#111;
border-radius:18px;
font-size:32px;
margin-bottom:25px;
}
.benefit-card h3{
color:#FFFFFF;
font-size:24px;
margin-bottom:15px;
}
.benefit-card p{
color:#B7BDC6;
line-height:1.8;
font-size:15px;
}
/*==========================
Responsive
==========================*/
@media(max-width:992px){
.benefits-grid{
grid-template-columns:repeat(2,1fr);
}
}
@media(max-width:768px){
.benefits-grid{
grid-template-columns:1fr;
}
.benefits-heading h2{
font-size:38px;
}
}
/*====================================
LEARNING PROCESS
====================================*/
/*====================================
ACT LEARNING PROCESS
====================================*/
.act-learning-process {
background: #0B0E11;
padding: 20px 0;
}
/* Heading */
.act-process-heading {
max-width: 750px;
margin: 0 auto 35px;
text-align: center;
}
.act-process-tag {
display: inline-block;
color: #F0B90B;
font-size: 16px;
font-weight: 700;
letter-spacing: 2px;
margin-bottom: 15px;
}
.act-process-heading h2 {
color: #FFFFFF;
font-size: 60px;
font-weight: 700;
line-height: 1.15;
margin: 0;
}
.act-process-heading h2 span {
color: #F0B90B;
}
/* Timeline */
.act-process-timeline {
position: relative;
display: grid;
/* Aapke paas 5 items hain */
grid-template-columns: repeat(5, 1fr);
gap: 20px;
padding-top: 0;
}
.act-process-line {
position: absolute;
top: 35px;
left: 5%;
width: 90%;
height: 4px;
background: #F0B90B;
z-index: 1;
}
/* Timeline Item */
.act-process-item {
position: relative;
z-index: 2;
text-align: center;
min-width: 0;
}
.act-process-circle {
width: 70px;
height: 70px;
margin: 0 auto;
display: flex;
justify-content: center;
align-items: center;
color: #111;
background: #F0B90B;
border: 6px solid #181A20;
border-radius: 50%;
font-size: 22px;
font-weight: 800;
box-shadow: 0 10px 25px rgba(252, 213, 53, 0.25);
}
/* Item Content */
.act-process-item h4 {
margin: 18px 0 0;
color: #FFFFFF;
font-size: 20px;
font-weight: 700;
line-height: 1.3;
}
.act-process-item p {
margin: 10px 0 0;
padding: 0 10px;
color: #B7BDC6;
font-size: 14px;
line-height: 1.7;
}
/*====================================
Responsive
====================================*/
@media (max-width: 1200px) {
.act-process-timeline {
grid-template-columns: repeat(3, 1fr);
row-gap: 70px;
}
.act-process-line {
display: none;
}
}
@media (max-width: 768px) {
.act-learning-process {
padding: 30px 15px;
}
.act-process-heading {
margin-bottom: 30px;
}
.act-process-heading h2 {
font-size: 38px;
}
.act-process-timeline {
grid-template-columns: 1fr;
row-gap: 45px;
}
.act-process-item {
width: 100%;
max-width: 320px;
margin: 0 auto;
}
}
/*====================================
OUR EXPERTS SECTION
====================================*/
.experts-section {
background: #181a20;
padding: 30px;
overflow: hidden;
}
/* Heading */
.experts-heading {
max-width: 820px;
margin: 0 auto 70px;
text-align: center;
}
.experts-tag {
display: inline-block;
margin-bottom: 14px;
color: #F0B90B;
font-size: 14px;
font-weight: 700;
letter-spacing: 3px;
text-transform: uppercase;
}
.experts-heading h2 {
margin: 0 0 18px;
color: #ffffff;
font-size: clamp(38px, 5vw, 58px);
font-weight: 600;
line-height: 1.1;
}
.experts-heading h2 span {
color: #F0B90B;
}
.experts-heading p {
max-width: 720px;
margin: 0 auto;
color: #b7bdc6;
font-size: 16px;
line-height: 1.8;
}
/* 4 × 2 Grid */
.experts-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
align-items: start;
gap: 28px 22px;
}
/* Expert Card */
.expert-card {
position: relative;
display: flex;
min-height: 360px;
flex-direction: column;
justify-content: space-between;
padding: 32px 26px;
overflow: hidden;
background: #242a33;
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 22px;
transition:
transform 0.35s ease,
border-color 0.35s ease,
box-shadow 0.35s ease;
}
.expert-card::before {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 4px;
background: #F0B90B;
content: "";
}
.expert-card::after {
position: absolute;
top: -65px;
right: -65px;
width: 145px;
height: 145px;
background: rgba(252, 213, 53, 0.05);
border: 1px solid rgba(252, 213, 53, 0.15);
border-radius: 50%;
content: "";
}
.expert-card:hover {
border-color: rgba(252, 213, 53, 0.7);
box-shadow: 0 20px 45px rgba(0, 0, 0, 0.35);
transform: translateY(-8px);
}
/* Reference image jaisa staggered pattern */
.expert-card:nth-child(1),
.expert-card:nth-child(3),
.expert-card:nth-child(6),
.expert-card:nth-child(8) {
margin-top: 0;
}
.expert-card:nth-child(2),
.expert-card:nth-child(4),
.expert-card:nth-child(5),
.expert-card:nth-child(7) {
margin-top: 55px;
}
/* Initials Circle */
.expert-initials {
position: relative;
z-index: 2;
display: flex;
width: 76px;
height: 76px;
align-items: center;
justify-content: center;
margin: 0 auto 30px;
background: #F0B90B;
color: #181a20;
border-radius: 50%;
font-size: 26px;
font-weight: 800;
}
/* Text Content */
.expert-content {
position: relative;
z-index: 2;
flex: 1;
text-align: center;
}
.expert-content h3 {
margin: 0 0 9px;
color: #ffffff;
font-size: 21px;
font-weight: 700;
line-height: 1.3;
}
.expert-content h4 {
margin: 0 0 17px;
color: #F0B90B;
font-size: 14px;
font-weight: 700;
}
.expert-content p {
margin: 0;
color: #b7bdc6;
font-size: 14px;
line-height: 1.8;
}
/* Social Buttons */
.expert-socials {
position: relative;
z-index: 2;
display: flex;
justify-content: center;
gap: 10px;
margin-top: 26px;
}
.expert-socials a {
display: flex;
width: 42px;
height: 42px;
align-items: center;
justify-content: center;
background: #1e2329;
border: 1px solid rgba(255, 255, 255, 0.08);
color: #F0B90B;
border-radius: 50%;
font-size: 14px;
font-weight: 800;
text-decoration: none;
transition:
transform 0.3s ease,
background 0.3s ease,
color 0.3s ease;
}
.expert-socials a:hover {
background: #F0B90B;
color: #181a20;
transform: translateY(-3px);
}
/* Tablet */
@media (max-width: 1100px) {
.experts-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.expert-card:nth-child(odd) {
margin-top: 0;
}
.expert-card:nth-child(even) {
margin-top: 45px;
}
}
/* Mobile */
@media (max-width: 650px) {
.experts-section {
padding: 65px 15px;
}
.experts-heading {
margin-bottom: 42px;
}
.experts-grid {
grid-template-columns: 1fr;
gap: 18px;
}
.expert-card,
.expert-card:nth-child(odd),
.expert-card:nth-child(even) {
min-height: auto;
margin-top: 0;
}
.expert-card {
padding: 28px 22px;
}
.experts-heading h2 {
font-size: 36px;
}
}
/*=====================================
FOOTER - BINANCE STYLE
======================================*/
.footer{
background:#181A20;
color:var(--white);
padding:90px 0 25px;
border-top:1px solid var(--border);
}
.footer-logo{
width:180px;
margin-bottom:25px;
}
.footer-text{
color:var(--text-light);
line-height:1.9;
margin-bottom:30px;
color:#FFFFFF;
}
.footer h4{
font-size:22px;
margin-bottom:25px;
font-weight:700;
color:var(--white);
}
.footer ul{
list-style:none;
margin:0;
padding:0;
}
.footer ul li{
margin-bottom:15px;
}
.footer ul li a{
color:var(--text-light);
transition:var(--transition);
}
.footer ul li a:hover{
color:var(--primary);
padding-left:6px;
}
/* Contact */
.footer-contact i{
width:30px;
color:var(--primary);
}
/*=========================
Social Icons
==========================*/
.footer-social{
display:flex;
gap:15px;
}
.footer-social a{
width:46px;
height:46px;
display:flex;
align-items:center;
justify-content:center;
background:var(--card);
border:1px solid var(--border);
border-radius:50%;
color:var(--primary);
transition:var(--transition);
}
.footer-social a:hover{
background:var(--primary);
color:#181A20;
transform:translateY(-5px);
}
/* Divider */
.footer hr{
border-color:var(--border);
margin:50px 0 25px;
}
/* Bottom */
.footer-bottom{
text-align:center;
}
.footer-bottom p{
margin:0;
color:var(--gray);
}
/*=========================
Responsive
==========================*/
@media(max-width:991px){
.footer{
text-align:center;
}
.footer-social{
justify-content:center;
}
.footer-contact i{
display:block;
margin:0 auto 8px;
}
}
/*=========================
Service Banner
==========================*/
.service-page-banner{
padding:50px 0 ;
padding-bottom: 50px;
}
::-webkit-scrollbar{
width:10px;
}
::-webkit-scrollbar-track{
background:#181A20;
}
::-webkit-scrollbar-thumb{
background:#F0B90B;
border-radius:20px;
}
::-webkit-scrollbar-thumb:hover{
background:#F8D33A;
}
*{
transition:background-color .3s,
color .3s,
border-color .3s,
transform .3s;
}
/*==================================
TEAM SECTION - BINANCE STYLE
==================================*/
/*========================================
BASIC RESET
========================================*/
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
background: #0b0e11;
font-family: Arial, Helvetica, sans-serif;
}
button,
a {
-webkit-tap-highlight-color: transparent;
}
/*========================================
ACT TEAM SECTION
========================================*/
.act-team-showcase {
--act-gold: #f0b90b;
--act-dark: #0b0e11;
--act-dark-two: #111418;
--act-card: #181a20;
--act-border: #2b3139;
--act-white: #ffffff;
--act-gray: #b7bdc6;
position: relative;
width: 100%;
min-height: 100vh;
display: flex;
align-items: center;
background:
radial-gradient(
circle at top left,
rgba(240, 185, 11, 0.12),
transparent 32%
),
radial-gradient(
circle at bottom right,
rgba(240, 185, 11, 0.08),
transparent 30%
),
var(--act-dark);
overflow: hidden;
}
.act-team-wrapper {
position: relative;
width: 100%;
max-width: 1450px;
min-height: 700px;
margin: 0 auto;
padding: 0px;
display: grid;
grid-template-columns: 0.72fr 1.9fr 0.25fr;
align-items: center;
gap: 30px;
background: var(--act-dark-two);
border: 1px solid var(--act-border);
overflow: hidden;
}
.act-team-wrapper::before {
content: "";
position: absolute;
top: -280px;
left: -190px;
width: 480px;
height: 480px;
border: 1px solid rgba(240, 185, 11, 0.12);
border-radius: 50%;
pointer-events: none;
}
.act-team-wrapper::after {
content: "";
position: absolute;
right: -260px;
bottom: -300px;
width: 550px;
height: 550px;
border: 1px solid rgba(240, 185, 11, 0.12);
border-radius: 50%;
pointer-events: none;
}
/*========================================
LEFT HEADING
========================================*/
.act-team-heading {
position: relative;
z-index: 10;
}
.act-team-heading > span {
display: block;
color: var(--act-white);
font-family: Georgia, "Times New Roman", serif;
font-size: clamp(55px, 5vw, 92px);
font-weight: 400;
line-height: 0.88;
letter-spacing: -5px;
}
.act-team-heading .act-team-light-text {
color: #f0b90b !important;
font-style: italic;
}
.act-team-heading p {
max-width: 285px;
margin-top: 50px;
color: var(--act-gray);
font-size: 16px;
line-height: 1.8;
}
/*========================================
SLIDER AREA
========================================*/
.act-team-slider-area {
position: relative;
z-index: 10;
min-width: 0;
min-height: 520px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.act-team-image-stack {
position: relative;
width: 100%;
max-width: 850px;
height: 420px;
}
/*========================================
TEAM SLIDES
========================================*/
.act-team-slide {
position: absolute;
top: 50%;
left: 50%;
width: 300px;
height: 410px;
background: var(--act-card);
border: 1px solid rgba(255, 255, 255, 0.09);
border-radius: 6px;
overflow: hidden;
cursor: pointer;
transform-origin: center;
transition:
transform 0.75s cubic-bezier(.2, .8, .2, 1),
opacity 0.75s ease,
filter 0.75s ease,
box-shadow 0.75s ease;
will-change: transform;
}
.act-team-slide img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
object-position: top center;
transition: transform 0.5s ease;
}
/* Active Center Slide */
.act-team-slide.active {
z-index: 20;
opacity: 1;
filter: none;
transform:
translate(-50%, -50%)
scale(1);
box-shadow:
0 30px 85px rgba(0, 0, 0, 0.58),
0 0 0 1px rgba(240, 185, 11, 0.3);
}
.act-team-slide.active:hover img {
transform: scale(1.04);
}
/* First Left Slide */
.act-team-slide.previous-1 {
z-index: 14;
opacity: 0.76;
filter: brightness(0.68);
transform:
translate(-125%, -50%)
scale(0.82);
}
/* Second Left Slide */
.act-team-slide.previous-2 {
z-index: 8;
opacity: 0.32;
filter: brightness(0.48);
transform:
translate(-175%, -50%)
scale(0.62);
}
/* First Right Slide */
.act-team-slide.next-1 {
z-index: 14;
opacity: 0.76;
filter: brightness(0.68);
transform:
translate(25%, -50%)
scale(0.82);
}
/* Second Right Slide */
.act-team-slide.next-2 {
z-index: 8;
opacity: 0.32;
filter: brightness(0.48);
transform:
translate(75%, -50%)
scale(0.62);
}
/* Hidden Left Slides */
.act-team-slide.hidden-left {
z-index: 1;
opacity: 0;
pointer-events: none;
transform:
translate(-220%, -50%)
scale(0.4);
}
/* Hidden Right Slides */
.act-team-slide.hidden-right {
z-index: 1;
opacity: 0;
pointer-events: none;
transform:
translate(125%, -50%)
scale(0.4);
}
/*========================================
IMAGE OVERLAY
========================================*/
.act-team-image-overlay {
position: absolute;
inset: 0;
display: flex;
align-items: flex-end;
justify-content: center;
padding-bottom: 25px;
background: linear-gradient(
to top,
rgba(0, 0, 0, 0.9),
transparent 50%
);
opacity: 0;
transition: 0.35s ease;
}
.act-team-slide.active:hover .act-team-image-overlay {
opacity: 1;
}
.act-team-image-overlay span {
padding: 10px 18px;
color: var(--act-dark);
background: var(--act-gold);
border-radius: 50px;
font-size: 11px;
font-weight: 800;
letter-spacing: 0.8px;
text-transform: uppercase;
}
/*========================================
ACTIVE MEMBER INFORMATION
========================================*/
.act-team-basic-info {
min-height: 75px;
margin-top: 10px;
text-align: center;
}
.act-team-basic-info h2 {
margin: 0;
color: var(--act-white);
font-family: Georgia, "Times New Roman", serif;
font-size: clamp(26px, 2.5vw, 36px);
line-height: 1.1;
font-weight: 400;
}
.act-team-basic-info p {
display: inline-block;
margin-top: 8px;
padding: 8px 17px;
color: var(--act-gold);
border: 1px solid rgba(240, 185, 11, 0.45);
border-radius: 50px;
font-size: 11px;
font-weight: 700;
letter-spacing: 1px;
text-transform: uppercase;
}
/*========================================
SLIDER CONTROLS
========================================*/
.act-team-controls {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
margin-top: 15px;
}
.act-team-controls button {
width: 58px;
height: 38px;
display: flex;
align-items: center;
justify-content: center;
color: var(--act-white);
background: transparent;
border: 1px solid var(--act-border);
border-radius: 50px;
font-size: 15px;
cursor: pointer;
transition: 0.3s ease;
}
.act-team-controls button:hover {
color: var(--act-dark);
background: var(--act-gold);
border-color: var(--act-gold);
transform: translateY(-3px);
}
/*========================================
AUTOPLAY STATUS
========================================*/
.act-team-autoplay-status {
display: none;
align-items: center;
justify-content: center;
gap: 8px;
margin-top: 18px;
color: var(--act-gray);
font-size: 10px;
letter-spacing: 1.2px;
text-transform: uppercase;
}
.act-team-autoplay-dot {
width: 7px;
height: 7px;
background: var(--act-gold);
border-radius: 50%;
animation: actTeamPulse 1.5s infinite;
}
@keyframes actTeamPulse {
0%,
100% {
opacity: 1;
transform: scale(1);
}
50% {
opacity: 0.35;
transform: scale(0.7);
}
}
/*========================================
COUNTER
========================================*/
.act-team-counter {
position: relative;
z-index: 10;
align-self: end;
justify-self: end;
padding-bottom: 15px;
color: var(--act-white);
white-space: nowrap;
}
.act-team-counter span {
font-family: Georgia, "Times New Roman", serif;
font-size: 44px;
}
.act-team-counter small {
color: var(--act-gray);
font-size: 16px;
}
/*========================================
PROFILE MODAL
========================================*/
.act-team-modal {
position: fixed;
inset: 0;
z-index: 999999;
padding: 25px;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
visibility: hidden;
transition: 0.35s ease;
}
.act-team-modal.show {
opacity: 1;
visibility: visible;
}
.act-team-modal-overlay {
position: absolute;
inset: 0;
background: rgba(3, 5, 7, 0.92);
backdrop-filter: blur(10px);
}
.act-team-modal-content {
position: relative;
z-index: 2;
width: min(1100px, 100%);
max-height: 90vh;
display: grid;
grid-template-columns: 0.9fr 1.1fr;
background: var(--act-dark-two);
border: 1px solid var(--act-border);
box-shadow: 0 40px 100px rgba(0, 0, 0, 0.65);
overflow-y: auto;
transform: translateY(40px) scale(0.96);
transition: 0.4s cubic-bezier(.2, .8, .2, 1);
}
.act-team-modal.show .act-team-modal-content {
transform: translateY(0) scale(1);
}
.act-team-modal-close {
position: absolute;
top: 18px;
right: 20px;
z-index: 5;
width: 45px;
height: 45px;
display: flex;
align-items: center;
justify-content: center;
color: var(--act-white);
background: rgba(0, 0, 0, 0.58);
border: 1px solid rgba(255, 255, 255, 0.18);
border-radius: 50%;
font-size: 26px;
cursor: pointer;
transition: 0.3s ease;
}
.act-team-modal-close:hover {
color: var(--act-dark);
background: var(--act-gold);
border-color: var(--act-gold);
transform: rotate(90deg);
}
.act-team-modal-image {
min-height: 620px;
background: var(--act-card);
}
.act-team-modal-image img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
object-position: top center;
}
.act-team-modal-info {
display: flex;
flex-direction: column;
justify-content: center;
padding: 65px 55px;
}
.act-team-modal-label {
color: var(--act-gold);
font-size: 12px;
font-weight: 700;
letter-spacing: 2px;
}
.act-team-modal-initials {
width: 76px;
height: 76px;
margin-top: 22px;
display: flex;
align-items: center;
justify-content: center;
color: var(--act-dark);
background: var(--act-gold);
border-radius: 50%;
font-size: 21px;
font-weight: 800;
letter-spacing: 1px;
}
.act-team-modal-info h2 {
margin: 22px 0 10px;
color: var(--act-white);
font-family: Georgia, "Times New Roman", serif;
font-size: clamp(40px, 5vw, 70px);
font-weight: 400;
line-height: 1.05;
}
.act-team-modal-info h4 {
margin-bottom: 28px;
color: var(--act-gold);
font-size: 15px;
font-weight: 600;
letter-spacing: 1px;
text-transform: uppercase;
}
.act-team-modal-info > p {
color: var(--act-gray);
font-size: 16px;
line-height: 1.9;
}
/*========================================
MODAL SOCIAL ICONS
========================================*/
.act-team-modal-socials {
display: flex;
align-items: center;
gap: 12px;
margin-top: 35px;
}
.act-team-modal-socials a {
width: 46px;
height: 46px;
display: flex;
align-items: center;
justify-content: center;
color: var(--act-white);
background: var(--act-card);
border: 1px solid var(--act-border);
border-radius: 50%;
font-size: 15px;
font-weight: 700;
text-decoration: none;
transition: 0.3s ease;
}
.act-team-modal-socials a:hover {
color: var(--act-dark);
background: var(--act-gold);
border-color: var(--act-gold);
transform: translateY(-4px);
}
/*========================================
RESPONSIVE LAPTOP
========================================*/
@media (max-width: 1200px) {
.act-team-wrapper {
grid-template-columns: 0.65fr 1.65fr;
}
.act-team-counter {
position: absolute;
right: 35px;
bottom: 25px;
}
.act-team-heading > span {
font-size: 68px;
}
.act-team-slide {
width: 270px;
height: 380px;
}
}
/*========================================
RESPONSIVE TABLET
========================================*/
@media (max-width: 900px) {
.act-team-showcase {
min-height: auto;
padding: 40px 15px;
}
.act-team-wrapper {
grid-template-columns: 1fr;
gap: 25px;
padding: 40px 20px 85px;
}
.act-team-heading {
text-align: center;
}
.act-team-heading > span {
display: inline;
margin-right: 8px;
font-size: 50px;
line-height: 1;
letter-spacing: -3px;
}
.act-team-heading p {
max-width: 520px;
margin: 25px auto 0;
}
.act-team-slider-area {
min-height: 550px;
}
.act-team-image-stack {
max-width: 720px;
height: 410px;
}
.act-team-slide {
width: 255px;
height: 360px;
}
.act-team-slide.previous-1 {
transform:
translate(-115%, -50%)
scale(0.78);
}
.act-team-slide.next-1 {
transform:
translate(15%, -50%)
scale(0.78);
}
.act-team-slide.previous-2 {
transform:
translate(-150%, -50%)
scale(0.58);
}
.act-team-slide.next-2 {
transform:
translate(50%, -50%)
scale(0.58);
}
.act-team-counter {
right: 25px;
bottom: 20px;
}
.act-team-modal-content {
grid-template-columns: 1fr;
}
.act-team-modal-image {
min-height: 420px;
max-height: 500px;
}
.act-team-modal-info {
padding: 45px 28px;
}
}
/*========================================
RESPONSIVE MOBILE
========================================*/
@media (max-width: 600px) {
.act-team-showcase {
padding: 30px 10px;
}
.act-team-wrapper {
padding: 35px 12px 80px;
}
.act-team-heading > span {
display: block;
margin: 0;
font-size: 55px;
}
.act-team-slider-area {
min-height: 480px;
}
.act-team-image-stack {
height: 320px;
overflow: visible;
}
.act-team-slide {
width: 205px;
height: 290px;
}
.act-team-slide.active {
transform:
translate(-50%, -50%)
scale(1);
}
.act-team-slide.previous-1 {
opacity: 0.55;
transform:
translate(-105%, -50%)
scale(0.7);
}
.act-team-slide.next-1 {
opacity: 0.55;
transform:
translate(5%, -50%)
scale(0.7);
}
.act-team-slide.previous-2,
.act-team-slide.next-2 {
opacity: 0;
pointer-events: none;
}
.act-team-basic-info h2 {
font-size: 27px;
}
.act-team-counter span {
font-size: 34px;
}
.act-team-modal {
padding: 12px;
}
.act-team-modal-image {
min-height: 340px;
}
.act-team-modal-info h2 {
font-size: 38px;
}
}
/*========================================
FORCE FULL WIDTH TEAM SECTION
PASTE AT VERY END OF CSS
========================================*/
html,
body {
margin: 0 !important;
padding: 0 !important;
width: 100% !important;
min-height: 100% !important;
overflow-x: hidden !important;
}
/* Parent section ko full screen karo */
.act-team-showcase {
position: relative !important;
width: 100vw !important;
max-width: none !important;
min-height: auto !important;
margin: 0 !important;
padding: 0 !important;
left: 50% !important;
right: 50% !important;
margin-left: -50vw !important;
margin-right: -50vw !important;
display: block !important;
}
/* Inner wrapper ka centered box khatam */
.act-team-wrapper {
width: 100% !important;
max-width: none !important;
min-height: auto !important;
margin: 0 !important;
padding: 40px 50px 25px !important;
border-left: 0 !important;
border-right: 0 !important;
display: grid !important;
align-items: center !important;
}
/* Agar Bootstrap container section ko control kar raha hai */
.container .act-team-showcase,
.container-fluid .act-team-showcase {
width: 100vw !important;
max-width: none !important;
margin-left: calc(50% - 50vw) !important;
margin-right: calc(50% - 50vw) !important;
}
/* Team section ke direct parent ki spacing remove */
main:has(.act-team-showcase),
section:has(.act-team-showcase),
div:has(> .act-team-showcase) {
margin-top: 0 !important;
margin-bottom: 0 !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
}
/*==================================
WHY TEAM
==================================*/
.why-team{
background:var(--section);
padding:100px 0;
}
.why-team-image img{
border-radius:20px;
border:1px solid var(--border);
box-shadow:var(--shadow);
}
.why-team h2{
color:var(--white);
font-size:44px;
font-weight:700;
margin:20px 0;
}
.why-team p{
color:var(--text-light);
line-height:1.9;
margin-bottom:35px;
}
.why-list{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:18px;
}
.why-list div{
color:var(--white);
font-size:17px;
}
.why-list i{
color:var(--primary);
margin-right:10px;
}
/*==================================
TEAM CTA
==================================*/
.team-cta{
background:var(--secondary);
padding:90px 0;
}
.cta-box{
background:linear-gradient(180deg,#1E2329,#242A33);
border:1px solid var(--border);
border-radius:20px;
padding:70px 40px;
width:90%;
margin:auto;
text-align:center;
box-shadow:var(--shadow);
}
.cta-box h2{
color:var(--white);
font-size:52px;
font-weight:700;
margin-bottom:20px;
}
.cta-box p{
color:var(--text-light);
font-size:18px;
max-width:760px;
margin:0 auto 35px;
line-height:1.8;
}
/* CTA Button */
.cta-btn{
display:inline-block;
background:var(--primary);
color:#181A20;
padding:16px 42px;
border-radius:8px;
text-decoration:none;
font-size:18px;
font-weight:600;
transition:var(--transition);
}
.cta-btn:hover{
background:#F8D33A;
color:#181A20;
transform:translateY(-3px);
}
/* Footer Button */
.footer-btn{
display:inline-block;
background:var(--primary);
color:#181A20;
border:2px solid var(--primary);
padding:16px 42px;
border-radius:8px;
text-decoration:none;
font-size:18px;
font-weight:600;
transition:var(--transition);
}
.footer-btn:hover{
background:#F8D33A;
border-color:#F8D33A;
color:#181A20;
}
/*==================================
Responsive
==================================*/
@media(max-width:991px){
.section-title h2{
font-size:38px;
}
.why-list{
grid-template-columns:1fr;
}
}
@media(max-width:768px){
.team-card{
padding:30px 20px;
}
.team-avatar{
width:75px;
height:75px;
font-size:28px;
}
.section-title h2{
font-size:30px;
}
.cta-box{
width:100%;
padding:50px 25px;
}
.cta-box h2{
font-size:36px;
}
}
/*=========================================
FAQ SECTION - BINANCE STYLE
=========================================*/
.faq-section{
padding:20px 0;
background:var(--secondary);
}
/* Left */
.faq-tag{
color:var(--primary);
font-weight:600;
letter-spacing:2px;
text-transform:uppercase;
}
.faq-title{
font-size:50px;
font-weight:700;
color:var(--white);
margin:15px 0;
}
.faq-text{
color:var(--text-light);
font-size:17px;
line-height:1.9;
margin-bottom:40px;
}
/* Accordion */
.accordion-item{
background:transparent;
border:none;
border-bottom:1px solid var(--border);
}
.accordion-button{
background:transparent;
color:var(--white);
box-shadow:none;
font-size:18px;
font-weight:600;
padding:25px 0;
}
.accordion-button:not(.collapsed){
background:transparent;
color:var(--primary);
}
.accordion-button:focus{
box-shadow:none;
}
.accordion-button::after{
filter:invert(1);
}
.accordion-body{
color:var(--text-light);
line-height:1.9;
padding-bottom:25px;
}
/*=========================================
FAQ INFO BOX
=========================================*/
.faq-info-box{
background:var(--card);
border:1px solid var(--border);
border-radius:18px;
padding:20px 24px;
color:var(--white);
box-shadow:var(--shadow);
}
.info-small{
color:var(--primary);
letter-spacing:2px;
text-transform:uppercase;
font-size:14px;
}
.faq-info-box h3{
font-size:38px;
margin:20px 0;
font-weight:700;
color: #F0B90B;
}
.faq-info-box p{
color:var(--text-light);
line-height:1.9;
}
.faq-info-box hr{
border-color:var(--border);
margin:30px 0;
}
.info-item{
color:var(--white);
margin-bottom:18px;
}
.gold-btn{
display:inline-block;
margin-top:25px;
padding:14px 35px;
background:var(--primary);
color:#181A20;
border-radius:8px;
text-decoration:none;
font-weight:600;
transition:var(--transition);
}
.gold-btn:hover{
background:#F8D33A;
color:#181A20;
}
/*=========================================
CONTACT INFO
=========================================*/
.contact-modern-section{
width:100%;
background:#171b22;
padding:15px 28px;
}
.contact-modern-container{
width:100%;
max-width:1500px;
margin:0 auto;
}
.contact-modern-heading{
max-width:850px;
margin:0 auto 38px;
text-align:center;
}
.contact-modern-heading .section-tag{
display:inline-block;
margin-bottom:10px;
color:#F0B90B;
font-size:14px;
font-weight:800;
letter-spacing:3px;
}
.contact-modern-heading h2{
margin:0 0 14px;
color:#fff;
font-size:clamp(42px,5vw,68px);
line-height:1.08;
font-weight:700;
margin-top:-40px;
}
.contact-modern-heading h2 span{
color:#F0B90B;
}
.contact-modern-heading p{
max-width:700px;
margin:0 auto;
color:#B7BDC6;
font-size:18px;
line-height:1.7;
}
.contact-modern-grid{
display:grid;
grid-template-columns:minmax(330px,.8fr) minmax(500px,1.2fr);
gap:24px;
align-items:stretch;
}
.contact-details-panel{
display:grid;
gap:16px;
}
.contact-mini-card{
min-height:125px;
display:flex;
align-items:center;
gap:18px;
padding:22px;
background:#232933;
border:1px solid rgba(255,255,255,.08);
border-radius:18px;
transition:.3s ease;
}
.contact-mini-card:hover{
transform:translateX(6px);
border-color:rgba(240,185,11,.55);
}
.contact-mini-icon{
width:58px;
height:58px;
flex-shrink:0;
display:flex;
align-items:center;
justify-content:center;
border-radius:16px;
background:#F0B90B;
color:#181A20;
font-size:22px;
}
.contact-mini-card span{
display:block;
margin-bottom:5px;
color:#fff;
font-size:19px;
font-weight:700;
}
.contact-mini-card a,
.contact-mini-card p{
margin:0;
color:#B7BDC6;
font-size:16px;
line-height:1.5;
text-decoration:none;
}
.contact-mini-card a:hover{
color:#F0B90B;
}
.contact-main-btn{
min-height:58px;
display:flex;
align-items:center;
justify-content:center;
gap:10px;
padding:15px 20px;
background:#F0B90B;
color:#181A20;
border-radius:12px;
font-size:17px;
font-weight:750;
text-decoration:none;
transition:.3s ease;
}
.contact-main-btn:hover{
background:#FFD233;
color:#181A20;
transform:translateY(-3px);
}
.contact-map-panel{
position:relative;
min-height:440px;
overflow:hidden;
border-radius:22px;
border:1px solid rgba(240,185,11,.25);
background:#232933;
}
.contact-map-panel iframe{
width:100%;
height:100%;
min-height:440px;
border:0;
display:block;
filter:grayscale(.15) contrast(1.05);
}
.map-location-badge{
position:absolute;
left:20px;
bottom:20px;
display:flex;
align-items:center;
gap:12px;
padding:14px 18px;
background:rgba(18,21,27,.92);
border:1px solid rgba(240,185,11,.4);
border-radius:14px;
backdrop-filter:blur(10px);
}
.map-location-badge i{
color:#F0B90B;
font-size:21px;
}
.map-location-badge strong,
.map-location-badge span{
display:block;
}
.map-location-badge strong{
color:#fff;
font-size:15px;
}
.map-location-badge span{
color:#B7BDC6;
font-size:13px;
}
.contact-bottom-bar{
margin-top:24px;
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:14px;
}
.contact-bottom-bar div{
min-height:70px;
display:flex;
align-items:center;
justify-content:center;
gap:11px;
padding:16px;
background:#232933;
border:1px solid rgba(255,255,255,.07);
border-radius:14px;
color:#B7BDC6;
font-size:15px;
}
.contact-bottom-bar i{
color:#F0B90B;
font-size:18px;
}
@media(max-width:950px){
.contact-modern-grid{
grid-template-columns:1fr;
}
.contact-map-panel,
.contact-map-panel iframe{
min-height:380px;
}
}
@media(max-width:650px){
.contact-modern-section{
padding:45px 16px;
}
.contact-bottom-bar{
grid-template-columns:1fr;
}
.contact-mini-card{
min-height:auto;
}
.contact-modern-heading h2{
font-size:40px;
}
}
/*=========================================
CONTACT FORM
=========================================*/
.contact-form-section{
padding:0px 0;
background:var(--section);
}
.contact-image img{
width:100%;
height:540px;
object-fit:cover;
border-radius:20px;
border:1px solid var(--border);
box-shadow:var(--shadow);
}
.contact-form-box{
background:var(--card);
border:1px solid var(--border);
border-radius:20px;
padding:50px;
}
.contact-form-box .form-control{
background:#2B3139;
border:1px solid var(--border);
color:var(--white);
padding:16px;
border-radius:10px;
}
.contact-form-box .form-control:focus{
border-color:var(--primary);
background:#2B3139;
color:var(--white);
box-shadow:none;
}
.contact-form-box input::placeholder,
.contact-form-box textarea::placeholder{
color:var(--gray);
}
.contact-form-box textarea{
resize:none;
}
.course-select{
width:100%;
padding:14px 18px;
background:#2B3139;
color:#fff;
border:1px solid goldenrod;
border-radius:8px;
font-size:16px;
cursor:pointer;
appearance:auto;
-webkit-appearance:auto;
-moz-appearance:auto;
}
.contact-btn{
background:var(--primary);
color:#181A20;
border:none;
padding:15px 40px;
border-radius:8px;
font-size:17px;
font-weight:600;
transition:var(--transition);
}
.contact-btn:hover{
background:#F8D33A;
color:#181A20;
}
/*=========================================
CONTACT CTA
=========================================*/
.contact-cta{
background:var(--secondary);
padding:100px 0;
}
.contact-cta .cta-box{
background:linear-gradient(180deg,#1E2329,#242A33);
border:1px solid var(--border);
border-radius:20px;
padding:70px 40px;
text-align:center;
}
.contact-cta .section-tag{
color:var(--primary);
letter-spacing:3px;
text-transform:uppercase;
font-weight:600;
}
.contact-cta h2{
color:var(--white);
font-size:52px;
font-weight:700;
margin:20px 0;
}
.contact-cta p{
color:var(--text-light);
max-width:700px;
margin:0 auto 40px;
line-height:1.8;
}
.contact-cta .cta-btn{
display:inline-block;
background:var(--primary);
color:#181A20;
padding:16px 42px;
border-radius:8px;
text-decoration:none;
font-weight:600;
transition:var(--transition);
}
.contact-cta .cta-btn:hover{
background:#F8D33A;
color:#181A20;
}
/*=========================================
Responsive
=========================================*/
@media(max-width:991px){
.contact-card{
margin-bottom:20px;
}
.contact-image{
margin-bottom:40px;
}
.contact-image img{
height:300px;
}
.contact-form-box{
padding:35px;
}
}
/*=========================================
HOME FOOTER - BINANCE STYLE
=========================================*/
.footer {
width: 100%;
background: #181b21;
color: #c7cfdd;
}
/*====================================
FOOTER MAIN CONTAINER
====================================*/
.footer-container {
width: calc(100% - 120px);
max-width: 1600px;
margin: 0 auto;
padding:0px;
display: grid;
grid-template-columns:
minmax(300px, 1.25fr)
minmax(160px, 0.65fr)
minmax(250px, 0.9fr)
minmax(300px, 1fr);
column-gap: 55px;
align-items: start;
}
/*====================================
COMMON BOX
====================================*/
.footer-box {
min-width: 0;
}
.footer-box h3 {
margin: 0 0 24px;
color: #ffffff;
font-size: 22px;
font-weight: 600;
line-height: 1.2;
}
.footer-box p {
margin: 0;
color: #c7cfdd;
font-size: 17px;
line-height: 1.75;
}
/*====================================
ABOUT
====================================*/
.footer-about {
max-width: 410px;
}
.footer-about > p {
margin-bottom: 26px;
}
/*====================================
SOCIAL ICONS
====================================*/
.social-icons {
display: flex;
align-items: center;
gap: 14px;
}
.social-icons a {
width: 48px;
height: 48px;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid rgba(240, 185, 11, 0.55);
border-radius: 50%;
background: rgba(240, 185, 11, 0.06);
color: #f0b90b;
font-size: 20px;
text-decoration: none;
transition: 0.3s ease;
}
.social-icons a i {
display: block;
color: inherit;
font-size: inherit;
line-height: 1;
}
.social-icons a:hover {
background: #f0b90b;
border-color: #f0b90b;
color: #181a20;
transform: translateY(-3px);
}
/*====================================
LINKS
====================================*/
.footer .footer-container .footer-links {
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
justify-content: flex-start !important;
text-align: left !important;
margin: 0 !important;
padding: 0 !important;
}
/* Quick Links heading */
.footer .footer-container .footer-links h3 {
position: relative !important;
display: block !important;
width: auto !important;
margin: 0 0 40px 0 !important;
padding: 0 0 16px 0 !important;
text-align: left !important;
align-self: flex-start !important;
transform: none !important;
}
/* Heading ke neeche line */
.footer .footer-container .footer-links h3::after {
content: "" !important;
position: absolute !important;
left: 0 !important;
right: auto !important;
bottom: 0 !important;
width: 90px !important;
height: 3px !important;
margin: 0 !important;
transform: none !important;
background: #f0b90b !important;
}
/* Quick Links list */
.footer .footer-container .footer-links ul {
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
text-align: left !important;
}
/* List items */
.footer .footer-container .footer-links ul li {
display: block !important;
width: 100% !important;
margin: 0 0 22px 0 !important;
padding: 0 !important;
text-align: left !important;
}
/* Links and arrows */
.footer .footer-container .footer-links ul li a {
display: inline-flex !important;
align-items: center !important;
justify-content: flex-start !important;
gap: 10px !important;
margin: 0 !important;
padding: 0 !important;
text-align: left !important;
transform: none;
}
.footer .footer-container .footer-links ul li a::before {
content: "\f105" !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 12px !important;
min-width: 12px !important;
margin: 0 !important;
padding: 0 !important;
font-family: "Font Awesome 6 Free" !important;
font-weight: 900 !important;
color: #f0b90b !important;
}
/* Hover */
.footer .footer-container .footer-links ul li a:hover {
color: #f0b90b !important;
transform: translateX(4px) !important;
}
/*====================================
CONTACT
====================================*/
.footer-contact {
max-width: 360px;
justify-self: end;
}
.footer-contact p {
display: grid;
grid-template-columns: 24px minmax(0, 1fr);
column-gap: 14px;
align-items: start;
margin-bottom: 18px;
}
.footer-contact p:last-child {
margin-bottom: 0;
}
.footer-contact p i {
color: #f0b90b;
font-size: 18px;
line-height: 1;
text-align: center;
margin-top: 6px;
}
.footer-contact p span {
min-width: 0;
overflow-wrap: anywhere;
}
/*=========================
FOOTER MAP
=========================*/
.footer-map {
width: 100%;
height: 400px;
margin-top: -50px;
overflow: hidden;
border-radius: 12px;
border: 1px solid rgba(240, 185, 11, .25);
box-shadow: 0 10px 25px rgba(0, 0, 0, .3);
}
.footer-map iframe {
display: block;
width: 100%;
height: 100%;
border: none;
}
/* Footer bottom */
.footer-bottom {
width: 100%;
min-height: 60px;
display: flex;
justify-content: center;
align-items: center;
border-top: 1px solid rgba(255, 255, 255, .08);
margin: 0;
padding: 0 15px;
}
.footer-bottom p {
width: 100%;
margin: 0;
padding: 0;
text-align: center;
color: #8f9aae;
font-size: 16px;
}
/* Tablet */
@media (max-width: 991px) {
.footer-container {
padding: 45px 0 40px;
grid-template-columns: repeat(2, minmax(0, 1fr));
column-gap: 50px;
row-gap: 42px;
}
.footer-about,
.footer-contact {
max-width: 100%;
}
.footer-contact {
justify-self: start;
}
.footer-map {
margin-top: 0; /* Important */
height: 300px;
}
}
/* Mobile */
@media (max-width: 600px) {
.footer-container {
padding: 38px 15px 34px;
grid-template-columns: 1fr;
row-gap: 34px;
}
.footer-box h3 {
margin-bottom: 18px;
font-size: 24px;
}
.footer-box ul li {
margin-bottom: 12px;
}
.social-icons {
gap: 11px;
}
.social-icons a {
width: 44px;
height: 44px;
font-size: 18px;
}
.footer-map {
width: 100%;
height: 250px;
margin-top: 0; /* Negative margin removed */
margin-bottom: 25px;
border-radius: 12px;
}
.footer-map iframe {
width: 100% !important;
height: 250px !important;
}
.footer-bottom {
min-height: auto;
height: auto;
padding: 18px 15px;
text-align: center;
}
.footer-bottom p {
font-size: 14px;
line-height: 1.6;
}
}
/*====================================
SOCIAL ICONS
====================================*/
.social-icons {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 18px;
}
.social-icons a {
width: 52px;
height: 52px;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid rgba(240, 185, 11, 0.45);
border-radius: 50%;
background: rgba(240, 185, 11, 0.07);
color: var(--primary);
font-size: 21px;
text-decoration: none;
transition: var(--transition);
}
.social-icons a:hover {
background: var(--primary);
color: #181a20;
border-color: var(--primary);
transform: translateY(-4px);
}
/*====================================
QUICK LINKS AND COURSES
====================================*/
.footer-links,
.footer-courses {
padding-left: 0;
}
.footer-box ul {
list-style: none;
padding: 0;
margin: 0;
}
.footer-box ul li {
margin-bottom: 18px;
}
.footer-box ul li:last-child {
margin-bottom: 0;
}
.footer-box ul li a {
display: inline-block;
color: var(--text-light);
font-size: 17px;
line-height: 1.5;
text-decoration: none;
transition: var(--transition);
}
.footer-box ul li a:hover {
color: var(--primary);
transform: translateX(5px);
}
/*====================================
CONTACT COLUMN
====================================*/
.footer-contact {
width: 100%;
max-width: 340px;
justify-self: end;
}
.footer-contact p {
display: grid;
grid-template-columns: 30px minmax(0, 1fr);
align-items: start;
column-gap: 15px;
margin-bottom: 22px;
line-height: 1.65;
}
.footer-contact p:last-child {
margin-bottom: 0;
}
.footer-contact p i {
color: var(--primary);
font-size: 18px;
text-align: center;
margin-top: 6px;
}
.footer-contact p span {
min-width: 0;
overflow-wrap: anywhere;
}
/*====================================
FOOTER DIVIDER
====================================*/
.footer hr {
width: 100%;
height: 1px;
border: 0;
margin: 0;
background: rgba(255, 255, 255, 0.07);
}
/*====================================
COPYRIGHT
====================================*/
.copyright {
width: calc(100% - 80px);
max-width: 1420px;
margin: 0 auto;
padding: 30px 20px;
color: #8f9aae;
font-size: 16px;
line-height: 1.5;
text-align: center;
}
/*====================================
LARGE TABLETS
====================================*/
@media (max-width: 1200px) {
.footer-container {
width: calc(100% - 60px);
grid-template-columns: 1.2fr 0.7fr 1fr 1fr;
column-gap: 30px;
}
.footer-box h3 {
font-size: 27px;
}
.footer-box p,
.footer-box ul li a {
font-size: 16px;
}
}
/*====================================
TABLETS
====================================*/
@media (max-width: 991px) {
.footer-container {
width: calc(100% - 48px);
padding: 65px 0 55px;
grid-template-columns: repeat(2, minmax(0, 1fr));
column-gap: 60px;
row-gap: 55px;
}
.footer-about {
max-width: 100%;
}
.footer-contact {
max-width: 100%;
justify-self: start;
}
.copyright {
width: calc(100% - 48px);
}
}
/*====================================
MOBILE
====================================*/
@media (max-width: 600px) {
.footer-container {
width: calc(100% - 36px);
padding: 55px 0 45px;
grid-template-columns: 1fr;
row-gap: 42px;
}
.footer-box h3 {
font-size: 26px;
margin-bottom: 22px;
}
.footer-box p,
.footer-box ul li a {
font-size: 16px;
}
.footer-box ul li {
margin-bottom: 15px;
}
.social-icons {
gap: 12px;
}
.social-icons a {
width: 46px;
height: 46px;
font-size: 18px;
}
.footer-contact p {
grid-template-columns: 26px minmax(0, 1fr);
column-gap: 12px;
margin-bottom: 18px;
}
.copyright {
width: calc(100% - 36px);
padding: 25px 0;
font-size: 14px;
}
}
/*=========================================
CTA BUTTONS
=========================================*/
.cta-buttons{
display:flex;
justify-content:center;
gap:20px;
margin-top:30px;
}
.theme-btn{
background:var(--primary);
color:#181A20;
padding:12px 28px;
border-radius:8px;
font-weight:600;
text-decoration:none;
transition:var(--transition);
display: inline-block;
margin-bottom: 20px;
}
.theme-btn:hover{
background:#F8D33A;
color:#181A20;
}
.gold-text{
color:var(--primary);
font-weight:700;
}
.bold-text{
font-weight:700;
color:var(--white);
}
/*=========================================
ABOUT BOXES
=========================================*/
.about-features{
padding:100px 0;
background:var(--secondary);
}
.about-box{
background:var(--card);
border:1px solid var(--border);
border-top:4px solid var(--primary);
border-radius:20px;
padding:40px 30px;
height:100%;
box-shadow:var(--shadow);
transition:var(--transition);
}
.about-box:hover{
transform:translateY(-10px);
border-color:var(--primary);
}
.about-box .number{
font-size:32px;
font-weight:700;
color:var(--primary);
display:block;
margin-bottom:20px;
}
.about-box h4{
color:var(--primary);
font-size:15px;
margin-bottom:12px;
text-transform:uppercase;
}
.about-box h3{
color:var(--white);
font-size:22px;
margin-bottom:20px;
}
.about-box p{
color:var(--text-light);
line-height:1.8;
}
/*=========================================
LEARNING PROCESS
=========================================*/
.process-section{
padding:100px 0;
margin-top:80px;
margin-bottom:120px;
background:var(--section);
}
.process-wrapper{
display:flex;
justify-content:space-between;
align-items:flex-start;
position:relative;
margin-top:30px;
}
.process-wrapper::before{
content:"";
position:absolute;
top:35px;
left:8%;
width:84%;
height:2px;
background:var(--primary);
}
.process-item{
width:23%;
text-align:center;
position:relative;
z-index:2;
}
.process-number{
width:70px;
height:70px;
background:var(--primary);
color:#181A20;
border-radius:50%;
display:flex;
justify-content:center;
align-items:center;
margin:auto;
margin-bottom:25px;
font-size:24px;
font-weight:700;
}
.process-item h4{
color:var(--white);
font-size:24px;
margin-bottom:15px;
}
.process-item p{
color:var(--text-light);
line-height:1.8;
}
.hero-section p{
color:#B7BDC6 !important;
}
.info-card h3{
color:#F0B90B;
font-size:36px;
font-weight:700;
}
.btn,
.btn-primary,
.theme-btn,
.contact-btn,
.btn-course{
box-shadow:none !important;
}
/*=========================
LEARN MORE BUTTON
=========================*/
.learn-btn{
display:inline-flex;
align-items:center;
gap:3px;
margin-top:-20px;
padding:10px 15px;
background:#F0B90B;
color:#181A20;
border:2px solid #F0B90B;
border-radius:8px;
font-size:16px;
font-weight:600;
text-decoration:none;
transition:all .3s ease;
}
.learn-btn:hover{
background:transparent;
color:#F0B90B;
border-color:#F0B90B;
}
.learn-btn i{
transition:.3s;
}
.learn-btn:hover i{
transform:translateX(5px);
}
/*=====================================
TECHNOLOGY SERVICES
======================================*/
.technology-services{
padding:120px 0;
background:#181A20;
}
.section-heading{
max-width:750px;
margin:auto;
}
.section-heading .section-tag{
color:#F0B90B;
letter-spacing:2px;
text-transform:uppercase;
font-weight:700;
font-size:20px;
margin-top:20px;
margin-bottom:-50px;
}
.section-heading h2{
color:#ffffff;
font-size:56px;
font-weight:700;
margin:-15px 0;
margin-bottom:30px;
}
.section-heading h2 span{
color:#F0B90B;
font-size:60px;
font-weight:700;
}
.section-heading p{
color:#B7BDC6;
font-size:18px;
line-height:1.8;
margin-top:-20px;
}
/*========================*/
.tech-card{
background:#242A33;
border:1px solid #2B3139;
border-radius:20px;
padding:45px 35px;
height:100%;
transition:.35s;
position:relative;
overflow:hidden;
}
.tech-card::before{
content:"";
position:absolute;
width:100%;
height:4px;
left:0;
top:0;
background:#F0B90B;
transform:scaleX(0);
transition:.35s;
}
.tech-card:hover{
transform:translateY(-12px);
border-color:#F0B90B;
box-shadow:0 20px 45px rgba(240,185,11,.20);
}
.tech-card:hover::before{
transform:scaleX(1);
}
.tech-icon{
width:80px;
height:80px;
background:#F0B90B;
color:#181A20;
border-radius:18px;
display:flex;
justify-content:center;
align-items:center;
font-size:32px;
margin-bottom:30px;
}
.tech-card h3{
color:#ffffff;
font-size:26px;
margin-bottom:18px;
font-weight:700;
}
.tech-card p{
color:#B7BDC6;
line-height:1.8;
margin:0;
}
/*=====================================
WORKING PROCESS
======================================*/
.actProvideRoadmap81Section{
padding:0px 0 0px;
background:#1E2329;
overflow:hidden;
}
.actProvideRoadmap81Section .actProvideRoadmap81Heading{
text-align:center;
margin-bottom:35px;
}
.actProvideRoadmap81Section .actProvideRoadmap81Heading h2{
font-size:60px;
font-weight:700;
color:#FFFFFF;
margin-bottom:18px;
line-height:1.2;
}
.actProvideRoadmap81Section .actProvideRoadmap81Heading h2 span{
color:#F0B90B;
}
.actProvideRoadmap81Section .actProvideRoadmap81Heading p{
max-width:750px;
margin:0 auto;
font-size:17px;
line-height:1.8;
color:#B7BDC6;
}
/*=====================================
TIMELINE
======================================*/
.actProvideRoadmap81Timeline{
display:flex;
justify-content:space-between;
align-items:flex-start;
position:relative;
gap:10px;
flex-wrap:wrap;
margin-top:20px;
}
/*=====================================
GOLD LINE
======================================*/
.actProvideRoadmap81Line{
position:absolute;
top:40px;
left:8%;
width:84%;
height:3px;
background:#F0B90B;
z-index:1;
}
/*=====================================
TIMELINE ITEM
======================================*/
.actProvideRoadmap81Item{
position:relative;
z-index:2;
flex:1;
min-width:250px;
text-align:center;
}
/*=====================================
CIRCLE
======================================*/
.actProvideRoadmap81Circle{
width:80px;
height:80px;
margin:auto;
background:#F0B90B;
color:#181A20;
border-radius:50%;
display:flex;
justify-content:center;
align-items:center;
font-size:24px;
font-weight:700;
box-shadow:0 0 25px rgba(240,185,11,.35);
}
/*=====================================
CARD
======================================*/
.actProvideRoadmap81Card{
margin-top:35px;
background:#242A33;
border:1px solid #2B3139;
border-radius:20px;
padding:35px 25px;
min-height:300px;
height:auto;
display:flex;
flex-direction:column;
align-items:center;
justify-content:flex-start;
box-shadow:none;
transition:
transform .35s ease,
box-shadow .35s ease,
border-color .35s ease;
}
.actProvideRoadmap81Card:hover{
transform:translateY(-10px);
border-color:#F0B90B;
box-shadow:
0 15px 35px rgba(0,0,0,.35),
0 0 20px rgba(250,201,38,.25);
}
.actProvideRoadmap81Card i{
font-size:42px;
color:#F0B90B;
margin-bottom:20px;
}
.actProvideRoadmap81Card h3{
color:#FFFFFF;
font-size:30px;
font-weight: 600;
margin-bottom:30px;
}
.actProvideRoadmap81Card p{
color:#B7BDC6;
line-height:1.8;
}
/* Button ko card ke neeche same position par rakhega */
.actProvideRoadmap81Card .theme-btn{
margin-top:-10px;
}
/*=====================================
RESPONSIVE
======================================*/
@media(max-width:991px){
.actProvideRoadmap81Timeline{
flex-direction:column;
align-items:center;
gap:0;
}
.actProvideRoadmap81Line{
display:none;
}
.actProvideRoadmap81Item{
width:100%;
max-width:420px;
margin-bottom:40px;
}
.actProvideRoadmap81Card{
width:100%;
min-height:auto;
}
}
@media(max-width:576px){
.actProvideRoadmap81Section .actProvideRoadmap81Heading h2{
font-size:38px;
}
.actProvideRoadmap81Section .actProvideRoadmap81Heading p{
font-size:15px;
}
.actProvideRoadmap81Circle{
width:70px;
height:70px;
font-size:21px;
}
.actProvideRoadmap81Card{
padding:30px 20px;
}
}
/*=====================================
WHY CHOOSE ACT
======================================*/
.why-act{
padding:0px 0;
background:#181A20;
}
.why-act h2{
color:#fff;
font-size:52px;
font-weight:700;
margin:20px 0;
line-height:1.3;
}
.why-act h2 span{
color:#F0B90B;
}
.why-text{
color:#B7BDC6;
font-size:18px;
line-height:1.9;
margin-bottom:35px;
}
/* Feature Card */
.feature-card{
background:#242A33;
border:1px solid #2B3139;
border-radius:20px;
padding:35px;
text-align:center;
transition:.35s;
height:100%;
}
.feature-card:hover{
transform:translateY(-10px);
border-color:#F0B90B;
box-shadow:0 20px 45px rgba(240,185,11,.20);
}
.feature-card i{
font-size:45px;
color:#F0B90B;
margin-bottom:20px;
}
.feature-card h3{
color:#fff;
font-size:24px;
margin-bottom:15px;
}
.feature-card p{
color:#B7BDC6;
margin:0;
line-height:1.8;
}
/*=====================================
COMPANY STATS
======================================*/
.company-stats{
padding:80px 0;
background:#1E2329;
}
.stat-box{
padding:30px;
}
.stat-box h2{
color:#F0B90B;
font-size:60px;
font-weight:700;
margin-bottom:10px;
}
.stat-box p{
color:#B7BDC6;
font-size:18px;
}
/* Responsive */
@media(max-width:991px){
.why-act{
text-align:center;
}
.why-act .btn-act{
margin-bottom:40px;
}
.why-act h2{
font-size:40px;
}
}
@media(max-width:768px){
.stat-box h2{
font-size:42px;
}
.stat-box{
margin-bottom:30px;
}
}
/*=====================================
TECHNOLOGY LOGO SLIDER
======================================*/
.tech-slider-section{
padding:120px 0;
background:#181A20;
overflow:hidden;
}
/* Slider */
.slider{
margin-top:70px;
overflow:hidden;
position:relative;
}
.slide-track{
display:flex;
width:calc(220px * 16);
animation:scroll 30s linear infinite;
}
.slide{
width:220px;
height:140px;
margin:0 15px;
background:#242A33;
border:1px solid #2B3139;
border-radius:18px;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
transition:.35s;
}
.slide:hover{
border-color:#F0B90B;
transform:translateY(-10px);
box-shadow:0 18px 40px rgba(240,185,11,.20);
}
.slide i{
font-size:52px;
color:#F0B90B;
margin-bottom:18px;
}
.slide span{
color:#fff;
font-size:18px;
font-weight:600;
}
@keyframes scroll{
0%{
transform:translateX(0);
}
100%{
transform:translateX(calc(-220px * 8));
}
}
/*=====================================
PREMIUM FOOTER
======================================*/
.footer{
background:#181A20;
padding:90px 0 25px;
color:#fff;
border-top:1px solid #2B3139;
}
.footer-logo{
width:190px;
margin-bottom:25px;
}
.footer-text{
color:#B7BDC6;
line-height:1.9;
margin-bottom:30px;
}
.footer h4{
color:#F0B90B;
font-size:22px;
font-weight:700;
margin-bottom:25px;
}
.footer ul{
list-style:none;
padding:0;
margin:0;
}
.footer ul li{
margin-bottom:14px;
}
.footer ul li a{
color:#B7BDC6;
text-decoration:none;
transition:.3s;
}
.footer ul li a:hover{
color:#F0B90B;
padding-left:6px;
}
.footer p{
color:#B7BDC6;
margin-bottom:15px;
line-height:1.8;
}
.footer p i{
color:#F0B90B;
width:25px;
}
/* Social Icons */
.footer-social{
display:flex;
gap:15px;
margin-top:20px;
}
.footer-social a{
width:45px;
height:45px;
border-radius:50%;
background:#242A33;
border:1px solid #2B3139;
color:#F0B90B;
display:flex;
align-items:center;
justify-content:center;
text-decoration:none;
transition:.35s;
}
.footer-social a:hover{
background:#F0B90B;
color:#181A20;
transform:translateY(-5px);
}
/* Divider */
.footer hr{
border-color:#2B3139;
margin:55px 0 25px;
}
/* Bottom */
.footer-bottom{
text-align:center;
}
.footer-bottom p{
color:#848E9C;
margin:0;
}
/* Responsive */
@media(max-width:991px){
.footer{
text-align:center;
}
.footer-social{
justify-content:center;
margin-bottom:30px;
}
.footer p i{
display:block;
margin:0 auto 8px;
}
}
/*=========================================
TRADING FEATURES
=========================================*/
.trading-features{
background:#0F1115;
padding:110px 0;
}
.trade-card{
background:rgba(36,42,51,.85);
border:1px solid #2B3139;
border-radius:20px;
padding:45px 35px;
text-align:center;
transition:.4s;
height:100%;
backdrop-filter:blur(12px);
position:relative;
overflow:hidden;
}
/* Gold Glow */
.trade-card::before{
content:"";
position:absolute;
width:220px;
height:220px;
background:rgba(240,185,11,.08);
border-radius:50%;
top:-120px;
right:-120px;
transition:.4s;
}
.trade-card:hover{
transform:translateY(-12px);
border-color:#F0B90B;
box-shadow:0 20px 45px rgba(240,185,11,.20);
}
.trade-card:hover::before{
transform:scale(1.4);
}
.trade-icon{
width:90px;
height:90px;
margin:auto;
border-radius:50%;
background:#F0B90B;
color:#181A20;
display:flex;
justify-content:center;
align-items:center;
font-size:36px;
margin-bottom:30px;
}
.trade-card h3{
color:#fff;
font-size:28px;
margin-bottom:18px;
font-weight:700;
}
.trade-card p{
color:#B7BDC6;
line-height:1.9;
}
/* Section Heading */
.section-title{
color:#fff;
font-size:52px;
font-weight:700;
}
.section-title span{
color:#F0B90B;
}
/*=========================================
TRADING FEATURES PREMIUM
=========================================*/
.trading-features{
padding:120px 0;
background:#181A20;
}
.trading-left{
padding-right:50px;
}
.trading-left .section-tag{
color:#F0B90B;
letter-spacing:3px;
text-transform:uppercase;
font-weight:600;
margin-bottom:15px;
display:block;
}
.trading-left h2{
color:#fff;
font-size:56px;
font-weight:700;
line-height:1.2;
margin-bottom:25px;
}
.trading-left h2 span{
color:#F0B90B;
}
.trading-left p{
color:#B7BDC6;
font-size:18px;
line-height:1.9;
}
/* Right Side */
.feature-box{
background:#1E2329;
border-left:5px solid #F0B90B;
padding:30px;
border-radius:18px;
margin-bottom:25px;
transition:.35s;
}
.feature-box:hover{
transform:translateX(12px);
background:#242A33;
box-shadow:0 20px 40px rgba(240,185,11,.18);
}
.feature-box h3{
color:#F0B90B;
font-size:24px;
margin-bottom:12px;
}
.feature-box p{
color:#B7BDC6;
margin:0;
line-height:1.8;
}
.feature-number{
font-size:42px;
color:#F0B90B;
font-weight:700;
opacity:.2;
float:right;
}
@media(max-width:991px){
.trading-left{
padding-right:0;
margin-bottom:40px;
}
.trading-left h2{
font-size:42px;
}
.feature-box:hover{
transform:none;
}
}
/*=========================================
FOREX OVERVIEW
=========================================*/
.forex-overview{
padding:20px 0;
background:#181A20;
}
.overview-image{
position: relative;
overflow: hidden;
border-radius: 25px;
height: 700px;
}
.overview-image img{
width:auto;
height: 100%;
object-fit: cover;
object-position: center;
border-radius: 25px;
transition: .5s;
}
.overview-image:hover img{
transform: scale(1.05);
}
/* Yellow Border */
.overview-image::after{
content:"";
position:absolute;
left:20px;
bottom:20px;
width:120px;
height:120px;
border-left:5px solid #F0B90B;
border-bottom:5px solid #F0B90B;
}
/* Right */
.forex-overview h2{
font-size:52px;
font-weight:700;
color:#fff;
line-height:1.2;
margin:30px 0 20px 0;
}
.forex-overview h2 span{
color:#F0B90B;
}
.forex-overview p{
color:#B7BDC6;
line-height:1.9;
font-size:17px;
}
.overview-box{
margin-top:25px;
}
.overview-item{
display:flex;
align-items:flex-start;
gap:20px;
padding:20px;
background:#242A33;
border-radius:15px;
margin-bottom:20px;
transition:.35s;
border-left:4px solid transparent;
}
.overview-item:hover{
border-left:4px solid #F0B90B;
transform:translateX(10px);
background:#2B3139;
}
.icon{
width:65px;
height:65px;
background:#F0B90B;
border-radius:15px;
display:flex;
justify-content:center;
align-items:center;
font-size:24px;
color:#181A20;
flex-shrink:0;
}
.overview-item h4{
color:#fff;
margin-bottom:8px;
font-size:22px;
}
.overview-item p{
margin:0;
color:#B7BDC6;
font-size:15px;
}
.forex-btn{
display:inline-block;
margin-top:15px;
padding:15px 40px;
background:#F0B90B;
color:#181A20;
text-decoration:none;
font-weight:700;
border-radius:8px;
transition:.3s;
}
.forex-btn:hover{
background:#FCD535;
color:#181A20;
}
@media(max-width:991px){
.forex-overview{
text-align:center;
}
.overview-image{
margin-bottom:50px;
}
.overview-item{
text-align:left;
}
}
/* Forex Trading Course Tag */
.forex-overview .section-tag-wrap{
display:flex;
justify-content:flex-start;
align-items:center;
margin-bottom:25px;
margin:0 0 20px 5px;
}
.forex-overview .section-tag-wrap::before{
display:none !important;
}
.forex-overview .section-tag{
font-size:20px !important;
color:#F0B90B;
font-weight:700;
letter-spacing:4px;
text-transform:uppercase;
margin-bottom:-70px ;
}
/*=========================================
COURSE HIGHLIGHTS
=========================================*/
.actCourseMaster73{
padding:0px;
background:#0F1115;
}
.actCourseMaster73Title{
color:#fff;
font-size:52px;
font-weight:700;
margin:-20px 0;
}
.actCourseMaster73Title span{
color:#F0B90B;
}
.actCourseMaster73Text{
color:#B7BDC6;
max-width:700px;
margin:20px auto;
line-height:1.9;
}
/* Card */
.actCourseMaster73Card{
position:relative;
background:#1E2329;
border:1px solid #2B3139;
border-radius:20px;
padding:45px 30px;
overflow:hidden;
transition:.4s;
height:100%;
}
/* Gold Top Line */
.actCourseMaster73Card::before{
content:"";
position:absolute;
left:0;
top:0;
width:0;
height:4px;
background:#F0B90B;
transition:.4s;
}
.actCourseMaster73Card:hover::before{
width:100%;
}
.actCourseMaster73Card:hover{
transform:translateY(-12px);
border-color:#F0B90B;
box-shadow:0 20px 45px rgba(240,185,11,.20);
}
/* Number */
.actCourseMaster73Number{
position:absolute;
top:20px;
right:25px;
font-size:55px;
font-weight:700;
color:rgba(240,185,11,.08);
}
/* Icon */
.actCourseMaster73Card i{
width:75px;
height:75px;
background:#F0B90B;
color:#181A20;
border-radius:18px;
display:flex;
justify-content:center;
align-items:center;
font-size:30px;
margin-bottom:30px;
}
/* Heading */
.actCourseMaster73Card h3{
color:#fff;
font-size:26px;
margin-bottom:18px;
}
/* Paragraph */
.actCourseMaster73Card p{
color:#B7BDC6;
line-height:1.9;
}
/* Course Highlights Tag Center */
.actCourseMaster73TagWrap{
width:100%;
display:flex;
justify-content:center;
align-items:center;
margin:0 0 20px;
padding-left:0;
text-align:center;
}
/* Course Highlights Yellow Line Remove */
.actCourseMaster73TagWrap::before,
.actCourseMaster73TagWrap::after,
.actCourseMaster73Tag::before,
.actCourseMaster73Tag::after{
content:none !important;
display:none !important;
}
.actCourseMaster73Tag{
display:inline-block;
color:#F0B90B;
font-size:20px;
font-weight:700;
letter-spacing:2px;
text-transform:uppercase;
margin:0;
padding:0;
text-align:center;
}
.actCourseMaster73HeadWrap{
width:100%;
margin-bottom:25px;
}
.actCourseMaster73Heading{
text-align:center;
}
/* Responsive */
@media(max-width:991px){
.actCourseMaster73Title{
font-size:40px;
}
}
/*=========================================
TRADING ROADMAP
=========================================*/
.actRoadMap91{
background:#181A20;
padding:10px 0;
}
.actRoadMap91Title{
color:#fff;
font-size:52px;
font-weight:700;
}
.actRoadMap91Title span{
color:#F0B90B;
}
.actRoadMap91Text{
color:#B7BDC6;
max-width:700px;
margin:auto;
line-height:1.8;
margin-top:20px;
}
/* Wrapper */
.actRoadMap91Wrapper{
display:flex;
justify-content:space-between;
gap:30px;
position:relative;
margin-top:20px;
}
/* Gold Line */
.actRoadMap91Wrapper::before{
content:"";
position:absolute;
top:42px;
left:5%;
width:90%;
height:4px;
background:#F0B90B;
z-index:1;
}
.actRoadMap91Tag{
font-size:28px !important;
font-weight:700 !important;
color:#F0B90B;
letter-spacing:1px;
}
/* Box */
.actRoadMap91Box{
position:relative;
z-index:2;
width:25%;
text-align:center;
}
/* Circle */
.actRoadMap91Circle{
width:85px;
height:85px;
background:#242A33;
border:4px solid #F0B90B;
color:#F0B90B;
border-radius:50%;
display:flex;
justify-content:center;
align-items:center;
margin:auto;
font-size:28px;
font-weight:700;
transition:.4s;
}
/* Active */
.actRoadMap91Box.active .actRoadMap91Circle,
.actRoadMap91Box:hover .actRoadMap91Circle{
background:#F0B90B;
color:#181A20;
transform:scale(1.1);
box-shadow:0 15px 35px rgba(240,185,11,.35);
}
/* Heading */
.actRoadMap91Box h3{
color:#fff;
margin-top:30px;
font-size:24px;
font-weight:700;
}
/* Paragraph */
.actRoadMap91Box p{
color:#B7BDC6;
line-height:1.8;
margin-top:15px;
}
/* Responsive */
@media(max-width:991px){
.actRoadMap91Wrapper{
flex-direction:column;
}
.actRoadMap91Wrapper::before{
display:none;
}
.actRoadMap91Box{
width:100%;
margin-bottom:40px;
}
}
/*==========================
live-dashboard
==========================*/
.actLiveMkt91{
padding:15px 0;
background:#0b0b0b;
}
.actLiveMkt91Header h2 span{
color:#ffffff !important;
}
.actLiveMkt91Header p{
color:#B7BDC6;
}
.actLiveMkt91Wrapper{
display:grid;
grid-template-columns:minmax(0,2fr) minmax(300px,1fr);
gap:30px;
align-items:start;
width:100%;
}
.actLiveMkt91Chart{
width:100%;
max-width:100%;
border:1px solid rgba(240,185,11,.15);
border-radius:18px;
overflow:hidden;
background:#111;
}
.actLiveMkt91Tabs{
display:flex;
justify-content:center;
gap:15px;
flex-wrap:wrap;
margin-top:25px;
}
.actLiveMkt91Tab{
border:none;
background:#1c212b;
color:#fff;
padding:14px 28px;
border-radius:40px;
cursor:pointer;
transition:.3s;
font-size:16px;
}
.actLiveMkt91Tab.actLiveMkt91TabActive,
.actLiveMkt91Tab:hover{
background:#F0B90B;
color:#000;
}
.actLiveMkt91Right{
display:flex;
flex-direction:column;
gap:20px;
}
.actLiveMkt91Card{
background:#181A20;
border:1px solid rgba(240,185,11,.15);
border-radius:15px;
padding:18px 22px;
transition:.35s;
}
.actLiveMkt91Card h4{
color:#fff;
font-size:20px;
margin:12px 0 6px;
}
.actLiveMkt91Card p{
color:#b7bdc6;
font-size:14px;
line-height:1.6;
margin:0;
}
.actLiveMkt91Card i{
font-size:22px;
color:#F0B90B;
}
/* Button — same theme button styling */
.actLiveMkt91Btn{
display:inline-flex;
align-items:center;
justify-content:center;
padding:16px 38px;
background:#F0B90B;
color:#000;
border-radius:12px;
text-decoration:none;
font-size:18px;
font-weight:700;
transition:.3s ease;
width:fit-content;
margin-bottom:20px;
}
.actLiveMkt91Btn:hover{
background:#FCD535;
color:#000;
transform:translateY(-3px);
}
@media(max-width:991px){
.actLiveMkt91Wrapper{
grid-template-columns:1fr;
}
.actLiveMkt91Right{
margin-top:30px;
}
}
@media(max-width:576px){
.actLiveMkt91Tabs{
justify-content:center;
}
.actLiveMkt91Tab{
width:100%;
}
}
/* ===========================
PROFESSIONAL JOURNEY SECTION
=========================== */
.actProJourney82{
padding:10px 0;
background:#020812;
overflow:hidden;
}
.actProJourney82Content{
display:flex;
align-items:center;
gap:70px;
}
.actProJourney82Left{
width:55%;
}
/* Tag */
.actProJourney82TagWrap{
display:flex;
align-items:center;
justify-content:flex-start;
margin-bottom:20px;
}
.actProJourney82TagWrap::before,
.actProJourney82TagWrap::after{
content:none !important;
display:none !important;
}
.actProJourney82Tag{
color:#F0B90B;
font-size:20px;
font-weight:700;
letter-spacing:3px;
text-transform:uppercase;
}
.actProJourney82Left h2{
color:white;
font-size:60px;
line-height:1;
margin:20px 0;
font-weight: 700;
}
.actProJourney82Left h2 span{
display:block;
color:#F0B90B;
}
.actProJourney82Left>p{
color:#aeb8c5;
font-size:18px;
line-height:1.8;
max-width:600px;
}
/* Vertical Journey Line */
.actProJourney82Line{
margin-top:45px;
position:relative;
}
.actProJourney82Line:before{
content:"";
position:absolute;
left:24px;
top:0;
height:100%;
width:2px;
background:#F0B90B;
}
.actProJourney82Point{
display:flex;
gap:30px;
margin-bottom:35px;
position:relative;
}
.actProJourney82Point span{
width:50px;
height:50px;
background:#F0B90B;
color:#020812;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
font-weight:bold;
z-index:2;
}
.actProJourney82Point h4{
color:white;
font-size:22px;
margin:0 0 8px;
}
.actProJourney82Point p{
color:#9da8b5;
margin:0;
}
/* PREMIUM PERFORMANCE DASHBOARD */
.actProJourney82Chart{
background:
linear-gradient(145deg,#081827,#020812);
padding:10px;
border-radius:35px;
border:1px solid rgba(212,175,55,.35);
box-shadow:
0 20px 60px rgba(0,0,0,.5);
}
.actProJourney82Dashboard{
display:flex;
justify-content:space-between;
color:white;
}
.actProJourney82Dashboard i{
color:#F0B90B;
font-style:normal;
}
/* Circle */
.actProJourney82Circle{
width:220px;
height:220px;
margin:35px auto;
border-radius:50%;
display:flex;
justify-content:center;
align-items:center;
background:
conic-gradient(
#F0B90B 0deg 306deg,
rgba(255,255,255,.1) 306deg
);
}
.actProJourney82Inner{
width:170px;
height:170px;
border-radius:50%;
background:#020812;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
}
.actProJourney82Inner h2{
color:#F0B90B;
font-size:45px;
margin:0;
}
.actProJourney82Inner p{
color:#aaa;
margin:0;
}
/* Stats */
.actProJourney82Stats{
display:flex;
flex-direction:column;
gap:15px;
}
.actProJourney82Item{
display:flex;
justify-content:space-between;
padding:15px 20px;
background:
rgba(255,255,255,.04);
border-radius:15px;
color:#ddd;
}
.actProJourney82Item strong{
color:#F0B90B;
}
/* Signal */
.actProJourney82Signal{
margin-top:25px;
padding:15px;
text-align:center;
color:white;
background:
rgba(212,175,55,.08);
border-radius:15px;
}
.actProJourney82Signal span{
display:inline-block;
width:500px;
height:10px;
background:#d4af37;
border-radius:50%;
margin-right:10px;
box-shadow:
0 0 15px #d4af37;
}
/*=========================================
WHY CHOOSE ACT
=========================================*/
.actGuideElite57{
padding:0px 0;
background:#020812;
overflow:hidden;
}
.actGuideElite57Wrapper{
display:flex;
align-items:center;
gap:80px;
}
.actGuideElite57Text{
width:50%;
}
.actGuideElite57Btn{
display:inline-flex;
align-items:center;
margin-top:10px;
color:#181A20;
font-size:16px;
font-weight:600;
gap:3px;
padding:10px 15px;
background:#F0B90B;
border:2px solid #F0B90B;
border-radius:8px;
text-decoration:none;
transition:.3s;
}
.actGuideElite57Btn:hover{
background:gold;
color:#0B0E11;
}
.actGuideElite57Btn i{
transition:.3s;
}
.actGuideElite57Btn:hover i{
transform:translateX(5px);
color:#0B0E11;
}
/*=========================
TAG
=========================*/
.actGuideElite57TagWrap{
display:flex;
justify-content:flex-start;
align-items:center;
margin-bottom:20px;
}
/* Remove Yellow Line */
.actGuideElite57TagWrap::before,
.actGuideElite57TagWrap::after{
content:none !important;
display:none !important;
}
.actGuideElite57Tag{
display:inline-block;
color:#F0B90B;
font-size:20px;
font-weight:700;
letter-spacing:2px;
text-transform:uppercase;
margin: -20px 0px;
}
/*=========================
HEADING
=========================*/
.actGuideElite57Text h2{
color:white;
font-size:60px;
font-weight:700;
line-height:1.1;
margin:25px 0;
}
.actGuideElite57Text h2 span{
color:#F0B90B;
display:block;
}
/*=========================
DESCRIPTION
=========================*/
.actGuideElite57Text p{
color:#aab4c0;
font-size:18px;
line-height:1.5;
margin-top:-10px;
}
/*=========================
RIGHT AREA
=========================*/
.actGuideElite57Area{
width:50%;
position:relative;
height:420px;
}
/*=========================
FLOATING CARD
=========================*/
.actGuideElite57Card{
position:absolute;
display:flex;
gap:20px;
align-items:center;
background:rgba(255,255,255,.05);
backdrop-filter:blur(10px);
padding:25px;
width:330px;
border-radius:25px;
border:1px solid rgba(212,175,55,.25);
transition:.4s;
}
.actGuideElite57Card:hover{
transform:translateY(-10px);
border-color:#F0B90B;
}
/*=========================
ICON
=========================*/
.actGuideElite57Icon{
width:55px;
height:55px;
border-radius:50%;
background:#000000;
display:flex;
justify-content:center;
align-items:center;
font-weight:bold;
color:#F0B90B;
}
/*=========================
CARD CONTENT
=========================*/
.actGuideElite57Card h4{
color:white;
margin:0 0 8px;
}
.actGuideElite57Card p{
color:#9da8b5;
margin:0;
}
/*=========================
CARD POSITION
=========================*/
.actGuideElite57Card1{
top:30px;
right:40px;
}
.actGuideElite57Card2{
top:160px;
left:20px;
}
.actGuideElite57Card3{
bottom:20px;
right:20px;
}
/*=========================
RESPONSIVE
=========================*/
@media(max-width:992px){
.actGuideElite57Wrapper{
flex-direction:column;
}
.actGuideElite57Text,
.actGuideElite57Area{
width:100%;
}
}
/*=========================================
ACT LIVE MARKET EXPERIENCE
=========================================*/
.actMktExp64-sec{
position:relative;
overflow:hidden;
background:#0B0E11;
padding:10px 0;
}
/* Decorative background glow */
.actMktExp64-sec::before{
content:"";
position:absolute;
width:420px;
height:420px;
top:-180px;
left:-180px;
border-radius:50%;
background:rgba(240,185,11,.07);
filter:blur(120px);
pointer-events:none;
}
.actMktExp64-sec::after{
content:"";
position:absolute;
width:350px;
height:350px;
right:-150px;
bottom:-170px;
border-radius:50%;
background:rgba(240,185,11,.05);
filter:blur(120px);
pointer-events:none;
}
.actMktExp64-sec .container{
position:relative;
z-index:2;
}
/*=========================================
TAG
=========================================*/
.actMktExp64-tagWrap{
display:flex;
align-items:center;
margin:-10 0 20px;
}
.actMktExp64-tagWrap::before{
display:none !important;
content:none !important;
}
.actMktExp64-tag{
font-size:20px;
font-weight:700;
color:#F0B90B;
letter-spacing:4px;
text-transform:uppercase;
}
/*=========================================
MAIN HEADING
=========================================*/
.actMktExp64-heading{
max-width:600px;
margin:-10 0 22px;
color:#FFFFFF;
font-size:60px;
font-weight:750;
line-height:1.1;
letter-spacing:-1px;
}
.actMktExp64-heading span{
display:block;
color:#F0B90B;
}
/*=========================================
DESCRIPTION
=========================================*/
.actMktExp64-description{
max-width:600px;
margin:0 0 30px;
color:#B7BDC6;
font-size:17px;
line-height:1.9;
}
/*=========================================
LIST
=========================================*/
.actMktExp64-list{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:14px 20px;
margin-bottom:35px;
}
.actMktExp64-listItem{
display:flex;
align-items:center;
gap:12px;
min-height:50px;
padding:12px 15px;
color:#FFFFFF;
background:#181A20;
border:1px solid #2B3139;
border-radius:10px;
font-size:15px;
font-weight:500;
transition:.3s ease;
}
.actMktExp64-listItem:hover{
transform:translateX(5px);
border-color:rgba(240,185,11,.65);
background:#1E2329;
}
.actMktExp64-listItem i{
color:#F0B90B;
font-size:17px;
flex-shrink:0;
}
/*=========================================
BUTTON
=========================================*/
.actMktExp64-btn{
display:inline-flex;
align-items:center;
justify-content:center;
padding:14px 28px;
color:#181A20;
background:#F0B90B;
border:2px solid #F0B90B;
border-radius:8px;
font-size:16px;
font-weight:700;
text-decoration:none;
transition:.3s ease;
}
.actMktExp64-btn:hover{
color:#F0B90B;
background:gold;
color:#181A20;
}
.actMktExp64-btn i{
transition:.3s ease;
}
.actMktExp64-btn:hover i{
transform:translateX(5px);
}
/*=========================================
DASHBOARD
=========================================*/
.actMktExp64-dashboard{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:22px;
padding-left:35px;
}
/*=========================================
CARDS
=========================================*/
.actMktExp64-card{
position:relative;
overflow:hidden;
min-height:220px;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
padding:35px 25px;
text-align:center;
background:linear-gradient(
145deg,
#1E2329 0%,
#181A20 100%
);
border:1px solid #2B3139;
border-radius:18px;
transition:.35s ease;
}
.actMktExp64-card::before{
content:"";
position:absolute;
top:0;
left:0;
width:100%;
height:4px;
background:#F0B90B;
transform:scaleX(0);
transform-origin:left;
transition:.35s ease;
}
.actMktExp64-card::after{
content:"";
position:absolute;
width:120px;
height:120px;
right:-55px;
bottom:-55px;
border-radius:50%;
background:rgba(240,185,11,.07);
transition:.35s ease;
}
.actMktExp64-card:hover{
transform:translateY(-10px);
border-color:rgba(240,185,11,.7);
box-shadow:0 20px 40px rgba(0,0,0,.35);
}
.actMktExp64-card:hover::before{
transform:scaleX(1);
}
.actMktExp64-card:hover::after{
transform:scale(1.3);
}
.actMktExp64-card h4{
position:relative;
z-index:2;
margin:0 0 18px;
color:#FFFFFF;
font-size:19px;
font-weight:600;
}
.actMktExp64-card h3{
position:relative;
z-index:2;
margin:0 0 12px;
color:#F0B90B;
font-size:46px;
font-weight:800;
line-height:1;
}
.actMktExp64-card span{
position:relative;
z-index:2;
color:#B7BDC6;
font-size:14px;
line-height:1.5;
}
/*=========================================
RESPONSIVE
=========================================*/
@media(max-width:991px){
.actMktExp64-sec{
padding:60px 0;
}
.actMktExp64-heading{
font-size:48px;
}
.actMktExp64-dashboard{
padding-left:0;
margin-top:50px;
}
}
@media(max-width:767px){
.actMktExp64-heading{
font-size:40px;
}
.actMktExp64-list{
grid-template-columns:1fr;
}
.actMktExp64-dashboard{
grid-template-columns:1fr;
}
.actMktExp64-card{
min-height:190px;
}
}
@media(max-width:480px){
.actMktExp64-sec{
padding:45px 0;
}
.actMktExp64-heading{
font-size:34px;
}
.actMktExp64-description{
font-size:16px;
}
.actMktExp64-btn{
width:100%;
}
}
/* ===========================
FOREX FOOTER DESIGN
=========================== */
.forex-footer{
background:#020812;
padding:80px 0px;
border-top:
1px solid rgba(212,175,55,.25);
position:relative;
}
.forex-footer:before{
content:"";
position:absolute;
width:400px;
height:400px;
background:#F0B90B;
filter:blur(180px);
opacity:.12;
top:-100px;
right:0;
}
.footer-content{
display:grid;
grid-template-columns:
1.5fr 1fr 1fr 1fr;
gap:50px;
}
.footer-brand h2{
color:white;
font-size:35px;
}
.footer-brand h2 span{
color:#F0B90B;
}
.footer-brand p{
color:#9da8b5;
line-height:1.8;
max-width:320px;
}
.social-icons{
display:flex;
gap:12px;
margin-top:25px;
}
.social-icons a{
width:42px;
height:42px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
background:
rgba(212,175,55,.1);
border:1px solid rgba(212,175,55,.4);
color:#F0B90B;
text-decoration:none;
transition:.3s;
}
.social-icons a:hover{
background:#d4af37;
color:#020812;
}
.footer-links h3,
.footer-contact h3{
color:white;
margin-bottom:25px;
font-size:20px;
}
.footer-links p {
color: #ccc;
margin-bottom: 12px;
font-size: 14px;
}
.footer-links a{
display:block;
color:#9da8b5;
text-decoration:none;
margin-bottom:15px;
transition:.3s;
}
.footer-links a:hover{
color:#d4af37;
padding-left:8px;
}
.footer-contact p{
color:#aab4c0;
margin-bottom:15px;
}
.footer-badge{
margin-top:20px;
display:inline-block;
padding:10px 18px;
border-radius:30px;
border:1px solid #d4af37;
color:#d4af37;
font-size:13px;
}
.footer-bottom{
margin-top:60px;
padding-top:25px;
border-top:
1px solid rgba(255,255,255,.1);
display:flex;
justify-content:space-between;
color:#8d98a5;
}
.footer-bottom a{
color:#8d98a5;
margin-left:25px;
text-decoration:none;
}
.footer-bottom a:hover{
color:#d4af37;
}
@media(max-width:992px){
.footer-content{
grid-template-columns:repeat(2,1fr);
}
.footer-bottom{
flex-direction:column;
gap:20px;
}
}
@media(max-width:600px){
.footer-content{
grid-template-columns:1fr;
}
}
/*==========================
OUR SERVICES
==========================*/
/*====================================
TIMELINE
====================================*/
.timeline{
display:flex;
justify-content:center;
align-items:flex-start;
gap:30px;
flex-wrap:wrap;
padding:30px 20px;
overflow:visible;
}
/*====================================
TIMELINE ITEM
====================================*/
.timeline-item{
flex:1;
min-width:260px;
max-width:320px;
padding:12px;
overflow:visible;
}
/*====================================
TIMELINE CARD
====================================*/
.timeline-card{
position:relative;
z-index:1;
background:#232933;
border:1px solid rgba(223,163,0,.20);
border-radius:20px;
padding:30px 20px;
text-align:center;
height:auto;
transition:all .35s ease;
/* Default me shadow nahi */
box-shadow: none;
}
/*====================================
HOVER
====================================*/
.timeline-card:hover{
transform:translateY(-8px);
border-color:#DFA300;
box-shadow:
0 20px 45px rgba(0,0,0,.45),
0 0 45px rgba(223,163,0,.60);
}
/*====================================
ICON
====================================*/
.timeline-card i{
font-size:55px;
color:#DFA300;
margin-bottom:20px;
}
/*====================================
HEADING
====================================*/
.timeline-card h3{
color:#fff;
font-size:30px;
margin:15px 0 20px;
}
/*====================================
BUTTON
====================================*/
.timeline-card .theme-btn{
display:inline-block;
margin-top:15px;
}
/*==========================
live-dashboard
==========================*/
.live-dashboard{
padding:15px 0;
background:#0b0b0b;
}
.dashboard-wrapper{
display:grid;
grid-template-columns:minmax(0,2fr) minmax(300px,1fr);
gap:30px;
align-items:start;
width:100%;
}
.chart-box{
width:100%;
max-width:100%;
border:1px solid rgba(240,185,11,.15);
border-radius:18px;
overflow:hidden;
background:#111;
}
.market-tabs{
display:flex;
justify-content:center;
gap:15px;
flex-wrap:wrap;
margin-top:25px;
}
.market-item{
border:none;
background:#1c212b;
color:#fff;
padding:14px 28px;
border-radius:40px;
cursor:pointer;
transition:.3s;
font-size:16px;
}
.market-item.active,
.market-item:hover{
background:#F0B90B;
color:#000;
}
.dashboard-right{
display:flex;
flex-direction:column;
gap:20px;
}
.trade-card{
background:#181A20;
border:1px solid rgba(240,185,11,.15);
border-radius:15px;
padding:18px 22px;
transition:.35s;
}
.trade-card h4{
color:#fff;
font-size:20px;
margin:12px 0 6px;
}
.trade-card p{
color:#b7bdc6;
font-size:14px;
line-height:1.6;
margin:0;
}
.trade-card i{
font-size:22px;
color:#F0B90B;
}
@media(max-width:991px){
.dashboard-wrapper{
grid-template-columns:1fr;
}
.dashboard-right{
margin-top:30px;
}
}
@media(max-width:576px){
.market-tabs{
justify-content:center;
}
.market-item{
width:100%;
}
}
.start-btn,
.start-btn:hover,
.start-btn:focus,
.start-btn:active,
.start-btn:visited,
.start-btn:focus-visible{
background:#F0B90B !important;
color:#020812 !important;
border:none !important;
outline:none !important;
box-shadow:none !important;
transform:none !important;
text-decoration:none !important;
}
/*=========================================
LIVE CLASSROOM
=========================================*/
.live-classroom{
background:#0B0E11;
padding:0px 0;
position:relative;
overflow:hidden;
}
.live-classroom::before{
content:"";
position:absolute;
width:450px;
height:450px;
background:rgba(240,185,11,.06);
border-radius:50%;
filter:blur(140px);
top:-180px;
right:-180px;
}
.live-classroom::after{
content:"";
position:absolute;
width:350px;
height:350px;
background:rgba(240,185,11,.04);
border-radius:50%;
filter:blur(120px);
bottom:-150px;
left:-120px;
}
/*=========================================
HEADING
=========================================*/
.live-classroom .section-heading{
max-width:800px;
margin:auto;
margin-bottom:-30px;
}
.live-classroom .section-heading h2{
font-size:60px;
color:#fff;
font-weight:700;
margin:0px 0;
}
.live-classroom .section-heading span{
color:#F0B90B;
}
.live-classroom .section-heading p{
color:#B7BDC6;
line-height:1.9;
}
.learning-section .theme-btn{
display:inline-flex;
align-items:center;
justify-content:center;
padding:16px 40px;
background:#F0B90B;
color:#181A20;
font-weight:700;
text-decoration:none;
border-radius:8px;
border:2px solid #F0B90B;
transition:.35s;
}
.learning-section .theme-btn:hover{
background:gold;
color:#111;
}
/* Mobile video section fix */
@media (max-width: 768px) {
.learning-section {
position: relative;
overflow: visible;
}
.learning-section .theme-btn {
position: static !important;
top: auto !important;
left: auto !important;
right: auto !important;
bottom: auto !important;
transform: none !important;
display: flex;
width: fit-content;
max-width: calc(100% - 30px);
margin: 0 auto 18px !important;
padding: 14px 28px;
z-index: 2;
}
.learning-section .video-wrapper,
.learning-section .video-box,
.learning-section .video-container {
position: relative;
width: 100%;
height: auto;
overflow: hidden;
z-index: 1;
border-radius: 16px;
}
.learning-section video {
position: relative;
display: block;
width: 100% !important;
height: auto !important;
min-height: 230px;
object-fit: cover;
z-index: 1;
pointer-events: auto !important;
}
}
/*=========================================
VIDEO
=========================================*/
.video-wrapper{
position:relative;
margin-top: 0px;
border-radius:22px;
overflow:hidden;
border:2px solid #2B3139;
transition:.4s;
box-shadow:0 25px 60px rgba(0,0,0,.45);
}
.video-wrapper:hover{
border-color:#F0B90B;
transform:translateY(-8px);
}
.video-wrapper video{
width:100%;
height:400px;
object-fit:cover;
display:block;
}
.live-badge{
position:absolute;
top:20px;
left:50px;
z-index:5;
background:#181A20;
color:#fff;
padding:10px 18px;
border-radius:50px;
border:1px solid #F0B90B;
font-size:13px;
}
/*=========================================
WHY BOX
=========================================*/
.why-box{
position:relative;
padding-left:30px;
}
.why-box::before{
content:"";
position:absolute;
left:12px;
top:15px;
width:3px;
height:88%;
background:#F0B90B;
}
.why-box h3{
color:#fff;
font-size:40px;
margin-bottom:35px;
}
.why-box h3 span{
color:#F0B90B;
}
.why-box ul{
list-style:none;
padding:0;
margin:0;
}
.why-box li{
position:relative;
color:#fff;
padding:18px 25px;
margin-bottom:10px;
background:#181A20;
border-radius:0 15px 15px 15px;
border-left:4px solid #F0B90B;
transition:.35s;
}
.why-box li:hover{
transform:translateX(12px);
background:#20242C;
}
.why-box li i{
color:#F0B90B;
margin-right:12px;
}
/*=========================================
MENTOR
=========================================*/
.mentor-box{
margin:90px auto 50px;
max-width:850px;
background:#181A20;
border:1px solid #2B3139;
border-radius:18px;
padding:35px;
display:flex;
align-items:center;
gap:25px;
}
.mentor-icon{
width:80px;
height:80px;
border-radius:50%;
background:#F0B90B;
display:flex;
justify-content:center;
align-items:center;
font-size:30px;
color:#181A20;
}
.mentor-box h4{
color:#fff;
margin-bottom:8px;
}
.mentor-box p{
color:#B7BDC6;
margin:0;
line-height:1.8;
}
/*=========================================
BUTTON
=========================================*/
.academy-btn{
display:inline-flex;
justify-content:center;
align-items:center;
width:250px;
height:60px;
border-radius:50px;
background:#F0B90B;
color:#181A20;
text-decoration:none;
font-weight:700;
transition:.35s;
}
.academy-btn:hover{
background:#fff;
color:#181A20;
transform:translateY(-5px);
}
/*=========================================
RESPONSIVE
=========================================*/
@media(max-width:991px){
.video-wrapper video{
height:300px;
}
.why-box{
margin-top:50px;
padding-left:25px;
}
.why-box h3{
font-size:32px;
}
.mentor-box{
flex-direction:column;
text-align:center;
}
.live-classroom .section-heading h2{
font-size:40px;
}
}
/*=========================================
COURSE OVERVIEW
=========================================*/
.actSocialOverview64{
padding:10px 0;
background:#0B0E11;
position:relative;
overflow:hidden;
}
/* Background Glow */
.actSocialOverview64::before{
content:"";
position:absolute;
width:450px;
height:450px;
background:rgba(240,185,11,.06);
border-radius:50%;
filter:blur(140px);
top:-180px;
left:-150px;
}
.actSocialOverview64::after{
content:"";
position:absolute;
width:350px;
height:350px;
background:rgba(240,185,11,.04);
border-radius:50%;
filter:blur(120px);
bottom:-120px;
right:-120px;
}
/*=========================================
IMAGE
=========================================*/
.actSocialOverview64Image{
position:relative;
max-width:500px;
margin:auto;
}
.actSocialOverview64Image img{
width:100%;
border-radius:25px;
border:3px solid #F0B90B;
box-shadow:0 30px 70px rgba(240,185,11,.18);
transition:.4s;
}
.actSocialOverview64Image:hover img{
transform:scale(1.03);
}
.actSocialOverview64 .row{
align-items:center;
}
.actSocialOverview64Image img{
width:100%;
height:700px;
object-fit:cover;
border-radius:25px;
}
/*=========================================
FLOATING ICONS
=========================================*/
.actSocialOverview64FloatIcon{
position:absolute;
width:65px;
height:65px;
border-radius:18px;
background:#181A20;
color:#F0B90B;
display:flex;
justify-content:center;
align-items:center;
font-size:28px;
border:1px solid rgba(240,185,11,.25);
box-shadow:0 15px 35px rgba(0,0,0,.35);
animation:actSocialFloat64 4s ease-in-out infinite;
}
.actSocialOverview64Instagram{
top:-20px;
left:-20px;
}
.actSocialOverview64Facebook{
top:40px;
right:-25px;
animation-delay:.5s;
}
.actSocialOverview64Youtube{
bottom:60px;
left:-25px;
animation-delay:1s;
}
.actSocialOverview64Tiktok{
bottom:-20px;
right:20px;
animation-delay:1.5s;
}
@keyframes actSocialFloat64{
0%,100%{
transform:translateY(0);
}
50%{
transform:translateY(-12px);
}
}
/*=========================================
COURSE OVERVIEW TAG
=========================================*/
.actSocialOverview64TagWrap{
width:100%;
display:flex;
justify-content:flex-start;
align-items:center;
margin:0 0 20px;
padding:0;
}
/* Tag Line Remove */
.actSocialOverview64TagWrap::before,
.actSocialOverview64TagWrap::after,
.actSocialOverview64Tag::before,
.actSocialOverview64Tag::after{
content:none !important;
display:none !important;
}
.actSocialOverview64Tag{
display:inline-block;
color:#F0B90B;
font-size:20px;
font-weight:700;
letter-spacing:4px;
text-transform:uppercase;
margin:0;
padding:0;
}
/*=========================================
CONTENT
=========================================*/
.actSocialOverview64 h2{
color:#fff;
font-size:54px;
font-weight:700;
margin:20px 0;
line-height:1.2;
}
.actSocialOverview64 h2 span{
color:#F0B90B;
}
.actSocialOverview64 p{
color:#B7BDC6;
line-height:1.9;
margin-bottom:35px;
}
/*=========================================
LIST
=========================================*/
.actSocialOverview64List{
display:grid;
gap:18px;
margin-bottom:35px;
}
.actSocialOverview64Item{
display:flex;
align-items:center;
gap:15px;
background:#181A20;
border-left:4px solid #F0B90B;
padding:18px 20px;
color:#fff;
border-radius:0 12px 12px 0;
transition:.35s;
}
.actSocialOverview64Item:hover{
transform:translateX(12px);
background:#222831;
}
.actSocialOverview64Item i{
color:#F0B90B;
font-size:18px;
}
/*=========================================
BUTTON
=========================================*/
.actSocialOverview64Btn{
display:inline-flex;
justify-content:center;
align-items:center;
width:220px;
height:58px;
background:#F0B90B;
color:#181A20;
border-radius:10px;
font-weight:700;
text-decoration:none;
transition:.35s;
}
.actSocialOverview64Btn:hover{
background:#DFA300;
color:#181A20;
transform:translateY(-5px);
}
/*=========================================
STATS
=========================================*/
.actSocialOverview64Stats{
background:#181A20;
border:1px solid #2B3139;
border-radius:18px;
padding:35px 20px;
text-align:center;
transition:.4s;
height:100%;
}
.actSocialOverview64Stats:hover{
border-color:#F0B90B;
transform:translateY(-10px);
box-shadow:0 20px 45px rgba(240,185,11,.15);
}
.actSocialOverview64Stats h3{
color:#F0B90B;
font-size:42px;
font-weight:700;
margin-bottom:10px;
}
.actSocialOverview64Stats p{
color:#B7BDC6;
margin:0;
}
/*=========================================
RESPONSIVE
=========================================*/
@media(max-width:991px){
.actSocialOverview64{
padding:80px 0;
}
.actSocialOverview64 h2{
font-size:38px;
text-align:center;
}
.actSocialOverview64 p{
text-align:center;
}
.actSocialOverview64Btn{
display:flex;
margin:auto;
}
.actSocialOverview64Image{
margin-bottom:50px;
}
.actSocialOverview64FloatIcon{
width:55px;
height:55px;
font-size:22px;
}
.actSocialOverview64Stats{
margin-bottom:20px;
}
}
/*=========================================
PLATFORMS SECTION
=========================================*/
.actPlatformGrid88{
padding:10px 0;
background:#111418;
position:relative;
overflow:hidden;
}
/* Background Glow */
.actPlatformGrid88::before{
content:"";
position:absolute;
width:500px;
height:500px;
background:rgba(240,185,11,.05);
border-radius:50%;
top:-200px;
left:-180px;
filter:blur(140px);
}
.actPlatformGrid88::after{
content:"";
position:absolute;
width:400px;
height:400px;
background:rgba(240,185,11,.04);
border-radius:50%;
bottom:-180px;
right:-150px;
filter:blur(120px);
}
/*=========================================
TAG
=========================================*/
.actPlatformGrid88TagWrap{
width:100%;
display:flex;
justify-content:center;
align-items:center;
margin:0 0 20px;
padding:0;
text-align:center;
}
/* Tag Line Remove */
.actPlatformGrid88TagWrap::before,
.actPlatformGrid88TagWrap::after,
.actPlatformGrid88Tag::before,
.actPlatformGrid88Tag::after{
content:none !important;
display:none !important;
}
.actPlatformGrid88Tag{
display:inline-block;
color:#F0B90B;
font-size:20px;
font-weight:700;
letter-spacing:4px;
text-transform:uppercase;
margin-bottom:-60px;
padding:0;
text-align:center;
}
/*=========================================
HEADING
=========================================*/
.actPlatformGrid88 .actPlatformGrid88Heading{
max-width:750px;
margin:-10px auto;
margin-bottom:70px;
}
.actPlatformGrid88 h2{
color:#fff;
font-size:56px;
font-weight:700;
margin:20px 0;
}
.actPlatformGrid88 h2 span{
color:#F0B90B;
}
.actPlatformGrid88 p{
color:#B7BDC6;
line-height:1.9;
}
/*=========================================
PLATFORM CARD
=========================================*/
.actPlatformGrid88Card{
position:relative;
background:#181A20;
border:1px solid #2B3139;
border-radius:22px;
padding:70px 30px 35px;
text-align:center;
transition:.45s;
height:100%;
overflow:visible;
margin-top:-10px;
}
/* Gold Top Strip */
.actPlatformGrid88Card::before{
content:"";
position:absolute;
top:0;
left:0;
width:100%;
height:5px;
background:#F0B90B;
transform:scaleX(0);
transition:.4s;
}
.actPlatformGrid88Card:hover::before{
transform:scaleX(1);
}
.actPlatformGrid88Card:hover{
transform:translateY(-12px) rotate(-2deg);
border-color:#F0B90B;
box-shadow:0 25px 60px rgba(240,185,11,.18);
}
/*=========================================
ICON
=========================================*/
.actPlatformGrid88Icon{
position:absolute;
top:-38px;
left:50%;
transform:translateX(-50%);
width:80px;
height:80px;
border-radius:50%;
background:#F0B90B;
display:flex;
justify-content:center;
align-items:center;
font-size:34px;
color:#181A20;
border:6px solid #111418;
transition:.4s;
}
.actPlatformGrid88Card:hover .actPlatformGrid88Icon{
transform:translateX(-50%) rotate(360deg);
}
/*=========================================
TEXT
=========================================*/
.actPlatformGrid88Card h3{
color:#fff;
font-size:28px;
margin-bottom:18px;
}
.actPlatformGrid88Card p{
color:#B7BDC6;
line-height:1.8;
margin:0;
}
/*=========================================
RESPONSIVE
=========================================*/
@media(max-width:991px){
.actPlatformGrid88{
padding:80px 0;
}
.actPlatformGrid88 h2{
font-size:40px;
}
.actPlatformGrid88Card{
margin-top:45px;
}
}
/*=========================================
CAMPAIGN EXPERIENCE
=========================================*/
/*=========================================
REAL CAMPAIGN EXPERIENCE
=========================================*/
.actCampaignLab93{
padding:10px 0;
background:#0B0E11;
}
/*=========================================
SECTION HEADING
=========================================*/
.actCampaignLab93Heading{
max-width:950px;
margin:0 auto;
text-align:center;
}
/*=========================================
PRACTICAL LEARNING TAG
=========================================*/
.actCampaignLab93TagWrap{
width:100%;
display:flex;
justify-content:center;
align-items:center;
margin:0 0 20px;
padding:0;
text-align:center;
}
/* Tag ki line remove */
.actCampaignLab93TagWrap::before,
.actCampaignLab93TagWrap::after,
.actCampaignLab93Tag::before,
.actCampaignLab93Tag::after{
content:none !important;
display:none !important;
}
.actCampaignLab93Tag{
display:inline-block;
color:#F0B90B;
font-size:20px;
font-weight:700;
letter-spacing:4px;
text-transform:uppercase;
margin:0;
padding:0;
text-align:center;
}
/*=========================================
MAIN HEADING
=========================================*/
.actCampaignLab93Heading h2{
color:#fff;
font-size:56px;
font-weight:700;
line-height:1.2;
margin:20px 0;
}
.actCampaignLab93Heading h2 span{
color:#F0B90B;
}
/*=========================================
HEADING DESCRIPTION
=========================================*/
.actCampaignLab93Heading > p{
max-width:950px;
margin:0 auto;
color:#B7BDC6;
font-size:18px;
line-height:1.9;
margin-bottom:-25px;
}
/*=========================================
CAMPAIGN WRAPPER
=========================================*/
.actCampaignLab93Wrapper{
display:flex;
align-items:center;
gap:70px;
margin-top:70px;
}
/*=========================================
CAMPAIGN IMAGE
=========================================*/
.actCampaignLab93Image{
flex:1;
}
.actCampaignLab93Image img{
width:100%;
border-radius:25px;
border:2px solid #F0B90B;
box-shadow:0 30px 70px rgba(240,185,11,.15);
}
/*=========================================
CAMPAIGN CONTENT
=========================================*/
.actCampaignLab93Content{
flex:1;
display:flex;
flex-direction:column;
gap:40px;
}
/*=========================================
CAMPAIGN STEPS
=========================================*/
.actCampaignLab93Step{
display:flex;
align-items:center;
gap:25px;
position:relative;
margin-bottom:35px;
}
/*=========================================
STEP NUMBER CIRCLE
=========================================*/
.actCampaignLab93Step > span{
width:80px;
height:80px;
min-width:80px;
border-radius:50%;
background:#F0B90B;
color:#000;
font-size:34px;
font-weight:700;
display:flex;
justify-content:center;
align-items:center;
position:relative;
flex-shrink:0;
}
/* Dashed Connecting Line */
.actCampaignLab93Step:not(:last-child) > span::after{
content:"";
position:absolute;
left:50%;
top:100%;
transform:translateX(-50%);
width:2px;
height:60px;
border-left:2px dashed #F0B90B;
}
/*=========================================
STEP HEADING
=========================================*/
.actCampaignLab93Step h4{
color:#fff;
font-size:26px;
margin-bottom:10px;
}
/*=========================================
STEP PARAGRAPH
=========================================*/
.actCampaignLab93Step p{
color:#B7BDC6;
line-height:1.8;
margin:0;
}
/*=========================================
RESPONSIVE
=========================================*/
@media(max-width:991px){
.actCampaignLab93Heading h2{
font-size:40px;
}
.actCampaignLab93Wrapper{
flex-direction:column;
}
}
/*=========================================
CAREER SECTION
=========================================*/
.actCareerPath74Heading{
max-width:900px;
margin:0 auto;
text-align:center;
}
/*=========================================
TAG
=========================================*/
.actCareerPath74TagWrap{
display:flex;
justify-content:center;
align-items:center;
margin-bottom:20px;
}
/* Tag ki decorative line remove */
.actCareerPath74TagWrap::before,
.actCareerPath74TagWrap::after,
.actCareerPath74Tag::before,
.actCareerPath74Tag::after{
content:none !important;
display:none !important;
}
.actCareerPath74Tag{
display:inline-block;
color:#F0B90B;
font-size:20px;
font-weight:700;
letter-spacing:4px;
text-transform:uppercase;
margin:0;
}
/*=========================================
MAIN HEADING
=========================================*/
.actCareerPath74Heading h2{
color:#FFFFFF;
font-size:60px;
font-weight:700;
line-height:1.2;
margin:10px 0;
}
.actCareerPath74Heading h2 span{
display:block;
color:#F0B90B;
}
/*=========================================
DESCRIPTION
=========================================*/
.actCareerPath74Heading > p{
max-width:780px;
margin:0 auto;
color:#B7BDC6;
font-size:18px;
line-height:1.8;
}
/*=========================================
RESPONSIVE HEADING
=========================================*/
@media(max-width:991px){
.actCareerPath74Heading h2{
font-size:40px;
}
}
@media(max-width:576px){
.actCareerPath74Heading h2{
font-size:32px;
}
.actCareerPath74Heading > p{
font-size:16px;
}
.actCareerPath74Tag{
font-size:20px;
letter-spacing:2px;
}
}
.actCareerPath74Section{
padding:10px 0;
background:#111418;
}
/*=========================================
SECTION TAG
=========================================*/
.actCareerPath74TagWrap{
display:flex;
justify-content:center;
align-items:center;
margin-bottom:20px;
}
/* Remove decorative lines */
.actCareerPath74TagWrap::before,
.actCareerPath74TagWrap::after,
.actCareerPath74Tag::before,
.actCareerPath74Tag::after{
content:none !important;
display:none !important;
}
.actCareerPath74Tag{
color:#F0B90B;
font-size:20px;
font-weight:700;
letter-spacing:2px;
text-transform:uppercase;
margin-bottom: -15px;
}
/*=========================================
ROADMAP
=========================================*/
.actCareerPath74Roadmap{
display:flex;
justify-content:center;
align-items:center;
gap:25px;
margin-top:30px;
flex-wrap:wrap;
}
/*=========================================
BOX
=========================================*/
.actCareerPath74Box{
width:250px;
min-height:390px;
background:#181A20;
border:1px solid #2B3139;
border-radius:20px;
padding:35px 25px;
text-align:center;
transition:.4s;
display:flex;
flex-direction:column;
align-items:center;
}
.actCareerPath74Box:hover{
transform:translateY(-12px);
border-color:#F0B90B;
box-shadow:0 20px 45px rgba(240,185,11,.15);
}
/*=========================================
ICON
=========================================*/
.actCareerPath74Icon{
width:70px;
height:70px;
margin:auto;
margin-bottom:25px;
border-radius:50%;
background:#F0B90B;
color:#181A20;
font-size:24px;
display:flex;
justify-content:center;
align-items:center;
}
/*=========================================
CONTENT
=========================================*/
.actCareerPath74Box h3{
color:#fff;
margin-bottom:15px;
}
.actCareerPath74Box p{
color:#B7BDC6;
line-height:1.8;
}
/*=========================================
ARROW
=========================================*/
.actCareerPath74Arrow{
color:#F0B90B;
font-size:36px;
}
/*=========================================
RESPONSIVE
=========================================*/
@media(max-width:991px){
.actCareerPath74Roadmap{
flex-direction:column;
}
.actCareerPath74Arrow{
transform:rotate(90deg);
}
}
/*=========================================
FINAL CTA
=========================================*/
.final-cta{
padding:120px 0;
background:#0B0E11;
}
.cta-wrapper{
background:linear-gradient(135deg,#181A20,#20252E);
border:2px solid rgba(240,185,11,.18);
border-radius:30px;
padding:70px;
position:relative;
overflow:hidden;
}
.cta-wrapper::before{
content:"";
position:absolute;
width:350px;
height:350px;
background:rgba(240,185,11,.08);
border-radius:50%;
top:-180px;
right:-180px;
filter:blur(100px);
}
.final-cta h2{
color:#fff;
font-size:52px;
font-weight:700;
margin:20px 0;
}
.final-cta h2 span{
color:#F0B90B;
}
.final-cta p{
color:#B7BDC6;
line-height:1.9;
margin-bottom:30px;
}
.cta-features{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:20px;
}
.cta-features div{
color:#fff;
font-size:17px;
}
.cta-features i{
color:#F0B90B;
margin-right:10px;
}
.cta-card{
background:#111418;
border:1px solid #2B3139;
border-radius:20px;
padding:40px 30px;
transition:.4s;
}
.cta-card:hover{
border-color:#F0B90B;
transform:translateY(-8px);
}
.cta-card h3{
color:#fff;
margin-bottom:15px;
}
.cta-btn{
width:100%;
height:58px;
display:flex;
justify-content:center;
align-items:center;
background:#F0B90B;
color:#181A20;
text-decoration:none;
border-radius:10px;
font-weight:700;
margin-top:25px;
transition:.3s;
}
.cta-btn:hover{
background:#DFA300;
color:#181A20;
}
.cta-btn-outline{
width:100%;
height:58px;
display:flex;
justify-content:center;
align-items:center;
margin-top:15px;
border:2px solid #F0B90B;
color:#F0B90B;
text-decoration:none;
border-radius:10px;
font-weight:700;
transition:.3s;
}
.cta-btn-outline:hover{
background:#F0B90B;
color:#181A20;
}
@media(max-width:991px){
.final-cta{
padding:80px 0;
}
.final-cta h2{
font-size:38px;
}
.cta-wrapper{
padding:40px 25px;
}
.cta-features{
grid-template-columns:1fr;
}
.cta-card{
margin-top:40px;
}
}
/*=========================================
ORBIT SECTION
=========================================*/
.orbit-section{
padding:120px 0;
background:#0B0E11;
overflow:hidden;
}
.orbit-wrapper{
position:relative;
width:850px;
height:850px;
margin:80px auto 0;
}
/*==============================
CENTER
==============================*/
.center-circle{
position:absolute;
width:220px;
height:220px;
background:linear-gradient(135deg,#F0B90B,#D89A00);
border-radius:50%;
top:50%;
left:50%;
transform:translate(-50%,-50%);
display:flex;
justify-content:center;
align-items:center;
box-shadow:0 0 50px rgba(240,185,11,.35);
z-index:10;
transition:.4s;
}
.center-circle:hover{
transform:translate(-50%,-50%) scale(1.05);
box-shadow:0 0 80px rgba(240,185,11,.6);
}
.center-content{
text-align:center;
}
.center-content i{
font-size:48px;
color:#181A20;
margin-bottom:12px;
}
.center-content h3{
color:#181A20;
font-size:34px;
margin-bottom:6px;
font-weight:700;
}
.center-content p{
color:#181A20;
font-weight:600;
margin:0;
line-height:1.5;
}
/*==============================
ORBIT BOX
==============================*/
.orbit-box{
position:absolute;
width:180px;
text-align:center;
transition:.35s;
}
.orbit-box:hover{
transform:scale(1.08);
}
.orbit-box .icon{
width:90px;
height:90px;
margin:auto;
border-radius:50%;
background:#181A20;
border:2px solid #F0B90B;
display:flex;
justify-content:center;
align-items:center;
box-shadow:0 15px 35px rgba(240,185,11,.15);
transition:.35s;
}
.orbit-box:hover .icon{
background:#F0B90B;
transform:rotate(12deg);
}
.orbit-box i{
font-size:34px;
color:#F0B90B;
transition:.35s;
}
.orbit-box:hover i{
color:#181A20;
}
.orbit-box h4{
color:#fff;
font-size:20px;
margin-top:18px;
line-height:1.4;
}
/*==============================
POSITION
==============================*/
.top{
top:80;
left:50%;
transform:translateX(-50%);
}
.left{
top:35%;
left:0;
}
.right{
top:35%;
right:0;
}
.bottom-left{
left:140px;
bottom:170px;
}
.bottom-right{
right:140px;
bottom:170px;
}
.bottom{
left:50%;
bottom:45px;
transform:translateX(-50%);
}
/*==============================
CONNECTING LINES
==============================*/
.line{
position:absolute;
background:#F0B90B;
opacity:.25;
z-index:1;
}
.line1{
width:2px;
height:180px;
top:130px;
left:50%;
transform:translateX(-50%);
}
.line2{
width:180px;
height:2px;
top:50%;
left:150px;
}
.line3{
width:180px;
height:2px;
top:50%;
right:150px;
}
.line4{
width:2px;
height:145px;
bottom:140px;
left:41.5%;
transform:rotate(35deg);
transform-origin:top;
}
.line5{
width:2px;
height:145px;
bottom:140px;
right:41.5%;
transform:rotate(-35deg);
transform-origin:top;
}
.line6{
width:2px;
height:180px;
bottom:120px;
left:50%;
transform:translateX(-50%);
}
/*=========================================
WHY E-COMMERCE
=========================================*/
.why-act-section{
background:#0B0E11;
padding:20px 25px;
}
.why-act-container{
max-width:1400px;
margin:auto;
}
/* Heading */
.why-act-header{
text-align:center;
max-width:820px;
margin:0 auto 60px;
}
.why-tag{
display:inline-block;
color:#F0B90B;
font-size:20px;
font-weight:800;
letter-spacing:3px;
text-transform:uppercase;
margin-bottom:18px;
}
.why-act-header h2{
color:#ffffff;
font-size:clamp(42px,5vw,68px);
font-weight:700;
line-height:1.05;
letter-spacing:-2px;
margin-bottom:22px;
}
.why-act-header h2 span{
color:#F0B90B;
}
/* Grid */
.why-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:22px;
}
/* Card */
.why-card{
background:#181A20;
border:1px solid #2B3139;
border-radius:18px;
padding:35px 28px;
transition:.35s;
}
.why-card:hover{
transform:translateY(-8px);
border-color:#F0B90B;
box-shadow:0 12px 25px rgba(240,185,11,.35);
}
/* Number */
.why-number{
width:58px;
height:58px;
border-radius:50%;
background:#F0B90B;
color:#0B0E11;
font-size:22px;
font-weight:900;
display:flex;
justify-content:center;
align-items:center;
margin-bottom:22px;
}
/* Heading */
.why-card h3{
color:#ffffff;
font-size:24px;
font-weight:700;
margin-bottom:14px;
}
/* Text */
.why-card p{
color:#B7BDC6;
font-size:16px;
line-height:1.8;
}
/* Responsive */
@media(max-width:1100px){
.why-grid{
grid-template-columns:repeat(2,1fr);
}
}
@media(max-width:700px){
.why-grid{
grid-template-columns:1fr;
}
.why-act-header h2{
font-size:42px;
}
}
/*=========================================
EDITORIAL SECTION
=========================================*/
.editorial-section{
padding:0px 0;
background:#0B0E11;
}
.editorial-item{
display:flex;
justify-content:space-between;
align-items:center;
padding:10px 0;
border-bottom:1px solid rgba(255,255,255,.08);
gap:80px;
}
.editorial-item:last-child{
border-bottom:none;
}
.reverse{
flex-direction:row-reverse;
}
.editorial-title{
flex:1;
font-size:65px;
font-weight:800;
line-height:.95;
color:rgba(240,185,11,.14);
text-transform:uppercase;
transition:.4s;
}
.editorial-item:hover .editorial-title{
color:#F0B90B;
transform:translateY(-8px);
}
.editorial-content{
flex:1;
}
.editorial-content h3{
color:#fff;
font-size:34px;
margin-bottom:25px;
position:relative;
}
.editorial-content h3::after{
content:"";
width:70px;
height:3px;
background:#F0B90B;
display:block;
margin-top:15px;
}
.editorial-content p{
color:#AEB4BF;
line-height:2;
font-size:17px;
max-width:520px;
}
/* Hover */
.editorial-item{
transition:.4s;
}
.editorial-item:hover{
padding-left:20px;
padding-right:20px;
}
/* Responsive */
@media(max-width:991px){
.editorial-item{
flex-direction:column;
gap:30px;
padding:60px 0;
text-align:center;
}
.reverse{
flex-direction:column;
}
.editorial-title{
font-size:48px;
}
.editorial-content p{
max-width:100%;
}
.editorial-content h3::after{
margin:15px auto 0;
}
}
/*====================================
WHO CAN JOIN
====================================*/
.join-audience-section{
width:100%;
background:#0B0E11;
padding:35px 24px;
}
.join-audience-wrapper{
width:100%;
max-width:1380px;
margin:0 auto;
}
/* Heading */
.join-audience-heading{
margin-bottom:24px;
}
.join-audience-heading > span{
display:block;
margin-bottom:6px;
color:#F0B90B;
font-size:14px;
font-weight:800;
letter-spacing:3px;
text-transform:uppercase;
}
.join-audience-heading h2{
margin:0;
color:#EAECEF;
font-size:clamp(34px,4vw,54px);
font-weight:800;
line-height:1.05;
letter-spacing:-1.5px;
}
.join-audience-heading h2 strong{
color:#F0B90B;
font-weight:800;
}
/* Audience list */
.join-audience-list{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
border-top:1px solid #2B3139;
border-bottom:1px solid #2B3139;
}
.audience-item{
min-height:92px;
display:flex;
align-items:center;
gap:15px;
padding:20px 24px;
border-right:1px solid #2B3139;
border-bottom:1px solid #2B3139;
color:#EAECEF;
transition:
background .3s ease,
color .3s ease,
padding-left .3s ease;
}
/* Remove right border from every third item */
.audience-item:nth-child(3n){
border-right:0;
}
/* Remove bottom border from last row */
.audience-item:nth-child(n+4){
border-bottom:0;
}
.audience-item i{
width:44px;
height:44px;
flex-shrink:0;
display:flex;
align-items:center;
justify-content:center;
background:rgba(240,185,11,.10);
border:1px solid rgba(240,185,11,.35);
border-radius:50%;
color:#F0B90B;
font-size:18px;
}
.audience-item span{
font-size:18px;
font-weight:650;
}
.audience-item:hover{
background:#181A20;
color:#F0B90B;
padding-left:30px;
}
/* Responsive */
@media(max-width:850px){
.join-audience-list{
grid-template-columns:repeat(2,minmax(0,1fr));
}
.audience-item{
border-right:1px solid #2B3139;
border-bottom:1px solid #2B3139;
}
.audience-item:nth-child(3n){
border-right:1px solid #2B3139;
}
.audience-item:nth-child(2n){
border-right:0;
}
.audience-item:nth-child(n+4){
border-bottom:1px solid #2B3139;
}
.audience-item:nth-child(n+5){
border-bottom:0;
}
}
@media(max-width:520px){
.join-audience-section{
padding:28px 16px;
}
.join-audience-list{
grid-template-columns:1fr;
}
.audience-item,
.audience-item:nth-child(2n),
.audience-item:nth-child(3n){
border-right:0;
border-bottom:1px solid #2B3139;
}
.audience-item:last-child{
border-bottom:0;
}
.audience-item{
min-height:76px;
padding:16px 18px;
}
.join-audience-heading h2{
font-size:36px;
}
}
/* =====================================
E-COMMERCE COURSE CTA SECTION
===================================== */
.course-cta-section {
position: relative;
width: 100%;
overflow: hidden;
background:
radial-gradient(
circle at 10% 20%,
rgba(240, 185, 11, 0.12),
transparent 30%
),
radial-gradient(
circle at 90% 80%,
rgba(31, 76, 145, 0.14),
transparent 35%
),
linear-gradient(
135deg,
#080b0f 0%,
#0e131b 50%,
#080b0f 100%
);
padding: 0px 35px;
box-sizing: border-box;
}
/* MAIN CONTAINER */
.course-cta-container {
width: 100%;
max-width: 1380px;
margin: 0 auto;
display: grid;
grid-template-columns: minmax(0, 1.15fr) minmax(420px, 0.85fr);
align-items: center;
gap: 75px;
}
/* =====================================
LEFT CONTENT
===================================== */
.course-cta-content {
position: relative;
z-index: 2;
}
.course-small-title {
display: inline-flex;
align-items: center;
gap: 10px;
padding:top 0px;
color: #f0b90b;
font-size: 13px;
font-weight: 800;
letter-spacing: 3px;
text-transform: uppercase;
}
.course-small-title::before {
content: "";
width: 38px;
height: 2px;
background: #f0b90b;
}
/* MAIN HEADING */
.course-main-heading {
max-width: 760px;
margin: 22px 0 25px;
color: #ffffff;
font-size: clamp(40px, 4vw, 70px);
font-weight: 700;
line-height: 1.06;
letter-spacing: -2.5px;
}
.course-main-heading span {
display: block;
color: #f0b90b;
}
/* DESCRIPTION */
.course-description {
max-width: 680px;
margin: 0;
color: #aeb4bf;
font-size: 16px;
font-weight: 400;
line-height: 1.8;
}
/* BUTTONS */
.course-buttons {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 18px;
margin-top: 36px;
}
.course-enroll-btn {
min-width: 185px;
min-height: 56px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 12px;
padding: 0 28px;
background: linear-gradient(
135deg,
#f8c719,
#f0b90b
);
color: #090b0e;
font-size: 16px;
font-weight: 800;
text-decoration: none;
border: 1px solid #f0b90b;
border-radius: 10px;
box-shadow: 0 12px 35px rgba(240, 185, 11, 0.16);
transition:
transform 0.3s ease,
box-shadow 0.3s ease;
}
.course-enroll-btn:hover {
transform: translateY(-4px);
box-shadow: 0 18px 40px rgba(240, 185, 11, 0.25);
}
.course-details-btn {
min-height: 56px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0 26px;
color: #ffffff;
font-size: 15px;
font-weight: 700;
text-decoration: none;
border: 1px solid rgba(255, 255, 255, 0.14);
border-radius: 10px;
background: rgba(255, 255, 255, 0.03);
transition:
background 0.3s ease,
border-color 0.3s ease;
}
.course-details-btn:hover {
background: rgba(255, 255, 255, 0.07);
border-color: rgba(240, 185, 11, 0.55);
}
/* =====================================
LEARNING PROCESS
===================================== */
.course-process {
width: 100%;
max-width: 760px;
display: flex;
align-items: center;
gap: 18px;
margin-top: 58px;
padding-top: 30px;
border-top: 1px solid rgba(255, 255, 255, 0.09);
}
.process-item{
display: flex;
align-items: center;
gap: 18px;
flex-shrink: 0;
}
.process-number {
width: 56px;
height: 56px;
min-width: 56px;
min-height: 56px;
flex: 0 0 56px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: #f0b90b;
color: #000;
font-size: 16px;
font-weight: 800;
aspect-ratio: 1 / 1;
}
.process-item h3 {
margin: 0 0 4px;
color: #ffffff;
font-size: 15px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.8px;
}
.process-item p {
margin: 0;
color: #7f8793;
font-size: 12px;
}
.process-line {
flex: 1;
min-width: 25px;
height: 1px;
background: linear-gradient(
90deg,
rgba(240, 185, 11, 0.6),
rgba(255, 255, 255, 0.08)
);
}
/* =====================================
RIGHT COURSE PANEL
===================================== */
.course-info-panel {
position: relative;
isolation: isolate;
overflow: hidden;
width: 100%;
padding: 35px;
background:
linear-gradient(
145deg,
rgba(255, 255, 255, 0.075),
rgba(255, 255, 255, 0.025)
);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 26px;
box-shadow:
0 35px 80px rgba(0, 0, 0, 0.35),
inset 0 1px 0 rgba(255, 255, 255, 0.05);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
box-sizing: border-box;
}
/* GOLD GLOW */
.course-panel-glow {
position: absolute;
top: -120px;
right: -100px;
z-index: -1;
width: 280px;
height: 280px;
background: rgba(240, 185, 11, 0.13);
border-radius: 50%;
filter: blur(70px);
}
/* PANEL TOP */
.course-panel-top {
display: flex;
align-items: center;
justify-content: space-between;
gap: 25px;
}
.panel-label {
display: block;
margin-bottom: 10px;
color: #f0b90b;
font-size: 11px;
font-weight: 800;
letter-spacing: 2px;
}
.course-panel-top h3 {
margin: 0;
color: #ffffff;
font-size: clamp(27px, 3vw, 38px);
font-weight: 850;
line-height: 1.15;
}
.course-icon {
width: 68px;
height: 68px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
color: #090b0e;
font-size: 25px;
background: #f0b90b;
border-radius: 18px;
box-shadow: 0 15px 35px rgba(240, 185, 11, 0.18);
}
/* DIVIDER */
.course-divider {
width: 100%;
height: 1px;
margin: 30px 0;
background: linear-gradient(
90deg,
rgba(240, 185, 11, 0.55),
rgba(255, 255, 255, 0.05)
);
}
/* COURSE DETAILS */
.course-detail-list {
display: flex;
flex-direction: column;
gap: 14px;
}
.course-detail-row {
display: flex;
align-items: center;
gap: 17px;
padding: 17px 18px;
background: rgba(5, 8, 12, 0.42);
border: 1px solid rgba(255, 255, 255, 0.065);
border-radius: 14px;
transition:
transform 0.3s ease,
border-color 0.3s ease,
background 0.3s ease;
}
.course-detail-row:hover {
transform: translateX(5px);
background: rgba(12, 16, 22, 0.72);
border-color: rgba(240, 185, 11, 0.28);
}
.detail-icon {
width: 43px;
height: 43px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
color: #f0b90b;
font-size: 17px;
background: rgba(240, 185, 11, 0.09);
border: 1px solid rgba(240, 185, 11, 0.18);
border-radius: 11px;
}
.detail-content {
display: flex;
flex-direction: column;
gap: 4px;
}
.detail-content span {
color: #818995;
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.7px;
}
.detail-content strong {
color: #ffffff;
font-size: 17px;
font-weight: 750;
}
/* PANEL FOOTER */
.course-panel-footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: 15px;
margin-top: 26px;
padding-top: 23px;
border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.seats-status {
display: flex;
align-items: center;
gap: 8px;
color: #ffffff;
font-size: 12px;
font-weight: 700;
}
.status-dot {
width: 8px;
height: 8px;
background: #f0b90b;
border-radius: 50%;
box-shadow: 0 0 0 5px rgba(240, 185, 11, 0.1);
}
.batch-text {
color: #828a96;
font-size: 12px;
}
/* =====================================
RESPONSIVE DESIGN
===================================== */
@media (max-width: 1100px) {
.course-cta-section {
padding: 75px 28px;
}
.course-cta-container {
grid-template-columns: 1fr;
gap: 55px;
}
.course-cta-content {
text-align: center;
}
.course-main-heading,
.course-description {
margin-left: auto;
margin-right: auto;
}
.course-small-title {
justify-content: center;
}
.course-buttons {
justify-content: center;
}
.course-process {
margin-left: auto;
margin-right: auto;
}
.course-info-panel {
max-width: 680px;
margin: 0 auto;
}
}
@media (max-width: 700px) {
.course-cta-section {
padding: 65px 18px;
}
.course-main-heading {
font-size: 43px;
letter-spacing: -1.5px;
}
.course-description {
font-size: 16px;
line-height: 1.7;
}
.course-buttons {
flex-direction: column;
}
.course-enroll-btn,
.course-details-btn {
width: 100%;
max-width: 350px;
}
.course-process {
align-items: stretch;
flex-direction: column;
gap: 22px;
text-align: left;
}
.process-line {
width: 1px;
height: 25px;
min-width: 1px;
margin-left: 10px;
flex: none;
}
.course-info-panel {
padding: 25px 20px;
border-radius: 20px;
}
.course-panel-top {
align-items: flex-start;
}
.course-icon {
width: 56px;
height: 56px;
font-size: 21px;
border-radius: 14px;
}
.course-panel-footer {
align-items: flex-start;
flex-direction: column;
}
}
@media (max-width: 460px) {
.course-cta-section {
padding: 55px 14px;
}
.course-main-heading {
font-size: 36px;
}
.course-panel-top h3 {
font-size: 25px;
}
.detail-content strong {
font-size: 15px;
}
}
/*==============================
AFFILIATE SECTION
==============================*/
.actAffiliateFlow56Section{
padding:10px 0;
background:#181A20;
overflow:hidden;
}
.actAffiliateFlow56Section .container{
max-width:100%;
padding-left:0;
padding-right:0;
}
/*==============================
HEADING
==============================*/
.actAffiliateFlow56Heading{
max-width:850px;
margin:0 auto 70px;
}
.actAffiliateFlow56Heading h2{
font-size:52px;
font-weight:800;
color:#fff;
line-height:1.2;
margin-bottom:20px;
margin-top:-10px;
}
.actAffiliateFlow56Heading h2 span{
color:#F0B90B;
}
.actAffiliateFlow56Heading p{
color:#AEB4BF;
font-size:17px;
line-height:1.9;
max-width:760px;
margin:0 auto;
margin-bottom:-50px;
}
/*==============================
TAG
==============================*/
.actAffiliateFlow56TagWrap{
display:flex;
justify-content:center;
align-items:center;
width:100%;
margin:10px 0 25px;
}
.actAffiliateFlow56TagWrap::before,
.actAffiliateFlow56TagWrap::after,
.actAffiliateFlow56Tag::before,
.actAffiliateFlow56Tag::after{
content:none !important;
display:none !important;
}
.actAffiliateFlow56Tag{
color:#F0B90B;
font-size:20px;
font-weight:800;
letter-spacing:2px;
text-transform:uppercase;
}
/*==============================
CONTENT
==============================*/
.actAffiliateFlow56Wrapper{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:60px;
margin-top:20px;
}
.actAffiliateFlow56Item{
position:relative;
padding:20px 20px;
transition:.4s;
}
.actAffiliateFlow56Item:hover{
transform:translateY(-8px);
}
.actAffiliateFlow56Title{
font-size:62px;
font-weight:800;
color:rgba(240,185,11,.12);
letter-spacing:2px;
line-height:1;
margin-bottom:35px;
transition:.4s;
}
.actAffiliateFlow56Line{
width:70px;
height:4px;
background:#F0B90B;
margin-bottom:30px;
transition:.4s;
}
.actAffiliateFlow56Item h3{
color:#fff;
font-size:28px;
margin-bottom:18px;
line-height:1.3;
}
.actAffiliateFlow56Item p{
color:#AEB4BF;
line-height:1.9;
font-size:16px;
}
.actAffiliateFlow56Item:first-child{
padding-left:75px;
}
.actAffiliateFlow56Item:hover .actAffiliateFlow56Title{
color:#F0B90B;
}
.actAffiliateFlow56Item:hover .actAffiliateFlow56Line{
width:130px;
}
.actAffiliateFlow56Item.active .actAffiliateFlow56Title{
color:#F0B90B;
}
.actAffiliateFlow56Item.active .actAffiliateFlow56Line{
width:120px;
}
/*==============================
VERTICAL DIVIDER
==============================*/
.actAffiliateFlow56Item:not(:last-child)::after{
content:"";
position:absolute;
right:-30px;
top:20px;
width:1px;
height:85%;
background:rgba(240,185,11,.18);
}
/*==============================
RESPONSIVE
==============================*/
@media(max-width:991px){
.actAffiliateFlow56Wrapper{
grid-template-columns:1fr;
gap:50px;
}
.actAffiliateFlow56Item::after{
display:none;
}
.actAffiliateFlow56Title{
font-size:48px;
}
}
@media(max-width:576px){
.actAffiliateFlow56Title{
font-size:38px;
}
.actAffiliateFlow56Item h3{
font-size:24px;
}
}
/*=========================================
AFFILIATE ECOSYSTEM
=========================================*/
.actEcoSection91{
padding:0px 0;
background:#0B0E11;
}
/*==============================
TAG
==============================*/
.actEcoTagWrap91{
display:flex;
justify-content:center;
align-items:center;
width:100%;
margin:0 0 25px;
}
.actEcoTagWrap91::before,
.actEcoTagWrap91::after,
.actEcoTag91::before,
.actEcoTag91::after{
content:none !important;
display:none !important;
}
.actEcoTag91{
color:#F0B90B;
font-size:20px;
font-weight:800;
letter-spacing:4px;
text-transform:uppercase;
}
/*==============================
HEADING
==============================*/
.actEcoHeading91{
max-width:850px;
margin:0 auto 30px;
}
.actEcoHeading91 h2{
font-size:52px;
font-weight:800;
color:#fff;
line-height:1.2;
margin-bottom:20px;
margin-top:-10px;
}
.actEcoHeading91 h2 span{
color:#F0B90B;
}
.actEcoHeading91 p{
color:#B7BDC6;
line-height:1.8;
font-size:17px;
max-width:760px;
margin:0 auto;
}
/*==============================
WRAPPER
==============================*/
.actEcoWrapper91{
width:800px;
max-width:100%;
margin:30px auto 0;
position:relative;
}
/*==============================
TOP AND BOTTOM ROW
==============================*/
.actEcoTopRow91,
.actEcoBottomRow91{
display:flex;
justify-content:space-between;
}
/*==============================
CENTER ROW
==============================*/
.actEcoCenterRow91{
display:flex;
justify-content:center;
margin:0px 0;
}
/*==============================
BOXES
==============================*/
.actEcoBox91{
width:320px;
background:#181A20;
border:1px solid rgba(240,185,11,.20);
border-radius:18px;
padding:20px;
text-align:center;
transition:.4s;
position:relative;
}
.actEcoBox91:hover{
transform:translateY(-10px);
border-color:#F0B90B;
box-shadow:0 0 30px rgba(240,185,11,.15);
}
.actEcoBox91 h3{
color:#fff;
margin-bottom:15px;
font-size:26px;
}
.actEcoBox91 p{
color:#B7BDC6;
line-height:1.8;
}
/*==============================
CENTER CIRCLE
==============================*/
.actAffiliateCircle91{
width:190px;
height:180px;
background:#F0B90B;
border-radius:50%;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
color:#181A20;
font-weight:700;
box-shadow:0 0 40px rgba(240,185,11,.35);
}
.actAffiliateCircle91 span{
font-size:34px;
}
.actAffiliateCircle91 small{
font-size:15px;
margin-top:8px;
}
/*==============================
CONNECTING LINES
==============================*/
.actMerchant91::after{
content:"";
position:absolute;
width:2px;
height:70px;
background:#F0B90B;
bottom:-70px;
left:50%;
}
.actNetwork91::after{
content:"";
position:absolute;
width:2px;
height:70px;
background:#F0B90B;
bottom:-70px;
left:50%;
}
.actCustomer91::before{
content:"";
position:absolute;
width:2px;
height:70px;
background:#F0B90B;
top:-70px;
left:50%;
}
.actCommission91::before{
content:"";
position:absolute;
width:2px;
height:70px;
background:#F0B90B;
top:-70px;
left:50%;
}
/*==============================
RESPONSIVE
==============================*/
@media(max-width:991px){
.actEcoTopRow91,
.actEcoBottomRow91{
flex-direction:column;
align-items:center;
gap:30px;
}
.actEcoCenterRow91{
margin:40px 0;
}
.actEcoBox91{
width:100%;
max-width:420px;
}
.actMerchant91::after,
.actNetwork91::after,
.actCustomer91::before,
.actCommission91::before{
display:none;
}
.actAffiliateCircle91{
width:150px;
height:150px;
}
}
/*=========================================
SUCCESS STRATEGY
=========================================*/
/*=========================================
STUDENT SUCCESS STRATEGY
=========================================*/
.actSuccessJourney74Section{
padding:10px 0 80px;
background:#111418;
overflow:hidden;
}
/*=========================================
TAG
=========================================*/
.actSuccessJourney74TagWrap{
display:flex;
justify-content:center;
align-items:center;
width:100%;
margin:10px 0 25px;
}
.actSuccessJourney74TagWrap::before,
.actSuccessJourney74TagWrap::after,
.actSuccessJourney74Tag::before,
.actSuccessJourney74Tag::after{
content:none !important;
display:none !important;
}
.actSuccessJourney74Tag{
color:#F0B90B;
font-size:20px;
font-weight:800;
letter-spacing:4px;
text-transform:uppercase;
text-align:center;
}
/*=========================================
HEADING
=========================================*/
.actSuccessJourney74Heading{
max-width:950px;
margin:0 auto;
}
.actSuccessJourney74Heading h2{
color:#fff;
font-size:52px;
font-weight:800;
line-height:1.2;
margin-bottom:20px;
margin-top:-10px;
}
.actSuccessJourney74Heading p{
color:#B7BDC6;
font-size:17px;
line-height:1.8;
max-width:850px;
margin:0 auto;
}
/*=========================================
STRATEGY WRAPPER
=========================================*/
.actSuccessJourney74Wrapper{
display:flex;
justify-content:center;
align-items:flex-start;
gap:80px;
margin-top:30px;
position:relative;
}
/* Connecting Line */
.actSuccessJourney74Wrapper::before{
content:"";
position:absolute;
top:45px;
left:18%;
right:18%;
height:2px;
background:rgba(240,185,11,.25);
}
/*=========================================
STRATEGY STEP
=========================================*/
.actSuccessJourney74Step{
text-align:center;
width:280px;
position:relative;
}
/* Step Number */
.actSuccessJourney74Number{
width:90px;
height:90px;
margin:0 auto 12px;
border-radius:50%;
border:2px solid #F0B90B;
display:flex;
justify-content:center;
align-items:center;
font-size:28px;
font-weight:700;
color:#F0B90B;
background:#181A20;
position:relative;
z-index:2;
transition:.4s;
}
.actSuccessJourney74Step h3{
color:#fff;
margin:15px 0 10px 0;
font-size:28px;
}
.actSuccessJourney74Step p{
color:#B7BDC6;
line-height:1.8;
}
/* Hover */
.actSuccessJourney74Step:hover .actSuccessJourney74Number,
.actSuccessJourney74Step.active .actSuccessJourney74Number{
background:#F0B90B;
color:#181A20;
transform:scale(1.1);
box-shadow:0 0 30px rgba(240,185,11,.4);
}
/*=========================================
RESPONSIVE
=========================================*/
@media(max-width:991px){
.actSuccessJourney74Section{
padding-bottom:60px;
}
.actSuccessJourney74Wrapper{
flex-direction:column;
align-items:center;
gap:50px;
}
.actSuccessJourney74Wrapper::before{
display:none;
}
}
@media(max-width:576px){
.actSuccessJourney74Heading h2{
font-size:38px;
}
.actSuccessJourney74Heading p{
font-size:16px;
}
.actSuccessJourney74Tag{
font-size:20px;
letter-spacing:2px;
}
.actSuccessJourney74Step{
width:100%;
max-width:280px;
}
}
/*=========================================
INCOME OPPORTUNITIES
=========================================*/
/*=========================================
INCOME OPPORTUNITIES
=========================================*/
.actIncomeCareer83Section{
padding:10px 0;
background:#0B0E11;
}
/*=========================================
TAG
=========================================*/
.actIncomeCareer83TagWrap{
display:flex;
justify-content:center;
align-items:center;
width:100%;
margin:10px 0 25px;
}
.actIncomeCareer83TagWrap::before,
.actIncomeCareer83TagWrap::after,
.actIncomeCareer83Tag::before,
.actIncomeCareer83Tag::after{
content:none !important;
display:none !important;
}
.actIncomeCareer83Tag{
color:#F0B90B;
font-size:20px;
font-weight:700;
letter-spacing:2px;
text-transform:uppercase;
text-align:center;
margin-top:-20px;
}
/*=========================================
HEADING
=========================================*/
.actIncomeCareer83Heading{
text-align:center;
}
.actIncomeCareer83Heading h2{
color:#fff;
font-size:60px;
font-weight:700;
margin-top:-30px;
}
.actIncomeCareer83Heading h2 span{
color:#F0B90B;
}
.actIncomeCareer83Heading p{
color:#B7BDC6;
}
/*=========================================
CAREER LADDER
=========================================*/
.actIncomeCareer83Ladder{
display:flex;
justify-content:center;
align-items:flex-end;
gap:25px;
margin-top:0px;
flex-wrap:wrap;
}
/*=========================================
CAREER STEP
=========================================*/
.actIncomeCareer83Step{
width:190px;
background:#181A20;
border:1px solid rgba(240,185,11,.18);
border-radius:18px 18px 0 0;
padding:30px 20px;
text-align:center;
transition:.4s;
position:relative;
}
.actIncomeCareer83StepOne{
height:180px;
}
.actIncomeCareer83StepTwo{
height:230px;
}
.actIncomeCareer83StepThree{
height:280px;
}
.actIncomeCareer83StepFour{
height:330px;
}
.actIncomeCareer83StepFive{
height:380px;
}
.actIncomeCareer83Step h3{
color:#fff;
font-size:22px;
margin-bottom:15px;
}
.actIncomeCareer83Step span{
color:#B7BDC6;
font-size:15px;
line-height:1.7;
}
.actIncomeCareer83Step:hover{
transform:translateY(-12px);
border-color:#F0B90B;
box-shadow:0 20px 40px rgba(240,185,11,.15);
}
.actIncomeCareer83Step::before{
content:"";
position:absolute;
bottom:0;
left:0;
width:100%;
height:5px;
background:#F0B90B;
}
/*=========================================
RESPONSIVE
=========================================*/
@media(max-width:991px){
.actIncomeCareer83Ladder{
gap:18px;
}
.actIncomeCareer83Step{
width:170px;
}
}
@media(max-width:768px){
.actIncomeCareer83Ladder{
flex-direction:column;
align-items:center;
}
.actIncomeCareer83Step{
width:100%;
max-width:350px;
height:auto !important;
border-radius:16px;
}
}
/* ==================================
COMPACT AFFILIATE CTA
================================== */
.affiliate-cta-new{
width:100%;
margin:0;
padding:0;
background:#0B0E11;
}
.affiliate-cta-inner{
width:100%;
margin:0;
display:grid;
grid-template-columns:minmax(0,1.35fr) minmax(420px,.95fr);
grid-template-areas:
"content details"
"content button";
align-items:center;
gap:24px 55px;
padding:45px 55px;
background:
linear-gradient(
110deg,
rgba(240,185,11,.07),
transparent 30%
),
#181A20;
border-top:1px solid rgba(240,185,11,.22);
border-bottom:1px solid rgba(240,185,11,.22);
box-sizing:border-box;
}
/* LEFT CONTENT */
.affiliate-main-content{
grid-area:content;
max-width:820px;
}
.affiliate-label{
display:flex;
align-items:center;
gap:14px;
color:#F0B90B;
font-size:14px;
font-weight:800;
letter-spacing:3px;
}
.affiliate-label::before{
content:"";
width:42px;
height:2px;
background:#F0B90B;
}
.affiliate-main-content h2{
margin:16px 0 14px;
color:#fff;
font-size:clamp(38px,4vw,58px);
font-weight:600;
line-height:1.08;
letter-spacing:-1.5px;
}
.affiliate-main-content h2 span{
display:block;
color:#F0B90B;
}
.affiliate-main-content p{
max-width:700px;
margin:0;
color:#B7BDC6;
font-size:16px;
line-height:1.7;
}
/* COURSE DETAILS */
.affiliate-course-details{
grid-area:details;
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:12px;
}
.affiliate-detail{
padding:16px 18px;
background:rgba(11,14,17,.6);
border:1px solid rgba(255,255,255,.07);
border-radius:10px;
}
.affiliate-detail small{
display:block;
margin-bottom:5px;
color:#8D949E;
font-size:11px;
font-weight:700;
letter-spacing:.8px;
text-transform:uppercase;
}
.affiliate-detail strong{
color:#fff;
font-size:16px;
font-weight:700;
}
/* BUTTON */
.affiliate-enroll-button{
grid-area:button;
min-height:58px;
display:flex;
align-items:center;
justify-content:space-between;
padding:0 25px;
background:#F0B90B;
color:#111418;
border-radius:10px;
font-size:16px;
font-weight:800;
text-decoration:none;
transition:.3s ease;
}
.affiliate-enroll-button span{
font-size:24px;
transition:.3s ease;
}
.affiliate-enroll-button:hover{
background:#DFA300;
transform:translateY(-3px);
}
.affiliate-enroll-button:hover span{
transform:translateX(5px);
}
/* RESPONSIVE */
@media(max-width:1050px){
.affiliate-cta-inner{
grid-template-columns:1fr;
grid-template-areas:
"content"
"details"
"button";
gap:28px;
padding:45px 30px;
}
.affiliate-main-content{
max-width:100%;
}
}
@media(max-width:600px){
.affiliate-cta-inner{
padding:38px 18px;
}
.affiliate-course-details{
grid-template-columns:1fr;
}
.affiliate-main-content h2{
font-size:38px;
}
}
/*==================================
WHY LEARN SEO
===================================*/
/*=========================================
SEO PREMIUM SECTION
=========================================*/
.actSeoPulse84Section{
padding:70px 0 90px;
margin-bottom:-70px;
background:
radial-gradient(
circle at 15% 20%,
rgba(240,185,11,.07),
transparent 30%
),
radial-gradient(
circle at 85% 80%,
rgba(240,185,11,.05),
transparent 30%
),
#0B0E11;
overflow:hidden;
}
/*=========================================
TAG
=========================================*/
.actSeoPulse84TagWrap{
display:flex;
justify-content:center;
align-items:center;
width:100%;
margin:0 0 22px;
}
.actSeoPulse84TagWrap::before,
.actSeoPulse84TagWrap::after,
.actSeoPulse84Tag::before,
.actSeoPulse84Tag::after{
content:none !important;
display:none !important;
}
.actSeoPulse84Tag{
color:#F0B90B;
font-size:20px;
font-weight:800;
letter-spacing:2px;
text-transform:uppercase;
text-align:center;
margin-top:-80px;
}
/*=========================================
HEADING
=========================================*/
.actSeoPulse84Heading{
max-width:900px;
margin:0 auto 55px;
}
.actSeoPulse84Heading h2{
color:#FFFFFF;
font-size:56px;
font-weight:800;
line-height:1.15;
margin-bottom:22px;
margin-top:-30px;
}
.actSeoPulse84Heading h2 span{
color:#F0B90B;
}
.actSeoPulse84Heading p{
color:#B7BDC6;
font-size:17px;
line-height:1.9;
max-width:780px;
margin:0 auto;
margin-bottom:-20px;
}
/*=========================================
DASHBOARD
=========================================*/
.actSeoPulse84Dashboard{
display:grid;
grid-template-columns:1.2fr .8fr;
gap:28px;
max-width:1180px;
margin:0 auto;
}
/*=========================================
LEFT RANKING PANEL
=========================================*/
.actSeoPulse84RankingPanel{
padding:10px;
background:linear-gradient(
145deg,
#181A20,
#111418
);
border:1px solid rgba(240,185,11,.18);
border-radius:24px;
box-shadow:0 25px 60px rgba(0,0,0,.35);
position:relative;
overflow:hidden;
}
.actSeoPulse84RankingPanel::before{
content:"";
position:absolute;
top:0;
left:0;
width:100%;
height:3px;
background:linear-gradient(
90deg,
transparent,
#F0B90B,
transparent
);
}
.actSeoPulse84PanelTop{
display:flex;
align-items:center;
justify-content:space-between;
gap:20px;
margin-bottom:30px;
}
.actSeoPulse84PanelTop > div:first-child{
display:flex;
align-items:center;
gap:10px;
}
.actSeoPulse84PanelTop small{
color:#B7BDC6;
font-size:14px;
}
.actSeoPulse84LiveDot{
width:10px;
height:10px;
border-radius:50%;
background:#F0B90B;
box-shadow:0 0 14px rgba(240,185,11,.8);
}
.actSeoPulse84Status{
padding:8px 14px;
background:rgba(240,185,11,.12);
border:1px solid rgba(240,185,11,.25);
border-radius:30px;
color:#F0B90B;
font-size:13px;
font-weight:700;
}
/* Keyword */
.actSeoPulse84Keyword{
margin-bottom:25px;
}
.actSeoPulse84Keyword span{
display:block;
color:#848E9C;
font-size:13px;
margin-bottom:8px;
}
.actSeoPulse84Keyword h3{
color:#FFFFFF;
font-size:25px;
margin:0;
}
/* Search Card */
.actSeoPulse84SearchCard{
border:1px solid rgba(255,255,255,.07);
border-radius:18px;
overflow:hidden;
background:#0F1115;
}
.actSeoPulse84SearchHead{
display:flex;
justify-content:space-between;
align-items:center;
padding:16px 20px;
background:#1E2329;
color:#848E9C;
font-size:13px;
font-weight:700;
text-transform:uppercase;
letter-spacing:1px;
}
.actSeoPulse84SearchRow{
display:flex;
justify-content:space-between;
align-items:center;
gap:20px;
padding:22px 20px;
border-top:1px solid rgba(255,255,255,.06);
transition:.35s;
}
.actSeoPulse84SearchRow:hover{
background:#181A20;
padding-left:28px;
}
.actSeoPulse84SearchRowActive{
background:rgba(240,185,11,.08);
}
.actSeoPulse84WebsiteInfo{
display:flex;
align-items:center;
gap:14px;
}
.actSeoPulse84WebsiteIcon{
width:44px;
height:44px;
border-radius:12px;
display:flex;
align-items:center;
justify-content:center;
color:#181A20;
background:#F0B90B;
font-weight:800;
font-size:18px;
flex-shrink:0;
}
.actSeoPulse84SearchRow:not(.actSeoPulse84SearchRowActive)
.actSeoPulse84WebsiteIcon{
color:#B7BDC6;
background:#2B3139;
}
.actSeoPulse84WebsiteInfo h4{
color:#FFFFFF;
font-size:17px;
margin:0 0 5px;
}
.actSeoPulse84WebsiteInfo small{
color:#848E9C;
font-size:13px;
}
.actSeoPulse84SearchRow strong{
color:#B7BDC6;
font-size:26px;
}
.actSeoPulse84SearchRowActive strong{
color:#F0B90B;
}
/*=========================================
RIGHT METRICS
=========================================*/
.actSeoPulse84Metrics{
display:flex;
flex-direction:column;
gap:20px;
}
.actSeoPulse84MetricLarge{
display:flex;
align-items:center;
gap:22px;
min-height:190px;
}
.actSeoPulse84MetricCard{
background:linear-gradient(
145deg,
#181A20,
#111418
);
border:1px solid rgba(240,185,11,.14);
border-radius:20px;
padding:24px;
transition:.35s;
position:relative;
overflow:hidden;
}
.actSeoPulse84MetricCard::after{
content:"";
position:absolute;
right:-40px;
bottom:-40px;
width:100px;
height:100px;
border-radius:50%;
background:rgba(240,185,11,.05);
}
.actSeoPulse84MetricCard:hover{
transform:translateY(-7px);
border-color:#F0B90B;
box-shadow:0 18px 40px rgba(0,0,0,.28);
}
.actSeoPulse84MetricIcon{
width:54px;
height:54px;
border-radius:15px;
display:flex;
align-items:center;
justify-content:center;
background:rgba(240,185,11,.12);
color:#F0B90B;
font-size:22px;
flex-shrink:0;
}
.actSeoPulse84MetricCard span{
color:#848E9C;
font-size:13px;
display:block;
margin-bottom:8px;
}
.actSeoPulse84MetricLarge h3{
color:#F0B90B;
font-size:48px;
line-height:1;
margin:0 0 12px;
}
.actSeoPulse84MetricLarge p{
color:#B7BDC6;
font-size:14px;
line-height:1.7;
margin:0;
}
.actSeoPulse84MetricGrid{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:20px;
}
.actSeoPulse84MetricGrid .actSeoPulse84MetricCard{
min-height:150px;
}
.actSeoPulse84MetricGrid .actSeoPulse84MetricIcon{
margin-bottom:20px;
}
.actSeoPulse84MetricCard h4{
color:#FFFFFF;
font-size:17px;
line-height:1.4;
margin:0;
}
/*=========================================
RESPONSIVE
=========================================*/
@media(max-width:991px){
.actSeoPulse84Dashboard{
grid-template-columns:1fr;
}
.actSeoPulse84Heading h2{
font-size:46px;
}
}
@media(max-width:768px){
.actSeoPulse84Section{
padding:55px 0 70px;
}
.actSeoPulse84Heading{
margin-bottom:40px;
}
.actSeoPulse84Heading h2{
font-size:38px;
}
.actSeoPulse84MetricGrid{
grid-template-columns:1fr;
}
}
@media(max-width:576px){
.actSeoPulse84Tag{
font-size:20px;
letter-spacing:2px;
}
.actSeoPulse84Heading h2{
font-size:32px;
}
.actSeoPulse84Heading p{
font-size:15px;
}
.actSeoPulse84RankingPanel{
padding:18px;
border-radius:18px;
}
.actSeoPulse84PanelTop{
align-items:flex-start;
flex-direction:column;
}
.actSeoPulse84SearchHead{
padding:14px;
}
.actSeoPulse84SearchRow{
padding:18px 14px;
}
.actSeoPulse84WebsiteIcon{
width:38px;
height:38px;
}
.actSeoPulse84WebsiteInfo h4{
font-size:15px;
}
.actSeoPulse84WebsiteInfo small{
font-size:11px;
}
.actSeoPulse84SearchRow strong{
font-size:21px;
}
.actSeoPulse84MetricLarge{
align-items:flex-start;
flex-direction:column;
}
}
/* ==============================
SEO PROCESS V2
============================== */
.seo-process-v2{
padding:10px 0;
background:#000;
margin-bottom:-20px;
}
.seo-flow{
margin-top:30px;
position:relative;
}
.seo-flow::before{
content:"";
position:absolute;
left:35px;
top:0;
width:2px;
height:100%;
background:#F0B90B;
}
.seo-box{
position:relative;
display:flex;
gap:35px;
margin-bottom:20px;
padding:20px;
background:#181A20;
border:1px solid #2B3139;
transition:.4s;
}
.seo-box:hover{
border-color:#F0B90B;
transform:translateX(10px);
}
.step-number{
min-width:70px;
height:70px;
display:flex;
align-items:center;
justify-content:center;
background:#F0B90B;
color:#000;
font-size:24px;
font-weight:700;
position:relative;
z-index:2;
}
.step-content h3{
color:#fff;
font-size:26px;
margin-bottom:12px;
}
.step-content p{
color:#B7BDC6;
line-height:1.7;
max-width:600px;
}
/* Responsive */
@media(max-width:768px){
.seo-box{
flex-direction:column;
}
.seo-flow::before{
display:none;
}
}
/* =================================
ON PAGE SEO CHECKLIST
================================= */
.seo-checklist{
padding:0px 0;
background:#000;
}
.checklist-grid{
margin-top:30px;
display:grid;
grid-template-columns:repeat(3,1fr);
gap:25px;
}
.check-card{
background:#181A20;
border:1px solid #2B3139;
padding:35px;
transition:.4s;
position:relative;
overflow:hidden;
}
.check-card::before{
content:"";
position:absolute;
top:0;
left:0;
width:0%;
height:3px;
background:#F0B90B;
transition:.4s;
}
.check-card:hover::before{
width:100%;
}
.check-card:hover{
transform:translateY(-10px);
border-color:#F0B90B;
}
.check-icon{
width:55px;
height:55px;
display:flex;
align-items:center;
justify-content:center;
background:#F0B90B;
color:#000;
font-size:22px;
margin-bottom:25px;
}
.check-card h3{
color:#fff;
font-size:22px;
margin-bottom:15px;
}
.check-card p{
color:#B7BDC6;
line-height:1.7;
}
/* Responsive */
@media(max-width:992px){
.checklist-grid{
grid-template-columns:repeat(2,1fr);
}
}
@media(max-width:600px){
.checklist-grid{
grid-template-columns:1fr;
}
}
/* =================================
GOOGLE RANKING FACTORS
================================= */
.ranking-factors{
padding:20px 0;
background:#000;
}
.ranking-wrapper{
margin-top:70px;
display:flex;
align-items:center;
gap:70px;
}
.factor-list{
flex:1;
}
.factor-item{
margin-bottom:35px;
}
.factor-title{
display:flex;
justify-content:space-between;
align-items:center;
}
.factor-title h3{
color:#fff;
font-size:22px;
}
.factor-title span{
color:#F0B90B;
font-weight:700;
}
.progress{
height:3px;
background:#242A33;
margin:15px 0;
overflow:hidden;
}
.progress span{
display:block;
height:100%;
background:#F0B90B;
}
.factor-item p{
color:#B7BDC6;
line-height:1.6;
}
/* SEO SCORE CIRCLE */
.ranking-circle{
width:280px;
height:280px;
border-radius:50%;
border:8px solid #F0B90B;
display:flex;
align-items:center;
justify-content:center;
}
.circle-inner{
width:220px;
height:220px;
border-radius:50%;
background:#181A20;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
}
.circle-inner strong{
color:#F0B90B;
font-size:25px;
}
.circle-inner span{
color:#B7BDC6;
}
.circle-inner h2{
color:#fff;
font-size:45px;
margin-top:10px;
}
@media(max-width:900px){
.ranking-wrapper{
flex-direction:column;
}
.ranking-circle{
width:230px;
height:230px;
}
}
/* =================================
FINAL SEO CTA
================================= */
.final-seo-cta{
position:relative;
padding:10px 0;
background:#000;
overflow:hidden;
text-align:center;
}
.final-seo-cta::before{
content:"";
position:absolute;
width:450px;
height:450px;
background:#F0B90B;
filter:blur(160px);
opacity:.25;
top:-150px;
left:50%;
transform:translateX(-50%);
}
.cta-overlay{
position:absolute;
inset:0;
background:
linear-gradient(
135deg,
rgba(240,185,11,.08),
transparent
);
}
.cta-content{
position:relative;
z-index:2;
}
.cta-tag{
display:inline-block;
padding:10px 25px;
border:1px solid #F0B90B;
color:#F0B90B;
font-size:14px;
letter-spacing:2px;
margin-bottom:25px;
}
.cta-content h2{
color:#fff;
font-size:60px;
font-weight:700;
line-height:1.2;
max-width:850px;
margin:auto;
}
.cta-content h2 span{
color:#F0B90B;
}
.cta-content p{
max-width:650px;
margin:25px auto 40px;
color:#B7BDC6;
font-size:18px;
line-height:1.7;
}
.cta-buttons{
display:flex;
justify-content:center;
gap:20px;
}
.cta-primary,
.cta-secondary{
padding:16px 40px;
text-decoration:none;
font-weight:600;
transition:.4s;
}
.cta-primary{
background:#F0B90B;
color:#000;
}
.cta-primary:hover{
background:#fff;
}
.cta-secondary{
border:1px solid #F0B90B;
color:#F0B90B;
}
.cta-secondary:hover{
background:#F0B90B;
color:#000;
}
@media(max-width:768px){
.cta-content h2{
font-size:34px;
}
.cta-buttons{
flex-direction:column;
align-items:center;
}
}
/* =================================
GRAPHIC DESIGN COURSE
================================= */
.actGraphicHero97Section{
padding:10px 0;
background:#000;
overflow:hidden;
}
.actGraphicHero97Wrapper{
display:flex;
align-items:flex-start;
gap:70px;
}
.actGraphicHero97Content{
width:50%;
}
/* TAG */
.actGraphicHero97Tag{
display:inline-block;
color:#F0B90B;
font-size:20px;
font-weight:700;
letter-spacing:2px;
text-transform:uppercase;
margin-bottom:50px;
margin-top:-70px;
}
.actGraphicHero97Content h1{
color:#fff;
font-size:60px;
font-weight:700;
line-height:1.2;
margin-top:50px;
}
.actGraphicHero97Tag::before,
.actGraphicHero97Tag::after{
content:none !important;
display:none !important;
}
/* HEADING */
.actGraphicHero97Content h1{
color:#fff;
font-size:60px;
font-weight:700;
line-height:1.2;
margin-top:-50px;
}
.actGraphicHero97Content h1 span{
color:#F0B90B;
}
/* DESCRIPTION */
.actGraphicHero97Content p{
color:var(--text-gray);
font-size:16px;
line-height:1.8;
margin:0 0 15px 0;
padding:0;
text-align:center;
}
/* POINTS */
.actGraphicHero97Points{
display:grid;
grid-template-columns:1fr 1fr;
gap:18px;
margin-bottom:30px;
}
.actGraphicHero97Point{
display:flex;
align-items:center;
gap:15px;
padding:18px;
background:#181A20;
border-left:3px solid #F0B90B;
}
.actGraphicHero97Point i{
color:#F0B90B;
font-size:22px;
}
.actGraphicHero97Point span{
color:#fff;
font-size:15px;
}
/* BUTTON */
.actGraphicHero97Button{
display:inline-block;
margin-top:0;
padding:16px 40px;
background:#F0B90B;
color:#000;
text-decoration:none;
font-weight:700;
border-radius:10px;
transition:.3s;
}
.actGraphicHero97Button:hover{
background:#d9a600;
color:#000;
transform:translateY(-3px);
}
/* IMAGE AREA */
.actGraphicHero97Image{
width:50%;
position:relative;
}
.actGraphicHero97Image img{
display:block;
width:100%;
height:420px;
object-fit:cover;
border:2px solid #F0B90B;
}
/* TOOL BOX */
.actGraphicHero97ToolBox{
position:absolute;
background:#181A20;
color:#fff;
padding:15px 25px;
border:1px solid #F0B90B;
font-weight:600;
z-index:2;
}
.actGraphicHero97Photoshop{
top:40px;
left:-35px;
}
.actGraphicHero97Illustrator{
bottom:80px;
right:-35px;
}
/* CREATIVE CIRCLE */
.actGraphicHero97CreativeCircle{
position:absolute;
width:130px;
height:130px;
border-radius:50%;
background:#F0B90B;
color:#000;
display:flex;
justify-content:center;
align-items:center;
font-weight:700;
right:40px;
top:40%;
z-index:2;
}
/* RESPONSIVE */
@media(max-width:992px){
.actGraphicHero97Wrapper{
flex-direction:column;
}
.actGraphicHero97Content,
.actGraphicHero97Image{
width:100%;
}
.actGraphicHero97Content h1{
font-size:38px;
margin-top:0;
}
.actGraphicHero97Points{
grid-template-columns:1fr;
}
.actGraphicHero97Photoshop{
left:15px;
}
.actGraphicHero97Illustrator{
right:15px;
}
}
@media(max-width:576px){
.actGraphicHero97Tag{
font-size:22px;
letter-spacing:2px;
}
.actGraphicHero97Content h1{
font-size:34px;
}
.actGraphicHero97Content p{
text-align:left;
font-size:15px;
}
.actGraphicHero97Image img{
height:380px;
}
.actGraphicHero97CreativeCircle{
width:100px;
height:100px;
right:20px;
}
.actGraphicHero97ToolBox{
padding:12px 18px;
}
}
/* =================================
WHY GRAPHIC DESIGN
================================= */
.actGraphicBenefits62Section{
padding:0px 0;
background:#000;
}
/* =================================
CENTER TAG
================================= */
.actGraphicBenefits62TagWrap{
display:flex;
justify-content:center;
align-items:center;
width:100%;
margin:0 0 55px;
}
.actGraphicBenefits62TagWrap::before,
.actGraphicBenefits62TagWrap::after,
.actGraphicBenefits62Tag::before,
.actGraphicBenefits62Tag::after{
content:none !important;
display:none !important;
}
.actGraphicBenefits62Tag{
display:inline-block;
color:#F0B90B;
font-size:20px;
font-weight:700;
letter-spacing:2px;
text-transform:uppercase;
text-align:center;
}
/* =================================
WRAPPER
================================= */
.actGraphicBenefits62Wrapper{
display:flex;
align-items:center;
gap:50px;
}
/* =================================
IMAGE
================================= */
.actGraphicBenefits62Image{
width:45%;
position:relative;
}
.actGraphicBenefits62Image img{
width:100%;
height:550px;
object-fit:cover;
border:2px solid #F0B90B;
}
/* =================================
EXPERIENCE BOX
================================= */
.actGraphicBenefits62ExperienceBox{
position:absolute;
bottom:40px;
right:-40px;
background:#F0B90B;
color:#000;
width:150px;
height:150px;
display:flex;
justify-content:center;
align-items:center;
flex-direction:column;
}
.actGraphicBenefits62ExperienceBox h2{
font-size:45px;
margin:0;
}
.actGraphicBenefits62ExperienceBox p{
font-weight:600;
}
/* =================================
CONTENT
================================= */
.actGraphicBenefits62Content{
width:55%;
}
.actGraphicBenefits62Content h2{
color:#fff;
font-size:60px;
font-weight: 700;
line-height:1.3;
margin:0;
}
.actGraphicBenefits62Content h2 span{
color:#F0B90B;
}
.actGraphicBenefits62Content > p{
color:#B7BDC6;
line-height:1.8;
margin-bottom:35px;
}
/* =================================
BENEFIT LIST
================================= */
.actGraphicBenefits62Item{
display:flex;
gap:20px;
margin-bottom:25px;
}
.actGraphicBenefits62Icon{
min-width:55px;
height:55px;
display:flex;
justify-content:center;
align-items:center;
background:#181A20;
border:1px solid #F0B90B;
color:#F0B90B;
font-weight:700;
}
.actGraphicBenefits62Item h3{
color:#fff;
font-size:20px;
margin-bottom:8px;
}
.actGraphicBenefits62Item p{
color:#B7BDC6;
margin:0;
line-height:1.6;
}
/* =================================
RESPONSIVE
================================= */
@media(max-width:992px){
.actGraphicBenefits62Wrapper{
flex-direction:column;
}
.actGraphicBenefits62Image,
.actGraphicBenefits62Content{
width:100%;
}
.actGraphicBenefits62Content h2{
font-size:34px;
}
}
/* =================================
CAREER OPPORTUNITIES
================================= */
.career-opportunities{
padding:10px 0;
background:#000;
}
.career-wrapper{
margin-top:10px;
display:grid;
grid-template-columns:repeat(2,1fr);
gap:30px;
}
.career-card{
position:relative;
display:flex;
align-items:center;
gap:25px;
padding:35px;
background:#181A20;
border:1px solid #2B3139;
overflow:hidden;
transition:.4s;
}
.career-card::after{
content:"";
position:absolute;
right:-50px;
bottom:-50px;
width:140px;
height:140px;
border-radius:50%;
background:#F0B90B;
opacity:.08;
}
.career-card:hover{
border-color:#F0B90B;
transform:translateY(-8px);
}
.career-number{
width:80px;
height:80px;
margin:0 auto 25px;
background:#DFA300;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
font-size:34px;
color:#242A33;
transition:.35s ease;
}
.career-number i{
color:#242A33;
font-size:34px;
line-height:1;
}
.career-box:hover .career-number{
transform:scale(1.08);
}
.career-content h3{
color:#fff;
font-size:24px;
margin: 0;
}
.career-content p{
margin-top:0;
margin-bottom:0;
line-height:1.7;
}
.career-content p{
color:#B7BDC6;
line-height:1.7;
}
.career-icon{
position:absolute;
right:25px;
top:25px;
font-size:35px;
color:#F0B90B;
}
@media(max-width:900px){
.career-wrapper{
grid-template-columns:1fr;
}
.career-card{
flex-direction:column;
align-items:flex-start;
}
}
/* =========================================
GRAPHIC DESIGN FINAL CTA
========================================= */
.actGraphicFinalCta88Section{
padding:0px 0;
background:
radial-gradient(
circle at 15% 20%,
rgba(240,185,11,.10),
transparent 30%
),
radial-gradient(
circle at 90% 80%,
rgba(240,185,11,.06),
transparent 32%
),
#0B0E11;
overflow:hidden;
}
.actGraphicFinalCta88Section .container{
width:100%;
max-width:100%;
padding-left:0 !important;
padding-right:0 !important;
margin-left:0;
margin-right:0;
}
/* =========================================
WRAPPER
========================================= */
.actGraphicFinalCta88Wrapper{
display:grid;
grid-template-columns: 1fr 0.95fr;
gap:60px;
align-items:center;
padding:55px;
background:linear-gradient(
145deg,
rgba(24,26,32,.96),
rgba(15,17,21,.98)
);
border:1px solid rgba(240,185,11,.20);
position:relative;
overflow:hidden;
box-shadow:0 30px 80px rgba(0,0,0,.40);
width:100%;
margin-left:0;
margin-right:0;
}
.actGraphicFinalCta88Wrapper::before{
content:"";
position:absolute;
top:0;
left:0;
width:100%;
height:4px;
background:linear-gradient(
90deg,
transparent,
#F0B90B,
transparent
);
}
.actGraphicFinalCta88Wrapper::after{
content:"";
position:absolute;
width:280px;
height:280px;
border-radius:50%;
right:-140px;
top:-140px;
border:1px solid rgba(240,185,11,.16);
box-shadow:
0 0 0 45px rgba(240,185,11,.025),
0 0 0 90px rgba(240,185,11,.015);
}
/* =========================================
LEFT CONTENT
========================================= */
.actGraphicFinalCta88Content{
position:relative;
z-index:2;
}
.actGraphicFinalCta88TagWrap{
display:flex;
align-items:center;
margin-bottom:24px;
}
.actGraphicFinalCta88TagWrap::before,
.actGraphicFinalCta88TagWrap::after,
.actGraphicFinalCta88Tag::before,
.actGraphicFinalCta88Tag::after{
content:none !important;
display:none !important;
}
.actGraphicFinalCta88Tag{
color:#F0B90B;
font-size:20px;
font-weight:700;
letter-spacing:2px;
text-transform:uppercase;
margin-top:-150px;
}
.actGraphicFinalCta88Content h2{
color:#FFFFFF;
font-size:60px;
font-weight:700;
line-height:1.15;
max-width:760px;
margin:-70px 0 24px;
}
.actGraphicFinalCta88Content h2 span{
display:block;
color:#F0B90B;
}
.actGraphicFinalCta88Content > p{
color:#B7BDC6;
font-size:17px;
line-height:1.9;
max-width:700px;
margin:0 0 32px;
}
/* =========================================
BUTTONS
========================================= */
.actGraphicFinalCta88Actions{
display:flex;
align-items:center;
flex-wrap:wrap;
gap:16px;
margin-bottom:38px;
}
.actGraphicFinalCta88PrimaryBtn,
.actGraphicFinalCta88SecondaryBtn{
display:inline-flex;
justify-content:center;
align-items:center;
gap:12px;
min-height:56px;
padding:0 30px;
border-radius:12px;
font-size:16px;
font-weight:700;
text-decoration:none;
transition:.35s;
}
.actGraphicFinalCta88PrimaryBtn{
background:#F0B90B;
color:#181A20;
border:1px solid #F0B90B;
}
.actGraphicFinalCta88PrimaryBtn:hover{
background:#FFD43B;
color:#181A20;
transform:translateY(-4px);
box-shadow:0 15px 30px rgba(240,185,11,.20);
}
.actGraphicFinalCta88SecondaryBtn{
background:transparent;
color:#FFFFFF;
border:1px solid #2B3139;
}
.actGraphicFinalCta88SecondaryBtn:hover{
color:#F0B90B;
border-color:#F0B90B;
transform:translateY(-4px);
}
/* =========================================
TRUST ROW
========================================= */
.actGraphicFinalCta88TrustRow{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:14px;
max-width:650px;
}
.actGraphicFinalCta88TrustRow > div{
padding:16px 18px;
background:#111418;
border:1px solid rgba(255,255,255,.07);
border-radius:14px;
}
.actGraphicFinalCta88TrustRow strong{
display:block;
color:#F0B90B;
font-size:21px;
margin-bottom:5px;
}
.actGraphicFinalCta88TrustRow span{
color:#848E9C;
font-size:13px;
}
/* =========================================
RIGHT CARD
========================================= */
.actGraphicFinalCta88Card{
position:relative;
z-index:2;
padding:34px;
background:linear-gradient(
145deg,
#1E2329,
#111418
);
border:1px solid rgba(240,185,11,.22);
border-radius:22px;
box-shadow:0 22px 55px rgba(0,0,0,.34);
}
.actGraphicFinalCta88Card::before{
content:"";
position:absolute;
left:0;
top:35px;
width:4px;
height:90px;
background:#F0B90B;
border-radius:0 5px 5px 0;
}
.actGraphicFinalCta88CardTop{
display:flex;
align-items:center;
gap:15px;
margin-bottom:25px;
}
.actGraphicFinalCta88CardIcon{
width:50px;
height:50px;
display:flex;
justify-content:center;
align-items:center;
border-radius:14px;
background:rgba(240,185,11,.12);
color:#F0B90B;
font-size:21px;
}
.actGraphicFinalCta88CardTop span{
color:#F0B90B;
font-size:14px;
font-weight:800;
letter-spacing:1.5px;
text-transform:uppercase;
}
.actGraphicFinalCta88Card h3{
color:#FFFFFF;
font-size:29px;
line-height:1.4;
margin:0 0 28px;
}
/* =========================================
FEATURES
========================================= */
.actGraphicFinalCta88FeatureList{
display:grid;
gap:12px;
}
.actGraphicFinalCta88FeatureList > div{
display:flex;
align-items:center;
gap:14px;
padding:15px 16px;
background:#0F1115;
border:1px solid rgba(255,255,255,.06);
border-radius:12px;
transition:.3s;
}
.actGraphicFinalCta88FeatureList > div:hover{
border-color:rgba(240,185,11,.45);
transform:translateX(7px);
}
.actGraphicFinalCta88FeatureList i{
width:38px;
height:38px;
display:flex;
align-items:center;
justify-content:center;
border-radius:10px;
background:rgba(240,185,11,.10);
color:#F0B90B;
}
.actGraphicFinalCta88FeatureList span{
color:#FFFFFF;
font-size:15px;
font-weight:600;
}
/* =========================================
CARD BOTTOM
========================================= */
.actGraphicFinalCta88CardBottom{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:15px;
margin-top:24px;
padding-top:24px;
border-top:1px solid rgba(255,255,255,.08);
}
.actGraphicFinalCta88CardBottom small{
display:block;
color:#848E9C;
font-size:12px;
margin-bottom:5px;
}
.actGraphicFinalCta88CardBottom strong{
color:#FFFFFF;
font-size:14px;
}
/* =========================================
RESPONSIVE
========================================= */
@media(max-width:991px){
.actGraphicFinalCta88Wrapper{
grid-template-columns:1fr;
gap:40px;
padding:42px;
}
.actGraphicFinalCta88Content h2{
font-size:45px;
}
}
@media(max-width:768px){
.actGraphicFinalCta88Section{
padding:55px 0;
}
.actGraphicFinalCta88Wrapper{
padding:30px;
border-radius:22px;
}
.actGraphicFinalCta88Content h2{
font-size:38px;
}
.actGraphicFinalCta88TrustRow{
grid-template-columns:1fr;
}
}
@media(max-width:576px){
.actGraphicFinalCta88Wrapper{
padding:24px 18px;
}
.actGraphicFinalCta88Tag{
font-size:20px;
letter-spacing:2px;
}
.actGraphicFinalCta88Content h2{
font-size:32px;
}
.actGraphicFinalCta88Content > p{
font-size:15px;
}
.actGraphicFinalCta88Actions{
align-items:stretch;
flex-direction:column;
}
.actGraphicFinalCta88PrimaryBtn,
.actGraphicFinalCta88SecondaryBtn{
width:100%;
}
.actGraphicFinalCta88Card{
padding:25px 20px;
}
.actGraphicFinalCta88Card h3{
font-size:24px;
}
.actGraphicFinalCta88CardBottom{
grid-template-columns:1fr;
}
}
/*=========================================
ENROLL SECTION
=========================================*/
.actEnrollHub82Section{
width:100%;
background:#181d25;
padding:10px 0;
}
.actEnrollHub82Wrapper{
width:100%;
max-width:1500px;
margin:0 auto;
}
/*=========================================
TOP HEADING
=========================================*/
.actEnrollHub82Heading{
max-width:900px;
margin:0 auto 38px;
text-align:center;
}
/*=========================================
TAG
=========================================*/
.actEnrollHub82TagWrap{
display:flex;
justify-content:center;
align-items:center;
margin-bottom:18px;
}
/* Remove Tag Line */
.actEnrollHub82TagWrap::before,
.actEnrollHub82TagWrap::after,
.actEnrollHub82Tag::before,
.actEnrollHub82Tag::after{
content:none !important;
display:none !important;
}
.actEnrollHub82Tag{
display:inline-block;
color:#F0B90B;
font-size:20px;
font-weight:800;
letter-spacing:3px;
text-transform:uppercase;
}
/*=========================================
MAIN HEADING
=========================================*/
.actEnrollHub82Heading h2{
margin:0 0 18px;
color:#ffffff;
font-size:clamp(38px,4.7vw,68px);
font-weight:700;
line-height:1.08;
letter-spacing:-2px;
}
.actEnrollHub82Heading h2 span{
display:block;
color:#F0B90B;
}
/*=========================================
MAIN GRID
=========================================*/
.actEnrollHub82Grid{
display:grid;
grid-template-columns:minmax(0,1.25fr) minmax(380px,.75fr);
gap:24px;
align-items:stretch;
}
/*=========================================
COURSE HIGHLIGHTS BOX
=========================================*/
.actEnrollHub82Highlights{
background:#222832;
border:1px solid #343B46;
border-radius:20px;
padding:35px 30px;
}
/*=========================================
BLOCK HEADING
=========================================*/
.actEnrollHub82BlockHeading{
margin-bottom:25px;
}
.actEnrollHub82BlockHeading > span{
display:block;
color:#F0B90B;
font-size:13px;
font-weight:800;
letter-spacing:2px;
text-transform:uppercase;
margin-bottom:8px;
}
.actEnrollHub82BlockHeading h3{
margin:0;
color:#ffffff;
font-size:32px;
font-weight:700;
line-height:1.2;
}
/*=========================================
HIGHLIGHTS LIST
=========================================*/
.actEnrollHub82List{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:16px;
}
/*=========================================
HIGHLIGHT ITEM
=========================================*/
.actEnrollHub82Item{
min-height:125px;
display:flex;
align-items:flex-start;
gap:16px;
background:#191E26;
border:1px solid #2B3139;
border-radius:14px;
padding:20px 18px;
transition:.35s ease;
}
.actEnrollHub82Item:hover{
transform:translateY(-5px);
border-color:#DFA300;
box-shadow:0 15px 35px rgba(223,163,0,.12);
}
/*=========================================
ITEM ICON
=========================================*/
.actEnrollHub82Icon{
width:46px;
height:46px;
min-width:46px;
display:flex;
justify-content:center;
align-items:center;
background:#F0B90B;
color:#171B22;
border-radius:11px;
font-size:18px;
}
.actEnrollHub82Item h4{
margin:0 0 7px;
color:#ffffff;
font-size:17px;
font-weight:700;
line-height:1.3;
}
.actEnrollHub82Item p{
margin:0;
color:#D3D6DB;
font-size:15px;
line-height:1.7;
}
/*=========================================
ENROLL CARD
=========================================*/
.actEnrollHub82Card{
position:relative;
display:flex;
flex-direction:column;
align-items:center;
text-align:center;
background:linear-gradient(
145deg,
#1B1A13 0%,
#11151B 55%,
#101318 100%
);
border:1px solid #8B6A00;
border-radius:20px;
padding:48px 28px 28px;
overflow:hidden;
}
/*=========================================
LIMITED BADGE
=========================================*/
.actEnrollHub82Badge{
position:absolute;
top:18px;
right:18px;
padding:8px 13px;
border:1px solid #7A5D00;
border-radius:30px;
background:rgba(223,163,0,.08);
color:#DFA300;
font-size:11px;
font-weight:800;
letter-spacing:1.5px;
text-transform:uppercase;
}
/*=========================================
CARD ICON
=========================================*/
.actEnrollHub82CardIcon{
width:68px;
height:68px;
display:flex;
justify-content:center;
align-items:center;
margin-bottom:16px;
background:#DFA300;
color:#171B22;
border-radius:17px;
font-size:25px;
transform:rotate(-5deg);
}
.actEnrollHub82CardIcon i{
transform:rotate(5deg);
}
/*=========================================
UPCOMING LABEL
=========================================*/
.actEnrollHub82Label{
display:block;
margin-bottom:12px;
color:#F0B90B;
font-size:13px;
font-weight:800;
letter-spacing:2px;
text-transform:uppercase;
}
.actEnrollHub82Card > h3{
margin:0 0 22px;
color:#ffffff;
font-size:30px;
font-weight:500;
line-height:1.3;
}
/*=========================================
COURSE DETAILS
=========================================*/
.actEnrollHub82Details{
width:100%;
display:flex;
flex-direction:column;
gap:10px;
margin-bottom:20px;
}
.actEnrollHub82Detail{
width:100%;
display:flex;
align-items:center;
gap:13px;
padding:14px;
text-align:left;
background:#20252D;
border:1px solid #343A44;
border-radius:11px;
}
.actEnrollHub82Detail > i{
width:34px;
height:34px;
min-width:34px;
display:flex;
justify-content:center;
align-items:center;
background:rgba(223,163,0,.15);
color:#F0B90B;
border-radius:9px;
font-size:14px;
}
.actEnrollHub82Detail div{
display:flex;
flex-direction:column;
gap:3px;
}
.actEnrollHub82Detail span{
color:#93A0B3;
font-size:12px;
line-height:1.3;
}
.actEnrollHub82Detail strong{
color:#ffffff;
font-size:14px;
font-weight:700;
}
/*=========================================
ENROLL ACTIONS
=========================================*/
.actEnrollHub82Actions{
width:100%;
margin-top:auto;
}
.actEnrollHub82Btn{
width:100%;
min-height:50px;
display:flex;
justify-content:center;
align-items:center;
gap:12px;
background:#F0B90B;
color:#111418;
border:1px solid #DFA300;
border-radius:10px;
font-size:15px;
font-weight:700;
text-decoration:none;
transition:.35s ease;
}
.actEnrollHub82Btn:hover{
background:transparent;
color:#DFA300;
transform:translateY(-3px);
box-shadow:0 12px 30px rgba(223,163,0,.18);
}
.actEnrollHub82Btn i{
transition:.35s ease;
}
.actEnrollHub82Btn:hover i{
transform:translateX(5px);
}
/*=========================================
RESPONSIVE — TABLET
=========================================*/
@media(max-width:1100px){
.actEnrollHub82Grid{
grid-template-columns:1fr;
}
.actEnrollHub82Card{
max-width:700px;
width:100%;
margin:0 auto;
}
}
/*=========================================
RESPONSIVE — MOBILE
=========================================*/
@media(max-width:768px){
.actEnrollHub82Section{
padding:10px 15px;
}
.actEnrollHub82Heading{
margin-bottom:30px;
}
.actEnrollHub82Heading h2{
font-size:40px;
letter-spacing:-1px;
}
.actEnrollHub82List{
grid-template-columns:1fr;
}
.actEnrollHub82Highlights{
padding:28px 20px;
}
.actEnrollHub82BlockHeading h3{
font-size:28px;
}
.actEnrollHub82Card{
padding:65px 20px 24px;
}
.actEnrollHub82Card > h3{
font-size:26px;
}
}
/*=========================================
RESPONSIVE — SMALL MOBILE
=========================================*/
@media(max-width:480px){
.actEnrollHub82Heading h2{
font-size:33px;
line-height:1.15;
}
.actEnrollHub82Tag{
font-size:20px;
letter-spacing:2px;
}
.actEnrollHub82Highlights{
padding:24px 15px;
}
.actEnrollHub82Item{
padding:18px 14px;
}
.actEnrollHub82Badge{
top:15px;
right:15px;
}
}
/*====================================
COURSE HIGHLIGHTS
====================================*/
.course-highlights{
background:#222832;
border:1px solid rgba(255,255,255,.08);
border-radius:24px;
padding:32px;
}
.block-heading{
margin-bottom:24px;
}
.block-heading span{
display:block;
margin-bottom:8px;
color:#F0B90B;
font-size:12px;
font-weight:800;
letter-spacing:2px;
}
.block-heading h3{
margin:0;
color:#ffffff;
font-size:32px;
font-weight:750;
}
.highlights-list{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:16px;
}
.highlight-item{
min-height:118px;
display:flex;
align-items:flex-start;
gap:15px;
padding:20px;
background:#191e26;
border:1px solid rgba(255,255,255,.06);
border-radius:16px;
transition:
transform .3s ease,
border-color .3s ease,
box-shadow .3s ease;
}
.highlight-item:hover{
transform:translateY(-5px);
border-color:rgba(223,163,0,.45);
box-shadow:
0 14px 30px rgba(0,0,0,.28),
0 0 20px rgba(223,163,0,.10);
}
.highlight-icon{
width:48px;
height:48px;
flex-shrink:0;
display:flex;
align-items:center;
justify-content:center;
background:#DFA300;
color:#181a20;
border-radius:13px;
font-size:20px;
}
.highlight-item h4{
margin:0 0 7px;
color:#ffffff;
font-size:18px;
font-weight:700;
}
/*====================================
ENROLL CARD
====================================*/
.enroll-card{
position:relative;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
padding:38px 32px;
background:
radial-gradient(
circle at top,
rgba(223,163,0,.12),
transparent 40%
),
#111419;
border:1px solid rgba(223,163,0,.50);
border-radius:24px;
text-align:center;
box-shadow:0 20px 45px rgba(0,0,0,.28);
}
.limited-badge{
position:absolute;
top:18px;
right:18px;
padding:7px 12px;
background:rgba(223,163,0,.12);
border:1px solid rgba(223,163,0,.38);
border-radius:50px;
color:#DFA300;
font-size:11px;
font-weight:800;
letter-spacing:1px;
}
.enroll-card-icon{
width:72px;
height:72px;
margin-bottom:18px;
display:flex;
align-items:center;
justify-content:center;
background:#DFA300;
color:#181a20;
border-radius:20px;
font-size:28px;
transform:rotate(-6deg);
}
.upcoming-label{
margin-bottom:10px;
color:#DFA300;
font-size:13px;
font-weight:800;
letter-spacing:1.5px;
text-transform:uppercase;
}
.enroll-card h3{
margin:0 0 14px;
color:#ffffff;
font-size:31px;
line-height:1.2;
}
.enroll-card-description{
margin:0 0 24px;
color:#b7bdc6;
font-size:15px;
line-height:1.65;
}
.course-details{
width:100%;
margin-bottom:24px;
display:grid;
gap:11px;
}
.course-detail{
display:flex;
align-items:center;
gap:13px;
padding:13px 15px;
background:#1d222a;
border:1px solid rgba(255,255,255,.06);
border-radius:12px;
text-align:left;
}
.course-detail > i{
width:34px;
height:34px;
flex-shrink:0;
display:flex;
align-items:center;
justify-content:center;
background:rgba(223,163,0,.12);
color:#DFA300;
border-radius:9px;
}
.course-detail div{
display:flex;
flex-direction:column;
gap:2px;
}
.course-detail span{
color:#9099a8;
font-size:12px;
}
.course-detail strong{
color:#ffffff;
font-size:15px;
}
.enroll-actions{
width:100%;
display:grid;
gap:11px;
}
.enroll-primary-btn,
.enroll-outline-btn{
width:100%;
display:flex;
align-items:center;
justify-content:center;
gap:10px;
padding:15px 18px;
border-radius:10px;
font-size:15px;
font-weight:750;
text-decoration:none;
transition:.3s ease;
}
.enroll-primary-btn{
background:#DFA300;
color:#181a20;
}
.enroll-primary-btn:hover{
background:#f0b90b;
color:#181a20;
transform:translateY(-3px);
}
.enroll-outline-btn{
background:transparent;
border:1px solid #DFA300;
color:#DFA300;
}
.enroll-outline-btn:hover{
background:rgba(223,163,0,.10);
color:#DFA300;
transform:translateY(-3px);
}
/*====================================
RESPONSIVE
====================================*/
@media(max-width:1050px){
.enroll-main-grid{
grid-template-columns:1fr;
}
.enroll-card{
min-height:auto;
}
}
@media(max-width:760px){
.enroll-section{
padding:42px 20px;
}
.highlights-list{
grid-template-columns:1fr;
}
.enroll-stats{
grid-template-columns:repeat(2,minmax(0,1fr));
}
}
@media(max-width:500px){
.enroll-section{
padding:34px 15px;
}
.course-highlights,
.enroll-card{
padding:24px 18px;
}
.enroll-heading h2{
font-size:37px;
letter-spacing:-1px;
}
.enroll-heading p{
font-size:16px;
}
.enroll-stats{
grid-template-columns:1fr;
}
.stat-item{
justify-content:flex-start;
}
}
.section-tag{
display: inline-block;
margin: 0;
padding: 0;
color: #F0B90B;
font-size: 15px;
font-weight: 700;
letter-spacing: 2px;
text-align: left;
}
.career-content h2{
margin: 0 !important;
padding: 0 !important;
line-height: 1.1;
}
html,
body{
margin:0;
padding:0;
overflow-x:hidden;
}
.container{
max-width:1320px;
width:100%;
margin:0 auto;
padding:10px 15px;
color:#F0B90B
}
.dashboard-header h2 span{
color:#F0B90B !important;
}
/* =========================
Global Settings
========================= */
:root {
--binance-black: #0b0e11;
--binance-dark: #181a20;
--binance-card: #1e2329;
--binance-card-light: #2b3139;
--binance-yellow: #fcd535;
--binance-yellow-hover: #f0b90b;
--white: #ffffff;
--text-gray: #b7bdc6;
--muted-gray: #848e9c;
--border-color: rgba(255, 255, 255, 0.08);
}
html {
scroll-behavior: smooth;
}
body {
min-height: 100vh;
background: var(--binance-black);
color: var(--white);
font-family: "Inter", sans-serif;
}
/* =========================
About Section
========================= */
.about-section {
padding: 0px 24px;
background:
radial-gradient(
circle at 15% 10%,
rgba(252, 213, 53, 0.08),
transparent 30%
),
var(--binance-black);
}
.about-container {
width: 100%;
max-width: 1380px;
margin: 0 auto;
padding: 24px;
background: var(--binance-dark);
border: 1px solid var(--border-color);
border-radius: 34px;
}
/* =========================
Main Grid
========================= */
.about-grid {
display: grid;
grid-template-columns: 2fr 1fr 1fr;
grid-template-rows: 360px 360px;
gap: 20px;
}
/* =========================
Common Card Styling
========================= */
.about-card,
.stat-card,
.clients-card,
.team-image-card {
position: relative;
overflow: hidden;
border-radius: 26px;
padding: 0px;
}
/* =========================
About ACT Card
========================= */
.about-card {
grid-column: 1;
grid-row: 1;
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 34px;
background:
linear-gradient(
145deg,
#fcd535 0%,
#f0b90b 100%
);
color: var(--binance-black);
}
.about-card::before {
content: "";
position: absolute;
top: -200px;
right: -100px;
width: 240px;
height: 240px;
border: 1px solid rgba(11, 14, 17, 0.12);
border-radius: 50%;
}
.about-card::after {
content: "";
position: absolute;
right: 40px;
bottom: -90px;
width: 180px;
height: 180px;
background: rgba(255, 255, 255, 0.12);
border-radius: 50%;
}
.about-content,
.primary-button {
position: relative;
z-index: 2;
}
.section-badge {
display: inline-flex;
align-items: center;
gap: 9px;
width: fit-content;
margin-bottom: 24px;
padding: 9px 14px;
border: 1px solid rgba(11, 14, 17, 0.18);
border-radius: 50px;
font-size: 13px;
font-weight: 600;
}
.badge-dot {
width: 7px;
height: 7px;
background: var(--binance-black);
border-radius: 50%;
}
.about-card h1 {
max-width: 500px;
margin-bottom: 18px;
font-size: clamp(32px, 3vw, 50px);
font-weight: 800;
line-height: 1.05;
letter-spacing: -2px;
text-transform: uppercase;
}
.about-card p {
max-width: 580px;
margin-bottom: 8px;
color: rgba(11, 14, 17, 0.75);
font-size: 16px;
line-height: 1.5;
}
.primary-button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
width: fit-content;
padding: 14px 22px;
background: var(--binance-black);
color: var(--white);
border-radius: 50px;
text-decoration: none;
font-size: 14px;
font-weight: 700;
transition:
transform 0.3s ease,
background 0.3s ease;
}
.primary-button:hover {
background: var(--binance-card);
transform: translateY(-3px);
}
.button-arrow {
font-size: 17px;
}
/* =========================
Statistics Cards
========================= */
.stat-card {
display: flex;
flex-direction: column;
justify-content: space-between;
height: 100%;
padding: 32px 26px;
background:
linear-gradient(
145deg,
var(--binance-card) 0%,
#252a31 100%
);
border: 1px solid var(--border-color);
transition:
transform 0.3s ease,
border-color 0.3s ease;
}
.stat-card:hover {
transform: translateY(-6px);
border-color: rgba(252, 213, 53, 0.4);
}
.projects-card {
grid-column: 2;
grid-row: 1;
}
.experience-card {
grid-column: 3;
grid-row: 1;
}
.stat-card h2,
.clients-card h2 {
color: var(--primary);
font-size: 10;
line-height: 1;
letter-spacing: 0px;
}
.stat-card h2 span,
.clients-card h2 span {
font-size: 0.65em;
}
.stat-card p {
margin-top: 12px;
color: var(--text-gray);
font-size: 15px;
}
.card-button {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
padding: 14px 18px;
background: var(--white);
color: var(--binance-black);
border-radius: 50px;
text-decoration: none;
font-size: 13px;
font-weight: 700;
transition:
background 0.3s ease,
transform 0.3s ease;
}
.card-button:hover {
background: var(--binance-yellow);
transform: translateY(-2px);
}
/* =========================
Team Image Card
========================= */
.team-image-card {
grid-column: 1 / span 2;
grid-row: 2;
min-height: 360px;
background: var(--binance-card);
}
.team-image-card img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.6s ease;
}
.team-image-card:hover img {
transform: scale(1.05);
}
.image-overlay {
position: absolute;
inset: 0;
background:
linear-gradient(
90deg,
rgba(11, 14, 17, 0.8) 0%,
rgba(11, 14, 17, 0.25) 60%,
rgba(11, 14, 17, 0.05) 100%
);
}
.image-content {
position: absolute;
left: 34px;
bottom: 32px;
max-width: 500px;
z-index: 2;
}
.image-content span {
display: inline-block;
margin-bottom: 10px;
padding: 8px 13px;
background: var(--binance-yellow);
color: var(--binance-black);
border-radius: 50px;
font-size: 12px;
font-weight: 700;
}
.image-content h3 {
font-size: clamp(24px, 3vw, 38px);
line-height: 1.15;
letter-spacing: -1px;
}
/* =========================
Client Card
========================= */
.clients-card {
grid-column: 3;
grid-row: 2;
display: flex;
flex-direction: column;
justify-content: space-between;
height: 100%;
padding: 32px 26px;
background:
linear-gradient(
145deg,
#252a31 0%,
var(--binance-card) 100%
);
border: 1px solid var(--border-color);
}
.client-heading {
margin-top: 12px;
color: var(--white);
font-size: 17px;
font-weight: 600;
}
.client-description {
margin-top: 14px;
color: var(--muted-gray);
font-size: 13px;
line-height: 1.6;
}
.client-bottom {
display: flex;
flex-direction: column;
gap: 22px;
}
.client-avatars {
display: flex;
align-items: center;
}
.client-avatars img,
.more-clients {
width: 46px;
height: 46px;
margin-left: -10px;
border: 3px solid var(--binance-card);
border-radius: 50%;
}
.client-avatars img:first-child {
margin-left: 0;
}
.client-avatars img {
object-fit: cover;
}
.more-clients {
display: flex;
align-items: center;
justify-content: center;
background: var(--binance-yellow);
color: var(--binance-black);
font-size: 11px;
font-weight: 800;
}
.rating {
display: flex;
flex-direction: column;
gap: 6px;
}
.rating span {
color: var(--binance-yellow);
font-size: 16px;
letter-spacing: 3px;
}
.rating small {
color: var(--text-gray);
font-size: 12px;
}
/* =========================
Responsive Design
========================= */
@media screen and (max-width: 1024px) {
.about-grid {
grid-template-columns: 1fr 1fr;
grid-template-rows: auto;
}
.about-card {
grid-column: 1 / -1;
grid-row: auto;
min-height: 380px;
}
.projects-card {
grid-column: 1;
grid-row: auto;
min-height: 300px;
}
.experience-card {
grid-column: 2;
grid-row: auto;
min-height: 300px;
}
.team-image-card {
grid-column: 1 / -1;
grid-row: auto;
min-height: 400px;
}
.clients-card {
grid-column: 1 / -1;
grid-row: auto;
min-height: 300px;
}
}
@media screen and (max-width: 650px) {
.about-section {
padding: 25px 12px;
}
.about-container {
padding: 12px;
border-radius: 24px;
}
.about-grid {
grid-template-columns: 1fr;
gap: 14px;
}
.about-card,
.projects-card,
.experience-card,
.team-image-card,
.clients-card {
grid-column: 1;
grid-row: auto;
}
.about-card {
min-height: 470px;
padding: 28px 22px;
}
.about-card h1 {
font-size: 34px;
letter-spacing: -1.5px;
}
.stat-card,
.clients-card {
min-height: 280px;
padding: 28px 22px;
}
.team-image-card {
min-height: 330px;
}
.image-content {
left: 22px;
right: 22px;
bottom: 22px;
}
.image-content h3 {
font-size: 27px;
}
}
/*====================================
OUR Environment
====================================*/
.culture-section {
background: #0b0e11;
padding: 0px;
margin: 0;
}
.culture-wrapper{
display:grid;
grid-template-columns:1fr 1fr;
width:100%;
max-width:100%;
min-height:590px;
margin:0;
overflow:hidden;
background:#181A20;
border:1px solid rgba(255,255,255,.08);
border-radius:0;
}
/*====================================
LEFT VISUAL
====================================*/
.culture-visual {
position: relative;
display: flex;
align-items: flex-end;
min-height: 590px;
padding: 50px;
overflow: hidden;
background:#242A33;
}
.culture-visual::before {
position: absolute;
inset: 0;
background:
linear-gradient(
135deg,
rgba(255, 255, 255, 0.12),
transparent 40%
);
content: "";
}
.culture-visual-content {
position: relative;
z-index: 5;
max-width: 430px;
}
.visual-label {
display: inline-block;
margin-bottom: 16px;
padding: 9px 15px;
background: rgba(11, 14, 17, 0.12);
border: 1px solid rgba(11, 14, 17, 0.18);
color: #F0B90B;
border-radius: 50px;
font-size: 12px;
font-weight: 800;
letter-spacing: 2px;
}
.culture-visual-content h3 {
margin-bottom: 15px;
color: #F0B90B;
font-size: clamp(38px, 4vw, 62px);
font-weight: 900;
line-height: 1;
letter-spacing: -2px;
}
.culture-visual-content h3 span {
display: block;
color: #FFFFFF;
}
.culture-visual-content p {
max-width: 390px;
color: var(--text-gray);
font-size: 16px;
line-height: 1.7;
}
/* Decorative Abstract Shapes */
.culture-shape {
position: absolute;
border-radius: 45% 55% 60% 40%;
opacity: 0.9;
}
.shape-one {
top: 70px;
left: 80px;
width: 190px;
height: 165px;
background:#F0B90B;
transform: rotate(-16deg);
}
.shape-two {
top: 150px;
right: 95px;
width: 210px;
height: 190px;
background: #F0B90B;
transform: rotate(18deg);
}
.shape-three {
top: 255px;
left: 190px;
width: 155px;
height: 145px;
background: #F0B90B;
transform: rotate(8deg);
}
.culture-center-logo {
position: absolute;
top: 190px;
left: 50%;
z-index: 4;
display: flex;
width: 125px;
height: 125px;
align-items: center;
justify-content: center;
background: #181a20;
border: 10px solid rgba(255, 255, 255, 0.32);
color: #fcd535;
border-radius: 50%;
font-size: 34px;
font-weight: 900;
transform: translateX(-50%);
box-shadow: 0 20px 45px rgba(0, 0, 0, 0.3);
}
/*====================================
RIGHT CONTENT PANEL
====================================*/
.culture-content {
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
padding: 65px 60px;
background: #ffffff;
border-radius: 0px;
}
.culture-tag {
display: inline-block;
width: fit-content;
margin-bottom: 17px;
color: #f0b90b;
font-size: 13px;
font-weight: 800;
letter-spacing: 3px;
text-transform: uppercase;
}
.culture-content h2 {
max-width: 620px;
margin-bottom: 24px;
color: #181a20;
font-size: clamp(40px, 4.3vw, 66px);
font-weight: 900;
line-height: 1.05;
letter-spacing: -2.5px;
}
.culture-content h2 span {
display: block;
color: #f0b90b;
}
.culture-description {
max-width: 650px;
margin-bottom: 30px;
color: #707a8a;
font-size: 16px;
line-height: 1.8;
}
/* Feature List */
.culture-features {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 15px 20px;
margin-bottom: 34px;
}
.culture-feature {
display: flex;
align-items: center;
gap: 11px;
color: #181a20;
font-size: 14px;
font-weight: 700;
}
.feature-check {
display: flex;
width: 28px;
height: 28px;
flex-shrink: 0;
align-items: center;
justify-content: center;
background: #fcd535;
color: #181a20;
border-radius: 50%;
font-size: 14px;
font-weight: 900;
}
/* CTA Button */
.culture-button {
display: inline-flex;
width: fit-content;
align-items: center;
justify-content: center;
gap: 12px;
padding: 16px 28px;
background: #181a20;
color: #ffffff;
border-radius: 12px;
font-size: 14px;
font-weight: 800;
text-decoration: none;
transition:
background 0.3s ease,
color 0.3s ease,
transform 0.3s ease;
}
.culture-button:hover {
background: #fcd535;
color: #181a20;
transform: translateY(-3px);
}
/*====================================
TABLET
====================================*/
@media (max-width: 1050px) {
.culture-wrapper {
grid-template-columns: 1fr;
}
.culture-visual {
min-height: 500px;
}
.culture-content {
border-radius: 34px 34px 0 0;
}
}
/*====================================
MOBILE
====================================*/
@media (max-width: 650px) {
.culture-section {
padding: 55px 14px;
}
.culture-wrapper {
border-radius: 24px;
}
.culture-visual {
min-height: 440px;
padding: 30px 24px;
}
.culture-content {
padding: 45px 25px;
border-radius: 24px 24px 0 0;
}
.culture-content h2 {
font-size: 38px;
letter-spacing: -1.5px;
}
.culture-features {
grid-template-columns: 1fr;
}
.shape-one {
top: 65px;
left: 25px;
width: 145px;
height: 130px;
}
.shape-two {
top: 140px;
right: 20px;
width: 165px;
height: 150px;
}
.shape-three {
top: 245px;
left: 100px;
width: 125px;
height: 115px;
}
.culture-center-logo {
top: 180px;
width: 100px;
height: 100px;
font-size: 28px;
}
.culture-visual-content h3 {
font-size: 42px;
}
}
/*====================================
JOIN OUR TEAM SECTION
====================================*/
.join-team-section {
width: 100%;
margin: 0;
padding: 0px 0;
background: #0b0e11;
}
.join-team-container {
width: 100%;
max-width: 100%;
margin: 0;
}
/*====================================
JOIN TEAM HERO
====================================*/
.join-team-hero {
max-width: 900px;
margin: 0 auto 35px;
text-align: center;
}
.join-team-tag,
.panel-label {
display: inline-block;
color: #f0b90b;
font-size: 20px;
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
margin: 10px;
}
.join-team-hero h2 {
margin: 0px 0 0;
color: #ffffff;
font-size: clamp(42px, 5vw, 68px);
font-weight: 900;
line-height: 1.08;
letter-spacing: -2.5px;
}
.join-team-hero h2 span {
display: block;
color: #f0b90b;
}
/*====================================
CAREER BOARD
====================================*/
.career-board {
display: grid;
grid-template-columns: 0.8fr 1.5fr;
gap: 24px;
/* Hiring box ke upar ki extra space control */
margin: 0 0 20px;
}
/* Why Join Panel */
.why-join-panel {
padding: 42px 36px;
background: linear-gradient(
145deg,
#fcd535 0%,
#f0b90b 100%
);
color: #181a20;
border-radius: 26px;
}
.why-join-panel .panel-label {
color: #181a20;
}
.why-join-panel h3 {
margin: 0 0 32px;
font-size: 34px;
font-weight: 900;
line-height: 1.15;
}
.join-benefits {
display: flex;
flex-direction: column;
gap: 18px;
}
.join-benefit {
display: flex;
align-items: center;
gap: 13px;
}
.join-benefit span {
display: flex;
width: 30px;
height: 30px;
flex-shrink: 0;
align-items: center;
justify-content: center;
background: #181a20;
color: #fcd535;
border-radius: 50%;
font-size: 14px;
font-weight: 900;
}
.join-benefit p {
margin: 0;
font-size: 15px;
font-weight: 700;
}
/*====================================
CURRENT OPENINGS
====================================*/
.openings-panel {
padding: 42px;
background: #181a20;
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 26px;
}
.openings-heading {
margin-bottom: 28px;
}
.openings-heading p {
margin: 10px 0 0;
color: #848e9c;
font-size: 14px;
}
.job-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 25px;
padding: 26px;
background: #1e2329;
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 18px;
transition:
transform 0.3s ease,
border-color 0.3s ease,
background 0.3s ease;
}
.job-row + .job-row {
margin-top: 18px;
}
.job-row:hover {
background: #242a33;
border-color: rgba(252, 213, 53, 0.6);
transform: translateY(-4px);
}
.job-info h3 {
margin: 0 0 10px;
color: #ffffff;
font-size: 22px;
font-weight: 800;
}
.job-meta {
display: flex;
align-items: center;
gap: 9px;
color: #b7bdc6;
font-size: 13px;
}
.meta-dot {
width: 5px;
height: 5px;
background: #fcd535;
border-radius: 50%;
}
.job-info p {
margin: 10px 0 0;
color: #848e9c;
font-size: 13px;
}
.apply-button {
display: inline-flex;
flex-shrink: 0;
align-items: center;
justify-content: center;
gap: 10px;
padding: 13px 20px;
background: #f0b90b;
color: #181a20;
border-radius: 10px;
font-size: 13px;
font-weight: 800;
text-decoration: none;
transition:
background 0.3s ease,
transform 0.3s ease;
}
.apply-button:hover {
background: #fcd535;
transform: translateX(4px);
}
/*====================================
HIRING PROCESS
====================================*/
.hiring-process {
width: 100%;
margin: 0;
padding-top:0px;
padding-bottom: 20px;
background: #181a20;
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 0px;
}
.process-title {
margin:32px;
text-align: center;
}
.process-title h2 {
margin: 12px 0 0;
color: #ffffff;
font-size: clamp(34px, 4vw, 50px);
font-weight: 900;
line-height: 1.15;
}
.hiring-timeline {
position: relative;
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 20px;
margin: 0;
padding: 0;
}
.hiring-line {
position: absolute;
top: 34px;
left: 10%;
width: 80%;
height: 3px;
background: linear-gradient(
90deg,
#fcd535,
#f0b90b
);
}
.hiring-step {
position: relative;
z-index: 2;
margin: 0;
text-align: center;
}
.step-circle {
display: flex;
width: 68px;
height: 68px;
align-items: center;
justify-content: center;
margin: 0 auto 16px;
background: #f0b90b;
border: 7px solid #181a20;
color: #181a20;
border-radius: 50%;
font-size: 18px;
font-weight: 900;
box-shadow: 0 10px 25px rgba(252, 213, 53, 0.18);
}
.hiring-step h3 {
margin: 0 0 6px;
color: #ffffff;
font-size: 18px;
font-weight: 800;
}
.hiring-step p {
margin: 0;
color: #848e9c;
font-size: 13px;
line-height: 1.4;
}
/*====================================
OPEN APPLICATION
====================================*/
.open-application {
margin: 0;
padding: 10px;
overflow: hidden;
background:
radial-gradient(
circle at 15% 20%,
rgba(252, 213, 53, 0.2),
transparent 27%
),
#181a20;
border: 1px solid rgba(252, 213, 53, 0.2);
border-radius: 0px;
text-align: center;
}
.open-application-content {
max-width: 780px;
margin: 0 auto;
}
.open-application h2 {
margin: 16px 0 18px;
color: #ffffff;
font-size: clamp(38px, 4.5vw, 58px);
font-weight: 900;
line-height: 1.1;
}
.open-application p {
max-width: 700px;
margin: 0 auto 30px;
color: #b7bdc6;
font-size: 16px;
line-height: 1.8;
}
.application-buttons {
display: flex;
justify-content: center;
gap: 14px;
flex-wrap: wrap;
}
.primary-career-button,
.secondary-career-button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 15px 26px;
border-radius: 11px;
font-size: 14px;
font-weight: 800;
text-decoration: none;
transition:
transform 0.3s ease,
background 0.3s ease,
color 0.3s ease;
}
.primary-career-button {
background: #f0b90b;
color: #181a20;
}
.secondary-career-button {
background: #f0b90b;
border: 1px solid rgba(255, 255, 255, 0.18);
color: #111;
}
.primary-career-button:hover,
.secondary-career-button:hover {
transform: translateY(-3px);
}
.primary-career-button:hover {
background: goldenrod;
color: #181a20;
}
.secondary-career-button:hover {
background: goldenrod;
color: #181a20;
}
/*====================================
TABLET
====================================*/
@media (max-width: 992px) {
.career-board {
grid-template-columns: 1fr;
}
.hiring-timeline {
grid-template-columns: repeat(3, 1fr);
row-gap: 45px;
}
.hiring-line {
display: none;
}
}
/*====================================
MOBILE
====================================*/
@media (max-width: 650px) {
.join-team-section {
padding: 15px 0;
}
.join-team-hero {
margin-bottom: 25px;
}
.career-board {
gap: 16px;
margin-bottom: 16px;
}
.why-join-panel,
.openings-panel {
padding: 30px 22px;
}
.hiring-process {
padding: 30px 20px 25px;
}
.process-title {
margin-bottom: 28px;
}
.why-join-panel h3 {
font-size: 29px;
}
.job-row {
align-items: flex-start;
flex-direction: column;
}
.apply-button {
width: 100%;
}
.hiring-timeline {
grid-template-columns: 1fr;
gap: 30px;
}
.open-application {
margin-top: 16px;
padding: 42px 22px;
}
.application-buttons {
flex-direction: column;
}
.primary-career-button,
.secondary-career-button {
width: 100%;
}
}
.footer .footer-links{
text-align: center !important;
}
.footer .footer-links h3{
width: 100% !important;
text-align: center !important;
}
.footer .footer-links ul{
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
text-align: center !important;
}
.footer .footer-links ul li{
width: 100% !important;
text-align: center !important;
}
.footer .footer-links ul li a{
display: inline-block !important;
text-align: center !important;
transform: none;
}
/*====================================
LIVE CLASSROOM ABOUT SECTION
====================================*/
.live-classroom-about{
width:100%;
background:
radial-gradient(
circle at 80% 30%,
rgba(240,185,11,.10),
transparent 32%
),
#0B0E11;
padding:15px 28px;
}
.live-classroom-wrapper{
display:grid;
grid-template-columns:52% 48%;
gap:40px;
align-items:center;
}
.classroom-gallery,
.classroom-about-content{
width:100%;
max-width:100%;
padding-left:15px;
}
/*====================================
LEFT IMAGE GALLERY
====================================*/
.classroom-gallery{
width:95%;
}
.classroom-slider{
position:relative;
width:100%;
height:520px;
overflow:hidden;
border-radius:30px;
}
.classroom-slide{
position:absolute;
inset:0;
width:100%;
height:100%;
overflow:hidden;
opacity:0;
visibility:hidden;
}
.classroom-slide.active{
opacity:1;
visibility:visible;
}
.classroom-slide img{
position:absolute;
inset:0;
width:100% !important;
height:100% !important;
max-width:none !important;
max-height:none !important;
display:block;
object-fit:cover;
object-position:center;
}
.classroom-image-overlay{
position:absolute;
inset:0;
z-index:2;
pointer-events:none;
background:
linear-gradient(
90deg,
rgba(11,14,17,.28),
rgba(11,14,17,.04) 55%,
rgba(11,14,17,.30)
),
linear-gradient(
0deg,
rgba(11,14,17,.35),
transparent 45%
);
}
/*====================================
SLIDER DOTS
====================================*/
.classroom-slider-dots{
min-height:28px;
margin-top:16px;
display:flex;
justify-content:center;
align-items:center;
gap:9px;
}
.classroom-dot{
width:10px;
height:10px;
padding:0;
border:0;
border-radius:50%;
background:#2B3139;
cursor:pointer;
transition:
width .3s ease,
border-radius .3s ease,
background .3s ease,
box-shadow .3s ease;
}
.classroom-dot:hover{
background:#848E9C;
}
.classroom-dot.active{
width:29px;
border-radius:50px;
background:#F0B90B;
box-shadow:0 0 14px rgba(240,185,11,.35);
}
/*====================================
RIGHT CONTENT
====================================*/
.classroom-about-content{
max-width:600px;
margin-left:-30px;
margin-top: -20px;
}
.classroom-about-tag{
display:inline-block;
margin-bottom:8px;
color:#F0B90B;
font-size:15px;
font-weight:700;
letter-spacing:2px;
text-transform:uppercase;
}
.classroom-about-content h1{
margin:0 0 30px;
color:#EAECEF;
font-size:60px;
font-weight:700;
line-height:.98;
letter-spacing:-3px;
}
.classroom-about-content h1 span{
color:#F0B90B;
}
.classroom-about-content p{
margin:0 0 24px;
color:#B7BDC6;
font-size:18px;
line-height:1.62;
}
.classroom-about-content p:last-child{
margin-bottom:0;
}
/*====================================
RESPONSIVE
====================================*/
@media(max-width:1100px){
.live-classroom-wrapper{
grid-template-columns:1fr;
gap:48px;
}
.classroom-slider{
height:570px;
}
.classroom-about-content{
max-width:850px;
}
}
@media(max-width:650px){
.live-classroom-about{
padding:40px 16px;
}
.live-classroom-wrapper{
gap:34px;
}
.classroom-slider{
height:420px;
border-radius:24px;
}
.classroom-about-content h1{
margin-bottom:22px;
font-size:42px;
line-height:1.03;
letter-spacing:-1.8px;
}
.classroom-about-content p{
color:#B7BDC6;
font-size:16px;
line-height:1.7;
}
}
.theme-btn{
display:inline-flex;
align-items:center;
justify-content:center;
padding:12px 30px;
background:#F0B90B;
color:#000;
border-radius:12px;
margin-top:-10px;
text-decoration:none;
font-size:18px;
font-weight:700;
transition:.3s ease;
width:fit-content;
}
.theme-btn:hover{
background:#FCD535;
color:#000;
transform:translateY(-3px);
}
/*====================================
FOOTER FULL WIDTH FIX
====================================*/
/* ====================================
FOOTER MAIN
==================================== */
.footer {
width: 100%;
margin: 0 !important;
padding: 0 !important;
background: #181a20;
border-radius: 0 !important;
box-sizing: border-box;
}
.footer-container {
width: 100% !important;
max-width: none !important;
margin: 0 !important;
padding: 55px 80px 40px !important;
display: grid;
grid-template-columns:
minmax(280px, 1.1fr)
minmax(180px, 0.65fr)
minmax(260px, 0.9fr)
minmax(320px, 1fr);
column-gap: 55px;
row-gap: 40px;
align-items: start;
box-sizing: border-box;
border-radius: 0 !important;
}
/* ====================================
GENERAL FOOTER BOX
==================================== */
.footer-box {
width: 100%;
margin: 0;
padding: 0;
text-align: left;
box-sizing: border-box;
}
/* ====================================
ABOUT SECTION
==================================== */
.footer-about {
display: flex;
flex-direction: column;
align-items: flex-start;
text-align: left;
}
/* Logo Space */
.footer-logo {
width: 100%;
min-height: 85px;
display: flex;
align-items: flex-start;
justify-content: flex-start;
margin: 0 0 22px;
padding: 0;
text-decoration: none;
}
.footer-logo img {
display: block;
width: 190px;
max-width: 100%;
height: 75px;
object-fit: contain;
object-position: left center;
}
/* About Text */
.footer-about-text {
width: 100%;
max-width: 440px;
margin: 0 0 28px;
padding: 0;
color: #c8d2e5;
font-size: 17px;
font-weight: 400;
line-height: 1.9;
text-align: left;
}
/* ====================================
SOCIAL ICONS
==================================== */
.social-icons {
display: flex;
align-items: center;
justify-content: flex-start;
flex-wrap: wrap;
gap: 14px;
margin: 0;
padding: 0;
}
.social-icons a {
width: 50px;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
color: #f0b90b;
background: transparent;
border: 1px solid rgba(240, 185, 11, 0.45);
border-radius: 50%;
font-size: 21px;
text-decoration: none;
transition:
color 0.3s ease,
background-color 0.3s ease,
border-color 0.3s ease,
transform 0.3s ease;
}
.social-icons a:hover {
color: #181a20;
background: #f0b90b;
border-color: #f0b90b;
transform: translateY(-3px);
}
/* ====================================
FOOTER HEADINGS
==================================== */
.footer-box h3 {
position: relative;
display: block;
width: fit-content;
margin: 0 0 40px;
padding: 0 0 16px;
color: #ffffff;
font-size: 28px;
font-weight: 700;
line-height: 1.2;
text-align: left;
}
.footer-box h3::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 72px;
height: 3px;
background: #f0b90b;
border-radius: 4px;
}
/* ====================================
QUICK LINKS AND COURSES
==================================== */
.footer-links,
.footer-courses {
justify-self: start;
align-self: start;
text-align: left !important;
}
.footer-links h3,
.footer-courses h3 {
margin-left: 0 !important;
margin-right: 0 !important;
text-align: left !important;
}
.footer-links h3::after,
.footer-courses h3::after {
left: 0 !important;
transform: none !important;
}
.footer-links ul,
.footer-courses ul {
width: 100%;
display: flex;
flex-direction: column;
align-items: flex-start;
margin: 0;
padding: 0;
list-style: none;
text-align: left !important;
}
.footer-links ul li,
.footer-courses ul li {
width: 100%;
display: block;
margin: 0 0 22px;
padding: 0;
text-align: left !important;
}
.footer-links ul li:last-child,
.footer-courses ul li:last-child {
margin-bottom: 0;
}
.footer-links ul li a,
.footer-courses ul li a {
display: inline-flex;
align-items: center;
justify-content: flex-start;
gap: 9px;
margin: 0;
padding: 0;
color: #c8d2e5;
font-size: 17px;
font-weight: 400;
line-height: 1.5;
text-align: left;
text-decoration: none;
transition:
color 0.3s ease,
transform 0.3s ease;
}
.footer-links ul li a::before,
.footer-courses ul li a::before {
content: "\f105";
display: inline-block;
flex: 0 0 auto;
margin: 0;
padding: 0;
color: #f0b90b;
font-family: "Font Awesome 6 Free";
font-size: 16px;
font-weight: 900;
line-height: 1;
}
.footer-links ul li a:hover,
.footer-courses ul li a:hover {
color: #f0b90b;
transform: translateX(4px);
}
/* ====================================
CONTACT SECTION
==================================== */
.footer-contact {
justify-self: start;
align-self: start;
text-align: left;
}
.footer-contact p {
width: 100%;
display: grid;
grid-template-columns: 32px minmax(0, 1fr);
align-items: start;
column-gap: 14px;
margin: 0 0 24px;
padding: 0;
color: #c8d2e5;
font-size: 17px;
font-weight: 400;
line-height: 1.5;
}
.footer-contact p:last-child {
margin-bottom: 0;
}
.footer-contact p i {
color: #f0b90b;
font-size: 21px;
line-height: 1.5;
text-align: left;
}
.footer-contact p span {
display: block;
margin: 0;
padding: 0;
}
/* ====================================
FOOTER BOTTOM
==================================== */
.footer-bottom {
width: 100%;
min-height: 70px;
display: flex;
align-items: center;
justify-content: center;
margin: 0 !important;
padding: 0 25px;
background: #181a20;
border-top: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 0 !important;
box-sizing: border-box;
}
.footer-bottom p {
margin: 0;
padding: 0;
color: #8f9aae;
font-size: 16px;
line-height: 1.5;
text-align: center;
}
/* ====================================
RESPONSIVE 1200PX
==================================== */
@media (max-width: 1200px) {
.footer-container {
padding: 50px 40px 35px !important;
grid-template-columns:
minmax(240px, 1fr)
minmax(170px, 0.65fr)
minmax(230px, 0.9fr)
minmax(280px, 1fr);
column-gap: 35px;
}
.footer-logo img {
width: 170px;
}
.footer-box h3 {
font-size: 26px;
}
.footer-about-text,
.footer-links ul li a,
.footer-courses ul li a,
.footer-contact p {
font-size: 16px;
}
}
/* ====================================
RESPONSIVE 991PX
==================================== */
@media (max-width: 991px) {
.footer-container {
padding: 45px 25px 30px !important;
grid-template-columns: repeat(2, minmax(0, 1fr));
column-gap: 45px;
row-gap: 45px;
}
.footer-about,
.footer-links,
.footer-courses,
.footer-contact {
justify-self: start;
width: 100%;
}
}
/* ====================================
RESPONSIVE 600PX
==================================== */
@media (max-width: 600px) {
.footer-container {
padding: 38px 16px 25px !important;
grid-template-columns: 1fr;
row-gap: 38px;
}
.footer-logo {
min-height: 70px;
margin-bottom: 18px;
}
.footer-logo img {
width: 160px;
height: 65px;
}
.footer-about-text {
margin-bottom: 24px;
font-size: 16px;
line-height: 1.8;
}
.footer-box h3 {
margin-bottom: 28px;
padding-bottom: 13px;
font-size: 25px;
}
.footer-box h3::after {
width: 60px;
}
.footer-links ul li,
.footer-courses ul li {
margin-bottom: 17px;
}
.footer-links ul li a,
.footer-courses ul li a,
.footer-contact p {
font-size: 16px;
}
.social-icons a {
width: 46px;
height: 46px;
font-size: 19px;
}
.footer-bottom {
min-height: 60px;
padding: 14px 15px;
}
.footer-bottom p {
font-size: 14px;
}
}
/*==============================
LEARNING SECTION
==============================*/
.learning-section{
background:#fff;
padding:10px 0;
overflow:hidden;
}
.learning-section .container{
width:90%;
max-width:1350px;
margin:auto;
}
/*==============================
TOP GRID
==============================*/
.top-grid,
.bottom-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:70px;
align-items:center;
margin-bottom:120px;
}
/*==============================
CONTENT
==============================*/
.section-tag{
display:inline-block;
letter-spacing:2px;
text-transform:uppercase;
color:#F0B90B;
font-size:16px;
font-weight:700;
margin-bottom:-10px;
padding: 20px;
}
.left-content h1{
font-size:72px;
line-height:1.05;
color:#181A20;
font-weight:800;
margin-bottom:30px;
}
.left-content h1 span{
color:#F0B90B;
}
.left-content p{
color:#666;
line-height:1.9;
font-size:17px;
max-width:500px;
}
/*==============================
LEARNING LIST
==============================*/
.learning-list{
margin-top:60px;
}
.step{
display:flex;
align-items:center;
gap:20px;
margin-bottom:20px;
}
.step span{
width:45px;
height:45px;
border-radius:50%;
background:#F0B90B;
color:#181A20;
display:flex;
align-items:center;
justify-content:center;
font-weight:700;
}
.step h4{
font-size:22px;
color:#181A20;
}
/*==============================
ABSTRACT PANEL
==============================*/
.abstract-box{
position:relative;
height:650px;
background:#181A20;
border-radius:25px;
overflow:hidden;
}
/*==============================
CIRCLES
==============================*/
.circle{
position:absolute;
border-radius:50%;
background:#F0B90B;
}
.one{
width:210px;
height:210px;
top:40px;
left:40px;
}
.two{
width:260px;
height:260px;
right:40px;
top:120px;
}
.three{
width:170px;
height:170px;
left:150px;
bottom:70px;
}
/*==============================
GLASS CARDS
==============================*/
.glass-card{
position:absolute;
background:rgba(255,255,255,.08);
backdrop-filter:blur(15px);
border:1px solid rgba(255,255,255,.15);
border-radius:20px;
padding:30px;
color:#fff;
}
.card1{
top:180px;
left:50%;
transform:translateX(-50%);
}
.card2{
bottom:80px;
left:40px;
}
.card3{
right:40px;
bottom:40px;
}
.glass-card h3{
font-size:32px;
color:#F0B90B;
margin-bottom:8px;
}
.glass-card p{
color:#ddd;
}
/*==============================
SECOND PANEL
==============================*/
.second{
background:#181A20;
}
.shape{
position:absolute;
background:#F0B90B;
}
.square{
width:150px;
height:150px;
top:70px;
right:70px;
transform:rotate(15deg);
}
.square2{
width:90px;
height:90px;
bottom:70px;
left:70px;
transform:rotate(-25deg);
}
.large{
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);
width:75%;
}
.large h2{
color:#F0B90B;
margin-bottom:30px;
font-size:40px;
}
.large ul{
list-style:none;
padding:0;
}
.large li{
padding:14px 0;
border-bottom:1px solid rgba(255,255,255,.12);
color:#fff;
font-size:18px;
}
/*==================================================
LEARNING SECTION
==================================================*/
.learning-section{
background:#0b0e11;
padding:10px 0;
overflow:hidden;
position:relative;
}
.learning-section .container{
width:90%;
max-width:1400px;
margin:auto;
}
/*=========================================
SECOND ABSTRACT BOX
=========================================*/
.learning-section .second{
background:#181A20;
height:610px;
}
.learning-section .shape{
position:absolute;
background:#F0B90B;
opacity:.12;
}
.learning-section .square{
width:170px;
height:170px;
top:50px;
right:50px;
transform:rotate(20deg);
}
.learning-section .square2{
width:90px;
height:90px;
bottom:50px;
left:50px;
transform:rotate(-25deg);
}
/*=========================================
OUR PROMISE CARD
=========================================*/
.learning-section .large{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
width:78%;
}
.learning-section .large h2{
color:#F0B90B;
font-size:40px;
margin-bottom:0px;
}
.learning-section .large ul{
list-style:none;
padding:0;
margin:0;
}
.learning-section .large li{
color:#ffffff;
font-size:18px;
padding:18px 0;
border-bottom:1px solid rgba(255,255,255,.08);
transition:.3s;
}
.learning-section .large li:hover{
color:#F0B90B;
padding-left:10px;
}
/*=========================================
RIGHT CONTENT
=========================================*/
.learning-section-tag{
display:inline-block;
color:#F0B90B;
font-size:20px;
font-weight:700;
letter-spacing:3px;
text-transform:uppercase;
margin:0 0 15px 0;
}
.learning-section .right-content h2{
font-size:60px;
font-weight: 700;
line-height:1.1;
color:#ffffff;
margin:20px 0px;
margin-top: -10px;
}
.learning-section .right-content h2 span{
color:#F0B90B;
}
.learning-section .right-content p{
color:#B7BDC6;
line-height:1.9;
font-size:17px;
margin-bottom:15px;
margin-top: -15px;
max-width:560px;
}
.learning-section .right-content{
height:100%;
display:flex;
flex-direction:column;
}
/*=========================================
FEATURES
=========================================*/
.learning-section .features{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:22px;
margin-bottom:45px;
}
.learning-section .feature{
display:flex;
align-items:flex-start;
gap:18px;
background:#181A20;
border:1px solid #2B3139;
border-radius:14px;
padding:18px;
transition:.35s;
}
.learning-section .feature:hover{
transform:translateY(-8px);
border-color:#F0B90B;
}
.learning-section .icon{
width:48px;
height:48px;
min-width:48px;
border-radius:50%;
background:#F0B90B;
color:#181A20;
display:flex;
align-items:center;
justify-content:center;
font-weight:700;
font-size:18px;
}
.learning-section .feature h5{
color:#ffffff;
font-size:19px;
margin-bottom:8px;
}
.learning-section .feature p{
color:#B7BDC6;
margin:0;
font-size:15px;
}
/*=========================================
BUTTON
=========================================*/
.learning-section .theme-btn{
display:inline-flex;
align-items:center;
justify-content:center;
padding:16px 40px;
background:#F0B90B;
color:#181A20;
font-weight:700;
text-decoration:none;
border-radius:8px;
border:2px solid #F0B90B;
transition:.35s;
}
.learning-section .theme-btn:hover{
background:gold;
color:#111;
}
.learning-section .bottom-grid{
margin-bottom: 0 ;
}
/*==================================================
PREMIUM BINANCE ANIMATIONS
==================================================*/
.learning-section .abstract-box::before{
content:"";
position:absolute;
width:450px;
height:450px;
background:radial-gradient(circle,
rgba(240,185,11,.12) 0%,
rgba(240,185,11,0) 70%);
top:-150px;
right:-120px;
pointer-events:none;
}
.learning-section .abstract-box::after{
content:"";
position:absolute;
width:280px;
height:280px;
border:1px solid rgba(240,185,11,.08);
border-radius:50%;
bottom:-120px;
left:-80px;
}
/* Floating Animation */
@keyframes floatOne{
0%{
transform:translateY(0px);
}
50%{
transform:translateY(-15px);
}
100%{
transform:translateY(0px);
}
}
@keyframes floatTwo{
0%{
transform:translateY(0px);
}
50%{
transform:translateY(12px);
}
100%{
transform:translateY(0px);
}
}
.learning-section .card1{
animation:floatOne 5s ease-in-out infinite;
}
.learning-section .card2{
animation:floatTwo 6s ease-in-out infinite;
}
.learning-section .card3{
animation:floatOne 7s ease-in-out infinite;
}
/* Gold Shapes Animation */
.learning-section .circle{
animation:floatTwo 10s ease-in-out infinite;
}
.learning-section .shape{
animation:floatOne 12s ease-in-out infinite;
}
/* Hover Smooth */
.learning-section .left-content h1,
.learning-section .right-content h2,
.learning-section .feature,
.learning-section .glass-card,
.learning-section .theme-btn,
.learning-section .large li{
transition:.4s ease;
}
/*==============================================
RESPONSIVE
==============================================*/
@media(max-width:1200px){
.learning-section .top-grid,
.learning-section .bottom-grid{
grid-template-columns:1fr;
gap:70px;
}
.learning-section .left-content h1{
font-size:58px;
}
.learning-section .right-content h2{
font-size:52px;
}
.learning-section .abstract-box{
height:560px;
}
}
@media(max-width:992px){
.learning-section{
padding:90px 0;
}
.learning-section .features{
grid-template-columns:1fr;
}
.learning-section .top-grid,
.learning-section .bottom-grid{
margin-bottom:80px;
}
.learning-section .large{
width:88%;
}
}
@media(max-width:768px){
.learning-section .container{
width:92%;
}
.learning-section .left-content h1{
font-size:44px;
}
.learning-section .right-content h2{
font-size:38px;
}
.learning-section .left-content p,
.learning-section .right-content p{
font-size:15px;
}
.learning-section .abstract-box{
height:430px;
border-radius:20px;
}
.learning-section .glass-card{
padding:18px;
}
.learning-section .glass-card h3{
font-size:24px;
}
.learning-section .card1{
top:90px;
}
.learning-section .card2{
left:20px;
bottom:20px;
}
.learning-section .card3{
right:20px;
bottom:20px;
}
.learning-section .large h2{
font-size:30px;
}
.learning-section .large li{
font-size:16px;
padding:14px 0;
}
}
@media(max-width:576px){
.learning-section{
padding:70px 0;
}
.learning-section .left-content h1{
font-size:34px;
}
.learning-section .right-content h2{
font-size:30px;
}
.learning-section .section-tag{
font-size:12px;
letter-spacing:2px;
}
.learning-section .step h4{
font-size:18px;
}
.learning-section .step span{
width:40px;
height:40px;
}
.learning-section .abstract-box{
height:360px;
}
.learning-section .circle.one{
width:120px;
height:120px;
}
.learning-section .circle.two{
width:160px;
height:160px;
}
.learning-section .circle.three{
width:90px;
height:90px;
}
.learning-section .theme-btn{
width:100%;
text-align:center;
justify-content:center;
}
}
/* =========================================
ACT SERVICES FAQ SECTION
========================================= */
.actServiceFaq47Section{
padding:10px 0;
background:
radial-gradient(
circle at 10% 20%,
rgba(240,185,11,.07),
transparent 28%
),
radial-gradient(
circle at 90% 80%,
rgba(240,185,11,.05),
transparent 30%
),
#0B0E11;
overflow:hidden;
}
/* =========================================
TAG
========================================= */
.actServiceFaq47TagWrap{
display:flex;
justify-content:center;
align-items:center;
width:100%;
margin:0 0 22px;
}
.actServiceFaq47TagWrap::before,
.actServiceFaq47TagWrap::after,
.actServiceFaq47Tag::before,
.actServiceFaq47Tag::after{
content:none !important;
display:none !important;
}
.actServiceFaq47Tag{
color:#F0B90B;
font-size:20px;
font-weight:700;
letter-spacing:2px;
text-transform:uppercase;
text-align:center;
margin-bottom:-10px;
}
/* =========================================
HEADING
========================================= */
.actServiceFaq47Heading{
max-width:900px;
margin:0 auto 60px;
}
.actServiceFaq47Heading h2{
color:#FFFFFF;
font-size:60px;
font-weight:700;
line-height:1.2;
margin:0 0 22px;
}
.actServiceFaq47Heading h2 span{
color:#F0B90B;
}
.actServiceFaq47Heading p{
color:#B7BDC6;
font-size:16px;
line-height:1.9;
max-width:780px;
margin:0 auto;
margin-bottom:-30px;
}
/* =========================================
MAIN LAYOUT
========================================= */
.actServiceFaq47Layout{
display:grid;
grid-template-columns:320px 1fr;
gap:34px;
max-width:1250px;
margin:0 auto;
align-items:start;
}
/* =========================================
SIDEBAR
========================================= */
.actServiceFaq47Sidebar{
display:flex;
flex-direction:column;
gap:24px;
position:sticky;
top:25px;
}
.actServiceFaq47CategoryBox{
padding:22px;
background:linear-gradient(
145deg,
#181A20,
#111418
);
border:1px solid rgba(240,185,11,.16);
border-radius:20px;
box-shadow:0 20px 50px rgba(0,0,0,.25);
}
.actServiceFaq47CategoryHeader{
display:flex;
justify-content:space-between;
align-items:center;
gap:15px;
padding:0 5px 18px;
border-bottom:1px solid rgba(255,255,255,.07);
color:#FFFFFF;
font-size:17px;
font-weight:700;
}
.actServiceFaq47CategoryHeader i{
color:#F0B90B;
}
.actServiceFaq47CategoryNav{
display:grid;
gap:8px;
margin-top:16px;
}
.actServiceFaq47CategoryNav a{
display:flex;
align-items:center;
gap:13px;
padding:14px 15px;
border:1px solid transparent;
border-radius:11px;
color:#B7BDC6;
font-size:14px;
font-weight:600;
text-decoration:none;
transition:.3s;
}
.actServiceFaq47CategoryNav a i{
width:22px;
color:#848E9C;
text-align:center;
transition:.3s;
}
.actServiceFaq47CategoryNav a:hover,
.actServiceFaq47CategoryNav a.active{
color:#181A20;
background:#F0B90B;
border-color:#F0B90B;
transform:translateX(5px);
}
.actServiceFaq47CategoryNav a:hover i,
.actServiceFaq47CategoryNav a.active i{
color:#181A20;
}
/* =========================================
SUPPORT CARD
========================================= */
.actServiceFaq47SupportCard{
padding:28px;
background:
linear-gradient(
145deg,
rgba(240,185,11,.15),
rgba(240,185,11,.04)
),
#181A20;
border:1px solid rgba(240,185,11,.30);
border-radius:20px;
position:relative;
overflow:hidden;
}
.actServiceFaq47SupportCard::after{
content:"";
position:absolute;
width:150px;
height:150px;
right:-75px;
bottom:-75px;
border-radius:50%;
border:1px solid rgba(240,185,11,.18);
box-shadow:
0 0 0 30px rgba(240,185,11,.025),
0 0 0 60px rgba(240,185,11,.015);
}
.actServiceFaq47SupportIcon{
width:52px;
height:52px;
display:flex;
align-items:center;
justify-content:center;
border-radius:14px;
color:#181A20;
background:#F0B90B;
font-size:21px;
margin-bottom:22px;
}
.actServiceFaq47SupportCard > span{
display:block;
color:#F0B90B;
font-size:13px;
font-weight:800;
letter-spacing:1.5px;
text-transform:uppercase;
margin-bottom:10px;
}
.actServiceFaq47SupportCard h3{
color:#FFFFFF;
font-size:22px;
line-height:1.4;
margin:0 0 14px;
}
.actServiceFaq47SupportCard p{
color:#B7BDC6;
font-size:14px;
line-height:1.75;
margin:0 0 22px;
}
.actServiceFaq47SupportCard a{
display:inline-flex;
align-items:center;
gap:10px;
color:#F0B90B;
font-weight:700;
text-decoration:none;
position:relative;
z-index:2;
}
/* =========================================
FAQ ACCORDION
========================================= */
.actServiceFaq47Accordion{
display:grid;
gap:15px;
}
.actServiceFaq47Item{
background:linear-gradient(
145deg,
#181A20,
#111418
);
border:1px solid rgba(255,255,255,.08);
border-radius:17px;
overflow:hidden;
transition:.35s;
}
.actServiceFaq47Item:hover{
border-color:rgba(240,185,11,.38);
transform:translateY(-2px);
}
.actServiceFaq47Item[open]{
border-color:rgba(240,185,11,.55);
box-shadow:0 15px 40px rgba(0,0,0,.25);
}
.actServiceFaq47Item summary{
display:grid;
grid-template-columns:54px 1fr 44px;
align-items:center;
gap:18px;
padding:20px 22px;
cursor:pointer;
list-style:none;
user-select:none;
}
.actServiceFaq47Item summary::-webkit-details-marker{
display:none;
}
.actServiceFaq47Number{
width:54px;
height:54px;
display:flex;
justify-content:center;
align-items:center;
border-radius:14px;
color:#F0B90B;
background:rgba(240,185,11,.10);
border:1px solid rgba(240,185,11,.20);
font-size:16px;
font-weight:800;
}
.actServiceFaq47Question{
color:#FFFFFF;
font-size:18px;
font-weight:700;
line-height:1.5;
}
.actServiceFaq47Toggle{
width:42px;
height:42px;
display:flex;
justify-content:center;
align-items:center;
border-radius:50%;
color:#F0B90B;
background:#111418;
border:1px solid rgba(240,185,11,.20);
transition:.3s;
}
.actServiceFaq47Item[open] .actServiceFaq47Toggle{
color:#181A20;
background:#F0B90B;
transform:rotate(45deg);
}
.actServiceFaq47Answer{
padding:0 24px 24px 94px;
}
.actServiceFaq47Answer p{
color:#B7BDC6;
font-size:15px;
line-height:1.9;
margin:0;
padding-top:20px;
border-top:1px solid rgba(255,255,255,.07);
}
/* =========================================
BOTTOM CTA
========================================= */
.actServiceFaq47BottomCta{
display:flex;
justify-content:space-between;
align-items:center;
gap:30px;
max-width:1250px;
margin:45px auto 0;
padding:28px 30px;
background:linear-gradient(
90deg,
rgba(240,185,11,.13),
rgba(240,185,11,.03)
);
border:1px solid rgba(240,185,11,.25);
border-radius:18px;
}
.actServiceFaq47BottomCta > div:first-child > span{
display:block;
color:#F0B90B;
font-size:13px;
font-weight:800;
letter-spacing:1.5px;
text-transform:uppercase;
margin-bottom:7px;
}
.actServiceFaq47BottomCta h3{
color:#FFFFFF;
font-size:23px;
margin:0;
}
.actServiceFaq47BottomActions{
display:flex;
align-items:center;
flex-wrap:wrap;
gap:12px;
}
.actServiceFaq47PrimaryBtn,
.actServiceFaq47WhatsappBtn{
display:inline-flex;
justify-content:center;
align-items:center;
gap:10px;
min-height:50px;
padding:0 23px;
border-radius:11px;
font-size:14px;
font-weight:700;
text-decoration:none;
transition:.3s;
}
.actServiceFaq47PrimaryBtn{
color:#181A20;
background:#F0B90B;
border:1px solid #F0B90B;
}
.actServiceFaq47PrimaryBtn:hover{
color:#181A20;
background:#FFD43B;
transform:translateY(-3px);
}
.actServiceFaq47WhatsappBtn{
color:#FFFFFF;
background:#181A20;
border:1px solid #2B3139;
}
.actServiceFaq47WhatsappBtn:hover{
color:#F0B90B;
border-color:#F0B90B;
transform:translateY(-3px);
}
/* =========================================
RESPONSIVE
========================================= */
@media(max-width:991px){
.actServiceFaq47Layout{
grid-template-columns:1fr;
}
.actServiceFaq47Sidebar{
position:static;
}
.actServiceFaq47CategoryNav{
grid-template-columns:repeat(2,1fr);
}
.actServiceFaq47Heading h2{
font-size:45px;
}
}
@media(max-width:768px){
.actServiceFaq47Section{
padding:60px 0;
}
.actServiceFaq47Heading{
margin-bottom:42px;
}
.actServiceFaq47Heading h2{
font-size:38px;
}
.actServiceFaq47BottomCta{
align-items:flex-start;
flex-direction:column;
}
}
@media(max-width:576px){
.actServiceFaq47Tag{
font-size:20px;
letter-spacing:2px;
}
.actServiceFaq47Heading h2{
font-size:32px;
}
.actServiceFaq47Heading p{
font-size:15px;
}
.actServiceFaq47CategoryNav{
grid-template-columns:1fr;
}
.actServiceFaq47Item summary{
grid-template-columns:46px 1fr 38px;
gap:12px;
padding:17px 14px;
}
.actServiceFaq47Number{
width:46px;
height:46px;
}
.actServiceFaq47Question{
font-size:15px;
}
.actServiceFaq47Toggle{
width:36px;
height:36px;
}
.actServiceFaq47Answer{
padding:0 16px 20px;
}
.actServiceFaq47Answer p{
padding-top:17px;
}
.actServiceFaq47BottomCta{
padding:24px 20px;
}
.actServiceFaq47BottomActions{
width:100%;
flex-direction:column;
}
.actServiceFaq47PrimaryBtn,
.actServiceFaq47WhatsappBtn{
width:100%;
}
}
/* ================= FEATURED BLOG ================= */
.featured-blog-section {
padding: 90px 0;
background: #0b0e11;
}
.blog-section-heading {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 25px;
margin-bottom: 42px;
}
.blog-small-title {
display: inline-block;
margin-bottom: 10px;
color: #f0b90b;
font-size: 13px;
font-weight: 700;
letter-spacing: 2px;
}
.blog-section-heading h2 {
margin: 0;
color: #ffffff;
font-size: 42px;
font-weight: 800;
}
.view-all-blogs {
color: #b7bdc6;
font-size: 15px;
font-weight: 600;
text-decoration: none;
transition: 0.3s ease;
}
.view-all-blogs:hover {
color: #f0b90b;
}
.featured-blog-card {
display: grid;
grid-template-columns: 1.15fr 1fr;
overflow: hidden;
background: #181a20;
border: 1px solid #2b3139;
border-radius: 16px;
}
.featured-blog-image {
position: relative;
min-height: 440px;
overflow: hidden;
}
.featured-blog-image img {
width: 100%;
height: 100%;
min-height: 440px;
object-fit: cover;
display: block;
transition: transform 0.5s ease;
}
.featured-blog-card:hover .featured-blog-image img {
transform: scale(1.04);
}
.featured-badge {
position: absolute;
top: 22px;
left: 22px;
padding: 8px 14px;
color: #0b0e11;
background: #f0b90b;
border-radius: 4px;
font-size: 12px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 1px;
}
.featured-blog-content {
display: flex;
flex-direction: column;
justify-content: center;
padding: 50px;
}
.blog-category {
display: inline-block;
margin-bottom: 16px;
color: #f0b90b;
font-size: 13px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
}
.featured-blog-content h3 {
margin-bottom: 20px;
color: #ffffff;
font-size: 36px;
font-weight: 800;
line-height: 1.25;
}
.featured-blog-content p {
margin-bottom: 24px;
color: #b7bdc6;
font-size: 16px;
line-height: 1.8;
}
.featured-blog-meta {
display: flex;
flex-wrap: wrap;
gap: 24px;
margin-bottom: 30px;
color: #848e9c;
font-size: 14px;
}
.featured-read-btn {
display: inline-flex;
align-items: center;
gap: 10px;
width: fit-content;
color: #f0b90b;
font-size: 15px;
font-weight: 700;
text-decoration: none;
transition: 0.3s ease;
}
.featured-read-btn span {
font-size: 20px;
transition: transform 0.3s ease;
}
.featured-read-btn:hover {
color: #ffffff;
}
.featured-read-btn:hover span {
transform: translateX(5px);
}
@media (max-width: 991px) {
.featured-blog-card {
grid-template-columns: 1fr;
}
.featured-blog-image,
.featured-blog-image img {
min-height: 360px;
}
.featured-blog-content {
padding: 38px;
}
}
@media (max-width: 600px) {
.featured-blog-section {
padding: 65px 15px;
}
.blog-section-heading {
align-items: flex-start;
flex-direction: column;
margin-bottom: 30px;
}
.blog-section-heading h2 {
font-size: 34px;
}
.featured-blog-image,
.featured-blog-image img {
min-height: 240px;
}
.featured-blog-content {
padding: 28px 22px;
}
.featured-blog-content h3 {
font-size: 28px;
}
}
/* =================================
ACT SERVICES BLOG SECTION
================================= */
.act-services-blog {
padding: 0px 0;
background: #0b0e11;
}
.act-services-blog .container{
max-width:100%;
padding:0 !important;
margin-bottom:20px;
}
/* TOP INTRO BOX */
.act-services-intro {
position: relative;
margin-bottom: 20px;
padding: 65px 70px;
overflow: hidden;
background: #181a20;
border: 1px solid #2b3139;
border-radius: 0px;
}
.act-services-intro::before {
position: absolute;
top: 0;
left: 0;
width: 6px;
height: 100%;
background: #f0b90b;
content: "";
}
.act-services-intro::after {
position: absolute;
right: -80px;
bottom: -100px;
width: 280px;
height: 280px;
border: 45px solid rgba(240, 185, 11, 0.05);
border-radius: 50%;
content: "";
}
.act-services-label {
display: inline-block;
margin-bottom: 17px;
color: #f0b90b;
font-size: 13px;
font-weight: 800;
letter-spacing: 2px;
}
.act-services-intro h2 {
position: relative;
z-index: 2;
max-width: 720px;
margin-bottom: 20px;
color: #ffffff;
font-size: 48px;
font-weight: 800;
line-height: 1.15;
}
.act-services-intro p {
position: relative;
z-index: 2;
max-width: 760px;
margin-bottom: 30px;
color: #b7bdc6;
font-size: 16px;
line-height: 1.8;
}
.act-services-main-btn {
position: relative;
z-index: 2;
display: inline-flex;
align-items: center;
gap: 10px;
padding: 14px 24px;
color: #0b0e11;
background: #f0b90b;
border-radius: 6px;
font-size: 14px;
font-weight: 800;
text-decoration: none;
transition: 0.3s ease;
}
.act-services-main-btn:hover {
color: #0b0e11;
background: #dca900;
transform: translateY(-3px);
}
.act-services-main-btn span {
font-size: 19px;
}
/* SIX SERVICES */
.act-services-list {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 0 42px;
}
.act-service-item {
display: grid;
grid-template-columns: 82px 1fr;
gap: 22px;
padding: 30px 0;
border-bottom: 1px solid #2b3139;
transition: 0.3s ease;
}
.act-service-item:hover {
padding-left: 10px;
border-color: #f0b90b;
}
.act-service-number {
display: flex;
align-items: center;
justify-content: center;
width: 72px;
height: 72px;
color: #f0b90b;
background: #181a20;
border: 1px solid #2b3139;
border-radius: 10px;
font-size: 22px;
font-weight: 800;
transition: 0.3s ease;
}
.act-service-item:hover .act-service-number {
color: #0b0e11;
background: #f0b90b;
border-color: #f0b90b;
}
.act-service-category {
display: inline-block;
margin-bottom: 7px;
color: #f0b90b;
font-size: 11px;
font-weight: 700;
letter-spacing: 1px;
text-transform: uppercase;
}
.act-service-content h3 {
margin-bottom: 10px;
color: #ffffff;
font-size: 23px;
font-weight: 750;
line-height: 1.3;
}
.act-service-content p {
margin-bottom: 13px;
color: #9da5b0;
font-size: 14px;
line-height: 1.65;
}
.act-service-content a {
color: #f0b90b;
font-size: 13px;
font-weight: 700;
text-decoration: none;
transition: 0.3s ease;
}
.act-service-content a:hover {
color: #ffffff;
}
/* RESPONSIVE */
@media (max-width: 991px) {
.act-services-intro {
padding: 50px;
}
.act-services-intro h2 {
font-size: 40px;
}
.act-services-list {
grid-template-columns: 1fr;
gap: 0;
}
}
@media (max-width: 600px) {
.act-services-blog {
padding: 65px 15px;
}
.act-services-intro {
padding: 38px 25px;
border-radius: 14px;
}
.act-services-intro h2 {
font-size: 32px;
}
.act-services-intro p {
font-size: 14px;
}
.act-services-main-btn {
width: 100%;
justify-content: center;
}
.act-service-item {
grid-template-columns: 60px 1fr;
gap: 16px;
padding: 25px 0;
}
.act-service-number {
width: 56px;
height: 56px;
font-size: 17px;
}
.act-service-content h3 {
font-size: 20px;
}
.act-service-content p {
font-size: 13px;
}
}