@import "../../variables.scss";

.ChooseUsCard {
  padding-top:  $pad + 40;
  @media (max-width: $lg){
    padding-top:  $pad + 20;
  }
  .ChooseUsTopInfo {
    margin: 0 auto;
    max-width: 940px;
    margin-bottom: $mrg + 80;
    padding-left: $pad + 5;
    padding-right: $pad + 5;
    @media (max-width: $xxl){
      max-width: 800px;
    }
    @media (max-width: $xl){
      max-width: 600px;
      margin-bottom: $mrg + 40;
    }
    @media (max-width: $md){
      margin-bottom: $mrg + 20;
    }
    .ChooseUstext {
      h2 {
        font-size: $font + 45;
        @media (max-width: $xxl){
          font-size: $font + 36;
        }
        @media (max-width: $xl){
          font-size: $font + 24;
          margin-bottom: 0;
        }
        @media (max-width: $md){
          font-size: $font + 16;
        }
      }
      p{
        font-size: $font + 10; 
         line-height: 1.8;
         @media (max-width: $xxl){
            font-size: $font + 6;
         }
         @media (max-width: $xl){
            font-size: $font + 5;
         }
      }
    }
    .ChooseUsCount {
      font-size: $font + 230;
      line-height: 0.7;
      color: $white;
      text-shadow: -2px -2px 0 $text-blue, 2px -2px 0 $text-blue, -2px 2px 0 $text-blue, 2px 2px 0 $text-blue;
      margin-right: $mrg + 22;
      margin-left: -$mrg;
      @media (max-width: $xxl){
        font-size: $font + 180;
      }
      @media (max-width: $xl){
        font-size: $font + 140;
      }
      @media (max-width: $md){
        font-size: $font + 60;
        margin-right: $mrg;
        margin-top: $mrg;
        margin-left: 0;
      }
    } 
  }

  .bigContainer {
    width: 100%;
    max-width:1705px;
    position: relative;
    margin: 0 auto;
    padding-left: $pad + 5;
    padding-right: $pad + 5;

    .ChooseUsInfoMain {
      .ChooseUsInfoMainImg {
        width: 33%;
        flex: 0 0 33%;
        margin-left: -90px;
        margin-right: $mrg + 4;
        @media (max-width: $lg){
          display: none;
        }
      }
      .ChooseUsInfoMainInfo {
        @media (max-width: $xxl){
          padding-right: $pad + 20;
        }
        @media (max-width: $md){
          padding-right: 0;
        }
        .rowClass {
          margin-left: -25px;
          margin-right: -25px;
          @media (max-width: $md){
            margin-left: 0;
            margin-right: 0;
          }
        }
        [class*="col-"] {
          padding-left: $pad + 15;
          padding-right: $pad + 15;
          @media (max-width: $md){
            padding-left: 0;
            padding-right: 0;
          }
        }
      }      
    }
  }
}