:root { /* Variables for easy customization */ --primary-color: black; --secondary-color:black; --text-color:white; --light-color: #f5f5f5; --dark-color: #212121; --transition-time: 3s; --max-width: 1900px; --header-height: 80px; --footer-height: 60px; } * { margin:0; padding:0; box-sizing:border-box; } body { font-family:arial,sans-serif,Calibri; line-height:1.6; color:black; background-image: url('../img/wall/castleBG2.webp'); background-size:cover; background-attachment:fixed; background-position:center; animation:fadeIn 4s forwards; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .success { background-color:rgba(255, 255, 255, 0.8); border-radius:40px; padding:40px; margin:20px; } .failure { background-color:rgba(255, 255, 255, 0.8); border-radius:40px; padding:40px; margin:20px; } .flexImg { max-width:60%; opacity:0.8; } .langBaloon { margin-left:50px; height:40px; opacity:0.8; } .langBaloon:hover { opacity:1; } .tinyLang { height:25px; } .grayed { filter: grayscale(100%); transition: filter 0.3s ease; } .grayed:hover { filter: grayscale(0%); } .centered { margin-left:auto; margin-right:auto; display:block; text-align:center; } .map-container { margin:20px auto; max-width:600px; border:1px solid #ccc; border-radius:5px; overflow: hidden; } .map-container iframe { width: 100%; display: block; } /* padding: top right bottom left; */ h1, h2, h3 { margin-bottom:1rem; line-height: 1.2; } h1 { font-size:2.5rem; color: var(--primary-color); padding-top:60px; padding-bottom:40px; } h2 { font-size:2rem; color: var(--secondary-color); padding-top:60px; padding-bottom:40px; } h3 { font-size:1.8rem; padding-bottom:30px; } .instructorName { font-size:3rem; color: var(--secondary-color); } .instructorStyles { font-size:1.2rem; font-family:arial; } .stylesUL { margin-left:50px; } p { margin-bottom:1rem; } a { color: var(--primary-color); text-decoration:none; transition:all 0.3s ease; } a:hover { color: var(--secondary-color); } .container { font-size:2rem; max-width:var(--max-width); margin:0 auto; padding:0 20px; min-height: calc(100vh - var(--header-height) - var(--footer-height)); } .containerKate { position:fixed; top:80px; left:0px; right:0px; bottom:0px; overflow-y:auto; padding:0px; } .containerZero { font-size:2rem; max-width:var(--max-width); margin:0 auto; padding:0 20px; background-color:black; background-color: rgba(0, 0, 0, 0.7); /* opacity:0.8; */ /* background-color: rgba(255, 255, 255, 0.95); */ min-height: calc(100vh - var(--header-height) - var(--footer-height)); } /* ***************************************************************************************************** */ header { position:fixed; top:0; left:0; width:100%; height:var(--header-height); background-color: rgba(255, 255, 255, 0); z-index:1000; display:flex; justify-content:space-between; align-items:center; padding: 0 20px; } headerZero { position:fixed; top:0; left:0; width:100%; height:var(--header-height); background-color:black; /* rgba(255, 255, 255, 0.95); */ box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); z-index: 1000; display: flex; justify-content: space-between; align-items:center; padding: 0 20px; } .ZZexploreDiv { position:fixed; bottom:60px; width:400px; margin:0 auto; left:0; right:0; font-family:arial; font-size:4rem; color:white; text-align:center; } .exploreDiv { position:fixed; bottom:60px; left:0; right:0; font-family:arial; font-size:5rem; color:white; text-align:center; } .exploreButton { padding:40px 110px; background-color:#F5F375; font-size:1.4rem; cursor:pointer; border-radius:10px; margin:15px; } /* margin-left:15px; margin-right:15px; */ .exploreButton:hover { background-color:#e5e36c; } .outlinedText { text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7); } .zzoutlinedText { color:black; text-shadow: -1px -1px 0 #000, 0px -1px 0 #000, 1px -1px 0 #000, -1px 0px 0 #000, 1px 0px 0 #000, -1px 1px 0 #000, 0px 1px 0 #000, 1px 1px 0 #000; } footer { font-family:arial; font-size:1.2rem; position:fixed; bottom:0; left:0; width:100%; height:var(--footer-height); background-color:var(--dark-color); color:var(--light-color); justify-content:center; align-items:center; z-index:1000; display:flex; } .ZZfooterFirstDiv { min-width:290px; } .ZZsocial { min-width:150px; } /* display:inline-block; float:left; display:inline-block; */ .socialIcon { width:34px; opacity:0.6; margin-left:6px; margin-right:6px; cursor:pointer; } /* top:10px; position:absolute; margin-left:20px; */ .socialIcon:hover { opacity:1; } /* ***************************************************************************************************** */ /* .navbar { position:fixed; top:0; left:0; width:100%; height:80px; padding: 0 20px; z-index: 100; background-color: rgba(255, 255, 255, 0.2); display:flex; justify-content: space-between; align-items: center; } .menu { display: flex; list-style: none; } .menu li { position: relative; margin-right: 20px; } .menu a { color:white; text-decoration:none; font-weight:600; font-size:1.6rem; padding:1rem; transition:color 0.3s; } .menu a:hover { color:rgb(137, 12, 12); background-color: rgba(255, 255, 255, 0.5); border-radius:20px; } .submenu { display:none; position:absolute; top:100%; left:0; background-color: rgba(206, 203, 203, 0.9); padding:10px; list-style:none; min-width:150px; border-radius:5px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); } .submenu li { margin: 10px 0; } .menu li:hover .submenu { display: block; } .logo { font-size: 24px; font-weight: bold; color: #333; } */ .logo { height: 50px; transition: all 0.3s ease; } /* img 60px { display:flex; align-items:center; */ /* .logo h1 { margin:0; margin-left: 10px; font-weight: 700; font-size: 1.8rem; } */ nav { display:flex; align-items:center; } .menu-icon { display:none; cursor:pointer; } .nav-links { display:flex; list-style:none; } .nav-links li { margin-left:2rem; position:relative; } .nav-links a { color:var(--text-color); text-transform:uppercase; font-size:1.4rem; font-family:"Franklin Gothic Medium"; letter-spacing:3px; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7); } .nav-links a:hover { color:red; } .nav-links li:hover .submenu { display:block; } .submenu { display:none; position:absolute; background-color:gray; top:100%; left:0; min-width: 200px; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); padding: 10px 0; z-index: 1000; list-style-type: none; } .submenu li { margin: 0; padding: 10px 20px; } .submenu a { text-transform: none; font-weight: normal; } /* ***************************************************************************************************** */ zmain { padding-top: var(--header-height); padding-bottom: var(--footer-height); } main { position:fixed; top:80px; left:0px; right:0px; bottom:0px; overflow-y:auto; padding:0px; } .section { background-color:rgba(255, 255, 255, 0.8); border-radius:40px; padding:40px; display:none; margin:50px 100px; } .section.active { opacity:1; display: block; } .sectionZero { padding:20px; opacity:0; display:none; transition: opacity var(--transition-time) ease; } .next-btnZZ { width:100%; opacity:0.5; padding:10px 15px; background-color:black; color:lightgray; border:none; border-radius:18px; cursor:pointer; font-size:26px; text-align:center; } .next-btn { width:100%; background-color:black; color:gray; font-size:12px; padding:10px 30px; text-align:center; border-radius:30px; margin-top:20px; font-weight:600; text-transform:uppercase; letter-spacing:1px; cursor:pointer; transition:all 0.3s ease; display:inline-block; } .next-btn:hover { background-color:rgb(77, 38, 38); transform:translateY(-3px); } .zteam-gridZZ { display:grid; grid-template-columns:repeat(auto-fill, minmax(250px, 1fr)); gap:30px; margin-top:40px; } .zteam-gridZ { display:grid; grid-template-columns:repeat(auto-fill, minmax(350px, 1fr)); gap:30px; margin-top:40px; grid-auto-rows:auto; } .zteam-memberZ { border-radius:30px; overflow:hidden; box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1); transition:all 0.3s ease; } .zteam-memberZ img { width:100%; height:250px; object-fit:cover; } .team-grid { display:flex; flex-wrap:wrap; gap:30px; } .team-member { width:350px; box-sizing: border-box; padding:16px; border: 1px solid #ccc; border-radius:30px; } .team-member img { width:100%; height:300px; border-radius:30px; object-fit:cover; } .team-member:hover { transform:translateY(-5px); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); } .team-member-info { padding:20px; } .team-member h3 { margin-bottom:5px; } .team-member p { margin-bottom:10px; font-size:0.9rem; } .classes-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap:30px; margin-top: 40px; } .class-card { border-radius:10px; overflow:hidden; box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1); transition:all 0.3s ease; } .class-card:hover { transform:translateY(-5px); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); } .class-card img { width:100%; height: 200px; object-fit: cover; } .class-card-info { padding:20px; } .class-card h3 { margin-bottom:5px; } .class-card p { font-size:0.9rem; } .difficulty { display:inline-block; padding:5px 10px; border-radius: 15px; font-size: 0.8rem; margin-top: 10px; } .beginner { background-color:#e3f2fd; color: #1976d2; } .intermediate { background-color:#e8f5e9; color: #388e3c; } .advanced { background-color:#fce4ec; color: #d81b60; } address { font-family:arial; font-size:1.4rem; } .phoneIcon { margin-right:20px; height:30px; } /* ***************************************************************************************************** */ .contact-form { max-width:600px; margin-top: 40px; } .form-group { margin-bottom:20px; } .form-group label { display:block; font-family:arial; font-size:1.5rem; margin-bottom: 5px; font-weight:300; } .form-group input, .form-group textarea, .form-group select { width:100%; font-family:arial; padding:10px; border:1px solid #ddd; border-radius:9px; font-size: 1.5rem; } .form-group textarea { height:150px; } .submit-btn { background-color:var(--primary-color); font-size:1.6rem; color:white; border:none; padding:12px 60px; border-radius:30px; font-weight:600; text-transform:uppercase; letter-spacing:1px; cursor:pointer; transition:all 0.3s ease; } .submit-btn:hover { background-color: var(--secondary-color); } /* *********************************************************************************************************************** */ .cards-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(450px, 1fr)); gap:30px; margin-top: 40px; } .campus-card { border-radius:10px; overflow:hidden; box-shadow:0 3px 10px rgba(0, 0, 0, 0.1); transition:all 0.3s ease; } .campus-card:hover { transform: translateY(-5px); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); } .campus-card img { width:100%; height:200px; object-fit:cover; } .campus-card-info { padding:20px; } .location { width:400px; box-sizing: border-box; padding:16px; border: 1px solid #ccc; border-radius:30px; } /* ************************************************************************************************************************* */ .modal { display:none; position:fixed; top:0; left: 0; width:100%; height:100%; background-color: rgba(0, 0, 0, 0.5); justify-content: center; align-items: center; z-index: 1000; } .modal-content { background-color:lightgray; padding:30px; border-radius:28px; box-shadow:0 4px 8px rgba(0, 0, 0, 0.2); text-align:center; max-width:1200px; width:100%; color:white; border:solid black 2px; } .modal-content h2 { margin-top: 0; color: #333; } .modal-content p { margin:20px 0; color: #666; line-height: 1.5; } .close-button { padding:8px 20px; background-color:#99b3c9; color:white; border:solid black 1px; border-radius:14px; cursor:pointer; transition: background-color 0.3s; font-size:2rem; } .qrImage { max-width:360px; } .qrContainer { display:flex; flex-wrap:wrap; } .qrCell { flex:1; min-width:360px; padding:5px; margin:5px; } /* border: 1px solid #ccc; */ /* ************************************************************************************************************************** */ @media (max-width: 1024px) { /* @media screen and (min-width: 768px) { 768px */ .menu-icon { display: block; } .flexImg { max-width:90%; opacity:0.8; } .nav-links { position:fixed; top: var(--header-height); right:-100%; width:70%; padding:20px; /* left:-100%; */ height: calc(100vh - var(--header-height)); background-color:gray; flex-direction:column; align-items: flex-start; transition:all 0.3s ease; box-shadow:-2px 0 5px rgba(0, 0, 0, 0.1); overflow-y:auto; } /* -2px */ .nav-links.active { right:0; } .nav-links li { margin:15px 0; width:100%; } .nav-links a { font-size:1rem; } .submenu { position:static; box-shadow:none; padding-left:20px; display:none; min-width:auto; } .submenu.active { display:block; } .has-submenu { position:relative; } .dropdown-toggle { position:absolute; right: 0; top: 0; cursor: pointer; } .logo { height:30px; } /* .logo h1 */ .section { padding:10px; margin:0px; font-size:1.2rem; } /* 60px 0; */ h1 { font-size:2rem; } h2 { font-size:1.5rem; } footer { min-height:100px; display:block; } /* min-height:100px; font-size:1rem; flex-direction:row;*/ .social { text-align:center; width:100%; } /* flex: 1; */ .socialIcon { width:30px; opacity:0.6; margin-left:3px; margin-right:3px; } .langBaloon { margin-left:25px; } .exploreDiv { position:fixed; bottom:60px; left:0; right:0; font-family:arial; font-size:2rem; color:white; text-align:center; } .exploreButton { padding:20px 30px; background-color:#F5F375; font-size:1rem; cursor:pointer; border-radius:10px; } .qrImage { max-width:80%; } } @media (max-width: 1200px) and (min-width: 769px) { .nav-links a { font-size: .8rem; } .flexImg { max-width:80%; opacity:0.8; } .logo { height:20px; } }