:root{
    --tranlatera-purple: #3a2f7e;
    --gray: #a2a3bb;
    --light-purple: #9395d3;
    --lighter-purple:#b3b7ee;
    --white:#fbf9ff;
}

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


html{
    scroll-behavior:smooth;
}


a{
    text-decoration: underline;
    color:#000000;
}

ul{
    list-style-type: none;
}




.logo img {
    display: block;
}

.container{
    max-width:1800px;
    margin:0 auto;
}

/* Navigation */

.navbar{
    background-color: var(--light-purple);
    position: sticky;
    top:0;
    z-index: 100;
    position: sticky;
}

.navbar .container{
    justify-content: space-between;
}

.navbar .container ul{
    list-style-type: none;
}

.navbar .container ul li{
    margin: 20px;
}

.navbar ul li a{
    text-decoration: none;
    color: var(--white);
}



/* Logo */

.logo{
    width: 100px;
    height: 100px;
}

.logo img{
    width: 100%;
    height: 100%;
}

/* Hamburger menu */

.hamburger-menu-button{
    width: 50px;
    height: 50px;
    display: none;
    background-image:url('../media/hamburger_menu_closed.png');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.hamburger-menu-button.opened{
    background-image:url('../media/hamburger_menu_opened.jpg');
}

.hamburger-menu{
    background-color:var(--light-purple);
    height: 40vh;
    width: 100%;
    padding:20px;
    position:absolute;
    top:-400px;
    transition:1s ease-in-out;
    z-index: -1;
}

.hamburger-menu.opened{
    top:80px;
}

.hamburger-menu ul li{
    font-size: 200%;
    margin:20px;
    border-bottom: 2px solid var(--white);
}

.hamburger-menu nav ul :first-child{
    margin-top:0;
}


/* Main */

.main{
    height: 70vh;
    background-image: url('../media/naslovna_slika.jpg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}



/* About me */

#about-me{
    margin-top:150px;
}

#about-me .container{
    justify-content: space-around;
}

#about-me .container p{
    max-width: 40%;
}

#about-me .container p,
#about-me .container img{
    margin:20px;
}

/* Contact info */

#contact{
    margin-top:100px;
}

#contact .container{
    margin-top:20px;
}

/* Services */

#services{
    margin-top:150px;
}

#croatian-lessons{
    grid-area: croatian-lessons;
}

#english-lessons{
    grid-area: english-lessons;
}


#court-interpreter{
    grid-area: court-interpreter;
}

#ielts{
    grid-area: ielts;
}

#toefl{
    grid-area: toefl;
}

#subtitling{
    grid-area: subtitling;
}

#services .container{
    margin-top:50px;
    grid-template-areas: 'croatian-lessons english-lessons'
    'subtitling court-interpreter'
    'ielts toefl';
    gap: 20px;
}

#services .container h1{
    margin-top:20px 0;
}



/* IELTS */

#ielts-main{
    background-image: url('../media/ielts_logo.png');
    background-size: contain;
    background-position:center;
    background-repeat: no-repeat;
}


#ielts-general-info h3,
#ielts-general-info ul,
#ielts-general-info ol{
    margin:30px;
}


#ielts-band-scores-tables{
    margin-top:100px;
}

#ielts-band-scores-tables h3,
.paragraph {
    margin:50px 0;
}

#ielts-resources{
    margin-top:100px;
}



#ielts-listening-scores-table{
    grid-template-rows:repeat(11,1fr);
    grid-template-columns:repeat(2,1fr);
}

#ielts-reading-scores-a-table,
#ielts-reading-scores-g-table{
    grid-template-rows:repeat(14,1fr);
    grid-template-columns:repeat(2,1fr);
}

#ielts-writing-scores-table{
    grid-template-rows: repeat(5,1fr);
    grid-template-columns: repeat(2,1fr);
}

#ielts-speaking-scores-table{
    grid-template-rows: repeat(4,1fr);
    grid-template-columns: repeat(2,1fr);
}

.table-heading{
    background-color:var(--light-purple);
    padding:15px;
    margin:2px;
}

.table-content{
    background-color:var(--lighter-purple);
    padding:15px;
    margin:2px;
}



#ielts-bs-example-listening-h{
    grid-area: ielts-bs-example-listening-h;
}

#ielts-bs-example-reading-h{
    grid-area: ielts-bs-example-reading-h;
}

#ielts-bs-example-writing-h{
    grid-area: ielts-bs-example-writing-h;
}

#ielts-bs-example-speaking-h{
    grid-area: ielts-bs-example-speaking-h;
}

#ielts-bs-example-overall-h{
    grid-area: ielts-bs-example-overall-h;
}

/* grades */

#ielts-bs-example-listening-grade{
    grid-area: ielts-bs-example-listening-grade;
}

#ielts-bs-example-reading-grade{
    grid-area: ielts-bs-example-reading-grade;
}

#ielts-bs-example-writing-grade{
    grid-area: ielts-bs-example-writing-grade;
}

#ielts-bs-example-speaking-grade{
    grid-area: ielts-bs-example-speaking-grade;
}

#ielts-bs-example-overall-grade{
    grid-area: ielts-bs-example-overall-grade;
}

#band-scores-example-table{
    grid-template-areas: 'ielts-bs-example-listening-h ielts-bs-example-reading-h ielts-bs-example-writing-h ielts-bs-example-speaking-h ielts-bs-example-overall-h'
    'ielts-bs-example-listening-grade ielts-bs-example-reading-grade ielts-bs-example-writing-grade ielts-bs-example-speaking-grade ielts-bs-example-overall-grade';
}

/* TOEFL */

#toefl-main{
    background-image: url('../media/toefl_logo.jpg');
    background-size:cover;
    background-position:center;
    background-repeat: no-repeat;
}

#toefl-general-info{
    margin-top:50px;
}

#toefl-new p{
    margin:20px;

}

#toefl-structure-table{
    grid-template-columns: repeat(4,1fr);
    grid-template-rows: repeat(4,1fr);
    font-size:120%;
}

#toefl-scores-table{
    grid-template-rows: repeat(4,1fr);
    grid-template-columns: repeat(2,1fr);
}


#toefl-tables{
    margin-top:100px;
}

/* Croatian */

#croatian-main{
    background-image:url('../media/croatian_background.jpg');
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
}

.buy{
    display: inline-block;
    background-color:var(--tranlatera-purple);
    color:var(--white);
    margin:30px;
    padding:20px;
    border-radius:10px;
    text-decoration:none;
}

.croatian-book{
    margin:30px;
}

.croatian-book h2{
    margin:50px;
}

#croatian-general-info{
    margin-top:200px;
}

#croatian-books{
    margin-top:100px;
}

#croatian-resources{
    margin-top:100px;
}

/* Court interpreter */

#interpreter-main{
    background-image: url("../media/court_interpreter.jpg");
    
}

#interpreter-general-info{
    margin-top:50px;

}

#interpreter-general-info .container{
    margin-top:50px;
}

#interpreter-general-info .container h3, ul li{
    margin: 20px 0;
}


#interpreter-pricing{
    margin-top:50px;
}

#interpreter-pricing p{
    margin:10px 0;
}

/* Subtitling */

#subtitling-general-info,
#subtitling-general-info h3,
#subtitling-general-info .container{
    margin-top:50px;
}

#subtitling-tools-clients{
    grid-template-rows:repeat(3,1fr);
    grid-template-columns:repeat(2,1fr);
    margin-top:50px;
}




/* English lessons */

#english-lessons-main{
    background-image:url('../media/english.jpg');
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
}

#english-general-info{
    margin-top:50px;
}

#english-general-info .container{
    margin-top:50px;
}

#english-general-info .container .card{
    margin-top:50px;
}

#english-general-info .container .card h2,a{
    margin:5px;
}


/* Pricelist */

#pricelist-table{
    grid-template-columns:repeat(2,1fr);
}

/* Testimonials */

#testimonials{
    margin-top:100px;
}

#testimonials .grid{
    gap:20px;
}


/* Q&A form */

.question-form.card{
    height: auto;
}

.question-form input, textarea{
    width:100%;
    margin:10px 0;
    background:transparent;
    border:none;
    border-bottom: 1px solid #ffffff;
    color:#ffffff;
}

.question-form input[type="submit"]{
    border:none;
    cursor:pointer;
}

.question-form input::placeholder, 
textarea::placeholder{
    color:#ffffff;
}

.question-form input:focus,
textarea:focus{
    outline:none;
}

.question-form .input{
    width:100%;
}

.question-form .input .error-message{
    color:red;
    margin:0;
    padding:0;
}







/* Media queries */

@media(max-width:474px){
    .navbar .container ul{
        display: none;
    }

    .hamburger-menu-button{
        display: block;
    }

    /* subtitling mobile table */

    #subtitling-tools-h{
        grid-area: subtitling-tools-h;
    }

    #subtitling-clients-h{
        grid-area: subtitling-clients-h;
    }

    #ooona{
        grid-area: ooona;
    }

    #subtitle-edit{
        grid-area: subtitle-edit;
    }

    #gts-pro{
        grid-area:gts-pro;
    }

    #mediatranslations{
        grid-area: mediatranslations;
    }

    #subnet-plus{
        grid-area: subnet-plus;
    }

    #sis{
        grid-area:sis;
    }

    #subtitling-tools-clients{
        grid-template-areas:'subtitling-tools-h subtitling-tools-h'
                            'ooona ooona'
                            'subtitle-edit subtitle-edit'
                            'gts-pro gts-pro'
                            'subtitling-clients-h subtitling-clients-h'
                            'mediatranslations mediatranslations'
                            'subnet-plus subnet-plus'
                            'sis sis';
    }

    #subtitling-tools-clients div{
        text-align:center;
    }

    #pricelist-table div{
        text-align:center;
    }
  
}

@media(max-width:1019px){
    #services .container{
        grid-template-areas: 'croatian-lessons'
        'english-lessons'
        'french-lessons'
        'court-interpreter'
        'ielts'
        'toefl'
        'subtitling';
        gap:50px;
    }
}

@media(max-width:499px){
    img{
        width: 80%;
        height:auto;
    }

    #about-me .container p {
        margin-top:100px;
        max-width: 100%;
    }

    
}

@media(max-width:681px){
    #about-me .container p{
        margin-top:40px;
        max-width: 80%;
    }
}

@media(max-width:457px){
    #band-scores-example-table{
        grid-template-areas: 'ielts-bs-example-listening-h'
        'ielts-bs-example-listening-grade'
        'ielts-bs-example-reading-h'
        'ielts-bs-example-reading-grade'
        'ielts-bs-example-writing-h'
        'ielts-bs-example-writing-grade'
        'ielts-bs-example-speaking-h'
        'ielts-bs-example-speaking-grade'
        'ielts-bs-example-overall-h'
        'ielts-bs-example-overall-grade';
    }

    #toefl-reading,
    #toefl-listening,
    #toefl-speaking,
    #toefl-writing{
        background-color:var(--light-purple);
    }

    #toefl-structure-table .table-heading{
        display:none;
    }

     #toefl-reading { grid-area: toefl-reading; }
    #toefl-reading-et { grid-area: toefl-reading-et; }
    #toefl-reading-questions { grid-area: toefl-reading-questions; }
    #toefl-reading-description { grid-area: toefl-reading-description; }

    #toefl-listening { grid-area: toefl-listening; }
    #toefl-listening-et { grid-area: toefl-listening-et; }
    #toefl-listening-questions { grid-area: toefl-listening-questions; }
    #toefl-listening-description { grid-area: toefl-listening-description; }

    #toefl-speaking { grid-area: toefl-speaking; }
    #toefl-speaking-et { grid-area: toefl-speaking-et; }
    #toefl-speaking-questions { grid-area: toefl-speaking-questions; }
    #toefl-speaking-description { grid-area: toefl-speaking-description; }

    #toefl-writing { grid-area: toefl-writing; }
    #toefl-writing-et { grid-area: toefl-writing-et; }
    #toefl-writing-questions { grid-area: toefl-writing-questions; }
    #toefl-writing-description { grid-area: toefl-writing-description; }

    #toefl-structure-table{
        grid-template-columns: 1fr;
        grid-template-areas:
        "toefl-reading"
        "toefl-reading-et"
        "toefl-reading-questions"
        "toefl-reading-description"

        "toefl-listening"
        "toefl-listening-et"
        "toefl-listening-questions"
        "toefl-listening-description"

        "toefl-speaking"
        "toefl-speaking-et"
        "toefl-speaking-questions"
        "toefl-speaking-description"

        "toefl-writing"
        "toefl-writing-et"
        "toefl-writing-questions"
        "toefl-writing-description";
    } 


}

@media(min-width:2560px){
    .hamburger-menu{
        top:-600px;
    }

    body{
        font-size:1.5rem;
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6{
        font-size:1.8rem;
    }

    html{
        zoom: 1.2;
    }
}

/* Footer */

footer{
    background-color: var(--light-purple);
    height: 100px;
    margin-top:150px;
}

footer .container{
    justify-content: space-around;
    height: 100%;
}

footer .container .social-icon{
    width: 50px;
    height: 50px;
}

footer .container .social-icon img{
    width: 100%;
    height: 100%;
}

/* Utilites */

.flex{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

.flex-column{
    flex-direction: column;
}


.grid{
    display: grid;
}

.text-center{
    text-align:center;
}

.card{
    padding:10px;
    margin:10px;
    background-color:var(--tranlatera-purple);
    color:var(--white);
    width: 340px;
    height: 340px;
    border-radius:10px;
}

.popup-message{
    color:#ffffff;
    background-color:var(--light-purple);
    padding:10px;
    margin:10px;
    width:100%;
    
}



.card p{
    margin-top: 30px;
}

.card a,
#ielts-resources .card a{
    color:var(--white);
}

.light-card{
    padding:10px;
    margin:10px;
    background-color:var(--light-purple);
    color:var(--white);
    width: 320px;
    height: 340px;
    border-radius:10px;
}

.table{
    margin-top:100px;
    padding:20px;
}

.testimonials-author{
    font-weight:bold;
    margin-top:20px;
}

.button{
    display:inline-block;
    padding:13px 14px;
    margin:20px;
    font-size:16px;
    background-color:var(--tranlatera-purple);
    color:#ffffff;
    border-radius:8px;
    text-decoration:none;
}

#blank{
    display:none;
}