style.css

*{box-sizing: border-box; width:100%;}
html { font-family:"Gotham Pro"; }
body{margin:0;padding:0;background-color:rgb(245,245,245);width:100%;}

/*header*/

header
 { 
  position:fixed;
  background-color:rgb(245,245,245);
  width:100%; 
  padding-left: 5em;
  padding-right: 5em;
  display:flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  column-gap:2em;
}

/*header items*/

 header  a {
    float:left;
    display:block;
    color: black;
    text-align: center;
    padding: 2% 2%;
    text-decoration: none;
    font-size: 1em;
    font-weight:lighter;
font-size:1.2em}


 
 .bt1:hover,.bt2:hover,.bt3:hover,.bt4:hover
 {
     color:rgb(245,245,245);
     background-color:rgb(247,188,88);}

 .current
 {
     color:white;
     background-color:rgb(247,188,88);}



/* section one */

section{width:100%;}
 body .sec1
 {  
     display:inline-block;
     background: url("images/bg1.png") no-repeat center top;
     background-size:cover;
    aspect-ratio: 100 / 40;
     margin-top:7%;
 }



 .sec1h1
 {  display:block;
     font-size:1.8em;
     letter-spacing: 4px;
     line-height:140%;
     font-weight:400;
    margin-top:3em;}

 .sec1h2
 {   display:block;
     font-size:1.3em;
     letter-spacing: 1px;
     font-weight:200;}

 .more
 {  display:block;
    width:20%;
   /* margin-bottom:5%;*/
    color: white;
    background-color:rgb(247,188,88);
    text-align: center;
    padding: 1.5% 4%;
    text-decoration: none;
    font-size: 1em;
    font-weight:200;
 }

/* section two */

 .sec2
 {  
    background-color:white;
    width:100%;
    height:auto;
 }

 .sec2h1
 {  margin:0;
     padding-top:2%; padding-bottom:0.2%;
     color:black;
     text-align: center;
     font-size:1.2em;
     letter-spacing: 2px;
     font-weight:400;
 }

 .sec2h1tag
 {
     padding-top:0.2%; padding-bottom:0.2%;
     color:rgb(168,168,168);
     text-align:center;
     font-size:1em;
     letter-spacing: 2px;
     font-weight:200;
 }

 .sec2h2
 {
     color:rgb(108,108,108);
     text-align:left;
     font-size:1em;
     letter-spacing: 1px;
     font-weight:400;
 }

p
 {
   
    color:rgb(108,108,108);
    width:100%;
    text-align:left;
    font-size:1em;
    letter-spacing: 1px;
    font-weight:200;
 }

/* boxes styline */

 .box1, .box2, .box3
 {display: flex;}
 
 .box1 .p1 { align-self: flex-start;width:100%;;}
 .box1 .img1{max-width:130%;align-self:center;width:100%;padding:2%;}
 .box2 .img4 { align-self: flex-end;padding:2%;}

 .box1 .more2
   {
       display:block;
       width:45%;
       /*margin-left:0;
       margin-bottom:5%;*/
       color: white;
       background-color:rgb(247,188,88);
       text-align: center;
       padding: 2% 4%;
       text-decoration: none;
       font-size: 1em;
       font-weight:200;
    }

    .more:hover,.box1 .more2:hover, button:hover /* button hovering styling */
    { color:black; background-color:rgb(168,168,168);}

 .box2 .img3{align-self: center;padding:2%;}
 .box2 .img2{align-self: flex-start;padding:2%;}

/* section three */

.sec3
{
    width:100%;
    height:auto;
    background-color:rgb(245,245,245);
 }

/* section four */

.sec4
{
    width:100%;
    background-color:white;
    height:auto;
}

 
 .box3 .img5 { align-self: center;width:60%;;padding:4%;}
 .box3 .box4 { align-self: center;width:100%;}

img /* Images transition */
{
    -webkit-transition: opacity 0.8s ease-in-out;
  -moz-transition: opacity 0.8s ease-in-out;
  -o-transition: opacity 0.8s ease-in-out;
  transition: opacity 0.8s ease-in-out;
  max-width:110%;
}

img:hover{opacity:0.6;}

.sec4h2
{
    color:black;
    text-align:left;
    font-size:1em;
    letter-spacing: 1px;
    font-weight:400;
}

h3
{
    color:rgb(247,188,88);
    text-align:left;
    font-size:1em;
    letter-spacing: 1px;
    font-weight:400;
}

.sec4 p{font-size:1em;}
.sec4 a{font-size:1em;;font-weight:400;color:black;}

/* section five */

.sec5
{
    width:100%;
    background-color:rgb(245,245,245);
    height:auto;
}

form{padding:5%;
display:flex;}

button
{   padding: 2% 4%;
    background-color:rgb(247,188,88);
    border:0;
    color:white;
    font-size:1em;
    letter-spacing: 2px;}

input{
border:0;
padding: 1.15% 4%; 
background-color:white;
color:black;
font-size:1em;
letter-spacing:1px;}


/* footer */

footer
{
    width:100%;

    background-color:rgb(42,42,42);
    height:auto;
    display:flex;

}

footer span
{
    color:white;
    text-align:left;
    font-size:1em;
    letter-spacing: 1px;
    font-weight:400;
}

footer .col1{width:100%;padding:2%;}
footer .col2{width:100%;padding:2%;}
footer .col3{width:100%;padding:2%;}

footer p {font-size:1em;;font-weight:400;line-height:20px;padding-left:0;}
footer a {font-size:1em;font-weight:400;color:rgb(168,168,168);line-height:20px;}
footer .col3 p{width:100%}

*{font-size:1em;}


/*padding between sections*/

.sec1,.sec2,.sec3,.sec4,.sec5,footer{padding:4% 8% 4% 8%;}

/* mobile screen settings*/
@media screen and (max-width: 650px){ .topnav a:not(:first-child) {display: none;}
footer{justify-content: center;flex-direction:column;align-items:flex-end;} 
.box1, .box2, .box3,header{flex-direction: column;}
body .sec1{margin-top:38%;}
.more,.more2{width:100%;}
.sec1,.sec2,.sec3,.sec4,.sec5,footer{padding:10%;}}

/*end*/