@import url('https://fonts.googleapis.com/css2?family=Fira+Sans:wght@400;700&display=swap');

body{
    overflow-x: hidden;
    margin: 0;
    padding: 0;
    font-family: 'Fira Sans', sans-serif;
    width: 100%;
}
* {
    box-sizing: border-box; /* Ensures padding and borders are included in width/height */
}
html, body {
  max-width: 100vw !important;
  overflow-x: hidden !important;
}
.container {
    display: flex;
    align-items: normal;
    flex-direction: column;
    width: 100%;
    overflow: hidden;
}
.container .nav {
    display: flex;
    flex: 1;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    width: auto;
    margin: 0;
}
.container li{
    list-style: none;
    margin: 0 10px;
    text-wrap: nowrap;
}
.container button {
    background-color: transparent;
    border: solid 3px #00C89A;
    border-radius: 100px;
    cursor: pointer;
    font-size: 18px;
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 25px;
    box-shadow: 0px 59px 23px rgba(255, 214, 89, 0.01), 
    0px 33px 20px rgba(255, 214, 89, 0.05), 
    0px 15px 15px rgba(255, 214, 89, 0.09), 
    0px 4px 8px rgba(255, 214, 89, 0.1);
}
.container button.ins {
    margin: 0;
    margin-right: 1px;
    height: 40px;
    background-color: #FFF;
    color: #00C89A !important;
}
.container button.ins a {
    color: #00C89A;
    text-decoration: none;
}
.container button.ins a:visited {
    color: #00C89A;
}
.container button.con {
    margin: 0;
    height: 40px;
    background-color: #00C89A;
    color: #fff;
}
.container button.con a {
    color: #fff;
    text-decoration: none;
}
.container button.con a:visited {
    color: #fff;
}
.container .lang {
    margin: 0;
    padding: 0;
    border: none;
}
.container .lang img {
    width: 33px;
    object-fit: contain;
}
.container > .header {
    display: flex;
    align-items: center;
    width: 100%;
    border-bottom: #00C89A solid 5px;
}
.container > .header > div:last-child {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
}
.container .nav-toggle {
    display: none;
}
.container .conarrow {
    flex-shrink: 0;
    transform: scale(0.9);
    background-color: #00C89A;
    color: white;
    display: none;
    padding: 7px;
}
.nav-backdrop {
    display: none;
}
.logo {
    margin: 0.5% 1%;
    border-radius: 50%;
    overflow: hidden;
}
a{
    text-decoration: none;
    font-size: 18px;
    font-weight: bold;
}
.nav a {
    color: #00C89A;
}
.nav #dropdown-button, .nav a {
    filter: drop-shadow(0px 45px 18px rgba(11, 2, 99, 0.01)) drop-shadow(0px 25px 15px rgba(11, 2, 99, 0.1)) drop-shadow(0px 11px 11px rgba(11, 2, 99, 0.18)) drop-shadow(0px 3px 6px rgba(11, 2, 99, 0.2));
}
.nav a:hover, .nav #dropdown-button:hover {
    color: #ffd659;
    filter: none;
}
#dropdown-button {
    border: none;
    cursor: pointer;
    color: #00C89A;
    font-size: 18px;
    font-weight: bold;
    position: relative;
    top: 0;
    background-image: url('../droparrow.svg');
    background-repeat: no-repeat;
    background-position: right center;
    background-size: 20px;
    margin: 0;
    box-shadow: none;
}
#dropdown-button:hover {
    background-image: url('data:image/svg+xml;utf8,<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M13.9761 19.7875L8.17984 11.5037C7.36609 10.3437 8.19609 8.75 9.61234 8.75L20.3898 8.75C21.8061 8.75 22.6361 10.3437 21.8236 11.5037L16.0248 19.7875C15.9096 19.952 15.7563 20.0864 15.5781 20.1791C15.3999 20.2718 15.202 20.3203 15.0011 20.3203C14.8002 20.3203 14.6023 20.2718 14.4241 20.1791C14.2458 20.0864 14.0914 19.952 13.9761 19.7875Z" fill="%23ffd659"/></svg>');;
}
#dropdown {
    position: absolute;
    background: #FFFFFF;
    border-radius: 5px 24px 12px;
    width: 250px;
    height: 170px;
    background-color: #FFF;
    z-index: 20000;
    overflow: hidden;
    display: none;
    flex-direction: column;
    align-items: flex-start;
    padding: 5px;
    gap: 5px;
}
#dropdown ul {
    list-style: none;
    padding: 0;
    margin: 0;
    width: 100%;
}
#dropdown a {
    text-wrap: wrap;
    text-decoration: none;
    font-size: 14px;
    padding: 10px;
    display: block;
    width: 100%;
    text-shadow: none;
}
.spacer{
    margin: auto;
    width: 80%;
    background-color: #ffd559ab;
    height: 1px;
}
.wraphero{
    width: 100%;
    background: linear-gradient(to bottom, #0B0263 75%, transparent 75%), url('../herobckgrnd.svg');
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: center 90%;
}
.hero{
    
    display: flex;
    width: 100%;
    padding: 50px;
    padding-top: 0;
}
.hero h1{
    color: #00C89A;
    font-size: 24px;
    margin: 20px auto;
    text-align: center;
    text-decoration: underline;
    padding: 5px;
}
.hero p{
    color: #FFFFFF;
    font-size: 18px;
    margin: 50px auto;
    text-align: center;
    padding: 5px;
    line-height: 30px;
}
.hero div:not(.pcimg){
    flex-grow: 1;
}
.herobtns{
    display: flex;
    gap: 20px;
    margin: 30px auto;
    width: 100%;
    justify-content: center;
}
.herobtns button:not(:first-child){
    padding: 10px 20px;
    border: none;
    border-radius: 10px;
    background-color: #00C89A;
    color: #fff;
    font-size: 18px;
    font-weight: bold;background: url(.png), linear-gradient(180deg, rgba(0, 200, 154, 0.9) 0%, #00C89A 100%);
    background-blend-mode: plus-lighter, normal;
    box-shadow: 0px 42px 107px rgba(0, 229, 141, 0.34), 0px 24.7206px 32.2574px rgba(0, 229, 141, 0.1867), 0px 10.2677px 13.3981px rgba(0, 229, 141, 0.22), 0px 3.71362px 4.84582px rgba(0, 229, 141, 0.153301), inset 0px 1px 18px 2px #D9FFF0, inset 0px 1px 4px 2px #D9FFF0;
    border-radius: 6px;
}
.herobtns button:hover{
    background-color: #0B0263;
    box-shadow: none;
    transition: 0.5s ease;
}
.pcimg{
    width: 35%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.pcimg img{
    width: 100%;
    object-fit: contain;
}
.pcimg img:hover{
    transform: scale(1.05);
    transition: transform 0.3s ease;
}
.heroimgs{
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    pointer-events: none;
    position: relative;
    bottom: 120px;
}
.heroimgs img{
    width: 60px;
    object-fit: contain;
}
.herotop{
    position: absolute;
    top: 0;
    right: 0;
    transform: translateY(100%);
}
#Reserve, #Reserve2, #Reserve3{
    background-color: #00C89A;
    border-radius: 10px;
    display: flex;
	align-items: center;
	justify-content: center;
    border: none;
    z-index: 42;
    padding: 10px;
    cursor: pointer;
    background: url(.png), linear-gradient(180deg, rgba(0, 200, 154, 0.9) 0%, #00C89A 100%);
    background-blend-mode: plus-lighter, normal;
    box-shadow: 0px 42px 107px rgba(0, 229, 141, 0.34), 0px 24.7206px 32.2574px rgba(0, 229, 141, 0.1867), 0px 10.2677px 13.3981px rgba(0, 229, 141, 0.22), 0px 3.71362px 4.84582px rgba(0, 229, 141, 0.153301), inset 0px 1px 18px 2px #D9FFF0, inset 0px 1px 4px 2px #D9FFF0;
    border-radius: 6px;
}
#Reserve:hover, #Reserve2:hover, #Reserve3:hover{
    background-color: #0B0263;
    box-shadow: none;
    transition: 0.5s ease;
}
#Reserve a, #Reserve2 a, #Reserve3 a{
    color: #FFF;
    font-weight: bold;
    text-decoration: underline;
}
#Reserve img, #Reserve2 img, #Reserve3 img{
    object-fit: contain;
    margin-right: 10px;
}
#reserdiv{
	display: none;
    opacity: 0;
	position: fixed;
    top: 2%;
    left: 50%;
    transform: translateX(-50%);
    width: min(400px, calc(100vw - 24px));
    max-height: calc(100vh - 2%);
    box-sizing: border-box;
	border-radius: 12px;
	z-index: 22001;
    transition: all 0.5s ease;
    background-color: #FFF;
    box-shadow: inset 0px 4px 4px rgba(11, 2, 99, 0.18);
}
#reserdiv::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 20%;
  border-radius: 12px;

  background: linear-gradient(
    to top,
    #0B0263 10%,
    transparent 90%
  );

  pointer-events: none;
  z-index: -1;
}
#reserdiv::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 20%;
  border-radius: 12px;

  background: linear-gradient(
    to bottom,
    #0B0263 5%,
    transparent 100%
  );

  pointer-events: none;
  z-index: -1;
}
#reserdiv h3{
	display: block;
    font-family: 'Fira Sans', sans-serif;
    font-weight: bold;
    font-size: 20px;
	margin-bottom: 20px;
	margin-left: 10%;
    position: relative;
    z-index: 10;
    width: 100%;
    margin: 15px auto;
    text-align: center;
}
#reserdiv .backbutton {
	display: inline;
	background: transparent;
	border: none;
	cursor: pointer;
	position: absolute;
    z-index: 11;
	top: 10px;
    left: 10px;
	width: 45px;
}
#reserdiv .backbutton img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
#reserdiv form {
    max-height: calc(100vh - 2vh - 96px);
    overflow-y: auto;
    overflow-x: hidden;
    padding-bottom: 18px;
    scrollbar-width: 6px;
    overscroll-behavior: contain;
}
#reserdiv form::-webkit-scrollbar {
    width: 6px;
}
#reserdiv form::-webkit-scrollbar-thumb {
    background: #00C89A;
}
#reserdiv form {
    scrollbar-color: #00C89A auto;
}
form input, form select {
    width: 80%;
	padding: 10px;
	margin: 10px auto;
    border: none;
    border-radius: 16px;
    background: #fff;
    color: #0B0263;
    font-size: 1.1em;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    box-shadow: none;
    outline: none;
    position: relative;
	left: 7%;
	box-shadow: 0px 36px 14px rgba(11, 2, 99, 0.01), 
	0px 20px 12px rgba(11, 2, 99, 0.05), 
	0px 9px 9px rgba(11, 2, 99, 0.09), 
	0px 2px 5px rgba(11, 2, 99, 0.1);
}
form label {
	display: none;
	font-family: 'Fira Sans', Arial, Helvetica, sans-serif;
	font-style: normal;
	font-weight: 700;
	font-size: 20px;
	line-height: 24px;
	color: #0B0263;
	text-wrap: nowrap;
	position: relative;
	left: 10%;
	box-sizing: border-box;
	margin-bottom: 5px;
}

#filieres, #matiere {
    background-image: url('../dropdown.svg'), url('../dropdown-sign.svg');
    background-repeat: no-repeat;
    background-position: right center, right 4px center;
    background-size: 24px, 12px; 
}

#filieres:invalid, #matiere:invalid {
    color: #888;
}
form button {
	width: 40%;
	padding: 10px;
	margin:  10px auto;
	border: none;
	border-radius: 10px;
	background: #00C89A;
	color: #fff;
	font-size: 1.1em;
	cursor: pointer;
	position: relative;
	bottom: 0;
	left: calc(50% - 20%);
    box-shadow: 3px 5px 5px rgba(0, 0, 0, 0.25);
}
form button:hover {
    background-color: #0B0263;
    box-shadow: none;
}
.whycontent{
    position: relative;
    width: 100%;
    padding-bottom: 30px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto;
    align-items: start;
    gap: 50px;
}
.huges h2{
    color: #00C89A;
    text-align: center;
    text-decoration: underline;
    margin: 10px auto;
    margin-bottom: 0;
    font-size: 42px;
    grid-column: span 3;
}
.huges h3{
    color: #ffd659;
    text-align: center;
    margin: 0px auto;
    margin-bottom: 30px;
    font-size: 42px;
    grid-column: span 3;
}
.whycontent div{
    border: 4px solid #00c899;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 20px;
    margin: 4% 12%;
    position: relative;
    height: fit-content;
    align-self: center;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.3s ease-out;
    padding: 20px;
    background: linear-gradient(180deg, rgba(0, 200, 154, 0.15) 0%, rgba(255, 214, 89, 0.15) 100%);
}
.whycontent div img{
    background-color: #00C89A;
}
.whycontent div button {
    background-color: #00C89A;
    border: none;
    padding: 10px 20px;
    border-radius: 12px;
    color: #fff;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 20px auto;
}
.whycontent div button:hover {
    background-color: #00C89ACC;
}
.whycontent div button a{
    text-decoration: none;
    color: #fff;
    padding: 0;
}
.whycontent div.visible {
  opacity: 1;
  transform: translateY(0);
}
.whycontent p{
    color: #0B0263;
    text-align: center;
    line-height: 30px;
    font-size: 16px;
    font-weight: bold;
    margin: 0 auto;
}
.whycontent div img{
    background-color: #00C89A;
    border-radius: 8px;
    padding: 5px;
    margin: auto;
    width: 50px;
    margin-bottom: 10px;
    align-self: center;
}
.tuto{
    position: relative;
    display: flex;
}
.tuto .tutovid{
    background-color: #D9D9D9;
    border-radius: 29px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 25px 5%;
    width: 55%;
    height: 400px;
    box-shadow: 0px 384px 154px rgba(42, 43, 122, 0.01), 
    0px 216px 130px rgba(42, 43, 122, 0.05), 
    0px 96px 96px rgba(42, 43, 122, 0.09), 
    0px 24px 53px rgba(42, 43, 122, 0.1);
}
.tutop{
    width: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #FFF;
    font-size: 20px;
    background-color: #00C89A;
    border-radius: 12px;
    border: 5px solid #ffc857;
    margin: auto 5%;
}
.tutop p{
    text-align: center;
    margin: 40px;
    line-height: 40px;
    font-weight: bold;
    display: inline;
    padding: 5px;
}
.tutop img{
    position: absolute;
    z-index: -1;
}
.tutop .emoj{
    right: 30px;
    top: 0;
}
.greenspacer{
    height: 1px;
    width: 90%;
    margin: 20px auto;
    background-color: #00C89A;
}
.tut h3{
    color: #00C89A;
    text-decoration: underline;
    text-align: center;
}
.tutors{
    display: flex;
}
.tutors .tutorsp{
    background-color: #0B0263;
    border-radius: 12px;
    padding: 20px 30px;
    font-size: 18px;
    margin: 40px 30px;
}
.tutorsp p{
    font-weight: bold;
    line-height: 40px;
    color: #fff;
    margin: 0;
}
.tut button{
    margin: 30px auto;
}
.tutors div > img{
    width: 400px;
    margin: 40px;
}
.pedah h3{
    color: #00C89A;
    text-decoration: underline;
    text-align: center;
    text-transform: uppercase;
    font-weight: bolder;
}
.pedago{
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 40px 0;
}
.pedapic > img{
    width: 700px;
}
.pedapic button{
    margin-left: 12%;
}
.pedap{
    display: block;
    background-color: #0B0263;
    font-weight: bold;
    color: #ffffff;
    font-size: 20px;
    width: 100%;
    margin: 2%;
    box-shadow: 0px 135px 54px rgba(0, 200, 154, 0.01), 
    0px 76px 45px rgba(0, 200, 154, 0.05), 
    0px 34px 34px rgba(0, 200, 154, 0.09), 
    0px 8px 19px rgba(0, 200, 154, 0.1);
    border-radius: 12px;
    padding: 5px 26px;
}
.matieres h3{
    color: #00C89A;
    text-decoration: underline;
    text-align: center;
    font-weight: bolder;
    margin: 50px 30%;
}
.presmat{
    width: 100%;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: 220px 220px;
}
.presmat div{
    filter: drop-shadow(0px 88px 35px rgba(11, 2, 99, 0.01)) 
    drop-shadow(0px 50px 30px rgba(11, 2, 99, 0.05)) 
    drop-shadow(0px 22px 22px rgba(11, 2, 99, 0.09)) 
    drop-shadow(0px 6px 12px rgba(11, 2, 99, 0.1));
    margin: 15px;
    border-radius: 5px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.presmat p{
    text-align: center;
    font-weight: bold;
}
.presmat img{
    height: 120px;
    width: 120px;
}
.svt, .ingenieur{
    color: #FFFFFF;
    background-color: #54EDCA;
}
.math{
    color: #0B0263;
    background-color: #00C89A;
}
.Physique{
    background-color: #9747FF;
    color: #0B0263;
}
.Physique img{
    position: relative;
    top: 11px;
}
.histgeo{
    color: #FFFFFF;
    background-color: #DC7FAD;
}
.eco{
    background-color: #85B3EC;
    color: #FFFFFF;
}
.orga{
    color: #FFFFFF;
    background-color: #E0A309;
}
.ar{
    color: #FFFFFF;
    background-color: #676CC1;
}
.ang{
    color: #0B0263;
    background-color: #ffd659;
}
.isla{
    color: #ffffff;
    background-color: #0c026388;
}
.fr{
    color: #0B0263;
    background-color: #95DDEC;
}
.compta{
    background-color: #80B34F;
    color: #FFFFFF;
}
.titles{
    width: 100%;
    text-align: center;
    display: flex;
    flex-direction: column;
}
.titles h5{
    font-size: 42px;
    color: #00C89A;
    margin-bottom: 0;
    text-decoration: underline;
}
.titles h2{
    font-size: 36px;
    color: #0B0263;
    margin: 0;
}
.titles p{
    margin-top: 0;
    font-size: 20px;
    color: gray;
}
.formholder{
    width: min(800px, 92%);
    margin: 40px auto 80px;
    position: relative;
    background: none;
}
.formback{
    display: none;
}
.formrec{
    display: none;
}
.formu{
    position: relative;
    top: auto;
    z-index: 2;
    width: 100%;
    height: auto;
    background: #f2f5f5;
    border-radius: 18px;
    border: none;
    margin: 0;
    padding: 28px;
    box-shadow: 0px 22px 70px rgba(11, 2, 99, 0.35);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 14px;
    box-sizing: border-box;
}
.formu label {
    display: block;
    font-family: 'Fira Sans', Arial, Helvetica, sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: 14px;
    line-height: 1.3;
    color: #0B0263;
    text-wrap: wrap;
    position: static;
    left: auto;
    box-sizing: border-box;
    margin-bottom: 2px;
    opacity: 0.75;
    align-self: end;
}
.formu label[for="mail"],
.formu label[for="phone"],
.formu label[for="message"] {
    grid-column: 1 / -1;
}
.formu input, .formu select {
    width: 100%;
    padding: 14px 16px;
    margin: 0;
    border: 2px solid #9be7d5;
    border-radius: 8px;
    background: #f2f5f5;
    color: #0B0263;
    font-size: 18px;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    box-shadow: none;
    outline: none;
    position: static;
    left: auto;
    box-sizing: border-box;
    margin-bottom: 0;
    font-family: 'Fira Sans', Arial, Helvetica, sans-serif;
}
#mail,
#phone {
    grid-column: 1 / -1;
}
.formu textarea {
    grid-column: 1 / -1;
    width: 100%;
    padding: 14px 16px;
    margin: 0;
    border: 2px solid #9be7d5;
    border-radius: 8px;
    background: #f2f5f5;
    color: #0B0263;
    font-size: 18px;
    box-sizing: border-box;
    outline: none;
    resize: vertical;
    min-height: 170px;
    position: static;
    left: auto;
    display: block;
    font-family: 'Fira Sans', Arial, Helvetica, sans-serif;
}
.formu input:focus,
.formu select:focus,
.formu textarea:focus {
    border-color: #00C89A;
    box-shadow: 0 0 0 3px rgba(0, 200, 154, 0.15);
}
.formu button {
    grid-column: 1 / -1;
    min-width: 180px;
    width: fit-content;
    padding: 12px 26px;
    margin: 6px auto 0;
    border: none;
    border-radius: 10px;
    background: #00C89A;
    color: #ffffff;
    font-size: 24px;
    font-weight: 200;
    cursor: pointer;
    box-shadow: 0px 15px 36px rgba(0, 200, 154, 0.28);
    position: static;
    left: auto;
    bottom: auto;
    display: block;
}
.formu button:hover {
    background: #00b98f;
}
.footer {
    position: relative;
    background-color: #6D8DCA;
    color: white;
    font-family: Arial, sans-serif;
    padding: 0px 20px;
    padding-bottom: 0;
    border-top: 5px solid #00C89A;
}

.footer-container {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.footer-section {
    flex: 1;
    margin: 20px;
    min-width: 250px;
    text-align: center;
}

.logan{
    display: flex;
    align-items: center;
    justify-content: space-around;
}
.footer-logo {
    width: 50%;
    max-width: 100px;
}

.slogan {
    color: #ffc857;
    font-size: 20px;
    width: 50%;
    margin: 0;
    text-shadow: #0B0263 1px 1px;
}
.emof{
    width: 15%;
    object-fit: contain;
    align-self: flex-start;
    transform: rotate(8deg);
}
.description {
    color: #fff;
    font-size: 14px;
    margin-top: 10px;
    line-height: 1.5;
    text-align: left;
    text-shadow: #0B0263 2px 0px;
}
.footer .infos{
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 20px;
    color: #0B0263;
}
.footer-section h3:not(.slogan) {
    color: #ffc857;
    text-decoration: underline;
    margin-bottom: 15px;
    text-shadow: #0B0263 2px 0px;
}

.apps p{
    text-shadow: #0B0263 2px 0px;
}
.footer-section ul {
    list-style: none;
    padding: 0;
}

.footer-section ul li {
    margin-bottom: 10px;
}

.footer-section ul li a {
    color: #FFF;
    text-decoration: none;
    font-weight: bold;
}

.footer-section ul li a:hover {
    text-decoration: underline;
}

footer p{
    font-weight: bold;
    font-size: 14px;
}
.footer a{
    text-shadow: #0B0263 2px 0px;
}

.footer-bottom {
    border-top: 1px solid #333;
    text-align: center;
    color: #555;
    font-size: 12px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    gap: 10px;
}
.footer-bottom a{
    color: #FFFFFF;
    text-shadow: #0B0263 2px 0px;
}

.social-icons a {
    display: inline-flex;
    margin: 0;
}
.social-icons{
    position: absolute;
    top: 320px;
    right: 50%;
    transform: translateX(50%);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 16px 26px;
    border: none;
    border-radius: 12px;
}
.social-icons::after{
    content: "";
    position: absolute;
    background: rgba(0, 200, 154, 0.79);
    filter: blur(50px);
    border-radius: 20px;
    transform: rotate(-180deg);
    width: 100%;
    height: 100%;
    z-index: -1;
}
.social-icons img {
    width: 42px;
    height: 42px;
    object-fit: contain;
}
/* ── Scroll-reveal system ── */
.reveal {
    opacity: 0;
    transition: opacity 0.65s ease, transform 0.65s ease;
}
.reveal.from-left   { transform: translateX(-60px); }
.reveal.from-right  { transform: translateX( 60px); }
.reveal.from-top    { transform: translateY(-60px); }
.reveal.from-bottom { transform: translateY( 60px); }
.reveal.visible {
    opacity: 1;
    transform: none;
}
@media (max-width: 1250px) {
    .container .ins {
        display: none;
    }
    .wraphero {
        background: linear-gradient(to bottom, #0B0263 60%, transparent 60%), url('../herorespo.svg');
        background-repeat: no-repeat;
        background-size: contain;
        background-position: bottom center;
    }
    .emoj{
        display: none;
    }
}
@media (max-width: 1100px) {
    .container .lang {
        display: none;
    }
    .container .conarrow {
        display: inline-flex;
        border-radius: 5px;
    }
    .container .conarrow a {
        color: #ffffff;
    }
    .container .conarrow img {
        transform: rotate(180deg) scale(1.7);
    }
    .container .con {
        display: none;
    }
    .hero {
        padding: 0px;
        padding-bottom: 50px;
    }
    .herotop{
        display: none;
    }
    .heroimgs {
        top: -50px;
    }
    .whycontent{
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 30px;
    }
    .whycontent div{
        width: 80%;
        margin: 0 auto;
    }
    .pedago{
        flex-direction: column-reverse;
        margin: 20px 0;
    }
    .pedapic{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    .pedapic button{
        margin: 20px auto;
        width: 80%;
    }
    .pedap{
        width: 80%;
        margin: 20px auto;
    }
}
@media (max-width: 950px) {
    .container > .header {
        justify-content: space-between;
        padding: 8px 12px;
        background-color: #0B0263;
    }
    .container > .header > div:last-child {
        flex: none;
        min-width: unset;
    }
    .container .nav-toggle {
        display: inline-flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 5px;
        width: 46px;
        height: 46px;
        transform: scale(1.3);
        padding: 0;
        border-radius: 50%;
        border: 2px solid #00C89A;
        background: #00C89A;
        box-shadow: none;
        z-index: 21000;
    }
    .container .nav-toggle span {
        width: 22px;
        height: 2px;
        background: #ffffff;
        border-radius: 2px;
    }
    .nav-backdrop {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(11, 2, 99, 0.45);
        backdrop-filter: blur(2px);
        z-index: 19990;
    }
    .nav-backdrop.show {
        display: block;
    }
    .container .nav {
        position: fixed;
        top: 0;
        left: -320px;
        width: min(300px, 85vw);
        height: 100vh;
        margin: 0;
        padding: 100px 16px 24px;
        background: linear-gradient(180deg, rgba(11, 2, 99, 0.98) 0%, rgba(4, 30, 109, 0.98) 100%);
        display: flex;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        gap: 30px;
        overflow-y: auto;
        transition: left 0.28s ease;
        z-index: 20000;
    }
    .container .nav.nav-open {
        left: 0;
    }
    body.nav-open {
        overflow: hidden !important;
    }
    .container li {
        margin: 0;
    }
    .container .nav a,
    .container .nav #dropdown-button {
        width: 100%;
        color: #ffffff;
        text-align: left;
        font-size: 16px;
        filter: none;
        padding: 0;
    }
    .container .nav button {
        width: 100%;
        justify-content: flex-start;
        padding: 12px;
        box-shadow: none;
    }
    #dropdown {
        position: static;
        width: 100%;
        height: auto;
        background-color: #0B0263;
    }
    .social-icons {
        position: relative;
        top: -50px;
        width: fit-content;
        left: 50%;
        transform: translateX(-50%);
    }
    .links {
        display: none;
    }
}
@media (max-width: 900px) {
    .pcimg {
        display: none;
    }
    .tutors{
        flex-direction: column-reverse;
    }
    .tutors div > img{
        width: 80%;
        margin: 20px 0;
    }
    .matieres h3{
        margin: 30px 10%;
        line-height: 40px;
    }
    .presmat img{
        height: 80px;
        width: 80px;
    }
    .presmat{
        grid-template-columns: repeat(3, 1fr);
    }
}
@media (max-width: 800px) {
    .wraphero {
        background: linear-gradient(to bottom, #0B0263 80%, transparent 80%), url('../herorespo.svg');
        background-repeat: no-repeat;
        background-size: contain;
        background-position: bottom center;
    }
    .tuto{
        flex-direction: column;
    }
     .tuto .tutovid{
        width: 80%;
        height: 300px;
        margin: 25px auto;
    }
     .tutop{
        width: 80%;
        margin: 25px auto;
    }
    .pedapic > img{
        width: 80%;
    }
}
@media (max-width: 700px) {
    .heroimgs {
        display: none;
    }
    .herobtns{
        flex-direction: column;
    }
    .herobtns > button{
        width: 90%;
        margin: 10px auto;
    }
    .footer-container {
        flex-direction: column;
    }
    .footer-bottom {
        flex-wrap: wrap;
        gap: 10px;
        justify-content: center;
    }
    .links {
        display: block;
        margin-bottom: 100px;
    }
}
@media (max-width: 400px){
    #reserdiv .backbutton{
        transform: scale(1.2);
    }
    #reserdiv h3{
        font-size: 15px;
    }
    .wraphero {
        background: linear-gradient(to bottom, #0B0263 90%, transparent 90%), url('../herorespo.svg');
        background-repeat: no-repeat;
        background-size: contain;
        background-position: bottom center;
    }
    .presmat{
        grid-template-columns: 2fr;
    }
}