@charset "utf-8";

html{
	scroll-behavior: smooth;
}
*{
	box-sizing: border-box;
  font-family: "Nunito Sans", serif;
}
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}


input[type="number"] {
    -moz-appearance: textfield;
}

.loading-btn {
    background-color: white !important;
    transition: background-color 2s;
}
.swal-high-z {
    z-index: 99999999 !important;
}
.success{
  margin-top:0px;
  transition:1s;
  color:green;
}
.failed{
  margin-top:0px;
  transition:1s;

}
#refresh_image{
  width:50px;
  display: none;
}
.hide-alert{
   margin-top:-300px;
  transition:1s;

}
.alert{
  padding:30px;
  background:white;
  color: red;
  font-size: 16px;
  text-align: center;
  width:600px;
  position: fixed;
  top:0px;
  z-index: 99999999;
  box-shadow: 0px 0px 10px 2px black;
   top: 0px;
  left: 50%;
  transform: translateX(-50%);
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
    font-family: "Nunito Sans", serif;
  font-optical-sizing: auto;
  
  font-style: normal;
  font-variation-settings:
    "wdth" 100,
    "YTLC" 500;
    line-height: 25px;
   margin-top: -300px;


}

input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px #fff inset !important;
}
.mytitle{
  font-size: 18px;

}
.dialing{
  width:60px;
  color:black;
  
}
.logout-button{
  position: absolute;
  right: 10px;
  top:20px;
  color:black;
  border:none;
  user-select: none;
  outline: none;
  border-radius: 10px;
  font-weight: bold;
  font-size: 14px;
  background: linear-gradient(to left, rgba(4,172,235,0.3), #ffffff);
  padding: 8px;
  width: auto;
   font-family: "Nunito Sans", serif;

}
#logout-text{
  color:red;
}
body{
	margin: 0px;
	background: linear-gradient(to left, rgba(4,172,235,0.3), #ffffff);
}
.gif_loader{
	width:400px;
	margin: 100px auto;
}
.container{
	width: 100%;
	padding:0px;
}

.sub_container{
	width:100%;
	margin:0 auto;
	


}
.logo{
	width:200px;
}
.logox{
	position: absolute;
	left: 5px;
	top:1px;
	z-index: 99999;
}
.image-container {
    position: relative;
    width: 100%;
   
      overflow: hidden;
}

#myimage {
    width: 100%;
    transition: 0.5s;
      height: 800px;
     aspect-ratio: 16/9;
    object-fit: cover;
    object-position: center top;
      
    filter: brightness(50%);

      -webkit-mask-image: linear-gradient(
        to bottom,
        rgba(0,0,0,1) 70%,
        rgba(0,0,0,0) 100%
    );
    mask-image: linear-gradient(
        to bottom,
        rgba(0,0,0,1) 70%,
        rgba(0,0,0,0) 100%
    );
}




.image-text {
    
    position: absolute;
   top:15%;     /* distance from top */
    left: 5px;    
    
    color: white;
    font-size: 36px;
    font-weight: bold;
    width:50%;
    
    background: rgba(0,0,0,0.0);
    padding: 10px ;
    border-radius: 10px;
     font-family: "Nunito Sans", serif;
  font-optical-sizing: auto;
  
  font-style: normal;
  font-variation-settings:
    "wdth" 100,
    "YTLC" 500;
    font-weight: bold;
    height: 400px;
}

.about_us_control{
	width:70%;
	padding:10px;
	margin:20px auto;
	 font-family: "Nunito Sans", serif;
  font-optical-sizing: auto;
  
  font-style: normal;
  font-variation-settings:
    "wdth" 100,
    "YTLC" 500;
    color:grey;
    line-height: 25px;
    font-size: 17px;
}
.index_buttons_div{
	display: flex;
	justify-content: center;
	flex-wrap: nowrap;
	padding: 10px;
}
.index_buttons_div_download{
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  padding: 10px;

}
.reg_buttons{
	width:300px;
	margin:10px ;
	text-align:center;
}
.reg_buttonsx{
	width:300px;
	margin:10px auto ;
	text-align:center;
}
.reg_butn,.rec_butn,#refresh_code{
	background: #04ACEB;
    color: #fff;
    border-radius: 10px;
    padding:20px;
    border:0px ;
    outline: none;
    user-select: none;
    width:100%;
     font-family: "Nunito Sans", serif;
  font-optical-sizing: auto;
  
  font-style: normal;
  font-variation-settings:
    "wdth" 100,
    "YTLC" 500;
    font-size: 20px;
}
.log_butn{
	background: #0b5ed7;
    color: #fff;
    border-radius: 10px;
    padding:20px;
    border:0px ;
    outline: none;
    user-select: none;
    width:100%;
     font-family: "Nunito Sans", serif;
  font-optical-sizing: auto;
  
  font-style: normal;
  font-variation-settings:
    "wdth" 100,
    "YTLC" 500;
    font-size: 20px;
}
.download_butn{
	background:   linear-gradient(45deg, #28a745, #34d058);
    color: #fff;
    border-radius: 10px;
    padding:15px;
    border:0px ;
    outline: none;
    user-select: none;
    width:300px;
     font-family: "Nunito Sans", serif;

  font-style: normal;
  font-variation-settings:
    "wdth" 100,
    "YTLC" 500;
    font-size: 16px;
    margin: 10px;
}
.h1{
	text-align: center;
	font-family: "Nunito Sans", serif;
  font-optical-sizing: auto;
  
  font-style: normal;
  font-variation-settings:
    "wdth" 100,
    "YTLC" 500;
    color:grey;
}
.copy{
	width:100%;
	padding:20px;
	margin:20px auto;
	text-align: center;
	font-family: "Nunito Sans", serif;
  font-optical-sizing: auto;
  
  font-style: normal;
  font-variation-settings:
    "wdth" 100,
    "YTLC" 500;
    color:grey;
    font-size:12px;
}
.copyx{
	font-weight: bold;
	color:black;
	font-size: 16px;
}
.reg_form_contain{
  position: fixed;
  top: 0px;
  bottom: 0px;
  left: 0px;
  right: 0px;
  background: rgba(0,0,0,0.8);
  z-index: 99999;
  width:0%;
  margin-left:-5000px;
  overflow: auto;
}

.login_form_contain,.term_form_contain{
  position: fixed;
  top: 0px;
  bottom: 0px;

  right: 0px;
  background: rgba(0,0,0,0.8);
  z-index: 99999;
  width:0%;
  margin-right:-5000px;
  overflow: auto;

  
}
.term_form_contain{
  position: fixed;
  top: 0px;
  bottom: 0px;

  right: 0px;
  background: rgba(0,0,0,0.2);
  z-index: 99999;
  width:0%;
  margin-right:-5000px;
  overflow: auto;

  
}
.recover_form_contain{
position: fixed;
  top: 0px;
  bottom: 0px;
  left: 0px;
  right: 0px;
  background: rgba(0,0,0,0.8);
  z-index: 99999;
  width:0%;
  margin-left:-5000px;
  overflow: auto;

}

.main_form_holder{
  width:60%;
  padding:20px;
  background: linear-gradient(to left, rgba(4,172,235,1), #ffffff);

  font-family: "Nunito Sans", serif;
  font-optical-sizing: auto;
  
  font-style: normal;
  font-variation-settings:
    "wdth" 100,
    "YTLC" 500;
    color:grey;
    font-size:14px;
    margin:10px auto;
    border-radius: 10px;

}
.reg_title{
  font-weight: bold;
  font-size: 24px;
  color:#04ACEB;
  user-select: none;
 
}
.input_holder{
    margin-top:15px;
}

label{
    display:block;
    margin-bottom:6px;
    color:#4B5563;
    font-size:14px;
    font-weight:600;
    user-select:none;
}

.input-box{
    display:flex;
    align-items:center;
    background:#fff;
    border:1px solid #D1D5DB;
    border-radius:10px;
    overflow:hidden;
    transition:.25s;
}

.input-box:focus-within{
    border-color:#04ACEB;
    box-shadow:0 0 0 3px rgba(4,172,235,.15);
}

.icon{
    width:50px;
    display:flex;
    justify-content:center;
    align-items:center;
  
    color:#04ACEB;
}

.icon i{
    font-size:18px;
}

.input_text{
    flex:1;
}

.txt,
.txtx{
    width:100%;
    border:none;
    outline:none;
    padding:14px;
    font-size:14px;
    color:#374151;
    background:transparent;
}

.txt::placeholder,
.txtx::placeholder{
    color:#9CA3AF;
}
select{
    appearance:none;
    -webkit-appearance:none;
    -moz-appearance:none;
    background:none;
}

#icon{
    font-size:18px;
    color:#04ACEB;
}
.cancel,.cancel2,.cancel3,.cancel5{
  width:30px;
  float: right;

  text-align: right;
  padding:0px;
  margin-top:-10px;
  margin-right: -10px;


}
.cancel4{
  width:200px;
  background: #04ACEB;
  border-radius: 10px;
  color:white;
  padding:12px;
    font-family: "Nunito Sans", serif;
    font-size: 16px;
    border:0px;
}
#close{
  font-size: 30px;
  color:#FF0033;
}
.show_pass{
  padding:10px;
  width:60px;
  color:#04ACEB;
  font-size: 18px;
}
#eye,#eyex,#eye1,#eyex1{
  display:none;
}
.submit_btn{
  width:100%;
  margin: 30px auto;
  user-select: none;
  text-align: center;
}
.submit_form{
  width:300px;
  background: #007bff;
    color: #fff;
    padding:  20px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 16px;

}
.submit_form:hover{
  background: #0056b3;
}
.log_button{
  width:100%;
  text-align: center;
}
.log_tex{
  color:black;
  font-size: 20px;
}
a:link{
  color:blue;
  text-decoration: none;
}
a:visited{
  color:blue;
  text-decoration: none;
}
.close_history{
    cursor: pointer;
    font-size: 40px;
    color:white;
    transition: .2s;
}

.close_history:hover{
    transform: rotate(360deg);
    color: red;
}


/* =========================================================
   HIROCK-ETT COMPLETE PAGE CSS
========================================================= */


/* =========================================================
   HERO
========================================================= */

.hirock-hero{
    position:relative;
    width:100%;
    min-height:680px;

    display:flex;
    align-items:center;

    overflow:hidden;

    background-image:url("../images/lab2.jpg");
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
}


/* HERO OVERLAY */

.hirock-hero-overlay{
    position:absolute;
    inset:0;

    background:
        linear-gradient(
            90deg,
            rgba(3,18,15,.96) 0%,
            rgba(3,18,15,.88) 35%,
            rgba(3,18,15,.55) 70%,
            rgba(3,18,15,.30) 100%
        );

    z-index:1;
}


/* HERO CONTENT */

.hirock-hero-content{
    position:relative;
    z-index:2;

    width:100%;
    max-width:1200px;

    margin:0 auto;
    padding:90px 40px;

    box-sizing:border-box;
}


/* BADGE */

.hirock-badge{
    display:inline-flex;
    align-items:center;
    gap:9px;

    padding:9px 16px;

    border:1px solid rgba(255,255,255,.18);
    border-radius:50px;

    background:rgba(255,255,255,.08);

    color:#dfffee;

    font-size:13px;
    font-weight:600;

    backdrop-filter:blur(8px);

    animation:hirockBadge .8s ease forwards;
}


.hirock-badge i{
    color:#2563EB;
    font-size:15px;
}


@keyframes hirockBadge{

    from{
        opacity:0;
        transform:translateY(20px);
    }

    to{
        opacity:1;
        transform:translateY(0);
    }

}


/* HERO HEADING */

.hirock-hero h1{
    margin:25px 0 20px;

    max-width:850px;

    color:#ffffff;

    font-size:clamp(45px,6vw,78px);

    line-height:1.02;

    font-weight:800;

    letter-spacing:-2px;
}


/* ANIMATED TEXT */

.hirock-animated-text{
    display:flex;

    gap:.25em;

    flex-wrap:wrap;

    color:#2563EB;
}


/* ANIMATED WORDS */

.hirock-animated-text span{

    display:inline-block;

    opacity:0;

    transform:
        translateY(55px)
        scale(.9);

    filter:blur(8px);

    animation:
        hirockTextReveal
        .9s
        cubic-bezier(.16,1,.3,1)
        forwards;
}


.hirock-animated-text span:nth-child(1){
    animation-delay:.25s;
}

.hirock-animated-text span:nth-child(2){
    animation-delay:.45s;
}

.hirock-animated-text span:nth-child(3){
    animation-delay:.65s;
}


@keyframes hirockTextReveal{

    0%{
        opacity:0;

        transform:
            translateY(55px)
            scale(.9);

        filter:blur(8px);
    }

    70%{
        opacity:1;
        filter:blur(0);
    }

    100%{
        opacity:1;

        transform:
            translateY(0)
            scale(1);

        filter:blur(0);
    }

}


/* HERO DESCRIPTION */

.hirock-hero-description{
    max-width:680px;

    margin:0 0 30px;

    color:rgba(255,255,255,.82);

    font-size:17px;

    line-height:1.75;
}


/* HERO BUTTONS */

.hirock-hero-buttons{
    display:flex;

    align-items:center;

    gap:14px;

    flex-wrap:wrap;

    margin-bottom:35px;
}


/* GENERAL BUTTON */

.hirock-btn{
    display:inline-flex;

    align-items:center;
    justify-content:center;

    gap:9px;

    min-width:140px;

    padding:14px 22px;

    border-radius:10px;

    text-decoration:none;

    font-size:14px;
    font-weight:700;

    transition:
        transform .25s ease,
        box-shadow .25s ease,
        background .25s ease;
}


/* PRIMARY */

.hirock-btn-primary{
    background:#2563EB;

    color:white;

    box-shadow:
        0 10px 30px rgba(85,220,160,.20);
}


.hirock-btn-primary:hover{
    transform:translateY(-3px);

    box-shadow:
        0 15px 35px rgba(85,220,160,.35);
}


/* SECONDARY */

.hirock-btn-secondary{
    background:rgba(255,255,255,.08);

    border:1px solid rgba(255,255,255,.22);

    color:#ffffff;

    backdrop-filter:blur(8px);
}


.hirock-btn-secondary:hover{
    transform:translateY(-3px);

    background:rgba(255,255,255,.14);
}


/* APP DOWNLOADS */

.hirock-downloads{
    display:flex;

    align-items:center;

    gap:12px;

    flex-wrap:wrap;
}


.hirock-downloads > span{
    margin-right:5px;

    color:rgba(255,255,255,.65);

    font-size:12px;

    font-weight:600;
}


/* STORE */

.hirock-store{
    display:flex;

    align-items:center;

    gap:9px;

    min-width:135px;

    padding:8px 13px;

    border:1px solid rgba(255,255,255,.15);

    border-radius:8px;

    background:rgba(0,0,0,.30);

    color:#ffffff;

    text-decoration:none;

    transition:.25s ease;
}


.hirock-store:hover{
    transform:translateY(-3px);

    background:rgba(255,255,255,.10);
}


.hirock-store > i{
    font-size:25px;
}


.hirock-store div{
    display:flex;

    flex-direction:column;

    line-height:1.1;
}


.hirock-store small{
    font-size:8px;

    color:rgba(255,255,255,.65);

    letter-spacing:.3px;
}


.hirock-store strong{
    margin-top:3px;

    font-size:13px;

    font-weight:600;
}



/* =========================================================
   GENERAL SECTIONS
========================================================= */

.hirock-section{
    width:100%;

    padding:100px 0;

    box-sizing:border-box;

    background:#ffffff;
}


.hirock-container{
    width:100%;

    max-width:1200px;

    margin:0 auto;

    padding:0 40px;

    box-sizing:border-box;
}


/* SECTION HEADING */

.hirock-section-heading{
    max-width:760px;

    margin:0 auto 60px;

    text-align:center;
}


.hirock-section-heading > span{
    display:inline-block;

    margin-bottom:12px;

    color:#2563EB;

    font-size:12px;

    font-weight:800;

    letter-spacing:1.5px;
}


.hirock-section-heading h2{
    margin:0 0 18px;

    color:#10221d;

    font-size:clamp(32px,4vw,50px);

    line-height:1.1;

    font-weight:800;

    letter-spacing:-1.5px;
}


.hirock-section-heading h2 strong{
    color:#2563EB;
}


.hirock-section-heading p{
    margin:0 auto;

    max-width:650px;

    color:#687872;

    font-size:16px;

    line-height:1.75;
}



/* =========================================================
   ABOUT
========================================================= */

.hirock-about{
    background:#ffffff;
}


.hirock-about-grid{
    display:grid;

    grid-template-columns:
        minmax(0,1fr)
        minmax(0,1fr);

    gap:70px;

    align-items:center;
}


/* ABOUT IMAGE */

.hirock-about-image{
    position:relative;

    min-height:520px;

    border-radius:24px;

    overflow:hidden;

    background-image:
        linear-gradient(
            135deg,
            rgba(6,44,34,.10),
            rgba(6,44,34,.35)
        ),
        url("../images/lab2_200kb.jpg");

    background-size:cover;

    background-position:center;

    box-shadow:
        0 25px 60px rgba(8,45,34,.15);
}


/* IMAGE BADGE */

.hirock-image-badge{
    position:absolute;

    left:25px;
    bottom:25px;

    display:flex;

    align-items:center;

    gap:12px;

    padding:14px 18px;

    border-radius:14px;

    background:rgba(255,255,255,.94);

    box-shadow:
        0 12px 35px rgba(0,0,0,.15);

    backdrop-filter:blur(10px);
}


.hirock-image-badge i{
    display:flex;

    align-items:center;
    justify-content:center;

    width:42px;
    height:42px;

    border-radius:12px;

    background:#e2faef;

    color:#2bb47b;

    font-size:20px;
}


.hirock-image-badge div{
    display:flex;

    flex-direction:column;

    gap:3px;
}


.hirock-image-badge strong{
    color:#17352b;

    font-size:13px;
}


.hirock-image-badge small{
    color:#71817b;

    font-size:11px;
}


/* ABOUT CONTENT */

.hirock-about-content h3{
    margin:0 0 20px;

    color:#142a23;

    font-size:34px;

    line-height:1.2;

    font-weight:800;
}


.hirock-about-content > p{
    margin:0 0 17px;

    color:#64746e;

    font-size:15px;

    line-height:1.8;
}


/* HIGHLIGHT */

.hirock-highlight{
    display:flex;

    gap:14px;

    margin-top:28px;

    padding:20px;

    border:1px solid #dcefe7;

    border-radius:15px;

    background:#f4fbf7;
}


.hirock-highlight > i{
    flex-shrink:0;

    color:#2563EB;

    font-size:24px;
}


.hirock-highlight strong{
    display:block;

    margin-bottom:6px;

    color:#17372b;

    font-size:14px;
}


.hirock-highlight p{
    margin:0;

    color:#6d7d77;

    font-size:13px;

    line-height:1.6;
}



/* =========================================================
   MISSION / VISION
========================================================= */

.hirock-purpose{
    background:#f4f9f7;
}


.hirock-purpose-grid{
    display:grid;

    grid-template-columns:
        repeat(2,minmax(0,1fr));

    gap:25px;
}


.hirock-purpose-card{
    display:grid;

    grid-template-columns:auto 1fr;

    gap:25px;

    padding:35px;

    border:1px solid #dfeee8;

    border-radius:22px;

    background:#ffffff;

    box-shadow:
        0 12px 40px rgba(12,56,43,.06);

    transition:
        transform .3s ease,
        box-shadow .3s ease;
}


.hirock-purpose-card:hover{
    transform:translateY(-6px);

    box-shadow:
        0 20px 50px rgba(12,56,43,.12);
}


/* PURPOSE ICON */

.hirock-purpose-icon{
    display:flex;

    align-items:center;
    justify-content:center;

    width:58px;
    height:58px;

    border-radius:16px;

    background:#e4f9ef;

    color:#2563EB;

    font-size:24px;
}


.hirock-vision-card .hirock-purpose-icon{
    background:#e8f3f7;

    color:#3188a0;
}


.hirock-card-label{
    display:block;

    margin-bottom:8px;

    color:#2563EB;

    font-size:11px;

    font-weight:800;

    letter-spacing:1.3px;
}


.hirock-purpose-card h3{
    margin:0 0 13px;

    color:#142d24;

    font-size:23px;

    line-height:1.25;
}


.hirock-purpose-card p{
    margin:0;

    color:#6a7974;

    font-size:14px;

    line-height:1.75;
}



/* =========================================================
   HOW IT WORKS
========================================================= */

.hirock-how{
    background:#ffffff;
}


.hirock-steps{
    display:grid;

    grid-template-columns:
        repeat(4,minmax(0,1fr));

    gap:20px;
}


.hirock-step{
    position:relative;

    padding:30px 24px;

    border:1px solid #e2eee9;

    border-radius:20px;

    background:#ffffff;

    text-align:center;

    transition:
        transform .3s ease,
        box-shadow .3s ease;
}


.hirock-step:hover{
    transform:translateY(-7px);

    box-shadow:
        0 18px 45px rgba(12,56,43,.10);
}


/* NUMBER */

.hirock-step-number{
    position:absolute;

    top:15px;
    right:18px;

    color:#dceee7;

    font-size:27px;

    font-weight:900;
}


/* STEP ICON */

.hirock-step-icon{
    position:relative;

    z-index:1;

    display:flex;

    align-items:center;
    justify-content:center;

    width:65px;
    height:65px;

    margin:15px auto 22px;

    border-radius:18px;

    background:#e6f9ef;

    color:#2563EB;

    font-size:25px;
}


.hirock-step h3{
    margin:0 0 10px;

    color:#173229;

    font-size:17px;
}


.hirock-step p{
    margin:0;

    color:#71807b;

    font-size:13px;

    line-height:1.7;
}



/* =========================================================
   WHO WE SERVE
========================================================= */

.hirock-network{
    background:#f7faf9;
}


.hirock-network-grid{
    display:grid;

    grid-template-columns:
        repeat(3,minmax(0,1fr));

    gap:24px;
}


.hirock-network-card{
    padding:35px 30px;

    border:1px solid #e0ebe7;

    border-radius:22px;

    background:#ffffff;

    transition:
        transform .3s ease,
        box-shadow .3s ease;
}


.hirock-network-card:hover{
    transform:translateY(-7px);

    box-shadow:
        0 20px 50px rgba(9,58,43,.10);
}


/* NETWORK ICON */

.hirock-network-icon{
    display:flex;

    align-items:center;
    justify-content:center;

    width:60px;
    height:60px;

    margin-bottom:24px;

    border-radius:17px;

    background:#e6f9ef;

    color:#2563EB;

    font-size:24px;
}


.hirock-network-card h3{
    margin:0 0 13px;

    color:#2563EB;

    font-size:21px;
}


.hirock-network-card p{
    margin:0 0 22px;

    color:#6c7b76;

    font-size:14px;

    line-height:1.75;
}


.hirock-network-card a{
    display:inline-flex;

    align-items:center;

    gap:8px;

    color:#2cab76;

    font-size:12px;

    font-weight:800;

    text-decoration:none;

    transition:.25s ease;
}


.hirock-network-card a:hover{
    gap:13px;

    color:#168c5b;
}



/* =========================================================
   WHY HIROCK
========================================================= */

.hirock-why{
    background:#ffffff;
}


.hirock-why-grid{
    display:grid;

    grid-template-columns:
        minmax(0,1fr)
        minmax(0,1fr);

    gap:70px;

    align-items:center;
}


.hirock-label{
    display:inline-block;

    margin-bottom:12px;

    color:#2563EB;

    font-size:12px;

    font-weight:800;

    letter-spacing:1.4px;
}


.hirock-why-content h2{
    margin:0 0 18px;

    color:#152c24;

    font-size:clamp(34px,4vw,48px);

    line-height:1.12;

    letter-spacing:-1px;
}


.hirock-why-content h2 strong{
    color:#2563EB;
}


.hirock-why-content > p{
    max-width:570px;

    margin:0 0 30px;

    color:#687873;

    font-size:15px;

    line-height:1.8;
}


/* BENEFITS */

.hirock-benefits{
    display:grid;

    grid-template-columns:
        repeat(2,minmax(0,1fr));

    gap:20px;
}


.hirock-benefit{
    display:flex;

    gap:13px;
}


.hirock-benefit-icon{
    flex-shrink:0;

    display:flex;

    align-items:center;
    justify-content:center;

    width:42px;
    height:42px;

    border-radius:12px;

    background:#e9f9f1;

    color:#2563EB;

    font-size:17px;
}


.hirock-benefit h4{
    margin:0 0 5px;

    color:#18352b;

    font-size:14px;
}


.hirock-benefit p{
    margin:0;

    color:#75827e;

    font-size:12px;

    line-height:1.6;
}


/* WHY IMAGE */

.hirock-why-image{
    position:relative;

    min-height:520px;

    border-radius:25px;

    overflow:hidden;

    background-image:
        linear-gradient(
            145deg,
            rgba(4,32,24,.10),
            rgba(4,32,24,.35)
        ),
        url("../images/doc_200kb.jpg");

    background-size:cover;

    background-position:center;

    box-shadow:
        0 25px 60px rgba(8,45,34,.14);
}


/* FLOATING CARD */

.hirock-floating-card{
    position:absolute;

    right:25px;
    bottom:25px;

    display:flex;

    align-items:center;

    gap:12px;

    padding:15px 19px;

    border-radius:15px;

    background:rgba(255,255,255,.95);

    box-shadow:
        0 15px 40px rgba(0,0,0,.16);

    backdrop-filter:blur(10px);
}


.hirock-floating-card > i{
    display:flex;

    align-items:center;
    justify-content:center;

    width:42px;
    height:42px;

    border-radius:12px;

    background:#e3f9ed;

    color:#2bb67c;

    font-size:19px;
}


.hirock-floating-card div{
    display:flex;

    flex-direction:column;

    gap:4px;
}


.hirock-floating-card strong{
    color:#17352b;

    font-size:13px;
}


.hirock-floating-card span{
    color:#78847f;

    font-size:11px;
}



/* =========================================================
   VIDEOS
========================================================= */

.hirock-videos{
    background:#f5f9f7;
}


.hirock-video-grid{
    display:grid;

    grid-template-columns:
        repeat(2,minmax(0,1fr));

    gap:30px;
}


.hirock-video-card{
    overflow:hidden;

    border:1px solid #dfebe6;

    border-radius:22px;

    background:#ffffff;

    box-shadow:
        0 12px 35px rgba(9,55,41,.06);
}


/* VIDEO */

.hirock-video{
    width:100%;

    aspect-ratio:16 / 9;

    overflow:hidden;

    background:#081c16;
}


.hirock-video video{
    display:block;

    width:100%;
    height:100%;

    object-fit:cover;
}


/* VIDEO CONTENT */

.hirock-video-content{
    padding:24px 26px 27px;
}


.hirock-video-content > span{
    display:block;

    margin-bottom:8px;

    color:#2563EB;

    font-size:11px;

    font-weight:900;

    letter-spacing:1px;
}


.hirock-video-content h3{
    margin:0 0 10px;

    color:#173229;

    font-size:19px;
}


.hirock-video-content p{
    margin:0;

    color:#6e7d78;

    font-size:13px;

    line-height:1.7;
}



/* =========================================================
   FINAL CTA
========================================================= */

.hirock-final{
    position:relative;

    width:100%;

    min-height:430px;

    display:flex;

    align-items:center;

    justify-content:center;

    overflow:hidden;

    background-image:url("../images/lab2.jpg");

    background-size:cover;

    background-position:center;
}


.hirock-final-overlay{
    position:absolute;

    inset:0;

    background:
        linear-gradient(
            90deg,
            rgba(3,25,19,.92),
            rgba(4,51,36,.78)
        );
}


.hirock-final-content{
    position:relative;

    z-index:2;

    width:100%;

    max-width:760px;

    padding:80px 30px;

    box-sizing:border-box;

    text-align:center;
}


.hirock-final-content h2{
    margin:20px 0 15px;

    color:#ffffff;

    font-size:clamp(35px,5vw,58px);

    line-height:1.08;

    letter-spacing:-1.5px;
}


.hirock-final-content h2 strong{
    display:inline-block;

    color:#2563EB;
}


.hirock-final-content > p{
    max-width:600px;

    margin:0 auto 30px;

    color:rgba(255,255,255,.78);

    font-size:16px;

    line-height:1.75;
}


.hirock-final-buttons{
    display:flex;

    justify-content:center;

    align-items:center;

    gap:14px;

    flex-wrap:wrap;
}



/* =========================================================
   GENERAL HOVER / FOCUS
========================================================= */

.hirock-btn:focus,
.hirock-store:focus,
.hirock-network-card a:focus{
    outline:2px solid #2563EB;

    outline-offset:3px;
}



/* =========================================================
   TABLET
========================================================= */
/* ================================
   HIROCK-ETT FOOTER
================================ */

.hiro_footer{
    width:100%;
    background:#111827;
    color:#fff;
    margin-top:60px;
}

.hiro_footer_container{
    max-width:1250px;
    margin:auto;
    padding:65px 30px 55px;

    display:grid;
    grid-template-columns:1.5fr 1fr 1fr 1.3fr;
    gap:45px;
}


/* ================================
   BRAND
================================ */

.hiro_footer_logo{
    font-size:29px;
    font-weight:800;
    letter-spacing:-1px;
    margin-bottom:18px;
}

.hiro_footer_logo span{
    color:#ffffff;
}

.hiro_footer_logo b{
    color:#38bdf8;
}

.hiro_about p{
    max-width:350px;
    color:#aeb8c7;
    line-height:1.8;
    font-size:14px;
    margin:0;
}


/* ================================
   SOCIAL ICONS
================================ */

.hiro_socials{
    display:flex;
    gap:10px;
    margin-top:25px;
}

.hiro_socials a{
    width:38px;
    height:38px;
    border-radius:50%;

    display:flex;
    align-items:center;
    justify-content:center;

    background:#1f2937;
    color:#dbe4ef;

    text-decoration:none;
    transition:.25s;
}

.hiro_socials a:hover{
    background:#38bdf8;
    color:#fff;
    transform:translateY(-3px);
}


/* ================================
   FOOTER HEADINGS
================================ */

.hiro_footer_box h3{
    font-size:17px;
    margin:3px 0 22px;
    font-weight:700;
    color:#fff;
}

.hiro_footer_box h3::after{
    content:"";
    display:block;

    width:32px;
    height:3px;

    border-radius:10px;
    background:#38bdf8;

    margin-top:9px;
}


/* ================================
   LINKS
================================ */

.hiro_footer_box ul{
    padding:0;
    margin:0;
    list-style:none;
}

.hiro_footer_box li{
    margin-bottom:13px;
}

.hiro_footer_box li a{
    display:flex;
    align-items:center;
    gap:9px;

    color:#aeb8c7;
    text-decoration:none;

    font-size:14px;

    transition:.25s;
}

.hiro_footer_box li a i{
    font-size:10px;
    color:#38bdf8;
}

.hiro_footer_box li a:hover{
    color:#fff;
    padding-left:5px;
}


/* ================================
   CONTACT
================================ */

.hiro_contact_item{
    display:flex;
    align-items:center;
    gap:13px;
    margin-bottom:18px;
}

.hiro_contact_icon{
    min-width:40px;
    width:40px;
    height:40px;

    border-radius:10px;

    display:flex;
    align-items:center;
    justify-content:center;

    background:#1f2937;
    color:#38bdf8;
}

.hiro_contact_item div{
    display:flex;
    flex-direction:column;
    gap:3px;
}

.hiro_contact_item small{
    color:#7f8b9c;
    font-size:11px;
}

.hiro_contact_item a,
.hiro_contact_item strong{
    color:#dbe4ef;
    font-size:13px;
    text-decoration:none;
    font-weight:500;
}

.hiro_contact_item a:hover{
    color:#38bdf8;
}


/* ================================
   BOTTOM FOOTER
================================ */

.hiro_footer_bottom{
    border-top:1px solid #263142;
}

.hiro_footer_bottom_inner{
    max-width:1250px;
    margin:auto;
    padding:20px 30px;

    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:20px;
}

.hiro_footer_bottom p{
    margin:0;
    color:#7f8b9c;
    font-size:12px;
}

.hiro_bottom_links{
    display:flex;
    align-items:center;
    gap:13px;
}

.hiro_bottom_links a{
    color:#8e9aaa;
    text-decoration:none;
    font-size:12px;
}

.hiro_bottom_links a:hover{
    color:#38bdf8;
}

.hiro_bottom_links span{
    width:4px;
    height:4px;
    background:#4b5563;
    border-radius:50%;
}


/* ================================
   TABLET
================================ */


@media(max-width:1000px){

    .hirock-container{
        padding-left:25px;
        padding-right:25px;
    }


    .hirock-about-grid,
    .hirock-why-grid{
        gap:40px;
    }


    .hirock-steps{
        grid-template-columns:
            repeat(2,minmax(0,1fr));
    }


    .hirock-network-grid{
        grid-template-columns:
            repeat(2,minmax(0,1fr));
    }


    .hirock-network-card:last-child{
        grid-column:1 / -1;
    }

}

@media(max-width:900px){

    .hiro_footer_container{
        grid-template-columns:1fr 1fr;
        gap:40px 30px;
    }

}


/* ================================
   MOBILE
================================ */


/* =========================================================
   MOBILE / TABLET
========================================================= */

@media(max-width:768px){

    /* HERO */

    .hirock-hero{

        min-height:650px;

        background-position:65% center;
    }


    .hirock-hero-overlay{

        background:
            linear-gradient(
                180deg,
                rgba(3,18,15,.75),
                rgba(3,18,15,.94)
            );
    }


    .hirock-hero-content{

        padding:80px 22px 60px;
    }


    .hirock-hero h1{

        font-size:clamp(40px,12vw,58px);

        letter-spacing:-1.5px;
    }


    .hirock-hero-description{

        font-size:15px;

        line-height:1.7;
    }


    .hirock-btn{

        min-width:125px;

        padding:13px 18px;
    }


    .hirock-downloads{

        align-items:flex-start;

        flex-direction:column;
    }


    .hirock-downloads > span{

        margin-bottom:2px;
    }


    /* GENERAL SECTIONS */

    .hirock-section{

        padding:75px 0;
    }


    .hirock-container{

        padding-left:20px;
        padding-right:20px;
    }


    .hirock-section-heading{

        margin-bottom:40px;
    }


    .hirock-section-heading h2{

        font-size:34px;
    }


    .hirock-section-heading p{

        font-size:14px;
    }


    /* ABOUT */

    .hirock-about-grid{

        grid-template-columns:1fr;

        gap:40px;
    }


    .hirock-about-image{

        min-height:400px;

        order:1;
    }


    .hirock-about-content{

        order:2;
    }


    .hirock-about-content h3{

        font-size:28px;
    }


    /* MISSION VISION */

    .hirock-purpose-grid{

        grid-template-columns:1fr;
    }


    .hirock-purpose-card{

        padding:27px;

        gap:18px;
    }


    /* HOW IT WORKS */

    .hirock-steps{

        grid-template-columns:1fr 1fr;

        gap:15px;
    }


    /* NETWORK */

    .hirock-network-grid{

        grid-template-columns:1fr;
    }


    .hirock-network-card:last-child{

        grid-column:auto;
    }


    /* WHY */

    .hirock-why-grid{

        grid-template-columns:1fr;

        gap:45px;
    }


    .hirock-benefits{

        grid-template-columns:1fr;
    }


    .hirock-why-image{

        min-height:400px;
    }


    /* VIDEOS */

    .hirock-video-grid{

        grid-template-columns:1fr;
    }


    /* FINAL */

    .hirock-final-content{

        padding:70px 20px;
    }

}




@media screen and (max-width:640px){

.image-text {
    position: absolute;
   
    width:95%;
    font-size: 30px;
    padding: 5px;

}
.alert{
  width:100%;
}
#myimage{
  height: 500px;
}
.main_form_holder{
width:95%;
}
}
@media(max-width:600px){

    .hiro_footer_container{
        grid-template-columns:1fr;
        padding:45px 22px;
        gap:35px;
    }

    .hiro_footer_bottom_inner{
        padding:20px 22px;

        flex-direction:column;
        align-items:flex-start;
        gap:12px;
    }

    .hiro_bottom_links{
        flex-wrap:wrap;
    }

}

/* =========================================================
   SMALL PHONES
========================================================= */

@media(max-width:480px){

    /* HERO */

    .hirock-hero-content{

        padding-left:18px;
        padding-right:18px;
    }


    .hirock-hero h1{

        font-size:40px;

        line-height:1.08;
    }


    .hirock-hero-buttons{

        width:100%;
    }


    .hirock-btn{

        flex:1;
    }


    .hirock-store{

        width:150px;

        box-sizing:border-box;
    }


    /* SECTIONS */

    .hirock-section{

        padding:60px 0;
    }


    .hirock-container{

        padding-left:17px;
        padding-right:17px;
    }


    .hirock-section-heading h2{

        font-size:30px;
    }


    /* ABOUT */

    .hirock-about-image{

        min-height:330px;

        border-radius:18px;
    }


    .hirock-image-badge{

        left:15px;
        right:15px;
        bottom:15px;
    }


    .hirock-about-content h3{

        font-size:25px;
    }


    /* MISSION */

    .hirock-purpose-card{

        grid-template-columns:1fr;

        padding:24px;

        gap:15px;
    }


    .hirock-purpose-icon{

        width:50px;
        height:50px;

        font-size:20px;
    }


    .hirock-purpose-card h3{

        font-size:20px;
    }


    /* HOW IT WORKS */

    .hirock-steps{

        grid-template-columns:1fr;
    }


    .hirock-step{

        padding:27px 22px;
    }


    /* WHY */

    .hirock-why-image{

        min-height:330px;

        border-radius:18px;
    }


    .hirock-floating-card{

        left:15px;
        right:15px;
        bottom:15px;
    }


    /* VIDEOS */

    .hirock-video-card{

        border-radius:17px;
    }


    .hirock-video-content{

        padding:20px;
    }


    /* FINAL */

    .hirock-final{

        min-height:400px;
    }


    .hirock-final-content h2{

        font-size:36px;
    }


    .hirock-final-content > p{

        font-size:14px;
    }

}
@media screen and (max-width:450px){

.about_us_control{
	width:100%;
		margin:0 auto;
		
}
}
@media screen and (max-width:400px){

	.gif_loader{
	width:100%;

}
.submit_form{
  width:100%;
}
.image-text {
	width:100%;
}
.logo{
	width:150px;
}
.download_butn{
  width:100%;
}
}
@media screen and (max-width:300px){



}