body{margin:0}




html,body{font-family:Verdana,sans-serif;font-size:16px;line-height:1.6}html{overflow-x:hidden}
h1{font-size:36px}h2{font-size:30px}h3{font-size:24px}h4{font-size:20px}h5{font-size:18px}h6{font-size:16px;}

.heading-style {
  font-weight: bold;
  color: grey;
}

.heading-underline {
  padding-bottom: 2px;
  border-bottom: rgba(255, 0, 0, 0.8) 1px solid;
}

img {
    width: 100%;
    height: auto;
    max-width: 100%;
}

p
{
  padding-top: 10px;
  padding-bottom: 0px;
  padding-left: 20px;
  padding-right: 20px;
}


/* MAIN-HEADER after FIXED-TOP-BAR of 60px */

#main-header {

  z-index: 0;
  margin-top:60px; /* positioned Matching 'TOP-FIXED BAR' Height of 60 px */
}


.header-style {
  
  background-color: #f4511e; /*Theme Red  - MATCH with Form Elements - Button*/
  opacity: 0.8;
  padding: 0px;
  width: 100%;
  height: auto;
}

.header-footer-descript-style{
  
  background-color: rgba(0, 0, 0, 0.8);

  padding: 12px;
  width: 100%;
  height: auto;
}

.header-font-style{
  
  /*font-size:<will change by responsive size>;*/
  Color: rgba(250, 250, 250, 1);
 
}

/* end MAIN-HEADER  */

/* MAIN-CONTENT-AREA start */

#main-content-area {

  z-index: 0;
 
}

.main-content-area-for-menu-headers-without-images-style
{

  /*background-color: rgba(255, 0, 0, 0.8);*/

  margin-top: 25px;

 
  height: auto;
}

.main-content-area-style {

  /*background-color: rgba(255, 0, 0, 0.8);*/

  margin-top: 25px;
  margin-bottom: 25px;
  margin-right: 6%;
  margin-left: 6%;

  padding: 10px;
 
  height: auto;
}


.grid-box-2-1-1 {
  display: grid;
}

.grid-container-styling {
 /* background-color: rgba(255, 0, 0, 0.8);*/
  padding: 10px;
  grid-row-gap: 10px;
  grid-column-gap: 40px;
}

.grid-container-styling-grey {
  /*background-color: rgba(255, 0, 0, 0.8);*/

  padding: 10px;
  grid-row-gap: 10px;
  grid-column-gap: 10px;
}


#div-box-1{

 /* background-color: rgba(0, 0, 0, 0.2);*/

}

#div-box-2{

  /*background-color: rgba(0, 0, 0, 0.2);*/

}

/* end MAIN-CONTENT-AREA  */

/* div colours */

.divcolor-chocolate-dark
{  
   background-color: rgba(97, 85, 80, 1);!important
   Color: white;!important
}

.divcolor-chocolate-light
{  
   background-color: rgba(97, 85, 80, 0.5);!important
   Color: white;!important
}

.divcolor-mosaic-blue
{color:#fff!important;background-color:#00758F!important}

.divcolor-camo-tan
{color:#fff!important;background-color:#b49d80!important}

.divcolor-deep-blue
{color:#fff!important;
 background-color: rgba(0, 68, 102, 1)!important}

.divcolor-header-blue
{color:#fff!important;
 background-color: rgba(0, 119, 179, 1)!important}

/* div colours end */



/* MENU css start FIXED-TOP-BAR & SIDE MENU */

.header-topbar-title-font-style {font-size: 16px;}

#menu-container-top-bar {
   position:fixed!important;
  /* ALWAYS KEEPING THE TOP BAR ABOVE EVERYTHING, except the INVISIBLE CHECKBOX z=11  */
    z-index:10;
   Top: 0;
   Left: 0;
   width:100%; /* Full width */
   height: 60px;
  padding-top: 10px;
  padding-left:25px;
  font-size: 22px /* makes hamburger of bigger size */
}




.toggler-checkbox-top-bar{
  /* ALWAYS KEEPING THE TOGGLER i.e THE INVISIBLE CHECKBOX ON TOP OF EVERYTHING, above TOP BAR z=10  */
    z-index:11;
    height: 50px;
    width: 50px;
    position: absolute;
    top: 0;
    left: 0;
    cursor: pointer;
    opacity: 0; /*INVISIBLE*/
}


#toggleChkBx:checked ~ .control-me {
  /* A toggled state! Checkbox-checked */
  display: block;
}



#toggleChkBx:not(:checked) ~ .control-me {
  /* A toggled state! NOTCheckbox-checked */  
  display: none;
}

.menu-sidebar
 {
   height:100%; /* Full height */
   width:320px;


   position:fixed!important;
   z-index:2; /* Sit on top of the Overlay window */
   Top:60px; /* positioned Matching 'sidemenu' Height of 40 px - as they are part of the same 'sidemenu' div */
   Left: 0;
   overflow:auto /* Enable scroll if needed */
 }


#menuSidebar {font-size: 15px;}
#menuSidebar a:link { color: white;text-decoration:none; }
#menuSidebar a:visited { color: white; text-decoration:none; }
#menuSidebar a:hover { color: white; text-decoration:none; }
#menuSidebar a:active { color: white; text-decoration:none;}

.modal-overlay
 {
   height:100%; /* Full height */
   width:100%; /* Full width */
   background-color: rgb(0,0,0); /* Fallback color */
   background-color: rgba(0,0,0,0.7); /* Black w/ opacity */

   position:fixed!important;
   z-index:1; /* Sit on top of the background main content window */
   Top:60px; /* positioned Matching 'sidemenu' Height of 40 px - as they are part of the same 'sidemenu' div */

   overflow:auto /* Enable scroll if needed */
 }



/* end MENU css */

/* FORM elements */

.form-div-style{

  padding: 20px;
  font-size: 16px;  /* font size of the entire Form is set here - it remains same for mobile-desktop-tab */

}

/* BUTTON start */

.form-btn {
  background-color: #f4511e;
  border: none;
  color: white;
  padding: 16px 32px;
  text-align: center;
  font-size: 16px;
  margin: 4px 2px;
  opacity: 0.6;
  transition: 0.3s;
}

/* end BUTTON  */

.form-btn:hover {opacity: 1}

/* CHECKBOX start */

/* Customize the label (the container of the checkbox) */
.form-checkbox-container {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
   font-size: 16px;  /* font size of the Form checkbox labels set here */
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default checkbox */
.form-checkbox-container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom checkbox */
.checkmark-checkbox {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #eee; /*Unchecked checkbox Colour inside - pale white */
}

/* On mouse-over, add a grey background color */
.form-checkbox-container:hover input ~ .checkmark-checkbox {
  background-color: #ccc;
}

/* When the checkbox is checked, add a color background */
.form-checkbox-container input:checked ~ .checkmark-checkbox {
  background-color: #f4511e; /*checked checkbox COLOUR inside  - MATCH with Form Elements - Button*/
  opacity: 0.8;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark-checkbox:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.form-checkbox-container input:checked ~ .checkmark-checkbox:after {
  display: block;
}

/* Style the checkmark/indicator */
.form-checkbox-container .checkmark-checkbox:after {
  left: 9px;
  top: 5px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

/* end CHECKBOX */


/* RADIO start */

/* Customize the label (the container) */
.form-radio-container {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 16px;  /* font size of the Form radio labels set here */
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default radio button */
.form-radio-container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom radio button */
.checkmark-radio {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #eee; /*Unchecked radio Colour inside - pale white */
  border-radius: 50%;
}

/* On mouse-over, add a grey background color */
.form-radio-container:hover input ~ .checkmark-radio {
  background-color: #ccc;
}

/* When the radio button is checked, add a blue background */
.form-radio-container input:checked ~ .checkmark-radio {
  background-color: #f4511e; /*checked radio COLOUR inside  - MATCH with Form Elements - Button*/
  opacity: 0.8;
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.checkmark-radio:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the indicator (dot/circle) when checked */
.form-radio-container input:checked ~ .checkmark-radio:after {
  display: block;
}

/* Style the indicator (dot/circle) */
.form-radio-container .checkmark-radio:after {
  top: 9px;
  left: 9px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: white;
}


/* RADIO end */


/* end FORM elements */



/* TABLE cell formatting */

.tbl-cell-form-col-labelside
{
  /* background-color: rgba(0, 0, 255, 0.5); */
  padding: 10px;
  /*text-align: right;*/
   vertical-align: top;
  width:40%;  	/* occupies only 40% of the table-space */
  height:24px;
}

.tbl-cell-form-col-inputside
{
  /* background-color: rgba(0, 0, 255, 0.5); */
  padding: 10px;
  /*text-align: right;*/
   vertical-align: top;
  width:60%;  	/* occupies only 60% of the table-space */
  height:24px;
}

/* end TABLE cell formatting */




/* RESPONSIVE GRID start */

/* >>> 3-Break-Point Settings */



@media screen and (min-width: 0px) and (max-width: 480px) {

   /* ########### Mobile Device ########### */

	.grid-box-2-1-1 {
    			  grid-template-columns: 1fr;
			}

	.header-font-style{font-size:14px;}

}

@media screen and (min-width: 481px) and (max-width: 768px) {

   /* ########### Tablet Device ########### */

	.grid-box-2-1-1 {
    			  grid-template-columns: 1fr;
			}

	.header-font-style{font-size:16px;}

}

@media screen and (min-width: 769px) {

   /* ########### Laptop Device ########### */

	.grid-box-2-1-1 {
    			  grid-template-columns: 1fr 1fr;
			}

	.header-font-style{font-size:17px;}

}


/* end RESPONSIVE GRID */


/* Blue Footer START */



#blue-footer a:link { color: white; }
#blue-footer a:visited { color: white; }
#blue-footer a:hover { color: white; }
#blue-footer a:active { color: white; }



/* Blue Footer END */


/* FOOOTER STYLE START */

#footer
{
  z-index: 0;
margin: 0px;

}

.end-footer
{
margin: 0px;
    background: #222; /* Dark background */
    color: white;

}

.upper-footer
{
    display: grid;
    grid-template-columns: repeat(6, 1fr); /* Default: 6 equal columns */
    grid-template-areas:
        "office-logo-area office-office1-area office-office2-area quick-links-area policy-area contact-us-area"; /* Desktop */
    gap: 20px;
    background: #222; /* Dark background */
    color: white;
    padding: 40px;
}

/* Tablet (@1000px) - Switch to 3-row layout */
@media (max-width: 1180px)
{
    .upper-footer
    {
        grid-template-columns: repeat(3, 1fr); /* 3 equal columns */
        grid-template-areas:
            "office-logo-area office-office1-area office-office2-area"
            ". policy-area contact-us-area"
            ". quick-links-area .";
    }
}

/* Smaller Tablets (@768px) - Introduce blank spaces */
@media (max-width: 768px)
{
    .upper-footer
    {
        grid-template-columns: repeat(2, 1fr); /* 3 equal columns */
        grid-template-areas:
            "office-logo-area office-office1-area "
            ". office-office2-area"
            ". policy-area "
            ". contact-us-area"
            ". quick-links-area ";
    }
}

/* Mobile (@458px) - Single Column Layout */
@media (max-width: 610px)
{
    .upper-footer
    {
        grid-template-columns: 1fr; /* Single column */
        grid-template-areas:
            "office-logo-area"
            "office-office1-area"
            "office-office2-area"
            "quick-links-area"
            "policy-area"
            "contact-us-area";
    }

    .upper-footer div
    {
        width: 100%; /* Reduce width to avoid full stretch */
        margin: 0 auto; /* Centers the div */
    }
}

/* Assign grid areas */
.logo-container { grid-area: office-logo-area; }
.head-office { grid-area: office-office1-area; }
.branch-office { grid-area: office-office2-area; }
.quick-links { grid-area: quick-links-area; }
.policies { grid-area: policy-area; }
.contact-us { grid-area: contact-us-area; }

/* list Styling */
.upper-footer-list 
{
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.upper-footer-list li {
    line-height: 1.1; /* Adjust this value for even smaller spacing */
}



/* Hyperlink Styling */

.upper-footer a
{
   color: white;
   /* color: #FFD700; */ /* Golden yellow */
    text-decoration: none; /* Remove underline */
    font-weight: bold;
}

.upper-footer a:hover
{
   /* text-decoration: underline; */  /* Add underline on hover */
}

/* Center logo horizontally */
.logo-container
{
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* Left-aligned by default */
}

/* Mobile: Center logo */
@media (max-width: 768px)
{
    .logo-container
    {
        justify-content: center; /* Centers logo on mobile */
    }
}

/* Child div that holds the logo */
.logo-child
{
    display: block;
}

/* Image size control */
.office-logo
{
    width: 250px; /* Correct size */
    height: auto; /* Prevents distortion */
}


/* FOOOTER STYLE END */