body{ overflow-x: hidden; } * { margin: 0; padding: 0; box-sizing: border-box; } .text, .text-set, .text-set1{ font-size: 18px; } .about-heading{ margin-top: -10px; padding-bottom: 50px; } .values{ display: flex; flex-direction: column; align-items: center; } .text1{ text-align: center; width: 50%; font-size: 18px; } @media (max-width: 768px) { .text1{ width: 100%; } .text2{ text-align: center; font-size: 18px; } } .feature-card-area .card{ border: 0px; cursor: pointer; transition: all 0.7s cubic-bezier(0.645, 0.045, 0.355, 1); } .feature-card-area .card:hover{ transform: translateY(-3px); } .feature-card-area .card i{ font-size: 48px; color: var(--global-palette1); transition: all 0.7s cubic-bezier(0.645, 0.045, 0.355, 1); } .feature-card-area .card:hover i{ color: var(--global-palette4); } .security-title{ color: #00AEEB; margin-bottom: 10px; } .security-text{ text-align: justify; font-size: 18px; } .security-img{ width: 100%; } .security-img1{ width: 100%; height: 364px; object-fit: contain; } .security-img2{ width: 100%; height: 364px; } .security-img3{ width: 100%; height: 450px; } .top-features-heading{ color: #00AEEB; margin-top: 100px; } .container-team{ display: grid; grid-template-rows: repeat(3); } .feature-box{ padding: 20px; text-align: left; flex: 1 1 calc(33.33% - 20px); } .feature-bg{ background-color: rgba(0, 174, 235, 0.8); border-radius: 80px; padding: 25px; width: 70px; height: 70px; margin-bottom: 15px; display: flex; justify-content: center; align-items: center; } .fa-2xl{ color: white; width: 295px; } .feature-bg img{ width: 45px !important; height: 45px !important; margin-top: -6px; margin-right: 1px; } @media screen and (max-width: 1024px){ .container-team{ display: flex; flex-wrap: wrap; justify-content: center; gap:20px; } .feature-box{ width: calc(50% - 20px); } } @media screen and (max-width: 768px){ .container-team{ display: flex; flex-wrap: wrap; justify-content: center; gap:15px; } .text-set{ text-align: left; margin-top: 35px !important; } .feature-box{ width: calc(50% - 15px); } } @media screen and (max-width: 425px){ .feature-box h4{ font-size: 20px; } } @media screen and (max-width: 320px){ .text-set1{ margin-top: 10px !important; } } .features-box{ position: relative; text-align: center; padding: 30px; border-radius: 10px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); display: flex; align-items: center; justify-content: center; flex-direction: column; height: 350px; width: 300px; } .features-box p{ text-align: center; } .features-bg{ background-color: rgba(0, 174, 235, 0.8); border-radius: 80px; padding: 10px; width: 60px; height: 60px; margin-top: -40px; z-index: 1; } @media (max-width:1024px) { .features-box{ display: flex; align-items: center; justify-content: center; width: 100%; margin-bottom: 15px; } .features-bg{ margin-top: 20px !important; } .text-set{ margin-top: -1px; } } .icon{ color: white; width: 60px; height: 60px; } .features-bg img{ width: 40px; height: 40px; } .mission-text-container{ text-align: justify; } .about-img{ width: 100%; height: 450px; object-fit: contain; } #iblog{ background-color: rgba(246, 246, 255); } #image-header-shape{ width: 100%; } .sec-heading{ color: #00AEEB; } .btn-home{ background-color: #00AEEB; border-radius: 50px; color: white; border: none; width: 123px; height: 48px; font-size: 18px ; font-weight: bold; } .btn-home:hover{ background-color: #007acc; } .stats{ text-align: center; } .stat-heading{ font-size: 28px; font-weight: bold; margin-bottom: 28px; color: #00AEEB; } .stats-container{ display: flex; justify-content: space-evenly; align-items: center; flex-wrap: wrap; } .stat{ text-align: center; } .stat p{ font-size: 16px; gap: 20px; } .stat1{ text-align: center; } .stat1 p{ font-size: 16px; } .stat h3{ font-size: 24px; font-weight: bold; } @media (max-width: 767px) { .stats-container{ flex-direction: column; align-items: center; } .stat{ width: 100%; margin-bottom: 25px; } .security-img3{ width: 100%; height: 250px; object-fit: contain; } .about-img{ width: 100%; height: auto; object-fit: contain; margin-top: -49px; } } .text3{ width: 50%; font-size: 18px; } .text-container1{ display: flex; flex-direction: column; align-items: center; }.heading { color: #00AEEB; } @media (max-width: 768px) { .text3{ width: 100%; } }