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

img {
    width:100%;
}

body {
    font-family: 'Inter';font-size: 16px;
    color: #18191F;
    line-height: 140%;
}

ul {
    list-style-type: none;
}

a {
    text-decoration: none;
    color: white;
}

@font-face {
    font-family: "CooperBoldBT";
    src: url("fonts/cooper-bold-bt.ttf");
  }
  

h1 {
    font-family: "CooperBoldBT";
    font-style: normal;
    font-weight: bold;
    font-size: 72px;
    line-height: 130%;
}

h2 {
    font-family: "CooperBoldBT";
    font-style: normal;
    font-weight: bold;
    font-size: 56px;
    line-height: 130%; 
}


p {
    margin: 20px 0;
    line-height: 130%;
}

.navbar {
    background-color: #001628;
    height: 80px;
    padding: 20x;
}

.navbar ul {
    display:flex;
}

.navbar li {
    padding: 0px 10px;
}

.navbar img {
    max-width: 189px;
}

.navbar a {
    color: white;
    padding: 15px 10px;
    margin: 0 5px;
    font-size:14px;
    font-weight: 600;
}

 .navbar .flex {
    justify-content: space-between;
    height: 80px;
 }

.container {
    max-width: 1440px;
    margin: 0 auto;
    overflow:auto;
    padding: 0 40px;
 /*   border-style: solid;   */
}

.navimage {
    max-width:30%;

}

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

.Sign_Up_Button { 
    padding: 8px 12px;  
    position: static;
    background: #E9072B;
    border-radius: 8px;   
   /* Inside Auto Layout */   
    flex: none;
    order: 1;
    flex-grow: 0;
    margin: 0px 45px;
    padding-left: 10px;
    /* identical to box height, or 214% */
    /* Inside Auto Layout */
    order: 0;
    flex-grow: 0;
    cursor: pointer;
}

/* Showcase Section */
.grid { 
    display: grid;
    grid-template-columns: 55% 45%;
    gap:20px;
    justify-content: center;
    align-items: top;
    height: 100%;
}

.showcase {
    position: relative;
    height: 776px;
  
}

.showcase .grid {
    gap:30px;
    overflow: hidden;
}

.underline_1 {
    background: url(images/underline_1.png) bottom left no-repeat;
    padding-bottom: .3em;
    background-size: 100% 23px;
}

.underline_2 {
    background: url(images/underline_2.png) bottom left no-repeat;
    padding-bottom: 1em;
    background-size: 100% 18px;
    padding-left: 60px;
    padding-right: 50px;
}
.underline_3 {
    background: url(images/underline_3.png) bottom left no-repeat;
    padding-bottom: 0;
    background-size: 100% 7px;
}
.underline_4 {
    background: url(images/underline_4.png) bottom left no-repeat;
    background-size: 100% 20px;
}
.underline_5 {
    background: url(images/underline_5.png) bottom left no-repeat;
    padding-bottom: 0.5em;
    padding-top: 1.0em;
    background-size: 100% 130px;
}

.showcase .showcase_hero img {
    max-width: 150px;
    text-align: center;
}   

.showcase .showcase_sub img {
    max-width: 648px;
    text-align: center;
}   

.showcase_hero {
    padding-left: 10%;
    padding-top: 10%;
}

.showcase_sub {
    overflow:hidden;
    text-align: center;
}

.Sign_Up_Button_Body { 
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 8px 12px; 
    background: #E9072B;
    border-radius: 8px;
    
    /* Inside Auto Layout */
    flex: none;
    order: 0;
    flex-grow: 0;
    position: static;
    width: 192px;
    height: 62px;
    font-style: normal;
    font-weight: 600;
    font-size: 18px;
    line-height: 30px;
    /* identical to box height, or 214% */
    text-align: center;
    color: #FFFFFF;
    /* Inside Auto Layout */
    cursor: pointer;
    margin-top: 20px;
}

/*  About Us Section */

.about {

    position: relative;
    background-color: #355464;
    padding: 5% 1%;
    padding-bottom: 2%;
    text-align: center;

}
.about h2 {
    color: white;
    padding-bottom: 15px;
}

.about p {
    color: white;
    font-size: 26px;
    font-weight: normal;
    font-size: 26px;
    line-height: 150%;
    display: inline;
}


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

.Highlight {
    font-style: normal;
    font-weight: bold;
    font-size: 26px;
    line-height: 150%;    
    color: #00D7B5;
    display: inline;
    background-color: rgba(255, 255, 255, 0.1);

}

.about .now {
    padding-top: 20px;
    font-weight: 700;
    color:white;
    font-size: 26px;
    line-height: 150%;
    padding-left: 20px;
    padding-bottom: 50px;
}

.about img {
    max-width: 200px;
}

.Section3 {
    position: relative;
}

.Section3 .grid {
    grid-template-columns: 50% 50%;
    gap:50px;
    overflow: hidden;
  
}

.sec3_l {
     padding-left:10%;
     padding-top: 5%;
     text-align: center;
}

.sec3_l img {
    max-width: 640px;
}

.sec3_r {
    padding: 10% 0;
    position: relative;
}
.sec3_r img {
    max-width: 143px;
    padding: 20px 0;
}

.sec3_r ul {
    display:inline;
    text-align: left;

}
.sec3_r li {
    padding: 10px 10px;
    font-size:16px;
}

.sec3_r ul li::before {
    content: "\2022";  /* Add content: \2022 is the CSS Code/unicode for a bullet */
    color: red; /* Change the color */
    font-weight: bold; /* If you want it to be bold */
    display: inline-block; /* Needed to add space between the bullet and the text */
    width: 1em; /* Also needed for space (tweak if needed) */
    margin-left: -1em; /* Also needed for space (tweak if needed) */
  }

.sec3_underline {
    position: absolute;
    max-width: 161px;
    padding-top: 7%;

}

.sec1_underline {
    position: absolute;
    max-width: 161px;
    padding-top: 1%;

}

/*  Section 4 */
.Section4 {
    position: relative;
    min-height: 668px;
    background-color: #DFEAEC;
  
}

.Section4 .grid {
    gap:30px;
    overflow: hidden;
}

.sec4_l {
     padding-left:10%;
     padding-top: 20%;
}
.sec4_l img{
    max-width:135px ;
}

.sec4_r {
    padding-top: 10%;
    position: relative;

}
.sec4_r img {
    max-width: 143px;
    padding-top: 20px;
}

.sec4_r .subgrid {
    grid-template-columns: 55% 45%;
    overflow: hidden;
    display: grid;
    justify-content: center;
    align-items: middle;
    margin: auto;
    text-align: center;
    background-image: url("images/Dots.png");
    background-size: 100% auto;
    background-repeat: no-repeat;

}

.iphone_large img {
    max-width: 259px;
}

.iphone_large {
  display: flex;
  justify-content: center;
  align-items: center;
}

.iphone_small {
  display: flex;
  justify-content: center;
  align-items: center;
}

.iphone_small img {
    max-width: 203px;
    align-items: middle;
    
}

/*  Section 5 */
.Section5 {
    position: relative;
    min-height: 568px;
    background-color: white;
  
}

.Section5 .grid {
    gap:30px;
    overflow: hidden;
    grid-template-columns: 53% 47%;
}

.sec5_l {
     padding-left:10%;
     padding-top: 5%;
     text-align: center;
}
.sec5_l img{
    max-width:700px ;
}

.sec5_r {
    padding-top: 20%;
    padding-left: 10%;
    position: relative;

}
.sec5_r img {
    max-width: 144px;
    padding-top: 20px;
}


/*  Section 6 */
.Section6 {
    position: relative;
    min-height: 568px;
    background-color: white;
    padding-top: 10px;
  
}

.Section6 .grid {
    gap:30px;
    overflow: hidden;
    grid-template-columns: 50% 50%;
}

.sec6_l {
     padding-left:20%;
     padding-top: 20%;
  
}
.sec6_img   {
        top: 5%;
        left: 10%;
        position: absolute;
        max-width: 141px;
}
.sec6_r {
    position: relative
}
.sec6_r img {
    max-width: 540px;
}

.sec6_underline {
    position: absolute;
    max-width: 161px;
    padding-top: 7%;

}

/* Footer */
.footer {
    background-color: #001628;
    min-height: 280px;
    padding-top: 80px;
}

.footer .grid {
    display: grid;
    gap:10px;
    overflow: hidden;
    grid-template-columns: 33% 33% 33%;
    height: 100%;

}

.footer li {
    padding: 10px 10px;
}

.footer img {
    max-width: 189px;
}

.footer a {
    color: white;
    margin: 0 5px;
    font-weight: 500;
    display:inline
}

 

.footerimage {
    max-width:30%;
}

.social {
    max-width: 100%;
    text-align: center;
    padding-top: 50px;
    display: inline-block;
    float: right;

}

.social img {
    max-width: 32px;
}

.social p {
    color: white;
    vertical-align: bottom;
    font-size: 12px;
    font-weight: normal;
    padding-top: 10%;
}



@media (max-width:1440px){
    h1 {
        font-size:56px;
    }

    h2 {
        font-size: 48px;
    }
    .grid, .showcase {
        height: fit-content;
    }

    .sec4_r .subgrid {
        gap: 10px;
    }
    .underline_5 {
        padding-bottom: 0.65em;
        padding-top: 1em;
    }

@media (max-width:1100px){
    .grid, .showcase  {
        grid-template-columns: 1fr;
    }
    .Section3 .grid {
        grid-template-columns: 1fr;
        gap:10px;
    }
    .Section4 .grid {
        grid-template-columns: 1fr 1fr;
    }

    .Section5 .grid {
        grid-template-columns: 1fr;
        gap:10px;
        padding-top: 50px;
    }

    .footer {
        padding: 0 0;
    }
    .footer .grid {
        grid-template-columns: 1fr;
        gap:10px;

    }
    .footer .social {
        text-align: left;
    }

    .footer p {
        padding: 0 0;
    }

   .navbar li a {
        font-size: 12px;
    }

    .container {
        padding: 0px 10px;
    }

    .sec3_l {
        padding: 10px 10px;
    }
    .sec4_l {
        padding: 10px 10px;
    }
    h1 {
        font-size:56px;
    }

    .showcase_hero {
        padding-left: 10px;
        padding-top: 10px;
    }

    .Sign_Up_Button_Body {
        font-size: 12px;
        width: 160px;
        height: 48px;
    }
    .sec3_r {
        padding: 2%;
    }

    .sec3_underline {
        max-width: 161px;
        padding-top: 4%;
    }

    .Section4 {
        padding-top: 30px;
    }

    .sec4_r {
        padding: 0 0;
    }
    .sec5_l {
        padding: 10px 0;
        grid-row: 2;
    }
    .sec5_r {
        padding: 10px 10px;
    }

 
}

@media (max-width:800px){
    .Section4 .grid {
        grid-template-columns: 1fr;
        padding-bottom: 20px;
    }
    .Section6 .grid {
        grid-template-columns: 1fr;
        gap:10px;

    }
    .sec6_l {
        padding: 10px 10px; 
    }
    .sec6_img {
        display:none;
    }
}


@keyframes fade-in-right {
    0% {
        -webkit-transform: translateX(50px);
        transform: translateX(50px);
        opacity: 0;
    }
}

@media (prefers-reduced-motion: no-preference) {
    .fade-in-right-animation {
        animation: fade-in-right 1s cubic-bezier(.39,.575,.565,1) both;
    }
}

@media (max-width:500px) {
    .navbar li a {
        font-size: 10px;
    }

    .Aboutus {
        display:none;
    }

    h1 {
        font-size:36px;
    }

    h2 {
        font-size: 30px;
    }

    .showcase_hero {
        padding-left: 0px;
        padding-top: 30px;
    }

    p  {
        font-size: 12px;
    }

    .sec3_r li {
        padding: 10px 10px;
        font-size:14px;
    }

    .show {
        opacity: 1;
        transform: translateX(0%);
      }

    .sec3_r p { 
        font-size:14px;
    }

    .about  {
        padding-top: 20px;
    }

    .about img {
        max-width:50px;
        
    }
    .about p {
        font-size: 18px;
    }

    .Highlight {
        font-size: 18px;
    }
    
    .about .now {
            font-size: 18px;
    }
    .sec3_underline {
        max-width: 103px;
    
    }
    .sec4_r {
        padding: 0 0;
    }

    .underline_1 {
        padding-bottom: .3em;
        background-size: 100% 15px;
    }
    .underline_5 {
        padding-bottom: 0.65em;
        padding-top: 1em;
        background-size: 100% auto;
    }
}

@font-face {
    font-family: "CooperBoldBT";
    src: url("fonts/cooper-bold-bt.ttf");
}