/* 
Qantas Home
Landing Page CSS
*/

/* polish everything outside of media query */

main img {
    width: 100%;
}

.landing-carousel {
	width: 100%;
	height: 65vh;
	
	position: relative;
	display: flex;
	object-fit: cover;

	background-color: gray;
}

.carousel-media {
	width: 100%;
}

.carousel-controls {
	position: absolute;
	display: flex;
	inset: auto auto 7px 7px;
}
.carousel-arrows {
	display: flex;
	align-self: center;
}
.carousel-arrows button {
	width: 36px;
	aspect-ratio: 1/1;
	
	border-radius: 30px;
	margin: 0 5px 0 5px;
	padding: 0;

	border: none;
	background-color: white;
	font-size: 0px;
}


.carousel-progressbar {
	
}



.home-video {
    width: 100%;
	height: 65vh;
	object-fit:cover;
}

.landing-btn-order {
    color: white;
    background-color: #ffa111;
    text-decoration: none;
	font-size: 1.35rem;
    max-width: max-content;
	
	display: flex;
	margin: 10px auto;
    padding: 8px 15px;
    border-radius: 25px;
    font-weight: bold;
}


.dotted-divider {
  border: none;
  border-top: 3px dotted #999;
  margin: 20px 0;
}


/* Here */
.services-summary {
    display: flex;
    flex-direction: column;
    padding: 20px;
    gap: 38px;
    /* background-image: url('/qantas/bgt1.png'); */
    /* background-color: rgba(0, 0, 0, 0.023); */
}
.services-summary h2 {
    font-size: 2rem;
    text-align: center;
    font-family: 'Fredoka', 'Arial Rounded MT Bold', Arial, sans-serif;
    font-weight: 600;
    margin: 0;
}

.service-block {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 5%;
}

.summary-imageholder {
    aspect-ratio: 3 / 4;
    min-width: 30%;
    max-width: 40%;
    overflow: hidden;
}

.services-summary img {
    min-width: 30%;
    max-width: 40%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
} /* Fix inconsistent height. Make the height always match the totality of the text, but always limit width*/

.summary-captions {
    width: 100%;
}

.services-summary h3 {
    font-weight: 450;
    font-size: 1.5rem;
    font-family: 'Fredoka', 'Arial Rounded MT Bold', Arial, sans-serif;
    margin: 0;
}

.summary-captions p {
    font-size: 1.2rem;
    font-family: Arial, sans-serif;
    text-align: start;

    /* max-width: 85%; */
}
/* 'Poppins',  */
/* Decrease font size with zoom, make font size bigger by default 360px and up */

 /* Button Styled <a> */
 .a-knowmore {
    color: white;
    background-color: #303030;
    text-decoration: none;
    margin-top: auto;
    
    max-width: max-content;
    padding: 8px 15px;
    border-radius: 25px;
    font-size: 0.7em;
    font-weight: bold;
    text-align: center;
}

.a-knowmore::after {
    content: "SABER MÁS";
}


@media (min-width: 768px) {
	.carousel-controls {
		width: 100%;
		position: relative;
		inset: auto;
	}
	.carousel-arrows {
		width: 100%;
		justify-content: space-between;
	}
	.carousel-progressbar {
		position: absolute;
		inset: auto 50% 0 auto;
	}
	
	
	
    .home-banner {
        display: flex;
        width: 100%;
    }
    
    
        /*  Front page service highlights  */
    .services-summary {
        padding: 10vh 0;
        display: inline-flex;
        flex-direction: row;

        justify-content: center;
        width: 100%;
        gap: 8vw;
        
        font-family: 'Roboto', sans-serif;
    
    /* 	background-image: url('https://t4.ftcdn.net/jpg/02/34/63/07/360_F_234630793_eHKQucxaXftnWrecTJFITmD4cr3TlUgG.jpg'); */
    /* 	background-color: rgba(0, 0, 0, 0.5); */
    /* 	add png so it can be transparent  */
    }
    
    /* Designed specifically for 3 inline images */
    .services-summary figure {
        width: 22vw;
        align-items: center;
        display: flex;
        flex-direction: column;
    }

    .summary-imageholder {
        max-width: 100%;
        aspect-ratio: 4 / 3;
        overflow: hidden;
    }
    
    .services-summary img {
        max-width: 100%;
        aspect-ratio: 4 / 3;
    }
    
    .services-summary figcaption {
        font-size: 1.5em;
        font-weight: 500;
        color: #323232;
        margin: 2.5vh 0;
    }
    
    .services-summary p {
        text-align: justify;
    }
    
    /* Button Styled <a> */
    .a-knowmore {
        color: white;
        background-color: #303030;
        text-decoration: none;
        margin-top: auto;
        
        min-width: max-content;
        max-width: 120px;
        padding: 10px 20px;
        border-radius: 25px;
        font-size: 0.8em;
        font-weight: bold;
        text-align: center;
    }
    
    .a-knowmore::after {
        content: "SABER MÁS";
    }
}