/*main style edit start*/

body>main>p {
    color: rgb(0, 46, 108);
    display: flex;
    justify-content: center;
    text-align: justify;
    max-width: 600px;
    margin: 8px 3px 8px 3px;
    font-size:1.3rem;

}

h1 {
    color: rgb(208, 223, 86);
    font-size: 30px;
    display: flex;
    justify-content: center;
    text-align:center;
}

h2 {
    color: rgb(208, 223, 86);
    font-size: 24px;
    display: flex;
    justify-content: center;
}

body {
    background-color: white;
    margin: 0 auto;
}

.heading1 {
    display: flex;
    justify-content: center;
    text-decoration: none;
    color: #81dbb8;
    margin: 2px;
    font-size: 10rem;
}

.div_for_images {
    display: flex;
    flex-direction: column;
    align-items: center;

}

body>main>.parag {
    color: rgb(0, 46, 108);
    display: flex;
    justify-content: center;
    text-align: justify;
    max-width: 80vw;
    margin: 8px auto;

}

main>div>ol {
    display: inline-block;
    text-align: left;
    max-width: 80vw;
}

main>div>ul {
    display: inline-block;
    text-align: left;
    max-width: 80vw;
}

.div_for_contact {
    display: block;
}

.div_for_contact2 {
    margin: 1em;
    background-color: rgb(232, 238, 239);
    box-shadow: 2px 2px 1px azure;
    padding: 1em;

}

.for_map {
    display: block;
    margin-right: auto;
    margin-left: auto;
}

.div_for_ol {
    text-align: center;
}

.about_image {
    width: 100vw;
    height: 400px;
    object-fit: cover;
}

h1 {
    color: rgb(208, 223, 86);
    font-size: 30px;
    display: flex;
    justify-content: center;
}


.hed12class {
    color: black;
    font-size: 24px;
    display: block;

}

.for_links_main {
    text-decoration: none;
    margin: 2px;
    border: 2px solid white;
    border-radius: 22px;
    color: rgb(0, 46, 108);
    background-color: rgb(232, 237, 240);
    padding: 2px;
}

.for_links_main:hover {
    transition: all 3s ease;
    color: rgb(208, 223, 86);
    background-color: rgba(250, 235, 215, 0.0);
}

/*main style edit end*/

/*project edit start*/

.project {
    background-color: rgb(232, 237, 240);
}

.project p {
    font-size: 1.5em;
    padding: 5px;
}

.project_title_images {
    /*width:100vw;*/
    width: 100%;
    height: auto;
    grid-column: 1/3;
    aspect-ratio: 2/1;
    margin-bottom: 15px;
}

.project_images {
    width: 90vw;
    margin: 10px;
    border-radius: 18px;
    height: 280px;
}

.project_images_for_project_list {
    max-width: 320px;
    height: 280px;
    object-fit: cover;
    border-radius: 21px;
    margin: 10px;
}

.project_images_for_project {
    width: 100vw;
    max-height: 400px;
    object-fit: cover;
}

.div_for_project_images {
    width: 100vw;
}

.projects-grid {
    display: block;
    background-color: rgb(232, 237, 240);
}

.project_element {
    height: 500px;
    border-radius: 25px;
    margin: 10px;
}

.project_element h2 {
    display: block;
    margin: auto;
    padding: 5px;
}

.div_for_images {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
}

.div_for_images>* {
    border: 2px solid rgb(96 139 168);
}

/*project edit end*/


/*navbar edit start*/
.topnav {
    padding: 1rem;
    background-color: rgb(0, 46, 108);
    color: white;
    font-size: 1.5em;
    font-weight: bold;
    display: block;
    justify-content: space-around;
    margin-bottom: 25px;
}

.div_for_header {
    display: flex;
    justify-content: space-around;
}

.topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
}

.topnav a {
    display: none;
}

.topnav a.langs {
    display: block;
    margin: 0px 10px 10px 10px;
}

.topnav a.icon {
    float: right;
    display: block;
}


nav button {
    background-color: rgb(0, 46, 108);
    border: 4px 5%;
    border-color: white;
    width: 32px;
    height: 32px;
}

nav a {
    text-decoration: none;
    text-transform: uppercase;
    color: white;
}

nav a:hover {
    transition: all 0.8s ease;
    color: rgb(208, 223, 86);
}

.active_pages_ {
    color: rgb(208, 223, 86);
}

/*navbar edit end*/

/*gallery edit start*/

.gallery-set {
    display: none;
}

.active_ {
    display: block;
}

.gallery-set img {
    width: 200px;
    height: 200px;
    border-radius: 8px;
    width: 100vw;
}

.switch-buttons {
    margin-bottom: 1rem;
    display: grid;
    grid-template-columns: auto auto;
    justify-content: center;
}

.button_for_gallery {
    padding: 8px 16px;
    margin-right: 10px;
    cursor: pointer;
    outline: none;
    border: none;
    text-align: center;
}

.light_box {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    flex-direction: column;
}

#light_box-img {
    max-width: 300px;
    max-height: 300px;
    object-fit: contain;
    /* keeps aspect ratio inside 300x300 box */
}


.hidden_ {
    display: none;
}

.arrow_ {
    cursor: pointer;
    position: absolute;
    top: 50%;
    font-size: 3rem;
    color: white;
    user-select: none;
    padding: 1rem;
}

.left_ {
    left: 2rem;
}

.right_ {
    right: 2rem;
}

.close-btn_ {
    position: absolute;
    top: 1rem;
    right: 2rem;
    font-size: 2rem;
    color: white;
    cursor: pointer;
}

.carousel_box_ {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    overflow-x: scroll;
    scroll-behavior: smooth;
}

.carousel_item {
    display: none;
    position: relative;
    flex: 0 0 100%;
    width: 100vw;
    flex-shrink: 0;
}

.carousel_active {
    position: relative;
    flex: 0 0 100%;
    width: 100vw;
}

/*gallery edit end*/

/*swiper start*/

.swiper {
    width: 100vw;
    height: 400px;
    margin: 0 auto;
    column-gap: 0px;
}

.swiper .slide-heading {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) translateY(-35px);
    opacity: 0;
    color: white;
    font-size: 1.5em;
    transition: all 3s ease;
    z-index: 2;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
    text-align: center;
}

.swiper .slide-heading a {
    display: block;
    text-decoration: none;
    margin: 2px;
    border: 2px solid white;
    border-radius: 22px;
    color: rgb(0, 46, 108);
    background-color: rgb(232, 237, 240);
    padding: 2px;
}

.swiper .slide-heading a:hover {
    transition: all 3s ease;
    color: rgb(208, 223, 86);
    background-color: rgba(250, 235, 215, 0.0);
}

.swiper .slide-heading>p {
    align-items: center;
}

.swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
}

.swiper-slide-active .slide-heading {
    opacity: 1;
    transform: translate(-50%, -50%) translateY(15px);
}

.swiper-pagination-bullet {
    background-color: rgb(208, 223, 86);
    opacity: 1;
    width: 16px;
    height: 16px;
    /* Optional: override default semi-transparent look */
}

.swiper-pagination-bullet-active {
    background-color: rgb(0, 46, 108);
    opacity: 1;
    width: 16px;
    height: 16px;
    /* Optional: override default semi-transparent look */
}

:root {
    --swiper-pagination-bullet-horizontal-gap: 20px;
}

.swiper-pagination-bullet {
    margin: 0 var(--swiper-pagination-bullet-horizontal-gap);
}

/*swiper end*/

/* Header edit start*/
/*(no lonfer needed)
header {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    background-color: rgb(232, 237, 240);
    padding: 10px;
}
*/

header {
    background-color: rgb(232, 237, 240);
}

header p {
    display: flex;
    font-size: 0.8rem;
    align-items: flex-end;
    border-right: 10px solid rgb(232, 237, 240);
    color: rgb(0, 46, 108);
}

header i {
    color: rgb(208, 223, 86);
}

header svg {
    width: 20px;
    height: 20px;
    fill: rgb(208, 223, 86);
}

header ul {
    list-style-type: none;
    font-size: 1.1rem;
    border-right: 10px solid rgb(232, 237, 240);
    color: rgb(0, 46, 108);
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    margin-top: 0px;
    margin-bottom: 0px;
}

/* Header edit end*/

/*footer edit start*/
footer {
    padding: 1rem;
    margin: 1rem 0 0 0;
    background-color: rgb(0, 46, 108);
    color: white;
    font-size: 1.5em;
    justify-content: space-around;
}

footer img {
    width: 100%;
}

footer a {
    text-decoration: none;
    text-transform: uppercase;
    color: white;
    font-size: 0.8em;
}

footer ul {
    list-style-type: none;
}

footer svg {
    width: 20px;
    height: 20px;
    fill: rgb(208, 223, 86);
}

/*footer edit end*/

/*cookie banner edit start*/

#cookie-banner {
    background: #f9f9f9;
    border-top: 1px solid #ccc;
}

#cookie-banner button {
    background: #4caf50;
    color: white;
    border: none;
    padding: 5px 10px;
    cursor: pointer;
    border-radius: 3px;
}

/*cookie banner edit end*/

/*responsive design start*/

@media screen and (min-width: 505px) {
    .swiper .slide-heading a {
        display: inline;
    }

    :root {
        --swiper-pagination-bullet-horizontal-gap: 5px;
    }

    .div_for_project_title_images {
        width: 100vw;
        display: grid;
        grid-template-columns: 30% 30% 30%;
    }

    .for_map {
        width: 650px;

    }

    #light_box-img {
        max-width: 80%;
        max-height: 80%;
    }

}

@media screen and (min-width: 711px) {

    .active_ {
        display: grid;
        grid-template-columns: auto auto;
        justify-content: space-around;
    }

    .gallery-set img {
        width: 300px;
        height: 300px;
    }

    .projects-grid {
        display: grid;
        grid-template-columns: auto auto;

    }

}




@media screen and (min-width: 825px) {

    body>main>p {
        max-width: 40vw;
    }

    footer {
        display: flex;
    }

    .div_for_ol {
        text-align: left;
    }

    .carousel_item {
        display: flex;
    }

    .div_for_contact {
        display: grid;
        grid-template-columns: auto auto;
        justify-content: space-between;
    }

    header ul {
        flex-direction: row;
        justify-content: space-around;
        align-items: normal;

    }

    header p {
        font-size: 1.2rem;
    }

    .project_images_for_project {
        width: 100%;
    }

    .div_for_project_images {
        display: grid;
        grid-template-columns: auto auto auto;
        width: auto;
    }

    .project p {
        font-size: 1.2em;
        padding: 5px;
    }

    .topnav a {
        display: block;
        float: left;
    }

    .topnav a.icon {
        display: none;
    }

    .topnav {
        display: flex;
    }

    .project_images {
        width: 75vw;
    }

    body>main>p {
        justify-content: left;
        text-align: justify;
        margin: 8px 8px 8px 8px;
        max-width: 100%;
    }
}

@media screen and (min-width: 1136px) {

    .div_for_images {
        flex-direction: row;
        align-items: center;
        width: 100vw;
        flex-wrap: wrap;
    }

    .div_for_images>* {
        flex: 1 1 160px;
    }

    header p {
        font-size: 1.4rem;
    }

    .projects-grid {
        grid-template-columns: auto auto auto;

    }

    .project_images {
        max-width: 320px;
        height: 280px;
        object-fit: cover;
        border-radius: 21px;
        margin: 10px;
    }

    .div_for_contact {
        grid-template-columns: auto auto auto auto;
    }

    .active_ {
        grid-template-columns: auto auto auto;
        gap: 25px;
    }

    body>main>p {
        justify-content: left;
        text-align: justify;
        margin: 8px 8px 8px 8px;
        max-width: 100%;
    }

}

@media screen and (min-width: 1250px) {

    .active_ {
        grid-template-columns: auto auto auto auto;
        gap: 25px;
    }

}

/*responsive design end*/