/* Font Import */
@import url("https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500&display=swap"); /* Using a url */
/* Font Import */

/* Default CSS */
* {
    font-family: 'Barlow', sans-serif !important;
    text-decoration: none;
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    outline: none;
}

/* Default CSS */
.container {width: 100%;margin-right: auto;margin-left: auto;max-width: 100%;padding: 0}
#web header{position: sticky; top: 0; width: 100%; z-index: 99; height: 100px; margin-bottom: 50px;  display: flex; background-color: #d0261b;}
#web.android header { background-color: #000; }
#web header .logo { width: 275px; }
#web header .header-content{width: 100%; max-width: 1167px; margin: 0 auto; padding: 0 25px; display: flex; justify-content: space-between;}
#web header .header-content .external-link img{margin-right:10px;}
#web header .header-content .external-link{display: flex;align-items: center; font-size: 16px; font-weight: 600; text-align: right; color: #fff;}
#web .content{max-width: 1167px;margin: 0 auto; width: 100%; padding: 0 25px; }
#web.android .content { margin-bottom: 30px; }
#web h1 { color: #000; font-size: 45px; line-height: 1.2; font-weight: bold; text-align: center; margin-bottom: 70px; }
.bigSection { display: flex; align-items: center; }
.bigSection .text { width: calc(100% - 467px); padding-right: 98px; font-size: 24px; color: #000; line-height: 1.42;  } 
.bigSection .text strong { font-weight: 600; }
.bigSection img { max-width: 467px; width: 100%; } 

.mobileApps { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: 1fr; gap: 40px 40px; grid-template-areas: ". . ."; margin-top: 50px; }
.mobileApps a { height: 56px; background-color: #d0261b; color: #fff; display: flex; align-items: center; padding: 0 20px; border-radius: 10px; }
.mobileApps img { width: 26px; } 
.mobileApps span { font-size: 17px; font-weight: 300; line-height: 1; display: flex; flex-direction: column; margin-left: 10px; } 
.mobileApps strong { font-weight: 600; font-size: 21px; } 

.installSection { border-top: 1px solid #d8d8d8; margin-top: 50px; padding-top: 50px; }
.installSection h2 { color: #d0261b; font-size: 22px; line-height: 1.49; font-weight: bold; margin-bottom: 16px; } 
.installSection .stepContainer { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: 1fr; gap: 40px 40px; grid-auto-flow: row; grid-template-areas: ". . ."; padding: 0px; }
.installSection .step { font-size: 16px; line-height: 1.67; color: #000;display: flex; flex-direction: column; align-items: center; justify-content: space-between; position: relative; }
.installSection .step:before { content: attr(data-step); width: 22px; height: 22px; background: #d0261b; color: #fff; display: flex; align-items: center; justify-content: center; border-radius: 50%; font-weight: bold; position: absolute; left: -31px; top: 7px; }
.installSection .step strong { font-weight: bold; }
.installSection .step img { max-width: 302px; margin-top: 30px; }


#web footer { 
    position: fixed; bottom: 0;
    margin-top: 50px; background:#d0261b;width: 100%;font-size: 14px;line-height: normal;text-align: center;color: #fff; height: 56px; display: flex; align-items: center; justify-content: center;}

.downloadBarWrapper { display: flex; align-items: center; justify-content: center; height: 74px; background-color: #000; position: sticky; bottom: 0; }
.downloadBarWrapper a { height: 40px; max-width: 286px; background-color: #d0261b; color: #fff; display: flex; align-items: center; padding: 0 20px; border-radius: 4px; }
.downloadBarWrapper img { width: 25px; } 
.downloadBarWrapper span { font-size: 14px; font-weight: bold; line-height: normal; margin-left: 10px; } 

@media only screen and (max-width: 767px) {
    #web header { height: 60px; margin-bottom: 15px; }
    #web.android header { height: 50px; }
    #web header .logo { width: 117px; }
    #web.android header .header-content .external-link { font-size: 16px; font-weight: bold; } 
    #web header .header-content .external-link { font-size: 11px; } 
    #web header .header-content .external-link img { width: 15px;height: auto; margin-right: 5px; } 
    #web header .header-content,
    #web .content { padding: 0 15px; }
    #web h1 { font-size: 24px; line-height: normal; margin-bottom: 15px; }

    .bigSection { flex-direction: column-reverse; }
    .bigSection img { max-width: 230px; }
    .bigSection .text { width: 100%; padding: 0 5px; font-size: 13px; line-height: 1.54; margin-top: 30px; }

    .mobileApps { grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(1, 1fr); gap: 0 10px; grid-template-areas: ". ."; margin-top: 40px; } 
    /* .mobileApps { grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(2, 1fr); gap: 10px 10px; grid-template-areas: ". ." ". ."; margin-top: 40px; }  */
    .mobileApps a { height: 50px; padding: 0 10px; border-radius: 6px; margin-top: 10px;}
    .mobileApps img { width: 16px; }
    .mobileApps span { font-size: 14px; line-height: 1.2; }
    .mobileApps strong { font-size: 14px; }
    .mobileApps div { display: none; }

    .installSection { margin-top: 30px; padding-top: 20px; }
    .installSection h2 { font-size: 16px; }
    .installSection .stepContainer { display: block; }
    .installSection .step { font-size: 14px; line-height: 1.43; margin-bottom: 30px; }
    .installSection .step:last-child { margin-bottom: 0; }

    #web footer { font-size: 12px; }
}

@media only screen and (min-width: 768px) { 
    #web h1 br { display: none; } 
} 

@media only screen and (min-width: 768px) and (max-width: 1023px) { 

    #web header .logo { width: 180px; }

    .bigSection .text { width: calc(100% - 300px); padding-right: 50px; }
    .bigSection img { max-width: 300px; } 

    .mobileApps { gap: 0 15px;grid-template-columns: repeat(3, 1fr) }
    /* .mobileApps { gap: 15px 15px; } */
    .mobileApps span { font-size: 13px; }
    .mobileApps strong { font-size: 15px; }
    .mobileApps div { display: none; }

    .installSection .step { line-height: 1.53; }
    .installSection .step img { width: 100%; }
}