/* 3741 */
  /*  MAIN: Slider Section
----------------------------------------------- */

header{
    /* height: 500px; */
}
.header-img {
    width: 100%;
    height: 500px;
    position: relative;
    overflow: hidden;
  }

  .parallax-header {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
  }

  .hero-info {
    position: absolute;
    top: 50%;
    left: 5%;
    transform: translateY(-50%);
    z-index: 8;
  }
  .hero-info h2 {
    font-size: clamp(1.2rem, 6vw, 3rem);
    line-height: clamp(1.2rem, 6vw, 3rem);
    text-transform: uppercase;
  }
  .hero-info h1 {
    color: var(--white);
    font-size: clamp(2.2rem, 5vw, 3rem);
    line-height: clamp(2.2rem, 5vw, 3rem);
    text-transform: uppercase;
    text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.5);
  }
  .hero-info h3 {
    color: var(--white);
    font-size: 1.6rem;
    font-weight: normal;
    margin-top: 2em;
  }
  @supports (-webkit-text-stroke: 3px var(--pill)) {
    .hero-info h2 {
      color: transparent;
      -webkit-text-stroke: 3px var(--pill);
      text-shadow: none;
    }
  }

  .hero-image-header {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
    background-image: url('/assets/img/nosy-be.webp')
  }




.about-nosy-be{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 10px;
    /* margin: 50px 0; */
}

.short-description{
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.about-nosy-be .short-description p{
    margin: 15px 0;
}
.map{
    display: flex;
    justify-content: center;
}

.travels-fact{
    /* background-image: url('/assets/img/header/DSC03852_1.webp');
    background-size: cover;
    background-repeat: no-repeat; */
}

.facts{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 20px;
}
.fact{
    border: 2px solid  rgba(247, 247, 247, 0.562);
    padding: 10px;
    background-color: #fff;
}

.fact-info{
    display:flex;
    align-items:center;
    gap:10px
}

.fact-info .number{
    display: inline-flex;
    justify-content: center;
    align-items: center;
    background-color: var(--primary);
    color: #fff;
    padding: 10px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    text-align: center;
    vertical-align: middle;
}

.fact-title .number{
    display: inline-flex;
    justify-content: center;
    align-items: center;
    background-color: var(--primary);
    color: #fff;
    padding: 10px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    text-align: center;
    vertical-align: middle;
}
/* Travels */
.travels{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 20px;
}

.travel-icon i{
    display: inline-flex;
    justify-content: center;
    align-items: center;
    background-color: var(--primary);
    color: #fff;
    padding: 10px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    text-align: center;
    vertical-align: middle;
}

.travel-head{
    display: flex;
    align-items: center;
    gap: 10px;
}


.travel{
    position: relative;
    border: 2px solid  rgba(247, 247, 247, 0.562);
    padding: 10px;
    background-color: #fff;
}
.travel ul{
    padding: 10px 15px;
}
.travel ul li{
    list-style-type: none;
    position:relative;
}
.travel ul li{
    font-weight: 500;

}
.travel ul li:before {
    content: "\f105";
    font-family: FontAwesome;
    display: inline-block;
    width: 10;
    position: absolute;
    left: -10px;
  }


/* RESPONSIVE DESIGN */
/* @media only screen and (max-width: 1199px){

 } */

 @media only screen and (max-width: 991px){
    .grid-pics{
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }
 }


 @media only screen and (max-width: 767px){
    .grid-pics{
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }

    .about-nosy-be{
        display: flex;
        flex-direction: column;
    }

    .facts{
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-gap: 20px;
    }
 }


 @media only screen and (max-width: 479px) {

    .facts{
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        grid-gap: 20px;
    }

    .travels{
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        grid-gap: 20px;
    }

    /* .travel-head{
       flex-direction: row;
    } */


 }






 .gallery {
	display: flex;
	flex-wrap: wrap;
	/* Compensate for excess margin on outer gallery flex items */
	margin: -1rem -1rem;
}

.gallery-item {
	/* Minimum width of 24rem and grow to fit available space */
	flex: 1 0 24rem;
	/* Margin value should be half of grid-gap value as margins on flex items don't collapse */
	margin: 1rem;
	/* box-shadow: 0.3rem 0.4rem 0.4rem rgba(0, 0, 0, 0.4); */
	overflow: hidden;

    position: relative;
}

/* .gallery-item img::before{
    content: '';
    position: absolute;
    background-color: rgb(var(--primary-rgb),0.1);
    background-color: red;
    opacity: 0.9;
    width: 100%;
    height: 100%;
} */
.gallery-item
.gallery-image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 400ms ease-out;
}

.gallery-image:hover {
	transform: scale(1.15);
}

/*

The following rule will only run if your browser supports CSS grid.

Remove or comment-out the code block below to see how the browser will fall-back to flexbox styling.

*/

@supports (display: grid) {
	.gallery {
		display: grid;
		/* grid-template-columns: repeat(auto-fit, minmax(24rem, 1fr));
		grid-gap: 2rem; */
        grid-template-columns: repeat(auto-fit, minmax(24rem, 1fr));
		/* grid-gap: 2rem; */
	}

	.gallery,
	.gallery-item {
		margin: 0;
	}
}