@import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Inter", sans-serif !important;
}

p, ul, h1, h2, h3, h4 {
    max-width: 100% !important;
}

p, ul{
    font-size: 18px !important;
    font-weight: 400 !important;
    font-family: "Inter", sans-serif !important;
}



.jobb-container h1 {
    font-family: Raleway, sans-serif !important;
    font-weight: 700;
    font-size: 32px;
    line-height: 120%;
    letter-spacing: 0%;
    padding: 30px 0;
}

/*gravity form*/
.gformMain .gform_wrapper.gravity-theme .gfield--type-radio .gfield_label,
.gformMain .gform_wrapper.gravity-theme .gfield--type-checkbox .gfield_label {
    font-size: 30px !important;
    font-family: "Raleway", sans-serif !important;
    font-weight: 700 !important;
    color: #171717 !important;
    text-transform: uppercase !important;
    line-height: 3;
}

.gform_wrapper.gravity-theme .gsection{
    border-bottom: 4px solid #171717 !important;
    width: 50px !important;
    padding: 0 !important;
    margin-top: 20px;
    margin-bottom: 20px;
}

.gsection_title{
    font-size: 30px !important;
    text-transform: uppercase !important;
    color: #171717 !important;
    font-weight: 700 !important;

}

.gformMain .gform_fields .no-border{
    border: none !important;
    min-width: 100% !important;
    border-bottom: 0px solid #171717 !important;
    margin-bottom: -6px !important;

}

.gformMain  input[type="radio"],
.gformMain input[type="checkbox"] {
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    display: inline-block !important;
    cursor: pointer !important;
    background-color: white !important;
    position: relative !important;
}


.gformMain .gchoice input[type="radio"] {
    width: 40px;
    height: 40px;
    border: 3px solid #7ED321 !important;
    border-radius: 50%;
}

.gformMain .gchoice input[type="radio"]:checked::before {
    content: "";
    width: 28px;
    height: 28px;
    background-color: #7ED321;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.gformMain .gchoice input[type="checkbox"] {
    width: 40px;
    height: 40px;
    border: 3px solid #7ED321;
    border-radius: 5px;
}

.gformMain .gchoice input[type="checkbox"]:checked::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 24px;
    height: 24px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237ED321' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    transform: translate(-50%, -50%);
}

input[type="text"],
input[type="email"],
input[type="tel"],
textarea {
    width: 100%;
    padding: 0.8rem;
    margin-bottom: 1rem;
    border: 2px solid #7ED321;
    border-radius: 4px;
    font-size: 18px;
}

.gfield--type-text label,
.gfield--type-email label,
.gfield--type-textarea label,
.gfield--type-phone label{
    font-family: "Inter", sans-serif !important;
    font-weight: 400 !important;
    font-size: 12px !important;
    color: #171717 !important;
}
.gfield--type-fileupload label{
    font-family: "Raleway", sans-serif !important;
    font-weight: 700 !important;
    font-size:30px !important;
    text-transform: uppercase !important;
}
textarea{
    height: 100px !important;
}

.gform-field-label--type-inline{
    font-family: "Raleway", sans-serif !important;
    font-weight: 700 !important;
    font-size:18px !important;
    line-height: 4;
    padding-left: 5px !important;
}

/*button*/
.gform_drop_area button{
    display: none !important;
}

.gform-footer input[type="submit"] {
    background-color: transparent;
    color: #7ED321;
    padding: 10px 61px;
    border-radius: 33px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    border: 2px solid #7ED321;

    font-family: "Raleway", sans-serif !important;
    font-weight: 700 !important;
    font-size:18px !important;
    margin-top: 40px;
}

.gform-footer input[type="submit"]:hover {
    background-color: #6bc20d;
    color: white;
}

.dashicons, .dashicons-before:before{
    font-family: dashicons !important;
}

.gform_confirmation_message{
    border: 3px solid #6bc20d;
    padding: 20px;
    margin-top: 50px;
}
/*gravity form end */



.w-container {
    margin-left: auto;
    margin-right: auto;
    max-width: 1000px;
    padding: 15px;
}


/* header content css  */
.header_forside {
    height: 75vh;
    background-color: transparent;
    /*background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.6) 10%, rgba(0, 0, 0, 0.3) 60%, transparent 100%), url(./Images/background.webp);*/
    background-position: 0px 0px, 50% 100%;
    background-size: auto, cover;
    background-repeat: repeat, no-repeat;
}


.header_forside .headerContainer {
    height: 100%;
}

.header_forside .headerContent {
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: space-between;
}

.header_forside .headerContent .jobb-header {
    max-width: 650px;
    margin-bottom: 50px;
}

.header_forside .headerContent .jobb-header .jobb-heading {
    font-family: "Releway", sans-serif;
    color: white;
    font-family: Raleway;
    font-weight: 800;
    font-size: 60px;
    line-height: 60px;
    letter-spacing: 0%;
    vertical-align: bottom;
    text-transform: uppercase;

}

.header_forside .headerContent .logo {
    width: 220px;
    margin-top: 30px;
}

@media (max-width: 480px) {
    .header_forside .headerContent .logo {
        width: 150px;
    }

    .header_forside .headerContent .jobb-header .jobb-heading {
        font-size: 27px;
        line-height: 27px;
    }

    .header_forside {
        height: 60vh;
    }

}

/* header content css end  */

/* job caontainer */

.jobb-container .jobb-header {
    max-width: 800px;
}

.jobb-container .jobb-header .jobb-heading {
    font-family: Raleway;
    font-weight: 700;
    font-size: 32px;
    line-height: 120%;
    letter-spacing: 0%;
    padding: 30px 0;

}

.jobb-container .jobb-header .jobContant {
    max-width: 600px;
}

.jobb-container .jobb-header p,
.jobb-container .jobb-header h1 {
    margin: 0;
}

.jobb-container .jobb-header .list-jobb li a {
    color: black;

}

.jobb-container .jobb-header .list-jobb li a:hover {
    color: rgb(38, 2, 197);
}

.jobb-container .jobb-header .images {
    display: block;
    width: 100%;
    max-width: 100%;
    height: 500px;
    padding: 20px  0;
}

.jobb-container .jobb-header .images img {
    height: auto;
    max-width: 100%;
}


.x1 {
    width: 50% !important;
}

.x1,
.x2,
.x3,
.x4 {
    margin: 0 !important;
    float: left !important;
}

.x2 {
    width: 49.5% !important;
    float: right !important;
}

.x3,
.x4 {
    width: 25% !important;
    border-left: 4px solid white !important;
    border-top: 5px solid white !important;
}

.x3,
.x4 {
    width: 25% !important;
    border-left: 4px solid white !important;
    border-top: 5px solid white !important;
}

@media (max-width: 480px) {
    .jobb-container .jobb-header .jobb-heading {
        font-size: 24px;
        font-weight: 700;
    }

    .x1{
        width: 100% !important;
    }

    .x2{
        width: 100% !important;
    }

    .x3, .x4{
        width: 50% !important;
        border-left: 0px solid white !important;
        border-top: 0px solid white !important;
    }
}

/* hob content end  */

/* form area  */

.gformMain .gformBody {
    list-style: none;
    padding: 0;
    margin: 0;
    margin-bottom: 50px;
}

.gformMain .gformBody .job-subtitle {
    font-size: 32px;
    font-family: "Raleway", sans-serif;
    font-weight: 700;

}

.gformBody .jobb-twothird .gField {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.gformBody .jobb-twothird .gfield {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.gformBody .gfield li label {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 18px;
    font-family: "Raleway", sans-serif;
    font-weight: 700;
}

.gformMain .gformBody .gfield::before {
    content: "";
    display: block;
    clear: both;
    width: 40px;
    height: 5px;
    background-color: black;
    margin: 40px 0;
}

.gformMain .gformBody .gfield .gfield_radio,
.gformMain .gformBody .gfield .gfield_checkbox {
    list-style: none;
    padding: 0;
}


/* radio button area  */
/* Common styles for custom radio & checkbox */
.gformMain .gformBody .gfield input[type="radio"],
.gformMain .gformBody .gfield input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    display: inline-block;
    cursor: pointer;
    background-color: white;
    position: relative;
}

/* Custom radio button */
.gformMain .gformBody .gfield .gfield_radio input[type="radio"] {
    width: 40px;
    height: 40px;
    border: 3px solid #7ED321;
    border-radius: 50%;
}

.gformMain .gformBody .gfield .gfield_radio input[type="radio"]:checked::before {
    content: "";
    width: 28px;
    height: 28px;
    background-color: #7ED321;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* Custom checkbox */
.gformMain .gformBody .gfield .gfield_checkbox input[type="checkbox"] {
    width: 40px;
    height: 40px;
    border: 3px solid #7ED321;
    border-radius: 5px;
}

.gformMain .gformBody .gfield .gfield_checkbox input[type="checkbox"]:checked::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 24px;
    height: 24px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237ED321' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    transform: translate(-50%, -50%);
}

/* redio button ened  */


/* font controller  */

.form-container {
    max-width: 600px;
    background: white;
    border-radius: 10px;
}

.form-container h1 {
    font-family: Raleway;
    font-weight: 700;
    font-size: 32px;
    line-height: 110.00000000000001%;
    letter-spacing: 0%;
    text-transform: uppercase;

}

.form-container .form-section {
    margin-bottom: 1.5rem;
    flex: 1;
}

.form-container .form-section label {
    display: block;
    margin-bottom: 0.3rem;
    color: black;
    font-size: 12px;
    font-weight: 400;
}

.form-container .form-section input,
.form-container .form-section textarea {
    width: 100%;
    padding: 0.8rem;
    margin-bottom: 1rem;
    border: 2px solid #7ED321;
    border-radius: 4px;
    font-size: 18px;
}

.form-container .form-section input:focus,
.form-container .form-section textarea:focus {
    outline: none;
    border-color: #7ED321;
    box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.2);
}


.contact-group {
    display: flex;
    gap: 1rem;
}

.contact-group .form-section textarea {
    height: 100px;
    resize: vertical;
}

.form-container button {
    background-color: #7ED321;
    color: white;
    padding: 0.8rem 1.5rem;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1rem;
    transition: background-color 0.3s;
}

.form-container button:hover {
    background-color: #7ED321;
}

/* form contrl ended  */

@media (max-width: 480px) {
    .contact-group {
        flex-direction: column;
    }
}


/* upload container  */


.upload-container {
    background: white;
    border-radius: 12px;
    width: 100%;
    max-width: 600px;
}

.upload-container h1 {
    font-family: Raleway;
    font-weight: 700;
    font-size: 32px;
    line-height: 110.00000000000001%;
    letter-spacing: 0%;
    text-transform: uppercase;

}

.upload-container .upload-area {
    /* border: 2px dashed #cccccc; */
    border-radius: 8px;
    padding: 40px 20px;
    margin-bottom: 24px;
    transition: all 0.3s ease;
    cursor: pointer;
    background: #EEEEEE;
    text-align: center;
    margin: 20px 0;
}

.upload-container .upload-area:hover,
.upload-container .upload-area.dragover {
    border-color: #0066cc;
    background-color: #f8f9ff;
}

.upload-container .upload-area .upload-instructions {
    color: #666666;
    /* margin-bottom: 8px; */
}

.upload-container .upload-area .upload-instructions span {
    color: #02dd77;
    text-decoration: underline;
}

.upload-container .upload-area #file-input {
    display: none;
}

.selected-files {
    margin-top: 16px;
    text-align: left;
}

.file-item {
    display: flex;
    align-items: center;
    padding: 8px;
    background: #f8f9fa;
    border-radius: 4px;
    margin-bottom: 8px;
}

.submit-btn {
    background-color: transparent;
    color: #7ED321;
    border: none;
    padding: 10px 61px;
    border-radius: 33px;
    font-size: 1rem;
    cursor: pointer;
    transition: background-color 0.3s ease;
    border: 2px solid #7ED321;
}

.submit-btn:hover {
    background-color: #6bc20d;
    color: white;
}

.file-name {
    margin-left: 8px;
    color: #333333;
}

.material-icons {
    font-family: 'Material Icons';
    font-weight: normal;
    font-style: normal;
    font-size: 20px;
    color: #666;
}

/* upload end  */

/* form area end  */