/*
Theme Name: Sailo Child
Theme URI: http://themeforest.net/user/wpoceans/portfolio/
Author: wpoceans
Author URI: http://themeforest.net/user/wpoceans
Description: Sailo - Industry WordPress Theme
Template:	sailo
Version: 1.0
Text Domain: sailo-child
*/

.top-left:before {
    position: absolute!important;
    left:-1010px!important;
    top: 0!important;
    background: #1a1e5d;
    content: ''!important;
    width: 1500px!important;
    
    clip-path: polygon(
        0 0,
        94% 0,
        95% 50%,
        94% 100%,
        0 100%
    );
}

.banner-area .swiper-slide-inner {
    width: 1270px!important;
    margin: auto;
}

.banner-area .swiper-slide-inner .swiper-slide-contents {
    width: 68%!important;
}

/*.banner-area .elementor-background-overlay{*/
/*background: linear-gradient(*/
/*90deg,*/
/*#1f2f3a 0%,*/
/*#1f2f3a 28%,*/
/*rgba(31,47,58,0.95) 38%,*/
/*rgba(31,47,58,0.75) 50%,*/
/*rgba(31,47,58,0.45) 62%,*/
/*rgba(31,47,58,0.20) 72%,*/
/*rgba(31,47,58,0) 82%*/
/*) !important;*/
/*}*/

.banner-area .elementor-background-overlay{
background: linear-gradient(
90deg,
rgba(31,47,58,0.85) 0%,
rgba(31,47,58,0.85) 25%,
rgba(31,47,58,0.7) 40%,
rgba(31,47,58,0.5) 55%,
rgba(31,47,58,0.3) 65%,
rgba(31,47,58,0.15) 75%,
rgba(31,47,58,0) 85%
) !important;
}


.banner-area span {
    display: block;
    font-size: 18px;
    line-height: 1.3em;
    color: #4290c8;
    letter-spacing: 3px;
    margin-bottom: 5px;
}

.banner-area .swiper-slide-inner .swiper-slide-contents .elementor-slide-heading {
    margin-bottom: 10px!important;
}

.banner-area .swiper-slide-inner .swiper-slide-contents .elementor-slide-description {
    width: 75% !important;
}

.banner-area .elementor-swiper-button{
    background: rgb(6 136 211 / 48%);
    width: 60px;
    height: 60px;
    line-height: 60px;
    border: 2px solid #8fd6ff;
    border-radius: 50%;
    opacity: 0.7;
    text-align: center;
    display: flex !important;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;;
}

.banner-area .elementor-swiper-button:hover{
   background: #0688d3!important; 
}

.banner-area a.elementor-slide-button{
   padding: 15px 25px!important; 
}

.banner-area .elementor-slide-button::after{
content:"\00BB";
font-size:28px;
margin-left:8px;
transition:0.3s;
top: 3px;
position: relative;
}

.banner-area  .elementor-slide-button:hover::after{
margin-left:12px;
}

.stats-bg{box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;}

.stat-tag .elementor-counter-number-wrapper span.elementor-counter-number{
color: transparent;
-webkit-text-stroke: 1px #0688d3;
}

.stat-tag .elementor-counter-title {
    text-align: center;
    display: block!important;
}

.stat-tag .elementor-counter-title span{
color:#0688d3;
}


.product-tabh .e-n-tabs-heading .e-n-tab-title {
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.08) !important;
}

.tech-box .elementor-image-box-wrapper .elementor-image-box-content h3 {
    margin: 0!important;
    margin-bottom: 10px!important;
}

.tech-box .elementor-image-box-wrapper .elementor-image-box-content {
    padding: 25px 24px 40px!important;
    background: #ebebeb!important;
    border-radius: 0 0 10px 10px!important;
}

.tech-box .elementor-image-box-wrapper .elementor-image-box-img img{
    border-radius: 10px 10px 0px 0px!important;
}

.tech-box .elementor-image-box-wrapper {
    background: #ebebeb;
    border-radius: 10px!important;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
}

.ind-slide .elementor-swiper-button-prev {
left: -57px !important;
}

.elementor-element .swiper~.elementor-swiper-button-next{
right: -57px !important;
}

.contact-info-section .office-info .office-info-item .office-info-icon{
    background: #0688d3;    
}

.contact-info-section .office-info .office-info-item .office-info-text h2 {
    font-size: 22px;
    font-weight: 600;
    margin: 18px 0 10px;
}

.contact-info-section .office-info .office-info-item {
    min-height: 325px;
    border-radius: 10px;
}


.contact-form .wpo-contact-pg-section form .submit-area .theme-btn {
    background: #0688d3;
    border-radius: 7px;
    padding: 19px 31px;
    font-weight: 500;
    text-transform: capitalize;
    font-size: 17px;
}

.contact-form .wpo-contact-pg-section form .submit-area .theme-btn:hover{
    background:#1a1e5d !important; 
}

.prod-area figure.elementor-image-box-img img {
    border-radius: 16px 16px 0 0;
}


.back-to-top,.back-to-top:hover{
	background-color: rgb(42 132 185);
    border: 2px solid rgb(42 132 185);
}
.office-info-text a {
    color: #333 !important;
}

/* =========================
   Newsletter Form UI/UX
   Target Class:
   .sub-form .news-form
========================= */

/* Form Main Wrapper */
.sub-form form.mailpoet_form {
    max-width: 100%;
    margin: auto;
    padding:0!important;
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(10px);
}

/* Two Column Spacing */
.sub-form .news-form {
    gap: 0px;
    margin-bottom: 28px !important;
}

/* Input Field Design */
.sub-form .news-form .mailpoet_text {
    width: 100% !important;
    height: 54px;
    padding: 0 22px !important;
    border-radius: 7px;
    border: 1px solid rgba(255,255,255,0.18);
    background: rgba(255,255,255,0.95);
    font-size: 15px;
    font-weight: 500;
    color: #1d1d1d;
    transition: all 0.35s ease;
    box-shadow: 0 8px 25px rgba(0,0,0,0.08);
}

/* Placeholder */
.sub-form .news-form .mailpoet_text::placeholder {
    color: #7c7c7c;
    font-weight: 400;
    letter-spacing: 0.3px;
}

/* Hover */
.sub-form .news-form .mailpoet_text:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.12);
}

/* Focus */
.sub-form .news-form .mailpoet_text:focus {
    outline: none;
    border-color: #ffffff;
    background: #ffffff;
    box-shadow: 0 0 0 4px rgba(255,255,255,0.18);
    transform: translateY(-2px);
}

/* Button Wrapper */
.sub-form .news-form-btn {
    margin-top: 12px;
}

/* Subscribe Button */
.sub-form .news-form-btn .mailpoet_submit {
height: 55px;
    border: none !important;
    border-radius: 14px;
    background: linear-gradient(135deg, #1a1e5d, #1a1e5d);
    color: #fff;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: all 0.35s ease;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
    position: relative;
    overflow: hidden;
    width: 100% !important;
    padding: 0 40px !important;
    margin: auto !important;
}

/* Button Hover */
.sub-form .news-form-btn .mailpoet_submit:hover {
    transform: translateY(-3px);
    background: linear-gradient(135deg, #1a1e5d, #1a1e5d);
    color: #ffffff;
    box-shadow: 0 14px 35px rgba(0,0,0,0.18);
}

/* Button Active */
.sub-form .news-form-btn .mailpoet_submit:active {
    transform: scale(0.98);
}

/* Success Message */
.sub-form .mailpoet_validate_success {
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.18);
    color: #ffffff;
    padding: 16px 20px;
    border-radius: 12px;
    margin-top: 18px;
    font-size: 15px;
    text-align: center;
    backdrop-filter: blur(10px);
}

/* Error Message */
.sub-form .mailpoet_validate_error {
    background: rgba(255, 80, 80, 0.12);
    border: 1px solid rgba(255, 80, 80, 0.25);
    color: #ffffff;
    padding: 16px 20px;
    border-radius: 12px;
    margin-top: 18px;
    font-size: 15px;
    text-align: center;
}

/* Validation Error */
.sub-form .mailpoet_error {
    color: #ffdede;
    font-size: 13px;
    margin-top: 6px;
    display: block;
}

.sub-form #mailpoet_form_1 .mailpoet_paragraph{
margin-bottom: 15px!important;    
}

/* Mobile Responsive */
@media (max-width: 767px) {

    .sub-form form.mailpoet_form {
        padding: 30px 20px;
        border-radius: 18px;
    }

    .sub-form .news-form {
        gap: 18px;
        margin-bottom: 18px !important;
    }

    .sub-form .news-form .mailpoet_text {
        height: 54px;
        font-size: 15px;
        padding: 0 18px !important;
    }

    .sub-form .news-form-btn .mailpoet_submit {
        height: 56px;
        font-size: 16px;
    }
}

.contact-form {
box-shadow: 0px 5px 15px 0px rgba(62, 65, 159, 0.1);
}

.post-area .elementor-post__text {
    padding-bottom: 20px !important;
}

.post-area .elementor-post__read-more-wrapper a.elementor-post__read-more {
    background: #0688d3;
    color: #fff !important;
    padding: 15px 25px;
    border-radius: 5px;
    text-decoration: none !important;
    font-style: normal !important;
}

.post-area .elementor-post__read-more-wrapper a.elementor-post__read-more:hover{
background: #1A1E5D;
}


@media(min-width: 768px) and (max-width: 1024px){
    
.banner-area .swiper-slide-inner {width: 85% !important; margin: auto;}
.banner-area .elementor-swiper-button{width: 40px; height: 40px; line-height: 40px;}
.banner-area .swiper-slide-inner .swiper-slide-contents{width: 85% !important;}
.elementor-element .ind-slide .elementor-swiper-button-next {right: 10px !important;}
.ind-slide .elementor-swiper-button-prev {left: 10px !important;}
.contact-info-section .container{max-width: 100%;}
.contact-info-section .container .col-md-6 { width: 33.33%;}
.contact-info-section .office-info .office-info-item{padding:20px;}
.contact-info-section .office-info .office-info-item .office-info-icon{width: 65px; height: 65px; line-height: 65px;}
.contact-info-section .office-info .office-info-item .office-info-icon .icon .fi:before{font-size: 26px;}
.main-menu-sec .elementor-nav-menu a{justify-content: space-between!important;}
.main-menu-sec .elementor-nav-menu a span.sub-arrow {padding-inline-end: inherit; background: #1a1e5d1a; padding: 7px !important; border-radius: 5px;}
    
}


@media(min-width: 320px) and (max-width: 767px){

.banner-area .swiper-slide-inner {width: 92% !important; margin: auto;} 
.banner-area .elementor-swiper-button{width: 40px; height: 40px; line-height: 40px;}
.banner-area .swiper-slide-inner .swiper-slide-contents{width: 90% !important; text-align: center !important; margin: auto!important;}
.banner-area .swiper-slide-inner .swiper-slide-contents .elementor-slide-description {width: 95% !important; margin: auto; text-align: center;}
.banner-area a.elementor-slide-button {padding: 11px 20px !important;line-height: 1em !important;}
.elementor-element .ind-slide .swiper~.elementor-swiper-button-next{right: 10px !important;}
.ind-slide .elementor-swiper-button-prev {left: 10px !important;}
.sub-form form.mailpoet_form{border-radius:0px!important;}
.contact-info-section .office-info .office-info-item{min-height: 100%!important;}
.contact-info-section .office-info .office-info-item{padding:20px;}
.contact-info-section .office-info .office-info-item .office-info-icon{width: 50px; height: 50px; line-height: 50px;}
.contact-info-section .office-info .office-info-item .office-info-icon .icon .fi:before{font-size: 20px;}
.contact-info-section .office-info .office-info-item .office-info-text h2{font-size: 18px;}
.main-menu-sec .elementor-nav-menu a{justify-content: space-between!important;}
.main-menu-sec .elementor-nav-menu a span.sub-arrow {padding-inline-end: inherit; background: #1a1e5d1a; padding: 7px !important; border-radius: 5px;}
    
}