/*
Theme Name: Twenty Twenty
Text Domain: twentytwenty
Version: 2.9
Tested up to: 6.8
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-patterns, 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.
*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------

	0. 	CSS Reset
	1. 	Document Setup
	2. 	Element Base
	3. 	Helper Classes
	4. 	Site Header
	5. 	Menu Modal
	6. 	Search Modal
	7. 	Page Templates
		a. 	Template: Cover Template
		c. 	Template: Full Width
	8.  Post: Archive
	9.  Post: Single
	10. Blocks
	11. Entry Content
	12. Comments
	13. Site Pagination
	14. Error 404
	15. Widgets
	16. Site Footer
	17. Media Queries

----------------------------------------------------------------------------- */


/* -------------------------------------------------------------------------- */

/*	0. CSS Reset
/* -------------------------------------------------------------------------- */

:root{
    --primary-color: #00cdeb;
    --secondary-color:  #000;
    --text-black: #000;
    --text-white: #fff;
    --poppins:'Poppins', sans-serif;
    --anton:"Anton", sans-serif;

}
.page-content h2{  margin-bottom: 20px;  font-size:32px; font-family: var(--anton);}
.container{
    max-width: 1120px !important;
}
.section-padding{
    padding: 60px 0px ;
}
body{
    font-size: 16px;
    line-height: 24px;
    color: #111;
    font-family: var(--poppins);
}
.slick-dots{
    list-style: none;
    display: flex;
    justify-content: center;
    margin-top: 30px;gap: 6px;
}
.slick-dots li button {
    text-indent: -9999px;
    width: 10px;
    height: 13px;
    border-radius: 100%;
    background: #fff;
    border: 1px solid #ccc;
}
.slick-dots li.slick-active button{ background: var(--primary-color);}
.colored{color: var(--primary-color);}
/* navbar */


.header-app{padding: 20px 0px;     position: fixed;
    top: 0;
    right: 0;    transition: 
ease all 0.4s;
    left: 0;
    z-index: 1030;}

.nav-container{
    display: flex;
    align-items: center;
    justify-content: space-between;
     
}
.navigation ul { display: flex; list-style: none; padding: 0; margin: 0;    gap: 14px;}
.navigation ul li a{
    font-size: 16px;
    font-weight: 500; text-decoration: none;
    color: var(--text-white);
    white-space: nowrap;
}

.navigation ul li { position: relative;}
.navigation > ul > li > a:hover,.navigation > ul > li.current-menu-item a{  color: var(--primary-color);}





/* footer */
.footer-banner{    background: #000;
    display: flex;
    width: 100%;
    flex-wrap: wrap;
}
.footer-content{
    padding:20px 0;
}
img{ max-width: 100%;}
.bss-service{
    background: #fff;
    padding: 13px;
    border: 1px solid #dddcdc;
    border-radius: 10px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}
.bss-service figure{
    width: 25%;
    margin: 0;
}
.bss-service h3{    font-size: 15px;
    font-weight: 600;
    width: 70%;
    margin: 0;
}
.footer-content .logo-col p{
 
    font-size: 14px;
    line-height: 24px;
    color: #e5e3e3;
    margin-top: 30px;
}
.footer-bt{    border-top: 1px solid #282626;
    color: #fff;
    width: 100%;
}
.footer-copyright{
    padding: 23px 0;
    display: flex;
    flex-wrap: wrap-reverse;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
}
.footer-copyright ul{
    list-style: none;
    display: flex;
    align-items: center;
    gap: 23px;
}
.footer-list ul{ list-style: none; padding: 0;}
.footer-copyright ul a, .footer-copyright .copyright-content{
    text-decoration: none;
    font-weight: 400;
    font-size: 14px;
    line-height: 24px;
    color: #e5e3e3;
    transition: all 0.3s ease;
}
.footer-copyright ul a:hover{
    color: var(--primary-color);
}
.footer-content .footer-heading{
    font-size: 20px;
    font-weight: 500;
    line-height: 36px;
    color: #fff;
}
.footer-content .footer-list {  
    list-style: none;
    padding-left: 0;
    margin-top: 15px;
}

.footer-content .footer-list li a{
    font-size: 14px;
    font-weight: 500;
    line-height: 32px;
    color: #e5e3e3;
    text-decoration: none;
}
.footer-content .footer-list li a:hover{
    color: var(--primary-color);
    transition: all 0.3s ease;
}
.footer-content .contact-details{
    list-style-type: none;
    padding-left: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 15px;
}
.testimonials{padding: 30px 0px; background: #000;}
.gray{ background: #f1f1f1;}
.testi { text-align: center;}
.tsbox{     background: #f3f3f3;
    padding: 20px;
    border-radius: 10px;
    position: relative;
    font-size: 14px;
    color: #4c4848;}
.profile-name{ margin-top: 40px;}
.tsbox:before{    position: absolute;
    content: "";
    bottom: -59px;
    left: 50%;
    transform: translateX(-50%);
    border: 30px solid;
    border-color: #f3f3f3 transparent transparent transparent;}
.slick-slide>div{ padding: 10px;}
.profile-name figure img{ display: inline-block; border-radius: 100%;}
.profile-name h3{font-size: 15px;
    color: #ffffff;
    margin-top: 12px;}
.profile-name  span{ display: block; color: #fff; font-size: 13px; font-style: italic; }

.footer-content .contact-details li a{
    font-size: 14px;
    font-weight: 500;
    font-family: 'DM Sans', sans-serif;
    line-height: 32px;
    text-decoration: none;
    color: #222222;
}
.footer-content .contact-details li a:hover{
    color: var(--primary-color);
}
.footer-content .get-the-app{
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.footer-content .get-the-app img{
    width: 160px;
}
.d-custom-md-none{
    display: none;
}
.mobile-menu{ width: 24px; cursor: pointer;
} 

/* new css  */
header.scrolled {      padding: 5px 0px;  background: #000;
    box-shadow: 0px 0px 3px #000;}
.logo{text-decoration: none;}
.logo h1{
    font-size: 30px;
    font-weight: 700;
    color: var(--primary-color);
    text-decoration: none;
    margin-bottom: 0;
}
.logo h1:hover{
    color: var(--secondary-color);
}
.top-bar {
  height: 45px;
  opacity: 1;
  transition: height 0.4s ease, opacity 0.4s ease;
  font-size: 14px;
  font-weight: 400;
  border-bottom: 1px solid #355efc12;
  display: flex;
  align-items: center;
}

header.scrolled .top-bar {height: 0;opacity: 0;}
.top-bar-content{display: flex;justify-content: space-between;}
.top-bar-content a{text-decoration: none; color: #141414; line-height: 36px;}
.banner-slider{position: relative;}

.video-caption{
    position: absolute;
    right: 0%;
    top: 50%;
    transform: translateY(-50%);
    left: 0%;
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
    text-align: left;
    bottom: auto; color: #fff;
}
.video-caption h1 {    margin-top: 0;
    margin-bottom: 3px;
    font-size: 58px;
    font-family: var(--anton);
    color: var(--text-white);
    text-transform: uppercase;
    
}
.banner-slider .wlcm-to{color: var(--primary-color);}
 .exp-more{    background: var(--primary-color);
    font-family: 'Anton';
    color: #111;
    transition: 
ease all 0.4s;}
.exp-more:hover{background: var(--secondary-color); color: #fff;}

.about-section n.about-img{border-radius: 20px;}
.blog-item{    box-shadow: 0px 0px 3px 0px #b1abab;
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
}
.newslestterbx input[type="text"]{
    width: 100%;
    border: 1px solid #e1dfdf;
    padding: 8px 12px;
    font-size: 14px;
}
.newslestterbx button{width: 100%;
    background: var(--primary-color);
    color: #111;
    font-weight: 600;
    padding: 8px;
    border: 0;
    margin-top: 7px;
}
.blog-item figure{ margin: 0;}
.blog-item .bbs-card{ padding: 20px;}
.blog-item .bbs-card h3{  font-size: 22px;  font-weight: 700; color:#111;}
.blog-item .bbs-card p{  font-size: 14px; color: #323030;}
.blog-item .bbs-card .more a{
    text-decoration: none;
    font-weight: 500;
    color: var(--primary-color);
}
.blog-item .bbs-card .more a:hover{ color: #111;}
.section-tag {    padding: 1px 10px;
    border-radius: 8px;
    color: #000000;
    display: inline-block;
    font-weight: 400;
    font-size: 12px;
    background: #c1f3fb;}
.section-heading h2{    margin: 0 0 20px 0px;
    font-size: 33px;
    color: var(--text-black);
    font-family: 'Anton'; 
}
.section-heading span{ display: block;
    color: var(--primary-color);
    font-size: 17px;}
.head-subtext{
    font-weight: 400;
    color: #141414;
    line-height: 24px;
    font-size: 16px;
}
.bs-service{    background: #f9f5ee; padding:30px 0px;}
.about-section .tab-content p{
    font-size: 14px;
    color: #141414;
}
.about-section .num{
    width: 72px;
    height: 60px;
    display: grid;place-items: center;
    background: var(--primary-color);
    color: #fff;font-weight: 500;
    border-radius: 50%;font-size: 24px;
    flex-wrap: nowrap;
}
.about-section h3{font-size: 20px; color: var(--text-black); }
.about-section .nav-tabs .nav-link{color: #141414;font-weight: 600;}
.about-section .nav-tabs .nav-link.active{color: var(--primary-color); font-weight: 500;} 

.about-section .nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active,.nav-tabs .nav-link:focus, .nav-tabs .nav-link:hover{border-color: #ffffff #ffffff var(--primary-color) !important;}

.info-sec{background: var(--primary-color);}
.info-sec h2{font-weight: 600; font-size: 50px; color: #fff;}

.our-services .nav-pills .nav-link{
    color: #141414;
    border-radius: 32px;
    padding: 0rem 1.4rem;
    height: 50px;
    margin-bottom: 1rem;
    display: flex; align-items: center;
    text-align: start;
    border: 1px solid #dee2e6;
    width: 100%; position: relative;
}
.our-services .nav-pills .nav-link::before{
    content: "";
    border: 1px solid #dee2e6;
    position: absolute;
    border-left: none;
    border-bottom: none;
    width: 34px;
    height: 34px;
    top: 7px;
    right: -4px;
    transform: rotate(45deg);
    border-radius: 6px;
    background: #fff;
}
.our-services .nav-pills .nav-link.active, .nav-pills .show>.nav-link,.our-services .nav-pills .nav-link.active::before{background: var(--primary-color); color: #fff;}
.our-services h3{     font-size: 16px !important;
    font-weight: 600;}
.our-services .nav-link{
    transition: none !important;
}
.inside-top-header{ background: url(../images/bg2.jpg) center top no-repeat; background-size: cover; padding: 70px 0px;}
.offset_top{ margin-top: 140px;}
img,a{transition: ease all 0.4s;}
.service-card{
    border: 1px solid #ffe1b6;
    padding: 10px 10px 15px 10px;
    margin:0 0 12px 0px;
    border-radius: 10px;
    transition: ease all 0.4s;
}
.service-card h3{ font-size: 22px!important; font-weight: 800;}
.more-text a{  color: #111;  text-decoration: none;  font-weight: 800;}
.service-card figure{ overflow: hidden; border-radius: 10px; }
.service-card:hover figure img{ scale:1.1}
.service-card:hover{ background: var(--primary-color); color: #fff;}
.service-card:hover .more-text a{ color: #fff;}



.number_counter{
    padding: 0;
    margin: 0;
    list-style: none;min-height: 280px;
    border-left: 1px solid #ccc;
    padding-left: 40px;
}
.number_counter h3{
    font-size: 40px;
    font-family: var(--anton);
    color: var(--primary-color);
    margin: 0;
    display: inline-block; margin-right: 10px;
}
.number_counter li{ margin-bottom: 30px;}
.number_counter li span{    font-size: 25px;
    color: var(--primary-color);}
	.number_counter li {     font-size: 14px;
    color: #747171;}


	.slick-center .slide img {
  transform: scale(1.15);
  transition: .4s ease;
}
.myslider .slick-slide{ padding: 40px 0px;}
.slick-slide img {
  width: 100%;
  border-radius: 10px;
}
.hp-hero__container-mask {
    background: linear-gradient(5deg, rgba(255, 255, 255, 0), rgba(0, 0, 0, .17));
    bottom: 0;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
}
.myslider .slick-active.slick-center img{ scale: 1.2;}
.gray{ background: #f1ece8;}

.design-imgage h2{    margin: 0 0 20px 0px;
    font-size: 33px; text-transform: uppercase;
    color: var(--text-black);
    font-family: 'Anton';}
	.design-imgage  p{    font-size: 16px;
    line-height: 28px;}

	.section-heading.white_ h2{ color: #fff; text-transform: uppercase;}
	.profile-name figure img{ width: 80px; height: 80px; border-radius: 100%;}

.subscript---{ position: relative;
    background: #fff;
    padding: 27px 27px 0px 259px;
    border-radius: 6px;
    box-shadow: 0px 0px 4px 0px #cbc9c9;
    margin-top:23px;
}
.subscript--- .wpcf7-submit{
    width: 100%;
    background: var(--primary-color);
    border: 0;
    padding: 10px;
    border-radius: 30px;
    font-weight: 600;
}
.heade-section{    background: url(assets/images/hone-banner.jpg) no-repeat center top;
    background-size: cover;
    padding: 190px 0px 50px;
    background-attachment: fixed;}
   .heade-section h1 {
    font-size: 50px;
    margin: 0;
    font-family: var(--anton);
    color: #fff;
    text-transform: uppercase;
}
.subscript---:before{background: url(assets/images/avtar2.png);
    width: 250px;
    height: 320px;
    content: '';
    position: absolute;
    left: 0px;
    top: -9px;
    background-size: 100%;}
.subscript--- h2{
    font-size: 24px;
    color: var(--text-black);
    font-family: 'Anton';
}
.field-ts{    width: 100%;
    border: 1px solid #bbb6b6;
    padding: 10px 22px;
    border-radius: 30px;
}
.show_case_cta{    margin-top: 23px;}
.vds-row{
    background: #000;
    color: #fff;
    border-radius: 10PX;
    overflow: hidden; margin: 10px 0px;
    padding: 7px;
}
.vds-row h3{
    font-size: 16px;
    border-bottom: 1px solid #343030;
    padding-bottom: 10px;
}

.vds-row  span{
    display: block;
    font-size: 12px;
    color: var(--primary-color);
    font-weight: 600;
}
.vds-row  p{
    font-size: 13px;
    line-height: 17px;
}
.btns a{     text-decoration: none;
    background: var(--primary-color);
    color: #000;
    font-size: 12px;
    padding: 5px 8px;
    text-align: center;
    border-radius: 7px;
    font-weight: 600;
    text-transform: uppercase;}
    .btns a:hover{ background: #333; color: #fff;}
.btns{
    display: flex;
    justify-content: space-between;
    margin-bottom: 4px;
}
.field-ts:focus{ outline:none;}
.sbt-btn{
    position: absolute;
    right: 8px;
    color: #000000;
    background: var(--primary-color);
    border-radius: 100%;
    width: 36px;
    height: 36px;
    font-size: 14px;
    font-weight: 600;
    border: 0;
    top: 7px;
}
.social-media{  background: var(--primary-color);}
.social-media a{     font-size: 20px;
    color: #0e0e0e;
    text-decoration: none;
    display: flex;
    align-items: center;}
.social-list{  display: flex;  justify-content: space-around;}
.social-media a i{ font-size: 50px; color: #111; margin-right: 10px;}
.slide_items {
    border: 1px solid #ddd6d6;
    text-align: center;
    padding: 24px 12px !important;
    border-radius: 7px;
    box-shadow: 0px 0px 4px 0px #b9b6b6;
}
.slide_items figure img{ width: 80px; display: inline-block;}
#our_service .slick-slide{ padding:  0 10px;}

#our_service .slick-slide h3 {font-size: 16px;
    font-family: var(--poppins);
    font-weight: 600;
    text-transform: uppercase;}
#our_service{ margin-top: 30px;}
.design-create{
    background: #000;
    color: #fff;
}
.design-create h2{    margin-bottom: 20px;
    font-size: 32px;
    font-family: var(--anton);}
    .design-create p{ line-height: 28px;}
    .sc{ color: #fff;}
.subcription_field p{ margin: 0px;}
.reelsbox {
    padding: 0;
    margin: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap; gap: 2px;
}
#html5lightbox-watermark{ display: none!important;}
.reelsbox li{ width: 24%; position: relative; overflow: hidden; }
.reelsbox li img{ transition: .4s;
    width: 100%;
    filter: brightness(.3);
    height: 100%;
    height: 50vh;
    object-fit: cover;}
.reelsbox li:hover img {
    transform: scale(1.1);
    box-shadow: 0 3px 10px rgb(0 0 0 / 20%);
    filter: brightness(1);
}
.reelsbox li h3{ position: absolute;
    bottom: 19px;
    margin: 0;
    text-align: center;
    width: 100%;
    color: #fff;
    font-size: 25px;
    font-family: 'Anton';}
.mobile-menu{ display: none;}

.contact-form h2{font-size: 23px;
    font-weight: 700;
    border-bottom: 1px solid #686666;
    padding-bottom: 17px;
    margin-bottom: 30px;
}
.contact-form .wpcf7-form-control{  width: 100%;
    height: 50px;
    border: 1px solid #ccc;
    padding: 12px;
    border-radius: 6px;}
.contact-form textarea.wpcf7-form-control{ height: 120px;}
.contact-form .wpcf7-form-control.wpcf7-submit{
    width: auto;
    color: #000000;
    background: var(--primary-color);
    padding: 12px 45px;
    height: auto;
    font-size: 16px;
    font-weight: 700;
}
.address-{
    padding-left: 40px;
}
.address- ul{
    list-style: none;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.address- ul li{ width: 100%;}
.address- ul li a{ color: var(--primary-color); text-decoration: none;}

#our_service .slick-slide {
    margin: 0 10px;  /* Gap left and right */
}

#our_service .slick-list {
    margin: 0 -10px; /* Fix alignment */
}

#our_service .slick-slide > div {
    height: 100%;
}

#our_service .slide_items {
    background: #fff;
    padding: 20px;
    border-radius: 10px;
    text-align: center;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}






@media screen and ( max-width:991px) {
    .address- {
    padding-left: 0;
    margin-top: 30px;
}.social-media a i {
    font-size: 33px;
    margin-right: 5px;
}
    .mobile-menu{ display: inline-block;}
    .navbarlinks {    position: fixed; display: none;
    top: 68px;
    background: #000;
    left: 0;
    width: 100%;
    padding: 20px;}
    .navigation ul li {
    position: relative;
    width: 100%;
}
.navbarlinks.open{ display: block;}
.scrolled .navbarlinks{ top: 55px;}

.navigation ul {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
    gap: 0;
    flex-wrap: wrap;
}.social-list {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
}.subscript--- {
    padding: 355px 25px 25px 25px;
    margin-top: 23px;
}
.video-caption {
    position: relative;
    right: 0%;
    top: 0;
    transform: none;
    left: 0%; padding: 25px 0 0 0;
    padding-top: 0;
    padding-bottom: 0;
    text-align: left;
    bottom: auto;
    color: #000;
}
.video-caption h1 { font-size: 28px;  color: #000000;}
.number_counter {
    padding: 0;
    margin: 0;
    list-style: none;
    min-height: auto;
    border-left: 0;
    padding-left: 0;
}.section-heading h2 {  font-size: 24px;}
.social-media a{ font-size: 16px; margin: 10px 0px;}
.social-media { padding: 30px 0px!important;}
.header-app {  padding: 12px 0px;}
.logo{ width: 150px;}
.logo img{ height: auto;}
.navigation ul li a {
    font-size: 15px;
    font-weight: 500;
    display: block;
    border-bottom: 1px solid #2c2c2c;
    padding:6px 0px;
}.reelsbox li {
    width: 49%;
}.heade-section h1{ font-size: 32px;}
}