.hero_bg {
height: 88.5vh;
background: linear-gradient(to right, #263F96, #061029);
position: relative;
}

.dz-bnr-inr p{
    margin-left:0;
    margin-right:0;
}

.left_placeholder {
height: 450px;
background: linear-gradient(to right, #263F96, #263F96);
width: 50%;
border-top-right-radius: 250px;
border-bottom-right-radius: 250px;
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
display: flex;
align-items: center;
overflow: hidden;
}

#phone_view_only {
display: none;
}

#subheading-mobile::before {
content: none;
}

.carousel_indicator_container {
display: flex;
align-items: center;
position: absolute;
right: 0;
bottom: -40px;
gap: 18px;
}

/*.btn.graybg-btn {*/
/*color: #102d7b !important;*/
/*}*/

@keyframes spreadHorizontal {
0% {
transform: scaleX(1);
}

50% {
transform: scaleX(1.6);
}

100% {
transform: scaleX(1);
}
}


.active_indicator {
background-color: #3574e3;
height: 19px;
width: 42px;
animation: spreadHorizontal 0.4s ease;
transition: width 0.3s ease;
}

.carousel_indicator {
width: 19px;
height: 13px;
background-color: white;
border-radius: 12px;
cursor: pointer;
}

.active_indicator {
background-color: #3574e3;
width: 42px;
}

.read_more_btn {
position: relative;
min-width: 300px;
display: flex;
align-items: center;
justify-content: space-between;
border-radius: 12px;
padding: 6px;
}

.hero_right_side {
position: absolute;
top: 52%;
right: 110px;
transform: translateY(-50%);
width: 515px;
height:420px;
color: white;
line-height: 28px;
}

#read-more-link {
color: #263F96 !important;
margin-top: 16px;
}

#read-more-link:hover {
color: white !important;
}

#subheading::before {
content: none;
}

#description {
text-align: justify;
line-height: 30px;
margin-top: 24px;
}

.lightblue-text {
color: #3574e3 !important;
}

.hero-title {
font-size: 36px;
text-transform: uppercase;
}

#subheading,
#subheading-mobile {
font-weight: 700 !important;
font-size: 26px !important;
margin-top: -5px !important;
}

.product_image {
height: 350px;
margin: 0 0 0 35px;
max-width: 100%;
object-fit: contain;
}


/* #carousel_number {
color: white !important;
} */

@keyframes popIn {
0% {
transform: scale(0.8);
opacity: 0;
}

100% {
transform: scale(1);
opacity: 1;
}
}

.popIn {
animation: popIn 0.8s ease-in-out;
}




/* --------------------- Responsiveness of slider */


/* 1. Extra Large Desktops (Below 1440px or your custom wide screens) */
/* @media (max-width: 1440px) {
} */

@media (max-width: 1148px) {
.hero_right_side {
/* position: absolute;
top: 50%; */
right: 50px;
/* transform: translateY(-50%); */
width: 480px;
line-height: 28px;
}

.product_image {
height: 280px;
margin: 0 0 0 0;
}
}

/* 2. Custom Large Screen (Below 1148px — your request) */
@media (max-width: 1100px) {
.hero_right_side {
right: 30px;
width: 430px;
line-height: 28px;
}

.left_placeholder {
height: 400px;
min-width: 50%;
border-top-right-radius: 250px;
border-bottom-right-radius: 250px;
}

#description {
line-height: 24px;
margin-top: 0;
}
}

/* 3. Tablets Landscape (Below 1024px) */
@media (max-width: 1024px) {
.hero-title {
font-size: 30px;
}

#subheading {
font-size: 20px !important;
}

.hero_right_side {
right: 15px;
width: 400px;
line-height: 28px;
}
}

/* 4. Tablets Portrait (Below 768px) */
@media (max-width: 868px) {
#phone_view_only {
display: block;
margin: 3rem 0;
padding: 0 2rem;
}

#hero-title,
#subheading {
display: none;
}

#read-more-link {
/*width: 200px;*/
/*margin-top:0;*/
margin-right: auto;
}

.hero-title {
font-size: 18px;
}

#description {
margin-top: -35px;
}

#subheading,
#subheading-mobile {
font-size: 16px !important;
}

.hero_bg {
min-height: 130vh;
position: static;
display: flex;
flex-direction: column;
}

.left_placeholder {
height: 250px;
width: 95%;
position: static;
transform: translateY(0);
}

.hero_right_side {
position: static;
margin-top: 1rem;
width: 100%;
line-height: 28px;
transform: translateY(0);
padding: 0 2rem;
display: flex;
justify-content: center;
flex-direction: column;
/*align-items: center;*/
}

.carousel_indicator_container {
position: static;
margin-top: 6rem !important;
width: fit-content;
margin: 0 auto;
}

.product_image {
height: 180px;
margin: 0 0 0 0px;
max-width: 100%;
object-fit: contain;
}

}

/* 5. Mobile Phones (Below 480px or 425px) */
@media (max-width: 480px) {
/* Mobile-friendly layout, large tap targets, etc. */
}