:root {
    --var-ally-blue: rgb(4, 69, 123); /*#0b1e39*/;
    --var-ally-lightblue: #4396d2;
    --var-ally-extralightblue: #edf2f9;
    --var-ally-deepyellow: #edae03;
    --var-ally-heading-font: "Oswald";
    --var-ally-body-font: "Open Sans";
}
     /* body{
        font-family: var(--var-ally-body-font);
        font-size: 1.2rem;
      }*/
⁠       .highlight {
            color: rgba(var(--bs-warning-rgb));
      }
      .quick-contact {
        display: inline-block;
        background-color: var(--var-ally-lightblue);
        color: #fff;
        clip-path: polygon(0 0, 95% 0, 100% 100%, 0% 100%);

        & a{
          color:inherit;
        }
      }
      main{
        font-size: 1.5rem;
        font-weight: 100;
        padding: 0 2rem;
      }
     /* .hero{
        font-size: 1.5rem;
        font-weight: 100;        
      }*/
      a {
        text-decoration: none !important;
      }
      h1,h2,h3,h4{
        font-family: var(--var-ally-heading-font);
      }
      h2{
        text-transform: uppercase;
        font-size: 3rem;
      }
      h3{
        text-transform: uppercase;
      }
      .top-menu-bar{
        .social a {
        color: var(--var-ally-blue);
        display: inline-block;
        width: 35px;
        text-align: center;
        font-size: 18px;
        background: #ffffff;
        }
      }

      .main-menu-bar{
        position: relative;
        background-color: var(--var-ally-blue);
        color: #fff;
        font-family: var(--var-ally-heading-font);
        font-size: 1.5rem;
        & a{
          color: inherit;
        }
        & a:hover{
            color: var(--var-ally-lightblue);
        }
        & ul{
          margin: 0;
        }
      }
      .small-text{
        font-size: .75rem;
      }
      .credentials{
        border-left: 3px solid #fff;
      }
      .site-logo{
        width:80px;
      }
      .slider {
        clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 35% 100%);
      }
      .text-lightblue{
        color: var(--var-ally-lightblue);
      }
      .text-blue{
        color: var(--var-ally-blue);
      }      
      .blue-shard{
        background-color: var(--var-ally-lightblue);
        clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 50% 100%);
        background: url(images/commally-logo-wordmark.svg) var(--var-ally-lightblue) no-repeat 80% center;
        background-size: 40%;        
        & h2{
          font-size: 3rem;
        }
        & img{
          width:50%;
        }
      }
      .why-choose{
        position: relative;
        margin-bottom: 110px;
      }
      .why-text {
          padding-top: 130px;
      }
      .why-choose-blue-shard{
        padding-left: 30vw;
        position: absolute;
        z-index: -1;
        top: 75px;
        right: 0;
        min-height: 100%;
        height: auto;
        background-color: var(--var-ally-lightblue);
        clip-path: polygon(210px 0%, 100% 0%, 100% 100%, 0% 100%);
        & h2{
          font-size: 3rem;
        }
        & img{
          width:50%;
        }
      }
      .choose-us{
        clip-path: polygon(0 0, 100% 0%, 60% 100%, 0% 100%);
      }
      .btn-learn-more{
        font-family: var(--var-ally-heading-font);
        color: var(--var-ally-deepyellow);
        background-color: var(--var-ally-blue);
        border-color: var(--var-ally-blue);  
        font-size: 1.25rem;
        text-transform: uppercase;
        padding: .75rem 3rem;
      }
      .btn-learn-more:hover{
        color: #fff !important;
      }
      .left-info-block{
        position: relative;
        min-width:100%;
        height:100%;
        & h3{
          font-size: 2.5rem;
          font-weight: 400;
        }
      }
      .left-info-block:after {
        content: "";
        position:absolute;
        left:0;
        z-index:-1;
        bottom:0;
        width:calc(100% - 25px);
        height: calc(100% - 25px);
        background-color: var(--var-ally-deepyellow);
      }
      .right-info-block{
        position: relative;
        min-width:100%;
        height:100%;
        color: #fff;
        & h3{
          font-size: 2.5rem;
          font-weight: 400;
        }
      }
      .right-info-block:after {
        content: "";
        position:absolute;
        right:0;
        z-index:-1;
        bottom:0;
        width:calc(100% - 25px);
        height: calc(100% - 25px);
        background-color: var(--var-ally-lightblue);
      }
      .slider-row{
        font-family: var(--var-ally-heading-font);
        color:#fff;
        background-color: var(--var-ally-lightblue);
      }
      .partner-logos{
        background-color: #f2f0f1;
        & img{
          max-width: 150px;
        }
      }
      footer{
        background-color: var(--var-ally-blue);
        color: #fff;
        padding: 2rem;
        & a{
          color: inherit;
        }
        & a:hover{
          color: var(--var-ally-lightblue);
        }
        & h2{
          font-size: 2rem;
          font-weight: 400;
        }
        & .social a {
          color: var(--var-ally-blue);
          display: inline-block;
          margin: 10px 5px 0 0;
          width: 35px;
          height: 35px;
          padding: 5px 0;
          text-align: center;
          font-size: 18px;
          background: #ffffff;
          border-radius: 4px;
        }
        & .social a:hover{
          background-color: var(--var-ally-lightblue);
          color: #fff;
        }
      }

      /* Hamburger menu*/
      header .toggle {
          display: none;
        }
        
        header .toggle {
          position: absolute;
          width: 2rem;
          height: 1.4rem;
          top: 1.75rem;
          right: 1rem;
          z-index: 2;
          cursor: pointer;
          transition: all 0.3s ease-in-out;
        }
        
        header .toggle-btn {
          position: absolute;
          top: 0.5rem;
          right: 0;
          width: 1.6rem;
          height: 2px;
          background: var(--var-ally-lightblue);
          transition: all 0.3s ease-in-out;
        }
        
        header .toggle-btn::before {
          content: "";
          position: absolute;
          top: -0.5rem;
          width: 2rem;
          height: 2px;
          background: var(--var-ally-lightblue);
          transition: all 0.3s ease-in-out;
        }
        
        header .toggle-btn::after {
          content: "";
          position: absolute;
          top: 0.5rem;
          width: 1.2rem;
          height: 2px;
          background: var(--var-ally-lightblue);
          transition: all 0.3s ease-in-out;
        }
        
        header .toggle-btn.open {
          transform: rotate(720deg);
          background: transparent;
        }
        
        header .toggle-btn.open::before {
          transform: rotate(45deg) translate(5px, 8px);
        }
        
        header .toggle-btn.open::after {
          width: 2rem;
          transform: rotate(-45deg) translate(3px, -6px);
        }         
      
      /* X-Small devices (portrait phones, less than 576px) */
      @media (max-width: 575.98px) { 
      }

      /* Small devices (landscape phones, less than 768px) */
      @media (max-width: 767.98px) { 
        .main-menu-bar{
          & ul li{
            display:block;
            margin-right: 0 !important;
            text-align: center;
            border-bottom: 1px solid var(--var-ally-lightblue);
          }
        }
        .slider{
          clip-path: none;
        }
        .why-choose-img {
          padding: 0;
          margin: 0rem auto;
        }
        .credentials {
            border-left: none;
            font-size: 1rem;
        }
        .quick-contact {
          clip-path: none;
          display: block;
        }
        header .toggle {
          display: block;
        }
        .mobile-dropdown {
          display: none;
        }
        .mobile-dropdown.open{
          display: block;
        }         
      }      

      /* Medium devices (tablets, less than 992px) */
      @media (max-width: 991.98px) { 
         
      }
      
      /* Large devices (desktops, less than 1200px) */
      @media (max-width: 1199.98px) {
        .why-choose-blue-shard{
          clip-path:none;
          display: none;
        }
        .why-text{
          background-color: var(--var-ally-lightblue);
          padding: 3rem;
        }
        .choose-us{
          clip-path: none;
        }
        .why-choose{
          margin-bottom: 50px;
        }
        .why-choose-img {
          padding: 0;
          margin: 2rem auto;
        }        
      }