@charset "UTF-8";
/* CSS Document */

*{
	box-sizing: border-box;
}

body{
	margin: 0;}

main{
	width: 100%;
	margin: 0 auto;
	background-color: black;
	position: relative;
	z-index: 0;
}

header{
	width: 90%;
	height: 85px;
	border-radius: 22px;
	padding: 2% 3%;
	margin: 0 auto;
	display: flex;
	align-self: center;
	justify-content: space-around;
	align-items: center;
	background: transparent;
	position: sticky;
	top: 0;
	z-index: 100;
	transition: all 0.3s ease;
}

header a{
	font-size: clamp(.8rem, 1.5rem, 1.8rem);
}

header.scrolled {
    background: #FFFFFF10;
    backdrop-filter: blur(10px);
}

.left{
	width: 75%;
	height: auto;
	display: flex;
	align-items: center;
}


.left a:first-child{
	background-color: transparent;
}

.logo{
	width: 52px;
	height: 52px;
	margin-right: 3%;
	cursor: pointer;
}

.menu{
	width: 80%;
	display: flex;
	justify-content: space-around;
}


.menu li{
	width: auto;
	height: auto;
	list-style-type: none;
	cursor: pointer;
}

.menu li:hover, .left img:hover{
	transform: scale(1.2);
    transition: transform 0.3s ease;
	text-decoration: underline white;
}

.right{
	width: 25%;
	height: auto;
	display: flex;
	justify-content: flex-end;
}


	/* Switch */
.switch-container {
	position: relative;
	width: 70px;
	height: 28px;
	background: #d6d6d6;
	border-radius: 50px;
	box-shadow:
	inset -8px -8px 16px #ffffff,
	inset 8px 8px 16px #b0b0b0;
}

.toggle-checkbox {
	display: none;
}

.switch {
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	height: 100%;
	transform: translateY(-50%);
	border-radius: 50px;
	overflow: hidden;
	cursor: pointer;
}

.toggle {
	position: absolute;
	width: 35px;
	height: 28px;
	background: linear-gradient(145deg, #d9d9d9, #bfbfbf);
	border-radius: 50px;
	top: 0px;
	left: 0px;
	box-shadow: -4px -4px 8px #ffffff, 4px 4px 8px #b0b0b0;
	transition: all 0.3s ease-in-out;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	padding-left: 8px;
	z-index: 1;
}

.switch::before, .switch::after {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	font-family: Arial, sans-serif;
	font-size: 10px;
	font-weight: bold;
	color: #888;text-transform: uppercase;
	pointer-events: none;
	transition: all 0.3s ease;
}

.switch::before {
	content: "ESP";
	left: 8px;
}

.switch::after {
	content: "ENG";
	right: 8px;
}

.toggle-checkbox:checked + .switch .toggle {
	left: 30px;
	background: linear-gradient(145deg, #cfcfcf, #a9a9a9);
}


.toggle-checkbox:checked + .switch::before {
	color: #555;
}

.toggle-checkbox:not(:checked) + .switch::after {
	color: #555;
}

.led {
	width: 5px;
	height: 5px;
	background: grey;
	border-radius: 50%;
	box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.2);
	transition: all 0.3s ease-in-out;
}

.toggle-checkbox:checked + .switch .toggle {
	left: 35px;
	background: linear-gradient(145deg, #cfcfcf, #a9a9a9);
	box-shadow: -4px -4px 8px #ffffff, 4px 4px 8px #8a8a8a;
}

.toggle-checkbox:checked + .switch .led {
	background: green;
	box-shadow: 0 0 15px 4px green;
}

.toggle-checkbox:not(:checked) + .switch .led {
	background: blue;
	box-shadow: 0 0 15px 4px blue;
}

.switch:hover .toggle {
	box-shadow: -4px -4px 12px #ffffff, 4px 4px 12px #9b9b9b;
}

.gral{
	width: 100vw;
	height: auto;
	background-color: transparent;
	padding: 0 4vw;
	z-index: 5;
}

.title{
	min-height: 45vw;
	align-content: center;
	background-color: transparent;
}


.top{
	position: absolute;
	left: 0;
    width: 100%;
    transform: translateY(-15%);
    z-index: -1;
	top: 0;
	-webkit-mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
    mask-image: linear-gradient(to bottom, black 70%, transparent 100%);
	pointer-events: none;
}

#projects {
   scroll-margin-top: 18vw;
}

.carouselwrapper {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 20px;
	padding: 40px;
	margin-top: 8%;
}

.carouselviewport {
	width: 64vw;
	overflow: hidden;
}

.carouseltrack {
	display: flex;
	gap: 2vw;
	transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.projectcard {
	width: 20vw;
	aspect-ratio: 1 / 1;
	flex-shrink: 0;
	overflow: hidden;
	position: relative;
	cursor: pointer;
	transition: all 0.3s ease;
	text-decoration: none;
	display: block;
}

.projectcard img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s ease;
	pointer-events: none;
	border-radius: 22px;
}

.projecttitle {
	position: absolute;
 	bottom: 5%;
	left: 5%;
	color: white;
	font-size: 2rem;
	font-weight: 600;
	opacity: 0;
	transform: translateY(5%);
	transition: all 0.3s ease;
	text-shadow: 0 2px 10px rgba(0,0,0,0.9);
	pointer-events: none;
	z-index: 10;
	cursor: pointer;
}


.projectcard:hover img {
	transform: scale(1.05);
}

.projectcard:hover .projecttitle {
	opacity: 1;
	ransform: translateY(0);
}

.carouselarrow {
	width: 50px;
	height: 50px;
	border-radius: 50%;
	border: 2px solid white;
	background: transparent;
	color: white;
	font-size: 1.2rem;
	cursor: pointer;
	transition: all 0.3s ease;
	flex-shrink: 0;
}

.carouselarrow:hover {
	background: white;
	color: #1a1a1a;
}






.softwares{
	height: auto;
	display: flex;
	flex-direction: column;
	align-content: flex-end;
}

.softwares h2{
	margin-bottom: 4%;
}

.platform{
	width: 60%;
	display: flex;
	flex-direction: column;
	margin-bottom: 10%;
	align-self: center;
}

.base{
	width: 100%;
	height: 65px;
	background-color: gray;
	border-radius: 20px;
	align-content: flex-end;
	padding-bottom: 10px;
}

.logossoft{
	display: flex;
	gap: 10px;
	justify-content: space-around;
	transform: translateY(15%);
}

.softlogo{
	width: 12%;
	gap: 10px;
	height: auto;
}

.softimg, .softimg1{
	width: 100%;
	transform: translateY(10%);
}

.softimg1{
	max-width: 100%;
	align-content: flex-end;
}

.stars{
	width: 100%;
	height: 30px;
	display: flex;
	justify-content: space-around;
}

.starsgroup{
	width: 18%;
	align-content: center;
	text-align: center;
	
}

.star-filled, .star-empty, .star-half{
	font-size: clamp(14px, 18px, 18px);
	color: #FFFFFF;
}

.star-half {
    position: relative;
    display: inline-block;
}

.star-bg {
    color: #ffffff;
}

.star-fill {
    position: absolute;
    left: 0;
    top: 0;
    color: #FFFFFF;
    width: 50%;
    overflow: hidden;
}


.aboutme{
	width: 100%;
	display: flex;
	justify-content: space-between;
}

.aboutleft{
	width: 60%;
	padding-right: 5%;
}

.softskills{
	width: 100%;
	display: flex;
}

.softskills1{
	width: 50%;
}

.aboutleft p, .aboutleft h3, .softskills{
	padding-left: 5%;
}

.aboutright{
	width: 30%;
	height: auto;
	display: flex;
	justify-content: center;
}

.me{
	width: 100%;
	height: auto;
	object-fit: contain;
}


.contact{
	width: 100%;
	display: flex;
	flex-direction: column;
	text-align: center;
}

.contact h2{
	margin: 10% 0 2%;
}

.sc {
    width: 60%;
    height: 150px;
    display: flex;
    justify-content: space-around;
    align-items: flex-start;
    align-self: center;
	margin-bottom: 50px;
	background-color: transparent;
}

.sc a {
    background-color: transparent;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    position: relative;
    text-decoration: none;
}

.sc a::before {
    content: '';
    position: absolute;
    width: 160%;
    height: 160%;
    border-radius: 50%;
    filter: blur(20px);
    opacity: 0;
    transition: opacity 0.4s ease, transform 0.4s ease;
    z-index: 0;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.8);
    background: radial-gradient(circle, transparent 0%, transparent 100%);
}

/* whats */
.sc a:nth-child(1)::before {
    background: radial-gradient(
        circle, 
        rgba(37, 211, 102, 0.9) 0%, 
        rgba(37, 211, 102, 0.5) 25%, 
        rgba(37, 211, 102, 0.2) 50%,
        transparent 70%);
}

/* linkedin */
.sc a:nth-child(2)::before {
    background: radial-gradient(
        circle, 
        rgba(10, 102, 194, 0.9) 0%, 
        rgba(10, 102, 194, 0.5) 25%, 
        rgba(10, 102, 194, 0.2) 50%,
        transparent 70%);
}

/* insta */
.sc a:nth-child(3)::before {
    background: radial-gradient(
        circle, 
        rgba(225, 48, 108, 0.9) 0%, 
        rgba(193, 53, 132, 0.5) 25%, 
        rgba(245, 133, 41, 0.3) 50%,
        transparent 70%);
}

/* mail */
.sc a:nth-child(4)::before {
    background: radial-gradient(
        circle, 
        rgba(234, 67, 53, 0.9) 0%, 
        rgba(234, 67, 53, 0.5) 25%, 
        rgba(234, 67, 53, 0.2) 50%,
        transparent 70%);
}

.sc a:hover::before {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

.sc1, .sc2, .sc3, .sc4 {
    width: 80%;
    aspect-ratio: 1 / 1;
    object-fit: contain;
    position: relative;
    z-index: 2;
    transition: transform 0.3s ease;
    -webkit-box-reflect: below 25px linear-gradient(to bottom, transparent 0%, rgba(255, 255, 255, 0.2) 100%, rgba(255, 255, 255, 0.5) 20%);
	cursor: pointer;
}

.sc a:hover .sc1, .sc a:hover .sc2, .sc a:hover .sc3, .sc a:hover .sc4 {
    transform: scale(1.08);
}






                         /* ILLUSTRATION */

.topblur{
	position: absolute;
	left: 0;
    width: 100%;
    transform: translateY(-38%);
    z-index: -1;
	top: 0;
	filter: blur(10px);
	-webkit-mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
    mask-image: linear-gradient(to bottom, black 70%, transparent 100%);
}

.titleblur{
	min-height: 27vw;
	align-content: center;
	background-color: transparent;
	margin-bottom: 5vw;
}

.titleblur h1{
	text-shadow: 0 0 15px rgba(0,0,0,0.8);
}

.crabs{
	width: 100%;
	height: auto;
	display: flex;
	flex-direction: row;
	margin-bottom: 18%;
	justify-content: space-between;
}

.crabsinfo{
	width: 30%;
}

.crabsinfo img{
	width: 80px;
	height: 80px;
	justify-content: flex-start;
}

.line{
	width: 100%;
	height: 3px;
	background-color: white;
	margin-top: 3%;
}

.crabsmedia{
	width: 65%;
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
}

.crab1, .crab2, .crab3{
	width: 30%;
	aspect-ratio: 1 / 1;
	height: auto;
	object-fit: contain;
	border-radius: 22px;
}


.crab2{
	align-self: center;
}

.crab3{
	align-self: flex-end;
}

.logoinfo{
	width: clamp(40px, 30%, 80px);
	aspect-ratio: 1 / 1;
	height: auto;
	object-fit: contain;
	align-self: flex-start;
	text-align: center;
}

.academic, .academicinfo{
	width: 100%;
	height: auto;
	justify-content: space-between;
}

.academicinfo{
	display: flex;
	margin: 5% 0;
}

.academic1{
	width: 55%;
	height: auto;
	border-radius: 22px;
}
.academicinfo3{
	width: 40%;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}


.academicmedia{
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	
}

.academicphoto{
	width: 16%;
	height: 45vw;
	margin-bottom: 3%;
	object-fit:scale-down;
}


.go-back{
	text-align: right;
	padding-bottom: 5%;
}


.go-back a {
    display: inline-block;
    transition: transform 0.3s ease;
}

.go-back a:hover {
    transform: scale(1.2);
    text-decoration: underline white;
}





                         /* LOGOS */
.logocontainer {
    width: 100%;
    min-height: 30vw;
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 0;
}

.card {
    width: 30%;
    height: 16vw;
    position: relative;
    border-radius: 22px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.card:nth-child(1) {
	box-shadow: 0 0 25px rgba(90, 115, 240, 0.8);
}

.card:nth-child(2) {
	box-shadow: 0 0 25px rgba(100, 175, 224, 0.8);
}

.card:nth-child(3) {
	box-shadow: 0 0 30px rgba(255, 255, 255, 0.8);
}

.cardphoto {
    width: 100%;
    height: 16vw;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 22px 22px 0 0;
}

.card:nth-child(1) .cardphoto {
    background-color: #0F1753;
}

.card:nth-child(2) .cardphoto {
    background-color: #445f79;
}

.card:nth-child(3) .cardphoto {
    background-color: #FFFFFF;
}

.cardlogo {
    width: 50%;
    height: 70%;
	object-fit: contain;
}

.cardinfo {
    width: 100%;
    height: 16vw;
    background-color: cadetblue;
    color: white;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    flex-shrink: 0;
    border-radius: 0 0 22px 22px;
	text-align: center;
	padding: 8% 2%;
}

.cardinfo h3{
	margin-bottom: 2%;
}

.card:nth-child(1) .cardinfo {
    background-color: #A6BAE0;
}

.card:nth-child(2) .cardinfo {
    background-color: #B6CCDF;
}

.card:nth-child(3) .cardinfo {
    background-color: #BABFC8;
}

.card:hover {
    height: 32vw;
	margin-bottom: 5%;
}

.card:hover .card__inner {
    margin-top: -8vw;
}





                 /* PHOTOGRAPHY & 3D MODELING */
                         	/* MENU */


.gallerymenu {
    width: 100%;
    height: 60vh;
    min-height: 500px;
    display: flex;
    gap: 10px;
    padding: 2%;
}

.galleryitem {
    flex: 1;
    height: 100%;
    position: relative;
    border-radius: 22px;
    overflow: hidden;
    cursor: pointer;
    transition: flex 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    text-decoration: none;
}

.galleryitem img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
	border-radius: 22px;
}

.gallerytitle {
    position: absolute;
    bottom: 5%;
    left: 6%;
    color: white;
    font-size: 3.5rem;
    font-weight: 600;
    opacity: 0;
    transform: translateY(5%);
    transition: all 0.4s ease 0.1s;
    z-index: 10;
    text-shadow: 0 2px 10px rgba(0,0,0,0.5);
}

.galleryitem::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50%;
    background: linear-gradient(to top, rgba(0,0,0,0.7), transparent);
    opacity: 0;
    transition: opacity 0.4s ease;
}

.galleryitem:hover {
    flex: 5;
}

.galleryitem:hover img {
    transform: scale(1.05);
}

.galleryitem:hover .gallerytitle {
    opacity: 1;
    transform: translateY(0);
}

.galleryitem:hover::after {
    opacity: 1;
}

                         /* PHOTOGRAPHY */
                         	/* PAGES */

.galleryphotos{
	width: 100%;
	height: auto;
}

.photosgroup{
	width: 100%;
	height: 38vw;
	display: flex;
	justify-content: space-between;
	padding: 2% 0;
}

.photosver{
	width: 24.9%;
	height: 100%;
	border-radius: 22px;
	margin: 0 4%;
}

.photosgroup2{
	width: 100%;
	height: 28vw;
	display: flex;
	justify-content: space-between;
	padding: 2% 0;
	
}

.photoshor{
	width:39.8%;
	height: 100%;
	border-radius: 22px;
	margin: 0 4%;
}


.seriesinfo p, .gralseries a{
	color: black;
}


.interphoto{
	width: 60vw;
	height: auto;
	border-radius: 22px;
	margin: 2vw 0;
}

.interheader {
    width: 100%;
    height: 100vh;
    min-height: 500px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
	border-radius: 22px 22px 0 0;
}

.interheaderbg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.interheaderbg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.interoverlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 60%;
    height: 100%;
    background: rgba(255, 255, 255, 0.85);
    clip-path: polygon(0 0, 100% 0, 75% 100%, 0 100%);
    z-index: 2;
    filter: drop-shadow(10px 0 20px rgba(0, 0, 0, 0.3));
}

.interoverlay::after {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    width: 30px;
    height: 100%;
    background: linear-gradient(to right, transparent, rgba(0,0,0,0.2));
    transform: skewX(-9deg);
    transform-origin: top;
}

.interinfo {
    position: relative;
    z-index: 10;
    background: rgba(255, 255, 255, 0.95);
    padding: 60px 100px;
    text-align: center;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
}

.interinfo h1 {
    font-size: clamp(2rem, 8vw, 5rem);
    font-weight: 900;
    letter-spacing: 0.1em;
    margin: 0 0 20px 0;
    color: #000;
    line-height: 1;
}

.interinfo p {
    font-size: clamp(0.9rem, 2vw, 1.2rem);
    font-weight: 500;
    letter-spacing: 0.2em;
    margin: 0;
    color: #333;
    text-transform: uppercase;
}

.series{
	width: 100%;
	display: flex;
	flex-direction: column; 
	background-color: white;
	align-items: center;
	border-radius: 0 0 22px 22px;
	padding-bottom: 2%;
	margin-bottom: 2%;
}

.seriesinfo{
	width: clamp(700px, 60%, 900px);
	text-align: right;
	position: relative;
    padding: 40px 60px;
	align-self: flex-end;
	margin: 20vw 0;
}

.seriesinfo p{
	font-size: 1.2vw;
}

.seriesinfo::before {
    content: '';
    position: absolute;
    bottom: 2vw;
    left: 1.2vw;
    width: 95%;
    height: 4px;
    background-color: black;
	border-radius: 2px;
}

.seriesinfo::after {
    content: '';
    position: absolute;
    right: 2vw;
    top: 0%;
    width: 4px;
    height: 90%;
    background-color: black;
	border-radius: 2px;
}

header.scrolledinter {
    background: #00000030;
    backdrop-filter: blur(10px);
}





                        	 /* WEB */

.titlenone{
	min-height: 18vw;
	align-content: center;
	background-color: transparent;
}

.italy, .psico{
	width: 100%;
	height: auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
}

.mockupitaly1{
	width: 60%;
	height: auto;
	object-fit: contain;
	border-radius: 22px;
}

.italyinfo{
	width: 100%;
	height: auto;
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	padding: 0 10%;
	margin-top: 5vw;
}

.mediaitaly{
	width: 40%;
	height: auto;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}

.mockupitaly2, .mockupitaly3{
	width: auto;
	height: 500px;
	object-fit: contain;
}

.mockupitaly2{
	align-self: flex-start;
}

.mockupitaly3{
	align-self: center;
}

.italytext{
	width: 32%;
	height: auto;
	display: flex;
	flex-direction: column;
}

.italyinfo{
	padding: 0 0 0 2%;
}

.mockupitaly4{
	width: auto;
	height: 300px;
	object-fit: contain;
	align-self: center;
	margin-top: 25%;
}

.psico{
	margin-top: 5%;
}

.psico h2{
	align-self: flex-start;
	margin-bottom: 5%;
}

.psicomedia{
	width: 100%;
	height: auto;
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: flex-start;
}

.psicomediaright, .psicomediacenter, .psicomediarleft{
	width: 22%;
	height: auto;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
}

.mockuppsico{
	width: auto;
	height: 12vw;
	object-fit: contain;
	padding-bottom: 3%;
}

.mockuppsico2{
	width: auto;
	height: 22vw;
	object-fit: contain;
}

.psicoinfo{
	width: 50%;
	height: auto;
	align-self: flex-start;
	margin-top: 3%;
	padding-left: 10%;
}





                         /* 3D MODELING */

.project{
	width: 100%;
	height: auto;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.project1{
	width: 100%;
	height: auto;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}

.projectmedia{
	width: 55%;
	height: 28vw;
	object-fit: cover;
    border-radius: 22px;
    display: block;
}

.projectinfo{
	width: 40%;
	height: auto;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.projectinfo2{
	width: 100%;
	display: flex;
	flex-direction: column;
}

.logoinfo2{
	width: clamp(40px, 30%, 80px);
	aspect-ratio: 1 / 1;
	height: auto;
	object-fit: contain;
	align-self: flex-end;
}

.projectgallery h3{
	margin: 6% 0 3%;
}

.projectgallery {
    width: 100%;
    height: auto;
    padding: 2% 5%;
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1vw;
    width: 100%;
	padding: 0 2vw;
}

.gallery-grid img {
    width: 100%;
    height: 20vw;
    object-fit: cover;
    border-radius: 22px;
    display: block;
}

.gallery-grid .rectangle {
    grid-column: span 2;
}

.gallery-grid .square {
    grid-column: span 1;
}




footer {
    width: 48%;
    background: #0a0a0a;
    padding: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
	text-align: center;
	flex-direction: column;
	margin: 0 auto;
	border-radius: 22px;
}

.footerinfo {
    color: #888;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 3px;
    margin-bottom: 30px;
}

.sociallinks {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 3%;
}

.sociallink {
    position: relative;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.socialicon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #1a1a1a;
    border: 2px solid #333;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: visible;
}

.socialicon::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.8);
    width: 100%;
    height: 100%;
    border-radius: 50%;
    opacity: 0;
    transition: all 0.4s ease;
    z-index: -1;
    filter: blur(15px);
}

.sociallink.whatsapp .socialicon::before {
    background: #25D366;
}

.sociallink.linkedin .socialicon::before {
    background: #0A66C2;
}

.sociallink.instagram .socialicon::before {
    background: #C13584;
}

.sociallink.email .socialicon::before {
    background: #EA4335;
}

.socialicon img {
    width: 28px;
    height: 28px;
    object-fit: contain;
    filter: grayscale(100%) brightness(0.8);
    transition: all 0.4s ease;
    position: relative;
    z-index: 2;
}

.sociallink:hover .socialicon {
    transform: translateY(-10px);
    border-color: transparent;
}

.sociallink:hover .socialicon::before {
    opacity: 0.6;
    transform: translate(-50%, -50%) scale(1.5);
}

.sociallink:hover .socialicon img {
    filter: grayscale(0%) brightness(1.1);
}

.copyright {
    color: #555;
    font-size: 0.8rem;
    margin-top: 20px;
}




/* Text Styles */
h1{
	font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, "sans-serif";
	font-size: 3.5rem;
	color: white;
	margin: 0;
}

h2{
	font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, "sans-serif";
	font-size: 3rem;
	color: white;
	margin: 10% 0 0;
}

h3{
	font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, "sans-serif";
	font-size: 2rem;
	color: white;
	margin: 2% 0 0;
}

p{
	font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, "sans-serif";
	font-size: 1.2rem;
	color: white;
}

a{
	font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, "sans-serif";
	font-size: 1.5rem;
	padding: 5px 12px;
	border-radius: 15px;
	color: white;
	cursor: pointer !important;
	text-decoration: none;
	z-index: 5;
}





@media only screen and (min-width: 0px) and (max-width: 767px) {
    
    header {
        width: 90%;
        height: auto;
        padding: 3% 4%;
        flex-direction: row;
    }
    
    .left {
        width: 85%;
        flex-direction: row;
        align-items: center;
    }
    
    .logo {
        width: 40px;
        height: 40px;
        margin-right: 0;
        margin-bottom: 10px;
    }
    
    .menu {
        width: 100%;
        flex-wrap: wrap;
        justify-content: center;
        gap: 8px;
        padding: 0;
    }
    
    .menu li {
        margin: 0;
    }
    
    header a {
        font-size: 1rem;
        padding: 4px 8px;
    }
    
    .right {
        width: 15%;
        justify-content: flex-end;
		align-items: center;
    }
    
    .switch-container {
        width: 54px;
        height: 25px;
    }
    
    .toggle {
        width: 27px;
        height: 25px;
    }
    
    .toggle-checkbox:checked + .switch .toggle {
        left: 27px;
    }
	
	.switch::before, .switch::after {
		font-size: 8px;
	}

	.switch::before {
		left: 7px;
	}

	.switch::after {
		right: 7px;
	}
	
 
    .gral {
        padding: 0 5vw;
    }
    
    .title {
        min-height: 60vh;
        padding-top: 20vh;
    }
    
    .titleblur {
        min-height: 40vh;
        margin-bottom: 10vw;
    }
    
    .titlenone {
        min-height: 25vh;
        padding-top: 15vh;
    }
    
   
    
   /* Carousel wrapper adjustments */
    .carouselwrapper {
        gap: 10px;
        padding: 20px 10px;
        margin-top: 15%;
    }
    
    /* Viewport - wider on mobile for better visibility */
    .carouselviewport {
        width: 70vw;
    }
    
    /* Cards - larger on mobile as intended by your JS */
    .projectcard {
        width: 70vw;  /* Matches your JS getStepWidth() */
        aspect-ratio: 1 / 1;
    }
    
    /* Project title - always visible on mobile (no hover) */
    .projecttitle {
        font-size: 1.2rem;
        opacity: 1;
        transform: translateY(0);
    }
    
    /* Smaller arrows for mobile */
    .carouselarrow {
        width: 35px;
        height: 35px;
        font-size: 0.9rem;
    }
    
    /* Adjust scroll margin for mobile header */
    #projects {
        scroll-margin-top: 25vw;
    }
    
    /* Title section - reduce height on mobile */
    .title {
        min-height: 60vw;
    }
    
    /* Top image adjustment */
    .top {
        transform: translateY(-5%);
    }

	
    
    .softwares h2 {
        margin-bottom: 8%;
    }
    
    .platform {
        width: 70%;
        margin-bottom: 15%;
    }
    
    .base {
        height: 50px;
        border-radius: 15px;
    }
    
	.softimg, .softimg1{
		width: 68px;
		height: 68px;
	}
	
    .logossoft {
        transform: translateY(20%);
    }
    
    .softlogo {
        width: 15%;
    }
    
    .stars {
        height: 20px;
    }
    
    .starsgroup {
        width: 20%;
    }
    
    .star-filled, .star-empty, .star-half {
        font-size: 12px;
    }
    
    .aboutme {
        flex-direction: column-reverse;
        align-items: center;
    }
    
    .aboutleft {
        width: 100%;
        padding-right: 0;
    }
    
    .aboutleft p, .aboutleft h3, .softskills {
        padding: 0 2% 0 3%;
    }
    
    .aboutright {
        width: 50%;
        margin-bottom: 5%;
    }
    
    .softskills {
        align-items: center;
    }
    
    .softskills1 {
        width: 100%;
    }
    
    .contact h2 {
        margin: 15% 0 3%;
    }
    
    .sc {
        width: 65%;
        height: auto;
        flex-wrap: wrap;
        gap: 20px;
        margin-bottom: 50px;
    }
    
    .sc a {
        width: 75px;
        height: 75px;
    }
    
    .sc1, .sc2, .sc3, .sc4 {
        width: 70%;
    }
    
	
	
	
    				/* Gallery Menu (Photography & 3D) */
    .gallerymenu {
        flex-direction: column;
        height: auto;
        min-height: auto;
        gap: 15px;
        padding: 5%;
    }
    
    .galleryitem {
        flex: none;
        height: 200px;
        width: 100%;
    }
    
    .galleryitem:hover {
        flex: none;
    }
    
    .gallerytitle {
        font-size: 2rem;
        opacity: 1;
        transform: translateY(0);
		margin-bottom: 2%;
    }
    
    .galleryitem::after {
        opacity: 1;
        height: 40%;
    }
    
    					/* Photo Gallery Pages */
	
	.titleblur{
		margin-bottom: -10%;
	}
	
    .photosgroup, .photosgroup2 {
        flex-direction: column;
        height: auto;
        gap: 20px;
        padding: 5% 0 0;
    }
    
    .photosver, .photoshor {
        width: 80%;
        height: auto;
        margin: 0;
        border-radius: 22px;
		align-self: center;
    }
    
	.interphoto{
		width: 60vw;
		border-radius: 22px;
		margin: 2vw 0;
	}

	.interheader {
    	width: 100%;
    	height: 55vh;
    	min-height: 400px;
	}

	.interoverlay::after {
    	transform: skewX(-9deg);
	}

	.interinfo {
    	padding: 40px 70px;
	}
    
    .seriesinfo {
        width: 90%;
        padding: 25px;
        margin: 10vw 0;
    }
    
    .seriesinfo::before {
        width: 95%;
        bottom: 25px;
        left: 18px;
    }
    
    .seriesinfo::after {
		top: 20px;
        right: 15px;
		height: 80%;
    }
    
    .seriesinfo p {
        font-size: .7rem;
    }
    
    .interphoto {
        width: 75vw;
        border-radius: 16px;
    }
    
    				/* Project Pages (3D Modeling) */
    .project1 {
        flex-direction: column;
        align-items: center;
    }
    
    .projectmedia {
        width: 100%;
        height: auto;
        margin-bottom: 5%;
    }
    
    .projectinfo {
        width: 100%;
        text-align: center;
    }
    
    .logoinfo2 {
        align-self: center;
        width: 60px;
    }
    
    .projectgallery {
        padding: 5% 2%;
    }
    
    .gallery-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    
    .gallery-grid img {
        height: auto;
        border-radius: 16px;
    }
    
    .gallery-grid .rectangle,
    .gallery-grid .square {
        grid-column: span 1;
    }
    
    						/* Illustration Page */
    .crabs {
        flex-direction: column;
        margin-bottom: 10%;
    }
    
    .crabsinfo {
        width: 100%;
        margin-bottom: 5%;
    }
    
    .crabsinfo img, .academicinfo3bottom img {
        width: 60px;
        height: 60px;
    }
    
    .crabsmedia {
        width: 80%;
		align-self: center;
        flex-direction: column;
        align-items: center;
    }
    
    .crab1, .crab2, .crab3 {
        width: 65%;
        align-self: center;
    }
    
    .academicinfo {
        flex-direction: column;
        align-items: center;
    }
    
    .academic1 {
        width: 100%;
        margin-bottom: 5%;
    }
    
    .academicinfo3 {
        width: 100%;
    }
    
    .academicmedia {
        flex-wrap: wrap;
        gap: 10px;
    }
    
    .academicphoto {
        width: 30%;
        height: auto;
        margin-bottom: 5%;
    }
    
    							/* Logos Page */
    .logocontainer {
        flex-direction: column;
        padding: 5% 0;
        min-height: auto;
		margin-top: 5%;
    }
    
    .card {
        width: 75%;
        height: auto;
        margin-bottom: 5%;
    }
    
    .cardphoto {
        height: 40vw;
    }
    
    .cardlogo {
        width: 40%;
    }
    
    .cardinfo {
        height: auto;
        padding: 10% 5%;
    }
    
    .card:hover {
        height: auto;
        margin-bottom: 5%;
    }
    
    					/* Web Design Page */
    .italyinfo {
        flex-direction: column-reverse;
        padding: 0 5%;
    }
    
    .mediaitaly {
        width: 100%;
        gap: 15px;
		justify-content: space-around;
    }
    
    .mockupitaly2, .mockupitaly3 {
        height: auto;
        width: 35%;
    }
    
    .italytext {
        width: 100%;
        margin-bottom: 5%;
    }
    
    .mockupitaly1 {
        width: 90%;
		margin: 5% 0 -10%;
    }
    
    .mockupitaly4 {
        height: auto;
        width: 60%;
        margin-top: 10%;
    }
    
    .psicomedia {
        flex-direction: column;
        align-items: center;
        gap: 15px;
    }
    
    .psicomediaright, .psicomediacenter, .psicomediarleft {
        width: 60%;
        align-items: center;
    }
    
    .mockuppsico, .mockuppsico2 {
        height: auto;
        width: 100%;
    }
    
    .psicoinfo {
        width: 90%;
        padding-left: 0;
        align-self: center;
    }
    
    /* Footer */
    footer {
        width: 90%;
        padding: 20px 15px;
    }
    
    .footerinfo {
        font-size: 0.8rem;
        letter-spacing: 2px;
    }
    
    .sociallinks {
        gap: 15px;
    }
    
    .socialicon {
        width: 50px;
        height: 50px;
    }
    
    .socialicon img {
        width: 22px;
        height: 22px;
    }
    
    .copyright {
        font-size: 0.75rem;
    }
    

    .go-back {
        padding: 8% 0;
    }
    
    .go-back a {
        font-size: 1.2rem;
    }
	
	
	/* Typography */
	
    h1 {font-size: 2.5rem;}
    
    h2 {font-size: 1.8rem;
        margin-top: 15%;}
    
    h3 {font-size: 1.4rem;}
    
    p {font-size: 1rem;
        line-height: 1.6;}
}



@media only screen and (min-width: 768px) and (max-width: 1023px) {
    
   
	header{
		width: 90%;
		height: 70px;
	}

	header a{
		font-size: clamp(.8rem, 1.2rem, 1.2rem);
	}


	.left{
		width: 85%;
		justify-content: flex-start;
	}

	.logo{
		width: 42px;
		height: 42px;
		margin-right: 0%;
	}

	.menu{
		width: 100%;
		justify-content: flex-start;
		padding-left: 0;
	}
	
	.right{
		width: 15%;
	}


						/* Switch */
	.switch-container {
		width: 60px;
		height: 25px;
	}


	.switch {
		top: 50%;
		left: 0;
		width: 100%;
		height: 100%;
		border-radius: 50px
	}

	.toggle {
		width: 30px;
		height: 25px;
		padding-left: 8px;
	}

	.switch::before, .switch::after {
		font-size: 9px;
	}

	.switch::before {
		left: 8px;
	}

	.switch::after {
		right: 8px;
	}

	.toggle-checkbox:checked + .switch .toggle {
		left: 30px;
	}

	.toggle-checkbox:checked + .switch .toggle {
		left: 30px;
	}
    
    
    /* Carousel */
    #projects {
        scroll-margin-top: 20vw;
    }
    
    .carouselwrapper {
        gap: 15px;
        padding: 30px;
        margin-top: 10%;
    }
    
    .carouselviewport {
        width: 80vw;
        overflow: hidden;
    }
    
    .carouseltrack {
        gap: 3vw;
    }
    
    .projectcard {
        width: 35vw;
        aspect-ratio: 1 / 1;
        flex-shrink: 0;
    }
    
    .projecttitle {
        font-size: 1.5rem;
    }
    
    .carouselarrow {
        width: 45px;
        height: 45px;
    }
    
    /* Softwares */
    .platform {
        width: 65%;
        margin-bottom: 12%;
    }
    
    .base {
        height: 55px;
    }
    
    .softlogo {
        width: 13%;
    }

	.star-filled, .star-empty, .star-half{
		font-size: 13.4px;
	}
    
    						/* About Me */
    .aboutme {
        flex-direction: column-reverse;
        align-items: center;
    }
    
    .aboutleft {
        width: 90%;
        padding-right: 0;
        text-align: left;
    }
    
    .aboutleft p, .aboutleft h3, .softskills {
        padding: 0 5%;
		
    }
    
    .aboutright {
        width: 30%;
        margin: 2% 0-5%;
    }
    
    .softskills {
		flex-direction: row;
        justify-content: flex-start;;
        gap: 0%;
    }
    
    .softskills1 {
        width: 30%;
    }
    
    						/* Contact */

	.sc {
    	width: 60%;
    	height: 150px;
		margin-bottom: 50px;
	}

	.sc a {
    	width: 80px;
    	height: 80px;
	}

	.sc a::before {
    	width: 140%;
    	height: 140%;
	}
	
    
    .go-back a {
        font-size: 1.2rem;
    }

    
    						/* Gallery Menu */
    .gallerymenu {
        flex-wrap: wrap;
        height: auto;
        min-height: 400px;
        gap: 15px;
    }
    
    .galleryitem {
        flex: 1 1 calc(50% - 15px);
        height: 250px;
    }
    
    .galleryitem:hover {
        flex: 2 1 calc(50% - 15px);
    }
    
    .gallerytitle {
        font-size: 2.5rem;
    }
    
    					/* Photo Galleries */
	
    .photosgroup {
        height: auto;
        gap: 25px;
    }
    
    .photosgroup2 {
        height: 35vw;
    }
    
    .photosver {
        width: calc(50% - 10px);
        height: 40vw;
        margin: 0;
    }
    
    .photoshor {
        width: calc(50% - 10px);
        margin: 0;
    }
    
    							/* Interlude */
	
	.interheader {
    	height: 60vh;
    	min-height: 500px;
	}

	.interoverlay::after {
    	transform: skewX(-10deg);
	}


	.interinfo h1 {
    	font-size: clamp(2rem, 5vw, 5rem);
	}

	.seriesinfo{
		width: clamp(700px, 60%, 900px);
	}

	.seriesinfo p{
		font-size: 1.5vw;
	}

	.seriesinfo::before {
    	bottom: 2.2vw;
    	left: 1.7vw;
	}

	.seriesinfo::after {
    	right: 3vw;
    	top: 6%;
	}
    
    .interinfo {
        padding: 45px 65px;
    }
    
    .seriesinfo {
        width: 80%;
    }
    
    .interphoto {
        width: 80vw;
    }
    
    						/* Project Pages */
    .project1 {
        flex-direction: column;
        align-items: center;
    }
    
    .projectmedia {
        width: 90%;
        height: 50vw;
        margin-bottom: 5%;
    }
    
    .projectinfo {
        width: 90%;
        text-align: left;
    }
    
    .logoinfo2 {
        align-self: flex-end;
    }
    
    .gallery-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 2vw;
    }
    
    .gallery-grid img {
        height: 30vw;
    }
    
    .gallery-grid .rectangle {
        grid-column: span 2;
    }
    
    .gallery-grid .square {
        grid-column: span 1;
    }
    
    						/* Illustration */
    .crabs {
        flex-direction: column;
    }
    
    .crabsinfo {
        width: 80%;
        align-self: center;
        text-align: left;
        margin-bottom: 5%;
    }
    
    .crabsmedia {
        width: 100%;
        justify-content: center;
        gap: 20px;
    }
    
    .crab1, .crab2, .crab3 {
        width: 28%;
    }
    
    .academicinfo {
        flex-direction: column;
        align-items: center;
    }
    
    .academic1 {
        width: 80%;
        margin-bottom: 5%;
    }
    
    .academicinfo3 {
        width: 80%;
    }
    
    .academicmedia {
        flex-wrap: wrap;
        justify-content: center;
        gap: 15px;
    }
	
	.academicinfo3bottom .logoinfo, .crabsinfo .logoinfo{
		width: 65px;
		height: 65px;
	}
    
    .academicphoto {
        width: 10%;
        height: 45vw;
    }
    
    							/* Logos */
		
	
    .logocontainer {
        flex-wrap: wrap;
        gap: 30px;
        padding: 5% 0;
    }
    
    .card {
        width: 45%;
        height: 25vw;
    }
    
    .cardphoto {
        height: 25vw;
    }
    
    .card:hover {
        height: 50vw;
		margin-bottom: 5%;
    }

	.cardinfo {
    	width: 100%;
    	height: 25vw;
		padding: 8% 2%;
	}

	.cardinfo h3{
		margin-bottom: 0%;
		font-size: 1.4rem;
	}

	.card:hover .card__inner {
    	margin-top: -9vw;
	}
	
	.card:nth-child(2) .cardinfo:nth-child(2){
		justify-content: flex-start;
	}
	
    
    							/* Web Design */
    .italyinfo {
        flex-direction: column-reverse;
        align-items: center;
    }
    
    .mediaitaly {
        width: 90%;
        justify-content: center;
        gap: 30px;
    }
	
	.mockupitaly1{
		width: 80%;
	}
    
    .mockupitaly2, .mockupitaly3 {
        height: 320px;
    }
    
    .italytext {
        width: 80%;
        margin-bottom: 5%;
    }
    
    .mockupitaly4 {
        margin-top: 5%;
		height: 250px;;
    }
    
    .psicomedia {
        justify-content: center;
        gap: 0px;
    }
    
    .psicomediaright, .psicomediacenter, .psicomediarleft {
        width: 25%;
    }
    
    .psicoinfo {
        width: 80%;
        padding-left: 5%;
    }
    
    						/* Footer */
    footer {
    	width: 55%;
    	padding: 5px;
	}

	.footerinfo {
    	font-size: 0.9rem;
    	letter-spacing: 3px;
    	margin-bottom: 30px;
	}

	.sociallinks {
    	gap: 2%;
	}

	.socialicon {
    	width: 48px;
    	height: 48px;
	}

	.socialicon img {
    	width: 25px;
    	height: 25px;
	}
	
	
	 /* Typography */
	
    h1 {font-size: 3rem;}
    
    h2 {font-size: 2.2rem;
        margin-top: 12%;}
    
    h3 {font-size: 1.6rem;}
    
    p {font-size: 1.1rem;}
}


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

    header {
        width: 92%;
        height: 80px;
        padding: 2% 3%;
    }
    
    header a {
        font-size: 1.3rem;
    }
    
    .logo {
        width: 48px;
        height: 48px;
    }
    
    .menu {
        width: 78%;
    }
    
    .right {
        width: 22%;
    }
    
    .gral {
        padding: 0 4.5vw;
    }
    
    .title {
        min-height: 48vw;
    }
    
    .titleblur {
        min-height: 30vw;
    }
    
							/* Carousel */
    #projects {
        scroll-margin-top: 16vw;
    }
    
    .carouselwrapper {
        gap: 18px;
        padding: 35px;
        margin-top: 8%;
    }
    
    .carouselviewport {
        width: 75vw;
        overflow: hidden;
    }
    
    .carouseltrack {
        gap: 2.5vw;
        /* Total width: 5 cards * (22vw + 2.5vw gap) = 122.5vw */
    }
    
    .projectcard {
        width: 22vw; /* This + 2.5vw gap = 24.5vw per card */
        aspect-ratio: 1 / 1;
        flex-shrink: 0;
    }
    
    .projecttitle {
        font-size: 1.6rem;
    }
    
    .carouselarrow {
        width: 48px;
        height: 48px;
    }
	
	
	
    .platform {
        width: 70%;
    }
	
	.base{
		height: 60px;
		padding-bottom: 8px;
	}

	.softlogo{
		width: 11%;
	}

	.star-filled, .star-empty, .star-half{
		font-size: 16px;
	}
	
    .aboutleft {
        width: 65%;
    }
    
    .aboutright {
        width: 32%;
    }
    
    .me {
        max-width: 100%;
    }
    
	.sc1, .sc2, .sc3, .sc4 {
    	width: 65%;
	}
	
	
    
							/* Gallery Menu */
    .gallerymenu {
        gap: 12px;
        padding: 2%;
    }
    
    .galleryitem {
        flex: 1;
    }
    
    .galleryitem:hover {
        flex: 4;
    }
    
    .gallerytitle {
        font-size: 2.8rem;
    }
    
							/* Photo Galleries */
    .photosgroup {
        height: 38vw;
    }
    
    .photosgroup2 {
        height: 28vw;
    }
    
    .photosver {
        width: 28%;
        margin: 0 4%;
    }
    
    .photoshor {
        width: 40%;
        margin: 0 4%;
    }
	

								/* Interlude */

	.interheader {
    	height: 60vh;
    	min-height: 500px;
	}

	.interoverlay::after {
    	transform: skewX(-10deg);
	}

	.interinfo {
    	padding: 60px 100px;
	}

	.interinfo h1 {
    	font-size: clamp(2rem, 5vw, 5rem);
	}

	.seriesinfo{
		width: clamp(700px, 60%, 900px);
	}

	.seriesinfo p{
		font-size: 1.4vw;
	}

	.seriesinfo::before {
    	bottom: 2.2vw;
    	left: 1.7vw;
	}

	.seriesinfo::after {
    	right: 3vw;
    	top: 6%;
	}
	
	
    
							/* Project Pages */
    .projectmedia {
        width: 58%;
        height: 32vw;
    }
    
    .projectinfo {
        width: 38%;
    }
    
    .gallery-grid {
        gap: 1.5vw;
    }
    
    .gallery-grid img {
        height: 22vw;
    }
    
							/* Illustration */
	

	.crabsinfo{
		width: 60%;
		height: auto;
	}

	.crabsinfo img{
		width: 60px;
		height: 60px;
	}

	.line{
		height: 2px;
	}

	.crabsmedia{
		width: 55%;
	}

	.crab1, .crab2, .crab3{
		width: 35%;
	}

	.logoinfo{
		width: 60px;
	}

	.academic1{
		width: 55%;
		border-radius: 22px;
	}


	.academicmedia{
		width: 100%;
	}

	.academicphoto{
		width: 16%;
		height: 45vw;
		margin-bottom: 3%;
	}
	

							/* Logos */

	.logocontainer {
    	width: 100%;
    	min-height: 30vw;
    	padding: 7.5vw 0 0;
	}

	.card {
    	width: 30%;
    	height: 16vw;
	}

	.cardphoto {
    	width: 100%;
    	height: 16vw;
    	flex-shrink: 0;
    	border-radius: 22px 22px 0 0;
	}

	.cardinfo {
    	width: 100%;
    	height: 16vw;
    	justify-content: flex-start;
		padding: 8% 2%;
	}

	.cardinfo h3{
		margin-bottom: 0%;
		font-size: 1.4rem;
	}

	.card:hover {
    	height: 32vw;
		margin-bottom: 5%;
	}

	.card:hover .card__inner {
    	margin-top: -8vw;
	}
	
	
    
							/* Web Design */
    .italyinfo {
        padding: 0%;
    }
    
    .mediaitaly {
        width: 42%;
    }
    
    .mockupitaly2, .mockupitaly3 {
        height: 400px;
    }
    
    .italytext {
        width: 38%;
    }
    
    .mockupitaly4 {
        height: 250px;
    }
    
    .psicomediaright, .psicomediacenter, .psicomediarleft {
        width: 24%;
    }
    
    .mockuppsico {
        height: 14vw;
    }
    
    .mockuppsico2 {
        height: 24vw;
    }
    
    .psicoinfo {
        width: 75%;
        padding-left: 8%;
    }
    

    							/* Footer */
  
	footer {
    	width: 48%;
    	padding: 5px;
	}

	.footerinfo {
    	font-size: 0.9rem;
    	letter-spacing: 3px;
    	margin-bottom: 30px;
	}

	.sociallinks {
    	gap: 2%;
	}

	.socialicon {
    	width: 48px;
    	height: 48px;
	}

	.socialicon img {
    	width: 25px;
    	height: 25px;
	}
	
	
	h1 {font-size: 3.2rem;}
    
    h2 {font-size: 2.6rem;
        margin-top: 10%;}
    
    h3 {font-size: 1.8rem;}
    
    p{font-size: 1rem;}
	
	a{font-size: 1.3rem;}
	
	
}