.container,
.container-lg,
.container-md,
.container-sm,
.container-xl,
.container-xxl {
    max-width: 1200px !important;
    margin: 0 auto;
    padding: 0px 20px;
    /* overflow: hidden !important; */
    /* background: #F8F9FA; */
}

.graphic-page {
    background: #131212;
    overflow: hidden !important;
        padding-top: 90px;

    /* background: url('images/graphic/'); */
    /* background-size: cover; Ensure full coverage    */
    /* height: 350px; */
    /* width: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative; */
}

.graphic-button a:hover{
    color: black !important;
    background-color: white !important;
}

.graphic-main {
    position: relative;
}

.graphic-main .container {
    background: url('/images/graphic/graphic-main.png') no-repeat;
    /* background-size: cover; */
    /* height: 350px; */
    width: 100%;
    /* background-position: center; */
    background-repeat: no-repeat;
    /* background-size: cover; */
    /* position: relative; */
}

.person-bg {
    position: absolute;
    right: 40px;
    top: -100px;
}

.person-bg img {
    height: 950px;
    width: 1000px;
}

p,
h1,
h2,
a,
span {
    color: white !important;
     font-family: "Poppins", regular;
     /* font-weight: 300; */
}

ul li {
    line-height: 32px;
    font-size: 16px;
    color: white !important;
     font-family: "Poppins", regular;
     font-weight: 300
}

p {
    line-height: 28px;
    font-size: 16px;
    text-align: justify;
    font-family: "Poppins", regular;
    font-weight: 300
}

h1 {
    font-size: 52px !important;
     font-family: "Poppins", regular;
    background: linear-gradient(90deg, #f4e046, #ffffff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    line-height: 65;
    margin: 0 0 20px 0;
    font-weight: bold !important;
}

h2 {
    font-size: 20px !important;
    background: linear-gradient(90deg, #f4e046, #ffffff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    line-height: 65;
    margin: 0 0 20px 0;
    font-weight: bold !important;
}

.graphic-text img {
    width: 510px;
    height: 620px;
    object-fit: contain;
    margin-left: -35px;
}

.creative-design h1 {
    margin-bottom: 25px;
}

.graphic-image .person {
    width: 100%;
    height: 700px;
    object-fit: contain;
}

.graphic-image {
    position: relative;
}

.design-bg {
    position: absolute;
    right: -532px;
    top: -409px;
    z-index: -1;
}

.design-bg img {
    width: 1900px;
    height: 1200px;
}

.graphic-image .person-image {
    position: absolute;
    left: -100px;
}

.graphic-page .graphic-button {
    text-align: center;
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-top: 13px;
    margin-right: -80px;

}

.design-company .container {
    position: relative;
    z-index: 9999999;
}

.graphic-button a {
    border: 1px solid white;
    padding: 3px 53px;
    text-decoration: none;
    border-radius: 20px;
    font-size: 22px;
    position: relative;
    z-index: 99999999999 !important;
    transition: background-color 0.3s ease, color 0.3s ease;
}
.graphic-button a:hover {
    background-color: white !important; /* white background on hover */
    color: black !important;            /* black text on hover */
}
.helping-button a:hover,
.web-development-button a:hover,
.mobile-development-content a:hover,
.app-design-content a:hover,
.e-commerce-content a:hover {
  background-color: #fff;  /* white background */
  color: #000;            /* black text */
  z-index: 99999999999 !important; /* Ensure it stays on top */
}

.graphic-image img.particle {
    position: absolute;
    width: 30px;
    z-index: 1;
    animation: float 6s infinite ease-in-out;
}

.particle-one {
    top: 20%;
    left: 20%;
}

.particle-two {
    top: 20%;
    right: 5%;
}

.particle-three {
    top: 40%;
    left: 10%;
}

.particle-four {
    bottom: 0%;
    right: 20%;
}

.particle-five {
    bottom: 20%;
    left: 5%;
}

.particle-six {
    top: 60%;
    right: 25%;
}

.particle-seven {
    bottom: 40%;
    left: 30%;
}

.particle-eight {
    bottom: 10%;
    right: 10%;
}

.particle-nine {
    top: 10%;
    right: 30%;
}

.particle-ten {
    bottom: 50%;
    left: 50%;
}

.particle-eleven {
    top: 50%;
    right: 50%;
}

@keyframes float {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-15px);
    }
}

.design-company,
.digital-graphics,
.video-production {
    margin-top: 110px;
    position: relative;
    z-index: 999999999;
}

.digital-design-bg {
    position: absolute;
    bottom: -188px;
    right: -88px;
    z-index: -1;
}

.digital-design-bg img {
    width: 1600px;
    height: 1280px;
}

.design-company .content p {
    margin-top: 35px;
}

.design-company .head-image {
    height: 420px;
}

.design-company .image {
    text-align: -webkit-center;
}

.design-company .paragraph {
    margin-top: -30px;
}

.creative-design {
    margin-top: 110px;
}

.creative-design .image {
    /* float: left; */
}

.creative-design .image img {
    width: 352px;
    height: 490px;
}

.digital-graphics .image img {
    width: 100%;
    height: 650px;
    object-fit: contain;
}

.video-list {
    background: url(/images/graphic/video-production.png);
    background-size: cover;
    height: 990px;
    width: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

.video-list ul {
    margin-top: 130px;
}

@media(max-width:991px) {
    .graphic-text img {
        width: 374px;
        height: 630px;
    }

    .graphic-image .person {
        width: 100%;
        height: 410px;
        /* object-fit: contain; */
        margin-top: 100px;
    }

    .graphic-image .person-image {
        position: relative;
        left: 0;
    }
    .person-bg {
    /* position: absolute; */
    right: -110px !important;
    top: 800px !important;
}
}

@media(max-width:767px) {
    .graphic-text {
        text-align: -webkit-center;
    }

    .graphic-image .person {
        margin-top: 15px;
    }

    .design-company .head-image {
        height: 300px;
        width: 300px;
        object-fit: contain;
    }

    .creative-design .image img {
        width: 100%;
        height: 340px;
        object-fit: contain;
    }

    .digital-graphics .image img {
        width: 100%;
        height: 340px;
        object-fit: contain;
    }

    .video-list ul {
        margin-top: 20px;
    }

    .video-list {
        height: 100%;
    }

    .graphic-text img {
        width: 100%;
        height: 100%;
    }

    .graphic-page .graphic-button {
        gap: 20px;
    }
}

@media(max-width:567px){
    .graphic-button a {
    font-size: 13px;
}
h1 {
    font-size: 32px !important;
}
.person-bg {
        right: -110px !important;
        top: 540px !important;
    }
}