/* font import */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');
html {
    scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}
:root {
    /* colors */
    --primary-color: #165652;
    --secondary-color: #6B012D;
    --strong-black: #000000;
    --header: #090909;
    --sub-header: #3F3F3F;
    --sub-text: #292929;
    --minor-text: #3F3F3F;
    --white: white;
    --green: #4CAF4F;

    /* widths */
    --section-width: 1160px;
}
body, html {
    /* overflow-x: hidden; */
    width: 100%;;
}
* {
    margin: 0;
    padding: 0;
    font-family: "Inter", sans-serif;
}


.arrow-down {
    background-image: url(/images/arrow-down.svg);
    display: inline-block;
    width: 21px;
    height: 21px;
    vertical-align: middle;
    transform: rotate(0deg);
    transition: transform .2s;
}
.arrow-downFooter {
    background-image: url(/images/arrow-downFooter.svg);
    display: inline-block;
    width: 21px;
    height: 21px;
    vertical-align: middle;
    transform: rotate(0deg);
    transition: transform .2s;
}

[dropdown].active .arrow-down, [dropdown].active .arrow-downFooter {
    transform: rotate(180deg);
}

.right-arrow {
    background-image: url(/images/right-arrow.svg);
    display: inline-block;
    vertical-align: middle;
    width: 21px;
    height: 21px;
}

header {
    padding: 0 4rem;
    height: 70px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    -webkit-box-shadow: 0px 1px 7px 0px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0px 1px 7px 0px rgba(0, 0, 0, 0.1);
    box-shadow: 0px 1px 7px 0px rgba(0, 0, 0, 0.1);
    position: relative;
    background-color: var(--white);
}

nav>ul {
    display: flex;
    list-style: none;
    align-items: center;
    justify-content: space-between;
    width: 512px;
}

nav ul li {
    height: 24px;
    display: flex;
    align-items: center;
}

.equal-size {
    width: 128px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.equal-size img {
    width: 100%;
}

header a {
    text-decoration: none;
    color: var(--header);
    font-size: 16px;
    display: flex;
    align-items: center;
    
}

header a:hover {
    /* text-decoration: underline; */
    color: var(--primary-color);
}
.mobileMenu {
    display: none;
}
#menuList{
    position: absolute;
    top: 70px;
    height: 100vh;
    width: 100%;
    transform: translateY(-100%);
    transition: transform .2s ease-out;
    opacity: 0;
    pointer-events: none;
    z-index: -1;
    left: 0;
}
#menuList.move {
    opacity: 1;
    transform: translateY(0);
    max-height: calc(100vh - 70px);
    overflow-y: hidden;
    overflow-x: hidden;
    pointer-events: auto;
}
#menuList ul {
    display: flex;
    flex-direction: column;
    /* justify-content: space-between; */
    width: 100%;
    list-style: none;
}
#menuList ul li {
    padding: 1rem;
}
#menuList ul li a{
    font-size: 20px;
    display: flex;
    width: 100%;
    justify-content: space-between;
    padding: 1rem 0;
}
#menuList ul li a i{
    margin-right: 1rem;
}
.dropMenu {
    position: relative;
}
.displayNone {
    display: none !important; 
}
.dropDown {
    display: flex;
    flex-flow: column nowrap;
    position: absolute;
    list-style: none;
    z-index: 40;
    top: 32px;
    left: 0;
    width: 300px;
    background-color: rgb(249, 249, 249);
    -webkit-box-shadow: 0 20px 70px 0 rgba(0, 0, 0, .1);
    -moz-box-shadow: 0 20px 70px 0 rgba(0, 0, 0, .1);
    box-shadow: 0 20px 70px 0 rgba(0, 0, 0, .1);
    opacity: 0;
    pointer-events: none;
    transform: translateY(-24px);
    transition: opacity 150ms ease-in-out, transform 150ms ease-in-out;
    border-radius: 1rem;
    overflow: hidden;
}


.dropDown li {
    padding: 12px 16px;
    margin: 0;
    border-bottom: 1px solid #cacaca; 
    transition: background-color 150ms ease-in-out; 
}
.dropDown li:hover {
    background-color: rgba(0, 123, 255, 0.1); 
}
.dropDown li a {
    color: #333; 
    text-decoration: none; 
    display: block; 
    font-weight: 500; 
}
.dropDown li a:hover {
    color: #19a99f; 
}
.dropDown li:nth-last-child(1) {
    border-bottom: none; 
}

.dropFooter {
    display: none;
    flex-flow: column nowrap;
    list-style: none;
    pointer-events: none;
    background-color: #01100C;
}
#menuList .dropHeader {
    list-style: none;
    pointer-events: none;
    display: none;
    flex-flow: column nowrap;
}
#menuList .dropHeader li a {
    font-size: 18px;
}
#menuList .dropHeader li {
    padding: .5rem;
}
.changeWidth {
    width: 100px;
    left: 44px;
}
.dropFooter li {
    padding: 8px 0;
} 

[dropdown].active .dropFooter, #menuList [dropdown].active .dropHeader {
    display: flex;
    pointer-events: auto;
}

[dropdown].active .dropDown {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}



.section,
.aSection,
.cSection,
.pSection {
    width: var(--section-width);
    margin: 48px auto;
    display: flex;
    flex-flow: row wrap;
}

.hero,
.aHero,
.cHero {
    margin-top: 48px;
}

.text-highlight {
    color: var(--secondary-color);
}

.hero {
    flex-flow: column nowrap;
    align-items: center;
}

.hero h1 {
    color: var(--header);
    font-size: 64px;
    text-align: center;
}

.hero p {
    text-align: center;
    font-size: 24px;
    color: var(--sub-text);
    font-weight: 400;
    margin: 32px 0;
}

.callToAction {
    display: flex;
}

.primaryBtn,
.secondaryBtn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    text-decoration: none;
    margin: 0 8px;
    border-radius: 8px;
    width: 144px;
    font-size: 18px;
    color: var(--white);
    background-color: var(--primary-color);
    transition: background-color 0.3s ease;
}

.secondaryBtn {
    color: var(--strong-black);
    background-color: var(--white);
    border: var(--primary-color) 2px solid;
    position: relative;
    display: flex;
    flex-flow: column;
    align-items: center;
    justify-content: center;
}

.primaryBtn:hover {
    background-color: #103d3a;
}

.secondaryBtn:hover {
    border-color: #103d3a;
    color: #103d3a;
}
.secondaryBtn::after {
    content: '';
    position: absolute;
    width: 0;
    height: 1.5px; 
    bottom: 8px;
    left: 50%;
    background-color: #103d3a; 
    transition: width 0.3s ease; 
    margin: auto;
    transform: translateX(-50%); 
  }
  .secondaryBtn:hover::after {
    width: 70%; 
  }
  
.hero img {
    margin-top: 32px;
    width: 100%;
    height: 586px;
    object-fit: cover;
}

.section h2 {
    margin: auto;
    width: 75%;
    font-size: 48px;
    color: var(--sub-header);
    text-align: center;
    font-weight: 600;
}

.our-customers {
    margin: 96px auto;
}

.our-customers div {
    display: flex;
    flex-flow: row wrap;
    gap: 2rem;
    margin-top: 32px;
    justify-content: space-between;
    width: 100%;
}

.our-customers img {
    height: 64px;
}

.review {
    justify-content: space-between;
}

.review-block {
    width: 30%;
    margin: 32px 0;
}

.review-block>p {
    width: 80%;

}

.people-info {
    display: flex;
    margin: 16px 0;

}

.people-info img {
    width: 64px;
    height: 64px;
    object-fit: contain;
    margin-right: 16px;
    border-radius: 12px;
}

.people-info .strong-text {
    font-size: 20px;
    font-weight: 500;
}

.people-info p {
    font-size: 16px;
    font-weight: 400;
}

footer {
    margin-top: 80px;
    background-color: #01100C;
    color: var(--white);
    padding: 64px 5%;
}

div.withMenu {
    display: none;
}

footer a,
footer p {
    text-decoration: none;
    color: var(--white);
    font-weight: 200;
}

.footer-block h2 {
    margin-bottom: 32px;
    font-weight: 500;
    font-size: 24px;
}

.footer-block .ungaSoft {
    font-size: 48px;
    font-weight: 600;
}

.ungaSoft span {
    font-weight: 300;
    color: #51C3BC;
}

.footer-nav-item {
    margin-bottom: 16px;
    width: 90%;
}

footer a:hover {
    text-decoration: underline;
}

footer ul {
    list-style: none;
}

.grid-container {
    display: grid;
    grid-template-columns: 28% 26% 22% 18%;
    column-gap: 2%;
    margin-bottom: 32px;
}

.copyright {
    margin: auto;
    margin-top: 32px;
}

.copyright p {
    text-align: center;
}

.miniText {
    width: 224px;
}

.product-blocks {
    display: flex;
    position: relative;
    width: 332px;
    height: 332px;
    margin-bottom: 128px;
}

.product-info {
    position: absolute;
    display: flex;
    flex-flow: column nowrap;
    box-sizing: border-box;
    background-color: #F8F8F8;
    width: 290px;
    height: 232px;
    bottom: -100px;
    left: 20px;
    border-radius: 10px;
    -webkit-box-shadow: 0px 1px 7px 0px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0px 1px 7px 0px rgba(0, 0, 0, 0.2);
    box-shadow: 0px 1px 7px 0px rgba(0, 0, 0, 0.2);
    padding: 24px 16px;
    justify-content: space-between;
    transition: transform 0.3s;
}

.product-info:hover {
    transform: scale(1.05);
}

.product-info h3 {
    margin-bottom: 16px;
    font-size: 24px;
    font-weight: 600;
    text-align: center;
    color: var(--sub-header);
    /* height: 64px; */
    display: block;
}

.product-info p {
    color: var(--sub-text);
    text-align: center;
}

.product-info a {
    color: var(--green);
    text-decoration: none;
    align-self: center;
    margin-top: 8px;
}

.product-info a:hover {
    text-decoration: underline;
}

.product-blocks img {
    width: 100%;
    height: 100%;
    border-radius: 10px;
}

.our-products {
    justify-content: space-between;
    align-items: center;
}

.our-products h2 {
    margin-bottom: 32px;
}

.product-info h3.small-heading {
    font-size: 20px;
}

p.small-text {
    font-size: 14px;
}

.last-call {
    flex-flow: column nowrap;
    align-items: center;
}

.last-call p {
    margin: 32px 0;
    width: 75%;
    text-align: center;
}

.aHero h1 {
    color: var(--header);
    font-size: 64px;
}

.aHero p {
    font-size: 24px;
    color: var(--sub-text);
    font-weight: 400;
    margin: 16px 0;
    width: 95%;
}

.aHero div {
    width: 63%;
}

.aHero img {
    width: 35%;
    margin-left: 2%;
    object-fit: cover;
}

.threeExp {
    justify-content: space-between;
}

.tagBlock {
    width: 25%;
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    transition: transform 0.1s;
}

.tagBlock:hover  {
    transform: scale(1.05);
}
.tagBlock p {
    text-align: center;
    margin: 16px auto;
    font-weight: 700;
    font-size: 22px;
    color: var(--minor-text);
    width: 70%;
}

.tagBlock p.desc {
    margin: 0;
    font-weight: 400;
    font-size: 16px;
    width: 100%;
}

.aSection h2 {
    width: 100%;
    font-size: 48px;
    color: var(--strong-black);
    font-weight: 600;
}

.subHeading {
    width: 100%;
    font-size: 32px;
    color: var(--primary-color);
    font-weight: 500;
    margin-bottom: 16px;
}

.info {
    width: 50%;
    display: flex;
    flex-flow: column nowrap;
    justify-content: space-between;
}

.info p {
    line-height: 25px;
}

.WhyChooseUs img {
    width: 45%;
    margin-left: 5%;
    object-fit: cover;
    height: 318px;
}

.directors {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    width: 100%;
}
.directorBlock {
    transition: transform 0.1s;
}
.directorBlock:hover {
    transform: scale(1.05);
}
.directorBlock img {
    width: 256px;
}

.name {
    margin-top: 8px;
    font-size: 20px;
    font-weight: 500;
}

.advantages div {
    display: flex;
    width: 100%;
    flex-flow: row wrap;
    gap: 3rem;
    justify-content: space-between;
}

.AdvBlock {
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    width: 28%;
    transition: transform 0.1s;
}
.AdvBlock:hover {
    transform: scale(1.05);
}
.AdvBlock p {
    text-align: center;
    font-size: 24px;
    font-weight: 700;
    color: var(--minor-text);
    margin: 16px 0;
}

.AdvBlock p.Adesc {
    font-size: 16px;
    font-weight: 400;
    color: var(--minor-text);
    margin: 0;
}

/* contact us */
.cHero h1 {
    color: var(--header);
    font-size: 64px;
}

.contactUs {
    justify-content: space-between;
}

.left-cont {
    width: 50%;
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-end;
}

.right-cont {
    width: 45%;
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
}

.right-cont p {
    text-align: center;
    margin: 8px 0;
    width: 300px;
}

.contact-highlight {
    font-size: 24px;
    color: var(--primary-color);
    font-weight: 500;
}

.phone,
.email {
    font-weight: 600;
    margin: 0;
}

.left-cont input,
.left-cont select,
.left-cont textarea {
    width: 100%;
    margin: 16px 0;
    height: 48px;
    font-size: 20px;
    padding: 8px;
    box-sizing: border-box;
    color: var(--minor-text);
}

form.left-cont textarea {
    height: 144px;
}

.left-cont input::placeholder .left-cont textarea::placeholder {
    color: var(--minor-text);
}

.left-cont select {
    /* download in the future */
    background: url("data:image/svg+xml,<svg height='10px' width='10px' viewBox='0 0 16 16' fill='%23000000' xmlns='http://www.w3.org/2000/svg'><path d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/></svg>") no-repeat;
    background-position: calc(100% - 0.75rem) center !important;
    -moz-appearance: none !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}

input[type="submit"] {
    background-color: var(--primary-color);
    border: none;
    width: 160px;
    border-radius: 8px;
    color: var(--white);
    text-align: center;
    padding: 4px;
    font-size: 16px;
    font-weight: 300;
    transition: background-color 0.3s ease;
}

input[type="submit"]:hover {
    background-color: #103d3a;
}

/* products */


.pHero {
    background: url('../images/banner-world.webp') no-repeat center 35%/cover; 
    height: 45vh; 
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--white); 
    position: relative;
}
.pHero::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5); 
}
.pHero-content {
    z-index: 1; 
    display: flex;
    flex-flow: column;
    align-items: center;
    justify-content: center;
}
.pHero h1 {
    font-size: 64px;
    margin-bottom: 20px;
}
.pHero p {
    font-size: 20px;
    font-weight: 400;
    width: 70%;
    margin-bottom: 40px;
}
.pHero a {
    padding: 15px 30px;
    background-color: var(--primary-color); 
    color: #fff; 
    text-decoration: none;
    border-radius: 8px;
    font-size: 1rem;
    transition: background-color 0.3s ease;
}
.pHero a:hover {
    background-color: #103d3a;
}
.feature-section {
    justify-content: space-between;
}
.feature {
    flex: 0 1 30%; 
    text-align: center;
    border: 1px solid #ddd;
    border-radius: 8px;
    overflow: hidden;
    transition: transform 0.3s;
    padding: 16px;
    box-sizing: border-box;
    margin-bottom: 40px;
}
.feature:hover {
    transform: scale(1.05);
}
.feature img {
    height: auto;
    margin: 16px 0;
}

.feature h2 {
    font-size: 24px;
    font-weight: 600;
    color: var(--sub-header);
    margin: 10px 0;
}

.feature p {
    padding: 0 10px;
}


.product-images-section h2 {
    font-size: 40px;
    margin-bottom: 32px;
    color: var(--sub-header);
}

.feature-block {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 40px;
}

.feature-block.reverse {
    flex-direction: row-reverse; 
}
.feature-block.reverse .feature-text{
    margin-left: 0;
    margin-right: 64px;
}
.feature-image {
    width: 50%;
    display: flex;
    justify-content: center;
}
.feature-image img {
    max-width: 100%;
    height: 100%;
    /* aspect-ratio: 19/9; */
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    /* object-fit: cover; */
}

.feature-text {
    margin-left: 64px;
    max-width: 50%;
    text-align: left;
}

.feature-text h3 {
    font-size: 24px;
    margin-bottom: 15px;
    color: var(--sub-text);
}

.feature-text p {
    margin-bottom: 10px;
    color: var(--sub-text);
}
.call-to-action {
    flex-flow: column;
    text-align: center;
    align-items: center;
}
.call-to-action h2 {
    font-size: 40px;
    color: var(--sub-header);
}
.call-to-action p {
    margin: 32px;
    color: var(--minor-text);
}


.features-list {
    background-color: #f9f9f9; 
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    box-sizing: border-box;
    justify-content: center;
}

.features-list h2 {
    font-size: 28px;
    margin-bottom: 15px;
    width: 100%;
    color: var(--sub-header); 
}

.features-list ul {
    list-style-type: none; 
    padding: 0;
}

.features-list li {
    padding: 12px 0; 
    border-bottom: 1px solid #e1e1e1; 
    transition: background-color 0.3s ease; 
}
.features-list li:hover {
    background-color: #d4d4d4; 

}
.features-list li:last-child {
    border-bottom: none; 
}

.features-list strong {
    color: #4B9B9D; 
}

.cta-button {
    margin-top: 24px; 
    text-align: center; 
}

.cta-button a {
    display: inline-block;
    background-color: #165652; 
    color: #fff; 
    padding: 10px 20px; 
    border-radius: 5px;
    text-decoration: none; 
    font-weight: bold;
    transition: background-color 0.3s ease; 
}
.cta-button a:hover {
    background-color: #103d3a; 
}




@media only screen and (max-width: 1200px) { /* small pc size */
    :root {
        --section-width: 900px;
    }

    .section,
    .aSection,
    .cSection,
    .pSection {
        margin: 40px auto;
    }

    .hero,
    .aHero,
    .cHero {
        margin-top: 32px;
    }

    .hero h1,
    .aHero h1,
    .cHero h1,
    .pHero h1 {
        font-size: 48px;
    }

    .hero p,
    .aHero p
     {
        font-size: 20px;
    }
    .pHero p {
        font-size: 18px;
    }
    .our-customers img {
        height: 48px;
    }

    .our-products {
        justify-content: space-evenly;
    }

    .section h2,
    .aSection h2 {
        font-size: 32px;
    }

    .footer-block h2 {
        font-size: 24px;
    }

    .footer-block h2 {
        font-size: 20px;
    }

    .footer-block .ungaSoft {
        font-size: 32px;
    }

    footer a,
    footer p {
        font-size: 14px;
    }

    .tagBlock p,
    .AdvBlock p {
        font-size: 20px;
        margin: 8px auto;
    }

    .subHeading {
        font-size: 24px;
    }

    .directors {
        justify-content: space-evenly;
        width: 85%;
        margin: auto;
    }

    .directorBlock:nth-last-child(-n + 2) {
        margin-top: 16px;
    }

    .WhyChooseUs img {
        height: 400px;
    }

    .left-cont input,
    .left-cont select,
    .left-cont textarea {
        height: 40px;
        font-size: 18px;
    }
    .feature {
        flex: 0 1 45%;
    }
    .feature-image  {
        width: 60%;

    }
    .feature-text {
        max-width: 40%;
        margin-left: 48px;
    }
    .feature-block.reverse .feature-text {
        margin-right: 48px;
    }
}
@media only screen and (max-width: 1024px) { /* table size */
    div.withMenu {
        display: flex;
    }

    div.withOut {
        display: none;
    }

    footer {
        padding: 32px 5%;
    }

    .grid-container {
        display: flex;
        flex-direction: column;
    }

    .footer-block {
        display: flex;
        flex-direction: column;
    }
    .footer-block h2.ungaSoft {
        display: block;
    }
    .footer-block h2{
        display: flex;
        justify-content: space-between;
        margin-bottom: 16px;
    }
    .miniText {
        margin-bottom: 16px;
        width: 296px;
    }
    .mobileMenu {
        display: flex;
    }
    .noMenu {
        display: none;
    }

    nav {
        display: none;
    }

    header a.equal-size {
        display: none;
    }

    header {
        padding: 0 1rem;
    }

    :root {
        --section-width: 90%;
    }


    .section,
    .aSection,
    .cSection,
    .pSection {
        margin: 32px auto;
    }

    .hero,
    .aHero,
    .cHero {
        margin-top: 24px;
    }

    .hero img {
        height: 456px;
    }

    .our-customers div {
        justify-content: center;
    }

    .review-block {
        width: 32%;
    }

    .review-block>p {
        width: 95%;
    }

    .section h2,
    .aSection h2 {
        width: 80%;
    }

    .tagBlock {
        width: 30%;
    }

    .tagBlock p,
    .AdvBlock p {
        font-size: 18px;
        width: 90%;
    }

    .directors {
        justify-content: space-evenly;
        width: 90%;
        gap: 2rem;
    }

    .advantages div {
        justify-content: space-evenly;
    }

    .AdvBlock p.Adesc {
        width: 110%;
    }

    .WhyChooseUs img {
        height: 420px;
    }
    .feature-block {
        flex-flow: column;
        align-items: start;
    }
    .feature-image, .feature-text {
        width: 100%;
        max-width: 100%;
        margin: 16px 0;
    }
    .feature-block.reverse {
        flex-direction: column;
    }
    .feature-block.reverse .feature-text {
        margin: 0;
    }
    .product-images-section h2, .call-to-action h2 {
        font-size: 32px;
    }
}

@media only screen and (max-width: 900px) { /* small table size for fixing small errors ????*/
    .aHero {
        flex-direction: column;
    }

    .aHero div,
    .aHero img {
        width: 100%;
    }

    .aHero img {
        height: 324px;
    }

    .WhyChooseUs {
        flex-direction: column;
    }

    .info,
    .WhyChooseUs img {
        width: 100%;
        margin: 0;
    }

    .info p {
        margin-bottom: 16px;
    }

    /* need to add some other media tag for doing the column effect on the aHero, at 900px :D */
    /* idk remember what's this ^ */
}

@media only screen and (max-width: 800px) {
    .review-block {
        width: 45%;
        margin: 8px 0;
    }

    .review {
        justify-content: space-evenly;
    }
}

@media only screen and (max-width: 700px) {
    .contactUs {
        flex-direction: column-reverse;
    }

    .left-cont,
    .right-cont {
        width: 100%;
    }
    .feature {
        flex: 0 1 100%;
    }

}

/* specific media */
@media only screen and (max-width: 666px) {
    .AdvBlock p.Adesc {
        width: 100%;
    }

    .AdvBlock {
        width: 40%;
    }
}

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

    .hero h1,
    .aHero h1,
    .cHero h1, 
    .pHero h1 {
        font-size: 32px;
    }

    .hero p,
    .aHero p {
        font-size: 18px;
        margin: 16px 0;
    }
    .pHero p {
        font-size: 16px;
        width: 98%;;
    }
    .callToAction {
        flex-direction: column;
        width: 100%;
    }

    .primaryBtn,
    .secondaryBtn {
        width: 100%;
        font-size: 16px;
        margin: 8px 0;
        box-sizing: border-box;
    }

    .hero img {
        height: 256px;
    }

    .section h2,
    .aSection h2 {
        font-size: 24px;
        width: 100%;
    }

    .last-call p {
        width: 95%;
        margin: 16px 0;
    }

    .tagBlock {
        width: 45%;
    }

    .threeExp {
        justify-content: space-evenly;
    }

    .tagBlock:nth-last-child(1) {
        margin-top: 16px;
    }

    .subHeading {
        font-size: 20px;
    }

    .review {
        flex-direction: column;
        align-items: center;
    }

    .review-block {
        width: 60%;
    }

    .people-info p {
        font-size: 14px;
    }

    .people-info .strong-text {
        font-size: 18px;
    }
    .pSection {
        margin: 24px auto;
    }
    .feature {
        margin-bottom: 24px;
    }
    .product-images-section h2, .call-to-action h2 {
        font-size: 24px;
        margin-bottom: 24px;
    }
    .feature-text h3 {
        font-size: 20px;
    }
    .feature-block {
        margin-bottom: 20px;
    }
}

@media only screen and (max-width: 500px) {
    .AdvBlock {
        width: 270px;
    }
}

@media only screen and (max-width: 392px) {
    .our-customers div {
        flex-direction: column;
        align-items: center;
    }
}