@font-face {
    font-family:oswald;
    src:  url('../../fonts/Oswald-Bold.ttf');
}

:root{
    --darkBackground:rgb(33, 5, 160);
    --contentBackground:rgb(179, 177, 173);
    --borderColor:orangered;
    --color:rgb(255, 255, 255);
    --baseFontSize:30px;
    --activeColor:rgb(3, 156, 3);
    --colorDanger:red;
    --width1-4th:calc(100vw/4);
    --width1-5th:calc(100vw/5);
}
*{
    margin: 0;
    padding: 0;
    color:var(--color) ;
    font-family: oswald;
}


#header{
 
    width: 100%;
    min-height: 50px;
    background: var(--darkBackground);
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    z-index: 1;
    top: 0;
    position: sticky;
   
    justify-content: space-between;
}

.headerItems{
    width: calc(100%/2 - 20px);
    min-height: 30px;
    position: relative;
    display: flex;
    align-items: center;
    
}

.headerItems ul{
    display: block;
    margin: 0;
    padding: 0;
}


.headerItems ul > li > ul{
    display:none;
}

.headerItems ul > li > ul li{
    display:block;
    background: var(--darkBackground);
}

.headerItems ul li{
    display: inline-block;
}

.headerItems ul li a{
    padding: 10px 20px;
    text-decoration: none;
    font-family: oswald;
    color: var(--color);
    display: inline-block;
    font-weight: normal;
    font-size: 15px;
}

ul li a:hover{
    /* text-decoration: double; */
    text-decoration-line: dashed;
    text-decoration-color: rgb(54, 97, 134);
    text-decoration-thickness: 3px;
}

.headerItems ul li:hover ul{
    display: block;
    position: absolute;
}


#banner{
     width: 100%;
    min-height: 150px;
    background: linear-gradient(#2105a069) , url('../../images/horizontal-bg.png');
    background-size: auto,auto 100%;
    /* padding:20px 0px; */
    background-repeat: no-repeat;
    background-position: center;
    background-blend-mode: multiply;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
   
  
   
  
    /* border-bottom: 5px solid var(--borderColor);  */
}

.searchArea{
    width: 80%;
    /* background: red; */
    display: flex;
    align-items: center;
    justify-content: center;
    background: #2105a029;
    backdrop-filter: blur(8px);
    min-height: 100px;
    flex-wrap: wrap;
    /* border: 0.5px solid #eee; */
    margin: 50px auto;
    
}
.searchItemContainer{
width: calc(100%/3 - 20px);
min-height: 50px;
margin: auto 10px;

}
option,input{
    color: #413e3e;
}

 .selectCollege,.selectCompany,.searchText{
font-size: 15px;
color: var(--darkBackground);;
width: 100%;
text-indent: 20px;
border-radius: 0px;
border: none;
min-height: 40px;
background: #fff;;
outline: none;
 border-bottom: 5px solid var(--darkBackground);;
}


.searchText::placeholder{
    color:var(--darkBackground);
}
 .selectCollege:focus,.selectCompany:focus,.searchText:focus{

 border-bottom: 5px solid var(--activeColor);;
}

#contentArea{
     width: 100%;
    min-height: calc(100vh - 50px);
    background: linear-gradient(#808080) , url(../../images/intern-tree.png);
    background-size: auto,50% auto;
    padding: 50px 0px;
    background-repeat: no-repeat;
    background-position: center;
    background-blend-mode: multiply;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    
    background-attachment: fixed;
   
}
.studentItems{
       width: calc(100% / 5 - 20px);
    height: auto;
    margin: 10px;
    display: flex;
    align-items: center;
    justify-content: space-around;
    background: rgb(33 5 160 / 34%);
    flex-wrap: wrap;
    backdrop-filter: blur(3px);
    
    flex-direction: column;
}
.studentItems img{
    width: 100%;
}

.info{
  width: calc(100% / 3 - 20px);
    min-height: 80px;
    margin: 10px;
    display: flex;
    position: relative;
    align-items: center;
    justify-content: flex-start;
    background: rgb(33 5 160 / 34%);
    flex-wrap: nowrap;
    backdrop-filter: blur(3px);
    
    flex-direction: row;
}

.info .icon{
    width: 30%;
    display: inline-flex;
    font-size: 40px;
    align-items: center;
    position: relative;
    min-height: 80px;
    justify-content: center;
    background: var(--darkBackground);
}


.info .index{
     position: absolute;
    left: 24%;
    top: 19%;
    display: inline-flex;
    align-items: center;
    color: red;
    justify-content: center;
    border:1.5px solid rgba(255,255,255,0.5);
    width: 50px;
    height: 50px;
    backdrop-filter: blur(6px);
    background: #2105a08c;
    border-radius: 30px;
}


.info h3{
   
    font-size: 20px;
    margin-left: 30px;


}

/* form in content area */
#contentArea form{
    width: 70%;
    display: flex;
    background: #2105a02b;
    align-items: center;
    backdrop-filter: blur(6px);
    justify-content: flex-start;
    flex-wrap: wrap;
    padding: 40px;
    margin: 0 auto;
    min-height: 50px;

}

#contentArea form .formItem{
    width: calc(100%/2 - 10px);
    position: relative;
    margin: 10px auto;

}


 .formItem input,.formItem select,.formItem textarea{
     display: block;
     width: 100%;
     min-height: 40px;
     border: none;
     outline: none;
     text-indent: 16px;;
     font-size: 15px;
     color: var(--darkBackground);
    
}
.fileLabel{
     text-indent: 15px;
     position: absolute !important;
     display: block;
     top: 6px !important;
     left: 5px;
     width: 100%;
     color: var(--color);
}

.formItem input,.formItem select,.formItem textarea{
     border: 2px solid var(--darkBackground);
    
}

.formItem input[type='file']{
 text-indent: 0px !important;
 color: #fff;
}

.formItem input::file-selector-button{
   
    background-color: var(--darkBackground);
    color: var(--darkBackground);
    border: none;
    height: 36px;
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
    width: 50%;
    outline: none;
}




.formItem input::placeholder,.formItem textarea::placeholder{
    color: var(--darkBackground);
}
.formItem input:focus,.formItem select:focus{
border: 2px solid var(--colorDanger);
}

.submit{
    display: block;
     width: 100%;
     min-height: 40px;
     color: var(--color);
}

.submit button{
   
     width: calc(100%/3);
     min-height: 40px;
     background: var(--darkBackground);
     margin:0 auto;
     display: block;
     border:none;
     outline: none;
}







#pagination{

    padding: 10px 0px;
  
}

#footer{

}

/* responsiveness starts  */
@media only screen and (max-width:800px){
    .headerItems{
        width:100%;
        display: block;
    }

     .headerItems ul li,.headerItems ul li a{
        font-size: 13px;
        padding: 2px;
    }
    .searchItemContainer{
        width: calc(100% - 20px) !important;
        padding:10px 0px;
    }
    .selectCollege,.selectCompany,.searchText{
        font-size: 13px;
    }

    #contentArea form{
    width: 100%;
    }
    #contentArea form .formItem{
    width: calc(100% - 4px);
}

    .formItem input::file-selector-button{
        width: 60%;
        
    }

    .submit button{
   
     width: calc(100%);
}
.info{
  width: calc(100%  - 20px);
}

}

/* responsive part ended */