/*!
Theme Name: cosmiqDevice
Theme URI: http://underscores.me/
Author: Underscores.me
Author URI: http://underscores.me/
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: cosmiqdevice
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

cosmiqDevice is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Generic
	- Normalize
	- Box sizing
# Base
	- Typography
	- Elements
	- Links
	- Forms
## Layouts
# Components
	- Navigation
	- Posts and pages
	- Comments
	- Widgets
	- Media
	- Captions
	- Galleries
# plugins
	- Jetpack infinite scroll
# Utilities
	- Accessibility
	- Alignments

--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Generic
--------------------------------------------------------------*/

/* Normalize
--------------------------------------------- */

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
	 ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */
 .glide-edtech img {
    width: 100%;
}
.glide-edtech h3 {
	font-size: 60px;
        line-height: 110%;
        font-weight: 700;
        margin-bottom: 0px;
}
.glide-edtech h2 {
	font-size: 80px;
        line-height: 110%;
        font-weight: 700;
        margin-bottom: 6px;
        background-image: var(--gradient-bo);
        background-clip: text;
        text-fill-color: rgba(0,0,0,0);
        -webkit-background-clip: text;
        -webkit-text-fill-color: rgba(0, 0, 0, 0);
}
.glide-banner  {
	padding-bottom: 0;
}
.meets-interaction-image.half-fluid.glide-intrction-img {
    padding-bottom: 100px;
}
.smart-classroom-card-bottomimageimage.glide-bottomimageimage {
	margin-top: 16px;
	padding: 33px 69px;
}
.header-bar-leftbar {
    float: right;
}
/* Floating Form Input Styles */
.floating-form-input {
    font-family: "SF Pro Display";
    font-size: 16px;
    font-weight: var(--font-r);
    z-index: 1;
    resize: none;
    width: 100%;
    line-height: inherit;
    height: auto;
    padding: 12px 16px;
    border-radius: 4px;
    border: none;
    color: #272727;
    background: #F5F5F7;
    transition: .2s ease-in-out;
    display: block;
    box-sizing: border-box;
    background-clip: padding-box;
    appearance: none;
}
/* Datetime input specific styling */
.floating-form-input[type="datetime-local"] {
    position: relative;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23636363' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px;
    padding-right: 40px;
    cursor: pointer;
}

.floating-form-input[type="datetime-local"]:focus {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%230D26A7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
}

.floating-form-input:focus {
    outline: none;
    border-color: #0D26A7;
    box-shadow: 0 0 0 3px rgba(13, 38, 167, 0.1);
}

.floating-form-input.is-invalid {
    border-color: #dc3545;
}

.floating-form-input.is-invalid:focus {
    border-color: #dc3545;
    box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.1);
}

/* Floating Label Styles */
.floating-form-control {
    position: relative;
}
.form-label {
    color: #636363;
}
.floating-form-label {
    position: absolute;
    top: 12px;
    left: 16px;
    font-family: "SF Pro Display";
    font-size: 16px;
    font-weight: var(--font-r);
    color: #636363;
    background: #F5F5F7;
    padding: 0 4px;
    transition: all 0.2s ease-in-out;
    pointer-events: none;
    z-index: 2;
}

.floating-form-input:focus + .floating-form-label,
.floating-form-input:not(:placeholder-shown) + .floating-form-label,
.floating-form-label.active {
    top: -8px;
    left: 16px;
    font-size: 12px;
    color: #636363;
    font-weight: 500;
}

.floating-form-input:focus + .floating-form-label {
    color: #636363;
}

.floating-form-input.is-invalid + .floating-form-label {
    color: #dc3545;
}

.starred {
    color: #dc3545;
}

/* Demo Modal Specific Styles */
.demo-modal-content {
    border-radius: 12px;
    border: none;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    max-width: 800px;
    margin: 0 auto;
}

.demo-modal-header {
    border: none;
    padding: 24px 32px 0;
    position: relative;
}



.demo-modal-body {
    padding: 0 32px 32px;
}

.demo-form-container {
    max-width: 100%;
}

.demo-form-title {
    font-size: 36px;
    font-weight: 700;
    color: #222;
    margin-bottom: 12px;
    text-align: center;
}

.demo-form-subtitle {
    font-size: 16px;
    color: #666;
    text-align: center;
    margin-bottom: 32px;
    line-height: 1.5;
}

.demo-form {
    width: 100%;
}

.form-row {
    display: flex;
    gap: 20px;
    margin-bottom: 24px;
}

.floating-form-control {
    flex: 1;
    position: relative;
}

.floating-form-control.full-width {
    width: 100%;
    margin-bottom: 24px;
}

.demo-textarea {
    resize: vertical;
    min-height: 100px;
}

.phone-input-group {
    display: flex;
}

.country-code {
    width: 80px;
    padding: min(1.1111111111vw, 2vh) 8px;
    border: none;
    background-color: #F5F5F7;
    color: #272727;
	border-radius: 0px;
}

.phone-input {
    flex: 1;
	border-radius: 0px;
}



/* Special handling for phone input group */
.floating-form-control .phone-input-group + .floating-form-label {
    top: 12px;
    left: 96px; /* Account for country code width (80px) + gap (8px) + some padding */
}

.floating-form-control .phone-input-group:has(.floating-form-input:focus) + .floating-form-label,
.floating-form-control .phone-input-group:has(.floating-form-input:not(:placeholder-shown)) + .floating-form-label,
.floating-form-control .phone-input-group + .floating-form-label.active {
    top: -8px;
    left: 16px;
    font-size: 12px;
    color: #636363;
    font-weight: 500;
}

.product-interest-section {
    margin-bottom: 24px;
    background: #F5F5F7;
    padding: 10px 15px;
}

.radio-group {
    margin-top: 12px;
}

.radio-row {
    display: flex;
    gap: 20px;
    margin-bottom: 12px;
}

.radio-item {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
}

.form-check-input {
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: #0D26A7;
}

.form-check-label {
    font-size: 14px;
    color: #636363;
    font-weight: 400;
    cursor: pointer;
    margin: 0;
}

.form-submit {
    text-align: center;
    margin-top: 32px;
}

.demo-submit-btn {
    background: #0D26A7;
    color: white;
    border: none;
    padding: 16px 32px;
    border-radius: 50px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 100%;
}

.demo-submit-btn:hover {
    background: #0A1F8F;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(13, 38, 167, 0.3);
}

.invalid-feedback {
    display: block;
    width: 100%;
    margin-top: 4px;
    font-size: 12px;
    color: #dc3545;
}

/* Responsive Design */
@media (max-width: 768px) {
    .demo-modal-content {
        margin: 10px;
        max-width: calc(100% - 20px);
    }
    
    .demo-modal-header {
        padding: 16px 20px 0;
    }
    
    .demo-modal-body {
        padding: 0 20px 20px;
    }
    
    .demo-form-title {
        font-size: 24px;
    }
    
    .demo-form-subtitle {
        font-size: 14px;
        margin-bottom: 24px;
    }
    
    .form-row {
        flex-direction: column;
        gap: 16px;
        margin-bottom: 16px;
    }
    
    .radio-row {
        flex-direction: column;
        gap: 12px;
    }
    
    .phone-input-group {
        flex-direction: column;
        gap: 8px;
    }
    
    .country-code {
        width: 100%;
    }
    
    .datetime-input-group {
        flex-direction: column;
        gap: 8px;
    }
    
    .demo-submit-btn {
        width: 100%;
        min-width: auto;
    }
    
    .floating-form-input {
        font-size: 16px;
        padding: 12px 16px;
    }
    
    .floating-form-label {
        font-size: 16px;
        top: 12px;
        left: 16px;
    }
    
    .floating-form-input:focus + .floating-form-label,
    .floating-form-input:not(:placeholder-shown) + .floating-form-label,
    .floating-form-label.active {
        top: -8px;
        left: 16px;
        font-size: 12px;
    }
}
.header-bar-leftbar-btncontainer {
	position: relative;
	z-index: 10;
  }
  .btn {
	position: relative;
	z-index: 11;
	display: inline-block;
  }