.navUl {
    background-color: #0d028b;
    color: #000000;
    border-radius: 10px;
}

.navlist a {
    color: #ffffff;
}

.navlist a:hover {
    color: #cabcfb;
    font-size: 20px;
}

.logo-1 {
    width: 50px;
    height: 70px;
    border-radius: 50%;
}

body {
    background-color: #0c0149;
}

.header-row {
    background-color: #4955f7;
    border-radius: 50px;
}

.globe-img {
    background-color: #000000;
    border-radius: 300px;
    margin-top: 125px;
}

.globe-img {
    cursor: pointer;

}

.leftcol {
    padding-top: 150px;
    background-color: #a8a7ff;
    border-radius: 50px;
    border: 2px solid rgb(1, 1, 68);
}

.leftcol:hover {
    cursor: pointer;
    animation-name: __pulse;
    animation-duration: 2s;
}

.section-hero:hover {
    cursor: pointer;
    animation-name: __pulse;
    animation-duration: 2s;
}


.globe-img {
    animation: rotate 15s linear infinite;
    margin-bottom: 150px;
}

@keyframes rotate {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.globe-img:hover {
    transform: scale(1.05);
    box-shadow: 5px 5px 25px rgb(11, 57, 3);
    cursor: pointer;
    animation-name: __pulse;
    animation-duration: 2s;
}

.heading-3 {
    color: rgb(0, 0, 0);
    /* font-weight: 600; */
    font-size: 50px;
    font-style: italic;
}

.heading-3:hover {
    /* color: rgb(255, 255, 255); */
    /* font-weight: 650; */
    transition: 0.9s;
    cursor: pointer;
    animation-name: __slideLeft;
    animation: slideLeft 0.5s ease forwards;
}


.para-1 {
    font-style: italic;
    font-size: 25px;
    color: #000;
}

.para1 {
    font-style: italic;
    font-size: 27px;
    color: #000;
}

/* .para-1:hover {
    font-size: 20px;
    color: #000;
    animation-name: __slideLeft;
    animation: slideLeft 0.5s ease forwards;
} */



.span-1 {
    color: #2604bd;
    font-weight: bold;
}

.heading3 {
    color: #12015f;
    font-size: 50px;
    font-style: italic;
}

.heading3:hover {
    color: #2232c2;
    font-size: 50px;
    font-style: italic;
}

.heading30 {
    color: #12015f;
    font-size: 50px;
    font-style: italic;
}

.heading30:hover {
    color: #2232c2;
    font-size: 50px;
    font-style: italic;
}

.para-10 {
    font-style: italic;
    font-size: 25px;
    color: #000;
    font-weight: 500;
}

.para-1 {
    font-style: italic;
    font-size: 25px;
    color: #000;
    font-weight: 500;
}

.world-row {
    /* background-image: url('images/blue-world-map-white-background_42634-9.avif'); */
    position: relative;
    border-radius: 50px;
    height: 600px;
    width: 1200px;
    margin: auto;
    text-align: center;
}

.world-img {
    border-radius: 50px;
    height: 500px;
    width: 1200px;
    /* box-shadow: 5px 5px 15px rgb(20, 3, 252); */
}

.overlay {
    position: absolute;
    background-color: rgba(64, 64, 143, 0.473);
    border-radius: 12px;
    /* margin-top: 390px !important; */
    margin-top: 100px !important;
    margin-left: 160px !important;
    width: 800px !important;
    border-radius: 20px;
    border: 2px solid rgb(0, 0, 0);
    box-shadow: 5px 5px 15px rgb(20, 3, 252);
}

.overlay:hover {
    border: 2px solid rgb(0, 0, 0);
    color: #000;
    cursor: pointer;
    background-color: rgba(156, 156, 253, 0.493);
    animation-name: zoom-In;
    animation-duration: 2s;
}

.land {
    width: 500px;
    height: 300px;
    border-radius: 10px;
    margin: 10px;
    gap: 20px;
    box-shadow: 5px 5px 15px rgb(152, 145, 248);
    animation: landAnim 1.2s ease forwards;
}

@keyframes landAnim {
    from {
        opacity: 0;
        transform: scale(0.9) translateY(30px);
    }

    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.land {
    width: 500px;
    height: 300px;
    border-radius: 10px;
    margin: 10px;
    box-shadow: 5px 5px 15px rgb(152, 145, 248);

    animation: landAnim 1.2s ease forwards;
    transition: all 0.4s ease;
}

.land:hover {
    animation-name: zoomIn;
    animation-duration: 0.5s;
    box-shadow: 8px 15px 30px rgb(120, 110, 240);
    cursor: pointer;
}

.landscape-grid {
    gap: 100px;

}

.para-2 {
    font-style: italic;
    font-size: 25px;
    color: #ffffff;
    font-weight: 500;

}

.head2 {
    color: #ffffff;
    font-size: 50px;
    font-style: italic;
    margin-bottom: 20px;
    text-shadow: 2px 2px 4px #0206fa;

}

.head2:hover {
    color: #2604bd;
    font-size: 55px;
    font-style: italic;
    cursor: pointer;
    text-shadow: 2px 2px 4px #ffffff;
    animation: slideLeft 0.9s ease forwards;
}

@keyframes slideLeft {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-20px);
    }
}

.climate-section {

    border-radius: 10px;
    margin: 10px;
    box-shadow: 5px 5px 15px rgb(152, 145, 248);

    animation: climateAnim 1.2s ease forwards;
    color: #ffffff;
}

.climate-img {
    border-radius: 500px;
    height: 500px;
    width: 800px;
    border: 4px solid rgb(19, 0, 0);
    box-shadow: 5px 5px 15px rgb(8, 1, 105);

}

.climate-img:hover {
    border-radius: 500px;
    height: 500px;
    width: 800px;
    box-shadow: 5px 5px 15px rgb(137, 237, 250);
    cursor: pointer;
    animation-name: fadeup;
    animation-duration: 0.5s;
}

.card {
    background-color: rgb(165, 179, 245);
    border-radius: 10px;
    box-sizing: border-box;
    border: 2px solid rgb(1, 46, 4);

}

.card:hover {
    background-color: rgb(72, 103, 245);
    border-radius: 10px;
    box-sizing: border-box;
    cursor: pointer;
    animation-name: pulse;
    animation-duration: 2s;
}

.flag {
    width: 50px;
    height: auto;
    border-radius: 5px;
}

.maped {
    width: 700px;
    height: auto;
    border-radius: 50px;
}

.maped:hover {
    width: 700px;
    height: auto;
    border-radius: 55px;
    box-shadow: 5px 5px 25px rgb(117, 138, 231);
    cursor: pointer;
    animation-name: zoom-In;
    animation-duration: 2s;
}

.section-facts {
    border-radius: 50px;
    background-color: #4955f7;
    margin-bottom: 50px;
}


.Facts-btn {
    font-size: 35px;
    font-style: bold;
    background-color: #070144;
    color: #ffffff;
    border: 2px solid rgb(146, 128, 248);
    border-radius: 25px;
    box-shadow: 5px 5px 15px rgb(145, 125, 255);


}

.Facts-btn:hover {
    font-size: 36px;
    font-style: bold;
    background-color: #6d6bfa;
    color: #000000;
    cursor: pointer;
    transition: 0.5s;
    border: 2px solid rgb(0, 0, 0);
    box-shadow: 5px 5px 15px rgb(1, 23, 85);
}

.head4 {
    color: #000000;
    font-size: 40px;
    font-style: italic;
    margin-bottom: 20px;
    text-shadow: 2px 2px 4px #ffffff;
}

.head4:hover {
    color: #ffffff;
    font-size: 40px;
    font-style: italic;
    margin-bottom: 22px;
    text-shadow: 2px 2px 4px #ffffff;
    cursor: pointer;
}

.para4 {
    color: #000000;
    font-size: 20px;
    font-style: italic;
    margin-bottom: 22px;
    text-shadow: 2px 2px 4px #ffffff;
    cursor: pointer;
}

.para4:hover {
    color: #ffffff;
    font-size: 22px;
    font-style: italic;
    margin-bottom: 22px;
    text-shadow: 2px 2px 4px #000000;
    cursor: pointer;
}
.footer{
    background-color: #090163;
    border: 2px solid #7c70f9;
    
}
.logo{
text-decoration: none;   
 width: 42px;
    height: 42px;
    border-radius: 50px;
}
a{
    text-decoration: none;
    color: #ffffff;
}
.head30 {
    color: #ffffff;
        font-size: 35px;
    font-style: italic;
}
.head-3:hover{
    color: rgb(121, 139, 245);
    cursor: pointer;
    font-size: 40px;
    font-style: italic;
}
.lastpara{
    color: #ffffff;
}
.active-card {
    border: 3px solid #000;
    box-shadow: 0 0 20px #ffffff;
    transform: scale(1.05);
    transition: 0.3s ease;
}

.section-facts {
    display: block;
}



@media screen and (max-width: 1422px) {
    body {
        overflow-x: hidden !important;
    }

}

@media screen and (max-width: 1300px) {
    .globe-img {
        cursor: pointer;
        animation: rotate 15s linear infinite;
        width: 500px;
        height: 350px;
        margin-top: 100px;
    }

    .globe-img:hover {
        transform: scale(1.05);
        box-shadow: 5px 5px 25px rgb(11, 57, 3);
        cursor: pointer;
        animation-name: __pulse;
        animation-duration: 2s;
    }
}

@media screen and (max-width: 1300px) and (min-width: 992px) {

    .header-row {
        padding: 50px !important;
        border-radius: 40px;
    }

    .leftcol {
        padding-top: 60px;
        padding-left: 40px !important;
        border-radius: 40px;
    }

    .heading-3 {
        font-size: 45px;
        line-height: 1.3;
    }

    .para1 {
        font-size: 24px;
        max-width: 520px;
    }

    .globe-img {
        width: 420px;
        height: auto;
        margin-bottom: 120px;
    }

    .section-hero {
        padding-top: 30px;
    }


}

@media only screen and (max-width: 1250px) {
    .world-img {
        width: 1000px;
    }

    .overlay {
        width: 700px !important;
    }
}

@media only screen and (max-width: 1200px) {
    .world-img {
        width: 900px;
        height: 600px;
    }

    .overlay {
        width: 600px !important;
        margin-top: 100px;
    }

    .maped {
        width: 600px;
    }

    .maped:hover {
        width: 602px;
        box-shadow: 5px 5px 25px rgb(117, 138, 231);
        cursor: pointer;
        animation-name: zoom-In;
        animation-duration: 2s;
    }
}

@media only screen and (max-width: 1050px) {
    .world-img {
        width: 850px;
        margin-left: 30px;
    }
}

@media only screen and (max-width:1000px) {

    .climate-img {
        border-radius: 500px;
        height: 400px;
        width: 600px;
        border: 4px solid rgb(19, 0, 0);
        box-shadow: 5px 5px 15px rgb(8, 1, 105);

    }

    .climate-img:hover {
        border-radius: 500px;
        height: 400px;
        width: 600px;
        box-shadow: 5px 5px 15px rgb(137, 237, 250);
        cursor: pointer;
        animation-name: fadeup;
        animation-duration: 0.5s;
    }
}

@media only screen and (max-width:992px) {
    .world-img {
        width: 700px;
        height: 600px;
        text-align: left;
    }

    .overlay {
        width: 500px !important;
        margin-left: 125px !important;
    }

    .navbar-collapse .navlist {
        text-align: center;
    }
}

@media screen and (max-width: 991px) and (min-width: 768px) {

    .header-row {
        padding: 40px !important;
        border-radius: 35px;
        text-align: center;
    }

    .leftcol {
        padding: 50px 30px !important;
        border-radius: 35px;
    }

    .heading-3 {
        font-size: 38px;
        line-height: 1.3;
    }

    .para1 {
        font-size: 22px;
        max-width: 600px;
        margin: auto;
    }

    .globe-img {
        width: 350px;
        margin: 50px 0;
    }
}


@media only screen and (max-width:952px) {

    .world-img {
        width: 650px;
        height: 550px;
        margin-right: 500px;
    }

    .overlay {
        width: 500px !important;
        margin-left: 125px !important;
    }
}


@media only screen and (max-width:780px) {

    .climate-img {
        border-radius: 500px;
        height: 300px;
        width: 450px;
        border: 4px solid rgb(19, 0, 0);
        box-shadow: 5px 5px 15px rgb(8, 1, 105);

    }

    .climate-img:hover {
        border-radius: 500px;
        height: 300px;
        width: 450px;
        box-shadow: 5px 5px 15px rgb(137, 237, 250);
        cursor: pointer;
        animation-name: fadeup;
        animation-duration: 0.5s;
    }

    .maped {
        width: 450px;
    }

    .maped:hover {
        width: 452px;
        box-shadow: 5px 5px 25px rgb(117, 138, 231);
        cursor: pointer;
        animation-name: zoom-In;
        animation-duration: 2s;
    }
}

@media only screen and (max-width:768px) {
    .world-img {
        width: 500px;
        height: 550px;
        margin-right: 400px;
    }

    .overlay {
        width: 400px !important;
        height: 350px;
        margin-left: 80px !important;
    }

    .heading30 {
        color: #12015f;
        font-size: 30px;
        font-style: italic;
    }

    .heading30:hover {
        color: #2232c2;
        font-size: 31px;
        font-style: italic;
    }

    .para-10 {
        font-style: italic;
        font-size: 20px;
        color: #000;
        font-weight: 500;
    }
}

@media screen and (max-width: 767px) and (min-width: 576px) {

    .header-row {
        padding: 30px !important;
        border-radius: 25px;
        text-align: center;
    }

    .leftcol {
        padding: 40px 20px !important;
        border-radius: 25px;
    }

    .heading-3 {
        font-size: 32px;
    }

    .para1 {
        font-size: 20px;
    }

    .globe-img {
        width: 350px;
        margin: 40px 0;
    }
}


@media screen and (max-width: 576px) and (min-width: 345px) {

    .header-row {
        padding: 30px !important;
        border-radius: 25px;
        text-align: center;
    }

    .leftcol {
        padding: 40px 20px !important;
        border-radius: 25px;
    }

    .heading-3 {
        font-size: 32px;
    }

    .para1 {
        font-size: 20px;
    }

    .globe-img {
        width: 250px;
        height: auto;
        margin: 40px 0;
    }
}

@media only screen and (max-width:600px) {
    .land {
        width: 350px;
        height: 200px;
    }
}

@media only screen and (max-width:550px) {

    .climate-img {
        border-radius: 500px;
        height: 200px;
        width: 350px;
        border: 4px solid rgb(19, 0, 0);
        box-shadow: 5px 5px 15px rgb(8, 1, 105);

    }

    .climate-img:hover {
        border-radius: 500px;
        height: 200px;
        width: 350px;
        box-shadow: 5px 5px 15px rgb(137, 237, 250);
        cursor: pointer;
        animation-name: fadeup;
        animation-duration: 0.5s;
    }

    .maped {
        width: 350px;
    }

    .maped:hover {
        width: 352px;
        box-shadow: 5px 5px 25px rgb(117, 138, 231);
        cursor: pointer;
        animation-name: zoom-In;
        animation-duration: 2s;
    }
}

@media only screen and (max-width:490px) {
    .world-img {
        width: 350px;
        height: 550px;
        margin-right: 400px;
        margin-bottom: 100px;
    }

    .overlay {
        height: 430px;
        width: 250px !important;
        margin-left: 80px !important;
        margin-top: 60px !important;
    }

    .heading30 {
        color: #12015f;
        font-size: 30px;
        font-style: italic;
    }

    .heading30:hover {
        color: #2232c2;
        font-size: 31px;
        font-style: italic;
    }

    .para-10 {
        font-style: italic;
        font-size: 20px;
        color: #000;
        font-weight: 500;
    }
}

@media only screen and (max-width:450px) {
    .land {
        width: 275px;
        height: 180px;
    }

    .heading-3 {
        color: rgb(0, 0, 0);
        /* font-weight: 600; */
        font-size: 35px;
        font-style: italic;
        margin-right: 10px;

    }

    .heading-3:hover {
        transition: 0.9s;
        cursor: pointer;
        animation-name: __slideLeft;
        animation: slideLeft 0.5s ease forwards;
    }

    .para1 {
        font-style: italic;
        font-size: 17px;
        color: #000;
        margin-right: 20px;
    }
}

@media only screen and (max-width:430px) {

    .climate-img {
        border-radius: 500px;
        height: 150px;
        width: 225px;
        border: 4px solid rgb(19, 0, 0);
        box-shadow: 5px 5px 15px rgb(8, 1, 105);

    }

    .climate-img:hover {
        border-radius: 500px;
        height: 150px;
        width: 225px;
        box-shadow: 5px 5px 15px rgb(137, 237, 250);
        cursor: pointer;
        animation-name: fadeup;
        animation-duration: 0.5s;
    }

    .maped {
        width: 250px;
    }

    .maped:hover {
        width: 252px;
        box-shadow: 5px 5px 25px rgb(117, 138, 231);
        cursor: pointer;
        animation-name: zoom-In;
        animation-duration: 2s;
    }
}

@media only screen and (max-width:420px) {
    .world-img {
        width: 320px;
        height: 530px;
        margin-right: 400px;
        margin-bottom: 100px;
    }

    .overlay {
        height: 400px;
        width: 225px !important;
        margin-left: 80px !important;
        margin-top: 60px !important;
    }

    .heading30 {
        color: #12015f;
        font-size: 25px;
        font-style: italic;
    }

    .heading30:hover {
        color: #2232c2;
        font-size: 26px;
        font-style: italic;
    }

    .para-10 {
        font-style: italic;
        font-size: 15px;
        color: #000;
        font-weight: 500;
    }
}

@media only screen and (max-width:420px) {
    .world-img {
        width: 250px;
        height: 530px;
        margin-right: 400px;
        margin-bottom: 100px;
    }

    .overlay {
        height: 400px;
        width: 150px !important;
        margin-left: 80px !important;
        margin-top: 60px !important;
    }

    .heading30 {
        color: #12015f;
        font-size: 18px;
        font-style: italic;
    }

    .heading30:hover {
        color: #2232c2;
        font-size: 18px;
        font-style: italic;
    }

    .para-10 {
        font-style: italic;
        font-size: 12px;
        color: #000;
        font-weight: 500;
    }
}

@media screen and (max-width: 345px) and (min-width: 200px) {

    .header-row {
        padding: 30px !important;
        border-radius: 25px;
        text-align: center;
    }

    .leftcol {
        padding: 40px 20px !important;
        border-radius: 25px;
    }

    .heading-3 {
        font-size: 32px;
    }

    .para1 {
        font-size: 20px;
    }

    .globe-img {
        width: 150px;
        height: auto;
        margin: 40px 0;
    }
}

@media only screen and (max-width:340px) {
    .land {
        width: 200px;
        height: 150px;
    }

    .head2 {
        color: #ffffff;
        font-size: 35px;
        font-style: italic;
        margin-bottom: 20px;
        text-shadow: 2px 2px 4px #0206fa;

    }

    .head2:hover {
        color: #2604bd;
        font-size: 40px;
        font-style: italic;
        cursor: pointer;
        text-shadow: 2px 2px 4px #ffffff;
        animation: slideLeft 0.9s ease forwards;
    }

    .maped {
        width: 200px;
    }

    .maped:hover {
        width: 202px;
        box-shadow: 5px 5px 25px rgb(117, 138, 231);
        cursor: pointer;
        animation-name: zoom-In;
        animation-duration: 2s;
    }
}

@media only screen and (max-width:340px) {
    .land {
        width: 150px;
        height: 150px;
    }
}

@media only screen and (max-width:315px) {
    .world-img {
        width: 200px;
        height: 530px;
        margin-right: 400px;
        margin-bottom: 100px;
    }

    .overlay {
        height: 400px;
        width: 100px !important;
        margin-left: 80px !important;
        margin-top: 60px !important;
    }

    .heading30 {
        display: none;
    }

    .para-10 {
        font-style: italic;
        font-size: 12px;
        color: #000;
        font-weight: 500;
    }

    .heading-3 {
        color: rgb(0, 0, 0);
        /* font-weight: 600; */
        font-size: 25px;
        font-style: italic;
        margin-right: 10px;
    }

    .heading-3:hover {
        transition: 0.9s;
        cursor: pointer;
        animation-name: __slideLeft;
        animation: slideLeft 0.5s ease forwards;
    }

    .para1 {
        font-style: italic;
        font-size: 17px;
        color: #000;
        margin-right: 20px;
    }
}

@media only screen and (max-width:310px) {

    .climate-img {
        border-radius: 500px;
        height: 125px;
        width: 200px;
        border: 4px solid rgb(19, 0, 0);
        box-shadow: 5px 5px 15px rgb(8, 1, 105);

    }

    .climate-img:hover {
        border-radius: 500px;
        height: 125px;
        width: 200px;
        box-shadow: 5px 5px 15px rgb(137, 237, 250);
        cursor: pointer;
        animation-name: fadeup;
        animation-duration: 0.5s;
    }
}

@media only screen and (max-width:280px) {

    .climate-img {
        border-radius: 500px;
        height: 125px;
        width: 175px;
        border: 4px solid rgb(19, 0, 0);
        box-shadow: 5px 5px 15px rgb(8, 1, 105);

    }

    .climate-img:hover {
        border-radius: 500px;
        height: 125px;
        width: 175px;
        box-shadow: 5px 5px 15px rgb(137, 237, 250);
        cursor: pointer;
        animation-name: fadeup;
        animation-duration: 0.5s;
    }

    .maped {
        width: 125px;
    }

    .maped:hover {
        width: 127px;
        height: auto;
        border-radius: 15px;
        box-shadow: 5px 5px 25px rgb(117, 138, 231);
        cursor: pointer;
        animation-name: zoom-In;
        animation-duration: 2s;
    }
}

@media only screen and (max-width:260px) {
    .world-img {
        width: 150px;
        height: 530px;
        margin-right: 400px;
        margin-bottom: 100px;
    }

    .overlay {
        height: 400px;
        width: 80px !important;
        margin-left: 65px !important;
        margin-top: 60px !important;
    }

    .heading30 {
        display: none;
    }

    .para-10 {
        font-style: italic;
        font-size: 12px;
        color: #000;
        font-weight: 500;
    }
}

@media only screen and (max-width:250px) {

    .climate-img {
        border-radius: 500px;
        height: 100px;
        width: 150px;
        border: 4px solid rgb(19, 0, 0);
        box-shadow: 5px 5px 15px rgb(8, 1, 105);

    }

    .climate-img:hover {
        border-radius: 500px;
        height: 100px;
        width: 150px;
        box-shadow: 5px 5px 15px rgb(137, 237, 250);
        cursor: pointer;
        animation-name: fadeup;
        animation-duration: 0.5s;
    }
}

@media only screen and (max-width:225px) {
    .head2 {
        color: #ffffff;
        font-size: 30px;
        font-style: italic;
        margin-bottom: 20px;
        text-shadow: 2px 2px 4px #0206fa;

    }

    .head2:hover {
        color: #2604bd;
        font-size: 35px;
        font-style: italic;
        cursor: pointer;
        text-shadow: 2px 2px 4px #ffffff;
        animation: slideLeft 0.9s ease forwards;
    }

    .land {
        width: 125px;
        height: 125px;
    }

    .para-2 {
        font-style: italic;
        font-size: 20px;
        color: #ffffff;
        font-weight: 500;

    }
}