*{
        padding: 0;
        margin: 0;
        box-sizing: border-box;
}
::-webkit-scrollbar {
        width: 10px;

}

::-webkit-scrollbar-track{
        box-shadow: inset 0 0 10px #0000002c;
        border-radius: 5px;
}

::-webkit-scrollbar-thumb {
        background: #009578;
        border-radius: 5px;
        height: 90px;
}

::-webkit-scrollbar-thumb:hover {
        background: #009577b9;
}
       
html{
        scroll-behavior: smooth;
}

:root{
        --font--: pt sans caption;
        --text--: tamil mn;
}

.none{
        display: none;
}

ul li{
        list-style: none;
}

a{
        text-decoration: none;
}

.row{
        display: flex;
        flex-wrap: wrap;
}

.ai-c{
        align-items: center;
}

.js-b{
        justify-content: space-between;
}

.js-a{
        justify-content: space-around;
}

.col-6{
        width: 50%;
}

.col-55{
        width: 45%;
        text-align: center;
}

.col-25{
        width: 25%;
        text-align: center;
}

.menuTaggle img{
       padding-top: 7px; 
       width: 30px;
       transition: .6s ease all;
       display: block;
       cursor: pointer;
}

.sticky{
        background: rgba(0, 0, 0, 0.911);
        transition: 1s ease all;
        box-shadow: 10px 3px 5px #ffffff61;
}

.loader{
        background: linear-gradient(#002d42,#00aeff);
        width: 100%;
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items:center;
        z-index: 100;
        position: fixed;
        transition: .6s all ease;
}

.ring{
        width: 100%;
        display: flex;
        align-items: center;
        animation: loaded 5s ease infinite;
        justify-content: center;
}

@keyframes loaded {
        0%,100%{
                transform: rotateZ(0deg);
        }

        50%{
                transform: rotateZ(360deg);
        }
}

.container{
        width: 93%;
        margin: 0 auto;
}

.closeBtn{
        font-size: 60px;
        color: #fff;
        margin-left: 50px;
        cursor: pointer;
        color: red;
        font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}

header{
        padding-bottom: 50px;
        height: 790px;
        position: relative;
        overflow: hidden;
        background:linear-gradient(#0000006b,#23232356) , url(../img/background.jpeg) no-repeat;
        background-size: 100% 100%;
}

nav{
        position: fixed;
        width: 100%;
        z-index: 99;
        background-color: #00000050;
        transition: 1s ease all;
        padding:10px 0;
}

.logo a {
        align-items: center;
}

.logo img{
        width: 50px;
}

.logo h3{
        font-family: var(--font--);
        color: #fff;
        font-size: 31px;
        margin-left: 5px;
}


.ulList{
        transition: .6s ease all;
}

.ulList a li{
        color: #e6e6e6;
        padding: 30px;
        font-family: var(--text--);
        text-transform: capitalize;
        transition: .6s ease all;
        text-align: center;
        position: relative;
        font-size: 20px;
}

.ulList a li:hover{
        color: #ffffff;
        text-shadow: 3px 3px 3px #1010104f;
}

.ulList a li::before{
        content: '';
        position: absolute;
        border-bottom: 2px solid #00fbff;
        width: 0;
        transition: .6s ease all;
        bottom: 15px;
}

.ulList a li:hover::before{
        width: 30px;
}

.banner{
        position: relative;
        width: 100%;
        height: 100%;
}

.banner-text{
        transform: translateY(-50% , -50%);
        position: relative;
        width: 100%;
        height: 200px;
        margin: auto;
}

.title{
        color: #fff;
        font-size: 31px;
        font-family: var(--font--);
        text-transform: capitalize;
        padding: 20px 0;
        text-align: center;
}

.text{
        line-height: 40px;
        color: #fff;
        font-size: 24px;
        font-family: var(--text--);
        margin: 30px 0;
}

.animation{
        margin: 10px 0;
        display: flex;
        width: 320px;
        overflow: hidden;
        flex-wrap: nowrap;
        margin: 0 auto;
}


.animation-item{
        color: #fff;
        font-family: var(--font--);
        text-align: center;
        text-transform: capitalize;
        margin-right: 120px;
        font-size: 33px;
}


.img img{
        width: 100%;
}

.animation-item:nth-child(1){
        animation: marquee 6.3s ease infinite;
        
}

@keyframes marquee {
        0%{
                margin-left: 0px;
        }

        25%{
                margin-left: -300px;
        }

        50%{
                margin-left: -610px;
        }

        75%{
                margin-left: -300px;
        }

        100%{
                margin-left: 0;
        }
}

.button{
        padding: 15px 36px;
        background: #fff;
        border-radius: 5px;
        font-family: var(--text--);
        color: rgb(0, 0, 0);
        text-transform: capitalize;
        transition: .6s ease all;
        font-size: 20px;
}

.button:hover{
        font-size: 23px;
}