/* <style> */
    /*CUSTOM SCROLL BAR*/
*,html{
scroll-behavior: smooth;
margin: 0;
padding: 0;
}
*, *:after, *:before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
:root{


--white:#fff;
--black:#131417;
--primary:#96161f;
--primarylite:#fd242d;
--gray:#6d7175;
--dark:#232331;
--darklite:#364256;
--lite:#f8f9fa;
--primaryfont:'Roboto Condensed', sans-serif;
--secondaryfont:'Source Sans Pro', sans-serif;
}




















/*HEADER*/
header{
width:100%;
}

.header{
width:100%;
position:relative;
display:flex;
align-items:Center;
}

.header section{
width:100%;
overflow:hidden;
}

.header section:nth-child(1){
width:30%;
}

.cross {
background:rgb(242, 132, 7);
display:inline-block;
font-size:2em;
padding:.5em 2em;
text-decoration:none;
position:absolute;
left:-5%;
top:0;
display:flex;
align-items:center;
justify-content:center;
width:35%;
height: 14.9vh;
}

.parallelogram{
transform: skew(-20deg);

}

.skew-fix{
display:inline-block;
transform: skew(20deg);
width: 400px;
height: 150px;
}

/* .header .logo{
filter: brightness(0) invert(1);
padding:1rem 2rem;
} */


.top-tab{
width:100%;
background-color:rgb(27, 7, 7);
/* display:flex;
align-items:center;
justify-content:Center; */
padding:0.6rem 1rem;
padding-left:10rem;
}

@media(max-width:1120px){
.top-tab{
        display: none;
}
}


.mobile-bar{
  display: none;
}

@media(max-width:1120px){
.mobile-bar{
  display: block;
  margin:0 10px;
color:var(--black);

}
}


.top-tab span{
width:100%;
text-align:center;
white-space:nowrap;

}

.top-tab span a{
margin:0 10px;
color:var(--white);
white-space:nowrap;
}

.top-tab span:nth-child(1) a .fa{
margin:0 5px;
}

@media (max-width:1120px){
.header section:nth-child(1){
display:none;
}
.cross {
position:static;
}
.header .logo{
width:100%;
}
.top-tab{
padding-left:0rem;
}
.top-tab span:nth-child(1){
display:none;
}
.top-tab span:nth-child(2){
display:flex;
align-items:center;
justify-content:Center;
}
}




/*NAV*/
.topnav {
overflow: hidden;
background-image: url('/static/contest-bg.png');
background-repeat: no-repeat;
background-size: cover;
background-position: top;

padding-left:10rem;
}

.topnav a {
float: left;
display: block;
color: #f4f008;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 20px;
margin:10px 20px;
}

.active {
color: var(--primary);
}

.topnav .icon {
display: none;
}

.dropdown {
float: left;
overflow: hidden;
}

.dropdown .dropbtn {
font-size: 18px;    
border: none;
outline: none;
color: var(--dark);
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 10px 20px;
}

.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
border-top:2px solid var(--primary);
}

.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
margin:0;
}

.topnav a:hover, .dropdown:hover .dropbtn {
background-color: #e0a607a4;
color: white;
}

.dropdown-content a:hover {
background-color: #ddd;
color: black;
}

.dropdown:hover .dropdown-content {
display: block;
}

#res_logo{
display:none;
}

@media screen and (max-width: 1120px) {
#res_logo{
display:inline-block;
width:200px;
}
.topnav a:not(:first-child), .dropdown .dropbtn {
display: none;
}
.topnav a.icon {
float: right;
display: block;
color: #ffffff;
}
}

@media screen and (max-width: 1120px) {
.topnav {
padding-left:20px;
}


.topnav.responsive {position: relative;}
.topnav.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
margin:0px;
}
/* .topnav.responsive #res_logo{
max-width:200px;
min-width:200px;
} */
.topnav.responsive .dropdown {float: none;}
.topnav.responsive .dropdown-content {position: relative;}
.topnav.responsive .dropdown .dropbtn {
display: block;
width: 100%;
text-align: left;
margin:0px;
}
}




@media(max-width:1120px){
    .topnav a {

font-size:18px;
/* margin:10px 20px; */
margin-top: 20px;
}
}



@media(max-width:345px){
    .topnav a {

font-size:16px;
margin:10px 20px;
}
}



/*BANNER*/
.banner{
width:100%;
height:100vh;
background-image:url("/static/css/bg.jpg");
background-size:cover;
background-position:center;
background-attachment:fixed;
position:relative;
display:flex;
align-items:Center;
justify-content:left;
padding:3rem 0;

}

.banner-1{
width:100%;
height:100vh;

position:relative;
display:flex;
align-items:Center;
justify-content:left;
padding:3rem 0;

}

.banner section{
width:100%;
color:var(--white);

margin-top: -10rem;
}

.banner section h3{
font-weight:400;
line-height:0;
}

.banner section .title{
font-size:3.5em;

}

.banner:after{
content: '';
position: absolute;
left: 0;
bottom: -50px;
overflow: visible;
width: 100%;
height: 120px;
z-index: 0;
-webkit-transform: skewY(-4deg);
-moz-transform: skewY(-4deg);
-ms-transform: skewY(-4deg);
-o-transform: skewY(-4deg);
transform: skewY(-4deg);
background-color: #131417;
}

.banner section .form{
padding:2rem;
width:70%;
margin:0 auto;
background-color:rgba(255,255,255,1);
text-align:center;
position:relative;
overflow:hidden;
border-radius:5px;
color:var(--dark);
}



.banner section .form .title{
font-size:23px;
}

.banner section form{
width:100%;
}

.banner section form input, .banner section form select{
width:100%;
padding:1rem;
background-color:var(--lite);
}

.banner section form .half-column span{
width:100%;
}

.banner section form button{
border-radius:10px;
}

@media (max-width:920px){
.banner{
height:100%;
display:block;
/* padding:6rem 0; */
}
.banner section{
padding:1rem;
}
.banner section .title{
font-size:2em;
}
.banner section .form{
width:100%;
}

.banner section{
width:100%;
color:var(--white);

margin-top: 0rem;

}
}






/*SECTION1*/
.section1{
width:100%;
margin:auto;
position:relative;
background-color: #131417;
color:var(--white);
overflow:hidden;
/* border-radius:20px; */
/* padding:3rem 0; */
}

.section1 section{
width:100%;
position:relative;
padding:0 5rem;
display:flex;
align-items:center;
justify-content:center;
}

.section1 section .card{
width:100%;
margin:10px;
padding:2rem;
border:1px solid var(--dark);
color:var(--black);
border-radius:10px;
display:inline-block;
transition:0.5s;
display:flex;
align-items:center;
}

.section1 section .card span{
padding:0 2rem;
}

.section1 section .card:hover{
background-color:var(--primary);
color:var(--white);
}

.section1 section .active{
background-color:var(--primary);
color:var(--white);
}

.section1 section .card .fa{
font-size:2.3em;
}



.section1 .title_header section{
justify-content:left;
}

@media (max-width:920px){
.section1 section{
display:block;
padding:0 1rem;
}

}
/* </style> */




.contact-container {
    background-color: white;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
    width: 100%;
    max-width: 500px;
}

.contact-container h1 {
    text-align: center;
    color: #333;
    margin-bottom: 20px;
}

.contact-form {
    display: flex;
    flex-direction: column;
    
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: #555;
}

.form-group input {
    width: 100%;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 16px;
    transition: border 0.3s;
}

.form-group input:focus,
.form-group textarea:focus {
    border-color: #4CAF50;
    outline: none;
}

.submit-btn {
    background-color: #4CAF50;
    color: white;
    border: none;
    padding: 12px 20px;
    font-size: 16px;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.submit-btn:hover {
    background-color: #45a049;
}

.form-group textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 16px;
    transition: border 0.3s;
    resize: none; /* Prevents resizing */
    min-height: 20px; /* Fixed minimum height */
    max-height: 70px; /* Optional: Fixed maximum height */
    
}

/* Responsive design */
@media (max-width: 960px) {
.form-section,.banner .title{
            display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
}
}



    /* <style> */
        :root {
            --white: #ffffff;
            --dark: #131417;
            --lite: #f5f5f5;
            --primary: #4CAF50;
            --black: #000000;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: Arial, sans-serif;
        }

        /* BANNER */
        .banner {
            width: 100%;
            min-height: 120vh;
            background-image: url("/static/css/bg.jpg");
            background-size: cover;
            background-position: center;
            background-attachment: fixed;
            position: relative;
            display: flex;
            align-items: center;
            justify-content: left;
            /* padding: 3rem 0; */
        }

        .banner-1 {
            width: 100%;
            min-height: 120vh;
            background-color: rgba(0, 0, 0, 0.571);
            position: relative;
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            justify-content: space-between;
            /* padding: 2rem; */
        }




        .banner section {
            width: 100%;
            color: var(--white);
            padding: 1rem;
            /* background-color: #f4f008; */
        }

        .banner section h3 {
            font-weight: 400;
            line-height: 1.2;
            /* margin-bottom: 1rem; */
            font-size: 1.5rem;
            padding-left: 20px;
            text-align: left;
        }

        .banner section .title {
            font-size: 2.5rem;
            line-height: 1.2;
            /* margin-bottom: 2rem; */
            padding-left: 20px;

        }

        @media(max-width:920px) {
            .banner-1 {
                min-height: 150vh;
                /* background-color: #4CAF50; */
                margin-top: -5rem;
           
                /* margin-bottom: -5rem; */

            }

            .banner section h3 {
                font-weight: 400;
                line-height: 1.2;
                margin-top: -1.4rem;
                font-size: 1.5rem;

                text-align: center;
            }

                    .banner section {
            width: 100%;
            color: var(--white);
            padding: 1rem;
            /* background-color: #f4f008; */
          
        }



        }

        .banner em {
            color: var(--primary);
            font-style: normal;
        }

        .banner:after {
            content: '';
            position: absolute;
            left: 0;
            bottom: -50px;
            overflow: visible;
            width: 100%;
            height: 120px;
            z-index: 0;
            transform: skewY(-4deg);
            background-color: var(--dark);
        }

        /* FORM SECTION */
        .form-section {
            width: 100%;
            display: flex;
            justify-content: center;
            /* margin-top: -2rem; */
     

        }

        .contact-container {
            background-color: white;
            padding: 2rem;
            border-radius: 8px;
            box-shadow: 0 0 20px rgba(254, 5, 5, 0.536);
            width: 100%;
            max-width: 500px;
          
        }

        .contact-container h1 {
            text-align: center;
            color: #333;
            margin-bottom: 20px;
            font-size: 1.8rem;
        }

        .contact-form {
            display: flex;
            flex-direction: column;
        }

        .form-group {
            margin-bottom: 20px;
        }

        .form-group label {
            display: block;
            margin-bottom: 8px;
            font-weight: 600;
            color: #555;
        }

        .form-group input,
        .form-group textarea {
            width: 100%;
            padding: 12px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 16px;
            transition: border 0.3s;
            resize: none;
        }


        .form-group input:focus,
        .form-group textarea:focus {
            border-color: var(--primary);
            outline: none;
        }

        .submit-btn {
            background-color: var(--primary);
            color: white;
            border: none;
            padding: 12px 20px;
            font-size: 16px;
            border-radius: 4px;
            cursor: pointer;
            transition: background-color 0.3s;
        }

        .submit-btn:hover {
            background-color: #45a049;
        }

        .form-group textarea {
            resize: vertical;
            min-height: 120px;
        }

        /* SECTION1 */
        .section1 {
            width: 100%;
            margin: auto;
            position: relative;
            background-color: var(--dark);
            color: var(--white);
            overflow: hidden;
            padding: 3rem 0;
        }

        .title_header {
            width: 100%;
            /* max-width: 1200px; */
            margin: 0 auto;
            padding: 0 1rem;
        }

        .choose-us {
            font-size: 2rem;
            margin-bottom: 1.5rem;
            margin-left: 10px;

        }

        .choose-us-p {
            color: var(--white);
            line-height: 1.6;

            /* max-width: 800px; */
            margin: 0 auto;
        }



        /* RESPONSIVE DESIGN */
        @media (min-width: 920px) {
            .banner-1 {
                flex-wrap: nowrap;
                /* padding: 3rem; */


            }


            .banner section {
                width: 50%;
                /* padding: 2rem; */

            }

            .banner section .title {
                font-size: 3.5rem;

            }

            .form-section {
             
                width: 50%;
                /* padding: 2rem; */

            }

            .choose-us {
                font-size: 2.5rem;
            }
        }





        @media (max-width: 480px) {
            .banner section .title {
                font-size: 2rem;
            }

            .banner section h3 {
                font-size: 1.2rem;
            }

            .contact-container {
                padding: 1.5rem;
            }

            .contact-container h1 {
                font-size: 1.5rem;
            }

            .choose-us {
                font-size: 1.8rem;
            }
        }
    /* </style> */





.choose-us{
    color: #ff0011;
    margin-bottom: 2rem;
 
}

.choose-us-p{
    line-height: 1.5rem;
}