/*!
 * Theme Name: 		   OceanWP
 * Text Domain: 	   oceanwp
 * Version:            4.1.4
 * Tested up to:       6.9
 * Requires at least:  5.6
 * Requires PHP:       7.4
 * Author:             OceanWP
 * Author URI:         https://oceanwp.org/about-oceanwp/
 * Theme URI:          https://oceanwp.org/
 * Description:        OceanWP is the perfect theme for your project. Lightweight and highly extendable, it will enable you to create almost any type of website such a blog, portfolio, business website and WooCommerce storefront with a beautiful & professional design. Very fast, responsive, RTL & translation ready, best SEO practices, unique WooCommerce features to increase conversion and much more. You can even edit the settings on tablet & mobile so your site looks good on every device. Work with the most popular page builders as Elementor, Beaver Builder, Brizy, Visual Composer, Divi, SiteOrigin, etc... Developers will love his extensible codebase making it a joy to customize and extend. Best friend of Elementor & WooCommerce. Looking for a Multi-Purpose theme? Look no further! Check the demos to realize that it's the only theme you will ever need: https://oceanwp.org/demos/
 * Tags:               two-columns, right-sidebar, footer-widgets, blog, news, custom-background, custom-menu, post-formats, rtl-language-support, sticky-post, editor-style, threaded-comments, translation-ready, buddypress, custom-colors, featured-images, full-width-template, theme-options, e-commerce, block-styles, wide-blocks, accessibility-ready
 *
 * License: GNU General Public License v2.0 or later
 * License URI: https://www.gnu.org/licenses/gpl-2.0.html
 *
 * All files, unless otherwise stated, are released under the GNU General Public
 * License version 2.0 (http://www.gnu.org/licenses/gpl-2.0.html)

 * This theme, like WordPress, is licensed under the GPL.
 * Use it to make something cool, have fun, and share what you've learned
 * with others.
 *
 * DO NOT ADD YOUR CSS TO THIS FILE - IT WILL BE LOST
 * To add your own CSS, use a child theme: https://github.com/oceanwp/oceanwp-child-theme
 *
 * CSS file is in "assets/css"
 */
 
 
 
 /*
Theme Name: FlexiHome Pro
Theme URI: https://example.com/flexihome-pro
Author: Your Name
Author URI: https://example.com
Description: A flexible WordPress theme with customizable home page templates, sliders, and sections.
Version: 1.0.0
License: GPL v2 or later
Text Domain: flexihome
*/

/* Reset and Base Styles */
* {
    margin: 0; 
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.6;
    color: #333;
    background-color: #f8f9fa;
}

.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}

/* Header Styles */
.site-header {
    background: #fff;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    position: sticky;
    top: 0;
    z-index: 1000;
}

.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 0;
}

.site-branding h1 {
    font-size: 28px;
    font-weight: 700;
    color: #4361ee;
}

.site-branding h1 a {
    text-decoration: none;
    color: inherit;
}

/* Main Navigation */
.main-navigation ul {
    display: flex;
    list-style: none;
    gap: 30px;
}

.main-navigation a {
    text-decoration: none;
    color: #333;
    font-weight: 500;
    transition: color 0.3s;
}

.main-navigation a:hover {
    color: #4361ee;
}

/* Hero Slider */
.hero-slider {
    position: relative;
    height: 600px;
    overflow: hidden;
    margin-bottom: 60px;
}

.swiper {
    width: 100%;
    height: 100%;
}

.slide-item {
    position: relative;
    height: 100%;
    display: flex;
    align-items: center;
    color: white;
}

.slide-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    z-index: 1;
}

.slide-content {
    position: relative;
    z-index: 2;
    max-width: 600px;
    padding: 40px;
    background: rgba(0,0,0,0.6);
    border-radius: 10px;
    margin-left: 10%;
}

.slide-content h2 {
    font-size: 48px;
    margin-bottom: 20px;
    font-weight: 700;
}

.slide-content p {
    font-size: 18px;
    margin-bottom: 30px;
}

.btn-primary {
    display: inline-block;
    background: #4361ee;
    color: white;
    padding: 12px 30px;
    border-radius: 5px;
    text-decoration: none;
    font-weight: 600;
    transition: background 0.3s;
}

.btn-primary:hover {
    background: #3a56d4;
}

/* Custom Sections */
.custom-section {
    padding: 80px 0;
}

.section-header {
    text-align: center;
    margin-bottom: 50px;
}

.section-header h2 {
    font-size: 36px;
    color: #333;
    margin-bottom: 15px;
}

.section-header p {
    color: #666;
    max-width: 700px;
    margin: 0 auto;
}

/* Features Section */
.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

.feature-box {
    background: white;
    padding: 40px 30px;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    text-align: center;
    transition: transform 0.3s;
}

.feature-box:hover {
    transform: translateY(-10px);
}

.feature-icon {
    font-size: 48px;
    color: #4361ee;
    margin-bottom: 20px;
}

.feature-box h3 {
    font-size: 22px;
    margin-bottom: 15px;
    color: #333;
}

/* Services Section */
.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 30px;
}

.service-card {
    background: white;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}

.service-img {
    height: 200px;
    overflow: hidden;
}

.service-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s;
}

.service-card:hover .service-img img {
    transform: scale(1.1);
}

.service-content {
    padding: 30px;
}

.service-content h3 {
    font-size: 22px;
    margin-bottom: 15px;
    color: #333;
}

/* CTA Section */
.cta-section {
    background: linear-gradient(135deg, #4361ee, #3a56d4);
    color: white;
    text-align: center;
    padding: 100px 0;
    border-radius: 10px;
    margin: 80px 0;
}

.cta-section h2 {
    font-size: 42px;
    margin-bottom: 20px;
}

.cta-section p {
    font-size: 18px;
    max-width: 700px;
    margin: 0 auto 40px;
    opacity: 0.9;
}

.btn-secondary {
    display: inline-block;
    background: white;
    color: #4361ee;
    padding: 15px 40px;
    border-radius: 5px;
    text-decoration: none;
    font-weight: 600;
    font-size: 18px;
    transition: transform 0.3s;
}

.btn-secondary:hover {
    transform: translateY(-3px);
}

/* Footer */
.site-footer {
    background: #222;
    color: #aaa;
    padding: 60px 0 30px;
}

.footer-widgets {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 40px;
    margin-bottom: 40px;
}

.footer-widget h3 {
    color: white;
    font-size: 20px;
    margin-bottom: 25px;
    padding-bottom: 10px;
    border-bottom: 2px solid #4361ee;
}

.footer-widget ul {
    list-style: none;
}

.footer-widget ul li {
    margin-bottom: 10px;
}

.footer-widget a {
    color: #aaa;
    text-decoration: none;
    transition: color 0.3s;
}

.footer-widget a:hover {
    color: white;
}

.copyright {
    text-align: center;
    padding-top: 30px;
    border-top: 1px solid #444;
    font-size: 14px;
}

/* Responsive Design */
@media (max-width: 768px) {
    .header-container {
        flex-direction: column;
        gap: 20px;
    }
    
    .main-navigation ul {
        flex-wrap: wrap;
        justify-content: center;
        gap: 15px;
    }
    
    .hero-slider {
        height: 400px;
    }
    
    .slide-content {
        margin: 0 auto;
        text-align: center;
        padding: 20px;
    }
    
    .slide-content h2 {
        font-size: 32px;
    }
    
    .custom-section {
        padding: 50px 0;
    }
    
    .section-header h2 {
        font-size: 28px;
    }
    
    .cta-section {
        padding: 60px 20px;
    }
    
    .cta-section h2 {
        font-size: 32px;
    }
}

/* Admin Template Selector */
.template-selector {
    background: white;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    margin-bottom: 40px;
}

.template-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

.template-option {
    border: 2px solid #eee;
    border-radius: 8px;
    padding: 20px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s;
}

.template-option:hover {
    border-color: #4361ee;
}

.template-option.active {
    border-color: #4361ee;
    background: rgba(67, 97, 238, 0.05);
}

.template-preview {
    width: 100%;
    height: 150px;
    background: #f5f7fb;
    margin-bottom: 15px;
    border-radius: 5px;
    overflow: hidden;
}