/* 
Theme Name: PropEmbed
Theme URI: https://propembed.com
*/

* { font-family:"Plus Jakarta Sans", serif; font-optical-sizing:auto; box-sizing:border-box; line-height:1.4em; margin:0; padding:0 }

h1, h2, h3, h4, h5, h6 { line-height:1.2em }

body { color:#001e35; overflow-x:hidden; }

a { color:#3ebfbb }
a, input[type='submit'], button { transition:all 0.15s; cursor:pointer; text-decoration:none; }

img { max-width:100%; height:auto; }

.container { position:relative; max-width:1260px; padding:0 30px; width:100%; margin:0 auto }
.container.thin { max-width:730px; }

.button { font-weight:600; text-align:center; display:inline-block; padding:17px 50px; border-radius:5px; font-size:18px; }

header { position:absolute; left:0; top:0; width:100%; background:transparent; padding:26px 0;  }
header .container { display:flex; gap:50px; align-items:center; justify-content:space-between; }
header .logo { width:230px; padding-top:8px; }
header nav { flex:1; }
header nav ul {  }
header nav ul li { display:inline-block; padding:0 15px; }
header nav ul li a { color:#FFF; font-weight:500; font-size:18px; }
header nav ul li a:hover { opacity:0.8 }
header .right-links { display:flex; gap:25px; }
header .right-links a { color:#FFF; display:inline-block; padding:13px 0; font-weight:500; font-size:18px; }
header .right-links a.button { background:#3ebfbb; color:#FFF; padding:13px 30px; }
header .right-links a.button:hover {  }
header .burger { display:none; cursor:pointer; color:#FFF; font-size:33px; }

.mobile-menu-overlay { transition:all 0.3s ease; position:fixed; left:0; top:0; bottom:0; width:100%; display:none; opacity:0; background:rgba(0, 0, 0, 0.2); z-index:999 }
.mobile-menu-overlay.active { display:block; opacity:1 }
.mobile-menu { position:fixed;
            top:0;
            text-align:right;
            right:-320px;
            width:320px;
            height:100%;
            background:#FFF;
            color:#001e35;
            padding:40px;
            z-index:1000;
            transition:all 0.3s ease;
        }
.mobile-menu.active { right: 0; box-shadow:-2px 0 5px rgba(0, 0, 0, 0.5);  }
.mobile-menu .close-menu { cursor:pointer; font-size:33px; }
.mobile-menu ul { list-style-type:none; text-align:left; margin-top:20px; }
.mobile-menu ul li { padding:12px 0; font-size:20px; font-weight:500; }
.mobile-menu ul li a { color:#001e35; }
.mobile-menu ul li a.button { background:#ff7260; color:#FFF; padding-left:0; padding-right:0; width:100%; display:block;  }

.normal-page-content { padding-top:110px; padding-bottom:50px; }

.home-banner { text-align:center; background:#FF7260; background:linear-gradient(108deg, rgba(255, 114, 96, 1) 50%, rgba(246, 108, 91, 1) 50%); padding-top:110px; padding-bottom:50px; }
.home-banner h1 { color:#FFF; font-size:82px; font-weight:700; }
.home-banner .logos { text-align:center; margin-top:35px; margin-bottom:65px; opacity:0.6 }
.home-banner .logos img { margin:0 28px; height:34px; }
.home-banner .buttons { text-align:center; }
.home-banner .buttons a.button { margin:0 15px 10px; background:#3ebfbb; color:#FFF; }
.home-banner .buttons a.button:hover {  }

.reviews { padding:40px 0; color:#333; background:#f8f8f8 }
.reviews .container { display:flex; gap:50px; justify-content:center; }
.reviews .review { flex:1; text-align:center; }
.reviews .review p { margin-bottom:8px; }
.reviews .review i { color:#FFC107; font-size:14px; margin:0 3px; }

.how-it-works { padding:50px 0 }
.how-it-works h2 { text-align:center; font-size:32px; margin-bottom:30px; }
.how-it-works .step-titles { display:flex;  }
.how-it-works .step-titles .step { flex:1;  }
.how-it-works .step-titles .step a { position:relative; font-size:18px; color:#BBB; display:block; padding:20px 0; border-bottom:5px solid #BBB; font-weight:600 }
.how-it-works .step-titles .step a:hover { color:#666; border-bottom-color:#666 }
.how-it-works .step-titles .step a .count { display:inline-block; vertical-align:middle; margin-top:-7px; margin-right:10px; font-size:40px; font-weight:700 }
.how-it-works .step-titles .step a .progress-bar { position:absolute; left:0; bottom:-5px; background:#ff7260; height:5px; width:0; }
.how-it-works .step-titles .step.active a { color:#ff7260; }
.how-it-works .step-titles .step.active a .progress-bar { width:100%; transition:all 5s linear; }
.how-it-works .step-contents {  }
.how-it-works .step-contents .step { padding:35px; text-align:center }
.how-it-works .step-contents .step p { margin-bottom:35px; }

.features { padding:50px 0; background:#f8f8f8 }
.features .container { display:flex; gap:50px; align-items: center; }
.features .left { width: 330px; }
.features .left h2 { font-size:32px; margin-bottom:30px; }
.features .left h2 i { color:#FF7260; margin-bottom:14px; }
.features .left p { font-size:18px; }
.features .buttons { margin-top:35px; }
.features .buttons a.button { background:#3ebfbb; color:#FFF; padding-left:30px; padding-right:30px; }
.features .buttons a.button:hover {  }
.features .right { flex:1 }
.features .features { display:grid; grid-template-columns:1fr 1fr; gap:30px; }
.features .features .feature { background:#fff5c3; padding:25px; border-radius:5px; }
.features .features .feature:nth-child(2n) { transform: translateY(30px); }
.features .features .feature h3 { margin-bottom:7px; }
.features .features .feature p { font-size:15px; }

.pricing { padding:50px 0; background: #FF7260; background: linear-gradient(108deg, rgba(255, 114, 96, 1) 50%, rgba(246, 108, 91, 1) 50%); }
.pricing h2 { color:#FFF; text-align:center; font-size:32px; margin-bottom:40px; }
.pricing .pricing-toggle { color:#FFF; position:relative; text-align:center; margin-bottom:40px; font-weight:600; }
.pricing .pricing-toggle .switch { position:relative; display:inline-block; vertical-align:middle; width:60px; height:34px; margin:-4px 10px 0; }
.pricing .pricing-toggle .switch input { opacity:0; width:0; height:0; }
.pricing .pricing-toggle .slider { position:absolute; cursor:pointer; top:0; left:0; right:0; bottom:0; background-color:#ccc; -webkit-transition:.4s; transition:.4s; }
.pricing .pricing-toggle .slider:before { position:absolute; content:""; height:26px; width:26px; left:4px; bottom:4px; background-color:white; -webkit-transition:.4s; transition:.4s; }
.pricing .pricing-toggle input:checked + .slider { background-color:#3ebfbb; }
.pricing .pricing-toggle input:focus + .slider { box-shadow:0 0 1px #3ebfbb; }
.pricing .pricing-toggle input:checked + .slider:before { -webkit-transform:translateX(26px); -ms-transform:translateX(26px); transform:translateX(26px); }
.pricing .pricing-toggle .slider.round { border-radius:34px; }
.pricing .pricing-toggle .slider.round:before { border-radius:50%; }
.pricing .pricing-toggle .flag { position:absolute; right:-150px; top:6px; font-weight:500; border-radius:11px; background:#3ebfbb; color:#FFF; font-size:12px; padding:3px 8px;  }

.pricing .pricing-table {  }
.pricing .pricing-table .middle { position:relative; background:#FFF; border-radius:10px; max-width:420px; margin:0 auto 32px; padding:30px; border:1px solid #CCC; -webkit-box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.36); box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.36); }
.pricing .pricing-table .middle .price { font-weight:700; font-size:40px; margin-bottom:10px; }
.pricing .pricing-table .middle .price .frequency { font-weight:400; font-size:16px; color:#999 }
.pricing .pricing-table .middle .per-month { margin-bottom:30px; font-size:14px; color:#888 }
.pricing .pricing-table .middle .per-month .flag { display:inline-block; vertical-align:middle; margin-top:-2px; margin-left:5px; border-radius:11px; background:#EEE; color:#000; font-size:12px; padding:3px 8px; }
.pricing .pricing-table .middle a.button { display:block; width:100%; background:#3ebfbb; color:#FFF; }
.pricing .pricing-table .middle a.button:hover {  }
.pricing .pricing-table .middle a.button i { margin-left:5px; transition:all 0.15s; }
.pricing .pricing-table .middle a.button:hover i { margin-left:13px; }
.pricing .pricing-table .middle .included { margin-top:30px; list-style-type:none; font-size:15px; color:#333 }
.pricing .pricing-table .middle .included li { margin-bottom:9px; }
.pricing .pricing-table .middle .included li i { margin-right:7px; color:#3ebfbb }
.pricing .pricing-table .guarantee { color:#333; padding:30px; background:#FFF; max-width:420px; margin:0 auto; border-radius:10px;   -webkit-box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.36); box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.36);}
.pricing .pricing-table .guarantee .title { font-size:20px; margin-bottom:9px; font-weight:600; }
.pricing .pricing-table .guarantee .title i { color:#999; margin-right:5px; }
.pricing .pricing-table .guarantee p { font-size:14px; }

.faqs { padding:50px 0; }
.faqs h2 { text-align:center; font-size:32px; margin-bottom:30px; }
.faqs .faq { border-bottom:1px solid #ccc; }
.faqs .faq .question { width:100%; text-align:left; padding:15px; font-size:16px; border:none; background:#f8f8f8; cursor:pointer; }
.faqs .faq .question:hover { background:#e5e5e5; }
.faqs .faq .answer { display:none; padding:15px; background:#fff; font-size:15px; }
.faqs .faq .answer.active { display:block; }

footer { padding:50px 0 }
footer a { color:#001e35 }
footer .columns { display:flex; gap:50px; width:100%; }
footer .columns .logo { width:200px; font-size:14px; }
footer .columns .logo img { margin-bottom:6px; }
footer .columns .logo a { color:#3ebfbb }
footer .columns .column { flex:1 }
footer .columns ul { list-style-type:none }
footer .columns ul li { padding:5px 0 }
footer .columns ul li a { font-weight:500 }

/* =WordPress Core
-------------------------------------------------------------- */
.alignnone {
    margin: 5px 20px 20px 0;
}

.aligncenter,
div.aligncenter {
    display: block;
    margin: 5px auto 5px auto;
}

.alignright {
    float:right;
    margin: 5px 0 20px 20px;
}

.alignleft {
    float: left;
    margin: 5px 20px 20px 0;
}

a img.alignright {
    float: right;
    margin: 5px 0 20px 20px;
}

a img.alignnone {
    margin: 5px 20px 20px 0;
}

a img.alignleft {
    float: left;
    margin: 5px 20px 20px 0;
}

a img.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.wp-caption {
    background: #fff;
    border: 1px solid #f0f0f0;
    max-width: 96%; /* Image does not overflow the content area */
    padding: 5px 3px 10px;
    text-align: center;
}

.wp-caption.alignnone {
    margin: 5px 20px 20px 0;
}

.wp-caption.alignleft {
    margin: 5px 20px 20px 0;
}

.wp-caption.alignright {
    margin: 5px 0 20px 20px;
}

.wp-caption img {
    border: 0 none;
    height: auto;
    margin: 0;
    max-width: 98.5%;
    padding: 0;
    width: auto;
}

.wp-caption p.wp-caption-text {
    font-size: 11px;
    line-height: 17px;
    margin: 0;
    padding: 8px 4px;
    font-weight:600;
}

/* Text meant only for screen readers. */
.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute !important;
  width: 1px;
  word-wrap: normal !important; /* Many screen reader and browser combinations announce broken words as they would appear visually. */
}

.screen-reader-text:focus {
  background-color: #eee;
  clip: auto !important;
  clip-path: none;
  color: #444;
  display: block;
  font-size: 1em;
  height: auto;
  left: 5px;
  line-height: normal;
  padding: 15px 23px 14px;
  text-decoration: none;
  top: 5px;
  width: auto;
  z-index: 100000;
  /* Above WP toolbar. */
}