/*
Theme Name: Pinnacle Notary Child
Theme URI: https://pinnaclenotaryservices.com/
Template: pinnacle-notary
Author: Pinnacle Notary Services
Author URI: https://pinnaclenotaryservices.com/
Description: Child theme for Pinnacle Notary. Make all your customisations here — this file and functions.php survive an update to the parent theme.
Version: 1.0.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: pinnacle-notary-child
*/

/* =============================================================
   Your CSS goes below this line.

   The parent's stylesheets load first, so anything here wins at
   equal specificity — no !important needed in most cases.

   The palette is exposed as custom properties, so a colour tweak
   is usually a one-liner. These are the same tokens the
   Customizer writes to, so change colours there first and only
   drop down here for something the Customizer does not cover.

   :root{
     --coral:#EF6F57;      brand primary
     --amber:#F5BE5A;      gradient end
     --violet:#9C80C6;     accent
     --ink:#150F1C;        dark bands
     --paper:#F7F1E6;      light bands
     --coral-ink:#B23C24;  coral that is readable as text on paper
     --wrap:1240px;        max content width
     --r:14px;             corner radius
   }
   ============================================================= */


ul.foot__l li a {
    text-transform: capitalize !important;
}

/* New CSS Addition */

@media (max-width: 1080px) {
    section#services .svc{
        grid-template-columns: 1fr;
        max-width: 70%;
        margin: 0 auto;
    }
    footer .foot__in > div:first-child{
        grid-column: span 2;
    }
    footer .foot__in > div:first-child .foot__p{
        max-width: 100%;
    }
}

@media (max-width: 960px) {
    section#about .about__fig{
        max-width: 100%;
    }
    section#about .head{
        max-width: 100%;
    }
    section#about .lede{
        max-width: 100%;
    }
    section.hero .lede{
        max-width: 100%;
    }
    section.hero .creds{
        max-width: 100%;
    }
	section.hero .wrap{
		display: flex;
		flex-direction: column-reverse;
		align-items: baseline;
	}
}

@media (max-width: 620px) {
    section#services .svc{
            max-width: 100%;
    }
}