/* 
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme-child/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 2.0.0
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/* Add your custom styles here */
/* 
       * CSS VARIABLES & GLOBAL STYLES 
       * Implemented using Vanilla CSS without frameworks.
       */


      :root {
        /* Colors */
        --color-bg: #ffffff;
        --color-text-primary: #292d3b; /* Updated Paragraph/Text Color */
        --color-text-secondary: #292d3b; /* Updated to match Paragraph Color as requested */
        --color-heading: #1d324b; /* Updated Heading Color */
        --color-accent: #cf2e47; /* Pinkish Red for links/highlights */
        --color-accent-hover: #336;
        --color-tag-bg: #e0e2e5;
        --color-tag-text: #505050;
        
        /* CTA Box Colors */
        --color-cta-bg: #eaf6ff;
        --color-cta-border-bottom: #0a2540; /* Dark blue/black accent */
        --color-btn-bg: #E13D4B;
        --color-btn-text: #ffffff;
        --color-btn-hover: #1D324B;

        /* Borders */
        --color-border-light: #dddddd;
        --color-border-strong: #0a2540;

        /* Typography */
        --font-serif: "Roboto", Sans-serif /* Updated Font Family */
/*         --font-encode: "Encode Sans", sans-serif;
        --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; */
      }

    body *{font-family: var(--font-serif)}

      /* Layout Utility */
      .blog-container {
        max-width: 930px;
        margin: 0 auto;
      }

      /* Text Utilities */
      .blog-container h1, .blog-container h2, .company-heading, .blog-container h4 {
        color: var(--color-heading);
        font-family: var(--font-serif);
        margin-top: 1.5em;
        margin-bottom: 0.8em;
      }

      .blog-container h2 { 
        font-size: 30px; /* Updated Heading Size */
        line-height: 28px; /* Updated Heading Line Height */
        font-weight: 500;
      }

      .blog-container h3 { 
        font-size: 24px; /* Updated Subheading Size */
        line-height: 26px; /* Updated Subheading Line Height */
        font-weight: 400;
      }
      .blog-container h4 { 
        font-size: 20px; /* Updated Subheading Size */
        line-height: 25px; /* Updated Subheading Line Height */
        font-weight: 300;
      }
	  .company-title{ 
		  color: #ae232f !important;
      }
      
      .blog-container p { 
        margin-bottom: 1.2rem; 
        font-size: 16px; /* Updated Paragraph Size */
        line-height: 25px; /* Updated Paragraph Line Height */
        color: var(--color-text-primary);
      }

		.fact-row{display: flex;align-items: center;}
		.fact-label {width: 50px;margin-right: 10px;}
		.fact-row strong{font-size: 18px;}
		.fact-row p{margin: 0px !important;font-size: 16px;}
		.com-icons{width:100%;float:left}
      .blog-container a {
        color: var(--color-accent);
        text-decoration: none;
        transition: color 0.2s;
      }
      .blog-container a:hover {
        text-decoration: underline;
        color: var(--color-accent-hover);
        text-decoration: none;
      }
      
      .blog-container strong {
        font-weight: 700;
        color: #000;
      }

      /* Specific Elements */
      .blog-container .tag {
        display: inline-block;
        background-color: var(--color-tag-bg);
        color: var(--color-tag-text);
        padding: 4px 12px;
        border-radius: 12px;
        font-family: var(--font-sans);
        font-size: 0.75rem;
        font-weight: 500;
        margin-bottom: 20px;
      }

      /* Lists */
      .blog-container ul {
        margin-bottom: 1.5rem;
        padding-left: 20px;
      }
      .blog-container li {
        margin-bottom: 0.5rem;
        font-size: 16px; /* Match paragraph size */
        line-height: 32px;
      }
      .blog-container li a {
        font-weight: normal;
      }

      /* CTA Box Component */
      .blog-container .cta-box {
        background-color: var(--color-cta-bg);
        padding: 30px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-bottom: 3px solid var(--color-cta-border-bottom);
        margin: 40px 0;
        gap: 30px;
      }
      .blog-container .cta-content h3 {
        margin-top: 0;
        margin-bottom: 10px;
        font-size: 1.5rem; 
      }
      .blog-container .cta-content p {
        margin-bottom: 0;
        font-size: 16px; 
        color: var(--color-text-secondary);
        line-height: 25px;
      }
      .blog-container .cta-btn {
        background-color: var(--color-btn-bg);
        color: var(--color-btn-text);
        padding: 15px 28px;
        border-radius: 30px;
        font-family: var(--font-serif);
        font-weight: 700;
        font-size: 18px;
        line-height: 20px;
        border: none;
        cursor: pointer;
        white-space: nowrap;
        text-decoration: none;
        transition: background-color 0.2s;
        display: inline-block;
      }
      .blog-container .cta-btn:hover {
        background-color: var(--color-btn-hover);
        text-decoration: none;
        color: var(--color-btn-text);
      }


.company-heading .top-rank{max-width: 5%;
    vertical-align: middle;}
      /* Fact Sheet Component */
      .blog-container .fact-sheet {
        border-left: 4px solid var(--color-border-strong);
        padding-left: 20px;
        margin: 20px 0 30px 0;
      }

		.fact-left{width:60%;float:left;}
		.fact-right{width:30%;float:left;}

      .blog-container .fact-row {
        margin-bottom: 15px;
        font-size: 16px; /* Match paragraph size */
        line-height: 22px;
        font-family: var(--font-serif);
        color: var(--color-text-primary);
      }
      .blog-container .fact-label {
        font-weight: 700;
        color: #000;
      }

      /* FAQ Component */
      .blog-container .faq-section {
        margin-top: 60px;
      }
      .blog-container .faq-container {
        border: 1px solid var(--color-border-light);
        border-bottom: none; /* Last item provides bottom border */
        margin-top: 20px;
      }
      .blog-container .faq-item {
        border-bottom: 1px solid var(--color-border-light);
      }
      .blog-container .faq-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 20px;
        cursor: pointer;
        background: transparent;
        transition: background-color 0.2s;
        user-select: none;
      }
      .blog-container .faq-item.open .faq-header{
            border-bottom: 1px solid var(--color-border-light);
      }
      .blog-container .faq-header:hover {
        background-color: #f9f9f9;
      }
      .blog-container .faq-question {
        font-family: var(--font-serif);
        font-weight: 700;
        color: #292d3b; /* Updated FAQ Title Color */
        font-size: 18px; /* Updated FAQ Title Size */
        line-height: 34px; /* Updated FAQ Title Line Height */
        margin: 0;
        width: 100%;
      }
      .blog-container .faq-icon {
        font-size: 1.5rem;
        color: var(--color-heading);
        font-weight: 700;
        line-height: 1;
        width: 24px;
        text-align: center;
      }
      
      /* Smooth Animation Logic */
      .blog-container .faq-body {
        /* Grid trick for smooth height animation from 0 to auto */
        display: grid;
        grid-template-rows: 0fr;
        transition: grid-template-rows 0.3s ease-out;
        
        /* Padding must be on inner element to avoid jumpiness */
        padding: 0 20px;
        
        font-size: 20px; /* Updated FAQ Text Size */
        color: #292d3b; /* Updated FAQ Text Color */
      }
      
      .blog-container .faq-inner {
        overflow: hidden;
      }
      
      /* Only apply bottom padding when content is visible to prevent space when closed */
      .blog-container .faq-inner-content {
        padding-bottom: 20px;
        padding-top: 20px;
      }
      
      .blog-container .faq-inner-content p {
        margin-bottom: 0; /* FAQ answers usually single block, handle spacing in container */
        font-size: 16px;
        line-height: 32px; /* Updated FAQ Text Line Height */
      }

      /* Open state */
      .blog-container .faq-item.open .faq-body {
        grid-template-rows: 1fr;
      }
.company-heading .company-btn{font-size: 14px; color: #000; text-decoration: underline;}  	
@media (min-width: 768px){
/* 	.company-heading .elementor-menu-anchor {display:none;} */
  
.company-heading {display: flex; align-items: center; justify-content: space-between;}
}
.company-heading .company-title{margin: 0px;}
      /* Responsive Adjustments */
      @media (max-width: 768px) {
		  
		  .company-heading .company-btn{margin-left: 30px;}
        .blog-container .cta-box {
          flex-direction: column;
          align-items: flex-start;
          text-align: left;
          padding: 25px;
        }
        .blog-container .cta-btn {
          width: 100%;
          text-align: center;
        }
        .blog-container  {
          padding: 0px;
        }
        .blog-container .faq-question {
            font-size: 20px;
            line-height: 25px;
        }
        .blog-container .faq-inner-content p {
            font-size: 16px;
            line-height: 28px;
        }
        
        .blog-container h2, .blog-container h3 { font-size: 26px; } /* Slightly smaller on mobile */
        .blog-container p, .blog-container li, .blog-container .fact-row { font-size: 18px; line-height: 28px; }
      }
      

         .imageGap{
            margin: 20px 0px 20px 0px;
        }
        .oneImage img{
            width: 100%;
            height: auto;
            display: block;
        }
        .twoImage, .threeImage{
            display: flex;
            gap: 9px;
        }
        .twoImage img{
            width: calc(50% - 4.5px);
            height: auto;
        }
        .threeImage img{
            width: calc(33.33% - 6px);
            height: auto;
        }
		.fact-row > div {
			width: 80%;
		}
        @media screen and (max-width: 768px) {
            .twoImage, .threeImage {
                flex-direction: column;
            }
            .twoImage img, .threeImage img {
                width: 100%;
            }
			.fact-left, .fact-right{width:100%}
			.blog-container .fact-sheet{margin:0px !important;}
			.com-icons{margin-bottom:20px;}
        }