@font-face {
    font-family: 'Lato';
    font-style: normal;
    font-weight: 400;
    src: url(https://fonts.gstatic.com/s/lato/v17/S6uyw4BMUTPHjxAwWCWtFCfQ7A.woff) format('woff');
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
    font-family: 'Lato';
    font-style: normal;
    font-weight: 400;
    src: url(https://fonts.gstatic.com/s/lato/v17/S6uyw4BMUTPHjx4wWCWtFCc.woff) format('woff');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
    font-family: 'Lato';
    font-style: normal;
    font-weight: 700;
    src: url(https://fonts.gstatic.com/s/lato/v17/S6u9w4BMUTPHh6UVSwaPHw3q5d0N7w.woff) format('woff');
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
    font-family: 'Lato';
    font-style: normal;
    font-weight: 700;
    src: url(https://fonts.gstatic.com/s/lato/v17/S6u9w4BMUTPHh6UVSwiPHw3q5d0.woff) format('woff');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 400;
    src: url(https://fonts.gstatic.com/s/montserrat/v15/JTUSjIg1_i6t8kCHKm459WRhzSTh89ZNpQ.woff) format('woff');
    unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

/* cyrillic */
@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 400;
    src: url(https://fonts.gstatic.com/s/montserrat/v15/JTUSjIg1_i6t8kCHKm459W1hzSTh89ZNpQ.woff) format('woff');
    unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* vietnamese */
@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 400;
    src: url(https://fonts.gstatic.com/s/montserrat/v15/JTUSjIg1_i6t8kCHKm459WZhzSTh89ZNpQ.woff) format('woff');
    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}

/* latin-ext */
@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 400;
    src: url(https://fonts.gstatic.com/s/montserrat/v15/JTUSjIg1_i6t8kCHKm459WdhzSTh89ZNpQ.woff) format('woff');
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 400;
    src: url(https://fonts.gstatic.com/s/montserrat/v15/JTUSjIg1_i6t8kCHKm459WlhzSTh89Y.woff) format('woff');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* cyrillic-ext */
@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 700;
    src: url(https://fonts.gstatic.com/s/montserrat/v15/JTURjIg1_i6t8kCHKm45_dJE3gTD-Px3rCubqg.woff) format('woff');
    unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

/* cyrillic */
@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 700;
    src: url(https://fonts.gstatic.com/s/montserrat/v15/JTURjIg1_i6t8kCHKm45_dJE3g3D-Px3rCubqg.woff) format('woff');
    unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* vietnamese */
@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 700;
    src: url(https://fonts.gstatic.com/s/montserrat/v15/JTURjIg1_i6t8kCHKm45_dJE3gbD-Px3rCubqg.woff) format('woff');
    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}

/* latin-ext */
@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 700;
    src: url(https://fonts.gstatic.com/s/montserrat/v15/JTURjIg1_i6t8kCHKm45_dJE3gfD-Px3rCubqg.woff) format('woff');
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 700;
    src: url(https://fonts.gstatic.com/s/montserrat/v15/JTURjIg1_i6t8kCHKm45_dJE3gnD-Px3rCs.woff) format('woff');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

* {
    margin: 0;
    text-align: center;
}

.main {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    height: fit-content;
}

.main h1 {
    padding: 20px;
    width: 100%;
    color: rgb(40, 47, 60);;
    font-size: 110px;
    font-family: Montserrat;
    font-weight: 700;
    line-height: 110px;
    letter-spacing: 0px;
    font-style: normal;
}

.container {
    display: block;
    margin: 30px 50px;
    background-color: #f1f1f1;
    border: 1px solid black;
    border-radius: 30px;
    min-height: 330px;
    max-width: 300px;
    transition: transform 0.5s;
}

.container:hover {
    cursor: pointer;
}

.container img {
    width: 100%;
    background-color: #f1f1f1;
    border-radius: 30px;
    height: 130px;
}

.container h2 {
    background-color: #f1f1f1;
    color: #333c4e;
    font-family: Montserrat;
    font-weight: 700;
    letter-spacing: 0px;
    font-style: normal;
    margin-top: 5px;
    margin-bottom: 10px;
}

.container__tech {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    background-color: #f1f1f1;
    text-align: center;
    flex-wrap: wrap;
}

.container__tech p {
    line-height: 2;
    margin: 5px;
    padding: 0px 8px;
    font-family: Lato;
    font-weight: 400;
    letter-spacing: 0px;
    font-style: normal;
    background-color: #5f6166;
    color: #7e8890;
    border-radius: 20px;
    transition: color 0.5s;
}

.container__tech i {
    background-color: #5f6166;
    padding-right: 5px;
    height: max-content;
}

.container__tech p:hover {
    color: #f4ad24;
}

.container__button{
    font-family: Lato;
    font-weight: 600;
    letter-spacing: 0px;
    font-style: normal;
    padding-top: 20px;
    background-color: transparent;
    border: 1px solid #f1f1f1;
    transition: color 0.5s;
}

.container__button:hover{
    cursor: pointer;
    color: #f4ad24;
}

.container__button:focus{
    outline: none;
}

.container__button i{
    background-color: transparent;
    padding-left: 5px;
}

.container__dropdown {
    display: none;
    background-color:transparent;
}

.container__dropdown a{
    display: block;
    text-decoration:none;
    background-color: transparent; 
    color: #7e8890;
    transition: color 0.5s;
}

.container__dropdown a:hover{
    color: #f4ad24;
}

.show {
    display: block;
}