@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Roboto', sans-serif;
  line-height: 1.5em;
}
img{
  width: 100%;
}

body {
  background: #fff;
  color: #fff;
}
p{
  font-weight: 400;
}
h2{
  text-transform: capitalize;
}
a{
  color: #fff;
  text-decoration: none;
}
a:hover{
  color: #fff;
  text-decoration: underline;
}

/* Container */
.container {
  width: 90%;
  /* max-width: 1250px; */
  max-width: 1350px;
  margin: auto;
}

/* Header */
.header {
  background: #fff;
  padding: 15px 0;
}

.header-flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #1e2a78;
  font-size: 14px;
}

.logo img {
  width: 175px;
}

/* Download Button */

.download-btn {
  background: #000;
  color: #fff;
  padding: 10px 10px 10px 20px;
  border-radius: 25px;
  text-decoration: none;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  transition: 0.3s;
}

.download-btn:hover {
  background: #333;
}

.arrow {
  background: #fff;
  border-radius: 50%;
  width: 25px;
  height: 25px;
  padding: 4px;
  display: flex;
    justify-content: center;
    align-items: center;
}
.arrow img{
    width: 10px;
    height: auto;
}


/* Hero Section */
.hero {
  position: relative;
  background: url('/assets/images/cc-banner1.png') no-repeat center center/cover;
  min-height: 90vh;
  display: flex;
  align-items: center;
}
.hero h1{
  width: 645px;
}

.overlay {
  position: absolute;
  inset: 0;
 /* background: linear-gradient(to right, rgba(0,0,40,0.85), rgba(0,0,0,0.3)); */
}

.hero-content {
  position: relative;
  z-index: 2;
  /* max-width: 1200px; */
  max-width: 1370px;
  margin: 200px auto 10px;
}

.hero h1 {
  font-size: 52px;
  font-weight: 400;
  margin-bottom: 25px;
  line-height: 1.2;
}

.description {
  font-size: 18px;
  line-height: 1.6;
  margin-bottom: 20px;
  font-weight: 400;
  width: 653px;
}

.small-text {
  font-size: 16px;
  opacity: 0.9;
  font-weight: 400;
  margin-bottom: 40px;
}

.report1sec{
    width: 100%;
    overflow: hidden;
}

.map-report-mob{
  display: none;
}
.report1sec img{
    width: 100%;
}
.studyfocussec{
  background: #eaeaf0;
  margin-top:-7px;
    min-height: 150px;
    padding-top: 50px;
  
}
.studyfocussec h2{
  font-weight: 300;
  color: #191919;
}
.studyfocusbxsec{
  padding-bottom: 50px;
  margin-top:-55px;
}
.container-full{
  width:100%;
}
.bgbx3{
  display: flex;    
  align-items: stretch;
  background-color: #fff;
}
.bx1 p{
  background-color: #fff;
  padding: 40px;
  font-weight: 400;
  color:#000;
  border-bottom:1px dashed #000;
  border-right:1px dashed  #000;
  border-top:1px solid #000;
  border-left:1px solid #000;
}
.bx2{
  margin-top: -120px;
  background-color: #fff;
}
.bx3{
  margin-top: -255px;
  border-right: none;
  background-color: #fff;
}
.methodologysec{
  color:#000;
  padding-top: 40px;
  padding-bottom: 150px;
}
.methodologysec .sec-title{
  text-transform: uppercase;
  letter-spacing: 5px;
}
.methodologysec h2{
  font-weight: 300;
  margin-bottom: 40px;
}
.pbold{
  font-weight: 600;
  margin-top: 30px;
}
.txth1{
  font-size: 22px;
  margin-bottom: 15px !important;  
  margin-top: 20px !important;
  font-weight: 500;
}

.methodologysec img{
  margin-top: 40px;
  width: 90%;
}
.flow-chart img{
  display: none;
}
.flow-chart svg{
  width: 90%;
  margin: -100px 0 -130px;
}
#bx11:hover, 
#bx12:hover,
#bx13:hover,
#bx14:hover{
  fill:#1B1941;
  cursor:pointer;
  transition:0.3s;
}

/* Change text color when box is hovered */
#bx11:hover + #bx11txt,
#bx12:hover + #bx12txt,
#bx13:hover + #bx13txt,
#bx14:hover + #bx14txt{
  fill:#fff;
  transition:0.3s;
}
.datacollectionsec{
  background-color: #1b193f;
  /* padding: 40px 0 10px; */
  padding: 0;
}
.datacollectionsec h2{
  font-weight: 300;
}
.datacollectionsec .container{
  display: flex;
  flex-direction: column;
  row-gap: 30px;
}
.blackbxtxt{
  font-weight: 600;
  background-color: #313052;
  padding: 20px;
  width: fit-content;
}
.whitebxtxt{
  background-color: #fff;
  padding: 8px 15px;
  color:#000;
  width: fit-content;
  margin-top: 30px;
}
.data-container-contain1 ul{
  margin: 0;
  padding: 20px;
}
.data-container-contain1 ul::before {
    content: '';
    position: static;
    top: 0;
    left: 0;
    bottom: 0;
    width: 0;
    background-color: rgba(255, 255, 255, 0.4);
}
.data-container-contain1 li{
  color:#fff;
  margin-bottom: 10px;
}
.datacollectionsec .img1{
  width: 90%;
  margin-left: -12px;
  margin-bottom: 30px;
}
.datacollectionsec .img1-mob{
  margin-left: 0;
 display: none;
}
.whitebxtxt1{
  background-color: #fff;
  padding: 8px 15px;
  color:#000;
  width: fit-content;
  margin-top: 20px;
}
.datacollectionsec .img2{
  width: 700px;
  margin-left: -8px;
  margin-bottom: 20px;
}

.urbanvsec{
  background-color: #ffffff;
  padding: 60px 0;
  color: #000;
}
.urbanvsec h2{
  font-weight: 300;
}
.urbanvsec .container{
  display: flex;
  flex-direction: column;
  row-gap: 30px;
}
.grid-4{
  width: 100%;
  display: flex;
}
.uv-bx{
  height: 400px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.uv-bx .year-txt{
  font-size: 40px;
  font-weight: 300;
  line-height: 1.3em;
}
.uv-bx p{
  font-weight: 500;
}
.uvbx1{
  background-color: #FFD980;
  padding:20px;
  color:#424856;
  width:25%;
}
.uvbx1:hover{
  background-color: #FFCA51;
}
.uvbx2{
  background-color: #FFBA81;
  padding:20px;
  color:#182914;
  width:25%;
}
.uvbx2:hover{
  background-color: #FF9C4C;
}
.uvbx3{
  background-color: #F89477;
  padding:20px;
  color: #103A52;
  width:25%;
}
.uvbx3:hover{
  background-color: #FF7E59;
}
.uvbx4{
  background-color: #FF774F;
  padding:20px;
  color:#12112B;
  width:25%;
}
.uvbx4:hover{
  background-color: #E6552A;
}
.grid-2{
  display: flex;
  flex-direction: row;
  column-gap: 60px;
  row-gap: 20px;
  padding:20px 0;
}

.climate-section{
max-width:1250px;
width: 100%;
margin:0 auto;
padding:40px 20px;
text-align:center;
display: flex;
    flex-direction: column;
    align-items: center;
    align-content: center;
}

.graph-txt{
  margin-top: 30px;
}
.graph-txt a{
  color:#191919;
  font-size: 15px;
  margin-top: 30px;
}

/* Tabs */

.tabs{
display:flex;
justify-content:center;
flex-wrap:wrap;
margin-bottom:40px;
gap:8px;
z-index: 1;
}

.tab{
padding:14px 26px;
border:none;
cursor:pointer;
font-size:16px;
background:#FBE5B2;
color:#424856;
transition:0.3s;
width: 325px;
font-weight: 600;
text-transform: capitalize;
}

.tab:not(:last-child){
border-right:2px solid #e7e1d3;
}

.tab:hover{
  background: #C39732;
  color:#fff;
}

.tab.active:hover{
  background: #C39732;
  color:#fff;
}

.tab.active{
background:#6a4d0f;
color:#fff;
}

/* Content */

.tab-wrapper{
  width: 100%;
}
.tab-content{
background:#FEF9EC;
padding:40px;
width: 100%;
margin-top: -60px;
}

.content{
display:none;
}

.content.active{
display:block;
}

.content img{
width: 400px;
height:auto;
margin-top: 30px;
}

.img-name{
  font-size: 16px;
  text-transform: uppercase;
  margin-top:-35px;
  letter-spacing: 4px;
  font-weight: 400;
}

.desc{
margin-top:30px;
font-size:20px;
color:#222;
font-weight: 500;
}

.survtabsec{
  background-color: #1b193f;
  padding: 60px 0;
}
.survtabsec h2{
  font-weight: 300;
}
.survtabsec .container{
  display: flex;
  flex-direction: column;
}

/* Tabs */

.surveyTabs_nav{
display:flex;
justify-content:center;
margin-top: 30px;
justify-content: left;
}

.surveyTabs_btn{
padding:18px;
border:none;
cursor:pointer;
font-size:20px;
background:#2f2f2f;
font-weight:500;
color:#fff;
width: 100%;
display: flex;
justify-content: center;
text-align: center;
}
.surveyTabs_btn{
  width: 380px;
}

.surveyTabs_btn.active{
background:#fff;
color:#2F2F2F;
}

/* Tab Content */

.surveyTabs_content{
display:none;
padding:60px;
background-color: #fff;
}

.surveyTabs_content.active{
display:block;
}

/* Grid */

.surveyTabs_grid{
display:flex;
align-items:flex-start;
gap:60px;
}

/* Text */

.surveyTabs_text{
flex:1;
}

.surveyTabs_title{
font-size:25px;
margin-bottom:20px;
color: #000;
font-weight: 500;
}

.surveyTabs_desc{
font-size:16px;
line-height:1.6;
color:#333;
margin-bottom:16px;
font-weight: 400;
}

.surveyTabs_link{
text-decoration:underline;
}

/* Graphic */

.surveyTabs_graphic{
flex:1;
position:relative;
display:flex;
justify-content:center;
}
.surveyTabs_graphic1{
flex:1;
width:100%;
}
.surveyTabs_gender_wrap img{
  /* width: 85%;   */
  width: 550px;
  margin-top: -30px;
}
.surveyTabs_gender_wrap{
display:flex;
gap:80px;
align-items:center;
}
.surveyTabs_gender_wrap1{
width:100%;
}
.surveyTabs_gender_wrap1 .label{
 width:20%;
}
.surveyTabs_gender_wrap1 .chart::before{
  left:20%;
}
.surveyTabs_gender_wrap1 .chart::after{
  margin-left:20%;
}
#migrationchart5, #migrationchart5{
  margin-top:10px;
}

/* Labels */

.surveyTabs_label{
display:block;
margin-bottom:10px;
font-size:16px;
text-align:center;
}

/* Boxes */

.surveyTabs_box{
font-size:60px;
color:#fff;
padding:20px 40px;
font-weight:600;
}

.male_box{
background:#3b356f;
}

.female_box{
background:#c24621;
}

/* Placeholder */

.surveyTabs_placeholder{
text-align:center;
font-size:22px;
padding:80px;
}

.migrationsec{
  background-color: #1b193f;
  padding: 60px 0;
}
.migrationsec h2{
  font-weight: 300;
}
.migrationsec .container{
  display: flex;
  flex-direction: column;
  row-gap: 30px;
}
.whitecontainer{
  background-color:#fff;
  padding: 40px;
}
.brline1{
  width: 100%;
  height:0.3px;
  background-color:#7E7E7E;
  margin-top: 40px;
}
.top-20{
  margin-top: 50px;
}
.grid-2-1{
  display: flex;
  gap: 80px;
  align-items: center;
}
.grid-35{
  width:30%;
}
.grid-65{
  width:70%;
}
.surveyTabs_title1{
font-size:25px;
margin-bottom:5px;
color: #ffffff;
font-weight: 400;
}

.surveyTabs_desc1{
font-size:16px;
line-height:1.6;
color:#ffffff;
font-weight: 400;
margin-bottom: 10px;
}
.grid-70 img{
  width:83%;
}

.weaterexposec{
  color:#000;
  padding-bottom: 60px;
  padding-top:60px;
}
.weaterexposec h2{
  font-weight: 300;
  margin-bottom: 40px;
  width:665px;
}
.weaterexposec img{
  margin:40px 0;
}
.grid-2-2 {
    display: flex;
    gap: 80px;
    align-items: flex-start;
}
.qt-bx1{
  background-color: #F6F8FB;
  padding: 30px;
  display: flex;    
  flex-direction: column;
  margin-top: 30px;
}
.qt-bx1 img{
    width: 50px;
    margin-left: -50px;
    margin-top:-50px;
    margin-bottom: 15px;
}
.qt-txt{
  font-size: 17px;
  color:#5A5A5A;
  margin-bottom: 20px;
}
.qt-name{
  font-size: 14px;
  color: #191919;
  font-weight: 500;
}
.mid-txtbx{
  margin-top: 40px;
}

.grid-2-2{
  margin-top: 50px;
}

.qt-bx2{
  background-color: #F6F8FB;
  padding: 20px;
  display: flex;    
  flex-direction: column;
  margin-top: 30px;
}
.qt-img1{
  margin: 0 !important;
}
.qt-bx2 .qt-icon{
    width: 45px;
    margin-left: -5px;
    margin-top: -40px;
    margin-bottom: 15px;
}
.weaher-event-gr .tabs {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 0;
    gap:0;
}
.weaher-event-gr .tab-content {
    background: #EDF0F7;
    padding: 40px;
    width: 100%;
    margin-top: 0;
}
.weaher-event-gr .tab {
    padding: 14px 26px;
    border: none;
    cursor: pointer;
    font-size: 16px;
    background: #fff;
    color: #424856;
    transition: 0.3s;
    width: 50%;
    font-weight: 600;
}

.weaher-event-gr .tab:hover{
  background: #EDF0F7;
  color:#000;
}

.weaher-event-gr .tab.active:hover{
  background: #EDF0F7;
  color:#000;
}

.weaher-event-gr .tab.active{
background:#EDF0F7;
color:#000;
}
.weaher-event-gr .chart{
  margin-top: 15px;
}

.colorn{ 
    background-color: #EDF0F7 !important;
}
.recoverysec{
  color:#000;
  padding-bottom: 60px;
  padding-top:60px;
  background-color: #eaeaf0;
  margin-bottom: -250px;
}
.recover-cont{
  display: flex;
  flex-direction: column;
  gap: 20px;
  z-index: 1;
  position: relative;
}
.city-img-sec{
  background-color: #eaeaf0;
  margin-bottom: -10px;
}
.city-mob{
  display: none;
}


/* Header Row */
.table-container a{
  text-decoration: none !important;
}

.header-row {
  display: flex;
  margin-bottom: 20px;
  font-weight: 600;
  font-size: 16px;
  letter-spacing: 0.5px;
}

.col-city-header {
  flex: 0 0 320px;
  padding-left: 20px;
}

.col-sectors-header {
  flex: 1;
}

.br-line1{
  width: 100%;
  height: 1px;
  background-color: #f1f1f13f;
  margin-bottom: 40px;
}

/* Data Rows */
.data-row {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
  border-left: 4px solid transparent;
  min-height: 90px;
  /* Add a very subtle drop shadow for depth */
  /* box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); */
}

/* Columns */
.col-city {
  flex: 0 0 320px;
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 15px 20px;
}

.map-icon {
  width: 45px;
  height: 45px;
  object-fit: contain;
  display: none;
}

.city-name {
  font-size: 26px;
  font-weight: 300;
  color: #f8f8f8;
}

.col-sectors {
  flex: 1;
  padding: 15px 20px 15px 0;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.5;
  color: #e2e2e2;
}

/* Individual Row Colors (Gradients & Left Borders) */
.row-dhaka {
  background: linear-gradient(90deg, #184152 0%, #11263500 100%);
  border-color: #2394b3;
}

.row-delhi {
  background: linear-gradient(90deg, #2e285a 0%, #1b173600 100%);
  border-color: #5e4d9b;
}

.row-jakarta {
  background: linear-gradient(90deg, #2d4d2d 0%, #1a291a00 100%);
  border-color: #4f8636;
}

.row-kathmandu {
  background: linear-gradient(90deg, #743524 0%, #3e1b1200 100%);
  border-color: #dc582a;
}

.row-quezon {
  background: linear-gradient(90deg, #5c583f 0%, #312e2100 100%);
  border-color: #e2ba4f;
}


.recover-cont{
  padding: 0;
}

.impacthousesec{
  color: #fff;
  background-color: #1b1941;
  padding-top: 60px;
  padding-bottom: 60px;
}
.impacthousesec h2{
    font-weight: 300;
}
.impact-house-gr{
  padding-top: 30px;
  padding-bottom: 30px;
}
.impact-house-gr .tabs {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    margin-bottom: 0;
}
.impact-house-gr .tab{
  width: fit-content;
}
.impact-house-gr .tab-content {
    background: #fff;
    padding: 40px;
    width: 100%;
    margin-top:0;
}
.impact-house-gr .tab {
    background: #2F2F2F;
    color: #fff;
}
.impact-house-gr .tab:not(:last-child) {
    border-right: none;
}
.impact-house-gr .tab.active {
    background: #fff;
    color: #000;
}
.impact-house-gr .tab.active:hover {
    background: #fff;
    color: #000;
}


/* card interact css start */
.dashboard {
  display: flex;
  gap: 20px;
  width: 100%;
  flex-wrap: wrap;
  margin-top: 30px;
  margin-bottom: 20px;
}

.interactive-card {
  background: white;
  flex: 1;
  min-width: 320px;
  min-height: 80px; /* Collapsed height */
  border-radius: 0px;
  position: relative;
  padding: 20px 60px 20px 30px;
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Collapsed State: Icon and Title on same line */
.header-group {
  display: flex;
  align-items: center;
  gap: 20px;
  transition: all 0.5s ease;
}

.card-title {
  margin: 0;
  font-size: 22px;
  color: #222;
  font-weight: 500 !important;
}

/* Icon Styles */
.icon-box {
  width: 60px;
  height: 60px;
  background-color: #f7bdad;
  mask-size: contain;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
}

.housing-icon { 
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 90 80'><path d='M84.2654 46.9202H71.5323V35.3523C71.8274 35.0941 72.1221 34.8543 72.417 34.559L76.9498 30.0205C78.3224 28.6461 78.3253 26.3794 76.9498 25.0022L71.3299 19.3752L73.5779 17.1243L74.6098 18.1574C75.4977 19.011 76.8537 19.0742 77.7976 18.2866L86.5872 10.7593C89.3362 8.39973 89.4292 4.25048 86.9372 1.79279C84.3338 -0.813521 80.2055 -0.475926 78.0001 2.14333C72.0899 9.06271 71.0131 10.3069 70.6663 10.7777C69.8085 11.4238 69.5625 13.1042 70.5927 14.1355L71.6245 15.1686L69.3765 17.4195L63.7748 11.8108C62.356 10.3899 60.1225 10.4308 58.7628 11.7925L54.2114 16.331C51.6314 18.9324 49.7708 21.8105 48.7019 24.8731C47.8912 27.1792 47.5412 29.4854 47.633 31.7548H37.2221V21.6813C37.2221 18.8585 34.9373 16.5708 32.1179 16.5708H6.98376C3.13289 16.5708 0 19.6888 0 23.5263V73.0445C0 76.882 3.13289 80 6.98376 80C15.4009 80 -11.3676 80 82.4227 80C86.2554 80 89.3694 76.882 89.3694 73.0445V52.0307C89.3694 49.2079 87.0845 46.9202 84.2654 46.9202ZM51.2999 25.7955C52.2397 23.1203 53.8799 20.5928 56.1832 18.3051L60.7161 13.7481C61.0026 13.461 61.4907 13.435 61.8217 13.7666L67.4232 19.3752L63.5539 23.2495C63.0194 23.7846 63.0194 24.6701 63.5539 25.2051C64.1244 25.7768 65.0291 25.7178 65.507 25.2051L69.3765 21.3308L74.9967 26.9579C75.2914 27.2531 75.2914 27.7512 74.9967 28.0649L70.4639 32.6034C68.1605 34.9096 65.6174 36.5516 62.9456 37.4925C59.1497 38.8024 55.5381 38.7286 51.9266 37.2342C51.7606 37.1604 51.6135 37.0313 51.5397 36.8467C50.047 33.2122 49.9732 29.5961 51.2999 25.7955ZM68.7683 37.5663V46.9202H50.747V39.7248C50.7839 39.7433 50.8392 39.7802 50.8761 39.7987C55.0847 41.54 59.422 41.6372 63.8485 40.0938C65.5621 39.5034 67.2023 38.6364 68.7683 37.5663ZM17.616 19.3382H32.1179C33.4077 19.3382 34.4582 20.3899 34.4582 21.6813V31.7548H17.616V19.3382ZM2.76399 34.5222H24.7104V46.9202H2.76399V34.5222ZM17.7266 77.2326H6.98376C4.66244 77.2326 2.76399 75.3507 2.76399 73.0445V64.8346H17.7266V77.2326ZM17.0446 62.0672V49.6876H34.4582V62.0672H17.0446ZM42.8419 77.2326H20.4906V64.8346H42.8419V77.2326ZM59.1497 62.0672H37.2221V49.6876C43.9043 49.6876 50.628 49.6876 59.1497 49.6876V62.0672ZM86.6054 73.0445C86.6054 75.3507 84.7261 77.2326 82.4227 77.2326H70.2794V64.8346H86.6054V73.0445ZM86.6054 62.0672H61.9137V49.6876C69.6107 49.6876 76.615 49.6876 84.2654 49.6876C85.5552 49.6876 86.6054 50.7392 86.6054 52.0307V62.0672Z'/></svg>");
}

.health-icon {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 97 80'><path fill-rule='evenodd' clip-rule='evenodd' d='M33.7644 72.7939C19.4942 62.1821 0 44.6522 0 28.0778C0 0.388805 26.6758 -9.94889 48.5 11.4405C70.324 -9.94889 97 0.388807 97 28.0777C97 44.6527 77.5059 62.1821 63.2358 72.7939C56.7756 77.5981 53.5455 80 48.5 80C43.4545 80 40.2244 77.5981 33.7644 72.7939ZM70.325 15.2941C72.3339 15.2941 73.9625 16.8743 73.9625 18.8235V24.706H80.025C82.0339 24.706 83.6625 26.2861 83.6625 28.2354C83.6625 30.1846 82.0339 31.7648 80.025 31.7648H73.9625V37.6471C73.9625 39.5962 72.3339 41.1765 70.325 41.1765C68.3161 41.1765 66.6875 39.5962 66.6875 37.6471V31.7648H60.625C58.6161 31.7648 56.9875 30.1846 56.9875 28.2354C56.9875 26.2861 58.6161 24.706 60.625 24.706H66.6875V18.8235C66.6875 16.8743 68.3161 15.2941 70.325 15.2941Z'/></svg>");
  margin-bottom: -10px;
}

/* Hidden Content Styles */
.content-area {
  max-height: 0;
  opacity: 0;
  transition: all 0.5s ease;
  padding-top: 0;
  line-height: 1.6;
  color: #444;
}

.image-wrapper img {
  width: 100%;
  border-radius: 4px;
  filter: grayscale(100%);
  margin-top: 15px;
}

/* Toggle Button */
.toggle-btn {
  position: absolute;
  right:30px;
  top: 50%;
  transform: translateY(-50%);
  width: 60px;
  height: 60px;
  background: #c04828;
  border: none;
  border-radius: 50%;
  color: white;
  font-size: 30px;
  cursor: pointer;
  transition: all 0.4s ease;
}

/* EXPANDED CLASSES */
.interactive-card.expanded {
  min-height: 100%;
}

.interactive-card.expanded .header-group {
  flex-direction: column;
  text-align: center;
  margin-bottom: 20px;
}

.interactive-card.expanded .icon-box {
  display: none; 
}

.interactive-card.expanded .content-area {
  max-height: 1000px;
  opacity: 1;
  padding-top: 20px;
}

.interactive-card.expanded .toggle-btn {
  transform: translateY(-50%) rotate(180deg);
  right: -25px;
}
/* card interact css end */

.extreme-weather{
  margin-top: 40px;
  display: flex;
  gap: 20px;
  flex-direction: column;
}
.copingm-sec{
  background: url('/assets/images/coping-bg1.webp') no-repeat center center/cover;
  padding: 60px 0px;
}
.coping-txt{
  width: 500px;
  color:#fff;
  display: flex;
  gap:20px;
  flex-direction: column;
}
.coping-txt h2{
  font-weight: 300;
}
.coping-w-sec{
    color: #fff;
    background-color: #1b1941;
    padding-top: 10px;
    padding-bottom: 10px;
}
.nopd{
  padding: 0px;
}
.short-term-sec{
  padding: 60px 0 0;  
  background-color: #1b1941;
}
.short-term-bx1{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.short-term-txt{
  font-weight: 300;
  font-size: 30px;
  color:#fff;
  text-transform: capitalize;
}
.click-txt{
  color: #8E8E8E;
  font-style: italic;
  font-size: 20px;
}
.tree-qtbg{
  width: 100%;
  display: flex;
  justify-content: flex-end;
}
.tree-quotes{
  width: 550px;
  display: flex;
  flex-direction: row;
  gap:20px;
  background-color: #fff;
  padding: 30px 30px 0;
}
.tree-qtimg{
  width:40%;
}
.tree-qttxt{
  width: 100%;
}
.tree-qttxt img{
  width:45px;
  margin-top: -50px;
  margin-left: 0px;
  position: absolute;
}
.tree-qttxt p{
  font-size: 17px;
    color: #5A5A5A;
    margin-bottom: 10px;
}
.cardbx-sec{
  padding: 60px 0 0;
}
.recomod-cardbg b{
  font-weight: 500;
}
.footer-sec-top{
  background-color: #1b1941;
  padding: 20px 0;
  text-align: left;
  width: 100%;
}
.footer-sec-top p{
  font-weight: 300;
  font-size: 14px;
}

.footer-sec{
  background-color: #2d276a;
  padding: 10px 0;
  text-align: center;
  width: 100%;
}
.footer-sec p{
  font-weight: 300;
  font-size: 14px;
}
.city-list{
  margin-bottom: 40px;
}

/* popup form css start */


    /* Popup Form-only modal overlay styles */
    .external-overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, .5);
      display: none;
      justify-content: center;
      align-items: center;
      z-index: 9999;
      color:#000;
    }
    .external-modal {
      width: 85%;
      max-width: 474px;
      /* max-width: 730px; */
      background: #fff;
      border-radius: 12px;
      position: relative;
      box-shadow: 0 10px 30px rgba(0,0,0,.2);
      padding: 24px;
    }
    .external-close {
      position: absolute;
      top: 8px;
      right: 12px;
      cursor: pointer;
      font-size: 20px;
      font-weight: bold;
    }
    .external-form {
      display: block;
    }
    .external-form h2 {
      font-size: 15px;
    }
    .external-form label {
      font-size: 12px;
    }
    .external-form input,
    .external-form select {
      width: 100%;
      padding: 8px;
      margin: 7px 0;
      border: 1px solid #d0d7de;
      border-radius: 6px;
    }
    .external-checkbox-row {
      display: flex;
      align-items: flex-start;
      gap: 12px;
      margin: 18px 0;
    }
    .external-checkbox-row input[type="checkbox"] {
      width: 15px;
      height: 15px;
      margin-top: 3px;
      flex: 0 0 13px;
    }
    .external-help-text {
      margin: 0;
      font-size: 10px;
      line-height: 1.35;
    }
    .external-submit {
      width: 100%;
      padding: 10px 16px;
      font-size: 14px;
      background: #1b193f;
      color: #fff;
      border: none;
      border-radius: 8px;
      cursor: pointer;
      margin-top: 12px;
    }
    @media(max-width: 480px) {
      .external-modal {
        width: 90%;
        padding: 20px;
      }
    }
    /* Landing hero country accent colors (moved from inline) */
    .landing-country-item.india .landing-country-icon { background: #7db3ce; }
    .landing-country-item.india .landing-country-name { color: #7db3ce; }

    .landing-country-item.nepal .landing-country-icon { background: #ffe29a; }
    .landing-country-item.nepal .landing-country-name { color: #ffe29a; }

    .landing-country-item.indonesia .landing-country-icon { background: #5b7f5b; }
    .landing-country-item.indonesia .landing-country-name { color: #5b7f5b; }

    .landing-country-item.philippines .landing-country-icon { background: #e98a5b; }
    .landing-country-item.philippines .landing-country-name { color: #e98a5b; }

    .landing-country-item.bangladesh .landing-country-icon { background: #6d6e9c; }
    .landing-country-item.bangladesh .landing-country-name { color: #6d6e9c; }

    /* Help text link color */
    .external-help-text strong { color: #007bff; }

/* popup form css end  */