@charset "utf-8";

:root {
  /* colors */
  --black: #000000;
  --black-02: #2a2a2a;
  --white: #ffffff;
  --gray-01:#575757;
  --gray-02:#edefeb;
  --gray-03:#f0f0f0;
  --gray-04:#9f9f9f;
  --gray-05:#f6f6f6;

  --green-light: #a4e94e;
  --green-dark: #003024;
  --bg-grey: #D9DEDD;
  --grey-light: #616866;
  --bg-gold: #faebd9;
  --gold: #D7BA98;
  --dark-black: #333939;


  /* Font sizes */
  --font-size-12: clamp(0.625rem, 0.5947rem + 0.1294vw, 0.75rem);
  --font-size-14: clamp(0.75rem, 0.7197rem + 0.1294vw, 0.875rem);
  --font-size-16: clamp(0.8125rem, 0.767rem + 0.1942vw, 1rem);
  --font-size-12-18: clamp(0.78125rem, 0.6978rem + 0.356vw, 1.125rem);
  --font-size-18: clamp(0.8125rem, 0.7367rem + 0.3236vw, 1.125rem);
  --font-size-24: clamp(1rem, 0.8786rem + 0.5178vw, 1.5rem);
  --font-size-20: clamp(1rem, 0.9393rem + 0.2589vw, 1.25rem);
  --font-size-22: clamp(1.041875rem, 0.961rem + 0.345vw, 1.375rem);
  --font-size-28: clamp(1rem, 0.818rem + 0.7767vw, 1.75rem);
  --font-size-30: clamp(1.25rem, 1.0983rem + 0.6472vw, 1.875rem);
  --font-size-36: clamp(1.1875rem, 0.9296rem + 1.1003vw, 2.25rem);
  --font-size-44: clamp(1.6875rem, 1.4296rem + 1.1003vw, 2.75rem);
  --font-size-48: clamp(1.375rem, 0.9806rem + 1.6828vw, 3rem);
  --font-size-60: clamp(1.5625rem, 1.0316rem + 2.2654vw, 3.75rem);
  --font-size-72:clamp(1.9375rem, 1.3155rem + 2.6537vw, 4.5rem);
  --font-size-100: clamp(2.8125rem, 1.9782rem + 3.5599vw, 6.25rem);

  /* Font weight */
  --fw-light: 300;
  --fw-normal: 400;
  --fw-medium: 500;
  --fw-semi-bold: 600;
  --fw-bold: 700;
  --fw-extra-bold : 800;
  --fw-black : 900;

  /* Font family */
  --primary-font: "Inter", serif;
  --secondary-font: "Marcellus", serif;


}

/* Common-css */
* {margin: 0; padding: 0; text-decoration: none; list-style: none; outline: none; border: none; position: relative; line-height: 1.2em;}
*,*:before,*:after {-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;}
body,html {width: 100%; min-width: 320px; margin: 0 auto; overflow-x: hidden;}
body {margin: 0; padding: 0; background-color: var(--white); font-weight: 400; font-size: 16px; letter-spacing: 0; color: var(--gray-01); min-width: 320px; font-family: var(--primary-font); font-weight: 400;}
img {max-width: 100%; width: auto; height: auto; display: block;}
.rows {width: 100%;}
.container{ width: 92% ; margin: 0 auto ; max-width: 1500px;}
.cover {width: 100%; height: 100%; position: fixed; background: rgba(255, 255, 255, 0.89); top: 0; left: 0; z-index: 1; display: none;}
.flex {display: flex; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox;}
.align-center {align-items: center;}
.align-start {align-items: flex-start;}
.justify-center {justify-content: center;}
.justify-between {justify-content: space-between;}
.align-end {align-items: flex-end;}
.justify-end {justify-content: flex-end;}
.justify-left {justify-content: flex-start;}
.flex-wrap {flex-wrap: wrap;}
.flex-column {flex-direction: column;}
.flex-column-reverse {flex-direction: column-reverse;}
.align-self-start{align-self: flex-start;}
.align-stretch{align-items: stretch;}
.text-center{text-align: center;}
.ws-nowrap {white-space: nowrap;}
.pe-none{pointer-events: none;}
br {line-height: 0;}
input::-ms-reveal,input::-ms-clear {display: none;}
.scrollToTop{bottom:2.5em;z-index:999;display:none;position:fixed;right:20px;background:var(--gray-01) url(../images/arw-up.png) no-repeat center center;width:35px;height:35px;text-align:center;border-radius:3px;-webkit-box-shadow:1px 1px 5px rgba(0,0,0,0.5);box-shadow:1px 1px 5px rgba(0,0,0,0.5);cursor:pointer}
.bold{font-weight: var(--fw-bold);}
.list{margin-left: 1em; margin-bottom: 1em;}
.list li{list-style: disc; color: var(--green-dark); line-height: 1.444444444444444em; text-wrap: balance; margin-bottom: 0.7em; font-size: var(--font-size-18);}

.round_btn{width: 2em; height: 2em; background: var(--bg-gold) url(../images/chevron-right-solid-green.svg) no-repeat center center; background-size: 0.65em; border-radius: 50%; transition: all ease-in-out 0.35s; display: inline-block;}
.btn{font-weight: var(--fw-semi-bold); display: inline-block; font-size: var(--font-size-12-18); color: var(--white); appearance: none; -webkit-appearance: none; cursor: pointer; text-decoration: none; padding: 1.05em 1.55em; background-color: var(--green-light); text-align: center; border-radius: 3em; border: 1px solid var(--green-light); transition: all 0.35s ease-in-out; -webkit-transition: all 0.35s ease-in-out; font-family: var(--primary-font);}
.btn:hover{color: var(--green-light); background-color: var(--white);}

h1{font-size: var(--font-size-72); font-weight: var(--fw-bold); line-height: 1em; letter-spacing: -0.025em; color: var(--green-dark); font-family: var(--secondary-font);}
h2{font-size: var(--font-size-48); font-weight: var(--fw-bold); line-height: 1em; letter-spacing: -0.025em; color: var(--green-dark);font-family: var(--secondary-font);}
h3{font-size: var(--font-size-36); font-weight: var(--fw-black); line-height: 1em; letter-spacing: -0.025em; color: var(--green-dark);font-family: var(--secondary-font);}
h4{font-size: var(--font-size-30); font-weight: var(--fw-bold); line-height: 1em; color: var(--green-dark); letter-spacing: -0.035em;font-family: var(--secondary-font);}
h5{font-size: var(--font-size-24); font-weight: var(--fw-bold); line-height: 1em; color: var(--green-dark);font-family: var(--secondary-font);}
h6{font-size: var(--font-size-16); font-weight: var(--fw-normal); line-height: 1em; color: var(--grey-light); text-transform: uppercase;}
p{font-size: var(--font-size-18); line-height: 1.25em; font-weight: var(--fw-normal); margin-bottom: 1em;}
p:last-of-type{margin-bottom: 0;}

input[type="text"],input[type="tel"],input[type="email"],input[type="password"],textarea,select {color: var(--black-02); border-bottom: 0; width: 100%; font-size: var(--font-size-18); resize: none; background-color: var(--white); padding: 0 0.75em; display: block; appearance: none; -webkit-appearance: none; font-family: var(--primary-font); height: 3em; border-radius: 0.35rem; font-weight: var(--fw-medium); border: 1px solid var(--black-02);}
select{background: var(--white) url(../images/select-down-arrow.png) no-repeat right center;}
select.bg-none{background: var(--white);}
textarea{height: 7em; padding: 1em 0.75em;}
.error input[type="text"],.error input[type="tel"],.error input[type="email"],.error input[type="password"],.error textarea,.error select {border-color: red;}

::placeholder {color: var(--gray-04); font-weight: var(--fw-medium); font-family: var(--primary-font); font-size: var(--font-size-18);}
::-moz-placeholder {color: var(--gray-04); font-weight: var(--fw-medium); font-family: var(--primary-font); font-size: var(--font-size-18);}
::-webkit-input-placeholder {color: var(--gray-04); font-weight: var(--fw-medium); font-family: var(--primary-font); font-size: var(--font-size-18);}


.popup,.popup .cover{height:100%;left:0;position:fixed;top:0;width:100%;z-index:6; display: block;}
.popup{display:none;}
.popup .cover{background:rgba(0,0,0,.75)}
.pop-con{left:50%;max-width:40em;padding:0;position:absolute;top:50%;transform:translate(-50%,-50%);-webkit-transform:translate(-50%,-50%);z-index:6;width:90%; padding: 3em clamp(1.875em, 1.6019em + 1.165vw, 3em); background-color: var(--white); border-radius: 0.5em;}
.popup .pop-con .close{background: var(--green-light) url(../images/close-white.svg) no-repeat center center;width:2.5em;height:2.5em;position:absolute;right:-1em;top:-1em;z-index:4;cursor:pointer; border-radius: 50%; background-size: 0.75em;}
.popup .inp_sec:not(:last-child){margin-bottom: 1em;}
.popup h3{margin-bottom: 1.25em}
.popup .btn_sec{margin-top: 1.5em;}
.popup .inp_sec{flex: 1 0 235px;}
.popup .inp_sec:last-child{flex: 100%;}
.popup .form_group{column-gap: 1em;}
/* Common-css */

/* Header-css */
header{position: fixed; left: 0; top: 0; z-index: 5; padding:1.125em 0;}
header .logo_container img{max-width: 6em;}
header .main_navs{position: fixed; right: -100%; top: 0; height: 100%;background-color: var(--green-dark); width: 85%; max-width: 22em; padding: 1.5em clamp(1.5em, 1.2118em + 1.2298vw, 2.6875em); transition: all 0.5s ease-in-out; -webkit-transition: all 0.5s ease-in-out; z-index: 2; overflow: auto; flex-direction: column; }
header .close {position: absolute; right: 0; top: 0; padding: 0.5em; border-radius: 0.5em;}
header .close img{max-width: 1em;}
header nav{height: 100%;}
header nav a{color: var(--green-light); font-size: 1em; font-weight: var(--fw-medium);}
header nav li:not(:last-child){margin-bottom: 1.5em;}
header .menu_list .icons{margin-right: 0.75em;}
header .menu_list .sub_level li{margin-bottom: 0.85em;}
header.active .main_navs{right: 0;}
header.active .cover{display: block;}
header .menu_container{margin-top: clamp(3.5em, 3.1966em + 1.2945vw, 4.75em); overflow: auto; width: 100%;}
header .hdr_container{align-items: flex-start;}
header .hamburger_menu img{max-width: 1.5625em;}
header .hamburger_menu{margin-left: 0.75em; cursor: pointer;}
header nav a{width: 100%; display: inline-block;}
header .cover{background-color: rgba(0,0,0,.75);}
header.sticky{ background-color:rgba(0, 0, 0, 0.5);}
header.scrolled{top: -100%; transition: all ease-in-out 1s;}
/* Header-css */

/* Footer css */
footer{background: var(--dark-black); padding: clamp(1.25rem, 0.7039rem + 2.3301vw, 3.5rem)}
footer .main_logo img{max-width: 6em;}
footer .row2{padding: 1.5em 0 0;}
footer .copy_rights{color: var(--white); font-size: var(--font-size-14);}
footer .address_col{margin: 2em 0;width: 100%;}
footer .address_col p{color: var(--white); margin-bottom: 0.75em;}
footer .address_col p a,footer .address_col span{color: var(--green-light);}
footer .address_col h6{color: var(--white); margin-bottom: 0.75em;}
.social_link {column-gap: 0.5em;}
.social_link img{max-width: 25px;}
/* Footer css */

/* Hero-Css */
.slider_bg::before{content: ''; width: 100%; height: 100%; position: absolute; background: rgba(0, 0, 0, 0.75); z-index: 1;}
.hero_banner .cont{position: absolute; top: 27%; left: 0; width: 100%; z-index: 2; overflow: hidden;}
.hero_banner h1{color: var(--white); margin-bottom: 0.5em; font-size: clamp(2.8125rem, 2.4029rem + 1.7476vw, 4.5rem);}
.hero_banner h1 span{text-decoration: underline; text-decoration-color: var(--green-light); color: var(--green-light);}
.hero_banner h3{color: var(--white); margin-bottom: 1em; overflow: hidden;}
.hero_banner p{color: var(--white); font-size: var(--font-size-28); max-width: 23em;}
.hero_banner .slider_bg { height: 100dvh;}
.hero_banner .slider_bg img{width: 100%; object-fit: cover; height: 100%;}
.hero_banner .pagination_wrapper{position: absolute; bottom: 2em; right: 0; z-index: 2;}
.hero_banner .pagination_wrapper .hero_banner_slider_pagination {position: relative; left: auto; top: auto; width: auto; bottom: auto;}
.hero_banner .swiper-pagination-bullet{background: var(--white); width: 20px; height: 4px; border-radius: initial;}
.hero_banner .swiper-pagination-bullet-active{background: var(--green-light);}
.hero_banner .anim_slide_right{transition-delay: 1s;}
.hero_banner .anim_fadeIn{transition-delay: 1s;}

.anim_slide_right{transform: translateX(-60%); transition: all cubic-bezier(0.075, 0.82, 0.165, 1) 1.5s; opacity: 0; display: inline-block; }
.swiper-slide-active .anim_slide_right{transform: translateX(0); opacity: 1;}
.anim_slide_down{transform: translateY(-200px); opacity: 0; transition: all cubic-bezier(0.075, 0.82, 0.165, 1) 3.5s;}
.swiper-slide-active .anim_slide_down{transform: translateY(0); opacity: 1;}
.anim_fadeIn{opacity: 0; transition: all cubic-bezier(0.075, 0.82, 0.165, 1) 3.5s;}
.swiper-slide-active .anim_fadeIn{opacity: 1;}
/* Hero-Css */

/* Sectors We Serve css */
.sector_sec{background-color: var(--bg-grey); padding: clamp(2.5rem, 1.514rem + 4.2071vw, 6.5625rem) 0;}
.sector_sec .col_left{width: 100%; margin-bottom: 2em;}
.sector_sec h6{margin-bottom: 0.5em;}
.sector_sec h1{margin-bottom: 0.5em;}
.sector_sec .col{background-color: var(--white); border-radius: 0.5em; padding: 2em; margin-bottom: 1em;}
.sector_sec .col .icon img{max-width: 4em;}
.sector_sec .col .icon{margin-bottom: 1em;}
.sector_sec .col h4{margin-bottom: 1em;}
.sector_sec .col h4 span{color: var(--gold);}
.sector_sec .col h5{margin-bottom: 1em;}
.sector_sec .col .round_btn {margin-top: 1em; display: none;}
.sector_sec .highlights{margin-top: 1em; background-color: var(--bg-gold); padding: 1em; border-radius: 0.5em;}
.sector_sec .highlights .title{font-size: var(--font-size-22); font-weight: var(--fw-bold); font-family: var(--secondary-font); color: var(--green-dark); margin-bottom: 0.5em;}
/* Sectors We Serve css */

/* About Us css */
.about_us{padding: clamp(2.5rem, 1.514rem + 4.2071vw, 6.5625rem) 0; background: linear-gradient(to bottom,  #ffffff 30%,#ede8e3 100%);}
.about_us .col_right{padding-top: 1.5em;}
.about_us h6{margin-bottom: 1em;}
.about_us h2{margin-bottom: 0.75em; }
.about_us .why_choose_arabex h2{text-align: center;}
.about_us h3{margin-bottom: 0.5em;}
.about_us h4{margin-bottom: 0.5em;}
.about_us h4 span{color: var(--gold);}
.why_choose_arabex{margin-top: 2em;}
.why_choose_arabex .col{border: 1px solid var(--gold); width: 100%; padding: clamp(1rem, 0.5146rem + 2.0712vw, 3rem); border-radius: 0.5em; margin-bottom: 1em; box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;}
/* About Us css */

/* Vision misson css */
.vision_misson{background: url(../images/vission-mission.jpg) no-repeat center; background-attachment: fixed; padding:clamp(4.0625rem, 0.4217rem + 15.534vw, 19.0625rem) 0; background-size: cover;}
.vision_misson p{color: var(--green-dark); font-weight: var(--fw-bold);}
.vision_misson .col{padding: 1em; width: 100%; background:rgba(164, 233, 78, 0.8); margin-bottom: 1em; border-radius: 0.5em;box-shadow: rgba(164, 233, 78, 0.16) 0px 10px 36px 0px, rgba(164, 233, 78, 0.06) 0px 0px 0px 1px;}
.vision_misson .col:last-child{margin-bottom: 0;}
.vision_misson .col h2{margin-bottom: 0.5em;}
.vision_misson .container{max-width: 956px;}
/* Vision misson css */

/* Our Core Divisions css */
.our_core_divisions{background-color: var(--dark-black); padding: clamp(3rem, 1.7864rem + 5.178vw, 8rem) 0;}
.our_core_divisions h6{ text-align: center; margin-bottom: 1em; color: var(--white);}
.our_core_divisions h3{ margin-bottom: 0.5em;}
.our_core_divisions p{ color: var(--green-dark);}
.our_core_divisions .col{ width: 100%; padding: 1em; border-radius: 0.5em; margin-bottom: 1em; background-color: #c7d9d4;}
.our_core_divisions .col:last-child{margin-bottom: 0;}
.our_core_divisions .icon{margin-bottom: 1em;}
.our_core_divisions .icon img{max-width: 2.5em;}
/* Our Core Divisions css */

/* Form popup css */
.form_sec .label{font-size: var(--font-size-16); margin-bottom: 0.5em;}
.form_sec .btn{margin-top: 1.5em;}
/* Form popup css */


.thank_you_page{background: linear-gradient(to bottom, #ffffff 30%, #ede8e3 100%); min-height: 100dvh;}
.thank_you_page .icon{margin-bottom: 2em;}
.thank_you_page .icon img{max-width: 35px;}
.thank_you_page h1{text-align: center; margin-bottom: 1rem;}
.thank_you_page p{text-align: center;}
.thank_you_page .col{border: 1px solid var(--gold); width: 100%; padding: clamp(1rem, 0.5146rem + 2.0712vw, 3rem); border-radius: 0.5em; margin-bottom: 1em; box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;}
.thank_you_page .cont{margin-bottom: 2em;}
.thank_you_page .col h3{text-align: center; margin-bottom: 1em; font-size: var(--font-size-18);}

@media only screen and (min-width : 640px) {
  /* Footer css */
  footer .address_col{margin: 0; width: 38%;}
  /* Footer css */
}

@media only screen and (min-width : 768px) {
  /* Header-css */
  header .logo_container img{max-width: 8em;}
  /* Header-css */

  .thank_you_page .col{width: 30%; min-width: 18em;}
  .thank_you_page .row2{column-gap: 1em;}
}

@media only screen and (min-width : 980px) {
  /* Header-css */
  header{padding: 2.125em 0; transition: all ease-in-out 0.25s;}
  header .cover,header.active .cover{display: none;}
  header nav a{font-size: var(--font-size-18); color: var(--white);}
  header nav a:hover{color: var(--green-light);}
  .hamburger_menu{display: none;}
  header .main_navs{position: relative; right: auto; top: auto; width: auto; background-color: transparent; max-width:100%; padding: 0;}
  header .menu_list {flex-direction: row; column-gap: 2em;}
  header .menu_container{overflow: hidden; margin: 0;}
  header .close{display: none;}
  header .hdr_container{align-items: center;}
  header nav li:not(:last-child){margin-bottom: 0;}
  header.sticky{ padding: 1.5em 0;}
  /* Header-css */

  /* Footer css */
  footer .main_logo img{max-width: 11em;}
  footer .row2{padding: 2em 0 0;}
  /* Footer css */

  

  /* Common-css */
  .container{width: 88%;}
  .page_top_margin{margin-top: 4.9375em;}
  .swiper-pagination .swiper-pagination-bullet{display: none;}
  .navigation_container{display: block;}
  h2,h3,h4,.how_it_works .text{letter-spacing: 0.016em;}
  h1{letter-spacing: 0em;}
  select{background-position-x: 95%;}
  .hero_banner .swiper-pagination-bullet{width: 35px; height: 6px;}
  /* Common-css */


  /* Sectors We Serve css */
  .sector_sec .col{width: 48%; overflow: hidden; cursor: pointer;padding: 3em;}
  .sector_sec .cont{align-items: center;}
  .sector_sec .highlights{margin-top: 0; position: absolute; bottom: -100%; background-color: var(--bg-gold);left: 0; padding: 3em;height: 100%; border-radius: 0.5em; width: 100%; transition: all ease-in-out 0.25s;}
  .sector_sec .col:hover .highlights{bottom: 0;}
  .sector_sec .highlights li{transform: translateX(-30px); -webkit-transform: translateX(-30px); opacity: 0; transition: all cubic-bezier(0.23, 1, 0.320, 1) 1.5s; -webkit-transition: all cubic-bezier(0.23, 1, 0.320, 1) 1.5s;}
  .sector_sec .highlights li:nth-child(2){transition-delay: 0.5s;}
  .sector_sec .highlights li:nth-child(3){transition-delay: 0.75s;}
  .sector_sec .highlights li:nth-child(4){transition-delay: 1s;}
  .sector_sec .highlights li:nth-child(5){transition-delay: 1.25s;}
  .sector_sec .highlights li:nth-child(6){transition-delay: 1.5s;}
  .sector_sec .highlights li:nth-child(7){transition-delay: 1.75s;}
  .sector_sec .col:hover  li{transform: translateX(0); opacity: 1;}
  /* Reset animation on hover out */
.sector_sec .col:hover li {
  will-change: transform, opacity;
}
  .sector_sec .col .round_btn {margin-top: 1.5em; display: block; width: 3em; height: 3em;}
  /* Sectors We Serve css */

  /* About Us css */
  .about_us .main_info {flex-wrap: nowrap; justify-content: space-between;}
  .about_us .main_info .col_left{width: 35%;}
  .about_us .main_info .col_right{width: 58%; padding-right: 5%;}
  .about_us .main_info .col_right p{width: 90%;}
  .why_choose_arabex{margin-top: 7em;}
  .why_choose_arabex .col{width: 24%;}
  .why_choose_arabex .more_info{margin-top: 2em; text-align: center;}
  /* About Us css */

  /* Vision misson css */
  .vision_misson .cont{flex-wrap: nowrap; justify-content: space-between;}
  .vision_misson .col{width: 48%; margin-bottom: 0; padding: 4em;}
  .vision_misson{background-size: auto;}
  /* Vision misson css */

  /* Our Core Divisions css */
  .our_core_divisions .col{padding: 2em; margin: 0; width: 35%; text-align: center;}
  .our_core_divisions .cont{flex-direction: row; flex-wrap: nowrap; justify-content: center; column-gap: 2%; margin-top: 1.5em;}
  .our_core_divisions .icon img{max-width: 6em;}
  .our_core_divisions .icon{display: flex; justify-content: center;}
  /* Our Core Divisions css */
  
  
  
}


@media only screen and (min-width : 1280px) {

 /* Header-css */
 header .logo_container img{max-width:15em;}
 /* Header-css */
 
 /* Footer css */
 .social_link{column-gap: 1em;}
 footer .address_col{width: 25%;}
 .social_link img{max-width: 36px;}
 /* Footer css */

 
 /* Sectors We Serve css */
 .sector_sec .col_left{width: 35%;}
 .sector_sec .col_right{width: 58%;}
 /* Sectors We Serve css */
 
 /* About Us css */
 .about_us .main_info .col_right{padding-right: 15%;}
 .about_us .main_info .col_right{padding-top: 5.5em;}
 /* About Us css */
 
 /* Our Core Divisions css */
 .our_core_divisions .col{padding: 4em;}
 /* Our Core Divisions css */

 .thank_you_page .icon img{max-width: 85px;}
}