@import url('https://fonts.googleapis.com/css2?family=Lato&display=swap');

body{
    margin: 0;
    padding: 0;
    font-family: 'Lato', sans-serif;
    background-color: #fafafa;
    padding-top: 0;
}

nav{
    width: 100%;
    background-image: linear-gradient(45deg, #534abd, #0054a6);
    position: fixed;
    top: 0;
    z-index: 99999;
}

.navContainer{
    width: 97%;
    margin: 0 auto;
    
   
}


.navRow{
    display: flex;
    flex-direction: row;

}


.navCol{
    display: flex;
    width: 20%;
    align-items: center;
    min-height: 97px;
   
}

.navCol img{
    width: 174px;
    margin-left: 15px;
}

.navSplit{
    width: 100%;
    display: flex;
    flex-direction: row-reverse;
    align-items:center;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

.navIcons a{
    color: white;
    text-decoration: none;
}

.navIcons i{
    font-size: 1.3rem !important;
}

.navButton button{
    border-radius: 20px !important;
    color: #0054a6 !important;
    font-size: 0.75rem;
    font-weight: 500; 
    color: white;
    padding: 3px 30px;
    font-family: 'Lato', sans-serif;
    border: none;
    text-transform: uppercase;
    line-height: 1.5;
    font-variant: small-caps;
    cursor: pointer;
}

.navButton button:hover{
    background-color: black;
    color: white !important;
    font-weight: 500; 
    
}

.navLine{
    
    
    display: flex;
    gap: 35px;

}


.navIcons{
    width: 100% !important;
    width: fit-content;
    display: flex;
    gap: 10px;
    color: white;
    align-items: center;
}

.navMenu ul{
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    
}



.navMenu ul li a{
    font-family: 'Lato', sans-serif;
    color: white;
    text-transform: uppercase;
    font-size: 0.75rem;
    text-decoration: none;
    padding: 15px 10px;
   
}

.navMenu ul li:nth-child(1)::before{
    content: "";
}

.navMenu ul li:last-child::before{
    content: "";
}

.navMenu ul li:last-child{
    color: white;
    font-size: 1.3rem;
}

.navMenu ul li:before{
    content: "|";
    color: white;
 
}


/*Main container css*/

.mainContainer{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    position: relative !important;
    height: 100vh;
    overflow: hidden;
  
}

.mainImage{
    width: 100%;
}

.auroraBanner{
    width: 100%;
}

.title{
    text-transform: uppercase;
    color: #0054a6;
    font-size: 1.2rem;
    font-weight: 700;
    margin-top: 30px;
    margin-bottom: 30px;
    text-align: center;
}

.container{
    width: 1280px;
    margin: 0 auto;
}

@keyframes scroll {
	0% { transform: translateX(0); }
	100% { transform: translateX(calc(-173px * 6.5))}
}

.ourPlatforms{
    display: flex;
    gap: 25px;
    overflow: hidden;
    margin-bottom: 30px;
    padding-bottom: 15px;
    box-sizing: border-box;
    position: relative;
    width: 1280px;
   
    
}

.ourPlatforms::before{
    background: linear-gradient(to right,  rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);
    content: "";
    height: 138px;
    position: absolute;
    width: 200px;
    z-index: 2;

}

.ourPlatforms::after{
    background: linear-gradient(to right,  rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);
    content: "";
    height: 138px;
    position: absolute;
    width: 200px;
    z-index: 2;

}

.ourPlatforms::before{
    content: "";
    top: 0;
    left: 0;
}

.ourPlatforms::after{
    top: 0;
    right: 0;
    transform: rotateZ(180deg);
}

.ourPlatforms::-webkit-scrollbar{
    background-color: white;
   height: 10px;
   
}

.ourPlatforms::-webkit-scrollbar-track{
    border-radius: 5px;
    box-shadow: inset 0px 0px 4px rgba(0, 0, 0, 0.205);
}

.ourPlatforms::-webkit-scrollbar-thumb{
    background-color: #0054a6;
    border-radius: 10px;
}

.ourPlatforms::-webkit-scrollbar-thumb:hover{
    background-color: #5693cf;
    border-radius: 10px;
}


.ourPlatforms img{
    width: 173px;
    cursor: pointer;
}

.slider-track {
    animation: scroll 40s  alternate infinite;
    display: flex;
    width: calc(173px * 13);
    gap: 45px;
}


footer{
    height: 100%;
    width: 100%;
    background-color: #fafafa;

}


.footerContainer{
    width: 1280px;
    margin: 0 auto;
   
    display: flex;
    flex-direction: row;
    gap: 30px;
    
}

.footerRow{
    display: flex;
    padding: 24px 15px; 
    gap: 8px;
    justify-content: space-around;
    width: 100%;
    align-items: center;
}


.footerCol{
    display: flex;
    flex-direction: row;
    gap: 32px;
    width: 50%;
   
}

.subCol{
    display: flex;
    flex-direction: row;
    gap: 64px;
    align-items: center;
}

.footerContainer .footerCol:nth-child(2){
    gap: 5px;
}

.subCol .footerList:nth-child(2){
    line-height: 2;
}

.footerList{
    font-size: 0.75em;
    list-style: none;
    padding: 0;
    margin: 0;
    line-height: 1.5;
    display: flex;
    gap: 24px;
}

.footerList li a{
    text-decoration: none;
    color: black;
}

.footerTitle{
    font-size: 0.75em;
    padding: 0;
    margin: 0;
}

.footerCol span{
    font-size: 0.75em;
}

.footerCol form{
    display: flex;
    flex-wrap: wrap;
    flex-direction: row !important;
}

.footerCol form .form-control{
    display: flex;
    flex-wrap: nowrap;
    gap: 16px;
    margin: 5px 0px;

}

.footerSubmit{
    margin-top: 5px;
    color: #fff;
    border: none;
    padding: 8px 55px;
    background-color: #00a8e4;
    width: 48%;
    border-radius: 30px;

}

.footerSubmit:hover{
    background-color: #0082b1;
}

.footerCol form .form-control input{
     padding: 12px 24px;
     font-size: 0.75em;
     line-height: 1.5;
     width: 100%;
     background-clip: padding-box;
     border: 1px solid #ced4da;
}



.RDlogo{
    width: 137px;
    margin-left: 60px;
}

.copyright{
    margin: 0 auto;
    width: 1200px;
    font-size: 11px;
    border-top: 1px solid #ddd;
    padding-top: 10px;
    margin-top: 55px;
    padding-bottom: 10px;
}

.navMenu ul li .dropdown{
    padding: 0 ;
    margin: 0;
    position: absolute;
    display: none;
   
    background-color: #333;
    list-style: none;
   
}

.navMenu ul .drop:hover .dropdown{
    display: block;
}

.navMenu ul li .dropdown li a{
    padding: 12px 10px;
    display: block;
    min-width: 270px;
    color: white;
   
}


.navMenu ul li .dropdown li a:hover{
    background-color: #003366;
}


.mbNavBar{
    display: none;
}

.mbImage{
    display: none;
}

.auroraBannerMb{
    display: none;
}

#termsTrigger{
    width: 100%;
}


/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
    nav{
        display: none;
    }

    .auroraBannerMb{
       display: block;
       width: 100%;
      
    }

    .auroraBanner{
        display: none;
    }

 
    .mbNavBar{
        display: block;
        width: 100%;
        background-color: #003366;
        position: fixed;
        top: 0;
        z-index: 9999;
        
    }

    #menuTrigger{
        font-size: 1.2em;
        color: #003366;
        background: none;
        border: none;
    }

    .container{
        width: 100%;
        margin: 0 auto;
    }

    .ourPlatforms{
        display: flex;
        gap: 25px;
        overflow: hidden;
        margin-bottom: 30px;
        padding-bottom: 15px;
        box-sizing: border-box;
        position: relative;
        width: 100%;
       
        
    }

    .footerContainer{
        width: 100%;
        margin: 0 auto;
    
        display: flex;
        flex-direction: column;
        gap: 30px;
        
    }
    
    
    .footerCol{
        display: flex;
        flex-direction: column;
        
        width: 100%;
        padding: 32px;
        box-sizing: border-box;
    }

    .copyright{
        margin: 0 auto;
        width: 97%;
        font-size: 11px;
        border-top: 1px solid #ddd;
        padding-top: 10px;
        margin-top: 55px;
        padding-bottom: 10px;
        text-align: center;
    }

    .subCol{
        text-align: center;
        display: flex;
        flex-direction: column;
        gap: 30px;
    }

    .footerContainer .footerCol:nth-child(2){
        display: none;
    }

    .RDlogo{
        margin: 0;
        margin: 0 auto;
    }

    .footerLogo{
        width: 150px;
        margin: 0 auto;
    }

    .ourPlatforms::before{
        background: linear-gradient(to right,  rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);
        content: "";
        height: 138px;
        position: absolute;
        width: 50px;
        z-index: 2;
    
    }
    
    .ourPlatforms::after{
        background: linear-gradient(to right,  rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);
        content: "";
        height: 138px;
        position: absolute;
        width: 50px;
        z-index: 2;
    
    }

    .mainImage{
        display: none;
    }

    .mbImage{
        display: block;
        width: 100%;
    }

    .mbNvaContainer{
        width: 100%;
        display: flex;
        flex-direction: column;
        
        box-sizing: border-box;
    }

    .mbRow{
        display: flex;
        width: 100%;
        flex-direction: column;


    }

    .mbRow .mbCol:nth-child(1){
        background-color: white;
        
        width: 100vw;
        background-color: white;
        z-index: 9999;
        box-sizing: border-box;
    }
    
  
    .mbCol{
        display: flex;
        flex-direction: row;
        padding: 15px 10px;
        justify-content: end;
    }

   .mbCol .navIcons{
       padding: 0px 10px;
   }

    .mbCol .menu{
        width: 10%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #0054a6;
    }

    .mbCol .logo{
        width: 80%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .mbCol .logo img{
        width: 90px;
    }

    .mbCol .search{
        width: 10%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #0054a6;
    }

    .mbMenu{
        position: absolute;
        top: 58px;
        background-color: #fff;
        width: 100%;
        padding: 0px 15px;
        box-sizing: border-box;
        left: calc(100% + -200vw);
        z-index: 9999;
        
    }

  

   
    .mbMenu ul{
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        flex-direction: column;
    }

    .mbMenu ul li a{
        padding: 15px 18px;
        display: block;
        text-decoration: none;
        max-width: 100%;
        color: #003366;
        text-transform: uppercase;
        font-family: 'Lato', sans-serif;
        font-weight: 600;
       
    }

    .close{
        background-color: #003366;
        color: white;
        position: absolute;
        right: 0;
        border-radius: 1px;
    }

    .close a{
        padding: 25px;
        display: block;
        color: white;
        text-decoration: none;
    }
    
    .mbMenu ul li a:hover{
        background-color: #fafafa;
        color: #003366;
      
    }

    .footerRow{
        display: flex;
        padding: 24px 15px; 
        gap: 8px;
        justify-content: space-around;
        width: 100%;
        align-items: center;
        flex-direction: column;
    }

    .footerList{
        font-size: 0.75em;
        list-style: none;
        padding: 0;
        margin: 0;
        line-height: 1.5;
        display: flex;
        gap: 24px;
        flex-direction: column;
    }

   
}
/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {

    nav{
        display: none;
    }

    #menuTrigger{
        font-size: 1.2em;
        color: #003366;
        background: none;
        border: none;
    }


    body{
        padding-top: 60px;
    }
    .mbNavBar{
        display: block;
        width: 100%;
        background-color: #003366;
        
    }

    .navButton button{
        border-radius: 20px !important;
        color: #0054a6 !important;
        font-size: 0.55em !important;
        font-weight: 500; 
        color: white;
        padding: 3px 30px;
        font-family: 'Lato', sans-serif;
        border: none;
        text-transform: uppercase;
        
        font-variant: small-caps;
        cursor: pointer;
    }
    

    .container{
        width: 100%;
        margin: 0 auto;
    }

    .ourPlatforms{
        display: flex;
        gap: 25px;
        overflow: hidden;
        margin-bottom: 30px;
        padding-bottom: 15px;
        box-sizing: border-box;
        position: relative;
        width: 100%;
       
        
    }

    .footerContainer{
        width: 100%;
        margin: 0 auto;
     
        display: flex;
        flex-direction: column;
        gap: 30px;
        
    }
    
    
    .footerCol{
        display: flex;
        flex-direction: column;
        
        width: 100%;
        padding: 32px;
        box-sizing: border-box;
    }

    .copyright{
        margin: 0 auto;
        width: 97%;
        font-size: 11px;
        border-top: 1px solid #ddd;
        padding-top: 10px;
        margin-top: 55px;
        padding-bottom: 10px;
        text-align: center;
    }

    .subCol{
        text-align: center;
        display: flex;
        flex-direction: column;
        gap: 30px;
    }

    .footerContainer .footerCol:nth-child(2){
        display: none;
    }

    .RDlogo{
        margin: 0;
        margin: 0 auto;
    }

    .footerLogo{
        width: 150px;
        margin: 0 auto;
    }

    .ourPlatforms::before{
        background: linear-gradient(to right,  rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);
        content: "";
        height: 138px;
        position: absolute;
        width: 50px;
        z-index: 2;
    
    }
    
    .ourPlatforms::after{
        background: linear-gradient(to right,  rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);
        content: "";
        height: 138px;
        position: absolute;
        width: 50px;
        z-index: 2;
    
    }

    .mainImage{
        display: none;
    }

    .mbImage{
        display: block;
        width: 100%;
        
    }

    .mbNvaContainer{
        width: 100%;
        display: flex;
        flex-direction: column;
        
        box-sizing: border-box;
    }

    .mbRow{
        display: flex;
        width: 100%;
        flex-direction: column;


    }

    .mbRow .mbCol:nth-child(1){
        background-color: white;
        position: fixed;
        top: 0;
        width: 100vw;
        background-color: white;
        z-index: 9999;
        box-sizing: border-box;
    }
    
  
    .mbCol{
        display: flex;
        flex-direction: row;
        padding: 15px 10px;
    }

    .navIcons{
        width: 100%;
    }

   .mbCol .navIcons{
       padding: 0px 10px;
   }

    .mbCol .menu{
        width: 10%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #0054a6;
    }

    .mbCol .logo{
        width: 80%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .mbCol .logo img{
        width: 90px;
    }

    .mbCol .search{
        width: 10%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #0054a6;
    }

    .mbMenu{
        position: absolute;
        top: 58px;
        background-color: #fff;
        
        width: 100%;
        padding: 0px 15px;
        box-sizing: border-box;
        z-index: 9999;
        left: calc(100% + -200vw);
    }

    
    

    .mbMenu ul{
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        flex-direction: column;
    }

    .mbMenu ul li a{
        padding: 15px 18px;
        display: block;
        text-decoration: none;
        max-width: 100%;
        color: #003366;
        text-transform: uppercase;
        font-family: 'Lato', sans-serif;
        font-weight: 600;
       
    }

    .close{
        background-color: #003366;
        color: white;
        position: absolute;
        right: 0;
        border-radius: 1px;
    }

    .close a{
        padding: 25px;
        display: block;
        color: white;
        text-decoration: none;
    }
    
    .mbMenu ul li a:hover{
        background-color: #fafafa;
        color: #003366;
      
    }
}
/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {

    .navIcons {
        width: 100%;
        display: flex;
        gap: 10px;
        color: white;
        justify-content: space-around;
    }

  
}
/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {




    body{
        padding: 0;
    }

    .navMenu{
        font-size: 0.55em;
    }

    .mbNavBar{
        display: none;
    }
    
    .mbImage{
        display: none;
    }
    
    nav{
        display: block;
        width: 100%;
        background-color: #0054a6;
    }
    
    .navContainer{
        width: 97%;
        margin: 0 auto;
        
       
    }
    
    
    .navRow{
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;

    }
    
    
    .navCol{
        display: flex;
        width: 10%;
        align-items: center;
        min-height: 100px;
       
    }

    .navRow .navCol:nth-child(1){
        min-height: 55px;
        position: absolute;
    }
    
    .navCol img{
        width: 100%;
        margin-left: 15px;
    }
    
    .navSplit{
        width: 100%;
        display: flex;
        flex-direction: row-reverse;
        align-items:center;
        justify-content: center;
        gap: 25px;
    }
    
    .navIcons a{
        color: white;
        text-decoration: none;
    }
    
    .navIcons i{
        font-size: 1.3rem !important;
    }
    
    .navButton button{
        border-radius: 20px !important;
        color: #0054a6 !important;
        font-size: 0.75rem;
        font-weight: 500; 
        color: white;
        padding: 3px 30px;
        font-family: 'Lato', sans-serif;
        border: none;
        text-transform: uppercase;
        line-height: 1.5;
        font-variant: small-caps;
        cursor: pointer;
    }
    
    .navButton button:hover{
        background-color: black;
        color: white !important;
        font-weight: 500; 
        
    }
    
    .navLine{
        
        
        display: flex;
        gap: 35px;
    
    }
    
    
    .navIcons{
        width: fit-content;
        display: flex;
        gap: 10px;
        color: white;
        align-items: center;
    }
    
    .navMenu ul{
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        
    }
    
    
    
    .navMenu ul li a{
        font-family: 'Lato', sans-serif;
        color: white;
        text-transform: uppercase;
        font-size: 0.60rem;
        text-decoration: none;
        padding: 15px 10px;
       
    }
    
    .navMenu ul li:nth-child(1)::before{
        content: "";
    }
    
    .navMenu ul li:last-child::before{
        content: "";
    }
    
    .navMenu ul li:last-child{
        color: white;
        font-size: 1.3rem;
    }
    
    .navMenu ul li:before{
        content: "|";
        color: white;
     
    }
    
    
    /*Main container css*/
    
    .mainContainer{
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
       
    }
    
    .mainImage{
        width: 100%;
        display: block;
    }
    
    .title{
        text-transform: uppercase;
        color: #0054a6;
        font-size: 1.2rem;
        font-weight: 700;
        margin-top: 30px;
        margin-bottom: 30px;
        text-align: center;
    }
    
    .container{
        width: 100%;
        margin: 0 auto;
    }
    
    @keyframes scroll {
        0% { transform: translateX(0); }
        100% { transform: translateX(calc(-173px * 6.5))}
    }
    
    .ourPlatforms{
        display: flex;
        gap: 25px;
        overflow: hidden;
        margin-bottom: 30px;
        padding-bottom: 15px;
        box-sizing: border-box;
        position: relative;
        width: 100%;
       
        
    }
    
    .ourPlatforms::before{
        background: linear-gradient(to right,  rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);
        content: "";
        height: 138px;
        position: absolute;
        width: 200px;
        z-index: 2;
    
    }
    
    .ourPlatforms::after{
        background: linear-gradient(to right,  rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);
        content: "";
        height: 138px;
        position: absolute;
        width: 200px;
        z-index: 2;
    
    }
    
    .ourPlatforms::before{
        content: "";
        top: 0;
        left: 0;
    }
    
    .ourPlatforms::after{
        top: 0;
        right: 0;
        transform: rotateZ(180deg);
    }
    
    .ourPlatforms::-webkit-scrollbar{
        background-color: white;
       height: 10px;
       
    }
    
    .ourPlatforms::-webkit-scrollbar-track{
        border-radius: 5px;
        box-shadow: inset 0px 0px 4px rgba(0, 0, 0, 0.205);
    }
    
    .ourPlatforms::-webkit-scrollbar-thumb{
        background-color: #0054a6;
        border-radius: 10px;
    }
    
    .ourPlatforms::-webkit-scrollbar-thumb:hover{
        background-color: #5693cf;
        border-radius: 10px;
    }
    
    
    .ourPlatforms img{
        width: 173px;
    }
    
    .slider-track {
        animation: scroll 40s  alternate infinite;
        display: flex;
        width: calc(173px * 13);
        gap: 45px;
    }
    
    
    footer{
    
        width: 100%;
        background-color: #fafafa;
    }
    
    
    .footerContainer{
        width: 90%;
        margin: 0 auto;
       
        display: flex;
        flex-direction: row;
        gap: 30px;
        
    }
    
    
    .footerCol{
        display: flex;
        flex-direction: column;
        gap: 32px;
        width: 33.3%;
    }
    
    .subCol{
        display: flex;
        flex-direction: row;
        gap: 64px;
    }
    
    .footerContainer .footerCol:nth-child(2){
        gap: 5px;
    }
    
    .subCol .footerList:nth-child(2){
        line-height: 2;
    }
    
    .footerList{
        font-size: 0.75em;
        list-style: none;
        padding: 0;
        margin: 0;
        line-height: 1.5;
    }
    
    .footerList li a{
        text-decoration: none;
        color: black;
    }
    
    .footerTitle{
        font-size: 0.75em;
        padding: 0;
        margin: 0;
    }
    
    .footerCol span{
        font-size: 0.75em;
    }
    
    .footerCol form{
        display: flex;
        flex-wrap: wrap;
        flex-direction: column;
    }
    
    .footerCol form .form-control{
        display: flex;
        flex-wrap: nowrap;
        gap: 16px;
        margin: 5px 0px;
    
    }
    
    .footerSubmit{
        margin-top: 5px;
        color: #fff;
        border: none;
        padding: 8px 55px;
        background-color: #00a8e4;
        width: 48%;
        border-radius: 30px;
    
    }
    
    .footerSubmit:hover{
        background-color: #0082b1;
    }
    
    .footerCol form .form-control input{
         padding: 12px 24px;
         font-size: 0.75em;
         line-height: 1.5;
         width: 100%;
         background-clip: padding-box;
         border: 1px solid #ced4da;
    }

    .footerContainer .footerCol:nth-child(2){
        display: block;
    }
    
    
    
    .RDlogo{
        width: 137px;
        margin-left: 60px;
    }
    
    .copyright{
        margin: 0 auto;
        width: 95%;
        font-size: 11px;
        border-top: 1px solid #ddd;
        padding-top: 10px;
        margin-top: 55px;
        padding-bottom: 10px;
    }
    
    .navMenu ul li .dropdown{
        padding: 0 ;
        margin: 0;
        position: absolute;
        display: none;
       
        background-color: #333;
        list-style: none;
       
    }
    
    .navMenu ul .drop:hover .dropdown{
        display: block;
    }
    
    .navMenu ul li .dropdown li a{
        padding: 12px 10px;
        display: block;
        min-width: 270px;
        color: white;
       
    }
    
    
    .navMenu ul li .dropdown li a:hover{
        background-color: #003366;
    }
    
    
    .mbNavBar{
        display: none;
    }
    
    .mbImage{
        display: none;
    }

    .footerRow{
        display: flex;
        padding: 24px 15px; 
        gap: 8px;
        justify-content: space-around;
        width: 100%;
        align-items: center;
        flex-direction: column;
    }

    .footerList{
        font-size: 0.75em;
        list-style: none;
        padding: 0;
        margin: 0;
        line-height: 1.5;
        display: flex;
        gap: 24px;
        flex-direction: column;
    }
}
/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {

    body{
        padding: 0;
       
    }
    nav{
        display: block;
        width: 100%;
        background-color: #0054a6;
        position: fixed;
        top: 0;
    }
    
    .navContainer{
        width: 97%;
        margin: 0 auto;
        
       
    }
    
    
    .navRow{
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
    }
    
    
    .navCol{
        display: flex;
        width: 20%;
        align-items: center;
        min-height: 97px;
       
    }

    .navRow .navCol:nth-child(1){
        min-height: 97px;
        position: static;
    }
    
    .navCol img{
        width: 174px;
        margin-left: 15px;
    }
    
    .navSplit{
        width: 100%;
        display: flex;
        flex-direction: row-reverse;
    align-items:center;
        justify-content: center;
        gap: 15px;
    }
    
    .navIcons a{
        color: white;
        text-decoration: none;
    }
    
    .navIcons i{
        font-size: 1.3rem !important;
    }
    
    .navButton button{
        border-radius: 20px !important;
        color: #0054a6 !important;
        font-size: 0.75rem !important;
        font-weight: 500; 
        color: white;
        padding: 3px 30px;
        font-family: 'Lato', sans-serif;
        border: none;
        text-transform: uppercase;
        line-height: 1.5;
        font-variant: small-caps;
        cursor: pointer;
    }
    
    .navButton button:hover{
        background-color: black;
        color: white !important;
        font-weight: 500; 
        
    }
    
    .navLine{
        
        
        display: flex;
        gap: 35px;
    
    }
    
    
    .navIcons{
        width: fit-content;
        display: flex;
        gap: 10px;
        color: white;
        align-items: center;
    }
    
    .navMenu ul{
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        
    }

    .navMenu ul li{
        display: flex;
        align-items: center;
    }
    
    
    
    .navMenu ul li a{
        font-family: 'Lato', sans-serif;
        color: white;
        text-transform: uppercase;
        font-size: 0.75rem;
        text-decoration: none;
        padding: 15px 10px;
       
       
    }
    
    .navMenu ul li:nth-child(1)::before{
        content: "";
       
    }
    
    .navMenu ul li:last-child::before{
        content: "";
    }
    
  
    .navMenu ul li:before{
        content: "|";
        color: white;
     
    }

   
    
    
    /*Main container css*/
    
    .mainContainer{
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        position: relative;
        
    }
    
    .mainImage{
        width: 100%;
        display: block;
    }
    
    .title{
        text-transform: uppercase;
        color: #0054a6;
        font-size: 1.2rem;
        font-weight: 700;
        margin-top: 30px;
        margin-bottom: 30px;
        text-align: center;
    }
    
    .container{
         width: 1280px;
        margin: 0 auto;
    }
    
    @keyframes scroll {
        0% { transform: translateX(0); }
        100% { transform: translateX(calc(-173px * 6.5))}
    }
    
    .ourPlatforms{
        display: flex;
        gap: 25px;
        overflow: hidden;
        margin-bottom: 30px;
        padding-bottom: 15px;
        box-sizing: border-box;
        position: relative;
        width: 100%;
       
        
    }
    
    .ourPlatforms::before{
        background: linear-gradient(to right,  rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);
        content: "";
        height: 138px;
        position: absolute;
        width: 200px;
        z-index: 2;
    
    }
    
    .ourPlatforms::after{
        background: linear-gradient(to right,  rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);
        content: "";
        height: 138px;
        position: absolute;
        width: 200px;
        z-index: 2;
    
    }
    
    .ourPlatforms::before{
        content: "";
        top: 0;
        left: 0;
    }
    
    .ourPlatforms::after{
        top: 0;
        right: 0;
        transform: rotateZ(180deg);
    }
    
    .ourPlatforms::-webkit-scrollbar{
        background-color: white;
       height: 10px;
       
    }
    
    .ourPlatforms::-webkit-scrollbar-track{
        border-radius: 5px;
        box-shadow: inset 0px 0px 4px rgba(0, 0, 0, 0.205);
    }
    
    .ourPlatforms::-webkit-scrollbar-thumb{
        background-color: #0054a6;
        border-radius: 10px;
    }
    
    .ourPlatforms::-webkit-scrollbar-thumb:hover{
        background-color: #5693cf;
        border-radius: 10px;
    }
    
    
    .ourPlatforms img{
        width: 173px;
    }
    
    .slider-track {
        animation: scroll 40s  alternate infinite;
        display: flex;
        width: calc(173px * 13);
        gap: 45px;
    }
    
    
    footer{
    
        width: 100%;
        background-color: #fafafa;
    }
    
    
    .footerContainer{
        width: 1280px;
        margin: 0 auto;
       
        display: flex;
        flex-direction: row;
        gap: 30px;
        
    }
    
    
    .footerCol{
        display: flex;
        flex-direction: column;
        gap: 32px;
        width: 33.3%;
    }
    
    .subCol{
        display: flex;
        flex-direction: row;
        gap: 64px;
    }
    
    .footerContainer .footerCol:nth-child(2){
        gap: 5px;
    }
    
    .subCol .footerList:nth-child(2){
        line-height: 2;
    }
    
    .footerList{
        font-size: 0.75em;
        list-style: none;
        padding: 0;
        margin: 0;
        line-height: 1.5;
    }
    
    .footerList li a{
        text-decoration: none;
        color: black;
    }
    
    .footerTitle{
        font-size: 0.75em;
        padding: 0;
        margin: 0;
    }
    
    .footerCol span{
        font-size: 0.75em;
    }
    
    .footerCol form{
        display: flex;
        flex-wrap: wrap;
        flex-direction: column;
    }
    
    .footerCol form .form-control{
        display: flex;
        flex-wrap: nowrap;
        gap: 16px;
        margin: 5px 0px;
    
    }
    
    .footerSubmit{
        margin-top: 5px;
        color: #fff;
        border: none;
        padding: 8px 55px;
        background-color: #00a8e4;
        width: 48%;
        border-radius: 30px;
    
    }
    
    .footerSubmit:hover{
        background-color: #0082b1;
    }
    
    .footerCol form .form-control input{
         padding: 12px 24px;
         font-size: 0.75em;
         line-height: 1.5;
         width: 100%;
         background-clip: padding-box;
         border: 1px solid #ced4da;
    }

    .footerContainer .footerCol:nth-child(2){
        display: block;
    }
    
    
    
    .RDlogo{
        width: 137px;
        margin-left: 60px;
    }
    
    .copyright{
        margin: 0 auto;
        width: 1200px;
        font-size: 11px;
        border-top: 1px solid #ddd;
        padding-top: 10px;
        margin-top: 55px;
        padding-bottom: 10px;
    }
    
    .navMenu ul li .dropdown{
        padding: 0 ;
        margin: 0;
        position: absolute;
        display: none;
        bottom: 0;
        background-color: #333;
        list-style: none;
       
    }
    
    .navMenu ul .drop:hover .dropdown{
        display: block;
    }
    
    .navMenu ul li .dropdown li a{
        padding: 12px 10px;
        display: block;
        min-width: 270px;
        color: white;
       
    }

    .subCol{
        text-align: left;
    }
    
    
    .navMenu ul li .dropdown li a:hover{
        background-color: #003366;
    }
    
    
    .mbNavBar{
        display: none;
    }
    
    .mbImage{
        display: none;
    }

    .footerLogo {
        width: 150px;
        margin: 0;
    }

    .footerRow{
        display: flex;
        padding: 24px 15px; 
        gap: 8px;
        justify-content: space-around;
        width: 100%;
        align-items: center;
        flex-direction: row;
   
    }

    .footerList{
        font-size: 0.75em;
        list-style: none;
        padding: 0;
        margin: 0;
        line-height: 1.5;
        display: flex;
        gap: 24px;
        flex-direction: row;
        
    }
}


.navButton{
    display: flex;
    justify-content: end;
    width: 100%;
}



/*Animations css*/

@keyframes sideOpen{
    0%{
        left: calc(100% + -200vw);
    }

    100%{
        left: calc(100% + 100);
    }
    
}

@keyframes close{
    0%{
        left: calc(100% + -200vw);
    }

    100%{
        left: calc(100% + 0w);
    }
    
}


.modalTerms{
    height: 100vh;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.644);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
}

.termBox{
    width: 100%;
    max-width: 650px;
    height: 380px;
    background-color: white;
    border-radius: 14px;
    padding:5px 14px;
    box-sizing: border-box;
}

.titleTerms{
    padding: 5px;
    display: flex;
    justify-content: space-between;
}


.titleTerms h3{
    color: #0054a6;
    padding: 0;
    margin: 0;
    padding: 10px 0px;
}

.contentTerms{
    border: 1px solid #dadada;
    height: 280px;
    border-radius: 8px;
    overflow: none;
    overflow-y: scroll;
    padding: 16px;
    box-sizing: border-box;
}

.contentTerms::-webkit-scrollbar{
    width: 8px;
    
}

.contentTerms::-webkit-scrollbar-track{
    background-color: #d3f3ff;
    border-radius: 10px;
}


.contentTerms::-webkit-scrollbar-thumb{
    background-color: #003366;
    border-radius: 8px;
}

.closeTerm{
    padding: 0px 14px;
    margin: 0;
    background-color: #003366;
    color: white;
    border: none;
    border-radius: 4px;
}

.contentTerms h1{
    font-size: 20px;
}

.contentTerms p{
    text-align: justify;
}

.modalTerms{
    display: none;
}