.title{
  margin:0;
  padding:0;
  color:var(--cobalt);
  position:relative;
  z-index:3;
}
.sub{
  position:relative;
  z-index:3;
  font-size:0.8em;
}
.title-wrap{
  
}


@media only screen  and (max-width : 999px) {

  .hero{

     z-index:4;
  }

  .home-row-1{
    display:flex;
    align-items: center;
  }
  .home-row-2{
    display:flex;
    align-items: center;
  }

  .home-row-1 .banner{
    z-index:5;
    border-radius: 0 2px 0 0;
    
    min-width:5vw;
    max-width: 5vw;
    margin-right:4vw;
    height: 100%;
    background: var(--bright);
  }

  .home-row-2 .banner{
    border-radius: 0 0 2px  0;
    min-width:5vw;
    max-width: 5vw;
    margin-right:4vw;
    height: 100%;
    background: var(--secondary);
  }

  .motto{
    font-family: 'Thasadith';
    padding:24px 0 24px 0;
    font-size:1.5em;
    font-weight:100;
    color: var(--secondary);
  }

  .sub{
    padding:24px 0 24px 0;
    font-size:.96em;
    
    font-family: 'Thasadith';
  }


  .sub a{
    font-weight:400;
    color:var(--secondary);
    font-size:1.3em;
    border-radius:2px;
    font-family:'Nunito';
    transition:all ease 0.3s;
    margin-top:12px;
    font-weight:100;
    border-bottom:5px solid var(--accent);
    
  }

  .cutout-bg{
    height:60vh;
    z-index:4;
    flex:1;
    display:flex;
    justify-content: flex-end;
    align-items:flex-end;
    margin-bottom:-20vh;
    border-bottom:18px solid var(--primary);
  }


  .cutout{
    overflow: hidden;
    height:100%;
    justify-content: flex-end;
    align-items: flex-end;
    flex-direction: column;
  }

  .cutout img{
    height:100%;
    width:auto;
    align-self:flex-end;
   
  }

  .oval{
    z-index:1;
    
    position:absolute;
    width:120vw;
    height:190vw;
    right:-80vw;
    top:25vh;
    border-radius: 100%;
    background: var(--accent);
    }

    #serviceApp{
      margin-top:80px;
      width:100%;
      min-height:300px;
      z-index:12;
      position:relative;
      display:flex;
      flex-direction: column;
    }

    .sub-title{
      font-family: 'Thasadith';
      padding-left:24px;
      margin-top:24px;
      color:var(--bright);
      font-weight:100;
      font-size:2.1em;
    }


    .service-wrapper{
      border-radius:2px;
      padding:5px;
      margin-top:24px;
    }

    .service-card:nth-child(odd){
      padding:12px;
      display:flex;
      max-width:100%;
      border-radius:2px;
      transition: all 0.3s;
      align-items:center;
      position:relative;
      height:305px;
      margin-bottom:30px;
      
    }


    .service-card:nth-child(odd) .thumb{
      
      display:flex;
      flex-direction: column;
      height:100%;
      align-items:center;
      justify-content: center;
      flex:3;
      border-radius:3px;
      overflow:hidden;
      margin-right:6px;
    }

    .service-card:nth-child(odd) .thumb img{
      height:120%;
      width:auto;
      opacity:1;
    }

    .service-card:nth-child(odd) .meta{
      flex:9;
      margin-left:18px;
      padding-right:12px;
    }

    .service-card:nth-child(odd) .meta .service-title{
      font-family: 'Thasadith';
      font-weight:700;
      font-size:1.21em;
      
    }
    .service-card:nth-child(odd) .meta .service-description{
      font-size:0.9em;
      font-weight:300;
      margin-top:12px;
      line-height:1.3em;
    }

    .service-card:nth-child(even){
      padding:12px;
      display:flex;
      max-width:100%;
      border-radius:2px;
      transition: all 0.3s;
      align-items:center;
      position:relative;
      height:305px;
      margin-bottom:30px;
      flex-direction: row-reverse;
      
    }

    .service-card:nth-child(even) .thumb{
      
      display:flex;
      flex-direction: column;
      height:100%;
      align-items:center;
      justify-content: center;
      flex:3;
      border-radius:3px;
      overflow:hidden;
      margin-right:12px;
    }

    .service-card:nth-child(even) .thumb img{
      height:120%;
      width:auto;
      opacity:1;
    }

    .service-card:nth-child(even) .meta{
      flex:9;
      margin-right:18px;
      padding-left:12px;
      align-items: flex-end;
    }

    .service-card:nth-child(even) .meta .service-title{
      font-family: 'Thasadith';
      font-weight:700;
      font-size:1.21em;
      text-align: right;
      
    }
    .service-card:nth-child(even) .meta .service-description{
      font-size:0.9em;
      font-weight:300;
      margin-top:12px;
      line-height:1.3em;
      text-align: right;
    }
    


    .book-btn{
      padding:9px 12px;
      background:var(--secondary);
      text-decoration: none;
      color:white;
      font-size:0.9em;
      box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
      transition: all 0.3s cubic-bezier(.25,.8,.25,1);
    }

    .book-btn:hover{
        box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
    }

    .see-more{
      color:black;
      font-size:0.9em;
      font-weight:600;
      padding: 12px 0px 6px 0px;
      text-decoration: none;
      transition:all 0.3s;
    }
    .see-more:hover{
      color:var(--bright);
    }

}
@media only screen  and (min-width : 1000px) {

  .hero{
    height:60vh;
    max-width:50%; 
     z-index:4;
     margin-bottom:10vh;
     margin-top:40px;
  }

  .home-row-1{
    display:flex;
    height:50%;
    align-items: center;
    border-radius: 2px;
    width:90%;
  }
  .home-row-2{
    display:flex;
    height:50%;
    align-items: center;
    background: var(--primary);
    border-radius: 2px;
    
  }
/* 
  .home-row-1 .banner{
    z-index:5;
    border-radius: 2px 2px 0 0;
    min-width:3vw;
    max-width: 3vw;
    margin-right:5vw;
    height: 100%;
    background: var(--bright);
  }

  .home-row-2 .banner{
    border-radius: 0 0 2px  2px;
    min-width:3vw;
    max-width: 3vw;
    margin-right:5vw;
    height: 100%;
    background: var(--secondary);
  } */

  .motto{
    font-family: 'Thasadith';
    font-size:6vh;
    font-weight:100;
    padding-right:44px;
    
    width:50vw;
    position:absolute;
    color:var(--secondary);
  }



  .sub{
    font-size:.95em;
    font-family: 'Thasadith'; 
    font-weight:500;
    padding-left:74px;
    padding-right:44px;
    color:black;
    line-height:1.6em;
  }

  .sub a{
    padding:9px 12px;
    background: var(--bright);
    font-weight:400;
    color:white;
    font-size:0.8em;
    border-radius:2px;
    font-family:'Nunito';
    transition:all ease 0.3s;
    margin-top:12px;
    
  }
  .sub a:hover{
    background: var(--secondary);
  }

  .cutout-bg{
    width:40%;
    height:80vh;
    z-index:4;
    flex:1;
    display:flex;
    justify-content: flex-end;
    align-items:flex-end;
  }

  .cutout{
    height: 80vh;
    justify-content: flex-end;
    align-items: flex-end;
    flex-direction: column;
  }

  .cutout img{
    height:100%;
    width:auto;
    align-self:flex-end;
   
  }

  .oval{
    z-index:5;
    opacity:01;
    position:absolute;
    width:120vw;
    height:120vw;
    right:-60vw;
    top:50vh;
    border-radius: 100%;
    background: var(--accent);
    }

    #serviceApp{
      width:100%;
      min-height:300px;
      z-index:12;
      position:relative;
      border-radius: 0px 3px 0 0;
      display:flex;
      flex-direction: column;
    }

    .sub-title{
      font-family: 'Thasadith';
      margin-top:24px;

      font-weight:700;
      font-size:1.5em;
    }


    .service-wrapper{
      border-radius:2px;
      padding:48px;
      margin-top:24px;
      display:flex;
      flex-direction: row;
      flex-wrap:wrap;
    }

    .service-card{
      padding:36px;
      display:flex;
      width:47%;
      box-sizing: border-box;
      border-radius:2px;
      transition: all 0.3s;
      align-items:center;
      position:relative;
      height:300px;
      margin-bottom:80px;
      
    }
    .service-card:hover{
   


    }
    .service-card .thumb{
      
      display:flex;
      flex-direction: column;
      height:110%;
      align-items:center;
      justify-content: center;
      flex:4;
      border-radius:3px;
      overflow:hidden;
      margin-right:36px;
      box-sizing: border-box;
      border-left:38px solid var(--bright);
      background: var(--accent);
      box-shadow: -4px 3px 14px rgba(0, 0, 0, 0.203);
    }

    .service-card .thumb img{
      height:120%;
      width:auto;
      opacity:1;
    }

    .service-card .meta{
      flex:9;
      margin-left:24px;
    }

    .service-card .meta .service-title{
      font-family: 'Thasadith';
      font-weight:800;
      font-size:1.2em;
      
    }
    .service-card .meta .service-description{
      font-size:0.8em;
      font-weight:300;
      margin-top:12px;
      line-height:1.3em;
    }


    .book-btn{
      padding:9px 12px;
      background:var(--bright);
      text-decoration: none;
      color:white;
      font-size:0.8em;
      box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
      transition: all 0.3s cubic-bezier(.25,.8,.25,1);
    }

    .book-btn:hover{
        box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
    }

    .see-more{
      color:black;
      font-size:0.9em;
      font-weight:600;
      padding: 12px 0px 6px 0px;
      text-decoration: none;
      transition:all 0.3s;
    }
    .see-more:hover{
      color:var(--bright);
    }

}