.main {
    width: 100%;
    background-image: url('bgi2.png');
    background-position: center;
    background-size: cover;
    width: 100%;
    height: auto;
}

.sevice-img img {
    height: auto;
    width: 100%;
}

.about-list a {
    text-decoration: none;
}

.h1 {
    font-size: var(--fs-1);
    line-height: 1;
}

.h2 {
    font-size: var(--fs-2);
}

.h3 {
    font-size: var(--fs-4);
    font-weight: var(--font-weight, 700);
}

.h3>a {
    color: inherit;
}

.w-100 {
    width: 100%;
}

hr {
    color: aqua;
    font-size: larger;
}

.hero {
    background: rgb(214, 232, 251);
    padding-block: var(--section-padding);
}

.hero-content {
    height: auto;
    margin-bottom: 60px;
    background-color: rgb(62, 64, 149);
}

.hero-subtitle {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 5px;
    margin: 20px;
    margin-bottom: 20px;
}

.hero-subtitle ion-icon {
    color: var(--orange-soda);
}

.hero-subtitle span {
    color: white;
    font-size: 40px;
    font-weight: var(--fw-700);
    margin-left: 20px;
}

.hero-title {
    margin-bottom: 20px;
    margin-left: 20px
}

.hero-text {
    color: white;
    font-size: var(--fs-5);
    line-height: 1.8;
    padding-left: 15px;
    border-left: 10px solid;
    border-color: gray;
    margin-bottom: 30px;
}

@media (min-width: 768px) {
    /**
   * HERO
   */
    .hero-content {
        max-width: 400px;
    }
}

@media (min-width: 992px) {
    /**
   * HERO
   */
    .hero-content {
        max-width: unset;
        margin-bottom: 0;
    }
    .hero .container {
        display: grid;
        grid-template-columns: 1fr 1fr;
        align-items: center;
    }
}


/**
 * responsive for larger than 1200px screen
 */

@media (min-width: 1200px) {
    /**
   * HERO
   */
    .hero-text {
        padding-left: 30px;
        max-width: 450px;
        margin-bottom: 40px;
    }
}

.service-content {
    height: auto;
}

.service-content .section-title {
    text-align: center;
    margin-left: 5%;
    margin-bottom: var(--margin-bottom, 50px);
}

.about-item {
    height: max-content;
    width: auto;
}

.about-item:hover {
    background-color: rgb(195, 207, 230);
    transition: 0.5s;
}

.hero-content .hero-title {
    font-size: 30px;
}

.hero {
    height: 90%;
}

.main1 .img {
    background-color: aqua;
}


/* animation */


/* /===== GOOGLE FONTS =====/ */

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap");

/* /===== VARIABLES CSS =====/ */

@media screen and (min-width: 768px) {
     :root {
        --biggest-font-size: 4rem;
        --h1-font-size: 2.25rem;
        --h2-font-size: 1.5rem;
        --h3-font-size: 1.25rem;
        --normal-font-size: 1rem;
        --small-font-size: .875rem;
        --smaller-font-size: .813rem;
    }
}


/* /========== BASE ==========/ */

*,
::before,
::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

h1,
h2,
h3,
p,
ul {
    margin: 0;
}

ul {
    padding: 0;
    list-style: none;
}

a {
    text-decoration: none;
}


/* /========== CLASS CSS ==========/ */

.section {
    padding: 4rem 0 2rem;
}

.section-title,
.section-subtitle {
    text-align: center;
}

.section-title {
    font-size: var(--h1-font-size);
    color: var(--title-color);
    margin-bottom: var(--mb-3);
}

.section-subtitle {
    display: block;
    color: var(--first-color);
    font-weight: var(--font-medium);
    margin-bottom: var(--mb-1);
}


/* /========== LAYOUT ==========/ */

.bd-container {
    max-width: 960px;
    width: calc(100% - 2rem);
    margin-left: var(--mb-2);
    margin-right: var(--mb-2);
}

.bd-grid {
    display: grid;
    gap: 1.5rem;
}

.l-header {
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: var(--z-fixed);
    background-color: var(--body-color);
}


/* /========== NAV ==========/ */


/* Show menu */

.show-menu {
    top: var(--header-height);
}


/* Active menu */

.active-link {
    color: var(--first-color);
}


/* Change background header */

.scroll-header {
    box-shadow: 0 2px 4px rgba(0, 0, 0, .1);
}


/* Scroll top */

.scrolltop {
    position: fixed;
    right: 1rem;
    bottom: -20%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: .3rem;
    background: rgba(6, 156, 84, .5);
    border-radius: .4rem;
    z-index: var(--z-tooltip);
    transition: .4s;
    visibility: hidden;
}

.scrolltop:hover {
    background-color: var(--first-color-alt);
}

.scrolltop__icon {
    font-size: 1.8rem;
    color: var(--body-color);
}


/* Show scrolltop */

.show-scroll {
    visibility: visible;
    bottom: 1.5rem;
}


/* /========== SERVICES ==========/ */

.services__container {
    text-align: center;
    height: auto;
    width: auto;
    row-gap: 2.5rem;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.services__content {
    margin-left: 10%;
    text-align: center;
    font-size: large;
}

.services__container .icon-box {
    margin-top: 20%;
    font-size: 50px;
}

.services__title {
    font-size: xx-large;
    color: var(--title-color);
    margin-bottom: var(--mb-1);
}

.services__description {
    padding: 0 1.5rem;
}


/* /========== MEDIA QUERIES ==========/ */

@media screen and (min-width: 960px) {
    .bd-container {
        margin-left: auto;
        margin-right: auto;
    }
}


/* -----------cloud suit------ */

.container-img {
    position: relative;
    text-align: center;
    color: white;
}

.text-img {
    position: absolute;
    top: 60%;
    right: 20%;
    font-size: xx-large;
}

.service-card .h3 {
    font-size: x-large;
}

.service-card .text {
    font-size: medium;
}