@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap');

  @import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@300;400;600;700;900&display=swap');

*{
    box-sizing: border-box;
}
        html,body{
            padding:0;
            margin:0;
        }
        body {
            font-family: 'Source Sans Pro', sans-serif !important;
           /* // font-family: Verdana, BlinkMacSystemFont, -apple-system, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; */
            font-size: 14px;
            line-height: 21px;
            padding:0;

            font-family: 'Roboto', sans-serif;
        }


        .black_nav_bar{

            background-color: #000;
            display: flex;
            flex-direction: row;
            align-content: stretch;
            align-items: center;
            justify-content: center;
            max-width: 1200px;
            margin: 0 auto;
        }

        .black_nav_bar .sub_div{
            margin-left: 40px;
        }

        .black_nav_bar > *{
        
        }

        .black_nav_bar a{
            color: #fff;
            cursor: pointer;
        }

        .sub_div{
            font-family: 'Roboto', sans-serif;
            font-size: 13px;
            background-color: transparent;
            border-radius: 0;
            color: #fff;
            border: none;
            padding: 8px 15px;
            font-weight: 500;
            -webkit-transition: background-color 0.4s;
            transition: background-color 0.4s;
            cursor: pointer;
        }

        .sub_div:hover{
            background-color: #485460;
            color:#575fcf;
        }


        #hrem_logo{
            max-width:20%;
            
        }

        .black_nav_bar ul {
            display: flex;
            flex-direction: row;
            justify-content: space-around;
            gap: 16px;

            width: 100%;
            margin: 6px;
        }

        .black_nav_bar ul li a{
            list-style: none;
        }

        .black_nav_bar  ul li a:hover{
            color:red;
        }



        .logo_div {
            display: flex;
            flex-direction: row;
            align-content: center;
            justify-content: center;
            margin:2% 2%;
        }



        .gray_nav_bar ul{
            display: flex;
            list-style: none;
            flex-direction: row;
            justify-content: space-evenly;
            align-items: center;
            text-transform: uppercase;
            color: #515151;
            max-width: 1200px;
            margin: 0 auto;
            cursor: pointer;
        }




        .gray_nav_bar{
             
            max-width: 1200px;
            margin: 0 auto;
            padding-bottom: 9px;
              border-bottom: 1px solid #e5e5e5;
                        }
                    
                    .gray_nav_bar .parent {
                display: block;
                position: relative;
                float: left;
                
                color:#000000;
                
            }
            
            .gray_nav_bar .parent a {
                margin: 0px;
                color: #2e2e2e;
                text-decoration: none;
                cursor: pointer;
            }
        
            
            .gray_nav_bar .parent:hover>ul {
                display: block;
                position: absolute;
            }
            
            .gray_nav_bar .sub-menu {
                display: none;
                box-shadow: 1px 1px 5px gray;
            }
            
            .gray_nav_bar .sub-menu li {
                background-color: #f1f1f1;
                
                border-bottom: #CCC 1px solid;
                border-right: #CCC 1px solid;
                width: auto;
                padding: 6px;
                min-width: 200px;
            }
            
            .gray_nav_bar .sub-menu li a {
                color: #000000;
            }
            .gray_nav_bar .sub-menu li a div:hover{
                color: #ff0000;
            }
            
            .gray_nav_bar ul {
                list-style: none;
                margin: 0;
                padding: 0px;
                min-width: 8.65em;
            }
            
            .gray_nav_bar ul ul ul {
                left: 100%;
                top: 0;
                margin-left: 1px;
            }
            
            .gray_nav_bar li:hover {
                background-color: transparent;
            
            }
            
            .gray_nav_bar .parent li:hover {
                background-color: #F0F0F0;
            }
            
            .gray_nav_bar .expand {
                font-size: 12px;
                float: right;
                margin-right: 5px;
            }



        .content_holder{
            display:flex;
            gap:6%;
            
			max-width:1200px;
			margin:2% auto;
        }


        .abstract-holder{
            flex:60%;
        }

        .form-holder{
            flex:40%;
        }

        .abstract .title{
            font-size: 27px;
            line-height: 38px;
            margin-top: 30px;
            margin-bottom: 20px;
        }

        .abstract p{
            font-size:16px;
            line-height: 1.74;
        }
        .wrp{
            display: flex;
            gap:4%;
            flex-flow: row wrap;
            padding-top: 10px;
            padding-bottom: 5px;
            width: 100%;
        }

        .col{
            flex: 1 0 0%;
        }

    

        .form_heading{
            font-size: 1.9em;
            text-align: center;
            color: #fff;
            line-height: 1.2;
            font-weight: 500;
            width: 80%;
            margin: 10px auto;
        }

        form{
            padding: 3% 6%;
        }

        input.error,select.error{
            border:1px solid red !important;
       
        }
 
        label.error{
            display: none;
            color:#ff0026;
            text-shadow: 2px 1px 5px #1e272e;
        }
        form li{
           list-style: none;
        }

        form li label{
            color:#000;
            font-size: 16px;
        }


        input[type=text], input[type=url], input[type=tel], input[type=email] ,select{
            font-size: 14px;
            line-height: 21px;
            color: #444;
            border: 1px solid #e1e1e1;
            width: 100%;
            max-width: 100%;
            height: 34px;
            padding: 1px;
            margin:0;
            outline: none;
        }

   


        form input[type="submit"]{
            font-family: 'Roboto', sans-serif;
            font-size: 13px;
            background-color: #222222;
            border-radius: 0;
            color: #fff;
            border: none;
            padding: 8px 15px;
            font-weight: 500;
            -webkit-transition: background-color 0.4s;
            transition: background-color 0.4s;
            cursor: pointer;
        }

        form input[type="submit"]:hover{
            background-color:#4db2ec;
        }

        .mt-20px{
            margin-top:20px;
        }


        .mobile_header{

            max-width: 100%;
            margin: 0 auto;
            padding: 20px;
            display: grid;
            grid-template-columns: 1fr auto;
            background-color: #dfe6e9;
            padding:20px;
        }

        .mobile_header .hamburger_icon{
            cursor: pointer;
        }

     
        @media screen and (max-width: 950px) {
            .content_holder{
                display:block;
            
                    margin: 2% 8%;
            }

            .black_nav_bar{
                display: none;
            }

            .logo_div{
                display: none;
            }

            .gray_nav_bar{
                display: none;
            }

            .abstract img{
                max-width: 100%;
            }
        }


        @media screen and (min-width: 950px) {
            .mobile_header{
                display: none;
            }
        }
        @media screen and (max-width: 600px) {
            .wrp{
                display: block;
                padding-top: 10px;
                padding-bottom: 5px;
                width: 100%;
            }
        }