*{
    box-sizing: border-box;
    margin: 0;
}

body{
    overflow-x: hidden;
}
:root{
    --scroll-duration: 30s;
    --scroll-gap: 28px;
}

#navbar{
    background-color: #dfdfdf;
    height: 55px;
}

#navlog{
    display: inline;
    position: absolute;
    top: 10px;
    left: 5px;
}

#menu{
    position: absolute;
    top: 10px;
    right: 15px;
    list-style-type: none;
}

#loog{
    width: auto;
    mix-blend-mode: darken;
}

#card1{
    width: auto;
    height: 100%;
    border-radius: 8px;
}

.submenu{
    display: none;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    position: absolute;
    right: 10px;
    top: 10px;
    z-index: 999;
    width: 220px;
    height: 170px;
    background-color: whitesmoke;
    color: #0070f3;
    border: 1px solid #dfdfdf;
    border-radius: 25px;
    padding: 10px;
    list-style-type: none;
}

.it{
    text-decoration: none;
    font-size: x-large;
    color: #26215c;
    font-family: sans-serif;
}

.applyall{
    height: 280px;
    width: 100%;
    display: flex;
    justify-content: space-around;
    font-weight: bolder;
}

.applyinner {
    padding: 6px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-family: sans-serif;
    height: stretch;
    gap: 6px;
}

#txt{
    font-size: 35px;
    font-weight: 100;
}
.in{
    display: flex;
    gap: 20px;
}

#logo{
    height: 280px;
    display: flex;
    justify-content: center;
    align-items: center;
}

#logoimg{
    width: max-content;
    height: 280px;
    border-radius: 5px;
    mix-blend-mode: multiply;
}

#statement{
    color: #5f5e5ad7;
    font-size: x-small;
}

.appl{
    width: 200px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 8px;
    font-size: large;
    transition: all;
    transition-duration: 0.2s;
}

.pos{
    width: 200px;
    height: 40px;
    background-color: #e8effe;
    color: #1a4fd6;
    display: flex;
    align-items: center;
    justify-content: center;
    border:none;
    border-radius: 8px;
    font-size: large;
    transition: all;
    transition-duration: 1s;
}
a{
    text-decoration: none;
    width: fit-content;
}

.maintxt{
    font-size: large;
}

.appl:hover{
    /* border: 2px solid; */
    background-color: black;
    color: #fff;
}

.pos:hover{
    border: 2px solid;
}

.explore{
    height: 30px;
    font-size: large;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}

.find{
    height: 130px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
}

.findcard{
    height: 100px;
    width: 220px;
    border: 2px rgba(26,79,214,0.12) solid;
    border-radius: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 10px;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}

.findcard:hover{
    border: 3px solid #dfdfdf;
}

.view{
    width: 90px;
    height: 30px;
    border-radius: 6px;
    border: none;
    font-size: medium;
}

.view:hover{
    border: 1px solid;
}

.tag{
    padding-left: 15px;
}

#close{
    position:relative;
    left: 80px;
}

.jobs{
    height: 250px;
    display:flex;
    gap: 10px;
    overflow-x:auto;
    scroll-snap-type: x mandatory;
    padding:10px;
    margin-left: 10px;
    height: min-content;
}
.card{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    flex-direction: column;
    min-width: 310px;
    height: 160px;
    background: #fff;
    border: 3px solid #dfdfdf;
    border-radius: 16px;
    flex-shrink: 0;
    scroll-snap-align: start;
    transition: all;
    transition-duration: 0.5s;
}

.jobs::-webkit-scrollbar{
    display: none;
}


ol{
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-items: flex-start;
    margin: 0px;
    padding: 0px;
    font-size: 18px;
    color: black;
}

li{
    list-style-type: none;
}

.card-right{
    display: flex;
    align-items: end;
    justify-content: center;
    flex-direction: column;
    gap: 30px;
}

img{
    height: 50px;
    width: 50px;
    border-radius: 50%;
}

.card:hover{
    transform: translatey(-5px);
    transition: all;
    transition-duration: 0.1s;
    /* box-shadow: 3px 5px 12px rgba(0, 0, 0,0.75); */
}

.foot{
    height: 80px;
    width: 100vw;
    background-color: #dfdfdf;
    color: #2c2c2a;
    display: flex;
    justify-content: center;
    align-items: center;
}

#btn{
    height: 35px;
    width: 90px;
    border-radius: 8px;
    color: #f1efeb;
    border: 1px solid #dfdfdf;
    background-color: #2c2c2a;
    font-size: medium;
}

.about{
    height: 160px;
    width : 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.upmore{
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;   
}

.more{
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    height: 100%;
    width: 60%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 10px;
}

#moreimg{
    height: 100%;
    width: auto;
    border-radius: 1px;
    mix-blend-mode: multiply;
}

.morebtn{
    height: 40px;
    width: 120px;
    border-radius: 8px;
    color: #f1efeb;
    border: 1px solid #dfdfdf;
    background-color: #2c2c2a;
    font-size: medium;
}

#upfoot{
    background-color: whitesmoke;
    color: #2c2c2a;
    width: 100vw;
}

#footlogo{
    position: relative;
    top: 20px;
}

#subfoot{
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 50px;
    font-size: large;
    padding: 10px;
}

ul{
    list-style-type: none;
    padding-left: 1px;
}

.logos{
    display: flex;
    gap: 20px;
    margin-left: 10px;
}

.subhead{
    width: 99%;
    display: flex;
    justify-content: flex-end;
}

@media (min-width: 445px) and (max-width: 850px){
    .applyinner{
        font-size: xxx-large;
        align-items: flex-start;
    }

    .applyall{
        justify-content: space-between;
    }

    #txt{
        font-size: xx-large;
    }

    .appl{
        width: 120px;
    }

    .pos{
        width:120px;
    }
    .find{
        height: fit-content;
        gap: 8px;
    }

    .findcard{
        width: 80%;
    }

    .content{
        width: 80%;
    }

    #logo{
        position: absolute;
        right: 0px;
        top: 105px;
        height: fit-content;
    }    

    #logoimg{
        height: 220px;
    }
}

@media (min-width: 375px) and (max-width:445px){
    .jobs{
        margin-left: 2px;
    }

    .applyall{
        height: 420px;
        flex-direction: column;
    }

    #logo{
        height: 250px;
    }

    #logoimg{
        height: 240px;
    }

    #txt{
        font-size: xx-large;
    }


    .appl{
        width: 160px;
    }

    .pos{
        width: 160px;
    }
    
    .applyinner{
        height: 160px;
    }

    #subfoot{
        gap: 10px;
    }

    .find{
        height: auto;
        gap: 8px;
        flex-wrap: wrap;
    }

    .findcard{
        width: 45%;
    }

    .content{
        width: 80%;
    }
}

@media (min-width: 280px) and (max-width: 375px){
    .jobs{
        margin-left: 2px;
    }

    .applyall{
        height: 450px;
        flex-direction: column;
    }

    .tag{
        padding: 5px;
    }

    .applyinner{
        height: auto;
    }

    .appl{
        width: 120px;
    }

    .pos{
        width: 120px;
    }

    #statement{
        color: #5f5e5ad7;
        font-size: xx-small;
    }

    #txt{
        font-size: 27px;
    }

    #logo{
        height: auto;
    }

    #logoimg{
        width: 305px;
        height: auto;
    }

    .find{
        height: auto;
        gap: 6px;
        flex-wrap: wrap;
    }

    .findcard{
        width: 45%;
    }

    #moreimg{
        height: 80%;
    }

    .more{
        font-size: small;
        gap: 5px;
    }

    .upmore{
        width: 95%;
    }

    .content{
        width: 78%;
    }

    #subfoot{
        gap: 10px;
        font-size: medium;
    }
}