@import url('https://fonts.googleapis.com/css2?family=Work+Sans:wght@300;400;500;600&display=swap');

*{
    margin: 0;
    padding: 0;
    font-family: 'Work Sans', sans-serif;
}

header{
    position:sticky;
    top:0;
    left:0;
    right:0;
    z-index: 1000;
    /* display:flex; */
    align-items: center;
    text-align: center;
    justify-content: space-between;
    padding: 1.7rem 10%;
    background: linear-gradient(90deg,#ff8000,#ffffff,#14c900);
    border-radius: 20px 20px 0px 0px;
    margin: 7px;
}

header .navbar a{
    text-decoration: none;
    color:rgb(29, 26, 215);
    font-size: 2rem;
    font-weight: 500;
    margin: 0.8rem;
}

header .navbar a:hover{
    color:rgb(215, 29, 29);
}

header .icons i{
    font-size: 2.5rem;
    color:rgb(29, 26, 215);
    cursor: pointer;
    margin-right: 2rem;
    margin-left: 2rem;
}

header .icons i:hover{
    color:rgb(215, 29, 29);
}

header .icons #menu-btn{
    display: none;
} 






/* media queries */

@media (max-width:1200px){
    html{
        font-size: 50%;
    }
    
}

@media(max-width:990px){
    .header{
        padding: 2rem;
        /* border-radius: 20px;
        border-bottom-left-radius: 0px;
        border-bottom-right-radius: 0px; */
    }
}

@media(max-width:768px){
    header .icons #menu-btn{
        display: flex;
    }
    .header{
        padding: 2rem;
        /* border-radius: 20px; */
        /* border-radius: 20px 20px 0px 0px ; */
    }

    header .navbar{
        position: absolute;
        top:100%;
        right:0;
        left:0;
        padding:1rem 2rem;
        background: linear-gradient(90deg,#ff8000,#ffffff,#14c900); 
        border-top: 0.1 rem solid rgba(34, 30, 30, 0.2);
        clip-path: polygon(0 0,100% 0,100% 0,0 0);
        text-align: center;
       

    }

    header .navbar.active{
        clip-path: polygon(0 0,100% 0,100% 100%,0 100%);
        border-radius: 0px 0px 20px 20px;
    }

    header .navbar a{
        display: block;
        padding:1rem;
        border-radius: .5rem;
        margin: 1rem 0;
        background: transparent; 
    }

}

@media(max-width:450px){
    html{
        font-size: 30%;
    }
}
 

.lim{
    padding: 20px;
    background: url(../TASK1/Lang.png);
    width: 100%;
    height: 100vh;
    /* display: flex; */
    overflow: hidden;
    background-size: cover !important;
    background-position: center !important;
}

.Container{
    background-color: #ffdcb28f;
    padding: 30px;
    width:100%;
    height:fit-content;
    position: absolute;
    top: 65%;
    left:50%;
    transform: translate(-50%,-50%);
}

.textbox{
    text-align: center;
    font-size: x-large;
}

.ab{
    text-align: center;
    padding: 10px;
    font-size: 50px;
}

.abp{
    border: 2px solid rgb(0, 0, 0);
    border-radius: 20px ;
    padding:30px;
    margin: 10px;
    font-size: 25px;
    /* border-radius: 10px; */
}

.about{
    margin: 20px;
    padding: 10px;
}

.langsec{
    margin: 20px;
    padding: 10px;
}

.langopti{
    text-align: center;
    padding: 10px;
    font-size: 50px;
}

.l-grid{
    padding: 1rem 1%;
}

.l-grid .l-boxcontain{
    margin: 10px 0;
    display:flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

.l-grid .l-boxcontain .l-contain{
    position: relative;
    margin:20px;
    overflow: hidden;
    box-shadow: 0px 20px 30px 9px rgba(182, 178, 178, 0.836);
    border : .7rem solid  rgb(168, 255, 177);
    border-radius: 300px;
    cursor:pointer;
    width:1000px;
    height:300px;
}
.l-grid .l-boxcontain .l-contain .image{
    top:0;
    width:100%;
    height:100%;
    object-fit: cover;
    position: absolute;
}
.l-grid .l-boxcontain .l-contain .contents h2{
    justify-content: center;
    text-align: center;
    color:rgb(0, 0, 0);
    font-size: 30px;
    background: rgb(255, 255, 255);
    padding: 20px;
    bottom:-150%; 
    left:0;
}

.l-grid .l-boxcontain .l-contain .contents p{
    text-align: center;
    color: black;
    font-size: medium;
    background: #fff;
    padding: 10px;
    margin: 7px;
}


.l-grid{
    padding: 1rem 1%;
    grid-template-columns: repeat(auto-fit, minmax(50rem, 1fr));
}

.l-grid .l-boxcontain .l-contain:hover .image{
    transform: translateY(150%);
}

.l-grid .l-boxcontain .l-contain:hover .contents{
    top:0;
}

.box-text .btn{
    align-content: center;
    margin:25px 455px;
    padding:10px;
    border: none;
    color: #fff;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 1px;
    border-radius: 6px;
    background-color: rgba(26, 79, 171, 0.925);
    cursor: pointer;
    transition: all 0.3s ease;
  }

  #a1{
    border : 13px solid rgb(179, 89, 185);
  }

  #b1{
    background-color: rgb(179, 89, 185);
  }

  #b1:hover{
    background-color: rgb(203, 43, 67);
    
  }

  #a2{
    border : 13px solid rgb(18, 206, 231);
    
  }

  #b2{
    background-color: rgb(18, 206, 231);
    
  }
  #b2:hover{
    background-color: rgb(203, 43, 67);
    
  }

  #a3{
    border : 13px solid rgb(74, 213, 76);
    
  }

  #b3{
    background-color: rgb(74, 213, 76);
    
  }
  #b3:hover{
    background-color: rgb(203, 43, 67);
    
  }

  .foot{
    position:sticky;
    top:0;
    left:0;
    right:0;
    z-index: 1000;
    /* display:flex; */
    align-items: center;
    text-align: center;
    justify-content: space-between;
    padding: 1.7rem 10%;
    background: linear-gradient(90deg,#ff8000,#ffffff,#14c900);
    border-radius: 0px 0px 20px 20px;
    margin: 7px;
}
.dismes{
    margin: 100px;
    font-size: 40px;
    color: rgb(212, 0, 0);
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    text-align: center;
}

span{
    animation: blink 1s linear infinite;
}

@keyframes blink{
    0%{opacity: 0;}
    50%{opacity: .5;}
    100%{opacity: 1;}
}

#textthing{
    font-size: 20px;
}

.backlink{
    padding: 10px 20px;
    font-size: large;
}

.fcontent{
    font-size: x-large;
}