@import url(./global.css);
html{
    scroll-timeline: --progress_loading block;
}
/*  General Setting */
body>*:not(header , footer , #progress_bar)
{
    margin-bottom: clamp(3.556rem, calc(2.141rem + 7.955vw), 6.667rem);
}
*,::after,::before{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
header{
    padding-top:  clamp(1.333rem, calc(1.131rem + 1.136vw), 1.778rem);

}
section ,footer,header{
    padding-inline: clamp(12px, calc(-22.286px + 10.714vw), 132px);
}

p , .card_Price span{
    font-size: var(--paragraph-text-size);
    color: var(--Neutral_700);
    font-family: var(--inter-regular);
}
h1 , .card_Price >:nth-child(2){
    font-family: var(--Martian-Bold);
    color: var(--Neutral_900);  
    text-wrap: balance;
}

h1 , p {
 margin-block: clamp(1.25rem,5%,2.5rem);
}
button{
    color:var(--Neutral_900) ;
    font-size: var(--button-text-size);
    font-family: var(--Martian-semiBold);
    outline: 2px solid var(--Neutral_900);
    padding: .75rem;
    border-radius: 8px;
    background-color: var(--Light-Salmon_50);
    border: none;
    transition: 3ms ease-in-out 1ms;
}
button img{
    vertical-align: middle;
}
button:hover{
    background-image: var(--gradient);
}
button:focus{
    outline: 2px dashed var(--Neutral_900);
}
#hero_title{
    color: transparent;
    background-clip: text;
    background-image: var(--text-gradient);
}
img{
    object-fit: contain;
}
#progress_bar{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: .5rem;
    background-image: linear-gradient(90deg, #FDBB2D 0%, #22C1C3 100%);
    transform-origin: 0% 50%;
    transform: scaleX(0);
    animation: loading cubic-bezier(0.4, 0, 1, 1);
    animation-timeline: --progress_loading;
    overflow: hidden;
    z-index: 22;
}


.section_with_img{
    display: flex;
    flex-direction: row;
    transition: all 0ms cubic-bezier(0.6, 0.04, 0.98, 0.335) 2ms;
}
.section_with_img >img{
    border-radius: 8px ;
    object-fit: cover;
}
.section_with_img .side_img{
        filter: grayscale(1);

}
.section_with_img .side_img:hover{
    transform: rotate(-5deg);
    filter: grayscale(0);

}
.sectio
.left_start , .left_start>div{
    display: flex;
}

.left_start>div{
    flex-direction: column;
}
.left_start{
    margin-block: 1.25rem;
}
.left_start .avatars{
    max-height: 2rem ;
    height: 5%;
}
#bgSquared h1,#membership_opt_section h1,#Testimony h1 ,footer h1{
    text-align: center;
    text-wrap: balance;
    padding: 1rem;

} 


/*STYLING SECTION ITEMS : section by section */
/*READ TOGETHER SECTION*/
.check_Para{
    display: flex;
    flex-wrap: nowrap;
    gap: .5rem;
    margin-bottom: 5%;
}
.check_Para p{
     margin-block: 0;
}
#hero_grid_Background, header , .card_Price:nth-child(2) , #bgSquared {
    background-image: 
        url(./assets/images/pattern-light-bg.svg),
        url(./assets/images/pattern-glow.svg);

    background-position: 
        100% ,
        right bottom;

    background-repeat: no-repeat, no-repeat;

    background-color: var(--Neutral_100);
    background-size: auto , 50%;
}

/*MEMBERSHIP OPTIONS SECTION */
#price_container{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap:1rem;
    
}

.card_Price{
    outline: 2px solid var( --Neutral_200 );
    border-radius: 8px ;
    min-width: calc(640px/2 - 1rem);
    width: calc(100%/3 - 1rem);
    padding-block: 1rem;
    max-width: 20rem;
    box-shadow: 4px 4px .5rem var(--Neutral_100 ) ;

}
.card_Price span+div {
    border-top: 1px solid var(--Neutral_200);
    padding-top: .5rem;
}
.card_Price>*{
    margin: 5% ;
}

.card_Price>div > div{
    display: flex;
    align-items: center;
    gap: .5rem;
}
.card_Price>*>*{
    margin-block: .5rem;
}
.card_Price>h1{
    font-size: calc(var(--price-citation-size));
}
.card_Price button{
    width: 100%;
}


/*TECH READING JOURNEY SECTION*/
#Reading_Journey_Container{
    display: flex;
    gap: 5%;
}
#Reading_Journey_Container >* , #Reading_Journey_Container p{
    font-family: var(--Martian-semiBold);
    flex: 1 1 auto;
    font-size: calc(var(--etiquette) + 4px);
}
#Reading_Journey_Container .days_arrowImages{
    display: flex;
    justify-content: space-between;
}

#Reading_Journey_Container .days_arrowImages>span{
    display: inline-block;
    border: 2px solid var(--Neutral_900);
    padding: .5rem .8rem;
    height: fit-content;
    border-radius: 4px;
}

.etiquette{
    display: inline-block;
    font-size: .5rem;
    font-family: var(--Martian-semiBold);

}

/*STYLING TESTIMONY SECTION*/
cite 
{
     text-align: left;
}
cite blockquote{
    font-size: var(--price-citation-size);
    font-style: normal;
    font-family: var(--Martian-semiBold);
    text-wrap: balance;   
}

cite #Author{
    font-size: calc(var(--paragraph-text-size) - var(--paragraph-text-size)/4 );
    font-family: var(--inter-regular);
    
}

/*STYLING FOOTER*/
footer{
    background: url(./assets/images/pattern-dark-bg.svg) var(--Neutral_900);
    padding-block: clamp(3.556rem, calc(3.151rem + 2.273vw), 4.444rem) ;
    display: flex;
    flex-direction: column;
    align-items: center;
 }
 
 footer>*{
    color: var(--Neutral_0);
    flex: 1 1 100%;
 }
 footer button{
    outline: 2px solid var(--Neutral_0);
    background: transparent;

 }
 footer button:hover{
    background-image: linear-gradient(to right , rgba(255, 255, 255, 0.792),var(--Neutral_900) );
    outline: 2px dashed var(--Neutral_0);
 }
footer #avatars_Start_footer{
    display: flex;
}
footer #avatars_Start_footer>*{
    flex: 1 1 auto;
}
footer #avatars_Start_footer {
    width: fit-content;  
}
footer #avatars_Start_footer ,footer>button{
    max-width: 380px;
    width: 45%;
    min-width:calc(20rem - 5%);
}
footer #avatars_Start_footer >div{
    display: flex;
    flex-direction: column;
}
footer #footer_Content{
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin-top: 4rem;
    border-top: 1px solid var(--Neutral_0);
    padding-top:clamp(1.333rem, calc(1.131rem + 1.136vw), 1.778rem);
}
footer #logo_footer{
        display: flex;
        gap: 1rem;
        transition: 3ms ease-in-out 1ms ;
    }
footer #logo_footer>*:hover{
    animation: scale_rotate .75s ease-in-out 1s 1 alternate;
}
@keyframes scale_rotate {
    0%{
        transform:scale(1) rotateY(0deg);

    }
    100%{
        transform: scale(1.25) rotateY(180deg);    
    }
    
}
@keyframes loading {
    to{ transform: scaleX(1);}
}
    
/*RESPONSIVE DESIGN WITH MEDIA QUERIES*/

@media  screen and (max-width:425px) {
    footer #footer_Content{
        flex-direction: column;
        align-items: center;
        gap: .5rem; 
    }
    
}

@media screen and  (max-width: 540px) {
 .card_Price{
            margin-inline:auto;
    }

}

@media screen and ((max-width:912px) ) {
 .section_with_img, #Reading_Journey_Container{
    flex-direction: column;
 }
.section_with_img .side_img{
    order: 2;
}

#Reading_Journey_Container img{
    display: none;
}

}

@media screen and (min-width:1024px){

    .section_with_img{
    row-gap: 1.5rem;
    height: 100vh;
    justify-content: space-between;
    align-items: center;
   }
    .section_with_img >*{
    width: calc((100% /2) - 1.5rem);
    height: 60%;
    } 
    #Testimony .star_container{
    width: fit-content;
    margin-inline: auto;
}
 
}
@media screen and (min-width:768px){
cite 
{
     text-align: center;
}
}