/*!
Theme Name: mansad
Author: mansad
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
Text Domain: mansad
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready
*/

/* fonts */
@import url('https://fonts.googleapis.com/css2?family=Bai+Jamjuree:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;1,200;1,300;1,400;1,500;1,600;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400..900&display=swap');

/* common css start */
:root {
	--primary-color: #ffffff;
	--secondary-color: #FFCB71;
	--bg-primary-color: #0A0A0A;
	--bg-secondary-color: #1A1A1A;
	--bg-box-color: #191919;
	--gray-80: #C8CBD0;
	--gray-90: #E3E5E8;
	--gray-95: #F1F2F3;
	--gray-100: #FCFCFD;
	--black-color: #000000;
	--bai-jamjuree: 'Bai Jamjuree', sans-serif;
	--orbitron: 'Orbitron', sans-serif;
}
html,body { overflow-x: hidden;}
body { font-size: 20px; line-height: 28px; font-family: var(--bai-jamjuree); font-weight: 400; color: var(--gray-80); background-color: var(--bg-primary-color);}
a { text-decoration: none;}
h1,h2,h3,h4,h5,h6 { text-transform: uppercase; }
h1,h2,h3,h4,h5,h6,p,ul,ol,figure,.slick-dotted.slick-slider { margin-bottom: 0px; }
h1,h2,h4,h6 { font-weight: 400; }
h1,h2 { letter-spacing: 2px;}
.heading-1 { font-size: 60px; line-height: 80px; color: var(--gray-95);}
.heading-2 { font-size: 52px; line-height: 72px; color: var(--gray-100);}
.heading-3 { font-size: 40px; line-height: 56px; color: var(--gray-100);}
.heading-4 { font-size: 36px; line-height: 50px; letter-spacing: 0.96px; font-weight: 700; color: var(--primary-color); font-family: var(--orbitron);}
.heading-6 { font-size: 24px; line-height: 34px; letter-spacing: 3px; color: var(--gray-80);}
.medium-text { font-size: 20px; line-height: 26px;}
.small-text { font-size: 16px; line-height: 24px;}
ul,ol { padding: 0px; list-style: none;}
.main-navigation li.menu-btn a,
.common-btn { padding-block: 10px; padding-inline: 26px; font-weight: 700; color: var(--black-color); min-width: 170px; border: 2px solid var(--secondary-color);-webkit-clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 20px 100%, 0 calc(100% - 20px)); clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 20px 100%, 0 calc(100% - 20px)); display: inline-block; position: relative; overflow: hidden; text-transform: uppercase; text-decoration: unset; transition-duration: 0.3s; text-align: center;}
.main-navigation li.menu-btn a::before,
.main-navigation li.menu-btn a::after,
.common-btn::before,.common-btn::after { content: ""; position: absolute; background-color: var(--secondary-color); width: 60px; height: 2.5px; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg);}
.main-navigation li.menu-btn a::before,
.common-btn::before { top: 0; right: -15px;}
.main-navigation li.menu-btn a::after,
.common-btn::after { bottom: 0; left: -14px;}
.main-navigation li.menu-btn span,
.common-btn span { position: relative;}
.main-navigation li.menu-btn span,
.common-btn.white-btn.fill-btn span { background-color: var(--secondary-color); position: absolute; display: block; top: 104%; left: -125%; width: 160%; height: 600%; z-index: 1;  -webkit-transition: .75s cubic-bezier(.1,.48,.25,.86); -o-transition: .75s cubic-bezier(.1, .48, .25, .86); transition: .75s cubic-bezier(.1,.48,.25,.86); -webkit-transform: rotate(45deg) translate3d(0, -100%, 0); transform: rotate(45deg) translate3d(0, -105%, 0); pointer-events: none; z-index: -1;}
.main-navigation li.menu-btn a:hover span,
.common-btn.white-btn.fill-btn:hover span { transform: rotate(45deg) translate3d(0, -165%, 0); }
.common-btn span { background-color: var(--secondary-color); position: absolute; display: block; top: 104%; left: -125%; width: 160%; height: 600%; z-index: 1; -webkit-transform: rotate(45deg) translate3d(0, 0, 0); transform: rotate(45deg) translate3d(0, 0, 0); -webkit-transition: .75s cubic-bezier(.24,.69,.12,.9); -o-transition: .75s cubic-bezier(.24, .69, .12, .9); transition: .75s cubic-bezier(.24,.69,.12,.9); pointer-events: none; z-index: -1;}
.common-btn:hover span { -webkit-transition: .75s cubic-bezier(.1,.48,.25,.86); -o-transition: .75s cubic-bezier(.1, .48, .25, .86); transition: .75s cubic-bezier(.1,.48,.25,.86); -webkit-transform: rotate(45deg) translate3d(0, -100%, 0); transform: rotate(45deg) translate3d(0, -105%, 0);}
.common-btn.white-btn { border-color: var(--primary-color); background-color: transparent; color: var(--primary-color);}
.common-btn.white-btn.fill-btn { color: var(--black-color);}
.common-btn.white-btn span,
.common-btn.white-btn.fill-btn span,
.common-btn.white-btn::before,
.common-btn.white-btn::after { background-color: var(--primary-color);}
.common-btn.white-btn.fill-btn:hover { color: var(--primary-color);}
.common-btn.white-btn:hover { color: var(--black-color);}
.bg-img { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; object-fit: cover; object-position: center center;}
img { max-width: 100%; height: auto;}
.seprator-title span { position: relative; display: inline-block;}
.seprator-title span::before { content: ""; position: absolute; width: 100%; height: 3px; background: url(assets/images/title-line.svg) no-repeat center center / cover; bottom:8px; left: 0px; display: block;}
.sec-title h6 { margin-bottom: 10px;}
.slick-dots { line-height: 0px;}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input[type=number] { -moz-appearance: textfield; }
.main-container { padding-top: 100px;}
.admin-bar header { top: 30px; }
.f-button { background-color: rgb(255 255 255 / 0.2);}
.fancybox__content { padding: 0px !important}
.has-youtube .fancybox__content { height: 100vh !important; width: auto !important;}
/* slider arrow css  */
.flickity-prev-next-button,
.common-arrow .slick-prev, 
.common-arrow .slick-next { background: url(assets/images/left-slider-arrow.svg) no-repeat center center / 28px 28px !important; width: 58px !important; height: 50px !important; border: 1px solid var(--gray-100) !important; -webkit-clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px)) !important; clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px)) !important; overflow: hidden !important; z-index: 2 !important; opacity: 0.6 !important; transition-duration: 0.3s;}
.flickity-prev-next-button:hover,
.common-arrow .slick-prev:hover,
.common-arrow .slick-next:hover { opacity: 1 !important;}
.flickity-prev-next-button.previous:hover,
.common-arrow .slick-prev:hover { background-image: url(assets/images/left-slider-hover-arrow.svg) !important; }
.flickity-prev-next-button.next,
.common-arrow .slick-next { background-image: url(assets/images/right-slider-arrow.svg) !important;}
.flickity-prev-next-button.next:hover,
.common-arrow .slick-next:hover { background-image: url(assets/images/right-slider-hover-arrow.svg) !important; }
.flickity-prev-next-button.previous::before,
.flickity-prev-next-button.previous::after,
.common-arrow .slick-prev::before,
.common-arrow .slick-prev::after,
.flickity-prev-next-button.next::before,
.flickity-prev-next-button.next::after,
.common-arrow .slick-next::before,
.common-arrow .slick-next::after { content: "" !important; position: absolute !important; background-color: var(--gray-100) !important; width: 60px !important; height: 2px !important; -webkit-transform: rotate(45deg) !important; -ms-transform: rotate(45deg) !important; transform: rotate(45deg) !important;}
.flickity-prev-next-button.previous::before,
.flickity-prev-next-button.next::before,
.common-arrow .slick-prev::before,
.common-arrow .slick-next::before { top: 0 !important; right: -22px !important;}
.flickity-prev-next-button.previous::after,
.flickity-prev-next-button.next::after,
.common-arrow .slick-prev::after,
.common-arrow .slick-next::after { bottom: 0 !important; left: -22px !important;}
/* flickity arrow css */
.flickity-prev-next-button { border-radius: 0px !important;}
.flickity-prev-next-button svg { display: none;}
/* slider arrow css */
/* common css end */

/* spinner */
.submit-btn-wrapper { margin-top: 24px; position: relative; }
.submit-btn-wrapper .wpcf7-spinner { margin: 0px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) !important; display: inline-block !important; background-color: #23282d !important; width: 24px !important; height: 24px !important;}
form.submitting .wpcf7-spinner { visibility: visible; }
.submitting .wpcf7-submit,
.submitting .common-btn { pointer-events: none; color: transparent !important; }
.submitting .wpcf7-spinner + span { display: none; }

/* massege */
.wpcf7-response-output { margin: 10px 0px 0px !important; font-size: 12px !important; line-height: 20px !important; border: none !important; color: var(--white); text-align: center; border-radius: 5px;}
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output { background: #ffb900;color: var(--black-color);}
.wpcf7 form.failed .wpcf7-response-output { background: #f05858;color: var(--white);}
.wpcf7 form.sent .wpcf7-response-output { background: #326767;color: var(--white);}
.wpcf7-not-valid-tip { font-size: 12px;line-height: 14px; text-align: left; margin: 5px 0 0 10px;  } 
.wpcf7 form .wpcf7-response-output { font-size: 12px;}
.wpcf7-form-control-wrap{position: unset;}

/* header css start */
header { padding-block: 14px; padding-inline: 4vw; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid rgba(255,255,255,0.20); position: fixed; top: 0px; left: 0px; width: 100%; z-index: 100; transition: all 0.3s ease-in-out;}
.nav-down { transform: translateY(0%); }
.nav-up { transform: translateY(-100%); }
header.fixed-header { background-color: var(--bg-primary-color); }
header .custom-logo { max-width: 254px; width: 100%;}
.main-navigation ul,
.menu-footer-menu-container ul { margin: 0px; padding: 0px; list-style: none; display: flex; align-items: center; }
.main-navigation ul { gap: 78px; }
.menu-footer-menu-container ul { gap: 56px;}
.main-navigation li,
.menu-footer-menu-container ul li { line-height: 0px;}
.main-navigation li a,
.common-btn,
.menu-footer-menu-container ul li a { font-size: 17px; line-height: 26px; letter-spacing: 0.32px; text-transform: uppercase; transition-duration: 0.3s; text-decoration: unset; }
.main-navigation li a { font-weight: 600;}
.main-navigation li a,
.menu-footer-menu-container ul li a { color: var(--primary-color);}
.main-navigation li a:hover,
.menu-footer-menu-container ul li a:hover,
.menu-item a.active { color: var(--secondary-color); }
.main-navigation li.menu-btn { overflow: hidden;}
.site-title,
.site-description,
.entry-title { display: none;}
/* header css end */

/******************* home page css start ************************/
/* banner css start */
.home-banner { position: relative;}
.banner-slide { min-height: 100dvh;}
.banner-slide::before,.banner-slide::after { content: ""; position: absolute; width: 100%; height: 100%; top: 0px; left: 0px;}
.banner-slide::before {background: linear-gradient(0deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 20%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0.5) 90%);}
.banner-slide::after {background: linear-gradient(0deg, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6));}
.home-banner .seprator-title,
.banner-slide .seprator-title { max-width: 1036px; width: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); z-index: 5;}
.slide-desc,
.home-banner .slick-dots { padding-inline: 4vw; padding-bottom: 30px; }
.slide-desc { position: absolute; bottom: 0px; left: 0px; z-index: 5;}
.slide-desc p { max-width: 413px; width: 100%; color: var(--gray-90);}
.home-banner .slick-dots { bottom: 0px; display: flex; justify-content: flex-end; gap: 8px;}
.home-banner .slick-dots li,
.home-banner .slick-dots li button { margin: 0px; padding: 0px; width: 138px; height: 4px; background-color: rgba(255,255,255,0.30);}
.home-banner .slick-dots li button::before { display: none;}
.home-banner .slick-dots li.slick-active button { background-color: var(--primary-color);}

/* Flickity Banner */
.banner-content-wrapper { pointer-events: none;}
.flickity-slide { min-height: 100dvh; width: 100%;}
.flickity-slide.banner-slide img { position: absolute; top: 0; left:0; width: 100%; height: 100%; object-fit: cover; object-position: center center;}
.home-banner .flickity-page-dots { bottom: 0px; display: flex; justify-content: flex-end; gap: 8px; padding-bottom: 36px; padding-inline: 4vw;}
.home-banner .flickity-page-dots li { margin: 0px; padding: 0px; width: 138px; height: 4px; background-color: rgba(255, 255, 255, 0.30); border-radius: 0px; opacity: 1 !important; transition-duration: 0.3s;}
.home-banner .flickity-page-dots li.is-selected { background-color: var(--primary-color);}


/* banner css end */
/* about us css start */
.about-section .container { padding-block: 146px;}
.about-section::before,.about-section::after,
.about-section .container::before, .about-section .container::after,
.summary-card::before, .summary-card::after,
.what-we-do::before,.what-we-do::after,.what-we-do .overflow-hidden::before,.our-projects::after,.our-projects::before,.project-detail::before { content: ""; position: absolute; display: block;}
.about-section::before,
.about-section::after,
.what-we-do .overflow-hidden::before,
.our-projects::before,.project-detail::before { background: url(assets/images/about-left-pattern.svg) no-repeat center center / cover; width: 5vw; height: 148px; }
.about-section::before { left: 0px; top: 124px;}
.about-section::after { right: 0px; bottom: 44px; transform: scaleX(-1);}
.about-section .container::before { width: 40vw; height: 40px;  clip-path: polygon(8% 0, 90% 0, 100% 100%, 0% 100%); -webkit-clip-path: polygon(8% 0, 90% 0, 100% 100%, 0% 100%); bottom: 100%; left: 50%; transform: translateX(-50%); -webkit-transform: translateX(-50%); background: var(--bg-primary-color);}
.about-section .container::after,
.what-we-do::after,
.what-we-do::before,
.our-projects::after { width: 58vw; height: 40px; clip-path: polygon(5% 0, 95% 0, 100% 100%, 0% 100%); -webkit-clip-path: polygon(5% 0, 95% 0, 100% 100%, 0% 100%); background: var(--bg-secondary-color);}
.about-section .container::after { bottom: 0px; left: 100px; }
.about-section .sec-title { max-width: 770px; width: 100%;}
.about-cnt { display: flex; flex-direction: column; gap: 35px;}
.about-cnt { font-size: 18px; line-height: 24px;}
.summary-sec { margin-top: 160px;}
.summary-card { padding: 40px 32px 32px; height: 100%; background-color: var(--bg-box-color); display: flex; flex-direction: column; gap: 40px; position: relative;}
.summary-card::before,
.summary-card::after {border-left: 25px solid transparent; border-right: 25px solid transparent; border-bottom: 50px solid var(--bg-primary-color); width: 30px; height: 30px; top: -10px;}
.summary-card::before { right: -21px; transform: rotate(45deg); transform-origin: right;}
.summary-card::after { left: -21px; transform: rotate(-45deg); transform-origin: left;}
.summary-sec > div:first-child > .summary-card::after,
.summary-sec > div:last-child > .summary-card::before { display: none;} 
.summary-digit { font-size: 52px; line-height: 72px; font-weight: 600; color: var(--secondary-color); }
.summary-card .small-text { font-weight: 600; letter-spacing: 2px;}
/* about us css end */
/* what we do css start */
.what-we-do { padding-block: 146px; background-color: var(--bg-secondary-color); position: relative;}
.what-we-do::before,.what-we-do::after,.our-projects::after { top: 100%; transform: scaleY(-1); }
.what-we-do .overflow-hidden::before { left: 0px; top: 50%;}
.what-we-do::before { right: -51vw;}
.what-we-do::after { left: 3vw; }
.what-we-do-slider {margin-left: auto; padding-bottom: 90px; width:calc(100vw - (50vw - 830px));}
.what-we-do-slider .slick-track { display: flex !important; }
.what-we-do-slider .slick-slide { height: inherit !important; }
.what-we-do-slider .slick-slide > div,
.what-we-do-slider .slick-slide > div > div,
.what-we-do-slider .slick-slide > div > div .what-we-do-card { height: 100%; }
.what-we-do .sec-title { margin-bottom: 80px;}
.what-we-do-card { padding: 44px 64px 34px; width: 522px; border-right: 1px dotted #7A7A7A;}
.what-we-do-card .medium-text { font-size: 18px; line-height: 24px;}
.what-we-do-card .heading-6 { margin: 20px 0px 12px; font-weight: 600; color: var(--primary-color);}
.what-we-do-slider .slick-prev,
.what-we-do-slider .slick-next { top: auto; bottom: 0px; transform: unset}
.what-we-do-slider .slick-prev { left: 64px;}
.what-we-do-slider .slick-next { left: 146px; right: auto;}
.what-we-do-slider .slick-dots { width: 72vw; display: flex; bottom: 24px; left: 252px; background-color: rgba(255,255,255,0.08);}
.what-we-do-slider .slick-dots li { flex-grow: 1;}
.what-we-do-slider .slick-dots li,
.what-we-do-slider .slick-dots li button { margin: 0px; padding: 0px; height: 4px; background-color: transparent; transition-duration: .3s;}
.what-we-do-slider .slick-dots li button { width: 100%;}
.what-we-do-slider .slick-dots li button::before { display: none;}
.what-we-do-slider .slick-dots li.slick-active button { background-color: var(--secondary-color);}
/* Flickity Service Slider Style */
.flickity-service-slider .flickity-prev-next-button { top:100%; transform: translateY(-100%);}
.flickity-service-slider .flickity-prev-next-button.previous { left: 64px;}
.flickity-service-slider .flickity-prev-next-button.next { right: auto; left: 64px; transform: translate(120%, -100%);}
.flickity-service-slider .flickity-page-dots { bottom: 24px; padding-left: 240px; display: flex; padding-right: 60px;}
.flickity-service-slider .flickity-page-dots li { background: rgba(255,255,255,0.08); height:4px; border-radius: 0 !important; flex-grow: 1; display: flex-inline; margin: 0px; opacity: 1 !important;}
.flickity-service-slider .flickity-page-dots li.is-selected { background-color: var(--secondary-color);}


/* Flickity Project Slider Style */
.flickity-projects-slider { width: calc(50vw + 784px)}
.flickity-projects-slider .project-slide { width: calc(76vw); padding-right:4vw; transition-duration: 0.5s; }
.flickity-projects-slider .is-selected .project-slide { transform: scale(1) !important;}
.flickity-projects-slider .flickity-prev-next-button { top:100%; transform: translateY(-100%);}
.flickity-projects-slider .flickity-prev-next-button.previous { left: 48.5vw;}
.flickity-projects-slider .flickity-prev-next-button.next { right: auto; left: 48.5vw; transform: translate(120%, -100%);}

/* what we do css end */
/* our projects css start */
.our-projects { padding-block: 160px;}
.our-projects::after { background-color: var(--bg-primary-color); z-index: 1; right: 10vw;}
.our-projects::before { right: 0px; top: 160px; transform: scaleX(-1);}
.projects-slider { margin-left: auto; padding-left: 12px; width:calc(100vw - (50vw - 796px));}
.projects-slider .flickity-slider .project-slide,
.projects-slider .slick-slide { padding-right: 160px;}
.project-slide { width: 68vw; transform: scale(.8); -webkit-transform: scale(.8); transform-origin: left;}
.slick-active .project-slide { transform: scale(1); -webkit-transform: scale(1);}
.our-projects .sec-title { margin-bottom: 100px;}
.project-slide { gap: 28px;}
.project-img-container { width: 47vw; position: relative; flex-shrink: 0;}
.project-img-container .project-img { width: 100%; padding-top: 68%;} 
.project-cnt-sec { max-width: 372px; width: 100%;}
.project-cnt-sec .small-text { margin-bottom: 4px; font-weight: 600; color: var(--gray-100); letter-spacing: 2px;}
.project-name { margin-bottom: 12px; font-size: 28px; line-height: 40px; font-weight: 700; color: var(--secondary-color); }
.project-cnt { margin-bottom: 24px;}
.project-cnt p { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.projects-slider .slick-prev,
.projects-slider .slick-next { top: auto; bottom: 6px; transform: unset;}
.projects-slider .slick-prev { left: 49vw;}
.projects-slider .slick-next { left: calc(49vw + 82px); right: auto;}
/* our projects css end */
/* contact css start */
.contact-section { padding-top: 214px; padding-bottom: 166px; background-repeat: no-repeat; background-position: center center; background-size: cover; position: relative;}
.contact-section::before { content: ""; position: absolute; width: 100%; height: 100%; top: 0px; left: 0px; background: rgba(0, 0, 0, 0.78);}
.contact-dtl { display: flex; flex-direction: column; gap: 48px;}
.contact-label { margin-bottom: 20px; font-weight: 600; color: var(--gray-100); text-transform: uppercase; letter-spacing: 2px;}
.contact-info,
.contact-info a { color: var(--gray-90); }
.contact-info { display: flex; gap: 12px; align-items: center;}
.contact-label ~ p:not(:last-child) { margin-bottom: 16px;}
.contact-info a { transition-duration: 0.3s; text-decoration: underline;}
.contact-cnt { display: flex; flex-direction: column; justify-content: space-between;}
.contact-info a:hover { color: var(--secondary-color);}
.contact-section h6 { margin-bottom: 56px; font-size: 28px; line-height: 40px; color: var(--gray-95); letter-spacing: 2px;}
.form-group { margin-bottom: 32px;}
.form-control { padding: 20px 0px; font-size: 20px; line-height: 28px; color: var(--gray-100) !important; background-color: transparent; border-radius: 0px; border: transparent; border-bottom: 1px solid var(--gray-95); transition-duration: 0.3s;}
textarea.form-control { resize: none; height: 70px;}
.form-control.file-input { background: url(assets/images/file-icon.svg) no-repeat right center / 24px 24px;}
.form-control::-webkit-input-placeholder { font-size: 20px; line-height: 28px; color: var(--gray-80); letter-spacing: 2px; text-transform: capitalize;}
.form-control::-moz-placeholder { font-size: 20px; line-height: 28px; color: var(--gray-80); letter-spacing: 2px; text-transform: capitalize;}
.form-control:-ms-input-placeholder { font-size: 20px; line-height: 28px; color: var(--gray-80); letter-spacing: 2px; text-transform: capitalize;}
.form-control:-moz-placeholder { font-size: 20px; line-height: 28px; color: var(--gray-80); letter-spacing: 2px; text-transform: capitalize;}
.form-control:focus { padding-left: 20px; outline: none; box-shadow: none; background-color: transparent; border-bottom-color: var(--secondary-color);}
.form-control.file-input .wpcf7-form-control-wrap { position: static;}
.file-input input { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; opacity: 0;}
.placeholder-text { color: var(--gray-80); }
.common-btn .wpcf7-submit { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; background-color: transparent; border: transparent; color: transparent;}
.focus-input { position: relative; z-index: 1;}
.focus-input::before { content: ""; background-color: rgba(255, 255, 255, 0.23); filter: blur(28px); -webkit-filter: blur(28px); clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 20px 100%, 0 calc(100% - 0px)); -webkit-clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 20px 100%, 0 calc(100% - 0px)); position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; z-index: -1;}
.focus-input .form-control { color: var(--secondary-color) !important;}
.file-preview-item { display: flex; align-items: center; }
.file-name { font-size: 15px; margin-right: 8px; }
.remove-file { background-color: #e74c3c; color: white; border: none; cursor: pointer; border-radius: 3px; line-height: 18px; font-weight: bold; display: inline-flex; justify-content: center; align-items: center; transition-duration: 0.3s; }
.remove-file:hover { background-color: #c0392b; }
/* contact css end */
/******************* home page css end ************************/

/******************* project inner page css start ************************/
.project-bannenr { padding-block: 44px; border-bottom: 1px solid rgba(255,255,255,0.20); color: var(--gray-100);}
.project-detail::before { left: 0px; top: 30%;}
.breadcrumbs li { padding-right: 38px; letter-spacing: 2px; color: var(--gray-100); text-transform: capitalize; position: relative;}
.breadcrumbs li:not(:last-child):after { content: ""; background: url(assets/images/right-arrow.svg) no-repeat center center / cover; width: 24px; height: 24px; position: absolute; top: calc(50% - 10px); right: 8px; display: block;}
.breadcrumbs li a { color: var(--gray-80); transition-duration: 0.3s;}
.breadcrumbs li a:hover { color: var(--gray-100);}
.project-bannenr .heading-3 { margin: 16px 0px 12px; color: var(--secondary-color); text-transform: uppercase; font-weight: 700;}
.project-detail .heading-6,
.project-bannenr p,
.project-detail .heading-3 { letter-spacing: 2px;}
.project-detail,
.project-detail .heading-6  { color: var(--gray-100); }
.project-detail { padding-top: 56px; padding-bottom: 160px; }
.project-detail .heading-6 { margin-bottom: 4px;}
.project-cnt-info { display: flex; flex-direction: column; gap: 36px; position: sticky; top: 100px; left: 0px;}
.project-detail .heading-3 { margin-bottom: 32px; font-size: 32px; line-height: 44px; font-weight: 500;}
.project-gallary { display: flex; flex-direction: column; gap: 56px;}
.gallary-conatiner { padding-top: 54%;}
.gallary-conatiner::before { content: ""; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.36); position: absolute; top: 0px; left: 0px; display: block; z-index: 1;}
.gallery .gallary-conatiner::before { display: none;}
.play-btn { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%); z-index: 2;}
.gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.gallery-item { width: 100%; overflow: hidden; }
.gallery-item:nth-child(10n + 1) { grid-column: 1 / 4; }
.gallery-item:nth-child(10n + 2),
.gallery-item:nth-child(10n + 7) { grid-column: 1 / 3; }
.gallery-item:nth-child(10n + 3),
.gallery-item:nth-child(10n + 8) { grid-column: 3 / 4; }
.gallery-item:nth-child(10n + 4) { grid-column: 1 / 2; }
.gallery-item:nth-child(10n + 5) { grid-column: 2 / 3; }
.gallery-item:nth-child(10n + 6) { grid-column: 3 / 3; }
.gallery-item:nth-child(10n + 9) { grid-column: 1 / 2; }
.gallery-item:nth-child(10n + 10) { grid-column: 2 / 4; }
.gallery-item:nth-child(10n + 2) .gallary-conatiner,
.gallery-item:nth-child(10n + 7) .gallary-conatiner,
.gallery-item:nth-child(10n + 10) .gallary-conatiner { padding-top: 74%;}
.gallery-item:nth-child(10n + 4) .gallary-conatiner { padding-top: 121%;}
.gallery-item img { transition-duration: 1000ms;}
.gallery-item:hover img { transform: scale(1.1);}
.impresses-sec { padding-block: 44px; background-color: var(--bg-box-color); position: relative;}
.impresses-sec::before,
.impresses-sec::after { content: ""; position: absolute; display: block; }
.impresses-sec::before { width: 20.5vw; height: 20px; background: var(--bg-primary-color); clip-path: polygon(0 0, 95% 0, 100% 100%, 0% 100%); -webkit-clip-path: polygon(0 0, 95% 0, 100% 100%, 0% 100%); top: 0px; left: 0px; transform: scaleY(-1); -webkit-transform: scaleY(-1);}
.impresses-sec::after { width: 40vw; height: 20px; background: var(--bg-secondary-color); clip-path: polygon(3% 0, 98% 0, 100% 100%, 0% 100%); -webkit-clip-path:polygon(3% 0, 98% 0, 100% 100%, 0% 100%); left: 50%; transform: translateX(-50%) scaleY(-1); -webkit-transform: translateX(-50%) scaleY(-1); top: 100%;}
.impresses-sec .heading-6 { margin-bottom: 28px; font-family: var(--orbitron); font-weight: 500;}
/******************* project inner page css end ************************/

/****************** common page content css start *********************/
.common-padding { padding-block: 80px;}
.common-page-cnt h1, .common-page-cnt h2, .common-page-cnt h3, .common-page-cnt h4, .common-page-cnt h5, .common-page-cnt h6 { margin-top: 24px; margin-bottom: 16px; font-weight: 600; text-transform: capitalize; color: var(--gray-100);}
.common-page-cnt p, .common-page-cnt ul, .common-page-cnt ol, .common-page-cnt a { margin-bottom: 16px; color: var(--gray-100);}
.common-page-cnt a:hover { color: var(--secondary-color);}
.common-page-cnt ul,.common-page-cnt ol { padding-left: 20px;}
.common-page-cnt ul { list-style: disc; }
.common-page-cnt ol { list-style: decimal; }
.common-page-cnt h1 { font-size: 32px; line-height: 44px; }
.common-page-cnt h2 { font-size: 24px; line-height: 36px; }
.common-page-cnt h3 { font-size: 22px; line-height: 32px; }
.common-page-cnt h4 { font-size: 20px; line-height: 32px; }
.common-page-cnt h5 { font-size: 18px; line-height: 28px; }
.common-page-cnt h6 { font-size: 16px; line-height: 24px; }
/****************** common page content css end *********************/

/* 404 page css start */
.not-found-page h1,
.not-found-page p { color: var(--gray-100);}
.not-found-page h1 { font-size: 128px; line-height: 1; font-weight: 800; }
.not-found-page p { margin-top: 16px; margin-bottom: 24px; }
/* 404 page css end */

/* footer css start */
.footer-content { padding-block: 100px; text-align: center; background-color: var(--black-color);}
.footer-title-btn-sec { margin: 0px auto 104px; max-width: 1036px; width: 100%;}
.footer-title-btn-sec .common-btn { margin-top: 30px;}
.copyright-text,
.menu-privacy-menu-container ul { font-size: 14px; line-height: 22px; letter-spacing: 0.96px; color: var(--gray-80);}
footer a { color: var(--gray-80); transition-duration: 0.3s;} 
footer a:hover { color: var(--secondary-color);}
.menu-privacy-menu-container ul { display: flex; align-items: center; gap: 44px;}
.footer-img-sec { padding-top: 21%; overflow: hidden;}
.footer-img-sec .footer-bg img { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; object-fit: cover; object-position: top right;}
.footer-img-text  { position: absolute; top: 0px; right: -90px; z-index: 1;}
/* footer css end */

/* media query start */
@media(min-width:1600px){
	.container { max-width: 1568px; }
}
@media(max-width:1599px){
/* common css start */
body { font-size: 18px; line-height: 26px;}
.heading-1 { font-size: 50px; line-height: 70px;}
.heading-2 { font-size: 42px; line-height: 62px;}
.heading-3 { font-size: 30px; line-height: 46px;}
.heading-4 { font-size: 28px; line-height: 40px;}
.heading-6 { font-size: 20px; line-height: 30px;}
.main-navigation li.menu-btn a, .common-btn { padding-block: 8px; padding-inline: 20px; min-width: 152px;}
.medium-text { font-size: 20px; line-height: 28px;}
.small-text { font-size: 14px; line-height: 22px;}
.main-container { padding-top: 74px;}
/* common css end */

/* header css start */
header { padding-block: 8px; padding-inline: 2vw;}
header .custom-logo { max-width: 200px;}
.main-navigation ul { gap: 58px;}
.main-navigation li a, .common-btn, .menu-footer-menu-container ul li a { font-size: 16px; line-height: 24px;}
/* header css end */
/***************** home page css start **************/
/* banner css start */
.slide-desc p { max-width: 404px;}
.home-banner .flickity-page-dots,
.slide-desc, .home-banner .slick-dots { padding-inline: 2vw;}
.home-banner .flickity-page-dots li,
.home-banner .slick-dots li, .home-banner .slick-dots li button { width: 100px;}
/* banner css end */
/* about us css start */
.about-cnt { gap: 28px; font-size: 18px; line-height: 24px;}
.summary-sec { margin-top: 130px;}
.summary-card { padding: 30px 26px 26px; gap: 30px;}
.summary-digit { font-size: 42px; line-height: 62px;}
/* about us css end */
/* what we do css start */
.what-we-do { padding-block: 130px;}
.what-we-do .sec-title { margin-bottom: 70px;}
.what-we-do-card { padding: 34px 44px 24px; width: 460px;}
.what-we-do-slider { width: calc(100vw - (50vw - 690px));}
.about-section::before, .about-section::after, .what-we-do .overflow-hidden::before,.our-projects::before,.project-detail::before { width: 3vw; height: 88px;}
.what-we-do-slider .slick-prev { left: 44px;}
.what-we-do-slider .slick-next { left: 126px;}
.what-we-do-slider .slick-dots { left: 222px; width: 77vw;}
/* Flickity Service Slider Style */
.flickity-service-slider .flickity-prev-next-button.previous,
.flickity-service-slider .flickity-prev-next-button.next { left: 44px;}
.flickity-service-slider .flickity-page-dots { padding-left: 220px; padding-right: 40px;}
/* what we do css end */
/* our projects css start */
.our-projects { padding-bottom: 140px;}
.our-projects .sec-title { margin-bottom: 90px;}
.project-slide { width: 952px; transform: scale(.7); -webkit-transform: scale(.7);}
.projects-slider .slick-slide { padding-right: 120px;}
.projects-slider .slick-prev { left: 594px}
.projects-slider .slick-next { left: 672px;}
.project-cnt { margin-bottom: 22px;}
.project-name { margin-bottom: 10px; font-size: 26px; line-height: 38px;}



.flickity-projects-slider { width: calc(50vw + 660px)}
/* our projects css end */
/* contact css start */
.contact-section { padding-top: 130px; padding-bottom: 120px;}
.contact-section h6 { margin-bottom: 36px; font-size: 22px; line-height: 30px;}
.form-group { margin-bottom: 28px;}
.form-control { padding: 16px 0px; font-size: 18px; line-height: 26px;}
.form-control::-webkit-input-placeholder { font-size: 18px; line-height: 26px;}
.form-control::-moz-placeholder { font-size: 18px; line-height: 26px;}
.form-control:-ms-input-placeholder { font-size: 18px; line-height: 26px;}
.form-control:-moz-placeholder { font-size: 18px; line-height: 26px;}
.contact-label { margin-bottom: 18px;}
/* contact css end */
/***************** home page css end **************/

/***************** project inner page css start **************/
.project-bannenr { padding-block: 36px;}
.project-detail { padding-bottom: 120px;}
.project-detail .heading-3 { margin-bottom: 22px; font-size: 26px; line-height: 36px;}
/***************** project inner page css end **************/

/* footer css start */
.footer-content { padding-block: 90px;}
.footer-title-btn-sec { margin-bottom: 84px; max-width: 956px;}
/* footer css end */
}
@media(max-width:1399px){
/* common css start */
body { font-size: 16px; line-height: 24px;}
.heading-1 { font-size: 44px; line-height: 64px;}
.heading-2 { font-size: 38px; line-height: 54px;}
.heading-3 { font-size: 26px; line-height: 42px;}
.heading-4 { font-size: 24px; line-height: 36px;}
.heading-6 { font-size: 18px; line-height: 28px;}
.medium-text { font-size: 18px; line-height: 26px;}
.main-container { padding-top: 68px;}
/* common css end */

/* header css start */
header .custom-logo { max-width: 180px;}
.main-navigation li a, .common-btn, .menu-footer-menu-container ul li a { font-size: 14px; line-height: 22px;}
.main-navigation ul { gap: 48px;}
/* header css end */

/***************** home page css start **************/
/* banner css start */
.home-banner h1 { max-width: 730px; margin: 0px auto;}
.slide-desc p { max-width: 334px;}
.home-banner .flickity-page-dots li,
.home-banner .slick-dots li, .home-banner .slick-dots li button { width: 90px;}
/* banner css end */
/* about us css start */
.about-section .container { padding-top: 110px;}
.summary-sec { margin-top: 120px;}
.summary-digit { font-size: 38px; line-height: 54px;}
.summary-card { gap: 22px;}
/* about us css end */
/* what we do css start */
.what-we-do { padding-block: 120px;}
.what-we-do-slider { padding-bottom: 60px; width: calc(100vw - (50vw - 592px));}
/* what we do css end */
/* our projects css start */
.our-projects .sec-title { margin-bottom: 90px;}
.projects-slider .slick-slide { padding-right: 80px;}


.flickity-projects-slider { width: calc(50vw + 570px)}
/* our projects css end */
/* contact us css start */
.contact-section { padding-top: 120px; padding-bottom: 110px;}
.footer-title-btn-sec { margin-bottom: 74px; max-width: 796px;}
.contact-section h6 { font-size: 20px; line-height: 28px;}
/* contact us css end */
/***************** home page css end **************/

/***************** project inner page css start **************/
.project-bannenr { padding-block: 32px;}
.project-gallary { gap: 40px;}
.project-bannenr .heading-3 { margin: 12px 0px 8px;}
.project-detail .heading-3 { margin-bottom: 18px; font-size: 22px; line-height: 32px;}
/***************** project inner page css end **************/

/****************** common page content css start *********************/
.common-padding { padding-block: 70px;}
.common-page-cnt h1 { font-size: 30px; line-height: 40px; }
.common-page-cnt p, .common-page-cnt ul, .common-page-cnt ol, .common-page-cnt a { font-size: 16px; line-height: 24px;}
/****************** common page content css end *********************/

/****************** 404 page css start *********************/
.not-found-page h1 { font-size: 96px;}
/****************** 404 page css end *********************/

/* footer css start */
.footer-content { padding-block: 80px;}
.footer-img-text img { max-width: 540px;}
.menu-privacy-menu-container ul { gap: 28px;}
.menu-footer-menu-container ul { gap: 40px;}
/* footer css end */
}
@media(max-width:1199px){
/* common css start */
.heading-1 { font-size: 40px; line-height: 58px;}
.heading-2 { font-size: 34px; line-height: 48px;}
.heading-3 { font-size: 22px; line-height: 36px;}
.heading-4 { font-size: 20px; line-height: 30px;}
.main-navigation li.menu-btn a, .common-btn { min-width: 134px;}
/* common css end */

/* header css start */
.main-navigation ul { gap: 38px;}
/* header css end */

/***************** home page css start **************/
/* banner css start */
.home-banner .slick-dots li, .home-banner .slick-dots li button { width: 70px;}
/* banner css end */
/* about css start */
.summary-sec { margin-top: 100px;}
.summary-card { padding: 28px 20px 20px;}
.summary-card { gap: 18px;}
.summary-digit { font-size: 34px; line-height: 48px;}
.about-section::before, .about-section::after, .what-we-do .overflow-hidden::before,.our-projects::before,.project-detail::before { height: 68px;}
/* about css end */
/* what we do css start */
.what-we-do { padding-block: 100px;}
.what-we-do .sec-title { margin-bottom: 60px;} 
.what-we-do-slider { width: calc(100vw - (50vw - 500px));}
.what-we-do-card { padding: 24px 34px 14px; width: 410px;}
.what-we-do-slider .slick-dots { left: 210px;}
/* Flickity Service Slider Style */
.flickity-service-slider .flickity-prev-next-button.previous,
.flickity-service-slider .flickity-prev-next-button.next { left: 34px;}
.flickity-service-slider .flickity-page-dots { padding-left: 190px; padding-right: 30px;}
/* what we do css end */
/* our projects css start */
.our-projects { padding-top: 140px; padding-bottom: 120px;}
.our-projects .sec-title { margin-bottom: 70px;}
.project-slide { width: 866px;}
.projects-slider .slick-slide { padding-right: 30px;}
.project-name { margin-bottom: 8px; font-size: 24px; line-height: 34px;}
.projects-slider .slick-prev { left: 507px;}
.projects-slider .slick-next { left: 586px;}


.flickity-projects-slider { width: calc(50vw + 480px)}
.flickity-projects-slider .project-slide {  width: 86vw;}
/* our projects css end */
/* contact us css start */
.contact-section { padding-top: 100px; padding-bottom: 90px;}
.form-control { padding: 14px 0px; font-size: 16px; line-height: 24px;}
.form-control::-webkit-input-placeholder { font-size: 16px; line-height: 24px;}
.form-control::-moz-placeholder { font-size: 16px; line-height: 24px;}
.form-control:-ms-input-placeholder { font-size: 16px; line-height: 24px;}
.form-control:-moz-placeholder { font-size: 16px; line-height: 24px;}
textarea.form-control { height: 53px;}
/* contact us css end */
/***************** home page css end **************/

/***************** project inner page css start **************/
.project-bannenr { padding-block: 24px;}
.project-cnt-info { gap: 26px;}
.project-bannenr .heading-3 { margin: 8px 0px 6px;}
.breadcrumbs li:not(:last-child):after { width: 18px; height: 18px; top: calc(50% - 8px);}
.breadcrumbs li { padding-right: 32px;}
.project-detail .heading-3 { margin-bottom: 16px; font-size: 20px; line-height: 28px;}
.play-btn img { max-width: 100px;}
/***************** project inner page css end **************/

/****************** common page content css start *********************/
.common-padding { padding-block: 56px;}
.common-page-cnt h1 { font-size: 28px; line-height: 40px; }
/****************** common page content css end *********************/

/****************** 404 page css start *********************/
.not-found-page h1 { font-size: 72px;}
/****************** 404 page css end *********************/

/* footer css start */
.footer-content { padding-block: 70px;}
.footer-title-btn-sec { margin-bottom: 64px; max-width: 686px;}
.menu-privacy-menu-container ul { padding: 0px; gap: 10px;}
.menu-footer-menu-container ul { gap: 24px;}
.copyright-text, .menu-privacy-menu-container ul { font-size: 12px; line-height: 18px;}
.footer-img-text img { max-width: 420px;}
.footer-img-text { right: -70px;}
/* footer css end */
}
@media(max-width:991px){
/* common css start */
body { font-size: 14px; line-height: 22px;}
.heading-1 { font-size: 34px; line-height: 52px;}
.heading-2 { font-size: 30px; line-height: 42px;}
.heading-3 { font-size: 20px; line-height: 34px;}
.heading-6 { font-size: 16px; line-height: 26px;}
.what-we-do-card .medium-text,
.medium-text { font-size: 16px; line-height: 24px;}
.common-arrow .slick-prev, .common-arrow .slick-next { width: 50px; height: 44px;}
.main-container { padding-top: 62px;}
/* common css end */
.flickity-prev-next-button, .common-arrow .slick-prev { width: 44px !important; height: 38px !important;}
/* header css start */
header .custom-logo { max-width: 160px;}
.main-navigation ul { gap: 28px;}
/* header css end */

/****************** home page css start *****************/
/* banner css start */
.slide-desc p { max-width: 314px;}
.home-banner .flickity-page-dots li,
.home-banner .slick-dots li, .home-banner .slick-dots li button { width: 60px;}
/* banner css end */
/* about css start */
.about-section .container { padding-top: 80px; padding-bottom: 120px;}
.about-section .container::before { bottom: 99%;}
.about-section .container::after { bottom: -10px;}
.about-cnt { gap: 24px;}
.summary-sec { margin-top: 80px;}
.summary-card { padding: 28px 14px 14px; gap: 12px;}
.summary-digit { font-size: 30px; line-height: 42px;}
/* about css end */
/* what we do css start */
.what-we-do { padding-block: 80px;}
.what-we-do::before, .what-we-do::after { top: 99%;}
.what-we-do .sec-title { margin-bottom: 50px;}
.what-we-do-slider { padding-bottom: 70px; width: calc(100vw - (50vw - 368px));}
.what-we-do-card { padding: 16px 20px; width: 360px;}
.what-we-do-card img { width: 50px;}
.what-we-do-slider .slick-prev { left: 24px;}
.what-we-do-slider .slick-next { left: 92px;}
.what-we-do-slider .slick-dots { left: 170px; width: 72vw; bottom: 18px;}
.common-arrow .slick-prev, .common-arrow .slick-next { background-size: 22px 22px;}
/* Flickity Service Slider Style */
.flickity-service-slider .flickity-prev-next-button.previous,
.flickity-service-slider .flickity-prev-next-button.next { left: 20px;}
.flickity-service-slider .flickity-page-dots { padding-left: 140px; padding-right: 20px; bottom: 17px;}
/* what we do css end */
/* our projects css start */
.our-projects { padding-top: 120px; padding-bottom: 170px;}
.our-projects::after  { top: 98%; right: 3vw;}
.our-projects .sec-title { margin-bottom: 50px;}
.project-name { margin-bottom: 6px; font-size: 22px; line-height: 30px;}
.projects-slider { padding-left: 0px; width: 100%;}
.project-slide { width: 100%;}
.project-cnt-sec { max-width: 300px;}
.projects-slider .slick-prev, .projects-slider .slick-next { bottom: -90px;}
.projects-slider .slick-prev { left: 307px;}
.projects-slider .slick-next { left: 376px;}

.flickity-projects-slider { width: calc(50vw + 360px)}
.flickity-projects-slider .flickity-prev-next-button { top: calc(100% + 60px);}
.flickity-projects-slider .flickity-prev-next-button.previous,
.flickity-projects-slider .flickity-prev-next-button.next {left:0}
/* our projects css end */
/* contact css start */
.contact-section { padding-top: 90px; padding-bottom: 80px;}
.contact-section h6 { margin-bottom: 32px; font-size: 18px; line-height: 26px; } 
.contact-dtl { gap: 38px;}
.contact-cnt { justify-content: center; gap: 40px;}
/* contact css end */
/****************** home page css end *****************/

/***************** project inner page css start **************/
.project-bannenr { padding-block: 20px;}
.project-bannenr .heading-3 { margin: 6px 0px 4px;}
.project-detail { padding-top: 46px; padding-bottom: 100px;}
.project-cnt-info { gap: 24px;}
.project-detail .heading-3 { margin-bottom: 14px; font-size: 18px; line-height: 26px;}
.impresses-sec .heading-6 { margin-bottom: 26px;}
.play-btn img { max-width: 80px;}
.impresses-sec { padding-bottom: 28px;}
/***************** project inner page css end **************/

/****************** common page content css start *********************/
.common-padding { padding-block: 48px;}
.common-page-cnt h1 { font-size: 24px; line-height: 36px; }
.common-page-cnt h2 { font-size: 20px; line-height: 32px; }
.common-page-cnt h3 { font-size: 18px; line-height: 28px; }
.common-page-cnt h4 { font-size: 16px; line-height: 24px; }
/****************** common page content css end *********************/

/* footer css start */
.footer-content { padding-block: 60px;}
.footer-title-btn-sec { margin-bottom: 44px;}
.footer-links-sec { flex-wrap: wrap; row-gap: 30px;}
.footer-links-sec section:first-child { order: 3;}
.footer-links-sec section:nth-child(2) { order: 1;}
.footer-links-sec section:last-child { order: 2;}
.footer-links-sec section:first-child { width: 100%;}
.footer-img-text img { max-width: 300px;}
.footer-img-text { right: -50px;}
}
@media(max-width:767px){
/* common css start */
.heading-1 { font-size: 30px; line-height: 46px;}
.heading-2 { font-size: 24px; line-height: 36px;}
.heading-3 { font-size: 18px; line-height: 30px;}
.heading-4 { font-size: 18px; line-height: 30px;}
.heading-6 { font-size: 18px; line-height: 28px;}
.common-arrow .slick-prev, .common-arrow .slick-next { width: 44px; height: 40px;}
.common-arrow .slick-prev, .common-arrow .slick-next { background-size: 20px 20px;}
.main-container { padding-top: 65px;}
/* common css end */

/* header css start */
header { padding: 12px;}
header .custom-logo { max-width: 140px;}
.menu-main-menu-container { position: fixed; z-index: -1; top: 0; left: 0; height: 0vh; width: 100%; background-color: rgba(0, 0, 0, 0.8); overflow: hidden; transition: all 0.2s ease-in-out;}
ul.main-navigation { padding: 0px;}
.main-navigation .menu-toggle { padding: 0px; position: relative; width: 40px; height: 40px; cursor: pointer; justify-content: center; align-items: end; flex-direction: column; background: none; border: 0;}
.main-navigation .menu-toggle span { height: 2px; margin: 3px 5px; width: 32px; display: block; background: #fff; -webkit-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; transform-origin: right center;}
.main-navigation .menu-toggle span:nth-child(2) { width: 22px;}
.main-navigation.toggled .menu-toggle span:nth-child(1) { width: 23px; -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg);}
.main-navigation.toggled .menu-toggle span:nth-child(2) { opacity: 0; }
.main-navigation.toggled .menu-toggle span:nth-child(3) { width: 23px; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg);}
.menu-main-menu-container { position: fixed; z-index: -1; top: 0; left: 0; height: 0vh; width: 100%; background-color: rgba(0, 0, 0, 0.8); overflow: hidden; transition: all 0.2s ease-in-out; backdrop-filter: blur(3px);}
.toggled .menu-main-menu-container { height: 100vh; }
.nav-menu { flex-direction: column; height: 100%; align-items: center; justify-content: center; gap: 25px;}
.nav-menu li a { font-size: 22px; }
.main-navigation li.menu-btn .widget_block a  { padding-block: 4px; padding-inline: 14px; min-width: auto;}
.main-navigation.mobile-btn { margin-left: auto; margin-right: 14px;} 
/* header css end */

/*********** home page css start ************/
/* banner css start */
.home-banner h1 { max-width: 375px;}
.slide-desc { padding-inline: 9vw; padding-bottom: 75px; width: 100%;}
.slide-desc p { max-width: 307px; text-align: center; margin: 0 auto;}
.home-banner .slick-dots { padding-bottom: 60px; justify-content: center;}
.home-banner .flickity-page-dots li,
.home-banner .slick-dots li, .home-banner .slick-dots li button { width: 20px; height: 3px;} 
.about-section .container::before { width: 70vw; bottom: 98%;}
.about-section::before, .about-section::after, .what-we-do .overflow-hidden::before,.our-projects::before,.project-detail::before { width: 8vw;}
.our-projects::before { top: 100px;}
.home-banner .flickity-page-dots { padding-bottom: 50px; justify-content: center;}
/* banner css end */
/* about css start */
.about-section .container { padding-top: 60px; padding-bottom: 100px;}
.about-section .container::after { width: 60vw; bottom: -12px;}
.about-section .sec-title { margin-bottom: 30px;}
.summary-sec { margin-top: 40px;}
.summary-sec { row-gap: 30px;}
.summary-sec > div:first-child > .summary-card::after,
.summary-sec > div:last-child > .summary-card::before { display: block;}
.summary-digit { font-size: 28px; line-height: 40px;}
/* about css end */
/* what we do css start */
.what-we-do { padding-block: 70px;}
.what-we-do-slider { padding-bottom: 60px; width: calc(100vw - (50vw - 278px));}
.what-we-do::before, .what-we-do::after { top: 97%;}
.what-we-do .sec-title { margin-bottom: 40px;}
.what-we-do-card { padding-block: 8px; width: 320px;}
.what-we-do-card .heading-6 { margin: 18px 0px 10px;}
.what-we-do-slider .slick-next { left: 84px;}
.what-we-do-slider .slick-dots { left: 150px; width: 50vw; bottom: 16px;}
/* what we do css end */
/* our projects css start */
.our-projects { padding-top: 100px; padding-bottom: 160px;}
.projects-slider,
.project-img-container { width: 100%;}
.our-projects::after { top: 98%;}
.project-slide { flex-direction: column; width: 280px; transform: scale(1);}
.project-name { font-size: 20px; line-height: 28px;}
.projects-slider .slick-prev { left: calc(50% - 50px);}
.projects-slider .slick-next { left: calc(50% + 14px);}
/* our projects css end */
.flickity-projects-slider { width: calc(100vw - (50vw - 258px))}
.flickity-projects-slider .project-slide { width: 500px;}
.flickity-projects-slider .flickity-prev-next-button { top: calc(100% + 80px);}
.flickity-projects-slider .flickity-prev-next-button.previous,
.flickity-projects-slider .flickity-prev-next-button.next {left:0}

/* contact css start */
.contact-section { padding-top: 80px; padding-bottom: 60px;}
.contact-cnt { gap: 24px;}	
.contact-dtl { margin-bottom: 50px; gap: 30px;}
.contact-section h6 { margin-bottom: 18px;}
/*********** home page css end ************/

/*********** project inner page css start ************/
.project-detail { padding-top: 40px; padding-bottom: 60px;}
.project-detail::before { display: none;}
.gallery { gap: 8px;}
.breadcrumbs li { padding-right: 26px;}
.breadcrumbs li:not(:last-child):after { width: 14px; height: 14px; top: calc(50% - 6px);}
.project-detail .row { row-gap: 40px;}
.impresses-sec::before { width: 38vw;}
.impresses-sec::after { width: 70vw;}
/*********** project inner page css end ************/

/****************** common page content css start *********************/
.common-padding { padding-block: 40px;}
.common-page-cnt h1, .common-page-cnt h2, .common-page-cnt h3, .common-page-cnt h4, .common-page-cnt h5, .common-page-cnt h6 { margin-top: 14px; margin-bottom: 12px;}
.common-page-cnt h2 { font-size: 18px; line-height: 28px; }
/****************** common page content css end *********************/

/****************** 404 page css start *********************/
.not-found-page h1 { font-size: 56px;}
.not-found-page p { margin-block: 16px;}
/****************** 404 page css end *********************/

/* footer css start */
.footer-links-sec section:first-child { text-align: left;}
.footer-links-sec { row-gap: 24px;}
/* footer css end */
}
@media(max-width:575px){
/* what we do css start */
.what-we-do-slider { width: 100vw;}
/* our projects css start */
.flickity-projects-slider { width: calc(100%)}
.flickity-projects-slider .project-slide { width: 80vw;}
}
/* media query end */
.grecaptcha-badge{display:none!important;}