html{
	scrollbar-width:none;
}
.header-home{
	background-color: var(--primary-bg);
    background-repeat: no-repeat;
	background-position: center;
	background-size: auto 100%;
    height: 19vh;
    display: grid;
    grid-template-columns: 1fr 2fr;
    align-content: center;
}

.header-slogan{
	display: grid;
    align-self: center;
    color: var(--primary-text-color);
    font-size: 1.5em;
    font-weight: lighter;
    letter-spacing: 2px;
    grid-column: 2;
	border-left: solid 1px white;
}
#logo{
    max-width: 40vw;
    align-self: center;
}
.header-home > a{
	display: grid;
    grid-column: 1;
}

body {
    margin: 0;
    padding: 0;
    font-family: Montserrat;
    overflow-x: hidden; /* Hide horizontal scroll */
}

.container{
    width: 100vw;
    margin: 0 auto;
}

.logo{
    text-align: center;
    margin-bottom: 20px;
}
.slogan{
	text-align: center;
    margin-bottom: 20px;
	font-size: 1.7em;
}

.introduction-text-top{
    background-color: darkslateblue;
    padding: 12px;
    color: white;
    font-size: 1em;
    font-family: Montserrat;
    letter-spacing: 1px;
    font-weight: normal;
    text-align: center;
}

.carousel-container {
	display: grid;
	grid-template-rows: 1fr 10vh 0vh; /*third row is air for the actors list button made 0, on 29/enero/2025)*/
}

.carousel {
    display: grid;
    grid-template-columns: repeat(7, 64vw);
    gap: 20px; /* Add gap space between cards */
    width: 100vw;
	overflow-y : hidden;
	scrollbar-width: thin;
	scrollbar-width: none;
	
}

.actor-card {
    background-color: #fff; /* White background */
    padding: 20px; /* Add padding */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    scroll-snap-align: start;
    box-shadow: 0 4px 8px rgba(255, 255, 255, 1); /* Add shadow */
	font-size : 1em;
}
.actor-card a{
	text-decoration : none;
	color : black;
}

.actor-card img {
    width: 150px; /* Set fixed width */
    height: 150px; /* Set fixed height */
    object-fit: contain;
    background-color: black;
    max-height: 150px; /* Set max-height to maintain consistency */
    max-width: 150px; /* Set max-width to maintain consistency */
    border-radius: 50%; /* Apply circle effect */
}

.actor-card h2 {
    margin: 0px 0;
	font-size : 1em;
}

.actor-card p {
    margin: 0;
}

.actor-card:hover {
    transform: scale(1.1);
}

/******* starts actors list button*******/
.goto-actors-list{
	display:grid;
	grid-template-columns: 1fr 100vw 1fr;
}
.goto-actors-list > a{
	text-decoration:none;
	color: white;
	font-weight: normal;
	
}
.goto-actors-list-button{
    background-color: #001011;
    font-weight: bold;
    color: white;
    cursor: pointer;
    border-radius: 0px;
    font-family: 'Montserrat';
    letter-spacing: 4px;
    font-size: 1em;
}
.goto-actors-list-link{
	display:grid;
	grid-column: 2;
	color: white;
	font-weight: normal;
}
/******* ends actors list button*******/


/******* starts About AO *******/
.abstract{
    background-color: cadetblue;
    padding: 1em;
    color: white;
    font-size: 1.5em;
    font-family: Montserrat;
    letter-spacing: 0px;
    font-weight: normal;
    text-align: center;   
}
.about{
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: 6px;
}
.text-block{
    font-size: 1em;
    color: white;
    padding: 1em;
    background-color: darkslateblue;
    position:relative;
    overflow:hidden;
}
/*safari on tablet*/
.safari-text-block{
    
}
.text-block > h2, p{
    position:relative;
    z-index:2;
}
.big-message{
    font-size:1.5em;
    background-color: cadetblue;
    padding:1em;
}
.first-par{

}
.profile-sample{
    width: 68%;
    transform: rotate(-33deg);
    position: absolute;
    left: 63%;
    top: 5%;
    z-index: 1;
    filter: blur(2px);
}
.second-par{
}
.third-par{
    
}
.fourth-par{
    
}
.fifth-par{
list-style: none;
    font-size: 1em;
    display: grid;
    grid-template-rows: 1fr;
    grid-gap: 12px;
}

.personal-url{
    position:relative;
    width: 100%;
}
.photos{
    position:relative;
    width: 100%;
    filter: blur(0px);
}
.block-4{
   max-height: 80vh;
}
.full-profile{
    position: relative;
    width: 100%;
    filter: blur(3px);
}
.seventh-par{
    top:-266px;
}

.contact-us{
    background-color: darkslateblue;
    font-size: 2em;
    margin-top: 6px;
    margin-bottom: 0px;
    text-align: center;
}


/******* ends About AO *******/


/****** Steps to register *******/
.introduction{
    padding: 0px;
    color: white;
    font-size: 1em;
    font-family: Montserrat;
    letter-spacing: 0px;
    font-weight: normal;
    text-align: center;
	display: grid;
	grid-template-rows: repeat(4,22vh);
	grid-template-columns: 1fr;
	grid-gap:6px;
	width: 100vw;
}

.step-images{
	background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
	padding: 10px;
}

.step-one{
	display: grid;
	grid-template-columns:  1fr 3fr;
	background-color: cadetblue;
}
.step-one-image{
	display: grid;
	grid-column: 2;
	background-image: url('../img/landing/sendmail.jpg');
}
.step-text-left{
	grid-column: 1;
	color: white;
	font-weight: lighter;
	text-align: center;
	align-self: center;
}
.step-text-right{
	grid-column: 2;
	color: white;
	font-weight: lighter;
	text-align: center;
	align-self: center;
}

.step-two{
	display: grid;
	grid-template-columns:  3fr 1fr;
	background-color: darkslateblue;
}
.step-two-image{
	display: grid;
	grid-column: 1;
	background-image: url('../img/landing/register2.jpg');
}
.step-three{
	display: grid;
	grid-template-columns:  1fr 3fr;
	background-color: cadetblue;
}
.step-three-image{
	display: grid;
	grid-column: 2;
	background-image: url('../img/landing/headshot3.jpg');
}
.step-four{
	display: grid;
	grid-template-columns:  3fr 1fr;
	background-color: darkslateblue;
}
.step-four-image{
	display: grid;
	grid-column: 1;
	background-image: url('../img/landing/reel.jpg');
	background-position: right 36%;
    background-size: 100% auto;
}

.photographs-sale{
	display:grid;
	grid-template-columns: 1fr;
	grid-template-rows: 1fr 15vh 1fr;
	background-color: cadetblue;
	color: white;
	text-align: center;
	font-size: 1em;
	font-weight: lighter;
}
.no-headshot{
	font-size: 1em;
	font-weight: bold;
	text-align: center;
	align-self: center;
}
.photographers{
	display:grid;
	background-image: url('../img/photographers/photographers.png');
	background-repeat: no-repeat;
	background-size: 100vw;
	background-position: center;
	
}
/****** Steps to register *******/


/* STARTS WORKING ALTERNATE LANDING PAGE*/
body{
    background-color: var(--primary-bg);
}

#parentHeader{
    grid-template-rows: 25vh 25vh 25vh 25vh;
}
.header-home{
    grid-template-columns:1fr 1fr;
    grid-row: 2;
}
.header-home > a{
    position:relative;
}
#logo{
    position:absolute;
    right:0px;
}
.header-slogan{
    font-size: clamp(1em, 6vw, 2em);
    letter-spacing:0px;
}
#menuButton{
    display:none;
}
#menuBlock{
    grid-row: 3;
    display:grid;
}
#menu{
    display: grid;
}
#menu > .action{
    background-color: var(--primary-bg);
    color:var(--primary-text-color);
}
#menu > .action:hover{
    background-color: var(--accent-shiny);
    color:var(--primary-text-color);
}
.option-ver{
    width:90vw;
}

#footer{
    display: none;
}
/* ENDS WORKING ALTERNATE LANDING PAGE*/

/******* media querys *******/
@media ( (min-width: 600px) and (max-width: 1023px) and (orientation:portrait) and (hover:none) ){
    
    #logo{
        max-width: 25vw;
        max-height: 20vh;
    }
    .header-home{
        max-height: 14vh;
        grid-template-columns: 1fr 1fr;
    }
    .header-home > a{
        grid-column: 1;
    }
    .header-slogan{
        grid-column: 2;
    }
    
    .carousel{
        grid-template-columns: repeat(7, 26vw);
    }
    .abstract{
        font-size: 3em;
    }
    .about{
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
    .text-block{
        max-height: 85vh;
    }
    .block-4{
        max-height: 85vh;
    }

    .fifth-par{
        font-size: 1em;
        grid-gap:30px;
    }
    .contact-us{
        font-size: 2.5em;
    }

}
@media ( (min-width: 1023px) and (orientation:portrait) and (hover:none) ){

    
}
/* Media query for desktop screens */
@media (min-width: 1024px) {
	
	.header-slogan{		
		align-self: center;
		color: white;

		border-left: solid 1px white;
		grid-column: 3/5;
	}
	.header-home{
		height: 20vh;
		display: grid;
		grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
		align-content: center;
	}
	#logo{	
		height: 18vh;
		max-width: unset;
		align-self: center;
		border-right: none;
		
	}
	.header-home > a{
		display: grid;
		grid-column: 3;
	}
	.header-slogan{
        grid-column: 4/5;
    }
	
	.introduction-text-top{
        padding: 10px;
        font-size: 1.0em;
    }
	.about{
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
    .abstract{
        font-size: 3em;
    }
    .text-block{
        font-size: 1.5em;
    }
    .block-4{
        max-height: 180vh;
    }
    .fifth-par{
        grid-gap:30px;
    }

    .seventh-par{
        top: -474px;
        padding: 2em;
    }
    .contact-us{
        font-size: 2.5em;
    }
	/******* starts actors list button*******/
	.goto-actors-list{
		display:grid;
		grid-template-columns: 2fr 100vw 2fr;
	}
	.carousel-container {
		grid-template-rows: 1fr 10vh 0vh; /*third row is air for the actors list button*/
	}
	
	.carousel{
		grid-template-columns : repeat(7, 16vw);
		overflow-y : hidden;
		height : 41vh;
		scrollbar-width: thin;
		scrollbar-width: none;
	}
	
	.container {
    width: 90vw;
    margin: 0 auto;
    overflow: hidden;
	}
	
	.actor-card img {
	max-width: 12vw;
    height: 25vh;
    object-fit: contain;
    /* max-height: 150px; */
    /* max-width: 150px; */
    border-radius: 50%;
	}
	
	/****** Steps to register *******/
	.introduction{
		font-size: 3em;
		grid-template-rows: repeat(4, 60vh);
	}
	.step-four-image{
		background-position: right 43%;
	}
	.photographs-sale{
		grid-template-rows: 1fr 60vh 1fr;
	}
	.photographers{
		background-position: top;
	
	}
	/*STARTS ALTERNATE LANDING PAGE FOR 1024PX*/
            #parentHeader{
                grid-template-rows: 33.33vh 33.33vh 33.33vh;
            }
            .header-home{
                grid-row: 2;
            }
            .option-hor{
                height: 1em;
            }

            #menuBlock{
                grid-row: 3;
                display:grid;
            }
            #menu{
                display:none;
            }

            #menu > .action{
                background-color: var(--primary-bg);
                color:var(--primary-text-color);
            }
            #menuBlock > .action{
                background-color: var(--primary-bg);
                color:var(--primary-text-color);
            }
            #menuBlock > .action:hover{
                background-color: var(--accent-shiny);
                color:var(--primary-text-color);
            }
            
            #footer{
                display: none;
            }
    /*STARTS ALTERNATE LANDING PAGE FOR 1024PX*/
	/****** Steps to register *******/
}