@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;600;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Devanagari:wght@100;200;300;400;500;600;700;800;900&display=swap');
body{
    margin: 0;
    padding: 0;
    font-family: 'Montserrat', sans-serif!important;
}

nav ul li a {
    color:#4e5066;
    font-weight: 600;
}

.header-component{
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}
.logo{
    color: #1A263C;
    font-weight: 700;
    font-size: 32px;
    margin: 0;
    font-family: 'Noto Sans Devanagari', sans-serif;
}
header{
    padding: 20px 0px;
}
nav ul{
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 15px;
    height: 100%;
    align-items: center;
}

.line-1{
    position: relative;

    width: 12em;
    margin: 0 auto;
    border-right: 2px solid rgba(255,255,255,.75);
    font-size: 32px;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;

    font-weight: 500;
    color: white;
    margin-top:1em;
}


    .line-1 span{
        font-weight: 600;
    color: #4e9eee;
}


/* Animation */
.anim-typewriter{
  animation: typewriter 4s steps(44) 1s 1 normal both,
             blinkTextCursor 500ms steps(44) infinite normal;
}
@keyframes typewriter{
  from{width: 0;}
  to{width: 12em;}
}
@keyframes blinkTextCursor{
  from{border-right-color: rgba(255,255,255,.75);}
  to{border-right-color: transparent;}
}

.first-banner{
    height: 400px;
    background: #1a273d;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
}

.first-banner-subtitle ul {
    list-style: none;
    padding: 0px;
    margin: 0;
}

.first-banner-subtitle ul li{
    color: white;
}

.first-banner-subtitle{
    margin-bottom: -4em;
    margin-top: 1em;
}

.first-banner-subtitle ul li:first-child{
    margin-bottom: .5em;
}

.first-banner-subtitle ul li{
    opacity: 1;
    animation-name: fadeli;
    animation-duration: 10s;

    
}

@keyframes fadeli{
    from{opacity: 0;}
    to{
        opacity: 1;
    }
}

.message{
    padding: 100px 0px;
}

.message img{
    width: 100%;
}


header p{
    margin: 0;
    font-size: 14px;
    font-weight: 500;
    background: #d50e0e;
    color: white;
    padding: 3px 5px;
    border-radius: 3px;
    font-family: 'Noto Sans Devanagari', sans-serif;
}

.message-text{
    margin-top: 2em;
}
.first-banner-content{
        width: 100%;
    color: white;
    text-align: center;
    font-size: 32px;
        text-transform: capitalize;
}

.contact{
            text-align: center;
    padding: 2em 0em;
    font-family: 'Noto Sans Devanagari', 'sans-serif';
    background: hsl(0deg 0% 94%);
}

.contact p{
        font-weight: 600;
    color: #1A263C;
    font-size:20px;
}

.contact h3{
    font-size:32px;
}

@media(max-width:991px){
    .message{
        padding: 50px 0px;
    }
}


@media(max-width:768px){
    .logo{
        font-size: 24px;
    }
    header p{
        font-size: 12px;
    }

    .message img{
        max-height: 550px;
    object-fit: cover;
    margin-bottom: 1em;
    }
    .line-1{
        font-size: 24px;
        width: 8em;
    }
    @keyframes typewriter{
        from{width: 0;}
        to{width: 8em;}
      }
}


@media(max-width:576px){
    .message .row{
        margin: 0;
    }
    .line-1{
        font-size: 20px;
    }
    .first-banner{
        height: 250px;
    }
    .message-text h2{
        font-size: 24px;
    }

    .header-component{
        flex-direction: column;
    }
    header p{
        padding: 0;
        color: #d50e0e;
        background-color: transparent;
        font-size: 11px;
    font-weight: 600;
    
    }
    .first-banner-subtitle{
        margin-bottom: -1em;
    }
    .message-text{
        margin-top:10px;
    }
    .contact h3{
        font-size:24px;
    }
    .contact p{
        font-size:18px;
        margin:0px;
    }
    .first-banner-content{
        font-size: 24px;
    font-weight: 500;
    }
    .line-1{
        margin-top:.5em;
    }
}



@media(max-width:450px){
    .message img{
        max-height:350px;
    }

}


.news{
    margin-bottom:5em;
    text-align:center;
}


.news h2{
    margin-bottom:1em;
}
.news img{
    max-width:100%;
}

.flags{
    text-align:center;
    padding-bottom:3em;
}

.flags h3{
    margin-bottom:1em;
    font-family: 'Noto Sans Devanagari', 'sans-serif';
}

@media(max-width:768px){
    .flags img{
        margin-bottom:3em;
        max-width:100%;
    }
    .flags h3{
        margin-bottom:.5em;
    }
}
