* { box-sizing: border-box; margin: 0; padding: 0; }

html,body { font-size: 16px; font-family: "DM Sans", sans-serif; background: #fff; color: #000; line-height: 1.7em; }

a { text-decoration: none !important; color: unset ; }
ul { list-style: none; }
img { vertical-align: middle; }

p { font-size: 16px; }

h1,h2,h3,h4,h5,h6 { color: #000; line-height: 1.3em; }
section { overflow: hidden; }
main { max-width: 1920px;}
 
.container { max-width: 1140px; margin: auto; }
.widget-section { display: block; padding: 60px 16px; position: relative; }

button { border: 0; outline: 0; font-family: var(--ff); letter-spacing: 1px; }

:root {

	--c1 : #282828;
	--c2 : #686868;
	--c3 : #fff;
	--c4 : #E63335;
	--lg: ;
  --bc1: #C4DFA9;
  --bc2: #F7F3EE;

	--bs: 0 3px 15px 0 #0000001a;
	--bs2 : 0 3.4px 2.7px -30px #0000000f, 0 8.2px 8.9px -30px #00000012, 0 25px 40px -30px #00000033;
	--bgC1 :#E7E9EB;

	--ts : all 0.5s ease-in-out;

	--gbg : linear-gradient(to right, var(--c1) 0%, var(--c2) 100%);
	--gbgr : linear-gradient(to right, var(--c2) 0%, var(--c1) 100%);

	--ff : "Font Awesome 6 Pro";
	--fs : 40px;
}

/********************************** Header Css Part *********************************/
.headerPro{
    width: 100%;
    height: 18vh;
    position: sticky;
    top: 0;
    background-color: #fff;
    box-shadow: var(--bs);
    z-index: 99;
}
.navHeader{
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: space-around;
    align-content: center;
    /* position: sticky; */
}
.leftSideHeader{
    width: 200%;
    align-content: baseline;
}
.ulleftHeader{
    display: flex;
    justify-content: space-evenly;
    justify-items: center;
    width: 100%;
    margin-top: 4.0%;
    font-weight: 600;
    line-height: 50px;
}
.ulleftHeader li a{
    display: block;
}
.num{
    border: 2px solid;
    width: 18%;
    text-align: center;
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
    border-bottom-left-radius: 30px;
    background-color: var(--c4);
    color: #fff;
}
.logoHeader {
    width: 100%;
}
.logoHeader a>img{
    display: inline-block;
    width: 33%;
}
.ulleftHeader li a:hover{
  color:#E63335;
  transition: .5s ease-in-out;
  text-shadow: 1px 1px 2px #E63335;
}
.num a:hover{
  color: #fff !important;
  transition: 300ms all ease;
}
.num:hover{
  box-shadow: 2px 2px 2px 2px #E63335;
  transition: .5s ease-in-out;
  transform: scale(1.1);
}
#sidebar-active{
    display: none;
  }
  .open-sidebar-button, .close-sidebar-button{
    display: none;
  }
/******************************************* Header Mobile Responsive *********************************************/
@media only screen and (max-width: 480px){
    * { box-sizing: border-box; margin: 0; padding: 0; }
    .links-container{
      flex-direction: row;
      align-items: flex-start;
      position: fixed;
      top: 0;
      right: -100%;
      z-index: 99;
      width: 300px;
      color: var(--c1);
      background-color: var(--c3);
      box-shadow: var(--bs);
      transition: 0.75s ease-out;
    }
    nav a{
      height: auto;
      width: 100%;
      justify-content: flex-start;
    }
    .open-sidebar-button, .close-sidebar-button{
      padding: 20px;
      display: block;
    }
    #sidebar-active:checked ~ .links-container{
      right: 0;
    }
    #sidebar-active:checked ~ #overlay{
      height: 100%;
      width: 100%;
      position: fixed;
      top: 0;
      left: 0;
      z-index: 99;
    }
    .ulleftHeader{
        display: grid;
        justify-items: center;
        align-items: center;
        text-align: center;
    }
    .num{
        width: 100%;
    }
    .logoHeader {
        width: 100%;
    }
    .logoHeader a>img{
        display: inline-block;
        width: 160px;
    }
  }

  /**************************************** Header Tab Respnsive ********************************************/
@media (min-width:500px) and (max-width:1024px){
    .links-container{
        flex-direction: row;
        align-items: flex-start;
        position: fixed;
        top: 0;
        right: -100%;
        z-index: 99;
        width: 300px;
        background-color: var(--c3);
        box-shadow: var(--bs);
        transition: 0.75s ease-out;
      }
      nav a{
        height: auto;
        width: 100%;
        /* padding: 20px 30px; */
        justify-content: flex-start;
      }
      .open-sidebar-button, .close-sidebar-button{
        padding: 20px;
        display: block;
      }
      #sidebar-active:checked ~ .links-container{
        right: 0;
      }
      #sidebar-active:checked ~ #overlay{
        height: 100%;
        width: 100%;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 99;
      }
      .ulleftHeader{
        display: grid;
        justify-items: center;
        align-items: center;
        text-align: center;
    }
    .num{
        width: 100%;
    }
    .logoHeader {
        width: 100%;
    }
    .logoHeader a>img{
        display: inline-block;
        width: 245px;
    }
}

/************************************ Footer Css  ************************************/

.footerContent{
  width: 100%;
  height: auto;
  display: block;
  position: relative;
  background-color: #54A9DF;
}
.footerContent::before{
  content: "";
  background-image: url("assets/images/top_white_wave_01.png");
  width: 100%;
  height: 25%;
  background-size: cover;
  position: absolute;
  right: 0;
  top: -2px;
  background-position: center;
}
.footContainer{
  width: 100%;
  margin-top: 5%;
  height: auto;
  padding: 15% 5% 10% 5%;
  display: flex;
  justify-content: space-around;
}
.divRightSide{
  width: 20%;
  height: auto;
}
.divRightSide>img{
  width: 100%;
  height: auto;
}
.divRightSide{
  display: grid;
  gap: 15%;
}
.iconBtns{
  display: flex;
  gap: 15%;
}
.iconBtns>a:hover{
  transform: scale(1.1);
  box-shadow: var(--bs);
}
.iconBtns>a{
  border: 2px solid red;
  font-size: 20px;
  width: 100%;
  height: 40px;
  line-height: 38px;
  text-align: center;
  align-items: center;
  border-radius: 50%;
  background-color: var(--c4);
  transition: .5s all ease;
}
.iconBtns>a>i{
  margin-top: 15%;
  color: #fff;
}
.Links{
  display: grid;
  width: 15%;
  line-height: 50%;
}
.location{
  width: 150%;
  display: flex;
  gap: 10%;
  margin-top: 7%;
}
.locDetails .loc{
  font-size: 18px;
  font-weight: 800;
  color: #FFB129;
}
.loc+p{
  color: #fff;
}
.locImg{
  width: 25%;
}
.contactUs h3{
  font-size: 25px;
  font-family: "Akaya Kanadaka", system-ui ;
  font-weight: bolder;
}
.Links h3{
  font-size: 25px;
  font-family: "Akaya Kanadaka", system-ui ;
  font-weight: bolder
}
.Links a{
  font-size: 17px;
  font-weight: 700;
  color: #fff;
  text-decoration: none;
}
.Links a:hover{
  color: #FFB129;
}
.footbottom{
  display: flex;
  justify-content: space-around;
}
.footbottom a:hover{
  color: var(--c4);
}

/************************************* For Mobile Responsive *****************************************/

@media only screen and (max-width:480px){
  .footerContent::before{
    content: "";
    width: 100%;
    height: 15%;
    background-size: cover;
    position: absolute;
    right: 0;
    top: -3;
    background-position: center;
  }
  .footerContent{
    width: 100%;
  }
  .footContainer{
    width: 100%;
    display: grid;
    /* margin-top: 60%; */
  }
  .divRightSide{
    width: 100%;
    height: auto;
  }
  .divRightSide>img{
    margin-top: 83%;
    width: 100%;
    height: auto;
  }
  .Links{
    width: 100%;
    height: auto;
    margin-top: 40%;
    display: grid;
    line-height: 50px;
  }
  .Links h3{
    font-size: 50px;
    margin-bottom: 8%;
  }
  .Links a{
    font-size: 20px;
  }
  .contactUs{
    margin-top: 15%;
    width: 100%;
    height: auto;
    display: grid;
    line-height: 30px;
  }
  .contactUs h3{
    font-size: 50px;
    margin-bottom: 8%;
  }
  .locImg{
    width: 20%;
  }
  .location{
    width: 100%;
    display: grid;
  }
  
}

/************************************* Responsive For Tab *******************************/

@media (min-width:500px) and (max-width:1024px){
  .footerContent::before{
    content: "";
    width: 100%;
    height: 10%;
    background-size: cover;
    position: absolute;
    right: 0;
    top: -3;
    background-position: center;
  }
  .footerContent{
    width: 100%;
  }
  .footContainer{
    width: 100%;
    display: grid;
    /* margin-top: 60%; */
    justify-content: flex-start;
  }
  .divRightSide{
    width: 100%;
    height: auto;
  }
  .divRightSide>img{
    margin-top: 50%;
    width: 70%;
    height: auto;
  }
  .iconBtns>a{
    border: 2px solid red;
    font-size: 50px;
    width: 167px;
    height: 100px;
    line-height: 96px;
    text-align: center;
    align-items: center;
    border-radius: 50%;
    background-color: var(--c4);
    transition: .5s all ease;
  }
  .iconBtns>a>i{
    margin-top: 15%;
    color: #fff;
  }
  .Links{
    width: 100%;
    height: auto;
    margin-top: 40%;
    display: grid;
    line-height: 50px;
  }
  .Links h3{
    font-size: 50px;
    margin-bottom: 8%;
  }
  .Links a{
    font-size: 30px;
  }
  .contactUs{
    margin-top: 15%;
    width: 100%;
    height: auto;
    display: grid;
    line-height: 30px;
  }
  .contactUs h3{
    font-size: 50px;
    margin-bottom: 8%;
  }
  .locImg{
    width: 10%;
  }
  .location{
    width: 100%;
  }
  .locDetails>p{
    font-size: 18px;
  }
  
}