/*------------------ Breadcrumb styling --------------------*/
.breadcrumbs
{
	background: linear-gradient(rgba(150, 60, 221, 0.1), rgba(17, 17, 69, 0.8)), url('../img/contact-bc.png');
	background-position: center top;
	background-repeat: no-repeat;
	background-size: cover;
}

.breadcrumb-container
{
	height: 34vh;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 0 1.5rem;
}

.breadcrumb-container .hero-heading
{
	font-size: 3rem;
}
/*------------------ Breadcrumb styling --------------------*/






/*------------------------------ Contact Info ---------------------------*/
.contact-info
{
	background: linear-gradient(rgba(10, 17, 79, 0.9), rgba(10, 17, 79, 0.9)), url("../img/hero-bg.html");
	background-position: center top;
	background-repeat: no-repeat;
	background-size: cover;
}

.contact-info .container
{
	text-align: center;
	padding: 5rem 0;
}

.contact-info .container .row
{
	display: flex;
	flex-direction: column;
	gap: 2rem;
}

.contact-info .container .row .col ion-icon
{
	color: var(--yellow-color);
	font-size: 3.6rem;
}

.info-name
{
	font-size: 1.7rem;
	font-weight: 700;
}

.info-detail
{
	font-size: 1.1rem;
	font-weight: 400;
}
/*------------------------------ Contact Info ---------------------------*/




/*---------------------------------- Branches ---------------------------*/












/*-------------------------------------------------------------------------------------*/
/*----------------------------- Desktop screen styling ----------------------------------*/
/*-------------------------------------------------------------------------------------*/
@media screen and (min-width: 789px)
{
	/*----------- Breadcrumb styling ----------*/
	.breadcrumb-container 
	{
		height: 50vh;
	}




	/*-------------- Contact info ---------------*/
	/*.contact-info .container
	{
		padding: 8rem 0;
	}*/

	.contact-info .container .row
	{
		flex-direction: row;
	}

	.contact-info .container .row .col ion-icon 
	{
		color: var(--yellow-color);
		font-size: 5rem;
	}

	.info-name 
	{
		font-size: 2.6rem;
	}

	.info-detail 
	{
		font-size: 1.6rem;
	}


	/*-------------------------- Branches styling -----------------------*/
}

/* new Code*/
:root {

	/**
	 * colors
	 */
  
	--safety-orange: hsl(25, 100%, 50%);
	--lavender-gray: hsl(230, 19%, 81%);
	--persian-rose: hsl(328, 100%, 59%);
	--red-crayola: hsl(341, 100%, 49%);
	--eerie-black: hsl(240, 6%, 10%);
	--light-gray: hsl(0, 0%, 80%);
	--cultured-2: hsl(210, 60%, 98%);
	--platinum: hsl(0, 0%, 90%);
	--gray-web: hsl(220, 5%, 49%);
	--cultured: hsl(0, 0%, 93%);
	--black_10: hsla(0, 0%, 0%, 0.1);
	--black_5: hsla(0, 0%, 0%, 0.05);
	--white-1: hsl(0, 0%, 100%);
	--white-2: hsl(0, 14%, 98%);
	--black: hsl(0, 0%, 0%);
  
	/**
	 * gradient color
	 */
  
	--gradient: linear-gradient(to left top, var(--persian-rose), var(--safety-orange));
  
  
	
	/**
	 * typography
	 */
  
	--ff-roboto: 'Roboto', sans-serif;
	--ff-league-spartan: 'League Spartan', sans-serif;
  
	--fs-1: 3.5rem;
	--fs-2: 3rem;
	--fs-3: 2.1rem;
	--fs-4: 1.7rem;
	--fs-5: 1.4rem;
	--fs-6: 1.3rem;
  
	--fw-700: 700;
	--fw-500: 500;
  
	/**
	 * spacing
	 */
  
	--section-padding: 60px;
  
	/**
	 * shadow
	 */
  
	--shadow-1: 0 6px 24px var(--black_5);
	--shadow-2: 0 2px 28px var(--black_10);
  
	/**
	 * border radius
	 */
  
	--radius-2: 2px;
	--radius-5: 5px;
	--radius-8: 8px;
  
	/**
	 * transition
	 */
  
	--transition-1: 0.25s ease;
	--transition-2: 0.5s ease;
	--cubic-out: cubic-bezier(0.33, 0.85, 0.4, 0.96);
  
  }
  
  
  
  *,
  *::before,
  *::after {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
  }
  
  li { list-style: none; }
  
  a {
	text-decoration: none;
	color: inherit;
  }
  
  a,
  img,
  span,
  time,
  label,
  input,
  button,
  textarea,
  ion-icon { display: block; }
  
  img { height: auto; }
  
  input,
  button,
  textarea {
	background: none;
	border: none;
	font: inherit;
  }
  
  input,
  textarea { width: 100%; }
  
  button { cursor: pointer; }
  
  ion-icon { pointer-events: none; }
  
  address { font-style: normal; }
  
  html {
	font-family: var(--ff-roboto);
	font-size: 10px;
	scroll-behavior: smooth;
  }
  
  body {
	background-color: var(--white-1);
	color: var(--gray-web);
	font-size: 1.6rem;
	line-height: 1.8;
  }
  
  ::-webkit-scrollbar { width: 10px; }
  
  ::-webkit-scrollbar-track { background-color: hsl(0, 0%, 98%); }
  
  ::-webkit-scrollbar-thumb { background-color: hsl(0, 0%, 80%); }
  
  ::-webkit-scrollbar-thumb:hover { background-color: hsl(0, 0%, 70%); }
  
  :focus-visible { outline-offset: 4px; }
  
  
  
  
  .container { padding-inline: 15px; }
  
  .btn {
	max-width: max-content;
	color: var(--white-1);
	font-size: var(--fs-6);
	font-weight: var(--fw-700);
	padding: 10px 30px;
	border-radius: var(--radius-5);
	transition: var(--transition-1);
  }
  
  .btn-primary {
	background-image: var(--gradient);
	background-size: 1000%;
  }
  
  .btn-primary:is(:hover, :focus) { background-position: bottom right; }
  
  .btn-secondary {
	background-color: var(--white-1);
	color: var(--eerie-black);
  }
  
  .btn-secondary:is(:hover, :focus) {
	background-color: var(--eerie-black);
	color: var(--white-1);
  }
  
  .section { padding-block: var(--section-padding); }
  
  .h1,
  .h2,
  .h3 {
	color: rgb(8, 8, 70);
	font-family: var(--ff-league-spartan);
	line-height: 1.2;
  }
  
  .h1 { font-size: var(--fs-1); }
  
  .h2 { font-size: var(--fs-2); }
  
  .h3 { font-size: var(--fs-3); }
  
  .w-100 { width: 100%; }
  
  .section-title,
  .section-text { text-align: center; }
  
  .section-text { font-size: var(--fs-6); }
  
  .grid-list {
	display: grid;
	gap: 30px;
  }
  
  .img-holder {
	aspect-ratio: var(--width) / var(--height);
	background-color: var(--light-gray);
  }
  
  .img-cover {
	width: 100%;
	height: 100%;
	object-fit: cover;
  }
  
  
  
  .cta {
	position: relative;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	background-attachment: fixed;
	z-index: 1;
  }
  
  .cta::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-image: var(--gradient);
	opacity: 0.95;
	z-index: -1;
  }
  
  .cta-subtitle,
  .cta .section-title { color: var(--white-1); }
  
  .cta-subtitle {
	font-size: var(--fs-6);
	font-weight: var(--fw-500);
	text-align: center;
  }
  
  .cta .section-title { margin-block: 12px 18px; }
  
  .cta .btn { margin-inline: auto; }
  
  
  
  
  
  
  .contact { background-color: rgb(232, 243, 247); }
  
  .contact .section-text { margin-block: 5px 35px; }
  
  .contact-form {
	background-color: var(--white-1);
	padding: 20px;
	border-radius: var(--radius-2);
	margin-block-end: 30px;
	box-shadow: var(--shadow-1);
  }
  
  .input-field {
	background-color: var(--white-2);
	color: var(--eerie-black);
	font-size: var(--fs-5);
	padding: 15px;
	border-radius: var(--radius-2);
	outline: 1px solid transparent;
	outline-offset: 0;
	margin-block-end: 15px;
   
  }
  
  .input-field::-webkit-inner-spin-button { display: none; }
  
  .input-field:focus { outline-color: var(--red-crayola); }
  
  .input-field::placeholder { transition: var(--transition-1); }
  
  .input-field:focus::placeholder { opacity: 0; }
  
  textarea.input-field {
	resize: vertical;
	min-height: 80px;
	height: 100px;
	max-height: 200px;
	overscroll-behavior: contain;
  }
  
  .checkbox {
	width: max-content;
	margin-block-start: 5px;
	accent-color: var(--red-crayola);
  }
  
  .label-link {
	display: inline-block;
	color: var(--red-crayola);
  }
  
  .label-link:is(:hover, :focus) { text-decoration: underline; }
  
  .checkbox-wrapper {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin-block-end: 15px;
  }
  
  .checkbox-wrapper .label { font-size: var(--fs-6); }
  
  .contact-list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 30px 25px;
  }
  
  .contact-item { min-width: 100%; }
  
  .contact-card {
	background-color: var(--white-1);
	padding: 20px;
	border-radius: var(--radius-2);
	box-shadow: var(--shadow-2);
	display: flex;
	align-items: flex-start;
	gap: 15px;
  }
  
  .contact-card1 {
	  background-color: var(--white-1);
	  padding: 20px;
	  border-radius: 10px;
	  box-shadow: var(--shadow-2);
	  
	  display: flex;
	  align-items: flex-start;
	  gap: 15px;
	}
  
  
  
  .contact-card1 .card-icon {
	background-color: var(--cultured-2);
	color: var(--red-crayola);
	font-size: 25px;
	padding: 13px;
	border-radius: 50%;
	transition: var(--transition-1);
  }
  
  .contact-card1:is(:hover, :focus) .card-icon {
	background-color: var(--red-crayola);
	color: var(--white-1);
  }
  
  .contact-card1 .card-title { margin-block-end: 5px; }
  
  .contact-card1 :is(.card-link, .card-address) {
	font-size: var(--fs-6);
	transition: var(--transition-1);
  }
  
  .contact-card1 .card-link:is(:hover, :focus) { color: var(--red-crayola); }
  
  
  
  
  
  
  
  /**
   * responsive for larger than 575px screen
   */
  
  @media (min-width: 575px) {
  
	/**
	 * REUSED STYLE
	 */
  
	.container {
	  max-width: 540px;
	  width: 100%;
	  margin-inline: auto;
	}
  
	.grid-list {
	  grid-template-columns: 1fr 1fr;
	  column-gap: 25px;
	}
  
  
  
  
  
  
	/**
	 * CONTACT
	 */
  
	.input-wrapper {
	  display: flex;
	  gap: 15px;
	}
  
	.contact-item { min-width: calc(50% - 18px); }
  
  }
  
  
  
  
  
  /**
   * responsive for larger than 768px screen
   */
  
  @media (min-width: 768px) {
  
	/**
	 * CUSTOM PROPERTY
	 */
  
	:root {
  
	  /**
	   * typography
	   */
  
	  --fs-1: 4.5rem;
	  --fs-2: 3.7rem;
	  --fs-3: 2.3rem;
	  --fs-4: 1.8rem;
	  --fs-5: 1.5rem;
	  --fs-6: 1.4rem;
  
	}
  
  
  
	/**
	 * REUSED STYLE
	 */
  
	.container { max-width: 720px; }
  
	.section-text {
	  max-width: 65ch;
	  margin-inline: auto;
	}
  
  
  
	/**
	 * HERO
	 */
  
	.hero-text {
	  max-width: 60ch;
	  margin-inline: auto;
	}
  
  
  
	/**
	 * CONTACT
	 */
  
	.contact-form { padding: 30px; }
  
	.contact-item { min-width: calc(50% - 12.5px); }
  
  }
  
  
  
  
  
  
  /**
   * responsive for larger than 992px screen
   */
  
  @media (min-width: 992px) {
  
	/**
	 * CUSTOM PROPERTY
	 */
  
	:root {
  
	  /**
	   * typography
	   */
  
	  --fs-1: 5rem;
	  --fs-2: 4rem;
	  --fs-3: 2.5rem;
  
	  /**
	   * spacing
	   */
  
	  --section-padding: 100px;
  
	}
  
  
  
	/**
	 * REUSED STYLE
	 */
  
	.container { max-width: 960px; }
  
	.grid-list { grid-template-columns: repeat(3, 1fr); }
  
  
  
  
  
	/**
	 * CONTACT
	 */
  
	.checkbox-wrapper { margin-block: 20px; }
  
	.contact-item { min-width: calc(33.33% - 16.66px); }
  
	.contact-card { padding: 30px; }
  
	.contact-card .card-icon { font-size: 32px; }
  
  }
  
  
  
  
  
  /**
   * responsive for larger than 1200px screen
   */
  
  @media (min-width: 1200px) {
  
	/**
	 * CUSTOM PROPERTY
	 */
  
	:root {
  
	  /**
	   * typography
	   */
  
	  --fs-1: 6.8rem;
	  --fs-2: 4.5rem;
	  --fs-4: 1.9rem;
	  --fs-5: 1.6rem;
	  --fs-6: 1.6rem;
  
	}
  
  
  
	/**
	 * REUSED STYLE
	 */
  
	.container { max-width: 1140px; }
  
	.btn { --fs-6: 1.5rem; }
  
  
  
	/**
	 * SERVICE
	 */
  
	.service-card { padding: 30px; }
  
	.service-card .h3 { --fs-3: 2.5rem; }
  
  
  
	/**
	 * PROJECT
	 */
  
	.project-card .card-content { padding: 30px; }
  
	.project-card .card-subtitle { --fs-6: 1.6rem; }
  
  
  
	/**
	 * ABOUT
	 */
  
	.about .container { gap: 60px; }
  
	.about-item { gap: 7px; }
  
	.about-item ion-icon { font-size: 20px; }
  
  
  
	/**
	 * CTA
	 */
  
	.cta .section-title { margin-block: 15px 24px; }
  
  
  
  
  
  
	/**
	 * CONTACT
	 */
  
	.contact-form { padding: 50px; }
  
	.contact-card { gap: 20px; }
  
	.contact-card .card-icon { padding: 15px;  }
  
}


/*------------- New Footer ---------------*/
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    box-sizing: border-box; /* Ensures padding and borders are included in the element's total width and height */
}

*,
*::before,
*::after {
    box-sizing: inherit;
}

#main-footer {
    background: #3772E9;
    color: #fff;
    padding: 2rem 0;
    overflow: hidden; /* Prevents overflow */
}

.container.footer-container {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    max-width: 1200px; /* Set a maximum width */
    margin: 0 auto; /* Center the container */
    padding: 0 1rem; /* Add padding to avoid touching the viewport edges */
}

.footer-column {
    flex: 1;
    min-width: 250px;
    margin: 1rem;
}

.footer-column h4 {
    font-size: 2rem;
    margin-bottom: 1rem;
    color: #fff;
}

.footer-column p,
.footer-column ul {
    font-size: 1.8rem;
    line-height: 2;
}

.footer-column ul {
    list-style: none;
    padding: 0;
}

.footer-column ul li {
    margin-bottom: 0.5rem;
}

.footer-column ul li a {
    color: #fff;
    text-decoration: none;
}

.footer-column ul li a:hover {
    text-decoration: underline;
}

.footer-bottom {
    background: #0B4CCD;
    color: #ffffff;
    text-align: center;
    padding: 1rem 0; /* Adjusted padding for uniformity */
    margin-top: 2rem;
}

.footer-bottom p {
    margin: 0;
    font-size: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.footer-bottom img {
    max-height: 50px;
    margin-left: 0.5rem; /* Add some space between the text and the image */
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .container.footer-container {
        flex-direction: column;
        align-items: center;
    }

    .footer-column {
        text-align: left;
        margin: 1rem 0;
    }

    .footer-column h4 {
        font-size: 1.6rem;
		align-items: left;
    }

    .footer-column p,
    .footer-column ul {
        font-size: 1.2rem;
    }
}

@media (max-width: 480px) {
    .footer-column h4 {
        font-size: 1.4rem;
    }

    .footer-column p,
    .footer-column ul {
        font-size: 1rem;
    }

    .footer-bottom p {
        font-size: 0.8rem;
    }

    .footer-bottom img {
        max-height: 40px;
    }
}


/* Footer End here*/