@charset "utf-8";
/* CSS Document */


@import url('../css/owl.carousel.min.css');

 /* Basic Reset */
        body {
            margin: 0;
            font-family: 'Arial', sans-serif; /* Using a common font */
            background-color: #f8f8f8; /* Light background */
            color: #333;
        }

        /* General Layout */
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
        }

        section {
            padding: 80px 0;
        }

        .section-title {
            text-align: center;
            color: #f1c752;
            font-size: 36px;
            margin-bottom: 10px;
            font-weight: bold;
        }

        .section-description {
            text-align: center;
            color: #6a849c; /* Blueish color */
            font-size: 18px;
            margin-bottom: 40px;
        }

        /* Header */
        header {
            background-color: #f9f9f9;
            padding: 10px 0;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }

        .header-content {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .logo {
            display: flex;
            align-items: center;
			margin-right: 10px;
        }

        /* Navigation and Dropdown */
        nav ul {
            list-style: none;
            padding: 0;
            margin: 0;
            display: flex;
        }

        nav ul li {
            margin-left: 30px;
            position: relative; /* Needed for dropdown positioning */
        }

        nav a {
            text-decoration: none;
            color: #6a849c;
			font-size:16px;
            font-weight: bold;
            padding: 10px 0; /* Add padding for clickable area */
            display: block; /* Make the whole area clickable */
        }
		nav a:hover {
            color: #f1c752;
			}

        /* Dropdown styling */
        nav ul li ul {
            display: none; /* Hide by default */
            position: absolute; /* Position relative to the parent li */
            top: 100%; /* Position below the parent link */
            left: 0;
            background-color: #fff; /* White background */
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
            border: 1px solid #eee;
            border-radius: 5px;
            min-width: 200px; /* Minimum width for the dropdown */
            z-index: 10; /* Ensure it appears above other content */
            flex-direction: column; /* Stack dropdown items vertically */
            padding: 10px 0; /* Padding inside dropdown */
        }

        nav ul li:hover > ul {
            display: flex; /* Show on hover */
        }

        nav ul li ul li {
            margin: 0; /* Remove margin from dropdown items */
            padding: 0; /* Remove padding from dropdown items */
        }

        nav ul li ul li a {
            padding: 10px 20px; /* Padding for dropdown links */
            color: #333;
            font-weight: normal; /* Normal font weight for dropdown items */
             white-space: nowrap; /* Prevent text wrap */
        }

        nav ul li ul li a:hover {
            background-color: #f8f8f8; /* Hover effect */
        }


        .header-right {
            display: flex;
            align-items: center;
        }

        .header-right span {
            margin-right: 20px;
            color: #555;
        }

        .header-right .icon-placeholder {
            width: 24px;
            height: 24px;
            background-color: #ccc;
            margin-right: 10px;
        }

        .header-right .sign-in-button {
            background-color: #f8f8f8; /* Light grey */
            border: 1px solid #ccc;
            padding: 8px 15px;
            border-radius: 5px;
            cursor: pointer;
            font-weight: bold;
        }

        /* Hero Section */
        .hero-section {
            background-color: #fff;
            padding: 80px 0;
        }

        .hero-content {
            display: flex;
            align-items: center;
            gap: 40px;
        }

        .hero-text {
            flex: 1;
        }

        .hero-text h1 {
            color: #f1c752; /* Yellow color */
            font-size: 48px;
            margin-bottom: 10px;
			font-weight: 600;
        }

        .hero-text h2 {
            color: #6a849c; /* Blueish color */
            font-size: 36px;
            margin-bottom: 20px;
			font-weight: 600;
        }
		

        .hero-text p {
            color: #777;
            font-size: 18px;
            line-height: 1.6;
            margin-bottom: 30px;
        }

        .get-started-button {
            background-color: #f1c752; /* Yellow color */
            padding: 12px 40px;
            border: none;
            border-radius: 25px;
            cursor: pointer;
            font-weight: bold;
            transition: background-color 0.3s ease;
        }
		.get-started-button a{font-size: 16px; color: #000;}
		.get-started-button a:hover{color: #5a799b; /* Blueish color */}

        .hero-image-placeholder {
			width: 600px;
			height: 400px;
			background-color: #7a9bcc;
			position: absolute;
			right: 0;
			top: 50%;
			transform: translateY(-50%);
			border-top-left-radius: 150px;
			background-image: url(../images/Home%20banner.jpg);
			background-size: cover;
			background-position: center;
			z-index: 0;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #fff;
			font-size: 1em;
			font-weight: bold;
			overflow: hidden;

        }

        /* Logos Section */
        .logos-section {
            background-color: #f1c752; /* Yellow background */
            padding: 20px 0;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }		

        .logo-arrow {
            font-size: 30px;
            color: #fff;
            cursor: pointer;
            padding: 0 20px;
        }

        .logos-container {
            display: flex;
            gap: 40px;
            overflow: hidden; /* Hide logos outside */
        }

        .logo-placeholder-item {
            /*height: 50px;  Height of logo */
            /*width: 224px;*/ /* Approximate width */
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            color: #555;
        }
		.logo-placeholder-item img{height:120px;}


        /* Services Section */
        .services-container {
            display: flex;
            justify-content: center;
            gap: 30px;
            flex-wrap: wrap;
        }

        .service-card {
            background-color: #fff;
            padding: 30px;
            border-radius: 45px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.1); /* Subtle shadow */
            width: 300px;
            text-align: left;
            position: relative; /* Needed for the curve effect if desired */
            overflow: hidden; /* Helps with shape effects if needed */
            border: 1px solid #f1c752; /* Light border */
        }

        .service-card h3 {
            color: #f1c752; /* Yellow color */
            font-size: 25px;
            margin-bottom: 15px;
			font-weight:600;
        }

        .service-card p {
            color: #6a849c; /* Blueish color */
            font-size: 16px;
            line-height: 1.6;
        }
        /* The curve effect is complex CSS, just simulating the card look */


        /* Testimonials Section */
        .testimonials-container {
            display: flex;
            justify-content: center;
            gap: 30px;
            flex-wrap: wrap;
        }

        .testimonial-block {
            background-color: #fff;
            padding: 30px;
            border-radius: 15px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.08);
            width: 350px;
            text-align: center;
        }

        .avatar-placeholder {
            width: 80px;
            height: 80px;
            background-color: #f1c752; /* Yellow color */
            border-radius: 50%;
            margin: 0 auto 20px;
        }

        .testimonial-block p {
            color: #6a849c; /* Blueish color */
            font-size: 16px;
            line-height: 1.6;
            margin-bottom: 15px;
        }

        .testimonial-block .author-name {
            font-weight: bold;
            color: #333;
            font-size: 15px;
        }


        /* Blogs Section */
        .blogs-section {
             background-color: #dde2e8;
             padding: 80px 0;
        }

        .blog-content-wrapper {
            display: flex;
            align-items: center;
            gap: 40px;
        }

        .blog-image-placeholder {
            flex: 1;
            background-color: #ccc; /* Grey placeholder */
            height: 350px; /* Adjust height as needed */
            border-top-right-radius: 150px;
			/*background-image: url(../images/Home%20banner.jpg);*/
            display: flex;
            align-items: center;
            justify-content: center;
            color: #555;
            font-weight: bold;
            text-align: center;
             overflow: hidden; /* In case of complex shapes */
        }

        .blog-text-content {
            flex: 1;
        }

        .blog-text-content h3 {
            color: #f1c752; /* Yellow color */
            font-size: 27px;
			font-weight:600;
        }
         .blog-text-content h4 {
            color: #6a849c; /* Blueish color */
            font-size: 20px;
            margin-bottom: 20px;
        }


        .blog-text-content p {
            color: #6a849c; /* Blueish color */
            font-size: 16px;
            line-height: 1.6;
            margin-bottom: 20px;
        }

        .blog-text-content a {
            color: #6a849c; /* Blueish color */
            text-decoration: none;
            font-weight: bold;
        }


        /* Contact Us Section */
        .contact-section {
             background-color: #f8f8f8; /* Light grey background */
             padding: 80px 0;
        }
        .contact-content-wrapper {
            display: flex;
            gap: 40px;
            flex-wrap: wrap; /* Allow wrapping on small screens */
        }

        .contact-info {
            flex: 1;
            min-width: 300px; /* Ensure it doesn't get too small */
        }

        .contact-info h2 {
            color: #6a849c; /* Blueish color */
             font-size: 36px;
             margin-bottom: 10px;
             font-weight: bold;
             text-align: left;
        }

        .contact-info p {
            color: #777;
            font-size: 18px;
            line-height: 1.6;
            margin-bottom: 30px;
             text-align: left;
        }

        .contact-info .contact-item {
            display: flex;
            align-items: center;
            margin-bottom: 15px;
            color: #777;
            font-size: 16px;
        }

        .contact-info .contact-item .icon-placeholder {
             margin-right: 10px;
        }

         .contact-info .contact-item a {
             color: #777;
             text-decoration: none;
         }

        .contact-form {
            flex: 1;
            min-width: 300px; /* Ensure it doesn't get too small */
             background-color: #fff;
             padding: 30px;
             border-radius: 10px;
             box-shadow: 0 5px 15px rgba(0,0,0,0.08);
        }

        .form-group {
            margin-bottom: 20px;
        }


        /* Footer */
        footer {
            background-color: #fff;
            padding: 40px 0 0px;
            text-align: center;
			border-top: 2px solid #f1c752;
        }

        .footer-content {
             display: flex;
             justify-content: space-around;
             gap: 30px;
             text-align: left;
             flex-wrap: wrap;
        }

        .footer-col {
            flex: 1;
            min-width: 150px; /* Ensure columns don't collapse too much */
        }

         .footer-col .logo {
             margin-bottom: 20px;
         }


        .footer-col h3 {
            color: #6a849c; /* Blueish color */
            font-size: 18px;
            margin-bottom: 15px;
			font-weight:600;
        }

        .footer-col ul {
            list-style: none;
            padding: 0;
            margin: 0;
        }

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

        .footer-col a {
            text-decoration: none;
            color: #6a849c;
			font-weight:600;
			font-size:14px;
        }
		.footer-col a:hover {
            color: #f1c752;
        }

         .footer-col .contact-item {
             display: flex;
             align-items: center;
             margin-bottom: 15px;
             color: #777;
             font-size: 15px;
         }

         .footer-col .contact-item .icon-placeholder {
              margin-right: 10px;
         }

         /*.footer-col .contact-item a {
             color: #777;
             text-decoration: none;
         }*/


        .copyright-bar {
            background-color: #f1c752; /* Yellow color */
            padding: 10px 0;
            font-size: 14px;
            color: #555;
            margin-top: 40px;
        }

         .dmca-badge-placeholder {
             width: 80px;
             height: 20px;
             background-color: #fff;
             margin-right: 10px;
             display: inline-block;
             vertical-align: middle;
             border: 1px solid #ccc;
         }


        /* Specific Comment Section Overlay (Ignoring as per instruction, but structure noted) */
        /* The right-side comment panel overlay seen in the image is UI from the platform,
           not part of the page structure to replicate in HTML. */

        /* Placeholder for the comment sidebar (structure only, not functional) */
         .comment-sidebar-placeholder {
             position: fixed;
             top: 0;
             right: 0;
             width: 300px; /* Adjust width as needed */
             height: 100vh;
             background-color: #fff;
             border-left: 1px solid #eee;
             box-shadow: -2px 0 5px rgba(0,0,0,0.1);
             z-index: 100; /* Ensure it's on top */
             padding: 20px;
             box-sizing: border-box;
             display: none; /* Hide by default as it seems like a design tool feature */
             /* If you want to display the placeholder box: */
             /* display: block; */
         }
         .comment-sidebar-placeholder .comment-header {
            text-align: right;
            margin-bottom: 20px;
            font-size: 0.9em;
            color: #555;
         }
         .comment-sidebar-placeholder .comment-header span {
             margin-left: 10px;
         }
          .comment-sidebar-placeholder .comment-header .icon-placeholder {
             width: 15px; height: 15px; background-color: #ccc; display: inline-block; border-radius: 50%; vertical-align: middle;
          }
         .comment-sidebar-placeholder .comment-input-box {
             border: 1px solid #ccc;
             padding: 10px;
             min-height: 80px;
             margin-bottom: 15px;
             font-size: 0.9em;
             color: #888;
             background-color: #f9f9f9;
             border-radius: 4px;
         }
         .comment-sidebar-placeholder .comment-actions {
             text-align: right;
         }
         .comment-sidebar-placeholder .comment-actions button {
             padding: 8px 15px;
             margin-left: 10px;
             cursor: pointer;
             border: 1px solid #ccc;
             border-radius: 4px;
             background-color: #eee;
             color: #555;
         }
          .comment-sidebar-placeholder .comment-actions button:last-child {
             background-color: #f1c752; /* Yellow color */
             border-color: #f1c752;
             color: #333;
          }
          .comment-list-placeholder {
             margin-top: 30px;
             text-align: center;
             color: #888;
          }
           .comment-list-placeholder .no-comment-icon-placeholder {
                width: 60px;
                height: 60px;
                background-color: #eee; /* Grey placeholder */
                margin: 0 auto 15px auto;
                border-radius: 50%; /* Circular placeholder */
           }
           .comment-list-placeholder p {
               margin: 5px 0;
           }
		   

/* --- About Us Specific Styles --- */

        /* Who we are? Section */
        .who-we-are-section {
            position: relative; /* Needed for background image and overlay */
            padding: 100px 0; /* More vertical padding */
            color: #fff; /* White text */
            overflow: hidden; /* Hide background overflow if needed */
			min-height: 400px;
        }

        .who-we-are-section .background-placeholder {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: #ccc; /* Grey placeholder */
            /* In the image there's a faint image + dark blue overlay */
            /* We simulate the final look with a dark blue background */
            background-color: #3b5998; /* Dark blue from the image overlay */
            z-index: 1;
        }
		.background-placeholder img{width:100%;}

        .who-we-are-section .container {
             position: relative; /* Position content above placeholder */
             z-index: 2;
        }

        .who-we-are-section h2 {
            color: #ffc107; /* Yellow color */
            font-size: 48px;
            margin-bottom: 20px;
            font-weight: bold;
        }

        .who-we-are-section p {
            font-size: 17px;
            line-height: 1.6;
            max-width: 900px; /* Limit width for readability */
        }
        /* Mission/Vision Section */
        .mission-vision-section {
            background-color: #fff;
            padding: 80px 0;
        }

        .mission-vision-content {
            display: flex;
            gap: 40px;
            flex-wrap: wrap; /* Allow wrapping */
            align-items: center;
        }

        .mission-vision-text {
            flex: 1;
        }
		 .mission-vision-text span{color:#6a849c;}

        .mission-vision-text h3 {
            color: #ffc107; /* Yellow color */
            font-size: 28px;
            margin-bottom: 15px;
            font-weight: bold;
        }

        .mission-vision-text p {
            color: #6a849c;
            font-size: 16px;
            line-height: 1.6;
            margin-bottom: 30px; /* Space between mission and vision */
        }

        .mission-vision-image-placeholder {
            flex: 1;
            display: flex;
        }

        /* Our Team Section */
        .team-section {
            background-color: #f8f8f8; /* Light grey background */
            padding: 80px 0;
        }

        .team-members-container {
            display: flex;
            justify-content: center;
            gap: 30px; /* Space between members */
            flex-wrap: wrap; /* Allow wrapping to multiple rows */
             margin-top: 40px; /* Space below description */
        }

        .team-member {
            text-align: center;
            width: 150px; /* Approximate width for a member block */
        }

        .team-member .avatar-placeholder {
            width: 120px; /* Size of avatar */
            height: 120px;
            background-color: #ccc; /* Grey placeholder as requested for images */
            border-radius: 50%;
            margin: 0 auto 10px; /* Center avatar and space below */
             /* The original image has actual photos, replacing with grey circle */
        }

        .team-member .member-name {
            font-weight: bold;
            color: #333;
            font-size: 16px;
        }

        /* Our Values Section */
        .values-section {
            background-color: #fff;
            padding: 80px 0;
        }

        .values-content-wrapper {
            display: flex;
            align-items: center;
            gap: 40px;
            flex-wrap: wrap; /* Allow wrapping */
        }

        .values-diagram-area {
            flex: 1;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .values-diagram-placeholder {
            display: flex;
            flex-direction: column;
            position: relative; /* For positioning text labels if needed */
        }
        .values-text-area {
            flex: 1;
            min-width: 300px; /* Prevent collapse */
        }

        .values-text-item {
            color: #6a849c;
            font-size: 15px;
            line-height: 1.6;
            margin-bottom: 20px; /* Space between text blocks */
        }
         /* The image has multiple distinct paragraphs, we'll use text blocks */
		 
		 
		.services-intro {
            padding: 40px 0;
            background-color: #fff; /* White background */
        }
        .services-intro h2 {
             color: #ffcc00; /* Yellow color */
             margin-bottom: 20px;
			 font-weight:600;
        }
		.services-intro h2 span {
             color: #6a849c;
			 }
        .services-intro p {
            font-size: 1.1em;
            color: #6a849c;
        }

        .our-services-boxes {
            background-color: #f0f0f0; /* Light grey background */
            padding: 60px 0;
        }
        .our-services-boxes .container h2 {
            color: #5a799b; /* Blue color */
        }
        .our-services-boxes .service-items {
            display: flex;
            flex-wrap: wrap;
            justify-content: center; /* Center items if they don't fill the row */
            gap: 30px;
        }

        .service-item {
            background-color: #fff; /* White background */
            border-radius: 15px; /* Rounded corners as seen in the image */
            padding: 30px;
            width: 280px; /* Fixed width based on visual estimation */
            box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* Optional subtle shadow */
            text-align: left;
             display: flex;
             flex-direction: column;
             justify-content: space-between; /* Push text to the bottom */
        }
        .service-item h3 {
            font-size: 1.6em;
            margin-top: 0;
            margin-bottom: 15px;
            color: #ffcc00; /* Yellow color */
        }
        .service-item p {
            font-size: 1em;
            color: #666;
            line-height: 1.5;
        }

        .why-work-with-us {
            background:url(../images/why-work-with-us.jpg) no-repeat; /* Light grey background */
           /* padding: 60px 0;*/
			height:310px;
			margin:0 auto; background-size:100%;
        }
        .why-work-with-us .container {
             display: flex;
             gap: 40px;
             align-items: stretch; /* Ensure columns stretch */
        }
        .why-work-with-us-left {
             flex: 1;
             display: flex;
             flex-direction: column;
             align-items: center;
             justify-content: center;
             text-align: center;
        }
        .why-work-with-us-image-placeholder {
            width: 250px; /* Placeholder size */
            height: 250px; /* Placeholder size */
            background-color: #ccc; /* Grey placeholder */
            border-radius: 50%; /* Make it circular as seen in the image */
            margin-bottom: 20px;
             display: flex;
             align-items: center;
             justify-content: center;
             font-size: 0.9em;
             color: #555;
             flex-shrink: 0; /* Prevent shrinking */
        }
         .why-work-with-us-left h2 {
             font-size: 2.5em;
             color: #ffcc00; /* Yellow color */
             margin: 0 0 10px 0;
             text-align: center;
         }
          .why-work-with-us-left p {
              font-size: 1.2em;
              color: #666;
              text-align: center;
          }

/* Virtual Assistant page */

        .section.what-is-va {
            background-color: #6480a4; /* Placeholder background color */
            color: #fff;
        }
        .what-is-va-content {
            display: flex;
            align-items: center;
            gap: 40px;
        }
        .what-is-va-text {
            flex: 1;
        }
        .what-is-va-text h2 {
            color: #ffcc00;
            text-align: left;
			font-weight:600;
        }
		.what-is-va-text h2 span{
			color: #fff;
        }
		.what-is-va-text h3{
			color: #5b7da5;
			font-weight:600;
			font-size:35px;
        }
		.what-is-va-text h3 span{color: #fff;}
        .what-is-va-text p {
            margin-bottom: 30px;
            font-size:17px;
            line-height: 1.6;
        }
        .what-is-va-image-placeholder {
			border-top:2px solid #6584aa;
        }
        .why-va-services-content {
            display: flex;
            gap: 40px;
        }
        .why-va-services-content > div {
            flex: 1;
			font-size: 18px;
			color:#ffcc00;
        }
		.why-va-services-content h2{
             color: #ffcc00;
			 font-weight:600;
			 font-size:35px;
		}
		.why-va-services-content h2 span{
             color:#6a849c;
			 }
        .why-va-services-content p {
            margin-bottom: 20px;
            line-height: 1.6;
			font-size:17px;
			color: #6a849c;
        }
        .why-va-services-content p strong {
             color: #ffcc00; /* Placeholder color for numbers */
             margin-right: 10px;
        }
		.why-choose-us {
             background:#f0f0f0;
			 padding: 40px 0;
        }		
        .why-choose-us-content {
             display: flex;
             gap: 40px;
             align-items: center;
             background-color: #f0f0f0; /* Section background */
        }
        .why-choose-us-image-placeholder {
            flex: 1;
            height: 500px; /* Placeholder height */
            background-image: url(../images/Why%20choose%20us.jpg); /* Placeholder image */
            background-size: cover;
            background-position: center;
            min-width: 300px; /* Ensure it has space */
        }
		.why-choose-us-icon{margin:10px;}
        .why-choose-us-text {
            flex: 1;
            padding-right: 40px; /* Space from the right edge */
        }
        .why-choose-us-text h2 {
             text-align: left;
			 font-weight:600;
			 color:#6a849c;
			 font-size:35px;
        }
		.why-choose-us-text h2 span {
             color:#ffcc00;
        }
        .why-choose-us-text p.subtitle {
            margin-top: -10px;
            margin-bottom: 30px;
            color: #666;
			font-size:18px;
        }
        .why-choose-us-items {
            display: grid;
            grid-template-columns: 1fr 1fr; /* Two columns */
            gap: 30px; /* Gap between items */
        }
        .why-choose-us-item {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
        }
        .why-choose-us-item .icon-placeholder {
            width: 70px; /* Placeholder size */
            height: 70px; /* Placeholder size */
            background-color: #627ca2; /* Placeholder color */
            border-radius: 50%;
            margin-bottom: 10px;
        }
        .why-choose-us-item h3 {
            margin: 0 0 5px 0;
            font-size: 1.2em;
            color: #5a799b;
        }
         .why-choose-us-item p {
            margin: 0;
            color: #666;
         }

        .tools-we-use {
             text-align: center;
             padding: 60px 0;
			 background:#fff;
        }
 		.tools-we-use h2 {
			 font-weight:600;
			 color:#6a849c;
			 font-size:35px;
        }
		.tools-we-use h2 span {
             color:#ffcc00;
        }
		.tools-we-use p {
			 color: #6a849c;
			font-size:18px;
            margin-bottom:20px;
        }
		
		
		
/* contact page start here */

         /* Adjusted main container to give space at the top */
         .main-content-area {
             padding: 40px 0px; /* Space below header */
             background-color: #fff; /* Ensure background matches body */
         }

        .contact-us-section .container {
            display: flex;
            gap: 60px; /* Larger gap between columns */
            flex-wrap: wrap;
            align-items: flex-start; /* Align items to the top */
        }
        .contact-us-left {
            flex: 1;
            min-width: 300px; /* Ensure minimum width */
        }
        .contact-us-left h2 {
            font-size: 2.5em;
            margin-top: 0;
            margin-bottom: 10px;
            color: #ffcc00; /* Yellow color */
        }
         .contact-us-left p.subtitle {
             font-size: 1.2em;
             line-height: 1.4;
             color: #666;
             margin-bottom: 30px;
         }
         .contact-info-item {
             display: flex;
             align-items: center;
             margin-bottom: 15px;
             font-size: 1.1em;
             color: #555;
         }
         .contact-info-item .icon-placeholder {
            margin-right: 15px;
             flex-shrink: 0;
         }

        .contact-us-right {
            flex: 1.5; /* Give more space to the form column */
             min-width: 400px; /* Ensure minimum width for form */
             background-color: #dce9f7; /* Light blue background */
             border-radius: 30px; /* Large rounded corners for the main form container */
             padding: 40px; /* Padding inside the light blue area */
             box-sizing: border-box; /* Include padding in total width */
             box-shadow: 0 4px 10px rgba(0,0,0,0.1); /* Optional subtle shadow */
        }
         .contact-form {
             display: grid;
             grid-template-columns: 1fr 1fr; /* Two columns */
             gap: 20px; /* Gap between form fields */
             margin-bottom: 30px; /* Space before the button area */
         }
         .contact-form .full-width {
             grid-column: span 2; /* Make email, phone, message span two columns */
         }
          .contact-form div:nth-child(3) { /* Email field wrapper */
              grid-column: span 2;
          }
           .contact-form div:nth-child(4) { /* Phone field wrapper */
              grid-column: span 2;
          }


         .contact-form input[type="text"],
         .contact-form input[type="email"],
         .contact-form input[type="tel"],
         .contact-form textarea {
             width: 100%;
             padding: 12px 20px; /* Add horizontal padding */
             border: 1px solid #ccc;
             border-radius: 25px; /* Significantly rounded input fields */
             box-sizing: border-box; /* Include padding and border in element's total width */
             font-size: 1em;
             background-color: #fff; /* White background for inputs */
             color: #333;
             outline: none; /* Remove default outline */
         }
          .contact-form input[type="text"]::placeholder,
          .contact-form input[type="email"]::placeholder,
          .contact-form input[type="tel"]::placeholder,
          .contact-form textarea::placeholder {
              color: #888; /* Placeholder text color */
          }

          .contact-form textarea {
              min-height: 75px; /* Adjust height */
              resize: vertical; /* Allow vertical resizing */
              border-radius: 15px; /* Slightly less rounded for textarea based on visual */
              padding: 15px 20px; /* Adjust padding for textarea */
          }


         .contact-us-button-area button {
             padding: 15px 40px;
             background-color:#6a849c; /* Blue color */
             color: #fff;
             border: none;
             border-radius:30px; /* Slightly rounded button */
             font-size: 1.1em;
             cursor: pointer;
			 width:100%;
			 border:none;
			 font-weight:600;
         }
		 .contact-us-button-area button:hover {
             background-color:#ffcc00; /* Blue color */
             color:#000;
			 }
		 
		span{color:#5b7da5;}
		.button2{background:#5b7da5;}
		.button2 a{color:#fff;}
		.button2 a:hover{color:#f1c752;}
		.border2{border-top:2px solid #f2cb5d;}
		
		
/* Section 1: Problem Cards */
        .problem-cards-section {
             padding: 40px 0;
        }
        .problem-cards-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* Responsive grid */
            gap: 20px; /* Gap between cards */
            margin-top: 30px;
            justify-content: center; /* Center the grid items */
        }

        .problem-card {
            background-color: #fff; /* White background */
            border: 1px solid #28a745; /* Green border */
            border-radius: 10px; /* Rounded corners */
            padding: 20px;
            text-align: center;
            display: flex;
            flex-direction: column;
            align-items: center;
            box-shadow: 0 2px 5px rgba(0,0,0,0.05); /* Subtle shadow */
        }
         .problem-card .icon-circle-placeholder {
            width: 80px; /* Size of the circular icon area */
            height: 80px; /* Size of the circular icon area */
            /* The original has a gradient outline, simulating with a grey border and background */
            background-color: #f8f9fa; /* Light grey background */
            border: 2px solid #ccc; /* Grey border */
            border-radius: 50%; /* Circular */
            margin-bottom: 15px;
             display: flex;
             align-items: center;
             justify-content: center;
             font-size: 0.8em;
             color: #555;
             overflow: hidden; /* Hide inner image/content outside circle */
         }
         /* Placeholder for the actual icon inside the circle */
          .problem-card .icon-placeholder {
              width: 50px; height: 50px; background-color: #0d6efd; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 0.7em; /* Example inner icon */
              /* Added styles for icon placehoders to match colors seen in the original image */
              background: linear-gradient(to right, #ffc107, #dc3545); /* Example gradient for first icon */
              background-color: #0d6efd; /* Default blue */
          }
           .problem-card:nth-child(1) .icon-placeholder { background: linear-gradient(to bottom right, #ffc107, #dc3545); } /* Example: Yellow/Red gradient */
           .problem-card:nth-child(2) .icon-placeholder { background-color: #0d6efd; } /* Example: Blue */
           .problem-card:nth-child(3) .icon-placeholder { background-color: #6f42c1; } /* Example: Purple */
           .problem-card:nth-child(4) .icon-placeholder { background: linear-gradient(to bottom right, #dc3545, #ffc107); } /* Example: Red/Yellow gradient */
           .problem-card:nth-child(5) .icon-placeholder { background-color: #0d6efd; } /* Example: Blue */
           .problem-card:nth-child(6) .icon-placeholder { background-color: #333; } /* Example: Dark Grey */


        .problem-card h3 {
            font-size: 1.1em;
            margin-top: 0;
            margin-bottom: 20px;
            color: #333;
            min-height: 2.4em; /* Reserve space for two lines */
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .problem-card button, .problem-card a {
            background-color: #dc3545; /* Red button */
            color: #fff;
            padding: 10px 20px;
            border: none;
            border-radius: 5px;
            font-size: 1em;
            cursor: pointer;
            font-weight: bold;
        }
        .problem-card a:hover{color:#fff;}

        /* Section 2: Contact Us - Email Services */
        .contact-email-section {
            background-color: #e9f5ff; /* Light blue background */
            padding: 40px 0; /* Adjust padding */
            text-align: center;
        }
         .contact-email-section h2 {
             font-size: 2em;
             color: #dc3545; /* Red color */
             margin-bottom: 10px;
         }
         .contact-email-section p {
             font-size: 1.1em;
             color: #555;
             line-height: 1.6;
         }


        /* Section 3: Having Trouble With Your Email */
        .having-trouble-section {
             background-color: #fff; /* White background */
             padding: 60px 0; /* Adjust padding */
             text-align: center;
        }
         .having-trouble-section .container h2 {
             color: #333; /* Dark text */
         }
         .having-trouble-section .container h2 span {
             color: #dc3545; /* Red color for "Your Email?" */
         }

        .solution-cards-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* Responsive grid */
            gap: 30px; /* Gap between cards */
            margin-top: 40px;
            justify-content: center; /* Center grid items */
        }

        .solution-card {
            background-color: #fff; /* White background */
            border: 1px solid #ccc; /* Grey border */
            border-radius: 10px; /* Rounded corners */
            padding: 25px;
            text-align: left; /* Text aligned left */
            box-shadow: 0 2px 5px rgba(0,0,0,0.05); /* Subtle shadow */
             display: flex;
             flex-direction: column; /* Stack content */
        }
         .solution-card .icon-circle-placeholder {
             width: 60px; /* Size of circular icon area */
             height: 60px; /* Size of circular icon area */
             /* Using specific background colors based on visual */
            
             margin-bottom: 15px;
             display: flex;
             align-items: center;
             justify-content: center;
             font-size: 0.8em;
             color: #fff; /* Default icon color */
             overflow: hidden;
             flex-shrink: 0; /* Prevent shrinking */
         }
         


        .solution-card h3 {
            font-size: 1.2em;
            margin-top: 0;
            margin-bottom: 15px;
            color: #dc3545; /* Red title */
        }

        .solution-card ul {
            padding-left: 20px; /* Indent list */
            margin: 0 0 15px 0; /* Margin below list */
            color: #555;
            font-size: 0.95em;
        }
         .solution-card ul li {
             margin-bottom: 8px; /* Space between list items */
             line-height: 1.5;
         }

         .solution-card .chat-link {
             font-weight: bold;
             color: #3b5998; /* Blue link color */
             text-decoration: none;
             font-size: 1em;
             display: inline-block; /* Make link block/inline-block for margin */
             margin-top: auto; /* Push link to bottom if card grows */
         }

         .choose-problem-button-area {
             margin-top: 40px;
             text-align: center;
         }
         .choose-problem-button-area button, .choose-problem-button-area a {
             background-color: #dc3545; /* Red button */
            color: #fff;
            padding: 12px 30px;
            border: none;
            border-radius: 5px;
            font-size: 1.1em;
            cursor: pointer;
            font-weight: bold;
             display: inline-flex; /* Use flex to align text and icon */
             align-items: center;
             justify-content: center;
         }
         .choose-problem-button-area a:hover{color:#fff;}
         .choose-problem-button-area button .arrow-icon-placeholder {
             display: inline-block;
             width: 15px; height: 10px; background-color: #fff; /* White placeholder */
             margin-left: 10px;
             vertical-align: middle;
         }	
		
		
/* Section 4: Bottom Benefits */
        .bottom-benefits-section {
             background-color: #333; /* Dark background */
             color: #fff;
             padding: 60px 0;
             overflow: hidden; /* To contain the background effect if needed */
             /* The background image/effect is complex, using a solid color */
        }
         .bottom-benefits-section .container {
             display: flex;
             justify-content: space-around;
             gap: 30px;
             flex-wrap: wrap;
             text-align: center;
         }
         .benefit-item {
             flex-basis: 250px; /* Base width for items */
             flex-grow: 1; /* Allow items to grow */
             display: flex;
             flex-direction: column;
             align-items: center;
             justify-content: center;
         }
          .benefit-item .icon-circle-placeholder {
             width: 80px; height: 80px; background-color: #ffc107; /* Yellow color */
             border-radius: 50%; /* Circular */
             margin-bottom: 15px;
              display: flex;
              align-items: center;
              justify-content: center;
              color: #333; /* Dark text (as seen in image) */
              font-size: 0.8em; padding:15px;
          }
         .benefit-item p {
             font-size: 1.2em;
             font-weight: bold;
             margin: 0;
         }	
         
         
         
/*login css*/
.login_bg{background:#fff; position:relative; z-index:1; padding:70px 0;}
.login{padding:20px 35px; background:#fff; border-radius:15px; box-shadow:0 0px 15px rgb(0 0 0 / 10%);}
.login h2{margin-bottom:2rem; text-align:center; color:#ffcc00;}
.login .btn{width:100%; margin:15px 0 5px; padding-left:0; padding-right:0;}
.sign_up{color:#787878; font-size:13px; text-align:center;}
.sign_up a{color:#0072bc; font-weight:500; text-decoration:underline;}   



@media (max-width:1199px) {
.hero-image-placeholder{width:480px;}    
.services-container, .testimonials-container{gap:15px;}
    
}    

@media (max-width:896px) {
.navbar-light .navbar-toggler{border-radius:0; position:relative; z-index:1;}
.navbar-expand-lg .navbar-nav .nav-link{font-size:14px; color:#fff; font-weight:700; text-transform:uppercase; padding:15px 25px; text-align:left; border-bottom:#363636 solid 1px;}
.navbar-collapse{background:#253444; overflow:auto; position:fixed; top:0px; right:-100%; height:100vh; width:100%; padding:10px 0px; transition:all 0.3s; z-index:9; overflow-x:hidden;}
.navbar-toggler[aria-expanded="true"] .navbar-close-icon{display:block; width:.7em; height:.7em; fill:#ffffff; padding:0px;}
.collapse.show{right:0;}
.nav-fill .dropdown-menu{display:none; visibility:visible; opacity:1; transform:inherit; background:#01070a; box-shadow:none;}
.navbar-light .navbar-nav .nav-link.active, .navbar-light .navbar-nav .show>.nav-link, .navbar-light .navbar-nav .nav-link:focus, .navbar-light .navbar-nav .nav-link:hover{color:#e5a93d;}
.navbar-light .navbar-toggler.nav_close{margin-top:15px; margin-bottom:15px; background:none; padding:0; height:auto; float:right; margin-right:35px;}

nav ul{display:block; margin-top:50px;}
nav a{color:#fff;}
nav ul li{margin:0; border-bottom:#3a4c60 solid 1px; padding:4px 25px;}
nav ul li ul{position:relative; margin-top:0; background:#334252; border:none;}
nav ul li ul li a{color:#fff;}

.logo-placeholder-item img{height:80px;}
.hero-image-placeholder{width:100%;}
.hero-text h1{font-size:37px;}
.hero-text h2{font-size:25px;}
.hero-text p{font-size:16px;}

.footer-content{gap:15px;}
.footer-col:first-child{min-width:100%;}
.footer-col{min-width:47%;}

    
}   

@media (max-width:736px) {
.container{max-width:98% !important;}
.footer-col{min-width:40%;}
.owl-buttons{left:-15px; right:-15px; top:18%;}
    
    
}   

@media (max-width:667px) {
.hero-text h1{font-size:34px;}
.hero-text h2{font-size:22px;}
.hero-text p{font-size:15px;}    
    
}   

@media (max-width:640px) {
.hero-text h1{font-size:30px;}
.hero-text h2{font-size:20px;}    
    
}   


@media (max-width:568px) {
.hero-section{padding-top:40px;}    
.hero-image-placeholder{position:static; transform:translateY(2rem); height:295px; border-radius:30px; }    
    
}   


@media (max-width:480px) {
    
.footer-col{min-width:100%;}
.blog-content-wrapper{display:block;}
.blog-image-placeholder{margin:2rem 0;}
.service-card{width:100%;}

}

@media (max-width:375px) {
    
    
}   

@media (max-width:360px) {
    
    
} 

@media (max-width:320px) {
    
    
}