/* Add color variables at the top */
:root {
    --primary-color: #008117;
    --secondary-color: #99FF1C;
}
@import url('https://fonts.googleapis.com/css2?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&display=swap');
        @media only screen and (max-width: 1200px) {
            #regForm {
                background-color: transparent;
                margin: auto;
                font-family: "Poppins", sans-serif;
                padding: 0px;
                width: 100%;
                min-width: 100px;
            }
            h4.title {
                width: 200px;
                font-size: 15px;
            }
            .is-5 {
                font-size: 15px;
            }
            .tabElemContactText{
                width: fit-content;
                text-align: center;
                flex-wrap: wrap;
                align-items: center;
                justify-content: center;
            }
            .tabElemContact{
                margin:10px;
                flex-wrap: wrap;
                justify-content: center;
            }
            input[type=submit]{
                margin: 20px;
                width: 400px;
                padding: 15px 35px;
            }
        }
        @media only screen and (min-width: 1201px) {
            #regForm {
                background-color: transparent;
                margin: auto; 
                font-family: "Poppins", sans-serif;
                padding: 0px;
                width: 100%;
                min-width: 300px;
            }
            .tabElemContactText{
                text-align: left;
            }
            .tabElemContact {
                margin-left: 30px;
            }
            input[type=submit]{
                margin-left: 50px;
                padding: 5px 25px;
            }
        }
        * {
            box-sizing: border-box;
        }

        html{
            padding: 0;
            margin: 0;
        }
        body {
            background: rgb(0,113,189);
            background: linear-gradient(140deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 36%, rgba(255,255,255,1) 100%);
            font-family: "Poppins", sans-serif;
            bottom: 0;
        }

        h4.title {
            background: var(--primary-color);
            background: linear-gradient(90deg, var(--primary-color) 0%, var(--secondary-color) 100%);
            width: 250px;
            color: #fff;
            padding: 15px 5px;
            border-radius: 5px;
            margin-left: 50px;
            text-align: center;
            z-index: 1;
            position: relative;
        }
        h3.title {
            padding: 20px;
            height: auto;
            display: none;
        }
        .is-6 {
            font-weight:700;
        }
        .is-5 {
            font-weight:500;
        }
        .tab {
            margin-bottom: 20px;
            margin-top: 0px;
        }
        .questionModal {
            padding: 0px;
            z-index: 0;
            box-shadow: inset 0 0 0 0px #AAAAAA;
            background-color: transparent;
            text-align: center;
            border-radius: 5px;
        }
        .tabElem {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
        }
        .tabElemFeilds{
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            padding: 25px;
            z-index: 0;
            box-shadow: inset 0 0 0 1px var(--secondary-color);
            background-color: #fff;
            border-radius: 5px;
        }
        .tabElemContact {
            padding: 15px 30px;
            display: flex;
        }
        .tabElemContactText{
            background-color: #E5F2D8;
            width: 100%;
            height: fit-content;
            padding: 20px;
            border-radius: 5px;
            display: flex;
            align-items: center;
        }
        .tabElemContactFeilds{
            display: block;
            width: 100%;
            margin-top: 20px;
        }
        label {
            text-align: left;
        }
        /* HIDE RADIO */
        [type=radio] { 
            width: 22px;
            height: 22px;
            position: absolute;
            display: none;
        }
        
        /* IMAGE STYLES */
        [type=radio] + p {
            cursor: pointer;
            text-align: center;
            display: flex;
            align-items: center;
            justify-content: start;
            width: auto;
            height: auto;
            padding: 25px 30px;
            margin: 15px;
            transition: all 0.1s;
            border: solid #AAAAAA 1px;
            border-radius: 10px;
            font-family: "Poppins", sans-serif;
            color: #000;
            font-weight: 500;
            box-shadow: 0px 2px 9px 0px rgba(0, 0, 0, .1);
        }
        [type=radio] + p:hover {
            border: solid var(--primary-color) 2px;
            border-radius: 10px;
        }
        img.question{
            margin-right: 20px;
        }
        input.ask {
            padding: 10px;
            width: 100%;
            margin-bottom: 20px;
            font-size: 1em;
            font-family: "Poppins", sans-serif;
            background-color: transparent;
            border: solid 1px #EEEEEE;
            border-radius: 5px;
        }
        input.ask:focus{
            outline: none;
            border-bottom: solid 2px black;
        }
        input.ask::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
            color: #AAAAAA;
            opacity: 1; /* Firefox */
        }
        a{
            padding: 10px 0px;
        }
        input[type=submit]{
            cursor: pointer;
            font-family: "Poppins", sans-serif;
            font-weight: 500;
            font-size: 1em;
            background-color: var(--primary-color);
            color: #fff;
            border-radius: 5px;
        }

        label { font-weight: bold; }
        input[type="text"] { width: 100%; min-width: 100px; padding: 8px; font-size: 16px; }
        #map { width: 100%; height: 300px; margin-top: 10px; display: none; }
        .form-container { max-width: 500px; margin: auto; }