html { scroll-behavior: smooth; }



*{ margin: 0; padding: 0; box-sizing: border-box; letter-spacing: 0.15px; } 
*::before,
*::after {
  box-sizing: border-box;
}


.bgf2f2f2 {
  background-color: #f2f2f2;
}
.bgfff {
  background-color: #fff !important; 
}
.bgffffff {
  background-color: #fff !important; 
}

a { text-decoration: none; }

:root{
    --fc-nav-color :#303030;
    --fc-section-title-01 :#ff0000;
    --fc-section-title-02 :#ff0000;
    --bg-body :#fff;
    --bg-container : #fff;
    --bg-nav : #2E247D;
    --bg-footer :#e7e7e7;
    --p-color :#555;
    --p01-color :#555;
    --p02-color :#555;
    --pmain-color : #555;
}

 
*,
::after,
::before {
    margin: 0px;
    padding:0px;
    box-sizing: border-box;
}
*:focus {
    outline-width: 2px;
    outline-offset: 1px;
}
ul {
    list-style-type: none;
}
a {
    text-decoration: none;
}
body {
    background-color:var(--bg-body);
    font-family: Arial, Helvetica, sans-serif;

} 




/*BORDER CODE END ////////////////////////// */
.border { border: solid 1px #e7e7e7; }
.border-left { border-left: solid 1px #e7e7e7; }
.border-right { border-right: solid 1px #e7e7e7; }
.border-bottom { border-bottom: solid 1px #e7e7e7; }
.border-top { border-top: solid 1px #e7e7e7; }
.border-none { border: none !important; }




  /*CLEAR CSS START*/
  .clear0 { clear: both; height: 0px;}
  .clear10 { clear: both; height: 10px;}
  .clear20 { clear: both; height: 20px;}
  .clear30 { clear: both; height: 30px;}
  .clear40 { clear: both; height: 40px;}
  .clear50 { clear: both; height: 50px;}
  .clear60 { clear: both; height: 60px;}
  .clear70 { clear: both; height: 70px;}
  .clear80 { clear: both; height: 80px;}
  .clear90 { clear: both; height: 90px;}
  .clear100 { clear: both; height: 100px;}
  /* CLEAR CSS END   */ 
  
   
.googlemap   {
  width: 100%;
  margin: 0px;
  padding: 0px;
}
.googlemap   iframe {
  width: 100%;
  margin: 0px;
  padding: 0px;
  border: 0;
  min-height: 450px;
}
 .google-map {
  width: 100%;
  margin: 0px;
  padding: 0px;
}
 .google-map iframe {
  width: 100%;
  margin: 0px;
  padding: 0px;
  border: 0;
  min-height: 450px;
}





input[type=text] {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  box-sizing: border-box;
}




input[type=email] {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  box-sizing: border-box;
}


input[type=tel] {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  box-sizing: border-box;
}





  input[type=submit] {
  background-color: #04AA6D;
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

/* When moving the mouse over the submit button, add a darker green color */
 input[type=submit]:hover {
  background-color: #45a049;
}


 
/* Style inputs with type="text", select elements and textareas */
select, textarea {
  width: 100%; /* Full width */
  padding: 12px; /* Some padding */ 
 
  border-radius: 4px; /* Rounded borders */
  box-sizing: border-box; /* Make sure that padding and width stays in place */
  margin-top: 6px; /* Add a top margin */
  margin-bottom: 16px; /* Bottom margin */
  resize: vertical /* Allow the user to vertically resize the textarea (not horizontally) */
}

  
/*0001 PAGE LAYOUT CSS START*/
#pagelayout {
    width: 100%; 
}
#pagelayout .pagelayout-in {
    width: 96% ;
    padding: 2%;
    margin: 0px auto;
    clear: both; 
}
#pagelayout .section {
    width: 96% ;
    padding: 2%;
    margin: 0px auto;
    clear: both; 
}
.pagelayout {
    width: 100%; 
}
.pagelayout .pagelayout-in {
    width: 96% ;
    padding: 2%;
    margin: 0px auto;
    clear: both; 
}
.pagelayout .section {
    width: 96% ;
    padding: 2%;
    margin: 0px auto;
    clear: both; 
}
.container {
    width: 100%;
    max-width: 1250px;
    margin-left: auto;
    margin-right: auto; 
    padding:0px 20px;
}
/*0001 PAGE LAYOUT CSS START*/




/*RADIUS CODE START */

.radius0 { border-radius: 0px !important;}
.radius1 { border-radius: 1px;}
.radius2 { border-radius: 2px;}
.radius3 { border-radius: 3px;}
.radius4 { border-radius: 4px;}
.radius5 { border-radius: 5px;}
.radius6 { border-radius: 6px;}
.radius7 { border-radius: 7px;}
.radius8 { border-radius: 8px;}
.radius9 { border-radius: 9px;}
.radius10 { border-radius: 10px;}
.radius11 { border-radius: 11px;}
.radius12 { border-radius: 12px;}
/*RADIUS CODE END */

/*BORDER CODE END ////////////////////////// */










/*IMMAGES CODE START*/
img { width: 100%; overflow: hidden; } 
.img { width: 100%; overflow: hidden; }
.img img { width: 100%;  overflow: hidden; }
.img .w100 { width: 100%; overflow: hidden; }
.img .w-100 { width: 100%; overflow: hidden; }
.img img .w100 { width: 100%; overflow: hidden; }
.img img .w-100 { width: 100%; overflow: hidden; }
.img100 { width: 100%; overflow: hidden; }
.img-100 { width: 100%; overflow: hidden; }
.w100 { width: 100%; overflow: hidden; }
.w-100 { width: 100%; overflow: hidden; }
/*IMAGE CODE END */

 


/*0002 PARAGRAPH  CSS START */
p {
    font-size: 16px;
    line-height: 22px;
    margin-bottom: 16px;
    color: var(--p-color);
}
.p16 {
    font-size: 16px;
    line-height: 22px;
    margin-bottom: 16px;
    color: var(--p-color);
}
.p18 {
    font-size: 18px;
    line-height: 26px;
    margin-bottom: 16px;
    color: var(--p-color);
}

.p20 {
    font-size: 20px;
    line-height: 28px;
    margin-bottom: 16px;
    color: var(--p01-color);
  }
  
.p22 {
    font-size: 22px;
    line-height: 32px;
    margin-bottom: 16px;
    color: var(--p02-color);
  }
.pMain {
    font-size: 24px;
    line-height: 36px;
    color: var(--pmain-color);
}
.p-main {
    font-size: 24px;
    line-height: 36px;
    color: var(--pmain-color);
}



.p-title01 {
  font-size: 22px;
    color: #015fc9;
    font-weight: 500;
    line-height: 34px;
    letter-spacing: -0.02em;
    padding-bottom: 9px;
    margin: 5px 0px 5px 0px;
} 

/*0002 PARAGRAPH  CSS START */







 

/*PADDING CSS START */
.padding0 {padding: 0px; } .padding5 {padding: 5px; } .padding10 {padding: 10px; } .padding15 {padding: 15px; } .padding20 {padding: 20px; } .padding25 {padding: 25px; } .padding30 {padding: 30px; } .padding35 {padding: 35px; } .padding40 {padding: 40px; } .padding45 {padding: 45px; } .padding50 {padding: 50px; } .padding55 {padding: 55px; } .padding60 {padding: 60px; } .padding65 {padding: 65px; } .padding70 {padding: 70px; } .padding75 {padding: 75px; } .padding80 {padding: 80px; } .padding85 {padding: 85px; } .padding90 {padding: 90px; } .padding95 {padding: 95px; } .padding100 {padding: 100px; }
/*PADDING CSS END */



/*BORDER CSS START*/
.border {
    border:solid 1px #e7e7e7;
}
/*BORDER CSS END*/



/*Alignment Start */
.left {
    text-align: left;
  }
.right {
    text-align: left;
  }
.center {
    text-align: center;
  }
.left-center {
    text-align: left;
  }
.right-center {
    text-align: right;
  }
  .left-right { text-align: left; }
 
.right-left { text-align: right; }
.center-left { text-align: center; }
.center-right { text-align: center; }
 
  /*ALIGN CSS START */
 
 
 
  



  .youtube {
    width: 100%;
    height: fit-content;
  }
  .youtube iframe {
    width: 100%;
    min-height: 320;
  }
  .video {
    width: 100%;
    height: fit-content;
  }
  .video iframe {
    width: 100%;
    min-height: 320;
  }
 

  /*GRID START */
/*www.jananiwebsolutions.com*/

.grid01 {
  display: grid;
  grid-template-columns: 1fr; /* Single column */
  gap: 0px; 
  margin: auto;
}


/*GRID02 START */
.grid02 {
  display: grid;
grid-template-columns: 1fr 1fr; /* 2 equal columns */
gap: 0; /* No gap between columns */
} 
/* Media Queries */
@media screen and (max-width: 768px) {
  .grid02 {
    grid-template-columns: 1fr; /* Stacks to 1 column on smaller screens */
  }
}

@media screen and (max-width: 480px) {
  .grid02 {
    grid-template-columns: 1fr; /* Same for very small screens */
  }
}
/*GRID02 END  */



/*GRID 03 START */
 

.grid03 {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 equal-width columns */
  gap: 0; /* No gaps between columns */
}


/* Media Queries for responsiveness */

/* For tablets and below (up to 768px) */
@media (max-width: 768px) {
  .grid03 {
    grid-template-columns: repeat(2, 1fr); /* 2 columns */
  }
}

/* For mobile devices and below (up to 480px) */
@media (max-width: 480px) {
  .grid03 {
    grid-template-columns: 1fr; /* 1 column */
  }
}
/*GRID 03 END */


/*GRID 04 Start */
.grid04 {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* Default: 4 columns */
  gap: 0px; /* Spacing between grid items */
}
 
/* Medium Screens (Tablets) */
@media (max-width: 992px) {
  .grid04 {
    grid-template-columns: repeat(2, 1fr); /* 2 columns */
  }
}

/* Small Screens (Phones) */
@media (max-width: 600px) {
  .grid04 {
    grid-template-columns: repeat(1, 1fr); /* 1 column */
  }
}

/*GRID 04 End */


/*GRID 05 Start*/
/* Base grid (for large screens) */
.grid05 {
  display: grid;
  grid-template-columns: repeat(5, 1fr); /* 5 equal columns */
  gap: 0px; /* space between items */
}

/* Medium screens (e.g., tablets) */
@media (max-width: 1024px) {
  .grid05 {
    grid-template-columns: repeat(3, 1fr); /* 3 columns */
  }
}

/* Small screens (e.g., mobile phones) */
@media (max-width: 600px) {
  .grid05 {
    grid-template-columns: repeat(2, 1fr); /* 2 columns */
  }
}

/* Very small screens (e.g., mobile phones in portrait mode) */
@media (max-width: 400px) {
  .grid05 {
    grid-template-columns: 1fr; /* 1 column */
  }
}

/*GRID 05 END */



/* Grid 06 */
.grid06 {
  display: grid;
  grid-template-columns: repeat(6, 1fr); /* 6 equal columns */
  gap: 0px; /* Space between grid items */
}

/* Responsive: 4 columns for tablets and medium screens */
@media (max-width: 1024px) {
  .grid06 {
    grid-template-columns: repeat(4, 1fr); /* 4 columns for medium screens */
  }
}

/* Responsive: 2 columns for smaller screens like mobile */
@media (max-width: 600px) {
  .grid06 {
    grid-template-columns: repeat(2, 1fr); /* 2 columns for small screens */
  }
}

/* Responsive: 1 column for extra small screens */
@media (max-width: 400px) {
  .grid06 {
    grid-template-columns: 1fr; /* 1 column for very small screens */
  }
}


/*Grid 07 Start*/

.grid07 {
  display: grid;
  grid-template-columns: repeat(7, 1fr); /* 7 equal columns */
  gap: 0px; /* Space between grid items */
}

/* For smaller screens, reduce the number of columns */
@media (max-width: 1200px) {
  .grid07 {
    grid-template-columns: repeat(5, 1fr); /* 5 columns on medium screens */
  }
}

@media (max-width: 900px) {
  .grid07 {
    grid-template-columns: repeat(3, 1fr); /* 3 columns on smaller screens */
  }
}

@media (max-width: 600px) {
  .grid07 {
    grid-template-columns: 1fr; /* 1 column on very small screens */
  }
}


/*Grid 08 Start */
/* Default: 8 columns */
.grid08 {
  display: grid;
  grid-template-columns: repeat(8, 1fr); /* 8 equal-width columns */
  gap: 0px; /* Adjust gap between columns */
}

/* For smaller screens, make it responsive */
@media (max-width: 1200px) {
  .grid08 {
    grid-template-columns: repeat(6, 1fr); /* 6 columns on screens smaller than 1200px */
  }
}

@media (max-width: 992px) {
  .grid08 {
    grid-template-columns: repeat(4, 1fr); /* 4 columns on screens smaller than 992px */
  }
}

@media (max-width: 768px) {
  .grid08 {
    grid-template-columns: repeat(2, 1fr); /* 2 columns on screens smaller than 768px */
  }
}

@media (max-width: 480px) {
  .grid08 {
    grid-template-columns: 1fr; /* 1 column on very small screens */
  }
}

/*Grid09 Start*/
.grid09 {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  gap: 0px; /* Adjust gap between grid items */
}

/* For medium screens (e.g., tablets) */
@media (max-width: 1024px) {
  .grid09 {
    grid-template-columns: repeat(6, 1fr); /* 6 columns for medium screens */
  }
}

/* For smaller screens (e.g., phones) */
@media (max-width: 768px) {
  .grid09 {
    grid-template-columns: repeat(4, 1fr); /* 4 columns for small screens */
  }
}

/* For very small screens (e.g., mobile phones in portrait) */
@media (max-width: 480px) {
  .grid09 {
    grid-template-columns: repeat(2, 1fr); /* 2 columns for very small screens */
  }
}


/*Grid 10 Start */
/* Basic grid setup */
.grid10 {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 0px; /* Adjust gap between grid items */
}

/* For medium screens (e.g., tablets) */
@media (max-width: 1024px) {
  .grid10 {
    grid-template-columns: repeat(8, 1fr); /* 8 columns for medium screens */
  }
}

/* For smaller screens (e.g., phones) */
@media (max-width: 768px) {
  .grid10 {
    grid-template-columns: repeat(6, 1fr); /* 6 columns for small screens */
  }
}

/* For very small screens (e.g., mobile phones in portrait) */
@media (max-width: 480px) {
  .grid10 {
    grid-template-columns: repeat(3, 1fr); /* 3 columns for very small screens */
  }
}




/*Grid 11 Start*/
.grid11 {
  display: grid;
  grid-template-columns: repeat(11, 1fr);
  gap: 0px; /* Adjust gap between grid items */
}

/* For medium screens (e.g., tablets) */
@media (max-width: 1024px) {
  .grid11 {
    grid-template-columns: repeat(9, 1fr); /* 9 columns for medium screens */
  }
}

/* For smaller screens (e.g., phones) */
@media (max-width: 768px) {
  .grid11 {
    grid-template-columns: repeat(7, 1fr); /* 7 columns for small screens */
  }
}

/* For very small screens (e.g., mobile phones in portrait) */
@media (max-width: 480px) {
  .grid11 {
    grid-template-columns: repeat(4, 1fr); /* 4 columns for very small screens */
  }
}



/*Grid 12 Start */
/* Basic grid setup */
.grid12 {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 0px; /* Adjust gap between grid items */
}

/* For medium screens (e.g., tablets) */
@media (max-width: 1024px) {
  .grid12 {
    grid-template-columns: repeat(10, 1fr); /* 10 columns for medium screens */
  }
}

/* For smaller screens (e.g., phones) */
@media (max-width: 768px) {
  .grid12 {
    grid-template-columns: repeat(8, 1fr); /* 8 columns for small screens */
  }
}

/* For very small screens (e.g., mobile phones in portrait) */
@media (max-width: 480px) {
  .grid12 {
    grid-template-columns: repeat(4, 1fr); /* 4 columns for very small screens */
  }
}

/*GRID END */
.flex { width: 100%; display: flex; flex-wrap: nowrap; justify-content: space-between; }
.flex .flex-box { width: 100%; flex-grow: 1; }

.flex-inline { width: 100%; display:inline-flex; flex-wrap: nowrap; }
.flex-inline .flex-inline-box { padding: 10px;  flex-grow: 0;  margin: 10px 0px; }


.gitem01 {
  border: solid 1px #e7e7e7;
  padding: 10px;
}
.gitem02 {

  padding: 10px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
} 
.gitem03 {
  background-color: lightblue;
  padding: 20px;
  text-align: center;
  border-radius: 8px;
  font-size: 18px;
}




/* LIST CSS START //////////////////////////////////  */
.list-normal {
  width: 100%;
  margin: 10px 0px 1rem 0px;
  padding: 0px;
}
.list-normal li {
  list-style: none;
  font-size: 18px;
  line-height: 32px;
  color: #333;
  font-family: Arial, Helvetica, sans-serif;

}



.list-disc {
  width: 100%;
  margin: 10px 0px 1rem 0px;
  padding: 0px;
}
.list-disc li {
  list-style:disc;
  font-size: 18px;
  line-height: 32px;
  color: #333;
  font-family: Arial, Helvetica, sans-serif;
  margin-left: 16px;

}



.list-bullet {
  width: 100%;
  margin: 0px 0px 1rem 1rem;
  padding: 0px;
}
.list-bullet li {
  list-style: none;
  font-size: 14px;
  line-height: 24px;
  color: #333;
  font-family: Arial, Helvetica, sans-serif;
}
.list-bullet li:before {
  content: url('../images/icon-tickmark.png');
  margin-left: -1.5em;
}

.list-decimal {
  width: 100%;
  margin: 0px 0px 1rem 1rem;
  padding: 0px;
}
.list-decimal li {
  list-style: decimal;
  font-size: 14px;
  line-height: 24px;
  color: #333;
  font-family: Arial, Helvetica, sans-serif;
}
/* LIST CSS END //////////////////////////////////  */





.parallax {
  background-image: url("../images/parallax.jpg");
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  padding: 100px 8%;
  margin: 0px 0px;
}
.parallax .parallax-in {
  width: 100%;
  margin: 0px auto;
  color: #fff;
  font-size: 46px;
  font-weight: 600;
}
.parallax .parallax-in h2 {
  font-size: 40px;
  line-height: 65px;
}
.parallax .parallax-in h2 span {
  font-size: 30px;
  color: #ffff00;
}
 /*

<!-- Container element -->
<div class="parallax"></div>
*/

.parallax2 {
  background-image: url("../images/parallax.jpg");
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  padding: 80px 8%;
  margin: 40px 0px;

}
.parallax2 .parallax-in {
  width: 100%;
  margin: 0px auto;
}



.radius0 { border-radius: 0px !important;}
.radius1 { border-radius: 1px;}
.radius2 { border-radius: 2px;}
.radius3 { border-radius: 3px;}
.radius4 { border-radius: 4px;}
.radius5 { border-radius: 5px;}
.radius6 { border-radius: 6px;}
.radius7 { border-radius: 7px;}
.radius8 { border-radius: 8px;}
.radius9 { border-radius: 9px;}
.radius10 { border-radius: 10px;}
.radius11 { border-radius: 11px;}
.radius12 { border-radius: 12px;}