body{

background:#07111d;


}


.section-title{
    text-align:center;
    color:#f3c33b;
    font-size:42px;
    font-weight:700;
    line-height:1.3;
    margin-bottom:40px;
}

.section-title span{
    color:#ffffff;
}

@media(max-width:768px){

.section-title{
    font-size:28px;
    margin-bottom:25px;
    padding:0 10px;
}

}
/* Section */

.profile-wrapper{

padding:40px 20px;

}

/* Card */

.profile-card{

max-width:1140px;
margin:auto;

display:grid;
grid-template-columns:320px 1fr 280px;

background:#061424;

border-radius:20px;

overflow:hidden;

box-shadow:0 10px 35px rgba(0,0,0,.30);

}

/* IMAGE */

.profile-image{

position:relative;

height:285px;

}

.profile-image img{

width:100%;
height:100%;
object-fit:cover;
display:block;

}

/* Badge */

.online-badge{

position:absolute;

left:18px;
top:18px;

background:#00c853;

color:#fff;

padding:8px 16px;

border-radius:30px;

font-size:14px;

font-weight:bold;

}

.dot{

display:inline-block;

width:8px;
height:8px;

background:#fff;

border-radius:50%;

margin-right:5px;

}

/* CONTENT */

.profile-content{

padding:35px;

display:flex;

justify-content:center;

flex-direction:column;

}

.profile-content h2{

font-size:20px;

color:#f3c33b;

margin-bottom:15px;

line-height:1.4;

}

.profile-content p{

color:#f1f1f1;

font-size:15px;

line-height:1.8;

margin-bottom:22px;

}

/* Tags */

.info-box{

display:flex;

gap:12px;

flex-wrap:wrap;

}

.info-box span{

padding:10px 18px;

border-radius:8px;

font-size:15px;

font-weight:600;

}

.info-box span:nth-child(1){

background:#e4bc36;
color:#000;

}

.info-box span:nth-child(2){

background:#d60078;
color:#fff;

}

.info-box span:nth-child(3){

background:#d60078;
color:#fff;

}

/* Right Side */

.profile-buttons{

background:#000;

display:flex;

justify-content:center;

align-items:center;

flex-direction:column;

gap:18px;

padding:25px;

}

.call-btn,
.wa-btn{

width:210px;

padding:17px;

border-radius:10px;

text-decoration:none;

font-size:22px;

font-weight:bold;

text-align:center;

transition:.3s;

}

.call-btn{

background:#d10073;

color:#fff;

}

.call-btn:hover{

transform:translateY(-4px);

}

.wa-btn{

background:#0a2d58;

color:#ffd33b;

}

.wa-btn:hover{

transform:translateY(-4px);

}

/* Tablet */

@media(max-width:991px){

.profile-card{

grid-template-columns:1fr;

}

.profile-image{

height:360px;

}

.profile-buttons{

padding:25px;

}

.call-btn,
.wa-btn{

width:100%;

max-width:320px;

}

}

/* Mobile */

@media(max-width:767px){

.profile-wrapper{

padding:15px;

}

.profile-card{

border-radius:16px;

}

.profile-image{

height:300px;

}

.profile-content{

padding:20px;

}

.profile-content h2{

font-size:22px;

}

.profile-content p{

font-size:16px;

line-height:1.7;

}

.profile-buttons{

padding:20px;

}

.call-btn,
.wa-btn{

width:100%;

font-size:18px;

}

}


/* Desktop */

.profile-image{
    height:350px;
}

.profile-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center top;
}

/* Mobile */

@media (max-width:767px){

.profile-image{
    height:385px; /* 300px ki jagah 420px */
}

.profile-image img{
    object-fit:cover;
    object-position:top center;
}

}
/* Image Container */
.profile-image{
    position:relative;
    height:350px;
    overflow:hidden;   /* Important */
}

/* Image */
.profile-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center top;
    transition:transform .5s ease;
}

/* Hover Effect */
.profile-card:hover .profile-image img{
    transform:scale(1.08);
}


*{
margin:0;
padding:0;
box-sizing:border-box;
}

body{

font-family:Poppins,sans-serif;
background:#08121f;
color:white;
}

.hero{

min-height:100vh;
display:flex;
align-items:center;
justify-content:space-between;
padding:80px 8%;
position:relative;
overflow:hidden;

background:linear-gradient(135deg,#08121f,#13243b,#08121f);

}

.hero-content{

width:55%;
z-index:2;

}

.badge{

display:inline-block;
padding:10px 20px;

background:rgba(255,255,255,.08);

border:1px solid rgba(255,255,255,.2);

border-radius:40px;

margin-bottom:25px;

backdrop-filter:blur(10px);

color:#f7c66d;

}

.hero h1{

font-size:70px;

font-family:"Cormorant Garamond",serif;

line-height:1.05;

margin-bottom:20px;

}

.hero p{

max-width:550px;

line-height:1.9;

color:#d6d6d6;

margin-bottom:35px;

}

.buttons{

display:flex;

gap:20px;

margin-bottom:60px;

}

.btn{

padding:15px 35px;

border-radius:40px;

text-decoration:none;

font-weight:600;

transition:.4s;

}

.gold{

background:#d9a441;

color:#111;

}

.gold:hover{

transform:translateY(-4px);

box-shadow:0 10px 30px rgba(217,164,65,.4);

}

.dark{

border:1px solid #fff;

color:#fff;

}

.dark:hover{

background:white;

color:#111;

}

.stats{

display:flex;

gap:60px;

}

.stats h2{

font-size:38px;

color:#d9a441;

}

.stats span{

color:#cfcfcf;

}

.glass-card{

width:330px;

display:grid;

gap:20px;

z-index:2;

}

.card{

padding:28px;

background:rgba(255,255,255,.08);

backdrop-filter:blur(20px);

border:1px solid rgba(255,255,255,.12);

border-radius:20px;

transition:.4s;

}

.card:hover{

transform:translateY(-8px);

background:rgba(255,255,255,.14);

}

.circle{

position:absolute;

border-radius:50%;

filter:blur(120px);

}

.one{

width:350px;

height:350px;

background:#d9a441;

top:-100px;

left:-120px;

opacity:.18;

}

.two{

width:450px;

height:450px;

background:#355dff;

right:-120px;

bottom:-150px;

opacity:.15;

}

@media(max-width:900px){

.hero{

flex-direction:column;

text-align:center;

padding:60px 20px;

}

.hero-content{

width:100%;

}

.hero h1{

font-size:50px;

}

.hero p{

margin:auto auto 35px;

}

.buttons{

justify-content:center;

flex-wrap:wrap;

}

.stats{

justify-content:center;

gap:25px;

margin-bottom:40px;

flex-wrap:wrap;

}

.glass-card{

width:100%;

max-width:420px;

}

}