/* fonts: */

  @font-face {
    font-family: 'PeydaWeb-Bold';
    src: url("./assets/fonts/PeydaWeb-Bold.woff2") format("woff2");
  }
  
  @font-face {
    font-family: 'PeydaWeb-Medium';
    src: url("./assets/fonts/PeydaWeb-Medium.woff2") format("woff2");
  }

  @font-face {
    font-family: 'PeydaWeb-Bold';
    src: url("./assets/fonts/PeydaWeb-Bold.woff") format("woff");
  }

  @font-face {
    font-family: 'PeydaWeb-Medium';
    src: url("./assets/fonts/PeydaWeb-Medium.woff") format("woff");
  }

  @font-face {
    font-family: 'PeydaWeb-Bold';
    src: url("./assets/fonts/PeydaWeb-Bold.eot") format("eot");
  }

  @font-face {
    font-family: 'PeydaWeb-Medium';
    src: url("./assets/fonts/PeydaWeb-Medium.eot") format("eot");
  }

  :root {
    --navy: #09161d;
    --white: #fff;
    --background: #070e12;
    --primary: #a3c7d9;
    --secondary: #96a3b2;
    --shadow: #eaedf2;
    --border: #070e12;
    --cardborder: #091a23;
    --rightborder: #12212a;
    --green: #65cda7;
    --grass: #7db247;
    --red: #ff4c5b;
    --tomato: #ff8a9d;
    --orange: #ff988a;
    --lemon: #ffea8a;
    --blue: #00aaff;
    --skyblue: #59c8ff;
    --hover: #41b5f0;
    --purple: #b68aff;
  }


* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'PeydaWeb-Medium';
}

body {
    background-color: var(--background);
    color: var(--primary)
}

.container {
    max-width: 1170px;
    width: 100%;
    margin: 0 auto 0 auto;
    padding-inline: 20px;
}

.logo-container {
    margin-top: 7px;
    display: flex;
    justify-content: center;
}

.mobile-logo {
    display: none;
}

.title {
    font: 28px 'PeydaWeb-Bold';
}

.border-line {
    display: none;
}

.card-section {
    margin-top: 30px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.card {
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    background-color: var(--navy);
    height: 100px;
    border: 2px solid var(--cardborder);
    border-radius: 10px;
    padding: 0 46px 0 30px;
    gap: 20px;
}

.card-right-side {
    width: 45%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.download-part {
    
    display: flex;
    align-items: center;   
    justify-content: space-between;
}

.download {
    width: 170px;
    font: bold 21px 'PeydaWeb-Bold';
}

.format {
    font-size: 14px;
    color: var(--red);
}

.file-size {
    color: var(--secondary);
    font-size: 36px;
    font-weight: bold;
}

.file-size span {
    font-size: 21px;
}

.download-link {
    width: 241px;
    height: 51px;      
}

.download-link a {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--blue);
    border-radius: 7px;
    width: 100%;
    height: 100%;
    color: var(--white);
    font: bold 24px 'PeydaWeb-Bold';
    text-decoration: none;    
}

.download-link a:hover {
    background-color: var(--hover);
    transition: all .3s ease-in;
}

.card-one {
    border-right: 12px solid var(--green); 
}

.card-two { 
    border-right: 12px solid var(--skyblue);
}

.card-three {
    border-right: 12px solid var(--purple);
}

.card-four {
    border-right: 12px solid var(--tomato);
}

.card-five {
    border-right: 12px solid var(--orange);
}

.card-six {
    border-right: 12px solid var(--lemon);
}


.file-center-format {
    color: var(--grass);
    font-size: 14px;
}

.faq-section {
    margin: 60px 0 60px 0;
}

.second-title {
    font: 28px 'PeydaWeb-Bold';
    margin-bottom: 24px;
}

.question-card {
    background-color: var(--navy);
    padding: 28px 27px 32px 34px;
    border: 2px solid var(--cardborder);
    border-radius: 10px;
    display: flex;
    gap: 20px;
    margin-top: 17px;
    
}

.question-card p {
    font-size: 16px;
    color: var(--secondary);
}

.question-title {
    font: bold 21px 'PeydaWeb-Bold';
    margin-bottom: 10px; 
}

.card-number p {
    font: bold 36px 'PeydaWeb-Bold';
    color: var(--secondary);
    display: inline-block;
}


/* responsive: */

@media(max-width: 996px) {
    .container {
        padding-inline: 30px;
    }
    .desktop-logo {
        display: none;
    }
    
    .mobile-logo {
        display: inline;
    }

    .logo-container {
        margin-top: 15px;
        display: block;
        margin-bottom: 90px;
    }

    .title {
        font: bold 48px 'PeydaWeb-Bold';
    }

    .card {
        height: 120px; 
        padding-top: 2px; 
        border-radius: 17px;
    }

    .card-right-side {
        width: 400px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 10px;
    }

    .download-part {
        flex-direction: column;
        align-items: flex-start;   
    }

    .download {
        font: bold 36px 'PeydaWeb-Bold';
        width: max-content;
    }

    .format {
        font-size: 24px;
        padding-right: 0;
    }

    .download-link {
        width: 200px;
        height: 65px;     
    }

    .download-link a {
        border-radius: 15px; 
        font: 30px 'PeydaWeb-Bold';
    }

    .file-center-format {
        font-size: 24px;
        padding-right: 0;
    }

    .second-title {
        font: bold 48px 'PeydaWeb-Bold';
        margin-bottom: 35px;
    }

    .question-card {
        background-color: transparent;
        padding: 28px 0px 32px 34px;
        border: none;
        border-radius: 0;
        gap: 20px;
    }

    .card-number {
        display: none;
    }

    .card-one {
        border-right: 18px solid var(--green); 
    }

    .card-two { 
        border-right: 18px solid var(--skyblue);
    }
    .card-three {
        border-right: 18px solid var(--purple);
    }

    .question-title {
        font: bold 36px 'PeydaWeb-Bold'; 
    }

    .card-context div {
        margin-top: 50px;
    }
    
    .card-context div p {
        font-size: 30px;
        border-right: 3px solid var(--rightborder);
        padding-right: 40px;
    }

}

@media (max-width: 767px) {
    .title {
        font: bold 40px 'PeydaWeb-Bold';
    }

    .second-title {
        font: bold 40px 'PeydaWeb-Bold';
        margin-bottom: 25px;
    }

    .card {
        padding: 0 20px 0 20px;
        
    }

    .card-right-side {
        width: 300px;
    }
    .download {
        font: bold 22px 'PeydaWeb-Bold';
    }

    .download-link {
        width: 180px;
        height: 60px;     
    }

    .format  {
        font-size: 18px;
        padding-right: 0;
    }

    .file-center-format {
        font-size: 18px;
    }

    .file-size {
        color: var(--secondary);
        font-size: 28px;
        font-weight: 700;
    }
    
    .file-size span {
        font-size: 16px;
    }

    .download-link a {
        font: 24px 'PeydaWeb-Bold';
    }

    .card-context div {
        margin-top: 35px;
    }

    .card-context div p {
        font-size: 24px;
    }

    .question-title {
        font: bold 28px 'PeydaWeb-Bold'; 
    }   

}

@media (max-width: 480px) {
    .container {
        padding-inline: 20px;
    }

    .card {
        margin: auto;
        height: 110px;  
        padding: 0 10px 0 10px;
    }
    .title {
        font: bold 15.99pt 'PeydaWeb-Bold';
    }
    
    .second-title {
        font: bold 15.99pt 'PeydaWeb-Bold';
    }

    .download {
        font: bold 15.99pt 'PeydaWeb-Bold';
    }

    .download-link {
        width: 110px;   
    }

    .download-link a {
        font: 22px 'PeydaWeb-Bold';
    }

    .format  {
        font-size: 10.66pt;
    }

    .file-center-format {
        font-size: 10.66pt;
    }

    .file-size {
        font-size: 22.66pt; 
    }
    
    .file-size span {
        font-size: 13.33pt;
    }

    .question-title {
        font: bold 15.99pt 'PeydaWeb-Bold'; 
    }  
    
    .card-right-side {
        width: 250px;
    }

    .card-context div p {
        font-size: 13.33pt;
        padding-right: 30px;
    }

}

@media (max-width: 398px) {
    .download {
        font: bold 12.99pt 'PeydaWeb-Bold';
    }
    .card {
        width: 320px;
    }

    .card-right-side {
        width: 220px;
    }

    .file-size {
        font-size: 20.66pt; 
    }
    
    .file-size span {
        font-size: 12.33pt;
    }

    .download-link {
        width: 90px;   
    }

    .download-link a {
        font: 20px 'PeydaWeb-Bold';
    }
    
}