a:hover{text-decoration: none;}
html
{
box-sizing: border-box;
font-size: 16px;
}
body{ text-transform: capitalize;}
.over{overflow: hidden;}
.dis-block{display: block;}
.txt-transform-cap{text-transform: uppercase;}
.txt-center{text-align: center;}
.dis-grid{display: grid;}
.mrg-auto{margin: auto;}
.mrg-top-5{margin-top: 5%;}
.padd-left-0{padding-left: 0;}
.color-black{color: black;}
#return-to-top {
z-index: 11;
position: fixed;
bottom: 20px;
right: 20px;
background: rgba(0,0,0,.3);
width: 50px;
height: 50px;
display: block;
text-decoration: none;
-webkit-border-radius: 35px;
-moz-border-radius: 35px;
border-radius: 35px;
display: none;
-webkit-transition: all 0.3s linear;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
#return-to-top i {
color: #fff;
margin: 0;
position: relative;
left: 16px;
top: 13px;
font-size: 19px;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
#return-to-top:hover {
background:#d7b669;
}
#return-to-top:hover i {
color: #fff;
}
.header
{
position: relative;
width: 100%;
overflow: hidden;
height: 105vh;
}
.nav
{
display: flex;
justify-content: center;
/*padding: 15px 15px;*/
/*position: absolute;*/
transform: all 0.3s;
background: white;
z-index: 9;
top: 0px;
width: 100%;
}
.nav ul{
display: flex;
align-items: center;
flex-wrap: wrap;
}
.nav ul li
{
display: flex;
}
.nav ul li a
{
font-family: 'Roboto Condensed', sans-serif;
font-size: 1.1em;
color: #333;
padding: 0.25rem 0;
margin: 0 1.80rem;
text-transform: uppercase;
}
.nav ul li.logo .black
{
display: none;
}
.nav ul li.logo a
{
margin:0 4rem;
}
.nav-icon
{
position: absolute;
top: 27px;
right: 30px;
padding: 5px;
width: 40px;
z-index: 1;
cursor: pointer;
}
.nav-icon span
{
background: #333;
width: 30px;
height: 1px;
display: block;
transition: 300ms linear all;
}
.nav-icon span:nth-child(1),
.nav-icon span:nth-child(3)
{
width: 20px;
margin: 0 auto;
}
.nav-icon span:nth-child(2)
{
margin: 5px 0;
width: 32px;
}
.nav-icon:hover span:nth-child(1),
.nav-icon:hover span:nth-child(3){
width: 30px;
}
.full-nav
{
background: #ac8122;
color: #18191d;
position: fixed;
left: 0;
top: 0;
height: 100%;
width: 100%;
padding: 3.75rem;
z-index: 99;
overflow-y: hidden;
visibility: hidden;
opacity: 0;
transform: translateY(-100px);
transition: all .4s ease-in-out;
}
/*there is different between .full-nav.open and .full-nav .open*/
.full-nav.open
{
opacity: 1;
visibility: visible;
transform: translateY(0);
transition: all .4s ease-in-out;
z-index: 99;
}
.full-nav .logo
{
display: flex;
justify-content: center;
padding: 4rem;
}
/*end there*/
.nav2
{
display: flex;
justify-content: center;
}
.nav2 ul
{
display: flex;
align-items: center;
flex-wrap: wrap;
max-width: 700px;
}
.nav2 ul li
{
display: flex;
flex: 51%;
background-color: #f5f5f5;
padding: 0.7rem;
border-bottom: 10px solid #ac8122;
border-right: 10px solid #ac8122;
transition: all 0.5s;
}
.nav2 ul li a
{
font-family: 'Roboto Condensed', sans-serif;
font-size: 1.1em;
color: #18191d;
}
.nav2 ul li a span
{
color: #b9b9b9;
}
.nav2 ul li:hover
{
background-color:#ac81226b;
}
.nav2 ul li:hover a,
.nav2 ul li:hover a span
{
color: white;
}
.social-icons a
{
color: white;
border: 3px solid white;
width: 50px;
height: 50px;
line-height: 40px;
font-size: 20px;
display: inherit;
text-align: center;
border-radius: 50px;
transition: all ease 1s;
margin-top: 40px;
}
.social-icons a:hover i
{
color:#000;
margin-top: -10px;
border-color: #000;
}
.social-icons a:hover
{
color:#000;
margin-top: -10px;
border-color: #000;
}
ul.social-icons.list-inline
{
text-align: center;
margin-top: 22px;
}
.list-inline > li
{
display: inline-block;
padding-right: 5px;
padding-left: 5px;
}
.corner-circle
{
position: absolute;
top: 0;
right: 0;
width: 120px;
height: 120px;
/*height: 280px;*/
background-color: white;
border-radius: 0 0 0 120px;
z-index: 2;
}
.nav-close
{
display: block;
width: 30px;
height: 30px;
position: absolute;
top: 30px;
right: 30px;
}
.nav-close span
{
background: #18191d;
width: 30px;
height: 1px;
display: block;
position: absolute;
top: 14px;
}
.nav-close span:nth-child(1)
{
transform: rotate(45deg);
}
.nav-close span:nth-child(2)
{
transform: rotate(-45deg);
}
.nav.sticky
{
width: 100%;
position: fixed;
background-color: white;
box-shadow: 0 10px 10px -10px rgba(0,0,0,0.35);
animation-name: animationFade;
animation-duration: 1s;
animation-fill-mode: both;
}
@keyframes animationFade
{
from
{
opacity: 0;
-webkit-transform: translate3d(0,-100%,0);
transform: translate3d(0,-100%,0);
}
text-outline:
{
opacity: 1;
transform: none;
-webkit-transform: none;
-o-transform: none;
}
}
.nav.sticky a
{
color: #18191d;
}
.nav.sticky ul li.logo .white
{
display: none;
}
.nav.sticky ul li.logo .black
{
display: inline-block;
}
.nav.sticky .nav-icon span
{
background-color: #18181d;
}
/*slider*/
video#herovideo
{
width: 100%;
}
.bx-wrapper .social-icons a
{
color: white;
border: 1px solid white;
width: 40px;
height: 40px;
font-size: 20px;
display: inherit;
text-align: center;
padding-top: 5px;
transition: all ease 1s;
background: #000;
border-radius: 0px;
}
.bx-wrapper .social-icons a i
{
position: relative;
bottom:7px;
}
.vidContent
{
position: absolute;
top: 290px;
color: #f1f1f1;
width: 100%;
padding: 10px;
text-align: left;
}
.vidContent h1
{
font-family: 'Oswald',sans-serif;
font-size: 5em;
font-weight: bold;
color: white;
text-transform: uppercase;
letter-spacing: 2px;
}
.vidContent p
{
font-family: 'Roboto Condensed', sans-serif;
width: 70%; /*malaz*/
}
#vidBtn
{
font-family: 'Roboto Condensed', sans-serif;
display: inline-block;
font-size: 16px;
padding: 11px 26px;
border:none;
background: white;
color: #333;
cursor: pointer;
margin-top: 18px;
border-radius: 50px;
animation:shadow-pluse 2s infinite;
text-transform: uppercase;
font-size:
}
#vidBtn:hover
{
background: white;
color: black;
animation: none;
-webkit-animation: 0;
}
@keyframes shadow-pluse
{
0%
{
box-shadow: 0 0 0 0px rgba(0,0,0,0.2);
}
100%
{
box-shadow: 0 0 0 20px rgba(0,0,0,0);
}
}
.social-icons a
{
color:#333 !important;
border: 4px solid white;
width:50px;
height: 50px;
line-height: 40px;
font-size: 20px;
display: inherit;
text-align: center;
border-radius: 50px;
transition: all ease 1s;
margin-top: 40px;
background: white !important;
}
ul.social-icons.list-inline
{
text-align: center;
margin-top: 22px;
}
.list-inline>li
{
display: inline-block;
padding-right: 5px;
padding-left: 5px;
}
@media screen and (max-width: 1274px)
{
.vidContent
{
top: 1px;
}
.vidContent h1
{
font-size: 2em;
}
.vidContent p
{
font-size: 0.9rem;
}
#vidBtn
{
font-size: 11px;
margin-top: 0%;
}
.bx-wrapper ul.social-icons.list-inline
{
display: none;
}
.header
{
height: inherit;
}
.full-nav
{
overflow: scroll;
}
}
@media screen and (max-width: 498px)
{
.vidContent
{
bottom: 1px !important;
top: 1px;
}
.vidContent h1
{
font-size: 1.1em;
}
.vidContent p
{
width: 100%;
margin-bottom: 0.2rem;
}
}
@media screen and (max-width: 392px)
{
.vidContent p
{
display: none;
}
.vidContent
{
text-align: center;
padding: 15%;
}
}
/*resposive nav*/
/*hero section*/
.hero
{
background-image: url(../img/hero.jpg);
width: 100%;
display: block;
position: relative;
overflow: hidden;
background-repeat: no-repeat;
background-position: bottom;
box-sizing: border-box;
padding: 10%;
}
/*partners section*/
.partners
{
padding-top: 1%;
/*background: blue;*/
}
.partners .col-3
{
text-align: center;
}
@import url(https://fonts.googleapis.com/css?family=Monsterrat:400,700;);
.snip1538 {
background-color: #ffffff;
color: black;
font-family: 'Monsterrat', sans-serif;
font-size: 16px;
margin: 10px;
max-width: 315px;
min-width: 230px;
overflow: hidden;
position: relative;
text-align: center;
width: 100%;
}
.snip1538 * {
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: all 0.45s ease;
transition: all 0.45s ease;
}
.snip1538:after {
background-color: #f1c30f;
bottom: 0;
content: '';
height: 0%;
left: 0;
position: absolute;
width: 10px;
-webkit-transition: all 0.45s ease;
transition: all 0.45s ease;
}
.snip1538 img {
vertical-align: top;
max-width: 100%;
backface-visibility: hidden;
}
.snip1538 figcaption {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
align-items: center;
z-index: 1;
display: flex;
flex-direction: column;
justify-content: center;
line-height: 1em;
opacity: 0;
}
.snip1538 h3 {
font-size: 1em;
font-weight: 400;
letter-spacing: 1px;
margin: 0;
text-transform: uppercase;
}
.snip1538 h3 span {
display: block;
font-weight: 700;
}
.snip1538 a {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 1;
}
.snip1538:hover > img,
.snip1538.hover > img {
opacity: 0.1;
}
.snip1538:hover:after,
.snip1538.hover:after {
height: 100%;
}
.snip1538:hover figcaption,
.snip1538.hover figcaption {
opacity: 1;
background: #be9a0cab;
}
.home-about
{
background: url('../img/background.jpg');
padding: 4% 0;
overflow: hidden;
}
.home-about .home-about-col-left
{
float: left;
width: 80%;
/*background: blue;*/
font-weight: bolder;
font-size: 24px;
color: white;
text-transform: uppercase;
}
.home-about .home-about-col-right
{
float: right;
width: 20%;
/*background: green;*/
text-align: right;
margin-top: 11px;
}
.home-about .home-about-col-right a
{
background: white;
color: black;
padding: 12px 25px;
font-family: Poppins;
transition: .33s all ease;
}
.home-about .home-about-col-right a:hover
{
background: black;
color: white;
}
@media screen and (max-width: 763px){
.home-about
{
padding-bottom: 5%;
}
.home-about .home-about-col-left
{
width: 100%;
text-align: center;
}
.home-about .home-about-col-right
{
width: 100%;
text-align: center;
margin-top: 6%;
}
}
.misson
{
padding: 4% 0;
background: #eee;
background: url(../img/bg1.png);
/*background-size: contain;
background-repeat: no-repeat;*/
}
.misson p
{
color: gray;
}
.mission-col-left
{
float: right;
width: 50%;
padding: 7% 0;
/*background: red;*/
}
.mission-col-left img
{
max-width: 100%;
}
.mission-col-right
{
float: left;
width: 50%;
/*background: blue;*/
}
.mission-area {
background-color: #f5f6ff;
}
.toggole-boxs {
margin-top: -20px;
}
.toggole-boxs h3 {
font-size: 18px;
background-color: #ffffff;
margin-bottom: 0;
margin-top: 20px;
outline: none;
padding: 20px 30px 20px 60px;
color: #434345;
border-left: 5px solid #ac8122;
cursor: pointer;
position: relative;
}
.toggole-boxs h3:before,
.toggole-boxs h3:after {
content: '';
position: absolute;
left: 30px;
top: 30px;
width: 10px;
height: 2px;
background-color: #434345;
}
.toggole-boxs h3:before {
-webkit-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
-webkit-transition: 0.3s;
-o-transition: 0.3s;
transition: 0.3s;
}
.toggole-boxs h3.ui-state-active:before {
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg)
}
.toggole-boxs div {
background-color: #ffffff;
padding: 0 30px 20px 60px;
border-left: 5px solid #ac8122;
}
@media screen and (max-width: 763px)
{
.mission-col-left
{
display: none;
}
.mission-col-right
{
width: 100%;
}
}
/*logo color #ac8121 */
/*hero section*/
.breadcrumb-a
{
font-size: 11px;
font-weight: 400;
letter-spacing: 0.4em;
text-decoration: none;
text-transform: uppercase;
color: #000000b0;
}
.breadcrumb-a:hover
{
color: black;
}
.breadcrumb-page-name
{
letter-spacing: 3px;
}
/*about page*/
.circle
{
border-radius: 8px;
display: inline-block;
height: 8px;
width: 8px;
background: #ac8122;
}
.about-little
{
padding-top: 5%;
}
.about-little-col
{
float: left;
width: 50%;
}
.about-little-col:nth-child(1)
{
font-size: 26px;
border: 1px rgba(0,0,0,0.15) solid;
padding: 17px;
}
.about-little-col:nth-child(2)
{
font-size: 16px;
color: #6f6f6f;
padding-left:3%;
}
@media screen and (max-width: 767px)
{
.about-little-col
{
width: 100%;
}
.about-little-col:nth-child(2)
{
padding-top: 4%;
}
}
.about-long
{
margin-top: 4%;
}
.about-border
{
padding-top: 2%;
border-top: 1px rgba(0,0,0,0.15) solid;
}
.about-long-col
{
float: left;
}
.about-long-col:nth-child(1)
{
width: 40%;
}
.about-long-col:nth-child(1) img
{
max-width: 100%;
}
.about-long-col:nth-child(2)
{
width: 60%;
padding-left: 2%;
}
.about-long-col:nth-child(2) h2
{
margin-bottom: 4%;
}
.about-long-col:nth-child(2) p
{
color: #6f6f6f;
}
@media screen and (max-width: 767px)
{
.about-border
{
padding-top:4%;
}
.about-long-col:nth-child(2) h2
{
margin-top: 4%;
}
.about-long-col
{
width: 100% !important;
}
}
/*contact page*/
.contact-page
{
background: white;
color: black;
}
.padd-top-7
{
padding-top: 7%;
padding-bottom: 6%;
}
.contact-col-left
{
/*background: red;*/
float: left;
width:50%;
position: relative;
}
.contact-social-col
{
float: left;
width: 15%;
/*background: blue;*/
}
.contact-form-col
{
float: right;
width: 80%;
/*background: green;*/
position: absolute;
right: 40px;
top: 100px;
width: 200px;
height: 200px;
}
.contact-col-right
{
/*background: blue;*/
float: right;
width: 50%;
padding-top: 4%;
padding-bottom: 4%;
}
#contact-form input
{
background: none;
border: none;
outline: none;
border-bottom: 2px solid black;
display: block;
width: 100%;
transition: all .4s ease-in-out;
}
#contact-form input:focus, #contact-form textarea:focus {
border-color: transparent;
border-bottom: 2px solid #ad821c;
}
#contact-form textarea
{
width: 96%;
background: none;
border: none;
outline: none;
border-bottom: 2px black solid;
}
#contact-form a
{
color: white;
padding: 2%;
background: linear-gradient(to right, #ac8122, #f1d642);
border-radius: 50px;
padding: 10px 22px;
}
#contact-form a:hover
{
background: linear-gradient(to left, #ac8122, #f1d642);
}
.form-col
{
float: left;
width: 44%;
/*background: green;*/
margin-left: 1%;
}
.form-col:nth-child(even)
{
float: left;
width: 45%;
/*background: green;*/
margin-left: 5%;
}
.test-parent
{
position: relative;
/*background: blue;*/
width: 52%;
}
.test-form
{
background: white;
width: 48%;
float: right;
padding-left: 5%;
box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
}
.map-box
{
box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
}
.test-child
{
position: absolute;
/*background: green;*/
top: -32px;
right: 0;
width: 403px;
height: 571px;
}
.social-test
{
/*background: yellow;*/
/*float: left;*/
height: 582px;
display: grid;
width: 14%;
}
.social-center
{
margin: auto;
}
.social-test2
{
position: absolute;
top: 5%;
left: -16%;
background: white;
width: 65px;
display: grid;
height: 509px;
box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
}
.form-over
{
margin-left: 3%;
}
@media screen and (max-width: 949px)
{
.test-form
{
width: 100%;
margin-bottom: 5%;
/*background: red;*/
}
.test-parent
{
position: static;
width: 100%;
}
.test-child
{
position: inherit;
height: inherit;
width: 100%;
}
.form-over
{
overflow: hidden;
margin-left: auto;
}
.map-box
{
height: 497px;
}
}
/*about section*/
.about-section
{
padding: 3% 0;
}
.about-sec-clo
{
float: left;
width: 50%;
}
.about-sec-clo:nth-child(2)
{
padding-left: 3%;
padding-bottom: 2%;
}
.about-sec-clo img
{
max-width: 100%;
}
.about-sec-clo h5
{
font-size: 17px;
}
.about-sec-clo h5:after
{
content: '';
display: block;
height: 3px;
margin: 15px 0px;
width: 80px;
background: linear-gradient(to right, #ac8122, #f1d642);
}
.about-sec-clo p
{
font-size: 15px;
color: #677C7E;
font-weight: 400;
line-height: 2;
}
.about-sec-clo a
{
color: white;
padding: 1% 5%;
background: linear-gradient(to right, #ac8122, #f1d642);
border-radius: 50px;
padding: 10px 22px;
}
.about-sec-clo a:hover
{
background: linear-gradient(to left, #ac8122, #f1d642);
}
@media screen and (max-width: 767px)
{
.about-sec-clo
{
width: 100%;
}
.about-sec-clo h5
{
margin-top: 1.2rem;
}
}
}
---------------------
/*footer section*/
#footer {
position: relative;
background-color: #eee;
border-top: 5px solid rgba(0,0,0,.2);
}
#copyrights {
padding: 40px 0;
background-color: #ddd;
font-size: 14px;
line-height: 1.8;
}
#copyrights .col_half {
margin-bottom: 0!important;
width: 48%;
}
.col_last {
margin-right: 0!important;
float: right;
clear: right;
width: 48%;
}
.clearfix::after {
display: block;
clear: both;
content: "";
}
.copyrights-menu {
margin-bottom: 10px;
}
.tright {
text-align: right!important;
}
.copyright-links a{display:inline-block;margin:0 3px;color:#333;border-bottom:1px dotted #444}
.copyright-links a:hover{color:#555;border-bottom:1px solid #666}
.copyrights-menu a {
font-size: 14px;
margin: 0 10px;
border-bottom: 0!important;
}
@media screen and (max-width: 767px)
{
.col_last
{
display: none !important;
}
.col_half
{
width: 90% !important;
}
}