/*
Theme Name: twentytwenty Child
Text Domain: twentytwenty Child
Template: twentytwenty
Version: 1.2
Requires at least: 4.7
Requires PHP: 5.2.4
Description: Our default theme for 2020 is designed to take full advantage of the flexibility of the block editor. Organizations and businesses have the ability to create dynamic landing pages with endless layouts using the group and column blocks. The centered content column and fine-tuned typography also makes it perfect for traditional blogs. Complete editor styles give you a good idea of what your content will look like, even before you publish. You can give your site a personal touch by changing the background colors and the accent color in the Customizer. The colors of all elements on your site are automatically calculated based on the colors you pick, ensuring a high, accessible color contrast for your visitors.
Tags: blog, one-column, custom-background, custom-colors, custom-logo, custom-menu, editor-style, featured-images, footer-widgets, full-width-template, rtl-language-support, sticky-post, theme-options, threaded-comments, translation-ready, block-styles, wide-blocks, accessibility-ready
Author: the WordPress team
Author URI: https://wordpress.org/
Theme URI: https://wordpress.org/themes/twentytwenty/
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html

All files, unless otherwise stated, are released under the GNU General Public
License version 2.0 (http://www.gnu.org/licenses/gpl-2.0.html)

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned
with others.
*/
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&display=swap');

body {
	font-family: "Manrope", sans-serif;
	background:#fff;
	overflow-x: hidden;
}
h1, h2, h3 {
    letter-spacing: 0;
	font-family: "Manrope", sans-serif;
	margin:0px !important;
}
p{
    font-family: "Manrope", sans-serif;
	margin-bottom:0px !important;
	font-size:16px;
}
a, a:hover, a:focus{
	text-decoration: none;
	outline: none;
	transition: all 300ms ease-in-out;
	-o-transition: all 300ms ease-in-out;
	-ms-transition: all 300ms ease-in-out;
	-moz-transition: all 300ms ease-in-out;
	-webkit-transition: all 300ms ease-in-out;
	text-decoration: none !important;
}

button, button:hover, button:focus{
	outline: none;
	-o-transition: all 400ms ease-in-out;
	-ms-transition: all 400ms ease-in-out;
	-moz-transition: all 400ms ease-in-out;
	-webkit-transition: all 400ms ease-in-out;
	transition: all 400ms ease-in-out;
	cursor: pointer;
}
.section-inner {width: calc(100% - 8rem); max-width: 100%;}
.header-inner {padding: 0px;}
ul, ol {margin: 0;}
li {line-height: 1.5; margin: 0px;}
.site-logo img {max-height: inherit; max-width: 160px;}
.site-logo {margin: 0px !important;}
.header-titles {margin: 0px;}
.header-titles-wrapper {margin-right: 0px;}
.header-inner {position: relative;}
.header-navigation-wrapper {flex-direction: column; width: 100%;}
.header-titles-wrapper {width: 20%;}
.nav-top {background: #000734; color: #fff; width: 100%; border-radius: 0px 0px 0px 15px; padding: 0px 30px 0px 50px;}
.top-info {display: flex; list-style: none;}
.top-info li{margin-right: 20px;}
.top-info li a {font-size: 14.4px; color: #fff; line-height: 50px; font-weight: 500;}
.top-info li a span {margin-right: 5px; color: #f14624;}
.tm-header-top-info {display: flex; justify-content: space-between; align-items: center;}
.social-icon li {display: inline-block; margin-right: 10px;}
.social-icon li a {background: #f14624; width: 30px; display: block; text-align: center; height: 30px; line-height: 33px; color: #fff; border-radius: 100px;}
.social-icon li:last-child {margin: 0px;}
.social-icon li a:hover {background: #fff; color: #f14624;}
.primary-menu {margin: 0px !important;}
.menu-down {width: 100%; margin-top: 10px; padding: 0px 30px 0px 50px; display: flex; justify-content: space-between; align-items: center;}
.primary-menu-wrapper {display: block; width: auto;}
.primary-menu > li {margin: 0px;}
.primary-menu li a {color: #fff !important; font-size: 16px; line-height: 50px; display: block; letter-spacing: 0; padding:0px 26px;}
.btn-view-details a {padding: 0px 36px; background: #f24725; color: #fff; font-size: 16px; position: relative; border-radius: 10px; letter-spacing: 0; font-weight: 600; border: none; overflow: hidden; line-height: 55px;}
.btn-view-details .btn-icon {margin-right: 5px;}
.btn-view-details a:before {position: absolute; content: ''; background: #e94221; width: 18px; height: 100%; top: 0; left: 0; -o-transition: all 400ms ease-in-out; -ms-transition: all 400ms ease-in-out;	-moz-transition: all 400ms ease-in-out;	-webkit-transition: all 400ms ease-in-out; transition: all 400ms ease-in-out;}
.btn-view-details:hover a:before {width: 100%; -o-transition: all 400ms ease-in-out; -ms-transition: all 400ms ease-in-out;	-moz-transition: all 400ms ease-in-out;	-webkit-transition: all 400ms ease-in-out; transition: all 400ms ease-in-out;}
.btn-view-details span {z-index: 9; position: relative;}
.primary-menu li a:hover {color: #f24725 !important;}
section {padding: 0px;}
.slider-item {position: relative;}
.slider-item:before {position: absolute; content: ''; background: url('https://webspro.in/wp-content/uploads/2025/05/triangle1.png');
    width: 580px; height: 100%; right: 0;}
.slider-item:after {position: absolute; content: ''; background: url('https://webspro.in/wp-content/uploads/2025/05/line.png');
    width: 500px; height: 100%; right: 0; bottom:0;}
.slider-image img {height: 600px; width: 100%; object-fit: cover;}
.image-carousel {position: relative;}
.slider-content {position: absolute; top: 50%; text-align: center; left: 0; right: 0; transform: translateY(-50%);}
.slider-content small {background: rgba(255, 255, 255, 0.1); display: block; color: #fff; letter-spacing: 1px; max-width: 300px; margin: 0px auto;
    line-height: 50px; text-transform: uppercase; font-weight: 600; font-size: 14px; border-radius: 10px;}
.slider-content h2 {color: #fff; font-weight: 800; font-size: 60px !important; max-width: 100%; margin: 20px auto !important;}
.about-image-wrapper {position: relative;}
.image-one img {border-radius: 12px;}
.image-one img {margin: 0px auto; height: 550px; width: 460px; object-fit: cover;}
.about-image-wrapper:before {position: absolute; content: ''; background: #e84221; width: 400px; height: 520px; left: 96px; margin: 0px auto;    border-radius: 20px; top: 50px; }
.gap {padding: 4em 0px;}
.image-two {position: absolute; top: 40px; right: 0; border-radius: 10px; overflow: hidden; border: 7px solid #fff;}
.subtitle {margin-top: 0; color: #6a6a6a; text-transform: capitalize; margin-bottom: 10px; position: relative; padding-left: 20px;
    font-size: 18px; font-weight: 800;}
.subtitle:before {position: absolute; left: 0; top: 0; content: "//"; color: #f00;}
.heading-title {font-size: 35px; font-weight: 800; margin-bottom: 30px !important; color:#000734}
.about-content p{color: #6a6a6a; letter-spacing: 0; line-height: 28px; font-weight: 500; max-width: 85%; text-align: justify; margin-bottom: 30px !important;}
.service-wrapper p {color: #6a6a6a; letter-spacing: 0; line-height: 28px; font-weight: 500; margin-bottom: 30px !important;}
.about-section {position: relative;}
.about-section:before {position: absolute; content: ''; background: url('https://webspro.in/wp-content/uploads/2025/05/half-circles.png');
    width: 367px; height: 100%; top: 0; right: 0;}
.service-item-current-style5 {border-radius: 5px; position: relative; border: 1px solid rgba(96, 94, 94, 0.1215686275); box-shadow: 0px 20px 20px 0px rgba(0, 0, 0, 0.03); transition: all 0.3s ease; margin-bottom: 30px;}
.service-item-current-style5 .thumb {overflow: hidden; position: relative; border-radius: 6px 6px 0 0;}
.service-item-current-style5 .content {background-color: #fff; padding: 45px 10px 30px 10px; position: relative; border-radius: 0 0 6px 6px;
    text-align: center;}
.service-item-current-style5 .content .service-icon {background-color: #ffffff; border-radius: 50%; height: 90px; margin: 0 auto; position: absolute; right: 0; left: 0; border: 6px solid #fff; top: -55px; width: 90px; text-align: center; box-shadow: 0px 10px 60px 0px rgba(0, 0, 0, 0.07); transition: all 0.4s ease; z-index: 1; display: flex; justify-content: center; align-items: center; font-size: 30px;}
.service-item-current-style5 .content .service-icon::before {position: absolute; top: 0; left: 0; bottom: 0; right: 0; content: ""; border-radius: 50%; z-index: 0; -webkit-transform: scale(0); -moz-transform: scale(0); -ms-transform: scale(0); transform: scale(0); transform-origin: center;
    transform-style: preserve-3d; transition: all 0.5s cubic-bezier(0.62, 0.21, 0.45, 1.52); background: #f24725;}
.service-title h3 a {color: #000; font-size: 18px; display: block;}
.service-item-current-style5:hover .content .service-icon::before {-webkit-transform: scaleX(1); -moz-transform: scaleX(1); -ms-transform: scaleX(1); transform: scaleX(1);}
.service-icon.icon i {position: relative; color: #00062d;}
.service-item-current-style5:hover .service-icon.icon i{color:#fff;}
.service-item-current-style5 .thumb::before {position: absolute; top: 0; left: 0; right: 0; bottom: 0; content: ""; background-color: rgba(0,0,0,0.4); border-top-left-radius: 10px; border-top-right-radius: 10px; transform: scaleX(0); transition: all 500ms ease; z-index: 1;}
.service-item-current-style5:hover .thumb::before {-webkit-transform: scaleX(1); -moz-transform: scaleX(1); -ms-transform: scaleX(1); transform: scaleX(1);}
.service-item-current-style5:hover .service-title h3 a{color:#f24725;}
.service-item-current-style5:hover .thumb::after {-webkit-transform: scaleX(1); -moz-transform: scaleX(1); -ms-transform: scaleX(1); transform: scaleX(1);}
.service-item-current-style5 .thumb::after {position: absolute; bottom: 0; left: 0; right: 0; width: 100%; height: 5px; background: #f24725;
    transform: scaleX(0); transition: all 500ms ease; content: ""; z-index: 1;}
.tm-sc-icon-box {padding: 55px 30px; background: #F8F5F1; border-radius: 10px 10px 10px 10px; height: 320px; display: flex; flex-direction: column;
    justify-content: center;}
.tm-sc-icon-box h3 {font-size: 25px; margin: 10px 0px 20px !important;}
.tm-sc-icon-box small {letter-spacing: 1px; font-size: 16px; color: #6a6a6a; font-weight: 500;}
.text-word {display: inline; color: #1E1B1B00; -webkit-text-stroke-width: 1.1px; -webkit-text-stroke-color: #31313191; font-size: 80px;    padding-right: 50px; position: relative; margin-right: 0;}
.text-word:after {position: absolute; content: ''; border: 1px solid #6a6a6a; width: 10px; height: 10px; top: 50%; transform: translateY(-50%);
    border-radius: 100px;}
.scrolling-text {background-position: center center !important; background-size: cover !important;}
.our-work-section {position: relative; padding: 1em 0px; background-attachment: fixed !important; background-size: cover !important; height: 750px;}
.our-work-section:before {position: absolute; content: ''; background: rgb(0 6 45 / 90%); width: 100%; height: 100%; top: 0;}
.count-number {font-size: 100px; color: #f04625; text-align: center; font-weight: 900;}
.count-subtitle {color: #fff; text-align: center !important; display: block; letter-spacing: 1px; font-size: 18px; font-weight: 800;}
.count-text {padding: 50px; color: #fff;}
.count-text p {letter-spacing: 0px; font-size: 16px;}
.sectiob-header {text-align: center;}
.recent-work {margin-top: -10em;}
.sectiob-header .subtitle {color: #fff; width: 10%;}
.sectiob-header .heading-title {color: #fff;}
.recentwork-list .image-box {overflow: hidden; border-radius: 16px; position:relative; -o-transition: all 400ms ease-in-out; -ms-transition: all 400ms ease-in-out;	-moz-transition: all 400ms ease-in-out;	-webkit-transition: all 400ms ease-in-out; transition: all 400ms ease-in-out;}
.recentwork-list {position: relative;}
.recentwork-wrapper .slick-slide {margin: 0px 15px;}
.recentwork-list .image-box:before {position: absolute; content: ''; background: rgba(0, 0, 0, 0.5); width: 100%; height: 100%; -o-transition: all 400ms ease-in-out; -ms-transition: all 400ms ease-in-out;	-moz-transition: all 400ms ease-in-out;	-webkit-transition: all 400ms ease-in-out; transition: all 400ms ease-in-out; opacity:0;}
.recentwork-list:hover .image-box:before {position: absolute; content: ''; background: rgba(0, 0, 0, 0.5); width: 100%; height: 100%; -o-transition: all 400ms ease-in-out; -ms-transition: all 400ms ease-in-out;	-moz-transition: all 400ms ease-in-out;	-webkit-transition: all 400ms ease-in-out; transition: all 400ms ease-in-out; opacity:1;}
.cat-list small {display: block; font-size: 16px; letter-spacing: 0px; font-weight: 500; color: #6a6a6a;}
.cat-list h4 {margin: 5px 0px; font-size: 18px; color: #000; font-weight: 800; letter-spacing: 0;}
.recentwork-list .info-box {padding: 16px; background: #fff; position: absolute; bottom: 0px; width: 80%; border-radius: 0px 10px 10px 0px; opacity:0; -o-transition: all 400ms ease-in-out; -ms-transition: all 400ms ease-in-out;	-moz-transition: all 400ms ease-in-out;	-webkit-transition: all 400ms ease-in-out; transition: all 400ms ease-in-out;}
.recentwork-list:hover .info-box {background: #fff; position: absolute; bottom: 40px; width: 80%; border-radius: 0px 10px 10px 0px; opacity:1; -o-transition: all 400ms ease-in-out; -ms-transition: all 400ms ease-in-out;	-moz-transition: all 400ms ease-in-out;	-webkit-transition: all 400ms ease-in-out; transition: all 400ms ease-in-out;}
.readmore {position: absolute; display: flex; align-items: center; justify-content: center; right: 20px; top: -20px; height: 44px; width: 44px;
    font-size: 16px; color: #fff !important;  background-color: #f04625; border-radius: 50%; transition: all 300ms ease; z-index: 3;}
.contact-form label {display: none !important;}
.contact-form .name-section {width: 50%; display: inline-block; vertical-align: top;}
.contact-form .name-section input {height: 60px; padding: 0px 16px !important; border-radius: 10px; background: #dcdcdc; border: 2px solid #d9d9d9; -o-transition: all 400ms ease-in-out; -ms-transition: all 400ms ease-in-out;	-moz-transition: all 400ms ease-in-out;	-webkit-transition: all 400ms ease-in-out; transition: all 400ms ease-in-out; font-size: 16px !important;}
.contact-form textarea {height: 170px !important; padding: 16px !important; border-radius: 10px; background: #dcdcdc; border: 2px solid #d9d9d9; -o-transition: all 400ms ease-in-out; -ms-transition: all 400ms ease-in-out;	-moz-transition: all 400ms ease-in-out;	-webkit-transition: all 400ms ease-in-out; transition: all 400ms ease-in-out; font-size: 16px !important;}
.contact-form .name-section input:hover, .contact-form textarea:hover {border-color: #f00 !important; -o-transition: all 400ms ease-in-out; -ms-transition: all 400ms ease-in-out;	-moz-transition: all 400ms ease-in-out;	-webkit-transition: all 400ms ease-in-out; transition: all 400ms ease-in-out;}
input[type='submit'] {padding: 0px 36px; background: #f24725 !important; color: #fff; font-size: 16px !important; position: relative; border-radius: 10px; letter-spacing: 0; font-weight: 600; border: none; overflow: hidden; line-height: 55px; text-transform: capitalize; text-decoration: none !important;}
header {position: absolute !important; width: 100%; background: transparent !important;}
footer {background: #000734; padding: 2em 0px 0px;}
.footer-widget p {color: #fff; font-size: 16px; letter-spacing: 0; margin-bottom: 20px !important;}
.footer-widget h3 {color: #fff; font-size: 20px; margin-bottom: 16px !important; font-weight: 900;}
.footer-social-icon {display: flex; list-style: none;}
.footer-social-icon li a {display: block; width: 50px; background: #434343; margin-right: 20px; text-align: center; color: #fff; height: 50px; line-height: 50px; border-radius: 100%;}
.footer-menu {font-size: 2.4rem; margin: 0px !important; display: block;}
.footer-menu li {list-style: none; margin: 0px;}
.footer-menu li a {color: #fff; font-size: 16px; display: block; line-height: 36px; font-weight: 500; letter-spacing: 0px;}
.footer-menu li a:hover{opacity:0.7;}
.footer-social-icon li a:hover {background: #f14725;}
.footer-widget img {margin: 0; margin-bottom: 20px; max-width: 250px;}
.contact-details li {display: flex; color: #fff;}
.contact-details li span {color: #f24725; margin-right: 12px;}
.copyright p {background: #010b4b; text-align: center; color: #fff; line-height: 50px;}
.floating-icon {position: fixed; bottom: 80px; right: 30px;}
.floating-icon a {background: rgba(45, 183, 55, 1); width: 70px; display: block; text-align: center; line-height: 70px; color: #fff; font-size: 39px; border-radius: 100px;}
.thumb img {height: 220px; width: 100%; object-fit: cover;}
.our-work-section p {margin-bottom: 20px !important;}
.our-work-section hr {margin: 0px;}
.usp-section, .usp-section p {text-align: center; margin: 0px auto;}
.footer-nav-widgets-wrapper, .entry-header{display:none;}
.inner-banner {background: url('https://webspro.in/wp-content/uploads/2025/06/banner-inner.png'); height: 400px; display: flex; align-items: center; position:relative; background-size: cover; background-position: center center;}
.inner-banner:before {position: absolute; content: ''; background: rgb(0 0 0 / 79%); width: 100%; height: 100%;}
.inner-banner-inner {position: relative;}
.inner-banner h2 {color: #fff; font-weight: 800; font-size: 30px;}
.breadcrumbs {width: auto; text-align: left; color: #fff; font-size: 14px; line-height: 50px; margin-top: 10px; font-weight: 600;}
.breadcrumbs a {color: #fff;}
.recentwork-list .image-box img {height: 220px; width: 100%; object-fit: cover; object-position: top;}
.entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.is-style-wide) {max-width: 100%; width: calc(100% - 8rem);}
.footer-widget {margin-bottom: 30px;}
.post-inner {padding: 2rem 0px;}
.e-con-inner {max-width: 100% !important;}
.primary-menu ul {width: 280px !important; padding: 0px !important; background: #000734 !important;}
.sub-menu li {margin: 0px !important; padding: 0px !important;}
.sub-menu li a {line-height: 23px; padding: 9px 15px; border-bottom: 1px solid #020c48; font-size: 15px;}
.primary-menu > li > .icon, .primary-menu ul::after {display: none;}
.menu-down{-o-transition: all 400ms ease-in-out; -ms-transition: all 400ms ease-in-out; -moz-transition: all 400ms ease-in-out; -webkit-transition: all 400ms ease-in-out;	transition: all 400ms ease-in-out;}
.fixed {position: fixed; width: 100%; left: 0; background: #000734; top: 0; -o-transition: all 400ms ease-in-out; -ms-transition: all 400ms ease-in-out; -moz-transition: all 400ms ease-in-out; -webkit-transition: all 400ms ease-in-out;	transition: all 400ms ease-in-out; padding: 10px; margin-top:0px;}
.post-meta-wrapper {display: none;}
.technologi-icon img {max-width: 120px; margin: 0px auto;background: #fff; border-radius: 10px; padding: 10px;}
.technology-name p {color: #fff; text-align: center; font-weight: 600; margin: 10px 0px !important;}
.technology-use .slick-arrow {display: none !important;}
/*RESPONSIVE*/
@media only screen and (max-width: 999px) {
	.header-titles-wrapper {width: auto;}
	.search-toggle {display: none !important;}
	.header-titles-wrapper {justify-content: space-between; padding: 16px;}
	.nav-toggle .toggle-inner {padding-top: 0; font-size: 20px; text-decoration: none !important;}
	.menu-modal {z-index: 999;}
	.menu-bottom, .toggle-text {display: none;}
	.modal-menu a {color: #000; font-size: 16px !important; letter-spacing: 0px !important;}
	.slider-image img {height: 320px;}
	.slider-content h2 {font-size: 30px !important;}
	.floating-icon {position: fixed; bottom: 40px; right: 65px;}
	section.recent-work {overflow-x: hidden;}
	.about-content, .service-wrapper {text-align: center; margin-top: 30px; padding-left:0px;}
	.subtitle:before{display:none;}
	.about-content p {max-width: 100%;}
	.sectiob-header .subtitle {width: 100%;}
	.heading-title {font-size: 30px;}
	.recent-work {margin-top: 0;}
	.our-work-section {height: auto;}
	.our-work-section hr {display:none;}
	.count-subtitle{text-align:center !important;}
	.count-number {text-align: center; font-size: 50px;}
	.count-text {padding: 0; color: #fff; margin-top: 20px;}
	.count-text p{text-align:center;}
	.contact-form .name-section {width: 100%;}
	.gap {padding: 1em 0px;}
	input[type='submit'] {line-height: 60px !important;}
	footer {text-align: center;}
	.footer-social-icon {justify-content: center; margin-bottom: 34px;}
	.footer-widget img {margin: 0px auto 20px;}
	.contact-details li {display: flex; flex-direction: column;}
	.floating-icon a {width: 50px; font-size: 26px; line-height: 50px;}
	.floating-icon {bottom: 70px; right: 20px;}
	.slider-content {z-index: 99;}
	header {position: relative !important;}
	
}
	
@media only screen and (max-width: 767px) {
.recentwork-list .info-box {opacity: 1; bottom:40px;}
.slider-content h2 {font-size: 24px !important;}
.image-two {display:none;}
}