@font-face {
    font-family: gotham_medium;
    src: url(../fonts/Gotham-Medium.otf);
}

@font-face {
    font-family: gotham_bold;
    src: url(../fonts/Gotham-Bold.otf);
}

@media only screen and (max-width: 950px)
{
    
    .howto-wrapper
    {
        width:80% !important;
        margin: auto
    }
}

@media only screen and (max-width: 768px)
{
    .banner
    {
        width: 100% !important;
        padding: 0 !important;
        margin: auto !important;
    }

    .dark-body{
        /* background-image: linear-gradient( rgba(0, 0, 0, 0.3) 100%, rgba(0, 0, 0, 0.3)100%), url(../images/bg_mob.jpg) !important;
        background-size: cover !important; */
    }

    .body
    {
        /* background-image: url(../images/bg_mobile.jpg);  */
        padding-bottom: 60px;
    }  

    .mob
    {
        display: block !important;
    }

    .web
    {
        display: none !important;
    }

    .tab{
        width: auto !important;
    }

    .brands-container
    {
        display: grid;
        grid-template-columns: 50% 50% !important;
    }

    .video-wrapper
    {
        width: 100% !important;
        margin: auto;    
        margin-top: 20px;
    }

    .howto-wrapper
    {
        width:80% !important;
        margin: auto
    }

    .grid-container-2
    {
        display: grid;
        grid-template-columns: auto !important;
    }

    .grey-btn
    {
        margin: 10px auto !important
    }

    .title{
        margin: 30px auto !important;
    }
    
    .footer{
        width: 50% !important;
    }

    .container{
        width:90%;
        margin: auto;
    }

    .footer-img{
        width: 100% !important;
    }
    
    .footer-copyright{
        width: 100% !important;
    }

    .play-now{
        left:50% !important;
        transform: translateX(-50%) !important;
    }

    .img-btn{
        width:150px !important;
        margin:5px;
    }
    
    .cloudigo-btn{
        margin: 15px;
        width: 150px !important;
    }
    
}

@media only screen and (min-width: 769px)
{
    .web
    {
        display: block !important;
    }

    .mob
    {
        display: none !important;
    }

    
    .dark-body{
        /* background-image: linear-gradient( rgba(0, 0, 0, 0.3) 100%, rgba(0, 0, 0, 0.3)100%), url(../images/bg_web.jpg) !important;
        background-size: cover !important; */
    }

    .container{
        width:70%;
        margin: auto;
    }

    .navbar{
        margin-bottom: 50px !important;
    }


}

*{
    font-family: "gotham_medium"
}

.underline{
    text-decoration: underline;
}

.text-container{
    text-align: justify;
}

ul > li{
    list-style-type: disc !important;
}

ul{
    margin-left: 20px;
}

li{
    margin: 5px auto
}

.mob
{
    display: none;
}

.wb
{
    display: none;
}

.video-wrapper
{
    width: 100%;
    margin: auto;
    margin-top:10px;
    background-color: black;
}

.video{
    width:100%
}

.prizes{
    margin-bottom: 0 !important;
}

.howto-wrapper
{
    width:65%;
    margin: auto;
    margin-bottom: 50px;
}

/* .banner
{
    position: absolute;
    top:48%;
    left:50%;
    transform: translate(-50%, -50%)
} */

.tab >a
{
    font-family: "gotham_medium" !important;
    font-size: 20px !important;
}



.first-banner-mob
{
    width: 100%;
    margin: 0 auto;
}

.phone-image
{
    width: 90%;
    margin: 15px auto;
}

.btns-img
{
    width: 70%;
    margin: 0px auto;
}

.hiw-title
{
    width: 80%;
    margin: 15px auto;
}

.steps
{
    width: 80%;
    margin: 15px auto;
}

.text-banner
{
    width: 90%;
    margin: 15px auto;
}

.cloudigo-banner
{
    width: 60%;
    margin: 30px auto;
}

.banner-wrapper-mob
{
    text-align: center !important;
}

.brands-container
{
    display: grid;
    grid-template-columns: 33% 34% 33%;
    margin-bottom: 10px !important;
}

.grid-container-3
{
    display: grid;
    grid-template-columns: 33.3% 33.3% 33.3%;
    margin-bottom: 10px !important;
}

.brand-img-wrapper
{
    margin-top: 40px;
    text-align: center;
    transition: all .3s;
}

.brand-img-wrapper:hover{
    transform: scale(1.16) !important;
}

.brand-text-wrapper
{
    margin-top: 20px;
}
.no-margin
{
    margin: 0 !important
}

.brand-text
{
    color: white;
    font-family: "gotham_medium" !important;
    font-size: 15px;
}

.brand-img
{
    border-radius: 100%;
    height: 100px;
    width: 100px;
    margin: auto;
    background-color: transparent;
}

.brand-img-inner
{
    width: 100%;
    border-radius: 50%;
    border: 2px solid white;
}

.banner
{
    width: 100%;
    margin: auto;
    max-height: 100vh;
}

.banner-wrapper
{
    height: 100vh;
    position: relative;
}

.grid-container-2
{
    display: grid;
    grid-template-columns: 50% 50%;
}

.btn-wrapper
{
    text-align: center;
    width:100%
}

.left{
    text-align: left !important;
    width:100%
}

.modal{
    border-radius: 5px;
}


.gold-btn
{
    width: 250px;
    margin: 10px 30px;
    border:2px solid #edd949 !important;
    background-color: #edd949;
    color: black;
    font-weight: bold;
    font-size: 17px;
    padding: 10px 20px
}

.gold-btn:hover
{
    border:2px solid #edd949 !important;
    background-color: transparent !important;
    color: #edd949 !important;
}

.grey-btn
{
    width: 250px;
    margin: 10px 30px;
    border:2px solid #c5c4c4 !important;
    background-color: #c5c4c4;
    color: black;
    font-weight: bold;
    font-size: 17px;
    padding: 10px 20px
}

.grey-btn:hover
{
    border:2px solid #c5c4c4 !important;
    background-color: transparent !important;
    color: #c5c4c4 !important;
}



.grey-btn:focus
{
    border:2px solid #c5c4c4 !important;
    background-color: transparent !important;
    color: #c5c4c4 !important;
}

.tabs
{
    background-color: transparent !important;
}

.tabs > li > a
{
    color: white !important
}

.coke-font{
    font-family: "gotham_medium" !important;
}

.grey-text{
    color: #c5c4c4
}

.modal-back{
    background-color: #E61E2B;
    color:white;
    border: 2px solid #E61E2B;    
    border-radius: 30px;
    padding: 10px 30px;
}

.modal-back:hover{
    background-color: white !important;
    color:#E61E2B;
}

.title
{
    color: white !important;
    text-align: center;
    font-family: "gotham_bold" !important;
    font-weight: bold;
    margin: 50px auto;
    /* text-shadow: 5px 6px 10px rgb(0 0 0 / 75%) !important; */
}

.black-text
{
    color: black !important;
}

.indicator
{
    background-color: white !important
}


.how-to-img{
    width:100%;
    margin-bottom:10px;
    transition: all .3s;
    border:1px solid transparent;
    border-radius:10px;
}

.how-to-img:hover {
    box-shadow: 0 0 11px rgba(33,33,33,.8); 
    transform: scale(1.02);
}

.how-to-img-wrapper{
    width: 70%;
}

.footer-img{
    width: 50%;
    margin: auto;
    margin-bottom: 20px;
}

.footer-copyright{
    width: 40%;
    margin: auto;
}

.footer{
    text-align: center;
    width: 40%;
    margin: auto;
    margin-top: 50px;
    display: grid;
    margin-bottom: 50px;
}

.flex{
    display:flex
}

.img-btn{
    width:30%;
    margin:5px;
}

.cloudigo-btn{
    margin: 15px;
}

.buttons-wrapper{
    width:70% !important
}

.img-btn-wrapper{
    margin: auto;
    text-align: center;
    width: fit-content;
}

.img-btn-a{
    cursor: pointer;
}

.bold{
    font-weight: bold
}

.paragraph{
    margin-bottom:30px !important;
}

.active{
    border-bottom: 2px solid white;
}

.arrow
{
  position:fixed;
  left:25px;
  bottom:10px;
  color: white !important;
  z-index:2;
}

.red-color{
    color: #E61E2B !important;
    background-color: white !important;
}

.navbar{
    border: none !important;
    box-shadow: none !important;
    background-color: transparent;
    height:90px;
    display: flex;
    border-bottom: 2px solid #E61E2B !important;
}

.logo{
    width:70px;
    margin: 10px 30px;
}

.menu-toggle{
    margin: auto;
    margin-right: 50px;
    height: 20px;
    width: 20px;
    font-size: 20px;
    cursor: pointer;
}

.play-now{
    position: fixed;
    bottom: 20px;
    right: 20px;
    background-color: black;
    border: 2px solid black;
    color: white;
    font-weight: bold;
    cursor: pointer;
    font-size: 20px;
    padding: 15px 30px
}

.play-now:focus{
    background-color: white;
    border: 2px solid black;
    color: black;
}

.play-now:hover{
    background-color: white; 
    border: 2px solid black;
    color: black;
}

.text-body{
    background-color: white !important;
    background-image: none !important;
}

.body {
    /* background-image: url(../images/bg_desktop.jpg); */
    background-size: cover;
    background-color: #E61E2B;
}