﻿/* careers hero section starts here*/

#careers-hero-section .navbar-brand, #careers-hero-section .nav-link, #careers-hero-section .nav-link.active {
    color: white;
}

#careers-hero-section {
    position: relative;
    gap: 0;
}

    #careers-hero-section .banner-img {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        z-index: -2;
    }

        #careers-hero-section .banner-img img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        #careers-hero-section .banner-img::after {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            background: linear-gradient(96.12deg, #0051C8 16.46%, rgba(13, 110, 253, 0.1) 70.26%);
            height: 100%;
            width: 100%;
        }

    #careers-hero-section .content-section {
        max-width: 466px;
        width: 100%;
        padding: 121px 0 75px 0;
        margin-left: 215px;
    }

        #careers-hero-section .content-section h1 {
            font-size: 56px;
            line-height: 1.25em;
            font-weight: 700;
            color: white;
        }

        #careers-hero-section .content-section p.desc {
            margin-top: 25px;
            margin-bottom: 25px;
            font-size: 24px;
            line-height: 1.334em;
            color: #E4EFFF;
        }

    #careers-hero-section .btn.btn-black {
        background-color: #17263B;
        border: 1px solid #17263B;
    }



/* join team section starts here */

#joinTeam {
    display: grid;
    gap: 48px;
}

    #joinTeam .team-cards-container {
        --bs-gutter-x: 30px;
        --bs-gutter-y: 30px;
    }

        #joinTeam .team-cards-container .team-card {
            height: 100%;
            width: 100%;
            border: 1px solid #0D6EFD;
            background: #F3F8FF;
            border-radius: 35px;
            padding: 10px 10px 31px;
            text-align: center;
            color: #424446;
        }

            #joinTeam .team-cards-container .team-card img {
                aspect-ratio: 1.63;
                border-radius: 30px;
                object-fit: cover;
                margin-bottom: 23px;
                width: 100%
            }

            #joinTeam .team-cards-container .team-card h1 {
                font-size: 24px;
                font-weight: 700;
                line-height: 1.333em;
                margin-bottom: 10px;
            }

            #joinTeam .team-cards-container .team-card p {
                font-size: 18px;
                line-height: 1.667em;
            }


/*openings section starts here*/

#openings {
    background: #F3F8FF;
    display: flex;
    gap: 55px;
    flex-direction: column;
    align-items: center;
}

section#openings .swiper-btns {
    position: relative;
    height: 35px;
    width: 85px;
}


section#openings .swiper-button-next,
section#openings .swiper-button-prev {
    border: 2px solid black !important;
    border-radius: 50%;
    height: 34px;
    width: 34px;
    right: 0;
}

    section#openings .swiper-button-next:after,
    section#openings .swiper-button-prev:after {
        font-size: 14px;
        color: black;
        font-weight: 900;
    }

section#openings .swiper-slide {
    box-shadow: 0px 0px 9px 2px #0000000D;
    border-radius: 10px;
    padding: 41px 28px 46px;
    text-align: center;
    font-size: 18px;
    background: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: start;
    gap: 28px;
}

    section#openings .swiper-slide .icon {
        background: #0D6EFD;
        width: 62px;
        aspect-ratio: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 10px;
        margin-bottom: 13px;
    }

        section#openings .swiper-slide .icon img {
            height: 28px;
            aspect-ratio: 1
        }


    section#openings .swiper-slide .details{
        width: 100%;
        text-align: start;
        display: grid;
        gap: 17px;
    }

    section#openings .swiper-slide h5 {
        color: #213344;
        font-size: 20px;
        line-height: 1.6em;
        letter-spacing: 0.01em;
        text-transform: uppercase;
    }

    section#openings .swiper-slide p.loaction {
        color: #424446;
        font-size: 16px;
        font-weight: 300;
        line-height: 1.5em;
        letter-spacing: 0.01875em;
    }

    section#openings .swiper-slide .btn {
        background: #0D6EFD;
        padding: 15px 30px;
        font-size: 16px;
        font-weight: 500;
        line-height: 1.375em;
        color: #FBFDFD;
    }


    /*application section starts here*/

#application{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 48px;
}

#jobapplication {
    width: 100%;
    max-width: 850px;
    border: 1px solid #D8D8D8;
    padding: 28px;
    border-radius: 14px;
    font-family: "Roboto", sans-serif;
}

.appForm {
    color: #171717;
    display: grid;
    gap: 14px;
}

.appForm h1.title {
    background: #F3F8FF;
    border-radius: 10px;
    padding: 10px 20px;
    border-bottom: 1px solid #0E6EFD;
    font-size: 24px;
    margin-bottom: 31px;
    font-weight: 900;
}

.appForm .col-auto{
    width: 232px;
    font-weight: 600;
    font-size: 20px;
    line-height: 1.15em;
    display: flex;
    align-items: center;
}

    .appForm .col-auto span {
        color: #FF1010;
    }

    .appForm .form-control {
        border: 0.5px solid #0000001A;
        background: #FAFAFA;
        border-radius: 5px;
        min-height: 38px;
    }

    .appForm input.form-control[type="date"] {
        padding: 0 0 0 12px;
    }

        .appForm input.form-control[type="date"]::-webkit-calendar-picker-indicator {
            background-color: #D1D8DF;
            height: 38px;
            width: 38px;
            background-size: 22px;
            background-image: url('data:image/svg+xml;utf8,<svg width="21" height="23" viewBox="0 0 21 23" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M10.5 13.3333C10.1852 13.3333 9.92148 13.2267 9.70889 13.0133C9.49556 12.8007 9.38889 12.537 9.38889 12.2222C9.38889 11.9074 9.49556 11.6433 9.70889 11.43C9.92148 11.2174 10.1852 11.1111 10.5 11.1111C10.8148 11.1111 11.0789 11.2174 11.2922 11.43C11.5048 11.6433 11.6111 11.9074 11.6111 12.2222C11.6111 12.537 11.5048 12.8007 11.2922 13.0133C11.0789 13.2267 10.8148 13.3333 10.5 13.3333ZM6.05556 13.3333C5.74074 13.3333 5.47667 13.2267 5.26333 13.0133C5.05074 12.8007 4.94444 12.537 4.94444 12.2222C4.94444 11.9074 5.05074 11.6433 5.26333 11.43C5.47667 11.2174 5.74074 11.1111 6.05556 11.1111C6.37037 11.1111 6.63445 11.2174 6.84778 11.43C7.06037 11.6433 7.16667 11.9074 7.16667 12.2222C7.16667 12.537 7.06037 12.8007 6.84778 13.0133C6.63445 13.2267 6.37037 13.3333 6.05556 13.3333ZM14.9444 13.3333C14.6296 13.3333 14.3659 13.2267 14.1533 13.0133C13.94 12.8007 13.8333 12.537 13.8333 12.2222C13.8333 11.9074 13.94 11.6433 14.1533 11.43C14.3659 11.2174 14.6296 11.1111 14.9444 11.1111C15.2593 11.1111 15.523 11.2174 15.7356 11.43C15.9489 11.6433 16.0556 11.9074 16.0556 12.2222C16.0556 12.537 15.9489 12.8007 15.7356 13.0133C15.523 13.2267 15.2593 13.3333 14.9444 13.3333ZM10.5 17.7778C10.1852 17.7778 9.92148 17.6711 9.70889 17.4578C9.49556 17.2452 9.38889 16.9815 9.38889 16.6667C9.38889 16.3519 9.49556 16.0881 9.70889 15.8756C9.92148 15.6622 10.1852 15.5556 10.5 15.5556C10.8148 15.5556 11.0789 15.6622 11.2922 15.8756C11.5048 16.0881 11.6111 16.3519 11.6111 16.6667C11.6111 16.9815 11.5048 17.2452 11.2922 17.4578C11.0789 17.6711 10.8148 17.7778 10.5 17.7778ZM6.05556 17.7778C5.74074 17.7778 5.47667 17.6711 5.26333 17.4578C5.05074 17.2452 4.94444 16.9815 4.94444 16.6667C4.94444 16.3519 5.05074 16.0881 5.26333 15.8756C5.47667 15.6622 5.74074 15.5556 6.05556 15.5556C6.37037 15.5556 6.63445 15.6622 6.84778 15.8756C7.06037 16.0881 7.16667 16.3519 7.16667 16.6667C7.16667 16.9815 7.06037 17.2452 6.84778 17.4578C6.63445 17.6711 6.37037 17.7778 6.05556 17.7778ZM14.9444 17.7778C14.6296 17.7778 14.3659 17.6711 14.1533 17.4578C13.94 17.2452 13.8333 16.9815 13.8333 16.6667C13.8333 16.3519 13.94 16.0881 14.1533 15.8756C14.3659 15.6622 14.6296 15.5556 14.9444 15.5556C15.2593 15.5556 15.523 15.6622 15.7356 15.8756C15.9489 16.0881 16.0556 16.3519 16.0556 16.6667C16.0556 16.9815 15.9489 17.2452 15.7356 17.4578C15.523 17.6711 15.2593 17.7778 14.9444 17.7778ZM2.72222 22.2222C2.11111 22.2222 1.58778 22.0048 1.15222 21.57C0.717407 21.1344 0.5 20.6111 0.5 20V4.44444C0.5 3.83333 0.717407 3.31037 1.15222 2.87556C1.58778 2.44 2.11111 2.22222 2.72222 2.22222H3.83333V0H6.05556V2.22222H14.9444V0H17.1667V2.22222H18.2778C18.8889 2.22222 19.4122 2.44 19.8478 2.87556C20.2826 3.31037 20.5 3.83333 20.5 4.44444V20C20.5 20.6111 20.2826 21.1344 19.8478 21.57C19.4122 22.0048 18.8889 22.2222 18.2778 22.2222H2.72222ZM2.72222 20H18.2778V8.88889H2.72222V20Z" fill="white"/> </svg> '); background-position: center;
        }

    .appForm .form-group{
        margin-bottom: 20px;
    }

    .appForm .btn.uploadFile {
        position: absolute;
        right: 0;
        top: 0;
        border-top-right-radius: 5px !important;
        border-bottom-right-radius: 5px !important;
        background-color: #D1D8DF;
        height: 38px !important;
        width: 38px;
        background-size: 22px;
        background-position: center;
        background-repeat: no-repeat;
        background-image: url('data:image/svg+xml;utf8,<svg width="23" height="22" viewBox="0 0 23 22" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M7.881 6.28052L10.4 3.75052V14.2995C10.4 14.5913 10.5159 14.871 10.7222 15.0773C10.9285 15.2836 11.2083 15.3995 11.5 15.3995C11.7917 15.3995 12.0715 15.2836 12.2778 15.0773C12.4841 14.871 12.6 14.5913 12.6 14.2995V3.75052L15.119 6.28052C15.2213 6.38362 15.3429 6.46546 15.477 6.5213C15.611 6.57715 15.7548 6.6059 15.9 6.6059C16.0452 6.6059 16.189 6.57715 16.323 6.5213C16.4571 6.46546 16.5787 6.38362 16.681 6.28052C16.7841 6.17826 16.8659 6.0566 16.9218 5.92255C16.9776 5.78851 17.0064 5.64473 17.0064 5.49952C17.0064 5.35431 16.9776 5.21053 16.9218 5.07649C16.8659 4.94244 16.7841 4.82078 16.681 4.71852L12.281 0.31852C12.1764 0.218375 12.053 0.139874 11.918 0.0875197C11.6502 -0.0225001 11.3498 -0.0225001 11.082 0.0875197C10.947 0.139874 10.8236 0.218375 10.719 0.31852L6.319 4.71852C6.21644 4.82108 6.13508 4.94284 6.07957 5.07685C6.02407 5.21085 5.9955 5.35448 5.9955 5.49952C5.9955 5.64457 6.02407 5.78819 6.07957 5.92219C6.13508 6.0562 6.21644 6.17796 6.319 6.28052C6.42156 6.38308 6.54332 6.46444 6.67733 6.51995C6.81133 6.57545 6.95496 6.60402 7.1 6.60402C7.24505 6.60402 7.38867 6.57545 7.52268 6.51995C7.65668 6.46444 7.77844 6.38308 7.881 6.28052ZM21.4 10.9995C21.1083 10.9995 20.8285 11.1154 20.6222 11.3217C20.4159 11.528 20.3 11.8078 20.3 12.0995V18.6995C20.3 18.9913 20.1841 19.271 19.9778 19.4773C19.7715 19.6836 19.4917 19.7995 19.2 19.7995H3.8C3.50826 19.7995 3.22847 19.6836 3.02218 19.4773C2.81589 19.271 2.7 18.9913 2.7 18.6995V12.0995C2.7 11.8078 2.58411 11.528 2.37782 11.3217C2.17153 11.1154 1.89174 10.9995 1.6 10.9995C1.30826 10.9995 1.02847 11.1154 0.822183 11.3217C0.615892 11.528 0.5 11.8078 0.5 12.0995V18.6995C0.5 19.5747 0.847678 20.4141 1.46655 21.033C2.08542 21.6518 2.92479 21.9995 3.8 21.9995H19.2C20.0752 21.9995 20.9146 21.6518 21.5335 21.033C22.1523 20.4141 22.5 19.5747 22.5 18.6995V12.0995C22.5 11.8078 22.3841 11.528 22.1778 11.3217C21.9715 11.1154 21.6917 10.9995 21.4 10.9995Z" fill="white"/> </svg> ')
    }

        .appForm .btn.uploadFile:focus{
            box-shadow: none;
        }

        .appForm button[type="submit"] {
            padding: 9px 20px;
            line-height: 1.375em;
            height: auto;
            color: white;
            font-weight: 400;
            background: #0E6EFD;
        }

@media (max-width: 1500px) {
    #careers-hero-section .content-section {
        margin-left: 70px;
    }
}


@media (max-width: 750px) {

    section:not(:first-child) {
        gap: 40px !important;
    }


    #careers-hero-section {
        display: flex;
        height: calc(100dvh - 50px);
        max-height: 900px;
        flex-direction: column;
        justify-content: center;
    }

        #careers-hero-section .content-section {
            margin-left: 0px;
            padding: 0px 0 45px 20px;
        }

            #careers-hero-section .content-section h1 {
                font-size: 45px;
            }

    #joinTeam .team-cards-container .team-card h1{
        font-size: 19px;
    }

    #joinTeam .team-cards-container .team-card p{
        font-size: 14.4px;
    }

    section#openings .swiper-slide{
        gap: 14px;
        font-size: 14.4px;
    }

        section#openings .swiper-slide .icon{
            width: 49px;
            margin-bottom: 0
        }

            section#openings .swiper-slide .icon img{
                height: 22px;
            }

        section#openings .swiper-slide h5{
            font-size: 18px;
        }

        section#openings .swiper-slide .details {
            gap: 10px;
        }

    #jobapplication {
        border: none;
        padding: 0;
    }

    .appForm h1.title {
        padding: 7px 14px;
        border-bottom: 1px solid #0E6EFD;
        font-size: 19px;
        margin-bottom: 15px;
    }

    .appForm .col-auto {
        width: 100%;
        font-size: 16px;
        margin-bottom: 5px;
        font-weight: 500;
    }
}
