:root {
   --pc: #13264C;
   --sc: #3e8006;
   --muted: rgb(221 221 221);
   --white: #ffffff;
   --black: #000000;
   scroll-behavior: smooth;
}

body a {
   text-decoration: none;
   color: var(--black);
   transition: all .3s ease;
}

p {
   font-size: 16px;
   line-height: 1.8;
   color: rgb(0 0 0 / 59%);
}


/*site-btn-start*/

[class*="flex-btn"] {
   cursor: pointer;
   font-size: 16px;
   font-weight: 500;
   transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
   background: transparent;
   z-index: 0;
}

[class*="flex-btn"]:before {
   display: block;
   position: absolute;
   left: 0px;
   bottom: 0px;
   height: 0px;
   width: 100%;
   z-index: -1;
   content: '';
   transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
}

[class*="flex-btn"]:hover:before {
   top: 0%;
   bottom: auto;
   height: 100%;
}

.pc-flex-btn {
   color: var(--white);
   border: 2px solid var(--white);
}

.pc-flex-btn:hover {
   color: var(--pc);
}

.pc-flex-btn:before {
   background: var(--white);
}

.sc-flex-btn {
   color: var(--pc);
   border: 2px solid var(--pc);
}

.sc-flex-btn:before {
   background: var(--pc);
}

.sc-flex-btn:hover {
   color: var(--white);
}


/*header-start */

header .openMenu,
header .menu nav ul li.closeMenu {
   cursor: pointer;
}

header .menu {
   transition: all .9s cubic-bezier(.23, 1, .32, 1);
   background: var(--pc);
}

header .menu nav ul li a {
   color: var(--muted);
   font-size: 26px;
}

header .menu nav ul li a:hover {
   color: var(--white);
   letter-spacing: 2px;
}

.scrolled {
   animation: bounceInDown 1s;
   animation-duration: 1s;
   animation-fill-mode: both;
   background: var(--white);
   height: fit-content;
   padding-block: 20px !important;
}

@keyframes bounceInDown {
   0% {
      opacity: 0;
      transform: translateY(-2000px);
   }

   60% {
      opacity: 1;
      transform: translateY(0px);
   }

   80% {
      transform: translateY(-10px);
   }

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

/*homepage-hero-start */

.hero-video:after {
   content: "";
   position: absolute;
   height: 100%;
   width: 100%;
   background: rgba(0, 0, 0, 0.7);
   inset: 0;
}

.hero-video .hero-content h1 {
   font-size: 100px;
   text-align: center;
   line-height: 100px;
   color: var(--white);
}

.hero-video :is(.flex-hero-item, .flex-hero-item li) {
   color: var(--muted);
   font-size: 18px;
}


/*-------project-card----start----*/

.working-card {
   position: relative;
}

.working-card:after {
   content: '';
   position: absolute;
   inset: 0;
   background: rgba(0, 0, 0, 0) linear-gradient(to bottom, transparent 0px, rgba(0, 0, 0, 0.65) 100%) repeat scroll 0 0;
   height: 100%;
   width: 100%;
}

.working-card .flex-col-project-detl .project-ttl {
   font-size: 40px;
   line-height: 1;
}

.working-card :is(a, div) {
   color: var(--white);
}

.project-text {
   margin-block: 15px 35px;
}

.swiper-button-next,
.swiper-button-prev {
   color: var(--white);
}

.working-card:before {
   position: absolute;
   inset: 0;
   height: 100%;
   width: 100%;
   content: '';
   transition: all .2s ease-in-out .0s;
}

.red-tint:hover:before {
   transition: all .2s ease-in-out .0s;
   background: rgba(232, 34, 25, .7)
}

.orange-tint:hover:before {
   transition: all .2s ease-in-out .0s;
   background: #ff9500;
   background: rgba(255, 149, 0, .7)
}

.blue-tint:hover:before {
   transition: all .2s ease-in-out .0s;
   background: rgba(0, 82, 218, 0.7) none repeat scroll 0 0
}

.green-tint:hover:before {
   transition: all .2s ease-in-out .0s;
   background: rgba(196, 208, 0, 0.7) none repeat scroll 0 0
}

.turquoise-tint:hover:before {
   transition: all .2s ease-in-out .0s;
   background: rgba(26, 164, 200, 0.7) none repeat scroll 0 0
}

.yellowOrange-tint:hover:before {
   transition: all .2s ease-in-out .0s;
   background: rgba(255, 149, 0, 0.7) none repeat scroll 0 0
}


/*---------client-container---start------*/

.client-container {
   background: var(--black);
   padding: 50px 30px;
}

.client-container :is(h2, p) {
   color: var(--white);
}

.client-logo-wrap {
   background: var(--black);
   padding: 50px;
}

.flex-client-logo {
   border: 2px solid #7b7c7d;
   border-radius: 4px;
   transition: all .4s ease;
}

.flex-client-logo:hover {
   transition: all .4s ease;
   border: 2px solid var(--white);
}

.flex-client-logo:hover img {
   transition: all .4s ease;
   transform: scale(1.1);
   filter: brightness(100%);
}

.flex-client-logo img {
   filter: brightness(0) invert(1);
   height: 60px;
    object-fit: contain;
}

.swiper-pagination-bullet-active {
   background: var(--pc);
}


/*---for-common-page-----*/

.single-page-hero :is(p, h1) {
   color: var(--white);
}

form :is(input, select, textarea) {
   border: 1px solid var(--muted);
   font-size: 16px;
   border-radius: 4px;
}

form :is(input, select, textarea):focus {
   outline: 1px solid var(--pc);
}

form textarea {
   height: 100px;
}

.bg-light {
   background: #3e800612;
   padding-block: 50px;
}

.bg-primary {
   background: var(--pc);
   padding-block: 50px;
}

.bg-primary :is(h2, p, div, span, a){
   color: var(--white);
}

.gallery-imgs img {
   border-radius: 10px;
}

/*-----for-contact-page---*/

.contact-info-con {
   background: #f2f2f2;
   border: 1px solid var(--muted);
   border-radius: 10px;
}

.grid-info-con .flex-info-icon {
   background: var(--pc);
   border-radius: 50%;
}


/*-----for-about-page---*/

.dynamic-tab-content button {
   background: rgb(221 221 221 / 18%);
   border: 1px solid #eeee;
   font-size: 16px;
}

.tab-card {
   padding: 30px;
   border-radius: 10px;
}

.tab-con-a {
   background: #ff00000a;
   border: 1px solid #ff0000;
}

.tab-con-b {
   background: #00d7ff0a;
   border: 1px solid #00d7ff;
}

.tab-con-c {
   background: #cf4ab114;
   border: 1px solid #cf4ab16b;
}

.tab-con-d {
   background: #4300ff12;
   border: 1px solid #4300ff47;
}

.project-list li {
   line-height: 1.5;
   color: rgb(0 0 0 / 59%);
}

.project-list li:before {
   background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' fill='%2313264C' viewBox='0 0 448 512'%3E%3Cpath d='M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7l233.4-233.3c12.5-12.5 32.8-12.5 45.3 0z'/%3E%3C/svg%3E") no-repeat 50%;
   content: "";
   height: 15px;
   left: 0;
   position: absolute;
   top: 5px;
   width: 15px
}


/*---------footer-start-------*/

footer {
   background: var(--pc);
   padding-block: 50px;
}

footer :is(p, div, span, a):not(.foot-info-col :is(p, a)) {
   transition: all .3s;
   color: rgb(255 255 255 / 80%);
}

.flex-col-foot-menu .foot-menu-ttl {
   font-weight: 600;
   font-size: 20px;
   color: var(--white);
}

.flex-col-foot-menu .menu-ttl span.flex-line-a {
   height: 3px;
   background: var(--white);
   width: 30px;
   margin-top: 8px;
}

.flex-col-foot-menu .flex-col-foot-item li a {
   font-weight: 500;
}

footer a:hover {
   transition: all .3s;
   padding-left: 5px;
   letter-spacing: 1px;
}

footer .foot-cta a {
   font-size: 40px;
   color: var(--white);
}

.foot-info-col {
   background: var(--white);
   padding: 20px;
}

.foot-info-col .h5 {
   color: #333333;
}

:is(.copyright, .foot-info-col) a {
   color: var(--pc);
   font-weight: 500;
}

.social ul li a {
   border: 1px solid var(--black);
   border-radius: 50%;
   transition: all 0.3s ease-out 0s;
}

.social ul li a:hover {
   transform: rotate(360deg);
   background: var(--pc);
   fill: var(--white);
   border-color: var(--white);
}

.fs-20{
   font-size: 1.25rem!important;
}

.large-heading{
   font-size: clamp(3rem, 6vw, 6rem);
}

.heading-large{
   font-size: clamp(2.5rem, 4vw, 3.75rem);
   line-height: 70px;
}

.page-hero-container{
   border-bottom: 1px solid #ccc;
   padding-bottom: 10px;
}

.flex-col-cs-card{
   padding: 30px;
   gap: 15px;
   background: #9e9e9e17;
   border: 1px solid #2a2a2a4f;
   border-radius: 10px;
}

.text-white{
   color: var(--white);
}

.glry-img-wrap{
   position: relative;
}

.glry-img-wrap img{
    filter: grayscale(100%);
    transition: all .5s ease;
}

.glry-img-wrap .Gallery-ttl{
   position: absolute;
   left: 30px;
   bottom: 30px;
   background: var(--white);
   color: var(--black);
   font-size: 18px;
   font-weight: 500;
   padding: 7px 25px;
}