/*------------------ Breadcrumb styling --------------------*/
.breadcrumbs
{
	background: linear-gradient(rgba(150, 60, 221, 0.1), rgba(17, 17, 69, 0.8)), url('../img/auto-construction.html');
	background-position: center center;
	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 --------------------*/


/*------------------ Construction description --------------------*/
.Construction-features
{
	font-size: 0.8rem;
	font-weight: 600;
	line-height: 1.6;
	margin: 1rem 1.7rem 1rem 0;
}

.Construction-features ion-icon
{
	color: var(--yellow-color);
}

.desc-content .para-line
{
	margin: 1rem 0;
}

.desc-img-content
{
	margin: 2rem 0;
}

.Construction-detail-img
{
	border: none;
	border-radius: 6px;
  height: 400px;
  width: 450px;
}
/*------------------ Construction description --------------------*/



/*--------------------- Plocies description ---------------------*/
.single-policy
{
	display: flex;
	flex-direction: column;
	gap: 2rem;
	margin: 1.6rem 0;
}

.single-policy ion-icon
{
	color: var(--yellow-color);
	font-size: 2rem;
}
/*--------------------- Plocies description ---------------------*/




/*------------------------- Agent CTA ----------------------------*/
.agent-cta
{
	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;
}

.agents
{
	margin: 1.5rem 0;
	display: flex;
	flex-direction: column;
	gap: 2rem;
}

.agent .para-line
{
	font-weight: bold;
	text-transform: uppercase;
}

.agent hr
{
	color: var(--yellow-color);
	height: 2px;
	margin: 1rem 0;
}

.agent .agent-name, .agent .agent-email
{
	font-weight: 600;
	line-height: 1;
	display: flex;
	align-items: center;
	gap: 0.8rem;
}
/*------------------------- Agent CTA ----------------------------*/



/*---------------------------- Construction pack -------------------------*/
.ins-pack-row
{
	margin: 1.6rem 0;
}

.ins-pack-name
{
	font-size: 1.6rem;
	font-weight: 600;
	line-height: 1.1;
}

.ins-pack-price
{
	margin-top: 1rem;
	font-weight: 600;
}

.pack-cta
{
	border: none;
	background: none;
}

.pack-cta a
{
	margin: 1.5rem 0;
	color: var(--blue-color);
	font-size: 1.1rem;
	font-weight: 500;
	display: flex;
	align-items: center;
	text-decoration: none;
}

.Construction-packs .container hr
{
	color: #ffffff3d;
	height: 1px;
}
/*---------------------------- Construction pack -------------------------*/


/*---------------------------- Quotation ------------------------------*/
.quot-img-col
{
	background: url(../img/additional-service-1.png);
	background-position: center top;
	background-repeat: no-repeat;
	background-size: cover;
}

.spacer
{
	height: 500px;
}
/*---------------------------- Quotation ------------------------------*/




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


	/*----------- description styling --------------*/
	.description
	{
		background-image: linear-gradient(
		  155deg,
		  hsl(215deg 100% 98%) 0%,
		  hsl(215deg 100% 98%) 30%,
		  hsl(215deg 100% 98%) 38%,
		  hsl(215deg 100% 98%) 43%,
		  hsl(215deg 100% 98%) 47%,
		  hsl(215deg 100% 98%) 48%,
		  hsl(215deg 100% 98%) 50%,
		  hsl(215deg 100% 98%) 50%,
		  hsl(215deg 100% 99%) 50%,
		  hsl(215deg 100% 99%) 50%,
		  hsl(215deg 100% 99%) 50%,
		  hsl(215deg 100% 99%) 50%,
		  hsl(215deg 100% 99%) 50%,
		  hsl(215deg 100% 99%) 50%,
		  hsl(215deg 100% 99%) 50%,
		  hsl(215deg 100% 99%) 50%,
		  hsl(215deg 100% 99%) 51%,
		  hsl(215deg 100% 100%) 53%,
		  hsl(215deg 100% 100%) 55%,
		  hsl(215deg 100% 100%) 60%,
		  hsl(215deg 100% 100%) 68%,
		  hsl(0deg 0% 100%) 96%
		);
	}

	.description .container .row
	{
		gap: 4rem;
	}

	.desc-content
	{
		width: 150% !important;
	}

	.Construction-features
	{
		font-size: 0.9rem;
	}


	/*---------------- policy styling --------------------*/
	.policies
	{
		display: grid;
		grid-template-rows: repeat(2, 1fr);
		grid-template-columns: repeat(2, 1fr);
		grid-gap: 2rem;
	}

	.single-policy
	{
		flex-direction: row;
	}


	/*----------------- Agents styling --------------------*/
	.agents
	{
		flex-direction: row;
		gap: 4rem;
	}


	/*----------------- Construction pack ------------------------*/
	.ins-pack-row
	{
		align-items: flex-start;
	}

	.Construction-features
	{
		margin-top: 0;
	}


	/*----------------------- Quotation ----------------------*/
	.quoatation
	{
		background: #f3f8ff;
	}
	/*----------------------- Quotation ----------------------*/
}

@import url("https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap" );



body {
    font-family: 'Poppins', sans-serif;
    background: var(--white-20);
 
}

html{
    scroll-behavior: smooth;
}
.section-padding {
    padding: 50px;
}
::-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; }
:root {
    --blue: #0000FF;
    --dark-blue: #da0d0d;
    --white: #fff;
    --white-20: #ededed;
    --black: #000;
    --black-90: #333;
    --grey: #555;
    --cobalt-blue: #da0d0d;
    --bright-blue: #0096FF;
    --light-blue: #d8efff;
}
.reveal{
  position: relative;
  transform: translateY(150px);
  opacity: 0;
  transition: all 2s ease;
}

.reveal.active{
  transform: translateY(0px);
  opacity: 1;
}
/* Navbar Section  */

/* Navbar Section  */
.navbar {
  height: 70px;
  background: #fff;
  box-shadow: 15px 15px 40px rgba(0, 0, 0, 0.2);
}

.navbar-toggler{
  border: none;
  color: var(--cobalt-blue);
}

.navbar-toggler:hover{
  border: none;
  background-color: var(--bright-blue);
  color: var(--white);
}

.navbar-nav .nav-link {
  font-size: 18px;
  margin-right: 20px;
  color: var(--black) !important;
}

.navbar-nav .nav-link:hover {
  color: var(--cobalt-blue) !important;
  text-decoration: none;
  letter-spacing: 2px;
}

.navbar-nav a {
  font-size: 15px;
  font-family: sans-serif;
  text-transform: uppercase;
  font-weight: 500;
}

.navbar-light .navbar-brand img {
  height: 150px;
  width: 150px;
}
.close-btn {
  position: absolute;
  right:5px;
  color: var(--black);
  display: none; /* Hide close button by default */
}

.close-btn span {
  font-size: 24px;
}

@media (min-width: 992px) {
  #sidebar-active,
  .open-sidebar-button {
      display: none;
  }
}


@media (max-width: 992px) {
  .navbar-nav {
      display: none;
  }
  .navbar-toggler {
      display: block;
  }
  .open-sidebar-button {
      display: block;
  }
  .collapse.navbar-collapse.show {
      display: block;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.5);
      z-index: 1000;
  }
  .collapse.navbar-collapse.show ul {
      display: block;
      position: fixed;
      left: 0;
      width: 80%;
      padding-top: 20px; /* Add padding at the top */
      padding-left: 20px; 
      height: 100%;
      background-color: #fff;
      
  }

  /* New CSS for close button */
  .close-nav {
      position: absolute;
      top: 5px;
      right: 10px;
  }
  .close-btn {
      color: var(--black);
      display: block; 
     
  }
  .close-btn span {
    font-size: 30px; /* Increase icon size */
}
}

/*Move top  */
.animate-up {
  animation: slide-up 0.5s ease;
}

@keyframes slide-up {
  from {
    transform: translateY(20px);
    opacity: 0;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.carousel-item {
  height: 100vh;
  min-height: 300px;
  background-size: cover;
  background-position: center;
}

/* Add custom CSS for move-to-top button */
#moveToTop {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background-color: red;
  color: white;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  display: none;
  z-index: 999;
}

#moveToTop i {
  margin-top: 13px;
}


.site-safety {
  margin-left: 40px;
  padding: 20px;
  border-radius: 5px;
  justify-content: space-between;
  align-items: center;
}

.site-safety h1 {
  font-size: 40px;
  color: var(--cobalt-blue);
  margin-bottom: 10px;
}

.content p {
  font-size: 25px;
  text-align: justify;
  line-height: 1.5;
  height: 100%; /* Set the height to 100% */
}

.site-container {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.content {
  flex: 1;
  height: 100%; /* Set the height to 100% */
}

.image {
  margin-left: 20px;
}

.image img {
  max-width: 80%;
  border-radius: 10px;
}

.Entry-content {
  text-align: center; /* Center the content */
  padding: 20px 0; /* Add padding top and bottom */
}

.Entry-content h1 {
  font-size: 40px;
  color: var(--cobalt-blue);
  margin-bottom: 20px;
}

.card-container {
  display: flex;
  flex-wrap: wrap; /* Added */
  gap: 60px; /* Added */
  padding: 0 20px;
  justify-content: center; 
}

.card {
  width: calc(20% - 20px);
  padding: 15px;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
  background-color: #fff;
  display: flex; 
  transition: transform 0.3s ease;
  flex-direction: column; 
}
.card:hover {
  transform: scale(1.1); 
}
.card h2 {
  font-size: 28px;
  color: var(--cobalt-blue);
  margin-bottom: 5px;
}

.card p {
  font-size: 18px;
  margin-bottom: 10px;
  flex-grow: 1; 
}


.workplacess {
  margin-top: 30px;
  text-align: center; /* Center the content */
  padding: 20px 0; /* Add padding top and bottom */
}
.workplacess h1 {
  font-size: 40px;
  color: var(--cobalt-blue);
}
.wcontainer{
  position: relative;
  display:flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 100px 50px;
  padding: 55px 50px;
}
.wcontainer .wcards{
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  width: 350px;
  height: 300px;
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 35px 80px rgba(0, 0, 0, 0.15);
  transition: 0.5s;
}
.wcontainer .wcards:hover{
  height: 400px;
}
.wcontainer .wcards .imgbx{
  position: absolute;
  width: 300px;
  height: 220px;
  top: 20px;
  background: #333;
  border-radius: 12px;
  overflow: hidden;
  transition: 0.5s;
}
.wcontainer .wcards:hover .imgbx{
  top: -100px;
  scale:0.75;
  box-shadow: 0 15px 45px rgba(0, 0, 0, 0.15);
}
.wcontainer .wcards .imgbx img{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.wcontainer .wcards .contents{
  position: absolute;
  width: 100%;
  top: 252px;
  height: 35px;
  overflow: hidden;
  padding: 0 30px;
  text-align: center;
  transition: 0.5s;
}

.wcontainer .wcards:hover .contents{
  top: 130px;
  height: 250px;
}
.wcontainer .wcards .contents h2{
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--clr);
}
.wcontainer .wcards .contents p{
  color: #333;
}



.workplacess {
  margin-top: 30px;
  text-align: center; /* Center the content */
  padding: 20px 0; /* Add padding top and bottom */
}
.workplacess h1 {
  font-size: 40px;
  color: var(--cobalt-blue);
}.flip-card-container {
  margin-top: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0 50px; /* Adjust the horizontal gap */
}

.flip-card {
  background-color: transparent;
  width: calc(20% - 20px); 
  height: 300px; 
  perspective: 1000px; 
  border-radius: 14px;
  margin-bottom: 20px; 
  
}

.flip-card-inner {
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.6s;
  transform-style: preserve-3d;
}

.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  border-radius: 14px; 
}

.flip-card-front img {
  width: 100%;
  height: 100%;
  object-fit: cover; 
  border-radius: 14px; 
}

.flip-card-back {
  background-color: #3b86b7;
  color: rgb(255, 255, 255);
  transform: rotateY(180deg);
  padding: 20px; 
  border-radius: 14px; 
}

.flip-card-back h2 {
  margin-bottom: 10px;
}

.flip-card-back p {
  font-size: 17px;
}

.content1 p {
  font-size: 25px;
  text-align: justify;
  margin-left: 60px ;
  margin-right: 60px;
  line-height: 1.5;
  height: 100%; /* Set the height to 100% */
}

.content2 p {
  font-size: 25px;
  text-align: justify;
  margin-left: 60px ;
  margin-right: 60px;
  line-height: 1.5;
  height: 100%; /* Set the height to 100% */
}

.content3 p {
  font-size: 25px;
  text-align: justify;
  margin-left: 60px ;
  margin-right: 60px;
  line-height: 1.5;
  height: 100%; /* Set the height to 100% */
}


.sedimentcontrol {
  margin: 20px auto;
  margin-left: 40px;
  padding: 20px;
  border-radius: 5px;
  justify-content: space-between;
  align-items: center;
}

.sedimentcontrol h1 {
  font-size: 40px;
  color: var(--cobalt-blue);
  margin-bottom: 10px;
}

.sedicontent p {
  font-size: 25px;
  text-align: justify;
  line-height: 1.5;
  height: 100%; 
}

.sediment-container {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.sedicontent {
  flex: 1;
  height: 100%; 
}

.sediimage {
  margin-left: 20px;
}

.sediimage img {
  max-width: 80%;
  border-radius: 10px;
}

.sedi-btn{
  background-color: #007bff;
  color: #fff;
  border: none;
  padding: 10px 20px;
  font-size: 14px;
  border-radius: 5px;
  cursor: pointer;
  color: #ffffff;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  height: 50px;
  border: none;
  background-size: 300% 100%;
  transition: all 0.3s ease-in-out;
  background-image: linear-gradient(to right, #c80ffc, #daa6de, #3098dd, #2b83b6);
  box-shadow: 0 4px 15px 0 rgba(49, 162, 196, 0.75);
  
}

.sedi-btn:hover {
  background-position: 100% 0;
}

/* Vission mission */
.vision-mission {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 50px;
    font-size: 20px;
    text-align: justify;
	
}

.vision, .mission {
    display: flex;
    flex-direction: row;
    background: var(--white-20);
    border-radius: 8px;
    overflow: hidden;
}

.vision img, .mission img {
    width: 430px;
    height: 300px;
    border-radius: 10px;
}

.text-content {
    padding: 30px;
    background-color: #f4f4f4;
 
}

.text-content h2 {
    color: rgb(0, 0, 0);
    margin-bottom: 10px;
	font-size: 30px;
  
}

@media (max-width: 768px) {
    .vision, .mission {
        flex-direction: column;
    }

    .mission {
        flex-direction: column-reverse;
    }

    .vision img, .mission img {
        width: 100%;
        height: auto;
    }
}

.main-footer{
  position: relative;
  background: linear-gradient(rgba(0, 0, 0, 0.9), rgba(10, 17, 79, 0.9));
}

.footer-content{
  position: relative;
  padding: 40px 0px 80px 0px;
}
.footer-content:before{
  position: absolute;
  content: '';
  width: 744px;
  height: 365px;
  top: 50px;
  right: 0px;
  background-size: cover;
  background-repeat: no-repeat;
  animation-name: float-bob;
  animation-duration: 30s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  -webkit-animation-name: float-bob;
  -webkit-animation-duration: 30s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  -moz-animation-name: float-bob;
  -moz-animation-duration: 30s;
  -moz-animation-iteration-count: infinite;
  -moz-animation-timing-function: linear;
  -ms-animation-name: float-bob;
  -ms-animation-duration: 30s;
  -ms-animation-iteration-count: infinite;
  -ms-animation-timing-function: linear;
  -o-animation-name: float-bob;
  -o-animation-duration: 30s;
  -o-animation-iteration-count: infinite;
  -o-animation-timing-function: linear;
}
.footer-content .logo-widget{
  position: relative;
  margin-top: -5px;
}
.footer-content .logo-widget .footer-social li{
  position: relative;
  display: inline-block;
  margin-right: 9px;
}
.footer-content .logo-widget .footer-social li:last-child{
  margin-right: 0px;
}
.footer-content .logo-widget .footer-social li a{
  position: relative;
  display: inline-block;
  width: 70px;
  height: 70px;
  line-height: 90px;
  background: #2e3138;
  color: #9ea0a9;
  text-align: center;
  border-radius: 50%;
}
.footer-content .logo-widget .footer-social li a:hover{
  color: #ffffff;
  background: #ff5e14;
  text-decoration: none;
}
.footer-content .logo-widget .logo-box{
  margin-bottom: 25px;
}
.footer-content .logo-widget .text p{
  color: #9ea0a9;
  margin-bottom: 32px;
}
.footer-content .footer-title{
  position: relative;
  font-size: 24px;
  line-height: 35px;
  font-family: 'Playfair Display', serif;
  color: #ffffff;
  font-weight: 700;
  margin-bottom: 27px;
}
.footer-content .service-widget .list li{
  display: block;
  font-size: 20px;
  margin-bottom: 12px;
}
.footer-content .service-widget .list li a{
  position: relative;
  display: inline-block;
  color: #9ea0a9;
}
.footer-content .service-widget .list li a:hover{
  color: #ff5e14;
}
.footer-content .contact-widget p{
  color: #9ea0a9;
  margin-bottom: 15px;
}

.footer-content .contact-widget .footer-title{
  margin-bottom: 29px;
}

body {
  font-family: Arial, sans-serif;
  background-color: #f4f4f4;
  margin: 0;
  padding: 0;
}

.safety-cards {
  display: flex;
  margin: 0 40px 0 100px;
  justify-content: space-around;
  flex-wrap: wrap;
  padding: 15px;
}
/* card section */
.card {
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  margin: 10px;
  padding: 20px;
  width: 250px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
  transform: translateY(-10px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

.card-title {
  color: #d32f2f;
  font-size: 20px;
  margin-bottom: 10px;
  font-weight: 300;
}

.card-description {
  color: #333;
  font-size: 16px;
  text-align: justify;
}

/** footer-bottom **/
.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0b4ccd;
  
}

.footer-bottom .container {
  width: 100%;
}

.footer-bottom .row {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.footer-bottom .column {
  flex: 1;
}

.footer-bottom .copyright  {
  color: #9ea0a9;
  text-decoration: none;
}
.footer-bottom .copyright  a{
  color: #9ea0a9;
  text-decoration: none;
}

.footer-bottom .copyright a:hover {
  color: #ff5e14;
}



@media only screen and (max-width: 768px) {
  .button {
    margin-left: 0;
  }
  
  .site-safety {
    margin: 20px auto;
    margin-left: 0; 
    padding: 20px;
    border-radius: 5px;
    justify-content: center;
    align-items: center;
  }

  .site-safety h1 {
    font-size: 30px; 
  }

  .content p {
    font-size: 20px; 
    justify-content: left;
  }
  .content1 p{
    font-size: 20px;
    justify-content: left;
    margin: 20px ;
  }
  .content2 p{
    font-size: 20px;
    justify-content: left;
    margin: 20px ;
  }
  .content3 p{
    font-size: 20px;
    justify-content: left;
    margin: 20px ;
  }


  .site-container {
    flex-direction: column; /* Stack content vertically on smaller screens */
    align-items: center; /* Center align content */
  }

  .image {
    margin-left: 0; /* Reset left margin */
    margin-top: 20px; /* Add some space between content and image */
  }

  .image img {
    max-width: 100%; /* Adjust image width to fit smaller screens */
  }

  .Entry-content h1 {
    font-size: 30px;
  }
  
  .card {
    width: calc(70% - 10px); /* Adjust card width for smaller screens */
  }

  .workplacess h1 {
    font-size: 29px;
  }
  .wcontainer {
    flex-direction: column;
    align-items: center;
    gap: 40px;
    padding: 30px;
    margin-top: 20px;
  }

  .wcontainer .wcards {
    width: 100%;
    margin-bottom: 40px;
  }

  .flip-card-container {
    flex-direction: column; /* Stack flip cards vertically on smaller screens */
    align-items: center; /* Center flip cards horizontally */
    gap: 20px; /* Adjust spacing between flip cards */
  }

  .flip-card {
    width: calc(50% - 20px); /* Adjust card width for smaller screens */
    height: 250px; /* Adjust card height for smaller screens */
    margin-bottom: 20px; /* Add margin between flip cards */
  }

  .flip-card-front img {
    border-radius: 8px; /* Adjust border radius for front images */
  }

  .flip-card-back {
    padding: 10px; /* Adjust padding for back side content */
  }

  .flip-card-back h2 {
    font-size: 16px; /* Adjust font size for back side headings */
  }

  .flip-card-back p {
    font-size: 12px; /* Adjust font size for back side text */
  }
  .sedimentcontrol{
    margin: 20px auto;
    margin-left: 0; 
    padding: 20px;
    border-radius: 5px;
    justify-content: center;
    align-items: center;
  }

  .sedimentcontrol h1 {
    font-size: 30px; 
  }
  
  .sediment-container {
    flex-direction: column; /* Stack content vertically on smaller screens */
    align-items: center; /* Center align content */
  }

  .sediimage {
    margin-left: 0; /* Reset left margin */
    margin-top: 20px; /* Add some space between content and image */
  }

  .sediimage img {
    max-width: 100%; /* Adjust image width to fit smaller screens */
  }
  .sedicontent p {
    font-size: 20px; 
    justify-content: left;
  }
}

/*------------------ FAQ styling -------------------------------------*/
.faqs
{
	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;
}

.faq
{
  margin-top: 2rem;
  padding-bottom: 1rem;
  cursor: pointer;
}

.faq .question
{
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--fourth-color);
  padding: 1rem;
}

.faq .question h3
{
  font-size: 1.1rem;
  font-weight: 600;
}

.faq .answer
{
  max-height: 0;
  overflow: hidden;
  transition: max-height 1s ease-in-out;
}

.faq .answer p
{
  padding-top: 1rem;
  line-height: 1.6;
}

.faq.active .answer
{
  max-height: 300px;
}
/*------------------ FAQ styling -------------------------------------*/