@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=Jost:ital,wght@0,100..900;1,100..900&family=Roboto+Slab:wght@100..900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

:root {
    --font-01: "Roboto", serif;
    --font-02: "Roboto Slab", serif;
    --font-03: "Jost", serif;
    --font-04: "DM Sans", serif;
    --color-01: #4089cd;
    --color-02: #030c37;
    --color-03: #6e6e74 ; 
    ;

}

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

.w {
    width: 1200px;
    margin: 0 auto;
}

.fsb{
    display: flex;
    justify-content: space-between;
}

.w2 {
    width: 92%;
    margin: 0 auto;
}

a {
    text-decoration: none;
    cursor: pointer;
}

button {
    cursor: pointer;
}

span,
h1,
h2,
h3,
p {
    font-family: var(--font-03);
}

body {
    background-color: #F7F7F7;
}

/* Header  */

#hd {
    background: white;
}

.d2 {
    height: 118px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}


.d3 {
    display: flex;
    align-items: center;
    justify-content: start;
    padding: 0 20px;
    height: 100%;
    width: 25%;
    background-color: white;
}

.i1 {
    width: 260px;
}

.n {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    column-gap: 8%;
}
#d6 {width: 50%;}

.a1 {
    font-family: var(--font-04);
    font-size: 14px;
    text-transform: uppercase;
    color: var(--color-02);
    font-weight: 900;
    padding: 15px 0;
}

.a1:hover {
    color: var(--color-01);
}

.d4 {
    display: flex;
    align-items: center;
    justify-content: end;
    width: 25%;
    height: 100%;
    background-color: white;
    padding: 0 20px;
}

.i2 {
    width: 33%;
}

.a3 {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 187px;
    height: 65px;
    background-color: transparent;
    border: 2px solid var(--color-01);
    color: var(--color-03);
    font-family: var(--font-03);
    text-transform: uppercase;
    font-size: 14px;
    font-weight: 700;
    transition: transform 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;

}
.a3:hover {
    scale: 1.04; background-color: var(--color-01);   
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
    color: white;
}

#d5 {display: none;}

.d200 {
  display: none;
  position: absolute;
  background-color: white; 
  z-index: 1000;
  padding: 15px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  width: 300px;
  flex-direction: column;
  margin-top: 10px;
  
}
.a100 {
    font-family: var(--font-04);
    font-size: 14px;
    text-transform: uppercase;
    color: var(--color-02);
    font-weight: 900;}
.a100:hover { color: var(--color-01);}

#d101 {
  position: relative;
  margin-top: 3px;
}

#d101:hover .d200 {
  display: block;
}
.d2011 {
    display: flex; 
    flex-direction: column; 
    row-gap: 15px;}



/* Footer  */


#ft {background-color: var(--color-02);}

.d7::after {
    content: "";
    position: absolute;
    background-color: rgb(0 0 0 / 52%);
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.d18 {
    position: relative;
    z-index: 2;
    padding: 4% 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.s8 {
    font-size: 39px;
    font-weight: 600;
    color: white;
    margin-top: 5px;
}

.d8 {
    position: relative;
    width: 46%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.in1 {
    height: 50px;
    border: none;
    background-color: #333333;
    border-radius: 45px;
    width: 100%;
    padding: 26px;
}

.in1::placeholder {
    font-family: var(--font-03);
    color: white;
    font-size: 15px;
}

.i3 {
    position: relative;
    width: 71%;
    height: 70%;
    background: white;
    padding: 8px;
    border-radius: 22px;
}

#pageTopBtn {    
    position: fixed;
    bottom: 40px;
    right: 20px;
    background: rgba(0, 0, 0, 0.6); 
    border: 2px solid var(--color-01); 
    border-radius: 5px; 
    z-index: 1000;}

#i100 {
    width: 40px; 
    height: 40px;}

.d19 {
    position: absolute;
    display: flex;
    width: 55px;
    height: 55px;
    border-radius: 34px;
    background-color: var(--color-01);
    align-items: center;
    justify-content: center;
}

.d20 {
    padding: 5% 0;
    background-color:var(--color-02);
    border-top: 1px solid var(--color-03);
}

.d9 {
    display: flex;
    justify-content: space-between;
}

.d10,
.d11,
.d12,
.d13 {
    display: flex;
    flex-direction: column;
}

.d10 {
    width: 25%;
}

.d11 {
    width: 23%;
}


.d12 {
    width: 16%;
}


.d13 {
    width: 21%;
}

.i4 {
    width: 10%;
    animation: pop 1s infinite ease-in-out;
    transform-origin: center;
}

#z1p101 {
    display: flex; 
    margin-bottom: 5px; 
    align-items: center;
}
#z1d503 {width: fit-content;}

        

/* Keyframes for the pop effect */
@keyframes pop {
    0%, 100% {
      transform: scale(1);
    }
    50% {
      transform: scale(1.2); 
    }
  }

.s1 {
    font-size: 14px;
    color: var(--color-03);
    text-transform: uppercase;
    font-weight: 600;
    margin-bottom: 15px;
}

.d14 {
    display: flex;
    align-items: center;
    margin-top: 11px;
}

.s10 {
    font-size: 18px;
    margin-left: 5px;
    vertical-align: middle;
}


.s2 {
    font-size: 23px;
    color: white;
    font-weight: 600;
    margin-left: 12px;
}

.s3 {
    color: white;
    font-size: 18px;
    margin-top: 15px;
    text-decoration: underline;
    display: inline-block;
}

.s4 {
    color: white;
    font-size: 17px;
    text-transform: uppercase;
    font-weight: 500;
    margin-top: 46px;
}

.p1 {
    margin-top: 15px;
    color: var(--color-03);
    font-family: var(--font-03);
    font-size: 17px;
}

.s5 {
    font-size: 22px;
    text-transform: uppercase;
    font-weight: 600;
    color: white;
    margin-bottom: 20px;
}

.a2 {
    font-family: var(--font-03);
    font-size: 17px;
    margin-bottom: 14px;
    color: var(--color-03);
    line-height: 17px;
}
.a2:hover {color: white;}
.s6:hover {color: white;}

.s6 {
    font-size: 17px;
    color: var(--color-03);
    margin-bottom: 10px;
}

.d15 {
    display: flex;
    align-items: center;
    margin-top: 10px;
    column-gap: 25px;
}

.i5 {
    width: 35px;
    border: 1px solid var(--color-03);
    border-radius: 33px;
    padding: 9px;
}
.i5:hover {background-color: var(--color-01);}

.d16 {
    background-color: var(--color-02);
    background-color: var(--color-01);
}

.d21 {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px 0;
    column-gap: 90px;
    flex-direction: column;
}

.s7 {
    color: white;
    font-size: 15px;
}
.s9 {
    font-size: 12px;
    margin-top: 5px;
}

.d17 {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* footer add new one  */

.z7d1 {
    display: flex;
    justify-content: space-between;
    margin-bottom: 5px;
    align-items: center;

}

.z7d2 {
    width: 44%;
}
#z7i1 {width: 100%;}

.z7d2 iframe {
    width: 100%;
    height: 100%;
}

.z7d3 {
    width: 50%;
    display: flex;
    padding: 4% 0% 4% 0%;
    flex-direction: column;
    background-color: var(--color-02);
}

.z7s1 {
    font-family: var(--font-03);
    font-size: 16px;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--color-01);
}

.z7h1 {
    font-size: 39px;
    text-transform: uppercase;
    color: white;
    margin-top: 5px;
    margin-bottom: 20px;
}

.z7f1 {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-top: 30px;
}
#z7f2 {row-gap: 20px;
    display: flex;
    flex-direction: column;}

.z7in1 {
    width: 100%;
    height: 35px;
    background: #f8f4ff;
    border: none;
    padding: 5px 20px;
    color: black ;
    margin-bottom: 5px;
    border: 1px solid black;
    border-radius: 5px;
}

.z7in1::placeholder {
    font-family: var(--font-03);
    color: black;
    font-size: 15px;
}
.z7in1[type="file"]::file-selector-button {
    background-color: #4089cd;
    color: white;
    border: none;
    padding: 5px;
    border-radius: 4px;
    cursor: pointer;
    margin-right: 10px;
}
.z7lb1 {
    color: white; 
    font-family: var(--font-03); 
    margin-bottom: 5px;}

.z7ta1 {
    width: 100%;
    height: 150px;
    margin-bottom: 30px;
    background: #333333;
    border: none;
    color: grey;
    font-size: 15px;
    font-family: var(--font-03);
    padding: 22px;
}
.z7in2 {
    width: 200px; 
    margin-left: 30px; 
    height: 31px; 
    margin-bottom: 0px;
}

.z7a1 {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 50px;
    background-color: transparent;
    border: 1px solid var(--color-01);
    color: white;
    font-family: var(--font-03);
    text-transform: uppercase;
    font-size: 13px;
    font-weight: 700;
    transition: transform 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
    margin-top: 20px;
}
.z7a1:hover {
    scale: 1.01; 
    background-color: var(--color-01);   
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

.z7d4 {
    display: flex; 
    justify-content: space-between;
}
.z7d5 {
    width: 48%; 
    flex-direction: column; 
    display: flex;
}
.z7d6 {width: 100%; }
#map {height: 100%;}
.ko1 {
    background-color: #F9E4E8;
    color: red;
    padding: 3px 10px;
    font-size: 15px; font-family: var(--font-03);}

.ko1112{
    background-color: #F9E4E8;
    color: rgb(78, 46, 46);
    padding: 3px 10px;
    font-size: 15px; font-family: var(--font-03);
}
.ok1 {
    background-color: lightgreen; 
    color: green; 
    font-size: 18px; 
    padding: 5px 10px; 
    text-align: center; 
    font-family: var(--font-03);
    margin-bottom: 5px;
}

.ok11111 {
    background-color: lightgreen; 
    color: green; 
    font-size: 18px; 
    padding: 5px 10px; 
    text-align: center; 
    font-family: var(--font-03);
    margin-bottom: 5px;
}
#z7f22222 {
    row-gap: 10px;
    display: flex;
    flex-direction: column;}
.close-btn {
    color: red;
    font-size: 30px;
}

.a102 {color: white; }

.ko1112{display: none;}
/* .a102 {color: #0cd17c; font-weight: bold;} */




/* whatsapp icon part  */
.d201stb { 
    position: fixed; 
    bottom: 75px; 
    right: 20px; 
    cursor: pointer;
}

.d203stb { 
    position: fixed; 
    bottom: 95px; 
    right: 20px;  
    border: none; 
    z-index: 1000;
}

#i201stb {
    width: 45px;
}

.send-messagestb { 
    width: 300px; 
    padding: 0px 10px; 
    border: 1px solid #ccc; 
    border-radius: 8px; 
    background-color: #f9f9f9;
}

.d204stb {
    right: 75px; 
    bottom: 100px; 
    height: 288px; 
    background: #000000c7;  
    z-index: 1000;
}

#messagesstb {
    width: 100%; 
    padding: 10px; 
    box-sizing: border-box; 
    height: 190px;
}

.send-btnstb { 
    background-color: #030c37;  
    color: white;  
    border: none;  
    padding: 8px 15px;  
    border-radius: 4px;  
    cursor: pointer;  
    width: 100%; 
    font-weight: bold; 
    border: 2px solid var(--color-01);
}
.close-btnstb {
    color: red;
    font-size: 30px;
}












      .d50{
        font-family: var(--font-03);
        /* width: 400px; */
        width: 350px;
        border-radius: 6px;
        background-color:#DCF8C6;
        /* background-color: rgb(239, 236, 230); */
        padding: 10px;
        position: fixed;
        right: 20px;
        bottom: 75px;
        z-index: 1000;
    }
    .i52 {
        width: 45px;
        height: 45px;
        /* position: fixed; */
        /* bottom: 20px;
        right: 20px; */
        cursor: pointer;
        z-index: 1000;
        display: none;
        position: absolute;
        bottom: 20px;
        right: 0;

}
    .d55{
        font-family: var(--font-03);
        /* background-color: rgb(255, 49, 49); */
        background-color:#4089cd;;
        /* margin-top: 20px; */
        padding: 15px;
        border-top-left-radius: 6px;
        border-top-right-radius: 6px;
    }
    .d53{display: flex; gap: 10px; align-items: center;    font-family: var(--font-03);}
    .i50{width: 30px;}
    .hh50{color: #fff; font-size: 16px;font-family: var(--font-03); font-weight: 400;}
    .s50{
        font-family: var(--font-03);
        transform: rotate(90deg) scaleX(0.8) scaleY(1.5);
        display: flex;
        font-size: 20px;
        color: #fff;
        cursor: pointer;
    }
    .d57{
        font-family: var(--font-03);
        /* margin: 20px 0 70px 0; */
        margin: 20px 0 35px 0;
    }
    /* .d57.hidden {
        opacity: 0;
        visibility: hidden;
        height: 0;
        overflow: hidden;
        margin-bottom: 0;
    } */
    .d56{width: 68%; background-color: #fff; padding: 20px; border: 1px solid black; border-radius: 0 10px 10px;font-family: var(--font-1);    font-family: var(--font-03);}
    .p50{margin-bottom: 10px; font-size: 15px;}
    .s51{
        color: #030c37; ;
        font-size: 12px;
        font-weight: 500;
    }
    .p50:last-of-type{margin-bottom: 0;}
    .p50, .s51, .s52, .in50{font-family: var(--font-03); font-weight: 400;}
    /* .d55{
        display: flex;
        justify-content: space-between;
    } */
     .s52{
        color: #979797;
        font-size: 14px;
     }
     .d58{padding-top: 30px;font-family: var(--font-03);}
     .d59{position: relative; width: 85%;font-family: var(--font-03);}
     .d60{
        position: absolute;
        background-image: linear-gradient(rgb(100 100 100 / 91%), rgb(60 60 60 / 77%)), url(img/smiley.png);
        width: 20px; height: 20px; background-repeat: no-repeat; background-size: cover;
        z-index: 1;
        border-radius: 50%;
        bottom: 10px;
        left: 10px;
        font-family: var(--font-03);
    }
    .in50{
        border: none;
        height: 40px;
        padding: 0 10px 0 40px;
        border-radius: 24px;
        position: relative;
        /* width: 100%; */
        width: 265px;
        font-size: 16px;
        outline: none;
        font-family: var(--font-03);
    }
    .bt50{
        background-color: #c6d7e3;
        border: none;
        border-radius: 50%;
        padding: 5px;
        cursor: pointer;
        font-family: var(--font-03);
    }
   .bt50::before{
        content: "";
        /* width: 36px;
        height: 35px; */
        width: 32px;
        height: 32px;
        background-size: 17px 20px;
        /* background-image: url(img/send.png); */
        background-image: url(../img/send.png);
        background-repeat: no-repeat;
        display: block;
        background-position-x: center;
        bottom: -7px;
         position: relative;
        font-family: var(--font-03);
   }
   .bt50.active {
        /* background-color: #25d366;  */
    }



    .in50::placeholder {
    color: var(--color-6);
    transition: color 0.3s ease; /* Smooth transition */
}


/* Responsive  */

@media screen and (max-width: 1240px) {
    .w {
        width: 96%;
        margin: 0 2%;
    }
    .n {column-gap: 4%;}
    .i1 {width: 240px;}

}

@media screen and (max-width: 1100px) {

    /* header  */
    #i20 {width: 30px;}
    #d5 {padding: 0 20px;}
    .d4 , .d3 {width: auto;}
    .d2 {position: relative; height: 240px; margin-top: -64px;}
    .n {padding: 10px;}
    .d15 {column-gap: 15px;}
    #d6 {
        position: absolute;
        width: 100%;
        bottom: -15px;
        background-color: red;
        z-index: 100;
        background: white;
        border-bottom: 1px solid #3658c9;
        border-top: 1px solid #3658c9;
    }

}

@media screen and (max-width: 950px) {

    /* Footer  */
    .d18 {
        flex-direction: column;
    }

    .d8 {
        margin-top: 35px;
        width: 69%;
    }

    .d9 {
        flex-wrap: wrap;
    }

    .d10,
    .d11,
    .d12,
    .d13 {
        margin-bottom: 15px;
    }

    .i4 {
        width: 8%;
    }

    .d10 {
        width: 45%;
    }

    .d11 {
        width: 40%;
    }

    .d12 {
        width: 44%;
    }

    .d13 {
        width: 40%;
    }
    .z7d1 {flex-direction: column-reverse;}
    .z7d2 {width: 100%; margin-top: 30px; display: none;}
    .z7d3 {width: 100%; padding: 8% 4% 8% 4%;}
    #z7i1 {width: 100%; height: 100%; object-fit: cover;}
}

@media screen and (max-width: 800px) {

    /* Footer  */
    .d21 {
        flex-direction: column;
    }

    .d17 {
        width: 50%;
        padding: 10px 0;
        justify-content: center;
    }
}


@media screen and (max-width: 750px) {
  
    /* X1  */
    .x1in1 {
        width: 100%;
    }
}

@media screen and (max-width: 700px) {

    /* Nav Bar  */
    .d4 {
        width: 35%;
    }

    /* header  */
    #d5 {display: block; padding: 0 10px; margin-top: 5px;}
    .d4 {justify-content: center; width: auto;}
    .d3 {padding: 0 10px;}
    .i1 { width: 200px; }
    .n {flex-direction: column; row-gap: 7px; padding: 20px 0;}
    #d6 {bottom: -289px;}
    .d2 {height: 110px; margin-top: 1px;}
    #d6 { display: none; }
    .a3 {width: 176px; height: 56px;}

    /* Footer  */
    .d15 {justify-content: center;}
    .d10,
    .d11,
    .d12,
    .d13 {
        width: 80%;
        text-align: center;
        align-items: center;
        justify-content: center;
    }
    .d9 {
        align-items: center;
        flex-wrap: wrap;
        justify-content: center;
        text-align: center;
    }
    .d14 {
        justify-content: center;
    }
    .d15 {
        width: 57%;
    }
    .d17 {
        width: 65%;
    }
    
}

@media screen and (max-width: 600px) {
    #i100 {width: 33px;height: 33px;}
    #pageTopBtn {right: 10px;}
    .d203 {right: 10px; bottom: 90px;}
    #i201 {width: 38px;}
    .d203 {bottom: 85px;}
    .d200 { left: 50%;transform: translate(-50%, 0%);text-align: center;}
    .d203stb {bottom: 90px;right: 10px;}
    /* #i201stb {width: 38px;} */
    .i52 {width: 38px; height: 38px; right: -10px;}
}

@media screen and (max-width: 500px) {

    /* Footer  */
    .d18 {
        text-align: center;
    }

    .d8 {
        width: 100%;
    }

    .d9 {
        flex-wrap: wrap;
    }

    .s7 {
        text-align: center;
    }

    .d17 {
        width: 80%;
    }
    .z7d4 {flex-direction: column;}
    .z7d5 {width: 100%;}
    .z7d3 {
        padding: 10% 4% 10% 4%;
    }
    .d204 {right: 10px;
    bottom: 145px;}
      .a3 {
        width: 145px;
        height: 35px;
    }

    /* header  */

    .a3 {position: absolute; bottom: 10px; left: 10px; margin-bottom: 5px;}
    .d2 {height: 160px; margin-top: -24px;}
    #d5 {position: absolute; bottom: 10px; right: 10px; margin-bottom: 0px; padding: 0px;}
    .d3 {position: absolute;top: 45%;left: 50%;transform: translate(-50%, -50%);}
    .z7in2 {width: 176px;margin-left: 10px;}

}

@media screen and (max-width: 400px) {

    /* Footer  */
    .d15 {
        width: 80%;
    }

    .d17 {
        width: 100%;
    }


    .d50{width: 90%;}
    .in50{width: 95%;}

}