* {
    margin:0;
    padding:0;
    box-sizing:border-box;
    scroll-behavior:smooth;
    user-select:none;
}

#maindiv {
    width:100%;
    height:1950px;
    display:flex;
    flex-direction:column;
    align-items:center;    
    position:relative;
}
font {
    font-family:sans-serif;
}
a {
    text-decoration:none;
}

/* CLAX LOGO AND MENU ICON  - display none on large screens*/

#topdiv {
    width:100%;
    height:30px;
    display:flex;
    margin-top:15px;
}
.logoDiv {
    width:50%;
    height:100%;
    margin-left:30px;
    display:flex;
    align-items:center;
}
.fontDiv {
    width:50%;
    height:100%;
    display:flex;
    justify-content:flex-end;
    align-items:center;
    margin-right:40px;
}
.ellipsis {
    font-size:20px;
    color:rgba(0,0,0,1)
}

/* THE FUTURE IS NOW AND ZONE FOR EXCELLENCE */
.top-writeup {
    width:100%;
    height:30px;
    display:flex;
    margin-top:20px;
}
.top-writeup font {
    font-size:10px;
    font-family:sans-serif;
    color:rgba(48, 0, 75, 1);
    line-height:12px;
    font-weight:bold;
}

/* FIRST BOX - DOWNLOAD APP */
#first-top {
    width:82%;
    height:441.36px;
    background-image: radial-gradient(ellipse at bottom, rgba(84, 0, 131, 1), 
    rgba(56, 0, 88, 1), rgba(25, 0, 39, 1), rgba(20, 0, 31, 1));
    border-radius:25px;
    margin-top:10px;
}
#box1 {
    width:100%;
    height:20%;
    display:flex;
    justify-content:center;
    align-items:center;
    display:none;
}
#box2 {
    width:100%;
    height:100%;
    display:flex;
    flex-direction:column;
}
.clax-logo {
    width:40%;
    height:40px;
    display:flex;
    align-items:center;
}
.clax-logo img {
    margin-left:60px;
}
.clax-writing {
    width:60%;
    height:40px;
    display:flex;
    justify-content:flex-end;
}
.clax-block {
    width:300px;
    height:100%;
    margin-right:60px;
    display:flex;
    justify-content:center;
    align-items:center;
    gap:35px;
}
.clax-block font {
    color:white;
    font-size:16px;
}
#theText {
    width:100%;
    height:60%;
    display:flex;
    justify-content:center;
    align-items:center;
    flex-direction:column;
    gap:30px;
} 
#downloadBox {
    width:100%;
    height:40%;
    display:flex;
    justify-content:center;
    align-items:center;
}
.textBox1 {
    width:257px;
    height:48px;
    display:flex;
    justify-content:center;
    align-items:center;
}
/* Free Online Class */
.textBox1 span {
    font-size:35px;
    font-weight:bold;
    color:rgba(129, 0, 202, 1);
    display:flex;
    flex-direction:column;
    gap:10px;
    font-family:sans-serif;
}
.textBox1 span font {
    color:white;
    font-size:25px;
    color:rgba(249, 238, 255, 1);
    letter-spacing:1px;
}

/* stop here  */    

.textBox1 font {
    font-size:20px;
    text-align:center;
    color:rgba(249, 238, 255, 1);
}
.textBox2 {
    width:253.64px;
    height:62px;
    display:flex;
    justify-content:center;
    align-items:center;
}
.textBox2 font {
    font-size:14px;
    text-align:center;
    color:rgba(255, 255, 255, 1);
    line-height:17.7px;
}
.dbox0 {
    width: 325.73px;
    height: 197.97px;
    border-radius: 47px;
    background:rgba(160, 1, 250, 0.02);
    display:flex;
    justify-content:center;
    align-items:center;
}
.dbox1 {
    width:290.82px;
    height:157.9px;
    background:rgba(160, 1, 250, 0.07);
    border-radius:40px;
    display:flex;
    justify-content:center;
    align-items:center;
}
.dbox2 {
    width:255.85px;
    height:117.58px;
    background:rgba(160, 1, 250, 0.12);
    border-radius:33px;
    display:flex;
    justify-content:center;
    align-items:center;
}
.dbox3 {
    width:208.89px;
    height:85.72px;
    background:rgba(160, 1, 250, 0.3);
    border-radius:27px;
    display:flex;
    justify-content:center;
    align-items:center;

    /* Free Online Clax  */
    flex-direction:column;
    gap:80px;
}
.dbox4 {
    width:168.48px;
    height:53.9px;
    background:rgba(255, 255, 255, 1);
    border-radius:20px;
    display:flex;
    justify-content:center;
    align-items:center;
}

 /* Free Online Class */
 .email {
    width:150px;
    height:40px;
    border:2px solid white;
    margin-top:-120px;
    border-radius:9px;
 }
 .email input {
    width:100%;
    height:100%;
    border-radius:9px;
    background:none;
    color:white;
    outline:0;
    border:0;
    font-size:13px;
 }
 ::placeholder {
    font-family:sans-serif;
    color:white;
 }
.dbox4 {
    height:35.9px;
    background:rgba(255, 255, 255, 1);
    border-radius:9px;
    display:flex;
    justify-content:center;
    align-items:center;
    padding: 0px 20px;
    cursor:pointer;
}

 /* Stops here  */

.dbox4 font {
    font-size:13px;
    line-height:15.6px;
    color:rgba(0, 0, 0, 1);
    font-weight:bold;
}

/* SECOND BOX - The door to excellence in your studies always */
#second-top {
    width:100%;
    height:660.84px;
    display:flex;
    align-items:center;
    flex-direction:column;
}
.inner-top {
    width:82%;
    height:400.05px;
    border:1px solid rgba(0, 0, 0, 0.3);
    border-radius:25px;
    margin-top:30px;
    display:flex;
    flex-direction:column;
}
.slogan-text {
    width:100%;
    height:30%;
    display:flex;
    justify-content:center;
    align-items:center;
}
.theSlogan {
    width:241.83px;
    height:108px;
    display:flex;
    justify-content:center;
    align-items:center;
}
.theSlogan font {
    font-size:30px;
    color:rgba(0, 0, 0, 1);
    text-align:center;
}
.threeD-div {
    width:100%;
    height:70%;
    display:flex;
    justify-content:center;
}
.threeD {
    width:338.12px;
    height:261.56px;
    margin-top:15px;
}
#download2-div {
    width:82%;
    height:162px;
    margin-top:20px;
}
.icon {
    width:100%;
    height:50%;
    display:flex;
    flex-direction:row;
    gap:10px;
}
.texts {
    width:100%;
    height:50%;
}
.down-maindiv {
    width:57.8px;
    height:53.41px;
    background:rgba(48, 0, 75, 1);
    border-radius:10px;
    display:flex;
    justify-content:center;
    align-items:center;
}
.down-text {
    width:256px;
    height:59px;
    background:rgba(217, 217, 217, 1);
    border-radius:10px;
    display:flex;
    justify-content:center;
    align-items:center;
}
.down-text font{
    font-size:16px;
    color:rgba(0, 0, 0, 1);
    line-height:19.2px;
    font-weight:bold;
}
.texts {
    width:327.8px;
    height:110px;
    display:flex;
    margin-top:-10px;
}
.texts font {
    font-size:13px;
    color:rgba(0, 0, 0, 0.7);
    line-height:20px;
}

/* Clax League  */
#clax-league {
    width:92%;
    height:610.59px;
    background:rgba(245, 235, 255, 0.72);
    border-radius:25px;
    display:flex;
    align-items:center;
    flex-direction:column;
}
#clax-league-text {
    width:100%;
    height:35%;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    gap:32px;
}
.htext-Box {
    width:120px;
    height:69px;
    display:flex;
    flex-direction:column;
    align-items:center;
}
.htext-Box font {
    font-size:25px;
}
.htext-Box span {
    font-family:sans-serif;
    font-size:35px;
    font-weight:bold;
}
.vtext-Box {
    width:287.67px;
    height:80.11px;
    text-align:center;
    display:flex;
    margin-top:-10px;
}
.vtext-Box font {
    font-size:14px;
    line-height:17.7px;
}
#join-league-desktop {
    width:220.08px;
    height:60px;
    background:#883aef;
    border-radius:20px;
    display:none;
}
#join-league-desktop font {
    font-size:16px;
    font-weight:bold;
}
#clax-league-chart {
    width:100%;
    height:65%;
    display:flex;
    align-items:center;
    flex-direction:column;
}
#clax-league-i {
    width:90%;
    height:80%;
    background-image:url('../Images/clax-league-mobile.png');
    background-size:contain;
    background-repeat: no-repeat;
    background-position:center;
}
#join-league-mobile {
    width:289px;
    height:59px;
    background:rgba(136, 58, 239, 1);
    border-radius:10px;
    display:flex;
    align-items:center;
    justify-content:center;
}
#join-league-mobile font {
    font-size:16px;
    font-weight:bold;
    color:rgba(255, 255, 255, 1);
}

.socials {
    width:100%;
    height:60px;
    display:flex;
    justify-content:center;
    align-items:flex-end;
    gap:15px;
}
.X, .IG{
    width:35px;
    height:35px;
    border-radius:50%;
    display:flex;
    justify-content:center;
    align-items:center;
    font-size:25px;
    cursor:pointer;
}
.X {
    background:black;
    color:white;
}
.IG {
    background:-webkit-linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%);
    color:white;
}


/* Large devices (laptops/desktops) */
@media only screen and (min-width:1001px){
    #mobile-menu {
        display:none;
    }
    #maindiv {
        height:1900px;
    }
    #topdiv {
        display:none;
    }
    .top-writeup font {
        font-size:16px;
        margin-left:20px;
        margin-right:20px;
    }
    #first-top {
        width:90%;
        height:531.72px;
        background-image:radial-gradient( rgba(56, 0, 88, 1) 0%, rgba(20, 0, 31, 1) 70%);
        border-radius:50px;
        margin-top:10px;
    }
    .logoDiv {
        margin-left:50px;
    }
    .fontDiv {
        margin-right:50px;
    }
    #box1 {
        display:block;
        display:flex;
    }
    #box2 {
        height:80%;
        flex-direction:row;
    }
    #theText {
        width:50%;
        height:100%;
        align-items:flex-start;
        gap:15px;
    } 
    .textBox1 {
        width:440.68px;
        height:196px;
        margin-left:50px;
        margin-top:-30px;
        /* Free Online Clax  */
        display:flex;
        justify-content:flex-start;
    }

        /* Free Online Class */
    .textBox1 span {
        font-size:55px;
        gap:20px;
    }
    .textBox1 span font {
        font-size:45px;
    }

    /* stop here  */


    .textBox1 font {
        font-size:35px;
        line-height:48px;
        text-align: left;
    }
    .textBox2 {
        width: 440.68px;
        height:62px;
        margin-left:50px;
    }
    .textBox2 font {
        font-size:17px;
        text-align:left;
        line-height:27.24px;
        margin-top:-30px;
    }
    #downloadBox {
        width:50%;
        height:100%;
        display:flex;
        justify-content:flex-end;
    }
    .dbox0 {
        width: 731.97px;
        height: 492.21px;
        border-radius: 270px;
        background:rgba(160, 1, 250, 0.02);
    }
    .dbox1 {
        width:567.23px;
        height:389.03px;
        border-radius: 220px;
        background:rgba(160, 1, 250, 0.04);
    }
    .dbox2 {
        width:463.51px;
        height:278.25px;
        border-radius:170px;
        background:rgba(160, 1, 250, 0.07);
    }
    .dbox3 {
        width:307px;
        height:176px;
        border-radius:120px;
        background:rgba(160, 1, 250, 0.12);

            /* Free Online Clax  */
        flex-direction:row;
        gap:10px;
    }
    /* .dbox4 {
        width:181px;
        height:102px;
        border-radius:70px;
        background:rgba(255, 255, 255, 1);
    } */

        /* Free Online Class */
    .email {
        width:200px;
        height:50px;
        margin-top:0px;
    }
    .email input {
        font-size:16px;
    }
    .dbox4 {
        height:50px;
    }

    /* Stops here  */

    #second-top {
        height:800.84px;
        position:relative;
    }
    .inner-top {
        width:90%;
        height:550px;
        margin-top:70px;
        flex-direction:row;
        background-image: url('../Images/shape.png');
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;
        border: none;
    }
    .slogan-text {
        width:40%;
        height:100%;
        justify-content:flex-start;
        align-items:flex-start;
    }
     .theSlogan {
        width:355.46px;
        height:180px;
        margin-top:90px;
        margin-left:80px;
    }
        
    .theSlogan font {
        font-size:40px;
        text-align:left;
        line-height:44.5px;
        font-weight:bold;
    }
    .threeD-div {
        width:60%;
        height:100%;
        align-items:center;
    }
    .threeD {
        width:100%;
        height:100%;
        margin-top:0px;
        background-image:url('../Images/3Ddesktop.png');
        background-size:cover;
    }
    .threeD img {
        display:none;
    }
    #download2-div {
        position:absolute;
        top:400px;
    }
    #clax-league {
        width:90%;
        height:460.59px;
        border-radius:50px;
        flex-direction:row;
        margin-top:-100px;
    }
    #clax-league-text {
        width:30%;
        height:90%;
        align-items:flex-start;
        justify-content:flex-start;
    }
    .htext-Box {
        width:200px;
        height:80px;
        margin-left:80px;
        align-items:flex-start;
        margin-top:55px;

    }
    .htext-Box font {
        font-size:35px;
    }
    .htext-Box span {
        font-size:45px;
    }
    .vtext-Box {
        width:200px;
        height:76.11px;
        text-align:left;
        margin-left:80px;
        display:flex;
    }
    .vtext-Box font {
        font-size:14px;
        line-height:20px;
        color:rgba(0, 0, 0, 1);
    }
    #join-league-desktop {
        width:220.08px;
        height:60px;
        display:block;
        display:flex;
        justify-content:center;
        align-items:center;
        margin-left:80px;
        margin-top:40px;
    }
    #join-league-desktop font {
        font-size:16px;
        color:white;
    }
    #clax-league-chart {
        width:70%;
        height:90%;
        display:flex;
        align-items:center;
        justify-content:center;
    }
    #clax-league-i {
        width:90%;
        height:452px;
        background-image:url('../Images/clax-league-desktop.png');
        background-size:contain;
        margin-top:25px;
    }
    #join-league-mobile {
        display:none;
    }

}

/* For the Curvy lines to come out well on this screen size */
@media screen and (min-width:1001px) and (max-width:1227px) {
    #mobile-menu {
        display:none;
    }
    .threeD {
        background-image:url('../Images/3D.png');
        background-position:center;
        height:440.56px;
        margin-right:10px;
        /* background:blue; */
    }
    .down-text {
        width:200px;
    }
    .texts {
        width:280.8px;
    }
    
}


/* Extra small devices (phones) */
@media only screen and (max-width:360px) {
    .textBox1 font {
        font-size:19px;
    }
    .textBox2 {
        width:233.64px;
    }
    .textBox2 font {
        font-size:13px;
    }
    .texts {
        width:260.8px;
    }
    .texts font {
        font-size:13px;
    }
}

/* Extra Extra small devices  - iWatches */
@media only screen and (max-width:312px) {
    .logoDiv font {
        font-size:6px;
    }
    .fontDiv font {
        font-size:5px;
    }
    .textBox1 font {
        font-size:15px;
    }
    #first-top {
        width:100%;
    }
    .dbox0,.dbox1,.dbox2,.dbox3,.dbox4 {
        width:200px;
    }
    .threeD-div {
        display:none;
    }
    .inner-top {
        display:flex;
        justify-content:center;
        align-items:center;
    }
   .textBox1 font {
    font-size:9px;
   }
   .textBox2 font {
    font-size:9px;
   }
   .dbox4 font {
    font-size:10px;
   }
   .texts {
    width:200px;
   }
   #clax-league {
    margin-top:50px;
   }
   .down-text {
    width:110px;
   }
   .vtext-Box {
    width:150px;
   }
   #join-league-mobile {
    width:150px;
   }
}




/* SUPPORT PAGE CSS  */
  .container {
    background-color: #fff;
    padding: 30px;
    border-radius: 15px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
    width: 100%;
    max-width: 400px;
    display:flex;
    justify-content:center;
    align-items:center;
    flex-direction:column;
  }

  .logo-content {
    width:100%;
    height:50px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .theFormDiv {
    background-color: #fff;
    padding: 30px;
    width: 100%;
    height:calc(100% - 50px);
    display:flex;
    justify-content:center;
    align-items:center;
    flex-direction:column;
  }

  h1 {
    text-align: center;
    color:#334155;
    margin-bottom: 20px;
    font-size:30px;
  }
  label {
    display: block;
    margin-bottom: 8px;
    color: #334155;
    font-weight: bold;
  }

  input, textarea {
    width: 90%;
    padding: 10px;
    margin-bottom: 20px;
    border: 1px solid rgba(48, 0, 75, 1);
    border-radius: 8px;
    font-size: 1rem;
    resize:none;
  }
  input::selection, textarea::selection {
    background-color: rgba(48, 0, 75, 1);
    color:white;
  }

  button {
    background-color:rgba(48, 0, 75, 1);
    color: #fff;
    padding: 12px;
    width: 90%;
    border:1px solid rgba(48, 0, 75, 1);
    border-radius: 8px;
    font-size: 1rem;
    cursor: pointer;
    font-family:sans-serif;
    font-size:17px;
  }

  button:hover {
    background-color:#fff;
    color:rgba(48, 0, 75, 1);
  }
  button:active {
    background:rgba(48, 0, 75, 1);
    color:#fff;
  }


  /* Mobile */
  @media (max-width: 500px) {
    .container {
      padding: 20px;
      min-height: 70vh;
    }

    h1 {
      font-size: 1.5rem;
    }

    input, textarea {
      font-size: 0.95rem;
    }

    button {
      font-size: 0.95rem;
    }
  }

  /* Privacy Policy CSS */
  
  .policy-container {
    max-width: 800px;
    margin: 0 auto;
    background-color: #fff;
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
  }

  h1 {
    font-size: 2rem;
    margin-bottom: 20px;
    color: #2c3e50;
  }

  h2 {
    font-size: 1.4rem;
    margin-top: 25px;
    margin-bottom: 10px;
    color: #34495e;
  }

  p {
    margin-bottom: 15px;
  }

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

    .privacy {
      font-size: 1.5rem;
    }

    .h2Text {
      font-size: 1.2rem;
    }
  }
  @media (max-width: 1000px) {
    #countdown{text-align: center;}
  }