body {
    margin: 0;
    padding: 0;
    background-color: #f4eee0;
}

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display&display=swap');

.hi {
	height: 600px;
    padding: 150px 0;
    box-sizing: border-box;
    width: 100%;
	    }
	    
	    .about {
	        z-index: 0;
            position: relative;
	    }
	    
	    .hilo {
	        font-family:'Ogg';
	        font-size: 57px;
	        z-index: 1;
            position: relative;
            margin-top: -380px;
            margin-left: -120px;
            text-align: center;
	        line-height: 4.5;
	        -webkit-transition-duration: 0.5s;
	        -moz-transition-duration: 0.5s;
	        -o-transition-duration: 0.5s;
	        transition-duration: 0.5s;
	    }
	    
	    .hilo:hover {
	        font-family:'OggItalic';
	        -webkit-transition: all .6s;
	        -moz-transition: all .6s;
	        -o-transition: all .6s;
	        -ms-transition: all .6s;
	        transition: all .6s;
	    }
	    
	    .head {
	        width: 45%;
	        height: 30%;
	        margin: 0 auto;
	        text-align:center;
	    }
	    
	    .quote {
	        font-family: 'Ogg';
	        font-size: 13px;
	        z-index: 999 !important;
	    }
	    
	    .author {
	        font-family: 'Ogg';
	        font-size: 10px;
	    }
	    
	    .quote i {
	        font-family: 'OggItalic';
	    }
	    .quo {
	        font-family: 'Playfair Display', serif;
	        font-weight: 700;
	        font-size: 60px;
	        z-index: 0;
	        left: 24%;
	        top: -100px;
	        position: relative;
	        color: #efd3c5;
	    }
	    .paragraph {
	        height: 70%;
	        column-count: 2;
	        column-width: 80px;
	        column-gap: 20px;
	        font-family: 'Karla';
	        font-size: 12px;
	        line-height: 1.6;
	        text-align: justify;
	    }
	    
	    .booki {
	        height: 800px;
    padding: 150px 0;
    box-sizing: border-box;
    width: 100%;
	    }
	    
	    
	    
	    .col-108 h1 {
	        font-family: 'Ogg';
	        text-align: center;
	        font-size: 120px;
	        line-height: 0;
	        font-weight: normal;
	        margin-top: -5px;
	        margin-bottom: 62px;
	    }
        
        .col-108 p {
            font-family: 'Karla';
            text-align: justify;
	        font-size: 12px;
	        line-height: 1.4;
        }
        
        .col-108 h2 {
            font-family: 'OggItalic';
	        text-align: center;
	        font-size: 25px;
	        line-height: 1;
	        font-weight: normal;
	        margin-top: -10px;
            
        }
        
        .col-108 img {
            display: block;
            margin-left: auto;
            margin-right: auto;
            width: 30%;
            margin-top: -30px;
            margin-bottom: 30px;
        }
        
        .ti {
            transform: rotate(270deg) translateX(-200px);
            margin-left: 150px;
            margin-top: 100px;
            bottom: 0;
            position: relative;
            
        }
        
.tg  {border-collapse:collapse;border-spacing:0;}
.tg td{
  overflow:hidden;padding:6px 5px;word-break:normal;}
.tg th{
  font-weight:normal;overflow:hidden;padding:6px 5px;word-break:normal;}
.tg .tg-73oq{
    text-align:left;
    vertical-align:top;
    font-family:'Ogg';
    font-size:20px;}
.tg .tg-1tol{
    font-weight:bold;
    text-align:left;
    vertical-align:middle;
    font-family:'Karla';
    font-size: 13px;}
.tg .tg-0a7q{
    text-align:left;
    vertical-align:middle;
    font-family:'Karla';
    font-size: 13px;
    padding:10px 0px;}
.tg .tg-mcqj{
    font-weight:bold;
    text-align:left;
    vertical-align:top;
    font-family:'Karla';
    font-size: 13px;}
@media screen and (max-width: 767px) {
    .tg {width: auto !important;}
    .tg col {width: auto !important;}
    .tg-wrap {overflow-x: auto;-webkit-overflow-scrolling: touch;
        
    }}
.nm {
            font-family: 'Karla';
            font-size: 12px;
            text-align: left;
            line-height: 1.6;
        }
        .exp {
	        float: left;
	        padding: 0px 10px;
	        box-sizing: border-box;
	        height: 100%;
	        }
	        
	     .prof {
	         height: 330px;
	     }  

        .proff {
            height: 500px;
            text-align: right;
        }
	     .run {
	        height: 400px;
            padding: 150px 0;
            box-sizing: border-box;
            width: 100%;
            text-align: center;
	    }
	    
	    .run h2 {
	        font-family: 'Ogg';
	        font-size: 25px;
	    }
 .run button {
     margin-left: 50px;
     margin-top: 20px;
 }


*:focus {outline:none !important}

    #box {
        width: 810px;
        height: 50px;
        border-radius: 3px;
        color: black;
        border: 1px solid black;
        font-family: 'Karla';
        text-transform:uppercase;
        font-size: 13px;
        padding: 15px;
        box-sizing: border-box;
        float: left;
        margin-top: 20px;
        background-color: #efd3c5;
    }
    
    @media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (orientation: portrait) 
  and (-webkit-min-device-pixel-ratio: 1) {
#box {
        max-width: 100%;
        float: none;
  }  
  .run button {
      margin: 20px 0 0 0;
  }
}


@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) {
#box {
       max-width: 100%;
        float: none;
  }  
   .run button {
      margin: 20px 0 0 0;
  }   
}

@media screen and (max-width: 920px) {
#box {
      max-width: 100%;
        float: none;
  }
  .run button {
      margin: 20px 0 0 0;
  }
}

.chng {
    animation: change 5s;
  animation-iteration-count: infinite;
   -webkit-transition: all 1s;
-moz-transition: all 1s;
-o-transition: all 1s;
-ms-transition: all 1s;
transition: all 1s;
}

@keyframes change {
  0% { font-family: 'Ogg'; }
  25% { font-family: 'OggItalic'; }
  50% { font-family: 'Ogg'; }
  75% { font-family: 'OggItalic'; }
}
.bg {
    height: 500px;
    width: 100%;
    padding: 70px 0;
    background-color: #f4eee0;
    box-sizing: border-box;
    text-align: center;
    font-family: 'Ogg';
	font-size: 20px;
}
.bg .row .col-13 ion-icon {
    font-size: 60px;
    --ionicon-stroke-width: 10px;
    margin-top: 20px;
}

.bg .row .col-10 h2 {
    font-family: 'Ogg';
	font-size: 25px;
}
.col-13 {
    width: 13%;
    text-align: center;
}


.col-13 p {
    font-family: 'Karla';
    font-size: 13px;
}