/*
Theme Name: Salient Child Theme
Description: This is a custom child theme for Salient
Theme URI:   https://themeforest.net/item/salient-responsive-multipurpose-theme/4363266
Author: ThemeNectar
Author URI:  https://themeforest.net/user/themenectar
Template: salient
Version: 1.0
*/

/* popup */
#con input.wpcf7-form-control.wpcf7-text.wpcf7-validates-as-required, #con select.wpcf7-form-control.wpcf7-select.wpcf7-validates-as-required, #con textarea.wpcf7-form-control.wpcf7-textarea {
    border-radius: unset !important;
    border: 1px solid;
    background-color: #fff;
    margin-bottom: 10px;
}
#con textarea.wpcf7-form-control.wpcf7-textarea {
    height: 120px;
    margin-bottom: 30px;
}
#con input.wpcf7-form-control.wpcf7-submit.has-spinner {
    margin: 0px auto;
    display: table;
    border-radius: unset !important;
    background-color: #154230 !important;
    padding: 15px 20px !important;
}
#con p {
    padding-bottom: 0 !important;
    font-size: 12px;
    line-height: 20px;
}
#con div#wpcf7-f235-o1 {
    width: 90%;
}
#con h2 {
    font-size: 30px;
    margin-bottom: 0 !important;
    line-height: 40px;
}
#con .wpcf7-response-output {
    border: unset !important;
    background-color: transparent !important;
    padding: unset !important;
    margin: unset !important;
    font-size: 13px;
}
#con .hover-wrap {
    margin: unset !important;
}
#con .hover-wrap img {
    height: 100%;
    object-fit: cover;
    width: 100%;
    aspect-ratio: 4 / 5.2;
}



#contact h2 {
  position: relative;
  display: inline-block;
  cursor: pointer;
  transition: all 0.3s ease;
}

/* Arrow */
#contact h2::after {
    content: "→";
    margin-left: 10px;
    opacity: 0;
    transform: translateX(-10px);
    display: inline-block;
    transition: 0.3s;
}


/* Hover */
#contact h2:hover {
  transform: translateX(-8px); /* 👈 text left move */
}

#contact h2:hover::after {
  opacity: 1;
  transform: translateX(0);
}


h1, h2, h3, h4, h5, h5, h6 ,p {
    font-family: visby !important;
}

#banner .row-bg.viewport-desktop.using-image {
    background-size: 100% 100% !IMPORTANT;
}

header#top {
    background: #101111a3;
}

#banner h1 {
    font-size: 80px !IMPORTANT;
    line-height: 1.1 !IMPORTANT;
}

#banner h6 {
    font-size: 24px;
    padding: 14px 0 !IMPORTANT;
}

#banner p {
    font-size: 20px !IMPORTANT;
}
#banner .hover-wrap-inner {
    position: relative;
}

#banner .hover-wrap-inner {
    position: relative;
}

#banner .hover-wrap-inner::before {
    content: "";
    position: absolute;
    top: 72px;
    left: 50.7%;
    transform: translate(103%, -199%) rotate(0deg);

    /* Size */
     /* apni requirement ke mutabiq */
    

    /* Agar image lagani ho */
    background: url('https://devue.onlinetestingserver.com/trebello/wp-content/uploads/2026/06/Component-3.png') no-repeat center;
    background-size: contain;
    z-index: 1;
    pointer-events: none;
    width: 120px;
    height: 200px;
    animation: spinLogo 4s linear infinite;
}
a#btn1 {
    margin: 0;
    font-size: 16px !IMPORTANT;
    padding: 19px 35px   !IMPORTANT;
    padding-right: 48px !IMPORTANT;
    color: black !IMPORTANT;
    transition: 0.9s;
    font-family: 'visby' !IMPORTANT;
    background: white !IMPORTANT;
    line-height: 1.4;
}

#top ul.sf-menu.sf-js-enabled.sf-arrows li a span {
    font-family: 'visby' !IMPORTANT;
    font-weight: 300;
    letter-spacing: 1.4px !IMPORTANT;
    font-size: 14px !IMPORTANT;
}

#top li#menu-item-179 a {
    position: relative;
}

#top li#menu-item-179 a:before {
    content: url(https://devue.onlinetestingserver.com/trebello/wp-content/uploads/2026/05/Vector.png);
    position: absolute;
    right: -15px;
    top: 1px;
}

/* btn hover */
a#btn1 i.fa.fa-arrow-right::after, a#btn1 i.fa.fa-instagram::after {
    color: #fff;
    content: "\f061";
    position: absolute;
    left: 0;
    transition: 0.3s;
    opacity: 0;
    transform: translateX(-10px);
}
a#btn1 i.fa.fa-instagram::after {
    content: "\f16d";
	font-family: 'fontawesome';
}
a#btn1:hover i.fa.fa-arrow-right::after {
    transform: translateX(15px);
    opacity: 1;
}
a#btn1:hover i.fa.fa-instagram::after {
    transform: translateX(15px);
    opacity: 1;
}
a#btn1:hover i.fa.fa-arrow-right:before {
    transform: translateX(8px) !important;
    position: absolute;
    opacity: 0;
}
a#btn1:hover i.fa.fa-instagram:before {
    transform: translateX(8px) !important;
    position: absolute;
    opacity: 0;
}
a#btn1:hover {transform: unset !important;}
a#btn1 i.fa.fa-arrow-right:before {transition: 0.3s !important;}
a#btn1 i.fa.fa-instagram:before {transition: 0.3s !important;}

/* end */
a#btn1 i.fa.fa-arrow-right, a#btn1 i.fa.fa-instagram {
    background: #154230 ! IMPORTANT;
    border-radius: 4px;
    color: white;
    width: 50px;
    height: 55px;
    line-height: 54px;
    right: 9px;
    font-size: 24px;
}

#banner .lgt-sec {
    position: absolute;
    top: -170px !important;
    left: 70.5%;
    transform: translate(103%, -199%) rotate(0deg);
    width: auto;
    z-index: 99;
}

@keyframes spinLogo {
    from {
        transform: translate(133%, -199%) rotate(0deg);
    }

    to {
        transform: translate(133%, -199%) rotate(360deg);
    }
}

#about .tre-sec {
    margin-bottom: 171px !IMPORTANT;
}

#about #r2 {margin-bottom: 0;border-top: 1px solid #D3AC79;}

#about #r2 .vc_col-sm-6 {
    padding: 0;
}

#about #r2 .vc_col-sm-6 .vc_column-inner {
    height: 310px;
    justify-content: flex-end;
    padding-bottom: 43px;
    border-right: 1px solid #D3AC79;
    transition: 0.9s;
    background: #ffffff00;
    padding-left: 14px;
}
#about #r1 .hover-wrap-inner {
    overflow: hidden;
}

#about #r1 img {
    transition: 0.9s;
}

#about #r1 img:hover {
    transform: scale(1.1);
}
#about .row-bg.viewport-desktop.using-image {
    background-size: 46% 22%;
    background-position: left top !IMPORTANT;
    background-position-x: 81px !IMPORTANT;
}

#about #r2 p {
    color: #154230;
}

#about #r2 .d1 .vc_column-inner:hover {
    background: #154230 ! IMPORTANT;
    color: red !IMPORTANT;
    border-color: #154230 ! IMPORTANT;
}

#about #r2 .d1 .vc_column-inner:hover h3 span {
    color: #D3AC79 ! IMPORTANT;
    transition: 0.9s;
}

#about #r2 .d1 .vc_column-inner:hover p {
    color: #D3AC79 !IMPORTANT;
    transition: 0.9s;
}

#about .de-sec {
    transition: 0.9s;
}

#about #r2 .d1 .vc_column-inner:hover .de-sec {
    transition: 0.9s;
    transform: translate(0px, -15px);
}

#service div#r4 {
    margin-bottom: 61px !IMPORTANT;
}

#service div#r4 h2 {
    margin-bottom: 0;
}

#service div#r2 .wpb_text_column.wpb_content_element {
    max-width: 100% !IMPORTANT;
}

#service .hover-wrap {
    margin: 0;
}

#service .hover-wrap-inner {position: relative;}

#service .hover-wrap-inner:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 185px;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.9) 93.19%);
    mix-blend-mode: normal;
    right: 0;
    z-index: 1;
    bottom: 0;
    transition: 0.9s;
}
#service .vc_col-sm-4 .vc_column-inner {
    transition: 0.9s;
}
#service .vc_col-sm-4 .vc_column-inner p {
    min-height: 104px;
}
#service .vc_col-sm-4 .vc_column-inner:hover .hover-wrap-inner:before {
    height: 100%;
    transition: 0.9s;
}

#service #r2 ul {
    margin: 0;
    opacity: 0;
}

#service #r2 ul li {
    list-style: none;
    display: inline-block;
    font-weight: 600;
    background: white;
    color: black;
    padding: 6px 17px !important;
    border-radius: 4px;
    font-size: 14px;
}

#service #r2 h5 {
    text-transform: uppercase;
    font-weight: 800 !IMPORTANT;
    letter-spacing: 1px !IMPORTANT;
    margin-bottom: 21px;
    opacity: 0;
}

#service #r2 h3 {
    border-bottom: 1px solid #ffffff00;
    margin-bottom: 15px;
    padding-bottom: 10px;
}

#service #r2 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-51%, 83%);
    width: 90%;
    z-index: 99;
    transition: 0.9s;
}

#service .vc_col-sm-4 .vc_column-inner:hover h3 {
    border-color: white !IMPORTANT;
}

#service .vc_col-sm-4 .vc_column-inner:hover p {
    opacity: 1;
}

#service p {
    opacity: 0;
}

#service .vc_col-sm-4 .vc_column-inner:hover h5 {
    opacity: 1 !IMPORTANT;
}

#service .vc_col-sm-4 .vc_column-inner:hover #r2 ul {
    opacity: 1;
}

#service .vc_col-sm-4 .vc_column-inner:hover #r2 {
    transform: translate(-51%, -5%);
    transition: 0.9s;
}

#service .fr-sec p {
    opacity: 1;
    float: right;
}

#portfolio #r5 {
    margin-bottom: 49px !IMPORTANT;
}

#portfolio #r5 h2 {
    margin-bottom: 0;
}

#portfolio .port-img-sec {
    width: 100%;
    transition: 0.9s;
}

#portfolio div#p1 {
}

#portfolio a#btn1 {
    margin: 50px auto 0 !IMPORTANT;
    display: table;
}


#portfolio .hover-wrap {
padding: 0;
}

#portfolio .hover-wrap .hover-wrap-inner a:before {
content: '';
font-size: 80px;
position: absolute;
z-index: 99;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
opacity: 0;
background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.9) 93.19%);
mix-blend-mode: normal;
transition: .9s;
}
#portfolio .hover-wrap .hover-wrap-inner:hover a:before {
opacity: 1 !important;
}

#contact p {
    font-size: 18px;
}

#contact h2 {
    margin-bottom: 0;
}
#contact .row_col_wrap_12.col.span_12.custom.left {
    transition: 0.9s;
}

#contact .row_col_wrap_12.col.span_12:hover h2  {
      transform: translateX(-8px);
}

#contact .row_col_wrap_12.col.span_12:hover h2:after {
    opacity: 1;
    transform: translateX(0px);
}

#contact .row_col_wrap_12.col.span_12:hover p {
    transform: translateX(-8px) !important;
    transition: 0.9s;
}
#sec4 #r1 h2 {
    margin-bottom: 0;
}

#sec4 #r2 {
    border-top: 0px solid #154230;
    border-bottom: 1px solid #154230;
    padding: 40px 0 !IMPORTANT;
    margin-top: 50px;
}

#sec4 #r2 img {
    margin: 0;
    width: auto;
}

#sec4 #r2 h4 {
    margin-bottom: 0;
    text-transform: uppercase;
}

#sec4 #r2 p {
    font-size: 13px;
}

#sec4 .iwithtext .iwt-icon {
    top: -3px;
}

div#sec4 {
    padding-bottom: 0 !IMPORTANT;
}

#sec4 div#r3 {
    padding-top: 30px !IMPORTANT;
}
#contact p {
    position: relative;
    display: inline-block;
    cursor: pointer;
    transition: all 0.3s ease;
}

#contact p:hover {
    transform: translateX(-8px);
    transition: 0.9s;
}
/* a#btn1:hover i {
    font-size: 20.1px !IMPORTANT;
    transition: 0.9s;
} */
@media (max-width: 1600px) {
	#about #r2 .vc_col-sm-6 .vc_column-inner {
    height: 322px;
}
}
@media (max-width: 1440px) {}
@media (max-width: 1366px) {
	#about #r2 .vc_col-sm-6 .vc_column-inner {
    height: 297px;
}
#banner .hover-wrap-inner::before {
    left: 49.9%;
}	
#service .vc_col-sm-4 .vc_column-inner:hover #r2 {
    transform: translate(-51%, -11%);
}	
}
@media (max-width: 1280px) {
	#con .ho {
    transform: scale(0.95);
    transform-origin: center bottom;
}
#banner .lgt-sec {
    left: 78.5%;
}
    #banner .hover-wrap-inner::before {
        left: 56.2%;
    }	
}
@media (max-width: 1024px) {}
@media (max-width: 820px) {
	#banner .hover-wrap-inner::before {
    display: none;
}
	header#top {
    padding: 12px 0 !IMPORTANT;
}

div#header-outer {
    padding-top: 0;
}

#banner .row-bg.viewport-desktop.using-image {
    background-size: cover !IMPORTANT;
    background-position: left center !IMPORTANT;
}

div#banner {text-align: center;padding-top: 140px !IMPORTANT;padding-bottom: 80px !IMPORTANT;}

#banner h1 {
    font-size: 41.3px !IMPORTANT;
}

#banner .lgt-sec {
    display: none;
}

#banner h6 {
    font-size: 22px !IMPORTANT;
}

div#about {
    text-align: center;
}

#about p br {
    display: none;
}

#about .row-bg.viewport-desktop.using-image {
    background-image: unset !IMPORTANT;
}

#about .tre-sec {
    margin-bottom: 21px !important;
}

#about #r2 .vc_col-sm-6 .vc_column-inner {
    padding: 20px !IMPORTANT;
    height: 250px;
}

#about #r2 .vc_col-sm-6 {
    margin-bottom: 0;
}

#r4 .ser-sec {
    text-align: center !IMPORTANT;
}

#service .fr-sec p {
    float: unset !IMPORTANT;
    text-align: center;
}

#service div#r4 {
    margin-bottom: 20px !IMPORTANT;
}
#service .s-img-sec {
    width: 100%;
}
div#portfolio {
    text-align: center !IMPORTANT;
}

div#portfolio p br {
    display: none;
}

div#contact {
    text-align: center;
}

#sec4 div#r1 p br {
    display: none;
}
}
@media (max-width: 768px) {}
@media (max-width: 480px) {}
@media (max-width: 428px) {}
@media (max-width: 414px) {}
@media (max-width: 390px) {}
@media (max-width: 375px) {}
@media (max-width: 360px) {}