/* DEVICES WHICH WIDTH 1024px TO 1200px */
@media only screen and (max-width:1200px){
    .hero-text-box {                   
        width: 100%;
        padding: 0 5%;
    }
    .row { padding: 0 2%; }
    .main-nav { margin-right: 30px; }
}

/* DEVICES WHICH WIDTH 768px TO 1023px */
@media only screen and (max-width:1023px){
    body { font-size: 18px; }
    section { padding: 60px 0; }
    .section-intro {
        width: 70%;
        margin-left: 15%;
    }
    .button-app img {
        height: 45px;
        margin-right: 3%;
    }
    .phone-screen { width: 60%; }
    .steps { margin: 3% 0 12% 0; }
    .steps div { padding: 3%; }
    .icon-small {
        font-size: 145%;
        margin-right: 1%;
    }
    h3 { font-size: 100%; }
    h3:after { width: 15px; }
    .city-feature { font-size: 80% }
    .plan-price { font-size: 260%; }
    span { font-size: 40%; }
    .plan-specifications { font-size: 70%; }
    .main-nav { 
        margin: 45px 25px 0 0;
        font-size: 110%;
    }
}

/* DEVICES WHICH WIDTH 480px TO 767px */
@media only screen and (max-width:767px){
    body { font-size: 16px; }
    section { padding 30px 0; }
    .row .hero-text-box { padding: 0 4%}
    .col { 
        width: 100%;
        margin: 0 0 4% 0;
    }
    .main-nav li { margin-left: 10px; font-size:13px; }
    .main-nav { 
        display: block; 
        width:100%; 
        text-align: center; 
        margin: 35px 10px 0 0; 
    }
    .city-feature { font-size: 100%; }
    h3 { font-size: 140% }
    .steps div { padding: 2.5%; }
    .phone-screen { width: 40%; }
    .step-box:first-child { text-align: center; }
    .plan-specifications { font-size: 100%; }
    .form-box { margin:  5px 0;}
    input[type=text], 
    input[type=email], 
    textarea, 
    select { font-size: 90%; }
    .section-intro { width: 100%; margin: 5px;}
    .logo {
        width: 20%;                   
        margin: 20px 0 0 40%;
    }
    .sticky-nav .logo-black { 
        width: 70px; 
        height: auto;
        margin: 0 43%;
        margin-top: 12px;
    }
    .sticky-nav .main-nav { margin: 20px auto 16px auto; }
    .contact-form { width: 100%; }
}

/* DEVICES WHICH WIDTH 0px TO 480px */
@media only screen and (max-width:480px){
    section { padding: 25px 0; }
    .contact-form { width: 100%; }
}

/* Media halkan for Responsive Design */


/* Media Queries for Responsive Design */

/* Show hamburger menu and hide main-nav on small screens */
@media (max-width: 768px) {
    .hamburger-menu {
        display: block; /* Make sure it's visible on small screens */
        position: absolute; /* Position relative to the header */
        top: 15px; /* Adjust based on header height */
        right: 20px; /* Align with the right side */
        cursor: pointer; /* Indicate that it's clickable */
        z-index: 1000; /* Ensure it's above other content */
    }

    /* Style for hamburger lines */
    .hamburger-menu .line {
        display: block;
        width: 30px; /* Adjust width */
        height: 3px; /* Adjust height */
        background-color: #b27878; /* White lines for contrast */
        margin: 5px 0; /* Spacing between lines */
        transition: background-color 0.3s ease, transform 0.3s ease; /* Smooth transitions */
    }

    .hamburger-menu.open .line:nth-child(1) {
        transform: rotate(45deg); /* Rotate top line */
        background-color: #e67e22; /* Color change on click */
    }

    .hamburger-menu.open .line:nth-child(2) {
        opacity: 0; /* Hide middle line */
    }

    .hamburger-menu.open .line:nth-child(3) {
        transform: rotate(-45deg); /* Rotate bottom line */
        background-color: #e67e22; /* Color change on click */
    }

    /* Hide the main-nav by default on small screens */
    .main-nav {
        display: none; /* Hide the menu by default */
        flex-direction: column; /* Arrange menu items vertically */
        position: fixed; /* Fixed position for dropdown effect */
        top: 60px; /* Position below the hamburger menu */
        right: 20px; /* Align with the right side */
        background: rgba(169, 100, 100, 0.95); /* Lighter background for better contrast */
        padding: 20px; /* Padding for menu items */
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); /* More pronounced shadow for a modern look */
        width: 250px; /* Set a fixed width */
        border-radius: 8px; /* Rounded corners for a softer look */
        transform: translateX(100%); /* Initially position the menu off-screen */
        transition: transform 0.3s ease, opacity 0.3s ease; /* Smooth transition for sliding effect and opacity */
        opacity: 0; /* Start with invisible menu */
        z-index: 999; /* Ensure it's above other content */
    }

    /* Show the menu when the 'show' class is added */
    .main-nav.show {
        display: flex; /* Show the menu */
        transform: translateX(0); /* Slide the menu into view */
        opacity: 1; /* Fade in the menu */
    }

    /* Style for list items */
    .main-nav li {
        margin-bottom: 10px; /* Reduce space between menu items */
        position: relative; /* Needed for pseudo-elements */
    }

    /* Style for links in the menu */
    .main-nav li a {
        padding: 12px 20px; /* Increase padding for better touch targets */
        color: #333; /* Darker text color for better readability */
        font-size: 18px; /* Larger font size for readability */
        font-weight: 600; /* Bold text */
        text-transform: none; /* Remove uppercase transformation */
        border-radius: 8px; /* Rounded corners for links */
        display: block; /* Ensure links take up the full width */
        transition: background-color 0.3s ease, color 0.3s ease; /* Smooth transition for hover effects */
        background: linear-gradient(135deg, #a24f4f 0%, #c57171 100%); /* Gradient background */
    }

    .main-nav li a:hover {
        background-color: #e67e22; /* Background color on hover */
        color: #7d4949; /* White text color on hover */
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Shadow on hover for a more pronounced effect */
        padding-left: 25px; /* Indicate hover with padding change */
    }

    /* Add a subtle icon or visual indicator */
    .main-nav li::after {
        content: '▶'; /* Arrow indicator */
        position: absolute;
        right: 20px; /* Position the arrow on the right side */
        font-size: 14px; /* Adjust size of the arrow */
        color: #e67e22; /* Color of the arrow */
        transition: transform 0.3s ease; /* Smooth transition for icon rotation */
        opacity: 0; /* Initially hidden */
    }

    .main-nav li a:hover::after {
        transform: translateX(5px); /* Shift arrow on hover */
        opacity: 1; /* Show arrow on hover */
    }

    /* Adjust hero-text-box text sizes on small screens */
    .hero-text-box h1 {
        font-size: 1.2em; /* Adjust font size */
        text-align: justify; /* Adjust text alignment */
    }

    .hero-text-box h2 {
        font-size: 1em; /* Adjust font size */
    }

    .hero-text-box h3 {
        font-size: 0.8em; /* Adjust font size */
    }
}