/* Import fonts */ @import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300..700&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Chocolate+Classical+Sans&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Amiri:ital,wght@0,400;0,700;1,400;1,700&display=swap'); :root { --font-family: Avenir, 'Chocolate Classical Sans', Montserrat, sans-serif, ui-sans-serif, system-ui; --font-family-logo: 'Quicksand', sans-serif; --logo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 300'%3E16%3Cpath%0A%20%20%20%20%20%20%20d%3D%22m%20176.37778%2C84.401999%20c%20-2.741%2C-0.248%20-6.56%2C-1.083%20-8.488%2C-1.855%20-1.928%2C-0.771%20-4.89%2C-2.751%20-6.582%2C-4.399%20-1.692%2C-1.648%20-3.497%2C-4.51%20-4.011%2C-6.36%20-0.514%2C-1.851%20-0.589%2C-5.324%20-0.167%2C-7.718%200.423%2C-2.395%201.854%2C-6.327%203.18%2C-8.739%201.327%2C-2.411%203.755%2C-5.508%205.396%2C-6.881%201.641%2C-1.374%204.353%2C-2.925%206.027%2C-3.447%201.673%2C-0.523%205.658%2C-0.489%208.854%2C0.074%204.406%2C0.777%206.505%2C1.7%208.677%2C3.815%201.576%2C1.534%203.572%2C4.204%204.435%2C5.933%201.23%2C2.461%201.328%2C4.902%200.455%2C11.25%20-0.95%2C6.909%20-1.565%2C8.693%20-4.161%2C12.08%20-1.675%2C2.185%20-4.302%2C4.586%20-5.839%2C5.336%20-1.536%2C0.75%20-5.035%2C1.16%20-7.776%2C0.911%22%0A%20%20%20%20%20%20%20id%3D%22path1-0%22%20%2F%3E%0A%20%20%20%20%3Cpath%0A%20%20%20%20%20%20%20d%3D%22m%2058.569019%2C143.51088%20c%20-1.805%2C-0.319%20-3.72%2C-1.205%20-4.256%2C-1.969%20-0.535%2C-0.765%20-0.651%2C-3.217%20-0.257%2C-5.45%200.393%2C-2.23199%201.841%2C-6.11199%203.217%2C-8.62199%201.375%2C-2.51%203.757%2C-6.17%205.292%2C-8.133%201.535%2C-1.963%204.465%2C-5.559%206.512%2C-7.99%202.047%2C-2.432%206.547%2C-7.122%209.999%2C-10.423%203.452%2C-3.300002%209.8%2C-8.290002%2014.107%2C-11.088002%204.307%2C-2.798%209.297001%2C-5.403%2011.088001%2C-5.79%201.791%2C-0.386%205.334%2C-0.636%207.873%2C-0.556%203.805%2C0.121%205.015%2C0.593%206.888%2C2.687%201.97%2C2.203%202.146%2C3.257%201.32%2C7.939%20-0.672%2C3.81%20-2.193%2C7.306002%20-5.168%2C11.879002%20-2.319%2C3.563%20-6.221%2C8.448%20-8.672%2C10.854%20-2.451%2C2.406%20-7.043001%2C6.376%20-10.205001%2C8.823%20-3.162%2C2.447%20-9.929%2C6.891%20-15.038%2C9.877%20-5.109%2C2.98599%20-11.568%2C6.12899%20-14.353%2C6.98499%20-2.785%2C0.855%20-6.541%2C1.295%20-8.347%2C0.977%22%0A%20%20%20%20%20%20%20id%3D%22path1-7%22%20%2F%3E%0A%20%20%20%20%3Cpath%0A%20%20%20%20%20%20%20d%3D%22m%20232.40869%2C174.25028%20c%20-0.80303%2C-0.20441%20-3.32928%2C-1.42514%20-5.61292%2C-2.71188%20-2.28347%2C-1.28772%20-6.33717%2C-4.65086%20-9.007%2C-7.47479%20-2.66982%2C-2.82394%20-6.86828%2C-7.51656%20-9.33008%2C-10.42967%20-2.46179%2C-2.91311%20-5.96311%2C-8.30007%20-7.78092%2C-11.97038%20-1.92862%2C-3.89422%20-3.59374%2C-9.43458%20-3.99884%2C-13.29731%20-0.56046%2C-5.36142%20-0.24201%2C-7.87978%201.6735%2C-13.22625%201.65821%2C-4.63162%203.23407%2C-7.38928%205.27297%2C-9.23068%201.59854%2C-1.444%204.30702%2C-3.05411%206.01794%2C-3.57796%201.85446%2C-0.56827%205.25738%2C-0.37942%208.42381%2C0.46795%204.11817%2C1.10161%206.09856%2C2.22179%208.81189%2C4.98722%201.92459%2C1.96185%204.35653%2C5.64799%205.40429%2C8.19224%201.04776%2C2.54425%203.20918%2C13.60752%204.80296%2C24.58478%201.59281%2C10.9771%202.92523%2C21.76251%202.96094%2C23.96614%200.0571%2C3.62561%20-0.23452%2C4.29804%20-3.05733%2C7.05024%20-1.71677%2C1.67233%20-3.77819%2C2.87476%20-4.58121%2C2.67035%22%0A%20%20%20%20%20%20%20id%3D%22path1-02%22%20%2F%3E%0A%20%20%20%20%3Cpath%0A%20%20%20%20%20%20%20d%3D%22m%20138.05562%2C153.58953%20c%20-1.29913%2C-1.0178%20-3.48998%2C-3.17736%20-4.86859%2C-4.79818%20-1.37817%2C-1.62172%20-3.37989%2C-4.69203%20-4.44813%2C-6.82421%20-1.06779%2C-2.13307%20-2.21%2C-6.75285%20-2.53756%2C-10.26683%20-0.32755%2C-3.51398%200.10593%2C-9.88743%200.96397%2C-14.16313%201.21585%2C-6.06044%202.32298%2C-8.80306%205.02488%2C-12.44389%202.08273%2C-2.80594%205.00476%2C-5.519558%207.32135%2C-6.797741%202.12154%2C-1.170613%206.6424%2C-2.721236%2010.04632%2C-3.445978%205.05337%2C-1.07575%207.40321%2C-0.898803%2012.80717%2C0.963777%205.22485%2C1.800595%207.63934%2C3.202694%2011.46661%2C6.658832%203.08299%2C2.78479%205.56695%2C6.02381%206.82069%2C8.89861%201.08468%2C2.48632%202.07341%2C7.46531%202.19643%2C11.06542%200.12303%2C3.6001%20-0.19207%2C9.03667%20-0.70111%2C12.08131%20-0.81263%2C4.85737%20-1.5193%2C6.24933%20-5.7666%2C11.35079%20-3.96049%2C4.757%20-5.93447%2C6.30321%20-10.85959%2C8.50281%20-3.31006%2C1.47887%20-7.87864%2C2.81276%20-10.15086%2C2.96335%20-2.27178%2C0.15193%20-6.56677%2C-0.21232%20-9.5424%2C-0.80881%20-2.97562%2C-0.59648%20-6.47388%2C-1.91743%20-7.77258%2C-2.93613%22%0A%20%20%20%20%20%20%20id%3D%22path1-70%22%20%2F%3E%0A%20%20%20%20%3Cpath%0A%20%20%20%20%20%20%20d%3D%22m%20190.4203%2C238.18942%20c%20-3.11604%2C0.37633%20-4.95678%2C-0.11727%20-7.86953%2C-2.11118%20-2.65029%2C-1.8144%20-5.05808%2C-4.95753%20-7.94635%2C-10.37203%20-3.55188%2C-6.65732%20-4.42173%2C-9.43335%20-6.07925%2C-19.39332%20-1.47696%2C-8.8694%20-1.73784%2C-13.23693%20-1.10267%2C-18.4293%200.45838%2C-3.74355%201.83244%2C-9.225%203.05313%2C-12.18207%201.22166%2C-2.95736%203.8687%2C-6.87202%205.88262%2C-8.69981%202.20912%2C-2.00408%205.35877%2C-3.7053%207.93909%2C-4.28688%203.15326%2C-0.7116%205.18049%2C-0.54005%207.70654%2C0.65159%201.88542%2C0.88866%204.56584%2C3.30841%205.95627%2C5.37567%201.39071%2C2.06821%203.08344%2C5.84747%203.76291%2C8.39912%200.67947%2C2.55165%201.79587%2C10.23672%202.47984%2C17.07906%200.68493%2C6.84204%200.89733%2C15.20178%200.47357%2C18.57741%20-0.42405%2C3.37467%20-1.51146%2C8.49218%20-2.41719%2C11.3714%20-0.90573%2C2.87922%20-3.02458%2C7.10174%20-4.70877%2C9.38227%20-2.57078%2C3.4808%20-3.71554%2C4.22647%20-7.13021%2C4.63807%22%0A%20%20%20%20%20%20%20id%3D%22path1-6%22%20%2F%3E%0A%20%20%20%20%3Cpath%0A%20%20%20%20%20%20%20d%3D%22m%2096.992836%2C217.79681%20c%20-3.320039%2C-0.34895%20-5.099654%2C-1.19958%20-7.607969%2C-3.63744%20-2.282265%2C-2.21834%20-3.976463%2C-5.5793%20-5.591598%2C-11.09108%20-1.986544%2C-6.77707%20-2.182383%2C-9.46812%20-1.370663%2C-18.80023%200.721877%2C-8.31048%201.560009%2C-12.29984%203.534663%2C-16.83398%201.424127%2C-3.26889%204.236747%2C-7.90019%206.250201%2C-10.29282%202.014519%2C-2.39266%205.746955%2C-5.33253%208.29474%2C-6.53346%202.79452%2C-1.31656%206.48548%2C-2.15289%209.30321%2C-2.10693%203.44362%2C0.0553%205.49794%2C0.65723%207.80963%2C2.28751%201.72561%2C1.21614%203.88547%2C3.98606%204.79983%2C6.15396%200.91441%2C2.16882%201.70727%2C5.94463%201.76301%2C8.39167%200.0557%2C2.44705%20-0.73876%2C9.61178%20-1.76696%2C15.92242%20-1.0271%2C6.31059%20-2.92829%2C13.88316%20-4.22324%2C16.82848%20-1.29502%2C2.94439%20-3.71867%2C7.31132%20-5.38644%2C9.70337%20-1.66775%2C2.39207%20-4.9317%2C5.72564%20-7.25314%2C7.40692%20-3.54343%2C2.56613%20-4.91725%2C2.98473%20-8.555274%2C2.60161%22%0A%20%20%20%20%20%20%20id%3D%22path1-6-2%22%20%2F%3E%0A%20%20%20%20%3Cpath%0A%20%20%20%20%20%20%20d%3D%22m%2084.825341%2C276.34345%20c%20-2.66166%2C-1.45626%20-7.64492%2C-4.93679%20-11.07226%2C-7.73475%20-3.42733%2C-2.79797%20-8.69408%2C-7.48879%20-11.70351%2C-10.42437%20-3.00851%2C-2.93519%20-7.95909%2C-8.52188%20-10.99955%2C-12.41389%20-3.04007%2C-3.89292%20-7.72856%2C-10.28986%20-10.41805%2C-14.21651%20-2.68949%2C-3.92665%20-7.38494%2C-11.5471%20-10.43401%2C-16.93311%20-3.05%2C-5.3864%20-7.49507%2C-14.32577%20-9.87821%2C-19.86719%20-2.38353%2C-5.5405%20-5.68558%2C-14.46908%20-7.33834%2C-19.84135%20-1.65184%2C-5.37188%20-3.6211301%2C-13.89186%20-4.3744601%2C-18.93339%20-0.75426%2C-5.04193%20-1.37118%2C-12.61732%20-1.372%2C-16.83515%20-0.001%2C-4.2169%200.48396%2C-10.84501%201.07859%2C-14.72846%200.59332%2C-3.88292%201.7876301%2C-9.82229%202.6546201%2C-13.19859%200.86607%2C-3.37669%202.42198%2C-8.54225%203.45692%2C-11.480044%201.03495%2C-2.937784%203.95709%2C-9.779911%206.49352%2C-15.205513%202.53642%2C-5.425602%207.77417%2C-14.700656%2011.63848%2C-20.610677%203.8643%2C-5.91002%209.78846%2C-13.714135%2013.16412%2C-17.342288%203.37512%2C-3.629466%209.51717%2C-9.226652%2013.64757%2C-12.440248%204.13132%2C-3.213202%2010.12677%2C-7.35783%2013.32296%2C-9.210268%203.19659%2C-1.853358%209.77507%2C-5.078238%2014.61974%2C-7.167947%204.84468%2C-2.089709%2013.903839%2C-5.160701%2020.132889%2C-6.825155%206.22772%2C-1.6639288%2016.86433%2C-3.7342108%2023.63789%2C-4.5998388%206.77264%2C-0.866022%2016.78873%2C-1.588771%2022.25724%2C-1.606663%205.46852%2C-0.01789%2015.00985%2C0.64755%2021.202%2C1.480162%206.19255%2C0.831693%2014.48586%2C2.475897%2018.43068%2C3.653773%203.94443%2C1.1787948%2010.66889%2C3.6415378%2014.94218%2C5.4724268%204.68566%2C2.008547%2013.15423%2C6.850926%2021.34119%2C12.203652%207.76747%2C5.077379%2017.2256%2C12.062233%2022.11379%2C16.328792%204.69695%2C4.100911%2011.38631%2C10.961906%2014.86349%2C15.24651%203.4781%2C4.284997%208.45366%2C11.195383%2011.05761%2C15.357362%202.60395%2C4.161979%206.59524%2C11.912777%208.86841%2C17.223268%202.27447%2C5.309964%205.23641%2C14.146216%206.58208%2C19.636096%201.34606%2C5.48897%202.69788%2C14.20361%203.00494%2C19.36517%200.30706%2C5.16156%200.23237%2C13.47315%20-0.16561%2C18.46988%20-0.39744%2C4.99804%20-1.44261%2C12.11085%20-2.32158%2C15.80728%20-0.87989%2C3.69603%20-2.80814%2C10.23163%20-4.28634%2C14.52215%20-1.47819%2C4.29051%20-4.20592%2C10.99615%20-6.06345%2C14.90232%20-1.85622%2C3.90564%20-7.15971%2C12.88712%20-11.78404%2C19.95984%20-4.62394%2C7.0718%20-12.3053%2C17.58493%20-17.06896%2C23.36222%20-4.76367%2C5.77729%20-10.91%2C12.74874%20-13.65974%2C15.49181%20-2.74921%2C2.7444%20-7.59481%2C7.2726%20-10.76734%2C10.06308%20-3.17252%2C2.79049%20-7.88659%2C6.37639%20-10.47492%2C7.97023%20-2.58794%2C1.59291%20-6.20407%2C3.79857%20-8.03518%2C4.90186%20-1.83164%2C1.10198%20-5.66056%2C3.10339%20-8.50961%2C4.44743%20-2.84958%2C1.34273%20-9.57243%2C3.93686%20-14.94071%2C5.7632%20-5.36788%2C1.82543%20-14.2302%2C4.11154%20-19.69408%2C5.07891%20-5.46257%2C0.96684%20-13.98344%2C1.78483%20-18.93315%2C1.81819%20-4.95064%2C0.0329%20-13.18085%2C-0.53666%20-18.28942%2C-1.26536%20-5.1099%2C-0.72817%20-13.17106%2C-2.37849%20-17.9136%2C-3.66733%20-4.74347%2C-1.28923%20-11.89735%2C-3.91518%20-15.898209%2C-5.8361%20-4.00178%2C-1.92132%20-9.45293%2C-4.68516%20-12.11458%2C-6.14142%20m%204.95715%2C-12.14847%20c%204.30921%2C2.45327%2012.917609%2C6.44828%2019.128389%2C8.876%208.49409%2C3.31948%2014.4337%2C4.85112%2023.95542%2C6.17717%206.96322%2C0.97024%2015.76094%2C1.55332%2019.54971%2C1.29699%203.79008%2C-0.25686%2011.93015%2C-1.52183%2018.0905%2C-2.80994%206.15983%2C-1.28942%2015.41104%2C-4.15091%2020.55912%2C-6.35981%205.14677%2C-2.20838%2013.0959%2C-6.45198%2017.6631%2C-9.43067%204.56812%2C-2.97831%2011.02355%2C-7.89739%2014.34608%2C-10.9315%203.32122%2C-3.03358%208.70519%2C-8.34401%2011.96154%2C-11.80025%203.25727%2C-3.45584%209.3917%2C-10.71195%2013.63222%2C-16.12365%204.24092%2C-5.41262%2010.68268%2C-14.91075%2014.315%2C-21.10721%203.63325%2C-6.19606%208.70275%2C-16.03594%2011.26504%2C-21.86493%203.06064%2C-6.96231%205.22832%2C-13.74459%206.31651%2C-19.76638%200.91097%2C-5.04141%201.86938%2C-13.28028%202.12934%2C-18.30782%200.25904%2C-5.02794%20-0.0552%2C-12.44652%20-0.69907%2C-16.48609%20-0.64351%2C-4.04049%20-2.5432%2C-12.13361%20-4.21975%2C-17.98383%20-1.87122%2C-6.52862%20-5.17938%2C-14.447052%20-8.56061%2C-20.495263%20-3.03097%2C-5.420678%20-6.97785%2C-11.822054%20-8.77042%2C-14.225704%20-1.79126%2C-2.404176%20-5.6884%2C-6.82074%20-8.65963%2C-9.815025%20-2.96993%2C-2.994811%20-7.87707%2C-7.824275%20-10.90409%2C-10.731486%20-3.02754%2C-2.908524%20-9.41806%2C-8.186058%20-14.20203%2C-11.728101%20-5.54677%2C-4.107994%20-11.58764%2C-7.775954%20-16.67665%2C-10.128001%20-4.38799%2C-2.027944%20-11.05081%2C-4.743866%20-14.80659%2C-6.035513%20-3.75486%2C-1.291253%20-9.93719%2C-3.033428%20-13.73786%2C-3.872185%20-3.80067%2C-0.838757%20-10.37772%2C-1.816602%20-14.61536%2C-2.173457%20-4.23895%2C-0.356329%20-10.59126%2C-0.677713%20-14.11593%2C-0.712963%20-3.52559%2C-0.03564%20-9.18456%2C0.185704%20-12.57532%2C0.490626%20-3.39076%2C0.304923%20-10.4331%2C1.193616%20-15.65005%2C1.973005%20-5.21735%2C0.780309%20-14.36234%2C3.172736%20-20.32336%2C5.316373%20-5.960109%2C2.144032%20-14.074059%2C5.441357%20-18.030769%2C7.327127%20-3.9558%2C1.886163%20-10.40962%2C5.665905%20-14.34255%2C8.400563%20-3.93255%2C2.73374%20-10.15517%2C8.07451%20-13.82752%2C11.867153%20-4.1537%2C4.289266%20-9.16034%2C10.692443%20-13.24487%2C16.938941%20-3.61206%2C5.524161%20-8.57203%2C14.16321%20-11.02179%2C19.19841%20-2.45028%2C5.033887%20-5.80071%2C13.24713%20-7.44425%2C18.24898%20-1.64486%2C5.00238%20-3.56164%2C12.51214%20-4.2586%2C16.68791%20-0.69788%2C4.17537%20-1.302%2C11.2388%20-1.34168%2C15.69601%20-0.0406%2C4.45682%200.77509%2C12.75696%201.81435%2C18.44417%201.03835%2C5.68681%202.94458%2C13.2769%204.23568%2C16.86693%201.29149%2C3.58912%203.53469%2C9.23379%204.98484%2C12.54383%201.44884%2C3.31056%204.35729%2C9.55338%206.46115%2C13.87217%202.10438%2C4.3201%205.30905%2C10.51898%207.12251%2C13.77572%201.81346%2C3.25674%206.60117%2C10.32383%2010.63872%2C15.70559%204.03886%2C5.38122%2011.5467%2C14.04493%2016.68323%2C19.25327%207.80908%2C7.917%2010.62502%2C10.20188%2017.1763%2C13.93284%22%0A%20%20%20%20%20%20%20id%3D%22path1-8%22%20%2F%3E%3C/svg%3E"); } :root { --primary-color: #0f1941; --primary-color-darker: #014851; --primary-color-rgba-90: #0f1941e6; --primary-color-rgba-70: #0f1941b3; --primary-color-rgba-50: #0f194180; --primary-color-rgba-30: #0f19414d; --secondary-color: #977625; --secondary-color-rgba-90: #977625e6; --secondary-color-rgba-70: #977625b3; --secondary-color-rgba-30: #9776254d; --tertiary-color: #8598a0; --tertiary-color-rgba-90: #8598a0e6; --tertiary-color-rgba-50: #8598a080; --tertiary-color-rgba-30: #8598a04d; --banner-text-color: #fff; --intro-text-color: var(--primary-color); --link-hover-color: var(--secondary-color); --background-color: #fff; --banner-height: 60px; --handwriting-color: #00008b; } /* @media (prefers-color-scheme: dark) { :root { --banner-text-color: #fff; --background-color: #000; --handwriting-color: #fff; } } */ /* Reset default styles */ * { margin: 0; padding: 0; box-sizing: border-box; } .centered { max-width: 800px; margin: 0 auto; width: 100%; box-sizing: border-box; } @media (max-width: 768px) { .centered { padding: 1rem; } } body { font-family: var(--font-family); background-color: var(--background-color); font-size: 16px; display: flex; flex-direction: column; min-height: 100vh; /* cursor: url("../img/logo-cursor.png") 16 16, auto; */ quotes: "“" "”" "‘" "’"; -webkit-user-select: none; -moz-user-select: none; user-select: none; } a, a:visited { color: var(--primary-color); text-decoration: underline; } a:hover { color: var(--secondary-color); } header { background-color: var(--primary-color); color: var(--banner-text-color); padding: 1rem; border-bottom: 16px solid var(--secondary-color) } header.main { background-color: transparent; color: var(--banner-text-color); padding: 1rem; position: fixed; top: 0; left: 0; right: 0; z-index: 1000; transition: background-color 0.3s ease, border-bottom 0.3s ease; } header.scrolled { background-color: var(--primary-color); } header.transparent { background-color: transparent; border-bottom: 16px solid transparent; } nav { display: flex; justify-content: space-between; align-items: center; max-width: 100%; margin: 0 auto; color: var(--banner-text-color); } .logo-container { display: flex; align-items: center; font-family: var(--font-family-logo); cursor: pointer; } .logo { width: 40px; height: 40px; margin-right: 10px; mask: var(--logo); background-color: var(--banner-text-color); background-position: 0%; } .company-name { font-size: 1.5rem; font-weight: bold; } nav ul { list-style-type: none; display: flex; margin-left: auto; } nav ul li { margin-left: 20px; } nav ul li a { color: var(--banner-text-color)!important; text-decoration: none!important; position: relative; font-weight: normal; transition: color 0.3s ease, font-weight 0.3s ease; } header.transparent nav ul li a { font-weight: bold; transition: font-weight 0.3s ease; } header.transparent nav ul li a:hover { color: var(--secondary-color); } nav ul li a::after { content: ''; position: absolute; width: 0; height: 2px; bottom: -5px; left: 0; background-color: var(--link-hover-color); transition: width 0.3s ease; } nav ul li a:hover { color: var(--link-hover-color)!important; } nav ul li a:hover::after { width: 100%; } nav ul li a::before { content: none; } .dropdown { position: relative; display: inline-block; } .dropdown-content { display: none; position: absolute; background-color: var(--primary-color); min-width: 160px; z-index: 1; } .dropdown-content { display: none; position: absolute; background-color: var(--primary-color); min-width: 160px; z-index: 1; } .dropdown-content a { color: var(--banner-text-color); margin: 16px 16px; text-decoration: none; display: block; transition: color 0.3s ease; width: fit-content } .dropdown-content a:hover { color: var(--secondary-color); } .dropdown:hover .dropdown-content { display: block; } .hamburger { display: none; flex-direction: column; cursor: pointer; z-index: 1001; } .hamburger span { height: 3px; width: 25px; background-color:#fff; margin: 3px 0; display: block; transition: all 0.3s ease; } h1 { color: var(--secondary-color); font-size: 20px; font-weight: bold; margin-bottom: 16px; } h2 { color: var(--secondary-color); font-size: 20px; font-weight: bold; margin-bottom: 1rem; } h3 { color: var(--primary-color); font-size: 18px; font-weight: bold; } p { color: #000; font-size: 16px; line-height: 1.5; margin-bottom: 1rem; } article ul li { list-style-position: inside; } p ~ h2 { padding-top: 1rem } q { quotes: "“" "”" "‘" "’"; color: var(--secondary-color); font-size: 20px; display: block; text-align: center; margin: 20px 0; font-style: italic; } article.testimonials { display: grid; grid-template-areas: "header" "text" "photo"; } @media (max-width: 768px) { article.testimonials { grid-template-areas: "header" "text" "photo"; } } article.testimonials h1 { grid-area: header; } article.testimonials picture { grid-area: photo; } article.testimonials section { grid-area: text; } p.testimonials { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; padding-top: 1rem; padding-bottom: 1rem;; } @media (max-width: 768px) { p.testimonials { grid-template-columns: 1fr; row-gap: 0.5rem; } } p.testimonials q { color: #000; padding: 1rem; font-size: 1rem; margin: 0; background-color: #e2d7be4d; } .hero { background-image: url("../img/hero-x2.png"); background-size: cover; background-position: center bottom; background-repeat: no-repeat; width: 100%; height: auto; display: flex; position: relative; overflow: hidden; margin-bottom: 24px; transition: height 0.5s ease; transform-origin: center center; } .hero::after { content: ''; position: absolute; background-image: var(--logo); background-repeat: no-repeat; background-size: contain; background-position: center right; opacity: 0.3; z-index: 1; filter: brightness(0) invert(1); transition: height 0.5s ease; display: none; } @media (min-width: 1921px) { .hero { background-image: url("../img/hero-x4.png"); height: 800px; } .hero::after { width: 700px; height: 700px; left: calc(100% - 750px); top: 50px; } } @media (min-width: 1281px) and (max-width: 1920px) { .hero { background-image: url("../img/hero-x3.png"); height: 600px; } .hero::after { width: 500px; height: 500px; left: calc(100% - 550px); top: 50px; } } @media (min-width: 768px) and (max-width: 1280px) { .hero { background-image: url("../img/hero-x2.png"); height: 400px; background-size: cover; } .hero::after { width: 300px; height: 300px; left: calc(100% - 350px); top: 50px; } } @media (max-width: 768px) { .hero { background-image: url("../img/hero-mobile.png"); height: 740px; } .hero::after { width: 150px; height: 150px; left: calc(100% - 150px); top: 50px; } } .power p { font-weight: bold; } .hero .centered { position: relative; z-index: 2; justify-content: flex-start; margin-top: 5%; height: fit-content } .hero article .background-text { position: absolute; z-index: 1; top: 0; left: 0; right: 0; bottom: 0; display: flex; justify-content: center; align-items: center; font-size: 12rem; color:#3a061550; pointer-events: none; transition: opacity 0.5s ease, transform 0.5s ease; opacity: 0; font-family: 'Amiri','Arial', sans-serif; /*transform: translate(-50%, -50%);*/ } .hero article:hover .background-text { opacity: 1; text-shadow: none; } .hero article { position: relative; background-color: transparent; color: white; text-shadow: 1px 1px var(--secondary-color); text-align: justify; overflow: hidden; padding-top: 48px; padding-bottom: 48px; min-height: fit-content; max-height: fit-content } .hero article p, .hero article q { quotes: none; position: relative; z-index: 2; font-size: 1.6rem; text-align: center; color: white!important; margin: 32px 0; } @media (max-width: 768px) { .hero { justify-content: center; padding: 1rem; } .hero article { margin-right: 0; width: 100%; } } .container { max-width: 1200px; margin: 0 auto; padding: 20px; } section.col-1 div.articles { display: grid; grid-template-columns: 1fr; box-sizing: border-box; } section.col-2 div.articles{ display: grid; grid-template-columns: repeat(1, minmax(300px, 1fr)); box-sizing: border-box; gap: 16px; } section.col-22 { display: grid; grid-template-columns: 0.5fr 1.5fr; box-sizing: border-box; gap: 16px; } section.col-1 div.articles article { background-color: #fff!important; } section div.articles article { padding-top: 1rem; } section div.articles article:first-of-type { padding-top: 0; } section div.articles article { color: #000; } button { background-color: var(--secondary-color); color: white; padding: 0.5rem 1rem; font-size: 1.1rem; border: none; cursor: pointer; transition: background-color 0.3s ease; border-radius: 50px; } button:hover { background-color: var(--primary-color); } .image-container { margin: 32px 0 32px 0; } .video-container { position: relative; padding-bottom: 56.25%; /* 16:9 aspect ratio */ padding-top: 25px; height: 0; overflow: hidden; max-width: 100%; margin: 32px 0 32px 0; } .video-container iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } @media (max-width: 768px) { section.col-2 div.articles { grid-template-columns: 1fr; } } footer { background-color: var(--secondary-color); color: white; display: grid; grid-template-areas: "logo info contact" "copyright copyright copyright"; grid-template-columns: 2fr 1fr 1fr; padding-left: calc((100% / 2) - 400px); padding-right: calc((100% / 2) - 400px); padding-top: 16px; padding-bottom: 16px; gap: 8px; } .footer-logo-column { grid-area: logo; display: flex; align-items: center; } .footer-logo-column img { max-height: 80px; height: auto; position: relative; top: -10px; } .footer-column#info { display: flex; flex-direction: column; grid-area: info; } .footer-column#contact { display: flex; flex-direction: column; grid-area: contact; } .footer-column h3 { color: var(--banner-text-color); margin-top: 0; margin-bottom: 16px; } .footer-column#copyright { grid-area: copyright; color: var(--banner-text-color); padding-top: 8px; padding-bottom: 8px; border-top: 1px solid var(--banner-text-color); } .footer-column ul { list-style: none; padding: 0; } .footer-column ul li { margin-bottom: 4px; } .footer-column ul li a { color: #fff; text-decoration: none; } .footer-column ul li a:hover { text-decoration: underline; } .footer-column#copyright p { color: var(--banner-text-color); } @media (max-width: 768px) { footer { grid-template-columns: 1fr; grid-template-areas: "logo" "contact" "info" "copyright"; padding-left: 16px; padding-right: 16px; } footer .footer-column { border-top: 1px solid var(--banner-text-color); } } @media (max-width: 768px) { .hamburger { display: flex; position: relative; z-index: 1002; } nav { flex-wrap: wrap; } nav ul { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: var(--primary-color-rgba-90); flex-direction: column; justify-content: center; /*align-items: center;*/ z-index: 1001; width: 100%; height: 100vh; padding-left: 40% } nav ul.show { display: flex; } nav ul li { margin: 1rem 0; } nav ul li a { font-size: 1.5rem; color: #fff; } .dropdown-content { display: block; position: static; background-color: transparent; box-shadow: none; padding-left: 20px; } .dropdown-content a { padding: 10px 0; margin: 0; font-size: 18px; } .dropdown-content a::before { content: "\23f5 "; } .dropdown > a::after { content: none; } nav ul.show .dropdown-content { display: block; } .hamburger.active span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); } .hamburger.active span:nth-child(2) { opacity: 0; } .hamburger.active span:nth-child(3) { transform: rotate(-45deg) translate(7px, -7px); } .logo-container { flex-grow: 0; justify-content: center; } } em { font-style: normal; font-weight: bold; color: var(--primary-color); } em.motto { font-style: italic; } section.list { margin-top: 24px; } section.list div { display: grid; grid-template-columns: 72px 1fr; grid-template-rows: auto; column-gap: 20px; align-items: start; margin-bottom: 16px; } section.list div img { grid-column: 1; width: 64px; grid-row: span 2; } section.list div h3, section.list div p { grid-column: 2; margin: 0; } section.list div p { padding-bottom: 16px; } .profielfoto { margin-top: 16px; margin-bottom: 16px; width: 50%; height: auto; } @media (max-width: 768px) { .profielfoto { width: 100%; } } body main.no-hero::after { content: ''; position: absolute; width: 700px; height: 900px; background-image: var(--logo); background-repeat: no-repeat; background-size: contain; background-position: center right; opacity: 0.2; z-index: -1; filter: invert(36%) sepia(47%) saturate(442%) hue-rotate(2deg) brightness(92%) contrast(88%); } body.logo-profile main.no-hero::after { right: -235px; bottom: 50%; transform: translateY(50%) rotate(10deg); } body.logo-offer main.no-hero::after { left: -60px; bottom: 29%; transform: translateY(50%) rotate(15deg); } body.logo-main main.no-hero::after { right: -235px; bottom: 5%; transform: translateY(50%) rotate(10deg); } body.logo-0 main.no-hero::after { left: -500px; top: -15%; transform: rotate(10deg); } body.logo-1 main.no-hero::after { right: -325px; top: -25%; transform: rotate(-25deg); } body.logo-2 main.no-hero::after { right: -225px; bottom: -15%; transform: rotate(-5deg); } body.logo-3 main.no-hero::after { left: -425px; bottom: -20%; transform: rotate(25deg); } main { position: relative; overflow: hidden; flex: 1; padding-bottom: 72px; padding-top: 24px; } main.with-hero { padding-top: 0; } .vertiqa-pic-header { display: block; width: 100%; margin-bottom: 24px } .vertiqa-pic-header img { width: 100%; height: auto; display: block; } .help-me { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; min-width: 100%; margin-top: 64px; } .help-me button { font-size: 1.2rem; background-color: var(--primary-color); } .help-me button:hover { background-color: var(--secondary-color); } .pulse { animation: pulse 1s infinite; } @keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(0.9); } 100% { transform: scale(1); } } .ext-logos { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; min-width: 100%; margin-top: 64px; } .ext-logo { display: block; max-width: 150px; justify-self: center; } @media (max-width: 768px) { .ext-logos { grid-template-columns: 1fr; justify-items: center; } .help-me { grid-template-columns: 1fr; } } @media (min-width: 769px) { .ext-logo:first-of-type { justify-self: end; } .ext-logo:last-of-type { justify-self: start; } } ul.vertiqa-list { margin-left: 36px; } ul.vertiqa-list li { margin-bottom: 8px; } ul.vertiqa-list li:last-of-type { margin-bottom: 24px } .handwriting { fill: var(--handwriting-color); width: 14em; height: auto; display: block; } .dictionary { font-family: "Garamond", "Times New Roman", serif; padding: 0.5rem; background-color: #e2d7be4d; margin-top: 1rem; } .dictionary-term { font-size: 2em; margin-bottom: 0.2rem; font-weight: normal ; letter-spacing: 2px; } .dictionary-pronunciation, .dictionary-word-type { font-style: italic; font-size: 1.2rem; } .dictionary-word-type { font-weight: bold; margin-left: 1rem; } .dictionary-definition{ border-top: 2px solid black; margin-top: 0.5rem; padding-top: 0.5rem; } /* Contact Form */ .form-group { margin-bottom: 20px; } .form-group:has(input:required, textarea:required) > label:after { content: '*'; color: red; font-weight: bolder; } label { display: block; margin-bottom: 5px; color: #333; font-weight: 500; } input[type="text"], input[type="email"], input[type="tel"], textarea { width: 100%; padding: 12px; border: 1px solid #e1e8ed; border-radius: 4px; transition: border-color 0.3s; font-family: inherit; font-size: 1rem; } input:focus, textarea:focus { outline: none; border-color: #667eea; } textarea { resize: vertical; min-height: 120px; } .honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; pointer-events: none; tab-index: -1; } .error { background: #fee; border-left: 4px solid #c33; padding: 12px; margin-bottom: 20px; border-radius: 4px; color: #c33; } .error ul { margin-left: 20px; } .success { background: #efe; border-left: 4px solid #3c3; padding: 12px; margin-bottom: 20px; border-radius: 4px; color: #3c3; }