*{
   padding: 0;
   margin: 0;
   box-sizing: border-box;
   text-decoration: none;
   list-style: none;
   font-family: "Alegreya";
}

/*..............nav............*/
.nav{
   justify-content: space-between;
   align-items: center;
   width: 80%;
   margin: auto;
   padding: 20px;    
   display: flex;
}

.logo img{
   width: 150px;
}

.links ul{
   font-size: 18px;
   gap: 30px;
   display: flex;
}

.links ul a{
   color: rgba(255, 255, 255, .92);
}

.links ul a:hover{
   color: burlywood;
}

.links span{
   color: beige;
}

/*..............section1............*/
.hero{
   background-position: center;
   background-size: cover;
   height: 100vh;
   color: rgba(255, 255, 255, .92);
   background-image: linear-gradient(rgba(0,0,0,0.4),rgba(0,0,0,0.4)), url(../images/drew-coffman-1872.jpg);
}

.hero .center-content{
   flex-direction: column;
   justify-content: center; 
   align-items: center;     
   height: 70%;
   display: flex;
}

.content-sec1{
   text-align: center;
}

.content-sec1 h1{
   font-weight: normal;
   margin-bottom: 18px;
   font-size: 78px;
}

.content-sec1 > p:first-child{
   margin-bottom: 18px;
   font-size: 22px;
}

.content-sec1 .para{
   width: 90%;
   margin: auto;
   font-size: 22px;
   margin-bottom: 18px;
}

.btn-sec1{
   text-align: center;
}

.btn-sec1 button{
   border-radius: 3px;
   font-weight: bold;
   font-size: 14px;
   padding: 10px 17px;
   color: white;
   cursor: pointer;
}

.btn-sec1 .button-learnmore{ 
   border: 2px solid #8e7754;
   margin-right: 10px;
   background-color: #8e7754;
}

.btn-sec1 button:last-child{
   border: 2px solid white;  
   background-color: transparent;
}

.btn-sec1 .button-learnmore:hover{
   background-color: white;
   color: #333;
   border: 2px solid white;
}

.btn-sec1 button:hover{
   color: #333;
   background-color: white;
}

.hero .fixed-icons{
   height: 90px;
   width: 45px;
   padding: 15px 8px;
   background-color: rgb(255, 255, 255);
   border-radius: 3px 0px 0px 3px;
   position: fixed;
   right: 0px;
   top: 230px;
   box-shadow: 2px 2px 20px rgb(125, 124, 124);
   z-index: 1000;
}

.hero .fixed-icons i{
   color: gray;
   font-size: 20px;
   margin-bottom: 20px;
}

.hero .fixed-icons i:hover{
   color: #2499f8;
}

/*..............section2............*/
.sec2{
   background: #fff;
   padding: 80px 20px;
}

.section-2{
   margin: auto;
   display: flex;
   justify-content: center;
   align-items: center;
   color: #686868;
   width: 80%;
}

.content-sec2{
   width: 61%;
}

.content-sec2 h2{
   font-weight: normal;
   font-size: 30px;
   color: #333;
   margin-bottom: 20px;
}

.content-sec2 p{
   margin-bottom: 20px;
}

.content-sec2 li{
   margin-bottom: 30px;
   display: flex;
   align-items: center;
}

.img-sec2 img{
   width: 90%;
}

.content-sec2 .icon{
   height: 60px;
   width: 60px;
   border-radius: 50%;
   padding: 15px;
   border: 2px solid gainsboro;
   margin-right: 15px;
   display: flex;
   justify-content: center;
   align-items: center;
}

.content-sec2 .icon i{
   color: #8e7754;
}

.top-up{
   height: 40px;
   width: 40px;
   display: flex;
   align-items: center;
   justify-content: center;
   background-color: #666768b4;
   border-radius: 50%;
   color: white;
   position: fixed;
   bottom: 20px;
   right: 20px;
   z-index: 1000;
}

.top-up i{ color: white; }

html{ scroll-behavior: smooth; }

/*..............section3............*/
.sec3{
   background-color: #f8f8f8;
   padding: 80px 0;
}

.section-3{
   width: 80%;
   margin: auto;
   display: flex;
   justify-content: center;
   align-items: center;
   color: #686868;
}

.content-sec3{
   width: 57%;
   line-height: 1.8;
}

.content-sec3 h2{
   color: #333;
   font-weight: normal;
   font-size: 30px;
}

.img-sec3{
   display: flex;
   justify-content: flex-end;
}

.img-sec3 img{
   width: 85%;
}

.p-sec3{
   margin: 30px 0px;
}

/*..............section4............*/
.sec4{
   padding: 80px 0;
}

.sec4-content {
   width: 85%;   
   margin: auto; 
   color: #686868;
}

.sec4-content .sec4-head{
   text-align: center;
   margin-bottom: 60px;
}

.sec4-head h3{
   margin-bottom: 20px;
   font-size: 30px;
   font-weight: normal;
   color: #303030;
}

.cards{
   display: flex;
   justify-content: space-evenly;
   gap: 20px;
   text-align: center;    
}

.card-item img{
   width: 100%;
}

.cards .card-content{
   padding: 20px;
   line-height: 1.5;
}

.cards .card-content h4{
   margin: 10px 0px;
   color: #303030;
}

/*..............section5............*/
.sec5{
   padding: 80px 0;
   background-color: #f8f8f8;
}

.sec5-container{
   width: 80%;
   margin: auto;
   display: flex;
}

.sec5-content {
    flex: 1; 
   }
.sec5-map { 
   flex: 1;
   padding-left: 30px;
 }

.sec5-content h2{
   margin-bottom: 25px;
   font-size: 32px;
   font-weight: normal;
}

.sec5-content p{
   color: #686868;
   font-size: 17px;
}

.sec5-content .parasec5-2{
   margin: 20px 0px;
}

.sec5-content .icons li{
   color: #686868;
   margin: 20px 0px;
   font-size: 17px;
   display: flex;
   align-items: center;
}

.sec5-content .icons .icon{
   height: 50px;
   width: 50px;
   border-radius: 50%;
   background-color: #8e7754;
   color: white;
   margin-right: 15px;
   display: flex;
   justify-content: center;
   align-items: center;
}

/*..............section6...........*/
.sec6{
   background-color: #484540;
   padding: 80px 0;
}

.container-sec6{
   width: 85%;
   margin: auto;
   display: flex;
   justify-content: center;
   gap: 20px;
}

.card{
   flex: 1;
   color: #969696;
}

.card h4{
   color: #fff;
   margin-bottom: 20px;
}

.card ul li{
   padding: 10px 0px;
   border-bottom: 1px solid rgba(220, 220, 220, 0.178);
}

.shape ul li::before{
   content: ">";
   margin-right: 10px;
}

.world-map{
   background-image: url(../images/contact-details-map.png);
   background-position: center;
   background-repeat: no-repeat;
   background-size: contain;
}

/*..............footer............*/
footer{
   color: #777;
   background-color: #353330;
   padding: 50px 0px;
}

.f-center{
   flex-direction: column;
   display: flex;
   justify-content: center;
   align-items: center;
}

footer i{ 
   color: #777; 
}

.f-content { 
   display: flex; margin-top: 20px;
}

.f-content a{
   width: 40px;
   height: 40px;
   border-radius: 50%;
   margin-right: 7px;
   background-color: #484540;
   display: flex;
   justify-content: center;
   align-items: center;
}

footer p{
   text-align: center;
   margin-top: 20px;
}

footer div a:hover i { 
   color: white; 
}

footer .facebook:hover{
   background-color: #0275d8;
}

footer .google:hover{ 
   background-color: #f44336; 
}

footer .linkedin:hover{
   background-color: #2187db;
}

footer .twitter:hover{ 
   background-color: #2499f8; 
}




@media (max-width: 992px) {
.nav, .section-2, 
.section-3, 
.sec5-container, 
.container-sec6 {
      flex-direction: column;
      width: 90%;
      text-align: center;
}

.links ul { margin-top: 20px; gap: 15px; flex-wrap: wrap; justify-content: center; }

.content-sec2, .content-sec3, .sec5-content, .sec5-map, .card {
      width: 100% !important;
      padding: 0;
}

.img-sec2, .img-sec3 {
   width: 100%; 
   justify-content: center; 
   margin: 20px 0; 
}

.img-sec2 img, .img-sec3 img { 
   width: 80%; 
.cards { 
   flex-direction: column; 
   align-items: center; }
.card-item { width: 90%; 
   margin-bottom: 30px; }

.sec5-map { 
      adding-left: 0; 
      margin-top: 30px; 
   }
   
.section-3 {
         flex-direction: column-reverse; } 
}

@media (max-width: 600px) {
   .content-sec1 h1 { 
      font-size: 45px; 
   }

.hero { 
      height: auto; min-height: 100vh; 
      padding-bottom: 50px; 
}

.btn-sec1 {
   display: flex; flex-direction: column; 
   gap: 10px; 
   align-items: center;
}

.btn-sec1 .button-learnmore {
   margin-right: 0; 
}

.fixed-icons { 
   display: none; 
}

}}