* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: black;
}

.main {
    height: 695px;
    overflow: hidden;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0, rgba(0, 0, 0, 0.4) 60%, rgba(0, 0, 0, 0.8) 100%), url(./images/Homeback.jpg);
    background-position: center, center;
    background-repeat: no-repeat;
    background-size: cover;
}

nav {
    width: 75%;
    margin: auto;
    height: 62px;
    margin-top: 30px;
    display: flex;
    /* background-color: aqua; */
}

.logo {
    height: 62px;
    width: 14.5%;
    /* float: left; */
}

.btn {
    height: 62px;
    width: 85.5%;
    /* display: flex; */
    /* background-color: yellow; */
    display: flex;
    justify-content: flex-end;
    
}

.language{
    height: auto;
    width: 126px;
    /* background-color: aqua; */
    margin-left: 8px;
}
.bttn{
    height: auto;
    width: 126px;

}
.bttn-toggle{
    border-radius: 5px;
    border: 3px outset white;
}
.log {
    height: 32px;
    width: 100%;
    /* display: block;
    margin: auto; */
    margin-top: 0px;
    font-weight: 900;
    font-family: sans-serif;
    font-size: 13px;
    background-color: transparent;
    color: white;
    border: 0.5px solid rgb(175, 175, 175);
    border-radius: 3px;
    /* margin-left: 70px; */

}
 
.log  .fa-language{
    margin-right: 5px;
}
.log .fa-caret-down{
    margin-left: 8px;
}


.drop-language{
    height: auto;
    width: 100%;
    background-color: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
    display: none;
}

.drop-language-show{
    display: block;
}
.drop-language>:nth-child(1){
    height: 30px;
    width: 100%;
    background-color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: sans-serif;
    border-top-right-radius:10px;
    border-top-left-radius: 10px;
    cursor: pointer;
   
}
.drop-language>:nth-child(1):hover {
    background-color: blue;
    color: white;
}
.drop-language>:nth-child(2){
    height: 30px;
    width: 100%;
    background-color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: sans-serif;
    border-bottom-right-radius:10px;
    border-bottom-left-radius: 10px;  
    cursor: pointer;
}
.drop-language>:nth-child(2):hover {
    background-color: blue;
    color: white;
}

.sign {
    height: 32px;
    width: 76px;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 900;
    font-size: 13px;
    background-color: red;
    color: white;
    border-radius: 5px;
    border: 1px solid red;
    margin-left: 25px;
    margin-top: 0px;
    /* float: right; */
}

.sign a{
    text-decoration: none;
    color: white;
    display: block;
}

.sign:hover {
    background-color: rgb(191, 2, 2);
    border: 1px solid rgb(191, 2, 2);
}



.cont {
    width: 66%;
    margin: auto;
    margin-top: 100px;
    height: 400px;
    /* background-color: red; */
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    color: white;
    gap: 22px;

}

.cont> :nth-child(1) {
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 900;
    font-size: 48px;
    text-align: center;
    padding: 0px 100px;

}

.cont> :nth-child(2) {
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 500;
    font-size: 24px;
    text-align: center;
}

.cont> :nth-child(3) {
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 500;
    font-size: 20px;
    text-align: center;
}

.in {
    display: flex;
    flex-wrap: wrap;
    /* background-color: aqua; */
}

.in input {
    margin-top: 0px;
    height: 56px;
    width: 359px;
    font-size: 15px;
    line-height: 50px;
    background-color: transparent;
    border-radius: 5px;
    border: 1px solid gray;
    padding-left: 10px;
    color: white;
}


.in input::placeholder {
    color: rgb(184, 184, 184);
    font-family: sans-serif;
    font-weight: 600;
}

.in button {
    width: 213px;
    height: 56px;
    background-color: red;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 24px;
    font-weight: 600;
    color: white;
    border-radius: 5px;
    border: 2px solid red;
    margin-left: 10px;


}

.in button i {
    margin-left: 10px;
}

.in button:hover {
    background-color: rgb(191, 2, 2);
    border: 1px solid rgb(191, 2, 2);
}

/*===================At 200px==========*/
@media(min-width:200px) and (max-width:300px) {
    .main {
        width: 100%;
        height: 100%;
        background-size: cover;
    }

    nav {
        width: 90%;
        margin-top: 30px;
        justify-content: flex-end;
    }

    .logo {
        height: auto;
        width: auto;
    }

    .logo img {
        height: 20px;
        width: 50px;
    }
    .btn {
        height: 62px;
        width: 85.5%;
        display: flex;
        justify-content: flex-end;
        
    }
    
    .language{
        height: auto;
        width: 80px;
        margin-left: 8px;
    }
    .bttn{
        height: auto;
        width: 100%;
    
    }
    .bttn-toggle{
        border-radius: none;
        border: 2px outset white;
    }
    .log {
        height: 20px;
        width: 100%;
        margin-top: 0px;
        font-weight: 900;
        font-family: sans-serif;
        font-size: 8px;
        background-color: transparent;
        color: white;
        border: 0.5px solid rgb(175, 175, 175);
        border-radius: 3px;
    }
     
    .log  .fa-language{
        margin-right: 5px;
    }
    .log .fa-caret-down{
        margin-left: 8px;
    }
    
    .drop-language{
        height: auto;
        width: 100%;
        background-color: white;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        border-radius: 10px;
        display: none;
    }
    
    .drop-language-show{
        display: block;
    }
    .drop-language>:nth-child(1){
        height: 18px;
        width: 100%;
        background-color: white;
        display: flex;
        justify-content: center;
        align-items: center;
        font-family: sans-serif;
        border-top-right-radius:10px;
        border-top-left-radius: 10px;
        font-size: 8px;
       
    }
    .drop-language>:nth-child(1):hover {
        background-color: blue;
        color: white;
    }
    .drop-language>:nth-child(2){
        height: 18px;
        width: 100%;
        background-color: white;
        display: flex;
        justify-content: center;
        align-items: center;
        font-family: sans-serif;
        border-bottom-right-radius:10px;
        border-bottom-left-radius: 10px;
        font-size: 8px;  
    }
    .drop-language>:nth-child(2):hover {
        background-color: blue;
        color: white;
    }
    .sign {
        margin-left: 8px;
        height: 20px;
        width: 55px;
        font-size: 8px;
        border-radius: 3px;
    }
    .cont {
        margin-top: 22px;
        height: 400px;
        flex-wrap: nowrap;
        width: 95%;
        margin: auto;
        gap: 15px;

    }

    .cont> :nth-child(1) {
        font-family: Arial, Helvetica, sans-serif;
        font-weight: 900;
        font-size: 16px;
        text-align: center;
        padding: 0px 16px;
    }

    .cont> :nth-child(2) {
        font-family: Arial, Helvetica, sans-serif;
        font-weight: 500;
        font-size: 12px;
        text-align: center;
        padding: 0px;
    }

    .cont> :nth-child(3) {
        font-family: Arial, Helvetica, sans-serif;
        font-weight: 500;
        font-size: 12px;
        text-align: center;
        padding: 0px 18px;
        line-height: 15px;
    }

    .in {
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .in input {
        background-color: black;
        width: 180px;
        height: 40px;
        opacity: 0.5;
        border: 1px solid white;

    }

    .in button {
        margin-top: 15px;
        height: 35px;
        width: 120px;
        font-size: 14px;
        font-weight: 600;
    }
}

/*===================At 400px==========*/
@media(min-width:301px) and (max-width:400px) {
    .main {
        width: 100%;
        height: 100%;
        background-size: cover;
    }

    nav {
        width: 90%;
        margin-top: 30px;
        justify-content: flex-end;
    }

    .logo {
        height: auto;
        width: auto;
    }

    .logo img {
        height: 30px;
        width: 90px;
    }
    .btn {
        height: 62px;
        width: 85.5%;
        display: flex;
        justify-content: flex-end;
        
    }
    
    .language{
        height: auto;
        width: 120px;
        margin-left: 8px;
    }
    .bttn{
        height: auto;
        width: 100%;
    
    }
    .bttn-toggle{
        border-radius: none;
        border: 2px outset white;
    }
    .log {
        height: 32px;
        width: 100%;
        margin-top: 0px;
        font-weight: 900;
        font-family: sans-serif;
        font-size: 13px;
        background-color: transparent;
        color: white;
        border: 0.5px solid rgb(175, 175, 175);
        border-radius: 3px;
    }
     
    .log  .fa-language{
        margin-right: 5px;
    }
    .log .fa-caret-down{
        margin-left: 8px;
    }
    
    .drop-language{
        height: auto;
        width: 100%;
        background-color: white;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        border-radius: 10px;
        display: none;
    }
    
    .drop-language-show{
        display: block;
    }
    .drop-language>:nth-child(1){
        height: 28px;
        width: 100%;
        background-color: white;
        display: flex;
        justify-content: center;
        align-items: center;
        font-family: sans-serif;
        border-top-right-radius:10px;
        border-top-left-radius: 10px;
        font-size: 12px;
       
    }
    .drop-language>:nth-child(1):hover {
        background-color: blue;
        color: white;
    }
    .drop-language>:nth-child(2){
        height: 28px;
        width: 100%;
        background-color: white;
        display: flex;
        justify-content: center;
        align-items: center;
        font-family: sans-serif;
        border-bottom-right-radius:10px;
        border-bottom-left-radius: 10px;
        font-size: 12px;  
    }
    .drop-language>:nth-child(2):hover {
        background-color: blue;
        color: white;
    }
    .sign {
        margin-left: 8px;
    }

   


    .cont {
        margin-top: 22px;
        height: 400px;
        flex-wrap: nowrap;
        width: 95%;
        margin: auto;

    }

    .cont> :nth-child(1) {
        font-family: Arial, Helvetica, sans-serif;
        font-weight: 900;
        font-size: 26px;
        text-align: center;
        padding: 0px 16px;
    }

    .cont> :nth-child(2) {
        font-family: Arial, Helvetica, sans-serif;
        font-weight: 500;
        font-size: 18px;
        text-align: center;
        padding: 0px;
    }

    .cont> :nth-child(3) {
        font-family: Arial, Helvetica, sans-serif;
        font-weight: 500;
        font-size: 16px;
        text-align: center;
        padding: 0px 18px;
        line-height: 28px;
    }

    .in {
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .in input {
        background-color: black;
        width: 280px;
        height: 50px;
        opacity: 0.5;
        border: 1px solid white;

    }

    .in button {
        margin-top: 15px;
        height: 45px;
        width: 160px;
        font-size: 18px;
        font-weight: 600;
    }
}

/* ================At 600px======================== */
@media(min-width:401px)and (max-width:600px) {
    .main {
        width: 100%;
        height: 100%;
        background-size: cover;
    }

    nav {
        width: 90%;
        margin-top: 30px;
        justify-content: flex-end;
    }

    .logo {
        height: auto;
        width: auto;
    }

    .logo img {
        height: 30px;
        width: 90px;
    }

    .btn {
        height: 62px;
        width: 85.5%;
        display: flex;
        justify-content: flex-end;
        
    }
    
    .language{
        height: auto;
        width: 120px;
        margin-left: 8px;
    }
    .bttn{
        height: auto;
        width: 100%;
    
    }
    .bttn-toggle{
        border-radius: none;
        border: 2px outset white;
    }
    .log {
        height: 32px;
        width: 100%;
        margin-top: 0px;
        font-weight: 900;
        font-family: sans-serif;
        font-size: 13px;
        background-color: transparent;
        color: white;
        border: 0.5px solid rgb(175, 175, 175);
        border-radius: 3px;
    }
     
    .log  .fa-language{
        margin-right: 5px;
    }
    .log .fa-caret-down{
        margin-left: 8px;
    }
    
    .drop-language{
        height: auto;
        width: 100%;
        background-color: white;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        border-radius: 10px;
        display: none;
    }
    
    .drop-language-show{
        display: block;
    }
    .drop-language>:nth-child(1){
        height: 28px;
        width: 100%;
        background-color: white;
        display: flex;
        justify-content: center;
        align-items: center;
        font-family: sans-serif;
        border-top-right-radius:10px;
        border-top-left-radius: 10px;
        font-size: 12px;
       
    }
    .drop-language>:nth-child(1):hover {
        background-color: blue;
        color: white;
    }
    .drop-language>:nth-child(2){
        height: 28px;
        width: 100%;
        background-color: white;
        display: flex;
        justify-content: center;
        align-items: center;
        font-family: sans-serif;
        border-bottom-right-radius:10px;
        border-bottom-left-radius: 10px;
        font-size: 12px;  
    }
    .drop-language>:nth-child(2):hover {
        background-color: blue;
        color: white;
    }

    .sign {
        margin-left: 12px;
    }


    .cont {
        height: 400px;
        flex-wrap: nowrap;
        width: 95%;
        margin: auto;
        margin-top: 30px;

    }

    .cont> :nth-child(1) {
        font-family: Arial, Helvetica, sans-serif;
        font-weight: 900;
        font-size: 28px;
        text-align: center;
        padding: 0px 30px;
        margin-top: 0px;
    }

    .cont> :nth-child(2) {
        font-family: Arial, Helvetica, sans-serif;
        font-weight: 500;
        font-size: 18px;
        text-align: center;
    }

    .cont> :nth-child(3) {
        font-family: Arial, Helvetica, sans-serif;
        font-weight: 500;
        font-size: 18px;
        text-align: center;
        padding: 0px 20px;
        line-height: 28px;
    }

    .in {
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .in input {
        background-color: black;
        width: 350px;
        height: 50px;
        opacity: 0.5;
        border: 1px solid white;

    }

    .in button {
        margin-top: 15px;
        height: 50px;
        width: 180px;
        font-size: 18px;
        font-weight: 600;
    }
}

/* =============================At 768px============================== */
@media(min-width:601px) and (max-width:768px) {
    .main {
        width: 100%;
        height: 100%;
        background-size: cover;
    }

    nav {
        width: 90%;
        margin-top: 30px;
        justify-content: flex-end;
    }

    .logo {
        height: auto;
        width: auto;
    }

    .logo img {
        height: 30px;
        width: 90px;
    }

    .btn {
        height: 62px;
        width: 85.5%;
        display: flex;
        justify-content: flex-end;
        
    }
    
    .language{
        height: auto;
        width: 120px;
        margin-left: 8px;
    }
    .bttn{
        height: auto;
        width: 100%;
    
    }
    .bttn-toggle{
        border-radius: none;
        border: 2px outset white;
    }
    .log {
        height: 32px;
        width: 100%;
        margin-top: 0px;
        font-weight: 900;
        font-family: sans-serif;
        font-size: 13px;
        background-color: transparent;
        color: white;
        border: 0.5px solid rgb(175, 175, 175);
        border-radius: 3px;
    }
     
    .log  .fa-language{
        margin-right: 5px;
    }
    .log .fa-caret-down{
        margin-left: 8px;
    }
    
    .drop-language{
        height: auto;
        width: 100%;
        background-color: white;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        border-radius: 10px;
        display: none;
    }
    
    .drop-language-show{
        display: block;
    }
    .drop-language>:nth-child(1){
        height: 28px;
        width: 100%;
        background-color: white;
        display: flex;
        justify-content: center;
        align-items: center;
        font-family: sans-serif;
        border-top-right-radius:10px;
        border-top-left-radius: 10px;
        font-size: 12px;
       
    }
    .drop-language>:nth-child(1):hover {
        background-color: blue;
        color: white;
    }
    .drop-language>:nth-child(2){
        height: 28px;
        width: 100%;
        background-color: white;
        display: flex;
        justify-content: center;
        align-items: center;
        font-family: sans-serif;
        border-bottom-right-radius:10px;
        border-bottom-left-radius: 10px;
        font-size: 12px;  
    }
    .drop-language>:nth-child(2):hover {
        background-color: blue;
        color: white;
    }

    .sign {
        margin-left: 15px;
    }

    .cont {

        height: 400px;
        flex-wrap: nowrap;
        width: 95%;
        margin: auto;
        margin-top: 30px;

    }

    .cont> :nth-child(1) {
        font-family: Arial, Helvetica, sans-serif;
        font-weight: 900;
        font-size: 30px;
        text-align: center;
        padding: 0px 120px;
    }

    .cont> :nth-child(2) {
        font-family: Arial, Helvetica, sans-serif;
        font-weight: 500;
        font-size: 18px;
        text-align: center;
    }

    .cont> :nth-child(3) {
        font-family: Arial, Helvetica, sans-serif;
        font-weight: 500;
        font-size: 18px;
        text-align: center;
        line-height: 26px;
        padding: 0px 120px;
    }

    .in input {
        background-color: black;
        width: 250px;
        height: 50px;
        opacity: 0.5;
        border: 1px solid white;

    }

    .in button {
        height: 50px;
        width: 180px;
        font-size: 18px;
        font-weight: 600;
    }
}

/* =============================At 900px============================== */
@media(min-width:769px) and (max-width:900px) {
    .main {
        width: 100%;
        height: 100%;
        background-size: cover;
    }

    nav {
        width: 90%;
        margin-top: 30px;
        justify-content: flex-end;
    }

    .logo {
        height: auto;
        width: auto;
    }

    .logo img {
        height: 30px;
        width: 90px;
    }
    
    .btn {
        height: 62px;
        width: 85.5%;
        display: flex;
        justify-content: flex-end;
        
    }
    
    .language{
        height: auto;
        width: 120px;
        margin-left: 8px;
    }
    .bttn{
        height: auto;
        width: 100%;
    
    }
    .bttn-toggle{
        border-radius: none;
        border: 2px outset white;
    }
    .log {
        height: 32px;
        width: 100%;
        margin-top: 0px;
        font-weight: 900;
        font-family: sans-serif;
        font-size: 13px;
        background-color: transparent;
        color: white;
        border: 0.5px solid rgb(175, 175, 175);
        border-radius: 3px;
    }
     
    .log  .fa-language{
        margin-right: 5px;
    }
    .log .fa-caret-down{
        margin-left: 8px;
    }
    
    .drop-language{
        height: auto;
        width: 100%;
        background-color: white;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        border-radius: 10px;
        display: none;
    }
    
    .drop-language-show{
        display: block;
    }
    .drop-language>:nth-child(1){
        height: 28px;
        width: 100%;
        background-color: white;
        display: flex;
        justify-content: center;
        align-items: center;
        font-family: sans-serif;
        border-top-right-radius:10px;
        border-top-left-radius: 10px;
        font-size: 12px;
       
    }
    .drop-language>:nth-child(1):hover {
        background-color: blue;
        color: white;
    }
    .drop-language>:nth-child(2){
        height: 28px;
        width: 100%;
        background-color: white;
        display: flex;
        justify-content: center;
        align-items: center;
        font-family: sans-serif;
        border-bottom-right-radius:10px;
        border-bottom-left-radius: 10px;
        font-size: 12px;  
    }
    .drop-language>:nth-child(2):hover {
        background-color: blue;
        color: white;
    }
    
    .sign {
        margin-left: 15px;
    }

   

    .cont {

        height: 400px;
        flex-wrap: nowrap;
        width: 95%;
        margin: auto;
        margin-top: 30px;

    }

    .cont> :nth-child(1) {
        font-family: Arial, Helvetica, sans-serif;
        font-weight: 900;
        font-size: 34px;
        text-align: center;
        padding: 0px 120px;
    }

    .cont> :nth-child(2) {
        font-family: Arial, Helvetica, sans-serif;
        font-weight: 500;
        font-size: 18px;
        text-align: center;
    }

    .cont> :nth-child(3) {
        font-family: Arial, Helvetica, sans-serif;
        font-weight: 500;
        font-size: 18px;
        text-align: center;
        line-height: 26px;
        padding: 0px 120px;
    }

    .in input {
        background-color: black;
        width: 250px;
        height: 50px;
        opacity: 0.5;
        border: 1px solid white;

    }

    .in button {

        height: 50px;
        width: 180px;
        font-size: 18px;
        font-weight: 600;
    }
}

/* =============================At 1200px============================== */
@media (min-width:901px) and (max-width:1200px) {
    .main {
        width: 100%;
        height: 100%;
        background-size: cover;
    }

    nav {
        width: 90%;
        margin-top: 30px;
        justify-content: flex-end;
    }

    .logo {
        height: auto;
        width: auto;
    }

    .logo img {
        height: 30px;
        width: 90px;
    }
    .btn {
        height: 62px;
        width: 85.5%;
        display: flex;
        justify-content: flex-end;
        
    }
    
    .language{
        height: auto;
        width: 120px;
        margin-left: 8px;
    }
    .bttn{
        height: auto;
        width: 100%;
    
    }
    .bttn-toggle{
        border-radius: none;
        border: 2px outset white;
    }
    .log {
        height: 32px;
        width: 100%;
        margin-top: 0px;
        font-weight: 900;
        font-family: sans-serif;
        font-size: 13px;
        background-color: transparent;
        color: white;
        border: 0.5px solid rgb(175, 175, 175);
        border-radius: 3px;
    }
     
    .log  .fa-language{
        margin-right: 5px;
    }
    .log .fa-caret-down{
        margin-left: 8px;
    }
    
    .drop-language{
        height: auto;
        width: 100%;
        background-color: white;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        border-radius: 10px;
        display: none;
    }
    
    .drop-language-show{
        display: block;
    }
    .drop-language>:nth-child(1){
        height: 28px;
        width: 100%;
        background-color: white;
        display: flex;
        justify-content: center;
        align-items: center;
        font-family: sans-serif;
        border-top-right-radius:10px;
        border-top-left-radius: 10px;
        font-size: 12px;
       
    }
    .drop-language>:nth-child(1):hover {
        background-color: blue;
        color: white;
    }
    .drop-language>:nth-child(2){
        height: 28px;
        width: 100%;
        background-color: white;
        display: flex;
        justify-content: center;
        align-items: center;
        font-family: sans-serif;
        border-bottom-right-radius:10px;
        border-bottom-left-radius: 10px;
        font-size: 12px;  
    }
    .drop-language>:nth-child(2):hover {
        background-color: blue;
        color: white;
    }

    .sign {
        margin-left: 15px;
    }

  

    .cont {

        height: 400px;
        flex-wrap: nowrap;
        width: 95%;
        margin: auto;
        margin-top: 50px;

    }

    .cont> :nth-child(1) {
        font-family: Arial, Helvetica, sans-serif;
        font-weight: 900;
        font-size: 36px;
        text-align: center;
        padding: 0px 225px;
    }

    .cont> :nth-child(2) {
        font-family: Arial, Helvetica, sans-serif;
        font-weight: 500;
        font-size: 20px;
        text-align: center;
    }

    .cont> :nth-child(3) {
        font-family: Arial, Helvetica, sans-serif;
        font-weight: 500;
        font-size: 20px;
        text-align: center;

        line-height: 26px;
        padding: 0px 220px;
    }

    .in input {
        background-color: black;
        width: 270px;
        height: 50px;
        opacity: 0.5;
        border: 1px solid white;

    }

    .in button {

        height: 50px;
        width: 180px;
        font-size: 18px;
        font-weight: 600;
    }
}

/* ============================================================================= */
.sepration {

    height: 8px;
    width: 100%;
    background-color: rgb(33, 33, 33);
}

.middle {
    height: 500px;
    width: 100%;
    background-color: black;
    display: flex;
    justify-content: space-around;
}

.mid1 {
    height: 450px;
    width: 50%;
    display: flex;
    justify-content: center;
    flex-direction: column;
    gap: 20px;
    background-color: black;
    margin-left: 173px;
}

.mid1> :nth-child(1) {
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 900;
    font-size: 48px;
    color: white;
}

.mid1> :nth-child(2) {
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 500;
    font-size: 24px;
    color: white;
}

.mid2 {
    height: 450px;
    width: 50%;
    margin-right: 173px;
    /* background-color: aquamarine; */
    position: relative;
}


.mid2 img {
    height: 450px;
    width: 100%;
    position: relative;
    z-index: 10;
}

.mid2 video {
    height: 61%;
    width: 91%;
    position: absolute;
    right: 0px;
    top: 82px;
}

/* ==========================At 200px============================ */
@media (min-width:200px) and (max-width:300px) {

    .middle {
        height: 300px;
        flex-direction: column;
    }

    .mid1 {
        width: 100%;
        height: 50%;
        margin-left: 0px;
        margin-bottom: 0px;
    }

    .mid1> :nth-child(1) {
        font-family: Arial, Helvetica, sans-serif;
        font-weight: 900;
        font-size: 16px;
        color: white;
        text-align: center;
        padding-top: 20px;
    }

    .mid1> :nth-child(2) {
        font-family: Arial, Helvetica, sans-serif;
        font-weight: 500;
        font-size: 12px;
        color: white;
        text-align: center;
        margin-left: 15px;
        margin-right: 15px;
    }

    .mid2 {
        width: 75%;
        height: 50%;
        margin: auto;
        overflow: hidden;
        
    }

    .mid2 img {
        height: 100%;
        width: 100%;
        display: block;
        margin: auto;
        position: relative;
        z-index: 10;
    }

    .mid2 video {
        height: 60%;
        width: 94%;
        position: absolute;
        right: 0px;
        top: 28px;
    }
}

/* ==========================At 400px============================ */
@media (min-width:301px) and (max-width:400px) {

    .middle {
         height: 550px;
        flex-direction: column;
    }

    .mid1 {
        width: 100%;
        height: 50%;
        margin-left: 0px;
        margin-bottom: 0px;
    }

    .mid1> :nth-child(1) {
        font-family: Arial, Helvetica, sans-serif;
        font-weight: 900;
        font-size: 28px;
        color: white;
        text-align: center;
        padding-top: 20px;

    }

    .mid1> :nth-child(2) {
        font-family: Arial, Helvetica, sans-serif;
        font-weight: 500;
        font-size: 19px;
        color: white;
        text-align: center;
        margin-left: 15px;
        margin-right: 15px;
    }

    .mid2 {
        width: 98%;
        height: 50%;
        margin: auto;
        overflow: hidden;
    }

    .mid2 img {
        height: 100%;
        width: 100%;
        display: block;
        margin: auto;
        position: relative;
        z-index: 10;
    }

    .mid2 video {
        height: 65%;
        width: 92%;
        position: absolute;
        right: 0px;
        top: 40px;
    }
}

/* ===============================At 500px================================== */
@media(min-width:401px) and (max-width:500px) {

    .middle {
        height: 500px;

        flex-direction: column;
    }

    .mid1 {
        width: 100%;
        height: 40%;
        margin-left: 0px;
    }

    .mid1> :nth-child(1) {
        font-family: Arial, Helvetica, sans-serif;
        font-weight: 900;
        font-size: 28px;
        color: white;
        text-align: center;
        padding-top: 20px;

    }

    .mid1> :nth-child(2) {
        font-family: Arial, Helvetica, sans-serif;
        font-weight: 500;
        font-size: 19px;
        color: white;
        text-align: center;
         margin-left: 25px;
        margin-right: 25px;
    }

    .mid2 {
        width: 100%;
        height: 60%;
        margin: auto;

    }

    .mid2 img {
        height: 100%;
        width: 100%;
        position: relative;
        z-index: 10;
    }

    .mid2 video {
        height: 65%;
        width: 93%;
        position: absolute;
        right: 0px;
        top: 50px;
    }
}

/* ===============================At 600px================================== */
@media(min-width:501px) and (max-width:600px) {

    .middle {
        height: 500px;
        flex-direction: column;
    }

    .mid1 {
        width: 80%;
        height: 40%;
        margin-left: 0px;
        margin: auto;
    }

    .mid1> :nth-child(1) {
        font-family: Arial, Helvetica, sans-serif;
        font-weight: 900;
        font-size: 28px;
        color: white;
        text-align: center;
        padding-top: 20px;
    }

    .mid1> :nth-child(2) {
        font-family: Arial, Helvetica, sans-serif;
        font-weight: 500;
        font-size: 19px;
        color: white;
        text-align: center;
        margin-left: 25px;
        margin-right: 25px;
    }

    .mid2 {
        width: 80%;
        height: 60%;
        margin: auto;

    }

    .mid2 img {
        height: 100%;
        width: 100%;
        position: relative;
        z-index: 10;
    }

    .mid2 video {
        height: 65%;
        width: 93%;
        position: absolute;
        right: 0px;
        top: 60px;
    }
}

/* ==========================At 768px========================================================== */
@media(min-width:601px) and (max-width:768px) {
    .middle {
        height: 400px;
        width: 100%;
    }

    .mid1 {
        width: 100%;
        height: 400px;
        margin-left: 0px;
    }

    .mid1> :nth-child(1) {
        font-family: Arial, Helvetica, sans-serif;
        font-weight: 900;
        font-size: 28px;
        color: white;
        text-align: center;
        padding-top: 20px;

    }

    .mid1> :nth-child(2) {
        font-family: Arial, Helvetica, sans-serif;
        font-weight: 500;
        font-size: 19px;
        color: white;
        text-align: center;

        margin-left: 20px;
        margin-right: 20px;
    }

    .mid2 {
        width: 100%;
        margin-right: 0px;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .mid2 img {
        height: 75%;
        width: 100%;
        position: relative;
        z-index: 10;
        margin-top: 50px;

    }

    .mid2 video {
        height: 50%;
        width: 86.8%;
        position: absolute;
        right: 0px;
        top: 115px;
    }
}

/* ==========================At 900px========================================================== */
@media(min-width:769px) and (max-width:900px) {
    .middle {
        height: 400px;
        width: 100%;
    }

    .mid1 {
        width: 100%;
        height: 400px;
        margin-left: 0px;
    }

    .mid1> :nth-child(1) {
        font-family: Arial, Helvetica, sans-serif;
        font-weight: 900;
        font-size: 28px;
        color: white;
        text-align: center;
        padding-top: 20px;

    }

    .mid1> :nth-child(2) {
        font-family: Arial, Helvetica, sans-serif;
        font-weight: 500;
        font-size: 19px;
        color: white;
        text-align: center;

        margin-left: 25px;
        margin-right: 25px;
    }

    .mid2 {
        width: 100%;
        margin-right: 0px;
        height: 400px;
        display: flex;
        justify-content: center;
        align-items: center;


    }

    .mid2 img {
        height: 75%;
        width: 100%;
        position: relative;
        z-index: 10;
        margin-top: 50px;

    }

    .mid2 video {
        height: 50%;
        width: 85.8%;
        position: absolute;
        right: 10px;
        top: 135px;
    }
}

/* ==========================At 1200px========================================================== */
@media(min-width:901px) and (max-width:1200px) {
    .middle {
        height: 500px;
        width: 100%;
    }

    .mid1 {
        width: 100%;
        height: 500px;
        margin-left: 0px;


    }

    .mid1> :nth-child(1) {
        font-family: Arial, Helvetica, sans-serif;
        font-weight: 900;
        font-size: 36px;
        color: white;
        text-align: center;
        padding-top: 20px;

    }

    .mid1> :nth-child(2) {
        font-family: Arial, Helvetica, sans-serif;
        font-weight: 500;
        font-size: 21px;
        color: white;
        text-align: center;

        margin-left: 35px;
        margin-right: 35px;
    }

    .mid2 {
        width: 100%;
        margin-right: 0px;
        height: 500px;
        display: flex;
        justify-content: center;
        align-items: center;


    }

    .mid2 img {
        height: 75%;
        width: 100%;
        position: relative;
        z-index: 10;
        margin-top: 50px;

    }

    .mid2 video {
        height: 55%;
        width: 86.8%;
        position: absolute;
        right: 0px;
        top: 135px;
        padding-right: 5px;
    }
}

/*==================================At 1440px==============================*/
@media(min-width:1201px) and (max-width:1440px) {
    .middle {
        height: 500px;
        width: 100%;
    }

    .mid1 {
        width: 100%;
        height: 500px;
        margin-left: 140px;


    }

    .mid1> :nth-child(1) {
        font-family: Arial, Helvetica, sans-serif;
        font-weight: 900;
        font-size: 40px;
        color: white;
        text-align: center;
        padding-top: 20px;

    }

    .mid1> :nth-child(2) {
        font-family: Arial, Helvetica, sans-serif;
        font-weight: 500;
        font-size: 24px;
        color: white;
        text-align: center;

        margin-left: 35px;
        margin-right: 35px;
    }

    .mid2 {
        width: 100%;
        margin-right: 140px;
        height: 500px;
        display: flex;
        justify-content: center;
        align-items: center;


    }

    .mid2 img {
        height: 75%;
        width: 100%;
        position: relative;
        z-index: 10;
        margin-top: 50px;

    }

    .mid2 video {
        height: 55%;
        width: 86.8%;
        position: absolute;
        right: 0px;
        top: 140px;
        padding-right: 10px;
    }
}

/* ================================================================================= */
.middle2 {

    height: 550px;
    width: 100%;
    background-color: black;
    display: flex;
    justify-content: space-around;

}

.mid3 {
    height: 500px;
    width: 50%;
    margin-left: 173px;
    background-color: black;
    position: relative;
}

.mid3 img {
    height: 93%;
    width: 100%;
    display: block;
    margin: auto;
}

.round {
    height: 100px;
    width: 55%;
    top: 335px;
    left: 130px;
    display: flex;
    border-radius: 10px;
    position: absolute;
    background-color: black;
    border: 2px solid gray;

}


.mg {
    height: 100%;
    width: 28%;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    background-color: balck;
}

.mg img {
    height: 90%;
    width: 75%;
    margin-top: 5px;
    margin-bottom: 5px;
}

.str {
    height: 100%;
    width: 50%;
    background-color: black;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.str h3 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    color: white;
}

.str span {
    color: blue;
}

.anim {
    height: 100%;
    width: 22%;
    /* background-color: red; */
    display: flex;
    justify-content: center;
    align-items: center;
}

.cir {
    height: 30px;
    width: 30px;
    border-radius: 50%;
    /* background-color: aqua; */
    border: 4px dotted blue;
    animation-name: abc;
    animation-duration: 2s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;

}

@keyframes abc {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }

}

.mid4 {
    width: 50%;
    height: 500px;
    display: flex;
    justify-content: center;
    flex-direction: column;
    gap: 20px;
    background-color: black;
    margin-right: 173px;
}

.mid4> :nth-child(1) {
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 900;
    font-size: 46px;
    color: white;


}

.mid4> :nth-child(2) {
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 500;
    font-size: 24px;
    color: white;

}

/* ====================================== At 200px============================= */
@media(min-width:200px) and (max-width:300px) {
    .middle2 {
        height: 300px;
        flex-direction: column-reverse;
    }

    .mid3 {
        width: 75%;
        height: 50%;
        margin-left: 0px;
        margin: auto;


    }

    .round {
        height: 30px;
        width: 61%;
        top: 80%;
        left: 50%;
        transform: translate(-50%, -50%);
        border-radius: 5px;
        
    }

    .str>:nth-child(1) {
        font-size: 6px;

    }

    .str>:nth-child(2) {
        margin-top: 2px;
        font-size: 5px;

    }

    .mg img {
        height: 90%;
        width: 75%;
        margin-top: 1px;
        margin-bottom:1px;
        
        
    }

    .cir {
        height: 15px;
        width: 15px;
        border: 2px dotted blue;
    }


    .mid4 {
        width: 100%;
        height: 50%;
        margin-left: 0px;
    }

    .mid4> :nth-child(1) {
        font-family: Arial, Helvetica, sans-serif;
        font-weight: 900;
        font-size: 16px;
        color: white;
        text-align: center;
        padding-top: 20px;
        margin: 0 20px;
    }

    .mid4> :nth-child(2) {
        font-family: Arial, Helvetica, sans-serif;
        font-weight: 500;
        font-size: 12px;
        color: white;
        text-align: center;
        margin-left: 15px;
        margin-right: 15px;

    }
}

/* ====================================== At 400px============================= */
@media(min-width:301px) and (max-width:400px) {




    .middle2 {
        flex-direction: column-reverse;
    }

    .mid3 {
        width: 95%;
        height: 50%;
        margin-left: 0px;
        margin: auto;


    }

    .round {
        height: 70px;
        width: 62%;
        top: 80%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .str>:nth-child(1) {
        font-size: 12px;

    }

    .str>:nth-child(2) {
        margin-top: 5px;
        font-size: 10px;

    }

    .mg img {
        height: 90%;
        width: 75%;
        margin-top: 5px;
        margin-bottom: 5px;
    }

    .cir {
        height: 25px;
        width: 25px;
    }

    .mid4 {
        width: 100%;
        height: 50%;
        margin-left: 0px;
    }

    .mid4> :nth-child(1) {
        font-family: Arial, Helvetica, sans-serif;
        font-weight: 900;
        font-size: 28px;
        color: white;
        text-align: center;
        padding-top: 20px;
        margin: 0 20px;
    }

    .mid4> :nth-child(2) {
        font-family: Arial, Helvetica, sans-serif;
        font-weight: 500;
        font-size: 19px;
        color: white;
        text-align: center;
        margin-left: 15px;
        margin-right: 15px;

    }
}

/* ====================================== At 500px============================= */
@media(min-width:401px) and (max-width:500px) {

    .middle2 {
        width: 100%;
        flex-direction: column-reverse;
    }

    .mid3 {
        width: 85%;
        height: 50%;
        margin-left: 0px;
        margin: auto;
    }

    .round {
        height: 70px;
        width: 62%;
        top: 80%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .str>:nth-child(1) {
        font-size: 14px;

    }

    .str>:nth-child(2) {
        margin-top: 5px;
        font-size: 12px;

    }

    .mg img {
        height: 90%;
        width: 75%;
        margin-top: 5px;
        margin-bottom: 5px;
    }

    .cir {
        height: 25px;
        width: 25px;
    }

    .mid4 {
        width: 100%;
        height: 50%;
        margin-left: 0px;
    }

    .mid4> :nth-child(1) {
        font-family: Arial, Helvetica, sans-serif;
        font-weight: 900;
        font-size: 28px;
        color: white;
        text-align: center;
        padding-top: 20px;
        margin: 0 30px;
    }

    .mid4> :nth-child(2) {
        font-family: Arial, Helvetica, sans-serif;
        font-weight: 500;
        font-size: 19px;
        color: white;
        text-align: center;
        margin-left: 30px;
        margin-right: 30px;

    }
}

/* ====================================== At 600px============================= */
@media(min-width:501px) and (max-width:600px) {

    .middle2 {
        width: 100%;
        flex-direction: column-reverse;
    }

    .mid3 {
        width: 65%;
        height: 50%;
        margin-left: 0px;
        margin: auto;
    }

    .round {
        height: 70px;
        width: 63%;
        top: 78%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .str>:nth-child(1) {
        font-size: 14px;

    }

    .str>:nth-child(2) {
        margin-top: 5px;
        font-size: 12px;

    }

    .mg img {
        height: 90%;
        width: 80%;
        margin-top: 5px;
        margin-bottom: 5px;
    }

    .cir {
        height: 28px;
        width: 28px;
    }

    .mid4 {
        width: 90%;
        height: 50%;
        margin-left: 0px;
        margin: auto;
    }

    .mid4> :nth-child(1) {
        font-family: Arial, Helvetica, sans-serif;
        font-weight: 900;
        font-size: 28px;
        color: white;
        text-align: center;
        padding-top: 20px;
        margin: 0 20px;
    }

    .mid4> :nth-child(2) {
        font-family: Arial, Helvetica, sans-serif;
        font-weight: 500;
        font-size: 19px;
        color: white;
        text-align: center;
        margin-left: 15px;
        margin-right: 15px;

    }
}

/* ====================================== At 768px============================= */
@media(min-width:601px) and (max-width:768px) {

    .middle2 {
        height: 400px;
        width: 100%;

    }

    .mid3 {
        width: 50%;
        height: 100%;
        margin-left: 0px;
        margin: auto;
        padding-top: 50px;
        padding-bottom: 10px;

    }

    .round {
        height: 70px;
        width: 62%;
        top: 78%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .str>:nth-child(1) {
        font-size: 14px;

    }

    .str>:nth-child(2) {
        margin-top: 5px;
        font-size: 12px;

    }

    .mg img {
        height: 90%;
        width: 75%;
        margin-top: 5px;
        margin-bottom: 5px;
    }

    .mid4 {
        height: 100%;
        width: 50%;
        margin-right: 0px;
        align-items: center;
        justify-content: center;

    }

    .mid4> :nth-child(1) {
        font-family: Arial, Helvetica, sans-serif;
        font-weight: 900;
        font-size: 28px;
        color: white;
        text-align: center;

        margin-right: 20px;


    }

    .mid4> :nth-child(2) {
        font-family: Arial, Helvetica, sans-serif;
        font-weight: 500;
        font-size: 19px;
        color: white;
        text-align: center;
        margin-right: 20px;

    }
}

/*================================================At 900px=====================================*/
@media(min-width:769px) and (max-width:900px) {

    .middle2 {
        width: 100%;
        height: 400px;
    }

    .mid3 {
        width: 50%;
        height: 100%;
        margin-left: 0px;
        margin: auto;
        padding-top: 50px;
    }

    .round {
        height: 70px;
        width: 60%;
        top: 80%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .str>:nth-child(1) {
        font-size: 14px;

    }

    .str>:nth-child(2) {
        margin-top: 5px;
        font-size: 12px;

    }

    .mg img {
        height: 90%;
        width: 75%;
        margin-top: 5px;
        margin-bottom: 5px;
    }

    .mid4 {
        width: 50%;
        height: 100%;
        margin-left: 0px;
        margin: auto;
    }

    .mid4> :nth-child(1) {
        font-family: Arial, Helvetica, sans-serif;
        font-weight: 900;
        font-size: 28px;
        color: white;
        text-align: center;
        margin-right: 20px;

    }

    .mid4> :nth-child(2) {
        font-family: Arial, Helvetica, sans-serif;
        font-weight: 500;
        font-size: 19px;
        color: white;
        text-align: center;
        margin-right: 20px;

    }
}

/*================================================At 1200px=====================================*/
@media(min-width:901px) and (max-width:1200px) {

    .middle2 {
        width: 100%;
        height: 500px;
    }

    .mid3 {
        width: 50%;
        height: 100%;
        margin-left: 0px;
        margin: auto;
        padding-top: 50px;
        padding-bottom: 30px;
    }

    .round {
        height: 85px;
        width: 60%;
        top: 75%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .str {
        margin-left: 5px;
    }

    .str>:nth-child(1) {
        font-size: 18px;

    }

    .str>:nth-child(2) {
        margin-top: 5px;
        font-size: 16px;

    }

    .mg img {
        height: 90%;
        width: 75%;
        margin-top: 5px;
        margin-bottom: 5px;
    }

    .mid4 {
        width: 50%;
        height: 100%;
        margin-left: 0px;
        margin: auto;
    }

    .mid4> :nth-child(1) {
        font-family: Arial, Helvetica, sans-serif;
        font-weight: 900;
        font-size: 36px;
        color: white;
        text-align: center;
        margin-right: 20px;


    }

    .mid4> :nth-child(2) {
        font-family: Arial, Helvetica, sans-serif;
        font-weight: 500;
        font-size: 21px;
        color: white;
        text-align: center;
        margin-right: 20px;

    }
}

/*================================================At 1440px=====================================*/
@media(min-width:1201px) and (max-width:1440px) {

    .middle2 {
        width: 100%;
        height: 500px;
    }

    .mid3 {
        width: 50%;
        height: 100%;
        margin: auto;
        padding-top: 50px;
        padding-bottom: 30px;
        margin-left: 140px;
    }

    .round {
        height: 85px;
        width: 60%;
        top: 76%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .str {
        margin-left: 5px;
    }

    .str>:nth-child(1) {
        font-size: 19px;

    }

    .str>:nth-child(2) {
        margin-top: 5px;
        font-size: 17px;

    }

    .mg img {
        height: 90%;
        width: 75%;
        margin-top: 5px;
        margin-bottom: 5px;
    }

    .mid4 {
        width: 50%;
        height: 100%;
        margin: auto;
        margin-right: 140px;
    }

    .mid4> :nth-child(1) {
        font-family: Arial, Helvetica, sans-serif;
        font-weight: 900;
        font-size: 40px;
        color: white;
        text-align: center;

    }

    .mid4> :nth-child(2) {
        font-family: Arial, Helvetica, sans-serif;
        font-weight: 500;
        font-size: 24px;
        color: white;
        text-align: center;
        margin-left: 15px;
        margin-right: 15px;

    }
}

/* ============================================================ */
.watch {
    height: 500px;
    width: 100%;
    background-color: black;
    display: flex;
    justify-content: space-around;

}

.watch1 {

    height: 450px;
    width: 50%;
    display: flex;
    justify-content: center;
    flex-direction: column;
    gap: 20px;
    background-color: black;
    margin-left: 173px;
}

.watch1> :nth-child(1) {
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 900;
    font-size: 48px;
    color: white;

}

.watch1> :nth-child(2) {
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 500;
    font-size: 24px;
    color: white;

}


.watch2 {
    height: 450px;
    width: 50%;
    margin-right: 173px;
    background-color: black;
    position: relative;
}

.watch2 img {
    display: block;
    width: 100%;
    margin: auto;
    margin-top: 30px;
    position: relative;
    z-index: 10;
}

.watch2 video {
    height: 78%;
    width: 63%;
    position: absolute;
    right: 110px;
    top: 0px;
}


/*===========================================At 200px to 300px=======================================*/

@media (min-width:201px) and (max-width:300px) {

    .watch {
        height: 300px;
        flex-direction: column;
    }

    .watch1 {
        height: 50%;
        width: 100%;
        margin-left: 0px;
        display: flex;
        align-items: center;
        gap: 20px;
    }

    .watch1> :nth-child(1) {
        font-family: Arial, Helvetica, sans-serif;
        font-weight: 900;
        font-size: 16px;
        color: white;
    }

    .watch1> :nth-child(2) {
        font-family: Arial, Helvetica, sans-serif;
        font-weight: 500;
        font-size: 12px;
        color: white;
        margin: 0px 15px;
        display: block;
        text-align: center;
    }


    .watch2 {
        height: 50%;
        width: 90%;
        margin: auto;
        /* background-color: red; */


    }

    .watch2 img {
        margin-top: 0px;
        height: 100%;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .watch2 video {
        width: 64%;
        height: 67%;
        top: 0%;
        left: 50%;
        transform: translate(-50%);
    }
}

/*===========================================At 300px to 400px=======================================*/
@media (min-width:301px) and (max-width:400px) {

    .watch {
        height: 550px;
        flex-direction: column;
    }

    .watch1 {
        height: 50%;
        width: 100%;
        margin-left: 0px;
        display: flex;
        align-items: center;
        gap: 20px;


    }

    .watch1> :nth-child(1) {
        font-family: Arial, Helvetica, sans-serif;
        font-weight: 900;
        font-size: 28px;
        color: white;


    }

    .watch1> :nth-child(2) {
        font-family: Arial, Helvetica, sans-serif;
        font-weight: 500;
        font-size: 19px;
        color: white;
        margin: 0px 15px;
        display: block;
        text-align: center;
    }


    .watch2 {
        height: 50%;
        width: 100%;

    }

    .watch2 img {
        margin-top: 0px;
        height: 100%;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .watch2 video {
        width: 65%;
        height: 67%;
        top: 0%;
        left: 50%;
        transform: translate(-50%);
    }
}

/*===========================================At 400px to 500px=======================================*/
@media (min-width:401px) and (max-width:500px) {

    .watch {
        height: 550px;
        flex-direction: column;
    }

    .watch1 {
        height: 50%;
        width: 100%;
        margin-left: 0px;
        display: flex;
        align-items: center;
        gap: 20px;


    }

    .watch1> :nth-child(1) {
        font-family: Arial, Helvetica, sans-serif;
        font-weight: 900;
        font-size: 28px;
        color: white;


    }

    .watch1> :nth-child(2) {
        font-family: Arial, Helvetica, sans-serif;
        font-weight: 500;
        font-size: 19px;
        color: white;
        margin: 0px 15px;
        display: block;
        text-align: center;
    }


    .watch2 {
        height: 50%;
        width: 100%;

    }

    .watch2 img {
        margin-top: 0px;
        height: 100%;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .watch2 video {
        width: 64%;
        height: 70%;
        top: 0%;
        left: 50%;
        transform: translate(-50%);
    }
}

/*===========================================At 500px to 600px=======================================*/
@media (min-width:501px) and (max-width:600px) {

    .watch {
        height: 550px;
        flex-direction: column;
    }

    .watch1 {
        height: 50%;
        width: 90%;
        margin-left: 0px;
        display: flex;
        align-items: center;
        gap: 20px;
        margin: auto;


    }

    .watch1> :nth-child(1) {
        font-family: Arial, Helvetica, sans-serif;
        font-weight: 900;
        font-size: 28px;
        color: white;
        margin-right: 15px;
        margin-left: 15px;


    }

    .watch1> :nth-child(2) {
        font-family: Arial, Helvetica, sans-serif;
        font-weight: 500;
        font-size: 19px;
        color: white;
        margin: 0px 15px;
        display: block;
        text-align: center;
    }


    .watch2 {
        height: 50%;
        width: 75%;
        margin: auto;
    }

    .watch2 img {
        margin-top: 0px;
        height: 100%;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .watch2 video {
        width: 64%;
        height: 70%;
        top: 0%;
        left: 50%;
        transform: translate(-50%);
    }
}

/*===========================================At 600px to 768px=======================================*/
@media (min-width:601px) and (max-width:768px) {

    .watch {
        height: 400px;
        display: flex;

    }

    .watch1 {
        height: 100%;
        width: 50%;
        margin-left: 0px;
        display: flex;
        align-items: center;
        gap: 20px;
        margin: auto;
    }

    .watch1> :nth-child(1) {
        font-family: Arial, Helvetica, sans-serif;
        font-weight: 900;
        font-size: 28px;
        color: white;
        margin-right: 15px;
        margin-left: 15px;
        text-align: center;


    }

    .watch1> :nth-child(2) {
        font-family: Arial, Helvetica, sans-serif;
        font-weight: 500;
        font-size: 19px;
        color: white;
        margin: 0px 15px;
        display: block;
        text-align: center;
    }


    .watch2 {
        height: 100%;
        width: 50%;
        margin-right: 0px;
        /* background-color: red; */

    }

    .watch2 img {
        margin-top: 0px;
        height: 70%;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .watch2 video {
        width: 64%;
        height: 76%;
        top: 0%;
        left: 50%;
        transform: translate(-50%);
    }
}

/*===========================================At 769px to 900px=======================================*/
@media (min-width:769px) and (max-width:900px) {

    .watch {
        height: 400px;
        display: flex;

    }

    .watch1 {
        height: 100%;
        width: 50%;
        margin-left: 0px;
        display: flex;
        align-items: center;
        gap: 20px;
        margin: auto;
    }

    .watch1> :nth-child(1) {
        font-family: Arial, Helvetica, sans-serif;
        font-weight: 900;
        font-size: 28px;
        color: white;
        margin-right: 15px;
        margin-left: 15px;


    }

    .watch1> :nth-child(2) {
        font-family: Arial, Helvetica, sans-serif;
        font-weight: 500;
        font-size: 19px;
        color: white;
        margin: 0px 15px;
        display: block;
        text-align: center;
    }


    .watch2 {
        height: 100%;
        width: 50%;
        margin-right: 0px;

    }

    .watch2 img {
        margin-top: 0px;
        height: 70%;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .watch2 video {
        width: 64%;
        height: 78%;
        top: 0%;
        left: 50%;
        transform: translate(-50%);
    }
}

/*===========================================At 900px to 1200px=======================================*/
@media (min-width:901px) and (max-width:1200px) {

    .watch {
        height: 500px;
        display: flex;

    }

    .watch1 {
        height: 100%;
        width: 50%;
        margin-left: 0px;
        display: flex;
        align-items: center;
        gap: 20px;
        margin: auto;
    }

    .watch1> :nth-child(1) {
        font-family: Arial, Helvetica, sans-serif;
        font-weight: 900;
        font-size: 36px;
        color: white;
        margin-right: 15px;
        margin-left: 15px;


    }

    .watch1> :nth-child(2) {
        font-family: Arial, Helvetica, sans-serif;
        font-weight: 500;
        font-size: 21px;
        color: white;
        margin: 0px 15px;
        display: block;
        text-align: center;
    }


    .watch2 {
        height: 100%;
        width: 50%;
        /* background-color: red; */
        margin-right: 0px;

    }

    .watch2 img {
        margin-top: 0px;
        height: 70%;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .watch2 video {
        width: 64%;
        height: 78%;
        top: 0%;
        left: 50%;
        transform: translate(-50%);
    }
}

/*===========================================At 1200px to 1440px=======================================*/
@media (min-width:1201px) and (max-width:1440px) {

    .watch {
        height: 500px;
        display: flex;

    }

    .watch1 {
        height: 100%;
        width: 50%;
        display: flex;
        align-items: center;
        gap: 20px;
        margin: auto;
        margin-left: 140px;
    }

    .watch1> :nth-child(1) {
        font-family: Arial, Helvetica, sans-serif;
        font-weight: 900;
        font-size: 40px;
        color: white;
        margin-right: 15px;
        margin-left: 15px;


    }

    .watch1> :nth-child(2) {
        font-family: Arial, Helvetica, sans-serif;
        font-weight: 500;
        font-size: 24px;
        color: white;
        margin: 0px 15px;
        display: block;
        text-align: center;
    }


    .watch2 {
        height: 100%;
        width: 50%;
        /* background-color: red; */
        margin-right: 140px;

    }

    .watch2 img {
        margin-top: 0px;
        height: 70%;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .watch2 video {
        width: 64%;
        height: 76%;
        top: 0%;
        left: 50%;
        transform: translate(-50%);
    }
}



/* ========================================================= */
.kids {
    height: 550px;
    width: 100%;
    background-color: black;
    display: flex;
    justify-content: space-around;

}

.kid1 {
    height: 500px;
    width: 50%;
    margin-left: 173px;
    background-color: black;
    display: flex;
    justify-content: center;
    align-items: center;

}

.kid1 img {
    height: 95%;
    width: 100%;
}

.kid2 {
    width: 50%;
    height: 500px;
    display: flex;
    justify-content: center;
    flex-direction: column;
    gap: 20px;
    background-color: black;
    margin-right: 173px;

}


.kid2>:nth-child(1) {

    font-family: Arial, Helvetica, sans-serif;
    font-weight: 900;
    font-size: 46px;
    color: white;

}

.kid2>:nth-child(2) {
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 500;
    font-size: 24px;
    color: white;
}

/*===============================At 200px to 300px========================*/
@media (min-width:200px) and (max-width:300px) {

    .kids {
        height: 320px;
        flex-direction: column-reverse;
    }

    .kid1 {
        height: 50%;
        width: 100%;
        margin-left: 0px;
    }

    .kid1 img {
        height: 100%;
        width: 90%;
        display: block;
        margin: auto;

    }

    .kid2 {
        height: 50%;
        width: 100%;
        margin-right: 0px;
        gap: 20px;
    }

    .kid2> :nth-child(1) {
        font-family: Arial, Helvetica, sans-serif;
        font-weight: 900;
        font-size: 16px;
        color: white;
        margin-left: 15px;
        margin-right: 15px;
        text-align: center;

    }

    .kid2> :nth-child(2) {
        font-family: Arial, Helvetica, sans-serif;
        font-weight: 500;
        font-size: 12px;
        color: white;
        margin: 0px 15px;
        display: block;
        text-align: center;
    }






}

/*===============================At 300px to 400px========================*/
@media (min-width:301px) and (max-width:400px) {

    .kids {
        height: 550px;
        flex-direction: column-reverse;
    }

    .kid1 {
        height: 50%;
        width: 100%;
        margin-left: 0px;
    }

    .kid1 img {
        height: 100%;
        width: 96%;
        display: block;
        margin: auto;

    }

    .kid2 {
        height: 50%;
        width: 100%;
        margin-right: 0px;
        gap: 20px;
    }

    .kid2> :nth-child(1) {
        font-family: Arial, Helvetica, sans-serif;
        font-weight: 900;
        font-size: 28px;
        color: white;
        margin-left: 15px;
        margin-right: 15px;
        text-align: center;

    }

    .kid2> :nth-child(2) {
        font-family: Arial, Helvetica, sans-serif;
        font-weight: 500;
        font-size: 19px;
        color: white;
        margin: 0px 15px;
        display: block;
        text-align: center;
    }
}

/*===============================At 400px to 500px========================*/
@media (min-width:401px) and (max-width:500px) {

    .kids {
        height: 550px;
        flex-direction: column-reverse;
    }

    .kid1 {
        height: 50%;
        width: 100%;
        margin-left: 0px;

    }

    .kid1 img {
        height: 100%;
        width: 90%;
        display: block;
        margin: auto;


    }

    .kid2 {
        height: 50%;
        width: 100%;
        margin-right: 0px;
        gap: 20px;
    }

    .kid2> :nth-child(1) {
        font-family: Arial, Helvetica, sans-serif;
        font-weight: 900;
        font-size: 28px;
        color: white;
        margin-left: 20px;
        margin-right: 20px;
        text-align: center;

    }

    .kid2> :nth-child(2) {
        font-family: Arial, Helvetica, sans-serif;
        font-weight: 500;
        font-size: 19px;
        color: white;
        margin: 0px 20px;
        display: block;
        text-align: center;
    }
}


/*===============================At 500px to 600px========================*/
@media (min-width:501px) and (max-width:600px) {

    .kids {
        height: 550px;
        flex-direction: column-reverse;
    }

    .kid1 {
        height: 50%;
        width: 100%;
        margin-left: 0px;
    }

    .kid1 img {
        height: 100%;
        width: 70%;
        display: block;
        margin: auto;

    }

    .kid2 {
        height: 50%;
        width: 100%;
        margin-right: 0px;
        gap: 20px;
    }

    .kid2> :nth-child(1) {
        font-family: Arial, Helvetica, sans-serif;
        font-weight: 900;
        font-size: 28px;
        color: white;
        margin-left: 20px;
        margin-right: 20px;
        text-align: center;

    }

    .kid2> :nth-child(2) {
        font-family: Arial, Helvetica, sans-serif;
        font-weight: 500;
        font-size: 19px;
        color: white;
        margin: 0px 50px;
        display: block;
        text-align: center;
    }
}

/*===============================At 601px to 768px========================*/
@media (min-width:601px) and (max-width:768px) {

    .kids {
        height: 400px;

    }

    .kid1 {
        height: 100%;
        width: 50%;
        margin-left: 0px;

    }

    .kid1 img {
        height: 75%;
        width: 100%;


    }

    .kid2 {
        height: 100%;
        width: 50%;
        margin-right: 0px;
        gap: 20px;
    }

    .kid2> :nth-child(1) {
        font-family: Arial, Helvetica, sans-serif;
        font-weight: 900;
        font-size: 28px;
        color: white;
        margin-left: 20px;
        margin-right: 20px;
        text-align: center;

    }

    .kid2> :nth-child(2) {
        font-family: Arial, Helvetica, sans-serif;
        font-weight: 500;
        font-size: 19px;
        color: white;
        margin: 0px 20px;
        display: block;
        text-align: center;
    }
}

/*===============================At 769px to 900px========================*/
@media (min-width:769px) and (max-width:900px) {

    .kids {
        height: 400px;

    }

    .kid1 {
        height: 100%;
        width: 50%;
        margin-left: 0px;

    }

    .kid1 img {
        height: 75%;
        width: 100%;


    }

    .kid2 {
        height: 100%;
        width: 50%;
        margin-right: 0px;
        gap: 20px;
    }

    .kid2> :nth-child(1) {
        font-family: Arial, Helvetica, sans-serif;
        font-weight: 900;
        font-size: 28px;
        color: white;
        margin-left: 20px;
        margin-right: 20px;
        text-align: center;

    }

    .kid2> :nth-child(2) {
        font-family: Arial, Helvetica, sans-serif;
        font-weight: 500;
        font-size: 19px;
        color: white;
        margin: 0px 20px;
        display: block;
        text-align: center;
    }
}

/*===============================At 901px to 1200px========================*/
@media (min-width:901px) and (max-width:1200px) {

    .kids {
        height: 500px;
        width: 100%;
    }

    .kid1 {
        height: 100%;
        width: 50%;
        margin-left: 0px;
    }

    .kid1 img {
        height: 75%;
        width: 95%;
        display: block;
        margin: auto;
    }

    .kid2 {
        height: 100%;
        width: 50%;
        margin-right: 0px;
        gap: 20px;
    }

    .kid2> :nth-child(1) {
        font-family: Arial, Helvetica, sans-serif;
        font-weight: 900;
        font-size: 36px;
        color: white;
        margin-left: 20px;
        margin-right: 20px;
        text-align: center;

    }

    .kid2> :nth-child(2) {
        font-family: Arial, Helvetica, sans-serif;
        font-weight: 500;
        font-size: 21px;
        color: white;
        margin: 0px 20px;
        display: block;
        text-align: center;
    }
}

/*===============================At 1201px to 1440px========================*/
@media (min-width:1201px) and (max-width:1440px) {

    .kids {
        height: 500px;
        width: 100%;
    }

    .kid1 {
        height: 100%;
        width: 50%;
        margin-left: 140px;
    }

    .kid1 img {
        height: 75%;
        width: 95%;
        display: block;
        margin: auto;
    }

    .kid2 {
        height: 100%;
        width: 50%;
        margin-right: 140px;
        gap: 20px;
    }

    .kid2> :nth-child(1) {
        font-family: Arial, Helvetica, sans-serif;
        font-weight: 900;
        font-size: 40px;
        color: white;
        text-align: center;

    }

    .kid2> :nth-child(2) {
        font-family: Arial, Helvetica, sans-serif;
        font-weight: 500;
        font-size: 24px;
        color: white;
        display: block;
        text-align: center;
    }
}



/*===============================================================*/
.question {

    height: 150px;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: last baseline;


}

.question h1 {
    font-size: 48px;
    font-family: sans-serif;
    font-weight: 900;
    color: white;
    margin-bottom: 20px;

}

/*===============================At 200px to 300px==========================*/
@media(min-width:200px) and (max-width:300px) {

    .question {
        height: 70px;
        width: 90%;
        justify-content: center;
        align-items: last baseline;
        margin: auto;
    }

    .question h1 {
        font-size: 16px;
        font-family: sans-serif;
        font-weight: 900;
        color: white;
        text-align: center;
        margin-bottom: 15px;


    }
}

/*===============================At 300px to 400px==========================*/
@media(min-width:301px) and (max-width:400px) {

    .question {
        height: 120px;
        justify-content: center;
        align-items: last baseline;
        width: 90%;
        margin: auto;
    }

    .question h1 {
        font-size: 28px;
        font-family: sans-serif;
        font-weight: 900;
        color: white;
        text-align: center;
        margin-bottom: 20px;
    }
}

/*===============================At 400px to 500px==========================*/
@media(min-width:401px) and (max-width:500px) {

    .question {
        height: 120px;
        justify-content: center;
        align-items: last baseline;
        width: 90%;
        margin: auto;
    }

    .question h1 {
        font-size: 28px;
        font-family: sans-serif;
        font-weight: 900;
        color: white;
        text-align: center;
        margin-bottom: 20px;
        margin-left: 25px;
        margin-right: 25px;
    }
}

/*===============================At 500px to 600px==========================*/
@media(min-width:501px) and (max-width:600px) {

    .question {
        height: 95px;
        justify-content: center;
        align-items: last baseline;
        width: 90%;
        margin: auto;
    }

    .question h1 {
        font-size: 28px;
        font-family: sans-serif;
        font-weight: 900;
        color: white;
        text-align: center;
        margin-bottom: 20px;
    }
}

/*===============================At 600px to 768px==========================*/
@media(min-width:601px) and (max-width:768px) {

    .question {
        height: 100px;
        justify-content: center;
        align-items: last baseline;
        width: 90%;
        margin: auto;
    }

    .question h1 {
        font-size: 28px;
        font-family: sans-serif;
        font-weight: 900;
        color: white;
        text-align: center;
        margin-bottom: 20px;
       


    }
}

/*===============================At 769px to 900px==========================*/
@media(min-width:769px) and (max-width:900px) {

    .question {
        height: 100px;
        justify-content: center;
        align-items: last baseline;
        width: 90%;
        margin: auto;
    }

    .question h1 {
        font-size: 28px;
        font-family: sans-serif;
        font-weight: 900;
        color: white;
        text-align: center;
        margin-bottom: 20px;
        margin-left: 20px;
        margin-right: 20px;
    }
}

/*===============================At 901px to 1200px==========================*/
@media(min-width:901px) and (max-width:1200px) {

    .question {
        height: 130px;
        justify-content: center;
        align-items: last baseline;
        width: 90%;
        margin: auto;
    }

    .question h1 {
        font-size: 36px;
        font-family: sans-serif;
        font-weight: 900;
        color: white;
        text-align: center;
        margin-bottom: 20px;
        margin-left: 20px;
        margin-right: 20px;
    }
}

/*===============================At 1201px to 1440px==========================*/
@media(min-width:1201px) and (max-width:1440px) {

    .question {
        height: 140px;
        justify-content: center;
        align-items: last baseline;
        width: 90%;
        margin: auto;
    }

    .question h1 {
        font-size: 40px;
        font-family: sans-serif;
        font-weight: 900;
        color: white;
        text-align: center;
        margin-bottom: 20px;
        margin-left: 20px;
        margin-right: 20px;
    }
}

/* ===================================================================== */

.ques {
    height: auto;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    /* background-color: red; */
}

.q {
    height: 80px;
    width: 76%;
    background-color: rgb(45, 45, 45);
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;

}

.q>:nth-child(1) {
    font-family: sans-serif;
    font-size: 24px;
    color: white;
    font-weight: 400;
    margin-left: 25px;
}
.icnnt{
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    /* background-color: red; */
    margin-right: 25px;
}
.icnnt>:nth-child(1) {
 font-size: 40px;
    color: white;
}
.icnnt>:nth-child(2) {
    font-size: 40px;
    color: white;
    display: none;
}
.qslide{
    height: auto;
    width: 76%;
    background-color: rgb(45, 45, 45);
    margin-top: 1px;
    display: none;
}
.qslide p{
    color: white;
    font-family: sans-serif;
    font-size: 24px;
    margin-top: 30px;
    margin-bottom: 30px;
    margin-right: 150px;
    margin-left: 25px;
    font-weight: 400;
}

.ques2 {
    height: auto;
    width: 100%;
    /* background-color: antiquewhite; */
    margin-top: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

/*===================at 200px to 300px==============================*/
@media(min-width:200px) and (max-width:300px) {
    .ques {
        height: auto;
        width: 100%;

    }

    .q {
        height: 60px;
        width: 90%;
        background-color: rgb(45, 45, 45);
        margin: auto;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .q>:nth-child(1) {
        font-family: sans-serif;
        font-size: 16px;
        color: white;
        font-weight: 400;
        margin-left: 10px;
    }
    .icnnt{
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        /* background-color: red; */
        margin-right: 10px;
    }
    .icnnt>:nth-child(1) {
     font-size: 22px;
        color: white;
    }
    .icnnt>:nth-child(2) {
        font-size: 22px;
        color: white;
        display: none;
    }

    .qslide{
        height: auto;
        width: 90%;
        background-color: rgb(45, 45, 45);
        margin-top: 1px;
        display: none;
    }
    .qslide p{
        color: white;
        font-family: sans-serif;
        font-size: 16px;
        margin-top: 10px;
        margin-bottom: 10px;
        margin-right: 5px;
        margin-left: 10px;
        font-weight: 400;
    }

    

    .ques2 {
        height:auto;
        width: 100%;
        margin-top: 8px;
    }

}

/*===================at 300px to 400px==============================*/
@media(min-width:301px) and (max-width:400px) {
    .ques {
        height: auto;
        width: 100%;

    }

    .q {
        height: 70px;
        width: 90%;
        background-color: rgb(45, 45, 45);
        margin: auto;
        display: flex;
        align-items: center;
        justify-content: space-between;


    }

    .q>:nth-child(1) {
        font-family: sans-serif;
        font-size: 18px;
        color: white;
        font-weight: 400;
        margin-left: 20px;
    }
    .icnnt{
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        /* background-color: red; */
        margin-right: 20px;
    }
    .icnnt>:nth-child(1) {
     font-size: 24px;
        color: white;
    }
    .icnnt>:nth-child(2) {
        font-size: 24px;
        color: white;
        display: none;
    }

    .qslide{
        height: auto;
        width: 90%;
        background-color: rgb(45, 45, 45);
        margin-top: 1px;
        display: none;
    }
    .qslide p{
        color: white;
        font-family: sans-serif;
        font-size: 18px;
        margin-top: 20px;
        margin-bottom: 20px;
        margin-right: 30px;
        margin-left: 20px;
        font-weight: 400;
        text-align: left;
        line-height: 25px;
      
    }
    
    .ques2 {
        height: auto;
        width: 100%;
        margin-top: 8px;
    }


}

/*===================at 400px to 500px==============================*/
@media(min-width:401px) and (max-width:500px) {
    .ques {
        height: auto;
        width: 100%;

    }

    .q {
        height: 70px;
        width: 90%;
        background-color: rgb(45, 45, 45);
        margin: auto;
        display: flex;
        align-items: center;
        justify-content: space-between;


    }

    .q>:nth-child(1) {
        font-family: sans-serif;
        font-size: 19px;
        color: white;
        font-weight: 400;
        margin-left: 20px;
    }
    .icnnt{
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        /* background-color: red; */
        margin-right: 20px;
    }
    .icnnt>:nth-child(1) {
     font-size: 25px;
        color: white;
    }
    .icnnt>:nth-child(2) {
        font-size: 25px;
        color: white;
        display: none;
    }

    .qslide{
        height: auto;
        width: 90%;
        background-color: rgb(45, 45, 45);
        margin-top: 1px;
        display: none;
    }
    .qslide p{
        color: white;
        font-family: sans-serif;
        font-size: 19px;
        margin-top: 20px;
        margin-bottom: 20px;
        margin-right: 30px;
        margin-left: 20px;
        font-weight: 400;
        text-align: left;
        line-height: 25px;
      
    }
    
    .ques2 {
        height: auto;
        width: 100%;
        margin-top: 8px;
    }


}

/*===================at 500px to 600px==============================*/
@media(min-width:501px) and (max-width:600px) {
    .ques {
        height: auto;
        width: 100%;

    }

   

    .q {
        height: 75px;
        width: 85%;
        background-color: rgb(45, 45, 45);
        margin: auto;
        display: flex;
        align-items: center;
        justify-content: space-between;


    }

    .q>:nth-child(1) {
        font-family: sans-serif;
        font-size: 20px;
        color: white;
        font-weight: 400;
        margin-left: 20px;
    }

    .icnnt{
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        /* background-color: red; */
        margin-right: 20px;
    }
    .icnnt>:nth-child(1) {
     font-size: 28px;
        color: white;
    }
    .icnnt>:nth-child(2) {
        font-size: 28px;
        color: white;
        display: none;
    }

    .qslide{
        height: auto;
        width: 85%;
        background-color: rgb(45, 45, 45);
        margin-top: 1px;
        display: none;
    }
    .qslide p{
        color: white;
        font-family: sans-serif;
        font-size: 20px;
        margin-top: 20px;
        margin-bottom: 20px;
        margin-right: 30px;
        margin-left: 20px;
        font-weight: 400;
        text-align: left;
        line-height: 25px;
      
    }
    
    

    .ques2 {
        height: auto;
        width: 100%;
        margin-top: 8px;
    }
}

/*===================at 600px to 768px==============================*/
@media(min-width:601px) and (max-width:768px) {
    .ques {
        height: auto;
        width: 100%;

    }

  

    .q {
        height: 80px;
        width: 76%;
        background-color: rgb(45, 45, 45);
        margin: auto;
        display: flex;
        align-items: center;
        justify-content: space-between;


    }

    .q>:nth-child(1) {
        font-family: sans-serif;
        font-size: 22px;
        color: white;
        font-weight: 400;
        margin-left: 20px;
    }
    .icnnt{
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        /* background-color: red; */
        margin-right: 20px;
    }
    .icnnt>:nth-child(1) {
     font-size: 34px;
        color: white;
    }
    .icnnt>:nth-child(2) {
        font-size: 34px;
        color: white;
        display: none;
    }

    .qslide{
        height: 100%;
        width: 76%;
        background-color: rgb(45, 45, 45);
        margin-top: 1px;
        display: none;
    }
    .qslide p{
        color: white;
        font-family: sans-serif;
        font-size: 22px;
        margin-top: 25px;
        margin-bottom: 25px;
        margin-right: 30px;
        margin-left: 20px;
        font-weight: 400;
        text-align: left;
        line-height: 26px;
      
    }
    .ques2 {
        height: auto;
        width: 100%;
        margin-top: 8px;
    }
}

/*===================at 769px to 900px==============================*/
@media(min-width:769px) and (max-width:900px) {
    .ques {
        height: auto;
        width: 100%;

    }

    .q {
        height: 80px;
        width: 76%;
        background-color: rgb(45, 45, 45);
        margin: auto;
        display: flex;
        align-items: center;
        justify-content: space-between;


    }

    .q>:nth-child(1) {
        font-family: sans-serif;
        font-size: 24px;
        color: white;
        font-weight: 400;
        margin-left: 25px;
    }
    .icnnt{
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        /* background-color: red; */
        margin-right: 25px;
    }
    .icnnt>:nth-child(1) {
     font-size: 36px;
        color: white;
    }
    .icnnt>:nth-child(2) {
        font-size: 36px;
        color: white;
        display: none;
    }

    .qslide{
        height: 100%;
        width: 76%;
        background-color: rgb(45, 45, 45);
        margin-top: 1px;
        display: none;
    }
    .qslide p{
        color: white;
        font-family: sans-serif;
        font-size: 24px;
        margin-top: 26px;
        margin-bottom: 26px;
        margin-right: 30px;
        margin-left: 25px;
        font-weight: 400;
        text-align: left;
        line-height: 26px;
      
    }
    .ques2 {
        height: auto;
        width: 100%;
        margin-top: 8px;
    }
}
/*===================at 901px to 1200px==============================*/
@media(min-width:901px) and (max-width:1200px) {
    .ques {
        height:auto;
        width: 100%;

    }

    .q {
        height: 80px;
        width: 76%;
        background-color: rgb(45, 45, 45);
        margin: auto;
        display: flex;
        align-items: center;
        justify-content: space-between;


    }

    .q>:nth-child(1) {
        font-family: sans-serif;
        font-size: 24px;
        color: white;
        font-weight: 400;
        margin-left: 25px;
    }
    .icnnt{
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        /* background-color: red; */
        margin-right: 25px;
    }
    .icnnt>:nth-child(1) {
     font-size: 38px;
        color: white;
    }
    .icnnt>:nth-child(2) {
        font-size: 38px;
        color: white;
        display: none;
    }

    .qslide{
       height: 100%;
        width: 76%;
        background-color: rgb(45, 45, 45);
        margin-top: 1px;
        display: none;
    }
    .qslide p{
        color: white;
        font-family: sans-serif;
        font-size: 24px;
        margin-top: 28px;
        margin-bottom: 28px;
        margin-right: 50px;
        margin-left: 25px;
        font-weight: 400;
        text-align: left;
        line-height: 26px;
      
    }
    .ques2 {
        height: auto;
        width: 100%;
        margin-top: 8px;
    }
}

/*===================at 1201px to 1440px==============================*/
@media(min-width:1201px) and (max-width:1440px) {
    .ques {
        height: auto;
        width: 100%;

    }

    .q {
        height: 80px;
        width: 76%;
        background-color: rgb(45, 45, 45);
        margin: auto;
        display: flex;
        align-items: center;
        justify-content: space-between;


    }

    .q>:nth-child(1) {
        font-family: sans-serif;
        font-size: 24px;
        color: white;
        font-weight: 400;
        margin-left: 25px;
    }
    .icnnt{
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        /* background-color: red; */
        margin-right: 25px;
    }
    .icnnt>:nth-child(1) {
     font-size: 40px;
        color: white;
    }
    .icnnt>:nth-child(2) {
        font-size: 40px;
        color: white;
        display: none;
    }

    .qslide{
        height: 100%;
        width: 76%;
        background-color: rgb(45, 45, 45);
        margin-top: 1px;
        display: none;
    }
    .qslide p{
        color: white;
        font-family: sans-serif;
        font-size: 24px;
        margin-top: 30px;
        margin-bottom: 30px;
        margin-right: 100px;
        margin-left: 25px;
        font-weight: 400;
        text-align: left;
        line-height: 30px;
      
    }
    .ques2 {
        height: auto;
        width: 100%;
        margin-top: 8px;
    }
}



/*==================================================================*/
.form {
    height: 200px;
    width: 100%;
    /* background-color: yellow; */
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.form>:nth-child(1) {
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 500;
    font-size: 24px;
    text-align: center;
    color: white;
}

.in2 {
    height: 90px;
    width: 100%;
    /* background-color: aqua; */
    display: flex;
    align-items: center;
    justify-content: center;
}

.in2 input {
    margin-top: 0px;
    height: 56px;
    width: 359px;
    font-size: 15px;
    line-height: 50px;
    background-color: transparent;
    border-radius: 5px;
    border: 1px solid gray;
    padding-left: 10px;
    color: white;
}


.in input::placeholder {
    color: rgb(184, 184, 184);
    font-family: sans-serif;
    font-weight: 600;
}

.in2 button {
    width: 213px;
    height: 56px;
    background-color: red;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 24px;
    font-weight: 600;
    color: white;
    border-radius: 5px;
    border: 2px solid red;
    margin-left: 10px;
}

.in2 button i {
    margin-left: 10px;
}

.in2 button:hover {

    background-color: rgb(191, 2, 2);
    border: 1px solid rgb(191, 2, 2);

}

/*===============================At 200px and 300px=======================*/
@media(min-width:200px) and (max-width:300px){

    .form{
        height:200px;
        width: 90%;
        gap: 10px;
        margin: auto;
       
    }

    .form>:nth-child(1) {
        font-family: Arial, Helvetica, sans-serif;
        font-weight: 500;
        font-size: 12px;
        text-align: center;
        color: white;
    }
    .in2 {
        height: 100px;
        width: 100%;
        /* background-color: aqua; */
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        gap: 10px;
      
    }
    .in2 input {
        margin-top: 0px;
        height: 46px;
        width: 180px;
        font-size: 15px;
        line-height: 50px;
        background-color: transparent;
        border-radius: 5px;
        border: 1px solid gray;
        padding-left: 10px;
        color: white;
    }

    .in2 button {
        width: 110px;
        height: 40px;
        background-color: red;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 12px;
        font-weight: 600;
        color: white;
        border-radius: 5px;
        border: 2px solid red;
        margin-left: 0px;
    }

    .in2 button i {
        margin-left: 5px;
    }
    

}

/*===============================At 300px and 400px=======================*/
@media(min-width:301px) and (max-width:400px){

    .form{
        height:250px;
        width: 90%;
        gap: 20px;
        margin: auto;
       
    }

    .form>:nth-child(1) {
        font-family: Arial, Helvetica, sans-serif;
        font-weight: 500;
        font-size: 19px;
        text-align: center;
        color: white;
    
    }
    .in2 {
        height: 100px;
        width: 100%;
        /* background-color: aqua; */
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        gap: 10px;
      
    }
    .in2 input {
        margin-top: 0px;
        height: 50px;
        width: 280px;
        font-size: 15px;
        line-height: 50px;
        background-color: transparent;
        border-radius: 5px;
        border: 1px solid gray;
        padding-left: 10px;
        color: white;
    }

    .in2 button {
        width: 160px;
        height: 45px;
        background-color: red;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 18px;
        font-weight: 600;
        color: white;
        border-radius: 5px;
        border: 2px solid red;
        margin-left: 0px;
    }
    .in2 button i {
        margin-left: 5px;
    }
    

}

/*===============================At 401px and 500px=======================*/
@media(min-width:401px) and (max-width:500px){

    .form{
        height:280px;
        width: 90%;
        gap: 5px;
        margin: auto;
       
        
    }

    .form>:nth-child(1) {
        font-family: Arial, Helvetica, sans-serif;
        font-weight: 600;
        font-size: 19px;
        text-align: center;
        color: white;
    
    
    }
    .in2 {
        height: 140px;
        width: 100%;
        /* background-color: aqua; */
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        gap: 15px;
      
    }
    .in2 input {
        margin-top: 0px;
        height: 50px;
        width: 350px;
        font-size: 15px;
        line-height: 50px;
        background-color: transparent;
        border-radius: 5px;
        border: 1px solid gray;
        padding-left: 10px;
        color: white;
    }

    .in2 button {
        width: 180px;
        height: 50px;
        background-color: red;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 18px;
        font-weight:600;
        color: white;
        border-radius: 5px;
        border: 2px solid red;
        margin-left: 0px;
       
    
    
    }
    .in2 button i {
        margin-left: 10px;
    }
    

}

/*===============================At 501px and 600px=======================*/
@media(min-width:501px) and (max-width:600px){

    .form{
        height:300px;
        width: 90%;
        gap: 0px;
        margin: auto;
       
        
    }

    .form>:nth-child(1) {
        font-family: Arial, Helvetica, sans-serif;
        font-weight: 600;
        font-size: 19px;
        text-align: center;
        color: white;
    
    
    }
    .in2 {
        height: 150px;
        width: 100%;
        /* background-color: aqua; */
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        gap: 15px;
      
    }
    .in2 input {
        margin-top: 0px;
        height: 50px;
        width: 350px;
        font-size: 15px;
        line-height: 50px;
        background-color: transparent;
        border-radius: 5px;
        border: 1px solid gray;
        padding-left: 10px;
        color: white;
    }

    .in2 button {
        width: 180px;
        height: 50px;
        background-color: red;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 18px;
        font-weight: 600;
        color: white;
        border-radius: 5px;
        border: 2px solid red;
        margin-left: 0px;
       
    
    
    }
    .in2 button i {
        margin-left: 10px;
    }
    

}

/*===============================At 601px and 768px=======================*/
@media(min-width:601px) and (max-width:768px){

    .form{
        height:220px;
        width: 90%;
        gap: 0px;
        margin: auto;
       
        
    }

    .form>:nth-child(1) {
        font-family: Arial, Helvetica, sans-serif;
        font-weight: 600;
        font-size: 19px;
        text-align: center;
        color: white;
    
    
    }
    .in2 {
        height: 90px;
        width: 100%;
        /* background-color: aqua; */
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: row;
        gap: 15px;
      
    }
    .in2 input {
        margin-top: 0px;
        height: 50px;
        width: 250px;
        font-size: 15px;
        line-height: 50px;
        background-color: transparent;
        border-radius: 5px;
        border: 1px solid gray;
        padding-left: 10px;
        color: white;
    }

    .in2 button {
        width: 180px;
        height: 50px;
        background-color: red;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 18px;
        font-weight: 600;
        color: white;
        border-radius: 5px;
        border: 2px solid red;
        margin-left: 0px;
       
    
    
    }
    .in2 button i {
        margin-left: 10px;
    }
    

}

/*===============================At 769px and 900px=======================*/
@media(min-width:769px) and (max-width:900px){

    .form{
        height:220px;
        width: 90%;
        gap: 0px;
        margin: auto;
       
        
    }

    .form>:nth-child(1) {
        font-family: Arial, Helvetica, sans-serif;
        font-weight: 600;
        font-size: 19px;
        text-align: center;
        color: white;
    
    
    }
    .in2 {
        height: 90px;
        width: 100%;
        /* background-color: aqua; */
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: row;
        gap: 15px;
      
    }
    .in2 input {
        margin-top: 0px;
        height: 50px;
        width: 250px;
        font-size: 15px;
        line-height: 50px;
        background-color: transparent;
        border-radius: 5px;
        border: 1px solid gray;
        padding-left: 10px;
        color: white;
    }

    .in2 button {
        width: 180px;
        height: 50px;
        background-color: red;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 18px;
        font-weight: 600;
        color: white;
        border-radius: 5px;
        border: 2px solid red;
        margin-left: 0px;
       
    
    
    }
    .in2 button i {
        margin-left: 10px;
    }
    

}

/*===============================At 901px and 1200px=======================*/
@media(min-width:901px) and (max-width:1200px){

    .form{
        height:200px;
        width: 90%;
        gap: 0px;
        margin: auto;
       
        
    }

    .form>:nth-child(1) {
        font-family: Arial, Helvetica, sans-serif;
        font-weight: 600;
        font-size: 21px;
        text-align: center;
        color: white;
    
    
    }
    .in2 {
        height: 90px;
        width: 100%;
        /* background-color: aqua; */
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: row;
        gap: 15px;
      
    }
    .in2 input {
        margin-top: 0px;
        height: 50px;
        width: 270px;
        font-size: 15px;
        line-height: 50px;
        background-color: transparent;
        border-radius: 5px;
        border: 1px solid gray;
        padding-left: 10px;
        color: white;
    }

    .in2 button {
        width: 180px;
        height: 50px;
        background-color: red;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 18px;
        font-weight: 600;
        color: white;
        border-radius: 5px;
        border: 2px solid red;
        margin-left: 0px;
       
    
    
    }
    .in2 button i {
        margin-left: 10px;
    }
    

}

/*===============================At 1201px and 1440px=======================*/
@media(min-width:1201px) and (max-width:1440px){

    .form{
        height:200px;
        width: 90%;
        gap: 0px;
        margin: auto;
       
        
    }

    .form>:nth-child(1) {
        font-family: Arial, Helvetica, sans-serif;
        font-weight: 600;
        font-size: 24px;
        text-align: center;
        color: white;
    
    
    }
    .in2 {
        height: 90px;
        width: 100%;
        /* background-color: aqua; */
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: row;
        gap: 15px;
      
    }
    .in2 input {
        margin-top: 0px;
        height: 56px;
        width: 359px;
        font-size: 15px;
        line-height: 50px;
        background-color: transparent;
        border-radius: 5px;
        border: 1px solid gray;
        padding-left: 10px;
        color: white;
    }

    .in2 button {
        width: 213px;
        height: 56px;
        background-color: red;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 22px;
        font-weight: 600;
        color: white;
        border-radius: 5px;
        border: 2px solid red;
        margin-left: 0px;
       
    
    
    }
    .in2 button i {
        margin-left: 10px;
    }
    

}



/*=====================================================================*/
.call {
    height: 80px;
    width: 100%;
    /* background-color: red; */
    display: flex;

}

.cl1 {
    height: 100%;
    width: 76%;
    /* background-color: yellow; */
    margin: auto;
    display: flex;
    align-items: end;

}

.cl1>:nth-child(1) {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: rgb(255, 255, 255, 0.7);


}

/*========================At 200px to 300px=====================*/
@media(min-width:200px) and (max-width:300px){

    .call {
        height: 30px;
        width: 100%;
        /* background-color: red; */
        display: flex;
    
    }
    
    .cl1 {
        height: 100%;
        width: 76%;
        /* background-color: yellow; */
        margin: auto;
        display: flex;
        align-items: end;
    
    }
    
    .cl1>:nth-child(1) {
        font-family: Arial, Helvetica, sans-serif;
        font-size: 8px;
        font-weight: 400;
        color: rgb(255, 255, 255, 0.7);
    
    
    }
} 
/*========================At 301px to 400px=====================*/
@media(min-width:301px) and (max-width:400px){

    .call {
        height: 40px;
        width: 100%;
        /* background-color: red; */
        display: flex;
    
    }
    
    .cl1 {
        height: 100%;
        width: 76%;
        /* background-color: yellow; */
        margin: auto;
        display: flex;
        align-items: end;
    
    }
    
    .cl1>:nth-child(1) {
        font-family: Arial, Helvetica, sans-serif;
        font-size: 11px;
        font-weight: 400;
        color: rgb(255, 255, 255, 0.7);
    
    
    }
} 

/*========================At 401px to 500px=====================*/
@media(min-width:401px) and (max-width:500px){

    .call {
        height: 45px;
        width: 100%;
        /* background-color: red; */
        display: flex;
    
    }
    
    .cl1 {
        height: 100%;
        width: 76%;
        /* background-color: yellow; */
        margin: auto;
        display: flex;
        align-items: end;
    
    }
    
    .cl1>:nth-child(1) {
        font-family: Arial, Helvetica, sans-serif;
        font-size: 11px;
        font-weight: 400;
        color: rgb(255, 255, 255, 0.7);
    
    
    }
} 

/*========================At 501px to 600px=====================*/
@media(min-width:501px) and (max-width:600px){

    .call {
        height: 50px;
        width: 100%;
        /* background-color: red; */
        display: flex;
    
    }
    
    .cl1 {
        height: 100%;
        width: 76%;
        /* background-color: yellow; */
        margin: auto;
        display: flex;
        align-items: end;
    
    }
    
    .cl1>:nth-child(1) {
        font-family: Arial, Helvetica, sans-serif;
        font-size: 12px;
        font-weight: 400;
        color: rgb(255, 255, 255, 0.7);
    
    
    }
} 

/*========================At 601px to 768px=====================*/
@media(min-width:601px) and (max-width:768px){

    .call {
        height: 60px;
        width: 100%;
        /* background-color: red; */
        display: flex;
    
    }
    
    .cl1 {
        height: 100%;
        width: 76%;
        /* background-color: yellow; */
        margin: auto;
        display: flex;
        align-items: end;
    
    }
    
    .cl1>:nth-child(1) {
        font-family: Arial, Helvetica, sans-serif;
        font-size: 12px;
        font-weight: 400;
        color: rgb(255, 255, 255, 0.7);
    
    
    }
} 

/*========================At 769px to 900px=====================*/
@media(min-width:769px) and (max-width:900px){

    .call {
        height: 65px;
        width: 100%;
        /* background-color: red; */
        display: flex;
    
    }
    
    .cl1 {
        height: 100%;
        width: 76%;
        /* background-color: yellow; */
        margin: auto;
        display: flex;
        align-items: end;
    
    }
    
    .cl1>:nth-child(1) {
        font-family: Arial, Helvetica, sans-serif;
        font-size: 14px;
        font-weight: 400;
        color: rgb(255, 255, 255, 0.7);
    
    
    }
} 

/*========================At 901px to 1200px=====================*/
@media(min-width:901px) and (max-width:1200px){

    .call {
        height: 70px;
        width: 100%;
        /* background-color: red; */
        display: flex;
    
    }
    
    .cl1 {
        height: 100%;
        width: 76%;
        /* background-color: yellow; */
        margin: auto;
        display: flex;
        align-items: end;
    
    }
    
    .cl1>:nth-child(1) {
        font-family: Arial, Helvetica, sans-serif;
        font-size: 15px;
        font-weight: 400;
        color: rgb(255, 255, 255, 0.7);
    
    
    }
} 

/*========================At 1201px to 1440px=====================*/
@media(min-width:1201px) and (max-width:1440px){

    .call {
        height: 75px;
        width: 100%;
        /* background-color: red; */
        display: flex;
    
    }
    
    .cl1 {
        height: 100%;
        width: 76%;
        /* background-color: yellow; */
        margin: auto;
        display: flex;
        align-items: end;
    
    }
    
    .cl1>:nth-child(1) {
        font-family: Arial, Helvetica, sans-serif;
        font-size: 16px;
        font-weight: 400;
        color: rgb(255, 255, 255, 0.7);
    
    
    }
} 

/*======================================================*/
.foot2 {
    height: 45px;
    width: 76%;
    /* background-color: red; */
    display: flex;
    margin: auto;

}

.ft1 {
    height: 100%;
    width: 50%;
    /* background-color: yellow; */
    margin: auto;
    display: flex;

}

.f1 {
    height: 100%;
    width: 50%;
    display: flex;
    align-items: end;

}

.f1>:nth-child(1) {
    text-decoration: underline;
    color: rgb(255, 255, 255, 0.7);
    font-family: sans-serif;
    font-size: 14px;
}

.f2 {
    height: 100%;
    width: 50%;
    display: flex;
    align-items: end;
}

.f2>:nth-child(1) {
    text-decoration: underline;
    color: rgb(255, 255, 255, 0.7);
    font-family: sans-serif;
    font-size: 14px;
}

.ft2 {
    height: 100%;
    width: 50%;
    /* background-color: rgb(0, 255, 110); */
    margin: auto;
    display: flex;

}

.ff1 {
    height: 100%;
    width: 50%;
    display: flex;
    align-items: end;
}

.ff1>:nth-child(1) {
    text-decoration: underline;
    color: rgb(255, 255, 255, 0.7);
    font-family: sans-serif;
    font-size: 14px;
}

.ff2 {
    height: 100%;
    width: 50%;
    display: flex;
    align-items: end;
}

.ff2>:nth-child(1) {
    text-decoration: underline;
    color: rgb(255, 255, 255, 0.7);
    font-family: sans-serif;
    font-size: 14px;
}

/*====================================At 200px to 300px=======================*/
@media(min-width:200px) and (max-width:300px){
    .foot2 {
        height: 45px;
        width: 76%;
        /* background-color: red; */
        display: flex;
        margin: auto;
        flex-direction: column;
    
    }
    
    .ft1 {
        height: 100%;
        width: 100%;
        /* background-color: yellow; */
        margin: auto;
        display: flex;
    
    }
    
    .f1 {
        height: 100%;
        width: 50%;
        display: flex;
        align-items: end;
    
    }
    
    .f1>:nth-child(1) {
        text-decoration: underline;
        color: rgb(255, 255, 255, 0.7);
        font-family: sans-serif;
        font-size: 6px;
    }
    
    .f2 {
        height: 100%;
        width: 50%;
        display: flex;
        align-items: end;
    }
    
    .f2>:nth-child(1) {
        text-decoration: underline;
        color: rgb(255, 255, 255, 0.7);
        font-family: sans-serif;
        font-size: 6px;
    }
    
    .ft2 {
        height: 100%;
        width: 100%;
        /* background-color: rgb(0, 255, 110); */
        margin: auto;
        display: flex;
    
    }
    
    .ff1 {
        height: 100%;
        width: 50%;
        display: flex;
        align-items: end;
    
    }
    
    .ff1>:nth-child(1) {
        text-decoration: underline;
        color: rgb(255, 255, 255, 0.7);
        font-family: sans-serif;
        font-size: 6px;
    }
    
    .ff2 {
        height: 100%;
        width: 50%;
        display: flex;
        align-items: end;
    }
    
    .ff2>:nth-child(1) {
        text-decoration: underline;
        color: rgb(255, 255, 255, 0.7);
        font-family: sans-serif;
        font-size: 6px;
    }
}

/*====================================At 301px to 400px=======================*/
@media(min-width:301px) and (max-width:400px){
    .foot2 {
        height: 45px;
        width: 76%;
        /* background-color: red; */
        display: flex;
        margin: auto;
        flex-direction: column;
    
    }
    
    .ft1 {
        height: 100%;
        width: 100%;
        /* background-color: yellow; */
        margin: auto;
        display: flex;
    
    }
    
    .f1 {
        height: 100%;
        width: 50%;
        display: flex;
        align-items: end;
    
    }
    
    .f1>:nth-child(1) {
        text-decoration: underline;
        color: rgb(255, 255, 255, 0.7);
        font-family: sans-serif;
        font-size: 8px;
    }
    
    .f2 {
        height: 100%;
        width: 50%;
        display: flex;
        align-items: end;
    }
    
    .f2>:nth-child(1) {
        text-decoration: underline;
        color: rgb(255, 255, 255, 0.7);
        font-family: sans-serif;
        font-size: 8px;
    }
    
    .ft2 {
        height: 100%;
        width: 100%;
        /* background-color: rgb(0, 255, 110); */
        margin: auto;
        display: flex;
    
    }
    
    .ff1 {
        height: 100%;
        width: 50%;
        display: flex;
        align-items: end;
    
    }
    
    .ff1>:nth-child(1) {
        text-decoration: underline;
        color: rgb(255, 255, 255, 0.7);
        font-family: sans-serif;
        font-size: 8px;
    }
    
    .ff2 {
        height: 100%;
        width: 50%;
        display: flex;
        align-items: end;
    }
    
    .ff2>:nth-child(1) {
        text-decoration: underline;
        color: rgb(255, 255, 255, 0.7);
        font-family: sans-serif;
        font-size: 8px;
    }
}

/*====================================At 401px to 500px=======================*/
@media(min-width:401px) and (max-width:500px){
    .foot2 {
        height: 45px;
        width: 76%;
        /* background-color: red; */
        display: flex;
        margin: auto;
        flex-direction: column;
    
    }
    
    .ft1 {
        height: 100%;
        width: 100%;
        /* background-color: yellow; */
        margin: auto;
        display: flex;
    
    }
    
    .f1 {
        height: 100%;
        width: 50%;
        display: flex;
        align-items: end;
    
    }
    
    .f1>:nth-child(1) {
        text-decoration: underline;
        color: rgb(255, 255, 255, 0.7);
        font-family: sans-serif;
        font-size: 9px;
    }
    
    .f2 {
        height: 100%;
        width: 50%;
        display: flex;
        align-items: end;
    }
    
    .f2>:nth-child(1) {
        text-decoration: underline;
        color: rgb(255, 255, 255, 0.7);
        font-family: sans-serif;
        font-size: 9px;
    }
    
    .ft2 {
        height: 100%;
        width: 100%;
        /* background-color: rgb(0, 255, 110); */
        margin: auto;
        display: flex;
    
    }
    
    .ff1 {
        height: 100%;
        width: 50%;
        display: flex;
        align-items: end;
    
    }
    
    .ff1>:nth-child(1) {
        text-decoration: underline;
        color: rgb(255, 255, 255, 0.7);
        font-family: sans-serif;
        font-size: 9px;
    }
    
    .ff2 {
        height: 100%;
        width: 50%;
        display: flex;
        align-items: end;
    }
    
    .ff2>:nth-child(1) {
        text-decoration: underline;
        color: rgb(255, 255, 255, 0.7);
        font-family: sans-serif;
        font-size: 9px;
    }
}

/*====================================At 501px to 600px=======================*/
@media(min-width:501px) and (max-width:600px){
    .foot2 {
        height: 45px;
        width: 76%;
        /* background-color: red; */
        display: flex;
        margin: auto;
        flex-direction: column;
    
    }
    
    .ft1 {
        height: 100%;
        width: 100%;
        /* background-color: yellow; */
        margin: auto;
        display: flex;
    
    }
    
    .f1 {
        height: 100%;
        width: 50%;
        display: flex;
        align-items: end;
    
    }
    
    .f1>:nth-child(1) {
        text-decoration: underline;
        color: rgb(255, 255, 255, 0.7);
        font-family: sans-serif;
        font-size: 10px;
    }
    
    .f2 {
        height: 100%;
        width: 50%;
        display: flex;
        align-items: end;
    }
    
    .f2>:nth-child(1) {
        text-decoration: underline;
        color: rgb(255, 255, 255, 0.7);
        font-family: sans-serif;
        font-size: 10px;
    }
    
    .ft2 {
        height: 100%;
        width: 100%;
        /* background-color: rgb(0, 255, 110); */
        margin: auto;
        display: flex;
    
    }
    
    .ff1 {
        height: 100%;
        width: 50%;
        display: flex;
        align-items: end;
    
    }
    
    .ff1>:nth-child(1) {
        text-decoration: underline;
        color: rgb(255, 255, 255, 0.7);
        font-family: sans-serif;
        font-size: 10px;
    }
    
    .ff2 {
        height: 100%;
        width: 50%;
        display: flex;
        align-items: end;
    }
    
    .ff2>:nth-child(1) {
        text-decoration: underline;
        color: rgb(255, 255, 255, 0.7);
        font-family: sans-serif;
        font-size: 10px;
    }
}

/*====================================At 601px to 768px=======================*/
@media(min-width:601px) and (max-width:768px){
    .foot2 {
        height: 30px;
        width: 76%;
        /* background-color: red; */
        display: flex;
        margin: auto;
        
    
    }
    
    .ft1 {
        height: 100%;
        width: 100%;
        /* background-color: yellow; */
        margin: auto;
        display: flex;
    
    }
    
    .f1 {
        height: 100%;
        width: 50%;
        display: flex;
        align-items: end;
    
    }
    
    .f1>:nth-child(1) {
        text-decoration: underline;
        color: rgb(255, 255, 255, 0.7);
        font-family: sans-serif;
        font-size: 10px;
    }
    
    .f2 {
        height: 100%;
        width: 50%;
        display: flex;
        align-items: end;
    }
    
    .f2>:nth-child(1) {
        text-decoration: underline;
        color: rgb(255, 255, 255, 0.7);
        font-family: sans-serif;
        font-size: 10px;
    }
    
    .ft2 {
        height: 100%;
        width: 100%;
        /* background-color: rgb(0, 255, 110); */
        margin: auto;
        display: flex;
    
    }
    
    .ff1 {
        height: 100%;
        width: 50%;
        display: flex;
        align-items: end;
    
    }
    
    .ff1>:nth-child(1) {
        text-decoration: underline;
        color: rgb(255, 255, 255, 0.7);
        font-family: sans-serif;
        font-size: 10px;
    }
    
    .ff2 {
        height: 100%;
        width: 50%;
        display: flex;
        align-items: end;
    }
    
    .ff2>:nth-child(1) {
        text-decoration: underline;
        color: rgb(255, 255, 255, 0.7);
        font-family: sans-serif;
        font-size: 10px;
    }
}

/*====================================At 769px to 900px=======================*/
@media(min-width:769px) and (max-width:900px){
    .foot2 {
        height: 35px;
        width: 76%;
        /* background-color: red; */
        display: flex;
        margin: auto;
        
    
    }
    
    .ft1 {
        height: 100%;
        width: 100%;
        /* background-color: yellow; */
        margin: auto;
        display: flex;
    
    }
    
    .f1 {
        height: 100%;
        width: 50%;
        display: flex;
        align-items: end;
    
    }
    
    .f1>:nth-child(1) {
        text-decoration: underline;
        color: rgb(255, 255, 255, 0.7);
        font-family: sans-serif;
        font-size: 12px;
    }
    
    .f2 {
        height: 100%;
        width: 50%;
        display: flex;
        align-items: end;
    }
    
    .f2>:nth-child(1) {
        text-decoration: underline;
        color: rgb(255, 255, 255, 0.7);
        font-family: sans-serif;
        font-size: 12px;
    }
    
    .ft2 {
        height: 100%;
        width: 100%;
        /* background-color: rgb(0, 255, 110); */
        margin: auto;
        display: flex;
    
    }
    
    .ff1 {
        height: 100%;
        width: 50%;
        display: flex;
        align-items: end;
    
    }
    
    .ff1>:nth-child(1) {
        text-decoration: underline;
        color: rgb(255, 255, 255, 0.7);
        font-family: sans-serif;
        font-size: 12px;
    }
    
    .ff2 {
        height: 100%;
        width: 50%;
        display: flex;
        align-items: end;
    }
    
    .ff2>:nth-child(1) {
        text-decoration: underline;
        color: rgb(255, 255, 255, 0.7);
        font-family: sans-serif;
        font-size: 12px;
    }
}

/*====================================At 901px to 1200px=======================*/
@media(min-width:901px) and (max-width:1200px){
    .foot2 {
        height: 40px;
        width: 76%;
        /* background-color: red; */
        display: flex;
        margin: auto;
        
    
    }
    
    .ft1 {
        height: 100%;
        width: 100%;
        /* background-color: yellow; */
        margin: auto;
        display: flex;
    
    }
    
    .f1 {
        height: 100%;
        width: 50%;
        display: flex;
        align-items: end;
    
    }
    
    .f1>:nth-child(1) {
        text-decoration: underline;
        color: rgb(255, 255, 255, 0.7);
        font-family: sans-serif;
        font-size: 13px;
    }
    
    .f2 {
        height: 100%;
        width: 50%;
        display: flex;
        align-items: end;
    }
    
    .f2>:nth-child(1) {
        text-decoration: underline;
        color: rgb(255, 255, 255, 0.7);
        font-family: sans-serif;
        font-size: 13px;
    }
    
    .ft2 {
        height: 100%;
        width: 100%;
        /* background-color: rgb(0, 255, 110); */
        margin: auto;
        display: flex;
    
    }
    
    .ff1 {
        height: 100%;
        width: 50%;
        display: flex;
        align-items: end;
    
    }
    
    .ff1>:nth-child(1) {
        text-decoration: underline;
        color: rgb(255, 255, 255, 0.7);
        font-family: sans-serif;
        font-size: 13px;
    }
    
    .ff2 {
        height: 100%;
        width: 50%;
        display: flex;
        align-items: end;
    }
    
    .ff2>:nth-child(1) {
        text-decoration: underline;
        color: rgb(255, 255, 255, 0.7);
        font-family: sans-serif;
        font-size: 13px;
    }
}

/*====================================At 901px to 1200px=======================*/
@media(min-width:1201px) and (max-width:1440px){
    .foot2 {
        height: 43px;
        width: 76%;
        /* background-color: red; */
        display: flex;
        margin: auto;
    }
    
    .ft1 {
        height: 100%;
        width: 100%;
        /* background-color: yellow; */
        margin: auto;
        display: flex;
    }
    
    .f1 {
        height: 100%;
        width: 50%;
        display: flex;
        align-items: end;
    }
    
    .f1>:nth-child(1) {
        text-decoration: underline;
        color: rgb(255, 255, 255, 0.7);
        font-family: sans-serif;
        font-size: 14px;
    }
    
    .f2 {
        height: 100%;
        width: 50%;
        display: flex;
        align-items: end;
    }
    
    .f2>:nth-child(1) {
        text-decoration: underline;
        color: rgb(255, 255, 255, 0.7);
        font-family: sans-serif;
        font-size: 14px;
    }
    
    .ft2 {
        height: 100%;
        width: 100%;
        /* background-color: rgb(0, 255, 110); */
        margin: auto;
        display: flex;
    
    }
    
    .ff1 {
        height: 100%;
        width: 50%;
        display: flex;
        align-items: end;
    
    }
    
    .ff1>:nth-child(1) {
        text-decoration: underline;
        color: rgb(255, 255, 255, 0.7);
        font-family: sans-serif;
        font-size: 14px;
    }
    
    .ff2 {
        height: 100%;
        width: 50%;
        display: flex;
        align-items: end;
    }
    
    .ff2>:nth-child(1) {
        text-decoration: underline;
        color: rgb(255, 255, 255, 0.7);
        font-family: sans-serif;
        font-size: 14px;
    }
}

/*========================================================*/
.button {
    height: 70px;
    width: 76%;
    /* background-color: red; */
    display: flex;
    margin: auto;
    align-items: end;
}

.button button {
    height: 32px;
    width: 120px;
    font-family: sans-serif;
    background-color: transparent;
    color: white;
    border: 1px solid white;
    line-height: 32px;
    border-radius: 5px;
    font-size: 14px;

}
.button button i{
    margin-left: 8px;
}

/*==========================At 200px to 300px==================*/
@media(min-width:200px) and (max-width:300px){
    .button {
        height:45px;
        width: 76%;
        /* background-color: red; */
        display: flex;
        margin: auto;
        align-items: end;
    }
    
    .button button {
        height: 20px;
        width: 70px;
        font-family: sans-serif;
        background-color: transparent;
        color: white;
        border: 1px solid white;
       font-size: 8px;
       line-height: 20px;
       border-radius: 3px;
    
    }
    .button button i{
        margin-left: 8px;
        font-size: 8px;
    }
}

/*==========================At 300px to 400px==================*/
@media(min-width:300px) and (max-width:400px){
    .button {
        height:50px;
        width: 76%;
        /* background-color: red; */
        display: flex;
        margin: auto;
        align-items: end;
    }
    
    .button button {
        height: 24px;
        width: 75px;
        font-family: sans-serif;
        background-color: transparent;
        color: white;
        border: 1px solid white;
       font-size: 9px;
       line-height: 24px;
       border-radius: 3px;
    
    }
    .button button i{
        margin-left: 8px;
        font-size: 9px;
    }
}

/*==========================At 300px to 400px==================*/
@media(min-width:300px) and (max-width:400px){
    .button {
        height:50px;
        width: 76%;
        /* background-color: red; */
        display: flex;
        margin: auto;
        align-items: end;
    }
    
    .button button {
        height: 24px;
        width: 75px;
        font-family: sans-serif;
        background-color: transparent;
        color: white;
        border: 1px solid white;
       font-size: 9px;
       line-height: 24px;
       border-radius: 3px;
    
    }
    .button button i{
        margin-left: 8px;
        font-size: 9px;
    }
}

/*==========================At 400px to 500px==================*/
@media(min-width:401px) and (max-width:500px){
    .button {
        height:50px;
        width: 76%;
        /* background-color: red; */
        display: flex;
        margin: auto;
        align-items: end;
    }
    
    .button button {
        height: 26px;
        width: 85px;
        font-family: sans-serif;
        background-color: transparent;
        color: white;
        border: 1px solid white;
       font-size: 10px;
       line-height: 26px;
       border-radius: 3px;
    
    }
    .button button i{
        margin-left: 8px;
        font-size: 10px;
    }
}

/*==========================At 500px to 600px==================*/
@media(min-width:501px) and (max-width:600px){
    .button {
        height:50px;
        width: 76%;
        /* background-color: red; */
        display: flex;
        margin: auto;
        align-items: end;
    }
    
    .button button {
        height: 26px;
        width: 85px;
        font-family: sans-serif;
        background-color: transparent;
        color: white;
        border: 1px solid white;
       font-size: 10px;
       line-height: 26px;
       border-radius: 3px;
    
    }
    .button button i{
        margin-left: 8px;
        font-size: 10px;
    }
}

/*==========================At 600px to 768px==================*/
@media(min-width:601px) and (max-width:768px){
    .button {
        height:55px;
        width: 76%;
        /* background-color: red; */
        display: flex;
        margin: auto;
        align-items: end;
    }
    
    .button button {
        height: 26px;
        width: 85px;
        font-family: sans-serif;
        background-color: transparent;
        color: white;
        border: 1px solid white;
       font-size: 10px;
       line-height: 26px;
       border-radius: 4px;

    
    }
    .button button i{
        margin-left: 8px;
        font-size: 10px;
    }
}

/*==========================At 769px to 900px==================*/
@media(min-width:769px) and (max-width:900px){
    .button {
        height:55px;
        width: 76%;
        /* background-color: red; */
        display: flex;
        margin: auto;
        align-items: end;
    }
    
    .button button {
        height: 28px;
        width: 95px;
        font-family: sans-serif;
        background-color: transparent;
        color: white;
        border: 1px solid white;
       font-size: 12px;
       line-height: 28px;
       border-radius: 5px;
    
    }
    .button button i{
        margin-left: 8px;
        font-size: 12px;
    }
}

/*==========================At 901px to 1200px==================*/
@media(min-width:901px) and (max-width:1200px){
    .button {
        height:60px;
        width: 76%;
        /* background-color: red; */
        display: flex;
        margin: auto;
        align-items: end;
    }
    
    .button button {
        height: 30px;
        width: 100px;
        font-family: sans-serif;
        background-color: transparent;
        color: white;
        border: 1px solid white;
       font-size: 13px;
       line-height: 30px;
       border-radius: 5px;
    
    }
    .button button i{
        margin-left: 8px;
        font-size: 13px;
    }
}

/*==========================At 1200px to 1440px==================*/
@media(min-width:1201px) and (max-width:1440px){
    .button {
        height:70px;
        width: 76%;
        /* background-color: red; */
        display: flex;
        margin: auto;
        align-items: end;
    }
    
    .button button {
        height: 32px;
        width: 110px;
        font-family: sans-serif;
        background-color: transparent;
        color: white;
        border: 1px solid white;
       font-size: 14px;
       line-height: 32px;
       border-radius: 5px;
    
    }
    .button button i{
        margin-left: 8px;
        font-size: 14px;
    }
}

/*===============================================================*/

footer {
    height: 90px;
    width: 76%;
    margin: auto;
    display: flex;
}

footer>:nth-child(1) {
    padding-top: 50px;
    font-family: sans-serif;
    color: rgb(255, 255, 255, 0.7);
    font-size: 14px;

}

/*======================At 200px to 300px======================*/
@media(min-width:200px) and (max-width:300px){
    footer {
        height: 40px;
        width: 76%;
        margin: auto;
        display: flex;
    }
    
    footer>:nth-child(1) {
       padding-top: 20px;
        font-family: sans-serif;
        color: rgb(255, 255, 255, 0.7);
        font-size: 6px;
    
    }

}

/*======================At300px to 400px======================*/
@media(min-width:301px) and (max-width:400px){
    footer {
        height: 45px;
        width: 76%;
        margin: auto;
        display: flex;
    }
    
    footer>:nth-child(1) {
       padding-top: 22px;
        font-family: sans-serif;
        color: rgb(255, 255, 255, 0.7);
        font-size: 8px;
    
    }

}

/*======================At400px to 500px======================*/
@media(min-width:401px) and (max-width:500px){
    footer {
        height: 45px;
        width: 76%;
        margin: auto;
        display: flex;
    }
    
    footer>:nth-child(1) {
       padding-top: 23px;
        font-family: sans-serif;
        color: rgb(255, 255, 255, 0.7);
        font-size: 9px;
    
    }

}

/*======================At500px to 600px======================*/
@media(min-width:501px) and (max-width:600px){
    footer {
        height: 50px;
        width: 76%;
        margin: auto;
        display: flex;
    }
    
    footer>:nth-child(1) {
       padding-top: 25px;
        font-family: sans-serif;
        color: rgb(255, 255, 255, 0.7);
        font-size: 10px;
    
    }

}

/*======================At600px to 768px======================*/
@media(min-width:601px) and (max-width:768px){
    footer {
        height: 55px;
        width: 76%;
        margin: auto;
        display: flex;
    }
    
    footer>:nth-child(1) {
       padding-top: 28px;
        font-family: sans-serif;
        color: rgb(255, 255, 255, 0.7);
        font-size: 10px;
    
    }

}

/*======================At769px to 900px======================*/
@media(min-width:769px) and (max-width:900px){
    footer {
        height: 60px;
        width: 76%;
        margin: auto;
        display: flex;
    }
    
    footer>:nth-child(1) {
       padding-top: 32px;
        font-family: sans-serif;
        color: rgb(255, 255, 255, 0.7);
        font-size: 12px;
    
    }

}

/*======================At901px to 1200px======================*/
@media(min-width:901px) and (max-width:1200px){
    footer {
        height: 68px;
        width: 76%;
        margin: auto;
        display: flex;
    }
    
    footer>:nth-child(1) {
       padding-top: 38px;
        font-family: sans-serif;
        color: rgb(255, 255, 255, 0.7);
        font-size: 13px;
    
    }

}

/*======================At1201px to 1440px======================*/
@media(min-width:1201px) and (max-width:1440px){
    footer {
        height: 75px;
        width: 76%;
        margin: auto;
        display: flex;
    }
    
    footer>:nth-child(1) {
       padding-top: 42px;
        font-family: sans-serif;
        color: rgb(255, 255, 255, 0.7);
        font-size: 14px;
    
    }

}