@charset "utf-8";
/* CSS Document */

body, h2{font-family: "Unbounded", sans-serif; font-weight:500;}
h1,h2,h3,h4,h5,h6{ font-family: "Unbounded", sans-serif;}
h2{ font-size:36px;}
p,a,li { font-family: "Poppins", sans-serif; font-weight:400; font-size:14px;}
a{ text-decoration:none;}
a:hover{ transition: 1s;}
ul li{ list-style: none; }
button{ background: none; border: none;}
section { padding:70px 0;}
.btn-anime {  background-color: #fff; border: 1px solid #fff; border-radius: 5px; font-family: "Unbounded", sans-serif; color: #000;padding: 12px 25px 14px 25px;font-size: 14px; font-weight: 600; transition: 1s;}
.btn-anime i { color:#000; font-size:18px; }
.btn-anime:hover{background-color: #000; border: 1px solid #fff; color: #fff;}
.btn-anime:hover i{ color: #fff;}
.btn-anime-underline{ color: #fff; font-family: "Unbounded", sans-serif; border-bottom: 2px solid #fff; padding-bottom: 5px; }

.flip-button {display: inline-block; padding: 0;font-size: 16px;color: #fff;border: none;border-radius: 5px;cursor: pointer;perspective: 1000px;position: relative;overflow: hidden;font-family: "Unbounded", sans-serif; color: #000;font-size: 14px; font-weight: 500; padding: 21px 80px;}
.flip-button .inner {position: absolute;top: 0;left: 0;width: 100%;height: 100%;display: flex;justify-content: center;align-items: center;backface-visibility: hidden;transition: transform 0.6s;border-radius: 5px;}
.flip-button .front {background-color: #fff; transform: rotateX(0deg);}
.flip-button .back {background-color: #666;color: #fff;transform: rotateX(180deg);position: absolute;top: 0;left: 0;}
.flip-button:hover .front { transform: rotateX(-180deg);}
.flip-button:hover .back {transform: rotateX(0deg);}

.header-style h2{ font-size: 36px;}
.header-style h5{ font-size: 14px;}
.bg-white-custom .header-style h2 , .bg-white-custom .header-style h5 { color: #000;}
.navbar a{ font-family: "Unbounded", sans-serif; color: #fff;}
.navbar a:hover{ color: rgba(255,255,255,.5);}
/*.fixed-top {padding: 15px 0 15px 0; transition: 1s;}*/
.navbar-expand-lg .navbar-nav .nav-link { padding-left: 20px; padding-right: 20px;}
.myClass {background-color: lightblue;padding: 20px;margin: 20px;border: 1px solid black;}
.navbar button i{ color: #fff; font-size: 25px;}
.navbar-toggler { border: 1px solid #fff;}
.overlay-content .social-media-menu{}
.overlay-content .social-media-menu {border-top: 1px solid rgb(255, 255, 255, .15);margin: 0;padding: 0;margin: 0;padding-top: 25px; margin-top: 25px;}
.overlay-content .social-media-menu li{ display: inline-flex; margin-right: 10px; list-style: none; text-align: center; }
.overlay-content .social-media-menu li a:hover{ color: #fff;}
.active-nav , .active-nav span{color: #fff; border-bottom: 3px solid #fff;}
.navbar-brand img{ width: 20%;}
@media screen and (max-width: 996px) {.active-nav{ border-bottom:0px solid #fff;} .navbar-brand img{ width: 25%;} }

.overlay {height: 100%;width: 0;position: fixed;z-index: 99999;top: 0;left: 0;background-color: rgb(0,0,0);background-color: rgba(0,0,0,1);
overflow-x: hidden;transition: 0.5s;}
.overlay-content {position: relative;top: 5%;width: 100%;text-align: center;margin-top: 0px;}
.overlay-content-top{position: relative;top: 0%;width: 100%;text-align: center;margin-top: 30px;}
.overlay a {padding: 12px;text-decoration: none;font-size: 18px;color: #fff;display: block;transition: 0.3s;}
.overlay-content-top a {font-family: "Unbounded", sans-serif;font-size: 26px;color: rgba(255, 255, 255, 0.75);}
.overlay a:hover, .overlay a:focus {color: #f1f1f1;}
.overlay .closebtn {position: absolute;top: 23px;right: 3px;font-size: 22px;color: #818181; z-index: 9999;}
@media screen and (max-width: 450px) {.overlay a {font-size: 20px}}

.slider-banner{ position: relative;}
.slider-banner .slider-banner { width: 100%;height: 100%;position: absolute;background-color: rgba(0, 0, 0, .5);top: 0; left: 0;}
.slider-banner .content { position:absolute; top:0; left: 0; text-align: center; top: 70%; left: 50%; -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); color: #fff; width:99%;}
.slider-banner .content h1{ font-size: 80px;}
@media screen and (max-width: 1200px) { .slider-banner .content h1{line-height: 80px;} .slider-banner .content {top: 65%;}}
.slider-banner .content p{ font-size: 36px; font-weight: 500; margin-bottom: 120px;}
@media screen and (max-width: 576px) {.slider-banner .content p{font-size: 24px;}}
.content button{ background: none; border: none;}

.bg-black { background-color:#000;}
.bg-black{ color:#fff;}
.about-us-content { margin-left:40px;}
@media (max-width:1200px){.about-us-content { margin-left:0px;} .about-us{ margin-bottom: 25px;}}

.our-services{ background-color: rgb(102, 102, 102); padding: 50px 40px;}
.our-services img{ margin-bottom: 70px;}
.our-services h2{ font-size: 28px; color: #fff;}
.our-services p , .our-services a { color: #fff;}
.our-services a {color: #fff; text-decoration: none; font-weight: 600; font-family: "Unbounded", sans-serif; padding-bottom: 8px; }
.our-services a {background:linear-gradient(to right, rgba(255, 255, 255, 1), rgba(255, 255, 255, 1)
),linear-gradient(to right, rgb(0, 0, 0), rgb(0, 0, 0), rgb(0, 0, 0));background-size: 100% 3px, 0 3px;background-position: 100% 100%, 0 100%;background-repeat: no-repeat;transition: background-size 400ms;}
  .our-services a:hover {background-size: 0 3px, 100% 3px;}
@media (max-width:1200px){.our-services{ margin-bottom: 25px;}}

.gallery-add-pt-50{ padding-top: 1rem;}
.gallery-content h3{ font-size: 24px; margin-top: 15px;}
.gallery-section-btn p{ text-align: end;}
@media (max-width:996px){.gallery-section-btn p{ text-align: center; margin-top: 25px;} .gallery-add-pt-50{ padding-top: 25px;} }
@media (max-width:768px){.gallery-section .header-style{ text-align: center;}}
/* gallery css code */
.gallery-content .extra-padding-for-gallery { padding-top: 50px;}
.hidden {overflow: hidden;display: none;visibility: hidden;}
.btn-gallery img {width: 100%;height: auto; transition: 1s;}
.btn-gallery:hover img { opacity: .65;}

.testimonials .header-style h2 , .testimonials .header-style h5 { color: #000;}
.testimonials .header-style h4 {font-weight: 500;font-size: 70px;padding: 0; margin: 0; color: #fff; -webkit-text-stroke-width: 1px; -webkit-text-stroke-color: black;}
.testimonials .carousel-item img{ width: 70px; margin: 20px 0 15px 0;}

.carousel-control-next, .carousel-control-prev {color: #000; opacity: 1; transition: opacity .15s ease; font-size: 20px;}
.carousel-control-next:hover , .carousel-control-prev:hover { opacity: .95; color: #000;}

footer { padding: 70px 0 30px 0; background-color: #000;}
.contact-us-action h2{ font-size: 36px; color: #fff;}
.contact-us-action p{ text-align: end;}
@media (max-width:996px){.contact-us-action h2 , .contact-us-action p{ text-align: center;}.contact-us-action h2{ margin-bottom: 25px;}}

.center-footer{ padding: 40px 0; margin: 40px 0; border-top: 1px solid rgba(122,122,122,.25); border-bottom: 1px solid rgba(122,122,122,.25);}
.center-footer p{font-family: "Unbounded", sans-serif; font-size: 14px; color: #6C6C6C;}
.center-footer h4 a{ font-weight: 400; color: #fff; font-size: 18px; line-height: 36px; font-family: "Unbounded", sans-serif; transition: 1s;}
.center-footer h4 a:hover{ color:#6C6C6C; }
@media (max-width:996px){.center-footer p{.center-footer p} }
@media (max-width:768px){.center-footer p, .center-footer h4{ text-align: center;}}

.social-media { margin: 0; padding: 0; }
.social-media li {display: inline-block;list-style: none;margin-right: 20px;}
.social-media li a{ color: #fff; font-size: 20px; transition: 1s;;}
.social-media li a:hover{ color: #6C6C6C;}
@media (max-width:768px){.social-media{ text-align: center; margin: 0; padding: 0;}}

.quick-links{ padding: 50px 0 0 0;}
.quick-links li{ display: inline-flex; margin:0 15px;}
.quick-links li a{ color: #6C6C6C; font-family: "Unbounded", sans-serif; font-size: 14px; transition: 1s; }
.quick-links li a:hover{ color: #fff;}
@media (max-width:768px){.quick-links li{ margin:0 15px 12px 15px;} .social-media li { margin: 0 10px;} }

.copy-right p{ color: #6C6C6C; font-family: "Unbounded", sans-serif; padding-bottom: 0;}

.inner-banner-style{ background-image: url(../img/banner/about-us.jpg); background-size: cover; padding: 120px 0; color:#fff;}
@media (max-width:768px){.inner-banner-style{ padding: 160px 0 80px 0; }}
.contact-page-feed .our-services { min-height: 325px; transition: 1s; background: #000;}
.contact-page-feed .our-services:hover{  background-color: rgb(102, 102, 102);}
.contact-page-feed p{font-size: 24px; line-height: 25px; font-weight: 500;}
.contact-page-feed h2{font-size: 14px;} 
.contact-page-icon i{ font-size: 50px; color: #fff;  }
.contact-page-icon {margin-bottom: 60px;}

.contact-page-feed .our-services a{ background: none; font-size: 18px; line-height: 28px;}

/*@media (min-width:996px){
html,html *,body,body * {  cursor: none;}
.cursor-dot,.cursor-dot-outline {pointer-events: none;position: absolute;top: 50%;left: 50%;border-radius: 50%;opacity: 0;transform: translate(-50%, -50%);transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;z-index: 9999999;}
.cursor-dot {width: 8px;height: 8px; background-color: rgba(255, 0, 0,1);}
.cursor-dot-outline {width: 40px;height: 40px;background-color: rgba(255, 0, 0, 0.5);}}
.mfp-bg{opacity: .9;}
.mfp-image-holder .mfp-close {color: #FFF;right: 0;text-align: right;padding-right: 6px;width: 100%;font-size: 28px;}*/

.testimonials-padding{ padding: 0 250px;}
@media (max-width:996px){ .testimonials-padding{ padding: 0;}}

.our-services h2 span{ width: inherit;display: flex;}
@media (max-width:576px){.our-services h2 span{ width: inherit;display: contents;} .carousel-item h6{ padding: 0 15px; }}

.why-us-style i { font-size: 50px;}
.why-us-style h3{ margin-top: 45px;}
.why-us-style p{ font-size: calc(100% + 2px);}
.why-us-style{ border-right: 2px solid #fff; padding: 25px;}
@media (max-width:768px){ .why-us-style{ border-right: 0px solid #fff; text-align: center;}}

.banner-img img{ width:100px; }
@media screen and (max-width: 576px) {.banner-img img{ width:75px; }}

.float{position:fixed;width:60px;height:60px;bottom:40px;right:40px;background-color:#25d366;color:#FFF;border-radius:50px;text-align:center;font-size:30px;box-shadow: 2px 2px 3px rgba(0,0,0,.25);z-index:100;align-content: center;}
.my-float{margin-top:16px;}
/* ===== NAVBAR ALIGNMENT FIX ===== */
/* ===== ABSOLUTE NAVBAR SHIFT FIX ===== */
/* ===== FINAL NAVBAR NO-SHIFT FIX ===== */

.navbar-nav {
    display: flex;
    align-items: center;
}

.navbar-nav .nav-item {
    flex: 0 0 170px;     /* 🔒 LOCK WIDTH */
    max-width: 170px;
    text-align: center;
}

.navbar-nav .nav-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: 10px 0;
    font-size: 14px;
    font-weight: 400;
    line-height: 1;
    white-space: nowrap;      /* ❗ prevents text reflow */
    border-bottom: 2px solid transparent;
    transition: color 0.3s ease, border-color 0.3s ease;
}

/* Active item – NO size change */
.navbar-nav .nav-link.active-nav {
    font-weight: 600;
    border-bottom-color: #ffffff;
}
/* ===== GRAPHICS WORKS SECTION ===== */

.graphics-works {
    padding: 60px 0;
    background: #0f0f0f;
}

.graphics-works .section-title {
    text-align: center;
    color: #fff;
    margin-bottom: 40px;
    font-size: 28px;
    font-weight: 600;
}

.works-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 25px;
}

.work-card {
    background: #1a1a1a;
    border-radius: 10px;
    overflow: hidden;
    transition: transform 0.3s ease;
    text-align: center;
}

.work-card img {
    width: 100%;
    height: 220px;
    object-fit: cover;
}

.work-card h4 {
    color: #fff;
    padding: 15px;
    font-size: 16px;
}

.work-card:hover {
    transform: translateY(-6px);
}
body {
    background-color: #0f0f0f;
}
.graphics-works {
    background-color: #0f0f0f !important;
    width: 100%;
}
.graphics-works .container {
    background: transparent;
}
<body>

<nav>...</nav>

<section class="graphics-works">
   ...
</section>

</body>