/* ============================================
   GADAJ ENGLISH - Global Styles
   ============================================ */



:root {
    /* Add these styles to your global stylesheet, which is used across all site pages. You only need to do this once. All elements in the library derive their variables and base styles from this central sheet, simplifying site-wide edits. For instance, if you want to modify how your h2's appear across the site, you just update it once in the global styles, and the changes apply everywhere. */
    --primary: #fefefe;
    --primaryLight: #ffba43;
    --secondary: #ffffff;
    --secondaryLight: #ffba43;
    --headerColor: #f8d058;
    --bodyTextColor: #050505;
    --bodyTextColorWhite: #fafbfc;
    /* 13px - 16px */
    --topperFontSize: clamp(0.8125rem, 1.6vw, 1rem);
    /* 31px - 49px */
    --headerFontSize: clamp(1.9375rem, 3.9vw, 3.0625rem);
    --bodyFontSize: 1rem;
    /* 60px - 100px top and bottom */
    --sectionPadding: clamp(3rem, 7.82vw, 6.25rem) 1rem;
}

body {
    margin: 0;
    padding: 0;
}

*, *:before, *:after {
    /* prevents padding from affecting height and width */
    box-sizing: border-box;
}
.cs-topper {
    font-size: var(--topperFontSize);
    line-height: 1.2em;
    text-transform: uppercase;
    text-align: inherit;
    letter-spacing: .1em;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 0.25rem;
    display: block;
}

.cs-title {
    font-size: var(--headerFontSize);
    font-weight: 900;
    line-height: 1.2em;
    text-align: inherit;
    max-width: 43.75rem;
    margin: 0 0 1rem 0;
    color: var(--headerColor);
    position: relative;
}

.cs-text {
    font-size: var(--bodyFontSize);
    line-height: 1.5em;
    text-align: inherit;
    width: 100%;
    max-width: 40.625rem;
    margin: 0;
    color: var(--bodyTextColor);
}
                            






* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Raleway', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.6;
    color: #333;
    position: relative;
    background-color: #152039;
}

/* ============================================
   HEADER & NAVIGATION
   ============================================ */
/*-- -------------------------- -->
<---     Mobile Navigation      -->
<--- -------------------------- -*/
/* Mobile - 1023px */
@media only screen and (max-width: 63.9375rem) {
  body.cs-open {
    overflow: hidden;
  }
  #cs-navigation {
    width: 100%;
    /* prevents padding and border from affecting height and width */
    box-sizing: border-box;
    padding: 0.75rem 1rem;
    background-color: #152039;
    box-shadow: #d4d4ab33 0px 8px 24px;
    position: fixed;
    z-index: 10000;
  }
  #cs-navigation:before {
    content: "";
    width: 100%;
    height: 0vh;
    background: #1520396d;
    opacity: 0;
    display: block;
    position: absolute;
    top: 100%;
    right: 0;
    z-index: -1100;
    transition: height 0.5s, opacity 0.5s;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
  }
  #cs-navigation.cs-active:before {
    height: 150vh;
    opacity: 1;
  }
  #cs-navigation.cs-active .cs-ul-wrapper {
    opacity: 1;
    transform: scaleY(1);
    transition-delay: 0.15s;
  }
  #cs-navigation.cs-active .cs-li {
    opacity: 1;

    transform: translateY(0);
  }
  #cs-navigation .cs-container {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }
  
  #cs-navigation .cs-box {
    /* 24px - 28px */
    width: clamp(3.5rem, 3.75vw, 4.75rem);
    /* 14px - 16px */
    height: clamp(1.875rem, 1.9vw, 2rem);
    position: relative;
    display: flex;
   
  }

  .cs-toggle {
  background: hsl(45, 92%, 66%);
  text-align:center;
  font-size: 1.2rem;
  color:  #152039;
  font-weight: 800;
  }

  .cs-toggle p {
  margin: auto;
  }

  .cs-toggle:hover {
    background: #000000e1;
    cursor: pointer;
    
  }

  
  #cs-navigation .cs-ul-wrapper {
    width: 100%;
    height: auto;
    font-weight: 600;
    padding-bottom: 2.4em;
    background-color: #152039;
    box-shadow: inset rgba(0, 0, 0, 0.2) 0px 8px 24px;
    opacity: 0;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: -1;
    overflow: hidden;
    transform: scaleY(0);
    transition: transform 0.4s, opacity 0.3s;
    transform-origin: top;
  }
  #cs-navigation .cs-ul {
    width: 100%;
    height: auto;
    max-height: 65vh;
    margin: 0;
    padding: 3rem 0 0 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 1.25rem;
    overflow: scroll;
  }
  #cs-navigation .cs-li {
    text-align: center;
    list-style: none;
    width: 100%;
    margin-right: 0;
    opacity: 0;
    /* transition from these values */
    transform: translateY(-4.375rem);
    transition: transform 0.6s, opacity 0.9s;
  }
  #cs-navigation .cs-li:nth-of-type(1) {
    transition-delay: 0.05s;
  }
  #cs-navigation .cs-li:nth-of-type(2) {
    transition-delay: 0.1s;
  }
  #cs-navigation .cs-li:nth-of-type(3) {
    transition-delay: 0.15s;
  }
  #cs-navigation .cs-li:nth-of-type(4) {
    transition-delay: 0.2s;
  }
  #cs-navigation .cs-li:nth-of-type(5) {
    transition-delay: 0.25s;
  }
  #cs-navigation .cs-li:nth-of-type(6) {
    transition-delay: 0.3s;
  }
  #cs-navigation .cs-li:nth-of-type(7) {
    transition-delay: 0.35s;
  }
  #cs-navigation .cs-li:nth-of-type(8) {
    transition-delay: 0.4s;
  }
  #cs-navigation .cs-li:nth-of-type(9) {
    transition-delay: 0.45s;
  }
  #cs-navigation .cs-li:nth-of-type(10) {
    transition-delay: 0.5s;
  }
  #cs-navigation .cs-li:nth-of-type(11) {
    transition-delay: 0.55s;
  }
  #cs-navigation .cs-li:nth-of-type(12) {
    transition-delay: 0.6s;
  }
  #cs-navigation .cs-li:nth-of-type(13) {
    transition-delay: 0.65s;
  }
  #cs-navigation .cs-li-link {
    /* 16px - 24px */
    font-size: clamp(1rem, 2.5vw, 1.5rem);
    line-height: 1.2em;
    text-decoration: none;
    margin: 0;
    color: var(--headerColor);
    display: inline-block;
    position: relative;
  }
  #cs-navigation .cs-li-link:before {
    /* active state underline */
    content: "";
    width: 100%;
    height: 1px;
    background: currentColor;
    opacity: 1;
    display: none;
    position: absolute;
    bottom: -0.125rem;
    left: 0;
  }
  #cs-navigation .cs-li-link.cs-active:before {
    display: block;
  }
  #cs-navigation .cs-button-solid {
    display: none;
  }
}
/*-- -------------------------- -->
<---     Desktop Navigation     -->
<--- -------------------------- -*/
/* Small Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #cs-navigation {
    width: 100%;
    /* prevents padding and border from affecting height and width */
    box-sizing: border-box;
    padding: 0 1rem;
    background-color: #152039;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
    position: fixed;
    z-index: 10000;
  }
  #cs-navigation .cs-container {
    width: 100%;
    max-width: 80rem;
    margin: auto;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 1.5rem;
  }
  #cs-navigation .cs-toggle {
    display: none !important;
  }
  
  
  #cs-navigation .cs-ul {
    width: 100%;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    /* 20px - 36px */
    gap: clamp(1.25rem, 2.6vw, 2.25rem);
  }
  #cs-navigation .cs-li {
    list-style: none;
    padding: 2rem 0;
    /* prevent flexbox from squishing it */
    flex: none;
  }
  #cs-navigation .cs-li-link {
    /* 14px - 16px */
    font-size: clamp(0.875rem, 1vw, 1rem);
    line-height: 1.5em;
    text-decoration: none;
    margin: 0;
    color: white;
    font-weight: 600;
    display: block;
    position: relative;
  }
  #cs-navigation .cs-li-link:hover:before {
    width: 100%;
  }
  #cs-navigation .cs-li-link.cs-active:before {
    width: 100%;
  }
  #cs-navigation .cs-li-link:before {
    /* active state underline */
    content: "";
    width: 0%;
    height: 2px;
    background: red;
    opacity: 1;
    display: block;
    position: absolute;
    bottom: 0rem;
    left: 0;
    transition: width 0.3s;
  }
  
}



/*-- -------------------------- -->
<---            Hero            -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #hero-856 {
    /* centers button */
    text-align: center;
    /* 116px - 164px top */
    /* 60px - 100px  bottom */
    padding: clamp(12.25rem, 16.82vw, 10.25rem) 1rem clamp(3.75rem, 7.82vw, 6.25rem);
    background-color: #152039;
    /* clips the svg wave from overflowing */
    overflow: hidden;
    position: relative;
    z-index: 1;
  }
  #hero-856 .cs-container {
    width: 100%;
    max-width: 80rem;
    margin: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 3rem;
  }
  #hero-856 .cs-content {
    max-width: 39.375rem;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }
  #hero-856 .cs-topper {
    font-size: 1.2rem;
    line-height: 1.2em;
    text-transform: uppercase;
    text-align: inherit;
    letter-spacing: 0.1em;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 0.25rem;
    display: block;
  }
  #hero-856 .cs-title {
    /* 39px - 61px */
    color: hsl(45, 92%, 66%);
    font-size: clamp(2.4375rem, 5vw, 3.8125rem);
    font-weight: 900;
    line-height: 1.2em;
    text-align: center;
    /* 23 characters including spaces wide */
    max-width: 23ch;
    margin: 0 0 1rem 0;
    color: var(--headerColor);
    position: relative;
  }
  #hero-856 .cs-text {
    /* 16px - 20px */
    color: #ffffff;
    font-size: clamp(1rem, 1.5vw, 1.25rem);
    line-height: 1.5em;
    text-align: center;
    width: 100%;
    max-width: 33.1875rem;
    /* 28px - 40px */
    margin: 0 0 clamp(1.75rem, 3.92vw, 2.5rem) 0;
    color: var(--bodyTextColorWhite);
  }
  #hero-856 .cs-button-solid {
    font-size: 1rem;
    /* 46px - 56px */
    line-height: clamp(2.875rem, 5.5vw, 3.5rem);
    text-decoration: none;
    font-weight: 700;
    text-align: center;
    margin: 0;
    color: #f4f4f4;
    min-width: 9.375rem;
    padding: 0 1.5rem;
    background-color: #f8d058e1;
    border-radius: 0.25rem;
    display: inline-block;
    position: relative;
    z-index: 1;
    /* prevents padding from adding to the width */
    box-sizing: border-box;
  }
  #hero-856 .cs-button-solid:before {
    content: "";
    position: absolute;
    height: 100%;
    width: 0%;
    background: #1a1e3d;
    opacity: 1;
    top: 0;
    left: 0;
    z-index: -1;
    border-radius: 0.25rem;
    transition: width 0.3s;
  }
  #hero-856 .cs-button-solid:hover:before {
    width: 100%;
  }
  #hero-856 .cs-picture {
    width: 100%;
    max-width: 35.625rem;
    /* 400px - 712px */
    height: clamp(25rem, 95vw, 44.5rem);
    /* 100px - 200px */
    border-radius: 0 clamp(6.25rem, 17vw, 12.5rem) 0 clamp(6.25rem, 17vw, 12.5rem);
    box-shadow: 0px 4px 60px rgba(0, 0, 0, 0.16);
    /* clips the img tag corners */
    overflow: hidden;
    display: block;
    position: relative;
  }
  #hero-856 .cs-picture img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    /* makes image act as a background image */
    object-fit: cover;
    /* ensures the top of the images is at the top of the container, no heads getting cut off */
    object-position: top;
  }
  #hero-856 .cs-wave {
    /* we're stretching the svg wider than the viewport so it's taller and has more of a presence */
    width: 320%;
    height: auto;
    display: block;
    position: absolute;
    left: 50%;
    bottom: -1px;
    transform: translateX(-50%);
    z-index: -1;
  }
  .hero-but {
    display: flex;
    flex-direction: row;
    gap: 1rem;
}

}
/* Small Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #hero-856 {
    text-align: left;
  }
  #hero-856 .cs-container {
    flex-direction: row;
    justify-content: space-between;
  }
  #hero-856 .cs-content {
    width: 40vw;
    /* prevents flex-box from squishing it */
    flex: none;
    align-items: flex-start;
    /* sends it to the right in the 2nd position */
    order: 2;
  }
  #hero-856 .cs-title {
    text-align: left;
    color: #f8d058;
  }
  #hero-856 .cs-text {
    text-align: left;
    color: #ffffff;

    
  }
  #hero-856 .cs-picture {
    /* 623px - 814px */
    height: clamp(38.9375rem, 60vw, 50.875rem);
  }
  #hero-856 .cs-wave {
    width: 100%;
    left: 0;
    /* flips it horizontally */
    transform: scaleX(-1);
  }

  .hero-but {
    display: flex;
    flex-direction: row;
    gap: 1rem;
}
                                
}

/*-- -------------------------- -->
<---        Section 04          -->
<--- -------------------------- -*/






a { color: #f8d058; text-decoration: none; }

.arrow {
  text-align: center;
  margin: 20% auto 0 auto;

}
.bounce {
  -moz-animation: bounce 2s infinite;
  -webkit-animation: bounce 2s infinite;
  animation: bounce 2s infinite;
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-30px);
  }
  60% {
    transform: translateY(-15px);
  }
}

/*-- -------------------------- -->
<---        Why Choose          -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
    #why-choose-289 {
      background-color: #ffffff;
        text-align: center;
        padding: 2rem 1rem;

    }
    #why-choose-289 .cs-container {
        width: 100%;
        /* changes to 1280px on tablet */
        max-width: 34.375rem;
        margin: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        /* 48px - 64px */
        gap: clamp(3rem, 6vw, 4rem);
    }
    #why-choose-289 .cs-content {
        /* set text align to left if content needs to be left aligned */
        text-align: left;
        width: 100%;
        display: flex;
        flex-direction: column;
        /* centers content horizontally, set to flex-start to left align */
        align-items: flex-start;
    }

    #why-choose-289 .cs-title {
        font-size: var(--headerFontSize);
        font-weight: 900;
        line-height: 1.2em;
        text-align: inherit;
        max-width: 43.75rem;
        margin: 0 0 1rem 0;
        color: var(--headerColor);
        position: relative;
    }

    #why-choose-289 .cs-card-group {
        width: 100%;
        margin: 0;
        padding: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        gap: 1rem;
    }
    #why-choose-289 .cs-item {
        list-style: none;
        align-content:flex-start;
        text-align: left;
        width: 100%;
        padding: 1rem;
        background-color: #152039;
        border-radius: 1rem;
        /* prevents padding from adding to height and width */
        box-sizing: border-box;
        transition: background-color 0.3s;
    }
    #why-choose-289 .cs-item img{
      width: 100%;
        object-fit: contain;
        margin-top: 0.5rem;


        
    }

    #why-choose-289 .cs-h3 {
        /* 20px - 25px */
        font-size: clamp(1.25rem, 2.5vw, 1.5625rem);
        line-height: 1.2em;
        margin: 0;
        margin-bottom: 1rem;
        color: var(--headerColor);
        transition: color 0.3s;
    }
    #why-choose-289 .cs-item-text {
        font-size: 1rem;
        line-height: 1.5em;
        margin: 0;
        color: var(--bodyTextColorWhite);
        transition: color 0.3s;
    }

    #why-choose-289 .cs-li {
        margin-bottom: 0.5rem;  
        color: var(--bodyTextColorWhite);
    }
  
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
    #why-choose-289 .cs-container {
        max-width: 80rem;
    
    }
    #why-choose-289 .cs-content {
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-end;
        gap: 4rem;
    }
    #why-choose-289 .cs-flex {
        width: 50%;
    }
    #why-choose-289 .cs-title {
        margin: 0;
    }
    #why-choose-289 .cs-card-group {
        justify-content: space-between;
        /* makes sure every box "stretches" to be the same height as the tallest box */
        align-items: stretch;
        flex-direction: row;
        /* 16px - 20px */
        gap: clamp(1rem, 1.5vw, 1.25rem);
    }
    #why-choose-289 .cs-item {
        width: auto;
        /* 16px - 32px */
        padding: 2rem clamp(1rem, 2.1vw, 2rem);
    }
}

 #why-choose-289 .cs-button-solid {
    font-size: 1rem;
    /* 46px - 56px */
    line-height: clamp(2.875rem, 5.5vw, 3.5rem);
    text-decoration: none;
    font-weight: 700;
    text-align: center;
    margin: 0;
    color: #f4f4f4;
    min-width: 9.375rem;
    padding: 0 1.5rem;
    background-color: #f8d058d8;
    border-radius: 0.25rem;
    display: inline-block;
    position: relative;
    z-index: 1;
    /* prevents padding from adding to the width */
    box-sizing: border-box;
  }
#why-choose-289 .cs-button-solid:before {
    content: "";
    position: absolute;
    height: 100%;
    width: 0%;
    background: #2c5074;
    opacity: 1;
    top: 0;
    left: 0;
    z-index: -1;
    border-radius: 0.25rem;
    transition: width 0.3s;
  }
 #why-choose-289 .cs-button-solid:hover:before {
    width: 100%;
  }


                                                      

/* ============================================
   Oferta CARDS
   ============================================ */
.programs-page {
    
    padding: var(--sectionPadding);
    margin: 0;
}


.page-header-programs {
    background: #152039;
    padding: 2rem;
}

.page-header-programs p {
    color: #ffffff;
    font-size: 1.4rem;
    line-height: 1.8;    max-width: 1000px;
    margin: 0 auto;
    margin-bottom: 0;
}

.page-header-programs h1 {
    color: #f8d058;
    font-size: 2rem;
    margin-bottom: 1.5rem;
    text-align: center;
}

.page-header-programs a {
    color: #f8d058;
    text-decoration: underline;
}


.column {
  float: left;
  width: 33.33%;
  padding: 50px;
  text-align: center;
  font-size: 25px;
  cursor: pointer;
  color: white;
}

.containerTab {
  padding: 20px;
  text-align: left;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Closable button inside the image */
.closebtn {
  float: right;
  color: white;
  font-size: 35px;
  cursor: pointer;
}
/* 
---------------------------------
--------------Regulamin
------------------------------*/


#regulamin {
    padding: var(--sectionPadding);
    background-color: #152039;
   
}

#regulamin .reg {
    color: bisque;
    width: 100%;
    max-width: 80rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: left;
    gap: 1rem;
}

#regulamin .tb-regulamin {
    width: 100%;
    border-collapse: collapse;
    color: var(--bodyTextColorWhite);   
}

#regulamin .tb-regulamin th {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: left;
}

#regulamin .tb-regulamin td {
    border: 1px solid #ddd;
    padding: 4px;
    text-align: left;
}


/*-- -------------------------- -->
<---         Services           -->
<--- -------------------------- -*/


#services-343 .cs-text-oferta-1 {
    font-size: 1.10rem;
    line-height: 1.5em;
    margin: 0;
    color: var(--bodyTextColorWhite);
    transition: color 0.3s;
}

#services-343 .picktime-btn {
    color: var(--bodyTextColor);
    font-size: 1.25rem;
    display: block;
    margin: auto;
    background-color: #f8d058;
    border-radius: 0.35rem;
    border: #f8d058 2px solid;
    padding: 0.75rem 1.25rem;
}
    


/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
    #services-343 {
        padding: 1rem;
    }
    #services-343 .cs-container {
        
        width: 100%;
        /* changes to 1440px at tablet */
        max-width: 34.375rem;
       
        margin: auto;
        
        display: flex;
        flex-direction: column;
        align-items: center;
        /* 48px - 64px */
        gap: clamp(3rem, 6vw, 4rem);
    }
    #services-343 .cs-content {
        /* set text align to left if content needs to be left aligned */
        text-align: center;
        width: 100%;
        display: flex;
        flex-direction: column;
        /* centers content horizontally, set to flex-start to left align */
        align-items: center;
    }

    #services-343 .cs-card-group {
        width: 100%;
        padding: 0;
        margin: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        /* 16px - 20px */
        gap: clamp(1rem, 1.6vw, 1.25rem);
    }
    #services-343 .cs-item {
        list-style: none;
        width: 100%;
        max-width: 31.25rem;
        border-radius: 0.5rem;
        background-color: #fff;
        position: relative;
        z-index: 1;
        transition:
            box-shadow 0.3s,
            transform 0.3s;
    }
    #services-343 .cs-item:hover {
        box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
        transform: translateY(-0.4375rem);
    }
    #services-343 .cs-item:hover .cs-picture img {
        opacity: 0.3;
        transform: scale(1.1);
    }
    #services-343 .cs-item:hover .cs-h3 {
        color: var(--primaryLight);
    }

    /* ------------------ expanded tile styles ------------------ */
    #services-343 .cs-item.active {
        /* make the clicked card take up the full width of the group */
        width: 100% !important;
        max-width: none;
        /* push it above the others so the tab content sits on top */
        z-index: 5;
    }
    /* hide the picture when the card is expanded so only the text shows */
    #services-343 .cs-item.active .cs-picture {
      display: none;
    }
    #services-343 .cs-item.active .cs-picture img {
      display: none;
    }
    
     #services-343 .cs-item.active .see-more {
      display: none;
    }

    #services-343 .cs-item .containerTab {
        display: none;
        /* add some spacing inside when revealed */
        padding: 1rem clamp(1rem,2.2vw,1.5rem);
        color: rgb(20, 19, 19);
        font-size: 1.5rem;
    }
    #services-343 .cs-item.active .containerTab {
        display: block;
    }

    #services-343 .cs-item:before {
        /* border, done in pseudo so it can sit under the picture */
        content: "";
        width: 100%;
        height: 100%;
        border-radius: 0.5rem;
        border: 1px solid #e8e8e8;
        /* prevents border from affecting height and width */
        box-sizing: border-box;
        background: transparent;
        opacity: 1;
        position: absolute;
        display: block;
        top: 0;
        left: 0;
        z-index: -1;
    }
    #services-343 .cs-link {
        text-decoration: none;
        /* 16px - 24px */
        padding-bottom: clamp(1rem, 2.2vw, 1.5rem);
        display: block;
    }
    #services-343 .cs-picture {
        width: 100%;
        height: 15rem;
        /* 16px - 24px */
        margin-bottom: clamp(1rem, 2.2vw, 1.5rem);
        border-radius: 0.5rem 0.5rem 0 0;
        background-color: var(--primaryLight);
        /* clips the img tag corners */
        overflow: hidden;
        display: block;
        position: relative;
        z-index: 10;
    }
    #services-343 .cs-picture img {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        object-fit: cover;
        transition:
            transform 0.6s,
            opacity 0.3s;
    }
    #services-343 .cs-h3 {
        /* 20px - 25px */
        font-size: 1.8rem;
        line-height: 1.5em;
        font-weight: 700;
        color: var(--headerColor);
        margin: 0 0 0.75rem 0;
        /* 16px - 24px */
        padding: 0 clamp(1rem, 2vw, 1.5rem);
        transition: color 0.3s;
    }
    #services-343 .cs-item-text {
        /* 14px - 16px  */
        font-size: clamp(0.875rem, 1.5vw, 1rem);
        line-height: 1.5em;
        color: var(--bodyTextColor);
        margin: 0;
        /* 16px - 24px */
        padding: 0 clamp(1rem, 2.2vw, 1.5rem);
    }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
    #services-343 .cs-container {
        max-width: 90rem;
    }
    #services-343 .cs-card-group {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: stretch;
    }
    #services-343 .cs-item {
        width: 48.9%;
    }
}
/* Desktop - 1300px */
@media only screen and (min-width: 81.25rem) {
    #services-343 .cs-item {
        /* we do this so it's stackable. You can add any number of reviews you want and they will stack and center in the middle. We dont use grid because if you have an odd number of reviews, they don't stay centered.  They align with their grid lines. If you want 4 reviews in a row, lower the width under 22.5vw or 23% to get the desired sizes fit 4 in a row and then stack when you add more */
        width: clamp(23.8%, 23vw, 23.95%);
    }
}

                                

/* ============================================
   APPROACH SECTION
   ============================================ */

.approach-page {
    padding: var(--sectionPadding);
    margin: 0;
}

.container-approach {
    max-width:fit-content;
    
    margin: 0 auto;
    
    background-color: #152039;
    font-family: 'Raleway', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.page-header-approach {
    background: #152039;
    padding: 2rem;
    color: #f8d058;
    text-align: center;
    text-decoration: solid;
}


.principles {
    display: flex;
    flex-direction:row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
    margin: 0;
}

.principle-card {

    background: #f5f5f5;
    padding: 2rem;
    margin: 0.5rem 0;
    border-radius: 12px;
    border-left: 0.4rem solid #f8d058;
    place-self: center;
    
}

.principle-card h4 {
    color: #152039;
    margin-bottom: 1rem;
    margin-top: 0;
}

/* ============================================
   ABOUT PAGE
   ============================================ */


#o-mnie-main {
    padding: var(--sectionPadding);
    margin: 0;
}

.o-mnie-container {
   background-color: #152039;
    margin: 0 auto;
    padding: 2rem;
    justify-items: end;
    
}
.o-mnie {
    background: #152039;
    color: white;
    font-size: larger;
    padding: 2rem;
    border-radius: 15px;
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
    
}
.o-mnie-cont {
  display: flex;
  flex-direction: column;
  justify-content:space-between;
  background: #152039;
  color: white;
}

.cs-picture-me img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition:
        transform 0.6s,
        opacity 0.3s;
}

.cs-picture-me {
    width: 100%;
    max-width: 300px;
    height: auto;
    border-radius: 40%;
    background-color: #152039;
    /* clips the img tag corners */
    overflow: hidden;
    display: block;
    margin: 0 auto 2rem auto;
}



.cs-item-me {
    background: #152039;
    color: white;
    font-size: larger;
    padding: 2rem;
    border-radius: 15px;
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
}

.head-o {
    
    color: #f8d058;
    font-size: 1.5rem;
    margin-bottom: 1rem;
    margin-top: 10px;
    padding: 1.5rem;
  

}

.content-o {
    color: white;
    font-size: 1.1rem;
    line-height: 1.6;
    padding: 0 1.5rem;
   
  
 
}
                            



/* FEES page */
.fees-main {
    display: flex;
    flex-direction: column;
    
    background-color: #152039;
    color: white;
    font-family: 'Raleway', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    padding: var(--sectionPadding);

}

.table-responsive {
  text-align: center;
  margin-bottom: 3rem;;
}


.fees-tb-pakiety {
  
  margin: 0px auto;
 
  padding: 0.75rem;
  font-size: 1rem;
  color: #f8d058;
}

.fees-tb-ind {
  margin: 0px auto;
  
  padding: 0.9rem;
  font-size: 1rem;
  color: #f8d058;
}

.table-responsive th {
    background-color: #f8d058;
    color: #152039;
    margin: 2rem;
    padding: 0.5rem;
  
}

.table-responsive td {
 
    color: #f8d058;
    margin: 2rem;
    padding: 0.5rem;
}

.table-responsive tr:hover {
    
    font-weight: bolder;

} 

.contact-btn {
    margin: 0px auto;
    width:fit-content;
    padding: 0.75rem 1.5rem;
    background-color: #af3333;
    font-size: large;
    color: #ffffff;
    text-decoration: none;
    font-weight: 700;
    border-radius: 0.25rem;
    transition: background-color 0.3s, color 0.3s;
}



/* ============================================
   FOOTER
   ============================================ */

footer {
    background: #333;
    color: white;
    text-align: center;
    padding: 2rem;
    margin-top: 0;
}

footer p {
    margin-bottom: 0.5rem;
}



/*-- -------------------------- -->
<---          Contact           -->
<--- -------------------------- -*/


#contact-2320 {
    background-color: #152039;
    font-family: 'Raleway', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-weight: 500;
  
}

#contact-2320 .cs-text-c {
    font-size: 1.25rem;
    color: var(--bodyTextColorWhite);
}





 

/* Strong override: prevent global button rules from styling the mobile nav toggle on desktop */
@media only screen and (min-width: 64rem) {
  /* make sure the mobile toggle is hidden on desktop */
  #cs-navigation .cs-toggle {
    display: none !important;
    width: auto !important;
    background: transparent !important;
    color: inherit !important;
    padding: 0 !important;
    border: none !important;
  }
  /* ensure any generic button selectors don't affect the toggle inside the nav */
  #cs-navigation .cs-toggle * {
    all: unset;
    display: inline-block;
  }

}

@media only screen and (min-width: 0rem) {
  #contact-2320 {
    padding: var(--sectionPadding);
    display: flex;
    flex-direction: column;
    /* 48px - 64px */
    gap: clamp(3rem, 6vw, 4rem);
    position: relative;
    z-index: 1;
  }
  #contact-2320 .cs-container {
    width: 100%;
    /* changes to 1280px at desktop */
    max-width: 36.25rem;
    margin: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    /* 48px - 64px */
    gap: clamp(3rem, 6vw, 4rem);
  }

  #contact-2320 .cs-content {
    text-align: left;
    margin-top: 2rem;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
  #contact-2320 .cs-title {
    margin-bottom: 2rem;
  }
  #contact-2320 .cs-form {
    border-radius: 1rem;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
  }
  #contact-2320 .cs-label {
    /* 14px - 16px */
    font-size: clamp(0.875rem, 1.5vw, 1rem);
    width: 100%;
    color: var(--headerColor);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 0.25rem;
  }
  #contact-2320 .cs-input {
    font-size: 1rem;
    width: 100%;
    height: 3.5rem;
    padding: 0;
    padding-left: 1.5rem;
    color: black;
    background-color: #f7f7f7;
    border: none;
    /* prevents padding from adding to height and width */
    box-sizing: border-box;
  }
  #contact-2320 .cs-input::placeholder {
    color: #7d799c;
    opacity: 0.6;
  }
  #contact-2320 .cs-textarea {
    min-height: 7.5rem;
    padding-top: 1.5rem;
    margin-bottom: 0.75rem;
    font-family: inherit;
  }
  #contact-2320 .cs-button-solid {
    font-size: 1rem;
    /* 46px - 56px */
    line-height: clamp(2.875rem, 5.5vw, 3.5rem);
    text-decoration: none;
    font-weight: 700;
    text-align: center;
    margin: 0;
    color: #030306;
    padding: 0 1.5rem;
    background-color: rgb(20, 23, 55);
    display: inline-block;
    position: relative;
    z-index: 1;
    /* prevents padding from adding to the width */
    box-sizing: border-box;
  }
  #contact-2320 .cs-button-solid:before {
    content: "";
    position: absolute;
    height: 100%;
    width: 0%;
    background: #000;
    opacity: 1;
    top: 0;
    left: 0;
    z-index: -1;
    border-radius: 0.25rem;
    transition: width 0.3s;
  }
  #contact-2320 .cs-button-solid:hover:before {
    width: 100%;
  }
  #contact-2320 .cs-submit {
    text-transform: uppercase;
    background-color: rgb(20, 23, 55);
    color: var(--headerColor);
    border: none;
    transition: color 0.3s;
  }
  #contact-2320 .cs-submit:hover {
    cursor: pointer;
    color: #fafdff;
  }


  #contact-2320 .cs-box {
    width: 90%;
    max-width: 28.125rem;
    /* 16px - 32px top & bottom */
    /* 16px left & right */
    padding: clamp(1rem, 3vw, 2rem) clamp(1rem, 2.4vw, 1rem);
    background-color: #fff;
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 100;
  }
  #contact-2320 .cs-box:before {
    content: '';
    width: 100%;
    height: 100%;
    background: var(--primary);
    pointer-events: none;
    opacity: 0.1;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
  }
  #contact-2320 .cs-icon {
    width: 2rem;
    height: auto;
    display: block;
  }
  #contact-2320 .cs-flex {
    display: flex;
    flex-direction: column;
  }
  #contact-2320 .cs-header {
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.2em;
    margin: 0 0 0.5rem;
    color: var(--headerColor);
  }
  #contact-2320 .cs-address {
    font-size: clamp(0.75rem, 2.8vw, 1rem);
    line-height: 1.5em;
    margin: 0;
    color: var(--bodyTextColor);
  }
  #contact-2320 .cs-hours {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  #contact-2320 .cs-hours-info {
    /* 20px - 25px */
    font-size: clamp(1.25rem, 3vw, 1.5625rem);
    line-height: 1.2em;
    font-weight: 700;
    width: 60%;
    max-width: 28ch;
    margin: 0;
    color: var(--bodyTextColorWhite);
  }
  #contact-2320 .cs-background {
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
  }
  #contact-2320 .cs-background:before {
    /* background color overlay */
    content: '';
    position: absolute;
    display: block;
    height: 100%;
    width: 100%;
    background: #000;
    opacity: 0.72;
    top: 0;
    left: 0;
    z-index: 1;
  }
  #contact-2320 .cs-background img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    /* Makes img tag act as a background image */
    object-fit: cover;
  }
}
/* Small Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #contact-2320 .cs-container {
    max-width: 80rem;
    flex-direction: row;
    justify-content: space-between;
    align-items: stretch;
    gap: 3.25rem;
  }

  .cs-text-c {
    font-size: medium;
    color: var(--bodyTextColorWhite);
  }
  #contact-2320 .cs-container2 {
    max-width: 80rem;
  }
  #contact-2320 .cs-content {
    max-width: 32.625rem;
    /* 24px - 80px */
    padding: clamp(2rem, 5vw, 5rem) 0;
  }
  #contact-2320 .cs-title,
  #contact-2320 .cs-topper,
  #contact-2320 .cs-text {
    text-align: left;
    margin-left: 0;
  }
  #contact-2320 .cs-title {
    max-width: 32.625rem;
  }
  #contact-2320 .cs-services,
  #contact-2320 .cs-phone {
    width: 47%;
  }
  #contact-2320 .cs-button-solid {
    margin-left: 0;
  }
  #contact-2320 .cs-map {
    max-width: 39.375rem;
    height: auto;
    order: -1;
  }
}