/* css for landing.mak */

body {
    background-image: url("/static/img/background_gray.webp");
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    width: 100%;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.7;
    text-align: center;
	/* background: linear-gradient(rgb(26, 27, 31) 0%, rgb(23, 24, 28) 30%, rgb(23, 24, 28) 100%); */
}

.container {
    min-width: 1440px;
}

.code-font {
    font-family: 'Consolas', 'Monaco', 'Lucida Console', 'Liberation Mono', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Courier New', monospace;
}

.tagline {
    margin: auto;
    margin-top: 70px;
    font-size: 3.8rem;
    font-weight: 800;
    line-height: 1.1;
    width: 1000px;
    text-align: center;
}

.search-tagline {
    margin: auto;
    margin-top: 250px;
    font-size: 3rem;
    font-weight: 800;
    line-height: 1.1;
    width: 1000px;
    text-align: center;
}

.text-with-stroke {
    -webkit-text-stroke: 1px #0002e9; /* Specify the width and color of the stroke */
    color: #0082e9; /* Specify the text color */
}

.text-with-shadow-stroke {
    color: #0082e9; /* Specify the text color */
    text-shadow:
    -1px -1px 0 #0002e9,  
     1px -1px 0 #0002e9,
    -1px  1px 0 #0002e9,
     1px  1px 0 #0002e9; /* Specify the offset and color of the shadow */
}

.app-desc {
    margin: auto;
    margin-top: 30px;
    font-size: 20px;
    font-weight: 500;
    width: 700px;
    line-height: 1.5;
    color: rgb(200, 199, 216);
}

.search-box-container {
    width: 600px;
    margin: auto;
    margin-top: 50px;
}


input[type="text"] {
    background-color: #333;  /* Dark background */
    color: #fff;            /* Light text */
    border: 1px solid #555; /* Slightly lighter border for visibility */
    padding: 20px 18px;      /* Some padding for aesthetics */
    font-size: 16px;        /* Readable text size */

    /* Optional: styling for focus state */
    outline: none; /* Removes the default focus outline */

    box-shadow: 0 0 5px #06bcee; /* Adds a glow effect */
    border-radius: 20px;

}

input[type="text"]:focus {
    background-color: #333;  /* Keeps the background dark on focus */
    color: #fff;             /* Keeps the text color light on focus */
    border-color: #06bcee;   /* Adds a custom border color on focus */
    box-shadow: 0 0 5px #06bcee; /* Adds a glow effect on focus */

}

/* Placeholder text color */
input[type="text"]::placeholder {
    color: #bbb; /* Lighter placeholder text for better readability */
}

.circular-button {
    width: 43px;        /* Set the width of the button */
    height: 43px;       /* Set the height of the button */
    border-radius: 50%; /* Makes the button circular */
    border: none;       /* Optional: removes the border */
    background-color: #008ce9; /* Background color */
    color: white;       /* Text color */
    font-size: 16px;    /* Optional: Adjust the font size */
    cursor: pointer;    /* Changes the cursor on hover */
}

.circular-button:hover {
    background-color: #0082e9; /* Darker shade on hover */
}


#submit-btn {
    position: relative;
    top: -42px;
    margin-left: 610px; 
}

.landing-cta-btn {
    margin-top: 38px;
    margin-bottom: 13px;
    background-color: #0082e9;
    font-family: 'Consolas', 'Monaco', 'Lucida Console', 'Liberation Mono', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Courier New', monospace;
}

.demo-container-outer {
    min-width: 1440px;
    margin-top: 31px;
    margin-left: -30px;
    margin-right: -30px;
    padding-top: 23px;
    padding-bottom: 30px;
    background: linear-gradient(rgb(26, 27, 31) 0%, rgb(23, 24, 28) 30%, rgb(23, 24, 28) 100%);
    background: linear-gradient(rgb(30, 30, 38) 0%, rgb(40, 40, 48) 30%, rgb(23, 24, 28) 100%);
    border-top: 1px solid #333;
    border-bottom: 1px solid #333;
}

.demo-container {
    margin: auto;
    width: 1300px;
    height: 420px;
}

.demo-container .title {
    /* 
    text-align: center;
    font-size: 19px;
    color: rgb(200, 199, 216);
    */

    margin-bottom: 28px;
    color: rgb(200, 199, 216);
    font-size: 2rem;
    font-weight: bold;
}

.demo-container .title-note {
    position: relative;
    font-size: 19px;
    margin-left: 8px;
    top: -3px;
    font-weight: 300;
    color: #bbb;
}

.demo-content {
    margin-top: 13px; 
}

.demo-item {
    text-align: left;
}

/*
.demo-item img {
	width: 330px;
	height: 250px;
    box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5); 
}
*/

/*
.vid-frame {
    position: absolute;
	width: 550px;
	height: 600px;
    margin-top: -165px;;
    margin-left: -70px;
}
*/

.vid-frame {
    position: absolute;
	width: 410px;
	height: 210px;
    margin-top: 72px;
    margin-left: 0px;
    z-index: 2;
    box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5); 
}

.vid-screenshot {
    position: absolute;
	width: 410px;
	height: 258px;
    z-index: 1;
}


.demo-item .item-desc{
    position: absolute;
    margin-left: 4px;
    font-size: 12px;
    width: 400px;
    color: #fff;
    z-index: 3;
}

.feat-container-outer {
    min-width: 1440px;
    padding: 30px
}

.feat-container {
	margin: auto;
    width: 1300px;
    color: rgb(200, 199, 216);
    min-height: 1300px;
}

.feat-container .title {
    font-size: 2rem;
    font-weight: 800;
    color: rgb(237, 238, 240);
}

.feat-container .desc {
    width: 900px;
    margin: auto;
    margin-top: 18px;
    font-size: 18px;
    line-height: 1.8;
}

.feat-content {
    margin-top: 80px;
}

.feat-item {
    margin-top: 60px;
    text-align: left;
}

.feat-headline {
    font-size: 26px; 
    font-weight: 600;
    color: rgb(237, 238, 240); 
}

.headline-inner {
    font-size: 21px; 
    padding: 3px 8px;
    background-color: #333;
    color: rgb(132, 157, 255);
    border: 1px solid #444;
    border-radius: 8px;
}

.feat-subheadline {
    margin-top: 8px;
    font-size: 17px; 
    color: rgb(237, 238, 240);
}

.subheadline-inner {
    font-size: 16px; 
    padding: 6px 8px;
    background-color: #333;
    border: 1px solid #444;
    border-radius: 10px;
    color: rgb(132, 157, 255);
}

.feat-desc {
    width: 430px;
    margin-top: 23px;
    padding-left: 18px;
    font-size: 17px;
    line-height: 1.6;
    border-left: 3px solid #0082e9;
}

.feat-item img {
    width: 80%;
    box-shadow: 20px 20px 20px rgba(0, 0, 0, 0.7);
    border-radius: 5px;
}

.feat-item .overlay-screenshot {
    position: absolute;
    margin-top: -20px;
    margin-left: -300px;
    float: left;
    width: 50%;
    box-shadow: 30px 30px 20px rgba(0, 0, 0, 0.5);
}

.feat-item .last-overlay-screenshot {
    width: 38%;
    margin-left: -230px;
}

.feat-item .overlay-logo {
    width: 13%;
    margin-top: -13px;
    margin-left: -70px;
}

.pricing-container-outer {
    min-width: 1440px;
    /* margin-top: 30px; */
    padding-top: 30px;
    padding-bottom: 110px;
    border-top: 1px solid #333;
}

.pricing-headline {
    font-size: 23px;
    color: rgb(237, 238, 240);
}

.landing-footer {
    border-top: 1px solid #444;
    padding-top: 13px;
    padding-bottom: 200px;
}

.landing-footer .footer-item {
    font-size: 14px;
    color: #888;
}

.landing-footer .footer-item a {
    color: #888;
}

.testimonial-container {
    padding-top: 30px;
    padding-bottom: 20px;
    width: 1000px;
    margin: auto;
    /* background: linear-gradient(rgb(30, 30, 38) 0%, rgb(40, 40, 48) 30%, rgb(23, 24, 28) 100%); */
}

.testimonial-container .title {
    margin-bottom: 38px;
    color: rgb(200, 199, 216);
    font-size: 2rem;
    font-weight: bold;
}

.video-intro-container {
    margin-left: -30px;
    margin-right: -30px;
    padding-top: 30px;
    padding-bottom: 20px;
    background: linear-gradient(rgb(30, 30, 38) 0%, rgb(40, 40, 48) 30%, rgb(23, 24, 28) 100%);
}

.video-intro-container .title {
    font-size: 2rem;
    font-weight: 800;
    color: rgb(237, 238, 240);
}

.video-intro-container video {
    margin-top: 30px;
    margin-bottom: 50px;
}