.div-portfolio-title{
    display: flex;
    text-align: center;
    width: 100%;
}







/* Container and SVG sizing */
.gm-map-div {
    display: flex;
    justify-content: center;
    width: 100%;
    margin: 0 auto;
    min-height: 400px; /* adjust as needed */
}

.gm-map-div svg {
    width: 100%;
    height: auto;
    display: block;
}

/* Default fill for all countries */
.gm-map-div svg path {
    fill: #ccc; /* neutral grey for countries not in the list */
    transition: fill 0.3s ease;
}

/* Single-path countries default color */
#BD, #PK, #IN, #TH, #DO, #BR {
    fill: #007BFF; /* normal blue */
    cursor: pointer;
}

/* Multi-path countries default color */
.gm-map-div svg path.China,
.gm-map-div svg path.Indonesia,
.gm-map-div svg path.Malaysia {
    fill: #007BFF !important; /* force blue even if inline SVG fill exists */
    cursor: pointer;
}

/* Hover effect for all hoverable countries */
path.hoverable.hover,
#BD:hover, #IN:hover, #PK:hover, #ID:hover, #TH:hover, #DO:hover, #BR:hover,
.gm-map-div svg path.China.hover,
.gm-map-div svg path.Indonesia.hover,
.gm-map-div svg path.Malaysia.hover {
    fill: #001F70 !important; /* dark blue on hover */
}


  






.div-portfolio-intro {
    display: flex;
    justify-content: center;
    width: 100%;
    margin: 0 auto;
  }
.div-portfolio{
    display: flex;
    align-items:center;
    width: 100%;
    justify-content:center;
    flex-direction: column;
}
.div-portfolio-content{
    display: flex;
    width:80%;
    flex-direction: column;
    align-items:center;
    margin: 0px 0px 0px 0px;
    justify-content:center;
}
.div-portfolio-content-line-right{
    flex-direction: column;
    display: flex;
    text-align:justify;
    justify-content: center;
    padding:0px;
    align-items: start;
}
.div-portfolio-paragraph {
    max-width: 800px;
    width: 100%;
    text-align: center;
  }
.portfolio-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 20px;
    width: 80%;
    margin: 5px auto;
    justify-items: center; /* If you want content inside grid cells centered */
}
  
.portfolio-box1{
    text-align: center; 
    justify-content: center; 
    color:rgb(35,54,81); 
    background-color:white;	
    border-radius: 20px; 
    margin:10px;
    height:210px;
    align-items: center;
    vertical-align:center;
    display:flex;
    padding:1;
    transition: background-color 0.1s ease-in-out;
}
.portfolio-box2{
    text-align: center; 
    justify-content: center; 
    color:rgb(35,54,81); 
    background-color:white;	
    border-radius: 20px; 
    margin:10px;
    height:210px;
    align-items: center;
    vertical-align:center;
    display:flex;
    padding:1;
    transition: background-color 0.1s ease-in-out;
}
.portfolio-box3{
    text-align: center; 
    justify-content: center; 
    color:rgb(35,54,81); 
    background-color:white;	
    border-radius: 20px; 
    margin:10px;
    height:210px;
    align-items: center;
    vertical-align:center;
    display:flex;
    padding:1;
    transition: background-color 0.1s ease-in-out;
}
.portfolio-box4{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: rgb(35, 54, 81);
    background-color: white;
    border-radius: 20px;
    margin: 10px;
    padding: 1rem;
}
.portfolio-box5{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: rgb(35, 54, 81);
    background-color: white;
    border-radius: 20px;
    margin: 10px;
    padding: 1rem;
}
/*.portfolio-box-hover1{
    text-align: center; 
    justify-content: center; 
    color:rgb(35,54,81); 
    border-radius: 20px; 
    margin:10px;
    height:210px;
    align-items: center;
    vertical-align:center;
    display:none;
    padding:1;
    transition: background-color 0.1s ease-in-out;
}
.portfolio-box-hover2{
    text-align: center; 
    justify-content: center; 
    color:rgb(35,54,81); 
    border-radius: 20px; 
    margin:10px;
    height:210px;
    align-items: center;
    vertical-align:center;
    display:none;
    padding:1;
    transition: background-color 0.1s ease-in-out;
}
.portfolio-box-hover3{
    text-align: center; 
    justify-content: center; 
    color:rgb(35,54,81); 
    border-radius: 20px; 
    margin:10px;
    height:210px;
    align-items: center;
    vertical-align:center;
    display:none;
    padding:1;
    transition: background-color 0.1s ease-in-out;
}*/
.portfolio-box-content1{
    color: rgb(30, 28, 71);
    text-align: center;
    vertical-align: middle;
}
.portfolio-box-content2{
    color: rgb(30, 28, 71);
    text-align: center;
    vertical-align: middle;
}
.portfolio-box-content3{
    color: rgb(30, 28, 71);
    text-align: center;
    vertical-align: middle;
}
/*.portfolio-box1:hover {
    .portfolio-box-content1{
        display:none;
    }
    .portfolio-box-hover1{
        display:flex;
    }
    background-color: rgb(172,172,172)
}
.portfolio-box2:hover {
    .portfolio-box-content2{
        display:none;
    }
    .portfolio-box-hover2{
        display:flex;
    }
    background-color: rgb(172,172,172)
}
.portfolio-box3:hover {
    .portfolio-box-content3{
        display:none;
    }
    .portfolio-box-hover3{
        display:flex;
    }
    background-color: rgb(172,172,172)
}*/

@media(max-width:1768px){
    .portfolio-grid{
        grid-template-columns: 1fr;
        width:50%;
        margin: 0 auto; /* ✅ ADD THIS */
    }
}
@media(max-width:949px){
    .portfolio-grid{
        width:90%;
        margin: 0 auto; /* ✅ ADD THIS */
    }
    .div-portfolio-paragraph{
        width: 100%;
        margin: 0 auto; /* ✅ ADD THIS */
    }
    .div-portfolio-intro{
        width: 80%;
        margin: 0 auto; /* ✅ ADD THIS */
    }
}
@media(max-width:291px){
    .portfolio-box1{
        height: 250px;
    }
    .portfolio-box2{
        height: 350px;
    }
    .portfolio-box3{
        height: 250px;
    }
}
@media(max-width:370px){
    .portfolio-box5{
        height: 600px;
    }}
 /*   .portfolio-box4{
        height: 1500px;
    }
}
@media(min-width:371px){
    .portfolio-box5{
        height: 600px;
    }
    .portfolio-box4{
        height: 350px;
    }
}*/