@charset "UTF-8";

/*
Theme Name: Twenty Twenty-One
Theme URI: https://wordpress.org/themes/twentytwentyone/
Author: the WordPress team
Author URI: https://wordpress.org/
Description: Twenty Twenty-One is a blank canvas for your ideas and it makes the block editor your best brush. With new block patterns, which allow you to create a beautiful layout in a matter of seconds, this theme’s soft colors and eye-catching — yet timeless — design will let your work shine. Take it for a spin! See how Twenty Twenty-One elevates your portfolio, business website, or personal blog.
Requires at least: 5.3
Tested up to: 6.3
Requires PHP: 5.6
Version: 1.9
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: twentytwentyone
Tags: one-column, accessibility-ready, custom-colors, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, block-patterns, rtl-language-support, sticky-post, threaded-comments, translation-ready

Twenty Twenty-One WordPress Theme, (C) 2020 WordPress.org
Twenty Twenty-One is distributed under the terms of the GNU GPL.
*/

/**
 * SETTINGS
 * File-header..........The file header for the themes style.css file.
 * Fonts................Any font files, if the project needs specific fonts.
 * Global...............Project-specific, globally available variables.
 *
 * TOOLS
 * Functions............Global functions.
 * Mixins...............Global mixins.
 *
 * GENERIC
 * Normalize.css........Normalise browser defaults.
 * Breakpoints..........Mixins and variables for responsive styles
 * Vertical-margins.....Vertical spacing for the main components.
 * Reset................Reset specific elements to make them easier to style in other contexts.
 * Clearings............Clearings for the main components.
 *
 * ELEMENTS
 * Blockquote...........Default blockquote.
 * Forms................Element-level form styling.
 * Headings.............H1–H6
 * Links................Default links.
 * Lists................Default lists.
 * Media................Images, Figure, Figcaption, Embed, iFrame, Objects, Video.
 *
 * BLOCKS
 * Audio................Specific styles for the audio block.
 * Button...............Specific styles for the button block.
 * Code.................Specific styles for the code block.
 * Columns..............Specific styles for the columns block.
 * Cover................Specific styles for the cover block.
 * File.................Specific styles for the file block.
 * Gallery..............Specific styles for the gallery block.
 * Group................Specific styles for the group block.
 * Heading..............Specific styles for the heading block.
 * Image................Specific styles for the image block.
 * Latest comments......Specific styles for the latest comments block.
 * Latest posts.........Specific styles for the latest posts block.
 * Legacy...............Specific styles for the legacy gallery.
 * List.................Specific styles for the list block.
 * Media text...........Specific styles for the media and text block.
 * Navigation...........Specific styles for the navigation block.
 * Paragraph............Specific styles for the paragraph block.
 * Pullquote............Specific styles for the pullquote block.
 * Quote................Specific styles for the quote block.
 * Search...............Specific styles for the search block.
 * Separator............Specific styles for the separator block.
 * Table................Specific styles for the table block.
 * Verse................Specific styles for the verse block.
 * Video................Specific styles for the video block.
 * Utilities............Block alignments.
 *
 * COMPONENTS
 * Header...............Header styles.
 * Footer...............Footer styles.
 * Comments.............Comment styles.
 * Archives.............Archive styles.
 * 404..................404 styles.
 * Search...............Search styles.
 * Navigation...........Navigation styles.
 * Footer Navigation....Footer Navigation styles.
 * Pagination...........Pagination styles.
 * Single...............Single page and post styles.
 * Posts and pages......Misc, sticky post styles.
 * Entry................Entry, author biography.
 * Widget...............Widget styles.
 * Editor...............Editor styles.
 *
 * UTILITIES
 * A11y.................Screen reader text, prefers reduced motion etc.
 * Color Palette........Classes for the color palette colors.
 * Editor Font Sizes....Editor Font Sizes.
 * Measure..............The width of a line of text, in characters.
 */

/* Categories 01 to 03 are the basics. */

/* Variables */
.home .header{top: 40px;}
.home.admin-bar .header{top: 72px;}

.timeline_section{ position:relative;}
.timeline_section:before{ background:#f17009; width:1px; content:""; height:100%; position:absolute; top:0; left:50%;}
.timeline_section .timeline_section_left{ padding-right:60px!important;position:relative;}
.timeline_section .timeline_section_right{ padding-left:60px!important;}
.timeline_section .timeline_section_left:before{background: url(http://s691948366.onlinehome.us/demo/ccesoftware/wp-content/uploads/2024/07/number_img1.png) top center no-repeat; width:87px; content:""; height:75px; position:absolute; top:0; left:100%; margin-left: -44px;}
.timeline_section .timeline_section_row2 .timeline_section_left:before{background: url(http://s691948366.onlinehome.us/demo/ccesoftware/wp-content/uploads/2024/07/number_img2.png) top center no-repeat;}
.timeline_section .timeline_section_row3 .timeline_section_left:before{background: url(http://s691948366.onlinehome.us/demo/ccesoftware/wp-content/uploads/2024/07/number_img3.png) top center no-repeat;}


/**********************************
*Header Menu Responsive CSS Start*
*********************************/
@media (min-width: 1001px) {
.mobile_hamburger_canvas,
.mobile_menu_toggle_button,
.mobile_nav-menu{display:none;}
}
@media (max-width: 1000px) {
.header_right{padding-right: 0;position:relative;}
.menu-nav-container .header_menu,
.header_menu_area{ display:none;}
.menu-icon-box{ margin-left:26px;}
.mobile_menu_toggle_button.mobile_open_button{
	z-index: 999;
	height: 30px;
	width: 30px;display: inline-block;position: relative;
	text-align: center;
	line-height: 50px;
	border-radius: 50%;
	font-size: 20px;
	cursor: pointer;
	transition: all 0.3s ease-in-out;
	-webkit-transition: all 0.3s ease-in-out;
	cursor: pointer;
}
.mobile_menu_toggle_button.mobile_open_button span, 
.mobile_menu_toggle_button.mobile_open_button::before, 
.mobile_menu_toggle_button.mobile_open_button::after {
	content: "";
	position: absolute;
	top: calc(50% - 1px);
	left:0;
	width:100%;
	border-bottom: 2px solid #000;
	transition: transform .6s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.mobile_menu_toggle_button.mobile_open_button::before {
	transform: translateY(-10px);
	width: 100%;
}
.mobile_menu_toggle_button.mobile_open_button::after {
	transform: translateY(10px);
	width: 100%;
}
.mobile_menu_toggle_button.mobile_close_button{
	font-size: 20px;
	float: left;
	position: absolute;
	background: #07193e;
	padding: 5px;
	width: 35px;
	height: 35px;
	margin: 0;
	right: 20px;
	color: #fff;
	top: 20px;
	line-height: 25px;
  	text-align: center;cursor: pointer;
}

.mobile_hamburger_canvas {
	background: #d5e7b8 ;
	position: fixed;
	right: -410px;
	top: 0px;
	z-index: 999999;
	transition: right .3s ease-in-out 0s;
	-webkit-transition: right .3s ease-in-out 0s;
	-moz-transition: right .3s ease-in-out 0s;
	-o-transition: right .3s ease-in-out 0s;
	height:100%;overflow: auto;
  	max-width: 400px;
	width: 100%;
	padding:50px 30px 20px;
}
.mobile_hamburger_open .mobile_hamburger_canvas{right:0;}

.mobile_hamburger_canvas a{ color:#fff;}
.mobile_hamburger_canvas a:hover{ color:#f2c6ff;}
.mobile_hamburger_canvas ul{ margin:0; padding:0; list-style:none;display: inline-block;}
.mobile_hamburger_canvas li{ width:100%; float:left;margin:0; padding:0;}
.mobile_hamburger_canvas li a{ width:100%; float:left; padding:12px 0; text-transform:capitalize; color:#000; transition:all 0.4s;}
.mobile_hamburger_canvas li a:hover{ color:#ffbd88;}
.mobile_hamburger_canvas li a:before{ display:none;}
.mobile_hamburger_canvas .sub-menu{width:100%; float:left; padding-left:15px; position:static; opacity:1; visibility: visible; transform: translate(0px , 0px); background: none; box-shadow: none;}
.mobile_hamburger_canvas .sub-menu li {
	display: block;
	float: left;
	width: 100%;
	position: relative;
	border-bottom: 0px solid #fff;
	margin: 0px 0px !important;
	background: none;
}
.mobile_hamburger_canvas .sub-menu li a{border: 0px!important; background:none;}
.mobile_hamburger_canvas .sub-menu li a:hover{background: none;border: 0px!important;}
	.nav li.contact_us a{ text-align:center;margin-top: 15px;}
}

/*********************************
*Header Menu Responsive CSS End*
*********************************/

@media (max-width: 1000px) {
.banner-caption-right,
.banner-caption-left{ width:100%;}
.banner-caption-right{ padding-top:30px;}
.banner .banner-caption-right img{display: inline-block; width:auto;}
	.content-row-1 h3{ padding-left:0;padding-right:0;}
	.content-row-3-col-1,
	.content-row-3-col-2{ width:100%!important; padding-right:0; margin:0;}
	.content-row-3 .content-row-3-col-1 p{ text-align:center;}
	.content-row-3 .content-row-3-col-2 p{text-align: left;}
	.why-box img{ height: 100px;}
	.why-list li::after,
	.content-row-4 h2 br{display:none;}
	.content-row-6 .wpsm_testi_description{text-align: center;}
	.content-row-8-col-1,
	.content-row-8-col-2{width:100%!important; margin:10px 0;}
	.footer-col-2{width: 38%;margin-right: 0;}
	.footer-col-1{width: 52%;margin-right: 10%;}
	.footer-col-3{width: 100%;padding-top:40px;}
	.footer-social{ text-align:center; }
	.footer-social li {display: inline-block;}
	.footer-row-1-col-1, .footer-row-1-col-2{width:100%; float:left;}
	.content-row-2 h2{ font-size:26px;}
	.hm-serv-list1 li{ width:100%;}
	.content-row-3-btn a{font-size: 13px;}
	.content-row-8-col-1 h2{ text-align:center;}
}


@media (max-width: 767px) {
.wel-list,
ul.class-list{ margin:0 auto; width:100%; max-width:500px;}
.wel-list li,
ul.class-list li{ width:100%; margin-right:0; margin-bottom:30px;min-height: inherit;}
	.wel-list li p,
	.class-list li p{min-height: inherit;}
	.wel-list li{ margin-top:60px;}
	.content-row-4 h2{font-size: 30px;line-height: 36px;}
	.why-list li{ width:48%; padding-bottom: 50px;}
	.why-list li:last-child{ width:100%;}
	.content-row-6 .wpsm_testimonial_2{ width:100%!important; margin:10px 0;}
	.timeline_section .timeline_section_left{ padding-right:0px!important; padding-top:90px!important;}
	.timeline_section .timeline_section_left:before{left: 50%;}
	.timeline_section .timeline_section_row1 .timeline_section_left{ z-index:9;}
.timeline_section .timeline_section_right{ padding-left:0px!important;}
	.timeline_section .wrapper{ max-width:560px!important;}
	.timeline_section::before{ display:none!important;}
	.about-row-1 h2{font-size: 36px;}
	.blog-detais-row-col-1,
	.blog-detais-row-col-2,
	.blog-row-1-col-1{ width:100%!important;}
	.blog-row-1-col-2{ width:100%!important;}
	.career-row-1 ul{grid-template-columns:1fr;}
	.career-row-1 h2{font-size: 26px;}
	.btn-1{margin-top:40px;}
}
@media (max-width: 600px) {
.why-list li{ width:100%; margin-right:0;padding-bottom: 50px;}
	.hm-cont-info-left{width: 100%;margin:10px 0;}
	.hm-cont-info-right{ padding:0;width: 100%;margin:10px 0;}
}
@media (max-width: 500px) {
.footer-col-2{width: 100%;margin-right: 0;}
.footer-col-1{width: 100%;margin-right: 0%;}
	.blg-btn-bx-right{width:100%!important;text-align:left; padding-top:25px;}
	.blg-btn-bx-left{width:100%!important;}
}

@media screen and (max-width: 768px) {
    .top-header {
        flex-direction: column; /* Stack items vertically */
        padding: 10px;
        text-align: center;
    }

    .top-header .wrapper {
        flex-direction: column; 
        width: 100%;
    }

    .top-header-left,
    .top-header-right {
        width: 100%;
        justify-content: center;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .top-list {
        flex-direction: column; 
        align-items: center;
    }
	.top-social-list {
        justify-content: center; 
        flex-wrap: wrap; 
        gap: 8px; 
        width: auto;
        padding: 10px 0;
    }
	.footer-row-1-col-2 ul{
		justify-content: center; 
        flex-wrap: wrap;
        gap: 8px; 
        width: auto;
	}
	.tab-box {
        padding: 10px;

    }

    .tab-box-1 {
        margin-bottom: 15px !important;
    }

    .tab-lft, .tab-rght, .tab-lft-1, .tab-rght-2 {
        width: 100%;
		/*text-align:center;*/
    }
	.tab-lft, .tab-lft-1{
		margin-bottom:20px;
	}
	/*.tab-box ul, 
    .tab-box-3 ul, 
    .services-tab-box ul {
        display: flex;
        flex-direction: column;
        align-items: center; 
        padding: 0;
    }*/

    /*.tab-box ul li, 
    .tab-box-3 ul li, 
    .services-tab-box ul li {
        text-align: center;
        padding-left: 0; 
        display: flex;
        align-items: center;
        justify-content: center;
        background-position: left center; 
        background-size: 16px; 
        padding-left: 22px; 
    }*/
	.tab-step ul li{ display:block !important; text-align:left; background:none !important;}
	
}
@media screen and (max-width: 1024px) {
    .tab-box {
        flex-direction: column; /* Stack elements vertically */
        padding: 15px;
    }

    .tab-box-1 {
        flex-direction: column; /* Stack elements vertically */
        margin-bottom: 20px !important;
    }

    .tab-lft, .tab-rght, .tab-lft-1, .tab-rght-2 {
        width: 100%; /* Full width for smaller screens */
    }
}
.wpcf7-response-output {
width: 100%;
float: left;
text-align: center;
}

.recaptcha-box{
	 width: 100%;
    float: left;
	padding:10px 0;
}
.c-box {
	width:305px;
	float:none;
	margin:0 auto;
}