@media only screen and (max-width: 630px) {
    .logo {
        width: 74px;
    }
    .se-header-icon-group a:hover,
    .mySlides a:hover,
    .container a:hover,
    .se-footer a:hover {
        filter: brightness(90%);
        transition: 0.3s;
    }
    .se-header,
    .se-footer{
        display: none !important;
    }
    .hamburger {
        width: 40px;
    }
    .top-menu,
    .top,
    .socials,
    .redbut,
    .img-l,
    .whitebut-d,
    .ccww{
        display: none;
    }
    .ccfk,
    .ccfb,
    .ccww-s,
    .contact{
        margin-top: 20px;  
    }
    .language-icon-link {
        color: #B2B5B7;
        font-weight: 800;
        font-size: 22px;
    }
    .top-menu-container {
        display: flex;
        justify-content: space-around;
        align-items: center;
        margin: 2%;
    }
    body {
        margin: 0;
    }
    h1, h2, h3, p, a {
        font-family: "Inter", sans-serif;
        font-optical-sizing: auto;
        text-decoration: none;
    }
    img {
        width: 100%;
    }
    .container {
        margin-left: 4%;
        margin-right: 4%;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .container p {
        width: 96%;
        color: #6C7176;
    }
    p {
        color: #6C7176;
        font-size: 14px;
    }
    h1, h2 {
        color: #484848;
    }
    h3 {
        color: #AD2B39;
        margin-bottom: auto;
    }
    .naslov2{
        color: #DDDDDD;
    }
    hr {
        border: 2px solid #AD2B39;
        border-radius: 10px;
        width: 100%;
        margin-top: 3%;
        margin-bottom: 3%;
    }
    .redbut-s{
        background-color: #AD2B39;
        padding: 20px;
        border-radius: 15px;
        border: 15px;
        margin-top: 10px;
        margin-bottom: 20px;
        color: white;
        text-align: center;
        font-weight: 600 !important;
        width: max-content;
    }
    .redbut-s a {
        text-decoration: none;
        color: #FFFFFF;
    }
    
    /*TRANSLATING MODULE*/
    .dot {
        display: list-item;
        margin: 1em;
    }

    .taibox {
        background-color: #F1F1F1;
        padding: 4%;
        border-radius: 10px;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        margin-top: 20px;
    }  
    .toppart{
        display: flex;
        flex-direction: row;
        vertical-align: top;
        align-items: center;
        justify-content: center;
    }
    .toppart video{
        filter: brightness(80%);
    }
    .mySlides h3,
    .mySlides p{
        color: #FFFFFF;
    }
    .slider-text{
        display: flex;
        flex-direction: column;
        align-items: center;
        position: absolute;
        border-radius: 45px;
        color: white;
        display: none;
        text-align: center;
        padding: 5px;
        width: 300px;
    }
    .buttons {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
    .btn-l{
        left: 10px;
    }
    .btn-r{
    	right: 10px;
    }
    .slider-button{
        background: rgba(169, 169, 169, 0);
        border: none;
        cursor: pointer;
    }
    .slider-button img{
        width: 20px;
        height:  auto;
    }
    .slider-button:active{
        opacity: 0.7
    }
    .slider-active{
        display:flex;
    }
    #slider-button-left{
        left: 1rem;
    }
    #slider-button-right{
        right: 1rem;
    }
    .intro{
        font-weight: 300;
        color: #6c7176;
    }
    /*SERVICES*/
    .toppic{
        display: none;
    }
    .toppic-s{
        display: flex;
        flex-direction: column;
    }
    .toppic-s-card{
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        gap: 20px;
    }
    .toppic-s-card > a > img{
        width: fit-content;
    }
    .toppic-s-card-text{
        display: flex;
        flex-direction: column;
        max-width: 300px;
    }
    .red-p{
        font-weight: 700;
        color: #ad2b39;
        margin-top: auto;
    }
    .gray-p{
        font-weight: 300;
        color: #6c7176;
        margin-top: 0;
        font-size: 14px;
    }
    .box{
        text-decoration: none !important;
        display: flex;
        background-color: #ad2b39;
        padding: 24px;
        border-radius: 15px;
        border: 15px;
        margin: 20px;
        color: white;
        text-align: center;
        font-weight: 600 !important;
        align-items: center;
        justify-content: center;
    }
    .nodeco{
        text-decoration: none;
    }
    .about{
        background-color: #212225;
        color: white;
        display: flex;
        flex-direction: column;
        border-radius: 10px;
        align-items: center;
    }
    .about img{
        margin: 4%;
        max-width: 360px;
    }
    .about-text{
        margin: 4%;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .about-text p{
        color: #DDDDDD;
    }
    .education{
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-left: 4%;
        margin-right: 4%;
    }
    .edutop{
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        width: 100%;
    }
    .textphoto{
        display: flex;
        flex-direction: column-reverse;
    }
    .ccfk{
        background-color: #212225;
        color: white;
        display: flex;
        flex-direction: column;
        border-radius: 10px;
        align-items: center;
        padding-bottom: 4%;

    }
    .ccfk-toptext{
        margin-left: 4%;
        margin-right: 4%;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .ccfk-toptext p{
        color: #DDDDDD;
    }
    .ccfk-top{
        display: flex;
        flex-direction: column;
    }
    .ccfk img{
        margin-top: 20px;
        max-width: 360px;
    }
    .whitebut{
        background-color: #FFFFFF;
        width: fit-content;
        border-radius: 15px;
        border: 15px;
        padding: 20px;
        margin-top: 10px;
        color: #212225;
        margin-bottom: 20px;
        text-align: center;
        text-decoration: none;
        font-weight: 600 !important;
    }
    .ccfb{
        display: flex;
        flex-direction: column;
        margin-left: 4%;
        margin-right: 4%;
    }
    .ccfb-top{
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .ccft{
        display: flex;
        flex-direction: column;
        margin-left: 4%;
        margin-right: 4%;
        align-items: center;
    }
    .ccft-top{
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }
    .ccww-s{
        background-color: #212225;
        display: flex;
        flex-direction: column;
        border-radius: 10px;
        align-items: center;
        padding-left: 4%;
        padding-right: 4%;
        padding-bottom: 4%;
    }
    .ccww-s p{
        color: #DDDDDD;
    }
    .ccww-text{
        margin-left: 4%;
        margin-right: 4%;
    }
    .ccww-top{
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .ccww-top h1{
        margin-left: 5%;
    }
    .ccww-bot{
        display: flex;
        flex-direction: column;
    }
    .ccww-bot img{
        margin-bottom: 5%;
    }
    .tai, .bc{
        margin-left: 5%;
        margin-right: 5%;
    }
    .mySlides-bottom{
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 8%;
        text-align: center;
    }
    .review-text{
        color: #6c7176;
        font-style: italic;
        font-size: 18px;
        font-weight: 600;
    }
    .author{
      color: #AD2B39;
    }
    .contact{
        display: flex;
        flex-direction: column;
        gap: 20px;
    }
    .contact-left{
        display: flex;
        flex-direction: column;
        background-color: #ad2b39;
        padding: 30px;
        border-radius: 15px;
        text-align: center;
    }
    .contact-left p{
        color: #DDDDDD;  
    }
    .w-text{
        color: #FFFFFF;
        font-weight: 800;
    } 
    .se-footer-s{
        margin-left: 4%;
        margin-right: 4%;
    }
    .se-footer-s--info{
        display: flex;
        align-items: center;
    }
    .se-logo--footer-s{
        width: 92px;
    }
    .se-footer-icon-group{
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        margin-top: 50px;
    }
    .se-footer-language-list{
        height: auto !important;
        margin: 0 !important;
        padding: 16px;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #AD2B39;
        border-radius: 10px;
        color: #fff;
    }
    .se-footer-icon-group{
        display: flex;
        justify-content: center;
    }  
    
    .card-box{
        margin: 20px;
        display: flex;
        flex-direction: column;
    }
    * {
        padding: 0;
        box-sizing: border-box;
    }

    body {
        font-family: "Poppins", sans-serif;
    }

    .container {
        max-width: 1050px;
        width: 90%;
        margin: auto;
    }

    .navbar {
        width: 100%;
        box-shadow: 0 1px 4px rgb(146 161 176 / 15%);
        height: 84px;
        padding-top: 10px;
    }

    .nav-container {
        position: relative;
        height: 80px;
        width: 100%;
        display: flex;
        align-items: center;
    }

    .navbar .menu-items {
        display: flex;
    }

    .navbar .nav-container li {
        list-style: none;
    }

    .navbar .nav-container a {
        text-decoration: none;
        color: #707070;
        font-weight: 500;
        font-size: 18px;
        padding: 0.7rem;
    }

    .navbar .nav-container a:hover{
          font-weight: bolder;
    }

    .nav-container {
        display: flex;
        position: relative;
        height: 60px;
    }

    .nav-container .checkbox {
        position: absolute;
        display: block;
        height: 32px;
        width: 32px;
        top: 20px;
        left: 20px;
        z-index: 5;
        opacity: 0;
        cursor: pointer;
    }

    .nav-container .hamburger-lines {
        display: block;
        height: 26px;
        width: 32px;
        position: absolute;
        top: 17px;
        left: 20px;
        z-index: 2;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    .nav-container .hamburger-lines .line {
        display: block;
        height: 4px;
        width: 100%;
        border-radius: 10px;
        background: #0e2431;
    }

    .nav-container .hamburger-lines .line1 {
        transform-origin: 0% 0%;
        transition: transform 0.4s ease-in-out;
    }

    .nav-container .hamburger-lines .line2 {
        transition: transform 0.2s ease-in-out;
    }

    .nav-container .hamburger-lines .line3 {
        transform-origin: 0% 100%;
        transition: transform 0.4s ease-in-out;
    }

    .navbar .menu-items {
        box-shadow: inset 0 0 2000px rgba(255, 255, 255, .5);
        padding-bottom: 20px;
        width: 100%;
        transform: translate(-150%);
        display: flex;
        flex-direction: column;
        transition: transform 0.5s ease-in-out;
        text-align: center;
        background-color: #FFF;
        position: absolute;
        z-index: 4;
        top: 70px;
        overflow: hidden;
    }

    .navbar .menu-items li {
        margin-bottom: 1.2rem;
        font-size: 1.5rem;
        font-weight: 500;
    }

    .logo {
        position: absolute;
        top: 5px
        font-size: 1.2rem;
        color: #0e2431;
        width: 74px;
    }

    .nav-container input[type="checkbox"]:checked ~ .menu-items {
        transform: translateX(0);
    }

    .nav-container input[type="checkbox"]:checked ~ .hamburger-lines .line1 {
        transform: rotate(45deg);
    }

    .nav-container input[type="checkbox"]:checked ~ .hamburger-lines .line2 {
        transform: scaleY(0);
    }

    .nav-container input[type="checkbox"]:checked ~ .hamburger-lines .line3 {
        transform: rotate(-45deg);
    }

    .nav-container input[type="checkbox"]:checked ~ .logo{
        display: none;
    }
    iframe {
        max-width: 100%;
        height: auto;
    }
}

@media only screen and (max-width: 720px) {
    .toppic {
        display: flex;
        flex-direction: row;
        text-align: center;
        align-items: flex-start;
        width: 80%;
    }
}

@media only screen and (min-width: 631px and max-width: 720px) {
    .top {
        display: flex;
        flex-direction: column !important;
        justify-content: center;
        gap: 50px;
        margin-top: 30px;
        align-items: center;
    }
}

@media only screen and (min-width: 720px) {
    .top{
        display: flex;
        flex-direction: row;
        justify-content: center;
        gap:50px;
        margin-top: 30px;
    }
}

@media only screen and (max-width: 912px) {
    .about{
        display: flex;
        align-items: center;
        flex-direction: column;
    }
    .about img .img-l{
        display: none;
    }
}