/*img centering*/
        img {display: block; width: 40%; gap: 10px; margin-left: auto; margin-right: auto;}
/*logo-resizing*/
        .logo {max-width:400px; margin:auto;}
/*body*/
        body, html {height: 100vh; margin: 15px;}
        body, button, input, select, textarea {font-family: 'Montserrat',sans-serif; font-size: 20px; line-height: 1.72;}
        body {
            display: grid;
            margin: 10px;
            grid-template-columns: auto;
            grid-template-rows: auto;
            gap: 10px;
            grid-area: nav;
        }
        p,h1,h2,h3 {padding: 10px 10px 10px 20px;}
        h2, h3 {text-align: center; font-size: xx-large;}
/*menu*/
        nav {float: right;}        
        ul {list-style-type: none; margin: 0; padding: 0;}
        li {display: inline;}
        nav a {display: inline-block; padding: 10px;}
        nav a:link {text-decoration: none; font-size: 12px;}
        a:link {text-decoration: none;}  
/*menu burger*/
    .menu {
        visibility: hidden;
    }
    button + .menu:active,
    button:focus + .menu {
        visibility: visible;
    }
/*menu button resizing*/
    .burger {padding:5px 20px;}

/*content*//* gradient creator: https://mycolor.space/gradient3? */
        .hero {background-image: linear-gradient(to right top, rgba(245, 246, 252, 0.52), rgba(7, 90, 174, 1)), url('img/hero-free-img.jpg'); padding-left:15px; padding-right:15px; padding-bottom: 20%;  
        background-size: cover; color: white;}
        main {text-align: left;}
        .bluebox {background-color: #0274be; color: white; padding:10px;}
        .greybox {background-color: rgb(245, 246, 247); padding:10px;}
        .brownbox {background-color: #F1D592; color: white; padding:10px;}
        article {text-align: left;}
        .testimonial {background-image:url('img/testimonials-free-img.jpg'); background-size: cover; padding: 20px; color:white;}
/*tinted-image*/ 
        .testimonial {background:linear-gradient(
            rgba(0, 81, 255, 0.45), 
            rgba(0, 255, 191, 0.45)     
        ),
/*bottom image*/
            url(img/testimonials-free-img.jpg);
        }
        .quote {color:#0274be; font-size: 400%;}
        #photo {background-color: #3B5998; color:white; text-align: center;}
/*buttons*/
        button, .button {background-color:#0274be; padding: 30px 30px; border-color: white; color:white; }
/*buttons centering*/
        button, .button {margin: auto; display:block;}
/*social*/
        .social {background-color: white; text-align: center; }
        .social a { padding: 0.5rem; /* Adds spacing around each icon */
  display: inline-block; /* Ensures the padding wraps nicely */}
        .fa {
        padding: 20px;
        font-size: 30px;
        width: 50px;
        text-align: center;
        text-decoration: none;
        }
        .fa-whatsapp {
        background: #25D366;
        color: white;
        }
        .fa-envelope {
        background: #f1d592;
        color: white;
        }
        .fa-facebook {
        background: #3B5998;
        color: white;
        }
        .fa-twitter {
        background: #55ACEE;
        color: white;
        }
        .fa-plus {
        background: pink;
        color: white;
        }
/*About*/
.reviews {background-color: aliceblue;}
.client-reviews {background-color: white; text-align: center;}

/*Automation*/
.r2box {background-color: #f5f1ee; padding:20px;}

/*Reports, courses circle*/
.circle {width: 250px; height: 250px; border-radius: 50%; background:none;}

/*Blog posts*/
.conclusion {background-color: #faefd6;color: black; padding:10px; }

article {
    grid-template-columns: 1fr 1fr 1fr;        
        grid-template-areas: 
        "blogbox blogbox blogbox"
        "blogbox blogbox blogbox"
        "blogbox blogbox blogbox";}
        
        .blogbox {display: grid; grid-area: blogbox; background: linear-gradient(135deg, lightgray 90%, white 30%); color: white; padding:10px;}
        .blogbox1 {background-image: linear-gradient(to left bottom, #182d49, #3e4e67, #647187, #8c97a7, #b6bec9, #b7c3d5, #b8c9e1, #b9ceed, #92b1e5, #6c94db, #4577d0, #0c5ac4); color: white; padding:10px;}
        .blogbox2 {background: linear-gradient(110deg, #96bce3 60%, #c1bbca 60%); background-image: url (''); padding:10px;}