:root{
    --white: #fff;
    --black: #000;

    --primary-color: #CFF27E;
    --primary-color-hover: #A8D64D;
    --secondary-color: #171C25;
}
@media(max-width: 1920px){
    .breadcrumb-2-img{ aspect-ratio: 16/7;}
}
@media (min-width: 1600px) {
  .container {
    max-width: 1520px;
  }
}

@media(max-height: 850px){
    .main-wrp::before{ height: 850px;}


}
@media(max-width: 1400px) {
    .navbar-nav{ width: 95%;}
    .hero-video{ aspect-ratio: 10/9; position: relative;}
    .about-video{ aspect-ratio: 10/9;}
    .hero::before{ width: 650px; height: 650px;}
    .section-header p{ width: 70%;}
    #navbarTogglerDemo02{ margin-left: 2rem}
    #navbarTogglerDemo02 .nav-link{width: max-content;}
    .corporate-lawyer-content{ gap: 30px;}
    .corporate-lawyer-content-wrp{ gap: 10px;}
    .navbar-nav{ gap: 1rem;}
}
@media(max-width: 1200px) {
    .navbar-nav{ width: 100%;}
    .hero-video{ aspect-ratio: 16/8; position: relative; top: 0; transform: none; margin-top: 1.25rem;}
    .about-video{ aspect-ratio: 3/4;}
    .personal-card{ aspect-ratio: 2/3;}
    .hero::before{ width: 600px; height: 600px;}
    .section-header p{ width: 80%;}
    .about, .services, .media, .offices, .personal, .branches, .values, .awards, .detail-service, 
    .career, .blog, .blog-detail-img, .why-us, .career-info, .why-us, .error-page, .detail-lawyer, .other-lawyers, .contact, .contact-banner, .detail-branch, .corporate-lawyer, .corporate,
    .related-comment{ padding: 50px 0;}
    .detail-career,
    .detail-blog{ padding: 0 0 50px;}
    .banner{ padding: 50px 0.75rem 50px;}
    .about-banner, .services-card, .personal-card-content, .value-card, .career-card, .contact-banner-container,
    .banner .container{ padding: 2.25rem;}
    .hero .container{ gap: 2.5rem;}
    .hero{ height: fit-content; margin-top: 5rem;}
    .detail-blog-content{ gap: 50px;}
    #navbarTogglerDemo02{ margin-left: 0rem}
    .services-columns { flex-direction: column; gap: 0;}
    .lawyer-img-wrp{aspect-ratio: 3/5; max-height: unset;}
    .other-lawyers{ overflow-x: clip;}
    #otherLawyerSlider .splide__track{ clip-path: inset(-100vw -100vw -100vw -100vw); overflow: visible;}
    #contactSlider .splide__track{ clip-path: inset(-100vw -100vw -100vw -100vw); overflow: visible;}
    .detail-service h2{ font-size: 2rem; line-height: normal;}
    .contact-banner-img{aspect-ratio: 16/9;}
}
@media(max-width: 992px) {
    /* NAVBAR */
    /* Navbar toggler & focus */
    .navbar-toggler {border-radius: 0;border: none;margin: -0.5rem 0 0 0;}
    .navbar-toggler:focus {outline: none;box-shadow: none;}

    /* Toggler span & open state */
    .navbar-toggler span {
        background-color: var(--white);
        position: relative;
        width: 24px;
        height: 2px;
        display: block;
        margin-bottom: 6px;
        transition: 0.5s;
        -webkit-transition: 0.5s;
        -moz-transition: 0.5s;
        -ms-transition: 0.5s;
        -o-transition: 0.5s;
}
    .navbar-toggler span:last-child { margin-bottom: 0;}
    .navbar-toggler.open span {background-color: var(--white);}
    .navbar-toggler.open span:first-child {top: 5px;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);-ms-transform: rotate(45deg);-o-transform: rotate(45deg);}
    .navbar-toggler.open span:nth-child(2) {display: none;}
    .navbar-toggler.open span:last-child {top: -3px;transform: rotate(-45deg);-webkit-transform: rotate(-45deg);-moz-transform: rotate(-45deg);-ms-transform: rotate(-45deg);-o-transform: rotate(-45deg);}
    .header.header-dark .navbar-toggler span {background-color: var(--white);}

    /* Navbar collapse */
    .navbar-collapse {
        display: flex;
        align-items: flex-start;
        justify-content: flex-start !important;
        position: fixed;
        z-index: 99;
        right: -100%;
        top: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
        overflow: hidden;
        flex-direction: column;
        padding: 8rem 6rem 4rem !important;
        background-color: var(--white);
        transition: 0.2s;
        -webkit-transition: 0.2s;
        -moz-transition: 0.2s;
        -ms-transition: 0.2s;
        -o-transition: 0.2s;
    }
    .scrollable-content {
        overflow-y: auto;
        flex: 1 1 auto;
        max-height: calc(100vh);
        width: 100%;
    }
    .navbar-collapse.show {right: 0;height: auto;;background: var(--secondary-color); opacity: 1;}
    .navbar .navbar-toggler,
    .navbar-brand {z-index: 999;}
    .banner-item{ align-items: center;}

    /* Header & navigácia */
    .header .nav-item {justify-content: center;}
    .header .nav-item .nav-link {font-size: 1.25rem;color: var(--white); justify-content: start; transition: all .3s ease-in-out;}
    .header .nav-item .nav-link:hover{ color: var(--primary-color);}
    .dropdown-toggle,
    .header .nav-item .nav-link:focus-visible { box-shadow: none;}
    .header .dropdown-item {font-size: 1rem;font-weight: 400; padding: 0.5rem 0 0 0.5rem !important; text-align: start; color: var(--white); justify-content: start;}
    .header .dropdown .dropdown-menu {display: none;opacity: 0;visibility: hidden;border: none;padding: 0;padding-bottom: 0.5rem;}
    .header .dropdown .dropdown-menu.show {display: block;opacity: 1;visibility: visible;transform: translateY(0);text-align: center;margin-top: 0; backdrop-filter: blur(0px);}
    .header .dropdown-toggle svg {width: 1.5rem;height: 1.5rem;stroke-width: 3.5;}
    .header .navbar-nav {gap: 0; width: 100%;height: fit-content; justify-content: flex-start !important; align-items: flex-start;}
    .header .navbar {padding: 1rem;}
    .navbar-nav .nav-link.active, .navbar-nav {text-align: start;}
    .nav-link.show{ text-align: center; justify-content: center;}
    .dropdown-menu.show{ background: transparent;}
    .navbar-nav span:not(:nth-child(2)){ flex-direction: column;}
    .about-video{ aspect-ratio: 16/9;}
    .media-card-2,
    .media-card{ aspect-ratio: 4/5;}
    /* End Navbar */
    .footer-left{ text-align: center;}
    .footer-img{ align-self: center;}
    .footer-right{ text-align: center;}
    .footer-content span{ align-items: center;}
    .footer-right > h4 { font-size: 1rem;}
    h1{
        font-size: 3.5rem;
        font-weight: 600;
        line-height: 3.5rem; 
    }
    h2{
        font-size: 3rem;
        font-weight: 600;
        line-height: 52px; 
    }
    h3{
        color: #C8A283;
        font-size: 2rem;
        font-style: normal;
        font-weight: 700;
        line-height: 40px;
    }
    h4{
        font-size: 19px;
        font-weight: 800;
        line-height: 23px;
    }
    p{
        font-size: 1rem;
        font-weight: 400;
    }
    small{
        font-size: 0.75rem;
        font-weight: 400;
    }
    .about-video span::before{ width: 72px; height: 72px;}
    .about-video:hover span::before{ width: 80px; height: 80px;}
    .section-header p{ width: 100%;}
    .navbar{ opacity: 1;}
    .detail-blog-content, .detail-blog-similiar,
    .hero-content{ gap: 2rem;}
    .about .container, .services .container, .media .container, .personal .container, .breadcrumb-3 .container, .breadcrumb-2 .container, .career .container, .detail-career-wrp, .offices .container, .other-lawyers .container,
    .hero .container{ gap: 2rem;}
    .about, .services, .media, .offices, .personal, .branches, .values, .awards, .detail-service, .career, .blog, .blog-detail-img, .why-us, .career-info, .error-page, .detail-lawyer, .other-lawyers, .contact, .contact-banner, .detail-branch, .corporate-lawyer, .corporate,
    .related-comment{ padding: 40px 0;}
    .detail-career,
    .detail-blog{ padding: 0 0 40px;}
    .banner{ padding: 40px 0.75rem 40px;}
    #heroSlider, .service-nav, .value-card, .career-card, .blog-nav, .contact-banner-container,
    .about-banner, .services-card, .personal-card-content, .banner .container{ padding: 2rem;}
    .detail-service-wrp, .contact-banner-content,
    .services-card span{ gap: 1.75rem;}
    #mediaSlider2 .splide__arrow, #mediaSlider .splide__arrow, #commentSlider .splide__arrow,
    #servicesSlider .splide__arrow{ width: 48px; height: 48px;}
    .breadcrumb-content{ text-align: center;}
    .hero, .breadcrumb-2, .breadcrumb, .breadcrumb-3{ margin-top: 3rem;}
    .language-icon{ padding: 0.5rem 0; gap: 0;}
    .btn-transparent{ font-size: 1.5rem;}
    .detail-career-wrp h2{ margin-bottom: 40px;}
    .header .dropdown-toggle svg{ width: 1rem; height: 1rem;}
    .upper-header{ padding: 0.5rem;}
    #headerLanguageDropdown .dropdown-menu{ padding: 1rem; border-radius: 10px; background: #2C384B;backdrop-filter: blur(20px);}
    #headerLanguageDropdown .dropdown-menu .dropdown-item{ padding: 0.25rem .5rem !important; font-size: 12px;}
    #headerLanguageDropdown:focus-visible,
    #headerLanguageDropdown:focus-within,
    #headerLanguageDropdown:focus-within{ outline: none;}
    .personal-btn-wrp{ align-items: center; justify-content: center;}
    .service-dropdown-item { white-space: normal;}
    .dropdown-toggle.show{ color: var(--primary-color);}
    .lawyer-img-wrp{ aspect-ratio: 9/10;}
    .lawyer-content h2{ margin-bottom: .5rem;}
    .other-lawyers-content{ gap: 10px;}
    .other-lawyers-card{ padding: 20px;}
    .detail-service h2{ font-size: 1.875rem; line-height: normal;}
    .footer-right-left-bottom,
    .footer-right-center-wrp{ align-items: center;}
    .branch-map{ height: 300px;}
    .branch-content{ gap: 30px;}
    .corporate-lawyer-img{ aspect-ratio: 16/10;}
    .onAir{ color: var(--white); padding: .5rem 0; font-size: 1rem;}
}
@media (max-width: 768px){
    .upper-header-right{ gap: 1.5rem; justify-content: space-between;}
    .upper-header-right .icon-link svg path{ fill: white;}
    .upper-header-right .icon-link svg{ height: 1rem; width: 1rem;}
    .nav-item-upper{ display: block;}
    .icon-link svg path{ fill: var(--black);}
    .icon-link svg { width: 1.5rem; height: 1.5rem;}
    .rating-wrp{ justify-content: center; gap: .75rem;}
    .hero-wrp{ text-align: center;}
    .hero-wrp span{ justify-content: center; gap: .25rem;}
    .hero-wrp > span{ flex-direction: column; align-items: center; gap: .5rem;}
    h1{
        font-size: 3rem;
        line-height: normal; 
    }
    h2{
        font-size: 2.5rem;
        font-weight: 600;
        line-height: normal;  
    }
    h3{
        color: #C8A283;
        font-size: 2rem;
        font-style: normal;
        font-weight: 700;
        line-height: normal; 
    }
    .hero-card-title,
    h4{
        font-size: 1.1875rem;
        font-weight: 800;
        line-height: normal; 
    }
    .detail-blog-text ol, .detail-career-content ul, .detail-blog-text ul, .footer-right > h4, .detail-wrp-section ul li,
    p{
        font-size: 0.875rem;
        font-weight: 400;
    }
    small{
        font-size: 0.75rem;
        font-weight: 400;
    }
    .detail-career-content h3{ font-size: 20px;}
    .hero .container::before{ left: 0;}
    .personal-card{ aspect-ratio: 1/1;}
    .btn{ padding: 10px 16px ;}
    .about-video span::before{ width: 52px; height: 52px;}
    .about-video:hover span::before{ width: 60px; height: 60px;}
    .contact-banner-content,
    .hero-content{ gap: 1.5rem;}
    .detail-blog-text,
    .hero-wrp{ gap: 1rem;}
    .hero-video{ margin-top: 1rem;}
    .about, .services, .media, .offices, .personal, .branches, .values, .awards, .detail-service, .career, .blog, .blog-detail-img, .why-us, .career-info, .error-page, .detail-lawyer, .other-lawyers, .contact, .contact-banner, .detail-branch, .corporate-lawyer, .corporate,
    .related-comment{ padding: 30px 0;}
    .detail-career,
    .detail-blog{ padding: 0 0 30px;}
    .banner{ padding: 30px 0.75rem 30px;}
    .why-us-wrp,
    .section-header{ gap: 0.5rem;}
    .hero::before{ width: 500px; height: 500px;}
    .main-wrp::before{ left: -8rem;}
    .awards .container, .branches .container, .breadcrumb-3 .container, .breadcrumb-2 .container, .career .container, .offices .container, .other-lawyers .container, .detail-lawyer .container, .contact .container, .corporate-lawyer .container,
    .values .container{ gap: 1.5rem;}
    .service-nav, .value-card, .career-card, .blog-nav, .why-us-card, .career-info-detail, .detail-blog-text blockquote, .contact-banner-container, .contact-form, .branch-card-1, .branch-card-2, .corporate-card,
    #heroSlider, .about-banner, .services-card, .personal-card-content, .banner .container{ padding: 1.75rem;}
    .offices-content, .services-card, .services-card span, .detail-card, .detail-service-wrp, .detail-blog-content, .detail-blog-similiar, .detail-career-wrp, .value-card, specialization-card,
    .about .container, .services .container, .media .container, .personal .container, .hero .container{ gap: 1.5rem;}
    .splide__arrow svg{ height: 1rem; width: 1rem;}
    #mediaSlider2 .splide__arrow, #mediaSlider .splide__arrow, #commentSlider .splide__arrow,
    #servicesSlider .splide__arrow{ width: 42px; height: 42px;}
    .hero, .breadcrumb-2, .breadcrumb, .breadcrumb-3{ margin-top: 2rem;}
    .detail-blog-similiar span{ gap: 1rem;}
    .detail-career-wrp h2{ margin-bottom: 30px;}
    .detail-career-content{ gap: 1rem;}
    .career-card-info, .why-us-card,
    .career-card-type{ align-items: center;}
    .why-us-card,
    .career-card{ text-align: center;}
    .why-us-card{ justify-content: center;}
    .upper-header{ padding: 0;}
    .header .navbar{ padding: 0.75rem;}
    #headerLanguageDropdown .dropdown-menu{ padding: .5rem 1rem;}   
    .breadcrumb-2-content h1{ font-size: 2.25rem; line-height: 2.75rem;}
    #servicesSlider .splide__track{ clip-path: inset(-100vw -100vw -100vw -100vw); overflow: visible;}
    .banner-item .banner-item-number{ order: 1;}
    .banner-item span img{ order: 0;}
    .offices-content a, .offices-content .row{ order: 1 !important;}
    .map-img{ order: 0 !important;}
    .banner-item span{ flex-direction: column;}
    .onAir{ color: var(--white); padding: .5rem 0; font-size: 1rem;}
    .footer-right-left{ flex-direction: row; justify-content: space-between;}
    .footer-right-center, .footer-right-right,
    .footer-right-left-top, .footer-right-left-bottom{ gap: 10px;}
    .footer-right-left-top{text-align: start;}
    .footer-right-center{ text-align: start;}
    .footer-right-center-wrp{ align-items: start;}
    .btn-footer{ padding: 10px 0;}
    .footer-right-left-bottom{ align-items: end;}
    .footer-right-right{ text-align: end;}
    .footer-left{ padding: 30px 0;}
    .footer-right{ padding: 0 0 30px;}
    .other-lawyers-image{ max-width: 160px;}
    .branch-content{ gap: 20px;}
    
}
@media (max-width: 575px){


    .award-card-img {
  width: 200px;
  height: auto;
  max-height: 75px;
  aspect-ratio: unset; /* môže kolidovať na mobiloch */
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
    .hero-wrp span{align-items: center;} 
    .rating-wrp > *{ height: 40px; width: fit-content;}
    #bannerSlider .splide__slide{ display: flex !important; justify-content: center; align-items: center;}
    .banner-item{ align-items: center; text-align: center; justify-content: center;}  
    .banner .container{ overflow: hidden;}
    #branchesSlider .splide__track, #awardsSlider, .splide__track, #valuesSlider .splide__track, #careerSlider .splide__track, #branchesSlider2 .splide__track, #valuesSlider2 .splide__track,
    #bannerSlider .splide__track{clip-path: inset(-100vw -100vw -100vw -100vw); overflow: visible;} 
    #servicesSlider .splide__slide{ opacity: 1;}
    .media-card-2,
    .section-header h2 span{ font-size: 1.75rem;}
    .media-card{ aspect-ratio: 4/5; width: 100%;}
    .personal-card{ aspect-ratio: 4/5;}
    .footer-content{ gap: 0.5rem;}
    .footer-cop, .footer-madeby{ text-align: center;}
    #servicesSlider .splide__arrow--next{ right: 0; top: 100%;}
    #servicesSlider .splide__arrow--prev{ left: 0; top: 100%;}
    #mediaSlider2 .splide__arrow--prev,
    #mediaSlider .splide__arrow--prev{ left: 0;}
    #mediaSlider2 .splide__arrow--next,
    #mediaSlider .splide__arrow--next{ right: 0;}
    .hero .container{
        justify-content: flex-end;
    }
    h1{
        font-size: 2.25rem;
        line-height: normal; 
    }
    .banner-item-number,
    h2{
        font-size: 1.5rem;
        font-weight: 600;
        line-height: normal;  
    }
    h3{
        color: #C8A283;
        font-size: 1.25rem;
        font-style: normal;
        font-weight: 700;
        line-height: normal; 
    }
    .hero-card-title,
    h4{
        font-size: 1rem;
        font-weight: 800;
        line-height: normal; 
    }
    p{
        font-size: 0.875rem;
        font-weight: 400;
    }
    small{
        font-size: 0.75rem;
        font-weight: 400;
    }
    .career-info-detail{ align-items: center; text-align: center;}
    .detail-career-content h3{ font-size: 18px;}
    .detail-blog-text ol li{ margin: .5rem 0;}
    .detail-card, .service-nav, .value-card, .career-card, .blog-nav, .why-us-card, .career-info-detail, .detail-blog-text blockquote, .specialization-card, .contact-banner-container, .contact-form, .branch-card-1, .branch-card-2, .corporate-card,
    #heroSlider, .about-banner, .services-card, .personal-card-content, .banner .container{ padding: 1.25rem;}
    .offices-content, .services-card, .services-card span, .detail-service-wrp, .breadcrumb-3 .container, .breadcrumb-2 .container,  .offices .container, .contact .container, .corporate-lawyer .container,
    .detail-blog-content, .detail-blog-similiar, .career .container, .detail-career-wrp, .error-page-wrp, .value-card, .other-lawyers .container, .detail-lawyer .container, .contact-banner-content,
    .about .container, .services .container, .media .container, .personal .container, .hero .container{ gap: 1.25rem;}
    .media-card small{ font-size: 0.5rem; padding: 6px 12px;}
    .media-card-content h4{ font-size: 0.75rem;}
    .detail-blog-text, .detail-career-content, 
    .why-us-wrp span{ gap: 0.5rem;}
    .detail-career-wrp h2{ margin-bottom: 20px;}
    .value-card, .award-card,
    .offices-card{ align-items: center; text-align: center;}
    .value-card-top{
        align-items: center !important;
    }
    .breadcrumb-2-content h1{ font-size: 1.75rem; line-height: 2rem;}
    .error-page-wrp h1{ font-size: 2rem; line-height: 2.25rem;}
    .footer-img img{ max-height: 150px;}
    .navbar-collapse{ padding: 7rem 1.5rem 2rem 1.5rem !important;}
    .about-video span::before{ width: 42px; height: 42px;}
    .offices-content > .row > :first-child{ padding-right: .25rem;}
    .offices-content > .row > :nth-child(2){ padding-left: .25rem;}
    .offices-content > .row > :last-child{ margin-top: .5rem;}
    #servicesSlider .splide__pagination{ bottom: -1.5rem; gap: .25rem;}
    #servicesSlider .splide__pagination__page.is-active{ background: var(--primary-color); width: 1rem; border-radius: 24px;}
    #servicesSlider .splide__pagination__page{ background: var(--white); transition: all 0.3s ease; }
    .navbar .container{ padding: 0;}
    .footer-right-left{ flex-direction: column;}
    .footer-right-center, .footer-right-right,
    .footer-right-left-top{ text-align: center;}
    .footer-right-center-wrp,
    .footer-right-left-bottom{ align-items: center;}
    .footer-bottom,
    .footer-left{ padding: 20px 0;}
    .footer-right{ padding: 0 0 20px;}
    .contact-wrp{ gap: 0; justify-content: space-around;}
    .contact-card-icon{ padding: 40px 0;}
    .branch-card-2{flex-direction: column;}
    .corporate-lawyer-content{ gap: 20px;}
}