h1 {
	font-family: 'Consolas';
	color:rgb(255, 255, 255);
}

p {
    margin-top: 20px;
    color:#21475e;
    font-family: 'Verdana', sans-serif;
}

h6 {
    margin-left: 48px;
}

.navbar {
    height: 80px; /* Adjust the height as needed */
    padding-top: 15px; /* Optional, if you want to adjust padding inside the navbar */
    padding-bottom: 15px; /* Optional */
    margin-bottom: 10px;
    background-color: #21475e !important; /* Change to any color */
    font-family: 'Consolas';
    color:rgb(255, 255, 255);
}

body {
	background-color:#ffffff ;
	
}

.navbar .navbar-brand {
    padding-top: 15px; /* Adjust padding around the brand if needed */
    padding-bottom: 15px;
}

body {
    overflow-x: hidden; /* Prevent horizontal overflow */
}

/* Custom box styling */
.custom-box {
    width: 100%;  /* Make the box take the full width of its container */
    padding: 40px;  /* Padding inside the box */
    background-color: #21475e ;  /* Background color */
    color: white;  /* Text color */
    box-sizing: border-box; /* Ensure padding doesn't affect width */
    border-radius: 0;  /* No rounded corners */
    margin-bottom: 20px; /* Adds space below the box */
    margin-left: 30px;
  }

  .square-img1 {
    width: 570px;    /* Set a fixed width */
    height: 570px;   /* Set the same height to make it square */
    object-fit: cover; /* This will crop the image to fit the square */
    margin-bottom: 20px;
    margin-top: 24px;
    margin-left: 30px;
}

.square-img2 {
    width: 150px;    /* Set a fixed width */
    height: 150px;   /* Set the same height to make it square */
    margin-bottom: 20px;
    margin-left: 30px;
    object-fit: cover; /* This will crop the image to fit the square */
}

.square-img3 {
    width: 500px;    /* Set a fixed width */
    height: 500px;   /* Set the same height to make it square */
    object-fit: cover; /* This will crop the image to fit the square */
    margin-bottom: 10px;
    margin-top: 24px;
    margin-left: 48px;
}

.square-img4 {
    width: 121px;    /* Set a fixed width */
    height: 121px;   /* Set the same height to make it square */
    object-fit: cover; /* This will crop the image to fit the square */
    margin-bottom: 20px;
    margin-top: 24px;
    margin-left: 48px;
}


.container-fluid{
    display: grid;
    grid-template-columns: 2500px; /* First column is wider */
    gap: 10px;
}

.grid-container {
    display: grid;
    grid-template-columns: auto 80px; /* First column auto, second column fixed */
    gap: 10px;
}

.image-text-container {
    display: flex;          /* Use Flexbox for alignment */
    align-items: center;    /* Vertically align the items */
    gap: 20px;              /* Space between the text and the image */
    width: 1000px;            /* Make sure the container takes full width */
}

.box-separator {
    width: 61.5%;
    height: 2px; /* Thickness of the separator */
    background-color: #21475e ; /* Light gray color */
    margin: 20px 0; /* Space above and below the separator */
    margin-left: 48px;
}

.box-divider {
    width: 61.5%;
    height: 160px; /* Thickness of the separator */
    background-color: #21475e ; /* Light gray color */
    margin: 20px 0; /* Space above and below the separator */
    margin-left: 48px;
}