/*
Theme Name: White Gold Theme
Theme URI: https://webbkod.com
Description: Child theme for kidsworld
Author: Naimesh Rao
Template: kidsworld
Version: 1.0
*/

:root{
    --primary: #C69453;
    --primary-black: #141105;
    --primary-dark: #25241F;
    --primary-medium: #FFDDB0;
    --primary-light: #F7D9B5;
    --primary-elight: #F3F1EC;
    --primary-edark: #463B2A;
    --primary-muted: #C9C9C9;
    --primary-light-2: #fef5e6;

    --secondary: #2E7D32;
    --secondary-light: #EAFFED;

    --black: #000;
    --white: #fff;

    --gray-900: #252525;
    --gray-800: #40403B;
    --gray-700: #3B3B3B;
    --gray-400: #727272;

    --border: #DEDEDE;

    --green-light: rgb(234 255 237);
    --green-dark: rgb(116 198 122);

    --primary-start: rgb(251 250 244);
    --primary-end: rgb(240 237 223);
}

/* =============== Fonts =============== */
@import url('https://fonts.googleapis.com/css2?family=Fira+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600&family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');
/* 
* font-family: "Fira Sans", sans-serif;  
* font-family: "Open Sans", sans-serif;
*/

/* =============== Reset =============== */
body{
    font-family: "Open Sans", sans-serif;
    overflow-x: hidden;
}

h1, h2, h3, h4, h5{
    font-family: "Fira Sans", sans-serif; 
}

p, li{
    font-family: "Open Sans", sans-serif;
    font-size: 18px;
    line-height: 26px;
    color: var(--gray-700);
}

a{
    outline: none;
}

p:last-child{
    margin-bottom: 0;
}

ul.list{
    padding: 0;
    margin: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

ul.list li{
    padding-left: 20px;
    position: relative;
}

ul.list li::before{
    content: "";
    position: absolute;
    display: block;
    width: 6px;
    height: 6px;
    background: var(--black);
    border-radius: 50%;
    left: 4px;
    top: 10px;
}

::selection {
  background: var(--primary-dark);
  color: var(--white);
}

/* ======================== Base ======================== */
.btn.e-button-base{
    height: 46px;
    border-radius: 12px;
    text-transform: uppercase;
    font-weight: 700;
    padding: 10px 16px;
    line-height: 24px;
    border: 1px solid var(--primary);
}

.btn-primary.e-button-base,
.btn-primary.e-button-base:active{
    background-color: var(--primary);
    border-color: var(--primary);
}

.btn-primary.e-button-base:hover{
    background-color: var(--white);
    color: var(--primary);
}

.btn-primary.e-button-base:focus-visible{

}

.grad-primary-light{
    background: #FBFAF4;
    background: linear-gradient(40deg,rgba(251, 250, 244, 1) 0%, rgba(240, 237, 223, 1) 100%);
}

.grad-secondary{
    background: var(--secondary-light);
    background: linear-gradient(40deg,rgba(234, 255, 237, 1) 0%, rgba(116, 198, 122, 1) 100%);
}

.bg-dot-pattern {
    background: radial-gradient(circle, rgba(255,255,255,0.2) 1px, transparent 1px) 0 0 / 16px 16px;
}

.bg-dark {
    background-color: var(--primary-dark);
}

.main-title.elementor-element h2{
    font-size: 40px;
    font-weight: 600;
    font-family: "Fira Sans", sans-serif; 
    color: var(--primary-dark);
    text-align: center;
    margin: 0 20px 30px;
}

.main-title.elementor-element h2 span{
    color: var(--primary);
}

.main-title.title-secondary.elementor-element h2 span{
    color: var(--secondary);
}

.list-box{
    background: linear-gradient(180deg,var(--primary-start) 0%,var(--primary-end) 100%);
    background-size: 200% 200%;
    animation: gradientFlow 3s ease infinite;
    padding: 32px;
    border-radius: 24px;
}

.list-box ul.list{
    gap: 14px;
}

.list-box ul.list li{padding-left: 40px}
.list-box ul.list li::before{
    content: "✓";
    width: 24px;
    height: 24px;
    top: 1px;
    background-color: var(--primary);
    color: var(--white);
    line-height: 24px;
    text-align: center;
    font-size: 14px;
    font-weight: bold;
}

.content-secondary{
    position: relative;
    padding-left: 35px;
}

.content-secondary::before{
    content: '';
    display: block;
    position: absolute;
    height: 100%;
    width: 15px;
    left: 0;
    border-radius: 24px;

    background: linear-gradient(220deg,var(--green-light) 0%,var(--green-dark) 100%);
    background-size: 200% 200%;
    animation: gradientMove 3s ease infinite;
}

@keyframes gradientMove {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

@keyframes gradientFlow {
  0% {
    background-position: top;
  }

  50% {
    background-position: bottom;
  }

  100% {
    background-position: top;
  }
}

/* ===== WP Fix/Reset ===== */
body.admin-bar.ehf-header header#masthead {
    top: 32px;
}

html{
    scroll-behavior: auto !important;
}

@media (prefers-reduced-motion: no-preference) {
  :root {
    scroll-behavior: auto !important;
  }
}

body:not(.home) header + .elementor{
    padding: 100px 0;
}

.elementor-widget-hfe-basic-posts .hfe-post-title a{
    color: var(--primary-dark);
}

.elementor-widget-hfe-basic-posts .hfe-read-more{
    color: var(--primary);
}

.single .elementor-widget-page-title .elementor-heading-title, .elementor-widget-page-title .hfe-page-title a,
.single .elementor-widget-heading .elementor-heading-title{
    color: var(--primary-dark);
}


/* ======================== Main Styles ======================== */
.home.ehf-header header#masthead {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 101;
}

.ehf-header header#masthead{
    padding: 0 20px;
    border: 0;
    background: var(--white);
    box-shadow: 0 10px 16px rgba(0, 0, 0, 0.1);
    transition: all 0.5s ease-in-out;
}

.ehf-header header .logo-wrapper{
    position: relative;
}

.ehf-header header .logo-wrapper .elementor-widget-image img{
    max-width: 100%;
    transition: all 0.2s ease-in-out;
    width: 100%;

    position: absolute;
    z-index: 11;
    left: 0;
    top: 0;
    height: 60px;
}

.ehf-header header .logo-wrapper a{
    display: block;
    position: static;
}

.ehf-header header .logo-wrapper:before{
    content: "";
    display: block;
    position: absolute;
    transition: all 0.2s ease-in-out;
    z-index: 1;
    height: auto;
    width: 100%;
    background: var(--white);
    border-radius: 0 0 8px 8px;
    top: -10px;
    bottom: -28px;
    box-shadow: 0 0 16px rgba(0, 0, 0, 0.2);
}

.ehf-header header:not(.is-scrolled) .logo-wrapper .elementor-widget-image img{
    height: 70px;
}

.ehf-header header:not(.is-scrolled) .logo-wrapper:before{
    bottom: -35px;
}

/* ===== Menu ===== */
.ehf-header header .hfe-nav-menu{}

.ehf-header header .hfe-nav-menu ul.hfe-nav-menu{
    margin-left: auto;
    margin-right: 0;
}

.ehf-header header .hfe-nav-menu ul.hfe-nav-menu li.menu-item{
    padding: 0 16px;
}

.ehf-header header .hfe-nav-menu ul.hfe-nav-menu li.menu-item a.hfe-menu-item{
    font-size: 16px;
    line-height: normal;
    font-weight: 500;
    padding: 5px 0;
    color: var(--primary-dark);
    border-bottom: 2px solid transparent;
    outline: none;
}

.ehf-header header .hfe-nav-menu ul.hfe-nav-menu li.menu-item a.hfe-menu-item:hover,
.ehf-header header .hfe-nav-menu ul.hfe-nav-menu li.menu-item.current-menu-item a.hfe-menu-item{
    color: var(--primary);
    border-bottom-color: var(--primary);
}

.ehf-header header.is-scrolled .e-flexbox-base{
    padding-top: 6px;
    padding-bottom: 6px;
}

/* ======================== Hero Slider ======================== */
.heroslider {
    position: relative;
    overflow: hidden;
    background-color: var(--primary-dark);
}

.heroslider .banner-video{
    height: 720px;
    object-fit: cover;
    object-position: center;
}

.heroslider .slider{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9;
}

/*.heroslider .slider::after{
    content: '';
    display: block;
    position: absolute;
    height: 100%;
    width: 100%;
    left: 0;
    top: 0;
    background: rgba(0, 0, 0, 0.7);
    z-index: -1;
}*/

.heroslider .n2-section-smartslider{
    position: relative;
    z-index: 9;
}

.heroslider .slider,
.heroslider ss3-force-full-width,
.heroslider .elementor-widget-shortcode,
.heroslider .elementor-shortcode,
.heroslider .n2_clear,
.heroslider .n2-section-smartslider,
.heroslider .n2-ss-align,
.heroslider .n2-padding,
.heroslider .n2-ss-slider {
    height: 100%;
}

.heroslider #n2-ss-2 h2.n2-ss-item-content{
    background: linear-gradient(180deg,rgba(255, 241, 222, 1) 0%, rgba(245, 198, 138, 1) 100%);
    border-radius: 16px;
    color: var(--primary-dark);
    font-weight: 500;
    font-size: 28px;
    padding: 10px 20px;
    font-family: "Fira Sans", sans-serif; 
}


div#n2-ss-2 .n2-ss-slider-controls{

}

div#n2-ss-2 .n2-ss-slider-controls .n2-ss-widget.nextend-arrow{
    background: rgba(0, 0, 0, 0.6);
    border-radius: 6px;
    height: 50px;
    width: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

div#n2-ss-2 .n2-ss-slider-controls .n2-ss-widget.nextend-arrow:hover{
    background: rgba(0, 0, 0, 0.8);
}

div#n2-ss-2 .n2-ss-slider-controls .n2-ss-control-bullet{
    margin-bottom: 25px;
}

div#n2-ss-2 .n2-ss-slider-controls .n2-ss-control-bullet .n2-bullet{
    background: rgba(255, 255, 255, 0.6);
    width: 40px;
    border-radius: 0;
    margin: 0 8px;
    border: 0;
    padding: 0;
    height: 8px;
    transition: all 0.5s ease-in-out;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

div#n2-ss-2 .n2-ss-slider-controls .n2-ss-control-bullet .n2-bullet:hover{
    background: rgba(255, 255, 255, 1);
}

div#n2-ss-2 .n2-ss-slider-controls .n2-ss-control-bullet .n2-bullet.n2-active{
    background: var(--primary);
}



/* ======================== Highlights ======================== */
.sec-highlight.elementor-element{
    padding: 30px 20px;
    background-color: var(--primary-dark);
    overflow: hidden;
    box-shadow: inset 0px 0px 60px 25px var(--primary-black);
}

.sec-highlight .main-title.elementor-element h2 {
    color: var(--white);
    text-align: left;
    margin: 0;
}

.sec-highlight .elementor-widget-image img {
    display: block;
    margin: auto;
    max-height: 45px;
    width: auto;
}



/* ======================== About US ======================== */
.sec-about.elementor-element{
    position: relative;
    overflow: hidden;
    background: var(--white);
    padding: 100px 20px;
    overflow: hidden;
}

/* Shared Pattern */
.sec-about::before,
.sec-about::after {
  content: "";
  position: absolute;
  bottom: 0;
  width: 300px;
  height: 100%;
  background-image: url(https://wgl.webbkod.com/wp-content/uploads/2026/06/about-bg-pattern.svg);
  background-repeat: no-repeat;
  background-size: 280px auto;
  background-position: center center;
  pointer-events: none;
  animation: bounceSoft 4s ease-in-out infinite;
  --flip: scaleX(1);
}

/* Left */
.sec-about::before {
  left: -100px;
}

/* Right */
.sec-about::after {
  right: -100px;
  --flip: scaleX(-1);
  animation-delay: 1s;
}

.sec-about .elementor-widget-image{
    position: relative;
}

.sec-about .elementor-widget-image::before{
    content: "";
    display: block;
    position: absolute;
    z-index: 1;
    top: 10px;
    left: -10px;
    height: 100%;
    width: 100%;
    background-color: var(--primary-medium);
    border-radius: 35px;
}

.sec-about .elementor-widget-image img{
    display: block;
    position: relative;
    z-index: 2;
    border-radius: 35px;
    border: 1px solid var(--primary);
}

@keyframes bounceSoft {
  0%,
  100% {
    transform: var(--flip) translateY(0);
  }

  50% {
    transform: var(--flip) translateY(-50px);
  }
}



/* ======================== Services ======================== */
.sec-services.elementor-element{
    background-image: url(https://wgl.webbkod.com/wp-content/uploads/2026/06/bg-fabric.png);
    background-size: cover;
    background-position: center;
    border-top: 1pt solid var(--primary);
    border-bottom: 1pt solid var(--primary);
    background-color: var(--primary-elight);
    padding: 70px 20px;
    overflow: hidden;
    box-shadow: inset 0px 0px 60px 25px var(--primary-light-2);
}

.sec-services .ser-item{
    background-color: var(--white);
    border-top: 5px solid var(--primary);
    gap: 35px;
    height: 100%;
    text-align: center;
    padding: 40px 30px 30px;
    box-shadow: 0 10px 10px 0 rgb(0 0 0 / 4%);
}

.sec-services .ser-item .elementor-widget-image img{
    height: 80px;
    width: auto;
    margin: auto;
}

.sec-services .ser-item h4{
    font-size: 22px;
    line-height: 30px;
    color: var(--primary-dark);
    font-weight: normal;
}


/* ======================== Infra ======================== */
.sec-infra.elementor-element{
    padding: 80px 20px;
    overflow: hidden;
}

.sec-infra .infra-item{
    border: 1px solid var(--secondary);
    background-color: var(--white);
    padding: 24px;
}

.sec-infra .infra-item h3{
    display: flex;
    align-items: center;
    gap: 16px;
    padding-left: 5px;
    padding-bottom: 24px;
    color: var(--gray-800);
    font-size: 28px;
    font-weight: 600;
    text-transform: capitalize;
    font-family: "Fira Sans", sans-serif; 
    line-height: 1.3;
}

.sec-infra .infra-item img{
    display: block;
    max-height: 45px;
    flex-basis: 45px;
}

.sec-infra .infra-item ul li strong{
    color: var(--gray-800);
    font-weight: 700;
}

.sec-infra .infra-item.infra-alt{
    background: var(--secondary);
}

.sec-infra .infra-item.infra-alt h3,
.sec-infra .infra-item.infra-alt ul li,
.sec-infra .infra-item.infra-alt ul li strong{
    color: var(--white);
}

.sec-infra .infra-item.infra-alt ul li::before{
    background-color: var(--white);
}


/* ======================== Clients ======================== */
.sec-clients.elementor-element{
    padding: 70px 20px;
    background-color: var(--primary-dark);
    overflow: hidden;
    overflow: hidden;
    box-shadow: inset 0px 0px 60px 25px var(--primary-black);
}

.sec-clients .main-title.elementor-element h2{
    color: var(--white);
}

.sec-clients .client-box{
    border: 1px solid var(--primary);
    padding: 35px 45px;
    border-radius: 30px;
    background-color: rgba(0, 0, 0, 0.3);
}

.sec-clients .client-box ul li{
    color: var(--white);
}

.sec-clients .client-box ul li::before{
    background-color: transparent;
    border-radius: initial;
    width: 0;
    height: 0;
    border: 5px solid transparent;
    border-left-color: var(--primary);
}


/* ======================== Why Choose Us? ======================== */
.sec-why.elementor-element{
    padding: 90px 20px;
    overflow: hidden;
}

.sec-why .content h5{
    margin-bottom: 24px;
    color: var(--primary-dark);
    font-size: 22px;
}


.sec-why .map {

}

.sec-why .map img{
    display: block;
    margin: auto;
    max-width: 100%;
}


/* ======================== Contact US ======================== */
.sec-contact.elementor-element{
    padding: 0 20px 80px;
    overflow: hidden;
}

.form-box{
    background: linear-gradient(to bottom,rgba(251, 250, 244, 1) 0%, rgba(240, 237, 223, 1) 100%);
    padding: 50px 30px 40px;
    border-radius: 24px;
    width: 992px;
    max-width: 100%;
    margin: 0 auto;
}

/* === cf7 === */

.wpcf7-form{
    position: relative;
}

.wpcf7 .wpcf7-form-control-wrap{
    display: block;
    margin-bottom: 24px;
}

.wpcf7 .wpcf7-form-control{
    width: 100%;
    border: 1px solid var(--border);
    border-radius: 10px;
    font-size: 16px;
    padding: 10px 16px;
    font-family: "Open Sans", sans-serif;
}

.wpcf7 .wpcf7-form-control:not(.wpcf7-textarea){
    height: 60px;
}

.wpcf7 .wpcf7-textarea{
    min-height: 100px;
    max-height: 300px;
}

.wpcf7 .wpcf7-submit{
    font-size: 18px;
    text-transform: uppercase;
    font-weight: 600;
    min-width: 210px;
    width: auto;
    margin: 0 auto;
    display: block;
    background: var(--primary);
    border: 1px solid var(--primary);
    border-radius: 12px;
    height: 44px;
    padding: 8px 12px;
    color: var(--white);
}

.wpcf7 .wpcf7-submit:hover, .wpcf7 .wpcf7-submit:focus-within{
    background-color: var(--white);
    color: var(--primary);
}

.wpcf7 .wpcf7-spinner{
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 99;
    margin: auto;
    width: 100%;
    height: 100%;
}

.wpcf7-form.submitting .wpcf7-spinner::after{
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    z-index: 10;
    background: linear-gradient(to bottom,rgba(251, 250, 244, 1) 0%, rgba(240, 237, 223, 1) 100%);

}

.wpcf7-form.submitting .wpcf7-spinner::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 40px;
  height: 40px;
  margin-top: -9px;
  margin-left: -9px;
  border: 5px solid var(--primary);
  background: rgba(255, 255, 255, 0.5);
  border-top-color: transparent;
  border-radius: 50%;
  animation: loader-spin 0.7s linear infinite;
  z-index: 20;
  transform-origin: center;
}

@keyframes loader-spin {
  to {
    transform: rotate(360deg);
  }
}



/* ======================== Footer ======================== */
.footer.elementor-element{
    background-color: var(--primary-dark);
    padding: 50px 20px 20px;
    overflow: hidden;
}

.footer .widget-box{
    margin-bottom: 24px;
}

.footer .footer-about{
    width: 300px;
    max-width: 100%;
}

.footer .widget-box img.logo-white{
    display: block;
    margin-bottom: 24px;
}

.footer h5.elementor-heading-title{
    color: var(--white);
    font-weight: 600;
    font-size: 18px;
}

.footer p{
    font-size: 16px;
    line-height: 22px;
    color: var(--primary-muted);
}

.contact-item{
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 20px;
}

.contact-item .f-icon{
    flex-basis: 30px;
    min-width: 30px;
}

.contact-item .text{
    color: var(--primary-muted);
}

.contact-item .text a{
    color: var(--primary-light);
}

.contact-item .text a:hover{
    color: var(--primary);
}


footer .footer.elementor-element .hfe-nav-menu nav ul.hfe-nav-menu li.menu-item{
    padding: 5px 0;
}

footer .footer.elementor-element .hfe-nav-menu nav ul.hfe-nav-menu li.menu-item a.hfe-menu-item{
    padding: 0;
    display: inline-block;
    color: var(--primary-muted);
    font-weight: normal;
    font-size: 16px;
}

footer .footer.elementor-element .hfe-nav-menu nav ul.hfe-nav-menu li.menu-item a.hfe-menu-item:hover{
    color: var(--primary);
}


/* ===== Copyright ===== */
.copyright{
    background-color: var(--primary-edark);
}

.copyright p{
    color: var(--white);
    font-size: 16px;
}





/* ======================== Media Queries ======================== */


/* Small only */
@media (max-width: 576px){

}

/* Tablet */
@media (min-width: 768px) and (max-width: 991.98px) {

}

/* Desktop */
@media (min-width: 992px) {

}

/* Large only */
@media (min-width: 768px) and (max-width: 1200px) {

.sec-about .elementor-widget-image{margin: 0 auto;}


}



/* ===== Desktop ===== */
@media (max-width: 1200px) {


.heroslider #n2-ss-2 h2.n2-ss-item-content {font-size: 24px;padding: 8px 12px;border-radius: 10px;line-height: 1.3;}
.sec-about::before, .sec-about::after {background-size: 180px auto;}


}


/* ===== Table-Mobile ===== */
@media (max-width: 1024px) {

.heroslider .banner-video{height: 650px;}
.sec-services .ser-item{padding: 30px 15px 24px;gap: 24px;}
.sec-services .ser-item h4{font-size: 20px;}

}



/* ===== Mobile ===== */
@media (max-width: 780px) {

p, li {font-size: 16px;line-height: 24px;}

.main-title.elementor-element h2 {font-size: 36px;}

.sec-highlight .main-title.elementor-element h2 {text-align: center;}
.heroslider .banner-video{height: 550px;}
.heroslider #n2-ss-2 h2.n2-ss-item-content {font-size: 20px;}

.heroslider #n2-ss-2 .n2-ss-layers-container > .n2-ss-layer{padding: 0;}
.heroslider #n2-ss-2 .n2-ss-section-main-content{position: relative;}
.heroslider #n2-ss-2 .n2-ss-section-main-content .n2-ss-layer
{position: absolute;bottom: 20%;top: auto;margin: 0 auto;left: 0;right: 0;transform: none !important;}

.sec-infra .infra-item h3 {font-size: 24px;padding-bottom: 15px;}
.sec-infra .infra-item img {max-height: 40px;flex-basis: 40px;}

.sec-clients .client-box{padding: 30px 24px;}
.list-box {padding: 32px 24px;}
.form-box {padding: 50px 24px 40px;}

.ehf-header header .btn.e-button-base{height: 42px;border-radius: 8px;padding: 10px 12px;line-height: 20px;}
.ehf-header header:not(.is-scrolled) .logo-wrapper .elementor-widget-image img,
.ehf-header header .logo-wrapper .elementor-widget-image img
{height: 46px;margin-right: auto;display: block;position: relative;width: auto;right: auto;}
.ehf-header header:not(.is-scrolled) .logo-wrapper::before,
.ehf-header header .logo-wrapper::before {display: none;}

.ehf-header header#masthead .main-menu{padding-right: 0;}
.ehf-header header#masthead .cta{padding-left: 15px;}
.ehf-header header#masthead .main-menu .elementor-widget-navigation-menu{width: 100%;}
.ehf-header header#masthead .hfe-nav-menu__toggle
{height: 46px;display: flex;align-items: center;width: 46px;margin: 0;}
.ehf-header header#masthead .hfe-nav-menu__toggle .hfe-nav-menu-icon{width: 100%;padding: 0;}
.ehf-header header .hfe-nav-menu__layout-horizontal{max-width: 220px;right: 0;left: auto !important;}
.ehf-header header .hfe-nav-menu ul.hfe-nav-menu li.menu-item {border: 0 !important;}

.sec-about::before, .sec-about::after {display: none;}

/*.footer.elementor-element {padding: 30px 20px 20px;}
.sec-contact.elementor-element {padding: 0 20px 50px;}
.sec-why.elementor-element {padding: 60px 20px;}
.sec-infra.elementor-element {padding: 70px 20px;}
.sec-about.elementor-element {padding: 70px 20px;}*/


}