/*
Theme Name: seesaw
Author: shubh
Description: seesawsecunderabad
Version: 1.0
Template: hello-elementor

This is the child theme for Hello Elementor theme, generated with Generate Child Theme plugin by catchthemes.

(optional values you can add: Theme URI, Author URI, License, License URI, Tags, Text Domain)
*/

/* =============================================
           FLUID TYPOGRAPHY — scales across all desktops
           clamp(min, preferred-vw, max)
        ============================================= */
        @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;300;400;500;600;700&display=swap');
/* 		* {
		  will-change: transform;
		}

		body {
		  backface-visibility: hidden;
		  transform: translateZ(0);
		} */
        body{
            font-family: "Montserrat";
        }
        .fluid-h1 {
            font-size: clamp(1.25rem, 4vw, 2rem);
                        font-family: 'Montserrat', sans-serif;

        }

        /* ~32–60px */
        .fluid-h2 {
            font-size: clamp(1rem, 3vw, 2rem);
                        font-family: 'Montserrat', sans-serif;

        }

        /* ~28–48px */
        .fluid-h3 {
            font-size: clamp(0.875rem, 2vw, 1.75rem);
                        font-family: 'Montserrat', sans-serif;

        }

        /* ~20–28px */
        .fluid-body {
            font-size: clamp(0.875rem, 1.4vw, 1.375rem);
                        font-family: 'Montserrat', sans-serif;

            color: #2F2F2F;
        }

        /* ~16–22px */
        .fluid-stat {
			/* font-size: clamp(1.5rem, 3.5vw, 2rem); */
			font-size: clamp(1.5rem, 3.5vw, 75px);
			font-family: 'Montserrat', sans-serif;
		}
        /* ~32–56px */
        .fluid-stat-label {
			font-size: clamp(0.875rem, 1.2vw, 1.75rem);
			font-family: 'Montserrat', sans-serif;
			font-weight: 400;
		}

        /* =============================================
           SP-CARD — fluid sizing
        ============================================= */
        .sp-card1 {
            position: relative;
            width: clamp(290px, 22vw, 620px);
            height: clamp(290px, 22vw, 620px);
            border-radius: 25px;
            padding: clamp(28px, 3.5vw, 50px);
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            align-items: flex-end;
            box-sizing: border-box;
            font-family: 'Montserrat', sans-serif;
        }

        /* THE HOLES */
        .punch-hole {
            position: absolute;
            top: -5px;
            width: 12px;
            height: 45px;
            background-color: white;
            border-radius: 10px;
            z-index: 2;
        }

        .punch-hole::after {
            content: '';
            position: absolute;
            bottom: -2px;
            left: 50%;
            transform: translateX(-50%);
            width: 22px;
            height: 22px;
            background-color: white;
            border-radius: 50%;
        }

        .punch-hole.left {
            left: clamp(60px, 7vw, 70px);
        }

        .punch-hole.right {
            right: clamp(60px, 7vw, 70px);
        }

        .big-number {
            position: absolute;
            top: clamp(50px, 6vw, 90px);
            left: clamp(20px, 2.5vw, 35px);
            font-size: clamp(90px, 11vw, 160px);
            font-weight: 900;
            color: rgba(255, 255, 255, 0.25);
            line-height: 0.8;
            user-select: none;
                        font-family: 'Montserrat', sans-serif;

        }

        .text-group {
            text-align: right;
            color: white;
            z-index: 3;
                        font-family: 'Montserrat', sans-serif;

        }

        .title {
            font-size: clamp(14px, 1.4vw, 24px);
            margin: 0;
                        font-family: 'Montserrat', sans-serif;

            font-weight: 800;
        }

        .age {
            font-size: clamp(13px, 1.4vw, 20px);
            font-weight: 600;
                        font-family: 'Montserrat', sans-serif;

        }

        /* Card colours & rotations */
        .sp-card-1 {
            background-color: #FF4C15;
             transform: rotate(-4deg); 
            z-index: 4;
            
        }

        .sp-card-2 {
            background-color: #FFC526;
            transform: rotate(2deg) translateY(-5px);
            z-index: 3;
        }

        .sp-card-3 {
            background-color: #00B455;
            transform: rotate(-2deg) translateX(-5px);
            z-index: 2;
        }

        .sp-card-4 {
            background-color: #003C9A;
            transform: rotate(4deg) translateX(-15px);
            z-index: 1;
        }

        /* =============================================
           SECTION SPACING — fluid padding
        ============================================= */
        .fluid-section-px {
            padding-left: clamp(1.5rem, 4vw, 5rem);
            padding-right: clamp(1.5rem, 4vw, 5rem);
        }

        .fluid-section-py {
            padding-top: clamp(2.5rem, 4vw, 5rem);
            padding-bottom: clamp(2.5rem, 4vw, 5rem);
        }

        /* Wide-screen cap so content never stretches beyond readable width */
        .content-cap {
            max-width: 1800px;
            margin-left: auto;
            margin-right: auto;
        }

        .ladder-section1 {
            height: 90vh;
            position: sticky;
            top: 10px;
        }

        .ladder-container {

            height: 80vh;
            display: flex;
            align-items: center;
            overflow: hidden;
            padding-bottom: 40px;
        }
        #smooth-wrapper {
          overflow: hidden;
        }
        
        #smooth-content {
          will-change: transform;
        }

        /* mobile responsive */
        @media (max-width: 767px) {
            .ladder-section1 {
                position: static;

                height: auto;
            }

            .ladder-container {
                height: auto;
                overflow: visible;
                padding-top: 40px;
                padding-bottom: 40px;
                justify-content: center;
            }
            
            .big-number {
                font-size: 152px;
            }
            .title {
                font-size: 22px;

            }
            .age {
                font-size: 16px;
            }
            /**/
            
            .shb-fluid-h1 {
                font-size: 34px;
            }
            
            .shb-fluid-h2 {
                font-size: 22px;
            }
            .shb-fluid-h3 {
                font-size: 20px;
            }
            .shb-fluid-body {
                font-size: 16px;
                line-height: 20px;
            }
            
            /**/
            .fluid-h1 {
                font-size: 34px;
            }
            .fluid-h3{
                font-size: 22px;
            }
            
        }
        
        
        /*new css classes */
        
        /* =========================
   GLOBAL FONT
========================= */
body {
   font-family: 'Montserrat';
  color: #2F2F2F;
}

/* =========================
   HEADINGS
========================= */

/* Section Main Heading */
.sp-heading-primary {
  font-weight: 700;
  font-size: clamp(28px, 3vw, 55px);
  line-height: clamp(36px, 3.5vw, 67px);
  color: #003C9A;
   font-family: 'Montserrat';
}

/* Stats Heading */
.sp-heading-stats {
  font-weight: 700;
  font-size: clamp(36px, 5vw, 75px);
  line-height: clamp(44px, 5.5vw, 92px);
  color: #FFFFFF;
   font-family: 'Montserrat';
}

/* Big Number (Cards) */
.sp-heading-xl {
  font-weight: 800;
  font-size: clamp(60px, 10vw, 186px);
  line-height: 1.1;
  color: #FF7A52;
   font-family: 'Montserrat';
}

/* Medium Heading */
.sp-heading-md {
  font-weight: 600;
  font-size: clamp(20px, 2.5vw, 36px);
  line-height: clamp(26px, 3vw, 44px);
   font-family: 'Montserrat';
}

/* Card Heading */
.sp-heading-card {
  font-weight: 700;
  font-size: clamp(22px, 3vw, 45px);
  line-height: clamp(28px, 3.5vw, 55px);
  color: #F2F0F0;
   font-family: 'Montserrat';
}

/* =========================
   TEXT
========================= */

/* Normal Content */
.sp-text-lg {
  font-weight: 400;
  font-size: clamp(16px, 1.8vw, 26px);
  line-height: clamp(22px, 2.2vw, 32px);
   font-family: 'Montserrat';
}

/* Medium Text */
.sp-text-md {
  font-weight: 500;
  font-size: clamp(16px, 2vw, 28px);
  line-height: clamp(22px, 2.4vw, 34px);
   font-family: 'Montserrat';
}

/* Subtitle */
.sp-text-subtitle {
  font-weight: 500;
  font-size: clamp(20px, 2.5vw, 36px);
  line-height: clamp(26px, 3vw, 44px);
   font-family: 'Montserrat';
}

/* White */
.sp-text-white {
  color: #FFFFFF;
}
.sp-text-line {
  font-weight: 700;
  font-size: clamp(22px, 2.8vw, 46px);
  line-height: clamp(30px, 3.2vw, 57px);
  color: #2F2F2F;
  text-align: left;
  font-family: 'Montserrat';
}
/* =========================
   BUTTON
========================= */
.sp-btn {
  display: inline-block;
  font-weight: 500;
  font-size: clamp(14px, 1.5vw, 26px);
  line-height: clamp(18px, 2vw, 32px);
  padding: clamp(10px, 1vw, 18px) clamp(20px, 2vw, 40px);
  background: #003C9A;
  color: #fff;
  border-radius: 6px;
  text-decoration: none;
   font-family: 'Montserrat';
}
/* ===== Container ===== */
.custom-cf7 .cf7-connect {
  background: #F2F0F0;
  border: 1px solid #FF8E97;
  border-radius: clamp(25px, 4vw, 60px);
  padding: clamp(20px, 4vw, 46px) clamp(15px, 4vw, 52px);
  max-width: 1200px;
  margin: auto;
}

/* ===== Title ===== */
.custom-cf7 .cf7-title {
  text-align: left;
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  font-size: clamp(28px, 5vw, 55px);
  line-height: clamp(36px, 6vw, 67px);
  color: #003C9A;
  text-transform: uppercase;
}

/* ===== Grid ===== */
.custom-cf7 .cf7-grid {
  margin-top: clamp(20px, 4vw, 60px);
  display: grid;
  grid-template-columns: 1fr;
  gap: 15px;
}

/* Tablet */
@media (min-width: 768px) {
  .custom-cf7 .cf7-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Desktop */
@media (min-width: 1024px) {
  .custom-cf7 .cf7-grid {
    grid-template-columns: repeat(4, 1fr) 180px;
    gap: 20px;
/*     align-items: center; */
  }
}

/* ===== Fix CF7 Wrapper ===== */
.custom-cf7 .wpcf7-form-control-wrap {
  display: contents;
}

/* ===== Inputs ===== */
.custom-cf7 input.cf7-input, .custom-cf7 select.cf7-input, .custom-cf7 textarea.cf7-input {
    width: 100%!important;
    height: clamp(48px, 6vw, 72px)!important;
    border-radius: 35px;
    border: none;
    background: #fff;
    padding: 0 clamp(15px, 3vw, 40px);
    font-size: clamp(14px, 1.5vw, 16px);
    color: #2F2F2F;
    outline: none;
    font-family: 'Montserrat', sans-serif;
    box-shadow: none;
}

/* Placeholder */
.custom-cf7 input::placeholder,
.custom-cf7 textarea::placeholder {
  color: #B9B9B9;
}

/* Select fix */
.custom-cf7 .wpcf7-form-control-wrap {
  all: unset;
  display: block !important;
  width: 100% !important;
}

/* ===== Button ===== */
.custom-cf7 .cf7-btn, .custom-cf7 input.wpcf7-submit {
    width: 100%!important;
    height: clamp(48px, 6vw, 72px)!important;
    border: none!important;
    border-radius: 35px;
    background: linear-gradient(90deg, #FF4C15 0%, #FFB524 69%, #FFC526 100%);
    color: #fff;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500!important;
    font-size: clamp(16px, 2vw, 26px);
    line-height: clamp(22px, 2.5vw, 32px);
    cursor: pointer;
    transition: all 0.3s ease;
}

/* Hover */
.custom-cf7 .cf7-btn:hover,
.custom-cf7 input.wpcf7-submit:hover {
  background: linear-gradient(90deg, #FFC526 0%, #FFB524 31%, #FF4C15 100%);
}

/* Click */
.custom-cf7 .cf7-btn:active,
.custom-cf7 input.wpcf7-submit:active {
  transform: scale(0.98);
}

/* ===== Mobile Fix ===== */
@media (max-width: 767px) {
  .custom-cf7 .cf7-grid {
    gap: 12px;
  }
}

/* Kill CF7 paragraph interference */
.custom-cf7 p {
  margin: 0 !important;
  width: 100% !important;
}

/* Each field container */
.custom-cf7 .cf7-field {
  width: 100%;
}

/* Wrapper fix */
.custom-cf7 .wpcf7-form-control-wrap {
  display: block !important;
  width: 100% !important;
}

/* FORCE all inputs + select */
.custom-cf7 .cf7-field select,
.custom-cf7 .cf7-field input {
  width: 100% !important;
  max-width: 100% !important;
  display: block !important;
  box-sizing: border-box !important;
}