:root{
    --boxShadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}
body{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}
/* ---------------------------------------------------- Common --------  */
   .title_top{
    color: rgb(247, 6, 6);
    font-size: 1.2vw;
    margin: 0;
    padding: 0;
    font-weight: lighter;
}
.header3{
    font-size: 3.6vw;
    margin-top: 2px;
    color: #13539d;
    text-shadow: -1px -1px 1px rgba(255,255,255,.1), 1px 1px 1px rgba(0,0,0,.5);
    margin: 0;
    padding: 0;
}
.paragraph{
    font-size: 1.2vw;
    font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    transition: 1s ease;
}
/* ---------------------------------------------------- part top --------  */
.dhc_sec_one{
   height: 30vw;
   background: url(images/service1.avif);
   background-size: cover;
   background-attachment: fixed;
   background-color: #13539dc4;
   background-blend-mode: overlay;
   box-shadow: var(--boxShadow);
}
.sec_one_header{
    height: 30vw;
    position: absolute;
    width: 100%;
   text-align: center;
   
}
.sec_one_header h1{
    font-size: 7vw;
    padding: 40px 0 0 0;
    text-shadow: -1px -1px 1px rgba(255,255,255,.1), 1px 1px 5px rgba(0,0,0,.5);
    color: #d9d9d9;
    transition: 1s ease;
}
.sec_one_header hr{
    margin-top: -4vw;
    width: 200px;
}
.sec_one_header h3{
    font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    color: #ffffff;
    text-shadow: 3px 1px 3px #0000009c;
    font-size: 3vw;
    margin-top: 0px;
}
/* ---------------------------------------------------- part one --------  */
.dhc_sec_two{
    display:flex;
    flex-wrap: wrap;
    padding-top: 100px;
    padding-bottom: 80px;
    }
.sec_two_header{
   flex: 100%;
    text-align: center;
}
.sec_two_body{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    padding-inline: 50px;
    padding-top: 50px;
    gap: 5%;
}
.stwo_body_card1{
flex: 30%;
color: #000000;
text-align: center;
}
.card1_part1{
    background-color: #ffffff;
    height: 17vw;
}
.card1_part1 img{
   width: 100%;
   height: 100%;
    box-shadow: var(--boxShadow);
    border: 5px solid #ffffff;
}
.card1_part2{
    padding-top: 25px;
    text-align: center;
}

/*  -------------------------------- part two  ---------------------- */
.sec_two_para{
    padding-inline: 50px;
    padding-top: 80px;
    padding-bottom: 100px;
    background: linear-gradient(60deg, hsl(210, 100%, 24%) 80%, #488bd6);
    color: #ffffff;
    position: relative;
}
.sec_two_para h3{
    font-size: 3.6vw;
    margin-top: 2px;
    color: rgb(247, 6, 6);
    margin: 0;
    padding-bottom: 20px;
    text-align: center;
}
.sec_two_para h4{
    font-size: 2.6vw;
}
.sec_two_para p{
    text-align: center;
}
.para_flex{
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    padding-top: 50px;
}
.paraOne{
    flex: 40%;
    padding: 30px;
    margin-right: 30px;
    color: #ffffff;
    background-image: url(images/img126.avif);
    background-color:#0a0a0acc;
    background-size: cover;
    background-blend-mode:overlay;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    position: relative;
    border-radius: 5px;
}
.paraOne h4, .paraTwo h4{
    font-size: 2.6vw;
    padding-top: 0;
    padding-left: 0;
    padding-right: 0;
    margin-top: 0;
    margin-left: 0;
    margin-right: 0;
}
.questionMark{
    position: absolute;
    font-size: 15vw;
    color: rgba(247, 6, 6, 0.658);
    top: -8vw;
}
.paraTwo{
    flex: 40%;
    padding-top: 20px;
}
/*  ----------------------------------------------- part three -------- */
.sec_three_box{
     text-align: center;
     padding-block: 80px;
 }
 .sec_three_box h4{
     font-weight: lighter;
 }
  .sec_three_body2{
    padding-inline: 50px;
    padding-top: 50px;
    display: flex;
    flex-wrap: wrap;
    gap: 1%;
  }
.test_sec_one{
    flex: 20%;
}
.test_sec_one h5{
    font-size: 2vw;
}
.test_sec_one span{
    color: rgb(236, 20, 20);
}
.box_one{
height: 15vw;
color: #ffffff;
padding: 15px;
text-align: center;
background: linear-gradient(120deg, hsl(210, 100%, 24%) 80%, #488bd6);
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
margin-bottom: 10px;
border-radius: 5px;
overflow: hidden;
display: grid;
grid-template-columns: auto;
justify-content: center;
align-items: center;
}
.box_two{
height: 15vw;
color: #9dd125;
padding: 15px;
text-align: center;
background: linear-gradient(240deg, hsl(210, 100%, 24%) 80%, #488bd6);
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
margin-bottom: 10px;
border-radius: 5px;
overflow: hidden;
display: grid;
grid-template-columns: auto;
justify-content: center;
align-items: center;
}
.hiddenPara{
    opacity: 0;
    font-size: 1vw;
    font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}
.box_one:hover h5, .box_two:hover h5{
    display: none;
}
.box_one:hover .hiddenPara, .box_two:hover .hiddenPara{
    opacity: 1;
    transition: 1s ease;
}


/* ---------------------------------------------------- section four --------  */

.sec_four_part1{
    display: flex;
    flex-wrap: wrap;
    padding-top: 50px;
    padding-left: 50px;
    padding-right: 50px;
    padding-bottom: 70px;
    justify-content: center;
    align-items: center;
    background-color: #88b7e0;
}


/* ---------------------------------------------------- screen 1900 --------  */
@media screen and (min-width: 1900px){
    .dhc_sec_one{
        height: 30vw;
     }

}
/* ---------------------------------------------------- screen 751 px --------  */
@media screen and (max-width: 751px){
    /* --------------------------------------------- Common 751--------  */
   .title_top{
    font-size: 2.6vw;
}
.header3{
    font-size: 4.6vw;
}
.paragraph{
    font-size: 2.5vw;
}
/* ---------------------------------------------- part top --751------  */
.dhc_sec_one{
    height: 35vw;
    background-attachment: unset;
}
.sec_one_header{height: 35vw;}
.sec_one_header h1{
    padding: 8vw 0 0 0;
}
.sec_one_header h3{
    font-size: 3.6vw;
    margin-top: -1vw;
}
/* ------------------------------------------------- part one --751----  */
.dhc_sec_two{
    padding-top: 70px;
    padding-bottom: 50px;
    }
.sec_two_body{
    padding-inline: 20px;
    padding-top: 30px;
    gap: 3%;
}
/*.stwo_body_card1{
flex: 30%;
}*/
.card1_part1{height: 18vw;}
.card1_part2{padding-top: 5px;}

/*  -------------------------------- part two  751------------------- */
.sec_two_para{
    padding-inline: 20px;
    padding-top: 70px;
    padding-bottom: 70px;
}
.sec_two_para h3{
    font-size: 4.6vw;
    margin-top: 2px;
    padding-bottom: 10px;
}
.sec_two_para h4{
    font-size: 4vw;
}
.paraOne{
    flex: 100%;
    padding: 30px;
    margin-right: unset;
}
.paraOne h4, .paraTwo h4{font-size: 4vw;}
.questionMark{
    font-size: 25vw;
    top: -15vw;
}
.paraTwo{
    flex: 100%;
    padding-top: 50px;
}
/*  ----------------------------------------------- part three 751----- */
.sec_three_box{padding-block: 70px;}
  .sec_three_body2{
    padding-inline: 20px;
    padding-top: 30px;
    gap: 2%;
  }
.test_sec_one{flex: 40%;}
.test_sec_one h5{font-size: 3.6vw;}
.box_one, .box_two{
height: 25vw;
padding: 10px;
box-shadow: unset;
}
.hiddenPara{font-size: 2vw;}
}

/* ---------------------------------------------------- 500 --------  */
@media screen and (max-width: 500px){
 /* --------------------------------------------- Common 500--------  */
 .title_top{
    font-size: 4.6vw;
}
.header3{
    font-size: 8vw;
}
.paragraph{
    font-size: 4.6vw;
}
/* ---------------------------------------------- part top --500------  */
.dhc_sec_one{height: 70vw;}
.sec_one_header{height: 70vw;}
.sec_one_header h1{
    font-size: 10vw;
    padding: 10vw 0 0 0;
}
.sec_one_header h3{font-size: 4.6vw;}
/* ------------------------------------------------- part one --500----  */
.dhc_sec_two{padding-top: 60px;
}
.sec_two_body{
    padding-inline: 20px;
    padding-top: 30px;
}
.stwo_body_card1{
    flex: 100%;
     margin-bottom: 15px;
    }
.card1_part1{height: 50vw;}
.card1_part2{padding-top: 5px;}
.card1_part1 img{
   height: unset;
    box-shadow: none;
    border: none;
    border-radius: 5px;
}
/*  -------------------------------- part two  500------------------ */
.sec_two_para h3{font-size: 8vw;}
.sec_two_para h4{font-size: 6vw;}
.paraOne h4, .paraTwo h4{font-size: 6vw;}
/*  ----------------------------------------------- part three 500----- */
.test_sec_one{flex: 100%;}
.test_sec_one h5{font-size: 5vw;}
.box_one, .box_two{height: 40vw;}
.hiddenPara{font-size: 3.5vw;}

}