:root{

--primary:#0B1F3A;
--accent:#C89B3C;
--white:#ffffff;

}


/* =====================
GLOBAL
===================== */

body{
margin:0;
font-family:Poppins,sans-serif;
}

a{
text-decoration:none;
}


/* =====================
TOP HEADER
===================== */

.top-header{

background:var(--primary);
color:white;

padding:8px 0;

transition:0.4s;

}

.top-contact span{

margin-right:20px;
font-size:14px;

}

.top-actions{

display:flex;
align-items:center;
justify-content:flex-end;
gap:18px;

}

.top-actions a{

color:white;
font-size:14px;

}

.order-btn{

background:white;
color:var(--primary) !important;

padding:6px 16px;

border-radius:20px;

font-weight:500;

}

.flag{

width:28px;

}


/* =====================
MAIN HEADER
===================== */

.main-header{

background:white;

box-shadow:0 4px 10px rgba(0,0,0,0.05);

position:sticky;
top:0;
z-index:999;

}

.logo{

font-size:22px;
font-weight:700;

color:var(--primary);

}

.navbar-nav .nav-link{

color:#333;

margin-left:18px;

font-weight:500;

}

.navbar-nav .nav-link:hover{

color:var(--primary);

}


/* =====================
HERO BANNER
===================== */

.hero-banner{

background:url("https://www.carddigital.online/public/website/images/banner/banner-round-img-2.jpg");

background-size:cover;
/* background-position:center; */

min-height:100vh;

display:flex;
align-items:center;

position:relative;

}

.hero-banner::before{

content:"";

position:absolute;

top:0;
left:0;

width:100%;
height:100%;

background:rgba(255,255,255,0.75);

}

.hero-content{

position:relative;
z-index:2;

max-width:600px;

}

.hero-content h1{

font-size:60px;

font-weight:700;

color:#1c2b4a;

margin-bottom:20px;

}

.hero-content p{

font-size:20px;

color:#6c7a89;

margin-bottom:30px;

}

.hero-buttons{

display:flex;
gap:15px;

}

.hero-btn{

background:#0f172a;

color:white;

padding:14px 30px;

border-radius:30px;

font-weight:600;

}

.hero-btn:hover{

background:#0f172a;

color:white;

}


/* =====================
RESPONSIVE
===================== */

@media(max-width:768px){

    .hero-banner{
min-height:60vh;

}

.top-contact{

text-align:center;
margin-bottom:8px;

}

.top-actions{

justify-content:center;
flex-wrap:wrap;

}

.hero-content h1{

font-size:36px;

}

.hero-buttons{

flex-direction:column;

}

.navbar-nav{

padding-top:15px;

}

}


    .process-section{

padding:100px 0 80px;

background:#f6f8ff;

}

.process-head h6{

color:#4f46e5;

letter-spacing:2px;

font-size:13px;

}

.process-head h2{

font-size:40px;

font-weight:700;

margin-bottom:70px;

color:#0B1F3A;

}


/* line */

.process-line{

display:flex;

justify-content:space-between;

position:relative;

}

.process-line::before{

content:"";

position:absolute;

top:60px;

left:10%;

width:80%;

height:4px;

background:#e4e8ff;

z-index:0;

}

.process-step{

text-align:center;

width:30%;

position:relative;

z-index:1;

}

.circle{

width:120px;

height:120px;

border-radius:50%;

background:linear-gradient(135deg,#0B1F3A,#2563eb);

color:white;

margin:auto;

display:flex;

flex-direction:column;

align-items:center;

justify-content:center;

font-size:26px;

box-shadow:0 15px 40px rgba(0,0,0,0.2);

transition:.4s;

}

.circle span{

font-size:14px;

opacity:.7;

}

.circle i{

font-size:30px;

margin-top:4px;

}

.process-step:hover .circle{

transform:scale(1.1) rotate(5deg);

}

.process-step h4{

margin-top:20px;

color:#0B1F3A;

}

.process-step p{

color:#666;

font-size:15px;

}


/* mobile */

@media(max-width:768px){

.process-line{

flex-direction:column;

align-items:center;

}

.process-head h2 , .template-title {
font-size:28px;
}

.process-line::before{

display:none;

}

.process-step{

width:100%;

margin-bottom:40px;

}

}


    .sample-section{

padding:120px 0;

background:linear-gradient(180deg,#f8fbff,#eef3ff);

}

.section-head h6{

color:#4f46e5;

letter-spacing:2px;

font-size:13px;

}

.section-head h2{

font-size:40px;

font-weight:700;

color:#0B1F3A;

margin-bottom:60px;

}


/* card */

.sample-card{

position:relative;

background:white;

border-radius:18px;

padding:30px;

overflow:hidden;

text-align:center;

box-shadow:0 20px 60px rgba(0,0,0,0.08);

transition:.4s;

}

.sample-card:hover{

transform:translateY(-15px);

box-shadow:0 30px 80px rgba(0,0,0,0.15);

}

.sample-card img{

max-width:240px;

margin:auto;

display:block;

transition:.4s;

}

.sample-card:hover img{

transform:scale(1.05);

}


/* overlay */

.card-overlay{

position:absolute;

top:0;

left:0;

width:100%;

height:100%;

background:rgba(11,31,58,0.85);

display:flex;

align-items:center;

justify-content:center;

opacity:0;

transition:.4s;

}

.sample-card:hover .card-overlay{

opacity:1;

}

.view-btn{

padding:12px 28px;

background:white;

color:#0B1F3A;

border-radius:30px;

font-weight:600;

}


    .template-section{
padding:80px 0;
background:#f6f8fc;
text-align:center;
}

.template-title{
font-size:38px;
font-weight:700;
margin-bottom:50px;
color:#222;
}

.template-slider{
display:flex;
gap:30px;
overflow-x:auto;
padding:20px 60px;
scroll-behavior:smooth;
}

.template-slider::-webkit-scrollbar{
height:6px;
}

.template-slider::-webkit-scrollbar-thumb{
background:#3b82f6;
border-radius:10px;
}

.phone-card{
min-width:220px;
background:white;
border-radius:25px;
padding:10px;
box-shadow:0 15px 40px rgba(0,0,0,0.1);
transition:0.4s;
}

.phone-card img{
width:100%;
border-radius:20px;
}

.phone-card:hover{
transform:translateY(-10px) scale(1.05);
box-shadow:0 25px 60px rgba(0,0,0,0.2);
}

.dummy-top,
.dummy-bottom{
padding:100px 20px;
text-align:center;
background:white;
}

.dummy-top h2,
.dummy-bottom h2{
font-size:36px;
margin-bottom:10px;
}



/* Section */

.franchise-section{
position:relative;
padding:32px 0;
margin: 50px 0;
background:#ffffff;
}


/* Premium Gradient Shape */

.franchise-section::before{
content:"";
position:absolute;
top:0;
bottom:1rem;
right:0;
left:200px;

border-top-left-radius:350px;
border-bottom-left-radius:350px;

background:linear-gradient(135deg,#0B1F3A,#1F3A5F);

z-index:0;
}


/* Image */

.franchise-section .mobile-img{
max-width:100%;
animation:float 4s ease-in-out infinite;
}


/* Floating animation */

@keyframes float{
0%{transform:translateY(0)}
50%{transform:translateY(-15px)}
100%{transform:translateY(0)}
}



/* Content */

.franchise-section .content-box{
position:relative;
padding:50px;
color:white;
z-index:1;
}


.franchise-section .title{
font-size:42px;
font-weight:700;
letter-spacing:1px;
}

.subtitle{
margin-top:10px;
font-weight:500;
color:#E2CC96;
}


/* Buttons */

.franchise-section .btn-area{
margin-top:25px;
display:flex;
gap:15px;
align-items:center;
}


/* CTA button */

.franchise-section .call-btn{
background:#CFAA4F;
padding:13px 30px;
border-radius:40px;
color:#000;
font-weight:600;
text-decoration:none;
transition:.4s;
box-shadow:0 0 15px rgba(207,170,79,.5);
}


.franchise-section .call-btn:hover{
transform:translateY(-3px);
box-shadow:0 0 25px rgba(207,170,79,.9);
}


/* Play button */

.franchise-section .play-btn{
width:55px;
height:55px;
border-radius:50%;
background:white;
display:flex;
align-items:center;
justify-content:center;
color:#0B1F3A;
font-size:18px;
text-decoration:none;
transition:.4s;
}

.play-btn:hover{
transform:scale(1.1);
}



/* Email */

.franchise-section .email{
margin-top:25px;
color:#E2CC96;
font-size:16px;
}



/* Responsive */

@media(max-width:992px){

.franchise-section .franchise-section{
padding:60px 0;
}

.franchise-section::before{
left:0;
border-radius:0;
}

.franchise-section .content-box{
text-align:center;
padding:30px;
}

.franchise-section .title{
font-size:32px;
}

.franchise-section .btn-area{
justify-content:center;
}

}


    .feature-section{
background:#dedede;
padding: 120px 0;
}

.subtitle{
color:#9c55e5;
font-weight:600;
text-transform:uppercase;
font-size:14px;
}

/* FEATURES */

.feature-item{
display:flex;
align-items:center;
gap:15px;
margin-bottom:35px;
}

.feature-item .icon{
width:50px;
height:50px;
background:#9c55e5;
color:#fff;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
font-size:20px;
}

.feature-item h5{
font-size:18px;
margin-bottom:4px;
}

.feature-item p{
font-size:14px;
color:#777;
margin:0;
}

/* PHONE AREA */

.phone-area{
position:relative;
}

.phone-frame{
    width: 280px;
    position: relative;
    z-index: 2;
    border-radius: 30px;
    border: 2px solid #000;
}
.phone-slider{
position:absolute;
top:58px;
left:50%;
transform:translateX(-50%);
width:200px;
z-index:1;
}

.phone-slider img{
width:100%;
border-radius:18px;
}

.feature-right{
flex-direction:row-reverse;
text-align:left;
}


.agency-services-section{
padding: 100px 0;
background:#f6f8fc;
font-family:Arial, sans-serif;
}

.agency-title{
text-align:center;
font-size:42px;
font-weight:700;
margin-bottom:60px;
color:#111;
}

.agency-services-grid{
max-width:1200px;
margin:auto;
display:grid;
grid-template-columns:repeat(4,1fr);
gap:28px;
}

.agency-service-card{
position:relative;
overflow:hidden;
border-radius:18px;
cursor:pointer;
box-shadow:0 10px 30px rgba(0,0,0,0.1);
}

.agency-service-card img{
width:100%;
height:230px;
object-fit:cover;
transition:transform .5s ease;
will-change:transform;
}

.agency-overlay{
position:absolute;
bottom:0;
left:0;
right:0;
padding:22px;
background:linear-gradient(transparent,rgba(0,0,0,0.85));
color:#fff;
transform:translateY(45%);
transition:transform .4s ease;
}

.agency-overlay h3{
margin:0 0 5px;
font-size:20px;
}

.agency-overlay p{
font-size:14px;
opacity:.9;
}

.agency-service-card:hover img{
transform:scale(1.1);
}

.agency-service-card:hover .agency-overlay{
transform:translateY(0);
}

/* tablet */

@media(max-width:1024px){

.agency-services-grid{
grid-template-columns:repeat(2,1fr);
}

}

/* mobile */

@media(max-width:600px){

.agency-services-section{
padding:70px 15px;
}

.agency-title{
font-size:30px;
margin-bottom:40px;
}

.agency-services-grid{
grid-template-columns:1fr;
gap:20px;
}

.agency-service-card img{
height:200px;
}

}


/* FOOTER */

.premium-footer{
background:linear-gradient(135deg,#020617,#0f172a);
color:#cbd5e1;
font-family:Arial,sans-serif;
padding-top:40px;
}

/* WAVE */

.premium-footer .footer-wave svg{
display:block;
width:100%;
}

/* CONTENT */

.premium-footer .footer-content{
padding:80px 0 40px;
}

/* LOGO */

.premium-footer .footer-logo{
font-size:34px;
color:#fff;
margin-bottom:15px;
}

/* BRAND TEXT */

.premium-footer .brand p{
font-size:14px;
line-height:1.7;
margin-bottom:25px;
}

/* SOCIAL */

.premium-footer .footer-social a{
display:inline-flex;
align-items:center;
justify-content:center;
width:42px;
height:42px;
margin-right:10px;
border-radius:50%;
background:#1e293b;
color:#fff;
font-size:16px;
transition:0.3s;
text-decoration:none;
}

.premium-footer .footer-social a:hover{
background:#2563eb;
transform:translateY(-4px);
}

/* TITLES */

.premium-footer h3{
color:#fff;
margin-bottom:18px;
font-size:18px;
}

/* LINKS */

.premium-footer ul{
list-style:none;
padding:0;
margin:0;
}

.premium-footer ul li{
margin-bottom:10px;
}

.premium-footer ul li a{
color:#cbd5e1;
text-decoration:none;
font-size:14px;
transition:0.3s;
}

.premium-footer ul li a:hover{
color:#fff;
padding-left:6px;
}

/* NEWSLETTER */

.premium-footer .newsletter-text{
font-size:14px;
margin-bottom:15px;
}

.premium-footer .newsletter-box{
display:flex;
background:#1e293b;
border-radius:6px;
overflow:hidden;
}

.premium-footer .newsletter-box input{
flex:1;
border:none;
padding:12px;
background:transparent;
color:#fff;
outline:none;
font-size:14px;
}

.premium-footer .newsletter-box button{
background:#2563eb;
border:none;
padding:0 16px;
color:#fff;
cursor:pointer;
transition:0.3s;
}

.premium-footer .newsletter-box button:hover{
background:#1d4ed8;
}

/* BOTTOM */

.premium-footer .footer-bottom{
border-top:1px solid rgba(255,255,255,0.08);
text-align:center;
padding:20px 0;
font-size:14px;
color:#94a3b8;
}




@media(max-width:767px){ 
    .process-head h2 , .template-title , .section-head h2 {
font-size:28px;
}

.feature-item  {justify-content: space-between;}
.feature-right {flex-direction: row; margin-top: 50px;}
.franchise-section {margin: 0;}
.process-section {padding: 60px 0 0;}
}