@media (min-width: 2000px) {
  .mainbanner .animateicon {
    left: 550px !important;
  }
  .slant-box .iconlogo img {
     width: 250px !important; 
   }
}

@media (min-width: 1500px) {
  .widecontact{
    padding: 60px 80px;
  }
  .contactcontainer2{
    width: 70%;
  }
}

@media (min-width: 1401px) {
  .slicknav_menu {
     display:none;
  } 
  header ul#menu{
  display: flex;
  } 
   #menu li:hover > ul {
      display: block;
      left: 0;
      right: 0;
   }     
}
/* Tablet and Mobile */
@media (max-width: 1400px) {
  #menu{
      display: none;
    }
    .slicknav_menu {
      display: block;
      z-index: 9000;
      top: 20px;
      right: -10px;
      font-size: 22px;
      position: fixed;
      background: none;
    }
    .slicknav_menu .slicknav_icon-bar {
      background: #0066C1; !important;
      padding: 2px 6px;
    }
    .slicknav_menu .slicknav_icon {
      margin: 0;
    }
    .slicknav_menu .slicknav_menutxt {
      display: none;
    }
    .slicknav_btn {
      background: #FFC938;
      z-index: 5000;
      border-radius: 10px 0 0 10px;
      padding: 13px 15px;
    }
   .slicknav_menu > ul{
      height: auto !important;
      text-align: right;
      border-radius: 0;
      padding: 15px;
      position: relative;
      top: -6px;
      right: 0;
      z-index: 5000;
      background: #0066C1;
      border-radius: 10px;
      width: 220px;
    }
    .slicknav_menu > ul li a{
      color: #fff;
      padding: 5px 0;
    }
    .slicknav_menu > ul li a:hover{
      background: transparent !important;
    }
}
@media (min-width: 769px) {
    .slant-box .iconlogo{
      bottom: 80px;
      left: 50%;
      transform: translateX(-50%); /* centers it horizontally */
    }
    header .container-fluid{
      height: 80px;
    }
}
@media (min-width: 1201px) {
    .mainbanner .animateicon{
      top: 280px;
      left: 220px;
    }
}
@media (max-width: 1300px) {
    .widecontact .top .buttons a {
      font-size: 18px;    
    }
}
@media (max-width: 1200px) {
.mainbanner .animateicon img{
  width: 40%;
}
.mainbanner .title {
  width: 60%;
}
.infobox .title,
.infobox .title h3{
  font-size: 28px;
}
.infobox ul {
  width: 80%;    
}
.widecontact .top .details {
  flex: 0 0 60%;
}
.widecontact .top .buttons {
  flex: 0 0 40%;
}
footer .lastcol h4,
footer .lastcol p{
  font-size: 30px;    
}
}
@media (max-width: 992px) {
.infobox .title,
.infobox .title h3{
  font-size: 23px;
} 
.btn-apply,
.btn-standard{
  font-size: 18px !important;
}
.widecontact .top {
  display: block;
}
.widecontact .top .buttons{
  padding-top: 30px;
}
.bottom.twocol {
  display: block;
}
.widecontact .bottom .hours {
  left: 0;    
  padding-bottom: 20px;
}
.widecontact .bottom .hours h5,
.widecontact .bottom .hours ul li{
  padding-left: 0;    
}
}
@media (min-width: 769px) {
 .mainbanner .animateicon{
  top: 180px;
  left: 250px;
}
.sidepic .ctricon{
  left: 50%;
  transform: translateX(-60%);
}
.sidepic .ctricon img{
  width: 320px;
  height: auto;
}
    .slant-box.right::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 40%; /* adjust how wide the slant side is */
  height: 100%;
  background: #fff4d4; /* light yellow */
  clip-path: polygon(80% 0, 100% 0, 100% 100%, 0 100%);
  z-index: 0;
}
.slant-box.left::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 40%; /* adjust width as needed */
  height: 100%;
  background: #fff4d4; /* light yellow */
  clip-path: polygon(0 0, 20% 0, 100% 100%, 0 100%);
  z-index: 0;
}
}
@media (max-width: 768px) {
    header .mobile-only{
      display: block;
    }
    .btn-container{
      display: none;
    }
    header .container-fluid{
    flex-wrap: wrap;
    }
    header .mobile-only{
      display: flex;
      gap: 10px;
      flex: 0 0 100%;
      padding: 10px 0;
    }
    header .mobile-only a{
     background: #FFC938;
     padding: 9px;
     border-radius: 7px;
     font-size: 20px;
     font-weight: 600;
     color: #0066C1;
    }
    header .mobile-only a img{
      width: auto;
      height: 23px;
      display: inline-block;
      padding-right: 6px;
    }
    .slicknav_menu {
      top: 50px;
    }
    .scroll-section{
      display: none;
    }
    .mainbanner {
      min-height: 580px;
    }
    .mainbanner .title {
     width: 100%;  
   }
    .mainbanner .title p {
      width: 80%;
    }
   .mainbanner .animateicon {
     top: 350px;
   }
    .mainbanner .animateicon img{
      width: 35%;
   }
    .mainbanner .title h1 {
       font-size: 60px;
    }
    .subbanner h2 {
      font-size: 35px;
    }
    .subpagetitle{
      align-items: flex-end;
    }
    .subpagetitle img{
      height: 130px;
    }
    .slant-box .content h3 {
      font-size: 35px;
    }
    .bgbottombox .title h4{
      font-size: 60px;
    }
    .sidepic{
     display: block;
    }
    .sidepic .text .wrapper {
      width: 85%;
      padding: 25px 0;
    }
    .sidepic .ctricon{
      right: 30px;
      top: 20%;
    }
    .sidepic .ctricon img{
      width: 120px;
      height: auto;
    }
    .faqcontainer{
      width: 90%;
    }
    .container-fluid.narrow{
      width: 90%;
    }
    .slant-box .content {
      padding: 30px 0;
    }
    .widecontact .top .details {
      display: block;
      padding-right: 0;
    }
    .widecontact .top .pic img {
      margin: 0 auto;
      display: block;
      max-width: 300px;
    }
    .widecontact .top .details .misc{
      padding-top: 20px;
      text-align: center;
    }
    footer .navlist img{
      width: 50%;
    }
    footer .col-5{
      padding: 0 20px;
    }
    footer .col-4{
      padding: 20px;
      text-align: center;
    }
    footer .bottom{
      border-top: none !important;
      margin-top: 0;
    }
    footer .bottom ul li{
      display: block;
      padding: 5px 0;
    }
  .twocol{
    flex-direction: column;
  }
  .slant-box .iconlogo{
     top: 300px;
     right: 20px;
   }
    .slant-box .content {
    flex-direction: column;
    }
  .slant-box .content .text,
  .slant-box .content .pic{
     flex: 0 0 100% !important;
  }
    .slant-box .content .pic{
      order: 1 !important;
    }
    .slant-box .content .pic img{
      height: 350px;
      width: 100%;
      object-fit: cover;
    }
    .slant-box .content .text{
      order: 2 !important;
    }
    .slant-box.right .content .text {
      padding-right: 0;
      width: 100%;
    }
    .slant-box.left .content .text {
      width: 100%;
      padding-left: 0;
    }
    .contactcontainer2{
      width: 85%;
    }
  footer .three-columns {
    flex-direction: column;
  }
  footer .column {
    flex: 0 0 100% !important;
    width: auto;
    border-left: none !important;
  }
}
@media (max-width: 576px) {
    p{
      font-size: 15px;
    }
   .slicknav_menu {
      top: 42px;
    }
    .sidepic .text h2 {
    font-size: 42px;
    }
    .sidepic .ctricon{
      right: 30px;
      top: 22%;
    }
    .sidepic .ctricon img{
      width: 100px;
      height: auto;
    }
    .bgbottombox .title {
      padding: 0 30px;
    }
    .contactboxes .details {
      display: block;
    }
    .contactboxes .details .pic img {
      width: 150px;
      height: auto;
      margin: 0 auto;
    }
    .contactboxes .box h4{
      text-align: center;
    }
    .contactboxes .box h4 a {
      font-size: 34px;
      padding: 20px 20px;
    }
    .contactboxes .box h4 a span {
      font-size: 22px;
    }
    .contactboxes .details .misc {
      text-align: center;
      padding-top: 20px;
    }
    .sectitle h3 {
      font-size: 35px;
    }
    .subbanner {
      padding: 30px;
    }
    .widecontact{
      padding: 30px;
    }
    .widecontact .bottom .hours h5,
    .widecontact .bottom .store h5 {
      font-size: 25px;
    }
    .widecontact .top .buttons{
      padding: 20px 0;
    }
    .widecontact .top .pic img {
      max-width: 100%;
    }
    .widecontact .bottom .hours ul li span {
      width: 40%;
    }
    .widecontact .bottom .hours ul li,
    .widecontact .bottom .dollarlist ul li{
      font-size: 15px;
    }
    .widecontact .bottom .dollarlist ul li{
      background-size: 20px auto;
    }
        @keyframes slideRight {
      from {
        transform: translateX(0);
      }
      to {
        transform: translateX(250px); 
      }
    }
}