.elementor-8 .elementor-element.elementor-element-ee83fba{--display:flex;--min-height:651px;}.elementor-8 .elementor-element.elementor-element-ee83fba:not(.elementor-motion-effects-element-type-background), .elementor-8 .elementor-element.elementor-element-ee83fba > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://policyduniya.in/wp-content/uploads/2026/07/Home-Banner-Main-1.webp");background-repeat:no-repeat;background-size:100% auto;}.elementor-8 .elementor-element.elementor-element-ac82850{--display:flex;--min-height:0px;}.elementor-8 .elementor-element.elementor-element-447166e{--display:flex;--min-height:350px;}.elementor-8 .elementor-element.elementor-element-401b852{--display:flex;--min-height:410px;}.elementor-8 .elementor-element.elementor-element-bbeee4b{--display:flex;--min-height:305px;}.elementor-8 .elementor-element.elementor-element-49bb61f{--display:flex;--min-height:372px;}.elementor-8 .elementor-element.elementor-element-5a6d159{--display:flex;--min-height:0px;}:root{--page-title-display:none;}@media(min-width:768px){.elementor-8 .elementor-element.elementor-element-ac82850{--width:100%;}}@media(max-width:1024px){.elementor-8 .elementor-element.elementor-element-ee83fba{--min-height:819px;}}/* Start custom CSS for html, class: .elementor-element-daf16bd *//* ================= HERO ================= */

.hero{

padding:10px 0;

overflow:hidden;

}

.hero-container{

width:90%;

max-width:1400px;

margin:auto;

display:grid;

grid-template-columns:1fr 1fr 360px;

align-items:center;


}

/* LEFT */

.hero-left h1{

font-size:48px;

line-height:1.05;

font-weight:800;

color:#082b63;

margin:25px 0;

}

.hero-left p{

font-size:19px;

line-height:30px;

color:#5f6b7a;

margin-bottom:30px;

}

.hero-badge{

display:inline-flex;

align-items:center;

gap:10px;



padding:10px 18px;

border-radius:30px;

font-weight:600;

font-size:14px;

color:#0b56c4;

}

.hero-services{

display:grid;

grid-template-columns:repeat(2,1fr);

gap:18px;

margin-bottom:35px;

}

.service-box{

display:flex;

align-items:center;

gap:12px;

font-weight:600;

color:#183153;

}

.service-box i{

width:42px;

height:42px;

background:transparent;

border-radius:12px;

display:flex;

align-items:center;

justify-content:center;

color:#0d6efd;

box-shadow:0 10px 20px rgba(0,0,0,.08);

}

/* BUTTONS */

.hero-buttons{

display:flex;

gap:20px;

}

.btn-primary{

background:#0b4ea2;

color:white;

padding:16px 28px;

border-radius:12px;

text-decoration:none;

font-weight:600;

display:flex;

align-items:center;

gap:10px;

}

.btn-outline{

border:2px solid #0b4ea2;

padding:15px 26px;

border-radius:12px;

text-decoration:none;

font-weight:600;

display:flex;

align-items:center;

gap:10px;

color:#0b4ea2;

}

/* CENTER */

.hero-center{

text-align:center;

}

.hero-center img{

width:500%;

max-width:5200px;

}

/* FORM */

.hero-form{

background:white;

padding:12.99px;

border-radius:20px;

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

}

.hero-form h2{

font-size:34px;

color:#0a3267;

margin-bottom:10px;

}

.hero-form p{

color:#777;

margin-bottom:20px;

}

.hero-form input,

.hero-form select{

width:100%;

padding:10px;


margin-bottom:15px;

border:1px solid #ddd;

border-radius:10px;

font-size:15px;

}

.hero-form button{

width:100%;

padding:18px;

background:#18a558;

color:white;

border:none;

border-radius:10px;

font-size:17px;

font-weight:600;

cursor:pointer;

}

.hero-form small{

display:block;

margin-top:19px;

text-align:center;

color:#888;

}

/* RESPONSIVE */

@media(max-width:1200px){

.hero-container{

grid-template-columns:1fr;

text-align:center;

}

.hero-left h1{

font-size:52px;

}

.hero-buttons{

justify-content:center;

}

.hero-services{

justify-items:center;

}

}
/* ======================================================
   RESPONSIVE CSS - HERO SECTION
====================================================== */

/* ==============================
   Large Desktop (1600px+)
================================ */

@media (min-width:1600px){

.hero-container{
    max-width:1550px;
}

.hero-content h1{
    font-size:82px;
}

.hero-image img{
    max-width:820px;
}

.consultation-card{
    width:390px;
}

}

/* ==============================
   Desktop (1400px)
================================ */

@media (max-width:1400px){

.hero-container{

    width:95%;

    grid-template-columns:
    1fr
    1.15fr
    340px;

}

.hero-content h1{

    font-size:62px;

}

.hero-image img{

    max-width:640px;

}

}

/* ==============================
   Laptop (1200px)
================================ */

@media (max-width:1200px){

.hero{

    padding:60px 0;

}

.hero-container{

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

    gap:25px;

}

.hero-content h1{

    font-size:52px;

}

.hero-content p{

    font-size:18px;

    line-height:30px;

}

.hero-image img{

    max-width:520px;

}

.consultation-card{

    padding:25px;

}

.hero-features{

    gap:15px;

}

}

/* ==============================
   Tablet Landscape
================================ */

@media (max-width:992px){

.hero{

    padding:60px 20px;

}

.hero-container{

    grid-template-columns:1fr;

    text-align:center;

}

.hero-content{

    order:1;

}

.hero-image{

    order:2;

}

.consultation-card{

    order:3;

}

.hero-content p{

    width:100%;

}

.hero-content h1{

    font-size:48px;

}

.hero-features{

    grid-template-columns:repeat(2,1fr);

    max-width:500px;

    margin:35px auto;

}

.hero-image{

    margin:25px 0;

}

.hero-image img{

    width:90%;

    max-width:650px;

}

.consultation-card{

    max-width:500px;

    margin:auto;

}

.hero-trust{

    justify-content:center;

    flex-wrap:wrap;

}

}

/* ==============================
   Tablet Portrait
================================ */

@media (max-width:768px){

.hero{

    padding:50px 20px;

}

.hero-badge{

    font-size:12px;

    padding:8px 16px;

}

.hero-content h1{

    font-size:42px;

}

.hero-content p{

    font-size:17px;

    line-height:28px;

}

.hero-features{

    grid-template-columns:1fr;

    gap:16px;

}

.feature-card{

    justify-content:flex-start;

}

.hero-image img{

    width:100%;

}

.consultation-card{

    padding:30px 22px;

}

.consultation-card h2{

    font-size:32px;

}

.consultation-card input,
.consultation-card select{

    padding:15px;

}

.submit-btn{

    padding:16px;

}

}

/* ==============================
   Mobile
================================ */

@media (max-width:576px){

.hero{

    padding:40px 18px;

}

.hero-content h1{

    font-size:34px;

}

.hero-content p{

    font-size:15px;

    line-height:26px;

}

.hero-badge{

    font-size:11px;

}

.hero-image{

    margin:15px 0 25px;

}

.hero-image img{

    width:100%;

}

.feature-card{

    font-size:15px;

}

.feature-icon{

    width:46px;

    height:46px;

}

.consultation-card{

    border-radius:16px;

    padding:22px;

}

.consultation-card h2{

    font-size:28px;

}

.consultation-card p{

    font-size:15px;

}

.consultation-card input,
.consultation-card select{

    font-size:15px;

}

.submit-btn{

    font-size:16px;

}

.secure-text{

    font-size:13px;

}

}

/* ==============================
   Small Phones
================================ */

@media (max-width:400px){

.hero-content h1{

    font-size:30px;

}

.hero-content p{

    font-size:14px;

}

.hero-badge{

    font-size:10px;

}

.consultation-card{

    padding:18px;

}

.consultation-card h2{

    font-size:24px;

}

.hero-image img{

    width:100%;

}

}

/* ==============================
   Smooth Animation
================================ */

.hero-content{

    animation:fadeLeft .8s ease;

}

.hero-image{

    animation:fadeUp .9s ease;

}

.consultation-card{

    animation:fadeRight 1s ease;

}

@keyframes fadeLeft{

from{

opacity:0;

transform:translateX(-40px);

}

to{

opacity:1;

transform:translateX(0);

}

}

@keyframes fadeRight{

from{

opacity:0;

transform:translateX(40px);

}

to{

opacity:1;

transform:translateX(0);

}

}

@keyframes fadeUp{

from{

opacity:0;

transform:translateY(40px);

}

to{

opacity:1;

transform:translateY(0);

}

}/* End custom CSS */