:root {
  font-size: 10px;
}






@media only screen and (min-width: 768px) {
  html {
      font-size: 10px;
  }
}

body {
  font-size: 1.6rem;
  font-family: 'Roboto', sans-serif;
  background-color: #f3f3f3;
}












.contactInfo a{

  color: #939393 !important;
    font-weight: 400;
}

.contactInfo a:hover{
color: #0765B4 !important;
}
       .secIcon1{
       


        border: 2px solid #0765b4;
        border-radius: 100%;
        margin: 0 auto;
        padding: 23%;
        
        background: url(../assets/video-tick.png);
        background-repeat: no-repeat;
        background-position: center;
        width: fit-content;
        height: fit-content;
        background-color: #fff;
        box-shadow: 0px 2px 2px rgb(0 0 0 / 25%);



      }
      .secItem:hover .secIcon1{

        border: 2px solid #fff;
        border-radius: 100%;
        margin: 0 auto;
        padding: 23%;
        background: url(../assets/video-tick-w.png);
        background-repeat: no-repeat;
        background-position: center;
        width: fit-content;
        height: fit-content;
        text-decoration: none;
        cursor: pointer;
        background-color: #1980d6;
        box-shadow: 0px 2px 2px rgb(0 0 0 / 25%);
        transition: all 0.7s ease-in-out;


       
      }





      .secIcon4{
       


        border: 2px solid #0765b4;
        border-radius: 100%;
        margin: 0 auto;
        padding: 23%;
        
        background: url(../assets/archive-tick.png);
        background-repeat: no-repeat;
        background-position: center;
        width: fit-content;
        height: fit-content;
        background-color: #fff;
        box-shadow: 0px 2px 2px rgb(0 0 0 / 25%);



      }
      .secItem:hover .secIcon4{

        border: 2px solid #fff;
        border-radius: 100%;
        margin: 0 auto;
        padding: 23%;
        background: url(../assets/archive-tick-w.png);
        background-repeat: no-repeat;
        background-position: center;
        width: fit-content;
        height: fit-content;
        text-decoration: none;
        cursor: pointer;
        background-color: #1980d6;
        box-shadow: 0px 2px 2px rgb(0 0 0 / 25%);
        transition: all 0.7s ease-in-out;


       
      }




      .secIcon5{
       


        border: 2px solid #0765b4;
        border-radius: 100%;
        margin: 0 auto;
        padding: 23%;
        
        background: url(../assets/setting.png);
        background-repeat: no-repeat;
        background-position: center;
        width: fit-content;
        height: fit-content;
        background-color: #fff;
        box-shadow: 0px 2px 2px rgb(0 0 0 / 25%);



      }
      .secItem:hover .secIcon5{

        border: 2px solid #fff;
        border-radius: 100%;
        margin: 0 auto;
        padding: 23%;
        background: url(../assets/setting.png);
        background-repeat: no-repeat;
        background-position: center;
        width: fit-content;
        height: fit-content;
        text-decoration: none;
        cursor: pointer;
        background-color: #1980d6;
        box-shadow: 0px 2px 2px rgb(0 0 0 / 25%);
        transition: all 0.7s ease-in-out;


       
      }










      .secIcon2{


        border: 2px solid #0765b4;
        border-radius: 100%;
        margin: 0 auto;
        padding: 23%;
        
        background: url(../assets/security-time.png);
        background-repeat: no-repeat;
        background-position: center;
        width: fit-content;
        height: fit-content;
        background-color: #fff;
        box-shadow: 0px 2px 2px rgb(0 0 0 / 25%);



       
      }
      .secItem:hover .secIcon2{


        border: 2px solid #fff;
        border-radius: 100%;
        margin: 0 auto;
        padding: 23%;
        background: url(../assets/security-time-w.png);
        background-repeat: no-repeat;
        background-position: center;
        width: fit-content;
        height: fit-content;
        text-decoration: none;
        cursor: pointer;
        background-color: #1980d6;
        box-shadow: 0px 2px 2px rgb(0 0 0 / 25%);
        transition: all 0.7s ease-in-out;


        
      }
 




p {
  margin: 0;
  margin-bottom: 1rem;
}

ul {
  margin: 0;
}

header {

  background-color: #FFFFFF;
}




header p {
  margin-bottom: 0;
}

.contactInfo {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 5px;
}

@media only screen and (min-width: 576px) {
  .contactInfo {
      flex-direction: row;
      gap: 15px;
      justify-content: flex-end;
  }
}

@media only screen and (min-width: 768px) {
  .contactInfo {
      justify-content: flex-start;
  }
}




.mailInfo {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: center;
}

.locInfo {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: center;
}


.contactInfo img {
  height: 2.4rem;
}

.logoInfo {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
}

.logoInfo img {
  height: 10rem;
}

@media only screen and (min-width: 576px) {
  .logoInfo {
      justify-content: flex-start;
      flex-direction: row;
      gap: 24px;
  }

  .logoInfo img {
      height: 3.6rem;
  }

  .mailInfo {
      justify-content: flex-start;
  }

  .locInfo {
      justify-content: flex-start;
  }
}


.header-container{
  max-width: 1140px !important;
  flex-direction: row;
    justify-content: space-between;
    gap: 0;
  
    margin-left: auto;
    margin-right: auto;
    display: flex;
    padding-top: 20px;
    padding-bottom: 20px;
}


.navbar {
  background-color: #0765B4;
  padding: 0 36px;
}

main {
  padding: 36px;
}

.section_1 {
  padding: 36px;
  background-color: #f3f3f3;
}

.section_2 {
  padding: 36px;
}

/* typography */

.title {
  font-weight: 700;
  font-size: 2rem;
  color: #171717;
  margin-bottom: 0;
}

.subtitle {
  font-size: 1.2rem;
  color: #616161;
}

.paragraph {
  font-size: 1.2rem;
  color: #616161;
}

li {
  font-size: 1.2rem;
  color: #171717;
}

.company_name {
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 21px;
  color:#2e2e2e ;
  font-weight: 800;
}

.navlink {
  color: #FFFFFF;
  font-weight: 600;
  border-bottom: 3px solid yellow;
  padding: 10px;
  font-size: 1.4rem;
}


.navlink:hover {
  color: #FFFFFF;
  text-decoration: none;
}

.contactInfo a {
  font-size: 1.4rem;
}

.titleHolder {
  margin-bottom: 24px;
}

footer {
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  text-align: center;
  padding: 18px 36px;
  background: linear-gradient(180deg, rgba(196, 196, 196, 0) 0%, rgba(196, 196, 196, 0.29) 100%);
  border: 1px solid #eee;
}
footer img {
  margin-right: 8px;
}
@media only screen and (min-width: 576px) {
  footer{
      flex-direction: row;
      justify-content: space-between;
  }
}

footer p {
  margin-bottom: 0;
  font-size: 1.4rem;
}
.gallery {
  display: flex;
  width: 100%;
  height: 300px;
  overflow: hidden;
}

.gallery-item {
  width: 100%;
  height: 100%;
}

.gallery-item img {
  height: fit-content;
}

.gallery-item-row {
  display: flex;
  width: 100%;
  height: 100%;
}

.title {
 
  text-align: center;
}
.title h2{

  font-weight: 600;
  margin-bottom: 5%;
  color: #2a3136;

}

.body-cage{
  padding-top: 5%;
padding-bottom: 5%;
  background-color: #F3F3F3;
}



.container .sec {
  display: flex;
  align-items: center;
}

a.secItem {
  display: table-column;
  justify-content: center;
  background-color: #ffffff;
  padding: 3%;
  margin-top: 2%;
  transition: all 1s;
  box-shadow: 0px 2px 2px rgb(0 0 0 / 25%);
  text-decoration: none;
}

.container .sec .secIcon {
  border: 1px solid #0765b4;
  border-radius: 100%;
  width: fit-content;
  margin: 0 auto;
  padding: 6%;
}

.container .sec .setTitle {
  margin-top: 39px;
  color: #0765b4;
  text-transform: uppercase;
  text-align: center;
  font-weight: 600;
}

p.pos_fixed {
  padding: 1em 0;
  margin: 0;
  text-align: center;
}

a.secItem:hover {
  background-color: #0765b4;
  color: #fff;
  cursor: pointer;
  transition: all .5s;
  transform : translateY(-10px);
}
a.secItem:hover .secIcon {
  border: 1px solid #fff;
  border-radius: 100%;
  width: fit-content;
  padding: 6%;
  margin: 0 auto;
}

a.secItem:hover .setTitle {
  color: #fff;
  margin-top: 39px;
  text-transform: uppercase;
  text-align: center;
}


.tpnumber{
  display: inline;
  }
  
  footer img{
      margin-right: 8px;
  }
  
  .tpHolder{
      margin-bottom: 12px;
  }
  
  @media only screen and (min-width: 576px) {
      .tpHolder{
          margin-bottom: 0;
      }
  }

  .footer_tex,.tpnumber{

    font-size: 1.4rem;
  }

  a.logo{
    text-decoration: none;
  }



  @media only screen and (max-width: 600px) {
.header-container{
flex-direction: column;

}

.mailInfo{
  margin-top: 10px;
}

  }