/* @import url("../fonts/GothamPro/GothamPro.css");
@import url("../fonts/Poppins/Poppins.css"); */
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100..900;1,100..900&family=Space+Grotesk:wght@300..700&display=swap');
:root {
  --primary:#e73c42;
  --red:#FF2E44;
  --headerborder:#ffe6e6;
  --secondaryColor:#171a25;
  --subsecondaryColor:#212635;
  --textColor:#14212B;
  --subtextColor:#323131;
  --descriptionColor:#5A5A5A;
  --lightBg:#F6F6F6;
  --shades01:#FFFFFF;
  --shades02:#000000;
  --shades03:#ECECEC;
  --shades04:#646464;
  --shades05:#FAFAF8;
  --shades06:#B4B4B4;
  --shades07:#D9D9D9;
  --shades08:#F5F5F5;
  --shades09:#DDD;
  --shades10:#EBEBEB;
  --shades11:#DFDFDF;
  --shades12:#FFF4F4;
  --shades13:#f3f3f3;
  --lightred:#ffd8da;
  --darkred:#a3383e;
  --shades01-rgb:255, 255, 255;
  --shades02-rgb:0, 0, 0;
  --shades03-rgb:236, 236, 236;
  --shades04-rgb:100, 100, 100;
  --shades05-rgb:250, 250, 248;
  --shades06-rgb:180, 180, 180;
  --shades07-rgb:217, 217, 217;
  scroll-behavior:unset;
}

/* ********|| INITIALIZATION START ||******** */
body, html { width: 100%; line-height:18px; margin:0 auto !important;padding:0 !important;/*font-family: 'GothamPro', sans-serif;*/ font-family: "Roboto", sans-serif; font-weight: 400; -webkit-font-smoothing: subpixel-antialiased;text-shadow: 1px 1px 1px rgba(0,0,0,0.004);font-size: 14px; line-height: 1.2; color: var(--shades02); background:var(--shades01);position: relative; z-index: 0; scroll-behavior: smooth;}
*{transition: all 0s ease;}
*:focus{outline: none !important;outline-offset: none !important;outline-offset: 0 !important;}
*,::after,::before{box-sizing: border-box;}
a {color:var(--green01); text-decoration: none;transition: all 0.3s ease;}
a:hover{text-decoration: none;-webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; -ms-transition: all 0.3s ease;transition: all 0.3s ease;}
a:focus{ outline: none;text-decoration: none;}
button{transition: all 0.3s ease;}
p { margin: 0 0 10px; }
hr{margin-top: 20px; margin-bottom: 20px; border: 0; border-top: 1px solid rgba(var(--shades04-rgb), 0.2);}
section{position:relative;}
input:focus, label:focus{outline: none !important;outline-offset: none !important;outline-offset: 0 !important;}
.scrollbar::-webkit-scrollbar { width: 0.5rem; height: 0.5rem; border-radius: 100vh; transition:all 0.3s ease; }
.scrollbar::-webkit-scrollbar-track { border-radius: 0; background-color: #d6c8dd; border-radius: 100vh; transition:all 0.3s ease; }
.scrollbar::-webkit-scrollbar-thumb { background-color: rgba(var(--purple-rgb), 1); border-radius: 100vh; transition:all 0.3s ease; }
/* ********|| INITIALIZATION END ||******** */

/* ********|| PSEUDO ELEMENTS START ||******** */
::selection{ background-color:var(--primary); color:var(--shades01)}
::-moz-selection{ background-color:var(--primary); color:var(--shades01)}
::-webkit-selection{ background-color:var(--primary); color:var(--shades01)}
:-webkit-focus { outline: none !important; }
:-moz-focus { outline: none !important; }
:focus { outline: none !important; }
select:-webkit-focusring { color: var(--primary) !important;text-shadow: 0 0 0 var(--shades01);}
select:-moz-focusring {color: var(--primary) !important;text-shadow: 0 0 0 var(--shades01);}
select:focusring {color: var(--primary) !important; text-shadow: 0 0 0 var(--shades01);}
::input-placeholder{ color:var(--shades02) !important;}
::-moz-input-placeholder{ color:var(--shades02) !important;}
::-webkit-input-placeholder{ color:var(--shades02) !important;}
/* ********|| PSEUDO ELEMENTS END ||******** */

/* ********|| BOOTSTRAP FIX START ||******** */
@media (min-width: 576px){
	.container{max-width: none;}
	.modal-dialog{max-width: 700px;}
	.modal-sm{max-width: 400px;}
}
@media (min-width: 768px){
	.container{max-width: 740px; margin: 0 auto;}
 
}
@media (min-width: 992px){
	.container{max-width: 960px; margin: 0 auto;}
}
@media (min-width: 1200px){
	.container{max-width: 1170px; margin: 0 auto;}
}
@media (min-width: 1400px){
	.container{max-width: 1280px; margin: 0 auto;}
}
@media (min-width: 1600px){
	.container{max-width: 1400px; margin: 0 auto;}
}
@media (min-width: 1900px){
	.container{max-width: 1600px; margin: 0 auto;}
}
/* ********|| BOOTSTRAP FIX END ||******** */


/* ************|| COMMON START  ||************ */
.intro-page{padding-top: 190px;}
.btn-wrap{ margin-top: 40px;}
.btn-wrap a{width: 60px; height: 60px; font-size: 30px; border-radius: 50px; background-color: var(--primary); color: var(--shades01); display: flex; justify-content: center; align-items: center; margin: 0 auto; transition: all 0.3s ease-in-out;}
.btn-wrap a:hover{background-color: var(--darkred); scale: 1.1;}


.main-btn { color: var(--primary); border: 2px solid var(--primary); position: relative; display: inline-block; font-size: 18px; text-decoration: none; padding: 16px 40px; text-transform: uppercase; overflow: hidden; border-radius: 8px; transition: all 0.3s ease; font-weight: 500; z-index: 1;  background-color: transparent; cursor: pointer;}

.main-btn:hover {color: var(--shades01); }
.main-btn:hover::before {height: 450%;}

/* ************|| COMMON END  ||************ */

/* ********|| CHECKBOX START ||******** */
.checkbox{position: relative;padding: 4px 0 4px 30px;display: inline-block;}
.checkbox .checkbox-input{position: absolute;z-index: 1;top: 0;left: 0;width: 100%;height: 100%;opacity: 0; cursor: pointer;}
.checkbox .checkbox-label{position: relative;margin: 0;line-height: 16px;font-size: 14px; color: var(--shades02);}
.checkbox .checkbox-label:before{content:'';position:absolute;width: 20px;height: 20px;background-color: transparent;border: 1px solid var(--shades03);top: -1px;left: -30px; border-radius: 4px;transition: all 0.3s ease;}
.checkbox .checkbox-label:after{content: "\f00c";position: absolute;font-family: "Font Awesome 6 Pro";width: 20px;height: 20px;top:-1px;left: -30px;font-weight: 500;font-size: 14px; line-height: 1;color: var(--shades01);display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: all 0.3s ease;}
.checkbox .checkbox-input:checked ~ .checkbox-label:after{opacity: 1; visibility: visible;}
.checkbox .checkbox-input:checked ~ .checkbox-label:before{background-color: var(--red);border: 1px solid var(--red);}
/* ********|| CHECKBOX END ||******** */
/* ********|| RADIO START ||******** */
.radio{position: relative;padding: 4px 0 4px 30px;display: inline-block;}
.radio .radio-input{position: absolute;z-index: 1;top: 0;left: 0;width: 100%;height: 100%;opacity: 0; cursor: pointer;}
.radio .radio-label{position: relative;margin: 0;line-height: 16px;font-size: 14px; color: var(--shades02);}
.radio .radio-label:before{content:'';position:absolute;width: 20px;height: 20px;background-color: transparent;border: 1px solid var(--shades03);top: -1px;left: -30px; border-radius: 50%;transition: all 0.3s ease;}
.radio .radio-label:after{content: '';position: absolute;width: 11px;height: 11px;top: 4px;left: -25px;font-weight: 500;font-size: 14px;line-height: 1;background-color: var(--red);display: flex;align-items: center;justify-content: center;border-radius: 50%;opacity: 0;visibility: hidden;transition: all 0.3s ease;}
.radio .radio-input:checked ~ .radio-label:after{opacity: 1; visibility: visible;}
/* ********|| RADIO END ||******** */

/* ********|| SWITCH START ||******** */
.switch{position: relative;padding:0;display: block;}
.switch .switch-input{position: absolute;z-index: 1;top: 0;left: 0;width: 100%;height: 100%;opacity: 0; cursor: pointer;}
.switch .switch-labels{position: relative;margin: 0;line-height: 16px;font-size: 14px;color: var(--shades02);height: 40px;border-radius: 4px;background-color: var(--shades01);display: flex;align-items: center; z-index: 0;}
.switch .switch-labels span{display: flex;justify-content: center;width: 100%;padding: 0 10px;font-size: 14px;font-weight: 500;color:var(--shades02);transition: all 0.3s ease;}
.switch .switch-labels span+span{color:var(--shades01)}
.switch .switch-labels:after{content: "";position: absolute;transition: all 0.3s ease;top: 4px;left: 4px;width: calc(50% - 8px);height: calc(100% - 8px);background-color: var(--red);border-radius: 4px;z-index: -1;transform: translateX(calc(100% + 4px));}
.switch .switch-input:checked ~ .switch-labels:after{transform: translateX(calc(0% + 4px));}
.switch .switch-input:checked ~ .switch-labels span{color:var(--shades01)}
.switch .switch-input:checked ~ .switch-labels span+span{color:var(--shades02)}
/* ********|| SWITCH END ||******** */

/* ********|| MODAL START ||******** */
.modal .btn-close{background-image: none;padding: 0;width: 32px;height: 32px;display: flex;align-items: center;justify-content: center;border-radius: 50%;font-size: 20px;opacity: 1;position: absolute;top: -16px;right: -16px;background-color: var(--shades01);box-shadow: 0 2px 5px rgba(0,0,0,0.2);}
.modal .modal-content{border: none;box-shadow: 0 2px 20px rgba(var(--shades02-rgb), 0.5);border-radius: 8px;}
/* ********|| MODAL END ||******** */

/* ********|| HEADER START ||******** */
header .upper-header{background-color: var(--shades01); height: 50px; display: flex; justify-content: center; align-items: center; font-size: 15px; font-weight: 400;}
.upper-header .container{width: 100%;}
header .upper-header .upper-header-wrapper{display: flex; justify-content: space-between;}
header .upper-header .upper-header-wrapper .header-info-left{display: flex; gap: 30px;}
header .upper-header .upper-header-wrapper .info-left-list a{display: flex; gap: 8px; align-items: center; padding-right: 20px; border-right: 1px solid var(--headerborder); color: var(--descriptionColor);}
header .upper-header .upper-header-wrapper .info-left-list .headericon{background-color: var(--darkred); color: var(--shades01); width: 30px; height: 30px; border-radius: 50px; display: flex; justify-content: center; align-items: center; flex-shrink: 0; font-size: 14px;}
header .upper-header .upper-header-wrapper .header-info-left .info-left-list:last-child a{border-right: 0;}
header .upper-header .upper-header-wrapper .header-info-right{display: flex; gap: 30px; align-items: center;}
header .upper-header .upper-header-wrapper .header-info-right .social-icons span{padding-right: 16px;}
header .upper-header .upper-header-wrapper .header-info-right .social-icons a{color: var(--descriptionColor);}
header .main-header{height: 100px; display: flex; justify-content: center; align-items: center; border-bottom: 1px solid var(--shades10); position: fixed; top: 50px; left: 0; z-index: 999; width: 100%; transition: 0.5s all ease; background-color: var(--shades01);}
header .main-header .navigations .navigation-wrap .navigation-menu > li > a { color: var(--textColor); } 
/* header .main-header .header-btn { color: var(--primary); border: 2px solid var(--primary);} */
header .main-header.primary-header{background-color: transparent;}
header .main-header.primary-header .navigations .navigation-wrap .navigation-menu > li > a    {
  color: var(--shades01); 
} 
header .main-header.primary-header.scrolled .navigations .navigation-wrap .navigation-menu > li > a    {color: var(--textColor); } 
header .main-header.scrolled .navigations .navigation-wrap .navigation-menu > li > a { color: var(--textColor); } 

 
header .brand { height: 80px; padding: 2px 0; max-width: 160px;  }
header .brand img{ width: 100%; height: 100%; object-fit: contain;}
header .brand-2 { height: 80px; padding: 2px 0; max-width: 160px; display:block; }
header .brand-2 img{ width: 100%; height: 100%; object-fit: contain;}


header .main-header .brand { display: none;} 
header .main-header.primary-header .brand { display: block;}  
header .main-header.primary-header .brand-2 { display: none;}

header .navigations { display: flex; gap: 50px; align-items: center; width: 100%;}
header .main-header > .container { display: flex; align-items: center; justify-content: space-between;  position: relative; width: 100%;}
header .navigations .navigation-wrap { width: 100%; display: flex; justify-content: end;}
header .navigations .navigation-wrap .navigation-menu { display: flex; justify-content: flex-end; padding-left: 0; list-style: none; gap: 30px; margin: 0; position: relative;}
header .navigations .navigation-wrap .navigation-menu > li > a { color: var(--shades01); font-weight: 500; font-size: 16px; text-transform: uppercase; display: block; height: 80px; line-height: 80px; padding: 0; position: relative;}
header .navigations .navigation-wrap .navigation-menu > li > a:before{content: ''; position: absolute; bottom: 40px;background-color: var(--primary); height: 3px; opacity: 0; transition: 0.5s all ease; transform: scaleX(0);  transform-origin: center;}
header .navigations .navigation-wrap .navigation-menu > li > a:hover:before{bottom: 14px; opacity: 1; width: 100%;  transform: scaleX(1);}
header .navigations .navigation-wrap .navigation-menu .header-dropdown{ display: flex; align-items: center; font-size: 18px; font-weight: 500; text-transform: capitalize; padding: 0px 25px;transition: 0.3s all ease; overflow: hidden;}
header .navigations .navigation-wrap .navigation-menu .header-dropdown .menu-link{position: relative;}
header .navigations .navigation-wrap .navigation-menu .header-dropdown .menu-link:after { content: "\f107"; font-family: "Font Awesome 6 Pro"; transition: 300ms linear; position: absolute; right: -22px; top: 50%; transform: translateY(-50%); color: var(--shades01);}

header .dropdown-menu-wrapper { position: absolute; top: 100%; left: 0; padding: 26px 14px ; background: var(--shades01); border-radius: 12px; border: 1px solid #cfcfcf;visibility: hidden; opacity: 0; transform: translateY(30%);  transition: 0.5s all ease; z-index: 11; width: 100%;}
.dropdown-menu-wrapper > ul { display: flex; flex-wrap: wrap;}
.dropdown-menu-wrapper > ul > li { color: #111; margin: 20px 0 0; padding: 0 50px 0 21px; display: block; box-sizing: border-box; max-width: 50%;}
.dropdown-menu-wrapper > ul > li > a { position: relative; display: inline-block; font-weight: 400; font-size: 20px; line-height: 28px; margin: 0 0 12px; padding: 0 24px 0 0; box-sizing: border-box; height: fit-content; color: #111111; transition: color 300ms linear; text-transform: capitalize;}
header .navigation-wrap .navigation-menu .header-dropdown:hover .dropdown-menu-wrapper{opacity: 1;  transform: translateY(0px); visibility: visible;}

header .main-header.scrolled { height: 80px; background-color: var(--shades01); color: var(--secondaryColor); top: 0; box-shadow: rgba(0, 0, 0, 0.1) 0 0px 10px;}
header .main-header.scrolled .navigation-menu .menu-link { color: var(--secondaryColor);}
header .main-header.scrolled .header-btn{color: var(--primary);border: 2px solid var(--primary);}
header .main-header.scrolled .main-btn::before{ background: var(--primary);}
header .main-header.scrolled .main-btn:hover{color: var(--shades01);}
header .main-header.scrolled .brand-2{display: block;}
header .main-header.scrolled .brand{display: none;}
header .main-header.scrolled .navigation-menu .header-dropdown .menu-link:after{color: var(--secondaryColor);}

header .get-quote{white-space: nowrap;}
.header-btn{ position: relative; display: block; color: var(--shades01); font-size: 14px; text-decoration: none; border: 2px solid var(--shades01); padding: 14px 40px; text-transform: uppercase; overflow: hidden; border-radius: 8px; transition: 1s all ease; font-weight: 500;}
.main-btn::before{ background: var(--shades01); content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: -1;  width: 100%; height: 0%; transform: translate(-50%,-50%) rotate(45deg); transition: all 0.6s ease;}
.main-btn:hover::before{ height: 450%;}
.main-btn:hover{color: var(--secondaryColor);}
header .header-btn-black .header-btn{color: var(--primary); border: 2px solid var(--primary);}
header .header-btn-black .main-btn::before{background: var(--primary);}
header .header-btn-black .main-btn:hover{color: var(--shades01);}

header .upper-header-red{background-color: #ef5e5e!important;}
header .upper-header-red .upper-header-wrapper .info-left-list a{color: var(--shades01);}
header .upper-header-red .upper-header-wrapper .social-icons a{color: var(--shades01)!important;}
/* ********|| HEADER END ||******** */

/* ********|| BANNER START ||******** */
.swiper { width: 100%; height: 100%;}
.swiper img{width: 100%; height: 100%;}
.banner{width: 100%; /*height: calc(100vh - 120px);*/ height: 100vh; position: relative; display: flex; justify-content: center; align-items: center;}
.banner video{z-index: -1;
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    height: 100%;
    object-fit: cover;}
.banner:before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    z-index: 0;
    bottom: 0;
     background-image: linear-gradient(#000000e0, #000000cf);
}
.banner-bottom{position: absolute; width: 100%; height: 100%; overflow: hidden;}
.banner-bottom::after{content: ''; position: absolute; top: 95%; left: -6px; width: 52%; height: 90px; background-color: var(--shades01); transform: rotate(4deg);}
.banner-bottom::before{content: '';
    position: absolute;
    top: 95%;
    right: -6px   ;
    width: 52%;
    height: 90px;
    background-color: var(--shades01);
    transform: rotate(-4deg)}

.banner .banner-slider{width: 100%; height: 100%;}
.banner .swiper .swiper-slide img{width: 100%; height:100%; object-fit: cover;}
.banner .swiper .swiper-slide .banner-items{position: relative; display: flex; justify-content: center; align-items: center; width: 100%; height: 100%;}
.banner .swiper .swiper-slide .banner-items .banner-bg-img{position: absolute; top: 0; left: 0; z-index: -1;}
.banner .swiper .swiper-slide .banner-items .banner-bg-img:after{content: ''; /*background-color: #e73c42f2;*/ background-image: linear-gradient(#000000cf, #e73c42b5); width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 0; /*mix-blend-mode: multiply;*/}
.banner .swiper .swiper-slide .banner-items .banner-bg-img img{width: 100%; height: 100%; object-fit: cover;}
.banner-content{position: relative; color: var(--shades01); text-align: center; display: flex; flex-direction: column; align-items: center; max-width: 1000px;}
.banner-content .title{position: relative; font-size: 20px; font-weight: 600; color: var(--shades01); width: max-content; margin-bottom: 25px; text-transform: uppercase;}
.banner-content .title:before{content: ''; position: absolute; top: 50%; transform: translateY(-50%); left: -60px; background-color: var(--primary); width: 40px; height: 3px;}
.banner-content .title:after{content: ''; position: absolute; top: 50%; transform: translateY(-50%); right: -60px; background-color: var(--primary); width: 40px; height: 3px;}
.banner-content .heading{ font-size: 96px; font-weight: 700; margin-bottom: 30px; text-transform: capitalize; line-height: 1;}
.banner-content .subheading{ font-size: 90px; font-weight: 700; margin-bottom: 50px; text-transform: capitalize; color: transparent; -webkit-text-stroke: 1.5px var(--shades01); font-family: Arial, sans-serif; }
.banner-content .description{ font-size: 30px; font-weight: 400;}
.banner .banner-down-arrow{position: absolute; transform: translateX(-50%); left: 50%; bottom: 90px; font-size: 40px; color: var(--shades01); background-color: transparent; border: 0; animation: downarrow 1.2s ease-in-out infinite; cursor: pointer;}

@keyframes downarrow{
  0%, 100% {
    transform: translate(-50%, 0);
  }
   50% {
    transform: translate(-50%, 10px);
  }
}
.swiper-button-next, .swiper-button-prev{width: 60px!important; height: 60px!important; border-radius: 100px; display: flex; justify-content: center; align-items: center; flex-shrink: 0;}
.swiper-button-next, .swiper-button-prev{color: var(--shades02)!important;}
.swiper-button-next:after, .swiper-button-prev:after{ font-size: 22px!important;}
.swiper-button-next:after{content: '\f178'!important; font-family: "font awesome 6 pro"!important;}
.swiper-button-prev:after{content: '\f177'!important; font-family: "font awesome 6 pro"!important;}

.type-write-wrap { border-right: 5px solid #ffffff; display: inline-block; white-space: nowrap; height: 110px; overflow: hidden;}

.banner-btn .header-btn{font-size: 20px; background-color: var(--shades01); color: var(--secondaryColor); }
.banner-btn .main-btn:hover{background-color: transparent; color: var(--shades01); border: 2px solid var(--shades01);}
.banner-btn .main-btn:hover::before{background-color: transparent;}

/* ********|| BANNER END ||******** */

/* ********|| ABOUT US START ||******** */
.about-us-sec {margin: 130px 0;}
.about-us-sec .about-us-wrapper{display: flex; gap: 80px; position: relative; padding-bottom: 30px;}
.about-us-wrapper::before { content: ''; position: absolute; right: -3%; top: -65px; width: 350px; height: 350px; background-image: url(../images/round-o-01.svg); background-position: center; background-size: contain; z-index: -1; -webkit-animation: spin1 6s linear infinite; animation: spin1 6s linear infinite;}
@-webkit-keyframes spin1 {
    0% {
        -webkit-transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
    }
}
.about-us-sec .about-us-wrapper .about-text-sec{width: 40%;}
.about-us-sec .about-us-wrapper .about-text-sec .about-title{font-size: 18px; color: var(--primary); position: relative; width: max-content; margin-bottom: 20px; font-weight: 500;}
.about-us-sec .about-us-wrapper .about-text-sec .about-title:after{content: ''; width: 40px; height: 2px; background-color: var(--primary); position: absolute; right: -54px; top: 50%; transform: translateY(-50%);}
.about-us-sec .about-us-wrapper .about-text-sec .about-heading{font-size: 40px; color: var(--textColor); margin-bottom: 18px; font-weight: 500;}
.about-us-sec .about-us-wrapper .about-text-sec .about-subtitle{font-size: 22px; color: var(--descriptionColor); margin-bottom: 30px; line-height: 1.5; max-width: 500px;}
.about-us-sec .about-us-wrapper .about-text-sec .about-description-list{margin-bottom: 24px;}
.about-us-sec .about-us-wrapper .about-text-sec .about-description-list .description-list-title{font-size: 26px; color: var(--subtextColor); margin-bottom: 12px; line-height: 1.4; font-weight: 500;}
.about-us-sec .about-us-wrapper .about-text-sec .about-description-list .description-list-description{font-size: 18px; color: var(--descriptionColor); margin-bottom: 12px; line-height: 1.8;}
.about-us-sec .about-us-wrapper .about-text-sec .about-description-list .read-more a{font-size: 16px; color: var(--primary); margin-bottom: 12px; line-height: 1.8; font-weight: 500; position: relative;}
.about-us-sec .about-us-wrapper .about-text-sec .about-description-list .read-more a:after{content: '\f324'; font-family:"font awesome 6 pro"; position: absolute; top: 50%; transform: translateY(-50%); right: 0; opacity: 0; transition: 0.5s all ease;}
.about-us-sec .about-us-wrapper .about-text-sec .about-description-list .read-more a:hover:after{ opacity: 1; right: -22px;}
.about-us-sec .about-us-wrapper .about-text-sec .chat-wrap{display: flex; gap: 20px; align-items: center;}
.about-us-sec .about-us-wrapper .about-text-sec .chat-wrap .chat-icon{font-size: 38px; color: var(--primary);}
.about-us-sec .about-us-wrapper .about-text-sec .chat-wrap .chat-text{font-size: 18px; color: var(--subtextColor); display: flex; flex-direction: column; gap: 10px; font-weight: 500;}
.about-us-sec .about-us-wrapper .about-text-sec .chat-wrap .chat-text span{font-size: 16px; color: var(--descriptionColor); font-weight: 400;}
.about-us-sec .about-us-wrapper .about-img-sec{width: 60%; display: flex; justify-content: center; align-items: center; position: relative;}
.about-us-sec .about-us-wrapper .about-img-sec img{width: 100%; height: 100%; object-fit: cover;}
.about-us-sec .about-us-wrapper .about-img-sec img{width: 100%; height: 100%; object-fit: cover;}
.about-us-sec .about-us-wrapper .about-img-sec .about-imgs-wrapper{max-width: 970px; width: 84%; position: relative; display: flex; justify-content: center; align-items: center;}
.about-us-sec .about-us-wrapper .about-img-sec .about-imgs-wrapper .about-img:nth-child(1){width: 85%; aspect-ratio: 1.5/1; border-radius: 20px; overflow: hidden; position: relative;}
.about-us-sec .about-us-wrapper .about-img-sec .about-imgs-wrapper .about-img:nth-child(2){position: absolute; bottom: 72%; left: -100px; width: 50%; aspect-ratio: 1.7/1; overflow: hidden; border-radius: 20px;}
.about-us-sec .about-us-wrapper .about-img-sec .about-imgs-wrapper .about-img:nth-child(3){position: absolute; bottom: 107%; right: 100px; width: 35%; aspect-ratio: 1.7/1; overflow: hidden; border-radius: 20px;}
.about-us-sec .about-us-wrapper .about-img-sec .about-imgs-wrapper .about-img:nth-child(4){position: absolute; top: 107%; left: -30px; width: 40%; aspect-ratio: 1.7/1; overflow: hidden; border-radius: 20px;}
.about-us-sec .about-us-wrapper .about-img-sec .about-imgs-wrapper .about-img:nth-child(5){position: absolute; top: 75%; right: -60px; width: 35%; aspect-ratio: 1.3/1; overflow: hidden; border-radius: 20px;}

/* ********|| ABOUT US END ||******** */

/* ********|| SERVICES START ||******** */
.services-sec{margin: 130px 0; position: relative; background-color: var(--lightBg);}
.services-sec .service-sec-bg{position: absolute; overflow: hidden; width: 100%; height: 100%; z-index: 0;}
.services-sec .service-bg-wrap{position: relative;}
.services-sec .service-sec-bg img{width: 50%; height: 100%; object-fit: cover; /* margin: 0 auto; */ display: flex; margin-left: auto;}
.services-sec .service-sec-bg::after{content: '';     background-image: linear-gradient(90deg, #430103, #bb3b3f); width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: -1;}

.services-sec .services-wrapper{display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 100px 0;  position: relative; z-index: 1;}
.heading-wrapper{display: flex; flex-direction: column; justify-content: center; align-items: center; margin-bottom: 25px;}
.main-title{font-size: 16px; color: var(--primary); font-weight: 500; position: relative; width: max-content; text-align: center; margin-bottom: 15px; text-transform: uppercase;}
.main-title:before{content: ''; position: absolute; top: 50%; transform: translateY(-50%); left: -60px; background-color: var(--primary); width: 40px; height: 3px;}
.main-title:after{content: ''; position: absolute; top: 50%; transform: translateY(-50%); right: -60px; background-color: var(--primary); width: 40px; height: 3px;}
.main-heading{font-size: 50px; font-weight: 500; color: var(--subtextColor); line-height: 1.2; text-transform: capitalize; margin-bottom: 16px;}
/* .services-sec .services-items-wrapper{display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 45px; row-gap: 45px; margin-top: 65px;}
.services-sec .services-items-wrapper .services-item{position: relative; padding: 35px; border-radius: 20px; display: flex; flex-direction: column;  align-items: center; text-align: center; overflow: hidden; transition: 0.5s all ease; z-index: 2; box-shadow: 0px 0px 10px 0px #e3e3e3; cursor: pointer;}
.services-sec .services-items-wrapper .services-item { position: relative; padding: 35px; border-radius: 20px; display: flex; flex-direction: column; align-items: center; text-align: center; transition: 0.5s all ease; z-index: 2; box-shadow: 0px 0px 10px 0px #e3e3e3; cursor: pointer; background: #ffffff24; border: 4px solid #ffffff78; color: #fff; overflow: hidden;
}
.services-sec .services-items-wrapper .services-item::after{content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #000000a9; z-index: -1;}
.services-sec .services-items-wrapper .services-item .service-item-img{position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; z-index: -2; opacity: 0.4;}
.services-sec .services-items-wrapper .services-item .service-item-img img{width: 100%; height: 100%; object-fit: cover;}
.services-sec .services-items-wrapper .services-item:before{content: ''; background-image:linear-gradient(#ffffff, #ffffff); position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1;}
.services-sec .services-items-wrapper .services-item:after{content: ''; background-image:linear-gradient(#6B2E2E, #E73C42); position: absolute; top: 0; left: 0;  width: 100%; height: 100%; z-index: -1; transform: translateY(-100%); opacity: 0; transition: 0.5s all ease;}
.services-sec .services-items-wrapper .services-item .service-icon{width: 100px; aspect-ratio: 1 / 1; display: flex; justify-content: center; align-items: center; background-image: linear-gradient(#ffffff, #ffffff); border-radius: 50%; font-size: 40px; color: var(--primary); margin-bottom: 35px; margin-top: -98px;}
.services-sec .services-items-wrapper .services-item .service-title{font-size: 30px; font-weight: 500; line-height: 1.4; margin-bottom: 15px;}
.services-sec .services-items-wrapper .services-item .service-description{font-size: 18px; font-weight: 400; line-height: 1.8; color: var(--shades01);}
.services-sec .services-items-wrapper .services-item:hover:after{ transform: translateY(0%); opacity: 1;}
.services-sec .services-items-wrapper .services-item:hover .service-icon{background-image:linear-gradient(var(--shades01), var(--shades01)); color: var(--primary);}
.services-sec .services-items-wrapper .services-item:hover .service-title{color: var(--shades01);}
.services-sec .services-items-wrapper .services-item:hover .service-description{color: var(--shades01);} */
.dark-bg-color{color: var(--shades01);}
.dark-bg-color:before{background-color: var(--shades01);}
.dark-bg-color:after{background-color: var(--shades01);}

/* .services-wrapper .services-items-wrapper .swiper{padding: 42px;}
.swiper { width: 100%; padding-top: 50px; padding-bottom: 50px;}
.swiper-slide { background-position: center; background-size: cover; width: 300px; height: 300px;}
.swiper-slide img { display: block; width: 100%;} */

.services-info-wrap{display: flex; gap: 50px; width: 100%; align-items: center;justify-content: center;}
.services-info-wrap .services-title-sec{width: 400px; position: relative; z-index: 2; flex-shrink: 0;}

/* .services-info-wrap .services-title-sec { width: 420px; border-style: solid; border-radius: 50%; position: relative; border-width: 10px; border-color: transparent; border-left-color: var(--primary); border-top-color: var(--primary); transform: rotate(0deg);} */

.services-info-wrap .services-title-sec::before{ content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 114%; height: 114%; border-radius: 1000px; z-index: -1; border: 2px dashed #acacac; background-color: var(--lightBg);}

.services-info-wrap .services-title-sec .services-title{font-size: 76px; font-weight: 700; aspect-ratio: 1/1; text-align: center; text-transform: uppercase; line-height: 1.2; position: relative; background-color: #00000075; padding: 20px; border-radius: 50%; color: var(--shades01); display: flex; flex-direction: column; justify-content: center; align-items: center; margin: 10px; position: relative;}
.services-info-wrap .services-title-sec .services-title span{font-size: 46px; font-weight: 400;}
.services-info-wrap .services-title-sec .services-title::after{content: ''; position: absolute; top: -10%; left: 50%; transform: translateX(-50%); background-color: var(--lightBg); z-index: 1; width: 222px; height: 26px; border-radius: 50px; /* border: 1px solid #acacac;*/}

/* .services-info-wrap .services-title-sec .services-title::before{content: ''; position: absolute; bottom: -15%; left: 50%; transform: translateX(-50%); background-color: var(--shades01); z-index: 1; width: 20px; aspect-ratio: 1 / 1; border-radius: 50px; border: 1px solid #acacac;} */
.services-info-wrap .services-title-sec .services-title .service-title-img{position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; z-index: -1; border-radius: 50%;}
.services-info-wrap .services-title-sec .services-title .service-title-img img{width: 100%; height: 100%; object-fit: cover;}
/* .services-info-wrap .services-title-sec .services-title .service-title-img::after{} */

.services-info-wrap .services-list-wrap{width: 30%; position: relative; z-index: 3;}
.services-info-wrap .services-list-wrap .services-list{display: flex; align-items: center; position: relative; margin-bottom: 30px;}
.services-info-wrap .services-list-wrap .services-list .service-icon{position: relative; width: 76px; aspect-ratio: 1/1; border-radius: 50%; background-image: linear-gradient(#99161b, var(--primary)); font-size: 28px; color: var(--shades01); display: flex; justify-content: center; align-items: center; flex-shrink: 0;}
/* .services-info-wrap .services-list-wrap .services-list .service-icon::before{content: ''; position: absolute; top: 50%; left: 50%;  transform: translate(-50%, -50%); border: 4px solid var(--primary); z-index: -1; width: 122%; height: 122%; border-radius: 50%;} */
.services-info-wrap .services-list-wrap .services-list .service-icon::before{content: ''; position: absolute; top: 50%; left: 18%; transform: translate(-50%, -50%) rotate(-2deg); z-index: -1; width: 60%; height: 125%; /* border-radius: 50%; */ /* border-color: transparent; */ /* border-left: solid var(--primary); */ /* border-width: 5px !important; */ border: 5px solid var(--primary); border-right: 0; border-top-left-radius: 150px; border-bottom-left-radius: 150px;}

/* .services-info-wrap .services-list-wrap .services-list .service-icon::after{content: ''; position: absolute; background-color: var(--shades01); z-index: -2; width: 110%; aspect-ratio: 1 / 1; border-radius: 50px; border: 1px solid var(--descriptionColor);} */


.services-info-wrap .services-list-wrap .services-list .service-content{ box-shadow: 2px 3px 7px -1px rgb(189 189 189 / 53%); border-top-right-radius: 100px; border-bottom-right-radius: 100px; padding: 12px 20px 12px 60px; transform: translateX(-40px); background-color: var(--shades01); z-index: -1;}
.services-info-wrap .services-list-wrap .services-list .service-content .service-title{font-size: 18px; font-weight: 600; color: var(--primary); margin-bottom: 6px;}
.services-info-wrap .services-list-wrap .services-list .service-content .service-description{font-size: 15px; color: var(--descriptionColor); line-height: 1.4; -webkit-line-clamp: 2; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden;}
.services-info-wrap .services-list-wrap .services-list:last-child{margin-bottom: 0;}
.services-info-wrap .services-list-wrap .services-list:nth-child(2){transform: translateX(75px);}
.services-info-wrap .services-list-wrap .services-list:nth-child(3){transform: translateX(125px);}
.services-info-wrap .services-list-wrap .services-list:nth-child(4){transform: translateX(75px);}
/* .services-info-wrap .services-list-wrap .services-list:nth-child(5){transform: translateX(75px);} */

.services-info-wrap .services-list-wrap .services-list::after{content: ''; position: absolute; top: 50%; transform: translateY(-50%); right: 102%; width: 48px; border-top: 2px dashed #acacac; z-index: -2;}
.services-info-wrap .services-list-wrap .services-list::before{content: ''; position: absolute; top: 50%;right: calc(100% + 57px); width: 175px; border-top: 2px dashed #acacac; z-index: -2;}
.services-info-wrap .services-list-wrap .services-list:nth-child(1)::before{transform: rotate(-26deg);  top: 72%; width: 94px;}
.services-info-wrap .services-list-wrap .services-list:nth-child(2)::before{transform: rotate(-26deg); top: 64%; width: 62px;}
.services-info-wrap .services-list-wrap .services-list:nth-child(3)::before{transform: rotate(0deg); top: 48%;  width: 94px;}
.services-info-wrap .services-list-wrap .services-list:nth-child(4)::before{transform: rotate(26deg); top: 34%; width: 62px;}
.services-info-wrap .services-list-wrap .services-list:nth-child(5)::before{transform: rotate(26deg); top: 25%; width: 94px;}
/* .services-info-wrap .services-list-wrap .services-list:nth-child(6)::before{transform: rotate(26deg); top: 7%;} */
/* .services-info-wrap .services-list-wrap .services-list:nth-child(1) .service-icon::before{top: -16%; left: 50%; } */


/* ✅ Dot styling (pseudo-element or new child element) */
.services-info-wrap .services-list-wrap .services-list .circle-dot { position: absolute; background-color: var(--shades01); z-index: 9; width: 20px; aspect-ratio: 1 / 1; border-radius: 50px; border: 1px solid #acacac;}
.services-info-wrap .services-list-wrap .services-list:nth-child(1) .circle-dot{ top: 85%;right: calc(100% + 132px);}
.services-info-wrap .services-list-wrap .services-list:nth-child(2) .circle-dot{ top: 68%;right: calc(100% + 108px);}
.services-info-wrap .services-list-wrap .services-list:nth-child(3) .circle-dot{ top: 40%;right: calc(100% + 138px);}
.services-info-wrap .services-list-wrap .services-list:nth-child(4) .circle-dot{ top: 8%;  right: calc(100% + 108px);}
.services-info-wrap .services-list-wrap .services-list:nth-child(5) .circle-dot{ top: -6%;  right: calc(100% + 132px);}
/* .services-info-wrap .services-list-wrap .services-list:nth-child(6) .circle-dot{ top: -40%; right: calc(100% - -230px);} */


/* service left wrap*/

.services-info-wrap .services-left-list-wrap .services-list{}
.services-info-wrap .services-left-list-wrap .services-list:nth-child(2){transform: translateX(-75px);}
.services-info-wrap .services-left-list-wrap .services-list:nth-child(3){transform: translateX(-125px);}
.services-info-wrap .services-left-list-wrap .services-list:nth-child(4){transform: translateX(-75px);}
.services-info-wrap .services-left-list-wrap .services-list .service-content{padding: 12px 60px 12px 20px; transform: translateX(40px); border-top-left-radius: 100px; border-bottom-left-radius: 100px;  border-top-right-radius: 0px; border-bottom-right-radius: 0px; text-align: right;}
.services-info-wrap .services-left-list-wrap .services-list .service-icon::before{content: '';
  content: ''; position: absolute; top: 50%; left: 82%; transform: translate(-50%, -50%) rotate(-2deg); z-index: -1; width: 60%; height: 125%; border: 5px solid var(--primary); border-top-right-radius: 150px; border-bottom-right-radius: 150px; border-left: 0; border-top-left-radius: 0px; border-bottom-left-radius: 0px;}
.services-info-wrap .services-left-list-wrap .services-list::after{  left: 102%;}
.services-info-wrap .services-left-list-wrap .services-list::before{left: calc(100% + 57px);}
.services-info-wrap .services-left-list-wrap .services-list:nth-child(1)::before{transform: rotate(26deg);}
.services-info-wrap .services-left-list-wrap .services-list:nth-child(2)::before{transform: rotate(26deg);}
.services-info-wrap .services-left-list-wrap .services-list:nth-child(3)::before{transform: rotate(0deg);}
.services-info-wrap .services-left-list-wrap .services-list:nth-child(4)::before{transform: rotate(-26deg);}
.services-info-wrap .services-left-list-wrap .services-list:nth-child(5)::before{transform: rotate(-26deg);}
.services-info-wrap .services-left-list-wrap .services-list .circle-dot{z-index: 9;}
.services-info-wrap .services-left-list-wrap .services-list:nth-child(1) .circle-dot{left: calc(100% + 132px);}
.services-info-wrap .services-left-list-wrap .services-list:nth-child(2) .circle-dot{left: calc(100% + 108px);}
.services-info-wrap .services-left-list-wrap .services-list:nth-child(3) .circle-dot{left: calc(100% + 138px);}
.services-info-wrap .services-left-list-wrap .services-list:nth-child(4) .circle-dot{left: calc(100% + 108px);}
.services-info-wrap .services-left-list-wrap .services-list:nth-child(5) .circle-dot{left: calc(100% + 132px);}

/* .services-info-wrap .services-left-list-wrap{width: 40%; position: relative; z-index: 4;}
.services-info-wrap .services-left-list-wrap .services-list{display: flex; align-items: center; position: relative; margin-bottom: 30px;}
.services-info-wrap .services-left-list-wrap .services-list .service-icon{position: relative; width: 76px; aspect-ratio: 1/1; border-radius: 50%; background-image: linear-gradient(#99161b, var(--primary)); font-size: 28px; color: var(--shades01); display: flex; justify-content: center; align-items: center; flex-shrink: 0;}
.services-info-wrap .services-left-list-wrap .services-list .service-icon::before{content: ''; position: absolute; top: 50%; right: -41%; transform: translate(-50%, -50%) rotate(-2deg); z-index: -1; width: 60%; height: 125%; border: 5px solid var(--primary); border-top-right-radius: 150px; border-bottom-right-radius: 150px; border-left: 0;}
.services-info-wrap .services-left-list-wrap .services-list .service-content{ box-shadow: 2px 3px 7px -1px rgb(189 189 189 / 53%); border-top-left-radius: 100px; border-bottom-left-radius: 100px; padding: 12px 60px 12px 21px; transform: translateX(40px); background-color: var(--shades01); z-index: -1; text-align: right;}
.services-info-wrap .services-left-list-wrap .services-list .service-content .service-title{font-size: 18px; font-weight: 600; color: var(--primary); margin-bottom: 6px;}
.services-info-wrap .services-left-list-wrap .services-list .service-content .service-description{font-size: 15px; color: var(--descriptionColor); line-height: 1.4; -webkit-line-clamp: 2; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden;}
.services-info-wrap .services-left-list-wrap .services-list:last-child{margin-bottom: 0;}
.services-info-wrap .services-left-list-wrap .services-list:nth-child(2){transform: translateX(-75px);}
.services-info-wrap .services-left-list-wrap .services-list:nth-child(3){transform: translateX(-125px);}
.services-info-wrap .services-left-list-wrap .services-list:nth-child(4){transform: translateX(-125px);}
.services-info-wrap .services-left-list-wrap .services-list:nth-child(5){transform: translateX(-75px);}

.services-info-wrap .services-left-list-wrap .services-list::after{content: ''; position: absolute; top: 50%; transform: translateY(-50%); left: 102%; width: 70px; border-top: 2px dashed #acacac; z-index: -2;}
.services-info-wrap .services-left-list-wrap .services-list::before{content: ''; position: absolute; top: 50%;left: calc(100% + 82px); width: 175px; border-top: 2px dashed #acacac; z-index: -2;}
.services-info-wrap .services-left-list-wrap .services-list:nth-child(1)::before{transform: rotate(26deg); top: 92%;}
.services-info-wrap .services-left-list-wrap .services-list:nth-child(2)::before{transform: rotate(26deg); top: 73%; width: 90px;}
.services-info-wrap .services-left-list-wrap .services-list:nth-child(3)::before{transform: rotate(26deg); top: 73%;  width: 100px;}
.services-info-wrap .services-left-list-wrap .services-list:nth-child(4)::before{transform: rotate(-26deg); top: 25%; width: 100px;}
.services-info-wrap .services-left-list-wrap .services-list:nth-child(5)::before{transform: rotate(-26deg); top: 25%; width: 94px;}
.services-info-wrap .services-left-list-wrap .services-list:nth-child(6)::before{transform: rotate(-26deg); top: 7%;}

.services-info-wrap .services-left-list-wrap .services-list .circle-dot { position: absolute; background-color: var(--shades01); z-index: 9; width: 20px; aspect-ratio: 1 / 1; border-radius: 50px; border: 1px solid #acacac;}
.services-info-wrap .services-left-list-wrap .services-list:nth-child(1) .circle-dot{ top: 119%;left: calc(100% - -230px);}
.services-info-wrap .services-left-list-wrap .services-list:nth-child(2) .circle-dot{ top: 85%; left: calc(100% - -164px);}
.services-info-wrap .services-left-list-wrap .services-list:nth-child(3) .circle-dot{ top: 85%; left: calc(100% - -168px);}
.services-info-wrap .services-left-list-wrap .services-list:nth-child(4) .circle-dot{ top: -5%;  left: calc(100% - -168px);}
.services-info-wrap .services-left-list-wrap .services-list:nth-child(5) .circle-dot{ top: -6%;  left: calc(100% - -168px);}
.services-info-wrap .services-left-list-wrap .services-list:nth-child(6) .circle-dot{ top: -40%; left: calc(100% - -230px);} */

/* ********|| SERVICES END ||******** */

/* ********|| PROCESS START ||******** */
.main-heading-description{font-size: 20px; color: var(--descriptionColor); line-height: 1.6; max-width: 1000px; text-align: center;}
.process-sec {overflow: hidden; margin: 130px 0; position: relative;}
.process-sec .process-content-wrap{display: flex; justify-content: center; flex-direction: column; align-items: center;}
.tabs{display: flex; justify-content: center; margin-bottom: 60px; margin-top: 20px; gap: 6px;}
.tab-button{background-color: transparent; font-size: 17px; font-weight: 600; border: 0; padding: 0 20px; text-transform: uppercase; cursor: pointer;}
.tab-button.active{color: var(--primary);}
.tab-content{display: none; opacity: 0; transform: translateX(10%); transition: 0.3s all ease;}
.tab-content.active{display: block; opacity: 1; transform: translateX(0%);}
.process-sec .process-content-wrap .home-tab-wrap{border: 1px solid var(--primary); padding: 12px 16px; border-radius: 50px; box-shadow: 3px 3px 10px -2px #d3d3d3;}
.process-sec .process-content-wrap .home-tab-wrap .tab-button.active{background-color: var(--primary); color: var(--shades01); padding: 0 18px; height: 40px; border-radius: 50px;}
.process-sec .process-content-wrap .process-webdesign-content{display: flex; gap: 65px; background: #fff4f4; padding: 50px; border-radius: 20px; /*box-shadow: 0px 0px 10px -2px #b7b7b7;*/ margin-bottom: 10px; }
.process-sec .process-content-wrap .process-webdesign-content .process-webdesign-img{width: 50%;}
.process-sec .process-content-wrap .process-webdesign-content .process-webdesign-text{width: 50%;}
.process-sec .process-content-wrap .process-gallery-img .process-img img{width: 100%; height: 100%; object-fit: cover; }
.process-sec .process-content-wrap .process-gallery-img{ display: grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(5, 1fr); grid-column-gap: 20px; grid-row-gap: 20px; height: 740px;}
.process-sec .process-content-wrap .process-gallery-img .process-img{overflow: hidden; border-radius: 20px; box-shadow: 0px 0px 10px -4px gray;}
.process-sec .process-content-wrap .process-gallery-img .process-img:nth-child(4n+1) {grid-area: 1 / 1 / 5 / 2;}
.process-sec .process-content-wrap .process-gallery-img .process-img:nth-child(4n+2) {grid-area: 1 / 2 / 3 / 3;}
.process-sec .process-content-wrap .process-gallery-img .process-img:nth-child(4n+3) { grid-area: 5 / 1 / 6 / 2;}
.process-sec .process-content-wrap .process-gallery-img .process-img:nth-child(4n+4) { grid-area: 3 / 2 / 6 / 3;}
.process-sec .process-content-wrap .process-gallery-img .project-complete .badge{width: 60px!important; aspect-ratio: 1/1; overflow: hidden; flex-shrink: 0;}
.process-sec .process-content-wrap .process-gallery-img .project-complete .badge img{width: 100%; height: 100%; object-fit: contain!important;}
.process-sec .process-content-wrap .process-gallery-img .project-complete{background-color: var(--shades01); padding: 30px; width: 100%; height: 100%; display: flex; gap: 22px;}
.process-sec .process-content-wrap .process-gallery-img .project-complete .process-badge-title{display: flex; flex-direction: column; gap: 8px; font-size: 20px; font-weight: 500;}
.process-sec .process-content-wrap .process-gallery-img .project-complete .process-badge-title span{font-size: 42px; font-weight: 400; line-height: 1;}
.process-sec .process-content-wrap .process-webdesign-content .process-webdesign-text .web-title{font-size: 30px; font-weight: 600; color: var(--primary); margin-bottom: 20px;}
.process-sec .process-content-wrap .process-webdesign-content .process-webdesign-text .web-description{font-size: 18px; font-weight: 400; color: var(--descriptionColor); margin-bottom: 20px; line-height: 1.8;}
.process-sec .process-content-wrap .process-webdesign-content .process-webdesign-text .web-description p{margin-bottom: 20px;}


.process-timeline-wrap { display: flex; justify-content: center; align-items: center; gap: 40px; position: relative; flex-wrap: nowrap; margin: 50px 0 0px; }
.process-timeline-wrap .process-step { text-align: center; width: 120px; position: relative;}
.process-timeline-wrap .process-icon-wrapper { position: relative;}
/* .process-timeline-wrap .process-icon-wrapper .process-icon{width: 100px; height: 100px; margin: 0 auto 15px; border-radius: 50%; background-color: #fff; border: 6px solid #ccc; display: flex; justify-content: center; align-items: center; position: relative; z-index: 2; font-size: 20px; border-width: 10px; border-color: var(--descriptionColor); color: var(--primary); box-shadow: 2px 2px 14px -4px #9d9d9d;} */
.process-timeline-wrap .process-icon-wrapper .process-icon { width: 100px; height: 100px; margin: 0 auto 15px; border-radius: 50%; background-color: #fff; border: 1px solid #fbe3e4; display: flex; justify-content: center; align-items: center; position: relative; z-index: 2; font-size: 36px; color: var(--primary); box-shadow: 0px 4px 10px rgb(231 60 66 / 20%);}
.process-timeline-wrap .tab-button.active .process-icon-wrapper .process-icon{border: 1px solid var(--primary);}
.process-timeline-wrap .tab-button .process-icon-wrapper .process-icon::after{content: ''; position: absolute; width: 0px; height: 0px; bottom: -115px; top: 132%; transform: translateX(20%); border-width: 38px; border-style: solid; border-color: transparent transparent #fff4f4 transparent; border-image: initial; opacity: 0; transition: 0.5s all ease;}
.process-timeline-wrap .tab-button.active .process-icon-wrapper .process-icon::after{opacity: 1; transform: translateX(-50%); left: 50%;}
.process-timeline-wrap .process-step p { font-weight: bold; font-size: 15px; margin: 0; margin-bottom: 34px; position: relative;}
.process-timeline-wrap .process-step p::after {content: '\f101'; font-family: "font awesome 6 pro"; position: absolute; top: 50%; transform: translateY(-50%); right: -24px; color: var(--primary);}
.process-timeline-wrap .process-step:last-child p::after{display: none;}
.process-timeline-wrap .process-step .process-half-circle { width: 165px; height: 80px; background: var(--primary); position: absolute; left: 50%; transform: translateX(-50%); z-index: 1; display: inline-block; /* or block depending on your layout */
  overflow: hidden;}
.process-timeline-wrap .process-step .process-half-circle::after { content: ""; width: 152px; height: 80px; background: var(--shades01); position: absolute; left: 50%; transform: translateX(-50%); z-index: 2;}
.process-timeline-wrap .process-step:nth-child(odd) .process-half-circle { border-top-left-radius: 100px; border-top-right-radius: 100px; top: -25px;}
.process-timeline-wrap .process-step:nth-child(odd) .process-half-circle::after { border-top-left-radius: 100px; border-top-right-radius: 100px; top: 3px;}
.process-timeline-wrap .process-step:nth-child(even) .process-half-circle { border-bottom-left-radius: 100px; border-bottom-right-radius: 100px; bottom: -25px;}
.process-timeline-wrap .process-step:nth-child(even) .process-half-circle::after { border-bottom-left-radius: 100px; border-bottom-right-radius: 100px; bottom: 3px;}

/* Icon Arrows */
.process-timeline-wrap .process-step .process-icon-wrapper::before,
.process-timeline-wrap .process-step .process-icon-wrapper::after { font-family: "Font Awesome 6 Pro"; position: absolute; top: 50%; transform: translateY(-50%); font-size: 20px; background: var(--shades01); border: 1px solid var(--primary); color: var(--primary); border-radius: 50px; width: 26px; aspect-ratio: 1 / 1; flex-shrink: 0; z-index: 2; font-weight: 700;}
.process-timeline-wrap .process-step:nth-child(odd) .process-icon-wrapper::before { content: '\f077'; left: -32px;}
.process-timeline-wrap .process-step:nth-child(odd) .process-icon-wrapper::after { content: '\f078'; right: -32px;}
.process-timeline-wrap .process-step:last-child .process-icon-wrapper::after {content: '\f077'; right: -32px;}

.process-half-circle {
  transform-origin: center center;
  transform: rotate(-90deg) scale(0);
  opacity: 0;
}

/* ********|| PROCESS END ||******** */

/* ********|| WHY WE START ||******** */
.whywe-sec{margin: 130px 0;}
.whywe-sec .whywe-wrapper{display: flex; gap: 25px;}
.whywe-sec .whywe-wrapper .whywe-item{width: 20%; position: relative; padding: 34px; color: var(--shades01); transition: width 500ms cubic-bezier(.4,0,.2,1);     overflow: hidden; min-height: 550px; max-height: 635px; height: 100%; cursor: pointer;}
.whywe-sec .whywe-wrapper .whywe-item.active{width: 60%;}
.whywe-sec .whywe-wrapper .whywe-item .why-bg-img{position: absolute; top: 0; left: 0; z-index: -1; width: 100%; height: 100%; overflow: hidden; border-radius: 20px;}
.whywe-sec .whywe-wrapper .whywe-item .why-bg-img img{width: 100%; height: 100%; object-fit: cover;}
.whywe-sec .whywe-wrapper .whywe-item .why-bg-img::after{content: ''; position: absolute; top: 0; left: 0; background-image:linear-gradient(rgba(0, 0, 0, 0.833),#5e1215d1) ; width: 100%; height: 100%;}
.whywe-sec .whywe-wrapper .whywe-item .whywe-item-content{display: flex; width: 100%; flex-direction: column; flex-direction: column;}
.whywe-sec .whywe-wrapper .whywe-item .whywe-item-content .why-item-title{font-size: 30px; font-weight: 500; margin-bottom: 15px; text-transform: uppercase;}
.whywe-sec .whywe-wrapper .whywe-item .whywe-item-content .why-description{font-size: 18px; line-height: 1.6; margin-bottom: 40px;}
.whywe-sec .whywe-wrapper .whywe-item .whywe-item-content .whywe-content-grid{display: grid; grid-template-columns: repeat(2, 1fr); gap: 40px; margin-bottom: 20px;}
.whywe-sec .whywe-wrapper .whywe-item .whywe-item-content .whywe-content-grid .why-grid-item .why-grid-title{font-size: 18px; font-weight: 600; margin-bottom: 12px; text-transform: uppercase;}
.whywe-sec .whywe-wrapper .whywe-item .whywe-item-content .whywe-content-grid .why-grid-item .why-grid-description{font-size: 18px; line-height: 1.6;}


.whywe-sec .whywe-wrapper .whywe-item .why-des-grid-wrap{ opacity: 0; transition-delay: 0ms;}
.whywe-sec .whywe-wrapper .whywe-item.active .why-des-grid-wrap{ opacity: 1; overflow: hidden;  transition: all 300ms cubic-bezier(.4,0,.2,1); transition-delay: 300ms; opacity: 1;}

/* ********|| WHY WE END ||******** */


/* ********|| TEAM START ||******** */
.team-sec{position: relative; padding-bottom: 50px;}
.team-sec::after{content: ''; position: absolute; bottom: 0; background-color: var(--secondaryColor); width: 100%; height: 50%; z-index: 0;}
.team-sec .team-wapper{display: flex; flex-direction: column;}
/* .team-sec .team-wapper .team-list-wrapper{    display: flex ; gap: 40px;} */
.team-sec .team-wapper .team-list-sec{position: relative; padding-bottom: 80px;}
/* .team-sec .team-wapper .team-list-sec::after{content: ''; position: absolute; bottom: 0; background-color: var(--primary); width: 100%; height: 70%; z-index: 0;} */
.team-sec .team-wapper .team-btn{position: relative; z-index: 1;}
.team-sec .team-wapper .team-btn a{background-color: var(--shades01); color: var(--primary);}
.team-sec .team-wapper .team-list-wrapper{display: grid; grid-template-columns: repeat(5, 1fr); gap: 22px; position: relative; z-index: 1; margin-top: 30px;}

/* .team-list-wrapper .member{position: relative; width: 100%; color: #FFFFFF; border-radius: 10px 10px 10px 10px; margin: 0px 0px 0px 0px; overflow: hidden; z-index: 1; display: flex; flex-direction: column; box-shadow: 0px 0px 15px -8px var(--secondaryColor);}
.team-list-wrapper .member .member-img{ margin: 0px 0px 0px 0px; width: 100%; padding: 10px; background: #ffffff; margin-bottom: 0; text-align: center;   height: 300px;  border-radius: 10px; overflow: hidden; display: inline-block; transition: 0.5s all ease;}
.team-list-wrapper .member .member-img img{width: 100%;height: 100%; object-fit: cover; border-radius: 10px; transition: 0.5s all ease;}
.team-list-wrapper .member .member-content{ background-color: #FFFFFF; position: relative; padding: 20px 0px 20px 0px; margin: -80px 0px 0px 0px; margin-top: -50px;  z-index: 1; background: #fff; width: calc(100% - 30px); padding: 30px; right: 0; bottom: 0; transition: 0.3s; border-radius: 0px 10px 10px 10px; transition: 0.5s all ease; display: flex; flex-shrink: 0; flex-grow: 1;}
.team-list-wrapper .member:hover .member-img{background-color: var(--primary);}
.team-list-wrapper .member:hover .member-img img{width: 110%; height: 110%;}
.team-list-wrapper .member:hover .member-content{background-color: var(--primary);}
.team-list-wrapper .member:hover .member-name{color: var(--shades01);}
.team-list-wrapper .member:hover .member-designation{color: var(--shades01);} */

.team-list-wrapper .team-member{background-color: var(--shades01); padding: 34px; border-radius: 10px; box-shadow: 0px 0px 18px -2px #dbdbdb; position: relative;    display: flex; justify-content: center; align-items: center; flex-direction: column;}
.team-list-wrapper .team-member::before {content: ''; position: absolute; top: 0; right: 0; width: 50%; height: 50%; background: #ffebeb80; border-bottom-left-radius: 250px; z-index: 0;}
.team-list-wrapper .team-member .member-img{width: 84%; aspect-ratio: 1 / 1; overflow: hidden; border-radius: 50px 6px 50px 6px; border: 7px solid var(--secondaryColor); position: relative; z-index: 1; margin-bottom: 22px;}
.team-list-wrapper .team-member .member-img img{width: 100%; height: 100%; object-fit: cover;}
.team-list-wrapper .imgb-design{width: 12px; aspect-ratio: 1/1; background-color: var(--descriptionColor); border-radius: 50px; position: relative; margin-bottom: 22px;}
.team-list-wrapper .imgb-design::before{content: ''; width: 50px; height: 2px; background-color: var(--descriptionColor); position: absolute; top: 50%; transform: translateY(-50%); right: 150%;}
.team-list-wrapper .imgb-design::after{content: ''; width: 50px; height: 2px; background-color: var(--descriptionColor); position: absolute; top: 50%; transform: translateY(-50%); left: 150%;}
.team-list-wrapper .member-name{font-size: 20px; margin: 0px 0px 5px 0px; text-align: center; color: var(--textColor); margin-bottom: 10px;}
.team-list-wrapper .member-designation{font-size: 16px; text-transform: uppercase; letter-spacing: 1px; color: var(--primary); text-align: center;}




.member-content .member-name-designation{position: relative; width: 100%;}
.member-content .member-name-designation .member-name{font-size: 20px; margin: 0px 0px 5px 0px; text-align: center; color: var(--textColor); margin-bottom: 4px;}
.member-content .member-name-designation .member-designation{font-size: 16px; text-transform: uppercase; letter-spacing: 1px; color: var(--primary); text-align: center;}
 

/* ********|| TEAM END ||******** */

/* ********|| PORTFOLIO START ||******** */
.portfolio-sec{position: relative;}
.portfolio-sec .tab-container{position: relative; width: 100%; padding-bottom: 10px;}
.portfolio-wrapper{    position: relative;  width: 100%;} 
.portfolio-wrapper .portfolio-items{position: relative;  width: 100%;  margin: 0 -30px -30px 0; display: flex ; flex-wrap: wrap;}
.portfolio-items .portfolio-item{max-width: calc(100% / 3); width: 100%; padding: 0 30px 30px 0; }
.portfolio-items .portfolio-item .portfolio{margin: calc(1px / 2); background-color: var(--shades08); overflow: hidden; border-radius: 20px; height: 100%; box-shadow: 0px 0px 10px -2px #c1c1c1;}
.portfolio-items .portfolio-item .img-wrap{position: relative; border-radius: 0 0 10px 10px; overflow: hidden; margin-bottom: 0; border-radius: 20px; display: flex; align-items: center; justify-content: center;}
.portfolio-items .portfolio-item .img-wrap img{height: auto; min-height: 160px; max-width: 100%; border: none; object-fit: contain; border-radius: 0; -webkit-box-shadow: none; box-shadow: none; transition: 1.5s;}
.portfolio-item .img-wrap .link{position: absolute; left: 0; bottom: -10%; width: 100%; height: 0%; background-color: rgba(0, 0, 0, 0.8); color: var(--shades01); display: flex; align-items: center; justify-content: center; font-size: 30px; transition: all 0.3s ease-in-out;}
.portfolio-item:hover .img-wrap .link{width: 100%; height: 100%; bottom: 0%;}
.portfolio-item .portfolio-content-wrapper{padding: 30px;}
.portfolio-content-wrapper .portfolio-content{position: relative;}
.portfolio-content .title{font-size: 26px; line-height: 1.3em; margin: 0px 0px 0px 0px; display: block; padding-bottom: 8px;}
.portfolio-content .description{font-size: 16px; line-height: 1.5; margin-bottom: 8px; display: block; padding-bottom: 20px;}
.portfolio-content .category{ background-color: transparent; display: inline;  background-color: var(--primary); font-size: 15px; padding: 10px 20px; border-radius: 6px; color: var(--shades01); margin-top: 8px;}
 
/* ********|| PORTFOLIO END ||******** */


/* ********|| TESTIMONIAL START ||******** */

.testimonials-sec .testimonial-wapper{}
.testimonial-wapper{}
.testimonial-wapper .testimonial-list-wrapper{position: relative; display: flex; gap: 30px; padding: 0 60px;}
.testimonial-wapper .testimonial-list-wrapper .swiper-horizontal { padding: 20px 10px;}
 

.testimonial-wapper .testimonial-list-wrapper .testimonial{padding: 40px 35px; border-radius: 20px;     box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.2)}
.testimonial-wapper .testimonial-list-wrapper .testimonial .description{font-size: 18px; color: var(--descriptionColor); line-height: 1.6; margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid  var(--shades11);} 

.testimonial .testimonial-card{display: flex; align-items: center; gap: 22px;}
.testimonial-card .testimonial-card-wrap{width: 55px; height: 55px; border-radius: 50%; padding: 4px;   background-color: var(--shades01);   box-shadow: 0 0 0 1px var(--primary);   overflow: hidden;}
.testimonial-card .testimonial-card-logo{width: 100%;height: 100%;border-radius: 50%;border: 1px solid var(--primary);  overflow: hidden;}
.testimonial-card .testimonial-card-logo img{width: 100%; height: 100%;  object-fit: cover; border-radius: 50%; }

.testimonial-wapper .testimonial-list-wrapper .swiper-wrapper .swiper-slide{height: 100%;}
.testimonial-wapper .testimonial-list-wrapper .swiper-wrapper .swiper-slide .testimonial{height: 100%;}

.testimonial-card .testimonial-card-info{position: relative; display: flex; flex-direction: column; gap: 4px;}
.testimonial-card .testimonial-card-info h4{margin: 0;}
.testimonial-card .testimonial-card-info h2{margin: 0;}
.testimonial-card .testimonial-card-info .testimonial-card-link{}
/* ********|| TESTIMONIAL END ||******** */

/* ********|| BRAND START ||******** */

.brand-sec { overflow: hidden; padding-top: 130px;}
.brand-sec .brand-wrapper { overflow: hidden; white-space: nowrap;}
.brand-sec .brand-track { display: flex; gap: 20px;}
.brand-sec .brand { flex: 0 0 auto; aspect-ratio: 2/1; width: 180px; border-radius: 20px; background-color: #f2f2f2; padding: 6px 30px;}
.brand-sec .brand img { width: 100%; height: 100%; object-fit: contain; filter: grayscale(100%); transition: filter 0.3s ease;}
.brand-sec .brand:hover img {filter: grayscale(0%);}


/* ********|| BRAND END ||******** */


/* ********|| FOOTER START ||******** */
.footer{margin: 250px 0 0; background-color: var(--subsecondaryColor); padding: 50px 0; z-index: -3; position: relative; padding-bottom: 0;}
.upper-footer{position: relative;width: 70%; margin: 0 auto; aspect-ratio: 3.9/1; display: flex; justify-content: center; align-items: center;margin-top: -200px; margin-bottom: 60px;}
.upper-footer .upper-footer-img{position: absolute; overflow: hidden; width: 100%; height: 100%; border-radius: 20px; z-index: -2; border: 5px solid var(--shades01);}
.upper-footer .upper-footer-img:after{content: ''; background: linear-gradient(90deg,rgba(231, 60, 66, 1) 16%, rgba(231, 60, 66, 0.66) 50%, rgba(0, 0, 0, 1) 87%);/* background: linear-gradient(90deg,rgba(0, 0, 0, 1) 25%, rgba(231, 60, 66, 0.66) 70%, rgba(231, 60, 66, 1) 90%); */width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 0;}
.upper-footer .upper-footer-img img{width: 100%; height: 100%; object-fit: cover;}
.footer .upper-footer .upper-footer-wrapper{display: flex; gap: 20px; align-items: center; padding: 45px; position: relative; width: 100%; justify-content: space-between;}
.upper-footer .upper-footer-wrapper .upper-footer-text .upper-footer-title{font-size: 20px; position: relative; width: max-content; color: var(--shades01); letter-spacing: 2px; margin-bottom: 16px;}
.upper-footer .upper-footer-wrapper .upper-footer-text .upper-footer-title:after{content: ''; position: absolute; right: -50px; top: 50%; transform: translateY(-50%); background-color: var(--shades01); height: 2px; width: 40px; }
.upper-footer .upper-footer-wrapper .upper-footer-text .upper-footer-heading{font-size: 38px; font-weight: 700; line-height: 1.3; color: var(--shades01); max-width: 520px;}

.main-footer{display: flex; justify-content: space-between; color: var(--shades01); margin-bottom: 50px;}
.main-footer .about-company{width: 30%;}
.main-footer .footer-menu{width: 14%;}
.main-footer .footer-contact{width: 30%;}
.main-footer .footer-menu-title{font-size: 20px; line-height: 1.2; font-weight: 700; margin-bottom: 36px; text-transform: capitalize; position: relative;}
.main-footer .footer-menu-title:after{content: ''; position: absolute; bottom: -12px; left: 0; width: 15%; height: 3px; background-color: var(--primary);}
.main-footer .footer-description{font-size: 16px; max-width: 385px; line-height: 1.5; margin-bottom: 25px;}
.main-footer .social-media{display: flex; gap: 14px;}
.main-footer .social-media .social-media-icon a{width: 35px; aspect-ratio: 1/1; background-color: var(--primary); border-radius: 50px; display: flex; justify-content: center; align-items: center; transition: 0.5s all ease;}
.main-footer .social-media .social-media-icon a:hover{background-color: var(--shades01); color: var(--secondaryColor);}
.main-footer .footer-menu ul{padding-left: 20px;}
.main-footer .footer-menu ul li{margin-bottom: 18px; list-style: none; font-size: 16px; line-height: 1; position: relative; transition: 0.3s all ease;}
.main-footer .footer-menu ul li:before{content: '\f105'; font-family: "font awesome 6 pro"; position: absolute; top: 50%; transform: translateY(-50%); left: -20px; font-size: 14px;}
.main-footer .footer-menu ul li:hover{color: var(--primary); padding-left: 6px;}
.main-footer .footer-contact .contact-list{font-size: 16px; display: flex; align-items: flex-start; gap: 14px; line-height: 1.5; margin-bottom: 18px;}
.main-footer .footer-contact .contact-list span{color: var(--primary); font-size: 18px;}
.main-footer .footer-contact .contact-list a{font-size: 16px; display: flex; align-items: start; gap: 14px; line-height: 1.5;}
.footer .copyright{display: flex; justify-content: center; align-items: center; background-color: var(--secondaryColor); color: var(--shades01); padding: 20px; font-size: 14px;}
/* ********|| FOOTER END ||******** */


/* ********|| SERVICE PAGE START ||******** */
.service-item-section{padding-top: 80px;}
.service-item-section .service-item-container{background-color: var(--shades12);}
.service-item-section .service-wrapper{display: flex; align-items: center; gap: 230px; padding: 90px 0px;}
.service-item-container .service-wrapper .service-img-wrapper{max-height: 460px; height: 100%; width: 40%; max-width: 544px; overflow: hidden;}
.service-wrapper .service-img-wrapper img{width: 100%; height: 100%; object-fit: contain;}
.service-container{width: 60%;}
.service-container .title{font-size: 16px; color: var(--primary); text-transform: uppercase; position: relative; width: max-content;letter-spacing: 2px; font-weight: 500;}
.service-container .title::after{position: absolute; content: ''; width: 34px; height: 2px; background-color: var(--primary); right: -50px; top: 50%; transform: translateY(-50%);}
.service-container .heading{position: relative;}
.service-container .heading h2{margin: 0; font-size: 50px; font-weight: 500; color: var(--textColor); margin-bottom: 36px;}
.service-container .description{font-size: 18px; color: var(--descriptionColor); line-height: 1.6; padding-right: 20px;}

/* ********WEBSITE DEVELOPMENT START******* */

.development-sec{position: relative; padding: 80px 0px; background-color: var(--shades13);}
.development-sec .development-container{position: relative;}
.development-container .development-wrapper{display: flex; align-items: center; width: 100%; gap: 90px;}
.development-wrapper .development-content{width: 60%;}
.development-wrapper .development-content .heading{margin-bottom: 48px;}
.development-wrapper .development-content .heading h2{font-size: 60px; font-weight: 500; color: var(--textColor); line-height: 1.2; margin: 0px;}
.development-wrapper .development-content .development-steps{}
.development-wrapper .development-content .development-steps ul{padding-left: 10px; display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: auto; padding-left: 10px; list-style: none;}
.development-wrapper .development-content .development-steps ul li{position: relative; font-size: 20px; line-height: 1.6; margin-bottom: 30px; color: var(--descriptionColor); padding-left: 50px;}
.development-wrapper .development-content .development-steps ul li:after{position: absolute; content: '✔';font-family: 'Font Awesome 5 Free'; color: var(--shades01); font-weight: 900; left: 0; top: 0; width: 40px; height: 40px; border-radius: 50px; background-color: var(--primary); display: flex; align-items: center; justify-content: center;}
.development-container .development-wrapper .development-image{max-height: 460px; height: 100%; width: 40%; max-width: 544px; overflow: hidden;}
.development-container .development-wrapper .development-image img{width: 100%; height: 100%; object-fit: contain;} 
/* ********WEBSITE DEVELOPMENT END******* */

/* ********TESTIMONIAL START******* */
.development-sec + .testimonials-sec{padding-top: 190px;}
/* ********TESTIMONIAL END******* */ 

/* ********PORTFOLIO END******* */  


/* ********ABOUT PAGE START******* */ 

.about-team::after{width: 0; height: 0;}
.about-team .btn-wrap{display: none;}

.our-clint-sec{margin: 130px 0;}
.our-clint-sec .clients-wrapper{display: flex; gap: 40px; flex-wrap: wrap; justify-content: center; align-items: center; padding-top: 40px;}
.our-clint-sec .clients-wrapper .single-clint-wrap{width: 200px; aspect-ratio: 1.6/1; padding: 12px; border-radius: 8px; position: relative;}
.our-clint-sec .clients-wrapper .client{width: 200px; aspect-ratio: 1.6/1; overflow: hidden; border: 1px solid #d0d0d0; padding: 12px; border-radius: 8px; position: relative; background-color: var(--shades01); box-shadow: 6px 7px 10px 0px #ededed;}
.our-clint-sec .clients-wrapper .client img{width: 100%; height: 100%; object-fit: contain;}
.our-clint-sec .clients-wrapper .single-clint-wrap::before{content: ''; content: ''; position: absolute; top: 7px; left: 6px; background-color: var(--primary); width: 100px; height: 100px; border-radius: 8px;}
.our-clint-sec .clients-wrapper .single-clint-wrap::after{content: ''; position: absolute; bottom: 7px; right: -17px; background-color: var(--primary); width: 100px; height: 100px; border-radius: 8px; z-index: -1;}

/* ********ABOUT PAGE END******* */ 

/* ********PORTFOLIO PAGE START******* */
.intro-page + .portfolio-sec .portfolio-items .portfolio-item .portfolio{box-shadow: 0px 6px 5px 0px rgba(0, 0, 0, 0.25);} 
/* ********PORTFOLIO PAGE END******* */ 

/* ********CONTACT PAGE START******* */ 
.section-contact{position: relative; padding-bottom: 190px;}
.section-contact .contact-hero{position: relative; height: 100%;}
.section-contact .contact-hero .contact-hero-image-section {position: absolute; left: 0; top: 0; width: 100%; height: 500px; overflow: hidden; z-index: 1;}
.contact-hero-image-section .contact-hero-img-wrap{position: relative; width: 100%; height: 100%;}
.contact-hero-image-section .contact-hero-img-wrap::after{position: absolute; content: ''; width: 100%; height: 100%; left: 0; bottom: 0;     background-image: linear-gradient(rgba(231, 60, 66, 0.821), rgba(0, 0, 0, 0.833));}
.contact-hero-image-section .contact-hero-img-wrap img{width: 100%; height: 100%; object-fit: cover;}
.contact-hero-cotainer {position: relative; z-index: 2; display: flex; flex-direction: column;  justify-content: center; align-items: center; height: 100%; padding-top: 110px;}
.contact-hero-cotainer .heading-wrapper{color: var(--shades01);}
.contact-hero-cotainer .heading-wrapper .main-title{color: var(--shades01);}
.contact-hero-cotainer .heading-wrapper .main-title::after, 
.contact-hero-cotainer .heading-wrapper .main-title::before{background-color: var(--shades01);}
.contact-hero-cotainer .heading-wrapper .main-heading {color: var(--shades01);}
.contact-hero-cotainer .heading-wrapper .main-heading-description {color: var(--shades01);}
 

.section-contact .form-content{position: relative; z-index: 2; background-color: var(--shades01); border: 1px solid var(--shades09);  max-width: 900px; width: 100%; margin: 0 auto; padding: 40px; border-radius: 20px; margin-top: 36px;}
.section-contact .form-content .field-set{position: relative;}
.section-contact .form-content .field-set .form-group{position: relative; margin-bottom: 15px;}
.section-contact .form-content .field-set .form-group input{height: 60px; width: 100%; border-radius: 10px; border: 1px solid var(--shades10); padding: 0 30px;  }
.section-contact .form-content .field-set .form-group input::placeholder,
.section-contact .form-content .field-set .form-group textarea::placeholder{ color: var(--descriptionColor) !important; font-size: 16px;}
.section-contact .form-content .field-set .form-group textarea{width: 100%; border-radius: 10px; padding: 16px 30px; border: 1px solid var(--shades10); resize: none; font-family: "Roboto", sans-serif; }
.section-contact .form-action{}
.section-contact .form-action .main-btn { color: var(--primary); border: 2px solid var(--primary); position: relative; display: inline-block; font-size: 18px; text-decoration: none; padding: 16px 40px; text-transform: uppercase; overflow: hidden; border-radius: 8px; transition: all 0.3s ease; font-weight: 500; z-index: 1;   width: 100%; background-color: transparent; cursor: pointer;}

.section-contact .form-action .main-btn::before {content: "";background: var(--primary);position: absolute;top: 50%;left: 50%;width: 100%;height: 0%;transform: translate(-50%, -50%) rotate(45deg);transition: all 0.6s ease;z-index: -1; }
.section-contact .form-action .main-btn:hover {color: var(--shades01); }
.section-contact .form-action .main-btn:hover::before {height: 1500%;}



/* ********OFFICE DETAILS START******* */ 
.office-sec{position: relative;} 
.office-sec .office-contact-wrapper{position: relative; display: flex; width: 100%; gap: 70px;  }
.office-contact-wrapper .office-contact-card{width: 50%; border-radius: 20px; overflow: hidden; background-color: var(--shades08); border: 1px solid var(--shades09);}
.office-contact-card .office-contact-header{background-color: var(--primary); padding: 30px 50px; border-radius: 20px;}
.office-contact-card .office-contact-header h2{font-size: 40px; color: var(--shades01); font-weight: 700;  margin: 0; margin-bottom: 10px;} 
.office-contact-card .office-contact-header .office-contact-description{font-size: 18px; color: var(--shades01);}
.office-contact-card .office-contact-details{padding: 30px 50px; display: flex; flex-direction: column; gap: 25px;}
.office-contact-card .office-contact-details .office-contact-item{display: flex; align-items: center; gap: 20px;}
.office-contact-details .office-contact-item .office-contact-icon{width: 40px; height: 40px; border-radius: 50px; background-color: var(--shades07); display: flex; align-items: center; justify-content: center; font-size: 16px; color: var(--textColor);}
.office-contact-details .office-contact-item .office-contact-info{position: relative;}
.office-contact-item .office-contact-info h4{margin: 0px; margin-bottom: 4px;}
.office-contact-item .office-contact-text{font-size: 16px; color: var(--descriptionColor);}
/* ********OFFICE DETAILS END******* */


/* ********CONTACT PAGE END******* */ 

/* ********JOB PAGE START******* */ 
.job-listing-sec{position: relative;}
.job-listing-sec .job-list{position: relative; }
.job-list .job-listing-card{padding: 40px 20px; }
.job-list .job-listing-card{border-top: 1px solid var(--shades09);}
.job-list .job-listing-card:first-child{border-top: 1px solid transparent;}
.job-list .job-listing-card .job-listing-wrapper{display: flex; justify-content: space-between; align-items: center; margin-bottom: 30px;}
.job-list .job-listing-card .job-listing-wrapper .job-listing-summary{ }
.job-list .job-listing-card .job-listing-body{position: relative;}
.job-list .job-listing-card .job-listing-body .job-listing-wrapper{position: relative;}
.job-listing-summary .job-listing-header{position: relative; }
.job-listing-summary .job-listing-header h3{font-size: 20px; font-weight: 500; color: var(--primary); margin: 0px; margin-bottom: 20px;}
.job-listing-summary .job-listing-header h2{font-size: 30px; font-weight: 500; color: var(--textColor); margin: 0px; margin-bottom: 14px;}
.job-listing-summary .job-meta{display: flex; align-items: center; gap: 20px; font-size: 16px; color: var(--descriptionColor);}
.job-listing-summary .job-meta .job-type{position: relative;}
.job-listing-summary .job-meta .job-location{display: flex ; align-items: center; gap: 20px;}
.job-listing-summary .job-meta .job-location .location-icon{font-size: 16px;}
.job-listing-summary .job-meta .job-location .location-text{}
.job-listing-wrapper .job-toggle-wrapper{position: relative; width: 66px; height: 66px; border-radius: 50px; border: 1px solid var(--descriptionColor); display: flex; align-items: center; justify-content: center; color: var(--descriptionColor); font-size: 30px; line-height: 1; cursor: pointer; overflow: hidden; transition: all 0.3s ease-in-out;} 



.job-toggle-wrapper .job-toggle-icon {
  transition: transform 0.3s ease;
}
.job-toggle-wrapper .job-toggle-icon.rotated {
  transform: rotate(180deg);
}

.job-listing-wrapper .job-toggle-wrapper::before{ background: var(--primary); content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: -1; width: 100%; height: 0%; transform: translate(-50%, -50%) rotate(45deg); transition: all 0.6s ease; color: var(--shades01);}

.job-listing-wrapper .job-toggle-wrapper:hover {color: var(--shades01); border: 1px solid transparent;}
.job-listing-wrapper .job-toggle-wrapper:hover::before {height: 150%;}
.job-listing-wrapper .job-action{}
 
.job-listing-card .job-body{ position: relative; display: flex; width: 100%; gap: 70px; background-color: var(--shades01); border-radius: 20px; padding: 30px 44px; box-shadow: 0px 3px 5px 0px rgb(0, 0, 0, 0.10); border: 1px solid var(--shades09); max-height: 0;  overflow: hidden; transition:  all 0.4s ease; opacity: 0; padding: 0 44px;}

.job-listing-card .job-body.active{ max-height: 1000px;  opacity: 1;  padding: 30px 44px;}

.job-body .job-card-content{position: relative; }
.job-card-content .job-section-title{font-size: 20px;font-weight: 500; margin-bottom: 20px; color: var(--primary);}
.job-card-content ul{    position: relative; list-style: none; padding: 0;}
.job-card-content ul li{display: flex; align-items: center; gap: 10px; margin-bottom: 20px; color: var(--descriptionColor);}
.job-card-content ul li .job-icon{ }
.job-card-content ul li .job-text { }
 
 

.job-content .job-action {position: relative;} 
.job-action .main-btn:hover { color: var(--shades01); }
.job-action .main-btn::before { background: var(--primary); }

/* ********JOB PAGE END******* */ 





/* ********|| RESPONSIVE START ||******** */
@media screen and (max-width: 1600px) {
  
}

@media screen and (max-width: 1540px) {
  /* ****** HOME START ****** */
  
  /* -------COMMON START------- */
  .main-heading-description { font-size: 18px; }
  .tab-button {  font-size: 16px; }
  /* -------COMMON END------- */

  .banner .swiper .swiper-slide .banner-items .banner-content .heading { font-size: 60px; margin-bottom: 14px;}
  .banner .swiper .swiper-slide .banner-items .banner-content .description {  font-size: 20px; }

  .about-us-sec .about-us-wrapper .about-text-sec .about-title {font-size: 16px;}
  .about-us-sec .about-us-wrapper .about-text-sec .about-heading {font-size: 32px;}
  .about-us-sec .about-us-wrapper .about-text-sec .about-subtitle {font-size: 20px; }
  .about-us-sec .about-us-wrapper .about-text-sec .about-description-list .description-list-title {font-size: 24px; }
  .about-us-sec .about-us-wrapper .about-text-sec .about-description-list .description-list-description {font-size: 16px; }
  .about-us-sec .about-us-wrapper .about-text-sec .chat-wrap .chat-icon {font-size: 34px; }


  .services-sec .services-items-wrapper {gap: 20px;}
  .main-heading {font-size: 42px;}
  .services-sec .services-items-wrapper .services-item .service-icon { width: 80px;  font-size: 32px; }
  .services-sec .services-items-wrapper .services-item .service-title {font-size: 26px; }
  .services-sec .services-items-wrapper .services-item .service-description {font-size: 16px; }


  .process-sec .process-content-wrap .process-webdesign-content .process-webdesign-text .web-title { font-size: 26px;  margin-bottom: 10px;}
  .process-sec .process-content-wrap .process-webdesign-content .process-webdesign-text .web-description {font-size: 16px;}
  .process-sec .process-content-wrap .process-gallery-img .project-complete { padding: 22px; }
  .process-sec .process-content-wrap .process-gallery-img .project-complete .process-badge-title span {font-size: 36px; }
  .process-sec .process-content-wrap .process-gallery-img .project-complete .process-badge-title { font-size: 16px; }
  .process-sec .process-content-wrap .process-webdesign-content .process-webdesign-text .web-description p {margin-bottom: 10px;}

  .team-sec .team-wapper .team-list-wrapper { gap: 16px;}
  .member-content .member-name-designation .member-name {font-size: 18px; margin-bottom: 8px;}
  .member-content .member-name-designation .member-designation {font-size: 14px;}
  .team-list-wrapper .member .member-content { width: calc(100% - 20px); }

  .testimonial-wapper .testimonial-list-wrapper .testimonial .description { font-size: 16px; }

  .upper-footer .upper-footer-wrapper .upper-footer-text .upper-footer-title { font-size: 18px; }
  .upper-footer .upper-footer-wrapper .upper-footer-text .upper-footer-heading {font-size: 36px;}
  
}

@media screen and (max-width: 1440px) {
  
}

@media screen and (max-width: 1400px) {
  
}

@media screen and (max-width: 1366px) {
  
}

@media screen and (max-width: 1280px) {

  .banner .swiper .swiper-slide .banner-items .banner-content .title {font-size: 16px;}
  .banner .swiper .swiper-slide .banner-items .banner-content .heading {font-size: 50px; }
  .banner .swiper .swiper-slide .banner-items .banner-content .description {font-size: 18px;}
  
  
}

@media screen and (max-width: 1200px) {
  
  header .upper-header .upper-header-wrapper .info-left-list a {font-size: 13px;}
  header .upper-header .upper-header-wrapper .info-left-list .headericon { width: 26px;height: 26px; font-size: 12px;}

  header .main-header {height: 80px; }
  header .navigations .navigation-wrap .navigation-menu { gap: 16px; }
  header .navigations .navigation-wrap .navigation-menu > li > a { font-size: 13px; }

  .about-us-sec .about-us-wrapper {flex-direction: column; gap: 180px;}
  .about-us-sec .about-us-wrapper .about-text-sec {width: 100%;}
  .about-us-sec .about-us-wrapper .about-img-sec { width: 100%; }
  .services-sec {  margin-top: 330px; }

  .services-sec .services-items-wrapper .services-item  { padding: 25px; }
  .services-sec .services-items-wrapper .services-item .service-icon {width: 70px;font-size: 24px; margin-bottom: 15px;}
  .services-sec .services-items-wrapper .services-item .service-title {font-size: 20px;}

 .tabs { width: 100%; overflow-x: hidden; overflow-x: scroll; scrollbar-color: var(--primary) #f1f1f1;  scrollbar-width: thin;        } 

.tabs::-webkit-scrollbar {height: 8px; }
.tabs::-webkit-scrollbar-track {background: #f1f1f1;}
.tabs::-webkit-scrollbar-thumb {background: #888; border-radius: 4px;}
.tabs::-webkit-scrollbar-thumb:hover {background: #555;}
.tab-button {white-space: nowrap;padding-bottom: 10px;}

.whywe-sec .whywe-wrapper .whywe-item {padding: 20px; }
.whywe-sec .whywe-wrapper .whywe-item .whywe-item-content .why-item-title {font-size: 24px; }

.process-sec .process-content-wrap .process-webdesign-content { gap: 34px; }

.team-sec .team-wapper .team-list-wrapper {grid-template-columns: repeat(3, 1fr); gap: 20px;}
.portfolio-content .title { font-size: 20px; }

.testimonial-card .testimonial-card-info h4{font-size: 14px;}
.testimonial-card .testimonial-card-info h2{font-size: 20px;}
.testimonial-card .testimonial-card-info .testimonial-card-link { font-size: 12px;}



.footer .upper-footer .upper-footer-wrapper { padding: 30px; }
.upper-footer .upper-footer-wrapper .upper-footer-text .upper-footer-heading {font-size: 24px;}
.upper-footer .upper-footer-wrapper .upper-footer-text .upper-footer-title { font-size: 20px;  margin-bottom: 10px;}
.main-footer .footer-description { font-size: 14px; }
.header-btn.main-btn{ white-space: nowrap;}

}

@media screen and (max-width: 1024px) {
  
}

@media screen and (max-width: 990px) {

  /* header .upper-header { height: 80px; }
  header .upper-header .upper-header-wrapper {  flex-direction: column;  gap: 10px;}
  header .main-header { top: 80px;}
  header .main-header {top: 130px;}
  header .navigations { gap: 20px; flex-direction: column;}
  header .navigations .navigation-wrap .navigation-menu { gap: 16px; flex-direction: column;}

  header .upper-header .upper-header-wrapper .header-info-left { gap: 6px;}
  .banner .swiper .swiper-slide .banner-items .banner-bg-img {  height: 100vh;} */
}

@media screen and (max-width: 990px) and (orientation:landscape){
  
}

@media screen and (max-width: 480px) {
  
}
/* ********|| RESPONSIVE END ||******** */