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

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


body {
    font-family: 'Poppins', sans-serif;
    color: #333;
    line-height: 1.7;
}


a {
    text-decoration: none;
}


h1,
h2,
h3,
h4,
h5 {
    font-weight: 700;
}


/* ==========================
TOP BAR
========================== */

.topbar {

    background: #0B3D91;
    color: white;
    padding: 10px 0;
    font-size: 14px;

}


.topbar a {

    color: white;
    font-size: 18px;

}



/* ==========================
NAVBAR
========================== */


.navbar {

    padding: 12px 0;

}


.navbar-brand img {

    object-fit: contain;

}



.nav-link {

    font-weight: 500;
    margin-left: 18px;
    color: #333 !important;

}



.nav-link:hover {

    color: #0B3D91 !important;

}



.btn-primary {

    background: #0B3D91;
    border-color: #0B3D91;

}



.btn-primary:hover {

    background: #082b67;
    border-color: #082b67;

}




/* ==========================
HERO SECTION
========================== */


.hero {

    padding: 90px 0;
    background: linear-gradient(
    135deg,
    #f5f8ff,
    #ffffff
    );

}



.hero-tag {

    display: inline-block;
    background: #e8f0ff;
    color: #0B3D91;
    padding: 8px 18px;
    border-radius: 30px;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 20px;

}



.hero h1 {

    font-size: 52px;
    line-height: 1.2;
    color: #111;
    margin-bottom: 25px;

}



.hero p {

    font-size: 18px;
    color: #555;
    max-width: 550px;
    margin-bottom: 35px;

}



.hero-buttons .btn {

    margin-right: 15px;
    padding: 14px 30px;
    border-radius: 8px;

}



.hero-img {

    max-width: 520px;
    width: 100%;

    animation: floating 4s ease-in-out infinite;

}



@keyframes floating {

    0% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-12px);
    }

    100% {
        transform: translateY(0px);
    }

}
/* ==========================
SEARCH SECTION
========================== */


.search-section {

    margin-top: -40px;
    position: relative;
    z-index: 5;

}



.search-card {

    background: white;
    border-radius: 20px;

}



.search-card .form-control,
.search-card .form-select {

    height: 50px;
    border-radius: 8px;

}



.form-label {

    font-size: 14px;
    color: #333;

}



/* ==========================
ABOUT SECTION
========================== */


section {

    overflow: hidden;

}



.about-img {

    border-radius: 20px;

}



/* ==========================
COMMON SECTION TITLE
========================== */


.text-primary {

    color: #0B3D91 !important;

}



section h2 {

    font-size: 36px;

}





/* ==========================
SERVICE CARDS
========================== */


.card {

    border-radius: 18px;
    transition: all 0.3s ease;

}



.card:hover {

    transform: translateY(-8px);

}



.card-body {

    padding: 30px;

}



.card i {

    margin-bottom: 20px;

}



.card h4 {

    margin-bottom: 15px;

}



.card ul li {

    margin-bottom: 8px;
    color: #555;

}





/* ==========================
WHY PVLA SECTION
========================== */


.shadow {

    box-shadow: 0 10px 30px rgba(0,0,0,0.08) !important;

}



.why-card p {

    color: #666;

}




/* ==========================
INDUSTRY CARDS
========================== */


.bg-light {

    background-color: #f7f9fc !important;

}



.industry-card {

    padding: 30px;

}



/* ==========================
OPPORTUNITY CARDS
========================== */


.badge {

    padding: 8px 14px;
    border-radius: 20px;

}



.card p {

    color: #666;

}



.card .btn {

    border-radius: 8px;

}
/* ==========================
MEMBERSHIP SECTION
========================== */


.membership {

    background: linear-gradient(
        135deg,
        #0B3D91,
        #06265c
    );

    border-radius: 0;

}



.membership h2 {

    font-size: 38px;

}



.membership p {

    font-size: 18px;

}



.membership .btn-warning {

    padding: 14px 35px;
    border-radius: 30px;
    font-weight: 600;

}



/* ==========================
EMPLOYER CTA
========================== */


.py-5 h2 {

    color: #111;

}




/* ==========================
FOOTER
========================== */


footer {

    background: #111 !important;

}



footer h5 {

    margin-bottom: 20px;
    color: white;

}



footer p,
footer li {

    color: #bbb;

}



footer a:hover {

    color: white !important;

}



footer img {

    object-fit: contain;

}





/* ==========================
WHATSAPP FLOAT BUTTON
========================== */


.whatsapp {

    position: fixed;

    right: 25px;

    bottom: 25px;

    width: 55px;

    height: 55px;

    background: #25D366;

    color: white;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 28px;

    z-index: 999;

}



.whatsapp:hover {

    color: white;

    transform: scale(1.1);

}




/* ==========================
SCROLL TOP
========================== */


.scroll-top {

    position: fixed;

    right: 25px;

    bottom: 95px;

    width: 45px;

    height: 45px;

    background: #0B3D91;

    color: white;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    cursor: pointer;

}





/* ==========================
BUTTONS
========================== */


.btn {

    transition: all 0.3s ease;

}



.btn:hover {

    transform: translateY(-2px);

}





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


@media(max-width:992px){



.hero {

    padding:60px 0;

}



.hero h1 {

    font-size:38px;

}



.hero-img {

    margin-top:40px;

}



.nav-link {

    margin-left:0;

    padding:10px 0;

}



.search-section {

    margin-top:0;

}



}




@media(max-width:576px){



.hero h1 {

    font-size:32px;

}



.hero p {

    font-size:16px;

}



.hero-buttons .btn {

    display:block;

    width:100%;

    margin-bottom:15px;

}



section h2 {

    font-size:28px;

}



.membership h2 {

    font-size:30px;

}



.topbar {

    text-align:center;

}



}
/* ==========================
PVLA HERO IMPROVEMENT
========================== */

.navbar-brand img {
    height: 75px;
    width: auto;
}


.hero {
    min-height: 650px;
    display: flex;
    align-items: center;
    padding: 80px 0;
}


.hero h1 {
    font-size: 52px;
    font-weight: 700;
    line-height: 1.2;
}


.hero p {
    font-size: 18px;
    max-width: 550px;
    color: #555;
}


.hero-img {
    max-width: 520px;
    width: 100%;
}


.hero-buttons {
    margin-top: 30px;
}


.hero-buttons .btn {
    padding: 14px 32px;
    border-radius: 30px;
}

/* ==========================
HERO IMAGE PREMIUM STYLE
========================== */

.hero .col-lg-6:last-child {
    position: relative;
}


.hero .col-lg-6:last-child::before {

    content: "";

    position: absolute;

    width: 420px;

    height: 420px;

    background: #e8f0ff;

    border-radius: 50%;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

    z-index: 0;

}



.hero-img {

    position: relative;

    z-index: 1;

}
/* ==========================
PVLA PREMIUM UI ENHANCEMENT
========================== */


/* Smooth Website Feel */

html {
    scroll-behavior: smooth;
}


/* Premium Section Spacing */

section {
    padding-top: 80px;
    padding-bottom: 80px;
}


/* Premium Navbar */

.navbar {

    backdrop-filter: blur(10px);
    background: rgba(255,255,255,0.95) !important;

}


.navbar-brand img {

    transition: 0.3s ease;

}


.navbar-brand img:hover {

    transform: scale(1.05);

}



/* Premium Buttons */

.btn-primary {

    background: linear-gradient(
        135deg,
        #0B3D91,
        #1565c0
    );

    border: none;

    box-shadow:
    0 8px 20px rgba(11,61,145,0.25);

}



.btn-primary:hover {

    transform: translateY(-3px);

    box-shadow:
    0 12px 25px rgba(11,61,145,0.35);

}



/* Hero Premium Background */

.hero {

    background:

    radial-gradient(
    circle at top right,
    #dceaff,
    transparent 35%
    ),

    linear-gradient(
    135deg,
    #ffffff,
    #f4f8ff
    );

}



/* Hero Heading Highlight */

.hero h1 {

    letter-spacing: -1px;

}


.hero h1::first-line {

    color:#0B3D91;

}



/* Premium Cards */

.card {

    border-radius: 22px !important;

    border: none !important;

    overflow:hidden;

}



.card:hover {

    box-shadow:

    0 20px 45px rgba(0,0,0,0.12) !important;

}



/* Icon Circle Effect */

.card i {

    transition:0.3s ease;

}


.card:hover i {

    transform:scale(1.15);

}



/* Search Box Premium */

.search-card {

    border:1px solid #edf2f7;

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

}



/* Section Titles */

.text-primary.fw-bold {

    letter-spacing:1px;

    text-transform:uppercase;

    font-size:14px;

}



/* Membership Premium */

.membership {

    background:

    linear-gradient(
    135deg,
    #0B3D91,
    #001b44
    ) !important;


    border-radius:30px;

    margin:0 20px;

}



/* Footer Premium */

footer {

    border-radius:

    30px 30px 0 0;

}



/* Floating Animation */

.hero-img {

    animation:

    floatImage 4s ease-in-out infinite;

}



@keyframes floatImage {


0% {

transform:translateY(0);

}


50% {

transform:translateY(-15px);

}


100% {

transform:translateY(0);

}


}



/* Mobile Improvement */

@media(max-width:768px){

section {

padding-top:50px;
padding-bottom:50px;

}


.hero h1 {

font-size:34px;

}


.membership {

margin:0;

border-radius:0;

}

}
/* ==========================
TRUST STRIP
========================== */


.trust-strip {

    background:#ffffff;

    padding:40px 0;

}



.trust-box {

    padding:25px;

    border-radius:20px;

    background:#f8faff;

    height:100%;

    transition:0.3s ease;

}



.trust-box i {

    font-size:35px;

    color:#0B3D91;

    margin-bottom:15px;

}



.trust-box h5 {

    font-size:18px;

}



.trust-box p {

    color:#666;

    font-size:14px;

}



.trust-box:hover {

    transform:translateY(-8px);

    box-shadow:0 15px 35px rgba(0,0,0,0.08);

}
/* ==========================
PREMIUM SEARCH SECTION
========================== */


.search-section {

    padding:60px 0;

    background:#f7faff;

}



.search-wrapper {

    background:white;

    border-radius:30px;

    padding:45px;

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

}



.search-heading span {

    color:#0B3D91;

    font-size:14px;

    font-weight:700;

    letter-spacing:1px;

}



.search-heading h2 {

    margin-top:15px;

    font-size:34px;

}



.search-heading p {

    color:#666;

    margin-bottom:35px;

}



.search-card label {

    font-weight:600;

    margin-bottom:8px;

}



.search-card .form-control,
.search-card .form-select {

    height:55px;

    border-radius:12px;

    border:1px solid #ddd;

}



.search-card .btn {

    height:55px;

    border-radius:12px;

}
/* ==========================
PREMIUM ABOUT SECTION
========================== */


.section-tag {

    color:#0B3D91;

    font-size:14px;

    font-weight:700;

    letter-spacing:1px;

}



.about-section h2 {

    font-size:38px;

    line-height:1.3;

    margin:20px 0;

}



.about-section p {

    color:#666;

    font-size:16px;

}



.about-image-box {

    position:relative;

}



.about-image-box img {

    border-radius:30px;

    box-shadow:
    0 25px 60px rgba(0,0,0,0.12);

}



.about-points {

    margin-top:25px;

}



.about-points div {

    margin-bottom:12px;

    font-weight:500;

}



.about-points i {

    color:#0B3D91;

    margin-right:10px;

}
/* ==========================
PREMIUM SERVICE CARDS
========================== */


.services-section h2 {

    font-size:36px;

}



.service-card {

    background:white;

    padding:35px;

    border-radius:25px;

    height:100%;

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

    transition:0.3s ease;

}



.service-card:hover {

    transform:translateY(-10px);

}



.service-icon {

    width:70px;

    height:70px;

    border-radius:20px;

    background:#e8f0ff;

    color:#0B3D91;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:30px;

    margin-bottom:25px;

}



.service-icon.blue {

    background:#e8f0ff;

    color:#1565c0;

}



.service-icon.green {

    background:#e8fff0;

    color:#198754;

}



.service-card h4 {

    margin-bottom:15px;

}



.service-card p {

    color:#666;

}



.service-card ul {

    padding:0;

    list-style:none;

    margin-top:20px;

}



.service-card ul li {

    margin-bottom:10px;

}



.service-card ul li::before {

    content:"✓";

    color:#0B3D91;

    font-weight:bold;

    margin-right:10px;

}



.service-card a {

    color:#0B3D91;

    font-weight:600;

}
/* ==========================
WHY PVLA PREMIUM CARDS
========================== */


.why-card {

    background:white;

    padding:35px 25px;

    border-radius:25px;

    text-align:center;

    height:100%;

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

    transition:0.3s ease;

}



.why-card:hover {

    transform:translateY(-8px);

}



.why-card i {

    width:70px;

    height:70px;

    display:flex;

    align-items:center;

    justify-content:center;

    margin:0 auto 20px;

    border-radius:50%;

    background:#e8f0ff;

    color:#0B3D91;

    font-size:30px;

}



.why-card h5 {

    margin-bottom:15px;

}



.why-card p {

    color:#666;

    font-size:15px;

}
/* ==========================
ABOUT PAGE PREMIUM STYLING
========================== */


/* About Hero */

.about-hero {

    min-height:600px;

    display:flex;

    align-items:center;

    background:

    radial-gradient(
    circle at top right,
    #dceaff,
    transparent 35%
    ),

    linear-gradient(
    135deg,
    #ffffff,
    #f5f9ff
    );

    padding:80px 0;

}



.about-hero h1 {

    font-size:52px;

    font-weight:700;

    line-height:1.2;

    color:#0B3D91;

}



.about-hero p {

    font-size:18px;

    color:#666;

    margin-top:20px;

    margin-bottom:30px;

}



.about-hero-img {

    max-width:520px;

    width:100%;

    border-radius:30px;

    box-shadow:

    0 25px 60px rgba(0,0,0,0.12);

}



/* CTA Box */

.cta-box {

    background:

    linear-gradient(
    135deg,
    #0B3D91,
    #001b44
    );

    color:white;

    padding:50px;

    border-radius:30px;

}



.cta-box h2 {

    font-size:36px;

    font-weight:700;

}



.cta-box p {

    font-size:17px;

    opacity:0.9;

}



.cta-box .btn {

    padding:14px 35px;

}



/* About Page Mobile */

@media(max-width:768px){


.about-hero {

    text-align:center;

    padding:50px 0;

}



.about-hero h1 {

    font-size:36px;

}



.cta-box {

    padding:30px;

    text-align:center;

}



.cta-box h2 {

    font-size:28px;

}


}
/* ==========================
SERVICES PAGE
========================== */


/* Services Hero */

.services-hero,
.about-hero{

padding:90px 0;

background:linear-gradient(
135deg,
#f7fbff,
#ffffff
);

}



.services-hero h1{

font-size:48px;

font-weight:800;

color:#0B3D91;

line-height:1.2;

}



.services-hero p{

font-size:18px;

color:#555;

line-height:1.8;

margin-top:20px;

}



.services-hero img{

max-height:450px;

object-fit:contain;

}



/* Section Tag */

.section-tag{

display:inline-block;

font-size:13px;

font-weight:700;

letter-spacing:1px;

color:#0B3D91;

background:#eaf2ff;

padding:8px 18px;

border-radius:50px;

}





/* Service Cards */

.card{

transition:0.3s ease;

}



.card:hover{

transform:translateY(-8px);

box-shadow:0 20px 45px rgba(0,0,0,0.12)!important;

}





.card h4{

font-weight:700;

color:#222;

}



.card p{

color:#666;

line-height:1.7;

}





/* Service Icons */

.card i{

transition:0.3s;

}



.card:hover i{

transform:scale(1.1);

}





/* Recruitment Process */


.process-card{

background:white;

border-radius:20px;

padding:35px;

height:100%;

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

text-align:center;

}



.process-card i{

font-size:40px;

color:#0B3D91;

margin-bottom:20px;

}



.process-card h5{

font-weight:700;

}





/* Industries */


.bg-light .card{

border-radius:18px;

}



.bg-light .card h5{

font-weight:700;

}





/* CTA Box */


.cta-box{

background:linear-gradient(
135deg,
#0B3D91,
#06285f
);

padding:50px;

border-radius:25px;

color:white;

box-shadow:0 20px 40px rgba(11,61,145,0.25);

}



.cta-box h2{

font-weight:800;

font-size:34px;

}



.cta-box p{

font-size:18px;

opacity:0.9;

}





/* Buttons */


.btn-primary{

background:#0B3D91;

border-color:#0B3D91;

}



.btn-primary:hover{

background:#06285f;

border-color:#06285f;

}





/* Footer spacing */

footer{

margin-top:40px;

}





/* Mobile */

@media(max-width:768px){


.services-hero,
.about-hero{

padding:50px 0;

text-align:center;

}


.services-hero h1,
.about-hero h1{

font-size:34px;

}


.cta-box{

padding:30px;

text-align:center;

}


.cta-box h2{

font-size:26px;

}


}
/* ==========================
OPPORTUNITIES PAGE HERO
========================== */


.jobs-hero{

padding:90px 0;

background:linear-gradient(
135deg,
#f7fbff,
#ffffff
);

}



.jobs-hero h1{

font-size:48px;

font-weight:800;

color:#0B3D91;

line-height:1.2;

}



.jobs-hero p{

font-size:18px;

color:#666;

line-height:1.8;

max-width:550px;

}





/* ==========================
JOB SEARCH BOX
========================== */


.search-box{

background:white;

padding:35px;

border-radius:20px;

margin-top:-40px;

position:relative;

z-index:2;

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

}



.search-box .form-label{

font-weight:600;

color:#333;

}



.search-box .form-control,
.search-box .form-select{

height:48px;

border-radius:10px;

}





.search-box .btn{

height:48px;

border-radius:10px;

font-weight:600;

}





/* ==========================
JOB CARDS
========================== */


.job-card{

background:white;

padding:30px;

border-radius:20px;

height:100%;

transition:0.3s;

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

}



.job-card:hover{

transform:translateY(-8px);

box-shadow:0 18px 45px rgba(0,0,0,0.12);

}



.job-card h4{

font-weight:700;

color:#0B3D91;

margin-top:20px;

}



.job-card h6{

font-weight:500;

}



.job-card hr{

opacity:0.15;

}



.job-card p{

color:#555;

margin-bottom:12px;

}



.job-card i{

width:22px;

}





.job-card .btn{

border-radius:10px;

font-weight:600;

}





/* ==========================
WHY PVLA FEATURE BOX
========================== */


.feature-box{

background:white;

padding:30px;

border-radius:20px;

height:100%;

text-align:center;

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

transition:0.3s;

}



.feature-box:hover{

transform:translateY(-8px);

}



.feature-box i{

font-size:40px;

color:#0B3D91;

margin-bottom:20px;

}



.feature-box h5{

font-weight:700;

margin-bottom:15px;

}



.feature-box p{

color:#666;

line-height:1.7;

}





/* ==========================
CTA BOX
========================== */


.cta-box{

background:linear-gradient(
135deg,
#0B3D91,
#1558c0
);

padding:45px;

border-radius:25px;

color:white;

}



.cta-box h2{

font-weight:800;

}



.cta-box p{

font-size:17px;

opacity:0.9;

}





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


@media(max-width:768px){


.jobs-hero{

padding:50px 0;

text-align:center;

}



.jobs-hero h1{

font-size:34px;

}



.jobs-hero p{

font-size:16px;

}



.search-box{

margin-top:20px;

padding:25px;

}



.job-card{

padding:25px;

}



.cta-box{

padding:30px;

text-align:center;

}


}
/* ==========================
REGISTER PAGE HERO
========================== */


.register-hero{

padding:90px 0;

background:linear-gradient(
135deg,
#f7fbff,
#ffffff
);

}


.register-hero h1{

font-size:48px;

font-weight:800;

color:#0B3D91;

line-height:1.2;

}


.register-hero p{

font-size:18px;

color:#666;

line-height:1.8;

max-width:550px;

}





/* ==========================
REGISTRATION FORM CARD
========================== */


.form-card{

background:#ffffff;

padding:45px;

border-radius:25px;

box-shadow:0 15px 45px rgba(0,0,0,0.10);

}





.form-card h2{

color:#0B3D91;

font-weight:800;

}





.form-card h5{

font-weight:700;

color:#222;

}





.form-card hr{

opacity:0.15;

}





.form-label{

font-weight:600;

color:#333;

}





.form-control,
.form-select{

height:48px;

border-radius:10px;

border:1px solid #ddd;

padding:10px 15px;

}



.form-control:focus,
.form-select:focus{

border-color:#0B3D91;

box-shadow:0 0 0 .2rem rgba(11,61,145,.15);

}





/* ==========================
PAYMENT SECTION
========================== */


.payment-box{

background:linear-gradient(
135deg,
#f7fbff,
#ffffff
);

border:1px solid #e4ebf5;

padding:40px;

border-radius:25px;

}





.payment-box h2{

font-size:42px;

font-weight:800;

color:#0B3D91;

}





.qr-image{

width:240px;

height:240px;

object-fit:contain;

display:block;

margin:25px auto;

padding:10px;

background:white;

border-radius:15px;

box-shadow:0 8px 25px rgba(0,0,0,0.10);

}





.payment-box p{

font-size:16px;

}



/* ==========================
MEMBERSHIP PAGE HERO
========================== */


.membership-hero{

padding:90px 0;

background:linear-gradient(
135deg,
#f7fbff,
#ffffff
);

}



.membership-hero h1{

font-size:48px;

font-weight:800;

color:#0B3D91;

line-height:1.2;

}



.membership-hero p{

font-size:18px;

color:#666;

line-height:1.8;

max-width:550px;

}





/* ==========================
MEMBERSHIP CARD
========================== */


.membership-card{

background:white;

padding:45px;

border-radius:25px;

box-shadow:0 15px 45px rgba(0,0,0,0.10);

}



.membership-card h2{

font-weight:800;

color:#0B3D91;

}



.membership-card .price{

font-size:55px;

font-weight:800;

color:#0B3D91;

margin:20px 0;

}



.membership-card p{

font-size:16px;

color:#555;

}



.membership-card hr{

opacity:.15;

margin:25px 0;

}



.membership-card .btn{

border-radius:12px;

padding:14px;

font-weight:600;

}





/* ==========================
BENEFIT FEATURE BOX
========================== */


.feature-box{

background:white;

padding:30px;

border-radius:20px;

height:100%;

text-align:center;

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

transition:.3s;

}



.feature-box:hover{

transform:translateY(-8px);

}



.feature-box i{

font-size:40px;

color:#0B3D91;

margin-bottom:20px;

}



.feature-box h5{

font-weight:700;

margin-bottom:15px;

}



.feature-box p{

color:#666;

line-height:1.7;

}





/* ==========================
CTA BOX
========================== */


.cta-box{

background:linear-gradient(
135deg,
#0B3D91,
#1558c0
);

padding:45px;

border-radius:25px;

color:white;

}



.cta-box h2{

font-weight:800;

}



.cta-box p{

font-size:17px;

opacity:.9;

}





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


@media(max-width:768px){


.membership-hero{

padding:50px 0;

text-align:center;

}



.membership-hero h1{

font-size:34px;

}



.membership-hero p{

font-size:16px;

}



.membership-card{

padding:30px 20px;

}



.membership-card .price{

font-size:45px;

}



.cta-box{

padding:30px;

text-align:center;

}


}
/* ==========================
CONTACT PAGE HERO
========================== */


.contact-hero{

padding:90px 0;

background:linear-gradient(
135deg,
#f7fbff,
#ffffff
);

text-align:center;

}



.contact-hero h1{

font-size:48px;

font-weight:800;

color:#0B3D91;

line-height:1.2;

}



.contact-hero p{

font-size:18px;

color:#666;

max-width:700px;

margin:20px auto 0;

line-height:1.8;

}





/* ==========================
CONTACT INFO
========================== */


.contact-info{

margin-top:35px;

}



.contact-item{

display:flex;

align-items:flex-start;

gap:20px;

margin-bottom:30px;

}



.contact-item i{

font-size:28px;

color:#0B3D91;

width:45px;

height:45px;

display:flex;

align-items:center;

justify-content:center;

background:#f2f7ff;

border-radius:50%;

}



.contact-item h5{

font-weight:700;

margin-bottom:5px;

}



.contact-item p{

color:#666;

margin:0;

}





/* ==========================
CONTACT FORM CARD
========================== */


.contact-card{

background:white;

padding:40px;

border-radius:25px;

box-shadow:0 15px 45px rgba(0,0,0,0.10);

}



.contact-card h3{

font-weight:800;

color:#0B3D91;

}



.contact-card .form-control,
.contact-card .form-select{

height:50px;

border-radius:10px;

border:1px solid #ddd;

padding:12px 15px;

}



.contact-card textarea{

height:auto !important;

}





.contact-card .btn-primary{

background:#0B3D91;

border:none;

border-radius:12px;

padding:14px 30px;

font-weight:600;

}



.contact-card .btn-primary:hover{

background:#082c6b;

}





/* ==========================
CTA BOX
========================== */


.cta-box{

background:linear-gradient(
135deg,
#0B3D91,
#1558c0
);

padding:45px;

border-radius:25px;

color:white;

}



.cta-box h2{

font-weight:800;

}



.cta-box p{

font-size:17px;

opacity:.9;

}





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


@media(max-width:768px){


.contact-hero{

padding:50px 0;

}



.contact-hero h1{

font-size:34px;

}



.contact-hero p{

font-size:16px;

}



.contact-card{

padding:25px;

}



.contact-item{

gap:15px;

}



.cta-box{

padding:30px;

text-align:center;

}


}