:root{
    --ink:#17202b;
    --cream:#f7f4ec;
    --lime:#d8ff4d;
    --coral:#ff694f;
    --blue:#a8d7ff;
    --muted:#6d737a;
    --dodgerblue:#1e90ff;
    --aqua:#00ffff;
    --navy:#17202b;
    --petrol:#176B6B;
    --winered:#7A3E48
}
*{
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    margin:0;
    background:var(--cream);
    color:var(--ink);
    font-family:'Roboto Flex',Arial,sans-serif;
    overflow-x:hidden;
}

a{
    color:inherit;
    text-decoration:none;
}

img{
    max-width:100%;
    height:auto;
}

.skip-link{
    position:absolute;
    left:-999px;
}

.skip-link:focus{
    left:1rem;
    top:1rem;
    z-index:10;
    background:#fff;
    padding:.6rem;
}


/* HEADER */

.site-header{
    height:84px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    max-width:1280px;
    margin:auto;
    padding:0 5vw;
}

.logo{
    font-family: 'Roboto Flex', Arial, sans-serif !important;
  font-weight: 700;
    letter-spacing:-.1em;
    font-size: clamp(1.5rem, 2.6vw, 1.5rem);
    line-height: .95;
    
}
.logo:hover{
    color:var(--coral);
}
.logo span{
    color:var(--coral);
}

.logo-dot{
   color: crimson;
    position:relative;
    font-size: 71px;
    margin-left: 11px;

    
}

.primary-nav{
    display:flex;
    gap:2rem;
    align-items:center;
    font-size:.86rem;
    font-weight:700;
}

.primary-nav>a:not(.nav-cta):hover{
    color:var(--coral);
}

.nav-cta{
    background:var(--ink);
    color:white;
    padding:.8rem 1.1rem;
    border-radius:6px;
}

.nav-cta span{
    color:var(--lime);
    font-size:1.1rem;
    margin-left:.4rem;
}

.menu-toggle{
    display:none;
    background:none;
    border:0;
}


/* HERO */

.hero{
    min-height:620px;
    max-width:1280px;
    margin:auto;
    padding:5.3rem 5vw 4rem;
    display:grid;
    grid-template-columns:1.02fr .98fr;
    gap:3rem;
    overflow:hidden;
}

.eyebrow{
    font-size:.69rem;
    font-weight:800;
    letter-spacing:.12em;
    text-transform:uppercase;
    margin:0 0 1.25rem;
    display:flex;
    align-items:center;
    gap:.55rem;
}

.eyebrow span{
    width:23px;
    height:2px;
    background:var(--coral);
    display:inline-block;
}




.hero h1,
.section h2,
.contact h2,
.course-card h3,
.steps h3,
blockquote
 {
  font-family:'Roboto Flex', Arial, sans-serif !important;
  font-weight: 700;
}
.hero h1{
    font-size: clamp(3.5rem, 5.5vw, 5.5rem);
    line-height: .95;
}
.contact h2.dr{
    font-size: clamp(2.5rem, 4.5vw, 4.5rem);
    line-height: .95;
}
h2.ho1{font-size: clamp(2.0rem, 4.0vw, 4.0rem);
    line-height: .95;}
.hero h1 em,
.section h2 em,
.contact h2 em{
    font-style:normal;
    color:var(-- dodgerblue);
}
.contact h2 .em1{
    color:var (--lime);
}
.hero-text{
    font-size:1rem;
    line-height:1.7;
    max-width:480px;
    margin:1.8rem 0;
    color:#525b63;
}

.hero-actions{
    display:flex;
    align-items:center;
    gap:1.6rem;
}

.button{
    border:0;
    font:800 .82rem 'Roboto Flex', Arial, sans-serif;
    display:inline-flex;
    align-items:center;
    gap:1.2rem;
    padding:1.1rem 1.4rem;
    border-radius:6px;
    cursor:pointer;
}

.button-primary{
    background:var(--coral);
    color:white;
    box-shadow:5px 5px 0 var(--ink);
}

.button span{
    font-size:1.2rem;
}

.text-link{
    font-weight:800;
    font-size:.82rem;
    border-bottom:1px solid var(--ink);
    padding-bottom:.22rem;
}

.text-link span{
    margin-left:.4rem;
}

.hero-stats{
    display:flex;
    gap:1.8rem;
    margin-top:4.7rem;
}

.hero-stats div{
    display:grid;
    gap:2.5rem;
}

.hero-stats strong{
    font:700 1.20rem 'Roboto Flex', Arial, sans-serif;
}

.hero-stats span{
    font-size:.64rem;
    color:var(--muted);
    font-weight:700;
}

/* TICKER */

.ticker{
    background:var(--lime);
    white-space:nowrap;
    overflow:hidden;
    padding:14px 0;
    font:800 .77rem 'Roboto Flex', Arial, sans-serif;
    letter-spacing:.07em;
    width:100%;
}

.ticker div{
    display:inline-block;
    width:max-content;
    padding-left:100%;
    animation:ticker-scroll 50s linear infinite;
}

.ticker i{
    font-style:normal;
    color:var(--coral);
    padding:0 1.4rem;
}

@keyframes ticker-scroll{
    from{
        transform:translateX(0);
    }

    to{
        transform:translateX(-100%);
    }
}


/* SECTIONS */

.section{
    max-width:1280px;
    margin:auto;
    padding:7.7rem 5vw;
}

.section-heading h2{
    font-size:clamp(2.7rem,5vw,4.7rem);
}


/* COURSES */

.course-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:1.1rem;
    margin-top:3rem;
}

.course-card{
border-radius:10px;
padding:1.5rem;
min-height:250px;
display:flex;
flex-direction:column;
align-items:flex-start;
opacity:0;
transform:translateY(60px);
transition:opacity .7s ease,transform .7s ease;
}
.course-card.show{
opacity:1;
transform:translateY(0);
}
.course-card:nth-child(1){
transition-delay:0s;
}
.course-card:nth-child(2){
transition-delay:.15s;
}
.course-card:nth-child(3){
transition-delay:.30s;
}
.course-card:nth-child(4){
transition-delay:.45s;
}
.course-card:nth-child(5){
transition-delay:.55s;
}
.course-card:nth-child(6){
transition-delay:.59s;
}
.course-car{
    background:var(--coral);
    color:#fff;
}

.course-bike{
    background:var(--ink);
    color:#fff;
}
.course-truck{
    background:var(--winered);
    color:#fff;
}
.course-bus{
    background:var(--petrol);
    color:#fff;
}
.course-refresh{
    background:var(--blue);
}
.course-refresh1{
    background-color:#c7a53d;
    color: #17202B;
}
.course-icon{
    font-size:2.7rem;
    margin-bottom:1.7rem;
}

.course-card p{
    font-size:.62rem;
    letter-spacing:.12em;
    font-weight:800;
    margin:0 0 .8rem;
}

.course-card h3{
    font:700 2rem 'Roboto Flex', Arial, sans-serif;
    letter-spacing:-.06em;
    margin:0;
}

.course-card>span{
    font-size:.8rem;
    margin-top:.4rem;
    opacity:.85;
}

.course-card a{
    font-size:.72rem;
    font-weight:800;
    margin-top:auto;
    border-bottom:1px solid currentColor;
    padding-bottom:.3rem;
}

.course-card b{
    font-size:1.1rem;
    margin-left:.5rem;
}


/* HOW */

.how{
    background:var(--ink);
    max-width:none;
    color:#fff;
    display:grid;
    grid-template-columns:.75fr 1.25fr;
    gap:8vw;
    padding-left:max(5vw,calc((100% - 1152px)/2));
    padding-right:max(5vw,calc((100% - 1152px)/2));
}

.light span{
    background:var(--lime);
}

.how h2 em{
    color:var(--lime);
}

.how-intro>p:last-child{
    max-width:300px;
    color:#b9c1c7;
    line-height:1.7;
    font-size:.9rem;
    margin-top:1.5rem;
}

.steps{
    list-style:none;
    margin:0;
    padding:0;
    counter-reset:steps;
    
}

.steps li{
border-top:1px solid #46505a;
padding:1.6rem 0;
display:grid;
grid-template-columns:80px 1fr;
gap:1rem;
opacity:0;
transform:translateX(-60px);
transition:opacity .7s ease,transform .7s ease;
}

.steps li.show{
opacity:1;
transform:translateY(0);
}

.steps li:nth-child(1){
transition-delay:0s;
}

.steps li:nth-child(2){
transition-delay:.15s;
}

.steps li:nth-child(3){
transition-delay:.30s;
}

.steps li:last-child{
    border-bottom:1px solid #46505a;
}

.steps li>span{
    font:600 1rem 'Roboto Flex', Arial, sans-serif;
    color:var(--lime);
}

.steps h3{
    font:700 1.7rem 'Roboto Flex', Arial, sans-serif;
    letter-spacing:-.05em;
    margin:0 0 .3rem;
}

.steps p{
    color:#b9c1c7;
    font-size:.84rem;
    line-height:1.6;
    margin:0;
    max-width:430px;
}


/* REVIEWS */

.reviews{
    display:grid;
    grid-template-columns:.9fr 1.1fr;
    gap:5vw;
    align-items:center;
}

.quote-card{
    background:#fff;
    border-radius:12px;
    padding:2.8rem;
    box-shadow:10px 10px 0 var(--blue);
}

.quote-mark{
    font:700 5rem/0.6 Georgia;
    color:var(--coral);
}

blockquote{
    font:600 clamp(1.15rem,2vw,1.65rem)/1.55 'Roboto Flex', Arial, sans-serif;
    letter-spacing:-0.05em;
    margin:1.7rem 0 2rem;
}

.reviewer{
    display:flex;
    align-items:center;
    gap:.7rem;
}

.avatar{
    width:40px;
    height:40px;
    background:var(--coral);
    color:var(--lime);
    border-radius:50%;
    display:grid;
    place-items:center;
    font-size:1.3rem;
    font-weight:800;
}
.tell{
    color:inherit;
    text-decoration:none;
    cursor:pointer;
}

.tell:hover{
    text-decoration:underline;
}
.reviewer strong,
.reviewer span{
    display:block;
    font-size:.68rem;
}

.reviewer span{
    color:var(--muted);
    margin-top:.2rem;
}

.stars{
    margin-left:auto;
    color:#e4b100;
    letter-spacing:.06em;
}


/* CONTACT */

.contact{
    background:var(--aqua);
    padding:6rem max(5vw,calc((100% - 1152px)/2));
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:9vw;
}

.contact h2 em{
    color:coral;
}

.contact>div>p:last-child{
    font-size:.9rem;
    line-height:1.7;
    max-width:320px;
    margin-top:1.4rem;
}
.con{
    background:var(--aqua);
    padding:6rem max(5vw, calc((100% - 1152px)/2));

    display:grid;
    grid-template-columns:1fr 1fr;
    column-gap:4rem;
    align-items:start;
}
.con1{
    min-height: 250px;
}
.loc{
    grid-column:1;
    grid-row:1;
    justify-self:start;
    margin:0;
    color:#17202b;
}.loca{
    grid-column:2;
    grid-row:1;
    justify-self:start;
    margin:0;
    color:17202b;
}
.loca1{grid-column:1;
    grid-row:1;
    justify-self:start;
    margin:0;
    transform: translateY(-65px);
    color:#17202b;
}
.loca2{
    grid-column:1;
    grid-row:1;
    justify-self:start;
    margin:0;
    transform: translateY(-05px);
    color:#17202b;
}
.loca21{
    font-size: 14px;
    color:#006400;
}
.loca3{
    grid-column:1;
    grid-row:1;
    justify-self:start;
    margin:0;
    transform: translateY(15px);
    color:#17202b;
}
.loca41{
    grid-column:1;
    grid-row:1;
    justify-self:start;
    margin:0;
    transform: translateX(-1px);
    color:#17202b;
}
.loca4{
    grid-column:1;
    grid-row:1;
    justify-self:start;
    margin:0;
    transform: translateY(60px);
    color:#17202b;
}
.loca5{
    grid-column:2;
    grid-row:1;
    justify-self:center;
    margin:0;
    transform: translateY(-65px);
    color:#17202b;
}
.loca6{
    grid-column:2;
    grid-row:1;
    justify-self:center;
    margin:0;
    transform: translateY(-5px);
    color:#17202b;
}
.loca7{
    grid-column:2;
    grid-row:1;
    justify-self:center;
    margin:0;
    transform: translateY(40px);
    color:#17202b;
}
.loca8{
    grid-column:2;
    grid-row:1;
    justify-self:center;
    margin:0;
    transform: translateY(100px);
    color:#17202b;
}
.google-map{
    width:100%;
    max-width:850px;
    height:550px;
    border:0;
    border-radius:30px;
}

.cona{
    grid-column:1;
    grid-row:2;

    justify-self:start;

    background:var(--cream);
    padding:1.5rem;
    border-radius:49px;
    display:grid;
    gap:1rem;
    width:450px;
    max-width:100%;
    margin-top:1rem;
}
.cona label{
    font-size:.67rem;
    text-transform:uppercase;
    letter-spacing:.08em;
    font-weight:800;
}
.cona input,
.cona select,
.cona textarea{
    display:block;
    width:100%;
    max-width:100%;
    border:0;
    border-bottom:1px solid #c8c5bc;
    background:transparent;
    padding:.65rem 0;
    color:var(--ink);
    font:500 .9rem 'Roboto Flex', Arial, sans-serif;
    outline-color:var(--coral);
}

.contact-form textarea{
    min-height:100px;
    resize:vertical;
}
.contact-form{
    background:var(--cream);
    padding:1.5rem;
    border-radius:10px;
    display:grid;
    gap:1rem;
    width:100%;
    min-width:0;
}

.contact-form label{
    font-size:.67rem;
    text-transform:uppercase;
    letter-spacing:.08em;
    font-weight:800;
}

.contact-form input,
.contact-form select,
.contact-form textarea{
    display:block;
    width:100%;
    max-width:100%;
    border:0;
    border-bottom:1px solid #c8c5bc;
    background:transparent;
    padding:.65rem 0;
    color:var(--ink);
    font:500 .9rem 'Roboto Flex', Arial, sans-serif;
    outline-color:var(--coral);
}

.contact-form textarea{
    min-height:100px;
    resize:vertical;
}

#other-course{
    width:100%;
    max-width:100%;
    min-height:100px;
    resize:vertical;
}

.button-dark{
    background:var(--ink);
    color:#fff;
    justify-content:space-between;
    margin-top:.5rem;
}

.button-dark span{
    color:var(--lime);
}

.form-message{
    font-size:.75rem;
    font-weight:700;
    margin:0;
    color:#356325;
}

.back-to-top{
    position:fixed;
    right:25px;
    bottom:25px;

    width:50px;
    height:50px;

    display:flex;
    align-items:center;
    justify-content:center;

    background:var(--ink);
    color:var(--lime);

    border-radius:50%;
    font-size:24px;
    font-weight:bold;

    z-index:1000;
    cursor:pointer;
}

/* FOOTER */

footer{
    max-width:1280px;
    margin:auto;
    padding:2.2rem 5vw;
    display:flex;
    align-items:center;
    justify-content:space-between;
    font-size:.68rem;
    color:var(--muted);
}

footer div{
    display:flex;
    flex-direction: column;
    gap:1rem;
    align-items: flex-start;
}

footer a:hover{
    color:var(--coral);
}


/* =========================
   TABLET
   ========================= */

/* =========================
   TABLET — 761px έως 1024px
   ========================= */

@media (min-width: 761px) and (max-width: 1024px) {

  .site-header,
  .hero,
  .section,
  footer {
    max-width: 100%;
  }


  /* HEADER */

  .logo {
    font-family: 'Roboto Flex', Arial, sans-serif;
    font-size: 1.55rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.06em;
  }


  /* HERO */

  .hero {
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    padding-top: 4.5rem;
    padding-left: 4vw;
    padding-right: 4vw;
  }

  .hero h1 {
    font-family: 'Roboto Flex', Arial, sans-serif;
    font-size: clamp(3rem, 6vw, 4.2rem);
    font-weight: 700;
    line-height: 0.98;
    letter-spacing: -0.04em;
  }

  .hero-visual {
    width: 100%;
  }


  /* SECTIONS */

  .section h2 {
    font-family: 'Roboto Flex', Arial, sans-serif;
    font-size: clamp(2.5rem, 5vw, 3.4rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.035em;
  }


  /* COURSES */

  .course-grid {
    gap: 1rem;
  }

  .course-card h3 {
    margin: 0;
    font-family: 'Roboto Flex', Arial, sans-serif;
    font-size: 1.85rem;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.05em;
  }

  .course-card > span {
    margin-top: 0.4rem;
    font-size: 0.8rem;
    opacity: 0.85;
  }

  .course-card a {
    margin-top: auto;
    padding-bottom: 0.3rem;
    border-bottom: 1px solid currentColor;
    font-size: 0.72rem;
    font-weight: 800;
  }

  .course-card b {
    margin-left: 0.5rem;
    font-size: 1.1rem;
  }


  /* CONTACT */

  .contact {
    gap: 4vw;
  }

  .contact h2 {
    font-family: 'Roboto Flex', Arial, sans-serif;
    font-size: clamp(2.7rem, 5vw, 3.5rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.04em;
  }

  .contact-form,
  .cona-form {
    width: 100%;
    min-width: 0;
  }
}

/* =========================
   MOBILE — έως 760px
   ========================= */

@media (max-width: 760px) {

  /* HEADER */

  .site-header {
    height: 70px;
  }

  .menu-toggle {
    display: grid;
    gap: 4px;
    padding: 7px;
  }

  .menu-toggle span {
    width: 23px;
    height: 2px;
    background: var(--ink);
  }

  .primary-nav {
    display: none;
    position: absolute;
    top: 70px;
    left: 0;
    right: 0;
    z-index: 10;
    padding: 1.5rem 5vw;
    background: var(--cream);
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
    box-shadow: 0 10px 18px #0001;
  }

  .primary-nav.open {
    display: flex;
  }

  .logo {
    font-size: 1.35rem;
  }


  /* HERO */

  .hero {
    grid-template-columns: 1fr;
    padding-top: 3.5rem;
    gap: 3rem;
  }
.eyebrow{
    width:100%;
    max-width:none;
    white-space:nowrap;
    font-size:.65rem;
    gap:.55rem;
}
  .hero h1 {
    font-size: clamp(2.4rem, 11vw, 3.2rem);
    line-height: 0.98;
    letter-spacing: -0.035em;
  }

  .hero-actions {
    flex-wrap: wrap;
    gap: 1rem;
  }

  .hero-visual {
    width: 100%;
    min-height: 360px;
  }

  .car-card {
    width: 80%;
    left: 10%;
  }

  .hero-stats{
    display:block;
    width:100%;
    max-width:none;
    margin-top:1rem;
}

.hero-stats > div{
    width:100%;
    max-width:none;
}

.hero-stats strong{
    display:block;
    width:100%;
    white-space:nowrap;
}

  .hero-stats span {
    font-size: 0.55rem;
  }


  /* SECTIONS */

  .section {
    padding-top: 5rem;
    padding-bottom: 5rem;
  }

  .section h2 {
    font-size: clamp(2rem, 8vw, 2.6rem);
    line-height: 1;
    letter-spacing: -0.03em;
  }


  /* COURSES */

  .course-grid {
    grid-template-columns: 1fr;
  }

  .course-card {
    min-height: 240px;
  }

  .course-card h3 {
    margin: 0;
    font-size: 1.7rem;
    line-height: 1.1;
    letter-spacing: -0.04em;
  }

  .course-card > span {
    margin-top: 0.4rem;
    font-size: 0.8rem;
    opacity: 0.85;
  }

  .course-card a {
    margin-top: auto;
    padding-bottom: 0.3rem;
    border-bottom: 1px solid currentColor;
    font-size: 0.72rem;
    font-weight: 800;
  }

  .course-card b {
    margin-left: 0.5rem;
    font-size: 1.1rem;
  }


  /* HOW / REVIEWS / CONTACT */

  .how,
  .reviews,
  .contact {
    grid-template-columns: 1fr;
    gap: 3rem;
  }

  .how {
    padding-top: 5rem;
    padding-bottom: 5rem;
  }

  .reviews {
    padding-bottom: 6rem;
  }

  .quote-card {
    padding: 1.8rem;
  }

  .contact {
    padding-top: 5rem;
    padding-bottom: 5rem;
  }

  .contact h2 {
    font-size: clamp(2.2rem, 9vw, 2.8rem);
    line-height: 1;
    letter-spacing: -0.03em;
  }


  /* FORMS */

  .contact-form,
  .cona-form {
    width: 100%;
  }

  .contact-form input,
  .contact-form select,
  .contact-form textarea,
  .contact-form button,
  .cona-form input,
  .cona-form select,
  .cona-form textarea,
  .cona-form button {
    width: 100%;
    max-width: 100%;
    font-size: 16px;
  }

  #other-course {
    width: 100%;
    min-height: 100px;
  }

  .button-dark {
    width: 100%;
  }


  /* CONTACT PAGE */

  .con {
    width: 100%;
    max-width: 100%;
    padding: 4rem 5vw;
    align-items: flex-start;
  }

  .loc {
    width: 100%;
  }

  .google-map {
    width: 100%;
    max-width: 100%;
    height: 300px;
  }

  .cona {
    width: 100%;
    max-width: 100%;
  }

  .con1 {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    width: 100%;
    max-width: 100%;
    padding: 2rem 5vw;
  }

  .con1 > * {
    grid-column: 1 !important;
    grid-row: auto !important;
    position: static !important;
    transform: none !important;
    width: 100%;
    max-width: 100%;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .loca21 {
    display: inline-block;
    vertical-align: middle;
    font-size: 24px;
    line-height: 1;
  }


  /* DECORATIVE ELEMENTS */

  .road-sign {
    transform: scale(0.8);
  }

  .sign-one {
    top: 55px;
    left: -3%;
  }

  .sign-two {
    right: -4%;
    bottom: 22px;
  }

  .floating-note {
    bottom: 15%;
    left: 4%;
  }


  /* FOOTER */

  footer {
    flex-wrap: wrap;
    gap: 1.3rem;
    padding-left: 5vw;
    padding-right: 5vw;
  }
}
/* =========================
   VERY SMALL PHONES
   ========================= */

@media(max-width:400px){

    .site-header{
        padding-left:4vw;
        padding-right:4vw;
    }

    .hero{
        padding-left:4vw;
        padding-right:4vw;
    }
    .eyebrow{
        width:100%;
        max-width:none;
        white-space:nowrap;
        font-size:.55rem;
        gap:.35rem;
    }
    .section{
        padding-left:4vw;
        padding-right:4vw;
    }

    .contact{
        padding-left:4vw;
        padding-right:4vw;
    }
.cona{
        padding-left:4vw;
        padding-right:4vw;
    }
    .hero h1{
        font-size:clamp(2.4rem,12vw,3.4rem);
    }

    .hero-actions{
        flex-direction:column;
        align-items:stretch;
    }

    .hero-actions .button,
    .hero-actions .text-link{
        width:100%;
        justify-content:center;
        text-align:center;
    }

    .hero-stats{
        display:grid;
        grid-template-columns:repeat(2,1fr);
    }

    .hero-visual{
        min-height:320px;
        border-radius:150px 150px 12px 12px;
    }

    .sun{
        width:90px;
        height:90px;
        right:30px;
        top:35px;
    }

    .car-card{
        width:86%;
        left:7%;
        bottom:40px;
    }

    .course-card h3{
        font-size:1.7rem;
    }

    .steps li{
        grid-template-columns:50px 1fr;
    }

    .steps h3{
        font-size:1.4rem;
    }

    .quote-card{
        padding:1.4rem;
    }

    footer{
        flex-direction:column;
        align-items:flex-start;
    }

    footer div{
        flex-wrap:wrap;
    }
    

}
.bullet1::before {
    content: "•";
    color:var(--ink);
    font-size: 20px;
    margin-right: 8px
    }
.bullet::before {
    content: "•";
    color:var(--lime);
    font-size: 20px;
    margin-right: 8px
    }