@import url('https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Fugaz+One&family=Lexend+Tera:wght@100..900&family=Lexend:wght@100..900&family=Michroma&family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Rajdhani:wght@300;400;500;600;700&family=Source+Sans+3:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Teko:wght@300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Figtree:ital,wght@0,300..900;1,300..900&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto:ital,wght@0,100..900;1,100..900&family=Source+Sans+3:ital,wght@0,200..900;1,200..900&display=swap');

@font-face {
    font-family: "mortend light";
    src: url("../fonts/mortend-mortend-light-200.otf");
}

@font-face {
    font-family: "mortend bold";
    src: url("../fonts/mortend-mortend-bold-700.otf");
}

@font-face {
    font-family: "mortend exbold";
    src: url("../fonts/mortend-mortend-extra-bold-800.otf");
}

@font-face {
    font-family: "mortend regular";
    src: url("../fonts/mortend-mortend-regular-400.otf");
}

@font-face {
    font-family: "mortend outline";
    src: url("../fonts/mortend-mortend-outline-800.otf");
}

body {
    padding: 0;
    margin: 0;
    overflow-x: hidden;
}

.page-header {
    width: 100%;
    height: 450px;
    background-image: url("../images/top-bg.jpg");
    background-size: cover;
    position: relative;
    background-position: center;
}

.result-popup {
    width: 100%;
    height: 100vh;
    position: fixed;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #00000058;
    display: none;
}

.result-content {
    width: auto;
    max-width: 90%;
    font-size: 16px;
    font-family: "figtree";
    background-color: white;
    position: relative;
    min-height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.result-content p {
    margin: 0;
    padding: 30px;
}

.close-btn {
    position: absolute;
    right: 10px;
    top: 10px;
    font-size: 18px;
    font-family: "figtree";
    padding: 5px 10px;
    border: 1px solid rgba(0, 0, 0, 0.337);
}

.close-btn:hover {
    color: red;
    cursor: pointer;
}



#loader {
    width: 100vw;
    height: 100vh;
    position: fixed;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #00000094;
    backdrop-filter: blur(2px);
    display: none;
}

#loader img {
    width: 150px;
}

.page-header-overlay {
    width: 100%;
    height: 100%;
    position: absolute;
    background-color: rgba(0, 0, 0, 0.615);
    display: flex;
    align-items: center;
    justify-content: center;
}

.header-content {
    width: 85%;
    height: 90%;
    display: flex;
    align-items: flex-end;
}



@media screen and (min-width:1800px) {
    .header-content {
        width: 70%;
    }
}

.header-h {
    color: white;
    font-family: "Poppins";
    font-size: 40px;
    position: relative;
}

.header-h::after {
    content: "";
    width: 200px;
    height: 1px;
    background-color: #20A1D4;
    position: absolute;
    right: 0;
    bottom: 0;
}

.form-container {
    width: 100%;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: 100px;
}

.nomination-form {
    width: 80%;
    height: auto;
    min-height: 500px;
}

@media screen and (min-width:1800px) {
    .nomination-form {
        width: 70%;
    }
}

.form-instruction {
    margin-top: 80px;
    font-family: "figtree";
}

.award-category {
    margin-top: 40px;
}

.award-category p {
    font-family: "figtree";
    font-weight: 600;
}

.award-category p span {
    color: red;
}

.award-radio-inputs {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
}

.award-radio-input-box {
    display: flex;
    align-items: center;
    width: 33%;
    margin: 10px 0px;
    gap: 5px;
}

.award-radio-input-box label {
    font-family: "figtree";
}

.nominee-details {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-top: 80px;
}

.nominee-input-box {
    display: flex;
    flex-direction: column;
    width: 48%;
    margin: 10px 0px;
}

.nominee-input-box label {
    font-family: "figtree";
}

.nominee-input-box label span {
    color: red;
}

.nominee-input-box input {
    width: 100%;
    border: 1px solid rgba(0, 0, 0, 0.104);
    padding: 10px;
    height: 20px;
    margin-top: 8px;
    background-color: aliceblue;
    border-radius: 5px;
}

.nominee-input-box select {
    width: 100%;
    border: 1px solid rgba(0, 0, 0, 0.104);
    padding: 10px;
    height: 40px;
    margin-top: 8px;
    background-color: aliceblue;
    border-radius: 5px;
    width: 101.5%;
}

#phone {
    height: 40px;

}

.iti {
    margin-top: 8px;
    width: 104%;
}

.nominee-other-detail {
    width: 100%;
}

.nominee-other-detail .nominee-input-box {
    width: 100%;
}

.nominee-other-detail .nominee-input-box textarea {
    width: 100%;
    border: 1px solid rgba(0, 0, 0, 0.104);
    padding: 10px;
    margin-top: 8px;
    background-color: aliceblue;
    border-radius: 5px;
}

.nominee-input-detail {
    font-family: "figtree";
    font-weight: 300;
}

.nib2 {
    margin-top: 20px;
}

.ownership {
    margin-top: 60px;
    font-family: "figtree";
    font-weight: 800;
}

.ownership-input-box {
    display: flex;
    flex-direction: column;
}

.ownership-input-box input {
    margin-top: 5px;
    width: 100%;
}

.ownership-input-box label {
    font-family: "figtree";
}

.ownership-input-box label span {
    color: red;
}

.ownership-input-box textarea {
    width: 101.5%;
    padding: 0;
    height: 60px;
    margin-top: 20px;
    background-color: aliceblue;
    border: 1px solid rgba(0, 0, 0, 0.144);
    border-radius: 5px;
}


.checks {
    display: flex;
    gap: 4px;
    margin-top: 10px;
}

.checks1 {
    margin-top: 30px;
}

.checks label {
    font-family: "figtree";
}

.checks label span {
    color: red;
}

.space {
    height: 40px;
}

.guidlines-h {
    font-family: "Source Sans 3";
    font-weight: 800;
    color: rgba(0, 0, 0, 0.581);
}

.guidlines-p {
    font-family: "Source Sans 3";
    color: rgba(0, 0, 0, 0.597);
}

.submit-button {
    background-color: black;
    color: white;
    font-family: "bebas neue";
    padding: 10px 30px;
    border: none;
    font-size: 20px;
    margin-top: 20px;
    cursor: pointer;
}

.submit-button:hover {
    background-color: rgb(188, 188, 188);
    color: black;
}

/* speakers */
.speakers-boxes {
    width: 80%;
    height: auto;
    min-height: 80vh;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1vw;
    flex-wrap: wrap;
    padding-bottom: 5vw;
}

.speaker-box {
    width: 19vw;
    height: 25vw;
    background-color: #191919;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 3vw;
    overflow: hidden;
    position: relative;
}

.speaker-box::after {
    content: "";
    width: 2vw;
    height: 2vw;
    background: #d37828;
    transform: rotate(45deg);
    right: -1vw;
    position: absolute;
    bottom: -1vw;
}

.speaker-box:hover .speaker-img-box {
    background: #d37828;
}

.speaker-img-box {
    width: 16vw;
    height: 16vw;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: #d37828;
    margin-top: 1.5vw;
    position: relative;
}

.spk-img {
    width: 100%;
    position: relative;
    transform: translate(0vw, 1vw);
}

.spk-img2 {
    position: absolute;
    opacity: 0.1;
    margin-left: 3vw;
    transform: translate(0vw, 1vw);
}

.spk-cont {
    width: 100%;
    min-height: 7vw;
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0.1vw;
    line-height: 1.2vw;
}

.spk-name {
    color: white;
    font-size: 0.9vw;
    text-transform: uppercase;
    font-family: "mortend light";
    text-align: center;
}

.spk-job {
    color: white;
    font-family: "Source Sans 3";
    font-size: 1vw;
    font-weight: 300;
    text-align: center;
}

.spk-company {
    color: white;
    font-family: "Source Sans 3";
    font-weight: 500;
    font-size: 1vw;
    text-align: center;
    width: 98%;
}

/* footer */
a {
    text-decoration: none;
}

#footer {
    width: 100%;
    height: auto;
    background: #004449;
    display: flex;
    align-items: center;
    justify-content: center;
    border-top: 0.2vw solid #20A1D4;
    background-color: rgb(24, 6, 4);
}

.footerContainer {
    display: flex;
    justify-content: center;
    width: 80%;
    align-items: center;
}

@media screen and (min-width:1800px) {
    .footerContainer {
        width: 70%;
    }
}

.fLeft {
    width: 50%;
    height: 100%;
    display: flex;
    flex-direction: row;
    gap: 0.8vw;
}

.fMails {
    width: 12vw;
    height: 1.8vw;
    display: flex;
    border: 1.5px solid white;
    justify-content: center;
    align-items: center;
    color: white;
    border-radius: 20px;
    cursor: pointer;
}

.fUp {
    display: flex;
    gap: .7vw;
}

.fRight {
    width: 50%;
    height: 10vw;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 2vw;
}

.s-f {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1vw;
    position: relative;
}





.fUp div {
    width: 2vw;
    height: 2vw;
    border-radius: 25px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1.5px white solid;
    transition: all ease .4s;
}

.fUp div:hover {
    transform: translateY(-3px);
    background-color: #20A1D4;
    border: 1.5px #20A1D4 solid;
    color: black;

}

.fUp div:hover .fLinks {
    color: #fff;
}

.fLinks {
    font-size: 1.25vw;
    padding-top: 0.1vw;
    color: #fff;
}

.fCopy {
    color: white;
    font-family: 'Montserrat';
    font-size: 0.8vw;
    font-weight: 400;
}

.fCopy span a {
    font-weight: 600;
    color: white;
    text-decoration: none;
}

.foot-l {
    width: 70%;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: space-around;
    margin: 1.5vw 0vw;
}

.org-h {
    font-family: "figtree";
    color: white;
}

.org-img {
    width: 100px;
    margin-top: 10px;
}

@media screen and (max-width:766px) {
    .header-h {
        font-size: 30px;
    }

    .award-radio-input-box {
        width: 100%;
        margin: 15px 0px;
    }

    .nominee-input-box {
        width: 94%;
    }

    .iti {
        width: 106%;
    }

    #profile_picture {
        width: 92%;
    }

    .nominee-other-detail .nib2 {
        width: 96%
    }

    .checks {
        align-items: flex-start;
    }

    /* footer */
    .footerContainer {
        flex-direction: column;
    }

    .fLeft {
        width: 100%;
        padding: 4vw 0vw;
    }

    .fRight {
        height: auto;
        width: 100%;
        justify-content: center;
        padding-bottom: 5vw;
    }

    .fUp div {
        width: 6vw;
        height: 6vw;
    }

    .fLinks {
        font-size: 3vw;
    }

    .fCopy {
        font-size: 2.1vw;
    }
}

@media screen and (max-width: 1024px) and (min-width: 768px) {
    .award-radio-input-box {
        width: 45%;
        margin: 15px 0px;
    }

    .nominee-input-box {
        width: 94%;
    }

    #profile_picture {
        width: 94%;
    }

    .nominee-other-detail .nib2 {
        width: 96%
    }

    .checks {
        align-items: flex-start;
    }

    /* footer */
    .footerContainer {
        flex-direction: column;
    }

    .fLeft {
        width: 100%;
        padding: 4vw 0vw;
    }

    .fRight {
        height: auto;
        width: 100%;
        justify-content: center;
        padding-bottom: 5vw;
    }

    .fUp div {
        width: 5vw;
        height: 5vw;
    }

    .fLinks {
        font-size: 2vw;
    }

    .fCopy {
        font-size: 1.8vw;
    }
}