/* DETAILS
==================================================
	Theme Name: OCAMPO (Cesar Ocampo)
==================================================
*/

@charset "utf-8";


:root {
    --yellow:#F2CE0A;
	--common-transition: all 0.3s ease 0s;
}
html{ scroll-padding-top: var(--scroll-padding, 120px); }
html.toggle-button-open, html.toggle-button-open body { overflow-y: hidden; }


/*Mobile Menu*/
/* 
/ edit the hamburger and close icon colors here / */

.lytbox-button { --hamburger-color: #fff; --close-x-color: #fff; display: block; height: 18px; cursor: pointer; position: relative; z-index: 101; }

/* / must add in elementor template ID number to make the menu full width / */
.elementor-410 { width: 100%; }

/* / end editing / */

.lytbox-navigation { position: fixed; top: 0; left: 0; transform: translateX(100%); overflow: hidden; transition: transform 0.2s; width: 100%; height: 100vh; z-index: 100; overflow: auto; }
.lytbox-navigation { display: flex; justify-content: center; align-items: center; }

/* toggle hamburger*/

.lytbox-button .hamburguer { position: relative; }
.lytbox-button .hamburguer span{ display: block; height: 2px; width: 24px; background: var(--hamburger-color); transform-origin: 50% 50%; transition: all 0.1s 0.2s ease, transform 0.2s ease; }
.lytbox-button .hamburguer span:nth-child(2) { transform: translate(0, 6px); }
.lytbox-button .hamburguer span:nth-child(3) { transform: translate(0, 12px); }
.lytbox-nav_control { position: absolute; left: -9999px; width: 100%; clip: rect(0, 0, 0, 0); }
/* .lytbox-nav_control:checked~.lytbox-navigation { transform: translateX(0); opacity: 1; transition: transform 0.3s, opacity 0.3s; } */
/* .lytbox-nav_control:checked~.lytbox-button .hamburguer { transition: all 0.1s 0s ease; } */

.toggle-button-open .lytbox-navigation{ transform: translateX(0); opacity: 1; transition: transform 0.3s, opacity 0.3s;}
.toggle-button-open .lytbox-button .hamburguer { transition: all 0.1s 0s ease; }


/* / closed X / */
/* .lytbox-nav_control:checked~.lytbox-button .hamburguer span { background: var(--close-x-color); transition: all 0.1s ease, transform 0.1s 0.2s ease; }
.lytbox-nav_control:checked~.lytbox-button .hamburguer span:first-child { opacity: 0; }
.lytbox-nav_control:checked~.lytbox-button  .hamburguer span:nth-child(2) { transform: translate(0, 6px) rotate(45deg); }
.lytbox-nav_control:checked~.lytbox-button .hamburguer span:nth-child(3) { transform: translate(0, 4px) rotate(-45deg); } */

.toggle-button-open .lytbox-button .hamburguer span { background: var(--close-x-color); transition: all 0.1s ease, transform 0.1s 0.2s ease; }
.toggle-button-open .lytbox-button .hamburguer span:first-child { opacity: 0; }
.toggle-button-open .lytbox-button  .hamburguer span:nth-child(2) { transform: translate(0, 6px) rotate(45deg); }
.toggle-button-open .lytbox-button .hamburguer span:nth-child(3) { transform: translate(0, 4px) rotate(-45deg); }


.elementor-nav-menu .sub-arrow { filter: brightness(0) invert(1); position: absolute; right: 0; }

.elementor-nav-menu .menu-item > a{ position: relative;}
.elementor-nav-menu .menu-item.current-menu-item > a::before{ content: ""; width: calc(100% - 15px); height: 1px; background: #fff; position: absolute; right: 0; bottom: 0; left: 0; margin: 0 auto;}



/* .header-sticky .main-header { background-color: rgb(46 59 78 / 82%) !important; backdrop-filter: blur(10px); } */
.elementor-sticky--effects{ background-color: rgb(46 59 78 / 82%) !important; backdrop-filter: blur(10px);}

.nu-scroll {transform: translateY(-80px);}
.nu-scroll1 {transform: translateY(-80px);}

/* .slider-wraper .swiper-slide-inner{ position: relative;} */
.slider-wraper .swiper-slide-inner::before{ content: ""; background: linear-gradient(180deg, rgba(106, 136, 180, 0) 0%, rgba(33, 36, 40, 0.7) 100%); position: absolute; z-index: 1; top: 0; right: 0; bottom: 0; left: 0;}
.slider-wraper .swiper-slide-inner .swiper-slide-contents{ z-index: 5;}
.slider-wraper .elementor-swiper-button, .slick-arrow { width: 70px; height: 70px; background-color: #fff !important; background-repeat: no-repeat !important; background-position: center !important; background-size: 20px !important; border-radius: 50% !important; border: 1px solid #2E3B4E !important; z-index: 10; font-size: 0 !important; padding: 0 !important; transition: var(--common-transition);}
.slider-wraper .elementor-swiper-button.elementor-swiper-button-prev, .slick-prev.slick-arrow{ background-image: url(/wp-content/uploads/2024/10/silde-prev-icon.svg);}
.slider-wraper .elementor-swiper-button.elementor-swiper-button-next, .slick-next.slick-arrow{ background-image: url(/wp-content/uploads/2024/10/slide-next-icon.svg);}
.slick-arrow::before{ display: none;}
.slider-wraper .elementor-swiper-button *{ display: none;}
.slider-wraper .elementor-swiper-button:hover, .slick-arrow:hover{ background-color: #F2CE0A !important; border-color: #F2CE0A !important;}
.slider-wraper .swiper-slide-contents .elementor-button { padding: 5px 30px 5px 0; background-image: url(/wp-content/uploads/2024/10/yellow-arrow.svg) !important; background-position: right 5px center !important; background-size: 16px !important; background-repeat: no-repeat !important; }
.slider-wraper .swiper-slide-contents .elementor-button:hover{ background-position: right 0 center !important;}


.tab-content-holder{ position: relative;}

.service-tab-wraper .e-n-tabs .e-n-tabs-heading button.e-n-tab-title{ position: relative;}
.service-tab-wraper .e-n-tabs .e-n-tabs-heading button.e-n-tab-title::before { content: ""; background: url(/wp-content/uploads/2024/10/tab-arrow-1.svg); background-repeat: no-repeat !important; background-position: center !important; background-size: 100% !important; position: absolute; z-index: 1; top: 50%; right: 20px; width: 30px; height: 30px; transform: translateY(-50%); opacity: 0; transition: var(--common-transition); visibility: hidden;}
.service-tab-wraper .e-n-tabs .e-n-tabs-heading button.e-n-tab-title:hover::before, .service-tab-wraper .e-n-tabs .e-n-tabs-heading button.e-n-tab-title[aria-selected="true"]::before{ visibility: visible; opacity: 1;}

@media only screen and (min-width: 768px){
    .tab-content-holder .elementor-widget-image .elementor-widget-container{ padding-bottom: 50%; position: relative; overflow: hidden;}
    .tab-content-holder::before { content: ""; background: linear-gradient(157.3deg, rgba(33, 36, 40, 0.7) 34.95%, rgba(0, 0, 0, 0) 79.09%); position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 4; }
    .tab-content-holder img, .tab-content-holder video { position: absolute !important; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: 3; }
    .tab-content-holder .e-hosted-video { aspect-ratio: inherit !important; padding-bottom: 50%; position: relative; overflow: hidden;}
    .tab-content-holder img, .tab-content-holder video {width: 100%; height: 100%; object-fit: cover; z-index: 3; }
    .tab-content-holder .tab-content-info { position: absolute !important; z-index: 4; padding-left: calc(25% + 20px); }
    .service-tab-wraper .e-n-tabs .e-n-tabs-heading { position: absolute; z-index: 5; top: 0; bottom: 0; left: 0; width: 25%; border-right: 1px solid #FFFFFF80; }
}
@media screen and (min-width: 768px) and (max-width: 880px) { 
    .service-tab-wraper .e-n-tabs .e-n-tabs-heading{ width: 30%;}
    .tab-content-holder .tab-content-info{ padding-left: calc(30% + 20px);}
}
@media only screen and (min-width: 1025px){ 
    .tab-content-holder .tab-content-info{ padding-left: calc(25% + 30px);}
}
@media only screen and (min-width: 1201px){
    .tab-content-holder .tab-content-info { padding-left: calc(25% + 50px); }
}

/* ============ Sectors-sec Start ============ */
.sectors-gallery { padding: 0 35px; }
.sectors-gallery .sectors-info .image{ position: relative; padding-bottom: 165%; transition: all 0.7s ease 0s; }
.sectors-gallery .sectors-info .image img{ position: absolute; left: 0; right: 0; top: 0; bottom: 0; width: 100%;  height: 100%; object-fit: cover;}
.sectors-gallery .sectors-info .image:after{ content: ''; position: absolute; left: 0; right: 0; top: 0; bottom: 0; width: 100%; height: 100%; background: rgba(46, 59, 78, 0.5); }
.sectors-gallery .sectors-info .image-desc{ position: absolute; top: 50%; left: 0; right: 0; transform: translateY(-50%); z-index: 2; border: 5px solid var(--yellow); padding: 15px 10px; margin: 0 15px; transition: var(--common-transition); opacity: 0; }
.sectors-gallery .sectors-info:hover .image-desc{ opacity: 1; }

.sectors-gallery .sectors-info h6{ color: #fff; margin-bottom: 0; }
.sectors-gallery .sectors-info .image-desc p{ margin-top: 30px; }
.sectors-gallery .sectors-info .image-desc p:last-child{ margin-bottom: 0; }
.sectors-gallery .sectors-info .bottom-desc{  position: absolute; bottom: 30px; left: 0; right: 0; z-index: 2;  padding: 0 10px; margin: 0 10px; text-align: center; transition: var(--common-transition); }
.sectors-gallery .sectors-info:hover .bottom-desc{ opacity: 0; }
.sectors-gallery .sectors-info:hover .image{ transform: scale(1.3); }

.sectors-gallery .sectors-info{ position: relative; overflow: hidden;}
.sectors-gallery .image-desc{ text-align: center; color: #fff;}

.sectors-gallery .slick-list{ margin: 0 -5px;}
.sectors-gallery .slick-list .slick-slide { padding: 0 5px; }
.sectors-gallery .slick-prev.slick-arrow { left: -35px; }
.sectors-gallery .slick-next.slick-arrow { right: -35px; }
.sectors-gallery-slider:not(.slick-initialized){ display: flex; overflow: hidden; }
.sectors-gallery-slider:not(.slick-initialized) .gallery-slider-col{ width: 25%; padding: 0 5px; flex: 0 0 auto;}
@media only screen and (max-width: 1366px){
    .sectors-gallery { padding: 0 25px; }
    .slider-wraper .elementor-swiper-button, .slick-arrow{ width: 50px; height: 50px; background-size: 15px !important;}
    .service-tab-wraper .e-n-tabs .e-n-tabs-heading button.e-n-tab-title::before{ width: 20px; height: 20px;}
}
@media only screen and (max-width: 1200px){
    .elementor-nav-menu .menu-item.current-menu-item > a::before{ width: calc(100% - 20px);}
    .sectors-gallery .sectors-info .image{ padding-bottom: 150%;}
    .sectors-gallery-slider:not(.slick-initialized) .gallery-slider-col{ width: 33.33%}
}
@media only screen and (max-width: 1199px){
    .sectors-gallery .sectors-info .image-desc{ opacity: 1; background-color: #2e3b4ebf; margin: 0 30px;}
    .sectors-gallery .sectors-info .bottom-desc{ display: none;}
}
@media only screen and (max-width: 1024px){
    .elementor-nav-menu .menu-item.current-menu-item > a::before{ display: none;}
    .elementor-nav-menu .menu-item.current-menu-item > a{ color: var(--yellow) !important;}
}
@media only screen and (max-width: 880px){
 .nu-scroll {transform: translateY(-65px);}
 .nu-scroll1 {transform: translateY(-65px);}
 .about-left-image{ position: relative; width: 100%; padding-bottom: 60%;}
 .sectors-gallery-slider:not(.slick-initialized) .gallery-slider-col{ width: 50%}
 .sectors-gallery .sectors-info .image { padding-bottom: 140%; }
 .sectors-gallery .sectors-info .image-desc p { margin-top: 20px; }
 .slider-wraper .elementor-swiper-button, .slick-arrow{ width: 45px; height: 45px;}
 .sectors-gallery .slick-next.slick-arrow { right: -20px; }
 .sectors-gallery .slick-prev.slick-arrow { left: -20px; }
}
@media only screen and (max-width: 767px){
    .hero-border{ display: none;}
    .hero-container-holder { position: relative; padding: 120px 0 30px; }
    .next-sec{ position: relative; bottom: 0 !important;}
    .service-tab-wraper .e-n-tabs .e-n-tabs-heading button.e-n-tab-title{ background: #2E3B4E !important; color: #fff !important; border-color: #fff !important;}
    .service-tab-wraper .e-n-tabs .e-n-tabs-heading button.e-n-tab-title::before{ background: url(/wp-content/uploads/2024/10/down-arrow.svg); width: 18px; height: 18px;     visibility: visible; opacity: 1;}
    .tab-content-info { position: relative; }
    .tab-content-info * { color: #2e3b4ebf !important;}
    .sectors-gallery{ padding: 0 20px;}
    .sectors-gallery-slider:not(.slick-initialized) .gallery-slider-col{ width:100%;}
    .sectors-gallery .sectors-info .image { padding-bottom: 87%;}
}

@media only screen and (max-width: 479px){
    .sectors-gallery .sectors-info .image { padding-bottom: 125%; }
}