* {
    box-sizing: border-box;
}
server {
    listen :443 ssl;
    server_name www.refynweb.com;

    ssl_certificate /etc/letsencrypt/live/www.refynweb.com/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/www.refynweb.com/privkey.pem;

    add_header :Strict-Transport-Security "max-age=31536000; includeSubDomains" always;
}


 body {
     margin: 0;
     padding: 0;
     background-color: whitesmoke;
     color: white;
 }

header {
    display: flex;
    justify-content: center;
    text-align: center;
    padding: 40px;
    background: rebeccapurple;
    border-bottom: 6px solid darkgrey;
}

p {
    font-size: 118%;
    color: black;

}
h1 {
    font-family: Apple Chancery, cursive;

}
 h2 {
     font-family: Apple Chancery, cursive;

     font-size: 250%;
    color: black;
 }
h3 {
    font-family: Apple Chancery, cursive;

    font-size: 180%;

}
h4 {
    font-family: Apple Chancery, cursive;

    font-size: 100%;
    color: black;
}
 p a{
     color: black;
     text-decoration: none;
     font-weight: bold;
     text-decoration: underline;
 }
div:hover .lienp{
    color: gold;

}
 .section1  {
     display: grid;
     grid-template-columns: 1fr 1fr;
 }
 .section2 {
     display: grid;
     grid-template-columns: 1fr 1fr;
 }
 .section3 {
     display: grid;
     grid-template-columns: 1fr 1fr;
 }
.sectionml {
    display: grid;
    grid-template-columns: 1fr;
}
.sectitre {
    margin: 0;
    font-size: 30px;
}
.titre {
    margin-top: 75px;
    margin-bottom: 75px;
    font-size: 50px;
    font-weight: bold;

}

 header nav {
     position: fixed;
     top: 0;
     width: 100%;
     background: rgba(0, 0, 0, 0.5);
     box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
     z-index: 1000;
 }

 .divnav {
     justify-content: space-between;
     display: flex;
     flex-wrap: wrap;
 }

 nav ul {
     display: flex;
     list-style: none;
     margin-top: 30px;
     margin-right: 100px;
     gap: 70px;
     justify-content: center;
     font-size: 25px;
 }

 nav ul li a {
     text-decoration: none;
     color: white;
     font-weight: bold;
 }


 ul{
     margin:0;
     padding:0;
     display:flex;
     flex-wrap: wrap;
 }

 ul li{
     list-style:none;
     margin:0 20px;
     transition:0.5s;
 }

 ul li a{
     display: block;
     position:relative;
     text-decoration:none;
     padding:5px;
     font-size:18px;
     font-family: sans-serif;
     color:#fff;
     text-transform:uppercase;
     transition:0.5s;
 }

 ul:hover li a{
     transform:scale(1.2);
     opacity:0.2;
     filter:blur(1px);
 }

 ul li a:hover{
     transform:scale(1.8);
     opacity:1;
     filter:blur(0);
     text-decoration:none;
     color:#fff;
 }

 ul li a:before{
     content:'';
     position:absolute;
     top:0;
     left:0;
     width:100%;
     height:100%;
     background:#FFD700;
     transition:0.5s;
     transform-origin:right;
     transform:scaleX(0);
     z-index:-1;
 }

 ul li a:hover:before{
     transition:transform 0.5s;
     transform-origin:left;
     transform:scaleX(1);
 }




 section {
     padding: 100px 20px;
     text-align: center;
 }
 section img {
     max-width: 100%;
     height: auto;
 }



.content {
    padding: 20px;
}

.services {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    margin-top: 20px;
}

.service {
    background: rgba(255, 255, 255, 0.7);

    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    width: 70%;
    color: #333;
    transition: transform 0.3s;
}

 .service:hover {
     border: 3px solid #4a90e2;
     transition: transform 0.3s;
     background: linear-gradient(to right, #4a90e2, #9013fe);

 }

 .service img {
     width: 100%;
 }

.service:hover {
    transform: scale(1.05);
}

footer {
    background: rebeccapurple;

    border-top: 5px solid darkgrey;
    color: white;
    text-align: center;
    padding: 10px 0;
    position: relative;
    bottom: 0;
    width: 100%;
}
 .divfoot  {
     margin-bottom: 125px;
 }
 .divfoot img {
     height: 180px;

     width: 180px;
 }

 .gridf {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 0px;
 }
 .gridfoot {
     display: grid;
     grid-template-columns: 1fr 1fr 1fr;
     gap: 20px;
     margin: 50px;

 }
 .contfc {
     border: 1px solid darkgrey;
 }
 .contfc p {
    color: white;
 }
@media screen and (max-width: 1300px) {
    section {
        height: 100%;
    }

    .divnav {

        justify-content: center;
    }
    body {
        gap: 150px;
    }

    p {
        font-size: 100%;
        color: black;

    }
    h2 {
        font-size: 120%;
        color: black;
    }
    h3 {
        font-size: 100%;

    }
    h4 {
        font-size: 100%;

    }


    .section1  {
        font-size: 100%;

        display: grid;
        grid-template-columns: 1fr;
        margin-bottom: 150px;

    }
    .section2  {

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

    }
    .section3  {
        display: grid;
        grid-template-columns: 1fr;
        margin-bottom: 350px;

    }

    .section4 img {

    }


    .divnav img {
        height: 180px;
        width: 180px;
    }

    nav ul {
        display: block;
        margin-top: 30px;
        margin-bottom: 30px;
        margin-right: 50px;
        gap: 40px;

    }
    .divfoot {
        justify-content: center;
    }
    .gridfoot {
        margin-top: 50px;
        display: grid;
        grid-template-columns: 1fr;
        gap: 30px;
    }

}






@media screen and (max-width: 400px) {
    .divnav {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    body {
        gap: 150px;
    }

    p {
        font-size: 80%;
        color: black;

    }

    h2 {
        font-size: 120%;
        color: black;
    }

    h3 {
        font-size: 100%;

    }

    h4 {
        font-size: 100%;

    }

    section {
        transition: none;

    }
    .section1 {
        font-size: 100%;

        display: grid;
        grid-template-columns: 1fr;
        margin-bottom: 150px;

    }

    .section2 {
        background: whitesmoke;
        display: grid;
        grid-template-columns: 1fr;
        margin-bottom: 200px;

    }
    .sectitre2 {
        background: whitesmoke;


    }

    .section3 {
        display: grid;
        grid-template-columns: 1fr;
        margin-bottom: 550px;

    }

    .section5 {
        display: grid;
        grid-template-columns: 1fr;
        margin-bottom: 200px;
    }
    .section4  {
        display: grid;
        grid-template-columns: 1fr;
    }
    .section4 img {
        margin-left: 75px;
        width: 60%;
        height: 80%;
    }

}
    @media (prefers-reduced-motion: no-preference) {
        section {
            max-height: 70vh;
            margin: 0 auto;
            display: block;
            opacity: 0;
            scale: 0.2;
            animation: fade-in linear forwards;
            animation-timeline: view();
            animation-range: 50px 36%;
        }

        @keyframes fade-in {
            to {
                opacity: 1;
                scale: 1;
            }
        }
    }

    .sectitre, .section1, .sectitre3, .section3, .section5 {
        background: whitesmoke;
    }

    .sectitre2, .section2, .section4 {
        background: #e2e9f5;
    }