.section-title-home{
    color: black;
    padding-top: 1em !important;
    padding-bottom: 1em !important;
    font-size: 40px ;
    font-family: "IBMPlexSans-bold" !important;
    margin: 0;
}

/* slider */


main{
    background-color: #f7fdf9;
    display: grid;
    /*gap: 55px;*/
}

section{
    padding-inline: 8%;
    padding-top: 2em !important;
    padding-bottom: 2em !important;
}

.section-title{
    font-family: 'IBMPlexSans-bold' !important;
    color: #1B8354;
    font-size: 1.8em;
    margin: 0px;
}

#about{
	background: #f8f8f8;
}

#about-container{
	display: grid;
	grid-template-columns: 1fr 0.5fr;
	place-content: space-between;
}

#about-container>div{
    font-size: 2.0em;
    text-align: center;
    font-family: 'IBMPlexSans-light' !important;
	text-align: start;
width: fit-content !important;
}

.about-position{
    font-family: 'IBMPlexSans-regular' !important;
    color: #146444;
    font-size: max(1.8vw, 35px);
    font-weight: 600;
}

#about-image{
    width: 100%;
    display: flex;
    justify-content: center;
    margin-inline: 3em;
}
#about-image> img{
    border-radius: 25px;
    width: 300px;
    height: 350px;
    display: flex
;
    object-fit: cover !important;
    object-position: top;
}

#about-text{
    display: flex;
    justify-content: start;
    align-items: start;
    text-align-last: start;
}

.services-section {
    padding: 4rem 0;
    background: var(--light-bg);
}

.services-container {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 1rem;
}

.services-grid {
    display: flex;
    /* grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); */
    flex-direction: column !important;
    gap: 2rem;
    margin: 2rem 0;
    /* justify-content: space-between !important; */
    justify-content: center;
}

.service-card {
    background: var(--white);
    padding: 2rem !important;
    border-radius: 8px;
    text-align: center;
    transition: transform 0.3s;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    /* border: 1px solid #D2D6DB !important; */
    display: flex
;
    flex-direction: column;
    justify-content: space-evenly;
    min-width: 50px !important;
    width: 15vw;
    height: 325px;
    max-width: 300px;
}

.service-card:hover {
    transform: translateY(-5px);    
    /* border: 2px solid #1B8354 !important; */
    border: 1px solid #29c175 !important;

    color: #1B8354;
    transition: 0.3s ease;
    /*box-shadow: 0 4px 6px #1B8354;*/

}

.service-card > p{
	font-size: 1vw;
	color: #939393;
}

.service-icon {
    font-size: 2.5rem;
    color: var(--primary-color);
}


.view-more-link{
    /*font-size: 14px;
    display: flex;*/
    flex-direction: row;
    /*justify-content: center !important;*/
    /*padding-inline: 6vw !important;*/
    padding-top: 1em;
}

.view-more {
    display: inline-block;
    /*padding: 0.75rem 1.5rem; */
    background: var(--primary-color);
    color: #1B8354;
    text-decoration: none;
    border-radius: 6px;
    transition: background-color 0.3s;
}

.view-more:hover {
    color: #B1B273;
}

.view-more i{
    font-size: medium !important;
}


[dir=ltr] .la-chevron-circle-left{
   /* display: none !important;*/
}

[dir=rtl] .la-chevron-circle-right{
   /* display: none !important;*/
}

/* map section */
.map-container {
    position: relative;
    width: 100%;
   /* max-width: 1000px;*/ /* Optional: to set a max width for the container */
}

.map-image {
    width: 100%;
    height: auto;
    object-fit: contain;
}

.dot {
    position: absolute;
    width: 20px;
    height: 20px;
    background-color: #919191;
    border-radius: 50%;
    cursor: pointer;
    transition: transform 0.2s ease;
}


.label{
    position: absolute;
    width: 20px;
    height: 20px;
    cursor: pointer;
    transition: transform 0.2s ease;        
    display: flex;
    flex-direction: row;
    place-content: center;
    text-align: center;
    text-wrap: nowrap;
    direction: ltr;
}

.dot:hover {
    transform: scale(1.3);
}

.card-container {
    border-radius: 8px;
    display: none;
    gap: 30px !important;
    width: 100% !important;
    /* justify-content: center; */
    /* flex-wrap: wrap; */
    padding-top: 50px;
}

.card-container.active {
    display: inline-grid;
    grid-template-columns: 0.2fr 0.2fr;
    /* justify-content: end; */
}

.card {
    margin-bottom: 15px;
}

.card h3 {
    margin: 0;
    color: #276749;
}

.card p {
    margin: 5px 0;
    font-size: 14px;
}

#contact-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding-bottom: 50px !important;
    gap: 2rem;
    padding-inline-start: 10rem;
}

.contact-cards{
    order: 1;
    width: 50%;
    margin-inline-end: 2em;

}

.contact-map{
    width: 100%;
    display: flex;
    order: 2
}

.map-spacing {
    width: 100%;
    display: flex;
    zoom: 75%;
    place-content: center;
    padding-inline-start: 2rem;
}

#contact-embassy{
    padding-inline: 8dvw;
    background: #f8f8f8;
}

.contact-card{
        background: var(--white);
        border-radius: 8px;
        text-align: center;
        transition: transform 0.3s;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        /* border: 1px solid #D2D6DB !important; */ 
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        width: 200px ;
        height: 200px ;
    }
.contact-card >div{
    display: flex;
    flex-direction: column;
    justify-content: start;
    height: 100%;
    gap: 24px;
    padding-top: 15px;
}

.contact-card >div> i{
    width: 56px;
    height: 56px ;
    color: #1B8354 ;
    font-size: xx-large !important;
    align-self: center;
    border-radius: 50%;
    place-content: center;
    background-color: #F3FCF6 ;
    display: flex;
    flex-direction: column;
}

.contact-card >div> h3{
    font-size: large;
    margin: 0px !important;
    font-family: 'IBMPlexSans-Bold' !important;
}

.contact-card > p{
    font-size: small;
    margin: 0px !important;
    height: 100%;
    display: flex;
    align-items: center !important;
    text-align: center !important;
    direction: ltr !important;
    justify-content: center !important;
    padding-inline: 1em;
}


.qr-code{

    z-index: 1200;
    position: absolute;
    /* top: 0; */
    bottom: 0;
    left: -91px;
}

.activeDot{
    background-color: #58db9d !important;/*#B1B273 !important;*/
}

.close{
    background: unset !important;
    border: 0;
    font-size: 1.5em;
	text-align: end;
}
.img-div>button{
    /* padding-inline: 2em !important;
    padding-top: 0.75em !important;
    padding-bottom: 0.75em !important; */
}

.modal-body{
    align-self: center !important;
}

.la-qrcode{
    width: 35px !important;
    height: 35px !important;
    color: #F3FCF6 !important;
    font-size: small !important;
    /* align-self: center;
    border-radius: 5px !important;
    place-content: center;
    background-color: #1B8354 !important;
    display: flex;
    flex-direction: column; */
    position: absolute;
    transform: translateX(0%) translateY(-84px);    
    height: auto !important;
    background: #1B8354;
    border-radius: 0px;
    font-size: xx-large!important
}

.la-qrcode:hover{
    color: lightgray !important;

}

.service-content{
    flex-direction: row;
    /*padding-inline: 6vw !important;*/
    /* justify-content: space-between !important; */
    justify-content: center;
    gap: 2em;
}

.modal-header{
    justify-content: space-between !important;
}


.header-search input{
	width: 200px !important;
}

.modal-title{
    margin-inline: 0 !important;
}

.header-search a, .ms-srch-sb > .ms-srch-sb-searchLink:before{
	text-decoration: unset;
}

.header-search input{
	width: 200px !important;
}

#date > i {
    align-content: center;
}

#date > label {
    align-content: center;
}

.service-content > a {
    text-decoration: unset;
}

.service-content img {
    width: 80%;
    height: 200px !important;
    max-width: 200px;
}

.content > span {
    color: whitesmoke;
    display: inline-flex;
    justify-content: flex-start;
    margin-bottom: 0.5em;
    gap: 0.5em;
}

.title > a {
    color: whitesmoke !important;
    text-decoration: none !important;
    font-family: 'IBMPlexSans-Bold' !important;
    font-size: max(2.0vw, 35px);
}

.content-mobile > span {
    color: whitesmoke !important;
    align-items: center;
    width: 100%;
    display: inline-flex
;
    place-content: center;
    gap: 1em;
}

.service-card:hover p {
    color: #29c175;
}

.about-name {
    color: #29c175;
    font-size: max(1.3vw, 33px);
}

.about-button {
        font-size: max(1.5vw, 25px);
}

iframe {
    width: 100%;
    height: 720px;
    border-radius: 9px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    border: 6px solid #ddd;
}

.cards-dropdown select {
    width: 429px;
    border-radius: 9px;
    background: #fafafa;
    padding: 5px 0px;
}

label.embassyLabel {
    font-weight: 700;
}