@media screen and (max-width: 600px) {
    .main {
        width: 100%;
        height: 100%;
    }

    .gency {

        border-radius: 10px;

    }


    .header {
        width: 100%;
        height: 100%;
        background-color: #c3e4ff;
        display: flex;
        flex-direction: column;
    }

    .head {
        width: 100%;
        height: auto;
    }

    .head img {
        height: 100%;
        width: 90%;
        margin-left: 15px;
    }

    .head p {
        padding-top: 10%;
        padding-left: 10px;
        font-size: 2rem;
        font-family: Sans-serif;
    }

    .head h4 {
        margin-left: 20px;
        font-size: 22px;
    }

    .head button {
        width: 120px;
        height: 40px;
        margin-left: 20px;
        border-radius: 16px;
        font-weight: bold;
        border: none;
        background-color: #1a253b;
        color: white;
    }

    .sects {

        width: 250px;
        height: 120px;
        margin-left: 60px;
        margin-top: 02px;
        border-radius: 10px;
        background-color: white;

    }

    .sects p {
        text-align: center;
        padding-right: 0px;
        padding-top: 20px;
        font-size: 22px;
    }


    .Platform {
        width: 100%;
        flex-direction: column;
        height: auto;
        margin-top: 60px;
        display: flex;
    }

    .plate {
        width: 100%;
        height: 100%;
    }

    .plate h1 {
        padding-top: 40px;
        font-size: 30px;
    }

    .plate p {
        font-size: 18px;
    }

    .plate button {
        width: 120px;
        height: 35px;
        border: none;
        border-radius: 16px;
        background-color: #1a253b;
        color: white;
        font-weight: bold;
    }

    .plates {
        width: 100%;
        height: 100%;
        display: flex;

    }

    .plates2 {
        width: 40%;
        height: 100%;

        margin-left: 20px;
        margin-top: 70px;
    }




    .servic {
        width: 100%;
        height: auto;
        flex-direction: column;
        margin-top: 50px;
        display: flex;
    }

    .service2 {
        width: 100%;
        height: 290px;
        margin-left: 0px;
    }



    .service2 h1 {
        font-size: 24px;
        text-align: left;
    }

    .service2 p {
        padding-top: 30px;
        font-size: 18px;
        text-align: left;
    }

    .service2 button {
        height: 50px;
        width: 130px;
        border: none;
        background-color: #1a253b;
        color: white;
        border-radius: 16px;
        margin-top: 40px;
        margin-left: 170px;
    }

   
    .helpline {
        margin-top: 170px;
        width: 100%;
        height: auto;
        display: flex;
        color: gray;
        flex-direction: column;
    }

    .helps {

        width: 100%;
        height: 100%;
    }

    .helps p {
        margin-left: 30px;
        font-size: 18px;
        padding-top: 20px;
    }

    .helps h1 {
        margin-left: 30px;
        padding-top: 50px;
    }

    .helps a {
        text-decoration: none;
        color: gray;
        font-size: 18px;
    }

    .help2 {

        margin-left: 40px;
        height: 50px;
        margin-top: 30px;
    }

    /* Apply styles to the form within the .helps container */
    #contactForm {
        max-width: 400px;
        margin: 0 auto;
    }

    /* Style the form labels */
    #contactForm label {
        display: block;
        margin-bottom: 8px;
        color: #8B4513;
        /* Golden color */
    }

    /* Style the form inputs and textarea */
    #contactForm input,
    #contactForm textarea {
        width: 100%;
        padding: 8px;
        margin-bottom: 16px;
        box-sizing: border-box;
        border: 1px solid #8B4513;
        /* Golden color */
        border-radius: 4px;
    }

    /* Style the submit button */
    #contactForm input[type="submit"] {
        background-color: #8B4513;
        /* Golden color */
        color: #fff;
        padding: 10px 15px;
        border: none;
        border-radius: 4px;
        cursor: pointer;
        font-size: 16px;
    }

    /* Add hover effect to the submit button */
    #contactForm input[type="submit"]:hover {
        background-color: #996515;
        /* Slightly darker golden color on hover */
    }




    .footer {
        width: 100%;
        height: auto;
        background-color: #1a253b;
        display: flex;
        flex-direction: column;
        color: white;
    }

    .foot {
        height: 100%;
        width: 100%;
    }

    .foot a {
        color: white;
        text-decoration: none;

    }

    .foot p {
        margin-left: 40px;
        margin-top: 30px;
        font-size: 18px;
    }

    .foot h1 {
        font-size: 18px;
        padding-top: 80px;
        margin-left: 10px;
    }

    .foot img {
        padding-top: 20px;
        width: 95%;
        padding-left: 10px;
    }

    .foot a i {
        padding-left: 20px;
        margin-top: 10px;
        font-size: 20px;
        border-radius: 50%;
        border: 1px solid white;
        padding-right: 25px;
        padding-top: 05px;
        width: 10px;
        height: 30px;
        margin-left: 15px;
    }



    .disclamer {

        height: 60px;
        background-color: #1a253b;
        color: white;
        padding-left: 20px;
        font-size: 18px;
        padding-top: 25px;
    }

}




/* media tag start */

@media screen and (min-width: 620px) and (max-width: 1250px) {

    .main {
        width: 1250px;
        height: 100%;
    }

    .gency {

        border-radius: 10px;

    }


    .header {
        width: 100%;
        height: 500px;
        background-color: #c3e4ff;
        display: flex;
    }

    .head {
        width: 50%;
        height: 100%;
    }

    .head img {
        height: 80%;
    }

    .head p {
        padding-top: 10%;
        padding-left: 40px;
        margin-top: 20px;
        font-size: 2.6rem;
      font-family: Sans-serif;
    }
    
    .head h4 {
        margin-left: 20px;
        font-size: 22px;
        margin-top: 40px;
    }
    
    .head button {
        width: 120px;
        height: 40px;
        margin-left: 150px;
        border-radius: 16px;
        font-weight: bold;
        border: none;
        background-color: #1a253b;
        color: white;
    }
    
    
    
    
    
    
    
    
    .books1{
      
        height: 35px;
        width: 190px;
        padding-top: 15px;
        text-align: center;
        border-radius: 16px;
        text-decoration: none;
        background-color: #1a253b;
        color: white;
    }
    .books1 li a  {
        text-decoration: none;
    
        color: white;
    }
    
    
    
    
    
    
    
    .sects {
        border: 1px solid white;
        width: 250px;
        height: 120px;
        margin-left: 350px;
        margin-top: -270px;
        border-radius: 10px;
        background-color: white;
    
    }
    
    .sects p {
        text-align: center;
        padding-right: 0px;
        padding-top: -40px;
        font-size: 16px;
    }
    
    .Platform {
        width: 100%;

        height: 400px;
        margin-top: 60px;
        display: flex;
    }

    .plate {
        width: 50%;
        height: 100%;
    }

    .plate h1 {
        padding-top: 40px;
        font-size: 30px;
    }

    .plate p {
        font-size: 18px;
    }

    .plate button {
        width: 120px;
        height: 35px;
        border: none;
        border-radius: 16px;
        background-color: #1a253b;
        color: white;
        font-weight: bold;
    }

    .plates {
        width: 100%;
        height: 100%;
        display: flex;

    }

    .plates2 {
        width: 40%;
        height: 80%;

        margin-left: 20px;
        margin-top: 70px;
    }




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

        margin-top: 50px;
        display: flex;
    }

    .service2 {
        width: 24%;
        height: 100%;

        margin-left: 10px;
        text-align: center;

    }

    .service2 h1 {
        font-size: 24px;
    }

    .service2 p {
        padding-top: 30px;
        font-size: 18px;
        text-align: left;
    }

    .service2 button {
        height: 50px;
        width: 130px;
        border: none;
        background-color: #1a253b;
        color: white;
        border-radius: 16px;
        margin-top: 40px;
    }


    .helpline {
        margin-top: 70px;
        width: 100%;
        height: 550px;
        display: flex;
        color: gray;
    }

    .helps {

        width: 50%;
        height: 550px;
    }

    .helps p {
        margin-left: 30px;
        font-size: 18px;
        padding-top: 20px;
    }

    .helps h1 {
        margin-left: 30px;
        padding-top: 50px;
    }

    .helps a {
        text-decoration: none;
        color: gray;
        font-size: 18px;
    }

    .help2 {

        margin-left: 40px;
        height: 50px;
        margin-top: 30px;
    }

    /* Apply styles to the form within the .helps container */
    #contactForm {
        max-width: 400px;
        margin: 0 auto;
    }

    /* Style the form labels */
    #contactForm label {
        display: block;
        margin-bottom: 8px;
        color: #8B4513;
        /* Golden color */
    }

    /* Style the form inputs and textarea */
    #contactForm input,
    #contactForm textarea {
        width: 100%;
        padding: 8px;
        margin-bottom: 16px;
        box-sizing: border-box;
        border: 1px solid #8B4513;
        /* Golden color */
        border-radius: 4px;
    }

    /* Style the submit button */
    #contactForm input[type="submit"] {
        background-color: #8B4513;
        /* Golden color */
        color: #fff;
        padding: 10px 15px;
        border: none;
        border-radius: 4px;
        cursor: pointer;
        font-size: 16px;
    }

    /* Add hover effect to the submit button */
    #contactForm input[type="submit"]:hover {
        background-color: #996515;
        /* Slightly darker golden color on hover */
    }



    .footer {
        width: 100%;
        height: 470px;
        background-color: #1a253b;
        display: flex;
        color: white;
    }

    .foot {

        width: 25%;
    }

    .foot a {
        color: white;
        text-decoration: none;

    }

    .foot p {
        margin-left: 40px;
        margin-top: 30px;
        font-size: 18px;
    }

    .foot h1 {
        font-size: 18px;
        padding-top: 80px;
    }

    .foot img {
        padding-top: 20px;
        width: 95%;
        padding-left: 10px;
    }

    .foot a i {
        padding-left: 20px;
        margin-top: 10px;
        font-size: 20px;
        border-radius: 50%;
        border: 1px solid white;
        padding-right: 25px;
        padding-top: 05px;
        width: 10px;
        height: 30px;
    }



    .disclamer {

        height: 40px;
        background-color: #1a253b;
        color: white;
        padding-left: 20px;
        font-size: 18px;
    }

}