/* styles — AT&G Brand Palette */

:root {
  /* Brand */
  --primary: #662c90;   /* AT&G blue */
  --navy: #222222;      /* deep header/sections */
  --ink: #1f242c;       /* dark UI text/nav */
  --white: #ffffff;
  --orange: #ff8a00;

  /* Neutrals */
  --text: #3c3c3c;
  --muted: #7D8393;
  --bg: #f7f7f7;
  --grey: #f9f9f9;

  /* Effects */
  --shadow: rgba(0, 0, 0, 0.4);
  --overlay: rgb(47 19 67 / 74%);
}

html { scroll-behavior: smooth; }

body {
  overflow-x: hidden;
  font-family: 'Montserrat', sans-serif;
  color: var(--text);
}

p { color: var(--muted); }

body.active { overflow-y: hidden; }

.container { max-width: 1500px; }
.container.wide { max-width: 1700px; }
.container.sml { max-width: 1200px; }
.container-fluid { max-width: 100%; padding: 0; }

.aos-animate { z-index: 999; }
.icon { background: transparent; }

a { color: inherit; }

h1,h2,h3,h4,h5 {
  font-size: inherit !important;
  font-weight: inherit !important;
}

/* Blog */

.block.image {
  background-attachment: fixed;
  border-top: 2px solid var(--white);
  border-bottom: 2px solid var(--white);
  position: relative;
  text-align: center;
  background-size: cover;
  padding: 80px;
}

.block.image .heading,
.block.image .small-heading,
.block.image p { color: var(--white); }

.block.image p { font-size: 19px; }

.block.image::before {
  content: "";
  position: absolute;
  width: 100%; height: 100%;
  top: 0; left: 0;
  background: var(--navy);
  opacity: .75;
}

.small-block {
  position: relative;
  background-size: cover;
  background-position: center;
  height: 100%;
  min-height: 400px;
  transition: all 0.4s ease;
  transform: scale(1);
  z-index: 1;
}

.small-block:hover,
.wide-block:hover,
.large-block:hover {
  box-shadow: var(--shadow) 0 5px 16px;
  transform: scale(1.01);
  z-index: 2;
}

.small-block.white { background: var(--white); }
.small-block.blue { background: var(--navy); }
.small-block.light-blue { background: #4b769b; } /* optional secondary */

.wide-block,
.large-block {
  position: relative;
  background-size: cover;
  background-position: center;
  height: 400px;
  transition: all 0.4s ease;
  transform: scale(1);
  z-index: 1;
}

.large-block { height: 100%; }

.post-hold {
  padding: 40px 0;
  border-bottom: 1px solid var(--navy);
}

.small-block.post { min-height: unset; display: block; height: unset; }

.blog-post-image {
  height: 100%; width: 100%;
  background-size: cover; background-position: center;
}

.block-inner {
  position: relative;
  padding: 65px;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
}

.block-inner.post { padding: 40px; }

/* Header */

/* Header */

.header {
    position: relative;
    z-index: 99999;
}

.header .top-header {
    position: relative;
    background: var(--navy);
    color: white;
    padding: 5px 20px;
}

.header .top-header ul {
    display: inline-flex;
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;
    align-items: center;
    height: 100%;
    font-size: 14px;
}

.header .top-header ul.std li {
    margin: 5px;
}

.header .top-header ul.std li a {
    display: block;
    padding: 5px;
    color: var(--orange);
    font-weight: 600;
}

.header .top-header ul.std li a i {
    padding-right: 5px;
    color: var(--primary);
}

.header .top-header ul.social li {
    margin: 5px;
}

.header .top-header ul.social li a {
    height: 25px;
    width: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: white;
    background: var(--primary);
    border-radius: 50%;
    font-size: 13px;
}

.header.stuck .bottom-header {
    position: fixed;
    top: 0;
    width: 100%;
    background: white;
}

.header.stuck .top-header {
    margin-bottom: 110px;
}

.header .bottom-header {
    position: relative;
    padding: 20px 60px;
    background: white;
}

.header .bottom-header .logo {
    text-align: left;
}

.header .bottom-header .logo img {
    max-height: 70px;
}

.header .bottom-header .menu-hold {
    position: relative;
    height: 100%;
}

.header .bottom-header .menu-hold ul {
    display: flex;
    justify-content: center;
    align-items: center;
    list-style: none;
    padding-left: 0;
    margin-bottom: 0;
    height: 100%;
}

.header .bottom-header .menu-hold ul li {
  position: relative;
    padding: 5px;
    margin: 5px;
}

.header .bottom-header .menu-hold ul li a {
    padding: 5px;
    font-weight: 600;
    text-transform: uppercase;
}

.header .bottom-header .btn {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

.header .bottom-header .menu-hold ul li:hover > ul.dropdown {
    top: 30px;
    opacity: 1;
    visibility: visible;
}

.header .bottom-header .menu-hold ul li ul.dropdown {
    position: absolute;
    width: 600px;
    top: 80px;
    left: 0;
    background: white;
    display: block;
    height: auto;
    padding: 10px 0;
    opacity: 0;
    visibility: hidden;
    transition: all .5s ease;
    columns: 2;
    padding: 10px;
  }

.header .bottom-header .menu-hold ul li ul.dropdown li {
    display: block;
    margin: 5px 0;
}

.header .bottom-header .menu-hold ul li ul.dropdown li a {
/*    font-size: 15px;*/
    font-weight: 500;
    color: ;
}

.header .bottom-header .menu-hold ul li ul.dropdown li ul.dropdown {
    background: #001e35;
    top: 0;
    right: -70%;
    left: unset;
}

.header .bottom-header .menu-hold ul li ul.dropdown li:hover > ul.dropdown {
    left: unset;
    top: 0;
    right: -100%;
}

/* Home */

.hhold {
    position: relative;
  border: 25px solid var(--bg);
  background: var(--bg);
}

.hero {
  position: relative;
  padding: 120px 0;
  background-size: cover; background-position: center;
  background-attachment: fixed;
  color: var(--white);
  overflow: hidden;
border-radius: 25px;
}

.hero::before {
  content:""; position:absolute; top:0; left:0; width:100%; height:100%;
  background: var(--overlay);
}

.hero p { color: #c9cfdf; }

.hero .main { font-size: 55px; line-height: 60px; margin: 20px 0; }

.hero .form-hold { position: relative; }

.hero .form-hold .sidetext {
  position: absolute; transform: translateY(-50%) rotate(90deg);
  top: 50%; left: 43%; display: block; width: 100%; text-align: center;
}

.hero .form-hold .form {
  position: relative;
  background: var(--white);
  border-radius: 20px 50px 20px 20px;
  padding: 40px; color: var(--text);
  width: 85%;
}

.hero .form-hold .form .btn {
  background: var(--primary);
  color: var(--white);
  width: 100%; display: block;
}

.hero .form-hold .form .title { font-size: 24px; font-weight: bold; }
.hero .form-hold .form .wpcf7-spinner { position: absolute; }
.hero .form-hold .form p { margin-bottom: 0; }

.intro { position: relative; padding: 80px 0; }
.intro .iblocks { margin-top: 80px; 
    border-radius: 15px;
}

.intro .iblocks .col-md-3:first-child .intro-block { border-radius: 10px 0 0 10px; }
.intro .iblocks .col-md-3:last-child .intro-block { border-radius: 0 10px 10px 0; }

.intro .iblocks .col-md-3:nth-child(even) .intro-block {
  background: var(--navy); color: var(--white);
}
.intro .iblocks .col-md-3:nth-child(even) .intro-block p { color: var(--white); }

.intro .iblocks .intro-block {
  padding: 40px; background: var(--bg); text-align: center;
}

.intro .iblocks .intro-block.alt {
  background: var(--navy); color: var(--white);
}

.intro .iblocks .intro-block.alt i,
.intro .iblocks .intro-block.alt a {
    color: var(--orange);
}

.intro .iblocks .intro-block i {
  color: var(--primary); font-size: 65px;
}

.intro .iblocks .intro-block .title {
  font-weight: bold; font-size: 18px; margin: 10px 0;
}

.intro .iblocks .intro-block p { font-size: 14px; }

.intro .iblocks .intro-block a {
  color: var(--primary); font-weight: 600;
}

.intro .iblocks .intro-block a i { font-size: inherit; }

.about {
  padding: 120px 0; position: relative; background: var(--bg);
}

.about ul { columns: 2; }
.about ul li {
  position: relative; list-style: none; margin-bottom: 10px;
}

.about ul li::before {
  content:""; position:absolute; top:5px; left:-25px;
  width:12px; height:12px; border:2px solid var(--primary); border-radius:50%;
}

.about .einfo {
  position: relative; margin-top: 40px; padding: 20px;
  background: var(--primary); color: var(--white);
  border-radius: 10px 10px 50px 10px;
}

.about .einfo p { color: var(--white); margin-bottom: 0; }

.about .image-holder { position: relative; height: 100%; }

.about .image-holder .main-image {
  position: relative; height: 80%; width: 70%;
  min-height: 300px; background-position: center; background-size: cover;
  border-radius: 30px;
}

.about .image-holder .small-image {
  position: absolute; right: 5%; bottom: 0;
  height: 40%; width: 50%; min-height: 300px;
  background-position: center; background-size: cover;
  border-radius: 30px; border: 15px solid var(--bg);
}

.steps { position: relative; padding: 120px 0; }

.steps .step {
  position: relative; padding: 40px;
  border-radius: 10px 10px 50px 10px;
  background: var(--bg);
}

.steps .col-md-4:last-child .step {
  background: var(--navy); color: var(--white);
}

.steps .col-md-4:last-child .step p { color: var(--white); }
.steps .col-md-4:last-child .step .icon { color: var(--primary); opacity: .5; }

.steps .step .icon {
  position: absolute; top: 20px; right: 20px;
  font-size: 85px; line-height: 85px; color: var(--muted); opacity: .2;
}

.steps .step .title {
  font-weight: bold; font-size: 20px; margin-bottom: 20px; max-width: 150px;
}

.steps .step p { margin-bottom: 0; font-size: 14px; color: var(--muted); }

.big-image {
  position: relative; background-size: cover; background-position: center; padding: 120px 0;
}

.big-image .content-hold {
  background: var(--white);
  border-radius: 20px 80px 20px 20px;
  padding: 60px;
}

.big-image .content-hold .big {
  font-weight: bold; font-size: 95px; line-height: 85px; color: var(--primary);
}

.big-image .content-hold p { font-size: 15px; }

.big-image .alignmiddle {
  display: flex; align-items: center; justify-content: center;
}

.blog-section {
  padding: 120px 0 180px;
}

.blog-section .post-block { position: relative; }

.blog-section .post-block .image {
  border-radius: 5px; background-size: cover; background-position: center;
  height: 250px; width: 100%;
}

.blog-section .post-block .title {
  font-size: 18px; font-weight: bold; margin-bottom: 20px;
}

.blog-section .post-block .post-date {
  font-style: italic; margin: 20px 0 10px;
}

.blog-section .post-block a { color: var(--primary); font-weight: bold; }

.testimonial-section {
  position: relative;
  padding: 80px 0;
}

.testimonial-section .testiblock {
  position: relative;
  padding: 30px;
  border-radius: 30px;
  background: var(--bg);
  margin: 15px 0;
}

.testimonial-section .testiblock .stars {
  position: relative;
  padding-left: 0;
  list-style: none;
  display: flex;
}

.testimonial-section .testiblock .stars li {
  display: inline-block;
  margin: 0 2px;
  color: var(--primary);
}

/* Defaults */

.sub {
  padding: 5px 10px; border-radius: 5px;
  background: var(--primary); color: var(--white);
  display: inline-block; font-size: 14px; letter-spacing: 2px; font-weight: bold;
}

.heading {
  font-size: 32px; font-weight: bold; line-height: 38px; margin: 20px 0;
}

.btn {
  padding: 15px 30px; border-radius: 25px;
  background: var(--white); color: #002a66; /* legible on white */
  font-weight: 600; transition: all .5s ease;
}

.btn:hover { background: var(--primary); color: var(--white); }

.btn.blue, .btn.default { background: var(--primary); color: var(--white); }
.btn.blue:hover, .btn.default:hover { background: var(--white); color: #002a66; }

.btn.orange{ background: var(--orange); color: var(--white); }
.btn.orange:hover { background: var(--white); color: #002a66; }

.banner-hold { position: relative; z-index: 9; }

.banner-hold .banner {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  padding: 40px 80px;
  background: var(--primary);
  width: 100%; max-width: 1470px; border-radius: 10px;
}

.banner-hold .banner .big {
  color: var(--white); font-size: 35px; font-weight: bold; text-transform: uppercase;
}

.banner-hold .banner .btn { position: relative; top: 50%; transform: translateY(-50%); }

.para {
    position: relative;
    height: 300px;
    background-position: center;
    background-size: cover;
}

.para::before {
  content:""; position:absolute; top:0; left:0; width:100%; height:100%;
  background: var(--overlay);
}

/* Footer */

.footer {
  position: relative;
  background: var(--navy);
  color: var(--white);
  border-top: 5px solid var(--orange);
}

.footer .main-footer { position: relative; padding-top: 80px; }

.footer .footer-heading {
  position: relative; text-transform: uppercase; font-weight: 600; font-size: 22px;
  margin-bottom: 20px; display: inline-block;
}

.footer .footer-heading::after {
  content:""; position: absolute; top: 100%; left: 0;
  width: 80%; height: 2px; background: var(--primary);
}

.footer ul { list-style: none; margin-bottom: 0; padding-left: 0; }

.footer ul li {
  border-bottom: 1px solid rgba(229, 240, 236, 0.28);
  padding: 10px;
}

.footer ul li:last-child { border: none; }

.footer ul li a:hover { color: var(--primary); text-decoration: none; }

.footer .copyright {
  border-top: 1px solid rgba(229, 240, 236, 0.28);
  margin-top: 20px; padding: 20px 0;
}

/* Responsive */

@media only screen and (min-width: 1200px) {
  .menu-toggle, .dropdown-toggle { display: none; }
}

@media only screen and (max-width: 1200px) {
  body { overflow-x: hidden; }
  body.active { overflow-y: hidden; }
  ul { padding-left: 0; }

  .header .bottom-header .menu-hold ul li ul.dropdown {
        position: relative !important;
        top: 0;
        margin-left: 0;
        transition: all 0.4s ease;
        display: block !important;
/*        background: white;*/
        text-align: center;
        opacity: 1;
        visibility: visible;
        left: 50%;
        height: auto;
        margin: 0;
        padding: 0;
        box-shadow: none;
        z-index: 9;
        width: auto;
        transform: translate(-50%);
    }

  .top-header .logo { display: none; }
  .top-header { display: none; }

  .header .bottom-header {
    position: fixed; z-index: 99999; width: 100%; top: 0;
  }

  .header .logo { text-align: left !important; }

  .header .logo img {
    position: relative; z-index: 999; max-height: 70px; max-width: 100%; height: auto;
  }

  .header ul li::before { display: none; }

  .menu-toggle {
    position: absolute; width: 40px; height: 30px; cursor: pointer;
    display: inline-block; vertical-align: top; margin: 0; appearance: none;
    border: 0; background: none; overflow: visible; z-index: 999999; text-decoration: none;
    top: 50%; transform: translateY(-50%);
  }

  .menu-toggle:focus { outline: none; }

  .menu-toggle span {
    width: 100%; position: absolute; top: 0; left: 0; height: 2px; background: var(--primary);
  }

  .menu-toggle span:nth-of-type(1) { transition: all 0.3s 0.3s, transform 0.3s 0s; }
  .menu-toggle span:nth-of-type(2) {
    top: 50%; margin-top: -1px; left: 0; transition: all 0.3s 0.3s;
  }
  .menu-toggle span:nth-of-type(3) {
    bottom: 0; top: auto; left: 0; transition: all 0.3s 0.3s, transform 0.3s 0s;
  }

  .menu-toggle.active { transform: translateY(-50%), rotate(135deg); transition: all 0.5s 0.3s; }

  .menu-toggle.active span:nth-of-type(1) {
    top: 50%; margin-top: -1px; transform: rotate(90deg);
    transition: all 0.3s, transform 0.3s 0.3s;
  }
  .menu-toggle.active span:nth-of-type(2) { opacity: 0; transition: all 0.3s, opacity 0.3s 0s; }
  .menu-toggle.active span:nth-of-type(3) {
    bottom: 50%; margin-bottom: -1px; transform: rotate(0deg);
    transition: all 0.3s, transform 0.3s 0.3s;
  }

  .header .call-block { display: none; }
  .header .bottom-header { padding: 10px; }

  .header .bottom-header ul.menu {
    height: 100vh; width: 100vw; position: fixed; z-index: 99999; display: none;
    left: 0; top: 0; background: #222; text-align: center; padding-top: 100px;
    overflow-y: scroll; margin-left: 0; padding-left: 0;
  }

  .header .bottom-header ul.menu li {
    display: block !important; position: relative; float: none; height: unset; padding: 0;
  }

  .header .bottom-header ul.menu li a {
    padding: 22px; text-decoration: none; font-size: 22px; display: block; transition: 0.3s;
    border-left: none; width: 75%; margin: 0 auto; color: var(--white); background: transparent; border: none;
  }

  .bottom-header ul li ul.dropdown {
    position: relative !important; left: 50%; top: 0; margin-left: 0; transition: all 0.4s ease;
    display: block !important; opacity: 0; text-align: center; height: auto; visibility: hidden;
    margin: 0; padding: 0; box-shadow: none; z-index: 9; transform: translate(-50%);
  }

  ul.double { columns: unset; -webkit-columns: unset; -moz-columns: unset; }

  .footer { text-align: center; }
  .footer ul.pages li { display: block; width: 100%; }
  .footer ul.pages li::before { display: none; }
  .footer .social { margin-bottom: 20px; }
  .footer .footer-heading { margin-top: 20px; }
  body { text-align: center; }
}

@media (max-width: 991px) {
  .sub { margin-top: 20px; }
  .hero {
    margin-top: 80px;
  }

  .hero .main {
    font-size: 35px;
    line-height: 35px;
  }

  .hero .form-hold .form {
    width: 100%;
  }
}

@media (max-width: 768px) {
  .hero .form-hold { margin-top: 40px; }

  .intro .iblocks .intro-block.last,
  .intro .iblocks .intro-block.first { border-radius: 0 !important; }

  .about .image-holder .small-image { min-height: 200px; }
  .about ul { columns: unset; }
  .steps .step { margin: 20px 0; }
  .blog-section .post-block { margin: 20px; }

  .banner-hold .banner { padding: 20px; text-align: center; }
  .banner-hold .banner .big { font-size: 25px; }

  .text-right, .text-left { text-align: center !important; }
  .footer ul.social, .footer ul.bottom { justify-content: center; }
}

.about .einfo {
    margin-bottom: 20px;
}

@media (max-width: 576px) {
  .about ul li::before { display: none; }
  .about ul li { list-style: disc; }
}

@media (max-width: 400px) { }