:root {



    /* 1800*/

    --padleft: clamp(15px, 7.8vw, 200px);

    --padright: clamp(15px, 5.56vw, 150px);

    --toppad: clamp(40px, 4.45vw, 80px);

    --botpad: clamp(40px, 7.8vw, 140px);

    --white: #F7FCFE;



    --max-content-area-width: 1920px;



}



@media (max-width: 1500px){

    :root {

        --pad: clamp(15px, 9vw, 450px);

    }

}



@media (max-width: 1200px){

    :root {

        --pad: clamp(15px, 7vw, 450px);

    }

}



@media (max-width: 900px){

    :root {

        --pad: clamp(15px, 5vw, 450px);

    }

}



body{

    color: #1A233A;

    background: #FFFFFF;

}



.container{

    animation: startopa 0.4s linear forwards;

    animation-direction: alternate;

    opacity: 0.01;

    position: relative;

    overflow: hidden;

}



@keyframes startopa {

    from {opacity: 0.01; }

    to { opacity: 1;}

}



.project-pads{

    padding-left: var(--padleft);

    padding-right: var(--padright);   

}



.project-pads-left{

    padding-left: var(--padleft);

}



.project-pads-right{

    padding-right: var(--padright);

}



.topbotpad{

    padding-top: var(--toppad);

    padding-bottom: var(--botpad);

}



.toppad{

    padding-top: var(--toppad); 

}



.botpad{

    padding-bottom: var(--botpad);

}





h1, h2, h3, h4, h5, h6{

    font-family: 'Romanfont';

    font-weight: 400;

}



h1{
    font-size: var(--font60);
    margin-bottom: 20px;
}

.uh152 h1{
    font-size: var(--font52);
}

h2{
    font-size: var(--font60);
    margin-bottom: 20px;
}

h3{
    font-size: var(--font42);
    margin-bottom: 20px;
}





h4{

    font-size: var(--font32);

    margin-bottom: 20px;

}



h5{

    font-size: var(--font26);

    margin-bottom: 20px;

}



h6{

    font-size: var(--font24);

    margin-bottom: 20px;

}



p{

    font-size: var(--font16);

    padding-bottom: 1em;

    letter-spacing: 0.5px;

    line-height: 1.35em;

    font-family: "Archivo", sans-serif;

    font-optical-sizing: auto;

    font-weight: 300;

    font-style: normal;

}





a, li{

    font-size: var(--font16);

}



.btn{

    font-size: 22px;

    width: max-content;

    font-family: "acumin-pro-extra-condensed", sans-serif;

    font-weight: 300;

    text-transform: uppercase;

    font-style: normal;

    margin-top: 20px;

}



.btn .btn-border{

    padding: 2px;

}



.btn .btn-border-inside{

    display: grid;

    grid-template-columns: auto 30px;

    min-width: 210px;

    text-align: left;

    gap: 15px;

    padding: 5px 5px 1px;

    max-width: 100%;

}



.btn.white .btn-border{

    border: 1px solid #FFF;

}



.btn.white .btn-border-inside{

    background-color: #FFF;

    color: #352D38;

}



.btn.blue .btn-border{

    border: 1px solid #1A233A;

}



.btn.blue .btn-border-inside{

    background-color: #1A233A;

    color: #EAEAEA;

}





.btn svg{

    height: 15px;

    margin-top: -2px;

    align-self: center;

    justify-self: center;

}



.btn:hover svg{

    animation: sarrow 0.3s infinite linear;

    animation-direction: alternate;

}



@keyframes sarrow {

    from {margin-right: 0px;}

    to {margin-right: 7px;}

}





.specialgrid{

    display: grid;

    grid-template-columns: 1fr 1.7fr;

}



.specialgrid-gap{

    display: grid;

    grid-template-columns: 1fr 1.7fr;

    gap: 5px;

}



.specialpad-topbot{

    padding-top: 5px;

    padding-bottom: 5px;

}



.specialpad-top{

    padding-top: 5px;

}



.specialpad-bottom{

    padding-bottom: 5px;

}



.txt-imgmages-area-centre{

    display: grid;

    grid-template-columns: 0.85fr 1fr 0.85fr;

    gap: 5px;

}



#banner{

    color:#FFFFFF; 

}



#banner img{

    height: 100%;

}



#banner-content-area img{

    max-width: 190px;

    height: auto;

    margin: 0 auto;

    margin-bottom: 20px;

}



#banner-content-area{

    justify-self: center;

    align-self: center;

    padding-bottom: 30px;

    padding-top: 80px;

    text-align: center;

}



#banner-content{

    max-width: 650px;

}



#banner-content-helper{

    max-width: 400px;

    margin: 0 auto;

    margin-top: 25px;

}



#banner-line{

    height: 1px;

    width: 135px;

    background-color: #EAEAEA;

    margin: 0 auto;

}



#banner-videocontent img, #banner-videocontent iframe{

    aspect-ratio: 16/9;

    width: 100%;

}



.bottom-right-panel{

    align-self: end;

    justify-self: end;

    width: 100%;

}



.txt-imgmages-content-helper{

    align-content: center;

    padding-top: 30px;

    padding-bottom: 30px;

}



.txt-imgmages-images-part img{

    height: 100%;

}



.txt-imgmages-images-part{

    height: 100%;

}



.txt-imgmages-area-centre img{

    height: 100%;

}



img.bottom-right-panel{

    height: auto;

}



.tabsandtext-content{

    display: flex;

    position: relative;

    min-height: 100%;

    

}



.tabsandtext{

    aspect-ratio: 16/8.6;

}



.horitab{

    flex: 0;

    display: flex;

    align-items: center;

    animation: closetab 0.7s normal forwards ease;

}



@keyframes closetab{

    from {flex: 1;}

    to {flex: 0;}

}





.horitab.active{

    flex: 1;

    animation: opentab 0.6s normal forwards ease;

}



@keyframes opentab{

    from {flex: 0;}

    to {flex: 1;}

}



.horitab-tab-content{

    height: 100%;

    flex: 1;

}



.horitab-tab{

    cursor: pointer;

    height: 100%;

    text-align: center;

    color: #fff;

    display: grid;

    padding-left: 10px;

    padding-right: 10px;

}



.horitab-tab h4{

    writing-mode: vertical-rl;

}



.horitab-tab-content img{

    aspect-ratio: 16/9;

    height: 100%;

}



.horitab-tab.dark-blue{

    background-color: #1A233A;

}



.horitab-tab.light-blue{

    background-color: #64708F;

}



.horitab-tab.dark-green{

    background-color: #27433D;

}



.horitab-tab.light-green{

    background-color: #5A8F85;

    color: #1A233A;

}



.horitab .horitab-tab-content img{

    display: none;

}



.horitab.active .horitab-tab-content img{

    display: block;

}



.tabsandtext.blue{

    background-color: #1A233A;

}



.tabsandtext.green{

    background-color: #27433D;

}



.horitab .horitab-tab-content-text{

    display: none;

    max-width: 500px;

    padding: var(--padleft);

}



.horitab.active .horitab-tab-content-text{

    display: block;

}



.horitab-tab-content-text{

    color: #fff;

}



.horitab-tab-content-text h2{

    text-shadow: 0px 1px 6px #00000024;

}



.horitab-tab-content.content-centre{

    grid-template-rows: max-content auto;

}



.horitab-tab-content.content-centre img{

    grid-row: 2;

    aspect-ratio: 10/4.1;

}

.horitab-tab-content-text.topright{
	justify-self: end;
}

.horitab-tab-content-text.btmleft{
	align-self: end;
}

.horitab-tab-content-text.btmright{
	justify-self: end;
	align-self: end;
}




.horitab-tab-content.content-centre .horitab-tab-content-text{

    grid-row: 1;

    padding: 50px var(--padleft);

    color: rgb(26, 35, 58);

    margin: 0px auto;

    text-align: center;

}



.tabsandtext.centre{

    background-color: #fff;

    color: #1A233A;

}



.txtvidimg{

    position: relative;

}



.txtvidimg-panel{

    position: absolute;

    top: 0;

    right: 0;

    height: 100%;

    width: auto;

}



.txtvidimg-left{

    padding-top: 70px;

    z-index: 1;

}



.txtvidimg-right{

    z-index: 1;

}



.txtvidimg.green{

    background-color: #3B635B;

    color: #FFFFFF;

}



.txtvidimg.blue{

    background-color: #1A233A;

    color: #F9F9F9;

}



.txtautovidimg{

    color: #fff;

}

.txtautovidimg-area-content{

    padding: var(--padleft);

    padding-right: var(--padright);

}

.txtautovidimg-area-content{
    width: 650px;
    max-width: 100%;
}

.txtautovidimg-area-content-txtpart{
    width: 400px;
    max-width: 100%;
}

.txtautovidimg-area img{
    aspect-ratio: 16/9;
}

.txtautovidimg-area-content h2{
    text-shadow: 0px 1px 6px #00000024;
}


.txtautovidimg-area-content.topright{
    justify-self: end;
}

.txtautovidimg-area-content.btmleft{
    align-self: end;
}

.txtautovidimg-area-content.btmright{
    justify-self: end;
    align-self: end;
}



footer{
    padding-top: 5px;
}



#footer-area-part2{

    color: #64708F;

}



#footer-area-part2 a{

    color: #89A19C;

    text-decoration: none;

}





#footer-area{

    grid-template-columns: 180px clamp(200px, 26vw, 500px) clamp(200px, 26vw, 500px);

    background-color: #1A233A;

}



#footer-area-part2{

    border-left: 2px solid #64708F;

    border-right: 2px solid #64708F;

    padding-left: 50px;

    padding-right: 50px;

}



#footer-area-part3{

    padding-left: 50px;

    color: #fff;

}



#banner .btn{

    margin: 0 auto;

    margin-top: 20px;

}



#nav-section.topof{

    position: absolute;

    width: 100%;

}



#nav-section.topof #header-nav{

    background: unset;

    color: #FFFFFF;

    padding: 10px 25px;

}



#nav-section #header-nav{

    background: #fff;

    color: #1A233A;

    padding: 10px 25px;

}



#nav-section.topof #nav-basic-links-part a {

    text-decoration: none;

    color: #FFFFFF;

    text-shadow: 0px 1px 4px #0000004F;

}



#nav-section #nav-basic-links-part a {

    text-decoration: none;

    color: #1A233A;

    font-family: 'Romanfont';

    font-weight: 400;

}



#nav-section.topof  #header-nav .active a {

    color: #fff !important;

}



#nav-section  #header-nav .active a {

    color: #1A233A !important;

}



.banner-videocontent-logo, .banner-mob-logo{

    display: none;

}



#footer-area-part1 img{

    width: 130px;

}



#nav-burger-section.topmob{

    position: absolute;

    width: 100%;

}



#nav-burger-section.topmob #nav-burger{

    background-color: unset;

}



#nav-burger-section.topmob .burger-line {

    background-color: #fff;

}



#nav-burger-navpart {

    background: rgba(59,99,91, 0.96);

}



#banner h1{

    text-shadow: 0px 1px 6px #0000004F;

}

.companies-content-title {
    text-align: center;
    margin-bottom: 64px;
}

.company-card {
    display: grid;
    grid-template-columns: 1fr max-content 4fr;
    margin-bottom: 64px;
    gap: 24px;
}

.company-card-line {
    border: none;
    height: 100%;
    background-color: #ADB8D4;
    width: 1px;
}

.company-card-staff {
    gap: 16px;
}

.company-card-details {
    padding-right: 24px;
}

.staff-member {
    display: flex;
}

.staff-member-img {
    width: 150px;
    height: 150px;
    border-radius: 999px;
    border: 1px solid #ADB8D4;
    margin: 4px;
}

.staff-member-details {
    display: flex;
    flex-direction: column;
    margin: 4px;
}

.pd-title {
    text-align: center;
}

.ibudir-tabs-container {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

.ibudir-radio {
    display: none;
}

.ibudir-tab-label {
    display: inline-block;
    padding: 15px 30px;
    cursor: pointer;
    background-color: #fff;
    color: #333;
    font-weight: 600;
    border-bottom: 2px solid transparent;
    transition: all 0.3s;
}

.ibudir-tab-label:hover {
    background-color: #f8f8f8;
}

.ibudir-radio:checked + .ibudir-tab-label {
    border-bottom: 2px solid #97b0a8;
    background-color: #f5f5f5;
    color: #97b0a8;
}

.ibudir-tab-content {
    display: none;
    padding: 40px 0;
    border-top: 1px solid #ddd;
}

.ibudir-radio:checked + .ibudir-tab-label + .ibudir-tab-content {
    display: block;
}

.ibudir-columns {
    display: flex;
    gap: 40px;
    flex-wrap: wrap;
}

.ibudir-left {
    flex: 1;
    min-width: 300px;
}

.ibudir-left h1 {
    font-size: 2rem;
    margin-bottom: 20px;
}

.ibudir-left p {
    font-size: 1rem;
    line-height: 1.6;
}

.ibudir-right {
    flex: 1;
    min-width: 300px;
}

.ibudir-right img {
    width: 100%;
    height: auto;
    display: block;
    margin-bottom: 20px;
}

.ibudir-gallery {
    display: grid;
    gap: 8px;
}

.ibudir-gallery .gallery-img {
    width: calc(50% - 5px);
}

.post-selector-boxes {
    display: flex;
    justify-content: center;
}

.post-selector-box {
    padding-left: 24px;
    padding-right: 24px;
    cursor: pointer;
}

#post-content {
    background: #F9F9F9;
    padding-top: 32px;
}

.ibudir-post-content h2{
    font-size: var(--font40);
}

.ibudir-post-content-details-text img{
    max-width: 450px;
}

.ibudir-post-content-details-text img.active{
    max-width: unset;
}

.ibudir-post-content-details-text p{
    margin-bottom: 30px;
}

#banner-content-area.btmleft{
    justify-self: start;
    align-self: end;
    margin-bottom: clamp(30px, 5vw, 130px);
    grid-template-columns: 145px auto;
    gap: 50px;
}

#banner-content-area.btmright{
    justify-self: end;
    align-self: end;
    margin-bottom: clamp(30px, 5vw, 130px);
    grid-template-columns: 145px auto;
    gap: 50px;
}

#banner-content-area.topleft{
    justify-self: start;
    align-self: start;
    margin-top: clamp(30px, 5vw, 130px);
    grid-template-columns: 145px auto;
    gap: 50px;
}

#banner-content-area.topright{
    justify-self: end;
    align-self: start;
    margin-top: clamp(30px, 5vw, 130px);
    grid-template-columns: 145px auto;
    gap: 50px;
}


#banner-content.uh152 h1{
    text-wrap: balance;
    margin-bottom: 10px;
}

#banner-content.uh152{
    text-align: left;
    padding-left: 50px;
    border-left: 1px solid #fff;
}

#banner-content.uh152 .btn{
    margin: 0px;
}

#banner-content-area.btmleft img, #banner-content-area.btmright img, #banner-content-area.topleft img, #banner-content-area.topright img{
    margin-bottom: 0px;
}

#banner-content.uh152 #banner-content-helper{
    margin: 0px;
    margin-top: 10px;
}

#banner-content-area #banner-line{
    display: none;
}

.swap .txtvidimg-panel{
    transform: unset;
}

.txtvidimg.white{
  background-color: #fff;
  color: #1A233A;
}

.tabsandtext-underslider{
    display: none;
}

.tabsandtext-underslider.active{
    display: block;
}

.tabsandtext-underslider{
    color: #fff;
}

.tabsandtext-underslider.light-green{
    background-color: #5A8F85;
}

.tabsandtext-underslider.dark-green{
    background-color: #27433D;
}

.tabsandtext-underslider.dark-blue{
    background-color: #1A233A;
}

.tabsandtext-underslider.light-blue{
    background-color: #64708F;
}


.tabsandtext-underslider-content{
    max-width: 600px;
}

.tabsandtext.underimg .horitab-tab-content-text{
    display: none !important;
}


@media (max-width: 2000px){

    #banner-content-area.btmleft, #banner-content-area.btmright{
        margin-bottom: clamp(30px, 4vw, 130px);
    }
}

@media (max-width: 1500px){
    #banner-content-area img {
        max-width: 150px;
    }
    .horitab-tab-content.content-centre img{
        aspect-ratio: 10/3.5;
    }

    .company-card {
        grid-template-columns: 1fr;
    }

    .txtautovidimg-area-content{
        width: clamp(400px, 42vw, 640px);
    }

}

@media (max-width: 1400px){
    #banner-content-area.btnleft, #banner-content-area.btmright{
        margin-bottom: clamp(30px, 2vw, 130px);
    }
}


@media (max-width: 1300px){
    #footer-area {
        grid-template-columns: 170px clamp(200px, 26vw, 500px) clamp(200px, 26vw, 500px);
    }

    #footer-area-part2 {
        padding-left: 40px;
        padding-right: 40px;
    }

    #footer-area-part3 {
        padding-left: 40px;
    }
    #banner-content {
        max-width: 600px;
    }
}



@media (max-width: 1200px){

    .specialgrid-gap {

        grid-template-columns: 1fr 1.5fr;

    }



    .horitab-tab-content.content-centre .horitab-tab-content-text {

        padding: 30px var(--padleft);

    }

}



@media (max-width: 1100px){
    #banner-content-area {
        padding-top: 50px;
    }

    #banner-content-area img{
        max-width: 130px;
    }

    #footer-area {
        grid-template-columns: 170px 350px 350px;
    }

    #banner.btmleft #banner-content-area img{
        max-width: unset;
    }


}


@media (max-width: 1000px){
    .txtvidimg.specialgrid-gap, .txt-imgmages-area.specialgrid-gap, .ibudir-post-content-details.specialgrid-gap{
        grid-template-columns: 1fr;
    }

    .txtvidimg-left{
        order: 2;
        padding-top: 30px;
    }

    .txtvidimg-right{
        order: 1;
    }

    #banner-content-area{
        grid-row: 2;
        background-color: #1A233A;
        width: calc(100% - (var(--pad) * 2));
        padding-left: var(--pad);
        padding-right: var(--pad);
    }

    #banner-content {
        margin: 0 auto;
        padding-bottom: 40px;
    }

    #banner-content-area img {
        display: none;
    }

    .banner-mob-logo{
        display: block;
        width: 200px;
        object-fit: contain;
        align-self: center;
        justify-self: center;
    }

    #banner-videocontent .banner-videocontent-logo{
        display: block;
        width: auto;
        height: 200px;
        object-fit: contain;
        align-self: center;
        justify-self: center;
    }

    .txt-imgmages img.bottom-right-panel {
        height: auto;
        width: 60%;
    }

    .txt-imgmages-content-helper{
        max-width: 600px;
    }

    #footer-area {
        grid-template-columns: 170px auto;
    }

    #footer-area-part3{
        grid-column: 1/3;
        max-width: 400px;
        margin-top: 30px;
        padding-left: 0px;
    }

    #footer-area-part2{
        max-width: 350px;
        padding-left: 30px;
        padding-right: 30px;
    }

    #banner.btmleft #banner-videocontent .banner-videocontent-logo, #banner.btmright #banner-videocontent .banner-videocontent-logo, #banner.topleft #banner-videocontent .banner-videocontent-logo, #banner.topright #banner-videocontent .banner-videocontent-logo{
        display: none;
    }

    #banner.btmleft #banner-content-area img, #banner.btmright #banner-content-area img, #banner.topleft #banner-content-area img, #banner.topright #banner-content-area img{
        display: block;
    }

    #banner-content-area.btmleft, #banner-content-area.btmright, #banner-content-area.topleft, #banner-content-area.topright{
        grid-template-columns: 125px auto;
        gap: 20px;
        margin-bottom: 0px;
        margin-top: 0px;
    }

    .horitab .horitab-tab-content-text{
        max-width: 400px;
    }
}



@media (max-width: 900px){

    .tabsandtext.centre{

        aspect-ratio: 16/11;

    }

}

@media (max-width: 768px) {
    .ibudir-columns {
        flex-direction: column;
    }

    .ibudir-gallery .gallery-img {
        width: 100%;
    }
}

@media (max-width: 700px){

    #footer-area-part2 {

        border-left: unset;

        border-right: unset;

        padding-left: 0px;

        padding-right: 0px;

    }



    .tabsandtext.centre {

        aspect-ratio: 16/12;

    }

}



@media (max-width: 600px){

    .txt-imgmages img.bottom-right-panel {
        width: 80%;
    }

    .banner-mob-logo {
        width: 160px;
    }

    #banner-videocontent .banner-videocontent-logo{
        height: 160px;
    }

    .txtautovidimg-area-content {
        width: auto;
    }

    .txt-imgmages-area-centre {
        display: block;
    }

    .txt-imgmages-area-centre img {
        height: 100%;
        aspect-ratio: 16/12;
    }

    #footer-area-part1 img {
        width: 100px;
    }

    #footer-area {
        grid-template-columns: 130px auto;
    }

    #nav-burger-navpart {
        width: 100%;
        padding-left: 0px;
        padding-right: 0px;
    }

    .nav-burger-navpartul{
        margin: 0 auto;
    }

    .ultralightimage.active{
        width: 80% !important;
    }

    #banner-content-area[class*="left"],
    #banner-content-area[class*="right"]{
        grid-template-columns: 1fr;
        gap: 40px;
    }

    #banner[class*="left"] #banner-content-area img,
    #banner[class*="right"] #banner-content-area img{
        max-width: 130px;
    }

    #banner-content.uh152{
        padding-left: 0px;
        border-left: unset;
        text-align: center;
        margin: 0 auto;
    }

    #banner-content.uh152 #banner-content-helper{
        text-align: center;
        margin: 0 auto;
    }

    #banner-content.uh152 .btn{
        margin: 0 auto;
        margin-top: 20px;
    }

    #banner-content-area #banner-line{
        display: block;
        margin-bottom: 20px;
        margin-top: 20px;
    }

    .horitab .horitab-tab-content-text{
        max-width: 500px;
    }
}



@media (max-width: 500px){
    .banner-mob-logo {
        width: 130px;
    }

    #banner-videocontent .banner-videocontent-logo{
        height: 130px;
    }

    .txtautovidimg-area-content-txtpart {
        width: auto;
    }

    .txtautovidimg-area-content{
        grid-row: 2;
        background-color: #3B635B;
        color: #FFFFFF;
    }

    .txtautovidimg-area-content.topright,
    .txtautovidimg-area-content.btmleft,
    .txtautovidimg-area-content.btmright{
        justify-self: unset;
        align-self: unset;
    }

    #footer-area {
        display: block;
    }

    #footer-area-part1 img {
        margin-bottom: 20px;
    }

    #footer-area-part3 {
        max-width: 100%;
    }

    .tabsandtext-helper .tabsandtext-content{
        flex-direction: column;
    }

    .tabsandtext-helper .horitab{
        flex-direction: column-reverse;
    }

    .horitab-tab h4 {
        writing-mode: unset;
        margin-bottom: 5px;
        margin-top: 5px;
    }

    .horitab-tab{
        width: 100%;
    }

    .horitab{
        flex: 0;
        animation: unset;
    }

    .horitab.active{
        flex: 1;
        animation: unset;
    }

    .horitab-tab-content.content-centre img {
        aspect-ratio: 16/8;
    }

    .staff-member {
        display: block;
    }

    .tabsandtext-underslider.active{
        display: none;
    }

    .horitab-tab-content.ultra-allinone{
        display: block;
    }

    .tabsandtext.underimg .horitab.active .horitab-tab-content-text{
        display: block !important;
    }

    .horitab-tab-content-text{
        color: #fff;
    }

    .horitab-tab-content-text.light-green{
        background-color: #5A8F85;
    }

    .horitab-tab-content-text.dark-green{
        background-color: #27433D;
    }

    .horitab-tab-content-text.dark-blue{
        background-color: #1A233A;
    }

    .horitab-tab-content-text.light-blue{
        background-color: #64708F;
    }

}



@media (max-width: 400px){
    #banner-videocontent img, #banner-videocontent iframe{
        width: 130vw;
    }

    #banner-videocontent{
        overflow: hidden;
    }

    #banner-videocontent .banner-videocontent-logo{
        padding-right: 30vw;
    }

    .banner-image-content-img{
        min-height: 300px;
    }

    #banner.btmleft #banner-content-area img{
        max-width: 110px;
    }
}


.gallery-item img {
    aspect-ratio: 16 / 9;
    cursor: pointer;
}

.modal {
    visibility: hidden;
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.8);
    opacity: 0;
    transition: opacity 0.2s ease-in-out, visibility 0s linear 0.2s;
    justify-content: center;
    align-items: center;
}

.modal.fade-in {
    opacity: 1;
    transition: opacity 0.1s ease-in-out;
}

.modal.fade-out {
    opacity: 0;
}

.modal-content {
    margin: auto;
    display: block;
    max-width: 80%;
    max-height: 80%;
    text-align: end;
}

#modal-image {
    max-height: 75vh;
}

.modal-close {
    top: 10px;
    right: 25px;
    color: white;
    font-size: 35px;
    font-weight: bold;
    cursor: pointer;
}