:root{
    /* custom properties defined here have a global scope in this file.. */
    --clr-dark: 230, 35%, 7%;
    --clr-light: 231 77% 90%; /*moder css does not require the comma to seperate colors*/
    --clr-white: 0 0% 100%; /*use /alpha-value to set opacity here. spaces go with / and not "," */
    --clr-light-blue: 240,100%,40%; /*to add opacity here all we need is a comma and alpha value is set*/

    /* font-sizes */
    /* --fs-900: 9.375rem; */
    --fs-900: clamp(5rem, 8vw + 1rem, 9.375rem);  /*use the 1rem to make the value to be able to zoom in and out*/
    --fs-800: 6.25rem;
    --fs-700: 3.5rem;
    --fs-600: 2rem;
    /* 28px */
    --fs-500: 1.75rem;
    /* 18px */
    --fs-400: 1.125rem;
    /* 16px */
    --fs-300: 1rem; 
    /* 14px */
    --fs-200: 0.875rem;

    /* font-family */
    --barlow-sans-serif : 'Barlow', sans-serif;
    --barlow-condensed : 'Barlow Condensed', sans-serif;
    --bellefair-serif : 'Bellefair', serif;
}

html{
    scroll-behavior: smooth;
}


/* *********************************resets... ************************************************/

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

body,
h1,
h2, h3{
    margin: 0;
}

/* handling the body with the neccessary classes involved... */

body{
    min-height: 100vh;
    background-color: hsl(var(--clr-dark));
    font-family: var(--bellefair-serif);
    font-weight: var(--fs-400);
    color: hsl(var(--clr-white));

    /* modifications */
    display: grid;  /**grid items without specific colums take up the available height..*/
    grid-template-rows: min-content 1fr;

    /* for the background images */
    background-size: cover;
    background-position: bottom center;

    /* just to make sure we dont get overflow issues */
    overflow-x: hidden;
}

.home{
    background-image: url(./assets/home/background-home-desktop.jpg);
}
.destination{
    background-image: url(./assets/destination/background-destination-desktop.jpg);
    background-size: cover;
    background-position: center;
}
.crew{
    background-image: url(./assets/crew/background-crew-desktop.jpg);
    background-size: cover;
    background-position: center;
}

.technology{
    background-image: url(./assets/technology/background-technology-desktop.jpg);
    background-size: cover;
    background-position: center;
}
/* handling the body with the neccessary classes involved...END */

/* *******scaling down the circle-indicators******* */

@media (max-width: 60em) {
    .grid-container--technology .circle-indicators > *{
        transform: scale(.9);
    }
}

/* media query to addres the really large font sizes */
@media (max-width: 50em) {

    /*  this is the same as the the (max-width : 800px) media query at the bottom but with the use of 50em not picels */
    :root{
         /* font sizes */
         /* --fs-900: 5rem;   we will use a clamp to handle this min and max value*/ 
         --fs-800: calc(5vw + 1.5rem);
         --fs-700: 2.5rem;
         --fs-600: 1.8rem;
         --fs-400: 1rem;
         --fs-500: 1.25rem;
    }

    .mini-flex-container span{
        font-size: clamp(1rem, 4vw, 1.8rem);
    }

    /* for the background images... */
    .home{
        background-image: url(./assets/home/background-home-tablet.jpg);
        background-position: center;
    }
    .home, .crew, .technology{
        padding-block-end: 10em;
    }

    .home-content p .article-name{
        font-size: calc(5vw + 2.3rem);
    }

    .crew{
        background-image: url(./assets/crew/background-crew-tablet.jpg);
    }
    .technology{
        background-image: url(./assets/technology/background-technology-tablet.jpg);
    }

    .navbar-container .flex{
        flex-direction: column;
        --gap : 0.6rem;
    }

    .navbar-container{
        position: relative;
        z-index: 5; /*two is actually enough to make it stay above everything for now*/
    }


    .navbar-container .primary-navbar{
        /* z-index: 5; */
        height: 100%;
        /* background-image: linear-gradient(to top, hsl(var(--clr-dark),.9) ,hsl(var(--clr-light)/.6)) ;*/   /*nice effect but we wont be using this*/
        position: fixed;
        right: 0;
        top:0;

        /* the below will do the same as the top and right properties */
        /* inset: 0 0 0 20; */
        padding: 12% 3% 0;
        width: 50%;
        transform: translateX(100%);
        transition: transform 300ms ease;
    }

    /* extra classes for animation.. */
    .navbar-container .slide-out{
        transform: translateX(0);
    }

    /* over writting all the hover states and underlining */
    
    
    ul.underline-indicators > *:hover,
    ul.underline-indicators > *:focus,
    ul.underline-indicators > .active:hover,
    ul.underline-indicators > [aria-selected="true"]:hover{
        border-bottom: 2px solid hsl(var(--clr-white)/ .5);
    }

    ul.underline-indicators > .active,
    ul.underline-indicators > [aria-selected="true"]{
        border-bottom: 2px solid hsl(var(--clr-white)/0);
    }

    /*the menu button toggle part..  */
    button.navbar-toggle-mobile{
        display: block;
        position: fixed;  /*using the absolute position would work but it allows the menu to scroll*/
        cursor: pointer;
        z-index: 6;
        right: 6%; /*was 8% before*/
        top: 3%; /*was 4% before*/
        border: 0;
        background: none; /*background-color: transparent; will have the same effect*/
        background-image: url(./assets/shared/icon-hamburger.svg);
        background-size: cover;
        width: 1.6rem;
        aspect-ratio: 1;
        /*transform: scale(2.2, 2);*/ /*we can have this and take off the width property and stil get a perfect square which we scale to size*/
    }

    button.dissmiss{
        background-image: url(./assets/shared/icon-close.svg);
    }

    /* these elements outside a grid container will not respond to these.... */

    .grid-container--destination{
        /* we already have display grid set up here so we can go straight to.. */
        grid-template-areas:
            '.title.'
            '.image.'
            '.tabs.'
            '.content.'
    }

    /* **Naming and placing elements in the right areas of the screen** */
    .grid-container .numbered-title{
        grid-area: title;
    }

    .grid-container--destination .grid-image-holder{
        width:100%; /*this overwrites the grid-column: 2/3 placement*/
        padding-top: 2.5rem;
    }

    .grid-container--destination .grid-image-holder h1{
        text-align: left;
    }

    .grid-container--destination .grid-image-holder picture{
        grid-area: images;
    }

    .grid-container--destination .grid-image-holder picture img{
        max-width: 80%;
    }

    .grid-container--destination .tab-list{
        grid-area: tabs;
        max-width: 90%;
        justify-content: center;
        margin: 0 auto 5% ;
        --gap: clamp(1rem, 3.5vw, 5rem)
    }

    .grid-container--destination .tab-list *{
        font-size: clamp(.6rem, 2.3vw, 1.5rem);
    }

    .grid-container--destination .destination-info{
        grid-area: content;
    }

    /* ***********CREW SECTION *********************/
    #main-content.grid-container--crew{
        padding: 0;
        grid-template-areas:
            '.title.'
            '.content.'
            '.dots.'
            '.image.';
    }

    .grid-container--crew > :nth-child(1){
        grid-area: title;
    }
    .grid-container--crew > :nth-child(2){
        grid-area: content;
        max-width: 90%;
        margin-inline: auto;
    }
    .grid-container--crew > :nth-child(3){
        grid-area: dots;
    }
    .grid-container--crew div picture{
        grid-area: image;
        max-width: 100%;
    }

    .grid-container--crew div picture img{
        max-width: 90%;
        border-bottom: 2px solid hsl(var(--clr-white)/.15);
    }
    
    .grid-container--crew .dot-indicators{
        justify-content: space-between;
        --gap: clamp(.5rem, 4vw, 3rem);
    }
    .grid-container--crew .dot-indicators >:not(:first-child){
        --margin-left: 0;
    }
    

    .grid-container--crew div:first-child{
        /* width: 100%;  these would work but*/
        /* text-align: left;  these would work but*/ 
        justify-self: start; /*much better*/
        margin: 3% 0 0;
    }
    /* depends on the grid container to function.... */

    /* mini flex container... */
    .mini-flex-container{
        border-top: 1px solid hsl(var(--clr-white)/.4);
        padding-top: 5%;
        margin-top: 10%;
    }

    /* *****************************TECHNOLOGY SECTION********************************** */

    [role].grid-container--technology{
        display: grid;
        grid-template-columns: minmax(1.5rem, 1fr) minmax(0, 48rem)  minmax(1.5rem, 1fr);
        row-gap: 5%;
        justify-items: center;
        padding-bottom: 25%;
        grid-template-rows: min-content auto 1fr; 
        grid-template-areas: 
            "title title title"
            "image image image"
            ". text .";
    }

    .grid-container--technology > .technology-content{
        grid-column: 2/3;
        grid-area: text;
        grid-row: 3;
    }

    .grid-container--technology > .technology-title{
        grid-column: 1/4;
        grid-row: 1/2;
        margin: 5% 0 0;
        justify-self: start;
        padding-inline-start: 2.8%;
    }

    .grid-container--technology > .image-technology{
        grid-column: 1;
        grid-row: span 2/3;
        grid-area: image;
    }

    .grid-container--technology .side-flex{
        /* already has flex class */
        column-gap: var(--col-gap, 3%);
        flex-direction: column;
        row-gap: var(--row-gap, 0);
        max-width: 60ch;
        text-align: center;
    }

    .grid-container--technology .side-flex > .circle-indicators{
        display: flex;
        flex-direction: row;
        --vertical-space: 0;
        justify-content: center;
        column-gap: 3%;
    }

    .grid-container--technology .circle-indicators > *{
        transform: scale(.8);
    }
}

@media (max-width: 40em) {
    :root{
       /* he we shal redifine some of the font sizes to be smaller as the screen gets smaller */
        /* font-sizes */
        /* we copy and paste since we do not have acces to the figma files.. only the ones that need to be changed*/

        --fs-800: calc(5vw + 1rem);
        --fs-700: 2rem;
        --fs-600: 1.5rem;
        --fs-400: 0.75rem;
        --fs-500: 1rem;
    }

    /* for the background images... */
    .home{
        background-image: url(./assets/home/background-home-mobile.jpg);
        background-position: bottom center;
    }
    .crew{
        background-image: url(./assets/crew/background-crew-mobile.jpg);
    }
    .technology{
        background-image: url(./assets/technology/background-technology-mobile.jpg);
    }

    /* same class with higher specificity because of the arrangement*/
    body .grid-container{
        padding-bottom : 10%;
    }

    .navbar-container .primary-navbar{
        width: 65%;
    }

    /* .grid-image-holder{
        lest take the width back to auto to allow grid-column placement work once again
        since the implementation of grid template areas its been different
        width: auto;
        text-align: center;
    } */

    .grid-container--destination .grid-image-holder h1{
        text-align: center;
    }

    .mini-flex-container{
        flex-direction: column;
        /* to add spacing bw the two elements in grid we can just do a justify-content: space-evenly; */
    }
    /************ CREW SECTION **********/
    #main-content.grid-container--crew{
        grid-template-areas:
            '.title.'
            '.image.'
            '.dots.'
            '.content.';
    }
    
    .grid-container--crew > div:first-child{
        justify-self: center;
    }
    .grid-container--crew  > :nth-child(2){
        max-width: 100%;
    }

    /* ***************technology section*******....... */
    .grid-container--technology > .technology-title{
        justify-self: center;
    }

    .grid-container--technology .side-flex .circle-indicators{
        column-gap: 1%;
    }

    .grid-container--technology .circle-indicators > *{
        transform: scale(.7);
    }
}

@media (max-width: 30em) {
    .grid-container--technology .circle-indicators > *{
        transform: scale(.5);
    }
}

@media (max-width: 62.5em) and (min-width: 50em) {
    .navbar-container .primary-navbar li a span{
        display: none;
    }
}

@media (min-width: 55em) {
    .primary-header{
        /* this could be done without a media query by just going to the header  */
        /* lets use a logical property... */
        margin-block: 1.3rem;
        position: relative;
    }

    .primary-header .logo-container{
        order:-2 ;
    }

    .primary-header::after{
        content: "";
        position: relative;
        background: hsl(var(--clr-white)/.3);
        height: 2px;
        width: auto;
        flex: auto;
        align-self: center;
        order: -1;
        top: -25%;
        transform: translateX(10%); /*we can also use a -ve margin on the right to move it....*/
    }
}

@media (max-width: 55em) and (min-width: 50em) {
    /* we want to give the logo a padding till it hits the tab sizes... */
    .primary-header div.logo-container{
        --right-spacing: 10%;
    }
}

/* h1 styling */

h1,h2,h3,h4,h5,h6,p{
    font-weight: 400;
}
/* h1 styling */

h1{
    margin-bottom: .8rem;
}

/* selecting all direct element child with any sibling child before them. */

/* .flow > * + * {
    outline: 1px solid red;
} */

/* exactly the same as above but we are not looking for adjacent sibling but all direct child elements but first child*/
/* mb the :wherez() removes specificity and all */
.flow > *:where(:not(:first-child)){
    /* this selector works even without the "*" all that is nneded is a valid selector after ">" */
    margin-top: var(--vertical-space, 1rem);
}

/* make images fit and behave better */

img, picture{
    /* display: block; */ /*this maskes images not respond well to hidden attribute*/
    width: 100%;
}


/* because the inputs and others dont inherit fonts by default */

input,
button,
textarea,
select{
    font: inherit;
}

/* disable the animation for people who have turned them off*/
/* prefers-reduced-motion: no-prefrence  will mean the user has not turned the animations off */
@media (prefers-reduced-motion: reduce) {  
    *,
    *::before,
    *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
}

  /* *******************UTILITY CLASSES **************************/

.flex{
    display: flex;
    gap: var(--gap, 1rem);  /*allows us to have flexible gap.....*/
    /* align-content: center; */
}

.flex-equal{
    flex: 1;
}

.flex-two{
    flex: 2;
}

.flex-auto{
    flex: auto;
}

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

.flex-end{
    justify-content:flex-end;
}

.grid{
    display: grid;
    gap: var(--gap, 1rem);  /*--gap is essentialy a varibale name for the gap property it can be called anything eg --gall*/
    align-content: center;
}

.d-block{
    display: block;  /*this class can be used to make the big space span go on the next line. but we use a line break for that*/
}

.invisible{
    display: none;
}

.container{
    /* padding: 0 2rem; */
    padding-inline: 2rem; /*this is just the same as above, it adds the padding to inline direction ie left and right only*/
    /* margin: 0 auto;  */
    margin-inline: auto;  /*also the same as the above margin shorthand. centers our container*/
    max-width: 80rem;
}

.grid-container{
    display: grid;
    column-gap: var(--container-gap, 2rem);
    row-gap: var(--row-gap, 4rem);  /*using the % causes an over flow bug in the parent*/
    grid-template-columns: minmax(2rem, 1fr) repeat(2, minmax(0, 50rem)) minmax(2rem, 1fr);
    place-items: center;
}

/* this naming convention shows that we modified the grid-container class above */
.grid-container--home{
    padding-top: 4%
}

.mini-flex-container p {
    letter-spacing: 1.5px;
}


/* content outside the grid-container will not responde to this */

@media (min-width: 50em){
    :root{
        --fs-800 : calc(5vw + 2rem);
    }

    .mini-flex-container span{
        font-size: calc(1vw + 1rem);
    }

    .grid-container--destination{
        justify-items: start;
        align-items: start;
        /* now to show off what we can do with the grid-template-areas: */
        /* (.'content'.) is indicating we have a space before abd after the content block */
        /* check out the grid layouts for the grid-container max-size to see how grid columns are set up */
        grid-template-areas: 
            '.title title.' /*dots indicate an empty column*/
            '.image tabs.'
            '.image content.'
    }
    /* Naming and placing elements in the right areas of the screen */
    .numbered-title{
        grid-area: title;
    }
    
    picture{
        grid-area: images;
    }
    
    .tab-list{
        grid-area: tabs;
    }
    
    .destination-info{
        grid-area: content;
    }

    /* ******************CREW SECTION********************** */
    .grid-container--crew{
        justify-items: start;
        align-items: start;
        grid-auto-rows: minmax(100px, auto);
        row-gap: 0;
        grid-template-areas: 
            '.title image.'
            '.content image.'
            '.dots image.';
    }

    .grid-container--crew > :nth-child(1){
        grid-area: title;
    }
    .grid-container--crew > :nth-child(2){
        grid-area: content;
    }
    .grid-container--crew > :nth-child(3){
        grid-area: dots;
    }
    .grid-container--crew > :nth-child(4){
        align-self: start;
        grid-area: image;
        max-width: 75%;
        border-bottom: 2px solid hsl(var(--clr-white)/.15);
        align-self: end;
    }

    /* ***************Technology section........... */

    .grid-container--technology{
        display: grid;
        grid-template-columns: minmax(3rem, 1fr) minmax(0, 46rem) minmax(0, 25rem) minmax(1rem, 1fr);
        column-gap: 2rem;
        row-gap: 8%;
        justify-items: start;
        align-content: start;
        grid-template-rows: minmax(min-content, auto) 1fr 1fr; 
        grid-template-areas: 
            ".title title."
            ".text image image"
            ".text image image";
    }


    .grid-container--technology .technology-content{
        grid-column: 2/3;
        grid-area: text;
        grid-row: span 2;
    }

    .grid-container--technology .technology-title{
        grid-column: 2/4;
        grid-row: 1/2;
        margin: 0;
    }

    .grid-container--technology .image-technology{
        grid-column: span 2;
        grid-row: span 2;
        grid-area: image;
        align-self: end;
    }

    .grid-container--technology .side-flex{
        column-gap: var(--col-gap, 5%);
    }

    .grid-container--technology .circle-indicators{
        display: flex;
        flex-direction: column;
        row-gap: 14%;
    }
}
/* ******end of grid areas placement ***********/



.grid-container > *:first-child{
    grid-column: 2;
}

.grid-container > *:last-child{
    grid-column: 3/4;
}

.content-text{
    line-height: 1.8;   
}

.content-padding{
    padding: 0 4em 2.5em;
}

    /* ********ASSISTED TECHNOLOGY*********** */

.sr-only{
    /* we use these rules to hide things like a button visually in a page but the screen reader still gives it recognition */
    /* because it is still in the dom. a display of none takes the element out of the dom */
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;  /*makes the height and width completely vanish*/
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap; /* added line */
    border: 0;
}

/* writing these rules in this class for practise..the above class can just br applied to the link and overriden in the :focus */
.skip-to-content{
    display: inline-block;
    position: absolute;
    z-index: 20; /*just incase*/
    top:0; /*or we can use transform: translateY()*/
    right: 45%;
    transform: translateY(-100%);
    text-decoration: none;
    font-family: var(--barlow-condensed);
    color: hsl(var(--clr-white));
    overflow:hidden; /*clips all overflowing text content*/
    transition: transform 400ms ease;
    font-size: var(--fs-400);
    font-weight: bold;

    /* we can use the commented block below or we can just make some animation above */
    /* width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;  */
}
.skip-to-content:focus{
    transform: translateY(0);
    outline: none;
} 
.box {
    background: lightblue;
    padding: 3rem;
}


/* background-colors */
.bg-accent-custom{
    background-color: hsl(var(--clr-light-blue), 0.2);  /*allows us to have custom alpha value*/
}

.bg-accent-20alpha{
    background-color: hsl(var(--clr-light)/ 0.2);
}

.bg-dark{
    background-color: hsl(var(--clr-dark));
}
.bg-accent{
    background-color: hsl(var(--clr-light));
}
.bg-white{
    background-color: hsl(var(--clr-white));
}

.bg-colorless{
    background-color: hsl(var(--clr-dark),0);
}

/* colors */
.text-dark{
    color: hsl(var(--clr-dark));
}
.text-accent{
    color: hsl(var(--clr-light));
}
.text-white{
    color: hsl(var(--clr-white));
}

.cta{
    background-color: pink;
    --gap: 4rem; /*this is one way to set the gap property in the flex and grid class. another way is the inline way*/
}
/* *******************************TYPOGRAPHY SECTION****************************** */

#typography{
    margin: 4rem 0
}

/* typography */

.barlow-sans-serif {
    font-family: var(--barlow-sans-serif); 
} 
.barlow-condensed {
    font-family: var(--barlow-condensed); 
} 
.bellefair-serif {
    font-family: var(--bellefair-serif); 
} 

.letter-spacing-1 {
    letter-spacing: 4.75px; 
} 
.letter-spacing-2 {
    letter-spacing: 2.7px; 
} 
.letter-spacing-3 {
    letter-spacing: 2.35px; 
} 

.uppercase {
    text-transform: uppercase; 
}

.fs-900 { font-size: var(--fs-900); }
.fs-800 { font-size: var(--fs-800); }
.fs-700 { font-size: var(--fs-700); }
.fs-600 { font-size: var(--fs-600); }
.fs-500 { font-size: var(--fs-500); }
.fs-400 { font-size: var(--fs-400); }
.fs-300 { font-size: var(--fs-300); }
.fs-200 { font-size: var(--fs-200); }

/* ********a few modifications****** */
.fs-900,
.fs-800,
.fs-700,
.fs-600 {
    line-height: 1.1;
}

/* for handling the numbered layouts */
.numbered-title{
    text-transform: uppercase;
    font-family: var(--barlow-condensed);
    font-weight: bold;
    font-size: var(--fs-500);
}
/* will affect any span inside a number-title parent */
.numbered-title span{
    color: hsl(var(--clr-white)/ .4);
    margin-right: .45em;
}


/************************************** INTERACTIVE ELEMENTS****************************************** */

/******** NavBar section*********** */
.primary-navbar{
    --gap : clamp(0.01em, 7.5vw, 6em);
    list-style: none;
    margin:0;
    margin-bottom: var(--nav-margin-bottom, 5rem);
    padding: var(--navbar-padding, 0) 1.2rem 0 4rem;

    /* to create a glassmorphism effect */
    background-color: hsl(var(--clr-white)/.06);
    /* -webkit-backdrop-filter: blur(10px); */
	backdrop-filter: blur(12px);
}

/* to handle browser suport issues */
@supports not(backdrop-filter: blur(12px)){
    /* this is used when the browser does not support the backdrop-fliter: effect */
    .primary-navbar{
        background-image: linear-gradient(to top, hsl(var(--clr-dark),.8) ,hsl(var(--clr-dark),.3));
    }
}

.navbar-toggle-mobile{
    display: none;
}

.primary-navbar > li a {
    text-decoration: none;
    font-weight: 500;
    font-size: clamp(1rem, 2vw, 2rem);  /*the magic with the clamp() is in using the prefered as as View units*/
}

.primary-navbar a > span{
    /* making sure we only select the direct span child of anchor inside navbar li */
    /* fonts in span here are pretty much bolded */
    font-weight: bold;
    margin-right: .5em;
    color: hsl(var(--clr-white));
}

.primary-logo{
    width: clamp(2rem, 4.5vw, 6rem);
}

.navbar-div{
    text-align: right;
}

.logo-container{
    padding: 1rem 1rem 0;
    margin-right: var(--right-spacing, 0);
}

/********************** NAVBAR LOGO***************** */

.underline-indicators > *{
    cursor: pointer;
    padding: var(--item-padding, 1.5rem) 0;
    border:none;  /*this will eliminate any pre made border eg in case of a button we can also border:0;*/
    border-bottom: 2px solid hsl(var(--clr-white)/0);
}

.underline-indicators > *:hover,
.underline-indicators > *:focus{
    border-bottom: 2px solid hsl(var(--clr-white)/ .5);
}
 
.underline-indicators > .active,
.underline-indicators > [aria-selected="true"]{
    /* specifically set text color to white */
    color: hsl(var(--clr-white));
    border-bottom: 2px solid hsl(var(--clr-white));
}

/********* Large button section******* */

.large-button{
    position: relative;
    z-index: 1;
    display: inline-grid;
    /* align-content: center;
    justify-content: center; */

    /* we can combine the two lines into one */
    place-content: center;
    padding: 0 2em;
    /* height: 200px;
    width:200px; */

    /* we can also combine the last two into just one */
    /* aspect-ratio: 1/1;  *or just aspect-ratio: 1* */

    width: clamp(13.5rem, 18vw, 18rem);
    aspect-ratio: 1;

    border-radius: 50%;
    text-decoration: none;
}

/* *****************************destination page section **********************************/
/* **********moon ********/

.moon-image{
    width: clamp(18rem, 30vw, 28rem);
}

.destination-title{
    margin:2% 0 10%;
}
/****************************** crew section **********************************/
.article-name{
    font-size: clamp(1.2rem, 2.5vw, 3.5rem);
    color: hsl(var(--clr-white));
}

.article-paragraph{
    line-height: 1.8;
    color: hsl(var(--clr-white)/.6);
}

.article-paragraph + p{
    color: hsl(var(--clr-white)/.7);
}

.home-content .article-name{
    font-size: calc(5vw + 2rem);
}
/****************************** crew section **********************************/


.large-button::after{
    content: "";
    position: absolute;
    background-color: hsl(var(--clr-white) / .2);

    /* we can also use top,bottom,left,right to make this as large as its parent or we can just do... */
    width: 100%;
    height: 100%;
    z-index: -1;
    border-radius: inherit;
    opacity: .1;
    transition: opacity .2s ease-in, transform .4s ease-in-out;
}

.large-button:hover::after,
.large-button:focus::after{
    opacity: 1;
    transform: scale(1.4);
}

.tab-list {
    --gap: 2rem;
    margin-left: var(--margin-left, 0);
    margin-bottom: 8%;
}

.dot-indicators{
    --gap: clamp(0.4rem, 1.4vw, 2rem);
}

.dot-indicators > *{
    display: block;
    transform: scale(0.8);
    aspect-ratio: 1;
    cursor:pointer;
    border: 0;
    padding: .5em;
    background-color: hsl(var(--clr-white)/ .3);
    border-radius: 50%;

    /* this property is redefined and is not in the same scope as the one above. */
    /* properties defined like this can be redefined when this class is applied to an element then using inline method
    or another class for such element. */
    margin-left: var(--margin-left, 2.5rem);
}

.dot-indicators > :first-child{
    --margin-left: 0;
}

.dot-indicators > *:hover,
.dot-indicators  > *:focus{
    background-color: hsl(var(--clr-white)/ .5);
}

.dot-indicators  > *[aria-selected="true"]{
    background-color: hsl(var(--clr-white));
}

.circle-indicators > *{
    display: grid;
    place-content: center;
    margin-left: var(--margin-left, 0);
    cursor: pointer;
    width:4em;
    height:4em;
    border: 1px solid hsl(var(--clr-white)/ .25);
    border-radius: 50%;
}

.circle-indicators > *:hover,
.circle-indicators > *:focus{
    border: 1px solid hsl(var(--clr-white)/ .5);
}

.circle-indicators > [aria-selected="true"]{
    background-color: hsl(var(--clr-white));
    color: hsl(var(--clr-dark));
}

@media (max-width: 800px) {
    .grid-container{
        position: relative;
        /* grid-template-columns: minmax(0, 1rem) minmax(0, 1fr) minmax(0, 1rem); */
        grid-template-columns: minmax(0, .2rem) minmax(0, 1fr) minmax(0, .2rem);
        text-align: center;
        padding: 0;
        padding: 0 1% 8%;
    }
    
    .grid-container > *:first-child{
        grid-column: 2/3;
    }
    
    .grid-container > :first-child p:nth-child(2){
        position: relative;
        margin-bottom: 0;

        max-width: 50ch;  /*using the character unit(ch) to determine how many characters can fit in a line*/

        /* we can also say */
        /* padding-inline: 2%; */
    }

    .grid-container > *:last-child{
        grid-column: 2/3;
        text-align: center;

        /* same effect can be gotten with this.. */

        /* display: flex;
        justify-content: center;
        align-items: flex-start; */
    }
}