:root {
    --text-color: black;
    --background-color: #ff9999;
    --link-color: #0077cc;
}
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html {
    scroll-behavior: smooth;
}
body {
    color: var(--text-color);
    background-color: var(--background-color);
    font-family: Arial, sans-serif;
}
a {
    color: var(--link-color);
    text-decoration: none;
}
nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
nav .right {
    display: flex;
    gap: 20px;
    align-items: center;
    padding-right : 50px ;
}
nav .right a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 20px;
}

nav .right a span {
    margin-left: 5px;
}
.hero-section {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 50px;
    margin: 50px 0 100px;
    gap: 40px;
}
img {
    max-width: 100%;
    display:flex;
    border-raidus: 12px ;
    
}
button{
    padding: 10px 20px ;
    background-color : var(--link-color) ;
}
.s{
    display: flex;
    gap : 200px ;

}
.ss{
    width : 450px ;
    height : 150px ;
    background-color : burlywood ;
    padding : 35px ;
    border-radius: 10px;
    
}
.sss{
    width : 450px ;
    height : 150px ;
    background-color : lavenderblush ;
    padding : 25px  ;
    border-radius: 10px ;

}
h2 {
    font-size : 28px ;
    text-align : center ;

    
}
.i {
    border-raidus : 10px ;
}