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

 body {
     font-family: Arial, Helvetica, sans-serif;
     background: #f7f8fc;
     color: #222;
 }

 .container {
     max-width: 1100px;
     margin: auto;
     padding: 0 20px;
 }

 .pt {
    width: 14px;
    height: 14px;
    display: inline-block;
    border: 1px solid #000;
    line-height: 14px;
    border-radius: 50px;
    position: relative;
    top: -5px;
    text-align: center;
}

 /* HEADER */

 .header {
     background: #ffffff;
     border-bottom: 1px solid #eee;
     position: sticky;
     top: 0;
     z-index: 1000;
 }

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

 .logo {
     font-size: 22px;
     font-weight: 700;
     color: #000;
     display: flex;
     align-items: center;
     gap: 8px;
 }

 .menu {
     display: flex;
     gap: 30px;
 }

 .menu a {
     text-decoration: none;
     color: #444;
     font-weight: 500;
 }

 .menu a:hover {
     color: #4f46e5;
 }

 .nav-btns {
     display: flex;
     gap: 10px;
 }

 .btn.small {
     padding: 10px 18px;
     font-size: 14px;
 }

 /* HERO */

 .hero-banner {
     padding: 80px 0 60px;
     background: #fff;
     text-align: center;
 }

 .hero-title {
     font-size: 42px;
     margin-bottom: 10px;
 }

 .hero-sub {
     font-size: 18px;
     color: #555;
     max-width: 650px;
     margin: auto;
     margin-bottom: 75px;
 }

 /* ANIMATION AREA */

 .hero-inner-wrap {
     display: flex;
     align-items: center;
     justify-content: space-between;
     max-width: 900px;
     margin: auto;
     position: relative;
 }

 /* your images */

 .hero1,
 .hero2 {
     height: 200px;
     width: 200px;
     border-radius: 1000px;
     overflow: hidden;
     border: 3px solid #e5e7eb;
     background: #fff;
 }

 .hero1 img,
 .hero2 img {
     width: 100%;
     height: 100%;
     object-fit: cover;
 }

 .hero-conn {
     width: calc(100% - 400px);
     position: absolute;
     left: 0;
     right: 0;
     margin: auto;
     height: 220px;
     top: 40px;
     transform: translateY(-50%);
 }

 .hero-conn img {
     width: 100%;
     height: 100%;
     object-fit: cover;
 }

 /* message bubbles */

 .msg-box {
     position: absolute;
     background: #eef2ff;
     padding: 8px 12px;
     border-radius: 10px;
     font-size: 14px;
     box-shadow: 0 6px 14px rgba(0, 0, 0, 0.1);
     animation: float 4s infinite ease-in-out;
 }

 .msg1 {
     left: -70px;
     top: 20px;
 }

 .msg2 {
     left: -90px;
     top: 80px;
     animation-delay: 1s;
 }

 .msg3 {
     left: -80px;
     top: 140px;
     animation-delay: 2s;
 }

 .msg4 {
     right: -80px;
     top: 20px;
     background: #dcfce7;
 }

 .msg5 {
     right: -90px;
     top: 90px;
     background: #dcfce7;
     animation-delay: 1s;
 }

 .msg6 {
     right: -70px;
     top: 150px;
     background: #dcfce7;
     animation-delay: 2s;
 }

 .logo img {
     max-width: 100%;
     width: 58px;
 }

 .btn {
     background: #778e8c;
 }

 @keyframes float {
     0% {
         transform: translateY(0)
     }

     50% {
         transform: translateY(-10px)
     }

     100% {
         transform: translateY(0)
     }
 }

 /* CTA */

 .cta {
     padding: 70px 0;
 }

 .cta-grid {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 40px;
 }

 .cta-box {
     background: #fff;
     padding: 40px;
     border-radius: 12px;
     box-shadow: 0 15px 35px rgba(0, 0, 0, 0.06);
     text-align: center;
 }

 .cta-box h3 {
     font-size: 24px;
     margin-bottom: 10px;
 }

 .cta-box p {
     color: #666;
     margin-bottom: 20px;
 }

 .btn {
     display: inline-block;
     padding: 14px 28px;
     border-radius: 8px;
     text-decoration: none;
     font-weight: bold;
 }

 .android {
     background: #3ddc84;
     color: #000;
 }

 .browser {
     background: #657876;
     color: #fff;
 }

 /* FEATURES */

 .features {
     padding: 0;
     text-align: center;
 }

 .feature-grid {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 30px;
     margin-top: 40px;
 }

 .feature {
     background: #fff;
     padding: 25px;
     border-radius: 12px;
     box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
 }

 .feature h4 {
     margin-bottom: 10px;
 }

 .feature p {
     color: #666;
     font-size: 14px;
 }

 /* FOOTER */

 footer {
     background: #111;
     color: #aaa;
     text-align: center;
     padding: 25px;
     margin-top: 60px;
 }

 .humburger {
     justify-content: center;
     height: 30px;
     width: 30px;
     display: flex;
     flex-direction: column;
     align-items: center;
     margin-right: 15px;
     margin-left: auto;
 }

 .humburger>span {
     height: 3px;
     display: block;
     background: #000;
     margin-bottom: 5px;
     width: 100%;
 }

 .humburger>span:last-child {
     margin-bottom: 0;
 }

 .flag {
     width: 48px;
     height: 30px;
     display: inline-block;
     background-image: url("../img/flags.png");
     /* your uploaded image */
     background-repeat: no-repeat;
 }

 .language-grid {
     display: flex;
     flex-wrap: wrap;
     gap: 10px;
 }

 .flag-sec {
     padding-top: 40px;
 }

 .lang {
     display: flex;
     align-items: center;
     gap: 8px;
     padding: 8px 12px;
     border: none;
     border-right: 1px solid #ddd;
     border-radius: 0;
     cursor: pointer;
     font-size: 12px;
     background: #fff;
 }

 .flag-ar {
     background-position: 0px -111px;
 }


 /* Arabic - Saudi Arabia */
 .flag-ar {
     background-position: 0px -111px;
 }

 /* Chinese - China */
 .flag-zh {
     background-position: -212px -223px;
 }

 /* Dutch - Netherlands */
 .flag-nl {
     background-position: -777px -223px;
 }

 /* English - United Kingdom */
.flag-en {
    background-position: -353px -224px;
}

 /* Persian - Iran */
 .flag-fa {
     background-position: -496px -670px;
 }

 /* French - France */
 .flag-fr {
     background-position: -849px -0px;
 }

 /* German - Germany */
 .flag-de {
     background-position: -212px -558px;
 }

 /* Hebrew - Israel */
 .flag-he {
     background-position: -495px -57px;
 }

 /* Indonesian - Indonesia */
 .flag-id {
     background-position: -424px -614px;
 }

 /* Italian - Italy */
 .flag-it {
     background-position: -495px -335px;
 }

 /* Japanese - Japan */
 .flag-ja {
     background-position: -495px -500px;
 }

 /* Korean - South Korea */
 .flag-ko {
     background-position: -566px -0px;
 }

 /* Polish - Poland */
 .flag-pl {
     background-position: -848px -112px;
 }

 /* Portuguese - Portugal */
 .flag-pt {
     background-position: -848px -390px;
 }

 /* Russian - Russia */
 .flag-ru {
     background-position: -848px -725px;
 }

 /* Spanish - Spain */
 .flag-es {
     background-position: -283px -447px;
 }

 /* Swahili - Kenya */
 .flag-sw {
     background-position: -495px -558px;
 }

 /* Swedish - Sweden */
 .flag-sv {
     background-position: -919px -334px;
 }

 /* Thai - Thailand */
 .flag-th {
     background-position: -989px -614px;
 }

 /* Turkish - Turkey */
 .flag-tr {
     background-position: -1060px -168px;
 }

 /* Vietnamese - Vietnam */
 .flag-vi {
     background-position: -1130px -280px;
 }

 .flag-slider .slick-slide {
     margin-right: 10px;
 }


 /* RESPONSIVE */

 @media(min-width:991px) {
     .humburger {
         display: none;
     }
 }

 @media(max-width:990px) {
     .menu {
         flex-direction: column;
         position: absolute;
         width: 100%;
         background: #ddd;
         top: 100%;
         max-width: 250px;
         margin-left: auto;
         margin-right: auto;
         left: 0;
         right: 0;
         border-radius: 8px;
         padding: 15px;
         visibility: hidden;
         opacity: 0;
         transition: .2s ease all;

     }

     .hero1,
     .hero2 {
         height: 100px;
         width: 100px;
     }

     .hero-conn {
         width: calc(100% - 200px);
         height: 197px;
         top: 25px;
     }
 }

 @media(max-width:900px) {

     .hero1,
     .hero2 {
         height: 150px;
         width: 150px;
     }

     .hero-conn {
         width: calc(100% - 300px);
         height: 120px;
         top: 25px;
     }

     .cta-grid {
         grid-template-columns: 1fr;
     }

     .feature-grid {
         grid-template-columns: 1fr;
     }


     .msg1 {
         left: 0px;
         top: -15px;
     }

     .msg2 {
         left: 0px;
         top: 137px;
     }

     .msg3 {
         left: 0;
         left: 117px;
         top: 95px;
     }

     .msg4 {
         right: -0px;
         top: -20px;
     }

     .msg5 {
         right: 0px;
         top: 134px;
     }

     .msg6 {
         right: 117px;
         top: 90px;
     }

 }

 @media(max-width:767px) {
     .hero-banner {
         padding-top: 40px;
     }

     .cta {
         padding-top: 40px;
     }

     .hero-title {
         display: none;
     }

     .hero-sub {
    font-size: 14px;
}
 }

 @media(max-width:450px){
    .msg2 {
    left: 0px;
    top: 145px;
}

.msg3 {
    left: 75px;
    top: 133px;
}

.msg-box {
    font-size: 10px;
}

.msg6 {
    right: 75px;
    top: 23px;
}
 }