.intro {
    background: url("../assets/home/intro.png");
    background-repeat: no-repeat;
    background-size: cover;
    padding: 15% 10%;
    margin-top: -5%;
}

.intro h4 {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 600;
    font-size: 14px;
    line-height: 17px;
    font-variant: small-caps;
    color: #0A19CE;
}

.intro h1 {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 600;
    font-size: 60px;
    line-height: 70px;
    color: #263238;
}

.intro p {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 21px;
    text-align: justify;
    color: #969696;
    padding-right: 3%;
}

.wdwd {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 600;
    font-size: 35px;
    line-height: 52px;
    color: #0A19CE;
}

.owl-carousel {
    padding: 5%;
}

.item .card {
    width: 328px;
    height: 324px;
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(4px);
    border-radius: 10px;
    padding: 10% 5%;
    margin: 0 auto;
}

.card .card-title {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 600;
    font-size: 20px;
    line-height: 30px;
    text-align: center;
    color: #263238;
}

.card .card-text {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 500;
    font-size: 12px;
    line-height: 18px;
    text-align: justify;
    color: #848383;
}

.web {
    width: 389px;
    height: 79px;
    left: 83.8px;
    top: 99px;
    background: linear-gradient(180deg, rgba(144, 142, 224, 0.4) 0%, rgba(141, 135, 216, 0.4) 100%);
    backdrop-filter: blur(10px);
    border-radius: 10px;
    margin: 10% auto;
}

.cyber {
    width: 389px;
    height: 79px;
    background: linear-gradient(180deg, rgba(242, 180, 225, 0.4) 0%, rgba(233, 151, 193, 0.4) 100%);
    backdrop-filter: blur(10px);
    border-radius: 10px;
    margin: 10% auto;
}

.human {
    width: 389px;
    height: 79px;
    background: linear-gradient(180deg, rgba(142, 199, 224, 0.4) 0%, rgba(135, 196, 216, 0.4) 100%);
    backdrop-filter: blur(10px);
    border-radius: 10px;
    margin: 10% auto;
}

.ml {
    width: 389px;
    height: 79px;
    background: linear-gradient(180deg, rgba(224, 142, 157, 0.4) 0%, rgba(216, 135, 140, 0.4) 100%);
    backdrop-filter: blur(10px);
    border-radius: 10px;
    margin: 10% auto;
}

.domain .col-6 .web,
.domain .col-6 .cyber,
.domain .col-6 .human,
.domain .col-6 .ml {
    margin: 5% auto;
    padding-top: 3%;
}

.web p {
    font-family: Poppins;
    font-style: normal;
    font-weight: 600;
    font-size: 20px;
    line-height: 30px;
    text-align: center;
    color: #64558E;
}

.cyber p {
    font-family: Poppins;
    font-style: normal;
    font-weight: 600;
    font-size: 20px;
    line-height: 30px;
    text-align: center;
    color: #AD3454;
}

.human p {
    font-family: Poppins;
    font-style: normal;
    font-weight: 600;
    font-size: 20px;
    line-height: 30px;
    text-align: center;
    color: #64558E;
}

.ml p {
    font-family: Poppins;
    font-style: normal;
    font-weight: 600;
    font-size: 20px;
    line-height: 30px;
    text-align: center;
    color: #894713;
}

.box {
    width: 85%;
    height: 150px;
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(4px);
    border-radius: 10px;
    margin: 10%;
}

.box img {
    width: 100px;
    height: 100px;
    margin: 4% 2%;
    border-radius: 50%;
}

.box h1 {
    font-family: Poppins;
    font-style: normal;
    font-weight: 600;
    font-size: 20px;
    line-height: 30px;
    color: #64558E;
}

.content {
    padding: 2% 4%;
}

.carousel {
    margin-bottom: 10%;
}

.contact {
    background: url("../assets/home/contact.png");
    background-size: cover;
    background-repeat: no-repeat;
    padding: 4% 6%;
}

.owl-carousel {
    position: relative;
}

.one {
    position: absolute;
    top: 15%;
    z-index: 100;
}

.two {
    position: absolute;
    bottom: 15%;
    left: 34%;
    z-index: 100;
}

.three {
    position: absolute;
    bottom: 15%;
    right: 0;
    z-index: 100;
    width: 135px;
    height: 145px;
}

.rel {
    position: relative;
}

.abs {
    position: absolute;
    left: 10%;
    top: 45%;
}

.carousel-item p {
    font-family: Poppins;
    font-style: normal;
    font-weight: 500;
    font-size: 12px;
    line-height: 18px;
    text-align: justify;
    color: #848383;
}

@media (max-width:1090px) {
    .intro {
        background-size: contain;
    }
}

@media (max-width:575px) {
    .intro h4 {
        font-size: 12px;
    }
    .intro h1 {
        font-size: 25px;
        line-height: 35px;
    }
    .intro p {
        font-size: 12px;
        line-height: 15px;
    }
    .wdwd {
        font-size: 25px;
        margin-top: 15%;
        line-height: 35px;
    }
    .item .card {
        width: 280px;
    }
    .one,
    .three {
        width: 80px;
        height: 80px;
    }
    .two {
        width: 80px;
        height: 80px;
        left: 8%;
    }
    .one {
        top: -4%;
    }
    .three {
        right: 5%;
    }
    .web,
    .cyber,
    .human,
    .ml {
        width: 280px;
        height: 60px;
    }
    .web p,
    .cyber p,
    .human p,
    .ml p {
        font-size: 15px;
        padding-top: 5%;
    }
    .box {
        padding: 1%;
    }
    .box img {
        width: 70px;
        height: 70px;
    }
    .box h1 {
        font-size: 12px;
        line-height: 15px;
    }
    .carousel-item p {
        font-size: 9px;
        line-height: 13px;
    }
    .intro {
        margin-top: 0%;
    }
    .contact {
        padding-bottom: 35%;
    }
    .carousel-indicators {
        bottom: -3%;
    }
}

@media(min-width:576px) and (max-width:900px) {
    .web,
    .cyber,
    .human,
    .ml {
        width: 280px;
        height: 60px;
    }
    .web p,
    .cyber p,
    .human p,
    .ml p {
        font-size: 15px;
        padding-top: 5%;
    }
    .intro h1 {
        font-size: 40px;
        line-height: 55px;
    }
    .intro {
        margin-top: 0%;
    }
    .one {
        top: -10%;
    }
    .owl-carousel {
        padding: 5% 1%;
    }
    .item .card {
        width: 220px;
    }
    .card .card-title {
        font-size: 15px;
        line-height: 25px;
    }
    .card .card-text {
        font-size: 10px;
        line-height: 15px;
    }
}

@media (max-width:325px) {
    .item .card {
        width: 250px;
    }
    .box img {
        width: 60px;
        height: 60px;
    }
    .box h1 {
        font-size: 10px;
    }
    .carousel-item p {
        line-height: 11px;
    }
}