body{
    margin: 0;
    padding: 0;
    width: 100%;
    box-sizing: border-box;
    font-family:'ubuntu',sans-serif;
    background-color: #f2f2f2;
}
h1, h2, h3, h4, h5, h6 {
    font-family: 'Roboto Slab',serif;
}

/* .anchor-link{
    text-decoration: none;
}
.anchor-link:focus{
    outline:none;
} */


/* .anchor-link h1::after{
    font-family: "Font Awesome 5 Free";
    content: "\f0c1";
    font-weight: 700;
} */

/* Squre grid styles */
/* .squares-wrapper{
    display:flex;
    justify-content: center;

}
.squares-wrapper>.squares {
    width:1000px;

}

.squares-wrapper> .squares> .square {
    display:grid;
    grid-template-columns: 1fr 1fr;
    margin-top: -4px;

}

.square> .img-wrapper img{
    width:100%;
    height:280px;
    object-fit:cover;
    border-radius: 15px;
}
.square> .square-text-wrapper{
    display:flex;
    flex-direction: column;
    justify-content:center;
    align-items:center;
    padding: 30px;
    color:midnightblue;
   

}

.square>.square-text-wrapper h1{
    color:midnightblue;
    

}

.square>.square-text-wrapper p {
    text-align: justify;
} */

/* =====================================
   SERVICES SQUARES NEW
===================================== */

/* .squares-wrapper{
    display:flex;
    justify-content:center;
    padding:40px 20px;
}

.squares-wrapper > .squares{

    width:100%;
    max-width:1200px;
}

.squares-wrapper > .squares > .square{

    display:grid;
    grid-template-columns:1fr 1fr;

    gap:30px;

    align-items:center;
    margin-top: -4px;
}

.square > .img-wrapper{

    width:100%;
    overflow:hidden;
    border-radius:18px;

}

.square > .img-wrapper img{

    width:100%;
    height:300px;

    object-fit:cover;

    display:block;

    transition:.5s ease;
}

.square:hover .img-wrapper img{

    transform:scale(1.05);
}

.square > .square-text-wrapper{

    display:flex;
    flex-direction:column;
    justify-content:center;

    padding:30px;

    color:midnightblue;
}

.square > .square-text-wrapper h1{

    margin-bottom:15px;

    color:midnightblue;

    font-size:2rem;
}

.square > .square-text-wrapper p,
.square > .square-text-wrapper li{

    /* line-height:1.8; *
    text-align:justify;
    letter-spacing: 1px;
    line-height:30px;
    
} */

/* =====================================
   TABLET
===================================== */

/* @media (max-width:991px){

    .squares-wrapper{
        padding:30px 15px;
    }

    .squares-wrapper > .squares > .square{

        grid-template-columns:1fr;

        gap:20px;
    }

    /* Force image first for every section *

    .square > .img-wrapper{
        order:1;
    }

    .square > .square-text-wrapper{
        order:2;
    }

    .square > .img-wrapper img{

        height:280px;
    }

    .square > .square-text-wrapper h1{

        font-size:1.7rem;

        text-align:center;
    }
} */

/* =====================================
   MOBILE
===================================== */

/* @media (max-width:600px){

    .squares-wrapper{
        padding:20px 10px;
    }

    .squares-wrapper > .squares > .square{

        gap:15px;

        margin-bottom:30px;
    }

    .square > .img-wrapper img{

        height:220px;
    }

    .square > .square-text-wrapper{

        padding:10px;
    }

    .square > .square-text-wrapper h1{

        font-size:1.4rem;

        text-align:center;
    }

    .square > .square-text-wrapper p,
    .square > .square-text-wrapper li{

        font-size:.95rem;

        text-align:left;
    }
} */

/* =====================================
   MODERN TITLE LINKS
===================================== */

.anchor-link{

    text-decoration:none;

    display:inline-block;

    width:fit-content;
}

.anchor-link h1{

    display:flex;

    align-items:center;

    gap:12px;

    color:#0f172a;

    transition:.35s ease;
}

/* Arrow Icon */

.anchor-icon{

    width:36px;
    height:36px;

    display:flex;

    align-items:center;
    justify-content:center;

    border-radius:50%;

    background:
        linear-gradient(
            135deg,
            #1e88e5,
            #00bfa5
        );

    color:white;

    font-size:.8rem;

    box-shadow:
        0 8px 20px rgba(30,136,229,.20);

    transition:.35s ease;
}

/* Hover */

.anchor-link:hover h1{

    color:#1e88e5;
}

.anchor-link:hover .anchor-icon{

    transform:
        translateX(6px)
        scale(1.08);

    box-shadow:
        0 14px 30px rgba(30,136,229,.35);
}

/* Click */

.anchor-link:active .anchor-icon{

    transform:
        translateX(3px)
        scale(.96);
}
/* =====================================
   SERVICES SECTION
===================================== */

.squares-wrapper{

    display:flex;
    justify-content:center;

    padding:60px 20px;

    background:
        linear-gradient(
            180deg,
            #f8fbff 0%,
            #ffffff 100%
        );
}

.squares-wrapper > .squares{

    width:100%;
    max-width:1200px;
}

/* =====================================
   EACH SERVICE BLOCK
===================================== */

.squares-wrapper > .squares > .square{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:40px;

    align-items:center;

    margin-bottom:40px;

    padding:25px;

    border-radius:28px;

    background:white;

    box-shadow:
        0 15px 40px rgba(0,0,0,.05);

    transition:.35s ease;
}

/* Alternate background */

.squares-wrapper > .squares > .square:nth-child(even){

    background:
        linear-gradient(
            135deg,
            #f8fbff,
            #eef7ff
        );
}

.squares-wrapper > .squares > .square:hover{

    transform:translateY(-6px);

    box-shadow:
        0 25px 50px rgba(30,136,229,.12);
}

/* =====================================
   IMAGE
===================================== */

.square > .img-wrapper{

    width:100%;

    overflow:hidden;

    border-radius:22px;

    box-shadow:
        0 15px 35px rgba(0,0,0,.12);
}

.square > .img-wrapper img{

    width:100%;

    height:320px;

    object-fit:cover;

    display:block;

    transition:.6s ease;
}

.square:hover .img-wrapper img{

    transform:scale(1.08);
}

/* =====================================
   CONTENT
===================================== */

.square > .square-text-wrapper{

    display:flex;

    flex-direction:column;

    justify-content:center;

    padding:10px;

    color:midnightblue;
}

/* =====================================
   HEADINGS
===================================== */

.square > .square-text-wrapper h1{

    position:relative;

    display:inline-block;

    margin-bottom:25px;

    font-size:2rem;

    font-weight:800;

    color:#0f172a;
}

/* Accent line */

.square > .square-text-wrapper h1::after{

    content:"";

    position:absolute;

    left:0;
    bottom:-10px;

    width:70px;

    height:4px;

    border-radius:10px;

    background:
        linear-gradient(
            90deg,
            #1e88e5,
            #00bfa5
        );
}

/* =====================================
   TEXT
===================================== */

.square > .square-text-wrapper p,
.square > .square-text-wrapper li{

    color:#475569;

    font-size:1rem;

    line-height:1.9;

    text-align:justify;

    letter-spacing:.2px;
}

.square > .square-text-wrapper ul{

    padding-left:20px;
}

.square > .square-text-wrapper li{

    margin-bottom:10px;
}

/* =====================================
   LINKS
===================================== */

.anchor-link{

    text-decoration:none;
}

.anchor-link:hover h1{

    color:#1e88e5;
}

/* =====================================
   TABLET
===================================== */

@media(max-width:991px){

    .squares-wrapper > .squares > .square{

        grid-template-columns:1fr;

        gap:25px;

        padding:20px;
    }

    .square > .img-wrapper{

        order:1;
    }

    .square > .square-text-wrapper{

        order:2;
    }

    .square > .img-wrapper img{

        height:280px;
    }

    .square > .square-text-wrapper h1{

        text-align:center;

        font-size:1.7rem;
    }

    .square > .square-text-wrapper h1::after{

        left:50%;

        transform:translateX(-50%);
    }
}

/* =====================================
   MOBILE
===================================== */

@media(max-width:600px){

    .squares-wrapper{

        padding:30px 10px;
    }

    .squares-wrapper > .squares > .square{

        padding:15px;

        border-radius:20px;
    }

    .square > .img-wrapper img{

        height:220px;
    }

    .square > .square-text-wrapper h1{

        font-size:1.4rem;
    }

    .square > .square-text-wrapper p,
    .square > .square-text-wrapper li{

        font-size:.95rem;

        text-align:left;
    }
}
/* helpers */
.spacer40{
    height: 40px;
    width: 100%;
}